/* Header responsive */
@media (max-width: 992px) {
  /* Header */
  .header-container .bottom .navbar nav {
    width: 100%;
  }

  .header-container .bottom .navbar {
    position: fixed;
    right: 4rem;
    top: 30%;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    min-width: 25rem;
    border-radius: 0.5rem;
    background: var(--second-background);
    box-shadow: 0px 0px 15px 5px #0000002e;
    transition: 0.4s ease;
  }

  .header-container .bottom .navbar.active {
    opacity: 1;
    visibility: visible;
    top: 15%;
  }

  .header-container .bottom .navbar .dropdown-services .services-menu {
    right: 0;
    left: unset;
    max-height: 25rem;
    overflow-y: auto;

    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
  }

  /* Webkit scrollbar styling for Chrome, Safari, Edge */
  .header-container
    .bottom
    .navbar
    .dropdown-services
    .services-menu::-webkit-scrollbar {
    width: 6px;
  }

  .header-container
    .bottom
    .navbar
    .dropdown-services
    .services-menu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  .header-container
    .bottom
    .navbar
    .dropdown-services
    .services-menu::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  .header-container
    .bottom
    .navbar
    .dropdown-services
    .services-menu::-webkit-scrollbar-thumb:hover {
    background: var(--hover-color);
  }
}

@media (max-width: 720px) {
  .header-container .bottom .navbar .dropdown-services .services-menu {
    width: 25rem;
  }
}

@media (max-width: 576px) {
  .header-container .bottom {
    padding: 1rem;
  }

  .header-container .bottom .navbar .dropdown-services .services-menu {
    right: -3rem;
    width: 22rem;
  }

  .header-container .bottom .navbar {
    right: 1rem;
    min-width: 20rem;
  }

  .header-container .top {
    justify-content: center !important;
  }

  .header-container .bottom .navbar.active {
    top: 18%;
  }
}

@media (max-width: 380px) {
  .header-container .bottom .navbar {
    padding: 3rem 1rem !important;
    min-width: 18rem;
  }

  .public-btn {
    font-size: 0.8rem;
    max-width: 15rem;
  }

  .header-container .bottom .navbar .dropdown-services .services-menu {
    width: 19rem;
    right: -1rem;
  }
}