:root{
  --primary:#1f4e94;
  --secondary:#0f2f5c;
  --light:#f5f7fb;
  --text:#333;
  --spacing:1rem; /* tighter default spacing */
  --section-padding:40px; /* further reduced vertical padding */
}

html{
  scroll-behavior:smooth;
}

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

body{
font-family:'Inter',sans-serif;
color:var(--text);
line-height:1.7;
background:#f9fafb;
}

/* default link color for readability */
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{
font-family:'Poppins',sans-serif;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
padding:0 var(--spacing);
}

/* hide hamburger on larger screens */
.nav-toggle{
  display:none;
}

header{
position:sticky;
top:0;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
z-index:1000;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo{
color:var(--primary);
font-weight:700;
}

.nav ul{
display:flex;
gap:15px;
list-style:none;
}

.nav ul li{
  margin:0;
}

.nav a:hover{
color:var(--primary);
}

.hero{
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1');
background-size:cover;
background-position:center;
color:#fff;
text-align:center;
min-height:calc(100vh - 60px);
padding:120px 20px;
}

.nav a{
  text-decoration:none;
  color:#444;
  font-weight:500;
  transition:color 0.3s;
}
.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:center;
margin-top:1.5rem;
}

.hero h1{
font-size:40px;
margin-bottom:20px;
}

.btn{
padding:12px 25px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
margin:5px;
}

.btn-primary{
background:var(--primary);
color:#fff;
transition:background 0.3s,transform 0.3s;
}
.btn-primary:hover{background:var(--secondary);color:#fff;transform:translateY(-2px);}

.btn-outline{
border:2px solid #fff;
color:#fff;
transition:background 0.3s,transform 0.3s;
}
.btn-outline:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}

section{
padding:var(--section-padding) 0;
}

section h2{
text-align:center;
margin-bottom:20px;
color:var(--primary);
position:relative;
padding-bottom:6px;
}
section h2::after{
  content:'';
  display:block;
  width:60px;
  height:3px;
  background:var(--primary);
  margin:8px auto 0;
}

.list li{
  position:relative;
  transition:color 0.3s;
  padding-left:24px;
}
.list li i{margin-right:8px;}
.list li:hover{color:var(--primary);}
.list li::before{
  content:"\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--primary);
  font-size:0.9rem;
}

.grid{
display:grid;
gap:15px;
margin-top:20px;
align-items:stretch;
}

.grid-2{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.grid-3{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.card{
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
transition:transform 0.3s,box-shadow 0.3s;
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.card i{
  font-size:1.5rem;
  color:var(--primary);
  margin-bottom:8px;
}
.card p{margin:0;}

/* image styling */
.section-image{
  width:100%;
  max-width:600px;
  height:auto;
  margin:1.5rem auto 0; /* center horizontally */
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  display:block;
}
.card-image{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:1rem;
}
.card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:4px;
  background:var(--primary);
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 30px rgba(0,0,0,0.1);
}

/* fade-in animation */
.fade-in{
  opacity:0;
  transform:translateY(20px);
}
.fade-in.visible{
  animation:fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp{
  to{opacity:1;transform:translateY(0);}
}

.light-bg{
background:#f7f9fc; /* slightly off-white */
}

.list{
list-style:none; /* remove default bullets */
padding-left:20px;
line-height:1.9;
margin-bottom:1rem;
}

/* disable pseudo tick for lists that should not have it */
.list.no-tick li::before{
  content:none;
}
.highlight-box{
background:var(--secondary);
color:#fff;
padding:20px;
border-radius:10px;
margin-top:20px;
text-align:center;
}

/* contact section layout */
.contact-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:flex-start;
  margin-top:1rem;
}
.contact-info{
  flex:1 1 300px;
}
.map-container{
  flex:1 1 300px;
  min-width:300px;
}

/* admission timeline */
.timeline{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:30px;
}
.timeline-item{
background:#fff;
padding:15px 20px;
min-width:200px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
border-radius:5px;
flex:1 1 200px;
position:relative;
padding-left:30px;
}
.timeline-item::before{
  content:"\f0a4"; /* icon: angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--primary);
  font-size:0.8rem;
}

/* country pills */
.country-list{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:20px;
}
.country-list span{
background:var(--light);
padding:8px 14px;
border-radius:20px;
font-size:0.9rem;
color:var(--text);
display:inline-flex;
align-items:center;
gap:6px;
transition:background 0.3s,color 0.3s;
}
.country-list span img{
width:20px;
height:auto;
display:block;
border-radius:2px;
vertical-align:middle;
}.country-list span:hover{
background:var(--primary);
color:#fff;
}

footer{
background:#111;
color:#fff;
text-align:center;
padding:40px 0;
}

/* remove excessive space after sections */
section{margin-bottom:0;}

@media(max-width:768px){
  .hero h1{font-size:28px;}
  .nav ul{display:none;}
  .nav-toggle{
    display:block;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:var(--primary);
  }
  .nav.open ul{
    display:flex;
    flex-direction:column;
    gap:1rem;
    background:#fff;
    position:absolute;
    top:60px;
    left:0;
    width:100%;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
  }
  /* prevent open state from affecting layout on desktop */
  @media(min-width:769px){
    .nav.open ul{display:flex;position:static;flex-direction:row;box-shadow:none;padding:0;background:transparent;}
  }
}
/* additional mobile nav toggle animation */
@media(max-width:768px){
  .nav-toggle.active{transform:rotate(90deg);}
}