/*******************************************************/
/******************* ## Main Slider *******************/
/*******************************************************/
.slider-area
    +overlay($heading-color, 0.65)
    &:before
        mix-blend-mode: multiply
    &:after
        +size(40%, 70%)
        +poRB(0)
        z-index: -1
        opacity: 0.65
        background: linear-gradient(-90deg, $primary-color, $secondary-color)
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%)
    
.slide-content
    max-width: 515px
    .sub-title
        display: flex
        font-weight: 500
        align-items: center
        margin-bottom: 15px
        +res-ab(sm)
            font-size: 22px
        &:before
            content: ''
            +size(60px, 2px)
            margin-right: 20px
            background: white
            +res-bl(xs)
                +size(40px, 1px)
    .h2
        display: block
        font-size: 85px
        font-weight: 300
        letter-spacing: -3px
        +res-bl(xl)
            font-size: 60px
        +res-bl(md)
            font-size: 50px
        +res-bl(sm)
            font-size: 43px
        +res-bl(xs)
            font-size: 35px
    h1
        line-height: 1
        font-size: 100px
        margin-bottom: 60px
        letter-spacing: -2px
        +res-bl(xxl)
            font-size: 80px
        +res-bl(xl)
            font-size: 55px
            line-height: 1.3
            margin-bottom: 35px
        +res-bl(md)
            font-size: 45px
        +res-bl(sm)
            font-size: 38px
            letter-spacing: -1px
        +res-bl(xs)
            font-size: 30px
    > *
        transition: 1s
        animation-duration: 1s
        animation-fill-mode: both
    
.main-slider-active
    .slick-arrow
        position: absolute
        right: 0
        z-index: 2
        color: white
        background: transparent
        border: 1px solid rgba(255, 255, 255, 0.3)
        +res-bl(ms)
            width: 40px
            height: 40px
            font-size: 20px
        &.next-arrow
            top: 25%
        &.prev-arrow
            top: calc(25% + 80px)
        &:focus,
        &:hover
            border-color: white
    
.slick-active
    .slide-content
        *
            animation-name: fadeInRight
        .sub-title
            animation-delay: 0.2s
        .h2
            animation-delay: 0.4s
        h1
            animation-delay: 0.6s
        .theme-btn
            animation-delay: 0.6s
        
/* Slider Area Two */
.slider-area-two
    overflow: hidden
    &:after
        +size(40%, 70%)
        +poRB(0)
        opacity: 0.65
        background: linear-gradient(-90deg, $primary-color, $secondary-color)
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 40% 40%, 60% 55%)
    .slider-bg-line
        +poLT(0)
        z-index: -1
        max-width: 33%
    .slider-bg-text
        font-size: 16vw
        @extend %heading
        +poLB(5%)
        z-index: -1
        opacity: 0.05
        line-height: 1
    
.slider-item-two
    z-index: 1
    position: relative
    padding-top: 130px
    padding-bottom: 210px
    .slide-content
        position: relative
        z-index: 2
    .sub-title
        margin-bottom: 20px
        color: $secondary-color
        &:before
            background: $secondary-color
    h1
        margin-bottom: 45px
        +res-bl(xl)
            margin-bottom: 15px
    .theme-btn
        &:not(:last-child)
            margin-right: 25px
    .slider-image
        +poRT(0)
        z-index: -1
        opacity: 0
        transition: 1s
        +size(45%, 100%)
        background-size: cover
        background-color: $heading-color
        background-position: center center
        +res-bl(lg)
            width: 100%
            +overlay(white, 0.9)
            position: absolute
        
.slider-arrows
    +poLT(0, 40%)
    width: 100%
    .slick-arrow
        position: absolute
        right: $gutter / 2
        z-index: 2
        +res-ab(lg)
            color: white
            background: transparent
            border: 1px solid rgba(255, 255, 255, 0.3)
        +res-bl(ms)
            width: 40px
            height: 40px
            font-size: 20px
        &:focus,
        &:hover
            border-color: white
        &.next-slider
            bottom: calc(100% + 10px)
        &.prev-slider
            top: calc(100% + 10px)
            
.slick-active
    .slider-image
        opacity: 1