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

.site-header{position:relative;z-index:1000;width:100%;background:var(--color-primary);transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}
.site-header .container{max-width:98%}
.header-inner{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between}
.site-logo{transition:var(--transition-fast);outline:0}
.site-logo img{max-width:160px}
.site-logo:hover{opacity:.7}

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




/* ============ FIXED HEADER ============ */

.site-header.fixed { position: fixed; top: 0; left: 0; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12); animation: headerReveal .35s ease forwards;}

@keyframes headerReveal {
    from {transform: translateY(-100%);}
    to {transform: translateY(0);}

}


/* =========================================================
   NAVIGATION
========================================================= */
.nav-item,.nav-link{position:relative}
.main-nav{margin-left:auto;margin-right:5rem}
.nav-list{display:flex;align-items:center;gap:3.6rem}
.nav-link{display:inline-flex;align-items:center;gap:.6rem;padding:2.8rem 0;font-size:16px;line-height:1;color:var(--color-white);transition:var(--transition-fast);text-transform:uppercase;font-weight:600;letter-spacing:.1rem}
.nav-link:hover{color:var(--color-white-light)}
.partner span{font-size:14px}
.nav-link::after{content:"";position:absolute;left:0;bottom:1.8rem;width:0;height:.1rem;background:var(--color-white);transition:width var(--transition-fast)}
.nav-link.active::after,.nav-link:hover::after{width:100%}


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

.dropdown-arrow {display: inline-block; font-size: 14px; line-height: 1; transition: transform var(--transition-fast);}
.has-dropdown:hover .dropdown-arrow { transform: rotate(180deg);}



/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu{position:fixed;top:var(--header-height);left:0;width:100%;background:var(--color-white);color:var(--color-text);border-top:.1rem solid rgba(0,0,0,.08);box-shadow:0 2rem 5rem rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(-1rem);transition:opacity .35s,visibility .35s,transform .35s cubic-bezier(.16, 1, .3, 1);z-index:999}
.has-dropdown:hover .mega-menu{opacity:1;visibility:visible;transform:translateY(0)}
.simple-menu-item{position:relative}
.simple-menu-item .mega-menu{position:absolute;top:100%;left:0;width:260px}

.simple-menu-item .mega-inner { min-height: auto; padding: 2rem; display: inherit; width: 100%; font-size: 15px;}
.simple-menu-item .mega-inner ol { display: flex; flex-direction: column; gap: 11px;}
.simple-menu-item .mega-inner ol li a { color: #666; transition: color 0.3s ease, transform 0.3s ease; text-transform: uppercase; display: inline-block; font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 5px;}
.simple-menu-item .mega-inner ol li a span.material-symbols-outlined { font-size: 15px;}
.simple-menu-item .mega-inner ol li a:hover {color: #111; transform: translateX(0.4rem);}


/* =========================================================
   MEGA INNER
========================================================= */

.mega-inner {width: min(134rem, calc(100% - 8rem)); min-height: 42rem; margin: 0 auto; padding: 4.5rem 0; display: grid; grid-template-columns: 1.05fr 1fr 1.4fr; gap: 5rem;
}


/* =========================================================
   MEGA INTRO
========================================================= */

.mega-intro h3,.mega-label{margin-bottom:15px;text-transform:uppercase}
.mega-intro{display:flex;flex-direction:column;align-items:flex-start;padding-right:3rem;border-right:.1rem solid rgba(0,0,0,.08)}
.mega-label{display:block;font-size:13px;font-weight:700;letter-spacing:.2em}
.mega-intro h3{font-size:clamp(24px, 4rem, 4.8rem);font-weight:500;line-height:.95;letter-spacing:-.05em}
.mega-intro p{max-width:30rem;margin-bottom:auto;line-height:3.2rem}


/* =========================================================
   VIEW ALL
========================================================= */

.mega-view-all{display:inline-flex;align-items:center;gap:1rem;margin-top:4rem;padding-bottom:.8rem;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#111;border-bottom:.1rem solid #111;transition:gap .3s}
.mega-view-all span{font-size:1.8rem;transition:transform .3s}
.mega-view-all:hover{gap:15px}
.mega-view-all:hover span{transform:translateX(.3rem)}

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

.collection-list{display:flex;flex-direction:column;justify-content:center}
.collection-item{position:relative;display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:15px;padding:1.8rem 0;border-bottom:.1rem solid rgba(0,0,0,.08);color:#222;transition:padding .3s,color .3s}
.collection-item span{font-size:11px;color:#aaa}
.collection-item strong{font-size:16px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;color:var(--color-text)}
.collection-item i{font-size:1.8rem;opacity:0;transform:translateX(-1rem);transition:opacity .3s,transform .3s}
.collection-item.active,.collection-item:hover{padding-left:1rem;color:#111}
.collection-item.active i,.collection-item:hover i{opacity:1;transform:translateX(0)}


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

.mega-image{position:relative;min-height:32rem;overflow:hidden;background:#eee}
.mega-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.7) 100%)}
.mega-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16, 1, .3, 1)}
.mega-image:hover img{transform:scale(1.05)}


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

.mega-image-content{position:absolute;z-index:2;left:2.5rem;right:2.5rem;bottom:2.5rem;color:#fff}
.mega-image-content>span{display:block;margin-bottom:1rem;font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}
.mega-image-content h4{margin-bottom:2rem;font-size:3.4rem;font-weight:500;line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.mega-image-content a{display:inline-flex;align-items:center;gap:.8rem;font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.mega-image-content a span{font-size:1.8rem;transition:transform .3s}
.mega-image-content a:hover span{transform:translateX(.4rem)}


/* =========================================================
   PRODUCTS MEGA MENU
========================================================= */
.products-menu .mega-inner{grid-template-columns:1fr 1fr 1fr 1.2fr; min-height:38rem}
.product-column{display:flex; flex-direction:column; align-items:flex-start; padding-right:3rem; border-right:.1rem solid rgba(0,0,0,.08)}
.product-column h4{margin-bottom:2rem; font-size:16px; font-weight:600; letter-spacing:-.02em; text-transform:uppercase}
.product-column a{margin-bottom:12px; font-size:15px; color:#666; display:block; text-transform:uppercase; transition:color .25s,transform .25s}
.product-column a:hover,.product-hover-preview .product-link:hover{color:#111; transform:translateX(.4rem)}
.product-hover-preview .product-preview{position:relative; width:100%; height:18rem; margin-top:2rem; overflow:hidden; background:#f5f5f5}
.product-hover-preview .product-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .4s,transform .6s}
.product-hover-preview .product-preview img.active{opacity:1; transform:scale(1)}
.product-hover-preview .product-link{transition:color .3s,transform .3s; display:flex; gap:5px; align-items:center}
.product-hover-preview .product-link span{font-size:15px}


/* =========================================================
   PRODUCT FEATURE
========================================================= */
.product-feature{position:relative; min-height:30rem; overflow:hidden; background:#eee}
.product-feature img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16, 1, .3, 1)}
.product-feature:hover img{transform:scale(1.05)}
.product-feature::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.7))}
.product-feature-content{position:absolute; z-index:2; left:2rem; right:2rem; bottom:2rem; display:flex; align-items:flex-end; justify-content:space-between; color:#fff}
.product-feature-content>span{font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.7}
.product-feature-content a{display:inline-flex; align-items:center; gap:.5rem; font-size:13px; font-weight:600; text-transform:uppercase; color:#fff}
.product-feature-content a span{font-size:1.8rem}

/* =========================================================
   SEARCH
========================================================= */
.search-btn,.search-close {border-radius:var(--radius-full)}
.search-btn:hover,.search-close:hover,.search-result:hover {background:var(--color-bg-light)}
.search-btn {width:4.4rem;height:4.4rem;display:inline-flex;align-items:center;justify-content:center;color:var(--color-white);transition:var(--transition-fast)}
.search-btn:hover,.search-close,.search-input,.search-input-wrap .material-symbols-outlined,.search-panel h2 {color:var(--color-primary)}
.search-overlay {position:fixed;inset:0;z-index:2000;display:grid;place-items:start center;padding:10vh 2rem 2rem;background:rgba(9,17,28,.72);opacity:0;pointer-events:none;transition:opacity .25s}
.search-overlay.is-open {opacity:1;pointer-events:auto}
.search-panel {position:relative;width:min(68rem,100%);max-height:80vh;overflow:auto;padding:4.5rem clamp(2rem,5vw,5rem) 3rem;background:var(--color-white);box-shadow:0 2rem 6rem rgba(0,0,0,.25);transform:translateY(-15px);transition:transform .25s}
.search-overlay.is-open .search-panel {transform:translateY(0)}
.search-close {position:absolute;top:1.6rem;right:1.6rem;width:4rem;height:4rem;display:grid;place-items:center}
.search-eyebrow {display:block;margin-bottom:.8rem;font-size:12px;font-weight:700;letter-spacing:.16rem;text-transform:uppercase}
.search-panel h2 {margin-bottom:2rem;font-size:clamp(2.4rem, 4vw, 3.8rem)}
.search-input-wrap {display:flex;align-items:center;gap:1rem;padding:0 15px;border-bottom:.2rem solid var(--color-primary)}
.search-input {width:100%;padding:1.4rem 0;background:0 0;border:0;outline:0;font:inherit;font-size:1.6rem}
.search-results {margin-top:15px}
.search-status {padding:2rem 0;color:var(--color-text-light)}
.search-result {display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:15px;padding:1.2rem 0;color:var(--color-primary);border-bottom:.1rem solid #e5e8ed}
.search-result:hover {color:var(--color-primary)}
.search-result img {width:5.5rem;height:5.5rem;object-fit:cover}
.search-result small,.search-result strong {display:block}
.search-result strong {font-size:15px}
.search-result small {margin-top:.35rem;color:var(--color-text-light);font-size:12px}
body.search-is-open {overflow:hidden}
/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
    display: none;
    width: 4.4rem;
    height: 4.4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.2rem;
    height: 0.15rem;
    background: #c1ccdd;
    transition: var(--transition-fast);
}

/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider{position:relative; width:100%; height:calc(100vh - 8rem); min-height:60rem; overflow:hidden; background:#111} 
.hero-slide img,.hero-video{width:100%; height:100%; object-fit:cover} 
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; clip-path:inset(0 0 0 100%); transition:opacity .8s,clip-path 1.2s cubic-bezier(.77, 0, .18, 1),visibility .8s} 
.hero-slide.active{opacity:1; visibility:visible; clip-path:inset(0 0 0 0)} 
.hero-slide img{transform:scale(1.12); transition:transform 1.8s cubic-bezier(.16, 1, .3, 1)} 
.hero-slide.active img{transform:scale(1)}.hero-video{display:block}


/* ================================
   NAVIGATION
================================ */
.slider-nav{position:absolute;z-index:10;left:50%;bottom:3rem;transform:translateX(-50%);display:flex;align-items:center;gap:15px;padding:.8rem 1rem;background:#223f6e7d;backdrop-filter:blur(1rem);border:.1rem solid #40609b}
.slider-next,.slider-prev{width:4.2rem;height:4.2rem;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;border:.1rem solid rgba(255,255,255,.25);transition:.3s}
.slider-next:hover,.slider-prev:hover{color:#111;background:#fff}

/* ================================
   PROGRESS
================================ */

.product-feature-swiper .swiper-slide,.slider-progress .line {position:relative; overflow:hidden}
.slider-progress {display:flex; align-items:center; gap:12px; color:#fff; font-size:12px}
.slider-progress .line {width:10rem; height:.1rem; background:rgba(255,255,255,.3)}
.slider-progress .line i{position:absolute; inset:0 auto 0 0; width:0; background:#fff; animation:5s linear sliderProgress}@keyframes sliderProgress{from{width:0}to{width:100%}}@media (max-width:767px){.hero-slider{height:auto; min-height:50rem}
.slider-nav{bottom:2rem}
.slider-progress .line {width:6rem}}
.product-feature {position:relative; min-height:30rem; background:#eee}
.product-feature-swiper {width:100%; height:100%; min-height:30rem}
.product-feature-swiper .swiper-slide>img{width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.2s cubic-bezier(.16, 1, .3, 1)}
.product-feature-swiper .swiper-slide-active>img{transform:scale(1)}
.product-feature-swiper .swiper-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75) 100%); pointer-events:none}
.product-feature-content {position:absolute; z-index:3; left:2rem; right:2rem; bottom:2rem; display:flex; align-items:flex-end; justify-content:space-between; color:#fff}
.product-feature-content>span{font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.75}
.product-feature-content a{display:inline-flex; align-items:center; gap:.5rem; font-size:12px; font-weight:600; text-transform:uppercase; color:#fff}
.product-feature-content a span{font-size:1.7rem}
.product-feature-swiper .swiper-pagination{left:auto; right:2rem; bottom:2rem; width:auto}
.product-feature-swiper .swiper-pagination-bullet{width:.6rem; height:.6rem; margin:0 .3rem!important; background:#fff; opacity:.5}
.product-feature-swiper .swiper-pagination-bullet-active{opacity:1}



/* =========================================================
   GLOBAL IMPACT
========================================================= */

.hot-products .section-title-row h2,.section-title-row h2{color:var(--color-primary)}
.global-impact{background:#fff}
.section-eyebrow{display:block; margin-bottom:1.8rem; font-size:16px; font-weight:500; line-height:1; letter-spacing:.12em; text-transform:uppercase}
.section-title-row{display:flex; align-items:center; gap:3rem}
.section-title-row::after{content:""; flex:1; height:.1rem; background:#cfcfcf}
.section-title-row h2{flex-shrink:0; margin:0; font-size:clamp(3.2rem, 4vw, 4rem); font-weight:800; line-height:.95; letter-spacing:-.045em; text-transform:uppercase}
.global-impact-header>p{margin-top:4rem; font-weight:400; line-height:3.2rem}
.section-title-row h2 span{font-weight:300; color:var(--color-text)}
.hot-products .global-impact-header>p,.product-categories .global-impact-header>p{max-width:78rem}
.hot-products .section-title-row::after{background:#cfcfcf}
.impact-grid{display:grid; grid-template-columns:1.15fr 1.15fr 1fr; grid-template-rows:32.5rem 18.5rem 18.5rem; gap:12px}
.impact-card{position:relative; min-width:0; min-height:0; overflow:hidden; background:#171717}
.impact-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16, 1, .3, 1),filter .5s}
.impact-card:hover img{transform:scale(1.04); filter:grayscale(10%)}
.impact-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.78) 100%)}
.impact-card.impact-award img{height:auto}


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

.impact-content {
    position: absolute;
    z-index: 2;
    inset: auto 3.5rem 3.5rem;
}

.impact-number {
    display: block;
    font-size: clamp(4.8rem, 4vw, 7rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.045em;
    color: #fff;
}

.impact-number span {
    font-size: 0.55em;
    font-weight: 700;
    vertical-align: top;
}

.impact-content h3 {
    margin: 15px 0 5px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: #fff;
}

.impact-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}


/* =========================================================
   TOP IMAGE CARDS
========================================================= */

.impact-countries {
    grid-column: 1 / 3;
    grid-row: 1;
}

.impact-categories {
    grid-column: 3;
    grid-row: 1;
}

.impact-categories .impact-content {
    inset: auto 3rem 3rem;
}


/* =========================================================
   PATENTS
========================================================= */

.impact-patents {
    grid-column: 1;
    grid-row: 2 / 4;
    background: #111;
}

.impact-patents .impact-content {
    inset: auto 3.5rem 3.5rem;
}

.impact-patents .impact-number {
    color: #f2f2f2;
}

.impact-patents .impact-content h3 {
    color: #d8d8d8;
}

.impact-line {
    display: block;
    width: 3.2rem;
    height: 0.1rem;
    margin-top: 2rem;
    background: #555;
}


/* =========================================================
   EMPLOYEES
========================================================= */

.impact-employees {
    grid-column: 2;
    grid-row: 2 / 4;
}

.impact-employees .impact-content {
    inset: auto 3.5rem 3.5rem;
}


/* =========================================================
   AWARDS
========================================================= */

.impact-award {
    background: #191919;
}

.impact-award:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

.impact-award:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

.impact-award .impact-content {
    inset: 0;
    display: flex;
    align-items: center;
    padding: 3rem;
}

.impact-award-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impact-award .impact-number {
    font-size: 4.2rem;
    letter-spacing: 0.01em;
}

.impact-award .impact-number span {
    font-size: 12px;
    vertical-align: baseline;
}

.impact-award .impact-content h3 {
    margin-top: 0.9rem;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #aaa;
}

.impact-icon {
    font-size: 4.4rem;
    color: #555;
}


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

.impact-card {
    transition: transform 0.4s ease, background 0.4s ease;
}

.impact-card:hover {
    transform: translateY(-0.2rem);
}


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

@media (max-width: 991px) {

    .global-impact {
        padding: 8rem 0;
    }

    .global-impact-header {
        margin-bottom: 5rem;
    }

    .impact-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:
            30rem 24rem 24rem 18rem;
    }

    .impact-countries {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .impact-categories {
        grid-column: 1;
        grid-row: 2;
    }

    .impact-patents {
        grid-column: 2;
        grid-row: 2;
    }

    .impact-employees {
        grid-column: 1;
        grid-row: 3;
    }

    .impact-award:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
    }

    .impact-award:nth-child(6) {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .impact-award:nth-child(6) .impact-content {
        justify-content: center;
    }

}


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

@media (max-width: 600px) {

    .global-impact {
        padding: 6rem 0;
    }


    .global-impact-header {
        margin-bottom: 4rem;
    }

    .section-title-row {
        display: block;
    }

    .section-title-row::after {
        display: block;

        width: 100%;

        margin-top: 15px;
    }

    .section-title-row h2 {
        font-size: 3.2rem;
    }



    .impact-grid {
        grid-template-columns: 1fr;

        grid-template-rows:
            28rem 22rem 26rem 26rem 16rem 16rem;
    }

    .impact-countries,
    .impact-categories,
    .impact-patents,
    .impact-employees,
    .impact-award:nth-child(5),
    .impact-award:nth-child(6) {
        grid-column: 1;
    }

    .impact-countries {
        grid-row: 1;
    }

    .impact-categories {
        grid-row: 2;
    }

    .impact-patents {
        grid-row: 3;
    }

    .impact-employees {
        grid-row: 4;
    }

    .impact-award:nth-child(5) {
        grid-row: 5;
    }

    .impact-award:nth-child(6) {
        grid-row: 6;
    }

    .impact-content,
    .impact-categories .impact-content,
    .impact-patents .impact-content,
    .impact-employees .impact-content {
        inset: auto 2rem 2rem;
    }

    .impact-number {
        font-size: 4.8rem;
    }

    .impact-award .impact-content {
        padding: 2rem;
    }

}



/* PRODUCT CATEGORY LISTING */

.product-categories {
    background: #f8f9fe;
}

.category-list {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    height: 58rem;
}


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

.category-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 52rem;
    overflow: hidden;
    background: #151515;
    cursor: pointer;
    transition: flex 0.7s cubic-bezier(.16, 1, .3, 1);
}


/* Hovered card becomes wide */
.category-card:hover {
    flex: 2.7 1 0;
}

/* Alternate cards down */
.category-card:nth-child(1) {
    height: 52rem;
}

.category-card:nth-child(2) {
    height: 52rem;
    margin-top: 4rem;
}

.category-card:nth-child(3) {
    height: 52rem;
}

.category-card:nth-child(4) {
    height: 52rem;
    margin-top: 4rem;
}

@media (max-width: 600px) {
    .category-list {
        flex-direction: column;
        height: auto;
    }

    .category-card,
    .category-card:nth-child(1),
    .category-card:nth-child(2),
    .category-card:nth-child(3),
    .category-card:nth-child(4) {
        width: 100%;
        height: 42rem;
        margin-top: 0;
    }

}


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

.category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transform: scale(1.01);
    transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter 0.7s ease;
}

.category-card:hover img {
    transform: scale(1.06);
    filter: grayscale(0%);
}


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

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.9) 100%);
    transition:
        background 0.6s ease;
}

.category-card:hover .category-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.92) 100%);
}


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

.category-content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

.category-number {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
}


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

.category-info h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
    transition:
        font-size 0.5s cubic-bezier(.16, 1, .3, 1);
}


/* Bigger heading on active card */
.category-card:hover .category-info h3 {
    font-size: 3rem;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.category-info p {
    max-width: 38rem;
    margin: 1.8rem 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.35s ease 0.15s,
        transform 0.5s cubic-bezier(.16, 1, .3, 1);
    height: 0;
}

.category-card:hover .category-info p {
    opacity: 1;
    height: auto;

    transform: translateY(0);
}


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

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2rem;
    width: fit-content;
    padding-bottom: 0.7rem;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.35s ease 0.2s,
        transform 0.5s ease,
        border-color 0.3s ease;
}

.category-card:hover .category-link {
    opacity: 1;
    transform: translateY(0);
}

.category-link span {
    font-size: 1.7rem;
    transition: transform 0.3s ease;
}

.category-link:hover span {
    transform: translateX(0.5rem);
}


/* =========================================================
   OTHER CARDS
   Slightly dim when another card is hovered
========================================================= */

.category-list:has(.category-card:hover) .category-card:not(:hover) img {
    filter: grayscale(80%);
}

.category-list:has(.category-card:hover) .category-card:not(:hover) {
    opacity: 0.85;
}


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

@media (max-width: 991px) {

    .category-list {
        height: 48rem;
        gap: 1rem;
    }

    .category-card:hover {
        flex: 2.2 1 0;
    }

    .category-info h3 {
        font-size: 1.6rem;
    }

    .category-card:hover .category-info h3 {
        font-size: 2.3rem;
    }

}


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

@media (max-width: 600px) {

    .product-categories {
        padding: 6rem 0;
    }

    .category-list {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }

    .category-card,
    .category-card:hover {
        flex: none;
        width: 100%;
        height: 42rem;
    }

    /*
       Mobile par hover interaction ki jagah
       card permanently readable rahega.
    */

    .category-info h3,
    .category-card:hover .category-info h3 {
        font-size: 2.4rem;
    }

    .category-info p,
    .category-link {
        opacity: 1;

        transform: none;
    }

    .category-info p {
        margin-top: 15px;
        transform: translateY(0);
        height: auto;
    }

}




/* =========================================
   3D PRODUCT COVERFLOW SLIDER
========================================= */

.hotProductsSlider {
    width: 100%;
    padding: 5rem 0 8rem;
    overflow: hidden;
    perspective: 1400px;
}

.hotProductsSlider .swiper-wrapper {
    align-items: center;
}

/* Individual slide */
.hotProductsSlider .swiper-slide {
    width: 38rem;
    height: 56rem;

    transition:
        transform 0.8s ease,
        opacity 0.8s ease,
        filter 0.8s ease;

    transform-style: preserve-3d;
}

/* Product card */
.product-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    border-radius: 2px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.18);

    transform-style: preserve-3d;
}

/* Image */
.product-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Image zoom */
.product-card:hover img {
    transform: scale(1.05);
}


/* =========================================
   DARK GRADIENT
========================================= */

.product-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 35px 30px 30px;
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.65) 35%,
            rgba(0, 0, 0, 0.15) 75%,
            transparent 100%);
}


/* Product title */
.product-overlay h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


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

.product-hover {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(15px);
    transition:
        max-height 0.5s ease,
        opacity 0.5s ease,
        transform 0.5s ease;
}

.product-card:hover .product-hover {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 15px;
}

.product-hover p {
    margin: 0 0 18px;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
}


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

.discover-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.discover-btn::after {
    content: "→";
    font-size: 20px;
    transition: transform 0.3s ease;
}

.discover-btn:hover::after {
    transform: translateX(7px);
}


/* =========================================
   SWIPER COVERFLOW SIDE SLIDES
========================================= */

/* Side slides slightly faded */
.hotProductsSlider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.72;
    filter: brightness(0.72);
}

/* Active center slide */
.hotProductsSlider .swiper-slide-active {
    opacity: 1;
    filter: brightness(1);
    z-index: 10;
}


/* Active card shadow */
.hotProductsSlider .swiper-slide-active .product-card {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}


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

@media (max-width: 991px) {

    .hotProductsSlider {
        padding: 30px 0 60px;
    }

    .hotProductsSlider .swiper-slide {
        width: 350px;
        height: 520px;
    }

    .product-overlay {
        padding: 30px 25px 25px;
    }

    .product-overlay h3 {
        font-size: 21px;
    }
}


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

@media (max-width: 767px) {

    .hotProductsSlider {
        padding: 25px 0 5rem;
    }

    .hotProductsSlider .swiper-slide {
        width: 290px;
        height: 430px;
    }

    .product-overlay {
        padding: 25px 20px 20px;
    }

    .product-overlay h3 {
        font-size: 19px;
    }

    .product-hover p {
        font-size: 14px;
    }

    /* Don't make hover content too important on mobile */
    .product-hover {
        max-height: 0;
    }
}



/* =========================================================
   NEWS SECTION
========================================================= */

.news-section {
    position: relative;
    padding: 12rem 0;
    background: #f8f9fe;
    color: var(--color-primary);
    overflow: hidden;
}


/* =========================================================
   NEWS SLIDER
========================================================= */

.news-slider {
    width: 100%;
    max-width: 1300px;
    overflow: hidden;
}



/* =========================================================
   NEWS SLIDE
========================================================= */

.news-slide {
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: center;
    padding: 0 var(--container-padding);
}


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

.news-image {
    width: 100%;
    height: 48rem;
    overflow: hidden;
}

.news-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.2s cubic-bezier(.16, 1, .3, 1);
}


/* Active image animation */

.swiper-slide-active .news-image img {
    transform: scale(1);
}

.news-image img {
    transform: scale(1.06);
}


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

.news-content {
    padding-left: 7rem;
}


/* =========================================================
   META
========================================================= */

.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 3rem;
    font-size: 12px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .65);
}

.news-line {
    display: block;
    width: 4rem;
    height: .1rem;
    background: rgba(255, 255, 255, .35);
}


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

.news-content h2 {
    margin: 0 0 2rem;
    font-size: 3rem;
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: .04em;
}


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



.news-content p {
    margin: 0;
    color: var(--color-text);
    line-height: 3.2rem;
}


/* =========================================================
   READ MORE
========================================================= */

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3.5rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--color-text);
    transition: var(--transition-fast);
}

.news-read-more span {
    font-size: 1.7rem;
    transition:
        transform var(--transition-fast);
}

.news-read-more:hover {
    color: rgba(255, 255, 255, .65);
}

.news-read-more:hover span {
    transform: translateX(.5rem);
}


/* =========================================================
   NAVIGATION
========================================================= */
.news-navigation {
    display: flex;
    gap: 12px;
    margin-top: 3rem;
    margin-left: calc(52% + 7rem);
}

.news-navigation button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border: .1rem solid rgba(65, 65, 65, 0.5);
    border-radius: 50%;
    background: transparent;
    color: #313131;
    cursor: pointer;
    transition: var(--transition-fast);
}

.news-navigation button span {
    font-size: 1.8rem;
}

.news-navigation button:hover {
    background: var(--color-primary);
    color: #ffff;

    border-color: #fff;
}


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

@media (max-width: 991px) {

    .news-slide {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 0 3rem;
    }

    .news-image {
        height: 45rem;
    }

    .news-content {
        max-width: 100%;
        padding: 0;
    }

    .news-navigation {
        margin-left: 3rem;
    }

}


@media (max-width: 600px) {
    .news-section {
        padding: 7rem 0;
    }

    .news-slide {
        padding: 0 2rem;
    }

    .news-image {
        height: 32rem;
    }

    .news-content h2 {
        font-size: 2rem;
    }

    .news-navigation {
        margin-left: 2rem;
    }

}





/* FOOTER------------------------------------------------------------------ */

.site-footer {
    position: relative;
    padding: 0 5rem;
    background: #0d0d0d;
    color: #fff;
    overflow: hidden;
}

.whatsapp-float {
    position: fixed;
    right: 2.4rem;
    bottom: 2.4rem;
    z-index: 1000;
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    transition: transform 0.2s ease;
    animation: whatsapp-float-wiggle 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

.whatsapp-float:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
}

.whatsapp-float:focus-visible {
    animation-play-state: paused;
}

.whatsapp-float img {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes whatsapp-float-wiggle {
    0%, 82%, 100% { transform: rotate(0); }
    86% { transform: rotate(-10deg); }
    90% { transform: rotate(10deg); }
    94% { transform: rotate(-7deg); }
    98% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
}



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

.footer-top-section {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 6rem;
    max-width: 144rem;
    margin: 0 auto;
    padding: 6rem 0 7rem;
    border-bottom: solid 1px #444242;
}


/* =========================================================
   LOGO
========================================================= */

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

.footer-top-logo img {
    width: 15rem;
    height: auto;
}


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

.footer-newsletter {
    width: 100%;
}

.footer-newsletter h3 {
    margin: 0 0 2rem;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}


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

.newsletter-form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 5.6rem;
    padding: .5rem;
    border-radius: 5rem;
    background: #fff;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 2rem;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.4rem;
    color: #111;
}

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

.newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 4.6rem;
    padding: 0 2.2rem;
    border: 0;
    border-radius: 3rem;
    background: var(--color-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
}

.newsletter-form button:hover {
    background: black;
}

.newsletter-form button span {
    font-size: 1.8rem;
}


/* =========================================================
   FOLLOW US
========================================================= */

.footer-follow {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.follow-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.follow-line {
    width: 100%;
    max-width: 14rem;
    height: .1rem;
    margin: 1.8rem 0 2rem;
    background: rgba(255, 255, 255, .15);
}

.contact-column i {
    background-color: var(--color-primary);
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
    margin: 0px 10px 0 0;
}





/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border: .1rem solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-socials a:hover {
    background: #fff;

    border-color: #fff;

    color: #111;

    transform: translateY(-.3rem);
}


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

@media (max-width: 900px) {

    .footer-top-section {
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
    }

    .footer-follow {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .follow-line {
        margin: 15px 0;
    }

}


@media (max-width: 600px) {

    .footer-top-section {
        grid-template-columns: 1fr;
        gap: 4rem;
        padding: 5rem 0;
    }

    .footer-top-logo {
        justify-content: center;
    }

    .footer-newsletter h3 {
        text-align: center;
    }

    .newsletter-form {
        height: 5rem;
    }

    .newsletter-form button {
        height: 4.1rem;

        padding: 0 15px;
    }

    .newsletter-form button span {
        display: none;
    }

    .footer-follow {
        align-items: center;
    }

    .follow-line {
        max-width: 100%;

        margin: 15px 0;
    }

}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 2rem;
}

.footer-location {
    display: inline-flex;
    align-items: center;
    gap: .8rem;

    padding: 13px 2rem;

    border: .1rem solid rgba(255, 255, 255, .3);

    font-size: 13px;

    color: #fff;

    transition: var(--transition-fast);
}

.footer-location span {
    font-size: 1.7rem;
}

.footer-location:hover {
    background: #fff;
    color: #0d0d0d;
}

.footer-phone {
    display: inline-flex;
    align-items: center;
    gap: .8rem;

    font-size: 1.8rem;
    font-weight: 600;

    color: #fff;
}

.footer-phone span {
    font-size: 2rem;
}

.footer-phone:hover {
    color: rgba(255, 255, 255, .6);
}


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

.footer-main {
    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr 1fr;

    gap: 5rem;

    max-width: 144rem;

    margin: 0 auto;

    padding: 7rem 0;
}


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

.footer-logo {
    display: inline-block;

    margin-bottom: 2.5rem;
}

.footer-logo img {
    width: 15rem;
    height: auto;
}

.footer-brand p {
    max-width: 24rem;

    margin: 0;

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

    color: rgba(255, 255, 255, .4);
}


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

.footer-column h3,
.footer-newsletter h3 {
    margin: 0 0 2.5rem;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: #fff;
}

.footer-column ul {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.footer-column a {
    display: inline-block;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    transition: var(--transition-fast);
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(.4rem);
}


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

.footer-newsletter p {
    max-width: 48rem;
    margin: 0 0 2.8rem;
    font-size: 1.4rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .45);
}

.contact-column a {
    color: rgba(255, 255, 255);
}

.contact-column span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}


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

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 144rem;

    margin: 0 auto;

    padding: 2.5rem 0;

    border-top: .1rem solid rgba(255, 255, 255, .08);
}


/* =========================================================
   LEGAL
========================================================= */

.footer-legal {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-legal a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    font-size: 12px;

    color: rgba(255, 255, 255, .4);

    transition: var(--transition-fast);
}

.footer-legal a:hover {
    color: #fff;
}

.footer-legal span:not(.material-symbols-outlined) {
    display: block;

    width: .1rem;
    height: 12px;

    background: rgba(255, 255, 255, .2);
}

.footer-legal .material-symbols-outlined {
    font-size: 15px;
}


/* =========================================================
   SOCIALS
========================================================= */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.2rem;
    height: 3.2rem;

    border: .1rem solid rgba(255, 255, 255, .12);
    border-radius: 50%;

    font-size: 13px;

    color: rgba(255, 255, 255, .5);

    transition: var(--transition-fast);
}

.footer-socials a:hover {
    border-color: #fff;

    background: #fff;

    color: #0d0d0d;

    transform: translateY(-.3rem);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-top {
    position: absolute;

    top: 3rem;
    right: 3rem;

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

    width: 5.5rem;
    height: 5.5rem;

    border: 0;
    border-radius: 50%;

    background: #fff;

    color: #0d0d0d;

    cursor: pointer;

    transition: var(--transition-fast);
}

.footer-top span {
    font-size: 2rem;
}

.footer-top:hover {
    transform: translateY(-.5rem);
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-section {
    padding: 8rem 0 10rem;
    background: #fff;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: start;
    gap: 7rem;
}

.contact-eyebrow {
    display: block;
    margin-bottom: 1.6rem;
    color: #9b642e;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-details-panel h1 {
    max-width: 56rem;
    margin-bottom: 1.8rem;
    color: #1d1d1d;
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.08;
}

.contact-details-panel h1 span {
    color: var(--color-primary);
    font-weight: 700;
}

.contact-intro {
    max-width: 52rem;
    color: #666;
    font-size: 1.6rem;
    line-height: 1.7;
}

.contact-details-list {
    display: grid;
    gap: 2.2rem;
    margin: 3.5rem 0;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    color: inherit;
    text-decoration: none;
}

.contact-detail-icon {
    display: grid;
    flex: 0 0 4.8rem;
    width: 4.8rem;
    aspect-ratio: 1;
    place-items: center;
    border: .1rem solid #dce2e7;
    color: var(--color-primary);
    font-size: 1.8rem;
}

.contact-detail-copy {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.contact-detail-copy > span {
    color: #777;
    font-size: 1.3rem;
}

.contact-detail-copy strong {
    color: #222;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.contact-detail[href]:hover strong {
    color: var(--color-primary);
}

.contact-map {
    margin-top: 3.6rem;
}

.contact-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

.contact-map-heading > span {
    color: #333;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.contact-map-heading a {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 45rem;
    border: 0;
    background: #eef1f2;
}

.contact-form-panel {
    padding: 4rem;
    border: .1rem solid #e3e7e9;
    background: #f6f7f6;
}

.contact-form-panel h2 {
    margin-bottom: 1rem;
    color: #1d1d1d;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.2;
}

.contact-form-panel > p {
    margin-bottom: 3rem;
    color: #666;
    font-size: 1.5rem;
    line-height: 1.6;
}

.contact-form {
    display: grid;
    gap: 2.2rem;
}

.contact-honeypot {
    position: absolute;
    width: .1rem;
    height: .1rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
}

.contact-field {
    display: grid;
    gap: .8rem;
    min-width: 0;
}

.contact-field label {
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    min-height: 4.8rem;
    padding: 1.2rem 1.4rem;
    border: .1rem solid #d9dfe1;
    border-radius: .2rem;
    outline: none;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 1.4rem;
}

.contact-field textarea {
    min-height: 13rem;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(34, 63, 110, .12);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #92999d;
}

.contact-submit {
    display: inline-flex;
    width: fit-content;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 0 2.2rem;
    border: 0;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.contact-submit:hover {
    transform: translateY(-.2rem);
    background: #172f56;
}

.contact-form-feedback {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
}

.contact-form-feedback.is-success {
    color: #286542;
}

.contact-form-feedback.is-error {
    color: #a52c2c;
}

@media (max-width: 1000px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .contact-details-panel h1 {
        max-width: 70rem;
    }
}

@media (max-width: 600px) {
    .contact-section {
        padding: 5rem 0 6rem;
    }

    .contact-details-panel h1 {
        font-size: 3.8rem;
    }

    .contact-form-panel {
        padding: 2.4rem 2rem;
    }

    .contact-form-panel h2 {
        font-size: 2.8rem;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .contact-map-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-map iframe {
        height: 22rem;
    }
}


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

@media (max-width: 1100px) {

    .footer-main {
        grid-template-columns:
            1fr 1fr 1fr;

        gap: 5rem 3rem;
    }

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

    .footer-newsletter {
        grid-column: 1 / -1;
    }

}


@media (max-width: 768px) {

    .site-footer {
        padding: 0 2rem;
    }

    .footer-cta {
        flex-direction: column;
        align-items: flex-start;

        gap: 4rem;

        padding: 7rem 0 5rem;
    }

    .footer-contact {
        align-items: flex-start;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;

        padding: 5rem 0;

        gap: 4rem 2rem;
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 2.5rem;
    }

    .footer-top {
        top: 2rem;
        right: 2rem;

        width: 4.5rem;
        height: 4.5rem;
    }

}


@media (max-width: 480px) {

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-column,
    .footer-brand,
    .footer-newsletter {
        grid-column: auto;
    }

    .footer-legal {
        flex-wrap: wrap;

        gap: 1rem;
    }

    .footer-cta h2 {
        font-size: 3.5rem;
    }

}



/* CATEGORY PAGE-------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* == CATEGORY BANNER === */

.category-banner {
    width: 100%;
    overflow: hidden;
    background: #111;
    position: relative;
}

.category-banner-swiper {
    width: 100%;
    height: min(25.833vw, 50rem);
}

.category-banner .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.category-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-banner .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0.4));
}

.banner-content {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 68rem;
    color: #fff;
    pointer-events: none;
}

.banner-content span {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    background: #4772b7ad;
    display: inline-block;
    padding: 7px 15px;
    color: white;
    border-radius: 20px;
}

.banner-content h2 {
    margin: 1rem 0 12px;
    font-size: 4rem;
    line-height: 1.05;
    font-weight: 600;
    text-transform: uppercase;
}

.banner-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.modular-kitchen {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    position: relative;
}

.modular-kitchen ul.intro-points li {
    line-height: 3rem;
    font-size: 16px;
}

.modular-kitchen ul.intro-points li span {
    color: white;
    font-size: 14px;
    background: var(--color-primary);
    width: 20px;
    height: 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
}


@media (max-width: 768px) {
    .category-banner-swiper {
        height: 40rem;
    }

    .product-category-banner img { display: none;}
    .product-category-banner { background-color: #000;}
    .product-category-banner .banner-content { position: static; transform: translateY(0%);}
    .banner-content p { font-size: 15px; line-height: 1.6;}
}


/* =========================================================
   PRODUCT SERIES
========================================================= */

.product-series {
    overflow: hidden;
}


.product-series-inner {
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(35rem, 0.75fr);
    align-items: center;

    gap: 9rem;
}


/* =========================================================
   GALLERY
   MAIN IMAGE LEFT / THUMBNAILS RIGHT
========================================================= */

.product-gallery {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 8rem;

    gap: 15px;
    min-width: 0;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.product-gallery-thumbs {
    width: 100%;
    height: 55rem;

    order: 2;
}

.product-gallery-thumbs .swiper-wrapper {
    flex-direction: column;
    justify-content: center;
}

.product-gallery-thumbs .swiper-slide {
    width: 100%;
    height: 8rem !important;

    cursor: pointer;
    opacity: 0.65;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.product-gallery-thumbs .swiper-slide:hover {
    opacity: 1;
    transform: scale(0.96);
}

.product-gallery-thumbs img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border: 1px solid transparent;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}

.product-gallery-thumbs .swiper-slide-thumb-active img {
    border-color: var(--color-primary);
    padding: 2px;
}

.product-series--dark .product-gallery-thumbs .swiper-slide-thumb-active img {
    border-color: var(--color-primary);
    padding: 2px;
}


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

.product-gallery-main {
    width: 100%;
    height: 55rem;

    order: 1;

    overflow: hidden;
}

.product-gallery-main .swiper-slide {
    width: 100%;
    height: 100%;
}

.product-gallery-main img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   NAVIGATION
========================================================= */

.product-gallery-prev,
.product-gallery-next {
    position: absolute;
    z-index: 5;
    width: 4.8rem;
    height: 4.8rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(24 22 22 / 70%);
    border-radius: 50%;
    color: #181616b3;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.product-gallery-prev {
    left: 2rem;
    bottom: 2rem;
}

.product-gallery-next {
    left: 8rem;
    bottom: 2rem;
}

.product-gallery-prev:hover,
.product-gallery-next:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: #fff;
}

.product-gallery-prev .material-symbols-outlined,
.product-gallery-next .material-symbols-outlined {
    font-size: 2rem;
}


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

.product-series-content {
    max-width: 75rem;
}

.product-series-number {
    display: block;

    margin-bottom: 12px;

    font-size: 12px;
    letter-spacing: 0.2em;

    opacity: 0.5;
}

.product-series-label {
    display: block;

    margin-bottom: 2rem;

    font-size: 12px;
    font-weight: 600;

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

    opacity: 0.65;
}

.product-series-content h2 {
    margin-bottom: 2.5rem;

    font-size: clamp(3.5rem, 4vw, 4rem);
    line-height: 5rem;
    font-weight: 600;

    text-transform: uppercase;
}





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

.product-series-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 2rem;
    padding-bottom: 0.8rem;

    font-size: 1.4rem;
    font-weight: 600;

    color: inherit;

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

    border-bottom: 1px solid currentColor;

    transition: gap 0.3s ease;
}

.product-series-link:hover {
    gap: 2rem;
}

.product-series-link .material-symbols-outlined {
    font-size: 1.8rem;
}


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

@media (max-width: 1000px) {

    .product-series {
        padding: 8rem 0;
    }

    .product-series-inner {
        width: min(100% - 4rem, 70rem);

        grid-template-columns: 1fr;

        gap: 5rem;
    }

    .product-series-content {
        max-width: 65rem;
    }

}


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

@media (max-width: 600px) {

    .product-series {
        padding: 6rem 0;
    }
    .product-series.product-series--reverse {padding: 0;}

    .product-series-inner {
        width: calc(100% - 3rem);
    }

    /* Main image top + thumbnails bottom */
    .product-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        gap: 1rem;
    }

    .product-gallery-main {
        order: 1;
        height: 40rem;
    }

    .product-gallery-thumbs {
        order: 2;

        width: 100%;
        height: 7rem;
    }

    .product-gallery-thumbs .swiper-wrapper {
        flex-direction: row;
    }

    .product-gallery-thumbs .swiper-slide {
        width: 7rem !important;
        height: 7rem !important;
    }

    .product-gallery-prev,
    .product-gallery-next {
        width: 4.2rem;
        height: 4.2rem;
    }

    .product-gallery-prev {
        left: 15px;
        bottom: 15px;
    }

    .product-gallery-next {
        left: 6.8rem;
        bottom: 15px;
    }

    .product-series-content h2 {
        font-size: 3rem;
        line-height: 4rem;
    }

    .product-series-content p {
        font-size: 15px;
    }

}

/* =========================================================
   DIAMOND SERIES — REVERSE LAYOUT
========================================================= */

.product-series--reverse .product-series-inner {
    grid-template-columns: minmax(35rem, 0.75fr) minmax(0, 1.25fr);
    padding-left: 5rem;
}


/* Content LEFT */
.product-series--reverse .product-series-content {
    order: 1;
}


/* Gallery RIGHT */
.product-series--reverse .product-gallery {
    order: 2;
}

/* =========================================================
   DIAMOND SERIES
   THUMBNAILS LEFT / MAIN IMAGE RIGHT
========================================================= */

.product-series--reverse .product-gallery {
    grid-template-columns: 8rem minmax(0, 1fr);
}


/* Thumbnail LEFT */
.product-series--reverse .product-gallery-thumbs {
    order: 1;
}


/* Main Image RIGHT */
.product-series--reverse .product-gallery-main {
    order: 2;
}

@media (max-width: 600px) {

    .product-series--reverse .product-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .product-series--reverse .product-gallery-main {
        order: 1;
    }

    .product-series--reverse .product-gallery-thumbs {
        order: 2;
    }

}












/* RELATED PRODUCT SLIDER------------------------------------------------------------------------------------------------------------------------------ */
/* =========================================================
   RELATED PRODUCTS
========================================================= */

.related-products {
    padding: 6rem 0 7rem;
    background: #f8f9fe;
    overflow: hidden;
}


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

.related-products-head {
    width: min(100% - 8rem, 140rem);
    margin: 0 auto 5rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
}


.related-products-title {
    position: relative;
}


.section-eyebrow {
    display: block;

    margin-bottom: 15px;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .22em;
    text-transform: uppercase;

    color: #777;
}


.related-products-title h2 {
    margin: 0;

    font-size: clamp(4rem, 5vw, 4rem);
    line-height: .95;

    font-weight: 500;

    letter-spacing: -.04em;
}


/* =========================================================
   META / NAVIGATION
========================================================= */

.related-products-meta {
    display: flex;
    align-items: center;
    gap: 4rem;
}


.related-counter {
    display: flex;
    align-items: center;
    gap: .8rem;

    font-size: 12px;
    letter-spacing: .1em;
    color: #888;
}


.related-counter strong {
    color: #111;
    font-weight: 600;
}


.related-navigation {
    display: flex;
    gap: .8rem;
}


.related-navigation button {
    width: 4.8rem;
    height: 4.8rem;

    display: grid;
    place-items: center;

    border: 1px solid #cfcfcb;
    border-radius: 50%;

    background: transparent;
    color: #111;

    cursor: pointer;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


.related-navigation button:hover {
    background: #111;
    border-color: #111;
    color: #fff;

    transform: translateY(-3px);
}


.related-navigation .material-symbols-outlined {
    font-size: 1.8rem;
}


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

.related-products-slider {
    width: min(100% - 8rem, 140rem);

    margin-left: auto;

    overflow: visible;
}


.related-products-slider .swiper-slide {
    width: 34rem;

    transition:
        transform .5s cubic-bezier(.2, .7, .2, 1);
}


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

.related-product-card {
    display: block;

    color: #111;
    text-decoration: none;
}


.related-product-image {
    position: relative;

    width: 100%;
    height: 46rem;

    overflow: hidden;

    background: #e9e9e6;
}


.related-product-image img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1),
        opacity .5s ease;
}


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

.related-product-image-hover {
    opacity: 0;
}


.related-product-card:hover .related-product-image img:first-child {
    transform: scale(1.06);
}


.related-product-card:hover .related-product-image-hover {
    opacity: 1;
    transform: scale(1.04);
}


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

.related-product-arrow {
    position: absolute;

    right: 2rem;
    bottom: 2rem;

    width: 5rem;
    height: 5rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;
    color: #111;

    opacity: 0;
    transform: translateY(1rem);

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


.related-product-card:hover .related-product-arrow {
    opacity: 1;
    transform: translateY(0);
}


.related-product-arrow .material-symbols-outlined {
    font-size: 2rem;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.related-product-info {
    display: grid;

    grid-template-columns: 4rem 1fr;

    gap: 15px;

    padding: 2rem 0 0;
}


.related-product-number {
    padding-top: .4rem;

    font-size: 11px;
    letter-spacing: .15em;

    color: #999;
}


.related-product-info h3 {
    margin: 0 0 .6rem;

    font-size: 1.8rem;
    line-height: 1.2;

    font-weight: 500;

    transition: transform .35s ease;
}


.related-product-info p {
    margin: 0;

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

    color: rgba(60, 60, 60, 1);

    text-transform: uppercase;
    letter-spacing: .1em;
}


.related-product-card:hover .related-product-info h3 {
    transform: translateX(.5rem);
}


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

@media (max-width: 1000px) {

    .related-products {
        padding: 8rem 0;
    }

    .related-products-head {
        width: calc(100% - 4rem);

        margin-bottom: 4rem;
    }

    .related-products-slider {
        width: calc(100% - 4rem);
    }

    .related-products-slider .swiper-slide {
        width: 32rem;
    }

    .related-product-image {
        height: 42rem;
    }

}


@media (max-width: 600px) {

    .related-products {
        padding: 6rem 0 7rem;
    }

    .related-products-head {
        width: calc(100% - 3rem);

        display: block;

        margin-bottom: 3rem;
    }



    .related-products-meta {
        margin-top: 3rem;

        justify-content: space-between;
    }

    .related-products-slider {
        width: calc(100% - 3rem);
    }

    .related-products-slider .swiper-slide {
        width: 82%;
    }

    .related-product-image {
        height: 42rem;
    }

    .related-product-arrow {
        opacity: 1;
        transform: none;

        width: 4.5rem;
        height: 4.5rem;
    }

}



/* PRODCUT DETAIL------------------------------------------------------------------------------------------------------------------------------------------------ */


.product-detail-page {
    padding: 4rem 0 6rem;
    /* background: #223e6e1a; */
}

.container {
max-width: 1300px;
    margin: auto;
    padding: 0 20px;
}


/* =================================
   MAIN 2 COLUMN LAYOUT
================================= */

.product-detail-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: start;
}


/* =================================
   GALLERY
================================= */

.product-detail-page .product-gallery {
    width: 100%;
    display: block;
    position: sticky;
    top: 10rem;
    z-index: 1;
}

/* =================================
   PRODUCT IMAGE ZOOM
================================= */


/* ==========================================
   PRODUCT ZOOM
========================================== */

.product-detail-page .main-product-image {
    position: relative;
    overflow: visible;
    cursor: crosshair;
}


/* Main Product Image */

.product-detail-page .main-product-image>#mainProductImage {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


/* ==========================================
   ZOOM LENS
========================================== */

.zoom-lens {
    position: absolute;

    width: 220px;
    height: 220px;

    display: none;

    pointer-events: none;

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

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

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.15);

    z-index: 20;
}


/* ==========================================
   ZOOM RESULT
========================================== */

.zoom-result {
    position: absolute;

    width: 400px;
    height: 400px;

    left: calc(100% + 25px);
    top: 0;

    background: #fff;

    border: 1px solid #ddd;

    overflow: hidden;

    display: none;

    z-index: 100;

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

    pointer-events: none;
}


/* Zoom Image */

.zoom-result img {
    position: absolute;

    width: auto;
    height: auto;

    max-width: none !important;
    max-height: none !important;

    display: block;

    margin: 0;
}


/* ==========================================
   THUMBNAILS
========================================== */

.product-detail-page .product-thumbnails-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}


.product-detail-page .product-thumbnails {
    display: flex;
    gap: 12px;
    overflow: hidden;
    flex: 1;
}


.product-detail-page .product-thumb {
    flex: 0 0 80px;

    width: 80px;
    height: 80px;

    border: 1px solid #ddd;

    cursor: pointer;

    overflow: hidden;

    transition: all 0.25s ease;
}


.product-detail-page .product-thumb img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.product-detail-page .product-thumb:hover {
    border-color: #999;
}


.product-detail-page .product-thumb.active {
    border: 2px solid #222;
}


/* ==========================================
   GALLERY ARROWS
========================================== */

.product-detail-page .gallery-arrow {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border: 1px solid #ddd;

    background: #fff;

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

    cursor: pointer;

    transition: all 0.25s ease;
}


.product-detail-page .gallery-arrow:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}


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

@media (max-width: 1199px) {

    .zoom-result {
        width: 450px;
        height: 450px;
    }

}


@media (max-width: 991px) {

    .zoom-result {
        display: none !important;
    }

    .zoom-lens {
        display: none !important;
    }

    .main-product-image {
        cursor: default;
    }

}


@media (max-width: 575px) {

    .product-detail-page .product-thumbnails-wrapper {
        gap: 6px;
    }

    .product-detail-page .product-thumb {
        flex: 0 0 65px;
        width: 65px;
        height: 65px;
    }

    .product-detail-page .gallery-arrow {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

}


/* =================================
   THUMBNAILS + ARROWS
================================= */

.product-detail-page .product-thumbnails-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.product-detail-page .product-thumbnails {
    display: flex;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.product-detail-page .product-thumb {
    width: 85px;
    height: 75px;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.product-detail-page .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-page .product-thumb.active {
    border: 2px solid #173f70;
}

.product-detail-page .gallery-arrow {
    width: 42px;
    height: 75px;
    border: 0;
    background: #f1f1f1;
    color: #173f70;
    font-size: 24px;
    cursor: pointer;
}

.product-detail-page .gallery-arrow:hover {
    background: #173f70;
    color: #fff;
}


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

.product-detail-page .product-series {
    color: #777;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-detail-page .product-info h1 {
    font-size: 3.4rem;
    line-height: 1.25;
    margin: 8px 0 0;
    text-transform: uppercase;
}

.product-detail-page .product-divider {
    height: 1px;
    background: #ddd;
    margin: 25px 0;
}

.product-detail-page .product-description {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 28px;
}





.product-spec-table {
    width: 100%;
    overflow-x: auto;
}

.product-spec-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.product-spec-table th,
.product-spec-table td {
    padding: 1rem 15px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
}

.product-spec-table th {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #333;
    background-color: #f7f7f7;
}

.product-spec-table td {
    color: #555;
    font-size: 16px;
}

.product-spec-table tbody tr:last-child td {
    border-bottom: 1px solid #ccc;
}

/* =================================
   SPECIFICATIONS
================================= */

.product-detail-page .product-specifications {
    margin-bottom: 25px;
}

.product-detail-page .product-specifications h3 {
    font-size: 19px;
    margin-bottom: 12px;
}

.product-detail-page .spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.product-detail-page .spec-item {
    padding: 12px 15px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.product-detail-page .spec-item span {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.product-detail-page .spec-item strong {
    font-size: 14px;
    color: #333;
}


/* =================================
   BUTTONS
================================= */

.product-detail-page .product-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.product-detail-page .btn {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

.product-detail-page .btn-primary {
    background: #173f70;
    color: #fff;
}

.product-detail-page .btn-primary:hover {
    background: #0f2a4c;
}

.product-detail-page .btn-outline {
    border: 1px solid #173f70;
    color: #173f70;
    transition: all 0.3s ease;
}

.product-detail-page .btn-outline:hover {
    background: #040a11;
    color: #fff;
}


/* =================================
   LINKS
================================= */

.product-detail-page .product-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-detail-page .product-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
}


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

@media (max-width: 900px) {

    .product-detail-page .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .product-detail-page .main-product-image {
        height: 500px;
    }

}


@media (max-width: 600px) {

    .product-detail-page .main-product-image {
        height: 350px;
    }

    .product-detail-page .product-info h1 {
        font-size: 28px;
    }


    .product-detail-page.product-actions {
        flex-direction: column;
    }

    .product-detail-page .btn {
        width: 100%;
    }

}

/* =================================
   PRODUCT IMAGE ZOOM
================================= */

.main-product-image {
    position: relative;
    width: 100%;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    cursor: zoom-in;
}

.main-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
    transform-origin: center center;
}


/* Zoom on hover */



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

    .main-product-image {
        height: 500px;
    }

}

@media (max-width: 600px) {

    .main-product-image {
        height: 350px;
    }

    /* Mobile par zoom disable */
    .main-product-image:hover img {
        transform: none;
    }

}

/* ==========================================
   PRODUCT DESCRIPTION INTRO
========================================== */

.product-description-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 25px;
    margin-top: 45px;
    margin-bottom: 50px;
    background: #c7cfdb24;
}

.product-description-image {
    width: 100%;
    overflow: hidden;
}

.product-description-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-description-content {
    padding-right: 4rem;
}


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

.description-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 10px;
}

.product-description-content h2 {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}

.product-description-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
}


/* ==========================================
   FEATURES
========================================== */

.product-description-features-section {
    margin-bottom: 50px;
}

.product-description-features-section h3 {
    font-size: 24px;
    font-weight: 600;
    color: #222;
    margin-bottom: 25px;
}

.product-description-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.description-feature {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #eee;
}

.description-feature-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;

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

    background: #222;
    color: #fff;

    font-size: 20px;
}

.description-feature-icon .material-symbols-outlined {
    font-size: 22px;
    color: white;
}

.description-feature strong {
    display: block;
    color: #222;
    font-size: 15px;
    margin-bottom: 5px;
}

.description-feature span {
    display: block;
    color: #777;
    font-size: 13px;
    line-height: 1.6;
}


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

.product-description-banner {
    width: 100%;
    height: 420px;
    margin: 45px 0;
    overflow: hidden;
    background: #f7f7f7;
}

.product-description-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================
   TEXT
========================================== */

.product-description-text p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 18px;
}


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

.product-description-cta {
    margin: 30px 0 40px;
}

.product-description-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================
   POPULAR SEARCHES
========================================== */

.product-popular-searches {
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.product-popular-searches h4 {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

.product-popular-searches p {
    font-size: 13px;
    line-height: 1.8;
    color: #888;
}


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

@media (max-width: 991px) {

    .product-description-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-description-image {
        height: 400px;
    }

}


@media (max-width: 767px) {

    .product-description-features {
        grid-template-columns: 1fr;
    }

    .product-description-content h2 {
        font-size: 26px;
    }

    .product-description-image {
        height: 320px;
    }

    .product-description-banner {
        height: 280px;
    }

}

/* ==========================================
   HIGOLD FAQ SECTION
========================================== */

.hg-faq-section {
    padding: 5rem 0;
    background: #f8f8f8;
}


/* ==========================================
   FAQ HEADER
========================================== */

.hg-faq-header {
    max-width: 750px;
    margin: 0 auto 45px;
    text-align: center;
}

.hg-faq-subtitle {
    display: inline-block;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #888;

    margin-bottom: 10px;
}

.hg-faq-header h2 {
    margin: 0 0 15px;

    font-size: 34px;
    line-height: 1.3;

    font-weight: 600;

    color: #222;
}

.hg-faq-header p {
    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #777;
}


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

.hg-faq-list {
    max-width: 900px;
    margin: 0 auto;
}


/* ==========================================
   FAQ ITEM
========================================== */

.hg-faq-item {
    background: #fff;

    border: 1px solid #e5e5e5;

    margin-bottom: 12px;

    transition: all 0.3s ease;
}

.hg-faq-item.active {
    border-color: #222;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   QUESTION
========================================== */

.hg-faq-question {
    width: 100%;

    display: flex;

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

    gap: 20px;

    padding: 22px 25px;

    border: 0;

    background: transparent;

    cursor: pointer;

    text-align: left;
}


.hg-faq-question-left {
    display: flex;

    align-items: center;

    gap: 18px;
}


.hg-faq-number {
    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #999;

    min-width: 25px;
}


.hg-faq-question h3 {
    margin: 0;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;

    color: #222;
}


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

.hg-faq-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;

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

    border: 1px solid #ddd;

    color: #222;

    transition: all 0.3s ease;
}


.hg-faq-icon i {
    font-size: 20px;

    transition: transform 0.3s ease;
}


.hg-faq-item.active .hg-faq-icon {
    background: #222;

    border-color: #222;

    color: #fff;
}


.hg-faq-item.active .hg-faq-icon i {
    transform: rotate(45deg);
}


/* ==========================================
   ANSWER
========================================== */

.hg-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.35s ease;
}


.hg-faq-item.active .hg-faq-answer {
    grid-template-rows: 1fr;
}


.hg-faq-answer-inner {
    overflow: hidden;

    padding: 0 25px;
}


.hg-faq-item.active .hg-faq-answer-inner {
    padding-bottom: 25px;
}


.hg-faq-answer-inner p {
    margin: 0 0 12px;

    font-size: 14px;

    line-height: 1.8;

    color: #666;
}


.hg-faq-answer-inner p:last-child {
    margin-bottom: 0;
}


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

.hg-faq-answer-inner ul {
    margin: 10px 0 0;
    padding-left: 20px;
}


.hg-faq-answer-inner li {
    margin-bottom: 9px;

    font-size: 14px;

    line-height: 1.7;

    color: #666;
}


.hg-faq-answer-inner li:last-child {
    margin-bottom: 0;
}


.hg-faq-answer-inner li strong {
    color: #222;
}


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

@media (max-width: 767px) {

    .hg-faq-section {
        padding: 60px 0;
    }

    .hg-faq-header {
        margin-bottom: 30px;
    }

    .hg-faq-header h2 {
        font-size: 26px;
    }

    .hg-faq-header p {
        font-size: 14px;
    }

    .hg-faq-question {
        padding: 18px 15px;
    }

    .hg-faq-question-left {
        gap: 10px;
    }

    .hg-faq-number {
        min-width: 22px;
    }

    .hg-faq-question h3 {
        font-size: 14px;
    }

    .hg-faq-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .hg-faq-answer-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hg-faq-item.active .hg-faq-answer-inner {
        padding-bottom: 20px;
    }

}


.product-price-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.product-price {
    display: flex;
    align-items: baseline;
    color: #233f72;
    line-height: 1;
}

.currency-symbol {
    font-size: 4rem;
    font-weight: 500;
}

.price-value {
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: -0.04em;
}


/* =========================
   CURRENCY DROPDOWN
========================= */

.currency-dropdown {
    position: relative;
}

.currency-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px 1.8rem;
    border: 0;
    border-radius: 3rem;
    background: #f5f6f8;
    color: #111;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
}

.currency-toggle .material-symbols-outlined {
    font-size: 1.7rem;
}


/* =========================
   MENU
========================= */

.currency-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;

    min-width: 8.5rem;

    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.currency-dropdown.active .currency-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.currency-menu button {
    width: 100%;
    padding: 1rem 1.8rem;

    border: 0;
    background: #fff;

    color: #111;
    font-size: 1.2rem;
    text-align: left;

    cursor: pointer;
    transition: background 0.2s ease;
}

.currency-menu button:hover {
    background: #f3f3f3;
}

.currency-menu button.active {
    background: #2869c7;
    color: #fff;
}

/* =========================================================
   BREADCRUMB
========================================================= */
.breadcrumb_container{background-color:#223f6e0f}
.breadcrumb{width:100%;padding:10px 0}
.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:0;padding:0;list-style:none}
.breadcrumb-list li{display:flex;align-items:center}
.breadcrumb-list a{color:#666;font-size:14px;font-weight:500;text-decoration:none;transition:color .3s}
.breadcrumb-list a:hover{color:#243f70}
.breadcrumb-list .material-symbols-outlined{font-size:1.8rem;color:#999}
.breadcrumb-current{color:var(--color-primary);font-size:1.3rem;font-weight:600}

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

@media (max-width: 600px) {

    .breadcrumb {
        padding: 1.4rem 0;
    }

    .breadcrumb-list {
        gap: 0.4rem;
    }


    .breadcrumb-list .material-symbols-outlined {
        font-size: 1.6rem;
    }

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

}


.product-banner {
    position: relative;
}

.product-banner h3 {
    color: white;
    text-transform: uppercase;
    font-size: 3.8rem;
}

.product-banner .product-banner-content {
    position: absolute;
    top: 80%;
    padding-left: 7%;
}

.product-banner img {
    width: 100%;
}



/* PRODUCT LISTING--------------------------------------------------------------------------------------------------- */

/* =========================================================
   PRODUCT LISTING
========================================================= */

.product-listing{padding:10rem 0 3rem; background:#f7f8fa}
.product-listing .container{max-width:90%;}
.product-listing-header{align-items:end}
.product-listing-eyebrow{display:block; margin-bottom:15px; font-size:1.2rem; letter-spacing:.2em; text-transform:uppercase; color:#777}
.product-listing-header h2{margin:0; font-size:clamp(3.5rem, 5vw, 4rem); line-height:1; font-weight:500; color:#111}
.product-listing-header>p{font-size:1.6rem; line-height:1.8}

.product-listing-layout { display: grid; grid-template-columns: 30rem minmax(0, 1fr); align-items: start; gap: 4rem; margin: 6rem 0; }
.product-category-sidebar {
    border-top: 1px solid #d9dadd;
    background: white;
    padding: 2rem;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    position: sticky;
    top: 12.6rem;
 }

 .product-listing .product-category-title {
margin: 0;
    font-size: clamp(20px, 2.3rem, 3.1rem);
    line-height: 1;
    font-weight: 600;
    color: var(--color-primary);
    border-left: solid 4px var(--color-primary);
    padding: 10px;
    background: linear-gradient(90deg, #223f6e1a, transparent);
 }
.product-category-group { border-bottom: 1px solid #d9dadd; }
.product-category-group summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.8rem 0; color: #111; font-size: 1.6rem; font-weight: 600; cursor: pointer; list-style: none; }
.product-category-group summary::-webkit-details-marker { display: none; }
.product-category-group summary::after { content: "+"; color: #777; font-size: 2rem; font-weight: 400; }
.product-category-group[open] summary::after { content: "\2212"; }
.product-category-links { display: grid; gap: 0.4rem; padding: 0 0 1.5rem 1rem; }
.product-category-links a { display: block; padding: 1rem 1.2rem; color: #555; font-size: 1.3rem; line-height: 1.5; text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.product-category-links a:hover { color: #111; }
.product-category-links a.active { color: #111; background: #e8e9eb; font-weight: 700; }

.product-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6rem 3rem; margin: 6rem 0;}
.product-listing-layout .product-grid { margin: 0; }


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

.product-card { min-width: 0; }
.product-card-link {
    position: relative;
    z-index: 1;
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-card-image { position: relative; height: 42rem; overflow: hidden; background: #e9eaec; }
.product-card-image>img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.product-card:hover .product-card-image>img { transform: scale(1.06); }

.product-card-number { position: absolute; top: 2rem; left: 2rem; z-index: 3; font-size: 12px;letter-spacing: 0.15em; color: #111;}

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

.product-card-overlay {position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:3rem; background:linear-gradient(to top,rgba(0,0,0,.82) 0,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 75%); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s,visibility .4s,transform .4s; pointer-events:none;}
.product-card:hover .product-card-overlay{opacity:1; visibility:visible; transform:translateY(0)}


.product-card-overlay p { max-width: 48rem; margin: 0 0 2rem; font-size: 15px; line-height: 1.7; color: #fff;}


/* =========================================================
   QUICK VIEW
========================================================= */

.product-card-view {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    padding-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    transition: gap 0.3s ease;
    pointer-events: none;
}

.product-card-view:hover {
    gap: 1.8rem;
}

.product-card-view .material-symbols-outlined {
    font-size: 1.8rem;
}


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

.product-card-content {
    padding: 2.5rem;
}

.product-card-series {
    display: block;
    margin-bottom: 1rem;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #777;
}

.product-card-content h3 {
    margin: 0;

    font-size: clamp(20px, 2.2rem, 2.3rem);
    line-height: 3.5rem;
    font-weight: 500;

    color: #111;
}


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

@media (max-width: 900px) {



    .product-listing-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-listing-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .product-card-image {
        height: 48rem;
    }
}


@media (max-width: 600px) {



    .product-listing-header h2 {
        font-size: 3.5rem;
        line-height: normal;
    }

    .product-card-image {
        height: 38rem;
    }

    .product-card-overlay {
        padding: 2rem;
    }


    .product-card-content h3 {
        font-size: 2rem;
    }
}

.product-category-banner {
    position: relative;
}

/* =========================================================
   PRODUCT HOVER PREVIEW
========================================================= */

.product-hover-preview .product-preview {
    width: 100%;
    margin-top: 24px;
}

.product-hover-preview .preview-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /* IMPORTANT */
    overflow: hidden;
}

.product-hover-preview .preview-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity 0.4s ease,
        transform 0.6s ease;

    pointer-events: none;
}

.product-hover-preview .preview-image-wrap img.active {
    opacity: 1;
    transform: scale(1);
}

.preview-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 20px;

    z-index: 10;

    padding: 10px 12px;

    color: #fff;
    background: rgba(20, 20, 20, 0.52);
    backdrop-filter: blur(6px);

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

    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

.preview-title.show {
    opacity: 1;
    transform: translateY(0);
}


.product-detail-page .product-description.detail h6 {
    font-size: 22px;
}

.product-detail-page ul.feature-list {
    list-style: circle;
    padding-left: 20px;
    line-height: 25px;
    font-size: 16px;
    line-height: 28px;
}

.product-detail-page .product-description.detail ul.feature-list li {
    margin-bottom: 10px;
}

.product-detail-page h3 {
    font-size: clamp(24px, 2.8rem, 3rem);
}

.product-detail-page h4 {
    font-size: clamp(22px, 2.4rem, 2.8rem);
}

.product-detail-page h5 {
    font-size: clamp(19px, 2rem, 2.2rem);
    font-weight: 600;
}

.tags span {
    background: #223f6e1a;
    padding: 5px 12px;
    border-radius: 20px;
    color: #5b6981;
    font-size: 15px;
}




.product-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.product-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    color: #111;
    font-size: 15px;
}

.product-table th {
    padding: 6px 10px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--color-primary);
    color: white;
}

.product-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #999;
    vertical-align: middle;
    line-height: 1.25;
}

.product-table td:first-child {
    width: 80px;
    padding: 4px 8px;
    text-align: center;
}

.product-table td:first-child img {
    object-fit: contain;
    display: block;
    margin: auto;
}

.product-table td:nth-child(2) {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

.product-table td:nth-child(3) {
    width: 180px;
    white-space: nowrap;
}

.product-table td:nth-child(4) {
    width: 180px;
}

.product-table td:nth-child(5) {
    width: 150px;
    white-space: nowrap;
}

.product-table td:nth-child(6) {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

/* Hover */
.product-table tbody tr:hover {
    background: #f7f7f7;
}

/* Mobile */
@media (max-width: 768px) {
    .product-table {
        min-width: 800px;
        font-size: 12px;
    }

    .product-table th,
    .product-table td {
        padding: 6px 8px;
    }

    .product-table td:first-child img {
        width: 60px;
        height: 40px;
    }
}



/* Achivement section--------------------------------------------------------------------------------------------------------------------------- */

/* =========================================================
   ABOUT ACHIEVEMENTS
========================================================= */

.about-achievements {
    position: relative;
    width: 100%;
    min-height: 900px;

    background-image: url("../assets/images/about-team.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.about-achievements-overlay {
    position: absolute;
    inset: 0;

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

    z-index: 1;
}


/* =========================================================
   INNER
========================================================= */

.about-achievements-inner {
    position: relative;

    width: 100%;
    min-height: 900px;

    z-index: 2;
}


/* =========================================================
   COMMON ACHIEVEMENT
========================================================= */

.achievement {
    position: absolute;
}

.achievement-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.achievement h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.achievement p {
    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
}


/* =========================================================
   NUMBER
========================================================= */

.achievement-number {
    color: #347bed;

    font-size: 180px;
    font-weight: 800;
    line-height: 0.9;

    letter-spacing: -8px;
}

.achievement-number span {
    font-size: 70px;
    vertical-align: top;

    letter-spacing: 0;
}


/* =========================================================
   REDDOT
========================================================= */

.achievement-reddot {
    top: 235px;
    left: 5.5%;

    width: 38%;
}

.achievement-reddot .achievement-line {
    width: 70%;
    margin-bottom: 45px;
}

.achievement-reddot .achievement-number {
    margin-bottom: 45px;
}


/* =========================================================
   IF DESIGN
========================================================= */

.achievement-if {
    top: 55px;
    left: 54%;

    width: 38%;
}

.achievement-if .achievement-line {
    width: 90%;
    margin-bottom: 45px;
}

.achievement-if .achievement-number {
    margin-bottom: 45px;
}


/* =========================================================
   PATENTS
========================================================= */

.achievement-patents {
    top: 520px;
    right: 5.5%;

    width: 32%;
}

.achievement-patents .achievement-line {
    width: 100%;
    margin-bottom: 45px;
}

.achievement-patents .achievement-number {
    margin-bottom: 45px;
}


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

.achievement-description {
    position: absolute;

    left: 5.5%;
    bottom: 55px;

    width: 48%;
}

.achievement-description p {
    margin: 0;

    color: #fff;

    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;
}


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

@media (max-width: 1000px) {

    .about-achievements,
    .about-achievements-inner {
        min-height: 750px;
    }

    .achievement-number {
        font-size: 120px;
    }

    .achievement-number span {
        font-size: 50px;
    }

    .achievement h3 {
        font-size: 18px;
    }

    .achievement p {
        font-size: 16px;
    }

    .achievement-description p {
        font-size: 15px;
    }
}


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

@media (max-width: 600px) {

    .about-achievements {
        min-height: auto;

        padding: 70px 20px;
    }

    .about-achievements-inner {
        min-height: auto;

        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .achievement {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;
    }

    .achievement-line {
        width: 100% !important;

        margin-bottom: 25px;
    }

    .achievement-number {
        font-size: 90px;

        letter-spacing: -4px;

        margin-bottom: 25px !important;
    }

    .achievement-number span {
        font-size: 40px;
    }

    .achievement h3 {
        font-size: 18px;
    }

    .achievement p {
        font-size: 16px;
    }

    .achievement-description {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;
    }

    .achievement-description p {
        font-size: 14px;
        line-height: 1.7;
    }
}



/* CATEGORY SLIDER IMAGES---------------------------------------------------------------------------------------------------------------------- */

/* =========================================================
   CATEGORY HERO
========================================================= */

.category-hero {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #222;
}


/* =========================================================
   MAIN MEDIA
========================================================= */

.category-hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7.30;
    overflow: hidden;
}

.category-video,
.category-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* VIDEO */

.category-video {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.45s ease;
}


/* HOVER IMAGE */

.category-hover-image {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* When image is active */

.category-hero.show-image .category-hover-image {
    opacity: 1;
    visibility: visible;
}

.category-hero.show-image .category-video {
    opacity: 0;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.category-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.35) 100%
    );
}


/* =========================================================
   CATEGORY TABS
========================================================= */

.category-tabs {
    position: absolute;
    z-index: 10;

    left: 0;
    right: 0;
    bottom: 0;

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

    backdrop-filter: blur(3px);
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   TAB
========================================================= */

.category-tab {
    min-height: 100px;

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

    padding: 20px 25px;

    color: #fff;

    border-right: 1px solid rgba(255,255,255,0.25);

    cursor: pointer;

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

.category-tab:last-child {
    border-right: none;
}


/* ACTIVE */

.category-tab.active {
    background: #23477b;
}


/* HOVER */

.category-tab:hover {
    background: #23477b;
}


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

.category-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;
}

.category-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   TEXT
========================================================= */

.category-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3px;
    white-space: nowrap;
}


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

@media (max-width: 900px) {

    .category-tab {
        min-height: 80px;
        padding: 15px;
        gap: 10px;
    }

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

    .category-name {
        font-size: 13px;
    }
}


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

@media (max-width: 600px) {

    .category-hero {
        overflow: visible;
    }

    .category-hero-media {
        aspect-ratio: 4 / 3;
    }

    .category-tabs {
        position: relative;

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

        background: #222;
    }

    .category-tab {
        min-height: 75px;

        justify-content: flex-start;

        padding: 12px;
    }

    .category-tab:nth-child(2) {
        border-right: none;
    }

    .category-tab:nth-child(3),
    .category-tab:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,0.2);
    }

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

    .category-name {
        font-size: 11px;
        white-space: normal;
    }
}