body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif; /* You can choose your preferred font */
    font-size: 18px; /* Adjust as needed for readability */
    color: #B0B0B0; /* Light grey color */
  }
  
  section {
    min-height: 100vh;
    background-size: cover;
    background-attachment: fixed;
  }
  
  #about, #contact {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
  }
  
  @media only screen and (max-width: 768px) {
    section {
      background-attachment: scroll;
    }
  }

.header-image {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1; /* To ensure it stays behind the content */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.header-image img {
    width: 100%; /* or your desired width */
    max-width: 600px; /* or your desired max-width */
    height: auto;
}

  header {
    background: #333; /* or any color you prefer */
    color: white;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
  }
  
  header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  
  header nav ul li {
    margin: 0 15px;
  }
  
  header nav ul li a {
    color: white;
    text-decoration: none;
  }


  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  
  footer p, footer a, .social-icons {
    margin: 0 10px; /* Adds some spacing around each element */
  }
  
  .social-icons img {
    width: 40px; /* or any specific size */
    height: 40px; /* maintain aspect ratio */
  }
  
  .social-icons {
    display: flex;
    align-items: center;
  }
  
  .social-icons a {
    margin: 0 5px; /* Adjusts spacing between social icons */
  }
  
  .welcome-text {
    font-size: 80px;
    animation: fadeTextColor s ease forwards;
    color: #ff0000;
  }
  
  @keyframes fadeTextColor {
    0% {
      color: #FFF; /* Start with white */
    }
    100% {
      color: #000; /* End with black */
    }
  }

  .welcome-text1 {
    color: #ffffff; /* Light grey color */
    font-size: 80px; /* Slightly larger for emphasis */
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    transition: transform 1s ease-out;
  }

  .content-container {
    opacity: 0;
    transform: translateY(50%);
    transition: opacity 0.5s, transform 0.5s;
    text-align: center;
    position: relative;
    margin-bottom: 20px; /* Space between content containers */
    color: #FFF; /* Brighter color, such as white */
}
  
.content-container {
    margin-bottom: 20px; /* Adjust the value as needed */
}

.content-container:first-child {
    margin-bottom: 20px; /* Adjust the value as needed */
}
  .scroll-indicator {
    position: absolute;
    bottom: 5px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    40% {
      transform: translateX(-50%) translateY(-20px);
    }
    60% {
      transform: translateX(-50%) translateY(-10px);
    }
  }

  /* Centering the content container */
  section {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about-container {
    display: flex;
    flex-direction: column;
}

.image-description-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.about-image {
    width: 200px; /* Adjust as needed */
    height: auto;
    cursor: pointer; /* To indicate the image is clickable */
}

.image-description {
    margin-left: 20px; /* Space between image and text */
    text-align: right;
    flex-grow: 1;
}

.about-header {
    color: white; /* Or any color you prefer */
    text-align: center; /* Center the header */
    margin-bottom: 20px; /* Spacing between header and content */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.terms-container {
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* Adjust the width as needed */
}

.terms-container h1, .terms-container h2 {
  text-align: center;
}

.equipment-container {
  display: flex;
  flex-direction: column;
}

.equipment-header {
  color: white; /* Or any color you prefer */
  text-align: center; /* Center the header */
  margin-bottom: 20px; /* Spacing between header and content */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.item-description-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Space between items */
}

.equipment-image {
  width: [desired width]; /* Set width */
  height: [desired height]; /* Set height */
  margin-right: 10px; /* Space between image and text */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.welcome-text {
  animation: fadeIn ease 3s; /* Adjust the time as needed */
  animation-fill-mode: forwards;
}