/* Top Section Navbar Background */
.navSection.navBackground {
  /* background-color: #193363; */
  background-color: var(--purple);
}

.navSection.navBackground .navbar {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Styles for the Navbar Brand Image */
a.navbar-brand img {
  border-radius: 10px;
  height: 80px;
  padding: 10px 15px 10px 15px;
}

/* Vertical Line Styling */
.vertical-line {
  border-left: 1px dashed var(--text-light);
  height: 40px; /* Adjust the height of the line to match the logo height */
  margin: 0px 15px 0px 0px; /* Adjust the margin as needed */
}

/* Travel Agent Text Styling */
.travel-agent-text {
  color: var(--dark-text);
  font-size: 16px; /* Adjust the font size as needed */
  font-weight: 400; /* Adjust the font weight as needed */
  text-decoration: none;
}

/* .travel-agent-text:hover {
  color: var(--white-color);
} */

/* Styles for Navbar Items on Hover and Focus */
ul.navbar-nav li.loginBtn-spacing {
  padding-right: 20px;
}

/* Styles for Nav Menu Links */
.nav-item a:hover,
.nav-item a:focus {
  color: var(--white-color);
}

.nav-menu a.nav-link {
  color: var(--dark-text);
}

.nav-menu a.nav-link:hover {
  color: var(--dark-text);
}

/* CSS to show dropdown on hover */
/* .custom-hover-dropdown li.dropdown:hover .dropdown-menu {
  display: block;
} */

.custom-hover-dropdown li.dropdown:hover .dropdown-menu a:hover {
  color: var(--dark-text);
}

.custom-hover-dropdown {
  /* Remove padding-right to center the navigation menu */
  /* padding-right: 20px; */
}

/* ul.custom-hover-dropdown li {
  padding: 0px 8px 0px 8px;
} */

ul.custom-hover-dropdown li a {
  font-size: 15px;
}

.navbar .custom-hover-dropdown li a,
.navbar .custom-hover-dropdown li a:hover,
.navbar .custom-hover-dropdown li a:focus,
.navbar .custom-hover-dropdown li a:active {
  color: var(--gold);
}

.navbar .custom-hover-dropdown li .dropdown-menu a {
  color: var(--dark-text);
}

/* Hide the plus icon when the dropdown is open */
.plus-toggle-packages .plus-icon,
.plus-toggle-support .plus-icon {
  display: none;
}

/* Show the plus icon when the dropdown is closed */
.plus-toggle-packages .plus-icon:not(.active),
.plus-toggle-support .plus-icon:not(.active) {
  display: block;
}

/* Show the minus icon when the dropdown is open */
.plus-toggle-packages .plus-icon.active,
.plus-toggle-support .plus-icon.active {
  display: none;
}

/* Add this custom CSS to change the color of the navbar toggler icon to white */
.navBackground .custom-toggler {
  box-shadow: none;
}

.custom-toggler .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.packageDesktop-Dropdown a,
.supportDesktop-Dropdown a {
  display: flex;
  align-items: center;
}

.packageDesktop-Dropdown .packages-dropdown-menu,
.supportDesktop-Dropdown .support-dropdown-menu {
  max-width: fit-content;
}

.packageDesktop-Dropdown a i,
.supportDesktop-Dropdown a i {
  margin-left: 8px;
}

.packageDesktop-Dropdown .packages-dropdown-menu,
.supportDesktop-Dropdown .support-dropdown-menu {
  padding: unset;
}

.packageDesktop-Dropdown .packages-dropdown-menu a,
.supportDesktop-Dropdown .support-dropdown-menu a {
  border-bottom: 1px solid #c8c8c7;
  padding: 10px 15px 10px 15px;
}

.packageDesktop-Dropdown .packages-dropdown-menu a:last-child,
.supportDesktop-Dropdown .support-dropdown-menu a:last-child {
  border-bottom: unset;
}

.packageDesktop-Dropdown .packages-dropdown-menu a:first-child:hover {
  /* border-top-left-radius: 10px; */
  /* border-top-right-radius: 10px; */
}

.packageDesktop-Dropdown .packages-dropdown-menu a:last-child:hover {
  /* border-bottom-left-radius: 10px; */
  /* border-bottom-right-radius: 10px; */
}

.supportDesktop-Dropdown .support-dropdown-menu a:first-child:hover {
  /* border-top-left-radius: 10px; */
  /* border-top-right-radius: 10px; */
}

.supportDesktop-Dropdown .support-dropdown-menu a:last-child:hover {
  /* border-bottom-left-radius: 10px; */
  /* border-bottom-right-radius: 10px; */
}

/* Styles for Login Button */
button.loginButton {
  background-color: var(--gold);
  border-color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 7px;
  color: var(--white-color);
  padding: 6px 50px 6px 50px;
}

/* Styles for Login Button on Hover, Focus, and Active */
button.loginButton:hover,
button.loginButton:focus,
button.loginButton:active {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white-color);
}

/* Styles for Login Button Link on Hover */
button.loginButton a:hover {
  color: var(--white-color);
}

/* Styles for Register Button */
button.registerButton {
  background-color: var(--gold);
  border: none;
  border-radius: 7px;
  padding: 8px 45px 8px 45px;
}

/* Styles for Register Button Link and Submit Button Link */
button.registerButton a,
.submitButton button a {
  color: var(--white-color);
  text-decoration: none;
}

/* Styles for Register Button on Hover and Active */
button.registerButton:hover,
button.registerButton:active {
  background-color: var(--black);
}

/* Hide the Plus/Minus Icon by Default */
.plus-minus-icon {
  display: none;
}

/* Style the Plus and Minus Icons from Font Awesome */
.plus-minus-icon i {
  font-size: 14px;
}

/* .travel-agent-text {
  display: block;
  text-align: left;
  margin-left: 0px;
} */

ul.custom-hover-dropdown {
  margin-top: 25px;
  margin-bottom: 10px;
}

/* ul.wrapButtons li.loginBtn-spacing {
    width: 100%;
  }

  ul.wrapButtons li.registerBtn-spacing {
    width: 100%;
  } */

.navBar-spacing .wrapButtons {
  background-color: #f1f1f1;
  border-radius: 10px;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ul.navbar-nav li.loginBtn-spacing {
    padding-right: unset;
  } */

.dropdown-menu.show {
  border-radius: 10px;
  display: block;
}

/* Styles for the Plus and Minus Icons from Font Awesome */
.plus-toggle .fas.fa-plus {
  display: inline;
}

.plus-toggle .fas.fa-minus,
.minus-toggle .fas.fa-plus {
  display: none;
}

.minus-toggle .fas.fa-minus {
  display: inline;
}

/* Add this CSS to hide the dropdown initially */
.dropdown-menu {
  display: none;
  max-width: 100%;
}

.navbar ul.custom-hover-dropdown {
  padding-right: unset;
}

.custom-hover-dropdown .dropdown-menu {
  border-radius: 7px;
  padding-right: unset;
  margin-bottom: 10px;
}

/* ul.custom-hover-dropdown li {
  padding: unset;
} */

.navbar .custom-hover-dropdown .mobileNav-Menu {
  background-color: #f1f1f1;
  /* background-color: var(--blue-color); */
  border-bottom: 1px solid #c8c8c7;
  padding: 7px 20px 7px 20px;
}

.navbar
  .custom-hover-dropdown
  li.packageDesktop-Dropdown
  .packages-dropdown-menu
  a:first-child:hover,
.navbar
  .custom-hover-dropdown
  li.supportDesktop-Dropdown
  .packages-dropdown-menu
  a:first-child:hover {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.navbar
  .custom-hover-dropdown
  li.packageDesktop-Dropdown
  .packages-dropdown-menu
  a:last-child:hover,
.navbar
  .custom-hover-dropdown
  li.supportDesktop-Dropdown
  .packages-dropdown-menu
  a:last-child:hover {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-bottom: unset;
}

.navbar .custom-hover-dropdown li.packagedesktop-dropdown:last-child,
.navbar .custom-hover-dropdown li.supportdesktop-dropdown :last-child {
  border-bottom: unset;
}

.navbar .custom-hover-dropdown li.mobileNav-Menu:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.navbar .custom-hover-dropdown li.mobileNav-Menu:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: unset;
}

.navbar .custom-hover-dropdown li.mobileNav-Menu a,
.navbar .custom-hover-dropdown li.mobileNav-Menu a:focus,
.navbar .custom-hover-dropdown li.mobileNav-Menu a:active {
  color: var(--gold);
}

/* Add this CSS to position the plus icon on the right side */
.custom-dropdown-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-dropdown-mobile .plus-toggle {
  display: flex;
  align-items: center;
}

.custom-dropdown-mobile .plus-toggle a {
  margin-right: 10px;
}

.custom-hover-dropdown li.dropdown:hover .dropdown-menu {
  padding-top: unset;
  padding-bottom: unset;
}

.custom-hover-dropdown .dropdown-menu .dropDown-Package {
  border-bottom: 1px solid #c8c8c7;
  padding: 10px 15px 10px 15px;
}

.custom-hover-dropdown .dropdown-menu .dropDown-Package:last-child {
  border-bottom: unset;
}

.custom-hover-dropdown .dropdown-menu .dropDown-Package:active,
.custom-hover-dropdown .dropdown-menu .dropDown-Package:focus {
  background-color: var(--white-color);
}

@media (min-width: 768px) and (max-width: 991.99px) {
}

@media (min-width: 992px) {
  .navBar-spacing .wrapButtons {
    background-color: unset;
    /* border-radius: unset; */
    flex-direction: unset;
    justify-content: unset;
    margin-bottom: unset;
    padding-top: unset;
    padding-bottom: unset;
  }

  .navbar .custom-hover-dropdown .mobileNav-Menu {
    background-color: unset;
    border-bottom: unset;
    padding: unset;
  }

  /* .navbar .custom-hover-dropdown li.mobileNav-Menu a,
  .navbar .custom-hover-dropdown li.mobileNav-Menu a:focus,
  .navbar .custom-hover-dropdown li.mobileNav-Menu a:active {
    color: var(--dark-text);
  } */

  .nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  ul.custom-hover-dropdown {
    margin: unset;
  }

  .navSection .navBar-spacing ul.custom-hover-dropdown li.nav-item {
    padding: 0px 4px 0px 4px;
  }

  .navSection .navBar-spacing ul.custom-hover-dropdown li.nav-item a,
  .travel-agent-text {
    font-size: 13px;
  }

  button.loginButton {
    padding: 6px 35px 6px 35px;
  }

  button.registerButton {
    padding: 8px 35px 8px 35px;
  }
}

@media (min-width: 1200px) {
  .navSection .navBar-spacing ul.custom-hover-dropdown li.nav-item {
    padding: 0px 7px 0px 7px;
  }

  .navSection .navBar-spacing ul.custom-hover-dropdown li.nav-item a,
  .travel-agent-text {
    font-size: 15px;
  }

  button.loginButton {
    padding: 6px 40px 6px 40px;
  }

  button.registerButton {
    padding: 8px 40px 8px 40px;
  }
}