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

.contact-hero{

    position:relative;

    height:330px;

     background:#1437B7; 
    display:flex; 

    align-items:center;
}

.contact-hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(20,55,183,.78);
}

.contact-hero-content{

    position:relative;

    z-index:2;

    color:white;

    padding:0 80px;

    max-width:700px;
}

.breadcrumb{

    display:flex;

    gap:10px;

    margin-bottom:20px;

    font-size:1rem;
}

.breadcrumb a{

    color:white;

    text-decoration:none;
}

.current-page{

    color:#E6A61B;
}

.contact-hero h1{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(1.7rem,3vw,2.5rem);

    margin-bottom:15px;
}

.contact-hero p{

    line-height:1.8;
    font-size:1.05rem;
}

.hero-line{

    width:70px;

    height:4px;

    background:#E6A61B;

    margin-top:20px;
}

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

.contact-section{

    background:#EEF3FA;

    padding:80px;
}

/* =========================
   CARDS
========================= */

.contact-cards{

    display:grid;

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

    gap:25px;

    margin-bottom:70px;
}

.contact-card{

    background:white;

    border-radius:20px;

    text-align:center;

    padding:40px 30px;

    border:1px solid #DDE4EF;
}

.contact-icon{

    width:60px;

    height:60px;

    margin:auto;

    margin-bottom:20px;

    background:#FFF3D9;

    color:#E6A61B;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.contact-card h3{

    margin-bottom:15px;

    color:#24314D;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:1.5rem;

}

.contact-card p{

    color:#6B7280;
    font-size:1.05rem;

    line-height:1.8;
}

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

.contact-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:35px;
}

/* FORM */

.contact-form-box h2{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:clamp(1.7rem,3vw,2.5rem);

    color:#24314D;

    margin:15px 0 30px;
}

.section-tag{

    color:#E6A61B;

    font-size:1rem;

    font-weight:600;

    letter-spacing:2px;
}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;
}

input,
textarea{

    width:100%;

    padding:15px;

    border:1px solid #DDE4EF;

    border-radius:12px;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:1.05rem;
}

textarea{

    height:150px;

    resize:none;

    margin-bottom:20px;
}

button{

    background:#E6A61B;

    color:white;

    border:none;

    padding:14px 28px;

    border-radius:30px;

    cursor:pointer;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:1.05rem;

}

/* SIDE */

.map-box iframe{

    width:100%;

    height:250px;

    border:none;

    border-radius:20px;
}

.office-hours{

    background:white;

    padding:25px;

    border-radius:20px;

    margin-top:20px;
}

.hours-row{

    display:flex;

    justify-content:space-between; 
    font-size:1.05rem;

    margin-top:15px;

    color:#6B7280;
}

.social-box{

    margin-top:20px;

    background:#2146C7;

    color:white; 
    font-size:1.05rem;

    padding:25px;

    border-radius:20px;
}

.social-box p{

    margin:15px 0;
}

.social-icons{

    display:flex;

    gap:12px;
}

.social-icons a{

    width:40px;

    height:40px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;
} 

.success-message{

    background-color:#d4edda;

    color:#155724;

    border:1px solid #c3e6cb;

    padding:15px;

    border-radius:6px;

    margin-bottom:20px;

    font-weight:600;

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:1.05rem;

}

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

@media(max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;
    }

    .contact-cards{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .contact-section{

        padding:60px 25px;
    }

    .contact-hero-content{

        padding:0 25px;
    }

    .contact-hero h1{

        font-size:48px;
    }

    .form-row{

        grid-template-columns:1fr;
    }
}