.shape-container:nth-child(2) .shape-bg,
.shape-container:nth-child(5) .shape-bg,
.shape-container:nth-child(8) .shape-bg {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Layout fixes: make background cover and footer sit at the bottom of the content */
#wrapper {
  height: auto !important;
  /* allow the section to grow with content */
  max-height: none !important;
  min-height: 100vh;
  /* still fill at least the viewport */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
  /* avoid clipping children and footer */
}

.footer-rainbow {
  position: static !important;
  /* place footer after content, not overlayed */
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin-top: 16px;
  /* small spacing from content above */
  z-index: 1 !important;
  /* below any floating elements */
}

/* Head banner - responsive positioning for all screen sizes */
#head-banner {
  position: absolute !important;
  left: -150px !important;
  bottom: -2.7% !important;
  width: 65% !important;
  max-width: 100% !important;
  height: 100%;
  object-fit: contain !important;
  object-position: left bottom !important;
  z-index: 30 !important;
  /* ABOVE text content so image overlays text */
  pointer-events: none;
}

/* Ensure text content stays at bottom BEHIND the banner image */
#heading-content {
  position: absolute !important;
  bottom: -2.5% !important;
  left: 0 !important;
  width: 100% !important;
  height: 50%;
  padding: 20px 40px 20px !important;
  z-index: 31 !important;
  /* BELOW banner image (z=30) so text appears behind */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  background: linear-gradient(to top, rgba(29, 143, 79, 0.85) 0%, rgba(29, 143, 79, 0.7) 60%, transparent 100%) !important;
  /* Green overlay background matching the green panel color */
}

#heading-content p {
  color: #fff !important;
  font-size: 1.3em !important;
  line-height: 1.5 !important;
  margin-bottom: 15px !important;
  
  font-weight: 500 !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

#heading-content p.leading {
  font-size: 1.2em !important;
  font-weight: 600 !important;
}

.texts {
  width: 38%;
  margin-left: 35px;
}


.cta-section {
  border-radius: 0 !important;
  border-top-right-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  width: 97% !important;
  /* match grid width */
  max-width: 816px !important;
  /* same as grid container */
  margin-left: 18px !important;
  /* align with grid left edge */
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.cta-button {
  border-radius: 18px !important;
  width: 250px !important;
  text-align: center !important;
  font-size: 22px !important;
}

.footer-rainbow {
  /* Allow full footer colour bar image to display */
  height: auto !important;
  /* no forced crop */
  min-height: 60px !important;
  /* baseline height */
  padding: 6px 12px !important;
  /* inner spacing */
  display: flex !important;
  align-items: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  /* stretch image to full area */
  background-position: center center !important;
  box-sizing: border-box !important;
}

.footer-left{
  padding-left: 30px;
}

.footer-right {
  margin-left: auto;
  padding-right: 50px;
  float: right;
  order: 2;
  white-space: nowrap;

}

.shape-container {
  width: 100%;
}


/* ===== Make grids start below the top-right logo ===== */
:root {
  --gems-logo-h: 180px;
  /* reduce perceived vertical footprint of logo */
  /* same as .logo-badge height */
  --gems-logo-gap: 16px;
  /* space under the logo */
}

/* Desktop / large screens */
.navigation_container {
  /* existing styles… */
  padding-top: 60px !important;
  /* bring grid closer */
}

/* Keep the logo above everything visually */
.logo-badge {
  position: relative !important;
  top: 0 !important;
  right: 100px !important;
  display: block !important;
  height: 180px !important;
  /* smaller so gap shrinks */
  width: auto !important;
  margin: 0 0 var(--gems-logo-gap, 16px) auto !important;
  /* align right with gap below */
  z-index: 100 !important;
}





/* === Fix: show all 9 tiles (no clipping) === */

/* The two-column wrapper had max-height + overflow:hidden */
#change-option-2026 {
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
  /* don't pin to bottom */
}

/* Right column was capped to 100vh and scrolled inside itself */
.navigation_container {
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
  z-index: 32;
  /* let content stack from top */
  width: 45%;
  margin-right: 0;
  padding-top: calc(var(120px) + var(--gems-logo-gap, 16px)) !important;
}

/* Ensure the grid can grow to as many rows as needed */
.grid-container {
  grid-auto-flow: row !important;
  grid-auto-rows: 120px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Keep CTA below the full grid */
.cta-section {
  margin-top: 12px !important;
}

#green-shape-layer {
  width: 85% !important;
  top: -155px !important;
}

.shape-content {
  text-align: center !important;
}

.shape-container:nth-child(1) .shape-content h3,
.shape-container:nth-child(4) .shape-content h3,
.shape-container:nth-child(7) .shape-content h3,
.shape-container:nth-child(9) .shape-content h3,
.shape-container:nth-child(10) .shape-content h3 {
  text-align:left;
}

.shape-container:nth-child(11) .shape-content h3 {
	text-align:left;
  
}

.shape-container:nth-child(5) .shape-content h3,
.shape-container:nth-child(8) .shape-content h3,
.shape-container:nth-child(3) .shape-content h3,
.shape-container:nth-child(6) .shape-content h3,
.shape-container:nth-child(12) .shape-content h3 {
	text-align:left;
}

/* ==== Tablet Portrait (661px - 1023px) - Mobile-like view ==== */
@media screen and (min-width: 661px) and (max-width: 1023px) and (orientation: portrait) {

  /* Use mobile-style layout */
  html,
  body {
    overflow-x: hidden !important;

  }

  #wrapper {
    margin-top: -10px !important;
  }

  /* Force single-column layout */
  #change-option-2026 {
    display: block !important;
    flex-direction: column !important;
  }

  /* Force heading visibility */
  #heading {
    position: relative !important;
    width: 100% !important;
  }

  /* Single column grid */
  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 30px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .shape-container {
    height: 120px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
  }

  .shape-container .shape-bg {
    border-radius: 12px !important;
  }

  .shape-content {
    padding: 24px 24px 20px !important;
  }

  .shape-content h3 {
    line-height: 1.3 !important;
    font-size: 1.15em !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Mobile-style heading */
  .heading.text-center.text-dark {
    display: block !important;
    font-weight: 800 !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    color: #2e2e2e !important;
    margin: 6px auto 16px !important;
    padding: 0 20px !important;
    text-align: center !important;
  }

  /* Green panel mobile-style */
  #green-shape-layer {
    top: 0 !important;
    left: 0 !important;
    width: calc(100% - 40px) !important;
    margin: 10px 20px 0 !important;
    height: 60vh !important;
    border-top-right-radius: 0 !important;
    position: relative !important;
    padding-bottom: 140px !important;
    background-image: url("-/media/EB0A74F61E8F4849B41E0E3ACC836A45.ashx"), linear-gradient(135deg, #2d8f4f 0%, #1f6e3c 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 85% auto, cover !important;
    min-height: auto !important;
  }

  #green-shape-layer>h1.heading {
    display: none !important;
  }

  #heading-content {
    top: 16px !important;
    bottom: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 20px !important;
    z-index: 31 !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  #heading-content .texts {
    width: 100% !important;
    margin: 0 !important;
  }

  #heading-content p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin: 0 0 12px 0 !important;
    color: #fff !important;
    text-shadow: none !important;
  }

  #head-banner {
    display: none !important;
  }

  .logo-badge {
    position: relative !important;
    display: block !important;
    margin: 10px auto 12px !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    height: 130px !important;
    width: auto !important;
    z-index: 101 !important;
  }

  .navigation_container {
    width: 100% !important;
    margin: 15px 0 0 !important;
    padding: 0 0 40px !important;
    align-items: stretch !important;
  }

  .cta-section {
    width: auto !important;
    margin: 16px 30px 30px !important;
    padding: 24px 24px !important;
    border-radius: 12px !important;
    max-width: none !important;
  }

  .footer-rainbow {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* ==== Tablet Landscape (661px - 1023px) - Desktop-like view ==== */
@media screen and (min-width: 661px) and (max-width: 1023px) and (orientation: landscape) {

  /* Desktop-style layout */
  #wrapper {
    min-height: 100vh;
    overflow-x: hidden;
  }

  .logo-badge {
    height: 150px !important;
    right: 80px !important;
    margin-bottom: 12px !important;
  }

  #green-shape-layer {
    width: 88% !important;
    top: -180px !important;
    min-height: 500px;
  }

  #head-banner {
    left: -130px !important;
    bottom: -2.5% !important;
    width: 72% !important;
    display: block !important;
  }

  #heading-content {
    bottom: -2.3% !important;
    padding: 16px 32px 16px !important;
    display: flex !important;
  }

  .texts {
    width: 40%;
    margin-left: 32px;
  }

  #heading-content p {
    font-size: 1.15em !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
  }

  .navigation_container {
    width: 46% !important;
    padding-top: calc(var(100px) + var(--gems-logo-gap, 12px)) !important;
    margin-right: 10px;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 13px !important;
    grid-auto-rows: 108px !important;
    padding: 0 8px;
  }

  .shape-container {
    height: 108px !important;
  }

  .shape-container:nth-child(2) .shape-bg,
  .shape-container:nth-child(4) .shape-bg,
  .shape-container:nth-child(6) .shape-bg,
  .shape-container:nth-child(8) .shape-bg,
  .shape-container:nth-child(10) .shape-bg,
  .shape-container:nth-child(12) .shape-bg {
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }


  .shape-content h3 {
    font-size: 1em !important;
    line-height: 1 !important;
  }

  .cta-section {
    width: 95% !important;
    max-width: 600px !important;
    margin-left: 10px !important;
    padding: 16px 18px !important;
  }

  .cta-text h2 {
    font-size: 1.35em !important;
  }

  .cta-button {
    font-size: 19px !important;
    width: 210px !important;
    padding: 11px 22px !important;
  }

  .footer-rainbow {
    font-size: 12px !important;
    padding: 8px 18px !important;
    min-height: 52px !important;
  }

  .footer-left {
    padding-left: 18px;
  }

  .footer-right {
    padding-right: 28px;
  }
}

/* ==== Mobile card grid: stack with rounded gradient tiles (<=660px) ==== */
@media screen and (max-width: 660px) {

  /* Prevent any accidental horizontal scroll that can force pinch-zoom */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Ensure single column and consistent spacing */
  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    /* slightly larger vertical rhythm */
    padding: 0 20px !important;
    /* align with panel horizontal gutter */
    width: 100% !important;
    max-width: 100% !important;
  }

  .shape-container:nth-child(1) .shape-content h3,
  .shape-container:nth-child(3) .shape-content h3,
  .shape-container:nth-child(4) .shape-content h3,
  .shape-container:nth-child(6) .shape-content h3,
  .shape-container:nth-child(7) .shape-content h3,
  .shape-container:nth-child(9) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }

  .shape-container:nth-child(5) .shape-content h3,
  .shape-container:nth-child(8) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }

  /* Card container with rounded edges and subtle elevation */
  .shape-container {
    height: 115px !important;
    /* taller like reference screenshot */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
  }

  /* Override any asymmetric radius rules from base CSS and nth-child tweaks */
  .shape-container .shape-bg {
    border-radius: 12px !important;
  }

  /* Tighten text for compact mobile cards */
  .shape-content {
    padding: 22px 22px 18px !important;
    /* slight top emphasis, tighter bottom */
  }

  /* ----- Mobile heading + green panel layout to match reference ----- */
  .heading.text-center.text-dark {
    display: block !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    /* a bit larger */
    line-height: 1.15 !important;
    color: #2e2e2e !important;
    margin: 4px auto 14px !important;
    /* tighter gap under logo */
    padding: 0 12px !important;
    text-align: center !important;
  }

  /* Green panel spans most of viewport with straight top-right corner */
  #green-shape-layer {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px 12px 0 !important;
    /* sit below the heading */
    height: 70vh !important;
    /* taller hero */
    border-top-right-radius: 0 !important;
    position: relative !important;
    padding-bottom: 130px !important;
    /* allow room for bottom image */
    background-image: url("-/media/EB0A74F61E8F4849B41E0E3ACC836A45.ashx"), linear-gradient(135deg, #2d8f4f 0%, #1f6e3c 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 88% auto, cover !important;
  }

  /* Hide duplicate heading inside the green panel on mobile */
  #green-shape-layer>h1.heading {
    display: none !important;
  }

  /* Text block sits toward the top of the green panel */
  #heading-content {
    top: 40px !important;
    bottom: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 16px !important;
    z-index: 31 !important;
    /* above the family image */
    left: 12px !important;
    /* align with green panel's left gutter */
    right: 12px !important;
    /* align with green panel's right gutter */
    width: auto !important;
    /* derive from left/right so it never extends outside */
    box-sizing: border-box !important;
  }

  /* Fix narrow text column on mobile */
  #heading-content .texts {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Readable paragraph sizing and alignment on mobile */
  #heading-content p {
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
  }

  #heading p {
    margin: 0 0 12px 0 !important;
    font-size: 0.98rem !important;
    text-align: left !important;
  }

  #heading p.leading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

  /* Family/banner image anchored to bottom center inside the green panel */
  #head-banner {
    display: none !important;
    /* use background on #green-shape-layer instead */
  }

  /* Center the top GEMS logo and put it above the heading */
  .logo-badge {
    position: relative !important;
    display: block !important;
    margin: 6px auto 10px !important;
    /* centered above heading */
    left: auto !important;
    right: auto !important;
    top: -10px !important;
    height: 110px !important;
    width: auto !important;
    z-index: 101 !important;
  }

  /* Navigation container should span full width so cards are centered */
  .navigation_container {
    width: 100% !important;
    margin: 10px 0 0 !important;
    /* small gap below green panel */
    padding: 0 0 40px !important;
    /* breathing room below cards */
    align-items: stretch !important;
  }

  .shape-content h3 {
    line-height: 1.25 !important;
  }

  /* Make CTA bar the same width and corner radius as the cards/grid */
  .cta-section {
    width: auto !important;
    margin: 12px 20px 24px !important;
    /* match grid side padding */
    padding: 20px 20px !important;
    border-radius: 12px !important;
    /* same as cards */
    max-width: none !important;
  }
}

/* Grid color styling to match reference image */

/* Row 1 */
.how-to-switch-shape .shape-bg {
  background: linear-gradient(135deg, #0e8f50 0%, #0a6b3a 100%) !important;
}

.contributions-shape .shape-bg {
  background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%) !important;
}

.changes-shape .shape-bg {
  background: linear-gradient(135deg, #17a2a2 0%, #128585 100%) !important;
}

/* Row 2 */
.care-coordination-shape .shape-bg {
  background: linear-gradient(135deg, #1565a8 0%, #0f4d7d 100%) !important;
}

.gp-nomination-shape .shape-bg {
  background: linear-gradient(135deg, #e62e2e 0%, #c92424 100%) !important;
}

.teal-shape .shape-bg {
  background: linear-gradient(#d47a28 100%);
}

/* New grid items styling */
.cdl-shape .shape-bg {
  background: linear-gradient(135deg, #1a8f5e 0%, #0f6b42 100%) !important;
}

.download-form-shape .shape-bg {
  background: linear-gradient(135deg, #1a8f8f 0%, #0f6b6b 100%) !important;
}

.how-to-change-shape .shape-bg {
  background: linear-gradient(135deg, #f5a623 0%, #d48a0f 100%) !important;
}

.evo-brochure-shape .shape-bg {
  background: linear-gradient(135deg, #1b8989 0%, #146666 100%) !important;
}

/* ==== iPad Pro overrides: force desktop layout on portrait (1024x1366) ==== */
/* iPad Pro 1024×1366 in PORTRAIT – copy MOBILE layout */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {

  /* Make wrapper behave like mobile (same bg and scroll) */
  #wrapper {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    background-image: url("-/media/A5A501B6749349DC83D1883306B9FE5F.ashx") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: transparent !important;
  }

  /* Make overall layout same as mobile/tablet column layout */
  #change-option-2026 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Heading area same as mobile */
  #heading {
    width: 100% !important;
    margin: 0 !important;
    min-height: 50vh !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
  }

  /* Top logo and H1 like mobile */
  .heading.text-center.text-dark {
    display: block !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    color: #2e2e2e !important;
    margin: 4px auto 14px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  .logo-badge {
    position: relative !important;
    display: block !important;
    margin: 6px auto 10px !important;
    left: auto !important;
    right: auto !important;
    top: -10px !important;
    height: 110px !important;
    width: auto !important;
    z-index: 101 !important;
  }

  /* Green panel exactly like mobile */
  #green-shape-layer {
    top: 10px !important;
    left: 0 !important;
    width: calc(100% - 48px) !important;
    margin: 10px 24px !important;
    height: 70vh !important;
    border-top-right-radius: 0 !important;
    position: relative !important;
    padding-bottom: 130px !important;
    background-image: url("-/media/EB0A74F61E8F4849B41E0E3ACC836A45.ashx"),
      linear-gradient(135deg, #2d8f4f 0%, #1f6e3c 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 88% auto, cover !important;
  }

  #green-shape-layer::before {
    border-top-right-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  #green-shape-layer>h1.heading {
    display: none !important;
  }

  /* Text block on green panel – same as mobile */
  #heading-content {
    top: 15px !important;
    bottom: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 16px !important;
    z-index: 31 !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  #heading-content .texts {
    width: 95% !important;
    margin: 0 !important;
  }

  #heading-content p {
    font-size: 2rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 10px !important;
  }

  #heading p {
    margin: 0 0 12px 0 !important;
    font-size: 0.98rem !important;
    text-align: left !important;
  }

  #heading p.leading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

  /* Hide separate banner image – use background on green panel */
  #head-banner {
    display: none !important;
  }

  /* NAV + CARDS: same stacked layout as mobile */
  .navigation_container {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 0 40px !important;
    align-items: stretch !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-auto-flow: row !important;
    height: auto !important;
    overflow: visible !important;
  }

  .shape-container {
    height: 115px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
  }

  .shape-container .shape-bg {
    border-radius: 12px !important;
  }

  .shape-content {
    padding: 22px 22px 18px !important;
  }

  .shape-container:nth-child(1) .shape-content h3,
  .shape-container:nth-child(3) .shape-content h3,
  .shape-container:nth-child(4) .shape-content h3,
  .shape-container:nth-child(6) .shape-content h3,
  .shape-container:nth-child(7) .shape-content h3,
  .shape-container:nth-child(9) .shape-content h3,
  .shape-container:nth-child(5) .shape-content h3,
  .shape-container:nth-child(8) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }
.shape-container:nth-child(2) .shape-content{
      justify-content: left !important;
}
  .shape-content h3 {
    line-height: 1.25 !important;
  }

  /* CTA bar same width & radius as cards */
  .cta-section {
    width: auto !important;
    margin: 24px 24px 12px 24px !important;
    padding: 20px 20px !important;
    border-radius: 12px !important;
    max-width: none !important;
  }
}
/* iPad Air 820×1180 PORTRAIT – force EXACT mobile layout */
@media screen and (min-width: 800px) and (max-width: 900px) and (orientation: portrait) {

  #change-option-2026 {
    flex-direction: column;
    align-items: center;
    height: auto;
    max-height: none;
  }

   #wrapper {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    background-image: url("-/media/A5A501B6749349DC83D1883306B9FE5F.ashx") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: transparent !important;
  }

  #heading {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: 50vh;
    height: auto;
    max-height: none;
    margin: 0;
    margin-bottom: 20px;
    display: grid;
  }

  #heading-content {
    padding: 0;
    top: 15px;
    bottom: auto;
  }

  #heading p {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 40px;
    width: 100%;
    max-width: 95%;
  }

  #heading p.leading {
    font-size: 1.2em;
    color: white;
    max-width: 90% !important;
  }

  #heading p:not(.leading) {
    width: 100%;
    max-width: 95%;
    color: white;
    max-width: 90% !important;
  }

  #heading .heading-image {
    width: 240px;
    margin-left: auto;
    display: block;
    margin-top: 30px;
    margin-right: 0;
  }

  #green-shape-layer {
    display: block;
    height: 75vh;
    width: calc(100% - 40px);
    margin: 0 20px;
    left: 0;
    border-top-right-radius: 0;
  }

  #green-shape-layer::before {
    border-top-right-radius: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #green-shape-layer > .heading {
    display: none;
  }

  .heading.text-center.text-dark {
    display: block;
  }

  #heading-banner {
    mix-blend-mode: luminosity;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  .navigation_container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0px;
    min-height: 100%;
    max-height: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }

  .shape-container {
    height: 110px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .shape-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .shape-container:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  .shape-bg {
    border-radius: 10px !important;
    transition: opacity 0.3s ease;
  }

  .shape-container:hover .shape-bg {
    opacity: 0.95;
  }

  .shape-content {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 25px;
  }

  .shape-content h3 {
    font-size: 18px;
    margin-left: 0 !important;
  }

  /* icons, CTA, logo, footer etc – same as your 768px block */
  .shape-container::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 32px;
    height: 32px;
    z-index: 10;
    opacity: 0.25;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .shape-container:hover::after {
    opacity: 0.4;
    transform: translateY(-50%) scale(1.1);
  }

  /* (icon background-image rules omitted here, they stay as in your CSS) */

  .cta-section {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
    width: calc(100% - 40px);
    right: 0;
  }

  .cta-text h2 {
    font-size: 14px;
  }

  .cta-text span {
    font-size: 12px;
  }

  .logo-badge {
    position: relative;
    width: auto;
    top: auto;
    bottom: auto;
    right: auto !important;
    display: block;
    margin: 0 auto;
  }

  .discover-brilliance {
    display: none;
  }

  .footer-rainbow span {
    margin-left: 0px !important;
    font-size: 10px;
  }

  .footer-rainbow span:nth-child(2) {
    display: none;
  }

  .modal-content {
    margin: 61% auto;
  }


  /* === now copy of your max-width: 660px MOBILE overrides === */

  #wrapper {
    width: 100%;
    height: 100%;
    background-image: url("-/media/A5A501B6749349DC83D1883306B9FE5F.ashx");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: hidden;
    background-blend-mode: multiply;
  }

  #green-shape-layer {
    width: calc(100% - 40px);
    margin: 0 20px;
    left: 0;
    border-top-right-radius: 0;
  }

  #green-shape-layer::before {
    border-top-right-radius: 0;
  }

  #green-shape-layer > .heading {
    font-size: 1.5em;
    padding: 0;
    top: 15px;
    left: 15px;
    right: 20px;
    left: auto;
    transform: none;
    text-align: right;
    top: 60px;
  }

  #heading {
    margin-bottom: 20px;
  }

  #heading .heading-image {
    width: 240px;
    margin: 30px auto;
    display: block;
  }

  #heading p,
  #heading p:not(.leading) {
    max-width: 100%;
  }

  .grid-container {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  .shape-container {
    height: 100px;
  }

  .shape-bg {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .shape-content {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 20px;
  }

  .shape-content h3 {
    font-size: 16px;
    margin-left: 0 !important;
  }

  .cta-text h2 {
    font-size: 16px;
  }

  .cta-text span {
    font-size: 14px;
  }

  .logo-badge {
    width: auto;
    top: auto;
    bottom: 0;
    right: 20px;
  }

  .discover-brilliance {
    max-width: 200px;
    margin-top: 10px;
  }

  /* and the later "mobile card grid" tweaks – exactly like your last block */

  html,
  body {
    overflow-x: hidden !important;
  }

  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .shape-container:nth-child(1) .shape-content h3,
  .shape-container:nth-child(3) .shape-content h3,
  .shape-container:nth-child(4) .shape-content h3,
  .shape-container:nth-child(6) .shape-content h3,
  .shape-container:nth-child(7) .shape-content h3,
  .shape-container:nth-child(9) .shape-content h3,
  .shape-container:nth-child(5) .shape-content h3,
  .shape-container:nth-child(8) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }

  .shape-container {
    height: 115px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
  }

  .shape-container .shape-bg {
    border-radius: 12px !important;
  }

  .shape-content {
    padding: 22px 22px 18px !important;
  }

  .heading.text-center.text-dark {
    display: block !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    color: #2e2e2e !important;
    margin: 4px auto 14px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  #green-shape-layer {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px 12px 0 !important;
    height: 70vh !important;
    border-top-right-radius: 0 !important;
    position: relative !important;
    padding-bottom: 130px !important;
    background-image: url("-/media/EB0A74F61E8F4849B41E0E3ACC836A45.ashx"),
      linear-gradient(135deg, #2d8f4f 0%, #1f6e3c 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 88% auto, cover !important;
  }

  #green-shape-layer > h1.heading {
    display: none !important;
  }

  #heading-content {
    top: 12px !important;
    bottom: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 16px !important;
    z-index: 31 !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  #heading-content .texts {
    width: 100% !important;
    margin: 0 !important;
  }

  #heading-content p {
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
  }

  .logo-badge {
    position: relative !important;
    display: block !important;
    margin: 6px auto 10px !important;
    left: auto !important;
    right: auto !important;
    top: -10px !important;
    height: 110px !important;
    width: auto !important;
    z-index: 101 !important;
  }

  .navigation_container {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 0 40px !important;
    align-items: stretch !important;
  }

  .shape-content h3 {
    line-height: 1.25 !important;
  }

  .cta-section {
    width: auto !important;
    margin: 12px 20px 24px !important;
    padding: 20px 20px !important;
    border-radius: 12px !important;
    max-width: none !important;
  }
}

#green-shape-layer {
  width: 80% !important;
}
/* //textsixe - 1em */
@media screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
  .texts{
    position: absolute;
    bottom: 105%;
    width: 33% !important;
    margin-left: 55px !important;
  }
  #heading-content p {
  font-size: 1em !important;
  line-height: 1.5 !important;
}
}
@media screen and (min-width: 1180px) and (max-width: 1180px) and (orientation: landscape){
	#green-shape-layer{
		top: -50px !important;
	}
	.heading{
		font-size: 2.8em !important;
		margin-left: -20px !important;
	}
	.texts{
		margin-top: 40px !important;
		width: 45% !important;
		margin-left:0 !important;
	}
	
}
@media screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape){
	#green-shape-layer{
		top: -50px !important;
	}
	.texts{
		position: absolute !important;
		bottom: 4% !important;
	}
	.heading{
		margin-top:10px !important;
		margin-left: -20px !important;
	}
	.discover-brilliance{
		margin-top:80px !important;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
	#green-shape-layer{
		left:25px !important;
	}
	.texts{
		position: absolute !important;
		left:80px !important;
		padding-right:100px !important;
	}
	#heading-content p {
		font-size: 2.8rem !important ;
	}
	.shape-content h3{
		font-size: 1.4em !important ;
	}
	h1.heading.text-center.text-dark{
		font-size: 40px !important;
	}
}
@media screen and (min-width: 820px) and (max-width: 820px) and (orientation: portrait) {
	#green-shape-layer{
		left:25px !important;
	}
	.texts{
		position: absolute !important;
		left:70px !important;
		padding-top: 20px !important;
		padding-right:120px !important;
	}
	#heading-content p {
		font-size: 2.5rem !important ;
	}
}
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
	#green-shape-layer{
		left:20px !important;
	}
	.texts{
		position: absolute !important;
		left:70px !important;
		padding-top: 20px !important;
		padding-right:120px !important;
	}
	#heading-content p {
		font-size: 2.5rem !important ;
	}
}