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

.page-banner{

    position:relative;

    width:100%;

    height:45vh;

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

    display:flex;

    justify-content:center;

    align-items:center;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(30,27,75,.75);

}

.banner-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.banner-content h1{

    font-size:52px;

    margin-bottom:15px;

    font-weight:700;

}

.banner-content p{

    font-size:18px;

}

.banner-content a{

    color:#22D3EE;

    text-decoration:none;

    font-weight:600;

}

.banner-content span{

    margin:0 8px;

}


/*=====================================
        COMMON HEADING
======================================*/

.section-heading{

    text-align:center;

    margin-bottom:55px;

}

.section-heading h4{

    color:#06B6D4;

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:10px;

    text-transform:uppercase;

}

.section-heading h2{

    color:#1E1B4B;

    font-size:40px;

    margin-bottom:18px;

}

.title-line{

    width:90px;

    height:4px;

    background:linear-gradient(to right,#312E81,#06B6D4);

    margin:auto;

    border-radius:20px;

}


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

.contact-info{

    padding:90px 8%;

    background:#F8FAFC;

}

.contact-container{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.contact-card{

    background:#fff;

    padding:35px 25px;

    text-align:center;

    border-radius:18px;

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

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

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

}

.contact-card i{

    width:75px;

    height:75px;

    background:linear-gradient(135deg,#312E81,#06B6D4);

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 22px;

    font-size:28px;

}

.contact-card h3{

    color:#1E1B4B;

    margin-bottom:15px;

    font-size:22px;

}

.contact-card p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}


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

.contact-form-section{

    padding:90px 8%;

    background:#fff;

}

.form-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:60px;

    align-items:center;

}

.form-content h2{

    color:#1E1B4B;

    font-size:42px;

    margin-bottom:20px;

}

.form-content p{

    color:#666;

    font-size:17px;

    line-height:1.9;

}

.contact-form{

    background:#F8FAFC;

    padding:40px;

    border-radius:20px;

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

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:15px 18px;

    margin-bottom:20px;

    border:1px solid #dcdcdc;

    border-radius:10px;

    outline:none;

    font-size:15px;

    transition:.3s;

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

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#06B6D4;

    box-shadow:0 0 8px rgba(6,182,212,.25);

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    width:100%;

    padding:15px;

    border:none;

    background:linear-gradient(135deg,#312E81,#06B6D4);

    color:#fff;

    font-size:17px;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

}

.contact-form button:hover{

    transform:translateY(-3px);

}

.contact-form button i{

    margin-right:8px;

}


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

.map-section{

    padding:0 8% 90px;

    background:#fff;

}

.map-container{

    max-width:1300px;

    margin:auto;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.map-container iframe{

    width:100%;

    height:450px;

    border:0;

}