* {
    box-sizing: border-box;
}

:root {
    --primary-color: #1ebfc1;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: "Poppins", sans-serif;
}

/* COMMON */
.main-content {
    width: 1170px;
    max-width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.btn {
    display: inline-block;
    min-width: 108px;
    padding: 20px 41px 21px;
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    border-radius: 14px;
    background: #2ac9bf;
    line-height: normal;
}

.btn:hover {
    opacity: 0.9;
}

.heading {
    color: #0d1111;
    font-weight: 700;
}

.heading.lv1 {
    font-size: 6.2rem;
    line-height: 1.16;
}

.heading.lv2 {
    font-size: 4.2rem;
    line-height: 1.33;
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp.line-2 {
    --line-clamp: 2;
}

.line-clamp.line-3 {
    --line-clamp: 3;
}

.sub-heading {
    color: #767e7e;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 4.6px;
}

/* Header */
.header.fixed {
    position: sticky;
    z-index: 999;
    top: -38px;
    background: #fff;
}

.header .body {
    display: flex;
    align-items: center;
    padding: 52px 0 18px;
}

.header .nav ul {
    display: flex;
    margin-left: 235px;
}

.header .nav li {
    color: #2f3a3b;
    font-size: 1.6rem;
}

.header .nav li:hover a {
    text-shadow: 1px 0 0 currentColor;
}

.header .nav li.active {
    font-weight: 600;
}

.header .nav li.active a {
    cursor: default;
}

.header .nav li a {
    padding: 8px 19.5px;
}

.header .action {
    margin-left: auto;
}

.header .action-link {
    color: #494949;
    font-size: 1.6rem;
}

.header .action-btn {
    background: transparent;
    padding: 12px 24px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    color: #1ebfc1;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    margin-left: 24px;
}

.header .action-btn:hover {
    opacity: 1;
    background: var(--primary-color);
    color: #fff;
}

/* Hero */
.hero {
    margin-top: 32px;
}

.hero .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero .info {
    width: 39%;
}

.hero .info .sub-title {
    color: #767e7e;
    font-size: 1.4rem;
}

.hero .info .heading {
    margin-top: 18px;
}

.hero .desc {
    width: 374px;
    color: #9da6a5;
    font-size: 1.8rem;
    line-height: 1.78;
    margin-top: 46px;
}

.hero .hero-cta {
    display: flex;

    margin-top: 52px;
}

.hero .hero-cta .btn-cta {
    min-width: 186px;
}

.hero .hero-cta .btn-play {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    box-shadow: 0 22px 50px 0 rgba(0, 0, 0, 0.05);
    margin-left: 50px;
}

.hero .hero-cta .btn-play:hover {
    opacity: 0.9;
}

.hero .hero-thumb {
    position: relative;
    width: 55%;
}

.hero-thumb .hero-img {
    width: 88%;
    height: 631px;
    object-fit: cover;
    background: #e0f7f6;
    float: right;
}

.hero-card {
    position: absolute;
    padding: 18px 25px;
    background: #fff;
    box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
}

.hero-card.course {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 157px;
    border-radius: 18px;
    top: 149px;
}

.hero-card .label {
    display: flex;
    justify-content: center;
    color: #0d1111;
    font-size: 1rem;
    font-weight: 500;
}

.hero-card.course .content {
    color: #0d1111;
    font-size: 1rem;
    font-weight: 500;
    line-height: 16px;
}

.hero-card.course .icon {
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-card.course .icon::after {
    content: "";
    position: absolute;
    bottom: 8px;
    display: block;
    width: 28px;
    height: 4px;
    background: #fff;
    border-radius: 999px;
}

.hero-card.card-schedules {
    position: absolute;
    bottom: 46px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
}

.hero-card.card-schedules .charts {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-card.card-schedules .chart {
    position: relative;
    width: 74px;
    height: 6px;
    border-radius: 3px;
    background: #edf1f5;
}
.hero-card.card-schedules .chart + .chart {
    margin-top: 12px;
}

.hero-card.card-schedules .chart:last-child {
    width: 26px;
    height: 6px;
}

.hero-card.card-schedules .chart:first-child::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 39px;
    height: 6px;
    border-radius: 999px;
    background: #fb9899;
    top: 0;
    left: 0;
}

.hero-card.card-schedules .chart:nth-child(2)::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 51px;
    height: 6px;
    border-radius: 999px;
    background: #fb9899;
    top: 0;
    left: 0;
}

.hero-card.card-schedules .chart:nth-child(3)::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 33px;
    height: 6px;
    border-radius: 999px;
    background: #fb9899;
    top: 0;
    left: 0;
}

.hero-card.card-students {
    position: absolute;
    bottom: 41px;
    right: 45px;
    border-radius: 24px;
    background: #fefefd;
    box-shadow: 0 12px 80px 0 rgba(0, 0, 0, 0.05);
}

.hero-card.card-students .label {
    justify-content: flex-start;
}

.hero-card.card-students .avatar-group {
    display: flex;
    margin-top: 8px;
}

.hero-card.card-students .avatar {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    object-fit: cover;
    background: #1ebfc1;
}

.hero-card.card-students .avatar + .avatar {
    margin-left: -7px;
}

.hero-card.card-students .avatar:nth-child(2) {
    background: #ffc147;
}

.hero-card.card-students .avatar:nth-child(3) {
    background: #ff947a;
}

.hero-card.card-students .avatar:nth-child(4) {
    background: #bf83ff;
}

.hero-card.card-students p.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

/* Features */
.features {
    margin-top: 209px;
}

.features .body {
    width: 84%;
}

.features .heading {
    margin-top: 18px;
    width: 577px;
}

.features .desc {
    width: 590px;
    margin-top: 18px;
    color: #767e7e;
    font-size: 1.8rem;
    line-height: normal;
}

.features .feature-list {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
}

.feature-list .item {
    max-width: 223px;
    border-radius: 12px;
}

.feature-list .item:hover {
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.feature-list .feature-title {
    margin-top: 26px;
    color: #0d1111;
    font-size: 2rem;
    font-weight: 600;
    line-height: normal;
}

.feature-list .feature-desc {
    margin-top: 16px;
    color: #9da6a5;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.69;
}

/* Courses */
.courses {
    margin-top: 130px;
}

.courses .heading {
    margin-top: 18px;
}

.courses .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 19px;
}

.courses .content .desc {
    width: 45%;
    color: #767e7e;
    font-size: 1.8rem;
    line-height: 1.78;
}

.courses .content .link {
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: normal;
}

.course-list {
    display: flex;
    gap: 47px;
    margin-top: 79px;
    overflow: hidden;
}

.course-list .course-item {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    flex-shrink: 0;
    width: calc(33.33% - 31.33px);
}

.course-list .thumb img {
    width: 100%;
    height: 393px;
    border-radius: 8px;
    opacity: 0.35;
    background: #d0efed;
    object-fit: cover;
    object-position: center;
}

.course-list .thumb img:hover {
    opacity: 1;
}

.course-list .info {
    position: relative;
    z-index: 1;
    bottom: 37px;
    width: 91%;
    padding: 18px 25px 29px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 90px 0 rgba(0, 0, 0, 0.05);
}

.course-list .info:hover ~ .thumb img {
    opacity: 1;
}

.course-list .info .title {
    color: #0d1111;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: normal;
}

.course-list .info .free {
    margin-top: 16px;
    color: #767e7e;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
}

.course-list .info .free strong {
    color: #0d1111;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: normal;
}

.course-list .info .desc {
    margin-top: 6px;
    color: #9da6a5;
    font-size: 1.4rem;
    line-height: normal;
}

.course-list .course-summary {
    display: flex;
    margin-top: 18px;
    gap: 10px;
}

.course-list .course-summary li {
    display: flex;
    align-items: center;
    color: #9da6a5;
    font-size: 1.4rem;
    line-height: normal;
}

.course-list .course-summary li::before {
    display: inline-block;
    content: "";
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    margin-right: 6px;
}

/* Stats */
.stats {
    margin-top: 265px;
}

.stats .main-content {
    width: 862px;
}

.stats .body {
    display: flex;
    justify-content: space-between;
}

.stats .column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats .quantity {
    color: #0d1111;
    font-size: 6.2rem;
    font-weight: 700;
    line-height: normal;
}

.stats .label {
    color: #767e7e;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: normal;
}

/* Testimonials */
.testimonials {
    margin-top: 264px;
}

.testimonials .body {
    display: flex;
    align-items: center;
    gap: 72px;
}

.testimonials .info {
    width: 36%;
}

.testimonials blockquote {
    margin-top: 28px;
    color: #5d6564;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.testimonials .info .desc {
    margin-top: 33px;
    color: #767e7e;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
}

.testimonials .info .desc::before {
    content: "-";
    color: #070707;
    font-weight: 500;
    line-height: normal;
}

.testimonials .info .desc strong {
    color: #070707;
    font-weight: 500;
    line-height: normal;
}

.testimonials .controls {
    display: flex;
    gap: 30px;
    margin-top: 52px;
}

.testimonials .controls .control-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
}

.testimonials .controls .control-btn:hover {
    cursor: pointer;
    opacity: 0.9;
}

.testimonials .images {
    flex: 1;
    position: relative;
}

.testimonials .avatar-frame {
    position: absolute;
    border-radius: 50%;
}

.testimonials .avatar-frame:first-child {
    top: -123px;
    right: 123px;
    width: 235px;
    height: 235px;
    border-radius: 50%;
    background: #ff8282;
}

.testimonials .avatar-frame:nth-child(2) {
    width: 92px;
    height: 92px;
    background: var(--primary-color);
    top: -206px;
    right: 395px;
}

.testimonials .avatar-frame:nth-child(3) {
    width: 92px;
    height: 92px;
    background: #bf83ff;
    top: -185px;
    right: 0;
}

.testimonials .avatar-frame:nth-child(4) {
    width: 78px;
    height: 78px;
    background: #b1dfdc;
    top: 100px;
    right: 32px;
}

.testimonials .avatar-frame:nth-child(5) {
    width: 78px;
    height: 78px;
    background: #ff947a;
    bottom: -243px;
    right: 329px;
}

.testimonials .avatar-frame:nth-child(6) {
    width: 78px;
    height: 78px;
    background: #ffc147;
}

.testimonials .avatar-frame .avatar {
    object-fit: cover;
    width: 100%;
}

/* Cta */
.cta {
    margin-top: 167px;
    background: #def6f5;
    padding: 76px 0 88px;
}

.cta .body {
    display: flex;
    align-items: center;
    gap: 410px;
}

.cta .desc {
    margin-top: 18px;
    color: #767e7e;
    font-size: 1.8rem;
    line-height: normal;
}

/* Footer */
.footer {
    margin-top: 130px;
}

.footer .row {
    display: flex;
    justify-content: space-between;
}

.footer .title {
    color: #2e2e2e;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: normal;
}

.footer .list {
    margin-top: 25px;
    color: #535353;
    font-size: 1.6rem;
    line-height: normal;
}

.footer li + li {
    margin-top: 18px;
}

.footer .column:last-child li {
    display: flex;
    gap: 9px;
}

.footer .copyright {
    text-align: center;
    color: #b0b5b4;
    font-size: 1.8rem;
    line-height: normal;
    padding: 80px 0 50px;
}