/* =====================================================
   HOME PAGE
===================================================== */

/* HERO */

.hero-section{
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
}

.heroSlider{
    width:100%;
    height:520px;
}

.heroSlider .swiper-slide{
    position:relative;
}

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

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

/* HERO CONTENT */

.hero-content{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
}

.hero-content .container{
    width:100%;
}

.hero-badge{
    display:inline-block;
    background:#D4AF37;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.hero-content h1{
    color:#fff;
    font-size:58px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:20px;
}

.hero-content p{
    color:#fff;
    font-size:20px;
    max-width:620px;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-button{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-button .btn{
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
}

/* SWIPER */

.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev{
    color:#fff;
}

.heroSlider .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:#fff;
    opacity:1;
}

.heroSlider .swiper-pagination-bullet-active{
    background:#D4AF37;
}

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

.quick-menu{

margin-top:-80px;

position:relative;

z-index:100;

padding-bottom:90px;

}

.quick-card{

display:block;

background:#fff;

border-radius:20px;

padding:35px 25px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

height:100%;

color:#222;

text-decoration:none;

overflow:hidden;

position:relative;

}

.quick-card:hover{

transform:translateY(-12px);

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

color:#0F766E;

}

.quick-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:#0F766E;

}

.quick-icon{

width:90px;

height:90px;

background:#ECFDF5;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

transition:.35s;

}

.quick-card:hover .quick-icon{

background:#0F766E;

}

.quick-icon i{

font-size:40px;

color:#0F766E;

transition:.35s;

}

.quick-card:hover .quick-icon i{

color:#fff;

}

.quick-card h4{

font-size:22px;

font-weight:700;

margin-bottom:12px;

}

.quick-card p{

font-size:15px;

color:#666;

line-height:1.8;

min-height:55px;

}

.quick-card span{

display:inline-block;

margin-top:18px;

font-weight:600;

color:#0F766E;

}

.quick-card span i{

margin-left:6px;

transition:.35s;

}

.quick-card:hover span i{

transform:translateX(6px);

}

/* ==========================================
WELCOME PREMIUM
========================================== */

.welcome-section{

    position:relative;

    padding:110px 0;

    background:linear-gradient(180deg,#ffffff 0%,#f8fbfa 100%);

    overflow:hidden;

}

.welcome-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#0F766E10;

    border-radius:50%;

    top:-180px;

    right:-120px;

}

.welcome-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:#D4AF3715;

    border-radius:50%;

    bottom:-120px;

    left:-80px;

}

.section-subtitle{

    display:inline-block;

    padding:9px 20px;

    border-radius:50px;

    background:#ECFDF5;

    color:#0F766E;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-title{

    font-size:42px;

    font-weight:800;

    color:#0F766E;

    line-height:1.3;

    margin-bottom:15px;

}

.title-line{

    width:90px;

    height:4px;

    background:#D4AF37;

    border-radius:10px;

    margin-bottom:30px;

}

.welcome-quote{

    display:flex;

    gap:18px;

    padding:20px 25px;

    background:#ffffff;

    border-left:5px solid #D4AF37;

    border-radius:15px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    margin-bottom:30px;

}

.welcome-quote i{

    font-size:34px;

    color:#D4AF37;

}

.welcome-quote span{

    color:#555;

    font-style:italic;

    line-height:1.8;

}

.welcome-section p{

    color:#555;

    line-height:2;

    font-size:17px;

    text-align:justify;

}

.welcome-section p:first-of-type::first-letter{

    font-size:48px;

    font-weight:700;

    color:#0F766E;

    float:left;

    line-height:1;

    margin-right:8px;

}

.welcome-photo{

    position:relative;

    text-align:center;

}

.photo-circle{

    position:absolute;

    width:360px;

    height:360px;

    background:#D4AF3720;

    border-radius:50%;

    left:50%;

    top:50%;

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

}

.welcome-photo img{

    position:relative;

    z-index:2;

    width:85%;

    border-radius:25px;

    border:8px solid #fff;

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

    transition:.45s;

}

.welcome-photo:hover img{

    transform:translateY(-10px) scale(1.03);

}

.welcome-values{

    display:flex;

    gap:18px;

    margin-top:35px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.value-item{

    flex:1;

    min-width:170px;

    background:#fff;

    border-radius:18px;

    padding:22px;

    text-align:center;

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

    transition:.35s;

}

.value-item:hover{

    transform:translateY(-8px);

}

.value-item i{

    font-size:34px;

    color:#0F766E;

    margin-bottom:12px;

    display:block;

}

.value-item span{

    font-weight:600;

    color:#444;

}

.welcome-sign{

    margin-top:20px;

    border-top:2px dashed #d9d9d9;

    padding-top:20px;

}

.welcome-sign strong{

    display:block;

    font-size:24px;

    color:#0F766E;

    margin-bottom:6px;

}

.welcome-sign span{

    color:#777;

    font-style:italic;

}

/* ==========================================
UNIT PENDIDIKAN
========================================== */

.education-section{

    background:#F8FAFC;

    padding:90px 0;

}

.education-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.education-card:hover{

    transform:translateY(-10px);

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

}

.education-image{

    overflow:hidden;

    height:260px;

}

.education-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.education-card:hover img{

    transform:scale(1.08);

}

.education-content{

    padding:30px;

}

.education-content span{

    color:#0F766E;

    font-weight:600;

    font-size:14px;

    text-transform:uppercase;

}

.education-content h3{

    margin-top:12px;

    margin-bottom:18px;

    font-size:30px;

    color:#0F766E;

    font-weight:700;

}

.education-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}

.education-content .btn{

    border-radius:40px;

    padding:12px 28px;

}

/* ==========================================
BERITA
========================================== */

.news-section{

    padding:90px 0;

    background:#fff;

}

.news-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.news-card:hover{

    transform:translateY(-10px);

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

}

.news-image{

    position:relative;

    height:240px;

    overflow:hidden;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.news-card:hover img{

    transform:scale(1.08);

}

.news-category{

    position:absolute;

    top:18px;

    left:18px;

    background:#0F766E;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.news-body{

    padding:28px;

}

.news-date{

    color:#888;

    font-size:14px;

    margin-bottom:14px;

}

.news-body h3{

    font-size:24px;

    font-weight:700;

    color:#0F766E;

    margin-bottom:16px;

    line-height:1.4;

}

.news-body p{

    color:#666;

    line-height:1.8;

}

.news-body a{

    display:inline-block;

    margin-top:18px;

    color:#0F766E;

    font-weight:600;

    text-decoration:none;

}

.news-body a i{

    margin-left:6px;

    transition:.3s;

}

.news-card:hover a i{

    transform:translateX(6px);

}


/* ==========================================
GALERI
========================================== */

.gallery-section{

    padding:90px 0;

    background:#F8FAFC;

}

.gallery-item{

    display:block;

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    position:relative;

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(15,118,110,.15);

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::after{

    opacity:1;

}

/*==========================================
CALL TO ACTION
==========================================*/

.cta-section{

    position:relative;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

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

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

}

.cta-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(15,118,110,.75);

}

.cta-section .container{

    position:relative;

    z-index:2;

}