/* =========================================
MA'AS-SAFARAH PREMIUM MODERN UI
Elegant • Confident • Islamic Identity
========================================= */

/* ===== BRAND VARIABLES ===== */
:root{
--primary:#0f3d2e;
--secondary:#145c43;
--accent:#d4af37;
--accent-soft:#f1d47a;
--light-bg:#f4f7f6;
--white:#ffffff;
--text-dark:#1e1e1e;
--text-light:#f9f9f9;
--border-soft:#e6ecea;
--gradient:linear-gradient(135deg,#0f3d2e,#145c43);
}

/* ===== GLOBAL ===== */
body{
font-family: 'Segoe UI', Tahoma, sans-serif;
line-height:1.7;
color:var(--text-dark);
scroll-behavior:smooth;
}

.section{
padding:3rem 1.5rem;
position:relative;
}

.section-bg{
background:var(--light-bg);
}

.section-dark{
background:var(--gradient);
color:var(--text-light);
}

.container{
max-width:1200px;
}

.about-container{
    background:#fff;
    border-top: 3px solid #d4af37;
    border-bottom: 3px solid #d4af37;
}

/* ===== TYPOGRAPHY RESPONSIVE ===== */
h1{font-weight:800;}
h2{font-weight:800;}
h3{font-weight:600;}

@media(min-width:992px){
h1{font-size:3.2rem;}
h2{font-size:2.5rem;}
p{font-size:1.05rem;}
}

@media(max-width:768px){
h1{font-size:2rem;}
h2{font-size:1.6rem;}
p{font-size:.95rem;}
}

/* ===== HERO ===== */
.hero-section{
min-height:100vh;
background:
linear-gradient(rgba(15,61,46,.75),rgba(15,61,46,.9)),
url('../../../schoolPics/hero-student-reading-quran.png') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:var(--white);
padding:3rem 1rem;
}

.hero-section p{
max-width:750px;
margin:auto;
opacity:.95;
}

/* ===== BUTTONS ===== */
.btn-gold{
background:var(--accent);
color:#000;
border-radius:50px;
padding:14px 36px;
font-weight:600;
transition:.3s ease;
border:none;
}

.btn-gold:hover{
background:#b8962e;
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,.2);
}

/* ===== SECTION TITLES ===== */
.section-title{
margin-bottom:3rem;
}

.section-title span{
width:80px;
height:4px;
background:var(--accent);
display:block;
margin:1rem auto;
border-radius:2px;
}

/*Core Values Section*/
.value-card{
background:linear-gradient(135deg,#145c43,#0f3d2e);
color:#fff;
padding:2.5rem 1.5rem;
border-radius:20px;
transition:.4s;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.value-card i{
font-size:2.5rem;
color:#f1d47a;
margin-bottom:1rem;
}

.value-card:hover{
transform:translateY(-8px);
background:linear-gradient(135deg,#ffffff,#f4f7f6);
color:var(--text-dark);
}

.value-card:hover i{
color:var(--accent);
}

/* ===== CARDS ===== */
.card{
border-radius:20px;
border:1px solid var(--border-soft);
padding:2rem;
transition:.4s ease;
background:var(--white);
height:100%;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,.08);
border-color:var(--accent);
}

/* ===== WHY CHOOSE ICONS ===== */
.card i{
color:var(--accent);
}

/* ===== STATS ===== */
.stats-section{
background:var(--gradient);
color:var(--white);
padding:5rem 0;
}

.counter{
font-size:3rem;
font-weight:800;
color:var(--accent-soft);
}

/* ===== TESTIMONIALS ===== */
.testimonial-card{
background:var(--white);
padding:2.5rem 2rem;
border-radius:20px;
border:1px solid var(--border-soft);
transition:.4s;
}

.section-dark .testimonial-card{
    color:var(--text-dark);
}

.testimonial-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.testimonial-card img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin-bottom:1rem;
border:4px solid var(--accent);
}

.star-rating{
color:#f5b301;
margin-bottom:.5rem;
}

/* ===== TEACHERS ===== */
.teacher-card{
margin-bottom:2rem;
transition:.5s;
}

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

.teacher-front{
text-align:center;
padding:2rem;
background:#fff;
border-radius:20px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.teacher-front img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:1rem;
border:4px solid var(--accent);
}

.teacher-role{
color:var(--secondary);
font-weight:600;
}

/* ===== SECTION DIVIDER DECORATION ===== */
.section-divider{
position:relative;
height:100px;
overflow:hidden;
}

.section-divider svg{
position:absolute;
bottom:0;
width:100%;
height:100%;
}

/* ===== CTA ===== */
.cta-section{
background:var(--secondary);
color:#fff;
padding:5rem 1rem;
}

.cta-section .btn-gold{
background:#fff;
color:var(--primary);
}

.cta-section h2{
font-weight:800;
}

/* ===== WHATSAPP ===== */
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:#fff;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:1.8rem;
box-shadow:0 10px 25px rgba(0,0,0,.2);
z-index:999;
}

/*Font awesome Icons global size*/
.fa-solid,
.fa-brands{
font-size:1.8rem;
}

.card i{
font-size:2.2rem;
}

.stats-icon{
font-size:3rem;
color:var(--accent-soft);
}

/*Why Choose us section*/
.why-slider{
display:flex;
gap:2rem;
overflow:hidden;
scroll-behavior:smooth;
}

.why-slider .card{
min-width:30%;
flex-shrink:0;
}

/*GLASSMORPHISM PREMIUM EFFECT */
.glass-card{
background: rgba(255,255,255,0.25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 25px;
padding: 2.5rem 2rem;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
transition: all .4s ease;
height:100%;
}

.glass-card:hover{
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
background: rgba(20,92,67,0.8);
color:#fff;
}

.glass-card i{
font-size:2.5rem;
color: var(--accent);
margin-bottom:1rem;
}

.glass-card:hover i{
color:#f1d47a;
}

.teacher-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-bottom:1rem;
border:4px solid rgba(255,255,255,0.5);
}