/* Basic reset and variables */
:root{
  --bg:#F5F7FA;
  --ink:#0b1220;
  --muted:#546E7A;
  --accent:#4A7C9F;
  --max-width:1100px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust: 100%;
  padding: 0;
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:1.125rem}
img { max-width: 100%; height: auto; display: block; }
body { overflow-x: hidden; }

h1 {
  position: relative;
  display: inline-block; /* keeps the underline tight to the text */
}

h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px; /* adjust thickness */
  background-color: #FFC107; /* safety yellow */
  margin-top: 8px; /* space between text and line */
  border-radius: 2px; /* optional: makes the line edges softer */
}

/* **************************** */
/*        NAV / HEADER          */
/* **************************** */
.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav{display:flex;gap:1rem;align-items: center}
.nav a{color:var(--ink);text-decoration:none;padding:0.25rem 0.5rem}
.nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem; cursor:pointer;} /* cursor:pointer; new*/

/* Make sure anchor styles still apply */
.nav > a,
.nav .dropbtn {
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}

/* Remove default list styles for dropdown menus */
.dropdown-content,
.dropdown-content li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Position the dropdown menu as an overlay */
.dropdown {
  position: relative; /* establishes positioning context */
}

/* Hidden by default, absolutely positioned overlay */
.dropdown-content {
  display: none;                /* hidden until hover or open */
  position: absolute;
  /*top: calc(100% + 8px); */       /* sits below the About button with a small gap */
  top: 100%;        /* touches bottom edge of button */
  margin-top: 0;    /* removes extra space that causes hover loss */
  left: 0;
  min-width: 180px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(10, 20, 30, 0.12);
  z-index: 999;
  padding: 0.25rem 0;
}

/* Submenu items */
.dropdown-content a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-content a:hover {
  background: #f5f7fa;
  color: var(--accent);
}

/* Show on hover (desktop) */
.dropdown:hover .dropdown-content {
  display: block;
}

/* caret indicator on About */
.dropbtn::after {
  content: "▾";
  margin-left: 0.35rem;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

/* dropdown to stay open even when the mouse hovers over padding edge*/
.dropdown:hover .dropbtn {
  background-color: rgba(0,0,0,0.03); /* subtle feedback */
}

/* rotate caret on hover */
.dropdown:hover .dropbtn::after {
  transform: rotate(180deg);
}

/* Ensure all nav items share the same vertical alignment */
.nav a,
.dropbtn {
  line-height: 1;            /* keeps text baselines consistent */
  padding: 0.5rem 0.75rem;   /* make all buttons same height */
  display: flex;
  /* align-items: center;  */     /* vertically center text */
}

/* **************************** */
/*          HOME PAGE           */
/* **************************** */

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 80vh; /* 80% of the viewport height */
  background: url('../images/school-bus-stop-w-kids_upscaled.png') no-repeat center center/cover;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: left;
  overflow: hidden;
}

/* Semi-transparent overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45); /* Adjust opacity as needed */
  z-index: 1;
}

/* Text on top of overlay */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 40%; /*80%*/
  opacity: 0; /* start hidden */
  animation: fadeInUp 1.2s ease-out forwards;
  /* animation-delay: 0.3s; */
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: fadeInUp 1.2s ease-out forwards;
  /*animation-delay: 0.4s;*/
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1.2s ease-out forwards;
  /*animation-delay: 0.6s;*/
}

.hero-btn {
  display: inline-block;
  background-color: #1B3A5C;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s;
  animation: fadeInUp 1.2s ease-out forwards;
  /* animation-delay: 0.8s;*/
}

.hero-btn:hover {
  background-color: #071d35;
}

/* Logo */
.logo img {
  height: 50px;       /* adjust as needed */
  width: auto;
  vertical-align: middle;
}

/* Strengths Section */
.strengths-section {
  text-align: center;
  padding: 2rem 2rem; /*4rem 2rem*/
  background: #F5F7FA;
}

.strengths-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #1B3A5C;
}

.strengths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.strength-bubble {
  border-radius: 16px;
  padding: 2rem;
  color: #fff;
  font-size: 1rem;
  max-width: 300px;
  transition: transform 0.3s ease;
}

.strength-bubble:hover {
  transform: scale(1.05);
}

.strength1 { background: #1B3A5C; }
.strength2 { background: #4A7C9F; }
.strength3 { background: #1B3A5C; }
.strength4 { background: #4A7C9F; }

.strength-bubble h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

/* Purpose Section */
.purpose-section {
  position: relative;
  background: url("../images/purpose-image.jpg") center/cover no-repeat;
  color: #fff;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purpose-overlay {
  background: rgba(0, 0, 0, 0.5); /* Opaque dark overlay */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purpose-content {
  background: rgba(255, 255, 255, 0.85); /* White translucent box */
  color: #333;
  padding: 2rem 3rem;
  border-radius: 12px;
  max-width: 800px;
  text-align: left;
}

.purpose-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1B3A5C;
  text-align: center;
}

.purpose-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* footer */
.site-footer{padding:1.5rem 0;border-top:1px solid #eee;color:var(--muted);font-size:0.95rem}

/* utility */
.narrow{max-width:680px;margin:1.5rem auto}

/* responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .grid-3{grid-template-columns:1fr}
  .nav { display:none; position:absolute; top:64px; right:1rem; background:#fff; flex-direction:column; gap:0; padding:0.75rem; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.12); z-index:60; width:220px; }
  .nav-toggle{display:inline-block}
  .nav.show { display:flex; }
  .nav a, .nav .dropbtn { display:block; padding:0.6rem 0.8rem; color:var(--ink); }
  .dropdown-content { position:static; display:none; box-shadow:none; padding-left:0.6rem; background:transparent; }
  .dropdown.open .dropdown-content { display:block; }
  .header-inner{gap:1rem}
}

/* Fade-in animation keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* **************************** */
/*         ABOUT PAGE           */
/* **************************** */
/* About Page Styling */
.about-section {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  line-height: 1.7;
}

.about-section h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1B3A5C;
}

.about-section h2 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  color: #1B3A5C;
}

/* Styled Numbered List */
.styled-list {
  counter-reset: list-counter;
  list-style: none;
  padding-left: 0;
}

.styled-list li {
  position: relative;
  counter-increment: list-counter;
  background: #f7f9fb;
  margin: 1rem 0;
  padding: 1.5rem 1.5rem 1.5rem 3.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.styled-list li::before {
  content: counter(list-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: #1B3A5C;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.styled-list li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Slide-in Animation */
.styled-list li.slide-in {
  opacity: 1;
  transform: translateY(0);
}

/* Tech Hero Section */
.tech-hero {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 3rem auto;
  overflow: hidden;
  border-radius: 12px;
  display: block; /* Make the link act like a container */
  cursor: pointer; /* Show click behavior */
}

.tech-hero img {
  width: 100%;
  display: block;
  transition: opacity 0.4s ease;
  border-radius: 12px;
}

.tech-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 12px;
}

.tech-hero:hover img {
  opacity: 0.4;
}

.tech-hero:hover .tech-hero-overlay {
  opacity: 1;
}

.tech-hero-overlay h2 {
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .tech-hero-overlay {
    opacity: 1; /* Always visible on small screens */
  }
  .tech-hero img {
    opacity: 0.4;
  }
}