body {
  transition: background-color 0.3s ease-in;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.content-box {
  padding: 60px;
  text-align: center;
}

.section.visible .content-box {
  transform: scale(1);
}

.bg-blue {
  background-color: #3394c9;
}

.bg-yellow {
  background-color: #fbad01;
}

.bg-green {
  background-color: #68c03d;
}

.bg-red {
  background-color: #ec6e5f;
}

.bg-gray {
  background-color: #d8d7cc;
}

.text-blue {
  color: #3394c9;
}

.text-yellow {
  color: #f5ad2c;
}

.text-green {
  color: #68c03d;
}

.text-red {
  color: #ec6e5f;
}

.text-gray {
  color: #6e6e72;
}
/* Animation */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-up-active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes frame {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rotate-x-180 {
  transform: rotateX(180deg);
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.perspective-1000 {
  perspective: 1000px;
  perspective-origin: center;
  transition:
    filter 0.8s ease,
    transform 0.8s ease;
}

.perspective-1000.elevated {
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.3));
  transform: scale(1.02);
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card[data-flip-axis="x"] .flip-card-back,
.flip-card:not([data-flip-axis]) .flip-card-back {
  transform: rotateX(180deg);
}

/* For Y-axis flip cards */
.flip-card[data-flip-axis="y"] .flip-card-back {
  transform: rotateY(180deg);
}

.linear-bg {
  background: linear-gradient(
    90deg,
    rgba(13, 147, 255, 0.7) 0%,
    rgba(194, 95, 234, 0.6) 33%,
    rgba(238, 68, 118, 0.7) 66%,
    rgba(237, 109, 16, 0.9) 100%
  );
}