@import "fonts.css";

:root {
	--teal-primary: #012B31;
	--teal-dark: #001D21;
	--teal-light: #003941;
	--teal-color: #00869A;
	--green-primary: #CDEED3;
	--purple-primary: #BCBCFF;
	--purple-light: #D3D0FF;
	--peach-primary: #FEDFC0;
	--biege-primary: #E9E3D5;
	--light-gray: #F9F9F7;
  --red-primary: #EA9593;
}
html {
  width: 100%;
	height: 100%;
}
body {
  font-family: "NeueHaasGroteskDisp Pro";
  font-feature-settings: "ss02";
  font-weight: 300;
	padding: 0;
	margin: 0;
	height: 100%;
	color: var(--teal-dark);
  overflow-x: hidden !important;
}
body.no-scroll { position: fixed; width: 100%; overflow: hidden;}
h1,h2,h3,h4,h5,h6 { padding: 0; margin: 0; font-family: "PP Radio Grotesk"; font-weight: 300;}
ul { list-style: none; padding: 0; margin: 0;}
p { padding: 0; margin: 0; letter-spacing: 0.04em; line-height: 1.3; font-feature-settings: "ss02";}
a { text-decoration: none;}
a:hover, a:focus { text-decoration: none; outline: none;}
.btn.focus, .btn:focus { box-shadow: none;}
a img { border: none;}
p a { color: #2daee4; text-decoration: underline;}
p a:hover { color: #1a8ebf; text-decoration: underline;}
strong { font-weight: bold;}
.align-right { text-align: right;}
button:focus { outline: none;}
::-webkit-input-placeholder { opacity: 1;}
::-moz-placeholder { opacity: 1;}
:-ms-input-placeholder { opacity: 1;}
:-moz-placeholder { opacity: 1;}
.hide { display: none;}
* { transition: background-color 0.1s, color 0.1s;}
button { cursor: pointer; border: 0;}
.form-select:focus { border: none; outline: none; box-shadow: none;}
.hide { display: none !important;}
section { padding: 100px 0;}
.img-fluid { max-width: 100%; height: auto;}
.bg-white { background: #fff !important;}

.btn { text-decoration: none;display: inline-block; background: #ccc; padding: 7px 20px; border-radius: 5px; font-size: 14px; font-weight: 400; color: #000; letter-spacing: 0.04em; line-height: 1.3;}
.btn i { font-size: 14px; margin: 0 3px;}
.btn:active, .btn.active { background-color: unset; color: unset; border-color: unset;}
.btn-purple { background: var(--purple-light); color: #000;}
.btn-purple:hover { background: var(--purple-light); color: #000; box-shadow: 0 0 5px 3px #D3D0FF78;}
.btn-purple:active { background: var(--purple-light) !important; color: #000 !important; box-shadow: none; outline: none; border: none;}
.btn-purple:disabled { background: #A8A8D1;}

.btn-teal { background: var(--teal-light); color: var(--light-gray);}
.btn-teal:hover { background: var(--teal-light); color: var(--light-gray); box-shadow: 0 0 5px 3px #25899760;}
.btn-teal:active { background: var(--teal-primary) !important; color: var(--light-gray) !important; box-shadow: none; outline: none; border: none;}
.btn-teal:disabled { background: #1F4D54;}

.btn-white { background: var(--light-gray); color: #000;}
.btn-white:hover { background: var(--purple-light); color: #000; box-shadow: 0 0 5px 3px #D3D0FF78;}
.btn-white:active { background: var(--purple-light) !important; color: #000 !important; box-shadow: none; outline: none; border: none;}
.btn-white:disabled { background: #A8A8D1;}

.btn-purple-outline { background: transparent; color: var(--purple-primary); border: 1px solid var(--purple-primary);}
.btn-purple-outline:hover { background: var(--purple-primary); color: #000; box-shadow: 0 0 5px 3px #D3D0FF78;}
.btn-purple-outline:active { background: var(--purple-primary) !important; color: #000 !important; box-shadow: none; outline: none; border: 1px solid var(--purple-light);}
.btn-purple-outline:disabled { border-color: #A8A8D1; color: #A8A8D1;}

.btn-teal-outline { background: transparent; color: var(--teal-light); border: 1px solid var(--teal-light);}
.btn-teal-outline:hover { background: var(--teal-light); color: var(--light-gray); box-shadow: 0 0 5px 3px #25899760;}
.btn-teal-outline:active { background: var(--teal-primary) !important; color: var(--light-gray) !important; box-shadow: none; outline: none; border: 1px solid var(--teal-primary);}
.btn-teal-outline:disabled { border-color: #1F4D54; color: #1F4D54;}

.btn-white-outline { background: transparent; color: var(--light-gray); border: 1px solid var(--light-gray);}
.btn-white-outline:hover { background:  var(--purple-light); color: var(--teal-dark); box-shadow: 0 0 5px 3px #D3D0FF78;}
.btn-white-outline:active { background: var(--purple-light) !important; color: var(--teal-dark) !important; box-shadow: none; outline: none; border: 1px solid var(--purple-light);}
.btn-white-outline:disabled { border-color: #A8A8D1; color: #A8A8D1;}


.form-block { margin: 0 0 50px 0;}
.form-control { font-size: 17px; padding: 5px 10px;}
.form-control:focus { box-shadow: none;}

.error-msg { display: block; background: #ffe2e2; padding: 10px 15px; border: 1px solid #ff0000; border-radius: 5px; font-size: 17px; font-weight: 700; color: #ff0000; margin: 10px 0;}
.success-msg { display: block; background: #d9ffe5; padding: 10px 15px; border: 1px solid #20b94f; border-radius: 5px; font-size: 17px; font-weight: 700; color: #20b94f; margin: 10px 0;}
.plain-msg { display: block; background: #fff; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; color: #777; margin: 30px 0 0; text-align: center;}
.notice-msg { display: block; background: #FFC; padding: 10px 15px; border: 1px solid #FC6; border-radius: 5px; font-size: 14px; color: #666; margin: 30px 0 0; text-align: center;}
.error-text { display: inline-block; font-size: 17px; font-weight: 700; color: #ff0000; margin: 10px 0;}
.success-text { display: inline-block; font-size: 17px; font-weight: 700; color: #093; margin: 10px 0;}

#form_msg { display: block;}
.form-success { display: block; background: #D8FFC0; padding: 7px 20px; margin: 0 0 5px 0; font-size: 17px; font-weight: 500; color: #2E6800; text-align: center; margin: 0 10px 20px 0;}
.form-error { display: block; background: #FFE8E8; padding: 7px 20px; margin: 0 0 5px 0; font-size: 17px; font-weight: 500; color: #FF0000; text-align: center; margin: 0 10px 20px 0;}
#loader-icon { display: none;}

/***********************************/
/* HOME PAGE */
/***********************************/
.hero { background: var(--teal-dark); padding: 0; position: relative; overflow: hidden;}
.hero::before { content: ""; position: absolute;}
header { padding: 30px 0; position: relative; z-index: 3; transition: none;}
.navbar { display: flex; padding: 0;}
.navbar-toggler { border: none;}
.navbar-brand { width: 127px; font-size: 30px; font-weight: 500; color: #fff; line-height: 20px;}
.navbar-brand img { width: 100%;}
.navbar-brand img.dark { display: none;}
.navbar-nav .menu-item { display: flex; align-items: center; margin: 0 18px; position: relative;}
.navbar-nav .menu-item > a { display: flex; align-items: center; font-size: 14px; color: rgba(255,255,255,0.8);}
.navbar-nav .menu-item:hover > a, .navbar-nav .menu-item.active > a { color: #fff;}
.navbar-nav .menu-item.menu-item-has-children::after { content: "\F282"; font-family: "Bootstrap-icons"; font-size: 10px; border: none; color: rgba(255,255,255,0.8); margin-left: 5px;}
.navbar-nav .menu-item.dropdown::after { content: "\F282"; font-family: "Bootstrap-icons"; font-size: 10px; margin: 3px 0 0 5px; color: white;}
.navbar-nav .dropdown-toggle::after { display: none;}
.navbar-nav .dropdown-menu { background: var(--light-gray); padding: 40px; border-radius: 5px; justify-content: space-between; min-width: 510px; position: absolute; top: 2.7em; left: 0; z-index: 99999; display: none;}
.navbar-nav .dropdown-menu .heading { width: 30%; font-size: 12px; text-transform: uppercase; color: #16646F; text-align: center; margin: 5px 0 0 0;}
.navbar-nav .dropdown-menu ul { width: 65%;}
.navbar-nav .dropdown-menu ul li { margin: 0 0 40px 0;}
.navbar-nav .dropdown-menu ul li:last-child { margin: 0;}
.navbar-nav .dropdown-menu ul li a { display: flex; justify-content: space-between; align-items: start; white-space: normal; color: var(--teal-dark);}
.navbar-nav .dropdown-menu ul li img { width: 22px; margin: 5px 20px 0 0;}
.navbar-nav .dropdown-menu ul li .side { width: 85%; text-align: left;}
.navbar-nav .dropdown-menu ul li .side span { font-size: 18px; font-weight: 300; color: var(--teal-dark); white-space: nowrap;}
.navbar-nav .dropdown-menu ul li .side p { font-size: 14px; font-weight: 300; color: #0C313790;}
.navbar-nav .dropdown-menu.show { display: flex !important;}
.navbar-nav .dropdown-menu li a:focus { background: transparent;}

#nav_menu-8 { display: none;}

.hero .container { z-index: 3;}
.hero .hero-content { position: relative; width: 100%; padding: 80px 0 140px; z-index: 2;} 
.hero .caption h1 { font-size: 64px; font-weight: 300; line-height: 1; color: white; letter-spacing: 0;} 
.hero .caption p { font-size: 24px; font-weight: 300; line-height: 1.2; color: var(--purple-light); margin: 40px 0 50px; letter-spacing: 0.04em;}
.hero .cta { display: flex;}
.hero .cta .btn { margin: 0 20px 0 0;}

.hero-home { background: var(--teal-dark); position: relative; overflow: hidden;}
.hero-home::after { content: ""; position: absolute; right: -5%; top: -20%; width: 862px; height: 1073px; background-image: url("../img/hero-home-dots.png"); background-position: center center; background-repeat: no-repeat; animation: heroDotWobble 6s ease-in-out infinite; z-index: 2; transform-origin: center center;}
.hero-home .caption h1 { font-size: 120px; line-height: 1.2; color: var(--purple-light); letter-spacing: 0px;}
.hero-home .caption p { margin: 200px 0 50px 0;}
.hero-home .changingItems { opacity: 0; transition: opacity 1s; position: relative;}
.hero-home .changingItems .item { display: flex; opacity: 0; position: absolute; left: 0; top: 0;}
.hero-home .changingItems .item img { margin: 0 30px 0 0;}
.hero-home .changingItems .item.show { transition: opacity 1s; align-items: center; opacity: 1;}
.hero-home .meshes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.hero-home .mesh.one { width: 1258px; height: 1087px; position: absolute; right: -10%; bottom: -75%; background-image: linear-gradient(to bottom, #CDEED3, #948DFF 50%); opacity: 0.33; transform: rotate(20deg); animation: homeCircleOne 5s infinite ease-in-out; border-radius: 50%; filter: blur(200px);}
.hero-home .mesh.two { width: 587px; height: 543px; position: absolute; right: -10%; top: -30%; background-image: linear-gradient(to top, #FFB060, #012B31); transform: rotate(-10deg); opacity: 0.69; animation: homeCircleTwo 5s infinite ease-in-out; border-radius: 50%; filter: blur(200px);}
.mesh {
  will-change: transform, filter;
  backface-visibility: hidden;
}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .hero-home .mesh.one,
    .hero-home .mesh.two {
      filter: blur(150px);
    }
  }
}


@keyframes heroDotWobble {
  0%   { transform: rotate(-2.5deg); }
  25%  { transform: rotate(-5.5deg); }
  50%  { transform: rotate(-2.5deg); }
  75%  { transform: rotate(-5.5deg); }
  100% { transform: rotate(-2.5deg); }
}

@keyframes homeCircleOne {
  0%, 20%, 100% { bottom: -45%; }
  40%, 60% { bottom: -55%; }
}
@keyframes homeCircleTwo {
  0%, 20%, 100% { bottom: -30%; right: -10%; }
  40%, 60% { bottom: -40%; right: -15%; }
}

.trusted { background: var(--teal-dark); padding: 20px 0;}
.trusted .sec-inner { display: flex; align-items: center;}
.trusted p { font-size: 14px; color: var(--light-gray);}
.trusted .logos { display: flex; align-items: center; margin: 0 0 0 100px; flex: 1 1 auto;}
.trusted .logos img { margin: 0 30px 0 0;}
.trusted .logos img:last-child { margin: 0;}

.sec-info { margin: 0 0 50px 0;}
.sec-label { display: inline-block; background: white; padding: 5px 35px; border-radius: 50px;}
.sec-label span { font-size: 14px; background: linear-gradient(to right, #2F8C99, #8888FF, #DC8785); color: transparent; background-clip: text;}
.sec-label.green { background: var(--teal-dark);}
.sec-label.brown { background: #F0ECE2;}
.sec-info h2 { font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: 0.02em; color: var(--teal-dark); margin: 20px 0;}
.sec-info h3 { font-size: 40px; font-weight: 300; line-height: 1.2; letter-spacing: 0; color: var(--teal-dark); margin: 20px 0;}
.sec-info p { font-size: 16px; font-weight: 300; color: var(--teal-dark); margin: 0 0 30px 0;}
.sec-info ul { margin: 0 0 40px 0;}
.sec-info.white h2, .sec-info.white h3, .sec-info.white p, .sec-info.white ul li { color: var(--light-gray);}

.items-list { margin: 0 0 40px 0;}
.items-list li { font-size: 16px; letter-spacing: 0.04em; line-height: 1.3; display: flex; align-items: flex-start; margin: 0 0 10px 0;}
.items-list li::before { content: ""; font-family: "Bootstrap-icons"; margin: 0 10px 0 0;}
.items-list li.check::before { content: "\F272"; background: var(--green-primary); width: 20px; height: 20px; border-radius: 20px; display: flex; justify-content: center; font-size: 18px; color: #43894F;}
.items-list li.close::before { content: "\F62A"; background: #E1A5A3; width: 20px; height: 20px; border-radius: 20px; display: flex; justify-content: flex-end; align-items: flex-start; font-size: 18px; color: #944845; line-height: 21px;}

.checklist li { font-size: 16px; color: var(--teal-dark); letter-spacing: 0.04em; line-height: 1.3; position: relative; display: flex;}
.checklist li::before { content: "\F272"; font-family: "Bootstrap-icons"; margin: 0 5px 0 0;}
.checklist.white li { color: var(--light-gray);}

.solutions { padding: 0; position: relative; overflow: hidden;}
.slide__cards { position: relative; z-index: 1; height: 100vh; max-height: 1000px;}
.slide__cards.bg-white { background: var(--purple-light);}
.slide__cards.bg-white:first-child:hover { background: white;}

.slide__cards .cards { position: relative; height: 100vh;}
.slide__cards .sec-inner { display: flex; flex-direction: row; justify-content: space-between; padding: 10% 0;}
.slide__cards .sec-info { width: 45%; margin: 0; position: relative;}
.slide__cards .sec-info p { color: #0C3137;}
.slide__cards .items-list li { color: #0C3137; }
.slide__cards .sec-content { width: 50%; }
.slide__cards .sec-label { background: var(--biege-primary);}

.slide-card { width: 100%; background: var(--teal-dark); padding: 20px 25px 28px 40px; margin: 0 0 10px 0; border: none; border-radius: 0; min-height: 408px; position: absolute; top: 0; left: 0; width: 100%; transform-origin: center center; will-change: transform;}
.slide-card .num { font-family: "PP Radio Grotesk"; font-size: 120px; font-weight: 300; line-height: 1.2; color: var(--purple-light); margin: 0 0 20px 0;}
.slide-card .num small { font-size: 80px;}
.slide-card h3 { font-size: 32px; font-weight: 300; color: var(--purple-light); margin: 20px 0; line-height: 1.2;}
.slide-card h4 { font-size: 24px; font-weight: 300; color: var(--purple-light); margin: 20px 0;}
.slide-card p { font-size: 16px; font-weight: 300; color: var(--light-gray); margin: 0 0 30px 0;}
.slide-card .bottom { display: flex; justify-content: space-between; margin: 80px 0 0 0;}
.slide-card .bottom span { margin-top: auto;}
.slide-card .bottom .icon { margin-left: auto;}
.slide-card.purple { background: var(--purple-light);}
.slide-card.purple * { color: var(--teal-dark);}
.slide-card.peach { background: var(--peach-primary);}
.slide-card.peach * { color: var(--teal-dark);}
.slide-card.peach { background: var(--peach-primary);}
.slide-card.peach * { color: var(--teal-dark);}
.slide-card.biege { background: var(--biege-primary);}
.slide-card.biege * { color: var(--teal-dark);}
.slide-card.red { background: var(--red-primary);}
.slide-card.red * { color: var(--teal-dark);}

@media (max-width: 767px) {
.slide__cards .items-list { margin: 0 0 20px 0;}
}

.slides-nav { position: fixed; left: 0; right: 0; bottom: 30px; width: 80%; margin: 0 auto; height: 50px; z-index: 10; display: flex; justify-content: center; align-items: center; opacity: 0;}
.slides-nav .dot { display: inline-block; width: 130px; height: 2px; background: #EFEFEF; margin: 0 3px; opacity: 0.32;}
.slides-nav .dot.active { background: #CDEED3; opacity: 1;}

@keyframes dotWobble {
  0% { transform: rotate(0deg); }
  10%  { transform: rotate(-2.5deg); }
  20%  { transform: rotate(-2.5deg); }
  30%  { transform: rotate(1deg); }
  40%  { transform: rotate(2deg); }
  45%  { transform: rotate(2deg); }
  50%  { transform: rotate(0deg); }  
  55%  { transform: rotate(0deg); }  
  60%  { transform: rotate(-1deg); }
  65%  { transform: rotate(-1deg); }
  70%  { transform: rotate(-2deg); }
  75%  { transform: rotate(-2deg); }
  80%  { transform: rotate(-3deg); } 
  85%  { transform: rotate(-3deg); } 
  90%  { transform: rotate(-1deg); }
  95%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

.slide__icons { background: var(--light-gray); padding: 0; position: relative; overflow: hidden; min-height: 90vh;}
.slide__icons .sec-inner { padding: 15% 0;}
.slide__icons .sec-info { width: 100%; margin: 0 0 60px 0; text-align: center;}
.slide__icons .sec-content { width: 100%;}
.slide__icons .sec-content ul { display: flex; justify-content: center; align-items: flex-start; gap: 25px;}
.slide__icons .sec-content ul li { width: 17%; background: white; display: flex; flex-direction: column; align-items: center; padding: 30px 20px; height: 250px; text-align: center;}
.slide__icons .sec-content ul li span { margin: 0 0 10px 0; height: 100px; display: flex; justify-content: center; align-items: center; transition: height 0.3s ease;}
.slide__icons .sec-content ul li span img { width: 100%; max-height: 100px; transition: max-height 0.3s ease;}
.slide__icons .sec-content ul li h4 { font-size: 24px; font-weight: 300; letter-spacing: 0.04em; text-align: center; min-height: 60px; display: flex; align-items: center; transition: font-size 0.3s ease-in-out, line-height 0.3s ease-in-out; margin: 0 0 10px 0;}
.slide__icons .sec-content ul li h5 { font-size: 20px; font-weight: 300; letter-spacing: 0.04em; text-align: center; min-height: 60px; display: flex; align-items: center; transition: font-size 0.3s ease-in-out, line-height 0.3s ease-in-out; margin: 0 0 10px 0;}
.slide__icons .sec-content ul li p { font-size: 12px; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease;}
@media (min-width: 768px) {
.slide__icons .sec-content ul li:hover span { height: auto; margin-bottom: 20px;}
.slide__icons .sec-content ul li:hover span img { max-height: 40px;}
.slide__icons .sec-content ul li:hover h4 { font-size: 18px; line-height: 1.3; min-height: 55px;}
.slide__icons .sec-content ul li:hover h5 { font-size: 18px; line-height: 1.3; min-height: 55px;}
.slide__icons .sec-content ul li:hover p { opacity: 1; max-height: 100px;}
}
.slide__icons .sec-content ul li.teal:hover { background: #CAE4E8;}
.slide__icons .sec-content ul li.green:hover { background: #F5FFF7;}
.slide__icons .sec-content ul li.yellow:hover { background: #F2ECDF;}
.slide__icons .sec-content ul li.orange:hover { background: #F9F0E8;}
.slide__icons .sec-content ul li.peach:hover { background: #F2ECDF;}
.slide__icons .sec-content ul li.purple:hover { background: #F1F0FF;}
.slide__icons .sec-content ul li.red:hover { background: #FAECE9;}
.slide__icons .sec-foot { padding: 30px 0 0 0; text-align: center;}
.slide__icons .sec-foot p { font-size: 14px; color: var(--teal-dark);}

.slide__why { background: var(--teal-primary); position: relative; overflow: hidden; min-height: 96vh; max-height: 1000px; padding: 0;}
.slide__why::after { content: ""; position: absolute; right: -5%; top: -30%; width: 1169px; height: 1568px; background-image: url("../img/slide__why-dots.svg"); background-position: center center; background-repeat: no-repeat; animation: dotWobble 15s ease-in-out infinite;}
.slide__why .sec-inner { padding: 10% 0; display: flex; flex-direction: row; justify-content: space-between;}
.slide__why .sec-info h2 { font-size: 48px; color: #CECBFF; margin: 50px 0;}
.slide__why .sec-info ul { color: var(--light-gray);}
.slide__why .sec-info li { color: var(--light-gray);}
.slide__why .sec-info .btn { background: var(--light-gray);}
.slide__why .sec-content { width: 30%; position: relative; z-index: 1;}
.slide__why .sec-content img:first-child { position: absolute; left: 0; top: 0px;}
.slide__why .sec-content img:nth-child(2) { position: absolute; right: -150px; top: 100px;}
.slide__why .sec-content img:nth-child(3) { position: absolute; left: 170px; top: 250px;}
.slide__why .sec-content img:last-child { position: absolute; left: -50px; bottom: -50px;}

.benefits .sec-info { text-align: center; margin: 0 0 80px 0;}
.benefits .sec-content { display: grid;  grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 8%;}
.benefits .box { background: #efefef; padding: 30px 20px; position: relative; height: 285px;}
.benefits .box h4 { font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: 0.04em; color: var(--teal-dark); margin: 0 0 20px 0;}
.benefits .box p { width: 80%; font-size: 14px; color: var(--teal-dark); margin: 0 0 20px 0;}
.benefits .box img { position: absolute; right: 20px; bottom: 20px;}
.benefits .box.teal.dark { background: var(--teal-dark);}
.benefits .box.teal.light { background: #0C5660;}
.benefits .box.teal h4, .benefits .box.teal p { color: var(--light-gray);}
.benefits .box.peach { background: var(--peach-primary);}
.benefits .box.gray { background: #efefef;}
.benefits .box.biege { background: var(--biege-primary);}
.benefits .box.purple { background: var(--purple-light);}
.benefits .box.green { background: var(--green-primary);}

.proof { position: relative; overflow: hidden;}
.proof .lines { position: absolute; right: 0; bottom: 0; width: 100px; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end;}
.proof .lines span { width: 22px; height: 100%;}
.proof .lines span:first-child { background-image: linear-gradient( to top, #0F2A2E, #6B6D64, #989BD3, transparent);}
.proof .lines span:nth-child(2) { background-image: linear-gradient( to top, #0F2A2E, #565D59, #727AA3, transparent);}
.proof .lines span:nth-child(3) { background-image: linear-gradient( to top, #0F2A2E, #374543, #4D5B78, transparent);}
.proof .lines span:last-child { background-image: linear-gradient( to top, #0F2A2E, #263D4D, #263D4D, #263D4D, transparent);}
.proof .sec-content { display: flex;}
.proof .box { width: 100%;}
.proof .box .num { font-family: "PP Radio Grotesk" !important; font-size: 125px; color: var(--purple-primary); display: flex;}
.proof .box .num small { font-size: 80px;  align-self: flex-end;}
.proof .box .num span { font-family: "PP Radio Grotesk" !important;}
.proof .box h3 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 20px 0 10px 25px; letter-spacing: 0.04em; line-height: 1.2;}
.proof .box h4 { font-size: 21px; font-weight: 300; color: var(--teal-dark); margin: 20px 0 10px; letter-spacing: 0.04em; line-height: 1.2;}
.proof .box p { font-size: 16px; color: var(--teal-dark);}
.proof .box.large { margin: 0 0 100px 0;}
.proof .box.large .num { font-size: 200px; }
.proof .box.large .num small { font-size: 123px;}
.proof .box.large h3 { margin: 0 0 10px 35px;}
.odometer-inside { display: flex;}
.odometer-formatting-mark { display: none;}
odometer {
  animation-name: odometer-slide;
  animation-duration: 2s;
  animation-direction: alternate; /* Or normal, reverse, alternate-reverse */
  animation-iteration-count: infinite; /* Or a specific number of times */
  /* other styles */
}

@keyframes odometer-slide {
  /* Define your keyframes for the animation */
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%); /* Example: move the text up */
  }
}
@media (min-width: 991px) {
.proof.sustain .middleCol { padding: 0 0 0 80px;}
.proof.sustain .lastCol { padding: 0 0 0 30px;}
}

.proof.white { background: var(--light-gray);}
.proof.white .sec-info h2 { color: var(--teal-dark);}

.proof.teal { background: var(--teal-primary);}
.proof.teal .sec-info .sec-label { background: var(--teal-dark);}
.proof.teal .sec-info h2 { color: var(--light-gray);}
.proof.teal .sec-info p { color: var(--light-gray);}
.proof.teal .box .num { color: var(--green-primary);}
.proof.teal .box h4 { color: var(--light-gray);}
.proof.teal .box p { color: var(--light-gray);}

.proof.highlightDark { background: var(--teal-primary); transition: background 1s;}
.proof.highlightDark .sec-label { background: var(--teal-dark);}
.proof.highlightDark .sec-info h2, .proof.highlightDark .sec-info p { color: var(--light-gray);}
.proof.highlightDark .box .num { color: var(--green-primary);}
.proof.highlightDark .box h3 { color: var(--light-gray);}
.proof.highlightDark .box h4 { color: var(--light-gray);}
.proof.highlightDark .box p { color: var(--light-gray);}

.proof.highlightLight { background: white; transition: background 1s;}
.proof.highlightLight .sec-info .sec-label { background: var(--biege-primary);}
.proof.highlightLight .sec-info h2 { color: var(--teal-dark);}
.proof.highlightLight .sec-info p { color: var(--teal-dark);}
.proof.highlightLight .box .num { color: var(--purple-light);}
.proof.highlightLight .box h3 { color: var(--teal-dark);}
.proof.highlightLight .box h4 { color: var(--teal-dark);}
.proof.highlightLight .box p { color: var(--teal-dark);}

.howitworks { background: var(--teal-primary);}
.howitworks .sec-info { margin: 0 0 50px 0;}
.howitworks .sec-info h2 { color: var(--light-gray);}
.howitworks .numbers { width: 55%; position: relative; margin: 0 0 20px 0;}
.howitworks .numbers::before { content: ""; position: absolute; left: 0; top: 20px; width: 100%; height: 1px; background: #19545D;}
.howitworks .numbers ul { width: 100%; display: flex; justify-content: space-between; position: relative; z-index: 1;}
.howitworks .numbers li { background: #002126; padding: 8px; color: #287E89; border-radius: 40px;}
.howitworks .numbers li:nth-child(2) { background: var(--green-primary); color: #000000;}
.howitworks .boxes { display: flex; justify-content: space-between;}
.howitworks .box { width: 24%; padding: 40px 20px; background: var(--teal-dark); min-height: 215px;}
.howitworks .box h5 { font-size: 20px; font-weight: 300; color: var(--light-gray); letter-spacing: 0.03em; line-height: 1.3; margin: 0 0 20px 0;}
.howitworks .box p { font-size: 14px; color: var(--light-gray); letter-spacing: 0.04em; line-height: 1.3;}
.howitworks .box:nth-child(2) { background: #155760;}
.howitworks .box:last-child { padding: 0; display: flex; justify-content: center; align-items: center; position: relative;}
.howitworks .box:last-child img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.howitworks .box:last-child .btn { position: relative; z-index: 2;}

.howitworks.white { background: #fff;}
.howitworks.highlightLight { background: var(--light-gray);}
.howitworks.white .sec-label, .howitworks.highlightLight .sec-label { background: var(--biege-primary);}
.howitworks.white .sec-info h2, .howitworks.highlightLight .sec-info h2 { color: #001D21;}
.howitworks.white .numbers::before, .howitworks.highlightLight .numbers::before { background: #C5C5C5;}
.howitworks.white .numbers li, .howitworks.highlightLight .numbers li { background: #EFEFEF; color: var(--teal-dark);}
.howitworks.white .numbers li:nth-child(2), .howitworks.highlightLight .numbers li:nth-child(2) { background: var(--green-primary);}
.howitworks.white .box, .howitworks.highlightLight .box { background: #EFEFEF;}
.howitworks.white .box:nth-child(2), .howitworks.highlightLight .box:nth-child(2) { background: var(--green-primary);}
.howitworks.white .box h5, .howitworks.highlightLight .box h5, .howitworks.white .box p, .howitworks.highlightLight .box p { color: var(--teal-dark);}

.partners .sec-info { text-align: center;}
.partners .sec-info h2 { margin: 20px 0 20px 0;}
.partners .sec-info p { margin: 20px 0 20px 0;}
.partners .sec-content { width: 100%;}
.partners .logos { display: flex; justify-content: center; align-items: center; margin: 100px 0 0 0;}
.partners .logos img { margin: 0 40px;}

.launch { background: var(--teal-primary); background-size: cover; color: var(--light-gray); padding: 120px 0; position: relative; overflow: hidden;}
.launch .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.launch .mesh.one { position: absolute; left: -15%; top: -30%; width: 1062px; height: 548px; background: linear-gradient(to bottom, #CDEED3, #012B31); border-radius: 50%; transform: rotate(-20deg); filter: blur(140px); animation: float1 5s ease-in-out infinite alternate; opacity: 1; z-index: 1;}
.launch .mesh.two { position: absolute; left: 15%; top: 50%; width: 1052px; height: 543px; background: linear-gradient(to bottom, #FFB060, #012B31); transform: rotate(-20deg); border-radius: 50%; filter: blur(140px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.8; z-index: 2;}
.launch .mesh.three { position: absolute; right: 0; top: -70%; width: 910px; height: 787px; background: linear-gradient(to bottom, #CDEED3, #948DFF); transform: rotate(15deg); border-radius: 50%; filter: blur(140px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.8; z-index: 2;}
.launch .container { position: relative; z-index: 10;}
.launch .sec-info { margin: 0;}
.launch h2 { font-size: 90px; line-height: 1; letter-spacing: 0; color: var(--light-gray); margin: 0 0 20px 0;}
.launch h3 { font-size: 64px; margin: 0 0 20px 0; color: var(--light-gray);}
.launch h4 { font-size: 52px; margin: 0 0 20px 0; color: var(--light-gray);}
.launch p { font-size: 18px; color: var(--light-gray); margin: 0 0 0 5px;}
.launch ul { margin: 40px 0;}
.launch .btn { background: var(--light-gray); margin: 30px 0 0 4px;}

footer { padding: 100px 0 0; background: var(--light-gray);}
footer .sec-inner { display: flex; justify-content: space-between; margin: 50px 0 0 0;}
footer .left { width: 20%;}
footer .center { width: 45%; display: flex; justify-content: space-between; flex-wrap: wrap; justify-content: space-between;}
footer .right { width: 20%;}
.footer-about { margin: 0 0 30px 0;}
.footer-about p { font-size: 12px; color: var(--teal-primary);}
.footer-contact { margin: 0 0 30px 0;}
.footer-contact h5 { font-size: 12px; font-weight: 500; color: var(--teal-primary); text-transform: uppercase;}
.footer-contact a { font-size: 12px; color: var(--teal-primary); text-decoration: none;}
.footer-links { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.footer-links .widget_nav_menu { width: 33%;}
.footer-links h3 { font-family: 'PP Radio Grotesk'; font-size: 12px; font-weight: 500; text-transform: uppercase; margin: 0 0 10px 0;}
.footer-links ul li a { font-size: 12px; color: var(--teal-primary); letter-spacing: 0.04em; line-height: 1.3;}
#nav_menu-6, #nav_menu-7 { margin: 50px 0 0 0;}

.stay-updated { color: var(--teal-primary); margin: -5px 0 0 0;}
.stay-updated h4 { font-size: 20px;}
.stay-updated p { font-size: 12px; margin: 10px 0 30px 0;}
.stay-updated .email-field { position: relative;}
.stay-updated .gjs-cell { display: flex; align-items: center;}
.stay-updated .email-field input[type="email"] { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--teal-primary); padding: 5px 0; font-size: 12px; font-weight: 300; color: var(--teal-primary); text-transform: uppercase;}
.stay-updated .email-field input[type="email"]::placeholder { color: var(--teal-primary);}
.stay-updated .email-field input[type="email"]:focus { outline: none;}
.stay-updated .email-field input[type="submit"] { position: absolute; right: 0; top: 10px; background: transparent; border: none;}
.footer-social { margin: 50px 0 0 0;}
.footer-social a { font-size: 20px; color: var(--purple-light); margin: 0 10px 0 0;}
.footer-social a:hover { font-size: 20px; color: #817BE0;}
.footer-bottom { display: flex; justify-content: space-between; padding: 25px 0; border-top: 1px solid #D3D0FF; margin: 50px 0 0 0;}
.footer-bottom .copyright { font-size: 12px; color: var(--teal-primary);}
.footer-bottom .designed-by p { font-size: 12px; color: var(--teal-primary);}
.footer-bottom .designed-by p a { font-size: 12px; color: var(--teal-primary);}

/***********************************/
/* SOLUTION PAGE */
/***********************************/
.hero-solution .hero-content { padding: 200px 0 250px;}
.hero-solution .caption .text-purple { color: var(--purple-primary);}
.hero-solution .caption .text-green { color: var(--green-primary);}

.hero-solution::before { content: ""; position: absolute; left: -30%; bottom: -50%; width: 973px; height: 841px; background-image: linear-gradient(to right, #948DFF, #CDEED3); transform: rotate(-20deg); border-radius: 50%; filter: blur(200px); opacity: 0.3;}
.hero-solution::after { content: ""; position: absolute; right: 0; top: 0; width: 1062px; height: 1056px; background: url("../img/hero-solutions-dots.svg") right top no-repeat; opacity: 0.7;}

.hero-solution .meshes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
.hero-solution .mesh.one { position: absolute; left: 60%; top: 60%; width: 954px; height: 824px; background-image: linear-gradient(to right, #CEFCD7, #948DFF); border-radius: 50%; filter: blur(200px); opacity: 0.2;}
.hero-solution .mesh.two { position: absolute; right: -10%; top: 20%; width: 954px; height: 700px; background-image: linear-gradient(to right, #BCBCFF, #030303); transform: rotate(-5deg); border-radius: 50%; filter: blur(200px); opacity: 0.3;}
.hero-solution .mesh.three { position: absolute; right: -20%; top: -30%; width: 757px; height: 700px; background-image: linear-gradient(to right, #FFB060, #012B31); transform: rotate(-20deg); border-radius: 50%; filter: blur(200px); opacity: 0.69;}

.hero-solution .circles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.hero-solution .circle { width: 820px; height: 820px; border-radius: 50%; position: absolute; right: 0; background: transparent; overflow: visible; border: 1px solid white;}
.hero-solution .circle.red    { border-color: var(--red-primary); top: 500px; right: -120px;}
.hero-solution .circle.blue   { border-color: var(--teal-color); top: 250px; right: -150px;}
.hero-solution .circle.green  { border-color: var(--green-primary); top: 300px; right: -300px;}
.hero-solution .circle.yellow { border-color: #E1A5A3; top: 150px; right: -200px;}
.hero-solution .circle.purple { border-color: var(--purple-light); top: 190px; right: -80px;}
.hero-solution .dot-group { position: absolute; width: 100%; height: 100%; animation: spin 95s linear infinite;}
.hero-solution .circle.reverse .dot-group { animation-direction: reverse;}
.hero-solution .circle.reverse .dot { width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; transform: rotate(var(--angle1)) translateX(410px);}
.hero-solution .circle.reverse .dot.second { transform: rotate(var(--angle2)) translateX(410px);}

@keyframes spin {
  100% { transform: rotate(360deg);}
}

.hero-solution-leader .hero-content { padding: 200px 0 250px;}
.hero-solution-leader .caption p { color: var(--light-gray);}
.hero-solution-leader .caption .text-white { color: var(--light-gray);}
.hero-solution-leader .caption .text-green { color: var(--green-primary);}
.hero-solution-leader::before { content: ""; position: absolute; left: -30%; bottom: -50%; width: 973px; height: 841px; background-image: linear-gradient(to top, #CDEED3 , #948DFF); transform: rotate(-20deg); border-radius: 50%; filter: blur(200px); opacity: 0.3;}
.hero-solution-leader::after { content: ""; position: absolute; right: -10%; bottom: -40%; width: 1062px; height: 1056px; background: url("../img/hero-solutions-leader-dots.svg") right top no-repeat; opacity: 0.7;}

.hero-solution-leader .meshes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
.hero-solution-leader .mesh.one { position: absolute; right: -10%; top: -20%; width: 866px; height: 801px; background-image: linear-gradient(to top, #648C6C, #012B31); transform: rotate(5deg); border-radius: 50%; filter: blur(200px); opacity: 0.42;}
.hero-solution-leader .mesh.two { position: absolute; right: -15%; top: 30%; width: 1090px; height: 942px; background-image: linear-gradient(to top, #CEFCD7, #948DFF); transform: rotate(15deg); border-radius: 50%; filter: blur(200px); opacity: 0.3;}

.hero-solution-leader .circles { position: absolute; right: -10%; top: 20%; width: 1018px; height: 1018px; overflow: hidden; z-index: 1;}
.hero-solution-leader .circle { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; border-radius: 50%; background: transparent; overflow: visible; border: 1px solid white;}
.hero-solution-leader .circle.purple { border-color: #7C88F1; width: 1018px; height: 1018px;}
.hero-solution-leader .circle.red { border-color: #DC8785; width: 889px; height: 889px; margin-top: 70px;}
.hero-solution-leader .circle.teal { border-color: #318C9B; width: 736px; height: 736px; margin-top: 140px;}
.hero-solution-leader .circle.green { border-color: #B6D5BC; width: 544px; height: 544px; margin-top: 240px;}
.hero-solution-leader .dot-group { position: absolute; width: 100%; height: 100%; animation: spin 95s linear infinite;}
.hero-solution-leader .circle.reverse .dot-group { animation-direction: reverse;}
.hero-solution-leader .dot { width: 21px; height: 21px; background: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; transform: rotate(var(--angle1)) translateX(var(--radius));}
.hero-solution-leader .dot.second { transform: rotate(var(--angle2)) translateX(var(--radius));}

.challenges { background: var(--light-gray);}
.challenges .sec-info { margin: 0 0 100px 0;}
.challenges .sec-content { display: flex; justify-content: space-between;}
.challenges .image { width: 52%; position: relative;}
.challenges .image > img { width: 100%;}
.challenges .image img { opacity: 1;}
.challenges .image img.fade-out { opacity: 0;}
.challenges .image span { position: absolute; left: -50px; bottom: 60px; width: 100px; height: 100px;}
.challenges .text { width: 45%; padding: 0 20px;}
.challenges .text ul { position: relative;}
.challenges .text ul li { padding: 30px 0; border-bottom: 1px solid #E5E5E5; position: relative; opacity: 0.6;}
.challenges .text ul li .image { display: none;}
.challenges .text ul li h4 { font-size: 24px; font-weight: normal; color: var(--teal-dark); margin: 0 0 30px 0; letter-spacing: 0.04em; line-height: 1.2;}
.challenges .text ul li p { font-size: 14px; color: var(--teal-dark); font-weight: 300;}
.challenges .text ul li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-image: linear-gradient(to right, #328C9D, #8C89FB, #DC8785); transition: width 4s ease; opacity: 0;}
.challenges .text ul li.active::after { width: 100%; opacity: 1;}
.challenges .text ul li.active { opacity: 1;}

.fix-these .sec-info { margin: 0 0 80px 0; text-align: center;}
.fix-these .sec-content { display: flex; justify-content: space-between; padding: 0 50px;}
.fix-these .box { width: 32%; background: #efefef; padding: 30px 20px; position: relative; height: 285px;}
.fix-these .box h3 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 20px 0; letter-spacing: 0.04em; line-height: 1.2;}
.fix-these .box p { width: 100%; font-size: 14px; color: var(--teal-dark); margin: 0 0 20px 0;}
.fix-these .box img { position: absolute; right: 20px; bottom: 20px;}
.fix-these.highlight { transition: background 1s;}
.fix-these.highlight .sec-info .sec-label { background: var(--teal-dark);}
.fix-these.highlight .sec-info h2 { color: var(--light-gray);}
.fix-these.highlight { background: var(--teal-primary);}
.fix-these.highlight .box { background: var(--teal-dark);}
.fix-these.highlight .box h3 { color: var(--light-gray);}
.fix-these.highlight .box p { color: var(--light-gray);}
.fix-these.highlight .box img { mix-blend-mode: soft-light;}
.fix-these.highlight .box:hover { background: url("../img/bg-fix-box.png") center center no-repeat; background-size: cover;}

.certified { padding: 150px 0;}
.certified.bg-gray { background: var(--light-gray);}
.certified .sec-info { margin: 0 0 80px 0;}
.certified .sec-content { width: 100%; display: flex; justify-content: center;}
.certified .logos { display: flex; justify-content: center; align-items: center;}
.certified .logos img { margin: 0 30px;}

.you-get { padding: 120px 0; background: var(--teal-primary); position: relative; overflow: hidden;}
.you-get::before { content: ""; position: absolute; left: -20%; bottom: -30%; width: 640px; height: 553px; background-image: linear-gradient(to right, #948DFF, #CDEED3); transform: rotate(-20deg); border-radius: 50%; filter: blur(200px); opacity: 0.4;}
.you-get .container { position: relative; z-index: 1;}
.you-get .sec-inner { display: flex; justify-content: space-between;}
.you-get .sec-info { width: 30%;}
.you-get .sec-info h3, .you-get .sec-info p { color: var(--light-gray);}
.you-get .sec-content { width: 60%; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 20px; margin: 60px 0 0 0;}
.you-get .box { width: 30%; background: var(--teal-dark); padding: 30px 15px; height: 227px;}
.you-get .box span { display: inline-block; width: 50px; margin: 0 0 30px 0;}
.you-get .box span img { max-height: 40px;}
.you-get .box h4 { font-size: 16px; font-weight: 300; color: var(--light-gray); margin: 0 0 10px 0; letter-spacing: 0.04em; line-height: 1.3;}
.you-get .box p { font-size: 14px; color: #8FB4BA; margin: 0 0 10px 0;}
.you-get .box:last-child { background: var(--teal-light); display: flex; justify-content: center; align-items: center;}

.testimonials { background: var(--teal-dark); padding: 0;}
.testimonials .sec-content { display: flex; justify-content: space-between; position: relative;}
.testimonials .images { width: 45%; display: flex; flex-direction: column;}
.testimonials .images img { width: 100%;}
.testimonials .text { width: 40%; padding: 100px 0; position: relative; margin: 50px auto 0 auto;}
.testimonials .text::before { content: ""; display: block; background: url("../img/icon-qoute2.svg") center center no-repeat; width: 60px; height: 50px; background-size: cover;}
.testimonials .text p { width: 85%; font-size: 48px; line-height: 1; color: #CDEED3; margin: 20px 0 50px 0;}
.testimonials .text span { font-size: 21px; color: #CDEED3;}
.testimonials .nav { position: absolute; right: 100px; bottom: 40px; font-size: 48px; color: white; margin: 0 0 50px 0;}
.testimonials .nav button { border: 2px solid white; padding: 10px 5px; border-radius: 50px; font-size: 30px; color: white; margin: 0 10px; background: transparent;}
.testimonials .nav button:hover { background: white; color: var(--purple-light);}
.testimonials .carousel-item { margin-top: -1px; margin-bottom: -1px;}

.solutions-faqs .sec-inner { display: flex; justify-content: space-between;}
.solutions-faqs .sec-info { width: 35%;}
.solutions-faqs .sec-content { width: 50%; margin: 60px 0 0 0;}

.accordion .item, .accordion .item-head, .accordion .item-body { float: left; width: 100%;}
.accordion .item { border-bottom: 1px solid #ccc; padding: 20px 0;}
.accordion .item-head { cursor: pointer; position: relative;}
.accordion .item-head::after { content: "\F64D"; position: absolute; right: 10px; top: 10px; font-family: 'Bootstrap-icons'; font-weight: 900; font-size: 15px; transition: all 0.5s ease; color: #151715;}
.accordion .item-head h3 { display: block; font-size: 16px; font-weight: 500; padding: 10px 0; user-select: none; color: var(--teal-dark); letter-spacing: 0.02em; line-height: 1.2;}
.accordion .item-body { display: none; padding: 10px 0;}
.accordion .item-body p { font-size: 14px; margin: 0 0 10px 0; color: var(--teal-dark);}
.accordion .item-body p:last-child { margin: 0;}
.accordion .item.show .item-body { display: block;}
.accordion .item.show .item-head::after { content: "\F659";}

/***********************************/
/* WHY CPC PAGE */
/***********************************/

.hero-why-cpc { background: var(--teal-dark); position: relative;}
.hero-why-cpc::after { content: ""; position: absolute; right: -17%; top: -2%; width: 1205px; height: 1237px; background: url("../img/why-cpc-dots.png") center center no-repeat;}
.hero-why-cpc .hero-content { padding: 150px 0 200px;}
.hero-why-cpc .caption { padding: 0 0 100px 0;}
.hero-why-cpc .caption p { margin: 40px 0 50px 0;}

.cpc-stats { background: var(--teal-primary); padding: 0;}
.cpc-stats .sec-inner { display: flex; justify-content: space-between;}
.cpc-stats .left { width: 55%;}
.cpc-stats .left h2 { width: 50%; font-size: 64px; font-weight: 300; margin: 100px auto; color: var(--light-gray);}
.cpc-stats .left img { width: 100%;}
.cpc-stats .right { width: 45%; display: flex; flex-direction: column;}
.cpc-stats .stat { width: 100%; margin: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.cpc-stats .stat .num { font-size: 150px; color: var(--green-primary); line-height: 1; margin: 0 0 30px 0; display: flex;}
.cpc-stats .stat p { font-size: 21px; color: var(--light-gray);}

.cpc-stats.highlight { background: var(--light-gray); transition: background 1s;}
.cpc-stats.highlight .left h2 { color: var(--teal-dark);}
.cpc-stats.highlight .stat .num { color: #CECBFF;}
.cpc-stats.highlight .stat p { color: var(--teal-dark);}

.cpc-comparison { background: var(--teal-primary);}
.cpc-comparison .sec-info { text-align: center; margin: 0 0 60px 0;}
.cpc-comparison .sec-info h3 { color: var(--light-gray);}
.cpc-comparison .sec-content { display: flex; justify-content: center;}
.cpc-comparison .sec-content .inner { width: 60%; background: var(--teal-dark); padding: 20px; display: flex;}
.cpc-comparison .box { width: 50%; text-align: center;}
.cpc-comparison .box:first-child { border-right: 1px solid #D3D0FF60;}
.cpc-comparison .box .head { padding: 20px; border-bottom: 1px solid #D3D0FF60;}
.cpc-comparison .box .head h3 { font-size: 32px; font-weight: 300; color: var(--light-gray); margin: 0 0 20px 0;}
.cpc-comparison .box .head p { font-size: 16px; color: var(--light-gray);}
.cpc-comparison .box .head p span { color: #E1A5A3;}
.cpc-comparison .box .list { padding: 20px; margin: 0 0 50px 0;}
.cpc-comparison .box .list li { font-size: 16px; color: var(--biege-primary); opacity: 0.9;}
.cpc-comparison .box:last-child .head p span { color: var(--green-primary);}
.cpc-comparison .box:last-child .list li { text-decoration: line-through;}


.do-more { padding: 200px 0 150px 0;}
.do-more .sec-info { margin: 0 0 100px 0; text-align: center;}
.do-more .sec-content { width: 100%; display: flex; flex-wrap: wrap; padding: 0 0 0 80px;}
.do-more .sec-content .box { background-position: center top; background-repeat: no-repeat; background-size: cover; width: 100%; height: 440px; margin: 0 20px 20px 0; padding: 40px 30px; position: relative;}
.do-more .sec-content .box p { font-size: 24px; position: absolute; z-index: 1;}
.do-more .sec-content .box span { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end;}
.do-more .sec-content .box.one { background-color: #D5D5FF;}
.do-more .sec-content .box.one p { color: var(--teal-dark);}
.do-more .sec-content .box.two { background-color: var(--teal-dark);}
.do-more .sec-content .box.two p { color: var(--light-gray);}
.do-more .sec-content .box.three { background-color: var(--peach-primary);}
.do-more .sec-content .box.three span img { width: 100%; height: 100%; object-fit: cover;}
.do-more .sec-content .box.three p { color: var(--teal-dark);}
.do-more .sec-content .box.four { background-color: var(--teal-dark);}
.do-more .sec-content .box.four p { color: var(--light-gray);}
.do-more .sec-content .box.five { background-color: var(--biege-primary);}
.do-more .sec-content .box.five span { padding: 30px;}
.do-more .sec-content .box.five p { color: var(--teal-dark);}
.do-more .sec-content .box.six { background-color: var(--green-primary);}
.do-more .sec-content .box.six p { color: var(--teal-dark);}


.we-serve { background: var(--teal-dark);}
.we-serve .sec-info { margin: 0 0 100px 0; text-align: center;}
.we-serve .sec-label { background: #04333A;}
.we-serve .sec-info h2 { color: var(--light-gray);}
.we-serve .sec-info p { color: var(--light-gray);}
.we-serve .sec-content { display: flex; justify-content: space-between;}
.we-serve .box { width: 48%; padding: 40px; height: 410px; position: relative;}
.we-serve .box .lines { position: absolute; left: 0; bottom: 0; width: 100%;}
.we-serve .box .lines ul { width: 100%;}
.we-serve .box .lines ul li { width: 100%; height: 14px;}
.we-serve .box h4 { font-size: 24px; font-weight: 300; margin: 0 0 20px 0;}
.we-serve .box p { font-size: 14px; margin: 0 0 20px 0;}
.we-serve .box p strong { font-size: 14px; font-weight: 500;}
.we-serve .box a { display: inline-block; font-size: 12px; position: relative; letter-spacing: 0.5px; margin: 40px 0 0 0;}
.we-serve .box .learn-more::after { content: "\F285"; font-family: "Bootstrap-icons"; padding: 0; font-size: 10px;}
.we-serve .box.teal { background: var(--teal-primary); overflow: hidden;}
.we-serve .box.teal * { color: var(--light-gray);}
.we-serve .box.teal strong { color: var(--purple-light);}
.we-serve .box.teal .lines ul li:first-child { background-image: linear-gradient(to right, #0F2A2E, #263D4D);}
.we-serve .box.teal .lines ul li:nth-child(2) { background-image: linear-gradient(to right, #0F2A2E, #374543, #4D5B78);}
.we-serve .box.teal .lines ul li:nth-child(3) { background-image: linear-gradient(to right, #0F2A2E, #565D59, #727AA3);}
.we-serve .box.teal .lines ul li:last-child { background-image: linear-gradient(to right, #0F2A2E, #6B6D64, #979ACF);}
.we-serve .box.teal a { border-bottom: 1px solid var(--light-gray); color: var(--light-gray);}

.we-serve .box.green { background: var(--green-primary); overflow: hidden;}
.we-serve .box.green h4, .we-serve .box.green p { color: var(--teal-dark);}
.we-serve .box.green strong { color: #0C515B;}
.we-serve .box.green .lines ul li:first-child { background-image: linear-gradient(to right, #BDC3A4, #A8B287);}
.we-serve .box.green .lines ul li:nth-child(2) { background-image: linear-gradient(to right, #BDC3A4, #99AB91, #80935B);}
.we-serve .box.green .lines ul li:nth-child(3) { background-image: linear-gradient(to right, #BDC3A4, #79927B, #5B7431);}
.we-serve .box.green .lines ul li:last-child { background-image: linear-gradient(to right, #BDC3A4, #678572, #355304);}
.we-serve .box.green a { border-bottom: 1px solid var(--teal-dark); color: var(--teal-dark);}

.we-serve.highlight { background: white; transition: background 1s;}
.we-serve.highlight .sec-label { background: var(--biege-primary);}
.we-serve.highlight .sec-info h2 { color: var(--teal-dark);}
.we-serve.highlight .sec-info p { color: var(--teal-dark);}

.brand-safety { padding: 100px 0 40px;}
.brand-safety .sec-info { margin: 0 0 100px 0; text-align: center;}
.brand-safety .sec-content ul { display: flex; justify-content: center; flex-wrap: wrap;}
.brand-safety .sec-content ul li { width: 25%; text-align: center; margin: 0 0 100px 0; }
.brand-safety .sec-content ul li span { display: block; margin: 0 0 20px 0; text-align: center;}
.brand-safety .sec-content ul li h4 { font-size: 18px; font-weight: 300; display: block; margin: 0 0 20px 0; text-align: center;}
.brand-safety .sec-content ul li p { font-size: 16px; color: var(--teal-dark);}

/***********************************/
/* HOW IT WORKS */
/***********************************/

.hero-howitworks { background: white;}
.hero-howitworks header { background: var(--light-gray);}
.hero-howitworks header .menu-item a { color: #000000;}
.hero-howitworks header .menu-item:hover a, .hero-howitworks header .menu-item.active a { color: #000000;}
.hero-howitworks .hero-content { padding: 0; position: relative;}
.hero-howitworks .sec-inner { display: flex;}
.hero-howitworks .caption { padding: 0;}
.hero-howitworks .caption h1 { color: var(--teal-dark);}
.hero-howitworks .caption p { font-size: 16px; color: var(--teal-dark); margin: 40px 0 60px 0;}
.hero-howitworks .caption .btn-teal {background: #16646F;}
.hero-howitworks .sec-info { width: 50%; padding: 200px 0 150px 0; margin: 0;}
.hero-howitworks .lines { position: absolute; right: 0; top: 0; width: 45%;}
.hero-howitworks .lines ul { width: 100%;}
.hero-howitworks .lines ul li { width: 100%; height: 57px;}
.hero-howitworks .lines ul li:first-child { background: #263E51;}
.hero-howitworks .lines ul li:nth-child(2) { background-image: linear-gradient(to left, #0F2A2E, #263D4D);}
.hero-howitworks .lines ul li:nth-child(3) { background-image: linear-gradient(to left, #0F2A2E, #374543, #4D5B78);}
.hero-howitworks .lines ul li:nth-child(4) { background-image: linear-gradient(to left, #0F2A2E, #565D59, #727AA3);}
.hero-howitworks .lines ul li:nth-child(5) { background-image: linear-gradient(to left, #0F2A2E, #6B6D64, #979ACF);}
.hero-howitworks .lines ul li:nth-child(6) { background-image: linear-gradient(to left, #0F2A2E, #8F8C78, #B1B1F1);}
.hero-howitworks .lines ul li:nth-child(7) { background-image: linear-gradient(to left, #0F2A2E, #A6A27F, #ABABFF);}
.hero-howitworks .lines ul li:nth-child(8) { background-image: linear-gradient(to left, #0F2A2E, #8F8C78, #B1B1F1);}
.hero-howitworks .lines ul li:nth-child(9) { background-image: linear-gradient(to left, #0F2A2E, #6B6D64, #979ACF);}
.hero-howitworks .lines ul li:nth-child(10) { background-image: linear-gradient(to left, #0F2A2E, #565D59, #727AA3);}
.hero-howitworks .lines ul li:nth-child(11) { background-image: linear-gradient(to left, #0F2A2E, #374543, #4D5B78);}
.hero-howitworks .lines ul li:nth-child(12) { background-image: linear-gradient(to left, #0F2A2E, #263D4D);}
.hero-howitworks .lines ul li:last-child { background: #263E51;}

.steps-process { background: var(--light-gray); padding: 60px 0;}
.steps-process .sec-info { margin: 0 0 80px 0;}
.steps-process .sec-content { position: relative; min-height: 500px;}
.step-box { display: flex; justify-content: space-between; align-items: center; margin: 0 0 80px 0;}
.step-box .image { width: 55%;}
.step-box .text { width: 40%; margin: 30px 0 0 0;}
.step-box .text { display: flex; align-items: start;}
.step-box .text .count { background: #EFEFEF; padding: 10px; font-size: 16px; border-radius: 50px;}
.step-box .text .desc { padding: 0 0 0 20px;}
.step-box .text .desc h4 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 10px 0; letter-spacing: 0.04em; line-height: 1.2;}
.step-box .text .desc p { font-size: 16px; color: var(--teal-dark); margin: 0 0 10px 0;}
.step-box .text .desc ul { margin: 20px 0 30px 0;}
.step-box .text .desc ul li { font-size: 16px; color: var(--teal-dark); position: relative; padding: 0; margin: 0; display: flex; align-items: center;}
.step-box .text .desc ul li::before { content: "\F272"; font-family: "Bootstrap-icons"; color: #025A67; margin: 0 5px 0 0;}
.step-box .text .desc p strong { font-weight: 500; color: var(--teal-color); margin: 20px 0 0 0;}

@media (min-width: 768px) {
.step-box:nth-child(2) .text { order: 1;}
.step-box:nth-child(2) .image { order: 2;}
}

.pricing { padding: 100px 0 200px 0; position: relative;}
.pricing .sec-info { margin: 0 0 80px 0; text-align: center;}
.pricing .sec-content { display: flex; justify-content: space-between; padding: 0 10%;}
.pricing .box { width: 50%; padding: 10px 0;}
.pricing .box:first-child { border-right: 1px solid rgba(9, 60, 19, 0.19);}
.pricing .box:last-child { padding: 10px 0 10px 15%;}
.pricing .box p { font-size: 16px; color: var(--teal-dark); margin: 0 0 30px 0;}
.pricing .box ul { margin: 0;}
.pricing .box ul li { width: 100%;}

.pricing .lines { position: absolute; left: 0; bottom: 0; width: 100%; height: 78px;}
.pricing .lines ul li:first-child { background-image: linear-gradient(to left, #FDD6D1, #FDD6D1); height: 10px;}
.pricing .lines ul li:nth-child(2) { background-image: linear-gradient(to left, #F0D5D1, #E4C0BB); height: 12px;}
.pricing .lines ul li:nth-child(3) { background-image: linear-gradient(to left, #EFD4D1, #928495, #B1A387); height: 16px;}
.pricing .lines ul li:nth-child(4) { background-image: linear-gradient(to left, #EFD5D1, #928495, #8D855C); height: 19px;}
.pricing .lines ul li:last-child { background-image: linear-gradient(to left, #EFD5D1, #928495, #686531); height: 22px;}

.pricing.highlight { background: var(--teal-dark); transition: background 1s;}
.pricing.highlight .sec-label { background: var(--teal-primary);}
.pricing.highlight .sec-info h3 { color: var(--light-gray);}
.pricing.highlight .sec-info p { color: var(--light-gray);}
.pricing.highlight .box p { color: var(--light-gray);}
.pricing.highlight .box ul li { color: var(--light-gray);}
.pricing.highlight .box:first-child { border-right: 1px solid #093C43;}
.pricing.highlight .lines ul li:first-child { background: #02292E;}
.pricing.highlight .lines ul li:nth-child(2) { background-image: linear-gradient(to left, #0F2A2E, #1B4045);}
.pricing.highlight .lines ul li:nth-child(3) { background-image: linear-gradient(to left, #0F2A2E, #64745D, #4D5B78);}
.pricing.highlight .lines ul li:nth-child(4) { background-image: linear-gradient(to left, #0F2A2E, #768370, #727AA3);}
.pricing.highlight .lines ul li:last-child { background-image: linear-gradient(to left, #0F2A2E, #8A9783, #979ACF);}

.media-creation { background: var(--light-gray);}
.media-creation .sec-info { margin: 0 0 100px 0; text-align: center;}
.media-creation .media-box { display: flex; justify-content: space-between; align-items: center; margin: 0 0 100px 0;}
.media-creation .media-box:last-child { margin: 0;}
.media-creation .media-box .image { width: 55%;}
.media-creation .media-box .text { width: 40%;}
.media-creation .media-box .text h4 { font-size: 32px; font-weight: 300;}
.media-creation .media-box .text ul { margin: 20px 0 30px 0;}
.media-creation .media-box .text ul li { font-size: 16px; color: var(--teal-dark); position: relative; padding: 0; margin: 0; display: flex; align-items: center; letter-spacing: 0.04em; line-height: 1.3;}
.media-creation .media-box .text ul li::before { content: "\F272"; font-family: "Bootstrap-icons"; margin: 0 5px 0 0; color: #025A67;}

.snapshot .sec-inner { display: flex; justify-content: space-between; align-items: flex-start;}
.snapshot .sec-info { width: 40%;}
.snapshot .sec-info ul li { font-size: 16px; color: var(--teal-dark); position: relative; padding: 0; margin: 0; display: flex; align-items: flex-start; letter-spacing: 0.04em; line-height: 1.3;}
.snapshot .sec-info ul li::before { content: "\F272"; font-family: "Bootstrap-icons"; margin: 0 5px 0 0;}
.snapshot .sec-content { width: 55%;}
.snapshot .images { display: flex; flex-direction: column-reverse; align-items: flex-start;}

.snapshot.green { background: var(--teal-primary);}
.snapshot.green .sec-info h2, .snapshot.green .sec-info p, .snapshot.green .sec-info ul li { color: var(--light-gray);}
.snapshot.green.highlightLight { background: white;}
.snapshot.green.highlightLight .sec-info .sec-label { background: var(--biege-primary);}
.snapshot.green.highlightLight .sec-info h2, .snapshot.green.highlightLight .sec-info p, .snapshot.green.highlightLight .sec-info ul li { color: var(--teal-dark);}

.optimisation { background: var(--light-gray);}
.optimisation .sec-content ul li { width: 30%; padding: 0 40px;}

/***********************************/
/* Ad Formats */
/***********************************/
.hero-ad-formats { background: var(--teal-dark);}
.hero-ad-formats .hero-content { padding: 120px 0 150px;}
.hero-ad-formats .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.hero-ad-formats .mesh.one { position: absolute; left: -15%; top: -30%; width: 685px; height: 711px; background: linear-gradient(to bottom, #FFB060, #012B31); border-radius: 50%; filter: blur(200px); animation: float1 5s ease-in-out infinite alternate; opacity: 0.6; z-index: 1;}
.hero-ad-formats .mesh.two { position: absolute; left: 15%; top: 0; width: 731px; height: 718px; background: linear-gradient(to bottom, #CDEED3, #83DBE7, #012B31); transform: rotate(20deg); border-radius: 30%; filter: blur(160px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.6; z-index: 2;}
.hero-ad-formats .mesh.three { position: absolute; right: 0; top: -10%; width: 984px; height: 850px; background: linear-gradient(to top, #CDEED3, #948DFF); transform: rotate(5deg); border-radius: 30%; filter: blur(160px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.6; z-index: 2;}

@keyframes float1 {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(60px, -20px); }
  50%  { transform: translate(120px, -60px); }
  75%  { transform: translate(100px, -100px); }
  100% { transform: translate(160px, -140px); }
}

@keyframes float2 {
  0%   { transform: translate(0px, 0px); }
  20%  { transform: translate(-100px, 50px); }
  45%  { transform: translate(-180px, 120px); }
  70%  { transform: translate(-220px, 200px); }
  100% { transform: translate(-280px, 250px); }
}

@keyframes float3 {
  0%   { transform: translate(0px, 0px); }
  30%  { transform: translate(80px, -100px); }
  55%  { transform: translate(140px, -160px); }
  80%  { transform: translate(180px, -220px); }
  100% { transform: translate(200px, -270px); }
}


.hero-ad-formats .caption p { color: var(--light-gray); margin: 50px 0;}
.ad-formats { background: var(--light-gray);}
.ad-formats .sec-content ul li { width: 20%;}
.ad-formats .sec-content ul li span { display: flex; justify-content: center; height: 60px;}
.ad-formats .sec-content ul li h4 { font-size: 18px; font-weight: 300; margin: 0 0 5px 0;}
.ad-formats .sec-content ul li p { font-size: 14px;}


.slides-ad-formats.highlight { background: var(--teal-primary);}
.slides-ad-formats.highlight .sec-label  { background: var(--teal-dark);}
.slides-ad-formats.highlight .sec-info h2  { color: var(--light-gray);}
.slides-ad-formats.highlight .sec-info p  { color: var(--light-gray);}

.ads-run { background: var(--light-gray);}
.ads-run .sec-info { margin: 0 0 80px 0;}
.ads-run .sec-content { padding: 0 5%;}
.custom-tabs { display: flex; flex-direction: column;}
.tab-bar { display: flex; justify-content: center;}
.tab-bar a { font-size: 14px; font-weight: 500; color: var(--teal-light); text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border-bottom: 2px solid #E5E5E5;}
.tab-bar a:hover { color: var(--teal-dark);}
.tab-bar a.active { border-bottom: 2px solid transparent; border-image: linear-gradient(to right, #328C9D, #8C89FB, #DC8785); border-image-slice: 2;}
.tab-content { padding: 80px 0;}
.tab-block.active { display: flex;}
.ads-tab { display: flex; justify-content: space-between; margin: 0;}
.ads-tab .text { width: 45%; padding: 50px 0 0;}
.ads-tab .text h4 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 20px 0;}
.ads-tab .text p { font-size: 16px; color: var(--teal-dark); margin: 0 0 30px 0;}
.ads-tab .text ul {margin: 0 0 30px 0;}
.ads-tab .text ul li { font-size: 16px; color: var(--teal-dark); position: relative; display: flex;}
.ads-tab .text ul li::before { content: "\F272"; font-family: "Bootstrap-icons"; margin: 0 5px 0 0; color: #025A67;}
.ads-tab .text .logos { display: flex; align-items: center;}
.ads-tab .text .logos img { margin: 0 20px 0 0;}
.ads-tab .text .logos img:last-child { margin: 0;}
.ads-tab .image { width: 50%;}

/***********************************/
/* Success Stories */
/***********************************/
.hero-success-stories { background: #F2EFE6; position: relative; overflow: hidden;}
.hero-success-stories::after { content: ""; position: absolute; right: 0; top: 0; width: 940px; height: 906px; background: url("../img/hero-success-stories.svg") bottom right no-repeat;}
.hero-success-stories header .menu-item a { color: #000000;}
.hero-success-stories header .menu-item:hover a, .hero-success-stories header .menu-item.active a { color: #000000;}
.hero-success-stories .sec-inner { display: flex;}
.hero-success-stories .caption { padding: 50px 0;}
.hero-success-stories .caption h1 { color: #000;}
.hero-success-stories .caption p { font-family: "PP Radio Grotesk"; font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 40px 0 60px 0; letter-spacing: 0.04em; line-height: 1.2;}
.hero-success-stories .caption .btn-teal { background: #16646F;}

.case-studies { background: var(--teal-primary);}
.case-studies .sec-info { text-align: center;}
.case-tab { display: flex; justify-content: space-between; margin: 0;}
.case-tab .text { width: 45%; padding: 50px 0 0;}
.case-tab .text h4 { font-size: 24px; font-weight: 300; color: var(--light-gray); margin: 0 0 30px 0;}
.case-tab .text p { font-size: 16px; color: var(--light-gray); margin: 0 0 30px 0;}
.case-tab .text ul { display: flex; flex-wrap: wrap; margin: 0 0 30px 0;}
.case-tab .text ul li { width: 50%; padding: 0 10px 0 0; margin: 0 0 20px 0;}
.case-tab .text ul li h5 { font-size: 18px; font-weight: 300; color: #7FD4E0; margin: 0 0 5px 0;}
.case-tab .text ul li p { font-size: 16px; font-weight: 300; font-weight: 300; color: var(--light-gray);}
.case-tab .text .logos { display: flex; align-items: center;}
.case-tab .text .logos img { margin: 0 20px 0 0;}
.case-tab .text .logos img:last-child { margin: 0;}
.case-tab .image { width: 50%;}
.case-tab .image img { width: 100%;}
.case-studies .custom-tabs { margin: 100px 0 0 0;}
.case-studies .tab-bar a { font-family: "PP Radio Grotesk"; color: #7FD4E0; border-bottom-color: #7FD4E040; letter-spacing: 0.16em; line-height: 1.2;}


/***********************************/
/* About Us */
/***********************************/
.hero-about { position: relative; overflow: hidden;}
.hero-about .meshes { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.hero-about .mesh.one { position: absolute; right: -13%; bottom: 0; width: 929px; height: 803px; background-image: linear-gradient(to top, #CDEED3, #948DFF); transform: rotate(10deg); border-radius: 50%; filter: blur(200px); opacity: 0.45;}
.hero-about .mesh.two { position: absolute; right: -20%; bottom: -10%; width: 587px; height: 543px; background-image: linear-gradient(to right, #FFB060, #012B31); transform: rotate(-25deg); border-radius: 50%; filter: blur(200px); opacity: 0.71;}

.hero-about .caption { text-align: center;}
.hero-about .caption h1 { color: var(--purple-primary);}
.hero-about .caption p { font-size: 16px; color: var(--light-gray); line-height: 24px; margin: 40px 0 100px 0;}
.hero-about .images { display: flex; justify-content: space-between; gap: 20px;}
.hero-about .images img { width: 100%; object-fit: cover;}
.hero-about .sec-info { margin: 100px 0 0 0; padding: 0 0 0 100px;}
.hero-about .sec-info .sec-label { background: #04333A;}
.hero-about .sec-info p { font-size: 40px; line-height: 1.2; color: var(--biege-primary); margin: 30px 0 0 0;}
.meet-team { background: var(--light-gray); padding: 150px 0;}
.meet-team .row:first-child { margin-bottom: 80px;}
.team-block { display: flex; gap: 30px;}
.person-box { max-width: 300px;}
.person-box .image { width: 100%; margin: 0 0 10px 0;}
.person-box .image img { width: 100%; object-fit: cover; filter: grayscale(1);}
.person-box:hover .image img { filter: grayscale(0);}
.person-box .text { width: 100%;}
.person-box .text h4 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 10px 0;}
.person-box .text h5 { font-size: 16px; font-weight: 300; color: var(--teal-primary);}

/***********************************/
/* Sustainability Page */
/***********************************/

.hero-sustain { position: relative; height: 96vh; max-height: 800px;}
.hero-sustain .caption h1 { color: var(--green-primary);}
.hero-sustain .caption p { color: var(--light-gray); margin: 40px 0 80px 0;}
.hero-sustain .cta .btn-purple-outline { color: #CECBFF;}
.hero-sustain .lines { position: absolute; left: 0; bottom: 0; width: 100%; height: 221px; display: flex; flex-direction: column; justify-content: flex-end;}
.hero-sustain .lines ul { width: 100%;}
.hero-sustain .lines ul li { width: 100%; transition: height 0.6s ease;}
.hero-sustain .lines ul li:first-child { height: 24px; background: #083238;}
.hero-sustain .lines ul li:nth-child(2) { height: 24px; background-image: linear-gradient(to left, #0F2A2E, #1B4045);}
.hero-sustain .lines ul li:nth-child(3) { height: 24px; background-image: linear-gradient(to left, #0F2A2E, #64745D, #4D5B78);}
.hero-sustain .lines ul li:nth-child(4) { height: 24px; background-image: linear-gradient(to left, #0F2A2E, #768370, #727AA3);}
.hero-sustain .lines ul li:nth-child(5) { height: 24px; background-image: linear-gradient(to left, #0F2A2E, #8A9783, #8A9783, #979ACF);}
.hero-sustain .lines ul li:nth-child(6) { height: 22px; background-image: linear-gradient(to left, #0F2A2E, #9CB293, #9CB293, #9CB293, #B1B1F1);}
.hero-sustain .lines ul li:nth-child(7) { height: 20px; background-image: linear-gradient(to left, #0F2A2E, #8A9783, #8A9783, #979ACF);}
.hero-sustain .lines ul li:nth-child(8) { height: 18px; background-image: linear-gradient(to left, #0F2A2E, #768370, #768370, #979ACF);}
.hero-sustain .lines ul li:nth-child(9) { height: 15px; background-image: linear-gradient(to left, #0F2A2E, #64745D, #979ACF);}
.hero-sustain .lines ul li:nth-child(10) { height: 14px; background-image: linear-gradient(to left, #0F2A2E, #1B4045, #4D5B78);}
.hero-sustain .lines ul li:last-child { height: 12px; background: #083238;}

.commitment { background: var(--teal-primary); padding: 150px 0; position: relative; overflow: hidden;}
.commitment .meshes { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.commitment .mesh.one { position: absolute; left: -10%; top: 30%; width: 587px; height: 543px; background-image: linear-gradient(to bottom, #DEFF9C, #012B31); transform: rotate(5deg); border-radius: 50%; filter: blur(200px); opacity: 0.71; animation: float1 5s ease-in-out infinite alternate;}
.commitment .mesh.two { position: absolute; left: -10%; top: 40%; width: 761px; height: 704px; background-image: linear-gradient(to right, #FFB060, #012B31); transform: rotate(-25deg); border-radius: 50%; filter: blur(200px); opacity: 0.71; animation: float2 5s ease-in-out infinite alternate;}
.commitment .mesh.three { position: absolute; right: -10%; top: 00%; width: 929px; height: 803px; background-image: linear-gradient(to bottom, #CDEED3, #948DFF); transform: rotate(10deg); border-radius: 50%; filter: blur(200px); opacity: 0.45; background-blend-mode: overlay; animation: float3 5s ease-in-out infinite alternate;}
.commitment .mesh.four { position: absolute; right: -10%; top: 30%; width: 587px; height: 543px; background-image: linear-gradient(to right, #DEFF9C, #012B31); transform: rotate(-10deg); border-radius: 50%; filter: blur(200px); opacity: 0.71; animation: float1 5s ease-in-out infinite alternate;}
.commitment .container { position: relative; z-index: 2;}
.commitment .sec-inner { padding: 0 5%;}
.commitment .sec-content { display: flex; flex-direction: column;}
.commitment .text { width: 50%; color: var(--light-gray); line-height: 1.2;}
.commitment .text:last-child { width: 40%;}
.commitment .text h3 { font-size: 40px; font-weight: 300; color: var(--light-gray); line-height: 1.2; letter-spacing: 0.04em;}
.commitment .text p { font-size: 24px; font-weight: 300; color: #E9E3D5;}
.commitment .text:last-child { margin: 0 0 0 auto;}
.commitment .shape { margin: 50px auto;}

.alignment { background: var(--light-gray);}
.alignment .sec-info { margin: 0 0 50px 0; text-align: center;}
.alignment .sec-content { padding: 0 7%;}
.info-box { display: flex; justify-content: space-between; align-items: center; margin: 0;}
.info-box .image { width: 45%;}
.info-box .image img { width: 100%;}
.info-box .text { width: 55%; padding: 0 0 0 100px;}
.info-box .text h4 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 20px 0;}
.info-box .text p { font-size: 16px; color: var(--teal-dark); margin: 0 0 30px 0;}
.info-box .text ul {margin: 0 0 30px 0;}
.info-box .text ul li { font-size: 16px; color: var(--teal-dark); position: relative;}

.our-partners { background: white;}

.off-carousel .sec-inner { display: flex; gap: 50px; padding: 0 0 0 17%;}
.off-carousel .sec-info { width: 25%;}
.off-carousel .sec-content { width: 75%;}
.carousel-row { width: 100%; display: flex; flex-wrap: wrap;}
.carousel-card { width: 100%; position: relative;}
.carousel-card .image { z-index: 0;}
.carousel-card .image::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.5); z-index: 1;}
.carousel-card .text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 40px 20px; z-index: 2;}
.carousel-card .text h3 { font-size: 24px; color: var(--light-gray); margin: 0 0 20px 0;}
.carousel-card .text ul li { color: var(--light-gray);}

/***********************************/
/* Blog Page */
/***********************************/

.hero-blog { background-position: center center; background-repeat: no-repeat; background-size: cover;}
.hero-blog::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.63);}
.hero-blog .hero-content { padding: 100px 0;}
.post-meta { width: 60%; margin: 25% 0 0 0; position: relative; z-index: 2;}
.post-meta .cats { margin: 0 0 20px 0;}
.post-meta .cats a { font-size: 12px; color: var(--light-gray); text-transform: uppercase; margin: 0 10px 0 0;}
.post-meta .title { display: block; font-family: "PP Radio Grotesk"; font-size: 64px; line-height: 1.2; color: var(--light-gray); margin: 0 0 40px 0;}
.post-meta .learn-more { display: inline-block; font-size: 16px; color: var(--light-gray); border-bottom: 1px solid var(--light-gray);}
.post-meta .learn-more::after { content: "\F285"; font-family: "Bootstrap-icons"; padding: 0; font-size: 12px; margin: 0 0 0 4px;}
.posts { display: flex; flex-wrap: wrap; gap: 20px;}
.posts .heading { width: 100%; margin: 0 0 20px 0;}
.post-block { width: 23%; margin: 0 0 20px 0;}
.post-block .image { width: 100%; margin: 0 0 20px 0;}
.post-block .image img { width: 100%; height: 350px; object-fit: cover;}
.post-block .text { width: 100%;}
.post-block .text .title { display: block; font-family: "PP Radio Grotesk"; font-size: 21px; color: var(--teal-dark); line-height: 1.3; margin: 0 0 10px 0;}
.post-block .text .desc { font-size: 14px; color: var(--teal-dark);}
.top-posts { margin: 0 0 100px 0;}
.top-posts .post-block .text .title { font-size: 24px;}
.top-posts .post-block:first-child { width: 50%;}
.top-posts .post-block:first-child img { height: 440px;}
.posts-head { display: flex; flex-wrap: wrap; margin: 0 0 60px 0;}
.posts-head .heading { width: 100%; margin: 0 0 30px 0;}
.posts-head .heading h2 { font-size: 52px; color: var(--teal-dark);}
.posts-head .categories { display: flex; align-content: center;}
.posts-head .categories a { font-size: 16px; color: var(--teal-dark); margin: 0 20px 0 0; display: flex; align-items: center; opacity: 0.5;}
.posts-head .categories a:hover, .posts-head .categories a.active { color: #16646F; opacity: 1;}
.posts-head .categories a.active::before { content: ""; width: 4.23px; height: 4.23px; display: inline-block; background: #16646F; border-radius: 5px; margin: 0 10px 0 0;}
.posts-head .filter { display: flex; align-items: center; margin: 0 0 0 auto;}
.posts-head .filter label { white-space: nowrap; font-size: 16px; margin: 0 10px 0 0;}
.posts-head .filter select { border: none;}
.posts-pagination { margin: 60px 0; text-align: center;}
.posts-pagination .page-numbers { font-size: 14px; color: var(--teal-dark); border: none; margin: 0 5px; padding: 5px 10px;}
.posts-pagination .page-numbers.current { border-bottom: 1px solid #333; background: none;}
.posts-pagination .page-numbers:focus { box-shadow: none; outline: none;}

.hero-blog-detail { overflow: visible;}
.post-top { background: var(--teal-dark); display: flex; padding: 0;}
.post-top .left { width: 50%; display: flex; align-items: flex-end; padding: 100px 8%;}
.post-top .post-meta { width: 100%;}
.post-top .right { width: 50%;}
.post-top .feat-img { width: 100%;}
.post-top .feat-img img { width: 100%; height: 90vh; object-fit: cover;}

.post-detail { padding: 0 20%; margin: 0 0 150px 0;}
.post-detail h2, .post-detail h3, .post-detail h3, .post-detail h4, .post-detail h5 { margin: 0 0 20px 0; font-weight: 300;}
.post-detail h2 { font-size: 24px;}
.post-detail h3 { font-size: 21px;}
.post-detail h4 { font-size: 19px;}
.post-detail h5 { font-size: 18px;}
.post-detail p { font-size: 16px; line-height: 24px; color: var(--teal-dark); margin: 0 0 20px 0;}
.post-detail ul { list-style-type: disc; list-style-position: outside; padding: 0 0 0 30px; margin: 20px 0;}
.post-detail ul li, .post-detail ol li { font-size: 16px; line-height: 24px; color: var(--teal-dark); margin: 0 0 20px 0;}
.post-tags a { color: var(--teal-dark);}
.post-caption { margin: 20px 0; text-align: center;}
.post-caption img { width: 100%; margin: 0 0 10px 0;}
.post-caption span { font-size: 14px;}
.post-share { margin: 100px 0 0 0;}
.post-share h5 { font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 10px 0;}
.post-share .social { display: flex;}
.post-share .social a { margin: 0 20px 0 0;}
.similar-posts .heading h3 { font-size: 40px; font-weight: 300; text-align: center;}

/***********************************/
/* Resources Page */
/***********************************/

.hero-resources { position: relative; overflow: hidden;}
.hero-resources .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.hero-resources .mesh.one { position: absolute; left: -15%; top: -30%; width: 685px; height: 711px; background: linear-gradient(to bottom, #FFB060, #012B31); border-radius: 50%; filter: blur(200px); animation: float1 5s ease-in-out infinite alternate; opacity: 0.7; z-index: 1;}
.hero-resources .mesh.two { position: absolute; left: 15%; top: 0; width: 731px; height: 718px; background: linear-gradient(to bottom, #CDEED3, #83DBE7, #012B31); transform: rotate(20deg); border-radius: 30%; filter: blur(160px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.8; z-index: 2;}
.hero-resources .mesh.three { position: absolute; right: 0; top: -10%; width: 984px; height: 850px; background: linear-gradient(to top, #CDEED3, #948DFF); transform: rotate(5deg); border-radius: 30%; filter: blur(160px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.8; z-index: 2;}

.hero-resources .hero-content { padding: 120px 0 150px; text-align: center;}
.hero-resources .caption h1 { font-size: 90px;}
.hero-resources .caption p { font-size: 21px; line-height: 28px; color: var(--light-gray); margin: 40px 0 0 0;}
.resources .sec-content { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 0 7%;}
.resources .box { width: 48%; background: #eee; padding: 80px 40px; background-size: auto 100% !important;}
.resources .box:last-child { width: 98%;}
.resources .box h3 { font-size: 24px; font-weight: 300; color: var(--teal-dark); margin: 0 0 20px 0;}
.resources .box p { font-size: 14px; color: var(--teal-dark); margin: 0 0 20px 0;}
.resources .box .highlight { color: var(--teal-dark);}
.resources .box .btn { margin: 20px 0 0 0;}
.resources .box.teal { background: url("../img/resources-box-img1.png") right top no-repeat var(--teal-dark);}
.resources .box.teal * { color: var(--light-gray);}
.resources .box.teal .highlight { color: var(--green-primary);}
.resources .box.purple { background: url("../img/resources-box-img2.png") right bottom no-repeat var(--purple-primary);}
.resources .box.purple .highlight { color: #3D3D5D;}
.resources .box.green { background: url("../img/resources-box-img3.png") right bottom no-repeat #ACCAB1;}
.resources .box.green .highlight { color: #1F4125;}
.resources .box.peach { background: url("../img/resources-box-img4.png") right bottom no-repeat var(--peach-primary);}
.resources .box.teal:last-child { background: url("../img/resources-box-img5.png") right bottom no-repeat var(--teal-light);}

/***********************************/
/* FAQs Page */
/***********************************/

.hero-faqs { background: var(--biege-primary);}
.hero-faqs { position: relative; overflow: hidden;}
.hero-faqs .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.hero-faqs .mesh.one { position: absolute; left: -15%; top: -30%; width: 685px; height: 711px; background: linear-gradient(to bottom, #FFB060, #012B31); border-radius: 50%; filter: blur(200px); animation: float1 5s ease-in-out infinite alternate; opacity: 0.53; z-index: 1;}
.hero-faqs .mesh.two { position: absolute; left: 15%; bottom: -120%; width: 731px; height: 718px; background: linear-gradient(to bottom, #CDEED3, #83DBE7, #012B31); transform: rotate(20deg); border-radius: 30%; filter: blur(160px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.8; z-index: 2;}
.hero-faqs .mesh.three { position: absolute; right: 0; top: -10%; width: 984px; height: 850px; background: linear-gradient(to top, #CDEED3, #948DFF); transform: rotate(5deg); border-radius: 30%; filter: blur(160px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.53; z-index: 2;}
.hero-faqs .navbar-nav .menu-item a { color: #000;}
.hero-faqs .caption { text-align: center;}
.hero-faqs .caption h1 { font-size: 90px; color: var(--teal-dark);}
.hero-faqs .caption p { font-size: 21px; color: var(--teal-dark); margin: 50px 0 0;}

.faqs .sec-info { text-align: center; margin: 0 0 80px 0;}
.faqs .sec-info .buttons .btn { margin: 0 5px;}
.faqs .sec-info .buttons .btn.active { background: var(--teal-dark); color: white;}
.faqs .sec-content { display: flex; justify-content: space-between; padding: 0 10%;}
.faqs .types { width: 30%; margin: 20px 0 0 0;}
.faqs .types a { display: flex; align-items: center; font-size: 14px; color: var(--teal-dark); padding: 5px 0; position: relative; opacity: 0.5;}
.faqs .types a:hover, .faqs .types a.active { color: #16646F; opacity: 1;}
.faqs .types a.active::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 5px; background: var(--teal-color); margin: 0 10px 0 0;}
.faqs .accordion { width: 65%;}

/***********************************/
/* Book a Demo Page */
/***********************************/

.hero-book-demo { background: var(--teal-dark); overflow: visible;}
.book-demo { background: var(--teal-dark); padding: 100px 0 400px 0; position: relative;}
.book-demo .lines { position: absolute; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.book-demo .lines ul { width: 100%;}
.book-demo .lines ul li { width: 100%; height: 24px;}
.book-demo .lines ul li:first-child { background: #083238;}
.book-demo .lines ul li:nth-child(2) { background-image: linear-gradient(to left, #0F2A2E, #1B4045);}
.book-demo .lines ul li:nth-child(3) { background-image: linear-gradient(to left, #0F2A2E, #64745D, #4D5B78);}
.book-demo .lines ul li:nth-child(4) { background-image: linear-gradient(to left, #0F2A2E, #768370, #727AA3);}
.book-demo .lines ul li:nth-child(5) { background-image: linear-gradient(to left, #0F2A2E, #8A9783, #979ACF);}
.book-demo .lines ul li:last-child { background-image: linear-gradient(to left, #0F2A2E, #9CB293, #B1B1F1);}
.book-demo .sec-content { display: flex; justify-content: space-between;}
.book-demo .book-info { width: 55%;}
.book-demo .book-info h1 { font-size: 52px; font-weight: 300; line-height: 1.2; color: var(--light-gray); margin: 0 0 30px 0;}
.book-demo .book-info p { font-size: 16px; color: var(--light-gray); margin: 0 0 30px 0;}
.book-demo .book-info ul { margin: 0 0 30px 0;}
.book-demo .book-info ul li { font-size: 16px; color: var(--light-gray);}
.book-demo .quotes { width: 70%; margin: 120px 0 0 0; padding: 40px 0 0 0; position: relative;}
.book-demo .quotes::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 25px; background: url("../img/icon-qoute.svg") center center no-repeat; background-size: cover;}
.book-demo .quotes p { font-size: 21px; color: var(--green-primary); margin: 0 0 10px 0;}
.book-demo .quotes span { font-size: 14px; color: var(--green-primary);}
.book-demo .trusted { background: #00000030; padding: 20px; border-radius: 10px; margin: 100px 0 0 0; display: none;}
.book-demo .trusted h4 { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.55); margin: 0 0 20px 0;}
.book-demo .trusted .logos { display: flex; justify-content: space-between; align-items: center; margin: 0;}
.book-demo .trusted .logos img { transform: scale(0.8); margin: 0 20px 0 -10px;}
.book-demo .trusted .logos img:last-child { margin: 0;}
.book-info.mobile { display: none;}

.book-demo .book-form { width: 40%; background: #032C32; padding: 30px 60px; border-radius: 10px;}
.form-label { font-size: 12px; color: white;}
.wpcf7-list-item { font-size: 12px; color: white; margin: 0 10px 0 0;}
.wpcf7-list-item label { display: flex; align-items: center;}
.wpcf7-list-item label input { margin: 0 5px 0 0;}
.form-control { font-size: 12px; border-color: #DCD3CC40 !important; padding: 8px 20px;}
.form-control::placeholder { font-size: 12px; color: #FFFFFF50;}
.form-check-input, .wpcf7-list-item label input { background: transparent;}
.form-check-input:checked, .wpcf7-list-item label input:checked { background: var(--teal-color); border-color: var(--teal-color);}
.form-check-label { font-size: 12px; color: #FFFFFF;}
.wpcf7-response-output { color: white;}
.wpcf7 form.sent .wpcf7-response-output { color: white;}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { color: white;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .pcf7-response-output { font-size: 14px; color: var(--light-gray); margin: 0 0 20px 0;}
.wpcf7 form .wpcf7-response-output { margin: 0 0 20px 0;}
.wpcf7-not-valid-tip { color: red;}
.es_subscription_message { font-size: 12px;}



/***********************************/
/* Legal/Text Page */
/***********************************/

.hero-legal { background: white; overflow: visible;}
.hero-legal .navbar-nav .menu-item a { color: #000;}
.text-page .sec-content { padding: 0 20%;}
.text-page h1, .text-page h2, .text-page h3, .text-page h4, .text-page h5 { font-size: 52px; font-weight: 700; margin: 0 0 20px 0; font-weight: 300; color: var(--teal-dark);}
.text-page h2 { font-size: 32px;}
.text-page h3 { font-size: 32px;}
.text-page h4 { font-size: 24px;}
.text-page p { font-size: 16px; color: var(--teal-dark); margin: 0 0 20px 0;}
.text-page ul { list-style-type: disc; list-style-position: outside; padding: 0 0 0 20px; margin: 0 0 20px 0;}
.text-page ul li { font-size: 16px; color: var(--teal-dark); margin: 0 0 10px 0;}
.text-page .btn { margin: 0 10px 20px 0;}

/***********************************/
/* Misc Pages */
/***********************************/

.hero-not-found { position: relative; overflow: hidden;}
.hero-not-found .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.hero-not-found .mesh.one { position: absolute; left: -45%; top: -90%; width: 1258px; height: 1087px; background: linear-gradient(to bottom, #CDEED3, #948DFF); transform: rotate(20deg); border-radius: 50%; filter: blur(200px); animation: float1 5s ease-in-out infinite alternate; opacity: 0.33; z-index: 1;}
.hero-not-found .mesh.two { position: absolute; left: 35%; bottom: -110%; width: 1258px; height: 1087px; background: linear-gradient(to bottom, #CDEED3, #83DBE7, #012B31); transform: rotate(20deg); border-radius: 30%; filter: blur(160px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.33; z-index: 2;}
.hero-not-found .mesh.three { position: absolute; right: -20%; top: -40%; width: 587px; height: 543px; background: linear-gradient(to top, #FFB060, #012B31); transform: rotate(5deg); border-radius: 30%; filter: blur(160px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.69; z-index: 2;}
.hero-not-found .caption { text-align: center; padding: 100px 0;}
.hero-not-found .caption h1 { font-size: 120px; color: var(--purple-light); font-weight: 300; margin: 0 0 60px 0;}
.hero-not-found .caption p { font-size: 32px; color: var(--purple-light); font-weight: 300; margin: 0 0 60px 0;}

.hero-thank-you { position: relative; overflow: hidden;}
.hero-thank-you .meshes { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
.hero-thank-you .mesh.one { position: absolute; left: -45%; top: -90%; width: 1258px; height: 1087px; background: linear-gradient(to bottom, #CDEED3, #948DFF); transform: rotate(20deg); border-radius: 50%; filter: blur(200px); animation: float1 5s ease-in-out infinite alternate; opacity: 0.33; z-index: 1;}
.hero-thank-you .mesh.two { position: absolute; left: 35%; bottom: -110%; width: 1258px; height: 1087px; background: linear-gradient(to bottom, #CDEED3, #83DBE7, #012B31); transform: rotate(20deg); border-radius: 30%; filter: blur(160px); animation: float2 5s ease-in-out infinite alternate; opacity: 0.33; z-index: 2;}
.hero-thank-you .mesh.three { position: absolute; right: -20%; top: -40%; width: 587px; height: 543px; background: linear-gradient(to top, #FFB060, #012B31); transform: rotate(5deg); border-radius: 30%; filter: blur(160px); animation: float3 5s ease-in-out infinite alternate; opacity: 0.69; z-index: 2;}
.hero-thank-you .caption { text-align: center; padding: 100px 0;}
.hero-thank-you .caption h1 { font-size: 120px; color: var(--green-primary); font-weight: 300; margin: 0 0 60px 0;}
.hero-thank-you .caption p { font-size: 32px; color: var(--green-primary); font-weight: 300; margin: 0 0 60px 0;}

.hero-howitworks .navbar-nav .menu-item.dropdown::after,
.hero-success-stories .navbar-nav .menu-item.dropdown::after,
.hero-faqs .navbar-nav .menu-item.dropdown::after,
.hero-legal .navbar-nav .menu-item.dropdown::after { color: var(--teal-dark);}