/* ========================================
   CONTACT PAGE
======================================== */


/* ========================================
   INTRODUCTION
======================================== */

.contact-introduction{

    max-width:1100px;
    margin:35px auto 40px;
    padding:0 25px;

}


.contact-intro-layout{

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

}


.contact-intro-text h1{

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

}


.contact-intro-text h2{

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

}


.contact-intro-text .intro-lead{

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

}


.contact-intro-columns{

    max-width:850px;
    margin:35px 0 0;

}


.contact-subheading{

    font-family:'Montserrat',sans-serif;
    font-size:28px;
    color:var(--navy);
    margin-bottom:18px;

}


.contact-intro-columns p{

    font-size:20px;
    line-height:1.75;
    color:var(--light-text);
    margin-bottom:25px;

}


.contact-intro-columns p:last-child{

    margin-bottom:0;

}


/* ========================================
   IMAGE
======================================== */

.contact-intro-image{
    display:flex;
    justify-content:center;
    align-items:flex-start;
   padding-top:32px;
}

.contact-intro-image img{

    width:100%;
    max-width:360px;
    height:auto;
    border-radius:24px;
    object-fit:cover;

}


/* ========================================
   CONTACT DETAILS
======================================== */

.contact-details{

    max-width:1100px;
    margin:60px auto;
    padding:45px 25px;
    border-top:1px solid rgba(20,40,60,0.18);

}


.contact-details h2{

    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-size:42px;
    color:var(--navy);
    margin-bottom:40px;

}


.contact-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;

}


.contact-card{

    background:linear-gradient(180deg,#FFFFFF,#FBFCFB);
    border:1px solid rgba(20,40,60,0.18);
    border-radius:20px;
    padding:35px;

}


.contact-card h3{

    font-family:'Montserrat',sans-serif;
    font-size:24px;
    color:var(--navy);
    margin-bottom:18px;

}


.contact-card p{

    font-size:18px;
    line-height:1.7;
    color:var(--light-text);
    margin-bottom:15px;

}


.contact-card a{

    color:var(--green);
    font-weight:600;
    text-decoration:none;

}


.contact-card a:hover{

    text-decoration:underline;

}


/* ========================================
   MOBILE
======================================== */

@media (max-width:900px){

    .contact-intro-layout{

        display:grid;
        grid-template-columns:1fr;
        gap:10px;

    }

    .contact-intro-text{

        order:1;
        text-align:left;

    }

    .contact-intro-image{

        order:2;          /* image AFTER intro text */
        padding-top:0;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}