* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Arial, sans-serif; }
  body { background:#f7f7f7; color:#333; line-height:1.7; }

  a { text-decoration:none; color:inherit; }

  :root { --main-color:#228B22; --secondary-color:#f1fdf1; }

  /* Navbar */
  .navbar {
    background: rgba(0,0,0,0.7);
    position:fixed; top:0; width:100%; display:flex;
    justify-content:space-between; align-items:center; padding:15px 50px; z-index:100;
  }
  .navbar .logo img {
     height:60px;
     }
  .navbar .nav-links {
     list-style:none; 
     display:flex;
     }
  .navbar .nav-links li a { 
    color:white;
     margin:0 15px; 
     font-weight:600; 
     transition:0.3s; }
  .navbar .nav-links li a:hover, .navbar .nav-links li a.active { 
    color:var(--main-color);
   }


   /* ================= NAVBAR RESPONSIVE FIXED ================= */
/* Desktop view */
.nav-links {
  display: flex;
  list-style: none;
  gap: 10px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

/* Hamburger hidden on desktop */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
}

/* Small devices / mobile */
@media (max-width: 767px) {
  .nav-links {
    display: none; /* hide menu by default */
    flex-direction: column;
    position: absolute;
    top: 60px; /* just below the hamburger */
    right: 0;   /* align to left */
    width: 100%; /* full width */
    background: rgba(0,0,0,0.95);
    padding: 10px 0;
    z-index: 20;
  }

  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

   .nav-links li:hover {
    background: rgba(255, 3, 3, 0.1);
  }
  /* Show hamburger */
  .hamburger {
    display: block;
    font-size: 28px;
    cursor: pointer;
    color: white;
  }

  /* Show menu when active */
  .nav-links.active {
    display: flex;
  }
}


/* Navigation Bar */
.navbar {
  background: rgba(0, 0, 0, 0.5); /* slightly darker for readability */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* bring navbar above the carousel */
}

.navbar .logo img {
  height: 60px; 
  width: auto;
  object-fit: contain;
  border-radius: 3px;
}

/* Make the links visible */
.navbar .nav-links li a {
  color: white; /* ensures links are visible */
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

/* Optional: Add hover effect for links */
.navbar .nav-links li a:hover {
  color: #940000; 
}



.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #af0303; /* highlight color */
}

/* Hero Section */
  .hero {
    background: url('images/Kira secondary school/School Facade in Sunlight.png') center/cover no-repeat;
    height:350px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    text-align:center; 
    color:white;
    margin-top:80px;
    background-attachment: fixed;
  }
  .hero h1 { font-size:3rem; font-family:'Georgia', serif; letter-spacing:2px; }

   /* Content Sections */
  section { max-width:1200px; margin:50px auto; padding:0 20px; }

  
  /* About Section */
  .about-section { max-width:1200px; margin:50px auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  .about-section img { width:100%; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.15); }
  .about-section .about-text h2 { color:var(--main-color); margin-bottom:20px; font-family:'Georgia', serif; font-size:2rem; }
  .about-section .about-text p { margin-bottom:20px; font-size:1.1rem; line-height:1.8; }

  /* Goals / Mission / Vision */
  .cards-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:50px; }
  .card { background:white; padding:25px 20px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.1); text-align:center; transition:transform 0.3s, box-shadow 0.3s; }
  .card:hover { transform:translateY(-10px); box-shadow:0 15px 25px rgba(0,0,0,0.2); }
  .card i { font-size:2.5rem; color:var(--main-color); margin-bottom:15px; }
  .card h3 { margin-bottom:15px; color:var(--main-color); font-family:'Georgia', serif; }
  .card p { font-size:1rem; color:#555; }

  /* Footer */
  footer { background:#333; color:white; text-align:center; padding:25px 50px; margin-top:50px; }
  footer a { color:var(--main-color); margin:0 10px; }

  /* Responsive */
  @media(max-width:992px){ .about-section { grid-template-columns:1fr; gap:30px; } }
  @media(max-width:768px){ .navbar .nav-links{ display:none; } }
/* footer-section */
.footer {
  background: #000000;
  color: #fff;
  padding: 60px 20px 20px;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.footer h3, .footer h4 {
  margin-bottom: 15px;
  color: #228B22;
}

.footer p, .footer a {
  font-size: 1.0rem;
  color: #ccc;
  text-decoration: none;
}

.footer a:hover {
  color: #ff9800;
}

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

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

.footer-map iframe {
  margin-top: 10px;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #444;
  margin-top: 40px;
  padding-top: 15px;
  font-size: 0.9rem;
  color: #aaa;
}

/* Loader container */
#loader {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.6s ease, visibility 1.6s ease;
}

/* Loader content */
.loader-content {
  text-align: center;
  color: #fff;
}

.loader-logo {
  width: 100px;   /* adjust size */
  margin-bottom: 15px;
  animation: fadePulse 1.9s infinite ease-in-out;
}

/* Simple pulsing effect on logo */
@keyframes fadePulse {
  0% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.6; transform: scale(0.95); }
}

.loader-content h2 {
  margin: 15px 0 5px;
  font-size: 1.8rem;
  color: #228B22;
}

.loader-content p {
  font-size: 1rem;
  color: #ccc;
}

/* Spinner animation */
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #228B22;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 15px auto;
}

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

/* Hide loader */
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.about{
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.about-content{
  width: 900px;
 line-height: 28px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.about-content h2{
  font-size: 25px;
  color: #124e12;
}
.image{
  margin-left: 30px;
}


.about-section {
  display: flex;
  justify-content: center; /* horizontally center the content */
  align-items: flex-start; /* align top of image with top of text */
  gap: 60px;
  padding: 50px 20px;
  background-color: #f9f9f9;
  border-radius: 15px;
}
.welcome-image{
  width: 100%;
}
.welcome-image img {
  width: 200px;
  width: 100%;
  height: fit-content;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.about-text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; 
  gap: 10px; /* space between mission, vision, focus */
}

.mission::before{
  position: absolute;
  content: "";
  background: #d63200e0;
  left: -1px;
  top: -1px;
  width: 100px;
  height: 100px;
  border-radius: 22px;
}

.mission::after{
  position: absolute;
  content: "";
  background: #d63200e0;
  bottom: -10px;
  left: 55px;
  width: 100px;
  height: 10px;
  border-radius: 22px;
}
.vision{
  position: relative;
}
.vision::before{
  position: absolute;
  content: "";
  background: #228B22;
  bottom: -5px;
  top: -1px;
  left: -1px;
  width: 100px;
  height: 100px;
  border-radius: 22px;
}
.vision::after{
  position: absolute;
  content: "";
  background: #228B22;
  bottom: -10px;
  left: 55px;
  width: 100px;
  height: 10px;
  border-radius: 22px;
}
.focus{
  position: relative;
}
.focus::before{
  position: absolute;
  content: "";
  background: #d63200e0;
  bottom: -5px;
   top: -1px;
  left: -1px;
  width: 100px;
  height: 100px;
  border-radius: 22px;
}
.focus::after{
  position: absolute;
  content: "";
  background: #d63200e0;
  bottom: -5px;
  left: 55px;
  width: 100px;
  height: 10px;
  border-radius: 22px;
}

.about-text div {
  padding: 10px;
  border-radius: 10px;
  position: relative;
}

.icon-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  height: 280px;
  background-color: #ffffff;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.2);
  gap: 10px; /* space between icon and heading */
  overflow: hidden;
}


.icon-text::before{
content: "";
position: absolute;
background: orangered;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 120px;
top: 100px;
}
.m1::before{
content: "";
position: absolute;
background: #228B22;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 120px;
top: 80px;
}
.m2::before{
content: "";
position: absolute;
background: orangered;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 120px;
top: 60px;
}

@media screen and (max-width: 767px) {
  
.icon-text::before{
content: "";
position: absolute;
background: orangered;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 180px;
top: 120px;
}
.m1::before{
content: "";
position: absolute;
background: #228B22;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 180px;
top: 120px;
}
.m2::before{
content: "";
position: absolute;
background: orangered;
width: 100px;
height: 400px;
transform: rotate(45deg);
left: 180px;
top: 120px;
}
}

.icon-text i {
  font-size: 1.3em;
  color: forestgreen; /* set icon color */
}

.about-text h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333333;
}

.about-text p {
  line-height: 1.7;
  color: #333333;
  font-size: 1em;
  margin-top: 10px;
}
.mask-img{
  -webkit-mask-image: url(images/map.png);
  mask-image: url(images/map.png);
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}
/* responsiveness */
@media screen and (max-width: 767px) {
  .hero h1{
    width: 100%;
    font-size: 30px;
    justify-content: center;
  }
  .about{
    flex-direction: column;
  }
  .about-content{
    width: 100%;
    padding: 20px;
  }
  .image{
    margin-left: 0;
  }
  .about-text{
    flex-direction: column;
    gap: 40px;
  }
}