* {
  font-family: var(--font-sans);
}
img {
  max-width: 100%;
}


.container {
  max-width: 1168px;
  margin: auto;
  padding: 0 24px;
  width: 100%;
}

video {
  max-width: 100%;
}
.ic-button {
  background: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-size-6);
  border-radius: 100vw;
  display: inline-flex;
  padding: 1rem 2rem;
}


.visible-md {
  display: none;
  @container style(--is-mq-md) {
    display: block;
  }
}
.visible-sm {
  display: none;
  @container style(--is-mq-mobile) {
    display: block;
  }
}

.hide-sm {
  @container style(--is-mq-mobile) {
    display: none;
  }
}
.hide-md {
  @container style(--is-mq-md) {
    display: none;
  }
}

/* Animation classes for inview effects */
.inview {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.inview.is-inview {
  opacity: 1;
}

.inview.fade-up {
  transform: translateY(40px);
}

.inview.fade-up.is-inview {
  transform: translateY(0);
}

.inview.fade-left {
  transform: translateX(-40px);
}

.inview.fade-left.is-inview {
  transform: translateX(0);
}

.inview.fade-right {
  transform: translateX(40px);
}

.inview.fade-right.is-inview {
  transform: translateX(0);
}

.inview.scale-up {
  transform: scale(0.8);
}

.inview.scale-up.is-inview {
  transform: scale(1);
}

/* Animation delay classes */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }