/* Mobile Navigation Styles - Centralized for easy troubleshooting */

/* Mobile Toggle Button */
.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
    color: var(--dark);
    z-index: 1002;
    position: relative;
    pointer-events: auto !important;
}

/* Desktop: Hide mobile toggle */
@media (min-width: 993px) {
    .mobile-toggle {
        display: none !important;
    }
}

/* Mobile: Show mobile toggle and style navigation */
@media (max-width: 992px) {
    .mobile-toggle {
        display: block !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 9999 !important;
    }
    
    /* Center Apply Now button on mobile */
    .header-btn {
        margin: 15px auto !important;
        display: block !important;
        text-align: center !important;
        width: fit-content !important;
    }
    
    /* Hide top contact info on mobile */
    .top-contact {
        display: none;
    }
}

/* For pages using nav > ul structure (header.html) */
@media (max-width: 992px) {
    nav ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 20px 0;
        box-shadow: var(--shadow);
        display: none !important;
        z-index: 1000;
    }
    
    nav ul.show {
        display: flex !important;
    }
    
    /* Dropdown menus for ul structure */
    .dropdown-menu {
        position: static !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        padding-left: 20px !important;
    }
    
    .dropdown.show .dropdown-menu {
        display: block !important;
    }
}

/* For pages using nav > menu structure (index.php and others) */
@media (max-width: 992px) {
    nav > menu {
        display: none !important;
        pointer-events: none !important;
    }
    
    nav > menu.show {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--white);
        padding: 20px;
        box-shadow: var(--shadow);
        max-height: 70vh;
        overflow-y: auto;
        z-index: 9998 !important;
    }
    
    nav > menu > menuitem {
        width: 100%;
    }
    
    nav a {
        width: 100%;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
        display: block !important;
    }
    
    nav menuitem > menu {
        pointer-events: auto !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none;
        display: none !important;
        background: #f8f9fa;
        margin-left: 20px;
    }
    
    nav menuitem.show > menu {
        display: block !important;
    }
    
    nav > menu.show menuitem > a:not(.header-btn),
    nav > menu.show menuitem > menu a {
        pointer-events: auto !important;
        cursor: pointer !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }
}


/* COMPLETE MOBILE NAVIGATION FOR THE TOGGLE BUTTON - Governance style */

        @media (max-width: 992px) {

            .top-contact { display: none; }

            .mobile-toggle { 

                display: block !important; 

                cursor: pointer !important; 

                z-index: 9999 !important; 
                
                pointer-events: auto !important;

            }

            nav > menu { 

                display: none !important; 

                pointer-events: none !important; 

            }

            nav > menu.show { 

                display: flex !important; 

                flex-direction: column !important;

                position: absolute !important; 

                top: 100% !important; 

                left: 50% !important;

                right: 50% !important;

                transform: translateX(-50%) !important;

                width: 90vw !important;

                max-width: 400px !important;

                margin: 0 auto !important;

                background: white !important; 

                box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;

                border-radius: 12px !important;

                pointer-events: auto !important;

                z-index: 9998 !important;

            }

            nav menuitem > menu {

                pointer-events: auto !important;

                position: static !important;

                opacity: 1 !important; 

                visibility: visible !important; 

                box-shadow: none !important;

                display: none !important;

            }

            nav menuitem.show > menu {

                display: block !important;

            }

            nav > menu.show menuitem > a:not(.header-btn),

            nav > menu.show menuitem > menu a {

                pointer-events: auto !important;

                cursor: pointer !important;

                justify-content: center !important;

                text-align: center !important;

                padding: 12px 20px !important;

            }

            nav > menu.show menuitem:last-child a.header-btn {

                margin: 20px auto !important;

                display: block !important;

                width: fit-content !important;

            }

            .footer-grid { grid-template-columns: 1fr 1fr; }

            .stats-grid { grid-template-columns: 1fr 1fr; }

            .team-grid { grid-template-columns: repeat(2, 1fr); }

            .mvv-grid { grid-template-columns: 1fr; }

            .about-grid { grid-template-columns: 1fr; gap: 40px; }

            .about-image { order: -1; }

            .about-content { padding: 30px; }

            .section-header h2 { font-size: 2rem; }

            .about-content h2 { font-size: 1.8rem; }

        }

        

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

            .footer-grid { grid-template-columns: 1fr; }

            .page-header h1 { font-size: 2rem; }

            .stats-grid { grid-template-columns: 1fr; }

            .team-grid { grid-template-columns: 1fr; }

            .section-header h2 { font-size: 1.8rem; }

            .content-section { padding: 25px; }

            .motto-box { padding: 35px; }

        }

        @media (max-width: 576px) {

            .footer-grid { grid-template-columns: 1fr; }

            .page-header h1 { font-size: 1.5rem; }

            .page-header p { font-size: 1rem; }

            .stats-grid { grid-template-columns: 1fr; }

            .team-grid { grid-template-columns: 1fr; }

            .section-header h2 { font-size: 1.5rem; }

            .about-content h2 { font-size: 1.4rem; }

            .about-content h2 span { font-size: 1.2rem; }

            .about-content { padding: 20px; }

            .content-section { padding: 20px; font-size: 0.95rem; }

            .list-item { margin-bottom: 12px; }

            .motto-text { font-size: 1.5rem; }

            .motto-box { padding: 25px; }

            .read-more-btn { padding: 12px 24px; font-size: 0.9rem; }

        } */









        /* Dropdown */

        .dropdown { position: relative; display: inline-block; }

        .dropdown-toggle::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; margin-left: 6px; }

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

        .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 1001; margin-top: 10px; border-radius: 8px; overflow: visible; }

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

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

        .dropdown-menu li { display: block; width: 100%; border-bottom: 1px solid #eee; }

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

        .dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 25px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; }

        .dropdown-menu a { display: block; width: 100%; padding: 12px 20px !important; font-size: 14px; color: #333 !important; text-decoration: none; transition: all 0.3s; border-radius: 0 !important; }

        .dropdown-menu a:hover { background: #229020; color: #fff !important; padding-left: 25px !important; }

        /* Dropdown - Original Style with Slide Animation */

        nav menuitem {

            position:relative;

            display:block;

            opacity:1;

            cursor:pointer;

        }



        nav menuitem > menu {

            position: absolute;

            pointer-events:none;

            opacity: 0;

            visibility: hidden;

            transition: opacity 0.3s, visibility 0.3s;

        }

        

        menuitem:hover > menu,

        menuitem:focus-within > menu {

            pointer-events:initial;

            opacity: 1;

            visibility: visible;

        }

        

        /* Make nested menus visible on hover */

        nav menuitem menuitem:hover > menu,

        nav menuitem menuitem:focus-within > menu {

            pointer-events:initial;

            opacity: 1;

            visibility: visible;

        }

        

        nav > menu { display:flex; }



        nav > menu > menuitem { pointer-events: all; opacity:1; }

        menu menuitem a { white-space:nowrap; display:block; }

            



        menuitem:hover > menu > menuitem,

        menu:hover > menuitem{

            opacity:1;

        }

        nav > menu > menuitem menuitem menu {

            transform:translateX(100%);

            top:0; right:0;

        }



        nav a {

            transition: background 0.5s, color 0.5s, transform 0.5s;

            position:relative;

        }



        nav > menu > menuitem > a + menu:after{

            content: '';

            position:absolute;

            border:6px solid transparent;

            /* border-top: 6px solid #6B1423; */

            right:15px;

            top: 50%;

            transform: translateY(-50%);

        }

        nav menuitem > menu > menuitem > a + menu:after{ 

            content: '';

            position:absolute;

            border:6px solid transparent;

            border-left: 6px solid #6B1423;

            right:-12px;

            top: 50%;

            transform: translateY(-50%);

        }



        nav menuitem > menu {

            background: #fff;

            border-radius: 5px;

            padding: 8px 0;

            min-width: 200px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.15);

        }



        nav menuitem > menu menuitem a {

            color: #c9a227 !important;

            padding: 5px 10px;

            font-size: 0.80rem;

            font-weight: 400;

            /* transition: all 0.2s; */

             display: block;

            transform: translateY(10px);

        

}

    



        nav menuitem > menu menuitem a:hover {

            background: #229020;

            color: #fff !important;

            /* padding-left: 25px !important; */

        }



        nav > menu > menuitem > menu > menuitem{

            opacity: 1;

        }

        nav > menu > menuitem:hover > menu > menuitem,

        nav > menu > menuitem.hover > menu > menuitem{

            opacity: 1;

        }



        menuitem > menu > menuitem > menu > menuitem{

            opacity: 1;

        } 

        menuitem > menu > menuitem:hover > menu > menuitem,  

        menuitem > menu > menuitem.hover > menu > menuitem{  

            opacity: 1;

        }

        .mobile-toggle { display: none; font-size: 1.5rem; cursor: pointer; padding: 10px; color: var(--primary); transition: all 0.3s; }

        .mobile-toggle:hover { color: var(--secondary); }

        .mobile-toggle svg { width: 24px; height: 24px; }



        /* Hero Section */

        .hero { 

            position: relative; 

            height: clamp(350px, 60vh, 750px);

            overflow: hidden; 

            background-size: cover;

            background-position: center;

        }

        

        .hero .swiper {

            width: 100%;

            height: 100%;

        }

        

        .hero .swiper-slide {

            background-size: cover;

            background-position: right center;

            position: relative;

            display: flex;

            align-items: center;

            justify-content: flex-start;

        }

        /* hero-swiper-slide::before settings for the gradient in the background with a very light blur background color */

        .hero .swiper-slide::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 100%);

            z-index: 1;

        }

         .hero-content {

            position: relative;

            z-index: 10;

            width: 100%;

            padding: clamp(15px, 6vw, 60px) clamp(15px, 8vw, 80px);

            max-width: clamp(100%, 100%, 800px);

            animation: slideInFromLeft 0.8s ease-out;

 

 

            /* Added the welcome page content styles to the hero content styles for better performance and SEO, and to avoid CLS issues with the welcome page redirect. The background image and gradient can be applied to the hero section or the swiper slides as needed. */

            height: 90vh;

            width: 90%;

            /* background: linear-gradient(rgba(224, 226, 230, 0.1), rgba(26, 54, 93, 0.90)),  */

                        /* url('images/gallery/study.jpeg') center/cover; */

            display: flex;

            flex-direction: column;

            justify-content: flex-end;

            align-items: left;

            color: white;

            text-align: left;

            /* animation: fadeIn 1s ease-in; */

            padding-bottom: 80px;

        





        }