/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

  }
  

  @font-face {
    font-family: "Nexa";
    src: url("/fonts/Nexa-Regular.woff2") format("woff2"),
         url("/fonts/Nexa-Regular.woff") format("woff"),
         url("/fonts/Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  body {
    font-family: nexa, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #333;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
  }
  
  /* Header / Nav styles moved to menu-bar.css */


/**/

  .content{
    display: flex;
    flex-direction: column;


}

  #navbar-placeholder {
    position: sticky;
    top: 0;
    z-index: 999; 
  }

  /* ** END FIX ** */

  /* Hero Section */
  .hero {
    background: #ffffff;
    text-align: center;
    padding: 6vw 15vw;
    position: relative;
    overflow: hidden;
    height: 50vw;
  }

  .hero h1 {
    font-size:10vw;
    text-transform: uppercase;
  }

  .stripes {
    height: 150px;
    
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 100px 100px ;
    padding: 5px;
  }
  .deg45 {
  background-color: transparent;
  background-image: linear-gradient(45deg, #D41700 25%, transparent 25%, transparent 50%, #D41700 50%, #D41700 75%, transparent 75%, transparent);
  }

  .overlay-image {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  opacity: 1;
  }

.hero-button {
  position: absolute;
  top: 90%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 10vw;
  height: 3vw;

  font-size: 1vw;
  font-family: Nexa, sans-serif;
  font-weight: light;
  color: #f0f0f0;
  text-transform: uppercase;

  background: linear-gradient(45deg, #D41700 50%, transparent 0);
  background-size: 200% 100%;
  background-position: right center;

  border: 3px solid #D41700;
  border-radius: 5px;
  cursor: pointer;

  transition: background-position 0.5s ease-in-out, font-weigth 0.5s ease-in-out;
  z-index: 2;
}

.hero-button:hover {
  background-position: left center;
  font-weight: bold;
  color: #fff;
}
/*End Hero*/


.shop-button {

  width: 270px;
  height: 50px;
  margin-top: 20px;

  font-size: 2vh;
  font-family: Nexa, sans-serif;
  font-weight: bold;
  color: #f0f0f0;
  text-transform: uppercase;

  background: linear-gradient(45deg, #D41700 50%, transparent 0);
  background-size: 200% 100%;
  background-position: right center;

  border: 3px solid #D41700;
  border-radius: 5px;
  cursor: pointer;

  transition: background-position 0.5s ease-in-out, font-weigth 0.5s ease-in-out;
  z-index: 2;
}

.shop-button:hover {
  background-position: left center;
  font-weight: bold;
  color: #fff;
}

  /* ----------- responsive design -----------*/

  /* Responsive styles specific to the Hero button */
@media (max-width: 900px) {



  .hero{
  padding-top: 15vw;
  height: 85vw;
}


  .overlay-image{

      padding-top: 10vw;
      width: 150vw;
      max-width: 250vw;
  }

  .hero-button{

  position: absolute;
  top: 80vw;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: 6vw;
  border-radius: 2px;
  font-size: 12pt;


  }

}

@media (max-width: 550px) {

  .overlay-image{
      width: 240vw;
      
      
  }
  
  .hero{
    height: 130vw;
    padding-top: 25vw;
  }

  .hero h1{
    font-size: 35pt;
  }

    .hero-button{

  width: 70vw;
  height: 10vw;
  font-size: 12pt;
  top: 120vw;

  }

}