/* =====================================================
   ABOUT HERO – SECTION WRAPPER CONTROL
===================================================== */

:root {
    /* PADDING BAWAH ABOUT HERO */
    --about-hero-padding-bottom-desktop: 0px;
    --about-hero-padding-bottom-tablet: 0px;
    --about-hero-padding-bottom-mobile: 0px;
}

/* SECTION UTAMA */
.about-hero {
    position: relative;
    width: 100%;

    /* 🔑 INI KUNCINYA */
    padding-bottom: var(--about-hero-padding-bottom-desktop);
}

/* ================= TABLET ================= */
@media (max-width: 991px) {
    .about-hero {
        padding-bottom: var(--about-hero-padding-bottom-tablet);
    }
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
    .about-hero {
        padding-bottom: var(--about-hero-padding-bottom-mobile);
    }
}

/* =====================================================
   ABOUT HERO BACKGROUND IMAGE
===================================================== */

.about-hero .carousel {
    position: relative;
    width: 100%;
    min-height: 100vh; /* 🔥 kasih tinggi */
    overflow: hidden;
}

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

    /* BACKGROUND IMAGE CONTROL */
    background-size: cover;       /* full layar */
    background-position: center;  /* tengah */
    background-repeat: no-repeat;

    z-index: 1;
}

.about-hero .room-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2;
}

.about-hero .room-hero-content {
    position: relative;
    z-index: 3;
}

/* =====================================================
   ABOUT HERO TEXT BOX (GREEN GLASS)
===================================================== */
/* =====================================================
   ABOUT HERO – DESKTOP POSITION CONTROL ONLY
===================================================== */

@media (min-width: 992px) {
    :root {
        /* POSISI BOX: flex-start | center | flex-end */
        --about-box-position-desktop: flex-start;

        /* OFFSET DARI TEPI LAYAR */
        --about-box-left-offset: 80px;
        --about-box-right-offset: 80px;
        --about-box-buttom-offset: 80px;

        /* UKURAN BOX */
        --about-box-width-desktop: 560px;
        --about-box-min-height-desktop: 360px;
    }
}
/* =====================================================
   ABOUT HERO – DESKTOP LAYOUT
===================================================== */

@media (min-width: 992px) {

    .about-hero .room-hero-content {
        display: flex;
        align-items: center;
        justify-content: var(--about-box-position-desktop);

        min-height: 100vh;

        padding-left: var(--about-box-left-offset);
        padding-right: var(--about-box-right-offset);
    }

    .about-hero .room-glass-box {
        width: var(--about-box-width-desktop);
        min-height: var(--about-box-min-height-desktop);
    }

}

/* =====================================================
   ABOUT HERO – DESKTOP OVERRIDE (JANGAN HAPUS CSS LAMA)
===================================================== */

@media (min-width: 992px) {

    .about-hero .room-hero-content {
        justify-content: flex-start; /* UBAH DI SINI */
        padding-left: 10px;
        padding-right: 80px;
    }

}


/* =====================================================
   ABOUT HERO CONTENT POSITION
===================================================== */

.about-hero .room-hero-content {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: var(--about-box-position-desktop);

    min-height: 100vh;
    padding-left: var(--about-box-offset-desktop);
    padding-right: var(--about-box-offset-desktop);
}

/* =====================================================
   ABOUT HERO TEXT BOX (GREEN GLASS)
===================================================== */

.about-hero .room-glass-box {
    background: rgba(35, 90, 61, 0.336); /* 🔥 hijau transparan */

    width: var(--about-box-width-desktop);
    min-height: var(--about-box-min-height-desktop);

    padding: 48px 52px;
    color: #ffffff;

    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);

    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* TABLET */
@media (max-width: 991px) {
    .about-hero .room-hero-content {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .about-hero .room-glass-box {
        width: var(--about-box-width-tablet);
        min-height: var(--about-box-min-height-tablet);
        padding: 40px 36px;
    }
}

/* MOBILE */
@media (max-width: 576px) {
    .about-hero .room-hero-content {
        align-items: flex-end;
        padding-bottom: 60px;
    }

    .about-hero .room-glass-box {
        width: var(--about-box-width-mobile);
        min-height: var(--about-box-min-height-mobile);
        padding: 28px 24px;
        border-radius: 0;
    }
}




/* =====================================================
   ABOUT HERO – CENTER EYEBROW & TITLE (MOBILE/TABLET)
===================================================== */

@media (max-width: 991px) {

    .about-hero .room-eyebrow,
    .about-hero .about-title {
        text-align: center;
    }

    /* garis title ikut ke tengah */
    .about-hero .about-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .about-hero .room-eyebrow {
        margin-bottom: 8px;
    }
}


/* EYEBROW */
.about-hero .room-eyebrow {
    display: block;
    font-family: 'Norwester';
     padding-top: 20px; /* jarak title ke garis */
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);

    margin-bottom: 30px;
}

/* TITLE */
.about-hero .room-title {
    font-family: 'Norwester';
    font-size: 46px;
    font-weight: 500;
    margin: 0 0 22px;
    color: #ffffff;
}

/* DESCRIPTION */
.about-hero .room-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255,255,255,0.92);
      /* rata kiri & kanan */
    text-align: justify;
    text-justify: inter-word;
}


/* TABLET */
@media (max-width: 991px) {
    .about-hero .room-glass-box {
        padding: 40px 36px;
        max-width: 90%;
    }

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

/* MOBILE */
@media (max-width: 576px) {
    .about-hero .room-hero-content {
        align-items: flex-end;
        padding-bottom: 60px;
    }

    .about-hero .room-glass-box {
        padding: 28px 24px;
        max-width: 100%;
    }

    .about-hero .room-title {
        font-size: 30px;
    }

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



/* =====================================================
   ABOUT HERO TEXT BOX CONTROL (MASTER)
===================================================== */

:root {

    /* JARAK DARI SISI (DESKTOP) */
    --about-box-offset-desktop: 0px;

    /* UKURAN BOX */
    --about-box-width-desktop: 560px;
    --about-box-min-height-desktop: 360px;

    /* TABLET */
    --about-box-width-tablet: 90%;
    --about-box-min-height-tablet: auto;

    /* MOBILE */
    --about-box-width-mobile: 100%;
    --about-box-min-height-mobile: auto;
}


/* =====================================================
   ABOUT HERO – TEXT BOX POSITION CONTROL (DESKTOP ONLY)
===================================================== */

@media (min-width: 992px) {

    .about-hero .room-hero-content {
        position: relative; /* WAJIB */
    }

    .about-hero .room-glass-box {
        position: absolute; /* 🔑 KUNCI UTAMA */
        top: 59%;
        left: 50px;          /* ← ATUR DI SINI */
        transform: translateY(-50%);

        width: 580px;        /* ← ATUR LEBAR */
        min-height: 320px;   /* ← ATUR TINGGI */

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

}


/* =====================================================
   ABOUT TITLE – DECORATIVE LINE
===================================================== */

.about-hero .about-title {
    position: relative;
    padding-bottom: 4px; /* jarak title ke garis */
}

/* GARIS DI BAWAH TITLE */
.about-hero .about-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 140px;          /* PANJANG GARIS */
    height: 2px;          /* TEBAL GARIS */
    background-color: #c9a24d; /* WARNA GARIS (GOLD ELEGAN) */

    border-radius: 2px;
}

/* =====================================================
   FIX GARIS TITLE AGAR IKUT TENGAH (MOBILE & TABLET)
===================================================== */

@media (max-width: 991px) {

    .about-hero .about-title {
        text-align: center;
    }

    .about-hero .about-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}


/* ================= ABOUT POINT TITLE ================= */

.about-point-title {
    font-family: 'Norwester'; /* 🔥 sesuai permintaan */
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;

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

    cursor: pointer;
    color: #ffffff;
}



/* ================= ABOUT TOGGLE ================= */

.about-point-title {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* ICON STRIP */
.about-toggle-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border: 1px solid #fcfcfc;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* DESC DEFAULT */
.about-point-desc {
    margin-top: 12px;
    transition: all 0.4s ease;
}

/* 🔥 HIDDEN STATE */
.about-step:not(.active) .about-point-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
}

/* ICON CHANGE */
.about-step:not(.active) .about-toggle-icon {
    content: "+";
    transform: rotate(180deg);
}




/* =====================================================
   ABOUT HERO – TEXT BOX ANIMATION (SAFE & PRO)
===================================================== */

/* DEFAULT (AMAN) */
.room-glass-box {
    opacity: 1;              /* 🔥 DEFAULT HARUS KELIHATAN */
    filter: none;
}

/* SAAT DI-ANIMASI */
.room-glass-box.about-animate {
    opacity: 0;
    filter: blur(6px);
}

/* SAAT AKTIF */
.room-glass-box.about-animate.is-visible {
    opacity: 1;
    filter: blur(0);
    transition:
        opacity 1s ease,
        filter 1s ease;
}


/* =====================================================
   ABOUT CONTENT – TEXT DELAY (TANPA LAYOUT SHIFT)
===================================================== */

/* DEFAULT */
.about-animate > * {
    opacity: 1; /* 🔥 default terlihat */
}

/* SAAT ANIMASI */
.about-animate:not(.is-visible) > * {
    opacity: 0;
}

/* SAAT MUNCUL */
.about-animate.is-visible > * {
    opacity: 1;
    transition: opacity 0.7s ease;
}

/* DELAY BERTAHAP */
.about-animate.is-visible > *:nth-child(1) { transition-delay: 0.25s; }
.about-animate.is-visible > *:nth-child(2) { transition-delay: 0.45s; }
.about-animate.is-visible > *:nth-child(3) { transition-delay: 0.65s; }
.about-animate.is-visible > *:nth-child(4) { transition-delay: 0.85s; }
.about-animate.is-visible > *:nth-child(5) { transition-delay: 1.05s; }






/* =====================================================
   OUR PROMISE – PADDING CONTROL SYSTEM
===================================================== */

:root {
    /* DESKTOP */
    --promise-padding-top-desktop: 90px;
    --promise-padding-bottom-desktop: 60px;

    /* TABLET */
    --promise-padding-top-tablet: 60px;
    --promise-padding-bottom-tablet: 10px;

    /* MOBILE */
    --promise-padding-top-mobile: 60px;
    --promise-padding-bottom-mobile:10px;
}

/* DEFAULT (DESKTOP) */
.our-promise-wrap {
    padding-top: var(--promise-padding-top-desktop);
    padding-bottom: var(--promise-padding-bottom-desktop);
}

/* TABLET */
@media (max-width: 991px) {
    .our-promise-wrap {
        padding-top: var(--promise-padding-top-tablet);
        padding-bottom: var(--promise-padding-bottom-tablet);
    }
}

/* MOBILE */
@media (max-width: 576px) {
    .our-promise-wrap {
        padding-top: var(--promise-padding-top-mobile);
        padding-bottom: var(--promise-padding-bottom-mobile);
    }
}



/* =====================================================
   OUR PROMISE – FULL WIDTH CARD ON MOBILE/TABLET
===================================================== */

/* DESKTOP DEFAULT */
.promise-text-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 46px;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 6px 14px rgba(0, 0, 0, 0.04);
}

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

    /* ❌ MATIKAN BATAS CONTAINER BOOTSTRAP */
    .our-promise-section .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .our-promise-section .row {
        margin-left: 0;
        margin-right: 0;
    }

    .our-promise-section .col-lg-6 {
        padding-left: 0;
        padding-right: 0;
    }

    /* ✅ CARD JADI FULL LAYAR */
    .promise-text-box {
        border-radius: 0;
        padding: 36px 28px;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.10);
    }
}

/* ================= MOBILE SMALL ================= */
@media (max-width: 576px) {
    .promise-text-box {
        padding: 28px 22px;
    }
}



/* =====================================================
   OUR PROMISE – EYEBROW & TITLE ALIGNMENT
===================================================== */

/* DEFAULT (DESKTOP) */
.promise-eyebrow {
    font-family: 'Norwester', sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6c7c72;
    display: block;
}

.promise-title {
    font-family: 'Norwester', sans-serif;
    font-size: 38px;
    letter-spacing: 5px;
    color: #1f2d2b;
    margin-top: 10px;
    margin-bottom: 22px;
}

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

    .promise-eyebrow,
    .promise-title {
        text-align: center;
    }

    .promise-title {
        font-size: 30px;
        letter-spacing: 4px;
    }
}

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

    .promise-title {
        font-size: 26px;
        letter-spacing: 3px;
    }
}



/* =====================================================
   OUR PROMISE – DESCRIPTION TYPOGRAPHY
===================================================== */

.promise-desc,
.promise-list li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.9;
    color: #3f4a45;
}

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

    .promise-desc,
    .promise-list li {
        font-size: 17px;
        line-height: 1.85;
    }
}

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

    .promise-desc,
    .promise-list li {
        font-size: 16px;
        line-height: 1.8;
        text-align: justify;
    }
}


/* =====================================================
   OUR PROMISE – READ MORE (CENTER + HOVER EFFECT)
===================================================== */

.promise-readmore-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 18px auto 0;   /* 🔥 pusatkan horizontal */

    display: inline-block;

    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 500;
    color: #2e4f3b;

    cursor: pointer;
    position: relative;
    text-align: center;

    transition: color 0.3s ease;
}

/* garis bawah (awal tersembunyi) */
.promise-readmore-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;

    width: 0;
    height: 1.5px;
    background-color: #2e4f3b;

    transform: translateX(-50%);
    transition: width 0.35s ease, background-color 0.3s ease;
}
/* =====================================================
   FIX: CENTER READ MORE DI DALAM TEXT BOX
===================================================== */

.promise-text-box {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 🔥 INI KUNCINYA */
}

/* hover effect */
.promise-readmore-btn:hover {
    color: #1f3d2b;
}

.promise-readmore-btn:hover::after {
    width: 100%;
    background-color: #1f3d2b;
}

/* ================= TABLET ================= */
@media (max-width: 991px) {
    .promise-readmore-btn {
        font-size: 17px;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
    .promise-readmore-btn {
        font-size: 16px;
    }
}



/* ===============================
   PROMISE CONTENT SWITCH
================================ */

.promise-text-content {
    position: relative;
    min-height: 260px; /* 🔥 ATUR TINGGI TETAP DI SINI */
}

/* default & more */
.promise-default,
.promise-more {
    transition: opacity 0.4s ease;
}

/* state awal */
.promise-default {
    opacity: 1;
}

.promise-more {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

/* state expanded */
.promise-text-content.expanded .promise-default {
    opacity: 0;
    pointer-events: none;
}

.promise-text-content.expanded .promise-more {
    opacity: 1;
    pointer-events: auto;
}


/* =====================================================
   OUR PROMISE – DESKTOP ONLY CONTROL
===================================================== */
@media (min-width: 992px) {

    /* ===== TEXT BOX ===== */
    .our-promise-section .promise-text-box {

        /* 🔧 UKURAN */
        max-width: 620px;      /* 👈 lebar text box */
        min-height: 520px;     /* 👈 tinggi text box */

        /* 🔧 POSISI */
        margin-left: 0;        /* geser dari kiri */
        margin-right: auto;    /* jarak ke image */

        /* 🔧 JARAK KE GAMBAR */
        padding-right: 20px;   /* jarak dalam box (opsional) */

    }

    /* ===== JARAK ANTARA TEXT & IMAGE ===== */
    .our-promise-section .col-lg-6:first-child {
        padding-right: 90px;  /* 👈 JARAK TEXT KE IMAGE */
    }

    .our-promise-section .col-lg-6:last-child {
        padding-left: 0;
    }

}




:root {
    /* DESKTOP */
    --promise-img-height-desktop: 620px;

    /* TABLET */
    --promise-img-height-tablet: 420px;

    /* MOBILE */
    --promise-img-height-mobile: 300px;
}


.promise-image-wrapper {
    width: 100%;
    height: var(--promise-img-height-desktop);
    overflow: hidden;
    border-radius: 16px;
}


.promise-image {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* gambar penuh & proporsional */
    object-position: center;
    display: block;
}


@media (max-width: 991px) {
    .promise-image-wrapper {
        height: var(--promise-img-height-tablet);
        border-radius: 0; /* biar full layar */
    }
}

@media (max-width: 576px) {
    .promise-image-wrapper {
        height: var(--promise-img-height-mobile);
    }
}




/* =====================================================
   OUR PROMISE – SCROLL ANIMATION (FINAL CLEAN)
===================================================== */

/* ===============================
   DEFAULT STATE (ALL DEVICES)
================================ */

/* TEXT BOX – DARI KIRI */
.our-promise-section .promise-text-box {
    opacity: 0;
    transform: translateX(-120px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* IMAGE – DARI KANAN */
.our-promise-section .promise-image-wrapper {
    opacity: 0;
    transform: translateX(120px);
    transition:
        opacity 1.05s ease,
        transform 1.05s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ===============================
   ACTIVE STATE (ON SCROLL)
================================ */

.our-promise-section.is-visible .promise-text-box {
    opacity: 1;
    transform: translateX(0);
}

.our-promise-section.is-visible .promise-image-wrapper {
    opacity: 1;
    transform: translateX(0);
}

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

    .our-promise-section .promise-text-box {
        transform: translateX(-60px);
    }

    .our-promise-section .promise-image-wrapper {
        transform: translateX(60px);
    }
}

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

    .our-promise-section .promise-text-box {
        transform: translateY(40px); /* lebih natural di HP */
    }

    .our-promise-section .promise-image-wrapper {
        transform: translateY(40px);
    }
}







/* =====================================================
   OUR SERVICES – RESPONSIVE PADDING SYSTEM
===================================================== */

/* ================= ROOT VARIABLE ================= */
:root {
    --services-padding-top-desktop: 60px;
    --services-padding-bottom-desktop: 60px;

    --services-padding-top-tablet: 60px;
    --services-padding-bottom-tablet: 30px;

    --services-padding-top-mobile: 40px;
    --services-padding-bottom-mobile: 30px;
}

/* ================= DESKTOP (DEFAULT) ================= */
.our-services-section {
    position: relative;
    width: 100%;
    padding-top: var(--services-padding-top-desktop);
    padding-bottom: var(--services-padding-bottom-desktop);
}


/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .our-services-section {
        padding-top: var(--services-padding-top-tablet);
        padding-bottom: var(--services-padding-bottom-tablet);
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .our-services-section {
        padding-top: var(--services-padding-top-mobile);
        padding-bottom: var(--services-padding-bottom-mobile);
    }
}


/* =====================================================
   OUR SERVICES – CHECKLIST STYLE (NO BULLET)
===================================================== */

.services-list {
    list-style: none;          /* HILANGKAN BULLET */
    padding-left: 0;           /* HILANGKAN INDENT */
    margin: 28px 0 0;
}

.services-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: #2f3f3a;
}

/* ICON CHECK */
.services-list li span {
    color: #2f7d6f;
    font-weight: 600;
    line-height: 1;
    margin-top: 4px; /* sejajarkan dengan teks */
}



/* =====================================================
   OUR SERVICES – GLASS TEXT BOX
===================================================== */

/* ================= DESKTOP ================= */
.services-glass-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: 22px;
    padding: 60px 48px;

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

    text-align: justify;
    text-justify: inter-word;
}

/* ================= TABLET & MOBILE ================= */
@media (max-width: 991.98px) {
    .services-glass-box {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0;

        padding: 28px 28px;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .services-glass-box {
        padding: 26px 22px;
    }
}


/* =====================================================
   OUR SERVICES – ORDER RESPONSIVE (TEXT ATAS, IMAGE BAWAH)
===================================================== */

/* Tablet & Mobile */
@media (max-width: 991.98px) {

    .our-services-section .row {
        flex-direction: column-reverse;
    }

    /* rapikan jarak antar elemen */
    .services-image-wrapper {
        margin-top: 30px;
    }
}


/* =====================================================
   OUR SERVICES – TEXT BOX INNER PADDING CONTROL
===================================================== */

/* ================= DESKTOP ================= */
.services-glass-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: 22px;

    /* ===== PADDING TEXT ===== */
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 48px;
    padding-right: 48px;

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

    text-align: justify;
    text-justify: inter-word;
}

/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .services-glass-box {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0;

        /* ===== PADDING TEXT ===== */
        padding-top: 48px;
        padding-bottom: 48px;
        padding-left: 28px;
        padding-right: 26px;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .services-glass-box {
        /* ===== PADDING TEXT ===== */
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 28px;
        padding-right: 26px;
    }
}


/* =====================================================
   OUR SERVICES – CENTER EYEBROW & TITLE (ALL DEVICE)
===================================================== */

.services-eyebrow {
    display: block;
    text-align: center;
    margin: 0 auto 14px;

    font-family: 'Norwester';
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: normal;
    color: #2f7d6f;
}

.services-title {
    text-align: center;
    margin: 0 auto 28px;

    font-family: 'Norwester';
    font-size: 36px;
    font-weight: normal;
    line-height: 1.3;
    color: #1f2f2a;
}

/* =====================================================
   FONT – NORWESTER
===================================================== */
@font-face {
    font-family: 'Norwester';
    src: url('../fonts/norwester.woff2') format('woff2'),
         url('../fonts/norwester.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .services-title {
        font-size: 32px;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .services-title {
        font-size: 26px;
    }
}


/* =====================================================
   OUR SERVICES – BODY TEXT FONT (CORMORANT GARAMOND)
===================================================== */

/* PARAGRAPH */
.services-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
    color: #4b5b56;
}

/* LIST WRAPPER */
.services-list {
    font-family: 'Cormorant Garamond', serif;
}

/* LIST ITEM */
.services-list li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: #2f3f3a;
}

/* ICON CHECK */
.services-list li span {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}


/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .services-desc {
        font-size: 17px;
    }

    .services-list li {
        font-size: 16px;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575.98px) {
    .services-desc {
        font-size: 16px;
        line-height: 1.7;
    }

    .services-list li {
        font-size: 15.5px;
    }
}


/* =====================================================
   OUR SERVICES – IMAGE ↔ TEXT SPACING
===================================================== */

/* DESKTOP */
@media (min-width: 992px) {
    .our-services-section .services-image-wrapper {
        margin-right: 40px; /* jarak ke text box */
    }
}


/* =====================================================
   OUR SERVICES – IMAGE SIZE CONTROL
===================================================== */

/* ================= DESKTOP ================= */
@media (min-width: 992px) {

    .services-image-wrapper img {
        width: 100%;              /* ikut kolom */
        height: 620px;            /* TINGGI DESKTOP (ATUR DI SINI) */
        object-fit: cover;
        display: block;
        border-radius: 18px;      /* opsional */
    }
}


/* ================= TABLET & MOBILE ================= */
@media (max-width: 991.98px) {

    .services-image-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .services-image-wrapper img {
        width: 100%;
        height: 50vh;             /* TINGGI TABLET */
        object-fit: cover;
        border-radius: 0;
        display: block;
    }
}

/* ================= MOBILE SMALL ================= */
@media (max-width: 575.98px) {
    .services-image-wrapper img {
        height: 45vh;             /* TINGGI MOBILE */
    }
}


/* =====================================================
   OUR SERVICES – BOTTOM SHADOW (ALL DEVICES)
===================================================== */

.our-services-section {
    position: relative;
    width: 100%;
}

/* SHADOW BAWAH – AKTIF SEMUA DEVICE */
.our-services-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 50px; /* area bayangan */
    pointer-events: none;

    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28);
}


@media (max-width: 575.98px) {
    .our-services-section::after {
        height: 35px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
    }
}



/* =====================================================
   OUR SERVICES – PRO ENTRANCE ANIMATION
===================================================== */

/* ===== INITIAL STATE (HIDDEN) ===== */
.services-image-wrapper,
.services-glass-box {
    opacity: 0;
    transform: translateX(-120px);
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* AKTIF */
.services-image-wrapper.is-visible,
.services-glass-box.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================================
   STAGGER TEXT (INSIDE GLASS BOX)
===================================================== */

.services-glass-box > * {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* AKTIF */
.services-glass-box.is-visible > * {
    opacity: 1;
    transform: translateX(0);
}

/* DELAY BERTAHAP */
.services-glass-box.is-visible > *:nth-child(1) { transition-delay: 0.2s; }
.services-glass-box.is-visible > *:nth-child(2) { transition-delay: 0.35s; }
.services-glass-box.is-visible > *:nth-child(3) { transition-delay: 0.5s; }
.services-glass-box.is-visible > *:nth-child(4) { transition-delay: 0.65s; }
.services-glass-box.is-visible > *:nth-child(5) { transition-delay: 0.8s; }
.services-glass-box.is-visible > *:nth-child(6) { transition-delay: 0.95s; }
.services-glass-box.is-visible > *:nth-child(7) { transition-delay: 1.1s; }
.services-glass-box.is-visible > *:nth-child(8) { transition-delay: 1.25s; }



/* =====================================================
   LOCATION SECTION – SAFE PRO STAGGER ANIMATION
   (WORKS IN HOME & ABOUT)
===================================================== */

/* ===== DEFAULT STATE (AMAN, TETAP KELIHATAN) ===== */
.home-location-wrap {
    opacity: 1;
    transform: none;
}

/* =====================================================
   ANIMATION MODE AKTIF HANYA JIKA ADA CLASS
===================================================== */

.animate-location .home-location-wrap {
    opacity: 0;
    transform: translateX(-120px);
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ACTIVE */
.animate-location .home-location-wrap.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== STAGGER TEXT ===== */
.animate-location .home-location-wrap > * {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* ACTIVE TEXT */
.animate-location .home-location-wrap.is-visible > * {
    opacity: 1;
    transform: translateX(0);
}

/* ===== DELAY ORDER ===== */
.animate-location .home-location-wrap.is-visible > *:nth-child(1) { transition-delay: 0.2s; }
.animate-location .home-location-wrap.is-visible > *:nth-child(2) { transition-delay: 0.4s; }
.animate-location .home-location-wrap.is-visible > *:nth-child(3) { transition-delay: 0.6s; }

/* ===== PARAGRAPH STAGGER ===== */
.animate-location .home-location-wrap.is-visible .section-desc p {
    opacity: 0;
    transform: translateX(-30px);
    animation: locationTextFade 0.6s ease forwards;
}

.animate-location .home-location-wrap.is-visible .section-desc p:nth-child(1) { animation-delay: 0.8s; }
.animate-location .home-location-wrap.is-visible .section-desc p:nth-child(2) { animation-delay: 1.0s; }
.animate-location .home-location-wrap.is-visible .section-desc p:nth-child(3) { animation-delay: 1.2s; }

/* KEYFRAMES */
@keyframes locationTextFade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}