@use '../abstract' as *;

/*----------------------------------------*/
/*  03. HERO CSS START
/*----------------------------------------*/

.hero{
    &__area{}
    &__height{
        min-height: 950px;

        @media #{$lg}{
            min-height: 850px;
        }
        @media #{$md}{
            min-height: 750px;
        }
        @media #{$sm}{
            min-height: 1100px;
        }
        @media #{$xs}{
            min-height: 850px;
        }
        &-2{
            @media #{$sm}{
                min-height: 1350px;
            }
            @media #{$xs}{
                min-height: 850px;
            }
        }
    }
    &__title{
        font-size: 60px;
        line-height: 1;

        @media #{$xl}{
            font-size: 55px;
        }
        @media #{$lg}{
            font-size: 45px;
        }
        @media #{$md}{
            font-size: 35px;
        }
        @media #{$sm}{
            font-size: 50px;
        }
        @media #{$xs}{
            font-size: 30px;
        }
        & span{
            &:first-child{
                font-weight: 300;
                display: block;
            }
            &.yellow-shape{
                position: relative;
                z-index: 1;
                & img{
                    position: absolute;
                    bottom: 22px;
                    left: -8px;
                    z-index: -1;
                    -webkit-animation: section-animation 3s infinite;
                    animation: section-animation 3s infinite;

                    @media #{$md}{
                        bottom: 12px;
                        height: 40% !important;
                    }
                }
            }
        }
        &-2{
            margin-bottom: 20px;
        }
    }
    &__content{
        & p{
            font-size: 22px;
            color: $black;
            padding-right: 130px;
            line-height: 30px;
            margin-bottom: 28px;
            @media #{$lg}{
                padding-right: 30px;
            }
            @media #{$md}{
                padding-right: 0px;
            }
            @media #{$sm}{
                padding-right: 0px;
            }
            @media #{$xs}{
                padding-right: 0px;
            }
        }
        &-2{
            & h4{
                font-size: 22px;
                margin-bottom: 0;
            }
            & p{
                color: $e-text-4;
                font-size: 16px;
                margin-bottom: 37px;
            }
        }
    }
    &__thumb{
        z-index: 1;
        &-big{
            position: relative;
            & img{
                max-width: 400px;
                max-height: 460px;

                @include border-radius(40px 4px 40px 4px);
                @include box-shadow(0px 30px 60px 0px rgba(1, 11, 60, 0.14));

                @media #{$md}{
                    width: 100%;
                }
                @media #{$sm}{
                    margin-top: 50px;
                    width: 100%;
                }
                @media #{$xs}{
                    margin-top: 50px;
                    width: 100%;
                }
            }
        }
        &-sm{
            
            @media #{$xl}{
                margin-left: -50px;
            }
            @media #{$lg}{
                margin-left: -160px;
                margin-top: -95px;
            }
            & img{
                max-width: 200px;
                max-height: 240px;
                @include border-radius(4px 40px 4px 40px);
                @include box-shadow(0px 30px 60px 0px rgba(1, 11, 60, 0.14));
            }
        }
        &-shape{
            & img{
                position: absolute;
                z-index: -1;

                &.hero-1-dot{
                    bottom: -25px;
                    left: -30px;
                    -webkit-animation: hero-dot-1 5s linear 0s infinite alternate;
                    -moz-animation: hero-dot-1 5s linear 0s infinite alternate; 
                    -o-animation: hero-dot-1 5s linear 0s infinite alternate;
                    animation: hero-dot-1 5s linear 0s infinite alternate;
                }
                &.hero-1-circle-3{
                    bottom: -47px;
                    right: 1%;
                }
                &.hero-1-circle-4{
                    top: -50px;
                    right: 10%;
                }
            }
        }
        &-2{
            position: relative;
            z-index: 1;
            & img{
                &.hero-big{
                    @media #{$xl}{
                        width: 100%;
                    }
                    @media #{$lg}{
                        width: 100%;
                    }
                    @media #{$md}{
                        width: 100%;
                    }
                    @media #{$sm}{
                        width: 100%;
                    }
                    @media #{$xs}{
                        width: 100%;
                    }
                }
                &.hero-shape-purple{
                    position: absolute;
                    left: 0;
                    bottom: 19%;
                    z-index: -1;
                    @media #{$xl}{
                        width: 100%;
                    }
                    @media #{$lg}{
                        width: 100%;
                    }
                    @media #{$md}{
                        width: 100%;
                    }
                    @media #{$sm}{
                        width: 100%;
                    }
                    @media #{$xs}{
                        width: 100%;
                    }
                }
            }
        }
    }
    &__quote{
        position: absolute;
        bottom: 60px;
        right: -200px;
        padding: 15px 25px;
        padding-bottom: 20px;
        background: $white;
        @include border-radius(4px);
        @include box-shadow(0px 30px 60px 0px rgba(1, 11, 60, 0.14));

        @media #{$xl}{
            right: -145px;
        }
        @media #{$lg}{
            right: 60px;
            bottom: -50px;
        }
        @media #{$md}{
            right: 30px;
            bottom: -50px;
        }
        @media #{$sm}{
            right: 30px;
            bottom: -50px;
        }
        @media #{$xs}{
            right: 15px;
            bottom: -50px;
        }
        & span{
            font-size: 14px;
            color: $e-text-2;
        }
        & h4{
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 0;
            line-height: 1;
        }

        &-animation{
            animation-duration: 2.5s;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
            animation-name: hero-bounce;
        }
    }
    &__shape{
        & img{
            position: absolute;
            &.hero-1-circle{
                top: 25%;
                left: 5%;
                -webkit-animation: hero-circle-1 6s linear 0s infinite alternate;
                -moz-animation: hero-circle-1 6s linear 0s infinite alternate; 
                -o-animation: hero-circle-1 6s linear 0s infinite alternate;
                animation: hero-circle-1 6s linear 0s infinite alternate; 
            }
            &.hero-1-circle-2{
                bottom: 29%;
                left: 0;
            }
            &.hero-1-dot-2{
                right: 0;
                bottom: 38%;
            }
        }
    }
    &__search{
        &-input{
            position: relative;
            width: 370px;
            @media #{$xs}{
                width: 100%;
            }
            & input{
                width: 100%;
                height: 54px;
                line-height: 54px;
                padding: 0 24px;
                padding-right: 35px;
                font-size: 14px;
                @include border-radius(4px);
                outline: none;
                border: none;

                &::placeholder{
                    color: $e-text-7;
                }
            }
            & button{
                position: absolute;
                top: 50%;
                right: 24px;
                @include transform(translateY(-50%));
                font-size: 18px;
                background: transparent;
                & i{
                    &::after{
                        color: $black;
                        opacity: 1;
                    }
                    &::before{
                        color: $e-text-1;
                    }
                }
            }
        }
        & p{
            font-size: 16px;
            color: $e-text-3;
        }
    }
    &__promotion{
        position: absolute !important;
        left: -7% !important;
        top: 44% !important;
        @include border-radius(4px);
        @include box-shadow(0px 30px 60px 0px rgba(1, 11, 60, 0.14));
        padding: 15px 20px;
        padding-bottom: 10px;
        @media #{$md}{
            left: 20% !important;
            top: 71% !important;
        }
        @media #{$sm}{
            left: 9% !important;
            top: 71% !important;
        }
        @media #{$xs}{
            left: 9% !important;
            top: 52% !important;
        }
        &.education{
            bottom: 28% !important;
            top: auto !important;
            left: -11% !important;
        }
        &-icon{
            & span{
                display: inline-block;
                width: 36px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                @include border-radius(50%);
                background: #ff7921;
                & svg{
                    height: 24px;
                    fill: $white;
                }
                &.cap{
                    background: #5773ff;
                }
            }
        }
        &-text{
            & h5{
                font-size: 16px;
                margin-bottom: 0;

            }
            & p{
                font-size: 14px;
                color: $e-text-2;
                margin-bottom: 0;
            }
        }
    }
    &__class{
        position: absolute;
        left: auto !important;
        top: auto !important;
        bottom: 33%;
        right: -12%;
        @include box-shadow(0px 30px 60px 0px rgba(1, 11, 60, 0.14));
        background: rgba($color: $white, $alpha: .9);
        @include border-radius(4px);
        padding: 20px;

        @media #{$xl}{
            right: -5%;
        }
        @media #{$lg}{
            right: 1%;
            bottom: 15%;
        }
        &-thumb{
            & img{
                width: 34px;
                height: 34px;
                @include border-radius(50%);
            }
        }
        &-text{
            & h5{
                font-size: 16px;
                margin-bottom: 0;
            }
            & p{
                font-size: 14px;
                color: $e-text-2;
                margin-bottom: 0;
            }
            & a{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: $white;
                font-weight: 500;
                padding: 0 15px;
                @include border-radius(4px);
                background: #e233fb;
            }
        }
    }
    &__mic{
        position: absolute;
        top: 30%;
        right: 10%;
        animation-duration: 2.5s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-name: hero-bounce;
        & span{
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #ff3c4e;
            @include box-shadow(0px 14px 30px 0px rgba(131, 2, 14, 0.2));
            @include border-radius(6px);
            & svg{
                height: 28px;
                fill: $white;
            }
        }
    }
}


@keyframes hero-dot-1 {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes hero-bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

@keyframes hero-circle-1{
    0%{
        @include transform(rotate(0deg));
    }
    100%{
        @include transform(rotate(360deg));
    }
}