/* custom fonts, colors and background */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');  
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

:root {
  --primary-color: #CF0000;
  --secondary-color: #000001;
  --primary-dark: #7f3c2b;
  --secondary-dark : #000001;
  --yellow-color: #FFCB29;
  --xxs-font: 0.75rem;
  --xs-font: 0.875rem;
  --sm-font: 1rem;
  --md-font: 1.2rem;
  --lg-font: 1.5rem;
  --xl-font: 2rem;
  --xxl-font: 2.5rem;
  --heading-font: "lexend", sans-serif;
  --body-font: "Montserrat", sans-serif;
}

body{ font-family: var( --body-font)!important; font-size: var(--xs-font); background-color: #f1f3f6;}
/* section{  overflow: hidden; } */
a{color:inherit; text-decoration: none;}
h1,h2,h3,h4,h5,h6{ font-family: var(--heading-font);letter-spacing: 0.2px;}
/* typography */
.text-xxs{font-size: var(--xxs-font);}
.text-xs{font-size: var(--xs-font);}
.text-sm{font-size: var(--sm-font);}
.text-md{font-size: var(--md-font);}
.text-lg{font-size: var(--lg-font);}
.text-xl{font-size: var(--xl-font);}
.text-xxl{font-size: var(--xxl-font);}
.heading-line{ width: 6px; height: 2.5rem; background-color: var(--primary-color);border-left: 3px solid var(--primary-color);}
/* background color start */
.bg-danger-subtle{ background-color: #dc35450f !important;}
.bg-primary-color{background-color: var(--primary-color);}
.bg-primary{background-color: var(--primary-color) !important;}
.bg-primary-dark{background-color: var(--primary-dark);}
.bg-secondary-color{background-color: var(--secondary-color);}
.bg-yellow-color{ background-color: var(--yellow-color); }
.bg-gradient-color { background: linear-gradient( 295deg,var(--primary-color) 54%, var(--secondary-color) 30%);}
/* background color end */

/* color start */
.text-primary-color{color: var(--primary-color)!important;}
.text-primary-dark-color{color: var(--primary-dark)!important;}
.text-secondary-color{color: var(--secondary-color) !important;}
.text-yellow-color{ color: var(--yellow-color); }
/* color end */
.navbar ::placeholder{ color: var(--primary-color) !important;}
footer ::placeholder{ color: white !important;}
.spinner-border-sm{ width: 0.8rem; height: 0.8rem;}

.popover.bs-popover-auto.fade.show{ margin-top: -7rem;}
.popover-body{ padding: 0.5rem;}
.popover-arrow{ top:-7rem;}
/* border */
.border-primary{ border-color: var(--primary-color), var(--bs-border-opacity) !important; }
/* button start */
.primary-border-button{
  color: var(--primary-color);
  background-color: transparent;
  border: 1px solid var(--primary-color);
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.primary-border-button::after{ content:none;}
.primary-border-button:hover,.primary-border-button:focus, .primary-border-button:active, .primary-border-button.active{
  color: white;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.primary-button{
  border: none;
  color: white;
  background-color: var(--primary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.primary-button::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: var(--secondary-color);
  transition: all 0.5s ease-in-out;
}
.primary-button:hover:after { left: 0; width: 100%;}
.primary-button:hover,.primary-button:focus,.primary-button:active{ color: white;  background-color: var(--primary-color);}
.primary-button:disabled, .secondary-button:disabled{ background-color:#555659; color: white;}

.primary-outline-button{
  border: none;
  color:  var(--primary-color);
  background-color: transparent;
  border: 1px solid  var(--primary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.primary-outline-button::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: var(--primary-color);
  transition: all 0.5s ease-in-out;
}
.primary-outline-button:hover:after { left: 0; width: 100%;}
.primary-outline-button:hover,.primary-outline-button:focus,.primary-outline-button:active{ color: white;  background-color: var(--primary-color);}

.secondary-button{
  border: none;
  color: white;
  background-color: var(--secondary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.secondary-button::after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: var(--primary-color);
  transition: all 0.5s ease-in-out;
}
.secondary-button:hover:after { left: 0; width: 100%;}
.secondary-button:hover,.secondary-button:focus,.secondary-button:active{ color: white;  background-color: var(--secondary-color);}
.secondary-outline-button{
  border: none;
  color: var(--secondary-color);
  background-color: transparent;
  border: 1px solid var(--secondary-color);
  transition: 0.5s;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}
.secondary-outline-button:hover,.secondary-outline-button:focus,.secondary-outline-button:active{ color: white;  background-color: var(--secondary-color);}
.quantity-btn{ width:1.6rem; height: 1.6rem;}

.input-checkbox{ width: 1rem; height: 1rem; border-radius: 2px !important; }
.input-checkbox:checked[type="radio"]{
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
/* price range slider start */
.input-price-slider {
  height: 2px;
  position: relative;
  background: #e4e4e4;
  border-radius: 5px;
}
.price-slider {
  height: 100%;
  position: absolute;
  background: #23a247;
  border-radius: 5px;
}
.input-price-slider input[type="range"] {
  position: absolute;
  width: 100%;
  top: -9px;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.input-price-slider input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #23a247;
  pointer-events: all;
  -webkit-appearance: none;
}
/* price range slider start */
/* animation start */
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}
/* animation end */
.offer-tag {
  background-color: #23a247;
  height: max-content;
  padding-bottom: 0.6rem !important;
  position: relative;
  background: url('../img/offer-tag.svg')bottom center / 100% 100% no-repeat;
}
/* offer shape css end */
.navbar-brand{ width:12rem;}
/* category slider start */
.category-container::placeholder{color: var(--primary-light) !important;}
.category-container::-webkit-scrollbar { width: 0px; height: 1.5px; }
/* Track */
.category-container::-webkit-scrollbar-track { background: transparent; }
/* Handle */
.category-container::-webkit-scrollbar-thumb { background: #fff; }
/* Handle on hover */
.category-container::-webkit-scrollbar-thumb:hover { background: #fff; }
.category-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.category-container a, .category-container .sales-list {
  border-bottom: 2px solid transparent;
  transition: all .6s ease-in-out;
  display: inline-block;
  min-width: max-content;
}
.cat_product{ width: 5rem; height: 5rem;}
.goals-list li{ border-left: 0.1875rem solid #ffffff8f; padding-left: 2rem; text-align: center; width: 33%;}
/* bestsellers css star */
.nav-tabs .nav-link{ color: var(--primary-color);  border: 2px solid transparent}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus{ border: 2px solid var(--primary-color);}
.nav-tabs .nav-link.active{ background-color: var(--primary-color); color: white; border: 2px solid var(--primary-color);}
/* product carousel css start */
.owl-nav{ display: flex; justify-content: space-between;}
.owl-prev, .owl-next{
  position: absolute; top: 35%;
  width: 30px;
  height: 50px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .5);
  border-radius: .3rem;
  background-color: #fff !important;
  font-size: 2rem;
  cursor: pointer;
  z-index: 99 !important;
  border: 1px solid #ddd;
}
.owl-prev{ left:-1rem; }
.owl-next{ right: -1rem; }
.owl-prev.disabled, .owl-next.disabled{ opacity: 0 !important;}
.product-container{ height: 10rem; min-width: 8rem; max-width: 8rem; }
.order-product-container{ height: 10rem; min-width: 100%; }
.discount-tag{width: 3rem;}
.product_foodTyp{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}
.product_foodTyp.veg, .product_foodTyp.nonVeg{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .2rem;
  margin-bottom: 1.2rem;
  z-index: 1;
}
.veg{ border: 1px solid #038300; background-color: #fff; }
.veg:after {
  content: "";
  width: 8.2px;
  height: 8.2px;
  display: block;
  background-color: #038300;
  border-radius: 50%;
}
.nonVeg { border: 1px solid #8c0000; background-color: #fff; }
.nonVeg:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-color: transparent transparent #8c0000;
  border-style: solid;
  border-width: 0 4px 6px;
}
/* brands slider css start */
.brands-container{ height: 6rem !important; width: 100%;}
/* brands slider css end */
/* category section start */
.category-list li{ width: 16%;}
.categories-img{ background-color: #f2f2f3 !important;}
.categories-img:hover{box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .25);}
.categories-img{ width: 100%; height: 8rem; background: black;}
/*  */
.small-img{ cursor: pointer;}
.small-img:before {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .98)), to(transparent));
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .98) 0, transparent);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: .25rem 7rem;
  bottom: 0;
  content: "";
  height: 7rem;
  left: 0;
  position: absolute;
  right: 0;
  top: auto;
  z-index: 1;
}
.small-img:after, .small-img:focus:after, .small-img:hover:after {
  background-color: #555659;
}
.small-img:after {
  background-color: transparent;
  bottom: 0;
  content: "";
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color .28s ease-out;
  transition: background-color .28s ease-out;
  -webkit-transition: background-color var(--global-transition-time) var(--global-transition-ease);
  transition: background-color var(--global-transition-time) var(--global-transition-ease);
  z-index: 1;
}
/* quick view product */
.product-carousel{ height: 17rem;}
.carousel-button[data-bs-target]{ width: auto !important; height: auto !important; opacity: 1;}
.carousel-button[data-bs-target] span{ width: 6rem; height: 5.5rem; border: 1px solid var(--primary-color); border-radius: 5px; overflow: hidden;}
.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.scroll-button.left { left: -1%; }
.scroll-button.right { right: -1%; }
.productImageSlider{
  overflow-y: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  width: 100%;
}
.productImageSlider::-webkit-scrollbar { display: none; }
/* feature css start */
.img-container{ width: 5rem; height: 5rem;}
/* product details page end */
#productImageSliderContainer .product-carousel{ height: 24rem;}
.product-details label{ cursor: pointer;}
.variant-box:has(input[type="radio"]:checked+label) { border: 1.7px solid var(--primary-color) !important;}
.frequently-box:not(:last-child)::after{
  content: '+';
  position: absolute;
  top: 30%;
  left: 100%;
  font-size: 40px;
  color: #696565;
}
.freq-box:has(.frequently-box)::before{
  content: '+';
  position: absolute;
  top: 30%;
  left: -6%;
  font-size: 40px;
  color: #696565;
}
.freq-box:first-child::before { display: none; }
.frequently-img{ height: 10rem; width: 100%;}
.frequently-checkProduct{ width: 1.5rem; height: 1.5rem;}
/* .custom-width{ max-height: 200px;}
.full-width{ max-height: max-content;} */
/* product details page end */
/* coupon card css start */
.coupon-card {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 13px 0px;
  min-height: 130px;
}
.coupon-label {
  background-color: #27a844;
  letter-spacing: 2px;
  writing-mode: vertical-lr;
  text-orientation: sideways-right;
  transform: rotate(180deg);
}
.dotted-line {  border-top: 2px dashed #ddd; margin: 8px 0; }
.coupon-label::before {
  content: ''; 
  position: absolute;
  left: 0; 
  height: 10px; 
  width: 100%; 
  background: rgb(255 255 255 / 17%);
  bottom: -40px; 
  animation: shine 4s infinite; 
}
.coupon-label::after {
  content: ''; 
  position: absolute;
  left: 0; 
  height: 30px; 
  width: 100%; 
  background: rgb(255 255 255 / 17%);
  bottom: -20px; 
  animation: shine 4s infinite; 
}
@keyframes shine {
  0% {
    transform: skewY(30deg) translateY(70px); /* Start from below */
  }
  50% {
    transform: skewY(30deg) translateY(-300px); /* Move to the top */
  }
  100% {
    transform: skewY(30deg) translateY(70px); /* Return to start */
  }
}
/* coupon card css end */
/* checkout page start */
.address-radio{  width: 1rem; height: 1rem; border: 1.5px solid var(--primary-color)}
.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
  height: 2.7rem;
  min-height: 2.7rem;
  line-height: 1.25;
}
.form-floating>.form-control:focus~label::after{ background-color: transparent;}

label:has(.address-radio:checked){
  background-color: #dc35450f;
}
.qty{width: 12rem; text-indent: 4.5rem;}
.lightbox-modal{ width: 75%;}
.lightbox-modal-img-container{ height: 78vh;}
.slider-button, .slider-button:hover, .slider-button:focus, .slider-button:active{
  background-color: #fff !important;
  color: var(--primary-color) !important;
}
/* footer css start */
footer{
  padding-top: 12rem;
  background-image: url(../img/footer.svg) !important;
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer-social{
  width: 2.4rem; height: 2.4rem;
}
/* footer css end */
.bg-image{ background-image: url('../img/bg-image.svg'); background-position: center;
  background-size: cover;
  background-repeat: no-repeat;}
.searchList{ max-height: 10rem; height: max-content; overflow-y: scroll;}
.searchList::placeholder{color: var(--primary-light) !important;}
.searchList::-webkit-scrollbar { width: 1.5px; height: 0px; }
/* Track */
.searchList::-webkit-scrollbar-track { background: transparent; }
/* Handle */
.searchList::-webkit-scrollbar-thumb { background: #fff; }
/* Handle on hover */
.searchList::-webkit-scrollbar-thumb:hover { background: #fff; }

.pagination-container p.small{display: none;}
.pagination-container ul{margin-bottom: 0;}
.page-item.active span{ background: var(--primary-color); border-color:var(--primary-color)}
.page-link, .page-link:hover{ color: var(--primary-color); border-color:var(--primary-color); box-shadow: none;}
.page-item.disabled .page-link{ background-color: #ffdfdf; color: var(--primary-color); border:1px solid var(--primary-color) !important;}

.toast-box {
  position: absolute;
  top:0;
  right: 0%;
  width: 26rem;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.toast-content{ width: 94%;}
.toast-box .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
}
.toast-box .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
.toast-box .progress.success:before { background-color: #23A247; /* green */}
.toast-box .progress.error:before { background-color: #DC3545; /* red */ }
.toast-box .progress.warning:before { background-color: #FFC107; /* yellow */ }
.toast-box .progress.info:before { background-color: #0DCAF0; /* blue */ }
.progress.active:before { animation: progress 5s linear forwards; }
@keyframes progress { 100% { right: 100%; } }
.inner-content p{
  font-size: var(--xs-font);
  margin-bottom: 0.5rem;
  color: #555659;
   font-weight: 500;
  line-height: 1.6rem !important;
}
.inner-content li{
  font-size: var(--xs-font);
  font-weight: 500;
  color: #555659;
  line-height: 1.6rem !important;
}
.inner-content h2{
  font-size: var(--lg-font);
  font-weight: 700;
  line-height: 1.6rem !important;
}
.inner-content h5{
  font-size: var(--sm-font);
  font-weight: 700;
  line-height: 1.6rem !important;
}
#faqs .nav-link{
  background-color: transparent !important;
  color: #555659 !important;
  font-weight: 500;
  border-right: 5px solid transparent !important;
}
#faqs .nav-link.active{
  background-color: transparent !important;
  color: var(--primary-color) !important;
  font-weight: 700;
  border-right: 5px solid var(--primary-color) !important;
}
.accordion .accordion-button.collapsed{ color: var(--secondary-color) !important; font-size: var(--sm-font); font-weight: 600;}
.accordion .accordion-button{ color: var(--primary-color) !important; font-size: var(--sm-font); font-weight: 600;}
/* new css for details page */
.variant-box{
  min-width: 6rem !important;
  width: max-content;
}
.popular-product .card-body h3{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 2.2rem;
}
.tooltip-inner { max-width: 18rem !important }
.listing-container{ max-height: 12rem; height: max-content; overflow-y: scroll;}

.listing-container::-webkit-scrollbar-track{ border-radius: 10px; background-color: transparent; }
.listing-container::-webkit-scrollbar{ width: 5px;	background-color: transparent; }
.listing-container::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #acacac;
}
/* media query start */
#carouselExample, #carouselExample .carousel-inner{ height: 60vh; }
.carousel-control-prev, .carousel-control-next {
  border: 1px solid white;
  width: 2.5rem;
  height: 2.5rem;
  top: 98%;
  transform: translateY(-100%);
  opacity: 1;
}
.carousel-control-prev { right: 4.7%; left: auto; }
.carousel-control-next { right: 1%; left: auto; }
.categoryCarousel .product-container { height: 12rem; min-width: 100% !important; }

/* orders page css */
.product-image { width: 25%; height: 6rem; }
.profile-image{ width: 7rem; height: 7rem; }
/* sidebar css */
.profile-link.active{ background-color: #dc35450f !important; color: var(--primary-color)}
.orders-list .track-list{ width: 23% !important;}
.checkAvailability{ width: 65%;}
.testimonial-img { height: 5.5rem; width: 5.5rem;}
#customerReview .owl-dots .owl-dot{
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #fa8484 !important;
}
#customerReview .owl-dots {
  display: flex;
  gap:5px;
  justify-content: center;
  margin-top: 10px;
}
#customerReview .owl-dots .owl-dot.active{ background-color: var(--primary-color) !important; }
.read-more { height: 150px; overflow: hidden; }
.read-more::before {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 100%;
  height: 35px;
  background: linear-gradient(to top, #ffffffe8, #ffffffda);
  cursor: pointer;
}
.read-more.expand { height: max-content !important; }
.show-more-hide-button { margin-top: -20px; }
.read-more.expand::before{ content: none;}
.search-list{ height: max-content; max-height: 22rem; overflow-y:scroll;}
.search-list li:hover{ color: #a60d12; background-color: #fff6f6;}
.search-list::-webkit-scrollbar-track{ background-color: #F5F5F5; }
.search-list::-webkit-scrollbar{
  width: 6px;
  background-color: #F5F5F5;
}
.search-list::-webkit-scrollbar-thumb {
  background-color: #000000;
}
.scroll-list{ max-height: 20rem; height: max-content; overflow-y: scroll; }
.scroll-list::-webkit-scrollbar-track{ background-color: transparent; }
.scroll-list::-webkit-scrollbar{ width: 6px; background-color: transparent; }
.scroll-list::-webkit-scrollbar-thumb { background-color: #acacac; }
/* small device css start */
@media (max-width: 767px) {
  html{ font-size: 80%;}
  .navbar{ height: 10rem;}
  .navbar-brand{ height: 6rem; width: 6rem;}
  .mobile-search{ position: absolute; bottom:.5rem; left:0; right:0; width: 90% !important; margin: auto;}
  .category-list li { width: 32.1%; }
  #carouselExample, #carouselExample .carousel-inner { height: 12vh; }
  .carousel-control-prev { right: 9%; left: auto; }
  #productImageSliderContainer{ position: relative !important;}
  /* cart page css start */
  .delete-product{ position: absolute; bottom: 0.5rem; right: 1rem;}
  /* cart page css end */
  /* coupon card css start */
  .coupon-card { min-height: auto; }
  footer { background-position: 3%; }
  /* #featureCarousel{ margin-bottom: 4rem; } */
  #featureCarousel .carousel-item .position-absolute{ position: static !important; transform: translateY(0%) !important; margin-bottom: 2rem;}
  /* .carousel-indicators{ bottom: -35% !important;} */
  .carousel-indicators [data-bs-target] {
    width: 15px;
    border-radius: 50%;
    height: 15px;
    background-color: #eb9494;
    border: none !important;
  }
  .carousel-indicators .active { background: #cf0000;  width: 15px; height: 15px;}
  /* #featureCarousel{ height: 60vh;} */
  .orders-list .w-75, .orders-list .track-list{ width: 100% !important;}
  .list-order{ width: 48%}
  .lightbox-modal{ width: 95%;}
  .lightbox-modal-img-container{ height: 50vh;}
  /* .frequently-box tr{ display: flex !important; width: 100%; flex-wrap: wrap !important;} */
  .frequently-box table{ overflow-x: scroll !important;}
  /* .frequently-box tr td{ width: 50% !important;} */
  .checkAvailability{ width: 100%;}
  .filter-box{ height: 85vh !important;}
  .owl-prev{ left:0rem; }
  .owl-next{ right: 0rem; }
  .owl-prev, .owl-next {
    width: 25px;
    height: 35px;
  }
}