@import "../../constant.css";

/* header */
.header-root {
  display: flex;
  margin: 4% 5% 0 7%;
  height: 5vw;
  align-items: center;

  @media (min-width: 799px) {
    justify-content: space-between;
  }
  @media (max-width: 799px) {
    margin: 8% 5% 0 7.5%;
  }
}

.header-logo {
  width: fit-content;
  height: 100%;
  max-height: 60px;
  min-height: 30px;
  @media (max-width: 799px) {
    min-height: 0;
    max-height: 600px;
    min-width: 90px;
    width: 23vw;
    height: fit-content;
  }
}

.menu-container {
  @media (min-width: 799px) {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
  }
  @media (max-width: 799px) {
    position: fixed;
    background-color: var(--white);
    z-index: 10;
    flex-direction: column;
    height: 100vh;
    width: 40vw;
    right: 0;
    top: 0;
    display: none;
    padding: 10% 5%;
  }
}

.shown {
  display: flex;
  align-items: flex-end;
}

.mobile {
  @media (min-width: 799px) {
    display: none;
  }
}

header a {
  color: white;
  font-size: 1.2rem;
  padding: 0% 3%;
  border-right: white solid 2px;
  text-wrap: nowrap;
  @media (max-width: 799px) {
    font-size: 14px;
    border-style: none;
    color: var(--blue);
    margin: 7% 0;
    width: 100%;
  }
}

header i {
  @media (max-width: 799px) {
    font-size: 18px;
  }
}

header a div:hover {
  opacity: 0.6;
}

header a i:hover {
  opacity: 0.6;
}

.lang-button {
  display: none;
}

/* footer */
.footer-root {
  padding: 4%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  background-color: var(--primary);
  /* flex-wrap: wrap; */
}

.app-store-button-container {
  display: flex;
  height: 1em;
  background-color: black;
  padding: 0.7em;
  /* border: 0.5px solid #bcbcbc; */
  border-radius: 0.5em;
  align-items: center;
}
.footer-rectangle-button {
  padding: 0.5em;
  height: fit-content;
  max-width: fit-content;
  min-width: min-content;
  margin-left: 0.5em;
  margin-top: 0.5em;
}

.footer-rectangle-button:hover {
  opacity: 0.6;
}

.ins-icon {
  font-size: 2em;
  color: white;
  margin-right: 0.8em;
}