* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

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

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

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

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.btn {
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.heading.lv2 {
    color: #0d1111;
    font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.33;
}

.card-hover {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ========== HEADER ========== */
.header {
    background: #fff;
}

.header.fixed {
    position: sticky;
    top: -44px;
    z-index: 1;
}

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

.header .body .logo {
    display: block;
}

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

.header .nav ul {
    display: flex;
}

.header .nav a {
    padding: 8px 19.5px;
    color: #2f3a3b;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
}

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

.header .action {
    display: flex;
    margin-left: 133.5px;
}

.header .action .btn {
    padding: 12px 24px;
    color: #494949;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
    /* background-color: orange; */
}

.header .sign-in-btn {
    border-radius: 6px;
}

.action .btn.active {
    color: #1ebfc1;
    font-weight: 600;

    border-radius: 6px;
    border: 1px solid #1ebfc1;
}

/* ========== HERO ========== */
.hero .body {
    margin-top: 25px;
    padding-top: 25px;
    padding-bottom: 79px;
    display: flex;
}
/* HERO CONTENT */
.body .content-block .eyebrow {
    color: #767e7e;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
}

.body .content-block .heading.lv1 {
    margin-top: 18px;
    color: #0d1111;
    font-size: 6.2rem;
    font-weight: 700;
    line-height: 1.16; /* 116.129% */
}

.body .content-block .desc {
    margin-top: 46px;
    max-width: 374px;
    color: #9da6a5;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.78; /* 177.778% */
}

.body .content-block .desc .nowrap {
    white-space: nowrap;
}

.body .cta-group {
    margin-top: 52px;
    display: flex;
    align-items: center;
    gap: 0 50px;
}

.body .cta-group .btn-cta {
    padding: 20px 41px 21px;
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: normal;

    border-radius: 14px;
    background: #1ebfc1;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.05);
}

.body .cta-group .btn-play {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 62px;
    height: 62px;

    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 22px 50px 0 rgba(0, 0, 0, 0.05);
}

/* HERO MEDIA */
.media-block {
    position: relative;
}

.body .media-block .img {
    display: block;
    width: 576px;
    height: 631px;
    object-fit: cover;
}

/* Courses */
.media-block .media-card--courses {
    position: absolute;
    top: 149px;
    left: -40px;
    padding: 17px 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: #8bbde4;
    border-radius: 1.8rem;
    background: #fefefd;
    box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
}

.media-card--courses .book-icon {
    position: relative;
    display: inline-block;
}

.media-card--courses .book-icon img {
    display: block;
}

.media-card--courses .book-icon::after {
    content: "";
    position: absolute;

    width: 2.8rem;
    height: 0.4rem;

    background-color: #fff;
    border-radius: 3px;

    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.media-card--courses .title {
    margin-left: 16px;
    display: flex;
    align-items: center;

    max-width: 55px;

    color: #0d1111;
    font-size: 1rem;
    font-weight: 500;
}

/* Schedules */
.media-block .media-card--schedules {
    position: absolute;
    left: -65px;
    bottom: 46px;

    padding: 16px 25px 23px;
    width: 12.4rem;

    border-radius: 2.4rem;
    background: #fff;
    box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
}

.media-card--schedules .schedule-lines .line {
    margin-bottom: 12px;
    display: block;

    width: 7.4rem;
    height: 0.6rem;

    background-color: #fff;
    border-radius: 5px;
}

.schedule-lines .line:first-child {
    margin-top: 16px;
    background: linear-gradient(to right, #fb9899 52%, #edf1f5 52%);
}

.schedule-lines .line:nth-child(2) {
    background: linear-gradient(to right, #fb9899 69%, #edf1f5 69%);
}

.schedule-lines .line:nth-child(3) {
    background: linear-gradient(to right, #fb9899 44%, #edf1f5 44%);
    margin-bottom: 16;
}

.schedule-lines .line:last-child {
    margin: 0 auto;
    width: 35%;
    background: #edf1f5;
}

/* Students */
.media-block .media-card--students {
    position: absolute;
    right: 45px;
    bottom: 41px;

    padding: 17px 35px;
    display: inline-block;

    border-radius: 2.4rem;
    background: #fefefd;
    box-shadow: 0 12px 80px 0 rgba(0, 0, 0, 0.05);
}

.media-block .media-card--students .avatars {
    display: flex;
}

.media-block .media-card--students .avatar {
    margin-top: 8px;
    width: 33px;
    height: 33px;
    object-fit: cover;

    border-radius: 50%;
}

.media-block .media-card--students .avatar:not(:first-child) {
    margin-left: -10px;
}

.avatar.quantity-students {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #1ebfc1;

    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

/* ========== FEATURES ========== */
.features {
    padding: 30px 0;
    margin-top: 100px;
}

.features .feature-content .eyebrow,
.courses .course-content .eyebrow {
    color: #767e7e;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: normal;
}

.feature-content .heading.lv2,
.course-content .heading.lv2 {
    margin-top: 18px;
    max-width: 577px;
}

.feature-content .desc,
.course-content .desc {
    margin-top: 18px;
    max-width: 590px;
    color: #767e7e;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: normal;
}

.features .feature-list {
    margin-top: 80px;
    display: flex;
}

.feature-list .item:first-child {
    margin-right: 209px;
}

.feature-list .item:first-child .desc {
    max-width: 168px;
}

.feature-list .item:nth-child(2) {
    margin-right: 200px;
}

.feature-list .item:nth-child(2) .desc,
.feature-list .item:nth-child(3) .desc {
    max-width: 223px;
}

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

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

/* ========== COURSES ========== */
.courses {
    margin-top: 70px;
    padding: 30px 0 154px;
}

.courses .course-content .desc {
    margin-top: 19px;
}

.courses .course-list {
    margin-top: 79px;

    display: flex;
    gap: 0 47px;
}

.course-list .course-card .card-media {
    position: relative;
}

.course-list .course-card .card-media img {
    display: block;

    width: 359px;
    height: 393px;
    object-fit: cover;

    border-radius: 0.8rem;
    opacity: 0.35;
    background: #d0efed;
}

.course-list .course-card__content {
    position: absolute;
    bottom: -124px;
    left: 50%;
    transform: translateX(-50%);

    padding: 18px 82px 29px 25px;
    width: 325px;

    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 90px 0 rgba(0, 0, 0, 0.05);
}

.course-card__content .title {
    color: #0d1111;
    font-size: 2.2rem;
    font-weight: 700;
}

.course-card__content .price,
.course-card__content .desc,
.course-card__content .course-meta {
    margin-top: 16px;

    color: #767e7e;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: normal;
}

.course-card__content .price strong {
    color: #0d1111;
    font-size: 2.2rem;
    font-weight: 700;
}

.course-card__content .desc,
.course-card__content .course-meta {
    margin-top: 6px;
    font-size: 1.4rem;
}

.course-card__content .course-info {
    display: flex;
    gap: 0 10px;
}

.course-info .course-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
}

.course-info .dot {
    width: 6px;
    height: 6px;
    background-color: #1ebfc1;
    border-radius: 50%;
}

/* ==========STATS ========== */
.stats {
    margin-top: 205px;
    padding: 30px 0;
}

.stats .body {
    margin: 0 auto;

    display: flex;
    justify-content: space-between;

    width: 862px;
}

.body .stats-item .stats-number {
    color: #0d1111;
    text-align: center;
    font-size: 6.2rem;
    font-weight: 700;
    line-height: normal;
}

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

/* ========== FEEDBACK ==========*/
.feedback {
    margin-top: 241px;
    padding: 30px 0 83px;
}

.feedback .feedback-body {
    display: flex;
    align-items: center;
}

.feedback-body .feedback-content {
    margin-right: 345px;
}

.feedback-body .feedback-content blockquote {
    margin-top: 27px;
    width: 419px;
    color: #5d6564;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.feedback-content .feedback-author {
    margin-top: 33px;
    display: flex;
    align-items: center;
}

.feedback-content .feedback-author .feedback__author-line {
    margin-right: 5px;
    width: 8px;
    height: 2px;
    background: #070707;
}

.feedback-content .feedback-author .feedback-author-name {
    color: #070707;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.feedback-content .feedback-author .feedback-author-name .feedback-author-role {
    color: #767e7e;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

.feedback-content .feedback-control {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: #2ac9bf;
}

/* Avatar */
.feedback .feedback-avatars {
    position: relative;
}

.feedback .feedback-avatars .avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
}

.feedback .feedback-avatars .avatar-xlg {
    width: 235px;
    height: 235px;
}

.feedback .feedback-avatars .avatar-lg {
    width: 110px;
    height: 110px;
}

.feedback .feedback-avatars .avatar-md {
    width: 92px;
    height: 92px;
}

.feedback .feedback-avatars .avatar-sm {
    width: 78px;
    height: 78px;
}

.feedback-avatars .avatar-1,
.feedback-avatars .avatar-2,
.feedback-avatars .avatar-3,
.feedback-avatars .avatar-4,
.feedback-avatars .avatar-5 {
    position: absolute;
}

.feedback-avatars .avatar-1 {
    top: -88px;
    right: -171px;
}

.feedback-avatars .avatar-2 {
    top: -107px;
    left: -129px;
}

.feedback-avatars .avatar-3 {
    bottom: 6px;
    left: -273px;
}

.feedback-avatars .avatar-4 {
    bottom: -139px;
    left: -61px;
}

.feedback-avatars .avatar-5 {
    bottom: -110px;
    right: -139px;
}

/* ========== CTA ========== */
.cta {
    margin-top: 130px;
    background: #def6f5;
}

.cta .cta-inner {
    padding: 76px 0 86px;

    display: flex;
    align-items: center;
}

.cta-inner .cta-content {
    margin-right: 410px;
}

.cta-inner .cta-content .heading.lv2 {
    color: #070707;
    line-height: normal;
}

.cta-inner .cta-content .cta-desc {
    margin-top: 18px;
    max-width: 397px;

    color: #767e7e;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cta-inner .cta-action .btn-primary {
    padding: 20px 41px 21px;
    border-radius: 14px;
    border: none;
    background: #2ac9bf;

    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* ========== FOOTER ========== */
footer {
    margin-top: 80px;
    padding: 50px 0 50px;
}

.footer__row {
    display: flex;
    align-items: flex-start;
}

.footer__row .footer__logo,
.footer__row .footer__column:nth-child(2),
.footer__row .footer__column:nth-child(3) {
    margin-right: 144px;
}

.footer__row .footer__column:nth-child(4) {
    margin-right: 137px;
}

.footer__logo img {
    display: block;
}

.footer__row .footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__column .footer__heading {
    color: #2e2e2e;
    font-size: 1.8rem;
    font-weight: 500;
}

.footer__column .footer__list .footer__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #535353;
    font-size: 1.6rem;
    font-weight: 400;

    transition: 0.2s ease;
}

.footer__column .footer__list .footer__link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    width: 0;
    height: 0.1rem;
    background: currentColor;
    transition: width 0.2s ease;
}

.footer__column .footer__list .footer__link:hover::after {
    width: 100%;
}

.footer__column:nth-child(4) .footer__list a {
    width: 157px;
}

.footer__column .footer__list li:first-child {
    margin-top: 26px;
}

.footer__column .footer__list li:not(:last-child) {
    margin-bottom: 18px;
}

.footer__bottom {
    text-align: center;
    margin-top: 80px;
    color: #b0b5b4;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}