

.swal2-container {
  z-index: 10000 !important;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*:focus {
	outline: 0 !important;
}



/*----FONTS USED-----*/

@font-face {
	font-family: caros-regular;
	src: url(../fonts/Caros.otf);
}

@font-face {
	font-family: caros-bold;
	src: url(../fonts/Caros_Bold.otf);
}

@font-face {
	font-family: caros-light;
	src: url(../fonts/Caros_Light.otf);
}

@font-face {
	font-family: caros-medium;
	src: url(../fonts/Caros_Medium.otf);
}




html,
body {
	font-family: 'caros-regular', serif;
	scroll-behavior: smooth;
	margin: 0!important;
	padding: 0!important;
  width: 100%;
	font-smoothing:antialiased;
}

body{
	overflow-x: hidden;
}

a{
	text-decoration: none !important;
	cursor: pointer;
}


.checked {
  color: orange !important;
}


/* ----TEXT COLORS -----*/

.blue-text{
	color: #5080ff !important;
}

.light-blue-clr{
	color: #00daf9 !important;
}

.black-clr{
	color: #000000 !important;
}






.top-bar-outer{                            /*--Top Navbar---*/
	padding: 0.8rem 13rem;
	background-image: linear-gradient(to right, #00d9f9 , #0095f9);
}


.top-bar-outer a{
	font-family: 'caros-regular', serif;
	float: right;
	font-size: 0.7rem;
	margin-left:  1.2rem;
}


.top-bar-outer .a-2{
	color: #00e5fd;
}

.top-bar-outer .a-1{
	color: #FFFFFF;
}



.main-navbar{                                 /*--Main Navbar---*/
	background-color: #ffffff !important;
	padding: 0.8rem 11rem 0.8rem 13rem;
}


.navbar-brand img{
	width: 6rem;
	height: auto;
}


.navbar-cart{
	width: 1rem;
	margin-top: 0.2rem;
	margin-right: 0.5rem;
}

.nav-span{
	background-color: #edf2ff;
	color: #000000;
	margin-top: 0.4rem;
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	font-size: 0.7rem;
}


.navbar-form{
	background-color: #f8f8f8;
	padding: 0.4rem 0.4rem 0.4rem 2rem;
	border-radius: 8px;
}

.navbar-form input{
	border: none;
	background-color: transparent;
	font-size: 0.7rem;
}

.navbar-form .input-1{
	width: 10rem;
	border-right: 1px solid #e9e9e9;
}

.navbar-form .input-2{
	width: 5rem;
	border-right: 1px solid #e9e9e9;
}
.navbar-form .input-3{
	width: 5rem;
}

.nav-search{
	padding: 0.3rem 01.2rem;
	font-size: 0.7rem;
	background-image: linear-gradient(to right, #0094f9 , #00d9f9);
	border: none;
}

.search-icon{
	width: 0.8rem;
	margin-right: 0.4rem;
}

.main-navbar .nav-link{
  font-size: 0.7rem;
}





.bottom-navbar{                               /*--Bottom Navbar---*/
	background-color: #f8f8f8 !important;
	padding: 0.2rem 10rem 0.2rem 22rem;
	border-bottom: 2px solid #00a4f9;
}


.bottom-navbar li{
	list-style-type: none;
}

.bottom-navbar li a{
	font-family: 'caros-regular', serif;
	color: #26232b;
	font-size: 0.8rem;
	margin-right: 0.8rem;
}

.down-arrow{
	width: 0.6rem;
	height: auto;
}


.main-navbar li a{
	font-family: 'caros-regular', serif;
	color: #26232b;
	font-size: 0.7rem;
	margin-left: 0.6rem;
}





.caption-div-1{                            /*--------------- Banner Css Start -----------------*/
	top:10%;
	left:14%;
}

.caption-div-1 h1{
	font-family: 'caros-bold', serif;
	font-size: 2rem;
}

.caption-div-1 p{
	font-family: 'caros-regular', serif;
	font-size: 0.8rem;
	color: #7b7b7b;
	margin-top: 1rem;
}


.shop-all-btn{
	font-family: 'caros-bold', serif;
	color: #ffffff;
	font-size: 1rem;
  padding: 0.6rem 2.2rem;
  background-image: linear-gradient(to right, #0095f9 , #00d9f9);
  border:  none;
}


.caption-div-2{
	bottom:8%;
	left:14%;
}

.caption-div-2 h2{
	font-family: 'caros-bold', serif;
	font-size: 2rem;
}

.caption-div-2 p{
	font-family: 'caros-regular', serif;
	font-size: 0.8rem;
	color: #ffffff;
	margin-top: 1rem;
	opacity: 0.6;
}


.caption-div-3{
	bottom:11%;
	left:62% !important;
}

.caption-div-3 h2{
	margin-top: 0.2rem;
	margin-left: 1rem;
	font-family: caros-light;
	font-size: 2rem;
}

.caption-div-3 p{
	font-family: 'caros-regular', serif;
	font-size: 0.8rem;
	margin-left: 1.4rem;
	margin-top: -0.4rem;
	color: #ffffff;
	opacity: 0.6;
}

.play-btn{
	width: 4rem;
}


.banner-prev-icon{
  position: absolute;
  top: 14%;
  right: 22%;
}

.banner-prev-icon img{
	width: 1.5rem;
}


.banner-next-icon{
  position: absolute;
  top: 14%;
  left: 22%;
}

.banner-next-icon img{
	width: 1.5rem;
}



#promo-product-categories{                         /*  Promo products Start */
	background-color: #f0f4ff;
	padding: 6rem 13rem 2rem 13rem;
}


#promo-product-categories h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #26232b;
}

#promo-product-categories p{
	font-family: 'caros-regular', serif;
	font-size: 0.8rem;
	color: #8a91a5;
}

#promo-product-categories .first-div img{
  width: 5.5rem;
}

#promo-product-categories .second-div{
	padding: 0.6rem 3rem;
}


#promo-product-categories .third-div{
	padding: 1rem 1rem 1rem 3rem;                    /*  Promo products Ends */
}




#categories{                                        /*  Categories Start */
	padding: 2rem 13rem 8rem 13rem;
	background-image: url("../images/background/promo-bg.jpg"); /* The image used */
  background-color: #0090f9; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}



#categories .col-md-4{
 padding: 0rem;
 border-radius: 10px;
 max-width: 28%;
 margin:  0 auto;
 cursor: pointer;
}

.categories-bg{
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.blue-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	border-radius: 12px;
	z-index: 100 !important;
}

#categories .col-md-4:hover .blue-bg{
	background-color: #0094f9;
	transition: 0.5s;
	opacity: 0.6;
}

#categories h3{
	font-family: 'caros-bold', serif;
	font-size: 1.8rem;
	z-index: 200 !important;
	position: absolute;
	top: 62%;
	left: 10%;
	color: #ffffff;
}

#categories p{
 font-family: 'caros-regular', serif;
 font-size: 0.9rem;
 font-weight: 500;
 z-index: 200 !important;
 position: absolute;
 top: 70%;
 left: 10%;
}



.explore_btn{
	z-index: 200 !important;
	position: absolute;
	left: 50%;
	top: 85%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	padding: 0.8rem 2rem;
	width: 80%;
	border-radius: 10px;
	border: 6px solid #26a7ff;
	font-size: 1rem;
	text-align: center;
}

.explore_btn:hover{
	transition: 0.5s;
  color: #ffffff;
  background-color: #26a7ff;
  border: 6px solid #ffffff;
}

#categories .col-md-4:hover .explore_btn{
	transition: 0.5s;
  color: #ffffff;
  background-color: #26a7ff;
  border: 6px solid #ffffff;
}


.earth_img{
	width: 1.2rem;
	margin-right: 0.5rem;
}

.bottom{
	margin-top: 4rem !important;
}

.top h3{
	top: 52% !important;
}

.top p{
	top: 60% !important;
}

.top .explore_btn{
	top: 75% !important;
}

.top .blue-bg{
  height: 80% !important;
}
                                          /*  Categories ENDS */




#deals{                                                                              /*  Deals Starts */
 padding: 4rem 13rem 4rem 13rem;
 background-image: url("../images/background/deals-bg.jpg"); /* The image used */
 background-color: #0090f9; /* Used if the image is unavailable */
 width: 100%;
 height: auto; /* You must set a specified height */
 background-position: center; /* Center the image */
 background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover; /* Resize the background image to cover the entire container */
}


#deals h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #ffffff;
}

#deals .previous-button, .next-button{
	border: none;
	background-color: transparent;
	margin-right: 1rem;
}

#deals .previous-button img{
 width: 1.5rem;
}

#deals .next-button img{
 width: 1.5rem;
}

#deals .first-div img{
  width: 5.5rem;
}

#deals .second-div{
	padding: 0.6rem 3rem;
}

#deals .third-div{
	overflow-x: hidden;
	padding: 0rem;
	border-radius: 12px;
	min-height: 60vh;
}


#deals .item{
	padding: 2rem 1.5rem 2rem 1.5rem;
	background-color: #ffffff;
	border-radius: 12px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#deals .item h4{
	font-family: caros-regular;
	font-size: 1.2rem;
	font-weight: 600;
}


#deals .item h5{
	font-family: caros-medium;
	font-size: 1.4rem;
	font-weight: 800;
	color: #0094f9;
}

#deals .item span{
	font-size: 1rem;
	margin-left: 0.5rem;
	color: #58cc19;
	font-weight: 400;
}

#deals .add_to_cart{
	width: 80%;
}

#deals .deal-product{
	height: auto;
	position: absolute;
	width: 90%;

}
                                           /*  Deals Ends */




#top-brands{                         /*  Top Brands Start */
	padding: 3rem 13rem 2rem 13rem;
	background-image: url("../images/background/top-brands-bg.jpg"); /* The image used */
  background-color: #efefef; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}


#top-brands h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #ffffff;
}

#top-brands .first-div img{
  width: 5.5rem;
}

#top-brands .second-div{
	padding: 0.6rem 3rem;
}

#top-brands .brand-circular-img{
	width: 100%;
}

#top-brands .margin-top{
  margin-top: 3rem;
}

#top-brands a{
	font-size: 1.2rem;
	color: #26232b;
	font-weight: 600;
}                                /*  Top Brands Ends */









#featured-products{                         /*  Featured products Start */
	background-color: #ffffff;
	padding: 8rem 13rem 6rem 13rem;
}


#featured-products h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #26232b;
}

#featured-products .first-div img{
  width: 5.5rem;
}

#featured-products .second-div{
	padding: 0.6rem 3rem;
}


#featured-products .third-div{
	padding: 1rem 1rem 1rem 1rem;
}


#featured-products .product{
	padding: 1.5rem 2rem;
	background-color: #f8f8f8;
	max-width:92%;
	margin: 0 auto !important;
	border-radius: 10px;
}


.pencil-img{
	width: 1.6rem !important;
	height: auto;
}


#featured-products .product .product-img{
	width: 100%;
	height: auto;
	max-height: 10rem;
	object-fit: contain;
}


#featured-products .product h3{
	font-family: 'caros-light', serif;
	font-size: 1.4rem;
	font-weight: 600;
}


#featured-products .product h4{
	font-family: 'caros-medium', serif;
	font-size: 1.1rem;
	font-weight: 800;
	color: #0094f9;
}

.add_to_cart{
	width: 100%;
	padding: 1.2rem;
	border-radius: 8px;
	border: none;
	font-size: 1.2rem;
	background-color: #26232b;
}

#featured-products .product .cart-icon{
	width: 1.2rem;
	position: absolute;
	left: 24%;
	margin-top: 0.3rem;

}


#featured-products .my-next-button{
	border: none;
	background-color: transparent;
}

#featured-products .my-next-button img{
 width: 1.5rem;
}


#featured-products .my-previous-button{
	border: none;
	background-color: transparent;
	margin-right: 2rem;
}


#featured-products .my-previous-button img{
 width: 1.5rem;                                     /*  Featured products Ends */
}





#blogs{                                                    /*  Blogs css Start */
	padding: 4rem 13rem 4rem 13rem;
	background-image: url("../images/background/blogs-bg.jpg"); /* The image used */
  background-color: #efefef; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}


#blogs h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #26232b;
}

#blogs .first-div img{
  width: 5.5rem;
}

#blogs .second-div{
	padding: 0.6rem 3rem;
}


#blogs .third-div{
	padding: 3rem 1rem 1rem 1rem;
}

#blogs .third-div a{
	font-size: 0.9rem;
}

#blogs .col-md-4{
	padding: 0;
	background-color: #f8f8f8;
	max-width:30% !important;
	margin: 0 auto !important;
	border-radius: 20px;
	border: 8px solid #ffffff;
}


#blogs .blog-img{
	width: 100%;
	height: auto;
	max-height: 10rem;
	object-fit: cover;
}


#blogs .blog-inner{
	width: 100%;
	height: auto;
	padding: 1.5rem 2rem 1.5rem 1.5rem;
}

#blogs .blog-inner h3{
	font-family: 'caros-bold', serif;
	font-weight: 800;
	font-size: 1.4rem;
}

#blogs .blog-inner p{
  color: #909090;
	font-size: 0.9rem;

}

#blogs .blog-inner a{
	font-size: 0.9rem;

}                                         /*  Blogs css Ends */



/*----FOOTER START----------*/

footer{
	padding: 5rem 13rem 2rem 13rem;
	background-image: url("../images/background/footer-bg.jpg"); /* The image used */
  background-color: #0090f9; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}


footer .footer-logo{
   width: 6rem;
}


footer h3{
	color: #ffffff;
	font-size: 1.4rem;
}

footer ul{
	list-style-type: none;
}

footer ul li{
	margin-top: 0.2rem;
}

footer a{
	color: #ffffff;
	font-size: 0.9rem;
	letter-spacing: 0.02rem;
}

footer p{
	color: #ffffff;
	font-size: 0.9rem;

}

footer span{
	color: #ffffff;
}


footer .chat_btn{
	background-color: #00daf9;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 0.9rem;
	padding: 0.6rem 2.5rem;
}

footer .chat_btn img{
  width: 1.5rem;
  margin-right: 0.5rem;
}


.copyrights_div{
	padding: 1rem 1rem;
}

.copyrights_div a{
	font-size: 0.9rem;
	margin-right: 2rem;
}

.social{
	margin-right: 1rem;
	width: 2.5rem;
}


/*----FOOTER END----------*/




/*--------- Product Listing Page Css Start ---------*/


#hero-section{
	padding: 6rem 2rem 6rem 2rem;
	background-image: url("../images/background/hero-bg.jpg"); /* The image used */
  background-color: #000000; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

}



#hero-section h3{
	font-family: caros-bold;
	font-size: 2rem;
	color: #ffffff;
	margin-top: 1rem;
}



#product-listing-main{

	background-color: #F0F4FF;
	padding: 6rem 5rem 5rem 5rem;;
}

#product-listing-main .left{
	background-color: #F0F4FF;
}

#product-listing-main .left p{
 font-size: 1rem;
}

#product-listing-main .right{
	background-color: #ffffff;
	border-radius: 8px;
}


.sort-btn{
	background-color: #26232B;
	border: none;
	padding-left: 3rem;
	padding-right: 3rem;
}



#product-listing-main .product{
	padding: 1.5rem 2rem;
	background-color: #f8f8f8;
	max-width:30% !important;
	margin: 0 auto !important;
	border-radius: 10px;
}



#product-listing-main .product .product-img{
	width: 100%;
	height: auto;
	max-height: 10rem;
	object-fit: contain;
}


#product-listing-main .product h3{
	font-family: 'caros-light', serif;
	font-size: 1.4rem;
	font-weight: 600;
}


#product-listing-main .product h4{
	font-family: 'caros-medium', serif;
	font-size: 1.1rem;
	font-weight: 800;
	color: #0094f9;
}

#product-listing-main .add_to_cart{
	width: 100%;
	padding: 1.2rem;
	border-radius: 8px;
	border: none;
	font-size: 1.2rem;
	background-color: #26232b;
}

#product-listing-main .product .cart-icon{
	width: 1.2rem;
	position: absolute;
	left: 20%;
	margin-top: 0.3rem;

}



/*--------- Product Listing Page Css Ends ---------*/