/********** Template CSS **********/
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

:root {
    --primary: #28a745;
    --secondary: #2c5530;
    --light: #f8f9fa;
    --dark: #2c5530;
}

/* Global Font Family Override - Exclude Font Awesome Icons */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, button, input, textarea, select, label {
    font-family: 'Alice', serif !important;
}

/* Ensure Font Awesome icons use their correct font */
.fa, .fab, .fas, .far, .fal, .fad {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-semi-bold {
    font-weight: 700 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
    background-color: var(--primary) !important;
    border: none !important;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: var(--secondary) !important;
    transform: translateY(-5px);
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-family: 'Alice', serif;
    font-weight: 600;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover {
    background: linear-gradient(135deg, #90b629 0%, #a8c954 100%) !important;
    border-color: #90b629 !important;
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(144, 182, 41, 0.3);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 0px;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

/* Ensure site navbar sits above hero overlays and is visible */
#site-navbar {
    position: relative; /* keep normal flow but allow z-index */
    z-index: 2000; /* above hero overlays and carousels */
    background-color: rgba(255,255,255,0.95); /* slightly translucent white to prevent bleed-through */
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .dropdown-menu.fade-down {
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header carousel ***/
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

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

/* Ensure toggler is on top and clickable when offcanvas is open */
#site-navbar .navbar-toggler {
    z-index: 1060;
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    font-size: 22px;
    transition: .5s;
}

/* Lighter overlay for carousel slides */
.carousel-overlay {
    background: rgba(44, 85, 48, 0.22); /* lighter than before */
    transition: transform 1.2s ease, opacity 1.2s ease;
}

/* Ketchup effect: zoom-out slightly and translate upward */
.header-carousel .owl-item .img-zoom {
    transform: scale(1.06);
    transition: transform 1.2s ease;
}

.header-carousel .owl-item.active .img-zoom {
    transform: scale(1);
}

.header-carousel .owl-item .carousel-content {
    transition: transform 1.2s ease, opacity 1.2s ease;
}

.header-carousel .owl-item.active .carousel-content {
    transform: translateY(-10px) scale(1);
    opacity: 1;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.page-header {
    background: linear-gradient(rgba(24, 29, 56, .7), rgba(24, 29, 56, .7)), url(../img/carousel-1.jpg);
   /*  background-position: center center; */
    background-position: center 0%;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(15, 23, 43, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.section-title::before {
    position: absolute;
    content: "";
    width: calc(100% + 80px);
    height: 2px;
    top: 4px;
    left: -40px;
    background: var(--primary);
    z-index: -1;
}

.section-title::after {
    position: absolute;
    content: "";
    width: calc(100% + 120px);
    height: 2px;
    bottom: 5px;
    left: -60px;
    background: var(--primary);
    z-index: -1;
}

.section-title.text-start::before {
    width: calc(100% + 40px);
    left: 0;
}

.section-title.text-start::after {
    width: calc(100% + 60px);
    left: 0;
}


/*** Service (feature cards) ***/
.service-item {
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    border-radius: 14px;
    padding: 18px 12px;
    box-shadow: 0 6px 18px rgba(28, 40, 32, 0.06);
    transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s ease, background .36s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.service-item .p-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.service-item i {
    width: 96px;
    height: 96px;
    line-height: 96px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(40,167,69,0.12), rgba(40,167,69,0.06));
    color: var(--primary);
    display: inline-block;
    text-align: center;
    box-shadow: 0 6px 20px rgba(40,167,69,0.08);
    transition: transform .36s ease, box-shadow .36s ease;
}

.service-item h5 {
    margin-top: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #162029;
}

.service-item p {
    color: #6b7176;
    margin-top: 10px;
    line-height: 1.6;
}

.service-item:hover {
    transform: translateY(-10px) rotateZ(0.01deg);
    box-shadow: 0 18px 40px rgba(28, 40, 32, 0.12);
    /* subtle green tint instead of full green fill */
    background: linear-gradient(180deg, rgba(40,167,69,0.06), rgba(40,167,69,0.02));
}

.service-item:hover i {
    transform: scale(1.06) translateY(-3px);
    box-shadow: 0 22px 50px rgba(40,167,69,0.12);
    /* icon takes the lime-like primary color */
    color: var(--primary);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,250,1));
    border: 2px solid rgba(40,167,69,0.08);
}

.service-item:hover h5,
.service-item:hover p {
    color: #162029 !important;
}

@media (max-width: 576px) {
    .service-item i {
        width: 72px;
        height: 72px;
        line-height: 72px;
    }
    .service-item h5 { font-size: 1rem; }
}


/*** Categories & Courses ***/
.category img,
.course-item img {
    transition: .5s;
}

.category a:hover img,
.course-item:hover img {
    transform: scale(1.1);
}


/*** Team ***/
.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.1);
}

/* Ensure team photos are consistently cropped and sized */
.team-item .overflow-hidden {
    height: 320px;
}
.team-item .overflow-hidden img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}


/*** Footer ***/
.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    font-weight: normal;
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/*** Enhanced Carousel Animations ***/
.header-carousel .owl-carousel-item {
    overflow: hidden;
}

.header-carousel .owl-carousel-item img {
    transform: scale(1.1);
    transition: transform 8s ease-out;
}

.header-carousel .owl-carousel-item.active img {
    transform: scale(1);
}

/* Zoom out animation for carousel items */
@keyframes zoomOut {
    0% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Smooth slide transition */
@keyframes slideInKetchup {
    0% {
        transform: translateX(100%) scale(1.1);
        opacity: 0;
    }
    30% {
        transform: translateX(20%) scale(1.05);
        opacity: 0.7;
    }
    70% {
        transform: translateX(-5%) scale(1.02);
        opacity: 0.9;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Apply animations to carousel items */
.header-carousel .owl-item.active .owl-carousel-item {
    animation: zoomOut 3s ease-out forwards;
}

.header-carousel .owl-item.active .owl-carousel-item > div {
    animation: slideInKetchup 1.5s ease-out forwards;
}

/* Enhanced smooth transitions */
.header-carousel .owl-stage-outer {
    overflow: hidden;
}

.header-carousel .owl-stage {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text animation enhancements */
.header-carousel .animated {
    animation-duration: 1.8s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.header-carousel .slideInDown {
    animation-delay: 0.5s;
}

.header-carousel .slideInLeft {
    animation-delay: 1s;
}

.header-carousel .slideInRight {
    animation-delay: 1.2s;
}

/* Hover effects for better interactivity */
.header-carousel .owl-carousel-item:hover img {
    transform: scale(1.02);
    transition: transform 0.5s ease-out;
}

/* Enhanced text readability with lighter overlay */
.header-carousel .owl-carousel-item h1,
.header-carousel .owl-carousel-item h5,
.header-carousel .owl-carousel-item p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.header-carousel .owl-carousel-item h1 {
    font-weight: 800;
}

.header-carousel .owl-carousel-item h5 {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 25px;
    display: inline-block;
}

/* Smooth fade transitions between slides */
.header-carousel .owl-item {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.header-carousel .owl-item.active {
    opacity: 1;
}

/* Button hover effects */
.header-carousel .btn {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
}

.header-carousel .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/*** Navbar Overlay & Scrolled States ***/
/* Default overlay state - transparent background, white text
   Make the navbar fixed so the slider can sit flush to the top of the page.
   We will add/remove body padding via JS when switching to scrolled state so
   the white navbar doesn't overlap content. */
#site-navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 75px; /* matches .navbar-brand height used in template */
    --navbar-height: 75px;
    background: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

/* Overlay state - when at top of page
   Requirements: fully transparent background (no visible bar),
   white nav links sitting on top of the slider. Hide large brand area
   and CTA so only the menu links overlay the slider.
*/
#site-navbar.navbar-overlay {
    background: transparent !important;
    box-shadow: none !important;
}

/* For overlay: hide the logo image but show the school name in white so
   the brand is readable over the slider. Keep the CTA hidden. */
#site-navbar.navbar-overlay .navbar-brand img {
    display: inline-block !important;
    /* Add subtle shadow so the logo stands out on varied slide images */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    opacity: 1 !important;
    visibility: visible !important;
}
#site-navbar.navbar-overlay .navbar-brand h2 {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#site-navbar.navbar-overlay a.btn.btn-primary.d-none.d-lg-block {
    opacity: 0;
    visibility: hidden;
}

/* White nav links when overlaying */
#site-navbar.navbar-overlay .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* If dropdown indicator or caret exists, ensure it's white too */
#site-navbar.navbar-overlay .navbar-nav .dropdown-toggle::after {
    color: #ffffff; /* fallback */
}

/* Pages that use a light hero/header (e.g. application form) should keep
   dark nav text even when the navbar-overlay class is present. Add a
   body-level class `light-hero` to such pages to preserve contrast. */
body.light-hero #site-navbar.navbar-overlay .navbar-nav .nav-link,
body.light-hero #site-navbar.navbar-overlay .navbar-brand h2,
body.light-hero #site-navbar.navbar-overlay .navbar-toggler {
    color: var(--dark) !important;
    border-color: rgba(0,0,0,0.12) !important;
}
body.light-hero #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon {
    background-image: none !important;
}

/* Scrolled state - solid white background, dark text */
#site-navbar.navbar-scrolled {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#site-navbar.navbar-scrolled .navbar-nav .nav-link,
#site-navbar.navbar-scrolled .navbar-brand h2 {
    color: var(--dark) !important;
}

#site-navbar.navbar-scrolled .btn.btn-primary {
    color: #ffffff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Smooth transitions for all navbar elements */
#site-navbar .navbar-nav .nav-link,
#site-navbar .navbar-brand h2,
#site-navbar .btn {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Mobile responsiveness */
/* Mobile responsiveness: keep overlay transparent on small screens too */
@media (max-width: 991.98px) {
    #site-navbar.navbar-overlay {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Make the hamburger (navbar-toggler) white when overlay is active on small screens */
@media (max-width: 768px) {
    /* Bootstrap's default toggler uses background-image for the icon; override with white border and pseudo-element */
    #site-navbar.navbar-overlay .navbar-toggler {
        border-color: rgba(255,255,255,0.9);
    }
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon {
        background-image: none; /* remove default */
        position: relative;
        width: 24px;
        height: 16px;
    }
    /* draw three white bars */
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon::before,
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon::after,
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon div {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
    }
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon::before {
        top: 0;
    }
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon div {
        top: 7px;
    }
    #site-navbar.navbar-overlay .navbar-toggler .navbar-toggler-icon::after {
        bottom: 0;
    }
}

/* Small screens: hide only the slider description and CTAs, keep headers visible */
@media (max-width: 768px) {
    /* Hide the small description paragraph and the CTA buttons inside the carousel */
    .header-carousel .carousel-content p,
    .header-carousel .carousel-content .btn {
        display: none !important;
    }

    /* Brand inside the offcanvas panel */
    .offcanvas-brand {
        border-bottom: 1px solid rgba(0,0,0,0.06);
        margin-bottom: 8px;
    }
    .offcanvas-brand img {
        display: inline-block;
        vertical-align: middle;
    }
    .offcanvas-brand h5 {
        font-size: 18px;
        margin: 0;
        color: var(--dark);
        font-weight: 700;
    }


    /* Make the bootstrap collapse behave like a left-side offcanvas.
       Use transform (translateX) instead of left so the entire panel and its
       children move together (GPU-accelerated) and do not reveal content
       before the panel has fully arrived. */
    #navbarCollapse {
        position: fixed;
        top: 0;
        bottom: 0; /* ensure it stretches to bottom of viewport */
        left: 0; /* keep at left edge but hide via transform */
        width: 320px;
        height: 100vh; /* explicit full viewport height */
        min-height: 100vh; /* safety for mobile browsers */
        background: #ffffff;
        z-index: 1050;
        box-shadow: 6px 0 24px rgba(0,0,0,0.12);
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        padding: 1.5rem;
        /* allow scrolling of content, but prevent horizontal overflow */
        overflow-y: auto;
        overflow-x: hidden;
        will-change: transform;
    }

    /* When active, slide into view from the left using transform */
    #navbarCollapse.show-offcanvas {
        transform: translateX(0);
    }

    /* Prevent the Bootstrap collapse plugin from animating the element's height
       on small screens. The plugin toggles classes like .collapsing and sets
       inline heights which can cause menu items to appear before the panel
       finishes sliding. We disable that height animation here so the slide
       (left) transition is the only visible animation. */
    #navbarCollapse.collapsing {
        height: auto !important;
        transition: none !important;
        display: block !important;
        overflow: hidden;
    }

    /* Also ensure the collapsed state doesn't animate height */
    #navbarCollapse.collapse {
        transition: none !important;
        height: auto !important;
        display: block !important;
    }

    /* Ensure dropdowns expand inline inside the offcanvas */
    #navbarCollapse .dropdown-menu {
        position: static !important;
        float: none;
        display: none; /* toggled via JS by adding .show */
        margin: 0.5rem 0 0 0;
        box-shadow: none;
        border: 0;
        background-color: rgb(2, 22, 2, 0.8) !important;
    }

    /* Dark text colors inside the side panel */
    #navbarCollapse .nav-link,
    #navbarCollapse .dropdown-item {
        padding: 12px 0;
        color: var(--dark) !important;
    }

    /* Make nav list flow vertically and remove ms-auto so items don't get pushed out */
    #navbarCollapse .navbar-nav {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }

    #navbarCollapse .nav-item {
        width: 100%;
    }

    #navbarCollapse .nav-link {
        display: block;
        width: 100%;
        padding-left: 0;
    }

    /* Show dropdown when toggled via JS */
    #navbarCollapse .dropdown-menu.show {
        display: block !important;
        background-color: #549454 !important;
    }
}

/* Ensure that when overlay is active we still show dark text inside the offcanvas panel
   (this overrides the overlay white-link rule which is more specific). Also raise z-index. */
@media (max-width: 768px) {
    #site-navbar.navbar-overlay #navbarCollapse {
        z-index: 2000; /* on top of sliders */
        background: #ffffff !important;
    }
    #site-navbar.navbar-overlay #navbarCollapse .nav-link,
    #site-navbar.navbar-overlay #navbarCollapse .dropdown-item {
        color: var(--dark) !important;
    }
}

/* Stronger overrides to guarantee visibility of side menu items */
@media (max-width: 768px) {
    #navbarCollapse.show-offcanvas,
    #site-navbar.navbar-overlay #navbarCollapse.show-offcanvas {
        z-index: 2100 !important;
        background: #ffffff !important;
    }

    #navbarCollapse.show-offcanvas .navbar-nav,
    #site-navbar.navbar-overlay #navbarCollapse.show-offcanvas .navbar-nav {
        padding: 0 !important;
        margin: 0 !important;
    }

    #navbarCollapse.show-offcanvas .nav-link,
    #site-navbar.navbar-overlay #navbarCollapse.show-offcanvas .nav-link,
    #navbarCollapse.show-offcanvas .dropdown-item,
    #site-navbar.navbar-overlay #navbarCollapse.show-offcanvas .dropdown-item {
        color: var(--dark) !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* ensure any inherited white rules are overridden */
    #navbarCollapse.show-offcanvas .navbar-nav .nav-link,
    #site-navbar.navbar-overlay #navbarCollapse.show-offcanvas .navbar-nav .nav-link {
        color: var(--dark) !important;
    }
}


/* Align feature metrics to the left on smaller screens */
@media (max-width: 650px) {
    /* Force left alignment on the parent column */
    .welcome-section .col-lg-6 {
        text-align: left !important;
        display: block !important;
    }
    
    /* Target the specific row with g-3 mb-4 classes */
    .welcome-section .row.g-3.mb-4,
    .welcome-section .row.g-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        row-gap: 1rem;
    }
    
    /* Make each metric take full width and stack vertically */
    .welcome-section .row.g-3 .col-md-6,
    .welcome-section .row.g-3.mb-4 .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
    }
    
    /* Ensure flex containers align to the left */
    .welcome-section .d-flex.align-items-center,
    .welcome-section .col-md-6 .d-flex.align-items-center {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Keep icon from shrinking and positioned to the left */
    .welcome-section .feature-icon {
        flex-shrink: 0 !important;
        margin-right: 12px !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure span text is left-aligned */
    .welcome-section .fw-bold,
    .welcome-section span.fw-bold {
        text-align: left !important;
        display: inline-block !important;
        margin-left: 0 !important;
    }
    
    /* Override any container centering */
    .welcome-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    object-fit: contain;
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
    font-size: 18px;
}

/* Previous and Next buttons */
.modal-prev,
.modal-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px 20px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.modal-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.modal-prev {
    left: 0;
}

.modal-prev:hover,
.modal-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: #28a745;
}

/* Cursor pointer for clickable cards */
.program-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.program-card:hover {
    transform: scale(1.02);
}

/* Mobile responsive modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 80vh;
    }
    
    .modal-close {
        top: 10px;
        right: 20px;
        font-size: 40px;
    }
    
    .modal-prev,
    .modal-next {
        font-size: 20px;
        padding: 12px 16px;
    }
    
    .modal-caption {
        font-size: 14px;
        padding: 15px 10px;
    }
}