/* ============================================= 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; } /* SplitText char divs — force inline so they wrap naturally on mobile */ .tp-char-animation > div, .tp-char-animation > span, .tp-char-animation .tp-char { display: inline !important; opacity: 1 !important; transform: none !important; clip-path: none !important; position: static !important; } /* GSAP SplitText word wrappers injected on headings — each word gets a position:relative;display:inline-block div containing letter-divs. Without white-space:nowrap the letters inside a word can orphan across lines. */ h1 > div[style*="inline-block"], h2 > div[style*="inline-block"], h3 > div[style*="inline-block"], h4 > div[style*="inline-block"], [class*="section-title"] > div[style*="inline-block"], [class*="tp-service"] > div[style*="inline-block"], [class*="footer"] > div[style*="inline-block"] { white-space: nowrap !important; display: inline !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 circle: on mobile the 790x790 circle gets constrained in width but not height, turning into a stretched oval. Fix: lock height = width so border-radius:50% renders a true circle, not a tall oval. --- */ .tp-hero-shape-1 { width: 600px !important; height: 600px !important; max-width: 600px !important; transform: translateX(-50%) !important; } /* --- Hero section padding on mobile --- */ .tp-hero-area { padding-top: 100px !important; padding-bottom: 40px !important; } /* --- Hero: force title and content above the arch shape --- */ .tp-hero-title-box, .tp-hero-content { position: relative !important; z-index: 2 !important; } /* --- Prevent horizontal overflow --- */ /* NOTE: overflow-x: hidden on breaks position:fixed offcanvas in WebKit/iOS — only set it on body */ body { overflow-x: hidden; } img, video, iframe, svg { max-width: 100% !important; } /* Swiper slides use inline pixel widths set by JS — max-width:100% breaks the marquee loop */ .swiper-wrapper, .swiper-slide, .swiper-container { max-width: none !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-180 { padding-top: 60px !important; } .pb-180 { padding-bottom: 60px !important; } .pt-150 { padding-top: 50px !important; } .pb-150 { padding-bottom: 50px !important; } .pt-130 { padding-top: 40px !important; } .pb-130 { padding-bottom: 40px !important; } .pt-120 { padding-top: 40px !important; } .pb-120 { padding-bottom: 40px !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, .tp-theme-settings-area { 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; } /* --- Oversized section headings — reduce on mobile --- */ .tp-project-5-2-title { font-size: 32px !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } /* --- Span-based hamburger fallback --- */ .hamburger-btn span { display: block !important; width: 25px !important; height: 2px !important; background-color: #fff !important; margin: 5px 0 !important; border-radius: 2px !important; } /* ============================================ SERVICE / PAIN-POINT CARDS Reduce the massive mb-75 gap between items ============================================ */ .tp-service-item { margin-bottom: 32px !important; gap: 16px !important; } /* Tighten icon size so it doesn't push text down */ .tp-service-icon { flex-shrink: 0; width: 48px !important; height: 48px !important; } .tp-service-icon img, .tp-service-icon svg { width: 48px !important; height: 48px !important; object-fit: contain; } /* Service section title box — tighten on mobile */ .tp-service-title-box { margin-bottom: 24px !important; } /* Reduce heading font size in service cards */ .tp-service-title-sm { font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .tp-service-content p { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 0 !important; } .tp-service-area { padding-top: 50px !important; padding-bottom: 40px !important; } /* ============================================ STATS / COUNTER SECTION Counter JS doesn't always fire on mobile — show the data-end values as static text ============================================ */ .purecounter { /* Will be overridden by JS if it fires; fallback handled below */ } /* Make counter numbers readable even if stuck at 0 */ .tp-counter-title, .tp-funfact-title, [class*="counter"] h3, [class*="counter"] h4 { font-size: 48px !important; line-height: 1.1 !important; } [class*="counter"] p, [class*="funfact"] p { font-size: 12px !important; letter-spacing: 0.05em; } /* ============================================ FOOTER CTA — "Book Free Strategy Call" Email overflows on small screens ============================================ */ .tp-footer-5-title.footer-big-text { font-size: clamp(28px, 9vw, 48px) !important; line-height: 1.1 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .tp-footer-5-subtitle { font-size: 16px !important; } .tp-footer-5-mail { font-size: clamp(13px, 4vw, 18px) !important; word-break: break-all !important; overflow-wrap: anywhere !important; white-space: normal !important; } .tp-footer-5-info { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .tp-footer-5-content-wrap { padding: 0 !important; } /* ============================================ FOOTER NAV LINKS — wrap cleanly ============================================ */ .tp-footer-2-menu ul, .tp-footer-5-menu ul, [class*="footer"][class*="menu"] ul { display: flex !important; flex-wrap: wrap !important; gap: 10px 16px !important; padding: 0 !important; list-style: none !important; justify-content: center !important; } /* ============================================ NAVBAR — tighten the floating pill on mobile ============================================ */ #header-sticky .tp-header-3-menu-wrap { display: none !important; } .tp-header-3-social.d-none.d-sm-block { display: none !important; } #header-sticky .row.align-items-center { justify-content: space-between; } /* ============================================ SECTION HEADINGS — general font-size guard ============================================ */ h1 { font-size: clamp(36px, 11vw, 64px) !important; overflow-wrap: break-word; } h2 { font-size: clamp(28px, 9vw, 48px) !important; overflow-wrap: break-word; word-break: normal !important; } h3 { font-size: clamp(22px, 7vw, 36px) !important; overflow-wrap: break-word; word-break: normal !important; } /* Large decorative section headings (e.g. "AI Video Production Systems") */ .tp-section-title, .tp-section-title-2, [class*="section-title"] h2, [class*="section-title"] h3 { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.15 !important; } } /* ============================================ 575px and below — extra small phones ============================================ */ @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; } /* Tighter service card gap */ .tp-service-item { margin-bottom: 24px !important; } /* Footer CTA email — even smaller phones */ .tp-footer-5-title.footer-big-text { font-size: clamp(28px, 9vw, 40px) !important; } }