/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/

#clients .container {
   --bs-gutter-x: 0;
}

.clients {
   /* padding-top: 225px; */
   /* background: url("../img/about-bg.png") top center no-repeat; */
   position: relative;
   z-index: 100;
   top: 330px;
}

.clients .swiper-slide {
   perspective: 1000px;
   padding: 40px 30px;
   position: relative;
   overflow: hidden;
   /* background: #fd0101; */
   /* background: #e4ebee; */
   background: #eafce9;
   /* box-shadow: 5px 10px 29px 0 rgba(68, 88, 144, 0.2); */
   /* box-shadow: 5px 10px 29px 0 rgba(14, 234, 6, 0.2); */
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

   transition: all 0.3s ease-in-out;
   border-radius: 10px;
}

.clients .icon {
   margin: 0 auto 20px auto;
   display: inline-block;
   text-align: center;
}

.clients .icon i {
   font-size: 36px;
   line-height: 1;
   color: #a60303e6;
   /*tochange*/
}

.clients .title {
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 18px;
}


.clients .title a {
   color: rgba(3, 85, 30, 0.997);
   /*changed*/
}

.client_div {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.client_title {
   color: #04561f;
   margin: 10px auto;
   padding: 10px 0px;
   text-align: center;
   font-size: 21px;
   font-weight: bold;
   height: 70px;
}

.client_box:hover {
   /* border: 1px solid green; */
   box-shadow: 0 2px 15px rgba(0, 0, 0, 20%);
   transform: translateY(-5px);
   transition-duration: 0.3s;
   background-color: #36a35a;
   border-radius: 10px;
   color: white;
}

.client_box:hover .client_title {
   color: white;
}

.client_div:hover {
   /* background-color: #04561f; */
}

.client_img {
   width: fit-content;
   width: calc(100% - 4px);
   padding: 10px 0;
   margin: 10px auto;
   max-width: 100%;
}
@media (max-width:768px) {
   .client_title {
      margin-bottom: -35px;
      /* padding-top: 0px; */
   }
   .client_img {
      width: calc(60% - 4px);
      margin-bottom: 35px;
      display: flex;
      margin-bottom: 20px;
   }
}

.clients .description {
   text-align: justify;
   font-size: 15px;
   line-height: 28px;
   margin-bottom: 0;
   color: #777777;
   /* margin-top: 3%; */
}

.clients .description a {

   color: #1cce00;
   /*tochange*/
}

.clients .swiper-pagination {
   margin-top: 20px;
   position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background-color: #fff;
   opacity: 1;
   border: 1px solid #e80808;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
   background-color: #e80808;
}


#clients .card-flipper {
   position: relative;
   width: 100%;
   height: 555px;
   transform-style: preserve-3d;
   transition: transform 0.5s;
}

#clients .card-back .title {
   display: none;
}



@media screen and (min-width: 480px) {
   #clients .card-flipper {
      position: relative;
      width: 100%;
      height: 300px;
      transform-style: preserve-3d;
      transition: transform 0.5s;
   }

   #clients .card-back .title {
      display: block;
   }

   #clients .card-front {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
   }

   #clients .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
   }

   #clients .card-front {
      /* background-color: #f1f1f1; */
      transform: rotateY(0);
   }

   #clients .card-back {
      /* background-color: #eaeaea; */
      transform: rotateY(180deg);
   }

   #clients .card-flip-container:hover:not(.actived) .card-flipper,
   #clients .swiper-wrapper .actived .card-flipper {
      transform: rotateY(180deg);
   }
}