html {
  font-size: clamp(12px, 2.5vw, 18px); /* Scales between 16px and 24px */
}

/* Root Variables for Brand Colors */
:root {
	--primary-color: #A0C263;
    --secondary-color: #737CB9;
    --accent-color: #FFCA05;
    --warning-color: #EE301D;
    --text-color: #5A390A;
    --sidebar-color: #FCCC04;
    }
/* General Styles */
body {
	font-family: 'Arial', sans-serif;
    color: var(--text-color);
    margin: 0;
	line-height: 1.2;
    padding: 0;
    text-align: center;
    }
@media screen and (min-width: 768px) {
.header-content {
    flex-direction: row;
    }
.nav-auth {
	flex-direction: row;
    justify-content: space-between;
    }
nav {
    flex-direction: row;
    }
}
@media screen and (max-width: 767px) {
.header-title {
	font-size: 1.2rem;
	margin-bottom: 20px;
    }
.header-content {
    flex-direction: column;
    }
.nav-auth nav {
    flex-direction: column;
    }
nav-button {
    width: 100%;
    }
.auth-links {
    font-size: 0.8rem;
    }
.org-logo img {
    display:none;
}
    .three-column-layout {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
    }

.sidebar {
display: none !important;
    }

    .main-content {
        flex: none; /* Remove flex grow */
        width: 100%; /* Take full width */
        padding: 10px; /* Adjust padding for smaller screens */
        box-sizing: border-box;
    }
    .responsive-div {
        display: none; /* Hide the div for smaller screens */
    }
}
button {
	padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background: var(--accent-color);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    margin: 5px;
    transition: all 0.3s ease;
    }
button:hover {
    background: var(--primary-color);
    transform: scale(1.05);
    }
h1 {
    font-size: 32px;
    margin: 0;
    padding: 10px 0;
    color: red;
    }

h2 {
	margin: 0;
   	padding: 10px 0;
    color: maroon;
    }
h3, p {
    margin: 0;
    padding: 10px 0;
    }
header {
    display: flex;
	background: var(--primary-color);
	flex-direction: column;
    align-items: center;
    padding: 10px;
    }
.header-title {
    text-align: center;
    font-size: 1.5rem;
    padding: 0 0;
	}
.header-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	margin-top: -10 px;
	margin-right: 0 px;
	margin-bottom: 0px;
	margin-left: 0px;
    max-width: 1200px;
	line-height: 1.2; /* Adjust line spacing for all elements inside the container */
}
footer {
    display: flex;
	background: var(--primary-color);
	flex-direction: column;
    align-items: center;
    padding: 0px;
	line-height: 1.2;
	font-size: clamp(8px, .5vw, 14px); /* Scales between 16px and 24px */
    }
.logo img {
    width: clamp(60px, 10vw, 150px); /* Dynamic width with minimum and maximum constraints */
    height: auto; /* Maintain aspect ratio */
	margin-top: -10px;
		}
.org-logo img {
    width: clamp(55px, 10vw, 140px); /* Dynamic width with minimum and maximum constraints */
    height: auto; /* Maintain aspect ratio */
	margin-top: -30px;	
	}
.nav-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
	}
nav {
    display: flex; /* Enables flexbox */
    flex-wrap: wrap; /* Allows wrapping if buttons overflow */
    justify-content: center; /* Centers buttons horizontally */
    gap: 0px; /* Adds space between buttons */
}

.nav-button {
    display: inline-block; /* Ensures buttons have proper block behavior */
    padding: 5px 10px; /* Adds padding inside the buttons */
    font-size: .8rem; /* Standard font size *
    text-align: center; /* Centers text */
    text-decoration: none; /* Removes underline from links */
    background: var(--secondary-color); /* Uses the defined secondary color */
    color: white; /* Makes the text color white */
    border: none;
    border-radius: 5px; /* Rounds button corners */
    cursor: pointer; /* Shows pointer cursor */
    transition: all 0.3s ease; /* Adds a hover transition effect */
    margin: 5px; /* Adds spacing between buttons */
}

.nav-button:hover {
    background-color: var(--accent-color);/* Changes background on hover */
    transform: scale(1.05); /* Slightly enlarges button on hover */
}

.nav-button.active {
    background-color: var(--accent-color); /* Color for the active link */
    color: black; /* Change text color */
    font-weight: bold; /* Optional: Highlight it further */
}
.auth-links {
    text-align: center;
    font-size: 0.9rem;
	}
.auth-links {
    font-size: 0.9rem; /* Smaller font size for links */
    color: var(--text-color);
    margin-top: 5px; /* Add a little spacing between buttons and links */
	}
.auth-links a:hover {
    text-decoration: underline;
    color: var(--accent-color);
	}
.three-column-layout {
    display: flex;
    min-height: calc(100vh - 100px); /* Adjust for header and footer height */
    width: 100%; /* Ensure full width of the page */
}

.column {
    padding: 20px;
    box-sizing: border-box; /* Include padding in the width */
}

.sidebar {
    flex: 0 0 20%; /* Do not grow or shrink, width fixed at 20% */
    background: var(--sidebar-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
	box-sizing: border-box;
}
.sidebar img {
    max-width: 100%;
    max-height: 200px;
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 0px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.main-content {
    flex: 1; /* Take up the remaining space */
    padding: 10px;
    box-sizing: border-box;
    background: white;
}
#left-sidebar img,
#right-sidebar img {
    padding: 5px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    max-width: 100%; /* Prevents image overflow */
    height: auto; /* Maintains aspect ratio */
}

.module-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
}

.module-button {
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    display: block; /* Stretch to full width */
    width: 100%; /* Full width within the grid cell */
    box-sizing: border-box; /* Include padding in width */
    line-height: normal;
}

.module-button:hover {
    background-color: var(--accent-color);
    transform: scale(1.05);
}
.pdf-container {
    width: 100%; /* Full width of the parent container */
    max-width: 1200px; /* Optional: Set a max width if needed */
    margin: 0 auto; /* Center the container if it has a max-width */
    padding: 0; /* Optional: Remove any default padding */
    box-sizing: border-box;
}

.pdf-container embed {
    width: 100%; /* Make embed fill the container's width */
    height: 90vh; /* Adjust height to 90% of the viewport height */
    border: none; /* Remove any default border */
    display: block; /* Remove inline spacing */
}
.pdf-title {
	margin: 0;
    padding: 10px 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    }

/* Responsive Table */
.responsive-table {
    max-width: 100%; 
    border-collapse: collapse;
    background-color: #f8f8f8;
}
/* Container that holds the iframe */
.iframe-container {
    width: 60vw;  /* Full viewport width */
    height: 150vh;  /* 50% of the viewport height */
    box-sizing: border-box; /* Include padding/borders in width/height */
    overflow: hidden; /* Prevent scrollbars if needed */
}

/* Make iframe fill its container */
.iframe-container iframe {
    width: 100%; /* Fill the container's width */
    height: 100%; /* Fill the container's height */
    border: none; /* Remove the default border */
    display: block; /* Remove inline spacing */
}
/* Sidebar images start invisible */
.sidebar img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
    display: block;              /* Remove inline spacing */
    width: 100%;                 /* Or fixed px value if you prefer */
    height: auto;                /* Maintain aspect ratio */
}

/* When loaded, fade in */
.sidebar img.loaded {
    opacity: 1;
}