.elementor-47535 .elementor-element.elementor-element-427eed5{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-47535 .elementor-element.elementor-element-427eed5:not(.elementor-motion-effects-element-type-background), .elementor-47535 .elementor-element.elementor-element-427eed5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B163F;background-image:url("https://www.prowesssoft.com/wp-content/uploads/2021/10/page-header-bg-1.svg");}.elementor-47535 .elementor-element.elementor-element-68b7432{text-align:start;}.elementor-47535 .elementor-element.elementor-element-68b7432 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:31px;font-weight:700;color:#FFFFFF;}.elementor-47535 .elementor-element.elementor-element-1804e46 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-47535 .elementor-element.elementor-element-1804e46 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-47535 .elementor-element.elementor-element-1804e46{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-47535 .elementor-element.elementor-element-1804e46 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-47535 .elementor-element.elementor-element-1804e46 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;}.elementor-47535 .elementor-element.elementor-element-1804e46 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-47535 .elementor-element.elementor-element-d6bb9f4 .elementor-button{background-color:#175CFF;font-family:"Poppins", Sans-serif;font-size:15px;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#175CFF;border-radius:5px 5px 5px 5px;padding:15px 020px 15px 20px;}.elementor-47535 .elementor-element.elementor-element-d6bb9f4 .elementor-button:hover, .elementor-47535 .elementor-element.elementor-element-d6bb9f4 .elementor-button:focus{background-color:#FFFFFF00;color:#175CFF;}.elementor-47535 .elementor-element.elementor-element-d6bb9f4 .elementor-button:hover svg, .elementor-47535 .elementor-element.elementor-element-d6bb9f4 .elementor-button:focus svg{fill:#175CFF;}.elementor-47535 .elementor-element.elementor-element-a9d3d50{--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;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-47535 .elementor-element.elementor-element-524ae42{--display:flex;}.elementor-47535 .elementor-element.elementor-element-bf8a788 img{width:100%;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading{text-align:left;margin-bottom:33px;}.elementor-47535 .elementor-element.elementor-element-3ba733a{width:var( --container-widget-width, 100.189% );max-width:100.189%;--container-widget-width:100.189%;--container-widget-flex-grow:0;}.elementor-47535 .elementor-element.elementor-element-3ba733a > .elementor-widget-container{margin:0% 0% 0% 0%;padding:0px 0px 0px 0px;}.elementor-47535 .elementor-element.elementor-element-3ba733a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .subtitle, .elementor-47535 .elementor-element.elementor-element-3ba733a .section-subhead .subtitle{margin-bottom:8px;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .section-title{font-family:"Poppins", Sans-serif;font-size:32px;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .subtitle{font-family:"Poppins", Sans-serif;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .description, .elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .description p{color:#000000;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .description{font-family:"Poppins", Sans-serif;font-size:15px;}.elementor-47535 .elementor-element.elementor-element-6e1c0dd > .elementor-widget-container{margin:-5% 0% 0% 0%;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-47535 .elementor-element.elementor-element-68b7432{text-align:center;}.elementor-47535 .elementor-element.elementor-element-68b7432 .elementor-heading-title{font-size:26px;line-height:1.2em;}.elementor-47535 .elementor-element.elementor-element-3ba733a > .elementor-widget-container{margin:25px 0px 0px 0px;padding:0px 15px 0px 15px;}.elementor-47535 .elementor-element.elementor-element-3ba733a .section-heading .section-title{font-size:28px;}}@media(min-width:768px){.elementor-47535 .elementor-element.elementor-element-427eed5{--content-width:1080px;}.elementor-47535 .elementor-element.elementor-element-a9d3d50{--content-width:1080px;}}/* Start custom CSS for tt-heading, class: .elementor-element-3ba733a */.elementor-21535 .elementor-element.elementor-element-21dfe869 .section-heading{
    margin-bottom: 0px !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6e1c0dd */:root{
  --ink:#0b1220;
  --muted:#475569;
  --bg:#f4f7f9;
  --pill:#dbe7ff;   /* header strip (very light blue) */
  --card:#e7f0ff;   /* card body (light blue) */
  --spine:#0b64ff;  /* center line */
  --icon-blue:#0b64ff;     /* icon disk */
  --radius-pill:28px;
  --radius-card:28px;
  --shadow:0 10px 24px rgba(2,14,40,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
/* ================ PAGE ================ */
.page {
  width: 100% !important;
  margin: 0;
  padding: 0;
}
.hero{ text-align:center; margin-bottom:32px }
.hero h1{
  margin:0 0 10px;
  font-weight:800;
  font-size:clamp(26px,3.2vw,40px);
  letter-spacing:-.02em;
}
.hero p{ margin:0; color:var(--muted); font-size:clamp(14px,2vw,18px) }
/* ================ TIMELINE ================ */
.timeline{ position:relative }
.timeline::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  transform:translateX(-50%);
  width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--spine),#2a7dff);
}
/* row: left header+card | icon | right header+card */
.tl-row{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:18px;
  align-items:start;
  margin:28px 0 18px;
}
/* ----- ICON ON SPINE ----- */
.tl-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--icon-blue);
  display:grid;place-items:center;
  justify-self:center;
  position:relative;
  z-index:2;
  box-shadow:0 8px 22px rgba(11,100,255,.35);
}
.tl-icon::after{ /* white ring */
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  box-shadow:0 0 0 6px var(--icon-ring);
}
.tl-icon img{ width:32px;height:32px; display:block }
/* ----- HEADER PILL BAR (separate strip like screenshot) ----- */
.tl-head{
  background:var(--pill);
  border-radius:var(--radius-pill);
  padding:14px 20px;
  font-weight:800;
  font-size:22px;
  letter-spacing:.2px;
  color:#0b1d4a;
  box-shadow:var(--shadow);
  position:relative;
  display:flex; align-items:center; justify-content:flex-start;
}
/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:20px 24px;
  box-shadow:var(--shadow);
  color:#0b1d4a;
}
.card ul{ margin:0; padding-left:20px }
.card li{ margin:8px 0 }
.card b{ font-weight:800 }
/* ========== RIGHT HEADER IMAGE (The Challenge) ========== */
.head-with-art{
  position:relative;
  overflow:visible;
padding-right:210px;       /* leave room for the art on the right */
}
.head-with-art .art{
  position:absolute;
  right:-10px; top:-30px;    /* sits visually like your screenshot */
  width:500px; max-width:60%;
}
.head-with-art .art img
{ width: -300px;              /* scale perfectly */
  margin-top: -120px;         /* slightly above header */
  margin-left: -70px;  
}
 
.head-with-art {
  padding-right: 240px;      /* makes space inside the header for the yacht */
}
 
/* ✅ Make left & right columns in each row equal height */
.tl-row {
  align-items: stretch !important;
}
 
/* ✅ Make the card expand to fill full available height */
.col {
  display: flex;
  flex-direction: column;
}
 
.col .card {
  flex-grow: 1;
}
 
/* ----- Alternating helpers ----- */
.col{ display:flex; flex-direction:column; gap:14px}
.left{ grid-column:1 }
.right{ grid-column:3 }
/* ================ RESPONSIVE ================ */
@media (max-width:1100px){
  .tl-row{ grid-template-columns:1fr 80px 1fr }
  .tl-icon{ width:60px; height:60px }
}
@media (max-width:920px){
  .tl-row{ grid-template-columns:1fr 64px 1fr }
  .tl-icon{ width:56px; height:56px }
}
@media (max-width:800px){
  .timeline::before{ left:32px; transform:none }
  .tl-row{
    grid-template-columns:64px 1fr;
    gap:16px;
    align-items:stretch;
  }
  .left,.right{ grid-column:2 }
  .tl-icon{ grid-column:1; grid-row:1; }
  .head-with-art{ padding-right:140px }
  .head-with-art .art{ width:140px; right:-6px; top:-24px }
  .tl-head{ font-size:20px }
}
/* small polish */
.footer-note{ color:var(--muted); text-align:center; margin-top:34px; font-size:14px }
/* ===== SHORT DASHED CONNECTORS (to headers) ===== */
.conn{
  height:0;
  position:relative;
}
.conn::before{
  content:"";
  position:absolute;
  top:0;
  width:56px;                 /* adjust length */
  border-top:2px dashed #c7d4ff;
}
.left .conn::before{ right:-10px }   /* from left header to icon */
.right .conn::before{ left:-10px }   /* from right header to icon */
/* === CONFIG (match your grid) === */
:root{
  --center-col: 90px;   /* middle column width in .tl-row */
  --gap-x: 18px;        /* grid column gap in .tl-row */
  --icon-size: 64px;    /* .tl-icon width/height */
}
/* your existing rule already has this; keep it */
.tl-row{
  display:grid;
  grid-template-columns:1fr var(--center-col) 1fr;
  gap:var(--gap-x);
}
/* make the header a positioning context */
.tl-head{
  position:relative;   /* you already have this; keep it */
}
/* ---- CONNECTOR LINES (centered to the icon) ---- */
/* Left column: draw to the RIGHT toward the icon */
.left .tl-head::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right: calc(-1 * (var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2));
  width: calc(var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2);
  border-top:2px dashed #c7d4ff;
}
/* Right column: draw to the LEFT toward the icon */
.right .tl-head::before{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left: calc(-1 * (var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2));
  width: calc(var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2);
  border-top:2px dashed #c7d4ff;
}
/* Optional: hide connectors on mobile when the layout stacks */
@media (max-width:800px){
  .left .tl-head::after,
  .right .tl-head::before{ display:none }
}
/* Push "The Challenge" header down on the first row (desktop only) */
@media (min-width: 901px){
  .tl-row:first-child .right .tl-head{
    margin-top: 90px;   /* tweak 18–28px until it matches your screenshot */
  }
}
/* Desktop only: align the Introduction heading with the first icon */
@media (min-width: 901px){
.timeline .tl-row:first-of-type .col.left {
    margin-top: -80px;   /* pull the whole Intro block up */
  }
}
/* ===== Connector geometry (desktop) ===== */
:root{
  --center-col: 90px;   /* width of the middle column that holds the icon */
  --gap-x: 18px;        /* grid column gap between cols */
  --icon-size: 64px;    /* .tl-icon width/height */
}
/* make sure tl-row uses the same numbers */
.tl-row{
  display:grid;
  grid-template-columns:1fr var(--center-col) 1fr;
  gap:var(--gap-x);
}
/* the header is the anchor for the dashed connector */
.tl-head{ position:relative }
/* LEFT header → draw RIGHT towards the icon */
.left .tl-head::after{
  content:"";
  position:absolute; top:50%;
  transform:translateY(-50%);
  right: calc(-1 * (var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2));
  width: calc(var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2);
  border-top:2px dashed #c7d4ff;
}
/* RIGHT header → draw LEFT towards the icon */
.right .tl-head::before{
  content:"";
  position:absolute; top:50%;
  transform:translateY(-50%);
  left: calc(-1 * (var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2));
  width: calc(var(--gap-x) + var(--center-col)/2 - var(--icon-size)/2);
  border-top:2px dashed #c7d4ff;
}
/* stack layout on mobile: hide short connectors */
@media (max-width:800px){
  .left .tl-head::after,
  .right .tl-head::before{ display:none }
}
/* Pull the whole left block up a touch on the first row */
@media (min-width:901px){
  .timeline .tl-row:first-of-type .col.left{ margin-top:-80px; }
  /* push the first right header a little down so it sits beside the top icon */
  .timeline .tl-row:first-of-type .right .tl-head{ margin-top:90px; }
}
/* Balance the first row spacing */
@media (min-width:901px){
  /* push Introduction block down */
  .timeline .tl-row:first-of-type .col.left {
    margin-top: 5px;   /* adjust until it looks right (try 40–60px) */
  }
  /* keep Challenge aligned nicely with the icon */
  .timeline .tl-row:first-of-type .col.right .tl-head {
    margin-top: 0;  /* reset or lower this if it's too low */
  }
}
/* Reduce gap between first two icons */
.timeline .tl-row:nth-of-type(1),
.timeline .tl-row:nth-of-type(2) {
  margin-bottom: -180px;   /* tighten space between Intro + Challenge */
}
/* Reduce gap between last two icons */
.timeline .tl-row:nth-of-type(5),
.timeline .tl-row:nth-of-type(6) {
  margin-top: -140px;     /* pull Why Prowess closer to Results */
}
/* Add extra gap between 2nd (Challenge) and 3rd (Solution) icons */
.timeline .tl-row:nth-of-type(2) {
  margin-bottom: -120px;   /* increase gap below Challenge */
}
.timeline .tl-row:nth-of-type(3) {
  margin-top: 40px;      /* increase gap above Solution */
}
.timeline .tl-row:nth-of-type(3) {
  margin-bottom: -250px;    /* tighten space below Solution */
}
.timeline .tl-row:nth-of-type(4) {
  margin-top: -180px;       /* tighten space above Adoption */
}
.timeline .tl-row:nth-of-type(4) {
  margin-bottom: -40px;   /* increase gap below Challenge */
}
.timeline .tl-row:nth-of-type(5) {
  margin-top: 50px;      /* increase gap above Solution */
}
.timeline .tl-row:nth-of-type(5) {
  margin-bottom: -220px;   /* increase gap below Challenge */
}
.timeline .tl-row:nth-of-type(6) {
  margin-top: -200px;      /* increase gap above Solution */
}
/* Enlarge only the inner icon, not the circle */
.tl-icon img {
  width: 48px;   /* was 32px */
  height: 48px;  /* was 32px */
}
/* MOBILE (≤992px) — fix footer clipping */
@media (max-width: 992px){
/* Let sticky work (no overflow hidden on the container) */
  .sidebar{
    height: 100dvh;
    max-height: 100dvh;
    overflow: visible;                 /* <-- IMPORTANT: was hidden */
  }
  /* Only the menu scrolls; leave space for the sticky footer */
  .sidebar-menu{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  /* Footer sticks above iOS bottom bar */
  .sidebar-footer{
    position: sticky;
    bottom: -5px !important;
    z-index: 2;
    padding: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,1));
    backdrop-filter: saturate(120%) blur(2px);
  }
  /* Make the name wrap cleanly */
  .sidebar-footer .sa-meta{ min-width: 0; }
  .sidebar-footer .sa-name{
    color: #fff !important;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
  .sidebar-footer .sa-role{
    color: #94a3b8 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* =========================================
   MOBILE SIDEBAR — pinned footer (name fully visible)
   Works across iOS/Android. No JS changes needed.
   ========================================= */
:root{
  --sb-footer-h: 96px; /* footer height; tweak to your design (88–110px) */
}
@media (max-width: 992px){
  /* Sidebar is a full-height sheet; children can use fixed pos */
.sidebar{
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;              /* dynamic viewport for iOS */
    max-height: 100dvh;
    width: 280px !important;
    transform: translateX(-100%);  /* your default hidden state */
    will-change: transform;
    overflow: hidden;              /* keep the sheet neat */
  }
  .sidebar.active{ transform: translateX(0); }
  /* Only the menu scrolls; leave room for the footer */
  .sidebar-menu{
    flex: 1 1 auto;
    min-height: 0;                /* critical for flex + overflow */
    overflow-y: auto;
    padding-bottom: calc(var(--sb-footer-h) + env(safe-area-inset-bottom));
  }
  /* FOOTER: truly pinned at the bottom of the sidebar sheet */
  .sidebar-footer{
    position: fixed;              /* fixed relative to transformed .sidebar */
    left: 0; right: 0;
    bottom: 0;
    width: 100%;
    height: var(--sb-footer-h);
    z-index: 2;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,1));
    backdrop-filter: saturate(120%) blur(2px);
  }
  /* Make sure the content inside footer can wrap and never clip */
  .sidebar-footer .sidebar-account{ margin:0; }
  .sidebar-footer .sa-meta{ min-width: 0; }
  .sidebar-footer .sa-name{
    color:#fff !important;
    font-weight:600;
    white-space: normal;          /* allow multi-line names */
    word-break: break-word;
    line-height:1.25;
  }
  .sidebar-footer .sa-role{
    color:#94a3b8 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Equal heights for stat cards on small screens */
.row.equal-cards { align-items: stretch; }
.row.equal-cards > [class*="col-"] { display: flex; }
.row.equal-cards > [class*="col-"] > .card { flex: 1 1 auto; }
.stat-card{
  min-height: 128px;  /* adjust as needed */
  display: flex;
}
.stat-card .card-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card{background-color: #E7F0FF !important;
    border-radius: 2.25rem !important;}
    /* —— Desktop / Tablet: keep the illustration visible —— */
@media (min-width: 801px){
  .head-with-art{ padding-right:210px !important; }
  .head-with-art .art{ display:block !important; }
}
/* —— Mobile (≤800px) —— */
@media (max-width: 800px){
  /* single-line layout: [icon] [content] */
  .timeline > .tl-row{
    grid-template-columns: 56px 1fr !important;  /* icon | content */
    gap: 12px !important;
    align-items: start !important;
    margin: 16px 0 !important;                   /* reset weird gaps */
    transform: none !important;
    position: relative;
  }
  /* spine on the left */
  .timeline::before{ left: 28px !important; transform: none !important; }
  /* icon size */
  .tl-icon{ width:56px !important; height:56px !important; }
  .tl-icon img{ width:32px !important; height:32px !important; }
  /* content always in the right column */
  .left, .right{ grid-column: 2 !important; }
  .tl-icon{ grid-column: 1 !important; }
  /* hide the challenge illustration on phones */
  .head-with-art{ padding-right:0 !important; }
  .head-with-art .art{ display:none !important; }
  /* kill desktop connector dashes */
  .left .tl-head::after,
  .right .tl-head::before{ display:none !important; }
  /* small line from icon → heading */
  .timeline > .tl-row .tl-head{
    position: relative;
    padding: 12px 16px;
    font-size: 18px;
  }
  .timeline > .tl-row .tl-head::before{
    content:"";
    display:block !important;
    position:absolute;
    top:50%; transform:translateY(-50%);
    left:-20px;                 /* sits between icon and pill */
    width:20px;
    border-top:2px solid #8FB1FF;
  }
  /* make head+card spacing tidy */
  .col{ gap:10px !important; }
  /* neutralize any per-row spacing hacks from desktop */
  .timeline > .tl-row:nth-of-type(n){
    margin-top:16px !important;
    margin-bottom:16px !important;
  }
}
/* MOBILE: make icon hug the content + make the little line fully span the gap */
@media (max-width: 800px) {
  /* Mobile layout adjustment */
  .timeline > .tl-row{
    grid-template-columns: 56px 1fr !important;  /* Keep the icon and content in 2 columns */
    gap: 8px !important;                         /* Reduced gap between icon and content */
    margin: 8px 0 !important;                   /* Adjust margins between rows */
    transform: none !important;
    position: relative !important;
  }
  /* Align the icon to the right edge of its column */
  .timeline > .tl-row .tl-icon{
    justify-self: end !important;
    width: 56px !important;
    height: 56px !important;
    margin-bottom:-18% !important;
  }
  /* Small connector line from icon to heading */
  .timeline > .tl-row .tl-head{
    position: relative;
  }
.timeline > .tl-row .tl-head::before{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left: calc(-1 * (8px + 6px));   /* Adjust connector line */
    width: calc(8px + 6px);        /* Reduced width for closer icon */
    border-top: 2px solid #8FB1FF;
    display:block !important;
  }
  /* Remove extra space above and below in rows 2, 4, and 6 */
  .timeline > .tl-row:nth-of-type(2),
  .timeline > .tl-row:nth-of-type(4),
  .timeline > .tl-row:nth-of-type(6){
    margin-top: 4px !important;  /* Reduced top margin */
    margin-bottom: 8px !important; /* Reduced bottom margin */
  }
  /* Remove the connector dashes on mobile */
  .left .tl-head::after, .right .tl-head::before{
    display:none !important; }}
@media (max-width: 768px) {
  .col.right {
    margin-top:-18%!important;   /* reset the negative margin */
  }
}
</style>/* End custom CSS */