/* ==========================
      SLIDER BANNER START
   ============================*/

.banner {
    position: relative;
    // padding: 0 !important; 
    .owl-carousel {
        .single-slide {
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 100%;
                z-index: -1;
                background-color: rgba(0, 0, 0, 0.7);
            }
            @include mq (767) {
                min-height: 697px; 
            }
            @include mq (575) {
                min-height: 500px;
            }
            @include mq (480) {
                min-height: 400px;
            }
        }
        .owl-dot{
            display: none;
        }
        .owl-nav {
            position: absolute;
            top: 50% !important;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            display: block;
            font-size: 16px;
            transition: all .5s ease-in-out;
            opacity: 0;
            visibility: hidden;
            height: 1px;
            button {
                position: relative;
                height: 60px;
                width: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50px;
                border: none;
                outline: none;
                background: #fff;
                transition: .5s;
                &:hover {
                    background: $primary-clr;
                    color: #fff;
                }
                &.owl-prev {
                    left: 0px;
                }
                &.owl-next {
                    position: absolute;
                    right: 0px;
                }
                @include mq (480) {
                    height: 40px;
                    width: 40px;
                }
            }
            @include mq (480) {
                font: 15px;
            }
        }
        &:hover {
            .owl-nav{
                opacity: 1;
                visibility: visible;

                button {
                    &.owl-prev {
                        left: 30px;
                    }
                    &.owl-next {
                        right: 30px;
                    }
                }
            }
        }
    }   
    .scroll-top {
        height: 70px;
        width: 40px;
        border: 1px solid #fff;
        display: block;
        margin: 0 auto;
        padding: 20px 0;
        border-radius: 50px;
        // position: relative;
        z-index: 1;
        cursor: pointer;
        transition: .5s;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);

        &:hover {
            background: $darkmid-clr;
            border-color: $darkmid-clr;

        }
        @include mq (575) {
            bottom: 20px;
        }
        @include mq (480) {
            bottom: 10px;
        }
    }
    .scroll-arrow-btn {
        height: 100px;
        display: block;
        outline: none;
        border: none;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        position: relative;
        animation: scroll-down 2s linear infinite;
        transition: .5s;

        &:hover {
            color: #fff;

        }
        &:focus {
            color: $primary-clr;
        }

    }  

    @keyframes scroll-down {
        0% {
          transform: translateY(-20%);
        }
        100%{
          transform: translateY(10%);
        }
    }
    p {
        margin-bottom: 0;
    }
}


.slide-caption {
    position: relative;
    padding-top: 22.5%;
    padding-bottom: 27%;
    z-index: 2;

    h1 {
        font-family: $roboto;
        font-size: 55px;
        font-weight: 700;
        margin: 0;  
        color: #fff;
        display: inline-block;

        span {
            font-family: $roboto;
            text-transform: capitalize;
        }
        @include mq (575)  {
            font-size: 35px;
        }
        @include mq (480)  {
            font-size: 25px;
        }
        @include mq (375)  {
            font-size: 21px;
        }
    }
    p {
        color: #fff !important;
        font-size: 16px;
        max-width: 700px;
        margin: 0 auto;
        padding-bottom: 10px;

        @include mq (575) {
            font-size: 14px;
        }
    }
    .banner-btn {
        margin-top: 20px;
        .btn {
            margin: 0px 5px;

            @include mq (480) {
              font-size: 12px;
              padding: 15px;
              min-width: 0;
            }
        }
    }
}



 /* ==========================
      BANNER END
   ============================*/



    /* ==========================
      BANNER-V2  START
   ============================*/


.banner-v2 {
    background: url('/images/slide-banner.jpg') !important;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding: 150px !important;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .banner-image {
        @include mq(575) {
            display: none;
        }
    }
}