@import "../section-hero/assets/styles.css";
@import "../section-cung/assets/styles.css";
@import "../section-walk/assets/styles.css";
@import "../section-flow/assets/styles.css";
@import "../section-features/assets/styles.css";
@import "../section-moment/assets/styles.css";
@import "../section-experience/assets/styles.css";
@import "../section-summary/assets/styles.css";

[data-fade] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* hướng fade */
[data-fade="up"] {
  transform: translateY(3rem);
}

[data-fade="down"] {
  transform: translateY(-3rem);
}

[data-fade="left"] {
  transform: translateX(3rem);
}

[data-fade="right"] {
  transform: translateX(-3rem);
}

/* khi hiện */
[data-fade].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.wave {
  mix-blend-mode: overlay;
  position: absolute;
}
.child-deco-wave .wave-2 {
  
  top: 228rem;
  width: 30.6875rem;
  height: 82.375rem;
}
.child-deco-wave .wave-3 {
    top: 400rem;
    right:0;
   width: 27.5rem;
   height: 74.125rem;
   z-index:6;
   object-fit: cover;
   mix-blend-mode: overlay;
}
.child-deco-wave .wave-4 {
    top: 535rem;
   z-index:6;
   object-fit: cover;
   mix-blend-mode: overlay;
   width: 20.375rem;
   height: auto;
   left: 0;
}
@media (max-width: 639.98px) {
   .child-deco-wave .wave-2 {
    top: 152rem;
    width: 14.333rem;
    height: 27.67313rem;
  }
  .child-deco-wave .wave-3 {
        top: 331rem;
        /*transform: translateX(1.5rem);*/
        width: 14.05838rem;
      height: 29.50356rem;
    }
  .footer {
    background: transparent;
  }
}