html,
body {
  overflow-x: hidden;
}

/* Limit Fancybox clickable area to image only */

@media screen and (max-width: 768px) {
  .container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  body {
    margin: 0 !important;
    font-size: 16px;
    /* Increased base font size for mobile */
  }

  .page-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .main-content {
    padding: 1rem !important;
    gap: 2rem !important;
  }

  /* Scale down container widths */
  div[style*="max-width: 60%"],
  div[style*="max-width: 50%"],
  div[style*="max-width: 1200px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Scale down flex layouts */
  div[style*="display: flex"]:not([style*="justify-content: center"]):not([style*="margin: 0 auto"]) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  div[style*="width: 33%"],
  div[style*="width: 40%"],
  div[style*="width: 50%"],
  div[style*="width: 60%"],
  div[style*="width: 100%"] {
    width: 100% !important;
  }

  /* Keep comparison images side by side on mobile */
  div[style*="display: flex"][style*="justify-content: center"],
  div[style*="margin: 0 auto"] {
    flex-direction: row !important;
    gap: 1rem !important;
  }

  div[style*="display: flex"][style*="justify-content: center"]>div[style*="width: 100%"],
  div[style*="margin: 0 auto"]>div[style*="width: 100%"] {
    width: 45% !important;
  }

  .image-link {
    width: 100% !important;
  }

  .image-link img {
    width: 100% !important;
    height: auto !important;
  }

  ul,
  ol,
  p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  iframe {
    width: 100% !important;
    height: 400px !important;
    margin: 2rem auto !important;
  }

  /* Scale down margins */
  div[style*="margin: 6rem"],
  div[style*="margin: 8rem"],
  div[style*="margin: 4rem"],
  div[style*="margin: 14rem"],
  div[style*="margin: 3rem"] {
    margin: 2rem 0 !important;
  }

  main.project-showcase {
    margin-top: 2rem !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Scale down positioning transforms */
  main[style*="position: relative"],
  main[style*="left: 50%"],
  main[style*="transform: translateX"] {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  /* Scale down box shadows and borders */
  div[style*="box-shadow"],
  div[style*="border-radius"] {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
  }

  /* Scale down padding in white boxes */
  div[style*="padding: 2rem"] {
    padding: 1rem !important;
  }

  .info-meta {
    text-align: center !important;
  }

  /* Keep chest images properly sized */
  div[style*="flex-direction: column"] img[alt*="Chest"],
  div[style*="flex-direction: column"] img[alt*="Crown"] {
    max-width: 30% !important;
  }

  /* Ensure consistent sizing for crown GIFs */
  img[alt*="Crown Animated"] {
    max-width: 30% !important;
    height: auto !important;
  }

  .project-showcase iframe {
    height: 400px !important;
  }

  #iframe-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .project-showcase>div[style*="margin: 0 auto"] {
    margin: 0 !important;
  }

  .project-showcase div[style*="background: #ffffff"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 2rem auto !important;
    box-sizing: border-box !important;
  }

  .project-showcase div[style*="background: #ffffff"][style*="padding: 2rem"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #iframe-container div[style*="margin-top: 0.25rem"] {
    margin-top: 0 !important;
  }

  #iframe-container>div[style*="background: #ffffff"] {
    margin-top: -1.8rem !important;
    padding: 1rem !important;
  }

  .project-showcase>div[style*="width: 100%"][style*="max-width: 1200px"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #iframe-container div {
    margin-top: 0 !important;
  }

  .project-showcase div[style*="background: #ffffff"][style*="padding: 2rem"] {
    margin-top: -1rem !important;
  }

  /* Correct User Flow image positioning */
  #user-flow-section div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  #user-flow-section div[style*="display: flex"]>div:first-of-type {
    order: 2 !important;
    width: 100% !important;
    text-align: center !important;
  }

  #user-flow-section div[style*="display: flex"]>div:last-of-type {
    order: 1 !important;
    width: 100% !important;
    margin-top: 2rem !important;
  }

  /* Site footer styles for tablet */
  .site-footer {
    padding: 1.5rem 0 1rem !important;
    font-size: 0.875rem !important;
  }

  .site-footer nav {
    font-size: 0.875rem !important;
  }

  .site-footer nav a,
  .site-footer nav .link-text {
    font-size: 0.875rem !important;
  }

  .site-footer p {
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    /* Increased base font size for smaller mobile */
  }

  .page-title {
    font-size: 1.3rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  ul,
  ol,
  p {
    font-size: 1rem !important;
    /* Increased paragraph font size for mobile */
  }

  /* Site footer styles for mobile */
  .site-footer {
    padding: 1rem 0 0.75rem !important;
  }

  .site-footer nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .site-footer nav span {
    margin: 0 0.25rem;
  }

  /* Adjust comparison images for very small screens */
  div[style*="display: flex"][style*="justify-content: center"],
  div[style*="margin: 0 auto"] {
    gap: 0.75rem !important;
  }

  div[style*="display: flex"][style*="justify-content: center"]>div[style*="width: 100%"],
  div[style*="margin: 0 auto"]>div[style*="width: 100%"] {
    width: 48% !important;
  }

  .main-content {
    padding: 0.75rem !important;
  }

  iframe {
    height: 300px !important;
  }
}