@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
        ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-tracking: initial;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
        }
    }
}
@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-emerald-500: oklch(69.6% 0.17 162.48);
        --color-blue-600: oklch(54.6% 0.245 262.881);
        --color-slate-600: oklch(44.6% 0.043 257.281);
        --color-slate-700: oklch(37.2% 0.044 257.287);
        --color-slate-900: oklch(20.8% 0.042 265.755);
        --color-gray-100: oklch(96.7% 0.003 264.542);
        --color-gray-200: oklch(92.8% 0.006 264.531);
        --color-gray-500: oklch(55.1% 0.027 264.364);
        --color-gray-600: oklch(44.6% 0.03 256.802);
        --color-gray-700: oklch(37.3% 0.034 259.733);
        --color-gray-900: oklch(21% 0.034 264.665);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --container-xs: 20rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-wide: 0.025em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --default-transition-duration: 0.15s;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
    }
}
@layer base {
    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }
    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(
            --default-font-family,
            ui-sans-serif,
            system-ui,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b,
    strong {
        font-weight: bolder;
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative;
    }
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
    :-moz-focusring {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol,
    ul,
    menu {
        list-style: none;
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0;
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
    ::file-selector-button {
        margin-inline-end: 4px;
    }
    ::placeholder {
        opacity: 1;
    }
    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentColor;
        }
        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }
    textarea {
        resize: vertical;
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
    ::-webkit-datetime-edit {
        display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
    ::-webkit-datetime-edit {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-year-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-month-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-day-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-second-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0;
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
    ::-webkit-calendar-picker-indicator {
        line-height: 1;
    }
    :-moz-ui-invalid {
        box-shadow: none;
    }
    button,
    input:where([type="button"], [type="reset"], [type="submit"]) {
        appearance: button;
    }
    ::file-selector-button {
        appearance: button;
    }
    ::-webkit-inner-spin-button {
        height: auto;
    }
    ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}
@layer components;
@layer utilities {
    .collapse {
        visibility: collapse;
    }
    .visible {
        visibility: visible;
    }
    .absolute {
        position: absolute;
    }
    .relative {
        position: relative;
    }
    .top-8 {
        top: calc(var(--spacing) * 8);
    }
    .top-\[226px\] {
        top: 226px;
    }
    .top-\[611px\] {
        top: 611px;
    }
    .top-\[1459px\] {
        top: 1459px;
    }
    .top-\[1709px\] {
        top: 1709px;
    }
    .right-8 {
        right: calc(var(--spacing) * 8);
    }
    .left-\[49px\] {
        left: 49px;
    }
    .left-\[1586px\] {
        left: 1586px;
    }
    .left-\[1816px\] {
        left: 1816px;
    }
    .left-\[1868px\] {
        left: 1868px;
    }
    .z-10 {
        z-index: 10;
    }
    .container {
        width: 100%;
    }
    @media (min-width: 40rem) {
        .container {
            max-width: 40rem;
        }
    }
    @media (min-width: 48rem) {
        .container {
            max-width: 48rem;
        }
    }
    @media (min-width: 64rem) {
        .container {
            max-width: 64rem;
        }
    }
    @media (min-width: 80rem) {
        .container {
            max-width: 80rem;
        }
    }
    @media (min-width: 96rem) {
        .container {
            max-width: 96rem;
        }
    }
    .mx-auto {
        margin-inline: auto;
    }
    .mt-1 {
        margin-top: calc(var(--spacing) * 1);
    }
    .mt-2 {
        margin-top: calc(var(--spacing) * 2);
    }
    .mt-6 {
        margin-top: calc(var(--spacing) * 6);
    }
    .mt-8 {
        margin-top: calc(var(--spacing) * 8);
    }
    .mr-2 {
        margin-right: calc(var(--spacing) * 2);
    }
    .mr-4 {
        margin-right: calc(var(--spacing) * 4);
    }
    .mb-0 {
        margin-bottom: calc(var(--spacing) * 0);
    }
    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2);
    }
    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
    }
    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }
    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
    }
    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }
    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }
    .mb-12 {
        margin-bottom: calc(var(--spacing) * 12);
    }
    .mb-24 {
        margin-bottom: calc(var(--spacing) * 24);
    }
    .mb-26 {
        margin-bottom: calc(var(--spacing) * 26);
    }
    .ml-2 {
        margin-left: calc(var(--spacing) * 2);
    }
    .block {
        display: block;
    }
    .contents {
        display: contents;
    }
    .flex {
        display: flex;
    }
    .grid {
        display: grid;
    }
    .hidden {
        display: none;
    }
    .inline-flex {
        display: inline-flex;
    }
    .h-4 {
        height: calc(var(--spacing) * 4);
    }
    .h-5 {
        height: calc(var(--spacing) * 5);
    }
    .h-6 {
        height: calc(var(--spacing) * 6);
    }
    .h-10 {
        height: calc(var(--spacing) * 10);
    }
    .h-\[10px\] {
        height: 10px;
    }
    .h-\[13px\] {
        height: 13px;
    }
    .h-\[14px\] {
        height: 14px;
    }
    .h-\[17\] {
        height: 17px;
    }
    .h-\[20px\] {
        height: 20px;
    }
    .h-\[22px\] {
        height: 22px;
    }
    .h-\[24px\] {
        height: 24px;
    }
    .h-\[25px\] {
        height: 25px;
    }
    .h-\[28px\] {
        height: 28px;
    }
    .h-\[33px\] {
        height: 33px;
    }
    .h-\[56px\] {
        height: 56px;
    }
    .h-\[76px\] {
        height: 76px;
    }
    .h-\[514px\] {
        height: 514px;
    }
    .w-4 {
        width: calc(var(--spacing) * 4);
    }
    .w-5 {
        width: calc(var(--spacing) * 5);
    }
    .w-6 {
        width: calc(var(--spacing) * 6);
    }
    .w-10 {
        width: calc(var(--spacing) * 10);
    }
    .w-32 {
        width: calc(var(--spacing) * 32);
    }
    .w-\[10px\] {
        width: 10px;
    }
    .w-\[13px\] {
        width: 13px;
    }
    .w-\[14px\] {
        width: 14px;
    }
    .w-\[15\] {
        width: 15px;
    }
    .w-\[22px\] {
        width: 22px;
    }
    .w-\[24px\] {
        width: 24px;
    }
    .w-\[24x\] {
        width: 24x;
    }
    .w-\[25px\] {
        width: 25px;
    }
    .w-\[28px\] {
        width: 28px;
    }
    .w-\[40px\] {
        width: 40px;
    }
    .w-\[56px\] {
        width: 56px;
    }
    .w-\[771px\] {
        width: 771px;
    }
    .w-full {
        width: 100%;
    }
    .max-w-\[520px\] {
        max-width: 520px;
    }
    .max-w-\[720px\] {
        max-width: 720px;
    }
    .max-w-\[1525px\] {
        max-width: 1525px;
    }
    .max-w-\[1565px\] {
        max-width: 1565px;
    }
    .translate-y-px {
        --tw-translate-y: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
    .resize {
        resize: both;
    }
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .flex-col {
        flex-direction: column;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .items-center {
        align-items: center;
    }
    .items-start {
        align-items: flex-start;
    }
    .justify-between {
        justify-content: space-between;
    }
    .justify-center {
        justify-content: center;
    }
    .gap-3 {
        gap: calc(var(--spacing) * 3);
    }
    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }
    .gap-6 {
        gap: calc(var(--spacing) * 6);
    }
    .gap-8 {
        gap: calc(var(--spacing) * 8);
    }
    .gap-24 {
        gap: calc(var(--spacing) * 24);
    }
    :where(.space-y-4 > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    .overflow-hidden {
        overflow: hidden;
    }
    .overflow-x-hidden {
        overflow-x: hidden;
    }
    .overflow-y-hidden {
        overflow-y: hidden;
    }
    .rounded-\[16px\] {
        border-radius: 16px;
    }
    .rounded-\[40px\] {
        border-radius: 40px;
    }
    .rounded-full {
        border-radius: 3.40282e38px;
    }
    .rounded-lg {
        border-radius: var(--radius-lg);
    }
    .bg-\[\#28A6FF\] {
        background-color: #28a6ff;
    }
    .bg-\[\#CCFAFA\] {
        background-color: #ccfafa;
    }
    .bg-\[\#CCFFE7\] {
        background-color: #ccffe7;
    }
    .bg-\[\#D1D5DB\] {
        background-color: #d1d5db;
    }
    .bg-\[\#EFE6FF\] {
        background-color: #efe6ff;
    }
    .bg-\[\#F5F9FF\] {
        background-color: #f5f9ff;
    }
    .bg-white {
        background-color: var(--color-white);
    }
    .object-cover {
        object-fit: cover;
    }
    .p-6 {
        padding: calc(var(--spacing) * 6);
    }
    .p-8 {
        padding: calc(var(--spacing) * 8);
    }
    .px-4 {
        padding-inline: calc(var(--spacing) * 4);
    }
    .py-2 {
        padding-block: calc(var(--spacing) * 2);
    }
    .py-16 {
        padding-block: calc(var(--spacing) * 16);
    }
    .py-20 {
        padding-block: calc(var(--spacing) * 20);
    }
    .py-24 {
        padding-block: calc(var(--spacing) * 24);
    }
    .text-center {
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .text-start {
        text-align: start;
    }
    .font-\[Poppins\] {
        font-family: Poppins;
    }
    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .text-\[14px\] {
        font-size: 14px;
    }
    .text-\[16px\] {
        font-size: 16px;
    }
    .text-\[18px\] {
        font-size: 18px;
    }
    .text-\[20px\] {
        font-size: 20px;
    }
    .text-\[36px\] {
        font-size: 36px;
    }
    .text-\[40px\] {
        font-size: 40px;
    }
    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
    }
    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
    }
    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
    }
    .whitespace-nowrap {
        white-space: nowrap;
    }
    .text-\[\#28A6FF\] {
        color: #28a6ff;
    }
    .text-\[\#0069B2\] {
        color: #0069b2;
    }
    .text-\[\#2191DF\] {
        color: #2191df;
    }
    .text-\[\#717171\] {
        color: #717171;
    }
    .text-\[\#FFBE0A\] {
        color: #ffbe0a;
    }
    .text-gray-600 {
        color: var(--color-gray-600);
    }
    .text-gray-700 {
        color: var(--color-gray-700);
    }
    .text-gray-900 {
        color: var(--color-gray-900);
    }
    .opacity-\[40\%\] {
        opacity: 0.4;
    }
    .opacity-\[40\] {
        opacity: 40;
    }
    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
            var(--tw-ring-shadow), var(--tw-shadow);
    }
    .brightness-75 {
        --tw-brightness: brightness(75%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,)
            var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .filter {
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,)
            var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    .duration-300 {
        --tw-duration: 0.3s;
        transition-duration: 0.3s;
    }
    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out);
    }
    @media (hover: hover) {
        .group-hover\:rotate-180:is(:where(.group):hover *) {
            rotate: 180deg;
        }
        .hover\:text-\[\#2563eb\]:hover {
            color: #2563eb;
        }
        .hover\:shadow-lg:hover {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
                0 4px 6px -4px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
                var(--tw-ring-shadow), var(--tw-shadow);
        }
    }
    @media (min-width: 40rem) {
        .sm\:w-\[320px\] {
            width: 320px;
        }
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 48rem) {
        .md\:block {
            display: block;
        }
        .md\:w-\[45\%\] {
            width: 45%;
        }
        .md\:flex-row {
            flex-direction: row;
        }
    }
    @media (min-width: 64rem) {
        .lg\:block {
            display: block;
        }
        .lg\:w-\[490px\] {
            width: 490px;
        }
        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .lg\:flex-row {
            flex-direction: row;
        }
        .lg\:flex-nowrap {
            flex-wrap: nowrap;
        }
        .lg\:justify-start {
            justify-content: flex-start;
        }
        .lg\:text-left {
            text-align: left;
        }
    }
}
* {
    box-sizing: border-box;
    padding: 0;
}
body {
    background: #fff;
    font-family:
        Poppins,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    overflow-x: hidden;
}
.bubble-field {
    pointer-events: none;
    inset: calc(var(--spacing) * 0);
    z-index: 10;
    position: absolute;
}
.bubble {
    background-color: #00e8e8;
    border-radius: 3.40282e38px;
    position: absolute;
}
.header {
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 9999;
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    position: fixed;
}
.navbar {
    padding-inline: calc(var(--spacing) * 10);
    padding-block: calc(var(--spacing) * 4);
    justify-content: space-between;
    align-items: center;
    display: flex;
}
@media (min-width: 64rem) {
    .navbar {
        padding-inline: calc(var(--spacing) * 20);
    }
}
.logo {
    flex-shrink: 0;
}
.searchbar-container {
    margin-inline: calc(var(--spacing) * 6);
    flex: 1;
    justify-content: center;
    max-width: 801px;
    display: none;
}
@media (min-width: 48rem) {
    .searchbar-container {
        display: flex;
    }
}
.search-form {
    width: 100%;
}
.search-wrapper {
    position: relative;
}
.search-icon {
    pointer-events: none;
    top: 50%;
    left: calc(var(--spacing) * 6);
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: #64748b;
    position: absolute;
}
.search-input {
    height: calc(var(--spacing) * 14);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    width: 100%;
    padding-right: calc(var(--spacing) * 5);
    padding-left: calc(var(--spacing) * 12);
    color: var(--color-slate-700);
    border-radius: 3.40282e38px;
}
.search-input::placeholder {
    color: var(--color-gray-500);
}
.search-input {
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-outline-style: none;
    outline-style: none;
}
.search-input:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width))
        var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    --tw-ring-color: #e0f2fe;
    border-color: #2563eb;
}
.hamburger {
    align-items: center;
    display: flex;
    position: relative;
}
@media (min-width: 80rem) {
    .hamburger {
        display: none;
    }
}
.hamburger-btn {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-gray-700);
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
    .hamburger-btn:hover {
        color: #2563eb;
    }
}
.mobile-menu {
    top: 72px;
    left: calc(var(--spacing) * 0);
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    display: flex;
    position: fixed;
}
:where(.mobile-menu > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
.mobile-menu {
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 5);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    overflow-x: hidden;
}
@media (min-width: 80rem) {
    .mobile-menu {
        display: none;
    }
}
.mobile-menu {
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease-in-out;
}
.mobile-menu.active {
    opacity: 1;
    max-height: 300px;
}
.mobile-link {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}
@media (hover: hover) {
    .mobile-link:hover {
        color: #2563eb;
    }
}
.mobile-btn {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--color-white);
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-radius: 3.40282e38px;
}
@media (hover: hover) {
    .mobile-btn:hover {
        background-color: #1d4ed8;
    }
}
.navbar-menu {
    align-items: center;
    gap: calc(var(--spacing) * 8);
    display: none;
}
@media (min-width: 80rem) {
    .navbar-menu {
        display: flex;
    }
}
.nav-links {
    align-items: center;
    gap: calc(var(--spacing) * 6);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    display: flex;
}
.nav-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
    position: relative;
}
@media (hover: hover) {
    .nav-link:hover {
        color: #2563eb;
    }
}
.dropdown {
    visibility: hidden;
    top: 100%;
    left: calc(var(--spacing) * 0);
    z-index: 50;
    margin-top: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 48);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
    position: absolute;
}
@media (hover: hover) {
    .dropdown:is(:where(.group):hover *) {
        visibility: visible;
        opacity: 1;
    }
}
.dropdown {
    border: none !important;
}
.dropdown-link {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    display: block;
}
@media (hover: hover) {
    .dropdown-link:hover {
        color: #2563eb;
        background-color: #e0f2fe;
    }
}
.btn-outline {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    color: #2563eb;
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #d4edff;
    border-radius: 3.40282e38px;
}
@media (hover: hover) {
    .btn-outline:hover {
        background-color: #bfdbfe;
    }
}
.btn-primary {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--color-white);
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-radius: 3.40282e38px;
}
@media (hover: hover) {
    .btn-primary:hover {
        background-color: #1d4ed8;
    }
}
.icon-btn {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: flex;
}
@media (hover: hover) {
    .icon-btn:hover {
        background-color: var(--color-gray-100);
    }
}
.icon-btn-alt {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #dbeafe;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: flex;
}
@media (hover: hover) {
    .icon-btn-alt:hover {
        background-color: #bfdbfe;
    }
}
.cart-badge {
    top: calc(var(--spacing) * -1);
    right: calc(var(--spacing) * -1);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background-color: #0069b2;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    animation: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) popIn;
    display: flex;
    position: absolute;
}
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.cart-badge.pulse {
    animation: 0.3s ease-in-out pulse;
}
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
.main-wrapper {
    max-width: 1400px;
    padding-inline: calc(var(--spacing) * 8);
    padding-top: calc(var(--spacing) * 24);
    padding-bottom: calc(var(--spacing) * 12);
    margin-inline: auto;
}
.breadcrumb-nav {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-block: 30px;
    font-size: 16px;
    display: flex;
}
.breadcrumb-item {
    color: #4d4d4d;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    text-decoration-line: none;
}
.breadcrumb-item:hover {
    color: #0069b2;
}
.breadcrumb-item.active {
    --tw-font-weight: 400;
    color: #0069b2;
    font-weight: 400;
    text-decoration-line: underline;
}
.breadcrumb-separator {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: #4d4d4d;
}
.content-layout {
    justify-content: center;
    gap: calc(var(--spacing) * 8);
    grid-template-columns: 1fr 320px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    position: relative;
}
.content-layout > div:first-child {
    z-index: 1;
    position: relative;
}
.hero-gradient {
    z-index: 1;
    border-radius: 48px;
    margin-bottom: 80px;
    margin-right: -28rem;
    padding: 40px 12rem 125px 0;
    position: relative;
    overflow: visible;
}
.hero-bg {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: #28a6ff;
    --tw-gradient-to: #00e8e8;
    --tw-gradient-stops: var(
        --tw-gradient-via-stops,
        var(--tw-gradient-position),
        var(--tw-gradient-from) var(--tw-gradient-from-position),
        var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
    z-index: -1;
    opacity: 0.08;
    border-radius: 48px;
    width: 1700px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
.module-text {
    margin-bottom: calc(var(--spacing) * 4);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: 500;
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: #0069b2;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    display: inline-flex;
}
.hero-title {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 4);
    --tw-leading: 100%;
    --tw-font-weight: var(--font-weight-semibold);
    max-width: 1040px;
    font-size: 56px;
    line-height: 110%;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.hero-description {
    margin-block: calc(var(--spacing) * 6);
    --tw-leading: var(--leading-relaxed);
    max-width: 786px;
    max-height: 60px;
    font-size: 20px;
    line-height: var(--leading-relaxed);
    --tw-font-weight: 400;
    color: #1c1c1c;
    font-weight: 400;
}
.instructor-info {
    margin-top: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
}
.instructor-profile {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.instructor-avatar {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    object-fit: cover;
    border-radius: 3.40282e38px;
}
.instructor-details {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.instructor-label {
    margin-top: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: #333;
}
.instructor-name {
    margin-top: calc(var(--spacing) * 2);
    color: #1c1c1c;
    font-size: 16px;
    text-decoration-line: underline;
}
.instructor-badges {
    margin-top: calc(var(--spacing) * 4);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.badge {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    --tw-font-weight: 500;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}
.badge-bestseller {
    color: #006636;
    background-color: #ccffe7;
}
.badge-trial {
    color: #7045c2;
    background-color: #efe6ff;
}
.lesson-status {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: 500;
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 500;
    display: flex;
}
.lesson-status img {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    object-fit: contain;
}
.course-meta-row {
    z-index: 100;
    background: #fff;
    border-radius: 16px;
    flex-direction: row;
    gap: 32px;
    width: 100%;
    max-width: 1078px;
    height: auto;
    min-height: 134px;
    margin-top: -140px;
    padding: 32px;
    display: flex;
    position: relative;
    box-shadow: 0 20px 30px #1a78e514;
}
.course-meta-item {
    gap: calc(var(--spacing) * 1);
    align-items: left;
    text-align: left;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    padding-right: 32px;
    display: flex;
    position: relative;
}
.course-meta-item:not(:last-child):after {
    content: "";
    background-color: #e8e8e8;
    width: 1px;
    height: 80px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.course-meta-item:last-child {
    padding-right: 0;
}
.meta-number {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
    white-space: nowrap;
}
.meta-rating {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.rating-number {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: #1c1c1c;
}
.rating-stars {
    gap: calc(var(--spacing) * 0.5);
    color: #ffb800;
    font-size: 14px;
    display: flex;
}
.meta-description {
    --tw-leading: var(--leading-relaxed);
    font-size: 14px;
    line-height: var(--leading-relaxed);
    --tw-font-weight: 400;
    color: #4d4d4d;
    font-weight: 400;
}
.content-card {
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    width: 1083px;
    height: auto;
    overflow: hidden;
    border: none !important;
}
.lesson-header {
    background: #f0f9ff;
    border-radius: 16px;
    flex-direction: column;
    gap: 16px;
    width: 821px;
    max-width: 100%;
    height: auto;
    min-height: 206px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 32px;
    display: flex;
    border: none !important;
}
.lesson-header-title {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
}
.lesson-meta-grid {
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
}
.meta-item {
    justify-content: space-between;
    align-items: center;
    display: flex;
    border: none !important;
}
.meta-label {
    letter-spacing: 0;
    color: #1e293b;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}
.meta-value {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
    border: none !important;
}
.meta-value.has-check {
    color: var(--color-emerald-500);
}
.check-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    display: inline-block;
}
.tabs-wrapper {
    border: none !important;
}
.tabs {
    margin-top: calc(var(--spacing) * 8);
    gap: calc(var(--spacing) * 6);
    --indicator-left: 0px;
    --indicator-width: 0px;
    display: flex;
    position: relative;
}
.tabs:before {
    content: "";
    z-index: 1;
    background: linear-gradient(90deg, #e8e8e8 40%, #d4edff 60%);
    height: 1px;
    position: absolute;
    bottom: 0;
    left: -24px;
    right: -24px;
}
.tabs:after {
    content: "";
    bottom: 0;
    left: var(--indicator-left);
    width: var(--indicator-width);
    z-index: 2;
    background: #0069b2;
    height: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
}
.tab {
    cursor: pointer;
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 3.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: #717171;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    white-space: nowrap;
    background-color: #0000;
    border-width: 0;
    display: inline-block;
    position: relative;
}
.tab.active,
.tab:hover {
    color: #0069b2;
}
.tab-content {
    padding: calc(var(--spacing) * 6);
}
.content-heading {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 40px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.content-text {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-leading: var(--leading-tight);
    font-size: 16px;
    line-height: var(--leading-tight);
    color: #4d4d4d;
}
.content-list {
    margin-bottom: calc(var(--spacing) * 5);
    list-style-type: none;
}
.content-list li {
    margin-bottom: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 5);
    color: var(--color-slate-600);
    font-size: 16px;
    position: relative;
}
.content-list li:before {
    content: "";
    top: calc(var(--spacing) * 1);
    left: calc(var(--spacing) * 0);
    background-color: var(--color-black);
    border-radius: 3.40282e38px;
    width: 8px;
    height: 8px;
    position: absolute;
}
.sidebar {
    margin-top: calc(var(--spacing) * 12);
    text-align: left;
    z-index: 50;
    align-items: flex-start;
    width: 383px;
    height: fit-content;
    position: relative;
}
.progress-card {
    margin-bottom: calc(var(--spacing) * 5);
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 5);
    z-index: 10;
    position: relative;
    box-shadow: 0 20px 30px 10px #1a78e514;
    text-align: left !important;
    border: none !important;
}

.progress-card button {
    text-align: center !important;
}
.progress-header {
    margin-bottom: calc(var(--spacing) * 3);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.progress-label {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: #0069b2;
}
.info-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    display: flex;
    border: none !important;
}
.info-icon {
    border-radius: var(--radius-lg);
    width: 24px;
    height: 24px;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: #0069b2;
    justify-content: center;
    align-items: center;
    display: flex;
}
.info-text {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: #0069b2;
    flex: 1;
}
.lesson-btn {
    margin-top: calc(var(--spacing) * 5);
    cursor: pointer;
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
    text-align: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-width: 0;
    border-radius: 32px;
}
.lesson-btn:hover {
    background-color: #005291;
}
.lesson-btn-secondary {
    margin-top: calc(var(--spacing) * 3);
    cursor: pointer;
    border-style: var(--tw-border-style);
    background-color: var(--color-white);
    width: 100%;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
    text-align: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: #0069b2;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-width: 2px;
    border-color: #0069b2;
    border-radius: 32px;
}
.lesson-btn-secondary:hover {
    background-color: #f0f9ff;
}
.other-lessons {
    background-color: var(--color-white);
    padding: 20px;
    text-align: left !important;
    border: none !important;
}

.other-lessons button {
    text-align: center !important;
}
.current-chapter {
    margin-bottom: calc(var(--spacing) * 5);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 4);
    display: flex;
}
.current-chapter-text {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.footer {
    padding: 50px 200px;
}
@media (max-width: 1400px) {
    .footer {
        padding: 50px 100px;
    }
}
@media (max-width: 1200px) {
    .footer {
        padding: 50px 60px;
    }
}
@media (max-width: 768px) {
    .navbar {
        padding-inline: calc(var(--spacing) * 5);
    }
    .footer {
        padding: 40px;
    }
    .footer-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .navbar {
        padding-inline: calc(var(--spacing) * 5);
    }
    .footer {
        padding: 32px 24px;
    }
    .footer-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.footer-container {
    width: 100%;
}
@media (min-width: 40rem) {
    .footer-container {
        max-width: 40rem;
    }
}
@media (min-width: 48rem) {
    .footer-container {
        max-width: 48rem;
    }
}
@media (min-width: 64rem) {
    .footer-container {
        max-width: 64rem;
    }
}
@media (min-width: 80rem) {
    .footer-container {
        max-width: 80rem;
    }
}
@media (min-width: 96rem) {
    .footer-container {
        max-width: 96rem;
    }
}
.footer-container {
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}
.footer-logo {
    padding-bottom: calc(var(--spacing) * 6);
}
.footer-logo-img {
    width: 146px;
    height: 60px;
}
@media (max-width: 768px) {
    .footer-logo-img {
        width: 130px;
        height: 54px;
    }
}
@media (max-width: 480px) {
    .footer-logo-img {
        width: 120px;
        height: 50px;
    }
}
.footer-content {
    padding-bottom: calc(var(--spacing) * 6);
}
.footer-grid {
    gap: calc(var(--spacing) * 8);
    flex-direction: column;
    display: flex;
}
@media (min-width: 48rem) {
    .footer-grid {
        flex-direction: row;
        align-items: flex-start;
    }
}
@media (max-width: 768px) {
    .footer-grid {
        gap: calc(var(--spacing) * 6);
        flex-direction: column;
    }
}
.footer-info {
    min-width: calc(var(--spacing) * 0);
}
@media (min-width: 40rem) {
    .footer-info {
        width: 25%;
    }
}
@media (max-width: 768px) {
    .footer-info {
        width: 100%;
    }
}
.footer-info-text {
    max-width: var(--container-xs);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
    color: #1c1c1c;
}
@media (max-width: 768px) {
    .footer-info-text {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}
@media (max-width: 480px) {
    .footer-info-text {
        font-size: 14px;
    }
}
.footer-categories {
    gap: calc(var(--spacing) * 6);
    flex: 1;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
}
@media (min-width: 40rem) {
    .footer-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 48rem) {
    .footer-categories {
        gap: calc(var(--spacing) * 8);
    }
}
@media (min-width: 80rem) {
    .footer-categories {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .footer-categories {
        gap: calc(var(--spacing) * 6);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .footer-categories {
        gap: calc(var(--spacing) * 5);
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.footer-heading {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}
@media (max-width: 768px) {
    .footer-heading {
        margin-bottom: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
@media (max-width: 480px) {
    .footer-heading {
        margin-bottom: calc(var(--spacing) * 2);
        font-size: 15px;
    }
}
:where(.footer-links > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
.footer-links {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: 500;
    color: #4d4d4d;
    font-weight: 500;
}
@media (max-width: 768px) {
    .footer-links {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}
@media (max-width: 480px) {
    .footer-links {
        font-size: 13px;
    }
}
.footer-link {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
    .footer-link:hover {
        color: var(--color-blue-600);
        text-decoration-line: underline;
    }
}
@media (min-width: 48rem) {
    .footer-about {
        width: calc(var(--spacing) * 48);
    }
}
@media (max-width: 768px) {
    .footer-about {
        width: 100%;
    }
}
.footer-divider {
    margin-top: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
}
.footer-bottom {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
}
@media (min-width: 48rem) {
    .footer-bottom {
        flex-direction: row;
    }
}
@media (max-width: 768px) {
    .footer-bottom {
        gap: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 3);
        flex-direction: column;
    }
}
.footer-copyright {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
}
@media (max-width: 768px) {
    .footer-copyright {
        text-align: center;
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}
@media (max-width: 480px) {
    .footer-copyright {
        text-align: center;
        font-size: 12px;
    }
}
.footer-social {
    align-items: center;
    gap: calc(var(--spacing) * 4);
    display: flex;
}
@media (max-width: 768px) {
    .footer-social {
        gap: calc(var(--spacing) * 3);
    }
}
.social-link {
    border-style: var(--tw-border-style);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-width: 1px;
    border-color: #0000;
    border-radius: 3.40282e38px;
}
@media (hover: hover) {
    .social-link:hover {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
}
.course-image-wrapper {
    margin-bottom: calc(var(--spacing) * 0);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    width: 383px;
    overflow: hidden;
}
.course-thumbnail {
    object-fit: cover;
    width: 383px;
    height: auto;
    display: block;
}
.sidebar .progress-card {
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.sidebar .other-lessons {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
    margin-top: 0;
}
.sidebar-section {
    padding-inline: calc(var(--spacing) * 1);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 5);
    /*width: 383px;*/
    text-align: left !important;
}
.sidebar-section * {
    text-align: left !important;
}
.sidebar-section button {
    text-align: center !important;
}
.sidebar-title {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: left;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #1a1a1a;
}
.course-buy-title {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: #0069b2;
}
.check-items-list {
    margin-bottom: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
}
.check-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.check-item i {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: #48bb78;
    flex-shrink: 0;
}
.check-item span {
    text-align: left;
    --tw-leading: var(--leading-snug);
    font-size: 16px;
    line-height: var(--leading-snug);
    color: #4d4d4d;
    font-weight: 400;
}
.sidebar-tabs {
    --indicator-left: 0px;
    --indicator-width: 0px;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
}
.sidebar-tabs:before {
    content: "";
    z-index: 1;
    background: #e5e5e5;
    width: 330px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}
.sidebar-tabs:after {
    content: "";
    bottom: 0;
    left: var(--indicator-left);
    width: var(--indicator-width);
    z-index: 2;
    background: #0069b2;
    height: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
}
.sidebar-tab {
    cursor: pointer;
    text-align: center;
    --tw-font-weight: 500;
    white-space: nowrap;
    color: #717171;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
}
@media (hover: hover) {
    .sidebar-tab:hover {
        color: #0069b2;
    }
}
.sidebar-tab {
    background: 0 0;
    border: none;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
}
.sidebar-tab.active {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: #0069b2;
}
.sidebar-tab-content {
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 3);
    background: #fff;
    display: none;
    text-align: left !important;
}
.sidebar-tab-content * {
    text-align: left !important;
}
.sidebar-tab-content button {
    text-align: center !important;
}
.sidebar-tab-content.active {
    display: block;
}
.coupon-section-title {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 2);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: #2d3748;
}
.coupon-input-wrapper {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.coupon-input {
    border-style: var(--tw-border-style);
    color: #2d3748;
    width: 220px;
    height: 45px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
}
.coupon-input:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width))
        var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    --tw-ring-color: #e6f4ff;
    --tw-outline-style: none;
    border-color: #0069b2;
    outline-style: none;
}
.coupon-input {
    background: #fff;
}
.coupon-input::placeholder {
    color: #a0aec0;
}
.coupon-apply-btn {
    cursor: pointer;
    --tw-font-weight: 500;
    color: #0069b2;
    width: 107px;
    height: 37px;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #e6f4ff;
    border-radius: 32px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
}
@media (hover: hover) {
    .coupon-apply-btn:hover {
        background-color: #d1ebff;
    }
}
.coupon-apply-btn {
    white-space: nowrap;
    text-align: center;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
}
.coupon-link-btn {
    display: none;
}
.tab-content-text {
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.gift-form-sidebar {
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
}
.form-group-sidebar {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex;
}
.form-label-sidebar {
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #1c1c1c;
}
.form-input-sidebar {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    background-color: var(--color-white);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    color: #4d4d4d;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-width: 1px;
    border-color: #e5e5e5;
    font-size: 14px;
}
.form-input-sidebar:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width))
        var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    --tw-ring-color: #e6f4ff;
    --tw-outline-style: none;
    border-color: #0069b2;
    outline-style: none;
}
.form-input-sidebar::placeholder {
    color: #ccc;
}
.date-input-wrapper-sidebar {
    position: relative;
}
.calendar-icon-sidebar {
    pointer-events: none;
    top: 50%;
    right: calc(var(--spacing) * 3);
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: gray;
    position: absolute;
}
.sidebar-divider {
    padding-block: calc(var(--spacing) * 6);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}
.sidebar-divider:before,
.sidebar-divider:after {
    content: "";
    border-bottom: 1px solid #bbb;
    width: 133px;
}
.divider-text {
    padding-inline: calc(var(--spacing) * 4);
    --tw-font-weight: 400;
    color: #717171;
    font-size: 14px;
    font-weight: 400;
}
.premium-title-main {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: #0069b2;
}
.premium-price-section {
    margin-bottom: calc(var(--spacing) * 5);
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.premium-price {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
    line-height: 1;
}
.premium-period {
    color: #717171;
    font-size: 20px;
}
.course-points {
    margin-block: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
}
.point-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.point-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #0069b2;
    background-color: #e8f4ff;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}
.point-text {
    text-align: left;
    --tw-leading: var(--leading-relaxed);
    font-size: 15px;
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.learning-grid {
    background: #f5f9ff;
    border-radius: 16px;
    flex-direction: row;
    gap: 48px;
    width: 100%;
    max-width: 1078px;
    height: auto;
    min-height: 304px;
    margin-bottom: 32px;
    padding: 32px;
    display: flex;
}
.learning-column {
    flex-direction: column;
    flex: 1;
    gap: 24px;
    display: flex;
}
.learning-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.learning-text {
    --tw-leading: var(--leading-relaxed);
    font-size: 16px;
    line-height: var(--leading-relaxed);
    --tw-font-weight: 400;
    color: #4d4d4d;
    font-weight: 400;
}
.description-text {
    margin-bottom: calc(var(--spacing) * 8);
}
.description-text p {
    margin-bottom: calc(var(--spacing) * 4);
    --tw-leading: var(--leading-relaxed);
    font-size: 16px;
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.info-grid {
    margin-bottom: calc(var(--spacing) * 8);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 60px;
    display: grid;
}
@media (min-width: 48rem) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.info-section {
    flex-direction: column;
    display: flex;
}
.info-list {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    list-style-type: none;
    display: flex;
}
.info-list li {
    padding-left: calc(var(--spacing) * 6);
    --tw-leading: var(--leading-relaxed);
    font-size: 16px;
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
    position: relative;
}
.info-list li:before {
    content: "•";
    left: calc(var(--spacing) * 0);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: #4d4d4d;
    position: absolute;
}
.course-tags {
    margin-bottom: calc(var(--spacing) * 8);
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
}
.tag-pill {
    cursor: pointer;
    border-style: var(--tw-border-style);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #0069b2;
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        --tw-gradient-from,
        --tw-gradient-via,
        --tw-gradient-to,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0000;
    border-width: 1px;
    border-color: #0069b2;
    border-radius: 3.40282e38px;
    gap: 10px;
    padding-block: 10px;
    padding-inline: 20px;
}
@media (hover: hover) {
    .tag-pill:hover {
        color: var(--color-white);
        background-color: #0069b2;
    }
}
.course-requirements-section,
.course-includes-section {
    margin-bottom: calc(var(--spacing) * 8);
}
.includes-container {
    height: auto;
    min-height: calc(var(--spacing) * 40);
    column-gap: calc(var(--spacing) * 12);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 529px;
    padding: calc(var(--spacing) * 8);
    background-color: #f5f9ff;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
}
.includes-left {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
}
.includes-right {
    justify-content: flex-start;
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    height: 100%;
    display: flex;
}
.include-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.include-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: #0069b2;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}
.include-text {
    --tw-font-weight: var(--font-weight-normal);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    color: #1c1c1c;
}
.section-subtitle {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 22px;
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
    font-family: Poppins, sans-serif;
}
.requirements-list {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    list-style-type: none;
    display: flex;
}
.requirements-list li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    color: #4d4d4d;
    font-size: 16px;
    display: flex;
}
.requirements-list li i {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: #48bb78;
    flex-shrink: 0;
}
.course-modules-section {
    margin-top: calc(var(--spacing) * 8);
}
.course-curriculum {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #f5f5f5;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}
.curriculum-module {
    background-color: var(--color-white);
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
    overflow: hidden;
}
.curriculum-module:last-child {
    border-bottom: none;
}
.curriculum-module:hover {
    background-color: #fafafa;
}
.module-header {
    cursor: pointer;
    padding: calc(var(--spacing) * 5);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 0.3s;
    justify-content: space-between;
    align-items: center;
    transition-duration: 0.3s;
    display: flex;
}
.module-header:hover {
    background-color: #f9fafb;
}
.module-title-row {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.module-toggle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #717171;
    transform-origin: 50%;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s;
}
.module-toggle:hover {
    color: #2191df;
}
.curriculum-module .module-content {
    opacity: 0;
    max-height: 0;
    transition:
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s,
        transform 0.4s;
    overflow: hidden;
    transform: translateY(-10px);
}
.curriculum-module .module-content.open {
    opacity: 1;
    max-height: 2000px;
    transform: translateY(0);
}
.curriculum-module:has(.module-content.open) .module-header {
    background-color: #f5f9ff;
}
.module-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.module-duration {
    color: #717171;
    font-size: 16px;
}
.lesson-row {
    padding: calc(var(--spacing) * 4);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 0.2s;
    border-bottom: 1px solid #f5f5f5;
    justify-content: space-between;
    align-items: center;
    transition-duration: 0.2s;
    display: flex;
}
.lesson-row:last-child {
    border-bottom: none;
}
.lesson-row:hover {
    background-color: #f9fafb;
    transform: translate(4px);
}
.lesson-info {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.lesson-icon {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: #0069b2;
}
.lesson-title {
    color: #4d4d4d;
    font-size: 16px;
}
.lesson-duration {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: #717171;
    font-size: 16px;
    display: flex;
}
.lesson-duration img {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
}
.reviews-header {
    margin-bottom: calc(var(--spacing) * 8);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 6);
    display: flex;
}
.reviews-main-rating {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    min-width: 120px;
    display: flex;
}
.reviews-big-number {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: #1c1c1c;
}
.reviews-stars-large {
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    /*color: #ffb800;*/
    color: gray;
    opacity: 0.5;
    display: flex;
}
.reviews-stars-large .active{
    color: #ffb800;
    opacity: 1;
}
.reviews-total-count {
    text-align: center;
    color: #717171;
    font-size: 13px;
}
.rating-bars {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    flex: 1;
    max-width: 400px;
    display: flex;
}
.rating-bar-row {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.rating-label {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    color: #4d4d4d;
    min-width: 32px;
    font-size: 13px;
    display: flex;
}
.rating-star-small {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: #ffb800;
}
.rating-bar-bg {
    height: calc(var(--spacing) * 2);
    background-color: #e5e5e5;
    border-radius: 3.40282e38px;
    flex: 1;
    overflow: hidden;
}
.rating-bar-fill {
    height: 100%;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #28a6ff;
}
.rating-count {
    text-align: right;
    color: #4d4d4d;
    min-width: 45px;
    font-size: 13px;
}
.recommendation-badge {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    min-width: 180px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    display: flex;
}
.recommendation-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: #0069b2;
}
.recommendation-text {
    flex-direction: column;
    display: flex;
}
.recommendation-percent {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 22px;
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.recommendation-label {
    margin-top: calc(var(--spacing) * 1);
    color: #4d4d4d;
    font-size: 14px;
}
.divider {
    margin-block: calc(var(--spacing) * 4);
    background-color: var(--color-gray-100);
    width: 100%;
    height: 1px;
}
.reviews-grid {
    margin-bottom: calc(var(--spacing) * 8);
    gap: calc(var(--spacing) * 6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
}
@media (min-width: 48rem) {
    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.review-card {
    background-color: var(--color-white);
    border: none;
    border-radius: 16px;
    flex-direction: column;
    gap: 24px;
    width: 527px;
    max-width: 100%;
    padding: 32px;
    display: flex;
    position: relative;
    box-shadow: 0 0 20px #00000014;
}
.review-card-header {
    margin-bottom: calc(var(--spacing) * 4);
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.review-card-avatar {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    object-fit: cover;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
}
.review-card-meta {
    gap: calc(var(--spacing) * 1);
    flex-direction: column;
    display: flex;
}
.review-card-author {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.review-card-stars {
    gap: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #ffb800;
    display: flex;
}
.review-card-date {
    color: #a0aec0;
    font-size: 12px;
}
.review-card-text {
    --tw-leading: var(--leading-relaxed);
    font-size: 14px;
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.reviews-pagination {
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 80px;
    margin-bottom: 313px;
    display: flex;
}
.pagination-arrow {
    cursor: pointer;
    border-style: var(--tw-border-style);
    background-color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: #2191df;
    border-width: 1px;
    border-color: #e9f6ff;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    display: flex;
}
.pagination-arrow:hover:not(:disabled) {
    background-color: #e9f6ff;
    border-color: #2191df;
}
.pagination-arrow:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.pagination-number {
    cursor: pointer;
    background-color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: #4d4d4d;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
}
.pagination-number:hover {
    background-color: #f5f9ff;
    border-color: #0069b2;
}
.pagination-number.active {
    border-style: var(--tw-border-style);
    color: #0069b2;
    background-color: #e9f6ff;
    border-width: 1px;
    border-color: #0069b2;
}
.pagination-dots {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    padding-inline: calc(var(--spacing) * 2);
    color: #4d4d4d;
    letter-spacing: 5px;
    justify-content: center;
    align-items: center;
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    display: flex;
}
.reviews-rating {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 6);
    background-color: #f9fafb;
    flex-direction: column;
    display: flex;
}
.reviews-number {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 48px;
    font-weight: var(--font-weight-bold);
    color: #1c1c1c;
}
.reviews-stars {
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: #ffb800;
    display: flex;
}
.reviews-count {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #717171;
}
.reviews-list {
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
}
.review-item {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    border-width: 1px;
    border-color: #e5e5e5;
}
.review-header {
    margin-bottom: calc(var(--spacing) * 3);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.review-avatar {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    object-fit: cover;
    border-radius: 3.40282e38px;
}
.review-meta {
    gap: calc(var(--spacing) * 1);
    flex-direction: column;
    display: flex;
}
.review-author {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.review-rating {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    display: flex;
}
.review-rating i {
    color: #28a6ff;
    font-size: 12px;
}
.reviews-time {
    margin-left: calc(var(--spacing) * 2);
    color: #717171;
    font-size: 12px;
}
.review-text {
    --tw-leading: var(--leading-relaxed);
    font-size: 14px;
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.course-price-info {
    margin-bottom: calc(var(--spacing) * 6);
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    text-align: left;
    display: flex;
}
.price-large {
    text-align: left;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: #e53e3e;
    line-height: 1;
}
.price-original {
    text-align: left;
    color: #a0aec0;
    font-size: 20px;
    text-decoration-line: line-through;
}
.btn-primary-sidebar {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    --tw-border-style: none;
    width: 335px;
    height: 45px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-style: none;
    border-radius: 32px;
    display: flex;
}
@media (hover: hover) {
    .btn-primary-sidebar:hover {
        background-color: #005a94;
    }
}
.btn-primary-sidebar {
    box-shadow: 0 2px 4px #0069b233;
}
.btn-secondary-sidebar {
    margin-top: calc(var(--spacing) * 3);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    --tw-border-style: none;
    width: 335px;
    height: 45px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #0069b2;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #e6f4ff;
    border-style: none;
    border-radius: 32px;
    display: flex;
}
@media (hover: hover) {
    .btn-secondary-sidebar:hover {
        background-color: #d1ebff;
    }
}
.premium-btn-style {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    display: block;
}
.instructor-profile-header {
    margin-bottom: calc(var(--spacing) * 10);
    align-items: flex-start;
    gap: calc(var(--spacing) * 8);
    display: flex;
}
.instructor-avatar-large {
    height: calc(var(--spacing) * 60);
    width: calc(var(--spacing) * 60);
    object-fit: cover;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
}
.instructor-info-block {
    margin-top: calc(var(--spacing) * 4);
    flex: 1;
}
.instructor-name-title {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 1);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.instructor-subtitle {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #717171;
}
.instructor-stats-list {
    margin-bottom: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
}
.instructor-stat-row {
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: #1c1c1c;
    display: flex;
}
.instructor-stat-row i {
    width: calc(var(--spacing) * 5);
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
}
.instructor-stat-row:first-child i {
    color: #ffb800;
}
.instructor-stat-row:nth-child(2) i,
.instructor-stat-row:nth-child(3) i,
.instructor-stat-row:nth-child(4) i {
    color: #28a6ff;
}
.instructor-bio-text {
    width: 100%;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #4d4d4d;
}
.instructor-bio-text p {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 4);
}
.instructor-bio-text p:last-child {
    margin-bottom: calc(var(--spacing) * 0);
}
.instructor-link {
    margin-top: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: #28a6ff;
    margin-bottom: 52px;
    text-decoration-line: none;
    display: inline-block;
}
.instructor-link:hover {
    text-decoration-line: underline;
}
.instructor-courses-section {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
}
.courses-heading {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.instructor-course-card {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    width: 100%;
    max-width: 100%;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
}
.instructor-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px #00000026;
}
.course-card-img {
    height: 181px;
    width: calc(var(--spacing) * 72);
    border-top-left-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
    object-fit: cover;
    flex-shrink: 0;
    min-width: 288px;
    display: block;
}
.course-card-content {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    flex: 1;
    display: flex;
}
.course-card-title {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.course-card-desc {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: #4d4d4d;
}
.course-card-bottom {
    margin-top: calc(var(--spacing) * 1);
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.course-rating-info {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    display: flex;
}
.rating-number {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
}
.rating-stars {
    gap: calc(var(--spacing) * 0.5);
    display: flex;
}
.rating-stars i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #ffb800;
}
.rating-reviews {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #717171;
}
.course-meta-item {
    padding-left: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #333;
    position: relative;
}
.course-meta-item:before {
    left: calc(var(--spacing) * 1);
    color: #4d4d4d;
    content: "·";
    position: absolute;
}
.course-meta-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    color: #333;
}
.course-meta-divider {
    margin-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #4d4d4d;
}
.course-card-price-wrapper {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
}
.course-card-price {
    margin-right: calc(var(--spacing) * 5);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: #1c1c1c;
}
.course-card-price-sale {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: #cc163e;
}
.course-card-price-old {
    margin-right: calc(var(--spacing) * 5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    color: #999;
    text-decoration-line: line-through;
}
.stat-item {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #1c1c1c;
    display: flex;
}
.stat-item i {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: #ffb800;
}
.instructor-bio-section {
    gap: calc(var(--spacing) * 4);
    text-align: left;
    flex-direction: column;
    width: 100%;
    display: flex;
}
.instructor-bio-section p {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: #4d4d4d;
}
.view-profile-btn {
    height: calc(var(--spacing) * 14);
    cursor: pointer;
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    width: 100%;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-style: none;
}
.view-profile-btn:hover {
    background-color: #005a9c;
}
@media (max-width: 1200px) {
    .content-layout {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .hero-gradient {
        margin-right: 0;
        padding-right: 10rem;
    }
    .course-meta-row {
        gap: calc(var(--spacing) * 5);
        padding: calc(var(--spacing) * 6);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: -100px;
    }
    .content-card,
    .lesson-header {
        width: 100%;
    }
    .course-image-wrapper {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
    }
    .sidebar .progress-card {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .reviews-header {
        gap: calc(var(--spacing) * 4);
        flex-wrap: wrap;
    }
    .reviews-main-rating {
        min-width: 100px;
    }
    .rating-bars {
        max-width: 350px;
    }
    .recommendation-badge {
        min-width: 160px;
    }
    .instructor-profile-header {
        gap: 20px;
    }
    .instructor-avatar-large {
        width: 150px;
        height: 150px;
    }
    .instructor-name-title {
        font-size: 20px;
    }
    .instructor-subtitle {
        font-size: 14px;
    }
    .instructor-courses-section {
        gap: 20px;
    }
    .instructor-course-card {
        gap: 16px;
        padding: 16px;
    }
    .course-card-img {
        width: 200px;
        min-width: 200px;
        height: 140px;
    }
    .course-card-title {
        font-size: 17px;
    }
    .course-card-desc {
        font-size: 13px;
        line-height: 19px;
    }
    .course-rating-info {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;
    }
    .course-meta-item {
        font-size: 13px;
    }
    .course-card-price {
        font-size: 18px;
    }
    .course-card-price-old {
        font-size: 15px;
    }
}
@media (max-width: 1024px) {
    .instructor-courses-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        display: grid;
    }
    .courses-heading {
        grid-column: 1/-1;
        margin-bottom: 0;
        font-size: 20px;
    }
    .instructor-course-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 8px 20px #00000014;
    }
    .instructor-course-card:hover {
        transform: translateY(-4px);
    }
    .course-card-img {
        object-fit: cover;
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        width: 100%;
        min-width: 100%;
        height: 200px;
        display: block;
    }
    .course-card-content {
        gap: 8px;
        padding: 16px;
    }
    .course-card-title {
        margin-bottom: 4px;
        font-size: 17px;
        font-weight: 600;
    }
    .course-card-desc {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 20px;
    }
    .course-card-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .course-rating-info {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        font-size: 13px;
    }
    .course-card-price-wrapper {
        justify-content: flex-start;
        width: 100%;
    }
    .course-card-price,
    .course-card-price-sale {
        margin-right: 8px;
        font-size: 20px;
    }
    .course-card-price-old {
        font-size: 15px;
    }
}
@media (max-width: 768px) {
    .breadcrumb-nav {
        gap: calc(var(--spacing) * 1.5);
        white-space: nowrap;
        margin-block: 20px;
        font-size: 14px;
    }
    .breadcrumb-separator {
        font-size: 10px;
    }
    .hero-gradient {
        padding: calc(var(--spacing) * 6);
        text-align: center;
        margin-right: 0;
        padding-right: 1.5rem;
        overflow-x: hidden;
    }
    .hero-title {
        margin-inline: auto;
        font-size: 32px;
    }
    .hero-description {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        margin-inline: auto;
    }
    .instructor-badges {
        justify-content: center;
    }
    .section-subtitle {
        font-size: 20px;
    }
    .course-curriculum {
        gap: 12px;
    }
    .module-header {
        flex-wrap: wrap;
        padding: 16px;
    }
    .module-title {
        font-size: 15px;
    }
    .module-duration {
        font-size: 14px;
    }
    .module-right {
        justify-content: space-between;
        width: 100%;
        margin-top: 8px;
    }
    .module-progress-bar {
        width: 120px;
    }
    .lesson-row {
        flex-wrap: wrap;
        padding: 12px 16px;
    }
    .lesson-info {
        flex: 1;
    }
    .lesson-title,
    .lesson-duration {
        font-size: 14px;
    }
    .lesson-status {
        width: 100%;
        margin-top: 8px;
        font-size: 13px;
    }
    .includes-container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }
    .include-text {
        font-size: 14px;
    }
    .hero-bg {
        width: 150%;
        max-width: none;
    }
    .lesson-status {
        justify-content: center;
    }
    .course-meta-row {
        gap: calc(var(--spacing) * 4);
        padding: calc(var(--spacing) * 5);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: -80px;
    }
    .meta-number,
    .rating-number {
        font-size: 15px;
    }
    .meta-description {
        font-size: 13px;
    }
    .content-card {
        border-radius: var(--radius-xl);
    }
    .lesson-header {
        padding: calc(var(--spacing) * 6);
        min-height: auto;
    }
    .tabs-wrapper {
        padding-inline: calc(var(--spacing) * 4);
    }
    .tabs {
        gap: calc(var(--spacing) * 3);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
    }
    .tabs:before,
    .tabs:after {
        display: none;
    }
    .tab {
        padding-block: calc(var(--spacing) * 3.5);
        text-align: center;
        font-size: 14px;
    }
    .tab-content {
        padding: calc(var(--spacing) * 4);
    }
    .content-heading {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .content-text {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .sidebar {
        width: 100%;
        max-width: 383px;
        margin-top: 2rem;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: auto;
    }
    .course-image-wrapper {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        width: 100%;
        max-width: 383px;
        max-height: 180px;
        margin: 0 auto;
        overflow: hidden;
    }
    .course-thumbnail {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        object-fit: cover;
        width: 100%;
        height: 100%;
        max-height: 180px;
    }
    .sidebar .progress-card {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: var(--radius-2xl);
        border-bottom-left-radius: var(--radius-2xl);
        margin: 0;
        padding: 0;
    }
    .sidebar-section {
        padding: calc(var(--spacing) * 5);
    }
    .sidebar-title {
        margin-bottom: calc(var(--spacing) * 3);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .course-price-info {
        margin-bottom: calc(var(--spacing) * 3);
        align-items: baseline;
        gap: calc(var(--spacing) * 2);
        flex-direction: row;
    }
    .price-large {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .price-original {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .lesson-btn,
    .lesson-btn-secondary {
        padding-block: calc(var(--spacing) * 3);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .sidebar-tabs {
        flex-direction: row;
        position: relative;
    }
    .sidebar-tabs:before {
        content: "";
        z-index: 1;
        background: #e5e5e5;
        width: 350px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 30%;
        transform: translate(-27%);
    }
    .sidebar-tabs:after {
        z-index: 2;
    }
    .sidebar-tab {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
        position: relative;
    }
    .sidebar-tab-content {
        padding: calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .coupon-section-title {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .coupon-apply-btn {
        width: 100%;
    }
    .course-meta-row {
        width: 100%;
        min-height: auto;
        box-shadow: none;
        background: 0 0;
        flex-direction: column;
        gap: 16px;
        margin-top: -60px;
        padding: 0;
        display: flex;
    }
    .course-meta-item {
        gap: calc(var(--spacing) * 2);
        background: #fff;
        border-radius: 12px;
        flex-direction: column;
        padding: 20px;
        font-size: 16px;
        display: flex;
        box-shadow: 0 4px 12px #1a78e514;
    }
    .learning-grid {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 24px;
    }
    .info-grid {
        gap: calc(var(--spacing) * 6);
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .reviews-header {
        align-items: stretch;
        gap: calc(var(--spacing) * 4);
        padding: calc(var(--spacing) * 4);
        flex-direction: column;
    }
    .reviews-main-rating {
        align-items: center;
        width: 100%;
    }
    .rating-bars {
        max-width: 100%;
    }
    .recommendation-badge {
        justify-content: center;
        width: 100%;
    }
    .reviews-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .reviews-filter-tabs {
        white-space: nowrap;
        overflow-x: auto;
    }
    .filter-tab {
        display: inline-block;
    }
    .pagination-arrow,
    .pagination-number {
        height: calc(var(--spacing) * 8);
        width: calc(var(--spacing) * 8);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .includes-container {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        padding: 24px;
        display: flex;
    }
    .includes-left,
    .includes-right {
        gap: 16px;
    }
    .sidebar-tab-content {
        padding: calc(var(--spacing) * 5);
    }
    .coupon-input-wrapper {
        gap: calc(var(--spacing) * 3);
        flex-direction: column;
    }
    .coupon-input,
    .coupon-apply-btn {
        width: 100%;
        padding-block: calc(var(--spacing) * 2.5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .premium-price {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .premium-period {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .premium-btn {
        padding-block: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .other-lessons {
        border-bottom-right-radius: var(--radius-2xl);
        border-bottom-left-radius: var(--radius-2xl);
        padding: calc(var(--spacing) * 5);
    }
    .check-items-list {
        gap: calc(var(--spacing) * 3);
    }
    .check-item {
        gap: calc(var(--spacing) * 2);
    }
    .check-item span {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .check-item i {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .divider-text {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .sidebar-divider {
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 5);
    }
    .curriculum-module {
        border-radius: var(--radius-lg);
    }
    .module-header {
        padding: calc(var(--spacing) * 4);
    }
    .module-title {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .module-duration {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .lesson-row {
        padding: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .reviews-number {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    .review-item {
        padding: calc(var(--spacing) * 4);
    }
    .review-avatar {
        height: calc(var(--spacing) * 10);
        width: calc(var(--spacing) * 10);
    }
    .review-author,
    .review-text {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}
@media (max-width: 480px) {
    .breadcrumb-nav {
        gap: calc(var(--spacing) * 1);
        white-space: nowrap;
        margin-block: 15px;
        font-size: 12px;
    }
    .breadcrumb-separator {
        white-space: nowrap;
        font-size: 9px;
    }
    .hero-gradient {
        padding: calc(var(--spacing) * 4);
        text-align: center;
    }
    .module-text {
        padding-inline: calc(var(--spacing) * 2.5);
        padding-block: calc(var(--spacing) * 1);
        margin-inline: auto;
        font-size: 14px;
    }
    .hero-title {
        margin-inline: auto;
        font-size: 24px;
    }
    .hero-description {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        margin-inline: auto;
    }
    .lesson-status {
        justify-content: center;
    }
    .course-meta-row {
        gap: calc(var(--spacing) * 3);
        padding: calc(var(--spacing) * 4);
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .meta-number,
    .rating-number {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .meta-description {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .lesson-header {
        padding: calc(var(--spacing) * 4);
    }
    .lesson-meta-grid {
        gap: calc(var(--spacing) * 3);
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .tabs {
        gap: calc(var(--spacing) * 2.5);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
    }
    .tabs:before,
    .tabs:after {
        display: none;
    }
    .tab {
        padding-block: calc(var(--spacing) * 3);
        text-align: center;
        font-size: 13px;
    }
    .sidebar-section {
        padding: calc(var(--spacing) * 3);
    }
    .course-price-info {
        margin-bottom: calc(var(--spacing) * 3);
    }
    .price-large {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .price-original {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .sidebar-tab {
        padding-block: calc(var(--spacing) * 2.5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .sidebar-tab-content {
        padding: calc(var(--spacing) * 3);
    }
    .coupon-input,
    .coupon-apply-btn {
        padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .premium-price {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .premium-period,
    .check-item span {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .other-lessons {
        padding: calc(var(--spacing) * 3);
    }
    .content-heading {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .content-text,
    .point-text {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .tag-pill {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1.5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .module-title {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .lesson-row {
        padding: calc(var(--spacing) * 2.5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .review-text {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .instructor-profile-header {
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .instructor-avatar-large {
        width: 120px;
        height: 120px;
    }
    .instructor-name-title {
        font-size: 22px;
    }
    .instructor-subtitle {
        font-size: 16px;
    }
    .instructor-stats-list {
        gap: 8px;
    }
    .instructor-stat-row {
        font-size: 14px;
    }
    .instructor-bio-text {
        font-size: 15px;
        line-height: 18px;
    }
    .instructor-bio-text p {
        margin-bottom: 12px;
    }
    .instructor-link {
        font-size: 15px;
    }
    .courses-heading {
        margin-bottom: 16px;
        font-size: 18px;
    }
    .instructor-courses-section {
        flex-direction: column;
        align-items: center;
        display: flex;
    }
    .instructor-course-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 361px;
        max-width: 100%;
        height: 510px;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 2px 8px #0000001a;
    }
    .instructor-course-card:hover {
        transform: translateY(-4px);
    }
    .course-card-img {
        border-radius: 16px 16px 0 0;
        width: 100%;
        min-width: 100%;
        height: 220px;
    }
    .course-card-content {
        gap: 8px;
        padding: 20px;
    }
    .course-card-title {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 600;
    }
    .course-card-desc {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 21px;
    }
    .course-card-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 0;
    }
    .course-rating-info {
        flex-wrap: wrap;
        flex: 1;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        display: flex;
    }
    .rating-number {
        font-size: 13px;
        font-weight: 600;
    }
    .rating-stars {
        gap: 2px;
        display: flex;
    }
    .rating-stars i,
    .rating-reviews {
        font-size: 13px;
    }
    .course-meta-item {
        padding-left: 8px;
        font-size: 13px;
        display: inline;
    }
    .course-meta-item:first-of-type {
        margin-top: 0;
    }
    .course-meta-item:before {
        content: "·";
        position: absolute;
        left: 2px;
    }
    .course-card-price-wrapper {
        flex-direction: column;
        flex-shrink: 0;
        align-items: flex-start;
        gap: 4px;
        margin-top: 0;
    }
    .course-card-price,
    .course-card-price-sale {
        font-size: 20px;
        font-weight: 700;
    }
    .course-card-price-old {
        margin-right: 0;
        font-size: 15px;
    }
}
.cart-modal {
    inset: calc(var(--spacing) * 0);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
}
.cart-modal-overlay {
    inset: calc(var(--spacing) * 0);
    z-index: 1;
    background-color: #00000080;
    position: fixed;
}
@supports (color: color-mix(in lab, red, red)) {
    .cart-modal-overlay {
        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
}
.cart-modal-overlay {
    -webkit-backdrop-filter: blur(4px);
}
.cart-modal-content {
    z-index: 2;
    border-radius: var(--radius-3xl);
    background-color: var(--color-white);
    width: 686px;
    max-width: 90vw;
    height: 798px;
    max-height: 90vh;
    padding: calc(var(--spacing) * 8);
    position: relative;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px #00000040;
}
.cart-modal-close {
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    --tw-border-style: none;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: #717171;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0000;
    border-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}
.cart-modal-close:hover {
    color: #1c1c1c;
}
.cart-modal-header {
    margin-bottom: calc(var(--spacing) * 6);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
}
.cart-modal-check-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
}
.cart-modal-header h3 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
    font-family: Poppins, sans-serif;
}
.cart-modal-body {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
}
.cart-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    --tw-border-style: none;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 0);
    border-style: none;
    display: flex;
}
.cart-item-image {
    height: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
    object-fit: cover;
    flex-shrink: 0;
    width: 120px;
}
.cart-item-info {
    min-height: calc(var(--spacing) * 24);
    justify-content: space-between;
    gap: calc(var(--spacing) * 0.5);
    flex-direction: column;
    flex: 1;
    display: flex;
}
.cart-item-title {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: #1c1c1c;
    font-family: Poppins, sans-serif;
}
.cart-item-instructor {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #4d4d4d;
    margin-bottom: auto;
    font-family: Poppins, sans-serif;
}
.cart-item-price {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #f44;
    font-family: Poppins, sans-serif;
}
.cart-item-original {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #9ca3af;
    text-decoration-line: line-through;
}
.cart-upsell-section {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
}
.cart-divider {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 2);
    background-color: #e8e8e8;
    width: 100%;
    height: 1px;
}
.cart-upsell-title {
    margin: calc(var(--spacing) * 0);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: #1c1c1c;
    font-family: Poppins, sans-serif;
}
.cart-upsell-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    --tw-border-style: none;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 0);
    border-style: none;
    display: flex;
}
.cart-upsell-image {
    height: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
    object-fit: cover;
    flex-shrink: 0;
    width: 120px;
}
.cart-upsell-info {
    min-height: calc(var(--spacing) * 24);
    justify-content: space-between;
    gap: calc(var(--spacing) * 0.5);
    flex-direction: column;
    flex: 1;
    display: flex;
}
.cart-upsell-name {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: #1c1c1c;
    font-family: Poppins, sans-serif;
}
.cart-upsell-instructor {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #4d4d4d;
    margin-bottom: auto;
    font-family: Poppins, sans-serif;
}
.cart-upsell-price {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #f44;
    font-family: Poppins, sans-serif;
}
.cart-upsell-price.no-discount {
    color: #1c1c1c;
}
.cart-upsell-original {
    margin-left: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #9ca3af;
    text-decoration-line: line-through;
}
.cart-upsell-btn {
    cursor: pointer;
    --tw-border-style: none;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: #0069b2;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #d4edff;
    border-style: none;
    border-radius: 20px;
    align-self: flex-end;
    margin-top: auto;
    font-family: Poppins, sans-serif;
}
.cart-upsell-btn:hover {
    background-color: #bfe3ff;
}
.cart-modal-footer {
    margin-top: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    padding-top: calc(var(--spacing) * 6);
    border-color: #e5e7eb;
    border-top-width: 1px;
    justify-content: flex-end;
    display: flex;
}
.cart-btn-continue {
    cursor: pointer;
    --tw-border-style: none;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #0069b2;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #d4edff;
    border-style: none;
    border-radius: 32px;
    font-family: Poppins, sans-serif;
}
.cart-btn-continue:hover {
    background-color: #bfe3ff;
}
.cart-btn-checkout {
    cursor: pointer;
    --tw-border-style: none;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: #0069b2;
    border-style: none;
    border-radius: 32px;
    font-family: Poppins, sans-serif;
}
.cart-btn-checkout:hover {
    background-color: #005a9c;
}
@media (max-width: 768px) {
    .cart-modal-content {
        width: 95%;
        max-height: 85vh;
        padding: calc(var(--spacing) * 6);
    }
    .cart-item {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    .cart-item-image {
        width: 100%;
        height: 150px;
    }
    .cart-upsell-item {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    .cart-upsell-image {
        width: 100%;
        height: 120px;
    }
    .cart-modal-footer {
        flex-direction: column;
    }
}
@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-x {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-y {
    syntax: "*";
    inherits: false;
}
@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-leading {
    syntax: "*";
    inherits: false;
}
@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}
@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}
@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-sepia {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false;
}
@property --tw-duration {
    syntax: "*";
    inherits: false;
}
@property --tw-ease {
    syntax: "*";
    inherits: false;
}
@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-gradient-position {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-stops {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}
@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-tracking {
    syntax: "*";
    inherits: false;
}
@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}