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;
  }

  body {
    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: 1200px"],
  div[style*="max-width: 1135px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

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

  /* For phase sections, stack heading on top of images on mobile */
  .phase-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  .phase-section>div[style*="display: flex"][style*="align-items: flex-end"] {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Stack headings and paragraphs for specific sections on mobile */
  /* Inspiration section */
  @media screen and (max-width: 768px) {
    .main-content.inspiration-section {
      flex-direction: column !important;
    }

    .main-content.inspiration-section>div[style*="max-width: 60%"],
    .main-content.inspiration-section>div[style*="font-size: 1.15rem"] {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Final Design section */
    .main-content.final-design-section {
      flex-direction: column !important;
    }

    .main-content.final-design-section>div[style*="max-width: 60%"],
    .main-content.final-design-section>div[style*="font-size: 1.15rem"] {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

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

  /* Keep phase images side by side on mobile */
  div[style*="display: flex"][style*="align-items: flex-end"] {
    flex-direction: row !important;
    gap: 1rem !important;
  }

  div[style*="display: flex"][style*="align-items: flex-end"] .image-link {
    width: 45% !important;
  }

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

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

  ul,
  ol,
  p {
    font-size: 1.05rem !important;
    /* Increased paragraph font size for mobile */
    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: 18rem"] {
    margin: 2rem 0 !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;
  }

  /* 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 phase images for very small screens */
  div[style*="display: flex"][style*="align-items: flex-end"] {
    gap: 1rem !important;
  }

  div[style*="display: flex"][style*="align-items: flex-end"] .image-link {
    width: 48% !important;
  }
}

/* Specific optimization for iPhone 13 */
@media screen and (max-width: 414px) {

  /* Further adjust phase images for iPhone 13 */
  div[style*="display: flex"][style*="align-items: flex-end"] {
    gap: 0.75rem !important;
  }

  div[style*="display: flex"][style*="align-items: flex-end"] .image-link {
    width: 47% !important;
  }

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