/* =========================================================
   GAJANAN CINEMATIX — RESPONSIVE-ONLY SAFETY
   This file does NOT change page structure, content, animations,
   typography, spacing, grids, or desktop layout. It only prevents
   accidental overflow on smaller viewports.
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }

  img, video, svg, canvas, iframe {
    max-width: 100%;
  }

  input, textarea, select, button {
    max-width: 100%;
  }

  [class], [id] {
    min-width: 0;
  }

  h1, h2, h3, h4, h5, h6, p, a, span, li, label {
    overflow-wrap: anywhere;
  }

  .header-inner,
  .footer-inner,
  .portfolio-inner,
  .services-inner,
  .about-inner,
  .fm-nav,
  .nf-main,
  .nf-top,
  .bottom-area,
  .form-section,
  .footer-columns {
    max-width: 100%;
  }

  .contact-link,
  .footer-links a,
  .footer-legal a,
  .footer-nav a,
  .footer-socials a,
  .footer-contact a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  /* Respect very small screens without changing the existing design. */
  .header-inner,
  .footer-inner {
    max-width: 100vw;
  }
}


/* =========================================================
   ABOUT PAGE — MOBILE/TABLET LAYOUT SAFETY ONLY
   Keeps the original animations/effects intact. These rules
   only stop content from looking compressed or misaligned.
   ========================================================= */
@media (max-width: 767px) {
  #about .text-wrapper {
    width: 100%;
  }

  #about .about-overview .text-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  #about .chapters-wrapper {
    width: 100%;
  }

  #about .chapters {
    width: 100%;
    min-width: 0;
  }

  #about .chapter-container {
    width: 100%;
  }

  #about .about-figure {
    width: 100%;
  }

  #about .figure-text,
  #about .figure-img-wrap,
  #about .sticky-sections,
  #about .sticky-text-col {
    min-width: 0;
    width: 100%;
  }

  #about .mobile-card-container {
    width: min(100%, 260px);
    margin-left: auto;
    margin-right: auto;
  }

  #about .card-3d-standalone {
    width: 100%;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }

  #about .awards-carousel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  #about .about-overview .text-wrapper {
    gap: 14px;
  }

  #about .about-figure {
    gap: 20px;
  }

  #about .figure-text {
    width: 100%;
  }

  #about .footer-grid {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  #about .wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }

  #about .mobile-card-container,
  #about .card-3d-standalone {
    max-width: 230px;
  }
}