<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model Capital College</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #1a4b8c;
            --secondary: #f9a826;
            --light: #f5f5f5;
            --dark: #333;
            --accent: #2e7d32;
        }

        body {
            line-height: 1.6;
            color: var(--dark);
            background-color: #fff;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .section-title p {
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--secondary);
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn:hover {
            background-color: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

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

        .logo img {
            height: 50px;
            margin-right: 10px;
        }

        .logo h1 {
            font-size: 1.8rem;
            color: var(--primary);
        }

        .logo span {
            color: var(--secondary);
        }

        nav ul {
            display: flex;
            list-style: none;
            align-items: center;
        }

        nav ul li {
            margin-left: 25px;
            position: relative;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 600;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: var(--primary);
        }

        .mobile-menu {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Login Dropdown Styles */
        .login-dropdown {
            position: relative;
        }

        .login-trigger {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            background-color: var(--primary);
            color: white;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .login-trigger:hover {
            background-color: var(--secondary);
        }

        .login-trigger i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        .login-dropdown.active .login-trigger i {
            transform: rotate(180deg);
        }

        .login-menu {
            position: absolute;
            top: 100%;
            right: 0;
            width: 200px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 100;
        }

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

        .login-option {
            display: block;
            padding: 12px 16px;
            text-decoration: none;
            color: var(--dark);
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .login-option:last-child {
            border-bottom: none;
        }

        .login-option:hover {
            background-color: #f9f9f9;
            padding-left: 20px;
        }

        .student-login {
            border-left: 4px solid #4caf50;
        }

        .teacher-login {
            border-left: 4px solid #2196f3;
        }

        .admin-login {
            border-left: 4px solid #f44336;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(26, 75, 140, 0.8), rgba(26, 75, 140, 0.9)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        /* About Section */
        .about {
            background-color: var(--light);
        }

        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

        .about-text {
            flex: 1;
        }

        .about-text h3 {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .about-text p {
            margin-bottom: 20px;
        }

        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Programs Section */
        .programs {
            background-color: white;
        }

        .programs-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .program-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .program-card:hover {
            transform: translateY(-10px);
        }

        .program-image {
            height: 200px;
            overflow: hidden;
        }

        .program-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .program-card:hover .program-image img {
            transform: scale(1.1);
        }

        .program-content {
            padding: 25px;
        }

        .program-content h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .program-content p {
            color: #666;
            margin-bottom: 20px;
        }

        /* Gallery Section */
        .gallery {
            background-color: var(--light);
        }

        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }

        .gallery-item {
            border-radius: 10px;
            overflow: hidden;
            height: 250px;
            position: relative;
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

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

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-overlay i {
            color: white;
            font-size: 2rem;
        }

        /* Lightbox Styles */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }

        .lightbox-content img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .lightbox-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            background: none;
            border: none;
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .lightbox-nav button {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .lightbox-nav button:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        /* Testimonials Section */
        .testimonials {
            background-color: white;
        }

        .testimonials-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .testimonial {
            background-color: var(--light);
            padding: 30px;
            border-radius: 10px;
            margin: 0 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .testimonial-content {
            margin-bottom: 20px;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
        }

        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }

        .author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-info h4 {
            color: var(--primary);
            margin-bottom: 5px;
        }

        .author-info p {
            color: #666;
            font-size: 0.9rem;
        }

        /* News Section */
        .news {
            background-color: var(--light);
        }

        .news-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .news-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .news-image {
            height: 200px;
            overflow: hidden;
        }

        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .news-card:hover .news-image img {
            transform: scale(1.1);
        }

        .news-content {
            padding: 25px;
        }

        .news-date {
            color: var(--secondary);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .news-content h3 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .news-content p {
            color: #666;
            margin-bottom: 20px;
        }

        /* Contact Section */
        .contact {
            background-color: white;
        }

        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }

        .contact-info h3 {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .contact-info p {
            margin-bottom: 20px;
        }

        .contact-details {
            margin-top: 30px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .contact-icon {
            background-color: var(--primary);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .contact-form {
            background-color: var(--light);
            padding: 30px;
            border-radius: 10px;
        }

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

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        textarea.form-control {
            height: 150px;
            resize: vertical;
        }

        /* Footer */
        footer {
            background-color: var(--primary);
            color: white;
            padding: 70px 0 0;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: var(--secondary);
        }

        .footer-col p {
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links li a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            background-color: var(--secondary);
            transform: translateY(-3px);
        }

        .footer-bottom {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .about-image {
                order: -1;
            }
        }

        @media (max-width: 768px) {
            nav ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: white;
                flex-direction: column;
                padding: 20px;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }

            nav ul.active {
                display: flex;
            }

            nav ul li {
                margin: 10px 0;
            }

            .mobile-menu {
                display: block;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .login-menu {
                position: static;
                width: 100%;
                box-shadow: none;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <img src="https://cdn-icons-png.flaticon.com/512/197/197560.png" alt="School Logo">
                <h1>Model Capital <span>College</span></h1>
            </div>
            <nav>
                <div class="mobile-menu">
                    <i class="fas fa-bars"></i>
                </div>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#programs">Programs</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li class="login-dropdown">
                        <div class="login-trigger">
                            Login <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="login-menu">
                            <a href="https://modelcapital.resultease.com.ng/student/login" class="login-option student-login">
                                <i class="fas fa-user-graduate"></i> Student Login
                            </a>
                            <a href="https://modelcapital.resultease.com.ng/teacher/login" class="login-option teacher-login">
                                <i class="fas fa-chalkboard-teacher"></i> Teacher Login
                            </a>
                            <a href="https://modelcapital.resultease.com.ng/admin/login" class="login-option admin-login">
                                <i class="fas fa-user-shield"></i> Admin Login
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="container hero-content">
            <h1>Shaping Future Leaders Through Quality Education</h1>
            <p>At Model Capital College, we provide a nurturing environment where students can grow academically, socially, and emotionally.</p>
            <a href="#about" class="btn">Learn More</a>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="section about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Our School</h2>
                <p>Model Capital College has been providing quality education for over 20 years, shaping young minds for a brighter tomorrow.</p>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>Our Mission & Vision</h3>
                    <p>Our mission is to provide a holistic education that develops students' intellectual, emotional, social, physical, artistic, creative and spiritual potentials.</p>
                    <p>We envision a community of lifelong learners who are prepared to make a positive impact in the world.</p>
                    <p>Our dedicated faculty and staff work tirelessly to create a safe, inclusive, and stimulating learning environment where every child can thrive.</p>
                    <a href="#contact" class="btn">Contact Us</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="School Building">
                </div>
            </div>
        </div>
    </section>

    <!-- Programs Section -->
    <section class="section programs" id="programs">
        <div class="container">
            <div class="section-title">
                <h2>Our Programs</h2>
                <p>We offer comprehensive educational programs tailored to different age groups and learning needs.</p>
            </div>
            <div class="programs-container">
                <!-- Nursery Program -->
                <div class="program-card">
                    <div class="program-image">
                        <img src="https://images.unsplash.com/photo-1519452575417-564c1401ecc0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nursery Program">
                    </div>
                    <div class="program-content">
                        <h3>Nursery Section</h3>
                        <p>Our nursery program provides a safe and stimulating environment for children aged 2-4 years, focusing on early development through play-based learning.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <!-- Primary Program -->
                <div class="program-card">
                    <div class="program-image">
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1422&q=80" alt="Primary Program">
                    </div>
                    <div class="program-content">
                        <h3>Primary Section</h3>
                        <p>Our primary program for grades 1-5 builds strong foundations in core subjects while encouraging creativity and critical thinking.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                
                <!-- Secondary Program -->
                <div class="program-card">
                    <div class="program-image">
                        <img src="https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Secondary Program">
                    </div>
                    <div class="program-content">
                        <h3>Secondary Section</h3>
                        <p>Our secondary program prepares students for higher education with a rigorous curriculum, extracurricular activities, and career guidance.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="section gallery" id="gallery">
        <div class="container">
            <div class="section-title">
                <h2>School Gallery</h2>
                <p>Take a visual journey through our campus, classrooms, and student activities.</p>
            </div>
            <div class="gallery-container">
                <div class="gallery-item" data-index="0">
                    <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Classroom">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item" data-index="1">
                    <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Science Lab">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item" data-index="2">
                    <img src="https://images.unsplash.com/photo-1541336032412-2048a678540d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Library">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item" data-index="3">
                    <img src="https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Sports">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item" data-index="4">
                    <img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1467&q=80" alt="Art Class">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item" data-index="5">
                    <img src="https://images.unsplash.com/photo-1462536943532-57a629f6cc60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Playground">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Lightbox -->
    <div class="lightbox" id="lightbox">
        <button class="lightbox-close" id="lightbox-close">
            <i class="fas fa-times"></i>
        </button>
        <div class="lightbox-content">
            <img id="lightbox-image" src="" alt="">
        </div>
        <div class="lightbox-nav">
            <button id="lightbox-prev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button id="lightbox-next">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>

    <!-- Testimonials Section -->
    <section class="section testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Parents & Students Say</h2>
                <p>Hear from our community about their experiences at Model Capital College.</p>
            </div>
            <div class="testimonials-container">
                <div class="testimonial">
                    <div class="testimonial-content">
                        <p>"Model Capital College has been a wonderful experience for our daughter. The teachers are dedicated, and the curriculum is well-rounded. We've seen tremendous growth in her confidence and academic abilities."</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson">
                        </div>
                        <div class="author-info">
                            <h4>Sarah Johnson</h4>
                            <p>Parent of Grade 3 Student</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- News Section -->
    <section class="section news" id="news">
        <div class="container">
            <div class="section-title">
                <h2>School News & Events</h2>
                <p>Stay updated with the latest happenings at our school.</p>
            </div>
            <div class="news-container">
                <div class="news-card">
                    <div class="news-image">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Science Fair">
                    </div>
                    <div class="news-content">
                        <div class="news-date">June 15, 2023</div>
                        <h3>Annual Science Fair Winners Announced</h3>
                        <p>Our students showcased incredible projects at this year's science fair. Congratulations to all participants and winners!</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-image">
                        <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sports Day">
                    </div>
                    <div class="news-content">
                        <div class="news-date">May 28, 2023</div>
                        <h3>Sports Day 2023: A Day of Fun and Competition</h3>
                        <p>Our annual sports day was a huge success with students participating in various track and field events.</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-image">
                        <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Graduation">
                    </div>
                    <div class="news-content">
                        <div class="news-date">April 10, 2023</div>
                        <h3>Class of 2023 Graduation Ceremony</h3>
                        <p>We celebrated the achievements of our graduating class with a memorable ceremony attended by families and faculty.</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="section contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
                <p>Get in touch with us for admissions, inquiries, or to schedule a campus tour.</p>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <p>We would love to hear from you. Feel free to reach out with any questions or to schedule a visit to our campus.</p>
                    
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Address</h4>
                                <p>Plot 15 Bello Sidi-Ali Street, Madalla Niger State</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Phone</h4>
                                <p>+234 8035 906 412</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>modelcapitalcollege@gmail.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" placeholder="Your Email">
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" class="form-control" placeholder="Your Message"></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>Model Capital College</h3>
                    <p>Providing quality education for over 25 years. Our mission is to nurture young minds and prepare them for a successful future.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#programs">Programs</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#news">News & Events</a></li>
                        <li><a href="#contact">Contact Us</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Programs</h3>
                    <ul class="footer-links">
                        <li><a href="#">Nursery Section</a></li>
                        <li><a href="#">Primary Section</a></li>
                        <li><a href="#">Secondary Section</a></li>
                        <li><a href="#">After School Programs</a></li>
                        <li><a href="#">Summer Camp</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Plot 15 Bello Sidi-Ali Street, Madalla Niger State</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>+234 8035 906 412</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <span>modelcapitalcollege@gmail.com</span>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2025 Model Capital College. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile Menu Toggle
        document.querySelector('.mobile-menu').addEventListener('click', function() {
            document.querySelector('nav ul').classList.toggle('active');
        });

        // Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    document.querySelector('nav ul').classList.remove('active');
                }
            });
        });

        // Login Dropdown Toggle
        const loginDropdown = document.querySelector('.login-dropdown');
        const loginTrigger = document.querySelector('.login-trigger');

        loginTrigger.addEventListener('click', function(e) {
            e.stopPropagation();
            loginDropdown.classList.toggle('active');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function() {
            loginDropdown.classList.remove('active');
        });

        // Prevent dropdown from closing when clicking inside
        loginDropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // Simple testimonial slider (would be more robust in a real implementation)
        const testimonials = [
            {
                content: "Bright Future Academy has been a wonderful experience for our daughter. The teachers are dedicated, and the curriculum is well-rounded. We've seen tremendous growth in her confidence and academic abilities.",
                name: "Sarah Johnson",
                role: "Parent of Grade 3 Student",
                image: "https://randomuser.me/api/portraits/women/45.jpg"
            },
            {
                content: "The secondary program prepared me excellently for university. The teachers went above and beyond to ensure we understood complex concepts and were always available for extra help.",
                name: "Michael Chen",
                role: "Alumni, Class of 2022",
                image: "https://randomuser.me/api/portraits/men/32.jpg"
            },
            {
                content: "As a teacher at Bright Future for over 10 years, I've seen firsthand how the school invests in both students and staff. It's a truly supportive community focused on holistic education.",
                name: "Dr. Emily Rodriguez",
                role: "Science Department Head",
                image: "https://randomuser.me/api/portraits/women/65.jpg"
            }
        ];

        let currentTestimonial = 0;
        const testimonialElement = document.querySelector('.testimonial');
        
        function rotateTestimonials() {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            const testimonial = testimonials[currentTestimonial];
            
            testimonialElement.innerHTML = `
                <div class="testimonial-content">
                    <p>"${testimonial.content}"</p>
                </div>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="${testimonial.image}" alt="${testimonial.name}">
                    </div>
                    <div class="author-info">
                        <h4>${testimonial.name}</h4>
                        <p>${testimonial.role}</p>
                    </div>
                </div>
            `;
        }

        // Change testimonial every 5 seconds
        setInterval(rotateTestimonials, 5000);

        // Lightbox functionality
        const lightbox = document.getElementById('lightbox');
        const lightboxImage = document.getElementById('lightbox-image');
        const lightboxClose = document.getElementById('lightbox-close');
        const lightboxPrev = document.getElementById('lightbox-prev');
        const lightboxNext = document.getElementById('lightbox-next');
        const galleryItems = document.querySelectorAll('.gallery-item');
        
        let currentImageIndex = 0;
        
        // Open lightbox when gallery item is clicked
        galleryItems.forEach(item => {
            item.addEventListener('click', function() {
                currentImageIndex = parseInt(this.getAttribute('data-index'));
                updateLightboxImage();
                lightbox.classList.add('active');
                document.body.style.overflow = 'hidden'; // Prevent scrolling
            });
        });
        
        // Close lightbox
        lightboxClose.addEventListener('click', function() {
            lightbox.classList.remove('active');
            document.body.style.overflow = 'auto'; // Re-enable scrolling
        });
        
        // Close lightbox when clicking outside the image
        lightbox.addEventListener('click', function(e) {
            if (e.target === lightbox) {
                lightbox.classList.remove('active');
                document.body.style.overflow = 'auto'; // Re-enable scrolling
            }
        });
        
        // Navigate to previous image
        lightboxPrev.addEventListener('click', function(e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex - 1 + galleryItems.length) % galleryItems.length;
            updateLightboxImage();
        });
        
        // Navigate to next image
        lightboxNext.addEventListener('click', function(e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex + 1) % galleryItems.length;
            updateLightboxImage();
        });
        
        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (!lightbox.classList.contains('active')) return;
            
            if (e.key === 'Escape') {
                lightbox.classList.remove('active');
                document.body.style.overflow = 'auto';
            } else if (e.key === 'ArrowLeft') {
                currentImageIndex = (currentImageIndex - 1 + galleryItems.length) % galleryItems.length;
                updateLightboxImage();
            } else if (e.key === 'ArrowRight') {
                currentImageIndex = (currentImageIndex + 1) % galleryItems.length;
                updateLightboxImage();
            }
        });
        
        function updateLightboxImage() {
            const imageSrc = galleryItems[currentImageIndex].querySelector('img').src;
            const imageAlt = galleryItems[currentImageIndex].querySelector('img').alt;
            lightboxImage.src = imageSrc;
            lightboxImage.alt = imageAlt;
        }
    </script>
</body>
</html>