.logo {
    max-width: 127px;
}

#wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-11);
    position: relative;
    font-family: "SVN-Poppins", sans-serif;
    font-weight: 400;
    overflow: hidden;
    color: var(--color-gray-6);
}

#wrapper-content {
    background-image: url(../images/bg_contact.png);
    background-position: bottom center;
    background-repeat: no-repeat;
}

.animate-spin-slow {
    animation: spin 6s linear infinite;
}

.animate-spin-reverse-slow {
    animation: spin 6s linear infinite reverse;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------Header------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* padding: 0 var(--container-space-x); */
    padding: 0;
    z-index: 10;
    mix-blend-mode: lighten;
    background: var(--bg-primary-90);
    backdrop-filter: blur(24px);
}

.header.scrolled {
    mix-blend-mode: unset;
}

.drawer-mobile-content .header {
    position: relative;
}

.header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.header__nav {
    height: var(--header-height);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__nav nav {
    display: flex;
    align-items: center;
    column-gap: var(--nav-item-gap);
    position: relative;
    height: 100%;
}

.drawer-mobile-content .header__nav nav {
    display: block;
}

.header__nav nav a {
    padding: var(--nav-item-space-y) var(--nav-item-space-x);
    background: transparent;
    position: relative;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in;
    font-weight: 500;
    color: var(--color-gray-6);
    font-size: var(--font-size-body-14);
}

.header__nav nav a:hover,
.header__nav nav a.active {
    color: var(--color-purple-7);
}

.header__nav nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    width: 100%;
    height: 90%;

    clip-path: polygon(20% 100%, 0 0, 100% 0, 80% 100%);

    background: linear-gradient(0deg,
            rgba(255, 255, 255, 0.14) 54.75%,
            rgba(255, 255, 255, 0) 94.79%);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.header__nav nav a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 60%;
    margin: 0 auto;
    opacity: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.header__nav nav a:hover::after,
.header__nav nav a:hover::before,
.header__nav nav a.active::after,
.header__nav nav a.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.contact-button {
    display: inline-block;
}

.drawer-mobile-content {
    width: 100%;
    height: inherit;
    position: relative;
}

.mobile-menu-content {
    /* padding: 0 var(--container-space-x); */
    padding: 0;
}

.mobile-menu-content nav {
    display: block;
    margin-top: var(--mobile-menu-content-nav-space-y);
    margin-bottom: var(--mobile-menu-content-nav-space-y);
}

.mobile-menu-content nav a {
    display: block;
    color: var(--color-gray-6);
    padding: var(--mobile-menu-content-nav-item-space);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
}

.mobile-menu-content nav a.active,
.mobile-menu-content nav a:focus,
.mobile-menu-content nav a:hover {
    color: var(--color-purple-7);
    background: var(--color-gray-9);
}

/* --------------------------/Header------------------------- */

/* --------------------------Hero section------------------------- */
#hero-section {
    /* padding-left: var(--container-space-x);
    padding-right: var(--container-space-x); */
}

#hero-section .section__description {
    max-width: 848px;
}

.planet-base,
.planet-glow {
    position: absolute;
    display: block;
    width: 100%;
    top: var(--bg-planet-top);
    left: 0;
    transform: translateY(var(--bg-planet-translate-y));
}

.drawer-mobile-content .planet-base,
.drawer-mobile-content .planet-glow {
    z-index: -1;
}

.planet-base {}

.planet-glow {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

    animation: softerGlow 5s ease-in-out infinite;
}

@keyframes softerGlow {
    0% {
        opacity: 0;
        filter: brightness(1) drop-shadow(0 0 0px #000);
    }

    40% {
        opacity: 1;
        filter: brightness(1.4) drop-shadow(0 0 50px #7b9fff);
    }

    60% {
        opacity: 1;
        filter: brightness(1.6) drop-shadow(0 0 70px #9bb8ff);
    }

    100% {
        opacity: 0;
        filter: brightness(1) drop-shadow(0 0 0px #000);
    }
}

.advantage-bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.advantages {
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    width: auto;
    row-gap: var(--advantage-item-gap-x);
}

.advantages.advantages--pc {
    display: flex;
}

.advantages.advantages--mobile {
    display: none;
}

.advantage__wrapper {
    width: var(--advantage-wrapper-width);
    margin-left: var(--advantage-wrapper-space-x);
    margin-right: var(--advantage-wrapper-space-x);
}

.advantage__wrapper:first-child {
    margin-left: 0;
}

.advantage__wrapper:last-child {
    margin-right: 0;
}

#advantage-2 .advantage__wrapper {
    padding: 12px;
}

.advantage__item {
    flex: 1;
    border-radius: var(--radius-4xl);
    border: 1.5px solid var(--color-gray-8);
    min-height: var(--advantage-item-height);
    height: auto;
    width: 100%;
    background: rgba(18, 7, 36, 0.8);
    position: relative;
    text-align: left;
}

#advantage-1,
#advantage-3 {
    margin-top: 70px;
}

#advantage-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
    height: 274px;
    min-height: unset;
    overflow: visible;
    background-image: url(../images/bg-advantage-item-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    margin-bottom: 24px;
    padding: 12px;
}

#advantage-4 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#advantage-2 img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -30%);
    z-index: -1;
    max-width: 100%;
    height: auto;
}

.cardStack {
    width: 100%;
    z-index: 2;
}

.advantage__header {
    padding: var(--advantage-item-header-space-y) var(--advantage-item-header-space-x);
}

#advantage-2 .advantage__header {
    background: rgba(18, 7, 36, 0.67);
    border-radius: var(--radius-4xl);
}

.advantage__header h3 {
    font-size: var(--font-size-title-24);
    color: var(--color-gray-1);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 6px;
}

.advantage__header p {
    font-size: var(--font-size-body-18);
    color: var(--color-gray-6);
    line-height: 1.4;
}

.advantage__body {
    padding: var(--advantage-item-body-space);
    font-size: var(--font-size-body-18);
    color: var(--color-gray-6);
}

#advantage-3 .graph {
    height: var(--advantage-graph-height);
    display: flex;
    width: 100%;
    margin-bottom: 24px;
}

#advantage-3 .graph div {
    border-radius: 20px;
    width: var(--advantage-graph-width);
}

#advantage-3 .graph div:nth-child(even) {
    background: var(--color-orange-5);
}

#advantage-3 .graph div:nth-child(odd) {
    background: var(--color-purple-6);
}

.hero__video {
    width: 100%;
    border-radius: var(--radius-4xl);
    height: auto;
    overflow: hidden;
    z-index: 1;
    border: 2px solid var(--color-purple-11);
    padding: var(--hero-video-space);
    display: flex;
    justify-self: center;
    align-items: center;
}

/* --------------------------/Hero section------------------------- */

/* --------------------------Coins---------------------------------- */
#coin-market {
    background-color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
}

.coin__item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    min-width: var(--coin-item-width);
    column-gap: var(--coin-item-gap-x);
    color: var(--color-gray-6);
    word-break: keep-all;
}

.coin__item::after {
    content: "";
    position: absolute;
    background: var(--color-gray-8);
    height: 100%;
    width: 1px;
    top: 0;
    right: -12px;
}

.coin__img {
    object-fit: contain;
    max-width: var(--coin-image-size);
    max-height: var(--coin-image-size);
    width: auto;
    height: auto;
}

.coin__title {
    width: fit-content;
}

.coin__price {
    display: flex;
    align-items: center;
}

.coin__price::before {
    content: "$";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-16);
    font-weight: 900;
}

.coin__status {
    display: flex;
    align-items: center;
    column-gap: var(--coin-status-space-x);
}

.coin__status::after {
    content: "%";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-16);
    font-weight: 900;
}

.coin__status.coin__status--up {
    color: var(--color-green-6);
}

.coin__status.coin__status--down {
    color: var(--color-red-6);
}

.coin__status.coin__status--up::before,
.coin__status.coin__status--down::before {
    font-family: "Font Awesome 6 Free";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-16);
    font-weight: 900;
}

.coin__status.coin__status--up::before {
    content: "\f0d8";
}

.coin__status.coin__status--down::before {
    content: "\f0d7";
}

/* --------------------------/Coins---------------------------------- */

/* -----------------------------------Feature------------------------------------- */
#features-section {
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
}

.features {}

.feature__item {
    z-index: 1;
    background: var(--bg-secondary-90);
    border: 1.5px solid var(--color-gray-8);
    border-radius: var(--radius-4xl);
    padding: var(--feature-item-space-y) var(--feature-item-space-x);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: var(--feature-item-height);
    flex: 0 0 var(--feature-item-width);
    row-gap: var(--feature-item-content-gap-x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

/* .feature__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--feature-item-before-width);
    height: var(--feature-item-before-height);
    background: var(--color-purple-6);
    filter: blur(100px);
    z-index: -1;
} */

.feature__info {}

.feature__info h3 {
    max-width: var(--feature-item-title-width);
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading-3);
    margin-bottom: var(--feature-item-content-gap-x);
    color: var(--color-white);
}

.feature__info h3 a:hover {
    color: var(--color-purple-6);
}

.feature__info p {
    max-width: var(--feature-item-text-width);
    font-size: var(--font-size-title-20);
    line-height: var(--line-height-title-20);
    color: var(--color-white-50);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature__item img {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--feature-item-image-width);
    height: auto;
    object-fit: contain;
    z-index: -1;
}

.features .blaze-track {
    justify-content: center;
    transition-timing-function: ease-in-out;
}

/* -----------------------------------/Feature------------------------------------- */

/* -----------------------------------About us------------------------------------- */
#aboutus-section {
    height: var(--aboutus-section-height);
    position: relative;
}

#aboutus-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

#aboutus-section .section__intro {
    margin-top: 12%;
}

#aboutus-section .section__intro img {
    display: block;
    max-width: 180px;
    width: auto;
    height: auto;
    margin: 0 auto;
    position: absolute;
    top: var(--section-intro-image-about-us-top);
    left: 50%;
    transform: translateX(-50%);
}

#aboutus-section .section__description {
    max-width: 646px;
}

#aboutus-section .section__container {
    margin-bottom: 80px;
}

.aboutus__achievement {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: var(--aboutus-achievement-width);
    z-index: 1;
}

.achievement__item {
    width: var(--achievement-item-width);
    padding-left: var(--achievement-item-space-x);
    padding-right: var(--achievement-item-space-x);
    flex: 1;
    position: relative;
}

.achievement__item+.achievement__item::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    left: 0;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.achievement__item h3 {
    color: var(--color-gray-1);
    font-size: var(--font-size-heading-1);
    line-height: var(--line-height-heading-1);
}

.achievement__item p {
    color: var(--color-gray-6);
    font-size: var(--font-size-title-20);
    line-height: var(--line-height-title-20);
}

/* -----------------------------------/About us------------------------------------- */

/* -----------------------------------Courses------------------------------------- */
#courses-section {
    overflow: hidden;
    z-index: 2;
    /* padding-left: var(--container-space-x);
    padding-right: var(--container-space-x); */
}

#courses__bg {
    position: absolute;
    width: 30%;
    max-width: 588px;
    height: auto;
    object-fit: contain;
    top: 0;
    left: 50%;
    transform: translate(-50%, -36%);
    z-index: 1;
}

#courses-section .section__intro {
    margin-top: 10%;
}

#courses-section .section__description {
    max-width: 646px;
}

.course__item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-4xl);
    border: 1.5px solid var(--color-gray-8);
    background: var(--color-gray-10);
    padding: var(--course-item-space-y) var(--course-item-space-x);
    overflow: hidden;
    position: relative;
}

.course__badge {
    border-radius: var(--radius-4xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(67, 60, 60, 0.13);
    padding: var(--course-badge-space-y) var(--course-badge-space-x);
    width: fit-content;
    position: absolute;
    top: var(--course-badge-position-top);
    left: var(--course-badge-position-left);
}

.course__badge p {
    font-size: var(--font-size-body-14);
    line-height: var(--line-height-body-14);
    background: linear-gradient(180deg,
            var(--color-purple-7) 0%,
            var(--color-orange-6) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    text-transform: uppercase;
}

.course__img {
    display: block;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: var(--course-image-ratio);
    border-radius: var(--radius-4xl);
}

.lecturer__item .course__img {
    padding-top: var(--lecturer-image-ratio);
}

.course__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--course-info-space-y) var(--course-info-space-x);
}

.course__title {
    font-size: var(--font-size-title-24);
    color: var(--color-gray-1);
    margin: var(--course-title-space-top) 0 var(--course-title-space-bottom) 0;
    transition: all 0.3s ease;
}

.course__title:hover {
    color: var(--color-purple-7);
}

.course__description {
    font-size: var(--font-size-body-16);
    color: var(--color-gray-6);
    line-height: var(--line-height-body-16);
    margin-bottom: var(--course-description-space-bottom);
}

.course__more {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--color-gray-4);
}

.course__more a:first-child,
.course__more button:first-child {}

.course__more a:first-child:hover,
.course__more button:first-child:hover {
    text-decoration: underline;
}

.course__detail {}

.detail__header {
    margin-top: var(--course-detail-header-space-top);
    margin-bottom: var(--section-block-space-y);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--course-detail-header-space-x);
}

.detail__image {
    flex: 1 1 var(--course-detail-image-width);
    border-radius: var(--radius-2xl);
    width: 100%;
    height: auto;
    max-height: var(--course-detail-image-height);
    overflow: hidden;
}

.detail__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.detail__intro {
    flex: 1 1 var(--course-detail-intro-width);
    display: flex;
    flex-direction: column;
    row-gap: var(--course-detail-intro-space-y);
}

.detail__title {
    font-size: var(--font-size-title-32);
    line-height: var(--line-height-title-32);
    color: var(--color-white);
    font-weight: 600;
}

#lecturer-section .section__description {
    max-width: 808px;
}

.detail__lecturer,
.detail__price {
    color: var(--color-gray-6);
}

.profile .detail__lecturer {
    padding-left: 12px;
    position: relative;
}

.profile .detail__lecturer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 2px solid var(--color-purple-6);
    display: flex;
}

.detail__price span {
    margin-left: var(--course-detail-price-space-left);
    color: var(--color-purple-7);
    font-size: var(--font-size-title-24);
    font-weight: 500;
}

.detail__extra {
    flex: 1;
}

.extra__list {
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--color-gray-6);
    margin-top: var(--extra-list-space-top);
    margin-bottom: var(--extra-list-space-bottom);
}

.extra__list li {
    padding-left: var(--extra-list-item-space-x);
    padding-right: var(--extra-list-item-space-x);
    position: relative;
    font-weight: 500;
}

.extra__list li+li::before {
    content: "";
    position: absolute;
    top: 0;
    height: var(--extra-list-item-before-height);
    width: 0;
    border-left: 2px solid var(--color-gray-8);
    left: 0;
}

.extra__list li:first-child {
    padding-left: 0;
}

.extra__list li:last-child {
    padding-right: 0;
}

.extra__list li i {
    font-size: var(--font-size-body-18);
    margin-right: var(--extra-list-item-icon-space-right);
}

.extra__tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--extra-tag-item-space-left);
}

.extra__tag li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--extra-tag-item-link-space-y) var(--extra-tag-item-link-space-x);
    border-radius: var(--space-sm);
    border: 1px solid var(--color-gray-8);
    color: var(--color-white);
    background: var(--color-gray-9);
}

.extra__tag li.feature a {
    background: var(--bg-orange-to-pink);
}

.detail__body {
    color: var(--color-gray-3);
}

.detail__body strong {
    color: var(--color-gray-1);
    font-weight: 600;
}

.detail__body blockquote,
.detail__body p {
    color: var(--color-gray-6);
    font-size: var(--font-size-title-20);
}

.detail__body h1 {
    font-size: 32px;
}

.detail__body h2 {
    font-size: 24px;
}

.detail__body h3 {
    font-size: 18px;
}

.detail__body h4 {
    font-size: 16px;
}

.detail__body h5 {
    font-size: 14px;
}

.detail__body h6 {
    font-size: 12px;
}

.detail__body h1,
.detail__body h2,
.detail__body h3,
.detail__body h4,
.detail__body h5 {
    color: var(--color-gray-1);
    font-weight: 600;
    line-height: normal;
    margin-bottom: var(--course-detail-content-text-space-bottom);
}

.detail__body ol,
.detail__body ul {
    margin: var(--course-detail-content-list-space-y) 0;
}

.profile .detail__body ol,
.profile .detail__body ul {
    margin-top: 16px;
    margin-bottom: 0;
}

.detail__body ol li,
.detail__body ul li {
    display: block;
    padding-left: 36px;
    position: relative;
}

.detail__body ol li+li,
.detail__body ul li+li {
    margin-top: var(--course-detail-content-list-item-space-top);
}

.detail__body ol li::before,
.detail__body ul li::before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-12);
    font-weight: 900;
    background: var(--color-purple-7);
    color: var(--color-black);
    width: var(--course-detail-content-list-item-before-size);
    height: var(--course-detail-content-list-item-before-size);
    border-radius: 100%;
    margin-right: 16px;
    flex: 0 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}

.detail__body ol li p:first-child,
.detail__body ul li p:first-child {
    color: var(--color-gray-1);
    flex-basis: auto;
}

.detail__body ol li p:last-child,
.detail__body ul li p:last-child {
    margin-bottom: 4px;
}

.detail__body ol li p,
.detail__body ul li p {
    color: var(--color-gray-6);
    flex-basis: 100%;
}

.detail__body p {
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
    flex: 1;
}

.detail__body p:empty {
    padding: 12px 0;
}

.detail__body table tr {}

.detail__body table td {
    border: 1px solid var(--color-gray-8);
    padding: var(--detail-body-table-td-space-y) var(--detail-body-table-td-space-x);
}

.detail__body a {
    text-decoration: underline;
}

.detail__body a:hover,
.detail__body a:focus,
.detail__body a:active {
    color: var(--color-purple-7);
}

.detail__content {
    margin-top: var(--detail-content-space-top);
}

.detail__caption {
    font-size: var(--font-size-title-24);
    margin-bottom: var(--detail-caption-space-bottom);
    color: var(--color-gray-1);
    font-weight: 600;
}

.detail__list {
    font-size: var(--font-size-body-16);
}

.detail-item__title {
    color: var(--color-gray-1);
    font-weight: 600;
}

.detail-item__description {
    color: var(--color-gray-3);
}

/* -----------------------------------/Courses------------------------------------- */

/* -----------------------------------Why us----------------------------------------- */
#why-us-section {
    /* padding-left: var(--container-space-x);
    padding-right: var(--container-space-x); */
}

#whyus-bg {
    position: absolute;
    top: 0;
    left: 50%;
    height: auto;
    width: 60%;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
    transform: translate(-50%, -34%);
    z-index: 0;
}

.main-content .section__block:first-child#courses-section .section__intro {
    margin-top: 5%;
    margin-bottom: 0;
}

.main-content .section__block:first-child #whyus-bg {
    width: 50%;
    object-fit: contain;
    transform: translate(-50%, -44%);
}

#why-us-section .section__intro {
    max-width: 60%;
    z-index: 1;
    margin-top: 10%;
}

.whyus__intro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--intro-item-gap);
    height: auto;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
}

.intro__item {
    flex: 1 1 var(--intro-item-width);
    border-radius: var(--radius-4xl);
    border: 1px solid var(--color-gray-8);
    background: var(--color-gray-10);
    overflow: hidden;
}

.intro__item:first-child {
    flex: 1 0 var(--intro-item-first-width);
    display: flex;
}

.intro__item:nth-child(2) {
    flex: 0 0 430px;
}

.intro__img {
    padding-top: var(--intro-item-image-ratio);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.intro__item:first-child .intro__img {
    padding-top: 0;
    padding-left: 55.1801%;
    background-position: bottom center;
    background-size: cover;
}

.intro__description {
    display: block;
    padding: var(--intro-description-space-y) var(--intro-description-space-x);
}


.intro__item:first-child .intro__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
}

.intro__description h3 {
    font-size: var(--font-size-title-24);
    line-height: var(--line-height-title-24);
    color: var(--color-gray-1);
    margin-bottom: var(--intro-description-space-bottom);
}

.intro__description p {
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
    color: var(--color-gray-6);
}

.intro__checklist {
    margin-top: var(--intro-checklist-space-top);
    max-height: calc(3 * (var(--font-size-body-16) * var(--line-height-body-16) + (2 * var(--intro-checklist-item-space-y)) + 1px));
    overflow-y: auto;
}

.intro__checklist li {
    display: flex;
    align-items: center;
    padding: var(--intro-checklist-item-space-y) 0;
    border-top: 1px solid var(--color-gray-8);
    color: var(--color-gray-1);
    /* Ensure consistent item height for max-height calculation */
    min-height: calc(var(--font-size-body-16) * var(--line-height-body-16) + (2 * var(--intro-checklist-item-space-y)) + 1px);
}

.intro__checklist li::before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-16);
    font-weight: 900;
    background: var(--color-purple-7);
    color: #0e0c15;
    width: var(--intro-checklist-before-size);
    height: var(--intro-checklist-before-size);
    border-radius: var(--radius-full);
    margin-right: var(--intro-checklist-space-right);
}

/* -----------------------------------/Why us---------------------------------------- */

/* -----------------------------------Feedback--------------------------------------- */
#feedback-section {
    z-index: 2;
}

#feedback-bg,
#earth {
    position: absolute;
    object-fit: contain;
    top: 0;
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 0;
    pointer-events: none;
}

#feedback-section .section__intro {
    z-index: 1;
}

#feedback-section .section__title {
    font-size: var(--font-size-heading-2);
    line-height: var(--line-height-heading-2);
}

.feedback__content {
    z-index: 1;
}

.feedbacks+.feedbacks {
    margin-top: var(--feedback-gap-y);
}

.feedback__item {
    border-radius: var(--radius-4xl);
    border: 1.5px solid var(--color-gray-8);
    background: var(--color-gray-11);
    padding: var(--feedback-item-space-y) var(--feedback-item-space-x);
    /*opacity: 0.6;*/
    background: var(--color-gray-10);
    transition: opacity 0.3s ease;
}

.feedback__item:hover {
    opacity: 1;
    background: var(--color-gray-10);
}

.feedback__user {
    display: flex;
}

.user__avatar {
    width: var(--user-avatar-size);
    height: var(--user-avatar-size);
    object-fit: contain;
    margin-right: var(--user-avatar-space-right);
    margin-bottom: var(--user-avatar-space-bottom);
}

.user__info p {
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
    color: var(--color-gray-1);
}

.user__info p:nth-child(2) {
    color: var(--color-gray-6);
}

.feedback__comment {
    color: var(--color-gray-1);
}

/* -----------------------------------/Feedback--------------------------------------- */

/* -----------------------------------Contact--------------------------------------- */
#contact-section {
    overflow: visible;
}

#contact-section.section__block {
    padding-bottom: 0;
}

#contact-bg {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 70%;
    max-width: 100%;
    opacity: 1;
    pointer-events: none;
    transform: translate(-50%, -10%);
    z-index: 0;
    object-fit: cover;
}

#aboutus-section~#contact-section #contact-bg {
    transform: translate(-50%, -3%);
}

#contact-section .section__intro {
    z-index: 2;
    max-width: 100%;
}

.contact__form {
    width: var(--contact-form-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--contact-form-space-bottom);
    z-index: 2;
}

/* -----------------------------------/Contact--------------------------------------- */

/* -----------------------------------Value --------------------------------------- */
#value-section,
#vision-section,
#achievement-section {
    /* padding-left: var(--container-space-x);
    padding-right: var(--container-space-x); */
}

#value-section {
    min-height: auto;
    position: relative;
}

#value-bg-1 img {
    top: 0;
    left: 50%;
    width: calc(100% - var(--container-space-x) * 2);
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -10%);
    z-index: 0;
    pointer-events: none;
    position: absolute;
}

#value-section .section__description {
    max-width: 766px;
}

.value__list {
    width: var(--value-list-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--value-list-space-bottom);
}

.value__item {
    display: block;
    flex: 1 1 var(--value-item-width);
    padding: var(--value-item-space-y) var(--value-item-space-x);
    border: 1px solid transparent;
    border-left-color: var(--color-white-5);
    border-bottom-color: var(--color-white-5);
}

.value__item:nth-child(n + 3) {
    border-top-color: var(--color-white-5);
}

.value__item img {
    width: var(--value-item-image-width);
    height: auto;
    object-fit: contain;
    margin-bottom: var(--value-item-title-space-top);
}

.value__title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: var(--font-size-title-20);
    color: var(--color-gray-1);
    position: relative;
}

.value__title::before {
    content: "";
    height: var(--value-item-title-before-height);
    width: 0;
    left: calc(0px - var(--value-item-space-x));
    position: absolute;
    border-left: 2px solid var(--color-white-20);
    z-index: 1;
}

.value__description {
    margin-top: var(--value-item-title-space-bottom);
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
    color: var(--color-gray-6);
}

/* -----------------------------------/Value --------------------------------------- */

/* -----------------------------------Vision --------------------------------------- */
#vision-section {
    overflow: visible;
    z-index: 1;
    padding-top: 0;
}

#vision-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
    transform: translateY(-35%);
    z-index: 1;
}

#vision-section .section__intro {
    margin-top: 0;
}

#vision-section .section__description {
    max-width: 766px;
}

.visions__description img {
    object-fit: contain;
    max-width: 48.80%;
    width: auto;
    height: auto;
}

.visions__description .section__title {
    font-size: var(--font-size-heading-2);
    line-height: var(--line-height-heading-2);
}

.visions__description .section__description {
    font-size: var(--font-size-body-18);
    line-height: var(--line-height-body-18);
}

.visions__images {
    position: relative;
}

.vision__image {
    width: 100%;
    height: 90%;
    max-height: 90%;
    border-radius: var(--radius-4xl);
    border: 1.5px solid var(--color-gray-8);
    background: var(--color-gray-10);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.vision__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    padding-top: 100%;
    width: 100%;
    height: 100%;
    background: url("../images/vision_item_bg.png") no-repeat top center / contain;
    filter: blur(60px);
    transform: translateX(-50%);
    mix-blend-mode: color-dodge;
}

.vision__image img {
    display: block;
    max-width: 80%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


.visions__images p {
    font-size: var(--font-size-title-32);
    color: var(--color-gray-1);
}

/* -----------------------------------/Vision --------------------------------------- */

/* -----------------------------------Achievement --------------------------------------- */
#achievement-section {
    z-index: 1;
    background: url(../images/bg_achievement_section_2.png) repeat-x center top / contain;
}

#achievement-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    object-fit: cover;
    pointer-events: none;
}

.achievement__section {
    width: 100%;
    z-index: 1;
}

.achievement__section .section__title {
    font-size: var(--font-size-heading-2);
}

.achievements__images {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.achievements__descriptions {
    width: 100%;
}

.description__item {
    width: 100%;
}

.description__item+.description__item {
    border-top: 1px solid var(--color-gray-8);
}

.description__title {
    color: var(--color-gray-1);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.description__title::before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-body-12);
    font-weight: 900;
    background: var(--color-purple-7);
    color: var(--color-black);
    width: var(--description-title-before-size);
    height: var(--description-title-before-size);
    border-radius: 100%;
    margin-right: var(--description-title-before-space-right);
}

.description__title::after {
    display: flex !important;
    color: var(--color-gray-6);
    border: 2px solid var(--color-gray-6);
    width: var(--description-title-after-size) !important;
    height: var(--description-title-after-size) !important;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    top: 50% !important;
    transform: translateY(-50%);
}

.description__content {
    color: var(--color-gray-3);
}

.achievement__image {
    width: 100%;
    height: auto;
}

.achievement__image>div {
    border-radius: var(--radius-4xl);
    border: 1px solid var(--color-gray-8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement__image>div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------/Achievement --------------------------------------- */

/* -----------------------------------News --------------------------------------- */
#news-section {
    /* padding-left: var(--container-space-x);
    padding-right: var(--container-space-x); */
}

.news__list {
    width: 100%;
    max-width: 100%;
}

.news__list.news__list--small {}

.news__item {
    display: flex;
    width: 100%;
    column-gap: var(--news-item-gap-x);
    overflow: hidden;
}

.news__list.news__list--small .news__item {
    column-gap: var(--news-item-small-gap-x);
}

.news__item+.news__item {
    margin-top: var(--news-item-space-top);
}

.news__img {
    flex: 0 0 var(--news-item-image-width);
    border-radius: var(--radius-4xl);
    overflow: hidden;
}

.news__list.news__list--small .news__img {
    flex-basis: var(--news-item-small-image-width);
    border-radius: var(--radius-md);
}

.news__img img {
    flex: 1 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
    transform-origin: center;
}

.news__item:hover .news__img img {
    transform: scale(1.1);
}

.news__date {
    color: var(--color-gray-6);
    font-size: var(--font-size-body-14);
    margin: var(--news-date-space-y) 0;
}

.news__list.news__list--small .news__date {
    margin-top: 0;
}

.news__title {
    color: var(--color-gray-1);
    font-size: var(--font-size-title-20);
    font-weight: 500;
    line-height: var(--line-height-title-20);
    margin: var(--news-title-space-y) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news__title:hover {
    color: var(--color-purple-7);
}

.news__list.news__list--small .news__title {
    font-size: var(--font-size-body-14);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.news__summary {
    color: var(--color-gray-3);
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* .category {
    padding-top: var(--news-category-space-y);
    padding-bottom: var(--news-category-space-y);
    color: var(--color-gray-6);
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    height: auto;
}

.category li a {
    padding: var(--news-category-item-space);
    border-bottom: 2px solid var(--color-gray-8);
    transition: all 0.3s ease;
}

.category li a:hover,
.category li a.active {
    color: var(--color-white);
    border-bottom-color: var(--color-purple-6);
} */

.category {
    display: flex;
    padding-top: var(--news-category-space-y);
    padding-bottom: var(--news-category-space-y);
    color: var(--color-gray-6);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.category li {
    flex: 0 0 auto;
    list-style: none;
}

.category li a {
    display: inline-block;
    white-space: nowrap;
    padding: var(--news-category-item-space);
    border-bottom: 2px solid var(--color-gray-8);
    transition: all 0.3s ease;
    text-decoration: none;
}

.category li a:hover,
.category li a.active {
    color: var(--color-white);
    border-bottom-color: var(--color-purple-6);
}

.article {}

.article__title {
    font-size: var(--font-size-heading-3);
    font-weight: 500;
    color: var(--color-white);
}

.article__img {
    margin: var(--article-image-space-y) auto;
    max-width: var(--article-image-width);
    width: var(--article-image-width);
    height: auto;
    object-fit: contain;
}

.article__content {
    color: var(--color-gray-6);
    line-height: var(--line-height-body-16);
    margin-bottom: var(--article-content-space-bottom);
}

.article__content h1,
.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content strong {
    color: var(--color-gray-1);
    font-weight: 400;
}

.article__content p:empty {
    padding: var(--article-content-break-space-y) 0;
}

.article__content ul {
    padding-left: var(--article-content-list-space-left);
    list-style-type: circle;
}

.article__content ul li {}

.article__content a {
    text-decoration: underline;
}

.article__content a:hover {
    color: var(--color-purple-6);
}

.article__tags {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--article-tags-gap-x);
    margin-bottom: var(--article-tags-space-bottom);
    flex-wrap: wrap;
}

.article__tags li {
    display: flex;
    align-items: center;
    justify-self: center;
    border-radius: var(--radius-lg);
    background: var(--color-gray-9);
    padding: var(--article-tags-item-space);
    font-size: var(--font-size-body-14);
    font-weight: 500;
    line-height: var(--line-height-body-14);
    color: var(--color-gray-6);
}

/* -----------------------------------News --------------------------------------- */

/* -----------------------------------Profile------------------------------------ */
.profile {
    display: flex;
    column-gap: var(--profile-gap-x);
}

.profile__info {
    flex: 1;
}

.profile__info>*+* {
    margin-top: var(--profile-info-gap-x);
}

.profile__title {
    color: var(--color-white);
    font-size: var(--font-size-heading-2);
    font-weight: 600;
    line-height: var(--line-height-heading-2);
}

.profile__avatar {
    flex: 1;
    border-radius: var(--radius-4xl);
    overflow: hidden;
    border: 1.5px solid var(--color-grap-8);
}

.profile__avatar img {}

/* -----------------------------------/Profile------------------------------------ */

/* -----------------------------------Footer------------------------------------------ */
.footer {
    display: block;
    margin: 0 auto;
    z-index: 3;
    /* padding: var(--footer-space-top) var(--container-space-x); */
    padding: var(--footer-space-top) 0;
    position: relative;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.00) 100%);
    pointer-events: none;
}

.footer__wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer__nav {
    position: relative;
    height: auto;
    width: 100%;
}

.footer__column {
    max-width: 20%;
    display: flex;
    flex-direction: column;
    row-gap: 38px;
}

.footer__column.autowidth {
    max-width: unset;
    width: fit-content;
}

.footer__head {
    height: 50px;
    font-size: var(--font-size-body-16);
    line-height: var(--line-height-body-16);
    font-weight: 500;
    color: var(--color-gray-6);
}

.footer__head img {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer__body {
    font-size: var(--font-size-body-14);
    line-height: var(--line-height-body-14);
    color: var(--color-gray-1);
}

.footer__body *+* {
    margin-top: 6px;
}

.footer__nav a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer__nav a:hover {
    color: var(--color-purple-6);
}

.footer__copyright {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: var(--footer-copyright-space-y) 0;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-gray-4);
}

.footer__social {
    display: flex;
    justify-content: space-between;
    column-gap: 32px;
}

.footer__social li+li {
    margin-top: 0;
}

.footer__social li a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-9);
    background: var(--color-gray-10);
    color: var(--color-gray-1);
    text-decoration: none;
    transition: all 0.2s ease;
    height: var(--footer-social-size);
    width: var(--footer-social-size);
}

.footer__social li a:hover {
    background: var(--color-gray-7);
}

/* -----------------------------------/Footer------------------------------------------ */