/* =============================================
   GLOBAL MOBILE RESPONSIVE FIXES
   Online Solutione
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
body { overflow-x: hidden !important; }
.container { padding-left: 16px !important; padding-right: 16px !important; }

/* ================================================
   MOBILE HEADER — fixed top bar
   ================================================ */
.mobile-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #08112a;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  padding: 10px 16px;
}
.mobile-header .mobile-header-elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mobile-header .mobile-logo img { height: 38px; width: auto; }
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #7a8cff;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(122, 140, 255, 0.18);
  transition: transform 0.3s ease, background 0.3s ease;
}
.mobile-call-btn:hover {
  transform: translateY(-1px);
  background: #5f6dff;
}
.mobile-header .mobile-nav-icon {
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  color: #fff;
}

@media (max-width: 991px) {
  .header-area { display: none !important; }
  body { padding-top: 60px !important; }
}
@media (min-width: 992px) {
  .mobile-header { display: none !important; }
  body { padding-top: 0 !important; }
}

/* ================================================
   SECTION SPACING — reduce on mobile
   ================================================ */
@media (max-width: 767px) {
  .sp  { padding: 50px 0 !important; }
  .sp2 { padding: 50px 0 !important; }
  .pt100 { padding-top: 40px !important; }
  .pb120 { padding-bottom: 50px !important; }
  .space60  { height: 30px !important; }
  .space70  { height: 30px !important; }
  .space80  { height: 35px !important; }
  .space90  { height: 40px !important; }
  .space100 { height: 40px !important; }
  .space120 { height: 50px !important; }
  .space55  { height: 25px !important; }
  .space50  { height: 20px !important; }
  .space45  { height: 20px !important; }
}

/* ================================================
   HERO SLIDER (index page)
   ================================================ */
@media (max-width: 991px) {
  .tp-slider-bg {
    min-height: auto !important;
    padding: 50px 0 50px !important;
  }
  .tp-slider-shape-1 { display: none !important; }
  .tp-slider-content-wrap { text-align: center; }
  .tp-slider-title-box h1 { font-size: 30px !important; line-height: 1.3 !important; }
  .tp-slider-btn { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .review-area { justify-content: center; flex-wrap: wrap; margin-top: 20px; }
}
@media (max-width: 575px) {
  .tp-slider-bg { padding: 40px 0 40px !important; }
  .tp-slider-title-box h1 { font-size: 22px !important; line-height: 1.3 !important; }
  .tp-slider-title-box span.span { font-size: 13px !important; padding: 7px 12px !important; }
  .tp-slider-btn a { width: 100%; text-align: center; justify-content: center; }
  .review-area { display: none !important; }
  .tp-slider-arrow-box button { width: 34px !important; height: 34px !important; font-size: 13px !important; }
}

/* ================================================
   COMMON HERO (inner pages)
   ================================================ */
@media (max-width: 991px) {
  .common-hero { min-height: 220px !important; padding-top: 70px !important; padding-bottom: 30px !important; }
  .common-hero .main-heading h1 { font-size: 32px !important; line-height: 1.3 !important; }
}
@media (max-width: 575px) {
  .common-hero { min-height: 180px !important; padding-top: 60px !important; padding-bottom: 24px !important; }
  .common-hero .main-heading h1 { font-size: 24px !important; }
}

/* ================================================
   HEADINGS — remove forced line breaks
   ================================================ */
@media (max-width: 767px) {
  .heading6 h2 br, .heading1 h2 br, .heading5-w h2 br,
  .heading6-w h2 br, .heading2 h2 br, .heading3 h2 br,
  .heading4 h2 br, h1 br, h2 br, h3 br { display: none !important; }
  .heading6 h2, .heading1 h2 { font-size: 24px !important; line-height: 1.35 !important; }
  .heading6-w h2 { font-size: 24px !important; line-height: 1.35 !important; }
}
@media (max-width: 575px) {
  .heading6 h2, .heading1 h2, .heading6-w h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  p  { font-size: 14px !important; line-height: 1.7 !important; }
}

/* ================================================
   ABOUT SECTION (home page)
   ================================================ */
@media (max-width: 991px) {
  .about6 .col-lg-6:first-child { margin-bottom: 30px; }
  .about6 .image { width: 100%; }
  .about6 .image img { width: 100%; border-radius: 12px; }
  .about6 .image2 { display: none !important; }
}

/* ================================================
   ABOUT PAGE — stacked images
   ================================================ */
@media (max-width: 991px) {
  .about2-images { position: relative !important; margin-bottom: 40px; }
  .about2-images .image1 { width: 100%; }
  .about2-images .image1 img { width: 100%; border-radius: 12px; }
  .about2-images .image2,
  .about2-images .image3 { display: none !important; }
  .about2-images .counter-box {
    position: static !important;
    display: inline-flex !important;
    margin-top: 16px;
    padding: 12px 20px;
  }
  .solution-images { position: relative !important; margin-bottom: 40px; }
  .solution-images .image1 img { width: 100%; border-radius: 12px; }
  .solution-images .image2,
  .solution-images .image3 { display: none !important; }
  .about-solution .images { margin-bottom: 40px; }
  .about-solution .images img { width: 100%; border-radius: 8px; }
}

/* ================================================
   ABOUT PAGE — TABS
   ================================================ */
@media (max-width: 767px) {
  .tab-header-all { flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
  .tab-header-all .nav-link { padding: 6px 12px !important; font-size: 13px !important; }
  .about-tabs .tab-content-box { margin-bottom: 20px; }
  .about-tabs .col-lg-6:last-child img { width: 100%; border-radius: 8px; }
  .about-tabs .row.align-items-center > .col-lg-6:first-child { margin-bottom: 20px; }
}

/* ================================================
   VISION ITEM BOXES
   ================================================ */
@media (max-width: 575px) {
  .item-box { gap: 12px !important; }
  .item-box .icon { flex-shrink: 0; }
  .item-box p br { display: none !important; }
}

/* ================================================
   SERVICE BOXES
   ================================================ */
@media (max-width: 767px) {
  .service-box { margin-bottom: 20px !important; }
}
@media (max-width: 575px) {
  .service-box { padding: 22px 18px !important; }
}

/* ================================================
   PROJECT SLIDER
   ================================================ */
@media (max-width: 767px) {
  .project6-slider .single-slider .image img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 10px;
  }
}

/* ================================================
   TESTIMONIAL
   ================================================ */
@media (max-width: 767px) {
  .tes6-slider .single-slider { padding: 22px 18px !important; }
  .tes6-slider .single-slider p { font-size: 13px !important; }
  .arrows-button { text-align: center; margin-top: 16px; }
  .tes2-slider .single-slider { padding: 22px 18px !important; }
  .tes6-next-arrow, .tes6-prev-arrow { width: 36px !important; height: 36px !important; }
}

/* ================================================
   TEAM
   ================================================ */
@media (max-width: 767px) {
  .team-box, .team2 .team-box { margin-bottom: 24px !important; }
  .team-box .image img,
  .team2 .team-box .image img { width: 100%; border-radius: 10px; }
}

/* ================================================
   FAQ
   ================================================ */
@media (max-width: 991px) {
  .faq6 .col-lg-6:last-child { margin-top: 30px; }
  .faq6 .faq-image img { width: 100%; border-radius: 12px; }
}
@media (max-width: 575px) {
  .accordion-button { font-size: 13px !important; padding: 12px 14px !important; }
  .accordion-body { font-size: 13px !important; padding: 12px 14px !important; }
}

/* ================================================
   CONTACT SECTIONS
   ================================================ */
@media (max-width: 991px) {
  .contact6 .col-lg-5 { margin-bottom: 36px; }
  .contact-page .col-lg-6:first-child { margin-bottom: 36px; }
}
@media (max-width: 767px) {
  .contact6-box { gap: 12px !important; }
  .contact-map-page iframe { height: 260px !important; width: 100% !important; }
  .contact-form-details .single-input input,
  .contact-form-details .single-input textarea,
  .form-area .single-input input,
  .form-area .single-input textarea {
    font-size: 14px !important;
    padding: 11px 14px !important;
    width: 100% !important;
  }
}

/* ================================================
   CTA SECTIONS
   ================================================ */
@media (max-width: 991px) {
  .cta .col-lg-7 { margin-bottom: 20px; }
  .cta .buttons { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
  .cta6 .col-lg-6:first-child { margin-bottom: 20px; }
  .cta6 .form-area form { flex-direction: column !important; gap: 10px !important; }
  .cta6 .form-area input { width: 100% !important; }
  .cta6 .form-area .button { width: 100%; }
  .cta6 .form-area .button button { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
  .cta .heading1-w h2 { font-size: 20px !important; }
  .cta-btn1, .cta-btn2 { width: 100% !important; text-align: center !important; display: block !important; }
}

/* ================================================
   BLOG
   ================================================ */
@media (max-width: 767px) {
  .blog-box { margin-bottom: 24px !important; }
  .blog-box .image img { width: 100%; border-radius: 10px; }
}

/* ================================================
   BRANDS / MARQUEE
   ================================================ */
@media (max-width: 575px) {
  .brands-area-all p { font-size: 13px !important; text-align: center; }
  .brand-single-box img { height: 28px !important; }
}

/* ================================================
   TENDER SEARCH (home.blade.php)
   ================================================ */
@media (max-width: 991px) {
  .ujks1 { flex-wrap: wrap !important; gap: 10px !important; }
  .pp5s, .pp4s, .pp3s { width: 100% !important; }
  .pp5s select, .pp4s input, .pp3s button { width: 100% !important; }
  .ujks h1 { font-size: 24px !important; }
}
@media (max-width: 575px) {
  .banner_bg { padding: 50px 0 40px !important; }
  .ujks h1 { font-size: 20px !important; }
}

/* ================================================
   AUCTION / TENDER CARDS
   ================================================ */
@media (max-width: 575px) {
  .auction-item-8 { margin-bottom: 20px !important; }
  .bid-area { flex-wrap: wrap !important; gap: 10px !important; }
}

/* ================================================
   BUTTONS
   ================================================ */
@media (max-width: 575px) {
  .theme-btn10, .theme-btn11, .theme-btn1 {
    font-size: 13px !important;
    padding: 11px 18px !important;
  }
}

/* ================================================
   FORMS — general
   ================================================ */
@media (max-width: 575px) {
  .single-input { margin-bottom: 12px !important; }
  .single-input input,
  .single-input textarea,
  .single-input select { width: 100% !important; font-size: 14px !important; }
  .check-box-area { font-size: 13px !important; }
}

/* ================================================
   PROGRESS BARS (about page)
   ================================================ */
@media (max-width: 575px) {
  .porgress-line-all { margin-top: 12px; }
  .progress-line .heading { flex-wrap: wrap; }
}

/* ================================================
   FOOTER
   ================================================ */
@media (max-width: 991px) {
  .os-footer-newsletter { padding: 24px 18px !important; }
  .os-newsletter-form { flex-direction: column !important; gap: 10px !important; }
  .os-newsletter-form input,
  .os-newsletter-form button { width: 100% !important; }
  .os-footer-bottom-links {
    justify-content: flex-start !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}
@media (max-width: 575px) {
  .os-footer .container { padding-top: 36px !important; }
  .os-footer-col { margin-bottom: 8px; }
  .os-footer-col h5 { font-size: 14px !important; margin-bottom: 14px !important; }
  .os-footer-links li a { font-size: 13px !important; }
  .os-contact-text a { font-size: 13px !important; }
  .os-footer-bottom p { font-size: 12px !important; }
  .os-footer-bottom-links li a { font-size: 12px !important; }
  .os-social-links li a { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .os-badge { font-size: 11px !important; padding: 3px 10px !important; }
  .os-footer-newsletter h4 { font-size: 18px !important; }
}

/* ================================================
   SCROLL TO TOP
   ================================================ */
@media (max-width: 575px) {
  .progress-wrap { width: 38px !important; height: 38px !important; right: 14px !important; bottom: 14px !important; }
}

/* ================================================
   ROW GAPS — prevent columns touching edges
   ================================================ */
@media (max-width: 767px) {
  .row > [class*="col-"] { margin-bottom: 0; }
  .row.mb-30-none > [class*="col-"] { margin-bottom: 24px !important; }
}

/* ================================================
   PRELOADER
   ================================================ */
@media (max-width: 575px) {
  .ctn-preloader .animation-preloader .txt-loading { font-size: 28px !important; }
}