.slider-height {
    min-height: 670px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

@media only screen and (min-width: 1600px) {
    .slider-height {
        min-height: 700px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .slider-height {
        min-height: 624px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height {
        min-height: 600px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-height {
        min-height: 500px;
    }
}

@media (max-width: 575px) {
    .slider-height {
        min-height: 600px;
    }
}

.slider-height2 {
    height: 750px
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height2 {
        height: 550px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-height2 {
        height: 550px
    }
}

@media (max-width: 575px) {
    .slider-height2 {
        height: 550px
    }
}

.slider-height3 {
    height: 485px
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height3 {
        height: 400px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-height3 {
        height: 350px
    }
}

@media (max-width: 575px) {
    .slider-height3 {
        height: 350px
    }
}

.slider-bg2 {
    background-image: url(../img/hero/h1_hero2.png)
}

.slider-area {

}

    .slider-area .hero__caption {
        overflow: hidden;
        position: relative
    }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__caption {
        padding-top: 50px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption {
        padding-top: 40px
    }
}

@media (max-width: 575px) {
    .slider-area .hero__caption {
        padding-top: 40px
    }
}

.slider-area .hero__caption span {
    display: inline-block;
    color: #9F78FF;
    font-size: 16px;
    text-transform: inherit;
    margin-bottom: 15px
}

.slider-area .hero__caption h1 {
    font-size: 65px;
    font-weight: 700;
    color: #fff;
    font-family: "Poppins",sans-serif;
    line-height: 1.3;
    margin-bottom: 25px
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-area .hero__caption h1 {
        font-size: 55px;
        line-height: 1.2
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__caption h1 {
        font-size: 50px;
        line-height: 1.2
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption h1 {
        font-size: 29px
    }
}

@media (max-width: 575px) {
    .slider-area .hero__caption h1 {
        font-size: 29px;
        line-height: 1.4
    }
}

.slider-area .hero__caption p {
    margin-bottom: 31px;
    color: #A5A7C5;
    font-size: 18px;
    line-height: 1.6
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__caption p {
        margin-bottom: 54px;
        padding-right: 0px
    }
}

@media (max-width: 575px) {
    .slider-area .hero__caption p {
        margin-bottom: 54px;
        padding-right: 0px;
        font-size: 16px
    }
}

.slider-area .hero__caption.hero__caption2 {
    padding-top: 0
}

    .slider-area .hero__caption.hero__caption2 h1 {
        font-size: 44px;
        margin-bottom: 25px
    }

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption.hero__caption2 h1 {
        font-size: 29px
    }
}

@media (max-width: 575px) {
    .slider-area .hero__caption.hero__caption2 h1 {
        font-size: 30px
    }
}

.slider-area .hero__caption.hero__caption3 h1 {
    font-size: 44px;
    margin-bottom: 25px
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption.hero__caption3 h1 {
        font-size: 29px
    }
}

@media (max-width: 575px) {
    .slider-area .hero__caption.hero__caption3 h1 {
        font-size: 30px
    }
}

.slider-area .hero__img img {
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .slider-area .hero__img img {
        right: 0px
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .slider-area .hero__img img {
        right: 0px
    }
}

.slider-area .slider-shape .slider-shape1 {
    position: absolute;
    top: 0;
    left: 0
}

.slider-area .slider-shape .slider-shape2 {
    position: absolute;
    top: 0;
    right: 0
}

.slider-area .slider-shape .slider-shape3 {
    position: absolute;
    left: 67px;
    bottom: 95px
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero-cap {
        padding-top: 50px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero-cap {
        padding-top: 50px
    }
}

@media (max-width: 575px) {
    .slider-area .hero-cap {
        padding-top: 50px
    }
}

.slider-area .hero-cap h2 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    text-transform: capitalize
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero-cap h2 {
        font-size: 40px
    }
}

@media (max-width: 575px) {
    .slider-area .hero-cap h2 {
        font-size: 40px
    }
}