:root {
    --c-blue: #0D3B66;
    --c-orange: #F77F00;
    --c-bg: #f8fafc;
}

.elite-contact-page {
    padding: 100px 5%;
    background-color: #ffffff;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER STYLE */
.contact-header { text-align: center; margin-bottom: 60px; }
.pill-tag {
    background: rgba(247, 127, 0, 0.1); color: var(--c-orange);
    padding: 8px 20px; border-radius: 50px; font-size: 12px; font-weight: 800; letter-spacing: 2px;
}
.contact-header h1 { font-size: 48px; color: var(--c-blue); font-weight: 800; margin-top: 20px; }
.contact-header h1 span { color: var(--c-orange); }
.contact-header p { color: #64748b; font-size: 18px; max-width: 600px; margin: 15px auto 0; }

/* 3 CARDS */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: 0.4s ease;
}

.contact-card:hover { transform: translateY(-10px); border-color: var(--c-blue); box-shadow: 0 20px 40px rgba(13, 59, 102, 0.05); }
.orange-glow { border-color: rgba(247, 127, 0, 0.2); box-shadow: 0 15px 30px rgba(247, 127, 0, 0.05); }

.card-icon-bubble {
    width: 60px; height: 60px; background: var(--c-bg); color: var(--c-orange);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 20px;
}

.contact-card h3 { color: var(--c-blue); margin-bottom: 10px; font-weight: 800; }
.contact-card p { color: #94a3b8; font-size: 14px; margin-bottom: 5px; }
.contact-card a { color: var(--c-blue); text-decoration: none; font-weight: 700; font-size: 18px; transition: 0.3s; }
.contact-card a:hover { color: var(--c-orange); }

/* FORM & MAP SECTION */
.form-map-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: #ffffff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(13, 59, 102, 0.1);
    border: 1px solid #eef2f6;
}

/* MAP SIDE */
.map-container { position: relative; min-height: 450px; background: #e2e8f0; }
.map-overlay-badge {
    position: absolute; bottom: 20px; left: 20px;
    background: var(--c-blue); color: #fff;
    padding: 10px 20px; border-radius: 50px;
    display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}

/* FORM SIDE */
.contact-form-side { padding: 60px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.input-group { margin-bottom: 25px; }
.input-group label { display: block; color: var(--c-blue); font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.input-group input, .input-group select, .input-group textarea {
    width: 100%; padding: 15px 20px; border-radius: 15px; border: 2px solid #f1f5f9;
    font-family: inherit; font-size: 15px; color: var(--c-blue); outline: none; transition: 0.3s;
}
.input-group input:focus, .input-group textarea:focus { border-color: var(--c-orange); background: #fff; }

.submit-btn-pill {
    width: 100%; background: var(--c-blue); color: #fff; border: none;
    padding: 18px; border-radius: 50px; font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.submit-btn-pill:hover { background: var(--c-orange); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(247, 127, 0, 0.3); }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .contact-cards-grid { grid-template-columns: 1fr; }
    .form-map-wrapper { grid-template-columns: 1fr; }
    .map-container { height: 350px; }
    .contact-form-side { padding: 40px 25px; }
}