/* normalizeeeeeeeee*/

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: 'Roboto', sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  color: #1b1b1b;
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
}

*, *:before, *:after {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
  text-decoration: none;
}


/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}


/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
	.not-ios {
		display: none!important;
	}
	.ios {
		display: block;
	}	
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */
	.not-ios {
		display: block;
	}
	.ios {
		display: none!important;
	}
}



/* ===== General ===== */


::-moz-selection {
    background-color: #451790;
    color: #ffffff;
}

::-webkit-selection {
    background-color: #451790;
    color: #ffffff;
}

::selection {
    background-color: #451790;
    color: #ffffff;
}

html {
	height: 100%;
}

.flex-wrap {
  flex: 1 1 auto;
}

footer {
  flex: 0 1 40px;
}

body {
	display: flex;
    flex-flow: column;
    height: 100%;
	background: rgb(227,229,255);
    background: linear-gradient(0deg, rgba(235,236,255,1) 0%, rgba(255,255,255,1) 100%);
	background-attachment: fixed;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

h1, h3 {
	font-size: 2.4em;
 	margin: 0.6em 0 1em;
	font-weight: 300;
}

h4 {
	font-size: 1.6em;
	color:#441e9a;
	font-weight: 400;
}

.decorated {
	border-left: 4px solid #8e1ee4;
	padding-left: 14px;
}

h2 {
	font-size: 2.0em;
	font-weight: 300;
	margin: 0.5em 0 1.2em 0;
}

.subbed {
	font-size: 1.6em;
	text-decoration: underline;
}

p, .cs-list li {
	font-size: 1.4em;
	margin: 0.4em 0;
	font-weight: 300;
	color: #454545;
}

li {
	font-size: 1.4em;
	margin: 0.4em 0;
	color: #454545;
	font-weight: 300;
}

ul, ol {
	margin: 30px 0 30px 30px;
}

.cs-list {
	margin: 0 0 0 30px;
}

ol li {
	font-weight: 800;
	
}

ol li span {
	font-weight: 300;
}

.par-margin-fix {
	margin-left: -30px;
}

.bold {
	font-weight: 800;
}

.underline {
	text-decoration:  underline;
}

.center-txt {
	text-align: center;
}

.responsive-img {
    display: block;
    height: auto;
    max-width: 100%;
}

.image-mobile {
	display: none;
}

.linker {
	color: #0034C4;
	font-weight: 400;
	text-decoration: underline;
}

.linker-nice {
	color: #0034C4;
	font-weight: 400;
}

.linker:hover, .linker-nice:hover {
	color: #6291FF;
}

.terms-nav a {
	color: #0034C4;
	font-weight: 400;
	text-decoration: underline;
}

.terms-nav a:hover {
	color: #6291FF;
}

.white-popup {
    position: relative;
    background: #ffffff;
    padding: 20px;
    width: auto;
    max-width: 840px;
    margin: 20px auto;
	border-radius: 10px;
}

.header-wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2px 40px 20px 40px;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px;
}

.white-wrapper{
	max-width: 1200px;
	padding: 40px;
	margin: 30px auto;
}

.purple {
	color: #8e1ee4;
}

canvas{
    position: fixed;
    left: 0;
    top: 0;
    z-index:-1;
	width: 100%;
	height: 100%;
}
/* =============================== HEADER + MENU  =============================== */

header {
	width: 100%;
	background: #0B0B3A;
background: linear-gradient(300deg, rgba(11, 11, 58, 1) 100%, rgba(24, 33, 79, 1) 100%);
	position: relative;
	flex: 0 1 auto;
}
.header-pad {
	padding: 16px 20px 10px 20px;
}
nav {
	position: absolute;
	top: 22px;
	right: 20px;
}
.navlink {
	color: #454545;
	margin: 0 14px;
	font-size: 1em;
}

.navlink:hover {
	color: #454545;
}

.darkened .navlink {
	color: #ffffff;
}

.darkened .navlink:hover {
	color: #bbbbbb;
}

.navbutton {
	color: #454545;
	font-size: 1em;
	padding: 4px 24px;
	border-radius: 4px;
	margin-left: 40px;
	background: none;
	border: 1px solid #454545;
}
.navbutton:hover {
	background: #ffffff;
	color: #454545;
}

.darknavbutton {
	font-size: 1em;
	color: #ffffff;
	margin-left: 40px;
	padding: 6px 2px;
	border-radius: 4px;
	background: rgb(139,47,243);
	background: linear-gradient(90deg, rgba(139,47,243,1) 0%, rgba(20,210,255,1) 100%);
	
}

.darknavbutton span {
	border-radius: 4px;
	padding: 4px 24px;
	background-color: #010f34;
}

.darknavbutton span:hover {
	background: rgb(139,47,243);
	background: linear-gradient(90deg, rgba(139,47,243,1) 0%, rgba(20,210,255,1) 100%);
}

.current {
	border-bottom: 1px solid #ffffff;
}

.current:hover {
	border-bottom: 1px solid #9f9f9f;
}


/* =============================== LP header  =============================== */

.lp-headline {
	color: #ffffff;
	font-weight: bold;
	font-size: 2em;
	margin: 0.4em 0;
}

.lp-sub {
	color: #e86dca;
	font-size: 1.4em;
}

.brain-holder {
	position: relative;
    min-height: 360px;
	max-width: 400px;
	margin: 0 auto;
}

.brain-vid, .ios-brain {
	position: absolute;
	top: 42px;
	width: 280px;
	height: 208px;
	left: calc(50% - 140px);
}

/*
.impulse {
    background-image: url(../images-new/lp-new/impulse.svg);
    background-size: cover;
	background-position: center center;
	margin-top: 10px;
	padding-top: 30px;
}


.impulse-inner {
	background: rgb(1,15,52);
    background: linear-gradient(90deg, rgba(1,15,52,1) 0%, rgba(1,15,52,0) 25%, rgba(1,15,52,1) 50%, rgba(1,15,52,0) 75%, rgba(1,15,52,1) 98%, rgba(1,15,52,1) 100%);
	background-size: 200% 100%;
    animation: gradientAnimation 2s linear infinite;

}

@keyframes gradientAnimation {
	0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
*/

.ben-holder {
	width: 50px;
	position: absolute;
	transform: skewX(-10deg);
	text-align: center;
	margin: -30px auto 0 auto;
}

.ben-holder:hover {
	transform: skewX(-16deg);
}

.ben-holder span {
	color: #ffffff;
	font-size: 0.8em;
}

.benefit {
	display: block;
	width: 60px;
	height: 60px;
	padding: 10px;
	margin-bottom: 4px;
	border-radius: 4px;
	background: rgb(51,240,254);
    background: linear-gradient(136deg, rgba(51,240,254,1) 15%, rgba(63,117,253,1) 50%, rgba(255,127,72,1) 85%);
	box-shadow: 2px 2px 0px 2px rgba(18,76,143,1);
}

.ben-1 {
    top: 70px;
    left: 10px;
}

.ben-2 {
    top: 54px;
    left: 272px;
}

.ben-3 {
    top: 162px;
    left: 324px;
}

.ben-4 {
    top: 276px;
    left: 204px;
}

.ben-5 {
    top: 234px;
    left: 36px;
}

.header-cta {
	display: inline-block;
	background-color: #a531ff;
	color: #ffffff;
	font-size: 1.2em;
	padding: 14px 100px;
	border-radius: 6px;
	margin: 30px 0 30px 0
}

.header-cta:hover {
	background-color: #8e1ee4;
}

.purple-banner{
	background: rgb(1,15,52);
    background: linear-gradient(0deg, rgba(1,15,52,1) 0%, rgba(255,255,255,0) 100%);
	padding: 40px;
}

.white-txt {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.4em;
}

.purple-logos img {
    margin: 20px 20px 0 20px;
}

.infographics {
	position: relative;
	max-width: 993px;
	margin: 0 auto;
	background-image: url("../images-new/lp-new/infograph-2.webp");
	background-size: contain;
	background-repeat: no-repeat;	
}

.infograph-img {
	z-index: 2;
	position: relative;
}

.infograph-inner {
	position: absolute;
	z-index: 1;
	width: 100%;
	height:100%;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-image: url("../images-new/lp-new/infograph-3.webp");
	background-size: contain;
	background-repeat: no-repeat;
    -webkit-animation: reveale-it 6s infinite linear;
		    animation: reveale-it 6s infinite linear;
}

@keyframes reveale-it {
	0% { background-position: 0 0; opacity: 100; }
	99% {  opacity: 100; }
	100% { background-position: 993px 0; opcaity: 0; }
}

.white-back {
	background-color: #ffffff;
}


video {
  	max-width: 100%;
  	height: auto;
}

.flexy {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
	align-items: center;
}

.two {
	display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.two-head {
	display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.flex-column {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
	display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.left-c {
	max-width: 30%;
	padding: 0 20px 0 0;
}

.right-c {
	padding: 0 0 0 20px;
}

.team {
    border-radius: 50%;

}

.left-col {
	padding: 0 20px 0 0;
}

.right-col {
	padding: 0 0 0 20px;
}

.left-col h3, .right-col h3  {
	margin: 0 0 0.6em 0;
	border-left: 4px solid #451790;
    padding-left: 14px;
}

.left-head {
	padding: 0 20px 0 0;
}

.right-head {
	padding: 0 0 0 20px;
}

.imager {
	border-radius: 10px;
}

.left-col img, .left-col video, .right-col img, .right-col video, .image-col img, .image-col video {
    max-width: 400px;
}

.left-col video, .right-col video, .image-col video {
    margin: 0 auto;;
}

.margin-it {
	margin: 20px auto;
}

.bottom-margin {
	margin-bottom: 40px;
}

.mobiler {
	display: none!important;
}

.testimonial-out {
	/* background: url("../images-new/lp-new/blue-back.webp") no-repeat 50% 50% transparent;*/
	background: #1f57a6;
	background: linear-gradient(325deg, rgba(31, 87, 166, 1) 0%, rgba(130, 0, 230, 1) 100%);
}

.testiminner {
	padding: 20px 40px;
	background: url("../images-new/lp-new/quote.webp") no-repeat 30px 30px #ffffff;
	border-radius: 10px;
}

.testimonial h3 {
	text-align: center;
	font-style: italic;
	margin-bottom: 0.5em;
}

.testim-name {
	font-weight: 600;
	font-style: italic;
}

.testim-logo {
	display: block;
	margin-top: 20px;
	height: auto;
    max-width: 100%;
}

.big-cta {
	background-color: #a531ff;
	color: #ffffff;
	display: inline-block;
	padding: 10px 60px;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
}

.big-cta:hover {
	background-color: #8e1ee4;
}

.big-cta .top-line {
	font-size: 2em;
}

.big-cta .bottom-line {
	font-size: 1.2em;
}

.castud {
	border-radius: 0 0 10px 10px;
	padding: 20px 20px 20px 30px;
	background-color: #ffffff;
}

.casetud-head {
	text-align: center;
    display: block;
    background-color: #3c65b1;
    font-size: 2em;
    font-weight: 600;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
}

.case-pad {
	padding: 40px;
}

.chart-holder {
	display: flex;
    flex-direction: nowrap;
    flex-wrap: wrap;
    width: 100%;
}

.rcs-chart {
	padding: 0 10px;
	display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.relativer {
	position: relative;
	height: 200px;
}

.relativer .before {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30%;
	background-color: #cb0027;
}


.relativer .after {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #5b9c52;
}

.before span, .after span {
	position: absolute;
	bottom: 10px;
	color: #ffffff;
	font-weight: 600;
	left: 50%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%)
	}

.chart-red {
	font-size: 1.2em;
	font-weight: 600;
	color: #cb0027;
}

.chart-green {
	font-size: 1.2em;
	font-weight: 600;
	color: #5b9c52;
}

.case-img {
	max-width: 300px!important;
}

.arrow-img {
	padding-top: 10px;
}

.castud h2 {
    font-size: 1.4em;
    font-weight: 300;
    font-style: italic;
    text-align: center;
	margin-bottom: 1em;
}

.bodered-img {
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
}

.procontra-wrapper {
	max-width: 1400px;
	padding: 40px;
	margin: 30px auto;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
}

.procontra-flexy {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.procontra-head {
	font-size: 1.4em;
	text-align: center;
}

.procontra {
	margin: 30px 10px 10px 10px;
	list-style: none;
}
.procontra li {
	font-weight: 300;
	padding: 0 0 10px 40px;
}

.icon-check li {
	background: url('https://visiopt-site.s3.amazonaws.com/lp-images/icon-check.webp') no-repeat;
}

.icon-minus li {
	background: url('https://visiopt-site.s3.amazonaws.com/lp-images/icon-minus.webp') no-repeat;
}

.team-separator {
	height: 2px;
	margin: 40px 0;
	background: #451790;
}

.feature-separator {
	height: 1px;
	margin: 40px 0;
	border: dashed 1px #451790;
}

/* =============================== FOOTER  =============================== */

.footer-wrap {
	width: 1200px;
	margin: 0 auto;
	padding: 30px 40px;
	position: relative;
}

.address {
	color: #ffffff;
	font-size: 1.1em;
	margin-bottom: 40px;
}

.copyr {
	font-size: 1.1em;
	color: #ffffff;
	text-align: center;
}

footer a {
	color: #ffffff;
}

footer a:hover {
	text-decoration: underline;
}
.footer-terms {
	color: #ffffff;
	font-weight: 600;
}

.video-holder {
	margin: 40px auto;
	max-width: 800px;
}

.study-break {
	margin: 20px 0 60px 0;
	height: 4px;
	background-color: #ac7ff4 ;
	border-bottom: 2px solid #451790;
}

.help-flexy {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.help-section {
	display: flex;
    flex-direction: column;
	width: 33.3%;
	padding: 10px;
	text-align: center;
}

.help-section img {
    max-width: 160px;
    width: 100%;
}

.help-section a {
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid transparent;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	display: block;
	padding: 20px;
	height: 100%;
}

.help-section a:hover {
	border: 1px solid #451790;
}

.help-section h3 {
	font-weight: normal;
	font-size: 1.4em;
	color: #454545;
	margin-bottom: 10px;
}

.help-navbutton {
	display: inline-block;
	color: #ffffff;
	font-size: 1em;
	padding: 8px 24px;
	border-radius: 6px;
	background-color: #a531ff;
	margin-bottom: 20px;
}
.help-navbutton:hover {
	background: #8e1ee4;
}

.video-list {
	background-color: #ffffff;
	border-radius: 10px;
	max-width: 800px;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%)
}

.video-list h4 {
	display: block;
	padding: 10px;
	color: #ffffff;
	background: #999999;
	border-bottom: 1px solid #cccccc;
}

.video-list h4:first-child {
	border-radius: 10px 10px 0 0;
}

.play-vid {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("../images-new/vid-play.webp") no-repeat scroll 8px 8px transparent;
}

.play-pdf {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("../images-new/pdf-play.webp") no-repeat scroll 8px 8px transparent;
}

.play-page {
	display: block;
	padding: 10px 10px 10px 40px;
	color: #454545;
	border-bottom: 1px solid #cccccc;
	background: url("../images-new/page-play-1.webp") no-repeat scroll 8px 8px transparent;
}

.play-vid:hover, .play-pdf:hover, .play-page:hover {
	color: #a531ff;
}

.video-list a:last-child {
	border-radius: 0 0 10px 10px;
	border-bottom: none;
}

.webh-link:hover {
	color: #0034C4;
}

.webh-link {
	display: block;
	font-size: 2em;
	margin-top: 40px;
	color: #6291FF;
	text-decoration: underline;
}

.cartlinks a {
	color: #0034C4;
}
.cartlinks a:hover {
	text-decoration: underline;
}

.paymentproc img, .cart-visi img {
	margin-bottom: 20px;
	max-width: 100%;
}

.cart-visi {
	padding: 20px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
}

.cartlinkholder {
	display: inline-block;
	padding: 10px 30px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
}

.cartlinkholder p, .cartlinkholderfixed p {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	font-size: 1.2em;
}

.cartlinkholderfixed {
	position: fixed;
	top: 200px;
	left: 40px;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
}

.billann {
	font-size: 0.8em;
}

.sh-red {
	color: #D30B0E;
	font-weight: 500;
}

code {
	font-family: monospace;
	font-style: italic;
}

.shopylinkholderfixed {
	position: fixed;
	max-width: 400px;
	top: 144px;
	right: 40px;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	font-size: 0.9em;
}

.shopylinkholderfixed a, .shopylinkholdermobile a {
	font-size: 1.2em;
	font-weight: 500;
	color: #204ABB;
}

.shopylinkholdermobile {
	display: none;
	position: fixed;
	max-width: 400px;
	top: 144px;
	right: 40px;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 14px 0px rgb(20 39 89 / 10%);
	font-size: 0.9em;
	z-index: 1;
}

.shopylist {
	margin: 0 0 14px 20px;
}

.shopylist li {
	margin: 0
}

.shopylist li a {
	font-size: 0.8em;
	color: #204ABB;
	font-weight: 400;
}

.play-page {
    display: block;
    padding: 10px 10px 10px 40px;
    color: #454545;
    border-bottom: 1px solid #cccccc;
    background: url(../images-new/page-play.png) no-repeat scroll 8px 8px transparent;
}

.shopylinkholderfixed a:hover, .shopylist li a:hover {
	text-decoration: underline;
}

.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

.traffic-container{
	background-color: #ffffff;
	border-radius: 10px;
	margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.traffic-col {
	flex: 1%;
    display: flex;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}


.lc {
	flex: 0 0 100px;
	padding: 14px;
	display: flex;
	justify-content: center; /* center horizontally */
	align-items: center; /* center vertically */
	flex-direction: column; /* stack content vertically */
	text-align: center;
}

.lc span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	color: #a531ff;
	font-size: 1.4rem;
	font-weight: 600;
	border-radius: 14px;
    background: rgba(165, 49, 255, 0.06);
	border: 1px solid #cb87ff;
}

.rc {
	flex: 0 0 calc(100%-100px);
	padding: 10px;
}

.rc span {
	text-transform: uppercase;
	font-size: 0.9rem;
	mragin: 0 14px 10px 0;
	font-weight: 600;
	color: #767676;
}

.smaller {
	font-size: 1em;
}


.separator {
	width: 94%;
	height: 1px;
	margin: 0 auto;
	display: block;
	background-color: #CFCFCF;
}

/* ====================== DYNAMIC STUFF ==================*/

.calculator-container {
    background: #ffffff;
	max-width: 800px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin: 20px auto 60px auto;
    min-height: 500px;
}


calculator-title, .quiz-title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
	margin: 0;
}
.input-group, .question-group {
    margin-bottom: 20px;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #34495e;
}
input, select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    box-sizing: border-box;
}
input:focus, select:focus {
    border-color: #3498db;
    outline: none;
}
.calculate-button, .quiz-button {
    background-color: #a531ff;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
	text-align: center;
}
.calculate-button:hover, .quiz-button:hover {
    background-color: #8a1ddf;
}
.calculate-button:disabled, .quiz-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}
.results-container {
    margin-top: 30px;
    padding: 20px;
    background-color: #f1f8ff;
    border-radius: 8px;
    border-left: 5px solid #3498db;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.results-container.show {
    display: block;
    opacity: 1;
}
.results-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2c3e50;
}
.scenario {
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 5px;
    border-left: 4px solid #27ae60;
}
.scenario.average {
    border-left-color: #3498db;
}
.scenario.strong {
    border-left-color: #e74c3c;
}
.scenario-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}
.metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.highlight-box {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
    text-align: center;
}
.highlight-text {
    font-size: 18px;
    font-weight: bold;
    color: #856404;
}
.small-text {
    font-size: 0.8em;
    color: #7f8c8d;
    font-style: italic;
    margin-top: 10px;
}
.section-hidden {
    display: none !important;
}
.quiz-section, .calendly-section {
    display: none;
}
.quiz-section.active, .calendly-section.active {
    display: block;
}
.progress-bar {
    width: 100%;
    height: 6px;
    background-color: #ecf0f1;
    border-radius: 3px;
    margin-bottom: 30px;
}
.progress-fill {
    height: 100%;
    background-color: #3498db;
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 20%;
}
.option {
    display: block;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}
.option:hover {
    background-color: #e3f2fd;
    border-color: #3498db;
}
.option.selected {
    background-color: #e3f2fd;
    border-color: #3498db;
    color: #2c3e50;
    font-weight: bold;
}
.question-container {
    display: none;
}
.question-container.active {
    display: block;
}
.interstitial {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    margin: 20px 0;
}
.interstitial h3 {
    font-size: 24px;
    margin: 0 0 20px 0;
}
.interstitial p {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 15px;
	color: #ffffff;
}
.potential-display {
    background-color: #e8f5e8;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}
.potential-amount {
    font-size: 24px;
    font-weight: bold;
    color: #27ae60;
}
.summary-box {
    background-color: #f1f8ff;
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    border-left: 5px solid #3498db;
    text-align: left;
}
.summary-box ul {
    margin: 15px 0 0 30px;
    padding-left: 20px;
}
.summary-box li {
    margin-bottom: 8px;
    font-size: 16px;
}
.calendly-inline-widget {
    min-width: 320px;
    height: 700px;
    margin-top: 20px;
}

.faq-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-question {
    background: #ffffff;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 1.4em;
    color: #454545;

}

.faq-question.active {
    background: #7321B1;
	color: #ffffff;
}

.faq-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
	color: #7321B1;
}

.faq-question.active .faq-icon {
    background: #7321B1;
    color: #ffffff;
}

.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #ffffff;
}

.faq-answer.active {
    max-height: 500px;
}

.faq-answer-content {
    padding: 20px;
    color: #555555;
    line-height: 1.6;
	font-weight: 300;
}

.calendly-inline-widget {
    min-width: 320px;
    height: 630px;
    width: 100%;
}

.mega-wrap {
	background: #0B0B3A;
    background: linear-gradient(300deg, rgba(11, 11, 58, 1) 100%, rgba(24, 33, 79, 1) 100%);
	padding-bottom: 20px;
}
.head-wrap {
	max-width: 1400px;
	margin: 20px auto;
	padding: 0 20px 0 40px;
}

.head-col {
	display: flex;
}

.head-l {
	flex: 0 0 60%;
	padding: 20px;
	font-size: 2rem;
	font-weight: 800;
}

.head-r {
	flex: 0 0 40%; 
	padding: 20px 20px 20px 40px;
	justify-content: center;
	align-items: center;
	flex-direction: column; 
	display: flex;
    text-align: center;
}

.inner-i {
	padding: 20px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.head-l h2 {
	background-color: #ffffff;
	color: #1b1b1b;
	font-weight: 600;
	font-size: 0.6em;
	border-radius: 20px;
	padding: 4px 20px;
	display: inline-block;
}

.head-l h1 {
	font-size: 1.4em;
	line-height: 1.1em;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	display: block;
}

.head-l h1 span {
	font-size: 80%;
	line-height: 100%;
	color: #cb8ff9;
	display: block;
	margin-bottom: 10px;
	font-weight: 400;
}

.head-l p {
	font-size: 0.7em;
	color: #ffffff;
	margin: 20px 0;
}

.head-l span {
	display: inline-block;
	font-size: 0.6em;
	color: #ffffff;
	font-weight: 300;
	margin: 20px 10px 0 0;
}

.head-btn {
	display: inline-block;
	padding: 12px 60px;
	border-radius: 8px;

}

.dark {
	background-color: #a531ff;
	color: #ffffff;
	font-size: 0.6em;
	font-weight: 600;
}

.light {
	background-color: #ffffff;
	color: #a531ff;
	font-size: 0.6em;
	font-weight: 600;
}

.dark:hover {
	background-color: #ffffff;
	color: #a531ff;
}

.light:hover {
	background-color: #a531ff;
	color: #ffffff;
}

.lp-white {
	padding: 40px;
	background-color: #ffffff;
	border-radius: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 40px;
}

.lp-purple {
	padding: 40px;
	background: #ffffff;
	background: linear-gradient(325deg, rgba(255, 255, 255, 1) 0%, rgba(246, 242, 252, 1) 100%);
	border-radius: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 40px;
}

.white-quiz {
	background-color: #ffffff;
	color: #667eea;
	margin-top: 25px;
}

.white-quiz:hover {
	background-color: #F8EEFF;
}

.questhtwo {
	font-size: 21px;
	text-align: center;
	margin: 0;
}

.questp {
	text-align: center;
	color: #7f8c8d;
	margin-bottom: 25px;
}

 :root{
    --gap: 20px;
  }

.col-wrap {
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: stretch; /* important — columns in the same row will be equal height */
}

.cols {
    background: #ffffff;
    border: 2px solid #8a74f9;
    border-radius: 10px;;
    padding: 20px;
    text-align: center;

    /* create column sizing (4 columns in a row by default) */
    flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
    min-width: 220px;

    /* layout inside the column */
    display: flex;
    flex-direction: column;
}

.cols h3 {
    margin: 20px 0 0 0;
    font-size: 1.4em;
    font-weight: 600;
	color: #7d55da;
}

.cols img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
	margin: 20px auto;
}

.cols p {
    margin: auto 0 20px 0;
    color: #374151;
    font-size: 1.2em;
}


.cac {
	background-color: #6e3fbb;
	padding: 4px 14px;
	display: inline-block;
	border-radius: 20px;
	font-size: 1em;
	font-weight: 400;
}

 :root {
    /* will be set by JS: --slide-width and --duration */
    --slide-width: 1000px;
    --duration: 35s;
  }

.logos {
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    margin-top: -20px;
    /* ensure a stable height (important for Safari layout) */
    display: block;
}

  /* Track holds both slides side-by-side */
.logos-track {
    display: flex;
    align-items: center;
    /* track width is content width (two slides) */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

    /* animation uses the CSS variables set by JS */
    animation-name: logos-scroll;
    -webkit-animation-name: logos-scroll;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: var(--duration);
    -webkit-animation-duration: var(--duration);
    animation-play-state: running;
    -webkit-animation-play-state: running;
}

.logos:hover .logos-track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.logos-slide {
    display: flex;
    align-items: center;
    gap: 40px;                /* spacing between images */
    flex-shrink: 0;           /* prevent shrinking */
	margin-right: 40px;
}

.logos-slide img {
    height: auto;
    width: auto;
    max-height: 60px;  /* adjust for desktop */
    vertical-align: middle;
    display: block;
    flex: 0 0 auto;
    /* optional: provide intrinsic box to reduce layout shift */
    object-fit: contain;
}

@keyframes logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--slide-width)), 0, 0); }
}

@-webkit-keyframes logos-scroll {
    from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0,0,0); }
    to   { -webkit-transform: translate3d(calc(-1 * var(--slide-width)), 0, 0); transform: translate3d(calc(-1 * var(--slide-width)),0,0); }
}

.sub-holder, .sub-holder-cntr {
	margin-bottom: 40px;
}

.sub-holder span, .sub-holder-cntr span {
	font-weight: 600;
	font-size: 1em;
	text-transform: uppercase;
	color: rgba(165, 49, 255, 0.9);
	display: block;
	margin-bottom: 6px;
}

.sub-holder h2, .sub-holder-cntr h2 {
	font-weight: 400;
	margin: 0 0 10px;
	position: relative;
}

.sub-holder h2::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 160px;
	height: 2px;
	background-color: #a531ff;
}

.sub-holder-cntr h2::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: calc(50% - 80px);
	width: 160px;
	height: 2px;
	background-color: #a531ff;
}

.percenter {
	display: flex;
	background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}

.percenter-clean {
	display: flex;
    margin-bottom: 14px;
}

.percenter .lcl {
	flex: 0 0 120px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.percenter .rcl {
	flex: 0 0 calc(100% - 120px);
    padding: 20px 20px 20px 0;
}

.lcl-a {
	flex: 0 0 200px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.rcl-a {
	flex: 0 0 calc(100% - 200px);
    padding: 20px;
}

.lcl-a p {
	display: block;
	width: 100%;
	padding: 8px 4px;
	border-radius: 5px;
	background: rgba(165, 49, 255, 0.06);
	font-weight: 400;
	color: #a531ff;
	    border: 1px solid #cb87ff;
}

.problem-item {
	margin-bottom: 24px;
	max-width: 62ch;
	padding-top: 24px;
	scroll-margin-top: 20px;
}

.problem-item:first-of-type {
	padding-top: 0;
}

.problem-title {
	color: #0F1222;
	margin-bottom: 6px;
}

.problem-desc {
	color: #4A4F57;
}

/* MICRO-PROOF CARD */
.proof-card {
	max-width: 400px;
	margin: 16px 0 0 0;
	background-color: #ffffff;
	border: 1px solid #e8e8ea;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.proof-header {
	font-size: 1em;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}

.proof-stats {
	font-size: 1em;
	display: flex;
	gap: 16px;
	margin-bottom: 6px;
}

.proof-stat {
	color: #4A4F57;
}

.proof-result {
	font-size: 1em;
	color: #dc2626;
	margin-top: 6px;
}

.bottom-line {
	background: rgba(165, 49, 255, 0.06);
	border-left: 3px solid #a531ff;
	padding: 18px 22px;
	margin: 10px 0 0;
	border-radius: 6px;

}

.bottom-line-label {
	color: #a531ff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	font-weight: 600;
}

.bottom-line-text {
	font-size: 1.2em;
	color: #2c2f36;
}

.rclhead {
	font-weight: 600;
}

.dark-purple {
	color: #a531ff;
}

.mob-img {
	display: none;
}

.blocked {
	padding: 18px 22px;;
	background-color: #ffffff;
	border-radius: 5px;
	border-left: 3px solid #a531ff;
}

.img-ttl {
	max-width: 600px;
	text-align: center;
	font-size: 90%;
	color: #5C5C5C;
	margin: 10px auto 0 auto;
}

.big-purple {
	color: #5f43c5;
	font-size: 2em;
	font-weight: 600;
}

.light-purple-back {
	background-color: #f2efff;
}

.ornament {
	border-radius: 5px;
	box-shadow: 0 0 6px rgba(4, 4, 4, 0.2);
}

.wht-box {
	padding: 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.borderp {
	display: inline-block;
	font-size: 1em;
	color: #a531ff;
	font-weight: 400;
	padding: 4px 16px;
	border-radius: 22px;
	border: 1px solid #cb87ff;
	background: rgba(165, 49, 255, 0.06);
}

.borderps {
	display: inline-block;
	font-size: 80%;
	color: #a531ff;
	font-weight: 400;
	padding: 2px 14px;
	margin-right: 10px;
	border-radius: 22px;
	border: 1px solid #cb87ff;
	background: rgba(165, 49, 255, 0.06);
}

.sevenwidth {
	max-width: 605px;
}

.cl-five {
	flex: 1%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    padding: 20px;
	background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}

.cl-five-top {
	flex: 1%;
	display: flex;
	flex-direction: column;
    padding: 20px;
	background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}

.gaped {
	gap: 30px;
}

.flex-bot {
	border-top: solid #cccccc 1px;
    padding: 10px 0 0 0;
    margin-top: 10px;
}

.flexer {
    display: flex;
}

.middle-align {
	align-items: center;
}

.cl-side-l {
	width: 44px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px;
}

.cl-side-r {
	width: 140px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px;
}

.small-font {
	font-size: 0.9em;
}

.cl-mid {
	flex: 1; /* fills remaining width */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px;
}

.grey-prog {
	height: 10px;
	border-radius: 5px;
	background-color: #E4E4E4;
}

.purple-prog {
	height: 10px;
	width: 70%;
	border-radius: 5px;
	background-color: #a531ff;
}

.divider {
	height: 1px;
	width: 100%;
	margin: 4px 0;
	background-color: #DDDDDD;
}

:root {
  --col-gap: 16px; /* change spacing here */
}

.fourcolumn {
	display: flex;
	flex-wrap: wrap;
	gap: var(--col-gap);
	align-items: stretch;
	border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	padding: 20px;
    margin-bottom: 30px;
}

.fourcolumn .clm {
	display: flex;
	vertical-align: middle;
	/* ensure exactly four columns (accounting for gaps): */
	flex: 0 0 calc((100% - (var(--col-gap) * 3)) / 4);

}

.clm .row-inner {
	display: flex;
	align-items: center;
	gap: 6px;
}

.clm .trust-icon {
	display: flex;
	flex: 0 0 48px;
	width: 48px;
    height: 48px;
	padding: 4px;
	align-items: center;
	justify-content: center;
	background: rgba(165, 49, 255, 0.06);;
	border-radius: 6px;
	stroke: #a531ff;
    stroke-width: 1px;
    fill: none;
}

.card-icon {
	width: 48px;
    height: 48px;
	padding: 4px;
	background: rgba(165, 49, 255, 0.06);;
	border-radius: 6px;
}

.card-icon svg {
	stroke: #a531ff;
	stroke-width: 1px;
	fill: none;
}

.clm .trust-text {
	flex: 1 1 auto;
	padding-left: 4px;
}

.pointclick, .forward {
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
}

.pointclick img {
	padding: 5px;
	border-radius: 60px;
	border: 2px solid #a531ff;
	margin-bottom: 4px;
}

.pointclick span {
	font-size: 1.2em
}

.darken {
	background-color: #a531ff;
}








@media only screen and (max-width: 2100px) {
	.shopylinkholderfixed {
		max-width: 300px;
	}
}

@media only screen and (max-width: 1800px) {
	.cartlinkholderfixed, .shopylinkholderfixed {
		display: none;
	}
	.shopy-menu {
		display: block;
		padding: 8px;
		position: fixed;
		background-color: #ffffff;
	    box-shadow: 0px 0px 14px 4px rgb(20 39 89 / 10%);
		font-size: 1.2em;
		top: 110px;
		right: 40px;
		color: #204ABB;
		font-weight: 600;
		cursor: pointer;
		z-index: 2;
		border-radius: 4px
	}
	.shopy-menu span {
		display: inline-block;
		vertical-align: middle;
	}
	.shopyburger {
		margin-left: 6px;
		width: 24px;
		height: 19px;
		background-image: url(https://visiopt.com/images-new/shopy-menu-1.webp);
	}
	.shopy-menu:hover {
		opacity: 0.8;
	}
}

.red {
	color: #B93D3F;
	font-weight: 400;
}

.cols br {
      display: none;
  }

@media only screen and (max-width: 1600px) {
	.play-btn {
		width: 160px;
	}
}

@media only screen and (max-width: 1380px) {
	.cols br {
		display: block;
	}
}



@media only screen and (max-width: 1280px) {
	.header-wrapper, .wrapper, .slider-wrap, .footer-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.white-wrapper, .procontra-wrapper {
		max-width: 100%;
		border-radius: 0;
	}
	h1, h3 {
		font-size: 2.2em;
	}	
	p, li, .cs-list li{
		font-size: 1.2em;
		margin: 0.3em 0;
	}
	.faq-question {
		font-size: 1.2em;
	}
	.impulse {
		background-size: 150%;
	}
	.head-l h1 {
		font-size: 1.3em;
	}
	.head-l p {
		font-size: 0.6em;
	}
}

@media only screen and (max-width: 1150px) {
    .cols br {
		display: none;
	}
}

@media only screen and (max-width: 1140px) {
    .cols {
     	flex: 0 0 calc((100% - var(--gap)) / 2);
    }
}




@media screen and (max-width: 940px) {
	.topnav a {
		display: none;	
	}
	.logo, .logo-link {
		margin-left: 20px;
	}
	.menu-icon {
		position: absolute;
    	top: 16px;
		right: 20px;
	 	width: 32px;
	 	height: 32px;
	  	background: url("../images-new/nemu-grey-sprite.webp") no-repeat scroll 0 0;
		cursor: pointer;
  	}
	.dark-icon {
		position: absolute;
    	top: -6px;
    	right: 0;
	 	width: 32px;
	 	height: 32px;
	  	background: url("../images-new/nemu-color-sprite.webp") no-repeat scroll 0 0;
		cursor: pointer;
  	}
	.menu-icon:hover, .dark-icon:hover {
		opacity: 0.7;
	}
	.topnav.responsive {
		position: absolute;
		top: 60px;
		z-index: 100;
		left: 0;
		width: 100%;
		background: #eeeeee;
		border-bottom: 8px solid #a531ff;
	}
	.responsive .darkened {
		background: #010f34;
		padding: 10px 20px 20px 20px;
	}
	.responsive .menu-icon {
		background: url("../images-new/nemu-grey-sprite.webp") no-repeat scroll 0 -32px;
		top: -44px;
    	right: 20px;
	}
	.responsive .dark-icon {
		background: url("../images-new/nemu-color-sprite.webp") no-repeat scroll 0 -32px;
		top: -44px;
    	right: 20px;
	}
	.topnav.responsive a {
		display: table;
		font-size: 1.4em;
		text-align: center;
		margin: 0 auto 10px auto;
		max-width: 180px;
	}
	.navbutton, .darknavbutton {
		margin-bottom: 0!important;
	}
	.header-pad {
		padding: 16px 0;
	}
	.impulse {
   		margin-top: 0;
		padding-top: 0;
	}
	.purple-banner{
		padding: 20px 40px 40px 40px;
	}
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: block;
	}
	header h2 {
		margin: 0.5em 0 0 0;
	}
	.two-head {
		display: block;
	}
	.impulse-inner .flexy {
		display: block;
	}
	.head-col, .left-head, .right-head  {
		padding: 20px 0;
		display: block;
	}
	.head-wrap {
		padding: 0 40px;
		margin: 0;
	}
	.head-l h1 {
		font-size: 1.1em;
	}
	.head-l p {
		font-size: 0.5em;
	}
	.head-l {
		margin-bottom: 40px;
		display: block;
		padding: 0;
	}
	.head-r {
		padding: 0;
		display: block;
	}
	.lp-white, .lp-purple {
		padding: 20px;
	}
	.fourcolumn .clm{
		flex: 0 0 calc((100% - var(--col-gap)) / 2);
	}
	.pointclick img {
		height: 80px;
		border-radius: 40px;
	}
	.forward {
		height: 80px;
	}
}



@media only screen and (max-width: 800px) {
	h1, h3 {
		font-size: 2em;
		margin: 0.5em 0;
	}
	h2 {
		font-size: 1.6em;
	}
	h4 {
		font-size: 1.4em;
	}
	.subbed {
		font-size: 1.4em;
	}
	p, li, .cs-list li {
		font-size: 1.1em;
		margin: 0.3em 0;
	}
	.cols p {
		font-size: 1.1em;
	}
	.faq-question {
		font-size: 1.1em;
	}
	input, textarea {
		font-size: 1em;
	}
	ul, ol {
		margin: 20px 0 20px 20px;
	}
	.impulse {
		background-size: 220%;
	}
	.flexy, .procontra-flexy , .flex-column, .two, .column{
	display: block;
	}
	.left-col, .right-col {
		padding: 20px 0;
	}
	.left-c {
		max-width: 100%;
		padding: 0;
	}
	.right-c {
		padding: 0;
	}
	.bottom-margin {
		margin-bottom: 10px;
	}
	.desktoper {
		display: none;
	}
	.mobiler {
		display: block!important;
	}
	.wrapper, .white-wrapper, .procontra-wrapper {
		padding: 20px;
	}
	.testiminner {
		max-width: 500px;
		margin: 0 auto;
	}
	.testimonial h3 {
		font-size: 1.8em;
		margin-bottom: 0.4em;
	}
	.testiminner img {
		max-width: 160px;
	}
	.big-cta {
		padding: 10px 40px;
		border-radius: 8px;
	}

	.big-cta .top-line {
		font-size: 1.6em;
	}
	.big-cta .bottom-line-text {
		font-size: 1em;
	}
	.castud {
		padding: 20px;
		text-align: center;
	}
	.castud h2 {
		font-size: 1.2em;
	}
	.procontra br {
		display: none;
	}
	
	.address, .copyr {
		font-size: 1em;
	}
	.team {
		max-width: 300px;
		margin-bottom: 30px;
	}
	.help-section {
		width: 50%;
	}
	.lc {
		padding: 10px;
		font-size: 1.4rem;
	}
	.rc {
		padding: 10px;
	}
	.rc b {
		font-size: 1rem;
	}
	.percenter .lcl, .percenter .rcl {
		padding: 10px;
	}
	.calendly-inline-widget {
        height: 700px; /* Slightly taller for mobile */
        min-height: 600px;
    }
	.quiz-container {
        padding: 20px 15px;
    }
    .quiz-title {
        font-size: 24px;
    }
    .question-title {
        font-size: 20px;
    }
	.head-wrap {
        padding: 0 20px;
    }
	.percenter-clean {
		flex-direction: column;
	}
	.percenter {
		display: block;
	}
	.percenter .lcl {
		display: none;
	}
	.percenter .rcl {
		display: block;
	}
	.percenter .rcl p {
		text-align: center;
	}
	.mob-img {
		display: block;
		max-width: 80px;
		margin: 10px auto;
	}
	.cl-five, .cl-five-top {
		width: 100%;
	}
	.sixwidth {
		max-width: 100%;
	}
	.gaped {
		gap: 0;
	}
	.wht-box {
		margin-bottom: 14px;
	}
	.lcl-a {
    	flex: 0;
		padding: 10px 10px 0 10px;
	}
	.rcl-a {
		padding: 0 10px 10px 10px;
	}
	.percenter-clean {
		margin-bottom: 0;
	}
	.head-col, .left-head, .right-head {
        padding: 0;
    }
	.head-l h2 {
		margin: 0.5em 0 0 0;
	}
	.logos {
		margin-top: -40px;
	}
	.fourcolumn {
		margin-bottom: 14px;
	}
}

@media only screen and (max-width: 720px) {
	.rev-box {
		display: block;
		max-width: 300px;
    	margin: 0 auto;
	}
	.rev-arrow {
		display: none!important;
	}
	.rev-arrow-d {
		display: block;
		vertical-align: middle;
		color: #7f39f1;
		font-size: 3em;
		margin: 0;
	}
	.rclhead {
		text-align: center;
		font-size: 1.4em;
	}
	.wht-box {
		padding: 10px;
	}
	.pointclick img {
		border-width: 1px;
		padding: 0;
		height: 50px;
		border-radius: 25px;
	}
	.forward {
		height: 50px;
	}
}


@media only screen and (max-width: 690px) {
	.header-cta {
		font-size: 1em;
		padding: 12px 80px;
		margin: 20px 0;
	}
	.purple-banner{
		padding: 20px 20px 40px 20px;
	}
	.white-txt {
		font-size: 1.2em;
	}
	.rev-num {
		padding: 6px 16px;
		font-size: 2em;
		top: -20px;
	}
}

@media only screen and (max-width: 620px) {
	.no-mob {
		display: none!important;
	}
	.head-btn {
		display: block;
		text-align: center;
		margin-bottom: 10px;
		padding: 12px 20px;
	}
	.calculate-button, .quiz-button {
		margin-top: 0;
	}
	.option {
		padding: 10px 20px;
	}
	.head-l span {
		font-size: 0.5em;
		margin: 20px 4px 0 0;
	}
	.logos-slide {
		margin-right: 40px;
	}
	.logos-slide img {
		max-height: 36px;
	}
	.cols {
      flex: 0 0 100%;
    }
    .cols img { max-height: 200px;
	}
	.fourcolumn .clm{
		flex: 0 0 100%;
	}
	.row-inner {
		gap: 20px;
	}
}


@media only screen and (max-width: 520px) {
	.navlink{
		display: inline-block;
		margin: 8px 14px 0 14px;
	}
	.navbutton, .darknavbutton {
		display: inline-block;
		margin: 14px 0 0 0;
	}
	h1, h3 {
		font-size: 1.8em;
		margin: 0.4em 0;
	}
	h4 {
		font-size: 1.2em;
	}
	p, .main-kontakt p, li, .cs-list li, .bottom-line-text  {
		font-size: 1em;
		margin: 0.3em 0;
	}
	.cols p {
		font-size: 1em;
	}
	.faq-question {
		font-size: 1em;
	}
	.header-wrapper {
		max-width: 1200px;
		margin: 0 auto;
		padding: 2px 20px 20px 20px;
	}
	.lp-headline {
		font-size: 1.7em;
		margin: 0 0 0.4em 0;
	}
	.lp-sub {
		font-size: 1.3em;
	}
	.brain-vid, .ios-brain {
		top: 22px;
		width: 240px;
		height: 178px;
		left: calc(50% - 120px);
	}
	.brain-holder {
		min-height: 300px;
		max-width: 360px
	}
	.ben-holder {
		width: 50px;
		margin: -30px auto 0 auto;
	}
	.ben-holder span {
		font-size: 0.8em;
	}
	.benefit {
		display: block;
		width: 50px;
		height: 50px;
	}
	.ben-1 {
		top: 52px;
		left: 10px;
	}
	.ben-2 {
		top: 38px;
		left: 242px;
	}
	.ben-3 {
		top: 133px;
		left: 286px;
	}
	.ben-4 {
		top: 222px;
		left: 184px;
	}
	.ben-5 {
		top: 190px;
		left: 38px;
	}
	.testimonial h3 {
		font-size: 1.6em;
	}
	.left-col img, .left-col video, .right-col img, .right-col video, .image-col img, .image-col video {
		max-width: 100%;
	}
	.big-cta {
		padding: 10px 20px;
	}
	.big-cta .top-line {
		font-size: 1.4em;
	}
	.address, .copyr {
		font-size: 0.9em;
	}
	.help-section {
		width: 100%;
	}
	.cartlinkholder p {
		width: 150px;
	}
	.head-l {
		margin-bottom: 30px;
	}
	.pointclick img {
		height: 40px;
		border-radius: 20px;
	}
	.forward {
		height: 30px;
	}
}

@media only screen and (max-width: 440px) {
	.image-max {
		max-width: 100%!important;
	}
	.address {
		max-width: 260px;
		margin-bottom: 20px;
	}
	.team {
		max-width: 100%;
	}
	.calendly-inline-widget {
        height: 750px;
        min-width: 300px;
    }

}