/* buat swiper testimoni home */

.swipetestimoni .swiper-wrapper {

    align-items: flex-end;
}
.swipetestimonibesar .swiper-wrapper {

    align-items: flex-end;
}

  .swiper-pagination-testi,.swiper-pagination-testi2 {
    position: relative;
    text-align: center;padding-top:60px;
    transition: 0.3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
  }

  .swipetestimoni,.swipetestimoni2 {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .swipetestimoni .swiper-slide {

    opacity: 0.4;
  }
  .swipetestimoni .swiper-slide-thumb-active {
    opacity: 1; 
  }

  .swipetestimoni2 .swiper-slide {

    opacity: 0.4;
  }
  .swipetestimoni2 .swiper-slide-thumb-active {
    opacity: 1; 
  }

  @media (min-width:768px) {
    .swipetestimoni .swiper-slide  {
      height:400px;
    }
    .swipetestimoni .swiper-slider img {
      object-fit:cover;
    }
    .swipetestimoni .swiper-slide-thumb-active  { 
      height:600px; object-fit:cover;
    }
      .swipetestimoni .swiper-slide-thumb-active img  { 
    object-fit:cover;width:100%;height:100%;
    }

  }


    .swipetestimonial .swiper-slide {
  
      opacity: 0.4;
    }
    .swipetestimonial .swiper-slide-active {
      opacity: 1; 
    }

    
.swiper-button-nexttesti,
  .swiper-button-prevtesti {
  position: absolute;
  bottom: 10%;
  width: 20px;
  height: 20px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #013764;background-color:#fff;padding:20px;border-radius:20px;
}

.swiper-button-nexttesti.swiper-button-disabled,
  .swiper-button-prevtesti.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-nexttesti:after,
  .swiper-button-prevtesti:after {
  font-family: swiper-icons;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prevtesti {
  right: 15%;
  left: auto;
}

.swiper-button-prevtesti:after {
  content: "prev";
}


.swiper-button-nexttesti {
  right: 10%;
  left: auto;
}

.swiper-button-nexttesti:after {
  content: "next";
}


.swiper-button-nexttesti2,
  .swiper-button-prevtesti2 {
  position: absolute;
  bottom: 10%;
  width: 20px;
  height: 20px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #013764;background-color:#fff;padding:20px;border-radius:20px;
}

.swiper-button-nexttesti2.swiper-button-disabled,
  .swiper-button-prevtesti2.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-nexttesti2:after,
  .swiper-button-prevtesti2:after {
  font-family: swiper-icons;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prevtesti2 {
  right: 15%;
  left: auto;
}

.swiper-button-prevtesti2:after {
  content: "prev";
}

.swiper-button-nexttesti2 {
  right: 10%;
  left: auto;
}

.swiper-button-nexttesti2:after {
  content: "next";
}


.swipercoverflow .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 700px;
    
    }

 .swipercoverflow .swiper-slide img {
      display: block;
      width: 100%;
    }



    .swipercoverflow .swiper-slide {
  
      opacity: 0.4;
    }
    .swipercoverflow .swiper-slide-active {
      opacity: 1; 
    }

.swiper-button-nextgal,
  .swiper-button-prevgal {
  position: absolute;
  bottom: 50%;
  width: 20px;
  height: 20px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #013764;background-color:#fff;padding:20px;border-radius:20px;
}

.swiper-button-nextgal.swiper-button-disabled,
  .swiper-button-prevgal.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-nextgal:after,
  .swiper-button-prevgal:after {
  font-family: swiper-icons;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}



.swiper-button-prevgal:after {
  content: "prev";
}



.swiper-button-nextgal:after {
  content: "next";
}


.swiper-button-nextbox,
.swiper-button-prevbox {
  position: absolute;
  bottom: 40%;
  width: 40px;
  height: 40px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: flex; /* Add this to use flexbox */
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
}

.swiper-button-nextbox:hover,
.swiper-button-prevbox:hover {

  transform: scale(1.1);
}

.swiper-button-nextbox.swiper-button-disabled,
.swiper-button-prevbox.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-nextbox::before,
.swiper-button-prevbox::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url('images/vector.png');
  background-size: contain;
  background-repeat: no-repeat;
   vertical-align: middle; /* Add this to vertically center the arrow */
}

.swiper-button-prevbox::before {
  transform: rotate(180deg) translateY(60%); /* Rotate and move up by half of height */
}




@media (max-width:767px) {
.swiper-button-prevgal {
  left: 5px;
  right: auto;
}
.swiper-button-nextgal {
  right: 5px;
  left: auto;
}

.swiper-button-prevbox {
  left: 5px;
  right: auto;
}
.swiper-button-nextbox {
  right: 5px;
  left: auto;
}


}
@media (min-width:768px) and (max-width:1023px) {
.swiper-button-prevgal {
  left: 5%;
  right: auto;
}
.swiper-button-nextgal {
  right: 5%;
  left: auto;
}
.swiper-button-prevbox {
  left: 5%;
  right: auto;
}
.swiper-button-nextbox {
  right: 5%;
  left: auto;
}
}
@media (min-width:1024px) and (max-width:1199px) {
.swiper-button-prevgal {
  left: 15%;
  right: auto;
}
.swiper-button-nextgal {
  right: 15%;
  left: auto;
}

.swiper-button-prevbox {
  left: 10%;
  right: auto;
}
.swiper-button-nextbox {
  right: 10%;
  left: auto;
}
}


@media (min-width:1200px) and (max-width:1399px) {
.swiper-button-prevgal {
  left: 20%;
  right: auto;
}
.swiper-button-nextgal {
  right: 20%;
  left: auto;
}
.swiper-button-prevbox {
  left: 15%;
  right: auto;
}
.swiper-button-nextbox {
  right: 15%;
  left: auto;
}
}
@media (min-width:1400px) and (max-width:1599px) {
.swiper-button-prevgal {
  left: 25%;
  right: auto;
}
.swiper-button-nextgal {
  right: 25%;
  left: auto;
}

.swiper-button-prevbox {
  left: 15%;
  right: auto;
}
.swiper-button-nextbox {
  right: 15%;
  left: auto;
}


}
@media (min-width:1600px)  {
.swiper-button-prevgal {
  left: 30%;
  right: auto;
}
.swiper-button-nextgal {
  right: 30%;
  left: auto;
}
.swiper-button-prevbox {
  left: 15%;
  right: auto;
}
.swiper-button-nextbox {
  right: 15%;
  left: auto;
}
}






.card {



  padding: 1.5rem;
  background: white;
  position: relative;
  display: flex;
  align-items: center;
  transition: 0.4s ease-out;

}

.card:hover:after {
  opacity: 1;  transform: scale(1.2);
}
.card:hover:before { transform: scale(1.2);transition-duration:300ms;}
.card:hover img {  transform: scale(1.2); transition-duration:300ms;}
.card:hover .above {
  opacity: 0;
}
.card:hover .above h1, .card:hover .above p {
  display:none;
}
.card:hover .info {
  opacity: 1;
  transform: translateY(0px);

}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;

background: rgb(0,55,100);
background: linear-gradient(180deg, rgba(0,55,100,0) 23%, rgba(0,55,100,1) 93%, rgba(0,55,100,1) 100%);
  z-index: 2;
  transition: 0.5s;
  opacity: 1;
}

.card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;

  background: rgba(0, 55, 100, 0.6);
  z-index: 2;
  transition: 0.5s;
  opacity: 0;
}

.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;

}
.card .info {
  position: relative;
  z-index: 3;
  color: white;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.5s;
}

.custom-video {
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: #00808097;
}

.custom-video__container {
    position: relative;
    top: 0;
    width: full;
    height: full;object-fit:cover;
    margin: 1em;
    font-family: 'Oswald', sans-serif;
}

.custom-video__video {
    border-radius: 0.2em;
    cursor: pointer;
}

.custom-video__control {
    position: absolute;
    top: 46%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 1em;
    font-weight: 400;
    width: 3em;
    height: 3em;
    white-space: nowrap;
    line-height: 0;
}

video::-webkit-media-controls {
    position: relative;
    z-index: 1;
}