/* ==========================
   CONTACT HERO
========================== */

.contact-hero{
    height:400px;
    background:
    linear-gradient(rgba(11,61,109,.75),rgba(11,61,109,.75)),
    url("../assets/images/hero.jpg");
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    padding:0 7%;
}

.contact-hero h1{
    font-size:60px;
    margin-bottom:20px;
}

.contact-hero p{
    max-width:800px;
    margin:auto;
    font-size:22px;
    line-height:1.8;
}

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

.contact-info{

    padding:100px 7%;

    display:grid;

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

    gap:30px;

}

.info-card{

    background:#fff;

    padding:40px 30px;

    text-align:center;

    border-radius:16px;

    border:1px solid #EAEAEA;

    transition:.3s;

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

}

.info-card:hover{

    transform:translateY(-8px);

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

}

.info-icon{

    font-size:42px;

    margin-bottom:20px;

}

.info-card h3{

    color:#0B3D6D;

    font-size:26px;

    margin-bottom:15px;

}

.info-card p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}
/* ==========================
   CONTACT MAIN
========================== */

.contact-main{

    padding:100px 7%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;

}

.contact-map iframe{

    width:100%;

    height:550px;

    border:none;

    border-radius:18px;

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

}

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:18px;

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

}

.contact-form h2{

    color:#0B3D6D;

    font-size:38px;

    margin-bottom:30px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

    width:100%;

    padding:16px 18px;

    border:1px solid #DADADA;

    border-radius:10px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

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

    border-color:#C7A33B;

    box-shadow:0 0 0 3px rgba(199,163,59,.15);

}

.contact-form .btn{

    width:100%;

    margin-top:10px;

}
.phone-link{

    color:#555;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.3s;

}

.phone-link:hover{

    color:#0B3D6D;

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

.business-hours{

    padding:100px 7%;

    background:#F7F9FC;

    text-align:center;

}

.business-hours h2{

    font-size:42px;

    color:#0B3D6D;

    margin-bottom:50px;

}

.hours-grid{

    display:grid;

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

    gap:30px;

    margin-bottom:60px;

}

.hours-grid div{

    background:#fff;

    padding:30px;

    border-radius:16px;

    border:1px solid #EAEAEA;

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

}

.hours-grid h3{

    color:#0B3D6D;

    margin-bottom:12px;

    font-size:22px;

}

.hours-grid p{

    color:#666;

    font-size:18px;

}

.whatsapp-banner{

    background:#0B3D6D;

    color:#fff;

    padding:50px;

    border-radius:20px;

}

.whatsapp-banner h3{

    font-size:34px;

    margin-bottom:15px;

}

.whatsapp-banner p{

    max-width:700px;

    margin:0 auto 30px;

    line-height:1.8;

    font-size:18px;

}