/* =============================================
   MOBILE RESPONSIVE — Star Events
   Breakpoints:
     lg : 992px  (tablet landscape)
     md : 768px  (tablet portrait)
     sm : 576px  (large phones)
     xs : 480px  (small phones)
   ============================================= */


/* ────────────────────────────────────────────
   1. PERFORMANCE — remove parallax on mobile
   (background-attachment:fixed kills perf)
   ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .bg.fixed,
  [style*="background-attachment: fixed"],
  [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }
}


/* ────────────────────────────────────────────
   2 & 3. TOPBAR + NAVIGATION
   Fully handled in modern-header.css
   ──────────────────────────────────────────── */


/* ────────────────────────────────────────────
   4. HERO / REVOLUTION SLIDER
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* RS6 handles its own scaling — just ensure no overflow */
  .new-slider-v6,
  #rev_slider_2_1_wrapper {
    overflow: hidden !important;
  }

  /* Inner page hero banner */
  .inner-intro {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  .inner-intro .section-title .title,
  .inner-intro h1.title,
  .inner-intro h2.title {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  .inner-intro {
    padding-top: 90px !important;
    padding-bottom: 30px !important;
  }
  .inner-intro .section-title .title {
    font-size: 22px !important;
  }
}


/* ────────────────────────────────────────────
   5. GENERAL SECTION SPACING
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-section-ptb { padding: 35px 0 !important; }
  .section-title { margin-bottom: 25px !important; }
  .section-title h2.title { font-size: 24px !important; }
  .section-title h4.title { font-size: 16px !important; }
  .section-title p { font-size: 15px !important; }
}

@media (max-width: 480px) {
  .section-title h2.title { font-size: 21px !important; }
}


/* ────────────────────────────────────────────
   6. WHAT WE DO — service cards
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .what-we-do-section .col-md-3 {
    margin-bottom: 15px;
  }
  .what-we-do-section .feature-box .post-title {
    min-height: auto !important;
  }
}


/* ────────────────────────────────────────────
   7. DARK INTRO SECTION ("Bringing Your Vision")
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-section-ptb.dark-bg .section-title h2.title {
    font-size: 22px !important;
  }
  .page-section-ptb.dark-bg p {
    font-size: 15px !important;
  }
}


/* ────────────────────────────────────────────
   8. STATS SECTION
   ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .stats-section { padding: 35px 0; }
  .stats-section .stat-item { padding: 15px 5px; }
  .stats-section .stat-number { font-size: 38px !important; }
  .stats-section .stat-suffix { font-size: 28px !important; }
  .stats-section .stat-label { font-size: 12px !important; letter-spacing: 1px; }
}


/* ────────────────────────────────────────────
   9. RECENT EVENTS CAROUSEL
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .recent-events-carousel-wrap { padding: 0 40px !important; }

  /* Shrink nav arrows for mobile */
  .recent-events-carousel .owl-nav button,
  .recent-events-carousel .owl-prev,
  .recent-events-carousel .owl-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    line-height: 32px !important;
  }

  .recent-events-carousel .post-image { height: 200px !important; }
}

@media (max-width: 480px) {
  .recent-events-carousel-wrap { padding: 0 35px !important; }
}


/* ────────────────────────────────────────────
   10. GLOBAL PRESENCE SECTION
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .counter-section .col-md-4 { margin-bottom: 30px !important; }
  .counter-section .col-md-4:last-child { margin-bottom: 0 !important; }
  .counter-section .fa { font-size: 36px !important; }
  .counter-section h4.title { font-size: 18px !important; }
  .counter-section p { font-size: 14px !important; }
}


/* ────────────────────────────────────────────
   11. TESTIMONIALS
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .testimonials-section { padding: 40px 0; }
  .testimonial-card { margin-bottom: 20px; }
  .testimonial-card p { font-size: 14px !important; }
}


/* ────────────────────────────────────────────
   12. OUR CLIENTS / LOGO GRID
   ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .our-clients .item img { max-height: 50px; }
}


/* ────────────────────────────────────────────
   13. PROCESS STEPS (homepage)
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide the → arrows between steps */
  .process-step::after { display: none !important; }
  .process-step { margin-bottom: 25px; }
}


/* ────────────────────────────────────────────
   14. PROJECT / CATEGORY CTA SECTION
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .project-cta-section { padding: 40px 20px !important; }
  .project-cta-section h3 { font-size: 22px !important; }
  .project-cta-section p { font-size: 14px !important; }
  .project-cta-section .cta-btn-primary,
  .project-cta-section .cta-btn-secondary {
    display: block !important;
    margin: 0 0 12px !important;
    text-align: center !important;
    width: 100%;
    max-width: 280px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Inline CTA on projects.html */
@media (max-width: 767px) {
  section[style*="padding: 60px 0"] .col-md-8,
  section[style*="padding: 60px 0"] .col-md-4 {
    text-align: center !important;
  }
  section[style*="padding: 60px 0"] .col-md-4 {
    margin-top: 20px;
  }
}


/* ────────────────────────────────────────────
   15. CONTACT PAGE — two-column → single column
   ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .contact-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .contact-panel {
    padding: 50px 40px !important;
  }

  .contact-form-panel {
    padding: 50px 40px !important;
  }
}

@media (max-width: 575px) {
  .contact-panel {
    padding: 35px 20px !important;
  }

  .contact-form-panel {
    padding: 35px 20px !important;
  }

  /* Stack the two-column form row */
  .cf-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Shrink panel social icons */
  .panel-social { margin-top: 25px; }
  .panel-social a { width: 32px !important; height: 32px !important; font-size: 13px !important; }

  /* Contact map */
  .contact-map-section iframe { height: 280px !important; }
}


/* ────────────────────────────────────────────
   16. ABOUT PAGE
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Timeline */
  .timeline-item { flex-wrap: wrap; }
  .timeline-year { min-width: 70px; font-size: 18px; }
  .timeline-dot { margin: 5px 12px 0; }

  /* Value cards */
  .value-card { margin-bottom: 20px; }
}


/* ────────────────────────────────────────────
   17. GALLERY / PROJECT PAGES
   ──────────────────────────────────────────── */
@media (max-width: 575px) {
  /* Make 3-col grids 2-col on small phones */
  .isotope-item.col-md-4 {
    width: 50% !important;
  }
}


/* ────────────────────────────────────────────
   18. FOOTER
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  #footer .widget { margin-bottom: 30px; }
  #footer .widget-title { font-size: 16px; }
  #footer .col-md-3,
  #footer .col-md-4 { margin-bottom: 25px; }
}


/* ────────────────────────────────────────────
   19. INDUSTRIES WE SERVE (clients page)
   ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .industry-card { margin-bottom: 15px !important; }
  .industry-icon { font-size: 28px !important; }
}


/* ────────────────────────────────────────────
   20. GLOBAL BUTTON + LINK TOUCH TARGETS
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .button,
  a.button,
  .cf-submit,
  .submit-btn,
  .footer-contact-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ────────────────────────────────────────────
   21. OVERFLOW / HORIZONTAL SCROLL FIX
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  body { overflow-x: hidden !important; }
  .container { padding-left: 15px !important; padding-right: 15px !important; }
  img { max-width: 100% !important; }

  /* Fix any elements that may overflow */
  .row { margin-left: -10px !important; margin-right: -10px !important; }
  .row > [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; }
}


/* ────────────────────────────────────────────
   22. INNER PAGE — PAGE TITLE BANNER SPACING
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Add top padding so content isn't behind fixed header */
  .page-section-ptb:first-of-type {
    padding-top: 100px !important;
  }
}


/* ────────────────────────────────────────────
   23. VIDEO ELEMENTS — mobile fit
   ──────────────────────────────────────────── */
@media (max-width: 767px) {
  video,
  iframe {
    max-width: 100% !important;
  }
}