/** * Static website — native app bridge * Premium mobile shell matching dynamic storefront chrome. * Does NOT alter page content or images — layout/chrome only. */ :root { --st-bg: #f2f2f7; --st-surface: #ffffff; --st-ink: #1c1c1e; --st-ink-muted: #8e8e93; --st-hairline: rgba(60, 60, 67, 0.12); --st-accent: #E2000F; --st-radius: 10px; --st-radius-bar: 18px; --st-header-h: 56px; --st-tabbar-h: 70px; --st-safe-top: env(safe-area-inset-top, 0px); --st-safe-bottom: env(safe-area-inset-bottom, 0px); --st-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04); --st-shadow-bar: 0 -0.5px 0 rgba(0, 0, 0, 0.08), 0 -4px 16px rgba(0, 0, 0, 0.06); --st-ease: cubic-bezier(0.22, 1, 0.36, 1); } html { -webkit-tap-highlight-color: transparent; overflow-x: clip; } body.is-static-site { background: var(--st-bg) !important; color: var(--st-ink); overflow-x: clip !important; padding-top: var(--st-safe-top); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body.is-static-site .main-page-artical { min-height: 50vh; } /* ========================================================= MOBILE APP HEADER — compact frosted bar ========================================================= */ @media only screen and (max-width: 991px) { body.is-static-site { padding-bottom: calc(var(--st-tabbar-h) + 18px + var(--st-safe-bottom)); } body.is-static-site .main_header { position: sticky !important; top: 0 !important; z-index: 1040 !important; min-height: var(--st-header-h) !important; height: auto !important; background: rgba(13, 13, 14, 0.92) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } body.is-static-site .main_header .navbar, body.is-static-site .main_header-div { min-height: var(--st-header-h) !important; padding-top: 6px !important; padding-bottom: 6px !important; } body.is-static-site .main_header .navbar-brand .img-max-width, body.is-static-site .main_header .navbar-brand img { max-height: 34px !important; width: auto !important; } body.is-static-site .main_header .navbar-toggler { width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.1) !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none !important; } body.is-static-site .main_header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(226, 0, 15, 0.35) !important; } body.is-static-site .main_header .navbar-toggler .navbar-toggler-icon, body.is-static-site .main_header .responcive-btn { width: 22px !important; height: 22px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; opacity: 1 !important; filter: brightness(0) invert(1); } body.is-static-site .main_header .header-contact-div { display: none !important; } /* Backdrop when drawer open (sibling of header — root stacking) */ body.is-static-site .st-nav-backdrop { position: fixed; inset: 0; z-index: 10090; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s var(--st-ease), visibility 0.28s var(--st-ease); } body.is-static-site.st-menu-open .st-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } body.is-static-site.st-menu-open { overflow: hidden !important; } /* Header must rise above tabbar (z 10050) so drawer is visible */ body.is-static-site.st-menu-open .main_header { z-index: 10100 !important; } body.is-static-site.st-menu-open .st-tabbar { visibility: hidden !important; pointer-events: none !important; } /* * Mobile drawer — override style.css left:-100% slide with transform. * Keep display:block so Bootstrap collapse display:none does not hide the panel. */ body.is-static-site .navbar-main.collapse, body.is-static-site .navbar-main.collapsing, body.is-static-site .navbar-main.navbar-collapse, body.is-static-site .main_header .navbar-main { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: min(88vw, 340px) !important; max-width: 340px !important; height: 100% !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: calc(14px + var(--st-safe-top)) 16px calc(24px + var(--st-safe-bottom)) !important; background: #0d0d0e !important; z-index: 10110 !important; overflow-x: hidden !important; overflow-y: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: translate3d(-105%, 0, 0) !important; transition: transform 0.28s var(--st-ease) !important; border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35); -webkit-overflow-scrolling: touch; } body.is-static-site .navbar-main.collapse.show, body.is-static-site .main_header .navbar-main.show { transform: translate3d(0, 0, 0) !important; pointer-events: auto !important; } body.is-static-site .navbar-main.collapse:not(.show), body.is-static-site .main_header .navbar-main:not(.show) { pointer-events: none !important; } body.is-static-site .navbar-main > .d-flex { min-height: 100%; } body.is-static-site .navbar-main .mobile-menu-top { margin-bottom: 8px; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } body.is-static-site .navbar-main .cross-icon-img { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12) !important; } body.is-static-site .navbar-main .cross-icon-img img { filter: brightness(0) invert(1); } body.is-static-site .navbar-main .menubar_ul { flex-direction: column !important; align-items: stretch !important; gap: 8px; margin: 16px 0 0 !important; width: 100% !important; } body.is-static-site .navbar-main .nav-item { width: 100%; } body.is-static-site .navbar-main .nav-link { color: #fff !important; font-size: 16px !important; font-weight: 650 !important; letter-spacing: -0.02em; padding: 14px 16px !important; margin: 0 !important; border-radius: var(--st-radius) !important; background: rgba(255, 255, 255, 0.05); text-align: left !important; } body.is-static-site .navbar-main .nav-link::after { display: none !important; } body.is-static-site .navbar-main .nav-link.active, body.is-static-site .navbar-main .nav-link:hover { background: rgba(226, 0, 15, 0.18) !important; color: #fff !important; } body.is-static-site .header-contact-div-mobile-view { display: block !important; margin-top: auto; padding: 14px 16px; border-radius: var(--st-radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); } body.is-static-site .header-contact-div-mobile-view .call-Anytime, body.is-static-site .header-contact-div-mobile-view .mo-number { color: #fff !important; } /* Cards / sections — softer native surfaces (images untouched) */ body.is-static-site .product-card, body.is-static-site .about-as-section-03 .row > [class*="col-"], body.is-static-site .testimonial-wrapper .swiper-slide { border-radius: 14px !important; } /* Keep dark product / hero bands full-bleed; spacing via inner containers */ body.is-static-site .product-list-content { padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site .hero__slider--section, body.is-static-site .banner-section, body.is-static-site .swiper { overflow: hidden; } body.is-static-site .hero__slider--section { margin-left: 0; margin-right: 0; } body.is-static-site .hero__slider--section img, body.is-static-site .banner-section img { border-radius: 0; width: 100%; height: auto; display: block; } body.is-static-site .main-page-artical > section + section { margin-top: 0; } body.is-static-site .about-as-section-03, body.is-static-site .testimonial-wrapper, body.is-static-site .benifit-section-05 { margin-top: 0 !important; } /* ========================================================= HOMEPAGE — full native mobile structure (all sections) ========================================================= */ body.is-static-site.page-homepage { background: #ececef !important; } body.is-static-site.page-homepage .main_header { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.22) !important; } body.is-static-site.page-homepage .main-page-artical { overflow-x: clip !important; } /* --- Hero --- */ body.is-static-site.page-homepage .hero__slider--section { position: relative; z-index: 1; margin: 0 !important; background: #0e0e10 !important; } body.is-static-site.page-homepage .hero__slider--items.style4 { min-height: 0 !important; } body.is-static-site.page-homepage .hero__slider--section img { width: 100% !important; height: auto !important; display: block !important; } body.is-static-site.page-homepage .hero__slider--section .swiper-button-next, body.is-static-site.page-homepage .hero__slider--section .swiper-button-prev { width: 30px !important; height: 30px !important; margin-top: 0 !important; background: rgba(13, 13, 14, 0.5) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; box-shadow: none !important; opacity: 0.9 !important; visibility: visible !important; } body.is-static-site.page-homepage .hero__slider--section .swiper-button-next:after, body.is-static-site.page-homepage .hero__slider--section .swiper-button-prev:after { font-size: 11px !important; font-weight: 700 !important; } body.is-static-site.page-homepage .hero__slider--section .swiper-button-prev { left: 8px !important; } body.is-static-site.page-homepage .hero__slider--section .swiper-button-next { right: 8px !important; } /* --- Categories (2-col) --- */ body.is-static-site.page-homepage .Service-section-02 { margin-top: 0 !important; padding: 14px 10px 18px !important; background: linear-gradient(180deg, #1a1a1a 0%, #ececef 36px, #ececef 100%) !important; } body.is-static-site.page-homepage .Service-section-02 .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site.page-homepage .Service-section-02 .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; margin-left: -5px !important; margin-right: -5px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0 !important; row-gap: 10px !important; } body.is-static-site.page-homepage .Service-section-02 .row > [class*="col-"] { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding-left: 5px !important; padding-right: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.is-static-site.page-homepage .Service-card-1, body.is-static-site.page-homepage .Service-card-2, body.is-static-site.page-homepage .Service-card-3, body.is-static-site.page-homepage .Service-card-4 { margin-top: 0 !important; height: 100%; border-radius: 14px !important; overflow: hidden !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important; background: #121214 !important; transform: none !important; } body.is-static-site.page-homepage .Service-card-1::after { display: none !important; } body.is-static-site.page-homepage .Service-card-1 a { display: block; position: relative; text-decoration: none; height: 100%; } body.is-static-site.page-homepage .card-Manage { height: 168px !important; max-width: 100% !important; margin: 0 !important; } body.is-static-site.page-homepage .card-Manage img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; } body.is-static-site.page-homepage .card-Manage::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 70% !important; background: linear-gradient( 180deg, transparent 0%, rgba(8, 8, 10, 0.45) 30%, rgba(8, 8, 10, 0.92) 100% ) !important; clip-path: none !important; z-index: 1 !important; pointer-events: none; } body.is-static-site.page-homepage .card-tital { z-index: 2 !important; padding: 0 10px 12px !important; max-width: 100% !important; } body.is-static-site.page-homepage .card-tital h3 { font-size: 13.5px !important; font-weight: 750 !important; letter-spacing: -0.02em !important; margin-bottom: 2px !important; color: #fff !important; line-height: 1.2 !important; } body.is-static-site.page-homepage .card-tital h3::after { display: none !important; } body.is-static-site.page-homepage .card-tital p { color: rgba(255, 255, 255, 0.7) !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.3 !important; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.is-static-site.page-homepage .bg-img-black { display: none !important; } /* --- About --- */ body.is-static-site.page-homepage .about-as-section-03 { margin: 0 !important; padding: 22px 12px 8px !important; background: #f7f7f8 !important; overflow: visible !important; } body.is-static-site.page-homepage .about-as-section-03 .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } body.is-static-site.page-homepage .about-as-img-div { padding-right: 0 !important; margin-bottom: 16px; } body.is-static-site.page-homepage .about-as-section-03 .img-main { border-radius: 14px !important; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1) !important; } body.is-static-site.page-homepage .about-as-section-03 .img-main img { width: 100% !important; height: auto !important; transform: none !important; } body.is-static-site.page-homepage .about-as-section-03 .img-sub { display: none !important; } body.is-static-site.page-homepage .about-us-iffo .title-div { font-size: 11px !important; letter-spacing: 0.14em; } body.is-static-site.page-homepage .about-us-iffo .inffo-div { font-size: 24px !important; line-height: 1.2 !important; margin-top: 8px !important; margin-bottom: 10px !important; } body.is-static-site.page-homepage .about-us-iffo .lorem-div { font-size: 14px !important; line-height: 1.6 !important; max-width: none !important; } body.is-static-site.page-homepage .about-us-iffo > .row { margin-left: 0 !important; margin-right: 0 !important; margin-top: 8px !important; row-gap: 12px !important; } body.is-static-site.page-homepage .about-us-iffo > .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; } body.is-static-site.page-homepage .Manage-Tech-Services { margin-top: 18px !important; padding: 44px 16px 18px !important; min-height: 0 !important; border-radius: 14px !important; transform: none !important; } body.is-static-site.page-homepage .Manage-Tech-Services:hover { transform: none !important; } body.is-static-site.page-homepage .Manage-Tech-Services .nanotechnology-svg { top: -14px !important; left: 16px !important; width: 44px !important; height: 44px !important; padding: 10px !important; } body.is-static-site.page-homepage .Manage-Tech-Services h4 a { font-size: 17px !important; } body.is-static-site.page-homepage .Manage-Tech-Services p { font-size: 13px !important; line-height: 1.55 !important; } body.is-static-site.page-homepage .list-icon .list-text { font-size: 13.5px !important; margin-bottom: 10px !important; gap: 10px; } body.is-static-site.page-homepage .btn-Discover-01 .theme-btn, body.is-static-site.page-homepage .about-us-iffo .theme-btn { width: 100% !important; max-width: 100% !important; min-height: 46px !important; border-radius: 12px !important; font-size: 13px !important; margin-top: 8px; } /* --- Best products (2-col) --- */ body.is-static-site.page-homepage .product-list-content, body.is-static-site.page-homepage .product-list-content.product-list-content-padding { padding: 28px 10px 24px !important; background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(226, 0, 15, 0.14) 0%, transparent 55%), linear-gradient(180deg, #0e0e10 0%, #161614 100%) !important; } body.is-static-site.page-homepage .product-list-content .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } body.is-static-site.page-homepage .product-list-content > .container > .row > .col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site.page-homepage .product-list-content .sub-title { font-size: 11px !important; letter-spacing: 0.16em; } body.is-static-site.page-homepage .product-list-content .second-title { font-size: 24px !important; max-width: none !important; margin-bottom: 10px !important; text-align: center !important; } body.is-static-site.page-homepage .product-list-content .col-lg-12 > .row { --bs-gutter-x: 10px; margin-left: -5px !important; margin-right: -5px !important; display: flex !important; flex-wrap: wrap !important; row-gap: 10px !important; } body.is-static-site.page-homepage .product-list-content .product-top-margin { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 5px !important; padding-right: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.is-static-site.page-homepage .product-item.product-seat { padding: 18px 10px 12px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important; transform: none !important; background: linear-gradient(180deg, #2a2a2e 0%, #141416 55%, #101012 100%) !important; height: 100%; } body.is-static-site.page-homepage .product-item-img-margin img { height: 120px !important; object-fit: contain !important; } body.is-static-site.page-homepage .product-item-title { font-size: 13px !important; margin-bottom: 10px !important; color: #fff !important; background: none !important; } body.is-static-site.page-homepage .product-item .theme-btn-light { width: 100% !important; max-width: 100% !important; min-height: 34px !important; padding: 8px 10px !important; font-size: 11px !important; border-radius: 8px !important; border: 0 !important; background: #fff !important; color: #121214 !important; } body.is-static-site.page-homepage .product-item .theme-btn-light::before, body.is-static-site.page-homepage .product-item .theme-btn-light::after { display: none !important; } /* --- Benefits --- */ body.is-static-site.page-homepage .benifit-section-05 { padding: 0 !important; background: #121214 !important; } body.is-static-site.page-homepage .benifit-img { min-height: 200px !important; height: 200px !important; } body.is-static-site.page-homepage .benifit-img img { transform: none !important; } body.is-static-site.page-homepage .our_benefits { padding: 24px 16px 28px !important; height: auto !important; } body.is-static-site.page-homepage .our_benefits .title-div { font-size: 11px !important; } body.is-static-site.page-homepage .our_benefits .inffo-div { font-size: 24px !important; margin: 10px 0 16px !important; } body.is-static-site.page-homepage .our_benefits .list-text { font-size: 14px !important; margin-bottom: 10px !important; } body.is-static-site.page-homepage .btn-get-more .theme-btn { width: 100% !important; max-width: 100% !important; min-height: 46px !important; border-radius: 12px !important; font-size: 13px !important; } /* --- Testimonials --- */ body.is-static-site.page-homepage .testimonial-wrapper, body.is-static-site.page-homepage .testimonial-wrapper.testimonial-wrapper-padding { padding: 28px 12px 20px !important; background: #ececef !important; } body.is-static-site.page-homepage .testimonial-wrapper .container { padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site.page-homepage .testimonial-wrapper .sub-title { font-size: 11px !important; } body.is-static-site.page-homepage .testimonial-wrapper .second-title { font-size: 24px !important; max-width: none !important; margin-bottom: 8px !important; } body.is-static-site.page-homepage .testimonial-wrapper .testi-desc { font-size: 13.5px !important; line-height: 1.55 !important; max-width: none !important; margin-bottom: 16px !important; } body.is-static-site.page-homepage .testimonial-box { padding: 18px 16px !important; border-radius: 14px !important; margin-bottom: 12px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important; transform: none !important; } body.is-static-site.page-homepage .testimonial-box:hover { transform: none !important; } body.is-static-site.page-homepage .testimonial-box .testi-text { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 14px !important; } body.is-static-site.page-homepage .testimonial-box .author-thumb { width: 44px !important; height: 44px !important; } body.is-static-site.page-homepage .testimonial-box .auth-name { font-size: 14px !important; } body.is-static-site.page-homepage .testimonial-box .icon-wrapper { width: 48px !important; height: 48px !important; } body.is-static-site.page-homepage .author-images { display: none !important; } body.is-static-site.page-homepage .flotting-incone-whatsapp, body.is-static-site.page-homepage .float { bottom: calc(var(--st-tabbar-h) + var(--st-safe-bottom) + 16px) !important; right: 14px !important; } /* Category page — same 2-col premium card rhythm */ body.is-static-site.page-category .Service-section-02 { margin-top: 0 !important; padding: 18px 12px 24px !important; background: #ececef !important; } body.is-static-site.page-category .Service-section-02 .container { padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site.page-category .Service-section-02 .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; margin-left: -5px !important; margin-right: -5px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0 !important; row-gap: 10px !important; } body.is-static-site.page-category .Service-section-02 .row > [class*="col-"] { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding-left: 5px !important; padding-right: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; } body.is-static-site.page-category .Service-card-1 { margin-top: 0 !important; height: 100%; border-radius: 14px !important; overflow: hidden !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 22px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04) !important; background: #121214 !important; transform: none !important; } body.is-static-site.page-category .Service-card-1::after { display: none !important; } body.is-static-site.page-category .card-Manage { height: 200px !important; } body.is-static-site.page-category .card-Manage::after { height: 68% !important; background: linear-gradient( 180deg, transparent 0%, rgba(8, 8, 10, 0.4) 28%, rgba(8, 8, 10, 0.82) 62%, rgba(8, 8, 10, 0.97) 100% ) !important; clip-path: none !important; } body.is-static-site.page-category .card-tital { padding: 0 10px 12px !important; } body.is-static-site.page-category .card-tital h3 { font-size: 14px !important; font-weight: 750 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin-bottom: 2px !important; } body.is-static-site.page-category .card-tital p { color: rgba(255, 255, 255, 0.72) !important; font-size: 10px !important; line-height: 1.35 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.is-static-site.page-category .bg-img-black { display: none !important; } /* ========================================================= CONTACT PAGE — native mobile structure ========================================================= */ body.is-static-site.page-contact { background: #ececef !important; } body.is-static-site.page-contact .ab-hero-banner { padding: 26px 16px 20px !important; background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(226, 0, 15, 0.22) 0%, transparent 55%), linear-gradient(180deg, #0e0e10 0%, #1a1a18 100%) !important; } body.is-static-site.page-contact .ab-hero-banner .main-title { font-size: 28px !important; margin-bottom: 6px !important; } body.is-static-site.page-contact .compeny-contact-section-02 { padding: 14px 0 0 !important; background: linear-gradient(180deg, #1a1a18 0%, #ececef 34px, #ececef 100%) !important; } body.is-static-site.page-contact .compeny-contact-section-02 > .container { padding-left: 12px !important; padding-right: 12px !important; } body.is-static-site.page-contact .compeny-contact-section-02 .col-lg-1 { display: none !important; } body.is-static-site.page-contact .contact-no-sec-div { gap: 10px !important; margin-bottom: 14px !important; height: auto !important; } body.is-static-site.page-contact .Have-any-question { padding: 14px !important; margin-bottom: 0 !important; border-radius: 14px !important; gap: 12px !important; background: linear-gradient(145deg, #1c1c1e 0%, #121214 100%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important; transform: none !important; align-items: flex-start !important; flex-wrap: nowrap !important; } body.is-static-site.page-contact .phone-icone { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; background: rgba(226, 0, 15, 0.18) !important; } body.is-static-site.page-contact .phone-icone svg path { fill: #E2000F !important; } body.is-static-site.page-contact .title-question { font-size: 11px !important; color: rgba(255, 255, 255, 0.55) !important; } body.is-static-site.page-contact .contact-no, body.is-static-site.page-contact .contact-no a { font-size: 13.5px !important; color: #fff !important; line-height: 1.45 !important; } body.is-static-site.page-contact .contact-sec-1-1 { display: none !important; } body.is-static-site.page-contact .contact-input-right-border { border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 28px rgba(0, 0, 0, 0.08) !important; margin-left: 0 !important; margin-right: 0 !important; } body.is-static-site.page-contact .contact-input-right { padding: 20px 16px 22px !important; } body.is-static-site.page-contact .CONTACT-WITH-US .inffo-div { font-size: 22px !important; margin: 8px 0 16px !important; padding-bottom: 0 !important; } body.is-static-site.page-contact .inffo-div-padding { padding-bottom: 0 !important; } body.is-static-site.page-contact .input-par-div .col-sm-6, body.is-static-site.page-contact .input-par-div .input-div { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.is-static-site.page-contact .input-ele-sty { min-height: 48px !important; border-radius: 12px !important; background: #f7f7f8 !important; border: 1px solid #e1e3e8 !important; margin-bottom: 12px !important; } body.is-static-site.page-contact .message-textarea textarea, body.is-static-site.page-contact .message-textarea-hi-pd textarea { width: 100% !important; min-height: 120px !important; border-radius: 12px !important; background: #f7f7f8 !important; border: 1px solid #e1e3e8 !important; padding: 12px 14px !important; font-family: inherit; } body.is-static-site.page-contact .theme-btn { width: 100% !important; border-radius: 12px !important; min-height: 50px; } body.is-static-site.page-contact .location-iferm-container { margin-top: 18px !important; padding: 0 12px 12px !important; } body.is-static-site.page-contact .location-iferm { border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); } body.is-static-site.page-contact .location-iferm iframe { height: 220px !important; } /* ========================================================= SEAT COVER LISTING — native 2-col product grid ========================================================= */ body.is-static-site.page-seat-cover { background: #ececef !important; } body.is-static-site.page-seat-cover .ab-hero-banner { min-height: 0 !important; height: auto !important; padding: 22px 16px 18px !important; display: block !important; background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(226, 0, 15, 0.22) 0%, transparent 55%), linear-gradient(180deg, #0e0e10 0%, #1a1a18 100%) !important; } body.is-static-site.page-seat-cover .ab-hero-banner::before { display: none !important; } body.is-static-site.page-seat-cover .ab-hero-banner .main-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em; margin-bottom: 6px !important; color: #fff !important; line-height: 1.15 !important; } body.is-static-site.page-seat-cover .ab-hero-banner .breadcrumb { margin-bottom: 0 !important; padding: 0 !important; background: transparent !important; } body.is-static-site.page-seat-cover .ab-hero-banner .breadcrumb-item, body.is-static-site.page-seat-cover .ab-hero-banner .breadcrumb-item a { color: rgba(255, 255, 255, 0.65) !important; font-size: 11px !important; } body.is-static-site.page-seat-cover .ab-hero-banner .breadcrumb-item.active { color: #E2000F !important; } body.is-static-site.page-seat-cover .product-list-content { padding: 14px 10px 24px !important; background: linear-gradient(180deg, #1a1a18 0%, #ececef 28px, #ececef 100%) !important; } body.is-static-site.page-seat-cover .product-list-content .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* Outer wrapper row stays full width */ body.is-static-site.page-seat-cover .product-list-content > .container > .row { margin-left: 0 !important; margin-right: 0 !important; } body.is-static-site.page-seat-cover .product-list-content > .container > .row > .col-lg-12, body.is-static-site.page-seat-cover .product-list-content .row > [class*="col-lg-12"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; } /* Inner product grid — 2 per row only */ body.is-static-site.page-seat-cover .product-list-content .col-lg-12 > .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; margin-left: -5px !important; margin-right: -5px !important; display: flex !important; flex-wrap: wrap !important; row-gap: 10px !important; } body.is-static-site.page-seat-cover .product-list-content .product-top-margin { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 5px !important; padding-right: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; } body.is-static-site.page-seat-cover .product-list-content a:has(.product-item) { display: block; height: 100%; text-decoration: none; } body.is-static-site.page-seat-cover .product-item.product-seat { padding: 18px 10px 12px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important; transform: none !important; height: 100%; background: linear-gradient(180deg, #2a2a2e 0%, #141416 55%, #101012 100%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } body.is-static-site.page-seat-cover .product-item-img-margin img { height: 132px !important; max-width: 100% !important; width: auto !important; object-fit: contain !important; } body.is-static-site.page-seat-cover .product-item-content { padding: 10px 4px 2px !important; margin-top: auto; width: 100%; } body.is-static-site.page-seat-cover .product-item-title { font-size: 14px !important; font-weight: 750 !important; margin-bottom: 10px !important; letter-spacing: 0.06em; color: #fff !important; background: none !important; text-shadow: none !important; } body.is-static-site.page-seat-cover .theme-btn, body.is-static-site.page-seat-cover .theme-btn-light { display: inline-flex !important; align-items: center; justify-content: center; min-height: 36px !important; padding: 8px 12px !important; font-size: 11px !important; font-weight: 750 !important; max-width: 100% !important; width: 100% !important; border-radius: 8px !important; border: 0 !important; background: #fff !important; color: #121214 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; overflow: hidden; } body.is-static-site.page-seat-cover .theme-btn::before, body.is-static-site.page-seat-cover .theme-btn::after, body.is-static-site.page-seat-cover .theme-btn-light::before, body.is-static-site.page-seat-cover .theme-btn-light::after { display: none !important; } body.is-static-site.page-seat-cover .theme-btn-light:hover, body.is-static-site.page-seat-cover .theme-btn:hover { background: #E2000F !important; color: #fff !important; } /* ========================================================= LAMINATION MAT — native mobile (same pattern as seat cover) ========================================================= */ body.is-static-site.page-lamination-mat { background: #ececef !important; } body.is-static-site.page-lamination-mat .ab-hero-banner { min-height: 0 !important; height: auto !important; padding: 22px 16px 18px !important; display: block !important; background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(226, 0, 15, 0.22) 0%, transparent 55%), linear-gradient(180deg, #0e0e10 0%, #1a1a18 100%) !important; } body.is-static-site.page-lamination-mat .ab-hero-banner::before { display: none !important; } body.is-static-site.page-lamination-mat .ab-hero-banner .main-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em; margin-bottom: 6px !important; color: #fff !important; line-height: 1.15 !important; } body.is-static-site.page-lamination-mat .ab-hero-banner .breadcrumb-item, body.is-static-site.page-lamination-mat .ab-hero-banner .breadcrumb-item a { color: rgba(255, 255, 255, 0.65) !important; font-size: 11px !important; } body.is-static-site.page-lamination-mat .ab-hero-banner .breadcrumb-item.active { color: #E2000F !important; } body.is-static-site.page-lamination-mat .product-details-content { padding: 14px 10px 24px !important; background: linear-gradient(180deg, #1a1a18 0%, #ececef 28px, #ececef 100%) !important; } body.is-static-site.page-lamination-mat .product-details-content > .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } body.is-static-site.page-lamination-mat .product-details-content > .container > .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; margin-left: -5px !important; margin-right: -5px !important; display: flex !important; flex-wrap: wrap !important; row-gap: 10px !important; } body.is-static-site.page-lamination-mat .product-details-content .product-top-margin { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 5px !important; padding-right: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; } body.is-static-site.page-lamination-mat .product-item { padding: 10px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important; transform: none !important; background: #121214 !important; height: 100%; } body.is-static-site.page-lamination-mat .lamination-view img { width: 100% !important; max-width: 100% !important; height: 140px !important; object-fit: cover !important; border-radius: 10px !important; } body.is-static-site.page-lamination-mat .product-details-description { margin-top: 14px !important; padding: 18px 14px !important; border-radius: 14px !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important; } body.is-static-site.page-lamination-mat .lamination1-main-title { font-size: 18px !important; } body.is-static-site.page-lamination-mat .lamination1-title { font-size: 15px !important; margin-top: 16px !important; margin-bottom: 8px !important; } /* Desktop-only full footer; mobile uses compact app footer */ body.is-static-site .footer--web, body.is-static-site footer.footer-content.footer--web { display: none !important; } body.is-static-site .footer--app { display: block !important; } } @media only screen and (min-width: 992px) { body.is-static-site .footer--app, body.is-static-site .st-tabbar { display: none !important; } body.is-static-site .footer--web, body.is-static-site footer.footer-content.footer--web { display: block !important; } } /* ========================================================= COMPACT APP FOOTER (mobile) — match dynamic structure/size ========================================================= */ .footer--app { display: none; background: transparent; padding: 8px 16px 12px; margin-bottom: 4px; } .footer--app .app-footer__inner { background: var(--st-surface); border: 1px solid var(--st-hairline); border-radius: var(--st-radius); box-shadow: var(--st-shadow-card); padding: 14px 14px 12px; } .footer--app .app-footer__links { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-bottom: 10px; } .footer--app .app-footer__links a { color: var(--st-ink-muted); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } .footer--app .app-footer__links a:hover, .footer--app .app-footer__links a:active { color: var(--st-accent); } .footer--app .app-footer__meta { text-align: center; border-top: 1px solid var(--st-hairline); padding-top: 10px; } .footer--app .app-footer__support { display: inline-block; color: var(--st-ink); font-size: 13px; font-weight: 700; text-decoration: none; margin-bottom: 4px; } .footer--app .app-footer__copy { margin: 0; color: var(--st-ink-muted); font-size: 11px; font-weight: 500; } /* ========================================================= BOTTOM TAB BAR — static routes (Home / Categories / Distributor / Contact / About) ========================================================= */ .st-tabbar { display: none; } @media only screen and (max-width: 991px) { .st-tabbar { display: block; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 10050 !important; padding: 0 10px calc(8px + var(--st-safe-bottom)) !important; pointer-events: none; background: transparent !important; border: 0 !important; transform: translateZ(0); } .st-tabbar__list { pointer-events: auto; display: flex !important; align-items: stretch; justify-content: space-between; gap: 2px; margin: 0 !important; padding: 6px !important; list-style: none !important; background: rgba(255, 255, 255, 0.86) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--st-radius-bar) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 28px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04) !important; } .st-tabbar__item { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; } .st-tabbar__btn { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 52px; padding: 6px 4px !important; color: #8e8e93 !important; text-decoration: none !important; border-radius: 14px; transition: background 0.2s var(--st-ease), color 0.2s var(--st-ease), transform 0.15s var(--st-ease); } .st-tabbar__btn:active { transform: scale(0.96); } .st-tabbar__btn.active { color: var(--st-accent) !important; background: color-mix(in srgb, var(--st-accent) 10%, transparent); } .st-tabbar__icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .st-tabbar__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .st-tabbar__label { font-size: 10px; font-weight: 650; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* WhatsApp above tab bar */ body.is-static-site .flotting-incone-whatsapp, body.is-static-site .float { bottom: calc(var(--st-tabbar-h) + var(--st-safe-bottom) + 12px) !important; right: 12px !important; z-index: 10040 !important; } } /* Desktop footer keep premium spacing consistent */ @media only screen and (min-width: 992px) { body.is-static-site .footer-content.footer--web { margin-top: 24px; } }