/* ============ TOKENS ============ */
      :root {
        --warm-white: hsl(0, 0%, 100%);
        --ivory: #f3f3f1;
        --soft-stone: #e9e9e6;
        --off-white: #f7f7f6;
        --charcoal: #161615;
        --graphite: #3c3c3a;
        --granite-black: #0b0b0a;
        --gold: #ad8a55;
        --gold-bright: #c29a5f;
        --warm-grey: #84847e;
        --line: rgba(22, 22, 21, 0.1);
        --serif: "Fraunces", serif;
        --sans: "Inter", sans-serif;
        --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
          --gold-bright: #E6C35A;
      }
      html,
body{
    margin:0;
    padding:0;
}


      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: var(--sans);
        background: var(--warm-white);
        color: var(--charcoal);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }
      img,
      svg {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font-family: inherit;
        border: none;
        background: none;
        cursor: pointer;
      }
      .eyebrow {
        font-family: var(--sans);
        font-size: 18px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
      }
      .wrap {
        max-width: 1360px;
        margin: 0 auto;
        padding: 0 56px;
      }
      @media (max-width: 768px) {
        .wrap {
          padding: 0 24px;
        }
      }
      h1,
      h2,
      h3 {
        font-family: var(--serif);
        font-weight: 400;
        letter-spacing: -0.01em;
        color: var(--charcoal);
      }
      .reveal {
        opacity: 0;
        transform: translateY(36px);
        
      }
      .hero-content{
    position:relative;
    z-index:5;
}

     
      /* ============ PROCEDURAL STONE TEXTURES ============ */
      .stone-surface {
        position: relative;
        overflow: hidden;
        background: #e9e3d6;
      }
      .stone-marble-white {
        background:
          radial-gradient(
            120% 90% at 15% 20%,
            rgba(255, 255, 255, 0.9),
            transparent 55%
          ),
          radial-gradient(
            90% 70% at 85% 75%,
            rgba(210, 200, 182, 0.55),
            transparent 60%
          ),
          linear-gradient(
            135deg,
            #f4f0e8 0%,
            #ece5d6 40%,
            #f7f4ec 60%,
            #e9e1cf 100%
          );
      }
      .stone-marble-white::before {
        content: "";
        position: absolute;
        inset: -10%;
        background-image:
          repeating-linear-gradient(
            120deg,
            transparent 0 40px,
            rgba(160, 150, 130, 0.1) 41px 43px,
            transparent 44px 90px
          ),
          repeating-linear-gradient(
            35deg,
            transparent 0 70px,
            rgba(120, 105, 80, 0.08) 71px 74px,
            transparent 75px 160px
          );
        mix-blend-mode: multiply;
        animation: none;
      }
      .stone-granite-black {
        background: linear-gradient(
          160deg,
          #151312 0%,
          #1f1c19 45%,
          #100f0e 100%
        );
      }
      .stone-granite-black::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
          radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size:
          9px 9px,
          5px 5px;
        background-position:
          0 0,
          3px 4px;
      }
      .stone-quartzite {
        background: linear-gradient(150deg, #efe9de, #e2dac8 50%, #eee7d9);
      }
      .stone-quartzite::before {
        content: "";
        position: absolute;
        inset: -10%;
        background-image: repeating-linear-gradient(
          75deg,
          transparent 0 30px,
          rgba(150, 170, 160, 0.14) 31px 33px,
          transparent 34px 70px
        );
        mix-blend-mode: multiply;
      }
      .stone-onyx {
        background: linear-gradient(160deg, #3a2f22, #5c4326 40%, #2c2318 100%);
      }
      .stone-onyx::before {
        content: "";
        position: absolute;
        inset: -10%;
        background-image: repeating-linear-gradient(
          100deg,
          transparent 0 20px,
          rgba(255, 214, 150, 0.18) 21px 23px,
          transparent 24px 55px
        );
        mix-blend-mode: screen;
      }
      .stone-granite-multicolor {
        background: linear-gradient(155deg, #c9b89a, #a68f6c 50%, #8a7454);
      }
      .stone-granite-multicolor::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(rgba(40, 30, 20, 0.28) 1.5px, transparent 1.6px),
          radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.1px);
        background-size:
          7px 7px,
          11px 11px;
        background-position:
          0 0,
          4px 5px;
      }
      .stone-handicraft {
        background: linear-gradient(165deg, #eee7d8, #d9cdb2 55%, #efe8d9);
      }

      /* ============ AMBIENT AUTO-ZOOM (feels alive, no hover needed) ============ */
      @keyframes ambientZoom {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.045);
        }
        100% {
          transform: scale(1);
        }
      }
      .img-anim {
        animation: ambientZoom 17s ease-in-out infinite;
        will-change: transform;
      }
      .img-anim.d1 {
        animation-duration: 19s;
        animation-delay: -3s;
      }
      .img-anim.d2 {
        animation-duration: 15s;
        animation-delay: -7s;
      }
      .img-anim.d3 {
        animation-duration: 21s;
        animation-delay: -1s;
      }
      .img-anim.d4 {
        animation-duration: 16s;
        animation-delay: -5s;
      }
      .img-anim.d5 {
        animation-duration: 18s;
        animation-delay: -9s;
      }
      .img-anim.d6 {
        animation-duration: 20s;
        animation-delay: -2s;
      }
      @media (prefers-reduced-motion: reduce) {
        .img-anim {
          animation: none;
        }
      }

      /* ============ HEADER ============ */
  header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:88px;
    padding:0 40px;

    /* Premium warm glass */
    background: rgba(226, 205, 183, 0.42);

    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);

    border-bottom:1px solid rgba(255,255,255,.18);

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    transition:all .45s ease;
}

header.scrolled{
    height:88px;
    padding:0 40px;

    /* Same color after scroll */
    background: rgba(226, 205, 183, 0.42);

    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);

    border-bottom:1px solid rgba(255,255,255,.22);

    box-shadow:0 10px 35px rgba(0,0,0,.12);
}
     .logo {
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 0.02em;
    font-weight: 600;

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

    color: #171513;
}
#siteHeader{
    height: 88px;
    padding: 0 40px;
}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    height: 50px;   /* pehle 20-24px hoga */
    width: auto;
    display: block;
}
      .logo-mark {
        width: 26px;
        height: 26px;
        border-radius: 2px;
        background: linear-gradient(
          150deg,
          var(--charcoal),
          var(--granite-black)
        );
        position: relative;
        flex: none;
      }
      .logo-mark::after {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1px solid var(--gold);
        opacity: 0.8;
      }
      nav {
        display: flex;
        gap: 38px;
        align-items: center;
      }
    nav a {
    font-size: 15px;
    letter-spacing: .02em;
    color: #171513;
    font-weight: 600;

    display: inline-block;

    text-shadow: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

nav a:hover{
    color:#171513;      /* color change nahi hoga */
    transform:scale(1.09);
}
  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#111;
    transition:.3s;
}

/* Mobile Menu */
.mobile-menu{
    display:none;
    position:fixed;
    top:72px;
    left:0;
    width:100%;
    background:#f3ede3;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    z-index:999;
}

.mobile-menu.active{
    display:flex;
    flex-direction:column;
}

@media (min-width:769px){
    .mobile-menu{
        display:none !important;
    }
}
.menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu a{
    padding:18px 24px;
    text-decoration:none;
    color:#111;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.mobile-quote{
    text-align:center;
    font-weight:600;
}

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

     #siteHeader{
        height:72px;
        padding:0 14px;
    }

    .logo{
        display:flex;
        align-items:center;
        height:72px;
        margin-left:-6px;
        flex-shrink:0;
    }

    .logo img{
        width:auto;
        height:40px;
        max-width:180px;
        object-fit:contain;
        display:block;
    }
    .desktop-nav,
    .btn-quote{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .mobile-menu{
        top:72px;
    }
}   
      .header-actions {
        display: flex;
        align-items: center;
        gap: 22px;
      }
     .btn-quote {
    position: relative;

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

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;

    color: #fff;

    padding: 12px 28px;

    border: 1px solid #171513;
    border-radius: 999px;

    background: #171513;

    box-shadow:
        0 8px 20px rgba(0,0,0,.14);

    transition:
        all .35s ease;
}

.btn-quote:hover {
    background: #B9791C;
    border-color: #B9791C;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);
}
      .nav-toggle {
        display: none;
      }
      @media (max-width: 1080px) {
        nav {
          display: none;
        }
        header,
        header.scrolled {
          padding: 20px 24px;
        }
      }
/* =====================================================
   MOBILE HEADER FIX
   ===================================================== */

@media (max-width: 1080px) {

    /* Hide desktop navigation */
    .desktop-nav {
        display: none !important;
    }

    #siteHeader {
        height: 72px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Logo */
    .logo {
        height: 72px;
        display: flex;
        align-items: center;
        margin-left: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .logo img {
        height: 38px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
        display: block;
    }

    /* Right side */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Call button */
    .btn-quote {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        height: 44px;
        padding: 0 17px;

        font-size: 13px;
        line-height: 1;
        white-space: nowrap;

        border-radius: 999px;

        flex: 0 0 auto;
    }

    /* Cart */
    .header-cart {
        position: relative;
        width: 32px;
        height: 40px;

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

        flex: 0 0 32px;
    }

    .header-cart i {
        font-size: 18px;
    }

    .cart-count {
        position: absolute;
        top: 2px;
        right: -3px;

        min-width: 16px;
        height: 16px;

        padding: 0 4px;

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

        font-size: 9px;
        line-height: 1;

        border-radius: 50%;
    }

    /* Hamburger */
    .menu-toggle {
        width: 34px;
        height: 40px;

        padding: 0;

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

        flex-direction: column;
        gap: 5px;

        flex: 0 0 34px;
    }

    .menu-toggle span {
        width: 24px;
        height: 2px;
    }

    /* Mobile menu */
    .mobile-menu {
        top: 72px;
    }
}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width: 390px) {

    #siteHeader {
        padding: 0 10px;
        gap: 5px;
    }

    .logo img {
        height: 35px;
        max-width: 135px;
    }

    .header-actions {
        gap: 7px;
    }

    .btn-quote {
        height: 42px;
        padding: 0 14px;
        font-size: 12px;
    }

    .header-cart {
        width: 29px;
        flex-basis: 29px;
    }

    .header-cart i {
        font-size: 17px;
    }

    .menu-toggle {
        width: 30px;
        flex-basis: 30px;
    }

    .menu-toggle span {
        width: 22px;
    }
}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 350px) {

    .logo img {
        height: 32px;
        max-width: 120px;
    }

    .header-actions {
        gap: 5px;
    }

    .btn-quote {
        height: 40px;
        padding: 0 11px;
        font-size: 11px;
    }

    .header-cart {
        width: 27px;
        flex-basis: 27px;
    }

    .menu-toggle {
        width: 28px;
        flex-basis: 28px;
    }
}
      /* ============ HERO ============ */
/* =========================================================
   HERO SECTION
========================================================= */
/* =========================================================
   HERO
========================================================= */

:root {
    --hero-header-space: 98px;
}

.hero {
    position: relative;

    width: 100%;

    /* DESKTOP */
    min-height: 100vh;
    height: 100vh;

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

    overflow: hidden;

    padding: 0;

    box-sizing: border-box;

    background: #171513;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition: opacity 1.5s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;

    z-index: 1;
}


/* =========================================================
   BACKGROUND ELEMENTS
========================================================= */

.hero-bg .stone-surface {
    position: absolute;
    inset: -6%;
}

.hero-bg .frame-inner {
    position: absolute;
    inset: 6%;

    background: var(--warm-white);
}

.stone-marble-white {
    background: #f5f5f5;
}


/* =========================================================
   HERO IMAGE / VIDEO
========================================================= */

.hero-image,
.hero-video {
    position: absolute;

    top: -40px;
    left: -40px;

    width: calc(100% + 80px);
    height: calc(100% + 80px);

    object-fit: cover;

    transform: scale(1.25);

    will-change: transform;

    display: block;
}


/* =========================================================
   KEN BURNS
========================================================= */

.hero-slide.active .hero-image,
.hero-slide.active .hero-video {
    animation: kenBurns 8s ease-out forwards;
}

@keyframes kenBurns {

    0% {
        transform: scale(1.25) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(1.18) translate3d(-12px, -8px, 0);
    }

    100% {
        transform: scale(1.12) translate3d(12px, 8px, 0);
    }
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.22) 45%,
            rgba(0, 0, 0, 0.50) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.12) 45%,
            rgba(0, 0, 0, 0.48) 100%
        );
}


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

.hero-content {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 1100px;

    height: 100%;

    margin: 0 auto;

    /*
       Header se safe distance
    */
    padding:
        var(--hero-header-space)
        20px
        45px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-content .eyebrow {
    position: relative;

    z-index: 10;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    max-width: min(
        900px,
        calc(100% - 20px)
    );

    min-height: 38px;

    box-sizing: border-box;

    padding: 8px 18px;

    color: var(--gold-bright) !important;

    background: rgba(18, 16, 14, 0.72);

    border: 1px solid rgba(207, 170, 67, 0.65);

    border-radius: 3px;

    font-size: clamp(9px, 1vw, 13px);

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: clamp(2px, 0.28vw, 4px);

    text-transform: uppercase;

    text-align: center;

    margin: 0 0 24px;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;

    flex-shrink: 0;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.28),
        inset 0 0 18px rgba(207, 170, 67, 0.04);

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.8);
}


/* Eyebrow side lines */

.hero-content .eyebrow::before,
.hero-content .eyebrow::after {
    content: "";

    display: inline-block;

    width: clamp(16px, 2.5vw, 28px);

    height: 1px;

    flex: 0 0 auto;

    background: var(--gold-bright);

    opacity: 0.85;
}

.hero-content .eyebrow::before {
    margin-right: 12px;
}

.hero-content .eyebrow::after {
    margin-left: 12px;
}


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

.hero-content h1 {
    position: relative;

    z-index: 6;

    width: 100%;

    max-width: 1000px;

    margin: 0 0 20px;

    color: #fff !important;

    font-family:
        var(--serif),
        "Playfair Display",
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(46px, 6.5vw, 86px);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.025em;

    text-align: center;

    text-transform: none;

    overflow-wrap: normal;

    word-break: normal;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.90),
        0 7px 25px rgba(0, 0, 0, 0.72),
        0 15px 40px rgba(0, 0, 0, 0.42);
}


/* H1 italic */

.hero-content h1 em {
    font-style: italic;

    color: var(--gold) !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-content .hero-sub {
    max-width: 650px;

    margin: 0 auto 25px;

    text-align: center;

    font-size: 17px;

    line-height: 1.7;

    color: #fff !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.85),
        0 5px 18px rgba(0, 0, 0, 0.5);
}

.hero-sub b {
    color: #fff;

    font-weight: 500;
}


/* =========================================================
   PRODUCT SEARCH
========================================================= */

.hero-product-search {
    width: 100%;

    max-width: 560px;

    margin: 0 auto;
}

.hero-product-search-form {
    width: 100%;
}

.hero-product-search-wrap {
    width: 100%;

    display: flex;

    align-items: center;

    box-sizing: border-box;

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

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 34px;

    padding: 6px 7px 6px 22px;

    backdrop-filter: blur(14px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);

    transition:
        box-shadow 0.4s var(--ease),
        transform 0.4s var(--ease),
        background 0.4s var(--ease);
}

.hero-product-search-wrap:focus-within {
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-2px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.25);
}

.hero-product-search-input {
    flex: 1;
    min-width: 0;

    border: none;
    outline: none;
    background: transparent;

    padding: 11px 8px;

    font-family: var(--sans);
    font-size: 15px;

    color: #171513 !important;
    -webkit-text-fill-color: #171513;
}

.hero-product-search-input::placeholder {
    color: #66605a !important;
    opacity: 1;
}

.hero-product-search-wrap button {
    width: 44px;
    height: 44px;
    flex: none;

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

    border: none;
    border-radius: 50%;

    background: #171513;
    color: #fff;

    cursor: pointer;

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.hero-product-search-wrap button:hover {
    background: #B9791C;
    transform: scale(1.05);
}
@media (max-width: 767px) {

    .hero-product-search {
        width: calc(100% - 30px);
        max-width: 560px;
    }

    .hero-product-search-wrap {
        padding: 5px 6px 5px 18px;
        min-height: 52px;
    }

    .hero-product-search-input {
        font-size: 14px;
        padding: 10px 6px;
    }

    .hero-product-search-wrap button {
        width: 42px;
        height: 42px;
    }
}

.hero-product-search-icon {
    font-size: 14px;
}


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

.hero-ctas {
    margin-top: 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;
}
@media (max-width: 767px) {

    .hero-ctas .btn-primary,
    .hero-ctas .btn-secondary {
        min-width: 150px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 15px;
    }

}

/* =========================================================
   PRIMARY BUTTON
========================================================= */
.btn-primary {
    background: var(--charcoal);

    color: var(--warm-white);

    padding: 16px 36px;

    border-radius: 32px;

    font-size: 14px;

    letter-spacing: 0.03em;

    transition:
        transform 0.45s var(--ease),
        background 0.45s var(--ease);
}

.btn-primary {
        background: var(--charcoal);
    color: var(--warm-white);
    display: inline-flex;
    width: auto;
    max-width: max-content;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
        border-radius: 32px;
}

@media (max-width: 640px) {
    .btn-primary {
        background: var(--charcoal);
    color: var(--warm-white);
        width: auto !important;
        max-width: max-content;
        display: inline-flex;
        padding: 13px 28px;
            border-radius: 32px;
    }
}
    

.btn-primary:hover {
    transform: translateY(-3px);

    background: var(--granite-black);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.65);

    color: #fff;

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

    padding: 16px 36px;

    border-radius: 32px;

    font-size: 14px;

    letter-spacing: 0.03em;

    transition: all 0.45s var(--ease);
}

.btn-secondary:hover {
    border-color: #fff;

    background: rgba(255, 255, 255, 0.16);
}


/* =========================================================
   OLD SEARCH BAR
========================================================= */

.search-bar {
    position: relative;

    max-width: 560px;

    width: 100%;

    margin: 0 auto;

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

    backdrop-filter: blur(16px);

    border: 1px solid rgba(22, 22, 21, 0.1);

    border-radius: 34px;

    display: flex;

    align-items: center;

    padding: 8px 8px 8px 26px;

    box-shadow:
        0 10px 30px rgba(22, 22, 21, 0.06);

    transition:
        box-shadow 0.5s var(--ease),
        transform 0.5s var(--ease),
        background 0.5s var(--ease);
}

.search-bar.focused {
    box-shadow:
        0 22px 60px rgba(22, 22, 21, 0.16);

    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.92);
}

.search-bar input {
    flex: 1;

    border: none;

    background: none;

    outline: none;

    font-size: 15px;

    font-family: var(--sans);

    color: var(--charcoal);

    padding: 10px 8px;
}

.search-bar input::placeholder {
    color: var(--warm-grey);
}

.search-btn {
    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--charcoal);

    color: var(--warm-white);

    display: flex;

    align-items: center;

    justify-content: center;

    flex: none;

    transition: background 0.35s;
}

.search-btn:hover {
    background: var(--gold);
}

.search-chips {
    display: flex;

    gap: 10px;

    justify-content: center;

    margin-top: 16px;

    flex-wrap: wrap;
}

.search-chips span {
    font-size: 12px;

    color: var(--warm-grey);

    padding: 6px 14px;

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

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.3s;
}

.search-chips span:hover {
    border-color: var(--gold);

    color: var(--charcoal);
}


/* =========================================================
   SCROLL CUE
========================================================= */

.scroll-cue {
    position: absolute;

    bottom: 26px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    z-index: 20;

    pointer-events: none;
}

.scroll-cue .line {
    width: 1px;

    height: 34px;

    background:
        linear-gradient(
            var(--charcoal),
            transparent
        );

    animation:
        scrollcue 2s infinite var(--ease);
}

@keyframes scrollcue {

    0% {
        opacity: 0;

        transform: scaleY(0);

        transform-origin: top;
    }

    40% {
        opacity: 1;

        transform: scaleY(1);

        transform-origin: top;
    }

    100% {
        opacity: 0;

        transform: scaleY(1);

        transform-origin: bottom;
    }
}

.scroll-cue span {
    font-size: 10px;

    letter-spacing: 0.2em;

    color: var(--warm-grey);

    text-transform: uppercase;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .hero-content {
        padding:
            110px
            20px
            45px;
    }

    .hero-content .eyebrow {
        font-size: 13px;

        letter-spacing: 4px;

        max-width: 900px;

        white-space: nowrap;
    }

    .hero-content h1 {
        font-size: clamp(65px, 6.2vw, 86px);
    }
}


/* =========================================================
   LAPTOP / MEDIUM DESKTOP
========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .hero {
        min-height: 100vh;
        height: 100vh;
    }

    .hero-content {
        padding:
            105px
            25px
            45px;
    }

    .hero-content .eyebrow {
        max-width: 90%;

        font-size: 11px;

        letter-spacing: 3px;

        white-space: normal;
    }

    .hero-content h1 {
        font-size:
            clamp(48px, 7vw, 72px);

        line-height: 1.02;
    }

    .hero-content .hero-sub {
        font-size: 15px;
    }
}


/* =========================================================
   TABLET
   Hero thoda compact
========================================================= */

@media (min-width: 577px) and (max-width: 768px) {

    .hero {
        /*
           Desktop 100vh se tablet par compact
        */
        min-height: 75vh;

        height: 75vh;

        max-height: none;
    }

    .hero-content {
        height: 100%;

        padding:
            105px
            18px
            40px;
    }

    .hero-content .eyebrow {
        max-width: calc(100% - 20px);

        min-height: 32px;

        padding: 7px 13px;

        font-size: 9px;

        letter-spacing: 2px;

        line-height: 1.35;

        margin-bottom: 14px;
    }

    .hero-content .eyebrow::before,
    .hero-content .eyebrow::after {
        width: 14px;
    }

    .hero-content .eyebrow::before {
        margin-right: 8px;
    }

    .hero-content .eyebrow::after {
        margin-left: 8px;
    }

    .hero-content h1 {
        font-size:
            clamp(40px, 8vw, 58px);

        line-height: 1.01;

        margin-bottom: 14px;
    }

    .hero-content .hero-sub {
        max-width: 90%;

        font-size: 14px;

        line-height: 1.5;

        margin-bottom: 15px;
    }

    .hero-product-search-wrap {
        padding: 5px 6px 5px 16px;
    }

    .hero-product-search-input {
        font-size: 13px;

        padding: 9px 6px;
    }

    .hero-product-search-wrap button {
        width: 40px;

        height: 40px;
    }

    .hero-ctas {
        margin-top: 16px;

        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 24px;

        font-size: 13px;
    }

    .scroll-cue {
        bottom: 12px;
    }
}


/* =========================================================
   MOBILE
   IMPORTANT:
   Hero intentionally small so next section/gallery
   becomes visible immediately.
========================================================= */

@media (max-width: 576px) {

    .hero {
        /*
           IMPORTANT:
           Mobile hero intentionally compact.
           Gallery/next section starts much sooner.
        */
        min-height: 0;

        height: 68vh;

        max-height: 560px;

        padding: 0;

        overflow: hidden;
    }


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

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.62) 0%,
                rgba(0, 0, 0, 0.32) 50%,
                rgba(0, 0, 0, 0.58) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.18) 45%,
                rgba(0, 0, 0, 0.62) 100%
            );
    }


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

    .hero-content {
        width: 100%;

        height: 100%;

        padding:
            100px
            14px
            38px;

        box-sizing: border-box;

        justify-content: center;

        overflow: visible;
    }


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

    .hero-content .eyebrow {
        width: auto;

        max-width: calc(100% - 4px);

        min-height: 30px;

        padding: 6px 9px;

        margin: 0 0 12px;

        font-size:
            clamp(7px, 1.9vw, 9px);

        letter-spacing:
            clamp(1.2px, 0.45vw, 2px);

        line-height: 1.35;

        white-space: normal;

        overflow-wrap: anywhere;

        word-break: normal;

        text-align: center;

        flex-shrink: 0;
    }


    .hero-content .eyebrow::before,
    .hero-content .eyebrow::after {
        width: 11px;

        flex-shrink: 0;
    }

    .hero-content .eyebrow::before {
        margin-right: 6px;
    }

    .hero-content .eyebrow::after {
        margin-left: 6px;
    }


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

    .hero-content h1 {
        width: 100%;

        max-width: 100%;

        margin: 0 0 12px;

        font-size:
            clamp(32px, 10vw, 46px);

        line-height: 1.02;

        letter-spacing: -0.015em;

        text-align: center;

        text-shadow:
            0 3px 10px rgba(0, 0, 0, 0.95),
            0 6px 22px rgba(0, 0, 0, 0.75);
    }


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

    .hero-content .hero-sub {
        max-width: 92%;

        margin: 0 auto 13px;

        font-size: 12px;

        line-height: 1.45;
    }


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

    .hero-product-search {
        width: 100%;

        max-width: 100%;
    }

    .hero-product-search-wrap {
        width: 100%;

        padding:
            4px
            5px
            4px
            13px;

        border-radius: 28px;
    }

    .hero-product-search-input {
        min-width: 0;

        font-size: 12px;

        padding:
            8px
            5px;
    }

    .hero-product-search-wrap button {
        width: 38px;

        height: 38px;
    }

    .hero-product-search-icon {
        font-size: 12px;
    }


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

    .hero-ctas {
        width: 100%;

        margin-top: 13px;

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        gap: 9px;
    }

    .btn-primary,
    .btn-secondary {
        min-width: 0;

        width: auto;

        padding:
            11px
            18px;

        font-size: 11px;

        white-space: nowrap;
    }


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

    .scroll-cue {
        bottom: 8px;
    }

    .scroll-cue .line {
        height: 20px;
    }

    .scroll-cue span {
        font-size: 8px;
    }
}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    .hero {
        /*
           Even more compact on phone
           so gallery starts visibly below hero.
        */
        height: 66vh;

        max-height: 500px;
    }


    .hero-content {
        padding:
            94px
            12px
            32px;
    }


    .hero-content .eyebrow {
        max-width: calc(100% - 2px);

        padding:
            5px
            8px;

        min-height: 28px;

        font-size: 7.5px;

        letter-spacing: 1.25px;

        line-height: 1.35;

        margin-bottom: 10px;
    }


    .hero-content .eyebrow::before,
    .hero-content .eyebrow::after {
        width: 9px;
    }

    .hero-content .eyebrow::before {
        margin-right: 5px;
    }

    .hero-content .eyebrow::after {
        margin-left: 5px;
    }


    .hero-content h1 {
        font-size:
            clamp(30px, 10vw, 40px);

        line-height: 1.01;

        margin-bottom: 10px;
    }


    .hero-content .hero-sub {
        max-width: 94%;

        font-size: 11px;

        line-height: 1.4;

        margin-bottom: 10px;
    }


    .hero-product-search-wrap {
        padding:
            3px
            4px
            3px
            11px;
    }

    .hero-product-search-input {
        font-size: 11px;

        padding: 7px 4px;
    }

    .hero-product-search-wrap button {
        width: 36px;

        height: 36px;
    }


    .hero-ctas {
        margin-top: 10px;

        gap: 7px;
    }

    .btn-primary,
    .btn-secondary {
        padding:
            10px
            15px;

        font-size: 10px;
    }


    .scroll-cue {
        display: none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .hero {
        height: 64vh;

        max-height: 450px;
    }

    .hero-content {
        padding:
            90px
            9px
            28px;
    }


    .hero-content .eyebrow {
        font-size: 6.8px;

        letter-spacing: 1px;

        padding:
            5px
            6px;

        margin-bottom: 8px;
    }

    .hero-content .eyebrow::before,
    .hero-content .eyebrow::after {
        width: 7px;
    }


    .hero-content h1 {
        font-size: 29px;

        line-height: 1.02;

        margin-bottom: 8px;
    }


    .hero-content .hero-sub {
        font-size: 10px;

        line-height: 1.35;

        margin-bottom: 8px;
    }


    .hero-product-search-wrap {
        padding-left: 9px;
    }

    .hero-product-search-input {
        font-size: 10px;
    }

    .hero-product-search-wrap button {
        width: 34px;

        height: 34px;
    }


    .hero-ctas {
        margin-top: 8px;
    }

    .btn-primary,
    .btn-secondary {
        padding:
            9px
            12px;

        font-size: 9px;
    }
}
      /* ============ SECTION GENERIC ============ */
      section {
        position: relative;
      }
      
      @media (max-width: 768px) {
        .section-pad {
          padding: 60px 0;
        }
      }
      .section-head {
        max-width: 640px;
        margin-bottom: 70px;
      }
      .section-head .eyebrow {
        margin-bottom: 16px;
        display: block;
      }
      .section-head h2 {
        font-size: clamp(30px, 4vw, 50px);
        line-height: 1.14;
      }
      .section-head p {
        margin-top: 20px;
        color: var(--graphite);
        font-size: 16px;
        line-height: 1.75;
      }
      .center {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }

/*--------------------- Arrival Section ------------------------------*/
.arrivals-section{

    background:#faf8f5;
}

.arrival-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;
}

.arrival-card{

    background:#fff;

    border-radius:0px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.45s;
}

.arrival-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.arrival-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;
}

.arrival-card:hover img{

    transform:scale(1.08);
}

.arrival-content{

    padding:25px;
}

.arrival-content span{

    color:#C8A165;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;
}

.arrival-content h3{

    margin:12px 0;

    font-size:24px;

    font-family:var(--serif);
}

.arrival-content a{

    color:#111;

    text-decoration:none;

    font-weight:600;
}

.arrival-content a:hover{

    color:#C8A165;
}

@media(max-width:992px){

.arrival-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.arrival-grid{

grid-template-columns:1fr;

}

}
      /* ============ STORY-PIN: CATEGORY CARDS THAT MORPH INTO THE MERGED COMPOSITION ============ */
      .story-pin {
        position: relative;
        background: var(--warm-white);
        height: 100vh;
        overflow: hidden;
      }
      .story-inner {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 60px;
      }
      .story-head {
        position: relative;
        z-index: 3;
        margin-bottom: 56px;
      }
      .story-card{

    position:relative;

    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    flex:1;

    box-shadow:
        0 18px 35px rgba(0,0,0,.12),
        0 40px 90px rgba(0,0,0,.18);

    transform-style:preserve-3d;

    background:#fff;

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}
      /* on desktop the 3 cards sit side by side until JS switches them to position:absolute for the morph */
      
      @media (max-width: 900px) {
        .story-stage {
          display: flex;
          flex-direction: column;
          gap: 26px;
          height: auto;
        }
        .story-card {
          height: 420px;
        }
        .story-featured {
          display: none;
        }
      }
     @media (min-width:901px){

.story-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
}

.story-card{
    flex:1 1 0;
    height:430px;
}

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

}
      .story-card .stone-surface{

    position:absolute;
    inset:0;

    background-size:cover !important;
    background-position:center !important;

    transition:transform .8s ease;

}

.story-card:hover .stone-surface{

    transform:scale(1.08);

}
.story-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        125deg,
        rgba(255,255,255,.22),
        transparent 28%,
        transparent 68%,
        rgba(0,0,0,.18)
    );

    z-index:1;

    pointer-events:none;

}
.story-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 35%,
            rgba(0,0,0,.55) 100%
        );

    z-index:2;

}
.cat-card-label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 34px;
        z-index: 5;
        color: #fff;
        transition: opacity 0.3s var(--ease);
      }
     .story-card:hover{
    transform:
        translateY(-8px)
        rotate(-0.5deg);
}
      .cat-card-label .eyebrow {
        color: rgba(255, 255, 255, 0.7);
      }
      .cat-card-label h3 {
        color: #fff;
        font-size: 30px;
        margin-top: 8px;
      }
      .cat-card-arrow {
        position: absolute;
        top: 28px;
        right: 28px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: all 0.4s var(--ease);
        z-index: 2;
      }
      .story-card:hover .cat-card-arrow {
        background: #fff;
        color: var(--charcoal);
        transform: rotate(45deg);
      }
      .story-target {
        position: absolute;
        visibility: hidden;
        pointer-events: none;
      }
    .story-stage{
    position:relative;
    width:100%;
    max-width:1320px;
    margin:0 auto;
    height:650px;
    perspective:1800px;
}

/* Final merge positions */
#targetFrame{
    width:42%;
    height:82%;

    left:0;
    top:8%;

    transform:rotate(-5deg);
}

#targetSlab{
    width:30%;
    height:62%;

    left:8%;
    top:18%;

    transform:rotate(3deg);
}

#targetSculpture{
    width:14%;
    height:26%;

    left:17%;
    top:37%;

    transform:rotate(-4deg);
}
.story-featured{

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:44%;

    z-index:20;

}
.story-featured h2 {
        margin-top: 10px !important;
        margin-bottom: 14px !important;
        line-height: 1.15;
      }
     
      .featured-list {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .featured-list {
    width: 100%;
}


/* PRODUCT ROW */

.feat-row {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 0;

    border-bottom: 1px solid rgba(22,22,21,.12);

    color: var(--charcoal);
    text-decoration: none;

    transition:
        opacity .4s ease,
        transform .5s var(--ease),
        max-height .5s ease,
        padding .5s ease;
}

.fr-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fr-num {
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--gold);
    min-width: 28px;
}

.feat-row h4 {
    margin: 0;

    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;

    transition: color .3s ease;
}

.fr-desc {
    margin-top: 5px;

    color: var(--warm-grey);

    font-size: 12px;
    line-height: 1.5;

    transition: opacity .3s ease;
}

.fr-arrow {
    width: 38px;
    height: 38px;

    border: 1px solid var(--line);
    border-radius: 50%;

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

    transition:
        transform .4s var(--ease),
        background .3s ease,
        color .3s ease;
}

.feat-row:hover h4 {
    color: var(--gold);
}

.feat-row:hover .fr-arrow {
    background: var(--charcoal);
    color: #fff;

    transform: rotate(45deg);
}


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

.featured-product-preview {

    position: relative;

    width: 100%;
    height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        height .55s var(--ease),
        opacity .4s ease;

    border-radius: 10px;

    margin: 0;
}

.featured-product-preview img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transform: scale(1.08);

    transition: transform .8s var(--ease);
}

.featured-product-preview.active {
    height: 230px;

    opacity: 1;

    margin: 8px 0 12px;
}

.featured-product-preview.active img {
    transform: scale(1);
}


/* IMAGE DARK OVERLAY */

.featured-product-preview::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55),
            rgba(0,0,0,.05)
        );

    pointer-events: none;
}


/* IMAGE TEXT */

.preview-content {

    position: absolute;

    z-index: 2;

    left: 25px;
    bottom: 22px;

    color: #fff;
}

.preview-content span {

    font-size: 10px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--gold-bright);
}

.preview-content h3 {

    margin: 5px 0 0;

    font-family: var(--serif);

    font-size: 27px;

    font-weight: 500;
}


/* ==============================
   HOVER STATE
============================== */

.featured-list.has-hover .feat-row:not(.active) {

    max-height: 0;

    padding-top: 0;
    padding-bottom: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(-8px);

    border: 0;
}


/* Active row */

.featured-list.has-hover .feat-row.active {

    opacity: 1;

    background: rgba(173,138,85,.04);

    padding-left: 10px;
    padding-right: 10px;

    border-radius: 8px;
}
    
      .feat-row:hover {
        padding-left: 10px;
      }
      .feat-row .fr-left {
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .feat-row .fr-num {
        font-size: 12px;
        color: var(--warm-grey);
        font-family: var(--sans);
      }
      .feat-row h4 {
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.15;
        margin: 0;
      }
      .feat-row .fr-desc {
        color: var(--warm-grey);
        font-size: 12px;
        margin-top: 2px;
        line-height: 1.35;
      }
      .feat-row .fr-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.35s var(--ease);
        flex: none;
        font-size: 14px;
      }
      .feat-row:hover .fr-arrow {
        background: var(--charcoal);
        border-color: var(--charcoal);
        color: #fff;
        transform: rotate(45deg);
      }
      .view-collection {
        margin-top: 18px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--charcoal);
        padding-bottom: 3px;
        width: fit-content;
      }
      /* product hover preview */



.feat-row.hide-item{

    opacity:.2;

    transform:translateX(20px);

}


.feat-row.active-item{

    opacity:1;

}
.featured-product-preview{
    pointer-events: none;
}
.featured-list.is-clicking .feat-row,
.featured-list.is-clicking .featured-product-preview{
    transition: none !important;
}





      /* ============ ABOUT ============ */
      .about-section {
        background: var(--warm-white);
      }
      .about-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 70px;
        align-items: start;
      }
      @media (max-width: 960px) {
        .about-grid {
          grid-template-columns: 1fr;
        }
      }
      .about-copy h2 {
        font-size: clamp(32px, 4.4vw, 54px);
        line-height: 1.16;
      }
      .about-copy p {
        margin-top: 26px;
        color: var(--graphite);
        font-size: 16px;
        line-height: 1.8;
        max-width: 520px;
      }
      .stat-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin-top: 56px;
      }
      .stat {
        border-top: 1px solid var(--line);
        padding-top: 18px;
      }
      .stat .num {
        font-family: var(--serif);
        font-size: 42px;
        color: var(--charcoal);
      }
      .stat .lbl {
        font-size: 12.5px;
        color: var(--warm-grey);
        margin-top: 6px;
        letter-spacing: 0.02em;
      }
      .about-visual {
        position: relative;
        height: 640px;
        border-radius: 6px;
        overflow: hidden;
      }
      .about-visual .stone-surface {
        position: absolute;
        inset: 0;
      }
      .about-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(10px);
        padding: 22px 26px;
      }
      .about-caption .eyebrow {
        margin-bottom: 6px;
      }

      /* ============ WHY CHOOSE ============ */
    /* WHY SECTION */
.why-section{
    background:var(--ivory);
    padding:100px 0;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
}

/* CARD */
.why-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:34px 28px;
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    opacity:1;
    transition:.35s ease;
    overflow:hidden;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.08);
}

/* ICON */
.why-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    background:rgba(182,138,71,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    flex-shrink:0;
}

.why-icon i{
    font-size:34px;
    color:black;
}

/* TITLE */
.why-card h3{
    font-family:var(--serif);
    font-size:clamp(28px,2vw,40px);
    line-height:1.1;
    margin:0 0 18px;
    color:var(--charcoal);
}

/* TEXT */
.why-card p{
    font-size:16px;
    line-height:1.8;
    color:var(--warm-grey);
    margin:0;
}

/* SECTION HEADING */
.section-why h2{
    color:#111;
}

/* ---------- TABLET ---------- */
@media (max-width:991px){

    .why-section{
        padding:80px 0;
    }

    .why-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .why-card{
        min-height:280px;
        padding:28px 22px;
    }

    .why-card h3{
        font-size:32px;
    }

    .why-card p{
        font-size:15px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width:576px){

    .why-section{
        padding:60px 0;
    }

    .why-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .why-card{
        min-height:auto;
        padding:24px 20px;
        border-radius:22px;
    }

    .why-icon{
        width:60px;
        height:60px;
        margin-bottom:20px;
    }

    .why-icon i{
        font-size:28px;
    }

    .why-card h3{
        font-size:24px;
        margin-bottom:14px;
    }

    .why-card p{
        font-size:15px;
        line-height:1.7;
    }
}

      /* ============ PROCESS — ZIGZAG FLOW TIMELINE (no boxes, no pin) ============ */
      .process-section {
        background: var(--charcoal);
        color: var(--warm-white);
      }
      .process-section .section-head h2,
      .process-section .section-head .eyebrow {
        color: var(--warm-white);
      }
      .process-section .eyebrow {
        color: var(--gold);
      }
      .process-section .section-head p {
        color: rgba(255, 255, 255, 0.55);
      }

       .process{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:100px auto;

    max-width:1200px;
        background:#151515;

}


.step{
    position:relative;
    z-index:2;
    text-align:center;
}

.circle{
    position:relative;   /* important */
    width:72px;
    height:72px;
    border-radius:50%;
    background:#1d1d1d;
    border:2px solid #c8a165;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    overflow:visible;
}

/* Popup */
.popup{
    position:absolute;

    top:50%;
    left:50%;

    width:230px;
    min-height:230px;

    transform:translate(-50%,-50%) scale(.6);

    border-radius:50%;
    background:rgba(28,28,28,.97);

    border:2px solid #c8a165;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    padding:28px;

    opacity:0;
    visibility:hidden;

    transition:.4s cubic-bezier(.2,.8,.2,1);

    z-index:20;
}

.popup h4{
    color:#fff;
    margin-bottom:12px;
    font-size:26px;
}

.popup p{
    color:rgba(255,255,255,.82);
    line-height:1.6;
    font-size:14px;
}

.popup::after{
    display:none;
}

/* Hover */
.step:hover .popup{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.step:hover .circle{
    opacity:0;
    transform:scale(.4);
}

.circle svg{

    width:34px;
    height:34px;

    stroke:#c8a165;
    fill:none;
}
.circle i{

    font-size:22px;

    color:#C8A165;
}

.step span{

    display:block;

    margin-top:15px;

    font-size:15px;

    font-weight:600;
}
.step .circle svg {
    width: 25px;
    height: 25px;
    display: block;
}
/* =========================================================
   CUTTING PNG ICON
========================================================= */

.cutting-icon {
    width: 25px;
    height: 25px;

    display: block;
    object-fit: contain;

    /* Black PNG → Gold */
    filter:
        invert(67%)
        sepia(32%)
        saturate(650%)
        hue-rotate(355deg)
        brightness(90%)
        contrast(90%);
}
.circle:hover{

    transform:scale(1.15);

    background:#C8A165;
}

.circle:hover i{

    color:#fff;
}


.section-head h2{

    color:black;

    font-size:54px;
}

.section-head p{

    color:#999;
}

.eyebrow{

    color:#c8a165;
}



.process::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
            rgba(201,162,95,.08),
            transparent 45%),
        radial-gradient(circle at bottom left,
            rgba(255,255,255,.03),
            transparent 40%);
}


.step:hover svg{

    stroke:#fff;
}
.process-line{
    position:absolute;
    top:55px;
    left:5%;
    right:5%;
    height:2px;
    background:linear-gradient(
        90deg,
        #c8a165,
        #f2d18b,
        #c8a165
    );
}
/* ===============================
   TABLET (991px and below)
================================= */
@media (max-width:991px){

    .process{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:50px 30px;
        margin:70px auto;
        padding:20px 10px;
        background:transparent;
    }

    .process-line{
        display:none;
    }

    .step{
        text-align:center;
    }

    .circle{
        margin:0 auto;
        width:68px;
        height:68px;
    }

    .circle svg{
        width:30px;
        height:30px;
    }

    .step span{
        font-size:15px;
        margin-top:14px;
    }

    /* Popup becomes normal card */
    .popup{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        opacity:1;
        visibility:visible;
        width:100%;
        min-height:auto;
        border-radius:22px;
        margin-top:16px;
        padding:22px;
        background:#1c1c1c;
    }

    .popup h4{
        font-size:20px;
        margin-bottom:10px;
    }

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

    .step:hover .circle{
        opacity:1;
        transform:none;
    }

    .step:hover .popup{
        transform:none;
    }
}

/* ===============================
   MOBILE (576px and below)
================================= */
@media (max-width:576px){

    .process-section{
        padding:70px 0;
    }

    .process{
        display:flex;
        flex-direction:column;
        gap:30px;
        margin:50px auto;
        position:relative;
        padding-left:18px;
    }

    /* Vertical timeline line */
    .process::after{
        content:"";
        position:absolute;
        left:34px;
        top:20px;
        bottom:20px;
        width:2px;
        background:linear-gradient(180deg,#C8A165,#F2D18B,#C8A165);
    }

    .process-line{
        display:none;
    }

    .step{
        display:flex;
        align-items:flex-start;
        gap:18px;
        text-align:left;
        position:relative;
        z-index:2;
    }

    .circle{
        width:52px;
        height:52px;
        flex-shrink:0;
        background:#1d1d1d;
        border:2px solid #C8A165;
    }

    .circle svg{
        width:24px;
        height:24px;
    }

    .step span{
        display:none; /* title popup card me hai */
    }

    .popup{
        position:relative;
        width:100%;
        min-height:auto;
        transform:none;
        opacity:1;
        visibility:visible;
        border-radius:18px;
        margin:0;
        padding:18px;
        text-align:left;
    }

    .popup h4{
        font-size:18px;
        margin-bottom:8px;
    }

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

    .step:hover .circle{
        opacity:1;
        transform:none;
    }

    .step:hover .popup{
        transform:none;
    }

    .section-head h2{
        font-size:36px;
    }

    .section-head p{
        font-size:15px;
        line-height:1.7;
    }
}
      /* ============ COLLECTIONS MASONRY ============ */
      .masonry {
        columns: 3 300px;
        column-gap: 22px;
      }
      @media (max-width: 900px) {
        .masonry {
          columns: 2 220px;
        }
      }
      .masonry-item {
        break-inside: avoid;
        margin-bottom: 22px;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
      }
      .masonry-item .stone-surface {
        transition: transform 1s var(--ease);
      }
      .masonry-item:hover {
        box-shadow: 0 30px 60px rgba(22, 22, 21, 0.14);
      }
      .masonry-cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        color: #fff;
        z-index: 2;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(15, 13, 12, 0.72)
        );
      }
      .masonry-cap span {
        font-size: 12px;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.7);
      }
      .masonry-cap h4 {
        font-family: var(--serif);
        font-size: 19px;
        font-weight: 400;
        margin-top: 4px;
      }

      /* ============ PROJECTS ============ */
      .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
      }
      @media (max-width: 900px) {
        .projects-grid {
          grid-template-columns: 1fr;
        }
      }
      .project-card {
        position: relative;
        height: 440px;
        border-radius: 6px;
        overflow: hidden;
      }
      .project-card .stone-surface {
        position: absolute;
        inset: 0;
        transition: transform 1s var(--ease);
      }
      .project-card:hover .project-tag {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff;
      }
      .project-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 45%,
          rgba(15, 13, 12, 0.7)
        );
      }
      .project-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 32px;
        color: #fff;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .project-info h4 {
        color: #fff;
        font-size: 26px;
        font-family: var(--serif);
      }
      .project-info span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 0.05em;
      }
      .project-tag {
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 11px;
        letter-spacing: 0.05em;
        transition: all 0.35s var(--ease);
      }

      /* ============ HISTORY TIMELINE ============ */
      .history-section{
    background:#f8f6f2;
    padding:100px 0;
}

.timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:80px;
    gap:30px;
}

.timeline-line{
    position:absolute;
    top:58px;              /* Dot ke center par line */
    left:8%;
    width:84%;
    height:3px;
    background:#c8a165;
    z-index:1;
}

.tl-item{
    flex:1;
    position:relative;
    text-align:center;
    z-index:2;
}

.tl-dot{
    width:20px;
    height:20px;
    margin:20px auto 0;
    border-radius:50%;
    background:#fff;
    border:4px solid #c8a165;
    position:relative;
    z-index:3;
}
.tl-year{

    font-family:var(--serif);

    font-size:28px;

    color:#c8a165;

    margin-bottom:18px;
}


.tl-card{

    margin-top:35px;

    padding:25px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.4s;
}

.tl-card h4{

    font-size:22px;

    margin-bottom:12px;
}

.tl-card p{

    color:#666;

    line-height:1.7;

    font-size:14px;
}

.tl-item:hover .tl-card{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.tl-item:hover .tl-dot{

    transform:scale(1.3);

    background:#c8a165;
}
@media(max-width:992px){

.timeline{

    flex-direction:column;

    align-items:center;
}

.timeline-line{

    display:none;
}

.tl-item{

    width:100%;

    max-width:420px;

    margin-bottom:40px;
}

}

      /* ============ BLOGS ============ */
      /*=============================
HOME BLOG
==============================*/

.home-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

@media(max-width:991px){
.home-blog-grid{
    grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.home-blog-grid{
    grid-template-columns:1fr;
}
}

.home-blog-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    transition:.4s var(--ease);
    display:flex;
    flex-direction:column;
    height:100%;
}

.home-blog-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(0,0,0,.12);
}

.home-blog-image{
    display:block;
    overflow:hidden;
}

.home-blog-image .stone-surface{
    height:260px;
    transition:transform .7s ease;
}

.home-blog-card:hover .stone-surface{
    transform:scale(1.06);
}

.home-blog-body{
    padding:26px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.home-blog-meta{
    display:flex;
    gap:18px;
    margin-bottom:18px;
    color:var(--gold);
    font-size:12px;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:600;
}

.home-blog-body h4{
    font-family:var(--serif);
    font-size:30px;
    line-height:1.25;
    margin:0 0 16px;
}

.home-blog-body h4 a{
    color:var(--charcoal);
    text-decoration:none;
}

.home-blog-body p{
    color:var(--warm-grey);
    font-size:15px;
    line-height:1.8;
    margin:0;
}

.home-blog-link{
    margin-top:auto;
    padding-top:24px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--gold);
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.home-blog-link:hover{
    letter-spacing:.04em;
}

      /* ============ TESTIMONIALS ============ */
   /* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testi-section{
    width:100%;
    background:#F8F6F2;
    padding:45px 0 40px;
    overflow:hidden;
}


/* =========================================================
   WRAPPER
========================================================= */

.testi-section .wrap{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
}


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

.testi-section .section-head{
    text-align:center;
    margin-bottom:24px;
}

.testi-section .eyebrow{
    display:block;
    color:#B68A4A;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.testi-section h2{
    margin:0;

    font-family:var(--serif);

    font-size:clamp(30px,4vw,46px);
    line-height:1.15;

    color:#171513;
}

.testi-intro{
    max-width:600px;

    margin:8px auto 0;

    color:#777;

    font-size:13px;
    line-height:1.6;
}


/* =========================================================
   HORIZONTAL SLIDER
========================================================= */

.testi-slider{
    width:100%;

    overflow:hidden;

    position:relative;

    margin-bottom:32px;

    mask-image:linear-gradient(
        to right,
        transparent 0,
        black 5%,
        black 95%,
        transparent 100%
    );

    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0,
        black 5%,
        black 95%,
        transparent 100%
    );
}


/* =========================================================
   TRACK
========================================================= */

.testi-track{
    display:flex;

    width:max-content;

    gap:16px;

    animation:testimonialScroll 35s linear infinite;
}

.testi-slider:hover .testi-track{
    animation-play-state:paused;
}


/* =========================================================
   AUTO SCROLL
========================================================= */

@keyframes testimonialScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(
            calc(-50% - 8px)
        );
    }

}


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

.testimonial-card{
    width:330px;
    min-width:330px;

    background:#fff;

    border:1px solid rgba(0,0,0,.07);

    border-radius:17px;

    padding:17px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.testimonial-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.07);
}


/* =========================================================
   TESTIMONIAL HEADER
========================================================= */

.t-head{
    display:flex;

    align-items:center;

    gap:11px;
}


/* =========================================================
   AVATAR
========================================================= */

.avatar{
    width:44px;
    height:44px;

    min-width:44px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

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

    color:#fff;

    font-size:16px;

    font-weight:700;
}

.avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* =========================================================
   CLIENT INFO
========================================================= */

.t-info{
    min-width:0;
}

.t-info h4{
    margin:0 0 2px;

    color:#171513;

    font-family:var(--serif);

    font-size:16px;

    line-height:1.3;
}

.t-info span{
    display:block;

    color:#81786e;

    font-size:11.5px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* =========================================================
   STARS
========================================================= */

.stars{
    display:flex;

    gap:3px;

    margin:10px 0 7px;
}

.stars i{
    font-size:12px;

    color:#D9D1C5;
}

.stars i.active{
    color:#C89A52;
}


/* =========================================================
   REVIEW
========================================================= */

.review-text{
    margin:0;

    color:#5d5751;

    font-size:13px;

    line-height:1.6;

    font-style:italic;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* =========================================================
   SUBMIT REVIEW AREA
========================================================= */

.testi-submit{
    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:38px;

    align-items:start;

    padding:28px 32px;

    background:#fff;

    border:1px solid rgba(0,0,0,.07);

    border-radius:20px;

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


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

.submit-content{
    padding-top:2px;
}

.submit-content h3{
    margin:6px 0 9px;

    color:#171513;

    font-family:var(--serif);

    font-size:clamp(27px,3vw,38px);

    line-height:1.15;
}

.submit-content p{
    margin:0;

    max-width:470px;

    color:#777;

    font-size:13px;

    line-height:1.6;
}


/* =========================================================
   REVIEW POINTS
========================================================= */

.review-points{
    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:16px;
}

.review-points span{
    display:flex;

    align-items:center;

    gap:9px;

    color:#70685f;

    font-size:12px;
}

.review-points i{
    width:19px;
    height:19px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#F1E7D6;

    color:#B68A4A;

    font-size:8px;
}


/* =========================================================
   FORM
========================================================= */

.testi-form{
    width:100%;
}

.form-row{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:11px;
}

.form-group{
    margin-bottom:10px;
}

.form-group label{
    display:block;

    margin-bottom:5px;

    color:#25211d;

    font-size:11px;

    font-weight:600;
}

.form-group label small{
    color:#999;

    font-weight:400;
}


/* =========================================================
   INPUTS
========================================================= */

.testi-form input,
.testi-form select,
.testi-form textarea{

    width:100%;

    border:1px solid #ddd6ce;

    background:#FCFBF9;

    border-radius:9px;

    padding:10px 12px;

    color:#292521;

    font-size:12.5px;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.testi-form input,
.testi-form select{
    height:42px;
}

.testi-form textarea{
    min-height:85px;

    resize:vertical;
}

.testi-form input::placeholder,
.testi-form textarea::placeholder{
    color:#aaa29a;
}

.testi-form input:focus,
.testi-form select:focus,
.testi-form textarea:focus{

    border-color:#C89A52;

    box-shadow:
        0 0 0 3px rgba(200,154,82,.10);
}


/* =========================================================
   FILE INPUT
========================================================= */

.testi-form input[type="file"]{
    padding:7px 9px;

    cursor:pointer;
}


/* =========================================================
   BUTTON
========================================================= */

.testi-form button{

    width:100%;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:0;

    border-radius:999px;

    background:#171513;

    color:#fff;

    font-size:12.5px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.testi-form button:hover{
    background:#B68A4A;

    transform:translateY(-2px);
}

.testi-form button i{
    font-size:10px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .testi-section{
        padding:40px 0 35px;
    }

    .testi-submit{
        grid-template-columns:1fr;

        gap:24px;

        padding:25px;
    }

    .submit-content p{
        max-width:650px;
    }

}


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

@media(max-width:600px){

    .testi-section{
        padding:35px 0 30px;
    }

    .testi-section .wrap{
        width:calc(100% - 28px);
    }

    .testi-section .section-head{
        margin-bottom:22px;
    }

    .testi-section .eyebrow{
        font-size:11px;

        letter-spacing:2.5px;

        margin-bottom:6px;
    }

    .testi-section h2{
        font-size:30px;
    }

    .testi-intro{
        font-size:12.5px;
    }


    /* =========================================
       HORIZONTAL REVIEWS
    ========================================= */

    .testi-slider{
        margin-bottom:25px;

        mask-image:none;

        -webkit-mask-image:none;
    }

    .testi-track{
        gap:10px;

        animation-duration:30s;
    }

    .testimonial-card{
        width:285px;

        min-width:285px;

        padding:15px;

        border-radius:15px;
    }


    /* =========================================
       SUBMIT AREA
    ========================================= */

    .testi-submit{
        display:block;

        padding:21px 17px;

        border-radius:17px;
    }

    .submit-content{
        margin-bottom:20px;
    }

    .submit-content h3{
        font-size:27px;

        margin-bottom:8px;
    }

    .submit-content p{
        font-size:12.5px;
    }


    /* =========================================
       FORM
    ========================================= */

    .form-row{
        grid-template-columns:1fr;

        gap:0;
    }

    .form-group{
        margin-bottom:10px;
    }

}


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

@media(max-width:400px){

    .testi-section{
        padding:30px 0 27px;
    }

    .testi-section .wrap{
        width:calc(100% - 22px);
    }

    .testi-section h2{
        font-size:27px;
    }

    .testi-slider{
        margin-bottom:22px;
    }

    .testimonial-card{
        width:270px;

        min-width:270px;

        padding:14px;
    }

    .testi-submit{
        padding:18px 14px;
    }

    .submit-content h3{
        font-size:25px;
    }

}
/* =========================================================
   TESTIMONIAL SUCCESS MESSAGE
========================================================= */

.testi-success{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:20px;
    padding:14px 16px;

    background:#f7f3eb;
    border:1px solid rgba(182,138,74,.35);
    border-radius:12px;

    color:#5f513f;
}

.testi-success > i{
    flex-shrink:0;

    margin-top:2px;

    font-size:18px;
    color:#B68A4A;
}

.testi-success strong{
    display:block;

    margin-bottom:3px;

    font-size:14px;
    color:#171513;
}

.testi-success span{
    display:block;

    font-size:13px;
    line-height:1.5;
    color:#756b60;
}


/* Mobile */

@media(max-width:600px){

    .testi-success{
        padding:12px 14px;
        gap:10px;
        margin-bottom:16px;
    }

    .testi-success > i{
        font-size:16px;
    }

    .testi-success strong{
        font-size:13px;
    }

    .testi-success span{
        font-size:12px;
    }
}
      /* ============ GLOBAL PRESENCE ============ */
      .global-section {
        background: var(--charcoal);
        color: var(--warm-white);
      }
      .global-section .eyebrow {
        color: var(--gold);
      }
      .global-section h2 {
        color: var(--warm-white);
      }
      .map-wrap {
        position: relative;
        margin-top: 60px;
      }
      .map-svg {
        width: 100%;
        height: auto;
        opacity: 0.5;
      }
      .map-pin {
        position: absolute;
        width: 12px;
        height: 12px;
      }
      .map-pin::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--gold);
      }
      .map-pin::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 1px solid var(--gold);
        opacity: 0.5;
        animation: pulse 2.4s infinite ease-out;
      }
      @keyframes pulse {
        0% {
          transform: scale(0.6);
          opacity: 0.7;
        }
        100% {
          transform: scale(2.4);
          opacity: 0;
        }
      }
      .map-label {
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: 11px;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.75);
        white-space: nowrap;
      }
      .region-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin-top: 50px;
      }
      @media (max-width: 900px) {
        .region-list {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .region-list .r-num {
        font-family: var(--serif);
        font-size: 34px;
        color: var(--gold);
      }
      .region-list .r-lbl {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 6px;
      }

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

.final-cta{
    background:var(--ivory);
    text-align:center;
    padding:90px 0;
}

.final-cta .wrap{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.final-cta .eyebrow{
    display:block;
    margin-bottom:14px;

    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;

    color:var(--gold);
}


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

.final-cta h2{
    max-width:760px;

    margin:0 auto 20px;

    font-size:clamp(32px, 4.5vw, 54px);
    line-height:1.15;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.final-cta p{
    max-width:500px;

    margin:0 auto 30px;

    color:var(--graphite);

    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   BUTTON
========================================================= */

.btn-consult{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:50px;

    padding:0 34px;

    border-radius:36px;

    background:var(--charcoal);
    color:#fff;

    font-size:14px;
    letter-spacing:.04em;

    text-decoration:none;

    transition:
        background .35s ease,
        transform .35s ease;
}

.btn-consult:hover{
    background:var(--gold);
    color:#fff;
    transform:translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .final-cta{
        padding:70px 0;
    }

    .final-cta h2{
        max-width:680px;
        font-size:clamp(30px, 5vw, 46px);
        margin-bottom:18px;
    }

    .final-cta p{
        max-width:470px;
        margin-bottom:26px;
        font-size:14.5px;
    }

    .btn-consult{
        min-height:48px;
        padding:0 30px;
    }
}


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

@media(max-width:600px){

    .final-cta{
        padding:55px 0;
    }

    .final-cta .wrap{
        width:calc(100% - 32px);
    }

    .final-cta .eyebrow{
        margin-bottom:11px;

        font-size:11px;
        letter-spacing:2.3px;
    }

    .final-cta h2{
        max-width:100%;

        margin:0 auto 15px;

        font-size:30px;
        line-height:1.2;
    }

    .final-cta p{
        max-width:100%;

        margin:0 auto 24px;

        font-size:13.5px;
        line-height:1.65;
    }

    .btn-consult{
        width:auto;
        min-height:46px;

        padding:0 26px;

        font-size:13px;
    }
}


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

@media(max-width:400px){

    .final-cta{
        padding:45px 0;
    }

    .final-cta .wrap{
        width:calc(100% - 24px);
    }

    .final-cta .eyebrow{
        font-size:10px;
        letter-spacing:2px;
    }

    .final-cta h2{
        font-size:27px;
    }

    .final-cta p{
        font-size:13px;
        margin-bottom:22px;
    }

    .btn-consult{
        min-height:44px;
        padding:0 22px;
        font-size:12.5px;
    }
}

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

#contact {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #0c0c0c;
    color: rgba(255, 255, 255, 0.72);

    overflow: hidden;
}


/* =========================================================
   WRAPPER
========================================================= */

#contact .wrap {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   FOOTER TOP
========================================================= */

#contact .footer-top {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1.2fr;

    gap: 45px;

    padding: 75px 0 60px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   BRAND
========================================================= */

#contact .footer-brand {
    min-width: 0;
}

#contact .footer-logo {
    display: inline-flex !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center;

    text-decoration: none;
}

#contact .footer-logo img {
    display: block;

    width: 180px;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}

#contact .footer-brand p {
    max-width: 300px;

    margin: 22px 0 0;

    font-size: 14px;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

#contact .footer-col {
    min-width: 0;
}

#contact .footer-col h5 {
    margin: 0 0 20px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.42);
}

#contact .footer-col > a {
    display: block;

    width: fit-content;
    max-width: 100%;

    margin: 0 0 14px;
    padding: 0;

    font-size: 14px;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.72);

    text-decoration: none;

    overflow-wrap: anywhere;

    transition: color .3s ease, transform .3s ease;
}

#contact .footer-col > a:hover {
    color: #C89A52;
    transform: translateX(3px);
}


/* =========================================================
   SOCIAL CONTAINER
========================================================= */

#contact .footer-social {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 10px;

    width: 100%;

    margin: 24px 0 0;
    padding: 0;
}


/* =========================================================
   SOCIAL LINKS
   IMPORTANT: > a prevents footer-col CSS conflict
========================================================= */

#contact .footer-social > a {
    position: relative;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(200, 154, 82, .55) !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #C89A52 !important;

    text-decoration: none !important;

    line-height: 1 !important;

    overflow: hidden !important;

    transform: none;
}


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

#contact .footer-social > a > i {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #C89A52 !important;

    font-size: 15px !important;
    line-height: 1 !important;

    text-align: center;

    transform: none !important;
}


/* =========================================================
   SOCIAL HOVER
========================================================= */

#contact .footer-social > a:hover {
    background: #C89A52 !important;

    border-color: #C89A52 !important;

    color: #111 !important;

    transform: translateY(-3px) !important;
}

#contact .footer-social > a:hover > i {
    color: #111 !important;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

#contact .footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 0;

    font-size: 12.5px;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.4);
}

#contact .footer-bottom span {
    display: block;

    max-width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    #contact .wrap {
        width: calc(100% - 50px);
    }

    #contact .footer-top {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 40px 30px;
    }

    #contact .footer-brand {
        grid-column: 1 / -1;
    }

    #contact .footer-brand p {
        max-width: 500px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {

    #contact .wrap {
        width: calc(100% - 40px);
    }

    #contact .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 40px 30px;

        padding: 60px 0 45px;
    }

    #contact .footer-brand {
        grid-column: 1 / -1;
    }

    #contact .footer-col > a {
        font-size: 13.5px;
    }

    #contact .footer-bottom {
        padding: 22px 0;

        font-size: 12px;
    }

}


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

@media (max-width: 600px) {

    #contact .wrap {
        width: calc(100% - 32px);
    }


    /* FOOTER TOP */

    #contact .footer-top {
        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 48px 0 40px;
    }


    /* BRAND */

    #contact .footer-brand {
        grid-column: auto;
    }

    #contact .footer-logo img {
        width: 140px;
    }

    #contact .footer-brand p {
        max-width: 100%;

        margin-top: 17px;

        font-size: 13px;
        line-height: 1.7;
    }


    /* COLUMNS */

    #contact .footer-col {
        width: 100%;
    }

    #contact .footer-col h5 {
        margin-bottom: 14px;

        font-size: 11px;
    }

    #contact .footer-col > a {
        width: auto;

        margin-bottom: 11px;

        font-size: 13px;
        line-height: 1.6;
    }


    /* SOCIAL */

    #contact .footer-social {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        flex-wrap: wrap;

        gap: 9px;

        width: 100%;

        margin-top: 20px;
    }

    #contact .footer-social > a {
        display: inline-flex !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;

        box-sizing: border-box !important;
    }

    #contact .footer-social > a > i {
        font-size: 14px !important;

        line-height: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #C89A52 !important;
    }


    /* BOTTOM */

    #contact .footer-bottom {
        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 7px;

        padding: 20px 0;

        font-size: 11.5px;

        line-height: 1.65;

        text-align: left;
    }

    #contact .footer-bottom span {
        width: 100%;
    }

}


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

@media (max-width: 400px) {

    #contact .wrap {
        width: calc(100% - 24px);
    }

    #contact .footer-top {
        gap: 27px;

        padding-top: 42px;
        padding-bottom: 32px;
    }

    #contact .footer-logo img {
        width: 130px;
    }

    #contact .footer-brand p {
        font-size: 12.5px;
    }

    #contact .footer-col h5 {
        font-size: 10.5px;
    }

    #contact .footer-col > a {
        font-size: 12.5px;
    }

    #contact .footer-social {
        gap: 8px;
    }

    #contact .footer-social > a {
        flex-basis: 38px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    #contact .footer-social > a > i {
        font-size: 13px !important;
    }

    #contact .footer-bottom {
        font-size: 11px;
    }

}

/* =========================
   NEWSLETTER SECTION
========================= */

.newsletter-section {
    background: #f7f4ef;
    border-top: 1px solid #e6d8c5;
    border-bottom: 1px solid #e6d8c5;
    padding: 55px 0;
}

.newsletter-section .wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.newsletter-icon {
    width: 90px;
    height: 90px;
    min-width: 90px;
    border: 1px solid #c49a5a;
    border-radius: 50%;

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

    color: #b68a47;
    font-size: 36px;
}

.newsletter-content {
    flex: 1;
}

.newsletter-eyebrow {
    display: block;
    color: #b68a47;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.newsletter-content h2 {
    margin: 0 0 8px;
    color: #171717;
    font-size: 28px;
    font-weight: 500;
}

.newsletter-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.newsletter-form {
    display: flex;
    width: 500px;
    max-width: 100%;
}

.newsletter-form input {
    flex: 1;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #d5d0c8;
    background: #fff;
    color: #222;
    outline: none;
    font-size: 14px;
}

.newsletter-form input::placeholder {
    color: #888;
}

.newsletter-form button {
    height: 52px;
    padding: 0 30px;
    border: none;
    background: #b68a47;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.newsletter-form button:hover {
    background: #9d7339;
}


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

.newsletter-success {
    margin: 0 auto 22px;
    width: fit-content;
    max-width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 11px 20px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    color: #8a6528;
    background: #f6ecd9;
    border: 1px solid #d8b36b;
    border-radius: 6px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);

    animation: newsletterFade .4s ease;
}

.newsletter-success i {
    font-size: 17px;
    color: #b68a47;
    flex-shrink: 0;
}

.newsletter-error {
    margin: 0 auto 22px;
    width: fit-content;
    max-width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 11px 20px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    color: #a33d3d;
    background: #fae9e9;
    border: 1px solid #dfaaaa;
    border-radius: 6px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.newsletter-error i {
    font-size: 17px;
}

@keyframes newsletterFade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Mobile */

@media (max-width: 768px) {

    .newsletter-section {
        padding: 40px 20px;
    }

    .newsletter-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
        .newsletter-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
        font-size: 26px;
    }


    .newsletter-content h2 {
        font-size: 24px;
    }

    .newsletter-form {
        width: 100%;
    }

    .newsletter-form input {
        min-width: 0;
    }

    .newsletter-form button {
        padding: 0 20px;
    }
}
      /* ============ MISC ============ */
      ::selection {
        background: var(--gold);
        color: #fff;
      }
      .icon {
        width: 16px;
        height: 16px;
      }
      
      
      
      
      
    .about-hero{
    position:relative;
    min-height:560px;
    height:60vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.about-hero-bg{
    position:absolute;
    inset:0;
}

.about-hero-bg img,
.about-hero-bg video{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:kenBurns 12s ease forwards;
}

.about-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.18),
        rgba(0,0,0,.55)
    );
}

.about-hero .wrap{
    position:relative;
    z-index:2;
    width:100%;
}

.about-hero-content{
    max-width:720px;
    padding-top:80px;      /* Header ke niche space */
    color:#fff;
}

.about-hero .eyebrow{
    color:var(--gold-bright);
    letter-spacing:4px;
    margin-bottom:18px;
    display:block;
}

.about-hero h1{
    font-size:clamp(42px,5vw,68px);
    line-height:1.1;
    margin-bottom:22px;
    color:#fff;
}

.about-hero p{
    max-width:620px;
    font-size:17px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
}

.about-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:35px;
    font-size:14px;
    color:rgba(255,255,255,.8);
}

.about-breadcrumb a:hover{
    color:var(--gold-bright);
}

@media (max-width:768px){

    .about-hero{
        height:auto;
        min-height:480px;
    }

    .about-hero-content{
        padding-top:110px;
        padding-bottom:60px;
    }

    .about-hero h1{
        font-size:38px;
    }

    .about-hero p{
        font-size:16px;
    }

}
.company-story{
    padding:130px 0;
    background:#fff;
}

.company-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.company-image{
    position:relative;
}

.company-image img{
    width:100%;
    border-radius:20px;
    display:block;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
}

.experience-card{
    position:absolute;
    right:-40px;
    bottom:40px;
    background:#fff;
    padding:34px;
    border-radius:18px;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
    text-align:center;
}

.experience-card h2{
    color:var(--gold);
    font-size:44px;
    margin:0;
}

.experience-card span{
    color:var(--warm-grey);
}

.company-content h2{
    font-size:52px;
    margin:18px 0 30px;
}

.company-content p{
    color:var(--graphite);
    line-height:2;
    font-size:17px;
    margin-bottom:28px;
}

.founder{
    margin:50px 0;
    padding-left:26px;
    border-left:3px solid var(--gold);
}

.founder h4{
    margin:0;
    font-size:22px;
}

.founder span{
    color:var(--warm-grey);
}
/* =========================
   Tablet (991px and below)
========================= */
@media (max-width:991px){

    .company-story{
        padding:90px 0;
    }

    .company-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .company-image{
        max-width:700px;
        margin:0 auto;
    }

    .company-image img{
        border-radius:24px;
    }

    .experience-card{
        right:20px;
        bottom:20px;
        padding:24px;
        border-radius:18px;
    }

    .experience-card h2{
        font-size:38px;
    }

    .company-content h2{
        font-size:42px;
        margin:16px 0 24px;
    }

    .company-content p{
        font-size:16px;
        line-height:1.85;
    }

    .founder{
        margin:36px 0;
    }
}

/* =========================
   Mobile (576px and below)
========================= */
@media (max-width:576px){

    .company-story{
        padding:65px 0;
    }

    .company-grid{
        gap:36px;
    }

    .company-image img{
        border-radius:18px;
        box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .experience-card{
        right:12px;
        bottom:12px;
        padding:18px 16px;
        border-radius:14px;
        min-width:110px;
    }

    .experience-card h2{
        font-size:30px;
        line-height:1;
        margin-bottom:6px;
    }

    .experience-card span{
        font-size:12px;
        line-height:1.4;
        display:block;
    }

    .company-content h2{
        font-size:32px;
        line-height:1.15;
        margin:14px 0 20px;
    }

    .company-content p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:22px;
    }

    .founder{
        margin:28px 0;
        padding-left:18px;
        border-left-width:2px;
    }

    .founder h4{
        font-size:18px;
    }

    .founder span{
        font-size:14px;
    }

    .company-content .btn-primary{
        width:100%;
        justify-content:center;
        text-align:center;
    }
}

/* Very Small Phones */
@media (max-width:360px){

    .company-content h2{
        font-size:28px;
    }

    .experience-card{
        padding:14px;
    }

    .experience-card h2{
        font-size:26px;
    }
}

.company-details{
    background:var(--off-white);
}

.story-layout{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:90px;
    align-items:start;
}

.story-side{
    position:sticky;
    top:120px;
}

.story-side h2{
    font-size:42px;
    margin:20px 0;
    line-height:1.15;
}

.story-side p{
    color:var(--graphite);
    line-height:1.9;
}

.story-content{
    background:#fff;
    border-radius:20px;
    padding:60px;
    box-shadow:0 20px 70px rgba(0,0,0,.06);
}

.story-content h2,
.story-content h3{
    font-size:34px;
    margin:55px 0 22px;
    color:var(--charcoal);
}

.story-content h2:first-child,
.story-content h3:first-child{
    margin-top:0;
}

.story-content p{
    font-size:17px;
    line-height:2;
    color:var(--graphite);
    margin-bottom:24px;
}

.story-content ul,
.story-content ol{
    padding-left:22px;
    margin:25px 0 40px;
}

.story-content li{
    margin-bottom:14px;
    color:var(--graphite);
    line-height:1.9;
}

.story-content h3{
    position:relative;
    padding-left:24px;
}

.story-content h3::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold);
}
/* =========================
   TABLET (991px and below)
========================= */
@media (max-width:991px){

    .company-details{
        padding:90px 0;
    }

    .story-layout{
        grid-template-columns:1fr;
        gap:45px;
    }

    .story-side{
        position:static;
        max-width:700px;
    }

    .story-side h2{
        font-size:38px;
        margin:16px 0;
        line-height:1.15;
    }

    .story-side p{
        font-size:16px;
        line-height:1.8;
    }

    .story-content{
        padding:42px;
        border-radius:22px;
    }

    .story-content h2,
    .story-content h3{
        font-size:30px;
        margin:40px 0 18px;
    }

    .story-content p{
        font-size:16px;
        line-height:1.9;
    }
}

/* =========================
   MOBILE (576px and below)
========================= */
@media (max-width:576px){

    .company-details{
        padding:65px 0;
    }

    .story-layout{
        gap:32px;
    }

    .story-side{
        background:#fff;
        padding:24px 20px;
        border-radius:20px;
        box-shadow:0 12px 30px rgba(0,0,0,.05);
    }

    .story-side h2{
        font-size:30px;
        margin:14px 0;
        line-height:1.15;
    }

    .story-side p{
        font-size:15px;
        line-height:1.75;
    }

    .story-content{
        padding:24px 20px;
        border-radius:18px;
        box-shadow:0 12px 35px rgba(0,0,0,.05);
    }

    .story-content h2,
    .story-content h3{
        font-size:24px;
        margin:30px 0 14px;
        padding-left:18px;
    }

    .story-content h3::before{
        width:6px;
        height:6px;
        top:12px;
    }

    .story-content p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:18px;
    }

    .story-content ul,
    .story-content ol{
        padding-left:18px;
        margin:18px 0 24px;
    }

    .story-content li{
        font-size:15px;
        line-height:1.8;
        margin-bottom:10px;
    }
}
.company-stats{
    padding:120px 0;
    background:var(--charcoal);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:28px;
}

.stat-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:48px 24px;
    text-align:center;
    transition:.35s ease;
}

.stat-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 18px 40px rgba(0,0,0,.2);
}

.stat-card .num{
    font-family:var(--serif);
    font-size:clamp(42px,4vw,58px);
    color:var(--gold-bright);
    margin-bottom:14px;
    font-weight:400;
    line-height:1;
}

.stat-card span{
    color:rgba(255,255,255,.82);
    font-size:15px;
    line-height:1.5;
}

/* ---------- Tablet ---------- */
@media (max-width:991px){

    .company-stats{
        padding:90px 0;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

    .stat-card{
        padding:40px 20px;
    }

    .stat-card .num{
        font-size:48px;
    }
}

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

    .company-stats{
        padding:70px 0;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .stat-card{
        padding:28px 16px;
        border-radius:18px;
    }

    .stat-card .num{
        font-size:36px;
        margin-bottom:10px;
    }

    .stat-card span{
        font-size:13px;
    }
}

/* Very small phones */
@media (max-width:360px){

    .stats-grid{
        grid-template-columns:1fr;
    }
}
.manufacturing-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;
}

.manufacturing-image img{
    width:100%;
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
}

.process-card{
    display:flex;
    gap:24px;
    padding:28px;
    margin-bottom:22px;
    background:#fff;
    border-radius:18px;
    border:1px solid var(--line);
    transition:.4s;
}

.process-card:hover{
    transform:translateX(10px);
    border-color:var(--gold);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.process-number{
    width:62px;
    height:62px;
    border-radius:50%;
    background:var(--charcoal);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--serif);
    font-size:22px;
    flex:none;
}

.process-card h3{
    margin-bottom:10px;
}

.process-card p{
    color:var(--graphite);
    line-height:1.8;
}
.why-section{
    background:var(--off-white);
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.why-card{
    background:#fff;
    padding:45px;
    border-radius:22px;
    border:1px solid var(--line);
    transition:.45s;
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:var(--gold);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.why-card img{
    width:64px;
    height:64px;
    object-fit:contain;
    margin-bottom:25px;
}

.why-card h3{
    font-size:28px;
    margin-bottom:15px;
}

.why-card p{
    color:var(--graphite);
    line-height:1.9;
}
/* =========================
   TABLET (991px and below)
========================= */
@media (max-width:991px){

    /* Manufacturing */
    .manufacturing-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .manufacturing-image{
        max-width:700px;
        margin:0 auto;
    }

    .manufacturing-image img{
        border-radius:20px;
    }

    .manufacturing-content{
        width:100%;
    }

    .process-card{
        padding:24px;
        gap:18px;
        margin-bottom:18px;
    }

    .process-number{
        width:56px;
        height:56px;
        font-size:20px;
    }

    .process-card h3{
        font-size:22px;
        margin-bottom:8px;
    }

    .process-card p{
        font-size:15px;
        line-height:1.7;
    }

    /* Why Choose */
    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

    .why-card{
        padding:32px 24px;
    }

    .why-card h3{
        font-size:24px;
    }

    .why-card p{
        font-size:15px;
        line-height:1.7;
    }

    .why-icon{
        width:60px;
        height:60px;
        margin-bottom:20px;
    }

    .why-icon i{
        font-size:30px;
    }
}

/* =========================
   MOBILE (576px and below)
========================= */
@media (max-width:576px){

    .manufacturing-section,
    .why-section{
        padding:70px 0;
    }

    /* Manufacturing */
    .manufacturing-grid{
        gap:32px;
    }

    .manufacturing-image img{
        border-radius:16px;
        box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .process-card{
        padding:18px;
        gap:14px;
        border-radius:16px;
    }

    .process-card:hover{
        transform:none;
    }

    .process-number{
        width:46px;
        height:46px;
        font-size:18px;
        flex-shrink:0;
    }

    .process-card h3{
        font-size:18px;
        line-height:1.3;
    }

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

    /* Why Choose */
    .why-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .why-card{
        padding:24px 20px;
        border-radius:18px;
    }

    .why-card:hover{
        transform:none;
    }

    .why-icon{
        width:54px;
        height:54px;
        border-radius:16px;
        margin-bottom:18px;
    }

    .why-icon i{
        font-size:26px;
    }

    .why-card h3{
        font-size:22px;
        margin-bottom:12px;
    }

    .why-card p{
        font-size:14px;
        line-height:1.7;
    }
}

/* Very Small Phones */
@media (max-width:360px){

    .process-card{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .process-number{
        margin-bottom:8px;
    }

    .why-card h3{
        font-size:20px;
    }
}
.company-timeline{
    background:var(--warm-white);
}

.timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    margin-top:80px;
}

.timeline-line{
    position:absolute;
    top:42px;
    left:0;
    right:0;
    height:2px;
    background:rgba(173,138,85,.25);
}

.timeline-item{
    position:relative;
    text-align:center;
}

.timeline-year{
    font-family:var(--serif);
    color:var(--gold);
    font-size:34px;
    margin-bottom:18px;
}

.timeline-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gold);
    margin:0 auto 28px;
    position:relative;
    z-index:2;
}

.timeline-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:32px 24px;
    transition:.4s;
}

.timeline-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    border-color:var(--gold);
}
/* =========================
   TABLET (991px and below)
========================= */
@media (max-width:991px){

    .company-timeline{
        padding:90px 0;
    }

    .timeline{
        grid-template-columns:repeat(2,1fr);
        gap:40px 28px;
        margin-top:60px;
    }

    .timeline-line{
        display:none;
    }

    .timeline-item{
        text-align:center;
    }

    .timeline-year{
        font-size:30px;
    }

    .timeline-card{
        padding:26px 20px;
    }

    .timeline-card h3{
        font-size:22px;
    }

    .timeline-card p{
        font-size:15px;
        line-height:1.7;
    }
}

/* =========================
   MOBILE (576px and below)
========================= */
@media (max-width:576px){

    .company-timeline{
        padding:70px 0;
    }

    .timeline{
        display:flex;
        flex-direction:column;
        gap:28px;
        margin-top:50px;
        position:relative;
        padding-left:18px;
    }

    /* Vertical Gold Line */
    .timeline::before{
        content:"";
        position:absolute;
        left:32px;
        top:10px;
        bottom:10px;
        width:2px;
        background:linear-gradient(180deg,#C8A165,#F2D18B,#C8A165);
    }

    .timeline-line{
        display:none;
    }

    .timeline-item{
        display:grid;
        grid-template-columns:64px 1fr;
        align-items:start;
        text-align:left;
        position:relative;
        z-index:2;
    }

    .timeline-year{
        grid-column:1 / 3;
        font-size:24px;
        margin:0 0 10px 64px;
    }

    .timeline-dot{
        width:16px;
        height:16px;
        margin:6px auto 0;
        box-shadow:0 0 0 6px rgba(200,161,101,.12);
    }

    .timeline-card{
        padding:20px 18px;
        border-radius:16px;
        box-shadow:0 12px 30px rgba(0,0,0,.05);
    }

    .timeline-card:hover{
        transform:none;
    }

    .timeline-card h3{
        font-size:20px;
        margin-bottom:8px;
    }

    .timeline-card p{
        font-size:14px;
        line-height:1.7;
    }
}

/* Very Small Phones */
@media (max-width:360px){

    .timeline-year{
        font-size:22px;
        margin-left:56px;
    }

    .timeline-item{
        grid-template-columns:56px 1fr;
    }

    .timeline::before{
        left:28px;
    }

    .timeline-dot{
        width:14px;
        height:14px;
    }
}
.founder-section{
    background:#fff;
}

.founder-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:90px;
    align-items:center;
}

.founder-image img{
    width:100%;
    border-radius:22px;
    box-shadow:0 25px 70px rgba(0,0,0,.12);
}

.founder-content h2{
    font-size:48px;
    margin:20px 0 35px;
}

.founder-content blockquote{
    font-size:24px;
    line-height:1.8;
    font-family:var(--serif);
    color:var(--graphite);
    border-left:4px solid var(--gold);
    padding-left:35px;
    margin-bottom:45px;
}

.founder-info h3{
    margin-bottom:8px;
}

.founder-info span{
    color:var(--gold);
}
/* =========================
   TABLET (991px and below)
========================= */
@media (max-width:991px){

    .founder-section{
        padding:90px 0;
    }

    .founder-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .founder-image{
        max-width:520px;
        margin:0 auto;
    }

    .founder-image img{
        border-radius:22px;
    }

    .founder-content{
        text-align:left;
    }

    .founder-content h2{
        font-size:40px;
        line-height:1.15;
        margin:18px 0 28px;
    }

    .founder-content blockquote{
        font-size:20px;
        line-height:1.8;
        padding-left:24px;
        margin-bottom:32px;
    }

    .founder-info h3{
        font-size:22px;
    }
}

/* =========================
   MOBILE (576px and below)
========================= */
@media (max-width:576px){

    .founder-section{
        padding:70px 0;
    }

    .founder-grid{
        gap:30px;
    }

    .founder-image{
        max-width:100%;
    }

    .founder-image img{
        border-radius:18px;
        box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .founder-content h2{
        font-size:30px;
        line-height:1.2;
        margin:14px 0 22px;
    }

    .founder-content blockquote{
        font-size:17px;
        line-height:1.75;
        padding-left:18px;
        border-left-width:3px;
        margin-bottom:26px;
    }

    .founder-info{
        padding-top:16px;
        border-top:1px solid rgba(0,0,0,.08);
    }

    .founder-info h3{
        font-size:20px;
        margin-bottom:6px;
    }

    .founder-info span{
        font-size:14px;
    }
}

/* Very Small Phones */
@media (max-width:360px){

    .founder-content h2{
        font-size:26px;
    }

    .founder-content blockquote{
        font-size:16px;
        padding-left:16px;
    }
}
.export-section{
    background:var(--off-white);
}

.export-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.export-map{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.export-map::before{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    background:radial-gradient(circle, rgba(200,154,82,.18), transparent 70%);
    filter:blur(25px);
    z-index:0;
}

.export-map img{
    position:relative;
    z-index:1;
    width:100%;
    max-width:460px;
    height:auto;
    opacity:.95;
    filter:
        sepia(1)
        saturate(1.3)
        hue-rotate(-10deg)
        brightness(.95)
        drop-shadow(0 25px 45px rgba(182,138,74,.22));
    transition:transform .45s ease;
}

.export-map:hover img{
    transform:scale(1.03);
}

.export-content h2{
    font-size:52px;
    margin:20px 0 30px;
}

.export-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:40px;
}

.export-list div{
    background:#fff;
    padding:18px 22px;
    border-radius:12px;
    border:1px solid var(--line);
}
.premium-cta{
    padding:130px 0;
    background:var(--charcoal);
}

.cta-box{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.cta-box .eyebrow{
    color:var(--gold-bright);
}

.cta-box h2{
    color:#fff;
    font-size:56px;
    margin:22px 0;
}

.cta-box p{
    color:rgba(255,255,255,.75);
    max-width:700px;
    margin:auto;
    line-height:1.9;
}

.cta-buttons{
    margin-top:45px;
    display:flex;
    justify-content:center;
    gap:20px;
}
/* =========================
   TABLET (991px and below)
========================= */
@media (max-width:991px){

    /* Export Section */
    .export-section{
        padding:90px 0;
    }

    .export-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .export-content{
        order:1;
    }

    .export-map{
        order:2;
        max-width:700px;
        margin:0 auto;
    }

    .export-content h2{
        font-size:42px;
        line-height:1.15;
        margin:16px 0 22px;
    }

    .export-content p{
        font-size:16px;
        line-height:1.8;
    }

    .export-list{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
        margin-top:30px;
    }

    .export-list div{
        padding:16px 18px;
    }

    /* Premium CTA */
    .premium-cta{
        padding:90px 0;
    }

    .cta-box h2{
        font-size:42px;
        line-height:1.15;
    }

    .cta-box p{
        font-size:16px;
        line-height:1.8;
    }
}

/* =========================
   MOBILE (576px and below)
========================= */
@media (max-width:576px){

    /* Export */
    .export-section{
        padding:70px 0;
    }

    .export-grid{
        gap:36px;
    }

    .export-content h2{
        font-size:32px;
        line-height:1.2;
        margin:14px 0 18px;
    }

    .export-content p{
        font-size:15px;
        line-height:1.75;
    }

    .export-map{
        background:#fff;
        padding:18px;
        border-radius:18px;
        box-shadow:0 15px 35px rgba(0,0,0,.08);
    }

    .export-map img{
        width:100%;
        display:block;
    }

    .export-list{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:24px;
    }

    .export-list div{
        padding:16px;
        font-size:14px;
        border-radius:14px;
    }

    /* Premium CTA */
    .premium-cta{
        padding:70px 0;
    }

    .cta-box h2{
        font-size:32px;
        line-height:1.15;
        margin:16px 0;
    }

    .cta-box p{
        font-size:15px;
        line-height:1.7;
    }

    .cta-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:30px;
    }

    .cta-buttons a{
        width:100%;
        justify-content:center;
        text-align:center;
    }
}

/* =========================
   Very Small Phones
========================= */
@media (max-width:360px){

    .export-content h2{
        font-size:28px;
    }

    .cta-box h2{
        font-size:28px;
    }

    .export-list div{
        padding:14px;
    }
}
/* ======================================
   PRODUCT HERO
====================================== */
@media (max-width:768px){

.product-hero{
    padding:95px 0 55px;
}

.breadcrumb{
    font-size:13px;
    margin-bottom:18px;
}

}
.product-hero .wrap{
    max-width:1400px;
}
.product-hero{
    padding:120px 0 90px; /* Header ke liye top space */
    background:#F6F3EE;
}

.breadcrumb{
    margin-bottom:28px;
    font-size:20px;
    color:#6E665D;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}

.breadcrumb a{
    color:#3A3129;
    transition:.3s;
}

.breadcrumb a:hover{
    color:var(--gold);
}

.products-grid{
    display:grid;
    grid-template-columns:620px minmax(420px,1fr);
    gap:70px;
    align-items:start;
}

/* ======================================
   GALLERY
====================================== */

.product-gallery{
    position:sticky;
    top:110px;
}

.gallery-wrapper{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:20px;
    align-items:start;
}

.gallery-thumbs{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.thumb{
    width:90px;
    height:90px;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    border:2px solid transparent;
    transition:.35s;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumb:hover{
    transform:translateY(-4px);
    border-color:#C89A52;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.thumb.active{
    border-color:#C89A52;
    box-shadow:0 14px 32px rgba(200,154,82,.28);
}

.gallery-main{
    height:620px;
    border-radius:28px;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 28px 65px rgba(0,0,0,.14);
}

.gallery-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s ease;
}

.gallery-main:hover img{
    transform:scale(1.05);
}

/* ======================================
   PRODUCT INFO
====================================== */
/* =====================================================
   PRODUCT DETAIL - COMPACT FIRST VIEW
===================================================== */

.products-grids{
    display:grid !important;

    grid-template-columns:
        minmax(0, 56%)
        minmax(0, 44%) !important;

    gap:40px !important;

    align-items:start !important;

    width:100%;
}


/* =====================================================
   COMPACT GALLERY
===================================================== */

.unique-product-gallery{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;

    position:relative;
}


.unique-gallery-layout{
    display:grid;

    grid-template-columns:64px minmax(0,1fr);

    gap:12px;

    width:100%;

    align-items:start;
}


/* THUMBNAILS */

.unique-gallery-thumbs{
    width:64px;

    display:flex;
    flex-direction:column;

    gap:9px;
}


.unique-gallery-thumb{
    width:64px;
    height:64px;

    padding:0;
    margin:0;

    flex:0 0 64px;

    display:block;

    background:#f7f5f0;

    border:2px solid transparent;
    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.unique-gallery-thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.unique-gallery-thumb:hover{
    transform:translateY(-2px);

    border-color:#c89a52;
}


.unique-gallery-thumb.is-active{
    border-color:#c89a52;

    box-shadow:
        0 5px 16px rgba(200,154,82,.18);
}


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

.unique-gallery-stage{
    width:100%;

    /*
       Compact fixed visual area.
       Image itself is NOT cropped.
    */

    height:clamp(380px, 42vw, 500px);

    min-height:380px;
    max-height:500px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:18px;

    box-sizing:border-box;

    background:#f7f5f0;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 14px 35px rgba(0,0,0,.07);
}


.unique-gallery-stage img{
    display:block;

    width:100%;
    height:100%;

    /*
       THIS IS THE IMPORTANT PART.
       Full image visible.
       No cropping.
    */

    object-fit:contain;
    object-position:center;

    margin:0;
    padding:0;

    transform:none !important;

    transition:opacity .2s ease;
}


.unique-gallery-stage:hover img{
    transform:none !important;
}


/* =====================================================
   PRODUCT INFORMATION
===================================================== */

.product-info{
    padding-top:0 !important;

    margin:0 !important;

    align-self:start;
}


.product-info .eyebrow{
    display:block;

    font-size:11px;

    letter-spacing:3px;

    font-weight:700;

    color:#C89A52;

    text-transform:uppercase;

    margin:2px 0 9px !important;
}


.product-info h1{
    font-family:var(--serif);

    font-size:clamp(38px,4.5vw,64px);

    line-height:.98;

    font-weight:500;

    color:#151515;

    margin:0 0 18px !important;

    letter-spacing:-1px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.product-points{
    list-style:none;

    padding:0 !important;

    margin:0 0 20px !important;

    display:flex;

    flex-direction:column;

    gap:7px !important;
}


.product-points li{
    position:relative;

    padding-left:19px;

    font-size:15px;

    line-height:1.45;

    color:#4B443C;
}
.product-points .point-label {
    color: #C89A52;
    font-weight: 600;
}
.mobile-product-points .mobile-point-label {
    color: #C89A52;
    font-weight: 600;
}

.product-points li::before{
    content:"";

    position:absolute;

    left:0;
    top:8px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#C89A52;
}


/* =====================================================
   QUICK SPECS - COMPACT
===================================================== */

.quick-specs{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:9px;

    margin:20px 0 !important;
}


.quick-specs div{
    background:#fff;

    padding:13px 15px;

    border-radius:13px;

    border:1px solid rgba(0,0,0,.06);

    transition:.25s;
}


.quick-specs div:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.07);
}


.quick-specs strong{
    display:block;

    font-size:9px;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#C89A52;

    margin-bottom:5px;
}


.quick-specs span{
    display:block;

    font-size:14px;

    color:#222;

    font-weight:500;

    line-height:1.3;
}


/* =====================================================
   BUTTONS
===================================================== */

.product-buttons{
    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:14px !important;
}


.product-buttons .btn-primary,
.product-buttons .btn-secondary{
    padding:12px 20px;
}


/* =====================================================
   DESKTOP - SHORT SCREEN
===================================================== */

@media (min-width:1101px) and (max-height:800px){

    .unique-gallery-stage{
        height:360px;
        min-height:360px;
        max-height:360px;

        padding:14px;
    }

    .unique-gallery-thumb{
        width:56px;
        height:56px;
        flex-basis:56px;
    }

    .unique-gallery-thumbs{
        width:56px;
        gap:7px;
    }

    .unique-gallery-layout{
        grid-template-columns:56px minmax(0,1fr);
        gap:10px;
    }

    .product-info h1{
        font-size:48px;
        margin-bottom:14px !important;
    }

    .product-points{
        margin-bottom:14px !important;
    }

    .quick-specs{
        margin:14px 0 !important;
    }

}

/* ======================================
   SPECIFICATIONS
====================================== */

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

.spec-grid div{
    background:#fff;
    padding:28px;
    border-radius:22px;
    border:1px solid rgba(0,0,0,.06);
    transition:.35s;
}

.spec-grid div:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.spec-grid strong{
    display:block;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#C89A52;
    margin-bottom:10px;
}

.spec-grid span{
    font-size:17px;
    color:#1F1F1F;
}

/* ======================================
   DESCRIPTION
====================================== */

.off-white{
    background:#F6F3EE;
}

.off-white .wrap{
    max-width:1300px;
}

.off-white .section-head{
    margin-bottom:26px;
}

.off-white .section-head h2{
    font-family:var(--serif);
    font-size:clamp(38px,4vw,60px);
    line-height:1;
}

.description{
    max-width:900px;
    font-size:18px;
    line-height:1.9;
    color:#47413B;
}

.description p:first-child{
    margin-top:0;
}

.description h2,
.description h3{
    font-family:var(--serif);
    margin-top:38px;
    color:#1A1A1A;
}

.description img{
    border-radius:20px;
    margin:30px 0;
}

/* ======================================
   TABLET
====================================== */

@media(max-width:1100px){

.product-hero{
    padding:45px 0 70px;
}

.products-grid{
    grid-template-columns:1fr;
    gap:45px;
}

.product-gallery{
    position:static;
}

.gallery-wrapper{
    grid-template-columns:1fr;
}

.gallery-thumbs{
    flex-direction:row;
    overflow-x:auto;
    order:2;
    padding-bottom:6px;
}

.gallery-thumbs::-webkit-scrollbar{
    height:5px;
}

.gallery-thumbs::-webkit-scrollbar-thumb{
    background:#C89A52;
    border-radius:20px;
}

.thumb{
    min-width:78px;
    width:78px;
    height:78px;
}

.gallery-main{
    height:560px;
}

.quick-specs{
    grid-template-columns:repeat(2,1fr);
}

.spec-grid{
    grid-template-columns:repeat(2,1fr);
}

}

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

@media(max-width:640px){

.product-hero{
    padding:30px 0 55px;
}

.breadcrumb{
    font-size:13px;
    margin-bottom:20px;
}

.gallery-main{
    height:380px;
    border-radius:18px;
}

.thumb{
    min-width:65px;
    width:65px;
    height:65px;
    border-radius:12px;
}

.product-info h1{
    font-size:42px;
    line-height:1;
    margin-bottom:20px;
}

.product-points li{
    font-size:15px;
    line-height:1.7;
}

.quick-specs{
    grid-template-columns:1fr;
}

.quick-specs div{
    padding:18px;
}

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

.spec-grid div{
    padding:22px;
}

.product-buttons{
    flex-direction:column;
}

.product-buttons .btn-primary,
.product-buttons .btn-secondary{
    width:100%;
    justify-content:center;
}

.description{
    font-size:16px;
    line-height:1.8;
}

}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.28);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:.35s ease;
}

.gallery-overlay .icon{
    width:54px;
    height:54px;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

/* Lightbox */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(10,10,10,.94);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:9999;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:88%;
    max-height:88vh;
    border-radius:16px;
    box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.lightbox-close{
    position:absolute;
    top:24px;
    right:34px;
    color:#fff;
    font-size:46px;
    cursor:pointer;
    line-height:1;
}

.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    transition:.25s;
}

.lightbox-nav:hover{
    background:rgba(255,255,255,.25);
}

.lightbox-nav.prev{ left:30px; }
.lightbox-nav.next{ right:30px; }

@media(max-width:768px){

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

.gallery-item img{
    height:260px;
}

.lightbox-nav{
    width:44px;
    height:44px;
    font-size:28px;
}

}

.gallery-grid img:hover{

transform:scale(1.04);

}
.arrival-card{

background:#fff;

border-radius:24px;

overflow:hidden;

transition:.45s ease;

}

.arrival-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.arrival-card img{

height:250px;

object-fit:cover;

width:100%;

}

.arrival-content{

padding:22px;

}

.arrival-content span{

font-size:11px;

letter-spacing:.14em;

color:var(--gold);

text-transform:uppercase;

}

.arrival-content h3{

margin-top:8px;

font-family:var(--serif);

font-size:24px;

}


/*==================================================
   STONEFACTORY - REVIEW SECTION
==================================================*/

.review-section{
    background:#F8F6F2;
    padding:32px 0;
}

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

.section-heads{
    text-align:center;
    margin-bottom:24px;
}

.section-heads .eyebrow{
    color:#B68A4A;
    font-size:18px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:600;
}

.section-heads h2{
    margin-top:8px;
    color:#1F1B18;
    font-family:var(--serif);
    font-size:clamp(30px,3vw,42px);
}

/*==================================================
   MAIN LAYOUT
==================================================*/

.review-layout{
    display:grid;
    grid-template-columns:1.7fr .75fr;
    gap:24px;
    align-items:start;
}

/*==================================================
   RATING SUMMARY
==================================================*/

.review-summary{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:20px;
    align-items:center;
    margin-bottom:18px;
}

.rating-box{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:18px;
    padding:18px;
    text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.rating-score{
    font-family:var(--serif);
    font-size:48px;
    line-height:1;
    color:#1E1A17;
}

.rating-stars{
    color:#D6A458;
    font-size:17px;
    margin:8px 0;
}

.rating-box p{
    margin:0;
    color:#7A7066;
    font-size:12px;
    line-height:1.5;
}

.rating-bars{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.bar-row{
    display:grid;
    grid-template-columns:34px 1fr 36px;
    gap:10px;
    align-items:center;
    font-size:13px;
    color:#5A534D;
}

.bar{
    height:7px;
    background:#E7DED2;
    border-radius:999px;
    overflow:hidden;
}

.fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#B68A4A,#DFC07A);
}

/*==================================================
   REVIEW CARDS
==================================================*/

.review-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-height:600px;          /* apni need ke hisab se 500-700px */
    overflow-y:auto;
    padding-right:8px;
    overscroll-behavior:contain;
}
/* Premium scrollbar */
.review-grid::-webkit-scrollbar{
    width:6px;
}

.review-grid::-webkit-scrollbar-track{
    background:#EFE8DD;
    border-radius:999px;
}

.review-grid::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#B68A4A,#DFC07A);
    border-radius:999px;
}

.review-grid::-webkit-scrollbar-thumb:hover{
    background:#9E7237;
}
/* Left comments section */
.review-comments{
    display:flex;
    flex-direction:column;
    gap:18px;
}

@media (max-width:992px){
    .review-grid{
        max-height:none;
        overflow:visible;
        padding-right:0;
    }
}

.review-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:18px;
    padding:16px 18px;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
    transition:.3s ease;
}

.review-card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

/* Header */

.review-head{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:10px;
}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,#B68A4A,#9E7237);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    flex-shrink:0;
}

.review-user{
    flex:1;
}

.review-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:3px;
}

.review-name-row h4{
    margin:0;
    color:#1E1A17;
    font-size:15px;
    font-weight:600;
}

.review-user small{
    color:#85796D;
    font-size:12px;
}

/* Stars beside name */

.stars-inline{
    display:flex;
    gap:2px;
    font-size:12px;
    color:#D6A458;
}

.stars-inline i.active{
    color:#D6A458;
}

.verified{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#EEF8EE;
    color:#2E7D32;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}

.review-card p{
    margin:0;
    color:#5E5650;
    font-size:13px;
    line-height:1.6;
}

/*==================================================
   REVIEW FORM
==================================================*/

.review-form-box{
    position:sticky;
    top:105px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:18px;
    padding:22px;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
}

.review-form-box .eyebrow{
    color:#B68A4A;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:600;
}

.review-form-box h3{
    margin:6px 0 18px;
    font-size:30px;
    font-family:var(--serif);
    color:#1F1B18;
}

.review-form input,
.review-form textarea{
    width:100%;
    padding:11px 14px;
    margin-bottom:10px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:12px;
    background:#FCFBF9;
    color:#1E1A17;
    font-size:14px;
    transition:.3s ease;
}

.review-form input::placeholder,
.review-form textarea::placeholder{
    color:#9A9188;
}

.review-form input:focus,
.review-form textarea:focus{
    outline:none;
    border-color:#B68A4A;
    box-shadow:0 0 0 4px rgba(182,138,74,.10);
}

.review-form textarea{
    min-height:90px;
    resize:vertical;
}

/*==================================================
   STAR PICKER
==================================================*/

.rating-field{
    margin-bottom:12px;
}

.rating-field label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#1F1B18;
}

.star-rating{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:5px;
}

.star-rating input{
    display:none;
}

.star-rating label{
    cursor:pointer;
    color:#D7D0C6;
    font-size:20px;
    margin:0;
    transition:.25s;
}

.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input:checked~label{
    color:#D6A458;
    transform:scale(1.05);
}

/*==================================================
   BUTTON
==================================================*/

.review-form button{
    width:100%;
    height:44px;
    border:none;
    border-radius:999px;
    background:#171513;
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.03em;
    cursor:pointer;
    transition:.3s ease;
}

.review-form button:hover{
    background:#B68A4A;
    transform:translateY(-2px);
}

/*==================================================
   SUCCESS ALERT
==================================================*/

.review-success{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    margin-bottom:20px;
    border-radius:16px;
    background:#FFF9F0;
    border:1px solid rgba(182,138,74,.35);
    box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.success-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,#B68A4A,#DFC07A);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.review-success strong{
    display:block;
    color:#1E1A17;
    margin-bottom:2px;
}

.review-success p{
    margin:0;
    color:#6F665E;
    font-size:13px;
}

.success-close{
    margin-left:auto;
    border:none;
    background:none;
    cursor:pointer;
    color:#7A7066;
    font-size:18px;
}

.success-close:hover{
    color:#111;
}

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

@media(max-width:992px){

    .review-layout{
        grid-template-columns:1fr;
    }

    .review-summary{
        grid-template-columns:1fr;
    }

    .review-form-box{
        position:static;
    }
}

@media (max-width: 640px) {

    /* =====================================================
       REVIEW SECTION — COMPACT MOBILE
    ===================================================== */

    .review-section {
        padding: 18px 0 22px !important;
        overflow: hidden !important;
    }


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

    .section-heads {
        margin-bottom: 12px !important;
        padding: 0 10px !important;
    }

    .section-heads .eyebrow {
        font-size: 9px !important;
        letter-spacing: 1.8px !important;
    }

    .section-heads h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
        margin: 4px 0 0 !important;
    }


    /* =====================================================
       REVIEW LAYOUT
    ===================================================== */

    .review-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }


    /* =====================================================
       RATING SUMMARY
       Rating first
    ===================================================== */

    .review-summary {
        display: grid !important;
        grid-template-columns: 105px 1fr !important;

        gap: 10px !important;

        margin: 0 0 10px !important;
        padding: 0 10px !important;
    }


    .rating-box {
        padding: 9px 6px !important;
        border-radius: 12px !important;
    }

    .rating-score {
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .rating-stars {
        font-size: 11px !important;
        margin: 4px 0 !important;
        letter-spacing: 0 !important;
    }

    .rating-box p {
        font-size: 7px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }


    /* =====================================================
       RATING BARS
    ===================================================== */

    .rating-bars {
        gap: 4px !important;
        align-self: center !important;
        width: 100% !important;
    }

    .bar-row {
        grid-template-columns: 22px 1fr 25px !important;
        gap: 4px !important;

        font-size: 8px !important;
        line-height: 1 !important;
    }

    .bar {
        height: 4px !important;
        border-radius: 10px !important;
    }


    /* =====================================================
       REVIEWS
       Horizontal compact slider
    ===================================================== */

    .review-grid {
        display: flex !important;
        flex-direction: row !important;

        width: 100vw !important;
        max-width: none !important;

        margin-left: -10px !important;

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 2px 10px 8px !important;

        scroll-snap-type: x mandatory !important;
        overscroll-behavior-x: contain !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .review-grid::-webkit-scrollbar {
        display: none !important;
    }


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

    .review-card {
        flex: 0 0 78vw !important;

        width: 78vw !important;
        min-width: 78vw !important;

        padding: 11px 12px !important;

        border-radius: 12px !important;

        scroll-snap-align: start !important;

        box-shadow: 0 3px 12px rgba(0,0,0,.04) !important;
    }

    .review-card:hover {
        transform: none !important;
    }


    .review-head {
        gap: 7px !important;
        margin-bottom: 6px !important;
    }


    .avatar {
        width: 31px !important;
        height: 31px !important;

        min-width: 31px !important;

        font-size: 12px !important;
    }


    .review-name-row {
        gap: 4px !important;
    }

    .review-name-row h4 {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .review-user small {
        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    .stars-inline {
        font-size: 8px !important;
        gap: 1px !important;
    }


    .verified {
        width: 17px !important;
        height: 17px !important;

        font-size: 8px !important;
    }


    .review-card p {
        font-size: 10px !important;
        line-height: 1.35 !important;

        margin: 0 !important;
    }


    /* =====================================================
       REVIEW FORM
       Immediately after reviews
    ===================================================== */

    .review-form-box {
        position: static !important;

        margin: 8px 10px 0 !important;

        padding: 13px !important;

        border-radius: 13px !important;
    }


    .review-form-box .eyebrow {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
    }

    .review-form-box h3 {
        font-size: 22px !important;
        line-height: 1.1 !important;

        margin: 3px 0 10px !important;
    }


    /* =====================================================
       FORM INPUTS
    ===================================================== */

    .review-form input,
    .review-form textarea {
        padding: 8px 10px !important;

        font-size: 12px !important;

        margin-bottom: 6px !important;

        border-radius: 7px !important;
    }

    .review-form textarea {
        min-height: 58px !important;
        height: 58px !important;
    }


    /* =====================================================
       RATING FIELD
    ===================================================== */

    .rating-field {
        margin-bottom: 6px !important;
    }

    .rating-field label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    .star-rating {
        height: 25px !important;
    }

    .star-rating label {
        font-size: 17px !important;
    }


    /* =====================================================
       SUBMIT BUTTON
    ===================================================== */

    .review-form .btn-primary {
        padding: 9px 16px !important;

        font-size: 11px !important;

        min-height: 36px !important;
    }

}
@media (max-width: 640px) {

    /* ==========================================
       REVIEW SECTION - EXTRA COMPACT
    ========================================== */

    .review-section {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }


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

    .review-section .section-heads {
        margin: 0 10px 8px !important;
        padding: 0 !important;
    }

    .review-section .section-heads .eyebrow {
        margin: 0 0 2px !important;
        line-height: 1 !important;
    }

    .review-section .section-heads h2 {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.02 !important;
    }


    /* ==========================================
       RATING
    ========================================== */

    .review-section .review-summary {
        margin: 0 10px 7px !important;
        padding: 0 !important;

        gap: 8px !important;
    }

    .review-section .rating-box {
        padding: 7px 5px !important;
        min-height: 0 !important;
    }

    .review-section .rating-score {
        font-size: 31px !important;
        line-height: .95 !important;
    }

    .review-section .rating-stars {
        margin: 3px 0 !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .review-section .rating-box p {
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 1.1 !important;
    }


    /* ==========================================
       RATING BARS
    ========================================== */

    .review-section .rating-bars {
        gap: 3px !important;
    }

    .review-section .bar-row {
        height: 10px !important;
        grid-template-columns: 22px 1fr 24px !important;
        gap: 4px !important;
        font-size: 8px !important;
    }

    .review-section .bar {
        height: 4px !important;
    }


    /* ==========================================
       REVIEW CARDS
    ========================================== */

    .review-section .review-grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 3px !important;
    }

    .review-section .review-card {
        padding: 10px 12px !important;
    }


    /* ==========================================
       NO REVIEWS CARD
    ========================================== */

    .review-section .review-grid .review-card:only-child {
        min-height: 0 !important;
        height: auto !important;
    }

    .review-section .review-grid .review-card p {
        margin: 0 !important;
    }


    /* ==========================================
       FORM
    ========================================== */

    .review-section .review-form-box {
        margin: 5px 10px 0 !important;
        padding: 12px !important;

        border-radius: 13px !important;
    }

    .review-section .review-form-box .eyebrow {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .review-section .review-form-box h3 {
        margin: 4px 0 9px !important;
        font-size: 23px !important;
        line-height: 1 !important;
    }


    /* ==========================================
       FORM FIELDS
    ========================================== */

    .review-section .review-form input,
    .review-section .review-form textarea {
        margin-bottom: 6px !important;
        padding: 8px 10px !important;

        min-height: 0 !important;
        height: 40px !important;

        font-size: 12px !important;
    }

    .review-section .review-form textarea {
        height: 55px !important;
        min-height: 55px !important;
    }


    /* ==========================================
       RATING FIELD
    ========================================== */

    .review-section .rating-field {
        margin: 2px 0 6px !important;
    }

    .review-section .rating-field label {
        margin-bottom: 2px !important;
        font-size: 10px !important;
    }

    .review-section .star-rating {
        height: 22px !important;
    }

    .review-section .star-rating label {
        font-size: 16px !important;
    }


    /* ==========================================
       BUTTON
    ========================================== */

    .review-section .review-form .btn-primary {
        min-height: 34px !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

}
/* =========================================================
   MOBILE REVIEW — COMPACT VERSION
========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------
       SECTION
    ----------------------------------------- */

    .review-section {
        padding: 8px 0 15px !important;
        margin-top: 0 !important;
        overflow: hidden !important;
    }


    .review-section > .wrap {
        width: 100% !important;
        padding: 0 !important;
    }


    /* -----------------------------------------
       HEADING
    ----------------------------------------- */

    .review-section .section-heads {
        margin: 0 10px 8px !important;
        padding: 0 !important;
    }

    .review-section .section-heads .eyebrow {
        margin: 0 0 3px !important;
        font-size: 9px !important;
        letter-spacing: 1.8px !important;
        line-height: 1 !important;
    }

    .review-section .section-heads h2 {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.02 !important;
    }


    /* -----------------------------------------
       MAIN LAYOUT
    ----------------------------------------- */

    .review-section .review-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }


    /* -----------------------------------------
       REVIEW COMMENTS
    ----------------------------------------- */

    .review-section .review-comments {
        width: 100% !important;
    }


    /* -----------------------------------------
       RATING SUMMARY
    ----------------------------------------- */

    .review-section .review-summary {
        display: grid !important;

        grid-template-columns: 108px 1fr !important;

        gap: 9px !important;

        margin: 0 10px 7px !important;

        padding: 0 !important;

        align-items: center !important;
    }


    .review-section .rating-box {
        padding: 8px 5px !important;

        min-height: 0 !important;

        height: auto !important;

        border-radius: 12px !important;
    }


    .review-section .rating-score {
        font-size: 32px !important;
        line-height: .95 !important;
    }


    .review-section .rating-stars {
        font-size: 10px !important;
        line-height: 1 !important;

        margin: 3px 0 !important;
    }


    .review-section .rating-box p {
        font-size: 7px !important;

        line-height: 1.15 !important;

        margin: 0 !important;
    }


    /* -----------------------------------------
       RATING BARS
    ----------------------------------------- */

    .review-section .rating-bars {
        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;

        width: 100% !important;
    }


    .review-section .bar-row {
        display: grid !important;

        grid-template-columns: 22px 1fr 25px !important;

        gap: 4px !important;

        height: 10px !important;

        font-size: 8px !important;

        line-height: 1 !important;

        align-items: center !important;
    }


    .review-section .bar {
        height: 4px !important;

        border-radius: 10px !important;
    }


    /* -----------------------------------------
       REVIEW CARDS
       NOT STRETCHED
    ----------------------------------------- */

    .review-section .review-grid {

        display: flex !important;

        flex-direction: row !important;

        align-items: flex-start !important;

        width: 100vw !important;

        max-width: none !important;

        margin: 0 0 0 -10px !important;

        padding: 1px 10px 5px !important;

        gap: 8px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-snap-type: x mandatory !important;
    }


    .review-section .review-grid::-webkit-scrollbar {
        display: none !important;
    }


    .review-section .review-card {

        flex: 0 0 76vw !important;

        width: 76vw !important;

        min-width: 76vw !important;

        max-width: 76vw !important;

        height: auto !important;

        min-height: 0 !important;

        align-self: flex-start !important;

        box-sizing: border-box !important;

        padding: 10px 11px !important;

        margin: 0 !important;

        border-radius: 12px !important;

        scroll-snap-align: start !important;

        box-shadow: 0 3px 10px rgba(0,0,0,.035) !important;
    }


    /* No reviews card should NOT become tall */

    .review-section .no-review-card {
        height: auto !important;

        min-height: 45px !important;

        display: flex !important;

        align-items: center !important;
    }


    .review-section .review-card p {
        margin: 0 !important;

        font-size: 10px !important;

        line-height: 1.35 !important;
    }


    /* -----------------------------------------
       REVIEW HEADER
    ----------------------------------------- */

    .review-section .review-head {
        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        margin-bottom: 5px !important;
    }


    .review-section .avatar {
        width: 30px !important;

        height: 30px !important;

        min-width: 30px !important;

        font-size: 12px !important;
    }


    .review-section .review-name-row {
        gap: 4px !important;
    }


    .review-section .review-name-row h4 {
        font-size: 12px !important;

        line-height: 1 !important;

        margin: 0 !important;
    }


    .review-section .review-user small {
        font-size: 8px !important;

        line-height: 1 !important;
    }


    .review-section .stars-inline {
        font-size: 8px !important;

        gap: 1px !important;
    }


    .review-section .verified {
        width: 17px !important;

        height: 17px !important;

        font-size: 8px !important;
    }


    /* -----------------------------------------
       FORM BOX
    ----------------------------------------- */

    .review-section .review-form-box {

        position: static !important;

        margin: 7px 10px 0 !important;

        padding: 12px !important;

        border-radius: 13px !important;
    }


    .review-section .review-form-box > .eyebrow {

        display: block !important;

        margin: 0 !important;

        font-size: 9px !important;

        letter-spacing: 1.5px !important;

        line-height: 1 !important;
    }


    .review-section .review-form-box h3 {

        margin: 4px 0 10px !important;

        font-size: 23px !important;

        line-height: 1 !important;
    }


    /* -----------------------------------------
       STAR STEP
    ----------------------------------------- */

    .mobile-rating-step {

        display: block !important;

        padding: 8px 0 3px !important;

        text-align: left !important;
    }


    .mobile-rating-step > label {

        display: block !important;

        margin-bottom: 4px !important;

        font-size: 10px !important;

        font-weight: 500 !important;
    }


    .mobile-star-rating {

        display: flex !important;

        flex-direction: row-reverse !important;

        justify-content: flex-end !important;

        gap: 3px !important;
    }


    .mobile-star-rating input {
        display: none !important;
    }


    .mobile-star-rating label {

        cursor: pointer !important;

        font-size: 22px !important;

        line-height: 1 !important;

        color: #d8d0c4 !important;

        transition: .2s ease !important;
    }


    .mobile-star-rating label:hover,
    .mobile-star-rating label:hover ~ label,
    .mobile-star-rating input:checked ~ label {

        color: #C89A52 !important;
    }


    .rating-hint {

        display: block !important;

        margin-top: 4px !important;

        font-size: 8px !important;

        color: #999 !important;
    }


    /* -----------------------------------------
       FORM HIDDEN INITIALLY
    ----------------------------------------- */

    .review-section .review-form {

        display: none !important;

        margin-top: 8px !important;

        opacity: 0;

        transform: translateY(15px);

    }


    .review-section .review-form.review-form-visible {

        display: block !important;

        animation: reviewFormReveal .45s ease forwards !important;
    }


    @keyframes reviewFormReveal {

        from {
            opacity: 0;
            transform: translateY(15px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }


    /* -----------------------------------------
       FORM INPUTS
    ----------------------------------------- */

    .review-section .review-form input {

        width: 100% !important;

        height: 39px !important;

        min-height: 39px !important;

        padding: 8px 10px !important;

        margin: 0 0 6px !important;

        font-size: 12px !important;

        border-radius: 7px !important;

        box-sizing: border-box !important;
    }


    .review-section .review-form textarea {

        width: 100% !important;

        height: 58px !important;

        min-height: 58px !important;

        padding: 8px 10px !important;

        margin: 0 0 7px !important;

        font-size: 12px !important;

        border-radius: 7px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       SUBMIT
    ----------------------------------------- */

    .review-section .review-form .btn-primary {

        min-height: 35px !important;

        height: 35px !important;

        padding: 7px 14px !important;

        font-size: 11px !important;
    }

}


/* =========================================================
   DESKTOP
   Mobile rating step hidden
========================================================= */

@media (min-width: 641px) {

    .mobile-rating-step {
        display: none !important;
    }

}

/* Desktop rating */

.desktop-rating-field {
    display: block;
    margin-bottom: 12px;
}

.desktop-rating-field > label {
    display: block;
    margin-bottom: 5px;
}


/* Mobile */

@media (max-width: 640px) {

    .desktop-rating-field {
        display: none !important;
    }

}
/* =========================================================
   FINAL MOBILE RESPONSIVE FIX
   PRODUCT DETAIL PAGE
========================================================= */

@media (max-width: 768px){

    /* =====================================================
       GLOBAL MOBILE FIX
    ===================================================== */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    .wrap{
        width:100%;
        max-width:100%;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .section-pad{
        padding-top:32px !important;
        padding-bottom:32px !important;
    }


    /* =====================================================
       PRODUCT HERO
    ===================================================== */

    .product-hero{
        padding:22px 0 32px !important;
    }

    .breadcrumb{
        font-size:11px !important;
        margin-bottom:14px !important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    /* =====================================================
       IMPORTANT:
       YOUR CLASS IS .products-grids
       NOT .products-grid
    ===================================================== */

    .products-grids{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:24px !important;
        margin:0 !important;
    }


    /* =====================================================
       PRODUCT GALLERY
    ===================================================== */

    .unique-product-gallery{
        width:100% !important;
        margin:0 !important;
    }

    .unique-gallery-layout{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:10px !important;
    }

    /* Main image first */

    .unique-gallery-stage{
        order:1 !important;

        width:100% !important;
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;

        padding:12px !important;
        border-radius:16px !important;
    }

    .unique-gallery-stage img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }


    /* Thumbnails below */

    .unique-gallery-thumbs{
        order:2 !important;

        width:100% !important;

        display:flex !important;
        flex-direction:row !important;

        gap:7px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:2px 0 5px !important;

        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .unique-gallery-thumbs::-webkit-scrollbar{
        display:none;
    }

    .unique-gallery-thumb{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        flex:0 0 52px !important;

        border-radius:8px !important;
    }


    /* =====================================================
       PRODUCT INFORMATION
    ===================================================== */

    .product-info{
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .product-info .eyebrow{
        font-size:9px !important;
        letter-spacing:2.5px !important;
        margin:0 0 6px !important;
    }

    .product-info h1{
        font-size:36px !important;
        line-height:1 !important;
        letter-spacing:-.5px !important;

        margin:0 0 12px !important;
    }


    /* Product points */

    .product-points{
        margin:0 0 14px !important;
        gap:5px !important;
    }

    .product-points li{
        font-size:13px !important;
        line-height:1.4 !important;
        padding-left:15px !important;
    }

    .product-points li::before{
        width:5px !important;
        height:5px !important;
        top:7px !important;
    }


    /* =====================================================
       QUICK SPECS
    ===================================================== */

    .quick-specs{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;

        gap:7px !important;

        margin:14px 0 !important;
    }

    .quick-specs div{
        padding:10px 11px !important;
        border-radius:11px !important;
    }

    .quick-specs strong{
        font-size:8px !important;
        margin-bottom:3px !important;
    }

    .quick-specs span{
        font-size:11px !important;
        line-height:1.25 !important;
    }


    /* =====================================================
       PRODUCT BUTTONS
    ===================================================== */

    .product-buttons{
        display:flex !important;
        flex-direction:row !important;

        gap:7px !important;
        margin-top:10px !important;
    }

    .product-buttons .btn-primary,
    .product-buttons .btn-secondary{
        width:auto !important;
        flex:1 !important;

        padding:10px 12px !important;

        font-size:11px !important;
        text-align:center;
    }


    /* =====================================================
       SPECIFICATIONS
    ===================================================== */

    .spec-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .spec-grid div{
        padding:15px 13px !important;
        border-radius:14px !important;
    }

    .spec-grid strong{
        font-size:8px !important;
        letter-spacing:.15em !important;
        margin-bottom:6px !important;
    }

    .spec-grid span{
        font-size:12px !important;
        line-height:1.3 !important;
    }


    /* =====================================================
       SECTION HEADINGS
    ===================================================== */

    .section-head{
        margin-bottom:16px !important;
    }

    .section-head h2{
        font-size:32px !important;
        line-height:1 !important;
    }

    .off-white .section-head{
        margin-bottom:14px !important;
    }

    .off-white .section-head h2{
        font-size:32px !important;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .description{
        max-width:100% !important;

        font-size:14px !important;
        line-height:1.65 !important;
    }

    .description h2,
    .description h3{
        margin-top:22px !important;
        margin-bottom:8px !important;
    }

    .description img{
        margin:18px 0 !important;
        border-radius:12px !important;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .gallery-item{
        border-radius:11px !important;
    }

    .gallery-item img{
        height:150px !important;
    }


    /* =====================================================
       REVIEW SECTION
    ===================================================== */

    .review-section{
        padding:30px 0 !important;
        overflow:hidden !important;
    }

    .section-heads{
        margin-bottom:18px !important;
        padding:0 10px !important;
    }

    .section-heads .eyebrow{
        font-size:10px !important;
        letter-spacing:2px !important;
    }

    .section-heads h2{
        font-size:29px !important;
        line-height:1.05 !important;
        margin-top:5px !important;
    }


    /* =====================================================
       REVIEW LAYOUT
       Remove desktop 2-column layout
    ===================================================== */

    .review-layout{
        display:block !important;
        width:100% !important;
    }


    /* =====================================================
       RATING SUMMARY
    ===================================================== */

    .review-summary{
        display:grid !important;

        grid-template-columns:110px 1fr !important;

        gap:12px !important;

        margin-bottom:18px !important;
    }

    .rating-box{
        padding:12px 8px !important;
        border-radius:14px !important;
    }

    .rating-score{
        font-size:35px !important;
    }

    .rating-stars{
        font-size:13px !important;
        margin:5px 0 !important;
    }

    .rating-box p{
        font-size:8px !important;
        line-height:1.3 !important;
    }

    .rating-bars{
        gap:6px !important;
    }

    .bar-row{
        grid-template-columns:25px 1fr 28px !important;
        gap:5px !important;
        font-size:9px !important;
    }

    .bar{
        height:5px !important;
    }


    /* =====================================================
       REVIEWS = HORIZONTAL AUTO SCROLL
    ===================================================== */

    .review-grid{
        display:flex !important;

        flex-direction:row !important;

        width:100vw !important;

        max-width:none !important;

        margin-left:-16px !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:4px 16px 12px !important;

        max-height:none !important;

        scroll-snap-type:x mandatory !important;

        overscroll-behavior-x:contain !important;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .review-grid::-webkit-scrollbar{
        display:none;
    }


    /* Individual review card */

    .review-card{
        flex:0 0 82vw !important;

        width:82vw !important;
        min-width:82vw !important;

        box-sizing:border-box !important;

        padding:14px 15px !important;

        border-radius:15px !important;

        scroll-snap-align:start !important;

        box-shadow:0 5px 15px rgba(0,0,0,.04) !important;
    }

    .review-card:hover{
        transform:none !important;
    }

    .review-head{
        gap:9px !important;
        margin-bottom:8px !important;
    }

    .avatar{
        width:36px !important;
        height:36px !important;

        font-size:14px !important;
    }

    .review-name-row{
        gap:5px !important;
    }

    .review-name-row h4{
        font-size:13px !important;
    }

    .review-user small{
        font-size:9px !important;
    }

    .stars-inline{
        font-size:9px !important;
        gap:1px !important;
    }

    .verified{
        width:20px !important;
        height:20px !important;
        font-size:9px !important;
    }

    .review-card p{
        font-size:11px !important;
        line-height:1.45 !important;
    }


    /* =====================================================
       REVIEW FORM
       Keep below horizontal reviews
    ===================================================== */

    .review-form-box{
        position:static !important;

        margin-top:20px !important;

        padding:16px !important;

        border-radius:15px !important;
    }

    .review-form-box h3{
        font-size:26px !important;
        margin:5px 0 14px !important;
    }

    .review-form input,
    .review-form textarea{
        padding:10px 12px !important;
        font-size:13px !important;
        margin-bottom:8px !important;
    }

    .review-form textarea{
        min-height:80px !important;
    }

    .rating-field{
        margin-bottom:10px !important;
    }

    .star-rating label{
        font-size:19px !important;
    }


    /* =====================================================
       RELATED PRODUCTS
    ===================================================== */

    .arrival-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .arrival-card{
        border-radius:13px !important;
    }

    .arrival-card:hover{
        transform:none !important;
    }

    .arrival-card img{
        height:140px !important;
    }

    .arrival-content{
        padding:10px !important;
    }

    .arrival-content span{
        font-size:7px !important;
    }

    .arrival-content h3{
        font-size:15px !important;
        line-height:1.1 !important;
        margin-top:4px !important;
    }


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

    .final-cta{
        padding:40px 0 !important;
    }

    .final-cta h2{
        font-size:30px !important;
        line-height:1.05 !important;
    }

    .final-cta p{
        font-size:13px !important;
        line-height:1.5 !important;
    }

}


/* =========================================================
   PRODUCT DETAIL - MOBILE ONLY
   DESKTOP COMPLETELY UNTOUCHED
========================================================= */
/* =========================================================
   DESKTOP
   Mobile product markup completely hidden
========================================================= */

.mobile-product-view {
    display: none !important;
}


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

@media screen and (max-width: 640px) {

    .desktop-product-view,
    .desktop-product-section {
        display: none !important;
    }

    .mobile-product-view {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}
@media (max-width: 640px) {

    /* =====================================================
       IMPORTANT
       Hide desktop product completely on mobile
    ===================================================== */

    .desktop-product-view {
        display: none !important;
    }

    .desktop-product-section {
        display: none !important;
    }


    /* =====================================================
       MOBILE PRODUCT MAIN CONTAINER
    ===================================================== */

    .mobile-product-view {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        /*
         * Header ke neeche proper space
         * Title header ke andar hide nahi hoga
         */
        padding: 105px 12px 40px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =====================================================
       PRODUCT TITLE
    ===================================================== */

    .mobile-product-title {
        display: block !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 5px !important;

        position: relative !important;
        z-index: 5 !important;

        box-sizing: border-box !important;
    }


    .mobile-product-title .eyebrow {
        display: block !important;

        width: 100% !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        font-size: 9px !important;
        line-height: 1.3 !important;

        letter-spacing: 2.5px !important;

        text-align: left !important;

        color: #b88a43 !important;
    }


    .mobile-product-title h1 {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: var(--serif), Georgia, serif !important;

        font-size: 34px !important;
        line-height: 1.05 !important;

        letter-spacing: -0.5px !important;

        color: #151515 !important;

        white-space: normal !important;

        overflow: visible !important;

        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       MAIN PRODUCT IMAGE
    ===================================================== */

    .mobile-main-product-image {
        display: flex !important;

        width: 100% !important;

        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;

        margin: 0 0 10px !important;
        padding: 12px !important;

        box-sizing: border-box !important;

        background: #f7f5f0 !important;

        border-radius: 16px !important;

        overflow: hidden !important;

        position: relative !important;

        z-index: 1 !important;
    }


    .mobile-main-product-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1;

        transition: opacity .2s ease !important;
    }


    /* =====================================================
       MOBILE GALLERY THUMBNAILS

       MAIN IMAGE
          ↓
       THUMBNAILS
    ===================================================== */

    .mobile-product-gallery {
        display: flex !important;

        flex-direction: row !important;
        align-items: center !important;

        width: 100% !important;

        min-height: 60px !important;

        margin: 0 0 18px !important;
        padding: 0 2px 3px !important;

        box-sizing: border-box !important;

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;
    }


    .mobile-product-gallery::-webkit-scrollbar {
        display: none !important;
    }


    .mobile-gallery-thumb {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 58px !important;

        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;

        margin: 0 !important;
        padding: 2px !important;

        box-sizing: border-box !important;

        background: #f7f5f0 !important;

        border: 2px solid transparent !important;

        border-radius: 9px !important;

        overflow: hidden !important;

        cursor: pointer !important;

        appearance: none !important;
        -webkit-appearance: none !important;
    }


    .mobile-gallery-thumb.active {
        border-color: #c99b4d !important;
    }


    .mobile-gallery-thumb img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        object-fit: cover !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 6px !important;
    }


    /* =====================================================
       ACTION BUTTONS
    ===================================================== */

    .mobile-product-actions {
        display: flex !important;

        flex-direction: row !important;
        align-items: center !important;

        width: 100% !important;

        gap: 8px !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    .mobile-product-actions button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 1 1 0 !important;

        width: 50% !important;
        min-width: 0 !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 8px !important;

        border-radius: 999px !important;

        font-family: inherit !important;

        font-size: 11px !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    .mobile-quote-btn {
        background: #171717 !important;

        color: #fff !important;

        border: 1px solid #171717 !important;
    }


    .mobile-cart-btn {
        background: #c99b4d !important;

        color: #fff !important;

        border: 1px solid #c99b4d !important;
    }


    .mobile-product-actions i {
        font-size: 10px !important;

        margin-right: 6px !important;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .mobile-description {
        display: block !important;

        width: 100% !important;

        margin: 0 0 26px !important;
        padding: 0 5px !important;

        box-sizing: border-box !important;
    }


    .mobile-description-text {
        display: -webkit-box !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.55 !important;

        color: #4b443c !important;

        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;
    }


    .mobile-description-text.expanded {
        display: block !important;

        -webkit-line-clamp: unset !important;

        overflow: visible !important;
    }


    .mobile-description-text p {
        margin: 0 0 8px !important;
    }


    .mobile-description-text p:last-child {
        margin-bottom: 0 !important;
    }


    .mobile-read-more {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin: 12px 0 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        color: #b88942 !important;

        font-size: 11px !important;

        line-height: 1.3 !important;

        cursor: pointer !important;
    }


    .mobile-read-more i {
        margin-left: 7px !important;

        font-size: 9px !important;

        transition: transform .25s ease !important;
    }


    .mobile-read-more.active i {
        transform: rotate(180deg) !important;
    }


    /* =====================================================
       ABOUT THIS STONE
    ===================================================== */

    .mobile-short-description {
        display: block !important;

        width: 100% !important;

        margin: 0 0 32px !important;
        padding: 0 5px !important;

        box-sizing: border-box !important;
    }


    .mobile-section-heading {
        display: block !important;

        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 !important;
    }


    .mobile-section-heading > span {
        display: block !important;

        margin: 0 0 5px !important;

        font-size: 8px !important;

        line-height: 1.3 !important;

        letter-spacing: 2.5px !important;

        color: #b88942 !important;
    }


    .mobile-section-heading h2 {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-family: var(--serif), Georgia, serif !important;

        font-size: 32px !important;
        line-height: 1.05 !important;

        font-weight: 400 !important;

        color: #151515 !important;
    }


    .mobile-product-points {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .mobile-product-points li {
        display: block !important;

        margin: 0 0 8px !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.55 !important;

        color: #4b443c !important;
    }


    .mobile-product-points li:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       SPECIFICATIONS
    ===================================================== */

    .mobile-specifications {
        display: block !important;

        width: 100% !important;

        margin: 0 0 30px !important;
        padding: 0 5px !important;

        box-sizing: border-box !important;
    }


    .mobile-spec-grid {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .mobile-spec-card {
        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        min-height: 75px !important;

        padding: 12px !important;

        box-sizing: border-box !important;

        background: #f7f5f0 !important;

        border-radius: 12px !important;
    }


    .mobile-spec-card strong {
        display: block !important;

        margin: 0 0 5px !important;

        font-size: 8px !important;

        line-height: 1.2 !important;

        letter-spacing: 1.5px !important;

        text-transform: uppercase !important;

        color: #a47a3b !important;
    }


    .mobile-spec-card span {
        display: block !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        color: #28231e !important;
    }


    /* =====================================================
       PREVENT GLOBAL IMAGE / BUTTON CSS FROM BREAKING IT
    ===================================================== */

    .mobile-product-view img {
        max-width: none !important;
    }


    .mobile-product-view button {
        font-family: inherit;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .mobile-product-view {
        padding-top: 98px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        padding-bottom: 30px !important;
    }


    .mobile-product-title {
        margin-bottom: 15px !important;
    }


    .mobile-product-title h1 {
        font-size: 31px !important;
    }


    .mobile-main-product-image {
        height: 285px !important;
        min-height: 285px !important;
        max-height: 285px !important;

        padding: 10px !important;
    }


    .mobile-product-gallery {
        gap: 7px !important;

        margin-bottom: 16px !important;
    }


    .mobile-gallery-thumb {
        flex-basis: 52px !important;

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;

        max-width: 52px !important;

        min-height: 52px !important;
        max-height: 52px !important;
    }


    .mobile-product-actions {
        gap: 6px !important;
    }


    .mobile-product-actions button {
        height: 42px !important;

        font-size: 10px !important;
    }


    .mobile-product-actions i {
        font-size: 9px !important;

        margin-right: 5px !important;
    }


    .mobile-description-text {
        font-size: 12px !important;
    }


    .mobile-section-heading h2 {
        font-size: 29px !important;
    }


    .mobile-product-points li {
        font-size: 12px !important;
    }


    .mobile-spec-grid {
        grid-template-columns: 1fr !important;
    }

}


/*======================================
PRODUCT PAGE HERO
======================================*/

.page-hero{
    position: relative;
    height: 250px;
    min-height: 250px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 88px; /* header */
}

.about-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.55);
    
}

.page-content{
    max-width:700px;
}

.page-content .eyebrow{
    font-size:18px;
    letter-spacing:3px;
    color:var(--gold-bright);
}

.page-content h1{
    margin:10px 0;
    color:#fff;
    font-size:clamp(28px,4vw,48px);
    line-height:1;
}

.page-content p{
    color:rgba(255,255,255,.9);
    font-size:15px;
    line-height:1.5;
    max-width:560px;
    margin:0;
}

.about-hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
}


.page-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(15,15,15,.35),
        rgba(15,15,15,.35)
    );
}

.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at top right,
        rgba(194,154,95,.15),
        transparent 45%
    );
    z-index:1;
}

.page-hero .wrap{
    position:relative;
    z-index:2;
    width:100%;
}

@media(max-width:768px){
    .page-hero{
        height:170px;
        min-height:170px;
        padding-top:72px;
    }

    .page-content h1{
        font-size:28px;
    }

    .page-content p{
        display:none; /* mobile pe space bachao */
    }
}

@media(max-width:480px){

    .page-hero{
        height:42vh;
        min-height:320px;
        padding-top:65px;
    }

    .page-content h1{
        font-size:34px;
    }
}

/*======================================
PAGE
======================================*/

.products-page{
    background:var(--warm-white);
    padding-top:32px;

}

.products-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr); /* pehle 320px tha */
    gap:40px; /* pehle 60px tha */
    align-items:start;
}


.single-price-slider{
    margin-top:15px;
}

.single-price-slider input[type=range]{
    width:100%;
    appearance:none;
    height:4px;
    border-radius:999px;
    background:linear-gradient(to right,#B68A47 100%,#DDD8CF 0);
    outline:none;
}

.single-price-slider input[type=range]::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#111;
    border:3px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    cursor:pointer;
}

.single-price-slider input[type=range]::-moz-range-thumb{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#111;
    border:3px solid #fff;
    cursor:pointer;
}

.price-label{
    margin-top:12px;
    font-size:13px;
    font-weight:600;
    color:#555;
}
/* =========================================================
   DUAL PRICE RANGE
========================================================= */

.price-range-wrapper{
    width:100%;
    padding-top:8px;
}

.price-range-slider{
    position:relative;
    width:100%;
    height:28px;
}

.price-track,
.price-range-progress{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:5px;
    transform:translateY(-50%);
    border-radius:10px;
}

.price-track{
    background:#DDD8CF;
}

.price-range-progress{
    background:#B68A47;
    z-index:2;
}

/* Both sliders occupy same area */
.price-range-slider input[type="range"]{
    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:28px;

    margin:0;
    padding:0;

    background:transparent;

    pointer-events:none;

    -webkit-appearance:none;
    appearance:none;

    z-index:3;
}

/* Chrome / Edge / Safari */
.price-range-slider input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#B68A47;
    border:3px solid #fff;

    box-shadow:0 2px 7px rgba(0,0,0,.18);

    cursor:pointer;

    pointer-events:auto;
}

/* Firefox */
.price-range-slider input[type="range"]::-moz-range-thumb{
    width:18px;
    height:18px;

    border-radius:50%;

    background:#B68A47;
    border:3px solid #fff;

    box-shadow:0 2px 7px rgba(0,0,0,.18);

    cursor:pointer;

    pointer-events:auto;
}

/* Hide native track */
.price-range-slider input[type="range"]::-webkit-slider-runnable-track{
    background:transparent;
}

.price-range-slider input[type="range"]::-moz-range-track{
    background:transparent;
}

/* Values */
.price-values{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:12px;
}

.price-values > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.price-values small{
    font-size:10px;
    color:#8b8176;
}

.price-values strong{
    font-size:13px;
    color:#29231d;
}

.price-separator{
    color:#B68A47;
    font-size:14px;
    margin-top:12px;
}


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

    .price-range-wrapper{
        padding-top:6px;
    }

    .price-range-slider{
        height:30px;
    }

    .price-range-slider input[type="range"]{
        height:30px;
    }

    .price-range-slider input[type="range"]::-webkit-slider-thumb{
        width:19px;
        height:19px;
    }

    .price-values{
        margin-top:10px;
    }

    .price-values small{
        font-size:9px;
    }

    .price-values strong{
        font-size:12px;
    }
}
/*======================================
SIDEBAR
======================================*/
.filter-sidebar{
    position:sticky;
    top:100px;

    width:100%;
    max-width:270px;

    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;

    padding:24px; /* pehle 30px */

    box-shadow:0 12px 35px rgba(0,0,0,.05);
    /* Sidebar independent scroll */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.filter-sidebar::-webkit-scrollbar{
    width: 6px;
}

.filter-sidebar::-webkit-scrollbar-track{
    background: transparent;
}

.filter-sidebar::-webkit-scrollbar-thumb{
    background: rgba(185,121,28,.45);
    border-radius: 999px;
}

.filter-sidebar::-webkit-scrollbar-thumb:hover{
    background: rgba(185,121,28,.7);
}
.filter-sidebar form{

    display:flex;

    flex-direction:column;

    gap:26px;
}



/*======================================
FILTER BOX
======================================*/

.filter-box{

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

    padding-bottom:22px;
}

.filter-box:last-child{

    border:none;

    padding-bottom:0;
}
.filter-box h4{
    font-family:var(--serif);
    font-size:20px; /* pehle 22px */
    margin-bottom:14px;
    color:var(--charcoal);
}





/*======================================
SEARCH
======================================*/

.filter-box input[type=text]{

    width:100%;

    height:50px;

    border-radius:30px;

    border:1px solid rgba(0,0,0,.12);

    padding:0 20px;

    outline:none;

    transition:.35s;

    font-size:15px;
}

.filter-box input[type=text]:focus{

    border-color:var(--gold);

    box-shadow:
    0 0 0 4px rgba(173,138,85,.08);
}



/*======================================
PRICE INPUTS
======================================*/

.filter-box input[type=number]{

    width:100%;

    height:46px;

    border-radius:12px;

    border:1px solid rgba(0,0,0,.12);

    padding:0 16px;

    margin-bottom:12px;

    outline:none;
}

.filter-box input[type=number]:focus{

    border-color:var(--gold);
}



/*======================================
CHECKBOX
======================================*/

.filter-box label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    font-size:14px;

    color:var(--graphite);

    cursor:pointer;

    transition:.3s;
}

.filter-box label:hover{

    color:var(--gold);
}

.filter-box input[type=checkbox]{

    width:18px;
    height:18px;

    accent-color:var(--gold);

    cursor:pointer;
}



/*======================================
BUTTON
======================================*/

.filter-sidebar .btn-primary{

    width:100%;

    justify-content:center;

    padding:15px;

    border-radius:40px;

    font-size:15px;

    margin-top:10px;
}



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

.products-content{

    width:100%;
}



/*======================================
TOOLBAR
======================================*/

.products-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0 28px;

    padding-bottom:20px;

    border-bottom:1px solid var(--line);
}

.products-toolbar strong{

    color:var(--gold);

    font-size:20px;
}

.products-toolbar select{

    width:210px;

    height:48px;

    border-radius:30px;

    border:1px solid rgba(0,0,0,.12);

    padding:0 18px;

    background:#fff;

    outline:none;

    cursor:pointer;

    transition:.3s;
}

.products-toolbar select:hover{

    border-color:var(--gold);
}



/*======================================
FILTER TAGS
======================================*/

.active-filters{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;
}

.filter-tag{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    background:#fff;

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

    font-size:14px;

    transition:.35s;
}

.filter-tag:hover{

    background:var(--gold);

    color:#fff;
}



/*======================================
RESULT TEXT
======================================*/

.results-count{

    margin-bottom:30px;

    color:var(--warm-grey);

    font-size:15px;
}
/* Search Section */
.products-search{
    margin-bottom: 22px;
}


.products-search h4{
    margin-bottom:14px;
    font-size:18px;
    font-weight:600;
    color:#171513;
}
    
    .search-box{
        display:flex;
        align-items:center;
        width:100%;
        max-width:340px;
        height:50px;
        padding:4px 4px 4px 18px;
    
        background:#F8F6F2;
        border:1px solid rgba(0,0,0,.08);
        border-radius:999px;
            position:relative;
    }
    .search-section{
    margin-top:0;
    padding-top:0;
}

.search-section h4{
    margin:0 0 10px;
}

@media(max-width:768px){

    .search-section{
        margin-top:-60px;
        padding-top:0;
    }

    .search-section h4{
        margin-bottom:8px;
    }
}
.search-suggestions{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    display:none;
    overflow:hidden;
    z-index:99;
}

.search-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;
    cursor:pointer;

    transition:.25s;
}

.search-item:hover{
    background:#F8F5EF;
}

.search-item i{
    color:#B68A4A;
}
.search-item.active{
    background:#F8F5EF;
    color:#B68A4A;
}

.search-item.active i{
    color:#B68A4A;
}
.search-box input{
    flex:1;
    border:none;
    background:transparent;
    outline:none;
    font-size:16px;
    color:#2A241D;
}

.search-box input::placeholder{
    color:#8C8175;
}

.search-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#B68A4A;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s ease;
    flex-shrink:0;
}

.search-btn:hover{
    background:#9E7438;
    transform:scale(1.05);
}


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

@media(max-width:1100px){

.products-layout{

grid-template-columns:1fr;

}

.filter-sidebar{

position:sticky;
    top:100px; 

margin-bottom:50px;

}

}
/* ==============================
   TABLET (1024px)
============================== */
@media (max-width:1024px){

    .products-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .filter-sidebar{
        position:relative;
        top:0;
        padding:24px;
        border-radius:18px;
    }

    .products-toolbar{
        flex-wrap:wrap;
        gap:15px;
    }

    .products-toolbar select{
        width:220px;
    }
}


/* ==============================
   MOBILE (768px)
============================== */


/* ==============================
   SMALL MOBILE (480px)
============================== */
@media (max-width:480px){

    .wrap{
        padding-inline:18px;
    }

    .page-hero{
        height:40vh;
        min-height:280px;
    }

    .page-content{
        text-align:center;
    }

    .page-content h1{
        font-size:32px;
        line-height:1.15;
    }

    .page-content p{
        font-size:15px;
    }

    .filter-sidebar{
        padding:18px;
    }

    .filter-box h4{
        font-size:18px;
    }

    .single-price-slider input[type=range]{
        height:5px;
    }

    .single-price-slider input[type=range]::-webkit-slider-thumb{
        width:20px;
        height:20px;
    }

    .single-price-slider input[type=range]::-moz-range-thumb{
        width:20px;
        height:20px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .product-body{
        padding:16px;
    }

    .product-body h3{
        font-size:20px;
    }

    .product-footer{
        margin-top:16px;
    }
}

.mobile-filter-bar,
.filter-close,
.filter-overlay{
    display:none;
}
@media (max-width:992px){
    .products-layout{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:24px;
    }

    .filter-sidebar{
        max-width:100%;
    }
}
@media(max-width:768px){

    .mobile-filter-bar{
        display:block;
        margin-bottom:18px;
    }

    .mobile-filter-btn{
        width:90%;
        height:50px;
        border:none;
        border-radius:30px;
        background:#111;
        color:#fff;
        font-weight:600;
        cursor:pointer;
        margin-top:10px;
    }

        .filter-sidebar{
        position:fixed !important;
        top:0;
        left:-100%;
        width:85%;
        max-width:340px;
        height:100dvh;              /* mobile viewport */
        background:#fff;
        z-index:9999;               /* overlay se upar */
        transition:left .35s ease;
        border-radius:0 24px 24px 0;
        padding:20px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .filter-sidebar.active{
        left:0;
    }

    .filter-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        backdrop-filter:blur(3px);
        z-index:9998;               /* sidebar se niche */
        opacity:0;
        visibility:hidden;
        transition:.3s;
    }

    .filter-overlay.active{
        opacity:1;
        visibility:visible;
    }

    .filter-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-left:auto;
    margin-bottom:20px;
    border:none;
    border-radius:50%;
    background:#f2f2f2;
    color:#111;
    cursor:pointer;
    position:sticky;
    top:0;
    z-index:2;
}

.filter-close i{
    font-size:20px;
    color:#111;
}
.products-search{
    max-width:420px;
    margin:0 auto 35px;
}

.products-search h4{
    font-family:var(--serif);
    font-size:32px;
    margin-bottom:18px;
}

.products-search input{
    width:100%;
    height:50px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:30px;
    padding:0 20px;
}

    .filter-close svg{
        color:#111 !important;
        width:20px;
        height:20px;
    }
    

    .products-layout{
        grid-template-columns:1fr;
    }
}

/*======================================
PRODUCT GRID
======================================*/

.product-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:28px;
    align-items:center;
    min-height:80vh;
}

.gallery-main{
    height:720px;
}

.gallery-main img{
    width:100%;
    height:100%;
    object-fit:cover;
}



@media(max-width:1200px){

.product-grid{

grid-template-columns:repeat(2,1fr);

}

}




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

.product-card{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:400px; /* same height */
    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.08);

    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        border-color .45s;

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

}

.product-card:hover{

    transform:translateY(-12px);

    border-color:rgba(173,138,85,.45);

    box-shadow:
        0 35px 70px rgba(0,0,0,.12);

}


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

.product-image{

    position:relative;

    overflow:hidden;

    height:220px;

    background:#f6f6f4;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .6s ease;

}

.product-card:hover img{

    transform:scale(1.08);

}


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

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.28),
        transparent 45%);

    opacity:0;

    transition:.45s;

}

.product-card:hover .product-image::after{

    opacity:1;

}


/*======================================
BADGES
======================================*/

.product-badge{

    position:absolute;

    left:18px;

    top:18px;

    z-index:4;

    background:var(--gold);

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:11px;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.product-badge.new{

    background:#1f7d46;

}

.product-badge.featured{

    background:var(--gold);

}


/*======================================
QUICK VIEW
======================================*/

.quick-view{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:
        translateX(-50%)
        translateY(30px);

    opacity:0;

    background:#fff;

    color:var(--charcoal);

    padding:12px 24px;

    border-radius:30px;

    font-size:13px;

    transition:.45s;

    z-index:5;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

}

.product-card:hover .quick-view{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}


/*======================================
BODY
======================================*/

.product-body{
    padding:15px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.product-body .category{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:11px;

    font-weight:600;

}

.product-body h3{
    font-size:20px;
    line-height:1.3;
    margin:0px 0 0px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    min-height:58px;
}

.product-card:hover h3{

    color:var(--gold);

}


/*======================================
SPECIFICATIONS
======================================*/

.product-body ul{

    list-style:none;

    padding:0;

    margin:0;

}

.product-body li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0px 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    font-size:13px;

    color:var(--graphite);

}
.product-body ul li:nth-child(n+4){
    display:none;
}

.product-body li:last-child{

    border:none;

}

.product-body strong{

    color:var(--charcoal);

    font-weight:600;

}


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

.product-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

       margin-top:0px;
    padding-top:5px;


}

.product-footer .view{

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    transition:.35s;

}

.product-card:hover .view{

    letter-spacing:.05em;

}


/*======================================
WISHLIST
======================================*/

.wishlist{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(0,0,0,.08);

    transition:.35s;

}

.wishlist:hover{

    background:var(--gold);

    color:#fff;

}


/*======================================
PAGINATION
======================================*/

.pagination-wrap{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

.pagination{

    display:flex;

    gap:12px;

}

.pagination .page-item{

    list-style:none;

}

.pagination .page-link{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.08);

    color:var(--charcoal);

    transition:.35s;

    background:#fff;

}

.pagination .page-link:hover{

    background:var(--gold);

    color:#fff;

    border-color:var(--gold);

}

.pagination .active .page-link{

    background:var(--gold);

    color:#fff;

    border-color:var(--gold);

}


/*======================================
EMPTY STATE
======================================*/

.empty-products{

    text-align:center;

    padding:120px 20px;

}

.empty-products svg{

    width:80px;

    margin:auto;

    color:var(--gold);

}

.empty-products h3{

    margin:25px 0 15px;

    font-size:34px;

}

.empty-products p{

    color:var(--warm-grey);

    max-width:480px;

    margin:auto;

    line-height:1.8;

}


/*======================================
HOVER BORDER EFFECT
======================================*/

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:24px;

    transition:.45s;

    pointer-events:none;

}

.product-card:hover::before{

    border-color:rgba(194,154,95,.35);

}


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

.product-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

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

    transform:skewX(-22deg);

    z-index:3;

}

.product-card:hover .product-image::before{

    animation:shine 1.1s;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:140%;

}

}


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

@media(max-width:768px){

.product-image{

height:250px;

}

.product-body{

padding:22px;

}

.product-body h3{

font-size:24px;

}

.quick-view{

display:none;

}

}

/* =========================================
   BLOG SINGLE PAGE (Compact Luxury)
========================================= */

.section-pad{
    padding:50px 0;
}
.featured-blog{
    padding:80px 0;
}

.featured-card{

    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;

    align-items:center;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.08);

    transition:.45s;

    box-shadow:
    0 20px 60px rgba(0,0,0,.06);

}

.featured-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,.12);

}

.featured-image{

    height:520px;

    overflow:hidden;

}

.featured-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s;

}

.featured-card:hover img{

    transform:scale(1.08);

}

.featured-content{

    padding:50px;

}

.badge{

    display:inline-flex;

    padding:8px 18px;

    border-radius:40px;

    background:var(--gold);

    color:#fff;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.15em;

}

.featured-content h2{

    margin:25px 0;

    font-size:44px;

    line-height:1.15;

}

.featured-content p{

    color:var(--graphite);

    line-height:1.9;

}

.meta{

    display:flex;

    gap:25px;

    margin-top:35px;

    color:var(--warm-grey);

    font-size:14px;

}


/*========================================
FILTER
========================================*/

.blog-filter{

    margin-bottom:60px;

}

.blog-filter form{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.blog-filter input,
.blog-filter select{

    flex:1;

    min-width:220px;

    height:58px;

    padding:0 22px;

    border-radius:40px;

    border:1px solid rgba(0,0,0,.08);

    background:#fff;

    outline:none;

    font-size:15px;

    transition:.35s;

}

.blog-filter input:focus,
.blog-filter select:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(173,138,85,.12);

}


/*========================================
BLOG GRID
========================================*/

.blog-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.blog-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.08);

    transition:.45s;

    display:flex;

    flex-direction:column;

}

.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);

}

.blog-image{

    height:250px;

    overflow:hidden;

}

.blog-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:1s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.blog-body .category{

    color:var(--gold);

    font-size:11px;

    letter-spacing:.15em;

    text-transform:uppercase;

    font-weight:600;

}

.blog-body h3{

    margin:18px 0;

    font-size:30px;

    line-height:1.25;

    min-height:78px;

}

.blog-body p{

    color:var(--graphite);

    line-height:1.8;

    margin-bottom:auto;

}

.blog-body .meta{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    font-size:13px;

    color:var(--warm-grey);

}

/*=====================================
BLOG DETAIL
=====================================*/

.blog-detail{
    background:#F8F6F2;
    padding:55px 0 70px;
}

.blog-main{
    display:grid;
    grid-template-columns:minmax(0,1.75fr) 310px;
    gap:42px;
    align-items:start;
}

/* Article */

.article{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 55px rgba(0,0,0,.05);
}

.article-image{
    height:460px;
}

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

.article-content{
    padding:42px;
}

/* Typography */

.article-content h2{
    font-size:36px;
    margin:34px 0 16px;
    line-height:1.15;
}

.article-content h3{
    font-size:28px;
    margin:28px 0 14px;
}

.article-content p{
    font-size:17px;
    line-height:1.9;
    color:#4F4B46;
    margin-bottom:18px;
}

.article-content ul,
.article-content ol{
    margin:18px 0;
    padding-left:22px;
}

.article-content li{
    margin-bottom:10px;
    line-height:1.8;
}

.article-content img{
    width:100%;
    border-radius:18px;
    margin:26px 0;
}

.article-content blockquote{
    margin:32px 0;
    padding:28px;
    background:#FAF8F3;
    border-left:4px solid var(--gold);
    font-family:var(--serif);
    font-size:24px;
    border-radius:0 18px 18px 0;
}

/* Tags */

.article-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.article-tags span{
    padding:8px 16px;
    background:#F3F3F1;
    border-radius:999px;
    font-size:14px;
}

/* Share */

.article-share{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(0,0,0,.08);
}

.share-icons{
    display:flex;
    gap:12px;
    margin-top:14px;
}

.share-icons a{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#F3F3F1;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

.share-icons a:hover{
    background:var(--gold);
    color:#fff;
}

/* Author */

.author-card{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid rgba(0,0,0,.08);
}

.author-avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-bright));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:700;
}

/* Sidebar */

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

.sidebar-card{
    background:#fff;
    border-radius:22px;
    padding:24px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 12px 35px rgba(0,0,0,.04);
}

.sidebar-card h4{
    margin-bottom:18px;
    font-size:24px;
}

/* Search */

.sidebar-search{
    position:relative;
}

.sidebar-search input{
    width:100%;
    height:52px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    padding:0 18px;
}

.sidebar-search button{
    position:absolute;
    right:6px;
    top:6px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
}

/* Categories */

.sidebar-links{
    display:flex;
    flex-direction:column;
}

.sidebar-links a{
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:.3s;
}

.sidebar-links a:last-child{
    border:none;
}

.sidebar-links a:hover{
    color:var(--gold);
    padding-left:6px;
}

/* Recent */

.recent-item{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}

.recent-item:last-child{
    margin-bottom:0;
}

.recent-item img{
    width:72px;
    height:72px;
    border-radius:14px;
    object-fit:cover;
}

.recent-item h5{
    font-size:15px;
    line-height:1.4;
    margin-top:4px;
}

.recent-item small{
    color:#8E8377;
}

/* CTA */

.cta-card{
    background:linear-gradient(135deg,#181818,#2A2A2A);
    color:#fff;
}

.cta-card h4{
    color:#fff;
}

.cta-card p{
    color:rgba(255,255,255,.75);
    margin-bottom:20px;
}

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

@media(max-width:992px){

.blog-main{
    grid-template-columns:1fr;
}

.article-image{
    height:340px;
}

}

@media(max-width:640px){

.blog-detail{
    padding:35px 0 50px;
}

.article-image{
    height:230px;
}

.article-content{
    padding:24px;
}

.article-content h2{
    font-size:28px;
}

.article-content h3{
    font-size:22px;
}

.article-content p{
    font-size:15px;
}

.author-card{
    flex-direction:column;
    text-align:center;
}

.share-icons{
    justify-content:center;
}

.sidebar-card{
    padding:20px;
}

}

/* Recent Posts */

.recent-post{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}

.recent-post img{
    width:78px;
    height:78px;
    border-radius:12px;
}

.recent-post h5{
    font-size:15px;
    line-height:1.4;
    margin:4px 0 0;
}

/* Related */

.related-section{
    padding-top:50px;
}

.related-section .section-head{
    margin-bottom:34px;
}

/* =========================================
   Tablet
========================================= */

@media(max-width:992px){

.blog-layout{
    grid-template-columns:1fr;
    gap:35px;
}

.blog-sidebar{
    position:relative;
    top:0;
}

.featured-image{
    height:320px;
}

}

/* =========================================
   Mobile
========================================= */

@media(max-width:768px){

.section-pad{
    padding:40px 0;
}

.featured-image{
    height:240px;
    border-radius:18px;
    margin-bottom:20px;
}

.blog-body h2{
    font-size:30px;
}

.blog-body h3{
    font-size:24px;
}

.blog-body p{
    font-size:15px;
    line-height:1.7;
}

.blog-body blockquote{
    padding:22px;
    font-size:20px;
}

.author-box{
    flex-direction:column;
    text-align:center;
}

.share-box{
    padding:20px;
}

.share-icons{
    justify-content:center;
    flex-wrap:wrap;
}

.sidebar-box{
    padding:20px;
}

.recent-post img{
    width:70px;
    height:70px;
}

}

/*========================================
LAYOUT
========================================*/

.project-section{
    padding:90px 0;
}

.project-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:60px;
}

@media(max-width:991px){

.project-layout{
    grid-template-columns:1fr;
}

}


/*========================================
SIDEBAR
========================================*/

.project-sidebar{
    position:sticky;
    top:120px;
    align-self:start;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:22px;
    padding:28px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.project-sidebar h4{
    font-size:20px;
    margin-bottom:22px;
}

.project-search{
    width:100%;
    height:54px;
    border-radius:30px;
    border:1px solid rgba(0,0,0,.08);
    padding:0 22px;
    outline:none;
    margin-bottom:28px;
}

.filter-block{
    margin-top:26px;
    padding-top:26px;
    border-top:1px solid rgba(0,0,0,.08);
}

.filter-block:first-child{
    margin-top:0;
    padding-top:0;
    border:none;
}

.filter-block h5{
    margin-bottom:15px;
    font-size:16px;
}

.filter-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.filter-item label{
    cursor:pointer;
}


/*========================================
GRID
========================================*/

/*==============================
GRID
==============================*/

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

@media(max-width:992px){

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

}


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

.portfolio-card{
    display:block;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    text-decoration:none;
    border:1px solid rgba(0,0,0,.08);
    transition:.45s var(--ease);
    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

.portfolio-card:hover{
    transform:translateY(-12px);
    box-shadow:0 28px 65px rgba(0,0,0,.12);
}


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

.portfolio-thumb{
    height:330px;
    overflow:hidden;
    position:relative;
    background:#efefef;
}

.portfolio-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .8s ease;
}

.portfolio-card:hover .portfolio-thumb img{
    transform:scale(1.08);
}


/*==============================
BODY
==============================*/

.portfolio-body{
    padding:30px;
}

.portfolio-location{
    display:inline-block;
    color:var(--gold);
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.18em;
    margin-bottom:14px;
}

.portfolio-body h3{
    color:var(--charcoal);
    font-size:32px;
    line-height:1.2;
    margin-bottom:22px;
    transition:.35s;
}

.portfolio-card:hover h3{
    color:var(--gold);
}


/*==============================
META
==============================*/

.portfolio-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:22px;
}

.portfolio-info div{
    background:#fafaf8;
    padding:16px;
    border-radius:14px;
}

.portfolio-info small{
    display:block;
    color:#8d8d8d;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:10px;
    margin-bottom:6px;
}

.portfolio-info strong{
    color:var(--charcoal);
    font-size:14px;
}


/*==============================
DESCRIPTION
==============================*/

.portfolio-body p{
    color:var(--warm-grey);
    line-height:1.8;
    margin-bottom:24px;
}


/*==============================
BUTTON
==============================*/

.portfolio-btn{
    color:var(--gold);
    font-weight:600;
    transition:.35s;
}

.portfolio-card:hover .portfolio-btn{
    letter-spacing:.06em;
}


/*==============================
PAGINATION
==============================*/

.pagination-wrap{
    margin-top:70px;
    display:flex;
    justify-content:center;
}

@media(max-width:900px){

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

}


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

.project-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.07);
    transition:.45s var(--ease);
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(0,0,0,.12);
}


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

.project-image{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/11;
    background:#eee;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.project-card:hover img{
    transform:scale(1.08);
}

.project-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.45),
        transparent 45%);
}


/*========================================
BADGE
========================================*/

.project-badge{
    position:absolute;
    top:20px;
    left:20px;
    background:var(--gold);
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    z-index:2;
}


/*========================================
BODY
========================================*/

.project-body{
    padding:28px;
}

.project-location{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:11px;
    margin-bottom:10px;
}

.project-body h3{
    font-size:30px;
    line-height:1.2;
    margin-bottom:16px;
}

.project-body p{
    color:var(--warm-grey);
    line-height:1.8;
    margin-bottom:24px;
}


/*========================================
META
========================================*/

.project-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:24px;
}

.project-meta div{
    background:var(--off-white);
    border-radius:14px;
    padding:16px;
}

.project-meta small{
    display:block;
    color:var(--warm-grey);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:10px;
}

.project-meta strong{
    color:var(--charcoal);
    font-size:14px;
}


/*========================================
BUTTON
========================================*/

.project-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--gold);
    font-weight:600;
    transition:.35s;
}

.project-card:hover .project-link{
    gap:14px;
}


/*========================================
EMPTY
========================================*/

.no-projects{
    background:#fff;
    border:1px dashed rgba(0,0,0,.15);
    padding:90px 40px;
    text-align:center;
    border-radius:24px;
}

.no-projects h3{
    margin-bottom:15px;
}

.no-projects p{
    color:var(--warm-grey);
}


/*========================================
PAGINATION
========================================*/

.pagination-wrap{
    margin-top:70px;
    display:flex;
    justify-content:center;
}

.pagination{
    gap:10px;
}

.pagination .page-link{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:none;
    color:var(--charcoal);
    background:#fff;
    transition:.35s;
}

.pagination .active .page-link,
.pagination .page-link:hover{
    background:var(--gold);
    color:#fff;
}
/*==================================================
PROJECT SHOW HERO
==================================================*/

.project-show-hero{
    position:relative;
    height:75vh;
    min-height:620px;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.project-show-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
}

.project-show-hero .overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.68)
        );
}

.project-show-hero .hero-content{
    position:relative;
    z-index:3;
    color:#fff;
    max-width:900px;
}

.project-show-hero .eyebrow{
    color:var(--gold-bright);
    letter-spacing:.3em;
}

.project-show-hero h1{
    margin:18px 0 30px;
    color:#fff;
    font-size:clamp(50px,6vw,82px);
    line-height:1.05;
}

.hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.hero-meta span{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.15);
    padding:14px 22px;
    border-radius:40px;
    color:#fff;
    font-size:14px;
}

.hero-meta strong{
    color:#fff;
    font-weight:600;
}


/*==================================================
OVERVIEW
==================================================*/

.project-overview{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:80px;
    align-items:start;
}

.overview-content h2{
    margin:18px 0 28px;
    font-size:52px;
}

.overview-content p{
    color:var(--warm-grey);
    line-height:2;
    margin-bottom:20px;
}

.overview-content ul{
    margin-top:25px;
    padding-left:22px;
}

.overview-content li{
    margin-bottom:14px;
    color:var(--graphite);
}


/*==================================================
SIDEBAR INFO
==================================================*/

.overview-info{
    position:sticky;
    top:120px;
}

.info-card{
    background:#fff;
    padding:28px;
    border-radius:20px;
    margin-bottom:18px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.info-card h4{
    margin-bottom:10px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:12px;
}

.info-card p{
    color:var(--charcoal);
    font-size:18px;
    line-height:1.6;
}


/*==================================================
GALLERY
==================================================*/

.gallery-section{
    background:var(--ivory);
}

.project-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.project-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.project-gallery-item{
    display:block;
    overflow:hidden;
    border-radius:22px;
    position:relative;
    aspect-ratio:1.15/1;
}

.project-gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.project-gallery-item:hover img{
    transform:scale(1.08);
}

@media(max-width:991px){

.project-gallery-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

.project-gallery-grid{
    grid-template-columns:1fr;
}

}
.gallery-item{
    display:block;
    overflow:hidden;
    border-radius:24px;
    position:relative;
    background:#eee;
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:transform .7s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.25),
        transparent);
    opacity:0;
    transition:.4s;
}

.gallery-item:hover::after{
    opacity:1;
}


/*==================================================
RELATED PROJECTS
==================================================*/

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.related-card{
    background:#fff;
    overflow:hidden;
    border-radius:24px;
    transition:.45s;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 15px 35px rgba(0,0,0,.05);
}

.related-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.related-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.7s;
}

.related-card:hover img{
    transform:scale(1.08);
}

.related-content{
    padding:28px;
}

.related-content span{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:11px;
}

.related-content h3{
    margin:14px 0 18px;
    font-size:28px;
    line-height:1.3;
}

.related-content a{
    color:var(--gold);
    font-weight:600;
}

.related-content a:hover{
    letter-spacing:.05em;
}


/*==================================================
TYPOGRAPHY
==================================================*/

.overview-content h3{
    margin:40px 0 18px;
    font-size:34px;
}

.overview-content h4{
    margin:35px 0 15px;
    font-size:24px;
}

.overview-content img{
    max-width:100%;
    border-radius:20px;
    margin:25px 0;
}

.overview-content table{
    width:100%;
    border-collapse:collapse;
    margin:30px 0;
}

.overview-content table td,
.overview-content table th{
    border:1px solid rgba(0,0,0,.08);
    padding:16px;
}

.overview-content blockquote{
    margin:35px 0;
    padding:30px;
    background:var(--ivory);
    border-left:4px solid var(--gold);
    border-radius:14px;
    font-style:italic;
}


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

@media(max-width:1100px){

.project-overview{
    grid-template-columns:1fr;
    gap:50px;
}

.overview-info{
    position:static;
}

.project-gallery{
    grid-template-columns:repeat(2,1fr);
}

.related-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.project-show-hero{
    height:65vh;
    min-height:520px;
}

.project-show-hero h1{
    font-size:42px;
}

.hero-meta{
    flex-direction:column;
    gap:12px;
}

.project-gallery,
.related-grid{
    grid-template-columns:1fr;
}

.overview-content h2{
    font-size:38px;
}

.related-content h3{
    font-size:24px;
}

}


.contact-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:60px;
    align-items:stretch; /* start ki jagah */
}

.contact-form{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.5);
    border-radius:30px;
    padding:55px;
    box-shadow:0 40px 90px rgba(0,0,0,.12);
    position:relative;
    overflow:hidden;

    height:100%;
    display:flex;
    flex-direction:column;
}

/* =========================================
   CONTACT FORM
========================================= */

.contact-form {
    position: relative;
}


/* Decorative Circle */
.contact-form::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    background: var(--gold);
    opacity: .08;

    border-radius: 50%;

    top: -70px;
    right: -70px;

    pointer-events: none;
    z-index: 0;
}


/* Form */
.contact-form form {
    display: flex;
    flex-direction: column;
    flex: 1;

    position: relative;
    z-index: 2;
}


/* =========================================
   INPUTS
========================================= */

.contact-form input,
.contact-form textarea,
.contact-form select {

    width: 100%;

    padding: 18px;

    margin-bottom: 18px;

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

    border-radius: 10px;

    font-family: var(--sans);

    font-size: 14px;

    background: #fff;

    color: #222;

    transition: .35s;

    box-sizing: border-box;

    outline: none;
}


/* Focus */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {

    border-color: var(--gold);

    box-shadow:
        0 0 0 4px rgba(173,138,85,.12);

    outline: none;
}


/* =========================================
   PHONE + COUNTRY CODE
========================================= */

.phone-input-group {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    margin-bottom: 18px;
}


/* Country Code */
.phone-input-group .country-code {

    width: 145px !important;

    flex: 0 0 145px;

    height: 58px;

    padding: 0 14px !important;

    margin: 0 !important;

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

    border-radius: 10px;

    background: #fff;

    color: #222;

    font-family: var(--sans);

    font-size: 14px;

    cursor: pointer;

    box-sizing: border-box;

    transition: .35s;

    outline: none;
}


/* Phone Number */
.phone-input-group .phone-number {

    flex: 1;

    width: auto !important;

    min-width: 0;

    height: 58px;

    padding: 18px !important;

    margin: 0 !important;

    box-sizing: border-box;
}


/* Focus */
.phone-input-group .country-code:focus,
.phone-input-group .phone-number:focus {

    border-color: var(--gold);

    box-shadow:
        0 0 0 4px rgba(173,138,85,.12);

    outline: none;
}


/* =========================================
   TEXTAREA
========================================= */

.contact-form textarea {

    flex: 1;

    min-height: 180px;

    resize: none;
}


/* =========================================
   BUTTON
========================================= */

.contact-form .btn-primary {

    position: relative;

    z-index: 2;

    margin-top: auto;
}


/* =========================================
   SMALL SCREEN
========================================= */

@media (max-width: 600px) {

    .phone-input-group {

        gap: 8px;

        margin-bottom: 18px;
    }


    .phone-input-group .country-code {

        width: 120px !important;

        flex: 0 0 120px;

        height: 54px;

        padding: 0 10px !important;

        font-size: 12px;
    }


    .phone-input-group .phone-number {

        height: 54px;

        padding: 16px !important;

        font-size: 13px;
    }

}
/* Form content ko upar lao */
.contact-form .eyebrow,
.contact-form h2,
.contact-form form{
    position: relative;
    z-index: 2;
}

/* Inputs bhi clickable rahenge */
.contact-form input,
.contact-form textarea,
.contact-form button{
    position: relative;
    z-index: 2;
}
.contact-form::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:var(--gold);
    opacity:.08;
    border-radius:50%;
    top:-70px;
    right:-70px;

    pointer-events:none;   /* ADD */
    z-index:0;             /* ADD */
}
.contact-form form{
    display:flex;
    flex-direction:column;
    flex:1;
    position:relative;   /* ADD */
    z-index:2;           /* ADD */
}

.contact-form textarea{
    flex:1;
    min-height:180px;
    resize:none;
}

.contact-form .btn-primary{
    margin-top:auto;
}
.contact-form input,
.contact-form textarea{

width:100%;

padding:18px;

margin-bottom:18px;

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

border-radius:10px;

font-family:var(--sans);

transition:.35s;

}
.contact-form input,
.contact-form textarea,
.contact-form .btn-primary{
    position:relative;
    z-index:2;
}
.contact-form input:focus,
.contact-form textarea:focus{

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(173,138,85,.12);

outline:none;

}

.contact-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    align-content:start;
}

.info-card{
    position:relative;   /* ADD */
    overflow:hidden;     /* ADD */

    padding:26px;
    min-height:180px;
    border-radius:22px;
    background:linear-gradient(145deg,#fff,#f3f3f1);
    border:1px solid rgba(173,138,85,.18);
    transition:.5s;
}

.info-card h3{
    font-size:20px;
    margin-bottom:8px;
}

.info-card p{
    font-size:15px;
    line-height:1.6;
}

/* Mobile */
@media (max-width:768px){
    .contact-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .contact-info{
        grid-template-columns:1fr;
    }

    .info-card{
        min-height:auto;
    }
}

.info-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    45deg,
    transparent,
    rgba(230,195,90,.12));

    opacity:0;

    transition:.5s;
}

.info-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 35px 80px rgba(0,0,0,.12);
}

.info-card:hover::after{

    opacity:1;
}


.map-section iframe{

width:100%;

height:520px;

border:0;

filter:grayscale(.15);

}

.info-icon{

 width:60px;
    height:60px;
    font-size:24px;
    border-radius:18px;
    margin-bottom:18px;
    background:linear-gradient(
135deg,
var(--gold),
var(--gold-bright));

display:flex;
align-items:center;
justify-content:center;
color:#fff;
box-shadow:0 18px 40px rgba(173,138,85,.3);
}
.contact-section{

background:

radial-gradient(circle at top left,
rgba(230,195,90,.08),
transparent 40%),

radial-gradient(circle at bottom right,
rgba(173,138,85,.08),
transparent 35%),

#f8f8f6;
}
/* ===========================
   Contact Hero
=========================== */

.contact-hero{
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contact-hero-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}

.contact-hero-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 10s ease forwards;
}

.contact-hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(22,22,21,.55),
        rgba(22,22,21,.35),
        rgba(22,22,21,.60)
    );
}

.contact-hero .wrap{
    position: relative;
    z-index: 2;
}

.contact-hero-content{
    max-width: 900px;
    margin: auto;
    text-align: center;
    color: var(--warm-white);
}

.contact-hero-content .eyebrow{
    display: inline-block;
    margin-bottom: 18px;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.contact-hero-content h1{
    font-family: var(--serif);
    font-size: clamp(46px,6vw,80px);
    line-height: 1.05;
    font-weight: 500;
    margin-bottom: 22px;
    color: #fff;
}

.contact-hero-content p{
    max-width: 700px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,.85);
}

@keyframes heroZoom{

    0%{
        transform: scale(1.12);
    }

    100%{
        transform: scale(1);
    }

}
/* ======================================
   TABLET (1024px)
====================================== */
@media (max-width:1024px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .contact-form,
    .contact-info{
        width:100%;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .contact-hero{
        height:55vh;
        min-height:420px;
    }
}

/* ======================================
   MOBILE (768px)
====================================== */
@media (max-width:768px){

    .section-pad{
        padding:70px 0;
    }

    /* Hero */
    .contact-hero{
        height:45vh;
        min-height:340px;
    }

    .contact-hero-content{
        padding:0 10px;
    }

    .contact-hero-content .eyebrow{
        font-size:12px;
        letter-spacing:3px;
        margin-bottom:12px;
    }

    .contact-hero-content h1{
        font-size:42px;
        margin-bottom:16px;
    }

    .contact-hero-content p{
        font-size:15px;
        line-height:1.7;
    }

    /* Contact */
    .contact-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .contact-form{
        padding:0;
    }

    .contact-form h2{
        font-size:34px;
        line-height:1.2;
        margin-bottom:24px;
    }

    .contact-form form{
        gap:16px;
    }

    .contact-form input,
    .contact-form textarea{
        width:100%;
        font-size:15px;
        padding:15px 18px;
        border-radius:14px;
    }

    .contact-form textarea{
        min-height:140px;
    }

    .contact-form .btn-primary{
        width:100%;
        justify-content:center;
        padding:16px;
    }

    /* Info Cards */
    .contact-info{
        display:grid;
        gap:18px;
    }

    .info-card{
        padding:22px;
        border-radius:18px;
    }

    .info-card h3{
        font-size:20px;
        margin:14px 0 8px;
    }

    .info-card p{
        font-size:15px;
        line-height:1.7;
    }

    .info-icon{
        width:56px;
        height:56px;
        font-size:24px;
    }

    /* Map */
    .map-section iframe{
        width:100%;
        height:320px;
        border:0;
    }

    /* Why Section */
    .why-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .why-card{
        padding:24px;
        border-radius:18px;
        text-align:center;
    }

    .why-card h3{
        font-size:22px;
        margin-bottom:10px;
    }

    .why-card p{
        font-size:15px;
    }
}
/* ===============================
   WHY STONEFACTORY
================================ */

.why-contact{
    background:
        radial-gradient(circle at top center, rgba(201,154,82,.08), transparent 45%),
        #F8F6F2;
}

.why-contact .section-head{
    max-width:760px;
    margin:0 auto 60px;
}

.why-contact .section-head p{
    color:#6E6458;
    font-size:17px;
    line-height:1.8;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.why-card{
    position:relative;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);
    border:1px solid rgba(201,154,82,.14);
    border-radius:30px;
    padding:36px 32px;
    min-height:280px;
    overflow:hidden;
    transition:.45s cubic-bezier(.22,1,.36,1);
}

/* Soft glow */
.why-card::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:180px;
    height:180px;
    background:radial-gradient(circle, rgba(201,154,82,.16), transparent 70%);
    transition:.45s;
}

.why-card:hover{
    transform:translateY(-12px);
    border-color:#C89A52;
    box-shadow:
        0 18px 45px rgba(0,0,0,.08),
        0 0 30px rgba(201,154,82,.10);
}

.why-card:hover::before{
    transform:scale(1.2);
}

.why-card.featured{
    border-color:#C89A52;
    box-shadow:0 20px 50px rgba(201,154,82,.12);
}

.why-icon{
    width:68px;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:linear-gradient(135deg,#D6A458,#B8863E);
    color:#fff;
    font-size:30px;
    margin-bottom:26px;
    box-shadow:0 10px 25px rgba(201,154,82,.28);
}

.why-card h3{
    font-family:var(--serif);
    font-size:34px;
    color:#1A1510;
    line-height:1.15;
    margin-bottom:18px;
}

.why-card p{
    color:#5F554A;
    font-size:16px;
    line-height:1.8;
}

/* Responsive */

@media(max-width:992px){

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:640px){

    .why-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .why-card{
        min-height:auto;
        padding:28px 24px;
    }

    .why-card h3{
        font-size:28px;
    }

    .why-contact .section-head{
        margin-bottom:36px;
    }

}

/* ======================================
   SMALL MOBILE (480px)
====================================== */
@media (max-width:480px){

    .wrap{
        padding-inline:18px;
    }

    .contact-hero{
        height:40vh;
        min-height:280px;
    }

    .contact-hero-content h1{
        font-size:34px;
        line-height:1.1;
    }

    .about-breadcrumb{
        font-size:13px;
        gap:8px;
        justify-content:center;
        flex-wrap:wrap;
    }

    .contact-form h2{
        font-size:28px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:14px 16px;
        font-size:14px;
    }

    .info-card{
        padding:20px;
    }

    .info-card h3{
        font-size:18px;
    }

    .info-card p{
        font-size:14px;
    }

    .info-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .map-section iframe{
        height:260px;
    }

    .why-card{
        padding:22px;
    }

    .why-card h3{
        font-size:20px;
    }
}
.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 12px 35px rgba(37,211,102,.35);
    z-index:9999;
    transition:all .3s ease;
}

.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 18px 45px rgba(37,211,102,.45);
}

.whatsapp-float::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.35);
    animation:whatsappPulse 2s infinite;
}

@keyframes whatsappPulse{
    0%{
        transform:scale(.9);
        opacity:1;
    }
    70%{
        transform:scale(1.3);
        opacity:0;
    }
    100%{
        transform:scale(1.3);
        opacity:0;
    }
}

@media (max-width:576px){
    .whatsapp-float{
        width:56px;
        height:56px;
        right:16px;
        bottom:16px;
    }

    .whatsapp-float svg{
        width:24px;
        height:24px;
    }
}


/* ==========================================
   STONEFACTORY - GALLERY ROOM
========================================== */

/* =========================================================
   CATEGORY GALLERY
========================================================= */

.gallery-room{
    min-height:auto;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            #3A2B1C 0%,
            #2B1D12 28%,
            #1A120B 55%,
            #0D0906 100%
        );

    color:#fff;

    /* Reduced vertical space */
    padding:10px 0 45px;
}

.gallery-shell{
    width:100%;
}


/* =========================================================
   HEADER
========================================================= */

.gallery-header{
    text-align:center;
    margin-bottom:28px;
}

.gallery-header .eyebrow{
    display:block;
    font-size:11px;
    letter-spacing:3px;
    font-weight:600;
    color:#C89A52;
    margin-bottom:6px;
}

.gallery-header h2{
    font-family:"Cormorant Garamond", serif;
    font-size:46px;
    font-weight:600;
    line-height:1;
    color:#EFE6DA;
    margin:0 0 6px;
}

.gallery-header p{
    font-size:14px;
    color:#9A8F84;
    margin:0;
}


/* =========================================================
   LAYOUT
========================================================= */

.gallery-body{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:26px;
    align-items:center;
}


/* =========================================================
   LEFT NAV
========================================================= */

.gallery-nav{
    position:relative;
    padding-right:18px;
    align-self:center;
}

.gallery-nav::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:210px;
    background:rgba(255,255,255,.15);
}

.gallery-tab{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;

    background:none;
    border:none;

    color:#8D8074;
    padding:11px 8px;

    cursor:pointer;
    text-align:left;
    transition:.35s;
    position:relative;
}

.gallery-tab .num{
    width:18px;
    font-size:13px;
    font-weight:700;
    color:#C89A52;
}

.gallery-tab .title{
    font-family:"Cormorant Garamond", serif;
    font-size:18px;
    font-weight:600;
}

.gallery-tab.active{
    color:#F3EBDD;
}

.gallery-tab.active::after{
    content:"";
    position:absolute;
    left:8px;
    right:10px;
    bottom:3px;
    height:1px;
    background:#C89A52;
}


/* =========================================================
   PANELS
========================================================= */

.gallery-panel{
    display:none;
}

.gallery-panel.active{
    display:block;
}


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

.gallery-grids{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    width:100%;
    perspective:1200px;
}


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

.stone-card{
    display:block;
    text-decoration:none;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    overflow:hidden;

    background:linear-gradient(
        180deg,
        #21170F 0%,
        #17100A 100%
    );

    transform-style:preserve-3d;

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        box-shadow .55s cubic-bezier(.22,1,.36,1),
        border-color .45s ease;

    position:relative;
}

.stone-card::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    bottom:-18px;
    height:30px;

    background:rgba(0,0,0,.55);
    filter:blur(18px);
    border-radius:50%;

    opacity:0;
    transition:.55s;
    z-index:-1;
}

.stone-card:hover{
    transform:
        translateY(-8px)
        rotateX(3deg)
        rotateY(-2deg)
        scale(1.015);

    border-color:rgba(200,154,82,.38);

    box-shadow:
        0 12px 24px rgba(0,0,0,.28),
        0 24px 50px rgba(0,0,0,.5),
        0 0 24px rgba(200,154,82,.12);
}

.stone-card:hover::after{
    opacity:1;
}


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

.stone-media{
    position:relative;
    height:165px;
    overflow:hidden;
}

.stone-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:transform .8s ease;
}

.stone-card:hover .stone-media img{
    transform:scale(1.07);
}


/* =========================================================
   BADGE
========================================================= */

.new-badge{
    position:absolute;
    top:9px;
    right:9px;

    background:#C89A52;
    color:#17110C;

    font-size:9px;
    font-weight:700;

    padding:4px 8px;
    border-radius:4px;
}


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

.stone-content{
    padding:11px 13px 13px;
}

.stone-content h3{
    font-family:"Cormorant Garamond",serif;
    font-size:19px;
    line-height:1.25;

    color:#EFE6DA;

    margin:0 0 6px;
}

.stone-content strong{
    display:block;

    color:#D6A458;

    margin-bottom:2px;

    font-size:12px;
}

.stone-content p{
    font-size:11px;
    line-height:1.4;

    color:#8F8478;

    margin:0;
}


/* =========================================================
   VIEW MORE
========================================================= */

.gallery-more{
    display:flex;
    justify-content:center;
    margin-top:20px;
}

.gallery-more-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 24px;

    border:1px solid rgba(200,154,82,.45);
    border-radius:999px;

    text-decoration:none;

    color:#EFE6DA;

    font-size:13px;
    font-weight:600;
    letter-spacing:.04em;

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

    backdrop-filter:blur(10px);

    transition:all .35s ease;
}

.gallery-more-btn:hover{
    background:#C89A52;
    color:#17110C;
    border-color:#C89A52;

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(200,154,82,.25);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media(max-width:1100px){

    .gallery-room{
        padding:10px 0 10px;
    }

    .gallery-body{
        grid-template-columns:120px minmax(0,1fr);
        gap:22px;
    }

    .gallery-grids{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .stone-media{
        height:160px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

    .gallery-room{
        padding:10px 0 10px;
    }

    .gallery-header{
        margin-bottom:24px;
    }

    .gallery-header h2{
        font-size:43px;
    }

    .gallery-body{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* Horizontal category navigation */
    .gallery-nav{
        display:flex;
        overflow-x:auto;

        gap:10px;
        padding:0 0 5px;

        scrollbar-width:none;
    }

    .gallery-nav::-webkit-scrollbar{
        display:none;
    }

    .gallery-nav::after{
        display:none;
    }

    .gallery-tab{
        flex:0 0 auto;
        width:auto;
        min-width:145px;

        border:1px solid rgba(255,255,255,.08);
        border-radius:10px;

        padding:10px 13px;
    }

    .gallery-tab.active::after{
        left:10px;
        right:10px;
        bottom:4px;
    }

    .gallery-grids{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .stone-media{
        height:185px;
    }
}


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

@media(max-width:640px){

    .gallery-room{
        padding:10px 0 10px;
    }

    .gallery-header{
        margin-bottom:20px;
    }

    .gallery-header h2{
        font-size:38px;
    }

    .gallery-header p{
        font-size:13px;
    }

    .gallery-nav{
        gap:8px;
        margin-bottom:2px;
    }

    .gallery-tab{
        min-width:135px;
        padding:9px 11px;
    }

    .gallery-tab .num{
        font-size:12px;
    }

    .gallery-tab .title{
        font-size:17px;
    }

    .gallery-grids{
        grid-template-columns:1fr;
        gap:14px;
    }

    .stone-media{
        height:205px;
    }

    .stone-content{
        padding:12px;
    }

    .stone-content h3{
        font-size:19px;
    }

    .gallery-more{
        margin-top:18px;
    }

    .gallery-more-btn{
        padding:10px 22px;
        font-size:12px;
    }
}


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

@media(max-width:400px){

    .gallery-room{
        padding:10px 0 10px;
    }

    .gallery-header h2{
        font-size:34px;
    }

    .gallery-tab{
        min-width:125px;
    }

    .stone-media{
        height:190px;
    }
}
/* ===============================
   HERO PRODUCT SEARCH
================================ */
/* Search width chhoti + center */
.hero-product-search{
    width:100%;
    max-width:560px;   /* pehle 700px tha */
    margin:34px auto 0;
    position:relative;
    z-index:999;
}

/* Search box thoda compact */
.hero-product-search-wrap{
    display:flex;
    align-items:center;
    height:62px;       /* pehle 68px */
    padding:0 22px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.28);
    box-shadow:0 20px 50px rgba(0,0,0,.22);
}

/* Center for all alignments */
.hero-content .hero-product-search{
    margin-left:auto;
    margin-right:auto;
}

.hero-product-search-form{
    width:100%;
}


.hero-product-search-icon{
    color:#fff;
    font-size:18px;
    margin-right:14px;
    flex-shrink:0;
}

.hero-product-search-input{
    flex:1;
    border:none;
    background:transparent;
    color:#fff;
    font-size:16px;
    outline:none;
}

.hero-product-search-input::placeholder{
    color:rgba(255,255,255,.78);
}

/* Hide button if it still exists */
.hero-product-search-btn{
    display:none;
}

/* Tablet */
@media(max-width:768px){

.hero-product-search{
    max-width:92%;
    margin-top:24px;
}

.hero-product-search-wrap{
    height:60px;
    padding:0 18px;
}

.hero-product-search-input{
    font-size:15px;
}

}

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

.hero-product-search{
    max-width:94%;
}

.hero-product-search-wrap{
    height:54px;
    padding:0 16px;
}

.hero-product-search-icon{
    font-size:16px;
    margin-right:10px;
}

.hero-product-search-input{
    font-size:14px;
}

}
@media (max-width:768px){

.hero-product-search{
    max-width:480px;
    margin-top:22px;
}

.hero-product-search-wrap{
    height:56px;
}

.hero-ctas{
    margin-top:22px;
    gap:12px;
}

}

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

.hero-product-search{
    max-width:92%;
}

.hero-product-search-wrap{
    height:52px;
    padding:0 16px;
}

.hero-ctas{
    margin-top:18px;
}

}



/* ==========================================
   QUOTE MODAL
========================================== */

.quote-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
}

.quote-modal.active{
    opacity:1;
    visibility:visible;
}

.quote-overlay{
    position:absolute;
    inset:0;
    background:rgba(12,10,8,.65);
    backdrop-filter:blur(8px);
}

.quote-modal-box{
    position:relative;
    width:100%;
    max-width:560px;
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:26px;
    padding:34px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 35px 90px rgba(0,0,0,.28);
    transform:translateY(25px) scale(.97);
    transition:.35s ease;
}

.quote-modal.active .quote-modal-box{
    transform:translateY(0) scale(1);
}

/* Close */

.quote-close{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#F3EEE6;
    color:#171513;
    cursor:pointer;
    transition:.3s;
}

.quote-close:hover{
    background:#B68A4A;
    color:#fff;
}

/* Header */

.quote-modal-head{
    text-align:center;
    margin-bottom:24px;
}

.quote-modal-head h2{
    font-family:var(--serif);
    font-size:38px;
    color:#171513;
    margin:10px 0;
}

.quote-modal-head p{
    color:#6E6458;
    line-height:1.7;
}

/* Form */

.quote-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#171513;
}

.quote-form input,
.quote-form select{
    width:100%;
    height:50px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#FCFBF9;
    transition:.3s;
}

.quote-form input:focus,
.quote-form select:focus{
    outline:none;
    border-color:#B68A4A;
    box-shadow:0 0 0 4px rgba(182,138,74,.10);
}

.quote-form input[readonly]{
    background:#F2EEE8;
    color:#666;
}

.qty-row{
    display:grid;
    grid-template-columns:1fr 120px;
    gap:12px;
}

/* Mobile */

@media(max-width:640px){

    .quote-modal-box{
        padding:24px;
        border-radius:20px;
    }

    .quote-modal-head h2{
        font-size:30px;
    }

    .qty-row{
        grid-template-columns:1fr;
    }
}


/* Product Card Quote Button */

.product-card-action {
    padding: 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.arrival-cart-btn,
.quote-card-btn {
    height: 46px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: .35s ease;
}

/* Add to cart */
.arrival-cart-btn {
    width: 46px;
    min-width: 46px;
    background: #171513;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrival-cart-btn:hover {
    background: #B68A4A;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(182, 138, 74, .28);
}



.quote-card-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:999px;
    background:#171513;
    color:#fff;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:.35s ease;
    flex: 1;
}

.quote-card-btn:hover{
    background:#B68A4A;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(182,138,74,.28);
}

.quote-card-btn i{
    font-size:13px;
}

.arrival-action{
    padding:0 18px 18px;
}

.arrival-quote-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:999px;
    background:#171513;
    color:#fff;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:.35s ease;
}

.arrival-quote-btn:hover{
    background:#B68A4A;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(182,138,74,.28);
}

.arrival-quote-btn i{
    font-size:13px;
}




/* =========================================================
   HEADER CART
========================================================= */

.header-cart {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: var(--charcoal);

    font-size: 14px;

    font-weight: 600;
}

.cart-count {
    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--charcoal);

    color: #fff;

    font-size: 10px;

    line-height: 1;
}

.cart-count:not(.has-items) {
    opacity: .65;
}


/* =========================================================
   ARRIVAL CART BUTTON
========================================================= */

.arrival-action {
    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;
}


.arrival-cart-btn,
.arrival-quote-btn {
    position: relative;

    z-index: 11;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: none;

    cursor: pointer;

    padding: 11px 16px;

    border-radius: 28px;

    font-size: 12px;

    font-weight: 600;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.arrival-cart-btn {
    background: var(--charcoal);

    color: #fff;
}


.arrival-cart-btn:hover {
    transform: translateY(-2px);

    background: var(--gold);
}


.arrival-cart-btn.in-cart {
    background: var(--gold);

    color: #fff;
}


.arrival-quote-btn {
    background: transparent;

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

    color: var(--charcoal);
}


.arrival-quote-btn:hover {
    transform: translateY(-2px);

    border-color: var(--gold);

    color: var(--gold);
}


/* =========================================================
   CART PAGE
========================================================= */

/* =========================================================
   CART SECTION
========================================================= */

.cart-section {
    min-height: auto;
    padding: 55px 0;
    background: var(--warm-white);
}


/* =========================================================
   CART ITEM
========================================================= */

.cart-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 14px 18px;
    margin-bottom: 10px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;

    box-sizing: border-box;
}


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

.cart-item-image {
    width: 110px;
    height: 90px;

    flex: 0 0 110px;

    overflow: hidden;
    border-radius: 8px;
}

.cart-item-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.cart-item-content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.cart-category {
    display: block;

    margin-bottom: 3px;

    color: var(--gold);

    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cart-item-content h3 {
    margin: 0 0 8px;

    color: var(--charcoal);

    font-family: var(--serif);
    font-size: 23px;
    font-weight: 500;

    line-height: 1.2;
}


/* =========================================================
   QUANTITY + UNIT + REMARK SAME ROW
========================================================= */

.cart-controls {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-width: 0;

    margin-top: 0;
}


/* =========================================================
   QUANTITY
========================================================= */

.cart-quantity {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    height: 36px;

    padding: 3px 8px;

    box-sizing: border-box;

    flex: 0 0 auto;

    border: 1px solid var(--line);
    border-radius: 30px;

    background: #fff;
}

.cart-quantity button {
    width: 28px;
    height: 28px;

    padding: 0;

    border: none;
    background: transparent;

    color: var(--charcoal);

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.cart-quantity button:hover {
    color: var(--gold);
}


/* =========================================================
   QUANTITY INPUT
========================================================= */

.cart-qty-input {
    width: 55px;
    min-width: 55px;

    height: 28px;

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    color: var(--charcoal);

    text-align: center;

    font-size: 13px;
}

.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cart-qty-input {
    -moz-appearance: textfield;
}


/* =========================================================
   UNIT
========================================================= */

.cart-unit {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
}

.cart-unit-select {
    height: 36px;

    padding: 0 10px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background: #fff;

    color: var(--charcoal);

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;
    outline: none;
}

.cart-unit-select:focus {
    border-color: var(--gold);
}


/* =========================================================
   PRODUCT REMARK - SAME LINE
========================================================= */

.cart-product-remark {
    flex: 1 1 300px;

    width: auto;
    max-width: 500px;

    min-width: 150px;

    margin: 0;
}

.cart-remark-input {
    display: block;

    width: 100%;
    height: 36px;
    min-height: 36px;

    padding: 8px 12px;

    box-sizing: border-box;

    border: 1px solid var(--line);
    border-radius: 7px;

    background: #fff;

    color: var(--charcoal);

    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;

    outline: none;

    resize: none;

    overflow: hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.cart-remark-input::placeholder {
    color: var(--warm-grey);
}

.cart-remark-input:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(185, 121, 28, .08);
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.cart-remove {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    padding: 0;

    border: none;
    background: transparent;

    color: #999;

    cursor: pointer;

    transition: color .3s ease;
}

.cart-remove:hover {
    color: #b00020;
}


/* =========================================================
   CART SUMMARY
========================================================= */

.cart-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid var(--line);
}

.cart-summary-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* =========================================================
   EMPTY CART
========================================================= */

.empty-cart {
    padding: 60px 20px;

    text-align: center;
}

.empty-cart-icon {
    margin-bottom: 15px;

    font-size: 42px;
    color: var(--gold);
}

.empty-cart h3 {
    margin: 0 0 8px;

    font-family: var(--serif);
    font-size: 30px;
}

.empty-cart p {
    margin-bottom: 20px;

    color: var(--warm-grey);
}


/* =========================================================
   CART TOAST
========================================================= */

.cart-toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 999999;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    background: var(--charcoal);
    color: #fff;

    border-radius: 8px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .25);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}

.cart-toast.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.cart-toast i {
    color: var(--gold);
}


/* =========================================================
   QUOTE MODAL
========================================================= */

.cart-quote-modal {
    position: fixed;
    inset: 0;

    z-index: 999990;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.cart-quote-modal.active {
    display: flex;
}

.cart-quote-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .68);

    backdrop-filter: blur(5px);
}

.cart-quote-box {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 650px;
    max-height: 90vh;

    overflow-y: auto;

    padding: 35px;

    background: var(--warm-white);

    border-radius: 16px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35);
}

.cart-quote-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.07);

    font-size: 23px;

    cursor: pointer;
}

.quote-form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 20px;
}

.quote-form-grid input,
.quote-form-grid textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid var(--line);
    border-radius: 7px;

    outline: none;

    background: #fff;
    color: var(--charcoal);

    font-family: inherit;
}

.quote-form-grid textarea {
    grid-column: 1 / -1;

    resize: vertical;
}

.quote-form-grid input:focus,
.quote-form-grid textarea:focus {
    border-color: var(--gold);
}

.quote-products-preview {
    margin: 18px 0;

    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 8px;

    max-height: 180px;

    overflow-y: auto;
}

.quote-product-row {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 0;

    border-bottom: 1px solid var(--line);
}

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

.quote-product-row img {
    width: 48px;
    height: 42px;

    object-fit: cover;

    border-radius: 5px;
}

.quote-product-row div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.quote-product-row strong {
    font-size: 13px;
}

.quote-product-row small {
    color: var(--warm-grey);

    font-size: 11px;
}

.quote-submit-btn {
    width: 100%;

    border: none;

    cursor: pointer;
}


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

/* =========================================================
   MOBILE CART - FINAL RESPONSIVE FIX
========================================================= */

@media (max-width: 600px) {

    .cart-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 35px 12px 45px;
        overflow-x: hidden;
    }

    .cart-section .wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* =========================
       CART ITEM
    ========================= */

    .cart-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns: 68px minmax(0, 1fr) 25px;

        align-items: start;

        gap: 8px;

        padding: 11px;

        margin-bottom: 9px;

        box-sizing: border-box;

        overflow: hidden;
    }


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

    .cart-item-image {
        width: 68px;
        height: 62px;

        min-width: 0;

        flex: none;

        border-radius: 7px;
    }


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

    .cart-item-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }


    .cart-category {
        margin-bottom: 3px;

        font-size: 8px;
        letter-spacing: 1.3px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .cart-item-content h3 {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0 0 7px;

        font-size: 17px;
        line-height: 1.2;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* =========================
       QUANTITY + UNIT
    ========================= */

    .cart-controls {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        gap: 6px;

        margin: 0;

        box-sizing: border-box;
    }


    /* Quantity */

    .cart-item-content .cart-quantity {
        flex: 0 0 auto;

        width: 120px;
        max-width: 120px;

        height: 34px;

        gap: 3px;

        padding: 2px 4px;

        box-sizing: border-box;
    }


    .cart-quantity button {
        width: 25px;
        height: 27px;

        flex: 0 0 25px;

        font-size: 16px;
    }


    .cart-qty-input {
        width: 45px;
        min-width: 45px;

        height: 27px;

        padding: 0;

        font-size: 12px;
    }


    /* Unit */

    .cart-item-content .cart-unit {
        flex: 0 0 auto;

        width: 70px;
        max-width: 70px;

        margin: 0;
    }


    .cart-unit-select {
        width: 70px;
        max-width: 70px;

        height: 34px;

        padding: 0 6px;

        font-size: 12px;

        box-sizing: border-box;
    }


    /* =========================
       REMARK - NEXT LINE
    ========================= */

    .cart-product-remark {
        flex: 0 0 100%;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 2px 0 0;

        box-sizing: border-box;
    }


    .cart-remark-input {
        display: block;

        width: 100%;
        max-width: 100%;

        height: 34px;
        min-height: 34px;

        padding: 7px 9px;

        box-sizing: border-box;

        font-size: 11px;

        border-radius: 6px;

        resize: none;
    }


    /* =========================
       DELETE
    ========================= */

    .cart-remove {
        width: 25px;
        height: 25px;

        min-width: 25px;

        padding: 0;

        flex: none;

        font-size: 11px;
    }


    /* =========================
       SUMMARY
    ========================= */

    .cart-summary {
        width: 100%;
        max-width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-top: 14px;

        padding-top: 14px;

        box-sizing: border-box;

        text-align: center;

        overflow: hidden;
    }


    .cart-summary-item {
        width: 100%;

        font-size: 13px;
    }


    .cart-summary-actions {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 8px;
    }


    .cart-summary-actions a,
    .cart-summary-actions button {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* =========================
       EMPTY CART
    ========================= */

    .empty-cart {
        padding: 50px 15px;
    }


    /* =========================
       QUOTE MODAL
    ========================= */

    .cart-quote-modal {
        padding: 12px;
    }

    .cart-quote-box {
        width: 100%;
        max-width: 100%;

        padding: 24px 15px;

        max-height: 92vh;

        box-sizing: border-box;
    }

    .quote-form-grid {
        grid-template-columns: 1fr;
    }

    .quote-form-grid textarea {
        grid-column: auto;
    }


    /* =========================
       TOAST
    ========================= */

    .cart-toast {
        right: 12px;
        left: 12px;
        bottom: 12px;

        justify-content: center;

        box-sizing: border-box;
    }
}
/* =========================================================
   CART TOP ACTIONS
========================================================= */

.cart-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;

    margin-bottom: 14px;
}

.cart-top-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 0;

    border: none;
    background: transparent;

    color: var(--charcoal);

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    text-decoration: none;
    cursor: pointer;

    transition:
        color .25s ease,
        opacity .25s ease;
}

.cart-top-action i {
    font-size: 11px;
}

.cart-top-action:hover {
    color: var(--gold);
}

.cart-top-clear {
    color: #888;
}

.cart-top-clear:hover {
    color: #b00020;
}
.filter-heading{
    margin-bottom:25px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.filter-heading span{
    display:block;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    color:#C89A52;
    margin-bottom:6px;
}

.filter-heading h3{
    margin:0 0 7px;
    font-size:24px;
    font-weight:600;
    color:#171717;
}

.filter-heading p{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:#777;
}