#app > div.main.w-100.doug > footer.bg-dark-grad.main-footer.py-4 {
    background-color: #008923;
} 

#questions > div.card-form-heading > div,  {
      font-size: 16px;
}

#app > div.language-select {
     display: none;
}

#app > div.main.w-100.doug > header.landing-header.mobile-hide > div > div > div > div.landing-header-card-info-right.d-flex.p-4.flex-column.justify-content-between.h-100 > button {
     display: none;
}

#app > div.main.w-100.doug > header.landing-header.mobile-hide > div > div > div > div.landing-header-card-info-left.d-flex.p-4.flex-column.justify-content-between > button {
     margin-bottom: 200px;
}

.lobby-landing {
  padding: 0 0;
}

.landing-header {
  min-height: 47rem;
}

#app > div.main.w-100.doug > main > div > section > div > div > div > div > div.row.mt-4 {
    display: none;
}

#app > div.main.w-100.doug > footer.bg-dark-grad.main-footer.py-4 > div > div.col-2.d-flex.flex-column > img {
   margin-left: 40px;
}

#app > div.main.w-100.doug > footer.bg-dark-grad.main-footer.py-4 > div > div.col-2.d-flex.flex-column > p {
   margin-top: 15px;
}

#app > div.main.w-100.doug > header.mobile-header > div:nth-child(1) > nav,
#app > div.main.w-100.doug > header.mobile-header > div.container.mb-0.mt-3.d-flex.justify-content-center > div > div > div > button {
   display: none;
}

/* 1. DESKTOP RANGE (992px and Wider) */
@media (min-width: 992px) {
  .skinny-banner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* Keeps the banner at a perfect 4.8x1 ratio as it scales */
    aspect-ratio: 4.8 / 1 !important; 
    background-image: url('https://s3-us-west-2.amazonaws.com/cmr-resources/AANANC26/conference-interior-banner.png?v=1') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Force hide the mobile element to prevent stacking */
  .mobile-header {
    display: none !important;
    height: 0 !important;
  }
}

/* 2. MOBILE RANGE (991px and Smaller) */
@media (max-width: 991px) {
  .mobile-header {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    /* Adjusts to a taller ratio (approx 4:3) so text remains legible on phones */
    aspect-ratio: 375 / 280 !important; 
    background-image: url('https://s3-us-west-2.amazonaws.com/cmr-resources/AANANC26/conference-mobile-banner.png?v=0') !important;
    background-size: contain !important; /* Ensures the logo/text is never cropped */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important; /* Matches the banner purple */
  }

  /* Force hide the desktop element to prevent stacking */
  .skinny-banner {
    display: none !important;
    height: 0 !important;
  }
}

/* 3. UNIVERSAL CLEANUP */
/* Hides any original <img> tags that might interfere with the background-image scaling */
.skinny-banner img, 
.mobile-header img {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* 1. THE CONTAINER: Force a single row with no wrapping */
#app > div.main.w-100.doug > main > div > section > div > div > div.d-flex.justify-content-between.col,
#section-1 .d-flex.justify-content-between.col {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important; /* Lines up the bottom edges of the buttons */
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    margin-top: 40px !important; 
    margin-bottom: 20px !important; 
    padding: 0 !important;
}

/* 2. THE BUTTONS: Force matching height and remove all outside spacing */
.nav-secondary, 
.nav-primary {
    /* This kills the 'stair-step' effect */
    margin: 0 !important; 
    
    /* Set a locked height */
    height: 44px !important; 
    min-height: 44px !important;
    
    /* Center the text perfectly */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Clean up the box model */
    padding: 0 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* 3. THE NEXT BUTTON: Ensure it stays flush right */
.nav-primary {
    margin-left: auto !important;
}

/* 4. THE WRAPPERS: If your system wraps buttons in extra divs, we must neutralize them */
#section-1 .d-flex.justify-content-between.col > div {
    display: contents !important; /* This ignores the wrapper and treats the button as a direct child */
}