@keyframes arrowLeft {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(-10px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes arrowRight {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(10px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

#port-experience,
.dynamic-carousel {
  color: white;
  display: grid;
  /* width: 100%; */
}
.bg-orange {
  background-color: var(--primary-color);
}
.bg-blue {
  background-color: var(--blue-color);
}
#port-experience .carousel-image-wrapper,
.dynamic-carousel .carousel-image-wrapper {
  max-width: 100%;
  position: relative;
}
#port-experience .carousel-image-wrapper img,
.dynamic-carousel .carousel-image-wrapper img {
  object-fit: contain;
  max-width: 100%;
}
.content-wrapper-carousel {
  bottom: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: auto;
  padding: 2rem;
}
.carousel-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), var(--blue-color));
}
.button-share {
  z-index: 3;
}
.slide-navigation-item-prev {
  animation: arrowLeft 1.5s ease-in-out infinite;
  height: 100px;
}
.slide-navigation-item-next {
  animation: arrowRight 1.5s ease-in-out infinite;
  height: 100px;
}
#container-reviews .swiper-button-prev,
#container-reviews .swiper-button-next {
  top: 44%;
}

.button-transparent {
  background: transparent;
  border-radius: 25px;
  padding: 8px 10%;
}
.button-transparent-reviews {
  background: transparent;
  border-radius: 25px;
  padding: 2px 10%;
}
.button-blue {
  color: var(--blue-color);
  border: solid 2px var(--blue-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.button-blue:hover {
  background-color: var(--blue-color);
  color: white;
}
.button-orange {
  color: var(--primary-color);
  border: solid 2px var(--primary-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.button-orange:hover {
  background-color: var(--primary-color);
  color: white;
}
.button-white {
  color: white;
  border: solid 2px white;
  transition: background-color 0.5s ease, color 0.5s ease;
}
.button-white:hover {
  background-color: white;
  color: var(--primary-color);
}

.w-75 {
  max-width: 75%;
}
.md-w-auto {
  max-width: 100%;
}
.carousel-content {
  padding: 2rem 1rem;
  row-gap: 1rem;
}
.text-arrows {
  line-height: normal;
}
.wrapper-arrows {
  /* margin-bottom: 2rem; */
}
.content-wrapper-carousel p {
  text-align: justify;
}

/* sm */
@media (min-width: 640px) {
}

/* md 768px  */
@media (min-width: 768px) {
  #port-experience,
  .dynamic-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slide-navigation-item-prev {
    height: auto;
  }
  .slide-navigation-item-next {
    height: auto;
  }
  .carousel-content {
    padding: 0;
    row-gap: 0;
  }
  .w-md-75 {
    max-width: 45%;
  }
  .text-arrows {
    line-height: 55px;
  }
  .wrapper-arrows {
    margin-bottom: 0;
  }
  .content-wrapper-carousel {
    padding: 5rem;
  }
}

/* lg 1024px  */
@media (min-width: 990px) {
  .w-md-75 {
    max-width: 75%;
  }
}

/* xl 1280px  */
@media (min-width: 1280px) {
}

/* 2xl 1536px  */
@media (min-width: 1600px) {
  .max-w-2xl-60 {
    max-width: 60%;
  }
}