School Section Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bright Minds Academy</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
 
</head>
<body>
    <div class="container">
        
        <header class="main-header">
            <div class="logo-area">
                <div class="logo-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="logo-text">
                    <h1>Bright Minds Academy</h1>
                    <p>Excellence in Education Since 1995</p>
                </div>
            </div>
            <p class="header-tagline">Shaping future leaders through innovative education, personalized learning, and a commitment to academic excellence. Our holistic approach nurtures intellectual curiosity, creativity, and character development.</p>
            
            
            <div class="stats-bar">
                <div class="stat-item">
                    <div class="stat-number">2,500+</div>
                    <div class="stat-label">Students Enrolled</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">180+</div>
                    <div class="stat-label">Certified Faculty</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Graduation Rate</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">45+</div>
                    <div class="stat-label">Extracurricular Clubs</div>
                </div>
            </div>
        </header>
        
        
        <div class="nav-tabs">
            <button class="nav-tab active" data-filter="all">
                <i class="fas fa-school"></i> All Schools
            </button>
            <button class="nav-tab" data-filter="elementary">
                <i class="fas fa-child"></i> Elementary
            </button>
            <button class="nav-tab" data-filter="middle">
                <i class="fas fa-users"></i> Middle School
            </button>
            <button class="nav-tab" data-filter="highschool">
                <i class="fas fa-user-graduate"></i> High School
            </button>
            <button class="nav-tab" data-filter="specialized">
                <i class="fas fa-atom"></i> Specialized Programs
            </button>
        </div>
        
        
        <div class="school-cards-grid">
            
            <div class="school-card" data-category="elementary">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1562774053-701939374585?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29sbGVnZXxlbnwwfHwwfHx8MA%3D%3D" alt="Elementary School">
                    <div class="card-badge elementary">K-5</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">Bright Minds Elementary</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>123 Learning Lane, Education City</span>
                    </div>
                    
                    <p class="school-description">Our elementary program fosters curiosity and foundational skills through project-based learning, arts integration, and social-emotional development in a nurturing environment.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <div>
                                <div class="feature-text">18:1</div>
                                <div class="feature-subtext">Student-Teacher Ratio</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-paint-brush"></i>
                            </div>
                            <div>
                                <div class="feature-text">Arts Integrated</div>
                                <div class="feature-subtext">Curriculum</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-leaf"></i>
                            </div>
                            <div>
                                <div class="feature-text">Outdoor Learning</div>
                                <div class="feature-subtext">Environment</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="rating-value">4.7</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="school-card" data-category="middle">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Middle School">
                    <div class="card-badge middle">6-8</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">Bright Minds Middle School</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>456 Discovery Drive, Education City</span>
                    </div>
                    
                    <p class="school-description">Our middle school program emphasizes critical thinking, exploration, and identity development through interdisciplinary studies, leadership opportunities, and extracurricular exploration.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div>
                                <div class="feature-text">STEM Labs</div>
                                <div class="feature-subtext">Science & Technology</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-chess"></i>
                            </div>
                            <div>
                                <div class="feature-text">Elective Courses</div>
                                <div class="feature-subtext">28+ Options</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-hands-helping"></i>
                            </div>
                            <div>
                                <div class="feature-text">Advisory Program</div>
                                <div class="feature-subtext">Mentorship</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="rating-value">4.3</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="school-card" data-category="highschool">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1126&q=80" alt="High School">
                    <div class="card-badge highschool">9-12</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">Bright Minds High School</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>789 Academic Avenue, Education City</span>
                    </div>
                    
                    <p class="school-description">College-preparatory curriculum with AP courses, career pathways, and leadership development. Our graduates consistently gain admission to top-tier universities worldwide.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-university"></i>
                            </div>
                            <div>
                                <div class="feature-text">AP Courses</div>
                                <div class="feature-subtext">24+ Options</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <div>
                                <div class="feature-text">Internships</div>
                                <div class="feature-subtext">Career Readiness</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div>
                                <div class="feature-text">98%</div>
                                <div class="feature-subtext">College Acceptance</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="rating-value">4.9</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="school-card" data-category="specialized highschool">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="STEM Academy">
                    <div class="card-badge highschool">STEM ACADEMY</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">STEM Innovation Academy</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>101 Technology Way, Innovation District</span>
                    </div>
                    
                    <p class="school-description">Specialized program focusing on Science, Technology, Engineering, and Mathematics with state-of-the-art labs, industry partnerships, and project-based curriculum.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div>
                                <div class="feature-text">Robotics Lab</div>
                                <div class="feature-subtext">Advanced Facilities</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-code"></i>
                            </div>
                            <div>
                                <div class="feature-text">Coding Curriculum</div>
                                <div class="feature-subtext">K-12 Integration</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-industry"></i>
                            </div>
                            <div>
                                <div class="feature-text">Industry Partners</div>
                                <div class="feature-subtext">15+ Companies</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="rating-value">4.8</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="school-card" data-category="specialized">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1511735111819-9a3f7709049c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Arts Academy">
                    <div class="card-badge middle">ARTS ACADEMY</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">Performing & Visual Arts Academy</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>202 Creativity Blvd, Arts District</span>
                    </div>
                    
                    <p class="school-description">Comprehensive arts education with professional studios, performance spaces, and masterclasses from working artists. Students develop technical skills and creative expression.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-theater-masks"></i>
                            </div>
                            <div>
                                <div class="feature-text">Theater Program</div>
                                <div class="feature-subtext">Annual Productions</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-music"></i>
                            </div>
                            <div>
                                <div class="feature-text">Music Studios</div>
                                <div class="feature-subtext">Recording Facilities</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-palette"></i>
                            </div>
                            <div>
                                <div class="feature-text">Art Galleries</div>
                                <div class="feature-subtext">Student Exhibitions</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="rating-value">4.4</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="school-card" data-category="highschool specialized">
                <div class="card-header">
                    <img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="International School">
                    <div class="card-badge highschool">IB WORLD SCHOOL</div>
                </div>
                <div class="card-content">
                    <h3 class="school-name">International Baccalaureate School</h3>
                    
                    <div class="school-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>303 Global Circle, Education City</span>
                    </div>
                    
                    <p class="school-description">Fully authorized IB World School offering Primary Years, Middle Years, and Diploma Programs. Cultivating globally-minded citizens through inquiry-based learning.</p>
                    
                    <div class="school-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-globe-americas"></i>
                            </div>
                            <div>
                                <div class="feature-text">IB Diploma</div>
                                <div class="feature-subtext">Full Authorization</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-language"></i>
                            </div>
                            <div>
                                <div class="feature-text">Language Immersion</div>
                                <div class="feature-subtext">5 Languages</div>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div>
                                <div class="feature-text">Exchange Programs</div>
                                <div class="feature-subtext">12 Countries</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="rating">
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="rating-value">5.0</span>
                        </div>
                        <button class="btn-details">
                            <i class="fas fa-info-circle"></i> View Details
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        
        <section class="programs-section">
            <h2 class="section-title">Our Signature Programs</h2>
            <div class="programs-grid">
                <div class="program-card">
                    <div class="program-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="program-title">Robotics & AI</h3>
                    <p class="program-description">Students learn coding, engineering, and artificial intelligence through hands-on projects and competitions.</p>
                </div>
                
                <div class="program-card">
                    <div class="program-icon">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <h3 class="program-title">Environmental Science</h3>
                    <p class="program-description">Outdoor learning, sustainability projects, and ecological studies in our certified green campus.</p>
                </div>
                
                <div class="program-card">
                    <div class="program-icon">
                        <i class="fas fa-balance-scale"></i>
                    </div>
                    <h3 class="program-title">Debate & Model UN</h3>
                    <p class="program-description">Developing public speaking, critical thinking, and diplomacy skills through competitive debate.</p>
                </div>
                
                <div class="program-card">
                    <div class="program-icon">
                        <i class="fas fa-briefcase-medical"></i>
                    </div>
                    <h3 class="program-title">Medical Science</h3>
                    <p class="program-description">Pre-medical pathway with anatomy labs, research opportunities, and hospital internships.</p>
                </div>
            </div>
        </section>
        
        
        <div class="admissions-banner">
            <div class="banner-content">
                <h2>Admissions Open for 2024-25</h2>
                <p>Join our community of learners and innovators. Limited seats available across all grade levels. Schedule a campus tour or virtual open house to experience Bright Minds Academy firsthand.</p>
            </div>
            <button class="btn-apply" id="applyNow">
                <i class="fas fa-file-alt"></i> Apply Now
            </button>
        </div>
        
        
        <footer class="main-footer">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Bright Minds Academy</h3>
                    <p>Committed to academic excellence, character development, and preparing students for success in a rapidly changing world. Accredited by the National Association of Independent Schools.</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Admissions Process</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Academic Calendar</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> School Directory</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Parent Portal</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Careers at BMA</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Contact Information</h3>
                    <div class="contact-info">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>123 Education Boulevard, Learning City, LC 12345</div>
                    </div>
                    <div class="contact-info">
                        <i class="fas fa-phone-alt"></i>
                        <div>(555) 123-4567 (Admissions)</div>
                    </div>
                    <div class="contact-info">
                        <i class="fas fa-envelope"></i>
                        <div>admissions@brightmindsacademy.edu</div>
                    </div>
                    <div class="contact-info">
                        <i class="far fa-clock"></i>
                        <div>Office Hours: Mon-Fri 8:00am-5:00pm</div>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 Bright Minds Academy. All rights reserved. | Accredited by NAIS & AdvancedED | Non-discriminatory admissions policy</p>
                <p style="margin-top: 10px; font-size: 0.9rem;">Designed with <i class="fas fa-heart" style="color: #f9a826;"></i> for the future of education</p>
            </div>
        </footer>
    </div>
    
   
</body>
</html>

CSS

:root {
            --primary: #2c5aa0;
            --primary-light: #5a8ad4;
            --primary-dark: #1a3d7a;
            --secondary: #f9a826;
            --accent: #4caf50;
            --light: #f8f9fa;
            --dark: #1a237e;
            --text: #333333;
            --text-light: #666666;
            --white: #ffffff;
            --shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.12);
            --radius: 16px;
            --transition: all 0.4s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #f5f7ff 0%, #f0f4ff 100%);
            color: var(--text);
            line-height: 1.7;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Header */
        .main-header {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border-radius: var(--radius);
            padding: 40px;
            margin-bottom: 50px;
            color: var(--white);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        .main-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            transform: translate(30%, -30%);
        }
        
        .main-header::after {
            content: '';
            position: absolute;
            bottom: -100px;
            left: -100px;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50%;
        }
        
        .logo-area {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        .logo-icon {
            width: 80px;
            height: 80px;
            background: var(--white);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .logo-icon i {
            font-size: 2.8rem;
            color: var(--primary);
        }
        
        .logo-text h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.2rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .logo-text p {
            font-size: 1.2rem;
            opacity: 0.9;
            letter-spacing: 1px;
        }
        
        .header-tagline {
            font-size: 1.3rem;
            max-width: 800px;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
            line-height: 1.8;
        }
        
        .stats-bar {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: var(--radius);
            backdrop-filter: blur(10px);
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
            min-width: 150px;
        }
        
        .stat-number {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--secondary);
            line-height: 1;
            margin-bottom: 10px;
        }
        
        .stat-label {
            font-size: 1rem;
            font-weight: 500;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Navigation Tabs */
        .nav-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }
        
        .nav-tab {
            padding: 16px 32px;
            background: var(--white);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            color: var(--primary-dark);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.05rem;
            box-shadow: var(--shadow);
        }
        
        .nav-tab:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            color: var(--primary);
        }
        
        .nav-tab.active {
            background: var(--primary);
            color: var(--white);
            box-shadow: 0 10px 25px rgba(44, 90, 160, 0.3);
        }
        
        /* School Cards Grid */
        .school-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
        }
        
        /* School Card */
        .school-card {
            background: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .school-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-header {
            height: 220px;
            position: relative;
            overflow: hidden;
        }
        
        .card-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
        
        .school-card:hover .card-header img {
            transform: scale(1.08);
        }
        
        .card-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--secondary);
            color: var(--dark);
            padding: 10px 22px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            box-shadow: 0 5px 15px rgba(249, 168, 38, 0.3);
        }
        
        .card-badge.highschool {
            background: var(--accent);
            color: white;
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }
        
        .card-badge.middle {
            background: #9c27b0;
            color: white;
            box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3);
        }
        
        .card-badge.elementary {
            background: #ff9800;
            color: white;
            box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
        }
        
        .card-content {
            padding: 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .school-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 12px;
            line-height: 1.3;
        }
        
        .school-location {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: var(--text-light);
        }
        
        .school-location i {
            color: var(--primary);
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .school-description {
            color: var(--text-light);
            margin-bottom: 25px;
            line-height: 1.7;
            flex-grow: 1;
        }
        
        .school-features {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .feature-icon {
            width: 45px;
            height: 45px;
            background: rgba(44, 90, 160, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .feature-text {
            font-weight: 600;
            color: var(--dark);
        }
        
        .feature-subtext {
            font-size: 0.85rem;
            color: var(--text-light);
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }
        
        .rating {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stars {
            color: var(--secondary);
        }
        
        .rating-value {
            font-weight: 700;
            color: var(--dark);
            font-size: 1.2rem;
        }
        
        .reviews {
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        .btn-details {
            background: linear-gradient(to right, var(--primary), var(--primary-light));
            color: var(--white);
            border: none;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 8px 20px rgba(44, 90, 160, 0.3);
            letter-spacing: 0.5px;
        }
        
        .btn-details:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(44, 90, 160, 0.4);
        }
        
        /* Programs Section */
        .programs-section {
            background: var(--white);
            border-radius: var(--radius);
            padding: 50px;
            margin-bottom: 60px;
            box-shadow: var(--shadow);
        }
        
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 40px;
            text-align: center;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--secondary);
            border-radius: 2px;
        }
        
        .programs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .program-card {
            background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
            border-radius: var(--radius);
            padding: 35px 30px;
            text-align: center;
            transition: var(--transition);
            border: 1px solid rgba(44, 90, 160, 0.1);
        }
        
        .program-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(44, 90, 160, 0.2);
        }
        
        .program-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: var(--white);
            font-size: 2.2rem;
            box-shadow: 0 10px 20px rgba(44, 90, 160, 0.2);
        }
        
        .program-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 15px;
        }
        
        .program-description {
            color: var(--text-light);
            line-height: 1.7;
        }
        
        /* Admissions Banner */
        .admissions-banner {
            background: linear-gradient(135deg, var(--primary-dark), #3f51b5);
            border-radius: var(--radius);
            padding: 60px 50px;
            margin: 60px 0;
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            box-shadow: var(--shadow-hover);
            position: relative;
            overflow: hidden;
        }
        
        .admissions-banner::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .banner-content h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            margin-bottom: 20px;
        }
        
        .banner-content p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            line-height: 1.8;
        }
        
        .btn-apply {
            background: var(--secondary);
            color: var(--dark);
            border: none;
            padding: 18px 40px;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 2;
        }
        
        .btn-apply:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            background: #ffb74d;
        }
        
        /* Footer */
        .main-footer {
            background: var(--primary-dark);
            color: var(--white);
            padding: 60px 40px 40px;
            border-radius: var(--radius);
            margin-top: 60px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-section h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            margin-bottom: 25px;
            color: var(--secondary);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .footer-links a:hover {
            color: var(--secondary);
            transform: translateX(5px);
        }
        
        .contact-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            transition: var(--transition);
            font-size: 1.2rem;
        }
        
        .social-icon:hover {
            background: var(--secondary);
            color: var(--dark);
            transform: translateY(-5px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .school-card, .program-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .school-cards-grid {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                gap: 30px;
            }
        }
        
        @media (max-width: 992px) {
            .logo-text h1 {
                font-size: 2.6rem;
            }
            
            .admissions-banner {
                flex-direction: column;
                text-align: center;
                gap: 30px;
            }
            
            .banner-content h2 {
                font-size: 2.3rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .school-cards-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .logo-area {
                flex-direction: column;
                text-align: center;
            }
            
            .logo-icon {
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .logo-text h1 {
                font-size: 2.3rem;
            }
            
            .stats-bar {
                gap: 25px;
            }
            
            .stat-item {
                min-width: 120px;
            }
            
            .stat-number {
                font-size: 2.2rem;
            }
            
            .nav-tabs {
                gap: 10px;
            }
            
            .nav-tab {
                padding: 14px 24px;
                font-size: 0.95rem;
            }
            
            .programs-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .container {
                padding: 10px;
            }
            
            .main-header {
                padding: 30px 20px;
                margin-bottom: 40px;
            }
            
            .card-content {
                padding: 25px;
            }
            
            .school-name {
                font-size: 1.7rem;
            }
            
            .school-features {
                flex-direction: column;
                gap: 15px;
            }
            
            .card-footer {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }
            
            .btn-details {
                width: 100%;
                justify-content: center;
            }
            
            .programs-section {
                padding: 30px 20px;
            }
            
            .admissions-banner {
                padding: 40px 30px;
            }
        }

JavaScript

// Navigation filter functionality
        const navTabs = document.querySelectorAll('.nav-tab');
        const schoolCards = document.querySelectorAll('.school-card');
        
        navTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Update active tab
                navTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const filter = tab.getAttribute('data-filter');
                
                // Filter cards
                schoolCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category').includes(filter)) {
                        card.style.display = 'flex';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 400);
                    }
                });
            });
        });
        
        // Details button functionality
        const detailButtons = document.querySelectorAll('.btn-details');
        detailButtons.forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('.school-card');
                const schoolName = card.querySelector('.school-name').textContent;
                const schoolLocation = card.querySelector('.school-location span').textContent;
                const rating = card.querySelector('.rating-value').textContent;
                
                // Create modal for school details
                const modal = document.createElement('div');
                modal.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 10000;
                    animation: fadeIn 0.3s ease;
                    padding: 20px;
                `;
                
                modal.innerHTML = `
                    <div style="background: white; border-radius: var(--radius); padding: 40px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-hover); animation: slideUp 0.4s ease;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                            <h3 style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-dark);">${schoolName}</h3>
                            <button id="closeModal" style="background: none; border: none; font-size: 1.8rem; color: var(--text-light); cursor: pointer; transition: var(--transition);">
                                &times;
                            </button>
                        </div>
                        
                        <div style="display: flex; align-items: center; margin-bottom: 25px; padding: 20px; background: rgba(44, 90, 160, 0.05); border-radius: 12px;">
                            <div style="margin-right: 20px;">
                                <div style="font-weight: 700; color: var(--primary-dark); margin-bottom: 5px;">Location</div>
                                <div style="color: var(--text-light);">${schoolLocation}</div>
                            </div>
                            <div style="margin-right: 20px;">
                                <div style="font-weight: 700; color: var(--primary-dark); margin-bottom: 5px;">Rating</div>
                                <div style="color: var(--text-light); display: flex; align-items: center; gap: 5px;">
                                    <span style="color: var(--secondary);">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="${rating === '5.0' ? 'fas' : rating === '4.9' ? 'fas' : 'far'} fa-star"></i>
                                    </span>
                                    ${rating}/5.0
                                </div>
                            </div>
                            <div>
                                <div style="font-weight: 700; color: var(--primary-dark); margin-bottom: 5px;">Grade Levels</div>
                                <div style="color: var(--text-light);">${card.querySelector('.card-badge').textContent}</div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 30px;">
                            <h4 style="color: var(--primary-dark); margin-bottom: 15px; font-size: 1.3rem;">About This School</h4>
                            <p style="color: var(--text-light); line-height: 1.8; margin-bottom: 20px;">
                                ${card.querySelector('.school-description').textContent}
                            </p>
                            <p style="color: var(--text-light); line-height: 1.8;">
                                Bright Minds Academy provides a rigorous academic curriculum combined with comprehensive extracurricular programs. 
                                Our dedicated faculty are committed to personalized learning and student success. 
                                The school features state-of-the-art facilities including science labs, technology centers, arts studios, and athletic complexes.
                            </p>
                        </div>
                        
                        <div style="margin-bottom: 30px;">
                            <h4 style="color: var(--primary-dark); margin-bottom: 15px; font-size: 1.3rem;">Key Features</h4>
                            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">
                                ${Array.from(card.querySelectorAll('.feature-item')).map(item => `
                                    <div style="background: rgba(44, 90, 160, 0.05); padding: 15px; border-radius: 10px; text-align: center;">
                                        <div style="color: var(--primary); font-size: 1.5rem; margin-bottom: 10px;">
                                            ${item.querySelector('.feature-icon').innerHTML}
                                        </div>
                                        <div style="font-weight: 700; color: var(--dark); margin-bottom: 5px;">
                                            ${item.querySelector('.feature-text').textContent}
                                        </div>
                                        <div style="font-size: 0.9rem; color: var(--text-light);">
                                            ${item.querySelector('.feature-subtext').textContent}
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                        
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <button style="background: linear-gradient(to right, var(--primary), var(--primary-light)); color: white; border: none; padding: 16px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition); flex: 1; min-width: 200px;">
                                <i class="fas fa-calendar-alt"></i> Schedule Tour
                            </button>
                            <button style="background: var(--secondary); color: var(--dark); border: none; padding: 16px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition); flex: 1; min-width: 200px;">
                                <i class="fas fa-download"></i> Download Brochure
                            </button>
                            <button style="background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 16px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition); flex: 1; min-width: 200px;">
                                <i class="fas fa-phone-alt"></i> Contact Admissions
                            </button>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(modal);
                
                // Close modal
                modal.querySelector('#closeModal').addEventListener('click', () => {
                    modal.style.animation = 'fadeOut 0.3s ease';
                    setTimeout(() => {
                        document.body.removeChild(modal);
                    }, 300);
                });
                
                // Close modal when clicking outside
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        modal.style.animation = 'fadeOut 0.3s ease';
                        setTimeout(() => {
                            document.body.removeChild(modal);
                        }, 300);
                    }
                });
            });
        });
        
        // Apply Now button functionality
        document.getElementById('applyNow').addEventListener('click', function() {
            // Create application modal
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.7);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
                animation: fadeIn 0.3s ease;
                padding: 20px;
            `;
            
            modal.innerHTML = `
                <div style="background: white; border-radius: var(--radius); padding: 40px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-hover); animation: slideUp 0.4s ease;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                        <h3 style="font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--primary-dark);">Admissions Application</h3>
                        <button id="closeModal" style="background: none; border: none; font-size: 1.8rem; color: var(--text-light); cursor: pointer; transition: var(--transition);">
                            &times;
                        </button>
                    </div>
                    
                    <p style="color: var(--text-light); margin-bottom: 30px; line-height: 1.7;">
                        Begin your journey with Bright Minds Academy. Please complete the form below and our admissions team will contact you within 3 business days to schedule an interview and campus tour.
                    </p>
                    
                    <form id="applicationForm" style="display: flex; flex-direction: column; gap: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Student's Full Name *</label>
                            <input type="text" required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                        </div>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                            <div>
                                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Grade Level *</label>
                                <select required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                                    <option value="">Select Grade</option>
                                    <option value="k">Kindergarten</option>
                                    <option value="1">Grade 1</option>
                                    <option value="2">Grade 2</option>
                                    <option value="3">Grade 3</option>
                                    <option value="4">Grade 4</option>
                                    <option value="5">Grade 5</option>
                                    <option value="6">Grade 6</option>
                                    <option value="7">Grade 7</option>
                                    <option value="8">Grade 8</option>
                                    <option value="9">Grade 9</option>
                                    <option value="10">Grade 10</option>
                                    <option value="11">Grade 11</option>
                                    <option value="12">Grade 12</option>
                                </select>
                            </div>
                            
                            <div>
                                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">School Year *</label>
                                <select required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                                    <option value="">Select Year</option>
                                    <option value="2024-25">2024-2025</option>
                                    <option value="2025-26">2025-2026</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Parent/Guardian Name *</label>
                            <input type="text" required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                        </div>
                        
                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Email Address *</label>
                            <input type="email" required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                        </div>
                        
                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Phone Number *</label>
                            <input type="tel" required style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);">
                        </div>
                        
                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark);">Additional Information</label>
                            <textarea rows="4" style="width: 100%; padding: 14px; border: 2px solid rgba(44, 90, 160, 0.2); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: var(--transition);" placeholder="Any additional information you'd like to share..."></textarea>
                        </div>
                        
                        <button type="submit" style="background: linear-gradient(to right, var(--primary), var(--primary-dark)); color: white; border: none; padding: 18px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 1.1rem; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;">
                            <i class="fas fa-paper-plane"></i> Submit Application
                        </button>
                    </form>
                    
                    <p style="margin-top: 20px; font-size: 0.9rem; color: var(--text-light); text-align: center;">
                        * Required fields. Your information is secure and will only be used for admissions purposes.
                    </p>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // Close modal
            modal.querySelector('#closeModal').addEventListener('click', () => {
                modal.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(modal);
                }, 300);
            });
            
            // Form submission
            modal.querySelector('#applicationForm').addEventListener('submit', (e) => {
                e.preventDefault();
                
                // In a real app, you would send this data to a server
                modal.querySelector('#applicationForm button').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                modal.querySelector('#applicationForm button').disabled = true;
                
                setTimeout(() => {
                    modal.style.animation = 'fadeOut 0.3s ease';
                    setTimeout(() => {
                        document.body.removeChild(modal);
                        
                        // Show success message
                        const successMsg = document.createElement('div');
                        successMsg.style.cssText = `
                            position: fixed;
                            top: 20px;
                            right: 20px;
                            background: linear-gradient(to right, var(--primary), var(--primary-dark));
                            color: white;
                            padding: 20px;
                            border-radius: 12px;
                            box-shadow: var(--shadow-hover);
                            z-index: 1000;
                            max-width: 350px;
                            animation: slideIn 0.5s ease;
                        `;
                        
                        successMsg.innerHTML = `
                            <h4 style="margin-bottom: 10px; font-size: 1.2rem;"><i class="fas fa-check-circle"></i> Application Submitted!</h4>
                            <p>Thank you for applying to Bright Minds Academy. Our admissions team will contact you within 3 business days.</p>
                        `;
                        
                        document.body.appendChild(successMsg);
                        
                        setTimeout(() => {
                            successMsg.style.animation = 'slideOut 0.5s ease';
                            setTimeout(() => {
                                document.body.removeChild(successMsg);
                            }, 500);
                        }, 5000);
                    }, 300);
                }, 1500);
            });
            
            // Close modal when clicking outside
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.animation = 'fadeOut 0.3s ease';
                    setTimeout(() => {
                        document.body.removeChild(modal);
                    }, 300);
                }
            });
        });
        
        // Add CSS for animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            @keyframes slideUp {
                from { transform: translateY(30px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
            
            input:focus, select:focus, textarea:focus {
                outline: none;
                border-color: var(--primary) !important;
            }
            
            #closeModal:hover {
                color: var(--primary) !important;
            }
        `;
        document.head.appendChild(style);
        
        // Initialize cards with animation
        document.addEventListener('DOMContentLoaded', () => {
            schoolCards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });

School Section Template Preview

Download Options