.elementor-64 .elementor-element.elementor-element-28335218{--display:flex;--min-height:320px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-64 .elementor-element.elementor-element-28335218:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-28335218 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #5F2E8E 10%, #8811FF 100%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-c1e102c{text-align:center;}.elementor-64 .elementor-element.elementor-element-c1e102c .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:66px;font-weight:600;color:#FFFFFF;}.elementor-64 .elementor-element.elementor-element-d62eb4a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-933c91b{--display:flex;}.elementor-64 .elementor-element.elementor-element-933c91b:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-933c91b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0F12;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-64 .elementor-element.elementor-element-28335218{--content-width:1600px;}.elementor-64 .elementor-element.elementor-element-d62eb4a{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-1bc54ba *//* ============================================================
   GLOBAL DARK BACKGROUND (matches your entire website)
   ============================================================ */
body, .site-content, #main {
  background: #07090f !important;
}

/* ============================================================
   UNIVERSAL SECTION WRAPPER (smooth, no tile, no border)
   ============================================================ */
.eliverse-section,
.eliverse-section-dark {
  position: relative;
  padding: 100px 0;
  background: transparent !important;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
}



/* ============================================================
   SUPER-SMOOTH GLOBAL PURPLE BLEND (NO SHAPE, NO EDGES)
   ============================================================ */
.eliverse-section::before,
.eliverse-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% -20%,
      rgba(130, 80, 230, 0.06) 0%,
      rgba(7, 9, 15, 0.98) 60%,
      #07090f 100%
    );

  pointer-events: none;
  z-index: -1;
}





/* ============================================================
   MISSION & VISION — CLEAN BACKGROUND (FULLY BLENDED)
   ============================================================ */

#mission-vision {
  position: relative;
  padding: 100px 0;
  background: transparent !important; /* Removes all gradients */
}

/* Remove ANY background layer that was added previously */
#mission-vision::before {
  display: none !important;
}

/* Main container layout */
.mv-container {
  max-width: 1250px;
  margin: auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
  align-items: center;
}

/* Title */
.mv-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
}

/* Paragraph */
.mv-desc {
  color: #d8d9e5;
  font-size: 16px;
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 35px;
}

/* Cards */
.mv-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.mv-card {
  flex: 1;
  min-width: 280px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(152, 90, 235, 0.18);
  padding: 24px 20px;
  border-radius: 20px;
  transition: 0.25s ease;
}

.mv-card:hover {
  transform: translateY(-4px);
  background: rgba(152, 90, 235, 0.12);
  border-color: rgba(152, 90, 235, 0.32);
}

.mv-card h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}

.mv-card p {
  color: #cfd2e2;
  font-size: 15px;
  line-height: 1.65;
}

/* Right image */
.mv-image-box {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 45px rgba(0,0,0,0.55);
}

.mv-image-box img {
  width: 100%;
  display: block;
  transition: 0.45s ease;
}

.mv-image-box:hover img {
  transform: scale(1.07);
}

/* Responsive */
@media (max-width: 1100px) {
  .mv-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mv-cards {
    justify-content: center;
  }

  .mv-image-box {
    max-width: 80%;
    margin: 40px auto 0;
  }
}

@media (max-width: 700px) {
  .mv-title {
    font-size: 28px;
  }
  .mv-card {
    min-width: 100%;
  }
  .mv-image-box {
    max-width: 100%;
  }
}










/* ============================================================
   FIX SECTION SPACING
   ============================================================ */

/* Reduce space after HERO */
.eliverse-hero-true {
  padding-bottom: 60px; /* was ~80–100px */
}

/* Global section spacing for all about page sections */
.eliverse-section {
  padding-top: 60px;   /* reduce top space */
  padding-bottom: 80px;
}

/* Make Mission & Vision closer to hero */
#mission-vision {
  padding-top: 40px;   
  margin-top: 0 !important;
}

/* Remove any accidental top margin inside container */
#mission-vision .mv-container {
  margin-top: 0;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a650923 *//* ============================
   BASE SECTION WRAPPER
   ============================ */
.elv-services-os {
  background: #0C1014;
  padding: 90px 24px;
  color: #f4f3ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.elv-os-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* hide radios */
.elv-svc-input,
.elv-tab-master {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ============================
   MAIN CARD (APP SHELL)
   ============================ */
.elv-os-card {
  border-radius: 28px;
  border: 1px solid rgba(90, 78, 132, 0.8);
  background: radial-gradient(circle at top left, #151827, #0C1014 52%, #080a11 100%);
  box-shadow: 0 24px 80px rgba(0,0,0,0.9);
  padding: 18px 18px 22px;
}

/* ============================
   TOP SERVICE BAR – SCROLL
   ============================ */
.elv-svc-bar {
  margin-bottom: 14px;
}

.elv-svc-bar-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(183,176,218,0.88);
  margin-bottom: 6px;
}

.elv-svc-scroll-shell {
  position: relative;
  display: flex;
  align-items: stretch;
}

.elv-svc-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,110,170,0.9) transparent;
  padding: 2px 4px;
}
.elv-svc-tabs::-webkit-scrollbar {
  height: 4px;
}
.elv-svc-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.elv-svc-tabs::-webkit-scrollbar-thumb {
  background: rgba(120,110,170,0.9);
  border-radius: 999px;
}

.elv-svc-pill {
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 170px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(90, 78, 132, 0.8);
  background: rgba(10, 12, 24, 0.98);
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
.svc-pill-title {
  font-size: 13px;
  font-weight: 600;
  color: #f9fafb;
}
.svc-pill-sub {
  font-size: 11px;
  color: rgba(191,189,231,0.96);
}

/* arrows (visual hint only) */
.svc-arrow {
  flex: 0 0 auto;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 0 0 0 4px;
  color: rgba(210,208,245,0.9);
  background: radial-gradient(circle at center,
              rgba(26,23,55,0.95),
              rgba(7,7,18,0.95));
  border-radius: 999px;
  border: 1px solid rgba(83,72,132,0.85);
  pointer-events: none; /* native scroll only */
}
.svc-arrow-left {
  margin-right: 4px;
  margin-left: 0;
}

/* active service pill */
#svc-analytics:checked ~ .elv-os-card .elv-svc-tabs label[for="svc-analytics"],
#svc-eng:checked       ~ .elv-os-card .elv-svc-tabs label[for="svc-eng"],
#svc-ds:checked        ~ .elv-os-card .elv-svc-tabs label[for="svc-ds"],
#svc-vis:checked       ~ .elv-os-card .elv-svc-tabs label[for="svc-vis"],
#svc-web:checked       ~ .elv-os-card .elv-svc-tabs label[for="svc-web"],
#svc-mobile:checked    ~ .elv-os-card .elv-svc-tabs label[for="svc-mobile"],
#svc-uiux:checked      ~ .elv-os-card .elv-svc-tabs label[for="svc-uiux"],
#svc-video:checked     ~ .elv-os-card .elv-svc-tabs label[for="svc-video"],
#svc-3d:checked        ~ .elv-os-card .elv-svc-tabs label[for="svc-3d"] {
  background: linear-gradient(90deg, #8A3495, #5a2a8e);
  border-color: rgba(237,235,255,0.98);
  box-shadow: 0 12px 30px rgba(0,0,0,0.85);
  transform: translateY(-1px);
}

/* ============================
   SHELL: LEFT TABS + RIGHT
   ============================ */
.elv-os-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 20px;
  align-items: stretch;
}

/* LEFT INNER TABS */
.elv-os-tabs {
  border-radius: 20px;
  border: 1px solid rgba(73, 73, 122, 0.9);
  background: radial-gradient(circle at top left,
             rgba(20,18,39,1),
             rgba(8,8,19,1));
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.elv-inner-tab {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(7,10,20,0.98);
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}
.elv-inner-tab:hover {
  background: rgba(18,22,38,0.98);
  transform: translateY(-1px);
}
.inner-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(174,146,210,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #f9fafb;
  background: radial-gradient(circle at 30% 25%, #8A3495, #3f205e);
}
.inner-text strong {
  font-size: 13px;
  color: #f9fafb;
}
.inner-text small {
  display: block;
  font-size: 11px;
  color: rgba(189,181,219,0.9);
}

/* active inner tab */
#tab-overview:checked     ~ .elv-os-card .elv-os-tabs label[for="tab-overview"],
#tab-usecases:checked     ~ .elv-os-card .elv-os-tabs label[for="tab-usecases"],
#tab-deliverables:checked ~ .elv-os-card .elv-os-tabs label[for="tab-deliverables"],
#tab-stack:checked        ~ .elv-os-card .elv-os-tabs label[for="tab-stack"] {
  background: linear-gradient(145deg, #8A3495, #5a2a8e);
  border-color: rgba(234,231,255,0.95);
  box-shadow: 0 10px 24px rgba(0,0,0,0.85);
}

/* RIGHT CONTENT WRAP */
.elv-os-content {
  border-radius: 20px;
  border: 1px solid rgba(76,76,124,0.9);
  background: radial-gradient(circle at top left,
             rgba(14,17,30,1),
             rgba(8,9,18,1));
  padding: 14px 16px 18px;
  position: relative;
}

/* ============================
   SERVICE PANELS
   ============================ */
.svc-panel {
  display: none;
}

/* which service panel is visible */
#svc-analytics:checked ~ .elv-os-card .svc-panel-analytics { display: block; }
#svc-eng:checked       ~ .elv-os-card .svc-panel-eng       { display: block; }
#svc-ds:checked        ~ .elv-os-card .svc-panel-ds        { display: block; }
#svc-vis:checked       ~ .elv-os-card .svc-panel-vis       { display: block; }
#svc-web:checked       ~ .elv-os-card .svc-panel-web       { display: block; }
#svc-mobile:checked    ~ .elv-os-card .svc-panel-mobile    { display: block; }
#svc-uiux:checked      ~ .elv-os-card .svc-panel-uiux      { display: block; }
#svc-video:checked     ~ .elv-os-card .svc-panel-video     { display: block; }
#svc-3d:checked        ~ .elv-os-card .svc-panel-3d        { display: block; }

.svc-header {
  margin-bottom: 14px;
}
.svc-pill-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(151,126,204,0.9);
  background: rgba(10,10,25,0.95);
  color: rgba(235,233,255,0.98);
}
.svc-header h2 {
  margin: 10px 0 4px;
  font-size: 24px;
  color: #ffffff;
}
.svc-header p {
  margin: 0;
  font-size: 14px;
  color: rgba(216,219,245,0.96);
}

/* inner panes */
.svc-pane {
  display: none;
}
#tab-overview:checked     ~ .elv-os-card .svc-panel .svc-pane-overview     { display: block; }
#tab-usecases:checked     ~ .elv-os-card .svc-panel .svc-pane-usecases     { display: block; }
#tab-deliverables:checked ~ .elv-os-card .svc-panel .svc-pane-deliverables { display: block; }
#tab-stack:checked        ~ .elv-os-card .svc-panel .svc-pane-stack        { display: block; }

.pane-copy {
  font-size: 14px;
  color: rgba(220,222,246,0.97);
}
.pane-copy p {
  margin: 0 0 12px;
  line-height: 1.7;
}

/* ============================
   COMMON ELEMENTS
   ============================ */

/* soft pills under headings */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.soft-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157,130,201,0.95);
  background: radial-gradient(circle at top left,
              rgba(138,52,149,0.25),
              rgba(12,10,27,1));
  color: rgba(232,232,255,0.98);
}

/* meta chips */
.meta-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meta-chip {
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154,136,209,0.9);
  background: rgba(12,10,27,0.98);
}

/* timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 8px;
}
.timeline li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tl-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(174,146,210,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: radial-gradient(circle at 30% 25%, #8A3495, #3f205e);
}
.tl-body h4 {
  margin: 0 0 2px;
  font-size: 13px;
  color: #ffffff;
}
.tl-body p {
  margin: 0;
  font-size: 13px;
  color: rgba(214,216,240,0.96);
}

/* rails (two-column rows) */
.rail {
  display: grid;
  gap: 10px;
}
.rail-two-col {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.rail-row {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(11,10,26,0.96);
  border: 1px solid rgba(96,87,150,0.9);
  display: flex;
  gap: 8px;
}
.rail-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(158,132,207,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.rail-main h4 {
  margin: 0 0 2px;
  font-size: 13px;
  color: #ffffff;
}
.rail-main p {
  margin: 0;
  font-size: 13px;
}
.tag-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-mini {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(145,129,205,0.95);
}

/* deliverables list */
.deliv-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.deliv-two-col {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.deliv-row {
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(11,10,26,0.96);
  border: 1px solid rgba(96,87,150,0.9);
  display: flex;
  gap: 8px;
}
.deliv-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(158,132,207,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.deliv-main h4 {
  margin: 0 0 2px;
  font-size: 13px;
  color: #ffffff;
}
.deliv-main p {
  margin: 0;
  font-size: 13px;
}

/* notes */
.bullet-notes {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 15px;
  color: rgba(219,221,244,0.97);
}

/* tech stack chips */
.stack-groups {
  display: grid;
  gap: 12px;
}
.stack-two-col {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.stack-group h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #ffffff;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-size: 14px;
  padding: 4px 9px;
  margin-top: 5px;
  border-radius: 999px;
  border: 1px solid rgba(157,130,201,0.95);
  background: rgba(13,11,32,0.98);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 991px) {
  .elv-services-os {
    padding: 70px 16px;
  }
  .elv-os-shell {
    grid-template-columns: minmax(0,1fr);
  }
  .elv-os-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .elv-inner-tab {
    flex: 1 0 calc(50% - 6px);
  }
}

@media (max-width: 599px) {
  .elv-os-card {
    padding: 14px 12px 16px;
  }
  .elv-inner-tab {
    flex: 1 0 100%;
  }
  .rail-two-col,
  .deliv-two-col,
  .stack-two-col {
    grid-template-columns: minmax(0,1fr);
  }
  .svc-header h2 {
    font-size: 21px;
  }
}




/* Prevent page from jumping when service / inner tabs are clicked */
.elv-services-os .elv-svc-input,
.elv-services-os .elv-tab-master {
  position: fixed !important;
  left: -9999px !important;
  top: auto !important;
}







/* ================================================
   TEXT SIZE & ALIGNMENT IMPROVEMENTS (+1px upgrade)
   ================================================ */

/* Main description text */
.pane-copy,
.pane-copy p {
  font-size: 15px !important;          /* +1px */
  line-height: 1.75 !important;
  color: rgba(220, 222, 246, 0.97);
}

/* Timeline description text */
.timeline .tl-body p {
  font-size: 14px !important;          /* was 13px */
  line-height: 1.65 !important;
}

/* Timeline titles */
.timeline .tl-body h4 {
  font-size: 14px !important;          /* +1px */
}

/* Rail card text */
.rail-main p {
  font-size: 14px !important;          /* was 13px */
  line-height: 1.65 !important;
}

/* Rail titles */
.rail-main h4 {
  font-size: 14px !important;
}

/* Deliverable card text */
.deliv-main p {
  font-size: 14px !important;          /* was 13px */
  line-height: 1.65 !important;
}

/* Deliverable titles */
.deliv-main h4 {
  font-size: 14px !important;
}

/* Bullet notes */
.bullet-notes {
  font-size: 14px !important;          /* was 13px */
  line-height: 1.65 !important;
}

/* Service header description */
.svc-header p {
  font-size: 15px !important;          /* +1px */
  line-height: 1.75 !important;
}

/* Ensure cleaner vertical spacing */
.pane-copy p,
.rail-main p,
.deliv-main p {
  margin-bottom: 14px !important;
}

/* Align all text left for consistency */
.pane-copy,
.timeline,
.rail-row,
.deliv-row {
  text-align: left !important;
}




/* Make top-bar arrows clickable (no visual changes) */
.elv-svc-scroll-shell .svc-arrow {
  pointer-events: auto;
  cursor: pointer;
}/* End custom CSS */