/* Universal Box-Sizing for consistent layout */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Root Variables for new uniform-matching theme */
:root {
    --primary-color: #b56634; /* Rich Burnt Orange/Brown from skirt (Header, headings, key elements) */
    --secondary-color: #f0edef00; /* Light Grey-Blue (New main page background) */
    --accent-color: #FFD700; /* Yellow for buttons and highlights */
    --text-color: #4F2E1B; /* Deep Dark Brown for main body text */
    --light-text-color: #FFFFFF; /* Pure White for text on dark backgrounds */
    --border-color: #C2D1E0; /* Slightly darker grey-blue for borders on light background */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.023);
    --demure-grey: #8A7564; /* Muted, warm grey for secondary text */
    --footer-bg-color: #222222d8; /* Updated: Deep black for footer */
}

/* General Body and Base Styles */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color); /* New light grey-blue background */
    overflow-x: hidden; /* Prevent horizontal scroll on smaller screens */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Headings Typography */
h1, h2, h3, h4 {
    font-family: 'Roboto', sans-serif;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.2;
}

h1 {
    font-size: 2.8em;
    text-align: center;
    color: var(--primary-color);
}

h2 {
    font-size: 2.2em;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--demure-grey); /* Uses demure-grey for a softer line */
    margin-bottom: 30px;
    color: var(--primary-color);
}

h3 {
    font-size: 1.7em;
    color: var(--primary-color);
}

h4 {
    font-size: 1.3em;
    color: var(--primary-color);
}

/* Links and Buttons */
a {
    text-decoration: none;
    color: var(--accent-color); /* Links use yellow accent */
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color); /* Links hover to primary brown */
}

.btn {
    display: inline-block;
    background-color: var(--accent-color); /* Buttons are now yellow */
    color: var(--text-color); /* Button text is dark brown for contrast */
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #FFC400; /* Slightly darker yellow on hover */
    transform: translateY(-2px);
}

.btn-small {
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 4px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

p {
    margin-bottom: 10px;
}

/* Header and Navigation Styles */
header {
    background-color: var(--primary-color); /* Header background is warm brown */
    padding: 10px 0;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    flex-wrap: wrap; /* ADDED: Allows items inside to wrap to the next line if needed */
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav .logo {
    display: flex;
    align-items: center;
}

nav .logo img {
    height: 60px;
    margin-right: 15px;
    border-radius: 5px;
}

nav .logo h1 {
    font-size: 2em;
    color: var(--light-text-color); /* Logo text is white */
    margin: 0;
    white-space: nowrap;
}

#main-nav {
    display: flex;
    flex-basis: 100%; /* ADDED: Forces this element to take full width, pushing it to a new line */
    justify-content: center; /* ADDED: Centers your navigation links below the logo/school name */
    margin-top: 10px; /* ADDED: Add some space between the logo row and the nav ribbon */
}

#main-nav li {
    position: relative;
    margin: 0 18px;
}

#main-nav a {
    display: block;
    padding: 15px 0;
    color: var(--light-text-color); /* Nav links are white */
    font-weight: 600;
    font-size: 1.15em;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

#main-nav a:hover,
#main-nav a.active {
    color: var(--accent-color); /* Nav hover/active uses yellow accent */
    border-bottom: 3px solid var(--accent-color);
}

/* Dropdown Menu Styles */
.has-dropdown > a {
    display: flex;
    align-items: center;
}

.dropdown-arrow, .dropdown-caret {
    margin-left: 8px;
    font-size: 0.8em;
    transition: transform 0.3s ease;
    color: var(--light-text-color); /* Arrows are white */
}

.has-dropdown:hover > a .dropdown-arrow,
.has-dropdown:hover > a .dropdown-caret {
    transform: rotate(180deg);
}
.has-dropdown .has-dropdown:hover > a .dropdown-caret {
    transform: rotate(90deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--light-text-color); /* Dropdown background is white */
    box-shadow: var(--box-shadow);
    min-width: 220px;
    z-index: 1;
    border-top: 4px solid var(--accent-color); /* Dropdown border is yellow accent */
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    border-radius: 0 0 8px 8px;
}

.dropdown-menu li {
    margin: 0;
    border-bottom: 1px solid var(--border-color); /* Dropdown item separator uses light grey-blue border */
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

/* FIX: Added higher specificity for dropdown links on desktop */
#main-nav .dropdown-menu a {
    padding: 12px 25px;
    font-size: 1em;
    color: var(--text-color); /* FORCED: Dropdown link text is dark brown for visibility on white background */
    white-space: nowrap;
    font-weight: normal;
    border-bottom: none;
}

#main-nav .dropdown-menu a:hover {
    background-color: var(--secondary-color); /* Dropdown hover background is light grey-blue */
    color: var(--primary-color); /* Dropdown hover text is primary brown */
}

.has-dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nested Dropdown Styles */
.sub-dropdown-menu {
    left: 100%;
    top: 0;
    border-top: none;
    border-left: 4px solid var(--accent-color); /* Sub-dropdown border is yellow accent */
    border-radius: 0 8px 8px 0;
}

/* FIX: Added higher specificity for sub-dropdown links on desktop */
#main-nav .sub-dropdown-menu a {
    color: var(--text-color); /* FORCED: Sub-dropdown link text is dark brown */
}
#main-nav .sub-dropdown-menu a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}


/* Hamburger Menu for Mobile */
.hamburger-menu {
    display: none;
    font-size: 2em;
    cursor: pointer;
    color: var(--light-text-color); /* Hamburger icon is white on dark header */
}

/* Main Content Area */
main {
    padding: 20px 0;
}

/* Collapsible Section Styles */
.collapsible-section {
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    background-color: var(--light-text-color); /* Content sections are white */
}

.collapsible-header {
    background-color: var(--primary-color); /* Collapsible header is warm brown */
    color: var(--light-text-color);
    padding: 20px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    transition: background-color 0.3s ease;
}

.collapsible-header:hover {
    background-color: #A05C2B; /* Darker primary on hover */
}

.collapsible-header h2 {
    color: var(--light-text-color);
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1em;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.collapsible-header.active .toggle-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    background-color: var(--light-text-color); /* Collapsible content background is white */
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-out, padding 0.7s ease-out;
    border-radius: 0 0 10px 10px;
}

.collapsible-content.active {
    max-height: 2000px; /* Adjust as needed for content length */
    padding: 30px;
}

/* Homepage Hero Section (Slideshow) */
.hero {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeEffect 1.5s ease-in-out;
}

.mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.hero-content-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--light-text-color);
    padding: 20px 30px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    max-width: 80%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-content-slide h2 {
    color: var(--light-text-color);
    font-size: 2.8em;
    margin-bottom: 15px;
    border-bottom: none;
}

.hero-content-slide p {
    font-size: 1.5em;
    margin-bottom: 25px;
    font-weight: 300;
}

.hero-content-slide .btn {
    background-color: var(--accent-color); /* Hero button yellow */
    color: var(--text-color); /* Hero button text dark brown */
    padding: 15px 35px;
    font-size: 1.1em;
    border-radius: 30px;
}

.hero-content-slide .btn:hover {
    background-color: #FFC400; /* Darker yellow on hover */
    transform: translateY(-3px);
}

.dot-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    border: 1px solid var(--primary-color);
}

.dot.active, .dot:hover {
    background-color: var(--primary-color);
}

@keyframes fadeEffect {
    from {opacity: 0.7;}
    to {opacity: 1;}
}

/* Homepage 'Why Choose Us' */
.why-choose-us {
    padding: 50px 20px;
    text-align: center;
    background-color: var(--secondary-color); /* Background is light grey-blue */
}

.why-choose-us h2 {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-item {
    background-color: var(--light-text-color); /* Feature item background is white */
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-item i {
    font-size: 3.5em;
    color: var(--accent-color); /* Icon uses accent yellow */
    margin-bottom: 20px;
    display: block;
}

.feature-item h3 {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.feature-item p {
    color: var(--demure-grey);
    font-size: 0.95em;
}

/* About Us Page Specific Content Styles */
.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.mission-vision, .about-history {
    flex: 1;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mission-vision .box, .about-history .box, .charter-version.box {
    background-color: var(--light-text-color); /* Boxes are white */
    padding: 30px;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.mission-vision h3, .about-history h3 {
    margin-top: 0;
}

.mission-vision ul {
    list-style: disc;
    margin-left: 25px;
}

.mission-vision ul li {
    margin-bottom: 10px;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.charter-language-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.charter-version {
    flex: 1;
    min-width: 280px;
    text-align: center;
}

.charter-version i.fas {
    color: var(--primary-color) !important;
}

/* Governance and Staff Section */
.person-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.person-card {
    background-color: var(--light-text-color); /* Person card background is white */
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.person-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.person-card .person-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--accent-color); /* Portrait border is yellow accent */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.person-card h4 {
    margin: 10px 0 5px;
    font-size: 1.1em;
    color: var(--primary-color);
}

.person-card .role {
    font-size: 0.9em;
    color: var(--demure-grey);
    margin-bottom: 5px;
    font-weight: bold;
}

.person-card .motto {
    font-size: 0.85em;
    color: var(--demure-grey);
    font-style: italic;
    margin-bottom: 0;
}

/* Staff Gallery Styles */
.staff-gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.staff-gallery {
    background-color: var(--light-text-color); /* Staff gallery background is white */
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.staff-gallery h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.staff-gallery .gallery-slides {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    height: 250px;
}

.staff-gallery .gallery-slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-dots {
    margin-top: 15px;
    text-align: center;
}

.gallery-dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: var(--border-color);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.gallery-dot.active, .gallery-dot:hover {
    background-color: var(--accent-color); /* Dot uses accent yellow */
}

.gallery-arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 10px;
}

.gallery-arrows i {
    font-size: 1.5em;
    color: var(--accent-color); /* Arrow uses accent yellow */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gallery-arrows i:hover {
    background-color: var(--primary-color);
    color: var(--light-text-color);
}

/* Academics Page Specific Styles */
.departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.department-card {
    background-color: var(--light-text-color); /* Department card background is white */
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.department-card i.fas {
    font-size: 2.5em;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.department-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.department-card p {
    font-size: 0.95em;
    color: var(--demure-grey);
}

/* Charts Section */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.chart-card {
    background-color: var(--light-text-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.chart-card h3 {
    text-align: center;
    margin-bottom: 20px;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Admissions Page Specific Styles */
.admissions-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.admissions-text {
    flex: 2;
    min-width: 300px;
    background-color: var(--light-text-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.admissions-text h2 {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.admissions-text p {
    margin-bottom: 15px;
}

.admissions-image-card {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    background-color: var(--light-text-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.admissions-image-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admissions-image-card h3 {
    text-align: center;
    margin-bottom: 10px;
}

.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.process-step-card {
    background-color: var(--light-text-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    position: relative;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.process-step-card .step-number {
    background-color: var(--accent-color);
    color: var(--text-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    font-weight: bold;
    position: absolute;
    top: -30px; /* Adjust to sit on top edge of card */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--box-shadow);
    border: 3px solid var(--light-text-color); /* White border to separate from card */
}

.process-step-card h3 {
    margin-top: 40px; /* Adjust to account for the number circle */
    margin-bottom: 10px;
}

.process-step-card p {
    font-size: 0.95em;
    color: var(--demure-grey);
}

/* Student Life Page Specific Styles */
.student-life-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.student-life-text {
    flex: 2;
    min-width: 300px;
    background-color: var(--light-text-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.student-life-text h2 {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.student-life-text p {
    margin-bottom: 15px;
}

.student-life-image {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    background-color: var(--light-text-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.student-life-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.student-life-image h3 {
    text-align: center;
    margin-bottom: 10px;
}

.club-sports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.club-sport-card {
    background-color: var(--light-text-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-sport-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.club-sport-card i.fas {
    font-size: 3em;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.club-sport-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.club-sport-card p {
    font-size: 0.95em;
    color: var(--demure-grey);
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.info-card {
    background-color: var(--light-text-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    text-align: center;
}

.info-card i.fas {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.info-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.info-card p {
    font-size: 0.95em;
    color: var(--demure-grey);
}

/* Media & News Page Styles */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.news-article-card {
    background-color: var(--light-text-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.news-article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-meta {
    font-size: 0.85em;
    color: var(--demure-grey);
    margin-bottom: 15px;
}

.article-meta i {
    margin-right: 5px;
}

.article-content p {
    font-size: 0.95em;
    color: var(--text-color);
    margin-bottom: 15px;
    flex-grow: 1; /* Allows paragraph to take available space */
}

.article-content .btn {
    align-self: flex-start;
    margin-top: auto; /* Pushes button to the bottom */
}

/* Horizontal Gallery */
.horizontal-gallery-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: var(--light-text-color);
    padding: 20px;
    border: 1px solid var(--border-color);
}

.horizontal-gallery-container::-webkit-scrollbar {
    height: 8px;
}

.horizontal-gallery-container::-webkit-scrollbar-thumb {
    background: var(--demure-grey);
    border-radius: 10px;
}

.horizontal-gallery-container::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 10px;
}

.horizontal-gallery-container .gallery-item {
    display: inline-block;
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.horizontal-gallery-container .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Contact Us Page Styles */
.contact-form-section {
    background-color: var(--light-text-color);
    padding: 50px 40px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.contact-form-section h2 {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--primary-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    background-color: var(--secondary-color); /* Input background light grey-blue */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3);
}

.contact-form button.btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    background-color: var(--accent-color);
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button.btn:hover {
    background-color: #FFC400;
    transform: translateY(-2px);
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.contact-detail-card {
    background-color: var(--light-text-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-detail-card i.fas {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-detail-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-detail-card p {
    color: var(--demure-grey);
    margin-bottom: 5px;
    flex-grow: 1; /* Ensures text takes up space */
}

.contact-detail-card a {
    margin-top: auto; /* Pushes link to bottom */
    color: var(--accent-color);
    font-weight: bold;
}

.contact-detail-card a:hover {
    color: var(--primary-color);
}

.map-container {
    margin-top: 30px;
    background-color: var(--light-text-color);
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
}

/* Footer Styles */
footer {
    background-color: var(--footer-bg-color); /* Footer is deep black */
    color: var(--light-text-color);
    padding: 40px 0 20px;
    margin-top: 40px;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.footer-column h3 {
    color: var(--accent-color); /* Footer headings are yellow */
    margin-bottom: 15px;
    font-size: 1.3em;
}

.footer-column p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--accent-color); /* Footer links hover to yellow */
}

.footer-column.contact-us-footer p i {
    margin-right: 8px;
    color: var(--accent-color);
}

.social-icons a {
    color: var(--light-text-color);
    font-size: 1.5em;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--accent-color); /* Social icons hover to yellow */
}

.copyright {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Back to Top Button */
#back-to-top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 30px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button at the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--accent-color); /* Set a background color */
    color: var(--text-color); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 50%; /* Rounded corners */
    font-size: 1.5em; /* Increase font size */
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#back-to-top:hover {
    background-color: #FFC400; /* Darker yellow on hover */
    transform: translateY(-3px);
}


/* Responsive Design */
@media (max-width: 1024px) {
    #main-nav li {
        margin: 0 12px; /* Reduce spacing for smaller desktops/large tablets */
    }

    #main-nav a {
        font-size: 1.05em; /* Slightly smaller font */
    }

    .hero {
        height: 450px;
    }

    .hero-content-slide h2 {
        font-size: 2.2em;
    }

    .hero-content-slide p {
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    /* Header/Nav Adjustments */
    header {
        padding: 10px 0;
    }

    nav {
        flex-direction: row; /* Keep logo and hamburger on one row on mobile */
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    nav .logo h1 {
        font-size: 1.5em; /* Adjust font size for smaller screens */
    }

    nav .hamburger-menu {
        display: block; /* Show hamburger on mobile */
    }

    #main-nav {
        display: none; /* Hide main nav by default on mobile */
        flex-direction: column; /* Stack vertically for mobile menu */
        position: absolute; /* Position relative to nav */
        top: 100%; /* Position below the main header content */
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        box-shadow: var(--box-shadow);
        padding-top: 10px;
        z-index: 990;
        max-height: 0; /* For collapse/expand animation */
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    #main-nav.active {
        display: flex; /* Show when active (toggled by JS) */
        max-height: 500px; /* Or a larger value that ensures all content is visible */
    }

    #main-nav li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    #main-nav a {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #main-nav li:last-child a {
        border-bottom: none;
    }

    /* Dropdowns in Mobile Menu */
    .has-dropdown .dropdown-menu {
        position: static; /* Stack dropdowns normally in mobile menu */
        display: none; /* Hidden by default */
        width: 100%;
        box-shadow: none;
        border-top: none;
        background-color: rgba(0, 0, 0, 0.1); /* Slightly transparent for nested effect */
        padding-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .has-dropdown.active-dropdown .dropdown-menu {
        display: block; /* Show when parent has active-dropdown class */
        max-height: 300px; /* Adjust for content length */
    }

    #main-nav .dropdown-menu a {
        color: var(--light-text-color); /* Dropdown links white on mobile (since background is primary color) */
        padding: 10px 30px; /* Indent mobile dropdown links */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    #main-nav .dropdown-menu a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Nested dropdowns in mobile */
    .sub-dropdown-menu {
        border-left: none; /* No left border on mobile */
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0.05); /* Even more transparent for nested */
    }

    /* General responsive content adjustments */
    .container {
        padding: 0 15px;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.8em;
    }

    h3 {
        font-size: 1.5em;
    }

    .hero {
        height: 400px;
        margin-bottom: 20px;
    }

    .hero-content-slide {
        max-width: 90%;
        padding: 15px 20px;
    }

    .hero-content-slide h2 {
        font-size: 1.8em;
        margin-bottom: 10px;
    }

    .hero-content-slide p {
        font-size: 1em;
        margin-bottom: 15px;
    }

    .hero-content-slide .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .feature-item, .process-step-card, .club-sport-card, .info-card {
        padding: 25px;
    }

    .mission-vision, .about-history, .admissions-text, .admissions-image-card, .student-life-text, .student-life-image {
        min-width: unset; /* Remove min-width to allow full flexibility */
        flex: 1 1 100%; /* Stack them vertically */
    }

    .charter-language-sections, .person-cards-grid, .staff-gallery-container, .departments-grid, .charts-grid, .process-steps-grid, .club-sports-grid, .info-cards-grid, .news-grid, .contact-details-grid {
        grid-template-columns: 1fr; /* Single column layout for most grids */
        gap: 20px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-column {
        min-width: unset;
    }
    .footer-column ul {
        text-align: center;
    }
    .social-icons {
        display: flex;
        justify-content: center;
    }

    /* Horizontal Gallery adjustments for mobile view */
    .horizontal-gallery-container {
        padding-bottom: 10px;
    }
    .horizontal-gallery-container .gallery-item {
        width: 85%;
        max-width: 320px;
        margin-right: 15px;
    }
}

/* Very Small Mobile Devices (max-width 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    nav .logo h1 {
        font-size: 1.3em;
    }

    h1 { font-size: 1.8em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.3em; }

    .hero h1 {
        font-size: 1.8em;
    }
    .hero p {
        font-size: 0.9em;
    }

    .collapsible-header {
        font-size: 1.2em;
        padding: 12px 15px;
    }

    /* Further reduce padding for mobile nav links if needed */
    #main-nav a {
        padding: 10px 15px;
    }
    #main-nav .dropdown-menu a {
        padding: 8px 20px;
    }

    .mission-vision .box,
    .about-history .box,
    .charter-version,
    .admissions-text,
    .admissions-image-card,
    .student-life-text,
    .student-life-image,
    .feature-item, .fact-item, .achievement-card,
    .person-card, .process-step-card, .club-sport-card, .info-card,
    .news-article-card, .contact-detail-card, .staff-gallery {
        padding: 15px;
    }

    .process-step-card .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.5em;
    }

    .contact-form-section {
        padding: 30px 20px;
    }

    .horizontal-gallery-container .gallery-item {
        width: 85%;
        max-width: 320px;
        margin-right: 15px;
    }

    .club-sport-card {
        width: 100%; /* Full width for very small screens */
    }
}
/* --- Media & News Main Page Card Grid --- */
.intro-text {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1em;
    color: #555;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-icon {
    font-size: 3em;
    color: #007bff; /* Primary color for icons */
    margin-bottom: 20px;
}

.card h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.6em;
}

.card p {
    color: #666;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card .btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.card .btn:hover {
    background-color: #0056b3;
}

/* --- Specific Styles for News & Updates Page (media-news-updates.html) --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.news-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.news-card img {
    width: 100%;
    height: 200px; /* Fixed height for images */
    object-fit: cover; /* Ensures images cover the area without distortion */
    display: block;
}

.news-content {
    padding: 20px;
    flex-grow: 1; /* Allows content to take up available space */
    display: flex;
    flex-direction: column;
}

.news-content h4 {
    color: #007bff;
    font-size: 1.4em;
    margin-bottom: 10px;
}

.news-content .date {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.news-content p {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Allows paragraph to grow and push button to bottom */
}

.news-content .btn {
    align-self: flex-start; /* Aligns the button to the start of the flex container */
    background-color: #007bff;
    color: white;
    padding: 8px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.news-content .btn:hover {
    background-color: #0056b3;
}

/* --- Specific Styles for Important Memos Page (media-news-memos.html) --- */
.memos-list {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout for memos */
    gap: 20px;
    margin-top: 30px;
}

.memo-item {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    align-items: flex-start; /* Align icon and content to the top */
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.memo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.memo-item .fas {
    font-size: 2.5em;
    color: #28a745; /* Green color for memo icon */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.memo-content h4 {
    color: #333;
    font-size: 1.3em;
    margin-bottom: 8px;
}

.memo-content .date {
    font-size: 0.85em;
    color: #777;
    margin-bottom: 10px;
    display: block; /* Ensures date is on its own line */
}

.memo-content p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

.memo-content .btn-small {
    background-color: #17a2b8; /* Info blue for download button */
    color: white;
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex; /* Allows icon and text to sit together */
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.memo-content .btn-small:hover {
    background-color: #138496;
}

/* --- Specific Styles for Gallery Page (media-news-gallery.html) --- */
.horizontal-gallery-container {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    gap: 20px;
    padding: 20px 0;
    scroll-snap-type: x mandatory; /* Smooth snapping effect */
    -webkit-overflow-scrolling: touch; /* Improved scrolling on iOS */
    scrollbar-width: thin; /* Firefox scrollbar */
    scrollbar-color: #007bff #f1f1f1; /* Firefox scrollbar color */
}

/* Custom scrollbar for Webkit browsers */
.horizontal-gallery-container::-webkit-scrollbar {
    height: 8px;
}

.horizontal-gallery-container::-webkit-scrollbar-thumb {
    background-color: #007bff;
    border-radius: 10px;
}

.horizontal-gallery-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

.gallery-item {
    flex: 0 0 auto; /* Prevent items from growing or shrinking, fix width */
    width: 300px; /* Fixed width for each gallery item */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: center;
    scroll-snap-align: start; /* Snap to start of item */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 200px; /* Fixed height for gallery images */
    object-fit: cover;
    display: block;
}

.gallery-caption {
    padding: 15px;
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
    }

    .news-grid {
        grid-template-columns: 1fr; /* Stack news cards on smaller screens */
    }

    .horizontal-gallery-container {
        padding: 10px 0;
    }

    .gallery-item {
        width: 280px; /* Slightly smaller width for mobile gallery items */
    }
}
/* Remove or modify these if they exist and are only for collapsible behavior */
.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--primary-color); /* Or whatever color you used */
    color: white;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.collapsible-header h2 {
    margin: 0;
    font-size: 1.5em;
    display: flex;
    align-items: center;
}

.collapsible-header .toggle-icon {
    transition: transform 0.3s ease;
}

.collapsible-header.active .toggle-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 20px; /* Adjust if needed */
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: #f9f9f9;
}

.collapsible-content.show {
    max-height: 1000px; /* A value larger than the content will ever be */
    padding: 20px; /* Restore padding when shown */
}
/* --- General Body & Container Adjustments --- */
body {
    line-height: 1.6; /* Slightly reduce line height for paragraphs for compactness */
    font-size: 16px; /* Ensure a consistent and readable base font size */
    color: #333; /* Default text color */
    background-color: #f4f7f6; /* Light background for the page */
}

.container {
    max-width: 1100px; /* Adjust based on your overall site layout, centers content */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 20px; /* Padding on the sides for content to breathe */
}

/* --- Main Content Section Styling --- */
main {
    padding: 40px 0; /* Vertical padding for the main content area */
}

main section {
    background-color: #ffffff; /* White background for each content section */
    border-radius: 8px; /* Slightly rounded corners for sections */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    margin-bottom: 30px; /* Space between different sections */
    padding: 30px; /* Internal padding for section content */
}

main section:last-child {
    margin-bottom: 0; /* No bottom margin for the last section */
}

/* --- Typography Adjustments --- */
h1 {
    font-family: 'Roboto', sans-serif; /* Consistent font for headings */
    font-size: 2.8em; /* Main page title size */
    color: #2c3e50; /* Darker heading color */
    text-align: center;
    margin-bottom: 25px; /* Space below the main title */
    padding-top: 20px; /* Ensure some space from the top of the container */
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2em; /* Section titles size */
    color: #3498db; /* A primary blue for section headings */
    text-align: center;
    margin-bottom: 25px; /* Space below section titles */
    border-bottom: 2px solid #ecf0f1; /* Subtle line below heading */
    padding-bottom: 15px; /* Space between text and line */
    margin-top: 0; /* Reset default top margin */
}

.intro-text {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    text-align: center;
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto 40px auto; /* Center and add space below */
}

/* --- Contact Details Grid --- */
.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
    gap: 25px; /* Space between grid items */
    margin-top: 30px; /* Space above the grid */
    margin-bottom: 40px; /* Space below the grid */
}

.info-item {
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: flex-start; /* Align items to the top (icon and text start at the same level) */
    background-color: #fcfcfc; /* Very light background for individual info items */
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0; /* Light border for definition */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

.info-item:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* More prominent shadow on hover */
}

.info-item i {
    font-size: 1.8em; /* Size of the icon */
    color: #27ae60; /* A vibrant green for icons */
    margin-right: 20px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 35px; /* Fixed width for consistent alignment */
    text-align: center;
}

.info-item p {
    margin: 0;
    font-size: 1.05em;
    color: #444;
}

.info-item strong {
    display: block; /* Puts the label on its own line */
    margin-bottom: 5px;
    font-size: 1.15em;
    color: #333;
}

/* --- Social Icons in Contact Info Section --- */
.social-icons-contact {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* Separator line above social icons */
}

.social-icons-contact h4 {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 18px;
    font-weight: 600;
}

.social-icons-contact a {
    display: inline-block;
    font-size: 2.2em; /* Larger icons for visibility */
    color: #7f8c8d; /* Muted grey for icons */
    margin: 0 12px; /* Spacing between icons */
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons-contact a:hover {
    color: #3498db; /* Primary blue on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

/* --- Contact Form Styling --- */
.contact-form {
    padding: 35px; /* Internal padding for the form */
    background-color: #fdfdfd; /* Very light background for the form */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Consistent shadow with sections */
    max-width: 750px; /* Limit form width for better readability and centering */
    margin: 0 auto; /* Center the form within its section */
}

.form-group {
    margin-bottom: 22px; /* Spacing between form fields */
}

.form-group label {
    display: block; /* Label on its own line */
    margin-bottom: 8px; /* Space between label and input */
    font-weight: 600;
    color: #333;
    font-size: 1.05em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="subject"], /* Added subject input explicitly */
.form-group textarea {
    width: 100%; /* Full width of the parent container */
    padding: 12px 15px; /* Padding inside inputs */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif; /* Consistent font for inputs */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #3498db; /* Highlight border on focus */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.2); /* Subtle shadow on focus */
    outline: none; /* Remove default outline */
}

.form-group textarea {
    resize: vertical; /* Allow resizing only vertically */
    min-height: 120px; /* Minimum height for textarea */
}

.btn {
    display: block; /* Make button full width */
    width: 100%; /* Button fills its container */
    padding: 15px 25px;
    background-color: #28a745; /* Green color for the send button */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.15em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 30px; /* Space above the button */
}

.btn:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* --- Map Section Styling --- */
.map-container {
    border-radius: 8px;
    overflow: hidden; /* Ensures the iframe respects border-radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Consistent shadow */
    margin-top: 30px; /* Space above the map container */
    margin-bottom: 20px; /* Space below the map container */
}

.map-container iframe {
    /* Dimensions are set in HTML, but ensure no border */
    border: none;
    display: block; /* Remove extra space below iframe */
}

.map-note {
    font-size: 0.95em;
    color: #666;
    text-align: center;
    margin-top: 15px; /* Space between map and note */
    padding: 0 10px; /* Small horizontal padding */
}

/* --- Responsive Adjustments (General) --- */
@media (max-width: 992px) {
    h1 {
        font-size: 2.4em;
    }

    h2 {
        font-size: 1.8em;
    }

    main section {
        padding: 25px;
        margin-bottom: 25px;
    }

    .contact-details-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* More flexible on tablets */
        gap: 20px;
    }

    .info-item {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 15px; /* Reduce container padding on smaller screens */
    }

    h1 {
        font-size: 2em;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

    .intro-text {
        font-size: 1em;
        margin-bottom: 30px;
    }

    main section {
        padding: 20px;
        margin-bottom: 20px;
    }

    .contact-details-grid {
        grid-template-columns: 1fr; /* Stack items vertically on mobile */
        gap: 15px;
    }

    .info-item {
        padding: 15px;
    }

    .info-item i {
        font-size: 1.6em;
        margin-right: 15px;
        width: 30px;
    }

    .info-item p {
        font-size: 0.95em;
    }

    .info-item strong {
        font-size: 1.05em;
    }

    .social-icons-contact a {
        font-size: 2em;
        margin: 0 8px;
    }

    .contact-form {
        padding: 25px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-group input,
    .form-group textarea,
    .btn {
        padding: 12px;
        font-size: 1em;
    }

    .btn {
        margin-top: 25px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.4em;
    }
    
    .intro-text {
        font-size: 0.95em;
        margin-bottom: 25px;
    }

    main section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .contact-form {
        padding: 20px;
    }

    .form-group input,
    .form-group textarea,
    .btn {
        padding: 10px;
        font-size: 0.95em;
    }
}
/* --- NEW & REFINED: Guiding Principles Section (Motto, Mission, Vision, Values) --- */

/* No change here, keeps the section itself transparent */
.principles-section {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 40px;
}

.principles-section h2 {
    /* Style for "Our Guiding Principles" heading */
    margin-bottom: 30px;
    border-bottom: none;
}

.principles-grid {
    display: grid;
    /* On larger screens, 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* No gap between items for a continuous block look */
    border-radius: 8px; /* Apply border radius to the whole grid if desired */
    overflow: hidden; /* Ensures content stays within rounded corners */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* Shadow for the entire block */
}

.principle-item {
    color: white; /* Default text color for these items */
    padding: 30px; /* Padding inside each box */
    text-align: center;
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: center; /* Center horizontally within the item */
    min-height: 300px; /* Slightly increase height for better spacing as per image */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    cursor: default; /* Indicate it's not clickable like a button */
}

.principle-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

.principle-item i {
    font-size: 3.8em; /* Slightly larger icons */
    margin-bottom: 25px; /* More space below icons */
    /*
    This is the key for icon color and "thin" appearance.
    If using Font Awesome Pro, you'd also change the class in HTML to 'fal' or 'fat'
    For free Font Awesome, 'fas' will generally be solid.
    We'll use a specific light color for consistency with the image.
    */
    color: rgba(255, 255, 255, 0.7); /* Lighter, subtle white color for icons */
    /* For Font Awesome Pro 'thin' style, you might need: font-weight: 100; */
}

.principle-item h3 {
    font-size: 1.5em; /* Stays same */
    margin-bottom: 15px;
    color: white;
    font-family: 'Roboto', sans-serif; /* Use Roboto for headings */
    line-height: 1.3;
}

.principle-item p,
.principle-item ul {
    font-size: 0.95em; /* Stays same */
    line-height: 1.7; /* Slightly more line height for readability */
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for readability */
    margin-bottom: 0;
    flex-grow: 1; /* Allows paragraphs to take up available space for consistent height */
}

.principle-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.principle-item ul li {
    margin-bottom: 5px;
}

.principle-item .quote {
    font-size: 1.1em; /* Stays same */
    font-style: italic;
    font-weight: 700;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.98); /* Near pure white for quotes */
}

/* Background colors (using approximate colors from the image) */
.motto-bg {
    background-color: #e74c3c; /* Red */
}

.mission-bg {
    background-color: #34495e; /* Dark Blue */
}

.vision-bg {
    background-color: #6a4c9c; /* Slightly adjusted purple to match image */
}

.values-bg {
    background-color: #4a9e99; /* Adjusted teal/green to match image */
}

/* --- Responsive Adjustments for Principles Grid --- */
@media (max-width: 992px) {
    .principles-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }

    .principle-item {
        min-height: 280px; /* Adjust height for tablet */
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .principles-grid {
        grid-template-columns: 1fr; /* Stack vertically on small mobile devices */
    }

    .principle-item {
        min-height: auto; /* Allow height to adjust to content on mobile */
        padding: 20px;
    }

    .principle-item i {
        font-size: 3.5em; /* Slightly smaller icons */
        margin-bottom: 20px;
    }

    .principle-item h3 {
        font-size: 1.3em;
    }

    .principle-item p,
    .principle-item ul {
        font-size: 0.9em;
    }

    .principle-item .quote {
        font-size: 1em;
    }
}

/* No change needed for .icon-white class in HTML, as we're setting color directly in .principle-item i */
/* You can remove the separate .icon-white class if you want, as it's not strictly necessary now */

/* Ensure the general styles for sections/headings from previous steps are also present in style.css */
/* For example: */
/*
main {
    padding: 40px 0;
}

main section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    padding: 30px;
}
main section:last-child {
    margin-bottom: 0;
}
h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    color: #3498db;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 15px;
    margin-top: 0;
}
*/
/* --- Service Charter Page Specific Styles --- */

.download-section {
    text-align: center; /* Center the heading and intro text */
    padding: 40px; /* Generous padding for the main section */
}

.download-section .intro-text {
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 30px auto; /* Center and add space below intro text */
}

.download-links-container {
    display: flex; /* Use flexbox to arrange buttons */
    flex-direction: row; /* Default to row for larger screens */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    justify-content: center; /* Center buttons horizontally */
    gap: 25px; /* Space between the buttons */
    margin-top: 30px;
    margin-bottom: 40px;
}

.download-links-container .btn {
    min-width: 250px; /* Ensure buttons have a reasonable minimum width */
    padding: 15px 30px;
    font-size: 1.1em;
    display: flex; /* Make the button content (icon + text) a flex container */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Horizontally center icon and text */
}

.download-links-container .btn i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.2em; /* Slightly larger icon inside button */
}

/* Optional: Different color for Kiswahili button */
.download-links-container .kiswahili-btn {
    background-color: #2c8e6a; /* A different shade of green/teal */
}

.download-links-container .kiswahili-btn:hover {
    background-color: #227357; /* Darker shade on hover */
}

.note-text {
    font-size: 0.9em;
    color: #777;
    margin-top: 20px;
    text-align: center;
}

/* --- Responsive adjustments for buttons --- */
@media (max-width: 600px) {
    .download-links-container {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 15px; /* Adjust gap when stacked */
    }

    .download-links-container .btn {
        width: 100%; /* Full width when stacked */
        max-width: 300px; /* Max width for stacked buttons for readability */
        margin: 0 auto; /* Center stacked buttons */
    }

    .download-section {
        padding: 25px;
    }
}
/* --- Governance Page Specific Styles --- */

/* Senior Management Section */
.senior-management .intro-text {
    font-size: 1.1em;
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    color: #555;
    line-height: 1.7;
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between cards */
    padding: 20px 0;
    justify-content: center; /* Center items in the grid */
}

.management-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.management-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.management-card img {
    width: 150px; /* Fixed width for profile images */
    height: 150px; /* Fixed height for profile images */
    border-radius: 50%; /* Make images circular */
    object-fit: cover; /* Ensure images fill the circular space */
    border: 4px solid #3498db; /* Blue border around images */
    margin-bottom: 20px;
}

.management-card h3 {
    font-size: 1.6em;
    color: #2c3e50; /* Darker text for names */
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
}

.management-card .role {
    font-size: 1.1em;
    color: #3498db; /* Blue for roles */
    font-weight: 600;
    margin-bottom: 15px;
}

.management-card .quote {
    font-style: italic;
    color: #777;
    font-size: 0.95em;
    margin-top: auto; /* Push quote to bottom for consistent spacing */
}

/* BOM Members Section (Table) */
.bom-members .intro-text {
    font-size: 1.1em;
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    color: #555;
    line-height: 1.7;
}

.table-responsive {
    overflow-x: auto; /* Enables horizontal scrolling for tables on small screens */
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.bom-table {
    width: 100%;
    border-collapse: collapse; /* Removes space between table cells */
    min-width: 500px; /* Ensure table doesn't get too narrow on small screens */
    background-color: #fff;
    border-radius: 8px; /* Apply to table itself, but responsive container might cut */
}

.bom-table th,
.bom-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee; /* Light line between rows */
}

.bom-table th {
    background-color: #3498db; /* Blue header background */
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

.bom-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping for readability */
}

.bom-table tbody tr:hover {
    background-color: #f1f8ff; /* Light blue on hover */
}

.bom-table td:first-child {
    font-weight: 600; /* Bold the serial number */
    color: #2c3e50;
}

.bom-members .note-text {
    font-size: 0.95em;
    color: #777;
    margin-top: 25px;
    text-align: center;
}

/* Ensure the general .content-section styles are present from previous steps: */
/*
main .content-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    padding: 30px;
}
main h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    color: #3498db;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 15px;
    margin-top: 0;
}
*/
/* --- Our Profile Page Specific Styles --- */

/* General content section styling (ensure this is applied globally or explicitly here) */
.content-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    padding: 30px;
    text-align: center; /* Center headings for consistency */
}

.content-section h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.2em;
    color: #3498db;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 15px;
    margin-top: 0;
}

.content-section h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}

.content-section p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

/* Profile Introduction Section */
.profile-intro .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 40px;
    align-items: center; /* Vertically align content */
    text-align: left; /* Align text within its column */
    margin-top: 30px;
}

.profile-intro .intro-text-column p {
    margin-bottom: 20px;
}

.profile-main-image {
    width: 100%;
    max-height: 400px; /* Limit image height */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Mission, Vision, Values Section */
.mvv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Flexible columns */
    gap: 30px;
    margin-top: 30px;
}

.mvv-card {
    background-color: #f8f8f8; /* Light background for cards */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.mvv-card h3 {
    color: #3498db; /* Blue for mission/vision/values headings */
    font-size: 1.5em;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.mvv-card p {
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    flex-grow: 1; /* Allow content to push to bottom if varying heights */
}

.mvv-card .values-list {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin-top: 15px;
    text-align: left; /* Align values list items */
}

.mvv-card .values-list li {
    margin-bottom: 10px;
    font-size: 1em;
    color: #444;
}

.mvv-card .values-list li i {
    color: #3498db; /* Blue icons */
    margin-right: 10px;
    font-size: 1.1em;
}

/* History & Achievements Section */
.history-achievements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for history and achievements */
    gap: 40px;
    margin-top: 30px;
    text-align: left; /* Align text within these boxes */
}

.history-box,
.achievements-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.history-box h3,
.achievements-box h3 {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.6em;
    text-align: center;
}

.timeline-list,
.achievements-list {
    list-style: none; /* Remove default bullets */
    padding: 0;
}

.timeline-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    font-size: 1.0em;
    color: #555;
    line-height: 1.6;
}

.timeline-list li:before {
    content: "\f058"; /* FontAwesome check-circle icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #28a745; /* Green color for timeline dots */
    font-size: 1.1em;
}

.timeline-list li strong {
    color: #2c3e50; /* Darker color for years */
}

.achievements-list li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    font-size: 1.0em;
    color: #555;
    line-height: 1.5;
}

.achievements-list li:before {
    content: "\f005"; /* FontAwesome star icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #ffc107; /* Gold color for achievement stars */
    font-size: 1.0em;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .profile-intro .intro-grid {
        grid-template-columns: 1fr; /* Stack columns on medium screens */
        text-align: center; /* Center text when stacked */
    }
    .profile-intro .intro-text-column {
        order: 2; /* Put text below image on smaller screens */
    }
    .profile-intro .intro-image-column {
        order: 1; /* Put image above text on smaller screens */
    }
    .profile-main-image {
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .mvv-grid {
        grid-template-columns: 1fr; /* Stack MVV cards on smaller screens */
    }
    .history-achievements-grid {
        grid-template-columns: 1fr; /* Stack history and achievements on smaller screens */
    }
    .content-section {
        padding: 20px;
    }
    .content-section h2 {
        font-size: 1.8em;
    }
    .content-section h3 {
        font-size: 1.4em;
    }
    .content-section p,
    .timeline-list li,
    .achievements-list li,
    .mvv-card p {
        font-size: 0.95em;
    }
}

@media (max-width: 576px) {
    .profile-main-image {
        max-height: 250px;
    }
}
/* --- Academics Page Specific Styles --- */

/* Overview Section Text */
.overview-section p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 25px;
}

/* Quick Navigation Cards Container */
.quick-nav-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for cards */
    gap: 30px; /* Space between cards */
    margin-top: 40px;
    padding: 10px 0;
}

.quick-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background-color: #fcfcfc; /* Very light background for cards */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
    border: 1px solid #eee; /* Subtle border */
}

.quick-nav-card:hover {
    transform: translateY(-8px); /* Lift card on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    background-color: #eaf6ff; /* Light blue background on hover */
}

.quick-nav-card i {
    color: #3498db; /* Icon color */
    margin-bottom: 20px;
    font-size: 3.5em; /* Larger icons */
    transition: color 0.3s ease;
}

.quick-nav-card:hover i {
    color: #2980b9; /* Slightly darker blue on hover */
}

.quick-nav-card h3 {
    font-size: 1.6em;
    color: #2c3e50; /* Dark text for headings */
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
}

.quick-nav-card p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0; /* Remove extra margin at bottom of paragraph */
}

/* Responsive adjustments for academics page */
@media (max-width: 768px) {
    .quick-nav-cards-container {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
    }
    .quick-nav-card {
        padding: 25px;
    }
    .quick-nav-card h3 {
        font-size: 1.4em;
    }
    .quick-nav-card i {
        font-size: 3em;
    }
}

@media (max-width: 480px) {
    .quick-nav-card {
        padding: 20px;
    }
    .quick-nav-card h3 {
        font-size: 1.3em;
    }
    .quick-nav-card p {
        font-size: 0.95em;
    }
}
/* --- Academic Performance History Specific Styles --- */

/* General Section Headings within content-section */
.content-section h3 {
    font-size: 1.8em;
    color: #2c3e50;
    margin-top: 35px; /* Add some space above sub-headings */
    margin-bottom: 25px;
    text-align: center; /* Ensure subheadings are centered */
    position: relative;
    padding-bottom: 10px;
}

.content-section h3::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px; /* Short underline for emphasis */
    height: 3px;
    background-color: #3498db; /* Blue underline */
    border-radius: 2px;
}

/* Table Styling for KCSE Results */
.academic-table-container {
    overflow-x: auto; /* Ensures horizontal scrolling for tables on small screens */
    margin-top: 30px;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.academic-table-container table {
    width: 100%;
    border-collapse: collapse; /* Remove double borders */
    min-width: 600px; /* Ensure table doesn't get too narrow before scrolling */
}

.academic-table-container th,
.academic-table-container td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.academic-table-container thead th {
    background-color: #3498db;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

.academic-table-container tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}

.academic-table-container tbody tr:hover {
    background-color: #f1f1f1; /* Hover effect for rows */
}

/* Chart Container Grid */
.chart-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns, flexible sizing */
    gap: 30px; /* Space between charts */
    margin-top: 30px;
    margin-bottom: 40px;
}

.chart-box {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center chart and caption */
    justify-content: center;
}

.chart-box canvas {
    max-width: 100%; /* Ensure canvas scales down */
    height: auto; /* Maintain aspect ratio */
}

.chart-caption {
    margin-top: 15px;
    font-size: 0.95em;
    color: #666;
    text-align: center;
    line-height: 1.4;
}

/* Achievements Grid */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Flexible columns for achievements */
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.achievement-card {
    background-color: #fcfcfc; /* Light background for achievement cards */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: left; /* Align text within cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.achievement-card h4 {
    font-size: 1.4em;
    color: #3498db;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
}

.achievement-card p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive Adjustments for Academic History Page */
@media (max-width: 992px) {
    .academic-table-container table {
        min-width: 0; /* Allow table to shrink more before scrolling starts to activate */
    }
}

@media (max-width: 768px) {
    .content-section h3 {
        font-size: 1.6em;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .content-section h3::after {
        width: 50px;
        height: 2px;
    }
    .academic-table-container th,
    .academic-table-container td {
        padding: 10px;
        font-size: 0.9em;
    }
    .chart-container-grid,
    .achievements-grid {
        grid-template-columns: 1fr; /* Stack charts and achievement cards vertically */
    }
    .chart-box,
    .achievement-card {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .academic-table-container th,
    .academic-table-container td {
        font-size: 0.85em;
        padding: 8px;
    }
    .chart-caption {
        font-size: 0.85em;
    }
    .achievement-card h4 {
        font-size: 1.3em;
    }
    .achievement-card p {
        font-size: 0.9em;
    }
}
/* --- Departments & Programs Specific Styles --- */

/* Departments Grid */
.departments-grid {
    display: grid;
    /* Responsive grid: 3 columns on large, 2 on medium, 1 on small */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Space between department cards */
    margin-top: 30px;
    margin-bottom: 50px; /* Space before next section */
}

.department-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Text alignment within cards */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column;
}

.department-card:hover {
    transform: translateY(-8px); /* Lift card on hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
}

.department-card h4 {
    font-size: 1.8em;
    color: #3498db; /* Blue heading for departments */
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding-bottom: 8px; /* Space for pseudo-element underline */
}

.department-card h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px; /* Short underline under department name */
    height: 2px;
    background-color: #f39c12; /* Accent color for underline */
    border-radius: 1px;
}

.department-card p {
    font-size: 1em;
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
    flex-grow: 1; /* Allows paragraphs to take available space for equal height cards */
}

/* Academic Programs List Styling */
.academic-programs-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 800px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
}

.academic-programs-list li {
    background-color: #f8fcfd; /* Light background for list items */
    padding: 20px 25px;
    margin-bottom: 15px; /* Space between list items */
    border-left: 5px solid #3498db; /* Blue left border for emphasis */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: 1.05em;
    color: #333;
    line-height: 1.6;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.academic-programs-list li:hover {
    background-color: #eaf6ff; /* Lighter blue on hover */
    border-left-color: #2980b9; /* Darker blue on hover */
}

.academic-programs-list li strong {
    color: #2c3e50; /* Darker color for strong text */
}


/* Responsive Adjustments for Departments Page */
@media (max-width: 992px) {
    .departments-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust min-width for cards */
    }
    .department-card {
        padding: 25px;
    }
    .department-card h4 {
        font-size: 1.6em;
    }
    .academic-programs-list li {
        padding: 18px 20px;
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .departments-grid {
        grid-template-columns: 1fr; /* Stack departments vertically on smaller screens */
    }
    .department-card {
        padding: 20px;
    }
    .department-card h4 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    .department-card h4::after {
        width: 30px; /* Shorter underline */
    }
    .department-card p {
        font-size: 0.95em;
    }
    .academic-programs-list li {
        padding: 15px 18px;
        font-size: 0.95em;
    }
}

@media (max-width: 576px) {
    .departments-grid {
        gap: 20px; /* Reduce gap on very small screens */
    }
    .department-card {
        padding: 15px;
    }
    .department-card h4 {
        font-size: 1.3em;
    }
    .academic-programs-list li {
        padding: 12px 15px;
        font-size: 0.9em;
    }
}
/* --- Admissions Specific Styles --- */

/* General content section styling for Admissions (reusing .box) */
.content-section.box {
    background-color: #ffffff;
    padding: 35px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px; /* Space between sections */
    max-width: 900px; /* Keep content readable */
    margin-left: auto;
    margin-right: auto;
}

.content-section h2 {
    font-size: 2.2em;
    color: #3498db;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding-bottom: 10px;
}

.content-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Standard underline for H2s */
    height: 3px;
    background-color: #f39c12;
    border-radius: 1.5px;
}

.content-section p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

/* Custom List Styling (for ULs) */
.custom-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin-bottom: 25px;
}

.custom-list li {
    position: relative;
    padding-left: 30px; /* Space for custom icon */
    margin-bottom: 12px;
    font-size: 1.05em;
    line-height: 1.6;
    color: #333;
}

.custom-list li::before {
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is used */
    font-weight: 900; /* For solid icons */
    content: "\f00c"; /* Checkmark icon */
    color: #27ae60; /* Green color for checkmark */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9em;
}

.nested-list {
    list-style: none;
    padding-left: 20px; /* Indent nested list */
    margin-top: 10px;
    margin-bottom: 0;
}

.nested-list li {
    padding-left: 25px; /* Space for nested custom icon */
    margin-bottom: 8px;
    font-size: 1em;
    color: #555;
}

.nested-list li::before {
    content: "\f111"; /* Small circle icon for nested list */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #3498db; /* Blue color */
    font-size: 0.7em;
    position: absolute;
    left: 0;
    top: 0.4em; /* Adjust vertical alignment */
}

/* Custom Ordered List Styling (for OLs) */
.custom-ordered-list {
    list-style: none; /* Remove default numbering */
    padding: 0;
    counter-reset: admissions-step; /* Initialize counter */
    margin-bottom: 25px;
}

.custom-ordered-list li {
    position: relative;
    padding-left: 45px; /* Space for custom step number */
    margin-bottom: 20px;
    font-size: 1.05em;
    line-height: 1.6;
    color: #333;
    background-color: #f8fcfd; /* Light background for list items */
    padding: 15px 20px 15px 45px; /* Adjusted padding after adding counter */
    border-left: 5px solid #f39c12; /* Accent border */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-ordered-list li::before {
    counter-increment: admissions-step; /* Increment counter */
    content: counter(admissions-step); /* Display counter */
    position: absolute;
    left: 10px; /* Position the number */
    top: 50%;
    transform: translateY(-50%);
    background-color: #3498db; /* Blue background for number */
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
}

.custom-ordered-list li strong {
    color: #2c3e50;
}

.inline-link {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.inline-link:hover {
    color: #f39c12;
    text-decoration: underline;
}

/* Important Dates List specific style (minor adjustments) */
.dates-list li strong {
    color: #2c3e50; /* Ensure strong dates stand out */
}

/* Table Styling for Fees Structure */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling for tables on small screens */
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

table {
    width: 100%;
    border-collapse: collapse; /* Removes space between table borders */
    min-width: 600px; /* Ensure table doesn't get too narrow on small screens */
}

table th,
table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}

table th {
    background-color: #f2f2f2; /* Light grey background for header */
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95em;
    letter-spacing: 0.5px;
}

table tbody tr:nth-child(odd) {
    background-color: #fdfdfd; /* Slightly different background for odd rows */
}

table tbody tr:hover {
    background-color: #f0f8ff; /* Light blue on row hover */
}

table td {
    color: #555;
}

/* Note info paragraph */
.note-info {
    background-color: #ecf8ff; /* Light blue background */
    border-left: 5px solid #3498db; /* Blue left border */
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 0.95em;
    color: #2c3e50;
    margin-top: 30px;
    line-height: 1.6;
}


/* Responsive Adjustments for Admissions Page */
@media (max-width: 992px) {
    .content-section.box {
        padding: 30px 25px;
    }
    .content-section h2 {
        font-size: 2em;
        margin-bottom: 20px;
    }
    .custom-list li,
    .custom-ordered-list li {
        font-size: 1em;
    }
    table th,
    table td {
        padding: 12px 15px;
        font-size: 0.95em;
    }
    .note-info {
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .content-section.box {
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    .content-section h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .content-section h2::after {
        width: 50px;
        height: 2px;
    }
    .custom-list li {
        padding-left: 25px;
        font-size: 0.95em;
    }
    .custom-ordered-list li {
        padding-left: 40px;
        font-size: 0.95em;
        margin-bottom: 15px;
    }
    .custom-ordered-list li::before {
        width: 25px;
        height: 25px;
        font-size: 0.8em;
    }
    table {
        min-width: 100%; /* Allow table to shrink closer to screen width */
    }
}

@media (max-width: 576px) {
    .content-section.box {
        padding: 20px 15px;
        margin-bottom: 25px;
    }
    .content-section h2 {
        font-size: 1.6em;
    }
    .custom-list li,
    .nested-list li,
    .custom-ordered-list li,
    .content-section p {
        font-size: 0.9em;
        line-height: 1.5;
    }
    table th,
    table td {
        padding: 10px 12px;
        font-size: 0.85em;
    }
}
/* --- Staff Page Specific Styles --- */

/* General content section styling (inherits from .box, refined for staff page) */
#staff-introduction.content-section,
.teaching-staff.content-section,
.non-teaching-staff.content-section {
    padding: 35px 30px;
    margin-bottom: 40px;
    /* Other .box styles (background, border-radius, shadow) are applied via .box */
}

.teaching-staff h2,
.non-teaching-staff h2 {
    font-size: 2.2em;
    color: #3498db;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding-bottom: 10px;
}

.teaching-staff h2::after,
.non-teaching-staff h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Standard underline for H2s */
    height: 3px;
    background-color: #f39c12;
    border-radius: 1.5px;
}

/* Staff Grid Layout */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
    gap: 30px; /* Space between staff cards */
    margin-top: 30px;
}

/* Staff Card Styling */
.staff-card {
    background-color: #fcfcfc;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Ensures image corners are rounded with parent */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack image and info vertically */
    height: 100%; /* Ensure cards are same height in grid */
}

.staff-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.staff-card img {
    width: 100%; /* Image takes full width of card */
    height: 200px; /* Fixed height for consistent image size */
    object-fit: cover; /* Covers the area, cropping if necessary */
    border-top-left-radius: 10px; /* Match card border radius */
    border-top-right-radius: 10px; /* Match card border radius */
    filter: grayscale(20%); /* Slightly desaturate images */
    transition: filter 0.3s ease;
}

.staff-card:hover img {
    filter: grayscale(0%); /* Full color on hover */
}

.staff-info {
    padding: 20px;
    flex-grow: 1; /* Allows info section to expand */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes bio to bottom if space allows */
}

.staff-card h3 {
    font-size: 1.6em;
    color: #34495e; /* Darker blue for name */
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
}

.staff-card .role {
    font-size: 1.1em;
    color: #3498db; /* Blue for role */
    font-weight: 600;
    margin-bottom: 15px;
}

.staff-card .staff-bio {
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0; /* Remove default paragraph margin */
    /* text-align: left; /* If you want bios left-aligned in card */
}


/* Responsive Adjustments for Staff Page */
@media (max-width: 992px) {
    .staff-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .staff-card img {
        height: 180px;
    }
    .staff-info {
        padding: 18px;
    }
    .staff-card h3 {
        font-size: 1.5em;
    }
    .staff-card .role {
        font-size: 1em;
    }
    .staff-card .staff-bio {
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .staff-grid {
        grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
        gap: 20px;
    }
    .staff-card {
        flex-direction: row; /* Layout as row for narrow screens */
        text-align: left;
    }
    .staff-card img {
        width: 120px; /* Smaller fixed width for image in row layout */
        height: 120px; /* Fixed height */
        border-radius: 50%; /* Make image circular */
        margin: 20px;
        flex-shrink: 0; /* Prevent image from shrinking */
    }
    .staff-info {
        padding: 20px 0; /* Adjust padding for row layout */
    }
    .staff-card h3 {
        font-size: 1.4em;
    }
    .staff-card .role {
        font-size: 0.95em;
        margin-bottom: 10px;
    }
    .staff-card .staff-bio {
        font-size: 0.85em;
    }
}

@media (max-width: 576px) {
    .staff-card {
        flex-direction: column; /* Stack again on very small screens if desired, or keep row */
        text-align: center;
    }
    .staff-card img {
        width: 150px; /* Slightly larger image for single column */
        height: 150px;
        margin: 15px auto 10px auto; /* Center image */
        border-radius: 50%;
    }
    .staff-info {
        padding: 15px;
    }
    .staff-card h3 {
        font-size: 1.3em;
    }
    .staff-card .role {
        font-size: 0.9em;
    }
    .staff-card .staff-bio {
        font-size: 0.8em;
    }
}
/* --- Staff Page Specific Styles (for Group Photos) --- */

/* General content section styling (inherits from .box, refined for staff page) */
#staff-introduction.content-section,
.teaching-staff.content-section,
.non-teaching-staff.content-section {
    padding: 35px 30px;
    margin-bottom: 40px;
    /* Other .box styles (background, border-radius, shadow) are applied via .box */
}

.teaching-staff h2,
.non-teaching-staff h2 {
    font-size: 2.2em;
    color: #3498db;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding-bottom: 10px;
}

.teaching-staff h2::after,
.non-teaching-staff h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Standard underline for H2s */
    height: 3px;
    background-color: #f39c12;
    border-radius: 1.5px;
}

/* Staff Group Photo Container */
.staff-group-photo-container {
    display: flex; /* Use flexbox to arrange multiple photos if present */
    flex-wrap: wrap; /* Allow photos to wrap to next line */
    gap: 20px; /* Space between photos */
    justify-content: center; /* Center photos horizontally */
    margin-top: 30px;
}

.staff-group-photo-container img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
    border-radius: 8px; /* Slightly rounded corners for photos */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover; /* Cover container if aspect ratio differs */
    /* You can set a max-height or fixed height if you want all photos to be exactly the same size visually,
       but 'height: auto; max-width: 100%;' is generally best for responsiveness.
       If you want specific sizing, e.g., for two side-by-side photos:
       flex: 1 1 calc(50% - 10px); /* Two photos per row minus gap */
       max-width: calc(50% - 10px); /* Specific max-width for two-column */
    */
}

.staff-group-photo-container img:hover {
    transform: scale(1.02); /* Slight zoom on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Responsive Adjustments for Staff Page */
@media (max-width: 992px) {
    .staff-group-photo-container {
        gap: 15px;
    }
    .staff-group-photo-container img {
        /* If you had specific calc() widths, adjust them here */
    }
}

@media (max-width: 768px) {
    .staff-group-photo-container {
        flex-direction: column; /* Stack photos vertically on smaller screens */
        align-items: center; /* Center stacked photos */
        gap: 20px;
    }
    .staff-group-photo-container img {
        max-width: 90%; /* Give some padding on very small screens */
    }
    .teaching-staff h2,
    .non-teaching-staff h2 {
        font-size: 1.8em;
    }
    .teaching-staff h2::after,
    .non-teaching-staff h2::after {
        width: 50px;
    }
}

@media (max-width: 576px) {
    .staff-group-photo-container img {
        max-width: 100%; /* Full width within container */
    }
}
/* --- Core Responsive Base Styles (Add these to the very top if not already present) --- */
/*
If these are already in your style.css and are effective, you can skip them.
However, it's good practice to ensure they are present early in your CSS.
*/
* {
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

.container {
    padding: 0 20px; /* Ensures content has horizontal padding on all screens, especially small ones */
}

img {
    max-width: 100%; /* Makes all images responsive, preventing overflow */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Helps remove extra space below images */
}

/* --- Responsive Adjustments (Add these to the END of your style.css) --- */

/* Header & Navigation Adjustments for Mobile */
/* Hamburger Menu (visible only on smaller screens) */
.hamburger-menu {
    display: none; /* Hidden by default, shown in media queries */
    font-size: 1.8em;
    color: var(--text-color-dark); /* Or your preferred dark color */
    cursor: pointer;
    padding: 5px;
    z-index: 1001; /* Ensure it's above other content */
}

/* Mobile Navigation Menu */
#main-nav {
    /* Existing desktop styles will apply by default */
}

/* Class added by JS when navigation is open, prevents body scrolling */
body.nav-open {
    overflow: hidden;
}

/* For screens smaller than 992px (e.g., tablets in landscape) */
@media (max-width: 992px) {
    .container {
        padding: 0 15px; /* Slightly less padding to use space better */
    }

    .logo h1 {
        font-size: 1.6em; /* Adjust logo text size */
    }

    /* Adjust main navigation spacing */
    #main-nav {
        gap: 20px;
    }
    #main-nav a {
        padding: 8px 0;
    }

    /* General heading size adjustments */
    h1 {
        font-size: 2.5em;
        margin: 30px 0;
    }
    h2 {
        font-size: 2em;
    }

    /* Hero section text adjustments */
    .hero-content h1 {
        font-size: 3em;
    }
    .hero-content p {
        font-size: 1.1em;
    }

    /* Content section padding */
    .content-section {
        padding: 25px;
    }

    /* Departments grid adjustments */
    .department-card img {
        height: 160px; /* Smaller height for department images */
    }
    .department-info h3 {
        font-size: 1.4em;
    }
    .department-info p {
        font-size: 0.9em;
    }

    /* Staff group photo spacing */
    .staff-group-photo-container {
        gap: 15px;
    }
    .staff-group-photo-container img {
        min-width: 250px; /* Adjust min-width for images */
    }
}

/* For screens smaller than 768px (e.g., tablets in portrait, small laptops) */
@media (max-width: 768px) {
    /* Header layout for mobile */
    header nav.container {
        flex-direction: row; /* Keep logo and hamburger on one line */
        justify-content: space-between;
        align-items: center;
        padding: 0 15px; /* Ensure padding for header container */
    }

    .logo {
        flex: 1; /* Allow logo to take up available space */
        justify-content: flex-start;
    }
    .logo h1 {
        font-size: 1.5em;
    }

    /* Main Navigation (mobile specific) */
    #main-nav {
        display: none; /* Hide main nav by default */
        flex-direction: column; /* Stack items vertically */
        width: 100%;
        position: absolute;
        top: 80px; /* Position below header */
        left: 0;
        background-color: #fff; /* Ensure a background for the menu */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
        z-index: 999; /* Ensure it's above other content */
        max-height: calc(100vh - 80px); /* Limit height to viewport height minus header */
        overflow-y: auto; /* Allow scrolling for long menus */
        border-top: 1px solid #eee; /* Visual separation from header */
    }

    #main-nav.active {
        display: flex; /* Show nav when 'active' class is added by JS */
    }

    #main-nav li {
        width: 100%; /* Full width for list items */
    }
    #main-nav a {
        padding: 12px 20px; /* More clickable area */
        border-bottom: 1px solid #eee; /* Separator for menu items */
    }
    #main-nav li:last-child a {
        border-bottom: none; /* No border for the last item */
    }

    /* Adjust dropdowns for mobile (toggled by JS) */
    .dropdown-menu {
        position: static; /* Remove absolute positioning */
        box-shadow: none; /* Remove shadow */
        padding: 0 0 0 20px; /* Indent sub-items */
        background-color: transparent; /* No background */
        min-width: unset; /* Remove fixed min-width */
        opacity: 1; /* Always visible opacity-wise */
        visibility: visible; /* Always visible visibility-wise */
        transform: translateY(0); /* Remove transform */
        display: none; /* Hidden by default, toggled by JS */
    }

    #main-nav li.has-dropdown > a {
        cursor: pointer; /* Indicate it's clickable */
    }
    /* This class is added by JS to open the dropdown on mobile */
    #main-nav li.has-dropdown.open > .dropdown-menu {
        display: block; /* Show on click when 'open' class is present */
    }

    .sub-dropdown-menu {
        left: unset; /* Reset positioning */
        top: unset; /* Reset positioning */
    }
    .has-dropdown .dropdown-caret {
        transition: transform 0.3s ease; /* Ensure smooth rotation */
    }
    .has-dropdown.open > a .dropdown-arrow {
        transform: rotate(180deg); /* Rotate arrow when dropdown is open */
    }


    /* Show hamburger icon */
    .hamburger-menu {
        display: block;
    }

    /* General heading sizes for smaller screens */
    h1 {
        font-size: 2em;
        margin: 25px 0;
    }
    h2 {
        font-size: 1.8em;
    }

    /* Hero section text adjustments */
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-content p {
        font-size: 1em;
    }

    /* Grid layouts stack vertically */
    .profile-grid,
    .departments-grid,
    .admissions-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 25px;
    }

    /* Staff group photos stack and center */
    .staff-group-photo-container {
        flex-direction: column; /* Stack photos vertically */
        align-items: center; /* Center stacked photos */
        gap: 20px;
    }
    .staff-group-photo-container img {
        max-width: 90%; /* Give some horizontal padding on very small screens */
        min-width: unset; /* Remove min-width to allow shrinking */
    }

    /* Footer layout stacks vertically and centers text */
    .footer-content {
        flex-direction: column; /* Stack footer columns */
        align-items: center;
        text-align: center;
    }
    .footer-column {
        min-width: unset; /* Remove min-width */
        width: 100%;
        max-width: 350px; /* Limit overall width of stacked columns */
    }
    .footer-column .social-icons {
        justify-content: center; /* Center social icons */
        display: flex;
    }
}

/* For screens smaller than 576px (e.g., large phones) */
@media (max-width: 576px) {
    .logo img {
        height: 40px; /* Even smaller logo image */
    }
    .logo h1 {
        font-size: 1.3em; /* Further reduce logo text size */
    }

    h1 {
        font-size: 1.8em;
        margin: 20px 0;
    }
    h2 {
        font-size: 1.6em;
    }

    .hero-content h1 {
        font-size: 2em;
    }
    .hero-content p {
        font-size: 0.9em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .content-section {
        padding: 20px; /* Reduce content section padding */
    }

    .footer-column h3 {
        font-size: 1.2em; /* Smaller footer headings */
    }
}

/* For very small screens / older phones */
@media (max-width: 480px) {
    .container {
        padding: 0 10px; /* Minimum horizontal padding */
    }
    .logo h1 {
        font-size: 1.2em;
    }
    h1 {
        font-size: 1.6em;
    }
    h2 {
        font-size: 1.4em;
    }
    .hero-content h1 {
        font-size: 1.8em;
    }
}
/* --- Further Responsive Adjustments for VERY Small Screens (Add to the end of style.css) --- */

/* Specific adjustments for screens 375px and below (common phone width) */
@media (max-width: 375px) {
    .logo h1 {
        font-size: 1.1em; /* Make school name even smaller */
        flex-shrink: 1; /* Allow it to shrink if needed */
        min-width: 0; /* Allow it to be very small */
    }

    .logo img {
        height: 35px; /* Slightly smaller logo image */
    }

    /* Ensure header content is spaced out and contained */
    header nav.container {
        padding: 0 10px; /* Reduce header padding slightly */
    }

    h1 {
        font-size: 1.5em; /* Main page title smaller */
        margin: 15px 0;
    }
    h2 {
        font-size: 1.3em; /* Section titles smaller */
    }

    .hero-content h1 {
        font-size: 1.6em; /* Hero title smaller */
    }
    .hero-content p {
        font-size: 0.85em; /* Hero description smaller */
    }

    .btn {
        padding: 8px 15px; /* Smaller buttons */
        font-size: 0.85em;
    }

    .content-section {
        padding: 15px; /* More reduced content section padding */
    }

    /* Ensure general body doesn't cause horizontal scroll */
    body {
        overflow-x: hidden;
    }
    html {
        overflow-x: hidden;
    }
}

/* Fallback for extremely small devices (e.g., old feature phones or specific viewports) */
@media (max-width: 320px) {
    .logo h1 {
        font-size: 1em; /* Minimal font size for logo */
    }
    .logo img {
        height: 30px; /* Smallest logo image */
    }
    .hamburger-menu {
        font-size: 1.6em; /* Adjust hamburger size if needed */
    }

    h1 {
        font-size: 1.4em;
    }
    h2 {
        font-size: 1.2em;
    }

    .hero-content h1 {
        font-size: 1.5em;
    }
    .hero-content p {
        font-size: 0.8em;
    }

    .content-section {
        padding: 10px; /* Very tight padding for content sections */
    }
}
/* --- Optimized Responsive Adjustments (Append this to the END of your style.css) --- */

/* Base Responsive Properties (Ensure these are present at the top of your style.css if not already) */
/*
*, *::before, *::after {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.container {
    padding: 0 15px; // Default side padding for all screens, adjust as needed
}
*/
html, body {
    overflow-x: hidden; /* Prevents horizontal scrollbar for entire page */
}

/* Tablet & Mobile Layout (max-width 768px) */
@media (max-width: 768px) {
    /* Header: Logo and Hamburger on one line, adjusted sizes */
    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px; /* Ensure header has padding */
        min-height: 70px; /* Ensure sufficient header height */
    }

    .logo {
        display: flex;
        align-items: center;
        flex-grow: 1; /* Allow logo area to expand */
        min-width: 0; /* Allow shrinking */
    }

    .logo img {
        height: 45px; /* Slightly smaller logo */
        margin-right: 10px;
        flex-shrink: 0;
    }

    .logo h1 {
        font-size: 1.4em; /* Adjust logo text size */
        white-space: normal; /* Allow school name to wrap */
        line-height: 1.3;
        word-break: break-word; /* Ensure long words break */
        flex-shrink: 1; /* Allow text to shrink */
    }

    .hamburger-menu {
        display: block; /* Show hamburger icon */
        position: static; /* Remove absolute positioning */
        font-size: 2.2em; /* Larger for touch */
        margin-left: 15px; /* Space from logo */
        flex-shrink: 0;
    }

    /* Mobile Nav Menu (toggled by JS) */
    #main-nav {
        display: none; /* Hidden by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px; /* Position below header */
        left: 0;
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        /* Inherit background/shadow from your existing #main-nav styles */
    }

    #main-nav.active {
        display: flex; /* Show when JS adds 'active' class */
    }

    #main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1); /* Separator */
    }
    #main-nav li:last-child { border-bottom: none; }
    #main-nav li a {
        padding: 15px 25px; /* Larger clickable area */
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile Dropdown Menu adjustments */
    #main-nav .dropdown-menu {
        position: static; /* No absolute positioning */
        box-shadow: none;
        padding: 0 0 0 20px; /* Indent sub-items */
        opacity: 1; visibility: visible; transform: translateY(0); /* Always visible properties */
        display: none; /* Toggled by JS */
    }
    #main-nav li.has-dropdown.open > .dropdown-menu {
        display: block; /* Show when JS adds 'open' class */
    }
    #main-nav .dropdown-menu li a {
        padding-left: 50px; /* Further indent */
    }
    #main-nav .sub-dropdown-menu a {
        padding-left: 70px; /* Even further indent */
    }
    .dropdown-arrow, .dropdown-caret {
        display: none; /* Hide arrows for mobile menu */
    }

    /* Content Area: Fix min-width causing overflow, stack grids/flex items */
    .mission-vision, .about-history, .charter-version, .chart-box {
        min-width: unset; /* IMPORTANT: Allow these elements to shrink */
        width: 100%; /* Take full available width */
    }
    .person-card {
        min-width: unset;
        width: 100%; /* Allows cards to take full width within their grid column */
        max-width: 180px; /* Keep reasonable size, prevents them from becoming too wide */
        margin: 0 auto; /* Center individual cards */
    }

    .features-grid, .departments-grid, .achievements-grid, .life-aspects-grid, .clubs-grid, .sports-grid, .news-grid, .gallery-grid {
        grid-template-columns: 1fr; /* Stack columns into a single column */
        gap: 20px; /* Standardize gap */
    }
    .person-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Allow multiple person cards per row if space permits */
        gap: 15px;
    }
    .chart-container-grid {
        flex-direction: column; /* Stack charts vertically */
        align-items: center; /* Center them */
        gap: 20px;
    }

    /* Footer: Stack columns */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .footer-column {
        min-width: unset;
        width: 100%;
        max-width: 300px; /* Limit stacked width */
    }
    .social-icons {
        justify-content: center; /* Center social icons */
    }

    /* General Font Size Adjustments */
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.1em; }

    .hero-content-slide h2 { font-size: 1.8em; }
    .hero-content-slide p { font-size: 1em; }
}

/* Smaller Mobile Devices (max-width 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px; /* Slightly tighter padding */
    }
    header nav {
        padding: 0 10px;
    }
    .logo img {
        height: 40px; /* Smaller logo */
    }
    .logo h1 {
        font-size: 1.2em; /* Further reduce logo text size */
    }
    .hamburger-menu {
        font-size: 2em;
    }

    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }

    .hero-content-slide h2 { font-size: 1.6em; }
    .hero-content-slide p { font-size: 0.85em; }
    .hero-content-slide .btn { padding: 10px 20px; font-size: 0.8em; }

    /* Nav menu item padding for very small screens */
    #main-nav li a { padding: 12px 15px; }
    #main-nav .dropdown-menu a { padding-left: 35px; }
    #main-nav .sub-dropdown-menu a { padding-left: 55px; }
}

/* Very Smallest Mobile Devices (max-width 320px) */
@media (max-width: 320px) {
    .container {
        padding: 0 5px; /* Minimal padding for tiny screens */
    }
    header nav {
        padding: 0 5px;
    }
    .logo img {
        height: 35px; /* Smallest logo */
    }
    .logo h1 {
        font-size: 1.1em; /* Minimal logo text size */
    }
    .hamburger-menu {
        font-size: 1.8em;
    }

    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1em; }

    .hero-content-slide h2 { font-size: 1.4em; }
    .hero-content-slide p { font-size: 0.75em; }

    #main-nav li a { padding: 10px 10px; }
    #main-nav .dropdown-menu a { padding-left: 30px; }
    #main-nav .sub-dropdown-menu a { padding-left: 50px; }
}
/* --- START OF SCHOOL MISSION TEXT FIX FOR ABOUT.HTML --- */
/* Override specific color for the School Mission paragraph */
.principle-item.mission-bg p {
    color: #333333 !important; /* Dark grey, good contrast */
    /* Optional: If font size or line height also need adjustment */
    /* font-size: 16px; */
    /* line-height: 1.6; */
}

/* Ensure the header text within the mission block is also dark */
.principle-item.mission-bg h3 {
    color: #333333 !important; /* Ensure header is also dark if needed */
}
/* --- END OF SCHOOL MISSION TEXT FIX FOR ABOUT.HTML --- */
/* --- School at a Glance Section Styles --- */
.school-at-glance {
    padding: 30px;
    background-color: var(--secondray-color); /* Use your primary color for the background */
    color: var(--light-text-color); /* White text for contrast */
    text-align: center;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px; /* Space below this section */
}

.school-at-glance h3 {
    color: var(--primary-color); /* Ensure heading is white */
    margin-bottom: 30px;
    font-size: 2em; /* Larger heading */
}

.glance-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 20px;
    justify-content: center;
}

.stat-item {
    background-color: rgba(4, 236, 109, 0.993); /* Slightly transparent white for items */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px; /* Ensure consistent height */
}

.stat-number {
    font-size: 3.5em; /* Large numbers */
    font-weight: 700;
    color: var(--accent-color); /* Use your accent color for the numbers */
    margin-bottom: 5px;
    line-height: 1; /* Remove extra space */
    display: block; /* Ensure it takes full width for centering */
}

.stat-item p {
    font-size: 1.1em;
    margin: 0;
    color: var(--light-text-color); /* Text description also white */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .school-at-glance h3 {
        font-size: 1.8em;
    }
    .stat-number {
        font-size: 2.8em;
    }
    .stat-item p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .glance-stats-grid {
        grid-template-columns: 1fr; /* Stack items on very small screens */
    }
    .stat-number {
        font-size: 2.5em;
    }
}

/* Ensure the existing history-achievements-grid still works after removing one column */
.history-achievements-grid {
    display: grid;
    grid-template-columns: 1fr; /* Now only one column */
    gap: 30px;
    align-items: start;
}
/* If you want to keep it two columns and have the achievements wider, use: */
/*
.history-achievements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
    align-items: start;
}
*/
/* --- Styles for your social media icons to match Mitua Girls --- */

/* Target the links within the .social-icons container */
.social-icons a {
    color: white; /* Makes the icon color white */
    font-size: 24px; /* Adjust the size of the icons (Mitua's look around this size) */
    margin-right: 15px; /* Adds space between icons */
    text-decoration: none; /* Removes any underline if present */

    /* Crucial: Remove any existing background, border, or padding that creates the square look */
    background-color: transparent; /* Ensures no background color */
    border: none; /* Removes any border */
    padding: 0; /* Removes any padding around the icon */
    display: inline-block; /* Ensures they sit side-by-side and respects margin */
    width: auto; /* Removes fixed width if any */
    height: auto; /* Removes fixed height if any */
    line-height: normal; /* Resets line-height if it was affecting vertical alignment */
}

/* Remove margin from the very last icon to prevent extra space at the end */
.social-icons a:last-child {
    margin-right: 0;
}

/* Optional: Add a subtle hover effect if desired */
.social-icons a:hover {
    opacity: 0.8; /* Makes the icon slightly transparent on hover */
    /* You could also add a 'transform: scale(1.1);' for a slight grow effect */
}

/* You generally don't need to target the <i> tag directly for color/size if the parent <a> handles it.
   However, if you find issues, you might need to ensure the <i> tag inherits correctly or set styles on it: */
.social-icons a i {
    /* Ensure the icon itself is not overridden by other styles */
    display: inline-block;
}
/* --- CSS for your social media icons (sizing and spacing) --- */

/* Target the image tags directly within the .social-icons container */
.social-icons img {
    width: 48px; /* Set a specific width for the icons */
    height: 48px; /* Set a specific height, typically same as width for square icons */
    margin-right: 15px; /* Adds horizontal space between icons */

    /* Ensure no unwanted borders or padding are applied that might make them larger */
    border: none;
    padding: 0;
    vertical-align: middle; /* Helps align images centrally */
}

/* Ensure the parent anchor tag (<a>) doesn't add unwanted backgrounds, borders, or padding */
.social-icons a {
    display: inline-block; /* Essential to make them sit side-by-side */
    text-decoration: none; /* Removes any underline from the link */
    background: none; /* Remove any background color */
    border: none; /* Remove any border */
    padding: 0; /* Remove any padding */
}

/* Remove margin from the very last icon to prevent extra space at the end */
.social-icons a:last-child img {
    margin-right: 0;
}

/* Optional: Add a subtle hover effect (recommended for better user experience) */
.social-icons a:hover img {
    opacity: 0.9; /* Slightly transparent on hover */
    transform: translateY(-2px); /* Makes the icon lift up slightly */
    transition: all 0.2s ease-in-out; /* Smooth transition */
}
/* CSS for the Teaching Staff Section Layout */

.staff-content-wrapper {
    display: flex; /* Enables flexbox for side-by-side layout */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    align-items: flex-start; /* Aligns items to the top if they have different heights */
    gap: 30px; /* Adds space between the photo and the text */
}

.staff-photo-column {
    flex: 1 1 300px; /* Allows the column to grow/shrink, with a base width of 300px */
    min-width: 250px; /* Ensures the photo doesn't get too small on tiny screens */
}

.staff-photo-column img {
    max-width: 100%; /* Ensures the image is responsive and fits its container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes any extra space below the image */
    border-radius: 8px; /* Matches your other box elements */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow */
}

.staff-text-column {
    flex: 2 1 400px; /* Allows the text column to take up more space, with a base width of 400px */
    /* You can adjust the flex values (e.g., flex: 1 1 50%;) to control proportions */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .staff-content-wrapper {
        flex-direction: column; /* Stacks the photo and text vertically on small screens */
        align-items: center; /* Centers items when stacked */
    }

    .staff-photo-column,
    .staff-text-column {
        flex: none; /* Reset flex to prevent unwanted behavior */
        width: 100%; /* Make them take full width when stacked */
        text-align: center; /* Center text if needed */
    }

    .staff-photo-column img {
        max-width: 80%; /* Make photo slightly smaller when stacked to look better */
    }
}
/* --- Header Styles --- */
.main-header {
    background-color: #8B4513; /* Brownish orange from your image */
    color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center; /* Center the wrapper content */
    align-items: center;
    position: sticky; /* Makes header stick to top */
    top: 0;
    z-index: 1000; /* Ensures header is above other content */
}

.header-content-wrapper {
    display: flex;
    justify-content: space-between; /* Puts logo/title on left, nav on right */
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Limit header width on very large screens */
}

.logo-title-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between logo and text */
    flex-shrink: 1; /* Allows this container to shrink if space is tight */
}

.header-logo {
    height: 50px; /* Adjust as needed */
    width: auto;
}

.school-name {
    font-size: 1.8em; /* Base size */
    font-weight: bold;
    white-space: nowrap; /* Keep on one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Add "..." if text overflows */
    /* Accounts for logo size (e.g., 50px) + gap (15px) */
    max-width: calc(100% - 75px); /* Adjust 75px based on your actual logo+gap size */
}

/* --- Main Navigation Styles --- */
.main-nav {
    display: flex;
    align-items: center;
}

.main-nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Makes nav items horizontal on large screens */
}

.main-nav .nav-links li {
    margin-left: 25px; /* Space between menu items */
}

.main-nav .nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.3s ease;
    text-transform: uppercase; /* Match your existing header text style */
}

.main-nav .nav-links a:hover {
    color: #ffd700; /* Example hover color */
}

/* --- Hamburger Menu Toggle --- */
.nav-toggle {
    display: none; /* Hidden by default on large screens */
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    padding: 5px;
    min-width: 40px; /* Ensure toggle has space */
    text-align: right;
}

/* --- Responsive Adjustments for Header (Media Queries) --- */
@media (max-width: 900px) {
    .school-name {
        font-size: 1.4em; /* Smaller font for medium screens */
        max-width: calc(100% - 70px); /* Adjusted max-width */
    }
    .header-content-wrapper {
        gap: 10px; /* Slightly reduce gap if needed */
    }
    
    .main-nav .nav-links {
        display: none; /* Hide full menu on smaller screens */
        flex-direction: column; /* Stack menu items vertically when shown */
        width: 100%;
        position: absolute; /* Position the menu absolutely */
        top: 70px; /* Adjust based on your header height */
        left: 0;
        background-color: #6a3500; /* Background for dropdown menu */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        padding: 10px 0;
        z-index: 999; /* Ensure menu is on top of other content, but below sticky header */
        max-height: calc(100vh - 70px); /* Limit height to viewport minus header */
        overflow-y: auto; /* Enable scrolling if menu is too long */
    }

    .main-nav .nav-links.active {
        display: flex; /* Show menu when 'active' class is added by JS */
    }

    .main-nav .nav-links li {
        margin: 0; /* Remove horizontal margins */
        text-align: center;
        width: 100%;
    }

    .main-nav .nav-links a {
        display: block; /* Make links fill their width */
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator */
    }

    .main-nav .nav-links li:last-child a {
        border-bottom: none; /* No border on last item */
    }

    .nav-toggle {
        display: block; /* Show hamburger icon on small screens */
    }

    /* Prevent body scrolling when menu is open */
    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    .school-name {
        font-size: 1.2em; /* Even smaller font for phones */
        max-width: calc(100% - 65px); /* Further adjust max-width */
    }
    .header-logo {
        height: 45px; /* Make logo slightly smaller too */
    }
}

@media (max-width: 400px) { /* For very small screens (portrait phones) */
    .school-name {
        font-size: 1.0em; /* Smallest comfortable font size */
        max-width: calc(100% - 60px); /* Final max-width adjustment */
    }
    .header-logo {
        height: 40px; /* Smallest logo size */
    }
    .main-header {
        padding: 8px 10px; /* Reduce header padding on very small screens */
    }
}
/* --- Base Header Styles --- */
.main-header {
    background-color: #8B4513; /* Example color (brownish orange from your logo/header) */
    color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: sticky; /* Makes header stick to top */
    top: 0;
    z-index: 1000; /* Ensures header is above other content */
}

.main-nav-wrapper { /* This targets the <nav class="container main-nav-wrapper"> */
    display: flex;
    justify-content: space-between; /* Puts logo/title on left, nav/toggle on right */
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Limit header width on very large screens */
    margin: 0 auto; /* Center the nav wrapper */
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between logo and text */
    flex-shrink: 1; /* Allows this container to shrink if space is tight */
}

.header-logo {
    height: 50px; /* Adjust as needed */
    width: auto;
    flex-shrink: 0; /* Prevents logo from shrinking too much */
}

.logo h1 { /* Targeting the h1 inside the logo div */
    font-size: 1.8em; /* Base size for large screens */
    font-weight: bold;
    white-space: nowrap; /* Keep on one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Add "..." if text overflows */
    margin: 0; /* Remove default h1 margin */
    /* This calculation accounts for logo width (approx 50px) + gap (15px) + small buffer */
    max-width: calc(100% - 80px); /* Adjust 80px based on your actual logo+gap size */
    min-width: 0; /* Allows h1 to shrink effectively */
    line-height: 1.2; /* Adjust line height if necessary */
}

/* --- Main Navigation Links --- */
.nav-links { /* Targets ul#main-nav */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Makes nav items horizontal on large screens */
    align-items: center;
}

.nav-links li {
    margin-left: 25px; /* Space between main menu items */
    position: relative; /* Needed for dropdown positioning */
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 0;
    transition: color 0.3s ease;
    text-transform: uppercase;
    display: flex; /* Allow icons to align with text */
    align-items: center;
    gap: 5px; /* Space between icon and text */
}

.nav-links li a:hover {
    color: #ffd700; /* Example hover color */
}

/* --- Dropdown Menus (Desktop) --- */
.nav-links .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below parent link */
    left: 0;
    background-color: #6a350a; /* Darker background for dropdown */
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    z-index: 100; /* Ensure dropdown is above other content */
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li:hover > .dropdown-menu {
    display: block; /* Show dropdown on hover */
}

.nav-links .dropdown-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-links .dropdown-menu li:last-child {
    border-bottom: none;
}

.nav-links .dropdown-menu a {
    padding: 12px 20px;
    white-space: nowrap; /* Prevent wrapping in dropdown links */
    display: block; /* Make links clickable across full width */
    font-weight: normal; /* Normal weight for dropdown items */
}

/* Sub-dropdowns */
.nav-links .sub-dropdown-menu {
    left: 100%; /* Position to the right of parent menu item */
    top: 0;
    border-radius: 0 8px 8px 0; /* Rounded corners for sub-dropdown */
}

.nav-links .has-dropdown > a .dropdown-arrow {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.nav-links .has-dropdown:hover > a .dropdown-arrow {
    transform: rotate(180deg); /* Rotate arrow on hover */
}

.nav-links .has-dropdown .dropdown-caret {
    margin-left: 5px;
    transform: rotate(0deg); /* Default for right-pointing caret */
    transition: transform 0.3s ease;
}

.nav-links .has-dropdown .sub-dropdown-menu-parent:hover > a .dropdown-caret {
    transform: rotate(90deg); /* Rotate caret on hover for sub-menu */
}


/* --- Hamburger Menu Toggle --- */
.nav-toggle {
    display: none; /* Hidden by default on large screens */
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    padding: 5px;
    min-width: 40px; /* Ensure toggle has space */
    text-align: right;
    order: 2; /* Ensures it's after logo on small screens if nav is reordered */
}

/* --- Responsive Adjustments (Media Queries) --- */
@media (max-width: 900px) {
    .logo h1 {
        font-size: 1.4em; /* Smaller font for medium screens */
        max-width: calc(100% - 70px); /* Adjusted max-width for space */
    }
    
    .nav-links { /* This targets ul#main-nav. The default state for mobile */
        display: none; /* Hide full menu on smaller screens */
        flex-direction: column; /* Stack menu items vertically when shown */
        width: 100%;
        position: absolute; /* Position the menu absolutely */
        top: 70px; /* Adjust based on your header height */
        left: 0;
        background-color: #6a350a; /* Background for dropdown mobile menu */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        padding: 10px 0;
        z-index: 999; /* Ensure menu is on top of other content, but below sticky header */
        max-height: calc(100vh - 70px); /* Limit height to viewport minus header */
        overflow-y: auto; /* Enable scrolling if menu is too long */
    }

    .nav-links.active { /* Class added by JS to show menu */
        display: flex; /* Show menu when 'active' class is added by JS */
    }

    .nav-links li {
        margin: 0; /* Remove horizontal margins */
        width: 100%;
        text-align: left; /* Align text to left in mobile menu */
    }

    .nav-links li a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator */
    }

    .nav-links li:last-child a {
        border-bottom: none; /* No border on last item */
    }

    .nav-toggle {
        display: block; /* Show hamburger icon on small screens */
    }

    /* Prevent body scrolling when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* --- Responsive Dropdowns (Mobile) --- */
    .nav-links .dropdown-menu {
        position: static; /* Stack dropdowns below parent, not absolute */
        width: 100%;
        box-shadow: none; /* No shadow needed when stacked */
        border-radius: 0; /* No rounded corners */
        background-color: rgba(0,0,0,0.1); /* Slightly different background for sub-menus */
        padding-left: 20px; /* Indent sub-menus */
    }

    .nav-links li.has-dropdown:hover > .dropdown-menu {
        display: none; /* Disable hover effect for mobile */
    }

    /* Add a class for JavaScript to toggle mobile dropdowns */
    .nav-links .dropdown-menu.active {
        display: block; /* Show mobile dropdown when active via JS */
    }
    
    .nav-links .sub-dropdown-menu {
        padding-left: 20px; /* Further indent sub-sub-menus */
    }
    
    /* Rotate caret for mobile dropdowns when opened by JS */
    .nav-links .has-dropdown > a .dropdown-arrow,
    .nav-links .has-dropdown > a .dropdown-caret {
        margin-left: auto; /* Push arrow to the right */
        transform: rotate(0deg); /* Default state for mobile */
        transition: transform 0.3s ease;
    }
    /* Add a class to the parent <li> when its dropdown is open for mobile */
    .nav-links li.dropdown-open > a .dropdown-arrow {
        transform: rotate(180deg);
    }
    .nav-links li.dropdown-open > a .dropdown-caret {
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .logo h1 {
        font-size: 1.2em; /* Even smaller font for phones */
        max-width: calc(100% - 65px); /* Further adjust max-width */
    }
    .header-logo {
        height: 45px; /* Make logo slightly smaller too */
    }
}

@media (max-width: 400px) { /* For very small screens (portrait phones) */
    .logo h1 {
        font-size: 1.0em; /* Smallest comfortable font size */
        max-width: calc(100% - 60px); /* Final max-width adjustment */
    }
    .header-logo {
        height: 40px; /* Smallest logo size */
    }
    .main-header {
        padding: 8px 10px; /* Reduce header padding on very small screens */
    }
}
/* --- Image Modal / Lightbox Styles --- */

.image-modal {
    display: none; /* <-- THIS MUST BE 'none' initially to hide it */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top (higher than any other content) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if image is larger than screen */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

    /* The JavaScript will dynamically add `display: flex;` when the modal opens.
       DO NOT put `display: flex;` here in the default CSS. */

    /* The rest of your styles are fine, but ensure 'display: flex;' isn't defined again */
    align-items: center; /* These will take effect when JS sets display to 'flex' */
    justify-content: center;
    flex-direction: column;
}
/* Ensure the main navigation list itself is displayed correctly when active */
#main-nav.active {
    display: block !important; /* Or flex, depending on how your mobile menu is laid out */
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important; /* Or absolute, if it's overlaying the content */
    top: 0 !important; /* Adjust if you have a fixed header */
    right: 0 !important; /* Or left: 0; depending on where it slides in from */
    width: 100% !important; /* Or a fixed width like 300px for a sidebar */
    height: 100vh !important; /* Take full viewport height */
    overflow-y: auto !important; /* Allow scrolling if content is too long */
    background-color: #f8f8f8 !important; /* Set a clear background color for the menu */
    z-index: 1000 !important; /* Ensure it's above other content */
    box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important; /* Add some shadow for visual separation */
}

/* Styles for the individual list items within the active mobile menu */
#main-nav.active li {
    padding: 15px 20px !important; /* Add generous padding */
    border-bottom: 1px solid #eee !important; /* Add borders for visual separation */
    background-color: #ffffff !important; /* Ensure a white background for each row */
    margin: 0 !important;
}

/* Crucial: Styles for the actual anchor tags (the links) */
#main-nav.active li a {
    color: #333333 !important; /* VERY IMPORTANT: Set a dark, contrasting color */
    font-size: 18px !important; /* Ensure a readable font size */
    line-height: 1.5 !important;
    display: flex !important; /* Use flex to align icon and text nicely */
    align-items: center !important; /* Vertically center icon and text */
    text-decoration: none !important; /* Remove any underlines */
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Styles for the Font Awesome icons within the links */
#main-nav.active li a i.fas {
    color: #007bff !important; /* A distinct color for icons, e.g., blue */
    font-size: 20px !important; /* Slightly larger than text for prominence */
    margin-right: 10px !important; /* Space between icon and text */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Styles for dropdown menus within the mobile menu when opened */
#main-nav.active .dropdown-menu {
    /* JavaScript handles display: block/none, so focus on visual properties */
    background-color: #f0f0f0 !important; /* Slightly different background for sub-menus */
    padding-left: 20px !important; /* Indent sub-menu items */
    border-top: 1px solid #ddd !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#main-nav.active .dropdown-menu li a {
    color: #555555 !important; /* Darker grey for sub-menu links */
    font-size: 16px !important; /* Slightly smaller font for sub-menu links */
    padding: 10px 0 !important; /* Adjust padding within sub-menu */
}

/* Add a media query if your main-nav is styled differently for desktop */
/* This ensures these mobile-specific styles only apply on small screens */
@media (max-width: 768px) {
    #main-nav {
        /* Default hidden state for mobile */
        display: none;
        /* Add transition for smooth opening/closing */
        transition: transform 0.3s ease-out;
        transform: translateX(100%); /* Start off-screen to the right */
    }

    #main-nav.active {
        display: block; /* Show the menu */
        transform: translateX(0); /* Slide into view */
    }

    /* Override desktop specific styles that might conflict */
    #main-nav li {
        float: none; /* Clear any floats for desktop menu items */
        width: auto; /* Remove fixed widths */
    }
}

/* ... rest of your CSS for modal-content, close-button, download-button ... */
.copyright-bar {
  text-align: center; /* This centers everything inside the div */
  padding-top: 20px;
  border-top: 1px solid #444; /* Optional: adds a line above the copyright section */
}

/* Your button CSS from before remains the same */
.toptier-tech-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FFC107;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toptier-tech-button:hover {
  background-color: #FFB300;
  cursor: pointer;
}
/* Make sure the hero section itself can contain the content */
.hero {
  position: relative;
  width: 100%;
  height: 60vh; /* A good height for a hero section on most devices */
  max-height: 500px; /* Prevents it from getting too tall on large screens */
  overflow: hidden; /* This is key to hide any overflowing image parts */
}

/* Ensure the slideshow container itself is responsive */
.slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* This is the most important part to fix your issue */
.mySlides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left; /* This is the fix: it centers the image on the left side */
  display: block;
}
/* ======================================= */
/* === Updated Alert Banner CSS (Blue & Narrower) === */
/* ======================================= */

.alert-banner {
    /* Narrower style: Use max-width to center it and make it stand out */
    max-width: 800px; 
    margin: 20px auto; 
    
    /* Blue Theme */
    background-color: #d1ecf1; /* Light Blue background */
    color: #0c5460; /* Dark Blue text */
    padding: 15px 20px;
    border: 1px solid #bee5eb;
    border-radius: 6px; /* Slightly more rounded corners */
    text-align: center;
}

.alert-banner .container {
    max-width: 100%; /* Allows content to fill the new max-width of the parent */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.alert-banner .fas {
    font-size: 1.5em;
    color: #007bff; /* Bright Blue icon */
}

.alert-banner p {
    margin: 0;
    font-size: 1.05em;
    flex-grow: 1; /* Allows the text to take available space */
}

.alert-link {
    color: #007bff; /* Bright Blue link color */
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #007bff;
    border-radius: 4px;
    white-space: nowrap; /* Keeps the link text from wrapping */
    transition: background-color 0.3s, color 0.3s;
}

.alert-link:hover {
    background-color: #007bff;
    color: white;
}

/* Ensure mobile stacking remains correct */
@media (max-width: 600px) {
    .alert-banner .container {
        flex-direction: column;
        align-items: center;
    }
    .alert-banner {
        max-width: 95%; /* Adjust for small screen width */
    }
}
/* Grouping links in the alert banner */
.alert-links-group {
    display: flex;
    gap: 10px; /* Space between the two links */
    flex-wrap: wrap; /* Allows links to stack on very small screens */
    margin-left: 15px; /* Adds space between text and buttons */
}

/* Make sure the links are also slightly adjusted */
.alert-link {
    /* Existing styles are fine, but ensure icon is visible */
    display: flex;
    align-items: center;
    gap: 5px; 
}