/* General Body Styling */
    body {
      margin: 0;
      font-family: Poppins, sans-serif;
    }

    /* Header Styling */
    header {
      background: url('images/background.jpg') no-repeat center;
      background-size: cover;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      width: 100px;
    }

    .school-info {
      text-align: center;
      flex: 1;
    }

    .school-info h2 {
      color: red;
      margin: 5px 0;
    }

    .school-info h3 {
      color: black;
      margin: 5px 0;
    }

    nav {
      padding: 10px;
    }

    /* Navigation Links Styling */
    .nav-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav-links li {
      margin: 0 4px; /* Reduced the margin to reduce space between links */
    }

    .nav-links a {
      display: block;
      text-decoration: none;
      color: blue;
      font-weight: bold;
      font-size: 18px;
      padding: 8px 14px;
      border-radius: 6px;
      transition: background-color 0.3s;
    }

    .nav-links a:hover {
      background-color: #e6e6e6;
    }

    /* Video Styling */
    video {
      display: block;
      margin: 0px auto;
      width: 95%;
      max-width: 1000px;
      height: auto;
      border-radius: 10px; /* Optional for a nicer look */
    }

    /* Navigation Separator */
    .nav-links li {
      display: inline-flex;
      align-items: center;
    }

    .nav-links li:not(:last-child)::after {
      content: "|";
      color: #999;
    }

    /* Footer Styling */
    footer {
      background-color: #333;
      color: #fff;
      padding: 20px 0;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      border-top: 5px solid #f0f0f0;
    }

    footer h2 {
      margin: 0;
      font-size: 18px;
    }

    footer a {
      color: #fff;
      text-decoration: none;
      font-weight: normal;
      transition: color 0.3s ease;
    }

    footer a:hover {
      color: #ff6600; /* Bright color on hover */
    }

    /* Media Query for Mobile */
    @media (max-width: 768px) {
	  header {
        flex-direction: column;
        padding: 10px;
      }

      .logo {
        width: 70px;
        margin: 5px 0;
      }

      .school-info h2 {
        font-size: 18px;
        margin: 5px 0;
      }

      .school-info h3 {
        font-size: 14px;
        margin: 5px 0;
      }

      .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }

      .nav-links li:not(:last-child)::after {
        content: none !important;
      }

      .nav-links a {
        font-size: 15px;
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 6px 10px;
      }

      /* Hide the second logo on mobile */
      header img.logo:last-of-type {
        display: none;
      }
      
    }