/*=====================================================
 NIIST PUBLIC SCHOOL
 Premium School Website
 Author : ChatGPT
 Version : 2.0
======================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==========================
ROOT VARIABLES
==========================*/

:root{

--primary:#0f766e;
--secondary:#14b8a6;
--accent:#f59e0b;

--dark:#06283D;
--light:#F7FAFC;
--white:#ffffff;
--text:#475569;
--border:#E5E7EB;

--gradient:
linear-gradient(135deg,#0f766e,#14b8a6);

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

--radius:18px;

--transition:.35s ease;

}

/*==========================
RESET
==========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:var(--light);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/*==========================
COMMON
==========================*/

.container{

width:min(1280px,92%);

margin:auto;

}

section{

padding:90px 0;

}

img{

width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

transition:.3s;

}

ul{

list-style:none;

}

h1,h2,h3,h4{

color:var(--dark);

font-weight:700;

line-height:1.2;

}

h2{

font-size:42px;

margin-bottom:18px;

}

p{

color:var(--text);

}

/*==========================
BUTTONS
==========================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary{

background:var(--gradient);

color:#fff;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-outline{

border:2px solid #fff;

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:var(--primary);

}

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

header{

position:fixed;

background:#044a1d;
top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

/* transition:.4s; */

}

header.active{

background:#044a1d;

box-shadow:0 5px 25px rgba(0, 0, 250, 0.08);

padding:12px 0;

}

nav{

display:flex;

align-items:center;

justify-content:space-between;

}

/*==========================
LOGO
==========================*/

.logo{

display:flex;

align-items:center;

gap:14px;

}

.logo img{

width:68px;

transition:.3s;

}

.logo h3{

font-size:24px;

color:#fff;

}

.logo span{

display:block;

font-size:13px;

font-weight:500;

color:#fff;

}

header.active .logo h3{

color:var(--light);

}

header.active .logo span{

color:var(--text);

}

/*==========================
MENU
==========================*/

.nav-links{

display:flex;

gap:35px;

align-items:center;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-weight:600;

color:#fff;

padding:10px 0;

position:relative;

}

header.active .nav-links a{

color:var(--light);

}

.nav-links a::after{

content:'';

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:var(--light);

transition:.35s;

border-radius:10px;

}

.nav-links a:hover::after,

.nav-links .active::after{

width:100%;

}

.nav-links a:hover{

color:var(--accent);

}

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

.nav-btn{

padding:13px 28px;

background:var(--gradient);

color:#fff;

border-radius:50px;

font-weight:600;

box-shadow:var(--shadow);

}

.nav-btn:hover{

transform:translateY(-4px);

}

/*==========================
MOBILE MENU
==========================*/

.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

color:#fff;

}

header.active .menu-btn{

color:var(--light);

}

/*==========================
HERO
==========================*/

.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}

/* Background Slider */

.hero-slide{

position:absolute;

width:100%;

height:100%;

background-size:cover;

background-position:center;

opacity:0;

transition:1.2s;

}

.hero-slide.active{

opacity:1;

}

/* Overlay */

.hero::before{

content:'';

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(6,40,61,.85),

rgba(6,40,61,.45)

);

z-index:1;

}

/* Hero Content */

.hero-content{

position:relative;

z-index:5;

max-width:760px;

color:#fff;

}

.hero-content h1{

font-size:70px;

color:#fff;

margin-bottom:25px;

}

.hero-content h1 span{

display:block;

color:var(--accent);

}

.hero-content p{

font-size:18px;

color:#f1f5f9;

margin-bottom:40px;

}

.hero-btns{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/*==========================
HERO STATS
==========================*/

.hero-stats{

display:flex;

gap:20px;

margin-top:70px;

flex-wrap:wrap;

}

.stat{

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

backdrop-filter:blur(15px);

padding:25px;

border-radius:20px;

min-width:180px;

}

.stat h3{

font-size:34px;

color:#fff;

}

.stat p{

color:#fff;

font-size:15px;

}

/*==========================
SECTION TITLE
==========================*/

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

background:#dff7f3;

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.section-title p{

max-width:700px;

margin:auto;

}

/*==========================
CARD
==========================*/

.card{

background:#fff;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}
/*=====================================================
MODULE 2
ABOUT • PRINCIPAL • VISION • FEATURES • STATS
======================================================*/

/*==========================
ABOUT SECTION
==========================*/

.about{
background:#fff;
position:relative;
overflow:hidden;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image{
position:relative;
}

.about-image img{
border-radius:24px;
box-shadow:var(--shadow);
}

.about-image::after{
content:"";
position:absolute;
right:-20px;
bottom:-20px;
width:180px;
height:180px;
background:var(--gradient);
border-radius:30px;
z-index:-1;
}

.about-content h2{
margin-bottom:20px;
}

.about-content p{
margin-bottom:20px;
}

.about-list{
margin-top:25px;
display:grid;
gap:15px;
}

.about-list li{
display:flex;
align-items:center;
gap:15px;
font-weight:500;
color:var(--dark);
}

.about-list i{
width:42px;
height:42px;
background:var(--gradient);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

/*==========================
PRINCIPAL MESSAGE
==========================*/

.principal{
background:#f8fafc;
}

.principal-box{
display:grid;
grid-template-columns:320px 1fr;
gap:50px;
align-items:center;
background:#fff;
padding:45px;
border-radius:25px;
box-shadow:var(--shadow);
}

.principal-image img{
border-radius:20px;
}

.principal-content h3{
margin-bottom:15px;
font-size:32px;
}

.principal-content p{
margin-bottom:18px;
}

.principal-sign{
margin-top:25px;
font-weight:700;
color:var(--primary);
}

/*==========================
VISION MISSION
==========================*/

.vision-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
margin-top:60px;
}

.vision-card{
background:#fff;
padding:40px;
border-radius:22px;
box-shadow:var(--shadow);
transition:.35s;
border-top:5px solid var(--primary);
}

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

.vision-card i{
font-size:42px;
color:var(--primary);
margin-bottom:20px;
}

.vision-card h3{
margin-bottom:18px;
}

/*==========================
WHY CHOOSE US
==========================*/

.features{
background:#fff;
}

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

.feature-card{
background:#fff;
padding:35px;
border-radius:22px;
text-align:center;
box-shadow:var(--shadow);
transition:.35s;
}

.feature-card:hover{
transform:translateY(-8px);
}

.feature-icon{
width:80px;
height:80px;
margin:auto;
margin-bottom:22px;
border-radius:50%;
background:var(--gradient);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:30px;
}

/*==========================
COUNTER SECTION
==========================*/

.counter{
background:var(--gradient);
color:#fff;
}

.counter-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center;
}

.counter-item h2{
font-size:52px;
color:#fff;
margin-bottom:10px;
}

.counter-item p{
color:#fff;
font-size:16px;
}

/*==========================
HOVER EFFECT
==========================*/

.feature-card:hover .feature-icon{
transform:rotate(360deg);
transition:.7s;
}

/*==========================
ANIMATION
==========================*/

.fade-up{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}
/*=====================================================
MODULE 3
ACADEMICS • FACILITIES • ACTIVITIES • NEWS • CTA
======================================================*/

/*==========================
ACADEMICS
==========================*/

.academics{
background:#f8fafc;
}

.program-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

.program-card{
background:#fff;
padding:35px 25px;
border-radius:20px;
text-align:center;
box-shadow:var(--shadow);
transition:.35s;
border-bottom:4px solid transparent;
}

.program-card:hover{
transform:translateY(-8px);
border-color:var(--primary);
}

.program-card i{
font-size:48px;
color:var(--primary);
margin-bottom:20px;
}

.program-card h3{
font-size:22px;
margin-bottom:12px;
}

.program-card p{
font-size:15px;
}

/*==========================
FACILITIES
==========================*/

.facilities{
background:#fff;
}

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

.facility-card{
overflow:hidden;
background:#fff;
border-radius:22px;
box-shadow:var(--shadow);
transition:.35s;
}

.facility-card img{
height:240px;
object-fit:cover;
transition:.5s;
}

.facility-card:hover img{
transform:scale(1.08);
}

.facility-content{
padding:25px;
}

.facility-content h3{
margin-bottom:12px;
}

.facility-card:hover{
transform:translateY(-8px);
}

/*==========================
ACTIVITIES
==========================*/

.activities{
background:#f8fafc;
}

.activity-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

.activity-card{
background:#fff;
padding:30px;
text-align:center;
border-radius:18px;
box-shadow:var(--shadow);
transition:.35s;
}

.activity-card i{
font-size:40px;
color:var(--accent);
margin-bottom:18px;
}

.activity-card:hover{
background:var(--gradient);
color:#fff;
transform:translateY(-8px);
}

.activity-card:hover h3,
.activity-card:hover p,
.activity-card:hover i{
color:#fff;
}

/*==========================
LATEST NEWS
==========================*/

.news{
background:#fff;
}

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

.news-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.35s;
}

.news-card img{
height:240px;
object-fit:cover;
transition:.5s;
}

.news-card:hover img{
transform:scale(1.08);
}

.news-content{
padding:25px;
}

.news-date{
display:inline-block;
padding:8px 16px;
background:var(--primary);
color:#fff;
border-radius:30px;
font-size:13px;
margin-bottom:15px;
}

.news-content h3{
margin-bottom:12px;
font-size:22px;
}

.news-card:hover{
transform:translateY(-8px);
}

/*==========================
EVENT STRIP
==========================*/

.event-strip{
background:var(--gradient);
padding:25px;
border-radius:22px;
display:flex;
justify-content:space-between;
align-items:center;
margin-top:60px;
color:#fff;
flex-wrap:wrap;
gap:20px;
}

.event-strip h3{
color:#fff;
font-size:30px;
}

.event-strip p{
color:#fff;
margin-top:8px;
}

/*==========================
CTA SECTION
==========================*/

.cta{
padding:90px 0;
background:linear-gradient(rgba(6,40,61,.88),rgba(6,40,61,.88)),
url("images/cta.jpg") center/cover;
text-align:center;
color:#fff;
}

.cta h2{
color:#fff;
font-size:48px;
margin-bottom:20px;
}

.cta p{
max-width:700px;
margin:auto;
margin-bottom:35px;
color:#f1f5f9;
font-size:18px;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/*==========================
IMAGE HOVER
==========================*/

.zoom-img{
overflow:hidden;
border-radius:20px;
}

.zoom-img img{
transition:.5s;
}

.zoom-img:hover img{
transform:scale(1.1);
}
/*=====================================================
MODULE 4
GALLERY • TESTIMONIAL • FAQ • NEWSLETTER • FOOTER
======================================================*/

/*==========================
GALLERY
==========================*/

.gallery{
    background:#fff;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    margin-top:50px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    box-shadow:var(--shadow);
}

.gallery-item img{
    height:280px;
    width:100%;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.12);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.1),rgba(15,118,110,.85));
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.4s;
}

.gallery-overlay i{
    color:#fff;
    font-size:34px;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

/*==========================
TESTIMONIALS
==========================*/

.testimonials{
    background:#f8fafc;
}

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

.testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:22px;
    box-shadow:var(--shadow);
    position:relative;
    transition:.35s;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.testimonial-card::before{
    content:"❝";
    position:absolute;
    top:20px;
    right:25px;
    font-size:60px;
    color:#dbeafe;
}

.testimonial-user{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

.testimonial-user img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
}

.stars{
    color:#f59e0b;
    margin:12px 0;
}

/*==========================
FAQ
==========================*/

.faq{
    background:#fff;
}

.faq-box{
    max-width:900px;
    margin:auto;
}

.faq-item{
    background:#fff;
    border-radius:18px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.faq-question{
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-weight:600;
}

.faq-question i{
    transition:.3s;
}

.faq-answer{
    display:none;
    padding:0 30px 25px;
}

.faq-item.active .faq-answer{
    display:block;
}

.faq-item.active i{
    transform:rotate(180deg);
}

/*==========================
NEWSLETTER
==========================*/

.newsletter{
    background:var(--gradient);
    padding:70px 40px;
    border-radius:28px;
    text-align:center;
    color:#fff;
}

.newsletter h2{
    color:#fff;
}

.newsletter p{
    color:#fff;
    margin:20px auto 35px;
    max-width:650px;
}

.newsletter form{
    display:flex;
    max-width:700px;
    margin:auto;
    overflow:hidden;
    border-radius:60px;
    background:#fff;
}

.newsletter input{
    flex:1;
    padding:18px 24px;
    border:none;
    outline:none;
    font-size:16px;
}

.newsletter button{
    border:none;
    padding:18px 40px;
    background:var(--dark);
    color:#fff;
    cursor:pointer;
}

/*==========================
CONTACT PREVIEW
==========================*/

.contact-preview{
    background:#fff;
}

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

.contact-card{
    text-align:center;
    background:#fff;
    padding:35px;
    border-radius:22px;
    box-shadow:var(--shadow);
}

.contact-card i{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--gradient);
    color:#fff;
    font-size:28px;
}

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

/* footer{
    background:#06283D;
    color:#fff;
    padding:80px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:40px;
}

.footer-logo img{
    width:80px;
    margin-bottom:20px;
}

.footer-logo p{
    color:#cbd5e1;
}

.footer-title{
    color:#fff;
    margin-bottom:25px;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:#cbd5e1;
}

.footer-links a:hover{
    color:#14b8a6;
    padding-left:8px;
}

.footer-contact li{
    display:flex;
    gap:12px;
    margin-bottom:18px;
    color:#cbd5e1;
}

.footer-contact i{
    color:#14b8a6;
    margin-top:4px;
}

.social-icons{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.social-icons a{
    width:45px;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:.3s;
}

.social-icons a:hover{
    background:var(--secondary);
    transform:translateY(-5px);
}

/*==========================
COPYRIGHT
==========================*/

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:50px;
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.footer-bottom p{
    color:#cbd5e1;
}

.footer-bottom a{
    color:#14b8a6;
} */

/*==========================
BACK TO TOP
==========================*/

.back-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gradient);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

.back-top.show{
    opacity:1;
    visibility:visible;
}
/*=====================================================
MODULE 5
RESPONSIVE • UTILITIES • FORMS • LOADER
======================================================*/

/*==========================
FORM ELEMENTS
==========================*/

input,
textarea,
select{
width:100%;
padding:15px 18px;
border:1px solid var(--border);
border-radius:12px;
font-family:inherit;
font-size:15px;
outline:none;
transition:.3s;
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(15,118,110,.12);
}

textarea{
resize:vertical;
min-height:140px;
}

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

/*==========================
TABLE
==========================*/

table{
width:100%;
border-collapse:collapse;
margin-top:25px;
background:#fff;
}

table th{
background:var(--primary);
color:#fff;
padding:14px;
}

table td{
padding:14px;
border:1px solid #e5e7eb;
}

table tr:nth-child(even){
background:#f8fafc;
}

/*==========================
LOADER
==========================*/

.loader{
position:fixed;
inset:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.4s;
}

.loader.hide{
opacity:0;
visibility:hidden;
}

.loader::after{
content:"";
width:55px;
height:55px;
border:6px solid #e5e7eb;
border-top-color:var(--primary);
border-radius:50%;
animation:spin .9s linear infinite;
}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/*==========================
UTILITY CLASSES
==========================*/

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

.mt-30{
margin-top:30px;
}

.mt-50{
margin-top:50px;
}

.mb-30{
margin-bottom:30px;
}

.mb-50{
margin-bottom:50px;
}

.rounded{
border-radius:20px;
}

.shadow{
box-shadow:var(--shadow);
}

.bg-primary{
background:var(--primary);
color:#fff;
}

.bg-light{
background:#f8fafc;
}

/*==========================
ANIMATIONS
==========================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.zoom-in{

animation:zoomIn .8s ease forwards;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:1200px){

.program-grid,
.activity-grid{
grid-template-columns:repeat(2,1fr);
}

.facility-grid,
.news-grid,
.testimonial-grid,
.contact-grid,
.footer-grid{
grid-template-columns:repeat(2,1fr);
}

.about-grid,
.principal-box{
grid-template-columns:1fr;
}

.hero-content h1{
font-size:56px;
}

}

@media(max-width:992px){

.nav-links{
position:fixed;
top:82px;
left:-100%;
width:280px;
height:100vh;
background:#fff;
flex-direction:column;
align-items:flex-start;
padding:40px 30px;
gap:22px;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.nav-links.active{
left:0;
}

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

.menu-btn{
display:block;
}

.nav-btn{
display:none;
}

.hero{
height:auto;
padding:160px 0 100px;
}

.hero-content h1{
font-size:46px;
}

.hero-stats{
justify-content:center;
}

.counter-grid{
grid-template-columns:repeat(2,1fr);
}

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.program-grid,
.facility-grid,
.activity-grid,
.news-grid,
.gallery-grid,
.testimonial-grid,
.contact-grid,
.footer-grid,
.counter-grid,
.vision-grid{

grid-template-columns:1fr;

}

.hero-content{

text-align:center;

}

.hero-btns{

justify-content:center;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.section-title h2{

font-size:34px;

}

.newsletter form{

flex-direction:column;

border-radius:20px;

}

.newsletter button{

width:100%;

}

.footer-bottom{

text-align:center;

justify-content:center;

}

}

@media(max-width:576px){

section{

padding:70px 0;

}

.container{

width:94%;

}

.logo img{

width:55px;

}

.logo h3{

font-size:20px;

}

.hero-content h1{

font-size:32px;

}

.btn{

width:100%;

}

.hero-btns{

flex-direction:column;

}

.stat{

width:100%;

}

.card{

padding:25px;

}

}

/*==========================
PRINT
==========================*/

@media print{

header,
footer,
.back-top,
.loader{

display:none;

}

body{

background:#fff;

}

section{

padding:20px 0;

}

}
/* Lightbox */

.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
}

.lightbox-close{
position:absolute;
top:30px;
right:40px;
font-size:42px;
color:#fff;
cursor:pointer;
}

/* Toast */

.toast{
position:fixed;
right:25px;
bottom:30px;
background:#0f766e;
color:#fff;
padding:15px 25px;
border-radius:10px;
opacity:0;
transform:translateY(20px);
transition:.3s;
z-index:99999;
}

.toast.show{
opacity:1;
transform:translateY(0);
}

/* Scroll Progress */

.scroll-progress{
position:fixed;
top:0;
left:0;
height:4px;
width:0;
background:#14b8a6;
z-index:999999;
}
/* Footer School Logo */

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

footer{
    background:#024632;
    color:#fff;
    padding:60px 0 20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
    align-items:start;
}

/* School */

.footer-brand{
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-brand img{
    width:75px;
    height:75px;
    object-fit:contain;
    flex-shrink:0;
}

.footer-brand-text h3{
    margin:0 0 8px;
    color:#fff;
    font-size:24px;
    font-weight:600;
}

.footer-brand-text p{
    margin:0;
    color:#fff;
    line-height:1.7;
}

/* Headings */

footer h4{
    color:#fff;
    margin-bottom:18px;
    font-size:20px;
}

/* Links */

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#f9d342;
    padding-left:5px;
}

/* Social */

.social-links{
    display:flex;
    gap:12px;
}

.social-links a{
    width:42px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.social-links a:hover{
    background:#ffffff;
    color:#f5faf8;
    transform:translateY(-3px);
}

/* Divider */

footer hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.2);
    margin:40px 0 20px;
}

/* Copyright */

.copyright{
    text-align:center;
    color:#fff;
    margin:0;
    font-size:15px;
}

/* Responsive */

@media(max-width:768px){

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:35px;
}

.footer-brand{
    justify-content:center;
}

.social-links{
    justify-content:center;
}

}