/* carousel-container animation */
@keyframes growElastic {
    0% {
      transform: scale(0.5);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .carousel-container {
    animation: growElastic 1s ease-out;
    /* Existing styles for .carousel-container */
  }
  
/* horizontal-grid animation */
/* Container styling */
.horizontal-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; /* Add some space between the elements */
}

/* Grid item styling */
.grid-item {
  flex: 1;
  max-width: 30%; /* Keep the original size */
  box-sizing: border-box;
  opacity: 0; /* Start hidden */
  transform: translateY(20px); /* Start from 20px below */
  transition: opacity 1s, transform 1s; /* Transition settings */
}

.grid-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay for each subsequent grid item */
.grid-item:nth-child(1) {
  transition-delay: 0.2s; /* Delay for the first item */
}

.grid-item:nth-child(2) {
  transition-delay: 0.4s; /* Delay for the second item */
}

.grid-item:nth-child(3) {
  transition-delay: 0.6s; /* Delay for the third item */
}

/* Responsive adjustment - Existing styles should remain the same */
@media (max-width: 768px) {
  .grid-item {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .grid-item {
    max-width: 100%;
  }
}

/* bold-line and logo-slider-container animation */
/* Bold-line and logo-slider-container initial state */
.bold-line, .logo-slider-container {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s, transform 1s;
}

.bold-line.visible, .logo-slider-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* horizontal-grid news-section animation */
/* Initial state of news elements */
.news-header-box, .news-item {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth opacity and transform animation */
}

.news-header-box.visible, .news-item.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

/* Responsive adjustment and staggered animation delay */
@media (max-width: 768px) {
  .news-header-box.visible {
    transition-delay: 0s; /* No delay for the first element */
  }

  .news-item:nth-child(2).visible {
    transition-delay: 0.2s; /* Delay for the second element */
  }
  
  .news-item:nth-child(3).visible {
    transition-delay: 0.4s; /* Delay for the third element */
  }

  .news-item:nth-child(4).visible {
    transition-delay: 0.6s; /* Delay for the fourth element */
  }
}

/* solutions-services (image-wrapper1 left-image) animation */
/* Initial state for the elements */
.solutions-services, .image-wrapper1 {
  opacity: 0;
  transform: translateX(20px); /* Start 20px to the left */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.solutions-services.visible, .image-wrapper1.visible {
  opacity: 1;
  transform: translateX(0); /* Move to the original position */
}

/* Staggered animation delay for responsive design */
@media (max-width: 768px) {
  .solutions-services {
    transition-delay: 0s; /* No delay for the first element */
  }

  .image-wrapper1 {
    transition-delay: 0.2s; /* Slight delay for the second element */
  }
}

/*image-wrapper2.right-image animation*/
/* Initial state for the right-image element */
.image-wrapper2.right-image {
  opacity: 0;
  transform: translateX(-40px); /* Start 20px to the right */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.image-wrapper2.right-image.visible {
  opacity: 1;
  transform: translateX(0); /* Move to the original position */
}


/*principals-product animation*/
/* Initial state for the elements */
.principals-product, .logo-container {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.principals-product.visible, .logo-container.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}


/*certifications animation*/
/* Initial state for the elements */
.certifications, .cert-item {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.certifications.visible, .cert-item.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

/*image-container animation*/
/* Initial state for images */
.image-wrapper img {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

/* Initial state for text boxes */
.text-box, .text-box-2 {
  opacity: 0;
  transform: scale(0.5); /* Start smaller */
  transform-origin: center; /* Make sure it scales from the center */
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Elastic-like transition */
}

.image-wrapper.visible img {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

.image-wrapper.visible .text-box, .image-wrapper.visible .text-box-2 {
  opacity: 1;
  transform: scale(1); /* Grow to original size */
}

/*About us carousel-wrapper*/
/* Initial state for the carousel wrapper */
.carousel-wrapper {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.carousel-wrapper.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

/* Initial state for the about-carousel-text */
.about-carousel-text {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.about-carousel-text.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}


/*History Section and Pilars of services animation */
/* Initial state for the elements */
.history-section, .history-section p, .pilar, .new-pilar-item {
  opacity: 0;
  transform: translateY(20px); /* Start 20px below */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.history-section.visible, 
.history-section p.visible, 
.pilar.visible, 
.new-pilar-item.visible {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}

/*business-divisions-section animation*/
/* Keyframes for the grow elastic animation */
@keyframes growElastic {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Keyframes for the down to up animation */
@keyframes downToUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Initially hide elements */
.is-hidden {
  opacity: 0;
}

/* Animation classes that will be added dynamically */
.animate-grow {
  animation: growElastic 1s ease-out forwards;
}

.animate-up {
  animation: downToUp 1s ease-out forwards;
}

/*Contact-us animation*/
/* Keyframes for the map slide-out from left animation */
@keyframes slideOutLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Keyframes for the contact info slide-out from right animation */
@keyframes slideOutRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Initially hide elements */
.is-hidden {
  opacity: 0;
}

/* Animation classes that will be added dynamically */
.map-section.animate-slide-out-left {
  animation: slideOutLeft 1s ease-out forwards;
}

.contact-info.animate-slide-out-right {
  animation: slideOutRight 1s ease-out forwards;
}