* {
    box-sizing: border-box;
}

body {
    background-color: #f0f2f5 !important; 
    margin: 0;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

.std-text {
    line-height: 2; 
    text-align:left; 
    font-size: 18px; 
    font-weight: 500;
}

.wrapper {
    max-width: 60%;       
    min-height: 100vh;    /* Ensures the white background goes to the bottom of the screen */
    margin: 0 auto;       
    background: #ffffff;  
    padding: 10px;        
    display: flex;        /* Puts the left column and main content side-by-side */
    gap: 40px;            
}

/* Left Column Layout */
.left-col {
    display: flex;
    flex-direction: column; /* Stacks logo above the sidebar */
    align-items: center; /* Centers the logo horizontally over the sidebar */
    width: 200px; /* Matches the sidebar width */
    flex-shrink: 0; /* Prevents the content area from squishing the sidebar width */
    gap: 10px; /* Space between logo and sidebar */
}

/* Logo styling */
.logo {
    width: 100px; 
    height: 120px;
   /* margin-top: 10px;*/
}

/* Side Navigation */
.sidenav {
    width: 100%;            /* Fills the 200px width of the left column */
    background-color: #111; 
    border-radius: 8px;   
    flex-grow: 1;           /* Forces the sidebar to stretch to the bottom */
    overflow: hidden;     
}

/* Side navigation links */
.sidenav a {
    color: white;
    padding: 10px;
    text-decoration: none;
    display: block;
    font-size: 22px;
}

/* This changes the color of the link when it's the active page */
.sidenav a.active {
    color: #ffcc00; /* Gold color for active link */
    font-weight: bold;
    border-left: 4px solid #ffcc00; /* Adds a  vertical indicator bar on the left edge */
    padding-left: 12px; /* Offsets the text slightly to account for the border bar */
}

.sidenav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the content area */
.my-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 120px;
    min-height: 100vh;
}

/* --- RESPONSIVE STYLES FOR MOBILE & TABLETS & LAPTOPS --- */

/* 1600 BREAKPOINT */
@media screen and (max-width: 1600px) {
    .wrapper {
        max-width: 70%;
        padding: 20px;
    }
 }

/* 1400 BREAKPOINT  */
@media screen and (max-width: 1400px) {
    .wrapper {
        max-width: 80%;
        padding: 20px;
    }
 }

/* 1200 BREAKPOINT */
@media screen and (max-width: 1200px) {
    .wrapper {
        max-width: 90%;
        padding: 20px;
    }
 }

/*  1000 BREAKPOINT */
@media screen and (max-width: 1000px) {
    .wrapper {
        max-width: 100%;
        padding: 20px;
    }
 }

/* 800 BREAKPOINT */
@media screen and (max-width: 800px) {

    /* Stacks the left column and main content vertically on phones */
    .wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }

    /* Make the left column span the full width */
    .left-col {
        width: 100%;
    }

    /* Turn the sidebar into a horizontal menu instead of a vertical block */
    .sidenav {
        width: 100%;
        display: flex; /* Aligns navigation links side-by-side */
        flex-wrap: wrap; /* Allows links to wrap to a new line if there is no space */
        justify-content: space-around; /* Distributes links evenly across the phone screen */
    }

    .sidenav a {
        flex-grow: 1;
        flex-shrink: 1; /* Allows the links to shrink to fit small screens */
        min-width: 80px; /* Ensures links don't get squished completely flat before wrapping */
        text-align: center;
        padding: 12px 6px; /* Kept top/bottom padding, trimmed side padding to save space */
        font-size: 16px;
    }

    /* Adjust content padding so it looks neat on a phone */
    .my-content {
        padding-top: 10px;
    }
 }