/* ==========================================
   ST. JOIS LITTLE ANGELS ACADEMY
   PREMIUM SCHOOL DESIGN
========================================== */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

font-family:'Poppins',sans-serif;

background:#f4f8fc;

color:#1c2b3a;

overflow-x:hidden;

}





/* BACKGROUND DECORATIONS */


body::before{

content:"";

position:fixed;

width:350px;

height:350px;

background:#0b4f8a;

border-radius:50%;

top:-150px;

left:-150px;

opacity:.12;

animation:moveOne 8s infinite alternate;

z-index:-1;

}



body::after{

content:"";

position:fixed;

width:300px;

height:300px;

background:#e6c76a;

border-radius:50%;

bottom:-100px;

right:-100px;

opacity:.15;

animation:moveTwo 10s infinite alternate;

z-index:-1;

}



@keyframes moveOne{

from{

transform:translate(0);

}

to{

transform:translate(80px,100px);

}

}



@keyframes moveTwo{

from{

transform:translate(0);

}

to{

transform:translate(-80px,-100px);

}

}






/* HEADER */


header{


background:

linear-gradient(
135deg,
#062b55,
#0b4f8a
);


padding:35px;


color:white;


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


}



.header-content{


display:flex;

justify-content:center;

align-items:center;

gap:40px;

text-align:center;


}



.logo{


width:130px;

height:130px;

border-radius:50%;

background:white;

padding:8px;

border:4px solid #e6c76a;


animation:logoGlow 3s infinite alternate;


}



@keyframes logoGlow{


from{

box-shadow:0 0 10px #e6c76a;

}


to{

box-shadow:0 0 35px #e6c76a;

}


}



header h1{


font-size:38px;

color:#e6c76a;

text-shadow:0 5px 10px black;


}



header h2{

color:white;

}



header p{

font-size:18px;

}








/* NAVIGATION */


nav{


background:#041d38;


padding:18px;

text-align:center;

position:sticky;

top:0;

z-index:100;


}



nav a{


color:white;

margin:20px;

text-decoration:none;

font-weight:600;

transition:.4s;


}



nav a:hover{


color:#e6c76a;

transform:scale(1.1);


}







/* VIDEO SECTION */
/* ======================================
   PREMIUM WELCOME VIDEO SECTION
====================================== */


.video-section{

height:1000px;

position:relative;

overflow:hidden;

}





.video-section video{

width:100%;

height:100%;

object-fit:cover;

}





.video-section::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;


background:

linear-gradient(
rgba(6,43,85,.78),
rgba(0,0,0,.65)
);


}





.video-overlay{


position:absolute;


z-index:2;


top:50%;


left:50%;


transform:translate(-50%,-50%);


width:95%;


text-align:center;


color:white;


}







/* WELCOME TEXT */


/* ======================================
   MAROON PREMIUM WELCOME TEXT
====================================== */


.video-overlay h1{

font-family:"Cormorant Garamond",serif;

font-style:italic;

font-size:70px;

font-weight:700;

letter-spacing:8px;


/* Bright green gradient */

background:

linear-gradient(
90deg,
#00ff66,
#00ffcc,
#7cff00
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;



text-shadow:

0 0 15px #00ff66,
0 0 30px #00ff99;



animation:

welcomeGlow 3s infinite alternate;


}
@keyframes welcomeGlow{


from{

filter:
drop-shadow(0 0 5px #00ff66);

transform:translateY(0);

}



to{

filter:
drop-shadow(0 0 35px #00ff99);

transform:translateY(-10px);

}


}





/* MOTTO */


.motto-box{


display:inline-block;


margin:25px;


padding:15px 40px;


border-radius:50px;


background:

linear-gradient(
135deg,
#e6c76a,
#ffffff
);


color:#062b55;


font-family:"Cormorant Garamond",serif;


font-style:italic;


font-size:24px;


font-weight:bold;


box-shadow:

0 0 30px #e6c76a;


animation:

mottoMove 3s infinite alternate;


}








/* VISION CARDS */


.vision-container{


display:flex;


justify-content:center;


gap:25px;


margin-top:25px;


}





.vision-card{


width:300px;


padding:25px;


background:

rgba(6,43,85,.85);


border:2px solid #e6c76a;


border-radius:25px;


backdrop-filter:blur(8px);


animation:

cardFloat 5s infinite alternate;


}




.vision-card h3{


font-family:"Cormorant Garamond",serif;


font-style:italic;


font-size:30px;


color:#e6c76a;


}





.vision-card p{


font-family:"Cormorant Garamond",serif;


font-style:italic;


font-size:20px;


line-height:1.5;


color:white;


}





/* ANIMATIONS */


@keyframes welcomeAnimation{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}







@keyframes schoolGlow{


0%{

filter:drop-shadow(0 0 5px #e6c76a);

}



50%{

filter:drop-shadow(0 0 30px #e6c76a);

}



100%{

filter:drop-shadow(0 0 5px white);

}


}






@keyframes mottoMove{


from{

transform:scale(1);

}


to{

transform:scale(1.08);

}


}







@keyframes cardFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}








/* STATISTICS DASHBOARD */


.statistics{


display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin-top:40px;


}





.stat-card{


width:230px;

padding:30px;

background:

linear-gradient(

135deg,

#0b4f8a,

#062b55

);


border-radius:25px;


border-bottom:6px solid #e6c76a;


box-shadow:

0 15px 35px rgba(0,0,0,.3);


color:white;


animation:floatCard 4s infinite alternate;


transition:.5s;


}





.stat-card:hover{


transform:scale(1.08);


}




.stat-icon{


font-size:50px;

animation:bounce 2s infinite;


}



.stat-card h2{


font-size:40px;

color:#e6c76a;

text-shadow:0 0 15px rgba(230,199,106,.7);


}



.stat-card p{


font-size:20px;

font-weight:bold;


}








/* LOGIN */


.login-box{


background:white;

width:420px;

max-width:90%;

margin:50px auto;

padding:35px;

border-radius:25px;


box-shadow:

0 15px 40px rgba(0,0,0,.2);


}



.login-box h2{


text-align:center;

color:#062b55;


}




input{


width:100%;

padding:15px;

margin:10px 0;

border-radius:12px;

border:1px solid #ccc;


}





button{


background:

linear-gradient(

135deg,

#0b4f8a,

#062b55

);


color:white;

padding:15px 35px;

border:none;

border-radius:40px;

font-weight:bold;

cursor:pointer;

transition:.4s;


}



button:hover{


background:#e6c76a;

color:#062b55;

transform:scale(1.1);


}








/* REPORT CARD */


.results{


width:90%;

margin:auto;

display:none;


}




.report-card{


background:white;

padding:40px;

border-radius:25px;

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


}





.school-header{


display:flex;

justify-content:space-between;

align-items:center;

background:

linear-gradient(

135deg,

#062b55,

#0b4f8a

);


padding:25px;

border-radius:20px;

color:white;


}





.report-logo{


width:100px;

height:100px;

border-radius:50%;

background:white;

padding:5px;


}




.director{


background:#e6c76a;

color:#062b55;

padding:15px;

text-align:center;

border-radius:15px;

margin:20px 0;

font-weight:bold;


}





table{


width:100%;

border-collapse:collapse;

margin-top:20px;


}



th{


background:#0b4f8a;

color:white;

padding:15px;


}



td{


padding:15px;

border:1px solid #ddd;

text-align:center;


}




.summary{


background:#fdf6df;

border-left:8px solid #e6c76a;

padding:25px;

margin-top:25px;

border-radius:20px;

text-align:center;


}









/* MAP */


.map-section{


padding:40px;

text-align:center;


}



.map-section iframe{


width:90%;

height:400px;

border-radius:25px;

box-shadow:0 10px 30px #ccc;


}








/* FOOTER */


footer{


background:#041d38;

color:white;

text-align:center;

padding:35px;


}



footer img{


width:70px;

border-radius:50%;


}








/* ANIMATIONS */


@keyframes floating{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}





@keyframes floatCard{


from{

transform:translateY(0);

}


to{

transform:translateY(-20px);

}


}




@keyframes bounce{


50%{

transform:translateY(-15px);


}

}





@keyframes slideDown{


from{

opacity:0;

transform:translateY(-80px);

}


to{

opacity:1;

}


}








/* MOBILE */


@media(max-width:900px){


.header-content{

flex-direction:column;


}



.video-overlay h1{

font-size:35px;


}



.video-overlay h2{

font-size:28px;


}



.vision-container{


flex-direction:column;

align-items:center;


}



.school-header{


flex-direction:column;

gap:15px;


}



nav a{

display:block;

margin:10px;


}


}
/* ==========================================
   ABOUT US PREMIUM DESIGN
   ST. JOIS LITTLE ANGELS ACADEMY
========================================== */


.about-section{

position:relative;

padding:80px 40px;

background:

linear-gradient(
135deg,
#f4f8fc,
#ffffff,
#eef5ff
);

overflow:hidden;

}





/* Decorative circles */


.about-section::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:#e6c76a;

border-radius:50%;

top:-100px;

left:-100px;

opacity:.15;

animation:aboutCircle 8s infinite alternate;


}



.about-section::after{

content:"";

position:absolute;

width:300px;

height:300px;

background:#0b4f8a;

border-radius:50%;

bottom:-120px;

right:-100px;

opacity:.12;

animation:aboutCircle2 10s infinite alternate;


}





@keyframes aboutCircle{


from{

transform:translate(0);

}


to{

transform:translate(80px,50px);

}


}



@keyframes aboutCircle2{


from{

transform:translate(0);

}


to{

transform:translate(-60px,-70px);

}


}








.about-section h2{


position:relative;

z-index:2;


text-align:center;


font-size:42px;


font-family:
"Georgia",
serif;


font-style:italic;


color:#062b55;


letter-spacing:2px;


margin-bottom:15px;


}





.about-intro{


position:relative;

z-index:2;


text-align:center;


font-family:

"Cursive",
"Georgia",
serif;


font-style:italic;


font-size:22px;


color:#0b4f8a;


margin-bottom:50px;


}









/* ABOUT CARDS */


.about-container{


position:relative;

z-index:2;


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));


gap:35px;


max-width:1200px;


margin:auto;


}





.about-card{


background:

rgba(255,255,255,.75);


backdrop-filter:blur(10px);


border-radius:30px;


padding:35px;


border-top:6px solid #e6c76a;


box-shadow:

0 15px 35px rgba(0,0,0,.12);


transition:.5s;


animation:

aboutFloat 5s infinite alternate;


}





.about-card:hover{


transform:

translateY(-15px)
scale(1.03);


box-shadow:

0 25px 50px rgba(0,0,0,.2);


}




.about-card h3{


font-family:

Georgia,
serif;


font-style:italic;


font-size:26px;


color:#0b4f8a;


margin-bottom:20px;


}




.about-card p{


font-family:

"Georgia",
serif;


font-style:italic;


font-size:17px;


line-height:1.9;


color:#333;


}









/* MOTTO CARD */


.special-card{


background:

linear-gradient(

135deg,

#062b55,

#0b4f8a

);


color:white;


}



.special-card h3{


color:#e6c76a;


}




.special-card h2{


font-family:

Georgia,
serif;


font-style:italic;


color:#e6c76a;


font-size:30px;


}






.special-card p{


color:white;


}









/* CORE VALUES */


.values-box{


position:relative;

z-index:2;


margin:60px auto;


max-width:1000px;


padding:40px;


border-radius:30px;


background:

linear-gradient(

135deg,

#062b55,

#0b4f8a

);


text-align:center;


box-shadow:

0 20px 40px rgba(0,0,0,.2);


}




.values-box h3{


font-family:

Georgia,
serif;


font-style:italic;


font-size:32px;


color:#e6c76a;


margin-bottom:25px;


}





.values-box span{


display:inline-block;


background:#e6c76a;


color:#062b55;


padding:12px 25px;


margin:10px;


border-radius:40px;


font-family:

Georgia,
serif;


font-style:italic;


font-weight:bold;


animation:

valueFloat 3s infinite alternate;


}








/* LEADERSHIP */


.leadership-box{


position:relative;

z-index:2;


margin-top:50px;


background:white;


padding:45px;


border-radius:30px;


box-shadow:

0 15px 40px rgba(0,0,0,.15);


}





.leadership-box h3{


text-align:center;


font-family:

Georgia,
serif;


font-style:italic;


font-size:32px;


color:#062b55;


}





.leader-card{


width:330px;


margin:30px auto;


text-align:center;


padding:30px;


border-radius:25px;


background:#f4f8fc;


animation:

leaderMove 4s infinite alternate;


}





.leader-card img{


width:150px;


height:150px;


border-radius:50%;


object-fit:cover;


border:5px solid #e6c76a;


}




.leader-card h4{


font-family:

Georgia,
serif;


font-style:italic;


font-size:26px;


color:#0b4f8a;


}






.leader-card p{


font-family:

Georgia,
serif;


font-style:italic;


line-height:1.8;


}









@keyframes aboutFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}





@keyframes valueFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-10px);

}


}





@keyframes leaderMove{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}