.new-nav {
   background-color: #ffffff;
   top: 0;
   position: inherit;
   left: 0;
   width: 100%;
   height: 80px;
}

/* Container for text and arrow */
.nav-txt {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   /* Space between text and arrow */
   cursor: pointer;
   color: rgb(21, 36, 48);
   /* Default text color */
   position: relative;
   /* For dropdown positioning */
   transition: color 0.2s ease-in-out;
   /* Smooth text color transition */
   margin-left: 1.25rem;
   margin-right: 1.25rem;
   height: 100%;
}

/* Change text color on hover */
.nav-txt:hover {
   color: #2EC99B;
   border-bottom: 3px solid #2EC99B;
}

/* Arrow animation on hover */
.nav-txt svg {
   transition: transform 0.2s ease-in-out;
   transform-origin: center;
}

.nav-txt:hover svg {
   transform: rotate(180deg);
}

/* Dropdown menu styling */
.sub-nav {
   display: none;
   /* Hidden by default */
   position: absolute;
   top: 100%;
   /* Place below the container */
   left: 50%;
   /* Center horizontally */
   transform: translateX(-50%);
   /* Adjust to center align */
   background-color: white;
   /* border: 1px solid #ddd; */
   padding: 16px;
   z-index: 1000;
   /*width: 550px; Set a fixed width for the dropdown */
   margin-top: 2px;
   box-shadow: 2px 2px 2px 0px rgba(99, 99, 99, 0.65);
}

.sub-nav-600 {
   width: 600px;
   /* Set a fixed width for the dropdown */
}

.sub-nav-250 {
   width: 250px;
   /* Set a fixed width for the dropdown */
}

.sub-nav .col a {
   display: block;
   text-decoration: none;
   color: rgb(21 36 48);
   font-weight: 400;
   padding: 10px 0;
   transition: color 0.2s;
}

.sub-nav a:hover {
   color: #2EC99B;
   /* Change link color on hover */
}

/* Show dropdown on hover */
.nav-txt:hover .sub-nav {
   display: flex;
   /* Show dropdown */
}

/* Layout for dropdown columns */
.sub-nav {
   flex-direction: row;
   gap: 16px;
   justify-content: space-between;

}

/* Dropdown links */
.sub-nav {
   flex: 1;
}

/* .sub-nav a {
      display: block;
      text-decoration: none;
      color: rgb(21 36 48);
      font-weight: 400;
      padding: 4px 0;
      transition: color 0.2s;
    } */

.sub-nav-hd {
   text-transform: uppercase;
   font-weight: 600;
   color: rgba(0, 0, 0, .5);
   font-size: 12px;
   margin: 0;
   padding: 0;
}

.buttons {
   flex: 0 0 auto;
   white-space: nowrap;
   display: flex;
}

.mobile-nav {
   display: none;
}

.top-margin {
   margin-top: 1.15rem;
}

@media only screen and (max-width: 991px) {
   .mobile-nav {
      background-color: #fff;
      height: 80px;
      display: block;
   }

   .toggle-x,
   .hamburger {
      width: 30px;
   }

   .new-nav {
      display: none;
   }

   .menu-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   /* Hamburger button */
   .menu-toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 24px;
      width: 30px;
      padding: 0;
   }

   .menu-toggle .bar {
      background-color: #333;
      height: 4px;
      width: 100%;
      border-radius: 2px;
      transition: all 0.3s ease;
   }

   /* Hamburger to X transformation */
   .menu-toggle.open .bar:nth-child(1) {
      transform: translateY(10px) rotate(45deg);
   }

   .menu-toggle.open .bar:nth-child(2) {
      opacity: 0;
   }

   .menu-toggle.open .bar:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
   }

   /* Mobile Navigation links */
   .menu-links {
      display: none;
      flex-direction: column;
      gap: 10px;
      position: absolute;
      top: 146px;
      background: #fff;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1000;
   }

   .menu-links.visible {
      display: flex;
      background-color: #fff;
      z-index: 1000;
      width: 100%;
   }

   .menu-links a {
      text-decoration: none;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      transition: color 0.3s ease;
      z-index: 1000;
   }

   .menu-links a:hover {
      color: #2EC99B;
   }

   .mobile-hd {
      font-weight: bold;
      font-size: 1.2rem;
   }

   .mobile-dd a {
      display: block;
      text-decoration: none;
      color: rgb(21 36 48);
      font-weight: 400;
      padding: 10px 0;
      transition: color 0.2s;
   }

}