@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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


.service-row {
  position: relative;
  margin-bottom: 2vh; /* Configurable whitespace between rows */
  overflow: hidden; /* This will contain the animations within the service rows */

}

.background-image-servizi {
  height: 70vh; /* Adjusted for viewport height */
  background-size: cover;
  position: relative;
}

.text-overlay {
  position: absolute;
  background-color: rgba(254, 254, 254, 0.7);
  color: #2b2863;
  padding: 1vw; /* Scaled padding */
  border-radius: 1vh; /* Scaled border radius */
  margin: 1vw; /* Scaled margin */
  width: auto;
  max-width: 40vw; /* Adjusted for viewport width */
}

/* For top-left aligned text overlay */
.text-overlay.top-left {
  top: 10vh;
  left: 5vw; /* Adjusted for consistency */
  /*transform: translateY(-10%);*/
}

/* For bottom-right aligned text overlay (Mirrored Even Layout) */
.text-overlay.bottom-right {
  bottom: 10vh;
  right: 5vw; /* Adjusted for consistency */
  /*transform: translateY(10%);*/
}

.images-vertical-right, .images-vertical-left {
  position: absolute;
  top: 5vh; /* Adjusted for viewport height */
  display: flex;
  flex-direction: column;
}
.images-vertical-right img {
    object-fit: cover;
    object-position: center; /* Adjust if you want to focus on a specific part of the image */
}
.images-vertical-left img {
    object-fit: cover;
    object-position: center; /* Adjust if you want to focus on a specific part of the image */
}
.special-position {
    object-position: top; /* Adjusts the vertical alignment to be higher */
}
.images-vertical-right { right: 5vw; }
.images-vertical-left { left: 5vw; }

.animated-image {
  //max-height: 18vh; /* Adjusted for viewport height */
  width: auto;
  margin-bottom: 1vh; /* Scaled margin */
}

.btn-servizi {
  position: absolute;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 0.5vh; /* Scaled border-radius */
  opacity: 0; /* Start transparent */
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 3.5s;
  max-width: 30vw; /* Adjusted for viewport width */
  bottom: 5vh; /* Adjusted for viewport height */
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
}

.animated-image, .animated-text, .animated-text2 {
  opacity: 0; /* Start elements as hidden */
  animation: slideInFromRight 1s ease-out forwards;
}

.animated-text, .animated-text2 {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 1.5s;
}

.card-grey {
  background-color: rgba(254, 254, 254, 0.7);
  color: #2b2863;
  padding: 1vw;
  border-radius: 1vh;
}
.px-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.object-fit-cover {
  max-width:250px!important;
  object-fit: cover;
  object-position: center;
}