/* Basic Reset & Body Styles */
        body {
            font-family: -apple-system, BlinkMacMacSystemFont, "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;
        }
        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 */
            }
        }

        /* Lighter Introduction Section */
        .intro-section {
            background-color: #f0f4f8; /* bg-gray-100 */
            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;
        }
        .intro-section h1 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 800; /* font-extrabold */
            line-height: 1.25; /* leading-tight */
            margin-bottom: 1rem; /* mb-4 */
            color: #991b1b; /* text-red-800 */
        }
        .intro-section p {
            font-size: 1.125rem; /* text-lg */
            margin-bottom: 2rem; /* mb-8 */
            max-width: 48rem; /* max-w-3xl */
            margin-left: auto;
            margin-right: auto;
            color: #374151; /* text-gray-700 */
        }
        @media (min-width: 768px) {
            .intro-section {
                padding-left: 3rem; /* md:px-12 */
                padding-right: 3rem; /* md:px-12 */
            }
            .intro-section h1 {
                font-size: 3rem; /* md:text-5xl */
            }
            .intro-section p {
                font-size: 1.25rem; /* md:text-xl */
            }
        }

        /* Explanation Box within Intro Section */
        .explanation-box {
            margin-top: 2rem; /* mt-8 */
            padding: 1.5rem; /* p-6 */
            background-color: #ffebee; /* bg-red-50 */
            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: 48rem; /* max-w-3xl */
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .explanation-box h3 {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 600; /* font-semibold */
            margin-bottom: 1rem; /* mb-4 */
            color: #991b1b; /* text-red-800 */
            text-align: center;
        }
        .explanation-box p {
            color: #6d071a; /* text-red-900 */
            line-height: 1.625; /* leading-relaxed */
            margin-bottom: 1rem; /* mb-4 */
        }
        .explanation-box p:last-child {
            margin-bottom: 0;
        }

        /* Hardware Offerings Section */
        .hardware-offerings-section {
            background-color: #f9fafb; /* bg-gray-50 */
            padding-top: 4rem; /* py-16 */
            padding-bottom: 4rem; /* py-16 */
            padding-left: 1.5rem; /* px-6 */
            padding-right: 1.5rem; /* px-6 */
        }
        .hardware-offerings-section h2 {
            font-size: 2rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            text-align: center;
            margin-bottom: 3rem; /* mb-12 */
            color: #991b1b; /* text-red-800 */
        }
        @media (min-width: 768px) {
            .hardware-offerings-section h2 {
                font-size: 2.25rem; /* md:text-4xl */
            }
        }

        /* Individual Hardware Service Block */
        .service-block {
            display: flex;
            flex-direction: column; /* flex-col */
            align-items: center;
            background-color: #ffffff;
            padding: 2rem; /* p-8 */
            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 */
            margin-bottom: 3rem; /* mb-12 */
            gap: 2rem; /* gap-8 */
        }
        @media (min-width: 768px) {
            .service-block {
                flex-direction: row; /* md:flex-row */
            }
            .service-block.reverse {
                flex-direction: row-reverse; /* md:flex-row-reverse */
            }
        }

        .service-block .image-wrapper {
            width: 100%; /* w-full */
            max-width: 600px; /* Adjust as needed for image size */
        }
        @media (min-width: 768px) {
            .service-block .image-wrapper {
                width: 50%; /* md:w-1/2 */
            }
        }

        .service-block img {
            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 */
            width: 100%; /* w-full */
            height: auto;
            display: block; /* Remove extra space below image */
        }

        .service-block .text-content {
            width: 100%; /* w-full */
            text-align: center;
        }
        @media (min-width: 768px) {
            .service-block .text-content {
                width: 50%; /* md:w-1/2 */
            }
            .service-block .text-content.align-left {
                text-align: left; /* md:text-left */
            }
            .service-block .text-content.align-right {
                text-align: right; /* md:text-right */
            }
        }

        .service-block h3 {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 600; /* font-semibold */
            margin-bottom: 1rem; /* mb-4 */
            color: #991b1b; /* text-red-800 */
        }
        .service-block p {
            color: #374151; /* text-gray-700 */
            line-height: 1.625; /* leading-relaxed */
        }

        /* 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 */
            }
        }