@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: 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");
}

html {
    overflow-x: hidden;
}

a.link-underlined:hover {
    color: #fff;
    background: #0069c4;
}

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

.logo-section-container{
    padding: 18px 0 16px 0;
}

.logo-section-container img{
    width: 242px;
}

.hero-section-container{
    background-color: #0069c4;
    padding: 78px 0;
    padding-bottom: 70px;
}

.hero-text-container{
    max-width: 702px;
    color: #FFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    margin: 0 auto;
}

.hero-text-container .main-text{
    color: #FFF;
    text-align: center;
    /* Benton Sans/Heading/Headline Large Bold */
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 36.4px */
    /* padding-top: 30px; */
}

.hero-text-container .main-description{
    color: #FFF;
    text-align: center;
    /* Benton Sans/Heading/Headline Large Bold */
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 16px 0px 35px 0px;
}

.sec-description{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    padding-bottom: 16px;
}

.hero-section-container .button a{
    width: 156px;
    height: 48px;
    border-radius: 8px;
    margin: 0 auto;
    font-size: 16px;
    font-style: normal;
    font-weight: 510;
    padding-left: 0px;
    padding-right: 0px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #0066BE;
}

.hero-section-container .button a i{
    display: none;
}

.section-main{
    background: var(--BG-GRADIENT, linear-gradient(160deg, #00175A 7.63%, rgba(0, 111, 207, 0.89) 47.17%, #00175A 89.87%));
    padding: 80px 40px 80px 40px;
    text-align: center;
}

.event-details-container{
    max-width: 1090px;
    margin: 0 auto;
}

.section-main .container{
    max-width: 1280px;
}

.elevated-exp-container .container{
    max-width: none;
}

.event-details-container .event-details-text{
    color: #FFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 23.4px */
    letter-spacing: 2.34px;
}

.event-details-text span{
    padding-left:10px;
    padding-right: 10px;
    display: inline;
}

.event-details-container h1{
    color: #FFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
    padding: 24px 0px;
    text-transform: uppercase;
}

.event-details-desc{
    color: #FFF;
    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 */
    padding: 0px 45px;
    max-width: 857px;
    margin: auto;
}

.event-details-desc sup {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.elevated-exp-desc sup{
    font-size: 10px;
    top: 1px;
    position: relative;
}

.elevated-exp-text-sec-desc sup{
    top: 3px;
    font-size: 12px;
    line-height: 1;
}

.fan-exp-text-desc sup{
    top: 2px;
    font-size: 12px;
    line-height: 1;
}

.elevated-exp-text-desc-header sup{
    font-size: 12px;
    position: relative;
    top: 2px;
}

.fan-exp-text-desc.fan-exp-text-desc-last{
    top: 1px;
    font-size: 12px;
    line-height: 1;
}

.elevated-exp-container{
    padding: 80px 0px 58px;
}

.elevated-exp-container.elevated-exp-container-2{
    padding-top: 40px;
    padding-bottom: 48px;
}

.elevated-exp-text-container{
    text-align: left;
}

.elevated-exp-desc{
    padding-top: 16px;
    text-align: left;
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    /* padding-right: 50px; */
    max-width: 425px !important;
}

.elevated-exp-container img{
    width: 96%;
}

.elevated-exp-text-container{
    /* padding-left: 15px; */
    padding-top: 20px;
    /* Set your top border thickness and color */
    border-top: 2px solid #fff;
    
    /* Replace standard border-top with a repeating linear-gradient */
    background: linear-gradient(to right, #fff 57px, transparent 57px) no-repeat;
    background-size: 100% 2px; /* Adjust 4px to match your border thickness */
    
    /* Disable the default top border so the gradient takes over */
    border-top: none; 
}

.tandc-text-footer.tandc-text-footer1{
    padding-top: 80px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.card-name sup{
    font-size: 12px;
    top: 2px;
}

.tandc-text-desc sup{
    font-size: 12px;
    top: 4px;
}

.f1-journey h5 sup{
    font-size: 24px;
    top: 2px;
}

.f1-journey-desc sup{
    font-size: 16px;
    top: 4px;
}

.amex-benefits-list-header sup{
    font-size: 20px;
    top: 5px;
}

.amex-benefits-list-desc sup{
    font-size: 12px;
    top: 1px;
}

.terms_conditions sup{
    font-size: 12px;
    top: 2px;
}

.elevated-exp-text-header{
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 38.4px */
    padding-bottom: 20px;
}

.elevated-exp-text-desc{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    padding-bottom: 20px;
}

.elevated-exp-text-desc-header{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.elevated-exp-text-sec-desc{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 20px;
}

.elevated-exp-text-desc sup{
    font-size: 12px;
    position: relative;
    top: 0px;
}

.fan-exp-text-container h3 sup{
    font-size: 20px;
    position: relative;
    top: 0px;
}

.elevated-exp-text-desc-secondary sup{
    font-size: 10px;
    position: relative;
    top: 2px;
}

.elevated-exp-text-desc-secondary sup.sup-last-tag{
    font-size: 10px;
    position: relative;
    top: 0px;
}   

.elevated-exp-text-desc a{
    color: #FFF;
    /* Body/Body Small */
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
}

.elevated-exp-text-desc-secondary{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 20px;
}

.fan-exp-container-outer{
    max-width: 846px;
    margin: 0 auto;
    text-align: left;
}

.fan-exp-container-outer .fan-exp-text-container{
    /* Set your top border thickness and color */
    border-top: 2px solid #fff;
    
    /* Replace standard border-top with a repeating linear-gradient */
    background: linear-gradient(to right, #fff 57px, transparent 57px) no-repeat;
    background-size: 100% 2px; /* Adjust 4px to match your border thickness */
    
    /* Disable the default top border so the gradient takes over */
    border-top: none; 
}

.fan-exp-text-container h3{
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 38.4px */
}

.fan-exp-text-desc{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    padding-bottom: 20px;
}

.elevated-exp-text-desc-header{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.elevated-exp-text-desc-header a{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.fan-exp-desc{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-top: 16px;
    padding-bottom: 40px;
}

/* .fan-exp-container-outer-secondary sup{
    font-size: 12px;
    position: relative;
    top: 0px;
} */

.fan-exp-container-outer-secondary .fan-exp-text-desc-last{
    padding-bottom: 0px;
    padding-top: 20px;
    font-size: 12px;
}

.learn-more-btn a{
    margin-bottom: 0px !important;
}

.amex-benefits-container{
    border-radius: 12px;
    border: 1px solid #fff;
    padding: 48px;
    text-align: center;
    margin-top: 80px;
    max-width: 1200px;
    max-width: 1032px;
    margin: auto;
}

.amex-benefits-container h4{
    color: var(--text-on-brand-emphasis, #FFF);
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    padding-bottom: 16px;
}

.amex-benefits-desc{
    color: #EDF7FF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    padding-bottom: 56px;
}

.amex-benefits-list-container{
    display: grid;
    column-gap: 32px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
        max-width: 800px;
}

.amex-benefits-list-outer{
    max-width: 400px;
}

.amex-benefits-list-header{
    padding: 16px 0px;
    color: #fff;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
}

.amex-benefits-list-desc{
    color: #FBFBFB;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.amex-benefits-list-desc a{
    color: #FFF;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
}

.f1-journey{
    padding: 67px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #00175A;
    background-image: url('/content/dam/amex/en-ca/life-with-amex/learn/experience-f1/images/Journey_Pattern.png');
    background-repeat: no-repeat;
    background-position: center;
    /* Scales the image to cover the entire container */
    background-size: cover; 
    padding-top: 75px;
}

.f1-journey .container{
    max-width: 748px;
}

.f1-journey h5{
    color: #FFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    padding-bottom: 16px;
}

.f1-journey-desc{
    color: #EDF7FF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    padding-bottom: 32px;
}

.f1-journey .button{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f1-journey .button a{
    display: inline-block !important;
    padding-left: 20px;
    padding-right: 20px;
}

.f1-journey .button a i{
    display: none;
}

.card-section-container{
    text-align: center;
    padding: 120px 40px;
    background-color: #FFF;
    padding-bottom: 0px;
}

.card-section-container img{
    max-width: 463px;
    padding-bottom: 32px;
}

.card-section-container h6{
    color: #00175A;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
    padding-bottom: 16px;
}

.card-section-container p.card-desc{
    color: #333;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    padding-bottom: 32px;
}

.explore-cards{
    text-align: center;
    margin-bottom: 70px;
}

.explore-cards a{
    display: inline-block !important;
    width: 156px;
    padding-left: 10px;
    padding-right: 10px;
}

.mobile-only{
    display: none;
}

.learn-more-btn i{
    display: none;
}

.elevated-exp-text-container a.link-underlined:hover{
    background:none;
}

.button .btn a{
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.elevated-exp-container .col-md-6.margin-0-tb:nth-child(2){
    padding-left: 21px;
} 

.terms_conditions, .collapsible:hover:not(.expandable-link){
    background-color: #E0E0E0;
}

.terms_conditions .dls-gray-01-bg, .terms_conditions .dls-gray-01-bg-hvr:hover{
    background-color: #E0E0E0 !important;
    border: 0px !important;
}

.terms_conditions .collapsible{
    background-color: #E0E0E0;
    border: 0px;
    color: #262626;
    padding-top: 35px;
}

.collapsible-panel .border{
    border: 0px;
}

.terms_conditions a:hover{
    background: none;
}

.tandc-text-footer.tandc-text-footer2{
    padding-bottom: 80px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    /* color: #000; */
}

.terms_conditions .collapsible span:last-child{
    color: #262626;
    font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
}

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

.tandc-text.tandc-text-num{
    color:  #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 0px;
}

.tandc-text span.number{
    color:  #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 32px;
    display: inline-block;
    padding-right: 2px;
    padding-bottom: 0px;
}

.amex-benefits-list-desc a:hover{
    background-color: transparent;
}

.card-name{
    color:  #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 0px;
}

span.number.number-header{
    color:  #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 0px;
}

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

.tandc-text a, .tandc-text-desc a{
    color:  #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    text-decoration-line: underline;
    padding: 0px !important;
    margin: 0px !important;
}

.tandc-text a:hover{
    color:  #3D3D3D;
}

.tandc-text-desc a:hover{
    color:  #3D3D3D;
}

.tandc-text.tandc-text-secondary{
    padding-bottom: 16px;
}

.collapsible, .collapsible.icon{
    color: #262626;
    /* Benton Sans/Label/Label Default */
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    padding: 40px 0px 24px 0px;
}

.terms_conditions .collapsible-panel .stack-md-down{
    padding: 0px !important;
    margin: 0px !important;
}

.accordion-content .stack{
    padding: 0px;
    margin: 0px;
    padding-top: 20px;
}

.tandc-text-footer{
    color: var(--text-on-neutral-regular, #3D3D3D);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    letter-spacing: 0.1px;
    padding-bottom: 16px;
}

.amex-ribbon-img{
    width: 160px;
    margin: 0 auto;
    position: relative;
    top: 15px;
    z-index: 9;
}

.button .btn{
    border-radius: 8px;
}

.terms_conditions h3{
    border: 0px !important;
}

.hero-section-container sup{
    font-size: 12px;
    position: relative;
    top: 1px;
}

.event-details-container h1 sup{
    font-size: 16px;
    position: relative;
    top: -4px;
}

.main-ribbon-container{
    background-color: #006FCF;
    padding: 8px 0px;
}

.main-ribbon-container p{
    color: #FFF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    /* max-width: 1374px;
    margin: 0 auto; */
}

.main-ribbon-container p span{
    font-weight: 700;
}

.fan-exp-container-outer-secondary .button a{
    width: 237px;
    padding-left: 10px;
    padding-right: 10px;
}

.explore-cards a i{
    display: none;
}

@media (min-width: 350px) and (max-width: 768px){
    .card-section-container img{
        width: 298px;
    }
}


@media (min-width: 769px) and (max-width: 1023px){
    .elevated-exp-container{
        padding-bottom: 25px;
    }

    .elevated-exp-desc{
        padding-bottom: 45px;
    }

    
}




@media (max-width: 768px){

    .amex-benefits-list-outer, .amex-benefits-list-outer{
        margin: auto;
    }

    .fan-exp-container-outer .mobile-only{
        border-top: 2px solid #fff;
        background: linear-gradient(to right, #fff 57px, transparent 57px) no-repeat 16px 0;
        background-size: 100% 2px;
        border-top: none;
        padding-top: 48px;
    }

    .fan-exp-container-outer .container{
        padding: 0px;
    }

    .logo-section-container img{
        width: auto;
    }

    .elevated-exp-container .col-md-6.margin-0-tb:nth-child(2){
        padding-left: 20px;
        padding-right: 20px;
    } 

    .fan-exp-container-outer .col-md-12.margin-0-tb{
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .desktop-only{
        display: none !important;
    }

    .mobile-only{
        display: block !important;
    }

    .logo-section-container .mobile-only{
        text-align: center !important;
    }

    .logo-section-container{
        padding: 14px 0px;
    }

    .amex-benefits-list-container{
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 32px;
    }

    .hero-section-container{
        padding: 49px 0 46px;
    }

    .hero-section-container .container {
        padding: 0 !important;
    }

    .hero-text-container .main-text{
        padding-top: 14px;
        font-size: 24px;
    }

    .hero-text-container .main-description {
        padding: 16px 20px;
        padding-bottom: 8px;
    }

    .section-main{
        padding: 56px 0px 0px 0px;
    }

    .event-details-container .event-details-text{
        font-size: 16px;
        letter-spacing: 2.08px;
    }

    .event-details-container h1{
        padding-top: 16px;
        font-size: 28px;
        padding-bottom: 16px;
        padding: 16px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .event-details-desc{
        font-size: 22px;
        padding: 0px 16px;
    }

    .elevated-exp-container{
        padding-top: 52px;
        padding-bottom: 0px;
    }

    .elevated-exp-text-desc-secondary{
        padding-bottom: 20px;
    }

    .elevated-exp-text-desc-secondary2{
        padding-bottom: 45px;
    }

    .elevated-exp-text-desc-secondary.elevated-exp-text-desc-sec-2{
        padding-top: 28px;
    }

    .section-main > .container{
        padding: 0px;
    }

    .elevated-exp-container > .container{
        padding: 0px;
    }

    .elevated-exp-desc{
        padding-left: 16px;
        padding-right: 16px;
        max-width: none;
    }

    .elevated-exp-text-container{
        padding-top: 48px;
        background: none;
    }

    .elevated-exp-text-header{
        font-size: 28px;
    }

    /* .elevated-exp-text-desc{
        padding-bottom: 45px;
    } */


    .fan-exp-container-outer .container .col-md-12.margin-0-tb > div {
        display: flex;
        flex-direction: column;
    }

    .fan-exp-container-outer .container .col-md-12.margin-0-tb > div .parbase {
        order: 2;
    }

    .fan-exp-container-outer .container .col-md-12.margin-0-tb > div .image.parbase {
        order: 1;
    }

    .fan-exp-container-outer .container .col-md-12.margin-0-tb > div .richtext.parbase:first-child {
        order: 3;
    }

    .fan-exp-desc{
        padding-bottom: 48px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .fan-exp-text-container h3{
        font-size: 28px;
        padding-top: 0px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .elevated-exp-text-desc-2{
        padding-bottom: 20px;
    }

    .elevated-exp-text-desc-2.elevated-exp-text-desc-3{
        padding-bottom: 48px;
    }

    .elevated-exp-container.elevated-exp-container-2{
        padding-bottom: 0px;
    }

    .fan-exp-container-outer-secondary > .container{
        padding: 0px;
    }

    .fan-exp-container-outer-secondary .fan-exp-desc{
        padding-left: 16px;
        padding-right: 16px;
    }

    .fan-exp-container-outer-secondary .fan-exp-text-container h3{
        padding-left: 16px;
        padding-right: 16px;
    }

    .fan-exp-container-outer-secondary .fan-exp-text-desc{
        padding-left: 16px;
        padding-right: 18px;
        padding-bottom: 56px;
    }

    .fan-exp-container-outer-secondary .learn-more-btn{
        padding-left: 16px;
        padding-right: 16px;
    }

    .fan-exp-container-outer-secondary .fan-exp-text-desc-last{
        padding-top: 48px;
    }

    .amex-benefits-container{
        margin-top: 0px;
        margin-left: 16px;
        margin-right: 16px;
        padding: 40px 16px;
        margin-bottom: 56px;
    }

    .amex-benefits-container h4{
        font-size: 28px;
        padding-bottom: 8px;
    }

    .amex-benefits-desc{
        font-size: 16px;
        padding-bottom: 38px;
    }

    .amex-benefits-list-header{
        font-size: 18px;
        padding-top: 14px;
    }

    .f1-journey{
        padding: 56px 16px;
    }

    .f1-journey h5{
        font-size: 28px;
        padding: 0 16px 2px;
    }

    .terms_conditions .collapsible{
        padding-top: 32px;
    }

    .f1-journey .container{
        padding: 0 !important;
    }

    .f1-journey-desc{
        font-size: 16px;
        padding-bottom: 24px;
    }

    .f1-journey .button a{
        margin-bottom: 0px !important;
        max-width: none;
    }

    .card-section-container{
        padding: 60px 16px;
        padding-bottom: 0px;
    }

    .card-section-container h6{
        font-size: 32px;
    }

    .fan-exp-container-outer .mobile-only img{
        width: 100%;
    }

    .card-section-container img {
    padding-bottom: 0px;
}

.sec-description{
    padding-left: 20px;
    padding-right: 20px;
}

    .explore-cards{
        margin-bottom: 36px;
    }

    .fan-exp-text-desc{
        padding-bottom: 48px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
    }

    .fan-exp-image{
        border-top: 2px solid #fff;
        background: linear-gradient(to right, #fff 57px, transparent 57px) no-repeat 16px 0;
        background-size: 100% 2px;
        border-top: none;
        padding-top: 48px;
    }

    .elevated-exp-container.elevated-exp-container-2{
         border-top: 2px solid #fff;
        background: linear-gradient(to right, #fff 57px, transparent 57px) no-repeat 16px 0;
        background-size: 100% 2px;
        border-top: none;
        padding-top: 48px;
        /* margin-left: 16px; */
    }

    .fan-exp-container-outer .fan-exp-text-container{
        border: 0px;
        background: none;
    }

    .elevated-exp-container img{
        width: 100%;
    }

}

@media (min-width: 768px){
    .fan-exp-container-outer .col-md-12.margin-0-tb{
        padding: 0px;
    }

    .fan-exp-container-outer .container{
        padding: 0px 10px;
    }

    .fan-exp-image{
        margin-top: 20px;
    }

    .elevated-exp-container img{
        padding-left: 20px;
        width: 99%;
    }

    .elevated-exp-text-desc{
        padding-right: 20px;
    }

    .fan-exp-desc{
        padding-bottom: 42px;
    }

    .amex-benefits-container{
        margin-top: 80px;
    }

    .amex-benefits-list-container{
        column-gap: 32px;
    }

    .f1-journey .button a{
        width: 335px;
        max-width: none;
        text-align: center;
        display: flex !important;
    }

    .card-section-container img{
        padding-bottom: 0px;
    }

    .elevated-exp-desc{
        padding-left: 20px;
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .elevated-exp-container .col-md-6{
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1280px) {
     .main-ribbon-container .container{
        max-width: 1439px;
     }    
     
     .main-ribbon-container p{
        padding-left: 5px;
     }
}

@media (min-width: 1440px){
    .main-ribbon-container .container{
        max-width: 1425px;
     }   
}

@media (min-width: 767px) and (max-width: 1023px){
    .fan-exp-image{
        margin-top: 0px;
    }
}