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

   NAIBA LANDING PAGE

   FULLSCREEN IMAGE BACKGROUND

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



:root {

    --landing-white: #ffffff;

    --landing-white-soft: rgba(255, 255, 255, 0.78);

    --landing-white-muted: rgba(255, 255, 255, 0.58);



    --landing-dark: #151616;

    --landing-dark-soft: rgba(12, 14, 13, 0.58);



    --landing-accent: #e3292d;

    --landing-accent-dark: #bd1e23;



    --landing-border: rgba(255, 255, 255, 0.34);

}





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

   ROOT

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



.naiba-landing {

    position: relative;



    width: 100%;

    height: 100vh;



    min-height: 620px;



    overflow: hidden;



    background: #20211f;



    isolation: isolate;

}





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

   BACKGROUND SLIDER

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



.landing-background {

    position: absolute;



    inset: 0;



    z-index: -10;



    overflow: hidden;

}





.landing-bg-slide {

    position: absolute;



    inset: 0;



    opacity: 0;



    visibility: hidden;



    transition:

        opacity 1.15s ease,

        visibility 1.15s ease;

}





.landing-bg-slide.is-active {

    opacity: 1;



    visibility: visible;



    z-index: 2;

}





.landing-bg-image {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: cover;



    object-position: center;



    transform: scale(1.04);



    transition:

        transform 7s ease;

}





.landing-bg-slide.is-active .landing-bg-image {

    transform: scale(1.11);

}





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

   GLOBAL OVERLAY

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



.landing-overlay {

    position: absolute;



    inset: 0;



    z-index: -5;



    background:

        linear-gradient(

            90deg,

            rgba(6, 8, 8, 0.84) 0%,

            rgba(6, 8, 8, 0.68) 26%,

            rgba(6, 8, 8, 0.28) 53%,

            rgba(6, 8, 8, 0.08) 100%

        );

}





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

   LEFT DARKER AREA

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



.landing-left-overlay {

    position: absolute;



    top: 0;

    left: 0;

    bottom: 0;



    width: 47%;



    z-index: -4;



    pointer-events: none;



    background:

        linear-gradient(

            90deg,

            rgba(6, 7, 7, 0.80) 0%,

            rgba(6, 7, 7, 0.60) 70%,

            rgba(6, 7, 7, 0.00) 100%

        );

}





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

   TOP OVERLAY

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



.landing-top-overlay {

    position: absolute;



    inset: 0;



    z-index: -3;



    pointer-events: none;



    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.42) 0%,

            rgba(0,0,0,.00) 22%,

            rgba(0,0,0,.00) 72%,

            rgba(0,0,0,.50) 100%

        );

}





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

   SUBTLE NOISE

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



.landing-noise {

    position: absolute;



    inset: 0;



    z-index: -2;



    pointer-events: none;



    opacity: .045;



    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http\://www\.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");



    mix-blend-mode: soft-light;

}





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

   DECORATIVE CIRCLES

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



.landing-decor {

    position: absolute;



    pointer-events: none;



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



    border-radius: 50%;



    z-index: -1;

}





.decor-top-left {

    width: 360px;

    height: 360px;



    top: -260px;

    left: -120px;

}





.decor-bottom-right {

    width: 460px;

    height: 460px;



    right: -300px;

    bottom: -290px;

}





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

   MAIN CONTENT

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



.landing-content {

    position: relative;



    width: 100%;

    height: 100%;



    z-index: 5;



    display: flex;



    align-items: center;



    justify-content: flex-start;



    padding:

        30px

        clamp(32px, 7vw, 120px);

}





.landing-content-inner {

    width: min(100%, 610px);



    display: flex;



    flex-direction: column;



    align-items: flex-start;



    color: var(--landing-white);

}





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

   LOGO

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



.landing-logo-wrap {

    position: relative;



    display: inline-flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 30px;

}





.landing-logo-glow {

    position: absolute;



    width: 145px;

    height: 82px;



    border-radius: 50%;



    background:

        rgba(255, 255, 255, .16);



    filter: blur(22px);



    opacity: .75;

}





.landing-logo {

    position: relative;



    width: clamp(145px, 17vw, 225px);



    height: auto;



    display: block;



    object-fit: contain;



    filter:

        drop-shadow(

            0 8px 22px

            rgba(0,0,0,.35)

        );

}





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

   WELCOME TEXT

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



.landing-welcome {

    width: 100%;

}





.landing-welcome-line {

    display: flex;



    align-items: center;



    gap: 11px;



    margin-bottom: 17px;

}





.landing-welcome-line span {

    display: block;



    width: 31px;



    height: 1px;



    background:

        rgba(255,255,255,.62);

}





.landing-welcome-line small {

    color:

        rgba(255,255,255,.75);



    font-size:

        .63rem;



    line-height: 1;



    font-weight: 800;



    letter-spacing:

        .20em;

}





.landing-welcome h1 {

    max-width: 690px;



    margin:

        0;



    color:

        var(--landing-white);



    font-size:

        clamp(2rem, 3.2vw, 3.65rem);



    line-height:

        1.13;



    font-weight:

        400;



    letter-spacing:

        -0.04em;



    text-shadow:

        0 4px 24px rgba(0,0,0,.20);

}





.landing-welcome h1 strong {

    font-weight: 800;

}





.landing-welcome p {

    margin:

        13px 0 0;



    color:

        var(--landing-white-soft);



    font-size:

        clamp(.84rem, 1vw, .98rem);



    line-height:

        1.65;



    font-weight:

        400;

}





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

   LANGUAGE BUTTONS

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



.landing-languages {

    margin-top: 27px;



    display: flex;



    align-items: center;



    flex-wrap: wrap;



    gap: 10px;

}





.landing-language-btn {

    min-width: 145px;



    min-height: 42px;



    padding:

        0 10px

        0 18px;



    display: inline-flex;



    align-items: center;



    justify-content: space-between;



    gap: 15px;



    border:

        1px solid rgba(255,255,255,.74);



    border-radius:

        999px;



    background:

        rgba(8,9,9,.24);



    color:

        #fff;



    backdrop-filter:

        blur(10px);



    -webkit-backdrop-filter:

        blur(10px);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.10),

        0 8px 30px rgba(0,0,0,.10);



    transition:

        background .25s ease,

        border-color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}





.landing-language-btn:hover {

    color: #fff;



    background:

        rgba(255,255,255,.18);



    border-color:

        #fff;



    transform:

        translateY(-2px);



    box-shadow:

        0 10px 30px rgba(0,0,0,.18);

}





.language-btn-inner {

    display: inline-flex;



    align-items: center;



    gap: 8px;

}





.language-btn-flag {

    font-size:

        .95rem;



    line-height: 1;

}





.language-btn-name {

    font-size:

        .68rem;



    line-height: 1;



    font-weight:

        800;



    letter-spacing:

        .08em;

}





.language-btn-arrow {

    width: 27px;

    height: 27px;



    flex: 0 0 auto;



    border-radius: 50%;



    display: grid;



    place-items: center;



    background:

        rgba(255,255,255,.16);



    transition:

        transform .25s ease,

        background .25s ease;

}





.landing-language-btn:hover .language-btn-arrow {

    transform:

        rotate(45deg);



    background:

        rgba(255,255,255,.28);

}





.language-btn-arrow i {

    font-size:

        .70rem;

}





/* EMPTY */



.landing-no-language {

    padding:

        12px 17px;



    border:

        1px solid rgba(255,255,255,.24);



    border-radius:

        999px;



    color:

        rgba(255,255,255,.72);



    background:

        rgba(0,0,0,.17);



    font-size:

        .75rem;

}





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

   BOTTOM INFO

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



.landing-bottom-info {

    width: 100%;



    margin-top:

        43px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;

}





.landing-social {

    display: flex;



    align-items: center;



    gap: 8px;

}





.landing-social a {

    width: 27px;

    height: 27px;



    display: grid;



    place-items: center;



    color:

        rgba(255,255,255,.78);



    font-size:

        .72rem;



    border-radius:

        50%;



    transition:

        color .2s ease,

        background .2s ease,

        transform .2s ease;

}





.landing-social a:hover {

    color: #fff;



    background:

        rgba(255,255,255,.12);



    transform:

        translateY(-2px);

}





.landing-copyright {

    color:

        rgba(255,255,255,.44);



    font-size:

        .62rem;



    font-weight:

        600;



    letter-spacing:

        .04em;

}





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

   TOP RIGHT BRAND LABEL

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



.landing-top-brand {

    position: absolute;



    top: 31px;



    right: 36px;



    z-index: 20;



    display: flex;



    align-items: center;



    gap: 9px;



    color:

        rgba(255,255,255,.70);



    font-size:

        .58rem;



    font-weight:

        800;



    letter-spacing:

        .16em;

}





.landing-top-brand-line {

    width: 24px;



    height: 1px;



    background:

        rgba(255,255,255,.42);

}





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

   SLIDER UI

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



.landing-slider-ui {

    position: absolute;



    right: 36px;



    bottom: 34px;



    z-index: 20;



    display: flex;



    align-items: center;



    gap: 24px;

}





.landing-slider-counter {

    display: flex;



    align-items: center;



    gap: 11px;



    color:

        rgba(255,255,255,.88);



    font-size:

        .67rem;



    font-weight:

        800;



    letter-spacing:

        .08em;

}





.slider-counter-line {

    position: relative;



    width: 60px;



    height: 1px;



    overflow: hidden;



    background:

        rgba(255,255,255,.25);

}





.slider-counter-line span {

    position: absolute;



    top: 0;

    left: 0;



    width: 0;

    height: 100%;



    background:

        #fff;

}





.landing-slider-controls {

    display: flex;



    align-items: center;



    gap: 7px;

}





.landing-slider-button {

    width: 41px;

    height: 41px;



    padding: 0;



    display: grid;



    place-items: center;



    border:

        1px solid rgba(255,255,255,.35);



    border-radius:

        50%;



    background:

        rgba(0,0,0,.14);



    color:

        #fff;



    backdrop-filter:

        blur(9px);



    -webkit-backdrop-filter:

        blur(9px);



    cursor: pointer;



    transition:

        background .22s ease,

        border-color .22s ease,

        transform .22s ease;

}





.landing-slider-button:hover {

    background:

        rgba(255,255,255,.18);



    border-color:

        rgba(255,255,255,.7);



    transform:

        translateY(-2px);

}





.landing-slider-button i {

    font-size:

        .76rem;

}





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

   DOTS

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



.landing-slide-dots {

    position: absolute;



    left: 50%;



    bottom: 37px;



    z-index: 20;



    transform:

        translateX(-50%);



    display: flex;



    align-items: center;



    gap: 7px;

}





.landing-slide-dot {

    width: 5px;

    height: 5px;



    padding: 0;



    border: 0;



    border-radius:

        999px;



    background:

        rgba(255,255,255,.42);



    cursor: pointer;



    transition:

        width .25s ease,

        background .25s ease;

}





.landing-slide-dot.is-active {

    width: 23px;



    background:

        #fff;

}





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

   SCROLL INDICATOR

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



.landing-scroll-indicator {

    position: absolute;



    left: 36px;



    bottom: 34px;



    z-index: 20;



    display: flex;



    align-items: center;



    gap: 10px;



    color:

        rgba(255,255,255,.48);



    font-size:

        .56rem;



    font-weight:

        800;



    letter-spacing:

        .16em;

}





.scroll-indicator-line {

    width: 30px;



    height: 1px;



    background:

        rgba(255,255,255,.36);

}





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

   FALLBACK BACKGROUND

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



.landing-fallback-bg {

    position: absolute;



    inset: 0;



    overflow: hidden;



    background:

        linear-gradient(

            135deg,

            #272a23 0%,

            #68774b 49%,

            #b8bea1 100%

        );

}





.fallback-shape {

    position: absolute;



    border-radius: 50%;



    filter:

        blur(1px);

}





.fallback-shape-one {

    width: 570px;

    height: 570px;



    top: -260px;

    right: -100px;



    background:

        rgba(255,255,255,.12);

}





.fallback-shape-two {

    width: 350px;

    height: 350px;



    left: 32%;

    bottom: -190px;



    background:

        rgba(0,0,0,.11);

}





.fallback-shape-three {

    width: 180px;

    height: 180px;



    top: 32%;

    left: 14%;



    background:

        rgba(255,255,255,.08);

}





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

   TABLET

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



@media (max-width: 1100px) {



    .landing-content {

        padding:

            30px

            60px;

    }





    .landing-content-inner {

        width:

            min(100%, 560px);

    }





    .landing-left-overlay {

        width: 62%;

    }





    .landing-slider-ui {

        right: 25px;

        bottom: 25px;

    }





    .landing-scroll-indicator {

        left: 25px;

        bottom: 25px;

    }





    .landing-slide-dots {

        bottom: 28px;

    }



}





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

   MOBILE

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



@media (max-width: 768px) {



    .naiba-landing {

        min-height: 650px;

    }





    .landing-bg-image {

        object-position: 58% center;

    }





    .landing-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(6,8,8,.56) 0%,

                rgba(6,8,8,.72) 48%,

                rgba(6,8,8,.84) 100%

            );

    }





    .landing-left-overlay {

        width: 100%;



        background:

            linear-gradient(

                180deg,

                rgba(6,7,7,.18) 0%,

                rgba(6,7,7,.52) 55%,

                rgba(6,7,7,.72) 100%

            );

    }





    .landing-content {

        min-height:

            100vh;



        height:

            100%;



        padding:

            30px

            22px

            105px;



        align-items:

            center;



        justify-content:

            center;

    }





    .landing-content-inner {

        width:

            100%;



        max-width:

            560px;



        align-items:

            center;



        text-align:

            center;

    }





    .landing-logo-wrap {

        margin-bottom:

            23px;

    }





    .landing-logo {

        width:

            165px;

    }





    .landing-welcome {

        display:

            flex;



        flex-direction:

            column;



        align-items:

            center;

    }





    .landing-welcome-line {

        justify-content:

            center;

    }





    .landing-welcome h1 {

        max-width:

            440px;



        font-size:

            clamp(1.8rem, 8.8vw, 2.85rem);



        line-height:

            1.1;

    }





    .landing-welcome p {

        font-size:

            .82rem;

    }





    .landing-languages {

        justify-content:

            center;



        margin-top:

            23px;



        gap:

            8px;

    }





    .landing-language-btn {

        min-width:

            135px;



        min-height:

            40px;



        padding:

            0 9px

            0 15px;

    }





    .language-btn-name {

        font-size:

            .62rem;

    }





    .landing-bottom-info {

        margin-top:

            33px;



        justify-content:

            center;



        flex-direction:

            column;



        gap:

            10px;

    }





    .landing-copyright {

        display:

            none;

    }





    .landing-top-brand {

        top:

            20px;



        right:

            20px;



        font-size:

            .50rem;

    }





    .landing-top-brand-line {

        width:

            18px;

    }





    .landing-slider-ui {

        left:

            20px;



        right:

            20px;



        bottom:

            23px;



        justify-content:

            space-between;



        gap:

            10px;

    }





    .landing-slider-counter {

        font-size:

            .59rem;

    }





    .slider-counter-line {

        width:

            40px;

    }





    .landing-slider-button {

        width:

            37px;



        height:

            37px;

    }





    .landing-slide-dots {

        bottom:

            40px;

    }





    .landing-scroll-indicator {

        display:

            none;

    }





    .landing-social {

        justify-content:

            center;

    }



}





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

   SMALL MOBILE

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



@media (max-width: 480px) {



    .naiba-landing {

        min-height:

            600px;

    }





    .landing-content {

        padding:

            28px

            18px

            105px;

    }





    .landing-logo {

        width:

            145px;

    }





    .landing-welcome h1 {

        font-size:

            1.72rem;

    }





    .landing-welcome-line small {

        font-size:

            .53rem;



        letter-spacing:

            .14em;

    }





    .landing-welcome-line span {

        width:

            20px;

    }





    .landing-welcome p {

        font-size:

            .76rem;

    }





    .landing-language-btn {

        min-width:

            124px;

    }





    .language-btn-arrow {

        width:

            24px;



        height:

            24px;

    }





    .landing-slider-ui {

        bottom:

            20px;

    }





    .landing-slider-controls {

        gap:

            5px;

    }





    .landing-slider-button {

        width:

            34px;



        height:

            34px;

    }





    .landing-slide-dots {

        display:

            none;

    }



}





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

   REDUCED MOTION

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



@media (prefers-reduced-motion: reduce) {



    .landing-bg-slide,

    .landing-bg-image,

    .landing-language-btn,

    .landing-language-btn:hover .language-btn-arrow,

    .landing-slider-button,

    .landing-social a {

        transition:

            none !important;

    }





    .landing-bg-slide.is-active .landing-bg-image {

        transform:

            scale(1.04);

    }



}



/* ============================================================
   NAIBA HOUSEWARE
   COMPANY PROFILE HOME
   ============================================================ */

.naiba-home {
    --home-red: #e31b23;
    --home-red-dark: #bd1219;
    --home-black: #121413;
    --home-dark: #1b1d1a;
    --home-cream: #f6f4ee;
    --home-paper: #fbfaf7;
    --home-grey: #72766d;
    --home-border: rgba(18, 20, 19, .09);

    background: var(--home-paper);
    color: var(--home-black);
}


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

.naiba-container {
    width: min(100% - 48px, 1360px);
    margin: 0 auto;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.naiba-topbar {
    height: 39px;
    background: #fff;
    border-bottom: 1px solid #eeeeee;
    color: #f37b32;
    font-size: 11px;
}

.naiba-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.naiba-topbar-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.topbar-language {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f27b34;
    font-size: 11px;
    font-weight: 500;
}

.topbar-language:hover {
    color: #ed6020;
}

.topbar-language .bi-globe-americas {
    font-size: 12px;
}

.topbar-language .bi-chevron-down {
    margin-left: 5px;
    font-size: 8px;
}

.topbar-divider {
    width: 1px;
    height: 17px;
    background: #e6e6e6;
}

.topbar-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    color: #fff !important;
    background: #1eaa43;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.topbar-whatsapp:hover {
    background: #168735;
}

.topbar-whatsapp i {
    font-size: 10px;
}


/* SOCIAL MEDIA */

.naiba-topbar-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.naiba-topbar-social a {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f47a2f;
    font-size: 13px;
    transition: color .2s ease, transform .2s ease;
}

.naiba-topbar-social a:hover {
    color: #df4e16;
    transform: translateY(-1px);
}


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

.naiba-main-header {
    position: relative;
    z-index: 50;

    background-color: #ff9f86;

    background-image:
        linear-gradient(
            135deg,
            transparent 0 45%,
            rgba(255, 255, 255, .18) 45% 53%,
            transparent 53% 100%
        ),
        linear-gradient(
            45deg,
            transparent 0 42%,
            rgba(230, 74, 81, .28) 42% 51%,
            transparent 51% 100%
        );

    background-size:
        170px 125px,
        170px 125px;

    border-bottom: 3px solid #f0141c;
}

.naiba-main-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, 0)
        );
}

.naiba-header-inner {
    position: relative;
    z-index: 2;

    min-height: 148px;

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

    gap: 28px;
}


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

.naiba-main-logo {
    flex: 0 0 auto;

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

.naiba-main-logo img {
    width: 250px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 4px rgba(0, 0, 0, .10)
        );
}


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

.naiba-main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.naiba-main-nav a {
    height: 44px;

    padding: 0 20px;

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

    border-radius: 7px;

    background: #fff;
    color: #f36d29;

    font-size: 14px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, .04);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.naiba-main-nav a:hover {
    color: #e84417;
    background: #fffdfc;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .08);
}


/* HOME BUTTON */

.naiba-main-nav a.main-nav-home {
    width: 52px;
    height: 44px;
    padding: 0;
}

.naiba-main-nav a.main-nav-home i {
    font-size: 15px;
}

.naiba-main-nav a.main-nav-home.active {
    color: #f36d29;
    background: #fff;
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.naiba-mobile-menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 6px;

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

    background: #fff;
    color: #e95a23;

    font-size: 23px;

    cursor: pointer;
}


/* ============================================================
   MOBILE SIDE DRAWER
   ============================================================ */

.naiba-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: min(380px, 86vw);

    padding: 0;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    box-shadow: -18px 0 50px rgba(0, 0, 0, .18);

    transform: translateX(105%);

    visibility: hidden;
    pointer-events: none;

    transition:
        transform .28s ease,
        visibility .28s ease;

    z-index: 1001;

    overflow-y: auto;
}

.naiba-mobile-menu.is-open {
    transform: translateX(0);

    visibility: visible;
    pointer-events: auto;
}

.naiba-mobile-menu-head {
    min-height: 78px;

    padding: 0 20px;

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

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

    border-bottom: 3px solid #f0141c;
}

.naiba-mobile-menu-title {
    display: flex;
    flex-direction: column;
    gap: 3px;

    color: #ffffff;
}

.naiba-mobile-menu-title strong {
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
}

.naiba-mobile-menu-title span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    opacity: .82;
}

.naiba-mobile-menu-close {
    width: 38px;
    height: 38px;
    padding: 0;

    display: grid;
    place-items: center;

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

    background: rgba(255,255,255,.13);
    color: #ffffff;

    cursor: pointer;
}

.naiba-mobile-menu-close i {
    font-size: 17px;
}

.naiba-mobile-menu-body {
    display: flex;
    flex-direction: column;

    padding: 14px;
}

.naiba-mobile-menu-label {
    margin: 4px 7px 9px;

    color: #9a9d94;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.naiba-mobile-menu a {
    min-height: 54px;

    padding: 0 14px;

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

    border-bottom: 1px solid rgba(18,20,19,.07);

    color: #44473f;

    font-size: 13px;
    font-weight: 800;
}

.naiba-mobile-menu a:last-child {
    border-bottom: 0;
}

.naiba-mobile-menu a:hover {
    color: #e31b23;
    background: #fff7f5;
}

.naiba-mobile-menu a i {
    color: #e31b23;
    font-size: 14px;
}

.naiba-mobile-menu-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1000;

    background: rgba(8, 10, 9, .46);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.naiba-mobile-menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.mobile-menu-open {
    overflow: hidden;
}


/* ============================================================
   RED CATEGORY BAR
   ============================================================ */

.naiba-category-bar {
    position: relative;
    z-index: 45;

    min-height: 45px;

    background:
        linear-gradient(
            180deg,
            #f40d12 0%,
            #e60008 100%
        );

    border-bottom:
        2px solid #c80006;

    color: #fff;
}

.naiba-category-inner {
    min-height: 45px;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr)
        295px;

    align-items: center;

    gap: 20px;
}


/* CATEGORY */

.category-main-link {
    min-height: 45px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    white-space: nowrap;
}

.category-main-link:hover {
    color: #fff;
    opacity: .85;
}

.category-main-link i {
    font-size: 13px;
}


/* CATEGORY LINKS */

.category-links {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 43px;

    overflow: hidden;
}

.category-links a {
    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;

    white-space: nowrap;
}

.category-links a:hover {
    color: #fff;

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* SEARCH */

.category-search {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;
}

.category-search input {
    width: 260px;

    height: 31px;

    padding:
        0 11px;

    border: 0;

    outline: 0;

    border-radius:
        3px 0 0 3px;

    background: #ffffff;

    color: #555;

    font-family: inherit;

    font-size: 12px;

    font-style: italic;
}

.category-search input::placeholder {
    color: #a8a8a8;
}

.category-search button {
    width: 36px;

    height: 31px;

    padding: 0;

    border: 0;

    border-radius:
        0 3px 3px 0;

    background: #c80006;

    color: #ffffff;

    cursor: pointer;
}

.category-search button i {
    font-size: 14px;
}

.category-search button:hover {
    background: #a90005;
}



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

@media (max-width: 1200px) {

    .naiba-main-logo img {
        width: 215px;
    }

    .naiba-main-nav {
        gap: 10px;
    }

    .naiba-main-nav a {
        height: 42px;
        padding: 0 15px;
        font-size: 13px;
    }

    .naiba-main-nav a.main-nav-home {
        width: 48px;
        height: 42px;
    }

    .naiba-category-inner {
        grid-template-columns:
            185px
            minmax(0, 1fr)
            245px;
    }

    .category-links {
        gap: 22px;
    }

    .category-search input {
        width: 215px;
    }
}


@media (max-width: 920px) {

    .naiba-header-inner {
        min-height: 115px;
    }

    .naiba-main-logo img {
        width: 190px;
    }

    .naiba-main-nav {
        display: none;
    }

    .naiba-mobile-menu-btn {
        display: inline-flex;
    }

    .naiba-category-inner {
        grid-template-columns:
            1fr
            1fr;

        padding:
            5px 0;
    }

    .category-links {
        display: none;
    }

    .category-search {
        justify-content: flex-end;
    }
}


@media (max-width: 920px) {

    .naiba-mobile-menu-backdrop {
        display: block;
    }

}

@media (min-width: 921px) {

    .naiba-mobile-menu,
    .naiba-mobile-menu-backdrop {
        display: none;
    }

}

@media (max-width: 600px) {

    .naiba-container {
        width:
            min(100% - 28px, 1360px);
    }

    .naiba-topbar {
        height: 34px;
    }

    .naiba-topbar-social {
        gap: 7px;
    }

    .naiba-topbar-social a {
        width: 15px;
        height: 15px;
        font-size: 11px;
    }

    .topbar-language {
        font-size: 9px;
    }

    .topbar-whatsapp {
        font-size: 8px;
    }

    .naiba-header-inner {
        min-height: 92px;
    }

    .naiba-main-logo img {
        width: 155px;
    }

    .naiba-category-inner {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 10px;
    }

    .category-main-link {
        width: 38px;
        justify-content: center;
    }

    .category-main-link span {
        display: none;
    }

    .category-search {
        min-width: 0;
    }

    .category-search input {
        width: 100%;
        min-width: 0;
    }
}


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

   HERO

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



.naiba-hero {

    position: relative;

}



.naiba-hero-slider {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    background: #dcd9d0;

}



.naiba-hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    transition:

        opacity .8s ease,

        visibility .8s ease;

}



.naiba-hero-slide.is-active {

    position: relative;

    opacity: 1;

    visibility: visible;

    z-index: 2;

}



.hero-slide-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.hero-slide-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    transform: scale(1);

    transition: transform 6s ease;

}



.naiba-hero-slide.is-active .hero-slide-image img {

    transform: scale(1.04);

}



.hero-slide-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            90deg,

            rgba(10,12,11,.77) 0%,

            rgba(10,12,11,.46) 33%,

            rgba(10,12,11,.08) 70%,

            rgba(10,12,11,.10) 100%

        ),

        linear-gradient(

            180deg,

            rgba(0,0,0,.12),

            rgba(0,0,0,.30)

        );

}



.hero-slide-content {

    position: relative;

    z-index: 4;

    min-height: 635px;

    display: flex;

    align-items: center;

}



.hero-content-box {

    width: min(100%, 620px);

    color: #fff;

}



.hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

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

    font-size: .65rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .18em;

}



.hero-kicker::before {

    content: "";

    width: 35px;

    height: 2px;

    background: var(--home-red);

}



.hero-content-box h1 {

    margin: 0;

    max-width: 690px;

    font-size: clamp(2.8rem, 5.4vw, 5.8rem);

    line-height: .99;

    letter-spacing: -.055em;

    font-weight: 800;

    text-shadow: 0 6px 30px rgba(0,0,0,.20);

}



.hero-content-box p {

    max-width: 540px;

    margin: 20px 0 0;

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

    font-size: .92rem;

    line-height: 1.75;

}



.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: 28px;

    padding: 13px 15px 13px 19px;

    border-radius: 999px;

    color: #fff;

    background: var(--home-red);

    font-size: .68rem;

    font-weight: 800;

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

    transition: transform .2s ease, background .2s ease;

}



.hero-button:hover {

    color: #fff;

    background: var(--home-red-dark);

    transform: translateY(-2px);

}



.hero-button i {

    width: 26px;

    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

}



.hero-controls-wrap {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 28px;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

}



.hero-control {

    width: 42px;

    height: 42px;

    padding: 0;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: rgba(0,0,0,.18);

    color: #fff;

    backdrop-filter: blur(8px);

    cursor: pointer;

    transition: background .2s ease, transform .2s ease;

}



.hero-control:hover {

    color: #fff;

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

    transform: translateY(-2px);

}



.hero-pagination {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: .65rem;

    font-weight: 800;

}



.hero-pagination-line {

    position: relative;

    width: 70px;

    height: 1px;

    overflow: hidden;

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

}



.hero-pagination-line span {

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

    background: #fff;

}



/* IMAGE ONLY HERO */

.hero-slide-overlay,
.hero-slide-content,
.hero-controls-wrap {
    display: none !important;
}


.hero-empty-slide {

    width: 100%;

    height: 100%;

    position: relative;

    background:

        radial-gradient(

            circle at 78% 18%,

            rgba(255,255,255,.20),

            transparent 20%

        ),

        linear-gradient(

            135deg,

            #252923 0%,

            #5e6d42 52%,

            #bdc1ab 100%

        );

}



.hero-empty-pattern {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:

        linear-gradient(

            45deg,

            transparent 48%,

            #fff 49%,

            #fff 51%,

            transparent 52%

        );

    background-size: 90px 90px;

}





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

   SECTION HEADING

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



.section-heading {

    margin-bottom: 46px;

}



.section-heading.center {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

    max-width: 730px;

}



.section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--home-red);

    font-size: .62rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .18em;

}



.section-eyebrow::before {

    content: "";

    width: 26px;

    height: 2px;

    background: currentColor;

}



.section-heading h2,

.catalog-heading h2,

.market-content h2 {

    margin: 12px 0 0;

    font-size: clamp(2rem, 3.5vw, 3.8rem);

    line-height: 1.04;

    letter-spacing: -.05em;

    font-weight: 800;

}



.section-heading p {

    max-width: 670px;

    margin: 16px auto 0;

    color: var(--home-grey);

    font-size: .86rem;

    line-height: 1.75;

}

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

   INTRO / REASONS

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


.naiba-intro {

    padding: 106px 0 110px;

    background: #fff;

}



.naiba-reasons-grid {

    display: grid;

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

    gap: 15px;

}



.reason-card {

    position: relative;

    min-width: 0;

    min-height: 390px;

    padding: 0;

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

    border-radius: 18px;

    background: #fff;

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

    overflow: hidden;

}



.reason-card:hover {

    transform: translateY(-6px);

    border-color: rgba(227,27,35,.18);

    box-shadow:
        0 22px 50px rgba(18,20,19,.08);

}



.reason-card.featured {

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #faf6f5 100%
        );

}



.reason-image {

    width: 100%;

    height: 190px;

    overflow: hidden;

    background: #ece9e1;

}



.reason-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1);

    transition: transform .55s ease;

}



.reason-card:hover .reason-image img {

    transform: scale(1.045);

}



.reason-card-body {

    padding: 26px 28px 30px;

}



.reason-card h3 {

    margin: 0 0 10px;

    font-size: 1.02rem;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.02em;

}



.reason-card p {

    margin: 0;

    min-height: 62px;

    color: var(--home-grey);

    font-size: .76rem;

    line-height: 1.7;

}



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

   MOBILE HORIZONTAL SLIDER

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


@media (max-width: 920px) {

    .naiba-reasons-grid {

        display: flex;

        gap: 14px;

        overflow-x: auto;

        overflow-y: hidden;

        padding:
            2px
            2px
            12px;

        margin-right: -2px;

        scroll-snap-type: x mandatory;

        scroll-padding-left: 2px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }



    .naiba-reasons-grid::-webkit-scrollbar {

        display: none;

        width: 0;

        height: 0;

    }



    .reason-card,
    .reason-card.featured {

        flex: 0 0 min(78vw, 360px);

        min-height: 380px;

        scroll-snap-align: start;

    }

}



@media (max-width: 600px) {

    .reason-card,
    .reason-card.featured {

        flex-basis: 82vw;

        min-height: 365px;

    }



    .reason-image {

        height: 175px;

    }



    .reason-card-body {

        padding: 23px 22px 26px;

    }

}



@media (max-width: 430px) {

    .reason-card,
    .reason-card.featured {

        flex-basis: 86vw;

    }



    .reason-image {

        height: 165px;

    }

}


/* ============================================================
   LICENSE STRIP
   ============================================================ */

.naiba-license-strip {

    position: relative;

    padding: 98px 0 66px;

    overflow: hidden;

    background-image:
        url('/assets/images/license/license-background.jpg');

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    border-top: 1px solid rgba(18,20,19,.05);

    border-bottom: 1px solid rgba(18,20,19,.05);

}

.naiba-license-strip::before {

    content: "";

    position: absolute;

    inset: 0;

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

    pointer-events: none;

}

.naiba-license-strip .naiba-container {
    position: relative;
    z-index: 2;
}

.license-title {
    margin: 0 0 20px;

    display: flex;
    align-items: center;
}

.license-title span {

    color: #536244;

    font-size: 1.35rem;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: .02em;

    text-transform: uppercase;

}


/* ============================================================
   LICENSE HORIZONTAL SCROLLER
   ============================================================ */

.license-items {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

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

    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 6px 4px 16px;
    margin: 0;

    box-sizing: border-box;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;

    /* Sembunyikan scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Penting untuk drag */
    cursor: grab;
    user-select: none;
    touch-action: pan-x;
}

.license-items:active {
    cursor: grabbing;
}

.license-items::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
@media (max-width: 600px) {

    .license-title span {

        font-size: 1.1rem;

        line-height: 1.35;

    }

}

/* ============================================================
   LICENSE ITEM
   ============================================================ */

.license-item {
    flex: 0 0 210px;

    width: 210px;
    min-width: 210px;

    height: 128px;

    display: flex;

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

    padding: 10px 16px;

    box-sizing: border-box;

    background: transparent;
    border: 0;
    border-radius: 0;

    scroll-snap-align: start;
}

.license-item img {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 104px;

    display: block;

    object-fit: contain;
    object-position: center;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;

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

.license-item:hover img {
    transform: scale(1.04);
}


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

@media (max-width: 920px) {

    .license-items {
        gap: 16px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 4px 4px 14px;

        scroll-snap-type: x proximity;

        scrollbar-width: none;
        -ms-overflow-style: none;

        touch-action: pan-x;
    }

    .license-items::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .license-item {
        flex: 0 0 200px;

        width: 200px;
        min-width: 200px;

        height: 118px;

        padding: 8px 14px;
    }

    .license-item img {
        max-height: 94px;
    }
}


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

@media (max-width: 600px) {

    .naiba-license-strip {
        padding: 58px 0 54px;
    }

    .license-title {
        margin-bottom: 16px;
    }

    .license-title span {
        font-size: .64rem;
        line-height: 1.45;
    }

    .license-items {
        gap: 12px;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

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

        overflow-x: auto;
        overflow-y: hidden;

        padding: 4px 4px 12px;

        scrollbar-width: none;
        -ms-overflow-style: none;

        touch-action: pan-x;

        scroll-snap-type: x proximity;
    }

    .license-items::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .license-item {
        flex: 0 0 178px;

        width: 178px;
        min-width: 178px;

        height: 108px;

        padding: 6px 10px;
    }

    .license-item img {
        max-height: 88px;
    }
}


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

@media (max-width: 430px) {

    .license-items {
        gap: 10px;
    }

    .license-item {
        flex: 0 0 158px;

        width: 158px;
        min-width: 158px;

        height: 98px;

        padding: 6px 9px;
    }

    .license-item img {
        max-height: 80px;
    }
}
/* ============================================================

   TESTIMONIALS

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


.naiba-testimonials {

    position: relative;

    padding: 108px 0 96px;

    background: var(--home-paper);

    overflow: hidden;

}



/* ============================================================
   HEADING + CONTROLS
   ============================================================ */


.testimonial-heading-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;

}


.testimonial-heading-row .section-heading {

    margin-bottom: 0;

}


.testimonial-controls {

    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

}


.testimonial-arrow {

    width: 48px;

    height: 48px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 1px solid rgba(18,20,19,.12);

    border-radius: 50%;

    background: #fff;

    color: var(--home-red);

    cursor: pointer;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease,
        opacity .22s ease;

}


.testimonial-arrow:hover:not(:disabled) {

    color: #fff;

    background: var(--home-red);

    border-color: var(--home-red);

    transform: translateY(-2px);

}


.testimonial-arrow i {

    font-size: 17px;

}


.testimonial-arrow:not(:disabled) {

    color: var(--home-red);

    border-color: rgba(227,27,35,.20);

}


.testimonial-arrow:disabled,
.testimonial-arrow.is-disabled {

    color: #c3c5c0;

    background: #f5f5f2;

    border-color: rgba(18,20,19,.07);

    cursor: default;

    opacity: .9;

}



/* ============================================================
   CAROUSEL
   ============================================================ */


.testimonial-carousel {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    position: relative;

}


.testimonial-track {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: 15px;

    width: max-content;

    max-width: none;

    margin: 0;

    padding: 0;

    will-change: transform;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1);

}


/* ============================================================
   TESTIMONIAL CARD - FIX HEIGHT
   ============================================================ */

.testimonial-card {

    position:
        relative;

    flex:
        0 0
        calc(
            (min(100vw - 48px, 1360px) - 30px)
            / 3
        );

    width:
        calc(
            (min(100vw - 48px, 1360px) - 30px)
            / 3
        );

    min-width:
        0;

    height:
        auto;

    min-height:
        0;

    padding:
        30px
        31px
        29px;

    box-sizing:
        border-box;

    border-radius:
        18px;

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

    background:
        #fff;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        visible;

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

}


.testimonial-card.dark {

    color:
        #fff;

    background:
        var(--home-dark);

    border-color:
        var(--home-dark);

}


.testimonial-card p {

    margin:
        18px
        0
        28px;

    color:
        var(--home-grey);

    font-size:
        .84rem;

    line-height:
        1.85;

    font-style:
        italic;

    overflow:
        visible;

}


.testimonial-card.dark p {

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

}


.testimonial-author {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        auto;

    flex-shrink:
        0;

}


.testimonial-avatar {

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    overflow:
        hidden;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--home-red);

}


.testimonial-avatar img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

}


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

@media (max-width: 680px) {

    .naiba-testimonials {

        padding:
            78px
            0
            72px;

        overflow:
            hidden;

    }


    .testimonial-heading-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            22px;

        margin-bottom:
            28px;

    }


    .testimonial-heading-row .section-heading {

        width:
            100%;

    }


    .testimonial-controls {

        align-self:
            flex-end;

    }


    .testimonial-arrow {

        width:
            43px;

        height:
            43px;

        flex:
            0 0 43px;

    }


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

    .testimonial-carousel {

        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            scroll !important;

        overflow-y:
            hidden !important;

        margin:
            0;

        padding:
            2px
            2px
            10px;

        box-sizing:
            border-box;

        scroll-behavior:
            smooth;

        scroll-snap-type:
            x mandatory;

        scroll-padding-left:
            2px;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-x:
            contain;

        touch-action:
            pan-x;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;

    }


    .testimonial-carousel::-webkit-scrollbar {

        display:
            none;

        width:
            0;

        height:
            0;

    }


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

    .testimonial-track {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            flex-start !important;

        gap:
            12px;

        width:
            max-content !important;

        max-width:
            none !important;

        min-width:
            max-content !important;

        margin:
            0;

        padding:
            0;

        transform:
            none !important;

        transition:
            none !important;

        will-change:
            auto;

    }


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

    .testimonial-card {

        position:
            relative;

        flex:
            0 0
            calc(100vw - 36px) !important;

        width:
            calc(100vw - 36px) !important;

        min-width:
            calc(100vw - 36px) !important;

        max-width:
            calc(100vw - 36px) !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        padding:
            27px
            24px
            28px;

        margin:
            0;

        box-sizing:
            border-box;

        border-radius:
            18px;

        overflow:
            visible !important;

        display:
            flex;

        flex-direction:
            column;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;

        transform:
            none;

    }


    /* ========================================================
       QUOTE
       ======================================================== */

    .testimonial-quote {

        color:
            var(--home-red);

        font-size:
            1.8rem;

        line-height:
            1;

        margin:
            0;

    }


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

    .testimonial-card p {

        margin:
            17px
            0
            28px;

        font-size:
            .80rem;

        line-height:
            1.82;

        overflow:
            visible;

        display:
            block;

    }


    /* ========================================================
       AUTHOR
       ======================================================== */

    .testimonial-author {

        margin-top:
            0;

        gap:
            13px;

        flex-shrink:
            0;

    }


    .testimonial-avatar {

        width:
            58px;

        height:
            58px;

        flex:
            0 0 58px;

    }


    .testimonial-author strong {

        font-size:
            .86rem;

        line-height:
            1.25;

    }


    .testimonial-author span {

        margin-top:
            5px;

        font-size:
            .68rem;

        line-height:
            1.2;

    }

}


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

@media (max-width: 430px) {

    .testimonial-card {

        flex:
            0 0
            calc(100vw - 32px) !important;

        width:
            calc(100vw - 32px) !important;

        min-width:
            calc(100vw - 32px) !important;

        max-width:
            calc(100vw - 32px) !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        padding:
            25px
            21px
            28px;

    }


    .testimonial-card p {

        margin:
            17px
            0
            27px;

        font-size:
            .79rem;

        line-height:
            1.82;

    }


    .testimonial-avatar {

        width:
            56px;

        height:
            56px;

        flex:
            0 0 56px;

    }


    .testimonial-author strong {

        font-size:
            .84rem;

    }


    .testimonial-author span {

        font-size:
            .67rem;

    }

}

/* ============================================================
   QUOTE
   ============================================================ */

.testimonial-quote {

    color: var(--home-red);

    font-size: 2rem;

    line-height: 1;

    margin-bottom: 0;

}


.testimonial-card p {

    margin:
        18px
        0
        28px;

    color: var(--home-grey);

    font-size: .84rem;

    line-height: 1.85;

    font-style: italic;

    overflow: visible;

}


.testimonial-card.dark p {

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

}


.testimonial-author {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: auto;

}


.testimonial-avatar {

    width: 58px;

    height: 58px;

    flex:
        0 0 58px;

    overflow: hidden;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background: var(--home-red);

}


.testimonial-avatar img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


.testimonial-author strong,
.testimonial-author span {

    display: block;

}


.testimonial-author strong {

    font-size: .88rem;

    line-height: 1.25;

    font-weight: 800;

}


.testimonial-author span {

    margin-top: 6px;

    color: #969a91;

    font-size: .70rem;

    line-height: 1.2;

}


.testimonial-card.dark .testimonial-author span {

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

}



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


@media (max-width: 1100px) {

    .testimonial-card {

        flex:
            0 0 calc(
                (min(100vw - 48px, 1360px) - 15px) / 2
            );

        width:
            calc(
                (min(100vw - 48px, 1360px) - 15px) / 2
            );

        height: 275px;

    }

}



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


@media (max-width: 680px) {

    .naiba-testimonials {

        padding: 78px 0 72px;

        overflow: hidden;

    }


    .testimonial-heading-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 22px;

        margin-bottom: 28px;

    }


    .testimonial-heading-row .section-heading {

        width: 100%;

    }


    .testimonial-controls {

        align-self: flex-end;

    }


    .testimonial-arrow {

        width: 43px;

        height: 43px;

        flex:
            0 0 43px;

    }


    /* ========================================================
       MOBILE CAROUSEL
       NATIVE HORIZONTAL SWIPE
       ======================================================== */


    .testimonial-carousel {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: scroll !important;

        overflow-y: hidden !important;

        margin: 0;

        padding:
            2px
            2px
            10px;

        box-sizing: border-box;

        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;

        scroll-padding-left: 2px;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        touch-action: pan-x;

        scrollbar-width: none;

        -ms-overflow-style: none;

    }


    .testimonial-carousel::-webkit-scrollbar {

        display: none;

        width: 0;

        height: 0;

    }


    /* ========================================================
       MOBILE TRACK
       JANGAN PAKAI TRANSFORM
       ======================================================== */


    .testimonial-track {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: stretch;

        gap: 12px;

        width: max-content !important;

        max-width: none !important;

        min-width: max-content !important;

        margin: 0;

        padding: 0;

        transform: none !important;

        transition: none !important;

        will-change: auto;

    }


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


    .testimonial-card {

        position: relative;

        flex:
            0 0 calc(100vw - 36px) !important;

        width:
            calc(100vw - 36px) !important;

        min-width:
            calc(100vw - 36px) !important;

        max-width:
            calc(100vw - 36px) !important;

        height: 275px;

        min-height: 0;

        padding:
            27px
            24px
            25px;

        margin: 0;

        box-sizing: border-box;

        scroll-snap-align: start;

        scroll-snap-stop: always;

        transform: none;

    }


    .testimonial-card:hover {

        transform: none;

    }


    /* ========================================================
       QUOTE
       ======================================================== */


    .testimonial-quote {

        font-size: 1.8rem;

        line-height: 1;

    }


    .testimonial-card p {

        margin:
            17px
            0
            22px;

        font-size: .80rem;

        line-height: 1.75;

    }


    /* ========================================================
       AUTHOR
       ======================================================== */


    .testimonial-avatar {

        width: 58px;

        height: 58px;

        flex:
            0 0 58px;

    }


    .testimonial-author strong {

        font-size: .86rem;

    }


    .testimonial-author span {

        margin-top: 5px;

        font-size: .68rem;

    }

}



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


@media (max-width: 430px) {

    .testimonial-card {

        flex:
            0 0 calc(100vw - 32px) !important;

        width:
            calc(100vw - 32px) !important;

        min-width:
            calc(100vw - 32px) !important;

        max-width:
            calc(100vw - 32px) !important;

        height: 270px;

        padding:
            25px
            21px
            23px;

    }


    .testimonial-avatar {

        width: 56px;

        height: 56px;

        flex:
            0 0 56px;

    }


    .testimonial-author strong {

        font-size: .84rem;

    }


    .testimonial-author span {

        font-size: .67rem;

    }

}

/* ============================================================
   CATALOG
   ============================================================ */

.naiba-catalog {

    padding:
        0
        0
        92px;

    background:
        var(--home-paper);

}


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

.catalog-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        28px;

}


.catalog-heading h2 {

    margin:
        0;

    font-size:
        clamp(
            2rem,
            3.2vw,
            3rem
        );

}


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

.catalog-slider-wrap {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

}


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

.catalog-slider {

    width:
        100%;

    max-width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    display:
        block;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;

    -webkit-overflow-scrolling:
        touch;

    scroll-behavior:
        smooth;

    overscroll-behavior-x:
        contain;

    touch-action:
        pan-x;

    cursor:
        grab;

    user-select:
        none;

}


.catalog-slider::-webkit-scrollbar {

    display:
        none;

    width:
        0;

    height:
        0;

}


.catalog-slider.is-dragging {

    cursor:
        grabbing;

    scroll-behavior:
        auto;

}


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

.catalog-track {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch;

    gap:
        14px;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    margin:
        0;

    padding:
        2px
        2px
        8px;

}


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

.catalog-card {

    position:
        relative;

    flex:
        0 0 200px !important;

    width:
        200px !important;

    min-width:
        200px !important;

    max-width:
        200px !important;

    height:
        350px !important;

    min-height:
        350px !important;

    max-height:
        350px !important;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        rgba(
            18,
            20,
            19,
            .08
        );

    border-radius:
        13px;

    background:
        #fff;

    color:
        var(--home-black);

    text-decoration:
        none;

    box-sizing:
        border-box;

    flex-shrink:
        0;

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

}


.catalog-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 32px
        rgba(
            18,
            20,
            19,
            .09
        );

}


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

.catalog-image {

    width:
        200px !important;

    height:
        311px !important;

    min-height:
        311px !important;

    max-height:
        311px !important;

    flex:
        0 0 311px !important;

    overflow:
        hidden;

    background:
        #ebe9e2;

}


.catalog-image img {

    width:
        100% !important;

    height:
        100% !important;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    transition:
        transform .45s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

}


.catalog-card:hover .catalog-image img {

    transform:
        scale(1.045);

}


/* ============================================================
   DOWNLOAD
   ============================================================ */

.catalog-card-info {

    width:
        200px !important;

    height:
        39px !important;

    min-height:
        39px !important;

    max-height:
        39px !important;

    flex:
        0 0 39px !important;

    padding:
        0
        10px;

    margin:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    background:
        #fff;

}


.catalog-card-info a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin:
        0;

    padding:
        0;

    color:
        var(--home-red);

    font-size:
        .70rem;

    line-height:
        1;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        opacity .2s ease;

}


.catalog-card-info a:hover {

    opacity:
        .65;

}


.catalog-card-info a i {

    font-size:
        .74rem;

    line-height:
        1;

}


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

.catalog-arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        20;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            18,
            20,
            19,
            .10
        );

    border-radius:
        50%;

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

    color:
        var(--home-red);

    box-shadow:
        0 7px 22px
        rgba(
            18,
            20,
            19,
            .13
        );

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        opacity .2s ease;

}


.catalog-arrow:hover:not(:disabled) {

    color:
        #fff;

    background:
        var(--home-red);

    border-color:
        var(--home-red);

    transform:
        translateY(-50%)
        scale(1.05);

}


.catalog-arrow i {

    font-size:
        15px;

    line-height:
        1;

}


.catalog-arrow-prev {

    left:
        -20px;

}


.catalog-arrow-next {

    right:
        -20px;

}


.catalog-arrow:disabled {

    color:
        #b8bbb6;

    background:
        #f5f5f2;

    border-color:
        rgba(
            18,
            20,
            19,
            .06
        );

    opacity:
        .65;

    cursor:
        default;

}


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

@media (max-width: 900px) {

    .catalog-track {

        gap:
            12px;

    }


    .catalog-card {

        flex:
            0 0 180px !important;

        width:
            180px !important;

        min-width:
            180px !important;

        max-width:
            180px !important;

        height:
            310px !important;

        min-height:
            310px !important;

        max-height:
            310px !important;

    }


    .catalog-image {

        width:
            180px !important;

        height:
            272px !important;

        min-height:
            272px !important;

        max-height:
            272px !important;

        flex:
            0 0 272px !important;

    }


    .catalog-card-info {

        width:
            180px !important;

        height:
            38px !important;

        min-height:
            38px !important;

        max-height:
            38px !important;

        flex:
            0 0 38px !important;

    }


    .catalog-card-info a {

        font-size:
            .68rem;

    }


    .catalog-arrow {

        width:
            38px;

        height:
            38px;

    }


    .catalog-arrow-prev {

        left:
            -12px;

    }


    .catalog-arrow-next {

        right:
            -12px;

    }

}


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

@media (max-width: 600px) {

    .naiba-catalog {

        padding:
            0
            0
            72px;

    }


    .catalog-heading {

        margin-bottom:
            20px;

    }


    .catalog-heading h2 {

        font-size:
            clamp(
                1.9rem,
                8vw,
                2.4rem
            );

    }


    .catalog-slider-wrap {

        width:
            100%;

        max-width:
            100%;

    }


    .catalog-slider {

        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        padding:
            0;

        margin:
            0;

        touch-action:
            pan-x;

    }


    .catalog-track {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            stretch !important;

        gap:
            10px;

        width:
            max-content !important;

        min-width:
            max-content !important;

        max-width:
            none !important;

        padding:
            2px
            2px
            7px;

    }


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

    .catalog-card {

        flex:
            0 0 155px !important;

        width:
            155px !important;

        min-width:
            155px !important;

        max-width:
            155px !important;

        height:
            270px !important;

        min-height:
            270px !important;

        max-height:
            270px !important;

        border-radius:
            10px;

    }


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

    .catalog-image {

        width:
            155px !important;

        height:
            232px !important;

        min-height:
            232px !important;

        max-height:
            232px !important;

        flex:
            0 0 232px !important;

    }


    .catalog-image img {

        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            cover !important;

    }


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

    .catalog-card-info {

        width:
            155px !important;

        height:
            38px !important;

        min-height:
            38px !important;

        max-height:
            38px !important;

        flex:
            0 0 38px !important;

        padding:
            0
            5px;

        margin:
            0;

    }


    .catalog-card-info a {

        font-size:
            .65rem;

        gap:
            5px;

    }


    .catalog-card-info a i {

        font-size:
            .70rem;

    }


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

    .catalog-arrow {

        width:
            34px;

        height:
            34px;

    }


    .catalog-arrow-prev {

        left:
            -7px;

    }


    .catalog-arrow-next {

        right:
            -7px;

    }


    .catalog-arrow i {

        font-size:
            13px;

    }

}


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

@media (max-width: 380px) {

    .catalog-track {

        gap:
            8px;

    }


    .catalog-card {

        flex:
            0 0 145px !important;

        width:
            145px !important;

        min-width:
            145px !important;

        max-width:
            145px !important;

        height:
            250px !important;

        min-height:
            250px !important;

        max-height:
            250px !important;

    }


    .catalog-image {

        width:
            145px !important;

        height:
            213px !important;

        min-height:
            213px !important;

        max-height:
            213px !important;

        flex:
            0 0 213px !important;

    }


    .catalog-card-info {

        width:
            145px !important;

        height:
            37px !important;

        min-height:
            37px !important;

        max-height:
            37px !important;

        flex:
            0 0 37px !important;

    }


    .catalog-card-info a {

        font-size:
            .61rem;

    }


    .catalog-arrow {

        width:
            32px;

        height:
            32px;

    }


    .catalog-arrow-prev {

        left:
            -6px;

    }


    .catalog-arrow-next {

        right:
            -6px;

    }

}

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

   MARKET

   OPENSTREETMAP / LEAFLET

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


.naiba-market {

    padding: 108px 0;

    background: var(--home-dark);

    color: #fff;

}



/* ============================================================
   MARKET GRID
   ============================================================ */


.market-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .83fr)
        minmax(0, 1.17fr);

    gap: 70px;

    align-items: center;

}



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


.market-content {

    min-width: 0;

}


.market-content h2 {

    max-width: 620px;

}


.market-content > p {

    max-width: 530px;

    margin: 20px 0 0;

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

    font-size: .86rem;

    line-height: 1.8;

}



/* ============================================================
   MARKET STATS
   ============================================================ */


.market-stats {

    display: flex;

    align-items: center;

    gap: 39px;

    margin-top: 39px;

}


.market-stats > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.market-stats strong {

    font-size: 1.7rem;

    line-height: 1;

}


.market-stats span {

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

    font-size: .56rem;

    text-transform: uppercase;

    letter-spacing: .10em;

}



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


.market-map-wrapper {

    position: relative;

    width: 100%;

    min-width: 0;

}



/* ============================================================
   LEAFLET MAP
   ============================================================ */


.market-map {

    position: relative;

    width: 100%;

    height: 450px;

    min-height: 450px;

    overflow: hidden;

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

    border-radius: 23px;

    background: #dfe4dd;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.12);

}


#naiba-market-map {

    width: 100%;

    height: 100%;

}



/* ============================================================
   LEAFLET UI
   ============================================================ */


#naiba-market-map .leaflet-control-zoom {

    margin-top: 14px;

    margin-left: 14px;

    border: 0;

    box-shadow:
        0 5px 18px rgba(0,0,0,.16);

}


#naiba-market-map .leaflet-control-zoom a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #444;

    background: #fff;

    border: 0;

    font-size: 18px;

    font-weight: 700;

}


#naiba-market-map .leaflet-control-zoom a:hover {

    color: var(--home-red);

    background: #fff;

}



#naiba-market-map .leaflet-control-attribution {

    font-size: 9px;

}



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


.naiba-map-fullscreen {

    width: 34px;

    height: 34px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 3px;

    background: #fff;

    color: #444;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,.16);

}


.naiba-map-fullscreen:hover {

    color: var(--home-red);

    background: #fff;

}


.naiba-map-fullscreen i {

    font-size: 15px;

}



/* ============================================================
   CUSTOM NAIBA PIN
   ============================================================ */


.naiba-map-pin-wrapper {

    background: transparent !important;

    border: 0 !important;

}


.naiba-map-pin {

    position: relative;

    width: 26px;

    height: 34px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


.naiba-map-pin::before {

    content: "";

    width: 24px;

    height: 24px;

    position: absolute;

    top: 0;

    left: 1px;

    border-radius: 50% 50% 50% 0;

    background: var(--home-red);

    border:
        3px solid #fff;

    transform:
        rotate(-45deg);

    box-shadow:
        0 3px 9px rgba(0,0,0,.25);

}


.naiba-map-pin span {

    position: absolute;

    top: 7px;

    left: 9px;

    width: 8px;

    height: 8px;

    z-index: 2;

    border-radius: 50%;

    background: #fff;

}



/* ============================================================
   POPUP
   ============================================================ */


.naiba-map-popup {

    min-width: 130px;

    padding: 2px 3px;

}


.naiba-map-popup strong {

    display: block;

    color: #222;

    font-size: 13px;

    line-height: 1.3;

}


.naiba-map-popup span {

    display: block;

    margin-top: 4px;

    color: #888;

    font-size: 10px;

}



/* ============================================================
   FULLSCREEN MAP
   ============================================================ */


#naiba-market-map:fullscreen {

    width: 100vw;

    height: 100vh;

    border-radius: 0;

}


#naiba-market-map:-webkit-full-screen {

    width: 100vw;

    height: 100vh;

    border-radius: 0;

}



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


@media (max-width: 1100px) {

    .market-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .market-content h2 {

        max-width: 760px;

    }


    .market-content > p {

        max-width: 650px;

    }


    .market-map {

        height: 430px;

        min-height: 430px;

    }

}



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


@media (max-width: 680px) {

    .naiba-market {

        padding: 78px 0;

    }


    .market-grid {

        display: flex;

        flex-direction: column;

        gap: 34px;

    }


    .market-content {

        width: 100%;

    }


    .market-content h2 {

        max-width: none;

    }


    .market-content > p {

        max-width: none;

    }


    .market-stats {

        gap: 22px;

        flex-wrap: wrap;

        margin-top: 30px;

    }


    .market-map-wrapper {

        width: 100%;

    }


    .market-map {

        width: 100%;

        height: 390px;

        min-height: 390px;

        border-radius: 18px;

    }


    #naiba-market-map {

        touch-action:
            pan-x pan-y;

    }

}



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


@media (max-width: 430px) {

    .market-map {

        height: 350px;

        min-height: 350px;

        border-radius: 16px;

    }


    .market-stats {

        gap: 18px;

    }


    .market-stats strong {

        font-size: 1.45rem;

    }

}
/* ============================================================

   CTA

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



.naiba-cta {

    padding: 0 0 110px;

    background: var(--home-dark);

}



.cta-inner {

    min-height: 300px;

    padding: 53px 58px;

    border-radius: 23px;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 35px;

    color: #fff;

    background:

        radial-gradient(

            circle at 90% 15%,

            rgba(227,27,35,.26),

            transparent 28%

        ),

        linear-gradient(

            135deg,

            #292d27,

            #1c1f1b

        );

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

}



.cta-inner h2 {

    max-width: 720px;

    margin: 13px 0 0;

    font-size: clamp(2rem,3.8vw,4rem);

    line-height: 1.04;

    letter-spacing: -.05em;

}



.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    flex: 0 0 auto;

    padding: 13px 15px 13px 19px;

    border-radius: 999px;

    color: var(--home-black);

    background: #fff;

    font-size: .66rem;

    font-weight: 800;

}



.cta-button:hover {

    color: var(--home-red);

}



.cta-button i {

    width: 26px;

    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: rgba(0,0,0,.06);

}





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

   FOOTER

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



.naiba-footer {

    background: #181a17;

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

}



.footer-main {

    padding: 74px 0 58px;

    display: grid;

    grid-template-columns: 1.5fr .8fr .8fr 1fr;

    gap: 50px;

}



.footer-brand img {
    width: 142px;
    height: auto;
    display: block;
    object-fit: contain;
}



.footer-brand p {

    max-width: 360px;

    margin: 20px 0 22px;

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

    font-size: .73rem;

    line-height: 1.8;

}



.footer-social {

    display: flex;

    gap: 7px;

}



.footer-social a {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

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

}



.footer-social a:hover {

    color: #fff;

    background: var(--home-red);

}



.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.footer-column h4 {

    margin: 0 0 19px;

    color: #fff;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

}



.footer-column a,

.footer-column p {

    margin: 0 0 10px;

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

    font-size: .69rem;

}



.footer-column a:hover {

    color: #fff;

}



.footer-contact a {

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

}



.footer-bottom {

    min-height: 66px;

    padding: 20px 0;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

    font-size: .59rem;

}



.footer-bottom > div {

    display: flex;

    gap: 18px;

}



.footer-bottom a:hover {

    color: #fff;

}





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

   RESPONSIVE

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



@media (max-width: 1180px) {



    .naiba-main-nav {

        gap: 19px;

    }



    .category-links {

        gap: 12px;

    }



    .naiba-reasons-grid {

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

    }



    .market-grid {

        gap: 40px;

    }



    .footer-main {

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

    }



    .footer-contact {

        grid-column: 2 / -1;

    }

}





@media (max-width: 900px) {



    .naiba-topbar-left {

        display: none;

    }



    .naiba-topbar-inner {

        justify-content: flex-end;

    }



    .naiba-header-inner {

        min-height: 74px;

    }



    .naiba-main-nav,

    .naiba-header-action {

        display: none;

    }



    .naiba-mobile-menu-btn {

        width: 40px;

        height: 40px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        display: grid;

        place-items: center;

        background: #f3f3ef;

        color: var(--home-black);

        font-size: 1.25rem;

    }



    .naiba-mobile-menu {

        padding: 8px 24px 18px;

        border-top: 1px solid rgba(18,20,19,.07);

        background: #fff;

    }



    .naiba-mobile-menu.is-open {

        display: flex;

        flex-direction: column;

        gap: 5px;

    }



    .naiba-mobile-menu a {

        padding: 11px 7px;

        border-bottom: 1px solid rgba(18,20,19,.06);

        color: #595d55;

        font-size: .75rem;

        font-weight: 700;

    }



    .naiba-category-inner {

        grid-template-columns: 1fr auto;

    }



    .category-links {

        display: none;

    }



    .category-search input {

        width: 155px;

    }



    .market-grid {

        grid-template-columns: 1fr;

    }



    .market-map {

        min-height: 380px;

    }



    .testimonial-grid {

        grid-template-columns: 1fr;

    }



    .catalog-grid {

        grid-template-columns: 1fr 1fr;

    }



    .catalog-card-large {

        grid-column: 1 / -1;

    }

}





@media (max-width: 680px) {



    .naiba-container {

        width: min(100% - 32px, 1360px);

    }



    .naiba-topbar-right {

        gap: 7px;

    }



    .naiba-main-logo img {

        width: 118px;

    }



    .category-label span {

        display: none;

    }



    .category-search input {

        width: 135px;

    }



    .naiba-hero-slider {

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

    }



    .hero-slide-image img {

        object-position: center center;

    }



    .naiba-intro,

    .naiba-testimonials,

    .naiba-market {

        padding: 78px 0;

    }



    .naiba-reasons-grid {

        grid-template-columns: 1fr;

    }



    .license-items {

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

    }



    .catalog-grid {

        grid-template-columns: 1fr;

    }



    .catalog-card-large {

        grid-column: auto;

    }



    .catalog-heading {

        align-items: flex-start;

        flex-direction: column;

    }



    .catalog-card,

    .catalog-card-large {

        min-height: 360px;

    }



    .market-stats {

        gap: 22px;

        flex-wrap: wrap;

    }



    .market-map {

        min-height: 310px;

    }



    .cta-inner {

        min-height: 330px;

        padding: 34px 28px;

        align-items: flex-start;

        flex-direction: column;

    }



    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 38px 25px;

    }



    .footer-brand {

        grid-column: 1 / -1;

    }



    .footer-contact {

        grid-column: auto;

    }



    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

    }

}





@media (max-width: 430px) {



    .category-search input {

        width: 110px;

    }



    .category-search button {

        width: 28px;

    }



    .license-items {

        grid-template-columns: 1fr 1fr;

    }



    .license-placeholder {

        min-height: 55px;

    }



    .footer-main {

        grid-template-columns: 1fr;

    }



    .footer-brand,

    .footer-contact {

        grid-column: auto;

    }

}
/* ============================================================
   MOBILE RIGHT DRAWER - FINAL OVERRIDES
   ============================================================ */

@media (max-width: 920px) {

    .naiba-mobile-menu {
        width: min(380px, 86vw);
        max-width: 380px;
        height: 100dvh;
        min-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .naiba-mobile-menu-backdrop {
        display: block;
    }

    .naiba-mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .naiba-mobile-menu-body {
        padding: 14px 12px 26px;
    }

    .naiba-mobile-menu a {
        min-height: 58px;
        padding: 0 16px;
        border-radius: 8px;
    }

    .naiba-mobile-menu a + a {
        margin-top: 3px;
    }

    .naiba-mobile-menu a span {
        font-size: 13px;
        line-height: 1.35;
    }

}

@media (min-width: 921px) {

    .naiba-mobile-menu,
    .naiba-mobile-menu-backdrop {
        display: none !important;
    }

}