/* Navigation*/
.nav-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  outline: 1px solid black;
  width:100vw;
}
.nav-item {
  display: flex;
  justify-content: space-evenly; /* Distributes items with equal space around them */
  align-items: center;
  width: 100vw;
}
.logo{
color: var(--Foundation-Red-Normal, #C20000);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: "Eagle Lake";
font-size: 16px;
font-style: normal;
font-weight: 100;
line-height: 120%; 
align-items: center;/* 19.2px */ 
} 

                    /* Navigation-Desktop*/
.web-nav-items{
  display: none;
}

                /* Main image text sections*/

.image-container {
  position: relative;
  width: 100vw;
  height: auto;
}

.responsive-1 {
  width: 100%;
}

/* Shared styles for header and message */
.header-1,
.community-message {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  text-align: center;
  font-family: "Oswald", "Poppins";
  font-feature-settings: 'liga' off, 'clig' off;
}

/* Specific styles */
.header-1 {
  font-size: 48px;
  font-weight: 400;
  line-height: 150%;
  top: -100%;
}

.community-message {
  top: 50%;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.cta-button-1{
  cursor:pointer;
  font-size:24px;
  font-weight: 400;
  line-height: 150%;
  color:#FFF;
  background-color:#C20000;
  border-radius: 16px;
}
.cta-button-1:hover {
  background-color: #a00000; /* Slightly darker red */
  color: #ffffff; /* Keeps text white */
  transform: scale(1.05); /* Slight zoom effect */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Boards Multiple image section */
.sixth-element {
  width:100vw;
  background-color: #000000; /* Optional: adjust to match your theme */
  display: flex;
  justify-content: center;
  height: auto;
}
.two-board-images {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center
}

.two-board-images img {
  width: 25%;
  height: 100%;
  object-fit: fill;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds depth */
}



/* The big man */
.seventh-element{
  position: relative;
  width: 100vw;
  height: auto;
}

.man-on-skateboard-image{
  width:100%;
  height:auto;
}





/*Footer Section*/
.footer-section {
  background-color: #000000; /* Black background */
  color: #f2f2f2;
  padding: 40px 20px;
  font-family: 'Oswald', 'Poppins';
  width: 100vw;
}
.email-button{
  border-radius: 8px;
background: var(--Foundation-Grey-Light, #FFFEFE);
display: flex;
width: 377px;
height: 48px;
padding: 16px 8px;
align-items: center;
gap: 10px;
flex-shrink: 0;
}


  @media only screen and (min-width: 800px) {
  .image-container img {
    height: auto;
    max-height: 930px;
  }
  .man-on-skateboard-image{
     height: auto;
    max-height: 650x;
  }
  .responsive-1,.header-1{
  font-size: 56px;
  line-height: normal;
  font-weight: 550;
  }
  .cta-button-1{
    font-size: 32px;
  }
  .nav-items{
    display:none
  }


  /* Web Nav show media query */
  .web-nav-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  outline: 1px solid black;
  width:100vw;
}
.web-nav-icons {
  display:  flex;
  gap: 8px;
  justify-content: flex-end;
  width: 100vw;
  padding-right: 32px;
  
}
.web-nav-item-logo{
color: var(--Foundation-Red-Normal, #C20000);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: "Eagle Lake";
font-size: 16px;
font-style: normal;
font-weight: 100;
line-height: 120%; 
align-items: center;/* 19.2px */ 
padding-right: auto;
}
}