@import "../../bootstrap/variables";

.single-instructor-hero-section {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &__contents {
        padding: 200px 0 150px;
    }

    @media (max-width: $screen-sm-max) {
        height: auto;

        &__contents {
            padding: 100px 0;
        }
    }

    &__welcome-icon {
        display: inline-block;
        animation-name: wave-animation;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
    }

    &__welcome-separator {
        width: 16px;
        height: 1px;
        background-color: var(--black);
    }

    &__description {
        .circle-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background-color: var(--black);
        }

        .line-separator {
            width: 16px;
            height: 1px;
            background-color: var(--black);
        }
    }


    &__main-img {
        width: calc(100% - 128px);
        max-width: 556px;
        height: 100%;
        max-height: 750px;

        @media (max-width: $screen-sm-max) {
            width: auto;
            max-width: 100%;
            height: 320px;
        }
    }

    &__spinning-img {
        width: 132px;
        height: 132px;
        position: absolute;
        bottom: 324px;
        right: 0;
        z-index: 2;
        transition: all 0.4s;
        animation: rotate-animation 12s infinite linear;

        .rtl & {
            right: auto;
            left: 0;
        }
    }

    &__companies-logos {
        width: 100%;
        height: 80px;

        @media (max-width: $screen-sm-max) {
            height: auto;
        }

        &-title-separator {
            width: 8px;
            height: 1px;
            background-color: var(--white);
        }

        &-item {
            height: 32px;

            img {
                max-height: 100%;
            }
        }
    }
}