/* =========================================
   CONTACT PAGE CSS
========================================= */

.contact-body { background-color: #f8fafc; color: #0f172a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; overflow-x: hidden; margin: 0; padding: 0; }
.contact-main { flex-grow: 1; padding: 10rem 1.5rem 5rem; position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; }

/* --- 1. BACKGROUND ANIMATIONS --- */
.contact-bg-wrapper { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-windmill { position: absolute; top: 15%; left: -10%; color: #e2e8f0; opacity: 0.6; font-size: 600px; animation: spin linear 25s infinite; transform-origin: center; }
.bg-sun-glow { position: absolute; top: 10%; right: -5%; color: #fb923c; filter: blur(12px); opacity: 0.2; font-size: 400px; animation: pulseRotate 5s ease-in-out infinite; transform-origin: center; }
.bg-grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(128,128,128,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(128,128,128,0.07) 1px, transparent 1px); background-size: 24px 24px; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulseRotate { 
    0% { transform: scale(1) rotate(0deg); opacity: 0.6; } 
    50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; } 
    100% { transform: scale(1) rotate(360deg); opacity: 0.6; } 
}

/* --- 2. HEADER SECTION --- */
.contact-header { text-align: center; max-width: 56rem; margin: 0 auto 5rem; }
.contact-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: #fff7ed; border: 1px solid #ffedd5; color: #ea580c; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.bounce-icon { animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }

.contact-title { font-size: 3rem; font-weight: 900; margin: 0 0 1.5rem; letter-spacing: -0.025em; line-height: 1.1; }
@media (min-width: 768px) { .contact-title { font-size: 4.5rem; } }
.text-gradient { background-image: linear-gradient(to right, #f97316, #eab308); -webkit-background-clip: text; color: transparent; }
.contact-subtitle { font-size: 1.25rem; color: #64748b; font-weight: 300; max-width: 42rem; margin: 0 auto; line-height: 1.6; }

/* --- 3. LAYOUT GRID --- */
.contact-container { display: grid; grid-template-columns: 1fr;  max-width: 80rem; margin: 0 auto; align-items: start; padding: 0 1rem; }
@media (min-width: 1024px) { .contact-container { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

/* --- 4. CONTACT FORM CARD --- */
.contact-form-card { position: relative; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); border-radius: 2.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); padding: 2rem; border: 1px solid rgba(255,255,255,0.6); overflow: hidden; }
@media (min-width: 1024px) { .contact-form-card { padding: 3rem; } }

/* Shutter Hover Effect */
.shutter-overlay { position: absolute; inset: 0; display: flex; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.7s; }
.contact-form-card:hover .shutter-overlay { opacity: 1; }
.shutter-strip { width: 20%; height: 0%; background: linear-gradient(to bottom, rgba(fff7ed,0.5), transparent); border-right: 1px solid rgba(255,255,255,0.2); transition: height 0.4s ease-out; }
.shutter-strip:last-child { border: none; }
.contact-form-card:hover .shutter-strip { height: 100%; }

.form-title { font-size: 1.875rem; font-weight: 700; margin: 0 0 2rem; position: relative; z-index: 10; }
.contact-form { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, 1fr); } }

.form-group label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin: 0 0 0.5rem 0.25rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1rem 1.25rem; border-radius: 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; font-family: inherit; font-size: 1rem; color: #0f172a; outline: none; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-sizing: border-box; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #f97316; background: white; }
.form-group textarea { resize: none; }

.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; cursor: pointer; }
.select-icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; font-size: 0.75rem; }

.btn-submit { width: 100%; background: linear-gradient(to right, #f97316, #eab308); color: white; border: none; padding: 1rem; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s; box-shadow: 0 10px 15px -3px rgba(249,115,22,0.3); }
.btn-submit:hover { background: linear-gradient(to right, #ea580c, #ca8a04); transform: scale(1.02); }
.btn-submit:active { transform: scale(0.98); }


/* --- Premium Phone Input Group Styling Track --- */
.phone-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1; /* Smooth slate-300 border base match */
    border-radius: 12px; /* Smooth card curvature */
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Enhances the container border color instantly when either field inside gains focus */
.phone-input-group:focus-within {
    border-color: #f97316; /* Changes completely to your signature orange brand color */
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); /* Modern soft outer ambient ring glow */
}

/* Country Code Dropdown Container Block */
.country-code-select {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f8fafc; /* Subtle slate-50 separation tint background */
    border-right: 1px solid #e2e8f0; /* Crisp division block line */
    min-width: 105px;
}

.country-code-select select {
    width: 100%;
    height: 100%;
    padding: 0.75rem 1.75rem 0.75rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    background: transparent;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    appearance: none; /* Strip native OS styling elements completely */
    -webkit-appearance: none;
}

/* Clean micro design absolute chevron placement for custom select box formats */
.country-code-select .dropdown-arrow {
    position: absolute;
    right: 12px;
    font-size: 0.75rem;
    color: #64748b;
    pointer-events: none;
    transition: transform 0.2s ease;
}

/* Dedicated Telephone Text Data block handling */
.phone-input-group input[type="tel"] {
    flex-grow: 1;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #0f172a;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.phone-input-group input[type="tel"]::placeholder {
    color: #94a3b8;
}

/* --- Validation UI States --- */
.error-msg {
    display: block;
    color: #dc2626; /* Premium Tailwind Red-600 */
    font-size: 0.825rem;
    font-weight: 500;
    margin-top: 4px;
    min-height: 18px;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.error-msg.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Style field inputs when an error is active */
input.invalid-field, 
textarea.invalid-field,
select.invalid-field {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* Handle the specialized compound phone layout box wrapper red ring alert toggle */
.phone-input-group.invalid-field {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}
.phone-input-group.invalid-field input[type="tel"] {
    background-color: transparent !important;
}

/* --- 5. RIGHT COLUMN: INFO CARDS --- */
.contact-info-column { display: flex; flex-direction: column; gap: 2rem;  }

.info-card { background: white; padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); display: flex; align-items: flex-start; gap: 1.5rem; transition: all 0.3s; }
.info-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }

.info-icon-box { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; flex-shrink: 0; transition: all 0.3s; }
.info-text h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.info-text p, .info-text ul { font-size: 0.875rem; color: #64748b; line-height: 1.6; margin: 0; padding: 0; list-style: none; font-weight: 500; }
.info-text ul li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.info-text ul li strong { color: #0f172a; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; display: inline-block; flex-shrink: 0; }

/* Dynamic Card Colors */
.icon-blue { background: #eff6ff; color: #2563eb; } .border-hover-blue:hover { border-color: #bfdbfe; } .border-hover-blue:hover .icon-blue { background: #2563eb; color: white; }
.icon-orange { background: #fff7ed; color: #ea580c; } .border-hover-orange:hover { border-color: #fed7aa; } .border-hover-orange:hover .icon-orange { background: #f97316; color: white; }
.icon-green { background: #f0fdf4; color: #16a34a; } .border-hover-green:hover { border-color: #bbf7d0; } .border-hover-green:hover .icon-green { background: #16a34a; color: white; }
.icon-purple { background: #faf5ff; color: #9333ea; } .border-hover-purple:hover { border-color: #e9d5ff; } .border-hover-purple:hover .icon-purple { background: #9333ea; color: white; }

.links-list a { color: #2563eb; font-weight: 700; text-decoration: none; transition: color 0.3s; }
.links-list a:hover { color: #f97316; }




/* Map Card */
/* =========================================
   FULL BLEED EDGE-TO-EDGE MAP BLOCK FIX
========================================= */
.full-bleed-map-section {
    width: 100%;
    margin-top: 6rem; /* High-fidelity vertical padding separator from form fields */
    position: relative;
    z-index: 10;
}

.map-card { 
    width: 100%; 
    height: 28rem; /* Expanded from 16rem to look clean and premium at wide spans */
    position: relative; 
    cursor: pointer; 
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.02);
}

.map-card iframe { 
    width: 100%; 
    height: 100%; 
    border: 1px solid black ; 
    filter: grayscale(100%); 
    transition: filter 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
}

.map-card:hover iframe { 
    filter: grayscale(0%); 
}

.map-overlay { 
    position: absolute; 
    inset: 0; 
    background: rgba(249, 115, 22, 0.04); /* Subtle brand tint overlay */
    transition: opacity 0.5s ease; 
    pointer-events: none; 
}

.map-card:hover .map-overlay { 
    opacity: 0; 
}

.map-badge { 
    position: absolute; 
    bottom: 2rem; 
    right: 3rem; 
    background: #ffffff; 
    padding: 0.6rem 1.5rem; 
    border-radius: 9999px; 
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1); 
    font-size: 0.8rem; 
    font-weight: 700; 
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none; 
    transition: all 0.3s;
}

.map-badge i { 
    color: #f97316; 
    margin-right: 0.35rem; 
}

/* --- 6. ENTRANCE ANIMATIONS --- */
.fade-in-up { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
.fade-in-left { opacity: 0; animation: fadeInLeft 0.6s ease-out forwards; }
.fade-in-right { opacity: 0; animation: fadeInRight 0.6s ease-out forwards; }
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }