/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

/* Carousel Animation */
.carousel-item {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.carousel-item.active {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Modal Animation */
.modal.fade .modal-dialog {
    transform: translateY(-50px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}


/* Spin Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Apply spin animation on page load */
.spin-on-load {
    animation: spin 2s ease-in-out; /* Spin once on page load */
}

/* Apply spin animation on hover (desktop) or touch (mobile) */
.spin-on-touch:hover, .spin-on-touch:active {
    animation: spin 2s ease-in-out; /* Spin on hover or touch */
}

/* Fade-in Animation for Portfolio Items */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-item {
    animation: fadeIn 0.5s ease-out;
}





/* Fade-in Animation for About page*/
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#our-story, #our-team, #our-values, #cta {
    animation: fadeIn 1s ease-out;
}



#adPopup .modal-content {
    animation: fadeInUp 0.5s ease-out;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }