<?php
//include 'welcome_splash1.php';
//include 'welcome_splash2.php';
?>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E&SE Kotli - District School Management System</title>
    
    <!-- Meta tags for SEO -->
    <meta name="description" content="District School Management System for Kotli AJK - School information, registration, notifications, and educational resources">
    <meta name="keywords" content="school management, Kotli, education, AJK, district schools, teacher registration">
    <meta property="og:title" content="E&SE Kotli - District School Management System">
    <meta property="og:description" content="Official portal for school management in Kotli district">
    <meta property="og:image" content="images/Header.jpg">
    
    <!-- Favicon -->
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <style>

        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --success-color: #27ae60;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9f9f9;
            padding-top: 0 !important;
            width: 100%;
            min-width: 320px;
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        /* Fluid typography */
        @media (min-width: 768px) {
            html {
                font-size: calc(16px + (20 - 16) * (100vw - 768px) / (1920 - 768));
            }
        }
        
        @media (min-width: 1920px) {
            html {
                font-size: 20px;
            }
        }
        
        /* Navigation - Mobile Optimized */
        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 0.5rem 1rem;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1030;
        }
        
        .navbar-brand img {
            height: 35px;
            width: auto;
        }
        
        .nav-link {
            color: white !important;
            font-weight: 400;
            padding: 0.5rem 0.8rem;
            border-radius: 4px;
            transition: all 0.3s ease;
            font-size: 0.90rem;
        }
        
        .nav-link:hover, .nav-link:focus {
            background-color: rgba(255,255,255,0.1);
            color: var(--accent-color) !important;
        }
        
        /* Search Button and Searched Text - Mobile Optimized */
        .search-input {
            width: 200px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
            font-size: 0.875rem;
        }
        
        .search-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: var(--accent-color);
            color: white;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }
        
        .search-btn:hover {
            background-color: #e67e22;
            transform: translateY(-1px);
        }
        
        /* Highlight the Searched Text */
        mark.highlighted {
            background-color: yellow;
            color: black;
            padding: 0 2px;
            border-radius: 3px;
        }
        
        /* Active nav item styles */
        .navbar-dark .navbar-nav .nav-link.active,
        .navbar-dark .navbar-nav .nav-link.show,
        .navbar-dark .navbar-nav .nav-item.show .nav-link {
            color: #ffcc00 !important;
            font-weight: bold;
            background-color: transparent !important;
            position: relative;
        }

        .navbar-dark .navbar-nav .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background: #ffcc00;
            border-radius: 2px;
        }
        
        /* Hover states */
        .navbar-dark .navbar-nav .nav-link.active:hover,
        .navbar-dark .navbar-nav .nav-link.active:focus {
            color: #ffdb4d !important;
        }
        
        /* Dropdown Styles */
        .dropdown-menu {
            background-color: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            display: none;
            position: absolute;
            z-index: 1000;
            min-width: 200px;
            animation: dropdownFade 0.3s ease;
            border-top: 3px solid var(--accent-color);
        }

        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        /* Ensure dropdowns are positioned correctly */
        .dropdown {
            position: relative;
        }
        
        /* For the "Register" button (primary) */
        .btn-primary {
            background: linear-gradient(to right, var(--accent-color), #e67e22);
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover, .btn-primary:focus {
            background: linear-gradient(to right, #e67e22, #d35400);
            border-color: #e67e22;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        /* For dropdown items inside these buttons */
        .dropdown-item {
            padding: 0.6rem 1rem;
            transition: all 0.2s ease;
            color: #333;
            display: block;
            text-decoration: none;
            border-radius: 4px;
            margin: 2px 5px;
        }
        
        .dropdown-item:hover {
            background-color: var(--secondary-color);
            color: white;
            transform: translateX(5px);
        }
        
        /* Navbar Actions Container - Mobile Optimized */
        .nav-actions {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
        }
        
        /* Button group for login/register */
        .btn-group-mobile {
            display: flex;
            gap: 0.3rem;
        }
        
        .btn-group-mobile .btn {
            white-space: nowrap;
            flex-shrink: 0;
            border-radius: 6px !important;
        }
        
        /* Logo Table Styles - Mobile Optimized */
        .logo-custom-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 56px; /* Height of navbar */
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: none !important;
            position: relative;
            overflow: hidden;
        }

        .logo-custom-table::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to right, #2e7d32, #3498db, #f39c12);
        }
        
        .logo-custom-table td {
            padding: 1rem;
            vertical-align: middle;
            border: none !important;
            transition: all 0.3s ease;
        }

        .logo-custom-table:hover td {
            background: rgba(0,0,0,0.01);
        }
        
        .logo-col-1, .logo-col-3 {
            text-align: center;
            width: 15%;
        }
        
        .logo-col-2 {
            text-align: center;
            width: 70%;
        }
        
        .logo-col-2 p {
            margin: 0.2rem 0;
            line-height: 1.1;
            font-family: 'Montserrat', sans-serif;
        }
        
        .main-title {
            font-size: clamp(1.5rem, 3.5vw, 2.5rem);
            font-weight: 800;
            background: linear-gradient(to right, #006600, #009900);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            margin-bottom: 0.5rem;
        }
        
        .sub-title {
            font-size: clamp(1rem, 2vw, 1.5rem);
            color: var(--dark-color);
            font-weight: 500;
        }
        
        .logo-custom-table img {
            max-width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }

        .logo-custom-table:hover img {
            transform: scale(1.05);
        }
        
        /* Hero Section - Mobile Optimized */
        .hero-section {
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        
        .carousel-item {
            height: calc(100vh - 56px - 150px); /* Adjust for navbar and logo table */
            min-height: 400px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
            z-index: 1;
        }
        
        .carousel-item img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .carousel-item:hover img {
            transform: scale(1.05);
        }
        
        .carousel-caption {
            background: rgba(0, 0, 0, 0.7);
            padding: 2rem;
            border-radius: 12px;
            bottom: 20%;
            left: 5%;
            right: 5%;
            width: 90%;
            z-index: 2;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .carousel-caption h3 {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .carousel-caption p {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: #f0f0f0;
        }
        
        /* Updated News Ticker Styles - Mobile Optimized */
        .news-ticker {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.75rem 0;
            margin: 1.5rem 0;
            overflow: hidden;
            position: relative;
        }

        .news-ticker::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(to right, transparent, var(--accent-color), transparent);
        }

        .news-container {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
        }

        .news-label {
            background: linear-gradient(135deg, var(--accent-color), #e67e22);
            padding: 0.6rem 1.2rem;
            font-weight: 600;
            margin-right: 1.25rem;
            border-radius: 6px;
            flex-shrink: 0;
            z-index: 1;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .news-content-wrapper {
            flex-grow: 1;
            overflow: hidden;
            position: relative;
            height: 1.5em;
        }

        .news-content {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: ticker 15s linear infinite;
            position: absolute;
            top: 0;
            left: 0;
            font-weight: 500;
        }

        .news-ticker:hover .news-content {
            animation-play-state: paused;
        }

        @keyframes ticker {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        
        /* Stats Section - Mobile Optimized */
        .stats-section {
            padding: 2rem 0;
            background: linear-gradient(135deg, var(--primary-color), #34495e);
            color: white;
            margin: 2rem 0;
            position: relative;
            overflow: hidden;
        }

        .stats-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="1"/></svg>');
            background-size: 200px;
        }
        
        .stat-item {
            position: relative;
            z-index: 1;
            padding: 1.5rem !important;
            transition: all 0.3s ease;
            border-radius: 10px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .stat-item:hover {
            transform: translateY(-5px);
            background: rgba(255,255,255,0.15);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .stat-number {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            color: var(--accent-color);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 1.1rem;
            color: rgba(255,255,255,0.9);
            font-weight: 500;
        }
        
        /* Accordion */
        .accordion-button {
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .accordion-button:not(.collapsed) {
            color: var(--accent-color);
            background-color: rgba(243, 156, 18, 0.1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232c3e50'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transition: transform 0.3s ease;
        }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f39c12'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transform: rotate(-180deg);
        }
        
        /* Footer - Mobile Optimized with Unique Classes */
        .footer-mobile-optimized {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            font-size: 0.875rem;
            margin-top: auto;
        }
        
        .footer-logo-mobile {
            height: 35px;
            width: auto;
            max-width: 150px;
        }
        
        .footer-content {
			margin-bottom: 0.25rem !important; /* Reduced from default */
            /* Additional footer content styles if needed */
        }
        
        .footer-text {
            /* Additional footer text styles if needed */
			margin-bottom: 0.1rem !important; /* Reduce bottom margin */
    		line-height: 1.2 !important; /* Adjust line height */
        }
        
        /* Ensure footer stays at bottom with unique classes */
        .footer-layout-helper {
            height: 100%;
        }
        
        .footer-body-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .footer-content-container {
            flex: 1 0 auto;
        }
        
		.navbar-nav {
			flex-wrap: nowrap;
			white-space: nowrap;
		}
		
		.nav-item {
			flex-shrink: 0;
		}
		
        /* ========== MOBILE RESPONSIVE STYLES ========== */
        
        /* Large Tablets and Small Desktops */
        @media (max-width: 992px) {
            .navbar-nav {
                padding-top: 1rem;
            }
            
            .nav-item {
                margin-bottom: 0.5rem;
            }
            
            .nav-actions {
                margin: 1rem 0;
                justify-content: flex-start;
            }
            
            .logo-col-2 p {
                margin: 0.1rem 0;
                line-height: 1;
            }
            
            .main-title {
                font-size: clamp(1.3rem, 3.5vw, 2rem);
            }
            
            .sub-title {
                font-size: clamp(0.9rem, 1.8vw, 1.3rem);
            }
            
            /* Improve dropdown positioning */
            .dropdown-menu {
                position: static !important;
                float: none !important;
                width: 100% !important;
                margin-top: 0.5rem !important;
                box-shadow: none;
                border: 1px solid rgba(0,0,0,0.1);
            }
            
            .carousel-item {
                height: calc(100vh - 56px - 130px);
                min-height: 350px;
            }

            .stat-item {
                padding: 1rem !important;
            }
            
            /* Mobile Responsive Footer */
            .footer-mobile-optimized {
                padding: 1.5rem 0 !important;
                font-size: 0.8rem;
            }
            
            .footer-logo-mobile {
                height: 30px;
                max-width: 120px;
                margin-bottom: 0.75rem !important;
            }
            
            .footer-content {
                gap: 0.5rem;
            }
        }
        
        /* Tablets */
        @media (max-width: 768px) {
            .hero-section {
                height: calc(100vh - 56px - 120px);
                min-height: 350px;
            }
            
            .carousel-caption {
                bottom: 10%;
                padding: 1.5rem;
            }
            
            .carousel-caption h3 {
                font-size: 1.5rem;
            }
            
            .news-container {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .news-label {
                margin-bottom: 0.75rem;
                margin-right: 0;
                width: 100%;
                text-align: center;
            }
            
            .news-content {
                white-space: normal;
                animation: none;
                padding-left: 0;
                position: static;
            }
            
            .logo-custom-table td {
                padding: 0.75rem;
            }
            
            .logo-col-1, .logo-col-3 {
                width: 20%;
            }
            
            .logo-col-2 {
                width: 60%;
            }
            
            .main-title {
                font-size: clamp(1.2rem, 3vw, 1.8rem);
                white-space: normal;
                line-height: 1.2;
            }
            
            .sub-title {
                font-size: clamp(0.8rem, 1.6vw, 1.1rem);
            }
            
            /* Adjust search bar for tablets */
            .search-input {
                width: 180px;
            }
            
            .nav-actions {
                gap: 0.4rem;
            }

            .accordion-button {
                font-size: 0.95rem;
                padding: 0.8rem 1rem;
            }
        }
        
        /* Mobile Phones */
        @media (max-width: 576px) {
            .navbar {
                padding: 0.4rem 0.75rem;
            }
            
            .navbar-brand img {
                height: 30px;
            }
            
            .navbar-toggler {
                padding: 0.2rem 0.4rem;
                font-size: 0.9rem;
            }
            
            /* Hero section mobile adjustments */
            .hero-section {
                height: calc(100vh - 56px - 100px);
                min-height: 250px;
            }
            
            .carousel-caption {
                padding: 1rem;
                bottom: 5%;
            }
            
            .carousel-caption h3 {
                font-size: 1.2rem;
                margin-bottom: 0.5rem;
            }
            
            .carousel-caption p {
                font-size: 0.9rem;
                display: none; /* Hide paragraph on very small screens */
            }
            
            .carousel-item {
                min-height: 200px;
            }
            
            /* Stats mobile adjustments */
            .stat-item {
                padding: 0.75rem !important;
                margin-bottom: 0.5rem;
            }
            
            .stat-number {
                font-size: 1.8rem;
            }
            
            .stat-label {
                font-size: 0.9rem;
            }
            
            /* Logo table mobile layout */
            .logo-custom-table {
                display: block;
                margin-top: 50px; /* Adjusted for smaller navbar */
            }
            
            .logo-custom-table tbody {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            
            .logo-custom-table tr {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            
            .logo-custom-table td {
                width: 100% !important;
                text-align: center !important;
                padding: 0.5rem;
            }
            
            .logo-col-2 {
                order: -1;
                margin-bottom: 0.5rem;
            }
            
            .main-title {
                font-size: 1.3rem;
                line-height: 1.3;
                margin-bottom: 0.3rem;
            }
            
            .sub-title {
                font-size: 0.9rem;
            }
            
            .logo-col-1, .logo-col-3 {
                width: 40%;
                padding: 0.3rem;
            }
            
            .logo-custom-table img {
                max-height: 60px;
                margin: 0 auto;
            }
            
            /* Mobile navigation actions - buttons in single line */
            .nav-actions {
                flex-direction: column;
                width: 100%;
                gap: 0.5rem;
                margin: 0.5rem 0;
                align-items: stretch;
            }
            
            /* Button group stays in single line */
            .btn-group-mobile {
                display: flex;
                gap: 0.3rem;
                justify-content: center;
            }
            
            .btn-group-mobile .btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.85rem;
                white-space: nowrap;
                flex: 1;
            }
            
            .input-group {
                width: 100% !important;
                margin-top: 0.5rem;
                flex: 1;
                min-width: 150px;
            }
            
            .search-input {
                width: 100%;
                font-size: 0.85rem;
            }
            
            /* Main content mobile adjustments */
            main.container {
                padding: 0 10px;
            }
            
            .display-4 {
                font-size: 2rem !important;
            }
            
            .accordion-button {
                font-size: 0.85rem;
                padding: 0.7rem 0.9rem;
            }
            
            .accordion-body img {
                width: 60px !important;
                height: 60px !important;
                margin-right: 10px !important;
            }
            
            .footer-mobile-optimized {
                padding: 1.25rem 0 !important;
                font-size: 0.75rem;
            }
            
            .footer-logo-mobile {
                height: 25px;
                max-width: 100px;
            }
            
            .footer-text {
                text-align: center !important;
                line-height: 1.4;
            }
            
            .footer-links {
				margin-top: 0.1rem !important; /* Reduce top margin */
    			line-height: 1 !important; /* Reduce line height for links */
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }

            .footer-links a {
                margin: 0 5px;
                font-size: 0.8rem;
            }
            
            /* Improve dropdown menus for mobile */
            .dropdown-menu {
                position: static !important;
                transform: none !important;
                width: 100%;
                margin-top: 0.5rem;
            }
        }
        
        /* Small Mobile Phones */
        @media (max-width: 380px) {
            .navbar {
                padding: 0.3rem 0.5rem;
            }
            
            .main-title {
                font-size: 1.1rem;
            }
            
            .sub-title {
                font-size: 0.8rem;
            }
            
            .logo-custom-table td {
                padding: 0.3rem;
            }
            
            .logo-custom-table img {
                max-height: 50px;
            }
            
            .nav-link {
                font-size: 0.9rem;
                padding: 0.4rem 0.6rem;
            }
            
            /* Adjust button sizes for very small screens */
            .btn-group-mobile .btn {
                font-size: 0.75rem;
                padding: 0.3rem 0.6rem;
            }
            
            .input-group {
                min-width: 120px;
            }
            
            .search-input {
                font-size: 0.8rem;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .display-4 {
                font-size: 1.8rem !important;
            }

            .accordion-body {
                padding: 0.75rem;
            }

            .accordion-body img {
                width: 50px !important;
                height: 50px !important;
            }
            
            .footer-mobile-optimized {
                padding: 1rem 0 !important;
                font-size: 0.7rem;
            }
            
            .footer-logo-mobile {
                height: 20px;
                max-width: 80px;
            }
        }
        
        /* Extra Small Screens */
        @media (max-width: 320px) {
            /* Ensure buttons stay in single line with smaller text */
            .btn-group-mobile .btn {
                font-size: 0.7rem;
                padding: 0.25rem 0.5rem;
            }
            
            .nav-actions {
                gap: 0.3rem;
            }
            
            .input-group {
                min-width: 110px;
            }
            
            .main-title {
                font-size: 1rem;
            }

            .btn-group-mobile {
                flex-direction: column;
                gap: 0.3rem;
            }

            .btn-group-mobile .btn {
                width: 100%;
            }
        }
        
        /* Fix for very tall screens */
        @media (max-height: 500px) and (orientation: landscape) {
            .navbar-collapse {
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .hero-section {
                height: calc(100vh - 56px - 80px);
                min-height: 200px;
            }

            .carousel-caption {
                padding: 0.5rem;
                bottom: 5%;
            }

            .carousel-caption h3 {
                font-size: 1rem;
                margin-bottom: 0.2rem;
            }
        }
        
        /* Add this to animated elements */
        .animate__animated {
            will-change: transform, opacity;
        }
        
        /* Simple dropdown arrow */
        .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0.3em solid;
            border-right: 0.3em solid transparent;
            border-bottom: 0;
            border-left: 0.3em solid transparent;
            transition: transform 0.3s ease;
        }

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

        /* Loading animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Scroll to top button */
        .scroll-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .scroll-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-top:hover {
            background: #e67e22;
            transform: translateY(-5px) scale(1.1);
        }
    </style>
</head>

<body>
    <!-- Scroll to top button -->
    <button class="scroll-top" id="scrollTop" aria-label="Scroll to top">
        <i class="fas fa-chevron-up"></i>
    </button>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand d-lg-none" href="#">
                <img src="images/Head_Logo1.png" alt="District Kotli Logo" loading="lazy">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                    
                    <!-- Summary Dropdown -->
                    <li class="nav-item dropdown" id="summaryDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">
                            Summary
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="schools_info.php"><i class="fas fa-school me-2"></i>Schools</a></li>
                            <li><a class="dropdown-item" href="teacher&staff_info.php"><i class="fas fa-chalkboard-teacher me-2"></i>Teachers & Staff</a></li>
                            <li><a class="dropdown-item" href="students_info.php"><i class="fas fa-user-graduate me-2"></i>Students</a></li>
                            <li><a class="dropdown-item" href="overall_info.php"><i class="fas fa-chart-pie me-2"></i>Overall Summary</a></li>
                        </ul>
                    </li>
                    
                    <li class="nav-item"><a class="nav-link" href="org_chart.php">Org Chart</a></li>
                    
                    <!-- Private Schools Dropdown -->
                    <li class="nav-item dropdown" id="privateSchoolsDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">
                            Private Schools
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="reg_schools.php"><i class="fas fa-check-circle me-2"></i>Registered</a></li>
                            <li><a class="dropdown-item" href="unreg_schools.php"><i class="fas fa-clock me-2"></i>Unregistered</a></li>
                            <li><a class="dropdown-item" href="blacklist_schools.php"><i class="fas fa-ban me-2"></i>Blacklist</a></li>
                            <li><a class="dropdown-item" href="reg_procedure.php"><i class="fas fa-file-alt me-2"></i>Procedure</a></li>
                        </ul>
                    </li>
                    
                    <li class="nav-item"><a class="nav-link" href="notification_show.php">Notifications</a></li>
                    <li class="nav-item"><a class="nav-link" href="gallery_show.php">Gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact_us.php">Contact</a></li>
                    
                    <!-- More Dropdown Menu -->
                    <li class="nav-item dropdown" id="moreDropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">
                            More
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="http://www.ebekotli.dsisajk.net/index.php"><i class="fas fa-school me-2"></i>Elementary Board</a></li>
                            <li><a class="dropdown-item" href="examinations.php"><i class="fas fa-file-alt me-2"></i>Examinations</a></li>
                            <li><a class="dropdown-item" href="admissions.php"><i class="fas fa-user-graduate me-2"></i>Admissions</a></li>
                            <li><a class="dropdown-item" href="fort.php"><i class="fas fa-shield-alt me-2"></i>FORT</a></li>
                        </ul>
                    </li>
                </ul>

                <div class="nav-actions">
                    <!-- Login/Register buttons in a single line group -->
                    <div class="btn-group-mobile">
                        <div class="dropdown" id="loginDropdown">
                            <button class="btn btn-outline-light btn-sm dropdown-toggle" type="button" aria-expanded="false">
                                <i class="fas fa-sign-in-alt me-1"></i>Log In
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="login.php"><i class="fas fa-school me-2"></i>School Login</a></li>
                                <li><a class="dropdown-item" href="login_emp.php"><i class="fas fa-user-tie me-2"></i>Employee Login</a></li>
                            </ul>
                        </div>
                        
                        <div class="dropdown" id="registerDropdown">
                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" aria-expanded="false">
                                <i class="fas fa-user-plus me-1"></i>Register
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="register.php"><i class="fas fa-school me-2"></i>School Registration</a></li>
                                <li><a class="dropdown-item" href="register_emp.php"><i class="fas fa-user-tie me-2"></i>Employee Registration</a></li>
                            </ul>
                        </div> 
                    </div>
                    
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control search-input" placeholder="Search Site..." id="searchInput" aria-label="Search website">
                        <button class="btn search-btn" id="searchBtn" aria-label="Search"><i class="fas fa-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Logo Table -->
    <a href="index.php" style="display: block; text-decoration: none;">
        <table class="logo-custom-table" role="presentation">
            <tbody>
                <tr>
                    <td class="logo-col-1">
                        <img src="images/Head_Logo1.png" alt="District Kotli Logo" loading="lazy" width="120" height="120">
                    </td>
                    <td class="logo-col-2">
                        <div class="main-title">DISTRICT SCHOOLS INFORMATION SYSTEM</div>
                        <p class="sub-title"><strong>A Project of Elementary &amp; Secondary Education</strong></p>
                        <p class="sub-title">District Kotli AJ&amp;K</p>
                    </td>
                    <td class="logo-col-3">
                        <img src="images/Head_Logo2.png" alt="Government of AJK Logo" loading="lazy" width="120" height="120">
                    </td>
                </tr>
            </tbody>
        </table>
    </a>

    <!-- Hero Carousel -->
    <section class="hero-section" aria-label="Image carousel">
        <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/11.jpg" alt="Students learning in classroom" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Empowering Future Generations</h3>
                        <p>Quality education for all students across Kotli district</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/2.jpg" alt="School building with modern architecture" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Modern Educational Facilities</h3>
                        <p>State-of-the-art infrastructure for better learning</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/Header.jpg" alt="Teacher helping students in classroom" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Dedicated Educators</h3>
                        <p>Committed teachers shaping young minds</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/3.jpg" alt="Students conducting science experiment in lab" loading="lazy" width="1200" height="800">
                    <div class="carousel-caption animate__animated" data-animation="animate__fadeIn">
                        <h3>Hands-on Learning</h3>
                        <p>Practical education for real-world success</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev" aria-label="Previous slide">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next" aria-label="Next slide">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
        </div>
    </section>

    <!-- News Ticker -->
    <div class="news-ticker" role="region" aria-label="Latest news">
        <div class="container">
            <div class="news-container">
                <div class="news-label animate__animated animate__pulse animate__infinite">
                    <i class="fas fa-bullhorn me-2"></i>LATEST NEWS
                </div>
                <div class="news-content-wrapper">
                    <div class="news-content" id="newsContent" aria-live="polite">
                        Loading latest updates... 
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- District Stats -->
    <section class="stats-section" aria-label="District statistics">
        <div class="container">
            <div class="row g-3">
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="schoolsCount">0</div>
                        <div class="stat-label">Schools</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="studentsCount">0</div>
                        <div class="stat-label">Students</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="teachersCount">0</div>
                        <div class="stat-label">Teachers</div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item text-center p-3">
                        <div class="stat-number" id="successRate">0%</div>
                        <div class="stat-label">Success Rate</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container my-5">
        <div class="text-center mb-5">
            <h1 class="display-4 fw-bold mb-3">Welcome to E&SE Kotli District</h1>
            <p class="lead">
                Committed to providing quality education and fostering academic excellence across all schools in our district.
            </p>
        </div>
        
        <!-- Messages Accordion -->
        <div class="accordion mb-5" id="messagesAccordion">
            <div class="accordion-item border-0 shadow-sm mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMinister" aria-expanded="true" aria-controls="collapseMinister">
                        <i class="fas fa-user-tie me-2"></i>Message From Minister E&SE
                    </button>
                </h2>
                <div id="collapseMinister" class="accordion-collapse collapse show" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/Minister.jpg" loading="lazy" class="rounded-circle me-3" alt="Minister E&SE" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="accordion-item border-0 shadow-sm mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSecretary" aria-expanded="false" aria-controls="collapseSecretary">
                        <i class="fas fa-user-graduate me-2"></i>Message From Secretary E&SE
                    </button>
                </h2>
                <div id="collapseSecretary" class="accordion-collapse collapse" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/Secretary.jpg" loading="lazy" class="rounded-circle me-3" alt="Secretary E&SE" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="accordion-item border-0 shadow-sm">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDEO" aria-expanded="false" aria-controls="collapseDEO">
                        <i class="fas fa-user-shield me-2"></i>Message From DEO
                    </button>
                </h2>
                <div id="collapseDEO" class="accordion-collapse collapse" data-bs-parent="#messagesAccordion">
                    <div class="accordion-body">
                        <div class="d-flex align-items-start">
                            <img src="images/DEO_M.jpg" loading="lazy" class="rounded-circle me-3" alt="District Education Officer" width="80" height="80">
                            <div>
                                <h5 class="mb-2">Loading...</h5>
                                <p class="mb-0" style="text-align: justify;">Loading message...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- Footer (Updated to match Code 1) -->
<footer class="footer-mobile-optimized py-3">
    <div class="container">
        <div class="footer-content d-flex flex-column flex-md-row align-items-center justify-content-center mb-2">
            <img src="images/Head_Logo1.png" class="footer-logo-mobile me-md-3 mb-2 mb-md-0" alt="District Logo" loading="lazy">
            <div class="footer-text text-center text-md-start small">
                Copyright <sup>©</sup> <span id="currentYear"></span> - All Rights Reserved To E&SE District Kotli AJK
            </div>
        </div>
        <div class="footer-links text-center">
            <a href="index.php">Home</a> |
            <a href="contact_us.php">Contact</a> |
            <a href="privacy.php">Privacy Policy</a> |
            <a href="terms.php">Terms of Service</a>
        </div>
    </div>
</footer>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM Ready Function
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize all components
            initializeCarousel();
            setCurrentYear();
            loadMessages();
            fetchNews();
            animateStats();
            setActiveNavItem();
            initScrollAnimations();
            initializeAllDropdowns();
            initScrollToTop();
            initSearch();
            enableLazyLoading();
            
            // Apply footer layout classes
            applyFooterLayout();
            handleMobileFooter();
            
            // Show welcome popup after 1 second
            setTimeout(() => {
                const welcomePopup = document.getElementById('welcomePopup');
                if (welcomePopup && !sessionStorage.getItem('welcomeShown')) {
                    welcomePopup.style.display = 'flex';
                    sessionStorage.setItem('welcomeShown', 'true');
                }
            }, 1000);
        });

        // Initialize carousel
        function initializeCarousel() {
            const myCarousel = document.querySelector('#mainCarousel');
            if (myCarousel) {
                const carousel = new bootstrap.Carousel(myCarousel, {
                    interval: 3000,
                    ride: 'carousel',
                    wrap: true,
                    pause: false
                });
                
                const carouselInner = document.querySelector('.carousel-inner');
                if (carouselInner) {

                    carouselInner.style.transition = 'transform 0.6s ease-in-out';
                }
            }
        }

        // Set current year in footer
        function setCurrentYear() {
            document.getElementById('currentYear').textContent = new Date().getFullYear();
        }

        // Close welcome popup
        function closeWelcome() {
            const welcomePopup = document.getElementById('welcomePopup');
            if (welcomePopup) {
                welcomePopup.style.display = 'none';
            }
        }

        // Load messages from JSON
        async function loadMessages() {
            try {
                const response = await fetch('data/messages.json');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const messages = await response.json();
                
                if (!messages || typeof messages !== 'object') {
                    throw new Error('Invalid data format');
                }
                
                updateMessage('#collapseMinister', messages.minister);
                updateMessage('#collapseSecretary', messages.secretary);
                updateMessage('#collapseDEO', messages.deo);
                
            } catch (error) {
                console.error('Error loading messages:', error);
                showErrorMessage();
            }
        }
        
        function updateMessage(selector, data) {
            const section = document.querySelector(`${selector} .accordion-body`);
            if (section && data) {
                const h5 = section.querySelector('h5');
                const p = section.querySelector('p');
                if (h5) h5.textContent = data.title || 'Content Unavailable';
                if (p) p.textContent = data.content || 'Please try again later.';
            }
        }
        
        function showErrorMessage() {
            document.querySelectorAll('.accordion-body').forEach(section => {
                const h5 = section.querySelector('h5');
                const p = section.querySelector('p');
                if (h5) h5.textContent = 'Content Unavailable';
                if (p) p.textContent = 'Please try again later or contact support.';
            });
        }
        
        // Fetch news with hover handling
        async function fetchNews() {
            try {
                const response = await fetch('data/news.txt');
                if (!response.ok) {
                    throw new Error(`Network error: ${response.status}`);
                }
                const newsText = await response.text();
                const newsContent = document.getElementById('newsContent');
                
                if (newsContent) {
                    const newsItems = newsText.split('|').map(item => item.trim()).filter(item => item);
                    const formattedNews = newsItems.join(' | ');
                    
                    newsContent.textContent = formattedNews || 'No news updates available.';
                    restartTickerAnimation();
                }
            } catch (error) {
                console.error('Error fetching news:', error);
                const newsContent = document.getElementById('newsContent');
                if (newsContent) {
                    newsContent.textContent = 'Important: Updates are loading...';
                }
            }
        }
        
        function restartTickerAnimation() {
            const newsContent = document.getElementById('newsContent');
            const wrapper = newsContent ? newsContent.parentElement : null;
            
            if (!newsContent || !wrapper) return;
            
            const textWidth = newsContent.scrollWidth;
            const containerWidth = wrapper.clientWidth;
            
            if (textWidth > containerWidth) {
                const duration = Math.max(10, textWidth / 100);
                newsContent.style.animation = `ticker ${duration}s linear infinite`;
                
                newsContent.onmouseenter = () => newsContent.style.animationPlayState = 'paused';
                newsContent.onmouseleave = () => newsContent.style.animationPlayState = 'running';
            } else {
                newsContent.style.animation = 'none';
            }
        }
        
        // Animate statistics counting
        function animateStats() {
            animateValue('schoolsCount', 0, 152, 2000);
            animateValue('studentsCount', 0, 45600, 2000);
            animateValue('teachersCount', 0, 2100, 2000);
            animateValue('successRate', 0, 94, 2000, '%');
        }
        
        function animateValue(id, start, end, duration, suffix = '') {
            const element = document.getElementById(id);
            if (!element) return;
            
            let startTime = null;
            
            const animationStep = (timestamp) => {
                if (!startTime) startTime = timestamp;
                const progress = Math.min((timestamp - startTime) / duration, 1);
                const value = Math.floor(progress * (end - start) + start);
                element.textContent = suffix ? `${value}${suffix}` : value.toLocaleString();
                if (progress < 1) {
                    requestAnimationFrame(animationStep);
                }
            };
            
            requestAnimationFrame(animationStep);
        }
        
        // Set active navigation item - IMPROVED VERSION
        function setActiveNavItem() {
            const currentPath = window.location.pathname.split('/').pop() || 'index.php';
            const homeLink = document.querySelector('.nav-link[href="index.php"]');
            
            // Reset all active states first
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // Define which pages belong to which dropdown
            const dropdownPages = {
                'summary': ['schools_info.php', 'teacher&staff_info.php', 'students_info.php', 'overall_info.php'],
                'private-schools': ['reg_schools.php', 'unreg_schools.php', 'blacklist_schools.php', 'reg_procedure.php']
            };
            
            // Check if current page belongs to a dropdown
            let parentDropdown = null;
            for (const [dropdownName, pages] of Object.entries(dropdownPages)) {
                if (pages.includes(currentPath)) {
                    parentDropdown = dropdownName;
                    break;
                }
            }
            
            if (parentDropdown) {
                // Highlight the parent dropdown
                const dropdownToggle = document.querySelector(`.nav-link.dropdown-toggle`);
                if (dropdownToggle && dropdownToggle.textContent.toLowerCase().includes(parentDropdown)) {
                    dropdownToggle.classList.add('active');
                }
            } else {
                // Set active based on current page for non-dropdown pages
                let activeFound = false;
                document.querySelectorAll('.nav-link').forEach(link => {
                    const linkPath = link.getAttribute('href')?.split('/').pop();
                    if (linkPath === currentPath) {
                        link.classList.add('active');
                        activeFound = true;
                    }
                });
                
                // If no active link found and we're on homepage, activate Home
                if (!activeFound && (currentPath === 'index.php' || currentPath === '')) {
                    homeLink.classList.add('active');
                }
            }
        }
        
        // Initialize scroll animations
        function initScrollAnimations() {
            const animateOnScroll = () => {
                document.querySelectorAll('[data-animation]').forEach(element => {
                    if (isElementInViewport(element)) {
                        const animation = element.dataset.animation;
                        if (animation) {
                            element.classList.add('animate__animated', animation);
                        }
                    }
                });
            };
            
            window.addEventListener('scroll', debounce(animateOnScroll, 100));
            animateOnScroll();
        }
        
        // Initialize all dropdowns
        function initializeAllDropdowns() {
            // Handle all dropdown toggles
            document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Get the dropdown menu
                    let menu;
                    if (this.tagName === 'BUTTON') {
                        // For button dropdowns (Login, Register)
                        menu = this.nextElementSibling;
                    } else {
                        // For nav link dropdowns (Summary, Private Schools, More)
                        menu = this.parentElement.querySelector('.dropdown-menu');
                    }
                    
                    if (menu) {
                        // Toggle current menu
                        const isShowing = menu.classList.contains('show');
                        
                        // Close all other dropdowns first
                        document.querySelectorAll('.dropdown-menu.show').forEach(function(otherMenu) {
                            if (otherMenu !== menu) {
                                otherMenu.classList.remove('show');
                            }
                        });
                        
                        // Toggle current menu
                        if (!isShowing) {
                            menu.classList.add('show');
                            this.classList.add('show');
                        } else {
                            menu.classList.remove('show');
                            this.classList.remove('show');
                        }
                    }
                });
            });
            
            // Close dropdowns when clicking outside
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.dropdown') && !e.target.closest('.nav-item.dropdown')) {
                    document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                        menu.classList.remove('show');
                    });
                    document.querySelectorAll('.dropdown-toggle.show').forEach(function(toggle) {
                        toggle.classList.remove('show');
                    });
                }
            });
            
            // Close dropdowns when clicking a dropdown item
            document.querySelectorAll('.dropdown-item').forEach(function(item) {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                        menu.classList.remove('show');
                    });
                    document.querySelectorAll('.dropdown-toggle.show').forEach(function(toggle) {
                        toggle.classList.remove('show');
                    });
                });
            });
            
            // Hover support for desktop
            if (window.innerWidth > 992) {
                document.querySelectorAll('.nav-item.dropdown').forEach(function(dropdown) {
                    dropdown.addEventListener('mouseenter', function() {
                        const menu = this.querySelector('.dropdown-menu');
                        const toggle = this.querySelector('.dropdown-toggle');
                        if (menu) {
                            menu.classList.add('show');
                            if (toggle) toggle.classList.add('show');
                        }
                    });
                    
                    dropdown.addEventListener('mouseleave', function() {
                        const menu = this.querySelector('.dropdown-menu');
                        const toggle = this.querySelector('.dropdown-toggle');
                        if (menu) {
                            menu.classList.remove('show');
                            if (toggle) toggle.classList.remove('show');
                        }
                    });
                });
            }
        }
        
        // Initialize scroll to top button
        function initScrollToTop() {
            const scrollTopBtn = document.getElementById('scrollTop');
            if (!scrollTopBtn) return;
            
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    scrollTopBtn.classList.add('visible');
                } else {
                    scrollTopBtn.classList.remove('visible');
                }
            });
            
            scrollTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
        
        // Initialize search functionality
        function initSearch() {
            const searchBtn = document.getElementById('searchBtn');
            const searchInput = document.getElementById('searchInput');
            
            if (!searchBtn || !searchInput) return;
            
            // Handle search button click
            searchBtn.addEventListener('click', function(e) {
                e.preventDefault();
                performSearch();
            });
            
            // Handle Enter key in search input
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    performSearch();
                }
            });
            
            function performSearch() {
                const searchTerm = searchInput.value.trim();
                if (searchTerm) {
                    window.location.href = `search_site.php?query=${encodeURIComponent(searchTerm)}`;
                } else {
                    alert('Please enter a search term');
                }
            }
        }
        
        // Enable lazy loading for all images
        function enableLazyLoading() {
            document.querySelectorAll('img').forEach(img => {
                if (!img.loading) {
                    img.loading = 'lazy';
                }
            });
        }
        
        // Mobile footer enhancements
        function handleMobileFooter() {
            const footer = document.querySelector('.footer-mobile-optimized');
            
            // Add touch-friendly padding on mobile
            if (window.innerWidth <= 768) {
                footer.style.padding = '1.5rem 0';
            }
            
            // Handle orientation changes
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 768) {
                    footer.style.padding = '1.5rem 0';
                } else {
                    footer.style.padding = '1rem 0';
                }
            });
        }
        
        // Apply footer layout classes to body and html
        function applyFooterLayout() {
            // Add classes to html and body for footer positioning
            document.documentElement.classList.add('footer-layout-helper');
            document.body.classList.add('footer-body-wrapper');
            
            // Find the main content container and add class
            const contentContainer = document.querySelector('.container');
            if (contentContainer) {
                contentContainer.classList.add('footer-content-container');
            }
        }
        
        // Helper function to check if element is in viewport
        function isElementInViewport(el) {
            if (!el) return false;
            const rect = el.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.75 &&
                rect.bottom >= 0
            );
        }
        
        // Debounce function for performance
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(context, args);
                }, wait);
            };
        }
        
        // Handle window resize
        let resizeTimeout;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
                restartTickerAnimation();
                handleMobileFooter();
            }, 250);
        });
    </script>
</body>
</html>

<?php include 'visitor_counter.php'; ?>
