.swiper-button-next,
 .swiper-button-prev {
     background-color: white;
     padding: 24px;
     font-size: 12px !important;
     color: #000 !important;
     fill: black !important;
     stroke: black !important;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
     background-color: #df6527;
     color: white !important;
 }


 .img {
     transition: 5s all;
     transform: scale(1.2);
 }


 .swiper-slide-active .img {
     animation: scale 5s ease forwards;
 }

 @keyframes scale {
     0% {
         transform: scale(1);
     }

     100% {
         transform: scale(1.2);
     }
 }

 .caption {
     text-shadow: 1px 1px 0px #000;
 }

 .first-image,
 .second-image {
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
     transition: transform 0.8s ease-in-out;
 }

 .second-image {
     transform: translateX(100%);
 }

 .image-wrapper:hover .first-image {
     transform: translateX(-100%);
 }

 .image-wrapper:hover .second-image {
     transform: translateX(0%);
 }


 .image1,
 .image2 {
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
     transition: transform 0.8s ease-in-out;
 }


 .image2 {
     transform: translateX(100%);
 }

 .image-wrapper1:hover .image1 {
     transform: translateX(-100%);
 }

 .image-wrapper1:hover .image2 {
     transform: translateX(0%);
 }

 .first-image1 {
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
     transition: transform 0.5s ease-in-out;
 }


 .image-wrapper2:hover .first-image1 {
     transform: translateX(-100%);
 }