/* ==========================================
   CONTACT PAGE
   Technimat Engineering Solutions
========================================== */

/* ==========================
   CONTACT BANNER
========================== */

.contact-banner{

    height:420px;

    background:
    linear-gradient(rgba(5,20,45,.78),
    rgba(5,20,45,.78)),
    url("../images/contact/banner.jpg");

    background-size:cover;
    background-position:center;

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

    text-align:center;

    color:#fff;
}

.contact-banner h1{

    font-size:60px;

    margin-bottom:20px;
}

.contact-banner p{

    font-size:22px;

    color:#ddd;
}

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

.contact-info{

    padding:90px 0;

    background:#f7f9fc;
}

.contact-info .container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.info-card{

    background:#fff;

    padding:40px;

    text-align:center;

    border-radius:15px;

    transition:.4s;

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

.info-card:hover{

    transform:translateY(-10px);

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

.info-card i{

    font-size:55px;

    color:#0077ff;

    margin-bottom:20px;
}

.info-card h3{

    color:#0B1F3A;

    margin-bottom:15px;
}

.info-card p{

    color:#666;

    line-height:1.8;
}

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

.contact-form{

    padding:100px 0;
}

.contact-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;
}

.contact-form h2{

    margin-bottom:20px;

    color:#0B1F3A;
}

.contact-form p{

    margin-bottom:30px;
}

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

    width:100%;

    padding:16px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

    font-family:Poppins;
}

.contact-form textarea{

    height:180px;

    resize:none;
}

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

    outline:none;

    border-color:#0077ff;
}

.contact-form button{

    border:none;

    cursor:pointer;
}

/* ==========================
   BUSINESS HOURS
========================== */

.right{

    background:#081528;

    color:#fff;

    padding:40px;

    border-radius:15px;
}

.right h2{

    margin-bottom:20px;
}

.right ul{

    list-style:none;

    margin-bottom:35px;
}

.right li{

    margin-bottom:15px;

    color:#ddd;
}

/* ==========================
   SOCIAL
========================== */

.social{

    display:flex;

    gap:15px;
}

.social a{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#0077ff;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.3s;
}

.social a:hover{

    background:#fff;

    color:#0077ff;
}

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

.map iframe{

    width:100%;

    height:500px;

    border:none;
}

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

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-banner h1{

font-size:45px;

}

}

@media(max-width:768px){

.contact-banner{

height:300px;

}

.contact-banner h1{

font-size:34px;

}

.contact-info,
.contact-form{

padding:70px 0;

}

}