/* CSS for centering the navbar horizontally and displaying at the top */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('images/banner1.avif'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* Ensure the background covers the entire viewport height */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to the top */
    align-items: center; /* Center items horizontally */
  }

  .navbar {
    display: flex;
    justify-content: center; /* Center aligns flex items horizontally */
    background-color: #002147; /* Navy blue background color for the navbar */
    width: 80%; /* Set the width of the navbar */
    padding: 10px 0; /* Padding for top and bottom */
    margin-top: 0.5%;
    box-sizing: border-box; /* Ensure padding is included in width */
    border-radius: 21px;
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    margin-bottom: 20px; /* Add gap below the navbar */
  }

  .navbar a {
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 1.5em; /* 14px/16=0.875em */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

  .navbar a:hover {
    background-color: #f1f3f4; /* Light White background on hover */
    color: black;
    border-radius: 11px;
    transform: scale(1.1); /* Slightly increase the size of the link */
  }

  h1 {
    color: #330000; /* Coral color for the heading */
    font-size: 2.5em;
    margin: 1%;
  }

  #body_content p {
    color: #330000; /* Coral color for the p */
    font-size: 1.25em; /* Increase the font size of paragraphs */
    padding: auto;
  }

  #body_content {
    margin: 2%;
    text-align: left; /* left align the text for better presentation */
  }

  .social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #002147; /* Match the navbar color */
    width: 100%; /* Full width */
    box-sizing: border-box;
    border-radius: 21px;
    margin-top: auto; /* Push to the bottom */
    margin-bottom: 0.5%;
  }

  .social-media a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
    margin: 0 10px;
  }

  .social-media a:hover {
    color: #00aaff; /* Light blue color on hover */
    transform: scale(1.2); /* Slightly increase the size of the link */
  }

form {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for better readability */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px; /* Restrict the width of the form */
    width: 90%; /* Adjusted for responsiveness */
    margin-top: 20px; /* Spacing from the heading */
}

form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #002147; /* Match the color theme */
}

form input[type="text"],
form input[type="password"] {
    width: calc(100% - 20px); /* Adjusted for padding */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

form input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #002147; /* Match the navbar color */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

form input[type="submit"]:hover {
    background-color: #00aaff; /* Light blue color on hover */
    transform: scale(1.05); /* Slightly increase the size on hover */
}


  /* Media queries for responsiveness */
  @media (max-width: 1024px) {
    .navbar a, .social-media a {
      font-size: 1.2em; /* Slightly smaller font on tablets */
      padding: 12px 18px;
    }
    h1 {
      font-size: 2em;
    }
    #body_content p {
      font-size: 1.1em;
    }
  }

  @media (max-width: 768px) {
    .navbar {
      width: 90%; /* Wider navbar on smaller screens */
    }
    .navbar a, .social-media a {
      font-size: 1em; /* Even smaller font on large mobiles */
      padding: 10px 15px;
    }
    h1 {
      font-size: 1.8em;
    }
    #body_content p {
      font-size: 1em;
    }
  }

  @media (max-width: 480px) {
    .navbar {
      width: 100%; /* Full width navbar on small screens */
    }
    .navbar a, .social-media a {
      font-size: 0.9em; /* Smaller font on small mobiles */
      padding: 8px 10px;
    }
    h1 {
      font-size: 1.5em;
    }
    #body_content p {
      font-size: 0.9em;
    }
  }