/* =============================================
   SR Creative Productions — Mobile Fixes
   Fixes responsive issues on screens < 768px
   ============================================= */

@media (max-width: 767px) {

  /* --- Force GSAP-animated elements visible — ScrollTrigger doesn't fire reliably on mobile --- */
  .tp_img_reveal,
  .tp_fade_bottom,
  .tp_fade_anim,
  .tp-char-animation,
  .anim-zoomin,
  [class*="tp_fade"],
  [class*="tp_anim"] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* --- Portfolio iframes: reduce from 920px to sensible mobile height --- */
  .tp-project-5-2-thumb iframe {
    height: 260px !important;
  }

  /* --- Rotating WhatsApp/CONTACT button: scale down & keep bottom-right --- */
  .tp-footer-shape-wrap {
    right: 12px !important;
    bottom: 12px !important;
    transform: scale(0.65);
    transform-origin: bottom right;
  }

  /* --- Hero section padding on mobile --- */
  .tp-hero-area {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  /* --- Prevent horizontal overflow --- */
  body, html {
    overflow-x: hidden;
  }
  * {
    max-width: 100%;
  }
  img, video, iframe, svg {
    max-width: 100% !important;
  }

  /* --- Webinar popup sizing on mobile --- */
  #webinarPopup .modal-dialog,
  .webinar-popup {
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
  }

  /* --- General section spacing tightening --- */
  .pt-200 { padding-top: 80px !important; }
  .pb-200 { padding-bottom: 80px !important; }
  .pt-150 { padding-top: 60px !important; }
  .pb-150 { padding-bottom: 60px !important; }

  /* --- Project grid: full width stacking with tighter gap --- */
  .gx-140 {
    --bs-gutter-x: 1rem !important;
  }

  /* --- Prevent fixed CONTACT ring image from overflowing screen --- */
  .tp-footer-shape .img-1 {
    max-width: 130px;
    max-height: 130px;
  }

  /* --- Theme switcher gear icon: hide on mobile --- */
  .tp-theme-wrapper,
  #tp-theme-toggle,
  .tp-switcher {
    display: none !important;
  }

  /* --- Hero CTA buttons: stack vertically on small screens --- */
  .tp-hero-btn-wrap {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .tp-btn-black,
  .tp-hero-btn-wrap .tp-btn-border {
    width: auto !important;
    min-width: 200px;
    text-align: center;
    padding: 0 32px !important;
    font-size: 16px !important;
  }

}

@media (max-width: 575px) {

  /* --- Even smaller iframe on phones --- */
  .tp-project-5-2-thumb iframe {
    height: 220px !important;
  }

  /* --- Footer copyright text wrapping --- */
  .tp-copyright-2-left p {
    font-size: 12px;
  }

}