header {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 200;
  transform: translateY(0);
  transition: transform 0.4s ease-in-out;
}

header.header-hidden {
  transform: translateY(-100%);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(30px, 18vw, 300px);
  background-color: #F5F5F5;
}

.hello {
  min-width: max-content;
}

.menu {
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  justify-content: end;
}

.hello a:hover,
.menu a:hover,
.link:hover {
  opacity: 0.4;
  transition: opacity 0.4s ease-in-out;
}

footer {
  padding: clamp(130px, 16vw, 300px) clamp(30px, 18vw, 300px) clamp(120px, 10vw, 150px);
  padding-bottom: calc(clamp(120px, 10vw, 150px) + env(safe-area-inset-bottom, 0px));
  background-color: #231610;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100dvh;
}

.cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

footer img {
  width: clamp(100px, 7vw, 120px);
  height: auto;
  border-radius: 0px;
  cursor: pointer;
}



@media (min-width: 1921px) and (max-width: 2560px) {
  .header {
    padding: 50px clamp(550px, 18vw, 700px);
  }

  .menu {
    gap: clamp(40px, 2.5vw, 50px);
  }  

  footer {
    padding: clamp(260px, 20vw, 360px) clamp(550px, 18vw, 700px) clamp(200px, 10vw, 260px);
  }

  footer img {
    width: clamp(170px, 7vw, 200px)
  }
}

@media (max-width: 1728px) {
  footer {
    padding: clamp(130px, 20vw, 300px) clamp(30px, 18vw, 300px) clamp(120px, 10vw, 150px);
  }
}

@media (max-width: 1440px) {
  footer {
    padding: clamp(130px, 18vw, 300px) clamp(30px, 18vw, 300px) clamp(120px, 10vw, 150px);
  }
}

@media (max-width: 1280px) {
  .header {
    padding: 30px clamp(30px, 18vw, 200px);
  }

  footer {
    padding: clamp(130px, 16vw, 200px) clamp(30px, 18vw, 200px) clamp(120px, 10vw, 150px);
  }
}

@media (max-width: 1024px) {
  footer {
    padding: clamp(100px, 18vw, 200px) clamp(30px, 18vw, 200px);
    padding-bottom: calc(clamp(100px, 18vw, 200px) + env(safe-area-inset-bottom, 0px));
    min-height: 70dvh;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 30px clamp(30px, 18vw, 80px);
  }

  footer {
    padding: clamp(150px, 18vw, 200px) clamp(30px, 18vw, 80px);
    padding-bottom: calc(clamp(150px, 18vw, 200px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 500px) {
  .header {
    flex-direction: column;
    padding: 30px clamp(20px, 18vw, 40px);
    gap: clamp(18px, 2.5vw, 22px);
  }

  footer {
    padding: clamp(150px, 18vw, 200px) clamp(20px, 18vw, 40px);
    padding-bottom: calc(clamp(150px, 18vw, 200px) + env(safe-area-inset-bottom, 0px));
    min-height: 70dvh;
  }

  .cta {
    padding: 0px clamp(20px, 14vw, 50px) 120px;
  }

  .contact {
    flex-direction: column;
    gap: 30px;
  }

  footer .menu {
    align-items: center;
  }
}