body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Arial, sans-serif; /* Use the Roboto font */
    margin-top: 60px;

  }
  
  header {
    background-color: #2979ff; /* Cool blue color */
    color: #fff;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* Add a higher z-index to keep the navigation bar on top */
  }
  
  nav {
    display: flex;
    justify-content: center;
    
  }
  
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  nav ul li {
    display: inline;
    margin-right: 60px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
  }

  nav ul li a:hover {
    background-color: #ff4081; /* Contrasting color for hover effect */
    border-radius: 10px; /* Rounded edges on hover */
  }
  
  main {
    padding: 20px;
    background-color: black;
  }
  
  section {
    margin-bottom: 30px;
  }
  
  h1, h2, p {
    color: #fff;
  }


  .page-container {
    height: 100%;
  }

/* Styles for Home Section */


.fullscreen-section {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.welcome-section {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .logo {
    max-width: 200px;
    margin-top: 20px;
  }
  
  .club-picture {
    max-width: 400px;
    margin-top: 20px;
  }



  /* Styles for Slideshow */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.slide {
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
}

/* Custom left and right arrows */
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

// about us section

#about {
  height: 100vh;
  color: #fff; /* Set the text color to white */
  padding: 0 20px; /* Add padding to create space on both sides */
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.about-content {
  text-align: center;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  width: 90%;
}

#about a {
  color: #fff; /* Set the link color to white */
}

.membership-table {
  color: #fff; /* Set the text color to white */
  border-collapse: collapse;
  width: 100%;
}

.membership-table th,
.membership-table td {
  padding: 8px;
  border: 2px solid #fff; /* Set the border color to white and thickness to 2px */
}

.membership-table th {
  background-color: #000; /* Set the background color to black */
}

.membership-table th {
  text-align: left;
}


.about-paragraph {
  margin-bottom: 20px;
}

// contact us form

#contact {
  height: 100vh;
  padding: 0 20px; /* Add padding to create space on both sides */
}

.contact-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.contact-content {
  max-width: 800px;
  margin: 0 auto;
  width: 90%;
  align-items: center;


}

.form-group {
  margin-bottom: 20px;
  align-items: center;

}

label {
  display: block;
  font-weight: bold;
  color: #fff; /* Set the label text color to white */
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  resize: vertical; /* Allow vertical resizing */
  border: 1px solid #ccc; /* Add a border */
  border-radius: 10px; /* Add border radius */
}

textarea:focus {
  outline: none; /* Remove default focus outline */
  border-color: #666; /* Change border color on focus */
  box-shadow: 0 0 5px rgba(102, 102, 102, 0.5); /* Add a subtle box shadow on focus */
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 10px; /* Set the border radius for textboxes */
}
button:hover {
  background-color: #ff4081; /* Contrasting color for hover effect */
  border-radius: 10px; /* Rounded edges on hover */
}


  /* Media Query for Mobile Responsive */
  @media (max-width: 600px) {
    nav {
      justify-content: center;
    }

    nav ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    nav ul li {
      margin: 10px 0; /* Add vertical spacing between navigation items */
    }
    
    /* nav ul li {
      margin-right: 10px; 
      justify-content: center;
    } */


    .logo {
      max-width: 150px;
    }
  
    .club-picture {
      max-width: 300px;
    }

    .about-section {
      height: auto;
    }
  
    .about-content {
      width: 80%;
    }

    .membership-table {
      font-size: 14px;
    }
  
    .membership-table th,
    .membership-table td {
      padding: 8px;
    }

    // contact us form

    #contact .contact-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }