*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI;
}

body{
background:#0b1f3a;
color:white;
scroll-behavior:smooth;
}
header{
background:linear-gradient(90deg,#ff7a00,#005eff);
padding:15px;
text-align:center;
position:relative;
}
.logo{
position:absolute;
left:15px;
top:10px;
width:60px;
height:60px;
border-radius:50%;
border:2px solid white;
}

nav{
background:#001b3a;
padding:12px;
text-align:center;
position:sticky;
top:0;
}
nav a{
color:#ff7a00;
margin:15px;
text-decoration:none;
font-weight:bold;
}
nav a:hover{color:#00aaff}


/* Container for the Hero section */
.hero {
    position: relative;
    height: 70vh; /* Reduced height for a more professional look */
    overflow: hidden;
    border-bottom: 5px solid #ff7a00; /* Proper bottom boundary */
}

/* Styling for the Hero Image */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image isn't stretched */
    display: block;
}

/* Dark overlay to make the text pop */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 27, 58, 0.6); /* Matching your theme colors */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-text h2 {
    font-size: 50px;
    color: #ff7a00;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
    margin: 0;
}

.hero-text p {
    font-size: 20px;
    color: white;
    margin-top: 10px;
}


section{
padding:60px 8%;
}
h2{
text-align:center;
color:#00aaff;
margin-bottom:20px;
}
.center{text-align:center}


/* Gallery Container - Keeps them in a straight line */
.gallery {
    display: flex;             /* Changed to flex for a guaranteed straight line */
    justify-content: center;   /* Centers the boxes */
    gap: 20px;                 /* Space between boxes */
    flex-wrap: wrap;           /* Allows them to wrap on small mobile screens */
    padding: 20px 0;
}

/* Square Gallery Frames */
.gallery img {
    width: 300px;              /* Set the size of your square */
    aspect-ratio: 1 / 1;       /* Magic property: Forces Width and Height to be equal */
    object-fit: cover;         /* Crops the image to fill the square perfectly */
    border-radius: 10px;       /* Professional rounded corners */
    border: 3px solid #ff7a00; /* School theme border */
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.gallery img:hover {
    transform: translateY(-10px); /* Moves up slightly when hovered */
    border-color: #00aaff;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .gallery img {
        width: 100%;           /* On small phones, they take full width but stay square */
        max-width: 300px;
    }
}

.admission{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
.box{
background:#001433;
padding:20px;
border-radius:10px;
border:2px solid #00aaff;
}
.btn{
background:#ff7a00;
border:none;
padding:12px;
width:100%;
font-size:18px;
border-radius:8px;
cursor:pointer;
margin-top:10px;
}
.btn:hover{background:#00aaff}


input,textarea{
width:100%;
padding:10px;
margin:8px 0;
border:none;
border-radius:6px;
}


.login-box{
max-width:350px;
margin:auto;
background:#001433;
padding:20px;
border-radius:12px;
border:2px solid #ff7a00;
}


.contact{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
iframe{
width:100%;
height:220px;
border-radius:10px;
}


footer{
background:#000;
text-align:center;
padding:25px;
color:#ff7a00;
i{color:#00e5ff;font-size:25px;margin:10px}
i:hover{color:#ff1744}

}