@media (max-width: 760px) {
  #world-app {
    background-size: 150% auto;
  }
}

@media (max-width: 520px) {
  #world-app {
    background-size: 200% auto;
  }
}

@media (max-width: 400px) {
  #world-app {
    background-size: 250% auto;
  }
}

@media (max-width: 400px) {
  #world-app {
    background-size: 250% auto;
  }
}

@media (max-width: 330px) {
  #world-app {
    background-size: 350% auto;
  }
}

/* Stronger, extended drop shadow for improved contrast against busy backgrounds.
   Uses multiple layered shadows to give depth while remaining readable. */
#world-app .section-header .section-title,
#world-app .section-header .section-subtitle {
  /* layered shadows: large blurred shadow + medium + small for crisp edge */
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.58),
    /* deep, extended shadow */ 0 4px 12px rgba(0, 0, 0, 0.45),
    /* mid-range depth */ 0 1px 2px rgba(0, 0, 0, 0.35); /* subtle crisp edge */
}

/* Make the main heading slightly stronger than the subtitle */
#world-app .section-header .section-title {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.64), 0 5px 14px rgba(0, 0, 0, 0.48),
    0 1px 2px rgba(0, 0, 0, 0.36);
  /* tiny letter spacing can help the shadow read better */
  letter-spacing: 0.3px;
}

/* Subtitle slightly lighter so hierarchy remains clear */
#world-app .section-header .section-subtitle {
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.56), 0 3px 8px rgba(0, 0, 0, 0.4);
  /* Constrain the paragraph width for better readability on wide screens */
  max-width: 500px;
  margin: 0.75rem auto 0; /* keep top spacing and center the paragraph */
  text-align: center;
  line-height: 1.65;
  font-size: 18px !important;
}

/* Remove text shadow from button text in this section to keep it crisp */
#world-app .row.justify-content-center .btn {
  text-shadow: none;
}

/* Tame the effect on very small screens so text remains crisp */
@media (max-width: 480px) {
  #world-app .section-header .section-title,
  #world-app .section-header .section-subtitle {
    text-shadow: 0 6px 14px rgba(0, 0, 0, 0.56), 0 3px 8px rgba(0, 0, 0, 0.4);
  }
  #world-app .row.justify-content-center .btn {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
  }
  #world-app .row.justify-content-center .btn {
    text-shadow: none;
  }
  /* Reduce subtitle width and size on very small screens for short line-lengths */
  #world-app .section-header .section-subtitle {
    max-width: 92%;
    margin-top: 0.5rem;
  }
}

/* Icon for world app buttons: small, aligned, spaced from text */
.btn .world-icon {
  width: 20px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Invert the black SVG to white on button hover/focus.
   Uses CSS filter for broad image support. A slight brightness boost
   helps ensure full white on some browsers. Smooth transition and
   reduced-motion respect included. */
.btn .world-icon {
  transition: filter 180ms ease, opacity 180ms ease;
}
.btn:hover .world-icon,
.btn:focus .world-icon,
.btn:active .world-icon {
  filter: invert(1) brightness(1.6);
}

@media (prefers-reduced-motion: reduce) {
  .btn .world-icon {
    transition: none;
  }
}

/* Mobile: allow the World App buttons to wrap to multiple lines
   so "TRY NOW ON WORLD APP" can break into two lines on small screens. */
@media (max-width: 576px) {
  .btn-common {
    /* allow text to wrap instead of forcing a single line */
    white-space: normal !important;
    /* use inline-flex so the icon and text align nicely and can wrap */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* allow the label to move to the next line */
    padding: 10px 18px; /* slightly smaller horizontal padding on small screens */
    text-align: center; /* center multi-line text */
    line-height: 1.05;
    will-change: transform;
    transform-origin: center center;
    /* don't force transform with !important — allow transitions to animate */
    transform: scale(1);
    transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out,
      color 0.35s ease-in-out;
  }

  /* keep the icon on the first line but allow text to wrap next to/under it */
  .btn-common .world-icon {
    margin-right: 0.5rem;
    flex: 0 0 auto;
  }

  /* reduce hero-specific btn gap so the layout stays compact on small viewports */
  #hero .contents .btn-common {
    padding: 10px 16px;
  }
}

/* Very small phones: put the icon on its own line and add vertical gap
   so the logo (world-icon) has clear space above the multi-line label. */
@media (max-width: 420px) {
  .btn-common .world-icon {
    margin-right: 0; /* remove horizontal spacing when stacked */
    margin-bottom: 8px; /* vertical gap between logo and text */
    flex-basis: 100%; /* force icon onto its own row inside the inline-flex */
    text-align: center; /* center the icon */
    display: inline-block; /* ensure proper sizing */
  }

  .btn-common {
    /* keep the button compact but roomy vertically */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Global constraint for the World App logo to prevent unexpected scaling.
   This covers standalone images and icons inside buttons. Adjust the
   pixel values below if you want a larger or smaller logo site-wide. */
  .world-icon,
  .btn .world-icon,
  .btn-common .world-icon {
    width: 28px; /* fixed logical width for consistent layout */
    max-width: 36px; /* allow a tiny growth on very large screens if needed */
    height: auto;
    display: inline-block;
  }

  @media (max-width: 420px) {
    /* Slightly smaller icon on very small phones so it doesn't crowd text */
    .world-icon,
    .btn .world-icon,
    .btn-common .world-icon {
      width: 22px;
      max-width: 28px;
    }
  }
}