:root {
  --skagerrak:#004f5f;
  --dark:#37464F;
  --still:#CCEEF2;
  --yellow:#F9D452;
  --white:#fff;
  --blue:#00ABC1;
  --lightbg:#F7FCFD;
  --lightgrey:#EFF2F4;
  --stibo:#FBFEFF;
  --dot-size: 7.7px;
  --dot-gap: 23px;
}
/* .flipbook-container *{
	box-sizing:border-box !important;
} */

@-moz-document url-prefix() {
  .two-col,
  .text {
    scrollbar-width: thin;
    scrollbar-color: #004f5f transparent;
  }
}


 .two-col::-webkit-scrollbar, .text::-webkit-scrollbar {
	width: 0.375rem;
}
.two-col::-webkit-scrollbar-track, .text::-webkit-scrollbar-track {
	background-color: transparent;
}
 .two-col::-webkit-scrollbar-thumb, .text::-webkit-scrollbar-thumb {
	background-color: #004f5f;
	border-radius: 0.625rem;
}

.two-col,
.text {
  overflow-y: auto; /* або auto */
}
.flipbook-main{
	margin-top:50px;
}
.flipbook-module-title{
	text-align:center;
	font-size:3rem;
	color:var(--dark);
	padding:0 20px;
}

.progress-bar-wrapper{ max-width:450px; margin:0 auto; }

[page="1"]{ overflow:visible !important; }

.page .text > *,
.page .caption,
.page .cta-pill{
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}
.page{
	border-radius:20px;
}
/* Make page 1 visible on initial load (Turn.js renders [page="1"]) */
[page="1"] .text > *,
[page="1"] .caption,
[page="1"] .cta-pill {
  opacity: 1;
  transform: none;
}

@keyframes arrowMove { from{transform:rotate(180deg) translateY(50%) translateX(0)} to{transform:rotate(180deg) translateY(50%) translateX(10px)} }

body{ background-color:var(--still) !important; margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow-x:hidden }
.flipbook-container{ position:relative;
	max-height:750px;
	box-shadow:0 20px 60px rgba(0,0,0,0.3);
	border-radius:20px; overflow:hidden; 
	margin: 50px auto 70px; 
    max-width: 109.375rem !important; }
#flipbook{ border-radius:20px; overflow:hidden;

/*     padding: 4.625rem 11.625rem; */
}
.flipbook-container *{
	-webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-smoothing: antialiased !important;
}
.page{ background:var(--stibo); border:1px solid #ddd; box-sizing:content-box; display:flex; flex-direction:column; justify-content:center; position:relative; 
/* 	overflow:hidden;  */
}
.page.hard{ background:var(--still); background-image:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%); }
.page:nth-child(even){ background:var(--stibo); }

/* target for JS text fade-in */
.page .text *{ will-change: opacity, transform; }

.eyebrow{ font-weight:800; letter-spacing:.06em; color:var(--blue); text-transform:uppercase; margin:0 0 12px; font-size:20px; }
.lead{ font-size:22px; max-width:62ch; line-height:1.5; color:var(--dark); font-weight:500;}
ul.body{ padding-left:20px; }
.body{
  font-family:"Noto Sans";
  font-size:22px;
  font-style:normal;
  font-weight:500;
  line-height:150%;
	opacity:0;
  color:var(--dark);
}
.caption{
  color:#37464F;
  font-size:32px;
  font-style:normal;
  font-weight:700;
  line-height:150%;
}
.subttl{ font-size:1.5rem; color:var(--blue); margin:0 0 16px; font-weight:700; }
.small{ color:#37464F; font-size:22px; font-weight:400; line-height:normal; }
.linkish{ color:var(--blue); font-weight:700; }

/* =========================
   GRIDS → FLEX (preserve column ratios)
   ========================= */

/* default: 1.1fr | 0.9fr */
.sb-grid{
  display:flex;
	overflow:hidden;
  flex-wrap:nowrap;
  width:100%;
  height:100%;
  align-items:center;
  box-sizing:border-box;
}
.sb-grid > .sb-col:first-child{ flex:1.1 1 0; min-width:0; }
.sb-grid > .sb-col:last-child{  flex:0.9 1 0;  min-width:0; }

/* variant: 1.15fr | 0.85fr */
.sb-grid.sb-grid-two-to-three > .sb-col:first-child{ flex:1.15 1 0; }
.sb-grid.sb-grid-two-to-three > .sb-col:last-child{  flex:0.85 1 0;  }

/* equal columns: 1fr | 1fr */
.sb-grid.two-col > .sb-col{ flex:1 1 0; min-width:0; }
.page-2 .two-col{
	height:100% !important;
}
.sb-grid.two-col{
	overflow:
}
/* backgrounds / paddings remain the same */
.page-2 .sb-grid>div:first-child{ background-color:var(--still) }
.page-2 .sb-grid>div:last-child{ background-color:var(--skagerrak) }
.page-full-content .sb-grid>div:last-child{ padding-right:0; }
.sb-grid>div:first-child{ padding:74px 37px 74px 54px; }
.sb-grid>div:last-child{  padding:74px 54px 74px 37px; }
.sb-grid{
	height:fit-content;
}
/* text colors for progress blocks */
.progress-bar-text{ color:#FFF; font-size:32px; font-weight:700; line-height:150%; opacity:0;}
.progress-bar-text-small{ color:#FFF; font-size:22px; font-weight:400; line-height:115%; }
.sb-grid>div:first-child .progress-bar-text,
.sb-grid>div:first-child .progress-bar-text-small{ color:#004f5f; }

.sb-col{ display:flex; flex-direction:column; justify-content:center; height:100%; max-height:900px; }

/* =========================
   Cover
   ========================= */
.cover-page{ background:linear-gradient(135deg,var(--blue) 0%,var(--skagerrak) 100%); color:white; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; }
.cover-page::before{
  content:""; position:absolute; inset:0; opacity:.3;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}
#flipbook h1,#flipbook h2{ margin:0 0 20px; position:relative; z-index:1; font-size:68px; max-width:937px; color:var(--skagerrak); font-weight:700; line-height:normal; }
.cover-page .subtitle{ font-size:1.2rem; opacity:.9; position:relative; z-index:1; }
#flipbook, #flipbook .turn-page{ pointer-events:auto !important; }

/* =========================
   Image blocks
   ========================= */
.half-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: linear-gradient(90deg, rgba(0,171,193,.08), rgba(0,0,0,0));
}

@keyframes showBlurImage {
  from { right: -100% }
  to   { right: 0 }
}

.page-1 .half-portrait::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  right: 0;
  top: 0;
  backdrop-filter: blur(10px);

  /* тільки на початку грає анімація */
  animation: showBlurImage 1s forwards;
  transition: right 0.4s ease, opacity 0.3s ease;
}

.page-1.slide-seen .half-portrait::before {
  /* прибираємо animation, залишаємо тільки transition */
  animation: none;
}

/* Hover працює завжди, з плавним переходом */
.page-1 .half-portrait:hover::before {
  right: -100%;
}

.page-1 .half-portrait:hover .pointer-icon-svg {
  opacity:0;
}




.half-image-svg {
  transition: opacity 0.4s ease;
}
.pointer-icon-svg{
	position:absolute; width:fit-content; height:auto; bottom:20px; z-index:10; animation:pulseIconSvg 3s 1s infinite alternate; ;
    left: 20px;
	transform:scale(0.9);
    width: 50px;
    background: var(--yellow);
    padding: 10px;
    border-radius: 50%;
    height: 50px;
	
}
@keyframes pulseIconSvg{
	from{
		transform:scale(0.9)
	}
	from{
		transform:scale(1.1)
	}
}
.page-1.slide-seen .half-image-svg {
  animation: none;
}

.page-1 .half-portrait:hover .half-image-svg {
  opacity: 0;
}

@keyframes showBlurImageMark{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 50%{opacity:.75;transform:translate(-50%,-50%) scale(1.05)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.half-image-svg{ position:absolute; width:fit-content; height:auto;  left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; animation:showBlurImageMark .6s 1s forwards; animation-fill-mode: forwards;  }
.page-1:not(.slide-seen) .half-image-svg{
	opacity:0
}
.half-portrait .portrait{ object-fit:cover; width:100%; height:100%; filter:saturate(.9); }

.stat-card{ background:var(--lightbg); border-radius:12px; padding:20px 22px; width:100%; max-width:300px; box-shadow:0 6px 20px rgba(0,0,0,.06); margin-top:20px; }
.stat-card .stat{ font-size:2.5rem; font-weight:900; color:var(--skagerrak); }
.stat-card .num{ display:inline-block; min-width:2ch; }

/* =========================
   Table-ish rows → flex (1fr | 1fr)
   ========================= */
.tableish{ background:var(--still); border-radius:12px; overflow:hidden; }
.tableish .row{
  display:flex;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  gap:16px;
}
.tableish .row > *{ flex:1 1 50%; min-width:0; }
.tableish .row:first-child{ background:rgba(255,255,255,.55); font-weight:800; color:var(--skagerrak); }
.tableish .row:last-child{ border-bottom:0; }

/* =========================
   Cards grid → flex-wrap (auto-fit min 200px)
   ========================= */
.cards{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  width:100%;
}
.card{
  background:#E3F4F7; border-radius:12px; padding:20px;
  box-shadow:inset 0 0 0 2px rgba(0,171,193,.2);
  transition:transform .4s, box-shadow .4s;
  flex:1 1 200px; /* min 200px like minmax(200px,1fr) */
  min-width:200px;
}
.card--active{ background:var(--still); box-shadow:0 0 0 3px var(--blue), 0 12px 36px rgba(0,171,193,.25); transform:translateY(-6px); }
.card--bold{ background:#00ABC1; color:white; }
.card h4{ font-size:1.3rem; color:var(--skagerrak); margin:0 0 10px; }
.card--bold h4{ color:white; }

/* --- PAGE 4 text hidden by default; JS fades it in --- */
.page-4 .sb-col:first-child > * {
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}

/* --- Donut on PAGE 4 like slide 2 --- */
.donut { width:260px; height:260px; margin-bottom:22px; }
.donut .track { fill:none; stroke:#E6F4F7; stroke-width:12; }
.donut .value{
  fill:none; stroke:var(--yellow); stroke-linecap:round; stroke-width:12;
  transform:rotate(-90deg); transform-origin:50% 50%;
  stroke-dasharray: 314.159; stroke-dashoffset: 314.159; animation:none;
}
.donut-text{ font-size:32px; fill:var(--skagerrak); font-weight:700; }
.page-4 .donut-text{ font-size:18px; }
.add-space{ height:100%; display:flex; align-items:center; margin:73px 0; }

/* progress-donut (slide 2) */
.progress-donut-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:44px 0; }
.donut-wrap-inner{ padding:57px 100px; }
.progress-donut{ width:250px; height:250px; }
.progress-donut .track{ fill:none; stroke:#E6F4F7; stroke-width:12; }
.progress-donut .value{
  fill:none; stroke:var(--yellow); stroke-linecap:round; stroke-width:12;
  transform:rotate(-90deg); transform-origin:50% 50%;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
}
.progress-donut .progress-text{ font-size:32px; fill:var(--skagerrak); }

/* =========================
   Dots BG (grid → flex, keep 5 columns)
   ========================= */
.dots-bg-left, .dots-bg-right{
  position:absolute; top:74px; left:10px;
  display:flex; flex-wrap:wrap;
  column-gap: var(--dot-gap);
  row-gap: var(--dot-gap);
  width: calc(5 * var(--dot-size) + 4 * var(--dot-gap)); /* 5 columns */
  justify-content:center; align-items:center;
}
.dots-bg-right{ left:auto; right:10px; top:auto; bottom:10px; }
.dots-bg-left .dot, .dots-bg-right .dot{
  width:var(--dot-size); height:var(--dot-size);
  background:#004F5F70; border-radius:0; opacity:0; flex:0 0 var(--dot-size);
}
.dots-bg-right .dot{ background:#CCEEF270; }
.dots-bg .dot.dot-animated{ animation: fadeInDotsBg .6s ease forwards; }
@keyframes fadeInDotsBg{ from{opacity:0; transform:scale(.5)} to{opacity:1; transform:scale(1)} }
.dots-bg[data-animated="true"] .dot{ opacity:1; }

/* =========================
   Nav controls
   ========================= */
.nav-controls{   display:flex; flex-direction:column; align-items:center; gap:15px; z-index:100;  margin-bottom:70px;}
.dots-navigation{
  background:rgba(20,20,25,.95); backdrop-filter:blur(10px);
	flex-wrap:wrap;
	justify-content:center;
  border-radius:50px; padding:15px 25px; display:flex; align-items:center; gap:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1);
}
/* namespaced nav dots */
.dots-navigation .dot{
  width:34px; height:10px; border-radius:100px; background:rgba(255,255,255,.4);
  cursor:pointer; transition:.3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
}
.dots-navigation .dot:hover{ background:rgba(255,255,255,.6); transform:scale(1.05); }
.dots-navigation .dot.active{ background:var(--yellow); width:34px; border-radius:100px; box-shadow:0 0 20px rgba(249,212,82,.4); }
.dots-navigation .dot.active::before{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 2s ease-in-out infinite;
}
@keyframes shimmer{ 0%{left:-100%} 100%{left:100%} }

.page-gap{ padding:40px; }
.turn-page-wrapper{ padding:40px; }
/* .sb-nav-lp,.footer-lp{ display:none !important; } */

/* =========================
   Responsive: stacks columns
   ========================= */
.page-9-text-wrap{
/* 	opacity:1 !important; */
}

/* =========================
   Page 3 floaty squares (unchanged look; flex-safe)
   ========================= */
.page-3 .half-portrait,.page-6 .half-portrait,.page-14 .half-portrait,.page-15 .half-portrait{ position:relative; display:inline-block; overflow:hidden; }
.page-3 .half-portrait img.portrait, .page-6 .half-portrait img.portrait, .page-14 .half-portrait img.portrait, .page-15 .half-portrait img.portrait{ width:100%; display:block; }
.page-3 .half-portrait-elements, .page-6 .half-portrait-elements, .page-14 .half-portrait-elements, .page-15 .half-portrait-elements{ position:absolute; inset:0; pointer-events:none; }
.page-3 .fade-element, .page-6 .fade-element, .page-14 .fade-element, .page-15 .fade-element{
  position:absolute; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); box-shadow:0 4px 20px rgba(0,0,0,.1); border-radius:8px;
  will-change: transform, filter, opacity; backface-visibility:hidden;
  opacity:0; /* JS entrance animates to 1 */
}
.page-3 .el4, .page-6 .el4, .page-14 .el4, .page-15 .el4{ height:209px; right:20%; top:30%; width:279px; }
.page-3 .el2, .page-6 .el2, .page-14 .el2, .page-15 .el2{ bottom:20%; height:49px; right:297px; width:65px; }
.page-3 .el3, .page-6 .el3, .page-14 .el3, .page-15 .el3{
	    height: 49px;
    right: 327px;
    top: 20%;
    width: 65px;
}
.page-3 .el1, .page-6 .el1, .page-14 .el1, .page-15 .el1{ height:229px; right:0%; top:10%; width:306px; }
.page-3 .el5, .page-6 .el5, .page-14 .el5, .page-15 .el5{ bottom:15%; height:179px; right:13px; width:239px; }
.flipbook-container .page-3 h2{
	font-size:43px !important;
}
/* =========================
   Donut styles for slide 2
   ========================= */
.progress-donut .track { fill: none; stroke-width: 12; }
.sb-grid > div:first-child .progress-donut .track { stroke: #fff; }
.sb-grid > div:last-child  .progress-donut .track { stroke: #fff; }
.progress-donut .value{
  fill:none; stroke:var(--yellow); stroke-linecap:round; stroke-width:12;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
}
.progress-donut .progress-text { font-size: 32px; font-weight: 700; fill: var(--skagerrak); }
.sb-grid > div:last-child .progress-donut .progress-text { fill: var(--white); }

/* =========================
   Page 5 blur curtain
   ========================= */
.page-5 .half-portrait{
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,171,193,.08), rgba(0,0,0,0));
}
.page-5 .half-portrait .portrait{ object-fit: cover; width: 100%; height: 100%; }
.page-5 .half-portrait::before{
  content:""; position:absolute; top:0; right:-100%; width:60%; height:100%;
  backdrop-filter: blur(10px); background: rgba(0,171,193,.12); z-index:1; opacity:1;
}
.reduced-image{ display:flex !important; align-items:center; justify-content:center; background:unset !important;
/* 	height:80% !important;  */
}
.page-5 .half-portrait.reduced-image::before{ height:100%; top:0%; transition:all 0.3s; }
/* .reduced-image img{ height:80% !important; } */

.page-5:not(.slide-seen) .half-portrait.play:before{ animation: showBlurImage 0.6s forwards; 

}
.page-5 .half-portrait.play:before{ right:0;

}

.page-5 .half-portrait.play:hover:before{  right:-100%; }


/* =========================
   Page 6 blur pixels
   ========================= */
.page-6 .half-portrait{ position: relative; width: 100%; height: 100%; overflow: hidden; background:linear-gradient(90deg, rgba(0,171,193,.08), rgba(0,0,0,0)); }
.page-6 .half-portrait .portrait{ object-fit: cover; width: 100%; height: 100%; }
.page-6 .blur-particles{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.page-6 .blur-pixel{
  position:absolute; background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,0.25); border-radius:10px;
  opacity:1; will-change: transform, opacity; backface-visibility:hidden;
}

/* =========================
   Page 7 hero
   ========================= */
.page-7 .half-portrait{
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,171,193,.08), rgba(0,0,0,0));
}
.page-7.page-full-content .sb-grid>div:last-child{
	padding-right:54px;
}
.page-7 .half-portrait .portrait{
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.9);
  display:block; position:relative; z-index: 1;
}
.page-7 .half-portrait::after{
  content:""; position:absolute; top:0; right:0%;
  transform: translateX(-50%) scaleX(0); transform-origin: center center;
  width: 50%; height: 100%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(0,171,193,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  z-index: 2; opacity: 1;
}

.page-7:not(.slide-seen) .half-portrait.play::after{ animation: pillarReveal .8s ease forwards; }
.page-7.slide-seen .half-portrait.play::after{
	transform: translateX(-0%) scaleX(1);
	transition:all 0.3s;
	
}
.page-7.slide-seen .half-portrait.play:hover:after{
	transform: translateX(-50%) scaleX(0);
}

.page-7.slide-seen .half-portrait:hover .overlay-title{
	opacity:0;
}

@keyframes pillarReveal{ from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-0%) scaleX(1); } }

.page-7 .overlay-title{
	background: rgba(0, 79, 95, 0.50);
  position:absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  z-index: 3; pointer-events:none;
	transition:all 0.3s;
}
#flipbook .page-7 .mega-in-image{
  color:#F9D452; font-size:68px; font-style:normal; font-weight:700; line-height:normal; letter-spacing:-1.76px;
  opacity:0; transform: translateY(12px);
}

/* CTA pill */
.cta-pill{
  display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:14px 20px;
  border-radius:10px; color:#fff; background: linear-gradient(90deg, var(--blue), var(--skagerrak));
  text-decoration:none; font-weight:700; box-shadow: 0 8px 24px rgba(0,171,193,.25);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; width: fit-content;
}
.cta-pill:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,171,193,.28); }
.cta-ico-plus{ display:inline-block; font-weight:100; line-height:1; font-size:25px; width:22px; height:25px; border-radius:50%; text-align:center; }
.cta-arrow{ margin-left:2px; }







/* CTA pill */
.cta-pill{
  border-radius: 10px;
    overflow: hidden;
    padding: 1rem 4.5rem 1rem 2rem;
    position: relative;
    text-wrap: nowrap;
    transition: all .3s;
    z-index: 1;
	background: linear-gradient(90deg, #009bb9, #004f5f 47%);
    color: #fff;
}

.cta-pill:before {
    background: linear-gradient(90deg, #004f5f, #009bb9 47%);
    background-color: #004f5f;
    border-radius: .625rem;
    content: "";
    height: 100%;
    position: absolute;
    right: -100%;
    top: 0;
    transition: all .2s;
    width: 100%;
    z-index: -1;
}
.cta-pill:after {
    content: url(https://www.stibosystems.com/hubfs/Website%20redesign%202024/Home-hero/arrow-right-bold.svg);
    height: 1.8rem;
    overflow: hidden;
    position: absolute;
    right: 1.5rem;
    scale: .9;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
	filter:brightness(10);
}

.cta-pill:hover {
    color: #fff;
    outline: unset;
}

.cta-pill:hover:before {
    right: 0;
}



.cta-pill:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,171,193,.28); }
.cta-ico-plus{ display:inline-block; font-weight:100; line-height:1; font-size:25px; width:22px; height:25px; border-radius:50%; text-align:center; }
.cta-arrow{ margin-left:2px; display:none}

/* =========================
   Page 8 - Introduction with floating blocks
   ========================= */
.page-8 .half-portrait{ position:relative; width:100%; height:100%; overflow:visible; background:linear-gradient(90deg, rgba(0,171,193,.08), rgba(0,0,0,0)); }
.page-8 .half-portrait .portrait{ object-fit:cover; width:100%; height:100%; filter:saturate(.9); }
.floating-blocks-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.floating-block{
  position:absolute; background:rgba(0,171,193,.15); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); border-radius:12px; opacity:0;
}
.floating-block.fb1{ width:180px; height:180px; top:15%; right:20%; }
.floating-block.fb2{ width:140px; height:140px; bottom:25%; right:10%; }
.floating-block.fb3{ width:100px; height:200px; top:35%; right:35%; }
.page-8 img{
	opacity:0;
}
/* =========================
   Page 9 - Stats and table
   ========================= */
.page-9 .sb-col{
	overflow:hidden;
}
.page-9 .stat-highlight{
  background:var(--lightbg); border-radius:16px; padding:32px; margin:54px 0 0;
  box-shadow: 0 0 30px 0 rgba(55, 70, 79, 0.20); max-width:400px;
}

.stat-number{ font-size:72px; font-weight:900; color:var(--skagerrak); line-height:1; margin-bottom:16px; }
.stat-description{ font-size:18px; color:var(--dark); line-height:1.4; margin:0; }
.cost-table-wrapper{
	height:100%;
	filter: drop-shadow(-20px 0 20.3px rgba(0, 0, 0, 0.10));
  background:var(--lightbg); padding:54px;
  box-shadow:0 12px 32px rgba(0,79,95,.1);  display:flex; flex-direction:column; justify-content:center;
	width:100%;
	min-width:600px;
}
.table-title{ color: #00ABC1;
margin-bottom:43px;
	text-align:center;
	padding-right:20px;
	opacity:0;
/* H2 - Large */
font-family: "Noto Sans";
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 117%; /* 56.16px */ }
.cost-table{ width:100%; border-collapse:collapse; max-width:700px; margin:0 auto; }
.cost-table th{ text-wrap:nowrap; padding:16px 16px 32px 16px; text-align:left; font-weight:700; color:var(--skagerrak); font-size:32px; height:82px }
.cost-table td{ padding:16px; border-bottom:1px solid rgba(0,79,95,.08); font-size:22px; color:#000; height:82px }
.cost-table tbody tr{ transition:background .2s ease; opacity:0;}
.cost-table tbody tr:hover{ background:rgba(0,171,193,.04); }
.cost-table tbody tr:last-child td{ border-bottom:none; }

.cost-table tbody tr:nth-child(odd){
	background-color:var(--still)
}

.col{
	flex: 1 1 50%;
}
.page-11.overflowed .section-inner{
	overflow:hidden;
}

.page-11.overflowed .two-col{
	overflow-y:scroll;
	height:100%;
	align-items:start;
}

.page-9.overflowed .cost-table-wrapper{
	box-shadow:unset !important;
	position:relative;
	height:100% !important;
	
	
}
.overflowed	.cost-table-wrapper{
		box-shadow:unset;
		filter:unset;
	}
	.page-9.overflowed .visual{
	filter:drop-shadow(-20px 0 20.3px rgba(0,0,0,.1));
}
.overflowed .sb-grid{
	padding:74px 0;
}
.overflowed .sb-col{
	padding-top:0 !important;
	padding-bottom:0 !important
}
.page-9.overflowed .cost-table-wrapper{
	min-width:800px;
}
.page-9.overflowed .table-title{
	text-align:left;
}

.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::before{
	content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:20px;
	left:0;
	opacity:0;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 1s forwards;
	
}
.page-9.overflowed.slide-seen .cost-table-wrapper::before{
	content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:20px;
	left:54px;
	opacity:1;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 1s forwards;
	animation:unset;
	
}
.page-9.overflowed.slide-seen .cost-table-wrapper::after{
	content:"Scroll to explore";
	position:absolute;
	bottom:21px;
	left:95px;
	opacity:1;
	width:fit-content;
	height:fit-content;
	color:#37464F;
	font-size:14px;
	animation:showScrollText 0.3s 1s forwards;
	animation:unset;
	
}

.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::after{
	content:"Scroll to explore";
	position:absolute;
	bottom:21px;
	left:0;
	opacity:0;
	width:fit-content;
	height:fit-content;
	color:#37464F;
	font-size:14px;
	animation:showScrollText 0.3s 1s forwards;
	
}

.page-10.overflowed:not(.slide-seen) .legacy-grid::before,.page-13.overflowed:not(.slide-seen) .legacy-grid::before{
	content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:-2px;
	left:0;
	opacity:0;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 0.3s forwards;
}
.page-10.overflowed.slide-seen .legacy-grid::before,.page-13.overflowed.slide-seen .legacy-grid::before{
		content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:-2px;
	left:54px;
	opacity:1;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 0.3s forwards;
	animation:unset;
	
}
.page-10.overflowed:not(.slide-seen) .legacy-grid::after,.page-13.overflowed:not(.slide-seen)  .legacy-grid::after{
	content:"Scroll to explore";
	position:absolute;
	bottom:0px;
	left:0;
	opacity:0;
	width:fit-content;
	height:fit-content;
	color:#37464F;
	font-size:14px;
	animation:showScrollText 0.3s 1s forwards;
}

.page-10.overflowed.slide-seen .legacy-grid::after,.page-13.overflowed.slide-seen  .legacy-grid::after{
	content:"Scroll to explore";
	position:absolute;
	bottom:0px;
	left:95px;
	width:fit-content;
	height:fit-content;
	color:#37464F;
	font-size:14px;
	animation:showScrollText 0.3s 0.5s forwards;
	opacity:1;
	animation:unset;
	
}
.page--section .section-inner{
	padding:34px;
}
.overflowed.page--section .section-inner{
	padding:74px 37px 150px 54px;
}
@keyframes showScrollText{
	from{
		opacity:0;
		left:0;
	}
	to{
		opacity:1;
		left:95px;
	}
}
@keyframes showScrollTextArrow{
	from{
		opacity:0;
		left:0;
	}
	to{
		opacity:1;
		left:54px;
	}
}
/* =========================
   Page 10 - Legacy cards
   ========================= */


.legacy-grid{
  width:100%; height:fit-content; padding:54px; box-sizing:border-box;
/*   display:grid; */
	grid-template-columns:1fr 1fr 1fr; gap:0;
  grid-template-rows:auto 1fr; position:relative;
	z-index:1;
}
.legacy-grid-wrap{
	display:flex;
}
.legacy-grid .section-header{
  grid-column:1/-1; margin-bottom:32px; text-align:left;
}
.section-header{
	opacity:0;
}
.legacy-card{
	opacity:0;
  padding:40px 32px; display:flex; flex-direction:column; justify-content:flex-start;
  min-height:300px; position:relative; overflow:hidden;
	height:auto;
	padding-bottom:104px;
	width:100%;
}
.legacy-card.card-1{ background:#F7FCFD }
.legacy-card.card-2{ background:var(--still); }
.legacy-card.card-3{ background:var(--skagerrak); }

.legacy-title{
 margin:0 0 40px;
  color:var(--skagerrak);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 48px */
}
.legacy-card.card-3 .legacy-title{ color:var(--white); }

.legacy-body{
color: var(--dark);

/* Large Paragraph - Large */
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 33px */
}
.legacy-card.card-3 .legacy-body{ color:var(--white); opacity:.9; }

/* Wave animation for legacy cards */
.legacy-card::before{
  content:""; position:absolute; bottom:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(0,171,193,.08) 0%, transparent 70%);
  transform:scale(0); opacity:0; border-radius:50%; pointer-events:none;
}
.legacy-card.animated::before{ animation:waveExpand 1.2s ease-out forwards; }
@keyframes waveExpand{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(2); opacity:0; }
}

.page-10 { position: relative; }
.page-10 .dots-p10{
  position: absolute;
  right:200px;
  bottom: 50px;
  pointer-events: none;
  z-index: 0;   
	  width: calc(7 * var(--dot-size) + 6 * var(--dot-gap)); 
}
.page-10 .dots-bg-right.dots-p10 .dot {
	background-color:#CCEEF2;
}
/* Якщо є загальний стиль .dots-bg .dot — лишаємо. Нічого не ламаємо. */




/* Базовий фон як на скрінах */
.page--aqua { background:#CCEEF2; }

/* Внутрішній контейнер */
.page--section .section-inner{
  margin: 0 auto;
  padding: 72px 87px;
  color:#003E47; /* темний бірюзовий */
}

/* Eyebrow "SECTION X" */
.section-eyebrow{
  color:#00A5B7;           /* акцент */
  font-weight: 800;
  letter-spacing:.04em;
  text-transform: uppercase;
  margin: 0 0 24px 0;
	opacity:0;
	font-size:20px;
}
.overflowed .bullet-list{
	padding-right:20px;
}
.slide-seen .section-eyebrow,.slide-seen  .section-title,.slide-seen   .bullet-list li{
	opacity:1;
}


/* Заголовок для секції 5 */
.section-title{
  margin: 0 0 16px 0;
	opacity:0;
	color: var(--Midnight---37464F, #37464F);
font-family: "Noto Sans";
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 33px */
}
.pageCount{
	display:none
}
/* Дві колонки */
.two-col{
  display:flex;
/*   grid-template-columns: 1fr 1fr; */
}
.page-3.overflowed .text, .page:not(.page-9).overflowed .text{
	    justify-content: start;
    overflow-y: auto;
	position:relative
}
.page-3.overflowed .sb-grid{
	display:flex !important;
}
.overflowed .text{
	padding-bottom:60px !important;
}
.overflowed:not(.page-9):not(.page-2):not(.page-11):not(.page-1) .two-col::before, .overflowed:not(.page-9):not(.page-1):not(.page-11):not(.page-2) .sb-grid::before{
  content: "";
	z-index:1;
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 50%;
  height: 100px; /* висота fade */
  background: linear-gradient(to top, #fff 0%, transparent 100%);
}
.overflowed.page-11 .two-col .col:last-child{
	padding-bottom:40px;
}
.overflowed.page-11:not(.page-9):not(.page-2) .section-inner::before{
	  content: "";
	z-index:1;
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 90%;
  height: 100px; /* висота fade */
  background: linear-gradient(to top, #CCEEF2 0%, transparent 100%);
	z-index:4;
	
}
.bg-dots{
	display:none;

}
.page-11 .two-col, .page-12 .two-col,.page-16 .two-col{
	gap:40px;
}
/* Буліти як на макеті: жирний термін + опис */
.bullet-list{
  list-style:none;
  padding:0;
  margin:0;
}
.bullet-list li{
  position:relative;
  padding-left: 22px;
  margin: 0 0 18px 0;
  line-height: 1.55;
	opacity:0;
	font-size:22px;
}
.bullet-list li::before{
  content:"";
  position:absolute;
  left:0; top:.65em;
  width:6px; height:6px; border-radius:50%;
  background:#004F5F; /* колір буліту */
}
.bullet-list li strong{
  font-weight:800;
  color:#003E47;
  margin-right:.35em;
}



@media(max-width:2000px){
  .flipbook-container h1,.flipbook-container h2:not(.mega-in-image){ font-size:3rem !important }
}
@media(max-width:112.5rem){
	.flipbook-container{
		margin:50px 20px 70px
	}
}
@media(max-width:1450px){
/* 	.flipbook-container h1, .flipbook-container h2{
		font-size:62px !important;
	}
	.flipbook-container .page-3 h2{
		font-size:36px !important;
	} */
}
@media (max-width: 1280px){
	.page-15 .sb-grid>.sb-col:first-child{
		flex:1.2 1 0 !important
	}
	.page--section .section-inner{
		padding:74px 37px 74px 54px
	}

	 .pageCount{
		 text-wrap:nowrap;
		padding: 10px 20px;
    top: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    border-radius: 10px;
	}
	.pageCount{
		display:block;
		position:absolute;
		top:25px;
		left:50%;
		transform:translateX(-50%);
		color:#37464F;
		font-size:16px;
		z-index:0;
	}
	.pageCount p{
		opacity:0;
	}
	.slide-seen .pageCount p{
		opacity:1;
	}
	.overflowed .sb-grid{
		padding:100px 0 74px;
	}
	.overflowed.page--section .section-inner{
		padding:100px 37px 74px 54px;
	}
	.flipbook-container h1, .flipbook-container h2, {
		font-size:3rem !important;
	}
	.flipbook-container .page-3 h2{
		font-size:2.3rem !important
	}
	.overlay-title h2{
		font-size:64px !important
	}
	.legacy-grid{
		grid-template-columns:unset;
	}
	.legacy-grid-wrap{
		overflow:hidden;		
	}
	.legacy-card{
		min-width:600px;
	}
	.donut-wrap-inner.add-space{
		margin:0;
	}
	.two-col{
		align-items:center;
	}
	.sb-grid>.sb-col:first-child{
		flex:1 1 0;
	}
	.sb-grid>.sb-col:last-child{
		flex:1 1 0
	}
	.cost-table-wrapper{
		height:100%;
	}
/* 	.page-full-content .sb-grid>div:last-child{
		padding-right:74px !important
	} */
		.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::before{
		bottom:20px
	}
	.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::after{
		bottom:21px;
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::before{
		bottom:20px
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::before, .page-9.overflowed .cost-table-wrapper::before {
		bottom:20px;
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::after,.page-9.overflowed .cost-table-wrapper::after{
		bottom:21px !important;
	}

	.page-10.overflowed.slide-seen .legacy-grid::before,.page-10.overflowed .legacy-grid::before{
		bottom:-2px !important;
	}
	
	.page-10.overflowed:not(.slide-seen) .legacy-grid::before,.page-13.overflowed:not(.slide-seen) .legacy-grid::before{
	content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:2px;
	left:0;
	opacity:0;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 0.3s forwards;
}
.page-10.overflowed.slide-seen .legacy-grid::before,.page-13.overflowed.slide-seen .legacy-grid::before{
		content:url("https://www.stibosystems.com/hubfs/website-redesign/arrow-back.svg");
	position:absolute;
	bottom:2px;
	left:54px;
	opacity:1;
	width:fit-content;
	height:fit-conten;
	transform:rotate(180deg);
	animation:showScrollTextArrow 0.3s 0.3s forwards;
	animation:unset;
	
}

	.donut-wrap-inner{
		padding:57px;
	}
	.donut-wrap-inner figcaption{
		font-size:24px
	}
	.donut-wrap-inner figcaption span{
		display:block;
		 margin-top:24px;
	}
}
@media (max-width: 1024px){
/* 	.overflowed:not() .sb-grid{
		padding:54px 0 54px;
	} */
	.half-portrait img{
		max-height:700px;
	}
	.page .half-portrait{
		max-height:700px;
	}
	.sb-col.visual{
		overflow:hidden;
	}
	.legacy-grid-wrap{
		display:flex;
		flex-direction:column;
	}
	.overflowed:not(.page-9):not(.page-2):not(.page-11):not(.page-1) .two-col::before, .overflowed:not(.page-9):not(.page-1):not(.page-11):not(.page-2) .sb-grid::before{
		display:none;
	}
	.legacy-grid::after, .legacy-grid::before { 
		display:none !important;
	}
	.progress-bar-text{
		font-size:28px;
	}
	.page-2 .sb-col{
		justify-content:start;
	}
	.progress-donut{
		width:230px;
		height:230px;
	}
	.progress-donut .progress-text{
		font-size:26px;
	}
	.dots-bg-right{
		display:none;
	}
	.overflowed.page--section .section-inner{
		padding:54px 37px 74px 54px;
	}
	.legacy-grid{
		padding:54px !important;
	}
	.overflowed:not(.page-9) .sb-grid{
		padding:0;
	}
	.overflowed.page-9 .sb-grid{
		padding:54px 0;
	}
	.pageCount{
		position:relative;
		left:unset;
		width:fit-content;
		padding:0;
		border-radius:0;
		padding-top:54px;
		top:unset;
		width:100%;
		transform:unset;
		background:transparent;
		text-align:center;
	}
	.page-2 .pageCount{
		background-color:#CCEEF2;
	}
	.page-11 .pageCount{
		
	}
	.pageCount p{
		position:relative;
		z-index:10
	}
		.pageCount::before{
        content: "";
        text-wrap: nowrap;
        padding: 10px 20px;
        top: 10px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(2px);
        border-radius: 10px;
        height: 30px;
        width: 200px;
        position: absolute;
        z-index: 0;
        top: 40px;
        transform: translateX(-50%);
        left: 50%;
        z-index: 1;
	}
	.page{
		justify-content:start;
	}
	.page-15.page .sb-grid>.sb-col:first-child{
		flex: auto !important
	}
/* 	.overflowed.page-11 .two-col .col{
		padding:0;
	} */
	.sb-col.text{
		overflow:clip
	}

	.page-9.overflowed .cost-table-wrapper::before,.page-9.overflowed .cost-table-wrapper::after{
		display:none;
	}
	.page-9.overflowed .cost-table-wrapper{
		min-width:unset;
	}

	.page .cost-table-wrapper{
		padding:54px;
	}
	.sb-col.visual{
		width:100%;
		
	}
	.page-3 .visual{
		height:50% !important
	}
	.flipbook-container{
		max-height:1300px;
	}
	.sb-grid {
		justify-content:center;
		display:flex !important;
	}

	.sb-grid .sb-col{
		flex:unset !important;
		height:fit-content;
		padding:0 !important;
	}
		.page-2 .sb-grid .sb-col{
		width:100%;
			height:100%;
	}
	.half-portrait{
		width:90%;
		margin:0 auto;
		overflow:hidden;
	}
	
	
	
	.half-portrait.reduced-image{
		width:100%;
		height:100% !important;
		margin-right:auto;
		margin-left:unset;
	}
	.page-3 .sb-grid.two-col,.page-6 .sb-grid.two-col,.page-15 .sb-grid.two-col{
		align-items:start;
		justify-content:start;
	}
	.sb-grid{
		flex-direction:column;
	}
	.page-full-content .sb-grid>div:last-child{
		padding-right:0;
	}
	.sb-grid>div:first-child{
		padding: 54px 54px 27px 54px !important
	}
		.sb-grid>div:last-child{
		padding: 27px 54px 54px 54px !important
	}
	
	.cost-table-wrapper{
		height:100%;
	}
	.page-9 .stat-highlight{
		margin:34px 0;
	}
	.page-9 h2 br{
		display:none;
	}
	.sb-col.donut-wrap{
		    height: 100%;
    width: 80%;
    margin-right: auto;
	}
	#flipbook{
		transform:unset !important
	}

		.cost-table-wrapper, .legacy-grid{
		min-width:unset;
		padding:34px;
	}

	.half-portrait{
		width:100%;
		min-height:490px;
	}
	.sb-grid.two-col > .sb-col{
		width:100%;
	}
	  .two-col{ 
			grid-template-columns: 1fr;gap:0 !important;
			flex-direction:column;
	}
	.two-col>.col{ 
		width:100%;
		flex:unset;
	}
	.page-9 .sb-grid .sb-col{
		padding:0 54px !important;
	}

	
}
/* Трохи підправити на вузьких ширинах */

@media (max-width: 800px){
/* 	.page-3 .visual{
		height:40% !important
	} */
	.half-portrait.reduced-image{
		max-height:400px;
		min-height:100% !important; 
	}
}

@media (max-width: 768px){
	.flipbook-module-title{
		font-size:2.4rem;
	}
	.pageCount{
		padding-top:34px;
  z-index:10
	}
	.pageCount::before{
				top:21px;

	}
	.overflowed.page-11:not(.page-9):not(.page-2) .section-inner::before{
		bottom:20px;
	}
	.overflowed.page-9 .sb-grid{
		padding:0;
	}
	.legacy-card{
		padding-bottom:40px;
		min-height:240px;
		justify-content:center;
	}
	.legacy-title{
		font-size:28px;
		margin-bottom:20px;
	}
	.legacy-body{
		font-size:18px;
	}
	.overflowed.page-11 .two-col .col:last-child{
		padding-bottom:0;
	}
	.page-16{
		justify-content:start;
	}
	.page-7.page-full-content .sb-grid>div:last-child{
		padding-top:27px !important;
	}
	/* 	.half-portrait img{
		max-height:400px;
	} */
	/* 	.page .half-portrait{
		min-height:unset;
		max-height:400px;
		
	} */
	.page-14 .el1, .page-15 .el1, .page-3 .el1, .page-6 .el1{
		height: 130px;
    right: 10%;
		top:5%
    width: 206px;
	}
	.page-14 .el4, .page-15 .el4, .page-3 .el4, .page-6 .el4{
		top:45%;
	}
	.page-14 .el2, .page-15 .el2, .page-3 .el2, .page-6 .el2, .page-14 .el4, .page-15 .el4, .page-3 .el4, .page-6 .el4{
		display:none;
	}
		.page-3 .el3, .page-6 .el3, .page-14 .el3, .page-15 .el3{
		top:unset;
		bottom:20%;
	}
	.bg-dots{
		display:block;
	}
.bg-dots{
		position:absolute;
	width:232px;
	height:189px;
	z-index:5;
	}
	.sb-col{
		position:relative;
		z-index:6;
	}
	
	.page .bg-dots:not(:last-child){
		left:0;
		bottom:0;
	}
	.page .bg-dots:last-child{
		right:0;
		bottom:260px;
	}
	
	
	.half-portrait{
		position:relative;
		z-index:1;
	}
	
	


	
			.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::before{
		bottom:20px
	}
	.page-9.overflowed:not(.slide-seen) .cost-table-wrapper::after{
		bottom:21px;
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::before{
		bottom:20px
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::before, .page-9.overflowed .cost-table-wrapper::before {
		bottom:20px;
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::after,.page-9.overflowed .cost-table-wrapper::after{
		bottom:18px !important;
	}

	.page-10.overflowed.slide-seen .legacy-grid::before,.page-10.overflowed .legacy-grid::before{
		bottom:2px !important;
	}
	.sb-col.donut-wrap{
		
	}
	.page-9.overflowed .cost-table-wrapper{
	min-width:800px;
} 
		.page-9.overflowed .cost-table-wrapper::before,.page-9.overflowed .cost-table-wrapper::after{
		display:block;
	}
	.sb-grid>div:last-child{
		padding:34px !important; 
	}
	.nav-controls{
		margin:0 20px 60px;
	}
	.legacy-card{
		min-width:90%;
	}
	.progress-bar-wrapper{
		position:relative;
	}
	.sb-col.donut-wrap{
		width:100%;
	}
	.donut-wrap-inner{
		padding:34px;
	}
	.page--section .section-inner{
		padding:34px;
	}
	.page-11 .two-col, .page-12 .two-col, .page-16 .two-col{
		gap:0;
	}
	.sb-grid>div:first-child{
		padding:34px 34px 27px 34px !important;
	}
	
	.page-16{
		justify-content:start;
	}
	.dots-navigation{
		display:none;
	}
	.progress-donut .progress-text,.progress-bar-text
	{
		font-size:24px;
	}
	.progress-donut{
		width:200px;
		height:200px;
	}
	.flipbook-container{
		max-height:1200px;
	}
	.table-title{
		font-size:3rem;
	}
	.stat-number{
		font-size:3.5rem;
	}
	.page-9 .sb-grid .sb-col{
		padding:34px !important;
	}
	.page-9 .stat-highlight{
		margin:25px 0 0;
		padding:20px 34px;
	}
	
}


@media(max-width:650px){
	.bullet-list{
		padding-bottom:20px;
	}
	.overflowed.page-11:not(.page-9):not(.page-2) .section-inner::before{
		bottom:0 !important;
	}
	.sb-grid>div:last-child{
		padding:34px 20px !important
	}	
		

	.flipbook-container .page-3 h2, .flipbook-container h1, .flipbook-container h2{
		font-size:32px !important;
	}
	#flipbook .page-7 .mega-in-image{
		font-size:46px !important
	}
	.lead,.body,.eyebrow{
		font-size:18px;
	}
		.sb-grid>div:first-child, .overflowed.page--section .section-inner,.page--section .section-inner,.legacy-grid{
		padding:34px 20px !important;
	}
	.table-title{
		font-size:2.5rem;
		margin-bottom:20px;
	}
	.cost-table th{
		font-size:2rem;
		padding:20px 0;
	}
	.cost-table td{
		font-size:20px;
		height:65px;
	}
/* 	.legacy-card{
		min-width:535px;
	} */
	.overflowed.page-11:not(.page-9):not(.page-2) .section-inner::before{
		bottom:0;
	}
	
}

@media (max-width: 560px){
	.bullet-list li{
		font-size:18px;
	}
	.legacy-card{
		padding:20px;
	}
	.legacy-title{
		line-height:normal;
		font-size:24px;
	}
/* 		.page-6 .bg-dots:not(:last-child){
		width:200px;
		height:200px;
	}
	.page-1 .bg-dots:not(:last-child){
		width:250px;
		height:250px;
	} */
	.page-9 .sb-grid .sb-col{
		padding:20px !important
	}
	.page-7 .body{
		font-size:18px !important;
	}
/* 	.cost-table-wrapper{
		padding:54px 0px !important;
	} */

/* 	.overflowed.page--section .section-inner, .page--section .section-inner{
		padding:100px 20px !important; 
	} */
	.overflowed.page-11:not(.page-9):not(.page-2) .section-inner::before{
		bottom:40px;
	}
		.donut-wrap-inner.add-space{
		padding:34px 20px;
	}
	.donut-wrap-inner .donut{
		    width: 220px;
    height: 220px;
    display: block;
    margin: 0 auto 22px;
	}
		.cost-table-wrapper{
		min-width:600px;
			padding:34px 34px 84px
	}
	.sb-col.visual{
		overflow:hidden;
		width:100%;
	}
	.page-9.overflowed .cost-table-wrapper:after{
		bottom:28px;
	}
	.page-9.overflowed .cost-table-wrapper:before{
		bottom:30px;
	}
	.sb-grid>div:first-child{
		padding-bottom:10px !important;
	}
	.sb-grid>div:last-child{
		padding-top:20px !important;
	}
		.page-14 .el1, .page-15 .el1, .page-3 .el1, .page-6 .el1{
		height:150px;
		width:200px;
	}
	.page-14 .el4, .page-15 .el4, .page-3 .el4, .page-6 .el4{
		height:130px;
		width:180px;
		top:35%;
	}
	.page-14 .el3, .page-15 .el3, .page-3 .el3, .page-6 .el3{
		right:180px;
		
	}

	.page-14 .el5, .page-15 .el5, .page-3 .el5, .page-6 .el5{
		height:100px;
		width:200px;
	}		


	.half-image-svg{
		transform:translate(-50%,-50%) scale(0.8)
	}
}

@media (max-width: 475px){
	.page .cost-table-wrapper{
		padding:54px 20px;
	}
	.page-9.overflowed.slide-seen .cost-table-wrapper::after, .page-9.overflowed .cost-table-wrapper::after{
		bottom:21px;
	}
	.flipbook-container h1, .flipbook-container h2:not(.mega-in-image){
		font-size:2.4rem !important
	}
	.flipbook-container .page-3 h2{
		font-size:24px !important;
	}
	.page-3 .eyebrow{
		font-size:16px;
	}
	.half-portrait{
    min-height: 290px;
	}
	.page-3 .visual{
		height:30% !important; 
	}
	.half-portrait.reduced-image{
		max-height:400px;
	}
	.donut-wrap-inner figcaption{
		font-size:18px;
	}
	.donut-wrap-inner .donut{
		width:180px;
		height:180px;
	}
	

}

@media(max-width:390px){
	.flipbook-container h1, .flipbook-container h2:not(.mega-in-image){
		font-size:2rem !important;
	}
	.flipbook-container .page-3 h2{
		font-size:24px !important;
	}
}