@charset "UTF-8";

/* CSS Document */
/* fonts */
/* @font-face {
  font-family: BentonSans;
  font-weight: 400;
  font-display: swap;
  src: url(https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.29.1/package/dist/fonts/3be50273-0b2e-4aef-ae68-882eacd611f9-3.woff)
    format('woff');
} */
/* @font-face {
    font-family: "BentonSans-Cond-Md";
    src: url("https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot");
    src: url("https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot?") format("embedded-opentype"), url("https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-3.woff") format("woff"), url("https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-1.ttf") format("truetype"), url("https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-4.svg#web") format("svg");
    font-style: normal;
    font-weight: 900;
} */

/* BentonSans Font */
/* BENTONSANS LIGHT (100) */
@font-face {
  font-family: BentonSansLt;
  font-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');
}

/* BENTONSANS BOOK (300)  */
@font-face {
  font-family: BentonSansBook;
  font-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/BentonSansBook.woff')
    format('woff');
}

/* BENTONSANS (400)  */
@font-face {
  font-family: BentonSans;
  font-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');
}

/* BENTONSANS MD (500)  */
@font-face {
  font-family: BentonSansMd;
  font-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');
}

/* BENTONSANS BOLD (600)  */
@font-face {
  font-family: BentonSansBold;
  font-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: 'BentonSans-CondMd';
  src: local('Benton Sans Condensed Medium');
  src: url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot');
  src: url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot?')
      format('embedded-opentype'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-3.woff')
      format('woff'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-1.ttf')
      format('truetype'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-4.svg#web')
      format('svg');
  font-style: normal;
  font-weight: normal;
}
/* end fonts */

body
  > div.container-fluid.pad-0-lr
  > div
  > div
  > div.richtext.parbase.aem-GridColumn.aem-GridColumn--default--12 {
  /* display: none; */
}

#amex175 {
  z-index: 20;
  background-color: #00175a;
}

#amex175 .container {
  width: 100%;
  padding: 0;
}

#amex175 img {
  width: 320px;
  height: 150px;
  margin: 0 auto;
}

/* AMEX175 badge */
body
  > div.container-fluid.pad-0-lr
  > div
  > div
  > div.experiencefragment.aem-GridColumn.aem-GridColumn--default--12 {
  position: relative;
  z-index: 20;
}

body
  > div.container-fluid.pad-0-lr
  > div
  > div
  > div.experiencefragment.aem-GridColumn.aem-GridColumn--default--12
  > div
  > div
  > div
  > section
  > div
  > div.container
  > div
  > div
  > div
  > div
  > div
  > img {
  width: 160px;
  height: auto;
}

/* Page Styles */
.nowrap {
  white-space: nowrap;
}

.white-text {
  color: #ffffff;
}

.white-text a,
.white-text a:hover {
  color: #ffffff;
}

.content-grid .container {
  padding-left: 0;
  padding-right: 0;
}

.col-md-12 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.row {
  margin-left: 0px;
  margin-right: 0px;
}

/* Hero */
.coachella-hero {
  min-height: 463px;
}

.amex-coachella-logo {
  padding: 112px 0 44px;
}

.amex-coachella-logo img {
  max-width: 256px;
}

h1 {
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 0;
  color: #ffffff;
  text-align: center;
}

/* Countdown Timer */
#countdown {
  column-gap: 60px;
  column-count: 4;
  margin: 0 auto;
  max-width: 980px;
  padding: 20px 0 100px 0;
}

#countdown li {
  border: 8px solid #66a9e2;
  color: #66a9e2;
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: space-around;
  list-style: none;
  padding: 30px 0 20px;
  text-align: center;
}

#countdown li .count {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  display: inline-block;
  font-size: 64px;
  font-weight: 700;
}

#countdown li .label {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 30px;
}

/* On Site Perks */
#onSitePerksModule {

}

#onSitePerksModule > .container {
  max-width: 1280px;
  width: 100%;
  padding: 0;
}

#onSitePerksModule h2 {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  max-width: 890px;
  margin: 0 auto;
}

#individualPerksContainer {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  align-items: flex-start;
  padding: 10px 24px 100px;
}

.individualPerk {
  max-width: 31%;
  width: 100%;
  padding: 40px 0 0 0;
}

.individualPerk img {
  width: 100%;
  padding: 0 0 20px 0;
}

.individualPerk h3 {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
  padding: 0 0 6px 0;
}

.individualPerk p {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}

/* Offers */
.offers-img img {
  max-width: 520px;
  width: 100%;
}

/* Enjoy */
.content-section-2 .enjoy-star {
  position: absolute;
  right: 16px;
  top: 68px;
}

.content-section-2 .enjoy-star img {
  max-width: 68px;
}

#elevateExperienceAmex > div.container > div > div > div > div.richtext.parbase > div > p {
  max-width: 780px;
  margin: 0 auto;
}

/* Footer */
.amex-experiences {
  padding-top: 40px;
}

.amex-experiences img {
  max-width: 907px;
  width: 100%;
}

.amex-experiences-mobile img {
  max-width: 262px;
  width: 100%;
}

.cards-footer {
  padding-top: 100px;
}

.cards-footer .cards img {
  max-width: 700px;
  width: 100%;
}

@media screen and (min-width: 1280px) {
  .content-section-2 .text-module > .container,
  .content-section-4 .text-module > .container {
    float: right;
    max-width: 70%;
  }
}

@media screen and (max-width: 1279px) {
  .hide-1279 {
    display: none;
  }
}

@media screen and (max-width: 1239px) {
  .individualPerk {
    max-width: 40%;
  }
}

@media screen and (min-width: 1024px) {
  .content-section-4 .text-module {
    padding-top: 100px;
  }
}

@media screen and (max-width: 1023px) {
  .hide-1023,
  .content-section-2 .enjoy-star {
    display: none;
  }

  .content-section-1 {
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  #countdown {
    column-gap: 28px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .content-section-2 .text-module > .container,
  .content-section-4 .text-module > .container {
    float: right;
    max-width: 90%;
  }
}

@media screen and (min-width: 768px) {
  .btn-sm {
    max-width: fit-content;
  }

  #countdown {
    /* margin-bottom: 34px;
    margin-top: 20px; */
  }

  .amex-experiences-mobile,
  .mobile-img {
    display: none;
  }

  .content-section-2 .text-module {
    padding-top: 30px;
  }

  .content-section-3 .merch-img {
    position: relative;
    top: -50px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .button.pad-2-l {
    padding-left: 0 !important;
  }

  .button.pad-2-r {
    padding-right: 0 !important;
  }

  .button .margin-auto-l,
  .button .margin-auto-r {
    margin: 0 auto !important;
  }

  .center-text-on-mob {
    text-align: center !important;
  }

  .center-button-mobile a {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .heading-5,
  .heading-6 {
    font-size: 35px !important;
    line-height: 36px !important;
  }

  .mobile-img {
    padding-bottom: 30px;
  }

  .coachella-hero {
    height: 295px;
    min-height: 0 !important;
  }

  .coachella-hero .richtext {
    padding: 0 30px;
  }

  .coachella-hero .heading-6 {
    font-size: 30px !important;
    line-height: 30px !important;
  }

  .amex-coachella-logo {
    padding: 36px 0 14px;
  }

  /* Countdown Timer */
  #countdown {
    column-gap: 11px;
    column-count: 4;
    margin: 0 auto;
    max-width: 320px;
    padding-left: 0;
    padding: 20px 0 40px;
  }

  #countdown li {
    border: 5px solid #66a9e2;
    color: #66a9e2;
    display: flex;
    flex-direction: column;
    height: 70px;
    justify-content: space-around;
    list-style: none;
    padding: 0px;
    text-align: center;
  }

  #countdown li .count {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0 0 0;
  }

  #countdown li .label {
    font-size: 12px;
    text-transform: uppercase;
    margin: -10px 0 0 0;
  }

  #onSitePerksModule h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    max-width: 77%;
    margin: 0 auto;
  }

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

  .content-section-1 .row.pad-3-r,
  .content-section-3 .row.pad-3-r,
  .content-section-3 .pad-2-r {
    padding-right: 0 !important;
  }

  .content-section-3 .merch-img {
    padding-left: 20px;
    padding-right: 40px;
  }

  .section-4-image {
    padding: 0 40px 20px 20px;
  }

  .individualPerk {
    max-width: 100%;
  }

  #perk1 {
    padding: 0 10px 30px 30px;
  }

  #perk3 {
    padding: 0 20px 20px;
  }

  #TwoColGridContMain img {
    padding: 0 20px;
  }

  #individualPerksContainer {
    padding: 10px 24px 40px;
}

  .amex-experiences {
    display: none;
  }

  .amex-experiences-mobile {
    display: block;
    padding: 90px 0 0 0;
  }

  .coachella-footer {
    padding-bottom: 100px;
  }

  .coachella-footer .pad-2-t.pad-3-b {
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 450px) {
  .amex-coachella-logo img {
    max-width: 183px;
  }
}

/* ZMC ADD 3/11/25 */

.threeIconsRow img {
  width: 340px;
  height: auto;
}

.twoColmainCont .col-md-6 .richtext {
  background-color: #fff;
}

.twoColmainCont .col-md-6 .button {
  background-color: #fff;
  height: 80px;
  border-radius: 0 0 10px 10px;
}

.twocolTopImg img {
  border-radius: 10px 10px 0 0;
}

.twoColmainCont .col-md-6 {
  padding: 0px 30px;
}

.AMEXExperiencesLOGO img {
  width: 306px;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
}

.twoColmainCont {
  padding: 50px 0px;
}

.toph2headline {
  /* padding-top: 35px;*/
  padding-bottom: 50px; 
}

.threeIconsRow img {
  /* padding-bottom: 23px;
  padding-top: 30px; */
  height: 326px;
  width: auto;
}

.content-section-2 {
  padding-top: 50px;
  padding-bottom: 50px;
}

#SeeTermsCTA {
  padding-top: 25px;
}

#ExploreExperiencesCTA {
  padding-top: 30px;
}

.AMEXCardsLOGO {
  width: 606px;
  margin: auto !important;
  padding-top: 30px;
  padding-bottom: 10px;
  text-align: center !important;
}

#ExploreBizCardsCTA {
  padding-top: 25px;
  padding-bottom: 40px;
}

#ExploreBusinessCardsCTA {
  padding-top: 25px;
  padding-bottom: 40px;
}

@media screen and (max-width: 1279px) {
  .threeIconsRow img {
    max-height: 270px;
  }
}

@media screen and (max-width: 1023px) {
  .threeIconsRow img {
    max-height: 217px;
  }

  .rightContgridMain p {
    padding-right: 0px !important;
  }
}

@media screen and (max-width: 767px) {
  .toph2headline {
    font-size: 20px !important;
    line-height: 28px !important;
    text-align: center !important;
    padding-top: 30px !important;
    padding: 0 40px !important;
  }

  .hidemob {
    display: none;
  }

  .threeIconsRow {
    width: 310px !important;
    margin: auto !important;
  }

  .threeIconsRow img {
    max-height: 360px;
  }

  .threecolContMain .richtext p {
    padding: 0px !important;
  }

  .rightContgridMain h4 {
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    text-align: center !important;
    color: white !important;
    padding-bottom: 0px !important;
    font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif !important;
  }

  .rightContgridMain p {
    padding: 0 !important;
    text-align: center !important;
    max-width: 95% !important;
  }

  #EnrollNowcashBackCTA {
    padding-bottom: 5px;
  }

  .section-2-image {
    width: 264px;
    margin: auto !important;
  }

  #TwoColGridContMain img {
    /* width: 264px; */
    /* margin: auto !important; */
    /* text-align: center !important; */
  }

  .twoColmainCont .col-md-6 {
    padding: 20px 10px !important;
  }

  .amexExpMainCont h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    text-align: center !important;
    padding: 0px !important;
  }

  .amexExpMainCont p {
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    padding: 0px !important;
  }

  .AMEXCardsLOGO {
    width: 287px !important;
    margin: auto !important;
    text-align: center !important;
  }

  .amexExpMainCont .richtext div h3 {
    padding: 10px 0px !important;
  }

  #ExploreBizCardsCTA {
    padding-bottom: 0px !important;
  }

  .text-align-left {
    text-align: center !important;
  }

  #twoColmainCont .twocolTopImg img {
  }

  #twoColmainCont .image .text-align-right {
    text-align: center !important;
    margin: auto !important;
  }

  #twoColmainCont .container .row .col-md-6 .image .text-align-right {
    text-align: center !important;
    margin: auto !important;
  }

  #TwoColGridContMain #secPhoneImg {
    text-align: center !important;
    margin: auto !important;
  }

  .content-section-1 h4 {
    padding: 0 50px !important;
    text-align: center !important;
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .content-section-1 p {
    padding: 0px !important;
    text-align: center !important;
  }
}

#TwoColGridContMain > div.container > div > div:nth-child(1),
#TwoColGridContMain > div.container > div > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#TwoColGridContMain .col-md-6 {
  padding: 0 24px;
}

.rightContgridMain p {
  padding-right: 90px;
}

body {
  overflow-x: hidden !important;
  /* Prevents horizontal scrolling which could break the animation effect */
  /* margin: 0;
    padding: 0; */
}

/* 
Garage door (top layer)
- Covers the entire screen initially as the first thing the user sees
- Slides up as the user scrolls, revealing the room behind it
- Fixed positioning ensures it stays in place relative to the viewport while scrolling
- Creates the illusion that the user is scrolling the door away
*/

/* Garage door (top layer) */
.garage-door {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  top: -7px;
  left: 0;
  z-index: 10;
  /* Ensures it appears above the room */
  will-change: transform;
  /* Helps with smoother animation */
}

@media (max-width: 767px) {
  .garage-door {
    background-image: url('https://www.americanexpress.com/content/dam/amex/us/campaigns/festivals/Coachella/2025/garagedoor-mobile3-25.png');
    top: -25px !important;
    height: calc(100vh + 25px) !important;
  }
}

@media (min-width: 768px) {
  .garage-door {
    background-image: url('https://image.member.americanexpress.com/lib/fe9813727661057875/m/1/garagedoor-high-res.png');
    height: calc(100vh + 7px) !important;
  }
  .hidemob {
    display: none !important;
  }
}

/* 
Room (background layer)
- Starts behind the garage door and is initially hidden from view
- On desktop: Zooms in after the garage door moves up during second phase of scrolling
- On mobile: Remains static (no zoom) after the garage door moves
- Fixed positioning keeps it in place relative to the viewport while scrolling,
  creating a stable background for the animation
*/

/* Room (background layer) - changed to remove zoom */
.room {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #667b9e;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  will-change: transform;
}

@media (min-width: 768px) {
  .room {
    background-image: url('https://image.member.americanexpress.com/lib/fe9813727661057875/m/1/1476205_room-desktop-high-res_post.png');
  }
}

@media (max-width: 767px) {
  .room {
    background-image: url('https://onecmssl.americanexpress.com/content/dam/amex/en-us/benefits/membership/experiences/coachella/2025/images/1476205_room-mobile_post.png');
  }
  .content-section-2 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .AMEXExperiencesLOGO img {
    width: 167px !important;
  }
  .twoColmainCont h4 {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  .twoColmainCont p {
    font-size: 16px !important;
    line-height: 20px !important;
  }
  .content-section-2 h4 {
    padding: 0px !important;
    text-align: center !important;
    font-size: 20px !important;
    line-height: 28px !important;
  }

  #threecolh4class {
    padding-bottom: 10px !important;
  }
  #threecolpclass {
  }
  .hideMobnew {
    display: none !important;
  }
}

.scroll-space {
  height: 200vh;
}

/* Garagedoor and Room styles start  */

/* 
Content area (appears after animations)
- Becomes visible after scrolling past the animations
- z-index ensures it appears above the background
*/
#restofcontent {
  position: relative;
  z-index: 20;
  /* Higher than both the garage door and room */
  background-color: white;
  padding: 100px 0;
  /* Adds space at the top */
}

/* Content area (appears after animations) */
#restofcontent {
  position: relative;
  z-index: 20;
  /* Higher than both the garage door and room */
  background-color: white;
}

#restofcontent > .container {
  max-width: 1280px;
  width: 100%;
  padding: 0;
}

.amexExpMainCont,
#TermsandCon {
  z-index: 20;
}

#amex-footer {
  position: relative;
  z-index: 25;
}

/* Garagedoor and Room styles end  */

#termsCTARM:focus {
  outline: 1px dashed hsl(0deg 0% 0% / 92%) !important;
  outline-offset: 3px !important;
}

#GetReadyCTA:focus {
  outline: 1px dashed hsl(0deg 0% 100% / 92%) !important;
  outline-offset: 3px !important;
}

#FAQCTA:focus {
  outline: 1px dashed hsl(0deg 0% 100% / 92%) !important;
  outline-offset: 3px !important;
}

#findCardhp {
  padding: 0 35px !important;
}

#findCardh3 {
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 36px !important;
  padding-right: 50px !important;
  padding-left: 50px !important;
  padding-bottom: 20px !important;
}

.desktoponly {
  display: block;
}

@media (max-width: 1020px) {
  .desktoponly {
    display: none !important;
    padding: 0px !important;
  }
}

.amexExpMainCont {
  padding-bottom: 25px;
}

@media (max-width: 500px) {
  .twoColmainCont .col-md-6 .richtext {
    background-color: #fff;
    height: 290px !important;
  }
  .twoColmainCont {
    padding: 0px !important;
  }
}

@media (max-width: 767px) {
  #restofcontent {
    padding: 50px 0 !important;
  }
  
  .amexExpMainCont {
    padding-bottom: 0px !important;
  }

  #findCardhp {
    padding: 0 10px !important;
}
}

@media (min-width: 768px) and (max-width: 1280px) {
  .twoColmainCont .container .row .col-md-6 div .richtext {
    height: 290px !important;
  }
}
/* hi :) */

@media (min-width: 1281px) {
  .twoColmainCont .col-md-6 .richtext {
    background-color: #fff;
    height: 190px;
  }
}

#threecolh4class {
  padding-bottom: 10px !important;
}

.hideMobnew {
  display: block;
}