/**
 * Frontend
 * Custom styles
 */

/**
  * Essentials
  */
html,
body {
  height: 100%;
  margin: 0;
}

/**
 * Multilevel menu
 */
/* Base dropdown menu styles for Bootstrap */
.navbar.navbar-expand-lg .dropdown .dropdown-menu {
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  display: none; /* Hide by default */
  position: absolute;
  z-index: 1000;
  background-color: #fff;
}

/* Show the first-level dropdown menu on hover (desktop) */
.navbar .dropdown:hover>.dropdown-menu {
  display: block; /* Show first-level dropdown on hover */
}

/* Submenu positioning for desktop */
.dropdown .dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  display: none; /* Hide submenu by default */
}

/* Show second-level submenu on hover (desktop) */
.dropdown-item:hover>.dropdown-submenu {
  display: block; /* Show submenu on hover of the parent item */
}

/* Ensure submenus adjust when near the right edge of the screen (desktop) */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu .dropdown-item:hover>.dropdown-menu {
      left: auto; /* Reset left position */
      right: 100%; /* Move to the left if near screen edge */
  }
}

/* Mobile behavior (smaller than 992px) */
@media (max-width: 991px) {
  /* Reset dropdown menu positioning for mobile */
  .dropdown .dropdown-menu {
      position: relative;
      left: 0;
      top: auto;
      display: none; /* Hidden by default on mobile */
      background-color: #fff;
  }

  /* Show submenu on mobile click */
  .dropdown-item:focus>.dropdown-menu,
  .dropdown-item:hover>.dropdown-menu {
      display: block; /* Show on focus or hover */
  }

  /* Align submenus vertically on mobile */
  .dropdown-submenu .dropdown-menu {
      left: 0; /* Align below the parent */
      top: 0;
  }

  /* Depth-based classes for mobile view */
  ul.dropdown-menu.depth_1 {
      left: inherit !important;
      top: 0;
  }

  ul.dropdown-menu.depth_2 {
      left: inherit !important;
      top: 0;
  }

  ul.dropdown-menu.depth_3 {
      left: inherit !important;
      top: 0;
  }
}

/* Styles for depth-based positioning on desktop */
ul.dropdown-menu.depth_1 {
  left: 100%;
  top: 0;
}

ul.dropdown-menu.depth_2 {
  left: auto;
  right: 100%;
  top: 0;
}

/* Hover effects and active states */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #7aacde;
  color: white;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: transparent;
  color: #212529;
  font-weight: 600;
}



/**
 * Back to top
 */
.back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: opacity 0.3s;
  z-index: 9999;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  /* Add a shadow */
}

.back-to-top-btn:hover {
  opacity: 0.8;
}

.back-to-top-btn .arrow-up {
  font-size: 42px;
  /* Adjust the font size for the "^" symbol */
  line-height: 54px;
  /* Center vertically within the circle */
}