/* ============================================ NodBot — Mobile Optimisation Stylesheet Add LAST in , after responsive.css ============================================ */ /* ─── Base mobile resets (≤767px) ─────────────────────────── */ @media only screen and (max-width: 767px) { .page-wrapper { overflow-x: hidden; } /* ── Typography ── */ h1, .page-title { font-size: 32px !important; line-height: 1.3 !important; } h2, .section-title h2 { font-size: 26px !important; line-height: 1.35 !important; } h3 { font-size: 20px !important; } h4 { font-size: 17px !important; line-height: 1.5 !important; } body { font-size: 15px; line-height: 1.7; } /* ── Container ── */ .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } /* ── Page Banner ── */ .page-banner { padding: 50px 0 40px !important; margin-top: 66px !important; text-align: center; } .page-banner .page-title { font-size: 32px !important; } .breadcrumb { font-size: 13px !important; justify-content: center; } .page-banner .dots-shape, .page-banner .tringle-shape, .page-banner .close-shape, .page-banner .banner-circle, .page-banner .dots-shape-three { display: none !important; } /* ── Hero ── */ .hero-image, .hero-image-three, .hero-main-image { display: none !important; } .hero-content, .hero-content-two, .hero-content-three { text-align: center; padding: 30px 0 20px; } .hero-content h1, .hero-content-two h1, .hero-content-three h1 { font-size: 30px !important; line-height: 1.35 !important; } .hero-content p, .hero-content-two p, .hero-content-three p { font-size: 15px !important; line-height: 1.7 !important; } .hero-about-bg { display: none !important; } .hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .hero-btns .theme-btn, .hero-btns .nodbot-btn, .hero-btns a { margin: 0 !important; width: 100%; text-align: center; } /* ── Decorative shapes ── */ .header-left-shape, .header-right-shape, .bg-yellow-shape, .section-alpha-text, .partner-dashboard { display: none !important; } /* ── About page section ── */ .about-page-section { padding-top: 40px !important; } .about-page-section .col-xl-7 { display: none !important; } .about-page-section .col-xl-5 { flex: 0 0 100% !important; max-width: 100% !important; } .about-page-content { text-align: center !important; margin-bottom: 0 !important; } .about-page-content p { font-size: 14px !important; line-height: 1.7 !important; } .about-page-content .nodbot-btn, .about-page-content .theme-btn { display: inline-block; margin-top: 16px; } /* ── Solutions ── */ .solutions-section-three { padding-top: 35px !important; padding-bottom: 25px !important; } .solution-item-two { margin-bottom: 14px !important; padding: 20px 16px !important; } .solution-item-two .number { font-size: 80px !important; } .solution-item-two h4 { font-size: 15px !important; } .solution-item-two p { font-size: 13px !important; } /* ── Counter ── */ .counter-section { margin: 0 !important; padding: 0 16px !important; } .counter-inner { padding: 20px 20px 5px !important; border-radius: 10px !important; } .counter-inner .row { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; } .counter-inner .row>[class*="col-"] { flex: 1 1 0 !important; max-width: none !important; padding: 0 6px !important; } .success-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 16px 0 !important; margin-bottom: 16px !important; } .success-item:before, .success-item:after { display: none !important; } .count-text { font-size: 28px !important; font-weight: 700 !important; margin-right: 0 !important; display: block !important; line-height: 1.2 !important; } .success-item p { font-size: 11px !important; margin: 0 !important; white-space: nowrap; } /* ── Services tab ── */ .services-section { padding-top: 110px !important; padding-bottom: 40px !important; } .services-tab .nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 0 4px 4px !important; justify-content: flex-start !important; scrollbar-width: none; margin-bottom: 24px !important; } .services-tab .nav::-webkit-scrollbar { display: none; } .services-tab .nav .nav-item { flex: 0 0 auto !important; } .services-tab .nav .nav-link { font-size: 12px !important; font-weight: 600 !important; padding: 10px 14px !important; white-space: nowrap !important; border-radius: 0 !important; } .services-image { display: none !important; } .tab-pane .col-lg-5 { flex: 0 0 100% !important; max-width: 100% !important; } .service-content { text-align: center; margin-bottom: 0 !important; padding: 0 8px !important; } .service-content h3 { font-size: 19px !important; margin-bottom: 10px !important; } .service-content p { font-size: 14px !important; line-height: 1.6 !important; } .service-content .nodbot-btn { margin-top: 18px; display: inline-block; } /* ── Newsletter ── */ .move-newsletter { display: none !important; } .newsletter-images { display: none !important; } .newsletter-content { padding: 30px 20px !important; margin: 0 !important; text-align: center; } .newsletter-content h2 { font-size: 24px !important; } .newsletter-email { flex-direction: column; gap: 10px; } .newsletter-email input { height: 50px !important; border-radius: 6px !important; } .newsletter-email button { position: relative !important; right: auto !important; top: auto !important; width: 100% !important; height: 50px !important; border-radius: 6px !important; margin-top: 8px; } /* ── Feature images ── */ .feature-images { display: none !important; } /* ── Section spacing ── */ section { padding-top: 50px !important; padding-bottom: 50px !important; } /* ── Footer ── */ .footer-section { padding-bottom: 0 !important; margin-top: 0 !important; } .footer-wave-bg { width: 220vw !important; height: 320px !important; left: 50% !important; bottom: 0 !important; translate: -50% 0 !important; } .footer-wave-bg svg { transform: scaleY(2) scaleX(1.8) !important; min-height: 200px !important; max-height: 320px !important; } .footer-inner { padding-top: 50px !important; padding-bottom: 20px !important; position: relative; z-index: 2; } .footer-section .row>[class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; } .footer-section .footer-widget { margin-bottom: 28px !important; } .footer-section .about-widget { max-width: 100% !important; } .footer-section .footer-title { font-size: 16px !important; margin-bottom: 12px !important; } .footer-section .about-widget p, .footer-section .list-style-two a, .footer-section .list-style-three li { font-size: 14px !important; line-height: 1.7 !important; } .footer-section .social-style-one { justify-content: flex-start; gap: 10px; flex-wrap: wrap; } .footer-section .social-style-one a { height: 38px !important; width: 38px !important; line-height: 38px !important; font-size: 15px !important; } .footer-section .copyright-area { padding: 16px 0 12px !important; text-align: center !important; } .footer-section .copyright-area p { font-size: 13px !important; } .footer-section .footer-logo img { max-width: 140px !important; height: auto !important; } /* ── Scroll to top ── */ .scroll-top { right: 15px !important; bottom: 15px !important; width: 38px !important; height: 38px !important; font-size: 14px !important; } } /* ─── Extra-small phones (≤480px) ─────────────────────────── */ @media only screen and (max-width: 480px) { h1, .page-title { font-size: 28px !important; } h2, .section-title h2 { font-size: 23px !important; } .nodbot-btn, .theme-btn { padding: 10px 22px !important; font-size: 14px !important; } .sub-title { font-size: 13px !important; padding: 5px 14px !important; } .footer-wave-bg { height: 260px !important; width: 260vw !important; } .footer-wave-bg svg { transform: scaleY(1.8) scaleX(2) !important; } .footer-inner { padding-top: 40px !important; } } /* ─── Tablets (768px – 991px) ─────────────────────────────── */ @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-image { display: none !important; } h1 { font-size: 40px !important; } h2, .section-title h2 { font-size: 30px !important; } .about-page-section .col-xl-7 { display: none !important; } .about-page-content { max-width: 600px; margin: 0 auto 40px; text-align: center; } .newsletter-images { display: none !important; } .newsletter-content { text-align: center; padding-left: 30px !important; padding-right: 30px !important; } .solution-item-two { margin-bottom: 20px !important; } .footer-wave-bg { height: 400px !important; width: 180vw !important; } .footer-inner { padding-top: 70px !important; } .footer-section .about-widget { max-width: 100% !important; } }