/*---- TUTOR PAGE ----*/

:root {
    --section-separate: 100px;
    --lms-big-feature: 70px;
    @include xxl {
        --lms-big-feature: 60px;
    }
    @include xl {
        --section-separate: 90px;
        --lms-big-feature: 60px;
    }
    @include lg {
        --section-separate: 65px;
        --lms-big-feature: 50px;
    }
    @include md {
        --section-separate: 60px;
        --lms-big-feature: 50px;
    }
    @include sm {
        --section-separate: 50px;
        --lms-big-feature: 45px;
    }
    @include ssm {
        --section-separate: 40px;
    }
}

.section_padding {
    padding-top: var(--section-separate);
    padding-bottom: var(--section-separate);
}

.section_padding_top {
    padding-top: var(--section-separate);
}

.section_padding_bottom {
    padding-bottom: var(--section-separate);
}

.tutor {
    &.hero_area {
        padding: 0px 0px;
        background-image: url(../img/tutor/tutor-hero-bg.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 100px;
        height: 850px;
        overflow: hidden;
        @include xl {
            height: 730px;
        }
        @include lg {
            padding-top: 50px;
            height: 760px;
            background-size: 130% 100%;
        }
        @include md {
            padding-top: 40px;
            height: 550px;
            background-size: 140% 100%;
        }
        @include sm {
            padding-top: 40px;
            padding-bottom: 30px;
            height: auto;
        }
        @include ssm {
            padding-bottom: 25px;
        }
    }
    // HERO AREA
    & .hero_area {
        &_inner {
            @include sm {
                padding-right: 15%;
            }
            @include ssm {
                padding-right: 0;
            }
            & h1 {
                @include font-50;
                margin-bottom: 20px;
                @include ssm {
                    font-size: 27px;
                }
                & span {
                    color: $purple_color;
                    &::before {
                        display: none;
                    }
                }
            }
            &>p {
                padding-right: 80px;
                @include xl {
                    padding-right: 50px;
                }
                @include lg {
                    padding-right: 0px;
                }
                @include md {
                    padding-right: 0px;
                }
                @include sm {
                    padding-right: 0px;
                }
            }
            & form {
                margin-top: 40px;
                @include xxl {
                    margin-top: 30px;
                }
                @include xl {
                    margin-top: 30px;
                }
                @include lg {
                    margin-top: 30px;
                }
                @include md {
                    margin-top: 25px;
                }
                @include sm {
                    margin-top: 25px;
                }
                @include ssm {
                    margin-top: 15px;
                }
                & .input-control {
                    &-input {
                        --lms-tutor-submit: 160px;
                        flex: 0 0 auto;
                        flex-wrap: wrap;
                        border-radius: 5px;
                        max-width: calc(98% - var(--lms-tutor-submit));
                        @include lg {
                            --lms-tutor-submit: 140px;
                        }
                        @include md {
                            --lms-tutor-submit: 130px;
                        }
                        @include sm {
                            --lms-tutor-submit: 130px;
                        }
                        &[type=submit] {
                            max-width: var(--lms-tutor-submit);
                            margin-left: 10px;
                        }
                    }
                }
                & p {
                    margin-top: 20px;
                    font-size: 14px;
                    @include xl {
                        margin-top: 15px;
                    }
                    @include lg {
                        margin-top: 15px;
                    }
                    @include md {
                        margin-top: 10px;
                    }
                    @include sm {
                        margin-top: 10px;
                    }
                    & b {
                        font-weight: 600;
                        color: $color_2;
                        padding-right: 5px;
                    }
                    & a {
                        padding: 0px 5px;
                        color: $color_1;
                        &:hover {
                            color: $purple_color;
                        }
                    }
                }
            }
        }
        &_img {
            width: 375px;
            height: 405px;
            margin: auto;
            border-radius: 100%;
            overflow: hidden;
            @include xl {
                width: 330px;
                height: 360px;
            }
            @include lg {
                width: 325px;
                height: 345px;
            }
            @include md {
                width: 100%;
                height: 100%;
            }
            @include sm {
                display: none;
            }
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    // CATEGORY
    &_category {
        &_inner {
            margin-top: -200px;
            box-shadow: 0px 2px 5px rgba($color: $black, $alpha: .04);
            @include xxl {
                margin-top: -180px;
            }
            @include xl {
                margin-top: -160px;
            }
            @include md {
                margin-top: -100px;
            }
            @include sm {
                margin-top: 0px;
            }
            &_bottom {
                padding: 25px 30px;
                @include lg {
                    padding: 20px 25px;
                }
                @include md {
                    padding: 15px 20px;
                }
                @include sm {
                    padding: 15px 10px;
                }
                & a {
                    padding: 10px 15px;
                }
            }
        }
        &_grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            background-color: $white;
            @include sm {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        &_item {
            display: block;
            border: 1px solid $border;
            border-top: none;
            border-left: none;
            padding: 40px 30px;
            @include flex;
            @include xl {
                padding: 30px 30px;
            }
            @include lg {
                padding: 30px 20px;
            }
            @include md {
                padding: 20px 10px;
            }
            @include sm {
                padding: 20px 10px;
            }
            &:nth-child(3n+3) {
                border-right-width: 0px;
                @include sm {
                    border-right-width: 1px;
                }
            }
            &:nth-child(2n+2) {
                @include sm {
                    border-right-width: 0px;
                }
            }
            &>div {
                padding-left: 10px;
                padding-right: 10px;
                @include sm {
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
            & svg {
                & path {
                    fill: $purple_color;
                }
            }
            & h5 {
                @include font-18;
                font-weight: 700;
                margin-bottom: 5px;
                @include md {
                    font-size: 16px;
                }
                @include sm {
                    font-size: 16px;
                }
            }
            & p {
                font-size: 14px;
                line-height: 1;
                @include ssm {
                    font-size: 12px;
                }
            }
        }
    }
    // FEATURE
    &_feature {
        & .col-md-6 {
            @include sm {
                width: 50%;
            }
            @include ssm {
                width: 100%;
            }
        }
        &_shape {
            position: relative;
            z-index: 1;
            margin-top: 10px;
            @include ssm {
                margin-top: 15px;
            }
            &::before {
                content: "";
                width: 60%;
                height: 40%;
                background-color: $shape-bg;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
                @include sm {
                    height: 50%;
                }
            }
        }
        &_item {
            box-shadow: 5px 5px 10px rgba($color: $black, $alpha: .04);
            padding: 40px;
            margin-top: 35px;
            background-color: $white;
            border: 1px solid $border-light;
            border-radius: 5px;
            @include xl {
                padding: 30px;
            }
            @include lg {
                padding: 30px !important;
                margin-top: 30px;
            }
            @include md {
                margin-top: 25px;
                padding: 25px !important;
            }
            @include sm {
                padding: 20px !important;
                margin-top: 15px;
            }
            @include ssm {
                text-align: center;
            }
            &_icon {
                --lms-feature-icon: 50px;
                width: var(--lms-feature-icon);
                height: var(--lms-feature-icon);
                margin-bottom: 20px;
                @include md {
                    margin-bottom: 15px;
                }
                @include sm {
                    margin-bottom: 15px;
                    --lms-feature-icon: 45px;
                }
                @include ssm {
                    margin-left: auto;
                    margin-right: auto;
                }
                & svg,
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            & h4 {
                @include font-22;
                margin-bottom: 20px;
                @include xl {
                    margin-bottom: 15px;
                }
                @include lg {
                    margin-bottom: 15px;
                }
                @include md {
                    margin-bottom: 10px;
                }
                @include sm {
                    font-size: 16px;
                    margin-bottom: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                @include ssm {
                    font-size: 18px;
                }
            }
            & p {
                @include sm {
                    font-size: 14px;
                }
                & br {
                    @include xl {
                        display: none;
                    }
                    @include lg {
                        display: none;
                    }
                    @include md {
                        display: none;
                    }
                    @include sm {
                        display: none;
                    }
                }
            }
        }
    }
    &_big_feature {
        & .row {
            @include md {
                align-items: center;
            }
        }
        &_inner {
            @include xxxl {
                padding-right: 8.3333%;
            }
            @include xxl {
                padding-right: 8.3333%;
            }
            @include sm {
                margin-bottom: 30px;
            }
            &.left_content {
                padding-right: 12%;
                @include xxl {
                    padding-right: 10%;
                }
                @include md {
                    padding-right: 0px
                }
            }
            & h3 {
                @include font-40;
                margin-bottom: 30px;
                @include xl {
                    margin-bottom: 20px;
                }
                @include lg {
                    margin-bottom: 20px;
                }
                @include md {
                    margin-bottom: 15px;
                }
                @include sm {
                    margin-bottom: 10px;
                }
            }
            &_card {
                &_item {
                    margin-top: 50px;
                    padding-right: 8%;
                    display: flex;
                    @include xl {
                        padding-right: 0%;
                        margin-top: 40px;
                    }
                    @include lg {
                        padding-right: 0%;
                        margin-top: 35px;
                    }
                    @include md {
                        padding-right: 0px;
                        margin-top: 25px;
                    }
                    @include sm {
                        padding-right: 30px;
                        margin-top: 25px;
                    }
                    &_icon {
                        --lms-big-feature: 70px;
                        max-width: var(--lms-big-feature);
                        height: var(--lms-big-feature);
                        border-radius: 100%;
                        flex: 0 0 100%;
                        @include xxl {
                            --lms-big-feature: 60px;
                        }
                        @include xl {
                            --lms-big-feature: 60px;
                        }
                        @include lg {
                            --lms-big-feature: 50px;
                        }
                        @include md {
                            --lms-big-feature: 50px;
                        }
                        @include sm {
                            --lms-big-feature: 45px;
                        }
                        & img,
                        & svg {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    &_content {
                        padding-left: 30px;
                        @include xl {
                            padding-left: 20px;
                        }
                        @include lg {
                            padding-left: 20px;
                        }
                        @include md {
                            padding-left: 15px;
                        }
                        @include sm {
                            padding-left: 15px;
                        }
                        & h4 {
                            @include font-22;
                            @include lg {
                                font-size: 20px;
                            }
                            @include md {
                                margin-bottom: 5px;
                            }
                            @include sm {
                                margin-bottom: 5px;
                            }
                        }
                        & p {
                            @include lg {
                                line-height: 1.5;
                            }
                            @include md {
                                line-height: 1.5;
                            }
                            @include sm {
                                line-height: 1.5;
                            }
                        }
                    }
                }
            }
        }
        &_img {
            @include sm {
                max-width: 320px;
                margin: auto;
            }
            & img{
                max-width: 100%;
            }
        }
    }
    // CALL TO ACTION
    &_cta {
        &_inner {
            padding: 70px 0px;
            background-image: url(../img/tutor/tutor-cta-img.png);
            background-size: cover;
            background-position: center;
            background-color: $sky;
            background-repeat: no-repeat;
            @include xl {
                padding: 50px 0px;
            }
            @include lg {
                padding: 50px 0px;
            }
            @include md {
                padding: 40px 0px;
                background-size: 100% 100%;
            }
            @include sm {
                padding: 35px 30px;
            }
            @include ssm {
                padding: 25px 20px;
            }
            &>span {
                font-size: 14px;
                line-height: 1;
                color: $purple_color;
                font-weight: 700;
                display: block;
                margin-bottom: 15px;
                @include md {
                    margin-bottom: 10px
                }
                @include sm {
                    margin-bottom: 10px
                }
            }
            & h3 {
                @include font-30;
                margin-bottom: 30px;
                @include lg {
                    margin-bottom: 20px;
                }
                @include md {
                    margin-bottom: 15px;
                }
                @include sm {
                    margin-bottom: 15px;
                }
                & span {
                    @include sm {
                        display: inline !important;
                    }
                }
            }
            & a {
                padding: 16px;
            }
        }
    }
    // how it workd
    &_how_it_work {
        --lms-how_it_work: 40px;
        margin-bottom: var(--lms-how_it_work);
        @include xl {
            --lms-how_it_work: 30px;
        }
        @include lg {
            --lms-how_it_work: 25px;
        }
        @include sm {
            --lms-how_it_work: 20px;
        }
        @include ssm {
            --lms-how_it_work: 0px;
        }
        &_content {
            @include sm {
                margin-bottom: 20px;
            }
            &_icon {
                width: 270px;
                height: 100px;
                margin-bottom: 20px;
                @include lg {
                    margin-bottom: 15px;
                    width: 250px;
                }
                @include md {
                    width: 230px;
                    height: 80px;
                    margin-bottom: 10px;
                }
                @include sm {
                    width: 170px;
                    height: 60px;
                    margin-bottom: 10px;
                }
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            & span {
                font-size: 14px;
                line-height: 1;
                margin-bottom: 10px;
            }
            & h2 {
                @include font-40;
                margin-bottom: 25px;
                @include xl {
                    margin-bottom: 15px;
                }
                @include lg {
                    margin-bottom: 15px;
                }
                @include md {
                    margin-bottom: 15px;
                }
                @include sm {
                    margin-bottom: 15px;
                }
                @include ssm {
                    margin-bottom: 10px;
                }
            }
        }
        &_cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            @include md {
                gap: 15px;
            }
            @include sm {
                gap: 10px;
            }
            @include ssm {
                grid-template-columns: repeat(1, 1fr);
            }
        }
        &_card {
            border: 1px solid $border-light;
            box-shadow: 15px 20px 20px rgba($color: $black, $alpha: .02);
            text-align: center;
            padding: 40px 25px;
            @include xl {
                padding-top: 30px;
                padding-bottom: 30px;
            }
            @include lg {
                padding: 25px 15px;
            }
            @include md {
                padding: 15px 10px;
            }
            @include sm {
                padding: 15px 10px;
            }
            &:nth-child(odd) {
                position: relative;
                top: var(--lms-how_it_work);
            }
            &_icon {
                width: var(--lms-big-feature);
                height: var(--lms-big-feature);
                border-radius: 100%;
                margin: auto;
                margin-bottom: 30px;
                @include lg {
                    margin-bottom: 20px;
                }
                @include md {
                    margin-bottom: 15px;
                }
                @include sm {
                    margin-bottom: 10px;
                }
                & svg,
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            & h4 {
                @include font-22;
                @include lg {
                    font-size: 20px;
                }
                @include md {
                    font-size: 18px;
                    margin-bottom: 5px;
                }
                @include sm {
                    margin-bottom: 5px;
                }
            }
            & p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                @include lg {
                    line-height: 1.5;
                }
                @include md {
                    line-height: 1.5;
                }
                @include sm {
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }
    }
    // SPONSOR 
    &.sponsor {
        & .container {
            padding: 0px 15px;
            box-shadow: 0 0 0 !important;
            margin-top: 0px !important;
        }
    }
    & .sponsor_item {
        max-width: calc(100% / 7);
        flex: 0 0 100%;
        text-align: center;
        @include sm {
            max-width: calc(100% / 3);
            margin-bottom: 20px;
        }
    }
}

@import './new_common'