/* Universal Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5%;
    background-color: #2c3e50;
    color: white;
    font-size: 0.9em;
}

.contact-info a {
    margin-right: 20px;
    color: white;
}

.contact-info a i {
    margin-right: 5px;
}

.ask-ai-container {
    flex-grow: 1;
    text-align: center;
}

.ask-ai {
    background-color: #e67e22;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
}

.social-media a i {
    font-size: 1.2em;
    margin-left: 15px;
    color: white;
}

/* Navigation */
nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 5%;
    background-color: white;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.school-name {
    font-size: 1.5em;
    font-weight: bold;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.8em;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

nav ul li a.active,
nav ul li a:hover {
    background-color: #3498db;
    color: white;
}

.student-app {
    background-color: #3498db;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.student-app i {
    margin-left: 8px;
}

/* Hero Section */
.hero-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    display: flex;
    justify-content: center;

    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.slides-container {
    display: flex;
    transition: opacity 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    opacity: 0;
    transition: opacity 1.0s ease-in-out, transform 1.0s ease-in-out;
    height: auto;
    transform: scale(0.95);
    /* Start slightly zoomed out */
}

.slide.active {
    opacity: 1;
    transform: scale(1);
    /* Zoom in to normal */
}

.slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}



/* card */

#cart :hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;

}


/* Section Title */
.section-title {
    text-align: center;
    margin: 50px 0 30px;
}

.section-title h2 {
    display: inline-block;
    font-size: 2.5em;
    border-bottom: 4px solid #3498db;
    padding-bottom: 10px;
}

/* About Us Section */
.about-us {
    padding: 40px 5%;
    margin: 20px auto;
    max-width: 1200px;
}

.about-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.about-text-container {
    flex: 2;
}

.notice-board-wrapper {
    flex: 1;
}



.about-text h3 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 15px;
}

.about-text p {
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    margin-top: 20px;
    font-weight: bold;
}

/* Notice Board */
.notice-board {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.notice-board h3 {
    font-size: 1.8em;
    margin-top: 0;
    border-bottom: 2px solid #3498db;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    background: #fff;
    padding-bottom: 4px;
    position: relative;
    z-index: 20;
}

.notice-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s, transform 0.3s;
}

.notice-item:hover {
    background-color: #f9f9f9;
    transform: translateX(5px);
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-date {
    font-weight: bold;
    margin-right: 8px;
    color: #3498db;
    font-size: 0.9em;
}

/* NOTICE AUTO SCROLL SYSTEM */

#notice-board-container {
    height: 200px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    /* Title ke niche clear gap */
    padding-top: 5px;
    /* Smooth space */
}

/* Enable animation when JS adds this class */
.scrolling-notice-board .scrolling-inner {
    animation: noticeScroll 10s linear infinite;
}

/* Hover par stop */
.scrolling-notice-board:hover .scrolling-inner {
    animation-play-state: paused;
}

/* Infinite scroll (because list is doubled) */
@keyframes noticeScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}




/* Map Section */
.map {
    line-height: 0;
    margin-top: 30px;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 50px 5% 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #4a627a;
}

.our-mission,
.quick-links,
.contact-us {
    flex-basis: 32%;
}

footer h3 {
    font-size: 1.5em;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

.our-mission p {
    line-height: 1.6;
}

.quick-links ul {
    list-style: none;
    padding: 0;
}

.quick-links ul li {
    padding: 5px 0;
}

.contact-us p {
    margin: 10px 0;
    line-height: 1.5;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    font-size: 0.9em;
}

.copyright a {
    color: #3498db;
}

/* Language Switcher */
.language-switcher {
    position: relative;
    width: 70px;
    height: 30px;
    margin-left: 15px;
}

.language-toggle {
    display: none;
}

.language-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    cursor: pointer;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid #3498db;
}

.language-label::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: #3498db;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.language-label .en,
.language-label .hi {
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

.language-label .en {
    color: #333;
    padding-left: 6px;
}

.language-label .hi {
    color: #aaa;
    padding-right: 6px;
}

.language-toggle:checked+.language-label::after {
    transform: translateX(38px);
}

.language-toggle:checked+.language-label .en {
    color: #aaa;
}

.language-toggle:checked+.language-label .hi {
    color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .slider-btn {
        display: none;
    }

    .house-slide h3 {
        font-size: 1.8em;
        /* Adjust title size for mobile */
        margin-bottom: 20px;
    }

    .house-cards-container {
        display: flex;
        overflow-x: auto;
        /* scroll-snap-type: x mandatory;  Removed for single slide view */
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 0 20px 20px 20px;
        justify-content: center;
        /* Center the single card */
    }

    .house-cards-container.single-card-view {
        overflow-x: visible;
        /* No scroll needed for single card */
        flex-direction: column;
        /* Stack if needed, but mainly to avoid scroll behavior */
        align-items: center;
    }

    .house-card {
        flex: 0 0 auto;
        width: 90%;
        /* Single card takes 90% */
        max-width: 320px;
        /* scroll-snap-align: center; */
        padding: 15px;
        box-sizing: border-box;
        animation: slideInFromRight 0.6s ease-in-out;
        flex-direction: column;
        /* Vertical stack for single card is usually better, but keeping row if requested? Let's check user pref. "Aache dikh rahe hai" usually implies vertical details. Let's switch to Column for better single card aesthetics or keep Row? User said "PC laptop mei aache dikh rhe par mobile ya bakar". Let's try column for better impact as a single slide. */
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-right: 0;
        min-width: auto;
    }

    .single-card-view .house-card {
        flex-direction: column;
        /* Ensure vertical layout for single big card */
        text-align: center;
    }

    .single-card-view .house-card-details {
        text-align: center;
        align-items: center;
    }

    .house-card img {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
        /* Remove bottom margin */
    }

    .house-card-details {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .student-card img {
        width: 70px;
        height: 70px;
    }

    .house-name,
    .student-name {
        font-size: 1.2em;
    }

    .house-points,
    .student-class {
        font-size: 1em;
    }

    .top-bar {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: white;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        border-top: 1px solid #ddd;
    }

    nav ul.show {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    nav ul li a {
        display: block;
        padding: 15px;
    }

    .student-app {
        display: none;
    }

    .about-content,
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .about-us,
    footer {
        text-align: center;
    }

    .notice-board-wrapper {
        width: 100%;
        margin-top: 30px;
    }

    main {
        padding: 0 15px;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(30px);
        /* Gentle slide from 30px */
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}



/* Dropdown Menu Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    list-style: none;
    padding: 0;
}

.dropdown-content li a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content li a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* House Card Styles */
/* House Slide Specific Styles */
.house-slide {
    text-align: center;
    padding: 20px;
    background-color: #ecf0f1;
    /* Light background for the slide */
    color: #2c3e50;
    flex-direction: column;
    /* Ensure title and cards stack vertically */
    justify-content: center;
    align-items: center;
}

.house-slide h3 {
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 30px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    display: inline-block;
}

.house-cards-container {
    display: flex;
    gap: 20px;
    /* Space between cards */
    overflow-x: auto;
    /* Enable horizontal scrolling if cards exceed width */
    padding-bottom: 10px;
    /* Space for scrollbar */
    justify-content: center;
    /* Center cards if total width is less than container */
    align-items: flex-start;
    /* Align cards to the top */
    flex-wrap: nowrap;
    /* Keep cards in a single line */
}

/* Best Students Slide Specific Styles */
.best-students-slide {
    text-align: center;
    padding: 20px;
    background-color: #ecf0f1;
    /* Light background for the slide */
    color: #2c3e50;
    flex-direction: column;
    /* Ensure title and cards stack vertically */
    justify-content: center;
    align-items: center;
}

.best-students-slide h3 {
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 30px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    display: inline-block;
}

.best-students-container {
    display: flex;
    gap: 20px;
    /* Space between cards */
    overflow-x: auto;
    /* Enable horizontal scrolling if cards exceed width */
    padding-bottom: 10px;
    /* Space for scrollbar */
    justify-content: center;
    /* Center cards if total width is less than container */
    align-items: flex-start;
    /* Align cards to the top */
    flex-wrap: nowrap;
    /* Keep cards in a single line */
}

.student-card {
    flex: 0 0 auto;
    /* Prevent cards from growing or shrinking, keep original width */
    min-width: 220px;
    /* Minimum width for each card */
    max-width: 250px;
    /* Maximum width for each card */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #3498db;
    /* Blue background for student cards */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.student-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.student-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    /* Cover for student photos */
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid white;
    /* White border around photo */
}

.student-name {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 5px;
}

.student-class {
    font-size: 1em;
    font-style: italic;
    opacity: 0.9;
}

/* House Card Styles */
.house-card {
    flex: 0 0 auto;
    /* Prevent cards from growing or shrinking, keep original width */
    min-width: 220px;
    /* Minimum width for each card */
    max-width: 250px;
    /* Maximum width for each card */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
    /* Text color for dark backgrounds */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Space out content vertically */
    background-color: #34495e;
    /* Default background if not specified by data */
    margin: 0;
    /* Remove default margin */
}

.house-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.house-card img {
    width: 120px;
    /* Smaller image for better fit */
    height: 120px;
    object-fit: contain;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Slight background for image area */
    border-radius: 50%;
    /* Make image area circular */
    padding: 5px;
}

.house-name {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 8px;
    color: #ecf0f1;
    /* Light color for house name */
}

.house-points {
    font-size: 1.3em;
    font-weight: bold;
    color: #f1c40f;
    /* Accent color for points */
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.8em;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.slider-btn i {
    transition: transform 0.3s ease;
}

.slider-btn:hover i {
    transform: scale(1.2);
}

/* Lightbox Navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 50px;
    cursor: pointer;
    padding: 20px;
    user-select: none;
    z-index: 1001;
    transition: color 0.3s;
}

.lightbox-nav:hover {
    color: #3498db;
}

.lightbox-nav.prev {
    left: 20px;
}

.lightbox-nav.next {
    right: 20px;
}

@media (max-width: 768px) {
    .lightbox-nav {
        font-size: 30px;
        padding: 10px;
    }

    .lightbox-nav.prev {
        left: 10px;
    }

    .lightbox-nav.next {
        right: 10px;
    }
}