@charset "UTF-8";


main {
    background: var(--square-grid-background);
}

.header {
    height: calc((100vw - var(--side-gap) * 2) * 1.25);
}
@media (min-width: 640px) {
    .header {
        --top-padding: 48px;
        height: clamp(0px, (100vw - var(--side-gap) * 2) * 0.38, (var(--max-width) - var(--side-gap) * 2) * 0.38);
    }
}

.header-backdrop {
    background-image: url(./header-course-single-basics-mobile.539ca771.svg);
}
@media (min-width: 640px) {
    .header-backdrop {
        background-image: url(./header-aqua-solid.95a38f0b.svg);
    }
}

.header-backdrop.scratch {
    background-image: url(./header-course-single-scratch-mobile.7a8fd7b6.svg);
}
@media (min-width: 640px) {
    .header-backdrop.scratch {
        background-image: url(./header-course-single-scratch.c65cd79b.svg);
    }
}

.header-backdrop.coding {
    background-image: url(./header-course-single-coding-mobile.c4988c7f.svg);
}
@media (min-width: 640px) {
    .header-backdrop.coding {
        background-image: url(./header-course-single-coding.b7760fe9.svg);
    }
}

.header-backdrop.ai {
    background-image: url(./header-course-single-ai-mobile.044816a0.svg);
}
@media (min-width: 640px) {
    .header-backdrop.ai {
        background-image: url(./header-course-single-ai.9ca01fbd.svg);
    }
}

.header .header-backdrop img {
    max-width: calc(100% + var(--column-gap) * 2.5);
    width: calc(100% + var(--column-gap) * 2.5);
    height: auto;
    margin-bottom: 24px;
    margin-top: calc(4 * var(--flow-space));
}
@media (min-width: 640px) {
    .header .header-backdrop img {
        margin-bottom: 0;
        margin-top: 0;
    }
}

.header .header-backdrop.ai img {
    margin-top: calc(3 * var(--flow-space));
}
@media (min-width: 640px) {
    .header .header-backdrop.ai img {
        position: relative;
        margin-bottom: 0;
        margin-top: 0;
    }
}

.header .header-backdrop.coding img {
    margin-top: calc(2 * var(--flow-space));
}
@media (min-width: 640px) {
    .header .header-backdrop.coding img {
        margin-bottom: 0;
        margin-top: 0;
    }
}

.header :is(h1, h2, h3, h4).en {
    transform: scale(1);
    transform-origin: top left;
}

@media (min-width: 640px) {
    .header-backdrop div {
        margin-top: -48px !important;
    }
}
@media (min-width: 1440px) {
    .header-backdrop div {
        margin-top: 0px !important;
    }
}

.course-ai .class-calendar {
    --base-spacing: 6px;
}
@media (min-width: 640px) {
    .course-ai .class-calendar {
        margin-top: 0;
        border-left: 1px solid #ff7474;
        padding-left: calc(var(--base-spacing) * 4);
    }
}

.course-ai .class-calendar h5 {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}
.course-ai .class-calendar h5 span {
    margin-right: 6px;
    word-break: keep-all;
}
.course-ai .class-calendar h5 span:last-child {
    margin-left: 8px;
}
@media (min-width: 1024px) {
    .course-ai .class-calendar h5 span {
        margin-right: 6px;
    }
    .course-ai .class-calendar h5 span:last-child {
        margin-left: 24px;
    }
}

.course-ai .topics ul {
    list-style: none;
}

.course-ai .topics ul li {
    background-image: url(./list-dot_red.b77aa9d4.svg);
    background-position: top 3px left;
    background-repeat: no-repeat;
    background-size: auto 14px;
    padding-left: 30px;
    line-height: 14px;
    margin-bottom: 24px;
}
.course-ai .topics ul li:last-child {
    margin-bottom: 0;
}

.course-english .topics ul li {
    background-image: url(./list-dot_blue.b6064890.svg);
    background-position: top 3px left;
    background-repeat: no-repeat;
    background-size: auto 14px;
    padding-left: 30px;
    line-height: 14px;
    margin-bottom: 24px;
}
.course-english .topics ul li:last-child {
    margin-bottom: 0;
}

.course-curriculum ul {
    column-gap: 7%;
    row-gap: 24px;
}

.course-curriculum ul img {
    width: 100%;
    margin-bottom: 8px;
}

.course-curriculum ul figcaption {
    padding-left: 1px;
}
@media (min-width: 640px) {
    .course-curriculum ul figcaption {
        padding-left: 18px;
    }
}

.course-curriculum ul a {
    text-decoration: none;
}

.download-curriculum {
    margin-top: var(--section-padding);
    background-image: linear-gradient(rgba(215, 246, 250, 0) 0.01%, #d7f6fa 18.37%, #bff3f4 85.72%, rgba(191, 243, 244, 0) 100%);
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 640px) {
    .download-curriculum {
        background-image: linear-gradient(90deg, rgba(215, 246, 250, 0) 0.01%, #d7f6fa 18.37%, #bff3f4 85.72%, rgba(191, 243, 244, 0) 100%);
        background-size: clamp(0px, 100%, var(--max-width));
    }
}

.download-curriculum.download-scratch {
    margin-top: var(--section-padding);
    background-image: linear-gradient(rgba(255, 221, 153, 0) 0%, #FFDD99 16%, #FFCC66 80%, rgba(255, 221, 153, 0) 100%);
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 640px) {
    .download-curriculum.download-scratch {
        background-image: linear-gradient(90deg, rgba(255, 221, 153, 0) 0%, #FFDD99 16%, #FFCC66 80%, rgba(255, 221, 153, 0) 100%);
        background-size: clamp(0px, 100%, var(--max-width));
    }
}

.download-curriculum.download-coding {
    margin-top: var(--section-padding);
    background-image: linear-gradient(rgba(219, 210, 255, 0) 0%, #DBD2FF 16%, #DBD2FF 81%, rgba(219, 210, 255, 0) 99%);
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 640px) {
    .download-curriculum.download-coding {
        background-image: linear-gradient(90deg, rgba(219, 210, 255, 0) 0%, #DBD2FF 16%, #DBD2FF 81%, rgba(219, 210, 255, 0) 99%);
        background-size: clamp(0px, 100%, var(--max-width));
    }
}

.download-curriculum.download-ai {
    margin-top: var(--section-padding);
    background-image: linear-gradient(rgba(255, 215, 215, 0) 0%, #FFAFAF 16%, #FFAFAF 80%, rgba(255, 215, 215, 0) 100%);
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 640px) {
    .download-curriculum.download-ai {
        background-image: linear-gradient(90deg, rgba(255, 215, 215, 0) 0%, #FFAFAF 16%, #FFAFAF 80%, rgba(255, 215, 215, 0) 100%);
        background-size: clamp(0px, 100%, var(--max-width));
    }
}

.download-curriculum .container {
    padding-top: 48px;
    padding-bottom: 48px;
}

.text-and-icon {
    display: flex;
    align-items: center;
}

.text-and-icon img {
    --size: 55px;
    width: var(--size);
    height: var(--size);
}
@media (min-width: 1024px) {
    .text-and-icon img {
        --size: 72px;
    }
}

.download-curriculum h2.en {
    margin-bottom: 0;
    margin-left: 24px;
}
@media (max-width: 639px) {
    .download-curriculum h2.en {
        font-size: 21px;
    }
}
@media (min-width: 640px) {
    .download-curriculum h2.en {
        font-size: 31.7px;
    }
    .download-curriculum h2.en br {
        display: none;
    }
}

.download-curriculum .button {
    margin-bottom: 0;
    max-width: 300px;
}
@media (min-width: 640px) {
    .download-curriculum .button {
        margin-top: 0;
    }
}

.example-works {
    padding-top: 0px;
    overflow: hidden;
    background-image: url(./gradient-dots.74ca109f.svg), url(./square-bg-1.22b1dd69.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: 60%, 70%;
    background-position: right -35% top 12.5%, left -120% top 3.5%;
}
@media (min-width: 1024px) {
    .example-works {
        background-size: auto, min(32%, 550px);
        background-position: left 45% bottom 10%, left calc(50% - 600px) top calc(50% + 80px);
    }
}

.example-works.example-scratch {
    background-image: url(./gradient-dots.74ca109f.svg), url(./square-bg-4.57dc38c8.svg);
}

.example-works.example-coding {
    background-image: url(./gradient-dots.74ca109f.svg), url(./square-bg-2.f3a08fe7.svg);
}

.example-works h4 {
    grid-row-start: 2;
}
@media (min-width: 640px) {
    .example-works h4 {
        grid-row-start: auto;
        margin-bottom: 40px;
    }
}
@media (min-width: 1024px) {
    .example-works h4 {
        margin-bottom: 90px;
    }
}
@media (min-width: 1440px) {
    .example-works h4 {
        margin-bottom: 120px;
    }
}

.example-works-image {
    position: relative;
    width: 70%;
    height: auto;
    margin-top: 24px;
    margin-bottom: 48px;
    transform: rotate(-8deg);
}

.example-works ul {
    row-gap: 16px;
}

@media (min-width: 640px) {
    .example-works ul figcaption {
        padding-left: 20px;
    }
}

.example-works ul video {
    width: 100%;
    background-color: beige;
}

#bg-gradient {
    background-image: linear-gradient(179deg, #FFFFFF 0%, #EEF9FE 96%);
}

.attraction {
    margin-top: -70%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) {
    .attraction {
        margin-top: -50%;
        width: 60%;
    }
}
@media (min-width: 1024px) {
    .attraction {
        margin-top: -70%;
        width: 80%;
    }
}

.classes-overview {
    --gap: 15px;
}

.classes-overview h4 {
    font-size: 32px;
    line-height: 38px;
}

.classes-list {
    margin-bottom: 50px;
    column-gap: 7%;
    row-gap: 24px;
}
@media (min-width: 640px) {
    .classes-list {
        margin-bottom: 70px;
    }
}
@media (min-width: 1024px) {
    .classes-list {
        margin-bottom: 100px;
    }
}

.classes-list > li {
    margin-top: 50vw;
}
@media (min-width: 640px) {
    .classes-list > li {
        margin-top: 25vw;
    }
}
@media (min-width: 1024px) {
    .classes-list > li {
        margin-top: 15vw;
    }
}
@media (hover: hover) {
    .classes-list > li .city {
        opacity: 0.8;
        transition: all 0.2s ease-in-out;
    }
    .classes-list > li:hover .city {
        opacity: 1;
        transform: translateY(-5px);
    }
}

@media (hover: hover) {
    .classes-list:not(:hover) > li:nth-child(2) .city {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.classes-list .city {
    padding: var(--gap);
    padding-top: calc(var(--gap) * 2);
}
@media (min-width: 640px) {
    .classes-list .city {
        margin-top: 48px;
        margin-left: calc(var(--gap) * -1);
        margin-right: calc(var(--gap) * -1);
    }
}

@media (min-width: 640px) {
    .classes-list > li:nth-child(2) .city {
        margin-top: 24px;
    }
}

.city header {
    display: grid;
    row-gap: 6px;
    column-gap: 12px;
    grid-template-columns: repeat(2, fit-content(100%));
    padding: 24px;
    padding-bottom: 16px;
}

.city header > h4 {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.city h4 .status {
    margin-left: 12px;
    transform: translateY(4px);
    line-height: 24px;
    font-family: "Consolas Regular", monospace;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
}
.city h4 .status:before {
    --size: 16px;
    content: "";
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: 6px;
    transform: translateY(2px);
    border-radius: 50%;
    background-color: currentColor;
}
.city h4 .status.open {
    color: #a4f0ef;
}
.city h4 .status.full {
    color: #ff7474;
}

.city .tag {
    display: inline-flex;
    align-items: center;
}

.city .tag svg {
    --size: 16px;
    width: var(--size);
    height: var(--size);
    padding: 2px 0;
    margin-right: 4px;
    fill: currentColor;
}

.city .tag span:not(.sr-only) {
    transform: translateY(1px);
}

.city .capacity {
    font-family: "Consolas", monospace;
}

.city li:not(:last-of-type) {
    margin-bottom: calc(var(--gap) + 1px);
}

.city table {
    width: 100%;
    border-spacing: 0;
}

.city table :is(td, th) {
    border-top: 1px solid #dee2e6;
    padding-top: 9px;
    padding-bottom: 9px;
}

.city table tr:last-child :is(td, th) {
    padding-bottom: 24px;
}

.city table th {
    padding-left: 24px;
    padding-right: 12px;
    white-space: nowrap;
    vertical-align: top;
}

.city table td {
    padding-right: 24px;
}

.ready-to-dive-in {
    --padding-side: var(--side-gap);
    padding-left: var(--padding-side);
    padding-right: var(--padding-side);
}
@media (min-width: 1024px) {
    .ready-to-dive-in {
        --padding-side: calc(var(--column-gap) / 2);
        margin: 0 calc(var(--column-gap) * -0.5);
    }
}

@media (min-width: 1024px) {
    .ready-to-dive-in .wrapper {
        margin-left: calc(var(--column-gap) * -1);
    }
}

section.plans {
    background: url(./dots-grid_red.5d8fbc97.svg) calc(50% - 500px) calc(50% - 300px)/200px no-repeat, url(./dots-grid_red.5d8fbc97.svg) calc(50% + 500px) calc(50% + 300px)/200px no-repeat;
    overflow: hidden;
}

section.plans .red-gradient {
    position: absolute;
    top: 100px;
    left: calc(50% - 590px);
    width: 130px;
    will-change: transform;
}

section.plans .red-gradient2 {
    position: absolute;
    bottom: 100px;
    right: calc(50% - 590px);
    width: 130px;
    will-change: transform;
}

.plans-overview {
    row-gap: 48px;
    margin-bottom: 90px;
}
@media (min-width: 1024px) {
    .plans-overview {
        margin-bottom: 90px;
    }
}

.plans-overview li {
    position: relative;
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plans-overview li img {
    --size: 48px;
    width: var(--size);
    height: var(--size);
    margin-bottom: 8px;
}

.plans-overview .title {
    font-size: 32px;
    opacity: 1;
}

.plans-overview .popular-label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    padding: 0 12px;
    padding-top: 2px;
    text-transform: uppercase;
    line-height: 24px;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
}

.plans-overview .cost {
    display: grid;
    grid-template-columns: min-content repeat(2, max-content);
    grid-template-rows: repeat(2, min-content);
    font-family: "MADE Evolve Sans EVO", sans-serif;
    font-weight: 300;
}

.plans-overview .cost .amount {
    --height: 54px;
    grid-row: 1/span 2;
    grid-column: 2/3;
    font-size: var(--height);
    line-height: var(--height);
}

.plans-overview .cost .per-lesson {
    grid-row: 2/3;
    grid-column: 3/4;
    font-size: 21px;
}

.plans-overview .cost .discount {
    grid-row: 1/2;
    grid-column: 3/4;
    padding: 0 12px;
    transform: translateX(5px);
    line-height: 24px;
    font-size: 13px;
    font-family: "Raleway", sans-serif;
    font-weight: bold;
    text-align: center;
}

.plans-overview li .button {
    align-self: stretch;
    margin-top: auto;
    margin-bottom: 0;
}

.common-features {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

.common-features h5.en {
    margin-bottom: 26px;
}

.common-features li {
    display: flex;
}
.common-features li:not(:last-of-type) {
    margin-bottom: 20px;
}

.text-line-through {
    text-decoration: line-through;
}

.common-features li::before {
    --size: 40px;
    content: "";
    display: inline-block;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: -6px;
    background-image: url(./checkmark-icon_red.1cbeb725.svg);
}