I made a media query for mobiles which is working well but the one for tablets doesnt. It is almost identical and I have no idea whats wrong.
Its mostly about the navbar turning into a hamburger menu (well it should on tablet but it just doesnt). Please help!

HTML:

<div class="nav-container">
            <span class="logo lato-bold">DacHOW<i class="fa-regular fa-circle-question"></i></span>
            <nav class="nav">
                <ul class="nav-ul">
                    <li class="nav-link"><a href="#home">Home</a></li>
                    <li class="nav-link"><a href="#first-steps">First steps</a></li>
                    <li class="nav-link"><a href="#asylum">BAMF/Asylum</a></li>
                    <li class="nav-link"><a href="#financial-aid">Bezahlkarte</a></li>
                    <li class="nav-link"><a href="#healthcare">Health</a></li>
                    <li class="nav-link"><a href="#education">School</a></li>
                    <li class="nav-link"><a href="#support">School</a></li>
                </ul>
            </nav>
            <span class="hamburger-menu material-symbols-outlined"><i class="fa-solid fa-bars"></i></span>
        
            <div class="dropdown-language container">
                <button class="dropbtn" id="dropbtn">
                    English
                  <i class="fa fa-caret-down" id="arrow"></i>
                </button>
                <div class="dropdown-content" id="dropdown-content">
                  <a href="index.html" onclick="changeLanguage('en')">English</a>
                  <a href="index.html" onclick="changeLanguage('fr')">French</a>
                  <a href="index.html" onclick="changeLanguage('ar')">Arabic</a>
                  <a href="#">Link 3</a>
                </div>
              </div> 
        </div>

CSS :

/* NAVIGATION */

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; 
  z-index: 1000; 
}


.nav-container .logo {
  display: flex;
  align-items: center;
  font-size: 2.5rem; 
  font-weight: bold;  
  color: #4D4DDB;
}

.nav {
  display: flex;
  flex-grow: 1;
}

.nav a{
  color: black;
}


.nav-ul{

  margin: 0 auto;
}


.nav-ul li {
  margin: 8px 0; 
}


.nav-container, .nav-ul {
  display: flex;
  gap: 1.6rem;
  font-size: 1.2rem;
}

.hamburger-menu {
  display: none; 
  cursor: pointer;
}


/* LANGUAGE DROPDOWN BUTTON */

.dropbtn {
  background-color: black;
  color: white;
  padding: 16px;
  font-size: 1rem;
  border: none;
  border-radius: 15px;
  position: relative;

}

.dropbtn:hover {
  background-color: #333;

}

.dropdown {
  position: relative;
  display: inline-block;
}

/* this is the dropdown content that is hidden by deafult */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  
}


/* Showing the dropdown menu (used JS to add this class to the .dropdown-content container so when the user clicks on the dropdown button the menu shows) */
.show {
  display:block;
}

CSS MEDIA QUERY:

@media (max-width: 767px) {

/* BASIC */ 

.big-font{
  font-size: 1.5rem;
}


/* NAVBAR */ 

  .nav-container .logo {
      font-size: 1.5rem;
      z-index: 2;
      margin-left: 0;
  }

  .nav {
      flex-direction: column;
      gap: 2rem;
  }

  .nav-ul{
      flex-direction: column;
      gap: 0.6rem;
      background-color: #4D4DDB;
  }

  .hamburger-menu {
    display: block; /* Show the hamburger menu */
    position: absolute; /* Position absolute to center it */
    right: 50%; /* Move to the center */
    transform: translateX(50%); /* Offset by 50% to actually center */

  }

  .nav {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      display: none;
      padding-top: 4rem;
      text-align: center;
      background-color: #4D4DDB;
      color: white;
      transition: right 0.15s ease-in-out;
  }



  .nav a{
    color: white;
  }

  .nav.active {
      right: 0;
      display: block;
  }


  .dropbtn {
    margin: 1rem;
  }


 /* FIRST STEPS */

  .first-steps {
    margin: 1rem;
    padding: 1rem 2rem;
  }

  .banner-container{
    margin: 1rem;
  }

};




@media (min-width: 768px) and (max-width: 1024px) {
  
/* NAVBAR */ 

  .nav-container .logo {
    font-size: 1.5rem;
    z-index: 2;
    margin-left: 0;
  }

  .nav {
    flex-direction: column;
    gap: 2rem;
  }

  .nav-ul{
    flex-direction: column;
    gap: 0.6rem;
    background-color: #4D4DDB;
  }

  .hamburger-menu {
  display: block; /* Show the hamburger menu */
  position: absolute; /* Position absolute to center it */
  right: 50%; /* Move to the center */
  transform: translateX(50%); /* Offset by 50% to actually center */

  }

  .nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: none;
    padding-top: 4rem;
    text-align: center;
    background-color: #4D4DDB;
    color: white;
    transition: right 0.15s ease-in-out;
  }



  .nav a{
  color: white;
  }

  .nav.active {
    right: 0;
    display: block;
  }


  .dropbtn {
  margin: 1rem;
  }


  /* FIRST STEPS */

  .first-steps {
  margin: 1rem;
  padding: 1rem 2rem;
  }

  .banner-container{
  margin: 1rem;
  }


};

I tried adjusting the query a few times and looking into browser dev tools.