/*---------------------
  Hero
-----------------------*/
.hero__slider {

    &.owl-carousel {

        .owl-item {

            &.active {

                .hero__text {

                    h6 {
                        top: 0;
                        opacity: 1;
                    }

                    h2 {
                        top: 0;
                        opacity: 1;
                    }

                    p {
                        top: 0;
                        opacity: 1;
                    }

                    .primary-btn {
                        top: 0;
                        opacity: 1;
                    }
                }
            }
        }

        .owl-nav {

            button {
                font-size: 36px;
                color: #333333;
                position: absolute;
                left: 75px;
                top: 50%;
                margin-top: -18px;
                line-height: 29px;

                &.owl-next {
                    left: auto;
                    right: 75px;
                }
            }
        }
    }
}

.hero__items {
    height: 800px;
    padding-top: 230px;
}

.hero__text {

    h6 {
        color: $primary-color;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 28px;
        position: relative;
        top: 100px;
        opacity: 0;
        @include transition(all, .3s);
    }

    h2 {
        color: $heading-color;
        font-size: 48px;
        font-weight: 700;
        line-height: 58px;
        margin-bottom: 30px;
        position: relative;
        top: 100px;
        opacity: 0;
        @include transition(all, .6s);
    }

    p {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 35px;
        position: relative;
        top: 100px;
        opacity: 0;
        @include transition(all, .9s);
    }

    .primary-btn {
        position: relative;
        top: 100px;
        opacity: 0;
        @include transition(all, 1.1s);

        span {
            font-size: 20px;
            position: relative;
            top: 4px;
            font-weight: 700;
        }
    }
}

.hero__social {
    margin-top: 190px;

    a {
        font-size: 16px;
        color: #3d3d3d;
        display: inline-block;
        margin-right: 32px;

        &:last-child {
            margin-right: 0;
        }
    }
}