/* ==========================================================================
   CONTACT US - MODERN SPLIT CARD DESIGN
   ========================================================================== */

/* Banner Styles */
.inner-banner { background: linear-gradient(rgba(10, 37, 64, 0.8), rgba(10, 37, 64, 0.8)), url('images/slide-1.jpg') center/cover fixed; position: relative; padding: 180px 0 100px; text-align: center; color: #fff; overflow: hidden; }
.contact-banner { background: linear-gradient(rgba(10, 37, 64, 0.85), rgba(10, 37, 64, 0.85)), url('images/4.jpg') center/cover fixed !important; }
.inner-banner .banner-content { position: relative; z-index: 2; animation: slideUpFade 0.8s ease; }
.inner-banner h1 { font-family: var(--font-head); font-size: 55px; font-weight: 800; margin-bottom: 15px; }
.breadcrumb { display: inline-flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.1); padding: 10px 25px; border-radius: 30px; backdrop-filter: blur(10px); font-weight: 600; }
.breadcrumb a { color: #fff; transition: 0.3s; }
.breadcrumb a:hover, .breadcrumb .current { color: var(--accent); }
.banner-shape { position: absolute; bottom: -1px; left: 0; width: 100%; height: 100px; z-index: 1; }
.banner-shape svg { width: 100%; height: 100%; }

@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

body { background-color: #f4f7f6; } 

/* -----------------------------------------
   SINGLE CARD WRAPPER
------------------------------------------ */
.modern-contact-section { padding-top: 80px; padding-bottom: 80px; }
.contact-box-wrapper {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* -----------------------------------------
   LEFT: INFO PANEL
------------------------------------------ */
.contact-info-panel {
    background: var(--primary); /* Deep blue */
    color: #fff;
    padding: 60px 50px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* Abstract shape inside info panel */
.contact-info-panel::before {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.contact-info-panel::after {
    content: '';
    position: absolute;
    top: 40px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.contact-info-panel h2 {
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}
.info-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 45px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}
.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 35px;
}
.icon-circle {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent);
    flex-shrink: 0;
}
.info-text {
    display: flex;
    flex-direction: column;
}
.info-text span {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 5px;
}
.info-text strong {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.info-social {
    margin-top: 50px;
    position: relative;
    z-index: 2;
}
.info-social span {
    display: block;
    font-size: 16px;
    margin-bottom: 15px;
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.3s;
}
.social-icons a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

/* -----------------------------------------
   RIGHT: FORM PANEL
------------------------------------------ */
.contact-form-panel {
    background: #fff;
    padding: 60px 60px;
    height: 100%;
}
.contact-form-panel h2 {
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 35px;
}

.form-group {
    margin-bottom: 25px;
}
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}
/* Modern input with bottom border only */
.mod-input {
    width: 100%;
    background: #f8fafc;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    padding: 15px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0f172a;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}
.mod-input:focus {
    outline: none;
    background: #f1f5f9;
    border-bottom-color: var(--primary);
}

.btn-submit-modern {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 30px; 
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(10,37,64,0.2);
}
.btn-submit-modern:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(244,162,29,0.3);
}

/* -----------------------------------------
   FULL WIDTH MAP
------------------------------------------ */
.full-width-map {
    width: 100%;
    display: block;
}
.full-width-map iframe {
    width: 100%;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-info-panel, .contact-form-panel { padding: 40px 30px; }
}
@media (max-width: 767px) {
    .contact-info-panel h2, .contact-form-panel h2 { font-size: 28px; }
    .contact-info-panel, .contact-form-panel { padding: 30px 20px; }
    .btn-submit-modern { width: 100%; justify-content: center; }
}

/* -----------------------------------------
   CUSTOM FLEX ROW FOR CONTACT (FORCE LEFT-RIGHT)
------------------------------------------ */
.custom-contact-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
.contact-left-col {
    width: 40%;
    flex-shrink: 0;
}
.contact-right-col {
    width: 60%;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    /* If screen gets too small, still try to keep it side by side but adjust padding */
    .contact-info-panel, .contact-form-panel {
        padding: 30px 20px;
    }
    .contact-info-panel h2, .contact-form-panel h2 {
        font-size: 24px;
    }
}
@media (max-width: 767px) {
    /* Only on very small mobile phones it will stack */
    .custom-contact-row {
        flex-direction: column;
    }
    .contact-left-col, .contact-right-col {
        width: 100%;
    }
}

/* Specific styles for dropdown */
.mod-select {
    cursor: pointer;
    color: #4b5563;
    appearance: auto; /* Lets the browser render the dropdown arrow normally */
}
.mod-select:invalid {
    color: #9ca3af; /* Gray out the placeholder text */
}

/* Force Phone and Email to stay on the same row */
.custom-split-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
}
.split-half {
    width: 50%;
    flex-shrink: 0;
}