header {
        width: 100%;
        position: fixed;
        padding: 0.5rem 0;
        margin: 0;
        z-index: 2;
        transition: background-color 0.3s;
        background-color: #d9e3e3;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

header > nav {
              width: 94%;
              margin: auto;
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;
}

.menu-toggle {
              display: none;
              flex-direction: column;
              cursor: pointer;
              z-index: 3;
}

.menu-toggle .bar {
                   height: 3px;
                   width: 25px;
                   background-color: #333;
                   margin: 4px 0;
                   transition: 0.4s;
}

.close-icon {
             font-size: 24px;
             color: #000;
             cursor: pointer;
             display: none;
}

.nav-list {
           display: flex;
           position: absolute;
           right: 0;
}

.nav-list li {
              margin-left: 2.1rem;
              padding: 0.5rem 0;
              list-style: none;
}

.nav-list li a {
                color: #000;
                text-decoration: none;
}

.nav-list li a:hover {
                      text-decoration: none;
}

.imagesize{
           width: 32px;
           height: 35px;
}

@media (min-width: 320px) and (max-width: 991.98px) {
         
         .menu-toggle {
                     display: flex;
         }

         .nav-list {
                    display: none;
                    flex-direction: column;
                    background-color: #d9e3e3;
                    width: 100%;
                    top: 100%;
                    right: 0;
                    height: 100vh;
                    position: absolute;
         }

         .nav-list.active {
                           display: flex;
         }

         .nav-list li {
                       margin: 0.7rem 0;
                       text-align: center;
         }

         .close-icon {
                      display: block;
                      position: absolute;
                      top: 0.5rem;
                      right: 1rem;
         }

         header > nav {
                       width: 100%;
                       flex-wrap: wrap;
         }

         
}


/* Large devices (desktops, ≥992px) */

@media (min-width: 992px) and (max-width: 1199.98px) {
        
        header > nav {
                      width: 99%;
        }
    
        .nav-list li {
                      margin-left: 0.8rem;
                      padding: 0.5rem 0;
                      list-style: none;
                      font-size: 14px;
        }
          
}


@media (min-width: 1200px) and (max-width: 1399.98px) {

        header > nav {
                      width: 98%;
        }
    
        .nav-list li {
                      margin-left: 1.4rem;
                      padding: 1.2rem 0;
                      list-style: none;
                      font-size: 15px;
        }

}