/* Custom Styles */
.bannerBtn {
    margin-top: 56px !important;
}
.active-light-mode .darkLogo {
    display: block !important;
}
.active-light-mode .lightLogo {
    display: none !important;
}
.active-dark-mode .lightLogo {
    display: block !important;
}
.active-dark-mode .darkLogo {
    display: none !important;
}
.bannerImg {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.mainSlider .slick-dots{
    display: none;
}
.Services-Slider .slick-arrow, .Services-Slider-Mobile .slick-arrow {
    display: none !important;
}

.Services-Slider .slick-dots, .Services-Slider-Mobile .slick-dots {
    bottom: -70px !important;
    z-index: 1;
}

.Services-Slider .slick-dots button:after, .Services-Slider-mobile .slick-dots button:after {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.rn-slick-dot .slick-dots li.slick-active button:after {
    background-color: #059dff !important;
}
.Service-Cont {
    justify-content: center !important;
}
.About-bg {
    background-image: url(../images/about-banner.jpg);
}
.Home-banner {
    background-image: url(../images/home-banner.png);
    background-position: right; }
    .about-banner {
        background-image: url(../images/home-banner.png) !important;
        background-position: right; 
    }
.Home-bannerImg {
    background-image: url(../images/home-banner-1.png); }
.Team-banner {
    background-image: url(../images/team-banner.jpg); }
    .portfolioCustom .portfolio .thumbnail .card-image {
        max-width: 628px;
        height: 470px;
        border-radius: 6px;
    }
.portfolioCustom .portfolio .thumbnail .card-image Img {
    max-width: 100%;
    max-height: 100%;
}
.p-top-120 {
    padding-top: 120px !important;
}
.progress-bar {
 
      position:relative;
 
      height:100px;
 
      width:100px;
 
    }
 
    .progress-bar div {
  
      position:absolute;
 
      height:100px;
  
      width:100px;
  
      border-radius:50%;
   
    }
 
    .progress-bar div span {
   
      position:absolute;
   
      font-family:Arial;
    
      font-size:25px;
   
      line-height:75px;

      height:75px;
   
      width:75px;

      left:12.5px;
 
      top:12.5px;
  
      text-align:center;
 
      border-radius:50%;
   
      background-color:white;
   
    }
 
    .progress-bar .background {background-color:#b3cef6; }
 
    .progress-bar .rotate {
 
      clip: rect(0 50px 100px 0);
 
      background-color:#4b86db;
 
    }
  
    .progress-bar .left {
 
      clip: rect(0 50px 100px 0);
   
      opacity:1;
 
      background-color:#b3cef6;
 
    }
  
     

    .progress-bar .right {
  
      clip: rect(0 50px 100px 0);
   
      transform: rotate(180deg);
   
      opacity:0;
 
      background-color:#4b86db;
   
    }

     

    @keyframes
 
    toggle { 0% {
    
     opacity:0;
 
    }
   
     100% {
    
     opacity:1;
   
    }
   
    }
    .Retention-One h5, .Retention-Two h5, .Retention-Three h5 {
        text-align: center;
        margin-top: 7px;
    }
    .Retention-One {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        top: 50px;
    }
    .Retention-Two {
        position: absolute;
        right: 15.5%;
        top: 20%;
    }
    .Retention-Three {
        position: absolute;
        bottom: 21%;
        left: 30.5%;
    }
    .alignwide {
        max-width: 100% !important;
        margin: 0px auto;
    }
    .rn-blog-area .thumbnail {
        width: 100%;
        height: 320px;
    }
    .rn-blog-area .thumbnail img {
        height: 100%  !important;
        max-width: 100%;
    }
    .rn-card .inner .thumbnail a {
        display: inline;
    }
    .viewAllBtn {
        margin-top: 95px !important;
    }
    .digitalCont .inner span {
        font-size: 2rem;
        margin-bottom: 0;
    }
    .secondBox {
        margin-top: 100px !important;
    }
    .jointext {
        font-size: 18px !important;
    }
    .rn-custom-gap {
        padding: 100px 0 !important;
    }
    .counter-style-1 .count-number .counter {
        font-weight: 600 !important;
    }
    @media (max-width: 1140px) {
        .Retention-Two {
            right: 8%;
        }
        .Retention-Three {
            bottom: 24%;
            left: 26.5%;
        }
    }
    @media (min-width: 768px) {
        .br-block {
            display: block;
        }
    }
    
@media (max-width: 767px) {
    .Retention-One {
        top: 12px;
    }
    .Retention-Two {
        right: -27% ;
        top: 26% ;
    }
    .Retention-Three {
        bottom: 9% ;
        left: 11.5% ;
    }
    .sliderWeb , .aboutWeb, .webHead{
        display: none !important;
    }
    .sliderMobile, .aboutMobile, .mobileHead {
        display: block !important;
    }
    .secondBox {
        margin-top: 0px !important;
    }
}
@media (max-width: 575px) {
    
    .rn-custom-gap {
        padding: 30px 0 !important;
    }
    
    #anim {
        margin-top: 0;
    }
    .portfolioCustom .portfolio .thumbnail .card-image {
        width: auto;
        height: auto;
    }
    .slider-style-4 .inner .description {
        padding-right: 0px;
    }
    .slider-style-4 .inner .title {
        font-size: 36px;
    }
    .height-950 {
        padding: 50px 0px 30px !important;
    }
    .mainSlider .slick-dots{
        display: none;
    }
    .mainSlider .slider-bg-image {
        background-position: center;
    }
    .custombgMobile {
        padding: 50px 0;
    }
} 
@media (min-width: 768px) {
    .sliderMobile, .aboutMobile, .mobileHead {
        display: none !important;
    }
    .sliderWeb, .aboutWeb, .webHead {
        display: block !important;
    }
} 
@media (max-width: 767px) {
    .Home-banner {
        padding-top: 100px !important;
    }
    .flex_reverse {
        flex-flow: column-reverse;
    }
}