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


.services-introduction{

    max-width:1100px;

    margin:35px auto;

    padding:0 25px;

}


.services-intro-text{

    max-width:850px;

}

/* ========================================
   SERVICES INTRO IMAGE
======================================== */


.services-intro-layout {

    display:grid;
    grid-template-columns:1fr 420px;
    gap:55px;
    align-items:center;

}


.services-intro-image{

    display:flex;
    justify-content:center;
    padding-top:25px;

}


.services-intro-image img{

    width:100%;
    max-width:420px;
    height:auto;
    border-radius:24px;
    object-fit:contain;
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.services-introduction h1{

    font-family:'Montserrat',sans-serif;
    font-size:56px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:15px;

}


.services-introduction h2{

    font-family:'Montserrat',sans-serif;
    font-size:40px;
    line-height:1.25;
    color:var(--navy);
    margin-bottom:20px;

}


.services-lead{

    font-size:25px;
    font-weight:600;
    line-height:1.55;
    color:var(--green);

}

/* ========================================
   SERVICES LIST
======================================== */


.services-list{

    max-width:1100px;

    margin:35px auto;

    padding:0 25px;

}



.service-item{

    border-top:1px solid var(--border);

    padding:30px 35px;

    margin-bottom:25px;

    background:white;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}


.service-item h2{

    font-family:'Montserrat',sans-serif;

    font-size:38px;

    color:var(--navy);

    margin-bottom:12px;

}



.service-item p{

    max-width:850px;

    font-size:20px;

    line-height:1.7;

    color:var(--light-text);

    margin-bottom:18px;

}



.service-item h3{

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--green);

    margin-top:15px;

}



.service-item ul{

    margin-left:20px;

    margin-bottom:20px;

}



.service-item li{

    font-size:18px;

    line-height:1.7;

    color:var(--light-text);

}

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


.services-cta{

    background:var(--sage);

    padding:45px 25px;

    text-align:center;

}


.services-cta h2{

    font-family:'Montserrat',sans-serif;

    font-size:42px;

    color:var(--navy);

    margin-bottom:20px;

}



.services-cta p{

    max-width:750px;

    margin:0 auto 30px;

    font-size:21px;

    line-height:1.7;

    color:var(--light-text);

}

/* ========================================
   FOOTER
======================================== */


footer{

    background:var(--navy);

    padding:35px 25px;

    text-align:center;

}


.footer-content p{

    color:white;

    font-size:16px;

    line-height:1.6;

    margin-bottom:8px;

}


.footer-content p:last-child{

    margin-bottom:0;

}
/* ========================================
   MOBILE SERVICES INTRO
======================================== */

@media (max-width:900px){

    .services-intro-layout{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
        text-align:left;
    }

    .services-intro-text{
        order:1;
        text-align:left;
    }

    .services-intro-image{
        order:2;          /* image comes AFTER the text */
        padding-top:0;
    }

    .services-intro-image img{
        width:100%;
        max-width:420px;
        height:auto;
        object-fit:contain;
    }

}

@media (max-width:600px){

    .services-intro-image img{
        max-width:100%;
        height:auto;
    }

}