nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white; /* Background color for the nav */
}

/* Flex container for icon and hamburger */
.nav-content {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Small gap between icon and hamburger */
}

/* Icon styles */
.mobile-icon {
  display: none; /* Hidden by default */
  width: 3rem !important;
  height: auto;
}
.hamburger {
  display: none; /* Hidden by default */
  cursor: pointer;
  font-size: 2rem; /* Size of the hamburger icon */
  padding: 0.5rem;
}

.burgerimg {
  width: 1rem;   
}    
.navbar {
  list-style-type: none;
  display: flex;
  justify-content: space-around; /* Spread icons evenly across the screen */
  padding: 0.5rem 0; /* Reduced padding for more space */
  margin: 0;
      position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 4rem; /* Position it at the top of the viewport */
  z-index: 1000; /* Ensures it stays above other elements */
  height: 20%;
}

.navbar {
  list-style-type: none;
  display: flex; /* Display items in a row */
  justify-content: space-around;
  padding: 0.5rem 0;
  margin: 0;
}


.navbar li {
  flex: 1; /* Make each list item take up equal space */
  display: flex;
  justify-content: center; /* Center each icon within its space */
}

.navbar a img {
  width: 100%;
  max-width: 300px; /* Increase max-width for larger icons */
  height: auto;
  transition: transform 0.2s;

}

.navbar a:hover img {
  transform: scale(1.03);
}

footer {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    position: relative; /* Position relative for any absolutely positioned elements */
    bottom: 0; /* Position at the bottom */
    width: 100%; /* Full width */
    margin-top: auto; /* Push the footer down when content is short */
}

/* Styles for the footer logo */
.desktop-logo {
    max-width: 50px; /* Maximum width of the logo */
    width: 100%; /* Make the logo responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves like a block element */
    margin: 0 auto; /* Center the logo horizontally */
}


/* Show the footer when scrolled to the bottom */
.footer.show {
    display: block; /* Show the footer */
}


body {

  font-family: Helvetica, sans-serif; /* Add default font for readability */
}

  .desktoptext {
      display: block;
    }
  .mobiletext {
      display: none;
    }
#background-video {
  position: fixed; /* Fix the video in place */
  top: 0;
  left: 0;
  width: 100%; /* Cover the full width */
  height: 100%; /* Cover the full height */
  object-fit: cover; /* Maintain aspect ratio and cover area */
  z-index: -1; /* Send the video behind other content */
}

/* Page Content Styles */
.page-content {
  
  position: relative; /* Positioning context for absolute elements */
  padding: 2rem; /* Space around the content */
  color: gray; /* Text color for visibility against background */
  text-align: justify; /* Align text to the left */
}

.imgheader {
    max-width: 300px;
}

.imgheaderbig {
    max-width: 500px;
}
.imgheadersmall {
    max-width: 100px;
}

h1 {
  font-size: 2.5rem; /* Header size */
  margin-bottom: 1rem; /* Space below the header */
}

p {
    color: gray;
}

.bio-container {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between elements */
  align-items: flex-start; /* Align items at the start */
  margin-top: 2rem; /* Space above the content */
}
.text-box {
  flex: 1; /* Take up available space */
  margin-right: 18rem; /* Space between text box and video */
  padding: 1rem; /* Padding inside the text box */
  text-align: justify; /* Align text to the left */
  margin-right: 5rem;
  margin-left: 15rem;
  max-width: 25rem;

}


.text-box-right {
  flex: 1; /* Take up available space */
  margin-left: 18rem; /* Space between text box and video */
  padding: 1rem; /* Padding inside the text box */
  text-align: justify; /* Align text to the left */
  margin-left: 5rem;
  margin-right: 15rem;
  max-width: 25rem;
}

.commercial-video {
  max-height: 35rem;
 /* Maintain aspect ratio */
  border: none; /* Remove any borders around the video */
}

#bioimg {
 max-height: 500px;   
    
}



.bigimg {
 max-width: 450px;   
 padding: 0px;
    
}

.medimg {
 max-width: 450px;   
 padding: 0px;
    flex: 1;
    
}

.sidebysideimg {
 max-width: 300px;   
 padding:3px;
    
}
.commercial-container {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the video and arrows */
  align-items: center; /* Center items vertically */
  margin-top: 2rem; /* Space above the content */
  padding-bottom: 14%;
  position: relative; /* Positioning context for absolute elements */
}

.video-box {
  position: relative; /* Positioning context for arrows inside the video box */
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center;
  max-width: 600px; /* Limit video size */
}


.arrow-img-box {
    
      position: relative; /* Positioning context for arrows inside the video box */
  flex: 1; /* Take up available space */
  display: flex;
  margin-left: 18rem; /* Space between text box and video */
  padding: 1rem; /* Padding inside the text box */
  margin-left: 5rem;
  margin-right: 15rem;
  max-width: 25rem;
}

.commercial-video {
  width: 100%; /* Make video fill container */
  max-height: 35rem;
  border: none; /* Remove any borders around the video */
}

.commercial-video-smaller {
  max-height: 35rem;
  border: none; /* Remove any borders around the video */
}
.arrow {
  position: absolute;
  width: 0.5rem; /* Set arrow width */
  height: auto;
  cursor: pointer;
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
    padding: 1rem;
    margin: -1rem;
}

.arrow-left {
  left: -5%; /* Move closer to the left edge of the video */
}

.arrow-right {
  right: -5%; /* Move closer to the right edge of the video */
}

.arrow-left-simone {
  left: -5%; /* Move closer to the left edge of the video */
}

.arrow-right-simone {
  right: -5%; /* Move closer to the right edge of the video */
}


@media (max-width: 1000px) {
    

  .text-box,
  .video-box,
  .text-box-right,
  .arrow-img-box-left {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    padding-top: 0px;
    text-align: left!important;
    font-size: 0.8rem;
  }

  .commercial-container,
  .bio-container {
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    margin-top: 0px;
  }
    
  .page-content {
     padding-top: 0px; 
      text-align: left;
    }

  /* Make images and videos full-width */
  img, video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0;
    padding: 0;
  }

    .sidebysideimg {
    max-width: 45%!important;   
    padding:3px!important;
        
    }

  .imgheadersmall {
      max-width: 20% !important; 
    }
    
  /* Hide arrow components on mobile */
  .arrow {
    display: none;
  }
    
  .desktoptext {
      display: none;
    }
  .mobiletext {
      display: block;
    }
    
       .desktop-logo {
        display: none;
    }
}


a {

    margin: 0;
    padding: 0;
}
/* Mobile Styles */
/* Mobile Styles */
@media (max-width: 1000px) {
    

  .mobile-icon {
    display: inline-block; /* Show icon */
  }

  .navbar {
    display: none; /* Hide navbar by default on mobile */
  }
  .nav-content {
    width: 100%;
    justify-content: center;
  }

    
  .hamburger {
    display: block; /* Show hamburger on mobile */
    margin: 1rem; /* Adjust margin as needed */
    padding: 0;

  }

  .navbar {
    display: none; /* Hide the navbar by default */
    flex-direction: column; /* Stack items vertically */
    width: 100%; /* Full width */
    background-color: white; /* Background for the menu */
    position: absolute; /* Absolute positioning */
    top: 4rem; /* Adjust this to position it below the hamburger */
    left: 0;
    transition: max-height 0.3s ease; /* Smooth transition */
    max-height: 0; /* Start collapsed */
    z-index: 999; /* Ensure it appears above other content */
    padding: 0px;

  }
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem; /* Adjust padding if needed */
  }


  .navbar.active {
    display: block; /* Show navbar when active */
      padding:0px;
      margin:0px;
  }

  .navbar li {
    width: 40%; /* Full width for list items */
    padding-left: 5%;
    padding-right: 55%;
    background-color: white;
    text-align: center; /* Center align text */
  }

  .navbar a img {
    width: 80%; /* Adjust icon size for mobile */
    height: auto;
  }
    
    .burgerimg {
  width: 1rem !important;   
}  
    
    
    .burgerimg:hover  {
  transform: scale(1.13);
}
}