/*!
 * Additional custom CSS Styles
 */


/* ------- VIDEO HERO  */

.video-background {
    z-index: -2;
    position: absolute; /* Background video moves up when scrolling*/
    /* position: fixed; /* Background video does not move with rest of content */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    /*background-color: black;*/
    background: radial-gradient(ellipse at center, rgb(255, 255, 255) 40%, rgb(41, 40, 40) 100%);
  
}

  .video-foreground,
  .video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .video-foreground {
      height: 300%;
      top: -100%;

        opacity: 0.4; /* Set the opacity of the overlay */
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .video-foreground {
      width: 300%;
      left: -100%;

        opacity: 0.4; /* Set the opacity of the overlay */
    }
  }
  
  
  /* ------- HERO VIDEO TEXT  */

.black-strip-header {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .black-strip-header-content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .black-strip-content {
    z-index: 2;
  }
  
  .black-strip-footer {
      background: rgba(0, 0, 0, 0.8);
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  
    
    .black-strip-footer-dynamic {
      background: rgba(0, 0, 0, 0.8);
      width: 100%;
      position: relative;
      left: 0;
    }
    
  .lead-block-higher {
    font-size: 1rem;
    font-weight: 300;
    background: #212529;
    /* background: rgba(0, 141, 132, 0.9); */
    color: rgb(255, 255, 255);
    margin: 0;
    position: absolute;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }



  .top-down-start  {
    background: #f8f8f8;
    /* background: rgba(0, 141, 132, 0.9); */
    color: rgb(12, 12, 12);
    margin: 0;
    position: relative;
    top: 100px;
    left: 50%;
    /*ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
  }

  .lead-block-lower {
    font-size: 1rem;
    font-weight: 300;
    background: #4c5053;
    /* background: rgba(0, 141, 132, 0.9); */
    color: rgb(255, 255, 255);
    margin: 20px;
    position: absolute;
    top: 75%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .hero-h
  {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.1;
    /* background: rgba(0, 0, 0, 0.8); */
    color: rgb(255, 255, 255);
    font-size: calc(1.375rem + 1.5vw);
  }

  .lighter-grey-box {
    background-color: #d3d3d3; /* Light grey color */
    padding: 20px; /* Add padding around the content */
    margin-top: 20px; /* Add some margin to separate it from the dark grey box */
    position: relative; /* Use relative positioning */
  }

  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }