@import "../modules/variables";
@import "../modules/mixins";
@import "../modules/fonts";

#bannerHome {
    padding-top: 118px;
    padding-bottom: 6px;
    background-size: cover;
    background-position: center;
    &::before {
        content: "";
        background: linear-gradient(to bottom, $black 50%, transparent);
        width: 100%;
        height: 130px;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 1;
    }
    h1 {
        font-family: $gotham-black;
        color: #fff;
        font-size: 32px;
        line-height: 32px;
    }
    h2 {
        color: #fff;
        font-size: 24px;
        font-family: $gotham-bold;
        line-height: 30px;
        margin-bottom: 16px;
        span {
            font-size: 16px;
            font-family: $gotham;
        }
    }
    p {
        color: #fff;
    }
    @media (min-width: 768px) {
        padding-top: 260px;
        padding-bottom: 200px;
        position: relative;
        &::after {
            content: "";
            width: 100%;
            left: 0;
            bottom: 0;
            height: 300px;
            background: linear-gradient(to top, $black, transparent);
            display: block;
            z-index: 0;
            position: absolute;
        }
        h1 {
            font-size: 64px;
            line-height: 71px;
            margin-bottom: 5px;
            z-index: 1;
            color: #fff;

        }
        h2 {
            font-size: 32px;
            margin-bottom: 35px;
            z-index: 1;
            color: #fff;

            span {
                font-size: 24px;
            }
        }
        .btn-orange {
            max-width: 240px;
            z-index: 1;
            position: relative;
            &:hover {
                border-color: #fff;
            }
        }
    }
    &.light-theme {
        padding-top: 100px;
        padding-bottom: 100px;
        &::before {
            display: none;
        }
        h1 {
            color: #fff;
            font-family: 'Metropolis Bold';
        }
        h2 {
            color: #fff;
            font-family: 'Metropolis Bold';
        }
        p {
            margin-bottom: 32px;
        }
        .btn-orange {
            background-color: #212121;
            border-color: #212121;
            &:hover {
                background-color: $orange;
                border-color: #212121;
            }
        }
        span.tag {
            color: #fff;
            background-color: #212121;
            padding: 5px 12px 5px 9px;
            border-radius: 15px;
            font-size: 12px;
        }
        @media (min-width: 768px) {
            padding-top: 150px;
            padding-bottom: 150px;
            h1 {
                font-size: 56px;
                line-height: 71px;
                margin-bottom: 14px;
                z-index: 1;
            }
            p {
                font-size: 22px;
                margin-bottom: 16px;
                width: 55%;
            }
            h2 {
                font-size: 48px;
                margin-bottom: 35px;
                font-weight: 700;
                z-index: 1;
                line-height: 44px;
                span {
                    font-size: 18px;
                }
            }

            .box-plans {
                margin-bottom: 32px;
                display: flex;
                div {
                    padding-left: 32px;
                    &:first-child {
                        padding-left: 0;
    
                        padding-right: 32px;
                        border-right: 1px solid rgba(0, 0, 0, 0.2);
                    }
                }
            }
        }
        &::after {
            display: none;
        }
    }
}

#infos {
    background-color: $black;
    padding-top: 18px;
    padding-bottom: 15px;
    text-align: center;
    h2 {
        color: #fff;
        font-size: 18px;
        line-height: 130%;
        margin-bottom: 18px;
    }
    h3 {
        color: #fff;
        font-size: 30px;
        line-height: 25px;
        display: none;
        &:first-child {
            display: block;
        }
        span {
            color: $green;
            font-size: 38px;
        }
    }
    @media (min-width: 990px) {
        padding-top: 60px;
        padding-bottom: 30px;
        h2 {
            margin-bottom: 0;
            font-size: 36px;
            text-align: left;
        }
        .content {
            display: flex;
            h3 {
                display: block;
                flex: 1;
                position: relative;
                line-height: 40px;
                font-size: 48px;
                span {
                    line-height: 40px;
                    font-size: 60px;
                    display: block;
                }
                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 1px;
                    height: 80%;
                    background-color: $green;
                    display: block;
                }
                &:last-child::after {
                    width: 0;
                }
            }
        }
    }
    @media (min-width: 1023px) {
        .content {

            h3 {
                font-size: 37px;
                span {
                    font-size: 46px;
                }
            }
        }
    }
}

#whatLearn {
    padding-top: 15px;
    padding-bottom: 50px;
    background-color: $black;
    .img {
        h2 {
            color: #fff;
            margin-bottom: 35px;
            font-size: 32px;
            line-height: 120%;
            font-weight: 700;
        }
        .img-content {
            margin-left: -12px;
            margin-right: -12px;
            position: relative;
            margin-bottom: 25px;
            &::after {
                content: "";
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                background: linear-gradient(to top, $black, transparent 45%);
                top: 0;
            }
            img {
                max-width: 100vw;
                width: 100vw;
            }
        }
    }
    .content {
        h2 {
            display: none;
        }
        h3 {
            font-size: 16px;
            color: #fff;
            line-height: 150%;
            font-weight: 300;
        }
        .item {
            padding-top: 23px;
            padding-bottom: 17px;
            .icon {
                display: flex;
                justify-content: center;
                align-items: start;
            }
            p {
                color: #fff;
                line-height: 130%;
                font-weight: 300;
                span {
                    color: $orange;
                    font-weight: bold;
                }
            }
        }
        hr {
            margin: 0;
            padding: 0;
            color: #767f89;
            opacity: 1;
        }
    }
    @media (min-width: 768px) {
        .img {
            .img-content {
                img {
                    width: 100%;
                }
            }
        }
    }
    @media (min-width: 990px) {
        padding-top: 10px;
        padding-bottom: 30px;
        .img {
            h2 {
                display: none;
            }
            .img-content {
                img {
                    max-width: 100%;
                    width: 100%;
                }
            }
        }
        .content {
            margin: auto 0;
            padding-right: 40px;
            h2 {
                display: block;
                color: #fff;
                font-size: 40px;
                font-family: $gotham-black;
                margin-bottom: 20px;
                line-height: 120%;
            }
            h3 {
                font-size: 24px;
                margin-bottom: 35px;
            }
            .item {
                padding: 0;
                margin-bottom: 30px;
                .icon {
                    align-items: center;
                    border-left: 1px solid $orange;
                }
            }
            .btn-orange {
                max-width: 242px;
                &:hover {
                    border-color: #fff;
                }
            }
            hr {
                display: none;
            }
        }
    }
    @media (min-width: 1024px) {
        .img {
            .img-content {
                margin-right: -7%;
            }
        }
    }
}

#forYou {
    .slick-arrow {
        position: absolute;
        top: -30px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: $orange;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
            color: #fff;
            font-size: 20px;
        }
        &.slick-next {
            right: 20px;
        }
        &.slick-prev {
            right: 82px;
        }
        &.slick-disabled {
            width: 38px;
            height: 38px;
            background-color: #fff;
            top: -24px;
            i {
                color: $black;
                font-size: 16px;
            }
        }
    }
    .container {
        position: relative;
        z-index: 2;
    }
    .item-foryou {
        background-size: cover;
        background-position: center;
        padding-top: 43px;
        padding-bottom: 9px;
        position: relative;
        z-index: 0;
        &::before {
            content: "";
            position: absolute;
            display: block;
            background: linear-gradient(to bottom, $black, transparent 45%);
            top: 0;
            left: 0;
            width: 100%;
            height: 70%;
            z-index: 1;
        }
        &::after {
            content: "";
            position: absolute;
            display: block;
            background: linear-gradient(to top, $black, transparent 45%);
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70%;
            z-index: 1;
        }
        h3 {
            font-family: $gotham-bold;
            color: $green;
            font-size: 14px;
            line-height: 140%;
            margin-bottom: 8px;
            z-index: 2;
        }
        h2 {
            font-family: $gotham-bold;
            font-size: 24px;
            line-height: 140%;
            color: #fff;
            z-index: 2;
            max-width: 20ch;
        }
        p {
            font-size: 14px;
            line-height: 155%;
            color: #fff;
            margin-bottom: 23px;
            font-weight: 300;
            z-index: 2;
        }
        a {
            z-index: 2;
        }
    }
    .item-foryou-content{
        height:500px;
    }
    .teacher-content{
        height:510px;
    }
    
    @media (min-width: 768px) {
        .item-foryou {
            padding-top: 142px;
            padding-bottom: 150px;
            &:nth-of-type(1) {
                background-image: url(../../img/bg-foryou.png) !important;
            }
            h3 {
                font-size: 18px;
                margin-bottom: 20px;
                max-width: unset;
            }
            h2 {
                font-size: 48px;
                margin-bottom: 15px;
            }
            p {
                font-size: 24px;
                margin-bottom: 48px;
            }
            a {
                max-width: 222px;
            }
        }
        .teacher-content{
            height:510px;
        }
    }
    @media (min-width: 990px) {
        .slick-arrow {
            &.slick-next {
                right: -25px;
            }
            &.slick-prev {
                left: -25px;
            }
        }
    }
    @media (min-width: 1024px) {
        .slick-arrow {
            top: calc(50% - 31px);
            width: 62px;
            height: 62px;
            i {
                font-size: 26px;
            }
            &.slick-next {
                right: -20px;
            }
            &.slick-prev {
                left: -20px;
            }
            &.slick-disabled {
                top: calc(50% - 24px);
                width: 48px;
                height: 48px;
                i {
                    font-size: 20px;
                }
            }
        }
    }
    @media (min-width: 1400px) {
        .slick-arrow {
            &.slick-next {
                right: -40px;
            }
            &.slick-prev {
                left: -40px;
            }
        }
    }
}

#apps {
    background-color: $black;
    padding-top: 100px;
    padding-bottom: 80px;
    box-shadow: 0 0 100px $black;
    img.apps {
        margin: 0 auto 23px;
        width: 100%;
    }
    h2 {
        color: #fff;
        font-family: $gotham-bold;
        font-size: 24px;
        line-height: 140%;
        text-align: center;
    }
    p {
        color: #fff;
        text-align: center;
        max-width: 225px;
        margin: 0 auto 28px;
    }
    .links {
        display: flex;
        justify-content: center;
        a {
            display: flex;
            justify-content: center;
            flex: 1;
        }
    }
    @media (min-width: 768px) {
        padding-top: 125px;
        padding-bottom: 120px;
        img.apps {
            margin-bottom: 0;
        }
        h2 {
            font-size: 48px;
            text-align: left;
            margin-bottom: 23px;
        }
        p {
            font-size: 24px;
            text-align: left;
            max-width: unset;
            margin-bottom: 31px;
        }
        .links {
            justify-content: start;
            a {
                flex: unset;
                margin-right: 25px;
            }
        }
    }
}

#slider-courses {
    margin-top: 10px;
    margin-bottom: 60px;


    position: relative;
    bottom: 90px;
    @media screen and (min-width: 768px) {
        margin-bottom: unset;
    }
    .slick-list {
        overflow: unset;
        position: relative;
    }

    

    .slick-arrow {
        width: 60px;
        height: 100%;
        background-color: rgba(0, 0, 0, .8);
        position: absolute;
        top: 0;
        color: #fff;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        columns: #fff;
        border-radius: 5px;
        opacity: 0;
        transition: .3s;

        &.slick-prev {
            left: 0;
            z-index: 1;
        }

        &.slick-next {
            right: 0;
        }
    }

    &:hover {
        .slick-arrow {
            opacity: 1;
        }

    }

    .card-course {
        display: flex;
        margin: 2.5px;
        border-radius: 5px;
        transition-duration: .4s;

        &:hover {
            transform: scale(1.05);
        }
        img {
            border-radius: 5px;
        }
    }
}

@media screen and (min-width: 768px) {
    #slider-courses {
        .slick-list {
            .slick-track {
                width: inherit !important;
                display: flex;
            }
        }
    }
}
