/* 
   Durga Bhavani Pest Control - Contact Page Styles (Redesign)
*/

:root {
    --contact-bg-dark: #101c26;
    /* Deep Dark Navy */
    --contact-accent-green: #25D366;
    /* WhatsApp/Bright Green */
    --contact-text-white: #ffffff;
    --contact-text-grey: #a0aab5;
    --card-bg: #ffffff;
    --input-border: #e0e0e0;
    --icon-bg-light: #effaf3;
}

/* Header Override for Dark Theme */
header#header {
    background-color: var(--contact-bg-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header#header .nav-menu a {
    color: var(--contact-text-white) !important;
}

header#header .nav-menu a:hover,
header#header .nav-menu a.active {
    color: var(--contact-accent-green) !important;
}

header#header .mobile-toggle span {
    background-color: var(--contact-text-white) !important;
}

/* Page Wrapper */
.contact-page-wrapper {
    background-color: var(--contact-bg-dark);
    min-height: 100vh;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

/* Background gradient effect similar to image */
.contact-page-wrapper::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 211, 102, 0.08) 0%, rgba(16, 28, 38, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

/* Hero Section */
.contact-hero {
    position: relative;
    padding: 100px 0 60px;
    text-align: center;
    z-index: 1;
}

.hero-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--contact-accent-green);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
}

.contact-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--contact-text-white);
    margin-bottom: 20px;
}

.contact-hero h1 span {
    color: var(--contact-accent-green);
}

.contact-hero p {
    color: var(--contact-text-grey);
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Content Layout */
.contact-grid {
    position: relative;
    z-index: 1;
}

/* Info Section Title (Desktop hidden usually, but good for visual hierarchy if needed) */
.info-section-title {
    color: var(--contact-bg-dark);
    margin-bottom: 20px;
    font-weight: 700;
    display: none;
    /* Hidden based on design ref, implied by layout */
}

/* Form Card */
.contact-form-card {
    background: var(--card-bg);
    border-radius: 20px;
    /* Rounded corners */
    padding: 40px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.card-header-text h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: 0.3s;
    background: #f9f9f9;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--contact-accent-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
}

.form-group textarea {
    resize: none;
    min-height: 120px;
}

/* Green Submit Button */
.btn-email-submit {
    background-color: var(--contact-accent-green);
    color: white;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-email-submit:hover {
    background-color: #1ebe57;
    transform: translateY(-2px);
}

/* Right Column: Info Stack */
.contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-section-title {
    color: #333;
    /* Dark text for "Contact Information" */
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    /* Make visible for right column header */
    margin-bottom: 15px;
    color: var(--contact-text-white);
    /* Actually white on the dark bg if outside card? 
                                        Wait, the design has "Contact Information" text above the white cards? 
                                        Or is it part of the first card? 
                                        Let's assume it's a header above the cards. */
}

/* Info Cards Row Style */
.info-card-row {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px 25px;
    display: flex;
    align-items: flex-start;
    /* items-start for multiline addresses */
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.info-card-row:hover {
    transform: translateY(-3px);
}

.icon-box {
    width: 50px;
    height: 50px;
    background-color: var(--icon-bg-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--contact-accent-green);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-text {
    flex-grow: 1;
}

.info-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.info-text p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.info-text p strong {
    color: #333;
}




/* Map Card */
.map-card {
    border-radius: 16px;
    overflow: hidden;
    height: 250px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.map-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.8rem;
    padding: 5px;
    text-align: center;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.map-card:hover .map-overlay-text {
    opacity: 1;
}


/* Responsive */

/* =========================================
   MOBILE-FIRST RESPONSIVE OVERRIDES (Contact)
   ========================================= */

@media (max-width: 768px) {

    /* Contact Hero */
    .contact-hero {
        padding: 120px 0 40px;
    }

    .contact-hero h1 {
        font-size: 2.2rem;
    }

    /* Contact Grid */
    .contact-grid .row {
        flex-direction: column;
    }

    .contact-grid .col-lg-6 {
        margin-bottom: 30px;
    }

    /* Form */
    .contact-form-card {
        padding: 30px 20px;
    }

    .card-header-text h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .form-row {
        grid-template-columns: 1fr;
        /* Stack inputs */
        gap: 15px;
    }

    .btn-whatsapp-submit {
        width: 100%;
        font-size: 1.1rem;
        padding: 15px;
    }

    /* Info Stack */
    .info-card-row {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        align-items: center;
    }

    .icon-box {
        margin-bottom: 15px;
    }

    .action-box {
        align-self: center;
        margin-top: 15px;
    }

    /* Map */
    .map-card {
        height: 300px;
        /* Taller map for mobile usage */
    }
}