/* --- Global Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
html { scroll-behavior: smooth; }
body { background: #f4f6fb; color: #333; line-height: 1.6; overflow-x: hidden; }

/* 1. Top Bar for Contact & Socials */
.top-bar { background-color: #002244; /* Slightly darker navy */
			color: white; padding: 5px 5%; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.top-bar a { color: white; text-decoration: none; margin-left: 15px; transition: 0.3s; }
.top-bar a:hover { color: #f1c40f; /* Gold hover effect */ }
.social-icons i { margin-left: 10px; font-size: 14px; }

/* News Ticker Container */
.news-ticker { display: flex; background: #ffd700; /* Matches your school blue */ color: red; height: 40px; align-items: center; overflow: hidden;
				font-family: 'Poppins', sans-serif; font-size: 0.9rem; border-bottom: 2px solid #0b3d91; /* Gold accent line */	}

/* Static Label */
.ticker-label { background: #ff0000; /* Red to grab attention */ color: white; padding: 0 20px; height: 100%; display: flex; align-items: center;
				font-weight: bold; z-index: 2; white-space: nowrap; }

/* Scrolling Area */
.ticker-content { flex: 1; overflow: hidden; position: relative; }
.ticker { display: flex; white-space: nowrap; animation: marquee 25s linear infinite; }
.ticker span { padding: 0 40px; color: #d9534f; font-weight: bold; }

/* Animation */
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* Pause on Hover so parents can read a specific news item */
.news-ticker:hover .ticker-text { animation-play-state: paused; }

/* --- Standard Dropdown Base --- */
.dropdown { position: relative; display: inline-block; }

.dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 180px; box-shadow: 0px 8px 10px rgba(0,0,0,0.2); z-index: 1001;
					border-radius: 2px; top: 100%; left: 0; }

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

/* --- Nested Dropdown Logic (The "Right" Pop-out) --- */
.nested-dropdown { position: relative; }

.nested-content { display: none; position: absolute; top: 0; left: 100%; /* Changed from right: 100% to force it to the RIGHT */
				background-color: #ffffff; min-width: 160px; box-shadow: 8px 8px 10px rgba(0,0,0,0.2); /* Shadow moved to the right */
				border-radius: 2px; z-index: 1002; }

/* Show the nested menu when hovering over the "Our School" item */
.nested-dropdown:hover .nested-content { display: block; }

/* Styling for the nested links */
.dropdown-content a { color: #0b3d91 !important; padding: 8px 8px; text-decoration: none; display: block; font-size: 0.8rem; }

.dropdown-content a:hover { background-color: #f1f1f1; color: #ff9800 !important; }

/* Ensure the "Our School" item looks clickable */
.nested-dropbtn { display: flex;  justify-content: space-between;  align-items: center; }

/* Container to stack the society name and school name vertically */
.school-title-container { display: flex; flex-direction: column; justify-content: center; text-align: center; margin-left: 8px; }

/* Styling for the new society name */
.society-name { font-size: 0.9rem; /* Small and elegant */ font-weight: 600; color: #f1f1f1; letter-spacing: 0.6px; margin-bottom: -5px; }

/* --- Header & Navigation --- */
header { 
    background: #0b3d91; color: white; padding: 20px 40px; 
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.header-logo-area { display: flex; align-items: center; gap: 15px; }
.header-logo-area img { height: 65px; width: auto; }
.header-logo-area strong { font-size: 1.5rem; line-height: 1.2; }
.header-logo-area h1 { margin: 0; font-size: 1.6rem; color: #f1f1f1; line-height: 1.2; font-weight: 700; }

nav a { color: white; margin-left: 20px; text-decoration: none; font-weight: 500; transition: 0.3s; }
nav a:hover { color: #ff9800; }

/* --- Hero Section --- */
.hero {
    background: linear-gradient(rgba(0,20,40,0.6), rgba(0,20,40,0.6)), url('images/School_Building.png');
	display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center; background-attachment: fixed; color: white; text-align: center; padding: 100px 20px; }
			
.admission-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); /* Modern blur effect */
        padding: 40px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); max-width: 700px;
    }
    .admission-box h2 { font-size: 3rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; color: #f1c40f; /* Gold color for emphasis */ }
    .admission-box p { font-size: 1.5rem; font-weight: 300; margin-bottom: 25px; }
    .btn-apply { background-color: #f1c40f; color: #003366; padding: 15px 35px; text-decoration: none; font-weight: bold; border-radius: 50px;
				transition: 0.3s; display: inline-block; text-transform: uppercase; }
    .btn-apply:hover { background-color: #fff; transform: scale(1.05); }

/* Layout specifically for Chairman to ensure spacing */
.chairman-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

/* --- Sections & Principal Message --- */
.section { padding: 20px 20px; max-width: 1100px; margin: auto; }
.section h2 { text-align: center; margin-bottom: 40px; color: #0b3d91; font-size: 32px; }

.about-container { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.principal-img-box { flex: 1; min-width: 300px; text-align: center; }
.principal-img-box img { width: 100%; max-width: 350px; border-radius: 15px; border: 8px solid #f4f6fb; object-fit: cover; }
.principal-text-box { flex: 2; min-width: 300px; }
.quote { font-style: italic; margin-bottom: 20px; border-left: 4px solid #ff9800; padding-left: 15px; font-size: 1.1rem; }

/* --- Grids --- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; transition: 0.3s; }
.card:hover { transform: translateY(-5px); border-bottom: 4px solid #ff9800; }

/* --- Slider --- */
#school-gallery {
    background: linear-gradient(to right, #ece9e6, #ffffff); /* Soft professional gradient */
    padding: 40px 20px; /* Added more padding for a cleaner look */
    border-radius: 30px; /* Optional: rounds the corners to match your Testimonials section */
    margin: 40px auto;
}
.slider-container { position: relative; max-width: 900px; margin: auto; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.slide { display: none; }
.slide img { width: 100%; height: 450px; object-fit: cover; }
.slide-caption { position: absolute; bottom: 20px; left: 20px; background: rgba(11, 61, 145, 0.8); color: white; padding: 10px 20px; border-radius: 5px; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; padding: 16px; color: white; font-weight: bold; font-size: 24px; transition: 0.6s ease; border-radius: 50%; background: rgba(0,0,0,0.3); transform: translateY(-50%); user-select: none; }
.next { right: 10px; } .prev { left: 10px; }
.dot-container { text-align: center; margin-top: 15px; }
.dot { cursor:pointer; height: 12px; width: 12px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: 0.6s ease; }

/* --- Floating Buttons Container --- */
.floating-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 14px;  z-index: 9999; }

/* --- Optimized Button Size & Style --- */
.float-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth bouncy transition */ cursor: pointer; overflow: hidden; }

.float-btn img { width: 60%; /* Adjusted image size for the smaller button */ height: auto; transition: transform 0.3s ease; }

/* --- Mouse Over (Hover) Effects --- */
.float-btn:hover { transform: scale(1.15) rotate(10deg); /* Grows and tilts slightly */ box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

.float-btn:hover img { transform: scale(1.1); /* Subtle zoom on the icon itself */ }

/* --- Background Colors (Keep as is or refine) --- */
.bg-wa { background: #25D366; }
.bg-call { background: #2196F3; }
.bg-fb { background: #1877F2; }
.bg-ig { background: #E4405F; }
.bg-yt { background: #FF0000; }


footer { background: #0b3d91; color: white; text-align: center; padding: 20px 20px; margin-top: 40px; }
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 30px; }
.footer-col h3 { color: var(--gold); margin-bottom: 20px; font-size: 18px; text-transform: uppercase; position: relative; }
.footer-col h3::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 50px; height: 2px; background: var(--gold); }
.footer-col p, .footer-col ul { font-size: 14px; color: #cbd5e0; line-height: 1.8; }
.footer-col ul { list-style: none; }
.footer-col ul li a { color: #cbd5e0; text-decoration: none; transition: 0.3s; }
.footer-col ul li a:hover { color: var(--gold); padding-left: 5px; }
.footer-bottom { background: #002244; text-align: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: #a0aec0; }

.footer-col { display: flex; flex-direction: column; align-items: center; /* Centers items horizontally */ text-align: center;  /* Centers text lines */ }

/* Society name styling for footer */
.footer-society-name { font-size: 0.8rem; font-weight: 400; letter-spacing: 1px; color: #bbb; margin-bottom: 1px; }

/* Adjusted school name size for footer */
.footer-school-name { font-size: 1.4rem; /* Slightly smaller than header version */ margin-top: 0; color: #fff; margin-bottom: 10px; }

/* Ensure the description paragraph also centers */
.footer-col p { max-width: 500px; /* Prevents text from stretching too wide */ margin: 0 auto; }


/* --- Mobile --- */
@media(max-width: 768px) {
    header { flex-direction: column; padding: 15px; text-align: center; }
    .header-logo-area { flex-direction: column; gap: 5px; margin-bottom: 10px; }
    .header-logo-area img { height: 50px; }
    .header-logo-area strong { font-size: 1.1rem; }
    .hero h1 { font-size: 30px; }
    .slide img { height: 300px; }
}

/* On smaller screens, the photo should move to the top for better flow */
@media (max-width: 768px) {
    .chairman-layout {
        flex-direction: column-reverse; /* Put text below image on mobile */
        text-align: center;
    }
}

/* Consistency for images */
.principal-img-box img {
    width: 100%;
    max-width: 350px; /* Adjust size as needed */
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Gallery Layout */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    height: 250px;
}

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

.gallery-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(11, 61, 145, 0.8); /* School Blue with transparency */
    color: white;
    padding: 10px;
    text-align: center;
    transform: translateY(100%); /* Hidden by default */
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

/* Hover Effects */
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* classes offered */

/* Container to center the button */
.cta-container {
    text-align: center;
    margin-top: 20px;
}

/* Button Styling */
.btn-join {
    display: inline-block;
    background-color: #50C878;
    color: white;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Rounded pill shape */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(80, 200, 120, 0.3);
}

/* Button Hover State */
.btn-join:hover {
    background-color: #3dae63; /* Slightly darker green */
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(80, 200, 120, 0.5);
}

/* class card background */
.ccard { 	background: linear-gradient(135deg, #ffffff 0%, #e8f7ee 100%); 
			padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
			text-align: center; transition: 0.3s; 
		}
.ccard:hover { transform: translateY(-5px); border-bottom: 4px solid #ff9800; }


/* Facilities List Styling */
.principal-text-box ul { list-style: none; margin-top: 15px; }

.principal-text-box ul li { padding-left: 25px; position: relative;  margin-bottom: 10px; font-weight: 500; color: #555; }

.principal-text-box ul li::before { content: '✔'; position: absolute; left: 0; color: #25D366; /* Green checkmark */ font-weight: bold; }


/* --- Management Committee Layout --- */
.committee-section { display: flex; flex-direction: column; align-items: center; gap: 50px; background-color: #f0f4f8; /* Light background to make cards pop */
					padding: 80px 20px; }

/* Row Containers */
.tier-top, .tier-middle, .tier-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; width: 100%; }

/* Individual Member Cards */
.member-card { background: white; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
			border: 2px solid #ffd700; /* Gold border like your image */ max-width: 250px; transition: transform 0.3s ease; }

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

.member-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; }

/* Text Styling */
.member-card h3 { font-size: 1rem; color: #0b3d91; margin-bottom: 5px; }

.member-card .designation { font-size: 0.8rem; color: #666; font-weight: 600; text-transform: uppercase; }

/* Specialized Card Sizes */
.principal-card { max-width: 280px; border: 3px solid #0b3d91; /* Different border for Principal */ }

.member-card.small { max-width: 200px; }

.member-card.small img { height: 180px; }

/* Mobile Responsiveness */
@media (max-width: 768px) { .tier-top, .tier-middle, .tier-bottom { flex-direction: column; align-items: center; } }


/* --- Faculty Section Backgrounds --- */
.secondary-bg { background-color: #f0f4ff; border-top: 5px solid #0b3d91; } /* Light Blue */
.primary-bg { background-color: #fff9f0; border-top: 5px solid #ff9800; }   /* Light Orange */
.pre-primary-bg { background-color: #f0fff4; border-top: 5px solid #25d366; } /* Light Green */

.faculty-section { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }

.section-title { text-align: center; margin-bottom: 20px; }
.section-title h2 { font-size: 2.5rem; color: #0b3d91; }

/* --- Hierarchy "Tree" Logic --- */
.hierarchy-level { display: flex; justify-content: center; gap: 30px; width: 100%; margin-bottom: 20px; }

.teachers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; max-width: 1000px; }

/* --- Faculty Card Specifics --- */
.member-card.principal { border: 3px solid #0b3d91; max-width: 280px; }
.member-card.head-teacher { border: 2px solid #ff9800; max-width: 240px; }
.member-card.teacher { border: 1px solid #ddd; background: #fff; padding: 20px; }

.member-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }

.member-card h3 { font-size: 1.1rem; margin: 5px 0; color: #333; }
.designation { font-size: 0.85rem; font-weight: 600; color: #666; text-transform: uppercase; }

/* Mobile Stack */
@media (max-width: 768px) {
    .hierarchy-level { flex-direction: column; align-items: center; }
}

/*contact.html*/
:root { --navy: #003366; --gold: #f1c40f; --light: #f8f9fa; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

        .page-header { background: #eee; text-align: center; padding: 40px 20px; color: var(--navy); border-bottom: 1px solid #ddd; }
        .container { max-width: 1100px; margin: 50px auto; padding: 0 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }

        /* Form Styling */
        .contact-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-top: 5px solid var(--navy); }
        .contact-card h2 { color: var(--navy); margin-bottom: 25px; font-size: 24px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; }
        input, select, textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
        input:focus, textarea:focus { border-color: var(--navy); }
        .submit-btn { background: var(--navy); color: white; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; transition: 0.3s; }
        .submit-btn:hover { background: #004a99; }

        /* Info Styling */
        .info-sidebar { display: flex; flex-direction: column; gap: 25px; }
        .info-item { display: flex; gap: 15px; align-items: flex-start; }
        .info-item i { background: var(--navy); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .info-item div h4 { color: var(--navy); margin-bottom: 5px; }
        .info-item div p { font-size: 14px; color: #555; line-height: 1.4; }

        .map-container { width: 100%; height: 250px; background: #eee; border-radius: 10px; margin-top: 20px; overflow: hidden; }

        @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }

		
/* --- Stats Diagram Layout --- */ /* For Pre-Primary, Primary & Secondary Webpage */

.stats-section { background: #0b3d91; /* School Blue */ padding: 30px 20px; margin-top: 0px; /* Overlaps slightly with hero for modern look */ position: relative; z-index: 5; }
.stats-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; }
.stat-item { text-align: center; color: white; flex: 1; min-width: 150px; }
.stat-circle { width: 100px; height: 100px; border: 4px solid #ffd700; /* Gold border */ border-radius: 50%; display: flex; align-items: center; justify-content: center;
			margin: 0 auto 15px; font-size: 1.5rem; font-weight: bold; background: rgba(255, 255, 255, 0.1); transition: 0.3s; }
.stat-item:hover .stat-circle { background: #ffd700; color: #0b3d91; transform: translateY(-5px); }

/* --- Details Grid --- */
.details-grid { display: flex; align-items: center; gap: 40px; margin-top: 40px; }
.details-text { flex: 1; }
.details-image { flex: 1; }
.details-image img { width: 100%; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

@media (max-width: 768px) {
    .details-grid { flex-direction: column; }
    .stats-container { gap: 40px; }
}

/* --- Banner Frame Styling --- */
.banner-frame {
    width: 100%;
    padding: 20px 0; /* Vertical padding only */
    display: flex;
    justify-content: center;
    
    /* Subtle Pattern Background */
    background-color: #f0f4f8;
    background-image: radial-gradient(#d1d9e6 0.8px, transparent 0.8px);
    background-size: 20px 20px; /* Creates a clean "dot grid" effect */
    border-bottom: 2px solid #ffd700; /* Gold divider line */
}

.banner-img {
    width: 90%; /* Shows more of the background "frame" on the sides */
    max-width: 1100px;
    height: auto;
    border: 5px solid white; /* Adds a "photo frame" look to the flex image */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Subtle hover effect for the banner itself */
.banner-img:hover {
    transform: scale(1.02);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .banner-frame {
        padding: 10px; /* Smaller frame on mobile */
    }
}