/* ============================================================================
   GLOBAL VARIABLES & RESET
   ============================================================================ */
:root {
    --color-primary: #007bff; /* Professional Blue */
    --color-neon: #39FF14; /* NEON GREEN */
    --color-text-light: #f4f4f4;
    --color-bg-dark: #121212;
    --color-bg-mid: #1f1f1f;
    --color-input-bg: #222;
    --color-border: #444;
    --color-error: #ff4444;
    --padding-base: 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 16px;
}

main, .container, .footer-container {
    max-width: 1400px !important;
}

.contact-method p, .contact-method a {
    font-size: 1.05rem;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding: var(--padding-base) 5%;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;
    width: 100%;
}

h1, h2, h3 {
    color: var(--color-text-light);
    margin-bottom: 15px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
    color: var(--color-neon);
    text-shadow: 0 0 5px var(--color-neon);
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */
header {
    background-color: var(--color-bg-mid);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo a {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-text-light);
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

nav .active-link {
    color: var(--color-neon) !important;
    border-bottom: 2px solid var(--color-neon);
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-neon);
    font-size: 1.8em;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    nav ul {
        display: none;
        flex-direction: column;
        background-color: var(--color-bg-mid);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }
    nav ul.is-open { display: flex; }
    nav li { margin: 10px 0; text-align: center; }
}

/* ============================================================================
   BUTTONS & GLOBAL COMPONENTS
   ============================================================================ */
.btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    border: 2px solid var(--color-primary);
    transition: all 0.3s;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.btn:hover {
    background-color: transparent;
    color: var(--color-neon);
    border-color: var(--color-neon);
    box-shadow: 0 0 10px var(--color-neon);
}

.btn-primary-large, .btn-secondary-large, .btn-cta-primary, .btn-cta-secondary {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-primary-large, .btn-cta-primary {
    background-color: var(--color-primary);
    color: white;
    border: 2px solid var(--color-primary);
}

.btn-secondary-large, .btn-cta-secondary {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-border);
}

.btn-primary-large:hover, .btn-cta-primary:hover {
    background-color: transparent;
    color: var(--color-neon);
    border-color: var(--color-neon);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

.btn-secondary-large:hover, .btn-cta-secondary:hover {
    border-color: var(--color-neon);
    background-color: rgba(57, 255, 20, 0.1);
}

section {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border);
}

/* Font Awesome Fix */
.fas, .fab, .fa-solid, .fa-brands, i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}

/* ============================================================================
   HERO SECTIONS
   ============================================================================ */
.hero, .contact-hero, .legal-hero {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-mid) 100%);
    padding: 100px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-title, .contact-hero h1, .legal-hero h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.hero-subtitle, .contact-hero .hero-subtitle {
    font-size: 1.3em;
    color: #ccc;
    margin-bottom: 35px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-badge, .contact-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-bg-mid);
    border: 1px solid var(--color-primary);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.highlight-text {
    color: var(--color-neon);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.trust-item {
    color: #aaa;
    font-size: 0.95em;
}

.trust-icon { color: var(--color-neon); margin-right: 5px; }

/* ============================================================================
   GRID & CARD SYSTEMS (Index, About, Services)
   ============================================================================ */
/* Centered Headers */
.section-header-centered, .page-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-subtitle {
    color: #aaa;
    font-size: 1.1em;
    margin-top: 10px;
}

/* Service Cards */
.service-cards-grid, .feature-cards-container, .service-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.service-card-fancy, .feature-card, .service-card {
    background-color: var(--color-bg-mid);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
}

.service-card-fancy:hover, .feature-card:hover, .service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-neon);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.service-icon-large, .feature-card-icon {
    font-size: 3em;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.service-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-primary);
    font-weight: bold;
}

/* Stats Grid */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
    text-align: center;
}

.stat-item {
    background-color: var(--color-bg-mid);
    padding: 30px 20px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
}

.stat-number {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 5px;
}

/* Process Steps (Horizontal) */
.process-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.process-step {
    flex: 1;
    min-width: 200px;
    background: var(--color-bg-dark);
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: center;
    position: relative;
}

.step-number {
    background: var(--color-primary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-weight: bold;
}

.process-arrow {
    font-size: 2em;
    color: var(--color-primary);
    align-self: center;
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--color-bg-mid);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.testimonial-stars { color: #FFD700; margin-bottom: 15px; }
.testimonial-text { font-style: italic; color: #ddd; margin-bottom: 20px; }

/* Final CTA */
.final-cta-enhanced, .final-cta-section {
    text-align: center;
    padding: 80px 5%;
    background: linear-gradient(to bottom, var(--color-bg-mid), var(--color-bg-dark));
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ============================================================================
   CONTACT PAGE STYLES
   ============================================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
    margin-top: 40px;
}

.contact-form-section, .info-card, .hours-card {
    background-color: var(--color-bg-mid);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

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

.contact-form label { display: block; margin-bottom: 8px; font-weight: bold; }

.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: #222;
    border: 1px solid #555;
    color: var(--color-text-light);
    border-radius: 6px;
    font-size: 1em;
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--color-neon);
    outline: none;
}

.contact-methods { display: flex; flex-direction: column; gap: 20px; }

.contact-method {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--color-bg-dark);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.method-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.2em;
    flex-shrink: 0;
}

.method-content h3 { margin: 0 0 5px 0; font-size: 1.1em; }
.method-content p, .method-content a { margin: 0; color: white; text-decoration: none; }
.method-note { font-size: 0.85em; color: #888; display: block; margin-top: 5px; }

.whatsapp-link { color: #25D366 !important; }
.hours-list { list-style: none; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #333; }

/* ============================================================================
   FOOTER STYLES
   ============================================================================ */
footer {
    background-color: var(--color-bg-mid);
    color: #aaa;
    border-top: 1px solid var(--color-border);
    padding: 60px 0 20px;
    margin-top: auto;
}

.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 { color: var(--color-text-light); margin-bottom: 20px; }
.footer-section h4 { color: var(--color-text-light); margin-bottom: 15px; border-bottom: 2px solid var(--color-primary); display: inline-block; padding-bottom: 5px; }

.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li, .footer-contact li { margin-bottom: 12px; }
.footer-links a, .footer-contact a { color: #aaa; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-neon); }

.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact i { color: var(--color-primary); margin-top: 4px; }

.footer-social { display: flex; gap: 15px; margin-top: 20px; }
.footer-social a {
    width: 40px;
    height: 40px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    transition: all 0.3s;
}

.footer-social a:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
    font-size: 0.9em;
}

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.1); background-color: #128C7E; }

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-row.two-columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .process-steps { flex-direction: column; }
    .process-arrow { transform: rotate(90deg); margin: 10px 0; }
    .hero-title { font-size: 2em; }
    .cta-buttons-group { flex-direction: column; }
    .btn-primary-large, .btn-secondary-large { width: 100%; text-align: center; }
}

/* ============================================================================
   LAYOUT FIX: Force 2x2 Grid for Feature Cards
   ============================================================================ */
.feature-cards-container {
    /* This forces exactly 2 columns of equal width */
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Ensure they still stack nicely on mobile phones */
@media (max-width: 768px) {
    .feature-cards-container {
        grid-template-columns: 1fr !important; /* Stack 1 on top of another on mobile */
    }
}

/* ============================================================================
   LAYOUT FIX: Force 2x2 Grid for Home Page Services
   ============================================================================ */
.service-cards-grid {
    /* This forces exactly 2 columns of equal width */
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Ensure they stack nicely on mobile phones */
@media (max-width: 768px) {
    .service-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   LAYOUT FIX: Stack Testimonials Vertically (4 Rows)
   ============================================================================ */
.testimonials-grid {
    /* Force 1 column so they stack on top of each other */
    grid-template-columns: 1fr !important;

    /* Optional: Limit the width so they aren't too stretched out */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

* ============================================================================
NEW MISSION SECTION STYLES
============================================================================ */
.mission-section {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
}

.mission-card {
    background: linear-gradient(145deg, #1f1f1f, #151515); /* Subtle 3D gradient */
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-neon); /* Neon accent bar on top */
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); /* Deep shadow to lift it off page */
    position: relative;
}

/* The Target Icon */
.mission-icon {
    font-size: 3.5em;
    color: var(--color-primary);
    margin-bottom: 25px;
    opacity: 0.9;
}

.mission-card h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: var(--color-text-light);
    letter-spacing: 1px;
}

/* The Main "Big Idea" Text */
.mission-lead {
    font-size: 1.5em; /* Larger, readable font */
    line-height: 1.6;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 300;
}

/* Highlight your brand name */
.highlight-brand {
    color: var(--color-primary);
    font-weight: 700;
}

/* Highlight key words (Professionalism, Accuracy) */
.highlight-keyword {
    color: var(--color-neon);
    font-weight: 600;
}

/* The Secondary Description */
.mission-sub {
    font-size: 1.1em;
    color: #aaa;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .mission-card {
        padding: 40px 20px;
    }
    .mission-lead {
        font-size: 1.2em;
    }
    .mission-icon {
        font-size: 2.5em;
    }
}

/* ============================================================================
   NEW ABOUT HERO STYLES
   ============================================================================ */
.about-hero {
    /* Dark gradient background */
    background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    padding: 100px 5% 80px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

/* Add a subtle glow effect behind the text */
.about-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.08) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.about-hero h1 {
    font-size: 3.5em; /* Larger title */
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -1px;
}

.about-hero .text-primary {
    color: var(--color-primary); /* Uses your blue variable */
    text-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
}

.about-hero .hero-subtitle {
    font-size: 1.4em;
    color: #ccc;
    margin-bottom: 35px;
    font-weight: 300;
}

/* The new badges (Since 2015, Location) */
.hero-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-badge-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1em;
    color: var(--color-neon);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.hero-badge-item:hover {
    background-color: rgba(57, 255, 20, 0.1);
    border-color: var(--color-neon);
    transform: translateY(-2px);
}

.hero-badge-item i {
    font-size: 1.1em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .about-hero { padding: 60px 5%; }
    .about-hero h1 { font-size: 2.5em; }
    .about-hero .hero-subtitle { font-size: 1.2em; }
}

/* ============================================================================
   UNIFIED HOVER EFFECTS (Match Hero Badges)
   ============================================================================ */
.feature-card:hover,
.service-card:hover,
.service-card-fancy:hover,
.stat-item:hover,
.stat-item-enhanced:hover,
.testimonial-card:hover,
.mission-card:hover,
.contact-method:hover,
.next-step-card:hover,
.info-card:hover {
    /* 1. Subtle Neon Green Background Tint */
    background-color: rgba(57, 255, 20, 0.05) !important;

    /* 2. Neon Border */
    border-color: var(--color-neon) !important;

    /* 3. Lift Effect */
    transform: translateY(-5px) !important;

    /* 4. Soft Neon Green Glow Shadow */
    box-shadow: 0 10px 30px rgba(57, 255, 20, 0.15) !important;
}

/* Optional: Make the text/icons glow slightly on hover too */
.feature-card:hover h3,
.feature-card:hover .feature-card-icon,
.service-card:hover h3,
.stat-item:hover .stat-number,
.contact-method:hover i {
    color: var(--color-neon) !important;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
    transition: all 0.2s ease;
}

/* ============================================================================
   TEAM SECTION STYLES
   ============================================================================ */
.team-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.team-card {
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    max-width: 450px; /* Slightly wider for a "Founder" card */
    width: 100%;
    transition: transform 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
}

.team-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-neon);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Neon Top Bar */
.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-neon));
}

.team-photo-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto 25px;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    padding: 5px; /* Spacing between border and image */
    background: var(--color-bg-mid);
}

.team-placeholder-icon {
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5em;
    color: #555;
}

.team-card h3 {
    font-size: 1.8em;
    margin-bottom: 5px;
    color: var(--color-text-light);
}

.team-role {
    display: inline-block;
    background-color: rgba(0, 123, 255, 0.1);
    color: var(--color-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 20px;
}

.team-bio {
    color: #bbb;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.05em;
}

.team-social {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-social a {
    width: 40px;
    height: 40px;
    background-color: var(--color-bg-mid);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    transition: all 0.3s;
}

.team-social a:hover {
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

/* ============================================================================
   SERVICES PAGE ENHANCEMENTS
   ============================================================================ */

/* 1. Make "Our Professional Services" Stand Out */
.page-title h1 {
    font-size: 3.5em; /* Make it larger */
    font-weight: 800;
    /* Create a text gradient from White to Blue */
    background: linear-gradient(to right, #ffffff, var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Add a subtle glow */
    text-shadow: 0 0 30px rgba(0, 123, 255, 0.4);
    margin-bottom: 20px;
}

/* 2. Force Tax Prep Cards into a 2x2 Grid */
#tax .service-cards-container {
    display: grid;
    /* This forces exactly 2 columns, creating a 2x2 layout for 4 cards */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
}

/* 3. Make Text "Pop" on Hover */
.service-card {
    transition: all 0.3s ease; /* Smooth animation */
}

/* When hovering the card, turn the title and list items NEON */
.service-card:hover h3,
.service-card:hover ul li {
    color: var(--color-neon) !important;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6); /* Neon glow */
    transition: all 0.3s ease;
}

/* Make the list items slightly brighter/bolder on hover */
.service-card:hover ul li {
    font-weight: 500;
    transform: translateX(5px); /* Tiny move to the right for effect */
}

/* Mobile Fix: Keep it 1 column on small screens */
@media (max-width: 768px) {
    #tax .service-cards-container {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   LAYOUT FIX: Document Translation 2x2 Grid
   ============================================================================ */
#translation .service-cards-container {
    display: grid;
    /* Force exactly 2 columns */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
}

/* Ensure they stack vertically on mobile */
@media (max-width: 768px) {
    #translation .service-cards-container {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   PRICING SECTION STYLES
   ============================================================================ */
.pricing-section {
    padding: 80px 5%;
    background: linear-gradient(180deg, var(--color-bg-mid) 0%, #151515 100%);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.pricing-lead-text {
    font-size: 1.15em;
    color: #ccc;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns side-by-side */
    gap: 30px;
    margin-bottom: 50px;
}

.pricing-card {
    background: var(--color-bg-dark);
    padding: 40px 30px;
    border-radius: 15px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect - Matches other cards */
.pricing-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-neon);
    box-shadow: 0 10px 30px rgba(57, 255, 20, 0.1);
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.pricing-card:hover::before {
    transform: scaleX(1);
    background: var(--color-neon);
}

.pricing-icon {
    font-size: 3em;
    color: var(--color-primary);
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.pricing-card:hover .pricing-icon {
    color: var(--color-neon);
    transform: scale(1.1);
}

.pricing-card h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: var(--color-text-light);
}

.pricing-card p {
    color: #999;
    font-size: 0.95em;
    line-height: 1.6;
}

/* Responsive Mobile Layout */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    /* Make the last card span full width on tablet for balance */
    .pricing-grid > .pricing-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .pricing-grid > .pricing-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ============================================================================
   CONTACT HERO ENHANCEMENTS
   ============================================================================ */
.contact-hero {
    background: radial-gradient(circle at top center, #1f1f1f 0%, #0a0a0a 100%);
    padding: 100px 5% 80px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

/* Subtle glow effect behind title */
.contact-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

/* "Get In Touch" Pill Badge */
.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 123, 255, 0.1);
    border: 1px solid var(--color-primary);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 25px;
    font-size: 0.9em;
    color: var(--color-primary);
    font-weight: 600;
}

/* Main Title */
.contact-hero h1 {
    font-size: 3.5em;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Gradient Text for Business Name */
.text-highlight {
    background: linear-gradient(135deg, #fff 30%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.contact-hero .hero-subtitle {
    font-size: 1.3em;
    color: #bbb;
    margin-bottom: 40px;
    font-weight: 300;
}

/* Response Time Box */
.response-badge {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--color-bg-mid);
    border: 1px solid var(--color-border);
    padding: 10px 25px;
    border-radius: 12px;
    text-align: left;
}

.response-icon {
    width: 40px;
    height: 40px;
    background: rgba(57, 255, 20, 0.1);
    color: var(--color-neon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

.response-text span {
    display: block;
    font-size: 0.8em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.response-text strong {
    color: var(--color-text-light);
    font-size: 1.1em;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .contact-hero h1 { font-size: 2.2em; }
    .contact-hero { padding: 60px 5%; }
}

/* ============================================================================
   FINAL CONTACT PAGE POLISH
   ============================================================================ */

/* 1. Apply the "JDavila Tax Services" Gradient to Section Headings */
.form-header h2,
.info-card h2 {
    /* Gradient from White to Professional Blue */
    background: linear-gradient(135deg, #ffffff 30%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Make font thicker so the gradient is visible */
    font-weight: 800;
    margin-bottom: 15px;

    /* Subtle glow to make it pop against the dark bg */
    text-shadow: 0 0 20px rgba(0, 123, 255, 0.2);
}

/* 2. Fix "Too Blue" Icons -> Switch to Neon Green Outlines */
.method-icon {
    /* Remove the solid blue background */
    background-color: transparent !important;

    /* Switch to Neon Green Border & Icon */
    border: 2px solid var(--color-neon) !important;
    color: var(--color-neon) !important;

    /* Optional: Very faint green tint inside */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

/* 3. Icon Hover Effect - Ring Glow (No Fill) */
.contact-method:hover .method-icon {
    /* Keep background TRANSPARENT so it's not a "dot" */
    background-color: transparent !important;

    /* Make the Icon and Border Neon Green */
    color: var(--color-neon) !important;
    border-color: var(--color-neon) !important;

    /* Add a glow around the ring instead of filling it */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);

    /* Slight zoom for emphasis */
    transform: scale(1.1);
}

/* 4. Fix Office Hours Icon too */
.hours-internal i {
    color: var(--color-neon) !important;
}

/* ============================================================================
   UNIFIED HEADINGS (Blue Gradient Style)
   Applies the "Professional Services" look to all major section titles.
   ============================================================================ */

/* 1. Services Page Headings */
#tax h2,
#tax-id h2,
#notary h2,
#translation h2,
.pricing-section h2,

    /* 2. Call to Action (Ready to Get Started) */
.final-cta-section h2,
.final-cta-enhanced h2,

    /* 3. About Page Headings */
.about-hero h1,          /* About JDavila Tax Services */
.mission-card h2,        /* Our Mission */
.why-choose-us h2,       /* Our Core Values */
.stats-counter-section h2, /* Our Track Record */
.section-header-centered h2 /* Catch-all for centered headers */
{
    /* The Blue Gradient Background */
    background: linear-gradient(to right, #ffffff, var(--color-primary)) !important;

    /* Clip the background to the text shapes */
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* Make the text transparent so the gradient shows through */
    -webkit-text-fill-color: transparent !important;
    color: var(--color-primary) !important; /* Fallback color */

    /* The Glow Effect */
    text-shadow: 0 0 30px rgba(0, 123, 255, 0.4) !important;

    /* Ensure bold weight */
    font-weight: 800 !important;
}

/* ============================================================================
   FIX: Service Card List Icons (Present & Green)
   ============================================================================ */
.service-card ul {
    padding-left: 0;
}

.service-card ul li {
    /* Remove default list styling */
    list-style: none;
    position: relative;
    padding-left: 25px; /* Space for the icon */
    margin-bottom: 8px; /* Space between lines */
    color: #ddd; /* Keep the text slightly lighter than white */
}

.service-card ul li::before {
    /* Set content to FontAwesome checkmark and set position */
    content: "\f00c";
    font-family: "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important; /* Ensure the solid icon style loads */
    position: absolute;
    left: 0;
    top: 0;
    /* Set the color to neon green */
    color: var(--color-neon) !important;
    font-size: 0.9em;
}

/* Ensure the text and icon color stays neon green on hover */
.service-card:hover ul li,
.service-card:hover ul li::before {
    color: var(--color-neon) !important;
}

/* ============================================================================
   FIX: Exclude List Icons from Gradient Text Effect
   ============================================================================ */
.service-card ul li::before {
    /* 1. Force a solid color (Neon Green) */
    color: var(--color-neon) !important;
    -webkit-text-fill-color: var(--color-neon) !important;

    /* 2. Reset the text transparency/clipping effect */
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    /* 3. Remove text shadow that caused the 'dot' glow */
    text-shadow: none !important;

    /* Ensure the solid checkmark icon loads */
    font-family: "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
}

/* ============================================================================
   FIX: Service Heading Icon Color Override (Solid Neon Green)
   ============================================================================ */
.heading-icon-accent {
    /* Force color to Neon Green and reset gradient properties */
    color: var(--color-neon) !important;
    -webkit-text-fill-color: var(--color-neon) !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
    padding-right: 10px;
}

/* ============================================================================
   UTILITY CLASS: WHITE-TO-BLUE GRADIENT TEXT
   ============================================================================ */
.text-gradient-primary {
    /* Create a gradient background from white to your primary blue */
    background: linear-gradient(to right, #ffffff, var(--color-primary));

    /* Clip the gradient to the shape of the text */
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* Make the text transparent so the gradient shows through */
    -webkit-text-fill-color: transparent !important;
    color: var(--color-primary) !important; /* Fallback color */

    /* Add a subtle glow for better visibility on dark backgrounds */
    text-shadow: 0 0 10px rgba(0, 123, 255, 0.2);

    /* Ensure bold weight for visibility */
    font-weight: 800;
}

/* ============================================================================
   GRADIENT TEXT APPLICATION FIXES (JDAVILA TAX SERVICES LOOK)
   ============================================================================ */

/* Targets the specific text element that uses the solid blue brand color */
.about-hero .text-primary,
.highlight-brand,
.footer-section h4 {
    /* Apply the gradient effect */
    background: linear-gradient(to right, #ffffff, var(--color-primary)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--color-primary) !important; /* Fallback */
    text-shadow: 0 0 10px rgba(0, 123, 255, 0.15) !important;
    font-weight: 800 !important;
}

/* Specific adjustment for links inside the footer contact section */
.footer-contact a {
    /* Ensure only the links that should be blue get this style */
    color: var(--color-primary);
    font-weight: 700;
}

.footer-contact a:hover {
    /* Keep hover behavior */
    color: var(--color-neon);
}

/* ============================================================================
   FIX: Send Message Button to Match Badge Style
   ============================================================================ */
.contact-form .btn-primary {
    /* Pill shape */
    border-radius: 30px;

    /* Dark fill with neon text/border (Matches the badge aesthetic) */
    background-color: var(--color-bg-dark);
    color: var(--color-neon) !important;
    border: 2px solid var(--color-neon);

    /* Subtle glow when static */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
    transition: all 0.3s ease;
}

.contact-form .btn-primary:hover {
    /* Reverse hover for strong feedback: Neon fill, dark text */
    background-color: var(--color-neon);
    color: var(--color-bg-dark) !important;
    border-color: var(--color-neon);
    box-shadow: none;
}

/* ============================================================================
   FIX: Spacing Below Submit Button
   ============================================================================ */
.form-footer-text {
    /* Adding space above the text */
    margin-top: 15px !important;
    text-align: center;
    color: #888;
    font-size: 0.9em;
}

/* ============================================================================
   FIX: Spacing between stacked CTA buttons on mobile
   ============================================================================ */
@media (max-width: 768px) {
    .hero-cta-group {
        /* Ensure stacking is correct */
        display: flex;
        flex-direction: column;
        /* Increase vertical space between the stacked buttons */
        gap: 20px; /* Adjust 20px as needed for more space */
        padding: 0 5%; /* Optional: ensures buttons don't touch screen edges */
    }
}

/* ============================================================================
   FIX: HERO CTA BUTTONS TO MATCH BADGE/PILL STYLE
   ============================================================================ */

/* 1. Base Styling and Shape */
.hero-cta-group .btn-primary-large,
.hero-cta-group .btn-secondary-large {
    border-radius: 50px; /* Pill Shape */
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

/* 2. Primary Button (Schedule Consultation): Dark Fill, Neon Accent */
.hero-cta-group .btn-primary-large {
    background-color: var(--color-bg-mid); /* Darker Background */
    color: var(--color-neon) !important;   /* Neon Text */
    border-color: var(--color-neon) !important; /* Neon Border */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); /* Subtle initial glow */
}

.hero-cta-group .btn-primary-large:hover {
    background-color: var(--color-neon); /* Fill fully with Neon on hover */
    color: var(--color-bg-dark) !important; /* Dark text for contrast */
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.6);
}

/* 3. Secondary Button (View Our Services): Dark Outline, Neon Accent */
.hero-cta-group .btn-secondary-large {
    background-color: transparent; /* Keep dark background */
    color: var(--color-neon) !important;
    border-color: var(--color-neon) !important;
}

.hero-cta-group .btn-secondary-large:hover {
    background-color: rgba(57, 255, 20, 0.1); /* Subtle neon tint on hover */
    color: var(--color-neon) !important;
}
/* ============================================================================
   FIX: HERO CTA BUTTONS to Blue Outline (Removing Neon Glow)
   ============================================================================ */

/* Primary Button (Schedule Consultation): Dark Fill, Blue Accent */
.hero-cta-group .btn-primary-large {
    background-color: var(--color-bg-mid); /* Darker Background */
    color: var(--color-primary) !important;   /* Blue Text */
    border-color: var(--color-primary) !important; /* Blue Border */
    box-shadow: none; /* Remove Glow */
}

.hero-cta-group .btn-primary-large:hover {
    background-color: var(--color-primary); /* Fill with Blue on hover */
    color: white !important; /* White Text on Blue Fill */
    border-color: var(--color-primary);
    box-shadow: none; /* Keep glow removed */
}

/* Secondary Button (View Our Services): Dark Outline, Blue Accent */
.hero-cta-group .btn-secondary-large {
    background-color: transparent; /* Keep dark background */
    color: var(--color-primary) !important; /* Blue Text */
    border-color: var(--color-primary) !important; /* Blue Border */
    box-shadow: none; /* Remove Glow */
}

.hero-cta-group .btn-secondary-large:hover {
    background-color: rgba(0, 123, 255, 0.1); /* Subtle Blue Tint on hover */
    color: var(--color-primary) !important;
}

/* ============================================================================
   FIX: FINAL CTA BUTTON (Schedule Your Consultation) to Blue Outline
   ============================================================================ */
.final-cta-section .btn {
    /* 1. Dark Fill, Blue Text/Border */
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);

    /* 2. Style (Matching the Home Page CTA size/shape) */
    box-shadow: none !important; /* Remove any old glows */
    border-radius: 50px; /* Pill shape */
    padding: 15px 30px; /* Large button size */
    font-size: 1.1em;
    transition: all 0.3s ease;
}

/* 3. Hover Style: Fill solid blue */
.final-cta-section .btn:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary);
}

/* ============================================================================
   SERVICES PAGE: MOBILE & BUTTON FIXES
   ============================================================================ */

/* 1. Fix Header Size on Mobile */
@media (max-width: 768px) {
    /* Reduce the size of the main page title so it doesn't go out of frame */
    .page-title h1 {
        font-size: 2.5em !important;
    }
}

/* 2. Unify Button Style (Tax, Notary, Quote, etc.) */
#tax .btn,
#tax-id .btn,
#notary .btn,
#translation .btn,
.pricing-cta .btn-primary-large {
    /* Apply Dark Fill / Blue Outline Style */
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
    box-shadow: none !important;

    /* Make them all pill-shaped like the main CTAs */
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 1.1em;
}

/* 3. Unify Button Hover Effect */
#tax .btn:hover,
#tax-id .btn:hover,
#notary .btn:hover,
#translation .btn:hover,
.pricing-cta .btn-primary-large:hover {
    /* Fill Blue on hover, White Text */
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary);
}

/* ============================================================================
   CONTACT PAGE FIXES (Mobile Overflow & Button Style)
   ============================================================================ */

/* 1. Fix Button: Revert to Solid Blue Primary Color & Remove Glow */
.contact-form .btn-primary {
    /* Ensure solid blue color based on your variable */
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;

    /* Remove all glow and set a standard shape */
    border-radius: 8px !important;
    box-shadow: none !important;

    /* Override any specific badge sizing */
    padding: 12px 25px !important;
}

.contact-form .btn-primary:hover {
    background-color: #0069d9 !important; /* Slightly darker blue for contrast */
    border-color: #0069d9 !important;
    box-shadow: none !important;
}

/* 2. Fix Mobile Overflow: Reduce Padding on Form Card */
@media (max-width: 576px) {
    .contact-form-section {
        /* Reduce the internal padding of the card so it fits within the phone screen */
        padding: 30px 20px !important;
    }
}

/* ============================================================================
   FINAL CONTACT PAGE FIXES
   ============================================================================ */

/* 1. Fix Button Style: Apply Dark-Fill, Blue-Outline, Pill Shape */
.contact-form .btn-primary {
    /* Set color to match other CTAs */
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;

    /* Apply Pill Shape and Large CTA Size */
    border-radius: 50px !important;
    padding: 15px 30px !important;
    font-size: 1.1em !important;

    /* Remove any leftover glow */
    box-shadow: none !important;
}

.contact-form .btn-primary:hover {
    /* Reverse hover: Fill Blue, White Text */
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}


/* 2. Fix Mobile Overflow: Aggressively Reduce Form Padding */
@media (max-width: 576px) {
    .contact-form-section {
        /* Reduce horizontal padding to ensure the form card fits */
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ============================================================================
   FINAL MOBILE OVERFLOW FIX (Aggressive Padding)
   ============================================================================ */
@media (max-width: 420px) {
    /* 1. Reduce main wrapper padding (5% is too much on narrow screens) */
    main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 2. Reduce internal padding of the form card to fit content */
    .contact-form-section {
        padding: 25px 10px !important; /* Minimal horizontal padding */
    }

    /* 3. Shrink the wide text inside the Office Hours list */
    .hours-list li {
        font-size: 0.9em !important; /* Slightly smaller font for time/day */
    }
}

/* ============================================================================
   FINAL POLISH: SPACING AND TEXT TRUNCATION FIXES
   ============================================================================ */

/* 1. Fix Spacing below Submit Button (Push Privacy Text Down) */
.form-footer-text {
    margin-top: 20px !important; /* Increase space to push text away from button */
}

/* 2. Fix Office Hours Text Truncation (Apply aggressively on smallest screens) */
@media (max-width: 420px) {
    /* Reduce font size for the time strings which are too long */
    .hours-list li .time {
        font-size: 0.8em !important;
    }

    /* Optional: Ensure the day name doesn't get squeezed too much */
    .hours-list li .day {
        font-size: 0.9em;
    }
}

/* ============================================================================
   FINAL SPACING AND TRUNCATION FIXES
   ============================================================================ */

/* 1. Fix Vertical Spacing under Submit Button */
.contact-form-section .form-footer-text {
    /* Increase vertical margin aggressively to push text down from button */
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}

/* 2. Fix Office Hours Truncation (Time Text Runs Out) */
.hours-list li .time,
.hours-list li .day {
    /* Ensure no wrapping issues on small text */
    white-space: nowrap;
    /* Reduce font size for the time strings which are too long */
    font-size: 0.85em !important;
}

@media (max-width: 420px) {
    /* Reduce the overall width of the space-between flex item */
    .hours-list li .time {
        font-size: 0.8em !important;
    }
}

/* ============================================================================
   CONTACT PAGE - COMPREHENSIVE MOBILE FIX
   Add this to the bottom of your main CSS file or include as separate stylesheet
   ============================================================================ */

/* 1. PREVENT ALL HORIZONTAL OVERFLOW */
* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 2. ENSURE FORM INPUTS DON'T EXCEED CONTAINER */
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. FIX LONG EMAIL ADDRESSES FROM BREAKING LAYOUT */
.method-content a,
.method-content p {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 4. MOBILE BREAKPOINT (TABLETS AND BELOW) */
@media (max-width: 992px) {
    /* Stack contact grid vertically */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    /* Stack form columns */
    .form-row.two-columns {
        grid-template-columns: 1fr !important;
    }
}

/* 5. SMALL MOBILE SCREENS (PHONES) */
@media (max-width: 768px) {
    /* Reduce hero padding */
    .contact-hero {
        padding: 60px 5% !important;
    }

    .contact-hero h1 {
        font-size: 2.2em !important;
    }

    /* Reduce section padding */
    .contact-main {
        padding: 40px 3% !important;
    }

    /* Reduce card padding */
    .contact-form-section,
    .info-card {
        padding: 30px 20px !important;
    }

    /* Make response badge stack better */
    .response-badge {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* 6. VERY SMALL SCREENS (320px - 480px) */
@media (max-width: 480px) {
    /* Minimize all padding to prevent overflow */
    main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .contact-hero {
        padding: 50px 15px !important;
    }

    .contact-main .container {
        padding: 0 !important;
    }

    /* Aggressive card padding reduction */
    .contact-form-section,
    .info-card {
        padding: 20px 15px !important;
    }

    /* Reduce form field padding */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 10px 12px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Fix button width */
    .contact-form .btn-primary {
        width: 100% !important;
        padding: 12px 20px !important;
    }

    /* Reduce office hours text size */
    .hours-list li {
        font-size: 0.9em;
        padding: 8px 0;
    }

    .hours-list li .time {
        font-size: 0.85em;
    }

    /* Reduce contact method spacing */
    .contact-methods {
        gap: 15px !important;
    }

    .contact-method {
        padding: 15px !important;
    }

    /* Make email text smaller if needed */
    .method-content a {
        font-size: 0.95em;
    }

    /* Fix hero badges */
    .hero-badge-pill {
        font-size: 0.85em;
        padding: 6px 15px;
    }

    /* Reduce heading sizes */
    .form-header h2,
    .info-card h2 {
        font-size: 1.5em !important;
    }

    .contact-method h3 {
        font-size: 1em !important;
    }
}

/* 7. EXTRA SMALL SCREENS (iPhone SE, etc - 320px) */
@media (max-width: 375px) {
    /* Even more aggressive padding */
    main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .contact-form-section,
    .info-card {
        padding: 20px 10px !important;
    }

    /* Shrink text further */
    .contact-hero h1 {
        font-size: 1.8em !important;
    }

    .hero-subtitle {
        font-size: 1.1em !important;
    }

    /* Make form fields more compact */
    .form-row {
        margin-bottom: 15px !important;
    }

    .contact-form label {
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    /* Shrink office hours display */
    .hours-list li .day {
        font-size: 0.85em;
    }

    .hours-list li .time {
        font-size: 0.8em;
    }

    /* Reduce icon sizes */
    .method-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1em !important;
    }
}

/* 8. FIX MAP RESPONSIVENESS */
.map-section {
    width: 100%;
    overflow: hidden;
}

.map-section iframe {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .map-section {
        margin-top: 30px !important;
    }

    .map-section .info-card {
        height: 300px !important;
    }
}

/* 9. FIX RECAPTCHA ON MOBILE */
.g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
}

@media (max-width: 375px) {
    .g-recaptcha {
        transform: scale(0.77);
    }
}

/* 10. ENSURE CONTAINER DOESN'T OVERFLOW */
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 11. FIX WHATSAPP METHOD LINK */
.whatsapp-method {
    text-decoration: none;
    color: inherit;
}

/* 12. ADD PROPER SPACING TO FOOTER TEXT */
.form-footer-text {
    margin-top: 20px !important;
    font-size: 0.85em;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .form-footer-text {
        font-size: 0.8em;
    }
}

/* 13. FIX POTENTIAL BUTTON OVERFLOW */
.contact-form button[type="submit"] {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 14. FIX RESPONSE BADGE ON SMALL SCREENS */
@media (max-width: 480px) {
    .response-text strong {
        font-size: 1em;
    }

    .response-icon {
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    main { padding: 0 15px !important; }
    .contact-form-section, .info-card { padding: 20px 15px !important; }
    .contact-form input, .contact-form select, .contact-form textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px 12px !important;
    }
    .method-content a {
        word-break: break-word;
        font-size: 0.9em;
    }
    .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }
}

/* ============================================================================
   FIX: FINAL CTA BUTTONS (Ready to Simplify) to Blue Outline/Pill Shape
   ============================================================================ */

/* 1. Base Styling and Shape */
.final-cta-enhanced .btn-cta-primary,
.final-cta-enhanced .btn-cta-secondary,
.final-cta-section .btn-cta-primary,
.final-cta-section .btn-cta-secondary {
    /* Base Pill Shape and Size */
    border-radius: 50px !important;
    padding: 15px 30px !important;
    font-size: 1.1em !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* 2. Primary Button (Schedule Consultation): Dark Fill, Blue Border */
.final-cta-enhanced .btn-cta-primary,
.final-cta-section .btn-cta-primary {
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.final-cta-enhanced .btn-cta-primary:hover,
.final-cta-section .btn-cta-primary:hover {
    background-color: var(--color-primary) !important; /* Blue fill on hover */
    color: white !important;
}

/* 3. Secondary Button (Call): Transparent/Dark Outline */
.final-cta-enhanced .btn-cta-secondary,
.final-cta-section .btn-cta-secondary {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.final-cta-enhanced .btn-cta-secondary:hover,
.final-cta-section .btn-cta-secondary:hover {
    background-color: rgba(0, 123, 255, 0.1) !important; /* Subtle blue tint on hover */
    color: var(--color-primary) !important;
}

/* ============================================================================
   ERROR PAGE FIXES (Alignment and Button Style)
   ============================================================================ */

/* 1. Ensure all main elements are centered */
.message-page.error-page {
    text-align: center;
}

/* 2. Center the button group (Try Again / Return Home) */
.error-page > div {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 3. Button Styling (Try Contact Form Again) */
.error-page .btn {
    /* Apply Dark Fill / Blue Outline Style */
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
    box-shadow: none !important;

    /* Make it a small pill-shaped button */
    border-radius: 50px !important;
    padding: 12px 25px !important;
    font-size: 1em !important;
    transition: all 0.3s ease;
}

.error-page .btn:hover {
    background-color: var(--color-primary) !important; /* Fill Blue on hover */
    color: white !important;
    border-color: var(--color-primary);
}

/* 4. Style for the Secondary Link (Return to Home) */
.error-page .secondary-link {
    /* Ensure it aligns vertically with the button */
    align-self: center;
    /* Make it less harsh than a regular link */
    color: var(--color-text-light) !important;
    text-decoration: underline;
    padding: 0 5px; /* Add small padding for hit area */
}

/* ============================================================================
   FIX: Error Page "Return to Home" Button Style
   ============================================================================ */
.error-page .secondary-link {
    /* Secondary Button Styling */
    background-color: transparent !important;
    border: 2px solid var(--color-text-light); /* Light Gray Border */
    color: var(--color-text-light) !important;

    /* Shape and Sizing (Matching the primary button pill) */
    border-radius: 50px !important;
    padding: 12px 25px !important;
    font-size: 1em !important;
    text-decoration: none !important; /* Remove the underline */

    /* Animation */
    transition: all 0.3s ease;
}

.error-page .secondary-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle white tint on hover */
    border-color: var(--color-neon); /* Neon border on hover */
    color: var(--color-text-light) !important;
}

/* ============================================================================
   FIX: Error Page Contact Info Cleanup
   ============================================================================ */
.error-contact-info {
    padding: 35px 40px !important; /* Increased padding for breathing room */
}

.error-contact-info h2 {
    text-align: center !important; /* Ensure header remains centered */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Fixes spacing and alignment for Call/Email rows */
.error-contact-info .contact-rows p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 !important;
}

/* Styles the Call/Email labels */
.error-contact-info strong {
    display: inline-block;
    min-width: 60px;
    color: var(--color-text-light);
    font-size: 1.1em;
}

/* Styles the individual Hour rows */
.error-contact-info .hours-detail {
    display: flex;
    justify-content: space-between;
    max-width: 300px; /* Center the narrow hours list */
    margin: 5px auto;
    font-size: 0.9em;
    color: #ccc;
}

.error-contact-info .hours-detail .day {
    font-weight: 700;
}

/* ============================================================================
   FINAL CSS OVERRIDE: FIX SIDE-BY-SIDE CLUTTER IN ERROR BOX
   ============================================================================ */

/* Targets the main content area of the error box */
.error-contact-info {
    /* Ensure the box itself centers and text aligns left for readability */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}

/* Force all immediate child divs (contact rows, hours group) to stack vertically */
.error-contact-info > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure the sub-elements (Call/Email) are not trying to be a row */
.error-contact-info .contact-rows p {
    display: block !important;
    margin-bottom: 15px !important;
}

/* ============================================================================
   DEFINITIVE CSS OVERRIDE: FIX ERROR CARD CLUTTER
   ============================================================================ */

.error-contact-info {
    /* Ensure the main card is a simple stacking block */
    display: block !important;
    width: 100% !important;
    text-align: left !important; /* Ensure text aligns left for readability */
    padding: 30px 20px !important; /* Set standard internal padding */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Target all main containers inside the card (the ones causing the columns) and force them to stack */
.error-contact-info > div,
.error-contact-info > p {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
}

/* Ensure the hour rows (day and time) maintain their flex layout for spacing,
   but don't force them into a larger grid */
.error-contact-info .hours-detail {
    display: flex !important;
    justify-content: space-between !important;
    /* Center the narrow hours list */
    max-width: 300px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================================
   THANK YOU PAGE FIXES
   ============================================================================ */

/* 1. Fix Alignment: Constrain width and center the entire content block */
.message-page {
    max-width: 800px; /* Constrain content width */
    margin: 0 auto;  /* Center the block within the main container */
    padding: 60px 20px; /* Add padding for breathing room */
    text-align: center; /* Ensure internal text/inline elements are centered */
}

/* 2. Fix Button Style: Apply Dark Fill / Blue Outline Pill Shape */
.message-page .btn {
    /* Base Pill Shape and Size */
    border-radius: 50px !important;
    padding: 15px 30px !important;
    font-size: 1.1em !important;
    box-shadow: none !important;

    /* Dark Fill, Blue Outline */
    background-color: var(--color-bg-mid) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

.message-page .btn:hover {
    /* Blue Fill on hover */
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* 3. Proactive Icon Fix: Style the phone/document icons in the cards */
.thank-you-cards-container .feature-card-icon {
    font-size: 3em;
    color: var(--color-primary); /* Use primary blue accent */
    margin-bottom: 15px;
    display: block;
}

/* ============================================================================
   FIX: Error Page Button Sizing on Small Mobile Screens
   ============================================================================ */
@media (max-width: 480px) {
    .error-page .btn,
    .error-page .secondary-link {
        /* Reduce padding and font size for a smaller look */
        padding: 10px 20px !important;
        font-size: 0.9em !important;
    }

    /* Ensure the gap between the two buttons is tight */
    .error-page > div {
        gap: 15px !important;
    }
}