/* Core styles */
body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    -o-background-size: cover;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #333;
    background-color: #f0f4f8;
    /* Light blue-gray background for better contrast */
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    /* Subtle gradient */
    min-height: 100vh;
    padding-top: 50px;
    /* Adjust this value based on the height of your header menu */
}

/* Container width */
@media (min-width:1214px) {
    .container {
        width: 1214px;
    }
}

.AB71 {
    background-color: #FFFFFF;
    height: 274px;
}

@media screen and (max-width: 480px) {
    .AB71 {
        background-color: #FFFFFF;
        height: 138px;
    }

    .AB93 {
        margin-top: -104px;
    }
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212;
    background-image: linear-gradient(135deg, #121212 0%, #000000 100%);
    /* Deep dark gradient */
    color: #ffffff;
    transition: all 0.3s ease;
}

.dark-mode .top-branding-bar .school-name {
    color: #ffffff;
}

.dark-mode .box,
.dark-mode .notice,
.dark-mode .content-wrapper,
.dark-mode .container,
.dark-mode .educational-resources,
.dark-mode .resource-box {
    background-color: #1a1a1a;
    color: #ffffff;
}

.dark-mode a {
    color: #66b3ff;
}

.dark-mode a:hover {
    color: #99ccff;
}

.dark-mode .navbar-default {
    background-color: rgba(0, 0, 0, 0.9);
}

.dark-mode .dropdown-menu {
    background-color: #1a1a1a;
}

.dark-mode .dropdown-menu>li>a {
    color: #ffffff;
}

/* Dark mode toggle button */
#dark-mode-toggle {
    margin-left: auto;
    /* This will push it to the right */
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* ---Rest of your styles----*/
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

.StaticMenuStyleMainMenu {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.StaticMenuItemStyleMainMenu {
    border-width: 0px;
    color: #fff;
    font-size: 15px;
    text-align: left;
    padding-left: 20px;
    padding-right: 19px;
    padding-top: 10px;
    height: 40px;
}

.StaticHoverStyleMainMenu {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 15px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    height: 40px;
}

/* Dark mode specific colors */
.dark-mode .StaticMenuStyleMainMenu {
    background-color: #0b1422eb;
}

.dark-mode .StaticHoverStyleMainMenu {
    background-color: #2c5282;
}

.dark-mode #dark-mode-toggle {
    border-color: #3182ce;
}


/* 1. Dropdown Menu Refinements */

/* Hide default Bootstrap hover behavior on desktop if we use JS/hover-open class */
@media (min-width: 768px) {

    /* .main-navbar .dropdown:not(.hover-open):not(.open) > .dropdown-menu {
     display: none; */
    /* Uncomment if Bootstrap's default :hover causes issues 
    }  */
    /* Style for hover preview */
    .main-navbar .dropdown.hover-open>.dropdown-menu {
        display: block;
        /* Add subtle animation or transition if desired */
        opacity: 0.95;
    }

    /* Ensure clicked menus stay visible */
    .main-navbar .dropdown.open>.dropdown-menu {
        display: block;
        opacity: 1;
    }
}

/* Mobile: Ensure dropdowns take full width and stack properly */
@media (max-width: 768px) {

    /*
    .main-navbar .navbar-collapse {
        Styles for collapsed menu container if needed 
    } */
    .main-navbar .navbar-nav {
        margin: 0;
        /* Reset margins */
    }

    .main-navbar .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        /* Let Bootstrap handle width or set to 100% if needed */
        border: none;
        box-shadow: none;
        background-color: transparent;
        /* Match collapsed background or theme */
        margin-top: 0;
    }

    .main-navbar .dropdown-menu>li>a {
        color: #fff;
        /* Adjust based on collapsed menu text color */
        padding: 10px 15px;
        white-space: normal;
    }

    .main-navbar .dropdown-menu>li>a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        /* Subtle hover */
    }

    .main-navbar .dropdown.open>.dropdown-menu {
        display: block;
        /* Ensure it displays when toggled */
    }

    /* Ensure the toggle itself is clickable */
    .main-navbar .dropdown>a.dropdown-toggle {
        display: block;
        /* Ensure it takes full width if needed */
    }

    /* Dark mode specific adjustments for mobile dropdown */
    .dark-mode .main-navbar .dropdown-menu {
        background-color: transparent;
        /* Or match dark collapsed background */
    }

    .dark-mode .main-navbar .dropdown-menu>li>a {
        color: #ccc;
        /* Adjust dark mode text color */
    }

    .dark-mode .main-navbar .dropdown-menu>li>a:hover {
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}


/* Add/update these media queries in your style section */
@media screen and (max-width: 768px) {

    /* Mobile navigation fixes */
    .navbar-nav {
        margin: 0;
    }

    .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
    }

    /* Fix marquee visibility on mobile */
    .AB110 {
        width: 100%;
        margin: 10px 0;
    }

    /* Improve principal section layout */
    .princip {
        padding-top: 20px !important;
    }

    /* Fix colored boxes layout */
    .col-md-3 {
        margin-bottom: 15px;
    }

    /* Improve notice board readability */
    .notice {
        margin-top: 15px;
        height: auto !important;
        align-self: right;
    }
}

/* Fix for very small screens */
@media screen and (max-width: 480px) {
    .navbar-brand {
        font-size: 16px;
    }

    /* Adjust header image height */
    img[src*="images/banner.png"] {
        height: auto;
    }

    /* Fix menu text size */
    .StaticMenuItemStyleMainMenu {
        font-size: 14px;
        padding: 8px 15px;
        height: auto;
    }
}

/* Update the feature column styles */
.feature-column {
    padding: 30px 20px;
    transition: all 0.3s ease;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: block;
    text-decoration: none;
    height: 100%;
}

/* Light mode colors removed to allow generic styling */

/* Dark mode colors - darker but still vibrant versions */
.dark-mode .feature-column:nth-child(1) {
    background: #1e40af;
    /* Darker Royal Blue */
}

.dark-mode .feature-column:nth-child(2) {
    background: #5b21b6;
    /* Darker Purple */
}

.dark-mode .feature-column:nth-child(3) {
    background: #0e7490;
    /* Darker Teal */
}

.dark-mode .feature-column:nth-child(4) {
    background: #3730a3;
    /* Darker Indigo */
}

/* Icon and text styles */
.feature-column img {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: block;
    filter: brightness(0) invert(1);
}

.feature-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.feature-column .title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 15px 0;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .col-md-3 {
        padding: 10px;
    }

    .feature-column {
        margin: 5px 0;
        padding: 20px 15px;
    }

    .feature-column img {
        width: 48px;
        height: 48px;
    }

    .feature-column .title {
        font-size: 16px;
        margin: 10px 0;
    }
}

/* Fixed frame carousel styles */
#schoolBanner {
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    /* Ensure overflow is hidden here */
    position: relative;
    /* Added for potential absolute positioning issues */
    /* Fixed height container - Commented out */
    /* height: 400px; */
}

.carousel-inner {
    /* height: 100%; */
    /* Let height be determined by content */
    overflow: hidden;
    /* ADDED: Hide overflow for the inner container too */
    position: relative;
    /* Needed for absolute positioning of items */
    width: 100%;
}

.carousel-inner>.item {
    /* height: 100%; */
    /* Remove fixed item height */
    display: none;
    /* Hide non-active items initially */
    transition: transform 0.6s ease-in-out;
    /* Ensure transition is set */
    -webkit-backface-visibility: hidden;
    /* Fix for flickering in some browsers */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Let Bootstrap manage display for active/transitioning items */
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
    display: block;
}

.carousel-inner>.active {
    /* Ensure active item is positioned correctly */
    transform: translateX(0);
}

.carousel-inner>.next,
.carousel-inner>.prev {
    /* Position transitioning items off-screen */
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel-inner>.next {
    transform: translateX(100%);
}

.carousel-inner>.prev {
    transform: translateX(-100%);
}

/* Sliding transitions */
.carousel-inner>.next.left,
.carousel-inner>.prev.right {
    transform: translateX(0);
}

.carousel-inner>.active.left {
    transform: translateX(-100%);
}

.carousel-inner>.active.right {
    transform: translateX(100%);
}


.carousel-inner .item img {
    width: 100%;
    height: auto;
    /* Let height adjust based on aspect ratio */
    /* object-fit: cover; */
    /* Changed from cover */
    object-fit: contain;
    /* Ensure whole image is visible */
    display: block;
    /* Remove extra space below image */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #schoolBanner {
        height: 300px;
    }
}

@media screen and (max-width: 480px) {
    #schoolBanner {
        height: 200px;
    }
}

/* Improved carousel controls */
.carousel-control {
    background: rgba(0, 0, 0, 0.3);
    width: 10%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Better caption visibility */
.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 8px;
    bottom: 20px;
}

/* Smooth transitions */
.carousel .item {
    transition: transform 0.6s ease-in-out;
}

/* Dark mode support */
.dark-mode .carousel-caption {
    background: rgba(0, 0, 0, 0.7);
}

/* Banner image container */
.banner-container {
    background-color: #ffffff;
    /* Light mode background */
    padding: 10px 0;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    /* Add space between header menu and banner */
}

/* Dark mode specific style */
.dark-mode .banner-container {
    background-color: #121212;
    /* Dark mode background */
}

/* Enhanced Navbar */
.navbar {
    margin-bottom: 0;
    border: none;
    background-color: #2c5282;
}

.navbar-default {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    /* Rich gradient */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Stronger shadow */
    position: relative;
    top: auto;
    z-index: 99;
}

.navbar-nav {
    margin: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Enhanced Menu Styles */
.StaticMenuStyleMainMenu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.StaticMenuItemStyleMainMenu {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #ffffff !important;
}

.StaticMenuItemStyleMainMenu:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown Menu - Complete Fix */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #2c5282;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    opacity: 1;
    visibility: visible;
}

/* Show dropdown on hover */
.dropdown:hover>.dropdown-menu {
    display: block !important;
}

/* Fix submenu positioning */
.level2.dropdown-menu {
    top: 100%;
    left: 0;
    margin-top: 0;
}

/* Dropdown items */
.dropdown-menu>li>a {
    padding: 12px 20px;
    color: #ffffff !important;
    transition: all 0.3s ease;
    font-size: 14px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #3182ce !important;
    /* Lighter blue for hover */
    color: #ffffff !important;
}

/* Dark mode dropdown styles */
.dark-mode .dropdown-menu {
    background-color: #1a365d !important;
    /* Darker blue for dark mode */
}

.dark-mode .dropdown-menu>li>a:hover,
.dark-mode .dropdown-menu>li>a:focus {
    background-color: #2c5282 !important;
}

/* Mobile dropdown handling */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        background-color: #1a365d;
    }

    .navbar-nav {
        margin: 0;
    }

    .dropdown.open .dropdown-menu {
        display: block !important;
    }
}

/* Active state */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

/* Enhanced Feature columns */
/* Modernized Feature Column */
.feature-column {
    padding: 30px 20px;
    margin: 15px 0;
    border-radius: 20px;
    /* Rounded corners as requested */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    /* Soft drop shadow */
    text-align: center;
    display: block;
    text-decoration: none;
    min-height: 220px;
    transition: all 0.3s ease;
    /* Smooth transition */
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
    /* Slightly off-white for light mode contrast */
    border: 1px solid #e2e8f0;
    /* Defined border for visibility */
}

/* Feature Icons */
.feature-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #2c5282, #1a365d);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}

.feature-column:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Feature Title */
.feature-column .title {
    color: #1a202c;
    /* Darker text for light mode */
    font-size: 1.25rem;
    font-weight: 800;
    /* Bolder */
    font-family: 'Segoe UI', sans-serif;
    margin: 10px 0 5px;
}

/* Feature Micro-copy */
.feature-microcopy {
    color: #4a5568;
    /* Dark grey for visibility */
    font-size: 0.95rem;
    /* Slightly larger */
    margin: 0;
    font-weight: 500;
    opacity: 1;
}

/* Dark Mode Overrides for Features */
.dark-mode .feature-column {
    background: #1a202c;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid #2d3748;
}

.dark-mode .feature-column:hover {
    background: #2d3748;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode .feature-column .title {
    color: #f7fafc;
}

.dark-mode .feature-microcopy {
    color: #a0aec0;
}

.dark-mode .feature-icon {
    background: linear-gradient(135deg, #63b3ed, #4299e1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* About Section Enhancement */
.aboutschool {
    background: #ffffff;
    padding: 30px !important;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #2c5282;
}

.about-school-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #2c5282;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.about-school-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #2c5282;
    border-radius: 2px;
}

.dark-mode .aboutschool {
    background: #1a202c;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-left: 5px solid #63b3ed;
    color: #edf2f7;
}

.dark-mode .about-school-heading {
    color: #63b3ed;
}

.dark-mode .about-school-heading::after {
    background: #63b3ed;
}


/* Weather Widget Styling */
.weather-widget-container {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.weather-widget-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.dark-mode .weather-widget-container {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.dark-mode .weather-widget-container * {
    color: #f1f5f9 !important;
    /* Force text color in dark mode */
}

/* Faculty Section Styling */
.faculty-wrapper {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-top: 5px solid #e53e3e;
    max-width: 900px;
    margin: 30px auto;
}

/* Social Media Feed Container */
.social-feed-container {
    font-size: 16px;
}

.faculty-wrapper ul {
    list-style-type: none;
    /* Remove default bullets */
    padding-left: 0;
}

.faculty-wrapper ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.faculty-wrapper ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #e53e3e;
    font-weight: bold;
}

.faculty-cta {
    text-align: center;
    margin-top: 25px;
}

/* Resources Section Styling */
.educational-resources {
    padding: 40px 20px;
    background-color: #f8fafc;
    border-radius: 20px;
    margin-top: 40px;
}

.educational-resources h2 {
    color: #2c5282;
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.educational-resources h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #2c5282;
    border-radius: 2px;
}

.resource-box {
    background: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.resource-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.resource-box h3 {
    color: #2c5282;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    font-size: 1.4rem;
}

.resource-box ul {
    list-style: none;
    padding-left: 0;
}

.resource-box ul li {
    margin-bottom: 10px;
}

.resource-box ul li a {
    color: #2d3748;
    /* Dark Text for readability */
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
    display: block;
    padding: 5px 0;
}

.resource-box ul li a:hover {
    color: #2b6cb0;
    transform: translateX(5px);
    /* padding-left: 5px; REMOVED to prevent layout shift */
}

.resource-box ul li a::before {
    content: '🔗 ';
    font-size: 0.8em;
}

/* Dark Mode for New Sections */
.dark-mode .faculty-wrapper {
    background: #1a202c;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    color: #edf2f7;
}

.dark-mode .educational-resources {
    background-color: #171923;
}

.dark-mode .resource-box {
    background: #2d3748;
    border-color: #4a5568;
}

.dark-mode .resource-box h3 {
    color: #90cdf4;
    border-bottom-color: #4a5568;
}

.dark-mode .resource-box ul li a {
    color: #e2e8f0;
}

.dark-mode .resource-box ul li a:hover {
    color: #63b3ed;
}

.feature-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.feature-column:hover::before {
    transform: translateX(100%);
}

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

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
    width: 100%;
}

.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 15px;
    display: flex;
    justify-content: center;
}

/* Dark mode styles */
.dark-mode .navbar-default {
    background-color: rgba(0, 0, 0, 0.9);
}

.dark-mode .feature-column {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode img {
    filter: brightness(0.9);
}

/* Enhanced Mobile responsive */
@media screen and (max-width: 768px) {
    .navbar-nav {
        display: block;
        margin: 0;
    }

    .dropdown-menu {
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }

    .navbar-toggle {
        border-color: #ffffff;
        transition: all 0.3s ease;
    }

    .navbar-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-toggle .icon-bar {
        background-color: #ffffff;
        transition: all 0.3s ease;
    }

    .feature-column {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .navbar-nav {
        display: none;
    }

    .feature-column {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* =================================== */
/* Header Responsive Styles          */
/* =================================== */

/* --- Full Split Header (Top Bar + Main Nav) --- */
@media (max-width: 768px) {
    .top-branding-bar {
        padding: 8px 0;
        text-align: center;
    }

    .top-branding-bar .container {
        display: flex;
        justify-content: center;
        /* Center logo/name on mobile */
        align-items: center;
        padding-left: 10px !important;
        /* Override general container padding */
        padding-right: 10px !important;
    }

    .top-branding-bar .school-logo {
        height: 35px;
        /* Smaller logo */
        margin-right: 8px;
    }

    .top-branding-bar .school-name {
        font-size: 14px;
        font-weight: 500;
        white-space: normal;
        text-align: center;
    }
}

/* Newsletter Custom Styles - Footer */
.newsletter-signup-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    /* SLightly wider */
    margin: 0 auto;
}

.newsletter-signup-footer input[type="email"] {
    flex-grow: 1;
    padding: 10px 20px;
    border-radius: 50px;
    /* More round */
    border: 1px solid #4a5568;
    /* Darker border matching footer theme */
    outline: none;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    /* Dark transparent background like desired image? or just dark grey */
    color: #333;
    /* kept dark for visibility on light bg? Wait footer is white in Mycss? No, check dark mode */
    margin-bottom: 0;
    height: 45px;
}

/* Dark mode overrides for input are handled later in file, but let's ensure base is good */
.newsletter-signup-footer input[type="email"]::placeholder {
    color: #a0aec0;
}

.newsletter-signup-footer button {
    margin-top: 0;
    /* Reset margin */
    padding: 0 25px;
    height: 45px;
    background-color: #e53e3e;
    /* Red as requested */
    color: white;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    /* Match desired image */
    flex-shrink: 0;
    /* Prevent shrinking */
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    line-height: normal;
}



/* Social Feed Advanced Styling */
.social-platform-name {
    font-weight: bold;
    display: block;
    text-transform: capitalize;
    color: #333;
}

.social-content-text {
    margin: 10px 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #4a5568;
}

/* Dark Mode Overrides for Social Feed */
.dark-mode .social-platform-name {
    color: #e2e8f0;
}

.dark-mode .social-content-text {
    color: #cbd5e0;
}

.dark-mode .social-post {
    border-color: #4a5568;
    /* Subtle border in dark mode */
}

/* Adjust main navbar for mobile */
@media (max-width: 768px) {
    .main-navbar {
        padding-top: 0;
        margin-top: 0;
    }

    .main-navbar .navbar-brand {
        display: block;
        margin-left: 15px;
        padding: 10px 15px;
    }

    .main-navbar>.container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content-below-header {
        padding-top: 10px;
    }
}

/* --- Simplified Header --- */
.simple-header-container {
    background-color: #ffffff;
    /* Match light theme */
    padding: 8px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    /* Changed from fixed/sticky */
    z-index: 1031;
    width: 100%;
    /* Ensure it takes full width */
}

.dark-mode .simple-header-container {
    background-color: #1e1e1e;
    /* Dark mode background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.simple-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align logo left */
    height: 45px;
    /* Consistent height */
    padding: 0 15px;
    /* Padding inside container */
}

.simple-header .simple-logo {
    height: 35px;
    width: auto;
}

.content-below-simple-header {
    padding-top: 15px;
    /* Space below simplified header */
    /* min-height calculation removed as it can cause issues with varying footer heights */
}

@media (max-width: 768px) {
    .simple-header-container {
        padding: 5px 0;
    }

    .simple-header {
        height: 40px;
        padding: 0 10px;
    }

    .simple-header .simple-logo {
        height: 30px;
    }

    .content-below-simple-header {
        padding-top: 10px;
    }
}

/* ============================================= */
/* General Content Responsiveness (Mobile)     */
/* ============================================= */
@media (max-width: 768px) {
    body {
        padding-top: 0 !important;
        /* Remove fixed padding if headers are handled differently */
        font-size: 15px;
        /* Slightly smaller base font */
    }

    /* Override stricter container padding for general content */
    .container:not(.simple-header):not(.top-branding-bar .container) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .container-fluid:not(.main-navbar > .container-fluid) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .box,
    .content,
    main.container,
    .dashboard-container {
        padding: 15px;
        /* Consistent padding inside content boxes */
        margin-left: 0;
        margin-right: 0;
    }

    /* Ensure all images scale correctly */
    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        /* Fix potential alignment issues */
    }

    /* Improve table responsiveness */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #eee;
        /* Add border for clarity */
    }

    .dark-mode .table-responsive {
        border-color: #444;
    }

    table.table {
        min-width: 500px;
        /* Encourage scrolling on smaller tables */
        width: 100%;
        margin-bottom: 0;
        /* Remove margin if wrapped */
    }

    table th,
    table td {
        white-space: nowrap;
        /* Prevent wrapping in table cells */
        padding: 8px 10px;
        /* Adjust padding */
        font-size: 14px;
    }

    /* Adjust Bootstrap columns to stack */
    .row>[class*='col-'] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
        /* Add space between stacked columns */
        padding-left: 10px;
        /* Adjust padding for smaller screens */
        padding-right: 10px;
    }

    .row>[class*='col-']:last-child {
        margin-bottom: 0;
    }

    /* Ensure rows themselves don't have negative margins causing overflow */
    .row {
        margin-left: 0;
        margin-right: 0;
    }


    /* Prevent overflow from fixed widths */
    .content-wrapper,
    .game-container,
    .dashboard-card,
    .alumni-card,
    .testimonial-card,
    .faculty-profile,
    .resource-box,
    .event-item,
    .tour-location,
    .achievement-card {
        max-width: 100%;
        width: auto;
        overflow-x: hidden;
        /* Prevent horizontal scroll within cards */
    }

    /* Responsive typography */
    h1 {
        font-size: 1.8em;
        margin-bottom: 0.8em;
    }

    h2 {
        font-size: 1.4em;
        margin-bottom: 0.7em;
    }

    h3 {
        font-size: 1.4em;
        margin-bottom: 0.6em;
    }

    h4 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }

    p {
        line-height: 1.6;
    }

    /* Ensure forms are usable */
    form .form-group,
    form .form-row>div {
        margin-bottom: 15px;
    }

    form label {
        margin-bottom: 5px;
        display: block;
        /* Ensure labels are above inputs */
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="number"],
    form select,
    form textarea {
        width: 100%;
        /* Make inputs full width */
        padding: 10px;
        font-size: 15px;
    }

    /* More specific button selector to avoid affecting small utility buttons */
    form button[type="submit"],
    form .btn:not(.btn-sm):not(.btn-xs):not(.navbar-toggle):not(.chatbot-close):not(.close-btn):not(#accessibilityBtn button):not(.accessibility-option button):not(.reset-button):not(.suggestion-button):not(.translate-btn-style):not(.cookie-btn):not(.back-to-top) {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        margin-top: 10px;
    }

    /* Specific fixes for fun-learning-games.html content */
    .game-grid {
        /* display: grid; - Ensure it's grid */
        /* grid-template-columns: 1fr; Already set in games.css? Double check */
        gap: 20px;
    }

    .game-container {
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
        display: flex;
        /* Use flex for better control */
        flex-direction: column;
    }

    .game-container h3 {
        /* Adjust game titles */
        font-size: 1.3em;
    }

    .section-header h1 {
        font-size: 1.6em;
    }

    .game-controls {
        margin-top: auto;
        /* Push controls to bottom */
        padding-top: 15px;
    }

    .game-controls button {
        font-size: 0.9em;
        padding: 8px 15px;
    }

    .floating-icons {
        position: absolute;
        top: 10px;
        right: 10px;
        gap: 8px;
    }

    /* Reposition */
    .floating-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .memory-board {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 5px;
        padding: 5px;
    }

    /* More flexible grid */
    .memory-card {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* Use aspect ratio */
    .memory-card .card-face {
        font-size: 1.5em;
    }

    /* Relative font size */
    #snakeCanvas,
    #tetrisCanvas,
    #breakoutCanvas,
    #bubbleCanvas {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .quiz-options button {
        width: 100%;
        margin-bottom: 8px;
        font-size: 0.9em;
        padding: 10px;
    }

    .letter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
        gap: 5px;
    }

    /* Flexible grid */
    .letter-btn {
        padding: 8px;
        font-size: 1em;
        min-width: 30px;
        height: auto;
        aspect-ratio: 1/1;
    }

    /* Aspect ratio */

    /* Fix potential issues with absolutely positioned elements */
    .news-announcements {
        position: static;
        /* Remove absolute positioning if causing overflow */
        margin-top: 20px;
        height: auto;
        /* Let content determine height */
    }

    .train-marquee {
        height: 200px;
        /* Adjust height for better fit */
    }
}

/* Container and Layout */
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background: none;
}

/* Navigation styles */
.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Menu Styles */
.StaticMenuStyleMainMenu {
    background-color: transparent;
    width: 100%;
}

.StaticMenuItemStyleMainMenu {
    color: #fff !important;
    font-size: 15px;
    text-align: left;
    padding: 10px 19px 0 20px;
    height: 40px;
}

.navbar-default .navbar-nav>li>a {
    padding: 13px;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: #fff;
    background-color: #2c5282;
}

/* Principal Section */
.princip {
    padding: 40px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.princip img {
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Improvements */
.dark-mode .princip {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
}

.dark-mode .princip h2,
.dark-mode .princip h3 {
    color: #ffffff;
}

.dark-mode .princip img {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(0.95) contrast(1.05);
}

/* Principal's Message Title */
.dark-mode .princip .title {
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Read More Link */
.dark-mode .princip a {
    color: #63b3ed;
    transition: color 0.3s ease;
}

.dark-mode .princip a:hover {
    color: #90cdf4;
}

/* Banner and Logo */
.banner-container {
    background-color: inherit;
    transition: background-color 0.3s;
    margin-bottom: 20px;
}

.banner-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Carousel */
#schoolBanner {
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
}

.carousel-inner,
.carousel-inner .item {
    height: 100%;
}

.carousel-inner .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer */
.footer-wrapper {
    background-color: #8929F7;
    margin-top: 30px;
}

.footer-text {
    text-align: center;
    background-color: black;
    padding: 8px;
    color: #ffffff;
    font-family: Arial;
    font-size: larger;
    margin: 0;
}

/* Dark Mode */
.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.dark-mode .navbar-default .navbar-nav>li>a {
    color: #ffffff;
}

.dark-mode .feature-column {
    background-color: #1e1e1e;
}

/* Responsive */
@media screen and (max-width: 480px) {
    #schoolBanner {
        height: 200px;
    }

    .navbar-brand {
        font-size: 16px;
    }

    .StaticMenuItemStyleMainMenu {
        font-size: 14px;
        padding: 8px 15px;
        height: auto;
    }

    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.brand,
.address-bar {
    display: none;
}

/*.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
}*/

.x {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

footer {
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
}

footer p {
    margin: 0;
    padding: 15px 0;
    line-height: 1.5;
    /* Updated line height */
}

.h1 img {
    width: 100%;
    height: auto;
}




@media screen and (min-width:768px) {
    .brand {
        display: inherit;
        margin: 0;
        padding: 30px 0 10px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 5em;
        font-weight: 700;
        color: #fff;
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #fff;
    }

    .navbar {
        border-radius: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255, 255, 255, 0.9);
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 0px;
        table-layout: fixed;
    }

    .ctl00_BelowHeader {
        background-color: #906 !important;
    }
}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}

/* Enhanced Dark Mode Toggle */
#dark-mode-toggle {
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 2px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 2px;
}

#dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.dark-mode #dark-mode-toggle {
    border-color: #ffd700;
    color: #ffd700;
}

/* Adjust navbar list item containing toggle */
.navbar-nav>li:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile responsive adjustments for toggle */
@media screen and (max-width: 768px) {
    #dark-mode-toggle {
        margin: 10px 15px;
        position: relative;
        z-index: 1050;
        /* Higher than dropdown */
    }

    .navbar-nav>li:last-child {
        justify-content: flex-start;
        position: relative;
    }

    /* Ensure toggle is clickable in mobile menu */
    .navbar-collapse {
        position: relative;
        z-index: 1040;
    }

    /* Improve touch target size */
    #dark-mode-toggle {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* Menu Active State Fixes */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

/* Mobile dropdown fixes */
@media screen and (max-width: 768px) {
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #ffffff !important;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #ffffff !important;
        background-color: #2d3748;
    }
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Focus States for Accessibility */
a:focus,
button:focus {
    outline: 2px solid #4299e1;
    outline-offset: 2px;
}

/* Loading State */
.loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loaded {
    opacity: 1;
}

/* Enhanced Mobile Menu */
@media screen and (max-width: 768px) {
    .navbar-collapse {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }

    body {
        padding-top: 50px;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Print Optimization */
@media print {
    .no-print {
        display: none !important;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Performance Optimizations */
.hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

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

/* Dropdown Menu Fix */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* Show dropdown on hover for desktop */
@media (min-width: 768px) {
    .dropdown:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
}

/* Dropdown arrow */
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

/* Mobile specific styles */
@media (max-width: 768px) {
    .dropdown-menu {
        display: none;
    }

    .dropdown.open>.dropdown-menu,
    .dropdown-submenu.open>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu>.dropdown-menu {
        margin-left: 20px;
    }
}

/* Ensure dropdown items are visible */
.dropdown-menu>li>a {
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #ffffff !important;
    white-space: nowrap;
    padding: 10px 20px;
}

/* Animation for smooth appearance */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add styles for Font Awesome icon */
.fa-chevron-down {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown:hover .fa-chevron-down {
    transform: rotate(180deg);
}

/* Add dropdown indicator */
.dropdown>a.dropdown-toggle::after {
    content: '▾';
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.dropdown:hover>a.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Mobile view indicator */
@media (max-width: 768px) {
    .dropdown>a.dropdown-toggle::after {
        float: right;
        margin-top: 8px;
    }
}

/* Mobile improvements */
@media (max-width: 768px) {

    /* Better touch targets */
    .StaticMenuItemStyleMainMenu {
        padding: 15px !important;
        /* Larger touch area */
        font-size: 16px !important;
        /* Larger text */
    }

    /* Improve dropdown visibility */
    .dropdown-menu {
        width: 100%;
        position: static;
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Better dropdown items touch area */
    .dropdown-menu>li>a {
        padding: 12px 25px !important;
        font-size: 15px;
    }

    /* Clearer dropdown indicator */
    .dropdown>a.dropdown-toggle::after {
        float: right;
        margin-top: 5px;
        font-size: 16px;
    }

    /* Fix navbar collapse */
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent text selection while tapping */
    .navbar-nav * {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
}

/* Fix for very small screens */
@media (max-width: 320px) {
    .StaticMenuItemStyleMainMenu {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* Faculty Section Styles */
.faculty-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faculty-title {
    color: #339966;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.faculty-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #339966;
}

.faculty-content {
    width: 100%;
    padding: 20px 0;
}

.content-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
}

.content-box p {
    color: #333333;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.custom-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #339966;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 2px solid #339966;
    min-width: 150px;
    /* Added for consistent size */
    text-align: center;
    /* Added for consistent text alignment */
}

.custom-btn:hover {
    background-color: #ffffff;
    color: #339966 !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Dark mode styles */
.dark-mode .faculty-wrapper {
    background-color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

.dark-mode .faculty-title {
    color: #4ade80;
}

.dark-mode .faculty-title:after {
    background-color: #4ade80;
}

.dark-mode .content-box {
    background-color: #2d2d2d;
}

.dark-mode .content-box p {
    color: #ffffff;
}

.dark-mode .custom-btn {
    background-color: #4ade80;
    border-color: #4ade80;
    color: #000000 !important;
}

.dark-mode .custom-btn:hover {
    background-color: transparent;
    color: #4ade80 !important;
}

/* Responsive styles */
@media (max-width: 768px) {
    .faculty-wrapper {
        padding: 20px 15px;
    }

    .faculty-title {
        font-size: 2rem;
    }

    .content-box {
        padding: 20px;
    }

    .content-box p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .button-container {
        flex-direction: column;
        gap: 15px;
    }

    .custom-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .faculty-title {
        font-size: 1.75rem;
    }

    .content-box {
        padding: 15px;
    }
}

/* Admission Section Styles */
.admission-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.admission-content {
    width: 100%;
    max-width: 1214px;
    margin: 0 auto;
    padding: 20px;
}

.content-box {
    background-color: #f8f9fa;
    padding: 30px;
    margin: 0;
    width: 100%;
}

.admission-info {
    text-align: center;
    width: 100%;
    margin: 0;
}

.provisional-notice {
    background-color: #f8f9fa;
    padding: 30px;
    margin: 20px auto;
    width: 100%;
    max-width: 800px;
}

/* Title Styles */
.admission-title {
    color: #339966;
    font-size: 2.5rem;
    font-weight: 600;
    margin: 30px 0;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.admission-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #339966;
}

/* Button Container */
.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px auto;
    max-width: 1214px;
    width: 100%;
}

/* Dark mode adjustments */
.dark-mode .admission-wrapper {
    background-color: #1a1a1a;
}

.dark-mode .content-box,
.dark-mode .provisional-notice {
    background-color: #2d2d2d;
}

.dark-mode .admission-title {
    color: #4ade80;
}

.dark-mode .admission-title:after {
    background-color: #4ade80;
}

.dark-mode .admission-info h3 {
    color: #ffffff;
}

.dark-mode .separator {
    color: #4ade80;
}

.dark-mode .provisional-notice h3 {
    color: #4ade80;
}

.dark-mode .provisional-notice p {
    color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admission-content {
        padding: 15px;
    }

    .content-box,
    .provisional-notice {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .admission-title {
        font-size: 1.75rem;
    }

    .admission-info h3 {
        font-size: 1.3rem;
    }

    .provisional-notice {
        padding: 15px;
    }
}

/* Notice Section Styles */
.notice-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notice-content {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.content-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin: 0 auto;
}

.notice-info {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin: 0 auto;
}

.notice-item {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.notice-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.notice-item h3 {
    color: #333333;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.notice-item p {
    color: #333333;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.notice-item a {
    color: #339966;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.notice-item a:hover {
    color: #267747;
    text-decoration: underline;
}

/* Dark mode adjustments */
.dark-mode .notice-wrapper {
    background-color: #1a1a1a;
}

.dark-mode .content-box,
.dark-mode .notice-info {
    background-color: #2d2d2d;
}

.dark-mode .notice-item h3 {
    color: #4ade80;
    /* Bright green color for better visibility */
    font-weight: 600;
}

.dark-mode .notice-item p {
    color: #ffffff;
    /* White color for paragraph text */
}

.dark-mode .notice-item a {
    color: #66b3ff;
    /* Light blue for links */
}

.dark-mode .notice-item a:hover {
    color: #99ccff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .notice-wrapper {
        padding: 15px;
    }

    .content-box,
    .notice-info {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .notice-title {
        font-size: 1.75rem;
    }

    .notice-info {
        padding: 15px;
    }
}

/* Gallery Styles */
.gallery-wrapper {
    padding: 20px 0;
}

.gallery-title {
    color: #333;
    margin-bottom: 30px;
    font-weight: 600;
    position: relative;
    padding-bottom: 15px;
}

.gallery-title:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #4CAF50;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.gallery-content {
    margin-top: 30px;
}

.content-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-section {
    margin-bottom: 40px;
}

.section-title {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.gallery-item {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gallery-caption {
    margin-top: 10px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Dark Mode Styles */
.dark-mode .gallery-title {
    color: #fff;
}

.dark-mode .content-box {
    background-color: #2d3436;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .section-title {
    color: #4ade80;
}

.dark-mode .gallery-caption {
    color: #ddd;
}

.dark-mode .gallery-item img {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .gallery-grid {
        gap: 15px;
    }

    .content-box {
        padding: 20px;
    }

    .section-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        gap: 10px;
    }

    .content-box {
        padding: 15px;
    }

    .gallery-caption {
        font-size: 12px;
    }
}

/* Feature Column Layout Fix */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
    width: 100%;
}

.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 15px;
    display: flex;
    justify-content: center;
}

.feature-column {
    width: 100%;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    transition: all 0.3s ease;
}

/* Responsive fixes for feature columns */
@media (max-width: 991px) {
    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .feature-column {
        margin: 5px 0;
    }
}

/* Old Educational Resources Section Styles Removed (Duplicate) */

/* Dark mode styles for educational resources */
.dark-mode .educational-resources {
    background-color: #1a1a1a;
    color: #fff;
}

.dark-mode .educational-resources h2 {
    color: #4ade80;
}

.dark-mode .educational-resources h2:after {
    background-color: #4ade80;
}

.dark-mode .resource-box {
    background-color: #2d2d2d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .resource-box:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .resource-box h3 {
    color: #4ade80;
    border-bottom-color: #4a5568;
}

.dark-mode .resource-box ul li a {
    color: #e2e8f0;
}

.dark-mode .resource-box ul li a:hover {
    color: #4ade80;
}

/* Ensure columns inherit dark background */
.dark-mode .box>.row>[class*='col-'] {
    background-color: inherit;
    /* Inherit from .box */
}

/* Responsive styles for educational resources */
@media (max-width: 768px) {
    .educational-resources {
        padding: 20px 0;
    }

    .educational-resources h2 {
        font-size: 2rem;
    }

    .resource-box {
        margin-bottom: 15px;
    }

    .resource-box h3 {
        font-size: 1.3rem;
    }

    .resource-box ul li a {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .educational-resources h2 {
        font-size: 1.75rem;
    }

    .resource-box {
        padding: 15px;
    }
}

/* Resource Section Styles */
.resource-section {
    margin-bottom: 50px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.resource-section h3 {
    color: #2c5282;
    font-size: 2rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.resource-section h4 {
    color: #2c5282;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.resource-section .resource-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.resource-section .resource-box ul {
    flex-grow: 1;
}

.resource-section .resource-box ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.resource-section .resource-box ul li a:hover {
    background-color: rgba(44, 82, 130, 0.1);
    transform: translateX(5px);
}

/* Dark mode styles for resource sections */
.dark-mode .resource-section {
    background-color: rgba(0, 0, 0, 0.2);
}

.dark-mode .resource-section h3 {
    color: #4ade80;
    border-bottom-color: #4a5568;
}

.dark-mode .resource-section h4 {
    color: #4ade80;
}

.dark-mode .resource-section .resource-box ul li a {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .resource-section .resource-box ul li a:hover {
    background-color: rgba(74, 222, 128, 0.1);
}

/* Responsive styles for resource sections */
@media (max-width: 768px) {
    .resource-section {
        padding: 15px;
        margin-bottom: 30px;
    }

    .resource-section h3 {
        font-size: 1.75rem;
        margin-bottom: 20px;
    }

    .resource-section h4 {
        font-size: 1.2rem;
    }

    .resource-section .resource-box ul li a {
        padding: 8px 12px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .resource-section h3 {
        font-size: 1.5rem;
    }

    .resource-section .resource-box {
        margin-bottom: 20px;
    }
}

/* Special Navigation Styles */
.jee-link {
    background: linear-gradient(45deg, #2563eb, #1d4ed8);
    border-radius: 4px;
    margin: 0 2px;
}

.neet-link {
    background: linear-gradient(45deg, #059669, #047857);
    border-radius: 4px;
    margin: 0 2px;
}

.study-hub-link {
    background: linear-gradient(45deg, #7c3aed, #6d28d9);
    border-radius: 4px;
    margin: 0 2px;
}

.jee-link:hover,
.neet-link:hover,
.study-hub-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Resource Box Enhancements */
.resource-box.jee-resource {
    border-left: 4px solid #2563eb;
}

.resource-box.neet-resource {
    border-left: 4px solid #059669;
}

.resource-box.study-resource {
    border-left: 4px solid #7c3aed;
}

/* Section Identifiers */
#jee-section {
    border-top: 3px solid #2563eb;
    padding-top: 30px;
}

#neet-section {
    border-top: 3px solid #059669;
    padding-top: 30px;
}

#study-section {
    border-top: 3px solid #7c3aed;
    padding-top: 30px;
}

/* Dark Mode Adjustments */
.dark-mode .jee-link {
    background: linear-gradient(45deg, #1e40af, #1e3a8a);
}

.dark-mode .neet-link {
    background: linear-gradient(45deg, #047857, #065f46);
}

.dark-mode .study-hub-link {
    background: linear-gradient(45deg, #6d28d9, #5b21b6);
}

.dark-mode .resource-box.jee-resource {
    border-left-color: #1e40af;
}

.dark-mode .resource-box.neet-resource {
    border-left-color: #047857;
}

.dark-mode .resource-box.study-resource {
    border-left-color: #6d28d9;
}

/* Enhanced Dropdown Styles */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu li a {
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.dropdown-menu li a:hover {
    padding-left: 25px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {

    .jee-link,
    .neet-link,
    .study-hub-link {
        margin: 5px 0;
    }

    .dropdown-menu {
        animation: none;
    }

    .resource-box {
        margin-bottom: 15px;
    }
}

/* Special Navigation Styles */
.mnnhs-link {
    background: linear-gradient(45deg, #FF6B6B, #FF8E53);
    border-radius: 4px;
    margin: 0 2px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.all-students-link {
    background: linear-gradient(45deg, #4CAF50, #45B649);
    border-radius: 4px;
    margin: 0 2px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.study-hub-link {
    background: linear-gradient(45deg, #7c3aed, #6d28d9);
    border-radius: 4px;
    margin: 0 2px;
    font-weight: bold;
}

.games-hub-link {
    background: linear-gradient(45deg, #2193b0, #6dd5ed);
    border-radius: 4px;
    margin: 0 2px;
    font-weight: bold;
}

.mnnhs-link:hover,
.all-students-link:hover,
.study-hub-link:hover .games-hub-link {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Adjustments */
.dark-mode .mnnhs-link {
    background: linear-gradient(45deg, #E64A4A, #E67E3D);
}

.dark-mode .all-students-link {
    background: linear-gradient(45deg, #388E3C, #357A38);
}

.dark-mode .study-hub-link {
    background: linear-gradient(45deg, #6d28d9, #5b21b6);
}

.dark-mode .games-hub-link {
    background: linear-gradient(45deg, #2193b0, #59b2c6);
}

/* Enhanced Dropdown Styles */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease;
    border-radius: 8px;
    padding: 10px 0;
}

.dropdown-menu li a {
    padding: 12px 25px;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #333;
    position: relative;
}

.dropdown-menu li a:hover {
    padding-left: 30px;
    background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .dropdown-menu li a {
    color: #fff;
}

.dark-mode .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {

    .mnnhs-link,
    .all-students-link,
    .study-hub-link .games-hub-link {
        margin: 5px 0;
        border-radius: 0;
    }

    .dropdown-menu {
        border-radius: 0;
        box-shadow: none;
    }

    .dropdown-menu li a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .dark-mode .dropdown-menu li a {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}

/* Simple Header Styles */
.simple-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.home-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(45deg, #FF6B6B, #FF8E53);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.home-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.home-button .glyphicon {
    font-size: 16px;
}

/* Dark mode styles for simple header */
.dark-mode .simple-header {
    background-color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .home-button {
    background: linear-gradient(45deg, #E64A4A, #E67E3D);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .simple-header {
        padding: 10px 15px;
    }

    .home-button {
        padding: 6px 12px;
        font-size: 14px;
    }
}

/* Navigation Menu Improvements */
.StaticMenuStyleMainMenu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}

.StaticMenuItemStyleMainMenu {
    padding: 12px 20px;
    font-size: 14px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Menu Link Styles */
.mnnhs-link,
.study-hub-link,
.games-hub-link,
.all-students-link,
.quick-links-link {
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 13px;
}

.quick-links-link {
    background: linear-gradient(45deg, #3B82F6, #2563EB);
}

.dark-mode .quick-links-link {
    background: linear-gradient(45deg, #2563EB, #1D4ED8);
}

/* Dropdown Improvements */
.dropdown-menu {
    min-width: 220px;
    margin-top: 5px;
    border-radius: 8px;
    padding: 8px 0;
}

.dropdown-menu>li>a {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .StaticMenuStyleMainMenu {
        flex-direction: column;
        padding: 5px 0;
    }

    .mnnhs-link,
    .study-hub-link,
    .all-students-link,
    .games-hub-link,
    .quick-links-link {
        width: 100%;
        margin: 5px 0;
        text-align: left;
        border-radius: 4px;
    }

    .dropdown-menu {
        width: 100%;
        margin-top: 0;
        border-radius: 4px;
    }
}

.dark-mode .educational-resources {
    background-color: #1a1a1a;
    color: #fff;
}

.dark-mode .box {
    background-color: #1a1a1a;
}

.dark-mode .container {
    background-color: #1a1a1a !important;
}

/* Adjust banner spacing */
.col-lg-12[style*="banner.png"] {
    margin-top: 20px;
    /* Add some space between nav and banner */
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .navbar-collapse {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }

    .StaticMenuStyleMainMenu {
        flex-direction: column;
    }
}

/* Style the header menu */
.headermenu {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    /* High z-index to keep it above other content */
    background-color: #000000;
    /* Black background */
}

.StaticMenuStyleMainMenu {
    margin: 0;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .StaticMenuStyleMainMenu {
        flex-direction: column;
    }
}

h2 {
    color: #0b0909;
}

.dark-mode h2 {
    color: #ffffff;
}

/* Style for the school heading */
.about-school-heading {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    text-align: center;
    padding: 15px 0;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 2px solid #8929F7;
}

.dark-mode .about-school-heading {
    background-color: transparent;
    color: #ffffff;
    border-left: 5px solid #3a86ff;
    border-bottom-color: #a064f7;
}

/* Custom contrast mode override */
body.high-contrast .about-school-heading {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-left: 5px solid #ffff00 !important;
}

body.high-contrast.theme-custom .about-school-heading {
    background-color: var(--contrast-bg) !important;
    color: var(--contrast-text) !important;
    border-left: 5px solid var(--contrast-link) !important;
}

/* Adjustments for the News & Announcements section */
.train-announcements {
    background-color: #fff;
    color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 30px;
    height: 300px;
    overflow: hidden;
}

.dark-mode .train-announcements {
    background-color: #1a1a1a;
    color: #e0e0e0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.train-announcements h3 {
    text-align: center;
    border-bottom: 2px solid #8929F7;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}


.train-marquee p {
    padding: 10px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 3px solid #8929F7;
    transform: translateY(100%);
    opacity: 0;
    position: absolute;
    width: 90%;
    left: 5%;
    transition: all 0.5s ease;
}

/* Animation for the train-like effect */
.train-marquee p:nth-child(1) {
    animation: trainMarquee 36s linear 0s infinite;
}

.train-marquee p:nth-child(2) {
    animation: trainMarquee 36s linear 6s infinite;
}

.train-marquee p:nth-child(3) {
    animation: trainMarquee 36s linear 12s infinite;
}

.train-marquee p:nth-child(4) {
    animation: trainMarquee 36s linear 18s infinite;
}

.train-marquee p:nth-child(5) {
    animation: trainMarquee 36s linear 24s infinite;
}

.train-marquee p:nth-child(6) {
    animation: trainMarquee 36s linear 30s infinite;
}

@keyframes trainMarquee {

    0%,
    2% {
        transform: translateY(100%);
        opacity: 0;
    }

    5%,
    15% {
        transform: translateY(0);
        opacity: 1;
    }

    18%,
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.dark-mode .train-marquee p {
    background-color: #222;
    border-left-color: #a064f7;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .train-announcements {
        height: 250px;
    }

    .train-marquee {
        height: 180px;
    }
}

@media screen and (max-width: 480px) {
    .news-announcements {
        height: 220px;
        padding: 10px;
    }

    .train-marquee {
        height: 160px;
    }

    .train-marquee p {
        font-size: 13px;
        padding: 8px;
    }
}

.school-banner-container {
    width: 100%;
    max-height: 300px;
    display: flex;
    justify-content: center;
    overflow: hidden;

}

.school-banner-container img {
    width: 100%;
    /* Make the image take up the full width of the container */
    height: auto;
    /* Adjust height automatically */
    /* Maintain aspect ratio without cropping */
    object-fit: contain;
}

/* Courses Section Styles */
.courses-section {
    padding: 40px 0;
    margin: 20px 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.courses-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    padding: 20px;
}

.course-category {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.course-category h4 {
    color: #2c5282;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.course-category ul {
    list-style: none;
    padding: 0;
}

.course-category ul li {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.course-category ul li:last-child {
    border-bottom: none;
}

/* Location Section Styles */
.location-section {
    padding: 40px 0;
    margin: 20px 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.location-wrapper {
    padding-left: 28px;
}

.address-details {
    text-align: center;
    margin-bottom: 30px;
}

.address-details h4 {
    color: #2c5282;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.dark-mode .address-details h4 {
    color: #a064f7;
    border-bottom-color: #444;
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Faculty Section Styles */
.faculty-section {
    padding: 40px 0;
    margin: 20px 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faculty-wrapper {
    padding: 20px;
    text-align: center;
}

.faculty-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
}

.faculty-wrapper ul li {
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 25px;
    line-height: 1.6;
}

.faculty-wrapper ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2c5282;
}

.dark-mode .faculty-wrapper ul li:before {
    color: #a064f7;
}

.faculty-cta {
    margin-top: 30px;
}

.faculty-cta .btn-primary {
    background-color: #2c5282;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.faculty-cta .btn-primary:hover,
.faculty-cta .btn-primary:focus {
    border-color: #6909D7;
    background-color: #1a365d;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(137, 41, 247, 0.3);

}

.dark-mode .faculty-cta .btn-primary {
    background-color: #a064f7;
    border-color: #8929F7;
}

.dark-mode .faculty-cta .btn-primary:hover,
.dark-mode .faculty-cta .btn-primary:focus {
    background-color: #8929F7;
    border-color: #7919E7;
    box-shadow: 0 4px 8px rgba(160, 100, 247, 0.4);
}

/* Accessibility Section Styles */
.accessibility-section {
    padding: 40px 0;
    margin: 20px 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accessibility-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    padding: 20px;
}

.accessibility-features,
.campus-accessibility {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accessibility-features h4,
.campus-accessibility h4 {
    color: #2c5282;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.accessibility-features ul,
.campus-accessibility ul {
    list-style: none;
    padding: 0;
}

.accessibility-features ul li,
.campus-accessibility ul li {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.accessibility-features ul li:last-child,
.campus-accessibility ul li:last-child {
    border-bottom: none;
}

/* Dark Mode Styles */
.dark-mode .courses-section,
.dark-mode .location-section,
.dark-mode .faculty-section,
.dark-mode .accessibility-section {
    background-color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

.dark-mode .course-category,
.dark-mode .accessibility-features,
.dark-mode .campus-accessibility {
    background-color: #2d2d2d;
    border-color: #404040;
}

.dark-mode .course-category h4,
.dark-mode .address-details h4,
.dark-mode .accessibility-features h4,
.dark-mode .campus-accessibility h4 {
    color: #4ade80;
    border-bottom-color: #404040;
}

.dark-mode .course-category ul li,
.dark-mode .accessibility-features ul li,
.dark-mode .campus-accessibility ul li {
    border-bottom-color: #404040;
}

.dark-mode .faculty-wrapper ul li {
    border-bottom-color: #404040;
}

.dark-mode .faculty-wrapper ul li:before {
    color: #4ade80;
}

.dark-mode .faculty-cta .btn-primary {
    background-color: #4ade80;
    color: #000000;
}

.dark-mode .faculty-cta .btn-primary:hover {
    background-color: #22c55e;
}

/* Responsive Styles */
@media (max-width: 768px) {

    .courses-wrapper,
    .accessibility-wrapper {
        flex-direction: column;
    }

    .course-category,
    .accessibility-features,
    .campus-accessibility {
        min-width: 100%;
    }

    .faculty-wrapper ul {
        padding: 0 15px;
    }

    .map-container iframe {
        height: 250px;
    }
}

@media (max-width: 480px) {

    .courses-section,
    .location-section,
    .faculty-section,
    .accessibility-section {
        padding: 20px 0;
    }

    .course-category,
    .accessibility-features,
    .campus-accessibility {
        padding: 15px;
    }

    .faculty-wrapper ul li {
        font-size: 14px;
    }
}

/* Accessibility Floating Button & Panel Styles */
.accessibility-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.accessibility-floating-btn button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2c5282;
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accessibility-floating-btn button:hover {
    background-color: #1a365d;
    transform: scale(1.1);
}

.accessibility-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.accessibility-panel.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.accessibility-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #2c5282;
    color: white;
    flex-shrink: 0;
}

.accessibility-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.accessibility-panel-content {
    padding: 15px 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.accessibility-option {
    margin-bottom: 20px;
}

.accessibility-option h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.accessibility-option p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.text-size-controls,
.contrast-controls,
.reading-guide-controls,
.focus-highlight-controls,
.links-underline-controls {
    display: flex;
    gap: 10px;
}

.accessibility-option button {
    padding: 8px 12px;
    border: none;
    background-color: #e2e8f0;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    flex: 1;
    transition: all 0.2s ease;
}

.accessibility-option button:hover {
    background-color: #cbd5e0;
}

/* Reading Guide Styles */
#readingGuide {
    position: absolute;
    width: 100%;
    height: 14px;
    /* Increased to 10px as requested */
    background-color: rgba(255, 255, 150, 0.5);
    /* Light yellow color */
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    /* Lighter border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 9990;
    display: none;
    box-shadow: 0 0 8px rgba(255, 255, 150, 0.5);
    /* Matching glow effect */
}

/* High contrast mode reading guide */
body.high-contrast #readingGuide {
    background-color: rgba(255, 255, 0, 0.8) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.9) !important;
}

/* Dark mode reading guide */
.dark-mode #readingGuide {
    background-color: rgba(255, 255, 150, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

/* High Contrast Mode */
body.high-contrast {
    color: #ffffff !important;
    background-color: #000000 !important;
}

body.high-contrast .box,
body.high-contrast .navbar,
body.high-contrast .headermenu,
body.high-contrast .container,
body.high-contrast .accessibility-panel,
body.high-contrast .course-category,
body.high-contrast .accessibility-features,
body.high-contrast .campus-accessibility,
body.high-contrast .faculty-wrapper,
body.high-contrast .location-wrapper,
body.high-contrast .resource-box,
body.high-contrast .faculty-section,
body.high-contrast .courses-section,
body.high-contrast .location-section,
body.high-contrast .accessibility-section,
body.high-contrast .educational-resources,
body.high-contrast .aboutschool,
body.high-contrast .banner-container,
body.high-contrast .weather-widget-container,
body.high-contrast header,
body.high-contrast footer,
body.high-contrast section,
body.high-contrast article,
body.high-contrast aside,
body.high-contrast div[class*="wrapper"],
body.high-contrast div[class*="section"],
body.high-contrast .panel,
body.high-contrast .event-date,
body.high-contrast .social-media-icons,
body.high-contrast .social-post,
body.high-contrast .top-branding-bar,
body.high-contrast .ff-form,
body.high-contrast .ff-compose,
body.high-contrast .modern-contact-form,
body.high-contrast .chatbot-input,
body.high-contrast .suggestion-button,
body.high-contrast .card {

    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

body.high-contrast a,
body.high-contrast button,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
    color: #ffff00 !important;
}

body.high-contrast img {
    filter: grayscale(100%) contrast(120%);
}

body.high-contrast .feature-column,
body.high-contrast .dropdown-menu,
body.high-contrast .navbar-default {
    background-color: #000000 !important;
    background-image: none !important;
    border: 1px solid #ffffff;
}

/* Fix navigation buttons in high contrast */
body.high-contrast .StaticMenuItemStyleMainMenu,
body.high-contrast .popout,
body.high-contrast [class*="level1"],
body.high-contrast [class*="level2"],
body.high-contrast .nav>li>a,
body.high-contrast .navbar-nav>li>a {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffff00 !important;
    border: 1px solid #ffffff !important;
}

body.high-contrast .dropdown-menu>li>a {
    color: #ffff00 !important;
}

body.high-contrast .dropdown-menu>li>a:hover {
    background-color: #333333 !important;
}

/* ============================================
   COMPREHENSIVE HIGH CONTRAST MODE FIXES
   Ensures ALL elements respond to contrast mode
   ============================================ */

/* Body background override - CRITICAL */
body.high-contrast {
    background-image: none !important;
}

/* Tour gallery, achievements, alumni, testimonials, social sections */
body.high-contrast .tour-gallery,
body.high-contrast .achievements-carousel,
body.high-contrast .achievement-card,
body.high-contrast .alumni-card,
body.high-contrast .testimonials-wrapper,
body.high-contrast .social-media-wrapper,
body.high-contrast .social-icons,
body.high-contrast .chatbot-suggestions,
body.high-contrast .message-content,
body.high-contrast .chatbot-container,
body.high-contrast .chatbot-messages,
body.high-contrast .chatbot-input-container,
body.high-contrast .chat-message,
body.high-contrast .bot-message,
body.high-contrast .user-message,
body.high-contrast .carousel-item,
body.high-contrast .carousel-caption,
body.high-contrast .slider-container,
body.high-contrast .gallery-item,
body.high-contrast .gallery-wrapper,
body.high-contrast .photo-gallery,
body.high-contrast .image-gallery,
body.high-contrast .testimonial-card,
body.high-contrast .alumni-section,
body.high-contrast .achievement-section,
body.high-contrast .footer-section,
body.high-contrast .newsletter-section,
body.high-contrast .marquee-container,
body.high-contrast .train-marquee,
body.high-contrast .announcement-bar,
body.high-contrast .news-section,
body.high-contrast .news-card,
body.high-contrast .event-card,
body.high-contrast .modal-content,
body.high-contrast .modal-header,
body.high-contrast .modal-body,
body.high-contrast .modal-footer,
body.high-contrast .popup,
body.high-contrast .tooltip,
body.high-contrast .dropdown,
body.high-contrast .tab-content,
body.high-contrast .nav-tabs,
body.high-contrast .breadcrumb,
body.high-contrast .pagination,
body.high-contrast .alert,
body.high-contrast .badge,
body.high-contrast .label,
body.high-contrast .well,
body.high-contrast .jumbotron,
body.high-contrast table,
body.high-contrast thead,
body.high-contrast tbody,
body.high-contrast tr,
body.high-contrast td,
body.high-contrast th,
body.high-contrast form,
body.high-contrast fieldset,
body.high-contrast legend,
body.high-contrast .form-group,
body.high-contrast .form-control,
body.high-contrast .input-group,
body.high-contrast .btn,
body.high-contrast .btn-group,
body.high-contrast nav,
body.high-contrast main,
body.high-contrast [class*="box"],
body.high-contrast [class*="card"],
body.high-contrast [class*="item"],
body.high-contrast [class*="content"],
body.high-contrast [class*="container"],
body.high-contrast [class*="panel"],
body.high-contrast [class*="block"],
body.high-contrast [class*="module"],
body.high-contrast [class*="widget"],
body.high-contrast [class*="area"],
body.high-contrast [class*="region"],
body.high-contrast [class*="zone"],
body.high-contrast [class*="sidebar"],
body.high-contrast [class*="header"],
body.high-contrast [class*="footer"],
body.high-contrast [class*="main"],
body.high-contrast [class*="body"],
body.high-contrast [class*="list"],
body.high-contrast [class*="grid"],
body.high-contrast [class*="row"],
body.high-contrast [class*="col-"] {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Event date spans and similar inline elements */
body.high-contrast .event-date,
body.high-contrast .date,
body.high-contrast .time,
body.high-contrast .timestamp,
body.high-contrast span[class*="date"],
body.high-contrast span[class*="time"],
body.high-contrast .meta,
body.high-contrast .info,
body.high-contrast .caption,
body.high-contrast .subtitle,
body.high-contrast .excerpt,
body.high-contrast .description,
body.high-contrast p,
body.high-contrast span,
body.high-contrast li,
body.high-contrast label,
body.high-contrast small,
body.high-contrast strong,
body.high-contrast em,
body.high-contrast i:not(.fa):not([class*="icon"]) {
    color: #ffffff !important;
}

/* Ensure links and interactive elements stay yellow */
body.high-contrast a,
body.high-contrast button:not(.toggle-slider):not([class*="toggle"]),
body.high-contrast .link,
body.high-contrast [role="button"],
body.high-contrast [role="link"],
body.high-contrast .nav-link,
body.high-contrast .menu-item a,
body.high-contrast .clickable,
body.high-contrast .cta,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast .title,
body.high-contrast .heading,
body.high-contrast [class*="title"],
body.high-contrast [class*="heading"] {
    color: #ffff00 !important;
}

/* Input fields and forms */
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select,
body.high-contrast option {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: #aaaaaa !important;
}

/* Ensure sliders in accessibility panel don't get affected too much */
body.high-contrast .accessibility-panel input[type="range"] {
    background: #333 !important;
}

/* Chatbot specific styling */
body.high-contrast .chatbot-toggle,
body.high-contrast .chatbot-header {
    background-color: #000000 !important;
    background-image: none !important;
    border: 2px solid #ffff00 !important;
}

body.high-contrast .suggestion-chip,
body.high-contrast .chat-suggestion {
    background-color: #333333 !important;
    color: #ffff00 !important;
    border: 1px solid #ffff00 !important;
}

/* Focus Highlight */
body.focus-highlight a:focus,
body.focus-highlight button:focus,
body.focus-highlight input:focus,
body.focus-highlight select:focus,
body.focus-highlight textarea:focus {
    outline: 4px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Links Underline */
body.links-underlined a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    color: #ff0000 !important;
    /* Make all underlined links red */
}

/* Dark mode links underline */
.dark-mode body.links-underlined a {
    color: #ff5555 !important;
    /* Lighter red for dark mode */
}

/* Dark mode support for accessibility panel */
.dark-mode .accessibility-panel {
    background-color: #1a1a1a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.dark-mode .accessibility-panel-header {
    background-color: #1a365d;
}

.dark-mode .accessibility-option h4 {
    color: #e2e8f0;
}

.dark-mode .accessibility-option p {
    color: #a0aec0;
}

.dark-mode .accessibility-option button {
    background-color: #2d3748;
    color: #e2e8f0;
}

.dark-mode .accessibility-option button:hover {
    background-color: #4a5568;
}

/* Mobile responsiveness for accessibility panel */
@media (max-width: 768px) {
    .accessibility-panel {
        width: 280px;
    }

    .accessibility-floating-btn {
        bottom: 15px;
        right: 15px;
    }

    .accessibility-floating-btn button {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .text-size-controls,
    .contrast-controls,
    .reading-guide-controls,
    .focus-highlight-controls,
    .links-underline-controls {
        flex-direction: column;
    }

    .accessibility-option button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .accessibility-panel {
        right: 10px;
        bottom: 70px;
        width: 250px;
    }

    .accessibility-panel-header h3 {
        font-size: 16px;
    }

    .accessibility-option h4 {
        font-size: 14px;
    }

    .accessibility-option button {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Accessibility new features */

/* Dyslexia Font */
body.dyslexia-font {
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 500;
}

body.dyslexia-font p,
body.dyslexia-font li,
body.dyslexia-font h1,
body.dyslexia-font h2,
body.dyslexia-font h3,
body.dyslexia-font h4,
body.dyslexia-font h5,
body.dyslexia-font h6 {
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 500;
}

.dark-mode.dyslexia-font {
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 500;
}

/* Large Cursor */
body.large-cursor,
body.large-cursor * {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERCMUIwQTM0NzIzMTFFNzk2QzRDMUIxRjMzNDYxQTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERCMUIwQTQ0NzIzMTFFNzk2QzRDMUIxRjMzNDYxQTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERDBBNDkzRjQ3MjMxMUU3OTZDNEMPQ8QWERJMU,iIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RERCMUIwQTI0NzIzMTFFNzk2QzRDMUIxRjMzNDYxQTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Y01+zAAAMYklEQVR42qRXCWxU1xn+37vv2XMwq8H2GGMYM8YQY2yDgmNagVtRkARSUKMSgtgSpSVoVaiqFWlaRFlaJWlJ0jZkQQQlSaGFuAouBQxxAGL2GHvGCzbYnvF4xrO/9+537z1n5o0HYyxVS47e3Hvnzv2/833nP+e+IeLfnEq1Wp2u0+mmGQyGmVartcJkMk1LTk7Osng8FrvNZtTrdQa1RqNFDMNQNHV0osFojO6gaY9IJIJCoZCPZVm/3+frDwQCPT6fr6Wzs/OMx+Op93q9p81msy8ajfaGQqFriqIko52Ojo52CwQCd1yQiPLy8t/k5OT8ICcnp9hut1vUoFA4HA3LDJ3n+UF9jFbjQtF4QsEBeLHxXsrBn0gkgq5du9Z/5syZC21tbW9ptdqdPp+vr7+/v7Grq+vc+Z8cOcR9n5yiVqmWELSapgmCx+Jut5s9evTobrvd/rjT6UxTUZHh4eFwe3t7pLm5WRkcHJx+4JlniBXLlztqNm0qqli40JiamvqA0NrS0jJcV1fX/tZbb7UFQ+Gurq6uzz7++OPPjh079nFDQ8NnDQ0NXwwNDXURBNFM0XvdRNeugaqq7cRjjz22NTMzs0ij0bhcLlf0+vXr/OXLl9H58+e9TU1NfYIgDAYCgUBvb6//+PHj6GpDA3G9+SqqnL+YeO7ZXz1atnChpbCwMLmmpsZaVla2mmXZ9XPmzJm1devWilmzZjlLSkryZs+ePc3lcrlnzZr1iNFoLIleN3X7g9OMRmMwOzubvXjxYuTUqVOBgwcPent6ejRtbW0dx44d6//444+HCwoKtIcOHeI/+OCDa/39/dLOnTtLKyoqVFOmTLFkZGTQA4ODZGNjY2TRokUpBw4cKK6trV2xYsWKqrq6urUVFRVzc3JyLNOnTzcsXbrUe+LEiYG+vr7LEkc/EoZaJVGMQmlpaS7Lsrjj5P79+wf6+vrQ5cuXI3v27BncunXrtYaGhq4ZM2aYOI7jWltbL544ccLz6quvLiktLTVr1Coqzevh3bt3tS1evHhhRkZGYUFBQWpOTo4hNTWVKCkpoZubmweHhoacoVCoi1Cr1Hm4k0QnVwGKorC4+YO/vx/19PSgxsZGYceOHQM7duzwNDc3R9avX0/xPE8cP36c2bx58/w33niD3rdvn9Tr90c3bNig6u7uRvv27aurra2dP2/ePEdBQYE2Pz+fKSwsVOXm5lLp6emWYDA4g4wkWUwIJhoMBgoDFPAQ7OvrC+0/eNDn8XiCBw8eTJ47d66hpqYm7+OPP7afPHnSVVxc7Ni2bVsxx3E0VgrZ2toaeeutt2qrq6vnVldXp5eWlpry8/ONTqeTSktLIwsKCmYZDIbFt9V1KyBKUvzBCVQxMK+vr8/7/vvvDx06dMj34osvluIJRHNzczg5OVldWVlJd3Z2CkwkKr7yp79c3Lt379tVVVU/LC8vn1NWVjalpKTEVFhYqBofUwUGg8MkJnxjUiUJJ7A0bdHpdAUYSFVUVDgqKyuTm5qard3dPa76+vqU06dPF7355pt6p9NpqqqqIsxmM4lxcjgcZHFxMRWhkCMrK8s+d+7c7Ntg6kgkolGr1RriYcD4lQAjSQJCZWlptDQtLc10+/btkbfeeqvhzTffjDQ0NHg++OADsqWlJbx27Vrj1atXxYaGht7m5mb/iBiJxLDikJDL5Zp8/fp1r9/vZ9DYSjv24QGlX+yjdRlZtiVCWEzOnz9vfu655woOHz5csXLlytJt27ZlrV+//tF169ZZpk6dihVMhJYtW0YtWLCAys7OVi1ZsgS1trYObNiwwXPixAmqs7MzRNO0RlEUZnTLcSEKI6JWxRNRyZJkIAlipLqqKsNisWjLysqm4pKaFhcX61taWvnly5crS5cuTX3ppZecO3fu1NXU1Ni3bNmSvmrVqhRcdsO4jETWrFnDRiLCSDgsjM3kXYGI0t+UmFgs9uCo2mW4r2i32xW9XkeVl5dnz5gxI/XKlStnT506pautrTW/8sor02bOnGnet2+f/fvf/77j2WefzcA5IQsKCoxYPSRWTMHzvGAwGPiRkRHhXsADAkQc+DEa9ZhgBK0Ty5OWlmYoKipKwmJEq6qqMnDrpa1bt9refvtt+44dO+w///nPbTikmubmZvbmzZsBQRDClZWVzI0bNzwpKSljapXuYf9gAooSd0SCLMl6nU5vIUlKm5qaSpaVlSVhXSBw/yfw6MXg8yAGNgwODgqhUEiZOXOmtaysTFFRFF9TUxOLO2GDw+HQYUZcAZ4nCHKMgvsZ+G4CY+8VRUoFINVqtIzT6ZyGR24+FpXuypUr7R0dHeHjx4/7cRITWNYq7AQ1Tqz1559/3oxVE8vPz9dgLNJut9OjOsA/CAD3ChCJxXJlaVYfDkfNuDhQd+7ciXz22WfuL7/8cvDEiRNDnZ2dEbPZ7Lx27Rpvs9mUqqoqHh9qTGazmbarezw8LCEVUDjQ4/HZwn09SbgfgKxWCwfG70y1NfXR+OxLd66dStcXl4+gvcR3d69e8V9+/ZFnnnmGQkDCmVlZYLH40FNTQ0cLsMi9jtfURQJl134Xv3v2wGRZcWJK8v+3t7eoYsXLnhwBaLHjx/ntm/fTi9fvly3ceNGCR/PGLfbTXz11VdEIBAIv/zyy31dXV39AwMDXEtLi8gLfCwnJ0fAZz3hYXn9OgFxY2VZYVhWGvB4PPRnn33mw8HpeOiQlZWVzNq1a4m5c+dKjz/+OIHLsnT58mX02WefRXCIoaGhoQEctsDHH38cxJUA9+/fn1JdXS3gJOVHFXFMV+4QiCnK2MZKSYHE8/zw4GC3BrfVsXPnTiUlJUVVXV090NnZqWAw/OzZs1FcXJjh4WH5/PnzyoEDBwK4RPPNzc1y39AQO3fevIS1a9dKWVlZvCRJMRCNhx0F3QlBibEwUYZkWSGCAmfp7e01nD17Njg0NMTZ7XYVN4orJydHgzsPDQ4O8hzHRXCTCmOVsLgc+3EO0p955hlxzpw5XCAQiOBxXB7niSUr42LD2KGUJCkgB4OBgCDwLvx/wOl0mnBrJfAYZsBIFm/dunV4y5YtETj+YEORDAYDjff37uTkZLWiKKzP54vg96b4/lUUZdgXYI5pARkMBLqikhTwYlZ93HAPbrPg+IXCFYnG5ZrBDogY0MkQlxqDGhFqtZpls4+4HfycnLZGRBEEBU78UCKJ8gRm1FhZ5gXRDQJsT09PyOVy8TiZBFHkGaw4DzyTRBvPcUoQj2S87/PAAMb+H6+SLV0UgXcHIsmOEw6Fzrdeb79x5swZT15enmXBggXJhYWFcHHVYIPbD0XiL4p3CsRjgskB3XY1Fop8UODcISAoPL3Xfer06a9PnTrlwxiMy+nUm0xGhogP9n2Bx7RJQeADnCR6YzHe09bZeeHDd945ee7cuYGcnJzEwsLCFGgxmFfv94zfE7iny8KIzrPBkGdYEPpwQl4EAXCiqqLRWESRFVmtVHgRGIklkudjiiKDmYsWiz3p+4u40MsLi82WYDYYdBzHhXEITxjXARbDBXETOw3+AyxeLnmWkzx+fy+8Rl+RJe91eG0QkYQNEksMKTQkrYCCERAoVpLUt3lJAD+VQm0l0UaLosSyAiuzQjQSCSvAMHzEMRwVTrT9fGSiwPFJkCipCExm4+1ANOotEoQQXEbdgqIwjCjiRIL3FxoLgMRR+VghcLWmsbAMXgMejsWiQIkojPAhNmFkZEZURFmeSC3JMV6BKFGJM8eMxShqQpqgfHdxsszHG/6RM7T0qM5MPKUKkkK/3xuJRNoCGCCACQnjf9M4x9EIScCuLMQHM/D9VITyOQr7YZ4TImzwWsZYMi4QOb5KQgJLEm8QI9wXlpTbkiz6EqioyMeMsUBEYgw2IolSjBMEN7TpSCQyGAwGu+B4y3Ls0Mv37yHfZaIoUYrEuiVRuiOKkltJJPpTNAnaREqJ8SFWFHgQQYmC4EFAkRSVZ0KhcFskFruuN+idJAl0IDH+W0K+y9CtnMWoHaocaKQNohwgFFiJlSH2bFiWeYgLXEAioihGJEmEihFVEISIIIg8CIiMEPXyUukgWJnrdHoFjLvK0x88Hg8MQkQwGIQ5gf1vXoTI8YZjDMMC5xAXxgxSMQgjy7FgMBiE8wgIkHhm1SqVWsLbQbXBYICXHOH2j/xHgAEAqYPGQ0t08TYAAAAASUVORK5CYII='), auto;
}

body.large-cursor a,
body.large-cursor button {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAqCAMAAADT4dMwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFR3BM////////////////////////////F17wFwAAAAd0Uk5TAP//////AUNj/wAAAG5JREFUOMvN0UkOgCAMQFGK9v6ndeFCpWCUmLjwFy+ZgIEXlUDilLB6EoLJgHegBOlXk0A+sCVdisyEo3RteU6A3lvcaXwXKHycIALZ7HtrBx0uLgDyrkP9FkIAaIvs+o09ijWgRsC03XOtvvm5AgwA3lMDgbfYHYAAAAAASUVORK5CYII='), pointer;
}

/* Text spacing controls */
.text-spacing-controls,
.letter-spacing-controls,
.line-height-controls,
.cursor-size-controls,
.dyslexia-font-controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

body.links-underlined a {
    text-decoration: underline !important;
    color: #FF0000 !important;
    font-weight: bold;
}

.dark-mode.links-underlined a {
    color: #FF6666 !important;
}

/* Additional accessibility classes for all features */
@media (max-width: 768px) {

    .text-spacing-controls,
    .letter-spacing-controls,
    .line-height-controls,
    .cursor-size-controls,
    .dyslexia-font-controls {
        flex-direction: column;
    }

    .text-spacing-controls button,
    .letter-spacing-controls button,
    .line-height-controls button,
    .cursor-size-controls button,
    .dyslexia-font-controls button {
        margin-bottom: 5px;
        width: 100%;
    }
}

/* Toggle Switch for Accessibility */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    /* Reduced width */
    height: 16px;
    /* Reduced height */
    min-width: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 16px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    /* Reduced knob size */
    width: 12px;
    /* Reduced knob size */
    left: 2px;
    /* Adjusted position */
    bottom: 2px;
    /* Adjusted position */
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: #4a90e2;
}

input:focus+.toggle-slider {
    box-shadow: 0 0 1px #4a90e2;
}

input:checked+.toggle-slider:before {
    transform: translateX(14px);
}

/* About School Heading */
.about-school-heading {
    background-color: #f0f0f0;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    border-left: 5px solid #3a86ff;
}

.dark-mode .about-school-heading {
    background-color: transparent;
    color: #ffffff;
    border-left: 5px solid #3a86ff;
}

/* Custom contrast mode override */
body.high-contrast .about-school-heading {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-left: 5px solid #ffff00 !important;
}

body.high-contrast.theme-custom .about-school-heading {
    background-color: transparent !important;
}

/* High contrast image fixes */
body.high-contrast img,
body.high-contrast svg,
body.high-contrast .icon,
body.high-contrast [class*="icon-"] {
    filter: none !important;
    border: 1px solid #ffffff;
}

body.high-contrast.theme-custom img,
body.high-contrast.theme-custom svg,
body.high-contrast.theme-custom .icon,
body.high-contrast.theme-custom [class*="icon-"] {
    border-color: var(--contrast-text, #ffffff);
}

body.high-contrast.dark-mode img,
body.high-contrast.dark-mode svg,
body.high-contrast.dark-mode .icon,
body.high-contrast.dark-mode [class*="icon-"] {
    filter: none !important;
    border: 1px solid #ffffff;
}

/* Modern Announcement Bar */
.announcement-bar {
    width: 100%;
    background-color: #ffe082;
    /* Light yellow background */
    color: #4e342e;
    /* Dark brown text */
    padding: 10px 0;
    overflow: hidden;
    /* Crucial: prevent overflow */
    white-space: nowrap;
    /* Keep inner spans on one line */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Optional: if needed for other effects */
}

.announcement-text {
    display: inline-block;
    /* Allow animation */
    padding-left: 100%;
    /* Start off-screen */
    animation: scrollText 30s linear infinite;
    /* Adjust duration as needed */
}

.announcement-text span {
    display: inline-block;
    /* Treat each announcement as a block */
    margin-right: 50px;
    /* Space between announcements */
    font-size: 16px;
    font-weight: bold;
}

.announcement-bar:hover .announcement-text {
    animation-play-state: paused;
    /* Pause on hover */
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Scroll text across the container width + its own width */
        /* This needs adjustment based on content length */
        transform: translateX(-100%);
    }
}

/* Dark Mode Announcement Bar */
.dark-mode .announcement-bar {
    background-color: #3a3a3a;
    /* Dark background */
    color: #f0e68c;
    /* Khaki text */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}

/* Remove old conflicting styles if any */
/* .announcement-content { ... } */
/* @keyframes scrollText { ... } (if different previously) */

@media screen and (max-width: 768px) {
    .announcement-text span {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .announcement-bar {
        padding: 10px 0;
    }

    .announcement-text span {
        font-size: 12px;
    }
}

/* Train-like marquee animation override */
.train-marquee {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.train-marquee p {
    padding: 10px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 3px solid #8929F7;
    transform: translateY(100%);
    opacity: 0;
    position: absolute;
    width: 90%;
    left: 5%;
    animation: none;
    /* Override any other animations */
}

.train-marquee p:nth-child(1) {
    animation: trainMarquee 30s linear 0s infinite !important;
}

.train-marquee p:nth-child(2) {
    animation: trainMarquee 30s linear 5s infinite !important;
}

.train-marquee p:nth-child(3) {
    animation: trainMarquee 30s linear 10s infinite !important;
}

.train-marquee p:nth-child(4) {
    animation: trainMarquee 30s linear 15s infinite !important;
}

.train-marquee p:nth-child(5) {
    animation: trainMarquee 30s linear 20s infinite !important;
}

.train-marquee p:nth-child(6) {
    animation: trainMarquee 30s linear 25s infinite !important;
}

@keyframes trainMarquee {

    0%,
    2% {
        transform: translateY(100%);
        opacity: 0;
    }

    5%,
    15% {
        transform: translateY(0);
        opacity: 1;
    }

    18%,
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.dark-mode .train-marquee p {
    background-color: #222;
    border-left-color: #a064f7;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .train-marquee {
        height: 180px;
    }
}

@media screen and (max-width: 480px) {
    .train-marquee {
        height: 160px;
    }

    .train-marquee p {
        font-size: 13px;
        padding: 8px;
    }
}

/* Fix for striped tables in dark mode */
.dark-mode .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
    /* Use a subtle dark shade */
}

/* Responsive styles for educational resources */
@media (max-width: 768px) {
    .educational-resources {
        padding: 20px 0;
    }

    .educational-resources h2 {
        font-size: 2rem;
    }

    .resource-box {
        margin-bottom: 15px;
    }

    .resource-box h3 {
        font-size: 1.3rem;
    }

    .resource-box ul li a {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .educational-resources h2 {
        font-size: 1.75rem;
    }

    .resource-box {
        padding: 15px;
    }
}

/* Enhanced Footer Styles with More Features */
.site-footer {
    background-color: #f8f9fa;
    color: #6c757d;
    padding: 40px 20px 20px;
    margin-top: 40px;
    font-size: 0.9em;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);
    /* Subtle shadow for depth */
    position: relative;
    /* For gradient overlay */
}

/* Optional Gradient Overlay */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
    pointer-events: none;
    /* Allow clicks to pass through */
}

.site-footer h4,
.newsletter-signup h5 {
    color: #343a40;
    margin-bottom: 20px;
    font-size: 1.1em;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    /* For accent line */
}

/* Colored accent line under headings */
.site-footer h4::after,
.newsletter-signup h5::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #8929F7;
    transition: width 0.3s ease;
}

/* Heading hover effect */
.site-footer h4:hover::after,
.newsletter-signup h5:hover::after {
    width: 70px;
}

.site-footer ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.site-footer ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    /* Space for icon */
    transition: transform 0.2s ease;
}

/* List item indicator */
.site-footer ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #8929F7;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* List item hover effect */
.site-footer ul li:hover {
    transform: translateX(3px);
}

.site-footer ul li:hover::before {
    transform: translateX(2px);
}

.site-footer a {
    color: #495057;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Link hover underline effect */
.site-footer a:hover {
    color: #8929F7;
    text-decoration: none;
}

.site-footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #8929F7;
    transition: width 0.3s ease;
}

.site-footer a:hover::after {
    width: 100%;
}

.site-footer .footer-col p {
    line-height: 1.9;
    /* Updated line height */
    margin-bottom: 10px;
    /* Added some margin for spacing */
}

.site-footer .social-icons {
    margin-bottom: 0px;
}

.site-footer .social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #495057;
    margin-right: 10px;
    margin-bottom: 0px;
    transition: all 0.3s ease;
    overflow: hidden;
    /* For hover effect */
    transform: translateY(0);
    /* For hover effect */
}

.site-footer .social-icons a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: all 0.3s ease;
}

/* Enhanced social icon hover effects */
.site-footer .social-icons a:hover {
    background-color: #8929F7;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(137, 41, 247, 0.3);
}

.site-footer .social-icons a:hover svg {
    transform: scale(1.15);
}

/* Custom social icon colors on hover */
.site-footer .social-icons a[aria-label="Facebook"]:hover {
    background-color: #4267B2;
}

.site-footer .social-icons a[aria-label="Twitter"]:hover {
    background-color: #1DA1F2;
}

.site-footer .social-icons a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.site-footer .social-icons a[aria-label="YouTube"]:hover {
    background-color: #FF0000;
}

.newsletter-signup {
    margin-top: 25px;
    position: relative;
    /* For enhanced styling */
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.newsletter-signup:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.newsletter-signup h5 {
    color: #343a40;
    margin-bottom: 15px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

/* Decorative element for newsletter heading */
.newsletter-signup h5::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #8929F7;
}

.newsletter-signup input[type="email"] {
    padding: 10px 12px;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #495057;
    border-radius: 4px;
    width: calc(100% - 105px);
    box-sizing: border-box;
    margin-right: -1px;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 transparent;
}

.newsletter-signup input[type="email"]:focus {
    border-color: #8929F7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(137, 41, 247, 0.15);
}

.newsletter-signup button {
    padding: 10px 7px;
    background-color: #8929F7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

/* Button hover effect */
.newsletter-signup button:hover {
    background-color: #6a1ebf;
    box-shadow: 0 4px 8px rgba(137, 41, 247, 0.3);
}

/* Button click effect */
.newsletter-signup button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(137, 41, 247, 0.3);
}

/* Button ripple effect */
.newsletter-signup button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.newsletter-signup button:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

.footer-divider {
    border-top: 1px solid #dee2e6;
    margin: 30px 0 20px;
    position: relative;
}

/* Decorative element on divider */
.footer-divider::before {
    content: '•';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f8f9fa;
    padding: 0 10px;
    color: #8929F7;
    font-size: 1.2em;
}

/* Footer motto with enhanced styling */
.footer-motto {
    font-size: 0.85em;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #777;
    padding: 8px 12px;
    border-left: 3px solid #8929F7;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0 4px 4px 0;
}

.copyright-text {
    margin-bottom: 8px;
    color: #6c757d;
    font-size: 0.85em;
}

.designer-credit {
    font-size: 0.75em;
    color: #adb5bd;
    margin-bottom: 15px;
}

.footer-last-updated {
    font-size: 0.7em;
    color: #adb5bd;
    margin-top: -5px;
    margin-bottom: 15px;
}

/* Enhanced footer affiliations */
.footer-affiliation {
    font-size: 0.8em;
    color: #777;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.affiliation-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 0.8em;
    color: #555;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.affiliation-logo-placeholder:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styling for the bottom row */
.site-footer .row:last-of-type {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-top: 15px;
}

/* Enhanced back to top button */
.back-to-top {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #8929F7;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.back-to-top svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.back-to-top:hover {
    background-color: #6a1ebf;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(137, 41, 247, 0.3);
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}

/* Button ripple effect */
.back-to-top::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.back-to-top:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* New feature: Quick Contact Information */
.footer-quick-contact {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    font-size: 0.85em;
}

.contact-item svg {
    width: 14px;
    height: 14px;
    fill: #8929F7;
    margin-right: 5px;
}

/* New feature: Language switcher */
.language-switcher {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 3px;
    margin-right: 15px;
}

.language-option {
    padding: 5px 8px;
    font-size: 0.75em;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.language-option.active {
    background-color: #8929F7;
    color: #fff;
}

.language-option:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* New feature: Emergency contact */
.emergency-contact {
    display: inline-flex;
    align-items: center;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 10px;
    color: #dc3545;
    font-size: 0.8em;
    font-weight: 500;
}

.emergency-contact svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    margin-right: 5px;
}

/* Dark mode styles for enhanced footer */
.dark-mode .site-footer {
    background-color: #1a1a1a;
    color: #ccc;
    border-top: 1px solid #333;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

.dark-mode .site-footer::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
}

.dark-mode .site-footer h4 {
    color: #fff;
    border-bottom-color: #333;
}

.dark-mode .site-footer h4::after {
    background-color: #9d50bb;
}

.dark-mode .site-footer ul li::before {
    color: #9d50bb;
}

.dark-mode .site-footer a {
    color: #bbb;
}

.dark-mode .site-footer a:hover {
    color: #9d50bb;
}

.dark-mode .site-footer a::after {
    background-color: #9d50bb;
}

.dark-mode .site-footer .social-icons a {
    background-color: #333;
    color: #ccc;
}

.dark-mode .site-footer .social-icons a:hover {
    background-color: #9d50bb;
    color: #fff;
    box-shadow: 0 5px 10px rgba(157, 80, 187, 0.3);
}

.dark-mode .site-footer .social-icons a[aria-label="Facebook"]:hover {
    background-color: #4267B2;
}

.dark-mode .site-footer .social-icons a[aria-label="Twitter"]:hover {
    background-color: #1DA1F2;
}

.dark-mode .site-footer .social-icons a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.dark-mode .site-footer .social-icons a[aria-label="YouTube"]:hover {
    background-color: #FF0000;
}

.dark-mode .newsletter-signup {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .newsletter-signup:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.dark-mode .newsletter-signup h5 {
    color: #fff;
}

.dark-mode .newsletter-signup h5::after {
    background-color: #9d50bb;
}

.dark-mode .newsletter-signup input[type="email"] {
    background-color: #333;
    border-color: #444;
    color: #ccc;
}

.dark-mode .newsletter-signup input[type="email"]:focus {
    border-color: #9d50bb;
    box-shadow: 0 0 0 3px rgba(157, 80, 187, 0.15);
}

.dark-mode .newsletter-signup button {
    background-color: #9d50bb;
}

.dark-mode .newsletter-signup button:hover {
    background-color: #7b3e94;
    box-shadow: 0 4px 8px rgba(157, 80, 187, 0.3);
}

.dark-mode .footer-divider {
    border-top-color: #333;
}

.dark-mode .footer-divider::before {
    background-color: #1a1a1a;
    color: #9d50bb;
}

.dark-mode .footer-motto {
    color: #aaa;
    border-left-color: #9d50bb;
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .copyright-text {
    color: #bbb;
}

.dark-mode .designer-credit {
    color: #777;
}

.dark-mode .footer-last-updated {
    color: #666;
}

.dark-mode .footer-affiliation {
    color: #888;
}

.dark-mode .affiliation-logo-placeholder {
    background-color: #333;
    border-color: #444;
    color: #ccc;
}

.dark-mode .affiliation-logo-placeholder:hover {
    background-color: #444;
}

.dark-mode .site-footer .row:last-of-type {
    border-top-color: #333;
}

.dark-mode .back-to-top {
    background-color: #9d50bb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-mode .back-to-top:hover {
    background-color: #7b3e94;
    box-shadow: 0 5px 10px rgba(157, 80, 187, 0.3);
}

.dark-mode .contact-item svg {
    fill: #9d50bb;
}

.dark-mode .language-switcher {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .language-option.active {
    background-color: #9d50bb;
}

.dark-mode .language-option:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .emergency-contact {
    background-color: rgba(220, 53, 69, 0.2);
}


.high-contrast .train-marquee p {
    background-color: black;
}

/* Responsive styling */
@media (max-width: 768px) {
    .site-footer {
        padding: 30px 15px 15px;
    }

    .site-footer .footer-col {
        margin-bottom: 10px;
    }

    .site-footer h4 {
        margin-bottom: 10px;
    }

    .footer-motto {
        padding: 5px 10px;
    }

    .site-footer .social-icons a {
        width: 35px;
        height: 35px;
        margin-right: 8px;
    }

    .site-footer .social-icons a svg {
        width: 16px;
        height: 16px;
    }

    .newsletter-signup {
        padding: 10px;
    }

    .newsletter-signup input[type="email"] {
        width: calc(100% - 55px);
    }

    .newsletter-signup button {
        width: 90px;
        font-size: 0.8em;
    }

    .site-footer .text-right {
        text-align: left;
        margin-top: 15px;
    }

    .utility-links {
        margin-bottom: 15px;
    }

    .back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        margin: 0;
        z-index: 999;
        width: 40px;
        height: 40px;
        opacity: 0.8;
    }

    .back-to-top:hover {
        opacity: 1;
    }
}

/* Additional responsive fixes for very small screens */
@media (max-width: 480px) {
    .site-footer {
        padding: 25px 10px 10px;
    }

    .footer-affiliation {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-affiliation>span:first-child {
        margin-bottom: 5px;
    }

    .utility-links a {
        display: block;
        margin-bottom: 8px;
    }

    .utility-links a:not(:last-child)::after {
        content: '';
        display: none;
    }
}

/* Enhanced footer last row */
.site-footer .row:last-of-type {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Improved utility links section */
.utility-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.footer-nav-links {
    margin-bottom: 12px;
}

.footer-nav-links a {
    margin: 0 5px;
    position: relative;
    font-size: 0.85em;
}

.credits-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Visitor counter styling */
.visitor-counter {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8em;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.visitor-counter:hover {
    background-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.counter-label {
    margin-right: 5px;
    font-weight: 500;
    color: #666;
}

.counter-value {
    color: #8929F7;
    font-weight: 700;
}

/* Enhanced back to top button */
.back-to-top {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #8929F7;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.back-to-top svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.back-to-top:hover {
    background-color: #6a1ebf;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(137, 41, 247, 0.3);
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}

/* Button ripple effect */
.back-to-top::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.back-to-top:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Free alternative to language switcher */
.accessibility-help-text {
    font-size: 0.85em;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.02);
    border-left: 3px solid #8929F7;
    border-radius: 0 4px 4px 0;
    margin: 15px 0;
}

.accessibility-help-text p {
    margin: 0 0 5px;
    padding: 0;
    line-height: 1.5;
}

.accessibility-help-text a {
    font-weight: 500;
}

/* Dark mode for footer bottom row */
.dark-mode .visitor-counter {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .visitor-counter:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .counter-label {
    color: #aaa;
}

.dark-mode .counter-value {
    color: #bb86fc;
}

.dark-mode .accessibility-help-text {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: #9d50bb;
}

/* Responsive styles for footer last row */
@media (max-width: 768px) {
    .site-footer .row:last-of-type {
        flex-direction: column;
    }

    .utility-links {
        align-items: flex-start;
        margin-top: 20px;
        width: 100%;
    }

    .footer-nav-links {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .footer-nav-links a {
        margin: 0 10px 5px 0;
    }

    .credits-container {
        justify-content: flex-start;
        width: 100%;
        margin-top: 10px;
    }

    .visitor-counter {
        margin-right: 10px;
    }

    .back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        width: 40px;
        height: 40px;
        opacity: 0.8;
    }

    .back-to-top:hover {
        opacity: 1;
    }

    .accessibility-help-text {
        margin: 10px 0;
        padding: 8px 12px;
    }
}

/* Enhanced footer left column styling */
.site-footer .col-md-6:first-child {
    position: relative;
    padding-left: 20px;
}

/* Redesigned motto */
.footer-motto {
    font-size: 1em;
    font-style: italic;
    margin: 0 0 20px;
    padding: 10px 15px;
    color: #333;
    background: linear-gradient(to right, rgba(137, 41, 247, 0.1), rgba(137, 41, 247, 0.05));
    border-radius: 5px;
    position: relative;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-left: 4px solid #8929F7;
    max-width: 80%;
}

.footer-motto::before {
    content: " ";
    position: absolute;
    left: 5px;
    top: -5px;
    font-size: 2em;
    color: #8929F7;
    opacity: 0.5;
}

.footer-motto::after {
    content: " ";
    position: absolute;
    right: 5px;
    bottom: -25px;
    font-size: 2em;
    color: #8929F7;
    opacity: 0.5;
}

/* Improved copyright text */
.copyright-text {
    margin-bottom: 10px;
    color: #555;
    font-size: 0.85em;
    position: relative;
    padding-left: 25px;
    line-height: 1.6;
}

.copyright-text::before {
    content: "©";
    left: 0;
    top: 0;
    font-size: 1.1em;
    color: #8929F7;
    font-weight: bold;
}

/* Designer credit with badge */
.designer-credit {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 15px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.03);
    display: inline-block;
    padding: 4px 10px 4px 30px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.designer-credit::before {
    content: "👨‍💻";
    position: absolute;
    left: 8px;
    top: 3px;
    font-size: 1.1em;
}

/* Last updated timestamp */
.footer-last-updated {
    font-size: 0.75em;
    color: #777;
    margin: 5px 0 15px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
}

.footer-last-updated::before {
    content: "🕒";
    position: absolute;
    left: 0;
    top: -1px;
    font-size: 1.1em;
}

/* Enhanced affiliation badges */
.footer-affiliation {
    font-size: 0.85em;
    color: #555;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 15px;
}

.affiliation-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 600;
    color: #444;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    letter-spacing: 0.5px;
}

.affiliation-logo-placeholder:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode adjustments for left column */
.dark-mode .footer-motto {
    color: #eee;
    background: linear-gradient(to right, rgba(157, 80, 187, 0.2), rgba(157, 80, 187, 0.1));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-left-color: #9d50bb;
}

.dark-mode .footer-motto::before,
.dark-mode .footer-motto::after {
    color: #9d50bb;
}

.dark-mode .copyright-text {
    color: #bbb;
}

.dark-mode .copyright-text::before {
    color: #9d50bb;
}

.dark-mode .designer-credit {
    color: #aaa;
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode .footer-last-updated {
    color: #999;
}

.dark-mode .footer-affiliation {
    color: #aaa;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .affiliation-logo-placeholder {
    background: linear-gradient(135deg, #333, #2a2a2a);
    border-color: #444;
    color: #ccc;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode .affiliation-logo-placeholder:hover {
    background: linear-gradient(135deg, #3a3a3a, #333);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* NEW FOOTER FEATURES */

/* 1. Awards & Recognition Section */
.footer-awards {
    margin: 20px 0;
    text-align: center;
}

.footer-awards h5 {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #555;
    position: relative;
    display: inline-block;
}

.footer-awards h5::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #8929F7, transparent);
}

.awards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.award-badge {
    background-color: #f0f0f0;
    padding: 15px 10px;
    border-radius: 8px;
    /* Slightly larger radius */
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    /* Added subtle border */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.award-badge:hover {
    background-color: #e9e9e9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}


.dark-mode .award-badge {
    background-color: #3a3a3a;
    /* Darker background */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Darker shadow */
    border-color: #555;
    /* Darker border */
}

.dark-mode .award-badge:hover {
    background-color: #444;
}

.award-badge span {
    display: block;
    font-size: 0.9em;
    /* Slightly larger font */
    color: #333;
    /* Darker text */
    font-weight: 500;
    /* Medium weight */
    line-height: 1.3;
    margin: 0;
    /* Removed top margin */
}

.dark-mode .award-badge span {
    color: #ddd;
    /* Lighter text */
}

/* Styles for combined facts and weather */
.facts-weather-container {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    align-items: flex-start;
    /* Align items to the top */
    gap: 15px;
    /* Space between facts and weather */
    margin-top: 25px;
    /* Space above the container */
}

.quick-facts {
    flex: 1 1 60%;
    /* Allow facts to take more space, minimum 60% */
    margin: 0;
    /* Reset margin */
}

.footer-weather.small-weather {
    flex: 1 1 30%;
    /* Allow weather to take less space, minimum 30% */
    min-width: 200px;
    /* Minimum width before wrapping */
    margin: 0;
    /* Reset margin */
    margin-bottom: 10px;
    padding: 15px;
    /* Add padding */
    border-left: 1px solid #eee;
    /* Keep the divider */
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 5px;
}

.footer-weather.small-weather .weather-icon {
    font-size: 1.8em;
    /* Smaller icon */
    margin-bottom: 5px;
    text-align: center;
}

.footer-weather.small-weather .weather-details {
    text-align: center;
}

.footer-weather.small-weather .weather-location {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 3px;
}

.footer-weather.small-weather .weather-temp {
    font-size: 1.1em;
    font-weight: bold;
}

.dark-mode .footer-weather.small-weather {
    border-left-color: #444;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Adjustments for smaller screens if needed */
@media (max-width: 576px) {
    .facts-weather-container {
        flex-direction: column;
        /* Stack them vertically */
        gap: 20px;
    }

    .footer-weather.small-weather {
        border-left: none;
        /* Remove border when stacked */
        border-top: 1px solid #eee;
        /* Add top border instead */
        padding-top: 20px;
        width: 100%;
        /* Take full width */
        min-width: unset;
        flex-basis: auto;
    }

    .dark-mode .footer-weather.small-weather {
        border-top-color: #444;
    }
}

/* 2. Weather Widget */
.footer-weather {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.footer-weather:hover {
    background-color: rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.weather-icon {
    font-size: 2em;
    margin-right: 15px;
    color: #8929F7;
}

.weather-details {
    flex-grow: 1;
}

.weather-location {
    font-size: 0.8em;
    color: #666;
    margin: 0;
}

.weather-temp {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.weather-update {
    font-size: 0.7em;
    color: #888;
    margin: 8px;
}

/* 3. Quick Facts */
.quick-facts {
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

.fact-item {
    font-size: 0.85em;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.fact-item::before {
    content: "•";
    color: #8929F7;
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.2em;
}

/* 4. School Calendar Snippet */
.calendar-snippet {
    margin: 15px 0;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid #8929F7;
}

.calendar-snippet h5 {
    font-size: 0.9em;
    margin: 0 0 8px;
    color: #555;
}

.calendar-events {
    padding: 0;
    margin: 0;
    list-style: none;
}

.calendar-event {
    font-size: 0.8em;
    margin-bottom: 5px;
    display: flex;
}

.event-date {
    font-weight: 600;
    color: #8929F7;
    margin-right: 8px;
    min-width: 70px;
}

.event-name {
    color: #444;
}



/* 6. Cookie Consent */
.cookie-consent {
    position: fixed;
    bottom: 15px;
    /* Adjusted spacing */
    left: 15px;
    /* Moved to left */
    background-color: rgba(45, 52, 54, 0.95);
    /* Darker, slightly transparent */
    color: #f1f1f1;
    /* Light text */
    width: calc(100% - 30px);
    /* Responsive width */
    max-width: 400px;
    /* Max width */
    padding: 20px;
    border-radius: 10px;
    border-top: 3px solid #8929F7;
    /* Accent color */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    /* Ensure visibility */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    display: flex;
    /* Use flexbox for better alignment */
    flex-direction: column;
    /* Stack items vertically */
}

.cookie-consent.show {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent p {
    /* Target paragraph directly for text */
    font-size: 0.95em;
    margin-bottom: 15px;
    line-height: 1.6;
}

.cookie-consent a {
    /* Style link within the text */
    color: #a064f7;
    /* Lighter accent color */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cookie-consent a:hover {
    color: #c194f7;
    /* Lighter hover */
}

.cookie-buttons {
    display: flex;
    justify-content: flex-end;
    /* Align buttons to the right */
    gap: 10px;
    /* Space between buttons */
    margin-top: 10px;
    /* Space above buttons */
}

.cookie-btn {
    padding: 10px 20px;
    /* Larger padding */
    border-radius: 5px;
    /* Slightly less rounded */
    font-size: 0.9em;
    font-weight: 600;
    /* Bolder text */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    /* Remove default border */
}

#acceptCookies {
    /* Specific ID */
    background-color: #8929F7;
    color: white;
}

#acceptCookies:hover {
    background-color: #6a1ebf;
    transform: translateY(-1px);
    /* Slight lift on hover */
    box-shadow: 0 3px 8px rgba(137, 41, 247, 0.3);
}

/* Added a reject/close button style */
#rejectCookies {
    /* Give reject button an ID */
    background-color: transparent;
    color: #aaa;
    /* Muted color */
    border: 1px solid #555;
    /* Subtle border */
}

#rejectCookies:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ddd;
    border-color: #777;
}

/* Dark Mode Adjustments for Cookie Consent */
.dark-mode .cookie-consent {
    background-color: rgba(26, 26, 26, 0.97);
    /* Slightly darker in dark mode */
    border-top-color: #a064f7;
    /* Lighter accent */
    color: #e0e0e0;
    /* Lighter base text */
}

.dark-mode .cookie-consent a {
    color: #c194f7;
    /* Bright link for dark mode */
}

.dark-mode .cookie-consent a:hover {
    color: #d8b6ff;
}

.dark-mode #rejectCookies {
    color: #888;
    border-color: #444;
}

.dark-mode #rejectCookies:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #bbb;
    border-color: #666;
}

/* 9. Donation Button */
.donation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    color: white;
    padding: 8px 15px;
    border-radius: 16px;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 15px;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(238, 82, 83, 0.3);
    transition: all 0.3s ease;
}

.donation-button svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: currentColor;
}

.donation-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(238, 82, 83, 0.4);
    text-decoration: none;
    color: white;
}

/* 10. Newsletter with animation */
.newsletter-signup {
    margin-top: 25px;
    position: relative;
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    overflow: hidden;
}

.newsletter-signup::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(137, 41, 247, 0.2), transparent 70%);
    top: -50px;
    left: -50px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.5;
}

.newsletter-signup::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(137, 41, 247, 0.2), transparent 70%);
    bottom: -35px;
    right: -35px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.5;
}

/* Dark mode for all new features */
.dark-mode .footer-awards h5 {
    color: #ccc;
}

.dark-mode .footer-awards h5::after {
    background: linear-gradient(to right, #9d50bb, transparent);
}

.dark-mode .award-badge {
    background: linear-gradient(135deg, #333, #2a2a2a);
    border-color: #444;
}

.dark-mode .award-badge::after {
    background-color: #9d50bb;
}

.dark-mode .footer-weather {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-mode .footer-weather:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.dark-mode .weather-icon {
    color: #9d50bb;
}

.dark-mode .weather-location {
    color: #aaa;
}

.dark-mode .weather-temp {
    color: #ddd;
}

.dark-mode .weather-update {
    color: #777;
}

.dark-mode .fact-item {
    color: #bbb;
}

.dark-mode .fact-item::before {
    color: #9d50bb;
}

.dark-mode .calendar-snippet {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: #9d50bb;
}

.dark-mode .calendar-snippet h5 {
    color: #ccc;
}

.dark-mode .event-date {
    color: #9d50bb;
}

.dark-mode .event-name {
    color: #bbb;
}


.dark-mode .cookie-consent {
    background-color: #222;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.dark-mode .cookie-text {
    color: #ccc;
}

.dark-mode .accept-cookies {
    background-color: #9d50bb;
}

.dark-mode .accept-cookies:hover {
    background-color: #7b3e94;
}

.dark-mode .reject-cookies {
    background-color: #444;
    color: #ccc;
    border-color: #555;
}

.dark-mode .reject-cookies:hover {
    background-color: #555;
}

.dark-mode .chat-support-bubble {
    background-color: #9d50bb;
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.3);
}

.dark-mode .chat-support-bubble:hover {
    box-shadow: 0 6px 15px rgba(157, 80, 187, 0.4);
}



.dark-mode .donation-button {
    background: linear-gradient(135deg, #ff7979, #eb4d4b);
    box-shadow: 0 3px 6px rgba(235, 77, 75, 0.3);
}

.dark-mode .donation-button:hover {
    box-shadow: 0 5px 10px rgba(235, 77, 75, 0.4);
}

.dark-mode .newsletter-signup {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .newsletter-signup::before,
.dark-mode .newsletter-signup::after {
    background: radial-gradient(circle, rgba(157, 80, 187, 0.2), transparent 70%);
}

/* Responsive design */
@media (max-width: 768px) {
    .footer-motto {
        max-width: 100%;
        font-size: 0.9em;
        padding: 8px 12px;
        margin-bottom: 15px;
    }

    .footer-motto::before,
    .footer-motto::after {
        font-size: 1.5em;
    }

    .awards-container {
        justify-content: flex-start;
    }

    .award-badge {
        width: 40px;
        height: 40px;
    }

    .footer-weather {
        flex-direction: column;
        align-items: flex-start;
    }

    .weather-icon {
        margin-right: 0;
        margin-bottom: 8px;
    }


    .site-footer .col-md-6:first-child {
        padding-left: 15px;
    }
}

/* Improved Footer Organization and Spacing */
.site-footer {
    background-color: #f8f9fa;
    color: #6c757d;
    padding: 40px 20px 20px;
    margin-top: 40px;
    font-size: 0.9em;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);
    position: relative;
}

.site-footer .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Create better spacing between main sections */
.site-footer .row {
    margin-bottom: 30px;
}

/* Column spacing */
.site-footer .footer-col {
    padding: 0 25px;
    margin-bottom: 25px;
}

/* Better heading styles */
.site-footer h4 {
    font-size: 1.2em;
    margin-bottom: 25px;
    padding-bottom: 12px;
    position: relative;
}

/* Section dividers for cleaner organization */
.site-footer .footer-col:not(:last-child) {
    position: relative;
}

.site-footer .footer-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
}

/* Space out individual components */
.footer-motto {
    margin: 0 0 30px;
}

.footer-quick-contact {
    margin: 20px 0;
}

.contact-item {
    margin-bottom: 15px;
}

.emergency-contact {
    margin: 0px 0;
}

.social-icons {
    margin-bottom: 30px;
}

.newsletter-signup {
    margin: 30px 0;
}

.donation-button {
    margin-top: 0px;
    display: inline-block;
}

/* Awards section needs more space */
.footer-awards {
    margin: 40px 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.01);
    border-radius: 8px;
}

/* Weather widget spacing */
.footer-weather {
    margin: 30px 0 40px;
}

/* Quick facts list spacing */
.quick-facts {
    margin: 25px 0;
}

.fact-item {
    margin-bottom: 12px;
}

/* Calendar section more readable */
.calendar-snippet {
    margin: 25px 0;
    padding: 15px;
}

.calendar-event {
    margin-bottom: 10px;
}

/* Fix footer divider */
.footer-divider {
    margin: 40px 0 30px;
    border-top-width: 1px;
}

/* Bottom row better styling */
.site-footer .row:last-of-type {
    margin-bottom: 0;
    padding-top: 10px;
}

.copyright-text,
.designer-credit,
.footer-last-updated {
    margin-bottom: 10px;
}

.footer-affiliation {
    margin-top: 15px;
}

.footer-nav-links {
    margin-bottom: 20px;
}


/* Dark mode adjustments */
.dark-mode .site-footer .footer-col:not(:last-child)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .site-footer .footer-col {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .site-footer .footer-col:not(:last-child)::after {
        display: none;
    }

    .site-footer .footer-col::before {
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.05);
        margin: 0 auto 30px;
    }

    .site-footer .footer-col:first-child::before {
        display: none;
    }

    .footer-awards,
    .footer-weather {
        margin: 30px 0;
    }

    .donation-button {
        display: block;
        text-align: center;
    }
}

/* Grouped feature layout for larger screens */
@media (min-width: 992px) {
    .footer-weather {
        float: left;
        width: 48%;
        margin-right: 4%;
    }

    .footer-awards {
        float: left;
        width: 48%;
    }

    .site-footer .clearfix {
        clear: both;
    }
}

/* Styles for the new translate placeholder button */
.translate-placeholder-btn {
    background: none;
    border: none;
    color: #007bff;
    /* Standard link color */
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    margin-top: 10px;
}

.translate-placeholder-btn:hover,
.translate-placeholder-btn:focus {
    color: #0056b3;
    text-decoration: none;
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Dark mode adjustments */
.dark-mode .translate-placeholder-btn {
    color: #66bfff;
}

.dark-mode .translate-placeholder-btn:hover,
.dark-mode .translate-placeholder-btn:focus {
    color: #aadcff;
    outline-color: #66bfff;
}

/* Styles for Award Placeholders */
.award-badge span {
    display: block;
    font-size: 0.8em;
    color: #555;
    margin-top: 5px;
    text-align: center;
}

.dark-mode .award-badge span {
    color: #bbb;
}

.award-badge {
    background-color: #f0f0f0;
    padding: 15px 10px;
    border-radius: 5px;
    text-align: center;
    min-height: 60px;
    /* Ensure consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .award-badge {
    background-color: #333;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.footer-section {
    padding: 15px;
    /* Add padding inside each section */
    margin-bottom: 20px;
    /* Add space below when stacked on mobile */
    /* Add a subtle border to the right for separation on larger screens */
    border-right: 1px solid #444;
}

/* Remove border from the last section in a row */
.site-footer .row>.footer-section:last-child {
    border-right: none;
}

.dark-mode .footer-section {
    border-right-color: #666;
    /* Adjust border color for dark mode */
}

/* Ensure proper vertical alignment and spacing in the bottom row */
.footer-bottom {
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Vertically center items */
    justify-content: space-between;
    /* Space out columns */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    padding-top: 15px;
    /* Add some padding above */
    padding-bottom: 10px;
    /* Add some padding below */
}

.copyright-text {
    flex-basis: 25%;
    /* Adjust basis if needed */
    margin-bottom: 10px;
    /* Add margin for wrap */
}

.visitor-counter {
    flex-basis: 30%;
    /* Adjust basis */
    text-align: center;
    /* Center text */
    margin-bottom: 10px;
    /* Add margin for wrap */
}

.utility-links a {
    margin-left: 8px;
    /* Space out links */
    display: inline-block;
    /* Ensure proper spacing */
}

.utility-links .back-to-top {
    margin-left: 15px;
    /* More space for the button */
}

/* Responsive adjustments for footer bottom */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        /* Stack elements vertically */
        align-items: flex-start;
        /* Align items to the start */
        text-align: center;
        /* Center text */
    }

    .copyright-text,
    .visitor-counter,
    .utility-links {
        flex-basis: 100%;
        /* Take full width */
        text-align: center;
        /* Center text */
        margin-bottom: 15px;
        /* Increase spacing when stacked */
    }

    .utility-links {
        text-align: center;
        /* Ensure right alignment is overridden */
    }

    /* Remove border from all sections when stacked */
    .site-footer .row>.footer-section {
        border-right: none;
    }
}



/* Footer Styles */
.footer-section {
    padding: 15px;
    /* Reduced padding */
    margin-bottom: 10px;
    /* Reduced margin */
}

/* Ensure consistent bottom margin for sections before the divider */
.awards-recognition,
.quick-facts,
.contact-us,
.site-navigation,
.accessibility-help,
.upcoming-events,
.stay-updated-section {
    margin-bottom: 0px;
    /* Ensure some space before the next element or divider */
}

/* Remove extra top margin from the stay updated section if it's moved */
.stay-updated-section {
    margin-top: 0;
}

/* Awards & Recognition Text Wrapping */
.text-based-awards span {
    display: block;
    /* Make each span a block element */
    margin-bottom: 8px;
    /* Added margin for spacing */
    font-size: 0.95em;
    /* Slightly adjust font size if needed */
    line-height: 1.4;
    /* Adjust line height for readability */
}

/* Optional: Remove margin from the last span */
.text-based-awards span:last-child {
    margin-bottom: 0;
}

/* Donation Button Row */
.footer-section .footer-links li a[href*="#event"] {
    display: block;
    /* Make the link take full width */
    padding: 3px 0;
    /* Add a little vertical padding */
}

/* Style the date part of the event link */
.footer-section .footer-links li a[href*="#event"]::after {
    content: attr(href);
    /* Get the date from href (assuming format like #event1) */
    /* Extract and display date - this part is complex with CSS only */
    /* Basic styling for the date text for now */
    content: '';
    /* Reset content for now, will handle date display differently */
}

.footer-section .footer-links li a[href*="#event"] .event-date {
    display: inline;
    /* Allows styling */
    background-color: #eee;
    /* Light grey background */
    color: #333;
    /* Darker text */
    padding: 2px 6px;
    /* Small padding */
    border-radius: 4px;
    /* Rounded corners */
    font-size: 0.8em;
    /* Smaller font size */
    margin-left: 8px;
    /* Space from event name */
    font-weight: bold;
}

.dark-mode .footer-section .footer-links li a[href*="#event"] .event-date {
    background-color: #444;
    /* Darker background in dark mode */
    color: #eee;
    /* Lighter text in dark mode */
}

/* Add this span inside the event links in HTML: <span class="event-date">Dec 15</span> */

/* Footer Sections Layout */
.footer-section {
    padding: 15px;
    /* Consistent padding */
    /* border-right: 1px solid #eee; Optional separator */
    margin-bottom: 10px;
    /* Reduced bottom margin */
    flex: 1;
    /* Allow sections to grow */
    min-width: 150px;
    /* Prevent sections from becoming too narrow */
}

.site-footer .row>.footer-section:last-child {
    border-right: none;
}

.dark-mode .footer-section {
    border-right-color: #444;
}

/* Specific section containing both Stay Updated and Connect */
.footer-section.stay-updated-section {
    display: flex;
    flex-direction: column;
    /* Stack vertically by default (mobile first) */
    align-items: center;
    /* Center items horizontally by default */
    text-align: center;
    flex-basis: 100%;
    border: none;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    /* Ensure it takes full width */
    box-sizing: border-box;
    /* Include padding in width */
}

/* Container for Newsletter */
.newsletter-container {
    width: 100%;
    margin-bottom: 20px;
    /* Space below newsletter on mobile */
    padding: 0 10px;
    /* Add some padding */
    box-sizing: border-box;
}

/* Container for Social Connect */
.connect-container {
    width: 100%;
    padding: 0 10px;
    /* Add some padding */
    box-sizing: border-box;
}

.newsletter-container h4,
.connect-container h4 {
    width: 100%;
    margin-top: 0;
    /* Remove extra top margin */
    margin-bottom: 15px;
    /* Space below title */
    font-size: 1.1em;
    color: #343a40;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
    position: relative;
}

.newsletter-container h4::after,
.connect-container h4::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    /* Center the line */
    width: 50px;
    height: 3px;
    background-color: #8929F7;
}

.newsletter-signup {
    width: 100%;
    margin: 0;
    /* Reset margin */
}

.social-icons {
    width: 100%;
    margin: 0;
    /* Reset margin */
    display: flex;
    /* Ensure icons are centered */
    justify-content: center;
    gap: 15px;
}

/* On larger screens, arrange side-by-side */
@media (min-width: 992px) {

    /* Use a breakpoint where there's enough space (e.g., large screens) */
    .footer-section.stay-updated-section {
        flex-direction: row;
        /* Arrange items horizontally */
        justify-content: space-between;
        /* Space them out */
        align-items: flex-start;
        /* Align containers to the top */
        flex-wrap: nowrap;
        /* Prevent wrapping */
        padding: 20px 0;
        /* Adjust padding */
    }

    .newsletter-container,
    .connect-container {
        flex: 1;
        /* Allow them to share space */
        max-width: 48%;
        /* Limit width to prevent touching, allows gap */
        margin-bottom: 0;
        /* Remove bottom margin */
        padding: 0 15px;
        /* Add padding */
        text-align: left;
        /* Align text left */
    }

    .connect-container {
        text-align: right;
        /* Align connect container text right */
    }

    .newsletter-container h4::after,
    .connect-container h4::after {
        left: 0;
        /* Align line left */
        transform: translateX(0);
    }

    .connect-container h4::after {
        left: auto;
        /* Override left alignment */
        right: 0;
        /* Align line right for connect */
        transform: translateX(0);
    }

    .social-icons {
        justify-content: flex-end;
        /* Align icons to the right */
    }

    /* Optional: Adjust form layout if needed */
    .newsletter-signup input[type="email"] {
        width: calc(100% - 110px);
        /* Adjust width if needed */
    }

    .newsletter-signup button {
        width: 100px;
    }
}


/* Remove the previous flex attempt on form/social-icons directly */
/* @media (min-width: 768px) {
    .footer-section.stay-updated-section {
       ... removed ...
    }
    .newsletter-signup,
    .social-icons {
        ... removed ...
    }
     .stay-updated-section h4 {
        ... removed ...
    }
    .newsletter-container, .connect-container {
       ... removed ...
    }
     .newsletter-container h4, .connect-container h4 {
        ... removed ...
     }
} */

.stay-updated-section h4 {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

.newsletter-signup,
.social-icons {
    width: 100%;
    /* Take full width of the container */
    margin-bottom: 10px;
}

.social-icons {
    margin-top: 5px;
    /* Space above icons */
    margin-bottom: 0;
    /* Remove extra bottom margin */
}

/* On larger screens, make the container holding newsletter and social icons flex row */
@media (min-width: 768px) {

    /* Adjust breakpoint as needed */
    .footer-section.stay-updated-section {
        flex-direction: row;
        /* Arrange items horizontally */
        justify-content: space-around;
        /* Space them out */
        align-items: flex-start;
        /* Align items to the top */
        flex-wrap: wrap;
        /* Allow wrapping if needed */
        flex-basis: auto;
        /* Allow flex-grow based on content */
        padding: 15px;
    }

    .newsletter-signup,
    .social-icons {
        width: auto;
        /* Allow natural width */
        flex: 1;
        /* Allow them to share space */
        min-width: 200px;
        /* Minimum width for each part */
        margin-bottom: 0;
    }

    .stay-updated-section h4 {
        /* Hide h4 titles if they are redundant when horizontal */
        /* display: none; */
        margin-bottom: 10px;
        /* Add space below title */
        width: auto;
        /* Reset width */
        flex-basis: 100%;
        /* Make titles span full width above */
        text-align: center;
        /* Center titles */
    }

    /* If titles are kept, add structure */
    .newsletter-container,
    .connect-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 200px;
    }

    .newsletter-container h4,
    .connect-container h4 {
        margin-bottom: 10px;
    }
}


/* Footer Bottom Row Layout */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    padding-top: 10px;
    border-top: 1px solid #eee;
    /* Add separator */
    margin-top: 10px;
}

.dark-mode .footer-bottom {
    border-top-color: #444;
}

/* Override flex display specifically for the announcement bar row */
.announcement-row {
    display: block !important;
    /* Override the default .row flex behavior, use !important if necessary */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    /* Re-apply padding if needed, often from container */
    padding-right: 15px;
    /* Re-apply padding if needed */
    box-sizing: border-box;
}

/* Ensure the box inside behaves correctly */
.announcement-row .box {
    margin-left: -15px;
    /* Counteract padding if needed */
    margin-right: -15px;
}


/* Rewritten Announcement Bar Styles */
.announcement-bar {
    width: 100%;
    background-color: #ffe082;
    /* Light yellow background */
    color: #4e342e;
    /* Dark brown text */
    padding: 10px 0;
    overflow: hidden;
    /* Crucial: prevent overflow */
    white-space: nowrap;
    /* Keep inner spans on one line */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Optional: if needed for other effects */
}

.announcement-text {
    display: inline-block;
    /* Allow animation */
    padding-left: 100%;
    /* Start off-screen */
    animation: scrollText 30s linear infinite;
    /* Adjust duration as needed */
}

.announcement-text span {
    display: inline-block;
    /* Treat each announcement as a block */
    margin-right: 50px;
    /* Space between announcements */
    font-size: 16px;
    font-weight: bold;
}

.announcement-bar:hover .announcement-text {
    animation-play-state: paused;
    /* Pause on hover */
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Scroll text across the container width + its own width */
        /* This needs adjustment based on content length */
        transform: translateX(-100%);
    }
}

/* Dark Mode Announcement Bar */
.dark-mode .announcement-bar {
    background-color: #3a3a3a;
    /* Dark background */
    color: #f0e68c;
    /* Khaki text */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}

.dark-mode a.btn.btn-success.btn-lg {
    color: black;
}

/* Remove old conflicting styles if any */
/* .announcement-content { ... } */
/* @keyframes scrollText { ... } (if different previously) */

@media screen and (max-width: 768px) {
    .announcement-text span {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .announcement-bar {
        padding: 10px 0;
    }

    .announcement-text span {
        font-size: 12px;
    }
}

/* On larger screens, arrange side-by-side */
@media (min-width: 992px) {

    /* Use a breakpoint where there's enough space */
    .footer-section.stay-updated-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: nowrap;
        padding: 20px 0;
    }

    .newsletter-container {
        flex: 1 1 55%;
        /* Allow growing, basis 55% */
        max-width: 55%;
        /* Increase max width for newsletter */
        margin-bottom: 0;
        padding: 0 15px;
        text-align: left;
    }

    .connect-container {
        flex: 1 1 40%;
        /* Allow growing, basis 40% */
        max-width: 40%;
        /* Slightly reduce max width for connect */
        margin-bottom: 0;
        padding: 0 15px;
        text-align: right;
    }

    .newsletter-container h4::after,
    .connect-container h4::after {
        left: 0;
        transform: translateX(0);
    }

    .connect-container h4::after {
        left: auto;
        right: 0;
        transform: translateX(0);
    }

    .social-icons {
        justify-content: flex-end;
    }

    /* Adjust form layout for more width */
    .newsletter-signup {
        display: flex;
        /* Use flex for input and button */
        align-items: center;
    }

    .newsletter-signup input[type="email"] {
        flex-grow: 1;
        /* Allow input to take available space */
        width: auto;
        /* Override previous width setting */
        margin-right: 5px;
        /* Space between input and button */
    }

    .newsletter-signup button {
        width: auto;
        /* Let button size naturally */
        flex-shrink: 0;
        /* Prevent button from shrinking */
        padding: 10px 15px;
        /* Adjust padding */
    }
}


.cookie-consent {
    position: fixed;
    bottom: 15px;
    /* Adjusted spacing */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%) translateY(100%);
    /* Adjust transform for centering and initial hide */
    background-color: rgba(45, 52, 54, 0.95);
    color: #f1f1f1;
    width: auto;
    /* Allow width to adjust */
    max-width: 90%;
    /* Max width for smaller screens */
    padding: 20px;
    border-radius: 10px;
    border-top: 3px solid #8929F7;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    /* transform: translateY(100%); // Removed initial transform Y */
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    display: flex;
    flex-direction: column;
}

.cookie-consent.show {
    transform: translateX(-50%) translateY(0);
    /* Slide up from bottom center */
    opacity: 1;
}

/* ====================================================================
   Top Branding Bar Styles
==================================================================== */
.top-branding-bar {
    background-color: #003366;
    /* Dark blue, adjust as needed */
    padding: 5px 0;
    /* Creates a narrow bar */
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    /* Ensure it's above other content if needed, slightly higher than default navbar */
    position: relative;
    /* Or fixed/sticky if needed */
}

.top-branding-bar .container {
    display: flex;
    align-items: center;
    justify-content: left;
    /* Align items to the left */
}

.top-branding-bar .branding-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Remove underline from link */
}

.top-branding-bar .school-logo {
    height: 40px;
    /* Significantly smaller logo */
    width: auto;
    margin-right: 15px;
    /* Space between logo and name */
}

.top-branding-bar .school-name {
    font-size: 1.1rem;
    /* Smaller font size */
    color: #000000;
    /* White text */
    font-weight: bold;
    margin: 0;
    /* Remove default margins */
}

/* Responsive adjustments for branding bar */
@media (max-width: 768px) {
    .top-branding-bar .container {
        justify-content: center;
        /* Center items on small screens */
    }

    .top-branding-bar .school-name {
        font-size: 0.9rem;
        /* Even smaller font on mobile */
    }

    .top-branding-bar .school-logo {
        height: 30px;
        /* Smaller logo on mobile */
    }
}

/* Ensure Navbar sits correctly below */
.navbar {
    margin-top: 0 !important;
    /* Remove any top margin */
    /* Might need to adjust if top-branding-bar is fixed/sticky */
}

/* Adjust main container padding if needed (might conflict with existing body padding) */
body {
    padding-top: 50px;
    /* Example if branding bar was fixed, adjust value based on actual height */
}

/* ==========================================================================
   Header Color Palette Adjustments
   ========================================================================== */

/* --- Top Branding Bar --- */
.top-branding-bar {
    background-color: #eeeeee;
    /* Light Grey background */
    padding: 5px 0;
    border-bottom: 1px solid #DEE2E6;
}

.top-branding-bar .branding-link {
    color: #003366;
    /* Dark Blue text/link */
    text-decoration: none;
    display: flex;
    align-items: center;
}

.top-branding-bar .branding-link:hover {
    color: #0056b3;
    /* Slightly darker blue on hover */
    text-decoration: none;
}

.top-branding-bar .school-logo {
    height: 30px;
    /* Adjust as needed */
    margin-right: 10px;
}

.top-branding-bar .school-name {
    font-weight: bold;
    font-size: 1rem;
}

/* --- Main Navigation Bar --- */
.main-navbar {
    background-color: #003366;
    /* Dark Blue background */
}

/* Navbar Brand */
.main-navbar .navbar-brand {
    color: #FFFFFF;
    /* White */
    font-weight: bold;
}

.main-navbar .navbar-brand:hover,
.main-navbar .navbar-brand:focus {
    color: #E0E0E0;
    /* Lighter grey on hover/focus */
}

/* Main Nav Links */
.main-navbar .navbar-nav>li>a,
.main-navbar .navbar-nav>li>button {
    color: #FFFFFF;
    /* White */
    padding-top: 15px;
    /* Standard Bootstrap padding */
    padding-bottom: 15px;
}

.main-navbar .navbar-nav>li>a:hover,
.main-navbar .navbar-nav>li>a:focus,
.main-navbar .navbar-nav>li>button:hover,
.main-navbar .navbar-nav>li>button:focus {
    color: #E0E0E0;
    /* Lighter grey on hover/focus */
    background-color: transparent;
    /* Ensure no background changes */
}

/* Active Nav Link State (Optional - if you use an 'active' class) */
.main-navbar .navbar-nav>.active>a,
.main-navbar .navbar-nav>.active>a:hover,
.main-navbar .navbar-nav>.active>a:focus {
    color: #FFFFFF;
    background-color: #002244;
    /* Slightly darker blue for active */
}

/* custom scrollbar */
/* --- WebKit Scrollbar Styles (Chrome, Safari, Edge, Opera) --- */
::-webkit-scrollbar {
    width: 12px;
    /* Slightly wider for easier clicking */
    height: 12px;
    /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #e0f2fe;
    /* Light Sky Blue - provides contrast */
    border-radius: 6px;
    /* Match thumb radius */
}

::-webkit-scrollbar-thumb {
    background-color: #3b82f6;
    /* Vibrant Blue */
    border-radius: 6px;
    border: 2px solid #e0f2fe;
    /* Creates padding using the track color */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2563eb;
    /* Darker Vibrant Blue on hover */
}

::-webkit-scrollbar-corner {
    background: #e0f2fe;
    /* Match track color */
}


/* --- Firefox Scrollbar Styles --- */
/* Apply these to the element that scrolls, often <html> or <body> */
/* Note: Firefox offers less customization than WebKit */
html {
    scrollbar-width: thin;
    /* Or "auto" or "none" */
    scrollbar-color: #3b82f6 #e0f2fe;
    /* thumb track (Vibrant Blue / Light Sky Blue) */
}

/* You might need to target body as well depending on your HTML structure */
body {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #e0f2fe;
}


/* --- Mobile Scrollbar Adjustments --- */
@media screen and (max-width: 768px) {

    /* WebKit Mobile */
    ::-webkit-scrollbar {
        width: 8px;
        /* Thinner scrollbar for mobile */
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #bfdbfe;
        /* Slightly darker light blue for mobile track */
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #60a5fa;
        /* Slightly lighter vibrant blue for mobile thumb */
        border-radius: 4px;
        border: 1px solid #bfdbfe;
        /* Adjust border */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #3b82f6;
        /* Vibrant blue on hover */
    }

    ::-webkit-scrollbar-corner {
        background: #bfdbfe;
    }

    /* Firefox Mobile (scrollbar-width: thin is usually sufficient) */
    /* You can adjust colors if desired, but width control is limited */
    html {
        /* scrollbar-width: thin; /* Already set */
        scrollbar-color: #60a5fa #bfdbfe;
        /* thumb track - mobile colors */
    }

    body {
        /* scrollbar-width: thin; /* Already set */
        scrollbar-color: #60a5fa #bfdbfe;
    }
}

/* Dropdown Menu */
.main-navbar .dropdown-menu {
    background-color: #003383;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.main-navbar .dropdown-menu>li>a {
    color: #333333;
    /* Dark grey text */
    padding: 8px 20px;
}

.main-navbar .dropdown-menu>li>a:hover,
.main-navbar .dropdown-menu>li>a:focus {
    color: #003366;
    /* Dark Blue text on hover */
    background-color: #F5F5F5;
    /* Very light grey background on hover */
    text-decoration: none;
}

/* Navbar Toggle Button (Hamburger Icon) */
.main-navbar .navbar-toggle {
    border-color: #DDDDDD;
    /* Lighter border for toggle */
}

.main-navbar .navbar-toggle:hover,
.main-navbar .navbar-toggle:focus {
    background-color: #004488;
    /* Slightly lighter blue background on hover */
}

.main-navbar .navbar-toggle .icon-bar {
    background-color: #FFFFFF;
    /* White icon bars */
}

/* --- Dark Mode Adjustments --- */
.dark-mode .top-branding-bar {
    background-color: #1a1a1a;
    /* Dark Grey background */
    border-bottom: 1px solid #495057;
}

.dark-mode .top-branding-bar .branding-link {
    color: #E9ECEF;
    /* Light Grey text/link */
}

.dark-mode .top-branding-bar .branding-link:hover {
    color: #FFFFFF;
    /* White on hover */
}

/* Main Navbar Dark Mode (background is already dark, adjust text if needed) */
/* Links are already white, should be fine */

/* Dropdown Dark Mode */
.dark-mode .main-navbar .dropdown-menu {
    background-color: #343A40;
    /* Dark Grey background */
    border-color: #495057;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
}

.dark-mode .main-navbar .dropdown-menu>li>a {
    color: #F8F9FA;
    /* Light Grey text */
}

.dark-mode .main-navbar .dropdown-menu>li>a:hover,
.dark-mode .main-navbar .dropdown-menu>li>a:focus {
    color: #FFFFFF;
    /* White text on hover */
    background-color: #495057;
    /* Slightly lighter grey background */
}

/* Ensure Dark mode toggle button itself is visible */
.dark-mode #dark-mode-toggle {
    color: #fff;
    background: #495057;
    border: 1px solid #6c757d;
}

/* Ensure the LOGIN SECTION link looks okay in dark mode */
.dark-mode .main-navbar .navbar-nav>li>a[href="login.html"] {
    color: #FFFFFF;
    /* Ensure it's white */
}

.dark-mode .main-navbar .navbar-nav>li>a[href="login.html"]:hover {
    color: #00ffcc;
    /* Brighter cyan hover */
}


/* ==========================================================================
   Original CSS Below (if any) 
   ========================================================================== */

/* Mobile Adjustments for Specific Sections */
@media (max-width: 768px) {

    /* Reduce padding for general content boxes */
    .box {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Adjust padding for feature columns if needed */
    .feature-column {
        padding: 10px;
        /* Adjust as needed */
        margin-bottom: 15px;
        /* Ensure spacing when stacked */
    }

    /* Adjust padding for specific content wrappers */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 10px;
    }

    /* Adjust Principal's Desk section */
    .princip {
        padding: 15px;
        /* Adjusted padding for mobile */
        padding-top: 30px;
        /* Responsive top padding */
    }

    /* Ensure About/News columns stack correctly */
    .aboutschool,
    .news-announcements {
        width: 100%;
        /* Make columns full width */
        float: none !important;
        /* Remove float */
        padding-left: 10px;
        /* Add consistent padding */
        padding-right: 10px;
    }

    .news-announcements {
        margin-top: 20px;
        /* Add space when stacked */
    }

    /* Adjust marquee container */
    .train-marquee {
        padding: 5px;
    }

    /* Ensure educational resources heading is centered within padded container */
    .educational-resources h2 {
        padding-left: 0;
        /* Reset any potential specific padding */
        padding-right: 0;
    }

    /* Ensure educational resource boxes stack nicely */
    .educational-resources .resource-box {
        margin-bottom: 20px;
    }

    /* Make sure the row containing feature columns has appropriate spacing */
    .row>.col-md-3 {
        /* Target the columns directly */
        padding-left: 5px;
        /* Reduce gutter */
        padding-right: 5px;
    }
}

/* ==========================================================================
   Mobile Adjustments for Specific Sections (Refined)
   ========================================================================== */
@media (max-width: 768px) {

    /* Ensure container behaves correctly, remove potential fixed width issues */
    .container {
        width: auto !important;
        /* Override fixed width */
        padding-left: 15px !important;
        /* Standard Bootstrap padding */
        padding-right: 15px !important;
    }

    /* Ensure rows don't cause overflow */
    .row {
        margin-left: -10px;
        /* Slightly reduce negative margin if needed */
        margin-right: -10px;
    }

    /* Ensure columns within rows have appropriate padding */
    .row>[class*='col-'] {
        /* Target all column types */
        padding-left: 10px;
        /* Match row's negative margin */
        padding-right: 10px;
    }


    /* Reduce padding for general content boxes further if needed */
    .box {
        padding-left: 5px;
        /* Further reduce padding */
        padding-right: 5px;
        margin-left: 0;
        /* Remove potential margins causing shift */
        margin-right: 0;
    }

    /* --- Feature Column Adjustments --- */
    /* Apply flex centering to rows containing feature columns */
    /* NOTE: You might need to add a specific class to these rows if this affects other rows */
    section .row {
        /* Assuming feature columns are directly within rows inside sections */
        display: flex;
        justify-content: center;
        /* Center columns horizontally */
        flex-wrap: wrap;
    }

    /* Further resize feature columns (now col-sm-6) */
    .feature-column {
        padding: 8px;
        /* Reduce padding for smaller size */
        margin-bottom: 15px;
        text-align: center;
    }

    /* Adjust images within feature columns */
    .feature-column img {
        max-width: 50px;
        /* Further limit icon size */
        height: auto;
        margin-bottom: 5px;
    }

    .feature-column .title {
        font-size: 0.85em;
        /* Smaller text */
        line-height: 1.2;
        /* Adjust line height */
    }


    /* Adjust padding for specific content wrappers */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Adjust Principal's Desk section */
    .princip {
        padding: 15px;
        padding-top: 20px;
        text-align: left;
    }

    /* Ensure About/News columns stack correctly */
    .aboutschool,
    .news-announcements {
        width: 100%;
        float: none !important;
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .news-announcements {
        margin-top: 20px;
    }

    .news-announcements h3 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    /* Adjust marquee container */
    .train-marquee {
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .train-marquee p {
        font-size: 0.95em;
    }


    /* Ensure educational resources heading is centered and sized appropriately */
    .educational-resources h2 {
        font-size: 1.5em;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    /* Ensure educational resource boxes stack nicely */
    .educational-resources .resource-box {
        margin-bottom: 20px;
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .educational-resources .resource-box h3 {
        font-size: 1.1em;
    }


    /* Explicitly handle the wrapper/content if necessary */
    #wrapper.wrapper,
    .content {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Carousel Adjustments --- */
    #schoolBanner {
        min-height: 250px;
        /* Increase minimum height on mobile */
        height: auto;
        /* Allow it to adjust if content is larger */
    }

    .carousel-indicators {
        bottom: 5px;
        /* Move indicators lower */
    }

    .carousel-indicators li {
        width: 8px;
        /* Smaller indicator dots */
        height: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .carousel-inner>.item img {
        max-height: 240px;
        /* Limit image height */
        width: 100%;
        /* Ensure image spans width */
        object-fit: cover;
        /* Cover the area, might crop */
        object-position: center;
        /* Center the image crop */
    }

    .carousel-caption {
        padding: 5px 10px;
        /* Reduce padding */
        bottom: 10px;
        /* Adjust position */
        background-color: rgba(0, 0, 0, 0.4);
        /* Add slight background for readability */
        border-radius: 4px;
    }

    .carousel-caption h3 {
        font-size: 1.1em;
        /* Smaller heading */
        margin-bottom: 3px;
    }

    .carousel-caption p {
        font-size: 0.8em;
        /* Smaller text */
        line-height: 1.3;
    }

    /* Adjust carousel controls size/position if needed */
    .carousel-control {
        width: 8%;
        /* Make controls less wide */
    }

    .carousel-control .glyphicon {
        font-size: 18px;
        /* Smaller icons */
        top: 45%;
        /* Adjust vertical position */
    }
}

/* ==========================================================================
   Mobile Adjustments for Specific Sections (Refined)
   ========================================================================== */
@media (max-width: 768px) {

    /* Ensure container behaves correctly, remove potential fixed width issues */
    .container {
        width: auto !important;
        /* Override fixed width */
        padding-left: 15px !important;
        /* Standard Bootstrap padding */
        padding-right: 15px !important;
    }

    /* Ensure rows don't cause overflow */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    /* Ensure columns within rows have appropriate padding */
    .row>[class*='col-'] {
        padding-left: 10px;
        padding-right: 10px;
    }


    /* Reduce padding for general content boxes */
    .box {
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    /* --- Feature Column Adjustments (Centering & Sizing) --- */
    section .row {
        /* display: flex; -- Removing direct flex on row for now */
        /* justify-content: center; */
        /* flex-wrap: wrap; */
        /* Let Bootstrap's grid handle wrapping */
        text-align: center;
        /* Center-align content within the row */
    }

    /* Target the specific columns */
    .row>.col-sm-6.col-md-3 {
        float: none;
        /* Ensure float doesn't interfere */
        display: inline-block;
        /* Allow text-align:center on row to work */
        vertical-align: top;
        /* Align columns nicely if height differs */
        width: 48%;
        /* Maintain approx half-width allowing for spacing */
        margin-bottom: 15px;
        /* Add margin below each column */
    }

    /* Further resize feature columns */
    .feature-column {
        padding: 5px 8px;
        /* Reduce vertical padding */
        margin-bottom: 0;
        /* Remove margin from inner element */
        display: block;
        /* Ensure it takes column width */
    }

    /* Adjust images within feature columns */
    .feature-column img {
        max-width: 45px;
        /* Smaller icon */
        height: auto;
        margin-bottom: 5px;
    }

    /* Adjust title within feature columns */
    .feature-column .title {
        font-size: 0.8em;
        /* Smaller text */
        line-height: 1.3;
        /* Adjust line height */
        min-height: 2.6em;
        /* Control height based on text (adjust as needed) */
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Adjust padding for specific content wrappers */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Adjust Principal's Desk section */
    .princip {
        padding: 15px;
        padding-top: 20px;
        text-align: left;
    }

    /* Ensure About/News columns stack correctly */
    .aboutschool,
    .news-announcements {
        width: 100%;
        float: none !important;
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .news-announcements {
        margin-top: 20px;
    }

    .news-announcements h3 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    /* Adjust marquee container */
    .train-marquee {
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .train-marquee p {
        font-size: 0.95em;
    }


    /* Ensure educational resources heading is centered and sized appropriately */
    .educational-resources h2 {
        font-size: 1.5em;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    /* Ensure educational resource boxes stack nicely */
    .educational-resources .resource-box {
        margin-bottom: 20px;
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .educational-resources .resource-box h3 {
        font-size: 1.1em;
    }


    /* Explicitly handle the wrapper/content if necessary */
    #wrapper.wrapper,
    .content {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Carousel Adjustments --- */
    #schoolBanner {
        min-height: 280px;
        /* Increase minimum height */
        height: auto;
    }

    .carousel-indicators {
        bottom: 5px;
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .carousel-inner>.item img {
        max-height: 270px;
        /* Limit image height */
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .carousel-caption {
        padding: 5px 10px;
        bottom: 10px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        font-size: 0.9em;
        /* Reduce base size */
    }

    .carousel-caption h3 {
        font-size: 1.1em;
        /* Relative to parent (0.9em * 1.1) */
        margin-bottom: 3px;
    }

    .carousel-caption p {
        font-size: 0.9em;
        /* Relative to parent (0.9em * 0.9) */
        line-height: 1.3;
        display: block;
        /* Ensure it's visible */
    }

    .carousel-control {
        width: 8%;
    }

    .carousel-control .glyphicon {
        font-size: 18px;
        top: 45%;
    }

    /* --- Chatbot & Accessibility Responsive Positioning --- */
    /* Structured for easier manual overrides */

    /* Chatbot Trigger Button */
    .chatbot-trigger {
        bottom: 70px;
        /* Position from bottom */
        right: 10px;
        /* Position from right */
        /* Base size/style in enhanced-feature.css */
    }

    .chatbot-trigger button {
        font-size: 1.4em;
        /* Adjust icon size */
        padding: 6px 11px;
        /* Adjust button padding */
    }

    /* Chatbot Panel */
    .chatbot-container {
        width: 90%;
        /* Panel width */
        max-width: 320px;
        /* Max width */
        height: 75%;
        /* Panel height */
        max-height: 450px;
        /* Max height */
        bottom: 65px;
        /* Position from bottom */
        right: 5px;
        /* Position from right */
        /* Base styles in enhanced-feature.css */
    }

    /* Accessibility Trigger Button */
    #accessibilityBtn {
        /* ID from HTML */
        bottom: 15px;
        /* Position from bottom */
        right: 10px;
        /* Position from right */
        /* Base styles in accessibility.css */
    }

    #accessibilityBtn button {
        font-size: 1.4em;
        /* Adjust icon size */
        padding: 6px 11px;
        /* Adjust button padding */
    }

    /* Accessibility Panel */
    #accessibilityPanel {
        /* ID from HTML */
        width: 90%;
        /* Panel width */
        max-width: 300px;
        /* Max width */
        height: auto;
        /* Height based on content */
        max-height: 75vh;
        /* Limit height relative to viewport */
        bottom: 60px;
        /* Position from bottom */
        right: 5px;
        /* Position from right */
        overflow-y: auto;
        /* Enable scrolling if content exceeds max-height */
        /* Base styles in accessibility.css */
    }

    /* Adjust internal panel elements if needed */
    #accessibilityPanel .accessibility-option button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #accessibilityPanel .accessibility-panel-header h3 {
        font-size: 1.2em;
        /* Adjust panel header size */
    }

    #accessibilityPanel .accessibility-option h4 {
        font-size: 1.0em;
        /* Adjust option heading size */
    }
}

/* ==========================================================================
   Mobile Adjustments (Consolidated & Final)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Base Layout & Containers --- */
    .container {
        width: auto !important;
        padding-left: 10px !important;
        /* Reduced container padding */
        padding-right: 10px !important;
    }

    .row {
        margin-left: -5px;
        /* Adjust negative margin */
        margin-right: -5px;
    }

    .row>[class*='col-'] {
        padding-left: 5px;
        /* Match adjusted negative margin */
        padding-right: 5px;
    }

    .box {
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    #wrapper.wrapper,
    .content {
        /* Remove padding if causing issues */
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Feature Column Adjustments --- */
    section .row {
        text-align: center;
        /* Center-align inline-block columns */
    }

    .row>.col-sm-6.col-md-3 {
        float: none;
        display: inline-block;
        vertical-align: top;
        width: 48%;
        /* Approx half-width */
        margin-bottom: 10px;
        /* Reduced margin */
        padding-left: 5px;
        /* Ensure column padding matches row */
        padding-right: 5px;
    }

    .feature-column {
        padding: 8px 5px;
        /* Further reduce padding */
        margin-bottom: 0;
        display: block;
    }

    .feature-column img {
        max-width: 40px;
        /* Even smaller icon */
        height: auto;
        margin-bottom: 4px;
    }

    .feature-column .title {
        font-size: 0.8em;
        line-height: 1.3;
        min-height: 0;
        /* Remove min-height if causing excess space */
        padding-top: 3px;
        padding-bottom: 3px;
        /* display: flex etc. removed as text-align should handle it */
    }

    /* --- Specific Content Wrappers & Text --- */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 10px;
        /* Reduced padding */
        margin-left: 0;
        margin-right: 0;
    }

    .princip {
        padding: 15px 10px;
        /* Adjust padding */
        padding-top: 20px;
        text-align: left !important;
        /* Ensure left alignment */
        word-spacing: normal !important;
        /* Ensure normal word spacing */
    }

    .aboutschool {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left !important;
        /* Override potential justify */
        word-spacing: normal !important;
        /* Override potential word-spacing issues */
    }

    .news-announcements {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        margin-top: 15px;
        /* Adjust space */
    }

    .news-announcements h3 {
        font-size: 1.15em;
        /* Adjust size */
        margin-bottom: 8px;
    }

    .train-marquee {
        padding: 8px 5px;
        /* Adjust padding */
        margin-left: 0;
        margin-right: 0;
    }

    .train-marquee p {
        font-size: 0.9em;
        /* Adjust size */
    }

    .educational-resources h2 {
        font-size: 1.4em;
        /* Adjust size */
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 15px;
    }

    .educational-resources .resource-box {
        margin-bottom: 15px;
        padding: 10px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
    }

    .educational-resources .resource-box h3 {
        font-size: 1.05em;
        /* Adjust size */
    }

    /* --- Carousel Adjustments --- */
    #schoolBanner {
        min-height: 250px;
        /* Adjusted height */
        height: auto;
    }

    .carousel-inner>.item {
        text-align: center;
        /* Center the image within the item */
    }

    .carousel-inner>.item img {
        height: 250px;
        /* Fixed height for consistency */
        width: 100%;
        /* Let width adjust based on height/object-fit */
        max-height: none;
        /* Remove max-height */
        object-fit: cover;
        object-position: center;
        display: inline-block;
        /* Needed for text-align center */
    }

    .carousel-indicators {
        bottom: 5px;
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .carousel-caption {
        padding: 5px 8px;
        /* Adjust padding */
        bottom: 8px;
        /* Adjust position */
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 4px;
        font-size: 0.85em;
        /* Adjust base size */
        left: 5%;
        /* Add side margins */
        right: 5%;
        width: 90%;
        /* Ensure width fits with margins */
    }

    .carousel-caption h3 {
        font-size: 1.1em;
        margin-bottom: 2px;
    }

    .carousel-caption p {
        font-size: 0.9em;
        line-height: 1.2;
        display: block;
    }

    .carousel-control {
        width: 8%;
    }

    .carousel-control .glyphicon {
        font-size: 18px;
        top: 45%;
    }

    /* --- Chatbot & Accessibility Responsive Positioning --- */
    .chatbot-trigger {
        bottom: 70px;
        right: 10px;
    }

    .chatbot-trigger button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    .chatbot-container {
        width: 90%;
        max-width: 320px;
        height: 75%;
        max-height: 450px;
        bottom: 65px;
        right: 5px;
    }

    #accessibilityBtn {
        bottom: 15px;
        right: 10px;
    }

    #accessibilityBtn button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    #accessibilityPanel .accessibility-option button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #accessibilityPanel .accessibility-panel-header h3 {
        font-size: 1.2em;
    }

    #accessibilityPanel .accessibility-option h4 {
        font-size: 1.0em;
    }
}



/* ==========================================================================
   Mobile Adjustments (Consolidated & Final)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Base Layout & Containers --- */
    .container {
        width: auto !important;
        padding-left: 10px !important;
        /* Reduced container padding */
        padding-right: 10px !important;
    }

    .row {
        margin-left: -5px;
        /* Adjust negative margin */
        margin-right: -5px;
    }

    .row>[class*='col-'] {
        padding-left: 5px;
        /* Match adjusted negative margin */
        padding-right: 5px;
    }

    .box {
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    #wrapper.wrapper,
    .content {
        /* Remove padding if causing issues */
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Feature Column Adjustments --- */
    section .row {
        text-align: center;
        /* Center-align inline-block columns */
    }

    .row>.col-sm-6.col-md-3 {
        float: none;
        display: inline-block;
        vertical-align: top;
        width: 48%;
        /* Approx half-width */
        margin-bottom: 10px;
        /* Reduced margin */
        padding-left: 5px;
        /* Ensure column padding matches row */
        padding-right: 5px;
        height: 20%;
    }

    .feature-column {
        padding: 8px 5px;
        /* Further reduce padding */
        margin-bottom: 0;
        display: block;
        height: 30%;
        min-height: 1%;
    }

    .feature-column img {
        max-width: 40px;
        /* Even smaller icon */
        height: auto;
        margin-bottom: 4px;
    }

    .feature-column .title {
        font-size: 0.8em;
        line-height: 1.3;
        min-height: 0;
        /* Remove min-height if causing excess space */
        padding-top: 3px;
        padding-bottom: 3px;
        /* display: flex etc. removed as text-align should handle it */
    }

    /* --- Specific Content Wrappers & Text --- */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 10px;
        /* Reduced padding */
        margin-left: 0;
        margin-right: 0;
    }

    .princip {
        padding: 15px 10px;
        /* Adjust padding */
        padding-top: 20px;
        text-align: left !important;
        /* Ensure left alignment */
        word-spacing: normal !important;
        /* Ensure normal word spacing */
    }

    .aboutschool {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left !important;
        /* Override potential justify */
        word-spacing: normal !important;
        /* Override potential word-spacing issues */
    }

    .news-announcements {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        margin-top: 15px;
        /* Adjust space */
    }

    .news-announcements h3 {
        font-size: 1.15em;
        /* Adjust size */
        margin-bottom: 8px;
    }

    .train-marquee {
        padding: 8px 5px;
        /* Adjust padding */
        margin-left: 0;
        margin-right: 0;
    }

    .train-marquee p {
        font-size: 0.9em;
        /* Adjust size */
    }

    .educational-resources h2 {
        font-size: 1.4em;
        /* Adjust size */
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 15px;
    }

    .educational-resources .resource-box {
        margin-bottom: 15px;
        padding: 10px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
    }

    .educational-resources .resource-box h3 {
        font-size: 1.05em;
        /* Adjust size */
    }

    /* --- Carousel Adjustments --- */
    #schoolBanner {
        min-height: 250px;
        /* Adjusted height */
        height: auto;
    }

    .carousel-inner>.item {
        text-align: center;
        /* Center the image within the item */
    }

    .carousel-inner>.item img {
        height: 250px;
        /* Fixed height for consistency */
        width: 100%;
        /* Let width adjust based on height/object-fit */
        max-height: none;
        /* Remove max-height */
        object-fit: cover;
        object-position: center;
        display: inline-block;
        /* Needed for text-align center */
    }

    .carousel-indicators {
        bottom: 5px;
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .carousel-caption {
        padding: 5px 8px;
        /* Adjust padding */
        bottom: 8px;
        /* Adjust position */
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 4px;
        font-size: 0.85em;
        /* Adjust base size */
        left: 5%;
        /* Add side margins */
        right: 5%;
        width: 90%;
        /* Ensure width fits with margins */
    }

    .carousel-caption h3 {
        font-size: 1.1em;
        margin-bottom: 2px;
    }

    .carousel-caption p {
        font-size: 0.9em;
        line-height: 1.2;
        display: block;
    }

    .carousel-control {
        width: 8%;
    }

    .carousel-control .glyphicon {
        font-size: 18px;
        top: 45%;
    }

    /* --- Chatbot & Accessibility Responsive Positioning --- */
    .chatbot-trigger {
        bottom: 70px;
        right: 10px;
    }

    .chatbot-trigger button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    .chatbot-container {
        width: 90%;
        max-width: 320px;
        height: 75%;
        max-height: 450px;
        bottom: 65px;
        right: 5px;
    }

    #accessibilityBtn {
        bottom: 15px;
        right: 10px;
    }

    #accessibilityBtn button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    #accessibilityPanel {
        width: 90%;
        max-width: 300px;
        height: auto;
        max-height: 75vh;
        bottom: 60px;
        right: 5px;
        overflow-y: auto;
    }

    #accessibilityPanel .accessibility-option button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #accessibilityPanel .accessibility-panel-header h3 {
        font-size: 1.2em;
    }

    #accessibilityPanel .accessibility-option h4 {
        font-size: 1.0em;
    }
}



/* ==========================================================================
   Mobile Adjustments (Consolidated & Final)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Base Layout & Containers --- */
    .container {
        width: auto !important;
        padding-left: 10px !important;
        /* Reduced container padding */
        padding-right: 10px !important;
    }

    .row {
        margin-left: -5px;
        /* Adjust negative margin */
        margin-right: -5px;
    }

    .row>[class*='col-'] {
        padding-left: 5px;
        /* Match adjusted negative margin */
        padding-right: 5px;
    }

    .box {
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
    }

    #wrapper.wrapper,
    .content {
        /* Remove padding if causing issues */
        padding-left: 0;
        padding-right: 0;
    }

    .dark-mode .top-branding-bar .branding-link {
        left: 1%;
        position: absolute;
    }

    /* --- Feature Column Adjustments --- */
    section .row {
        text-align: center;
        /* Center-align inline-block columns */
    }

    .row>.col-sm-6.col-md-3 {
        float: none;
        display: inline-block;
        vertical-align: top;
        width: 48%;
        /* Approx half-width */
        margin-bottom: 10px;
        /* Reduced margin */
        padding-left: 5px;
        /* Ensure column padding matches row */
        padding-right: 5px;
        height: 20%;
    }

    .feature-column {
        padding: 8px 5px;
        /* Further reduce padding */
        margin-bottom: 0;
        display: block;
        height: 30%;
        min-height: 1%;
    }

    .feature-column img {
        max-width: 40px;
        /* Even smaller icon */
        height: auto;
        margin-bottom: 4px;
    }

    .feature-column .title {
        font-size: 0.8em;
        line-height: 1.3;
        min-height: 0;
        /* Remove min-height if causing excess space */
        padding-top: 3px;
        padding-bottom: 3px;
        /* display: flex etc. removed as text-align should handle it */
    }

    /* --- Specific Content Wrappers & Text --- */
    .courses-wrapper,
    .faculty-wrapper,
    .accessibility-wrapper,
    .location-wrapper {
        padding: 10px;
        /* Reduced padding */
        margin-left: 0;
        margin-right: 0;
    }

    .princip {
        padding: 15px 10px;
        /* Adjust padding */
        padding-top: 20px;
        text-align: left !important;
        /* Ensure left alignment */
        word-spacing: normal !important;
        /* Ensure normal word spacing */
    }

    .aboutschool {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left !important;
        /* Override potential justify */
        word-spacing: normal !important;
        /* Override potential word-spacing issues */
    }

    .news-announcements {
        width: 100%;
        float: none !important;
        padding: 10px 5px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        margin-top: 15px;
        /* Adjust space */
    }

    .news-announcements h3 {
        font-size: 1.15em;
        /* Adjust size */
        margin-bottom: 8px;
    }

    .train-marquee {
        padding: 8px 5px;
        /* Adjust padding */
        margin-left: 0;
        margin-right: 0;
    }

    .train-marquee p {
        font-size: 0.9em;
        /* Adjust size */
    }

    .educational-resources h2 {
        font-size: 1.4em;
        /* Adjust size */
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 15px;
    }

    .educational-resources .resource-box {
        margin-bottom: 15px;
        padding: 10px;
        /* Reduce padding */
        margin-left: 0;
        margin-right: 0;
    }

    .educational-resources .resource-box h3 {
        font-size: 1.05em;
        /* Adjust size */
    }

    /* --- Carousel Adjustments --- */
    #schoolBanner {
        min-height: 250px;
        /* Adjusted height */
        height: auto;
    }

    .carousel-inner>.item {
        text-align: center;
        /* Center the image within the item */
    }

    .carousel-inner>.item img {
        height: 250px;
        /* Fixed height for consistency */
        width: 100%;
        /* Let width adjust based on height/object-fit */
        max-height: none;
        /* Remove max-height */
        object-fit: cover;
        object-position: center;
        display: inline-block;
        /* Needed for text-align center */
    }

    .carousel-indicators {
        bottom: 5px;
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .carousel-caption {
        padding: 5px 8px;
        /* Adjust padding */
        bottom: 8px;
        /* Adjust position */
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 4px;
        font-size: 0.85em;
        /* Adjust base size */
        left: 5%;
        /* Add side margins */
        right: 5%;
        width: 90%;
        /* Ensure width fits with margins */
    }

    .carousel-caption h3 {
        font-size: 1.1em;
        margin-bottom: 2px;
    }

    .carousel-caption p {
        font-size: 0.9em;
        line-height: 1.2;
        display: block;
    }

    .carousel-control {
        width: 8%;
    }

    .carousel-control .glyphicon {
        font-size: 18px;
        top: 45%;
    }

    /* --- Chatbot & Accessibility Responsive Positioning --- */
    .chatbot-trigger {
        bottom: 70px;
        right: 10px;
    }

    .chatbot-trigger button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    .chatbot-container {
        width: 90%;
        max-width: 320px;
        height: 75%;
        max-height: 450px;
        bottom: 65px;
        right: 5px;
    }

    #accessibilityBtn {
        bottom: 15px;
        right: 10px;
    }

    #accessibilityBtn button {
        font-size: 1.4em;
        padding: 6px 11px;
    }

    #accessibilityPanel {
        width: 90%;
        max-width: 300px;
        height: auto;
        max-height: 80vh;
        bottom: 60px;
        right: 5px;
        overflow-y: auto;
        margin-top: 40%;
    }

    #accessibilityPanel .accessibility-option button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #accessibilityPanel .accessibility-panel-header h3 {
        font-size: 1.2em;
    }

    #accessibilityPanel .accessibility-option h4 {
        font-size: 1.0em;
    }
}

/* Social Media Platform Icons */
.platform-icon.facebook {
    background-color: #1877f2;
    color: white;
}

.platform-icon.twitter {
    background-color: #1da1f2;
    color: white;
}

.platform-icon.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white;
}

/* Newsletter Input Styling Upgrade */
.newsletter-signup-footer input[type="email"] {
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
    margin-bottom: 10px;
    outline: none;
    transition: all 0.3s ease;
    background-color: #fff;
    color: #333;
}

/* Override previously added specific input styles to match new flex design */
.newsletter-signup-footer input[type="email"]:focus {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
}

.dark-mode .newsletter-signup-footer input[type="email"] {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #fff;
}


/* RESTORED Footer Styles */

/* Visitor Counter Pill */
.visitor-counter {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    /* Pill shape */
    padding: 10px 20px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    /* Split Left/Right */
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 550px;
    /* Limit width */
    margin: 0 auto;
    /* Center the pill itself */
}

.dark-mode .visitor-counter {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .visitor-counter:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Back to Top - Centered */
.back-to-top {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #8929F7;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
    line-height: 1.2;
    font-size: 1.9rem;
    padding: 0;
    margin: 0;
}

.back-to-top:hover {
    background-color: #6a1ebf;
    transform: translateY(-3px);
    color: white;
    text-decoration: none !important;
}

/* Copyright & Designer UI Enhanced */
.copyright-text {
    margin-bottom: 10px;
    color: #555;
    font-size: 0.85em;
    position: relative;
    padding-left: 25px;
    line-height: 1.6;
    text-align: left;
}

.copyright-text::before {
    content: "©";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
    color: #8929F7;
    font-weight: bold;
}

.footer-last-updated {
    font-size: 0.85em;
    color: #777;
    margin: 5px 0 10px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
    display: block;
    text-align: left;
}

.footer-last-updated::before {
    content: "🕒";
    /* Clock Icon */
    position: absolute;
    left: 0;
    top: -1px;
    font-size: 1.1em;
}

.designer-credit {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.03);
    display: inline-block;
    padding: 5px 15px 5px 35px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.designer-credit::before {
    content: "👨‍💻";
    /* Coder Icon */
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 1.1em;
}

.dark-mode .copyright-text {
    color: #bbb;
}

.dark-mode .copyright-text::before {
    color: #9d50bb;
}

.dark-mode .footer-last-updated {
    color: #999;
}

.dark-mode .designer-credit {
    color: #aaa;
    background-color: rgba(255, 255, 255, 0.07);
}