/* HERO */

.diklat-hero{
    padding:90px 0;

    background:
    linear-gradient(
        135deg,
        #EAFBF8,
        #FFFFFF
    );
}

.diklat-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.diklat-label{
    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:
    rgba(14,159,141,.1);

    color:#0E9F8D;

    font-size:12px;
    font-weight:700;
}

.diklat-content h1{
    margin-top:18px;

    font-size:54px;

    font-weight:800;

    line-height:1.1;
}

.diklat-content p{
    margin-top:18px;

    color:#6B7280;

    line-height:1.9;
}

.diklat-image img{
    width:100%;
}


/* ABOUT */

.diklat-about{
    padding:80px 0;
}

.diklat-desc{
    max-width:850px;

    margin:auto;

    text-align:center;

    line-height:1.9;

    color:#6B7280;
}


/* PROGRAM */

.diklat-program{
    padding:80px 0;

    background:#F9FAFB;
}

.program-grid{
    display:grid;

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

    gap:24px;
}

.program-card{
    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

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

.program-card i{
    font-size:38px;

    color:#0E9F8D;

    margin-bottom:15px;
}


/* FLOW */

.diklat-flow{
    padding:80px 0;
}

.flow-grid{
    display:grid;

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

    gap:30px;
}

.flow-item{
    text-align:center;
}

.flow-number{
    width:70px;
    height:70px;

    margin:auto auto 20px;

    border-radius:50%;

    background:#0E9F8D;

    color:#fff;

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

    font-size:26px;
    font-weight:700;
}


/* =========================
   CONTACT DIKLAT
========================= */

.diklat-contact{
    padding:80px 0;

    background:#F9FAFB;
}

.diklat-contact-card{

    background:#fff;

    border-radius:28px;

    padding:50px;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

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

.contact-left span{

    color:#0E9F8D;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;
}

.contact-left h2{

    margin-top:12px;

    margin-bottom:18px;

    font-size:42px;

    font-weight:800;
}

.contact-left p{

    color:#6B7280;

    line-height:1.8;
}


/* ITEM */

.contact-item{

    display:flex;

    gap:18px;

    margin-bottom:24px;
}

.contact-item i{

    width:54px;
    height:54px;

    border-radius:50%;

    background:
    rgba(14,159,141,.1);

    color:#0E9F8D;

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

    font-size:20px;

    flex-shrink:0;
}

.contact-item h5{

    margin-bottom:4px;

    font-weight:700;
}

.contact-item p,
.contact-item a{

    color:#6B7280;

    text-decoration:none;
}

.contact-action{
    margin-top:30px;
}


@media(max-width:768px){

    .diklat-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .diklat-content{
        text-align:center;
        order:2;
    }

    .diklat-image{
        order:1;
    }

    .diklat-content h1{
        font-size:34px;
    }

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

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

}