[x-cloak] {
  display: none !important;
}

body {
  font-family: 'Poppins', sans-serif;
}

.swiper-slide {
  transition: all 0.3s ease;
}

.bg-primary {
  background-color: rgb(12, 39, 82);
}

.bg-footer {
  background-color: rgb(26, 30, 35);
}

.bg-link {
  background-color: rgb(248, 252, 255);
}

.bg-pattern {
  background-color: rgb(238, 244, 248);
}

.flip-horizontal {
  transform: scaleX(-1);
}

/* Lazy Loading */
.section-lazy {
  opacity: 0;
  transform: scale(0.95);
  transition: 
    opacity 0.8s ease-out, 
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

.section-lazy.is-visible {
  opacity: 1;
  transform: scale(1);
}

.fade-up {
  transform: translateY(60px) scale(0.95);
}

.fade-up.is-visible {
  transform: translateY(0) scale(1);
}

.fade-left {
  transform: translateX(-60px) scale(0.95);
}

.fade-left.is-visible {
  transform: translateX(0) scale(1);
}

.fade-right {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: right center;
  filter: blur(4px);
}

.fade-right.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}