/* 1. GLOBAL RESET & DEFAULTS
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevents scrolling */
}

body {
    background-color: #7c7c7c; /* Fallback background color */
    color: #010101;
    font-family: sans-serif;
}

/* 2. BACKGROUND VIDEO
*/
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. MAIN PAGE CONTENT WRAPPER (MOBILE-FIRST)
   These are the new defaults, for mobile.
*/
.page-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 1.5rem; /* Mobile padding */
    
    display: flex;
    /* --- MOBILE STYLES --- */
    flex-direction: row; /* Puts items side-by-side */
    justify-content: space-between; /* Pushes logo (left) and info (right) apart */
    align-items: flex-start; /* Aligns both to the top */
}

/* 4. CONTACT INFO SVGS (MOBILE-FIRST)
*/
.contact-info-container {
    /* Set to 'order: 2' to appear on the right on mobile */
    order: 2;
    display: flex;
    justify-content: flex-end; 
    width: auto;
}

.contact-info-mobile {
    display: block; /* Show mobile info */
    height: auto;
    max-width: 180px; /* Adjusted max-width for better fit */
    width: 100%;
}

.contact-info-desktop {
    display: none; /* Hide desktop info */
}

/* 5. LOGO SVGS (MOBILE-FIRST)
*/
.logo-container {
    /* Set to 'order: 1' to appear on the left on mobile */
    order: 1;
    display: flex;
    justify-content: flex-start; 
    width: auto;
}

.logo-mobile {
    display: block; /* Show mobile logo */
    height: 100vh;
    padding:20px 10px 40px 10px;
    max-width: 150px; 
    width: 100%; 
    /* align-self: flex-end; is REMOVED as it's not needed for top-alignment */
}

.logo-desktop {
    display: none; /* Hide desktop logo */
}


/* 6. DESKTOP STYLES (for screens 1080px and wider)
   This block contains your original desktop styles.
*/
@media (min-width: 767px) {
    
    .page-content {
        padding: 3rem; /* Desktop padding */
        
        /* --- DESKTOP OVERRIDES --- */
        flex-direction: column; /* Stack header and footer vertically */
        justify-content: space-between; /* Push header to top, footer to bottom */
        align-items: stretch; /* As you had it */
    }

    /* CONTACT INFO SVGS (Desktop)
    */
    .contact-info-container {
        order: 0; /* Reset order */
        justify-content: flex-start; 
        width: auto; 
    }

    .contact-info-mobile {
        display: none; /* Hide mobile info */
    }
    
    .contact-info-desktop {
        display: block; /* Show desktop info */
        width: 100vw; /* Your full-width style */
        max-width: 100%; 
        height: auto;
    }

    /* LOGO SVGS (Desktop)
    */
    .logo-container {
        order: 0; /* Reset order */
        justify-content: flex-start;
        width: auto; /* Your desktop style (overrides mobile 'width: auto') */
    }

    .logo-mobile {
        display: none; /* Hide mobile logo */
    }
    
    .logo-desktop {
        display: block; /* Show desktop logo */
        width: 100vw; /* Your full-width style */
        max-width: 100%;
        height: auto;
    }
}

/* A larger breakpoint for ultrawide monitors, 
   This is preserved from your file.
*/
@media (min-width: 1400px) {
    .contact-info-desktop {
        max-width: 100vw; 
    }
    .logo-desktop {
        max-width: 100vw; 
    }
}