/*Banner Section Starts Here*/
.banner-container {
    padding: 180px 0 200px;
    .container {
        position: relative;
        z-index: 1;
    }
    @include breakpoint(max-xl) {
        padding: 150px 0 170px;
    }
}
.banner-content {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    .title, p {
        color: $white-color;
    }
    .title {
        margin: 0;
        font-size: 70px;
        line-height: 80px;
        margin-bottom: 30px;
        text-transform: capitalize;
    }
    p {
        font-size: 20px;
    }
    .custom-button {
        border-color: $white-color;
        color: $white-color;
        &:hover {
            color: $white-color;
        }
    }
    .button-group {
        @extend %flex;
        margin: -10px;
        margin-top: 30px;
        justify-content: center;
        .custom-button {
            margin: 10px;
        }
    }
    @include breakpoint(max-md) {
        .title {
            font-size: 50px;
            line-height: 60px;
        }
        p {
            font-size: 18px;
        }
    }
    @include breakpoint(max-sm) {
        .title {
            font-size: 40px;
            line-height: 50px;
        }
        p {
            font-size: 18px;
        }
        .button-group {
            margin-top: 25px;
        }
    }
}

.swiper-slide-active {
    .banner-content {
        .title {
            animation-name: fadeInUp;
            -webkit-animation-name: fadeInUp;
            -moz-animation-name: fadeInUp;
            animation-duration: 1s;
            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
        }
        .button-area {
            animation-name: fadeInDown;
            -webkit-animation-name: fadeInDown;
            -moz-animation-name: fadeInDown;
            animation-duration: 1s;
            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
        }
    }
}

.banner-prev,
.banner-next {
    position: absolute;
    width: 50px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: $white-color;
    color: $theme-color;
    font-size: 20px;
    top: 50%;
    margin-top: -30px;
    z-index: 99;
    cursor: pointer;
    @include transition($transition);
    outline: none;
    @include breakpoint(max-lg) {
        height: 50px;
        line-height: 50px;
    }
}
.banner-prev {
    @include border-radius(0 50% 50% 0);
    left: 0;
    @include breakpoint(max-lg) {
        left: -100%;
    }
}
.banner-next {
    @include border-radius(50% 0 0 50%);
    right: 0;
    @include breakpoint(max-lg) {
        right: -100%;
    }
}
.banner-slider {
    position: relative;
    overflow: hidden;
    &:hover {
        @include breakpoint(max-lg) {
            .banner-next {
                right: 0;
            }
            .banner-prev {
                left: 0;
            }
        }
    }
}