@import url(navbar.css);
@import url(hero.css);
@import url(about.css);
@import url(footer.css);
@import url(services.css);
@import url(clients.css);
@import url(gallery.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  min-height: 100vh;
  background: 0;
  background-size: cover;
  background-position: center;
  background-color: #dfe2e0;
}

html {
  scroll-behavior: smooth;
  /* ensure anchors land below the fixed navbar (helpful on mobile) */
  scroll-padding-top: 90px;
}

/* Prevent in-page anchors from hiding under fixed navbar */
h1,
h2,
h3,
.hero__title,
.about__h1,
.services__h1 {
  scroll-margin-top: 100px;
}
/* Fade + slide up animation */
@keyframes fadeSlideup {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   SCROLL ANIMATION SYSTEM
========================= */

/* default hidden */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* visible */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* delay utilities */
.delay-1 {
  transition-delay: 0.2s;
}
.delay-2 {
  transition-delay: 0.4s;
}
.delay-3 {
  transition-delay: 0.6s;
}