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

.contact-hero{

    background:#123D72;
    color:white;
    text-align:center;
    padding:120px 0;

}

.contact-hero h1{

    font-size:56px;
    margin-bottom:20px;

}

.contact-hero p{

    max-width:700px;
    margin:auto;
    font-size:20px;

}

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

.contact-section{

    background:#fff;

}

.contact-grid{

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

}

.contact-info h2,
.contact-form h2{

    margin-bottom:30px;

}

.info-box{

    display:flex;
    gap:20px;
    margin-bottom:35px;
    align-items:flex-start;

}

.info-box i{

    width:60px;
    height:60px;
    background:#123D72;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    transition:var(--transition);

}
.info-box:hover i{

    background:var(--secondary);
    color:#111;
    transform:rotate(8deg);

}

.info-box h4{

    margin-bottom:10px;

}

.info-box p{

    color:#666;
    line-height:1.8;

}

.contact-form{

    background:#F8F8F8;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:var(--transition);

}

.contact-form:hover{

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.contact-form form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.contact-form input,
.contact-form textarea{

    padding:18px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    font-family:inherit;
    transition:var(--transition);

}
.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(212,165,71,.15);

}
.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    border:none;
    cursor:pointer;

}

.form-message{
    margin-top:20px;
    padding:15px;
    border-radius:8px;
    font-weight:600;
    display:none;
}

.form-message.success{
    display:block;
    background:#e8f8ec;
    color:#1f7a3d;
    border:1px solid #1f7a3d;
}

.form-message.error{
    display:block;
    background:#fdeaea;
    color:#b3261e;
    border:1px solid #b3261e;
}

.input-error{
    border:2px solid #dc3545 !important;
}