/* ---- Always-visible sticky navbar ---- */ header nav.navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9990 !important; background: #fff !important; box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important; padding-top: 12px !important; padding-bottom: 12px !important; } header nav .navbar-nav .nav-link, header nav .widget-text, header nav .widget-text a { color: #1a1a2e !important; } header nav .navbar-nav .nav-link:hover { color: #ff0000 !important; } body { padding-top: 80px; } .breadcrumb-nav { margin-top: 0 !important; } /* ============================================================ Action Plumbing - Mobile Optimization CSS Add this AFTER all existing stylesheets in ============================================================ */ /* ---- Sticky mobile call bar ---- */ .mobile-call-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ff0000; padding: 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); } .mobile-call-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 600; font-size: 16px; padding: 14px 20px; text-decoration: none; width: 100%; } .mobile-call-bar a i { font-size: 18px; } /* ---- Floating WhatsApp + Facebook buttons ---- */ .floating-buttons { position: fixed; right: 20px; bottom: 80px; display: flex; flex-direction: column; gap: 12px; z-index: 9998; } .whatsapp-float, .facebook-float { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform 0.2s ease; text-decoration: none; } .whatsapp-float { background: #25D366; } .facebook-float { background: #1877F2; } .whatsapp-float i, .facebook-float i { color: #fff; font-size: 22px; } .whatsapp-float:hover, .facebook-float:hover { transform: scale(1.1); } /* ---- Service cards: full width on mobile ---- */ @media (max-width: 575px) { .services-box-style-01 { max-width: 100%; } .service-requirements .col { width: 100%; padding-left: 12px; padding-right: 12px; } } /* ---- Prevent horizontal scroll ---- */ html, body { overflow-x: hidden; max-width: 100%; } /* ---- Tables: scrollable on mobile ---- */ .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 320px; } /* ---- Touch-friendly tap targets ---- */ .btn { min-height: 44px; min-width: 44px; } .nav-link { padding-top: 12px !important; padding-bottom: 12px !important; min-height: 44px; display: flex; align-items: center; } /* ---- Readable font sizes on mobile ---- */ @media (max-width: 575px) { p { font-size: 15px; line-height: 1.7; } h1 { font-size: 28px !important; line-height: 1.25 !important; letter-spacing: -0.5px !important; } h2 { font-size: 22px !important; } h3 { font-size: 19px !important; } h4 { font-size: 17px !important; } /* Hero text legibility */ .swiper-slide .fs-20 { font-size: 14px !important; } /* Number badge on about section */ .alt-font.fs-190 { font-size: 100px !important; } } /* ---- Hero section: enough height on mobile ---- */ @media (max-width: 575px) { .full-screen { min-height: 100svh; } .xs-h-600px { height: 100svh !important; } } /* ---- Contact section: stack properly on mobile ---- */ @media (max-width: 767px) { #contact-section .col-md-6:first-child { min-height: 250px; } } /* ---- FAQ accordion: touch-friendly ---- */ .accordion-title { padding-top: 16px; padding-bottom: 16px; cursor: pointer; } /* ---- Footer: readable on small screens ---- */ @media (max-width: 575px) { footer .col-lg-3, footer .col-lg-4 { margin-bottom: 24px; } footer p, footer a, footer span { font-size: 14px; } } /* ---- Body padding to account for sticky call bar on mobile ---- */ @media (max-width: 991px) { body { padding-bottom: 56px; } .mobile-call-bar { display: block; } /* Move floating buttons above the sticky bar */ .floating-buttons { bottom: 72px; } /* Scroll progress: hide on mobile to save space ---- */ .scroll-progress { display: none !important; } } /* ---- Image optimizations ---- */ img { max-width: 100%; height: auto; } .services-box-style-01 .box-image img { width: 100%; height: 180px; object-fit: cover; } /* ---- Navbar mobile: proper spacing ---- */ @media (max-width: 991px) { .navbar-collapse { background: #fff; padding: 16px 20px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); margin-top: 8px; } .navbar-collapse .nav-link { color: #1a1a1a !important; border-bottom: 1px solid #f0f0f0; } .navbar-collapse .nav-link:last-child { border-bottom: none; } } /* ---- About section image: fix on small screens ---- */ @media (max-width: 575px) { #about-section figure { margin-bottom: 80px !important; } #about-section figcaption { width: 140px !important; padding: 15px !important; } } /* ---- Features strip: 2 columns on small screens ---- */ @media (max-width: 575px) { .icon-with-text-style-08 { width: 50%; margin-bottom: 20px; } } /* ---- CTA banner text: no overflow on mobile ---- */ .fancy-text-style-4 { font-size: clamp(18px, 4vw, 32px); } /* ---- Page-level SEO pages: inner content spacing ---- */ .seo-page-content { padding: 40px 0; } @media (max-width: 575px) { .seo-page-content { padding: 24px 0; } .seo-page-content .container { padding-left: 20px; padding-right: 20px; } } /* ---- Breadcrumb navigation ---- */ .breadcrumb-nav { background: #f8f9fa; padding: 12px 0; font-size: 13px; border-bottom: 1px solid #e9ecef; } .breadcrumb-nav a { color: #ff0000; text-decoration: none; } .breadcrumb-nav a:hover { text-decoration: underline; } .breadcrumb-nav span { color: #6c757d; margin: 0 6px; } /* ---- Service page hero ---- */ .service-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); padding: 100px 0 60px; color: #fff; } @media (max-width: 575px) { .service-hero { padding: 80px 0 40px; } } /* ---- Checklist styling ---- */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid #f0f0f0; font-size: 15px; } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #ff0000; position: absolute; left: 0; top: 10px; } /* ---- CTA box ---- */ .cta-box { background: #ff0000; border-radius: 12px; padding: 32px; color: #fff; text-align: center; margin: 40px 0; } .cta-box h3 { color: #fff !important; margin-bottom: 12px; } .cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 20px; } .cta-box .btn-white { background: #fff; color: #ff0000; border: none; padding: 12px 28px; border-radius: 50px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-block; margin: 6px; transition: transform 0.2s ease; } .cta-box .btn-white:hover { transform: scale(1.03); } @media (max-width: 575px) { .cta-box { padding: 24px 16px; } .cta-box .btn-white { display: block; margin: 6px 0; } }