/* =========================
   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);


}





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


/* TABLET */
@media (max-width: 1024px){


.services-hero{

    padding:80px 7%;

}


.services-hero h1{

    font-size:48px;

}


.services-hero p{

    font-size:18px;

    max-width:650px;

}




.services-section{

    padding:70px 7%;

}



.services-section h2{

    font-size:36px;

}



.services-cards{

    gap:25px;

}



.service-card{

    width:280px;

    padding:35px 25px;

}



.icon{

    font-size:40px;

}





.learning-design{

    padding:70px 7%;

}



.learning-design h2{

    font-size:36px;

}



.learning-design p{

    font-size:17px;

}





.services-cta{

    padding:70px 7%;

}



.services-cta h2{

    font-size:36px;

}


}





/* MOBILE */
@media (max-width: 768px){



.services-hero{

    padding:70px 5%;

}



.services-hero h1{

    font-size:36px;

    line-height:1.2;

}



.services-hero p{

    font-size:16px;

    line-height:1.6;

    margin-top:20px;

}





.services-section{

    padding:60px 5%;

}



.services-section h2{

    font-size:30px;

    margin-bottom:35px;

}



.services-cards{

    flex-direction:column;

    align-items:center;

    gap:20px;

}



.service-card{

    width:100%;

    max-width:330px;

    padding:30px 20px;

}



.service-card:hover{

    transform:translateY(-6px);

}



.icon{

    font-size:38px;

}



.service-card h3{

    font-size:22px;

}



.service-card p{

    font-size:14px;

}







.learning-design{

    padding:60px 5%;

}



.learning-design h2{

    font-size:30px;

}



.learning-design p{

    font-size:16px;

    line-height:1.7;

}





.services-cta{

    padding:60px 5%;

}



.services-cta h2{

    font-size:30px;

    line-height:1.3;

}



.services-cta .btn{

    padding:13px 30px;

}



}





/* SMALL MOBILE */
@media (max-width: 480px){



.services-hero h1{

    font-size:30px;

}



.services-hero p{

    font-size:15px;

}



.services-section h2,
.learning-design h2,
.services-cta h2{

    font-size:26px;

}



.service-card{

    border-radius:20px;

}



.services-cta .btn{

    width:100%;

    max-width:250px;

}



}