/* ================================================== */
/* COMPREHENSIVE GLOBAL MOBILE RESPONSIVENESS - ALL PAGES */
/* DNA Entertainment Project                             */
/* Applies to: max-width 992px and below                  */
/* ZERO changes to laptop/desktop view                    */
/* ================================================== */

@media only screen and (max-width: 992px) {

  /* ================================================================
     UNIVERSAL JARALLAX FIX — ALL HERO SECTIONS (every page)
     Jarallax auto-disables on mobile → image collapses out of section.
     This forces the bg image to ALWAYS cover the full hero section
     so text stays overlaid ON the image, not below it.
     Covers: Home, About, Services, Contact, News, Careers,
             Clientele, Sports, Music, Corporate, Special Events
     ================================================================ */
  section.jarallax {
    position: relative !important;
    overflow: hidden !important;
  }
  section.jarallax img.jarallax-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    z-index: 0 !important;
  }
  /* Ensure overlays and text stay above the image */
  section.jarallax .sw-overlay,
  section.jarallax .gradient-edge-top,
  section.jarallax .gradient-edge-bottom { z-index: 1 !important; }
  section.jarallax .abs { z-index: 2 !important; }

  /* ---- GLOBAL LAYOUT ---- */
  body { overflow-x: hidden !important; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pt-80 { padding-top: 40px !important; }
  .pb-80 { padding-bottom: 40px !important; }
  .pt-100 { padding-top: 50px !important; }
  .pb-100 { padding-bottom: 50px !important; }
  .p-60 { padding: 20px !important; }
  .gx-5 { --bs-gutter-x: 1rem !important; }
  .d-mobile-none { display: none !important; }

  /* ---- HERO SECTIONS (all inner pages) ---- */
  .mh-500 { min-height: 50vh !important; height: auto !important; }
  .abs.w-80.bottom-10 { position: relative !important; width: 100% !important; bottom: auto !important; padding: 30px 0 !important; }
  /* Heading size reduced to prevent overflow on mobile */
  .fs-sm-10vw { font-size: 7.5vw !important; }
  .lh-1 { line-height: 1.1 !important; }

  /* ---- HOMEPAGE HERO: Center date & location on mobile ---- */
  #section-hero .d-block.d-md-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* ---- ABOUT PAGE: 3D Fan / Sliding Cards ---- */
  .sliding-3d-wrap {
    height: 500px !important;
    perspective: 800px !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }
  /* Target only the 'About Us' story cards to avoid lightbox conflict */
  #section-story .sliding-card {
    width: 300px !important;
    height: 300px !important;
  }
  .s-card-1 { transform: translateX(-160px) translateZ(-250px) rotateY(45deg) !important; }
  .s-card-2 { transform: translateX(-110px) translateZ(-190px) rotateY(35deg) !important; }
  .s-card-3 { transform: translateX(-60px) translateZ(-130px) rotateY(25deg) !important; }
  .s-card-4 { transform: translateX(-25px) translateZ(-70px) rotateY(15deg) !important; }
  .s-card-5 { transform: translateX(0) translateZ(50px) rotateY(0deg) !important; }
  .s-card-6 { transform: translateX(25px) translateZ(-70px) rotateY(-15deg) !important; }
  .s-card-7 { transform: translateX(60px) translateZ(-130px) rotateY(-25deg) !important; }
  .s-card-8 { transform: translateX(110px) translateZ(-190px) rotateY(-35deg) !important; }

  /* ---- SERVICES PAGE: Service Cards - stack vertically ---- */
  .service-card {
    flex-direction: column !important;
    min-height: auto !important;
    padding: 0 !important;
  }
  .service-card-text {
    padding: 20px !important;
    order: 2 !important;
    flex: 1 !important;
  }
  .service-card-image {
    height: 200px !important;
    order: 1 !important;
    border-radius: 15px 15px 0 0 !important;
    width: 100% !important;
    flex: none !important;
  }
  .service-cutout { display: none !important; }

  /* ---- TICKETS PAGE ---- */
  #section-tickets .p-40 { padding: 20px !important; }
  #section-tickets h2.fs-40 { font-size: 24px !important; }
  #section-tickets .col-lg-4 { margin-top: 30px !important; }

  /* ---- CONTACT PAGE ---- */
  .bg-dark-2.rounded-1.p-60 { padding: 30px 20px !important; border-radius: 12px !important; }
  .mobile-padding-fix { padding-top: 140px !important; }
  .contact-info-card { padding: 20px !important; margin-bottom: 10px !important; }
  .contact-info-card h4 { font-size: 11px !important; }
  .card-link { font-size: 14px !important; }
  .ms-80px { margin-left: 70px !important; }
  .no-wrap-mobile { white-space: nowrap !important; }

  /* ---- GENERAL IMAGES ---- */
  img { max-width: 100% !important; height: auto !important; }
  .w-100 { width: 100% !important; }

  /* ---- SPACING HELPERS ---- */
  .spacer-single { height: 20px !important; }
  .spacer-double { height: 30px !important; }
  .mb-sm-30 { margin-bottom: 20px !important; }

  /* ---- FOOTER ---- */
  footer { padding: 40px 0 0 !important; }
  footer .container { padding-top: 40px !important; }
  footer .row.g-5 { --bs-gutter-x: 1.5rem !important; --bs-gutter-y: 1.5rem !important; }
  footer .widget { margin-bottom: 25px !important; }
  footer .widget h4 { margin-bottom: 15px !important; font-size: 16px !important; }
  footer .widget p { padding-right: 0 !important; font-size: 12px !important; }
  footer .social-icons { justify-content: center !important; margin-top: 15px !important; }
  .subfooter { text-align: center !important; padding: 20px 0 !important; }
  .subfooter .op-7 { margin-bottom: 10px !important; font-size: 11px !important; }

  /* ---- ACCORDION (FAQ on home) ---- */
  .accordion-section-title { font-size: 14px !important; padding: 12px !important; }
  .accordion-section-content { font-size: 13px !important; padding: 10px 12px !important; }

  /* ---- EVENT PAGES (sports / music / corporate / special) ---- */
  /* Hero countdown on event pages */
  .de-countdown { flex-wrap: wrap !important; gap: 8px !important; }
  .de-countdown > div { min-width: 60px !important; padding: 8px !important; }

  /* ---- MARQUEE / TEXT SCROLL ---- */
  .de-marquee-list { font-size: 28px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .de-marquee-list-1 span, .de-marquee-list-2 span { font-size: 24px !important; }
  .rot-2, .rot-min-1 { transform: none !important; margin: 0 !important; }

  /* ---- STATS SECTION ---- */
  #section-stats h3 {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.4 !important;
  }

  /* ---- ABOUT PAGE: CSR Section ---- */
  /* Shrink the big heading on mobile */
  #section-csr h2.fs-60 { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 20px !important; }
  /* Make text box padding compact and border subtle */
  #section-csr .p-4.border { padding: 16px !important; border-width: 1px !important; border-radius: 10px !important; }
  #section-csr p.fs-15 { font-size: 14px !important; line-height: 1.7 !important; }
  /* CSR cards row spacing */
  #section-csr .row.mb-5 { margin-bottom: 20px !important; }

  /* ---- ABOUT PAGE: CSR Banner heading ---- */
  .fs-80.fs-sm-40 { font-size: 32px !important; letter-spacing: 2px !important; }
  .fs-60.lh-1 { font-size: 30px !important; }

  /* ---- ABOUT PAGE: CSR HERO BANNER - Text on top of image ---- */
  /* Ensure the container stays relatively positioned so abs-centered works */
  .section-dark.p-0.overflow-hidden .container-fluid.p-0.relative {
    position: relative !important;
    display: block !important;
  }
  /* Keep the image at a good mobile height */
  .section-dark.p-0.overflow-hidden .container-fluid img.w-100 {
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    width: 100% !important;
  }
  /* Force the abs-centered overlay to sit on top of the image */
  .section-dark.p-0.overflow-hidden .abs-centered {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    width: 90% !important;
    text-align: center !important;
    pointer-events: none !important;
  }
  /* Scale down the CSR heading text to fit mobile screen */
  .section-dark.p-0.overflow-hidden .abs-centered h1 {
    font-size: 28px !important;
    letter-spacing: 2px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ---- CSR CARDS: compact spacing on mobile ---- */
  .csr-card { border-radius: 10px !important; overflow: hidden !important; }
  .csr-img-wrap { height: 160px !important; }
  .csr-img-wrap img { height: 160px !important; object-fit: cover !important; width: 100% !important; }
  .csr-content { padding: 12px 14px !important; min-height: auto !important; }
  .csr-content p { font-size: 12px !important; line-height: 1.5 !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; margin-bottom: 0 !important; }
  .csr-overlay-text { font-size: 14px !important; bottom: 10px !important; left: 10px !important; right: 10px !important; }
  
  /* 1-column layout for CSR cards on mobile */
  #section-csr .col-lg-4,
  #section-csr .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #section-csr .col-lg-6,
  #section-csr .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Section padding compact */
  #section-csr { padding: 30px 0 !important; }
  #section-csr .container { padding-left: 10px !important; padding-right: 10px !important; }
  #section-csr .row.g-4 { --bs-gutter-x: 0.6rem !important; --bs-gutter-y: 0.6rem !important; }

  /* ---- ABOUT PAGE: Our Story Section ---- */
  #section-story { padding: 40px 0 !important; overflow-x: hidden !important; }
  /* Center align text on mobile + prevent overflow */
  #section-story .story-text { 
    text-align: center !important; 
    order: 1 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #section-story .col-lg-12.text-center { text-align: center !important; }
  /* Reduce text size and tight spacing, prevent line overflow */
  #section-story p { 
    font-size: 14px !important; 
    line-height: 1.7 !important; 
    margin-top: 12px !important; 
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 !important;
  }
  /* 3D cards column below text */
  #section-story .col-lg-6:last-child { order: 2 !important; margin-top: 30px !important; }
  /* Read More button centered */
  #btn-show-more { 
    display: block !important;
    margin: 16px auto 0 auto !important; 
    padding: 8px 20px !important; 
    font-size: 13px !important;
    width: fit-content !important;
  }

  /* ================================================================
     ALL EVENT PAGES: Sports / Music / Corporate / Special Events
     (all share #section-hero-sports and .event-item-bg classes)
     ================================================================ */

  /* ---- Hero: reduce the giant fs-120 heading ---- */
  #section-hero-sports h1.fs-120 {
    font-size: clamp(32px, 9vw, 72px) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ---- Hero: shrink the description paragraph ---- */
  #section-hero-sports .fs-24 {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    padding: 0 8px !important;
  }

  /* ---- Hero: hero min-height reduced ---- */
  #section-hero-sports.mh-800 {
    min-height: 70vh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* ---- CRITICAL FIX: Jarallax disables on mobile, image collapses ----
     Force the jarallax-img to cover the full section so text stays ON the image */
  #section-hero-sports img.jarallax-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
  }

  /* ---- Hero: single dropdown button — full-width on mobile ---- */
  #section-hero-sports .dropdown-v2.d-inline-block {
    display: block !important;
    width: 90% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  #section-hero-sports .dropdown-v2 button {
    width: 100% !important;
  }

  /* ---- Hero: 3-column music filter row — stack vertically ---- */
  #section-hero-sports .row.g-0.mt-3 {
    flex-direction: column !important;
    border: none !important;
    margin-top: 12px !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #section-hero-sports .row.g-0.mt-3 .col-md-4 {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  #section-hero-sports .row.g-0.mt-3 .col-md-4:last-child {
    border-bottom: none !important;
  }

  /* ================================================================
     SCHEDULE SECTION  (#section-events)
     ================================================================ */

  /* ---- Schedule heading ---- */
  #section-events { padding-top: 40px !important; padding-bottom: 40px !important; }
  #section-events .container { margin-top: 0 !important; }
  #section-events h2.fs-48 { font-size: 26px !important; line-height: 1.2 !important; }

  /* ---- Day tab pills — horizontal scroll ---- */
  #section-events .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  #section-events .nav-pills::-webkit-scrollbar { display: none !important; }
  #section-events .nav-item { flex-shrink: 0 !important; }
  /* Reduce tab button padding on mobile */
  #section-events .nav-link.event-schedule-tab {
    padding: 8px 18px !important;
    font-size: 13px !important;
  }

  /* ---- Event item cards — stack vertically ---- */
  .event-item-bg {
    flex-direction: column !important;
    padding: 20px 16px !important;
    align-items: flex-start !important;
  }

  /* All cols inside event card go full width */
  .event-item-bg .col-lg-4,
  .event-item-bg .col-lg-5,
  .event-item-bg .col-lg-3,
  .event-item-bg .col-lg-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }

  /* Title col */
  .event-item-bg .col-lg-4:first-child,
  .event-item-bg .col-lg-5:first-child {
    padding-left: 0 !important;
  }
  .event-item-bg h3.fs-24 { font-size: 18px !important; margin-bottom: 6px !important; }
  .event-item-bg p.fs-15 { font-size: 13px !important; }

  /* Event image — full width, fixed height */
  .event-card-img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
  }

  /* Info box (time + location) */
  .event-info-box { padding-left: 0 !important; }
  .event-info-box .ps-lg-4 { padding-left: 0 !important; }
  .info-title { font-size: 14px !important; display: block !important; }
  .info-desc { font-size: 12px !important; display: block !important; }

  /* Buy Ticket button col — left aligned */
  .event-item-bg .col-lg-2:last-child {
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  /* ================================================================
     NEWSLETTER CTA SECTION (bottom of all event pages)
     ================================================================ */
  .newsletter-gradient {
    padding: 40px 20px !important;
  }
  .newsletter-gradient h2.fs-60 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
  }
  .newsletter-input { font-size: 14px !important; }

  /* ================================================================
     CAREERS PAGE: Job Cards Mobile
     ================================================================ */
  #section-opportunities { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* Job card compact padding */
  #section-opportunities .bg-dark-2.p-40 {
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  /* Job title */
  #section-opportunities h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  /* Location / type / vacancies row — wrap neatly */
  #section-opportunities .d-flex.mb-3 {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    margin-bottom: 10px !important;
  }
  #section-opportunities .d-flex.mb-3 span {
    font-size: 12px !important;
  }

  /* Description text */
  #section-opportunities p.mb-0 {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Apply button — full width on mobile */
  #section-opportunities .col-md-4 {
    text-align: left !important;
    margin-top: 16px !important;
  }
  #section-opportunities .col-md-4 .btn-main {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Card gaps */
  #section-opportunities .row.g-4 {
    --bs-gutter-y: 0.8rem !important;
  }

  /* Current Opportunities heading */
  #section-opportunities h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  #section-opportunities p.lead {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }
}

/* ---- 480px: Smallest phones ---- */
@media only screen and (max-width: 480px) {

  /* ---- GENERAL ---- */
  .container { padding-left: 12px !important; padding-right: 12px !important; }

  /* ---- ABOUT: 3D cards on smallest phones ---- */
  .sliding-3d-wrap { height: 380px !important; }
  #section-story .sliding-card { width: 250px !important; height: 250px !important; }
  .s-card-1 { transform: translateX(-130px) translateZ(-200px) rotateY(45deg) !important; }
  .s-card-2 { transform: translateX(-90px) translateZ(-160px) rotateY(35deg) !important; }
  .s-card-3 { transform: translateX(-50px) translateZ(-120px) rotateY(25deg) !important; }
  .s-card-4 { transform: translateX(-20px) translateZ(-60px) rotateY(15deg) !important; }
  .s-card-5 { transform: translateX(0) translateZ(40px) rotateY(0deg) !important; }
  .s-card-6 { transform: translateX(20px) translateZ(-60px) rotateY(-15deg) !important; }
  .s-card-7 { transform: translateX(50px) translateZ(-120px) rotateY(-25deg) !important; }
  .s-card-8 { transform: translateX(90px) translateZ(-160px) rotateY(-35deg) !important; }

  /* ---- CONTACT: address icon offset ---- */
  .mobile-padding-fix { padding-top: 120px !important; }
  .contact-info-card { flex-direction: column !important; text-align: center !important; padding: 25px 15px !important; }
  .card-icon { margin-right: 0 !important; margin-bottom: 15px !important; width: 50px !important; height: 50px !important; min-width: 50px !important; }
  .card-icon i { font-size: 22px !important; }
  .ms-80px { margin-left: 60px !important; }
  .abs.fs-28.p-3 { font-size: 18px !important; padding: 8px !important; }
  .no-wrap-mobile { font-size: 24px !important; white-space: nowrap !important; }
  #contact_form h3 { font-size: 20px !important; margin-bottom: 10px !important; }
  #contact_form p { font-size: 13px !important; line-height: 1.6 !important; }

  /* ---- HERO TEXT ---- */
  .fs-sm-10vw { font-size: 8vw !important; }

  /* ---- SERVICES ---- */
  .service-card-image { height: 160px !important; }

  /* ---- TICKETS ---- */
  #section-tickets h2.fs-40 { font-size: 20px !important; }
  #section-tickets h3 { font-size: 18px !important; }

  /* ---- MARQUEE ---- */
  .de-marquee-list { font-size: 22px !important; }

  /* ================================================================
     TEAM MODAL RESPONSIVENESS
     ================================================================ */
  /* Full-screen modal on mobile */
  .team-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .team-modal-inner {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
  }
  /* Photos: horizontal strip across top */
  .team-modal-photos {
    flex: 0 0 180px !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .team-modal-photos .photo-main { grid-row: span 1 !important; grid-column: span 1 !important; }
  .team-modal-photos.imgs-2 { grid-template-columns: 1fr 1fr !important; }
  .team-modal-photos.imgs-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  .team-modal-photos.imgs-4 { grid-template-columns: 1fr 1fr 1fr 1fr !important; }

  /* Info: scrollable area below photos */
  .team-modal-info {
    flex: 1 !important;
    padding: 20px 20px 30px !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }
  /* Close button stays top-right */
  .team-modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  .team-modal-name { font-size: 20px !important; margin-top: 8px !important; letter-spacing: 1px !important; }
  .team-modal-role { font-size: 10px !important; margin-bottom: 14px !important; }
  .team-modal-desc { font-size: 13px !important; line-height: 1.65 !important; }
  .team-modal-role { font-size: 10px !important; margin-bottom: 15px !important; }
  .team-modal-desc { font-size: 13px !important; line-height: 1.6 !important; }

  /* ================================================================
     ABOUT PAGE: MISSION & VISION OVERLAY
     ================================================================ */
  #section-hero-about { 
    height: auto !important; 
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 20px !important;
    padding-top: 0 !important;
  }
  
  #section-hero-about img:first-of-type {
    position: relative !important;
    height: 380px !important;
    width: 100% !important;
    display: block !important;
    object-position: center 20% !important;
    filter: none !important;
  }

  /* Remove absolute gradient overlay on mobile */
  #section-hero-about div[style*="background: linear-gradient"] {
    display: none !important;
  }

  .about-hero-overlay {
    position: relative !important;
    width: 100% !important;
    padding: 30px 20px !important;
    z-index: 5 !important;
  }

  #section-hero-about .col-lg-6 {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  #section-hero-about .col-lg-6:last-child {
      margin-bottom: 0 !important;
  }

  /* Simple Labels without background colors */
  #section-hero-about .row > div::before {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--primary-color) !important;
    opacity: 1;
  }

  #section-hero-about .row > div:first-child::before {
    content: "MISSION";
  }

  #section-hero-about .row > div:last-child::before {
    content: "VISION";
  }

  #section-hero-about p { 
    font-size: 17px !important; 
    line-height: 1.5 !important;
    text-align: left !important;
    padding: 0 !important;
  }

  /* ================================================================
     ABOUT PAGE: OUR STORY SECTION
     ================================================================ */
  #section-story { 
    padding: 50px 0 !important; 
  }
  
  #section-story h2 {
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
  }

  #section-story p { 
    font-size: 15px !important; 
    line-height: 1.7 !important; 
    text-align: left !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }
  
  #btn-read-more {
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* ================================================================
     HOME PAGE: FOUNDER SECTION
     ================================================================ */
  #section-founder img[src*="sign"] {
    width: 150px !important;
    right: 0 !important;
    bottom: -10px !important;
  }
  .nowrap-desktop { white-space: normal !important; }

  /* ================================================================
     CLIENTELE PAGE: FLIP CARDS
     ================================================================ */
  .flip-container {
    height: 180px !important;
    width: 50% !important;
    float: left !important;
  }
  .flip-card-front, .flip-card-back {
    padding: 20px 10px !important;
  }
  .client-label {
    top: 10px !important;
    left: 10px !important;
    font-size: 8px !important;
  }
  .colorful-logo {
    max-height: 50px !important;
  }

  /* ================================================================
     FOOTER: MOBILE ADJUSTMENTS
     ================================================================ */
  footer { padding-top: 30px !important; }
  footer .container { padding-top: 30px !important; }
  
  /* Center branding and subscribe on mobile */
  footer .col-md-6:first-child, 
  footer .col-md-6:last-child { text-align: center !important; }
  footer .col-md-6:first-child img { margin: 0 auto 15px auto !important; display: block !important; }

  /* Compact links side-by-side */
  footer .col-6 .widget { text-align: left !important; padding-left: 5px !important; margin-bottom: 10px !important; }
  footer .col-6 h4 { font-size: 14px !important; margin-bottom: 10px !important; }
  footer .col-6 ul li { font-size: 13px !important; margin-bottom: 4px !important; padding: 0 !important; }
  footer .col-6 ul li i { font-size: 6px !important; margin-right: 6px !important; }

  /* Centering subscribe on small mobile */
  footer .widget .text-start { 
      text-align: center !important; 
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }
  footer input.form-control { text-align: center !important; margin: 0 auto 8px auto !important; max-width: 240px !important; font-size: 13px !important; }
  footer .dna-new-subscribe-btn { width: fit-content !important; padding: 3px 14px !important; font-size: 9px !important; }

  footer .social-icons { justify-content: center !important; margin-top: 20px !important; }
  .subfooter { text-align: center !important; padding: 20px 0 !important; }
  .subfooter div[class*="col-"] { margin-bottom: 8px !important; }

  /* ================================================================
     HEADER & NAVIGATION: MOBILE
     ================================================================ */
  header { height: 120px !important; }
  #logo img { max-height: 105px !important; width: auto !important; }
  #menu-btn {
    top: 45px !important;
    right: 20px !important;
  }
  .menu_side_area { margin-right: 0 !important; }
  
  /* Ensure the Call Now button looks good on mobile */
  header .btn-main {
    display: none !important; /* Hide giant button on mobile header row */
  }
  
  /* Sub-menu items on mobile */
  #mainmenu ul li a { padding-left: 20px !important; font-size: 15px !important; }
  #mainmenu ul ul li a { padding-left: 40px !important; font-size: 14px !important; opacity: 0.8; }

  /* ================================================================
     UNIVERSAL JARALLAX FIX — ALL HERO SECTIONS (every page)
     Jarallax auto-disables on mobile → image collapses out of section.
     This forces the bg image to ALWAYS cover the full hero section
     so text stays overlaid ON the image, not below it.
     Covers: Home, About, Services, Contact, News, Careers,
             Clientele, Sports, Music, Corporate, Special Events
     ================================================================ */
  .jarallax {
    position: relative !important;
    overflow: hidden !important;
    min-height: 350px !important; /* Force visibility even on auto-disabled jarallax */
  }
  .jarallax img.jarallax-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Lighter overlay for Contact CTA specifically so image pops out */
  #section-contact-cta .sw-overlay { opacity: 0.4 !important; }

  /* Ensure overlays and text stay above the image */
  .jarallax .sw-overlay,
  .jarallax .gradient-edge-top,
  .jarallax .gradient-edge-bottom { z-index: 1 !important; }
  .jarallax .abs, .jarallax .container { z-index: 2 !important; position: relative !important; }

  /* ---- GLOBAL LAYOUT ---- */
  body { overflow-x: hidden !important; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pt-80 { padding-top: 40px !important; }
  .pb-80 { padding-bottom: 40px !important; }
  .pt-100 { padding-top: 50px !important; }
  .pb-100 { padding-bottom: 50px !important; }
  .p-60 { padding: 20px !important; }
  .gx-5 { --bs-gutter-x: 1rem !important; }

  /* ---- HERO SECTIONS (all inner pages) ---- */
  .mh-500 { min-height: 50vh !important; height: auto !important; }
  .abs.w-80.bottom-10 { position: relative !important; width: 100% !important; bottom: auto !important; padding: 30px 0 !important; }
  
  /* ---- GENERAL IMAGES ---- */
  img { max-width: 100% !important; height: auto !important; }
  .w-100 { width: 100% !important; }

  /* ---- FOOTER ---- */
  footer .col-lg-3,
  footer .col-lg-4,
  footer .col-lg-2 { margin-bottom: 24px !important; }
  footer .text-end { text-align: left !important; }

  /* ---- GLOBAL TYPOGRAPHY & SPACING ---- */
  /* ---- GLOBAL TYPOGRAPHY & SPACING ---- */
  h1 { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.1 !important; letter-spacing: -1px !important; }
  h2 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; }
  h3 { font-size: clamp(22px, 6vw, 28px) !important; }
  
  .fs-120 { font-size: clamp(36px, 10vw, 80px) !important; line-height: 1 !important; }
  .fs-96 { font-size: clamp(32px, 9vw, 70px) !important; }
  .fs-80 { font-size: clamp(28px, 8vw, 60px) !important; }
  .fs-72 { font-size: clamp(26px, 7vw, 50px) !important; }
  .fs-60 { font-size: clamp(24px, 6vw, 40px) !important; }
  .fs-48 { font-size: 24px !important; }
  .fs-40 { font-size: 22px !important; }
  .fs-24 { font-size: 16px !important; line-height: 1.5 !important; }
  .fs-20 { font-size: 14px !important; }
  .lead { font-size: 14px !important; line-height: 1.6 !important; }

  #section-stats h3 {
    font-size: clamp(16px, 5vw, 20px) !important;
    line-height: 1.4 !important;
  }
  
  .container { width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
  .row { margin-left: -10px !important; margin-right: -10px !important; }
  .col-lg-6, .col-md-6, .col-sm-6 { padding-left: 10px !important; padding-right: 10px !important; }

  /* ---- GLOBAL BUTTONS ---- */
  .btn-main, .btn-line, .btn-custom {
    padding: 10px 20px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    min-width: 140px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* ================================================================
     HOME PAGE: HERO SECTION
     ================================================================ */
  /* Matching reference image: bottom-left aligned */
  #section-hero .abs {
    width: 100% !important;
    bottom: 40px !important;
    left: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important;
  }
  #section-hero h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1.1 !important;
    padding-left: 10px !important;
    text-align: left !important;
    padding-top: 520px;
  }

  /* ================================================================
     HOME PAGE: FEATURED EVENTS SECTION
     ================================================================ */
  #section-why-attend { 
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  #section-why-attend h2 { 
    font-weight: 900 !important; 
    font-size: clamp(28px, 8vw, 36px) !important; 
    letter-spacing: -1px !important;
    margin-bottom: 15px !important;
    line-height: 1 !important;
  }
  #section-why-attend p.lead { 
    font-size: 14px !important;
    margin-bottom: 30px !important;
    opacity: 0.8 !important;
  }
  #section-why-attend .spacer-single { display: none !important; }
  
  #section-why-attend .event-item-bg { 
    height: 240px !important; 
    border-radius: 8px !important;
    margin-bottom: 15px !important;
  }
  #section-why-attend .event-item-bg h3 { 
    font-size: 18px !important; 
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important;
  }

  /* ================================================================
     HOME PAGE: WHO WE WORK WITH SECTION
     (Alignment kept for partners as requested in step 309)
     ================================================================ */
  #section-who-we-work-with {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    text-align: center !important;
  }
  #section-who-we-work-with .subtitle {
    text-align: center !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
  }
  #section-who-we-work-with h2 {
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 15px !important;
  }
  #section-who-we-work-with p {
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
  }
  #section-who-we-work-with .client-home-grid {
    margin-top: 25px !important;
    border: none !important;
  }
  #section-who-we-work-with .flip-container-home {
    width: 33.3333% !important;
    height: 150px !important;
    border: none !important;
    padding: 0 !important;
  }
  #section-who-we-work-with .flip-container-home:nth-child(n+7) {
    display: none !important;
  }

  /* ================================================================
     HOME PAGE: FOUNDER SECTION
     ================================================================ */
  #section-founder {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #section-founder h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.3 !important;
    margin-bottom: 25px !important;
    font-weight: 700 !important;
  }
  #section-founder h5 {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
  #section-founder p.fs-18 {
    font-size: 14px !important;
    line-height: 1.7 !important;
    opacity: 0.8 !important;
  }
  #section-founder .col-md-4 {
    margin-bottom: 40px !important;
  }
  #section-founder img[src*="sign"] {
    width: 140px !important;
    right: 0 !important;
    bottom: -15px !important;
  }

  /* ---- CONTACT & NEWS BUTTONS ---- */
  #section-contact-cta .btn-main {
    min-width: 180px !important;
    padding: 12px 20px !important;
  }
  
  #section-news .btn-main {
    min-width: 150px !important;
    padding: 10px 20px !important;
  }
}

/* Specific fix for Clientele Row on mobile */
@media only screen and (max-width: 992px) {
    .client-grid-wrapper .row { display: block !important; }
    .client-grid-wrapper::after { content: ""; display: table; clear: both; }
}

@media only screen and (max-width: 576px) {
    .sliding-3d-wrap { padding-left: 0 !important; height: 180px !important; }
}

/* Service Popup Mobile Refinement */
@media only screen and (max-width: 768px) {
  .service-popup-content { width: 100% !important; max-width: 100% !important; }
  .popup-header-image { height: 250px !important; }
  .popup-text-content { padding: 25px !important; }
  .popup-title { font-size: 24px !important; }
  .service-popup-close-btn { top: 15px !important; right: 15px !important; width: 40px !important; height: 40px !important; font-size: 20px !important; }
}