.slider-height {
    height: 1000px;
    @media #{$lg}{
        height: 800px;
    }
    @media #{$md}{
        height: 650px;
    }
    @media #{$sm}{
        height: 600px;
    }
    @media #{$xs}{
        height: 600px;
    }
}

.slider-height2{
    height: 450px;
    background-size: cover;
    @media #{$md}{
        height: 350px;
    }
    @media #{$sm}{
        height: 260px;
    }
    @media #{$xs}{
        height: 260px;
    }
}
.slider-area2{
    background-image: url(../img/hero/hero2.png);
    background-repeat:no-repeat ;
    background-size: cover;
}

// Main Slider
.slider-area{
    // Slider Height
    .slide-full {
        background-position: center center;
        background-size: cover;
      }
      // Slider Caption
    .slide-full-content {
        @media #{$sm}{
            padding-top: 55px;
        }
        @media #{$xs}{
            padding-top: 55px;
        }
        overflow: hidden;
        span{
            font-size: 18px;
            color: #fff;
            font-weight: 700;
            display: inline-block;
            text-transform: uppercase;
            padding-bottom: 14px;
            margin-bottom: 30px;
            position: relative;
            font-family: $font_1;
            &::before{
                position: absolute;
                content: "";
                width: 100%;
                height: 1px;
                background: #fff;
                left: 0;
                transform: translateY(-50%);
                bottom: 0;

            }
            &::after{
                position: absolute;
                content: "";
                width: 60px;
                background: #ff1313;
                left: 0;
                bottom: -1px;
                height: 3px;
            }
        }
        h1{
            font-size: 85px;
            font-weight: 700;
            margin-bottom: 24px;
            color: #fff;
            line-height: 1.1;
            text-transform: uppercase;
            @media #{$lg}{
                font-size: 54px;
            }
            @media #{$md}{
                font-size: 50px;;
            }
            @media #{$sm}{
                font-size: 35px;
            }
            @media #{$xs}{
                font-size:29px;
                line-height: 1.5;
            }
        }
        p{
            font-size: 16px;
            color: #fff;
            font-family: $font_2;
            margin-bottom: 64px;
            padding-right: 35px;
            @media #{$md}{
                padding-right: 13px;
            }
            @media #{$sm}{
                padding-right: 0px;
            }
            @media #{$xs}{
                padding-right: 0px;
                font-size: 15px;
            }
        }
    }

}

//   Animated
.slide-full-content h1, .slide-full-content > p, .slide-full-content > a{
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name: fadeOutDown;
}
.active .slide-full-content h1 , .active .slide-full-content > p, .active .slide-full-content > a{
    animation-name: fadeInLeft;
}
.slide-full-content {
    span{
        animation-delay: .2s;
    }
    h1{
        animation-delay: .3s;
    }
    p{
        animation-delay: .4s;
    }
    a{
        animation-delay: .6s;
    } 
}


// Dot Style

.custom-dots{
    .owl-dots {
        position: absolute;
        width: 30px;
        right: 10%;
        bottom: 7%;
        // display: flex;
        align-items: end;
        @include flexbox();
        @include align-items(flex-end);
        @media #{$sm}{
            right: 14%;
        }
        .owl-dot {
            position: relative;
            background: rgba(0,0,0,0) none repeat scroll 0 0;
            border: 0 none;
            color: #fff;
            font-size: 16px;
            opacity: 0.4;
            display: inline-block;
            padding-right: 13px;
            line-height: 1;
            &:last-child{
                margin-bottom:0;
            }
            &.active{
                opacity:1;
                font-size: 30px;
              }
            // &.active::before {
            //     background: #f7951e none repeat scroll 0 0;
            //     content: "";
            //     height: 2px;
            //     left: -6px;
            //     position: absolute;
            //     top: 10px;
            //     transform: rotate(-45deg);
            //     width: 30px;
            //   }
          }
      }
}

// Hero Overly
.hero-overly {
    position: relative;
    z-index: 1;
    &::before {
        position: absolute;
        content: "";
        background-color: rgba(1, 10, 28,  0.3);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        background-repeat: no-repeat;
    }
}

//  Transparent Header
.header-transparent {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9;
}

// Another Hero Page
.slider-area2{
    .hero-cap{
        h2{
            color: #fff;
            font-size: 50px;
            font-weight: 800;
            text-transform: capitalize;
            line-height: 1;
            @media #{$sm}{
                font-size: 50px;
              }
            @media #{$xs}{
                font-size: 35px;
              }
        }
    }
}