body{
    margin: 0;
    padding: 0;
    background-color: black !important;
    color: white;
}
html { scroll-behavior: smooth; }
section {
    padding-top:15vh;
    padding-left:15px;
    padding-right:15px;
    scroll-margin-top: 15vh;}
#masterFrame{
    position: relative;
margin: 0 auto;
max-width : 1200px;
border: 0px solid blue;
background-color: black;
}
header{
    cursor: pointer;
    position:fixed;
    top:0;
    width:100%;
    margin: 0 auto;
    border-bottom: 0px solid #ccc;
    height:12vh;
    background-color: black;
    color:white;
    padding: 5px;
    text-align: left;
    font-family: Arial, sans-serif;
    max-height:12vh;
}

nav{
    position:fixed;
    width:100%;

    top:10vh;
    right:15px;
    max-height:7vh;
    display:flex;
    justify-content: flex-end;
    gap:15px;
    padding:10px;
    background-color: transparent;  }

    .row{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
    }

    header .col{
        align-self: first baseline;
        vertical-align: text-bottom;

    }
    header img{
        padding-top:15px;
        size: cover;
        margin-left:10px;
    }
    .headerTitle{
        display:block;
        position: relative;
        
        padding-top:35px;
        font-size: 2.4rem;
        font-weight: bold;
        color: white;
    }
    .headerSubTitle{
        font-size: 1.2rem;
        color: #666;
    }

    .contentFrame{
        margin-top:15vh;
        min-height:80vh;
        width:100%;
        background-color: #ffffff;   
    }

.bold{
    font-weight: bold;
    }


 /* ======================================================= */
/* RESPONSIVE STYLES FOR MOBILE AND SMALL SCREENS (< 768px) */
/* ======================================================= */

@media (max-width: 768px) {
    /* --- HEADER (Logo and Title) --- */
    
    header {
        /* Fix the header at the very top */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; /* Let content dictate height */
        max-height: 115px;
        padding: 5px 0 0;
        z-index: 20; /* Highest priority */
        background-color: black; 
        /* Remove bottom border here, let the nav element handle the separation */
        border-bottom: none;
    }

    /* Reformat header content to stack and center */
    header .row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0;
    }
    
    /* Style the image */
    header img {
        padding-top: 5px;
        margin-left: 0;
        max-width: 60px !important;
        width: auto; 
    }

    /* Style the title text */
    .headerTitle {
        padding-top: 5px;
        font-size: 1.6rem;
        width: 100%;
    }
    
    /* --- NAVIGATION --- */
    
    nav {
        /* Fix the nav directly below the header. 
           We must use a reliable pixel value for the starting 'top' position. 
           The header content (logo + title) in this format is roughly 115px tall. 
        */
        position: fixed; 
        top: 100px; /* Estimated header height clearance */
        right: 0;
        left: 0;
        width: 100%;
        max-height: none; /* Allow buttons to wrap */
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 3px; 
        padding: 5px 10px;
        z-index: 15; /* Below header, above content */
        background-color: black; 
        border-bottom: 0px solid #ccc; /* Separates the fixed block from content */
        box-sizing: border-box;
    }
    
    nav .btn {
        font-size: 0.6rem;
        padding: 3px 6px; 
    }

    /* --- SECTION CONTENT & SCROLL MARGIN --- */
    
    /* Crucial: Calculate space needed to clear BOTH fixed header and fixed navigation. 
       Header (115px) + Nav (approx 40px) = 155px. Use generous vh estimate. */
    section {
        /* Use a value that clears the combined fixed block (approx 155px) */
        padding-top: 25vh; 
        /* The scroll-margin must match padding-top for anchor links to clear the fixed element. */
        scroll-margin-top: 0vh; 
    }

    /* Reset the existing large margin from the desktop view */
    .contentFrame {
        margin-top: 0;
    }

    /* --- SECTION CONTENT (Image and Text) --- */
    section .row {
        flex-direction: column;
    }

    section .col-md-4 {
        width: 100%;
        margin-bottom: 20px;
    }

    section img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
}

/* ======================================================= */
/* RESPONSIVE STYLES FOR MOBILE LANDSCAPE ORIENTATION */
/* ======================================================= */

@media (max-width: 820px) and (orientation: landscape) {
    
    /* --- HEADER (Logo and Title) --- */
    /* Make the fixed top block as compact as possible */
    header {
        padding: 2px 0 0; /* Minimal top padding */
    }

    /* Put logo and title side-by-side to save vertical space */
    header .row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        text-align: left;
        justify-content: flex-start;
    }
    
    /* Shrink logo and title space */
    header img {
        padding-top: 0;
        max-width: 40px !important; /* Tiny logo */
        margin-right: 10px;
        margin-left: 10px;
    }
    
    .headerTitle {
        padding-top: 0;
        font-size: 1.2rem; /* Much smaller title */
        /* Title may not display fully, but we prioritize space */
    }
    
    /* --- NAVIGATION --- */
    
    nav {
        /* Position nav immediately below the super-compact header */
        top: 55px; /* Estimated height of the ultra-compact header */
        gap: 2px; /* Minimal gap */
        padding: 3px 5px; /* Minimal padding */
        
    }
    
    nav .btn {
        font-size: 0.55rem; /* Smallest text size */
        padding: 2px 4px; 
    }

    /* --- SECTION CONTENT & SCROLL MARGIN --- */
    
    /* Calculate clearance for the ultra-compact fixed block (Header + Nav) */
    section {
        /* Total fixed area is now around 90-110px. Use minimal vh. */
        padding-top: 15vh; 
        scroll-margin-top: 15vh; 
    }

    /* Text content columns should still stack for readability, but can be slightly wider */
    section .row {
        flex-direction: column;
    }
}