body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

.gradient-primary {
  background: #3866a0;
  background: linear-gradient(
    90deg,
    rgba(56, 102, 160, 1) 0%,
    rgba(7, 164, 219, 1) 50%,
    rgba(63, 183, 186, 1) 100%
  );
}

.gradient-text {
  background-image: linear-gradient(
    90deg,
    rgba(50, 95, 175, 1) 0%,
    rgba(7, 164, 219, 1) 50%,
    rgba(63, 183, 186, 1) 100%
  );

  /* 2. Clip the background to the text shape (standard property) */
  background-clip: text;

  /* 3. Make the text transparent so the background is visible */
  color: transparent;
}

.gradient-bg {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.container-img {
  position: relative;
  overflow: hidden;
}

.container-img img {
  height: 360px;
}

.moving-image {
  position: absolute;
  /* Apply the animation */
  animation: slideIn 0.5s ease-in forwards;
}

.moving-image-2 {
  position: absolute;
  /* Apply the animation */
  animation: slideIn2 0.5s ease-in forwards;
}

.moving-image-3 {
  position: absolute;
  /* Apply the animation */
  animation: slideIn3 0.5s ease-in forwards;
}

/* Define the movement */
@keyframes slideIn {
  0% {
    transform: translate(-50px, -50px);
    /* Starting position */
  }

  100% {
    transform: translate(150px, 50px);
    /* Ending position */
  }
}

/* Define the movement */
@keyframes slideIn2 {
  0% {
    transform: translate(-50px, 0px);
    /* Starting position */
  }

  100% {
    transform: translate(0px, 0px);
    /* Ending position */
  }
}

/* Define the movement */
@keyframes slideIn3 {
  0% {
    transform: translate(-50px, 0px);
    /* Starting position */
  }

  100% {
    transform: translate(350px, 100px);
    /* Ending position */
  }
}