with a column . Needs a
positioning context on the column itself. */
.botixbo .bx-misc .elementor-column.cecosystem-link,
.botixbo .bx-misc .elementor-column.mitem{ position:relative; }
.botixbo .bx-misc .bx-cardlink{
position:absolute;
inset:0;
z-index:4;
border-radius:inherit;
}
/* ------------------------------------------------ missing typography
company.css/book.css/media.css carry "class tag" descendant selectors
(.chero h1, .peditorial-copy h2, .bhero h1/p, .mhero h1/p, .mitem-body
h3) and html-embedded single classes (.coption strong/a, .bempty) that
none of convert_all.py's rule extractors capture — the same gap found
and fixed for Careers (see build_careers.py's FIXUPS comment for the
full explanation). Confirmed via compare-misc.mjs: every WP-only
typography row traced back to one of these selectors. !important
because elementor-post-N.css / widget-heading.min.css / base-desktop.css
all load after botixbo-real.css and set default heading/paragraph
typography from the Kit, which otherwise wins on source order alone.
.chero/.bhero/.mhero coexist with .bx-misc on the SAME section element
(confirmed by reading out/misc-*.json), so these must be compound
selectors (no space) rather than descendant selectors, or they never
match at all — this exact mistake was made and caught once already
for Careers' ".chero h1" rule. */
.botixbo .chero.bx-misc h1{font-size:clamp(36px,4.8vw,54px) !important;font-weight:800 !important;letter-spacing:-.02em}
.botixbo .bx-misc .peditorial-copy h2{font-size:clamp(28px,3.2vw,40px) !important;font-weight:800 !important;letter-spacing:-.01em;margin-bottom:18px}
/* "Our Mission"/"Our Vision" on About are bare
with no wrapping
class of their own — on the real site they simply inherit ordinary
body text (Tailwind's preflight resets h1-h6 font-size/weight to
inherit); confirmed by finding no ".peditorial-copy h3" rule anywhere
in program.css/company.css. Elementor's own Kit default for an
unstyled heading widget is 28px/500, so without this the two h3s render
as small headings instead of plain paragraph-weight text. */
.botixbo .bx-misc .peditorial-copy h3{font-size:16px !important;font-weight:400 !important}
.botixbo .bx-misc .coption strong{display:block !important;font-size:15px !important;color:var(--heading);margin-bottom:6px}
.botixbo .bx-misc .coption a{color:var(--blue) !important;font-weight:600 !important;font-size:14.5px !important}
.botixbo .bhero.bx-misc h1{font-size:clamp(38px,5vw,58px) !important;font-weight:800 !important;letter-spacing:-.02em}
.botixbo .bhero.bx-misc p{color:var(--muted) !important;font-size:17px !important;max-width:560px;margin:16px auto 0}
.botixbo .bx-misc .bempty{text-align:center;color:var(--muted) !important;padding:60px 0}
.botixbo .mhero.bx-misc h1{font-size:clamp(34px,4.4vw,50px) !important;font-weight:800 !important;letter-spacing:-.02em}
.botixbo .mhero.bx-misc p{color:var(--muted) !important;font-size:16px !important;max-width:520px;margin:14px auto 0}
.botixbo .bx-misc .mitem-body h3{font-size:16px !important;font-weight:700 !important;margin:4px 0;line-height:1.4}
.botixbo .bx-misc .mfeatured-outlet span{font-weight:700 !important;font-size:14px !important;color:var(--heading)}
.botixbo .bx-misc .mdemo-badge{display:inline-block;font-family:var(--mono);font-size:10px !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;color:#b45309 !important;background:#fef3c7;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}
.botixbo .bx-misc .mfeatured-body h2{font-size:clamp(20px,2.4vw,28px) !important;font-weight:800 !important;letter-spacing:-.01em;margin-bottom:10px;line-height:1.3}
.botixbo .bx-misc .mfeatured-body p{color:var(--muted) !important;font-size:14.5px !important;line-height:1.65;margin-bottom:16px}
.botixbo .bx-misc .mitem-logo{width:44px;height:44px;flex-shrink:0;border-radius:8px;overflow:hidden;position:relative;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700 !important;font-size:13px !important;color:var(--muted) !important}
.botixbo .bx-misc .mitem-meta{font-size:12.5px !important;color:var(--muted-2) !important}
/* ======================= PHONE LAYOUT — INNER PAGES
The Solutions, Services and Programs templates. Their grids already
collapse to one column on a phone, so the problem is not structure —
it is spacing. Every section carries 80-88px of padding top and bottom,
and each grid adds a 44-56px top margin, so a twelve-section page spends
well over 2000px on gaps alone before any content.
Two changes: tighten that rhythm, and keep the genuinely compact items
(topic chips, feature tiles, related cards) two-up rather than letting
them stack full-width, which is what made these pages feel endless.
Everything is behind 640px; tablet and desktop geometry is untouched. */
@media (max-width:640px){
.botixbo .phero{padding:26px 0 44px !important;}
.botixbo .peditorial,
.botixbo .ptopics,
.botixbo .pjourney,
.botixbo .pprojects,
.botixbo .poutcomes,
.botixbo .pschool,
.botixbo .ptestimonial,
.botixbo .prelated,
.botixbo .pfaq,
.botixbo .pbands,
.botixbo .pequip,
.botixbo .pformat,
.botixbo .swhat,
.botixbo .scurriculum,
.botixbo .steacher,
.botixbo .sstudent,
.botixbo .ssupport,
.botixbo .scases,
.botixbo .sprocess,
.botixbo .sdeliver,
.botixbo .swho,
.botixbo .simpact,
.botixbo .ldirectory{padding:48px 0 !important;}
/* grids sit 44-56px below their heading on desktop; far too much when
the heading is already only a line or two from the top of the screen */
.botixbo .ptopics-grid,
.botixbo .pequip-grid,
.botixbo .pprojects-grid,
.botixbo .poutcomes-grid,
.botixbo .prelated-grid,
.botixbo .swhat-grid,
.botixbo .ssupport-grid,
.botixbo .scases-grid{margin-top:26px !important;}
.botixbo .pjourney-track{margin-top:30px !important; gap:24px !important;}
.botixbo .scurriculum-track{margin-top:28px !important; gap:20px !important;}
.botixbo .phero-bands{margin-top:22px !important;}
.botixbo .phero-cta{margin-top:22px !important;}
/* Compact items stay two-up. A topic chip is a dot and two words; a
full-width row per chip is what turned these lists into screenfuls. */
.botixbo .ptopics-grid,
.botixbo .ptopics-grid > .elementor-container,
.botixbo .elementor-section.bx-ptopics-grid > .elementor-container{
grid-template-columns:1fr 1fr !important;
gap:10px !important;
}
.botixbo .ptopic{padding:13px 12px !important; font-size:13.5px !important; gap:9px !important;}
.botixbo .swhat-grid,
.botixbo .swhat-grid > .elementor-container,
.botixbo .elementor-section.bx-swhat-grid > .elementor-container{
grid-template-columns:1fr 1fr !important;
gap:10px !important;
}
/* a grid item defaults to min-width:auto, so a long label widens its
track past the screen — the same fault the homepage tech list had */
.botixbo .ptopic, .botixbo .ptopic *,
.botixbo .swhat-card, .botixbo .swhat-card *{min-width:0 !important;}
/* the dark school panel's inner padding is still desktop-sized */
.botixbo .pschool-inner{padding:32px 20px !important;}
/* equipment chips read fine three-up at this size and halve the rows */
.botixbo .pequip-grid,
.botixbo .pequip-grid > .elementor-container,
.botixbo .elementor-section.bx-pequip-grid > .elementor-container{
grid-template-columns:repeat(3,1fr) !important;
gap:8px !important;
}
.botixbo .pequip-item{padding:10px 8px !important; font-size:11.5px !important;}
.botixbo .pequip-item, .botixbo .pequip-item *{min-width:0 !important;}
/* poutcomes-grid goes two-up at 920px and has no smaller breakpoint, so
on a 320px screen the two tracks cannot fit and the cards ran off the
right edge — measured on eight Programs pages. One column below 420. */
.botixbo .poutcome, .botixbo .poutcome *{min-width:0 !important;}
.botixbo .poutcome{padding:18px 16px !important;}
/* Related-programme cards were the single largest use of height across
all 29 pages (30,000px summed). At one column each card is a
353x220 image plus its body — roughly 310px per card, four to six
cards per page. Two-up halves the rows and shortens each one. */
.botixbo .prelated-grid,
.botixbo .prelated-grid > .elementor-container,
.botixbo .elementor-section.bx-prelated-grid > .elementor-container{
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
.botixbo .prelated-body{padding:11px 12px 14px !important;}
.botixbo .prelated-body h3{font-size:13.5px !important; line-height:1.25 !important;}
.botixbo .prelated-body p{font-size:12px !important; line-height:1.45 !important;}
.botixbo .prelated-card, .botixbo .prelated-card *{min-width:0 !important;}
/* the testimonial card keeps its 48px/40px desktop padding on a phone */
.botixbo .ptestimonial-card{
padding:26px 20px !important; margin-top:26px !important; border-radius:18px !important;
}
.botixbo .ptestimonial-quote{font-size:17px !important; line-height:1.45 !important;}
.botixbo .ptestimonial-person{margin-top:18px !important; gap:11px !important;}
.botixbo .ptestimonial-avatar{width:42px !important; height:42px !important;}
/* Below 420px two columns of outcome cards genuinely do not fit — each
card carries 16px of padding a side and the headings do not
hyphenate, which is what pushed them off the right edge. */
@media (max-width:420px){
.botixbo .poutcomes-grid,
.botixbo .poutcomes-grid > .elementor-container,
.botixbo .elementor-section.bx-poutcomes-grid > .elementor-container{
grid-template-columns:1fr !important;
}
}
/* headings and leads carry desktop measures into a 353px column */
.botixbo .phero-title{line-height:1.06 !important;}
.botixbo .sec-title{line-height:1.14 !important;}
.botixbo .sec-sub{font-size:15px !important; line-height:1.55 !important;}
}
/* The ported design styles every dropdown link as a single-line list row:
`.botixbo .navi-menu a{display:block;padding:10px 16px;white-space:nowrap}`.
That selector is (0,2,1) and `.botixbo .mm-card` is only (0,2,0), so it
won — the card descriptions refused to wrap, the grid overflowed its
track and the promo column was painted over the second column of cards.
Reset it here, and scope the card rules through .navi-mega so they are
(0,3,0) and outrank it. */
.botixbo .navi-mega a:not(.mm-cta){
white-space:normal;
/* padding is intentionally NOT reset here: .mm-card sets its own
16px/18px and is (0,3,0). This reset rule is (0,3,1) - the .mm-cta
class stashed inside :not() plus the bare "a" type selector both
add to its specificity - so a padding:0 here would beat .mm-card's
own padding and win, which is exactly what happened: every card
rendered with zero padding until this was removed. */
border-radius:inherit;
font-weight:inherit;
}
.botixbo .navi-mega a:not(.mm-cta):hover{background:none;}
/* .mm-cta is excluded above rather than reset and rebuilt: it is a real
.btn.btn-primary, so leaving it alone keeps the site's own button —
gradient, shadow, hover lift — instead of a second copy of those
values here that would drift from the design. */
.botixbo .navi-mega a.mm-cta{white-space:nowrap;}
/* ===================================================== MEGA MENU
Solutions / Programs / Services. Replaces the 220px-wide list
dropdown with the panel design: eyebrow, heading and lead on the
left, a two-up card grid under them, and a promo column on the right.
Only these three groups get it (.navi-mega); Impact and Resources keep
the simple list, which suits two and one entries respectively.
The panel is centred on the viewport rather than aligned to its
trigger: at 1100px a 1140px panel hung off the right edge when opened
from "Services". Centring is also why it needs position:fixed — an
absolutely-positioned panel is trapped in the header's 1200px wrap.
------------------------------------------------------------------ */
.botixbo .navi-menu.navi-mega{
position:fixed;
top:var(--bx-header-h,88px);
left:50%;
transform:translateX(-50%);
width:min(1180px, calc(100vw - 48px));
max-height:calc(100dvh - var(--bx-header-h,88px) - 24px);
overflow-y:auto;
padding:0;
border-radius:18px;
border:1px solid var(--line);
background:#fff;
box-shadow:0 40px 80px -40px rgba(15,23,42,.42);
}
@supports not (height:100dvh){
.botixbo .navi-menu.navi-mega{
max-height:calc(100vh - var(--bx-header-h,88px) - 24px);
}
}
/* The trigger and the panel no longer touch, so the pointer would leave
.navi crossing the gap and the panel would close. A transparent bridge
across the gap keeps :hover alive without shifting the layout. */
.botixbo .navi:has(.navi-mega)::after{
content:"";
position:absolute;
top:100%;
left:-24px; right:-24px;
height:18px;
}
.botixbo .mm{
display:grid;
grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
gap:0;
align-items:stretch;
}
.botixbo .mm-main{padding:30px 30px 32px; min-width:0;}
.botixbo .mm-eyebrow{
font-family:var(--mono);
font-size:11px; font-weight:500; letter-spacing:.15em;
text-transform:uppercase; color:var(--muted-2, #94a3b8);
margin:0 0 10px;
}
.botixbo .mm-title{
font-family:var(--disp);
font-size:26px; font-weight:700; letter-spacing:-.02em;
color:var(--heading, #0f172a); margin:0;
}
.botixbo .mm-lead{
font-size:14.5px; line-height:1.5; color:var(--muted);
margin:8px 0 0; max-width:60ch;
}
.botixbo .mm-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:22px;
}
/* 2 columns, not 3. A true 3-up layout was tried (compact icon, tighter
padding, smaller type) and "School Competitions" / "Government
Projects" still wrapped to two lines at every width the panel's own
max-width allows - there simply isn't enough room in a 3-way split of
this panel for both of those titles to stay on one line without
shrinking the cards to look visibly smaller than the ones above them.
2 columns is the layout that keeps every title on one line at every
width, which is what was asked for. */
.botixbo .mm-grid-3{grid-template-columns:1fr 1fr;}
/* Two different treatments for a trailing card alone in the final row:
Programs' "AR / VR / MR" (9 items in a 2-column grid) spans the full
row as one wide card - icon, text and arrow on one line - matching the
reference supplied for it.
Services' "Government Projects" (3rd of 3 in Partnerships) instead
stays centred at the same half-width its siblings use, which is how it
already looked and was confirmed to be correct as-is.
The Partnerships grid element carries BOTH classes
(`class="mm-grid mm-grid-3"`), so the plain rule needs :not(.mm-grid-3)
to reach only the main .mm-grid - otherwise it would also match the
Partnerships grid and fight the more specific .mm-grid-3 rule below. */
.botixbo .navi-mega .mm-grid:not(.mm-grid-3) > .mm-card:last-child:nth-child(odd){
grid-column:1 / -1;
}
.botixbo .navi-mega .mm-grid-3 > .mm-card:last-child:nth-child(odd){
grid-column:1 / -1;
max-width:calc(50% - 6px);
justify-self:center;
}
/* Each card is a real anchor, so the whole tile is one tab stop and one
click target — no overlay trick needed here. */
.botixbo .navi-mega .mm-card{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:start;
gap:14px;
padding:16px 18px;
border:1px solid var(--line);
border-radius:13px;
background:#fff;
text-decoration:none;
transition:border-color .2s var(--ease,ease), transform .2s var(--ease,ease),
box-shadow .2s var(--ease,ease);
}
.botixbo .navi-mega .mm-card:hover{
border-color:rgba(37,99,235,.35);
transform:translateY(-2px);
box-shadow:0 14px 28px -18px rgba(15,23,42,.3);
}
.botixbo .mm-ico{
width:46px; height:46px; border-radius:13px;
display:grid; place-items:center; flex-shrink:0;
/* the tile sits on the first text line, not the middle of a two-line
card - which is what the design shows and what looked misaligned */
align-self:start;
}
.botixbo .mm-ico svg{width:23px; height:23px;}
.botixbo .mm-txt{display:block; min-width:0;}
.botixbo .mm-txt strong{
display:block;
font-family:var(--disp);
font-size:15.5px; font-weight:700; line-height:1.3;
color:var(--heading, #0f172a);
}
/* The real shortDescriptions run to a full sentence or two; the design
shows one or two lines, so clamp rather than truncate the source. */
.botixbo .mm-desc{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin-top:4px;
font-size:13px; line-height:1.5; color:var(--muted);
}
.botixbo .mm-go{
width:18px; height:18px; color:var(--blue);
/* Always shown. Revealing it on hover meant a visitor could not tell a
card was a link until the pointer was already on it, and it made the
row look unfinished against the design. */
align-self:center;
flex-shrink:0;
transition:transform .2s var(--ease,ease);
}
.botixbo .navi-mega .mm-card:hover .mm-go{transform:translateX(3px);}
.botixbo .mm-sublabel{
font-family:var(--mono);
font-size:10.5px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted-2, #94a3b8);
margin:20px 0 10px;
padding-top:16px;
border-top:1px solid var(--line);
}
/* ---- promo column ----
A real photo (each panel's own --mm-photo custom property, set inline
per menu in build_megamenu.py) sits behind a gradient that keeps the
text legible over the top-left of the image while the photo itself
stays visible lower-right, same composition as the reference posters.
Layered as two background-images rather than a separate overlay
element, since nothing here needs to be an independent DOM node. */
.botixbo .mm-side{
position:relative;
padding:28px 26px 0;
background-image:
linear-gradient(135deg,
rgba(238,244,255,.97) 0%, rgba(238,244,255,.92) 38%,
rgba(238,244,255,.55) 62%, rgba(238,244,255,.22) 100%),
var(--mm-photo);
background-size:cover, cover;
background-position:center, center;
border-left:1px solid var(--line);
border-radius:0 18px 18px 0;
display:flex; flex-direction:column;
justify-content:space-between;
min-width:0;
overflow:hidden;
}
.botixbo .mm-side-top{position:relative; z-index:1;}
.botixbo .mm-side-title{
font-family:var(--disp);
font-size:27px; font-weight:700; line-height:1.16; letter-spacing:-.02em;
color:var(--heading, #0f172a); margin:0;
}
/* Every heading line is its own now (build_megamenu.py writes
one per line of the design's heading, 2 or 3 depending on the menu),
stacked with display:block rather than joined by
- simpler to
colour a middle line blue without a second element. */
.botixbo .mm-side-title span{display:block;}
.botixbo .mm-side-title span.mm-side-blue{color:var(--blue);}
.botixbo .mm-side-lead{
font-size:13.5px; line-height:1.55; color:var(--muted);
margin:10px 0 18px;
}
.botixbo .navi-mega .mm-cta{
align-self:flex-start;
display:inline-flex; align-items:center; gap:8px;
font-size:14px;
}
.botixbo .navi-mega .mm-cta svg{width:16px; height:16px;}
/* Handwritten annotation - a real Google Font (Caveat), not a scripted
approximation, giving the panel the same informal, marker-pen note the
reference posters carry ("Labs that Inspire" etc). Sits under the CTA,
tilted slightly so it reads as an annotation rather than body copy. */
.botixbo .mm-note{
display:flex; align-items:flex-start; gap:6px;
margin-top:16px;
font-family:'Caveat', cursive;
font-size:20px; font-weight:700; line-height:1.15;
color:var(--blue); transform:rotate(-3deg);
max-width:70%;
}
.botixbo .mm-note-arrow{
width:34px; height:26px; flex-shrink:0; margin-top:6px;
color:var(--blue); opacity:.8;
}
/* Stat strip - the site's own verified figures (see build_megamenu.py's
STATS table), in the icon+number+label format the reference posters
use for their (unverified) numbers. Sits on its own light band at the
foot of the panel so it reads clearly over the photograph beneath it. */
.botixbo .mm-stats{
position:relative; z-index:1;
display:flex; align-items:flex-start;
gap:0;
margin-top:20px;
padding:16px 0 18px;
border-top:1px solid rgba(15,23,42,.08);
background:rgba(255,255,255,.72);
backdrop-filter:blur(2px);
}
.botixbo .mm-stat{
flex:1 1 0;
display:flex; flex-direction:column; align-items:flex-start;
gap:3px;
padding:0 12px;
border-left:1px solid rgba(15,23,42,.1);
}
.botixbo .mm-stat:first-child{border-left:0;}
.botixbo .mm-stat-ico{
width:26px; height:26px; margin-bottom:2px;
display:flex; align-items:center; justify-content:center;
color:var(--blue);
}
.botixbo .mm-stat-ico svg{width:18px; height:18px;}
.botixbo .mm-stat-num{
font-family:var(--disp); font-size:19px; font-weight:800;
color:var(--heading, #0f172a); line-height:1;
}
.botixbo .mm-stat-label{
font-size:11px; line-height:1.3; color:var(--muted);
font-weight:500;
}
/* ---- icon tones, matching the design's coloured tiles ---- */
.botixbo .mm-ico.t-blue{background:#e8efff; color:#2563eb;}
.botixbo .mm-ico.t-violet{background:#f1ebfe; color:#7c3aed;}
.botixbo .mm-ico.t-green{background:#e6f6ef; color:#0f9d63;}
.botixbo .mm-ico.t-amber{background:#fdf1e3; color:#d97706;}
.botixbo .mm-ico.t-pink{background:#fdeaf2; color:#db2777;}
.botixbo .mm-ico.t-teal{background:#e4f5f7; color:#0e90a8;}
/* ---- laptop: the promo column is the first thing to give ---- */
@media (max-width:1365px){
.botixbo .navi-menu.navi-mega{width:min(1080px, calc(100vw - 36px));}
.botixbo .mm{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);}
.botixbo .mm-side-title{font-size:22px;}
.botixbo .mm-title{font-size:21px;}
}
/* ---- small laptop: drop the promo column, keep the cards two-up ---- */
@media (max-width:1200px){
.botixbo .navi-menu.navi-mega{width:calc(100vw - 32px);}
.botixbo .mm{grid-template-columns:minmax(0,1fr);}
.botixbo .mm-side{
border-left:0; border-top:1px solid var(--line);
border-radius:0 0 18px 18px;
/* bottom stays 0, same reasoning as the base rule: .mm-stats supplies
its own vertical padding so the strip's band reaches the edge */
padding:20px 24px 0;
}
.botixbo .mm-grid-3{grid-template-columns:1fr 1fr;}
}
/* ==========================================================
MEGA MENU — POLISH OVERRIDE (user-authored, folded into the
canonical theme source so future automated redeploys no longer
silently revert it — see BOTIXBO_MEGAMENU_MERGE_REPORT.md).
Stats-bar icon/number layout (mm-stat-ico/mm-stat-num) intentionally
NOT applied here: it assumes new fill-based stat icons paired with
placeholder marketing numbers (500+/100K+); this site's stat icons
are stroke-based and show real, verified counts (11/9/8/9), so
forcing fill:currentColor;stroke:none would render them blank/wrong.
========================================================== */
.botixbo{
--mm-note-size:17px;
--mm-lead-color:#3b4a5f;
}
.botixbo .navi-menu.navi-mega{
top:calc(var(--bx-header-h,88px) - 2px) !important;
}
.botixbo .navi:has(.navi-mega)::after{
top:100% !important;
height:32px !important;
}
.botixbo .mm-side{
background-image:
linear-gradient(to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 24%, rgba(255,255,255,0) 44%),
var(--mm-photo) !important;
background-color:transparent !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-position:center center !important;
}
.botixbo .mm-side::before{
background:linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 44%) !important;
opacity:1 !important;
pointer-events:none !important;
}
.botixbo .navi-mega .mm-go{
display:block !important;
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
color:#1677f9 !important;
opacity:1 !important;
visibility:visible !important;
}
.botixbo .navi-mega .mm-card{
grid-template-columns:46px minmax(0,1fr) 20px !important;
align-items:center !important;
}
.botixbo .mm-grid-3{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px !important;
width:100% !important;
}
.botixbo .mm-grid-3 > .mm-card,
.botixbo .mm-grid-3 > .mm-card:last-child:nth-child(odd){
width:auto !important;
min-width:0 !important;
max-width:none !important;
grid-column:auto !important;
justify-self:stretch !important;
}
.botixbo .navi-mega .mm-ico.ic-blue{background:#e6f0ff !important}
.botixbo .navi-mega .mm-ico.ic-violet{background:#f0e9ff !important}
.botixbo .navi-mega .mm-ico.ic-yellow{background:#fff5d1 !important}
.botixbo .navi-mega .mm-ico.ic-orange{background:#ffeedb !important}
.botixbo .navi-mega .mm-ico.ic-green{background:#e0f7e9 !important}
.botixbo .navi-mega .mm-ico.ic-pink{background:#ffe5eb !important}
.botixbo .navi-mega .mm-ico.ic-teal{background:#dcf7f2 !important}
.botixbo .navi-mega .mm-ico.ic-cyan{background:#dcf3fb !important}
.botixbo .navi-mega .mm-ico svg{
transform:scale(1.05) !important;
transform-origin:center !important;
}
.botixbo .nav-links > .navi:nth-child(1) .mm-note,
.botixbo .nav-links > .navi:nth-child(3) .mm-note{
font-size:var(--mm-note-size) !important;
line-height:1.2 !important;
}
.botixbo .mm-side .mm-side-lead{
color:var(--mm-lead-color) !important;
}
/* .mm-side uses justify-content:space-between, which pins the stats bar
to the very bottom of the panel — as tall as the left card grid (up to
4 rows for Solutions). On short viewports the panel's own max-height/
overflow-y:auto then clips mid-row through the stats bar, which looks
like it's overlapping the page behind it. Pulling stats up with a fixed
gap instead keeps it comfortably inside the visible area. */
.botixbo .mm-side{justify-content:flex-start !important;}
.botixbo .mm-stats{margin-top:auto !important;}
/* Stats bar layout — now safe to apply: stat icons above were swapped to
fill-based SVGs (cap/people/trophy) to match this rule's fill:currentColor
expectation, while keeping the real, verified numbers/labels intact. */
.botixbo .mm-stats{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) !important;
align-items:center !important;
gap:0 14px !important;
width:100% !important;
padding:10px 7px !important;
background:#fff !important;
border-top:1px solid rgba(15,23,42,.07) !important;
border-radius:12px 12px 0 0 !important;
box-sizing:border-box !important;
}
.botixbo .mm-stat{
min-width:0 !important;
display:grid !important;
grid-template-columns:30px minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
column-gap:10px !important;
row-gap:1px !important;
align-items:center !important;
padding:2px 10px !important;
border-left:0 !important;
}
.botixbo .mm-stat-ico{
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:30px !important;
height:30px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#1677f9 !important;
}
.botixbo .mm-stat-ico svg{
width:30px !important;
height:30px !important;
fill:currentColor !important;
stroke:none !important;
}
.botixbo .mm-stat-num{
grid-column:2 !important;
grid-row:1 !important;
display:block !important;
margin:0 !important;
font-size:16px !important;
line-height:1.15 !important;
font-weight:700 !important;
color:#0f172a !important;
white-space:nowrap !important;
}
.botixbo .mm-stat-num.mm-stat-num-text{
font-size:13.5px !important;
letter-spacing:-.1px !important;
}
.botixbo .mm-stat:last-child{
padding-right:4px !important;
}
.botixbo .mm-stat-label{
grid-column:2 !important;
grid-row:2 !important;
display:block !important;
margin:0 !important;
font-size:12px !important;
line-height:1.2 !important;
font-weight:500 !important;
color:#64748b !important;
white-space:normal !important;
}
/* Elementor's own per-page CSS sets .elementor-widget-heading
.elementor-heading-title to the global kit color, at the same
specificity as our wrapper-level dark-section overrides above and
loaded after them, so it was winning ties and leaving headings in
dark sections dark-on-dark. Re-declaring the same overrides one
level deeper, reaching .elementor-heading-title directly, restores
the intended white text without touching the wrapper rules. */
.botixbo .sdeliver .sec-title .elementor-heading-title{color:#fff}
.botixbo .services .sec-title .elementor-heading-title{color:#fff}
.botixbo .services .sec-title.blue .elementor-heading-title{color:#fff}
.botixbo .projects .sec-title .elementor-heading-title{color:#fff}
.botixbo .pjourney .sec-title .elementor-heading-title{color:#fff}
/* Human-readable HTML sitemap page (/sitemap/, post 811). Styles Rank
Math's default HTML Sitemap module output to match the site's design
system, since Rank Math ships no styling of its own for these classes. */
body.page-id-811 h1{max-width:var(--maxw);margin:0 auto;padding:56px 28px 4px;font-size:clamp(32px,4.5vw,52px);font-weight:800}
body.page-id-811 .rank-math-html-sitemap{max-width:var(--maxw);margin:0 auto;padding:12px 28px 96px}
body.page-id-811 .rank-math-html-sitemap__title{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:20px 0 24px}
body.page-id-811 .rank-math-html-sitemap__section>.rank-math-html-sitemap__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 32px;align-items:start}
body.page-id-811 .rank-math-html-sitemap__link{color:var(--ink);text-decoration:none;transition:color .2s;display:inline-block;padding:2px 0}
body.page-id-811 .rank-math-html-sitemap__link:hover{color:var(--blue)}
body.page-id-811 .rank-math-html-sitemap__section>.rank-math-html-sitemap__list>.rank-math-html-sitemap__item>.rank-math-html-sitemap__link{font-weight:700;font-size:15px;color:var(--heading)}
body.page-id-811 .rank-math-html-sitemap__item .rank-math-html-sitemap__list{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
body.page-id-811 .rank-math-html-sitemap__item .rank-math-html-sitemap__list .rank-math-html-sitemap__link{color:var(--muted);font-size:13.5px;font-weight:400}
@media(max-width:600px){
body.page-id-811 h1{padding:40px 20px 4px}
body.page-id-811 .rank-math-html-sitemap{padding:8px 20px 72px}
}
/* === BOOKS SHELF RESPONSIVE FIX — 2026-10-01 === */
/* ── Homepage "Learning Beyond the Lab" book shelf — responsive fix ──────────
.books is an Elementor SECTION, so its only child is .elementor-container;
the three .book columns live inside that. The earlier rules put the grid on
the section itself (and used repeat(4,1fr) for three books), so they never
governed the covers — meanwhile .book kept a hard width:180px !important at
every breakpoint. Below ~1100px three 180px covers stop fitting and wrap
into a vertical stack. This applies the same section/container pattern that
.bx-res-grid already uses, and makes the cover width fluid. */
.botixbo .elementor-section.books{display:block !important;}
.botixbo .elementor-section.books > .elementor-container{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:start;
gap:18px !important;
width:100%;
}
.botixbo .elementor-section.books > .elementor-container > .elementor-column.book{
width:100% !important;
max-width:180px !important;
min-width:0 !important;
flex:0 0 auto !important;
}
@media(max-width:1100px){
.botixbo .elementor-section.books > .elementor-container{gap:14px !important;}
.botixbo .elementor-section.books > .elementor-container > .elementor-column.book{max-width:none !important;}
}
@media(max-width:480px){
.botixbo .elementor-section.books > .elementor-container{gap:10px !important;}
}
/* === FOOTER RESPONSIVE FIX — 2026-10-01 === */
/* ── Footer responsive fix ──────────────────────────────────────────────
.foot-grid has FIVE children (.foot-brand + 4x .fcol) but collapses to a
2-column grid at <=1000px and stays 2-up all the way down to phones. With
five items in two columns the last one ("Contact") is orphaned beside an
empty half, and the shorter brand block leaves a tall ragged gap before
the next row. Below ~400px the narrow columns also wrapped link labels
("AI & Robotics Labs", "Composite Skill Lab") onto two lines.
Giving the brand its own full-width row turns the four link columns into a
clean 2x2 at every width below the 5-column desktop layout, and widens
each column enough that the labels fit on one line. */
@media(max-width:1000px){
.botixbo .foot-grid > .foot-brand{grid-column:1 / -1;}
.botixbo .foot-brand p{max-width:none;}
}
@media(max-width:640px){
.botixbo .foot-grid{grid-template-columns:1fr 1fr; gap:30px 20px;}
}
/* === HEADER LOGO RESPONSIVE FIX — 2026-10-01 === */
/* ── Header logo responsive fix ─────────────────────────────────────────
.logo .lockup is a fixed 176x52 box at EVERY width, with no media query
reducing it. Since the logo image is position:absolute/width:100% inside
that box, it never scales down: at 430px it occupies 41% of the screen,
at 390px 45%, and at 360px 49% - nearly half the viewport. Step the box
down on phones. Aspect ratio is preserved (object-fit:contain already
letterboxes the image, so the logo itself is never distorted).
.nav height is deliberately left alone - sticky-header scroll offsets
elsewhere in this file depend on it. */
@media(max-width:640px){
.botixbo header .logo .lockup{width:150px; height:45px;}
}
@media(max-width:400px){
.botixbo header .logo .lockup{width:134px; height:40px;}
}