:root {
      --main-blue: #123A66;
      --accent: #0077cc;
      --light-bg: #f0f4f8;
      --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
      margin: 0;
      padding: 0;
    }
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--light-bg);
      color: #333;
    }
    

    header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: white;
      color: var(--main-blue);
      text-align: center;
      padding: 20px 0;
      font-size: 28px;
      font-weight: bold;
      z-index: 1000;
      box-shadow: var(--shadow);
    }

    nav {
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      position: fixed;
      top: 70px;
      width: 100%;
      z-index: 999;
      border-bottom: 1px solid #ddd;
    }

    .nav-links {
      display: flex;
      gap: 20px;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--main-blue);
      font-weight: 500;
    }

    .menu-toggle {
      display: none;
      font-size: 24px;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: white;
        padding: 10px 0;
      }

      .nav-links.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }

      .hero h1 {
        font-size: 32px;
      }
    }

    .hero {
  margin-top: 130px;
  min-height: 60vh;
  height: 100svh; /* Ensures full height on mobile with respect to safe areas */
  background-image: url('../assets/futureB.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;

  border-left: 3px solid #0957ff98;

  /* Fallback for iOS and Android where `background-attachment: fixed` has issues */
  background-attachment: scroll;

  /* Add media query fallback for small devices */
}

@media (max-width: 768px) {
  .hero {
    background-attachment: scroll; /* Prevent jumpy scroll on phones */
    background-position: center center;
    background-size: cover;
  }
}


    .hero h1 {
      font-size: 48px;
      background-color: rgba(0,0,0,0.5);
      padding: 20px;
      border-radius: 10px;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 40px 20px;
      gap: 30px;
    }

    .child {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow);
      flex: 1 1 300px;
      max-width: 450px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity: 0;
      transform: translateY(40px);
      border-left: 3px solid #0957ff98;
    }

    .child img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      border: 1px solid #ccc;
      margin-bottom: 15px;
    }

    .child:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }

    .child h2 {
      color: var(--main-blue);
      margin-bottom: 10px;
    }

    .child p {
      line-height: 1.6;
    }

    .child a {
      display: inline-block;
      margin-top: 10px;
      color: var(--accent);
      font-weight: bold;
    }
   
    .icons {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .icons i {
      margin: 0 12px;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .icons i:hover {
      color: var(--accent);
    }

    .child.animate {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.6s ease-in-out;
    }

 iframe {
      width: 100%;
      height: 300px;
      border: 0;
      margin-top: 30px;
      border-radius: 10px;
    }

    footer {
  background-color: #123A66; /* main-blue */
  color: white;
  text-align: center;
  padding: 30px 10px 0;
  margin-top: 60px;
}

.social-media-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}

.social-media-icons i {
  font-size: 22px;
  color: white;
  transition: color 0.3s ease;
  cursor: pointer;
}

.social-media-icons i:hover {
  color: #f9c922; /* hover effect */
}

.footer-nav {
  margin: 20px 0 10px;
}

.footer-nav a {
  color: white;
  text-decoration: none;
  margin: 0 12px;
  font-size: 15px;
}

.footer-nav a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.5;
}

footer iframe {
  width: 100%;
  height: 250px;
  border: none;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}