/* =========================
   SERVICES PAGE
========================= */



/* HERO */


.services-hero{


    background:var(--light);

    padding:100px 10%;

    text-align:center;


}



.services-hero h1{


    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);


}



.services-hero span{


    color:var(--accent);


}



.services-hero p{


    max-width:750px;

    margin:25px auto 0;

    font-size:var(--text-lg);

    line-height:1.7;


}








/* SERVICES CARDS */


.services-section{


    padding:var(--section-padding);


}



.services-section h2{


    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    color:var(--primary);

    margin-bottom:45px;


}




.services-cards{


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;


}




.service-card{


    width:300px;

    padding:40px 30px;

    background:white;

    border-radius:25px;


    box-shadow:

    0 12px 35px rgba(0,7,68,.12);


    text-align:center;

    transition: 0.3s;


}




.service-card:hover{


    transform:translateY(-12px);


}



.icon{


    font-size:45px;

    margin-bottom:20px;


}




.service-card h3{


    font-family:var(--font-heading);

    color:var(--primary);

    margin-bottom:15px;


}




.service-card p{


    color:var(--text);

    font-size:var(--text-sm);

    line-height:1.7;


}








/* LEARNING DESIGN */


.learning-design{


    background:var(--light);

    padding:80px 10%;

    text-align:center;


}



.learning-design h2{


    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    color:var(--primary);

    margin-bottom:25px;


}



.learning-design p{


    max-width:800px;

    margin:auto;

    font-size:var(--text-md);


}








/* CTA */


.services-cta{


    background:var(--white);

    padding:80px 10%;

    text-align:center;


}



.services-cta h2{


    color: var(--text);

    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    margin-bottom:30px;


}



.services-cta .btn{


    background:var(--orange);

    padding:15px 35px;

    border-radius:30px;

    color: var(--white);

    text-decoration:none;
    font-weight:bold;
    transition: 0.3s;


}



.services-cta .btn:hover{


    background:var(--primary);


}






@media(max-width:800px){



.services-hero h1{


    font-size:38px;


}


.service-card{


    width:100%;


}


}