
.slider-height {
    min-height: 1000px;
    background-repeat:no-repeat ;
    background-position: center center;
    @media #{$laptop}{
        min-height: 900px;
    }
    @media #{$md}{
        min-height: 600px;
    }
    @media #{$xs}{
        min-height: 600px;
    }
}
.sky-blue{
    background: #f4feff;
} 
// .slider-height2{
//     min-height: 820px;
//     background-repeat:no-repeat ;
//     background-position: center center;
//     @media #{$laptop}{
//         min-height: 600px;
//     }
//     @media #{$md}{
//         min-height: 600px;
//     }
//     @media #{$xs}{
//         min-height: 600px;
//     }
// }
.slider-padding{
    padding-top: 130px;
    @media #{$xs}{
        padding-top: 40px;
    }
     @media #{$sm}{
        padding-top: 40px;
    }
      @media #{$md}{
      padding-top: 40px;
    } 
     @media #{$lg}{
      padding-top: 100px;
    }
}
.slider-area{
    margin-top: -1px;
    .hero__caption{
       
        @media #{$xs}{
            padding-top: 17px;
        }
        position: relative;
        & span{
            display: inline-block;
            color: $heading-color;
            font-size: 16px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }
        & h1{
            font-size: 65px;
            font-weight: 700;
            color: $heading-color;
            font-family: $font_1;
            line-height: 1.3;
            margin-bottom: 32px;
            @media #{$lg}{
                font-size: 55px;
                line-height: 1.2;
            }
            @media #{$md}{
                font-size: 50px;
                line-height: 1.2;
            }
            @media #{$xs}{
                font-size: 29px;
                line-height: 1.4;
            }
        }
        & p{
           margin-bottom: 54px;
           padding-right: 155px;

           @media #{$md}{
                margin-bottom: 54px;
                padding-right: 0px;
            }
           @media #{$xs}{
                margin-bottom: 54px;
                padding-right: 0px;
            }
        }
        // slider-btn
        .slider-btns{

            a.video-btn{
                background: #d852e8;
                width: 60px;
                height: 60px;
                display: inline-block;
                text-align: center;
                line-height: 60px;
                border-radius: 50%;
                position: relative;
                margin-left: 16px;
                &:hover{
                    &.ani-btn{
                         animation: 1.3s cubic-bezier(0.8, 0, 0, 1) 0s normal none infinite running pulse;
                         box-shadow: 0 0 0 0 rgba(61, 1, 68, 0.302);
                         -webkit-animation: 1.3s cubic-bezier(217, 70, 233, 1) 0s normal none infinite running pulse;
                     }
                     @-webkit-keyframes pulse {
                         to {
                             box-shadow: 0 0 0 45px rgba(83, 16, 90, 0);
                         }
                     }
                     
                     @keyframes pulse {
                         to {
                             box-shadow: 0 0 0 45px rgba(187, 22, 206, 0);
                         }
                     }
                 }
            }
        }
    }
    .hero__img img {
        position: relative;
        right: -63px;
        @media #{$lg}{
            right: 0px;
        }
         @media #{$hero}{
            right: 0px;
        }
        // max-width: 584px;
        // max-height: 607px;
        // @media #{$lg}{
        //     max-width: 386px;
		// }
    }

}z
    // Another Hero Page
.slider-area{
    .hero-cap{
        & h2{
            color: #fff;
            font-size: 50px;
            font-weight: 700;
            text-transform: capitalize;
        }
    }
}

.slider-height2{
    min-height: 300px;
    background-repeat:no-repeat ;
    background-position: center center;
    @media #{$xs}{
        min-height: 260px;
    }
}
// services page
.services-area{
    padding-top: 270px;
    @media #{$lg}{
        padding-top: 200px;
    }
    @media #{$md}{
        padding-top: 150px;
    }
    @media #{$sm}{
        padding-top: 150px;
    }
    @media #{$xs}{
        padding-top: 130px;
    }
}