/* ==========================================
   MADARASATU ABU-HURAIARA
   MAIN STYLESHEET
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#eef6ff;
color:#222;
overflow-x:hidden;
}

/* ================= HEADER ================= */

.main-header{

position:fixed;

top:0;

left:0;

width:100%;

height:75px;

background:#0f3d91;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 18px;

box-shadow:0 3px 12px rgba(0,0,0,.15);

z-index:1000;

}

.logo-box{

display:flex;

align-items:center;

gap:12px;

}

.logo{

width:55px;

height:55px;

background:white;

padding:4px;

border-radius:8px;

object-fit:contain;

}

.logo-box h2{

font-size:18px;

color:white;

}

.logo-box p{

font-size:12px;

color:#9ef19e;

}

.menu-btn{

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

}

/* =====================================================
   PREMIUM HAMBURGER MENU
===================================================== */

.menu-btn{
    width:48px;
    height:48px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#0b6b3a,#0f8c4f);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:.35s ease;
}

.menu-btn:hover{
    transform:translateY(-3px) scale(1.05);
    background:linear-gradient(135deg,#148a4e,#19a65e);
}

.menu-btn:active{
    transform:scale(.95);
}

/* ======================= */

.side-menu{

    position:fixed;
    top:0;
    left:-340px;
    width:320px;
    height:100vh;

    background:#ffffff;

    box-shadow:12px 0 35px rgba(0,0,0,.18);

    transition:.45s ease;

    overflow-y:auto;

    z-index:9999;

    padding-bottom:50px;

}

.side-menu.active{

    left:0;

}

/* ======================= */

.menu-header{

    background:linear-gradient(135deg,#0b6b3a,#148a4e);

    color:#fff;

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.menu-header h2{

    margin:0;

    font-size:22px;

    font-weight:700;

}

#closeMenu{

    background:none;

    border:none;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    transition:.3s;

}

#closeMenu:hover{

    transform:rotate(90deg);

}

/* ======================= */

.menu-section{

    margin:18px 0;

}

.menu-section-title{

    font-size:13px;

    text-transform:uppercase;

    font-weight:700;

    color:#0b6b3a;

    padding:15px 22px 8px;

    letter-spacing:1px;

}

/* ======================= */

.side-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.side-menu ul li{

    margin:0;

}

.side-menu ul li a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#333;

    font-size:16px;

    font-weight:500;

    padding:15px 22px;

    transition:.3s;

    border-left:4px solid transparent;

}

.side-menu ul li a i{

    width:24px;

    color:#0b6b3a;

    font-size:18px;

}

.side-menu ul li a:hover{

    background:#f3faf5;

    color:#0b6b3a;

    border-left:4px solid #d4af37;

    padding-left:28px;

}

/* ======================= */

.side-menu hr{

    margin:18px 20px;

    border:none;

    border-top:1px solid #e5e5e5;

}

/* ======================= */

#overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(2px);

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:9990;

}

#overlay.active{

    visibility:visible;

    opacity:1;

}

/* ======================= */

.menu-footer{

    margin-top:25px;

    padding:18px;

    text-align:center;

    font-size:13px;

    color:#666;

}

.menu-footer strong{

    color:#0b6b3a;

}

/* ======================= */

.side-menu::-webkit-scrollbar{

    width:6px;

}

.side-menu::-webkit-scrollbar-thumb{

    background:#0b6b3a;

    border-radius:10px;

}

/* ======================= */

@media(max-width:768px){

.side-menu{

    width:290px;

    left:-310px;

}

.menu-header h2{

    font-size:20px;

}

.side-menu ul li a{

    font-size:15px;

}

}

/* ==========================================
   HOME PAGE
========================================== */

.page{
display:none;
}

.active-page{
display:block;
}

/* Announcement */

.announcement-bar{
background:#16a34a;
color:#fff;
padding:10px;
font-weight:600;
font-size:15px;
margin-top:75px;
}

/* Hero */

.hero{

position:relative;

/* Professional background image implementation */
background-image: url('../images/gallery/school/school1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

min-height:85vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

/* Dark semi-transparent overlay to ensure text contrast */
background: rgba(6, 35, 20, 0.72);

}


.hero-content{

position:relative;

z-index:2;

padding:25px;

color:white;

}

.hero-logo{

width:220px;

height:220px;

object-fit:contain;

background:white;

padding:12px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

animation:floating 3s ease-in-out infinite;

margin-bottom:25px;

}

.arabic-text{

font-size:34px;

color:#ffe066;

margin-bottom:15px;

font-weight:700;

}

.welcome-text{

font-size:22px;

font-weight:500;

margin-bottom:8px;

}

.hero-content h1{

font-size:36px;

font-weight:700;

margin-bottom:8px;

}

.english-name{

font-size:28px;

font-weight:600;

margin-bottom:18px;

}

.school-address{

font-size:18px;

line-height:1.7;

margin-bottom:22px;

}

.hero-badges{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

margin-bottom:30px;

}

.hero-badges span{

background:white;

color:#0f3d91;

padding:10px 18px;

border-radius:40px;

font-weight:600;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.btn-primary{

background:#16a34a;

color:white;

padding:15px 30px;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-secondary{

background:white;

color:#0f3d91;

padding:15px 30px;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-primary:hover,

.btn-secondary:hover{

transform:scale(1.06);

}

/* Statistics */

.statistics{

padding:35px 18px;

background:#eef6ff;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.stat-card{

background:white;

padding:22px;

border-radius:18px;

text-align:center;

box-shadow:0 6px 18px rgba(0,0,0,.08);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card h2{

font-size:34px;

color:#0f3d91;

margin-bottom:10px;

}

.stat-card p{

font-size:16px;

font-weight:600;

color:#555;

}

/* Animation */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* Mobile */

@media(max-width:768px){

.hero-logo{

width:180px;

height:180px;

}

.arabic-text{

font-size:28px;

}

.hero-content h1{

font-size:28px;

}

.english-name{

font-size:22px;

}

.school-address{

font-size:15px;

}

.hero-badges span{

font-size:13px;

}

.btn-primary,

.btn-secondary{

width:90%;

text-align:center;

}

.statistics{

grid-template-columns:1fr 1fr;

}

}

/* ==========================================
   WELCOME SECTION
========================================== */

.welcome-section{

padding:45px 20px;

background:#eef6ff;

}

/* Welcome Card */

.welcome-card{

background:linear-gradient(135deg,#0f3d91,#2563eb);

color:white;

padding:30px;

border-radius:20px;

margin-bottom:25px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:.35s;

}

.welcome-card:hover{

transform:translateY(-6px);

}

.welcome-card h2{

font-size:30px;

margin-bottom:15px;

}

.welcome-card p{

font-size:17px;

line-height:1.8;

text-align:justify;

}

/* About Card */

.about-card{

background:white;

padding:30px;

border-radius:20px;

margin-bottom:25px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

border-left:6px solid #16a34a;

transition:.35s;

}

.about-card:hover{

transform:translateY(-6px);

}

.about-card h2{

color:#0f3d91;

font-size:28px;

margin-bottom:15px;

}

.about-card p{

font-size:17px;

line-height:1.8;

text-align:justify;

color:#444;

}

/* Vision & Mission */

.vision-mission{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:20px;

}

.vision-box{

background:linear-gradient(135deg,#16a34a,#22c55e);

color:white;

padding:25px;

border-radius:20px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

transition:.35s;

}

.mission-box{

background:linear-gradient(135deg,#0f3d91,#2563eb);

color:white;

padding:25px;

border-radius:20px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

transition:.35s;

}

.vision-box:hover,

.mission-box:hover{

transform:translateY(-6px);

}

.vision-box h3,

.mission-box h3{

font-size:24px;

margin-bottom:15px;

display:flex;

align-items:center;

gap:10px;

}

.vision-box p,

.mission-box p{

font-size:16px;

line-height:1.8;

text-align:justify;

}

/* Mobile */

@media(max-width:768px){

.welcome-card,

.about-card,

.vision-box,

.mission-box{

padding:22px;

}

.welcome-card h2,

.about-card h2{

font-size:24px;

}

.vision-box h3,

.mission-box h3{

font-size:21px;

}

.welcome-card p,

.about-card p,

.vision-box p,

.mission-box p{

font-size:15px;

}

}

/* ==========================================
   WHY CHOOSE OUR SCHOOL
========================================== */

.features-section{

padding:70px 20px;

background:linear-gradient(to bottom,#eef6ff,#ffffff);

}

.section-heading{

text-align:center;

font-size:34px;

font-weight:700;

color:#0f3d91;

margin-bottom:12px;

}

.section-subtitle{

text-align:center;

font-size:17px;

color:#666;

max-width:700px;

margin:0 auto 45px;

line-height:1.8;

}

.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.feature-card{

background:#ffffff;

border-radius:22px;

padding:35px 25px;

text-align:center;

box-shadow:0 12px 28px rgba(0,0,0,.08);

transition:all .35s ease;

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(90deg,#16a34a,#0f3d91);

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.feature-card i{

font-size:52px;

color:#16a34a;

margin-bottom:22px;

transition:.35s;

}

.feature-card:hover i{

transform:scale(1.18) rotate(5deg);

color:#0f3d91;

}

.feature-card h3{

font-size:24px;

color:#0f3d91;

margin-bottom:15px;

font-weight:700;

}

.feature-card p{

font-size:16px;

line-height:1.8;

color:#555;

}

/* Mobile */

@media(max-width:768px){

.features-section{

padding:50px 18px;

}

.section-heading{

font-size:28px;

}

.section-subtitle{

font-size:15px;

margin-bottom:30px;

}

.feature-card{

padding:28px 20px;

}

.feature-card i{

font-size:42px;

}

.feature-card h3{

font-size:21px;

}

.feature-card p{

font-size:15px;

}

}

/* ==========================================
   SCHOOL GALLERY PREVIEW
========================================== */

.gallery-preview{

padding:80px 20px;

background:linear-gradient(180deg,#ffffff,#eef6ff);

}

.section-title{

text-align:center;

margin-bottom:45px;

}

.section-title h2{

font-size:36px;

color:#0f3d91;

margin-bottom:15px;

font-weight:700;

}

.section-title p{

max-width:700px;

margin:auto;

font-size:17px;

line-height:1.8;

color:#555;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:22px;

background:#fff;

box-shadow:0 12px 30px rgba(0,0,0,.10);

transition:.4s;

}

.gallery-item:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.gallery-item img{

width:100%;

height:270px;

object-fit:cover;

transition:.6s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.10);

}

.gallery-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:25px;

background:linear-gradient(to top,rgba(15,61,145,.95),rgba(15,61,145,.15));

color:white;

}

.gallery-overlay h3{

font-size:24px;

font-weight:700;

}

.gallery-btn{

text-align:center;

margin-top:45px;

}

.gallery-btn a{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 40px;

background:linear-gradient(135deg,#16a34a,#0f3d91);

color:white;

text-decoration:none;

font-size:18px;

font-weight:700;

border-radius:50px;

transition:.35s;

box-shadow:0 8px 25px rgba(0,0,0,.18);

}

.gallery-btn a:hover{

transform:translateY(-5px) scale(1.05);

}

.gallery-btn i{

transition:.35s;

}

.gallery-btn a:hover i{

transform:translateX(8px);

}

/* Mobile */

@media(max-width:768px){

.gallery-preview{

padding:60px 15px;

}

.section-title h2{

font-size:28px;

}

.section-title p{

font-size:15px;

}

.gallery-item img{

height:220px;

}

.gallery-overlay{

padding:18px;

}

.gallery-overlay h3{

font-size:20px;

}

.gallery-btn a{

width:100%;

justify-content:center;

font-size:16px;

padding:15px;

}

}

/* ==========================================
   MEET OUR LEADERSHIP
========================================== */

.leadership{

padding:90px 20px;

background:linear-gradient(180deg,#eef6ff,#ffffff);

}

.leadership-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:35px;

max-width:1450px;

margin:auto;

margin-top:50px;

}

.leader-card{

background:#fff;

border-radius:25px;

padding:35px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.10);

transition:.4s;

position:relative;

overflow:hidden;

}

.leader-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.leader-card img{

width:200px;

height:200px;

border-radius:50%;

object-fit:cover;

background:#f5f5f5;

padding:6px;

margin-bottom:22px;

transition:.4s;

}

.leader-card:hover img{

transform:scale(1.08);

}

.leader-card h3{

font-size:24px;

color:#0f3d91;

margin-bottom:8px;

}

.leader-card h4{

font-size:17px;

margin-bottom:15px;

font-weight:600;

}

.leader-card p{

font-size:15px;

line-height:1.8;

color:#555;

margin-bottom:25px;

}

.leader-card a{

display:inline-block;

padding:14px 35px;

border-radius:40px;

text-decoration:none;

font-weight:700;

color:white;

transition:.35s;

}

/* Founder */

.founder{

border-top:8px solid gold;

}

.founder img{

border:6px solid gold;

}

.founder h4{

color:#c99a00;

}

.founder a{

background:linear-gradient(135deg,#FFD700,#C99700);

}

/* Head Master */

.headmaster{

border-top:8px solid #0f3d91;

}

.headmaster img{

border:6px solid #0f3d91;

}

.headmaster h4{

color:#0f3d91;

}

.headmaster a{

background:#0f3d91;

}

/* Assistant Head Master */

.assistant{

border-top:8px solid #16a34a;

}

.assistant img{

border:6px solid #16a34a;

}

.assistant h4{

color:#16a34a;

}

.assistant a{

background:#16a34a;

}

/* Secretaries */

.secretary{

border-top:8px solid #6b7280;

}

.secretary img{

border:6px solid #6b7280;

}

.secretary h4{

color:#374151;

}

.secretary a{

background:#374151;

}

/* Financial Secretary */

.finance{

border-top:8px solid #7c3aed;

}

.finance img{

border:6px solid #7c3aed;

}

.finance h4{

color:#7c3aed;

}

.finance a{

background:#7c3aed;

}

/* Hover Button */

.leader-card a:hover{

transform:scale(1.06);

opacity:.9;

}

/* Mobile */

@media(max-width:768px){

.leadership{

padding:60px 15px;

}

.leader-card{

padding:25px;

}

.leader-card img{

width:160px;

height:160px;

}

.leader-card h3{

font-size:20px;

}

.leader-card h4{

font-size:15px;

}

.leader-card p{

font-size:14px;

}

.leader-card a{

width:100%;

padding:14px;

}

}

/* ==========================================
   FEATURED TEACHERS
========================================== */

.featured-teachers{

padding:100px 20px;

background:linear-gradient(180deg,#f8fbff,#eef8ff);

}

.featured-teachers .section-title{

max-width:760px;

margin:0 auto 60px;

text-align:center;

}

.featured-teachers .section-title h2{

font-size:42px;

font-weight:700;

color:#0f3d91;

margin-bottom:15px;

}

.featured-teachers .section-title p{

font-size:18px;

line-height:1.8;

color:#555;

}

.teachers-grid{

max-width:1500px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:35px;

align-items:stretch;

}

/* CARD */

.teacher-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:0 18px 40px rgba(15,61,145,.10);

transition:.45s;

position:relative;

display:flex;

flex-direction:column;

}

.teacher-card::before{

content:"";

width:100%;

height:6px;

background:linear-gradient(90deg,#0f3d91,#16a34a);

display:block;

}

.teacher-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(15,61,145,.18);

}

/* PHOTO */

.teacher-card img{

width:100%;

height:340px;

object-fit:cover;

display:block;

transition:.45s;

}

.teacher-card:hover img{

transform:scale(1.03);

}

/* CONTENT */

.teacher-card h3{

font-size:24px;

font-weight:700;

color:#0f3d91;

margin:25px 25px 12px;

}

.teacher-card p{

margin:0 25px;

font-size:15px;

line-height:1.8;

color:#666;

flex:1;

}

/* BUTTON */

.teacher-btn{

margin:25px;

display:inline-block;

text-align:center;

padding:15px;

border-radius:50px;

background:linear-gradient(135deg,#0f3d91,#16a34a);

color:#fff;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.teacher-btn:hover{

transform:translateY(-3px);

}

/* VIEW ALL BUTTON */

.teachers-footer{

text-align:center;

margin-top:60px;

}

.view-all-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 42px;

background:#0f3d91;

color:#fff;

font-size:18px;

font-weight:700;

text-decoration:none;

border-radius:50px;

box-shadow:0 15px 35px rgba(15,61,145,.18);

transition:.35s;

}

.view-all-btn:hover{

background:#16a34a;

transform:translateY(-4px);

}

/* MOBILE */

@media(max-width:768px){

.featured-teachers{

padding:70px 15px;

}

.featured-teachers .section-title h2{

font-size:32px;

}

.featured-teachers .section-title p{

font-size:15px;

}

.teachers-grid{

grid-template-columns:1fr;

gap:30px;

}

.teacher-card{

border-radius:20px;

}

.teacher-card img{

height:300px;

}

.teacher-card h3{

font-size:22px;

}

.teacher-card p{

font-size:15px;

}

.teacher-btn{

width:calc(100% - 50px);

}

.view-all-btn{

width:100%;

font-size:17px;

}

}

/* ==========================================
   SCHOOL STATISTICS
========================================== */

.school-statistics{

padding:100px 20px;

background:linear-gradient(135deg,#0f3d91,#16a34a);

position:relative;

overflow:hidden;

}

.school-statistics .section-title{

text-align:center;

max-width:760px;

margin:0 auto 60px;

color:#fff;

}

.school-statistics .section-title h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

}

.school-statistics .section-title p{

font-size:18px;

line-height:1.8;

opacity:.95;

}

.statistics-grid{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.stat-card{

background:#fff;

border-radius:24px;

padding:40px 25px;

text-align:center;

box-shadow:0 18px 40px rgba(0,0,0,.15);

transition:.4s;

position:relative;

overflow:hidden;

}

.stat-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(90deg,#0f3d91,#16a34a);

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 28px 55px rgba(0,0,0,.20);

}

.stat-card i{

font-size:60px;

color:#16a34a;

margin-bottom:20px;

}

.stat-card h3{

font-size:48px;

font-weight:700;

color:#0f3d91;

margin-bottom:12px;

}

.stat-card p{

font-size:18px;

font-weight:600;

color:#555;

}

/* MOBILE */

@media(max-width:768px){

.school-statistics{

padding:70px 15px;

}

.school-statistics .section-title h2{

font-size:32px;

}

.school-statistics .section-title p{

font-size:15px;

}

.statistics-grid{

grid-template-columns:1fr;

gap:25px;

}

.stat-card{

padding:35px 20px;

}

.stat-card i{

font-size:50px;

}

.stat-card h3{

font-size:40px;

}

.stat-card p{

font-size:16px;

}

}

/* ==========================================
   SCHOOL HISTORY PREVIEW
========================================== */

.history-preview{
    padding:100px 8%;
    background:linear-gradient(135deg,#f8f6f0,#ffffff,#f3efe4);
    position:relative;
    overflow:hidden;
}

.history-preview::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(198,153,66,.08);
}

.history-preview::after{
    content:"";
    position:absolute;
    bottom:-140px;
    left:-120px;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(20,88,54,.05);
}

.history-preview .section-title{
    text-align:center;
    margin-bottom:60px;
    position:relative;
    z-index:2;
}

.history-preview .section-title h2{
    font-size:2.4rem;
    color:#145836;
    margin-bottom:15px;
    font-weight:700;
}

.history-preview .section-title p{
    max-width:850px;
    margin:auto;
    line-height:1.9;
    color:#666;
    font-size:1.05rem;
}

.history-container{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:45px;
    align-items:center;
    position:relative;
    z-index:2;
}

.history-card{
    background:#fff;
    padding:45px;
    border-radius:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border-left:7px solid #c69942;
    transition:.4s;
}

.history-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.13);
}

.history-card h3{
    color:#145836;
    font-size:1.8rem;
    margin-bottom:22px;
}

.history-card p{
    line-height:2;
    color:#555;
    font-size:1.05rem;
    text-align:justify;
}

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

.highlight-box{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.highlight-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(to right,#145836,#c69942);
}

.highlight-box:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.highlight-box i{
    font-size:2.3rem;
    color:#c69942;
    margin-bottom:18px;
}

.highlight-box h3{
    font-size:2rem;
    color:#145836;
    margin-bottom:10px;
    font-weight:700;
}

.highlight-box p{
    color:#666;
    font-size:.98rem;
    line-height:1.6;
}

.history-button{
    margin-top:60px;
    text-align:center;
}

.history-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#145836;
    color:#fff;
    padding:18px 42px;
    border-radius:60px;
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    transition:.35s;
    box-shadow:0 15px 35px rgba(20,88,54,.25);
}

.history-btn:hover{
    background:#c69942;
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(198,153,66,.35);
}

.history-btn i{
    transition:.3s;
}

.history-btn:hover i{
    transform:translateX(6px);
}

/* ===========================
   Responsive
=========================== */

@media(max-width:992px){

.history-container{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.history-preview{

padding:80px 20px;

}

.history-preview .section-title h2{

font-size:2rem;

}

.history-card{

padding:30px;

}

.history-highlights{

grid-template-columns:1fr;

}

.history-btn{

width:100%;
justify-content:center;

}

}

/* ==========================================
   CONTACT SECTION
========================================== */

.contact-section{

    padding:100px 8%;
    background:
    linear-gradient(rgba(6,35,20,.93),
    rgba(8,55,30,.94)),
    url("../images/contact-bg.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:#fff;

}

.contact-section .section-title{

    text-align:center;
    margin-bottom:60px;

}

.contact-section .section-title h2{

    font-size:42px;
    font-weight:700;
    color:#FFD54F;
    margin-bottom:15px;

}

.contact-section .section-title p{

    max-width:760px;
    margin:auto;
    line-height:1.9;
    color:#f4f4f4;
    font-size:17px;

}

/* ========================= */

.contact-container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px;

}

/* ========================= */

.contact-info{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:24px;

    padding:40px;

    box-shadow:
    0 18px 45px rgba(0,0,0,.35);

}

.contact-info h3{

    font-size:30px;
    color:#FFD54F;
    margin-bottom:30px;

}

.info-box{

    display:flex;
    gap:18px;
    margin-bottom:28px;

}

.info-box i{

    width:65px;
    height:65px;

    background:#FFD54F;
    color:#0B7A3D;

    border-radius:50%;

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

    font-size:24px;

    flex-shrink:0;

}

.info-box h4{

    margin-bottom:8px;
    color:#FFD54F;
    font-size:20px;

}

.info-box p{

    color:#ffffff;
    line-height:1.8;
    font-size:16px;

}

/* ========================= */

.contact-form{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.25);

}

.contact-form h3{

    color:#0B7A3D;
    margin-bottom:30px;
    font-size:30px;

}

.contact-form form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px;

    border-radius:14px;

    border:2px solid #e5e5e5;

    font-size:16px;

    transition:.35s;

    outline:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#0B7A3D;

    box-shadow:
    0 0 18px rgba(11,122,61,.18);

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    background:linear-gradient(135deg,#0B7A3D,#169B4F);

    color:#fff;

    border:none;

    padding:18px;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.contact-form button:hover{

    transform:translateY(-4px);

    background:linear-gradient(135deg,#169B4F,#0B7A3D);

    box-shadow:
    0 15px 35px rgba(11,122,61,.35);

}

.contact-form button i{

    margin-right:10px;

}

/* ========================= */

.info-box:hover{

    transform:translateX(10px);

    transition:.35s;

}

.info-box:hover i{

    transform:rotate(360deg);

    transition:.8s;

}

/* ========================= */

@media(max-width:992px){

.contact-container{

grid-template-columns:1fr;

}

}

/* ========================= */

@media(max-width:768px){

.contact-section{

padding:80px 6%;

}

.contact-section .section-title h2{

font-size:34px;

}

.contact-info,
.contact-form{

padding:30px;

}

.info-box{

flex-direction:column;
align-items:flex-start;

}

.info-box i{

width:58px;
height:58px;

font-size:20px;

}

.contact-form h3,
.contact-info h3{

font-size:25px;

}

}

/* ==========================================
   FIND OUR SCHOOL
========================================== */

.location-section{

    padding:100px 8%;
    background:linear-gradient(135deg,#f8fcf8,#eef8f1);

}

.location-section .section-title{

    text-align:center;
    margin-bottom:60px;

}

.location-section .section-title h2{

    font-size:42px;
    color:#0B7A3D;
    margin-bottom:15px;

}

.location-section .section-title p{

    max-width:760px;
    margin:auto;
    color:#555;
    line-height:1.9;
    font-size:17px;

}

/* =========================== */

.location-container{

    display:grid;
    grid-template-columns:380px 1fr;
    gap:40px;
    align-items:stretch;

}

/* =========================== */

.location-info{

    display:flex;
    flex-direction:column;
    gap:22px;

}

.location-card{

    background:#ffffff;

    padding:28px;

    border-radius:22px;

    text-align:center;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

    border-top:5px solid #0B7A3D;

}

.location-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.14);

}

.location-card i{

    width:70px;
    height:70px;

    margin:auto;

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

    background:#FFD54F;

    color:#0B7A3D;

    border-radius:50%;

    font-size:28px;

    margin-bottom:18px;

}

.location-card h3{

    color:#0B7A3D;
    margin-bottom:12px;

}

.location-card p{

    color:#555;
    line-height:1.8;

}

/* =========================== */

.map-buttons{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.map-btn,
.direction-btn{

    display:flex;

    justify-content:center;
    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.map-btn{

    background:#0B7A3D;

    color:#fff;

}

.direction-btn{

    background:#FFD54F;

    color:#0B7A3D;

}

.map-btn:hover{

    transform:translateY(-4px);

    background:#0F9148;

}

.direction-btn:hover{

    transform:translateY(-4px);

    background:#ffca28;

}

/* =========================== */

.map-box{

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:0 22px 55px rgba(0,0,0,.15);

    position:relative;

}

.map-box iframe{

    width:100%;
    height:100%;
    min-height:620px;

    border:none;

}

/* Decorative Gold Line */

.map-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;

    background:linear-gradient(90deg,#FFD54F,#0B7A3D,#FFD54F);

    z-index:2;

}

/* =========================== */

.location-card,
.map-box{

    opacity:0;

    transform:translateY(40px);

    animation:locationFade .9s forwards;

}

.location-card:nth-child(2){

    animation-delay:.15s;

}

.location-card:nth-child(3){

    animation-delay:.30s;

}

.map-box{

    animation-delay:.45s;

}

@keyframes locationFade{

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* =========================== */

@media(max-width:992px){

.location-container{

grid-template-columns:1fr;

}

.map-box iframe{

min-height:450px;

}

}

/* =========================== */

@media(max-width:768px){

.location-section{

padding:80px 6%;

}

.location-section .section-title h2{

font-size:34px;

}

.location-card{

padding:24px;

}

.map-box iframe{

min-height:500px;

}

}

.map-box iframe{

opacity:0;

transition:opacity .8s ease;

}

/* ==========================================
   PREMIUM FOOTER
========================================== */

.main-footer{

    background:linear-gradient(135deg,#064420,#0B7A3D);

    color:#ffffff;

    padding:80px 8% 30px;

    margin-top:100px;

    position:relative;

    overflow:hidden;

}

/* Gold decorative line */

.main-footer::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        #FFD54F,
        #ffffff,
        #FFD54F
    );

}

/* =============================== */

.footer-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:45px;

}

/* =============================== */

.footer-column h3{

    color:#FFD54F;

    margin-bottom:20px;

    font-size:24px;

}

.footer-column p{

    line-height:1.9;

    color:#f3f3f3;

    margin-bottom:12px;

}

.footer-school-name{

    color:#FFD54F;

    font-weight:600;

}

/* =============================== */

.footer-logo{

    width:90px;

    height:90px;

    border-radius:50%;

    margin-bottom:20px;

    background:#ffffff;

    padding:6px;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

/* =============================== */

.footer-column ul{

    list-style:none;

    padding:0;

}

.footer-column ul li{

    margin-bottom:14px;

}

.footer-column ul li a{

    color:#ffffff;

    text-decoration:none;

    transition:.35s;

}

.footer-column ul li a:hover{

    color:#FFD54F;

    padding-left:10px;

}

/* =============================== */

.footer-column i{

    color:#FFD54F;

    margin-right:10px;

    width:22px;

}

/* =============================== */

.main-footer hr{

    margin:50px 0 25px;

    border:none;

    height:1px;

    background:rgba(255,255,255,.2);

}

/* =============================== */

.footer-bottom{

    text-align:center;

}

.footer-bottom p{

    margin:10px 0;

    color:#eeeeee;

    line-height:1.8;

}

.footer-bottom strong{

    color:#FFD54F;

}

/* ===============================
   Scroll To Top
================================ */

#scrollTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#FFD54F;

    color:#0B7A3D;

    font-size:22px;

    cursor:pointer;

    box-shadow:0 15px 35px rgba(0,0,0,.30);

    display:none;

    transition:.35s;

    z-index:999;

}

#scrollTop:hover{

    transform:translateY(-8px);

    background:#ffffff;

}

/* ===============================
   Footer Animation
================================ */

.footer-column{

    opacity:0;

    transform:translateY(40px);

    animation:footerFade .8s forwards;

}

.footer-column:nth-child(2){

    animation-delay:.15s;

}

.footer-column:nth-child(3){

    animation-delay:.30s;

}

.footer-column:nth-child(4){

    animation-delay:.45s;

}

@keyframes footerFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===============================
   Mobile
================================ */

@media(max-width:768px){

.main-footer{

padding:60px 6% 25px;

}

.footer-container{

gap:35px;

}

.footer-column{

text-align:center;

}

.footer-logo{

margin:auto auto 20px;

}

#scrollTop{

width:50px;

height:50px;

font-size:18px;

right:20px;

bottom:20px;

}

}