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

.bg-light-blue {
    background-color: #F3F7F8 !important;
}

.bg-gray {
    background-color: #FAFAFA !important;
}

.section-inner {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

.banner-desc {
    /* Inter is the font family mentioned in figma, but when setting it doesn't look like what showed in figma */
    /* font-family: Inter; */ 
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.banner-container {
    display: flex;
    flex-direction: row;
    max-width: 1110px;
}

.banner-text .btn.primary,
.nc-adv-container .nc-adv-content .btn.primary {
    padding: 20px 32px;
}

.banner-img {
    background-image: url("../images/banner-newcomer-firsts-en.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 100%;
    max-width: 484px;
    height: 404px;
}

.banner-img.fr {
    background-image: url("../images/banner-newcomer-firsts-fr.jpg");
}

.banner-img.tc {
    background-image: url("../images/banner-newcomer-firsts-tc.jpg");
}

.banner-img.sc {
    background-image: url("../images/banner-newcomer-firsts-sc.jpg");
}

.easy-steps-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.easy-steps-container .btn.tertiary {
    padding: 12px 32px;
    border: 2px solid #006AC3;
}

#steps .section-inner {
    padding: 96px 128px !important;
}

.start-bank-acc-container {
    border-radius: 8px;
    box-shadow: 0px 54px 118px 0px rgba(37, 37, 37, 0.04), 0px 12.062px 26.357px 0px rgba(37, 37, 37, 0.06), 0px 3.591px 7.847px 0px rgba(37, 37, 37, 0.08);
    overflow: hidden;
}

.start-bank-acc-header {
    background-color: #FFBA00;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.start-bank-acc-title {
    font-family: "RBCDisplay";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;

    margin-bottom: 24px;
}

.start-bank-acc-offer {
    border-radius: 7.273px;
    background-color: #FFF;
    padding: 3px 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.start-bank-acc-content {
    background-color: #FFF;
    padding: 64px 58px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.start-bank-acc-details {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.start-bank-acc-details-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.start-bank-acc-features {
    display: flex;
    gap: 32px;
}

.start-bank-acc-feature-item {
    display: flex;
    gap: 16px;
}

.start-bank-acc-feature-icon {
    width: 24px;
    height: 24px;
}

.add-card-container {
    margin-top: 128px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.add-card-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.add-card-content-details {
    padding-left: 18px;
    padding-right: 18px;
}

.add-card-content-details>a,
.more-ways-content-details>a {
    text-decoration: underline;
}

.add-card-content-container,
.more-ways-content-container {
    width: 100%;
    max-width: unset !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 11px;
}

.add-card-content,
.more-ways-content {
    display: flex;
    gap: 64px;
}

.add-card-content>div,
.more-ways-content>div {
    max-width: 370px;
}

.add-card-content .card-img-container {
    border-radius: 8px;
    background-color: #FFF;
    padding: 42px 45px 42px 46px;
}

.add-card-content .card-img {
    width: 279px;
    height: 177px;
}

.newcomer-offer-container {
    border-radius: 8px;
    border: 1px solid #FFB500;
    background: linear-gradient(180deg, rgba(255, 186, 0, 0.10) 0%, rgba(255, 186, 0, 0.00) 100%);
    padding: 22px 16px 16px 16px;
    position: relative;
}

.newcomer-offer-caption {
    position: absolute;
    left: 16px;
    top: -11px;
    border-radius: 4px;
    background: #FFBA00;
    padding: 3px 10px;
    color: #252525;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    text-transform: uppercase;
}

.newcomer-offer-content {
    color: var(--text-foregrounds-text-default, #1F1F1F);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.newcomer-offer-title {
    margin-bottom: 8px;
}

.add-card-feature,
.more-ways-feature {
    display: flex;
    gap: 16px;
}

.add-card-feature-icon,
.more-ways-feature-icon {
    width: 32px;
    height: 32px;
}

.add-card-feature-content,
.more-ways-feature-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-card-feature-item,
.more-ways-feature-item {
    display: flex;
    gap: 16px;
}

.add-card-feature-item.flex-align-center ,
.more-ways-feature-item.flex-align-center {
    align-items: center;
}

div#savings {
    margin-bottom: 32px;
}

.more-ways-container {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.rbc-firsts-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 96px;
    padding-bottom: 0; /* the padding space is used up by the carousel for desktop layout */
}

.rbc-firsts-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    align-self: center;
}

.rbc-firsts-header .carousel-control-container {
    min-height: 40px;
}

.rbc-firsts-header .carousel-control-container .carousel-control-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.rbc-firsts-header .carousel-button-prev img {
    rotate: 180deg;
}

.rbc-firsts-container .carousel-item-img {
    width: 450px;
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.rbc-firsts-container .carousel-item-img.slide-1 {
    background-image: url(../images/carousel-img-1.png);
}

.rbc-firsts-container .carousel-item-img.slide-2 {
    background-image: url(../images/carousel-img-2.png);
}

.rbc-firsts-container .carousel-item-img.slide-3 {
    background-image: url(../images/carousel-img-3.png);
}

/* referencing https://www.rbcroyalbank.com/doordash/, since the image cannot really see the design in figma */
.rbc-firsts-container .carousel-item-img.slide-4 {
    background-size: 65%;
    background-color: #F3F4F5;
    background-image: url(../images/carousel-img-4.png);
}

.rbc-firsts-container .carousel-item-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
}

.nc-adv-container {
    display: flex;
    justify-content: center;
    gap: 0 64px;
}

.nc-adv-container .nc-adv-img {
    width: 395px;
    height: auto;
}

.nc-adv-container .nc-adv-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.how-you-want-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.how-you-want-title {
    max-width: 289px;
}

.how-you-want-card {
    width: 225px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.how-you-want-content {
    padding: 24px;
}

.how-you-want-bg {
    background-color: #F3F7F8;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 150px;
}

.how-you-want-bg.img-1 {
    background-image: url(../images/want-img-1.svg);
}

.how-you-want-bg.img-2 {
    background-image: url(../images/want-img-2.svg);
}

.how-you-want-bg.img-3 {
    background-image: url(../images/want-img-3.svg);
}

.need-help-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.need-help-container img {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    margin-right: 9px;
}

.need-help-title {
    max-width: 195px;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.need-help-container .book-appointment {
    max-width: 264px;
}

.need-help-container .need-help-options {
    display: flex;
    gap: 0 64px;
}

.need-help-container p>a {
    font-weight: 400;
}

p.strong {
    font-weight: 400;
}

p.text-sm {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

p.text-lg-light {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

p.text-xs {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

p.text-disclaimer {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

p.big-numbers-xs {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.gap-64 {
    gap: 64px;
}

a.standalone-link.after {
    padding-left: 0;
}

a.standalone-link.after:before {
    content: none;
}

a.standalone-link.after:after {
    content: url(/dvl/v1.0/assets/images/ui/ui-chevron-right-blue.svg);
    display: inline-block;
    width: 6px;
    height: 10px;
    line-height: 0;
    margin-left: 4px;
}

.divider-h {
    height: 1px;
    width: 100%;
    background-color: #E0E0E0;
}

.divider-h-thick {
    height: 3px;
    width: 100%;
    background-color: #E0E0E0;
}

.divider-v {
    width: 1px;
    background-color: #E0E0E0;
}

.pad-tb-96 {
    padding-top: 96px;
    padding-bottom: 96px;
}

.mar-tb-96 {
    margin-top: 96px;
    margin-bottom: 96px;
}

.warning {
    background-color: yellow;
}

/* overriding for the carousel */
.vantage-carousel {
    padding-bottom: 175px !important; /* 64px + 15px + 96px */
}

.carousel-progress__bar-wrapper {
    width: auto !important;
    margin-top: -111px; /* 15px + 96px */
    padding-top: 0 !important;
    padding-left: 0 !important;
}

.vantage-carousel-item {
    width: unset !important;
    max-width: 450px;
    height: unset !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-shadow: 0px 54px 118px 0px rgba(37, 37, 37, 0.04), 0px 12.062px 26.357px 0px rgba(37, 37, 37, 0.06), 0px 3.591px 7.847px 0px rgba(37, 37, 37, 0.08);
}

/* overriding trigger icon */
.tooltip-trigger>.trigger-icon {
    margin-left: 4px;
}

.tooltip-trigger>.trigger-icon:before {
    margin-top: -2px;
    width: 15px;
    height: 15px;
}

#divider-section .section-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#disclaimer .section-inner {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

@media (min-width: 639px) and (max-width:1200px) {
    /* section:first-of-type .section-inner {
        padding-top:calc(15px + (30 - 15) * ((100vw - 639px)/ (1200 - 639)))
    } */

    .start-bank-acc-content {
        padding: 64px calc(32px + (58 - 32) * ((100vw - 639px)/ (1200 - 639)));
    }
    

    .start-bank-acc-details {
        flex-wrap: wrap;
    }

    .start-bank-acc-details-item {
        flex: 1 300px;
    }
}

@media screen and (max-width: 639px) {
    .section-inner,
    #steps .section-inner {
        padding: 32px 16px !important;
    }

    .mob-section-inner {
        /* from figma, left and right padding is 16+16px */
        padding: 0 16px !important;
    }

    .banner-container {
        flex-direction: column;
    }

    .banner-img {
        background-image: url("../images/banner-newcomer-firsts-m-en.jpg");
        max-width: unset;
        height: 250px;
        background-size: cover;
    }

    .banner-img.fr {
        background-image: url("../images/banner-newcomer-firsts-m-fr.jpg");
    }

    .banner-img.tc {
        background-image: url("../images/banner-newcomer-firsts-m-tc.jpg");
    }

    .banner-img.sc {
        background-image: url("../images/banner-newcomer-firsts-m-sc.jpg");
    }

    .banner-text {
        padding: 0 8px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .easy-steps-container {
        flex-direction: column;
    }

    .mob-gap-24 {
        gap: 24px;
    }

    .start-bank-acc-header {
        padding: 32px 16px;
    }

    .start-bank-acc-details {
        flex-direction: column;
        gap: 32px;
    }

    .start-bank-acc-details-item {
        flex: 0;
    }

    .start-bank-acc-content {
        padding: 40px 32px 56px;
        gap: 40px;
    }

    .start-bank-acc-features {
        flex-direction: column;
    }

    .add-card-container {
        margin-top: 96px;
        gap: 24px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .add-card-header {
        gap: 24px;
    }

    .add-card-content {
        flex-direction: column;
        gap: 32px;
        padding: 0 8px;
    }

    .add-card-content .card-img-container {
        padding: 36px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-card-content-details {
        padding-left: 4.5px;
        padding-right: 4.5px;
        margin-top: 32px;
        margin-bottom: 64px;
    }

    div#savings {
        margin-bottom: 24px;
    }

    .more-ways-container {
        gap: 24px;
        margin-bottom: 32px;
        padding: 0 8px;
    }

    .add-card-content-container,
    .more-ways-content-container {
        padding-top: 0px;
    }

    .more-ways-content {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .more-ways-content-img {
        max-width: 313px;
    }

    .rbc-firsts-container {
        padding-top: 60px;
        padding-bottom: 0; /* the padding space is used up by the carousel for mobile layout */
    }

    .rbc-firsts-header .carousel-control-container {
        min-height: 0px;
    }

    .rbc-firsts-container .carousel-item-img {
        width: 290px;
        height: 161.1px;
    }

    .rbc-firsts-header .carousel-control-container .carousel-control-buttons {
        margin-right: 16px;
    }

    .nc-adv-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .nc-adv-container .nc-adv-img {
        width: 233px;
    }

    .how-you-want-container {
        flex-direction: column;
        gap: 25px;
    }

    .how-you-want-title {
        margin-top: 32px !important;
    }

    .how-you-want-card {
        width: 325px;
    }

    .how-you-want-bg.img-1 {
        background-position: center -30%;
        background-size: 75%;
    }

    .how-you-want-bg.img-2 {
        background-image: url(../images/want-img-2-m.svg);
    }

    .how-you-want-bg.img-3 {
        background-image: url(../images/want-img-3-m.svg);
    }

    .need-help-container {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 32px 0;
    }

    .need-help-title {
        max-width: unset;
        text-align: center;
    }

    .need-help-container .need-help-options {
        flex-direction: column;
        gap: 24px;
    }

    /* overriding for the carousel */
    .vantage-carousel {
        padding-left: 0 !important;
        padding-bottom: 147px !important; /* 48px + 15px + 64px */
    }

    .vantage-carousel-item {
        max-width: 290px !important;
    }

    .carousel-progress__bar-wrapper {
        /* margin-bottom: 16px; */
        max-width: 90%;
    }
}