/********** Template CSS **********/
:root {
    /* ============================================================
       PASTEL DESIGN TOKENS
       Single source of truth for the whole colour system.
       Signature brand colour: #B0DCD1
       ============================================================ */

    /* --- Signature brand --- */
    --brand: #B0DCD1;          /* soft sage / mint   — primary brand */
    --brand-light: #DCEFEA;    /* light mint         — secondary pastel sections */
    --brand-pale: #EEF7F4;     /* very light mint    — alternate sections / header */
    --brand-sage: #C8DCCF;     /* soft sage          — footer / hover states */

    /* --- Warm neutrals --- */
    --cream: #FAF6EE;          /* warm cream         — main page background */
    --beige: #EDE3D5;          /* soft beige         — decorative sections */
    --taupe: #B9AAA0;          /* warm taupe         — muted details */

    /* --- Decorative pastels (small areas only) --- */
    --rose: #E8C8C0;           /* dusty rose */
    --peach: #F2D5C7;          /* soft peach */
    --lavender: #DDD6E8;       /* muted lavender */

    /* --- Surfaces & lines --- */
    --surface: #FFFFFF;        /* cards */
    --surface-alt: #FAF6EE;    /* alternating cards */
    --border: #D5E5DF;         /* very light border */

    /* --- Legacy aliases (kept so existing var() references resolve) --- */
    --primary: #B0DCD1;
    --secondary: #E8C8C0;
    --light: #EEF7F4;
    --dark: #42534E;

    /* ---- Shola design tokens ---- */
    /* Fonts */
    --font-display: 'Lora', 'Open Sans', serif;
    --font-body: 'Open Sans', Arial, sans-serif;

    /* Type scale (rem � relative to the 15/14/13px root scale) */
    --fs-xs: 0.75rem;          /* ~11px  captions */
    --fs-sm: 0.85rem;         /* ~12px  labels / badge chips */
    --fs-base: 0.95rem;       /* ~14px  base UI text */
    --fs-md: 1rem;            /* ~15px  paragraphs / buttons */
    --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);   /* ~17�20px */
    --fs-h3: clamp(1.3rem, 2vw, 1.6rem);     /* ~20�24px */
    --fs-h2: clamp(1.6rem, 2.8vw, 2.5rem);   /* ~25�38px */
    --fs-h1: clamp(2rem, 3.4vw, 2.8rem);     /* ~30�42px */
    --fs-hero: clamp(2.6rem, 4.5vw, 4rem);   /* ~39�60px hero titles */

    /* Text colors */
    --heading: #42534E;        /* headings — soft muted green/gray, never black */
    --text: #52605C;           /* body copy */
    --text-muted: #6E7C77;     /* secondary copy (derived tint of --text) */
    --text-strong: #42534E;
    --text-body: #52605C;

    /* Buttons */
    --btn-font: var(--font-body);
    --btn-weight: 600;
    --btn-radius: 999px;
    --btn-min-h: 48px;
    --btn-pad-y: 0.9rem;
    --btn-pad-x: 2rem;
    --btn-gap: 0.625rem;                     /* 10px  icon gap */
    --btn-focus-ring: 0 0 0 4px rgba(82, 96, 92, 0.35);
    --btn-transition: transform .3s ease, background-color .3s ease, color .3s ease,
        border-color .3s ease, box-shadow .3s ease;
    --link-focus: 3px solid rgba(82, 96, 92, 0.55);

    /* Cards & grids */
    --radius-sm: 14px;                         /* chips / inner bits */
    --radius-md: 20px;                         /* inset cards */
    --radius-lg: 28px;                         /* standard cards */
    --radius-xl: 32px;                         /* feature frames */
    --shadow-1: 0 12px 32px rgba(82, 96, 92, 0.06);
    --shadow-2: 0 24px 48px rgba(82, 96, 92, 0.10);
    --shadow-3: 0 30px 60px rgba(82, 96, 92, 0.14);
    --card-pad: clamp(20px, 3vw, 32px);
    --grid-gap: 24px;                          /* card grids */
    --split-gap: clamp(36px, 5vw, 60px);       /* 2-column splits */
}

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


/* =========================
   WhatsApp Floating Button
   ========================= */
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(82, 96, 92, 0.245);
    text-decoration: none;
    z-index: 3000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.whatsapp-float__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    line-height: 0;
}

.whatsapp-float__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.whatsapp-float__text {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    letter-spacing: 0.02em;
    transition: max-width 0.3s ease, opacity 0.3s ease, padding-left 0.3s ease;
    overflow: hidden;
}

.whatsapp-float:hover {
    background-color: var(--brand);
    box-shadow: 0 10px 28px rgba(82, 96, 92, 0.3);
    transform: translateY(-3px) scale(1.05);
}

.whatsapp-float:hover .whatsapp-float__icon svg {

    transform: scale(1.1);
}

.whatsapp-float:hover .whatsapp-float__text {
    max-width: 140px;
    opacity: 1;
    padding-left: 8px;
    /* tooltip for right-side button */
}

/* Keep it circular icon only on mobile/tablets */
@media (max-width: 991.98px) {
    .whatsapp-float:hover .whatsapp-float__text {
        max-width: 0;
        opacity: 0;
        padding-left: 0;
    }
    .whatsapp-float:hover {
        transform: translateY(-3px);
    }
}

/* =========================
   Instagram Floating Button
   ========================= */
.instagram-float {
    position: fixed;
    right: 30px;
    bottom: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(45deg, #E8C8C0 0%, #F2D5C7 25%, #DDD6E8 50%, #E8C8C0 75%, #DDD6E8 100%);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(82, 96, 92, 0.245);
    text-decoration: none;
    z-index: 3000;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.instagram-float__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    line-height: 0;
}

.instagram-float__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.instagram-float__text {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    letter-spacing: 0.02em;
    transition: max-width 0.3s ease, opacity 0.3s ease, padding-left 0.3s ease;
    overflow: hidden;
}

.instagram-float:hover {
    background: linear-gradient(45deg, #E8C8C0 0%, #F2D5C7 25%, #DDD6E8 50%, #E8C8C0 75%, #DDD6E8 100%);
    box-shadow: 0 10px 28px rgba(82, 96, 92, 0.3);
    transform: translateY(-3px) scale(1.05);
}

.instagram-float:hover .instagram-float__icon svg {

    transform: scale(1.1);
}

.instagram-float:hover .instagram-float__text {
    max-width: 140px;
    opacity: 1;
    padding-left: 8px;
    /* tooltip for right-side button */
}

/* Keep it circular icon only on mobile/tablets */
@media (max-width: 991.98px) {
    .instagram-float:hover .instagram-float__text {
        max-width: 0;
        opacity: 0;
        padding-left: 0;
    }
    .instagram-float:hover {
        transform: translateY(-3px);
    }
}

.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: var(--heading);
}

.btn.btn-primary {
    background-color: #B0DCD1;
    border-color: #B0DCD1;
    color: var(--heading);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: #B0DCD1;
    border-color: #B0DCD1;
    color: var(--heading);
}


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

/* Header structural alignment */
.navbar-brand {
    padding: 0;
    margin-right: 0;
}
.navbar .row.w-100 > [class*="col-"] {
    min-width: 0;   /* let flex children shrink instead of overflowing */
}

/* Refined header/navbar alignment overrides */
@media (min-width: 992px) {
    .container-fluid.fixed-top nav { padding-top: 0; padding-bottom: 0; }
    .container-fluid.fixed-top .row.w-100 { min-height: 96px; }
    .nav-left, .nav-center-logo, .nav-right { display:flex; align-items:center; }
    .nav-left { padding-left: 1.5rem; }
    .nav-right { padding-right: 1.5rem; }
    .navbar .navbar-nav.flex-lg-row { padding: 0; margin: 0; gap: 1.25rem; }
    /* make nav links vertically centered and not stacked */
    .navbar .navbar-nav .nav-link { padding: 0.5rem .75rem; line-height: 1; height: auto; }
    .nav-right .navbar-nav { align-items: center; }
    /* ensure dropdown label aligns with other links */
    .nav-item.dropdown > .nav-link::after { margin-left: .5rem; }
    /* Desktop: restore in-flow links (undo mobile absolute menu panel) */
    .navbar .nav-right { position: static; }
    .navbar .nav-right > .collapse.navbar-collapse {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        margin: 0;
    }
}

@media (max-width: 991.98px) {
    /* keep pills hidden but ensure logo and toggler align */
    .nav-center-logo { justify-content: center; }
    .nav-right { justify-content: flex-end; }
    .nav-left { padding-left: .75rem; }
}

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

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

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--brand-pale);
    color: var(--heading);
}

/* Mobile: make dropdowns full-width and touch-friendly inside collapsed nav */
@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        background: var(--brand-pale);
    }
    .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 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

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

/* ensure images render and don't collapse */
#header-carousel .carousel-item img {
    display: block;
    width: 100%;
    height: 75vh;
    object-fit: cover;
}

/* 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(66, 83, 78, 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: var(--heading);
}


/*** 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;
}

.about-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background-image: -webkit-repeating-radial-gradient(#DCEFEA, #DCEFEA 5px, transparent 5px, transparent 10px);
    background-image: -moz-repeating-radial-gradient(#DCEFEA, #DCEFEA 5px, transparent 5px, transparent 10px);
    background-image: -ms-repeating-radial-gradient(#DCEFEA, #DCEFEA 5px, transparent 5px, transparent 10px);
    background-image: -o-repeating-radial-gradient(#DCEFEA, #DCEFEA 5px, transparent 5px, transparent 10px);
    background-image: repeating-radial-gradient(#DCEFEA, #DCEFEA 5px, transparent 5px, transparent 10px);
    background-size: 20px 20px;
    transform: skew(20deg);
    z-index: 1;
}


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

.nav-pills .nav-item .btn:hover,
.nav-pills .nav-item .btn.active {
    color: var(--heading);
}

.product-item {
    box-shadow: 0 0 45px rgba(82, 96, 92, 0.042);
}

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

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

.product-item small a:hover {
    color: var(--heading) !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: var(--text) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item i {
    color: var(--heading) !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(--text);
    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: var(--text);
    background: var(--primary);
}


/*** Footer ***/
.footer {
    color: var(--text);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--heading);
    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: var(--heading);
    margin-right: 10px;
}

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

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid #D5E5DF;
}

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

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

/* custom css */

.container-fluid.fixed-top.px-0.wow.fadeIn {
    background-color: var(--brand-pale) !important;
}

#header {
    min-height: 144px;   /* top-bar 45px + navbar row 96px + border */
}

@media (max-width: 991.98px) {
    #header {
        min-height: 76px;   /* collapsed nav: logo 60px + padding */
    }
}

@media (max-width: 575.98px) {
    #header {
        min-height: 66px;   /* compact phone header: logo 52px + padding */
    }
}

.fa-facebook-f {
    color: var(--heading); 
}

.fa-instagram {
    color: var(--heading); 
}


/* Announcement bar (news ticker) */
.announcement-bar {
    padding: 0.45rem 0;
    border-top: 1px solid rgba(82,96,92,0.04);
    z-index: 1035;
}

.announcement-bar .ticker {
    overflow: hidden;
}
.announcement-bar .ticker__wrap {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll 20s linear infinite;
}
.announcement-bar .ticker__item {
    display: inline-block;
    padding-right: 4rem;
    font-weight: 600;
    color: var(--text);
    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: var(--brand-pale) !important;
    border-bottom: 1px solid rgba(82,96,92,0.07) !important;
    box-shadow: 0 2px 6px rgba(82,96,92,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: var(--heading); 
}

.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: var(--text);
}

.instagram i{
    /* Instagram Gradient */
    background: linear-gradient(
        45deg,
        #C8DCCF,
        #E07B1F,
        #E07B1F,
        #C96F18,
        #A85A12
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
}

.whatsapp i{
    color: var(--text);
}

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

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

.bgf{
    color: var(--text);
}

.bgf:hover{
    color: var(--text);
}

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

.category-section{
    background: transparent;
    position:relative;
}

.section-tag{
    display:inline-block;
    color: var(--heading);
    background: var(--brand-light);
    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: var(--heading);
}

.section-subtitle{
    color: var(--heading);
    max-width:650px;
    margin:auto;
    margin-top:10px;
}

.category-card{

    display:block;

background: var(--cream);

    padding:40px 25px;

    border-radius:25px;

    text-align:center;

    text-decoration:none;

    position:relative;

    overflow:hidden;

    transition:.35s;

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

    height:100%;
}



.category-icon{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    background: #FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    transition:.35s;
}

.category-icon img{

    width:120px;
}

.category-card h4{

    color: var(--heading);

    font-weight:700;

    margin-bottom:8px;
}

.category-card p{

    color: var(--heading);

    margin-bottom:30px;
}

.category-card span{

    color: var(--heading);

    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: var(--brand-sage);
}


.category-card:hover span{

    letter-spacing:1px;
}

.marketplaces{
    padding:20px 20px;
    background: transparent;
    position:relative;
    overflow:hidden;
}

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

.marketplaces::after{
    content:'';
    width:280px;
    height:280px;
    background: #B0DCD133;
    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: var(--brand-light);
    color: var(--heading);
    font-weight:600;
    margin-bottom:20px;
}

.marketplaces h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:18px;
    color: var(--heading);
}

.marketplaces h2 span{
    display:block;
    color: var(--heading);
}

.marketplaces p{
    max-width:650px;
    margin:auto;
    color: var(--text);
    font-size:17px;
    margin-bottom:20px;
}

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

.platform{
    height:130px;
    background: #FFFFFF;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 10px 35px rgba(82, 96, 92, 0.048);
    transition:.35s ease;
    border: 1px solid #D5E5DF;
    position:relative;
    overflow:hidden;
}

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

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

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

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

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

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

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

.zepto:hover{
    border-color: #D5E5DF;
}

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

.flipkart:hover{
    border-color: #D5E5DF;
}

.bigbasket:hover{
    border-color: #D5E5DF;
}

@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-inner {
        height: 55vh;
    }

    #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;
    }
}

@media (max-width: 767.98px) {
    #header-carousel .carousel-inner {
        height: 45vh;
    }

    .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 .navbar-collapse {
        padding: 0 1rem;
    }

    #header-carousel .carousel-inner {
        height: 40vh;
    }

    #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;
}

/* ============================================
   GLOBAL LAYOUT FOUNDATION
   ============================================ */

/* Box sizing: keep the border-box model (matches Bootstrap reboot) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Root typography: brand face + rem scale */
html {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

/* Body: Bootstrap handles `margin: 0`; we keep the visual
   defaults here and deliberately NO `overflow-x` mask so
   real horizontal overflow can be seen and fixed in the section that
   causes it. */
body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1rem;
        color: var(--text);
    line-height: 1.6;

    /* GLOBAL PAGE BACKGROUND
       Solid brand tint (#b0dcd1) replaces the previous full-site photo.
       No image, no overlay, no cover/position handling needed. */
    background-color: #b0dcd1;
    background-image: none;
}

/* GLOBAL PAGE BACKGROUND is a single solid colour (#b0dcd1) at every
   breakpoint — the previous photo and its per-breakpoint dark overlays
   have been removed, so no viewport-specific overrides are needed. */

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

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

.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: var(--heading);
}

.tab.active{
border-bottom: 3px solid #B0DCD1;
color: var(--heading);
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: #FFFFFF;
box-shadow:0 5px 15px rgba(82, 96, 92, 0.09);
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: rgba(255, 255, 255, 0.6);
display:inline-block;
margin:5px;
border-radius:50%;
cursor:pointer;
}

.dot.active{
background: #B0DCD1;
}

.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: var(--text);
font-weight:bold;
}

.buy{
background: #B0DCD1;
}

.amazon{
background: #B0DCD1;
}

.flipkart{
background: #B0DCD1;
}

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

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

/*==========================
        SHOLA FOOTER
===========================*/

.shola-footer{
    background: var(--brand);
    color: var(--text);
    padding: clamp(3rem, 7vw, 4.5rem) 0 1.75rem;
    position:relative;
    overflow:hidden;
}


.shola-footer::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background: radial-gradient(circle,rgba(255, 255, 255, 0.55),transparent 70%);

    top:-180px;

    right:-120px;

}


.shola-footer-logo img{

    height:70px;

    margin-bottom:25px;

}


.shola-footer-title{

    color: var(--heading);

    font-size:32px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:18px;

}


.shola-footer-title span{

    color: var(--heading);

    display:block;

}


.shola-footer-text{

    color: var(--text);

    line-height:1.9;

    margin-bottom:35px;

}


.footer-heading{

    color: var(--heading);

    font-size:22px;

    margin-bottom:25px;

    position:relative;

}


.footer-heading::after{

    content:"";

    width:45px;

    height:2px;

    background: var(--brand);

    display:block;

    margin-top:10px;

}


.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}


.footer-links li{

    margin-bottom:0px;

}


.footer-links a{

    color: var(--text);

    text-decoration:none;

    transition:.35s;

    display:inline-block;

}


.footer-links a:hover{

    color: var(--text);

    transform:translateX(8px);

}


.footer-contact div{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:22px;

}


.footer-contact i{

    color: var(--text);

    margin-top:5px;

    width:20px;

}


.footer-contact a,

.footer-contact span{

    color: var(--text);

    text-decoration:none;

    transition:.3s;

}


.footer-contact a:hover{

    color: var(--text);

}


.shola-footer-promise{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


.shola-footer-promise span{

    background: var(--brand-light);

    border: 1px solid #D5E5DF;

    color: var(--heading);

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

    transition:.35s;

}


.shola-footer-promise span:hover{

    background: var(--brand-light);

    color: var(--heading);

    transform:translateY(-4px);

}


.shola-footer-promise i{

    margin-right:8px;

}


.footer-divider{

    border-color: #D5E5DF;

    margin:30px 0 20px;

}


.footer-copy,

.footer-credit{

    color: var(--text);

    margin:0;

}


.footer-credit a{

    color: var(--text);

    text-decoration:none;

}


.footer-credit a:hover{

    color: var(--text);

}


@media(max-width:991px){

.footer-divider{

margin:24px 0 18px;

}

}

/*==========================================
        SHOLA EXPLORE COLLECTIONS
        PART 1
==========================================*/

.shola-explore{
    position:relative;
    padding:90px 0;
    overflow:hidden;
}

.shola-explore::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-260px;
    top:-180px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.3),
    transparent 72%);
}

.shola-explore::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-150px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 72%);
}


/*==============================
        SECTION TITLE
==============================*/

.shola-explore-label{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 22px;

    border-radius:50px;

    background: var(--brand-light);

    border: 1px solid #D5E5DF;

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

    box-shadow:0 10px 25px rgba(82, 96, 92, 0.024);

}

.shola-explore-title{

    margin-top:18px;

    font-size:46px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

    letter-spacing:-1px;

}


/*==============================
        CARD
==============================*/

.shola-collection-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:28px;

    background: #FFFFFF;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    border-radius:28px;

    padding:32px;

    min-height:220px;

    overflow:hidden;

    transition:.45s;

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

}

.shola-feature-card{

    background: linear-gradient(135deg,
    #FFFFFF,
    #171717);

}

.shola-collection-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background: linear-gradient(135deg,
    rgba(176, 220, 209, 1),
    transparent,
    rgba(176, 220, 209, 0.9));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.shola-collection-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(82, 96, 92, 0.048);

}

.shola-collection-card:hover::before{

    opacity:1;

}


/*==============================
        ICON
==============================*/

.shola-card-icon{

    width:86px;

    height:86px;

    min-width:86px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: linear-gradient(135deg,
    #B0DCD1,
    #C8DCCF);

    color: var(--heading);

    font-size:34px;

    transition:.45s;

    box-shadow:
    0 18px 30px rgba(176, 220, 209, .30);

}

.shola-collection-card:hover
.shola-card-icon{

    transform:
    rotate(-8deg)
    scale(1.08);

}


/*==============================
        CONTENT
==============================*/

.shola-card-content{

    flex:1;

}

.shola-card-number{

    display:inline-block;

    color: var(--text);

    font-size:12px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:10px;

}

.shola-card-content h3{

    font-size:27px;

    color: var(--heading);

    font-weight:700;

    margin-bottom:18px;

    transition:.35s;

}

.shola-collection-card:hover h3{

    color: var(--heading);

}

.shola-item-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.shola-item-list span{

    display:inline-flex;

    align-items:center;

    padding:9px 16px;

    border-radius:30px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    font-size:13px;

    font-weight:500;

    transition:.35s;

}

.shola-item-list span:hover{

    background: #B0DCD1;

    color: var(--heading);

    border-color: #B0DCD1;

}

/*==========================================
        ARROW
==========================================*/

.shola-arrow{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: #FFFFFF;

    color: var(--text);

    font-size:20px;

    transition:all .4s ease;

    position:relative;

    overflow:hidden;

}

.shola-arrow::before{

    content:"";

    position:absolute;

    inset:0;

    background: linear-gradient(135deg,#B0DCD1,#C8DCCF);

    transform:scale(0);

    transition:.4s;

    border-radius:18px;

}

.shola-arrow i{

    position:relative;

    z-index:2;

    transition:.35s;

}

.shola-collection-card:hover .shola-arrow{

    color: var(--text);

}

.shola-collection-card:hover .shola-arrow::before{

    transform:scale(1);

}

.shola-collection-card:hover .shola-arrow i{

    transform:translateX(6px);

}


/*==========================================
        WHOLESALE STRIP
==========================================*/

.shola-wholesale-strip{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:26px 34px;

    border-radius:24px;

    background: #FFFFFF;

    color: var(--text);

    transition:.45s;

    position:relative;

    overflow:hidden;

    cursor:pointer;

}

.shola-wholesale-strip::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .12),
        transparent
    );

    transition:1s;

}

.shola-wholesale-strip:hover::before{

    left:120%;

}

.shola-wholesale-strip:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 45px rgba(82, 96, 92, 0.09);

}

.shola-strip-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.shola-strip-left i{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: #FFFFFF;

    color: var(--text);

    font-size:22px;

}

.shola-strip-left span{

    font-size:20px;

    font-weight:600;

    letter-spacing:.3px;

}

.shola-strip-right{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: #B0DCD1;

    transition:.35s;

}

.shola-strip-right i{

    color: var(--text);

    font-size:20px;

    transition:.35s;

}

.shola-wholesale-strip:hover .shola-strip-right{

    transform:rotate(-45deg);

}


/*==========================================
        GLOW EFFECT
==========================================*/

.shola-collection-card{

    isolation:isolate;

}

.shola-collection-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-140px;

    top:-140px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.54),
    transparent 72%);

    opacity:0;

    transition:.45s;

    z-index:-1;

}

.shola-collection-card:hover::after{

    opacity:1;

}


/*==========================================
        RESPONSIVE
==========================================*/

@media (max-width:1200px){

    .shola-explore{
        padding:80px 0;
    }

    .shola-explore-title{
        font-size:40px;
    }

    .shola-collection-card{
        padding:26px;
        min-height:200px;
    }

}

@media (max-width:991px){

    .shola-explore{
        padding:70px 0;
    }

    .shola-explore-title{
        font-size:34px;
    }

    .shola-collection-card{

        flex-direction:column;

        align-items:flex-start;

        gap:22px;

    }

    .shola-arrow{

        width:52px;
        height:52px;
        min-width:52px;

    }

    .shola-strip-left span{

        font-size:18px;

    }

}

@media (max-width:767px){

    .shola-explore{

        padding:60px 0;

    }

    .shola-explore-title{

        font-size:30px;

    }

    .shola-collection-card{

        padding:22px;

        border-radius:22px;

    }

    .shola-card-icon{

        width:72px;
        height:72px;
        min-width:72px;

        font-size:28px;

        border-radius:20px;

    }

    .shola-card-content h3{

        font-size:22px;

    }

    .shola-item-list{

        gap:8px;

    }

    .shola-item-list span{

        font-size:12px;

        padding:8px 14px;

    }

    .shola-wholesale-strip{

        padding:20px;

        border-radius:20px;

    }

    .shola-strip-left{

        gap:14px;

    }

    .shola-strip-left i{

        width:48px;
        height:48px;
        font-size:18px;

    }

    .shola-strip-left span{

        font-size:16px;

    }

    .shola-strip-right{

        width:48px;
        height:48px;

    }

}

@media (max-width:575px){

    .shola-collection-card{

        text-align:center;

        align-items:center;

    }

    .shola-card-content{

        width:100%;

    }

    .shola-item-list{

        justify-content:center;

    }

    .shola-arrow{

        margin:auto;

    }

    .shola-wholesale-strip{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

    .shola-strip-left{

        flex-direction:column;

    }

    .shola-strip-left span{

        font-size:15px;

        line-height:1.5;

    }

    .shola-strip-right{

        width:50px;

        height:50px;

    }

}

/*=========================================
        WHY CHOOSE SHOLA
=========================================*/

.shola-why{
    position:relative;
    padding:90px 0;
    background: #FFFFFF;
    overflow:hidden;
}

.shola-why::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-220px;
    right:-180px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);
}

.shola-why::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    bottom:-220px;
    left:-180px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);
}

/* Heading */

.shola-why-tag{

    display:inline-block;

    padding:8px 22px;

    border-radius:40px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    text-transform:uppercase;

}

.shola-why-title{

    margin-top:18px;

    margin-bottom:10px;

    font-size:46px;

    font-weight:700;

    color: var(--heading);

}

/* Cards */

.shola-why-card{

    position:relative;

    height:100%;

    padding:35px;

    background: #FFFFFF;

    backdrop-filter:blur(15px);

    border-radius:28px;

    border: 1px solid #D5E5DF;

    box-shadow:0 15px 40px rgba(82,96,92,.05);

    transition:.45s;

    overflow:hidden;

}

.shola-why-card::before{

    content:"";

    position:absolute;

    inset:0;

    background: linear-gradient(
    135deg,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

    opacity:0;

    transition:.45s;

}

.shola-why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 55px rgba(82, 96, 92, 0.06);

}

.shola-why-card:hover::before{

    opacity:1;

}

/* Icon */

.shola-why-icon{

    width:80px;

    height:80px;

    margin-bottom:25px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: linear-gradient(135deg,#B0DCD1,#C8DCCF);

    color: var(--heading);

    font-size:32px;

    transition:.45s;

    box-shadow:0 18px 30px rgba(176, 220, 209, .28);

}

.shola-why-card:hover .shola-why-icon{

    transform:rotate(-8deg) scale(1.08);

}

/* Typography */

.shola-why-card h4{

    font-size:25px;

    font-weight:700;

    color: var(--heading);

    margin-bottom:18px;

}

.shola-why-card p{

    color: var(--text);

    font-size:15px;

    line-height:1.9;

    margin:0;

}

/* Center Badge */

.shola-center-badge{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    height:100%;

}

.shola-center-circle{

    width:140px;

    height:140px;

    border-radius:50%;

    background: linear-gradient(135deg,#B0DCD1,#C8DCCF);

    display:flex;

    align-items:center;

    justify-content:center;

    color: var(--text);

    font-size:55px;

    margin:auto;

    box-shadow:0 30px 60px rgba(176, 220, 209, .28);

    animation:sholaPulse 3s infinite;

}

.shola-center-badge h5{

    margin-top:25px;

    font-size:22px;

    font-weight:600;

    color: var(--heading);

}

/* Wide Card */

.shola-wide-card{

    display:flex;

    align-items:center;

    gap:30px;

}

.shola-wide-card .shola-why-icon{

    margin-bottom:0;

    flex-shrink:0;

}

/* Animation */

@keyframes sholaPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/* Responsive */

@media(max-width:1200px){

.shola-why-title{

font-size:40px;

}

}

@media(max-width:991px){

.shola-why{

padding:75px 0;

}

.shola-center-circle{

width:120px;

height:120px;

font-size:48px;

margin-bottom:15px;

}

.shola-center-badge{

margin:10px 0 30px;

}

.shola-wide-card{

flex-direction:column;

text-align:center;

}

}

@media(max-width:767px){

.shola-why{

padding:60px 0;

}

.shola-why-title{

font-size:32px;

}

.shola-why-card{

padding:28px;

text-align:center;

}

.shola-why-icon{

margin:0 auto 22px;

width:70px;

height:70px;

font-size:28px;

}

.shola-wide-card{

gap:20px;

}

}

@media(max-width:575px){

.shola-why-title{

font-size:28px;

}

.shola-center-circle{

width:100px;

height:100px;

font-size:40px;

}

.shola-center-badge h5{

font-size:18px;

}

.shola-why-card h4{

font-size:22px;

}

.shola-why-card{

padding:24px;

}

}

/*==================================================
        SHOLA COLLECTIONS
==================================================*/

.shola-collections{
    position:relative;
    padding:90px 0;
    overflow:hidden;
}

.shola-collections::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-220px;
    left:-220px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.36),
    transparent 70%);
}

.shola-collections::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-220px;
    bottom:-220px;
    border-radius:50%;
    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.3),
    transparent 70%);
}


/*=========================
        HEADING
==========================*/

.shola-section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 20px;

    background: var(--brand-light);

    border-radius:40px;

    border: 1px solid #D5E5DF;

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    text-transform:uppercase;

}

.shola-section-heading{

    margin-top:18px;

    font-size:48px;

    font-weight:700;

    color: var(--heading);

}

.shola-section-text{

    max-width:700px;

    margin:18px auto 0;

    color: var(--text);

    font-size:16px;

    line-height:1.9;

}


/*=========================
        CARD
==========================*/

.shola-collection-item{

    height:100%;

    border-radius:28px;

    overflow:hidden;

    background: #FFFFFF;

    box-shadow:0 15px 40px rgba(82,96,92,.05);

    transition:.45s;

    position:relative;

}

.shola-collection-item:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(82, 96, 92, 0.06);

}


/*=========================
        IMAGE
==========================*/

.shola-collection-image{

    position:relative;

    overflow:hidden;

    height:240px;

}

.shola-collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.shola-collection-item:hover
.shola-collection-image img{

    transform:scale(1.08);

}


/*=========================
        ICON
==========================*/

.shola-overlay-icon{

    position:absolute;

    top:18px;

    right:18px;

    width:55px;

    height:55px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: #FFFFFF;

    backdrop-filter:blur(12px);

    color: var(--heading);

    font-size:20px;

    transition:.35s;

}

.shola-collection-item:hover
.shola-overlay-icon{

    background: #B0DCD1;

    color: var(--heading);

    transform:rotate(-12deg);

}


/*=========================
        CONTENT
==========================*/

.shola-collection-content{

    padding:28px;

}

.shola-count{

    display:inline-block;

    color: var(--text);

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:12px;

}

.shola-collection-content h3{

    font-size:25px;

    font-weight:700;

    color: var(--heading);

    margin-bottom:15px;

    transition:.35s;

}

.shola-collection-item:hover h3{

    color: var(--heading);

}

.shola-collection-content p{

    color: var(--text);

    font-size:14px;

    line-height:1.8;

    margin-bottom:18px;

}


/*=========================
        LIST
==========================*/

.shola-collection-content ul{

    padding:0;

    margin:0 0 22px;

    list-style:none;

}

.shola-collection-content ul li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

    color: var(--text);

    font-size:14px;

}

.shola-collection-content ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:8px;

    height:8px;

    border-radius:50%;

    background: #B0DCD1;

}


/*=========================
        LINK
==========================*/

.shola-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color: var(--text);

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.shola-link i{

    transition:.35s;

}

.shola-link:hover{

    color: var(--text);

}

.shola-link:hover i{

    transform:translateX(6px);

}


/*=========================
        RESPONSIVE
==========================*/

@media(max-width:1200px){

    .shola-section-heading{

        font-size:42px;

    }

}

@media(max-width:991px){

    .shola-collections{

        padding:75px 0;

    }

    .shola-section-heading{

        font-size:36px;

    }

}

@media(max-width:767px){

    .shola-collections{

        padding:60px 0;

    }

    .shola-section-heading{

        font-size:30px;

    }

    .shola-section-text{

        font-size:15px;

    }

    .shola-collection-image{

        height:220px;

    }

    .shola-collection-content{

        padding:22px;

    }

    .shola-collection-content h3{

        font-size:22px;

    }

}

@media(max-width:575px){

    .shola-collections{

        padding:50px 0;

    }

    .shola-section-heading{

        font-size:26px;

    }

    .shola-section-badge{

        font-size:11px;

        letter-spacing:2px;

    }

    .shola-collection-image{

        height:200px;

    }

    .shola-overlay-icon{

        width:48px;

        height:48px;

        font-size:18px;

        border-radius:14px;

    }

    .shola-collection-content{

        padding:20px;

    }

    .shola-collection-content h3{

        font-size:20px;

    }

}

/*==================================
     Gifting Honey Art Studio
        PART 1
==================================*/

.gh-art-section{

    padding:90px 0;

    background: linear-gradient(
    180deg,
    #FFFFFF,
    #FFFFFF);

    overflow:hidden;

}


.gh-art-container{

    width:92%;
    max-width:1220px;

    margin:auto;

}


/*==================
Header
===================*/

.gh-art-header{

    max-width:700px;

    margin:auto;

    text-align:center;

    margin-bottom:55px;

}


.gh-art-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background: var(--brand-light);

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    font-size:11px;

    letter-spacing:2px;

    font-weight:600;

    color: var(--heading);

}


.gh-art-title{

    font-size:40px;

    margin:22px 0 16px;

    color: var(--heading);

    font-weight:600;

    line-height:1.2;

}


.gh-art-subtitle{

    color: var(--heading);

    font-size:15px;

    line-height:1.8;

}


/*====================
Bento Layout
=====================*/

.gh-art-bento{

    display:grid;

    grid-template-columns:
    2fr 1fr;

    grid-template-rows:
    repeat(2,220px);

    gap:22px;

}



/*====================
Glass Cards
=====================*/

.gh-art-card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:28px;

    background: linear-gradient(

    145deg,

    #FFFFFF,

    #FFFFFF

    );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border: 1px solid

    #D5E5DF;

    box-shadow:

    0 10px 40px

    rgba(82, 96, 92, 0.036);

    transition:.45s;

}


.gh-art-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background: radial-gradient(

    rgba(255, 255, 255, .55),

    transparent 70%

    );

    right:-80px;

    top:-80px;

    border-radius:50%;

    opacity:.8;

}



/*==================
Large Card
===================*/

.gh-art-card-large{

    grid-row:span 2;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.gh-art-card:hover{

    transform:

    translateY(-8px);

    box-shadow:

    0 18px 45px

    rgba(82, 96, 92, 0.06);

}



/*==================
Icons
===================*/

.gh-art-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    font-size:24px;

    background: #FFFFFF;

    backdrop-filter:blur(15px);

    border: 1px solid

    #D5E5DF;

}



/*==================
Typography
===================*/

.gh-art-card h3{

    font-size:24px;

    color: var(--heading);

    margin-bottom:16px;

    font-weight:600;

}


.gh-art-card p{

    color: var(--text);

    line-height:1.9;

    font-size:15px;

}



.gh-art-card a{

    margin-top:28px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color: var(--text);

    font-size:14px;

    font-weight:600;

    transition:.3s;

}


.gh-art-card a:hover{

    letter-spacing:1px;

}

/* ===========================
   Gifting Honey Art Studio
=========================== */

.gh-art{
    padding:90px 0;
    background: transparent;
}

.gh-art-container{

    width:90%;

    max-width:1180px;

    margin:auto;

}

.gh-art-heading{

    text-align:center;

    max-width:650px;

    margin:auto auto 55px;

}

.gh-art-heading span{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background: #FFFFFF;

    border: 1px solid #D5E5DF;

    backdrop-filter:blur(15px);

    font-size:11px;

    letter-spacing:2px;

    font-weight:600;

    color: var(--heading);

}

.gh-art-heading h2{

    margin:20px 0 15px;

    font-size:38px;

    font-weight:600;

    color: var(--heading);

}

.gh-art-heading p{

    font-size:15px;

    color: var(--heading);

    line-height:1.8;

}

/* Grid */

.gh-art-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));

    gap:24px;

}

/* Card */

.gh-glass-card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:26px;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border: 1px solid #D5E5DF;

    box-shadow:
        0 10px 35px rgba(82, 96, 92, 0.03);

    transition:.35s;

}

.gh-glass-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-70px;

    border-radius:50%;

    background: radial-gradient(
        rgba(255, 255, 255, .8),
        transparent 70%
    );

}

.gh-glass-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 45px rgba(82, 96, 92, 0.048);

}

/* Shine Effect */

.gh-glass-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .45),
        transparent
    );

    transition:.8s;

}

.gh-glass-card:hover::after{

    left:150%;

}

/* Icon */

.gh-icon{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background: #FFFFFF;

    border: 1px solid #D5E5DF;

    backdrop-filter:blur(12px);

    font-size:24px;

    margin-bottom:22px;

}

/* Typography */

.gh-glass-card h3{

    font-size:22px;

    color: var(--heading);

    margin-bottom:15px;

    font-weight:600;

}

.gh-glass-card p{

    font-size:14px;

    color: var(--text);

    line-height:1.9;

}

/* Responsive */

@media(max-width:768px){

.gh-art{

padding:60px 0;

}

.gh-art-heading h2{

font-size:30px;

}

.gh-glass-card{

padding:28px;

}

}

/*==================================
        Our Story
===================================*/

.gh-story{
    padding:100px 0;
    background: transparent;
}

.gh-story-container{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/* Left */

.gh-story-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background: var(--brand-light);

    border: 1px solid #D5E5DF;

    backdrop-filter:blur(15px);

    font-size:11px;

    letter-spacing:2px;

    color: var(--heading);

    font-weight:600;

}

.gh-story-title{

    margin:24px 0 18px;

    font-size:48px;

    line-height:1.15;

    font-weight:600;

    color: var(--heading);

}

.gh-story-intro{

    color: var(--text);

    font-size:16px;

    line-height:1.9;

    max-width:480px;

}

/* Right */

.gh-story-right{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.gh-story-card{

    padding:34px;

    border-radius:24px;

    background: linear-gradient(

    145deg,

    #FFFFFF,

    #FFFFFF

    );

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    box-shadow:

    0 12px 30px rgba(82, 96, 92, 0.03);

    transition:.35s;

}

.gh-story-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 40px rgba(82, 96, 92, 0.048);

}

.gh-story-card small{

    text-transform:uppercase;

    letter-spacing:2px;

    color: var(--text);

    font-size:11px;

    display:block;

    margin-bottom:12px;

}

.gh-story-card h3{

    font-size:24px;

    color: var(--heading);

    margin-bottom:15px;

}

.gh-story-card p{

    color: var(--text);

    line-height:1.9;

    font-size:15px;

}

/* Responsive */

@media(max-width:900px){

.gh-story-container{

grid-template-columns:1fr;

gap:40px;

}

.gh-story-title{

font-size:36px;

}

}

@media(max-width:600px){

.gh-story{

padding:70px 0;

}

.gh-story-title{

font-size:30px;

}

}

/*==================================
        SHOLA ABOUT
==================================*/

.shola-about{
    padding:90px 0;
    background: transparent;
}

.shola-about-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

}

.shola-about-image img{

    width:100%;

    display:block;

    border-radius:28px;

    transition:.5s;

}

.shola-about-image:hover img{

    transform:scale(1.05);

}

/* Content */

.shola-about-tag{

    display:inline-block;

    padding:8px 18px;

    background: var(--brand-light);

    color: var(--heading);

    border-radius:30px;

    font-size:12px;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:18px;

}

.shola-about-title{

    font-size:46px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

    margin-bottom:25px;

}

.shola-about-text{

    color: var(--text);

    font-size:16px;

    line-height:1.9;

    margin-bottom:30px;

}

/* Cards */

.shola-about-card{

    padding:25px 28px;

    margin-bottom:20px;

    border-radius:22px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    transition:.35s;

    box-shadow:

    0 10px 30px rgba(82,96,92,.05);

}

.shola-about-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 40px rgba(176, 220, 209, .12);

}

.shola-about-card h4{

    color: var(--heading);

    font-size:22px;

    margin-bottom:12px;

    font-weight:700;

}

.shola-about-card p{

    color: var(--text);

    margin:0;

    line-height:1.8;

}

/* Responsive */

@media(max-width:991px){

.shola-about{

padding:70px 0;

}

.shola-about-title{

font-size:36px;

margin-top:20px;

}

}

@media(max-width:767px){

.shola-about{

padding:60px 0;

}

.shola-about-title{

font-size:30px;

}

.shola-about-card{

padding:20px;

}

}

/*==================================
        WHY CHOOSE SHOLA
        PART 1
==================================*/

.shola-why{

    position:relative;

    padding:90px 0;

    overflow:hidden;

}

.shola-why::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background: radial-gradient(circle,

    rgba(176, 220, 209, 0.24),

    transparent 70%);

}

.shola-why-tag{

    display:inline-flex;

    padding:8px 20px;

    border-radius:50px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    text-transform:uppercase;

}

.shola-why-title{

    margin-top:18px;

    font-size:46px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

}

.shola-why-subtitle{

    max-width:650px;

    margin:20px auto 0;

    color: var(--heading);

    font-size:16px;

    line-height:1.9;

}


/*============================
Hero Card
=============================*/

.shola-why-hero{

    margin-top:25px;

    padding:45px;

    border-radius:30px;

    background: linear-gradient(

    135deg,

    #FFFFFF,

    #FFFFFF

    );

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    box-shadow:

    0 18px 40px rgba(82, 96, 92, 0.03);

    position:relative;

    overflow:hidden;

}

.shola-why-hero::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background: radial-gradient(circle,

    rgba(176, 220, 209, 0.36),

    transparent 70%);

}

.shola-hero-label{

    display:inline-block;

    color: var(--heading);

    letter-spacing:3px;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

.shola-why-hero h3{

    font-size:36px;

    color: var(--heading);

    line-height:1.3;

    margin-bottom:18px;

    font-weight:700;

}

.shola-why-hero p{

    color: var(--text);

    font-size:16px;

    line-height:1.9;

    max-width:650px;

}


/*============================
Hero Icon
=============================*/

.shola-hero-icon{

    width:120px;

    height:120px;

    margin-left:auto;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: linear-gradient(

    135deg,

    #B0DCD1,

    #C8DCCF

    );

    color: var(--heading);

    font-size:48px;

    box-shadow:

    0 20px 45px rgba(176, 220, 209, .30);

}

/*==================================
        WHY CHOOSE SHOLA
        PART 2
==================================*/


/*==============================
Feature Cards
===============================*/

.shola-feature-card{

    position:relative;

    height:100%;

    padding:35px;

    border-radius:28px;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    box-shadow:
        0 15px 35px rgba(82,96,92,.05);

    overflow:hidden;

    transition:.45s ease;

}

.shola-feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background: linear-gradient(
        135deg,
        rgba(176, 220, 209, 0.24),
        transparent 70%
    );

    opacity:0;

    transition:.45s;

}

.shola-feature-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 28px 55px rgba(82, 96, 92, 0.06);

}

.shola-feature-card:hover::before{

    opacity:1;

}


/*==============================
Glass Shine
===============================*/

.shola-feature-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.9s;

}

.shola-feature-card:hover::after{

    left:140%;

}


/*==============================
Feature Icon
===============================*/

.shola-feature-icon{

    width:80px;

    height:80px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: linear-gradient(
        135deg,
        #B0DCD1,
        #C8DCCF
    );

    color: var(--heading);

    font-size:32px;

    margin-bottom:25px;

    box-shadow:
        0 18px 35px rgba(176, 220, 209, .25);

    transition:.45s;

}

.shola-feature-card:hover .shola-feature-icon{

    transform:
        rotate(-8deg)
        scale(1.08);

}


/*==============================
Typography
===============================*/

.shola-feature-card h4{

    font-size:24px;

    color: var(--heading);

    font-weight:700;

    margin-bottom:15px;

}

.shola-feature-card p{

    color: var(--text);

    font-size:15px;

    line-height:1.9;

    margin:0;

}


/*==============================
Floating Animation
===============================*/

@keyframes sholaFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

.shola-feature-card:nth-child(2){

animation:sholaFloat 6s ease-in-out infinite;

}

.shola-feature-card:nth-child(3){

animation:sholaFloat 7s ease-in-out infinite;

}


/*==============================
Hero Hover
===============================*/

.shola-why-hero{

    transition:.45s ease;

}

.shola-why-hero:hover{

    transform:translateY(-8px);

    box-shadow:
        0 28px 60px rgba(82, 96, 92, 0.048);

}


/*==============================
Responsive
===============================*/

@media(max-width:991px){

.shola-why{

padding:70px 0;

}

.shola-why-title{

font-size:36px;

}

.shola-why-hero{

padding:35px;

}

.shola-why-hero h3{

font-size:30px;

}

.shola-hero-icon{

margin:30px auto 0;

width:90px;

height:90px;

font-size:36px;

}

.shola-feature-card{

padding:28px;

}

}


@media(max-width:767px){

.shola-why{

padding:60px 0;

}

.shola-why-title{

font-size:30px;

}

.shola-why-subtitle{

font-size:15px;

}

.shola-why-hero{

padding:28px;

}

.shola-why-hero h3{

font-size:24px;

}

.shola-feature-card{

padding:24px;

border-radius:22px;

}

.shola-feature-icon{

width:68px;

height:68px;

font-size:26px;

border-radius:20px;

}

.shola-feature-card h4{

font-size:20px;

}

.shola-feature-card p{

font-size:14px;

}

}

/*==================================
        CONTACT SHOLA
        PART 1
==================================*/

.shola-contact{
    position:relative;
    padding:90px 0;
    overflow:hidden;
}

.shola-contact::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background: radial-gradient(circle,

    rgba(176, 220, 209, 0.24),

    transparent 70%);

}

/* Heading */

.shola-contact-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

}

.shola-contact-title{

    margin-top:20px;

    font-size:46px;

    font-weight:700;

    line-height:1.2;

    color: var(--heading);

}

.shola-contact-subtitle{

    max-width:650px;

    margin:18px auto 0;

    color: var(--heading);

    font-size:16px;

    line-height:1.9;

}

/* Glass Cards */

.shola-contact-card,
.shola-contact-form{

    height:100%;

    padding:40px;

    border-radius:30px;

    background: linear-gradient(

    135deg,

    #FFFFFF,

    #FFFFFF

    );

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    box-shadow:

    0 18px 40px rgba(82, 96, 92, 0.03);

}

/* Left Side */

.shola-contact-card h3{

    font-size:30px;

    color: var(--heading);

    margin-bottom:15px;

}

.shola-contact-card p{

    color: var(--text);

    margin-bottom:35px;

    line-height:1.9;

}

/* Contact Item */

.shola-contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.shola-contact-icon{

    width:62px;

    height:62px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background: linear-gradient(
        135deg,
        #B0DCD1,
        #C8DCCF
    );

    color: var(--heading);

    font-size:24px;

    flex-shrink:0;

    box-shadow:

    0 15px 30px rgba(176, 220, 209, .25);

}

.shola-contact-item span{

    display:block;

    color: var(--text);

    font-size:13px;

    margin-bottom:4px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.shola-contact-item h6{

    margin:0;

    font-size:18px;

    color: var(--heading);

    font-weight:600;

}

/*==================================
        CONTACT SHOLA
        PART 2
==================================*/


/*==============================
Form Inputs
===============================*/

.shola-input{

    width:100%;

    height:58px;

    border-radius:18px;

    border: 1px solid #D5E5DF;

    background: #FFFFFF;

    backdrop-filter:blur(12px);

    box-shadow:none;

    color: var(--text);

    font-size:15px;

    padding:0 22px;

    transition:.35s ease;

}

.shola-input::placeholder{

    color: var(--text);

}

.shola-input:focus{

    border-color: #B0DCD1;

    box-shadow:

    0 0 0 4px rgba(176, 220, 209, .12);

    background: #FFFFFF;

    outline: none;

}

textarea.shola-input{

    height:180px;

    resize:none;

    padding:18px 22px;

}


/*==============================
Button
===============================*/

.shola-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border: none;

    border-radius:50px;

    background: linear-gradient(
        135deg,
        #B0DCD1,
        #C8DCCF
    );

    color: var(--heading);

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

    box-shadow:
        0 18px 35px rgba(176, 220, 209, .25);

}

.shola-contact-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 25px 45px rgba(176, 220, 209, .35);

}

.shola-contact-btn i{

    transition:.35s;

}

.shola-contact-btn:hover i{

    transform:translateX(5px);

}


/*==============================
Card Hover
===============================*/

.shola-contact-card,
.shola-contact-form{

    transition:.45s ease;

    position:relative;

    overflow:hidden;

}

.shola-contact-card:hover,
.shola-contact-form:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(82, 96, 92, 0.048);

}


/*==============================
Glass Shine
===============================*/

.shola-contact-card::before,
.shola-contact-form::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:60%;

    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .45),
        transparent
    );

    transform:skewX(-25deg);

    transition:1s;

}

.shola-contact-card:hover::before,
.shola-contact-form:hover::before{

    left:140%;

}


/*==============================
Icon Hover
===============================*/

.shola-contact-icon{

    transition:.35s ease;

}

.shola-contact-item:hover .shola-contact-icon{

    transform:
        rotate(-8deg)
        scale(1.08);

}


/*==============================
Section Glow
===============================*/

.shola-contact::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background: radial-gradient(
        circle,
        rgba(176, 220, 209, 0.24),
        transparent 70%);

}


/*==============================
Floating Animation
===============================*/

@keyframes sholaContactFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

.shola-contact-card{

animation:sholaContactFloat 6s ease-in-out infinite;

}


/*==============================
Responsive
===============================*/

@media(max-width:991px){

.shola-contact{

padding:70px 0;

}

.shola-contact-title{

font-size:36px;

}

.shola-contact-card,
.shola-contact-form{

padding:30px;

}

}


@media(max-width:767px){

.shola-contact{

padding:60px 0;

}

.shola-contact-title{

font-size:30px;

}

.shola-contact-subtitle{

font-size:15px;

}

.shola-contact-card,
.shola-contact-form{

padding:24px;

border-radius:24px;

}

.shola-contact-item{

gap:15px;

margin-bottom:22px;

}

.shola-contact-icon{

width:54px;

height:54px;

font-size:20px;

border-radius:16px;

}

.shola-contact-item h6{

font-size:16px;

}

.shola-input{

height:54px;

font-size:14px;

}

textarea.shola-input{

height:150px;

}

.shola-contact-btn{

width:100%;

padding:15px;

}

}

/*==================================
     SHOLA PRODUCT SHOWCASE
             PART 2
==================================*/

.shola-showcase{
    position:relative;
    padding:100px 0;
    overflow:hidden;
}

.shola-showcase::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-200px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}

.shola-showcase::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}


/*======================
Heading
=======================*/

.shola-showcase-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    font-weight:600;

    text-transform:uppercase;

}

.shola-showcase-title{

    margin-top:20px;

    font-size:48px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

}

.shola-showcase-subtitle{

    max-width:650px;

    margin:18px auto 0;

    color: var(--heading);

    font-size:16px;

    line-height:1.9;

}


/*======================
Tabs
=======================*/

.shola-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin:60px 0;

}

.shola-tab{

    border: none;

    padding:12px 26px;

    border-radius:40px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    font-weight:600;

    transition:.35s;

}

.shola-tab:hover{

    transform:translateY(-3px);

}

.shola-tab.active{

    background: #B0DCD1;

    color: var(--heading);

    border-color: #B0DCD1;

}


/*======================
Main Showcase
=======================*/

.shola-product-view{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}


/*======================
Image Side
=======================*/

.shola-product-image{

    position:relative;

    padding:35px;

    border-radius:35px;

    background: linear-gradient(
    135deg,
    #FFFFFF,
    #FFFFFF);

    border: 1px solid #D5E5DF;

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 45px rgba(82, 96, 92, 0.03);

}

.shola-product-image::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-100px;

    top:-100px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.45),
    transparent 70%);

}

.shola-product-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.shola-product-image:hover img{

    transform:scale(1.05);

}


/*======================
Product Image Carousel
======================*/

.shola-product-carousel{

    position:relative;

    overflow:hidden;

    touch-action:pan-y;

}

.shola-carousel-track{

    display:flex;

    transition:transform .6s ease;

    will-change:transform;

}

.shola-carousel-slide{

    flex:0 0 100%;

    min-width:100%;

    overflow:hidden;

}

.shola-carousel-slide img{

    width:100%;

    height:auto;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}

.shola-carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid #B0DCD1;

    background:#FFFFFF;

    color:var(--heading);

    font-size:15px;

    z-index:3;

    transition:.3s;

    backdrop-filter:blur(6px);

    -webkit-backdrop-filter:blur(6px);

}

.shola-carousel-btn:hover,
.shola-carousel-btn:focus-visible{

    background:#B0DCD1;

    border-color:#B0DCD1;

    color:var(--heading);

}

.shola-carousel-prev{

    left:14px;

}

.shola-carousel-next{

    right:14px;

}

.shola-carousel-dots{

    position:absolute;

    left:50%;

    bottom:16px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    z-index:3;

}

.shola-carousel-dot{

    width:9px;

    height:9px;

    padding:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.75);

    background:rgba(255,255,255,.35);

    transition:.3s;

}

.shola-carousel-dot.active{

    background:#B0DCD1;

    border-color:#F28C28;

    transform:scale(1.25);

}

.shola-product-carousel.is-single .shola-carousel-btn,
.shola-product-carousel.is-single .shola-carousel-dots{

    display:none;

}


/*======================
Content
=======================*/

.shola-product-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background: #FFFFFF;

    color: var(--heading);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.shola-product-content h3{

    font-size:42px;

    color: var(--heading);

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.shola-product-content p{

    color: var(--text);

    font-size:16px;

    line-height:1.9;

    margin-bottom:30px;

}


/*======================
Feature Chips
=======================*/

.shola-product-features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.shola-product-features span{

    padding:10px 18px;

    border-radius:40px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    transition:.35s;

}

.shola-product-features span:hover{

    background: #B0DCD1;

    color: var(--heading);

}


/*======================
Button
=======================*/

.shola-product-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    background: var(--brand-sage);

    color: var(--text);

    font-weight:600;

    transition:.35s;

}

.shola-product-link:hover{

    background: #B0DCD1;

    color: var(--text);

    transform:translateY(-4px);

}

.shola-product-link i{

    transition:.35s;

}

.shola-product-link:hover i{

    transform:translateX(5px);

}


/*======================
Animation Classes
=======================*/

.fade-out{

    opacity:0;

    transform:translateY(20px);

    transition:.3s;

}

.fade-in{

    opacity:1;

    transform:translateY(0);

    transition:.3s;

}


/*======================
Responsive
=======================*/

@media(max-width:991px){

.shola-showcase{

padding:70px 0;

}

.shola-showcase-title{

font-size:36px;

}

.shola-product-view{

grid-template-columns:1fr;

gap:35px;

}

.shola-product-content{

text-align:center;

}

.shola-product-features{

justify-content:center;

}

}

@media(max-width:767px){

.shola-showcase{

padding:60px 0;

}

.shola-showcase-title{

font-size:30px;

}

.shola-tabs{

gap:10px;

margin:40px 0;

}

.shola-tab{

padding:10px 18px;

font-size:13px;

}

.shola-product-image{

padding:20px;

border-radius:25px;

}

.shola-product-content h3{

font-size:28px;

}

.shola-product-content p{

font-size:15px;

}

.shola-product-link{

width:100%;

justify-content:center;

}

}

/*==================================
      WHOLESALE SUPPLY
        PART 2
==================================*/

.shola-wholesale{
    position:relative;
    padding:90px 0;
    overflow:hidden;
}

.shola-wholesale::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-200px;

    left:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}

.shola-wholesale::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    bottom:-180px;

    right:-150px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}


/*==========================
Heading
===========================*/

.shola-wholesale-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.shola-wholesale-title{

    margin-top:18px;

    font-size:46px;

    font-weight:700;

    line-height:1.2;

    color: var(--heading);

}

.shola-wholesale-subtitle{

    max-width:700px;

    margin:18px auto 0;

    color: var(--heading);

    line-height:1.9;

    font-size:16px;

}


/*==========================
Hero
===========================*/

.shola-wholesale-hero{

    margin-top:60px;

    padding:45px;

    border-radius:32px;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    box-shadow:

    0 20px 45px rgba(82, 96, 92, 0.03);

}

.shola-hero-label{

    display:inline-block;

    margin-bottom:18px;

    color: var(--heading);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}

.shola-wholesale-hero h3{

    font-size:38px;

    color: var(--heading);

    font-weight:700;

    margin-bottom:20px;

}

.shola-wholesale-hero p{

    color: var(--text);

    line-height:1.9;

    margin-bottom:28px;

}

.shola-wholesale-image{

    border-radius:26px;

    overflow:hidden;

}

.shola-wholesale-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.shola-wholesale-image:hover img{

    transform:scale(1.05);

}


/*==========================
Checklist
===========================*/

.shola-wholesale-points{

    list-style:none;

    padding:0;

    margin:0;

}

.shola-wholesale-points li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

    color: var(--text);

    font-weight:500;

}

.shola-wholesale-points i{

    color: var(--text);

}


/*==========================
Cards
===========================*/

.shola-wholesale-card{

    height:100%;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );

    backdrop-filter:blur(18px);

    border: 1px solid #D5E5DF;

    border-radius:28px;

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 12px 30px rgba(82, 96, 92, 0.03);

}

.shola-wholesale-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 28px 50px rgba(82, 96, 92, 0.048);

}

.shola-wholesale-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    transition:.6s;

}

.shola-wholesale-card:hover img{

    transform:scale(1.08);

}

.shola-wholesale-card span{

    display:inline-block;

    margin:24px 28px 0;

    padding:8px 16px;

    border-radius:30px;

    background: #FFFFFF;

    color: var(--text);

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.shola-wholesale-card h4{

    margin:18px 28px 14px;

    color: var(--heading);

    font-size:24px;

    font-weight:700;

}

.shola-wholesale-card p{

    margin:0 28px 22px;

    color: var(--text);

    line-height:1.8;

}


/*==========================
Size Chips
===========================*/

.shola-size-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    padding:0 28px 30px;

}

.shola-size-list span{

    margin:0;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    font-size:13px;

    padding:9px 18px;

    transition:.35s;

}

.shola-size-list span:hover{

    background: #B0DCD1;

    color: var(--heading);

}


/*==========================
CTA
===========================*/

.shola-wholesale-cta{

    margin-top:70px;

    text-align:center;

    padding:55px;

    border-radius:32px;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );


    color: var(--text);

}

.shola-wholesale-cta h3{

    font-size:36px;

    margin-bottom:18px;

}

.shola-wholesale-cta p{

    max-width:650px;

    margin:0 auto 30px;

    line-height:1.9;

    opacity:.9;

}

.shola-wholesale-cta a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 36px;

    border-radius:50px;

    background: #B0DCD1;

    color: var(--text);

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}
.shola-wholesale-cta a:hover{
transform: translateY(-4px);

    background: #FFFFFF;

    color: var(--text);

}


/*==========================
Responsive
===========================*/

@media(max-width:991px){

.shola-wholesale{

padding:70px 0;

}

.shola-wholesale-title{

font-size:36px;

}

.shola-wholesale-hero{

padding:30px;

}

.shola-wholesale-hero h3{

font-size:30px;

}

.shola-wholesale-image{

margin-top:35px;

}

}

@media(max-width:767px){

.shola-wholesale{

padding:60px 0;

}

.shola-wholesale-title{

font-size:30px;

}

.shola-wholesale-subtitle{

font-size:15px;

}

.shola-wholesale-card h4{

font-size:22px;

}

.shola-wholesale-card img{

height:200px;

}

.shola-wholesale-cta{

padding:35px 25px;

}

.shola-wholesale-cta h3{

font-size:28px;

}

.shola-wholesale-cta a{

width:100%;

justify-content:center;

}

}

/*==================================
        SHOLA ART GALLERY
            PART 2
==================================*/

.shola-gallery{

    position:relative;

    padding:90px 0;

    

    overflow:hidden;

}

.shola-gallery::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}

.shola-gallery::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}


/*=========================
Heading
==========================*/

.shola-gallery-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.shola-gallery-title{

    margin-top:18px;

    font-size:46px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

}

.shola-gallery-subtitle{

    max-width:650px;

    margin:18px auto 0;

    color: var(--heading);

    font-size:16px;

    line-height:1.9;

}


/*=========================
Masonry Grid
==========================*/

.shola-gallery-grid{

    column-count:3;

    column-gap:24px;

}

.shola-gallery-item{

    position:relative;

    margin-bottom:24px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    background: #FFFFFF;

    box-shadow:
    0 15px 35px rgba(82,96,92,.05);

}

.shola-gallery-item img{

    width:100%;

    display:block;

    transition:.6s ease;

}


/*=========================
Hover
==========================*/

.shola-gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:25px;

    background: linear-gradient(
    transparent,
    rgba(66, 83, 78, .55));

    opacity:0;

    transition:.4s;

}

.shola-gallery-overlay span{

    color: #fff;

    font-size:18px;

    font-weight:600;

}

.shola-gallery-item:hover img{

    transform:scale(1.08);

}

.shola-gallery-item:hover .shola-gallery-overlay{

    opacity:1;

}


/*=========================
Glass Shine
==========================*/

.shola-gallery-item::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    z-index:2;

    background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, .45),
    transparent);

    transform:skewX(-25deg);

    transition:.8s;

}

.shola-gallery-item:hover::before{

    left:140%;

}


/*=========================
Lightbox
==========================*/

.shola-lightbox{

    position:fixed;

    inset:0;

    background: rgba(66, 83, 78, .92);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9999;

}

.shola-lightbox.active{

    opacity:1;

    visibility:visible;

}

.shola-lightbox img{

    max-width:90%;

    max-height:88vh;

    border-radius:20px;

    box-shadow:
    0 25px 60px rgba(82, 96, 92, 0.21);

}


/*=========================
Buttons
==========================*/

.shola-lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    color: #fff;

    font-size:42px;

    cursor:pointer;

}

.shola-lightbox-prev,
.shola-lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border: none;

    border-radius:50%;

    background: rgba(255, 255, 255, 0.2);

    color: #fff;

    backdrop-filter:blur(15px);

    cursor:pointer;

    transition:.3s;

}

.shola-lightbox-prev{

    left:40px;

}

.shola-lightbox-next{

    right:40px;

}

.shola-lightbox-prev:hover,
.shola-lightbox-next:hover{

    background: rgba(255, 255, 255, 0.2);

}


/*=========================
Responsive
==========================*/

@media(max-width:991px){

.shola-gallery{

padding:70px 0;

}

.shola-gallery-title{

font-size:36px;

}

.shola-gallery-grid{

column-count:2;

}

}

@media(max-width:768px){

.shola-gallery{

padding:60px 0;

}

.shola-gallery-title{

font-size:30px;

}

.shola-gallery-grid{

column-count:1;

}

.shola-gallery-overlay{

opacity:1;

padding:18px;

}

.shola-gallery-overlay span{

font-size:16px;

}

.shola-lightbox-prev,
.shola-lightbox-next{

width:46px;

height:46px;

}

.shola-lightbox-prev{

left:15px;

}

.shola-lightbox-next{

right:15px;

}

.shola-lightbox-close{

right:20px;

top:20px;

font-size:34px;

}

.shola-lightbox img{

max-width:94%;

}

}

.shola-lightbox img{

    animation:galleryZoom .35s ease;

}

@keyframes galleryZoom{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==================================
        SHOLA HAMPERS
            PART 2
==================================*/

.shola-hampers{
    position:relative;
    padding:100px 0;
    background: #FFFFFF;
    overflow:hidden;
}

.shola-hampers::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}

.shola-hampers::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.24),
    transparent 70%);

}


/*==========================
Heading
===========================*/

.shola-hampers-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

    background: var(--brand-light);

    color: var(--heading);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

}

.shola-hampers-title{

    margin-top:18px;

    font-size:48px;

    font-weight:700;

    color: var(--heading);

    line-height:1.2;

}

.shola-hampers-subtitle{

    max-width:650px;

    margin:18px auto 0;

    color: var(--heading);

    font-size:16px;

    line-height:1.9;

}


/*==========================
Tabs
===========================*/

.shola-hamper-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin:20px 0;

}

.shola-hamper-tab{

    padding:12px 24px;

    border: none;

    border-radius:40px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    font-weight:600;

    transition:.35s;

}

.shola-hamper-tab:hover{

    transform:translateY(-3px);

}

.shola-hamper-tab.active{

    background: #B0DCD1;

    color: var(--heading);

    border-color: #B0DCD1;

}


/*==========================
Main Layout
===========================*/

.shola-hamper-view{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/*==========================
Image
===========================*/

.shola-hamper-image{

    position:relative;

    padding:35px;

    border-radius:34px;

    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );

    border: 1px solid #D5E5DF;

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 45px rgba(82, 96, 92, 0.03);

}

.shola-hamper-image::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background: radial-gradient(circle,
    rgba(176, 220, 209, 0.45),
    transparent 70%);

}

.shola-hamper-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.shola-hamper-image:hover img{

    transform:scale(1.05);

}


/*==========================
Content
===========================*/

.shola-hamper-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background: #FFFFFF;

    color: var(--heading);

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:20px;

}

.shola-hamper-content h3{

    font-size:42px;

    color: var(--heading);

    font-weight:700;

    margin-bottom:20px;

    line-height:1.2;

}

.shola-hamper-content p{

    color: var(--text);

    line-height:1.9;

    margin-bottom:28px;

}


/*==========================
Included Items
===========================*/

.shola-hamper-items{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.shola-hamper-items span{

    padding:10px 18px;

    border-radius:30px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    color: var(--heading);

    transition:.35s;

}

.shola-hamper-items span:hover{

    background: #B0DCD1;

    color: var(--heading);

}


/*==========================
Info Cards
===========================*/

.shola-hamper-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:35px;

}

.shola-hamper-info div{

    padding:24px;

    border-radius:22px;

    background: #FFFFFF;

    border: 1px solid #D5E5DF;

}

.shola-hamper-info h5{

    color: var(--heading);

    font-size:18px;

    margin-bottom:8px;

}

.shola-hamper-info p{

    margin:0;

    font-size:14px;

    color: var(--text);

}


/*==========================
Button
===========================*/

.shola-hamper-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    background: var(--brand-sage);

    color: var(--heading);

    font-weight:600;

    transition:.35s;

}

.shola-hamper-btn:hover{

    background: #B0DCD1;

    color: var(--heading);

    transform:translateY(-4px);

}

.shola-hamper-btn i{

    transition:.35s;

}

.shola-hamper-btn:hover i{

    transform:translateX(5px);

}


/*==========================
Animation Classes
===========================*/

.hamper-fade{

    opacity:0;

    transform:translateY(15px);

    transition:.3s;

}


/*==========================
Responsive
===========================*/

@media(max-width:991px){

.shola-hampers{

padding:70px 0;

}

.shola-hampers-title{

font-size:36px;

}

.shola-hamper-view{

grid-template-columns:1fr;

gap:40px;

}

.shola-hamper-content{

text-align:center;

}

.shola-hamper-items{

justify-content:center;

}

}

@media(max-width:767px){

.shola-hampers{

padding:60px 0;

}

.shola-hampers-title{

font-size:30px;

}

.shola-hamper-tabs{

gap:10px;

margin:40px 0;

}

.shola-hamper-tab{

padding:10px 18px;

font-size:13px;

}

.shola-hamper-image{

padding:20px;

border-radius:24px;

}

.shola-hamper-content h3{

font-size:28px;

}

.shola-hamper-info{

grid-template-columns:1fr;

}

.shola-hamper-btn{

width:100%;

justify-content:center;

}

}

/*==========================
Global responsive typography
===========================*/
html {
    font-size: 15px;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

p,
li,
a,
span,
button,
input,
textarea,
label {
    font-size: 0.95rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class*="title"],
[class*="heading"],
[class*="subtitle"] {
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

h1,
[class*="title"] {
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
}

h2,
.marketplaces h2,
.shola-explore-title,
.shola-why-title,
.shola-showcase-title,
.shola-wholesale-title,
.shola-gallery-title,
.shola-section-heading,
.shola-footer-title,
.gh-story-title,
.shola-about-title,
.shola-contact-title {
    font-size: clamp(1.5rem, 2.0vw, 1.85rem);
}

h3,
.shola-card-content h3,
.shola-collection-content h3,
.shola-hamper-content h3,
.shola-why-card h4 {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}

h4,
h5,
h6,
.shola-center-badge h5,
.shola-why-card h4 {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.navbar .navbar-nav .nav-link,
.tab,
.footer-heading,
.announcement-bar .ticker__item {
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    html {
        font-size: 14px;
    }

    p,
    li,
    a,
    span,
    button,
    input,
    textarea,
    label {
        font-size: 0.9rem;
    }

    h1,
    [class*="title"] {
        font-size: clamp(1.7rem, 3vw, 2rem);
    }

    h2,
    .marketplaces h2,
    .shola-explore-title,
    .shola-why-title,
    .shola-showcase-title,
    .shola-wholesale-title,
    .shola-gallery-title,
    .shola-section-heading,
    .shola-footer-title,
    .gh-story-title,
    .shola-about-title,
    .shola-contact-title {
        font-size: 1.75rem;
    }

    h3,
    .shola-card-content h3,
    .shola-collection-content h3,
    .shola-hamper-content h3,
    .shola-why-card h4 {
        font-size: 1.2rem;
    }

    h4,
    h5,
    h6,
    .shola-center-badge h5,
    .shola-why-card h4 {
        font-size: 1.05rem;
    }

    .navbar .navbar-nav .nav-link,
    .tab {
        font-size: 0.92rem;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 13px;
    }

    p,
    li,
    a,
    span,
    button,
    input,
    textarea,
    label {
        font-size: 0.88rem;
    }

    h1,
    [class*="title"] {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }

    h2,
    .marketplaces h2,
    .shola-explore-title,
    .shola-why-title,
    .shola-showcase-title,
    .shola-wholesale-title,
    .shola-gallery-title,
    .shola-section-heading,
    .shola-footer-title,
    .gh-story-title,
    .shola-about-title,
    .shola-contact-title {
        font-size: 1.55rem;
    }

    h3,
    .shola-card-content h3,
    .shola-collection-content h3,
    .shola-hamper-content h3,
    .shola-why-card h4 {
        font-size: 1.1rem;
    }

    h4,
    h5,
    h6,
    .shola-center-badge h5,
    .shola-why-card h4 {
        font-size: 1rem;
    }

    .navbar .navbar-nav .nav-link,
    .tab {
        font-size: 0.9rem;
        padding: 10px 0.5rem;
    }
}

.shola-acrylic-section{

padding:120px 8%;
position:relative;
overflow:hidden;

background: transparent;

}

/*========================*/

.shola-bg-blob{

position:absolute;
border-radius:50%;
filter:blur(130px);
opacity:.25;

}

.shola-blob-1{

width:420px;
height:420px;
background: var(--peach);
top:-120px;
left:-100px;

}

.shola-blob-2{

width:380px;
height:380px;
background: var(--lavender);
right:-80px;
bottom:-100px;

}

/*========================*/

.shola-acrylic-container{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

/*========================*/

.shola-glass-badge{

display:inline-block;

padding:12px 26px;

border-radius:100px;

background: var(--brand-light);

backdrop-filter:blur(30px);

border: 1px solid #D5E5DF;

color: var(--heading);

font-weight:600;

letter-spacing:2px;

box-shadow:
0 10px 30px rgba(82, 96, 92, 0.048);

}

/*========================*/

.shola-main-title{

font-size:70px;
margin:30px 0 25px;
line-height:1;

color: var(--heading);

}

.shola-main-title span{

background:#42534E;

-webkit-background-clip:text;
-webkit-text-fill-color: transparent;

}

/*========================*/

.shola-main-desc{

font-size:18px;

line-height:1.9;

color: var(--text);

margin-bottom:45px;

}

/*========================*/

.shola-info-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;

}

.shola-glass-info{

display:flex;
align-items:center;
gap:18px;

padding:22px;

border-radius:24px;

background: #FFFFFF;

backdrop-filter:blur(25px);

border: 1px solid #D5E5DF;

box-shadow:
0 15px 35px rgba(82, 96, 92, 0.042);

transition:.4s;

}

.shola-glass-info:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(176, 220, 209, .25);

}

.shola-glass-info span{

font-size:34px;

}

.shola-glass-info h4{

color: var(--heading);
margin-bottom:6px;

}

.shola-glass-info p{

color: var(--text);

}

/*========================*/

.shola-art-card{

position:relative;

padding:22px;

border-radius:40px;

background: #FFFFFF;

backdrop-filter:blur(35px);

border: 1px solid #D5E5DF;

box-shadow:
0 30px 60px rgba(82, 96, 92, 0.06);

}

.shola-art-card img{

width:100%;

border-radius:28px;

display:block;

}
/* ----- Shola art image carousel (Bootstrap-based, per-card slider) ------- */
.shola-art-carousel{
    position: relative;
    width: 100%;
    aspect-ratio: 939 / 782;
    border-radius: 28px;
    overflow: hidden;
    background: #FFFFFF;
}

.shola-art-carousel .carousel-inner,
.shola-art-carousel .carousel-item{
    height: 100%;
}

.shola-art-carousel .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* keep controls & dots above the glass overlay */
.shola-art-carousel .carousel-control-prev,
.shola-art-carousel .carousel-control-next,
.shola-art-carousel .carousel-indicators{
    z-index: 3;
}

/* round, subtle prev/next buttons */
.shola-art-carousel .carousel-control-prev,
.shola-art-carousel .carousel-control-next{
    width: 40px;
    height: 40px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(66, 83, 78, 0.4);
    opacity: 0.9;
}
.shola-art-carousel .carousel-control-prev{ left: 12px; }
.shola-art-carousel .carousel-control-next{ right: 12px; }
.shola-art-carousel .carousel-control-prev:hover,
.shola-art-carousel .carousel-control-next:hover{
    background: rgba(176, 220, 209, 1);
    opacity: 1;
}

/* dot indicators */
.shola-art-carousel .carousel-indicators{
    bottom: 12px;
    margin-bottom: 0;
}
.shola-art-carousel .carousel-indicators [data-bs-target]{
    width: 8px;
    height: 8px;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    background-clip: content-box;
    border: 0;
    margin: 0 4px;
    opacity: 1;
}
.shola-art-carousel .carousel-indicators .active{
    background-color: #B0DCD1;
    transform: scale(1.25);
    opacity: 1;
}

/*========================*/

.shola-art-overlay{

margin-top:-80px;

margin-left:25px;
margin-right:25px;

padding:30px;

border-radius:28px;

background: #FFFFFF;

backdrop-filter:blur(40px);

border: 1px solid #D5E5DF;

box-shadow:
0 20px 40px rgba(82, 96, 92, 0.06);

position:relative;
    z-index:  2;

}

/*========================*/

.shola-status{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background: rgba(176, 220, 209, 0.45);

color: var(--heading);

font-weight:600;

margin-bottom:18px;

}

.shola-art-overlay h2{

font-size:32px;

margin-bottom:10px;

color: var(--heading);

}

.shola-art-overlay p{

color: var(--text);

margin-bottom:25px;

}

/*========================*/

.shola-meta{

display:flex;
justify-content:space-between;

margin-bottom:25px;

}

.shola-meta small{

display:block;

color: var(--heading);

margin-bottom:5px;

}

.shola-meta strong{

color: var(--heading);

}

/*========================*/

.shola-story{

padding:20px;

border-radius:20px;

background: #FFFFFF;

border: 1px solid #D5E5DF;

margin-bottom:25px;

font-style:italic;

color: var(--text);

line-height:1.7;

}

/*========================*/

.shola-art-overlay button{

width:100%;

padding:16px;

border: none;

border-radius:60px;

background: linear-gradient(90deg,#B0DCD1,#FFB968);

color: var(--text);

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.4s;

}

.shola-art-overlay button:hover{

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(176, 220, 209, .35);

}

/*========================*/

@media(max-width:991px){

.shola-acrylic-container{

grid-template-columns:1fr;

}

.shola-main-title{

font-size:48px;

}

}

/* ==================================
   PRODUCT SELECTOR
================================== */

.shola-product-selector-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 35px 0 45px;
}


.shola-product-selector {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    padding: 12px 22px;
    border-radius: 30px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}


.shola-product-selector:hover {
    background: #FFFFFF;
}


.shola-product-selector.active {
    background: #B0DCD1;
    border-color: #B0DCD1;
    color: var(--text);
}


/* ==================================
   PRODUCT FADE ANIMATION
================================== */

.fade-out {
    opacity: 0;
    transform: translateY(8px);
}


#productCarousel,
#productCategory,
#productTitle,
#productDescription,
#productFeatures {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* ==================================
   PRODUCT CAROUSEL — MOBILE
================================== */

@media (max-width: 767px) {

    .shola-carousel-btn {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .shola-carousel-prev {
        left: 8px;
    }

    .shola-carousel-next {
        right: 8px;
    }

}


/* ==================================
   MOBILE
================================== */

@media (max-width: 767px) {

    .shola-product-selector-wrapper {
        margin: 25px 0 30px;
        gap: 8px;
    }

    .shola-product-selector {
        font-size: 13px;
        padding: 10px 16px;
    }

}


/* ================================================================
   DESIGN SYSTEM � TYPOGRAPHY  (canonical)
   Lives at the END of the stylesheet so these rules normalise the
   many hard-coded px sizes above via equal-specificity selectors
   (no !important). Colours stay per-component (brand identity).
   ================================================================ */

/* Headings base � family / weight / line-height / tracking unified */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; font-weight: 600; }   /* small value labels */

p  { line-height: 1.75; }

/* Page / section titles � h2 level */
.shola-explore-title,
.shola-why-title,
.shola-section-heading,
.shola-about-title,
.shola-contact-title,
.shola-showcase-title,
.shola-wholesale-title,
.shola-gallery-title,
.shola-hampers-title,
.gh-story-title,
.gh-art-heading h2,
.shola-art-overlay h2 {
    font-size: var(--fs-h2);
}

/* Footer brand statement � intentionally a step below page titles */
.shola-footer-title {
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.3;
}

/* Hero title */
.shola-main-title {
    font-size: var(--fs-hero);
    line-height: 1.15;
}

/* Card / block titles � h3 level */
.shola-card-content h3,
.shola-collection-content h3,
.shola-hamper-content h3,
.shola-contact-card h3,
.shola-wholesale-cta h3,
.shola-wholesale-hero h3,
.shola-why-hero h3,
.gh-art-card h3,
.gh-story-card h3 {
    font-size: 18px;
}

/* Small card titles � h4 level */
.shola-why-card h4,
.shola-about-card h4,
.shola-feature-card h4 {
    font-size: var(--fs-h4);
}

/* Subtitles / leads � fixes legacy `[class*="title"]` substring match
   that inflated `.x-subtitle` classes to heading sizes */
.section-subtitle,
.gh-art-subtitle,
.shola-why-subtitle,
.shola-contact-subtitle,
.shola-showcase-subtitle,
.shola-wholesale-subtitle,
.shola-gallery-subtitle,
.shola-hampers-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.75;
    letter-spacing: normal;
}

/* Eyebrow / label / tag chips � one size, weight, tracking, casing */
.shola-explore-label,
.shola-why-tag,
.shola-about-tag,
.shola-contact-tag,
.shola-gallery-tag,
.shola-wholesale-tag,
.shola-showcase-tag,
.shola-hampers-tag,
.shola-section-badge,
.shola-hero-label,
.shola-product-category,
.gh-art-tag,
.gh-art-heading span,
.gh-story-tag {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Captions / small numeric meta */
.shola-card-number,
.shola-count {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 2px;
}

/* Body copy on light surfaces � one colour, size and rhythm */
.shola-about-text,
.shola-section-text,
.shola-why-card p,
.shola-why-hero p,
.shola-collection-content p,
.shola-product-content p,
.shola-wholesale-card p,
.shola-hamper-content p,
.gh-art-heading p,
.gh-art-card p,
.gh-story-card p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-body);
}


/* ================================================================
   DESIGN SYSTEM � BUTTONS  (canonical)
   Shared pill-button foundation + per-surface colour identity.
   Consistent height, padding, type, radius, icon alignment and
   hover / focus-visible / active / disabled states everywhere.
   ================================================================ */

.shola-contact-btn,
.shola-product-link,
.shola-wholesale-cta a,
.shola-art-overlay button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-min-h);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: none;
    border-radius: var(--btn-radius);
    font-family: var(--btn-font);
    font-size: var(--fs-md);
    font-weight: var(--btn-weight);
    line-height: 1.2;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: var(--btn-transition);
}

/* Hover � one consistent lift (colours stay per-surface) */
.shola-contact-btn:hover,
.shola-product-link:hover,
.shola-wholesale-cta a:hover,
.shola-art-overlay button:hover {
    transform: translateY(-3px);
}

/* Icon alignment & nudge */
.shola-contact-btn i,
.shola-product-link i,
.shola-wholesale-cta a i,
.shola-art-overlay button i {
    transition: transform .3s ease;
}

.shola-contact-btn:hover i,
.shola-product-link:hover i,
.shola-wholesale-cta a:hover i {
    transform: translateX(5px);
}

/* Active / pressed */
.shola-contact-btn:active,
.shola-product-link:active,
.shola-wholesale-cta a:active,
.shola-art-overlay button:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 6px 16px rgba(82, 96, 92, 0.072);
}

/* Focus � visible keyboard ring */
.shola-contact-btn:focus-visible,
.shola-product-link:focus-visible,
.shola-wholesale-cta a:focus-visible,
.shola-art-overlay button:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring);
}

/* Selection controls � collection tabs & product selector */
.shola-tab,
.shola-product-selector {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--btn-radius);
    font-family: var(--btn-font);
    font-size: var(--fs-base);
    font-weight: var(--btn-weight);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: var(--btn-transition);
}

.shola-tab:focus-visible,
.shola-product-selector:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring);
}

.shola-tab:active,
.shola-product-selector:active {
    transform: translateY(0) scale(.97);
}

/* Global focus visibility for links & form controls */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--link-focus);
    outline-offset: 2px;
}

/* Disabled states */
button:disabled,
button[disabled],
[aria-disabled="true"],
.btn.disabled,
.btn[disabled] {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(.25);
    transform: none !important;
    box-shadow: none !important;
}

/* Mobile usability � primary CTAs become full-width targets */
@media (max-width: 767.98px) {

    .shola-contact-btn,
    .shola-product-link,
    .shola-wholesale-cta a {
        width: 100%;
        padding: var(--btn-pad-y) 1.25rem;
    }

    .shola-tab,
    .shola-product-selector {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ================================================================
   DESIGN SYSTEM � LAYOUT & SECTION RHYTHM  (canonical)
   One vertical rhythm + one content rail for every main section.
   Fluid clamp() covers phone ? 4K intentionally (no breakpoint
   shrinking of the desktop version).
   ================================================================ */

:root {
    --section-pad: clamp(3.5rem, 8vw, 6rem);   /* 56px ? 96px */
    --container-gutter: calc(var(--bs-gutter-x, 1.5rem) * 0.5);

    /* Content rail mirrors Bootstrap .container EXACTLY, so custom
       containers stay pixel-aligned with every .container section */
    --rail: 100%;
}

@media (min-width: 576px)  { :root { --rail: 540px; } }
@media (min-width: 768px)  { :root { --rail: 720px; } }
@media (min-width: 992px)  { :root { --rail: 960px; } }
@media (min-width: 1200px) { :root { --rail: 1140px; } }
@media (min-width: 1400px) { :root { --rail: 1320px; } }

/* Every main section shares one vertical rhythm */
.shola-explore,
.shola-collections,
.shola-why,
.shola-about,
.shola-contact,
.shola-showcase,
.shola-wholesale,
.shola-gallery,
.gh-story,
.gh-art-section,
.gh-art,
.shola-acrylic-section {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

/* One shared content rail for the custom containers
   (previously width:90%/92% with mismatched max-widths) */
.gh-story-container,
.gh-art-container,
.shola-acrylic-container {
    width: 100%;
    max-width: var(--rail);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

/* Card padding fallback � zero specificity (:where), so it only
   fills genuine gaps and always yields to component paddings */
:where(.shola-why-card,
       .shola-collection-card,
       .shola-product-card,
       .gh-art-card,
       .gh-story-card,
       .shola-feature-card,
       .shola-contact-card,
       .shola-hamper-info) {
    padding: 28px;
}

/* --------------------------------------------------------------
   Responsive stacking � tablet (768�991px) collapses together
   with the rest of the lg grid instead of shrinking the desktop
   two-column layout.
   -------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Product showcase: image above details, centered */
    .shola-product-view {
        grid-template-columns: 1fr;
    }
    .shola-product-content { text-align: center; }
    .shola-product-features { justify-content: center; }

    /* Story split */
    .gh-story-container {
        grid-template-columns: 1fr;
    }

    /* Callout cards breathe on tablets */
    .shola-why-hero { padding: 32px; }
}

/* --------------------------------------------------------------
   Small phones � soften overlaps/compacts deliberately
   -------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Glass overlay overlap softens on narrow screens */
    .shola-art-overlay {
        margin: -48px 16px 0;
        padding: 22px;
    }

    /* Callout / hero cards compact */
    .shola-why-hero,
    .shola-wholesale-hero {
        padding: 24px;
        border-radius: 22px;
    }
}


/* ================================================================
   DESIGN SYSTEM � CARDS & GRIDS  (canonical)
   One geometry language for every repeated card surface:
   radius, padding, shadow, hover lift, chip shape, grid gaps.
   Per-surface backgrounds/borders (glass vs solid) stay intact.
   ================================================================ */

/* Standard solid-interior cards � shared geometry */
.shola-collection-card,
.shola-why-card,
.shola-feature-card,
.shola-about-card,
.shola-contact-card,
.shola-contact-form,
.gh-glass-card,
.gh-story-card {
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    box-shadow: var(--shadow-1);
}

/* Media-frame cards (full-bleed image top) � frame normalized only;
   their internal text blocks own the padding */
.shola-collection-item,
.shola-wholesale-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* Feature frame keeps a slightly larger radius */
.shola-art-card {
    border-radius: var(--radius-xl);
}

/* One consistent hover for all cards */
.shola-collection-item:hover,
.shola-why-card:hover,
.shola-feature-card:hover,
.shola-about-card:hover,
.shola-contact-card:hover,
.shola-contact-form:hover,
.gh-glass-card:hover,
.gh-story-card:hover,
.shola-wholesale-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2);
}

/* Chips share one pill shape */
.shola-item-list span,
.shola-product-category,
.shola-product-features span {
    border-radius: 999px;
}

/* Grid gaps on one token */
.gh-art-grid { gap: var(--grid-gap); }

/* Two-column splits breathe fluidly */
.gh-story-container,
.shola-acrylic-container,
.shola-product-view {
    gap: var(--split-gap);
}

/* --------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Small info tiles stack instead of squeezing two-up */
    .shola-info-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   DESIGN SYSTEM � FOOTER  (canonical)
   Left-aligned columns at every width; brand / links / contact
   share the site rail (.container); consistent chips & credit.
   ================================================================ */

/* Column heads: restore intended serif presence
   (legacy global group was shrinking them to body size) */
.footer-heading {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

/* Contact icon column never squashes; rows keep icon+text pairs */
.footer-contact i { flex-shrink: 0; }

/* Links: comfortable tap targets, tidy list end */
.footer-links a { padding: 2px 0; }
.footer-links li:last-child { margin-bottom: 0; }

/* Promise strip: pill token + fluid type + steady top spacing */
.shola-footer-promise span {
    border-radius: var(--btn-radius);
    font-size: var(--fs-sm);
    letter-spacing: .2px;
}
.promise-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.shola-footer-promise i { margin-right: 0; }
.shola-footer-promise { margin-top: clamp(4px, 1.5vw, 16px); }


/* ================================================================
   DESIGN SYSTEM � IMAGES, ICONS & FORMS  (canonical)
   Ratio-locked media, squish-proof icons, one accessible form kit.
   ================================================================ */

:root {
    --danger: #C9736A;         /* muted terracotta — soft, on-palette error tone */
}

/* ---------- Images / media ---------- */

/* Collection tiles: fluid ratio instead of fixed px heights
   (kills CLS and removes three breakpoint height hacks) */
.shola-collection-image {
    height: auto;
    aspect-ratio: 3 / 2;
}

/* Supply-card photos lock to their native 10:7 */
.shola-wholesale-card > img {
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    display: block;
}

/* Wide-media guard extends the global fluid rule */
embed,
object,
audio {
    max-width: 100%;
}

/* Icon bubbles never get squashed by tight flex rows */
.shola-contact-icon,
.shola-why-icon,
.shola-feature-icon,
.shola-strip-left i,
.shola-strip-right,
.shola-arrow,
.gh-art-icon {
    flex-shrink: 0;
}

/* Why-section center badge marks (inline styles removed from HTML) */
.shola-badge-mark {
    max-height: clamp(96px, 12vw, 150px);
    width: auto;
}
.shola-badge-text {
    max-height: clamp(60px, 9vw, 100px);
    width: auto;
}

/* ---------- Forms ---------- */

.shola-input {
    border-radius: var(--radius-md);
}

textarea.shola-input {
    height: auto;
    min-height: 170px;
    line-height: 1.6;
}

/* Future-proof control kit (matches .shola-input language) */
select.shola-input {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b98b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

.shola-check {
    width: 18px;
    height: 18px;
    accent-color: #B0DCD1;
    vertical-align: middle;
}
input[type="checkbox"].shola-check { border-radius: 6px; }
input[type="radio"].shola-check { border-radius: 50%; }

/* Validation states � native, JS-free */
.shola-input:user-invalid,
.shola-input.is-invalid,
.shola-input[aria-invalid="true"] {
    border-color: var(--danger);
    background-color: #FFFFFF;
}

.shola-input:user-invalid:focus,
.shola-input.is-invalid:focus,
.shola-input[aria-invalid="true"]:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(201, 115, 106, 0.14);
}

/* Inline error messages (shown only when the field is invalid) */
.shola-field-msg {
    display: none;
    margin: 8px 2px 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
}

.shola-input:user-invalid ~ .shola-field-msg,
.shola-input.is-invalid ~ .shola-field-msg,
.shola-input[aria-invalid="true"] ~ .shola-field-msg {
    display: block;
}

@media (max-width: 575.98px) {
    .shola-field-msg { margin-top: 6px; }
}

/* Form-level status (success / failure banner under the submit button) */
.shola-form-status {
    display: none;
    margin: 18px 2px 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.6;
    color: var(--heading);
}

.shola-form-status.is-visible {
    display: block;
}

.shola-form-status.is-error {
    color: var(--heading);
}

/* Submit button while a submission is in flight */
.shola-contact-btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 10px 20px rgba(176, 220, 209, .18);
}

.shola-contact-btn[disabled]:hover {
    transform: none;
}

/* The decorative glow blobs are absolutely-positioned pseudo elements that
   paint on top of the contact card, which silently swallowed clicks on the
   form's submit button. They are decoration only, so let clicks pass through.
   Purely functional - no visual change. */
.shola-contact::before,
.shola-contact::after {
    pointer-events: none;
}

/* Mobile floating nav + back-to-top FAB step aside while a form is on
   screen, so they never cover the submit button on phones.
   !important is required: main.js toggles .back-to-top with jQuery
   fadeIn/fadeOut, which writes an inline display style. */
body.shola-form-open .mobile-floating-nav,
body.shola-form-open .back-to-top {
    display: none !important;
}

/* ---------- Thank You page ----------
   Built entirely from the existing contact-section language:
   the same dark surface, glass card, tag chip and gradient button. */

.shola-thankyou {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 140px 0 90px;
}

.shola-thankyou-card {
    text-align: center;
    padding: var(--card-pad);
    border-radius: var(--radius-lg);
    border: 1px solid #D5E5DF;
    background: #FFFFFF;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-2);
}

.shola-thankyou-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--heading);
    background: linear-gradient(135deg, #B0DCD1, #C8DCCF);
    box-shadow: 0 18px 35px rgba(176, 220, 209, .35);
}

.shola-thankyou-title {
    margin: 20px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading);
}

.shola-thankyou-text {
    max-width: 560px;
    margin: 18px auto 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.8;
    color: var(--text);
}

.shola-thankyou-actions {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.shola-thankyou-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.shola-thankyou-link i {
    transition: transform .3s ease;
}

.shola-thankyou-link:hover i,
.shola-thankyou-link:focus-visible i {
    transform: translateX(5px);
}

@media (max-width: 575.98px) {
    .shola-thankyou {
        padding: 110px 0 70px;
    }

    .shola-thankyou-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
        margin-bottom: 22px;
    }

    .shola-thankyou-actions .shola-contact-btn {
        width: 100%;
    }
}


/* ================================================================
   MOBILE QA HARDENING  (canonical � keep last)
   Dedicated pass for 320 / 360 / 375 / 390 / 414 / 480 px.
   Readability floors, touch targets, dense-block compaction,
   long-string safety. Sits at EOF so its phone rules win the
   cascade over every earlier base style.
   ================================================================ */

/* ---- Tiny text: readable floors on phones ---- */
@media (max-width: 767.98px) {

    /* Inline error messages stop at ~12px instead of ~10px */
    .shola-field-msg {
        font-size: var(--fs-base);
        line-height: 1.45;
    }

    /* 16px inputs prevent iOS focus zoom across all phones */
    .shola-input,
    textarea.shola-input {
        font-size: 16px;
    }
}

/* ---- Touch targets ---- */

/* Footer links: ~36px target, ~50px pitch with list spacing */
.footer-links a { padding: 7px 0; }

@media (max-width: 767.98px) {
    .footer-links a { padding: 9px 0; }
}

/* Carousel dots: taller invisible hit area around the visible bar */
.carousel-indicators [data-bs-target] {
    border-top-width: 13px;
    border-bottom-width: 13px;
}

/* Header pills keep a consistent minimum even on hover-lift */
.gift-pill { min-height: 36px; }

/* ---- Dense blocks compact on phones ---- */
@media (max-width: 575.98px) {

    .shola-wholesale-cta {
        padding: 32px 22px;
        border-radius: 22px;
    }

    .shola-wholesale-cta h3 {
        margin-bottom: 12px;
    }
}

/* ---- Long-string safety (emails, addresses) ---- */
.footer-contact a,
.footer-contact span,
.shola-contact-item h6 {
    overflow-wrap: anywhere;
}


/* ================================================================
   TABLET & DESKTOP QA  (canonical � keep last)
   ================================================================ */

/* Header content rides the same stepped rail as page sections,
   so pills / logo / links line up with the content edges below.
   Bar backgrounds (white bar + tan navbar) stay full-bleed. */
@media (min-width: 992px) {

    .container-fluid.fixed-top nav.navbar > .container-fluid,
    .container-fluid.fixed-top > .top-bar {
        margin-inline: auto;
        padding-inline: var(--container-gutter);
    }
}

/* .newGradient {
    background: linear-gradient (135deg, #FFFFFF 0%, #FFFFFF 70%,#EEF7F4 100%) !important;
} */

/* ---- Mobile: Ensure footer links are clickable above floating nav ---- */
@media only screen and (max-width: 575.98px) {
    .shola-footer {
        position: relative;
        z-index: 1070;
        padding-bottom: 100px;
    }

    .footer-links a {
        position: relative;
        z-index: 1071;
        padding: 12px 0;
        display: inline-block;
        min-height: 44px;
        line-height: 20px;
    }

    .footer-links li {
        margin-bottom: 4px;
    }

    .footer-contact a {
        position: relative;
        z-index: 1071;
    }
}

.nav-gift-toggle a {
    font-size: 12px !important;
}

.maps-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    box-sizing: border-box;
  }

  .map-card {
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(82, 96, 92, 0.06);
    border: 1px solid #D5E5DF;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .map-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 35px rgba(82, 96, 92, 0.09);
  }

  .map-frame {
    width: 100%;
    height: 450px;
    border-radius: 14px;
    overflow: hidden;
  }

  .map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  @media (max-width: 768px) {
    .maps-section {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 30px 16px;
    }

    .map-card {
      border-radius: 16px;
      padding: 8px;
    }

    .map-frame {
      height: 350px;
      border-radius: 11px;
    }
  }

  .painting-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(66, 83, 78, 0.7);
}

@media (max-width: 768px) {
    .painting-name {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.collection-heading {
  position: relative;
  display: flex;
  align-items: center;
  margin: 28px 0 18px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.collection-heading::before,
.collection-heading::after {
  content: "";
  height: 1px;
  flex: 0 1 35px;
}

.collection-heading::before {
  margin-right: 12px;
  background: linear-gradient(
    to right,
    transparent,
    #B0DCD1
  );
}

.collection-heading::after {
  margin-left: 12px;
  background: linear-gradient(
    to left,
    transparent,
    #B0DCD1
  );
}

/* Mobile */
@media (max-width: 600px) {
  .collection-heading {
    margin: 20px 0 14px;
    font-size: 15px;
  }

  .collection-heading::before,
  .collection-heading::after {
    flex-basis: 22px;
  }

  .collection-heading::before {
    margin-right: 9px;
  }

  .collection-heading::after {
    margin-left: 9px;
  }
}

.ashwitha-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ashwitha-social {
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ashwitha-social svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.ashwitha-social.instagram {
  color: var(--text);
}

.ashwitha-social.whatsapp {
  color: var(--text);
}

.ashwitha-social:hover {
  transform: scale(1.1);
}

/* ==================================
   WHOLESALE QUOTATION MODAL
   (wholesale.html — "Request Wholesale Quotation")
=================================== */

.shola-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .3s ease;
}

.shola-modal.is-open {
    opacity: 1;
}

.shola-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(66, 83, 78, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.shola-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 42px 38px 36px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        #FFFFFF,
        #FFFFFF
    );
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid #D5E5DF;
    box-shadow: 0 30px 70px rgba(82, 96, 92, 0.27);
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}

.shola-modal.is-open .shola-modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Close button */
.shola-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #D5E5DF;
    border-radius: 50%;
    background: rgba(176, 220, 209, 0.24);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    transition: .35s ease;
}

.shola-modal-close:hover {
    background: linear-gradient(135deg, #B0DCD1, #C8DCCF);
    border-color: transparent;
    color: var(--text);
    transform: rotate(90deg);
}

.shola-modal-close:focus-visible {
    outline: 2px solid #B0DCD1;
    outline-offset: 2px;
}

/* Header */
.shola-modal-header {
    margin-bottom: 26px;
    padding-right: 40px;
}

.shola-modal-header h3 {
    font-size: 27px;
    color: var(--heading);
    margin-bottom: 10px;
}

.shola-modal-header p {
    margin: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.75;
}

/* Fields */
.shola-modal-field {
    margin-bottom: 18px;
}

.shola-modal-field label {
    display: block;
    margin: 0 0 8px 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--heading);
}

.shola-modal textarea.shola-input {
    height: auto;
    min-height: 96px;
    padding: 16px 22px;
    line-height: 1.6;
    resize: vertical;
}

/* Submit */
.shola-modal-submit {
    width: 100%;
    margin-top: 10px;
    padding: 16px 36px;
}

/* Mobile */
@media (max-width: 575.98px) {
    .shola-modal {
        padding: 14px;
    }

    .shola-modal-dialog {
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        padding: 36px 20px 26px;
        border-radius: 24px;
    }

    .shola-modal-header {
        margin-bottom: 20px;
        padding-right: 34px;
    }

    .shola-modal-header h3 {
        font-size: 21px;
    }

    .shola-modal-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .shola-modal-field {
        margin-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shola-modal,
    .shola-modal-dialog,
    .shola-modal-close {
        transition: none;
    }
}

.navbar-dark .navbar-nav .nav-link {
    color: #42534e !important;
    font-weight: bold;
}

/* ================================================================
   IMAGE RESPONSIVENESS FIX (zoom/crop/overflow only — no layout change)
   Root causes:
   1. Home banner: .carousel-item / img locked to 75vh on all widths
      while .carousel-inner shrank (55/45/40vh) → img overflowed and
      object-fit:cover heavily cropped (= "zoomed" look on mobile).
   2. Products carousel: forced 1/1 square + cover on portrait
      (~4:5) photos → top/bottom cropped off.
   3. Wholesale cards: fixed 230px/200px height + cover (+ conflicting
      10/7 ratio rule) on portrait photos → heavy crop/zoom.
   Fix: sync heights, fluid widths, correct object-fit per image type.
   ================================================================ */

/* Global safety: fluid media + no horizontal scroll on mobile */
img {
    max-width: 100%;
}
html,
body {
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* ---------- 1. HOME: banner / carousel ---------- */
/* Banner is full-bleed → cover is correct, but the frame and the
   image must share the SAME height at every breakpoint. */
#header-carousel .carousel-item,
#header-carousel .carousel-inner {
    height: 75vh;
    min-height: 360px;
}
#header-carousel .carousel-item img {
    display: block;
    width: 100%;
    height: 100%; /* was fixed 75vh → overflowed the 40vh mobile frame */
    object-fit: cover;
    object-position: center center;
}

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

@media (max-width: 767.98px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-inner {
        height: 45vh;
        min-height: 280px;
    }
    #header-carousel .carousel-item img {
        height: 100%;
    }
}

@media (max-width: 575.98px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-inner {
        height: 40vh;
        min-height: 240px;
    }
    #header-carousel .carousel-item img {
        height: 100%;
    }
}

/* ---------- 2. PRODUCTS: product carousel ---------- */
/* Product photos are portrait (~4:5). The photo fills the card width
   edge-to-edge at its natural ratio → no side letterbox bars, the
   white card always hugs the image (image + its own padding only).
   No height cap: capping height while width is 100% was shrinking the
   photo inside a wide frame = the white bars in the screenshot. */
.shola-product-image {
    min-width: 0; /* allow grid/flex children to shrink on mobile */
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    margin-inline: 0;
}
.shola-product-carousel {
    /* Full card width so translateX(-100%) swipe math stays correct. */
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden; /* contain the hover zoom so edges stay flush */
    border-radius: 16px;
}
.shola-carousel-slide {
    display: block; /* not flex: image fills the slide, no centering gaps */
    background: transparent; /* card behind supplies the white, no double bars */
    overflow: hidden;
}
.shola-carousel-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none; /* never squeeze the photo inside a wider frame */
    aspect-ratio: auto; /* unset forced 1/1 square that cropped portraits */
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
}

/* ---------- 4. HOME: "Crafted For Every Occasion" collection tiles ---------- */
/* Tiles hold portrait product photos (~4:5) but the frame was a fixed
   240px-high landscape box (220px/200px on small screens) + cover →
   top/bottom cropped off = "zoomed" look on all 4 collections.
   Fix: one fluid portrait frame + contain so the FULL photo shows on
   big and small screens. Card body/design/hover untouched. */
.shola-collection-image {
    position: relative;
    overflow: hidden;
    height: auto; /* kill fixed 240px/220px/200px heights */
    aspect-ratio: 4 / 5;
    background: #FFFFFF;
}
.shola-collection-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: center center;
    display: block;
}

@media (max-width: 991px) {
    .shola-collection-image {
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 575px) {
    .shola-collection-image {
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

/* ---------- 3. WHOLESALE: hero ---------- */
/* Hero is an inline photo (landscape 4:3) → show whole image, fluid. */
.shola-wholesale-image {
    min-width: 0;
}
.shola-wholesale-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* Cards hold portrait product photos. Fixed 230px/200px heights +
   cover cropped them hard. Use one fluid portrait frame + contain
   so the full product is visible at every width. Card height stays
   uniform via the shared aspect-ratio (design preserved). */
.shola-wholesale-card {
    min-width: 0;
}
.shola-wholesale-card > img,
.shola-wholesale-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: center center;
    display: block;
    background: #FFFFFF;
}

@media (max-width: 767px) {
    .shola-wholesale-card > img,
    .shola-wholesale-card img {
        aspect-ratio: 4 / 5; /* keep uniform rows; no fixed px height */
    }
}