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

.contact-page{
    padding:35px 0;
    background:#f7f7f7;
}

.container{
    width:90%;
    max-width:1250px;
    margin:auto;
}

/*=========================
      SECTION TITLE
==========================*/

.contact-section-title{
    text-align:center;
    margin-bottom:35px;
}

.contact-section-title h2{
    font-size:42px;
    font-weight:700;
    color:#081B33;
    margin-bottom:12px;
}

.contact-section-title h2 span{
    color:#1187c9;
}

.contact-section-title p{
    max-width:760px;
    margin:auto;
    font-size:16px;
    line-height:1.8;
    color:#666;
}

/*=========================
      MAIN GRID
==========================*/

.main-contact-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:stretch;
}

/*=========================
      LEFT SIDE
==========================*/

.left-contact{
    display:flex;
    flex-direction:column;
    height:100%;
}

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

.contact-info-box{

    background:#fff;
    border-radius:20px;
    padding:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.05);

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

    flex:1;
}

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

.info-row{

    display:flex;
    align-items:flex-start;
    gap:15px;

    padding:14px;

    border:1px solid #ededed;
    border-radius:14px;

    transition:.35s;
    background:#fff;
}

.info-row:hover{

    border-color:#1187c9;
    transform:translateY(-3px);

}

/*=========================
      OFFICE ROW
==========================*/

.office-row{

    align-items:flex-start;

}

/*=========================
        ICON
==========================*/

.info-icon{

    width:46px;
    height:46px;
    min-width:46px;

    border-radius:50%;

    background:rgba(17,135,201,.10);

    display:flex;
    justify-content:center;
    align-items:center;

}

.info-icon i{

    color:#1187c9;
    font-size:18px;

}

/*=========================
      CONTENT
==========================*/

.info-content{

    flex:1;

}

.info-content h4{

    margin:0 0 6px;

    color:#081B33;

    font-size:18px;
    font-weight:700;

}

.info-content p{

    margin:0;

    color:#555;

    font-size:13px;
    line-height:1.7;

    font-weight:400;

}

.info-content h4 span{

    color:#666;

    font-size:15px;
    font-weight:400;

}

/*=========================
      MAP
==========================*/

.contact-map{

    margin-top:18px;

}

.contact-map iframe{

    width:100%;
    height:260px;

    border:none;
    border-radius:18px;

    display:block;

}   

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

.contact-form{

    background:#fff;
    border-radius:20px;
    padding:28px;

    box-shadow:0 8px 30px rgba(0,0,0,.05);

    display:flex;
    flex-direction:column;
    justify-content:center;

    height:100%;
}

.form-header{

    margin-bottom:22px;

}

.form-header span{

    display:block;

    font-size:32px;
    font-weight:700;
    letter-spacing:1px;

    color:#1187c9;

    margin-bottom:12px;

}

.form-header p{

    color:#666;
    font-size:15px;
    line-height:1.8;

}

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

.form-grid{

    display:grid;

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

    column-gap:18px;
    row-gap:18px;

}

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

.form-group{

    display:flex;
    flex-direction:column;

}

.form-group label{

    font-size:15px;
    font-weight:600;

    color:#081B33;

    margin-bottom:9px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #dddddd;
    border-radius:10px;

    outline:none;

    background:#fafafa;

    font-size:15px;

    transition:.3s;

}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{

    border-color:#1187c9;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#1187c9;
    background:#fff;

}

.form-group select{

    cursor:pointer;

}

/*=========================
      TEXTAREA
==========================*/

.textarea-group{

    margin-top:18px;

}

.textarea-group textarea{

    height:160px;

    resize:none;

}

/*=========================
        BUTTON
==========================*/

.contact-btn{

    width:100%;

    margin-top:22px;

    border:none;
    outline:none;

    padding:16px;

    border-radius:10px;

    background:#1187c9;

    color:#fff;

    font-size:17px;
    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.contact-btn:hover{

    background:#081B33;

    transform:translateY(-2px);

}

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

@media(max-width:1100px){

    .main-contact-layout{

        grid-template-columns:1fr;

    }

    .left-contact,
    .contact-form{

        height:auto;

    }

    .contact-map iframe{

        height:300px;

    }

}

@media(max-width:768px){

    .contact-page{

        padding:50px 0;

    }

    .container{

        width:94%;

    }

    .contact-section-title h2{

        font-size:34px;

    }

    .contact-section-title p{

        font-size:14px;

    }

    .contact-form{

        padding:22px;

    }

    .form-header span{

        font-size:28px;

    }

    .form-grid{

        grid-template-columns:1fr;

        row-gap:16px;

    }

    .info-icon{

        width:42px;
        height:42px;
        min-width:42px;

    }

    .info-icon i{

        font-size:16px;

    }

    .info-content h4{

        font-size:17px;

    }

    .info-content p{

        font-size:13px;
        line-height:1.6;

    }

    .info-content h4 span{

        font-size:14px;

    }

    .textarea-group textarea{

        height:140px;

    }

}

@media(max-width:480px){

    .contact-section-title h2{

        font-size:28px;

    }

    .contact-section-title p{

        font-size:13px;

        line-height:1.7;

    }

    .contact-form{

        padding:18px;

    }

    .form-header span{

        font-size:24px;

    }

    .info-row{

        padding:12px;

    }

    .info-icon{

        width:40px;
        height:40px;
        min-width:40px;

    }

    .info-content h4{

        font-size:16px;

    }

    .info-content p{

        font-size:12.8px;

    }

    .contact-map iframe{

        height:230px;

    }

    .textarea-group textarea{

        height:120px;

    }

    .contact-btn{

        padding:14px;

        font-size:16px;

    }

}

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