/* 02. slider area css here */
.single_slider{
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center center;
        background-size: cover; 
        height: 738px;
        @media #{$laptop-device}{
           height: 519px;
        }
        @media #{$desktop-device}{
           height: 433px;
        }
        @media #{$tablet-device}{
            height: 350px;
        }
        @media #{$large-mobile}{
           background-position: 5%;
            height: 280px;
        }
 
}
.slider_section{
    &.mb-40{
        @media #{$tablet-device}{
            margin-bottom: 30px;
        }
        @media #{$large-mobile}{
           margin-bottom: 30px;
        }
    }
}
.slider_area{
    &:hover{
        & .owl-nav{
            & div{
                opacity: 1;
                visibility: visible;
            }
        }
    }
    & .owl-nav{
        & div{
            position: absolute;
            top: 49%;
            transform: translatey(-50%);
            left: 50px;
            font-size: 50px;
            @include transition(.3s);
            opacity: 0;
            visibility: hidden;
            &:hover{
                color: $secondary_color;
            }
            @media #{$desktop-device}{
                left: 12px;
            }
            @media #{$tablet-device}{
                left: 8px;
            }
            @media #{$large-mobile}{
               left: 5px;
            }
            &.owl-next{
                right: 50px;
                left: auto;
                @media #{$desktop-device}{
                    right: 12px;
                }
                @media #{$tablet-device}{
                    right: 8px;
                }
                @media #{$large-mobile}{
                   right: 5px;
                }
            }
            @media #{$large-mobile}{
                display: none;
            }
        }
    }
    & .owl-dots{
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translatex(-50%);
        & .owl-dot{
            width: 16px;
            height: 16px;
            border: 2px solid $white;
            border-radius: 50%;
            display: inline-block;
            margin: 0 3px;
            transition: .3s;
            &.active{
                background: $white;
            }
            &:hover{
                 background: $white;
            }
        }
    }
}

.slider_content{
    @media #{$desktop-device}{
        padding-left: 30px;
    }
    @media #{$tablet-device}{
       padding-left: 30px;
    }
    @media #{$large-mobile}{
        text-align: center;
    }
    & h1{
        font-size: 90px;
        line-height: 90px;
        font-weight: 500;
        margin-bottom: 33px;
        text-transform: uppercase;
        letter-spacing: -2px;
        @media #{$laptop-device}{
            font-size: 63px;
            line-height: 63px;
            margin-bottom: 23px;
        }
        @media #{$desktop-device}{
            font-size: 45px;
            line-height: 50px;
            margin-bottom: 12px;
        }
        @media #{$tablet-device}{
           font-size: 35px;
            line-height: 35px;
            margin-bottom: 14px;
            letter-spacing: 0;
        }
        @media #{$large-mobile}{
            font-size: 20px;
            line-height: 26px;
            margin-bottom: 7px;
            letter-spacing: 1px;
        }
    }
    & p{
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 0;
        & span{
            color: $secondary_color;
        }
        @media #{$laptop-device}{
            font-size: 20px;
            line-height: 20px;
        }
        @media #{$desktop-device}{
            font-size: 20px;
            line-height: 20px;
        }
        @media #{$tablet-device}{
            font-size: 17px;
            line-height: 24px;
            margin-bottom: 0;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 25px
        }
    }
    & a{
        font-size: 15px;
        font-weight: 500;
        padding: 0 45px;
        display: inline-block;
        text-transform: uppercase;
        border-radius: 30px;
        height: 65px;
        line-height: 65px;
        background: inherit;
        margin-top: 46px;
        color: #fff;
        background: $secondary_color;
        &:hover{
            background: $fonts_color;
        }
        @media #{$laptop-device}{
             margin-top: 36px;
        }
        @media #{$desktop-device}{
            font-size: 13px;
            padding: 0 25px;
            height: 45px;
            line-height: 45px;
            margin-top: 22px;
        }
        @media #{$tablet-device}{
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            margin-top: 18px;
        }
        @media #{$large-mobile}{
            font-size: 11px;
            height: 34px;
            line-height: 34px;
            padding: 0 18px;
            margin-top: 13px;
        }
    }
}




.active .slider_content h1,.active .slider_content h2,.active .slider_content h3,.active .slider_content a,.active .slider_content p,.active .slider_content span {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.active .slider_content h2{
     -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.active .slider_content h3,.active .slider_content span{
     -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.active .slider_content p{
     -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.active .slider_content a{
     -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}



/*home two css here*/
.slider_s_two{
    & .single_slider{
        height: 960px;
        @media #{$laptop-device}{
           height: 675px;
        }
        @media #{$desktop-device}{
           height: 530px;
        }
        @media #{$tablet-device}{
            height: 390px;
        }
        @media #{$large-mobile}{
            height: 300px;
        }
        & .container{
           max-width: 1427px;
            @media #{$laptop-device}{
               max-width: 1200px;
            }
        }
    }
    & .slider_content{
        padding-top: 70px;
        @media #{$tablet-device}{
           padding-top: 0;
        }
        @media #{$large-mobile}{
           padding-top: 0;
        }
        & > span{
            font-size: 16px;
            line-height: 16px;
            font-weight: 500;
            width: 120px;
            display: inline-block;
            margin-bottom: 35px;
            border-left: 2px solid #000000;
            padding-left: 8px;
            @media #{$laptop-device}{
               margin-bottom: 29px;
            }
            @media #{$desktop-device}{
                font-size: 14px;
                width: 110px;
                margin-bottom: 20px;
            }
            @media #{$tablet-device}{
                font-size: 13px;
                line-height: 16px;
                width: 103px;
                margin-bottom: 21px;
            }
            @media #{$large-mobile}{
                font-size: 13px;
                line-height: 16px;
                width: 99px;
                margin-bottom: 15px;
                text-align: left;
            }
        }
        & h1{
            font-weight: 300;
            & span{
                font-weight: 400;
            }
        }
        & a{
            background: $fonts_color;
            &:hover{
                background: $secondary_color;
            }
        }
    }
}


/*home four css here*/
.slider_s_four{
    & .single_slider{
        height: 960px;
        @media #{$laptop-device}{
           height: 675px;
        }
        @media #{$desktop-device}{
           height: 560px;
        }
        @media #{$tablet-device}{
            height: 390px;
        }
        @media #{$large-mobile}{
            height: 300px;
        }
        & .container{
           max-width: 1427px;
            @media #{$laptop-device}{
               max-width: 1200px;
            }
        }
    }
    & .slider_content{
        padding-top: 145px;
        @media #{$tablet-device}{
           padding-top: 0;
        }
        @media #{$large-mobile}{
           padding-top: 0;
        }
        &.center{
            text-align: center;
            & > span{
                width: inherit;
                border-left: 0;
                padding-left: 0;
            }
        }
        & > span{
            font-size: 16px;
            line-height: 16px;
            font-weight: 500;
            width: 120px;
            display: inline-block;
            margin-bottom: 35px;
            border-left: 2px solid #000000;
            padding-left: 8px;
            @media #{$laptop-device}{
               margin-bottom: 29px;
            }
            @media #{$desktop-device}{
                font-size: 14px;
                width: 110px;
                margin-bottom: 20px;
            }
            @media #{$tablet-device}{
                font-size: 13px;
                line-height: 16px;
                width: 103px;
                margin-bottom: 21px;
            }
            @media #{$large-mobile}{
                font-size: 13px;
                line-height: 16px;
                width: 99px;
                margin-bottom: 15px;
                text-align: left;
            }
        }
        & h1{
            font-weight: 300;
            & span{
                font-weight: 400;
            }
        }
        & a{
            background: $fonts_color;
            &:hover{
                background: $secondary_color;
            }
        }
    }
}