/********** Template CSS **********/
:root {
    --primary: #1e5a0f;
    --secondary: #aa5f03;
    --light: #F7F8FC;
    --dark: #111111;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.py-6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.bg-icon {
    background: url(../img/bg-icon.png) center center repeat;
    background-size: contain;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.fixed-top {
    transition: .5s;
}

.top-bar {
    background: #1e5a0f;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    padding: 25px 15px;
    color: #555555;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: #1e5a0f;
    font-weight: bold;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);
        background: #FFFFFF;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    /* smoother dropdown: fade + slide instead of 3D rotate */
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: translateY(8px);
        transition: transform .18s ease, opacity .18s ease;
        opacity: 0;
        z-index: 2050;
        min-width: 220px;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
        color: #1e5a0f;
    }
}

/* General navbar/drowdown styling */
.navbar {
    z-index: 1100;
}

.confirmation-card {
    max-width: 760px;
    margin: 0 auto;
}

.confirmation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.confirmation-grid > div {
    background: #f7f8fc;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    padding: 14px;
}

.confirmation-label {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 6px;
}

.confirmation-summary {
    border-top: 1px solid #e9e9e9;
    margin-top: 20px;
    padding-top: 16px;
}

.confirmation-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.confirmation-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

@media (max-width: 767px) {
    .confirmation-grid {
        grid-template-columns: 1fr;
    }
}

.navbar .dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.navbar .dropdown-item {
    color: var(--dark);
    padding: 10px 20px;
    font-weight: 500;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: rgba(30,90,15,0.06);
    color: var(--primary);
}

/* Mobile: make dropdowns full-width and touch-friendly inside collapsed nav */
@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        background: #ffffff;
    }
    .navbar .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
        border: none;
        padding-left: 0;
        padding-right: 0;
    }
    .navbar .dropdown-item {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Ensure dropdown sits above announcement bar */
.container-fluid.fixed-top {
    z-index: 2000;
}


.page-header {
    padding-top: 14rem;
    padding-bottom: 6rem;
    background: url(../img/breadcrumb-about.png) top right no-repeat;
    background-size: cover;
}

.page-header1 {
    padding-top: 14rem;
    padding-bottom: 6rem;
    background: url(../img/breadcrumb-contact.png) top right no-repeat;
    background-size: cover;
}

/*** Carousel ***/
#header-carousel .carousel-item {
    height: 75vh;
    min-height: 360px;
    overflow: hidden;
}
#header-carousel .carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center center;
}

#header-carousel .carousel-inner {
    height: 75vh;
    min-height: 360px;
}

/* Slightly darken images for caption readability */
#header-carousel .carousel-item img {
    filter: brightness(0.92);
}

#header-carousel .carousel-caption h5 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

#header-carousel .carousel-caption p {
    color: #fff;
}

/* Background-image slides (faster paint, no layout shift) */
#header-carousel .carousel-item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform .6s ease, opacity .6s ease;
    will-change: transform, opacity;
}

#header-carousel .carousel-item .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.22);
    z-index: 1;
}

#header-carousel .carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}

#header-carousel .carousel-item { position: relative; }

/* keep overlay below caption/content */
#header-carousel .carousel-item > *:not(.overlay) { position: relative; z-index: 3; }

/* Ensure Bootstrap carousel is visible and not hidden by other global styles */
#header-carousel {
    opacity: 1 !important;
    visibility: visible !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}


/*** Section Header ***/
.section-header {
    position: relative;
    padding-top: 0px;
}

/* .section-header::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
}

.section-header::after {
    position: absolute;
    content: "";
    width: 90px;
    height: 2px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
} */

.section-header.text-start::before,
.section-header.text-start::after {
    left: 0;
    transform: translateX(0);
}



/*** About ***/
.about-img img {
    position: relative;
    z-index: 2;
}




/*** Product ***/
.nav-pills .nav-item .btn {
    color: var(--dark);
}

.nav-pills .nav-item .btn:hover,
.nav-pills .nav-item .btn.active {
    color: #FFFFFF;
}

.product-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.product-item img {
    transition: .5s;
}

.product-item:hover img {
    transform: scale(1.1);
}

.product-item small a:hover {
    color: var(--primary) !important;
}


/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item img {
    width: 60px;
    height: 60px;
}

.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item .testimonial-item * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-item.center .testimonial-item i {
    color: var(--secondary) !important;
}

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 0 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-size: 18px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: #FFFFFF;
    background: var(--primary);
}


/*** Footer ***/
.footer {
    color: #999999;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #999999;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 900;
    color: #999999;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}

/* custom css */

.container-fluid.fixed-top.px-0.wow.fadeIn {
    background-color: #fff !important;
}

#header {
    min-height: 155px;
}

@media (max-width: 991.98px) {
    #header {
        min-height: 145px;
    }
}

.fa-facebook-f {
    color: #fff; 
}

.fa-instagram {
    color: #fff; 
}


/* Announcement bar (news ticker) - edge to edge */
.announcement-bar {
    padding: 0.45rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
    z-index: 1035;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Break out of boxed .container so ticker uses full viewport width,
   keep a small breathing space at start/end */
.announcement-bar > .container,
.announcement-bar .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.announcement-bar .ticker {
    overflow: hidden;
    width: 100%;
    display: block;
}
.announcement-bar .ticker__wrap {
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll 20s linear infinite;
}
.announcement-bar .ticker__item {
    flex: 0 0 auto;
    display: inline-block;
    padding-right: 4rem;
    font-weight: 600;
    color: #ffffff;
    font-size: 1rem;
}
.announcement-bar .ticker__wrap:hover {
    animation-play-state: paused;
}

/* Stabilize fixed header to avoid blinking on scroll */
.container-fluid.fixed-top {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Disable WOW/animate effects on the fixed header to prevent layout shifts */
.container-fluid.fixed-top.wow,
.container-fluid.fixed-top.fadeIn,
.container-fluid.fixed-top.animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Make header height stable */
.container-fluid.fixed-top .top-bar,
.container-fluid.fixed-top nav.navbar,
.container-fluid.fixed-top .announcement-bar {
    -webkit-transform: translateZ(0);
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .announcement-bar { padding: 0.5rem 0; }
    .announcement-bar .ticker__item { font-size: 0.9rem; padding-right: 2rem; }
    .page-header { padding-top: 16rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .announcement-bar .ticker__item { font-size: 0.95rem; }
}

.fa-twitter {
    color: #fff; 
}

.mb-5 {
    margin-bottom: 0px !important;
}

.display-2 {
        font-size: 50px!important;
    }

 .btn-check:checked+.btn-outline-primary:focus, .btn-check:active+.btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: none !important;
}

.navbar .dropdown-toggle::after { 
display: none!important;
}

.social-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:transparent;
    transition:all .3s ease;
    font-size:20px;
}

/* Official Colors */
.facebook i{
    color:#1877F2;
}

.instagram i{
    /* Instagram Gradient */
    background:linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.whatsapp i{
    color:#25D366;
}

/* Hover Effect */
.social-icon:hover{
    border-color:#fff;
    background:transparent;
    transform:translateY(-3px);
}

.social-icon:hover i{
    opacity:1;
}

.bgf{
    color:#999999;
}

.bgf:hover{
    color:#fff;
}

.footer .btn.btn-link::before { 
     display:none !important;
}

.category-section{
    background:#faf8f3;
    position:relative;
}

.section-tag{
    display:inline-block;
    color:#6f8b45;
    background:#edf5e5;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:15px;
}

.section-title{
    font-size:44px;
    font-weight:700;
    color:#173c26;
}

.section-subtitle{
    color:#777;
    max-width:650px;
    margin:auto;
    margin-top:10px;
}

.category-card{

    display:block;

    background:white;

    padding:40px 25px;

    border-radius:25px;

    text-align:center;

    text-decoration:none;

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    height:100%;
}



.category-icon{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    background:#f7f4eb;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    transition:.35s;
}

.category-icon img{

    width:120px;
}

.category-card h4{

    color:#183c25;

    font-weight:700;

    margin-bottom:8px;
}

.category-card p{

    color:#777;

    margin-bottom:30px;
}

.category-card span{

    color:#6d8b42;

    font-weight:600;

    transition:.3s;
}

.category-card:hover{

    transform:translateY(-12px);
}

.category-card:hover:before{

    transform:scale(1.6);
}

.category-card:hover .category-icon{

    background:#173c26;
}


.category-card:hover span{

    letter-spacing:1px;
}

.marketplaces{
    padding:20px 20px;
    background:linear-gradient(180deg,#fff,#faf8f3);
    position:relative;
    overflow:hidden;
}

.marketplaces::before{
    content:'';
    width:350px;
    height:350px;
    background:#ffd54f22;
    border-radius:50%;
    position:absolute;
    left:-120px;
    top:-120px;
    filter:blur(40px);
}

.marketplaces::after{
    content:'';
    width:280px;
    height:280px;
    background:#c8e6c922;
    border-radius:50%;
    position:absolute;
    right:-100px;
    bottom:-100px;
    filter:blur(40px);
}

.marketplaces .container{
    max-width:1200px;
    margin:auto;
    text-align:center;
    position:relative;
    z-index:2;
}

.marketplaces .tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#f4efe5;
    color:#8b5e3c;
    font-weight:600;
    margin-bottom:20px;
}

.marketplaces h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:18px;
    color:#1b1b1b;
}

.marketplaces h2 span{
    display:block;
    color:#c08b2b;
}

.marketplaces p{
    max-width:650px;
    margin:auto;
    color:#666;
    font-size:17px;
    margin-bottom:20px;
}

.platforms{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:28px;
}

.platform{
    height:130px;
    background:white;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 10px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    border:1px solid rgba(0,0,0,.05);
    position:relative;
    overflow:hidden;
}

.platform::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,215,0,.08),
        transparent 60%
    );
    opacity:0;
    transition:.35s;
}

.platform:hover{
    transform:translateY(-12px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.12);
}

.platform:hover::before{
    opacity:1;
}

.platform img{
    width:75px;
    transition:.35s;
}

.platform:hover img{
    transform:scale(1.12);
}

.blinkit:hover{
    border-color:#ffd600;
}

.instamart:hover{
    border-color:#ff7a00;
}

.zepto:hover{
    border-color:#7b2ff7;
}

.amazon:hover{
    border-color:#f9a825;
}

.flipkart:hover{
    border-color:#1976d2;
}

.bigbasket:hover{
    border-color:#8bc34a;
}

@media(max-width:768px){

.marketplaces{
    padding:70px 20px;
}

.marketplaces h2{
    font-size:34px;
}

.platform{
    height:110px;
}

.platform img{
    width:60px;
}

}

@media (max-width: 991.98px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-inner {
        height: 55vh;
        min-height: 0;
    }

    #header-carousel .carousel-item img {
        height: 55vh;
        min-height: 0;
    }

    #header-carousel .carousel-caption {
        padding: 1rem 1.25rem;
    }

    .section-title {
        font-size: 36px;
    }

    .section-subtitle {
        max-width: 100%;
        margin-top: 0.75rem;
        font-size: 0.98rem;
    }

    .category-card {
        padding: 30px 20px;
    }

    .category-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 25px;
    }

    .category-icon img {
        width: 70px;
        max-width: 100%;
        height: auto;
    }

    .product-item {
        min-height: auto;
    }

    .testimonial-carousel .owl-item .testimonial-item {
        padding: 1.5rem;
    }

    .testimonial-carousel .owl-item .testimonial-item img {
        width: 50px;
        height: 50px;
    }

    .testimonial-carousel .owl-nav .owl-prev,
    .testimonial-carousel .owl-nav .owl-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .display-2 {
        font-size: 42px !important;
    }
}

@media (max-width: 767.98px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-inner {
        height: auto;
        min-height: 0;
    }

    #header-carousel .carousel-item img {
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center center;
        background: #f6f1e7;
    }

    #header-carousel .carousel-control-prev,
    #header-carousel .carousel-control-next {
        width: 12%;
        opacity: 0.85;
    }

    #header-carousel .carousel-control-prev-icon,
    #header-carousel .carousel-control-next-icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    #header-carousel .carousel-indicators {
        margin-bottom: 0.5rem;
    }

    #header-carousel .carousel-indicators [data-bs-target] {
        width: 22px;
        height: 3px;
    }

    .carousel-caption {
        align-items: flex-end;
        padding: 1rem;
    }

    .carousel-caption h5 {
        font-size: 1.25rem;
    }

    .carousel-caption p {
        font-size: 0.95rem;
    }

    .announcement-bar .ticker__item {
        font-size: 0.88rem;
        padding-right: 1.5rem;
    }

    .category-card {
        padding: 20px 16px;
    }

    .section-title {
        font-size: 30px;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    .platform {
        height: auto;
        min-height: 100px;
    }

    .platform img {
        width: 50px;
    }

    .product-item img {
        max-height: 240px;
    }

    .testimonial-carousel .owl-item .testimonial-item {
        padding: 1rem;
    }

    .testimonial-item p {
        font-size: 0.95rem;
    }

    .testimonial-carousel .owl-nav {
        margin-top: 20px;
    }

    .testimonial-carousel .owl-nav .owl-prev,
    .testimonial-carousel .owl-nav .owl-next {
        width: 38px;
        height: 38px;
    }

    .footer .copyright {
        padding: 20px 0;
        font-size: 14px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 0.75rem 0;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand img {
        max-height: 60px;
    }

    .navbar .navbar-collapse {
        padding: 0 1rem;
    }

    #header-carousel .carousel-item,
    #header-carousel .carousel-inner {
        height: auto;
        min-height: 0;
    }

    #header-carousel .carousel-item img {
        height: auto;
        min-height: 0;
        object-fit: contain;
        object-position: center center;
        background: #f6f1e7;
    }

    #header-carousel .carousel-caption {
        padding: 0.8rem 1rem;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .category-card {
        padding: 16px 14px;
    }

    .category-icon {
        width: 70px;
        height: 70px;
    }

    .category-icon img {
        width: 55px;
    }

    .marketplaces .tag {
        padding: 8px 16px;
    }

    .marketplaces h2 {
        font-size: 30px;
    }

    .marketplaces p {
        font-size: 0.95rem;
    }

    .testimonial-carousel .owl-item .testimonial-item {
        padding: 0.85rem;
    }

    .testimonial-item p {
        font-size: 0.92rem;
    }

    .footer .copyright {
        padding: 16px 0;
    }
}

div#tab-1 {
    margin-top: 20px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Open Sans', Arial, sans-serif;
}

html, body {
    font-family:'Open Sans', Arial, sans-serif;
    color:#333333;
    line-height:1.6;
    background:#fafafa;
    overflow-x: hidden;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.dryfruits{
width:90%;
margin:60px auto;
}

h2{
font-size:36px;
margin-bottom:25px;
}

.tabs{
display:flex;
gap:20px;
margin-bottom:40px;
flex-wrap:wrap;
}

.tab{
background:none;
border:none;
font-size:18px;
cursor:pointer;
padding-bottom:8px;
color:#666;
}

.tab.active{
border-bottom:3px solid #0d8c72;
color:#000;
font-weight:bold;
}

.category{
display:none;
}

.category.active{
display:block;
}

.slider{
position:relative;
max-width:420px;
margin:auto;
}

.slides{
position:relative;
height:420px;
overflow:hidden;
}

.slides .slide{
position:absolute;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
transition:.5s;
}

.slides .slide.active{
opacity:1;
}


.prev,
.next{

position:absolute;
top:50%;
transform:translateY(-50%);
width:45px;
height:45px;
border:none;
border-radius:50%;
background:#fff;
box-shadow:0 5px 15px rgba(0,0,0,.15);
cursor:pointer;
font-size:22px;
z-index:5;
}

.prev{
left:-60px;
}

.next{
right:-60px;
}

.dots{
margin:25px 0;
text-align:center;
}

.dot{

width:12px;
height:12px;
background:#ccc;
display:inline-block;
margin:5px;
border-radius:50%;
cursor:pointer;
}

.dot.active{
background:#0d8c72;
}

.buttons{

display:flex;
justify-content:center;
gap:15px;
margin-top:20px;
flex-wrap:wrap;
}

.buttons a{

text-decoration:none;
padding:12px 25px;
border-radius:8px;
color:#fff;
font-weight:bold;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:150px;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.buttons a:hover{
transform:translateY(-2px);
filter:brightness(0.97);
}

.buttons a.is-added{
background:#0f766e;
}

/* Pack Size Selector Styles */
.pack-size-selector {
    margin: 20px 0;
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

.pack-size-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: block;
}

.pack-size-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pack-size-option {
    padding: 8px 18px;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pack-size-option:hover {
    border-color: #0d8c72;
    color: #0d8c72;
}

.pack-size-option.active {
    background: #0d8c72;
    color: #fff;
    border-color: #0d8c72;
}

.price-display {
    font-size: 20px;
    font-weight: 700;
    color: #0d8c72;
}

.price-value {
    display: inline-block;
}

.cart-indicator{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:50%;
background:#fff;
color:#14532d;
text-decoration:none;
box-shadow:0 2px 8px rgba(0,0,0,.12);
margin-left:12px;
}

.cart-indicator .cart-count{
position:absolute;
top:-4px;
right:-4px;
min-width:20px;
height:20px;
padding:0 5px;
border-radius:999px;
background:#0d8c72;
color:#fff;
font-size:12px;
display:flex;
align-items:center;
justify-content:center;
}

.cart-indicator.has-items{
color:#0d8c72;
}

.checkout-shell{
padding:120px 20px 80px;
}

.checkout-card{
max-width:760px;
margin:0 auto;
background:#fff;
border:1px solid #e6e6e6;
border-radius:16px;
padding:32px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.checkout-card h2{
margin-bottom:10px;
}

.checkout-card p{
margin-bottom:24px;
color:#666;
}

.checkout-product{
display:flex;
align-items:center;
gap:16px;
padding:20px;
background:#f8f8f8;
border-radius:12px;
margin-bottom:16px;
}

.checkout-product-image{
width:72px;
height:72px;
border-radius:12px;
background:#e8f5e9;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#0d8c72;
flex-shrink:0;
}

.checkout-product-details strong{
display:block;
margin-bottom:6px;
}

.checkout-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:24px;
}

.checkout-actions a,
.checkout-actions button{
text-decoration:none;
padding:12px 20px;
border-radius:8px;
font-weight:600;
border:none;
cursor:pointer;
}

.checkout-actions .add-to-cart,
.checkout-actions .buy-now{
display:inline-flex;
align-items:center;
justify-content:center;
}

.checkout-empty{
text-align:center;
padding:20px 0;
color:#666;
}

.checkout-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:24px;
}

.checkout-form-block,
.checkout-review-block{
background:#fafafa;
border:1px solid #ececec;
border-radius:14px;
padding:24px;
}

.checkout-field{margin-bottom:14px;}

.checkout-field label{display:block;font-weight:600;margin-bottom:6px;}

.checkout-field .required{color:#c2410c;}

.checkout-field input,
.checkout-field textarea{
width:100%;
padding:10px 12px;
border:1px solid #dcdcdc;
border-radius:8px;
font:inherit;
}

.checkout-field textarea{min-height:96px;resize:vertical;}

.checkout-feedback{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:14px;}

.checkout-feedback.error{background:#fff7ed;color:#9a2c10;border:1px solid #fed7aa;}

.checkout-feedback.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}

.checkout-feedback ul{margin:0;padding-left:18px;}

.checkout-product{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #ececec;}

.checkout-product:last-child{border-bottom:none;}

.checkout-product img{width:60px;height:60px;border-radius:10px;object-fit:cover;}

.checkout-product-image{width:60px;height:60px;border-radius:10px;background:#edf7ee;display:flex;align-items:center;justify-content:center;color:#0d8c72;}

.checkout-summary{margin-top:12px;padding-top:12px;border-top:1px solid #ececec;}

@media (max-width: 991.98px) {
    .checkout-grid{grid-template-columns:1fr;}
}

.cart-page{
padding:120px 20px 80px;
}

.cart-page .cart-card{
max-width:1100px;
margin:0 auto;
background:#fff;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
border:1px solid #e8e8e8;
overflow:hidden;
}

.cart-page .cart-header{
padding:24px 28px;
border-bottom:1px solid #efefef;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}

.cart-page .cart-content{
padding:28px;
display:grid;
grid-template-columns:1.6fr .8fr;
gap:24px;
}

.cart-item{
display:flex;
align-items:center;
gap:16px;
padding:16px 0;
border-bottom:1px solid #f0f0f0;
}

.cart-item:last-child{
border-bottom:none;
}

.cart-item-image{
width:78px;
height:78px;
border-radius:12px;
background:#f6f6f6;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex-shrink:0;
}

.cart-item-image img{
width:100%;
height:100%;
object-fit:cover;
}

.cart-item-body{flex:1;}

.cart-item-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}

.cart-item-title{font-weight:700;color:#222;margin-bottom:4px;}

.cart-item-price{color:#0d8c72;font-weight:700;}

.cart-qty-controls{display:flex;align-items:center;gap:8px;margin-top:8px;}

.cart-qty-controls button,
.cart-remove-btn,
.cart-action-btn{
border:none;
background:#f1f1f1;
color:#333;
border-radius:999px;
padding:8px 12px;
cursor:pointer;
font-size:14px;
}

.cart-remove-btn,
.cart-action-btn.secondary{
background:#fff1f2;
color:#b91c1c;
}

.cart-summary{
background:#fafafa;
padding:24px;
border-radius:14px;
height:fit-content;
}

.cart-summary .summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eee;}

.cart-summary .summary-row.total{font-weight:700;font-size:18px;border-bottom:none;padding-top:12px;}

.cart-empty{text-align:center;padding:32px 20px;color:#666;}

.cart-empty .cart-action-btn{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;}

@media (max-width: 991.98px) {
    .cart-page .cart-content{grid-template-columns:1fr;}
}

@media (max-width: 575.98px) {
    .cart-page{padding:100px 12px 60px;}
    .cart-page .cart-header, .cart-page .cart-content{padding:20px;}
    .cart-item{flex-direction:column;align-items:flex-start;}
    .cart-item-image{width:100%;height:160px;}
}

.buy{
background:#0d8c72;
}

.add-to-cart{
background:#0d8c72;
}

.buy-now{
background:#14532d;
}

.amazon{
background:#ff9900;
}


/* ============================================================
   Mobile responsiveness (320px - 430px)
   Appended last so these rules override the desktop defaults.
   Scope is intentionally narrow: only phones and small tablets.
   ============================================================ */

/* Prevent any page from scrolling sideways. Individual components below
   are sized to fit, this is the final safety net. */
@media (max-width: 575.98px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* --- Header / navigation --- */

    /* The logo is 100px tall on desktop which pushes the fixed header down and
       eats the viewport on a phone. */
    .navbar .navbar-brand img {
        max-height: 52px !important;
    }

    .navbar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Keep the cart bag reachable without opening the menu. */
    .navbar .cart-indicator {
        margin-right: 4px;
    }

    .navbar-toggler {
        padding: 8px 10px;
        border: 1px solid #e2e2e2;
    }

    /* The collapsed menu is full width; give it breathing room and left
       alignment so items do not sit flush against the screen edge. */
    .navbar .navbar-collapse {
        padding: 8px 0 4px;
    }

    .navbar .navbar-nav {
        padding: 0 !important;
    }

    .navbar .navbar-nav .nav-link {
        padding: 12px 16px !important;
        font-size: 16px;
    }

    .navbar .dropdown-menu {
        width: 100%;
        border-radius: 8px;
        margin: 0 16px 8px;
    }

    /* --- Page spacing --- */

    /* Desktop uses 120px top padding to clear the fixed header, which is far
       too much once the header is this short on a phone. */
    .cart-page,
    .checkout-shell {
        padding: 84px 12px 48px !important;
    }

    .checkout-card,
    .cart-page .cart-card {
        border-radius: 12px;
    }

    .checkout-card,
    .checkout-card > * {
        padding-left: 16px;
        padding-right: 16px;
    }

    .checkout-card h2 {
        font-size: 1.4rem;
    }

    /* --- Cart --- */

    .cart-page .cart-header,
    .cart-page .cart-content {
        padding: 16px !important;
    }

    .cart-page .cart-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cart-page .cart-header h2 {
        font-size: 1.25rem;
    }

    .cart-summary {
        padding: 16px;
    }

    /* Stop long product names and prices forcing the row wider than the screen. */
    .cart-item-body {
        min-width: 0;
    }

    .cart-item-title {
        font-size: 15px;
        overflow-wrap: break-word;
    }

    .cart-item-meta {
        gap: 8px;
    }

    /* Quantity buttons grow to a comfortable tap size. */
    .cart-qty-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cart-qty-controls button {
        min-width: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    /* --- Buttons and tap targets --- */

    .cart-action-btn,
    .checkout-actions a,
    .checkout-actions button {
        min-height: 46px;
        padding: 12px 18px;
        font-size: 15px;
    }

    /* Full width reads far better than two cramped side by side. */
    .checkout-actions {
        flex-direction: column;
        gap: 10px;
    }

    .checkout-actions a,
    .checkout-actions button {
        width: 100%;
    }

    /* --- Forms --- */

    /* 16px keeps iOS Safari from zooming the viewport when a field is focused. */
    .checkout-field input,
    .checkout-field textarea,
    .checkout-field select,
    .form-control {
        font-size: 16px;
        padding: 12px 14px;
        width: 100%;
    }

    .checkout-field label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .checkout-field {
        margin-bottom: 16px;
    }

    /* --- Pack size / price selector on product pages --- */

    .pack-size-selector {
        padding: 14px 12px;
        margin: 16px 0;
    }

    /* Wraps instead of pushing the layout sideways on narrow screens. */
    .pack-size-options {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pack-size-option {
        flex: 1 1 auto;
        min-width: 76px;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .price-display {
        font-size: 18px;
    }

    /* --- Order review --- */

    .checkout-product {
        gap: 12px;
        padding: 14px 0;
    }

    .checkout-review-block,
    .checkout-form-block {
        padding: 16px;
    }

    .checkout-feedback {
        font-size: 14px;
    }

    /* --- Confirmation --- */

    .confirmation-grid > div {
        font-size: 14px;
    }

    /* --- Footer --- */

    .footer .container {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* The five-column spacing is excessive on a phone. */
    .footer .row {
        --bs-gutter-y: 1.5rem;
    }

    .footer h6,
    .footer h5 {
        margin-bottom: 12px;
    }
}

/* Very narrow phones (320px) need a little more room to breathe. */
@media (max-width: 359.98px) {

    .pack-size-option {
        min-width: 66px;
        font-size: 13px;
        padding: 10px 8px;
    }

    .cart-page,
    .checkout-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .checkout-card h2 {
        font-size: 1.25rem;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.flipkart{
background:#2874f0;
}

@media (max-width: 767.98px) {
    .buttons {
        gap: 12px;
    }

    .buttons a {
        flex: 1 1 180px;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .buttons a {
        width: 100%;
    }
}

.platform.amazon {
background:#fff !important;
}

.platform.flipkart {
background:#fff !important;
}

.pt-5 {
    padding-top: 0rem !important;
}

.terms-section{
    max-width:1000px;
    margin:auto;
    padding:80px 20px;
    font-family:Inter,sans-serif;
}

.terms-header{
    text-align:center;
    margin-bottom:50px;
}

.tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#eef7e8;
    color:#4d6b32;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:18px;
}

.terms-header h2{
    font-size:2.8rem;
    color:#222;
    margin-bottom:15px;
}

.terms-header p{
    max-width:650px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.accordion{
    display:flex;
    flex-direction:column;
    gap:18px;
}

details{
    border:1px solid #e7e7e7;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}

details:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

summary{
    cursor:pointer;
    list-style:none;
    padding:22px 28px;
    font-size:1.08rem;
    font-weight:600;
    color:#2d2d2d;
    position:relative;
    transition:.3s;
}

summary::-webkit-details-marker{
    display:none;
}

summary::after{
    content:"+";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5rem;
    color:#6d8d47;
    transition:.3s;
}

details[open] summary::after{
    content:"−";
    transform:translateY(-50%) rotate(180deg);
}

details[open] summary{
    background:#f7fbf3;
    color:#4d6b32;
}

.content{
    padding:0 28px 24px;
    color:#666;
    line-height:1.8;
    animation:fade .35s ease;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:768px){

    .terms-header h2{
        font-size:2rem;
    }

    summary{
        padding:18px 20px;
        font-size:1rem;
    }

    .content{
        padding:0 20px 20px;
    }

}

.faq-section{
    max-width:1100px;
    margin:auto;
    padding:80px 20px;
    font-family:Inter,sans-serif;
}

.faq-header{
    text-align:center;
    margin-bottom:55px;
}

.tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:#eef7e8;
    color:#56723b;
    font-weight:600;
    font-size:.85rem;
    margin-bottom:18px;
}

.faq-header h2{
    font-size:2.8rem;
    color:#222;
    margin-bottom:15px;
}

.faq-header p{
    max-width:650px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
    gap:22px;
}

details{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}

details:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

summary{
    cursor:pointer;
    list-style:none;
    padding:22px 24px;
    font-size:1.05rem;
    font-weight:600;
    color:#222;
    position:relative;
    transition:.3s;
}

summary::-webkit-details-marker{
    display:none;
}

summary::after{
    content:"+";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    background:#f2f7ee;
    color:#5c7b3d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:500;
    transition:.3s;
}

details[open] summary{
    background:#f7fbf3;
    color:#557039;
}

details[open] summary::after{
    content:"−";
    background:#5c7b3d;
    color:#fff;
}

.content{
    padding:0 24px 22px;
    color:#666;
    line-height:1.8;
    animation:fade .35s ease;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:768px){

    .faq-grid{
        grid-template-columns:1fr;
    }

    .faq-header h2{
        font-size:2rem;
    }

    summary{
        font-size:1rem;
        padding:18px 20px;
    }

    .content{
        padding:0 20px 20px;
    }

}

.supportx-section{
    max-width:1200px;
    margin:auto;
    padding:90px 20px;
}

.supportx-heading{
    text-align:center;
    margin-bottom:60px;
}

.supportx-heading h2{
    font-size:52px;
    margin-bottom:10px;
}

.supportx-heading p{
    color:#777;
}

.supportx-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:230px;
    gap:22px;
}

.supportx-card{
    position:relative;
    border-radius:28px;
    background:#fafafa;
    overflow:hidden;
    text-decoration:none;
    color:#222;
    padding:35px;
    transition:.45s;
    border:1px solid #eee;
}

.supportx-card.large{
    grid-column:span 2;
}

.supportx-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:#dceac8;
    right:-120px;
    bottom:-120px;
    transition:.5s;
}

.supportx-card:hover::before{
    transform:scale(1.7);
}

.supportx-card:hover{
    transform:translateY(-10px);
}

.supportx-card>*{
    position:relative;
    z-index:2;
}

.supportx-emoji{
    font-size:55px;
    display:block;
    margin-bottom:25px;
    transition:.5s;
}

.supportx-card:hover .supportx-emoji{
    transform:rotate(-15deg) scale(1.2);
}

.supportx-card h3{
    font-size:28px;
    margin-bottom:10px;
}

.supportx-card p{
    color:#666;
}

@media(max-width:900px){

.supportx-grid{
grid-template-columns:1fr;
grid-auto-rows:200px;
}

.supportx-card.large{
grid-column:span 1;
}

}


/* ============================================================
   Home page (index.html) mobile refinement - 320px to 430px
   Scoped to .home-page so no other page is affected.
   Desktop scale/spacing only; colours, fonts and content
   are unchanged.
   ============================================================ */

@media (max-width: 767.98px) {

    .home-page {
        overflow-x: hidden;
    }

    /* --- Header: hamburger, logo, cart grouped left ---
       Reordered with flex order rather than markup, so the
       shared header markup stays untouched.
       These are deliberately NOT scoped to .home-page: every
       page shares this header, so they give all pages the
       exact index-page mobile header. */
    .navbar {
                margin-left: 15px;
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .navbar-toggler {
        order: 1;
        margin-right: 10px !important;
        padding: 6px 9px;
        border: 1px solid #e6e6e6;
    }

    .navbar-brand {
        order: 2;
        margin-left: 0 !important;
        margin-right: 6px;
        line-height: 1;
    }

    .navbar-brand img {
        max-height: 85px !important;
        width: auto;
    }

    /* Cart sits immediately beside the logo. */
    .navbar .cart-indicator {
        order: 3;
        margin-right: 15 !important;
        font-size: 18px;
    }

    /* Collapsed menu drops onto its own full-width row. */
    .navbar-collapse {
        order: 4;
        flex-basis: 100%;
    }

    .navbar .navbar-nav .nav-link {
        padding: 11px 16px !important;
        font-size: 15px;
    }

    /* --- Announcement bar --- */
    .home-page .announcement-bar .ticker__item {
        font-size: 12px;
        padding: 6px 0;
    }

    /* --- Carousel --- */
    .home-page #header-carousel {
        margin-bottom: 1.5rem !important;
    }

    /* --- Section headings ---
       .section-title is 44px on desktop; headings carrying an
       inline font-size need !important to be overridden. */
    .home-page .section-tag {
        font-size: 12px;
        padding: 5px 12px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .home-page .section-title {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .home-page .section-subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 6px;
    }

    /* --- Explore / Shop by Category header --- */
    .home-page .category-section .text-center {
        margin-bottom: 1.75rem !important;
    }

    /* --- Category cards: one per row, stacked on mobile only --- */
    .home-page .category-section .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 1rem;
    }

    .home-page .category-section .col-lg-3,
    .home-page .category-section .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .home-page .category-card {
        padding: 24px 20px;
        height: auto;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-page .category-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 14px;
    }

    .home-page .category-icon img {
        width: 58px;
        height: 58px;
    }

    .home-page .category-card h4 {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .home-page .category-card p {
        font-size: 12px;
        margin-bottom: 12px;
    }

    /* Compact arrow link instead of a large pill button. */
    .home-page .category-card span {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* --- About section --- */
    .home-page .container-xxl {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .home-page .about-img {
        padding: 0 !important;
        margin-bottom: 1.25rem;
    }

    /* Centre the image and keep natural proportions. */
    .home-page .about-img img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 460px;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
    }

    .home-page .row.g-5 {
        --bs-gutter-y: 1.25rem;
    }

    .home-page .display-5 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    /* Justified body text leaves rivers of white space in a narrow
       column, so left align it on mobile. */
    .home-page .col-lg-6 p {
        text-align: left !important;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 0.9rem;
    }

    /* --- Read More --- */
    .home-page .btn.rounded-pill.py-3 {
        padding: 9px 20px !important;
        font-size: 14px;
        line-height: 1.4;
    }

    /* --- Our Products header --- */
    .home-page .section-header {
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .home-page .section-header .mb-3 {
        margin-bottom: 0 !important;
    }

    .home-page .row.g-0.gx-5 {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0.75rem;
    }

    /* --- Product filter pills ---
       Four pills on one line overflow a 320px screen, so let
       them flow onto neat rows. */
    .home-page .nav-pills {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 8px;
        margin-bottom: 1.25rem !important;
    }

    .home-page .nav-pills .nav-item {
        margin-right: 0 !important;
        margin: 0;
    }

    .home-page .nav-pills .nav-item .btn {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* --- Product grid: two across instead of one very wide card --- */
    .home-page .tab-content .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .home-page .product-item {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .home-page .product-item .text-center.p-4 {
        padding: 12px 8px !important;
    }

    .home-page .product-item a.h5 {
        font-size: 13.5px;
        line-height: 1.35;
        margin-bottom: 8px !important;
        overflow-wrap: break-word;
    }

    /* Keep Buy Now from dominating the card. */
    .home-page .product-item .btn-primary {
        padding: 7px 14px !important;
        font-size: 12.5px;
        line-height: 1.4;
    }

    /* --- Our Stores (marketplaces): one card per row on mobile only --- */
    .home-page .marketplaces {
        padding: 2rem 0 !important;
    }

    .home-page .platforms {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 320px;
        margin: 0 auto;
    }

    .home-page .platform {
        height: auto;
        min-height: 88px;
        padding: 14px 16px;
    }

    .home-page .platform img {
        width: 56px;
        height: auto;
    }

    .home-page .marketplaces h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .home-page .marketplaces p {
        font-size: 14px;
        line-height: 1.6;
    }

    .home-page .marketplaces .tag {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* Decorative background blocks are too wide for a phone. */
    .home-page .marketplaces::before,
    .home-page .marketplaces::after {
        display: none;
    }

    /* --- Testimonials --- */
    .home-page .testimonial-carousel {
        padding-bottom: 1.5rem;
    }

    .home-page .testimonial-item {
        padding: 1rem !important;
        text-align: center;
    }
}

/* Narrowest supported phones (320px / 360px). */
@media (max-width: 359.98px) {

    .navbar-brand img {
        max-height: 38px !important;
    }

    .home-page .section-title {
        font-size: 23px;
    }

    .home-page .display-5 {
        font-size: 21px !important;
    }

    .home-page .category-card {
        padding: 22px 18px;
    }

    .home-page .category-card h4 {
        font-size: 13.5px;
    }

    .home-page .product-item .text-center.p-4 {
        padding: 10px 6px !important;
    }

    .home-page .product-item a.h5 {
        font-size: 12.5px;
    }

    .home-page .product-item .btn-primary {
        padding: 6px 10px !important;
        font-size: 12px;
    }

    .home-page .nav-pills .nav-item .btn {
        padding: 7px 11px;
        font-size: 12px;
    }
}


/* ============================================================
   Home page mobile typography scale + section rhythm
   One consistent size for each role so headings, body copy,
   labels and buttons no longer differ between sections.
   Reference scale (taken from the existing index styling):
     section heading  22px
     card sub-heading 15px
     body copy        14px
     small label      12px
     button           13px
   ============================================================ */

@media (max-width: 767.98px) {

    /* --- Uniform section headings ---
       .section-title, .display-5 and .marketplaces h2 previously
       rendered at 26px / 24px / 22px. They now share one size.
       display-5 needs !important because of the inline font-size. */
    .home-page .section-title,
    .home-page .marketplaces h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .home-page .display-5 {
        font-size: 22px !important;
        line-height: 1.3;
    }

    /* --- Sub-headings (cards, testimonials) ---
       Testimonial h5 was still on Bootstrap's 20px default,
       which made names bigger than the product titles. */
    .home-page .category-card h4,
    .home-page .testimonial-item h5 {
        font-size: 15px;
        line-height: 1.35;
    }

    /* --- Body copy --- */

    .home-page .section-subtitle,
    .home-page .marketplaces p,
    .home-page .testimonial-item p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* --- Small labels --- */

    .home-page .section-tag {
        font-size: 12px;
        padding: 5px 12px;
        margin-bottom: 8px;
    }

    .home-page .marketplaces .tag {
        font-size: 12px;
        padding: 6px 12px;
    }

    .home-page .category-card p {
        font-size: 12px;
        line-height: 1.5;
    }

    /* --- Buttons --- */

    .home-page .product-item .btn-primary {
        font-size: 13px;
        padding: 7px 14px !important;
    }

    .home-page .nav-pills .nav-item .btn {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* --- Product titles --- */

    .home-page .product-item a.h5 {
        font-size: 13px;
        margin-bottom: 8px !important;
    }

    /* --- Section rhythm ---
       "Shop by Category" and "Shop Your Favorite Dry Fruits"
       sit one below the other. Giving both the same vertical
       padding keeps the gap between them even instead of one
       section crowding the next. */
    .home-page .category-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .home-page .marketplaces {
        padding: 1.5rem 0 !important;
    }

    /* Even gap under the "Shop by Category" intro block. */
    .home-page .category-section .text-center {
        margin-bottom: 1.5rem !important;
    }

    /* Even gap under the "Shop Your Favorite Dry Fruits" block.
       That section centres via .marketplaces .container rather than a
       .text-center wrapper, so the spacing is set on its children.
       Desktop used 20px / 18px / 20px margins. */
    .home-page .marketplaces .tag {
        margin-bottom: 10px;
    }

    .home-page .marketplaces p {
        margin-bottom: 16px;
    }

    /* Sub-heading margins kept identical between the two headings. */
    .home-page .section-title,
    .home-page .marketplaces h2 {
        margin-bottom: 8px;
    }

    /* Testimonial copy carried a desktop mb-4 (1.5rem) gap. */
    .home-page .testimonial-item p {
        margin-bottom: 10px !important;
    }
}

/* Narrowest supported phones (320px / 360px): the same scale,
   stepped down together so proportions hold. */
@media (max-width: 359.98px) {

    .home-page .section-title,
    .home-page .marketplaces h2 {
        font-size: 20px;
    }

    .home-page .display-5 {
        font-size: 20px !important;
    }

    .home-page .category-card h4,
    .home-page .testimonial-item h5 {
        font-size: 14px;
    }

    .home-page .section-subtitle,
    .home-page .marketplaces p,
    .home-page .testimonial-item p {
        font-size: 13px;
    }

    .home-page .product-item a.h5 {
        font-size: 12.5px;
    }

    .home-page .product-item .btn-primary,
    .home-page .nav-pills .nav-item .btn {
        font-size: 12px;
    }
}


/* ============================================================
   Footer mobile compaction - 320px to 430px
   The footer is shared by every page, so these rules are
   limited to small screens only. Desktop is untouched.
   ============================================================ */

@media (max-width: 767.98px) {

    /* Outer and inner padding: py-5 / pt-5 are 3rem each, which is
       most of a phone screen of scrolling for no reason. */
    .footer.pt-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 0 !important;
    }

    .footer > .container {
        padding-top: 0 !important;
        padding-bottom: 1.25rem !important;
    }

    /* The 3rem column gutter left huge gaps between stacked blocks. */
    .footer .row.g-5 {
        --bs-gutter-y: 1rem;
        --bs-gutter-x: 1rem;
    }

    .footer .col-lg-3,
    .footer .col-md-6 {
        margin-bottom: 0;
    }

    /* --- Headings ---
       These are h4, which renders at 24px on mobile. Still larger
       than body copy, but compact. */
    .footer h4 {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 8px !important;
    }

    /* --- Body copy --- */

    .footer p {
        font-size: 13.5px;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    /* The description sits under the FSSAI logo. */
    .footer p[style*="padding-top"] {
        padding-top: 8px !important;
        margin-bottom: 10px;
    }

    /* --- Contact rows (address / phone / email) ---
       Tighter icon gap so each line stays on one row. */
    .footer p .fa {
        font-size: 12px;
    }

    .footer p i.me-3 {
        margin-right: 8px !important;
    }

    .footer a.text-decoration-none {
        font-size: 13.5px;
        overflow-wrap: anywhere;
    }

    /* --- Quick links ---
       Bootstrap's .btn adds generous vertical padding, which makes
       a short list of links into a tall block. */
    .footer .btn.btn-link {
        font-size: 14px;
        line-height: 1.5;
        padding: 3px 0 !important;
        margin-bottom: 2px !important;
    }

    /* --- Social icons --- */

    .footer .social-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .footer .d-flex.pt-2 {
        padding-top: 4px !important;
    }

    /* --- FSSAI logo --- */

    .footer img[alt="Puffora Naturals"] {
        max-height: 56px !important;
        width: auto;
    }

    /* --- Map embed --- */

    .footer .position-relative iframe {
        width: 100% !important;
        max-width: 100%;
        height: 140px;
    }

    /* --- Copyright bar --- */

    .footer .copyright {
        padding: 14px 0;
        font-size: 12.5px;
        line-height: 1.5;
    }

    .footer .copyright .mb-3 {
        margin-bottom: 2px !important;
    }
}

/* Narrowest supported phones (320px). */
@media (max-width: 359.98px) {

    .footer h4 {
        font-size: 15px;
    }

    .footer p,
    .footer a.text-decoration-none {
        font-size: 13px;
    }

    .footer .btn.btn-link {
        font-size: 13.5px;
    }

    .footer .social-icon {
        width: 33px;
        height: 33px;
        font-size: 15px;
    }

    .footer img[alt="Puffora Naturals"] {
        max-height: 48px !important;
    }
}


/* ============================================================
   Other customer-facing pages - mobile (320px - 767px)
   Applies to: about, contact, faq, support, terms, 404,
   thank-you, cart, checkout, and the four listing pages.

   Type scale mirrors the index page mobile scale:
     section heading  22px
     sub-heading      15-17px
     body copy        14px
     button           14-15px
   ============================================================ */

@media (max-width: 767.98px) {

    /* --- Typography scale ---
       The stylesheet carries a global "h2 { font-size:36px }" which made
       every unclassed heading oversized on a phone. Bootstrap h4/h5 were
       also left at 24px / 20px. Everything drops to one compact scale.
       Index page headings use class selectors, so they are unaffected. */
    h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    h3 {
        font-size: 17px;
        line-height: 1.35;
    }

    h4 {
        font-size: 16px;
        line-height: 1.35;
    }

    h5 {
        font-size: 15px;
        line-height: 1.4;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Bootstrap hero headings used on about / contact / 404. */
    .display-1 {
        font-size: 40px !important;
    }

    .display-3 {
        font-size: 26px !important;
    }

    .display-5 {
        font-size: 22px !important;
    }

    /* Page-specific headings that override the bare-element rules above
       (higher specificity), so they need their own mobile values. */
    .supportx-heading h2,
    .faq-header h2,
    .terms-header h2 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .supportx-card h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .faq-header p,
    .terms-header p,
    .supportx-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* --- Breadcrumb hero (about / contact / 404) ---
       14rem of top padding cleared a desktop header; far too much on a
       phone where the header is much shorter. */
    .page-header,
    .page-header1 {
        padding-top: 110px !important;
        padding-bottom: 32px !important;
        background-position: center;
    }

    .breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
        padding: 0;
    }

    /* --- Section spacing --- */
    .faq-section,
    .terms-section,
    .supportx-section {
        padding: 40px 16px;
    }

    .faq-header,
    .terms-header,
    .supportx-heading {
        margin-bottom: 24px;
    }

    /* Product listing sections used 60px of vertical margin. */
    .dryfruits {
        width: 100%;
        margin: 32px auto;
    }

    /* --- FAQ / Terms accordions --- */
    summary {
        padding: 16px 18px;
        font-size: 15px;
        padding-right: 52px;
    }

    summary::after {
        right: 16px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .content {
        padding: 0 18px 18px;
        font-size: 14px;
        line-height: 1.7;
    }

    /* --- Support grid cards --- */
    .supportx-grid {
        grid-auto-rows: minmax(190px, auto);
        gap: 16px;
    }

    .supportx-emoji {
        font-size: 40px;
        margin-bottom: 14px;
    }

    /* --- Listing pages: tabs, image slider, actions --- */
    .tabs {
        gap: 12px;
        margin-bottom: 24px;
    }

    .tab {
        font-size: 15px;
        padding-bottom: 6px;
    }

    .slider {
        max-width: 100%;
    }

    .slides {
        height: 340px;
    }

    /* Desktop parks the arrows 60px outside the slider, which put them
       off-screen on a phone and made the slider unusable. Pull them
       inside the image. */
    .prev {
        left: 6px;
    }

    .next {
        right: 6px;
    }

    .prev,
    .next {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .buttons {
        gap: 10px;
        margin-top: 16px;
    }

    .buttons a {
        padding: 11px 16px;
        font-size: 14px;
    }

    /* --- Buttons ---
       :not() keeps .btn-lg-square (the round back-to-top control) at
       its 48px size instead of inheriting this padding. */
    .btn-lg:not(.btn-lg-square) {
        font-size: 15px;
        padding: 10px 20px;
    }

    /* Bootstrap py-3 / px-5 are !important, so this needs !important to
       win. Scoped to non-homepage bodies: index.html carries
       <body class="home-page"> and its 16 product CTAs already have their
       own compact scale from the index block, which this must not
       override. Covers the contact/404 Submit pill and the about Read
       More pill (btn-secondary as well as btn-primary). */
    body:not(.home-page) .rounded-pill.py-3 {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }

    /* --- Contact info cards (address / phone / email) ---
       p-5 is a Bootstrap !important utility. */
    .bg-primary.p-5 {
        padding: 24px !important;
    }

    .bg-primary.p-5 p.mb-5 {
        margin-bottom: 1.25rem !important;
    }

    .bg-primary.p-5 h5 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .bg-primary.p-5 .d-flex.pt-2 {
        margin-top: 0.5rem !important;
    }
}


/* Narrowest supported phones (320px): the same scale, stepped down. */
@media (max-width: 359.98px) {

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 15px;
    }

    .display-1 {
        font-size: 34px !important;
    }

    .display-3 {
        font-size: 23px !important;
    }

    .display-5 {
        font-size: 20px !important;
    }

    .supportx-heading h2,
    .faq-header h2,
    .terms-header h2 {
        font-size: 20px;
    }

    .page-header,
    .page-header1 {
        padding-top: 96px !important;
    }

    summary {
        padding: 14px 16px;
        font-size: 14.5px;
        padding-right: 46px;
    }

    summary::after {
        right: 12px;
        width: 26px;
        height: 26px;
    }

    .content {
        padding: 0 16px 16px;
        font-size: 13.5px;
    }

    .slides {
        height: 300px;
    }

    .buttons a {
        padding: 11px 13px;
        font-size: 13.5px;
    }

    .btn-lg:not(.btn-lg-square) {
        font-size: 14px;
        padding: 10px 16px;
    }

    .bg-primary.p-5 {
        padding: 20px !important;
    }
}

.about-img.position-relative.overflow-hidden.p-5.pe-0 {
    padding-left: 0px !important;
}