
@keyframes pulse-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3);
      opacity: 0;
    }
}
.gradint-slider{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    &::before{
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        @include gradint;
        z-index: 1;
        opacity: 0.95;
    }
    .banner-slider{
        position: relative;
        z-index: 3;
        background: none !important;
        .main-btn{
            background: none;
            border: 2px solid #fff;
            color: #fff;
            &::before{
                background-color: #fff;
            }
            &:hover{
                color: #232323;
            }
        }
    }
    .banner-slider .slick-arrow{
        background: rgba(255, 255, 255, 0.6);
        color: #232323;
        &:hover{
            background: #fff;
        }
    }
    .banner-slider .banner-text .title,
    .banner-slider .banner-text p,
    .banner-slider .banner-text .title-tag
    {
        color: #fff;
    }

    
}

.gradint_body{
    .header-navigation .navbar-btn a{
        border: 0px;
        @include gradint;
        background-size: 200% auto;
        @include transition(0.3s);
        &:hover{
            color: #fff;
            background-position: right center; 
        }
    }
    .service-item-six{
        @include gradint;
        border: 0px;
        border-radius: 10px;
        padding: 4px;
        display: block;
       
        .service-item-inner{
            padding: 40px 28px;
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 100%;
                height: 100%;
                background: #fff;
                left: 0px;
                top: 0px;
                border-radius: 7px;
                @include transition(0.3s);
            }
            .s-i-main-c{
                position: relative;
                z-index: 3;
            }
        }
        &:hover{
            color: #fff;
            .title,
            .icon
            {
                color: #fff;
            }
            .service-item-inner{
                &::before{
                    border-radius: 50%;
                    transform: scale(0);
                }
            }
        }
    }
    .video-section-new{
        .intro-thumb{
            position: relative;
            &::before{
                position: absolute;
                content: '';
                width: 100%;
                height: 100%;
                left: -30px;
                bottom: -30px;
                 @include gradint;
                 border-radius: 10px;
            }
            img{
               width: 100%;
               position: relative;
               z-index: 3;
               border-radius: 10px;
            }
            .video-popup{
                position: absolute;
                top: 50%;
                left : 50%;
                transform: translate(-50%, -50%);
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #fff;
                line-height: 60px;
                text-align: center;
                color: #555;
                z-index: 4;
                box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.1);
            
            }
        }
        .counter-area-new{
            display: flex;
            flex-wrap: wrap;
            .counter-box-new{
                max-width: 50%;
                flex: 50%;
                margin-bottom: 30px;
                .counter{
                    font-size: 34px;
                    color: #002249;
                    font-weight: 700;
                }
                .title{
                    font-weight: 400;
                    font-size: 15px;
                    color: #616161;
                }
            }
        }
    }
    .portfolio-area {
        .portfolio-item{
            display: block;
            border-radius: 10px;
            overflow: hidden;
            .portfolio-content{
                left: 0px;
                bottom: 0px;
                padding: 30px 27px;
            }
            &::before{
                @include gradint;
            }
        }
        .portfolio-item:hover::before{
            opacity: .9;
        }
    }
    .team{
        position: relative;
        .team-member{
          position: relative;
          overflow: hidden;
          z-index: 2;
          border-radius: 10px;
          @include transition(0.3s);
          .member-pic{
            img{
              width: 100%;
            }
          }
          .member-data{
            @include gradint;
            text-align: center;
            padding: 18px 20px 17px;
            .title{
              font-size: 20px;
              line-height: 30px;
              color: $white;
              font-weight: 600;
              margin-bottom: 2px;
            }
            .position{
              color: #fff;
              font-size: 14px;
              line-height: 24px;
              text-transform: uppercase;
              font-weight: 400;
              margin-bottom: 0px;
            }
          }
          .social{
            @include gradint;
            position: absolute;
            right: -50px;
            top: 15px;
            border-radius: 5px 0px 0px 5px;
            @include transition(0.5s);
            ul{
              padding-left: 0px;
              margin-bottom: 0px;
              li{
                list-style: none;
                a{
                  text-decoration: none;
                  width: 35px;
                  height: 35px;
                  font-size: 16px;
                  text-align: center;
                  line-height: 35px;
                  display: block;
                  color: #fff;
                  
                }
              }
            }
          }
          &:hover{
              .social{
                  right: 0px;
              }
          }
        }
     
    }
    .testimonials-section{
        .testimonial-box {
            @include gradint;
            padding: 5px;
            border-radius: 10px;
            .testi-box-inner{
                background: #fff;
                padding: 30px;
                border-radius: 8px;
            }
            p{
                padding: 0px;
                border: 0px;
                background: none;
            }
            .author {
                margin-top: 0px;
                padding-left: 0px;
                margin-bottom: 10px;
            }
        }
    }
    .call-to-action::before {
        @include gradint;
    }
    .latest-news-box{
        border-radius: 10px;
        overflow: hidden;
        .post-content{
            @include gradint;
            .post-meta a,
            .title a,
            .read-more-btn
            {
                color: #fff;
            }
            .read-more-btn:hover{
                color: #fff;
            }
        }
    }
    .footer-area {
        position: relative;
        &::before{
            position: absolute;
            content: '';
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            @include gradint;
            opacity: 1;
        }
        .footer-overlay{
           background: none;
           position: relative;
           z-index: 3;
        }
        .widget-item-1 p,
        .widget-item-2 ul li,
        .widget-item-3 .features-sub p,
        .widget-item-2 ul li a
        {
            color: #fff;
        }
        .widget-item-3 .features-sub .input-box input {
            border: 2px solid rgba(255, 255, 255, 0.7);
            &::placeholder{
                color: #fff !important;
            }
            &::-webkit-input-placeholder{
                color: #fff !important;
            }
        }
    }
    .footer-area .widget-item-3 .features-sub .input-box button{
        background: #fff;
        border-radius: 5px;
        color: red;
    }
    .footer-area .footer-copyright p{
        color: #fff;
    }
    .about-thumb::before {
        display: none;
    }
    .about-thumb{
        position: relative;
        &::after{
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 30px;
            left: -30px;
            @include gradint;
            border-radius: 10px;
        }
        img{
            position: relative;
            z-index: 3;
            border-radius: 10px;
            width: 100%;
        }
    }
    .service-item-three{
        border-radius: 10px;
    }
    .service-item-three:hover{
        @include gradint;
    }
    .feature-list li:hover::before {
        @include gradint;
    }
    .about-history-area .history-item .history-content{
        @include gradint;
    }
  
    .about-history-area .history-item .history-content .title,
    .about-history-area .history-item .history-content span
    {
        color: #fff;
    }
    .service-item-eight .services-overlay .icon{
        @include gradint;
    }
    .service-item-eight:hover .services-overlay {
        background-color: rgba(0, 34, 73, 0.7);
    }
    .blog-sidebar .widget.categories-widget ul li a.active,
     .blog-sidebar .widget.categories-widget ul li a:hover{
        @include gradint;
    }
    .blog-sidebar .side-bar-contact .overlay{
        @include gradint;
    }
    .back-to-top a{
        @include gradint;
    }
    .single-blog-grid .cat{
        @include gradint;
    }
    .blog-sidebar .case-live .case-live-btn a, 
    .pricing-plan-item:hover .plans-btn{
        @include gradint;
        border-color: #f5faff;
    }
    .team-member .team-content,
    .team-details-content ul a:hover
    {
        @include gradint;
    }
    .team-member .member-photo img{
        width: 100%;
    }
    .team-member .team-content .name a,
    .team-member .team-content .position
    {
        color: #fff;
    }
    .team-member .team-content .name a:hover{
        color: #fff; 
    }
    .project-gallery .project-gallery-filter .project-gallery-menu .filter{
        border: 0px;
    }
    .project-gallery .project-gallery-filter .project-gallery-menu .filter.active, 
    .project-gallery .project-gallery-filter .project-gallery-menu .filter:hover,
    .blog-sidebar .widget.search-widget form button,
    .main-btn
    {
        @include gradint;
    }
    .header-navigation .primary-menu li .submenu li a:hover,
    .widget-range-slider .price-range-slider .value,
    .widget-range-slider .price-range-slider .ui-slider-horizontal .ui-slider-handle
    {
        @include gradint;
    }
    .widget-range-slider .price-range-slider .filter_price {
        @include gradint;
        border: 0px;
    }
    .widget-range-slider .price-range-slider .filter_price:hover{
        color: #fff;
    }
    .page-item.active .page-link,
    .product-summery .social-share a:hover,
    .checkout-area .g-title,
    .contact-info-items .contact-info-item i
    {
        @include gradint;
    }
    .product-details-tab .nav .nav-item a.active, 
    .product-details-tab .nav .nav-item a:hover {
        @include gradint;
        border-color: #f5f5f5;
    }
    .conatct-section .conatct-one-bg::before,
    .header-topbar .top-left-content .language-change .language-menu a:hover,
    .header-topbar .top-right-wrapper .language-change .language-menu a:hover,
    .team-member .member-photo .social-icon a:hover
    {
        @include gradint;
    }
    .header-topbar .top-left-content .language-change .language-menu a:hover{
        color: #fff;
    }
    .dashboard-inner .card{
        @include gradint;
    }
    .user-dashboard-area .card .card-header{
        @include gradint;
    }
    .call-to-action .main-btn.main-btn-3{
        color: #fff;
    }
    .gradint-static-hero{
        .banner-slider.banner-slider-one{
            padding: 120px 0;
            position: relative;
            background: #F7F8FC;
            .shape1{
                position: absolute;
                bottom: 0px;
                width: auto;
            }
        }
    }


    // About Section CSS
    
    .about {
        position: relative;
    
        .info {
        .info-title {
            font-size: 40px;
            line-height: 50px;
            font-weight: 700;
            margin-bottom: 43px;
            display: block;
    
            span {
            @include gradinttext;
            }
        }
    
        .link {
            margin-top: 45px;
        }
    
        }
    
        .box {
        text-align: center;
    
        .inner-box {
            width: 100%;
            height: 100%;
            background: #fff;
            position: relative;
            z-index: 99;
            text-align: center;
            padding: 43px 25px 21px;
            @include transition(0.3s);
            border-radius: 10px;
            box-shadow: $bs1;
            .icon {
                height: 110px;
                width: 110px;
                line-height: 1;
                background-color: rgba(12,89,219,.1);
                transition: all .3s ease-out 0s;
                margin-bottom: 20px;
                font-size: 50px;
                color: #0c59db;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }
    
            .title {
            font-size: 22px;
            font-weight: 600;
            margin: 26px 0px 19px;
            }
    
            .text {
            margin-bottom: 0px;
            }
    
            &:hover {
                box-shadow: $bs2
            }
        }
        }
    
        .box2 {
        margin-top: 30px;
        }
    
        .box4 {
        margin-top: 30px;
        }
    }

    //  Video Section CSS 
    .video {
        position: relative;
        background: #F7F8FC;
        .shape1{
            position: absolute;
            top: 0;
            left: 0;
            width: auto;
        }
        .shape2{
            position: absolute;
            bottom: 0;
            left: 0;
            width: auto;
        }
        .video-wrapper {
          position: relative;
      
          .video-box {
            position: relative;
            @include gradint;
            padding: 250px 0px 250px;
            z-index: 99;
            border-radius: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: $bs2;
            &::before{
                position: absolute;
                content: '';
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                @include gradint;
                opacity: 0.8;
            }
            
      
            .play-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
      
              .video-popup {
                background: #fff;
                border-radius: 50%;
                width: 70px;
                height: 70px;
                display: block;
                line-height: 70px;
                color: #232323;
                text-align: center;
                font-size: 20px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                &::after {
                    content: "";
                    position: absolute;
                    z-index: 0;
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    display: block;
                    width: 100px;
                    height: 100px;
                    background: white;
                    border-radius: 50%;
                    animation: pulse-border 1500ms ease-out infinite;
                    z-index: -1;
                }
              }
      
            }
            }
        }
    }

    // New Couner Area
    .counter-area2 {
        padding: 115px 0px 110px;
        position: relative;
    
        .shape {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 500px;
        z-index: -9;
        }
    
        .fun-box {
        box-shadow: $bs1;
        background: #fff;
        border-radius: 10px;
        padding: 30px 20px 28px;
        @include transition(0.3s);
        .icon {
            height: 110px;
            width: 110px;
            line-height: 1;
            background-color: rgba(12, 89, 219, 0.1);
            transition: all 0.3s ease-out 0s;
            margin-bottom: 20px;
            font-size: 50px;
            color: #0c59db;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
    
        .counter-wrapper {
            display: block;
            margin-top: 3px;
    
            .counter {
            font-size: 36px;
            line-height: 50px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 0px;
            }
    
            .math {
            font-size: 30px;
            line-height: 50px;
            margin-left: 5px;
            position: relative;
            top: -2px;
            }
        }
    
        .categori {
            font-size: 20px;
            line-height: 30px;
            font-weight: 600;
            margin-top: 0px;
        }
        &:hover{
            box-shadow: $bs2;
        }
        }
    
        &.white {
        .counter-wrapper {
            .counter {
            color: #fff;
            }
    
            .math {
            color: #fff;
            }
        }
    
        .categori {
            color: #fff;
        }
        }
    }
    .call-to-action.c-a-2{
        position: relative;
        padding: 200px 0px 200px;
        background: #F7F8FC!important;
        .shape1{
            position: absolute;
            top: 0;
            left: 0;
            width: auto;
        }
        .shape2{
            position: absolute;
            bottom: 0;
            left: 0;
            width: auto;
        }
        &::before{
            display: none;
        }
    }
    .testimonials-section.ts-2{
        position: relative;
        background: #F7F8FC;
        .shape1{
            position: absolute;
            top: 0;
            left: 0;
            width: auto;
        }
        .shape2{
            position: absolute;
            bottom: 0;
            left: 0;
            width: auto;
        }
    }

}

