html, body {
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(18, 18, 18);
  scroll-behavior: smooth;
}

#hero_page {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}


#hero_page_image {

  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 2vw;

  width: 40vw;
  height: 70vh;
  background-image: url('images/westlake_boys_football.jpg'); /* Replace with your background image */
  background-size: cover;
  background-position: 50% 0%;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); /* Creates the parallelogram shape */
  filter: brightness(75%);
}

#hero_page_title{

  position: relative;
  left: -20vw

}

#hero_page_text_container{

  position: absolute;
  top: 45%;
  left: 80%; /* Make sure it's centered horizontally */
  transform: translate(-50%, -50%); /* Move it back by 50% of its width and height */
  width: 380px;
  height: 20vh;

  text-align: left;

  color: white;

}

#hero_page_small_container{

  margin-left: -80px

}

#continue_button{

  position: relative;

  top: 50%;
  margin-left: -50px;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  transform: translateY(-50%);

  font-family: "RobotoCondensed Light";
  font-size: 18px;
  border: solid 2px white;
  border-radius: 3px;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

#continue_button:hover{

  transform: scale(1.1) translateY(-45%);

}

#hero_page_text_container2{

  position: absolute;
  top: 40%;
  left: 50%; /* Make sure it's centered horizontally */
  transform: translate(-50%, -50%); /* Move it back by 50% of its width and height */
  width: 380px;
  height: 20vh;

  text-align: center;

  color: white;

  display: none;

}

#continue_button2{
  position: relative;

  margin-top: 40px;
  left: 50%;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  transform: translateX(-50%);

  font-family: "RobotoCondensed Light";
  font-size: 18px;
  border: solid 2px white;
  border-radius: 3px;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

#continue_button2:hover{

  transform: scale(1.1) translateX(-45%);

}

@media (max-width: 1100px) {

  #hero_page_image{

    left: 0;
    width: 100%;
    height: 100vh;
    clip-path: none;

  }

  #hero_page_text_container{

    display: none;

  }
  
  #hero_page_text_container2{

    display: block;

  }

  .text2{

    font-family: "RobotoCondensed MediumItalic" !important;
    color: white !important;
    font-size: 19px !important;
  
  }
  

}

@media (max-width: 410px) {

  #hero_page_text_container2 .text1{

    width: 100vw;

  }

}


.team-member{

  height: 500px;
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  text-align: center; /* Ensures text stays centered */

  background-image: url("images/icons/team_member_empty.jpg");
  background-position: center;
  background-size: cover;

  transition: 0.5s ease-in-out;

}

.team-member:hover > p{

  visibility: visible;
  opacity: 1;
  

}

.team-member:hover{

  filter: brightness(50%);  

}

.team-member p{

  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease-in-out;
  cursor: default;

}




.header1{

  font-family: "Bebas Neue";
  font-size: 70px;
  color: white;

}

.header2{

  font-family: "Bebas Neue";
  font-size: 40px;
  color: white;

}

.text1{

  font-family: "RobotoCondensed Medium" !important;
  color: white !important;
  font-size: 18px !important;

}

.text2{

  font-family: "RobotoCondensed MediumItalic" !important;
  color: white !important;
  font-size: 23px !important;

}


/*--- nav bar ---*/


@media(max-width:850px) {

  @keyframes slideDown {
    from {
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      max-height: 500px; /* Adjust as needed */
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .navbar-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
  }
  
  
  .navbar-collapse.show {
    max-height: 500px;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
  }
  

}

@keyframes nav_bar_background {
  
  0% {opacity: 0;}

  100% { opacity: 1; }

}


.navbar{

  width: 100%;
  position: fixed;
  z-index: 12;

  background-color: rgb(29, 29, 29);

}

.navbar-nav .nav-link{
  margin-left:30px;
  margin-right:30px;
  color: var(--white);
  text-align: center;
}

.active{

  color: var(--yellow) !important

}

.navbar-toggler-icon{

  filter: invert(100%);
  transition: 0.2s ease-in-out;

}

.navbar .header{

  font-size: 5vh !important;
  font-family: "Bebas Neue";
  color: white !important;

}

.nav-item{

  color: white;
  font-family: "RobotoCondensed MediumItalic";
  transition: 0.25s ease-in-out;
  cursor: pointer
  
}

.nav-item:hover{

  color: rgb(128, 128, 128);
  
}



/*----- imported fonts -----*/
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/Bebas_Neue/BebasNeue-Regular.ttf");
}

@font-face {
  font-family: "RobotoCondensed Medium";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-Medium.ttf");
}
@font-face {
  font-family: "RobotoCondensed Light";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf");
}

@font-face {
  font-family: "RobotoCondensed MediumItalic";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-MediumItalic.ttf");
}