* {
    box-sizing: content-box;
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

nav {
    margin: 2em auto;
  webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    padding:0 1em;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.63);
  -webkit-border-radius: 1rem;
    border-radius: 1rem;
  -webkit-box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.57);
    box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.57);
    overflow: visible;
    align-items: center;
    position: relative;
}

img {
    width: max(14em, 20vw);
    object-fit: contain;
}

ul {
    display: inline-flex;        
}

nav li {
    color: #2d3947;
    font-size: 1.1em;
    margin: max(1em, 2vw) .8em;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

nav li a {
    color: #2d3947;
    font-weight: 400;
    text-decoration: none;
}

nav li:after {
    display:block;
    content: '';
    border-bottom: solid 1.5px #2d3947;  
  -webkit-transform: scaleX(0); 
    transform: scaleX(0);  
  -webkit-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
  }

nav li:hover:after, li.active:after {
  -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

.container{
    margin: 0 .5em;
    width: 2.5em;
    display: flex;
    justify-content: center;
    cursor: pointer;
  -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.container .menu{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .line{
    position: absolute;
    height: 4px;
    width: 100%;
    border-radius: 3rem;
    background-color: #2d3947;
  -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.menu .line.one{
    top: 15px;
}
.container.active .line.one{
    top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}
.menu .line.three{
    bottom: 15px;
}
.menu .line.two{
    left: 0;
  -webkit-opacity: 1;
    opacity: 1;
}
.container.active .line.two{
    opacity: 0;
  -webkit-opacity: 0;
}
.container.active .line.three{
    bottom: 50%;
  -webkit-transform: translateY(50%) rotate(-45deg);
    transform: translateY(50%) rotate(-45deg);
}

.dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  -webkit-opacity: 0;
    opacity: 0;
  -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: #536883fa;
  -webkit-border-radius: 1rem;
    border-radius: 1rem;
    top: 100%;
    right: 0;
    position: absolute;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  -webkit-transition: all .5s;
    transition: all .5s;
}

.dropdown.active {
  -webkit-opacity: 1;
    opacity: 1;
}

.dropdown a {
    display: none;
    color: white;
    font-size: 1.1em;
    margin: max(1em, 2vw) .8em;
    font-weight: 400;
    text-decoration: none;
}

.dropdown.active a {
    display:block;
}

.dropdown a:after {
    display:block;
    content: '';
    border-bottom: solid 1.5px white;  
  -webkit-transform: scaleX(0);  
    transform: scaleX(0);  
  -webkit-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
}

.dropdown a:hover:after, .dropdown a.active:after { 
  -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

@media only screen and (max-width: 699px) {
    .dropdown {
        background-color: #536883fa;
        width: 100%;
        padding-bottom: 1em;
    }
    nav {
        margin: 1em auto;
        padding: 0 .5em;
    }
    nav ul {
        height: 3.7em;
    }
    :is(#li-one, #li-two, #li-three, #li-four, #li-five) {
        display: none;
        margin: 0;
    }
}

@media only screen and (min-width: 699px) and (max-width: 799px){
    :is(#li-one, #li-four, #li-five) {
        display: none;
        margin: 0;
    }
    :is(#two-drp, #three-drp) {
        display: none;
        margin: 0;
    }
}

@media only screen and (min-width: 799px) and (max-width: 970px){
    :is(#li-one, #li-five) {
        display: none;
        margin: 0;
    }

    :is(#two-drp, #three-drp, #four-drp) {
        display: none;
        margin: 0;
    }
}

@media only screen and (min-width: 970px) {
    nav .container, nav .dropdown.active{
        display: none;
    }
}