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

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "Atkinson Hyperlegible", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 auto;
    }

    main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    /* General link styles */
    a {
        color: #3b3c3e !important; /* Dark grey, overriding any other styles */
        text-decoration: none; /* Remove underline */
        font-weight: 500;
    }

    a:hover {
        text-decoration: underline; /* Underline on hover */
        color: #4a4d4f !important; /* Slightly lighter grey on hover */
    }


    /* Section Styles */
    section {
        max-width: 1000px;
        width: 100%;
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text-section {
        width: 100%;
        max-width: 1000px;
        padding: 5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align content to the left */
        gap: 1.5rem; /* Space between h1 and text-container */
    }

    .text-section h1 {
        font-size: 4rem;
    }

    .text-container {
        display: flex;
        flex-wrap: wrap; /* Enable columns to stack on smaller screens */
        gap: 1rem;
        width: 100%; /* Ensure the container itself spans the full width */
    }

    .text-container p {
        flex: 1 0 calc(50% - 1rem); /* Force each column to take half the width */
        margin: 0;
        word-wrap: break-word; /* Prevent content overflow for long words */
        min-width: calc(50% - 1rem); /* Ensure columns don't shrink below half width */
        box-sizing: border-box; /* Include padding/borders in width calculations */
        line-height: 140%;
    }

    /* Privacy Policy Styles */
    .text-section-privacy-policy {
        width: 100%;
        max-width: 700px;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align content to the left */
        gap: 1.5rem; /* Space between h1 and text-container */
        /* line-height: 130%; */
    }

    .text-section-privacy-policy h1 {
        font-size: 4rem;
        padding-top: 3.2rem;
        padding-bottom: 0rem;
    }

    .text-section-privacy-policy h2 {
        font-size: 2rem;
        padding-top: 3.2rem;
        padding-bottom: 0.8rem;
    }

    .section.qr-top-right {
        align-items: end;
        padding-top: 1rem;
    }
    
    .qr-container {
        max-width: 1000px;
        margin: 1;
        align-items: end;
        gap: 1 rem;
    }

    /* .social-top-icon {
        align-items: end;
        width: 40px;
        height: 40px;
        padding-top: 1rem;
    } */

    .qr-row {
        display: flex; /* Makes the row a flex container */
        align-items: flex-start; /* Align items to the top */
        gap: 1rem; /* Adds space between the text and the image */
    }
    
    .qr-container {
        display: flex; /* Makes the container a flexbox */
        align-items: flex-start; /* Aligns text to the top of the QR code */
        gap: 1rem; /* Space between the text and the image */
        text-decoration: none; /* Remove underline for the link */
        color: inherit; /* Ensure link inherits color styles */
    }
    
    .qr-container span {
        font-size: 1.2rem; /* Adjust the font size if needed */
        line-height: 1.5; /* Better readability for multiple lines */
        text-align: right;
    }
    
    .qr {
        width: 120px;
        height: 120px;
        object-fit: contain; /* Keeps the aspect ratio of the image */
    }

    /* Social icons row */
    .icon-row {
        display: flex;
        gap: 40px; 
    }

    .social-icon {
        width: 40px;
        height: 40px;
        /* object-fit: contain; */
    }

    /* List container styles */
    .list-container {
        display: flex;
        flex-wrap: wrap; /* Enable wrapping on smaller screens */
        gap: 1rem; /* Spacing between list items */
        margin: 0;
        padding: 0;
        list-style: none; /* Remove default list styling */
        width: 100%; /* Ensure it spans the full section width */
    }

    /* Individual list items */
    .list-container > li {
        flex: 1 0 calc(50% - 1rem); /* Two columns with gap accounted for */
        box-sizing: border-box; /* Include padding/border in width */
    }

    /* Nested list styling */
    .nested-list {
        list-style-type: disc; /* Use disc bullets for nested lists */
        margin-left: 1.5rem; /* Add indentation for nested items */
        padding-left: 0; /* Ensure padding aligns with the margin */
    }

    .nested-list li {
        /* margin-bottom: 0.5rem; Add spacing between nested items */
    }

    /* Contact section styles */

    .contact-container {
        display: flex;
        flex-wrap: wrap; /* Makes it responsive */
        gap: 2rem;
        width: 100%;
    }

    .contact-details {
        flex: 1 1 calc(50% - 1rem); /* 50% width with gap accounted for */
        box-sizing: border-box;
    }

    .contact-details p {
        margin-bottom: 0.5rem;
        /* line-height: 1.6; */
    }

    .contact-details a {
        color: #007BFF; /* Link color */
        text-decoration: none;
    }

    .contact-details a:hover {
        text-decoration: underline;
    }

    .contact-details .social-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .contact-details .social-icon {
        width: 20px;
        height: 20px;
    }

    .contact-map {
        flex: 1 1 calc(50% - 1rem); /* 50% width with gap accounted for */
        box-sizing: border-box;
    }

    .contact-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px; /* Optional, for rounded edges */
        min-height: 300px; /* Ensures visible size for the map */
    }

    /* IMAGE STYLES - BETWEEN SEECTIONS */
    .image-container {
        width: 100%;
        max-width: 1000px; /* Matches the section max-width */
        margin: 0 auto; /* Centers the image-container */
        box-sizing: border-box; /* Includes padding in width calculations */
    }

    .image-container img {
        width: 100%; /* Makes the image responsive */
        height: auto; /* Preserves the image aspect ratio */
        display: block; /* Removes extra bottom space caused by inline images */
    }

    /* Container Section */
    .container-section {
        width: 100%;
        max-width: 1000px;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align content to the left */
        gap: 2rem; /* Space between title and containers */
    }

    .container-section h1 {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    /* Container Wrapper */
    .container-wrapper {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap */
        gap: 1rem; /* Space between containers */
        width: 100%; /* Full width of the section */
    }

    /* Individual Container */
    .container {
        flex: 1 1 calc(33.333% - 1rem); /* 3 containers per row with gaps */
        max-width: calc(33.333% - 1rem);
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Space between title, image, and text */
        border-top: 2px solid black; /* Top border for each container */
        padding-top: 1rem;
        box-sizing: border-box; /* Include padding in width calculations */
        position: relative; /* Ensure proper stacking context */
        overflow: hidden; /* Prevent children from overflowing the container */
    }

    /* Container Title */
    .container h2 { 
        font-size: 2rem;
        margin: 0;
    }

    /* Container Image */
    .container img {
        width: 100%; /* Make the image responsive */
        height: auto;
        object-fit: cover; /* Ensure the image fits nicely */
    }

    /* Container Text */
    .container p {
        margin: 0;
        font-size: 1rem;
    }

    .navbar {
        background-color: #f7f7f7;
        border-bottom: 1px solid black; 
        position: relative; /* Navbar reserves its space */
        z-index: 10; /* Higher than .qr-top-right */
    }

    .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1000px;
        margin: 0 auto;
        padding: 1rem;
    }

    .logo img {
        display: block;
    }

    .nav-menu {
        display: flex;
        list-style: none;
    }

    .nav-item {
        margin-left: 2rem;
    }

    .nav-item-social {
        margin-left: 10px;
    }

    .nav-link {
        text-decoration: none;
        font-size: 1.2rem;
        color: #333;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .nav-link:hover {
        color: #007bff;
    }

    .nav-link img {
        width: 25px;
        height: 25px;
    }

    .hamburger {
        display: none;
        cursor: pointer;
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background-color: #333;
    }

    /* Footer styles */
    .site-footer {
        width: 100%;
        margin-top: 2rem;
        padding: 1rem 0;
        border-top: 1px solid black; 
        text-align: center;
        font-size: 0.875rem; /* Slightly smaller text */
        background-color: #f9f9f9; /* Optional: light grey background */
        color: #333;
    }

    /* Desktop-specific styles */
    @media (min-width: 769px) {
        .container.desktop-styled {
            border-bottom: 2px solid black; /* Add a bottom border for desktop */
        }
    }

    @media (max-width: 768px) {
        
        .qr {
            width: 90px;
            height: 90px;
        }

        .icon-row {
            gap: 30px; /* Adjust space between icons */
        }

        /* .social-top-icon {
            width: 30px;
            height: 30px;
        } */

        .text-container p {
            flex: 1 1 100%; /* Full-width for smaller screens */
            min-width: 100%; /* Ensure columns stretch fully in small viewports */
        }
        
        .text-section h1 {
            font-size: 3rem;
        }
        
        .container-section h1 {
            font-size: 3rem;
        }

        .contact-container {
            flex-direction: column; /* Stack elements vertically */
        }

        .contact-details, .contact-map {
            flex: 1 1 100%; /* Full width on small screens */
        }

        .list-container > li {
            flex: 1 1 100%; /* Stack items vertically on smaller screens */
        }

        .container {
            flex: 1 1 100%; /* Full width for smaller screens */
            max-width: 100%;
        }

        .logo img {
            width: 70px; /* Scale down the width */
            height: auto; /* Maintain aspect ratio */
            position: relative; /* Ensure positioning control */
            z-index: 9999; /* Ensure logo is always on top */
        }

        

        /* Mobile Navigation */
        .nav-menu {
            position: fixed;
            top: -100%; /* Initially hide above the viewport */
            left: 0;
            width: 100%;
            background-color: #f9f9f9;
            text-align: center;
            flex-direction: column;
            gap: 0;
            transition: 0.3s ease-in-out; /* Smooth slide animation */
            z-index: 9998; /* Slightly lower than the logo */
        }

        .nav-menu.active {
            top: 70px; /* Slide in just below the header */
            border-bottom: 1px solid black; 
            padding-bottom: 2rem;
        }

        .nav-item {
            margin: 16px 0;
        }

        /* Hamburger */
        .hamburger {
            display: block;
        }

        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
    }