/* =====================================================================
   PHONE LAYOUT  (loaded only on screens up to 767px:  media="(max-width: 767px)")
   An app-style design: compact fixed header, quick shortcut icons, small cards in swipe rows,
   tight sections and a bottom navigation bar. Laptops and tablets never load this file.
   ===================================================================== */
:root { --m-bar: 56px; --m-tab: 60px; --m-gut: 16px; }

html { scroll-padding-top: calc(var(--m-bar) + 8px); }
body { font-size: 14px; line-height: 1.55; padding-bottom: calc(var(--m-tab) + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
.container { padding-left: var(--m-gut); padding-right: var(--m-gut); }
img { max-width: 100%; }

/* ---------- header: slim fixed bar ---------- */
.header-main-wrap {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 1200 !important;
  background: rgba(5, 8, 22, 0.96) !important;
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.header-main-wrap .cp-header-area, .header-main-wrap .menu-area { background: transparent !important; box-shadow: none !important; }
.header-main-wrap .container-fluid { padding-left: 12px; padding-right: 12px; }
.header-main-wrap .second-menu { padding: 0 !important; }
.header-main-wrap .second-menu > .row { min-height: var(--m-bar); position: relative; margin: 0; align-items: center; }
.header-main-wrap .second-menu > .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
.header-main-wrap .second-menu > .row > .col-7 { flex: 0 0 auto; width: auto; }
.header-main-wrap .second-menu > .row > .col-1 { display: none; }
.header-main-wrap .second-menu > .row > .col-4 { flex: 1 1 auto; width: auto; max-width: none; margin-left: auto; padding-right: 50px; }
/* the meanmenu wrapper is pinned over the bar so its button sits at the right edge */
.header-main-wrap .second-menu > .row > .col-12 { position: absolute; top: 0; right: 0; left: 0; height: var(--m-bar); padding: 0; pointer-events: none; z-index: 5; }
.header-main-wrap .cp-header-area-right .ch-btn-style-1 { display: inline-flex !important; }
.header-main-wrap .logo img { width: 38px !important; height: 38px !important; margin: 0 !important; }
.header-main-wrap .cp-header-area-right ul { justify-content: flex-end; }
.header-main-wrap .cp-header-area-right .ch-btn-style-1 {
  padding: 8px 14px !important; font-size: 12px !important; line-height: 1.2 !important; border-radius: 999px !important; white-space: nowrap;
}
.header-fixed { animation: none !important; }
/* the mobile menu button (meanmenu) */
.mean-container .mean-bar { min-height: 0; padding: 0; background: transparent !important; position: absolute; top: 0; left: 0; right: 0; height: var(--m-bar); pointer-events: none; }
.cp-header-area .mean-container a.meanmenu-reveal, .mean-container a.meanmenu-reveal {
  margin: 0 !important; width: 36px !important; height: 36px !important; padding: 0 !important; top: 10px !important; right: 12px !important;
  border-radius: 50% !important; line-height: 34px !important; text-align: center; pointer-events: auto; position: absolute !important;
}
.mean-container .mean-nav { margin-top: 0 !important; background: #0a0d2b !important; border-top: 1px solid rgba(34, 211, 238, 0.2); position: absolute; left: 0; right: 0; top: var(--m-bar); pointer-events: auto; }
.mean-container .mean-nav ul li a { font-size: 14px !important; padding: 13px 18px !important; }

/* ---------- pages without a hero: room for the fixed header, slim title banner ---------- */
.inner-page .page-title { min-height: 0 !important; padding: 0 !important; }
.inner-page .page-title .page-title-wrap { padding: 0 !important; }
.inner-page .page-title .breadcumb-img { display: none !important; }
.inner-page .page-title .breadcumb-wrap { padding: calc(var(--m-bar) + 22px) 4px 18px !important; }
.inner-page .page-title .breadcumb-wrap h1 { font-size: 24px !important; line-height: 30px !important; margin-bottom: 6px !important; }
.inner-page .page-title .breadcumb-wrap ol li { font-size: 12px; }
.inner-page .ptb-120, .inner-page [class*="ptb-"] { padding-top: 28px !important; padding-bottom: 28px !important; }
.inner-page .container-fluid { padding-left: var(--m-gut); padding-right: var(--m-gut); }
/* pages that start with a heading section (faq, profile, policies) */
.inner-page .service-area-2.mt-4 { margin-top: calc(var(--m-bar) + 4px) !important; }
.ch-top-title-s3 h1, .ch-top-title-s3 h2 { font-size: 22px !important; line-height: 28px !important; }

/* ---------- home hero: compact banner ---------- */
.home-page .ch-main-hero { min-height: 0 !important; height: auto !important; overflow: hidden; }
.home-page .ch-main-hero .ch-main-hero-wrap { padding: calc(var(--m-bar) + 22px) 0 0 !important; min-height: 372px; }
.home-page .ch-main-hero .row { margin: 0; }
.home-page .ch-main-hero .row > [class*="col-"] { padding: 0; }
.home-page .ch-main-hero .ch-main-hero-text { max-width: 58%; position: relative; z-index: 3; padding-bottom: 26px; text-align: left !important; }
.home-page .ch-main-hero .ch-main-hero-text h1 { font-size: 25px !important; line-height: 31px !important; margin: 0 0 10px !important; }
.home-page .ch-main-hero .ch-main-hero-text p { font-size: 13px !important; line-height: 1.5 !important; margin: 0 0 14px !important; color: #cfd6ff; max-width: none; }
.home-page .ch-main-hero .hud-emblem, .home-page .ch-main-hero .arrow, .home-page .hero-hud { display: none !important; }
.home-page .ch-main-hero .right-image {
  position: absolute !important; right: -6px !important; bottom: 0 !important; left: auto !important; width: 46%; z-index: 2;
}
.home-page .ch-main-hero .right-image img { width: 100% !important; max-width: none !important; height: auto; }
.home-page .ch-main-hero .right-image .right-image-inner::before { display: none !important; }
.m-hero-cta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.m-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; font-size: 12px; font-weight: 600; line-height: 1.2; color: #fff;
  border: 1px solid rgba(34, 211, 238, 0.6); border-radius: 999px; background: rgba(10, 13, 43, 0.6); text-decoration: none;
}
.m-btn-primary { background: linear-gradient(135deg, #7c3aed, #0ea5c6); border-color: transparent; }
.m-btn i { font-size: 12px; }

/* ---------- quick shortcut icons ---------- */
/* .m-quick-viewport is the visible clipped window (added by mobile-swipe.js), .m-quick is the strip
   of icons drifting inside it. The drift itself is this plain CSS animation (same technique as the
   ticker above it) so it runs on the compositor, not the main thread - mobile-swipe.js only sets the
   --quick-from/--quick-to/--quick-dur custom properties and toggles play/pause. */
.m-quick-viewport {
  overflow: hidden; position: relative; z-index: 4;
  background: linear-gradient(180deg, #0a0d2b, #070b22); border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}
.m-quick {
  display: flex; gap: 14px; padding: 14px var(--m-gut) 12px;
}
@keyframes mQuickDrift { from { transform: translateX(var(--quick-from, 0px)); } to { transform: translateX(var(--quick-to, 0px)); } }
.m-quick.m-quick-auto { animation: mQuickDrift var(--quick-dur, 15s) linear infinite; animation-play-state: paused; }
.m-quick a { flex: 0 0 auto; width: 58px; text-align: center; font-size: 11px; font-weight: 500; color: #dfe4ff; text-decoration: none; line-height: 1.2; }
.m-quick a span {
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 auto 6px; border-radius: 50%;
  font-size: 19px; color: #22d3ee; background: radial-gradient(circle at 30% 25%, rgba(124, 58, 237, 0.5), rgba(10, 13, 43, 0.95));
  border: 1px solid rgba(34, 211, 238, 0.45); box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}
.m-quick a:active span { transform: scale(0.94); }

/* ---------- sections: tight spacing, small headings ---------- */
.home-page .offers-area, .home-page .announcement-section, .home-page .home-store-area, .home-page .service-area, .home-page .features-area,
.home-page .choose-area, .home-page .team-area, .home-page .about-area, .home-page .contact-section, .home-page .seo-intro, .home-page .cta-area {
  padding-top: 24px !important; padding-bottom: 22px !important; margin: 0 !important;
}
.home-page .service-area { background-image: none !important; background-color: #070b22 !important; }
.home-page .ch-top-title, .home-page .ch-top-title-s2, .home-page .ch-top-title-s3 { margin-bottom: 14px !important; text-align: left !important; }
.home-page .ch-top-title span, .home-page .ch-top-title-s2 span, .home-page .ch-top-title-s3 span { font-size: 11px !important; letter-spacing: 1.6px; padding: 0 !important; }
.home-page .ch-top-title span::before, .home-page .ch-top-title span::after,
.home-page .ch-top-title-s2 span::before, .home-page .ch-top-title-s2 span::after,
.home-page .ch-top-title-s3 span::before, .home-page .ch-top-title-s3 span::after { display: none !important; }
.home-page .ch-top-title h2, .home-page .ch-top-title-s2 h2, .home-page .ch-top-title-s3 h2 { font-size: 20px !important; line-height: 26px !important; margin: 4px 0 0 !important; }
.home-page .announcement-section .ann-header { text-align: left !important; margin-bottom: 14px !important; }
.home-page .ann-label {
  display: inline-block !important; background: none !important; color: #22d3ee !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: 1.6px !important; padding: 0 !important; margin: 0 0 4px !important;
  border-radius: 0 !important; animation: none !important; box-shadow: none !important;
}
.home-page .announcement-section h2 { font-size: 20px !important; line-height: 26px !important; margin: 4px 0 0 !important; }
.svc-icon { display: none !important; }

/* ---------- swipe rows: every card starts centred, with the next and previous one peeking in on both sides ---------- */
.m-viewport {
  width: calc(100% + 2 * var(--m-gut)) !important;
  margin-left: calc(-1 * var(--m-gut)) !important; margin-right: calc(-1 * var(--m-gut)) !important;
}
[data-mswipe].m-swipe { padding: 6px 9% 10px !important; gap: 12px !important; }
[data-mswipe].m-swipe > * { flex: 0 0 80% !important; width: 80% !important; max-width: 80% !important; }
.m-swipe-dots { margin-top: 0 !important; }
.m-swipe-dot { width: 6px !important; height: 6px !important; }
.m-swipe-dot.active { width: 20px !important; }

/* cards (offers, news, store, services): a small product-card look */
.home-page .offer-card { height: auto !important; min-height: 0 !important; border-radius: 14px !important; }
.home-page .offer-card .offer-img { height: 132px !important; flex: 0 0 132px !important; aspect-ratio: auto !important; }
.home-page .offer-card .offer-img img { width: 100%; height: 100%; object-fit: cover; }
.home-page .offer-card .offer-body { padding: 11px 13px 13px !important; }
.home-page .offer-card .offer-body h3 { font-size: 14.5px !important; line-height: 1.3 !important; margin: 0 0 5px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-page .offer-card .offer-body p { font-size: 12px !important; line-height: 1.5 !important; margin: 0 0 10px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-page .offer-card .offer-cta { padding: 7px 14px !important; font-size: 12px !important; }
.home-page .offer-card .offer-badge { font-size: 10px !important; padding: 3px 9px !important; top: 8px !important; left: 8px !important; }
.home-page .svc-card .svc-icon { width: 34px !important; height: 34px !important; font-size: 17px !important; }
.home-store-all-wrap { margin-top: 8px !important; }
.home-store-all-wrap .offer-cta { padding: 9px 20px !important; font-size: 13px !important; }

/* features (Eco Friendly / Easy Setup / Low Cost) */
.home-page .features-area { padding-top: 14px !important; }
.home-page .features-area .features-item { padding: 14px 15px !important; border-radius: 14px !important; gap: 12px; align-items: center !important; }
.home-page .features-area .features-item .icon i { font-size: 30px !important; }
.home-page .features-area .features-item h3 { font-size: 15px !important; margin: 0 0 3px !important; }
.home-page .features-area .features-item p { font-size: 12px !important; line-height: 1.45 !important; margin: 0 !important; }

/* why choose us */
.home-page .choose-area .choose-wrap > p { font-size: 13px; margin-bottom: 12px; }
.home-page .choose-area .choose-items .info { padding: 12px 12px !important; border-radius: 14px !important; min-height: 0; }
.home-page .choose-area .choose-items .info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
.home-page .choose-area .choose-items .info .info-icon { margin: 0 !important; width: auto !important; }
.home-page .choose-area .choose-items .info .info-icon i { font-size: 24px !important; }
.home-page .choose-area .choose-items .info .info-text { padding: 0 !important; margin: 0 !important; }
.home-page .choose-area .choose-items .info h3 { font-size: 14px !important; margin: 4px 0 1px !important; }
.home-page .choose-area .choose-items .info p { font-size: 11.5px !important; margin: 0 !important; }
.home-page .choose-area .choose-features { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.home-page .choose-area .choose-features .choose-icon { flex: 0 0 auto; width: 56px; height: 56px; margin: 0 !important; }
.home-page .choose-area .choose-features .choose-icon i { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; }
.home-page .choose-area .choose-features .choose-icon img { width: 34px; height: auto; }
.home-page .choose-area .choose-list li { font-size: 12.5px; margin-bottom: 6px; }
.home-page .choose-area .solar-panel, .home-page .choose-area .line-vector { display: none !important; }

/* team: square photo with the name underneath */
.home-page .team-area .team-item { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.home-page .team-area .team-item .team-img { width: 100% !important; height: auto !important; border-radius: 14px !important; padding: 0 !important; }
.home-page .team-area .team-item .team-img img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px !important; }
.home-page .team-area .team-item .team-text {
  position: static !important; transform: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important;
  padding: 9px 4px 2px !important; background: none !important; box-shadow: none !important; text-align: center !important;
}
.home-page .team-area .team-item .team-text::before, .home-page .team-area .team-item .team-text::after { display: none !important; }
.home-page .team-area .team-item .team-text h3 { font-size: 14px !important; line-height: 1.25 !important; margin: 0 !important; }
.home-page .team-area .team-item .team-text h3 a { font-size: 14px !important; }
.home-page .team-area .team-item .team-text span { font-size: 11.5px !important; display: block; }
.home-page .team-area .team-item .back-shape, .home-page .team-area .team-item .team-img .plus, .home-page .team-area .team-item .team-img > i { display: none !important; }
/* about: text and bars only, no photo collage */
.home-page .about-area .about-left-item { display: none !important; }
.home-page .about-area .dots-shape-1, .home-page .about-area .dots-shape-2 { display: none !important; }
.home-page .about-area .about-right-text h2 { font-size: 20px !important; line-height: 26px !important; }
.home-page .about-area .about-right-text p { font-size: 13px !important; }
.home-page .about-area .about-features-img { display: none !important; }
.home-page .about-area .about-list li { font-size: 12.5px; margin-bottom: 6px; }
.home-page .about-area .about-bottom { margin-top: 10px; }

/* call-to-action band */
.home-page .cta-area { padding-top: 10px !important; padding-bottom: 10px !important; }
.home-page .cta-area .cta-wrap { padding: 22px 8px !important; border-radius: 16px; background-image: none !important; background: linear-gradient(135deg, #1b1250, #0b3b57) !important; }
.home-page .cta-area .ch-top-title h2 { font-size: 17px !important; line-height: 23px !important; }
.home-page .cta-area .cotact-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.home-page .cta-area .call-btn { font-size: 13px; }

/* quote form */
.home-page .contact-section .contact-form input, .home-page .contact-section .form-control, .home-page .contact-section select { height: 44px; font-size: 14px; }
.home-page .contact-section textarea.form-control { height: auto; min-height: 90px; }
.home-page .contact-section .map iframe { height: 210px; border-radius: 12px; }
.home-page .contact-section .ptb-120 { padding: 0 !important; }

/* company text */
.home-page .seo-intro { padding-top: 22px !important; }
.home-page .seo-intro .ch-top-title { text-align: center !important; }

/* ---------- footer ---------- */
.footer-section .upper-footer { padding: 26px 0 8px !important; }
.footer-section .upper-footer .row > [class*="col-"] { margin-bottom: 14px; }
.footer-section .widget.instagram { display: none !important; }
.footer-section .widget-title h3 { font-size: 15px !important; margin-bottom: 8px !important; }
.footer-section .link-widget ul li { margin-bottom: 6px; }
.footer-section .upper-footer .row > .col:nth-child(3) .link-widget ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.footer-section .upper-footer .row > .col:nth-child(3) .link-widget ul li { margin: 0; }
.footer-section .about-widget .logo img { width: 64px; height: 64px; }
.footer-section .link-widget ul li a { font-size: 13px; }
.footer-section .lower-footer { padding: 12px 0 !important; text-align: center; }
.footer-section .lower-footer .fright { float: none !important; }
.ch-newsletter-area.style-2 .ch-newsletter-wrap { padding: 26px 16px !important; min-height: 0 !important; }
.ch-newsletter-area.style-2 .ch-newsletter-inner h2 { font-size: 18px !important; }
.ch-newsletter-area.style-2 .middle-btn { display: none !important; }

/* ---------- floating helpers: out of the way of the tab bar ---------- */
.floating-social-bar, #whatsapp-button { display: none !important; }
a.back-btn { bottom: calc(var(--m-tab) + 14px) !important; right: 14px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; }
.roxy-launcher { bottom: calc(var(--m-tab) + 62px) !important; right: 12px !important; width: 48px !important; height: 48px !important; }
.roxy-teaser { bottom: calc(var(--m-tab) + 68px) !important; right: 68px !important; max-width: 200px; font-size: 12px; }
.preloader { z-index: 3000; }

/* ---------- bottom tab bar ---------- */
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150; display: flex; height: calc(var(--m-tab) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(7, 10, 32, 0.97); border-top: 1px solid rgba(34, 211, 238, 0.25); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.5);
}
.m-tabbar a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; color: #aab3dd; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.m-tabbar a i { font-size: 19px; }
.m-tabbar a.active { color: #22d3ee; }
.m-tabbar a.active i { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7)); }
.m-tabbar a.wa i { color: #25d366; }
.m-tabbar a:active { background: rgba(124, 58, 237, 0.18); }

/* ---------- store pages ---------- */
.store-hero { padding: calc(var(--m-bar) + 18px) 0 10px !important; }
.store-hero h1 { font-size: 24px !important; line-height: 30px !important; }
.store-hero .store-lead { font-size: 13px !important; }
.store-crumbs { font-size: 12px; }
.store-tiles { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.store-tile .store-tile-img { height: 110px !important; }
.store-tile .store-tile-body { padding: 10px 12px 12px !important; }
.store-tile h2 { font-size: 15px !important; }
.store-tile p { font-size: 11.5px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.store-tile-subs { display: none !important; }
.store-steps { display: none !important; }
.store-part { padding: 18px 0 !important; }
.store-part[data-collapse="0"] .store-part-head { display: none !important; }
.store-part-head h2 { font-size: 18px !important; }
.store-part-head p { font-size: 12px !important; }
.store-grid { gap: 10px !important; }
.store-card-img { height: auto !important; }
.store-card-body { padding: 9px 10px 11px !important; }
.store-card-body h3 { font-size: 12.5px !important; line-height: 1.3 !important; margin: 3px 0 4px !important; }
.store-card-body p { display: none !important; }
.store-group { font-size: 9.5px !important; padding: 2px 7px !important; }
.store-card-foot { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px !important; }
.store-price { font-size: 11px !important; }
.store-enquire { justify-content: center; padding: 7px 8px !important; font-size: 11.5px !important; }
.store-toolbar { gap: 8px; }
.store-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.store-chips::-webkit-scrollbar { display: none; }
.store-chip { flex: 0 0 auto; white-space: nowrap; font-size: 12px !important; padding: 6px 12px !important; }


/* =====================================================================
   ROUND 2 - polish
   ===================================================================== */

/* ---------- header: a clean hamburger (three separate lines, turns into an X) ---------- */
.mean-container a.meanmenu-reveal span { display: none !important; }
.mean-container a.meanmenu-reveal { position: absolute !important; font-size: 0 !important; color: transparent !important; }
.mean-container a.meanmenu-reveal::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: #fff;
  transform: translate(-50%, -50%); box-shadow: 0 -5.5px 0 #fff, 0 5.5px 0 #fff; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mean-container a.meanmenu-reveal.meanclose::before { box-shadow: none; transform: translate(-50%, -50%) rotate(45deg); }
.mean-container a.meanmenu-reveal.meanclose::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%) rotate(-45deg);
}
.header-main-wrap.m-scrolled { background: rgba(5, 8, 22, 0.98) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6); }
.mean-container .mean-nav ul li a { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; text-align: left; }

/* ---------- hero: circle behind the engineer, floating icons, flowing gradient title ---------- */
.home-page .ch-main-hero .right-image .right-image-inner .box {
  width: 72% !important; height: auto !important; aspect-ratio: 1 / 1; left: 58% !important; top: 14% !important;
  transform: translate(-50%, -50%); animation: mSpin 26s linear infinite !important; box-shadow: 0 0 34px rgba(34, 211, 238, 0.28);
}
.home-page .ch-main-hero .right-image .right-image-inner::before {
  display: block !important; content: ""; position: absolute; left: 58% !important; top: 14% !important; width: 88% !important; height: auto !important; aspect-ratio: 1 / 1;
  border: 2px solid transparent; border-top-color: #22d3ee; border-right-color: rgba(168, 85, 247, 0.8); border-radius: 50%;
  transform: translate(-50%, -50%); animation: mSpinRev 8s linear infinite !important; z-index: -1; pointer-events: none;
}
@keyframes mSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mSpinRev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes mFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mFlow { to { background-position: 200% 50%; } }
@keyframes mPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); } }
.m-orb {
  position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; color: #22d3ee; background: rgba(10, 13, 43, 0.9); border: 1px solid rgba(34, 211, 238, 0.55);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.3); animation: mFloat 3.6s ease-in-out infinite;
}
.m-orb-1 { left: -6px; top: 14%; color: #ffd166; border-color: rgba(255, 209, 102, 0.6); }
.m-orb-2 { right: -4px; top: 3%; animation-delay: -1.2s; color: #ff6ec7; border-color: rgba(255, 110, 199, 0.6); }
.m-orb-3 { left: -12px; top: 46%; animation-delay: -2.4s; }
.home-page .ch-main-hero .ch-main-hero-text h1 span {
  background-image: linear-gradient(90deg, #22d3ee, #a855f7, #ff6ec7, #22d3ee) !important; background-size: 200% 100% !important; animation: mFlow 5s linear infinite;
}
.m-btn-primary { animation: mPulse 2.4s ease-in-out infinite; }
.m-btn-primary i.fa-arrow-right { font-size: 11px; transition: transform 0.3s ease; }

/* moving offer ticker */
.m-ticker { overflow: hidden; background: linear-gradient(90deg, rgba(124, 58, 237, 0.35), rgba(14, 165, 198, 0.3)); border-top: 1px solid rgba(34, 211, 238, 0.35); border-bottom: 1px solid rgba(34, 211, 238, 0.25); white-space: nowrap; }
.m-ticker-track { display: inline-flex; animation: mTicker 26s linear infinite; padding: 8px 0; }
.m-ticker-track span { display: inline-flex; align-items: center; gap: 7px; padding: 0 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #eaf2ff; }
.m-ticker-track span i { color: #22d3ee; font-size: 12px; }
@keyframes mTicker { to { transform: translateX(-50%); } }

/* quick icons: fade at the right edge tells you there is more to swipe */
.m-quick-viewport { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.m-quick a { transition: transform 0.2s ease; }

/* "View all" beside a section heading */
.home-page .home-store-area .ch-top-title { position: relative; padding-right: 84px; }
.m-viewall {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex !important; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #22d3ee; text-decoration: none; padding: 6px 12px; border: 1px solid rgba(34, 211, 238, 0.5); border-radius: 999px;
}
.m-viewall i { font-size: 10px; }

/* press feedback on everything tappable */
.offer-card:active, .store-card:active, .store-tile:active, .m-tabbar a:active, .team-item:active { transform: scale(0.985); transition: transform 0.12s ease; }

/* ---------- floating social icons: left side, level with Roxy ---------- */
.floating-social-bar {
  display: flex !important; flex-direction: column !important; gap: 8px !important; width: 36px !important; left: 10px !important; right: auto !important;
  bottom: calc(var(--m-tab) + 62px) !important; z-index: 1000;
}
.floating-social-bar .floating-social-btn { width: 36px !important; height: 36px !important; font-size: 16px !important; opacity: 0.96; }

/* ---------- about: heading, one paragraph and the button ---------- */
.home-page .about-area .about-features-wrap, .home-page .about-area .about-list, .home-page .about-area .about-left-item, .home-page .about-area .author-sign { display: none !important; }
.home-page .about-area { padding-top: 10px !important; padding-bottom: 10px !important; }
.home-page .about-area .about-wrap, .home-page .about-area .about-right-item { margin: 0 !important; }
.home-page .about-area .about-right-text {
  padding: 18px 16px !important; border-radius: 16px; border: 2px solid transparent;
  background: linear-gradient(160deg, #171d55, #0b0f34) padding-box, conic-gradient(from var(--fx-a), rgba(124, 58, 237, 0.22) 0deg, rgba(124, 58, 237, 0.22) 245deg, #7c3aed 285deg, #22d3ee 330deg, #fff 350deg, rgba(124, 58, 237, 0.22) 360deg) border-box;
  animation: fxOrbit 5.5s linear infinite;
}
.home-page .about-area .about-right-text h2 { margin: 4px 0 8px !important; }
.home-page .about-area .about-right-text p { margin: 0 0 12px !important; }
.home-page .about-area .about-bottom { margin: 0 !important; }

/* ---------- get in touch: a short compact form ---------- */
.home-page .contact-section { padding-top: 14px !important; padding-bottom: 6px !important; }
.home-page .contact-section .solar-contact { padding: 0 !important; }
.home-page .contact-section .contact-form-area {
  padding: 18px 14px !important; margin: 0 !important; border-radius: 16px; border: 2px solid transparent;
  background: linear-gradient(160deg, #171d55, #0b0f34) padding-box, conic-gradient(from var(--fx-a), rgba(124, 58, 237, 0.22) 0deg, rgba(124, 58, 237, 0.22) 245deg, #7c3aed 285deg, #22d3ee 330deg, #fff 350deg, rgba(124, 58, 237, 0.22) 360deg) border-box;
  animation: fxOrbit 5.5s linear infinite;
}
.home-page .contact-section .ch-top-title-s2 { margin-bottom: 10px !important; }
.home-page .contact-section .ch-top-title-s2 p, .home-page .contact-section .ch-top-title-s2 > i { display: none !important; }
.home-page .contact-section form .row { margin: 0 -4px; }
.home-page .contact-section form .row > [class*="col-"] { padding: 0 4px; margin-bottom: 8px; flex: 0 0 50%; max-width: 50%; }
.home-page .contact-section form .row > .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.home-page .contact-section form .form-control { height: 42px !important; font-size: 13px !important; padding: 8px 10px !important; }
.home-page .contact-section form textarea.form-control { height: 72px !important; min-height: 72px !important; }
.home-page .contact-section form .submit-area .ch-btn-style-1 { width: 100%; padding: 12px 10px !important; font-size: 13px !important; }
.home-page .contact-section .map { margin: 12px 0 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
.home-page .contact-section .map iframe { display: block; width: 100%; height: 170px !important; border-radius: 14px; }

/* ---------- company text in one animated box ---------- */
.home-page .seo-intro { padding-top: 14px !important; padding-bottom: 16px !important; }
.home-page .seo-intro .seo-card {
  padding: 18px 16px 16px; border-radius: 16px; border: 2px solid transparent;
  background: linear-gradient(160deg, #171d55, #0b0f34) padding-box, conic-gradient(from var(--fx-a), rgba(124, 58, 237, 0.22) 0deg, rgba(124, 58, 237, 0.22) 245deg, #7c3aed 285deg, #22d3ee 330deg, #fff 350deg, rgba(124, 58, 237, 0.22) 360deg) border-box;
  animation: fxOrbit 5.5s linear infinite; text-align: center;
}
.home-page .seo-intro .seo-card .ch-top-title { margin-bottom: 8px !important; text-align: center !important; }
.home-page .seo-intro .seo-card .ch-top-title h2 { font-size: 17px !important; line-height: 23px !important; }
.home-page .seo-intro-body { margin: 0 !important; max-width: none; }
.home-page .seo-intro-body:not(.is-open)::after { background: linear-gradient(180deg, rgba(11, 15, 52, 0), rgba(11, 15, 52, 0.98)); }
.home-page .seo-intro-body p { text-align: left; font-size: 13.5px; line-height: 1.65; }
.home-page .seo-intro-links { margin-top: 12px; }
.home-page .seo-intro-links a { font-size: 12px; padding: 7px 12px; }
.home-page .seo-more { margin-top: 10px; }

/* gallery filter: one swipeable line of chips instead of a tall stack */
.gallery-filter-nav { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; gap: 8px !important; margin-left: calc(-1 * var(--m-gut)) !important; margin-right: calc(-1 * var(--m-gut)) !important; padding: 4px var(--m-gut) 10px !important; scrollbar-width: none; }
.gallery-filter-nav::-webkit-scrollbar { display: none; }
.gallery-filter-nav li { flex: 0 0 auto; }
.gallery-filter-btn { white-space: nowrap; font-size: 12.5px !important; padding: 8px 14px !important; }
.inner-page .subcat-card, .inner-page .gallery-photo-card { border-radius: 14px !important; }
.inner-page .subcat-card h3, .inner-page .subcat-card .subcat-title { font-size: 16px !important; }


/* =====================================================================
   ROUND 3
   ===================================================================== */

/* ---------- header: two capsules (store icon + Get Free Quote) ---------- */
.header-main-wrap .cp-header-area-right ul { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; }
.header-main-wrap .cp-header-area-right ul li { display: block !important; }
.header-main-wrap .m-store-btn {
  display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 34px; padding: 0 !important; border-radius: 999px !important;
}
.header-main-wrap .m-store-btn i { font-size: 15px; }
.header-main-wrap .second-menu > .row > .col-4 { padding-right: 48px; }

/* ---------- hero heading: the whole line flows in colour, left to right ---------- */
.home-page .ch-main-hero .ch-main-hero-text h1 {
  background-image: linear-gradient(90deg, #ffd166, #ff9f43, #fff3c4, #ffd166) !important; background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: mFlow 9s linear infinite; text-shadow: none !important; filter: drop-shadow(0 2px 10px rgba(5, 8, 22, 0.65));
}
.home-page .ch-main-hero .ch-main-hero-text h1 span {
  background-image: linear-gradient(90deg, #22d3ee, #a855f7, #ff6ec7, #22d3ee) !important; background-size: 200% 100% !important; animation: mFlow 7s linear infinite;
}

/* ---------- ASTROLIGHT ELECTRONICS: only the heading sits in the animated box ---------- */
.home-page .seo-intro .seo-card { padding: 16px 14px 15px; margin: 0; }
.home-page .seo-intro .seo-card .ch-top-title span { font-size: 11px !important; letter-spacing: 2px; color: #22d3ee; }
.home-page .seo-intro .seo-card .ch-top-title h2 {
  background-image: linear-gradient(90deg, #22d3ee, #34d399, #fbbf24, #ff6ec7, #a78bfa, #22d3ee); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mFlow 8s linear infinite;
  font-size: 18px !important; line-height: 24px !important;
}
.home-page .seo-intro .seo-text { padding: 14px 4px 0; text-align: left; }
.home-page .seo-intro .seo-text .seo-intro-body p { color: #c5cdf0; }
.home-page .seo-intro-body:not(.is-open)::after { background: linear-gradient(180deg, rgba(6, 9, 27, 0), rgba(6, 9, 27, 0.98)); }
.home-page .seo-intro .seo-text .seo-more { display: flex; margin: 10px auto 0; }

/* ---------- immersive cards (offers, news, store, services): title floats on the photo ---------- */
.home-page .offer-card { position: relative; overflow: hidden; border-radius: 18px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.home-page .offer-card .offer-img { height: 178px !important; flex: 0 0 178px !important; }
.home-page .offer-card .offer-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0) 38%, rgba(11, 15, 52, 0.55) 68%, rgba(11, 15, 52, 0.97) 100%) !important;
}
.home-page .offer-card .offer-body { position: relative; z-index: 2; margin-top: -52px; padding: 0 14px 14px !important; }
.home-page .offer-card .offer-body h3 { font-size: 16px !important; line-height: 1.28 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); min-height: 0 !important; }
.home-page .offer-card .offer-body p { color: #b9c2ea; -webkit-line-clamp: 2; }
.home-page .offer-card .offer-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px !important; font-size: 12.5px !important; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #0ea5c6) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(14, 165, 198, 0.3);
}
.home-page .offer-card::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 46%; height: 100%; pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent); transform: skewX(-18deg); animation: mShine 7s ease-in-out infinite;
}
@keyframes mShine { 0%, 62% { left: -80%; } 100% { left: 160%; } }
.home-page .offer-card .offer-badge { box-shadow: 0 4px 12px rgba(255, 110, 199, 0.35); z-index: 3; }
.home-page .home-store-area .offer-card .offer-img { height: 190px !important; flex: 0 0 190px !important; }
.home-page .home-store-area .offer-card .offer-body h3 { font-size: 18px !important; }
.home-page .svc-card .svc-icon { z-index: 4; }

/* section headings get a small accent underline */
.home-page .ch-top-title h2::after, .home-page .ch-top-title-s2 h2::after, .home-page .ch-top-title-s3 h2::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #a855f7);
}
.home-page .seo-intro .seo-card h2::after, .home-page .announcement-section h2::after { margin-left: auto; margin-right: auto; }


/* =====================================================================
   ROUND 4 - store + gallery
   ===================================================================== */
/* the store already has one search bar at the top; the small filter box would repeat it */
.store-toolbar .store-search { display: none !important; }
.store-toolbar { margin-bottom: 12px !important; }
.store-hero .store-lead { margin-bottom: 0 !important; }
.store-hero { padding-bottom: 16px !important; }
.store-body { padding: 16px 0 34px !important; }
.store-card { border-radius: 16px !important; }
.store-card .store-card-img { aspect-ratio: auto !important; }
.store-card-body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px !important; }
.store-enquire { box-shadow: 0 4px 12px rgba(14, 165, 198, 0.25); }
.store-help { padding: 26px 0 !important; }
.store-help h3 { font-size: 18px !important; }
.store-help p { font-size: 13px !important; }
.store-part-a, .store-part-b { padding-top: 14px !important; }
.store-empty { font-size: 13.5px; padding: 18px 14px !important; }

/* gallery: photo cards with the title on the picture, like the home page cards */
.inner-page .subcat-col-item { margin-bottom: 14px; }
.inner-page .subcat-card { position: relative; overflow: hidden; border-radius: 18px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.inner-page .subcat-thumb-wrap { height: 210px !important; aspect-ratio: auto !important; }
.inner-page .subcat-thumb-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 22, 0) 38%, rgba(11, 15, 52, 0.6) 68%, rgba(11, 15, 52, 0.98) 100%); }
.inner-page .subcat-count-overlay, .inner-page .subcat-badge-overlay { z-index: 3; }
.inner-page .subcat-card-body { position: relative; z-index: 2; margin-top: -66px; padding: 0 16px 16px !important; background: none !important; }
.inner-page .subcat-card-title { font-size: 17px !important; line-height: 1.28 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); margin-bottom: 4px !important; }
.inner-page .subcat-card-desc { font-size: 12.5px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px !important; }
.inner-page .subcat-card-action { font-size: 13px; }
.inner-page .subcat-card::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 46%; height: 100%; pointer-events: none; z-index: 4;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent); transform: skewX(-18deg); animation: mShine 7s ease-in-out infinite;
}
.inner-page .gallery-photo-card { border-radius: 14px !important; }
.inner-page .subcat-count-overlay { top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; }
.inner-page .subcat-badge-overlay { top: 12px !important; left: 12px !important; }


/* =====================================================================
   ROUND 5 - gallery mosaic
   ===================================================================== */
/* project list: one wide card, then two tiles, and so on */
.inner-page #subcatCardGrid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 !important; }
.inner-page #subcatCardGrid > .subcat-col-item { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
.inner-page #subcatCardGrid > .subcat-col-item:nth-child(3n+1) { grid-column: 1 / -1; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-thumb-wrap { height: 200px !important; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-card-desc,
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-card-action { display: none !important; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-card-title { font-size: 14px !important; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-card-body { margin-top: -58px; padding: 0 12px 12px !important; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-badge-overlay .badge { font-size: 9.5px !important; padding: 4px 9px !important; }
.inner-page #subcatCardGrid > .subcat-col-item:not(:nth-child(3n+1)) .subcat-count-overlay { font-size: 10.5px !important; padding: 3px 8px !important; }

/* photos inside a project: masonry of two columns, title on the picture */
.inner-page #subcatPhotosGrid { display: block !important; column-count: 2; column-gap: 12px; margin: 0 !important; }
.inner-page #subcatPhotosGrid > [class*="col-"] { display: block; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 0 12px !important; flex: none !important; break-inside: avoid; }
.inner-page #subcatPhotosGrid > .col-12.empty-gallery-state { column-span: all; }
.inner-page .gallery-photo-card { position: relative; margin: 0 !important; border: 0 !important; background: #0b0f34 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important; }
.inner-page .gallery-photo-thumb { height: auto !important; }
.inner-page .gallery-photo-thumb img { display: block; width: 100%; height: auto !important; }
.inner-page .gallery-photo-overlay { opacity: 1 !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 8px; background: linear-gradient(180deg, rgba(5, 8, 22, 0) 55%, rgba(5, 8, 22, 0.88) 100%) !important; }
.inner-page .gallery-photo-zoom-btn { width: 30px !important; height: 30px !important; font-size: 13px !important; color: #22d3ee !important; background: rgba(5, 8, 22, 0.72) !important; box-shadow: none !important; }
.inner-page .gallery-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px !important; background: none !important; pointer-events: none; }
.inner-page .gallery-photo-title { margin: 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; color: #fff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.inner-page .gallery-photo-desc { display: none !important; }