/* :: 8.0 Hero CSS */

.welcome-area {
    position: relative;
    z-index: 1;
}

.welcome-slides {
    position: relative;
    z-index: 1;
    overflow: hidden;

    .owl-prev,
    .owl-next {
        @include transition-duration(500ms);
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        top: 50%;
        left: 70px;
        margin-top: -33px;
        z-index: 10;
        text-align: center;
        line-height: 70px;
        color: $white;
        font-size: 30px;

        &:hover,
        &:focus {
            background-color: $hover;
        }
        
        @media #{$breakpoint-md} {
            left: 30px;
        }

        @media #{$breakpoint-xs} {
            width: 40px;
            left: 15px;
            height: 40px;
            font-size: 18px;
            line-height: 44px;
        }
    }

    .owl-next {
        left: auto;
        right: 70px;
        
        @media #{$breakpoint-md} {
            right: 30px;
        }

        @media #{$breakpoint-xs} {
            right: 15px;
        }
    }
}

.single-welcome-slide {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 880px;
    background-color: $primary;

    @media #{$breakpoint-lg} {
        height: 750px;
    }

    @media #{$breakpoint-md} {
        height: 750px;
    }

    @media #{$breakpoint-xs} {
        height: 600px;
    }

    .welcome-text {
        position: relative;
        z-index: 1;

        h2 {
            font-weight: 700;
            font-size: 82px;
            display: block;
            margin-bottom: 0;
            background: -webkit-linear-gradient(#ff9696, #ffe89e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            
            @media #{$breakpoint-xs} {
                font-size: 42px;
            }
        }

        p {
            color: $white;
            margin-bottom: 50px;
            display: block;
        }

        .hero-mail-contact {
            color: $white;
            font-style: italic;
            text-decoration: underline;

            &:hover,
            &:focus {
                color: $hover;
            }
        }
    }
}