.swiper-container,.swiper-container2 {
  height: 95vh;
  position: relative;
  width: 100%;
  min-height: 900px;
  overflow: hidden;
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets{
  left: 2%;
}
.swiper-pagination-bullet{
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
  opacity: .8;
  background-color: var(--color-principal);
}

.swiper-pagination-bullet-active {
  opacity: 1;
    background-color: var(--color-secondary);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  width: 15px;
  height: 15px;
}

.floatCard{
  position: absolute;
  right: 10%;
  top: 5%;
  display: flex;
  align-items: center;
  padding: 33px ;
  justify-content: space-evenly;
  flex-direction: column;
  width: 347px;
    height: 410px;
  border-radius: 20px;
    background: rgba(226, 226, 220, 0.70);
    box-shadow: 7px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.floatCard h3{
  color: #4F6841;
    text-align: center;
  font-family: 'Silk Serif bold',sans-serif;    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 116.874%;
}
.floatCard p {
  font-size: 21.5px;
line-height: 23px;
}

.swiper-slide {
  width: 100%;
  max-width: 100%;

}
.swiper-container .swiper-slide > img ,.swiper-container2 .swiper-slide>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 1400px) {
  .swiper-container,
    .swiper-container2{
      height: 70vh;
      min-height: 700px;
    }
        .floatCard{
          right: 5%;
        }
                                
}
@media only screen and (max-width: 1200px) {
.floatCard img {
  width: 70px;
  margin-bottom: 10px;
}
.floatCard p{
  line-height: 21px;
}

.floatCard{
  padding: 20px;
  height: 330px;
  width: 300px;
}

}

@media only screen and (max-width: 992px) {
  .swiper-container,
    .swiper-container2 {
      height: 40vh;
      min-height: 400px;
    }
}

@media only screen and (max-width: 768px) {

.swiper-container .swiper-slide>img{
    height: 100%;
  }

    .swiper-container{
      min-height: 300px;
    }
     .swiper-container2 {
       height: 400px;
       min-height: auto;
     }
    .floatCard img{
      width: 50px;
    }
  .floatCard{
    border-radius: 0px;
    height: auto;
    width: 100%;
    position: relative;
    right: 0;
    top: 0;
  }
    .floatCard p{
      font-size: 19px;
    }
}

@media only screen and (max-width: 480px) {

  .swiper-container .swiper-slide>img {
      height: 250px;
    }
        .swiper-container{
          margin-top: 20px;
          height: 24vh;
          min-height: 260px;
        }
                .swiper-container2{
                  height: 250px;
                }
                .floatCard h3{
                  font-size: 21px;
                }
}