/* Basic Reset & Body Styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* System font fallback */
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f8fafc; /* Lighter gray background for corporate feel */
            color: #343a40; /* Dark text */
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased; /* Smoother fonts */
            -moz-osx-font-smoothing: grayscale;
        }

        /* Container for content centering and max-width */
        .container {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.5rem; /* Equivalent to px-6 */
            padding-right: 1.5rem; /* Equivalent to px-6 */
        }

        /* Media query for larger screens (md:px-12) */
        @media (min-width: 768px) {
            .container {
                padding-left: 3rem; /* Equivalent to md:px-12 */
                padding-right: 3rem; /* Equivalent to md:px-12 */
            }
        }

        /* Custom Material Design-like shadow for cards */
        .material-shadow {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        .material-shadow-lg {
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        /* Header/Navbar */
        header {
            background-color: #ffffff;
            padding-top: 1rem; /* py-4 */
            padding-bottom: 1rem; /* py-4 */
            padding-left: 1.5rem; /* px-6 */
            padding-right: 1.5rem; /* px-6 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* material-shadow */
        }
        header .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /* Style for the logo image */
        .header-logo {
            height: 5rem; /* Set the height here */
        }
        header .nav-links {
            display: none; /* hidden md:flex */
            gap: 1.5rem; /* space-x-6 */
            align-items: center;
        }
        header .nav-links a {
            color: #4a5568; /* text-gray-700 */
            text-decoration: none;
            font-weight: 500; /* font-medium */
            transition: color 0.2s ease-in-out;
        }
        header .nav-links a:hover {
            color: #b91c1c; /* hover:text-red-700 */
        }
        header .menu-button {
            display: block; /* md:hidden */
            color: #4a5568; /* text-gray-700 */
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        header .menu-button svg {
            width: 1.5rem; /* w-6 */
            height: 1.5rem; /* h-6 */
        }

        /* Media query for medium screens and up */
        @media (min-width: 768px) {
            header {
                padding-left: 3rem; /* md:px-12 */
                padding-right: 3rem; /* md:px-12 */
            }
            header .nav-links {
                display: flex; /* md:flex */
            }
            header .menu-button {
                display: none; /* md:hidden */
            }
        }

        /* Hero Section - Introduction */
        .hero-section {
            background: linear-gradient(to right, #991b1b, #b91c1c); /* from-red-900 to-red-700 */
            color: #ffffff;
            padding-top: 5rem; /* py-20 */
            padding-bottom: 5rem; /* py-20 */
            padding-left: 1.5rem; /* px-6 */
            padding-right: 1.5rem; /* px-6 */
            text-align: center;
        }
        .hero-section h1 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 800; /* font-extrabold */
            line-height: 1.25; /* leading-tight */
            margin-bottom: 1rem; /* mb-4 */
        }
        .hero-section p {
            font-size: 1.125rem; /* text-lg */
            margin-bottom: 2rem; /* mb-8 */
            max-width: 42rem; /* max-w-2xl */
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }
        @media (min-width: 768px) {
            .hero-section {
                padding-left: 3rem; /* md:px-12 */
                padding-right: 3rem; /* md:px-12 */
            }
            .hero-section h1 {
                font-size: 3rem; /* md:text-5xl */
            }
            .hero-section p {
                font-size: 1.25rem; /* md:text-xl */
            }
        }

        /* Contact Information Section (reused from other pages) */
        .contact-info-section {
            background-color: #f9fafb; /* Changed to match the gray background of other main sections */
            color: #343a40; /* Changed to match the dark text of other main sections */
            padding-top: 4rem; /* py-16 */
            padding-bottom: 4rem; /* py-16 */
            padding-left: 1.5rem; /* px-6 */
            padding-right: 1.5rem; /* px-6 */
            text-align: center;
        }
        .contact-info-section h2 {
            font-size: 2rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            margin-bottom: 1rem; /* mb-4 */
            color: #991b1b; /* Override section h2 color to red-800 */
        }
        @media (min-width: 768px) {
            .contact-info-section h2 {
                font-size: 2.25rem; /* md:text-4xl */
            }
        }
        .contact-info-section p {
            font-size: 1.125rem; /* text-lg */
            margin-bottom: 1rem; /* mb-4 */
            max-width: 42rem; /* max-w-2xl */
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }
        .contact-details {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem; /* space-y-4 */
            font-size: 1.125rem; /* text-lg */
            background-color: #ffffff; /* Added white background for the details block */
            padding: 2.5rem; /* p-10 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* material-shadow */
            max-width: 600px; /* Constrain width like the form was */
            margin-left: auto;
            margin-right: auto;
        }
        .contact-details h3 {
            font-size: 1.25rem; /* text-xl */
            font-weight: 600; /* font-semibold */
            margin-bottom: 0.5rem; /* mb-2 */
            padding-top: 1rem; /* pt-4 */
            color: #343a40; /* Ensure dark text for this header */
        }

        /* Footer */
        footer {
            background-color: #1a202c; /* bg-gray-900 */
            color: #d1d5db; /* text-gray-300 */
            padding-top: 2rem; /* py-8 */
            padding-bottom: 2rem; /* py-8 */
            padding-left: 1.5rem; /* px-6 */
            padding-right: 1.5rem; /* px-6 */
            text-align: center;
        }
        @media (min-width: 768px) {
            footer {
                padding-left: 3rem; /* md:px-12 */
                padding-right: 3rem; /* md:px-12 */
            }
        }