@import url(main-courses.combine.css);
@import url(main-testimonials.combine.css);
@import url(main-universities.combine.css);

#home-intro{
    position: relative;
    background: url(../img/bg-g1.webp) top center no-repeat;
    background-size: cover;
    
    overflow: hidden;
}
#home-intro .pattern{
    background: url(../img/cubes.png) top center;
}
#home-intro .wrap{
    padding-top: 170px;
}
#home-intro h1{
    margin: 30px auto 30px;
    
    background: linear-gradient(270deg, #3315b3, var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.001);
    font-size: 2rem;
    line-height: 1.6;
    text-wrap: balance;

    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}

#home-intro .shape-wrapper{
    margin-top: 40px;
    z-index: 2;
    position: relative;
    text-align: center;
}
#home-intro .shape-wrapper > img{
    max-height: 400px;
}
#home-intro .hero-bg-shape-1 {
    position: absolute;
    top: 95px;
    left: 150px;
    width: 400px;
    z-index: -3;
}
#home-intro .hero-bg-shape-2 {
    position: absolute;
    top: 85px;
    left: 130px;
    width: 300px;
    z-index: -2;
}
#home-intro .wave{
    position: relative;
    width: 100%;
    height: 80px;
    background: url(../img/wave-shap.svg) center no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
#home-intro .btn{
    position: relative;
    z-index: 100;
    box-shadow: 0 20px 35px 0 rgb(255 255 255/75%);
}


.shape-wrap{
    position: absolute;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
}
.b-shape-1{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    margin: auto;
    text-align: center;
    animation: animationFramesOne 20s infinite linear;
}
.b-shape-1::before{
    display: inline-block; width: 32px; height: 46px;
    background-image: url(../img/shape-1.png);
    content: "";
}
.b-shape-2 {
    position: absolute;
    left: 140px;
    top: 45%;
    animation: animationFramesTwo 20s infinite linear;
}
.b-shape-2::before{
    display: inline-block; width: 26px; height: 30px;
    background-image: url(../img/shape-2.png);
    content: "";
}
.b-shape-3 {
    position: absolute;
    left: 60px;
    top: 40%;
    animation: animationFramesThree 20s infinite linear;
}
.b-shape-3::before{
    display: inline-block; width: 44px; height: 41px;
    background-image: url(../img/shape-3.png);
    content: "";
}
.b-shape-4 {
    position: absolute;
    left: 60px;
    bottom: 80px;
    animation: animationFramesTwo 20s infinite linear;
}
.b-shape-4::before{
    display: inline-block; width: 102px; height: 102px;
    background-image: url(../img/shape-4.png);
    content: "";
}

@-webkit-keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg)
    }

    20% {
        -webkit-transform: translate(73px,-1px) rotate(36deg)
    }

    40% {
        -webkit-transform: translate(141px,72px) rotate(72deg)
    }

    60% {
        -webkit-transform: translate(83px,122px) rotate(108deg)
    }

    80% {
        -webkit-transform: translate(-40px,72px) rotate(144deg)
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(0deg)
    }
}

@-webkit-keyframes animationFramesTwo {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg) scale(1)
    }

    20% {
        -webkit-transform: translate(73px,-1px) rotate(36deg) scale(.9)
    }

    40% {
        -webkit-transform: translate(141px,72px) rotate(72deg) scale(1)
    }

    60% {
        -webkit-transform: translate(83px,122px) rotate(108deg) scale(1.2)
    }

    80% {
        -webkit-transform: translate(-40px,72px) rotate(144deg) scale(1.1)
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(0deg) scale(1)
    }
}

@keyframes animationFramesThree {
    0% {
        transform: translate(165px,-179px)
    }

    100% {
        transform: translate(-346px,617px)
    }
}

@keyframes waveBtn {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,.3)
    }

    50% {
        box-shadow: 0 0 0 40px transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.regAsInstructor{
    margin: 45px auto;
    border-top: var(--border);
}
.regAsInstructor > div{
    max-width: 800px;
    background: url(../../../img/kbs/h-areyoulooking.png) var(--align) top no-repeat;
    background-size: 350px auto;
    padding-inline-start: 375px;
    min-height: 220px;
    padding-top: 45px;
    line-height: 2;
    margin: 0 auto;
}
@media all and (max-width: 700px) {
    .regAsInstructor > div{
        background-size: 280px auto;
        padding-inline-start: 305px;
    }
}
@media all and (max-width: 640px) {
    .regAsInstructor p{
        display: none;
    }
}
@media all and (max-width: 520px) {
    .regAsInstructor > div{
        background: var(--gradeBg);
        padding: 20px;
        box-shadow: var(--boxShadow);
        border: 0;
        border-radius: var(--radius);
        color: #fff;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
        text-align: center;
    }
    .regAsInstructor h2{
        color: #fff;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
    }
    .regAsInstructor p{
        display: block;
    }
    .regAsInstructor .btn.gradient{
        background: transparent;
        border: 1px solid #fff;
    }

}


@media all and (max-width: 1000px) {
    #home-intro .width50:first-child{
        width: 60%;
    }
    #home-intro .width50:last-child{
        width: 38%;
    }

    #home-intro .hero-bg-shape-1{
        left: 0;
    }
}

@media all and (max-width: 840px) {
    #home-intro h1{
        font-size: 2rem;
    }
}

@media all and (max-width: 750px) {
    #home-intro h1{
        margin-top: 0;
    }
    #home-intro .btn{
        margin-top: 20px;
    }
}
@media all and (max-width: 720px) {
    #home-intro .width50{
        width: 100% !important;
    }
    #home-intro h1{
        text-align: center;
    }
    #home-intro .btn{
        margin-top: 0;
    }
}
@media all and (max-width: 480px) {
    #home-intro h1 + .flex{
        justify-content: center;
    }
    #home-intro h1 + .flex div{
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
}
@media all and (max-width: 450px) {
    #home-intro .width50:last-child,
    #home-intro .wave{
        display: none;
    }

    #home-intro{
        margin-bottom: 30px;
    }
}