<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alhyah Schools</title>
    <link rel="icon" href="images/Screenshot_2024-12-31_151151-removebg-preview.png" type="image/png">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>



/* Base styles and CSS Variables */
:root {
    --primary: #3b82f6;
    --secondary: #1d4ed8;
    --accent: #f43f5e;
    --light: #f8fafc;
    --dark: #0f172a;
    --gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --spacing-xs: clamp(0.5rem, 1vw, 1rem);
    --spacing-sm: clamp(1rem, 2vw, 2rem);
    --spacing-md: clamp(1.5rem, 3vw, 3rem);
    --spacing-lg: clamp(2rem, 4vw, 4rem);
    --spacing-xl: clamp(3rem, 6vw, 6rem);
    --font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 1.75vw, 1rem);
    --font-size-base: clamp(1rem, 2vw, 1.125rem);
    --font-size-lg: clamp(1.25rem, 2.5vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 3vw, 2rem);
    --font-size-2xl: clamp(2rem, 4vw, 3rem);
    --font-size-3xl: clamp(2.5rem, 5vw, 4rem);
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --container-width: min(100% - 2rem, 1200px);
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Layout containers */
.container {
    width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Navbar styles */
.social-links {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-right: auto; /* Push to the left */
}

#loginButton, #logoutButton {
    border: 2px solid var(--primary);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    color: var(--primary);
    transition: all 0.3s ease;
    margin-left: 1rem;
    cursor: pointer;
}

#loginButton:hover, #logoutButton:hover {
    background: var(--primary);
    color: white;
}


.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--gradient);
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.social-link i {
    font-size: 1.2rem;
}

/* Update existing nav-links to accommodate social links */
@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none !important;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 70%;
        background: white;
        flex-direction: column;
        padding: 80px 20px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
        display: flex;
        flex-direction: row; /* Normal order on PC */
    }
}

@media (max-width: 768px) { 
    .nav-links {
        display: flex;
        flex-direction: column;
    }
    .navbar {
        background: rgba(255, 255, 155);
    }

    /* Force correct order on mobile */
    #loginButton { order: -6; }  /* Move Login to the TOP */
    #homeButton { order: -5; }   /* Home after Login */
    #aboutButton { order: -3; }  /* About after Home */
    #projectsButton { order: -4; } /* Projects after About */
    #logoutButton { order: 1; }  /* Keep Logout at the BOTTOM */
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .social-links {
        margin: 2rem 0;
        justify-content: center;
    }
    
    .nav-links {
        align-items: center;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .social-link i {
        font-size: 1.4rem;
    }
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    max-width: 1900px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.logo img {
    width: clamp(100px, 5vw, 100px);
    height: auto;
    transition: transform 0.3s ease;
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark);
    font-size: var(--font-size-base);
    transition: color 0.3s ease;
    padding: var(--spacing-xs);
}

/* Hero section */
.hero {
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
}

.hero-content {
    max-width: var(--container-width);
    margin: auto;
}

.hero h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
    background: var(--gradient);
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    position: relative;
    top: 20px; /* Moves the heading down */
}

.hero p {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
    position: relative;
    top: 20px; /* Moves the paragraph down */
}


/* Credits section */
/* Update the credits grid container */
.hero-credits .credits-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.hero-credit-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    width: 200px;
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Media query for better mobile support */
@media (max-width: 768px) {
    .hero-credits {
        padding: 0.75rem;
    }
    
    .hero-credits .credits-grid {
        gap: 0.75rem;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .hero-credits .credits-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }
    
    .hero-credit-card {
        width: 160px;
        min-width: 160px;
        padding: 0.75rem;
    }

    /* Ensure text stays readable */
    .hero-credit-card h3 {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .hero-credit-card p {
        font-size: 0.8rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero-credit-card {
        width: 140px;
        min-width: 140px;
    }
}
.credit-avatar {
    width: clamp(40px, 8vw, 80px);
    height: clamp(40px, 8vw, 80px);
    margin: 0 auto var(--spacing-sm);
}

/* Projects section */
.projects-page {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--light);
}

.projects-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.projects-header h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.category-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    max-width: var(--container-width);
    margin: 0 auto;
}

.project-card {
    background: white;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Modal styles */


.modal-content {
    transition: all 0.3s ease-in-out;
    max-width: min(90%, 800px);
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

.modal-close-animation {
    opacity: 0;
    transform: translateY(100px);
    pointer-events: none;
}

/* Form styles */

.form-group {
    margin-bottom: var(--spacing-md);
}

/* Button styles */
.cta-button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
}

/* Mobile menu */
.hamburger {
    display: none;
    padding: var(--spacing-xs);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    :root {
        --container-width: min(100% - 2rem, 1000px);
    }
}

@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 70%;
        background: white;
        flex-direction: column;
        padding: var(--spacing-xl) var(--spacing-lg);
        transition: right 0.3s ease;
    }

    .nav-links.active {
        right: 0;
    }

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

    .category-tabs {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: clamp(1.5rem, 3vw, 2rem);
        --spacing-xl: clamp(2rem, 4vw, 3rem);
    }

    .hero-content {
        padding: var(--spacing-sm);
    }

    .project-card {
        margin: 0 var(--spacing-xs);
    }
}

/* Animation classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles */
@media print {
    .navbar,
    .modal,
    .hamburger {
        display: none !important;
    }
}


body {
  font-family: 'MyFont', sans-serif;
  
}

        /* Motion blur effect class */
        .motion-blur {
            filter: blur(20px);
            transition: filter 0.3s ease-out;
        }

        /* Animation classes */
        .page-transition {
            opacity: 0;
            transform: scale(0.25);
            filter: blur(10px);
            transition: all 0.2s ease-out;
        }

        .page-transition.active {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
        }

        /* Hero content initial state */

        .hero-content {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease-out;
    }

    .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9998; /* Just below the modal z-index */
    animation: fadeIn 0.3s ease-in-out;
}

    .hero-content.active {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    .page-transition {
        opacity: 0;
        transform: scale(0.95);
        transition: all 0.3s ease-out;
        filter: blur(10px);
    }

    .page-transition.active {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }



        .media-container {
            position: relative;
            width: 50%;
            height: 100%;
            height: 350px; /* Reduced from 400px */

            margin-bottom: 1rem;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f8f8f8;
        }


        
        .swap-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
    direction: ltr; /* Force LTR direction always */
}

.swap-button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s;
    color: var(--dark);
}

.swap-button.prev {
    order: 1;
}

.swap-button.next {
    order: 2;
}

.swap-button:hover {
    background: white;
    transform: scale(1.1);
}

        .media-container img,
        .media-container video {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Changed from cover to contain */
            display: none;
            max-width: 100%;
            max-height: 100%;
        }

        /* Update navigation for RTL */
        .nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    direction: rtl; /* Restore RTL for navigation links */
}


        /* Update modal content for RTL */


        /* Update form for RTL */
        .form-group {
            text-align: right;
        }

        :root {
            --primary: #3b82f6;
            --secondary: #1d4ed8;
            --accent: #f43f5e;
            --light: #f8fafc;
            --dark: #0f172a;
            --gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
        }

        

        .navbar {
    position:fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255);
    backdrop-filter: blur(10px);
    padding: 0.1rem 1rem;  /* Reduced padding */
    min-height: 70px;  /* Set specific height */

}

.nav-content {
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr; /* Force LTR for the navbar layout */
}



        .nav-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: all 0.3s;
            position: relative;
            cursor: pointer;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background: var(--gradient);
            transition: width 0.3s;
        }

        .hamburger {
            display: none;
            cursor: pointer;
            padding: 10px;
            z-index: 1000;
        }

        .hamburger-line {
            width: 25px;
            height: 3px;
            background-color: var(--dark);
            margin: 5px 0;
            transition: all 0.3s ease;
        }


        

.logo img {
    width: 80px;
    height: auto;
    margin-left: 10px; /* Space between image and text */
}

.logo img:hover {
                transform: scale(1.25);
            }

        .nav-links a:hover::after {
            width: 100%;
        }


        
        .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: white;
    overflow: hidden;
    padding-bottom: 2rem;
    padding-bottom: 0; /* Remove bottom padding to allow credits to touch bottom */
}

        .hero::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: var(--gradient);
            animation: rotate 15s linear infinite;
            opacity: 0.1;
        }

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

        .hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem;
    text-align: center;
    margin-bottom: auto; /* Push content up */

}

.hero-credits {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.0); /* Slightly more opaque */
    backdrop-filter: blur(10px);
    border-top: 0px solid rgba(0, 0, 0, 0.1); /* Add subtle border */
    position: relative; /* Ensure it stays at bottom */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10; /* Ensure it stays above other content */
    cursor: default;
    animation: fadeInUp 1s ease-in-out;

}

.hero-credits .credits-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.hero-credit-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    width: 200px;
    margin-bottom: 0; /* Remove bottom margin */
}

.hero-credit-card .credit-avatar {
    width: 45px;
    height: 45px;
    background: var(--gradient);
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-credit-card .credit-avatar i {
    font-size: 1.2rem;
    color: white;
}

.hero-credit-card h3 {
    color: var(--dark);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.hero-credit-card p {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
}

.hero-credit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Media query for better mobile support */
@media (max-width: 768px) {
    .hero-credits {
        padding: 0.75rem;
    }
    
    .hero-credits .credits-grid {
        gap: 1rem;
    }
    
    .hero-credit-card {
        width: 160px; /* Even smaller on mobile */
        padding: 0.75rem;
    }
}
        .hero h1 {
            font-size: 4.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
        }
 
        .hero p {
            font-size: 1.5rem;
            color: var(--dark);
            margin-bottom: 2.5rem;
            opacity: 0.8;
        }

        .cta-button {
            display: inline-block;
            padding: 1.2rem 3rem;
            background: var(--gradient);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            cursor: pointer;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
        }

        .projects-page {
            padding: 6rem 2rem;
            min-height: 100vh;
            background: var(--light);
            display: none;
        }

        .projects-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .projects-header h2 {
            font-size: 2.5rem;
            color: var(--dark);
            margin-bottom: 1rem;
        }

        .category-tabs {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .category-tab {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 50px;
    background: white;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 0.5rem;
}

.category-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.category-tab.active {
    background: var(--gradient);
    color: white;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .project-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            transition: all 0.3s;
            cursor: pointer;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .project-image {
            width: 100%;
            height: 250px;
            background: #ddd;
            position: relative;
            overflow: hidden;
        }

        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .project-card:hover .project-image img {
            transform: scale(1.05);
        }

        .project-content {
            padding: 2rem;
        }

        .project-category {
            font-size: 0.9rem;
            color: var(--primary);
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .project-content h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--dark);
        }

        .project-content p {
            color: #64748b;
            line-height: 1.6;
        }



        .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: black;
    height: 100vh;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.modal-content.modal-animate {
    opacity: 1;
}




.modal-video {
    width: 100%;
    height: auto;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
    background: white;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1002; /* Higher than modal content */
    transition: all 0.3s ease-in-out;

}

@keyframes fadeInDown {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
} 

.close-modal:hover {
    transform: scale(1.1);
}

/* Remove body scroll lock */
body.modal-open {
    overflow: initial;
}


.media-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
}

.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.media-container img,
.media-container video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: none;
}

       

.credit-card {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

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

.credit-avatar {
    width: 80px;
    height: 80px;
    background: var(--gradient);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-avatar i {
    font-size: 2rem;
    color: white;
}

.credit-card h3 {
    color: var(--dark);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.credit-card p {
    color: #64748b;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .credits-title {
        font-size: 2rem;
    }
    
    .credits-grid {
        grid-template-columns: 1fr;
    }
}
        .swap-buttons {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 1rem;
            pointer-events: none;
        }

        .swap-button {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            transition: all 0.3s;
            color: var(--dark);
        }

        .swap-button:hover {
            background: white;
            transform: scale(1.1);
        }

        .language-switch {
            padding: 0.8rem 1.5rem;
            background: white;
            color: var(--primary);
            border: 2px solid var(--primary);
            border-radius: 50px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }

        .language-switch:hover {
            background: var(--primary);
            color: white;
        }

      

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--dark);
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 3rem;
            }
            .hero p {
                font-size: 1.2rem;
            }
            .nav-links {
                gap: 1.5rem;
            }
            .project-grid {
                grid-template-columns: 1fr;
            }
            .modal-content {
                width: 95%;
                padding: 1rem;
            }
            .media-container {
                height: 300px;
            }
        }

        .about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0000, #0000);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .about-section.active {
    opacity: 1;
    transform: translateY(0);
  }
  #about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    size: 80cm;
    text-align: center; /* Centers text horizontally */
    height: 100vh; /* Ensure it takes the full height of the viewport */
}

#about h1 {
    font-size: 2.5em;
    
font-style: var(--accent);
    margin-bottom: 20px; /* Space between the h1 and the p */
}

#about p {
    font-size: 1.2em;
   font-size:x-large ;
    max-width: 1000px; /* Limit the width for better readability */
    margin: 0 auto; /* Horizontally center the paragraph */
    line-height: 1.6;

}

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(20px-);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }


  @media (max-width: 768px) {
            .hamburger {
                display: block;
                order: 1;
            }

            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 70%;
                background: white;
                flex-direction: column;
                padding: 80px 20px;
                transition: right 0.3s ease;
                box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            }

            .nav-links.active {
                right: 0;
            }

            .nav-content {
                padding: 0 1rem;
            }

            .logo {
                font-size: 1.2rem;
                margin-right: 0;
            }

            /* Hamburger animation classes */
            .hamburger.active .hamburger-line:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .hamburger.active .hamburger-line:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active .hamburger-line:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -7px);
            }
        }

    

.add-project-btn {
    background: var(--gradient);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem auto 0;
}

.add-project-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.add-project-btn i {
    font-size: 1.2rem;
}

/* Add Project Form Styles */
.add-project-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.add-project-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.add-project-form label {
    color: var(--dark);
    font-weight: 500;
}

.add-project-form input,
.add-project-form select,
.add-project-form textarea {
    padding: 0.8rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.add-project-form input:focus,
.add-project-form select:focus,
.add-project-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.add-project-form button[type="submit"] {
    margin-top: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .add-project-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .add-project-form {
        gap: 1rem;
    }
}

.upload-info {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.progress-bar-container {
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

.upload-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
}

.file-count {
    font-size: 14px;
    color: #666;
    text-align: center;
}



        /* Message Box */
        #message {
            margin-top: 10px;
            font-weight: bold;
            color: white;
        }
        .project-stats {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

.project-stats {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.1);
    font-size: 0.9em;
    color: #666;
}

.project-stats {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

.views-counter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.views-counter i {
    font-size: 1.1em;
    color: #888;
}

.views-count {
    font-weight: 500;
}

    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo"><img src="images/alhayah.jpg"></div>

            
            <div class="hamburger">
                <div class="hamburger-line"></div>
                <div class="hamburger-line"></div>
                <div class="hamburger-line"></div>
            </div>
    
            <div class="nav-links">
                <div class="social-links">
                    <a href="https://x.com/HayahEdu/" target="_blank" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="https://www.instagram.com/hayahedu" target="_blank" class="social-link"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/@HayahEdu" target="_blank" class="social-link"><i class="fab fa-youtube"></i></a>
                </div>

                <a onclick="navigateTo('about')" id="aboutButton">نبذة عنا</a>
                <a onclick="navigateTo('projects')" id="projectsButton">المشاريع</a>

                <a onclick="navigateTo('home')" id="homeButton">الرئيسية</a>
                <a onclick="navigateTo('login-section')" id="loginButton">تسجيل دخول</a>
                <a onclick="handleLogout()" id="logoutButton" style="display: none;">تسجيل خروج</a>
            
            </div>
    </nav>



      

 <section id="login-section" style="display: none; margin-top: 100px; padding: 20px;">
        <div style="max-width: 400px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h2 style="text-align: center; margin-bottom: 20px;">تسجيل الدخول</h2>
            <form onsubmit="handleLogin(event)">
                <div style="margin-bottom: 15px;">
                    <label for="username" style="display: block; margin-bottom: 5px;">اسم المستخدم</label>
                    <input type="text" id="username" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="password" style="display: block; margin-bottom: 5px;">كلمة المرور</label>
                    <input type="password" id="password" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div id="loginError" style="color: red; text-align: center; margin-bottom: 10px; display: none;"></div>
                <button type="submit" class="cta-button" style="width: 100%;">تسجيل الدخول</button>
            </form>
        </div>
    </section>

    <section id="about" style="display: none;" class="about-section">
    <div class="about-content">
      <h1 data-translate="aboutTitle">نبذة عنا</h1>
      <p data-translate="aboutDesc style text-align:center">
        منصتنا تهدف إلى دعم ورعاية المبتكرين الشباب في مدارس الحياة، وتوفير بيئة حاضنة لهم لعرض إبداعاتهم وتفوقهم في مجالات متعددة مثل التكنولوجيا والفنون والعلوم. نحن نؤمن بقوة أن الشباب هم المستقبل، ومن خلال هذه المنصة، نسعى لإعطائهم الفرصة لتطوير مهاراتهم، تعزيز قدراتهم، والمشاركة في مشاريع إبداعية تبني شخصياتهم وتساهم في تحقيق طموحاتهم. نحرص على أن تكون منصتنا مصدر إلهام وتوجيه لهم، من خلال تسليط الضوء على أفكارهم وأعمالهم المبتكرة التي تساهم في تحسين المجتمع، وتفتح لهم أبوابًا جديدة من الفرص والتعاون. سنكون دائمًا معكم في كل خطوة، لدعم تطلعاتكم والمساهمة في تحقيق أهدافكم المستقبلية.
      <p>أعداد: أ.معتز عبدالعزيز</p>
      <p>برمجة الطالب: عبدالرحمن عيسى العوفي</p>
<video src="videos/ركن الروبوتيكس (online-video-cutter.com).mp4" autoplay muted controls></video>
    </div>
  </section>

  <section class="hero" id="home">
    <div class="hero-content">
        <h1>نصنع قادة المستقبل</h1>
        <p>اكتشف عالماً من الابتكار والإبداع والتميز</p>
        <a class="cta-button" onclick="navigateTo('projects')">عرض مشاريع الطلاب</a>
    </div>
    <div class="hero-credits">
        <div class="credits-grid">
            <div class="hero-credit-card">
                <div class="credit-avatar">
                    <i class="fas fa-chalkboard-teacher"></i>
                </div>
                <h3>أ. معتز عبدالعزيز</h3>
                <p>مشرف المشروع</p>
            </div>
            <div class="hero-credit-card">
                <div class="credit-avatar">
                    <i class="fas fa-code"></i>
                </div>
                <h3>عبدالرحمن عيسى العوفي</h3>
                <h3>اول ثانوي</h3>
                <p>مبرمج ومطور الموقع</p>
            </div>
            <div class="hero-credit-card">
                <div class="credit-avatar">
                    <i class="fas fa-school"></i>
                </div>
                <h3>المشروع مقدم  لـ</h3>
                <p>مدارس الحياة الاهلية</p>
            </div>
        </div>
    </div>
</section>
    <section class="projects-page" id="projects">
        <div class="projects-header">
        </div>
        <button class="add-project-btn" id="addProjectBtn" onclick="checkLoginBeforeAdd()" style="display: none;">
            <i class="fas fa-plus"></i>
            إضافة مشروع جديد
        </button>
    </div>
            <div class="category-tabs">
                <button class="category-tab active" onclick="filterProjects('all')">الكل</button>
                <button class="category-tab" onclick="filterProjects('science')">علمية</button>
                <button class="category-tab" onclick="filterProjects('art')">فنية</button>
                <button class="category-tab" onclick="filterProjects('tech')">تقنية</button>
                <button class="category-tab" onclick="filterProjects('culture')">ثقافية</button>
            </div>
        </div>
        <div class="project-grid">
        </div>
              
        
    </section>
   
       
        

    <div class="modal" id="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal()">
                <i class="fas fa-times"></i>
            </button>
            <div class="media-container">
                <img id="modalImage" src="/api/placeholder/800/400" alt="Project Image">
                <video id="modalVideo" controls>

                    <source src="" type="video/mp4">
                </video>
                <div class="swap-buttons">
                    <button class="swap-button" onclick="swapContent('prev')">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="swap-button" onclick="swapContent('next')">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            <h3 id="modalTitle"></h3>
            <p id="modalDescription"></p>
            <p id="modallink"></p>

        </div>
    </div>

    <section id="contact" style="display: none;" class="contact-section">
        <div class="container">
            <div class="contact-content">
                <h1 class="section-title">تواصل معنا</h1>
                <p class="section-description">نحن هنا للإجابة على استفساراتك</p>
                
                <div class="contact-wrapper">
                    <div class="contact-info">
                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <h3>العنوان</h3>
                            <p>المملكة العربية السعودية، المدينة المنورة</p>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <h3>الهاتف</h3>
                            <p>+966 XX XXX XXXX</p>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <h3>البريد الإلكتروني</h3>
                            <p>info@alhyahschools.com</p>
                        </div>
                    </div>
    
                    <form id="contactForm" class="contact-form" onsubmit="handleContactSubmit(event)">
                        <div class="form-group">
                            <label for="name">الاسم</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">البريد الإلكتروني</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="subject">الموضوع</label>
                            <input type="text" id="subject" name="subject" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">الرسالة</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        
                        <button type="submit" class="cta-button">إرسال الرسالة</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Add this to your existing style section -->
    <style>
    .contact-section {
        padding-top: 100px;
        min-height: 100vh;
        background: var(--light);
    }
    
    .contact-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
        color: var(--dark);
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .section-description {
        text-align: center;
        color: #64748b;
        margin-bottom: 3rem;
        font-size: var(--font-size-lg);
    }
    
    .contact-wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
        background: white;
        border-radius: var(--border-radius-lg);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }
    
    .contact-info {
        padding: 2rem;
        background: var(--gradient);
        border-radius: var(--border-radius-lg);
        color: white;
    }
    
    .info-item {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .info-item i {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .info-item h3 {
        margin-bottom: 0.5rem;
        font-size: var(--font-size-lg);
    }
    
    .contact-form {
        padding: 1rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--dark);
        font-weight: 500;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.8rem;
        border: 2px solid #e2e8f0;
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-base);
        transition: all 0.3s;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary);
    }
    
    @media (max-width: 768px) {
        .contact-wrapper {
            grid-template-columns: 1fr;
        }
        
        .contact-info {
            padding: 1.5rem;
        }
        
        .info-item {
            margin-bottom: 1.5rem;
        }
    }
    </style>


 <!-- Create Project Button -->
 <button class="create-project-button" style="visibility: hidden;" onclick="openProjectModal()">+</button>

 <!-- Project Creation Modal -->
 <div id="projectModal" class="project-modal">
    <div class="project-modal-content">
        <div class="project-modal-header">
            <h3 class="project-modal-title"></h3>
            <button class="close-project-modal" onclick="closeProjectModal()">×</button>
        </div>
        
        <div id="addProjectModal" class="modal">
            <div class="modal-content">
                <button class="close-modal" onclick="closeAddProjectModal()">
                    <i class="fas fa-times"></i>
                </button>
                <h2>إضافة مشروع جديد</h2>
                <form action="add_project.php" method="POST" enctype="multipart/form-data" class="add-project-form" id="projectForm">
                    <div class="form-group">
                        <label for="projectTitle">عنوان المشروع</label>
                        <input type="text" id="projectTitle" name="title" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="projectCategory">الفئة</label>
                        <select id="projectCategory" name="category" required>
                            <option value="علمية">علمية</option>
                            <option value="فنية">فنية</option>
                            <option value="تقنية">تقنية</option>
                            <option value="ثقافية">ثقافية</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="projectDescription">وصف المشروع</label>
                        <textarea id="projectDescription" name="description" rows="4" required></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="projectMedia">الوسائط (صور/فيديو)</label>
                        <input type="file" id="projectMedia" name="media[]" multiple accept="image/*,video/*" required>
                        <div class="upload-info" style="display: none;">
                            <div class="progress-bar-container">
                                <div class="progress-bar"></div>
                            </div>
                            <div class="upload-details">
                                <span class="upload-percentage">0%</span>
                                <span class="upload-speed">0 MB/s</span>
                                <span class="time-remaining">--:--</span>
                            </div>
                            <div class="file-count">0 من 0 ملفات</div>
                        </div>
                    </div>
                    
                    <button type="submit" class="cta-button">إضافة المشروع</button>
                    <input type="hidden" name="redirect_url" value="<?= $_SERVER['HTTP_REFERER'] ?? 'add_project.php' ?>">

                </form>
            </div>
        </div>
    </div>
</div>