@media screen and (max-width: 768px) {
    .navbar .navitems:not(:nth-child(2)) {display: none;}
    .navbar .navicon {display: none;}
    .navbar .language {display: none;}
    .navbar .navdropbtn{
        float: right;
        display: block;
      }
    .navbar .navitems {
        float: left;
        display: block;
    }
}

/* Media Query for Smaller Screens */
@media screen and (max-width: 768px) {
    .container {
        max-width: 100%; /* Use full width on smaller screens */
        padding: 10px;
        font-size: 1.125rem; /*18px*/
    }

    button {
        font-size: 16px;
        padding: 6px 20px;
        margin-left: 0px;
    }

    .navbar.responsive {position: relative;}
    .navbar.responsive .navdropbtn {
        position: absolute;
        right: 0;
        top: 0;
  }
    .navbar.responsive .navitems {
        float: none;
        display: flex;
        text-align: left;
    }
}

/* Medium Screens (Tablets and Small Laptops) */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    .container {
        max-width: 100%; /* Slight margin for medium screens */
        padding: 10px;
        font-size: 1.2rem; /* 19.2px */
    }

    button {
        font-size: 17px;
        padding: 7px 20px;
    }
}

@media screen and (max-width: 900px){
    .navbar .language {display: none;}
    #TK {display: none;}
}

/* Large Screens */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1000px;
        font-size: 1.25rem; /*20px Larger font for big screens */
    }

    button {
        font-size: 18px;
        padding: 8px 22px;
    }
}

/* Extra Large Screens */
@media screen and (min-width: 1600px) {
    .container {
        max-width: 1200px; /* Reduce width on larger screens */
        font-size: 1.35rem; /* 22px */
    }

    button {
        font-size: 20px;
        padding: 10px 24px;
    }
}