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

.about-banner{
    margin-top:90px;
    min-height:120px;
    display:flex;
    align-items:center;
    background:url(images/contact-banner.jpg) center/cover no-repeat;
    position:relative;
}

.contact-section{

    padding:100px 0;

    background:#f8f9fa;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:flex-start;

}

/* Contact Info */

.contact-info span{

    color:#178D3C;

    font-weight:700;

    letter-spacing:2px;

}

.contact-info h2{

    font-size:46px;

    margin:15px 0;

    font-weight:800;

}

.contact-info p{

    color:#666;

    line-height:1.8;

}

.contact-box{

    display:flex;

    gap:20px;

    margin-top:30px;

    align-items:flex-start;

}

.contact-box i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#178D3C;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

}

.contact-box h4{

    margin-bottom:8px;

}

/* Form */

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:20px;

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

}

.contact-form h3{

    margin-bottom:25px;

    font-size:30px;

}

.form-group{

    margin-bottom:20px;

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    font-family:Poppins,sans-serif;

    outline:none;

    transition:.3s;

}

.form-group input:focus,

.form-group textarea:focus{

    border-color:#178D3C;

    box-shadow:0 0 8px rgba(23,141,60,.2);

}

.contact-form button{

    border:none;

    cursor:pointer;

}

/* Google Map */

.map-section{

    width:100%;

}

.map-section iframe{

    width:100%;

    height:500px;

    border:none;

}

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

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-info h2{

font-size:36px;

}

}

@media(max-width:768px){

.contact-section{

padding:70px 0;

}

.contact-form{

padding:25px;

}

.contact-info h2{

font-size:30px;

}

.map-section iframe{

height:350px;

}


}