.blue-header {
  height: fit-content;
  color: white;
  font-size: 11px;
}
.blue-header-div {
  font-size: 13px;
  color: white;
  background-color: rgb(44, 81, 161);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 5px 0px;
}

.blue-header-div .container {
  font-size: 13px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.blue-header-div .container2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.blue-header-div .container2 a {
  font-size: 14px;
  color: white;
}
.container2 a:first-of-type {
  border-right: 1px solid;
  padding-right: 10px;
}
.container2 a:last-of-type {
  padding-left: 10px;
}
.blue-header-div .container img {
  width: 20px;
}

.white-header {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 5px;
  align-items: center;
}

.img-div img {
  width: 90px;
}

.nav-content {
  background-color: white;
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 70%;
  font-size: 16px;
}

.show-list {
  font-size: 15px;
  background-color: white;
  display: none;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  z-index: 100;
}

.hover-span:hover .show-list {
  display: flex;
}
.nav-content a {
  color: black;
}
.show-list a {
  padding: 7px 10px;
}
.show-list a:hover {
  background-color: lightgray;
}

.menu-bar {
  display: none;
  margin-left: 50%;
  position: absolute;
  right: 270px;
}
.menu-bar img {
  width: 40px;
  cursor: pointer;
}
.menu-list {
  width: fit-content;
  min-height: 100vh;
  max-height: fit-content;
  background-color: white;
  position: fixed;
  overflow: auto;
  top: 0px;
  left: 0%;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: start;
  padding: 10% 5%;
  font-size: 25px;
  font-weight: 700;
  color: black;
  animation: menuAnimaation 0.7s ease;
}
@keyframes menuAnimaation {
  from {
    left: -40%;
  }
  to {
    left: 0%;
  }
}
.menu-list a {
  font-size: 25px;
  font-weight: 700;
}
.inner-drop-down {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  width: 100%;
}
.inner-drop-down img {
  cursor: pointer;
}

.menu-list img {
  /* position: absolute; */
  left: 90%;
  translate: 0% 10%;
  width: 18px;
}

.cross {
  cursor: pointer;
  position: absolute;
  top: 3%;
  right: 15%;
}

.cross img {
  width: 40px;
}
.studyList {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 0px;
  line-height: 0px;
}
.studyLink:hover ~ .studyList {
  display: flex;
}
.studyList:hover {
  display: flex;
}
.cuestionList {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 0px;
  line-height: 0px;
}
.cuestionList a,
.studyList a {
  font-size: 18px;
}
.cuestionLink:hover ~ .cuestionList {
  display: flex;
}
.cuestionList:hover {
  display: flex;
}
.drop-down {
  width: 200px;
  border: 2px solid black;
  top: 50%;
  display: flex;
  flex-direction: column;
}
.drop-button {
  cursor: pointer;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
}
.lang-list {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  position: absolute;
  top: 100px;
  z-index: 100;
  width: 200px;
  background-color: white;
  padding: 5px 15px;
}
#up {
  display: none;
}
#down {
  display: flex;
}
@media (max-width: 1200px) {
  .nav-content {
    display: none;
  }
  .menu-bar {
    display: flex;
  }
  .white-header {
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media (max-width: 1150px) {
  .blue-header-div {
    font-size: 9px;
    gap: 20px;
  }
  .blue-header-div .container {
    font-size: 9px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  .container2 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container2 a {
    margin-top: 10%;
    font-size: 20px;
  }
  .container2 a:first-of-type {
    border-right: 3px solid;
  }
}
@media (max-width: 770px) {
  .blue-header-div {
    display: none;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 5px;
    padding: 15px 0px;
    padding-left: 5%;
  }
  .white-header {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .lang-list {
    top: 60px;
  }
}
@media (max-width: 770px) {
  .menu-bar {
    right: 200px;
  }
  .menu-bar img {
    width: 30px;
    cursor: pointer;
  }
  .drop-down {
    width: 150px;
    border: 1px solid black;
  }
  .drop-button {
    padding: 2px 0px;
    justify-content: space-around;
  }
  .lang-list {
    width: 150px;
    padding: 2px 4px;
  }
}

@media (max-width: 500px) {
  .menu-bar {
    right: 130px;
  }
  .menu-bar img {
    width: 20px;
  }
  .drop-down {
    width: 100px;
    border: 2px solid black;
  }
  .drop-button {
    font-size: small;
    padding: 1px 0px;
    justify-content: space-around;
  }
  .lang-list {
    width: 100px;
    padding: 2px 0px;
    padding-left: 4px;
  }
  .lang-list a {
    font-size: small;
  }
  .menu-list a {
    font-size: 15px;
    font-weight: 700;
  }
  .cross img {
    width: 25px;
  }
  .menu-list img {
    position: absolute;
    left: 90%;
    translate: 0% 10%;
    width: 10px;
  }
  .menu-list img:first-child {
    width: 20px;
  }
}