/* Your existing CSS styles */
/* Aileron-Light */
@font-face {
  font-family: 'Aileron-Light'; /* Name to reference the font */
  src: url('/fonts/Aileron-Light.otf') format('opentype'); /* Path to your font file */
}

@font-face {
  font-family: 'Aileron-SemiBold'; /* Name to reference the font */
  src: url('/fonts/Aileron-SemiBold.otf') format('opentype'); /* Path to your font file */
}

body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: 'Aileron-SemiBold', sans-serif; /* Use Aileron-SemiBold for h2 */

  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--primary-color);
    color: var(--tertiary-color);
  }
  
  .logo img {
    height: 40px; /* Adjust as needed */
    transition: filter 0.3s; /* Add transition for smooth effect */
}

.logo img:hover {
    filter: brightness(0.6) sepia(200%) saturate(300%) hue-rotate(330deg); /* Tint effect */
}
  
  .menu-toggle,
  .close-toggle {
    display: none;
  }
  
  .nav-links {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .nav-links li {
    margin-right: 40px;
    
  }
  
  .nav-links li:last-child {
    margin-right: 0;
  }
  
  .nav-links a {
    color: var(--tertiary-color);
    text-decoration: none;
    font-family: 'Aileron-Light', sans-serif; /* Use Aileron-SemiBold for h2 */
  }

  .nav-links a:hover {
    color: var(--secondary-color); /* Change color on hover */
    text-decoration: underline; /* Add underline on hover */
}
  
  .close-btn-nav {
    cursor: pointer;
  }
  
  /* Mobile-specific styles */
  @media screen and (max-width: 768px) {
    .menu-toggle {
      display: flex; /* Ensure menu toggle is displayed */
      cursor: pointer;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  
    .navbar {
      align-items: flex-start;
    }
  
    .menu-toggle .bar {
      width: 25px;
      height: 3px;
      background-color: #fff;
      margin: 5px 0;
    }
  
    .close-toggle {
      display: none;
      order: 3;
    }
  
    .nav-links {
      display: none;
      flex-direction: column;
      align-items: center;
      margin-top:10px;
      padding: 0 20px;
      padding-top: 45px;
      order: 2;
    }
  
    .nav-links.active {
      display: flex;
    }
  
    .nav-links li {
      margin-right: 0px;
      margin-top:10px;
      margin-bottom: 10px;
      transform: translateY(-20px);
      transition: transform 0.5s ease; /* Adjust the duration here */

    }
  
    .logo {
      order: -1;
    }
  }