.swiper {
      width: 100%;
      padding: 20px 0;
    }

    .swiper-slide {
     /* background: #f0f0f0;
      border-radius: 8px;*/
      text-align: center;
      padding: 10px;
      height: 200px;
     /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
      transform: scale(0.95);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    /* Instead of this: */
.swiper2 .swiper-slide {
  opacity: 0;
}

/* Do this: */
.swiper2 .swiper-slide {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.swiper2 .swiper-slide-visible {
  opacity: 1;
  transform: scale(1);
}

  /*.swiper2 .swiper-slide{*/
  /*    opacity: 0;*/
  /*  }*/
  
    .swiper .swiper-slide-active{
    /*, .swiper2 .swiper-slide-active{*/
      opacity: 1;
      transform: scale(1);
    }

    .swiper2 .swiper-slide-active{
      width: 100% !important;
  margin: 0 !important;
    }

    .slide-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    transition: all .4s ease-in-out;
    }

    .slide-content {
      margin-top: 10px;
      font-weight: bold;
    }

    /* Shared navigation styles */
    .navigation-buttons {
      text-align: center;
      margin-top: 10px;
    }

    .swiper-button-prev,
    .swiper-button-next {
      color: #fff;
    }

    .swiper-button-next::after, .swiper-button-prev::after {
font-size: 22px;
}
    .swiper2{
    left: calc(27% + 440px - 0.5vw);
    position: absolute;
    top: 28%;
    max-width: calc(-65% + 100vw);
    }


.swiper2 .slide-content{
  text-align: left;
}

.swiper2 .slide-content h4{
color: var(--bs-white);
font-size: 28px;
font-weight: 600;
}

.swiper2 .slide-content p{
  color: var(--bs-white);
   font-size: 15px;
   font-weight: 500;
}

.swiper2 .slide-content a{
  text-decoration: none;
  color: var(--primary-color2);
  font-size: 15px;
}

  .swiper1 .swiper-wrapper {
  align-items: end;
  height: 400px;
}

.swiper-wrapper .swiper-slide h5{
position: absolute;
height: 100%;
display: flex;
align-items: end;
bottom: 10px;
font-weight: 600;
color: var(--bs-white);
left: 18px;
text-shadow: 0 0 4px #222;
z-index: 99;
}


@media only screen and (min-width: 1024px) {

  .swiper1 .swiper-slide.swiper-slide-next{
     width: 400px !important;
    height: 400px !important;
    transition: all .4s ease-in-out;
    margin-right: 5px !important;
  }

  .swiper1 .swiper-slide.swiper-slide-next img{
    object-fit: cover;
    height: 100%;
    clip-path: polygon(93.85% 100%,0 100%,0 0,93.85% 0,93.85% 6.62%,100% 11.01%,94.35% 16.03%);
  }


}