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

body{

font-family:Arial,sans-serif;
background:#3c58d3;
color:#222;

}

.hero{

padding:40px;
text-align:center;
background:#27ae60;
color:#fff;

}

h2{

font-size:18px;

font-weight:800;

line-height:1;

text-align:center;

margin-bottom:25px;

padding:18px 20px;



background:#27ae60;


backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);



color:blue;



letter-spacing:.5px;

position:relative;

overflow:hidden;

transition:.4s ease;

}


h3{

font-size:18px;

font-weight:800;

line-height:1;

text-align:center;

margin-bottom:25px;

padding:18px 20px;



background:#27ae60;


backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);



color:rgb(127, 221, 238);



letter-spacing:.5px;

position:relative;

overflow:hidden;

transition:.4s ease;

}


/* Hover Effect */



/* Glow Line */



@keyframes glowLine{

0%{
left:-100%;
}

100%{
left:100%;
}

}

/* Mobile */

@media(max-width:768px){

h2{

font-size:22px;

padding:16px;

}

}

.schools-grid{
background:rgba(255,255,255,.05);
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
padding:30px;
max-width:1400px;
margin:auto;

}

.school-card{

background:#050816;
color: white;
border-radius:20px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,.1);

}

.school-card h3{

margin-bottom:20px;

}

.posts{

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

}

.post img,
.post video{

width:100%;
border-radius:15px;

}

.share-btn{

width:100%;
padding:15px;
margin-top:20px;
border:none;
background:#27ae60;
color:#fff;
font-size:16px;
border-radius:12px;
cursor:pointer;

}

.modal-root{

position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:none;
justify-content:center;
align-items:center;
z-index:9999;

}

.modal{

width:90%;
max-width:500px;
background:#fff;
padding:30px;
border-radius:20px;
display:flex;
flex-direction:column;
gap:15px;

}

.modal input,
.modal textarea{

padding:14px;
border:1px solid #ccc;
border-radius:10px;
font-size:15px;

}

.modal textarea{

height:120px;
resize:none;

}

.file-label{

background:#3498db;
color:#fff;
padding:15px;
text-align:center;
border-radius:12px;
cursor:pointer;

}

.file-label input{

display:none;

}

.modal-buttons{

display:flex;
gap:10px;

}

.send-btn,
.close-btn{

flex:1;
padding:15px;
border:none;
border-radius:12px;
cursor:pointer;
color:#fff;
font-size:16px;

}

.send-btn{

background:#27ae60;

}

.close-btn{

background:#e74c3c;

}

footer{

padding:30px;
text-align:center;
color:yellow
}

@media(max-width:900px){

.schools-grid{

grid-template-columns:1fr;

}

}