@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url("https://db.onlinewebfonts.com/c/bab15956435794e3d48309ddf0700b4c?family=Filson+Soft");

@font-face {
  font-family: Filson Soft;
  src: url(https://cdn.shopify.com/s/files/1/0654/8881/4328/files/FilsonProBold-Bold.otf?v=1659595521);
}
@font-face{
  font-family: Filson Soft regular;
  src:url(https://cdn.shopify.com/s/files/1/0654/8881/4328/files/FilsonProRegular-Regular.otf?v=1659595994)
}
@font-face{
  font-family: Filson Soft light;
  src:url(https://cdn.shopify.com/s/files/1/0654/8881/4328/files/FilsonProLight-Light.otf?v=1659636334)
}

/* CSS Document */

/******************************

[Table of Contents]
1. header 			
2. mobile								
3. home-banner					
4. category-product				 
5. top product									
6. dal category									
7. brand									
8. footer						
9. prodcut filter
10. prodcut list								
11. login css start
12. otp css start
13. login css start
14. dashboard css start
15. order css start
16. order track css start
17. mobile filter css start

******************************/
*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
    font-family: 'Poppins', sans-serif;
	/*font-family: 'League Spartan', sans-serif;*/
	font-size: 14px;
	font-weight: 500;
	background: #FFFFFF;
}
.container-new{
	padding-left: 15px;
	padding-right: 15px;
	margin: auto;
	width: 100%;
	/*max-width: 1340px;*/
}
.bg-theme{
	background-color:#317dc0;
}
.bg-greenlight{
	background-color:#1b6535;
}
.bg-grey{
	background-color:#e0e0e0;}
a{
	text-decoration:none;
}
.font-w600{
	font-weight:600;
}
.font-10{
	font-size:10px;
}
.font-12{
	font-size:12px;
}
.font-13{
	font-size:13px;
	line-height:1.4;
}
.font-14{
	font-size:14px;
	line-height:1.5;
}
.font-15{
	font-size:15px;
	line-height:1.5;
}
.font-16{
	font-size:16px;
	line-height:1.4;
}
.font-18{
	font-size:18px;
	line-height:1.4;
}
.font-20{
	font-size:20px;
	line-height:1.3;
}
.font-22{
	font-size:22px;
	line-height:1.4;
}

.font-24{
	font-size:24px;
	line-height:1.4;
}
.font-32{
	font-size:32px;
	line-height:1.4;
}

.text-green{
	color:#0ca709;
}
.text-grey{
	color:#737373;
}
.mb-30{
	margin-bottom:30px;
}
.py-6{
	padding:6px 0px;
}
/********************
 1. header css start 
 *******************/
.header-top-row{
	padding:15px 0px;
}
.logo > a {
	font-size: 30px;
	color: #1b6535;
	font-family: rockwell;
font-weight: bold;
}
header{
    background:#fff;
}
.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1111;
	margin: auto;
	transition: all .1s ease-in-out;
}

/* === MARQUEE BAR === */
.marquee-bar {
	background-color: #000;
	color: #fff;
	padding: 8px 0;
	overflow: hidden;
	white-space: nowrap;
}
.marquee-track {
	display: inline-block;
	animation: marquee-scroll 30s linear infinite;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.3px;
}
@keyframes marquee-scroll {
	0%   { transform: translateX(100vw); }
	100% { transform: translateX(-100%); }
}

/* === NEW HEADER / NAVBAR === */
.new-header {
	background: #fff;
	border-bottom: 1px solid #e8e8e8;
	box-shadow: 0 2px 8px rgba(27,101,53,0.08);
}
.new-navbar-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 0;
}
.new-logo { flex-shrink: 0; margin-left: 25px;}
.new-categories {
	flex: 1;
	display: flex;
	justify-content: center;
}
.inline-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	align-items: center;
}
.inline-menu > li {
	position: relative;
	display: inline-block;
}
.inline-menu > li > a {
	color: #222 !important;
	font-size: 15px;
	/*font-weight: 600;*/
	padding: 8px 14px;
	display: block;
	white-space: nowrap;
	font-family: Filson Soft regular;
}
.inline-menu > li > a:hover { color: #1b6535 !important; }
.inline-menu > li > .sub-menu {
	position: absolute;
	z-index: 999;
	top: 38px;
	left: 0;
	background: #fff;
	width: 200px;
	display: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	border-top: 2px solid #1b6535;
}
.inline-menu > li:hover > .sub-menu { display: block; }
.inline-menu > li > .sub-menu > li a {
	padding: 9px 14px;
	color: #333 !important;
	display: block;
	font-size: 13px;
	font-weight: 500;
}
.inline-menu > li > .sub-menu > li:hover a {
	background-color: #1b6535;
	color: #fff !important;
}
.new-nav-icons {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-shrink: 0;
	margin-right: 25px;
}
.nav-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	text-decoration: none;
	position: relative;
}
.nav-icon-link i {
	font-size: 20px;
	color: #e89f2e;
}
.nav-icon-link:hover i { color: #1b6535; }
.cart-badge {
	position: absolute;
	display: inline-flex;
  	align-items: center;
  	justify-content: center;
	top: -8px;
	right: -14px;
	background: #327fc2;
	color: #fff;
	height: 21px;
  	min-width: 21px;
  	line-height: 1;
  	border-radius: 21px;
	font-size: 10px;
	text-align: center;
	font-weight: 700;
}


/* === GREEN CATEGORY BAR === */
.new-category-bar {
	background-color: #1b6535 !important;
}
.new-category-bar .main-menu > li > a,
.new-category-bar .nav-link {
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
}
.new-category-bar .main-menu > li > .sub-menu > li a {
	color: #000 !important;
}
.new-category-bar .main-menu > li > .sub-menu > li:hover a {
	background-color: #1b6535;
	color: #fff !important;
}
.product-sarch > span{
	cursor:pointer;
	padding:0px 20px;
}
.media{
    display: flex; 
	justify-content: center;
	align-items: center;
}
/* .main-menu{
	display:flex;
	justify-content:space-between;
} */
.main-menu > li{
	position:relative;
	display: inline-block;
	padding: 8px 0px;
}
.main-menu > li .sub-menu{
	position:absolute;
	z-index: 11;
	text-align: center;
	top: 53px;
	background:#fff;
	width:175px;
	display:none;
	}
.main-menu > li > .sub-menu > li a {
    background-color:#fff;
    /*padding: 10px 33px;*/
	padding: 10px 10px;
    color: #000 !important;
    text-align: left;
    display: block;
    font-weight: 500;
	font-size:15px;
	transition:2s easy-in-out; 
}
.main-menu > li > .sub-menu > li:hover a{
    background-color:#1b6535;
	color: #fff !important;
}
.main-menu > .nav-item > a{
	color:#fff;
}
.cart-block .cart-qty {
	background-color: #000;
	width: 25px;
	height: 25px;
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
	color: #fff;
	margin-left: 10px;
}
/********************
 2. mobile css start 
 *******************/
.mobile-menu-icon i {
    cursor: pointer;
}
.sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  width: 300px;
  background-color: #fafafa;
}

#sidebar-main {
  top: 56px;
}

.sidebar.right {
  right: -300px;
  text-align: right;
}

.sidebar.left {
  left: -300px;
}

.sidebar a {
	text-decoration: none;
	display: block;
	font-size: 1rem;
	font-weight: initial;
}

.sidebar .wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 1em;
  padding-top: 1.5em;
  overflow-y: auto;

  -webkit-box-sizig: border-box
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sidebar nav {
  margin-bottom: 24px;
}

.sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

.sidebar nav ul li {
  padding: 8px 0;
  margin: 4px 0;
}

.sidebar nav ul li.title {
	font-weight: bold;
}

.float-right {
	float: right;
}
.float-left {
	float: left;
}
.mobile-searh-bar{
	position:relative;
}
.mobile-searh-bar > .fa-search{
    position: absolute;
    top: 10px;
    left: 10px;
	cursor:pointer;
}
.mobile-searh-bar > input{
    padding: 4px 0px 4px 33px!important;
	font-size:14px;
}
.mobile-menu-holder > .accordion-item{
	background-color:inherit;
}

.mobile-menu-holder > .accordion-item > .accordion-header > .accordion-button{
	background-color:inherit;
	padding: 10px 0px;
}
.mobile-menu-holder > .accordion-item > .accordion-header > .accordion-button:focus{
	box-shadow:inherit;
}
.mobile-sub-menu{
	padding:0px 0px 0px 0px;
}
.mobile-sub-menu > ul > li{
	margin-bottom:10px;
}
.mobile-sub-menu > ul > li > a{
	font-size:14px;
}
.cart-btn-mobile {
	position: relative;
	padding:0px 15px!important;
}
.cart-btn-mobile > i {
	font-size:20px;
}
.logo-mobile > a > img {
    min-width:180px;
}

/* .cart-span-mobile{
    position: absolute;
    top: 0;
    right: 0px;
    width: 20px!important;
    height: 20px!important;
    line-height: 20px!important;
}*/

/* mobile menu css end */

/********************
 3. home-banner css start 
 *******************/
.home-swiper { width: 100%; }
.home-swiper .swiper-slide img { width: 100%; display: block; }
.home-swiper .swiper-button-prev,
.home-swiper .swiper-button-next {
	background: rgba(27,101,53,0.75);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	transition: background 0.3s;
}
.home-swiper .swiper-button-prev:hover,
.home-swiper .swiper-button-next:hover { background: #1b6535; }
.home-swiper .swiper-button-prev::after,
.home-swiper .swiper-button-next::after {
	font-size: 16px;
	color: #fff;
	font-weight: 700;
}
.home-swiper .swiper-pagination-bullet { background: #fff; opacity: 0.7; }
.home-swiper .swiper-pagination-bullet-active { background: #1b6535; opacity: 1; }




/********************
 4. category-product css start 
 *******************/
/* too-good section */
.too-good { padding: 50px 0 40px; text-align: center; background: #fff; }
.too-good_header { margin-bottom: 10px; }
.too-good_title {
	font-size: 30px;
	font-weight: 600;
	color: #222;
	margin-bottom: 6px;
}
.too-good_header::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	background: #eaa842;
	border-radius: 2px;
	margin: 8px auto 30px;
}
.too-good_main {
	display: flex;
	justify-content: center;
	gap: 50px;
	flex-wrap: wrap;
}
.too-good_item-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.too-good_item-media {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	transition: transform 0.3s;
}
.too-good_item-media:hover { transform: scale(1.08); }
.too-good_item-title {
	font-size: 15px;
	font-weight: 600;
	color: #444;
	/* max-width: 100px; */
	line-height: 1.2;
	color: #7f7f7f;
}
.category-product-wrap{
	margin-top:25px;
}
/* circular category section */
.cat-circle-wrap {
	/*padding: 30px 0 40px;*/
	background: #fff;
}
.cat-circle-header {
	text-align: center;
	margin-bottom: 30px;
}
.cat-circle-title {
	font-size: 30px;
	font-weight: 600;
	color: #222;
	display: inline-block;
}
.cat-circle-header::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	background: #eaa842;
	border-radius: 2px;
	margin: 8px auto 0;
}
.cat-circle-row {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}
.cat-circle-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	gap: 14px;
}
.cat-circle-img {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	transition: transform 0.3s;
}
.cat-circle-img:hover { transform: scale(1.06); }
.cat-circle-img img {
	width: 110px;
	height: 110px;
	object-fit: contain;
}
.cat-circle-name {
	font-size: 18px;
	font-weight: 700;
	color: #222;
	text-align: center;
	max-width: 110px;
	line-height: 1.3;
}
.category-heading > h2{ 
	position:relative;
	display:inline-block;
}
.category-heading > h2::after {
	content: '';
	width: 100%;
	height: 1px;
	background-color:#1b6535;
	display: block;
	bottom: -6px;
	position: absolute;
	z-index:111;
}
.category-product{
	background-color: #fffcf7;
	display:flex;
	align-items:center;
	justify-content: center;
	box-shadow: 0px 0px 4px 0px rgba(177,42,20,0.5);
	padding:25px 10px;
	overflow:hidden;
}
.product-text{
	padding:0px 30px;
}
/********************
 5. top product css start 
 *******************/
.bestsellers-wrap {
	padding: 20px 0;
	background: #fff;
}
.bestsellers-header {
	text-align: center;
	margin-bottom: 10px;
}
.bestsellers-title {
	font-size: 30px;
	font-weight: 600;
	color: #222;
}
.bestsellers-header::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	background: #eaa842;
	border-radius: 2px;
	margin: 8px auto 30px;
}
.bs-card {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #eee;
	background: #fff;
	margin: 0 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.bs-card-img {
	position: relative;
	background: #f9f9f9;
	text-align: center;
	/* padding: 10px; */
	/* height: 220px; */
	display: flex;
	align-items: center;
	justify-content: center;
}
.bs-card-img img {
	/* max-height: 200px; */
	width: 100%;
	object-fit: contain;
}
.bs-veg-icon {
	position: absolute;
	top: 10px;
	right: 10px;
}
.bs-veg-icon img { width: 16px; }
.bs-card-body {
	padding: 15px 0px 0px 15px;
	border-top: 1px solid #f0f0f0;
}
.bs-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    /*line-height: 1.4;*/
    /*min-height: 60px;*/
    -webkit-box-orient: vertical;
}
.bs-price {
	font-size: 18px;
	font-weight: 600;
	color: #222;
	margin-bottom: 4px;
}
.bs-old-price {
	font-size: 20px;
	color: #999;
	text-decoration: line-through;
	margin-left: 6px;
	font-weight: 400;
}
.bs-tax {
	font-size: 15px;
	color: #888;
	font-weight: 400;
	margin-bottom: 12px;
}
.bs-atc-btn {
	width: 100%;
	background: none;
	border: none;
	color: #d51288;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 8px 0;
	cursor: pointer;
	border-top: 1px solid #eee;
	transition: color 0.2s;
}
.bs-atc-btn:hover { color: #eaa842; }
.bs-counter {
	border-top: 1px solid #eee;
	padding: 4px 0;
}
.bs-counter-btn {
	background: none;
	border: none;
	color: #1b6535;
	font-size: 22px;
	font-weight: 800;
	width: 36px;
	height: 36px;
	cursor: pointer;
	line-height: 1;
}
.bs-counter-btn:hover { color: #eaa842; }
.bs-counter-qty {
	font-size: 18px;
	font-weight: 700;
	color: #222;
}
.bestsellers-slider .slick-dots { bottom: -30px; }
.bestsellers-slider .slick-dots li button:before { color: #1b6535; }
/********************
 6. dal category css start 
 *******************/

.dal-category-wrap{
	padding-top:35px;
	padding-bottom: 35px;
}
.dal-category-row{
	margin-top:40px;
}
.dal-category > img{
	max-width:200px;
	margin:auto;
}
.dal-category {
	border: 1px solid #bad0c2;
	padding: 20px 5px 5px 5px;
	border-radius:10px;
}
/********************
 7. brand css start 
 *******************/
.brand-wrap{
	padding-top: 20px;
	padding-bottom: 40px;
}
.slick-slider {
    margin-top:10px;
}
/********************
 8. footer css start 
 *******************/
.footer-social-facebook{
	width: 20px;
	height: 20px;
	background-color: #fff;
	text-align: center;
	display: inline-block;
	margin-right: 15px;
} 
.footer-social-facebook{
	width: 20px;
	height: 20px;
	background-color: #fff;
	text-align: center;
	display: inline-block;
	margin-right: 15px;
	color:#1b6535;
}
.popular-brands > a{
	margin-bottom: 5px;
	display: inline-block;
}

.payment-card a{
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 10px;
}
.popular-brands > a:hover {
    text-decoration: underline;
}
/********************
 9. product filter css start 
 *******************/
.filter-category-web > button {
	background: #469863 !important;
	color: #fff !important;
	font-weight: 600;
	padding: 11px 14px;
}
.filter-category-web > button:focus{
	box-shadow:none;
}
.filter-category-web > button::after {
	background-image: url(../images/arrow-up.png) !important;
	background-size: 15px;
	background-position: 0px 5px;
}
.category-list-block > .accordion-body{
	padding:0px 0px;
}
.sub-categorylist > button{
    background-color: inherit!important;
	box-shadow: inherit!important;
}
.sub-categorylist > button::after{
	background-image: url(../images/arrowdownblack.png) !important;
	background-size: 15px;
	background-position: 0px 5px;

}
.filter-price-input{
	background-color: #cbcbcb!important;
	border-color: #cbcbcb!important;
}
.filter-price-input:checked {
	background-color: #9bc472!important;
	border-color: #9bc472!important;
}
.grocery-list{
	padding:0px!important;
	
}
.grocery-list > ul > li{
	padding:10px 0px !important;
	padding-left: 43px !important;
}
.grocery-list > ul > li:hover{
	background-color:#2f9393!important;
}
.grocery-list > ul > li:hover a{
	color:#fff!important;
}
/********************
 10. prodcut list css start 
 *******************/
.product-box {
	position: relative;
	border: 1px solid #9bc472;
	padding: 12px 10px 10px 10px;
	box-shadow: 0px 0px 1px 3px rgba(0,0,0,.1);
	min-height:333px;
}
.prodcutlist-rating > span:nth-child(1) {
	background-color: #dcdcdc;
	padding: 2px 6px;
}

.product-box > span.veg-icon {
	position: absolute;
	top: 12px;
	right: 10px;
}
.product-box > span.veg-icon > img{
	width:15px;
}

.product-item-select{
	font-size: 14px!important;
	background-color:#f3f3f3!important;
	font-weight:500;
	padding:5px;
}
.product-item-select:focus{
	box-shadow:none!important;	
}
.shopping-btn {
	background-color:#2f9393;
	padding: 4px 12px;
	border-radius:5px;
	border:none;
}
.shopping-btn:focus{
	box-shadow:none!important;
}
.shopping-btn:hover{
	background-color:#000!important;
}
.shopping-btn > span{
	padding:0px!important;
}
.sort-popularity > select{
	font-size: 14px;
}
.sort-popularity > select:focus{
	box-shadow:none;
}
/********************
 11. login css start 
 *******************/
.login-wrapper {
	background: linear-gradient(180deg,#fff5dd,#ffeded);
	padding-top:25px;
	padding-bottom:25px;
}
.login-singin-number > span{
    background: inherit;
    color: #7d7d7d;
}
.logout-btn > img{
    width:50px;
}

/********************
 12. otp css start 
 *******************/
.otp-img > img {
	border: 3px solid #eaeaea;
	background-color: #fff;
	border-radius: 50%;
	padding: 5px;
	width: 70px;
	height: 70px;
}
.otp-block{
	padding:50px 20px;
}
.otp-text > input {
	padding: 4px 4px;
	width: 10%;
	margin-right: 15px;
	height: 42px;
	text-align:center;
}
 /********************
 13. login css start 
 *******************/
.singup-wrapper {
	background: linear-gradient(180deg,#fff5dd,#ffeded);
	padding-top:25px;
	padding-bottom:25px;
}
.cart-plus{
	background-color: #6a9f7d!important;
}
.cart-apply-coupon{
	padding:0px;
}
.cart-table tbody tr td,.cart-table thead tr th{
	border-style:inherit;
	border-color:inherit;
}
.customer-address button.add-change{
	border: 1px solid #b9b9b9;	
}
.cart-login-arrow > img{
	width:20px;
}
/********************
 14. dashboard css start 
 *******************/
.user-dashboard-img > img{
	width:95px;
}

.user-dashboard-block{
	margin-top:40px;}
    .order-box{
	padding:10px;
}
/********************
 15. order css start 
 *******************/
.order-box-one {
	display: flex;
	width:100%;
	justify-content: flex-start;
}
.order-box-one > span > i.fa-box-open {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: #1b6535;
	color: #fff;
	text-align: center;
	line-height: 35px;
	font-size: 18px;
}
.order-product-box {
	position:relative;
}
.order-product-box > i.order-view {
	position: absolute;
	top: 39%;
	right: 35px;
	font-size: 18px;
	cursor: pointer;
}
.order-empty-img > img {
    width:115px;
}
/********************
 16. order track css start 
 *******************/
.order-track-modal > li {
	padding-left: 15px;
	padding-bottom: 15px;
	position:relative;
	z-index: 124;
}
.order-track-modal > li:first-child::after {
	border-left: 2px solid #b9b9b9;
}
.order-track-modal > li::after {
	content: '';
	position: absolute;
	top: 5px;
	left: -1px;
	border-left: 2px solid #0e9b4c;
	width: 1px;
	height: 100%;
}
.order-track-modal > li:last-child::after {
	border-left:inherit;
}

.current-staus {
	position: absolute;
	top: 4px;
	left: -8px;
	z-index: 125;
	background: green;
	color: white !important;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	font-size: 9px;
	text-align: center;
	line-height: 15px;
}
.current-staus-last{
	position: absolute;
	top: 4px;
	left: -8px;
	z-index: 125;
	background: #b9b9b9;
	color: white !important;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	font-size: 9px;
	text-align: center;
	line-height: 15px;
}
/********************
 17. mobile filter wrapper css start 
 *******************/
.filter-mobile-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index:1099;
	display:none;
}

.filter-mobile-price {
    width: 100vw;
    position: fixed;
    z-index: 1111;
    height: 250px;
    bottom: 0;
    left: -100%;
    background-color: #fff;
    overflow-x: hidden;
    transition: .6s;
    border-top: 1px solid #323240;
 
}
.filter-mobile-price .sort-price-close{
	cursor: pointer;
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 19px;
}
.overlay-content{
	position:relative;
	top:10%;
	width:70%
}
.filter-sort-price-select{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 21px;
}
.filter-mobile-custom {
      width: 100vw;
      position: fixed;
      z-index: 1111;
      height:100vh;
      bottom: 0;
      left: 0;
      display:none;
      background-color: #fff;
      overflow-x: hidden;
      transition: 2s;
      border-top: 1px solid #323240;
 
}
.filter-mobile-color{
	display: flex;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}
.filter-mobile-color > li{
	width: 20%;
	margin-bottom:15px;
	margin-right: 15px;
	text-align: center
}
.filter-mobile-color > li > a > img{
	width:60px;
	
}
.filter-mobile-tab > .nav{	
	width:40%;
	background:#eaeaea;
}
.filter-mobile-tab > .tab-content{
	width:60%;
}
.filter-mobile-tab > .nav > .nav-link{	
	color:#000;
	padding:15px 0px;
}
.filter-mobile-tab > .nav > .nav-link.active{
	color: #234e70 !important;
	background-color:#fff;
	border-radius:0px;
	font-weight:600;
}
.filter-mobile-color > .mobile-color-checkbox >  .form-check-input:checked{
    background-color: #030c1a;
    border-color: #000204;
}

.k-content{
	position:relative;
}
.k-content > button{
	position:absolute;
	top:0;
	right:0;
}
.k-content > span.k-clear{
	position:absolute;
	top:15px;
	right:105px;
}
.k-autocomplete > .k-clear-value {
	right: calc(8em - 60px)!important;
	top:   calc(1em - 1px)!important;

}

.input-group-text2{	
    padding: 0.525rem .75rem !important;
}

.k-state-hover
{
     background-color:#4c805e73 !important;
}

.k-icon, .k-tool-icon
{
	display:none !important;
}

/********************
 testimonial css
 *******************/
.testimonial-wrap {
	padding: 30px 0 60px;
	background: #fafafa;
}
.testimonial-header {
	text-align: center;
	margin-bottom: 10px;
}
.testimonial-title {
	font-size: 30px;
	font-weight: 600;
	color: #222;
}
.testimonial-header::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	background: #eaa842;
	border-radius: 2px;
	margin: 8px auto 35px;
}
.testi-card {
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 22px 20px;
	margin: 0 10px 30px;
	background: #fff;
}
.testi-card-active { border: 2px solid #eaa842; }
.testi-hearts { color: #eaa842; font-size: 18px; margin-bottom: 12px; }
.testi-top {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 15px;
}
.testi-img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 3px solid #eee;
}
.testi-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 4px; }
.testi-name { color: #1b6535; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.testi-stars { color: #eaa842; font-size: 14px; margin-bottom: 10px; }
.testi-text { font-size: 13px; color: #555; line-height: 1.6; margin: 0; }
.testimonial-slider .slick-dots { bottom: -25px; }
.testimonial-slider .slick-dots li button:before { color: #1b6535; }

/********************
 reel video section css
 *******************/
.reel-section-wrap {
	padding: 20px 0;
	background: #fff;
	overflow: hidden;
}
.reel-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 50px;
}
.reel-slider {
	width: 100%;
}
.reel-slider .slick-slide {
	padding: 0 8px;
}
.reel-card {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eee;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.reel-video-wrap {
	position: relative;
	width: 100%;
	/*height: 220px;*/
	background: #000;
	overflow: hidden;
}
.reel-video-wrap iframe,
.reel-video-wrap video {
	width: 100%;
	height: auto;
	border: none;
	display: block;
}
.reel-icons {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.reel-icons span {
	width: 34px;
	height: 34px;
	background: rgba(255,255,255,0.85);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}
.reel-icons span:hover { background: #fff; color: #e91e63; }
.reel-card-body {
	padding: 12px 14px;
	border-top: 1px solid #f0f0f0;
}
.reel-name {
	font-size: 13px;
	font-weight: 600;
	color: #222;
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.reel-price-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.reel-price { font-size: 13px; font-weight: 700; color: #222; }
.reel-old-price { font-size: 12px; color: #999; text-decoration: line-through; }
.reel-discount { font-size: 11px; color: #1b6535; font-weight: 700; }
.reel-buy-btn {
	width: 100%;
	background: #222;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 0;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}
.reel-buy-btn:hover { background: #1b6535; }
.reel-out-btn {
	width: 100%;
	background: #e0e0e0;
	color: #888;
	border: none;
	border-radius: 6px;
	padding: 9px 0;
	font-size: 13px;
	font-weight: 700;
	cursor: not-allowed;
}
.reel-arrow {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 16px;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.reel-prev { left: 4px; }
.reel-next { right: 4px; }
.reel-arrow:hover { background: #1b6535; color: #fff; border-color: #1b6535; }

/********************
 fun facts section css
 *******************/
.fun-facts-wrap {
	padding: 20px 0;
	background: #fff;
	overflow: hidden;
}
.fun-facts-header {
	text-align: center;
	margin-bottom: 40px;
}
.fun-facts-title {
	font-size: 30px;
	font-weight: 600 !important;
	color: #222;
	display: inline-block;
}
.fun-facts-header::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: #eaa842;
	border-radius: 3px;
	margin: 10px auto 0;
}
.fun-facts-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.fun-facts-slider {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	width: 100%;
	scrollbar-width: none;
}
.fun-facts-slider::-webkit-scrollbar { display: none; }
.fun-facts-track {
	display: flex;
	gap: 30px;
	min-width: 100%;
	flex-wrap: nowrap;
}
.fun-facts-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: calc(33.333% - 20px);
	flex: 0 0 calc(33.333% - 20px);
}
.fun-facts-card img {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 20px;
	display: block;
}
.fun-facts-card p { display: none; }
.fun-facts-card p {
	font-size: 18px;
	color: #222;
	line-height: 1.6;
	margin: 0;
}
.fun-facts-highlight {
	color: #e91e8c;
	font-style: italic;
	font-weight: 700;
}
.fun-facts-arrow {
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}
.fun-facts-arrow:hover { background: #1b6535; color: #fff; border-color: #1b6535; }

/********************
 healthy snacks section css
 *******************/
.healthy-snacks-wrap {
	padding: 50px 0;
	background: #fff;
}
.healthy-snacks-header {
	text-align: center;
	margin-bottom: 40px;
}
.healthy-snacks-title {
	font-size: 45px;
	font-weight: 800;
	color: #222;
	display: inline-block;
}
.healthy-snacks-header::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: #eaa842;
	border-radius: 3px;
	margin: 10px auto 0;
}
.healthy-snacks-row {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.healthy-snacks-card {
	flex: 1;
	max-width: calc(33.333% - 14px);
}
.healthy-snacks-card img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/********************
 did you know section css
 *******************/
.dyk-wrap {
	padding: 50px 0;
	background: #fff;
}
.dyk-header {
	text-align: center;
	margin-bottom: 40px;
}
.dyk-title {
	font-size: 45px;
	font-weight: 800;
	color: #222;
	display: inline-block;
}
.dyk-header::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: #eaa842;
	border-radius: 3px;
	margin: 10px auto 0;
}
.dyk-slider-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dyk-slider {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	width: 100%;
	scrollbar-width: none;
}
.dyk-slider::-webkit-scrollbar { display: none; }
.dyk-card {
	position: relative;
	min-width: calc(33.333% - 16px);
	flex: 0 0 calc(33.333% - 16px);
	/* border: 3px solid #eaa842; */
	border-radius: 16px;
	padding: 24px 20px 20px;
	background: #fff;
}
.dyk-badge {
	position: absolute;
	top: -18px;
	right: 20px;
	background: #0aada8;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-align: center;
	line-height: 1.2;
	padding: 14px 12px;
	clip-path: polygon(50% 0%, 61% 10%, 75% 5%, 75% 20%, 90% 20%, 85% 35%, 100% 40%, 88% 52%, 95% 65%, 80% 65%, 80% 80%, 65% 75%, 60% 90%, 50% 82%, 40% 90%, 35% 75%, 20% 80%, 20% 65%, 5% 65%, 12% 52%, 0% 40%, 15% 35%, 10% 20%, 25% 20%, 25% 5%, 39% 10%);
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.dyk-o { font-style: normal; }
.dyk-card-inner {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 10px;
}
.dyk-card-inner img {
	width: 130px;
	height: 160px;
	object-fit: contain;
	flex-shrink: 0;
}
.dyk-content { flex: 1; }
.dyk-name {
	font-size: 20px;
	font-weight: 800;
	color: #eaa842;
	margin-bottom: 10px;
	line-height: 1.2;
}
.dyk-content p {
	font-size: 13px;
	color: #333;
	line-height: 1.6;
	margin-bottom: 14px;
}
.dyk-cta {
	font-size: 14px;
	font-weight: 800;
	color: #e91e8c;
	line-height: 1.3;
}
.dyk-arrow {
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}
.dyk-arrow:hover { background: #1b6535; color: #fff; border-color: #1b6535; }

.dyk-wrap { padding: 40px 0; background: #fff; }
.dyk-row { display: flex; gap: 20px; justify-content: center; }
.dyk-card { flex: 1; max-width: calc(33.333% - 14px); }
.dyk-card img { width: 100%; height: auto; display: block; border-radius: 8px; }

/********************
 RESPONSIVE - Mobile Fixes
 *******************/

/* ── Tablet (max 992px) ── */
@media (max-width: 992px) {
    .too-good_title,
    .cat-circle-title,
    .bestsellers-title,
    .fun-facts-title,
    .testimonial-title,
    .healthy-snacks-title,
    .dyk-title { font-size: 32px; }

    .inline-menu { display: none; }

    .fun-facts-card {
        min-width: calc(50% - 15px);
        flex: 0 0 calc(50% - 15px);
    }

    .cat-circle-row { gap: 20px; }
    .cat-circle-img { width: 100px; height: 100px; }
    .cat-circle-img img { width: 80px; height: 80px; }
    .cat-circle-name { font-size: 14px; }

    .too-good_main { gap: 30px; }

    .reel-slider-wrap { padding: 0 40px; }
    .reel-card { }
}

/* ── Mobile (max 767px) ── */
@media (max-width: 767px) {

    /* Header */
    .new-navbar-row { padding: 10px 0; gap: 12px; }
    .new-logo img { max-height: 44px; margin-left: 25px;}
    .new-nav-icons { gap: 14px; }
    .nav-icon-link i { font-size: 18px; }

    /* Section titles */
    .too-good_title,
    .cat-circle-title,
    .bestsellers-title,
    .fun-facts-title,
    .testimonial-title,
    .healthy-snacks-title,
    .dyk-title { font-size: 26px; }

    /* Too Good section */
    .too-good { padding: 30px 0 24px; }
    .too-good_title { font-size: 22px; /*white-space: nowrap;*/} 
    .too-good_main { gap: 16px; flex-wrap: nowrap; justify-content: center; }
    .too-good_item { flex: 1; }
    .too-good_item-media { width: 72px; height: 72px; }
    .too-good_item-title { font-size: 13px; }

    /* Category circles */
    .cat-circle-wrap { padding: 24px 0 28px; }
    .cat-circle-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        justify-items: center;
    }
    .cat-circle-img { width: 72px; height: 72px; }
    .cat-circle-img img { width: 58px; height: 58px; }
    .cat-circle-name { font-size: 12px; max-width: 72px; }

    /* Bestsellers */
    .bestsellers-wrap { padding: 24px 0; }
    .bs-name { font-size: 14px; }
    .bs-price { font-size: 14px; }
    .bs-old-price { font-size: 13px; }
    .bs-tax { font-size: 12px; }
    .bs-atc-btn { font-size: 14px; padding: 7px 0; }

    /* Fun Facts */
    .fun-facts-wrap { padding: 28px 0; }
    .fun-facts-card {
        min-width: calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
    }
    .fun-facts-track { gap: 16px; }
    .fun-facts-arrow { width: 34px; height: 34px; font-size: 14px; }

    /* Healthy Snacks */
    .healthy-snacks-row { flex-direction: column; gap: 14px; }
    .healthy-snacks-card { max-width: 100%; }

    /* Did You Know */
    .dyk-row { flex-direction: column; gap: 14px; }
    .dyk-card { max-width: 100%; }

    /* Testimonials */
    .testimonial-wrap { padding: 28px 0 40px; }
    .testi-card { margin: 0 6px 20px; padding: 16px 14px; }
    .testi-img { width: 56px; height: 56px; }
    .testi-title { font-size: 13px; }
    .testi-text { font-size: 12px; }

    /* Reel section */
    .reel-section-wrap { padding: 24px 0; }
    .reel-slider-wrap { padding: 0 36px; }
    .reel-card { }
    .reel-name { font-size: 12px; }
    .reel-arrow { width: 32px; height: 32px; font-size: 13px; }

    /* Slider */
    .home-swiper .swiper-button-prev,
    .home-swiper .swiper-button-next { width: 32px; height: 32px; }
    .home-swiper .swiper-button-prev::after,
    .home-swiper .swiper-button-next::after { font-size: 12px; }

    /* Healthy snacks & DYK bootstrap sections */
    .col-md-4 { margin-bottom: 12px; }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    .cat-circle-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .cat-circle-img { width: 64px; height: 64px; }
    .cat-circle-img img { width: 50px; height: 50px; }
    .cat-circle-name { font-size: 11px; max-width: 64px; }

    .too-good_item { flex: 1; }
    .too-good_item-media { width: 60px; height: 60px; }
    .too-good_item-title { font-size: 12px; }

    .reel-card { }

    .marquee-track { font-size: 13px; }
}