#discord-header {
  height: 54px;
  background-color: #f0f0fd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

#discord-logo {
  padding: 6px;
}

#discord-header > * {
  font-size: 15px;
  margin-right: 8px;
}

#discord-text {
  display: flex;
}

#discord-text > * {
  font-size: 15px;
  margin-bottom: 5px;
  margin-right: 8px;
}

#discord-link {
  font-size: 15px;
  color: #0d6efd;
}

nav {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#navbar-content {
  width: 80vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#logo-and-links {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#logo-navbar {
  width: 68px;
  margin-top: 10px;
}

#navbar-links {
  width: 400px;
  justify-content: space-between;
}

#lang-and-client-buttons {
  display: flex;
  align-items: center;
}

#lang-and-client-buttons > * {
  margin-right: 12px;
}

/* Custom Language Drowdown */

.desktop-language-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.mobile-language-dropdown {
  position: relative;
}

.language-flags {
  width: 20px;
  height: 15px;
}

.selected-language {
  width: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.selected-language::after {
  content: '▼';
  font-size: 0.4rem;
  margin-left: 8px;
  color: #333;
}

.dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #ddd;
  z-index: 1000;
}

.dropdown-options .language-option {
  width: 70px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
}

.language-option-dropdown {
  padding-bottom: 2px;
  font-size: 18px;
}

.dropdown-options .language-option:hover {
  background-color: #e1e1e1;
}

.dropdown-options img {
  margin-right: 8px;
}

/* Toggle class to show dropdown */
.show-dropdown .dropdown-options {
  display: block;
}

/* burger menu for mobile */

#navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Burger icon styles */
#burger-icon {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

#burger-icon span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
}

/* Mobile menu hidden by default */
#mobile-menu {
  display: none;
}

#close-icon {
  display: none;
  font-size: 36px;
  color: #333;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

/* Media Queries */

@media (min-width: 1921px) {
  #navbar-content {
    width: 70vw;
  }

  #lang-and-client-buttons button {
    font-size: 18px;
    width: 270px;
  }

  .selected-language {
    width: 90px;
  }
}

@media (min-width: 2800px) {
  #navbar-content {
    width: 60vw;
  }
}

/* Big screens */
@media (min-width: 3300px) {
  #discord-header {
    height: 108px;
    font-size: 24px;
  }

  #discord-header > * {
    font-size: 28px;
  }

  #discord-text > * {
    font-size: 28px;
  }

  #discord-link {
    font-size: 28px;
  }

  #navbar-content {
    width: 60vw;
    height: 120px;
    font-size: 28px;
  }

  #logo-navbar {
    width: 96px;
  }

  #logo-and-links {
    width: 700px;
  }

  #navbar-links {
    width: 800px;
    margin-left: 50px;
  }

  #navbar-links > * > * {
    font-size: 28px;
  }

  .selected-language {
    width: 150px;
  }

  .selected-language::after {
    font-size: 0.8rem;
  }

  .language-flags {
    width: 38px;
    height: 27px;
  }

  .dropdown-options .language-option {
    width: 150px;
  }

  .language-option-dropdown {
    font-size: 30px;
    margin-left: 20px;
  }

  .desktop-language-dropdown img {
    width: 38px;
    height: 27px;
  }

  #lang-and-client-buttons button {
    font-size: 24px;
    width: 350px;
  }
}

/* In between desktop and mobile vertical */

@media (min-width: 1025px) and (max-width: 1600px) {
  /* Styles for tablet and mobile horizontal view */
  #navbar-content {
    width: 80%;
  }

  #logo-and-links {
    justify-content: start;
  }

  #logo-navbar {
    width: 48px;
  }

  #navbar-links {
    padding-left: 20px;
    width: 300px;
  }

  #navbar-links > * > * {
    font-size: 16px;
  }

  #lang-and-client-buttons {
    width: 600px;
    justify-content: end;
  }

  #lang-and-client-buttons > button {
    font-size: 12px;
    padding: 10px 15px;
  }
}

/* Mobile Vertical*/

@media (max-width: 1024px) {
  #discord-text > * {
    font-size: 12px;
  }

  #discord-link {
    font-size: 12px;
  }

  /* Show the burger icon and hide regular navbar links */
  #burger-icon {
    display: flex;
  }

  #close-icon {
    display: block;
  }

  #navbar-links {
    display: none;
  }

  /* Mobile menu styles */
  #mobile-menu {
    display: none;
    position: absolute;
    top: 60px; /* Adjust based on navbar height */
    left: 0;
    width: 100%;
    background-color: #f3f3f3;
    z-index: 1000;
    padding-bottom: 10px;
    border: 1px solid #ddd;
  }

  #mobile-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  #lang-and-client-buttons {
    display: none;
  }

  #lang-and-client-buttons-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    gap: 10px;
  }

  #navbar-content {
    justify-content: space-around;
  }

  #mobile-menu li {
    padding: 10px 0;
    text-align: center;
  }

  #mobile-menu a {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
  }

  #lang-and-client-buttons-mobile a {
    color: #ffffff;
    font-size: 18px;
  }

  /* Display the mobile menu when active */
  .show-menu #mobile-menu {
    display: flex;
    flex-direction: column;
  }
}