/*=========================================
            PAGE BANNER
=========================================*/

.contact-banner{

    background:url("../images/building.jpeg") center center/cover no-repeat;

}

.page-banner{

    position:relative;

    width:100%;

    height:320px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
    margin-bottom: auto;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(rgba(67,56,202,.75),
    rgba(15,23,42,.75));

}

.banner-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.banner-content h1{

    font-size:48px;

    font-weight:700;

    margin-bottom:15px;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:16px;

}

.breadcrumb a{

    color:#06B6D4;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#fff;

}

.breadcrumb span{

    color:#fff;

}



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

.contact-section{

    padding:90px 0;

    background:#F8FAFC;

}

.contact-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.contact-card{

    background:#fff;

    padding:35px 25px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.contact-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#EEF2FF;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.contact-icon i{

    font-size:30px;

    color:#4338CA;

    transition:.35s;

}

.contact-card:hover .contact-icon{

    background:#4338CA;

}

.contact-card:hover .contact-icon i{

    color:#fff;

}

.contact-card h3{

    margin-bottom:15px;

    font-size:22px;

    color:#1E293B;

}

.contact-card p{

    color:#64748B;

    line-height:1.8;

}



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

.contact-form-section{

    padding:90px 0;

    background:#fff;

}

.form-wrapper{

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:50px;

    align-items:center;

}

.form-content span{

    color:#06B6D4;

    font-weight:600;

}

.form-content h2{

    font-size:40px;

    margin:15px 0;

    color:#1E293B;

}

.form-content p{

    color:#64748B;

    line-height:1.9;

}

.contact-form{

    background:#F8FAFC;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:15px 18px;

    margin-bottom:20px;

    border:1px solid #dbe4ef;

    border-radius:12px;

    outline:none;

    font-size:15px;

    font-family:'Poppins',sans-serif;

    transition:.3s;

}

.contact-form textarea{

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#4338CA;

}

.contact-form button{

    border:none;

    padding:15px 35px;

    border-radius:50px;

    background:#4338CA;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.contact-form button:hover{

    background:#06B6D4;

}

.contact-form button i{

    margin-right:8px;

}



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

.map-section{

    padding:90px 0;

    background:#F8FAFC;

}

.map-container{

    margin-top:50px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.map-container iframe{

    width:100%;

    height:450px;

    border:0;

}