/*
 * Small fidelity fixes for the migrated Elementor header/footer, loaded LAST so
 * it wins over the compiled template CSS. Keeps the site chrome sane without
 * the Elementor Pro runtime JS.
 */

/* --- Dark canvas -------------------------------------------------------- */
/* The WordPress theme (cubicsofts-main/style.min.css) sets `body { background:
   #fff }`, which shows through transparent Elementor sections as white gaps
   between the dark content. The site is a dark theme (light text everywhere),
   so force the dark ground. This file loads after the theme CSS and the
   selector out-specifies the theme's bare `body`, so it wins. */
body.elementor-kit-8 {
  background: #05070d;
  --e-global-color-primary: #ffffff !important;
  --e-global-color-text: #d7dae2 !important;
}

/* Enforce crisp bright white headings sitewide on dark canvas */
h1, h2, h3, h4, h5, h6,
.elementor-kit-8 h1,
.elementor-kit-8 h2,
.elementor-kit-8 h3,
.elementor-kit-8 h4,
.elementor-kit-8 h5,
.elementor-kit-8 h6,
.cs-service-system h1,
.cs-service-system h2,
.cs-service-system h3,
.cs-service-system h4,
.cs-service-system h5,
.cs-service-system h6,
.cs-page-content h1,
.cs-page-content h2,
.cs-page-content h3,
.cs-page-content h4,
.cs-page-content h5,
.cs-page-content h6,
.elementor-heading-title {
  color: #ffffff !important;
}

/* Footer Heading Typography — crisp, small, and elegant */
footer h2,
.cs-site-footer h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
  line-height: 1.25 !important;
}

footer h3,
footer h4,
footer h5,
.cs-site-footer h3,
.cs-site-footer h4,
.cs-site-footer h5 {
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}

/* Icon fonts protection — prevent Montserrat from overriding icon glyphs */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"],
.icon, [class^="icon-"], [class*=" icon-"],
.eicon, [class^="eicon-"], [class*=" eicon-"] {
  font-family: "Font Awesome 5 Free", "FontAwesome", "elementskit", "eicons" !important;
}
.fas, .fa-solid {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.far, .fa-regular {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}
.icon, [class^="icon-"], [class*=" icon-"] {
  font-family: "elementskit" !important;
}
[class^="eicon-"], [class*=" eicon-"] {
  font-family: "eicons" !important;
}

/* --- Nav hover underline ------------------------------------------------ */
/* Elementor's `e--pointer-*` hover effects use ::before/::after and need Pro JS;
   they conflicted with a custom underline and could blank the hovered label.
   Remove those pseudo-elements entirely and use a plain text underline on hover,
   which can never hide the label. */
.cs-site-header .elementor-nav-menu .elementor-item::before,
.cs-site-header .elementor-nav-menu .elementor-item::after {
  content: none !important;
}
.cs-site-header .elementor-nav-menu > li > .elementor-item {
  text-decoration-line: none;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
  transition: opacity 0.15s ease;
}
.cs-site-header .elementor-nav-menu > li:hover > .elementor-item,
.cs-site-header .elementor-nav-menu > li:focus-within > .elementor-item {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}
/* The header bar is brand red (#ED4239). post-13.css sets the nav item :hover
   colour to that same red, so a hovered top-level label turned red-on-red and
   VANISHED. Keep it white on hover (this is the real "hover hides text" fix). */
.cs-site-header .elementor-nav-menu--main .elementor-item:hover,
.cs-site-header .elementor-nav-menu--main .elementor-item:focus,
.cs-site-header .elementor-nav-menu > li:hover > .elementor-item,
.cs-site-header .elementor-nav-menu > li:focus-within > .elementor-item {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* --- Form labels -------------------------------------------------------- */
/* Migrated Elementor forms sit on dark / coloured panels now, but their labels
   were authored dark (invisible on the orange "Book a Free Consultation" card).
   Force a legible light label. */
/* Placeholders were gray (#9ca3af) — invisible on the orange "Book a Free
   Consultation" card (and faint on dark forms). Light placeholders read on both. */
.elementor-form input::placeholder,
.elementor-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1;
}
.elementor-form .elementor-field-group > label,
.elementor-form .elementor-field-group > .elementor-field-label {
  color: #fff !important;
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;
}

/* --- Sticky header: the bar stays pinned to the top on scroll ----------- */
.cs-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* --- Logo: reserve an explicit box on ALL breakpoints ------------------- */
/* post-13.css only sizes the logo inside @media(max-width:767px); on desktop the
   <img> had no width, so before it loaded it collapsed to 0×0 ("logo not
   appearing"). Force a stable size for the header + footer logos everywhere. */
.cs-site-header .elementor-element-24bc4d6 img,
.cs-site-header a[href="/"] img[src*="logo" i],
.cs-site-header img[src*="header-logo" i] {
  width: 175px !important;
  height: auto !important;
  max-width: 100%;
}
.cs-site-footer img[src*="logo" i] {
  width: 190px;
  height: auto;
  max-width: 100%;
}

/* --- Header nav: horizontal, dropdowns on hover ------------------------- */
.cs-site-header .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-site-header .elementor-nav-menu > li {
  position: relative;
  list-style: none;
}
.cs-site-header .elementor-nav-menu .elementor-item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.cs-site-header .elementor-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.cs-site-header .elementor-nav-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cs-site-header .elementor-nav-menu .sub-menu .elementor-sub-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #111;
  white-space: nowrap;
}
.cs-site-header .elementor-nav-menu .sub-menu .elementor-sub-item:hover {
  background: rgba(242, 97, 11, 0.08);
  color: #f2610b;
}

/* --- Header bar: vertically centre its columns -------------------------- */
.cs-site-header .e-con-inner,
.cs-site-header .e-con {
  align-items: center;
}

/* Script-only HTML widgets must never take layout space. */
.cs-site-header .elementor-widget-html:has(> .elementor-widget-container > script:only-child) {
  display: none;
}

/* --- Footer: keep columns readable ------------------------------------- */
.cs-site-footer .elementor-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-site-footer .elementor-nav-menu .sub-menu {
  display: none;
}

/* --- Footer bottom bar: balance copyright (left) vs policy links (right) -
   Was two 506px columns centred with big empty margins, and the two policy
   links stacked vertically. Make it a full-width space-between row with the
   policy links inline on the right + a subtle divider above. */
.cs-site-footer .elementor-element-4c623e6 {
  justify-content: space-between !important;
  align-items: center;
  gap: 10px 28px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  padding-bottom: 8px;
  margin-top: 8px;
}
/* Keep the footer's last row clear of the bottom-right WhatsApp FAB. */
@media (min-width: 768px) {
  .cs-site-footer .elementor-element-4c623e6 { padding-right: 84px; }
}
.cs-site-footer .elementor-element-4c623e6 > .elementor-element {
  width: auto !important;
  flex: 0 1 auto;
}
.cs-site-footer .elementor-element-ceab1f7 {
  align-items: flex-end;
}
/* policy icon-list → horizontal row, right aligned */
.cs-site-footer .elementor-element-3e959da .elementor-icon-list-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 26px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.cs-site-footer .elementor-element-3e959da .elementor-icon-list-item {
  margin: 0 !important;
  border: 0 !important;
}
@media (max-width: 767px) {
  .cs-site-footer .elementor-element-4c623e6 {
    justify-content: center !important;
    text-align: center;
  }
  .cs-site-footer .elementor-element-3e959da .elementor-icon-list-items {
    justify-content: center;
  }
}

/* ======================================================================
   Carousels (replacing Elementor's Swiper widgets)
   ====================================================================== */
.cs-carousel { padding-inline: 4px; }
/* !important throughout: the Elementor kit styles every <button> as an orange
   padded pill, which turned the arrows/dots into stray orange buttons. */
.cs-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px !important; height: 42px !important; min-width: 0 !important;
  border-radius: 999px !important; border: none !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: #f2610b !important; color: #fff !important; cursor: pointer; z-index: 5;
  box-shadow: 0 6px 18px rgba(242,97,11,.35); transition: background .2s, transform .2s;
}
.cs-carousel-arrow:hover { background: #c9322a !important; }
.cs-carousel-prev { left: -8px; }
.cs-carousel-next { right: -8px; }
.cs-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.cs-carousel-dot {
  width: 9px !important; height: 9px !important; min-width: 0 !important;
  border-radius: 999px !important; border: none !important; cursor: pointer;
  background: rgba(150, 150, 150, 0.4) !important; padding: 0 !important;
  transition: all 0.2s;
}
.cs-carousel-dot.is-active { background: #f2610b !important; width: 26px !important; }

/* "Read More Content" collapsible (home SEO copy) */
.cs-wp-collapsible-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-montserrat), 'Montserrat', sans-serif !important;
}
.cs-wp-collapsible-content {
  position: relative;
  transition: max-height .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-wp-collapsible-container.cs-collapsed .cs-wp-collapsible-content {
  max-height: 380px !important;
  overflow: hidden !important;
}
.cs-wp-collapsible-container:not(.cs-collapsed) .cs-wp-collapsible-content,
.cs-wp-collapsible-content.is-expanded {
  max-height: none !important;
  overflow: visible !important;
}

/* Fade & blur overlay when collapsed */
.cs-wp-collapsible-container.cs-collapsed .cs-wp-fade-overlay {
  display: flex !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.98) 85%, #000000 100%);
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  z-index: 20;
  pointer-events: auto;
}
.cs-wp-collapsible-container:not(.cs-collapsed) .cs-wp-fade-overlay,
.cs-wp-collapsible-content.is-expanded .cs-wp-fade-overlay {
  display: none !important;
}

/* Read less wrapper when expanded */
.cs-wp-collapsible-container:not(.cs-collapsed) .cs-wp-read-less-wrapper,
.cs-wp-collapsible-content.is-expanded .cs-wp-read-less-wrapper {
  display: flex !important;
  justify-content: center;
  padding: 30px 0 10px 0;
}
.cs-wp-collapsible-container.cs-collapsed .cs-wp-read-less-wrapper {
  display: none !important;
}

/* Read More / Read Less Toggle Buttons */
button.cs-wp-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 32px !important;
  border-radius: 999px !important;
  background: rgba(12, 16, 28, 0.95) !important;
  color: #ffffff !important;
  border: 1.5px solid #f69524 !important;
  font-family: var(--font-montserrat), 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(246, 149, 36, 0.25) !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
button.cs-wp-toggle-btn:hover {
  background: linear-gradient(135deg, #f2610b, #f69524) !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(242, 97, 11, 0.5) !important;
}


.cs-carousel-logo {
  display: flex; align-items: center; justify-content: center; height: 90px; padding: 10px;
}
.cs-carousel-logo img { max-height: 70px; width: auto; object-fit: contain; filter: none; }
.cs-carousel-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* Continuous smooth logo marquee (tech-stack strip). */
.cs-logo-marquee { overflow: hidden; padding: 8px 0; }
.cs-logo-marquee .cs-marquee-track { gap: 64px; align-items: center; animation-duration: 40s; }
.cs-logo-marquee:hover .cs-marquee-track { animation-play-state: paused; }
.cs-logo-marquee .cs-carousel-logo { flex: 0 0 auto; height: auto; padding: 0; }
.cs-logo-marquee .cs-carousel-logo img { max-height: 56px; }

.cs-testimonials .cs-testimonial {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
  padding: 28px; margin: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.06); height: 100%;
}
.cs-testimonials .cs-testimonial > div { color: #444; line-height: 1.7; }
.cs-testimonials .cs-testimonial footer {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
.cs-testimonial-avatar { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; }
.cs-testimonials .cs-testimonial footer strong { display: block; color: #111; }
.cs-testimonials .cs-testimonial footer em { color: #f2610b; font-style: normal; font-size: 13px; }

/* Review cards (loop-carousel → "Review Loop") — dark theme testimonial cards. */
.cs-reviews .cs-review-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 26px;
  margin: 6px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.cs-review-stars { color: #f6b01e; letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; }
.cs-reviews .cs-review-quote { color: rgba(255, 255, 255, 0.8); line-height: 1.65; font-size: 14px; flex: 1; }
.cs-reviews .cs-review-quote p { margin: 0; }
.cs-review-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-review-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 999px;
  background: linear-gradient(135deg, #f2610b, #f69524); color: #fff; font-weight: 700;
}
.cs-review-author strong { color: #fff; font-size: 14px; }

/* Nested-accordion (FAQs) — dark expand/collapse list showing the real questions. */
.cs-accordion { display: flex; flex-direction: column; gap: 12px; max-width: 920px; margin: 0 auto; }
.cs-accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-accordion-item.is-open { border-color: rgba(246, 149, 36, 0.45); background: rgba(255, 255, 255, 0.05); }
/* !important defeats the Elementor kit's global `button` styling (orange pill),
   which out-specified the plain class and made the home FAQ headers orange. */
.cs-accordion-header {
  display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 24px !important; text-align: left;
  font-size: 16px; font-weight: 600; color: #fff !important; cursor: pointer;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
.cs-accordion-header:hover { color: #f9a83f !important; background: transparent !important; }
.cs-accordion-icon { flex: 0 0 auto; color: #f69524 !important; transition: transform 0.25s ease; }
.cs-accordion-item.is-open .cs-accordion-icon { transform: rotate(45deg); }
.cs-accordion-body { padding: 0 24px 22px; font-size: 15px; line-height: 1.7; }
.cs-accordion-body, .cs-accordion-body p, .cs-accordion-body span, .cs-accordion-body li {
  color: rgba(255, 255, 255, 0.72);
}
.cs-accordion-body p { margin: 0 0 10px; }
.cs-accordion-body a { color: #f69524; }

.cs-hero-slides .cs-hero-slide {
  position: relative; min-height: 460px; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; border-radius: 0;
}
.cs-hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%); }
.cs-hero-slide-inner { position: relative; z-index: 2; padding: 40px; color: #fff; }
.cs-hero-slide-inner h3 { color: #fff; font-size: 28px; }
.cs-hero-slide-inner p { color: rgba(255,255,255,.85); margin-top: 6px; }

/* ======================================================================
   Mobile menu
   ====================================================================== */
.cs-mobile-menu-toggle {
  background: none; border: none; color: inherit; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px; display: inline-flex;
}
.cs-mobile-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
  transition: opacity .25s; z-index: 9998;
}
.cs-mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }
.cs-mobile-menu-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(340px, 86vw);
  background: #fff; z-index: 9999; transform: translateX(100%);
  transition: transform .3s ease; box-shadow: -10px 0 40px rgba(0,0,0,.2);
  padding: 64px 20px 24px; overflow-y: auto;
}
.cs-mobile-menu-panel.is-open { transform: translateX(0); }
.cs-mobile-menu-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #111; cursor: pointer; }
.cs-mobile-menu-list, .cs-mobile-submenu { list-style: none; margin: 0; padding: 0; }
.cs-mobile-menu-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.07); }
.cs-mobile-menu-row a { display: block; padding: 14px 4px; color: #111; font-weight: 500; flex: 1; }
.cs-mobile-menu-expand { background: none; border: none; color: #777; padding: 10px; cursor: pointer; transition: transform .2s; }
.cs-mobile-menu-expand.is-open { transform: rotate(180deg); }
.cs-mobile-submenu a { display: block; padding: 10px 16px; color: #555; font-size: 14px; }
.cs-mobile-submenu { background: rgba(0,0,0,.02); border-radius: 8px; margin: 4px 0 8px; }

/* Hover mega-menu panels: hidden by default (no Elementor Pro hover JS). */
.cs-site-header .mega-menu-content { display: none; }

/* ======================================================================
   Services mega-menu (React) — replaces the Elementor Pro hover mega-menu
   ====================================================================== */
.cs-services-nav { position: relative; }
.cs-services-caret { margin-left: 5px; transition: transform 0.2s ease; opacity: 0.85; }
.cs-services-nav:hover .cs-services-caret,
.cs-services-nav:focus-within .cs-services-caret { transform: rotate(180deg); }

.cs-mega {
  position: fixed;
  top: 82px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(1040px, 94vw);
  background: #14100f;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 22px;
  max-height: min(82vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  /* Closed panel must not capture the mouse. Its inner <ul>s are forced
     visible:visible (to defeat Elementor's nested-submenu hiding), which would
     otherwise let this invisible fixed 1040px panel intercept hover over the
     middle of the page and re-open the menu. pointer-events gates that. */
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 10000;
}
.cs-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.cs-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 26px;
}
@media (min-width: 1180px) { .cs-mega-inner { grid-template-columns: repeat(6, 1fr); } }
.cs-mega-col { min-width: 0; padding: 6px 4px; }
.cs-mega-col-title {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: break-word;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f69524;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Override Elementor's generic nested-submenu rules that would hide these uls
   or content-size them (Elementor sizes dropdown <ul>s to their widest item,
   which overflowed the grid columns and overlapped neighbours). Force full-width,
   border-box so the links wrap inside their column. */
.cs-mega .cs-mega-col ul,
.cs-mega .cs-mega-col ul li {
  list-style: none; margin: 0; padding: 0;
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.cs-mega-link {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: break-word;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-mega-link:hover { background: rgba(242, 97, 11, 0.16); color: #fff; }
.cs-mega-more { color: #f69524; font-weight: 600; }
.cs-mega-more:hover { color: #fff; }
.cs-mega-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(242, 97, 11, 0.18), rgba(246, 149, 36, 0.08));
}
.cs-mega-cta strong { display: block; color: #fff; font-size: 15px; }
.cs-mega-cta span { color: rgba(255, 255, 255, 0.65); font-size: 13px; }
.cs-mega-cta-btn {
  background: #f2610b; color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 22px; border-radius: 999px; white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-mega-cta-btn:hover { background: #c9322a; transform: translateY(-1px); }

/* The mega-menu is desktop only; the mobile menu lists Services separately. */
@media (max-width: 1024px) { .cs-mega { display: none; } }

/* ======================================================================
   Contact form (interactive) states
   ====================================================================== */
.cs-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.cs-form-error {
  color: #ffd7d3; background: rgba(242, 97, 11, 0.16); border: 1px solid rgba(242, 97, 11, 0.4);
  border-radius: 10px; padding: 10px 14px; margin: 4px 0 12px; font-size: 14px;
}
.cs-form-success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 30px 24px; border-radius: 14px;
  background: #eafaf0; border: 1px solid #b7ebc8;
}
.cs-form-success svg { color: #1f9d55; }
.cs-form-success h4 { color: #14663a; margin: 6px 0 0; font-size: 22px; }
.cs-form-success p { color: #2f7a52; margin: 0; max-width: 360px; }
.elementor-button[disabled] { opacity: 0.7; cursor: progress; }

/* ======================================================================
   Nested tabs (Elementor Pro nested-tabs replacement, e.g. pricing)
   ====================================================================== */
.cs-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.cs-tab {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #333;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cs-tab:hover { border-color: #f2610b; color: #f2610b; }
.cs-tab.is-active {
  background: #f2610b;
  border-color: #f2610b;
  color: #fff;
  box-shadow: 0 8px 22px rgba(242, 97, 11, 0.3);
}
/* On dark sections the tab bar reads on a dark ground. */
.cs-page-content .elementor-widget-nested-tabs .cs-tab { }
.cs-tab-panel { animation: cs-fade 0.3s ease; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Blog article body (dark theme, readable). Larger type, softer body colour and
   generous paragraph rhythm — tuned for comfortable long-form reading on the
   near-black canvas. */
.cs-article { color: #d4dae4; line-height: 1.85; font-size: 17.5px; letter-spacing: 0.003em; }
@media (max-width: 640px) { .cs-article { font-size: 16.5px; line-height: 1.8; } }
.cs-article h1, .cs-article h2, .cs-article h3, .cs-article h4 { color: #fff; margin: 1.6em 0 0.6em; line-height: 1.28; letter-spacing: -0.01em; scroll-margin-top: 100px; }
.cs-article h2 { font-size: clamp(24px, 3.2vw, 30px); margin-top: 2.1em; padding-bottom: 0.35em; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.cs-article h3 { font-size: clamp(20px, 2.4vw, 23px); margin-top: 1.9em; }
.cs-article p { margin: 0 0 1.5em; }
.cs-article a { color: #f69524; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(246, 149, 36, 0.45); transition: color 0.15s ease, text-decoration-color 0.15s ease; }
.cs-article a:hover { color: #ffb454; text-decoration-color: #ffb454; }
/* Blog FAQ: the WP accordion left a flat sequence of question + answer <p>.
   cleanWpContent() (lib/wp.ts) converts the dead #collapse toggle anchors into
   <p class="cs-faq-q"> question blocks; style them as clean question cards
   (ember accent) with the answer paragraph beneath. */
.cs-article .cs-faq-q {
  display: block;
  margin: 22px 0 0;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #f2610b;
  border-radius: 10px;
}
.cs-article .cs-faq-q + p {
  margin: 0 0 4px;
  padding: 12px 18px 4px;
  color: rgba(255, 255, 255, 0.78);
}
.cs-article ul, .cs-article ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.cs-article li { margin: 0.55em 0; line-height: 1.7; }
.cs-article img { display: block; border-radius: 14px; margin: 1.6em auto; border: 1px solid rgba(255, 255, 255, 0.08); }
.cs-article strong, .cs-article b { color: #fff; font-weight: 700; }
.cs-article h4 { font-size: 18px; }
.cs-article blockquote { border-left: 3px solid #f2610b; padding-left: 18px; margin: 1.2em 0; color: rgba(255,255,255,0.7); font-style: italic; }
/* Tables in article content (e.g. cost breakdowns) — dark, readable, scroll when wide. */
.cs-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.cs-article thead th { background: rgba(255, 255, 255, 0.06); }
.cs-article th, .cs-article td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.cs-article th { color: #fff; font-weight: 700; }
.cs-article td { color: rgba(255, 255, 255, 0.78); }
.cs-article tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.cs-article table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.cs-article th, .cs-article td { border: 1px solid rgba(255,255,255,0.12); padding: 10px 12px; text-align: left; }

/* Social icons (Elementor social-icons widget) */
.cs-social-icons { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-social-icons .elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 16px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-social-icons .elementor-social-icon:hover { background: #f2610b; transform: translateY(-2px); }

/* --- Home hero (#3862): tighten the fold + put the two CTAs on one row ----
   The hero section was 768px tall with vertically-centred content (big empty
   gap above the heading) and the two CTA buttons stacked in a flex column. */
@media (min-width: 768px) {
  .elementor-element-75466f4 {
    min-height: 520px !important;
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }
}
/* Row-wrap the hero inner: full-width content rows, the two buttons share one row. */
.elementor-element-b3ea22c > .e-con-inner {
  flex-flow: row wrap !important;
  justify-content: center !important;
  align-content: center;
  gap: 12px 16px !important;
}
.elementor-element-b3ea22c > .e-con-inner > .elementor-element:not(.elementor-widget-button) {
  flex: 0 0 100% !important;
}
/* Centre the trust-logos badge row (was left-aligned). */
.elementor-element-b3ea22c .elementor-element-514cf89,
.elementor-element-b3ea22c .elementor-element-514cf89 .e-con-inner,
.elementor-element-b3ea22c .elementor-element-514cf89 > .elementor-element {
  justify-content: center !important;
  text-align: center !important;
}
.elementor-element-b3ea22c .elementor-element-514cf89 img { margin-inline: auto; }
/* The two CTAs share one centred row, aligned on the same baseline. Both get
   the SAME top margin — the old :first-of-type/:last-of-type pair matched
   asymmetrically (the first div is the heading, not a button), leaving the red
   button at margin-top:0 while the portfolio button got 16px → 16px offset. */
.elementor-element-b3ea22c > .e-con-inner > .elementor-widget-button {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 20px 0 0 !important;
  align-self: center !important;
}

/* ======================================================================
   DESIGN SYSTEM — brand gradient theme + consistent page hierarchy
   Added: unify the site on one red->orange->gold gradient, give every page a
   consistent section rhythm, and fix the reported content issues.
   (This file loads LAST so it wins over the Elementor kit CSS.)
   ====================================================================== */

/* Shared eyebrow pill (used by the pricing fold + section headers). */
.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffcf8a;
  background: var(--cs-grad-soft);
  border: 1px solid rgba(246, 149, 36, 0.32);
}
.cs-eyebrow svg { color: #f69524; }

/* Consistent gradient text helper for headings. */
.cs-grad-text {
  background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----------------------------------------------------------------------
   Service-page pricing fold (components/site/ServicePricing.tsx)
   ---------------------------------------------------------------------- */
.cs-svc-pricing {
  position: relative;
  padding: var(--cs-section-y) 20px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(242, 97, 11, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%);
}
.cs-svc-pricing-inner { max-width: 1180px; margin: 0 auto; }
.cs-svc-pricing-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.cs-svc-pricing-title {
  margin: 16px 0 12px !important;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  font-weight: 800 !important; line-height: 1.15 !important; color: #fff !important;
}
.cs-svc-pricing-sub { color: rgba(255, 255, 255, 0.66); font-size: 16px; line-height: 1.65; margin: 0; }

.cs-pp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch;
}
@media (max-width: 900px) { .cs-pp-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.cs-pp-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--cs-border);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cs-pp-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -30px rgba(242, 97, 11, 0.5); border-color: rgba(246, 149, 36, 0.35); }
/* Featured (middle) — gradient ring + lift. */
.cs-pp-card.is-featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(45, 22, 16, 0.9), rgba(20, 14, 20, 0.9)) padding-box,
    var(--cs-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 30px 70px -34px rgba(242, 97, 11, 0.6);
}
@media (min-width: 901px) { .cs-pp-card.is-featured { transform: translateY(-10px); } .cs-pp-card.is-featured:hover { transform: translateY(-16px); } }
.cs-pp-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: var(--cs-btn-grad); box-shadow: 0 8px 20px rgba(242, 97, 11, 0.45);
}
.cs-pp-name { margin: 6px 0 4px !important; font-size: 22px !important; font-weight: 800 !important; color: #fff !important; }
.cs-pp-tagline { margin: 0 0 18px; color: rgba(255, 255, 255, 0.55); font-size: 13.5px; line-height: 1.5; min-height: 40px; }
.cs-pp-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cs-pp-cur { font-size: 16px; font-weight: 700; color: #f69524; }
.cs-pp-amount { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.cs-pp-period { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.cs-pp-market { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.cs-pp-market s { color: rgba(255, 255, 255, 0.4); }
.cs-pp-cta {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  margin: 20px 0 6px; padding: 13px 20px; width: 100%; box-sizing: border-box;
  border-radius: 12px; font-weight: 700; font-size: 15px; color: #fff !important;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}
.cs-pp-cta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.cs-pp-card.is-featured .cs-pp-cta { background: var(--cs-btn-grad); border-color: transparent; box-shadow: 0 10px 26px -8px rgba(242, 97, 11, 0.6); }
.cs-pp-card.is-featured .cs-pp-cta:hover { filter: brightness(1.07); }
.cs-pp-cta svg { transition: transform 0.2s ease; }
.cs-pp-cta:hover svg { transform: translateX(3px); }
.cs-pp-features { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cs-border); display: flex; flex-direction: column; gap: 11px; }
.cs-pp-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.cs-pp-features li.is-off { color: rgba(255, 255, 255, 0.38); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.2); }
.cs-pp-ico { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px; }
.cs-pp-features li:not(.is-off) .cs-pp-ico { color: #39d98a; background: rgba(57, 217, 138, 0.14); }
.cs-pp-features li.is-off .cs-pp-ico { color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.cs-svc-pricing-note { text-align: center; margin: 34px auto 0; max-width: 640px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }

/* ----------------------------------------------------------------------
   Footer — branded gradient ground + gradient top hairline
   ---------------------------------------------------------------------- */
.cs-site-footer {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(242, 97, 11, 0.12), transparent 55%),
    linear-gradient(180deg, #0b0c13 0%, #150a0f 100%);
}
.cs-site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cs-grad); z-index: 2;
}
/* Let the footer's own sections show the branded ground through. */
.cs-site-footer > .elementor > .elementor-inner,
.cs-site-footer .elementor-section-wrap > .elementor-element { background-color: transparent !important; }

/* ----------------------------------------------------------------------
   FAQ — modern dark accordion (Elementor accordion / toggle widgets)
   Replaces the flat orange bars with clean cards consistent with the site.
   ---------------------------------------------------------------------- */
.cs-page-content .elementor-accordion {
  display: flex; flex-direction: column; gap: 12px; max-width: 940px; margin: 0 auto; border: 0 !important;
}
.cs-page-content .elementor-accordion-item {
  border: 1px solid var(--cs-border) !important;
  border-radius: 14px !important;
  background: var(--cs-surface-1) !important;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-page-content .elementor-accordion-item[open],
.cs-page-content .elementor-accordion-item:hover { border-color: rgba(246, 149, 36, 0.4) !important; background: var(--cs-surface-2) !important; }
.cs-page-content .elementor-tab-title,
.cs-page-content .elementor-accordion-item > summary {
  position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer;
  margin: 0 !important; padding: 19px 56px 19px 22px !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: #fff !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
.cs-page-content .elementor-tab-title::-webkit-details-marker,
.cs-page-content summary::-webkit-details-marker { display: none; }
.cs-page-content .elementor-tab-title a,
.cs-page-content .elementor-tab-title span { color: #fff !important; text-decoration: none !important; }
.cs-page-content .elementor-accordion-item[open] > .elementor-tab-title,
.cs-page-content .elementor-accordion-item[open] > summary { color: #f9a83f !important; }
/* + / - indicator */
.cs-page-content .elementor-tab-title::after,
.cs-page-content .elementor-accordion-item > summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  font-size: 20px; font-weight: 400; line-height: 1; color: #f69524;
  background: rgba(246, 149, 36, 0.12); border: 1px solid rgba(246, 149, 36, 0.28);
  transition: transform 0.25s ease;
}
.cs-page-content .elementor-accordion-item[open] > .elementor-tab-title::after,
.cs-page-content .elementor-accordion-item[open] > summary::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); }
.cs-page-content .elementor-tab-icon { display: none !important; }
.cs-page-content .elementor-tab-content {
  padding: 0 22px 20px !important; border: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important; font-size: 15px; line-height: 1.7; background: transparent !important;
}
.cs-page-content .elementor-tab-content p { color: rgba(255, 255, 255, 0.72) !important; margin: 0 0 10px; }
.cs-page-content .elementor-tab-content a { color: #f69524 !important; }

/* ----------------------------------------------------------------------
   Content lists — restore visible bullet markers (the "missing pointers")
   Elementor / theme resets set list-style:none, so many content <ul>s had
   no marker. Give every content bullet a branded gradient marker.
   ---------------------------------------------------------------------- */
.cs-page-content .elementor-widget-text-editor ul,
.cs-page-content .elementor-text-editor ul,
.cs-article ul {
  list-style: none !important; padding-left: 0 !important;
}
.cs-page-content .elementor-widget-text-editor ul > li,
.cs-page-content .elementor-text-editor ul > li,
.cs-article ul > li {
  position: relative; padding-left: 1.7em; margin: 0.5em 0; list-style: none !important;
}
.cs-page-content .elementor-widget-text-editor ul > li::before,
.cs-page-content .elementor-text-editor ul > li::before,
.cs-article ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--cs-grad); box-shadow: 0 0 0 3px rgba(246,149,36,.12);
}
/* Icon-list items: ensure a clean flex layout even when a glyph is absent. */
.cs-page-content .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 10px; }
.cs-page-content .elementor-icon-list-item .elementor-icon-list-icon { flex: 0 0 auto; }

/* ----------------------------------------------------------------------
   Home SEO copy — "Read More" wrap (GlassesShop-style) + visible CTAs
   The WP plugin reuses .cs-wp-toggle-btn for BOTH the collapse toggle (a
   <button>) AND real CTA links (<a> → open-project popup). Split them:
     • <button>  → the GlassesShop-style outlined "Read more" pill.
     • <a>        → a solid brand-gradient CTA button (was invisible before).
   ---------------------------------------------------------------------- */
button.cs-wp-toggle-btn {
  display: flex !important; margin: 26px auto 4px !important; width: fit-content;
  align-items: center; gap: 8px; padding: 12px 30px !important;
  background: transparent !important;
  color: #fff !important; border: 1.5px solid rgba(246, 149, 36, 0.55) !important; border-radius: 999px !important;
  font-weight: 700 !important; font-size: 15px !important; cursor: pointer !important;
  box-shadow: none !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
button.cs-wp-toggle-btn::after { content: "\25BE"; font-size: 12px; transition: transform 0.25s ease; }
.cs-wp-collapsible-container:not(.cs-collapsed) button.cs-wp-toggle-btn::after { transform: rotate(180deg); }
button.cs-wp-toggle-btn:hover { background: var(--cs-grad-soft) !important; border-color: #f69524 !important; transform: translateY(-1px); }

/* Content CTA links (SEO copy) → solid, legible brand-gradient buttons. */
a.cs-wp-toggle-btn,
.cs-page-content .elementor-widget-text-editor a.elementor-button,
.cs-page-content .elementor-widget-text-editor a.button,
.cs-wp-collapsible-content a[class*="btn"] {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 13px 30px !important; margin-top: 12px;
  background: var(--cs-btn-grad) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 0 !important; border-radius: 12px !important;
  font-weight: 700 !important; text-decoration: none !important;
  box-shadow: 0 8px 22px -6px rgba(242, 97, 11, 0.5) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}
a.cs-wp-toggle-btn:hover,
.cs-page-content .elementor-widget-text-editor a.elementor-button:hover,
.cs-wp-collapsible-content a[class*="btn"]:hover {
  transform: translateY(-2px); filter: brightness(1.07);
}

/* ----------------------------------------------------------------------
   Blog — readable structure (bullets, paragraph rhythm) + less top gap
   ---------------------------------------------------------------------- */
.cs-blog { padding-top: 40px !important; }
@media (min-width: 768px) { .cs-blog { padding-top: 56px !important; } }
.cs-article ol { list-style: decimal !important; padding-left: 1.5em !important; }
.cs-article ol > li { margin: 0.55em 0; }
.cs-article > *:first-child { margin-top: 0 !important; }

/* ----------------------------------------------------------------------
   Consistent page hierarchy — even anchor offset across Elementor pages.
   ---------------------------------------------------------------------- */
.cs-page-content > .elementor > .elementor-inner > .elementor-section-wrap > .e-con,
.cs-page-content > .elementor > .elementor-inner > .elementor-section-wrap > .elementor-top-section {
  scroll-margin-top: 90px;
}

/* ----------------------------------------------------------------------
   Home hero (#75466f4) — balanced, readable first fold
   Add a directional dark overlay over the Dubai skyline so the centred
   content reads cleanly, constrain the body copy width, and keep the two
   CTAs on one tidy centred row with the trust badges above them.
   ---------------------------------------------------------------------- */
.elementor-element-75466f4 { position: relative; isolation: isolate; }
.elementor-element-75466f4::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.88) 0%, rgba(5, 7, 13, 0.62) 42%, rgba(5, 7, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.35) 0%, rgba(5, 7, 13, 0.55) 100%);
}
.elementor-element-75466f4 > .e-con-inner,
.elementor-element-75466f4 > .elementor-element,
.elementor-element-75466f4 .e-con-inner { position: relative; z-index: 1; }
/* Constrain the intro paragraph so lines aren't uncomfortably wide. */
.elementor-element-8b9c7a6 { max-width: 680px; margin-inline: auto !important; }
/* Trust badge image: consistent, tidy size, truly centred. The composite badge
   image is inline-block, so text-align on the parent wasn't reaching it — force
   block + auto margins so it lines up with the centred heading/text/CTAs. */
.elementor-element-514cf89,
.elementor-element-514cf89 .elementor-widget-container,
.elementor-element-514cf89 .elementor-image,
.elementor-element-514cf89 figure {
  text-align: center !important;
}
.elementor-element-514cf89 img,
.elementor-element-b3ea22c .elementor-element-514cf89 img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: 58px;
  width: auto;
}

/* ----------------------------------------------------------------------
   Section rhythm — a consistent eyebrow treatment for the small orange
   "eyebrow" labels the pages use (e.g. "About Us"), so every section opens
   with the same visual cue across the whole site.
   ---------------------------------------------------------------------- */
.cs-page-content .elementor-widget-heading .elementor-heading-title { }

/* ----------------------------------------------------------------------
   Tech-logos marquee — tidier, more even spacing (the source PNGs carry
   uneven transparent padding, so a smaller gap reads more evenly), and the
   footer strip gets breathing room below the gradient top accent line.
   ---------------------------------------------------------------------- */
.cs-logo-marquee .cs-marquee-track { gap: 46px !important; }
.cs-logo-marquee .cs-carousel-logo { display: flex; align-items: center; justify-content: center; }
.cs-logo-marquee .cs-carousel-logo img { max-height: 46px !important; width: auto; object-fit: contain; }
/* Footer logo strip: clear space under the branded gradient line so it reads
   as a deliberate top accent, not a line jammed against the logos. */
.cs-site-footer .cs-logo-marquee { padding: 34px 0 20px !important; }
.cs-site-footer .cs-logo-marquee .cs-carousel-logo img { max-height: 40px !important; }

/* ----------------------------------------------------------------------
   Home hero CTAs — put the two buttons on ONE perfectly-aligned row.
   The two button widgets (bed3044 = "Get Your Free Strategy Consultation",
   3ae16e4 = "View Our Portfolio") had unequal top margins + wrapper heights,
   so the red button sat 16px higher. Force equal margins + centre both.
   ---------------------------------------------------------------------- */
.elementor-element-75466f4 .e-con-inner { align-items: center !important; }
.elementor-element-bed3044,
.elementor-element-3ae16e4 {
  margin: 20px 0 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
}
.elementor-element-bed3044 .elementor-button-wrapper,
.elementor-element-3ae16e4 .elementor-button-wrapper {
  display: flex; align-items: center; margin: 0 !important;
}
/* Match the two buttons' vertical size so the row reads as one clean pair. */
.elementor-element-bed3044 .elementor-button,
.elementor-element-3ae16e4 .elementor-button {
  min-height: 52px; display: inline-flex; align-items: center;
}

/* ----------------------------------------------------------------------
   Uploaded SVG icons (Elementor "SVG library" icons — e.g. the orange
   Helpline / Email / Dubai-HQ circles) now render as <img class=cs-svg-icon>.
   Size them per context so they read like the live site.
   ---------------------------------------------------------------------- */
.cs-svg-icon { display: inline-block; object-fit: contain; vertical-align: middle; }
.elementor-icon-box-icon .cs-svg-icon,
.elementor-icon-wrapper .elementor-icon .cs-svg-icon { width: 56px; height: 56px; }
.elementor-icon-list-icon .cs-svg-icon { width: 20px; height: 20px; }

/* ----------------------------------------------------------------------
   Tech-logos strip — make EVERY logo legible (dark logos like MongoDB /
   Node were nearly invisible on the black band). Sit each on a soft chip.
   ---------------------------------------------------------------------- */
.cs-logo-marquee .cs-carousel-logo {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 10px 20px !important;
  height: 60px; box-sizing: border-box;
}
.cs-logo-marquee .cs-carousel-logo img { max-height: 34px !important; }
.cs-site-footer .cs-logo-marquee .cs-carousel-logo { padding: 8px 16px !important; height: 52px; }
.cs-site-footer .cs-logo-marquee .cs-carousel-logo img { max-height: 30px !important; }

/* ----------------------------------------------------------------------
   Sticky-header clearance — headings/anchors no longer hide under the bar.
   ---------------------------------------------------------------------- */
html { scroll-padding-top: 96px; }

/* ----------------------------------------------------------------------
   Content CTA buttons (the many red "Explore" / "Hire Us" buttons) — one
   consistent, on-brand gradient pill so paired buttons align + match.
   ---------------------------------------------------------------------- */
.cs-page-content .elementor-button {
  background-image: var(--cs-btn-grad) !important;
  background-color: transparent !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 0 !important; border-radius: 10px !important;
  padding: 12px 26px !important; font-weight: 600 !important;
  box-shadow: 0 8px 20px -8px rgba(242, 97, 11, 0.5) !important;
}

/* ----------------------------------------------------------------------
   Nested-carousel width fix — the widget container was expanding to its
   slide-content width (~2500px), overflowing the viewport and pushing the
   "next" arrow off-screen. Constrain it to the widget/column width so both
   arrows sit at the visible edges.
   ---------------------------------------------------------------------- */
.cs-page-content .elementor-widget-nested-carousel > .elementor-widget-container,
.cs-page-content .cs-nested-carousel,
.cs-page-content .cs-nested-carousel > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.cs-page-content .cs-nested-carousel { overflow: visible; }
/* keep arrows just inside the edge so no ancestor overflow clips them */
.cs-nested-carousel .cs-carousel-prev { left: 6px; }
.cs-nested-carousel .cs-carousel-next { right: 6px; }

/* ======================================================================
   HERO PAGES — header floats OVER a full-bleed hero (no black band above).
   The sticky header (~91px) used to push the hero down, leaving a dark strip
   at the top. On pages whose first section has a background image (.cs-has-hero)
   pull that section up under the header so the skyline reaches the top and the
   header floats over it — cleaner + shorter first fold, matching the live site.
   ====================================================================== */
:root { --cs-header-h: 92px; }
.cs-has-hero .elementor > .e-con:first-child,
.cs-has-hero .elementor > .elementor-top-section:first-child,
.cs-has-hero .elementor-section-wrap > .e-con:first-child,
.cs-has-hero .elementor-section-wrap > .elementor-top-section:first-child,
.cs-has-hero > .cs-service-system > section:first-child {
  margin-top: calc(-1 * var(--cs-header-h)) !important;
}
/* Compensate the pull-up with matching top padding so the hero CONTENT still
   sits below the header (bg fills up behind it, content stays clear). */
.cs-has-hero .elementor > .e-con:first-child,
.cs-has-hero .elementor > .elementor-top-section:first-child,
.cs-has-hero .elementor-section-wrap > .e-con:first-child,
.cs-has-hero .elementor-section-wrap > .elementor-top-section:first-child {
  padding-top: calc(var(--cs-header-h) + 36px) !important;
}
.cs-has-hero > .cs-service-system > section:first-child {
  padding-top: calc(var(--cs-header-h) + 24px) !important;
}
@media (max-width: 767px) {
  :root { --cs-header-h: 76px; }
}

/* ======================================================================
   FEATURE CARDS — one consistent, premium look for every content card
   (containers filled with a solid colour + rounded corners). Replaces the
   flat grey box + light-grey border with a subtle glass card, a brand
   gradient top accent, hover lift, and CTAs aligned to the card bottom.
   ====================================================================== */
.cs-page-content .cs-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 30px 28px !important;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.cs-page-content .cs-card > .e-con-inner { display: flex; flex-direction: column; flex: 1; }
.cs-page-content .cs-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cs-grad); opacity: 0.85;
}
.cs-page-content .cs-card:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 149, 36, 0.42) !important;
  box-shadow: 0 28px 60px -30px rgba(242, 97, 11, 0.55);
}
/* Heading + copy inside cards stay tidy; the CTA sinks to the bottom so a row
   of cards has its buttons on one line regardless of copy length. */
.cs-page-content .cs-card .elementor-widget-heading { margin-bottom: 6px; }
.cs-page-content .cs-card .elementor-widget-button { margin-top: auto; padding-top: 18px; }
.cs-page-content .cs-card .elementor-widget-button .elementor-button { width: auto; }
@media (prefers-reduced-motion: reduce) {
  .cs-page-content .cs-card:hover { transform: none; }
}

/* Branded image placeholder when remote/offline images fail to load */
.cs-img-fallback {
  background: linear-gradient(135deg, #0a0e18 0%, #171f30 100%) !important;
  position: relative;
}
.cs-img-fallback::before {
  content: "CubicSofts";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mega-menu full width & center alignment */
.csh-nav {
  position: static;
}
.csh-nav-item.csh-has-mega {
  position: static !important;
}
.csh-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(8px);
}
.csh-mega.is-open {
  transform: translateY(0);
}

/* Start Project Modal Submit Button */
.cs-modal-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  width: 100% !important;
  border: 0 !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #f2610b 0%, #ed4239 50%, #f69524 100%) !important;
  background-color: #f2610b !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px -3px rgba(242, 97, 11, 0.45) !important;
  transition: all 0.25s ease !important;
}
.cs-modal-submit:hover {
  background: linear-gradient(135deg, #f69524 0%, #f2610b 50%, #c9322a 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -3px rgba(242, 97, 11, 0.6) !important;
}
.cs-modal-submit:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ======================================================================
   CASE STUDIES & SINGLE CASE STUDIES MOBILE RESPONSIVENESS
   ====================================================================== */

/* 1. Global fix for Elementor's 20em desktop/tablet margin on single case studies */
@media (max-width: 1024px) {
  .cs-single-case-study-page .elementor-widget-container,
  [data-case-study="single"] .elementor-widget-container,
  .cs-single-case-study-page .elementor-widget,
  [data-case-study="single"] .elementor-widget {
    margin-right: 0 !important;
  }
}

/* 2. Mobile styles (max-width: 767px) */
@media (max-width: 767px) {
  /* Prevent horizontal overflow across all case study pages */
  .cs-case-studies-page,
  .cs-single-case-study-page,
  [data-case-study="index"],
  [data-case-study="single"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .cs-case-studies-page .e-con,
  .cs-case-studies-page .e-con-inner,
  .cs-single-case-study-page .e-con,
  .cs-single-case-study-page .e-con-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- CASE STUDIES HUB (/case-studies/) --- */
  /* Fix oversized hero banner height on mobile */
  .cs-case-studies-page .elementor > .e-con:first-child,
  .cs-case-studies-page .elementor-element-7d3068a,
  [data-page-id="5537"] .elementor > .e-con:first-child,
  [data-page-id="5537"] .elementor-element-7d3068a,
  [data-case-study="index"] .elementor > .e-con:first-child {
    padding-top: calc(var(--cs-header-h, 76px) + 24px) !important;
    padding-bottom: 24px !important;
    min-height: auto !important;
    margin-top: calc(-1 * var(--cs-header-h, 76px)) !important;
  }
  .cs-case-studies-page .elementor-element-a2952ce .elementor-heading-title,
  [data-page-id="5537"] .elementor-element-a2952ce .elementor-heading-title,
  [data-case-study="index"] .elementor-heading-title {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* Center the "View Full Case study" buttons on mobile */
  .cs-case-studies-page .elementor-widget-button,
  .cs-case-studies-page .elementor-button-wrapper,
  [data-page-id="5537"] .elementor-widget-button,
  [data-page-id="5537"] .elementor-button-wrapper,
  [data-case-study="index"] .elementor-widget-button,
  [data-case-study="index"] .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .cs-case-studies-page .elementor-button,
  [data-page-id="5537"] .elementor-button,
  [data-case-study="index"] .elementor-button {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Center case study headings & descriptions on mobile cards */
  .cs-case-studies-page .elementor-widget-heading,
  .cs-case-studies-page .elementor-widget-text-editor,
  [data-page-id="5537"] .elementor-widget-heading,
  [data-page-id="5537"] .elementor-widget-text-editor {
    text-align: center !important;
  }
  .cs-case-studies-page .elementor-heading-title,
  [data-page-id="5537"] .elementor-heading-title {
    text-align: center !important;
  }

  /* --- SINGLE CASE STUDIES (/case-studies/[slug]/) --- */
  /* Section 0: Hero */
  .cs-single-case-study-page .elementor > .e-con:first-child,
  [data-case-study="single"] .elementor > .e-con:first-child {
    padding-top: calc(var(--cs-header-h, 76px) + 20px) !important;
    padding-bottom: 30px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: calc(-1 * var(--cs-header-h, 76px)) !important;
    min-height: auto !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child > .e-con-inner,
  [data-case-study="single"] .elementor > .e-con:first-child > .e-con-inner {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child > .e-con-inner > .e-con,
  [data-case-study="single"] .elementor > .e-con:first-child > .e-con-inner > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child .elementor-heading-title,
  [data-case-study="single"] .elementor > .e-con:first-child .elementor-heading-title {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child .elementor-widget-text-editor,
  [data-case-study="single"] .elementor > .e-con:first-child .elementor-widget-text-editor {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child .elementor-button-wrapper,
  [data-case-study="single"] .elementor > .e-con:first-child .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
  }
  .cs-single-case-study-page .elementor > .e-con:first-child img,
  [data-case-study="single"] .elementor > .e-con:first-child img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Section 1: Overview */
  .cs-single-case-study-page .elementor > .e-con:nth-child(2),
  [data-case-study="single"] .elementor > .e-con:nth-child(2) {
    padding: 36px 16px !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(2) .elementor-heading-title,
  [data-case-study="single"] .elementor > .e-con:nth-child(2) .elementor-heading-title {
    font-size: 24px !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(2) .elementor-text-editor,
  [data-case-study="single"] .elementor > .e-con:nth-child(2) .elementor-text-editor {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }

  /* Section 2: Metrics / Counters */
  .cs-single-case-study-page .elementor > .e-con:nth-child(3),
  [data-case-study="single"] .elementor > .e-con:nth-child(3) {
    padding: 36px 16px !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) .elementor-heading-title,
  [data-case-study="single"] .elementor > .e-con:nth-child(3) .elementor-heading-title {
    font-size: 24px !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) .elementor-text-editor,
  [data-case-study="single"] .elementor > .e-con:nth-child(3) .elementor-text-editor {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }
  /* Stacking the 5 counter items into a responsive wrapped 2-column layout */
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) .e-con.e-flex,
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) [class*="68b4a1d"],
  [data-case-study="single"] .elementor > .e-con:nth-child(3) .e-con.e-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) .e-con.e-flex > .e-con,
  .cs-single-case-study-page .elementor > .e-con:nth-child(3) [class*="68b4a1d"] > .e-con,
  [data-case-study="single"] .elementor > .e-con:nth-child(3) .e-con.e-flex > .e-con {
    flex: 1 1 calc(50% - 16px) !important;
    min-width: 130px !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor-widget-counter .elementor-counter-number-wrapper,
  [data-case-study="single"] .elementor-widget-counter .elementor-counter-number-wrapper {
    font-size: 32px !important;
  }
  .cs-single-case-study-page .elementor-widget-counter .elementor-counter-title,
  [data-case-study="single"] .elementor-widget-counter .elementor-counter-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Section 3: 3 Columns (Left Text, Center Mockup Image, Right Text) */
  .cs-single-case-study-page .elementor > .e-con:nth-child(4),
  [data-case-study="single"] .elementor > .e-con:nth-child(4) {
    padding: 36px 16px !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) > .e-con-inner,
  .cs-single-case-study-page .elementor > .e-con:nth-child(4),
  [data-case-study="single"] .elementor > .e-con:nth-child(4) > .e-con-inner,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) > .e-con-inner > .e-con,
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) > .e-con,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) > .e-con-inner > .e-con,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) img,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) .elementor-heading-title,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) .elementor-heading-title {
    font-size: 20px !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(4) .elementor-text-editor,
  [data-case-study="single"] .elementor > .e-con:nth-child(4) .elementor-text-editor {
    font-size: 14px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }

  /* Section 4: Tools & Technologies List & Results */
  .cs-single-case-study-page .elementor > .e-con:nth-child(5),
  [data-case-study="single"] .elementor > .e-con:nth-child(5) {
    padding: 36px 16px 40px 16px !important;
    margin-bottom: 20px !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(5) .elementor-heading-title,
  [data-case-study="single"] .elementor > .e-con:nth-child(5) .elementor-heading-title {
    font-size: 24px !important;
    text-align: center !important;
  }
  .cs-single-case-study-page .elementor-widget-icon-list .elementor-icon-list-items,
  [data-case-study="single"] .elementor-widget-icon-list .elementor-icon-list-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-left: 0 !important;
  }
  .cs-single-case-study-page .elementor-widget-icon-list .elementor-icon-list-item,
  [data-case-study="single"] .elementor-widget-icon-list .elementor-icon-list-item {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .cs-single-case-study-page .elementor > .e-con:nth-child(5) .elementor-text-editor,
  [data-case-study="single"] .elementor > .e-con:nth-child(5) .elementor-text-editor {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }
}