/*
Theme Name: Inusti Child
Theme URI: https://gavias-theme.com/wp/inusti/
Author URI: http://gaviasthemes.com/
Author: Gaviasthemes Team
Description: Child theme for the Inusti theme.
Template: inusti
*/

.fidelity-video{
   width: 100%;
   max-width: 1200px;
   max-height: 500px;
   aspect-ratio: 1.08/ 1;
   position: relative;
}

.fidelity-video .box-video img, .fidelity-video .box-video img+video{
   position: absolute;
   top: 0;
   right: auto;
   bottom: auto;
   left: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   z-index: 9;
   border-radius: 0 280px 280px 0;
}
.fidelity-video .box-video img+video{
   z-index: 11;
}
.fidelity-video .video-cta{
   position: absolute;
   right: 7%;
   top: 7%;
   z-index: 12;
}
.fidelity-video .video-cta .video-play{
   position: relative;
   overflow: hidden;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.35s;
}
@media(max-width: 1024px){
  .fidelity-video .video-cta .video-play{
      width: 80px;
      height: 80px;
  } 
}
.fidelity-video .video-cta .video-play svg{
   width: 20px;
   height: auto;
   transition: all 0.35s;
}
.fidelity-video .video-cta .video-title{
   position: absolute;
   top: 32px;
   left: 115px;
   color: #fff;
   white-space: nowrap;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -1px;
}

.fidelity-video .overlay-link{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 11;
}
.fidelity-video .video-cta .video-play:hover{
   background: #154988;
}
.fidelity-video .video-cta .video-play:hover svg{
   fill: #fff;
}
/*Counter*/
.fidelity-counter{
   overflow: hidden;
   margin-bottom: 30px;
   max-width: 100%;
   width: 350px;
  /* -webkit-mask-image: url("images/polygon-counter-1.png");
   mask-image: url("images/polygon-counter-1.png");*/
}
.fidelity-counter .box-content{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 20px 20px 30px;
   border-radius: 40px 40px 0 0;
   background: #A9A9AB;
   text-align: center;
   min-height: 165px;
   width: 100%;
   max-width: 355px;
}
.fidelity-counter .milestone-content{
   max-width: 185px;
   margin: 0 auto;
}
.fidelity-counter .milestone-number-inner{
   font-size: 50px;
   font-weight: 700;
   line-height: 45px;
   color: #fff;
}
@media(max-width: 860px){
   .fidelity-counter .milestone-number-inner{
      font-size: 30px;
      line-height: 28px;
   }
}
.fidelity-counter .counter-title{
   font-size: 18px;
   text-transform: uppercase;
   font-weight: 500;
   color: #fff;
   line-height: 24px;
}
@media(max-width: 680px){
   .fidelity-counter .counter-title{
      font-size: 16px;
   }
}

.fidelity-counter .counter-desc{
   font-size: 14px;
   line-height: 18px;
   margin-top: 5px;
   text-transform: uppercase;
   color: #fff;
}
@media(max-width: 680px){
   .fidelity-counter .counter-desc{
      font-size: 10px;
      line-height: 12px;
   }
}
.fidelity-counter .after{
   margin-left: -8px;
}

.fidelity-counter.style-2 .box-content{
   border-radius: 40px 40px 0 0;
   padding: 20px 30px 20px 20px;
}

/*.fidelity-counter.style-3{
   border-radius: 0 0 40px 0;
}*/

.fidelity-counter.style-3 .box-content{
   /*border-radius: 0 0 0 35% / 0 0 0 100%;*/
   border-radius: 0 0 40px 40px;
   padding: 20px 20px 20px 30px;
}

/*.fidelity-counter.style-4{
   border-radius: 0 0 0 40px;
}*/
.fidelity-counter.style-4 .box-content{
   /*border-radius: 0 0 35% 0 / 0 0 100% 0;*/
   border-radius: 0 0 40px 40px;
   padding: 20px 30px 20px 20px;
}


.image-logo-center{
   transform: translateX(-50%) translateY(-50%);
   border-radius: 60px;
}
@media(max-width: 680px){
   .image-logo-center img{
      max-width: 160px!important;
   }
}

.btn-theme, .btn-theme-2, .btn-black, .btn-white{
   border-radius: 10px;
}