@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Mr+Dafoe&display=swap");
        /* Setting the default font to Inter, as required by the new Tailwind component */
        body { font-family: 'Inter', "Lato", sans-serif; } 

        html { box-sizing: border-box; }
        *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: "Lato", sans-serif;
            display: grid;
            place-items: center;
            /* REVERT: Set text color back to dark grey for white background */
            color: #3d3d3d;
            
            /* REVERT: Apply white background and original texture */
            background-color: #ffffff;
            background-image: url("https://www.transparenttextures.com/patterns/first-aid-kit.png"); 
            
            /* REVERT: Border color back to light grey */
            --silver: #c1c1c1; 
            /* UPDATED: Primary brand color set to deep teal/greenish blue */
            --primary-teal: #00a896; 
            /* Ensure no horizontal scroll is possible due to padding/margins */
            overflow-x: hidden;
        }

        a { font-weight: bold; text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* ======================================== Master Container ======================================== */
        .master-container {
            max-width: 1400px;
            width: 100%;
        }

        /* ======================================== Main Header ======================================== */
        .main-header {
            width: 100%;
            display: grid;
        }
        .main-header ul { list-style-type: none; }

        /* ======================================== Search Bar (Removed) ======================================== */
        .search-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1em;
        }
        .topnav {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 5em;
        }
        .ms-logo img {
            height: 150px;
            width: auto;
        }
        /* Ensure logo container doesn't overflow */
        .logo {
            min-width: 0;
            padding: 1em;
            display: grid;
            place-items: center;
            /* UPDATED: Use new teal color */
            color: var(--primary-teal);
            text-align: center;
        }
        .logo h1 {
            font-family: "Mr Dafoe", sans-serif;
            font-size: 5em;
            /* REVERT: Main title color set to black */
            color: black;
            /* Ensure large font scales down gracefully */
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        /* ADDED: Styling for the tagline to make it bold and larger */
        .logo p {
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* ======================================== Navigation Bar ======================================== */
        .navbar {
            display: flex;
            align-items: center;
            margin: 0 auto;
            border-top: 1px solid var(--silver);
            height: 60px;
            width: 800px; /* MODIFIED: Shrunk the width of the line to 700px */
        }
        .navbar ul { display: flex; margin: 0 auto; padding: 0; }
        .navbar li { margin: 0 10px; }
        .navbar a {
            font-size: 0.9rem;
            text-transform: uppercase;
            /* REVERT: Inactive link color back to original dark grey */
            color: #848484;
            cursor: pointer; /* Indicate links are clickable */
        }
        /* UPDATED: Use new teal color */
        .navbar a:hover { color: var(--primary-teal); }
        .navbar a.active { color: var(--primary-teal); pointer-events: none; }

        /* ======================================== Page Content Container ======================================== */
        .page-content-container {
            display: flex;
            justify-content: center;
            margin-top: 1em;
            padding: 1em 0;
            min-height: 500px;
            width: 100%; /* Ensure container is full width */
        }

        /* ======================================== Main Column ======================================== */
        main {
            width: 100%;
            max-width: 1500px;
            padding: 0 1em; /* Adjusted padding for better fit */
        }

        /* Styles for the other view containers (kept simple) */
        .content-box {
            border: 1px solid var(--silver);
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            /* REVERT: Remove dark background setting */
            background-color: transparent; 
        }
        /* Service View specific styles restored */
        .content-box h3 {
            /* Text color reset to original */
            color: #3d3d3d; 
            margin-bottom: 10px;
            font-size: 1.5rem; 
        }
        
        /* NEW: Text Gradient Class for Headers (for main page titles) */
        .text-gradient-header {
            /* Apply the specified dark teal gradient */
            background: linear-gradient(to bottom, #016764, #005958, #014848, #00312F, #001E1E);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            display: inline-block; /* Essential for background-clip to work */
        }


        /* Custom Header for Services view (Used for all section headers now) */
        .service-header {
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px dotted var(--silver);
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .service-header svg {
            /* SVG color relies on internal fill='url(#grad-ID)' now */
            width: 55px; 
            height: 55px;
            margin-right: 12px;
        }
        .service-header h3 {
            /* Now relies on .text-gradient-header class */
            font-size: 2rem; 
            font-weight: 900; 
            margin-bottom: 0;
            padding-bottom: 0;
            border: none;
            flex-grow: 0; 
        }

        .content-box p {
            font-size: 1.1rem; 
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .content-box ul {
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .content-box ul, .content-box ol {
            /* The default style for service lists and home page comments. */
            list-style: disc;
            padding-left: 20px;
        }
        
        /* Custom CSS for the mobile icon transition (Hamburger) */
        .hamburger-icon {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
        .hamburger-icon div {
            width: 100%;
            height: 3px;
            background-color: #1e3a8a; /* Dark Blue */
            border-radius: 5px;
            transition: all 0.3s linear;
            transform-origin: 1px;
        }

        /* Styles for when the menu is open */
        .menu-open .line-1 { transform: rotate(45deg); }
        .menu-open .line-2 { opacity: 0; transform: translateX(-20px); }
        .menu-open .line-3 { transform: rotate(-45deg); }

        /* ======================================== Service Card Styles ======================================== */
        .service-cards-container { padding: 20px 0; }
        .service-cards-list {
            display: grid; 
            /* Change the grid template to specifically handle the 8 cards in two rows of four */
            grid-template-columns: repeat(4, 1fr);
            gap: 20px; 
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .service-card-item {
            padding: 15px;
            border: 1px solid var(--silver); 
            border-radius: 8px;
            transition: transform 0.2s, box-shadow 0.2s;
            /* REVERT: Remove subtle card background */
            background-color: transparent; 
        }
        /* ADDED: A new class for cards without icons to adjust padding */
        .service-card-item.no-icon {
            padding-top: 25px;
        }

        .card-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* The gradient is applied to the child <i> tag using text clipping */
            font-size: 2.8rem;
            margin-bottom: 8px;
            position: relative;
        }
        
        .card-icon > i {
            position: absolute;
            font-size: 2.8rem;
            /* This is overridden by inline style for gradient */
            color: inherit;
        }
        /* Custom styles for gradient icons */
        .gradient-icon {
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Ensures color is transparent before clipping */
            color: transparent !important;
        }

        .dual-icons-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        /* The dual icons need independent positioning and gradient application */
        .dual-icons-container i {
            position: absolute;
            font-size: 1.5rem;
            color: inherit;
        }

        .icon-laptop-part { top: 15px; left: 5px; }
        .icon-mobile-part { top: 5px; right: 5px; }
        
        .service-card-item p strong {
            font-size: 1.25rem;
            font-weight: 700;
            word-break: break-word; 
            text-align: center;
        }
        .card-text {
            font-size: 0.9rem;
            line-height: 1.4;
            text-align: center;
            font-weight: 700;
        }
        
        /* Affiliate Cards Adjustments */
        .support-cards-grid .support-card-item .card-icon-small {
            width: 80px; 
            height: 80px;
            margin: 0 auto 4px; /* Tightened margin */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Ensure embedded SVGs scale within the card-icon-small container */
        .support-card-item .card-icon-small svg {
            width: 100%;
            height: 100%;
        }

        .filter-rect {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px; 
            height: 20px; 
            border-radius: 6px;
            color: white;
            font-weight: bold;
            font-size: 0.7rem; 
            margin-bottom: 4px;
            /* Background will be set via inline style as gradient */
        }
        .mobile .filter-rect {
            width: 25px; 
            height: 18px; 
            font-size: 0.6rem; 
            margin-bottom: 0;
            margin-right: 8px;
        }

        /* ======================================== Filter Bar Navigation (Services Page) ======================================== */
        .desktop-filter-links a {
            padding: 0 8px; 
            margin: 0 !important; 
            border-right: none !important; 
            position: relative; 
            transition: all 0.15s;
        }
        
        .desktop-filter-links a:not(:last-child) {
            padding-right: 18px; 
        }
        
        .desktop-filter-links a:not(:last-child)::after {
            content: '|';
            position: absolute;
            right: 4px; 
            top: 50%;
            transform: translateY(-50%);
            /* REVERT: Separator color back to dark grey */
            color: #848484; 
            font-weight: normal;
            font-size: 0.9rem;
        }
        
        /* ======================================== Footer (Transparent) ======================================== */
        .footer-transparent {
            text-align: center;
            padding: 1em;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* REVERT: Footer text color back to dark grey */
            color: #848484;
            font-size: 0.95rem; /* Increased size */
            font-weight: bold; /* Explicitly set bold on container */
            margin-top: 20px;
        }
        .footer-transparent small {
            display: block;
            font-weight: 700;
        }
        
        /* Mobile adjustment for smaller screens to ensure 1 column if needed */
        @media (max-width: 768px) {
            .search-bar { grid-template-columns: 1fr; grid-row-gap: 10px; }
            .topnav { justify-content: center; }
            .navbar ul { flex-wrap: wrap; justify-content: center; padding: 0 10px; }
            .navbar li { margin: 5px; }
            main { padding: 0 10px; }
            .service-cards-list { grid-template-columns: repeat(2, 1fr); }
            .desktop-filter-links { display: none !important; }
        }
        @media (max-width: 480px) {
            .service-cards-list { grid-template-columns: repeat(1, 1fr); }
            .logo h1 { font-size: 3em; } /* Scale down title on small screens */
            .logo p { font-size: 1rem; } /* Scale down tagline on small screens */
        }