/* ========================================================================== KB Solutions — Mobile Content Layer (theme pages that extend layouts.master) Loaded with media="(max-width: 991px)" after mobile-app.css. Re-flows the desktop theme into a clean, card-based, thumb-friendly layout without touching any desktop CSS. Standalone landing pages do NOT load this. ========================================================================== */ @media (max-width: 991px) { html { scroll-behavior: smooth; } /* The theme's html{height:100%} + overflow-x:hidden on body turned into the scroll container (window never scrolled). Restore normal document scrolling; clip x-overflow without creating a scroll container. */ html { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; max-width: none !important; } body { height: auto !important; min-height: 100vh; overflow: visible !important; overflow-x: clip !important; max-width: none !important; } /* WOW.js entrance animations (rotateIn/slideIn…) fling blocks off-screen on phones — disable */ .wow, .wow.animated, .animated { animation: none !important; -webkit-animation: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } /* ---------- 4. Content layer — generic ---------- */ .outer_layout, .inner_layout, .body_container_main, .body-container, .home_main { min-width: 0 !important; width: 100% !important; } .container, .container-fluid { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin: 0 auto !important; } .container .container { padding-left: 0 !important; padding-right: 0 !important; } .pricing-sec-new .container, section .container, .body-container .container { padding: 0 16px !important; width: 100% !important; } section.pricing-sec-new { display: block !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .pricing-sec-new .index_newservicesInner p { padding: 0 !important; margin: 0 0 20px !important; } .row { margin-left: -8px !important; margin-right: -8px !important; } [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; min-height: 0 !important; } img, svg, video, iframe, embed, object { max-width: 100% !important; } img { height: auto; } iframe { border: 0; } section { min-width: 0 !important; } /* Typography — one consistent UI typeface on mobile (icon fonts excluded) */ body, .body_container_main *:not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon):not([class*="icon-"]):not([class*="-icon"]):not(svg):not(path), section.footer_main *:not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon) { font-family: var(--kbm-font) !important; } p { font-size: 15.5px !important; line-height: 1.65 !important; color: var(--kbm-text); } h1, .h1 { font-size: 27px !important; line-height: 1.22 !important; letter-spacing: -.3px; font-family: var(--kbm-font) !important; font-weight: 700; } h2, .h2 { font-size: 23px !important; line-height: 1.25 !important; letter-spacing: -.2px; font-family: var(--kbm-font) !important; font-weight: 700; } h3, .h3 { font-size: 19px !important; line-height: 1.3 !important; font-family: var(--kbm-font) !important; font-weight: 600; } h4, .h4 { font-size: 16.5px !important; line-height: 1.35 !important; font-family: var(--kbm-font) !important; font-weight: 600; } h5, .h5, h6, .h6 { font-size: 14.5px !important; line-height: 1.4 !important; font-family: var(--kbm-font) !important; } h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; } h1 br, h2 br, h3 br, p br.desktop-only { display: none; } ul, ol { padding-left: 20px; } ul li, ol li { line-height: 1.55; } a { -webkit-tap-highlight-color: transparent; } /* Theme compensates for its fixed desktop header with top margins/paddings — remove them */ .body_container_main > section, .body_container_main > div, .body_container_main > section > section:first-child, .contact_outer, .team-pg, .team_banner_outr, .m-topmove, .mobile-apps-heading.m-topmove { margin-top: 0 !important; } .contact_outer { padding-top: 0 !important; } .body_container_main { padding-top: 0 !important; } /* Page-top banner carousels (wide strip images) become a rounded card */ .body_container_main .carousel.slide { margin: 12px 0 0 !important; padding: 0 !important; border-radius: var(--kbm-radius-sm); overflow: hidden; } .body_container_main .carousel.slide .carousel-control { display: none !important; } /* The theme uses bare
tags between blocks for spacing — drop those (text-level
untouched) */ .body_container_main section > br, .body_container_main .container > br, .body_container_main .row > br, .body_container_main [class*="col-"] > br, .body_container_main .mobile-apps-heading br, .body_container_main h1 + br, .body_container_main h2 + br, .body_container_main p + br { display: none !important; } /* Sections — compact, consistent vertical rhythm */ section[class*="_outer"], section[class*="-sec"], section[class*="_sec"], section[class*="-section"], section[class*="_section"], section.mobile-apps-info, section.mobile-apps-heading, section.pricing-sec-new, section.digital-marketing, section.healthcare-pg, section.pt-5, .pt-5, .pb-5 { padding-top: 32px !important; padding-bottom: 32px !important; } .mt-5, .mb-5 { margin-top: 24px !important; margin-bottom: 24px !important; } section.breadcrumb-sec, .breadcrumb-sec { padding: 8px 0 !important; } section.mobile-apps-heading, section.mob-heading { padding-top: 16px !important; padding-bottom: 20px !important; } .mobile-apps-heading h1, .mob-heading h1 { margin: 8px 0 12px !important; } .mobile-apps-heading h2, .mobile-apps-heading span.subheading, .mob-heading h2 { padding: 0 !important; margin: 0 0 14px !important; display: block; } /* Breadcrumbs — horizontal scroll strip (theme positions them absolutely over banners) */ .breadcrumb-sec, section.breadcrumb-sec { position: static !important; top: auto !important; left: auto !important; width: 100% !important; background: transparent !important; } .breadcrumb-sec .breadcrumb, .breadcrumb, .breadcrumb_sec ul, ul.breadcrumb { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap; gap: 2px; padding: 8px 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; scrollbar-width: none; font-size: 12.5px !important; } .breadcrumb::-webkit-scrollbar { display: none; } .breadcrumb li, .breadcrumb > li { float: none !important; display: inline-block !important; flex: none; } /* Buttons — thumb-sized, rounded */ .btn, a.btn, button.btn, input[type="submit"], button[type="submit"], .index_contactIcon, .index_bannerLinks a, a.read-btn, a.expert-btn, .btn-primary, .btn-default, .btn-lg, .btn-sm, .submit_btn, .contact_btn, .kbx-btn, .kbx-btn-pill, .hero-btn, .cta-btn, .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; min-height: 48px !important; padding: 12px 22px !important; border-radius: 14px !important; font-family: var(--kbm-font) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: normal !important; text-align: center !important; box-sizing: border-box !important; max-width: 100%; -webkit-appearance: none; appearance: none; transition: transform .12s ease, opacity .12s ease; } .btn:active, a.btn:active, .index_contactIcon:active, input[type="submit"]:active, button[type="submit"]:active { transform: scale(.98); } form .btn, form input[type="submit"], form button[type="submit"], .submit_btn { width: 100% !important; } .btn + .btn, .index_bannerLinks a + a { margin-left: 0 !important; margin-top: 10px !important; } .index_bannerLinks { display: flex; flex-direction: column; gap: 10px; } .index_bannerLinks a { width: 100% !important; } /* Forms — native app feel */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], input[type="search"], input[type="date"], select, textarea, .form-control { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; border: 1.5px solid #dfe4ec !important; border-radius: var(--kbm-radius-sm) !important; background: #fff !important; color: var(--kbm-ink-2) !important; font-family: var(--kbm-font) !important; font-size: 16px !important; /* 16px stops iOS zoom */ line-height: 1.4 !important; box-shadow: none !important; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } textarea, textarea.form-control { min-height: 130px !important; resize: vertical; } select { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 40px !important; } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--kbm-accent) !important; box-shadow: 0 0 0 4px rgba(41, 171, 226, .15) !important; } input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; width: 20px !important; height: 20px !important; min-height: 0 !important; margin-right: 8px; vertical-align: middle; } label { font-family: var(--kbm-font); font-size: 14px; font-weight: 600; color: var(--kbm-ink-2); margin-bottom: 6px; display: block; } .form-group { margin-bottom: 16px !important; } .g-recaptcha { transform: scale(.92); transform-origin: 0 0; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: #9aa4b2 !important; } /* Tables — scroll inside their own wrapper (wrapper added by mobile-app.js) */ .kbm-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 0 -16px 16px; padding: 0 16px; } .kbm-table-scroll > table { min-width: 560px; margin-bottom: 0 !important; } table { font-size: 14px !important; } table th, table td { padding: 10px 12px !important; white-space: nowrap; } /* Cards: common card-like blocks get a soft app-card look */ .package-plan, .kbx-card, .kbx-scard, .kbx-qcard, .card, .service-box, .services-box, .feature-box, .process-box, .price-box, .pricing-box, .ourecommerce_inner li, .other_recommendedS li, .facts_stats_AA li, .home-facts-info, .key-fact, .testimonial-box, .team-box, .team_member, .contact_form, .contact-form, .form-box { border-radius: var(--kbm-radius) !important; } .package-plan { background: #fff !important; box-shadow: 0 10px 30px -18px rgba(13, 31, 60, .35) !important; padding: 24px 20px !important; margin: 0 0 16px !important; width: 100% !important; border: 1px solid var(--kbm-line) !important; } .package-plan h3 { margin: 8px 0 4px !important; } .package-plan .price { font-size: 32px !important; margin: 6px 0 10px !important; } .package-plan ul { padding-left: 0 !important; list-style: none !important; margin: 0 0 16px !important; } .package-plan ul li { padding: 8px 0 8px 26px !important; position: relative; font-size: 14.5px !important; border-bottom: 1px solid #f0f3f7; } .package-plan ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: #e6f7ee url("data:image/svg+xml;utf8,") center/10px no-repeat; } .package-plan .btn, .package-plan a.btn, .package-plan .expert-btn { width: 100% !important; margin: 6px 0 0 !important; } .package-plan-background { padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .package-plan-background::before { display: none !important; } .package-plan-background .row > [class*="col-"] { width: 100% !important; float: none !important; } .package-plan { background-image: none !important; display: flex; flex-direction: column; } .package-plan ul { height: auto !important; max-height: none !important; overflow: visible !important; padding-right: 0 !important; } .package-plan ul li::before { content: ''; } .package-plan .read-btn { float: none !important; order: 10; } .package-plan .expert-btn { position: static !important; transform: none !important; order: 11; box-shadow: none !important; border: 1.5px solid var(--kbm-line) !important; } .package-plan > a:first-child { display: block; margin-bottom: 4px; } .package-plan .fa-comments { font-size: 36px !important; } /* Home hero */ .index_newBanner { min-height: 0 !important; height: auto !important; padding: 36px 0 32px !important; background-position: center top !important; } .index_newBannerInner h1 { font-size: 26px !important; text-transform: none !important; } .index_newBannerInner p { font-size: 15px !important; color: rgba(255, 255, 255, .85) !important; margin: 14px 0 !important; } .index_iconSec { display: none !important; } .index_newBannerInner ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 0 !important; margin: 18px 0 !important; list-style: none; } .index_newBannerInner ul li { width: auto !important; float: none !important; margin: 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; text-align: left !important; min-height: 40px; display: flex !important; align-items: center; color: #fff !important; text-transform: none !important; } .index_newbrandsInner ul { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px 18px; padding: 0 !important; margin: 0 !important; list-style: none; } .index_newbrandsInner ul li { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .index_newbrandsInner ul li img { max-height: 44px !important; width: auto !important; } .index_newbrands { padding: 20px 0 !important; } .index_newservicesInner h2 { text-transform: none !important; } /* Inner page hero banners */ .banner_mobile_sec, .banner-sec, .mob-heading, .mobile-apps-heading, .hero, .tk-hero-area, .contact_outer .banner { min-height: 0 !important; height: auto !important; padding: 36px 0 !important; background-size: cover !important; background-position: center !important; } .banner_mobile_sec h1, .banner-sec h1, .mobile-apps-heading h1, .mob-heading h1 { margin: 0 0 12px !important; } .banner_mobile_sec p, .banner-sec p, .mobile-apps-heading p, .mob-heading p { margin: 0 0 16px !important; } /* Grids of list items (services/technologies "ourecommerce_outer" family) */ .ourecommerce_inner ul, .other_recommendedS ul, .facts_stats_AA ul, .our_phpVert ul, .sucess_Asec ul, .WP_sucessfail ul, .ecommerceProcess_outr ul { display: grid !important; grid-template-columns: 1fr; gap: 12px; padding: 0 !important; margin: 0 !important; list-style: none; } .ourecommerce_inner ul li, .other_recommendedS ul li, .facts_stats_AA ul li, .our_phpVert ul li, .sucess_Asec ul li, .WP_sucessfail ul li, .ecommerceProcess_outr ul li { width: 100% !important; float: none !important; margin: 0 !important; min-height: 0 !important; height: auto !important; background-color: #fff !important; padding: 18px !important; border: 1px solid var(--kbm-line) !important; box-shadow: 0 8px 24px -18px rgba(13, 31, 60, .35); } .facts_stats_AA ul { grid-template-columns: 1fr 1fr; } .facts_stats_AA ul li { text-align: center; } /* Counters / key facts (home) */ .our-business-fact .key-facts, .key-facts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; } .key-fact { width: 100% !important; float: none !important; margin: 0 !important; background: #fff; padding: 18px 12px !important; text-align: center; border: 1px solid var(--kbm-line); } .home-facts-info { padding: 14px !important; } .col-xs-6.text-center { margin-bottom: 12px; } /* kbx (home) design-system blocks */ .kbx-wrap { padding-left: 0 !important; padding-right: 0 !important; } .kbx-grid2, .kbx-faq-grid, .kbx-steps, .kbx-stats { grid-template-columns: 1fr !important; display: grid !important; gap: 12px !important; } .kbx-stats { grid-template-columns: 1fr 1fr !important; } .kbx-sec { padding: 36px 0 !important; } .kbx-h2 { font-size: 24px !important; } .kbx-card, .kbx-scard, .kbx-qcard, .kbx-step, .kbx-faq { margin-bottom: 0 !important; } /* Sliders / carousels */ .bx-wrapper, .bx-viewport, .owl-carousel { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .bx-wrapper .bx-controls-direction a { width: 40px !important; height: 40px !important; } .bx-wrapper .bx-pager { padding-top: 12px !important; } /* Testimonials / clients / portfolio grids */ .our-clients ul, .ourProjects_inner ul, .clients-logos ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 !important; list-style: none; } .our-clients ul li, .ourProjects_inner ul li, .clients-logos ul li { width: 100% !important; float: none !important; margin: 0 !important; } /* Modals (pricing "Read more") */ .modal-dialog, .modal-dialog.package-modal { width: auto !important; margin: 12px !important; } .modal-content { border-radius: var(--kbm-radius) !important; } .modal-body { padding: 20px !important; max-height: 70vh; overflow-y: auto; } .modal .close { font-size: 30px !important; padding: 8px 14px !important; } /* FAQ / accordion */ .panel-group .panel, .accordion .panel, .kbx-faq, details { border-radius: var(--kbm-radius-sm) !important; margin-bottom: 10px !important; } .panel-title a, summary { min-height: 48px; display: flex !important; align-items: center; padding: 12px 16px !important; font-size: 15px !important; } /* Footer */ section.footer_main { padding-top: 32px !important; } .footer_main .footer-widget-sec { width: 100% !important; float: none !important; margin-bottom: 8px !important; padding: 0 !important; } .footer_main .footer-widget-sec h4 { font-size: 13px !important; letter-spacing: 1px; text-transform: uppercase; margin: 18px 0 8px !important; color: #fff !important; } .footer_main .footer-widget-sec ul { padding: 0 !important; margin: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; } .footer_main .footer-widget-sec ul li { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } .footer_main .footer-widget-sec ul li a { display: inline-block; padding: 6px 0; font-size: 13.5px !important; line-height: 1.4 !important; } .footer_main .footer-widget-sec p { color: #8e9bb4 !important; font-size: 13.5px !important; } .footer_main .footer-copyright { padding: 16px 0 !important; text-align: center; font-size: 12.5px !important; } .footer_main .footer-copyright .socials li a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); margin: 0 3px; } .footer_main .footer-copyright .footer_link { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 0 !important; list-style: none; } .footer_main .footer-copyright .footer_link li { float: none !important; padding: 0 !important; margin: 0 !important; } .footer_main .footer-copyright .footer_link li::before, .footer_main .footer-copyright .footer_link li::after { display: none !important; } .footer_main .footer-copyright .col-lg-4, .footer_main .footer-copyright .col-sm-4, .footer_main .footer-copyright .col-sm-3, .footer_main .footer-copyright .col-sm-5 { width: 100% !important; float: none !important; margin: 6px 0 !important; text-align: center !important; } /* Misc theme fixes */ .wow { visibility: visible !important; } /* never leave content invisible on mobile if WOW fails */ .displayN { display: none !important; } .desktop-only, .hide-mobile, .d-none-mobile { display: none !important; } .text-center-mobile { text-align: center !important; } .pull-left, .pull-right { float: none !important; } .col-md-6 + .col-md-6, .col-sm-6 + .col-sm-6 { margin-top: 12px; } .mobile-info, .mobile-info p { text-align: left !important; } .map-sec iframe, .map iframe { height: 260px !important; width: 100% !important; } .blockquote, blockquote { border-left: 3px solid var(--kbm-accent) !important; padding: 8px 16px !important; margin: 16px 0 !important; border-radius: 0 12px 12px 0; background: #fff; } .ticker-sec { overflow: hidden !important; } .grecaptcha-badge { visibility: hidden !important; } /* Two-column media/text splits stack with image first */ .row > .col-md-6 img, .row > .col-sm-6 img { display: block; margin: 0 auto 16px; border-radius: var(--kbm-radius-sm); } .img-responsive { display: block; margin: 0 auto; } /* Chat launcher (Tawk) sits above the tab bar; offset is also set via Tawk_API.customStyle */ iframe[title*="chat" i] { bottom: calc(var(--kbm-tab-h) + var(--kbm-safe-b) + 8px) !important; } } /* end @media (max-width: 991px) */ /* ---------- Tablets (640–991) keep 2-column grids where it helps ---------- */ @media (min-width: 640px) and (max-width: 991px) { .index_newBannerInner ul { grid-template-columns: 1fr 1fr 1fr; } .ourecommerce_inner ul, .other_recommendedS ul, .our_phpVert ul, .sucess_Asec ul, .WP_sucessfail ul, .ecommerceProcess_outr ul { grid-template-columns: 1fr 1fr; } .kbx-grid2, .kbx-faq-grid, .kbx-steps { grid-template-columns: 1fr 1fr !important; } .kbx-stats, .facts_stats_AA ul, .key-facts { grid-template-columns: repeat(4, 1fr) !important; } .our-clients ul, .ourProjects_inner ul, .clients-logos ul { grid-template-columns: repeat(3, 1fr); } h1, .h1 { font-size: 34px !important; } h2, .h2 { font-size: 27px !important; } .container, .container-fluid { padding-left: 24px !important; padding-right: 24px !important; } .package-plan-background .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 !important; } .package-plan-background .row > [class*="col-"] { width: 100% !important; padding: 0 !important; } } /* ---------- Small phones ---------- */ @media (max-width: 360px) { h1, .h1 { font-size: 24px !important; } h2, .h2 { font-size: 21px !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }