* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #E8E8E8;
    overflow-x: hidden;
}

body {
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #FFFFFF;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0 7.33vw;
    position: relative;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    body {
        padding: 0 8.19vw; /* 118px / 1440px */
    }
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 2.93vw) 0 0; /* 11px / 375px */
    height: 22.67vw; /* 85px / 375px */
}

.logo-penta {
    order: 1;
}

.logo-penta .logo-img {
    width: 19.47vw; /* 73px / 375px */
    height: 5.07vw; /* 19px / 375px */
    display: block;
}

.logo-disney {
    order: 2;
}

.logo-disney .logo-img {
    width: 12.53vw; /* 47px / 375px */
    height: 5.33vw; /* 20px / 375px */
    display: block;
}

/* Hero Content */
.hero-content {
    text-align: center;
    width: 100%;
    max-width: 81.07vw; /* 304px / 375px */
    margin: 0 auto;
    padding-top: 13.87vw; /* 52px / 375px */
}

.sub-heading {
    font-size: 4.27vw; /* 16px / 375px */
    font-weight: 700;
    line-height: 1.5em;
    color: #292A2F;
    margin-bottom: 8.53vw; /* 32px / 375px */
}

.penta-highlight {
    color: #660FD1;
}

.main-heading {
    font-size: 3.2vw; /* 12px / 375px */
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    color: #333333;
}

/* Subscription Plans Section */
.subscription-plans {
    margin-top: 10.67vw; /* 40px / 375px */
    display: flex;
    flex-direction: column;
    gap: 2.67vw; /* 10px / 375px */
    padding: 0;
    width: 100%;
    max-width: 92.53vw; /* 347px / 375px */
    margin-left: auto;
    margin-right: auto;
}

.plan-card {
    background: #F3F6FB;
    border: 1px solid #D2D6E1;
    border-radius: 2.67vw; /* 10px / 375px */
    padding: 5.33vw; /* 20px / 375px */
    display: flex;
    flex-direction: column;
    gap: 2.13vw; /* 8px / 375px */
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.plan-card:hover {
    border-color: #B8BCC7;
}

.plan-card.selected {
    border-color: #292A2F !important;
    border-width: 2px !important;
}

.plan-check-icon {
    position: absolute;
    top: 5.33vw; /* 20px / 375px */
    right: 5.33vw; /* 20px / 375px */
    width: 6.4vw; /* 24px / 375px */
    height: 6.4vw; /* 24px / 375px */
    background: #37373E;
    border-radius: 8.53vw; /* 32px / 375px */
    display: none;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 3.73vw; /* 14px / 375px */
    font-weight: bold;
}

.plan-card.selected .plan-check-icon {
    display: flex;
}

.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.67vw; /* 10px / 375px */
}

.plan-title {
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.73vw; /* 14px / 375px */
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: -0.02em;
    color: #660FD1;
}

.plan-badge {
    background: #660FD1;
    color: #F3F6FB;
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.47vw; /* 13px / 375px */
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 1.33vw 2.67vw; /* 5px 10px / 375px */
    border-radius: 21.33vw; /* 80px / 375px */
}

.plan-pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.price-comparison {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.33vw; /* 5px / 375px */
}

.price-original {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 4.27vw; /* 16px / 375px */
    font-weight: 300;
    line-height: 1.5em;
    color: #727582;
    text-decoration: line-through;
}

.price-arrow {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 4.27vw; /* 16px / 375px */
    font-weight: 500;
    line-height: 1.5em;
    color: #727582;
}

.price-discounted {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 5.33vw; /* 20px / 375px */
    font-weight: 600;
    line-height: 1.5em;
    color: #292A2F;
}

.price-monthly {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 4.27vw; /* 16px / 375px */
    font-weight: 600;
    line-height: 1.5em;
    color: #727582;
}

.price-total {
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 5.33vw; /* 20px / 375px */
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    color: #292A2F;
    text-align: left;
    margin: 0;
}

/* App Store Button */
.app-store-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 92.53vw; /* 347px / 375px */
    padding: 4vw 5.33vw; /* 15px 20px / 375px */
    background: #E9EBF1;
    border-radius: 2.67vw; /* 10px / 375px */
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 4.27vw; /* 16px / 375px */
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: -0.02em;
    text-align: center;
    color: #AAB2C1;
    text-decoration: none;
    margin-top: 5.33vw; /* 20px / 375px */
    cursor: pointer;
    transition: all 0.3s ease;
}

.app-store-button:hover {
    background: #D9DDE8;
    color: #9AA5B8;
}

.app-store-button:active {
    transform: scale(0.98);
}

.app-store-button.active {
    background: #292A2F;
    color: #FFFFFF;
}

.app-store-button.active:hover {
    background: #1F2024;
    color: #FFFFFF;
}

/* Secondary Link */
.secondary-link {
    display: block;
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.73vw; /* 14px / 375px */
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: -0.02em;
    text-align: center;
    color: #727582;
    text-decoration: none;
    margin-top: 1.33vw; /* 5px / 375px */
    cursor: pointer;
    transition: color 0.2s ease;
}

.secondary-link:hover {
    color: #5A6070;
    text-decoration: underline;
}

.secondary-link:active {
    color: #4A505E;
}

/* Info Text */
.info-text {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.2vw; /* 12px / 375px */
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: -0.02em;
    text-align: left;
    color: #9298A6;
    margin-top: 5.33vw; /* 20px / 375px */
    max-width: 86.67vw; /* 325px / 375px */
}

/* Phone Section */
.phone-section {
    position: relative;
    margin-top: 16vw; /* 60px / 375px */
    padding-top: 4.8vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 133.33vw; /* 500px / 375px */
}

.phone-mockup-container {
    position: relative;
    width: 55.47vw; /* 208px / 375px */
    height: 112.8vw; /* 423px / 375px */
}

.phone-mockup-shadow {
    position: absolute;
    top: -0.27vw; /* -1px / 375px */
    left: 0.93vw; /* 3.47px / 375px */
    width: 53.07vw; /* 199px / 375px */
    height: 112.8vw; /* 423px / 375px */
    background: rgba(255, 255, 255, 0);
    border-radius: 12.27vw; /* 46px / 375px */
    box-shadow:
        0px 9.6vw 3.68vw 0px rgba(0, 0, 0, 0.05),
        0px 6.67vw 2.53vw 0px rgba(0, 0, 0, 0.05),
        0px 4.53vw 1.73vw 0px rgba(0, 0, 0, 0.05),
        0px 2.93vw 1.17vw 0px rgba(0, 0, 0, 0.04);
}

.phone-mockup {
    position: relative;
    width: 55.47vw; /* 208px / 375px */
    height: 112.8vw; /* 423px / 375px */
}

.phone-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 55.47vw; /* 208px / 375px */
    height: 112.8vw; /* 423px / 375px */
    z-index: 2;
    pointer-events: none;
}

.phone-frame-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.phone-screens {
    position: absolute;
    top: 1.6vw; /* 6px / 375px */
    left: 2.67vw; /* 10px / 375px */
    width: 50.13vw; /* 188px / 375px */
    height: 108.8vw; /* 408px / 375px */
    overflow: hidden;
    border-radius: 2.67vw; /* 10px / 375px */
    z-index: 1;
}

.screen-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.screen-wrapper.active {
    opacity: 1;
}

.screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.67vw; /* 10px / 375px */
}

/* Navigation Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow img {
    width: 6.67vw; /* 25px / 375px */
    height: 6.67vw; /* 25px / 375px */
    display: block;
}

.arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.arrow-left {
    left: max(2.67vw, calc((100% - 55.47vw) / 2 - 13.33vw)); /* 10px, 208px, 50px / 375px */
}

.arrow-right {
    right: max(2.67vw, calc((100% - 55.47vw) / 2 - 13.33vw)); /* 10px, 208px, 50px / 375px */
}

/* Pagination Dots */
.pagination-dots {
    position: absolute;
    top: 0; /* -20px / 375px - negative to place above phone */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2.13vw; /* 8px / 375px */
    z-index: 10;
}

.dot {
    width: 1.6vw; /* 6px / 375px */
    height: 1.6vw; /* 6px / 375px */
    border-radius: 50%;
    background-color: #D2D6E1;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #37373E;
}

/* Footer */
.footer {
    background-color: #AE6BFF;
    margin-top: 10.67vw; /* 70px / 375px */
    margin-left: -7.33vw;
    margin-right: -7.33vw;
    width: 100vw;
    padding: 7.47vw 7.33vw 8vw 7.33vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.2vw; /* 27px / 375px */
}

.footer-card {
    background-color: #FCFCFC;
    border-radius: 4vw; /* 15px / 375px */
    padding: 3.73vw 0 0 3.47vw; /* 14px top, 13px left / 375px */
    width: 100%;
    max-width: 60.8vw; /* 228px / 375px */
    min-height: 30.67vw; /* 115px / 375px */
    position: relative;
}

.footer-heading {
    font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.73vw; /* 14px / 375px */
    font-weight: 700;
    font-style: normal;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #292A2F;
    margin-bottom: 3.73vw; /* 14px / 375px */
}

.footer-logo {
    position: absolute;
    bottom: 3.73vw; /* 14px / 375px */
    left: 3.47vw; /* 13px / 375px - same as card left padding */
}

.footer-logo img {
    width: 19.47vw; /* 73px / 375px */
    height: 5.07vw; /* 19px / 375px */
    display: block;
}

.social-links {
    position: absolute;
    bottom: 4vw; /* 15px / 375px */
    right: 4vw; /* 15px / 375px */
    display: flex;
    gap: 2.67vw; /* 10px / 375px */
}

.social-link {
    width: 6.4vw; /* 24px / 375px */
    height: 6.4vw; /* 24px / 375px */
    background-color: #000;
    border-radius: 1.6vw; /* 6px / 375px */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
}

.social-link img {
    width: 5.33vw; /* 20px / 375px */
    height: 5.33vw; /* 20px / 375px */
    display: block;
}

.footer-info-box {
    width: 100%;
    max-width: 79.2vw; /* 297px / 375px */
}

.footer-text {
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.67vw; /* 10px / 375px */
    font-weight: 500;
    font-style: normal;
    line-height: 140%;
    letter-spacing: -0.02em;
    vertical-align: middle;
    color: #FFFFFF;
}

/* Tablet and Desktop styles */
@media (min-width: 768px) {

    /* Header */
    .header {
        padding: calc(env(safe-area-inset-top) + 1.35vw) 0 0; /* 19.5px / 1440px */
        height: 4.65vw; /* 67px / 1440px */
    }

    .logo-penta {
        order: 1;
    }

    .logo-penta .logo-img {
        width: 8.54vw; /* 123px / 1440px */
        height: 2.22vw; /* 32px / 1440px */
    }

    .logo-disney {
        order: 2;
    }

    .logo-disney .logo-img {
        width: 6.81vw; /* 98px / 1440px */
        height: 2.92vw; /* 42px / 1440px */
    }

    /* Hero Content */
    .hero-content {
        padding-top: 10.8vw; /* 156px / 1440px (218.5 - 67 + 4.5) */
        max-width: 100%;
    }

    .sub-heading {
        font-size: 4.96vw; /* 71.42px / 1440px */
        font-weight: 700;
        line-height: 1.33em;
        margin-bottom: 7.08vw; /* 102px / 1440px (168 - 66 from text height) */
    }

    .main-heading {
        font-size: 2.22vw; /* 32px / 1440px */
        font-weight: 500;
        line-height: 1.5em;
        letter-spacing: -0.02em;
        margin: 0 auto;
        max-width: 46.94vw; /* 676px / 1440px */
    }

    /* Subscription Plans Section */
    .subscription-plans {
        margin-top: 5.56vw; /* 80px / 1440px */
        gap: 0.69vw; /* 10px / 1440px */
        max-width: 24.1vw; /* 347px / 1440px */
    }

    .plan-card {
        border-radius: 0.69vw; /* 10px / 1440px */
        padding: 1.39vw; /* 20px / 1440px */
        gap: 0.56vw; /* 8px / 1440px */
    }

    .plan-check-icon {
        top: 1.39vw; /* 20px / 1440px */
        right: 1.39vw; /* 20px / 1440px */
        width: 1.67vw; /* 24px / 1440px */
        height: 1.67vw; /* 24px / 1440px */
        border-radius: 2.22vw; /* 32px / 1440px */
        font-size: 0.97vw; /* 14px / 1440px */
    }

    .plan-header {
        gap: 0.69vw; /* 10px / 1440px */
    }

    .plan-title {
        font-size: 0.97vw; /* 14px / 1440px */
    }

    .plan-badge {
        font-size: 0.9vw; /* 13px / 1440px */
        padding: 0.35vw 0.69vw; /* 5px 10px / 1440px */
        border-radius: 5.56vw; /* 80px / 1440px */
    }

    .price-comparison {
        gap: 0.35vw; /* 5px / 1440px */
    }

    .price-original {
        font-size: 1.11vw; /* 16px / 1440px */
    }

    .price-arrow {
        font-size: 1.11vw; /* 16px / 1440px */
    }

    .price-discounted {
        font-size: 1.39vw; /* 20px / 1440px */
    }

    .price-monthly {
        font-size: 1.11vw; /* 16px / 1440px */
    }

    .price-total {
        font-size: 1.39vw; /* 20px / 1440px */
    }

    /* App Store Button */
    .app-store-button {
        max-width: 24.1vw; /* 347px / 1440px */
        padding: 1.04vw 1.39vw; /* 15px 20px / 1440px */
        border-radius: 0.69vw; /* 10px / 1440px */
        font-size: 1.11vw; /* 16px / 1440px */
        margin-top: 1.39vw; /* 20px / 1440px */
    }

    /* Secondary Link */
    .secondary-link {
        font-size: 0.97vw; /* 14px / 1440px */
        margin-top: 0.35vw; /* 5px / 1440px */
    }

    /* Info Text */
    .info-text {
        font-size: 0.83vw; /* 12px / 1440px */
        margin-top: 1.39vw; /* 20px / 1440px */
        max-width: 22.57vw; /* 325px / 1440px */
    }

    /* Phone Section */
    .phone-section {
        margin-top: 7.29vw; /* 105px / 1440px (from hero content end to phone start) */
        padding-top: 0;
        align-items: flex-start;
        min-height: 71.46vw; /* 1029px / 1440px (from phone start to footer) */
    }

    .phone-mockup-container {
        width: 28.13vw; /* 405px / 1440px */
        height: 57.15vw; /* 823px / 1440px */
    }

    .phone-mockup-shadow {
        width: 26.86vw; /* 386.78px / 1440px */
        height: 57.19vw; /* 823.5px / 1440px */
        left: 0.56vw; /* 8.11px / 1440px */
        border-radius: 5.4vw; /* 77.76px / 1440px */
        box-shadow:
            0px 14.1vw 5.4vw 0px rgba(0, 0, 0, 0.05),
            0px 8.33vw 3.19vw 0px rgba(0, 0, 0, 0.05),
            0px 5.42vw 2.08vw 0px rgba(0, 0, 0, 0.05),
            0px 3.68vw 1.4vw 0px rgba(0, 0, 0, 0.05),
            0px 2.5vw 0.96vw 0px rgba(0, 0, 0, 0.05),
            0px 1.74vw 0.66vw 0px rgba(0, 0, 0, 0.05),
            0px 1.18vw 0.45vw 0px rgba(0, 0, 0, 0.05),
            0px 0.76vw 0.31vw 0px rgba(0, 0, 0, 0.04);
    }

    .phone-mockup {
        width: 28.13vw; /* 405px / 1440px */
        height: 57.15vw; /* 823px / 1440px */
    }

    .phone-frame {
        width: 28.13vw; /* 405px / 1440px */
        height: 57.15vw; /* 823px / 1440px */
    }

    .phone-screens {
        top: 1.15vw; /* 16.5px / 1440px */
        left: 1.39vw; /* 20px / 1440px */
        width: 25.28vw; /* 364px / 1440px */
        height: 54.72vw; /* 788px / 1440px */
        border-radius: 2.71vw; /* 39px / 1440px */
    }

    .screen-img {
        border-radius: 2.71vw; /* 39px / 1440px */
    }

    .arrow img {
        width: 3.33vw; /* 48px / 1440px */
        height: 3.33vw; /* 48px / 1440px */
    }

    .arrow-left {
        left: max(3.47vw, calc((100% - 28.13vw) / 2 - 5.56vw)); /* 50px, 405px, 80px / 1440px */
    }

    .arrow-right {
        right: max(3.47vw, calc((100% - 28.13vw) / 2 - 5.56vw)); /* 50px, 405px, 80px / 1440px */
    }

    .pagination-dots {
        top: -1.39vw; /* -20px / 1440px */
        gap: 0.56vw; /* 8px / 1440px */
    }

    .dot {
        width: 0.69vw; /* 10px / 1440px */
        height: 0.69vw; /* 10px / 1440px */
    }

    /* Footer */
    .footer {
        margin-top: 5.83vw; /* 84px / 1440px (1854.5 - 1770.5) */
        margin-left: -8.19vw;
        margin-right: -8.19vw;
        width: 100vw;
        padding: 5.83vw 8.19vw; /* 84px with body padding / 1440px */
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.83vw; /* 12px / 1440px (449 - 437) */
        align-items: flex-start;
    }

    .footer-card {
        flex: 0 0 30.35vw; /* 437px / 1440px - fixed width */
        min-height: 23.89vw; /* 344px / 1440px */
        border-radius: 1.8vw; /* 25.92px / 1440px */
        padding: 2.01vw 0 0 1.81vw; /* 29px top, 26px left / 1440px */
    }

    .footer-heading {
        font-family: 'Pretendard JP Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 3.33vw; /* 48px / 1440px - from Figma design */
        font-weight: 700;
        font-style: normal;
        line-height: 1.3em; /* from Figma */
        letter-spacing: 0;
        vertical-align: middle;
        max-width: 25vw; /* 360px / 1440px */
        margin-bottom: 0; /* Remove bottom margin to match Figma */
    }

    .footer-logo {
        bottom: 2.01vw; /* 29px / 1440px (344 - 32 - 29 - text height) */
        left: 1.81vw; /* 26px / 1440px - same as card left padding */
    }

    .footer-logo img {
        width: 8.54vw; /* 123px / 1440px */
        height: 2.22vw; /* 32px / 1440px */
    }

    .social-links {
        bottom: 4.03vw; /* 58px / 1440px (344 - 286) */
        right: 1.81vw; /* 26px / 1440px */
        gap: 1.39vw; /* 20px / 1440px */
    }

    .social-link {
        width: 2.43vw; /* 35px / 1440px */
        height: 2.43vw; /* 35px / 1440px */
        border-radius: 0.69vw; /* 10px / 1440px */
    }

    .social-link img {
        width: 2.01vw; /* 29px / 1440px */
        height: 2.01vw; /* 29px / 1440px */
    }

    .footer-info-box {
        flex: 0 0 30.35vw; /* 437px / 1440px - fixed width */
        min-height: auto;

    }

    .footer-info-box:first-of-type {
        min-height: 14.51vw; /* 209px / 1440px */
    }

    .footer-info-box:last-of-type {
        min-height: 7.29vw; /* 105px / 1440px */
    }

    .footer-text {
        font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 1.04vw; /* 15px / 1440px - from Figma */
        font-weight: 400; /* from Figma, not 500 */
        font-style: normal;
        line-height: 1.4em; /* from Figma */
        letter-spacing: -0.02em;
        vertical-align: top;
        padding: 1.81vw; /* 26px / 1440px */
        
    }
}

/* Desktop large screens */
@media (min-width: 1441px) {
    .arrow-left {
        left: calc((100% - 28.13vw) / 2 - 5.56vw); /* 405px, 80px / 1440px */
    }

    .arrow-right {
        right: calc((100% - 28.13vw) / 2 - 5.56vw); /* 405px, 80px / 1440px */
    }
}

/* Small mobile adjustments */
@media (max-width: 374px) {
    body {
        padding: 0 5.33%; /* 20px / 375px */
    }

    .header {
        padding: calc(env(safe-area-inset-top) + 2.93vw) 0 0;
    }

    .hero-content {
        padding-top: 13.87vw;
    }

    .arrow-left {
        left: 1.33vw; /* 5px / 375px */
    }

    .arrow-right {
        right: 1.33vw; /* 5px / 375px */
    }

    .footer {
        margin-left: calc(-5.33% - 0.1vw);
        margin-right: calc(-5.33% - 0.1vw);
        width: calc(100% + 10.66% + 0.2vw);
        padding: 7.47vw calc(5.33% + 4vw) 8vw;
    }
}