/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    /* widths for rows and containers
     */
    --header-height       : 160px;
    --header-height-min   : 80px;
}
/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min   : 80px;
    }
}
/* Theme Colors */
:root {
    --accent-color       : #FFC43F;
    --dark-color         : #222222;
    --light-dark-color   : #727272;
    --light-color        : #fff;
    --grey-color         : #dbdbdb;
    --light-grey-color   : #fafafa;
    --primary-color      : #6995B1;
    --light-primary-color   : #eef1f3;
}

/* Fonts */
:root {
    --body-font           : "Open Sans", sans-serif;
    --heading-font        : "Nunito", sans-serif;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ffc43f;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc43f;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary {
  --bs-btn-color: #ffc43f;
  --bs-btn-border-color: #ffc43f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}
.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}
.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}
body {
  letter-spacing: 0.03em;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}
.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}
/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }
  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}

/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}
.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
  height: 500px;
  margin-bottom: 100px;
}
.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
  
}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #FFC43F;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}
/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}
.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}
.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}
.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}
.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}
/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  /* padding: 60px 20px; */
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0,-10px,0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, 
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}
.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}
.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
}
.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}
.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}
.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}
.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .rating iconify-icon {
  color: #FFC43F;
}
.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .product-qty {
  width: 85px;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}
@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}
 /* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}
.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }
  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
  .dropdown-menu a {
    padding-left: 0;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}
@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}
@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}

@media (min-width: 992px) {
    .col-lg-5 {
        margin-top: 40px !important;
    }
}

.bg-light-one {
    --bs-bg-opacity: 1;
    background-color: rgb(242 242 242 / 0%) !important;
}

.btn:hover-one {
    color: var(--bs-btn-hover-color);
    background-color: #d3d4d500;
    border-color: #c6c7c885;
}

.bg-dark-one {
    --bs-bg-opacity: 1;
    background-color: rgb(33 37 41 / 0%) !important;
}

.text-white-one {
    --bs-text-opacity: 1;
    color: rgb(2 2 2) !important;
}
.text-danger-one {
    --bs-text-opacity: 1;
    color: rgb(141 0 0) !important;
}

.reviews-swiper .swiper-pagination {
  display: none !important;
}
/* perks section */
.perk-card{
  background: linear-gradient(180deg,#fff, #fff7ec);
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.perk-card::after{
  content:"";
  position:absolute; inset:-40% auto auto -40%;
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(253,186,116,.25), transparent 70%);
  transform: rotate(15deg);
}
.perk-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color:#f2d9b0;
}
.perk-icon{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#ffe8c2,#ffd29a);
  border:1px solid #ffd9a8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  margin-bottom:12px;
}
.perk-icon svg{ width:28px; height:28px; color:#b45309; }
.perk-title{ font-weight:700; margin:2px 0 6px; }
.perk-text{ color:#6b7280; margin:0; font-size:.95rem; line-height:1.45; }

.py-5 {
    padding-top: 0 !important;
    padding-bottom: 3rem !important;
}

.perk-card {
  background: linear-gradient(180deg,#fff, #fffdf8);
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.perk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.perk-icon {
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background: #fff4e6;
  color:#b45309;
  flex-shrink:0;
}
.perk-icon svg {
  width:20px; height:20px;
}
.perk-title {
  font-weight:600;
  font-size:1rem;
}
.perk-text {
  font-size:.9rem;
  color:#6b7280;
  margin:0;
}

.banner-blocks .banner-ad.large { background: linear-gradient(180deg,#1bd9bc,#fff7ec); }
.banner-blocks .categories { letter-spacing:.5px; }
.banner-blocks .nav-link svg { transition: transform .2s ease; }
.banner-blocks .nav-link:hover svg { transform: translateX(4px); }

  /* Banner Styles */
.banner-ad .banner-content {
  padding: 1.5rem !important;
}
.banner-content h3,
.banner-content p,
.banner-content .categories {
  color: #1a1a1a !important;   /* deep dark gray for readability */
  text-shadow: 1px 1px 2px rgba(255,255,255,0.7); /* subtle glow for visibility */
}

.banner-content h3 {
  color: #b91c1c !important;   /* strong red for titles */
}

.banner-content .categories {
  color: #58ab18 !important;   /* orange highlight */
  font-weight: 700;
  letter-spacing: 0.5px;
}


.banner-ad p {
  font-size: 1rem;
  color: #334155; /* elegant gray */
  margin-bottom: 0.75rem;
}

.banner-ad .categories {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.banner-ad .btn {
  font-size: 0.85rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.banner-ad .btn-dark {
  background-color: #0f172a;
  border: none;
}
.banner-ad .btn-dark:hover {
  background-color: #1e293b;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Promo Card Styles */
.banner-ad.bg-success-subtle {
  background: linear-gradient(135deg, #cfe8b6, #c0de87c7);
  color: #14532d;
}
.banner-ad.bg-success-subtle h3 {
  color: #14532d;
}

.banner-ad.bg-danger {
  background: linear-gradient(128deg, #fba440, #ffd593);
  color: #fff;
}
.banner-ad.bg-danger h3 {
  color: #fff;
}
.banner-ad.bg-danger a {
  color: #ffe4e6 !important;
}

.carousel-amma {
  background: linear-gradient(104deg, #fff9f4 0%, #fff7e6 100%);
}
.promo-card {
  box-shadow: 0 8px 24px rgba(174,113,68,0.10);
  border: none;
  min-height: 380px; /* Ensure good vertical space */
  display: flex;
  align-items: center;
}
.btn-amma {
  background: linear-gradient(90deg,#e08b49,#bc4a17 80%);
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .15s, transform .12s;
}
.btn-amma:hover {
  background: linear-gradient(90deg,#bc4a17,#e08b49 80%);
  color:#fff;
  transform: translateY(-2px) scale(1.03);
}


/* Category Image */
.category-item img {
  max-width: 120px;        /* set your desired max width */
  max-height: 140px;       /* set your desired max height */
  width: auto;
  height: auto;
  object-fit: contain;     /* maintain aspect ratio and prevent cropping */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- FIXED ELEGANT CARD CSS --- */

/* 1. The Card Container: Forces White Background & Rounded Corners */
.elegant-card {
    background-color: #ffffff !important; /* Forces white background */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Subtle shadow */
    overflow: hidden; /* Cuts off any overflowing images */
    height: 100%; /* Ensures all cards in a row are same height */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect */
.elegant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
    border-color: #be123c; /* Highlight border on hover */
}

/* 2. The Image Wrapper: CONSTANT HEIGHT */
/* This is the most important part to fix the "collapsed" look */
.img-wrapper {
    height: 220px; /* Fixed height */
    width: 100%;
    background-color: #f8f9fa; /* Light gray background behind the product */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* 3. The Image Itself: Contain Mode */
.img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Ensures the Curd cup doesn't stretch or zoom */
    display: block;
}

/* 4. Card Content */
.card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    text-decoration: none;
    display: block;
}

.price-tag {
    font-size: 1.1rem;
    font-weight: 800;
    color: #be123c;
}

/* Quantity Controls */
.btn-qty-custom {
    border: 1px solid #ddd;
    background: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-qty-custom:hover {
    background: #be123c;
    color: white;
    border-color: #be123c;
}

/* Testimonial Card Styling */
.testimonial-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-top: 4px solid #be123c; /* Amma's Kitchen Brand Red */
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    height: 100%; /* Ensures equal height in Swiper */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(190, 18, 60, 0.15); /* Reddish shadow on hover */
}

/* Decorative Quote Icon */
.testimonial-quote-icon {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 4rem;
    line-height: 1;
    color: #fecaca; /* Very light red */
    opacity: 0.3;
    font-family: serif;
    pointer-events: none;
}

/* User Avatar Area */
.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 15px;
}

/* Review Text */
.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 1.5rem;
    font-style: italic;
    flex-grow: 1; /* Pushes the tags to the bottom */
}

/* Product Tags */
.product-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.8em;
    border-radius: 50px;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

/* Star Rating */
.star-rating i {
    font-size: 0.9rem;
    margin-right: 2px;
}

/* --- Custom Filter Styling --- */

/* 1. The Container Card */
.filter-card {
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* 2. Custom Range Slider */
.custom-range::-webkit-slider-runnable-track {
    background: #ffe4e6; /* Light pink track */
    height: 6px;
    border-radius: 10px;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #be123c; /* Brand Red */
    height: 18px;
    width: 18px;
    border-radius: 50%;
    margin-top: -6px; /* Centers thumb on track */
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

.custom-range:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* 3. The "Stock" Toggle Card */
/* We hide the actual checkbox input */
.btn-check-custom {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

/* We style the label to look like a button/card */
.stock-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 2px solid #eee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #555;
}

.stock-toggle-label:hover {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

/* When Checked: Turn Green/Active */
.btn-check-custom:checked + .stock-toggle-label {
    border-color: #be123c; /* Brand Color */
    background-color: #fff1f2; /* Very light red bg */
    color: #be123c;
    box-shadow: 0 4px 10px rgba(190, 18, 60, 0.15);
}

.stock-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #aaa;
    transition: all 0.3s;
}

.btn-check-custom:checked + .stock-toggle-label .stock-icon-circle {
    background: #be123c;
    color: #fff;
}

/* 1. The Cart Button "Pop" Animation */
@keyframes cart-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.2); box-shadow: 0 0 15px rgba(190, 18, 60, 0.5); }
    100% { transform: scale(1); }
}

.cart-bump-anim {
    animation: cart-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-color: #be123c !important;
    background-color: #fff1f2 !important; /* Light red flash */
}

/* 2. The "Check Here" Floating Tooltip */
.cart-reminder-tooltip {
    position: fixed;
    top: 85px; /* Adjust based on your navbar height */
    right: 20px; /* Aligns with the cart button */
    background-color: #1f2937; /* Dark gray */
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 2000;
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none; /* Let clicks pass through */
}

.cart-reminder-tooltip.show {
    opacity: 1;
    transform: translateY(0); /* Bounce up */
}

/* The Little Triangle Arrow on top of the tooltip */
.cart-reminder-tooltip .arrow-up {
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1f2937;
    position: absolute;
    top: -8px;
    right: 25px; /* Position triangle under the cart button */
}

/* 1. Typography & Branding */
.text-brand {
    color: #be123c;
}
.bg-brand {
    background-color: #be123c;
}
.font-serif {
    font-family: 'Georgia', 'Times New Roman', serif; /* Fallback to serif for premium feel */
}

/* 2. Minimalist Hero */
.hero-badge {
    background: #fff0f3;
    color: #be123c;
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
}

/* 3. Feature Images (The "Values" Strip) */
.feature-image-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.feature-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.feature-item:hover .feature-image-box {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(190, 18, 60, 0.25);
    border-color: #be123c;
}
.feature-item:hover .feature-image-box img {
    transform: scale(1.1);
}

/* 4. Timeline / Story Section */
.story-image-container {
    position: relative;
    padding: 20px;
}
.story-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Removed red border */
    border-radius: 8px;
    z-index: 0;
    transform: translate(-10px, -10px);
}
.story-img {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 5. Professional Contact Form */
.contact-wrapper {
    background: #fff;
    box-shadow: 0 0 50px rgba(0,0,0,0.05);
    border-radius: 12px;
    overflow: hidden;
}
.contact-info-sidebar {
    background: #1f2937; /* Dark Charcoal */
    color: #fff;
}
.form-control-pro {
    border: none;
    border-bottom: 2px solid #eee;
    border-radius: 0;
    padding: 15px 0;
    background: transparent;
}
.form-control-pro:focus {
    box-shadow: none;
    border-bottom-color: #be123c;
    background: transparent;
}
.btn-brand {
    background-color: #be123c;
    color: white;
    padding: 12px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}
.btn-brand:hover {
    background-color: #9f1239;
    color: white;
    transform: translateY(-2px);
}

/* Icon Box for Info Cards */
.icon-box-primary {
    width: 60px;
    height: 60px;
    background-color: #fff0f3; /* Light Pink */
    color: #be123c; /* Brand Red */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

/* Hover Effect for Info Cards */
.contact-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.contact-card-hover:hover .icon-box-primary {
    background-color: #be123c;
    color: #fff;
}

/* Form Floating Labels Overrides */
.form-floating > .form-control {
    border-radius: 8px;
}
.form-floating > .form-control:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(190, 18, 60, 0.1);
    border: 1px solid #be123c !important;
}
.form-floating > label {
    color: #6c757d;
}
.form-floating > .form-control:focus ~ label {
    color: #be123c;
}

/* Map Filter adjustment */
iframe {
    transition: filter 0.3s ease;
}
iframe:hover {
    filter: grayscale(0) contrast(1) !important;
}