/* ================================
   PROFESSIONAL ANIMATIONS
   ================================ */

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.7s ease forwards;
}

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


/* Split sections with image */
.section-with-image {
    display: flex;
    gap: 40px;
    align-items: center;
}

.section-image img {
    width: 100%;
    max-width: 480px;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Light background sections */
.section-light {
    background-color: #f5f6f7;
}

/* Card images */
.card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* Responsive fix */
@media (max-width: 768px) {
    .section-with-image {
        flex-direction: column;
        text-align: center;
    }
}