body,
      html {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;

      }
   
  #nav-icon3 {
    width: 40px; /* Adjusted width */
    height: 30px; /* Adjusted height */
    position: relative;
    margin: 0;
    transform: rotate(0deg);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smoother animation */
    cursor: pointer;
}

#nav-icon3 span {
    display: block;
    position: absolute;
    height: 5px; /* Adjusted height */
    width: 80%; /* Adjusted width */
    background: white; /* Changed color to white */
    border-radius: 5px; /* Adjusted border radius */
    opacity: 1;
    left: 10%; /* Centered horizontally */
    transform: rotate(0deg);
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smoother animation */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added box shadow */
}

#nav-icon3 span:nth-child(1) {
    top: 4px; /* Adjusted top */
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
    top: 14px; /* Adjusted top */
}

#nav-icon3 span:nth-child(4) {
    top: 24px; /* Adjusted top */
}

#nav-icon3.open span:nth-child(1) {
    top: 14px; /* Adjusted top */
    width: 0%;
    left: 50%;
}

#nav-icon3.open span:nth-child(2) {
    transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
    transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
    top: 14px; /* Adjusted top */
    width: 0%;
    left: 50%;
}

      .bg--dark {
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);

      
      }

      .service-text{
        font-weight: 400;
      
      }
      .logo {
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
       
      }
     
    .video-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    @keyframes bounceInFromTop {
        0% {
          transform: translateY(-100%);
        }
        60% {
          transform: translateY(10%);
        }
        100% {
          transform: translateY(0);
        }
      }
      
      .nav-container {
        animation: bounceInFromTop 0.9s ease;
      }
      .header{
        height: 95vh;
      }

    
    #mobile-menu {
      background-color: #181818;
      transition: opacity 0.4s ease-in-out, max-height 0.6s ease-out, visibility 0.6s ease-out ;
      max-height: 0; /* Initially hidden by having zero height */
 
      visibility: hidden; /* Hide the menu */
      top: 0;
      padding-top: 80px; /* This pushes the content down */
      position: absolute; /* Ensure that position is absolute so the top property works */
      width: 100%; /* Set the width to cover the whole screen width */
      overflow: hidden; /* Prevent inner content from spilling over */
      z-index: 10; /* Bring to front */
      opacity: 0;
        
  }
  
  #mobile-menu.open {
      max-height: 60vh; /* Max height when expanded */
      visibility: visible; /* Make it visible */
      opacity: 0.95;
 
   
  }
      
      .nav-container {
        background-color: transparent;
        overflow: hidden;
        position: relative;
        z-index: 12; /* higher z-index to stay above overlay */
      }
      
      .hamburger-menu {
        position: relative;
        z-index: 11; 
      }
            
      @keyframes slideInFromRight {
        0% {
          transform: translateX(100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .title-slide-in {
        opacity: 0;
        animation: slideInFromRight 1s ease-out forwards;
      }

      .description-fade-in {
        opacity: 0;
        animation: fadeIn 1s ease-in 1.2s forwards; /* additional 1.2s delay */
      }

      .before-after-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
      }

      .before-after-container img {
        width: 100%;
      }

      .slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: url("public/img/Clean_Bike.webp") no-repeat;
        background-size: cover;
        cursor: ew-resize;
      }
   
.slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px; /* Center align the vertical bar with the scrubber */
   
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: ew-resize;
}

.scrubber {
    position: absolute;
    top: 50%;
    right: -16px; /* Half the width of the scrubber */
   
    transform: translateY(-50%);
    cursor: ew-resize;
}
.arrow-left {
    fill: #dc2626;
}

.arrow-right {
    fill: #5fb4e4;
}

      .before-text,
      .after-text {
        position: absolute;
        top: 10px;
        color: #fff;
        font-weight: bold;
        background: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
      }

      .before-text {
        right: 10px;
      }

      .after-text {
        left: 10px;
      }