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

html{
scroll-behavior:smooth;
}

body{
background:#f5f7fb;
color:#222;
}

/* Header */
.top-header{
background:#ffffff;
padding:15px 5%;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.logo-area{
display:flex;
align-items:center;
gap:15px;
}

.logo-circle{
width:60px;
height:60px;
border-radius:50%;
background:#0b3d91;
color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
font-weight:bold;
}

.logo-area h1{
font-size:26px;
color:#0b3d91;
}

.logo-area p{
font-size:13px;
color:#666;
}

.header-contact{
text-align:right;
font-size:14px;
}

/* Navigation */
.navbar{
background:#0b3d91;
position:sticky;
top:0;
z-index:1000;
}

.navbar ul{
list-style:none;
display:flex;
justify-content:center;
flex-wrap:wrap;
}

.navbar ul li a{
display:block;
padding:18px 20px;
color:white;
text-decoration:none;
font-weight:600;
}

.navbar ul li a:hover{
background:#f4b400;
color:black;
}

/* Hero */
.hero{
position:relative;
height:550px;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
display:none;
}

.slide.active{
display:block;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.55);
padding:30px;
border-radius:12px;
text-align:center;
color:white;
}

.hero-content h2{
font-size:50px;
margin-bottom:15px;
}

.hero-content p{
font-size:18px;
margin-bottom:20px;
}

.btn{
display:inline-block;
background:#f4b400;
color:black;
padding:14px 30px;
text-decoration:none;
font-weight:bold;
border-radius:6px;
}

/* Sections */
.section{
padding:80px 10%;
}
/* About Us Styling */
.about-us {
  background: linear-gradient(135deg, #f9f9f9, #e6f2ff);
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

.about-container {
  max-width: 800px;
  margin: auto;
}

.about-us h2 {
  font-size: 2.5rem;
  color: #003366;
  margin-bottom: 10px;
}

.about-us h3 {
  font-size: 1.5rem;
  color: #006699;
  margin-bottom: 20px;
}

.about-us p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

.about-us .highlight {
  color: #ff6600;
  font-weight: bold;
}

.about-us blockquote {
  font-style: italic;
  color: #555;
  margin-top: 25px;
  border-left: 4px solid #ff6600;
  padding-left: 15px;
}

.section h2{
text-align:center;
margin-bottom:25px;
color:#0b3d91;
font-size:36px;
}

.section p{
line-height:1.8;
}

.light{
background:white;
}

/* Cards */
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:30px;
}

.card{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

/* Admission Form */
#admission-form{
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}
/* Center wrapper container for the form */
.form-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: #ffffff;
  font-family: Arial, sans-serif;
}

.form-container h2 {
  text-align: center;
  color: #1e4ba1;
  margin-bottom: 25px;
}

/* Stacks each input beautifully */
.input-group {
  margin-bottom: 18px;
  width: 100%;
}

.input-group input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  outline: none;
}

.input-group input:focus {
  border-color: #1e4ba1;
  background-color: #fff;
}

/* Perfect stacked centering for the gender radio options */
.gender-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
  width: 90px; /* Forces identical starting alignment boundary */
  cursor: pointer;
}

/* Royal blue full-width submit button */
.submit-btn {
  width: 100%;
  padding: 15px;
  background-color: #1e4ba1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-btn:hover {
  background-color: #153573;
}

.gender-container-col {
    display: flex;
    flex-direction: column; /* Stack radio buttons vertically */
    align-items: center; /* Centers the entire block in the middle of the form */
    gap: 10px; /* Space between the Male and Female rows */
    margin: 15px 0;
}

.gender-option {
    display: flex;
    align-items: center; /* Keep circle and text on the same line */
    gap: 8px; /* Space between circle and text */
    width: 80px; /*Giving it a fixed width keeps the left edges perfectly aligned */
    cursor: pointer;
}


#admission-form input{
padding:14px;
border:1px solid #ccc;
border-radius:8px;
font-size:16px;
}

#admission-form button{
padding:15px;
border:none;
background:#0b3d91;
color:white;
font-size:16px;
border-radius:8px;
cursor:pointer;
}

/* Gallery */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.gallery img{
width:100%;
height:250px;
object-fit:cover;
border-radius:12px;
}

/* Footer */
footer{
background:#0b3d91;
color:white;
text-align:center;
padding:25px;
margin-top:40px;
}

/* Mobile */
@media(max-width:768px){

.top-header{
flex-direction:column;
text-align:center;
gap:15px;
}

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

.hero-content h2{
font-size:30px;
}

.navbar ul{
flex-direction:column;
}

.navbar ul li a{
text-align:center;
}

.section{
padding:60px 20px;
}

}