/* =====================================================
   HYPNOTHERAPY RANGGAMALELA — LEGACY BASE STYLES
   PART 1
   RESET + GLOBAL + NAVBAR + HERO
===================================================== */


/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Poppins',sans-serif;

    background:#faf7f1;

    color:#4a382d;

    line-height:1.7;

}



h1,
h2,
h3,
h4{

    font-family:'Cormorant Garamond',serif;

    color:#3d2b20;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



.section{

    padding:120px 0;

}



/* =====================================================
   COLOR SYSTEM
===================================================== */


:root{

    --gold:#b89b5e;

    --gold-dark:#927044;

    --cream:#faf7f1;

    --brown:#3d2b20;

    --text:#6b5a4b;

    --green:#314331;

}



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


.btn-primary{


    display:inline-block;


    background:#b89b5e;


    color:white;


    padding:15px 38px;


    border-radius:50px;


    font-size:15px;


    font-weight:600;


    transition:.35s;


}



.btn-primary:hover{

    transform:translateY(-5px);

}



.btn-secondary{


    display:inline-block;


    border:1px solid #b89b5e;


    color:#8b6b32;


    padding:15px 38px;


    border-radius:50px;


    transition:.35s;


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


}


.btn-secondary:hover{

    background:white;

    color:var(--brown);

}



/* =====================================================
   NAVBAR PREMIUM FLOATING
===================================================== */


/* ==============================
   PREMIUM NAVBAR
============================== */


.navbar{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);


    width:88%;

    max-width:1150px;


    z-index:9999;


    transition:.4s;

}

.nav-menu a.active {

background:#c5a05a;

color:white;

padding:12px 22px;

border-radius:30px;

}


.nav-menu a {

transition:.3s;

}


.nav-menu a:hover {

color:#b08a45;

}


.nav-container{


    background:

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


    backdrop-filter:

    blur(20px);



    border:

    1px solid rgba(184,155,94,.25);



    border-radius:50px;



    padding:

    8px 30px;



    box-shadow:

    0 10px 35px rgba(0,0,0,.08);



}




.logo img{


    height:55px;


}




.nav-links a{


    font-size:14px;


    letter-spacing:.5px;


    color:#4a382d;


    padding:10px 16px;


    border-radius:30px;


    transition:.3s;


}



.nav-links a:hover,


.nav-links .active{


    background:#b89b5e;


    color:white;


}



.nav-container{


    background:

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


    backdrop-filter:blur(18px);


    border:

    1px solid rgba(184,155,94,.25);


    border-radius:40px;


    padding:10px 28px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    box-shadow:

    0 10px 35px rgba(0,0,0,.08);


}



.logo img{

    height:48px;

}



.nav-links{


    display:flex;

    align-items:center;

    gap:12px;


}



.nav-links a{


    font-size:14px;

    padding:8px 14px;

    border-radius:30px;

    transition:.3s;

    color:#4a382d;


}



.nav-links a:hover,
.nav-links .active{


    background:var(--gold);

    color:white;


}



@media(max-width:768px){


    .navbar{

        width:92%;

    }


    .nav-links{

        display:none;

    }


}



/* =====================================================
   HERO PREMIUM COLOR BACKGROUND
===================================================== */


/* =========================
   HERO SECTION
========================= */

/* =========================
   HERO SECTION
========================= */

.hero {

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding-top:120px;

    padding-left:20px;

    padding-right:20px;

    overflow:hidden;


    background-image:url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


.hero::before {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(250,247,239,0.45);

    z-index:1;

}

/* HERO CONTENT */

.hero-content {

    position:relative;

    z-index:2;

}



/* LABEL KECIL */

.hero-small {

    display:inline-block;

    font-family:'Poppins', sans-serif;

    font-size:13px;

    letter-spacing:4px;

    color:#b8954b;

    margin-bottom:25px;

    text-transform:uppercase;

}



/* JUDUL UTAMA */

.hero h1 {

    font-family:'Cormorant Garamond', serif;

    font-size:80px;

    line-height:1;

    color:#806033;

    margin:0 0 25px;

}



/* DESKRIPSI */

.hero p {

    font-family:'Poppins', sans-serif;

    font-size:18px;

    color:#555;

    max-width:650px;

    margin:auto;

    line-height:1.8;

}



/* BUTTON */

.hero .btn-primary {

    display:inline-block;

    margin-top:35px;

    padding:15px 40px;

    background:#17351f;

    color:white;

    border-radius:40px;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}


.hero .btn-primary:hover {

    background:#c49a4a;

}




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


@media(max-width:768px){


.hero {

    padding-top:100px;

}


.hero h1 {

    font-size:50px;

}


.hero-small {

    font-size:11px;

    letter-spacing:3px;

}


.hero p {

    font-size:15px;

}


}

/* =====================================================
   PART 2
   PHILOSOPHY + JOURNEY + PROGRAMS
===================================================== */



/* =====================================================
   SECTION HEADER GLOBAL
===================================================== */


.section-header{

    max-width:850px;

    margin:auto;

    text-align:center;

}



.section-label{

    display:block;

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:13px;

    color:var(--gold);

    margin-bottom:20px;

}



.section-header h2{


    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;


}



.section-header p{


    color:var(--text);

    font-size:18px;

    line-height:1.8;


}




/* =====================================================
   PHILOSOPHY SECTION
===================================================== */


.philosophy{


    padding:120px 0;


    background:


    linear-gradient(

        rgba(230,215,190,.45),

        rgba(245,235,220,.65)

    ),

    url("../images/background-white.jpg");


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



.philosophy-grid{


    margin-top:70px;


    display:grid;


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


    gap:30px;


}




.philosophy-card{


    background:white;


    padding:45px 30px;


    border-radius:28px;


    text-align:center;


    transition:.4s;


    box-shadow:

    0 15px 40px rgba(0,0,0,.06);


}



.philosophy-card:hover{


    transform:translateY(-12px);


}




.philosophy-card .icon{


    width:60px;

    height:60px;


    display:flex;


    justify-content:center;


    align-items:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:var(--gold);


    color:white;


    font-weight:600;


}



.philosophy-card h3{


    font-size:34px;


    margin-bottom:15px;


}



.philosophy-card p{


    color:var(--text);


    font-size:15px;


    line-height:1.8;


}




/* =====================================================
   JOURNEY SECTION
===================================================== */


.journey{


    background:


    linear-gradient(

        rgba(230,215,190,.25),

        rgba(245,235,220,.45)

    ),

    url("../images/background-white.jpg");



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


    padding:120px 0;


    color:#314331;


}



/* supaya isi tidak tertutup */

.journey .container{


    position:relative;


    z-index:2;


}



/* hapus overlay gelap */

.journey::before{


    content:"";


    position:absolute;


    inset:0;


    background:transparent;


    z-index:1;


}




.journey .section-header h2{


    color:#314331;


}



.journey .section-header p{


    color:#5f7058;


}




.journey-wrapper{


    max-width:900px;


    margin:80px auto 0;


}




.journey-item{


    display:flex;


    align-items:center;


    gap:40px;


}




.journey-number{


    width:90px;


    height:90px;


    min-width:90px;


    border-radius:50%;


    background:#314331;


    display:flex;


    justify-content:center;


    align-items:center;


    color:white;


    font-size:28px;


}




.journey-content{


    flex:1;


    background:


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



    border:


    1px solid rgba(49,67,49,.15);



    padding:35px;


    border-radius:25px;


    backdrop-filter:blur(10px);


}




.journey-content h3{


    font-size:38px;


    color:#314331;


    margin-bottom:10px;


}




.journey-content p{


    color:#5a6b54;


    font-size:17px;


    line-height:1.8;


}





.journey-line{


    height:50px;


    width:2px;


    background:#b89b5e;


    margin-left:44px;


}


/* =====================
   FOUNDER SECTION
===================== */


.founder{


padding:120px 0;


background:


linear-gradient(

rgba(230,215,190,.25),

rgba(245,235,220,.45)

),

url("../images/background-white.jpg");


background-size:cover;


background-position:center;


}



.founder-wrapper{


display:grid;


grid-template-columns:1fr 1fr;


gap:80px;


align-items:center;


}



.founder-text h2{


font-size:60px;


color:#314331;


}



.founder-text h3{


font-size:35px;


color:#b89b5e;


}



.founder-text p{


font-size:18px;


color:#6b5a4b;


line-height:1.9;


}



.founder-image img{


width:100%;


max-width:450px;


border-radius:35px;


box-shadow:

0 20px 50px rgba(0,0,0,.15);


}


/* =====================================================
   PROGRAMS SECTION
===================================================== */


.programs{


    background:#faf7f1;


    padding:120px 0;


}




.program-grid{


    display:grid;


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


    gap:30px;


    margin-top:60px;


}




.program-card{


    background:white;


    overflow:hidden;


    border-radius:30px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.08);


    transition:.4s;


}




.program-card:hover{


    transform:translateY(-12px);


}





.program-image{


    height:280px;


    overflow:hidden;


}




.program-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}



.program-card:hover img{


    transform:scale(1.08);


}




.program-body{


    padding:35px;


}




.program-body h3{

    font-size:36px;
    font-weight:700;
    letter-spacing:.3px;

}



.program-body p{


    color:var(--text);


    line-height:1.8;


    margin-bottom:25px;


}



.program-link{


    color:var(--gold);


    font-weight:600;


}




.empty-program{


    text-align:center;

    padding:50px;


}





/* =====================================================
   RESPONSIVE PART 2
===================================================== */


@media(max-width:1000px){


.philosophy-grid{


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


}



.program-grid{


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


}



}



@media(max-width:768px){



.section-header h2{

    font-size:40px;

}



.philosophy-grid{


    grid-template-columns:1fr;


}



.program-grid{

    grid-template-columns:1fr;

}



.journey-item{


    flex-direction:column;


    text-align:center;


}



.journey-line{


    margin:auto;


}



.journey-content h3{


    font-size:30px;


}



}

/* =====================================================
   PART 3
   SIGNATURE + EXPERIENCE + TESTIMONIALS
===================================================== */


/* =====================================================
   SIGNATURE / APPROACH SECTION
===================================================== */


.signature{

    background-image:url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

    padding:140px 0 120px;

}



.signature-section::before{


    content:"";


    position:absolute;


    width:500px;

    height:500px;


    background:

    rgba(184,155,94,.18);


    border-radius:50%;


    top:-200px;

    right:-150px;


}




.signature-box{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding-top:30px;

}


.signature-image{


    text-align:center;


}



.signature-image img{

    width:320px;
    margin:auto;

    filter:
    drop-shadow(
    0 25px 40px rgba(0,0,0,.18)
    );

}



.signature-content{


    text-align:left;


}



.signature-content h2{


    font-family:'Poppins',sans-serif;


    font-size:14px;


    text-transform:uppercase;


    letter-spacing:5px;


    color:var(--gold);


    margin-bottom:15px;


}



.signature-content h1{


    font-size:65px;


    line-height:1;


    margin-bottom:25px;


}



.signature-content p{


    font-size:17px;


    line-height:1.9;


    color:var(--text);


}




.framework{

    display:grid;

    grid-template-columns:repeat(2, 250px);

    gap:18px;

    margin-top:40px;

}


.framework-item{

    background:#b9954b;

    border-radius:35px;

    height:105px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:15px;

    transition:.3s ease;

}



.framework-item strong{

    font-family:"Cormorant Garamond", serif;

    font-size:24px;

    font-weight:700;

    line-height:1.1;

    color:white;

}



.framework-item span{

    margin-top:8px;

    font-size:13px;

    font-weight:500;

    color:white;

}


.framework-item:hover {


background:#17351f;


transform:translateY(-5px);


}



.framework-item:hover strong,
.framework-item:hover span {

color:white;

}





/* =====================================================
   EXPERIENCE SECTION
===================================================== */


.experience{


    padding:120px 0;


    background:


    linear-gradient(

        rgba(230,215,190,.45),

        rgba(245,235,220,.65)

    ),

    url("../images/background-white.jpg");


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



.experience-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:80px;


    align-items:center;


}



.experience-image img{


   width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;

    object-fit:cover;


    border-radius:35px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.12);


}




.experience-content .section-label{


    text-align:left;


}



.experience-content h2{


    font-size:60px;


    line-height:1.1;


    margin-bottom:25px;


}



.experience-content p{


    font-size:17px;


    color:var(--text);


    line-height:1.8;


}




.experience-list{


    margin-top:45px;


}



.experience-list div{


    display:grid;


    grid-template-columns:70px 1fr;


    margin-bottom:30px;


}



.experience-list span{


    font-size:28px;


    color:var(--gold);


    font-weight:600;


}



.experience-list h4{


    font-size:28px;


    margin-bottom:5px;


}



.experience-list p{


    grid-column:2;


}




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


.testimonials{


    padding:120px 0;


    background:#faf7f1;


}




.testimonial-grid{


    margin-top:70px;


    display:grid;


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


    gap:35px;


}



.testimonial-card{


    background:white;


    padding:45px 35px;


    border-radius:30px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.07);


    transition:.35s;


}



.testimonial-card:hover{


    transform:translateY(-10px);


}



.quote{


    font-family:'Cormorant Garamond',serif;


    font-size:80px;


    line-height:.5;


    color:var(--gold);


}




.testimonial-card p{


    margin:30px 0;


    font-size:17px;


    font-style:italic;


    color:#5f5145;


    line-height:1.8;


}




.person{


    display:flex;


    align-items:center;


    gap:20px;


}



.avatar{


    width:60px;


    height:60px;


    border-radius:50%;


    background:

    linear-gradient(

        135deg,

        #b89b5e,

        #6b7a4b

    );


}




.person h4{


    font-size:22px;


    margin:0;


}



.person span{


    color:#8a7b6c;


    font-size:14px;


}




/* =====================================================
   RESPONSIVE PART 3
===================================================== */


@media(max-width:900px){



.signature-box{


    grid-template-columns:1fr;


    text-align:center;


}



.signature-content{


    text-align:center;


}



.signature-content h1{


    font-size:50px;


}



.experience-grid{


    grid-template-columns:1fr;


}



.experience-content h2{


    font-size:42px;


}



.experience-image img{


     width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;


}



.testimonial-grid{


    grid-template-columns:1fr;


}


}

/* =====================================================
   PART 4
   LOCATION + FOOTER + WHATSAPP + FINAL RESPONSIVE
===================================================== */



/* ==============================
   LOCATION SECTION
============================== */


.location{


    padding:120px 0;


    text-align:center;


    background:


    linear-gradient(

        rgba(230,215,190,.45),

        rgba(245,235,220,.65)

    ),

    url("../images/background-gold.jpg");


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



.location h2{


    font-size:60px;


    color:#3d2b20;


    margin-bottom:25px;


}



.location p{


    font-size:17px;


    color:#6b5a4b;


    line-height:1.9;


}



.map-container{


    margin-top:50px;


    border-radius:35px;


    overflow:hidden;


    box-shadow:

    0 20px 50px rgba(0,0,0,.12);


}



.map-container iframe{


    width:100%;


    height:450px;


    border:0;


}



@media(max-width:768px){


    .location h2{


        font-size:42px;


    }



    .location p{


        font-size:16px;


    }



}



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


footer#contact{

    background:
    linear-gradient(
        rgba(38,54,38,.78),
        rgba(61,81,56,.88)
    ),
    url("../images/background-green.jpg");

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

    padding:70px 0 30px;

    color:white;
    text-align:center;

}


/* BRAND AREA */

.footer-branding{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:140px;

    margin-bottom:45px;

}



.brand-main,
.brand-secondary{

    width:260px;

    text-align:center;

}



.brand-main img,
.brand-secondary img{

    width:140px;

    height:100px;

    object-fit:contain;

    margin:0 auto 20px;

    display:block;

}



.brand-main p,
.brand-secondary p{

    color:#e7d29b;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

}



.brand-main span,
.brand-secondary span{

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

    font-size:13px;

}



/* SOCIAL */

.social-footer{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:40px 0;

}



.social-item{

    display:flex;

    align-items:center;

    gap:15px;

    width:190px;

    padding:15px 20px;

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

    border-radius:18px;

    text-decoration:none;

    color:white;

    transition:.3s;

}



.social-item:hover{

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

    transform:translateY(-5px);

}



.social-item img{

    width:35px;

    height:35px;

}



.social-item strong{

    display:block;

    color:white;

    font-size:15px;

}



.social-item span{

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

    font-size:13px;

}



/* COPYRIGHT */

.copyright{

    margin-top:35px;

    padding-top:25px;

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

}



.copyright p{

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

    font-size:13px;

}



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


.social-footer{


    display:flex;


    justify-content:center;


    gap:25px;


    flex-wrap:wrap;


}



.social-item{


    display:flex;


    align-items:center;


    gap:15px;


    padding:15px 25px;


    border-radius:25px;


    background:

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


    color:white;


    transition:.35s;


}



.social-item:hover{


    transform:translateY(-5px);


    background:

    rgba(255,255,255,.2);


}



.social-item img{


    width:38px;


    height:38px;


}



.social-item div{


    text-align:left;


    display:flex;


    flex-direction:column;


}



.social-item strong{


    font-size:15px;


}



.social-item span{


    font-size:13px;


    color:#ddd;


}





/* =====================================================
   COPYRIGHT
===================================================== */


.copyright{


    margin-top:50px;


    padding-top:25px;


    border-top:

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


}



.copyright p{


    font-size:14px;


    color:#ddd;


}




/* =====================================================
   FLOATING WHATSAPP
===================================================== */


.floating-wa{


    position:fixed;


    right:30px;


    bottom:30px;


    width:65px;


    height:65px;


    background:#25D366;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    z-index:99999;


    box-shadow:

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


    animation:

    pulseWA 2s infinite;


}



.floating-wa img{


    width:35px;


}



.floating-wa span{


    position:absolute;


    right:80px;


    background:white;


    color:#4a382d;


    padding:8px 18px;


    border-radius:20px;


    font-size:13px;


    opacity:0;


    transition:.3s;


    white-space:nowrap;


}



.floating-wa:hover span{


    opacity:1;


}




@keyframes pulseWA{


0%{

box-shadow:

0 0 0 0 rgba(37,211,102,.5);

}


70%{

box-shadow:

0 0 0 20px rgba(37,211,102,0);

}


100%{

box-shadow:

0 0 0 0 rgba(37,211,102,0);

}


}



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


@media(max-width:900px){


.footer-branding{


    flex-direction:column;


    gap:50px;


}



.location h2{


    font-size:42px;


}



}



@media(max-width:600px){



.container{


    width:92%;


}



.section{


    padding:80px 0;


}



.hero{


    min-height:650px;


}



.social-item{


    width:100%;


    justify-content:center;


}



.floating-wa{


    width:58px;


    height:58px;


    right:20px;


    bottom:20px;


}


}

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


.about-content{

    max-width:950px;

    margin:60px auto 0;

    text-align:center;

}



.about-content p{

    font-size:17px;

    line-height:1.9;

    color:var(--text);

    margin-bottom:25px;

}



.about-values{


    display:grid;


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


    gap:25px;


    margin-top:60px;


}



.value-card{


    background:white;


    padding:35px 25px;


    border-radius:25px;


    box-shadow:

    0 15px 35px rgba(0,0,0,.06);


    transition:.3s;


}



.value-card:hover{


    transform:translateY(-8px);


}



.value-card h3{


    font-size:32px;


    color:var(--gold);


    margin-bottom:15px;


}



.value-card p{


    font-size:15px;


    margin:0;


}



@media(max-width:900px){


.about-values{


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


}


}



@media(max-width:600px){


.about-values{


    grid-template-columns:1fr;


}


}

/* ==============================
   ABOUT CENTER SECTION
============================== */

.about-section{


    padding:120px 0;


    text-align:center;


    background:


    linear-gradient(

        rgba(230,215,190,.45),

        rgba(245,235,220,.65)

    ),

    url("../images/background-white.jpg");


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



.about-center{


    max-width:850px;


    margin:auto;


}



.about-center h2{


    font-size:60px;


    margin-bottom:25px;


    color:#3d2b20;


}



.about-center p{


    font-size:18px;


    line-height:1.9;


    color:#6b5a4b;


}



@media(max-width:768px){



.about-center h2{


    font-size:42px;


}



.about-center p{


    font-size:16px;


}



}

/* =====================================================
   ECOSYSTEM SECTION
   Partnership + Leadership + Organization
===================================================== */


/* ==============================
   PARTNERSHIP ECOSYSTEM
============================== */


.partnership{


    padding:120px 0;


    background:


    linear-gradient(

        rgba(230,215,190,.25),

        rgba(245,235,220,.45)

    ),

    url("../images/background-white.jpg");



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



.partner-grid{


    margin-top:70px;


    display:grid;


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


    gap:30px;


}



.partner-card{


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


    padding:40px 30px;


    border-radius:25px;


    text-align:center;


    border:1px solid rgba(184,155,94,.25);



    box-shadow:


    0 15px 40px rgba(0,0,0,.08);



    transition:.35s;


}



.partner-card:hover{


    transform:translateY(-10px);


}



.partner-card h3{


    font-family:'Cormorant Garamond',serif;


    font-size:34px;


    color:#314331;


    margin-bottom:15px;


}



.partner-card p{


    color:#6b5a4b;


    font-size:16px;


    line-height:1.8;


}



/* ==============================
   LEADERSHIP SECTION
============================== */


.leadership{


    padding:120px 0;


    background:


    linear-gradient(

        135deg,

        #314331,

        #40563a

    );


    color:white;


    text-align:center;


}



.leadership-box{


    max-width:850px;


    margin:auto;


}



.leadership .section-label{


    color:#e7d29b;


}



.leadership h2{


    font-size:65px;


    color:white;


    margin:20px 0;


}



.leadership p{


    color:#eee;


    font-size:18px;


    line-height:1.9;


}





/* ==============================
   ORGANIZATION STRUCTURE
============================== */


.organization{
    position:relative;
    padding:140px 0 120px;
    background-image:url("../images/background-brown.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    text-align:center;
}

.organization .section-label{
    position:relative;
    display:block;
    margin-bottom:25px;
    letter-spacing:6px;
    color:#c7a052;
}


.organization .section-label{

    display:block;

    margin-bottom:25px;

    letter-spacing:6px;

    color:#c7a052;

}
.organization h1{
    color:#8a6734;
}

.organization .org-subtitle{
    color:#5d5a57;
    margin-bottom:70px;
}

/* LEVEL */
.org-level h3{

    display:inline-block;

    background:#17351f;

    color:white;

    padding:15px 46px;

    border-radius:40px;

    font-size:14px;

    letter-spacing:2.5px;

    text-transform:uppercase;

    position:relative;

    z-index:3;

    margin-bottom:70px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

/* garis vertikal dari judul level ke bawah */
.org-level::before{

    content:"";

    position:absolute;

    top:55px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    height:55px;

    background:#c7a052;

    z-index:1;

}
/* ROW CARD */
/* ROW CARD */
.org-row {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 35px;
}

/* Garis vertikal ke bawah */
.org-row::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 35px;
    background: #c7a052;
    z-index: 2;
}

/* Hilangkan garis horizontal */
.org-row::after {
    display: none;
}




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


@media(max-width:1000px){


    .partner-grid{


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


    }


}



@media(max-width:600px){


    .partner-grid{


        grid-template-columns:1fr;


    }



    .leadership h2{


        font-size:42px;


    }


}

.organization-page{

    padding:120px 0;

    background:url("../images/background-brown.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


.org-chart{


margin-top:70px;


text-align:center;


}



.org-box{


background:white;


padding:25px;


border-radius:20px;


border:1px solid rgba(184,155,94,.3);


box-shadow:

0 15px 35px rgba(0,0,0,.08);


color:#314331;


font-weight:600;


}



.org-box.main{


background:#314331;


color:white;


font-size:24px;


max-width:300px;


margin:auto;


}



.org-line{


height:60px;


width:2px;


background:#b89b5e;


margin:20px auto;


}



.org-row{


display:grid;


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


gap:30px;


margin-top:30px;


}

.credentials {
    margin-top: 30px;
}


.credentials h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #9b7a3d;
    margin-bottom: 20px;
}


.credential-grid {

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

}


.credential-card {

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

    border: 1px solid rgba(183,145,74,0.35);

    border-radius: 15px;

    padding: 15px;

    display:flex;

    align-items:center;

    gap:12px;

    transition:0.3s;

}


.credential-card span {

    color:#b8954b;

    font-size:20px;

}


.credential-card p {

    margin:0;

    font-size:14px;

    line-height:1.4;

    color:#4b4035;

}


.credential-card:hover {

    transform:translateY(-4px);

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

}


.credential-card.highlight {

    background:#f8f0df;

    border-color:#c8a45d;

}

/* =========================
 ORGANIZATION PAGE
========================= */


.organization {

    padding:120px 0;

    background-image:url("../images/organize.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    text-align:center;

}



.organization h1 {

font-family:'Cormorant Garamond', serif;

font-size:55px;

color:#806033;

margin-bottom:10px;

}



.org-subtitle {

font-size:18px;

color:#666;

margin-bottom:70px;

}



.org-level {

margin-bottom:80px;

}



.org-level h3 {

display:inline-block;

background:#17351f;

color:white;

padding:12px 45px;

border-radius:30px;

font-size:15px;

letter-spacing:2px;

text-transform:uppercase;

}



.org-row {

display:flex;

justify-content:center;

gap:45px;

flex-wrap:wrap;

margin-top:60px;

}




.org-card{
    position:relative;
    z-index:3;
    width:300px;
    min-height:255px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(199,160,82,.55);
    border-radius:28px;
    padding:92px 28px 30px;
    box-shadow:0 18px 45px rgba(61,43,32,.08);
    backdrop-filter:blur(8px);
    transition:.35s ease;
}

.org-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(61,43,32,.12);
}

/* garis aksen tipis di atas card */
.org-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    border-radius:28px 28px 0 0;
    background:linear-gradient(90deg, #c7a052, #e8d29b);
}

/* foto */
.org-card img{
     position:absolute;
    top:-42px;
    left:50%;
    transform:translateX(-50%);
    width:92px;
    height:92px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #c7a052;
    background:white;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* nama */
.org-card h4{
    font-family:'Cormorant Garamond', serif;
    font-size:24px;
    line-height:1.25;
    color:#403322;
    margin:0 0 12px;
}

/* jabatan */
.org-card p{
    color:#b28a45;
    font-weight:700;
    font-size:15px;
    line-height:1.5;
    margin:0 0 10px;
}

/* deskripsi kecil */
.org-card span{
    display:block;
    font-size:14px;
    color:#6b5a4b;
    line-height:1.7;
}



.single {

justify-content:center;

}

/* =========================
   SIMPLE HEADER ORGANIZATION
========================= */

.simple-header{

    width:90%;

    max-width:1200px;

    margin:25px auto 30px;

    padding:15px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* LOGO */

.simple-logo img{

    width:75px;

    height:auto;

}




/* BUTTON BACK */

.back-button{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:16px 35px;

    background:#17351f;

    color:white;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.back-button:hover {

    background:#c49a4a;

    transform:translateY(-3px);

}

/* =========================
   SIGNATURE FRAMEWORK
========================= */

.framework {

    display:flex;

    gap:15px;

    margin:35px 0;

    flex-wrap:wrap;

}



.framework a {

    text-decoration:none;

    background:#b8954b;

    color:white;

    padding:14px 25px;

    border-radius:40px;

    font-family:'Poppins', sans-serif;

    font-size:14px;

    text-align:center;

    transition:.3s;

}



.framework a small {

    display:block;

    font-size:10px;

    opacity:.8;

    margin-top:5px;

}



.framework a:hover {

    background:#17351f;

    transform:translateY(-4px);

}

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

.btn-signature {

    display:inline-block;

    margin-top:35px;

    padding:17px 65px;

    background:#17351f;

    color:white;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

}



.btn-signature:hover {


    background:#c49a4a;


    transform:translateY(-4px);


}



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

.hero-logo{
    width:400px;
    height:400px;
    max-width:400px;
    object-fit:contain;
    display:block;
    margin:20px auto 25px;
}


@media(max-width:768px){

.hero-logo{
    width:300px;
    height:300px;
}

}

/* =========================
FRAMEWORK DETAIL PAGE
========================= */


.framework-page{

    min-height:100vh;

    padding:160px 0 100px;

    background:url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

}


.framework-container{

    width:90%;

    max-width:1000px;

    margin:auto;

}



.framework-header{

    text-align:center;

    margin-bottom:60px;

}


.framework-label{

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#b89b5e;

}



.framework-header h1{

    font-family:'Cormorant Garamond',serif;

    font-size:75px;

    margin:20px 0;

}



.framework-header p{

    font-size:20px;

    color:#6b5a4b;

}



.framework-content{

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

    padding:60px;

    border-radius:35px;

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

}



.framework-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    color:#314331;

    margin-bottom:20px;

}



.framework-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:25px;

}



.framework-list li{

    margin-bottom:15px;

}



.framework-back{

    display:block;

    width:max-content;

    margin:45px auto;

    padding:16px 45px;

    background:#17351f;

    color:white;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

}

.framework-page{

    min-height:100vh;

    padding:160px 0 100px;

    background:url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}
.framework-container{
    width:90%;
    max-width:1000px;
    margin:auto;
}

.framework-content{

background:rgba(250,247,241,.88);

border:1px solid rgba(184,155,94,.25);

}

/* =========================
PROGRAM PAGE
========================= */


.program-page{

    min-height:100vh;

    padding:160px 0 120px;

    background:

    url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

}



.program-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}



.program-header h1{

    font-family:'Cormorant Garamond',serif;

    font-size:70px;

    color:#3d2b20;

    margin:20px 0;

}



.program-header p{

    font-size:18px;

    line-height:1.9;

    color:#6b5a4b;

}




.program-list{

    display:grid;

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

    gap:35px;

}



.program-box{

    background:rgba(250,247,241,.9);

    padding:45px 40px;

    border-radius:35px;

    text-decoration:none;

    color:#3d2b20;

    border:1px solid rgba(184,155,94,.25);

    transition:.35s;

}



.program-box:hover{

    transform:translateY(-10px);

    background:white;

}




.program-box h2{

    font-size:42px;

    margin-bottom:10px;

}



.program-box span{

    color:#b89b5e;

    font-weight:600;

    letter-spacing:.5px;

}



.program-box p{

    margin-top:20px;

    line-height:1.8;

    color:#6b5a4b;

}




@media(max-width:768px){

    .program-list{

        grid-template-columns:1fr;

    }


    .program-header h1{

        font-size:45px;

    }

}

.back-home{

    display:block;

    width:max-content;

    margin:0 auto 60px;

    padding:14px 35px;

    background:#17351f;

    color:white;

    border-radius:40px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    transition:.3s ease;

}


.back-home:hover{

    background:#b89b5e;

    transform:translateY(-4px);

}

.organization-return{

    position:absolute;

    top:40px;

    right:70px;

}

/* ===============================
 LEGACY DETAIL PAGE
================================ */


.detox-page{

    min-height:100vh;

    padding:150px 0 120px;

    background:

    url("../images/background-gold.jpg");

    background-size:cover;

    background-position:center;

}



.detox-header{

    text-align:center;

    margin-bottom:50px;

}



.detox-header h1{

    font-family:'Cormorant Garamond',serif;

    font-size:75px;

    color:#8a6734;

    margin:20px 0;

}



.detox-header p{

    font-size:20px;

    color:#6b5a4b;

}



.detox-logo{

    text-align:center;

    margin-bottom:50px;

}



.detox-logo img{

    width:220px;

    max-width:80%;

}





.detox-card{

    max-width:950px;

    margin:auto;

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

    padding:60px;

    border-radius:40px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}





.detox-card h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    color:#3d2b20;

    margin-top:35px;

    margin-bottom:20px;

}



.detox-card p{

    color:#5d5148;

    line-height:1.9;

    font-size:17px;

}





.detox-framework{

    display:grid;

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

    gap:20px;

    margin:40px 0;

}



.detox-step{

    background:#faf7f1;

    padding:30px 15px;

    text-align:center;

    border-radius:25px;

    border:1px solid rgba(184,155,94,.35);

}



.detox-step strong{

    color:#b89b5e;

    font-size:30px;

}



.detox-step h3{

    color:#17351f;

    margin:15px 0 8px;

}



.detox-step span{

    font-size:13px;

    color:#6b5a4b;

}





.price-card{

    text-align:center;

    background:#17351f;

    color:white;

    padding:35px;

    border-radius:30px;

    margin:35px 0;

}



.price-card h3{

    font-size:45px;

    color:#e7d29b;

    margin:0;

}



.price-card p{

    color:white;

}





.btn-order{

    display:block;

    width:max-content;

    margin:40px auto 0;

    padding:18px 55px;

    background:#b89b5e;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.btn-order:hover{

    background:#17351f;

}



@media(max-width:768px){


.detox-framework{

    grid-template-columns:1fr;

}


.detox-card{

    padding:30px;

}


.detox-header h1{

    font-size:50px;

}


}

/* CARD TUNGGAL: HILANGKAN GARIS HORIZONTAL */
.org-row.single::after {
    display: none !important;
}

/* CARD TUNGGAL: MATIKAN GARIS VERTIKAL BAWAAN ROW */
.org-row.single::before {
    display: none !important;
}

/* GARIS VERTIKAL KHUSUS LEVEL DENGAN SATU CARD */
.org-level:has(> .org-row.single)::before {
    display: block;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 125px;
    background: #c7a052;
    z-index: 1;
}

/* =========================================================
   HR — SOFT SCROLL REVEAL
   Reveal only when JavaScript has identified content blocks.
   Small movement + long easing keeps the effect calm.
========================================================= */
html.js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 720ms ease,
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Keep the existing Organization card hover interaction. */
html.js-reveal .org-card[data-reveal].is-visible:hover {
    transform: translate3d(0, -8px, 0);
}

/* Accessibility: no motion when the visitor requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal],
    html.js-reveal [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================
   HR — SOFT SCROLL REVEAL
========================================== */

html.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 720ms ease,
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pertahankan efek hover kartu organisasi */
html.js-reveal .org-card[data-reveal].is-visible:hover {
    transform: translateY(-8px);
}

/* Hormati pengaturan pengurangan gerakan */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal],
    html.js-reveal [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* HR — SOFT SCROLL REVEAL */
html.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 720ms ease,
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal],
    html.js-reveal [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}