.nav-bar .nav-inner {
    overflow: hidden;
    position: relative;
}

.nav-card-img {
    position: absolute;
    width: 200px;
    top: 35px;
}

.banner {
    background: url(/credit-cards/transformer/img/cards/top-banner-v2.svg) 100% 100% / 58.5rem auto no-repeat, linear-gradient(99.54deg, #1a1a1a 15.62%, #424242 68.51%);
    background-color: #1a1a1a;
}

.banner-wpr {
    gap: 30px !important;
}

.banner .h2 {
    font-size: 32px !important;
    line-height: 38px !important;
}

.banner .btn.primary {
    padding: 24px 32px !important;
    border: none !important;
}

.banner .banner-card-img-container {
    position: relative;
    height: fit-content;
    align-self: center;
}

.banner .banner-card-img-container::after {
    content: "";
    height: 65%;
    width: 50%;
    top: -20%;
    right: -15%;
    background-image: url(/credit-cards/transformer/img/awards/best-overall-creditcardgenius-2026.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 100%;
    position: absolute;
    z-index: 10;
}

.bg-pale-blue {
    background-color: #3b9fd50d;
}

.border-r {
    border-right: 1px solid #eaeaea;
}

.large-number {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
}

#card-highlights-img {
    background-image: url(/credit-cards/transformer/img/cards/surfers-on-beach.webp);
    background-size: cover;
    background-position: 20% 40%;
    min-height: 250px;
}

#benefits h2 {
    font-size: 32px;
    line-height: 32px;
}

.benefits-icon {
    width: 96px;
    height: 96px;
}

#brand-offers .block-wpr.rounded-corners {
    border-radius: 16px !important;
}

#brand-offers .block-inner {
    padding: 40px 50px !important;
}

#apply-now {
    background-color: #006AC3;
    background-image: url(/credit-cards/transformer/img/cards/apply-banner.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: auto;
}

@media (max-width: 639px) {
    .banner {
        background: url(/credit-cards/transformer/img/cards/top-banner-v2.svg) 100% 0 / 43.5rem auto no-repeat, linear-gradient(99.54deg, #1a1a1a 15.62%, #424242 68.51%);
    }

    .banner .h2 {
        font-size: 28px !important;
    }

    .banner .banner-card-img-container {
        margin-top: 100px;
        max-width: 300px;
        align-self: flex-start;
    }

    .border-r {
        border-right: none;
    }

    .large-number {
        font-size: 18px;
        line-height: 27px;
    }

    #benefits h2 {
        font-size: 28px;
        line-height: 28px;
    }

    #brand-offers h2 {
        font-size: 28px;
        line-height: 30px;
    }

    #apply-now {
        background-size: auto 100%;
    }

    #apply-now .eh {
        min-height: 0 !important;
    }

    #apply-now img {
        max-width: 240px !important;
    }

    .mob-flex-reverse {
        display: flex;
        flex-direction: column-reverse;
        align-items: start;
    }
}