@font-face {
    font-family: BentonSansLt;
    font-style: normal;
    font-display: swap;
    src: url(https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansLt.woff) format("woff");
}

@font-face {
    font-family: BentonSans;
    font-style: normal;
    font-display: swap;
    src: url(https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSans.woff) format("woff");
}

@font-face {
    font-family: BentonSansMd;
    font-style: normal;
    font-display: swap;
    src: url(https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansMd.woff) format("woff");
}

@font-face {
    font-family: BentonSansBold;
    font-style: normal;
    font-display: swap;
    src: url(https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansBold.woff) format("woff");
}

@font-face {
    font-family: Guardian;
    font-style: normal;
    font-weight: 400;
    src: url(https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/guardianregular.woff) format("woff");
}

a:focus{
    outline: 1px dashed #53565a !important;
    outline-offset: -3px;
}

.sup, sup {
    top: 2px;
    font-size: .8em;
    line-height: 1;
    vertical-align: super;
}

.section-why-header sup{
    top: 5px;
    font-size: .9em;
}

.video-sec-outer-container h2 sup{
    top: 7px;
    font-size: .9em;
}

.apple-wallet-section h2 sup{
    top: 9px;
    font-size: 1em;
}

.apple-wallet-img-header sup{
    top: 6px;
    font-size: 1em;
}

.amex-app-header sup{
    top: 7px;
    font-size: .9em;
}

.tandc-header sup{
    top: 2px;
    font-size: 1em;
}

.hero-section-outer .richtext{
    text-align: center;
}

.hero-section-outer .container{
    max-width: 1439px;
    padding-left: 32px;
    padding-right: 32px;
}

h1.hero-header{
    color: #FFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px; /* 122.222% */
    padding-top: 19px;
    padding-bottom: 16px;
}

.hero-section-outer .pad-2-t {
    padding-top: 0px !important;
}

.hero-section-outer .pad-3-t{
    padding-top: 0px !important;
}

.hero-section-outer .pad-2-b{
    padding-bottom: 0px !important;
}

.hero-logo{
    padding-top: 72px;
}

.fero-desc{
    color: #FFF;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    padding-bottom: 55px;
    max-width: 729px;
    margin: 0 auto;
}

.hero-image-container{
    display: flex;
    justify-content: center;
    gap: 0px;
}

.hero-image-1, .hero-image-2, .hero-image-4, .hero-image-5{
    display: flex;
    align-items: center;
    /* width: 310px; */
    width: 18%;
}

.hero-image-3{
    width: 33%;
}

.hero-image-1 img, .hero-image-2 img, .hero-image-3 img, .hero-image-4 img, .hero-image-5 img{
    width: 100%;
}

.hero-image-1, .hero-image-4{
    margin-right: 24px;
}

.header2-section h2{
    padding-top: 54px;
    color: #00175A;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 38.4px */
    text-align: center;
}

.section2-why .pad-3-t{
    padding-top: 0px !important;
}

.section2-why{
    padding-top: 56px;
    padding-bottom: 72px;
}

.section2-why .container{
    max-width: 1439px;
    padding-left: 40px;
    padding-right: 40px;
}

.section2-why .pad-3-l, .section2-why .pad-3-r{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.section-why-outer img{
    width: 100%
}

.section2-why .col-md-3{
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.section-why-outer .section-why-header{
    color: #262626;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 28px */
    padding-top: 24px;
    padding-bottom: 16px;
}

.section-why-desc{
    color: #262626;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.video-sec-outer-container{
    background: #00175A;
    padding: 72px 40px;
}

.video-sec-outer-container .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
}

.video-sec-outer-container .col-md-6.margin-0-tb:nth-child(1){
    padding-left: 8px;
    padding-right: 0px;
} 

.video-sec-outer-container .pad-3-l{
    padding-left: 0px !important;
}

.video-sec-outer-container .pad-3-r{
    padding-right: 0px !important;
} 

.video-sec-outer-container .row .container{
    max-width: none;
    padding-left: 0px;
    padding-right: 0px;
}

.video-sec-outer-container video{
    cursor: pointer;
}

.video-sec-outer-container .row .container img{
    width: 100%;
}

.video-sec-outer-container h2{
    max-width: 533px;
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 33.6px */
    padding-bottom: 24px;
    padding-left: 37px;
    padding-top: 10px;
}

p.membership-desc{
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    max-width: 533px;
    padding-left: 37px;
}

.video-sec-outer-container .col-md-6:nth-child(2){
    padding-left: 30px;
    display: flex;
    align-items: center;
}

.apple-wallet-section{
    background: #EDF7FF;
    padding: 72px 40px;
    padding-bottom: 40px;
}

.apple-wallet-section .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
}

.apple-wallet-section h2{
    color: var(--text-on-neutral_dim-brand_alt, #00175A);
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 33.6px */
    padding-bottom: 8px;
}

.apple-wallet-section p{
    color: #262626;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.apple-wallet-img-container{
    background: #EDF7FF;
    padding-bottom: 72px;
}

.apple-wallet-img-container .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
}

.apple-wallet-img-container img{
    width: 100%;
}

.apple-wallet-img-container .col-md-4{
    padding-left: 12px;
    padding-right: 12px;
}

.desktop-only{
    display: block;
}

.mob-only{
    display: none;
}

.apple-wallet-img-container img{
    padding-bottom: 16px;
}

.apple-wallet-img-header{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 11px;
    color: #00175A;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}

.apple-wallet-img-desc{
    padding-left: 16px;
    padding-right: 25px;
    color: #262626;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.apple-wallet-img-container-inner{
    border-radius: 0 0 6.903px 6.903px;
    background: #FFF;
    padding-bottom: 50px;
    height: 480px !important;
}

.amex-app-outer-container{
    background: #F5F5F5;
}

.amex-app-outer-container .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 40px 50px 67px 50px;
}

.amex-app-outer-container .container .row{
    border-radius: 24px;
    background: #006FCF;  
    padding: 40px 62px !important;
    display: flex;  
}

.amex-app-container-inner{
    display: flex;
    gap:64px;
}

.amex-app-container-inner-right{
    padding: 20px 0px;;
}

.amex-app-header{
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 31.2px */
    padding-top: 24px;
    padding-bottom: 32px;
}

.amex-app-container-inner-right a{
    display: flex;
    height: 48px;
    width: 180px;
    height: 48px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 4px;
    background: #00175A;
    text-decoration: none;
    font-weight: 500;
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.amex-app-favorite-container .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 72px 26px;
    padding-bottom: 50px;
}

.amex-app-favorite-container h2{
    color: #00175A;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 33.6px */
    padding-bottom: 40px;
}

.amex-app-favorite-container .pad-2-t{
    padding-top: 0px !important;
}

.apple-payfavorite-inner-container{
    display: flex;
    gap: 54px;
    justify-content: center;
    padding-bottom: 90px;
}

.apple-payfavorite-inner-container-left, .apple-payfavorite-inner-container-right{
    max-width: 367px;
    text-align: center;
}

.apple-payfavorite-inner-container img{
    padding-bottom: 24px;
}

.amex-app-favorite-container p.visit-text{
    color: #262626;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 31.2px */
    text-transform: inherit;
}

.amex-app-favorite-container .visit-text a{
    color: #00559E;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.tandc-container{
    background: #F5F5F5;
    margin-bottom: 72px;
}

.tandc-container .container{
    max-width: 1439px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 16px 26px;
}

.tandc-inner-container-2{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #BDBDBD;
    margin-bottom: 16px;
}

.tandc-inner-container-left{
    border-right: 1px solid #BDBDBD;
    padding-right: 25px;
}

.tandc-inner-container-2 a{
    padding-right: 20px;
    color: #006FCF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.tandc-inner-container-right{
    padding-left: 25px;
}

.tandc-header{
    color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
}

.tandc-desc{
    color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.1px;
    padding-bottom: 20px;
}

.tandc-desc a, .tandc-desc2 a, .tandc-desc3 a{
    color: #0066BE;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.1px;
    /* text-decoration: none; */
}

.tandc-desc2{
    color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.1px;
}

.tandc-desc3{
    color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.1px;
}

.tandc-inner-container{
    padding-left: 32px;
    padding-right: 32px;
}

.section-why-outer a img{
    width: 16px;
    height: 16px;
    display: inline-block;
}

.section-why-outer a{
    display: flex;
    height: 44px;
    width: 210px;
    min-height: 44px;
    max-height: 44px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #B5D7F4;
    margin-top: 30px;
    color: #006FCF;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration: none;
}

.amex-app-container-inner-left img{
 border-radius:12px;
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    .desktop-only{
        display: none !important;
    }
    .section2-why .col-md-3{
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 45px !important;
    }

    .apple-wallet-img-container img.mob-only{
        display: block !important;
    }

    .amex-app-container-inner{
        gap: 25px;
    }

    .amex-app-container-inner-left{
        width: 35%;
    }

    .amex-app-container-inner-right{
        width: 65%;
    }

    /* .apple-wallet-img-container-inner{
        height: 460px !important;
    } */
}

@media screen and (min-width: 768px) and (max-width: 900px){
    .apple-wallet-img-container-inner{
        height: 420px !important;
    }
}

@media screen and (min-width: 901px) and (max-width: 1024px){
    .apple-wallet-img-container-inner{
        height: 490px !important;
    }
}

@media screen and (max-width: 767px) {

    .hero-image-1, .hero-image-2, .hero-image-4, .hero-image-5{
        display: none;
    }

    .desktop-only{
        display: none;
    }

    .mob-only{
        display: block;
    }

    .header2-section h2{
        padding-top: 35px;
    }

    .section2-why{
        padding-top: 38px;
        padding-bottom: 20px;
    }

    .section2-why .container{
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-why-desc{
        padding-bottom: 24px;
    }

    .video-sec-outer-container{
        padding: 40px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .video-sec-outer-container .container{
        padding-left: 0px;
        padding-right: 0px;
    }

    .video-sec-outer-container .row .container img{
        padding-bottom: 32px;
    }

    .video-sec-outer-container h2{
        text-align: center;
        padding-bottom: 32px;
        padding-left: 0px;
    }

    .video-sec-outer-container .col-md-6:nth-child(2){
        padding-left: 0px;
    }

    p.membership-desc{
        text-align: center;
        padding-left: 0px;
    }

    .apple-wallet-img-desc{
        padding-right: 40px;
    }

    .apple-wallet-img-container-inner{
        padding-bottom: 30px;
    }

    .apple-wallet-img-container .col-md-4{
        margin-bottom: 24px !important;
    }

    .apple-wallet-img-container{
        padding-bottom: 48px;
    }

    .amex-app-outer-container .container{
        padding: 0px;
    }

    .amex-app-outer-container .container .row{
        border-radius: 0px;
        padding: 64px 32px !important;
    }

    .amex-app-container-inner{
        flex-direction: column;
        gap: 0px;
    }

    .amex-app-container-inner-left img{
        display: none;
    }

    .amex-app-container-inner-right{
        text-align: center;
    }

    .amex-app-container-inner-right a{
        margin: auto;
    }

    .amex-app-container-inner-right{
        padding-bottom: 0px;
    }

    .amex-app-favorite-container .container{
        padding: 40px 16px;
        padding-bottom: 24px;
    }

    .apple-payfavorite-inner-container{
        flex-direction: column;
        padding-bottom: 40px;
    }

    .amex-app-favorite-container p.visit-text{
        padding: 0px 20px;
    }

    .tandc-container .container{
        padding: 16px 32px;
        padding-bottom: 0px;
    }

    .tandc-inner-container{
        padding: 0px;
    }

    .section-why-desc-two{
        padding-bottom: 10px;;
        text-align: left;
    }

    .section-why-outer a{
        margin-bottom: 45px;
        margin-top: 0px;
        margin-left: 20px;
    }

    .hero-image-3{
        width: 80%;
    }

    .fero-desc{
        padding-bottom: 36px;
    }

    .section-why-outer img{
        width: 88%;
    }

    .section-why-outer{
        text-align: center;
    }

    .section-why-outer .section-why-header{
        text-align: left;
    }

    .section-why-desc{
        text-align: left;
        padding-left: 20px;
    }

    .section-why-outer .section-why-header{
        padding-left: 20px;
    }

}



.video-wrapper {
      max-width: 640px;
      margin: 40px auto;
      text-align: center;
    }

    .clickable-image {
      width: 100%;
      height: auto;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Hidden until the image is clicked */
    .hidden-video {
      display: none;
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }