
<style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #333; /* Darker text for readability */
        }
        /* Custom styles for elements that might need more specific control */
        .gradient-bg {
            background: linear-gradient(to right, #4CAF50, #8BC34A); /* Green gradient */
        }
        .text-blue-700-hover:hover {
            color: #1D4ED8; /* Darker blue on hover */
        }
        .btn-primary {
            background-color: #2196F3; /* Blue */
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px; /* Fully rounded */
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #1976D2; /* Darker blue on hover */
        }
        /* FAQ Dropdown Styles */
        .accordion-item .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
            padding-top: 0; /* Ensures no initial padding when closed */
        }
        .accordion-item input[type="checkbox"]:checked ~ .accordion-content {
            max-height: 500px; /* Adjust as needed - should be larger than max possible content height */
            padding-top: 0.5rem; /* Add padding when open */
        }
        .accordion-item input[type="checkbox"]:checked ~ .accordion-header .arrow {
            transform: rotate(180deg);
        }
        .accordion-item input[type="checkbox"] {
            display: none; /* Hide the actual checkbox */
        }

        /* --- UPDATED CSS FOR HEADER BACKGROUND IMAGE AND Z-INDEXES --- */
        .header-with-bg {
            background-image: url('fade-flag.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.25;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Background image is behind content */
        }
        .header-wrapper {
            position: relative;
            background-color: white;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            padding: 1rem 1.5rem;
            z-index: 100; /* HIGH Z-INDEX for the entire header to be on top */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-wrapper h1,
        .header-wrapper a.text-gray-800,
        .header-wrapper h1 {
            color: #222;
        }
        .header-wrapper a.text-blue-700-hover:hover {
            color: #1D4ED8;
        }
        .veterans-logo {
            width: 60px !important;
            height: 60px !important;
            border-radius: 9999px;
            margin-right: 0.75rem;
            z-index: 2; /* Ensures logo is above header background, but can be lower than dropdowns */
            position: relative;
        }
        .main-header-content {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between; /* This will push the left group and nav apart */
            position: relative; /* Establish stacking context for navigation */
            z-index: 101; /* Ensure nav is above header background and logo */
        }
        /* --- CORRECTED CSS FOR FOOTER BACKGROUND IMAGE --- */
        .footer-wrapper {
            position: relative;
            background-color: #1A202C; /* Tailwind's bg-gray-800 equivalent */
            overflow: hidden; /* Important to contain the absolute background */
            z-index: 1; /* Default z-index for footer */
        }
        .footer-with-bg {
            background-image: url('fade-flag.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.25;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; /* Set to 0 to be behind .footer-content (z-index 1) */
        }
        .footer-content {
            position: relative;
            z-index: 1; /* Ensures content is above the background */
        }

        /* Dropdown specific styles */
        .dropdown {
            position: relative;
            /* Use padding for the entire dropdown area, not just the link */
            padding: 0.5rem 0.75rem; /* Matches existing link padding */
            z-index: 102; /* Higher than main-header-content */
            height: 100%; /* Make the hover target fill the available height */
            display: flex; /* Use flex to vertically align the link within the dropdown area */
            align-items: center;
            /* Background color transition for the hoverable area */
            transition: background-color 0.3s ease;
        }

        .dropdown:hover {
            background-color: #f0f0f0; /* Light background on hover for the parent dropdown item */
            border-radius: 0.375rem; /* Add some rounding on hover */
        }

        .dropdown > a {
            /* Reset any conflicting padding/margin on the direct child link */
            padding: 0;
            margin: 0;
            display: block; /* Ensure the link takes up the full space within its flex container */
            color: #4A5568; /* Equivalent to text-gray-600 */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .dropdown > a:hover {
            color: #1D4ED8; /* Consistent hover color */
        }

        .dropdown-content {
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* Prevent clicks when invisible */
            position: absolute;
            background-color: #f9f9f9;
            min-width: 200px; /* Slightly wider dropdown for content */
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 103; /* HIGHEST Z-INDEX to be on top of everything else */
            border-radius: 0.375rem; /* rounded-md */
            overflow: hidden; /* To ensure border-radius applies to content */
            top: 100%; /* Position directly below the parent dropdown, touching it */
            left: 0;
            /* No margin-top needed, as 'top: 100%' handles it */
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .dropdown-content a:hover {
            background-color: #e2e8f0; /* Light grey hover for sub-items */
            color: #1D4ED8; /* Consistent hover color */
        }
        .dropdown:hover .dropdown-content {
            opacity: 1;
            visibility: visible;
            pointer-events: all; /* Allow clicks when visible */
        }

        /* Styling for non-dropdown menu items to match height */
        .nav-item-plain {
            padding: 0.5rem 0.75rem; /* Matches .dropdown padding */
            display: flex; /* Use flex to align vertically */
            align-items: center;
            height: 100%; /* Ensure they take full height for consistent alignment */
        }
        /* Navigation Link Color Overrides - Add this to your styles.css */

/* Override all navigation links to be white */
nav .dropdown > a,
nav a[href="#testimonials"],
nav a[href="#faq"], 
nav a[href="#contact"],
nav .nav-item-plain {
    color: white !important;
    transition: color 0.3s ease;
}

/* White hover state for all navigation links */
nav .dropdown > a:hover,
nav a[href="#testimonials"]:hover,
nav a[href="#faq"]:hover,
nav a[href="#contact"]:hover,
nav .nav-item-plain:hover {
    color: #f3f4f6 !important; /* Brighter white on hover */
}

/* Ensure dropdown styling works with white background */
nav .dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white background on hover */
    border-radius: 0.375rem;
}

/* Make sure dropdown content stays with dark text on white background */
nav .dropdown-content a {
    color: #333 !important; /* Dark text in dropdown */
}

nav .dropdown-content a:hover {
    background-color: #e2e8f0;
    color: #1D4ED8 !important; /* Blue on hover in dropdown */
}

* Navigation Link Color Overrides - Add this to your styles.css */

/* Override all navigation links to be white */
nav .dropdown > a,
nav a[href="#testimonials"],
nav a[href="#faq"], 
nav a[href="#contact"],
nav .nav-item-plain {
    color: white !important;
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

/* White hover state for all navigation links with background */
nav .dropdown > a:hover,
nav a[href="#testimonials"]:hover,
nav a[href="#faq"]:hover,
nav a[href="#contact"]:hover,
nav .nav-item-plain:hover {
    color: #f3f4f6 !important; /* Brighter white on hover */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle white background on hover */
}

/* Ensure dropdown styling works consistently */
nav .dropdown {
    padding: 0; /* Remove padding from dropdown container since it's on the link now */
}

nav .dropdown:hover {
    background-color: transparent; /* Remove this since the link itself has the background */
}

/* Make sure dropdown content stays with dark text on white background */
nav .dropdown-content a {
    color: #333 !important; /* Dark text in dropdown */
    background-color: transparent !important; /* Reset background for dropdown items */
    padding: 12px 16px !important; /* Restore original dropdown padding */
}

nav .dropdown-content a:hover {
    background-color: #e2e8f0 !important;
    color: #1D4ED8 !important; /* Blue on hover in dropdown */
}
    </style>