/*
Theme Name:   Yaobai Cement Karamoja
Theme URI:    https://yaobai.test
Description:  Child theme of Hello Elementor for the Yaobai Cement Karamoja website. Holds brand tokens, fonts and custom overrides. Built with Elementor + Smart Slider.
Author:       Cyberspro
Template:     hello-elementor
Version:      0.1.0
Text Domain:  yaobai-child
*/

/* -------------------------------------------------------------
   Brand tokens — PLACEHOLDER values reverse-engineered from the
   PDF renders. Replace with exact brand-guide values once the
   design source (Figma/XD) or brand guide is provided.
   ------------------------------------------------------------- */
/* ===== Outfit — self-hosted, site-wide font ===== */
@font-face { font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap; src:url('assets/fonts/Outfit-Light.ttf') format('truetype'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/Outfit-Regular.ttf') format('truetype'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/Outfit-Medium.ttf') format('truetype'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/Outfit-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/Outfit-Bold.ttf') format('truetype'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:900; font-display:swap; src:url('assets/fonts/Outfit-Black.otf') format('opentype'); }

/* Apply Outfit across the whole site */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.hfe-nav-menu a, .elementor-button, .ff-btn-submit,
.elementor-widget-container {
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root{
  --yb-blue-900:#233e7f;   /* deep navy — header, footer, primary (brand) */
  --yb-blue-700:#2c4c98;   /* secondary navy */
  --yb-cyan-500:#29abe2;   /* bright cyan — accents, buttons, links */
  --yb-cyan-400:#37c0f4;   /* hover cyan */
  --yb-blue-electric:#0b57d0; /* gradient end (Videos tab) */
  --yb-grey-100:#eef1f4;   /* light section background */
  --yb-grey-300:#c9d3dd;   /* placeholder image blocks */
  --yb-ink:#1c2530;        /* body text */
  --yb-white:#ffffff;
}

/* Utility bridges so Elementor global colors and hand-CSS agree.
   (Set the matching values inside Elementor > Site Settings > Global Colors.) */

/* Home hero: right-align the language selector */
.yb-lang-right { text-align: right; }
.yb-lang-right .gtranslate_wrapper { display: inline-block; }

/* GTranslate: make the language dropdown OVERLAY instead of pushing the header
   down. By default GTranslate's .gt_option list is position:relative, so opening
   it grows the bar in-flow. Absolute-positioning it overlays cleanly. */
.gtranslate_wrapper .gt_switcher, .gtranslate_wrapper .gt_switcher a { font-family: 'Outfit', sans-serif !important; }
.gtranslate_wrapper .gt_switcher { position: relative !important; overflow: visible !important; }
.gtranslate_wrapper .gt_switcher .gt_option {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 9999 !important;
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Header search bar (main nav row) */
.yb-header-search form { position: relative; width: 100%; max-width: 300px; }
.yb-header-search input[type="search"] { width: 100%; border: 1px solid #d3dbe5; border-radius: 30px; padding: 9px 42px 9px 18px; font-size: 14px; outline: none; }
.yb-header-search input[type="search"]:focus { border-color: var(--yb-cyan-500); }
.yb-header-search button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--yb-cyan-500); cursor: pointer; font-size: 15px; padding: 4px; }

/* Home hero audience menu: centered, larger, bold links */
.yb-hero-menu .hfe-nav-menu,
.yb-hero-menu .hfe-nav-menu__layout { width: 100%; justify-content: center; }
.yb-hero-menu .hfe-nav-menu a,
.yb-hero-menu a.hfe-menu-item { font-size: 24px; font-weight: 700; letter-spacing: .3px; }

/* Home hero: ALL welcome words scroll together in a continuous marquee ribbon */
.yb-welcome { position: relative; overflow: hidden; width: 100%; height: 120px; margin: 6px 0 16px; }
.yb-welcome-track { display: flex; align-items: center; width: max-content; height: 120px; will-change: transform; animation: yb-marquee 28s linear infinite; }
.yb-welcome:hover .yb-welcome-track { animation-play-state: paused; }
.yb-welcome-word { flex: 0 0 auto; padding: 0 48px; white-space: nowrap; font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--yb-cyan-500); font-size: 96px; line-height: 120px; }
@keyframes yb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .yb-welcome, .yb-welcome-track { height: 78px; } .yb-welcome-word { font-size: 56px; line-height: 78px; padding: 0 30px; } }
@media (max-width: 480px) { .yb-welcome, .yb-welcome-track { height: 60px; } .yb-welcome-word { font-size: 44px; line-height: 60px; padding: 0 22px; } }

/* Home hero logo: smaller + nudged up */
.yb-hero-logo { margin-top: -30px; }
.yb-hero-logo img { max-width: 150px; }

/* Home three-photo band: full-width, flush, images fully cover (no gaps/whitespace) */
.yb-photoband { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.yb-photoband a { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 4.6; }
.yb-photoband img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
/* Rollover: zoom the image, deepen it, and fade in a brand-blue veil + "View" cue */
.yb-photoband a::after { content: "\2192"; font-family: 'Outfit', sans-serif; font-weight: 700; position: absolute; right: 22px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: var(--yb-cyan-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.yb-photoband a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,62,127,.60), rgba(35,62,127,0) 55%); opacity: 0; transition: opacity .4s ease; z-index: 1; }
.yb-photoband a:hover img { transform: scale(1.08); filter: brightness(.8); }
.yb-photoband a:hover::before { opacity: 1; }
.yb-photoband a:hover::after { opacity: 1; transform: translateY(0); z-index: 2; }
@media (max-width: 600px) { .yb-photoband { grid-template-columns: 1fr; } .yb-photoband a { aspect-ratio: 16 / 10; } }

/* Kill column gaps in the three-photo band so tiles sit flush */
.yb-photo-band .elementor-column-gap-no .elementor-column { padding: 0 !important; }
.yb-photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   INTERIOR PAGE TEMPLATE  (hero + stepper + tabs + card grid)
   ============================================================ */

/* --- grey hero: search pill + page title --- */
.yb-search-form { max-width: 640px; margin: 0 auto 8px; position: relative; }
.yb-search-form input[type="search"] {
  width: 100%; border: none; border-radius: 40px;
  padding: 16px 24px 16px 54px; font-size: 16px;
  box-shadow: 0 3px 14px rgba(0,0,0,.08); outline: none;
}
.yb-search-form button {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--yb-cyan-500); font-size: 18px; cursor: pointer;
}
.yb-page-title h1, .yb-page-title .elementor-heading-title {
  color: var(--yb-cyan-500); font-family: Outfit, sans-serif; font-weight: 600;
}

/* --- navy numbered stepper --- */
.yb-stepper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; }
.yb-step { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; }
.yb-step .n {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto;
}
.yb-step.is-active .n { background: var(--yb-cyan-500); border-color: var(--yb-cyan-500); }
.yb-step:hover { color: var(--yb-cyan-500); }

/* --- Articles / Videos tabs (styling the core Elementor Tabs widget) --- */
.yb-tabs .elementor-tabs-wrapper { display: flex; max-width: 840px; margin: 0 auto; gap: 0; }
.yb-tabs .elementor-tab-title {
  flex: 1; text-align: center; font-size: 26px; font-weight: 600; color: #fff !important;
  background: #8a8f98; padding: 20px 10px; cursor: pointer; border: none !important; margin: 0;
  font-family: Outfit, sans-serif;
}
.yb-tabs .elementor-tab-title.elementor-active { background: linear-gradient(90deg, #12b5d6, var(--yb-blue-electric)); }
.yb-tabs .elementor-tab-content { padding: 40px 0 0; border: none !important; }
.yb-tabs .elementor-tabs-content-wrapper { border: none !important; }

/* --- card grid inside the tabs --- */
.yb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1140px; margin: 0 auto; }
.yb-card { display: block; text-decoration: none; color: var(--yb-ink); transition: transform .15s ease; }
.yb-card:hover { transform: translateY(-4px); }
.yb-card-img { display: block; background: #dbe6f0 center / cover no-repeat; border-radius: 6px; aspect-ratio: 4/3; margin-bottom: 14px; }
.yb-cards-empty { text-align: center; color: #7a8595; font-size: 15px; padding: 30px 0; grid-column: 1 / -1; }
.yb-card h4 { font-family: Outfit, sans-serif; font-size: 18px; margin: 0 0 6px; color: var(--yb-blue-900); }
.yb-card p { margin: 0; font-size: 14px; color: #5b6672; line-height: 1.5; }
@media (max-width: 900px) { .yb-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .yb-cards { grid-template-columns: 1fr; } .yb-tabs .elementor-tab-title { font-size: 20px; } }

/* ============================================================
   OUR PRODUCTS
   ============================================================ */
.yb-underline { width: 120px; height: 4px; background: var(--yb-cyan-500); border: 0; margin: 10px 0 22px; }

/* Our Products hero — mascot overflows the navy hero onto the white below */
.yb-prodhero { position: relative; background: var(--yb-blue-900); padding: 54px 40px 34px; }
.yb-prodhero-text { max-width: 640px; }
.yb-prodhero-text h1 { color: var(--yb-cyan-500); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 84px; line-height: 1; margin: 0 0 6px; }
.yb-prodhero-text p { color: #dfe6f2; font-size: 18px; line-height: 1.6; margin: 0; max-width: 520px; }
.yb-prodhero-mascot { position: absolute; right: 70px; top: 20px; height: 520px !important; width: auto !important; z-index: 6; pointer-events: none; }
@media (max-width: 900px) { .yb-prodhero-mascot { height: 360px !important; right: 10px; } .yb-prodhero-text h1 { font-size: 52px; } }
@media (max-width: 600px) { .yb-prodhero-mascot { display: none; } .yb-prodhero { padding-bottom: 34px; } }
.yb-hero-lead { color: #dfe6f2; font-size: 18px; line-height: 1.6; max-width: 560px; }

/* cement product cards */
.yb-cement .elementor-widget-heading .elementor-heading-title { color: var(--yb-blue-900); font-family: Outfit, sans-serif; }
.yb-cement-spec { color: #5b6672; font-size: 15px; }

/* Cement products grid: row of 2 (mascot overlaps the empty right cell) + row of 3 */
.yb-cem { max-width: 1160px; margin: 0 auto; }
.yb-cem-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 44px; }
.yb-cem-row:last-child { margin-bottom: 0; }
.yb-prod { text-align: center; }
.yb-prod-img img { width: 100%; height: auto; display: block; }
.yb-prod h4 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--yb-blue-900); font-size: 20px; margin: 14px 0 3px; }
.yb-prod-spec { color: #5b6672; font-size: 14px; margin: 0 0 14px; }
.yb-prod-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.yb-prod-btn { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 4px; text-decoration: none; transition: all .15s ease; }
.yb-prod-btn.quote { background: var(--yb-cyan-500); color: #fff !important; }
.yb-prod-btn.quote:hover { background: var(--yb-blue-electric); color: #fff !important; }
.yb-prod-btn.more { background: transparent; color: var(--yb-blue-900) !important; border: 2px solid var(--yb-blue-900); padding: 7px 16px; }
.yb-prod-btn.more:hover { background: var(--yb-blue-900); color: #fff !important; }
@media (max-width: 768px) { .yb-cem-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .yb-cem-row { grid-template-columns: 1fr; } }

/* other concrete products grid */
.yb-otherprods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1160px; margin: 0 auto; }
.yb-oprod { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.yb-oprod .img { display: block; aspect-ratio: 4 / 3; background: #f3f5f7 center / cover no-repeat; }
.yb-oprod .name { background: var(--yb-blue-900); color: #fff; font-family: Outfit, sans-serif; font-weight: 600; padding: 13px 10px; font-size: 15px; text-align: center; }
@media (max-width: 900px) { .yb-otherprods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yb-otherprods { grid-template-columns: 1fr; } }

/* request-a-quote band */
.yb-quote-cta { text-align: center; }
.yb-quote-cta .lead { color: #fff; font-family: Outfit, sans-serif; font-weight: 600; }
.yb-quote-cta .sales { color: var(--yb-cyan-400); font-weight: 700; }

/* ============================================================
   CONTACT PAGE + QUOTE FORM
   ============================================================ */
.yb-contact-info { color: var(--yb-ink); line-height: 1.65; }
.yb-contact-info .row { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.yb-contact-info .ic { color: var(--yb-cyan-500); font-size: 20px; width: 26px; flex: 0 0 auto; margin-top: 3px; text-align: center; }
.yb-contact-info h4 { font-family: Outfit, sans-serif; color: var(--yb-blue-900); margin: 0 0 3px; font-size: 17px; }
.yb-contact-info a { color: var(--yb-cyan-500); text-decoration: none; }
.yb-contact-socials a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: var(--yb-blue-900); color: #fff; align-items: center; justify-content: center; margin-right: 8px; }

/* Footer social icons — circular navy icons on the gray footer */
.yb-footer-socials { margin-bottom: 12px; }
.yb-footer-socials a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: var(--yb-blue-900); color: #fff; align-items: center; justify-content: center; margin: 0 8px 8px 0; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.yb-footer-socials a:hover { background: var(--yb-cyan-500); transform: translateY(-2px); }
/* Footer contact text — match Quick Links size (14px) */
.yb-footer-contact { color: #4a5563; line-height: 1.7; font-size: 14px; }
.yb-footer-contact strong { color: var(--yb-blue-900); }
/* Footer sales phone — large & very visible */
.yb-footer-callout { margin-top: 16px; }
.yb-footer-callout .label { display: block; color: #6b7480; font-size: 13px; margin-bottom: 2px; }
.yb-footer-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--yb-blue-900); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .5px; text-decoration: none; }
.yb-footer-phone:hover { color: var(--yb-cyan-500); }

/* Fluent Forms — brand the inputs + submit button */
.yb-formwrap { background: #fff; border-radius: 10px; box-shadow: 0 6px 26px rgba(0,0,0,.08); padding: 30px; }
.yb-formwrap .ff-el-input--content input[type=text],
.yb-formwrap .ff-el-input--content input[type=email],
.yb-formwrap .ff-el-input--content input[type=tel],
.yb-formwrap .ff-el-input--content textarea,
.yb-formwrap .ff-el-input--content select { border-radius: 6px; border: 1px solid #cdd6e0; padding: 11px 14px; }
.yb-formwrap .ff-el-input--label label { font-family: Outfit, sans-serif; color: var(--yb-blue-900); font-weight: 600; }
.yb-formwrap .ff-btn-submit { background: var(--yb-cyan-500) !important; border-color: var(--yb-cyan-500) !important; border-radius: 6px; font-family: Outfit, sans-serif; font-weight: 600; padding: 12px 28px; }
.yb-formwrap .ff-btn-submit:hover { background: var(--yb-blue-electric) !important; }

/* ============================================================
   FIND US — distributor locator map
   ============================================================ */
.yb-findsub { background: var(--yb-cyan-500); color: #fff; text-align: center; font-family: Outfit, sans-serif; font-weight: 600; font-size: 20px; padding: 14px; }
.yb-findus-wrap { position: relative; max-width: 1080px; margin: 0 auto; }
.yb-map { position: relative; }
.yb-map img { width: 100%; display: block; }
.yb-marker { position: absolute; width: 30px; height: 38px; background-size: contain; background-repeat: no-repeat; background-position: center bottom; border: none; padding: 0; cursor: pointer; transform: translate(-50%, -100%); transform-origin: 50% 100%; z-index: 2; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); transition: transform .15s ease; }
.yb-marker:hover, .yb-marker.is-active { transform: translate(-50%, -100%) scale(1.28); }
/* soft pulse ring at the pin base */
.yb-marker::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--yb-cyan-500); animation: ybpulse 1.8s ease-out infinite; }
@keyframes ybpulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.yb-district-card { position: absolute; top: 12px; left: 12px; width: 268px; background: #fff; border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.16); overflow: hidden; z-index: 3; }
.yb-district-card .hd { background: linear-gradient(90deg, #12b5d6, var(--yb-blue-900)); color: #fff; font-family: Outfit, sans-serif; font-weight: 700; font-size: 19px; padding: 13px 18px; }
.yb-district-card ul { list-style: none; margin: 0; padding: 8px 0; max-height: 300px; overflow: auto; }
.yb-district-card li { padding: 9px 18px; border-bottom: 1px solid var(--yb-grey-100); font-size: 14px; color: var(--yb-ink); }
.yb-district-card li:last-child { border-bottom: 0; }
.yb-district-card li::before { content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--yb-cyan-500); margin-right: 9px; }
.yb-findus-sales { display: flex; align-items: center; gap: 20px; max-width: 900px; margin: 0 auto; }
.yb-findus-sales .wa { font-size: 60px; color: #25D366; flex: 0 0 auto; }
.yb-findus-sales h3 { color: var(--yb-blue-900); font-family: Outfit, sans-serif; margin: 0 0 6px; }
@media (max-width: 768px) { .yb-district-card { position: static; width: 100%; margin-bottom: 18px; } .yb-findus-sales { flex-direction: column; text-align: center; } }

/* ============================================================
   ABOUT / CORPORATE
   ============================================================ */
.yb-stat .elementor-icon-box-title, .yb-stat .elementor-icon-box-title span { color: var(--yb-blue-900) !important; font-family: Outfit, sans-serif; font-weight: 700; letter-spacing: .3px; }
.yb-stat .elementor-icon-box-description { color: #5b6672; font-size: 14px; line-height: 1.55; }
.yb-story-lead p { color: #dbe6f2; font-size: 17px; line-height: 1.7; }
.yb-vmg-col .elementor-heading-title { color: var(--yb-blue-900); font-family: Outfit, sans-serif; font-weight: 700; }
.yb-vmg-col p, .yb-vmg-col li { color: #22374f; line-height: 1.6; }
.yb-goals-list { margin: 0; padding-left: 20px; }
.yb-goals-list li { margin-bottom: 10px; font-size: 14.5px; }

/* ============================================================
   HOME BUILDING GUIDE — rich landing (PDF-2)
   ============================================================ */
/* stages overlay card */
.yb-stages { background: var(--yb-cyan-500); border-radius: 8px; padding: 22px 24px; box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.yb-stages h3 { color: #fff; font-family: Outfit, sans-serif; font-weight: 700; margin: 0 0 12px; font-size: 22px; }
.yb-stages a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.28); font-size: 15px; }
.yb-stages a:last-child { border-bottom: 0; }
.yb-stages a .i { width: 22px; text-align: center; }
.yb-stages a .chev { margin-left: auto; opacity: .85; }
.yb-stages a:hover { padding-left: 5px; }

/* calculator tools */
.yb-calc-head .small { color: var(--yb-blue-900); font-family: Outfit, sans-serif; font-size: 22px; text-align: center; margin: 0; }
.yb-calc-head .big { color: var(--yb-blue-900); font-family: Outfit, sans-serif; font-weight: 700; font-size: 44px; text-align: center; margin: 0 0 34px; line-height: 1.1; }
.yb-calc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1160px; margin: 0 auto; }
.yb-calc { background: var(--yb-cyan-500); color: #fff; border-radius: 6px; padding: 26px 22px 70px; position: relative; min-height: 250px; }
.yb-calc .ic { font-size: 40px; margin-bottom: 14px; }
.yb-calc h4 { font-family: Outfit, sans-serif; font-weight: 700; margin: 0 0 10px; font-size: 19px; }
.yb-calc p { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .95; }
.yb-calc .plus { position: absolute; left: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--yb-cyan-500); display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; }
@media (max-width: 900px) { .yb-calc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yb-calc-cards { grid-template-columns: 1fr; } .yb-calc-head .big { font-size: 32px; } }

/* ============================================================
   QUICK TIPS (HBG) — layered: mascot over navy band + gradient,
   badge, numbered tip, live-chat widget (matches PDF-2)
   ============================================================ */
.yb-qt { position: relative; display: flex; flex-direction: column; min-height: 580px; background: #fff; overflow: hidden; }
.yb-qt-strip { height: 90px; background: #fff; flex: 0 0 auto; }
.yb-qt-band { background: var(--yb-blue-900); padding: 26px 40px 26px 360px; flex: 0 0 auto; text-align: center; }
.yb-qt-band h2 { color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 54px; line-height: 1.05; margin: 0; }
.yb-qt-body { flex: 1 1 auto; background: linear-gradient(180deg, #9781c6 0%, #2384c6 100%); padding: 44px 40px 56px 360px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.yb-qt-num { width: 64px; height: 64px; border-radius: 50%; background: var(--yb-cyan-500); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.yb-qt-text { color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 25px; line-height: 1.45; max-width: 620px; margin: 0 auto; background: rgba(19,29,68,.45); padding: 20px 30px; border-radius: 34px; }
/* mascot rises so the hard hat sits in the top white strip */
.yb-qt-mascot { position: absolute; left: 28px; bottom: 0; height: 560px; max-height: 100%; z-index: 3; }
/* QUICK TIPS badge */
.yb-qt-badge { position: absolute; left: 250px; bottom: 150px; transform: rotate(-7deg); z-index: 4; }
.yb-qt-badge-logo { display: block; width: 150px; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
/* live chat widget */
.yb-qt-chat { position: absolute; right: 40px; bottom: 34px; width: 250px; z-index: 4; }
.yb-qt-chat-tab { display: inline-block; background: #f5b301; color: var(--yb-blue-900); font-family: 'Outfit', sans-serif; font-weight: 700; padding: 7px 18px; border-radius: 10px 10px 0 0; font-size: 14px; }
.yb-qt-chat-card { background: linear-gradient(180deg, #1a86dd, #1560a6); border-radius: 0 10px 0 0; padding: 12px 12px 0; }
.yb-qt-chat-head { display: flex; align-items: center; gap: 10px; color: #fff; }
.yb-qt-chat-av { width: 36px; height: 36px; border-radius: 8px; background: #cfd8e6; flex: 0 0 auto; }
.yb-qt-chat-head b { font-family: 'Outfit', sans-serif; font-size: 15px; display: block; }
.yb-qt-chat-head small { opacity: .85; font-size: 12px; }
.yb-qt-chat-msg { background: #eceff3; color: #444; border-radius: 8px; padding: 12px; margin: 12px -12px 0; font-size: 12px; line-height: 1.55; }
@media (max-width: 960px) {
  .yb-qt-band { padding: 24px 20px 24px 260px; }
  .yb-qt-band h2 { font-size: 34px; }
  .yb-qt-body { padding: 34px 20px 40px 260px; }
  .yb-qt-mascot { height: 380px; left: 10px; }
  .yb-qt-badge { left: 150px; bottom: 120px; }
  .yb-qt-badge-logo { width: 112px; }
  .yb-qt-text { font-size: 19px; }
  .yb-qt-chat { position: static; width: auto; max-width: 260px; margin: 24px auto 0; }
}
@media (max-width: 600px) {
  .yb-qt-band, .yb-qt-body { padding-left: 20px; text-align: center; }
  .yb-qt-mascot { display: none; }
  .yb-qt-badge { display: none; }
}

/* quick tips (old, superseded) */
.yb-qtips-h { color: #fff; font-family: Outfit, sans-serif; font-weight: 800; font-size: 52px; margin: 0 0 18px; }
.yb-qtip-badge { display: inline-block; background: #fff; color: var(--yb-blue-900); font-family: Outfit, sans-serif; font-weight: 800; font-size: 26px; padding: 6px 18px; border-radius: 8px; transform: rotate(-4deg); margin-bottom: 18px; }
.yb-qtip { display: flex; gap: 16px; align-items: flex-start; }
.yb-qtip .num { width: 44px; height: 44px; border-radius: 50%; background: var(--yb-cyan-500); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: 0 0 auto; }
.yb-qtip p { color: #fff; font-size: 20px; line-height: 1.55; margin: 0; font-weight: 500; }
@media (max-width: 560px) { .yb-qtips-h { font-size: 34px; } .yb-qtip p { font-size: 17px; } }

/* ============================================================
   SITE FOOTERS — shared LAYOUT + TYPOGRAPHY for BOTH footers
   (home = .yb-footer-navy, inner pages = .yb-footer-gray).
   Identical structure/spacing/fonts; only colours + logo differ.
   ============================================================ */
.yb-fn-cols { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1.1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 50px 40px 30px; align-items: start; }
.yb-fn-col { min-width: 0; }
.yb-fn-col h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 14px; }
.yb-fn-col > p { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.yb-fn-logo { max-width: 110px !important; height: auto; display: block; margin-top: 4px; }
.yb-fn-col ul { list-style: none; margin: 0; padding: 0; }
.yb-fn-col li { margin-bottom: 9px; }
.yb-fn-col ul a { text-decoration: none; font-size: 14px; line-height: 1.5; }
.yb-fn-col ul a:hover { text-decoration: underline; }
.yb-fn-contact { font-size: 14px; line-height: 1.7; }
.yb-fn-callout { margin-top: 14px; }
.yb-fn-callout span { display: block; font-size: 13px; margin-bottom: 4px; }
.yb-fn-phone { display: inline-flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px; text-decoration: none; }
.yb-fn-socials { display: flex; flex-wrap: wrap; }
.yb-fn-socials a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; margin: 0 8px 8px 0; text-decoration: none; transition: background .15s, color .15s; }
.yb-fn-handle { font-size: 14px; margin: 6px 0 0; }
.yb-fn-legal { text-align: center; font-size: 13px; line-height: 1.6; padding: 15px 20px; }
.yb-fn-legal a { text-decoration: none; }
.yb-fn-legal a:hover { text-decoration: underline; }
@media (max-width: 900px) { .yb-fn-cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 30px 24px; } }
@media (max-width: 560px) { .yb-fn-cols { grid-template-columns: 1fr; gap: 28px; } }

/* --- Home footer: NAVY theme --- */
.yb-footer-navy { background: var(--yb-blue-900); }
.yb-footer-navy .yb-fn-col h4 { color: #fff; }
.yb-footer-navy .yb-fn-col > p,
.yb-footer-navy .yb-fn-col ul a,
.yb-footer-navy .yb-fn-contact,
.yb-footer-navy .yb-fn-callout span,
.yb-footer-navy .yb-fn-handle { color: #cdd6e6; }
.yb-footer-navy .yb-fn-contact strong { color: #fff; }
.yb-footer-navy .yb-fn-col ul a:hover { color: var(--yb-cyan-500); }
.yb-footer-navy .yb-fn-phone { color: var(--yb-cyan-400); }
.yb-footer-navy .yb-fn-phone:hover { color: #fff; }
.yb-footer-navy .yb-fn-socials a { background: rgba(255,255,255,.14); color: #fff; }
.yb-footer-navy .yb-fn-socials a:hover { background: var(--yb-cyan-500); color: #fff; }
.yb-footer-navy .yb-fn-legal { color: #cbd3e6; background: #2c4c98; }
.yb-footer-navy .yb-fn-legal a { color: #cbd3e6; }
.yb-footer-navy .yb-fn-legal a:hover { color: #fff; }

/* --- Inner-page footer: GRAY theme (dark logo) --- */
.yb-footer-gray { background: #eef1f5; }
.yb-footer-gray .yb-fn-col h4 { color: var(--yb-blue-900); }
.yb-footer-gray .yb-fn-col > p,
.yb-footer-gray .yb-fn-col ul a,
.yb-footer-gray .yb-fn-contact,
.yb-footer-gray .yb-fn-callout span,
.yb-footer-gray .yb-fn-handle { color: #3a4656; }
.yb-footer-gray .yb-fn-contact strong { color: var(--yb-blue-900); }
.yb-footer-gray .yb-fn-col ul a:hover { color: var(--yb-cyan-500); }
.yb-footer-gray .yb-fn-phone { color: var(--yb-blue-900); }
.yb-footer-gray .yb-fn-phone:hover { color: var(--yb-cyan-500); }
.yb-footer-gray .yb-fn-socials a { background: rgba(35,62,127,.10); color: var(--yb-blue-900); }
.yb-footer-gray .yb-fn-socials a:hover { background: var(--yb-cyan-500); color: #fff; }
.yb-footer-gray .yb-fn-legal { color: #5b6672; background: #e2e7ee; }
.yb-footer-gray .yb-fn-legal a { color: #5b6672; }
.yb-footer-gray .yb-fn-legal a:hover { color: var(--yb-blue-900); }

/* Our Story (For Corporate) — navy text + full-bleed factory image (compact) */
.yb-story { display: flex; align-items: stretch; background: var(--yb-blue-900); height: 360px; }
.yb-story-text { flex: 1 1 50%; padding: 36px 50px; display: flex; flex-direction: column; justify-content: center; }
.yb-story-text h2 { color: var(--yb-cyan-500); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 46px; line-height: 1.05; margin: 0 0 14px; }
.yb-story-text p { color: #dfe6f2; font-size: 15px; line-height: 1.6; margin: 0 0 16px; max-width: 560px; }
.yb-story-btn { align-self: flex-start; background: var(--yb-cyan-500); color: #fff !important; font-family: 'Outfit', sans-serif; font-weight: 700; padding: 13px 30px; border-radius: 4px; text-decoration: none; margin-top: 6px; transition: background .15s; }
.yb-story-btn:hover { background: var(--yb-blue-electric); color: #fff !important; }
.yb-story-img { flex: 1 1 50%; overflow: hidden; }
.yb-story-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .yb-story { flex-direction: column; height: auto; } .yb-story-text { flex: none; } .yb-story-img { flex: none; } .yb-story-img img { height: 260px; } .yb-story-text h2 { font-size: 40px; } }

/* For Corporate — stats (uniform) */
.yb-cstats { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.yb-cstat { text-align: center; }
.yb-cstat i { color: var(--yb-cyan-500); font-size: 52px; }
.yb-cstat h3 { color: var(--yb-blue-900); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; margin: 14px 0 8px; }
.yb-cstat p { color: #5b6672; font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 768px) { .yb-cstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .yb-cstats { grid-template-columns: 1fr; } }

/* For Corporate — Vision / Mission / Goals (full-bleed, uniform) */
.yb-vmg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.yb-vmg-col { padding: 44px 40px; }
.yb-vmg-col.v { background: #cfe6f7; }
.yb-vmg-col.m { background: #8fcdef; }
.yb-vmg-col.g { background: #cfe6f7; }
.yb-vmg-col h2 { color: var(--yb-blue-900); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0 0 16px; }
.yb-vmg-col p, .yb-vmg-col li { color: #22374f; font-size: 15px; line-height: 1.6; }
.yb-vmg-col ul { margin: 0; padding-left: 20px; }
.yb-vmg-col li { margin-bottom: 9px; }
@media (max-width: 768px) { .yb-vmg { grid-template-columns: 1fr; } }

/* For Business hero — text (navy) + full-bleed factory image, reduced height */
.yb-bizhero { display: flex; align-items: stretch; background: var(--yb-blue-900); height: 420px; }
.yb-bizhero-text { flex: 1 1 56%; padding: 34px 50px; display: flex; flex-direction: column; justify-content: center; }
.yb-bizhero-text h1 { color: var(--yb-cyan-500); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 50px; line-height: 1.05; margin: 0 0 14px; }
.yb-bizhero-text p { color: #dfe6f2; font-size: 17px; line-height: 1.55; margin: 0 0 20px; max-width: 540px; }
.yb-bizhero-btn, .yb-bizhero-btn:link, .yb-bizhero-btn:visited { align-self: flex-start; background: var(--yb-cyan-500); color: #fff !important; font-family: 'Outfit', sans-serif; font-weight: 700; padding: 13px 30px; border-radius: 4px; text-decoration: none; transition: background .15s; }
.yb-bizhero-btn:hover { background: var(--yb-blue-electric); color: #fff !important; }
.yb-bizhero-img { flex: 1 1 44%; overflow: hidden; }
.yb-bizhero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .yb-bizhero { flex-direction: column; height: auto; } .yb-bizhero-text { flex: none; } .yb-bizhero-img { flex: none; } .yb-bizhero-img img { height: 240px; } .yb-bizhero-text h1 { font-size: 40px; } }

/* ============================================================
   FEATURE CARDS (For Business / Careers)
   ============================================================ */
.yb-feature { background: #fff; border-radius: 8px; box-shadow: 0 3px 16px rgba(0,0,0,.08); padding: 28px 24px !important; height: 100%; }
.yb-feature .elementor-icon-box-title, .yb-feature .elementor-icon-box-title span { color: var(--yb-blue-900) !important; font-family: Outfit, sans-serif; font-weight: 700; }
.yb-feature .elementor-icon-box-description { color: #5b6672; font-size: 14px; line-height: 1.55; }
.yb-hero-lead2 { color: #dfe6f2; font-size: 18px; line-height: 1.65; }
.yb-openings { background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.07); padding: 34px; text-align: center; max-width: 760px; margin: 0 auto; }
.yb-openings h3 { font-family: Outfit, sans-serif; color: var(--yb-blue-900); margin: 0 0 10px; }
.yb-openings p { color: #5b6672; margin: 0 0 18px; }

/* For Business & For Corporate: minimal header — hide the utility menu
   (Home Building Guide / Our Products / Useful Tools / Hardware Locator),
   keeping the audience menu, search bar and Get in Touch. */
body.page-id-14 .yb-utility-menu,
body.page-id-15 .yb-utility-menu { display: none !important; }

/* ============================================================
   FOR CORPORATE — "Explore Yaobai Cement" + "Downloadable Reports"
   Brand cyan arrow buttons (replacing the mockup's yellow).
   ============================================================ */
.yb-secwrap { max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
.yb-sec-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 34px; color: var(--yb-ink); margin: 0 0 34px; }

/* Explore cards (image + copy + arrow) */
.yb-xcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.yb-xcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8ee; border-radius: 4px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.yb-xcard:hover { box-shadow: 0 12px 30px rgba(35,62,127,.12); transform: translateY(-3px); }
.yb-xcard-img { display: block; height: 210px; background-size: cover; background-position: center; }
.yb-xcard-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 28px; }
.yb-xcard-body h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--yb-blue-900); margin: 0 0 12px; }
.yb-xcard-body p { font-size: 15px; line-height: 1.6; color: #5b6672; margin: 0 0 22px; flex: 1; }

/* Downloadable report cards (PDF icon + title + arrow) */
.yb-rcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.yb-rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8ee; border-radius: 4px; padding: 26px 24px 28px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.yb-rcard:hover { box-shadow: 0 12px 30px rgba(35,62,127,.12); transform: translateY(-3px); }
.yb-rcard-icon { font-size: 46px; color: var(--yb-cyan-500); margin-bottom: 16px; line-height: 1; }
.yb-rcard h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--yb-blue-900); line-height: 1.35; margin: 0 0 22px; flex: 1; }

/* Shared arrow button — brand cyan */
.yb-arrow { align-self: flex-start; width: 46px; height: 46px; border-radius: 4px; background: var(--yb-cyan-500); color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; transition: background .15s ease; }
.yb-arrow:hover { background: var(--yb-blue-900); }
.yb-rcard .yb-arrow { pointer-events: none; }

@media (max-width: 900px) { .yb-xcards { grid-template-columns: 1fr 1fr; } .yb-rcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yb-xcards, .yb-rcards { grid-template-columns: 1fr; } .yb-secwrap { padding: 44px 22px; } .yb-sec-h { font-size: 27px; } }

/* Simple interior article page (corporate sub-pages + report placeholders) */
.yb-article { max-width: 900px; margin: 0 auto; padding: 64px 40px 72px; }
.yb-article-hero { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 6px; margin: 0 0 30px; }
.yb-article h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; color: var(--yb-blue-900); margin: 0 0 8px; }
.yb-article h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px; color: var(--yb-blue-900); margin: 34px 0 12px; }
.yb-article .fact { margin: 0 0 12px; }
.yb-article .fact strong { color: var(--yb-blue-900); }
.yb-article .lead { font-size: 18px; color: var(--yb-cyan-500); font-weight: 600; margin: 0 0 28px; }
.yb-article p { font-size: 16px; line-height: 1.75; color: var(--yb-ink); margin: 0 0 18px; }
.yb-article ul { margin: 0 0 18px; padding-left: 22px; }
.yb-article li { font-size: 16px; line-height: 1.7; color: var(--yb-ink); margin-bottom: 8px; }
.yb-article .yb-btn { display: inline-block; margin-top: 8px; background: var(--yb-cyan-500); color: #fff !important; font-family: 'Outfit', sans-serif; font-weight: 700; padding: 12px 28px; border-radius: 4px; text-decoration: none; transition: background .15s ease; }
.yb-article .yb-btn:hover { background: var(--yb-blue-900); }
.yb-article .yb-back { display: inline-block; margin-top: 26px; color: var(--yb-cyan-500); font-weight: 600; text-decoration: none; }
.yb-article .yb-back:hover { text-decoration: underline; }
@media (max-width: 560px) { .yb-article { padding: 44px 22px 56px; } .yb-article h1 { font-size: 30px; } }