/* CSS Guideline to replicate for all pages: */
        body {
            padding-top: 80px; 
            font-family: 'Arial', sans-serif; /* Use a clean, professional sans-serif font */
            margin: 0;
            padding: 0;
            background-color: #ffffff; /* Light page background */
            color: #333;
        }
        .header {
            background-color: #ffffff; 
            color: #1a2b47;
            padding: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* --- FIXING THE HEADER --- */
            position: fixed; /* Makes the element fixed relative to the viewport */
            top: 0;          /* Positions the header at the very top */
            width: 100%;     /* Ensures the header spans the full width */
            z-index: 1000;   /* Ensures the header stays above all other page content */
            /* --- END FIXING --- */
        }
        .logo {
            font-size: 30px;
            font-weight: bold;
            color: #1a2b47;
            /* Placeholder for the Razetime Logo Image */
        }
        .logo-message {
            font-size: 10px;
            color: #1a2b47;
            margin-top: -2px;
            display: block;
        }
        .nav {
            display: flex;
            justify-content: flex-end;
            gap: 30px; /* spacing between links */
        }

        .nav a {
           color: #1a2b47;
           text-decoration: none;
           font-size: 16px;
           text-transform: uppercase;
	   text-align: left;
        }
        .hero-section {
            /* Large, impactful banner image or dark color overlay with white/light text */
            background-color: #ffffff; 
            color: #1a2b47;
            width: 100%;
            height: 100%;
            text-align: center;
            /* padding: 240px 5%; */
            /* --- BACKGROUND IMAGE PROPERTIES --- */
            background-size: cover;        /* Ensures the image covers the entire hero area */
            background-position: center;   /* Centers the image */
            background-repeat: no-repeat;
    
            /* Optional: Add a subtle dark overlay for text readability */
            position: relative; 
            z-index: 1; /* Ensures text is above the overlay */
        }
        /* Optional: Overlay to guarantee readability over the image */
        .hero-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0); /* Black overlay with 40% opacity */
            z-index: -1;
        }
        .hero-section h1 {
            font-size: 3em;
            margin-bottom: 20px;
            font-weight: 700;
        }
        .content-section {
            padding: 80px 5%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .section-title {
            font-size: 1.5em;
            color: #0c1a32;
            margin-bottom: 40px;
            border-left: 5px solid #ff5733; /* Use Coral Red for an accent color */
            padding-left: 15px;
            font-weight: 600;
        }
        .card-container {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        .card {
            flex: 1 1 20%;
            padding: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            border-top: 5px solid #0c1a32;
            min-width: 140px;
        }
        .footer {
            /* footer: Deep corporate blue/grey background, light text */
            background-color: #ffffff; 
            color: #0c1a32;
            padding: 30px 5%;
            text-align: center;
            font-size: 14px;
        }
        /* Specific Styles for Contact/Careers (Forms, Lists) */
        .contact-details, .contact-form, .job-listing {
            margin-top: 30px;
        }
.side-by-side-container {
    /* Enables Flexbox layout */
    display: flex;
    /* Aligns items vertically in the center */
    align-items: flex-start;
    /* Sets a maximum width for the entire section */
    max-width: 900px;
    /* Centers the entire container on the page (optional) */
    margin: 50px auto;
    /* Adds a border around the whole section (optional) */
    border: 1px solid #ccc;
    padding: 20px;
    gap: 30px; /* Adds space between the picture and the info */
}

.image-container {
    /* Takes up 1 part of the available space */
    flex: 1;
    /* Ensures the image doesn't get too large */
    max-width: 300px; 
}

.image-container img {
    /* Makes the image fill the container width */
    width: 100%;
    /* Maintains the image's aspect ratio */
    height: auto;
    /* Makes the image corners slightly rounded (optional) */
    border-radius: 8px;
    display: block; /* Removes extra space below the image */
}

.info-container {
    /* Takes up 2 parts of the available space, making it wider than the image */
    flex: 2;
    padding-left: 10px; /* Little extra internal padding */
    font-family: Arial, sans-serif;
}

.info-container h2 {
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-top: 0;
}

/* ------------------------------------------- */
/* Sticky Footer Navigation CSS */
/* ------------------------------------------- */

/* 1. Hide the menu by default (for desktops) */
#mobile-nav-bar {
    display: none;
    visibility: hidden;
}

/* 2. Media Query to make the menu visible ONLY on small screens */
@media (max-width: 768px) {
    #mobile-nav-bar {
        /* Positioning */
        display: block;
        visibility: visible;
        position: fixed; /* 👈 Makes it stick to the viewport */
        bottom: 0;      /* 👈 Aligns it to the bottom */
        left: 0;
        z-index: 1000;  /* 👈 Ensures it stays on top of content */

        /* Sizing and Styling */
        width: 100%;
        height: 60px; /* Fixed height for consistency */
        background-color: #333; /* Dark background */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    }

    /* 3. Style the navigation links */
    #mobile-nav-bar nav {
        display: flex; /* Arranges items side-by-side */
        justify-content: space-around; /* Distributes space evenly */
        align-items: center;
        height: 100%;
    }

    /* 4. Style each menu item */
    .nav-item {
        color: white;
        text-decoration: none;
        font-size: 12px; /* Smaller font for mobile */
        text-align: center;
        padding: 1px 0;
        display: flex;
        flex-direction: column; /* Stacks the icon on top of the text */
        gap: 1px;
    }

    /* 5. Add padding to the body so content doesn't hide behind the menu */
    body {
        padding-bottom: 60px;
    }
    .side-by-side-container {
        /* Stacks the items vertically on small screens */
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .image-container {
        /* Adjusts image container width for stacking */
        max-width: 50%;
    }
}