/* Base styles for the title */
.der-sprachen-offers-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Space between spans */
  font-size: 2rem; /* Base size for the h2 */
  animation: sway 2.5s infinite ease-in-out; /* New sway animation */
}

/* Default span styles */
.der-sprachen-offers-title span {
  display: inline-block;
  transition: all 0.3s ease-in-out; /* Smooth transition for hover or other effects */
}

/* Style for the first span */
.der-sprachen-offers-title span:nth-child(1) {
  color: #6aa121;
}

/* Style for the second span */
.der-sprachen-offers-title span:nth-child(2) {
  color: #000000;
}

/* Keyframes for swaying left and right */
@keyframes sway {
  0%, 100% {
      transform: translateX(0); /* Starting position */
  }
  25% {
      transform: translateX(-10px); /* Move slightly left */
  }
  75% {
      transform: translateX(10px); /* Move slightly right */
  }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .der-sprachen-offers-title {
      font-size: 1.8rem; /* Slightly smaller for large screens */
  }
  @keyframes sway {
      0%, 100% {
          transform: translateX(0);
      }
      25% {
          transform: translateX(-8px); /* Reduced movement */
      }
      75% {
          transform: translateX(8px);
      }
  }
}

@media (max-width: 992px) {
  .der-sprachen-offers-title {
      font-size: 1.6rem; /* Medium screens */
  }
  @keyframes sway {
      0%, 100% {
          transform: translateX(0);
      }
      25% {
          transform: translateX(-6px);
      }
      75% {
          transform: translateX(6px);
      }
  }
}

@media (max-width: 768px) {
  .der-sprachen-offers-title {
      flex-direction: column; /* Stack spans vertically on smaller screens */
      gap: 5px;
      font-size: 1.4rem; /* Tablets */
  }
  @keyframes sway {
      0%, 100% {
          transform: translateX(0);
      }
      25% {
          transform: translateX(-5px);
      }
      75% {
          transform: translateX(5px);
      }
  }
}

@media (max-width: 576px) {
  .der-sprachen-offers-title {
      font-size: 1.2rem; /* Mobile */
  }
  @keyframes sway {
      0%, 100% {
          transform: translateX(0);
      }
      25% {
          transform: translateX(-4px);
      }
      75% {
          transform: translateX(4px);
      }
  }
}