/* ==========================================================
   PROFIL YAYASAN
   V1.0
========================================================== */

:root{

    --primary:#0F766E;
    --secondary:#D4AF37;
    --dark:#163020;
    --light:#F8FAFC;
    --radius:22px;
    --shadow:0 15px 40px rgba(0,0,0,.08);

}


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

.profile-hero{

    position:relative;

    min-height:460px;

    display:flex;

    align-items:center;

    background:url("../images/hero/profile-banner.jpg") center/cover;

    overflow:hidden;

}

.profile-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(15,118,110,.82),
        rgba(8,44,39,.88)
    );

}

.profile-hero .container{

    position:relative;

    z-index:2;

}

.profile-hero-content{

    max-width:760px;

    color:#fff;

}

.hero-badge{

    display:inline-block;

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

    padding:10px 22px;

    border-radius:40px;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:25px;

}

.profile-hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:20px;

}

.profile-hero p{

    font-size:19px;

    line-height:1.9;

    margin-bottom:28px;

    max-width:620px;

}

.breadcrumb-custom{

    display:flex;

    gap:10px;

    align-items:center;

    flex-wrap:wrap;

}

.breadcrumb-custom a{

    color:#FFD54A;

    text-decoration:none;

}

.breadcrumb-custom span{

    color:#fff;

}

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

.about-foundation{

    padding:110px 0;

    background:#fff;

}

.foundation-logo{

    width:230px;

    margin:auto;

}

.section-subtitle{

    display:inline-block;

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.section-title{

    font-size:42px;

    font-weight:800;

    color:var(--dark);

    margin-bottom:25px;

}

.about-foundation p{

    color:#555;

    line-height:2;

    margin-bottom:18px;

}

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

@media(max-width:991px){

.profile-hero{

min-height:360px;

padding:90px 0 70px;

}

.profile-hero h1{

font-size:40px;

}

.profile-hero p{

font-size:16px;

}

.about-foundation{

padding:70px 0;

}

.foundation-logo{

width:170px;

margin-bottom:35px;

}

.section-title{

font-size:30px;

}

}

@media(max-width:576px){

.profile-hero{

min-height:320px;

}

.profile-hero h1{

font-size:30px;

}

.hero-badge{

font-size:11px;

padding:8px 16px;

}

.section-title{

font-size:26px;

}

}

/* ==========================================================
   CHAIRMAN SECTION
========================================================== */

.chairman-section{

    padding:100px 0;

    background:#f8fafc;

}

.chairman-photo{

    position:relative;

    display:inline-block;

}

.chairman-photo img{

    width:100%;

    max-width:340px;

    border-radius:24px;

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

    transition:.35s;

}

.chairman-photo img:hover{

    transform:translateY(-6px);

}

.chairman-quote{

    position:relative;

    margin:30px 0;

    padding:25px 30px;

    border-left:5px solid var(--secondary);

    background:#fff;

    border-radius:18px;

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

}

.chairman-quote i{

    color:var(--secondary);

    font-size:34px;

    margin-bottom:12px;

}

.chairman-quote p{

    margin:0;

    font-size:18px;

    font-style:italic;

    line-height:1.9;

}

.chairman-sign{

    margin-top:35px;

}

.chairman-sign h4{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:var(--dark);

}

.chairman-sign span{

    color:#666;

    font-size:15px;

}



/* ==========================================================
   TIMELINE
========================================================== */

.timeline-section{

    padding:110px 0;

    background:#ffffff;

}

.timeline{

    position:relative;

    max-width:850px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:110px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(

        var(--secondary),

        var(--primary)

    );

}

.timeline-item{

    position:relative;

    display:flex;

    gap:40px;

    margin-bottom:70px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-year{

    width:110px;

    min-width:110px;

    text-align:center;

    font-size:20px;

    font-weight:700;

    color:var(--primary);

    position:relative;

}

.timeline-year::after{

    content:"";

    position:absolute;

    right:-21px;

    top:8px;

    width:20px;

    height:20px;

    background:var(--secondary);

    border:5px solid #fff;

    border-radius:50%;

    box-shadow:0 0 0 3px var(--secondary);

}

.timeline-content{

    flex:1;

    background:#fff;

    padding:28px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-5px);

}

.timeline-content h4{

    margin-bottom:14px;

    font-size:24px;

    color:var(--dark);

}

.timeline-content p{

    color:#666;

    line-height:1.9;

    margin:0;

}



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

@media(max-width:991px){

.chairman-section{

padding:70px 0;

}

.chairman-photo{

text-align:center;

margin-bottom:40px;

}

.chairman-photo img{

max-width:260px;

}

.chairman-quote{

padding:20px;

}

.chairman-quote p{

font-size:16px;

}

.timeline::before{

left:24px;

}

.timeline-item{

gap:25px;

}

.timeline-year{

width:50px;

min-width:50px;

font-size:16px;

text-align:left;

}

.timeline-year::after{

left:15px;

right:auto;

}

.timeline-content{

padding:20px;

}

.timeline-content h4{

font-size:20px;

}

}

@media(max-width:576px){

.timeline-section{

padding:60px 0;

}

.timeline-content{

padding:18px;

}

.timeline-content h4{

font-size:18px;

}

.timeline-content p{

font-size:14px;

}

.chairman-sign h4{

font-size:20px;

}

}

/* ==========================================================
   VISION
========================================================== */

.vision-section{

    padding:110px 0;

    background:linear-gradient(135deg,#0F766E,#0B5D56);

}

.vision-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.vision-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    color:#FFD54A;

}

.vision-box .section-subtitle{

    color:#FFD54A;

}

.vision-box h2{

    font-size:42px;

    line-height:1.5;

    font-weight:700;

}



/* ==========================================================
   MISSION
========================================================== */

.mission-section{

    padding:110px 0;

    background:#F8FAFC;

}

.mission-card{

    height:100%;

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.mission-card:hover{

    transform:translateY(-8px);

}

.mission-icon{

    width:82px;

    height:82px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#E8F5F4;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--primary);

}

.mission-card h4{

    margin-bottom:18px;

    color:var(--dark);

    font-size:24px;

}

.mission-card p{

    color:#666;

    line-height:1.9;

}



/* ==========================================================
   VALUES
========================================================== */

.values-section{

    padding:110px 0;

    background:#ffffff;

}

.value-card{

    height:100%;

    background:#fff;

    border-radius:22px;

    padding:35px 20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-6px);

    background:var(--primary);

}

.value-card i{

    font-size:42px;

    color:var(--secondary);

    margin-bottom:18px;

    transition:.35s;

}

.value-card h5{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:var(--dark);

    transition:.35s;

}

.value-card:hover h5{

    color:#fff;

}

.value-card:hover i{

    color:#FFD54A;

}



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

@media(max-width:991px){

.vision-section{

padding:70px 0;

}

.vision-icon{

width:70px;

height:70px;

font-size:32px;

margin-bottom:20px;

}

.vision-box h2{

font-size:30px;

line-height:1.45;

}

.mission-section{

padding:70px 0;

}

.mission-card{

padding:30px 22px;

}

.mission-card h4{

font-size:22px;

}

.values-section{

padding:70px 0;

}

.value-card{

padding:28px 18px;

}

}

@media(max-width:576px){

.vision-box h2{

font-size:24px;

}

.mission-card{

padding:24px 18px;

}

.mission-card h4{

font-size:20px;

}

.mission-card p{

font-size:14px;

}

.value-card i{

font-size:34px;

}

.value-card h5{

font-size:16px;

}

}

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

.unit-section{

    padding:110px 0;

    background:#F8FAFC;

}

.unit-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.unit-card:hover{

    transform:translateY(-8px);

}

.unit-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.45s;

}

.unit-card:hover img{

    transform:scale(1.05);

}

.unit-content{

    padding:32px;

}

.unit-content span{

    display:inline-block;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:14px;

}

.unit-content h3{

    font-size:30px;

    margin-bottom:18px;

    color:var(--dark);

}

.unit-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:28px;

}

.unit-content .btn{

    border-radius:50px;

    padding:12px 30px;

    font-weight:600;

}


/* ==========================================================
   FACTS
========================================================== */

.facts-section{

    padding:100px 0;

    background:#ffffff;

}

.fact-card{

    background:#fff;

    border-radius:22px;

    padding:35px 20px;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.fact-card:hover{

    transform:translateY(-6px);

}

.fact-card h2{

    color:var(--primary);

    font-size:48px;

    font-weight:800;

    margin-bottom:12px;

}

.fact-card p{

    margin:0;

    color:#666;

    font-size:16px;

}


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

.profile-cta{

    position:relative;

    padding:120px 0;

    background:

    linear-gradient(

        rgba(15,118,110,.90),

        rgba(9,74,67,.90)

    ),

    url("../images/hero/profile-banner.jpg")

    center/cover;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.cta-box span{

    display:inline-block;

    color:#FFD54A;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.cta-box h2{

    font-size:48px;

    line-height:1.3;

    margin-bottom:24px;

}

.cta-box p{

    max-width:650px;

    margin:0 auto 35px;

    line-height:1.9;

    font-size:18px;

}

.cta-button{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.cta-button .btn{

    min-width:220px;

    height:54px;

    border-radius:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}


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

@media(max-width:991px){

.unit-section{

padding:70px 0;

}

.unit-card img{

height:220px;

}

.unit-content{

padding:24px;

}

.unit-content h3{

font-size:24px;

}

.facts-section{

padding:70px 0;

}

.fact-card{

margin-bottom:18px;

}

.fact-card h2{

font-size:38px;

}

.profile-cta{

padding:80px 0;

}

.cta-box h2{

font-size:34px;

}

.cta-box p{

font-size:16px;

}

.cta-button{

flex-direction:column;

align-items:center;

}

.cta-button .btn{

width:100%;

max-width:320px;

}

}

@media(max-width:576px){

.unit-card img{

height:190px;

}

.unit-content{

padding:20px;

}

.unit-content h3{

font-size:22px;

}

.unit-content p{

font-size:14px;

}

.fact-card{

padding:25px 18px;

}

.fact-card h2{

font-size:30px;

}

.profile-cta{

padding:60px 0;

}

.cta-box h2{

font-size:28px;

}

.cta-box p{

font-size:15px;

}

}