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

:root{

    --primary:#117A43;
    --primary-dark:#0C5C30;
    --secondary:#F4C400;
    --light:#F7F8FA;
    --white:#FFF;
    --text:#333;

}

/*==================================================
                HERO
==================================================*/

.contact-hero{

    position:relative;

    height:42vh;

min-height:320px;

    background:url("../img/hero3.jpg")
    center center/cover;

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-hero .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}

.contact-hero .hero-content{

    position:relative;

    z-index:5;

    max-width:900px;

    color:white;

    text-align:center;

    margin:auto;

}

.contact-hero span{

    color:#FFD84D;

    font-weight:700;

    letter-spacing:4px;

}

.contact-hero h1{

    font-size:52px;

    line-height:1.15;

    margin:15px 0 20px;

}

.contact-hero p{

    font-size:18px;

    max-width:760px;

    margin:auto;

    line-height:1.8;

}

/*==================================================
            CONTACT INFO
==================================================*/

.contact-info-section{

padding:100px 0 40px;

background:#fff;

}

.info-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.info-card{

background:white;

padding:45px 30px;

text-align:center;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.info-card:hover{

transform:translateY(-10px);

}

.info-card i{

font-size:48px;

color:var(--primary);

margin-bottom:20px;

}

.info-card h3{

margin-bottom:15px;

font-size:24px;

color:#222;

}

.info-card p{

line-height:1.8;

color:#666;

}

/*==================================================
            FORM
==================================================*/

.contact-form-section{

padding:90px 0 120px;

background:#F7F8FA;

}

.form-wrapper{

display:grid;

grid-template-columns:1fr 2fr;

gap:60px;

align-items:start;

}

.form-text span{

display:inline-block;

color:var(--primary);

font-weight:700;

letter-spacing:3px;

margin-bottom:15px;

}

.form-text h2{

font-size:44px;

margin-bottom:25px;

}

.form-text p{

line-height:1.9;

color:#666;

}


form{

background:white;

padding:45px;

border-radius:20px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.form-grid textarea{

grid-column:1/3;

}

form input,

form textarea{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-family:Poppins;

font-size:15px;

outline:none;

transition:.35s;

}

form input:focus,

form textarea:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(17,122,67,.10);

}

form textarea{

resize:none;

}

form button{

margin-top:10px;

}


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

.contact-cta{

padding:120px 0;

background:

linear-gradient(

rgba(17,122,67,.88),

rgba(17,122,67,.88)

),

url("../img/hero1.jpg")

center center/cover;

color:white;

text-align:center;

}

.contact-cta h2{

font-size:54px;

margin-bottom:25px;

}

.contact-cta p{

font-size:20px;

line-height:1.8;

max-width:700px;

margin:auto;

margin-bottom:45px;

}
/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px){

.info-grid{

grid-template-columns:repeat(2,1fr);

}

.form-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.info-grid{

grid-template-columns:1fr;

}

.form-grid{

grid-template-columns:1fr;

}

.form-grid textarea{

grid-column:auto;

}

.contact-hero{

    position:relative;

    height:42vh;

    min-height:320px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:90px;

    box-sizing:border-box;

}

.form-text{

text-align:center;

}

}