/*==========================================
 Hero
==========================================*/

.education-hero{

    background:linear-gradient(135deg,#204f86,#173c69);

    color:#fff;

}

.education-hero .hero-inner{

    max-width:1100px;

    margin:auto;

    padding:48px 24px 42px;

}

.education-hero .hero-sub{

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

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:12px;

}

.education-hero h1{

    color:#fff;

    font-size:clamp(2rem,4vw,2.8rem);

    margin-bottom:18px;

    line-height:1.2;

}

.education-hero .hero-text{

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

    font-size:1.08rem;

    line-height:1.9;

    max-width:680px;

}

.education-intro{
    padding:80px 0;
    background:#f7f9fc;
}

.education-intro .container{
    max-width:960px;
    margin:auto;
    padding:0 20px;
}

.education-intro h2{
    font-size:2rem;
    color:#1b365d;
    margin-bottom:24px;
}

.education-intro> .container>p{
    line-height:2;
    color:#444;
    margin-bottom:48px;
}

.education-list{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.education-card{

    background:#fff;

    border:1px solid #d9e2ef;

    border-left:5px solid #1b4f9c;

    border-radius:8px;

    padding:24px 30px;

    transition:.25s;
}

.education-card:hover{

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

    transform:translateY(-1px);

}

.education-card h3{

    font-size:1.3rem;

    color:#1b365d;

    margin-bottom:10px;

    position:relative;

    padding-bottom:10px;


}

.education-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:48px;

    height:2px;

    background:#1b4f9c;

}

.education-card p{

    line-height:1.8;

    color:#555;

    margin-bottom:18px;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    padding:10px 20px;

    border:1px solid #1b4f9c;

    color:#1b4f9c;

    text-decoration:none;

    border-radius:6px;

    transition:.2s;

    font-size:.95rem;

    font-weight:600;

}

.btn-outline:hover{

    background:#1b4f9c;

    color:#fff;

}

@media(max-width:768px){

.education-intro{

    padding:60px 0;

}

.education-card{

    padding:22px;

}

.education-action{

    flex-wrap:wrap;

    justify-content:flex-start;
    
}

.education-card h3{

    font-size:1.15rem;

}


}

.education-action{

    display:flex;

    justify-content:flex-end;

    gap:16px;

    margin-top:8px;
}

.education-hero{

    position:relative;

}

.education-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:4px;

    background:#f0c75e;

}