.hero {
    min-height: 95vh;
    width: 100%;
    background-color: #7d6be0;
    border-bottom: 1px solid #c3c3c380;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    &::after{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url(../images/shape.png);
        background-repeat: repeat;
        z-index: -1;
        opacity: .4;
    }
}

.sticky-hero-1 {
    opacity: 0.2;
    transition: all linear .5s;
}

.hero_wrapper {
    padding-top: 60px;
    .hero_content {
        h1 {
            font-size: 50px;
            line-height: 60px;
            // background: linear-gradient(90deg, rgb(31, 86, 126) 0%, #419aa8 100%);
            color: white;
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            text-transform: uppercase;
            font-weight: 900;
            @include text-ellips-3;
        }

        p {
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #f6f6f6e4;
            padding-right: 110px;
        }

        .hero_buttons {
            display: flex;
            align-items: center;
            margin-top: 30px;

            .btn_one {
                padding: 8px 40px;
                background-color: $secondaryColor;
                border-radius: 35px;
                color: $whiteColor;
                font-weight: 400;
                font-size: 15px;
                // border: 1px solid $secondaryColor;
                cursor: pointer;

                &:hover {
                    background-color: $whiteColor;
                    color: $blackColor;
                    transition: all linear .2s;
                }
            }
            .btn_two {
                background-color: $whiteColor;
                color: $blackColor;
                margin-left: 15px;

                &:hover {
                    background-color: $whiteColor;
                    color: $primaryColor;
                    transition: all linear .2s;
                }
            }
        }
    }
}

.slider_img {
    position: relative;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    &::after{
        position: absolute;
        content: '';
        height: 30%;
        width: 100%;
        bottom: 0;
        left: 0;
        // background-image: linear-gradient(180deg, #F5F5F500 0%, #f5f5f5 82%);
        z-index: 2;
    }
    img {
        max-height: 550px;
        width: 100%;
        object-fit: contain;
        animation: shake-animation 4.72s ease infinite;
        transform-origin: 50% 50%;
    }
}


@keyframes shake-animation {
    0% {
        transform: translate(0, 0)
    }

    1.78571% {
        transform: translate(8px, 0)
    }

    3.57143% {
        transform: translate(0, 0)
    }

    5.35714% {
        transform: translate(8px, 0)
    }

    7.14286% {
        transform: translate(0, 0)
    }

    8.92857% {
        transform: translate(8px, 0)
    }

    10.71429% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}