/* Navigation bar styles */
.navbar {
    background-color: rgba(34,34,34,1); /* Black background */
    padding: 35px 20px;
    display: flex;
    align-items: center;
    position: relative;
    position: fixed;
      z-index:101;
      top:0;
      left:0;
      right: 0;
      border-bottom: 2px solid var(--dark-color);
      transition: all .1s ease-in-out; /* Smooth transition for style changes */
    border-bottom: none; /* No border by default */
  }


  .navbar.scrolled {
    border-bottom: 2px solid var(--dark-color); /* Example border style */
}

  .navbar .container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    overflow: visible;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 12px; /* Adjust size as needed */
  }


  .navbar a.selected {
    color: var(--primary-color);
  }
  /* Logo text styles */
  .logo {
    width: 200px;
  }
  .logo-svg {
      fill: var(--light-color);
      z-index: 5;
    }

  /* Navigation links layout */
  .nav-links {
    display: flex; /* Use flex here instead of float */
    align-items: center; /* Align links vertically */
    gap: 16px; /* This creates space between the links */
  }

  .nav-links a {
    padding: 0 5px;

  }
  /* Right-aligned items for login */
  .nav-right {
    display: flex; /* Use flex here instead of float */
    align-items: center; /* Align links vertically */
    gap: 16px; /* This creates space between the links */

  }
  /* Hover effects for links */
  .navbar a:hover {
    color: var(--primary-color); /* Text color change on hover */
    cursor: pointer;
  }
 

  /* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }
  
  .hamburger div {
    width: 30px;
    height: 3px;
    background-color: white;
  }

  /* page styles */
  /* light pages */

  .light-page .navbar {
      background-color: var(--light-color);
      padding: 35px 20px;
      display: flex;
      align-items: center;
  }

  .light-page .logo-svg {
    fill: var(--dark-color);
  }

  .light-page .navbar a {
    float: left;
    display: block;
    color: var(--dark-color);
    text-align: center;
    text-decoration: none;
    font-size: 12px; /* Adjust size as needed */
  }

      /* Hamburger Menu */
  .light-page .hamburger div {
    background-color: var(--dark-color);
  }


  .navbar a.selected {
    color: var(--primary-color);
  }

  
  /* Responsive */
  @media (max-width: 1024px) {
    .nav-links {
        display: none; /* Initially hidden */
        position: absolute; /* Positioned absolutely */
        top: 100%; /* Positioned right below the .navbar */
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--dark-color); /* Match the navbar color */
        width: 100%;
        gap: 0;
        padding: 0 12px;
        z-index: 15; /* Ensure it's above other content */
      }
  
      .nav-links a {
        text-align: center;
        padding: 12px; /* Larger tap targets */
        color: var(--light-color); /* Ensure text is visible */
        font-size:  24px;
      }

      .light-page .nav-links {
        background: var(--dark-color); /* Match the navbar color */

      }
  
    .hamburger {
      display: flex; /* Show hamburger icon in smaller screens */
    }
  
    .active {
      display: flex; /* Show nav-links when hamburger is active */
    }

    /* light pages */

    .light-page .navbar a {
      color: var(--light-color);
      font-size: 18px;
    }
    .navbar a.selected {
      color: var(--primary-color);
    }

    .nav-links {
      border-bottom: 2px solid var(--light-color);
    }

    .light-page .nav-links {
      border-bottom: 2px solid var(--light-color);
    }

    .nav-links a {
      padding: 25px 0;
    }
  }

  @media (max-width: 800px) {

    .navbar {
      position: fixed;
      z-index:101;
      top:0;
      left:0;
      right: 0;
      /* border-bottom: 2px solid var(--dark-color); */
      padding: 25px 20px!important;
    }
    .nav-links, .nav-right {
        display: none; /* Initially hidden */
        position: absolute; /* Positioned absolutely */
        top: 100%; /* Positioned right below the .navbar */
        left: 0;
        right: 0;
        flex-direction: column;
        background: #222222; /* Match the navbar color */
        width: 100%;
        gap: 0;
        padding: 0 12px;
        z-index: 15; /* Ensure it's above other content */
      }

  
      .nav-links a, .nav-right a, .nav-right button {
        text-align: center;
        padding: 25px 0; /* Larger tap targets */
        color: white; /* Ensure text is visible */
        font-size: 20px; /* Larger font size for better readability on mobile */
        border-bottom: 1px solid #333333; /* Optional: adds a separator between items */
        width: 100%; /* Ensure full width is used */
      }

      .nav-right button {
        width: 80%;
        margin: 0 auto;
        padding: 20px 0; /* Larger tap targets */

      }

      .hamburger {
        display: flex; /* Show hamburger icon in smaller screens */
      }
    
      .navbar .container .active {
        display: flex; /* Show nav-links and nav-right when hamburger is active */
        flex-direction: column;
      }


    }