* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
    scroll-padding-top: 133px; /* Adjust this value based on the height of your navbar */
  }
  
  body {
    background-color: black;
  }
  
  main {
    display: flex;
    flex-direction: column;
    gap: 130px;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    padding: 40px 50px;
    position: fixed; /* Fixes the header at the top */
    top: 0; /* Aligns it to the top */
    width: 100%; /* Makes the header full width */
    background-color: #000000; /* Set a background color */
    z-index: 1000; /* Ensures the header is above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow */
  }
  
  nav ul li a {
    font-family: roboto;
    font-size: 18px;
    font-weight: 700;
  }
  
  nav ul li {
    position: relative; /* Ensures the orange bar is positioned relative to each nav item */
  }
  
  .header-left ul {
    list-style-type: none;
    display: flex;
    gap: 50px;
  }
  
  .header-left {
    display: flex;
    color: white;
    gap: 50px;
    align-items: center;
  }
  
  .header-left a {
    color: white;
    text-decoration: none;
  }
  
  .header-left a {
    cursor: pointer;
  }
  
  .social {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .social a {
    cursor: pointer;

  }
  
  .social a:hover {
    filter: brightness(0) invert(0.5) sepia(1) saturate(5000%) hue-rotate(-20deg); /* Change white to orange on hover */
  }
  
  .nav a.active {
    background-color: orange;
  }
  
  /* Hamburger Menu Styles */
  .hamburger {
    display: none; /* Hidden by default */
    flex-direction: column; /* Stack lines vertically */
    cursor: pointer; /* Change cursor to pointer */
  }
  
  .line {
    height: 3px; /* Thickness of each line */
    width: 25px; /* Length of each line */
    background-color: white; /* Color of the lines */
    margin: 4px 0; /* Space between lines */
    transition: 0.3s; /* Smooth transition for hover effect */
  }
  
  /* Responsive styles */
  @media (max-width: 768px) {
    header {
      padding: 20px; /* Reduced padding for mobile */
      flex-direction: column; /* Stack items vertically */
      align-items: center; 
      position: absolute;
    }
  
    .header-left {
      justify-content: space-between;
      width: 100%; /* Make the header full width */
    }
  
    .header-left ul {
      flex-direction: column; /* Stack navigation links vertically */
      gap: 10px; /* Smaller gap for mobile */
      width: 100%; /* Full width for nav links */
      display: none; /* Hide menu by default */
    }
  
    .header-left.active ul {
      display: flex; /* Show menu when active */
    }
  
    .social {
      justify-content: space-between; /* Adjust social icons to fit */
      width: 100%; /* Make social icons full width */
    }
  
    .img-social {
      width: 24px; /* Adjust icon size for mobile */
      height: 24px;
    }
    .linkedin-img {
      width: 27px; /* Adjust icon size for mobile */
      height: 27px; /* Adjust icon size for mobile */
    }
  
    nav ul li a {
      font-size: 16px; /* Smaller font size for mobile */
    }

    .hamburger {
        display: flex; /* Show on mobile */
      }
  /* Show the menu when active */
  #nav-links.active {
    display: flex; /* Show the menu when active */
    flex-direction: row;
    justify-content: space-between; 
    background-color: rgba(0, 0, 0, 0.85); /* Set a background color */
    padding: 0px 20px 20px 20px; /* Add some padding */
    position: absolute; /* Position it absolutely to overlay other content */
    top: 133px; /* Adjust based on header height */
    left: 0; /* Align to the left */
    z-index: 999; /* Ensure it's above other content */
  }
  
  #nav-links {
    display: none; /* Hide by default */
  }
}