/* --- Upgraded Grid 4 System (Add this in CSS Part 1) --- */

.grid-4 { 

    display: grid !important; 

    grid-template-columns: repeat(4, 1fr) !important; /* कंप्यूटर पर परफेक्ट 4 कॉलम */

    gap: 20px !important; 

    width: 100% !important;

    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box !important;

}



/* CSS PART 1 START */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



:root {

    --primary-color: #2C4A3E; 

    --accent-color: #D4A373;  

    --text-dark: #333333;

    --text-light: #F4F6F5;

    --bg-light: #FAFAF9;

    --white: #FFFFFF;

    --border-color: #E2E2E2;

}



html { scroll-behavior: smooth; }

body { background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }



.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 0;

    box-sizing: border-box;

}

.text-center { text-align: center; }

.align-center { align-items: center; }

.min-600 { max-width: 800px; }



/* --- Fully Fluid Reusable Grid System --- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }



.section-title { text-align: center; margin-bottom: 40px; }

.section-title h2 {

    font-size: 2.5rem; color: var(--primary-color); margin-bottom: 10px; position: relative; display: inline-block;

}

.section-title h2::after {

    content: ''; display: block; width: 50%; height: 3px; background: var(--accent-color); margin: 8px auto 0 auto;

}



/* --- Premium Top Bar --- */

.top-bar {

    background-color: #1F362D !important; color: #FFFFFF !important; font-size: 0.85rem;

    border-bottom: 1px solid rgba(212, 163, 115, 0.3); width: 100%;

}

.top-bar-container {

    padding: 12px 0 !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;

}

.top-bar-info { color: #FFFFFF !important; }

.top-bar-info span { margin-right: 20px; color: #FFFFFF !important; display: inline-block; }

.top-bar-social { display: flex; gap: 15px; }

.social-icon { color: #FFFFFF !important; text-decoration: none; transition: color 0.3s ease; font-weight: 600; }

.social-icon:hover { color: var(--accent-color) !important; }

/* CSS PART 1 END */

/* CSS PART 2 START */

.main-header {

    background: var(--white) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    position: sticky; top: 0; z-index: 1000; width: 100%;

}

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

.logo { font-size: 1.8rem; font-weight: 700; color: var(--primary-color) !important; }

.logo span { color: var(--accent-color) !important; }

.nav-links a {

    text-decoration: none; color: var(--text-dark) !important; margin-left: 25px; font-weight: 600; transition: color 0.3s;

}

.nav-links a:hover { color: var(--accent-color) !important; }

.menu-toggle { display: none; flex-direction: column; cursor: pointer; }

.menu-toggle span { height: 3px; width: 25px; background: var(--primary-color); margin-bottom: 4px; border-radius: 2px; }



/* --- Automatic Slider Mechanics --- */

.hero-slider-container {

    position: relative; height: 80vh; min-height: 550px; overflow: hidden; background-color: #2C4A3E !important; width: 100%;

}

.slider-wrapper { position: relative; width: 100%; height: 100%; }

.slide {

    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden;

    transition: opacity 1s ease-in-out, visibility 1s ease-in-out; display: flex; align-items: center; justify-content: center;

}

.slide.active { opacity: 1; visibility: visible; }

.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; max-width: 900px; margin: 0 auto; }



/* High-Contrast White Text Forcing (No Blur) */

.hero-content h1 { 

    font-size: 3.5rem !important; color: #FFFFFF !important; margin-bottom: 20px; font-weight: 700;

    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8) !important;

}

.hero-content p { 

    font-size: 1.4rem !important; color: #F4F6F5 !important; margin-bottom: 15px;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;

}

.hero-subtext { font-size: 1.2rem !important; color: #D4A373 !important; font-weight: 600 !important; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }



.btn-primary {

    display: inline-block; padding: 15px 40px; background-color: #D4A373 !important; color: #FFFFFF !important;

    text-decoration: none; font-weight: bold; border-radius: 30px; margin-top: 25px;

    transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 15px rgba(212,163,115,0.4); border: none; cursor: pointer;

}

.btn-primary:hover { background-color: #c59263 !important; transform: translateY(-2px); }

/* CSS PART 2 END */

/* CSS PART 3 START */

.image-placeholder {

    background-color: #E9ECE9; border: 2px dashed #C2CDC8; color: #556B61;

    display: flex; align-items: center; justify-content: center; text-align: center;

    font-weight: 500; font-size: 0.95rem; border-radius: 8px; transition: all 0.3s ease; padding: 20px;

    width: 100%; max-width: 100%; box-sizing: border-box;

}

.main-gallery-img { height: 280px; }

.card-img { height: 200px; margin-bottom: 15px; }



.why-section { background-color: #F0F3F1; }

.why-card { background: var(--white); padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); width: 100%; box-sizing: border-box; }

.why-card h3 { font-size: 1.15rem; color: var(--primary-color); margin-bottom: 10px; }



.badge { background: var(--accent-color); color: var(--white); padding: 5px 12px; font-size: 0.8rem; border-radius: 20px; display: inline-block; margin-bottom: 15px; }

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

.founders-img { height: 400px; width: 100%; object-fit: cover; }



.services-section { background-color: #F9FAF9; }

.service-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.04); width: 100%; box-sizing: border-box; }

.service-img { height: 220px; border-radius: 0; border: none; border-bottom: 1px solid var(--border-color); }

.service-info { padding: 25px; }

.service-info h3 { color: var(--primary-color); margin-bottom: 10px; }



/* --- ??? PERMANENT FIX: TEACHERS SLIDER (No Left Margin Error) --- */

.responsive-teachers-grid {

    display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important;

    gap: 30px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important;

}

.responsive-teacher-card { flex: 0 1 150px !important; text-align: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }

.teacher-avatar-wrapper { width: 100% !important; position: relative !important; padding-top: 100% !important; margin-bottom: 15px !important; }

.teacher-avatar-inner {

    position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50% !important;

    background-color: #E9ECE9 !important; border: 2px dashed #C2CDC8 !important; color: #556B61 !important;

    display: flex !important; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; box-sizing: border-box;

}

.responsive-teacher-card h4 { font-size: 1rem !important; color: var(--primary-color) !important; font-weight: 600 !important; margin-top: 10px !important; }



.location-section { background: var(--primary-color); color: var(--white); padding: 50px 0; width: 100%; }

.location-badges { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 20px; }

.loc-badge { background: rgba(255,255,255,0.1); padding: 10px 25px; border-radius: 30px; font-weight: 600; border: 1px solid var(--accent-color); white-space: nowrap; }



.testimonial-card { background: var(--white); padding: 30px; border-radius: 8px; text-align: center; border-top: 3px solid var(--accent-color); width: 100%; box-sizing: border-box; }

.client-img { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px auto; }

.review-text { font-style: italic; color: #555; margin-bottom: 15px; }



.faq-section { background: #F0F3F1; width: 100%; }

.accordion { margin-top: 30px; width: 100%; }

.accordion-item { background: var(--white); margin-bottom: 10px; border-radius: 5px; overflow: hidden; width: 100%; }

.accordion-header { width: 100%; padding: 20px; text-align: left; background: var(--white); border: none; font-size: 1.1rem; font-weight: 600; color: var(--primary-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }

.accordion-header::after { content: '+'; font-size: 1.4rem; color: var(--accent-color); margin-left: 10px; }

.accordion-item.active .accordion-header::after { content: '-'; }

.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; width: 100%; }

.accordion-content p { padding: 20px; color: #555; border-top: 1px solid #EEE; box-sizing: border-box; }



.form-wrapper { background: var(--white); padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); width: 100%; box-sizing: border-box; }

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

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

.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 1rem; box-sizing: border-box; }

.btn-submit { width: 100%; padding: 14px; background: var(--primary-color); color: var(--white); border: none; border-radius: 5px; font-size: 1.1rem; font-weight: bold; cursor: pointer; }

.contact-info-box { padding: 40px; background: #ECEFEF; border-radius: 8px; width: 100%; box-sizing: border-box; }

.info-item { margin-top: 25px; }

.main-footer { background: #1F362D; color: rgba(255,255,255,0.8); padding: 40px 0; width: 100%; }



/* --- 100% Fluid Mobile Responsiveness Overrides --- */

@media (max-width: 992px) {

    .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .responsive-teachers-grid { gap: 20px !important; }

}

@media (max-width: 768px) {

    .container { width: 92% !important; padding: 40px 0 !important; box-sizing: border-box; }

    .grid-2, .grid-3, .grid-4 { display: block !important; width: 100% !important; }

    .why-card, .service-card, .testimonial-card, .form-wrapper, .contact-info-box { margin-bottom: 25px !important; width: 100% !important; display: block; }

    .responsive-teachers-grid { flex-wrap: wrap !important; gap: 15px !important; }

    .responsive-teacher-card { flex: 0 1 calc(50% - 15px) !important; }

    .about-images { margin-top: 25px; width: 100%; }

    .founders-img { height: 300px; }

    .main-gallery-img { margin-bottom: 20px; height: 240px; }

    .top-bar-container { flex-direction: column; gap: 8px; text-align: center; padding: 10px 0 !important; }

    .top-bar-info span { margin-right: 0; margin-bottom: 5px; }

    .hero-content h1 { font-size: 2.2rem !important; line-height: 1.3 !important; }

    .hero-content p { font-size: 1.1rem !important; }

    .menu-toggle { display: flex; }

    .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--white); flex-direction: column; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); box-sizing: border-box; }

    .nav-links.active { display: flex; }

    .nav-links a { margin: 10px 0; text-align: center; display: block; width: 100%; }

}

/* CSS PART 3 END */