/* =============================================================
   SCS Commercial Solutions — Mobile Responsive Styles
   ============================================================= */

/* 1. Global
-------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

.page-wrapper { overflow-x: hidden; }

/* 2. Header
-------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .main-header .logo img,
  .sticky-header .logo img {
    max-height: 46px;
    width: auto;
  }
}

@media (max-width: 575.98px) {
  .header-style-one .inner-container {
    padding: 8px 0;
  }

  .main-header .logo img,
  .sticky-header .logo img {
    max-height: 40px;
  }

  /* Reduce hamburger gap */
  .mobile-nav-toggler {
    margin-left: 12px;
    font-size: 24px;
  }
}

/* 3. Banner
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Hide swiper nav arrows on tiny screens */
  .banner-section .swiper-button-next,
  .banner-section .swiper-button-prev {
    display: none;
  }

  .banner-section .bottom-box .text {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .banner-section .bg-shape,
  .banner-section .bg-shape3 {
    display: none;
  }
}

/* 4. Section padding — small mobile
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .service-section .outer-box {
    padding: 50px 0 40px;
    border-radius: 20px;
  }

  .why-choose-us-section .outer-box {
    padding: 50px 15px;
    border-radius: 20px;
  }

  .work-section .inner-container {
    padding: 50px 0;
    border-radius: 20px;
  }

  .projects-section {
    padding: 50px 0;
  }

  .faqs-section {
    padding: 50px 0;
  }

  .testimonial-section .outer-box {
    padding: 50px 0 30px;
    border-radius: 20px;
  }

  /* Reduce heavy mb-50 margin on section titles */
  .sec-title.mb-50,
  .sec-title.black.mb-50 {
    margin-bottom: 25px !important;
  }
}

/* 5. Service Section
-------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .service-section .features-list li {
    font-size: 16px;
    gap: 8px;
  }
}

@media (max-width: 575.98px) {
  .service-block .inner-block .text {
    max-width: 100%;
  }
}

/* 6. Why Choose Us
-------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .why-choose-us-section .image-column .inner-column {
    height: 420px;
  }
}

@media (max-width: 767.98px) {
  .why-choose-us-section .image-column .inner-column {
    height: 320px;
    margin-top: 20px;
  }

  .why-choose-us-section .image-column .bottom-box .text2 {
    font-size: 16px;
    line-height: 1.4;
  }

  .service-block-two .inner-block {
    padding: 40px 25px;
    border-radius: 20px;
  }
}

@media (max-width: 575.98px) {
  .why-choose-us-section .image-column .inner-column {
    height: 260px;
  }

  .service-block-two .inner-block {
    padding: 30px 20px;
  }
}

/* 7. Projects Section
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .projects-block .content-box .inner-box {
    padding: 16px;
  }

  /* Trim description text to 2 lines */
  .projects-block .content-box .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
  }
}

/* 8. Work Section
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .work-section .outer-box {
    border: none;
    padding: 30px 20px 80px;
  }

  .work-section .bottom-box .images {
    display: none;
  }
}

/* 9. FAQ Section
-------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .faqs-box .inner-box {
    margin-right: 0;
    margin-bottom: 30px;
  }
}

/* 10. CTA + Contact: fix overlap on mobile
-------------------------------------------------------------- */
/* The CTA section uses margin-bottom:-226px to overlap the contact section.
   On mobile we disable this so the sections stack normally. */
@media (max-width: 767.98px) {
  .cta-section .outer-box {
    margin-bottom: 0;
  }

  .cta-section {
    margin-bottom: 0;
  }
}

/* Contact section — reduce the oversized top-padding and hide decorative images */
@media (max-width: 767.98px) {
  .contact-section .inner-container {
    padding: 60px 0 60px;
    border-radius: 20px;
  }

  /* Hide decorative offer boxes; keep only the form */
  .contact-section .offer-column {
    display: none;
  }

  /* Make form column full width */
  .contact-section .form-column {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .contact-section .inner-container {
    padding: 50px 0 40px;
  }

  .contact-section .form-column .inner-column {
    border-radius: 20px;
  }
}

/* 11. Footer
-------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .main-footer {
    padding-top: 60px;
  }

  .footer-style-one .widgets-section {
    padding: 40px 0 0;
  }

  /* Remove absolute positioning from footer link button */
  .footer-style-one .footer-link-btn {
    position: static;
    display: block;
    margin-bottom: 20px;
  }
}

@media (max-width: 767.98px) {
  .footer-style-one .widget-contact {
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .footer-style-one .footer-outer {
    padding: 40px 0 30px;
    margin-top: 0;
  }

  /* Hide decorative border overlay */
  .footer-style-one .footer-outer:before {
    display: none;
  }

  .footer-style-one .footer-widget {
    margin-bottom: 25px;
  }
}

@media (max-width: 575.98px) {
  .footer-style-one .footer-bottom .inner-container {
    gap: 12px;
    text-align: center;
  }

  .footer-style-one .social-icon-list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .footer-style-one .social-icon-list li a {
    font-size: 13px;
  }

  .footer-style-one .widget-contact .contact-info a span {
    white-space: normal;
  }
}

/* 12. Testimonial / Funfact
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .testimonial-section .funfact-area .funfact-block .inner-box {
    padding: 30px 10px;
  }

  .funfact-block .inner-box .count-box {
    font-size: 38px;
  }

  .funfact-block .inner-box .count-title {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* 13. Marquee Section
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .marquee-section .text {
    font-size: 18px;
  }
}

/* 14. Buttons
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .btn-style-three.theme-btn {
    padding: 12px 20px;
    gap: 8px;
  }

  .btn-style-three.theme-btn .btn-main {
    font-size: 14px;
  }
}

/* 15. Swiper / Slider
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .banner-section .swiper-pagination {
    bottom: 10px;
  }
}

/* 16. Preloader
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .preloader {
    display: none;
  }
}

/* 17. Inner pages — Page Title Banner
-------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-title {
    min-height: 220px;
  }
}

@media (max-width: 575.98px) {
  .page-title {
    min-height: 180px;
  }

  .page-title .title {
    font-size: 28px;
  }
}

/* 18. Contact page details section
-------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .contact-details .container {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

/* 19. About / Service pages — general section spacing
-------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Ensure all sections with pt-110/pb-70 classes scale down */
  .pt-110 { padding-top: 60px !important; }
  .pb-70  { padding-bottom: 40px !important; }
  .pt-120 { padding-top: 60px !important; }
  .pb-120 { padding-bottom: 60px !important; }

  /* Auto-container horizontal padding on very small phones */
  .auto-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* 20. Horizontal scroll prevention — catch-all
-------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 767.98px) {
  /* Sections that use max-width containers can overflow */
  .service-section .outer-box,
  .why-choose-us-section .outer-box,
  .work-section .inner-container,
  .testimonial-section .outer-box,
  .contact-section .inner-container {
    width: 100%;
    overflow-x: hidden;
  }
}