img[src=""] {
    display: none;
}

.bg-highlight {
    background-color: #F3F7F8;
}

.gap-0 {
    gap: 0;
}

.awards-banner {
    position: relative;
}

.awards-banner .elg-right {
    top: 0;
    bottom: 0;
    position: absolute;
    display: block;
    right: 0;
    height: 100%;
    z-index: 1;
    max-width: 50%;
}

.banner-wpr {
    background-image: url('/credit-cards/_assets-custom/images/banner-awards-page.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.banner-text {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    z-index: 2;
}

.banner-desc {
    font-weight: 500;
}

.rbc-display-1 {
    font-family: "RBCDisplay";
    font-size: 72px;
    font-weight: 500;
    line-height: 80px;
    letter-spacing: -2px;
}

.card-tools-grid-item {
    display: flex;
    height: 100%;
    flex-grow: 1;
    padding: 30px 20px 15px 20px !important;
}

.card-tools-grid-item .btn {
    max-width: 50%;
}

.card-tool-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.tool-style-1 {
    max-width: 150px;
    max-height: 120px;
    align-self: flex-end;
    position: absolute;
}

.tool-style-1.help {
    right: 45px;
    bottom: 0;
}

.tool-style-1.compare {
    right: 0;
    bottom: 0;
}

.tool-style-1.cashback {
    right: 0;
    bottom: 0;
}

.tool-style-1.reward {
    right: 15px;
    bottom: 0;
}

@media screen and (max-width: 640px) {
    .banner-wpr {
        background-image: url('/credit-cards/_assets-custom/images/banner-awards-page-m.png');
    }

    .banner-desc {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }

    .rbc-display-1 {
        font-size: 28px;
        font-weight: 500;
        line-height: 35px;
        letter-spacing: unset;
    }

    .awards-banner .energy-lines {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 1;
    }

    .card-tool-content {
        width: 100%;
    }

    .tool-style-1 {
        max-width: 40%;
    }

    .tool-style-1.help {
        right: 15px;
    }

    .tool-style-1.reward {
        right: 5px;
    }

    .card-tools-grid-item .btn {
        max-width: 55%;
    }
}

/* custom nav tabs */
.tabs .tab-nav {
    justify-content: center;
    gap: 16px;
}

.tabs .tab-nav li {
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background-color: transparent !important;
    white-space: nowrap;
}

.tabs .tab-nav li.active a:after {
    content: none;
}

@media screen and (max-width: 640px) {
    .tabs .tab-nav {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 15px;
    }

    .tabs .tab-nav li.active {
        border-left: unset;
        -webkit-box-shadow: unset;
        box-shadow: unset;
    }
}

.category-btn {
    padding: 6px 16px !important;
    color: #006AC3;
    border-radius: 20px;
    border: 0.5px solid #B3B3B3;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex !important;
    align-items: center;
}

.category-btn.active {
    border: 1px solid #006AC3;
    background-color: #006AC3;
    color: #FFF !important;
}

.category-btn:before {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: text-top;
    width: 24px;
    height: 16px;
}

.category-btn.travel:before {
    background-image: url(/credit-cards/transformer/img/all-credit-cards/cat-icon-travel.svg);
}

.category-btn.rewards:before {
    background-image: url(/credit-cards/transformer/img/all-credit-cards/cat-icon-rewards.svg);
}

.category-btn.student:before {
    background-image: url(/credit-cards/transformer/img/all-credit-cards/cat-icon-student.svg);
}

.category-btn.lowinterest:before {
    background-image: url(/credit-cards/transformer/img/all-credit-cards/cat-icon-lowinterest.svg);
}

.category-btn.travel.active:before,
.category-btn.rewards.active:before,
.category-btn.student.active:before,
.category-btn.lowinterest.active:before {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(255deg) brightness(103%) contrast(101%);
}

/* card info box */
.card-info-container {
    display: flex;
    gap: 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
    border-bottom: 1px solid #B3B3B3;
}

.card-info-container:last-child {
    border-bottom: none;
}

.card-details-container {
    display: flex;
    gap: 30px;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 16px;
    align-items: flex-start;
}

.card-name {
    font-family: RBCDisplay;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
}

.card-img {
    max-width: min(370px, 25vw);
    object-fit: contain;
}

.card-details-rates-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
    justify-content: space-between;
}

.card-details-rate-label {
    font-size: 18px;
    font-weight: 400;
}

.card-details-rate-value {
    font-weight: 300;
}

.card-awards-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.card-awards-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 225px;
    flex: 1;
}

.card-awards-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.card-awards-images img {
    width: auto;
    height: 107px;
}

.card-awards-container a {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: black !important;
}

@media screen and (max-width: 640px) {
    .card-info-container {
        padding: 32px 0;
    }

    .card-name {
        font-size: 20px;
        line-height: 25px;
    }

    .card-img {
        max-width: 345px;
        height: 175px;
    }

    .card-details-container {
        flex-direction: column;
        gap: 32px;
        align-items: center;
        padding-bottom: 0;
    }

    .card-img {
        max-width: unset;
        width: 345px;
        height: fit-content;
    }

    .card-details-rates-container {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .card-awards-item {
        max-width: 175px;
        flex: unset;
    }

    .card-awards-item.large {
        width: 100%;
        max-width: 100%;
    }

    .tabs .tab-nav li a {
        padding-bottom: 6px !important;
    }

    .custom-mob-pad-t-large {
        padding-top: 64px !important;
    }
}