.aiheader{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 124px;
  padding: 0 80px;
  gap: 16px;
}
.aiheader .header-ailogo {
  width: 13%;
}

.header-ailogo img {
  max-width: 200px;
  min-width: 100px;
  max-height: 40px;
}

.header-button a:hover{
  background-color: #F2E3E9;
}

.header-ailogo-link {
  cursor: pointer;
}

/* MENU ----------------------------------------------*/

.nav-menu {
  display: flex;
  grid-column-gap: 80px;
  grid-row-gap: 80px;
}

.header-menu > ul > li:last-child,
.header-menu > ul > li:nth-last-child(2) {
    display: none; /* Hide the last two items on desktop */
}

.header-menu {
  display: flex; /* Align menu items horizontally */
  align-items: center; /* Center items vertically */
}

.header-menu ul {
  display: flex; /* Use flexbox for horizontal alignment */
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  gap: 20px;
}

.header-menu li {
  position: relative; /* Positioning for submenu */
}

.header-menu .submenu {
  display: none; /* Hide submenus by default */
  position: absolute; /* Position submenus absolutely */
  left: 0; /* Align to the left of the parent */
  top: 100%; /* Position below the parent */
  background: white; /* Set background color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for visibility */
  z-index: 1000; /* Ensure submenu is above other elements */
  white-space: nowrap;
  border-radius: 8px;
  padding: 8px;
}

.header-menu li:hover > .submenu {
  display: block; /* Show submenu on hover */
}

/* Stack submenu items vertically */
.submenu li {
  display: block; /* Ensure submenu items stack vertically */
}

.header-menu a {
    text-decoration: none; /* Remove underline */
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Center items vertically */
    font-family: 'Neue Haas Grotesk Display Pro'; /* Use the specified font */
    font-size: 16px; /* Font size */
    font-weight: 600; /* Font weight */
    line-height: 19.2px; /* Line height */
    text-align: left; /* Align text to the left */
    color: #01031C; /* Text color */
    position: relative; /* Position for potential arrow styling */
    padding: 12px 0;
}

.submenu a {
  padding: 10px 15px; /* Add padding for links */
}

/* Arrow styling */
.arrow {
  margin-left: 8px; /* Space between text and arrow */
  font-size: 0.8em; /* Adjust arrow size if needed */
  color: #01031C; /* Change arrow color */
  transition: transform 0.3s; /* Smooth transition for hover effect */
  position: relative;
  top: -0.5em;
}

.header-menu li:hover .arrow {
    color: #999; /* Change arrow color on hover */
}


.header-menu li:hover > a {
  color: #BE185D;
}

.submenu {
    display: none; /* Hide submenus by default */
}

.submenu.open {
    display: block; /* Show submenu when it has the 'open' class */
}

/* Burger icon styling */
  .burger-menu {
    display: none; /* Hidden on desktop */
    font-size: 24px;
    cursor: pointer;
  }

/* MOBILE ----------------------------------------------*/

@media screen and (max-width:1440px){
  .aiheader {
    padding: 0 32px;
  }
}

@media screen and (max-width:1140px){
  
  .aiheader .header-ailogo img{
    height: 100% !important;
  }
  .aiheader .header-ailogo{
    width: auto !important;
  }

  .header-login{
    display: none;
  }

  .header-menu {
    display: none; /* Hidden by default */
    flex-direction: column; /* Stack items vertically */
    background-color: white; /* Background color for the menu */
    position: absolute; /* Position it absolutely to overlay */
    top: 90px; /* Adjust based on your header height */
    right: 0; /* Align to the right */
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it appears above other content */
  }

  /* Show menu when 'open' class is added */
  .header-menu.open {
    display: flex; /* Show the menu */
    flex-direction: column; /* Stack items vertically */
  }

  /* Burger menu styles */
  .burger-menu {
    display: block; /* Show burger on mobile */
    font-size: 24px; /* Size of the burger icon */
    cursor: pointer; /* Pointer cursor on hover */
    margin-left: auto; /* Align to the right */
  }

  /* Navigation links styles */
  .header-menu ul {
    display: block;
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    width: 100%; /* Full width */
  }

  .header-menu li {
    padding: 10px 20px; /* Spacing around each item */
    position: relative; /* To position the submenu */
  }

  /* Make the <a> a flex container */
  .header-menu a {
    display: flex; /* Enable flexbox */
    justify-content: space-between; /* Space the content apart (left for text, right for arrow) */
    align-items: center; /* Vertically center the content */
    text-decoration: none;
    color: #333;
    width: 100%; /* Ensure it takes the full width */
    font-size: 24px;
  }

  /* Make sure the arrow aligns to the right */
  .arrow {
    margin-left: auto; /* Push the arrow to the far right */
  }

  .header-menu.open > ul > li:nth-last-child(2) {
    display: block; /* Show the second last item on mobile */
  }

  .header-menu.open > ul > li:nth-last-child(2) a {
    color: #BE185D !important; /* Change text color to red */
  }

  /* Submenu dropdown styles */
  .header-menu .submenu {
    display: none; /* Hide submenus by default */
    position: relative; /* Adjust position of the submenu */
    left: 0; /* Align the submenu with the parent item */
    background-color: white; /* Optional: background for the submenu */
    z-index: 1000; /* Ensure it appears above other content */
    margin-top: 10px; /* Add spacing between the main menu item and the submenu */
    padding: 0;
    overflow: hidden; /* Prevent content from spilling out */
    transition: max-height 0.3s ease-out; /* Smooth transition */
    max-height: 0; /* Start with the submenu collapsed */
    box-shadow: none;
  }

  /* When submenu is open, adjust max-height */
  .header-menu .submenu.open {
    display: block; /* Make submenu visible */
    max-height: 500px; /* Allow submenu to expand */
  }

  /* Ensure submenu list items are styled properly */
  .header-menu .submenu li {
    padding: 10px 20px; /* Adjust submenu item padding */
  }

  /* Show submenu when its parent is clicked */
  .header-menu .submenu.open {
    display: block; /* Show submenu */
  }
}

@media screen and (max-width:440px){
  .header-button a {
    padding: 6px !important;
    font-size: 12px !important;
    min-width: 0px !important;
  }
  
  .header-button img {
    width: 12px;
    height: 12px;
  }