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

.contact-hero{

    background:
    linear-gradient(rgba(13,71,161,0.75), rgba(0,166,81,0.65)),
    url("../assets/images/contacts/contact-bg.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    padding: 120px 20px;

}

.contact-hero h1{

    color:#fff;

    font-size:55px;

}

.contact-hero p{

    color:#fff;

    font-size:20px;

    margin-top:15px;

}

/*======================================
CONTACT SECTION
======================================*/

.contact-section{

    padding:90px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

}

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

.info-card{

    background:#F8FAFC;

    padding:30px;

    border-radius:12px;

    margin-bottom:20px;

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

}

.info-card h3{

    color:#0D4C92;

    margin-bottom:12px;

}

.info-card p{

    margin:0;

}

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

.contact-form{

    background:white;

    padding:40px;

    border-radius:12px;

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

}

.contact-form h2{

    margin-bottom:25px;

}

.contact-form input{

    width:100%;

    padding:16px;

    margin-bottom:18px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

}

.contact-form textarea{

    width:100%;

    height:180px;

    padding:16px;

    border:1px solid #ddd;

    border-radius:8px;

    resize:none;

    margin-bottom:25px;

    font-size:16px;

}

.contact-form button{

    width:100%;

}