/* --- ABOUT PAGE MASTER STYLES --- */

/* 1. Hero Section */
.about-page-hero {
    background: linear-gradient(rgba(106, 27, 154, 0.8), rgba(106, 27, 154, 0.8)), url('../images/about-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 5%;
    text-align: center;
    color: white;
}

/* 2. About Details (Text & Image Grid) */
.about-details { padding: 60px 5%; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-image-box img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* 3. Mission & Vision Grid */
.mission-vision-grid-section { padding: 60px 5%; background: #f9f9f9; }
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mv-card { display: flex; gap: 20px; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.mv-icon { font-size: 2rem; color: #6a1b9a; }

/* 4. Education System & Image Gallery */
.about-education-system { padding: 60px 5%; }
.education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.gallery-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.shape-img img { width: 100%; border-radius: 10px; object-fit: cover; }
.btn-discover { display: inline-block; padding: 15px 30px; background: #6a1b9a; color: white; text-decoration: none; border-radius: 5px; margin-top: 20px; }

/* 5. Stats Section */
.stats-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 50px 5%; background: #6a1b9a; color: white; text-align: center; }
.stat-item h3 { font-size: 2.5rem; margin-bottom: 5px; }

/* 6. Marquee Testimonials */
.testimonials-slider { padding: 60px 0; overflow: hidden; }
.marquee-wrapper { display: flex; overflow: hidden; margin-bottom: 20px; }
.marquee-content { display: flex; animation: scroll 30s linear infinite; }
.card { min-width: 250px; margin: 0 15px; padding: 20px; border: 1px solid #ddd; border-radius: 10px; text-align: center; }

@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 7. Teachers Grid */
.teachers-section { padding: 60px 5%; }
.teachers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.teacher-card { text-align: center; padding: 20px; }
.teacher-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; }

/* Responsive adjustments */
@media (max-width: 900px) {
    .about-grid, .grid-container, .education-grid { grid-template-columns: 1fr; }
    .stats-container { grid-template-columns: 1fr 1fr; }
    .teachers-grid { grid-template-columns: repeat(2, 1fr); }
}