
.hero-banner{
    background: url('../media/hero/hero-bg.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 100vh;
    display: grid;
    align-items: center;
    position: relative;
    @include media-query(1024px){
        background: url('../media/hero/hero-ipad.png') no-repeat;
        background-position: center;
    }
    @include media-query(820px){
        background-position: inherit;
    }
    @include media-query(490px){
        background: url('../media/hero/hero-mobile.png') no-repeat;
        background-position: top;
    }
    .banner-element{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 13.698vw;
        height: 8.177vw;
    }
    .hero-content{
        @include media-query(1024px){
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hero-text{
            h1{
                br{
                    @include media-query(490px){
                        display: none;
                    }   
                }
            }
            p{
                br{
                    @include media-query(490px){
                        display: none;
                    }   
                }
            }
            .underline-text{
                background: url('../media/vector/underline.png') no-repeat;
                background-position: 0 97%;
                background-size: 85%;
            }
        }
        
        .student-images-block{
            display: flex;
            align-items: center;
            gap: $gap-12;
            .student-images{
                display: flex;
                align-items: center;
                img{
                    position: relative;
                    display: flex;
                    flex-shrink: 0;
                    &:nth-child(1){
                        z-index: 20;
                    }
                    &:nth-child(2){
                        z-index: 15;
                        margin-left: -16px;
                    }
                    &:nth-child(3){
                        z-index: 10;
                        margin-left: -16px;
                    }
                    &:nth-child(4){
                        z-index: 5;
                        margin-left: -16px;
                    }
                }
            }
        }
    }
    .hero-image-block {
        position: relative;
        width: 44.375vw;
        height: 39.375vw;
        @include media-query(1024px){
            width: 65%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
        }
        @include media-query(820px){
            width: 75%;
        }
        @include media-query(490px){
            width: 100%;
        }

        .online-course{
            padding: clamp(8px, 0.625vw, 24px);
            border-radius: $br-8;
            border: 1px solid $white;
            background: rgba(255, 255, 255, 0.80);
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: start;
            gap: $gap-12;
            border-radius: $br-8;
            position: absolute;
            top: clamp(200px, 13.594vw, 350px);
            left: 6.302vw;
            width: clamp(196px, 11.25vw, 320px);
            height: clamp(60px, 3.594vw, 120px);
            @include media-query(490px){
                display: none;
            }
            &.tutor{
                bottom: 9.688vw;
                right: 0;
                top: unset;
                left: unset;
            }

            .icon-box{
                width: clamp(40px, 2.292vw, 60px);
                height: clamp(40px, 2.292vw, 60px);
                background: $accent-1;
                border-radius: 50%;
                display: grid;
                align-items: center;
                justify-content: center;
                
            }
        }
    }
}