/* GENERAL */
body {
  font-family: "Fustat", sans-serif;
  background: var(--backgroundbackground-2);
  color: var(--paragraphparagraph-1);
}

/* NAV */
.nav {
  padding: 32px 40px;
  display: flex;
  align-items: center;
  position: absolute;
}

.nav .logo {
  width: 180px;
}

/* HERO */
.hero {
  background: url("img/Coming-soon-background-image.jpg") center/cover no-repeat;
  padding: 160px 40px 80px;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  max-width: 100%;
  margin: auto;
}

.hero-text h1 {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 70px;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-text p {
  font-size: 24px;
  line-height: 32px;
  max-width: 580px;
}

/* BUTTONS */
.buttons {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}

.btn {
  padding: 18px 34px;
  background: var(--accentaccent-4);
  color: white;
  font-size: 20px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
}

/* HERO IMAGE */
.hero-image img {
  width: 550px;
  max-width: 100%;
}

/* FOOTER */
.footer {
  background: var(--accentaccent-3);
}

.footer-top {
  max-width: 100%;
  margin: auto;
  display: flex;
}

.footer-logo {
  width: 34%;
  padding: 40px;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  padding: 40px;
}

.footer-info span {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.footer-info a {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color:white;
  text-decoration:underline;
}

.footer-mail {
  display:flex;
  flex-direction: column;
  gap: 5px;
}

.footer-insta {
  display:flex;
  flex-direction: column;
  gap: 5px;
}

.footer-right {
  text-align: left;
  font-size: 18px;
  width: 100%;
  padding: 40px;
  line-height: 1.4em;
}

.footer-links {
  display: flex;
  max-width: 100%;
  margin: auto;
}

.footer-links-insta {
  padding:40px;
  width:100%;
  background: var(--accentaccent-4);
}

.footer-links-email {
  padding:40px;
  width:100%;
  background: var(--backgroundbackground-2);
}

.footer-links-signup {
  padding:40px;
  width:100%;
  background: var(--accentaccent-2);
}

.footer-links a {
  color: white;
  font-size: 20px;
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero {
    background: url("img/Coming-soon-background-image-mobile.jpg") center/cover no-repeat;
  }
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  .buttons {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 170px 25px 35px 25px;
    background: url("img/Coming-soon-background-image-mobile.jpg") center/cover no-repeat;
  }
  .hero-text h1 {
    font-size: 48px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .footer-logo {
    width:100%;
    padding:40px 110px 0px 110px;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 0px;
    text-align: center;
  }

  .footer-right {
    text-align:center;
    padding: 0px 40px 40px;

  }

  .footer-info {
    padding: 10px 0px;
  }
}

/* START HIDDEN */
.animate-up {
  opacity: 0;
  transform: translateY(40px);
}

/* ACTIVE WHEN IN VIEW */
.animate-up.in-view {
  animation: slideUpFade 0.9s ease-out forwards;
}

/* KEYFRAMES */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STAGGERED DELAYS */
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }