*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

:root{

    --primary:#0B4A83;
    --primary-dark:#08345D;

    --secondary:#2E86D1;

    --bg:#EEF2F5;

    --white:#FFFFFF;

    --text:#16314F;

    --text-light:#64748B;

    --border:#DCE5EE;
}
body{
    background:#f7f9fc;
    color:var(--text);
     font-family:'Manrope',sans-serif;
}

.container{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 24px;
}



.vision-box{

    max-width:900px;
    margin:0 auto 50px;
    padding:60px;
    border-radius:25px;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#fff;
    text-align:center;

}

.vision-icon{

    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:linear-gradient(135deg,#f59e0b,#fbbf24);

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

    font-size:38px;

}

.vision-box h3{

    margin-bottom:20px;
    font-size:32px;

}

.vision-box p{

    max-width:700px;
    margin:auto;
    line-height:1.9;
    font-size:18px;

}

.mission-box{

    max-width:900px;
    margin:auto;
    background:#fff;
    border-radius:25px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.mission-box h3{

    margin-bottom:30px;
    text-align:center;

}

.mission-box ul{

    list-style:none;
    margin:0;
    padding:0;

}

.mission-box li{

    display:flex;
    align-items:flex-start;
    gap:15px;

    padding:18px 0;

    border-bottom:1px solid #eee;

    font-size:17px;

}

.mission-box li:last-child{

    border-bottom:none;

}

.mission-box li i{

    color:#10b981;
    font-size:22px;
    margin-top:2px;

}


/*=============================
SERVICE DETAIL
==============================*/

.service-detail{
    background:#f7f9fc;
    padding-bottom:80px;
}

/* HERO */

.service-hero{
    background:linear-gradient(135deg,#0F172A,#1E40AF,#2563EB);
    color:#fff;
    text-align:center;
    padding:110px 0;
}

.service-category{
    display:inline-block;
    background:rgba(255,255,255,.15);
    padding:8px 20px;
    border-radius:50px;
    font-size:14px;
    margin-bottom:20px;
    letter-spacing:1px;
}

.service-hero h1{
    font-size:52px;
    line-height:1.3;
    margin:20px auto;
    max-width:850px;
}

.service-hero p{
    max-width:700px;
    margin:20px auto 40px;
    color:#d8e4ff;
    font-size:18px;
    line-height:1.8;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 35px;
    border-radius:50px;
    background:#fff;
    color:#2563EB;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* LAYOUT */

.service-layout{
    display:grid;
    grid-template-columns:1fr 330px;
    gap:40px;
    margin-top:-70px;
    align-items:start;
}

/* CONTENT */

.service-content{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.service-cover{
    width:100%;
    height:520px;
    object-fit:cover;
}

.service-body{
    padding:45px;
}

.service-body h2{
    font-size:34px;
    margin:35px 0 20px;
}

.service-body h3{
    font-size:28px;
    margin:30px 0 15px;
}

.service-body p{
    line-height:2;
    color:#555;
    margin-bottom:22px;
    font-size:17px;
}

.service-body img{
    width:100%;
    border-radius:18px;
    margin:35px 0;
}

.service-body ul{
    padding-left:25px;
    margin:20px 0;
}

.service-body li{
    margin-bottom:12px;
    line-height:1.8;
}

.service-body blockquote{
    background:#EEF6FF;
    border-left:5px solid #2563EB;
    padding:30px;
    border-radius:15px;
    margin:35px 0;
}

/* FEATURE */

.feature-box{
    background:#F8FAFF;
    margin:40px;
    padding:35px;
    border-radius:18px;
}

.feature-box h2{
    margin-top:0;
}

.feature-box ul{
    list-style:none;
    padding:0;
    margin:25px 0 0;
}

.feature-box li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    font-size:17px;
}

.feature-box i{
    color:#2563EB;
    margin-top:3px;
}

/* CTA */

.service-cta{
    margin:40px;
    padding:45px;
    background:linear-gradient(135deg,#2563EB,#3B82F6);
    color:#fff;
    text-align:center;
    border-radius:20px;
}

.service-cta h2{
    margin:0;
    font-size:34px;
}

.service-cta p{
    color:#dce9ff;
    margin:20px 0 30px;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    color:#2563EB;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
}

.cta-btn:hover{
    background:#f5f5f5;
}

/* SIDEBAR */

.service-sidebar{
    position:sticky;
    top:100px;
}

.sidebar-box{
    background:#fff;
    border-radius:18px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.sidebar-box h3{
    margin-top:0;
    margin-bottom:20px;
}

.sidebar-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-box li{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid #eee;
}

.sidebar-box li:last-child{
    border:none;
}

.sidebar-check li{
    display:flex;
    gap:12px;
    justify-content:flex-start;
}

.sidebar-check i{
    color:#2563EB;
}

.sidebar-btn{
    display:block;
    text-align:center;
    margin-top:20px;
    padding:14px;
    border-radius:50px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.sidebar-btn:hover{
    background:#18b957;
}

/* RELATED */

.related-service{
    margin-top:80px;
}

.related-service .section-title{
    text-align:center;
    margin-bottom:40px;
}

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

.related-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
}

.related-card:hover{
    transform:translateY(-8px);
}

.related-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.related-content{
    padding:25px;
}

.related-content span{
    color:#2563EB;
    font-size:13px;
    font-weight:600;
}

.related-content h3{
    margin:15px 0;
    font-size:22px;
}

.related-content a{
    color:#2563EB;
    font-weight:700;
    text-decoration:none;
}

.related-content a:hover{
    color:#0F172A;
}

/* RESPONSIVE */

@media(max-width:992px){

.service-layout{
    grid-template-columns:1fr;
}

.service-sidebar{
    position:static;
}

.related-grid{
    grid-template-columns:repeat(2,1fr);
}

.service-cover{
    height:380px;
}

.service-hero h1{
    font-size:40px;
}

}

@media(max-width:768px){

.service-hero{
    padding:80px 0;
}

.service-hero h1{
    font-size:32px;
}

.service-body{
    padding:30px;
}

.service-body h2{
    font-size:28px;
}

.feature-box,
.service-cta{
    margin:25px;
    padding:25px;
}

.related-grid{
    grid-template-columns:1fr;
}

.service-cover{
    height:260px;
}

}


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

.about-section{

    position:relative;
    overflow:hidden;

    padding:110px 0;

    

}

/* Glow */

.about-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    left:-180px;

    background:#f59e0b;

    border-radius:50%;

    filter:blur(180px);

    opacity:.15;

}

.about-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    bottom:-150px;
    right:-150px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(180px);

    opacity:.15;

}

.about-section .container{

    position:relative;
    z-index:2;

}

.about-section .section-title h2{

    color:#B08D57;

}

.about-section .section-title p{

    color:#102A43;

}

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

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    background:#fff;

    padding:45px;

    border-radius:30px;

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

}

/*======================================
VIDEO
======================================*/

.video-box{

    position:relative;

    overflow:hidden;

    border-radius:24px;

}

.video-box img{

    width:100%;

    display:block;

    transition:.5s;

}

.video-box:hover img{

    transform:scale(1.05);

}

.play-btn{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    background:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#111827;

    font-size:42px;

    transition:.35s;

}

.play-btn:hover{

    background:#f59e0b;

    color:#fff;

    transform:translate(-50%,-50%) scale(1.08);

}

.clinic-image{

    width:100%;

    border-radius:24px;

}

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

.about-label{

    display:inline-block;

    background:#fef3c7;

    color:#b45309;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.about-content h3{

    font-size:38px;

    color:#111827;

    margin-bottom:20px;

}

.about-desc{

    color:#64748b;

    line-height:1.9;

}

.about-desc p{

    margin-bottom:18px;

}

.about-list{

    list-style:none;

    margin:35px 0;

    padding:0;

}

.about-list li{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-bottom:18px;

    font-weight:600;

    color:#111827;

}

.about-list li i{

    color:#10b981;

    font-size:20px;

    margin-top:2px;

}

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

@media(max-width:992px){

.about-wrapper{

    grid-template-columns:1fr;

    gap:40px;

    padding:30px;

}

.about-content{

    text-align:center;

}

.about-list li{

    justify-content:center;

}

.about-content h3{

    font-size:30px;

}

.play-btn{

    width:70px;
    height:70px;

    font-size:34px;

}

}

/*=========================
DOCTOR SECTION
=========================*/

.doctor-section{

    padding:120px 0;

         background:linear-gradient(
        135deg,
        #0F172A,
        #1E3A8A,
        #2563EB
    );

    background-size:cover;

    background-position:center;

    overflow:hidden;

}

.doctor-wrapper{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:60px;
        padding-bottom:80px;


}

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

.doctor-left{

    text-align:center;

}

.doctor-left img{

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

    height:auto;

    margin:auto;
    display:block;

    border-radius:30px;

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

    animation:floatDoctor 5s ease-in-out infinite;

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

.doctor-right{

    color:#fff;

}

.doctor-tag{

    display:inline-block;

    padding:10px 22px;

    background:rgba(255, 255, 255, 0.15);
    color:#fff;

    border-radius:50px;

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.doctor-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;

}


.doctor-header h2{

    font-size:30px;

    line-height:1.2;

    margin-top:15px;

    margin-bottom:25px;

    color:#B08D57;

}

.doctor-right p{

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

    line-height:1.9;

    margin-bottom:35px;

}

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

.doctor-list{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.doctor-list li{

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    font-size:18px;

}

.doctor-list i{

    color:#22c55e;

    font-size:22px;

}

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

.doctor-info{

    border-left:4px solid #3b82f6;

    padding-left:20px;

    margin-bottom:40px;

}

.doctor-info h3{

    color:#fff;

    font-size:30px;

    margin-bottom:8px;

}

.doctor-info span{

    color:#dbeafe;

}

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

.doctor-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 40px;

    background:#fff;

    color:#0f172a;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.doctor-btn:hover{

    background:#2563eb;

    color:#fff;

}

/*=========================
ANIMATION
=========================*/

@keyframes floatDoctor{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
RESPONSIVE
=========================*/
@media (max-width:992px){

.doctor-section{

    padding:70px 0;

}

.doctor-wrapper{

    display:flex;
    flex-direction:column;

    gap:30px;

    text-align:center;

    margin-bottom:80px;

}

.doctor-wrapper:last-child{

    margin-bottom:0;

}

.doctor-left{

    order:1;

}

.doctor-right{

    order:2;

}

.doctor-left img{

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

    margin:auto;

    display:block;

}

.doctor-tag{

    font-size:12px;

    padding:8px 18px;

}

.doctor-right h2{

    font-size:30px;

    line-height:1.3;

}

.doctor-right p{

    font-size:15px;

}

.doctor-list{

    margin:25px auto;

    max-width:320px;

}

.doctor-list li{

    justify-content:flex-start;

    font-size:15px;

}

.doctor-info{

    border:none;

    padding:0;

    margin-top:25px;

}

.doctor-info h3{

    font-size:24px;

}

.doctor-btn{

    width:100%;

    justify-content:center;

}

}

/*==============================
CERTIFICATE SECTION
==============================*/

.certificate-section{
    padding:110px 0;
    background:linear-gradient(180deg,#f8fbff,#eef5ff);
    position:relative;
    overflow:hidden;
}

.certificate-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(37,99,235,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(50px);
}

.certificate-section::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(59,130,246,.08);
    border-radius:50%;
    bottom:-120px;
    right:-120px;
    filter:blur(60px);
}

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

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
    position:relative;
    z-index:2;
}

.section-title span{
    display:inline-block;
    padding:8px 18px;
    background:#eaf2ff;
    color:#2563EB;
    border-radius:40px;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-title h2{
    margin:22px 0 18px;
    font-size:48px;
    font-weight:700;
    color:#0F172A;
    line-height:1.25;
}

.section-title p{
    color:#64748B;
    font-size:18px;
    line-height:1.8;
}

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

.certificate-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    position:relative;
    z-index:2;
}

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

.certificate-card{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(37,99,235,.08);
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.4s ease;
}

.certificate-card::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid transparent;
    border-radius:26px;
    transition:.4s;
}

.certificate-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 70px rgba(37,99,235,.18);
}

.certificate-card:hover::before{
    border-color:#2563EB;
}

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

.certificate-image{
    height:360px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    overflow:hidden;
}

.certificate-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.5s;
}

.certificate-card:hover img{
    transform:scale(1.06);
}

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

.certificate-content{
    padding:30px;
    text-align:center;
}

.certificate-content h3{
    font-size:22px;
    color:#0F172A;
    margin-bottom:12px;
    line-height:1.5;
}

.certificate-content p{
    color:#64748B;
    font-size:15px;
    line-height:1.7;
    margin-bottom:18px;
}

/*==============================
BADGE
==============================*/

.certificate-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:#EEF6FF;
    color:#2563EB;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}

.certificate-badge i{
    font-size:16px;
}

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

.certificate-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
    color:#2563EB;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.certificate-btn:hover{
    gap:15px;
}

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

@media(max-width:992px){

.certificate-grid{
    grid-template-columns:repeat(2,1fr);
}

.section-title h2{
    font-size:38px;
}

}

@media(max-width:768px){

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

.certificate-grid{
    grid-template-columns:1fr;
}

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

.section-title p{
    font-size:16px;
}

.certificate-image{
    height:280px;
}

}

.gallery-page{

    background:#fff;

}



/* HERO */

.gallery-hero{

    padding:120px 0;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        #111,
        #3b2a16
    );

    color:white;

}


.gallery-hero span{

    color:#B08D57;

    font-size:16px;

    letter-spacing:3px;

    font-weight:700;

}


.gallery-hero h1{

    font-size:52px;

    margin:15px 0;

}


.gallery-hero p{

    color:#ddd;

    font-size:18px;

    max-width:650px;

    margin:auto;

}




/* CONTENT */

.gallery-content{

    padding:90px 0;

}



.gallerySwiper{

    width:100%;

    overflow:hidden;

    padding:20px 10px 70px;

}



/* PENTING AGAR 3 FOTO TAMPIL */

.gallerySwiper .swiper-wrapper{

    display:flex;

}


.gallerySwiper .swiper-slide{

    flex-shrink:0;

}




/* CARD */

.gallery-item{

    height:380px;

    border-radius:30px;

    overflow:hidden;

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

}



.gallery-link{

    width:100%;

    height:100%;

    display:block;

    position:relative;

}



.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.1);

}




/* CAPTION */


.gallery-caption{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:30px;


    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

    color:white;

}



.gallery-caption h3{

    font-size:22px;

    margin:0 0 8px;

}



.gallery-caption span{

    color:#ddd;

}



/* BUTTON */

.swiper-button-next,
.swiper-button-prev{

    color:#B08D57;

}



.swiper-pagination-bullet-active{

    background:#B08D57;

}



/* RESPONSIVE */


@media(max-width:992px){


.gallery-hero h1{

    font-size:42px;

}


.gallery-item{

    height:350px;

}


}



@media(max-width:600px){


.gallery-hero{

    padding:90px 0;

}


.gallery-hero h1{

    font-size:32px;

}


.gallery-item{

    height:300px;

}


}
/* =====================================
   BLOG SECTION
===================================== */

.blog-section{

    padding:100px 0;



}



/* =====================================
   LAYOUT
===================================== */


.blog-layout{

    display:grid;

    grid-template-columns:1fr 330px;

    gap:45px;

    align-items:start;

}





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


.blog-header{

    margin-bottom:50px;

}



.blog-header span{

    display:inline-block;

    color:#B08D57;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:15px;

}



.blog-header h2{

    font-size:44px;

    line-height:1.2;

    color:#222;

    margin:0 0 15px;

}



.blog-header p{

    color:#666;

    font-size:17px;

    max-width:650px;

    line-height:1.7;

}





/* =====================================
   ARTICLE GRID
===================================== */


.blog-grid{

    display:grid;

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

    gap:35px;

}





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


.blog-card{

    background:white;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

    transition:.4s;

}



.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:

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

}




.blog-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}



.blog-card:hover img{

    transform:scale(1.08);

}




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


.blog-content{

    padding:30px;

}



.blog-meta{

    color:#B08D57;

    font-size:14px;

    margin-bottom:15px;

}



.blog-meta i{

    margin-right:7px;

}



.blog-content h3{

    font-size:23px;

    color:#222;

    line-height:1.4;

    margin:0 0 15px;

}



.blog-content p{

    color:#666;

    font-size:16px;

    line-height:1.7;

    margin-bottom:25px;


    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}



.blog-content a{

    color:#B08D57;

    font-weight:700;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}



.blog-content a:hover{

    gap:15px;

}





/* =====================================
   SIDEBAR
===================================== */


.blog-sidebar{

    position:sticky;

    top:100px;

}



.sidebar-box{

    background:white;

    padding:30px;

    border-radius:25px;

    margin-bottom:30px;

    box-shadow:

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

}



.sidebar-box h3{

    font-size:22px;

    color:#222;

    margin-bottom:25px;

    position:relative;

}



.sidebar-box h3:after{

    content:"";

    display:block;

    width:50px;

    height:3px;

    background:#B08D57;

    margin-top:10px;

}





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


.sidebar-box ul{

    list-style:none;

    padding:0;

    margin:0;

}



.sidebar-box ul li{

    margin-bottom:15px;

}



.sidebar-box ul li a{

    display:flex;

    justify-content:space-between;

    color:#555;

    text-decoration:none;

    padding:12px 15px;

    background:#faf9f6;

    border-radius:12px;

    transition:.3s;

}



.sidebar-box ul li a:hover{

    background:#B08D57;

    color:white;

    padding-left:22px;

}





/* =====================================
   POPULAR ARTICLE
===================================== */


.popular-item{

    display:flex;

    gap:15px;

    margin-bottom:20px;

    align-items:center;

}



.popular-item:last-child{

    margin-bottom:0;

}



.popular-item img{

    width:85px;

    height:75px;

    border-radius:15px;

    object-fit:cover;

}



.popular-item a{

    color:#222;

    font-size:15px;

    font-weight:600;

    line-height:1.5;

    text-decoration:none;

}



.popular-item a:hover{

    color:#B08D57;

}





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


@media(max-width:1100px){


.blog-layout{

    grid-template-columns:1fr 280px;

}



.blog-grid{

    grid-template-columns:1fr;

}



.blog-header h2{

    font-size:38px;

}


}





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


@media(max-width:768px){


.blog-layout{

    grid-template-columns:1fr;

}



.blog-sidebar{

    position:relative;

    top:auto;

}



.blog-header h2{

    font-size:32px;

}



.blog-card img{

    height:220px;

}



.blog-content{

    padding:25px;

}


}

.blog-pagination{

    margin-top:60px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.blog-pagination ul{

    display:flex;

    align-items:center;

    gap:12px;

    list-style:none;

    padding:0;

    margin:0;

}

.blog-pagination li{

    list-style:none;

}

.blog-pagination a,
.blog-pagination span{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    background:#fff;

    color:#333;

    border:1px solid #e5e5e5;

    transition:.3s;

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

}

.blog-pagination a:hover{

    background:#B08D57;

    color:#fff;

    border-color:#B08D57;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(176,141,87,.35);

}

.blog-pagination .active span{

    background:#B08D57;

    color:#fff;

    border-color:#B08D57;

    box-shadow:0 15px 30px rgba(176,141,87,.35);

}

.blog-pagination .disabled span{

    opacity:.4;

    cursor:not-allowed;

}

.blog-pagination svg{

    width:18px;

    height:18px;

}

/*=========================
ARTICLE DETAIL
=========================*/

.article-page{
    background:#f7f8fb;
    padding-bottom:80px;
}

/* HERO */

.article-hero{
     background:linear-gradient(
        135deg,
        #0F172A,
        #1E3A8A,
        #2563EB
    );
    color:#fff;
    padding:90px 0;
    text-align:center;
}

.article-category{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    padding:8px 18px;
    border-radius:50px;
    color:#fff;
    font-size:14px;
    margin-bottom:20px;
    letter-spacing:1px;
}

.article-hero h1{
    font-size:48px;
    line-height:1.25;
    max-width:900px;
    margin:20px auto;
    font-weight:700;
}

.article-meta{
    display:flex;
    justify-content:center;
    gap:30px;
    color:#ddd;
    margin-top:25px;
    flex-wrap:wrap;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}


/* LAYOUT */

.article-layout{
    display:grid;
    grid-template-columns:1fr 330px;
    gap:40px;
    margin-top:-60px;
    align-items:start;
}


/* CONTENT */

.article-content{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

}


.article-cover{

    width:100%;

    height:520px;

    object-fit:cover;

}


.article-body{

    padding:45px;

}


.article-body p{

    font-size:18px;

    color:#555;

    line-height:2;

    margin-bottom:25px;

}


.article-body h2{

    font-size:34px;

    color:#111;

    margin:45px 0 20px;

}


.article-body h3{

    font-size:28px;

    margin:35px 0 20px;

}


.article-body ul{

    margin:20px 0;

    padding-left:25px;

}


.article-body li{

    margin-bottom:12px;

    line-height:1.8;

}


.article-body img{

    width:100%;

    border-radius:18px;

    margin:35px 0;

}


.article-body blockquote{

    background:#FFF8ED;

    border-left:5px solid #B08D57;

    padding:30px;

    border-radius:15px;

    margin:40px 0;

    font-size:20px;

    font-style:italic;

    color:#444;

}


/* SHARE */

.article-share{

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 45px 45px;

}


.article-share h4{

    margin-right:15px;

}


.article-share a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f3f3f3;

    color:#444;

    transition:.3s;

    text-decoration:none;

}


.article-share a:hover{

    background:#B08D57;

    color:#fff;

}


/* SIDEBAR */

.article-sidebar{

    position:sticky;

    top:110px;

}


.sidebar-box{

    background:#fff;

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

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

}


.sidebar-box h3{

    font-size:22px;

    margin-bottom:25px;

}


.sidebar-box ul{

    list-style:none;

    padding:0;

    margin:0;

}


.sidebar-box li{

    border-bottom:1px solid #eee;

}


.sidebar-box li:last-child{

    border:none;

}


.sidebar-box a{

    display:block;

    padding:12px 0;

    color:#444;

    text-decoration:none;

    transition:.3s;

}


.sidebar-box a:hover{

    color:#B08D57;

    padding-left:10px;

}


/* POPULAR */

.popular-item{

    display:flex;

    gap:15px;

    margin-bottom:18px;

}


.popular-item img{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:12px;

    flex-shrink:0;

}


.popular-item a{

    color:#222;

    font-weight:600;

    text-decoration:none;

    line-height:1.5;

}


.popular-item a:hover{

    color:#B08D57;

}


/* RELATED */

.related-section{

    margin-top:70px;

}


.related-section h2{

    font-size:34px;

    margin-bottom:30px;

}


.related-grid{

    display:grid;

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

    gap:30px;

}


.related-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;

}


.related-card:hover{

    transform:translateY(-8px);

}


.related-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}


.related-card div{

    padding:25px;

}


.related-card h3{

    font-size:22px;

    margin-bottom:15px;

}


.related-card a{

    color:#B08D57;

    text-decoration:none;

    font-weight:600;

}


/* RESPONSIVE */

@media(max-width:992px){

.article-layout{

    grid-template-columns:1fr;

}

.article-sidebar{

    position:static;

}

.related-grid{

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

}

.article-cover{

    height:350px;

}

.article-hero h1{

    font-size:38px;

}

}

@media(max-width:768px){

.article-body{

    padding:30px;

}

.article-share{

    padding:0 30px 30px;

    flex-wrap:wrap;

}

.related-grid{

    grid-template-columns:1fr;

}

.article-cover{

    height:260px;

}

.article-hero{

    padding:70px 0;

}

.article-hero h1{

    font-size:30px;

}

.article-body h2{

    font-size:28px;

}

}
/* =========================
HEADER
========================= */
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    background:#0F4C81;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
    z-index:9999;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
}

.whatsapp-float i{
    color:#fff;
}

header{
  
    background: linear-gradient(135deg, #0f2557, #0b1b3a);
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
  border-bottom: 3px solid #B08D57;
}

.navbar{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.logo img{
    height:110px; /* sesuaikan ukuran */
    width:auto;
    display:block;
}


.menu{
    display:flex;
    gap:40px;
}

.menu a{
    position:relative;
    text-decoration:none;
    color:rgba(255,255,255,.8);
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:13px;
    transition:.4s;
}

.menu a:hover{
    color:#fff;
    text-shadow:
        0 0 10px rgba(255,255,255,.4),
        0 0 20px rgba(255,255,255,.2);
}

.menu a::before{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.15);
}

.menu a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:1px;
    background:#fff;
    transition:.4s ease;
}

.menu a:hover::after,
.menu a.active::after{
    width:100%;
}


.menu-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.menu{
    display:flex;
    gap:35px;
}

.menu a{
    position:relative;
    text-decoration:none;
    color:rgba(255,255,255,.85);
    font-weight:600;
    transition:.3s;
}

.menu a:hover{
    color:#fff;
}

.menu a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#fff;
    transition:.3s;
}

.menu a:hover::after{
    width:100%;
}

/* SOCIAL */

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

.social-icons a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    transition:.35s;
}

.social-icons a:hover{
    transform:translateY(-4px);
    background:#fff;
    color:#0f172a;
    box-shadow:
        0 10px 25px rgba(255,255,255,.25);
}

.social-icons i{
    font-size:18px;
}

.btn-primary{
    background:var(--primary);
    color:white;
    border:none;
    border-radius:12px;
    padding:14px 24px;
    cursor:pointer;
}

.mobile-btn{
    display:none;
    font-size:20px;
    cursor:pointer;
    color:#fff;
}

/* ===================================
   HERO PREMIUM DERMALIGHT
=================================== */
.hero{
    position:relative;
    overflow:hidden;
    min-height:90vh;
    display:flex;
    align-items:center;
    padding:120px 0 180px;

    background:
        linear-gradient(
            rgba(248,250,252,.85),
            rgba(248,250,252,.85)
        ),
        url("../images/hero-bg.png");

background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

/* Glow Background */

.hero::before{

    content:'';

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(15,76,129,.10),
        transparent 70%
    );

    right:-300px;
    top:-300px;
}

.hero::after{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(45,125,210,.08),
        transparent 70%
    );

    left:-200px;
    bottom:-200px;
}

/* Layout */

.hero-wrap{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:80px;

    align-items:center;
}

.hero-gold{

    color:#B08D57;;

}

.hero h1{

    font-size:clamp(
        40px,
        4.2vw,
        34px
    );

    line-height:1.15;

    font-weight:800;

    color:#0F4C81;

    letter-spacing:-1.5px;

    margin-bottom:20px;

    max-width:720px;
}

.hero h3{

    font-size:20px;

    font-weight:600;

      color:#102A43;


    margin-bottom:20px;

    line-height:1.5;
}

.hero p{

    font-size:17px;

    line-height:1.8;

    color:#52606D;

    max-width:560px;

    margin-bottom:35px;
}

@media(max-width:768px){

    .hero h1{

        font-size:28px;

        line-height:1.1;

        letter-spacing:-1px;
    }

    .hero h3{

        font-size:18px;
    }

    .hero p{

        font-size:16px;
    }

}
/* Buttons */
.hero-buttons{

    display:flex;

    gap:16px;

    margin-bottom:40px;
}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

     background: linear-gradient(135deg, #0f2557, #0b1b3a);
      border:3px solid #B08D57;

    color:white;

    padding:18px 34px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 20px 40px
    rgba(
        15,76,129,.25
    );
}

.btn-primary:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 30px 60px
    rgba(
        15,76,129,.35
    );
}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:white;

   border:3px solid #B08D57;

    color:#0F4C81;

    padding:18px 34px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.btn-outline:hover{

    background:#f8fafc;
}
/* Features */
.hero-icons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.hero-icon-item::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(
            15,
            76,
            129,
            .8
        ),
        transparent
    );

    opacity:0;

    transition:.35s;
}
.hero-icon-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 22px;

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

    backdrop-filter:
    blur(16px);

    -webkit-backdrop-filter:
    blur(16px);

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

    border-radius:18px;

    box-shadow:
    0 10px 30px rgba(
        15,
        23,
        42,
        .05
    ),
    0 1px 0 rgba(
        255,
        255,
        255,
        .8
    ) inset;

    transition:
    all .35s ease;

    overflow:hidden;
}

.hero-icon-item:hover{

    transform:
    translateY(-6px);

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

    box-shadow:
    0 20px 40px rgba(
        15,
        76,
        129,
        .12
    );

    border-color:
    rgba(
        15,
        76,
        129,
        .12
    );
}

.hero-icon-item:hover::before{

    opacity:1;
}

.hero-icon-item img{

    width:26px;

    height:26px;
}

.hero-icon-item i{

    width:20px;
    height:20px;

    display:flex;

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

    font-size:22px;

    color:#1164ad;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        rgba(
            15,
            76,
            129,
            .12
        ),
        rgba(
            45,
            125,
            210,
            .05
        )
    );

    transition:.35s;
}

.hero-icon-item small{

    color:#B08D57;
}
/* Hero Image */
.hero-image{

    position:relative;

    
}

.hero-image::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        rgba(
            15,
            76,
            129,
            .15
        ),
        rgba(
            45,
            125,
            210,
            .05
        )
    );

    transform:
    rotate(-4deg);

    top:20px;

    left:20px;
}

.hero-image img{

    
    position:relative;

    z-index:2;

    width:100%;

    display:block;

    border-radius:40px;

    box-shadow:
    0 40px 90px
    rgba(
        16,
        42,
        67,
        .15
    );
}

/* Floating Card */
.hero-card{

    position:absolute;

    left:-30px;

    bottom:30px;

    z-index:3;

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

    backdrop-filter:
    blur(12px);

    border-radius:20px;

    padding:20px 24px;

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

.hero-card h4{

    font-size:34px;

    color:#0F4C81;

    font-weight:800;

    margin-bottom:5px;
}

.hero-card p{

    margin:0;

    color:#64748B;
}

@media(max-width:768px){

    .hero-icon-item{

        width:100%;

        justify-content:flex-start;

        padding:15px 18px;
    }

    .hero-icon-item i{

        width:42px;
        height:42px;

        font-size:20px;
    }
}
/* =========================
STATS
========================= */

.stats{

    position:relative;

    margin-top:-110px;

    z-index:50;
}

.stats-grid{

    background: linear-gradient(135deg, #0f2557, #0b1b3a);

    border:3px solid #B08D57;
    border-radius:24px;

    overflow:hidden;

    display:grid;

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

    box-shadow:
    0 25px 60px rgba(
        15,76,129,.25
    );
}

.stat{

    text-align:center;

    padding:35px 25px;

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

    transition:
    all .35s ease;
}

.stat:last-child{

    border-right:none;
}

.stat:hover{

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

    backdrop-filter:
    blur(10px);

    transform:
    translateY(-5px);
}
.stat:hover .stat-icon{

    transform:
    scale(1.08);

    background:
    linear-gradient(
        135deg,
        rgba(
            255,
            255,
            255,
            .22
        ),
        rgba(
            255,
            255,
            255,
            .08
        )
    );
}

.stat-icon{

    transition:
    all .35s ease;
}

.stat-icon{

    width:70px;
    height:70px;

    margin:0 auto 18px;

    display:flex;

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

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(45,125,210,.08)
    );
}

.stat-icon i{

    font-size:32px;

    color:#ffffff;
}
.stat h2{

    color:#fff;

    font-size:42px;

    font-weight:800;

    margin-bottom:8px;

    transition:
    all .35s ease;
}

.stat:hover h2{

    transform:
    scale(1.05);
}

.stat p{

    color:#fff;

    font-size:15px;

    margin:0;
}
/* =========================
SECTION
========================= */

.section{
    padding:25px 0;
}
.section-title{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;
}

.section-tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        rgba(15,76,129,.08),
        rgba(45,125,210,.05)
    );

    color:#1f5eff;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    border:
    1px solid rgba(
        15,
        76,
        129,
        .08
    );

    margin-bottom:18px;
}
.section-title h2{

    font-size:
    clamp(
        24px,
        2.8vw,
        36px
    );

    font-weight:700;

    line-height:1.3;

    color:#B08D57;

    margin-bottom:12px;
}

.section-title p{

    font-size:16px;

    color:#64748B;

    line-height:1.8;

    max-width:600px;

    margin:auto;
}

/* =========================
SERVICES
========================= */
.services{

    display:grid;

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

    gap:30px;
}

.card{

    position:relative;

    background: linear-gradient(135deg, #0f2557, #0b1b3a);

    padding:40px;

    border-radius:32px;

    border:3px solid #B08D57;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:
    0 15px 40px rgba(
        15,
        23,
        42,
        .05
    );
}

.card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 30px 70px rgba(
        15,
        76,
        129,
        .12
    );
}

.service-badge{

    position:absolute;

    top:25px;
    right:25px;

    padding:8px 14px;

    border-radius:50px;

    background:#fff;

    color:#0F4C81;

    font-size:12px;

    font-weight:700;
}

.service-badge.premium{

    background:#fff;

    color:#B08D57;
}
.service-icon{

    width:80px;
    height:80px;

    display:flex;

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

    border-radius:22px;

    margin-bottom:25px;

     background: linear-gradient(
        135deg,
        #F7E7A1 0%,
        #D4AF37 35%,
        #B08D57 70%,
        #8C6A2F 100%
    );
}

.service-icon i{

    color:#fff;

    font-size:34px;
}
.card h3{

    font-size:28px;

    line-height:1.05;

    font-weight:800;


    color:#B08D57;;



    margin-bottom:15px;
}
.card p{

    color:#fff;

    line-height:1.9;

    margin-bottom:25px;
}
.service-list{

    list-style:none;

    padding:0;

    margin:0 0 30px;
}

.service-list li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 0;

    color:#fff;

    border-bottom:
    1px solid #eef2f7;
}

.service-list i{

    color:#fff;

    font-size:16px;
}
.service-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#B08D57;;

    font-weight:700;

    transition:.3s;
}

.service-btn i{

    transition:.3s;
}

.service-btn:hover i{

    transform:
    translateX(5px);
}

@media(max-width:991px){

    .services{

        grid-template-columns:1fr;
    }

    .card{

        padding:30px;
    }

    .card h3{

        font-size:24px;
    }

}
/* =========================
BEFORE AFTER PREMIUM
========================= */

.results-wrapper{

    position:relative;
}

.results{

    display:flex;

    gap:30px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:10px;
}

.results::-webkit-scrollbar{
    display:none;
}

/* CARD */

.result{

    min-width:calc(
        (100% - 60px) / 3
    );

    flex-shrink:0;

    background:white;

    border-radius:24px;

    overflow:hidden;

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

    transition:.3s;
}

.result:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(
        15,23,42,.12
    );
}

/* IMAGES */

.result-images{

    display:grid;

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

.result-images img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;

    transition:.4s;
}

.result:hover img{

    transform:scale(1.05);
}

/* LABEL */

.result-label{

    display:grid;

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

.before{

    background:#f8fafc;

    padding:14px;

    text-align:center;

    font-weight:700;
}

.after{

    background:#eef4ff;

    color:#1f5eff;

    padding:14px;

    text-align:center;

    font-weight:700;
}

/* INFO */

.result-info{

    padding:24px;
    background:#0F4C81 ;
}

.result-info h4{

    color:#fff;

    margin-bottom:8px;
     text-align:center;

    font-size:20px;

}

.result-info p{

    color:#fff;
     text-align:center;

    line-height:1.7;
}

/* NAVIGATION */

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:white;

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

    cursor:pointer;

    z-index:100;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.prev{
    left:15px;
}

.next{
    right:15px;
}

.slider-btn:hover{

    background:#1f5eff;

    color:white;
}

/* TABLET */

@media(max-width:991px){

    .result{

        min-width:calc(
            (100% - 20px) / 2
        );
    }

    .result{

        flex:0 0 calc(
            50% - 15px
        );
    }

}

/* MOBILE */

@media(max-width:768px){

    .results{

        gap:20px;

        padding:0 15px;
    }

    .result{

        min-width:100%;
    }

    .result{

        flex:0 0 100%;
    }
    .slider-btn{

        width:42px;

        height:42px;
    }

    .prev{
        left:5px;
    }

    .next{
        right:5px;
    }

}

/* =========================
WHY US PREMIUM
========================= */

.why-section{

    background:#f7f9fc;
}

.why-section .section-title{

    margin-bottom:40px;
}


.why-grid{

    display:grid;

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

    gap:30px;
}
.why-item{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:22px;

    padding:40px 25px;

    background: linear-gradient(135deg, #0f2557, #0b1b3a);


    border:3px solid #B08D57;

    border-radius:30px;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:
    0 20px 50px rgba(
        15,
        76,
        129,
        .18
    );
}.why-item span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:72px;

    padding:14px 20px;

    border-radius:18px;
    color:#fff;

    font-size:14px;

    font-weight:700;

    line-height:1.6;


}
.why-icon{

    width:90px;
    height:90px;

    display:flex;

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

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        rgba(255,255,255,.05)
    );

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

    backdrop-filter:
    blur(10px);

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

.why-icon i{

    font-size:42px;

    color:#ffffff;
}

/* =========================
PROCESS PREMIUM
========================= */


.process-section{

    background:#fff;

    position:relative;
}

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    background:#eef4ff;

    color:#1f5eff;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    margin-bottom:15px;
}

.process{

    position:relative;

    display:grid;

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

    gap:30px;

    margin-top:50px;
}

/* garis */

.process::before{

    content:'';

    position:absolute;

    top:90px;

    left:10%;

    right:10%;

    border-top:
    2px dashed #1f5eff;

    z-index:1;
}

/* item */

.step{

    position:relative;

    z-index:2;

    text-align:center;

    transition:.3s;
}



.step:hover{

    transform:
    translateY(-8px);
}

/* angka */

.step-number{

    width:42px;

    height:42px;

    margin:auto;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #1f5eff,
        #4d7fff
    );

    color:white;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    box-shadow:
    0 10px 25px rgba(
        31,94,255,.25
    );
}

/* icon lingkaran */

.step-icon{

    width:70px;
  font-size:18px;
    height:70px;
color: #fff;
    margin:auto;

    border-radius:50%;

    background:#0F4C81;

    border:2px solid #dbe7ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    box-shadow:
    0 15px 35px rgba(
        15,37,87,.08
    );

    transition:.3s;
}

.step:hover .step-icon{

    transform:scale(1.05);

    border-color:#1f5eff;

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



.step h3{

    font-size:24px;

    font-weight:700;

    color:#B08D57;

    margin-bottom:12px;
}

.step p{

    font-size:15px;

    line-height:1.8;

    color:#64748b;

    max-width:240px;

    margin:auto;
}

@media(max-width:991px){

.process{

    display:block;

    position:relative;

    padding-left:40px;
}

.process::before{

    display:block;

    content:'';

    position:absolute;

    left:55px;

    top:0;

    bottom:0;

    width:2px;

    background:#dbe7ff;

    border:none;
}

.step{

    position:relative;

    text-align:left;

    margin-bottom:50px;

    padding-left:80px;
}

.step-number{

    position:absolute;

    left:-10px;

    top:0;
}

.step-icon{

    position:absolute;

    left:0;

    top:40px;

    width:50px;

    height:50px;
}

.step-icon img{

    width:50px;
    height:50px;
}

.step h3{

    font-size:20px;

    margin-bottom:10px;
}

.step p{

    max-width:100%;
}
}

.step{

    animation:
    fadeUp .8s ease forwards;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

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

.testimonials-section{
    background:#f8fafc;
    padding:0px 0;
}

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

.testimonial-slider{
    overflow:hidden;
    margin-top:40px;
}

/* =========================
TRACK (ANIMATION CORE)
========================= */

.testimonial-track{
    display:flex;
    gap:25px;
    transition:transform .6s ease;
}

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

.testimonial{
    min-width:350px;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:transform .3s ease;
}

.testimonial:hover{
    transform:translateY(-5px);
}

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

.stars{
    color:#fbbf24;
    margin-bottom:20px;
    font-size:18px;
}

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

.testimonial p{
    color:#64748b;
    line-height:1.7;
    margin-bottom:15px;
}

.testimonial h4{
    color:#0f2557;
    font-weight:600;
}

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

@media (max-width: 768px){
    .testimonial{
        min-width:280px;
    }
}

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

.location-section{
    background:#f8fafc;
    
}

/* =========================
WRAP
========================= */

.location-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:stretch;
}

/* =========================
INFO CARD
========================= */
.location-info{
   background: linear-gradient(135deg, #0f2557, #0b1b3a);
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
    border-radius:20px;
    border:3px solid #B08D57;
}

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

.clinic-logo img{
    width:auto;
    height:200px;
    object-fit:contain;
    filter:drop-shadow(0 10px 20px rgba(13,110,253,.15));
}

.location-info h3{
    color:#fff;
    text-align:center;
    margin-bottom:15px;
    font-size:28px;
    font-weight:700;
}

.location-info p{
    color:#fff;
    line-height:1.7;
    margin-bottom:20px;
    text-align:center;
}
/* =========================
LIST INFO
========================= */

.location-info ul{
    list-style:none;
    padding:0;
    margin:0 0 20px 0;
}

.location-info ul li{
    padding:8px 0;
    color:#fff;
    font-size:15px;
}

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

.location-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* PRIMARY BUTTON */
.btn{
    display:inline-block;
    padding:12px 16px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
    font-size:14px;
}

/* BLUE */
.btn.primary{
    background:#1f5eff;
    color:#fff;
}

.btn.primary:hover{
    background:#0f4ae6;
}

/* OUTLINE */
.btn.secondary{
    background:#eef4ff;
    color:#1f5eff;
}

.btn.secondary:hover{
    background:#dbe7ff;
}

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

.location-map{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.1);
    height:100%;
}

.location-map iframe{
    width:100%;
    height:100%;
    min-height:580px;
    border:none;
    display:block;
}
/* =========================
RESPONSIVE
========================= */

@media (max-width: 992px){
    .location-wrap{
        grid-template-columns:1fr;
    }

    .location-map iframe{
        height:320px;
    }
}
/* =========================
FAQ SECTION
========================= */
/* =========================
FAQ SECTION
========================= */

.faq-section{
    background:#f8fafc;
    padding:80px 0;
}

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

.faq-wrap{
    display:grid;
    grid-template-columns:1fr 450px;
    gap:60px;
    align-items:start;
}

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

.faq-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

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

.faq{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:3px solid #0F4C81;

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

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

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

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

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

.faq-question{
    padding:22px 25px;

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

    cursor:pointer;

    font-weight:600;
    font-size:16px;
    color:#0f2557;

    user-select:none;
}

.faq-question span:first-child{
    flex:1;
}

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

.faq-icon{
    width:34px;
    height:34px;

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

    flex-shrink:0;

    border-radius:50%;

    background:#eef4ff;
    color:#1f5eff;

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

    transition:all .3s ease;
}

.faq.active .faq-icon{
    transform:rotate(45deg);

    background:#1f5eff;
    color:#fff;
}

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

.faq-answer{
    max-height:0;

    overflow:hidden;

    padding:0 25px;

    color:#64748b;
    line-height:1.8;

    transition:
        max-height .4s ease,
        padding .4s ease;
}

.faq.active .faq-answer{
    max-height:1000px;

    padding:0 25px 25px;
}

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

.faq-slider{
    position:sticky;
    top:120px;

    overflow:hidden;

    border-radius:30px;

    box-shadow:
        0 25px 60px rgba(15,37,87,.15);
}

/* =========================
SLIDES
========================= */

.faq-slides{
    display:flex;

    width:400%;

    animation:faqSlide 16s infinite;

    will-change:transform;
}

.faq-slides img{
    width:25%;

    height:620px;

    object-fit:cover;

    flex-shrink:0;

    display:block;
}

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

@keyframes faqSlide{

    0%,20%{
        transform:translateX(0);
    }

    25%,45%{
        transform:translateX(-25%);
    }

    50%,70%{
        transform:translateX(-50%);
    }

    75%,95%{
        transform:translateX(-75%);
    }

    100%{
        transform:translateX(0);
    }

}

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

@media(max-width:992px){

    .faq-wrap{
        grid-template-columns:1fr;
        gap:40px;
    }

    .faq-slider{
        position:static;
        order:-1;
    }

    .faq-slides img{
        height:420px;
    }

}

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

@media(max-width:576px){

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

    .faq-question{
        padding:18px 20px;
        font-size:15px;
    }

    .faq-answer{
        font-size:14px;
    }

    .faq.active .faq-answer{
        padding:0 20px 20px;
    }

    .faq-slides img{
        height:280px;
    }

}

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

.cta{
    margin:80px 0;
}

.cta-box{
    background: linear-gradient(135deg, #0f2557, #0b1b3a);
    color:white;
    border-radius:30px;
    padding:70px;
    text-align:center;
    border: 3px solid #B08D57;
}

.cta h2{
    font-size:42px;
    margin-bottom:20px;
}


.consultation-section{
    background:#f8fafc;
}

.consultation-box{
    max-width:700px;
    margin:auto;
     background:linear-gradient(135deg, #0f2557, #0b1b3a);
    padding:50px;
    border-radius:28px;
      border:3px solid #B08D57;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    
    border:3px solid linear-gradient(135deg, #0f2557, #0b1b3a);
}

.consultation-header{
    text-align:center;
    margin-bottom:35px;
}

.consultation-header h2{
    margin:15px 0;
    color:#B08D57;
}

.consultation-header p{
    color:#fff;
    line-height:1.8;
}

.consultation-wa{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;
    margin-bottom:30px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #25D366,
        #1DA851
    );

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

.consultation-wa i{
    font-size:40px;
}

.consultation-wa strong{
    display:block;
}

.consultation-wa span{
    opacity:.9;
    font-size:14px;
}

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

.form-group label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:#fff;
}

.form-group input,
.form-group select{
    width:100%;
    padding:15px 18px;

    border:1px solid #dbe4f0;
    border-radius:14px;

    font-size:15px;
    outline:none;

    transition:.3s;
}

.form-group input:focus,
.form-group select:focus{
    border-color:#0F4C81;
    box-shadow:0 0 0 4px rgba(15,76,129,.1);
}

.btn-submit{
    width:100%;
    padding:16px;

    border:none;
    border-radius:14px;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #B08D57
    );

    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;

    transition:.3s;
}

.btn-submit:hover{
    transform:translateY(-2px);
}

@media(max-width:768px){

    .consultation-box{
        padding:30px 25px;
    }

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

.footer {
    background: linear-gradient(135deg, #0f2557, #0b1b3a);
    color: #fff;
    padding: 60px 0 20px;
    position: relative;
    border-top: 3px solid #B08D57;
}

/* container */
.footer .container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

/* top layout */
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* brand */
.footer-brand h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.footer-brand p {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 300px;
}

/* contact */
.footer-contact h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    opacity: 0.85;
    transition: 0.3s;
    font-size: 14px;
}

.footer-contact a:hover {
    opacity: 1;
    transform: translateX(5px);
}

/* SOCIAL MEDIA */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: rgba(255,255,255,0.08);

    color: #fff;
    font-size: 16px;

    transition: 0.3s;
}

.footer-social a:hover {
    background: #fff;
    color: #0f2557;
    transform: translateY(-4px);
}

/* bottom */
.footer-bottom {
    text-align: center;
    padding-top: 15px;
    font-size: 13px;
    opacity: 0.7;
}

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

@media (max-width: 768px) {

    .footer-top {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .footer-brand p {
        margin: auto;
    }

    .footer-contact a {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }
}
/* =========================
MOBILE
========================= */

@media(max-width:991px){

.menu{
    position:fixed;
    top:80px;
    left:-100%;
    width:100%;
   background: linear-gradient(135deg, #0f2557, #0b1b3a);
    flex-direction:column;
    padding:30px;
    transition:.3s;
}

.menu.active{
    left:0;
}

.mobile-btn{
    display:block;
}

/* SOCIAL MEDIA */

.mobile-social{

    margin-top:auto;

    width:100%;

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

    gap:15px;

    padding-top:25px;


}

.mobile-social a{

    width:50px;
    height:50px;

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

    border-radius:50%;

    color:#fff;

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

    backdrop-filter:blur(10px);

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

    transition:.3s ease;
}

.mobile-social a:hover{

    transform:translateY(-4px);

    background:#fff;

    color:#0F4C81;

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

.mobile-social i{
    font-size:20px;
}


.hero-wrap,
.faq-wrap{
    grid-template-columns:1fr;
}

.hero h1{
    font-size:42px;
}

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

.services,
.results,
.testimonials{
    grid-template-columns:1fr;
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

.process{
    grid-template-columns:1fr;
}

.cta-box{
    padding:40px 25px;
}

.cta h2{
    font-size:30px;
}



}