body {
font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;

margin: 0px;
margin-left: auto;
margin-right: auto;

}
a {
text-decoration-line: none;
color: white;
}
li {
list-style-type: none;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-left: 20%;
margin-right: 20%;
height: 104px;
}

.main-header{
background-color: rgb(30 30 30 / 75%);
}
.logo img {
width: 100px;
}

.logo > a {
color: white;
}

.textColorOverNav{
font-size: 1.5rem;
font-family: emoji;
color:white;
}
.main-nav {
display: flex;
align-items: center;
list-style: none;

margin: 0;
padding: 0;
}

.main-nav li {
position: relative;
}

.main-nav > li > div {
display: block;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
color:white;
padding: 60px 10px 60px 10px;
line-height: 1.2em;
font-style: normal;
}

.sub-nav {
border-radius: 25px;
border-top: 5px solid #1e81b0;
position: absolute;
top: 130px;
left: 0;
z-index: 1;
background-color: rgb(30 30 30 / 75%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: none;
padding-top: 10px;
width: 200px;

}

.subTextColorOverNav{
color:white;
font-weight: 700;
}

.sub-nav li {
margin: 30px 0;
}

.main-nav > li:hover > .sub-nav {
display: block;
}

.sub-sub-nav {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
background-color: rgb(30 30 30 / 75%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: none;
width: 200px;

}

.sub-nav > li:hover > .sub-sub-nav {
display: block;
}

.language-selector {
margin-left: 20px;
}

.language-selector select {
font-size: 16px;
padding: 10px;
background-color: #eeeeee;
border: none;
border-radius: 5px;
}
.sub-nav.is-active {
display: block;
}

.hamburger {
display: none;
}

@media screen and (max-width: 768px) {


nav{
margin-left: 5%;
margin-right: 5%;
}

.main-nav {
display: none;
flex-direction: column;
position: absolute;
top: 145px;
left: 0;
background-color: rgb(24 24 24 / 95%);
width: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.main-nav li {
position: relative;
display: flex;
justify-content: center;
width: 100%;
}



.sub-nav {
display: none;
position: absolute;
top: 100%;
background-color: #1e1d1c;
width: 100%;
box-shadow: 0px 0px;
background-color: rgb(24 24 24 / 95%);
background-color: rgb(118 118 118 / 80%);
padding-left: 0px;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.sub-nav li {
margin: 15px 0;
}

.sub-nav-title {
color: white;

}

.hamburger {
display: block;
background: none;
border: none;
padding: 10px;
cursor: pointer;
}

.hamburger-box {
width: 30px;
height: 24px;
display: inline-block;
position: relative;
}

.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 100%;
height: 2px;
color: white;
background-color: white;
position: absolute;
}

.hamburger-inner::before {
content: "";
top: -8px;
}

.hamburger-inner::after {
content: "";
bottom: -8px;
}


}