/*Google fonts import*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/*GENERAL styles at the top, more specific styles on bottom*/

/* Asterisk wildcard selector to override default styles added by the browser */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* General styles */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Generic project styles */
  color: #004aad;
  font-family: "Lato", sans-serif;

}

h1,
h2,
h3 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #004aad;
}

/*hides the meetup times heading instead of getting rid of the heading so that in google it can still be searchable, use class selector so can be used more than once*/
.hidden-heading {
  display: none;
}

/* Header */
header {
  background-color: #004aad;
  padding: 0 1rem;
  position: fixed;
  z-index: 99;
  width: 100%;
  box-shadow: 0 2px 3px #8b52fe; /*add box shadow */
  display: flex;
  justify-content: space-around;
  align-items: center;

flex-direction: column-reverse;
  
}

header a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ebfafe;
  margin-left: 60px;
}

#menu {
  font-size: 110%;
  letter-spacing: 4px;
  list-style-type: none;
}

#menu > li {
  margin-bottom: 1em;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}

.logo-container {
  display: flex;
  
  align-content: center;

  
  
width: 95%;
justify-content: space-between;
}
#logoimage {
  height: 50px;
  width: 50px;
  margin-right: 10px; /* Adds space between the image and heading */








}


.logoimageDiv {
 
  align-content: center;
}

#logo {
  font-size: 120%;
  line-height: 25px;
  margin: 15px 0 0 0;


  
}

/* Navbar styles with dropdown toggle */
nav {
  position: absolute;
  background-color: #004aad;
  width: 100%;
  left: 0;
  padding: 0 1rem;
  box-shadow: 0 2px 2px #ebfafe;
  display: none; /* set to none so that the Nav bar is hidden until users click to open*/
  top: 100%;


  
}

nav a {
  color: #ebfafe;
  text-decoration: none;
  font-size: 110%;
}
/* Nav toggle */
#nav-toggle:checked ~ nav {
  display: block;
}

#nav-toggle {
  display: none;
}

.nav-toggle-label {
  font-size: 2rem;
  color: #ebfafe;
  margin-right: 0px;
  margin-left: 10px;
  



  align-content:center;
}

/* Main content */
main {
  /* Enlarge main element to push footer down*/
  flex: 1 0 auto;
  /* Add margin at the top to prevent content from being covered by the header */
  margin-top: 47px;
  /* Enable flex properties for child elements */
  display: flex;
  flex-direction: column;
}

/* Shuttle image */
#shuttle {
  height: 500px;
  width: 100%;
  background: url("../images/shuttle\ on\ court.jpg") no-repeat center
    center/cover;
  position: relative;
}

#cover-text {
  /* Final rgba value sets the opacity so it is semi-transparent */
  background-color: rgba(135, 57, 236, 0.7);
  font-size: 120%;
  position: absolute;
  bottom: 40px;
  width: 70%;
  min-height: 180px;
  padding-top: 40px;
  padding-left: 20px;
}

#cover-text > h2,
#cover-text > h3 {
  color: #ffffff;
}

/* Reasons section */
#reasons {
  width: 90%;
  margin: 20px auto;
}

#reasons h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 280%;
}

#benefits-toplay > div,
#benefits-coaching > div {
  line-height: 20px;
  margin-bottom: 20px;
}

#benefits p {
  padding: 0 20px;
}

#benefits hr {
  border-top: 1px solid #3a3a3a;
  margin: 5px 0;
}

#circle-cover-bg {
  background: url("../images/playbadminton.jpg") no-repeat top center / cover;
  height: 90vw;
  width: 90vw;
  margin-bottom: 20px;
  /* Makes the square image into a circle */
  border-radius: 50%;
  max-width: 300px;
  max-height: 300px;
}

#benefits-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Meetup Times section */
#times {
  background: url("../images/shuttlenetcourtoverlay.jpg") no-repeat center/cover;
  /* Handles responsivity without the need for a media query */
  display: flex;
  flex-wrap: wrap;
}

#times div {
  color: #ebfafe;
  background-color: rgba(111, 12, 241, 0.6);
  padding: 15px;
  text-align: center;
  /* This will not wrap on screens of less than 400px wide.
    Each div will expand to fill the available space on its row */
  flex-basis: 200px;
  flex-grow: 1; /*allow box to expand*/
  /* Creates a grid of meetup time divs over the background image */
  border: 2px solid #ebfafe;
}

#times h3 {
  /* Override the heading colour set in general styles as the Overlay is dark */
  color: #ebfafe;
}

/* About Us General Reset and Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* Styling for About Section */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: auto;
}

.about-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.about-item img {
  width: 200px;
  height: auto;
  border-radius: 10px;
}

/* Styling for Description */
.description h3 {
  font-size: 2rem;
  color: #004aad;
}

.description p {
  font-size: 1rem;
  color: #004aad;
}

/* Contact Us Form */
#signup {
  background-image: url("../images/shuttlenet.jpg");
  background-size: cover;
  background-position: center;
  padding: 60px 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130vh;
  width: 100%;
}

#signup-form {
  color: #effefe;
  background-color: rgba(134, 20, 241, 0.8);
  padding: 20px 40px; /* Increase padding for a bigger form */
  width: 100%;
  max-width: 600px; /* Set a larger max-width for the form */
  border-radius: 5px; /* optional: adds a rounded corner to the form box */
  
}

#signup-form > h2 {
  color: #effefe;
  margin-bottom: 20px;
}

.text-input,
#message {
  width: 100%; /* Full width of the form */
  background: transparent;
  color: #effefe;
  margin-bottom: 20px;
  border: 1px solid #effefe;
  border-radius: 2px;
  padding: 10px; /* Increase padding inside the inputs */
  font-size: 1.1em; /* Slightly larger font size */
}

.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between radio buttons */
  margin-bottom: 20px;
}

.join-button {
  
  padding: 15px 20px;
  font-size: 1.1em; /* Larger button text */
  background-color: #004aad;
  color: #effefe;
  border: none;
  cursor: pointer;
}

/* #message {
  background: transparent;
  color: #effefe;
  border: 1px solid #effefe;
  border-radius: 2px;
  padding: 10px;
  margin-top: 10px;
  width: 100%;
  height: 150px;
} */
/*color for placeholder text*/
::placeholder {
  color:#ebfafe;
  opacity: 1; /*visible*/
}
/*for Edge browers*/
::-ms-input-placeholder {
  color:#ebfafe;
}

/*ABOUT Page*/
.about-item {
  flex-direction: column; /* Change to column on mobile */
}
/* CONTACT US Form */
#signup {
  background-position: center;
  position: relative;
}

#signup-form {
  max-width: 400px;
  position: absolute;
  left: 10%;
  /* top: 150; */
}

.text-input:hover {
  border-color: #004aad;
}

.join-button:hover {
  background-color: #fafafa;
  color: #004aad;
}

#location {
  padding-left: 15px;
  padding-right: 15px;
}

/* Style for all locations */
#locations {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between each location */
}

/* Style for each individual location */
.location {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Space between map and address */
}
/* Footer */

#social-networks {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none; /*this removes the bullet points in the list tag*/
}

#social-networks i {
  font-size: 160%;
  padding: 5%;
  color: #004aad;
}

/* Media query: large or landscape phones (576px and up) */
@media screen and (min-width: 576px) {
  #signup {
    min-height: 100vh;
  }
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {
  /* Header */
  nav {
    display: block; /*CHECK THIS*/
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-right: 1rem;
  
    align-content: center;

  }

  #menu {
    display: flex; /*allows menu to be displayed side by side*/
margin: auto;
/* text-align: baseline; */
 
  }

  #menu > li {
    padding-left: 1rem;
    align-self: center;

    margin: auto;
  }

  .nav-toggle-label {
    display: none; /*removes the X icon*/
  }

  #logo { 
    font-size: 200%;
    line-height: 75px;
    /* margin: 0 0.5rem; */

    /* border: 3px solid yellow; */
  }

  /* Main content */
  main {
    /* Push main content down to accommodate larger header */
    margin-top: 79px;
  }

  /* shuttle image  - text move to right side*/
  #cover-text {
    width: 300px;
    right: 50px;
  }
  /* Reasons section */
  #benefits-toplay,
  #benefits-coaching {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #benefits-toplay > div,
  #benefits-coaching > div {
    width: 75%;
  }

  #benefits-coaching > div {
    text-align: end;
    align-self: flex-end;
  }

  #locations {
    flex-direction: row;
    flex-wrap: wrap; /* Allows locations to wrap to next row if screen width is limited */
    gap: 20px;
  }
  .location {
    flex: 1 1 calc(33.33% - 20px); /* Each location takes up 1/3 of the row with some space */
    flex-direction: column; /* Keeps map and address stacked within each location */
  }

  .location iframe {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
  }

  .address {
    padding: 10px;
    text-align: left;
  }

  #signup {
    min-height: 110vh;
  }
}

@media (max-width: 768px) {
  .about-item {
    flex-direction: column;
    text-align: center;
  }

  .about-item img {
    width: 100%;
  }
  #signup-form {
    width: 90%; /* Reduce form width to fit smaller screens */
    padding: 20px; /* Reduce padding to avoid overflow */
  }

  .text-input,
  #message {
    font-size: 1em; /* Adjust font size for readability */
    padding: 8px; /* Reduce padding inside input boxes */
  }

  #signup h2 {
    font-size: 1.5rem; /* Make header size smaller */
  }
  .join-button {
    padding: 10px 20px; /* Smaller padding for mobile */
    font-size: 1em; /* Adjust font size */
  }
  #signup {
    min-height: 110vh;
  }
}

/* Large devices (laptops and desktops, 992px and up) */
@media screen and (min-width: 992px) {
  #menu a:hover {
    border-bottom: 1px solid #ebfafe;
  }
  #signup {
    min-height: 120vh;
  }
}

/*use flexbox properties to style Reason section for screeens 1200px and wider*/
@media screen and (min-width: 1200px) {
  /* Reasons section */
  #benefits {
    display: flex;
    flex-direction: row;
  }

  #benefits > div {
    flex: 1;
  }

  #benefits-image {
    order: 0;
  }

  #benefits-toplay {
    order: 1;
  }

  #benefits-toplay > div {
    align-self: flex-start;
  }

  #benefits-coaching > div {
    align-self: flex-end;
  }
  #signup {
    min-height: 90vh;
  }
}