/************************ GLOBAL SETTINGS ************************/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
	--black:#000017;
	--dark:#14142A;
	--grey:#2B2B40;
	--cloud:#C1C1D8;
	--snow:#F1F1F6;
	--white:#FFFFFF;
	--transparent-dark:rgba(0,0,0,0.24);
	--transparent-light:rgba(255,255,255,0.06);
	
	--navy:#000155;
	--blue:#497EDC;
	--teal:#00BBC2;
	--green:#7EBD31;
	
	--purple:#8400ff;
	--coral:#FB4671;
	--orange:#FFAA46;
	--citron:#E9FF6E;
	
	--link:#0066FF;
	--link-active:#0044FF;

	--link-light:#00aaff;
	--link-light-active:#00ccFF;
	
	--transition:all 0.24s ease-in-out;
	}

* {
	box-sizing:border-box;
}
html,
body {
	font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif; 
	font-optical-sizing:auto;
	font-style:normal;
	font-size:16px;
	font-weight:400;
	margin:0; 
	padding:0; 
	color:var(--gray);
	background-color:var(--black);
	position:relative;
	scroll-behavior: smooth;
}

/************************ COLORS ************************/

.black {color:var(--black) !important;}	
.dark {color:var(--dark) !important;}
.navy {color:var(--navy) !important;}	
.blue {color:var(--blue) !important;}
.teal {color:var(--teal) !important;}
.purple {color:var(--purple) !important;}	
.green {color:var(--green) !important;}
.gray {color:var(--gray) !important;}	
.cloud {color:var(--cloud) !important;}
.snow {color:var(--snow) !important;}
.white {color:var(--white) !important;}
.link {color:var(--link) !important;}
.link.light {color:var(--link-light) !important;}
.gradient {background: -webkit-linear-gradient(45deg, var(--link), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.bg_black {background-color:var(--black) !important;}
.bg_dark {background-color:var(--dark) !important;}
.bg_navy {background-color:var(--navy) !important;}
.bg_blue {background-color:var(--blue) !important;}
.bg_teal {background-color:var(--teal) !important;}
.bg_green {background-color:var(--green) !important;}
.bg_gray {background-color:var(--gray) !important;}
.bg_cloud {background-color:var(--cloud) !important;}
.bg_snow {background-color:var(--snow) !important;}
.bg_white {background-color:var(--white) !important;}
.bg_gradient {background-image: -webkit-linear-gradient(45deg, var(--link), var(--purple));}
.bg_gradient_dark {background-image: -webkit-linear-gradient(45deg, var(--black), var(--dark));}
.bg_transparent_dark {background-color:var(--transparent-dark) !important; backdrop-filter: blur(0.5rem);}
.bg_transparent_light {background-color:var(--transparent-light) !important; backdrop-filter: blur(0.5rem);}

.border {border: 1px solid rgba(128,128,156,0.32)}
.bg_black .border,
.bg_dark .border,
.bg_gradient_dark .border,
.bg_transparent_dark .border {border: 1px solid rgba(128,128,156,0.16)}


.bg_white h1, .bg_white h2, .bg_white h3, .bg_white h4, .bg_white h5, .bg_white h6, .bg_white strong,
.bg_snow h1, .bg_snow h2, .bg_snow h3, .bg_snow h4, .bg_snow h5, .bg_snow h6, .bg_snow strong {
	color:var(--black)
}
.bg_white .lead,
.bg_snow .lead {
	color:var(--dark)
}
.bg_white p, .bg_white li, .bg_white .kicker, .bg_white .caption,
.bg_snow p, .bg_snow li .bg_snow .kicker, .bg_snow .caption {
	color:var(--gray)
}
.bg_gradient h1, .bg_gradient h2, .bg_gradient h3, .bg_gradient h4, .bg_gradient h5, .bg_gradient h6, .bg_gradient strong,
.bg_gradient_dark h1, .bg_gradient_dark h2, .bg_gradient_dark h3, .bg_gradient_dark h4, .bg_gradient_dark h5, .bg_gradient_dark h6, .bg_gradient_dark strong,
.bg_black h1, .bg_black h2, .bg_black h3, .bg_black h4, .bg_black h5, .bg_black h6, .bg_black strong,
.bg_dark h1, .bg_dark h2, .bg_dark h3, .bg_dark h4, .bg_dark h5, .bg_dark h6, .bg_dark strong,
.bg_navy h1, .bg_navy h2, .bg_navy h3, .bg_navy h4, .bg_navy h5, .bg_navy h6, .bg_navy strong,
.bg_blue h1, .bg_blue h2, .bg_blue h3, .bg_blue h4, .bg_blue h5, .bg_blue h6, .bg_blue strong,
.bg_teal h1, .bg_teal h2, .bg_teal h3, .bg_teal h4, .bg_teal h5, .bg_teal h6, .bg_teal strong,
.bg_green h1, .bg_green h2, .bg_green h3, .bg_green h4, .bg_green h5, .bg_green h6, .bg_green strong {
	color:var(--white);
}
.bg_gradient .lead,
.bg_gradient_Dark .lead,
.bg_black .lead,
.bg_dark .lead,
.bg_navy .lead,
.bg_blue .lead,
.bg_teal .lead,
.bg_green .lead {
	color:var(--white);
	opacity:0.88;
}
.bg_gradient p, .bg_gradient li, .bg_gradient .kicker, .bg_gradient .caption,
.bg_gradient_dark p, .bg_gradient_dark li, .bg_gradient_dark .kicker, .bg_gradient_dark .caption,
.bg_black p, .bg_black li, .bg_black .kicker, .bg_black .caption,
.bg_dark p, .bg_dark li, .bg_dark .kicker, .bg_dark .caption,
.bg_navy p, .bg_navy li, .bg_navy .kicker, .bg_navy .caption,
.bg_blue p, .bg_blue li, .bg_blue .kicker, .bg_blue .caption,
.bg_teal p, .bg_teal li, .bg_teal .kicker, .bg_teal .caption,
.bg_green p, .bg_green li, .bg_green .kicker, .bg_green .caption {
	color:var(--white);
	opacity:0.8;
}



/************************ TEXT ************************/

h1 {
	font-size:3.75rem;
	line-height:4.5rem;
	font-weight:300;
	letter-spacing:-0.5px; 
	margin:0 0 1.25rem;
	color:var(--black);
}
h2 {
	font-size:2.875rem;
	line-height:3.5rem;
	font-weight:300;
	letter-spacing:-0.5px; 
	margin:0 0 1rem;
	color:var(--black);
}
h3 {
	font-size:2.5rem;
	line-height:3.125rem;
	font-weight:300;
	letter-spacing:-0.3px; 
	margin:0 0 0.75rem;
	color:var(--black);
}
h4 {
	font-size:2rem;
	line-height:2.625rem;
	font-weight:400;
	letter-spacing:-0.2px; 
	margin:0 0 0.5rem;
	color:var(--dark);
}

h5 {
	font-size:1.625rem;
	line-height:2.25rem;
	font-weight:500;
	letter-spacing:-0.2px; 
	margin:0 0 0.5rem;
	color:var(--dark);
}

h6 {
	font-size:1.375rem;
	line-height:2rem;
	font-weight:500;
	margin:0 0 0.375rem 0;
	color:var(--dark);
}
h1 + h4,
h1 + h5,
h1 + h6 {
	position:relative;
	top:-0.75rem;
	margin:0;
}
h2 + h4,
h2 + h5,
h2 + h6,
h3 + h4,
h3 + h5,
h3 + h6 {
	position:relative;
	top:-0.5rem;
	margin:0;
}

blockquote {
    font-size:2rem;
	line-height:2.75rem;
	font-weight:300;
	letter-spacing:-0.3px; 
	margin:0 0 1rem;
}
blockquote:before {
    content: "\201C";
    display: block;
    font-size: 400%;
	font-weight:700;
    position: relative;
    top: 1rem;
    left: -0.675rem;
}
.lead {
	font-size:1.25rem;
	line-height:1.875rem;
	margin:0 0 1rem;
	font-weight:400;
	}
.kicker {
	font-size:0.9375rem;
	line-height:1.375rem;
	font-weight:400;
	margin:0 0 0.5rem;
	letter-spacing:1.5px;
	text-transform:uppercase;
	opacity:0.8;
	}
.caption {
	font-size:0.9375rem;
	line-height:1.5625rem;
	font-weight:400;
	margin: 0.25rem 0 0.25rem;
}
p {
	font-size:1.0625rem;
	line-height:1.75rem;
	margin:0 0 0.5rem;
}
strong {
	font-size:1.1875rem;
	line-height:1.625rem;
	font-weight:700;
	margin:0 0 0.5rem;
	color:var(--dark);
}
.tag {
	font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem 0 0;
    text-transform: uppercase;
    background-color: rgba(255,255,255,0.16);
    border-radius: 2rem;
    color: var(--white);
    display: inline;
    width: fit-content;
    position: relative;
    top: -0.0625rem;
    left: -0.25rem;
	}


ul {
	padding:0 0 0 1.25rem;
	margin:0.5rem 0 1rem;
	}
li {
	font-size:1.0625rem;
	line-height:1.625rem;
	margin:0 0 0.25rem;
	}
li:last-child {
	margin:0 0 0;
	}

ul.clean {
	list-style-type: none;
	padding:0;
	}
ul.clean li {
	padding:0;
	margin:0 0 1.5rem 0;
	}

ul.grid {
	padding:0;
	}
ul.grid li {
	padding:0 0 0 0.75rem;
	margin:0 0 1.5rem 1.5rem;
	}

/************************ GRAPHICS & DECORATIONS ************************/

img {
	width:100%; 
	height:auto; 
	display: block;
}
.icon {
	width:3rem !important;
	height:auto;
	margin-bottom:0.75rem;
}
.icon.small {
	width:2rem !important;
	margin-bottom:0.75rem;
}
.icon.inline {
	width: 1.5rem !important;
    margin: 0 0.375rem 0 0;
    display: inline-block;
    position: relative;
    top: .375rem;
}

.number {
	width:4rem;
	height:4rem;
	border-radius:50%;
	background-color: var(--blue);
	display:flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 0.75rem;
	font-size:1.5rem;
	color:var(--white);
	font-weight:700;

}
hr {
	width: 100%;
	border: none;
	height: 1px;
	background-color: var(--cloud);
	margin:2rem 0;
}
.break {
	height: 1rem;
}
.break.sm {
	height: 0.5rem;
}
.break.xl {
	height: 2rem;
}

/************************ LINKS & BUTTONS ************************/

a {
	font-size:1.25rem;
	line-height: 1.75rem;
	font-weight:500;
	text-decoration:none;
	color:var(--link);
	transition:var(--transition);
	position: relative;
}
a:hover	{
	color:var(--link-active);
}
a.arrow::after {
	content:'';
	position: absolute;
	right:-1.25rem;
	bottom:0.125rem;
	height: 20px;
	width: 12px;
	background-size: 20px 12px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %230066FF; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
a.arrow:hover::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %230044FF; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
a.download {
	padding-left:2rem;
}
a.download::before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><defs><style> .st0 { fill: %23fff; } </style></defs><path class="st0" d="M8.5,6.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v3.79l-1.15-1.15c-.2-.2-.51-.2-.71,0s-.2.51,0,.71l2,2c.2.2.51.2.71,0,0,0,0,0,0,0l2-2c.2-.2.2-.51,0-.71s-.51-.2-.71,0l-1.15,1.15v-3.79Z"/><path class="st0" d="M14,14V4.5L9.5,0h-5.5C2.9,0,2,.9,2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2M9.5,3c0,.83.67,1.5,1.5,1.5h2v9.5c0,.55-.45,1-1,1H4c-.55,0-1-.45-1-1V2c0-.55.45-1,1-1h5.5v2Z"/></svg>');
}



a.light {
	color:var(--link-light);
}
a.light:hover {
	color:var(--link-light-active);
}
a.light.arrow::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %2300aaff; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
a.light.arrow:hover::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %2300ccFF; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
a.light.download::before {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><defs><style> .st0 { fill: %230af; } </style></defs><path class="st0" d="M8.5,6.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v3.79l-1.15-1.15c-.2-.2-.51-.2-.71,0s-.2.51,0,.71l2,2c.2.2.51.2.71,0,0,0,0,0,0,0l2-2c.2-.2.2-.51,0-.71s-.51-.2-.71,0l-1.15,1.15v-3.79Z"/><path class="st0" d="M14,14V4.5L9.5,0h-5.5C2.9,0,2,.9,2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2M9.5,3c0,.83.67,1.5,1.5,1.5h2v9.5c0,.55-.45,1-1,1H4c-.55,0-1-.45-1-1V2c0-.55.45-1,1-1h5.5v2Z"/></svg>');
}
a.light.download:hover::before {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><defs><style> .st0 { fill: %230cf; } </style></defs><path class="st0" d="M8.5,6.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v3.79l-1.15-1.15c-.2-.2-.51-.2-.71,0s-.2.51,0,.71l2,2c.2.2.51.2.71,0,0,0,0,0,0,0l2-2c.2-.2.2-.51,0-.71s-.51-.2-.71,0l-1.15,1.15v-3.79Z"/><path class="st0" d="M14,14V4.5L9.5,0h-5.5C2.9,0,2,.9,2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2M9.5,3c0,.83.67,1.5,1.5,1.5h2v9.5c0,.55-.45,1-1,1H4c-.55,0-1-.45-1-1V2c0-.55.45-1,1-1h5.5v2Z"/></svg>');
}



a.white {
	color:var(--white);
}
a.white:hover {
	color:var(--white);
}
a.white.arrow::after,
a.white.arrow:hover::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %23FFF; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
a.white.download::before,
a.white.download:hover::before {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><defs><style> .st0 { fill: %23fff; } </style></defs><path class="st0" d="M8.5,6.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v3.79l-1.15-1.15c-.2-.2-.51-.2-.71,0s-.2.51,0,.71l2,2c.2.2.51.2.71,0,0,0,0,0,0,0l2-2c.2-.2.2-.51,0-.71s-.51-.2-.71,0l-1.15,1.15v-3.79Z"/><path class="st0" d="M14,14V4.5L9.5,0h-5.5C2.9,0,2,.9,2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2M9.5,3c0,.83.67,1.5,1.5,1.5h2v9.5c0,.55-.45,1-1,1H4c-.55,0-1-.45-1-1V2c0-.55.45-1,1-1h5.5v2Z"/></svg>');
}


.button {
	font-size:1.25rem; 
	line-height:1.625rem; 
	letter-spacing: -1%;
	text-wrap: nowrap;
	cursor:pointer; 
	font-weight:700;
	color:var(--white) !important;
	background:var(--purple);
	transition:var(--transition);
	padding:1rem 1.5rem 1rem 1.5rem;
	margin:1.5rem 0;
	border:0;
	border-radius:2rem;
	position: relative;
}
.button:hover {
	color:var(--white);
	background:rgb(90, 0, 180)
}
.button.arrow {
	padding:1rem 2.75rem 1rem 1.5rem;
	}
.button.arrow::after {
	content:'';
	position: absolute;
	right:1.25rem;
	top:1.25rem;
	height: 20px;
	width: 12px;
	background-size: 20px 12px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %23fff; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>') !important;
	transition:var(--transition);
}
.button.arrow:hover::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %23fff; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>') !important;
	transition:var(--transition);
}
.button.light {
	color:var(--link) !important;
	background:var(--white);
}
.button.light:hover {
	color:var(--link-active);
	background:var(--white);
}
.button.light.arrow::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %2306f; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}
.button.light.arrow:hover::after {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 9 15"><defs><style> .st0 { fill: %2304f; } </style></defs><path class="st0" d="M1.5,15c-.38,0-.77-.15-1.06-.44-.59-.59-.59-1.54,0-2.12l4.94-4.94L.44,2.56C-.15,1.97-.15,1.03.44.44,1.03-.15,1.97-.15,2.56.44l6,6c.59.59.59,1.54,0,2.12l-6,6c-.29.29-.68.44-1.06.44Z"/></svg>');
}


.button.secondary {
	font-size:1.0625rem; 
	line-height:1.25rem;
	color:var(--white) !important;
	margin:0;
	background: transparent;
	text-decoration: none;
	position: relative;
}
.button.secondary.arrow::after {
	right:1.25rem;
	top:1rem;
}
.button.secondary:before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 0.25rem;
	background: linear-gradient(135deg, var(--purple), var(--teal));
	-webkit-mask:
	linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}

.button.secondary:hover {
	background:transparent;
}



.links {
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap:2rem;
	margin:1rem 0 0;
}
@media screen and (max-width:768px) {
	.links {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}


/************************ PAGE STRUCTURE ************************/

.section,
.container,
.content,
.row,
.column {
	width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	flex-direction: column;
	position:relative;
	font-size:1.125rem;
	background-repeat:no-repeat;
}
.section {
	padding:3rem 0.5rem;
	max-width:1920px;
	gap:3rem;
	overflow: hidden;
	width: 100%;
}
.container {
	padding: 3rem 3rem;
	max-width:1480px;
	gap:5rem;
}
.content {
	padding:0;
	max-width:1280px;
	gap:2rem;
}
.row {
	padding-top: 1rem;
	padding-bottom: 1rem;
	flex-direction: row;
	gap:3rem;
}
.row .row .row {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.column {
	padding:0;
	margin: 0;
}


.grid {display: grid; align-items: stretch; gap: 2rem !important}
.grid.two {grid-template-columns: repeat(2, 1fr);}
.grid.three {grid-template-columns: repeat(3, 1fr);}
.grid.four {grid-template-columns: repeat(4, 1fr);}

@media screen and (max-width:1280px) {
	.grid {gap: 1.5rem !important}
	.grid.two {grid-template-columns: repeat(2, 1fr);}
	.grid.three,
	.grid.four {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width:980px) {
	.grid {gap: 1.5rem !important}
	.grid.two,
	.grid.three,
	.grid.four {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:768px) {
	.grid {gap: 1rem !important}
	.grid.two,
	.grid.three,
	.grid.four {grid-template-columns: repeat(1, 1fr);}
}
	
.equal {align-items: stretch;}
.middle {align-items: center;}
.centered {text-align: center; justify-content: center; align-items:center;}
.space {justify-content:space-between}
.start {justify-content:flex-start}
.end {justify-content:flex-end}
.auto {width: auto;}
.fullpage {height: 100vh;}
.right {text-align: right;}
.left {text-align: left;}

.width_80 {width:80%}
.width_75 {width:75%}
.width_60 {width:60%}
.width_50 {width:50%}

.hide {display:none}
.hide_mobile {display:inherit !important;}
.hide_desktop {display:none !important;}

.shadow {box-shadow:0 0.75rem 2rem rgba(0,0,0,0.12);}

.rounded {border-radius:2rem;}
.row .rounded {border-radius:1.25rem;}

.padding {padding:3rem 3.5rem}
.row .padding {padding: 2.5rem 3rem}

.bounced {transition:var(--transition);}
.bounced:hover {transform: scale(1.04);}
.bounced.shadow:hover {box-shadow:0 0.75rem 2.5rem rgba(0,0,0,0.08);}

.bg_cover {background-size: cover;}
.bg_contain {background-size: contain;}
.bg_center {background-position: center;}
.bg_top {background-position: top center;}
.bg_bottom {background-position: bottom center;}

.inline {display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap:1rem;}
.inline + .inline {margin:1.5rem 0 0;}
.inline img {position: relative; top:-0.375rem}

iframe {width: 100%; aspect-ratio: 16 / 9; height: auto;}





/************************ HEADER ************************/

.header.row {
	align-items: center;
}
.header .logo {
	height:2rem; 
	width:auto;
	}
.header #navi ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
	}
.header #navi ul li {
	display: inline-block;
	margin: 0;
	padding:8px 12px;
	}
.header #navi ul li:before {
	display: none;
	}
.header #navi ul li a {
	color: var(--white);
	opacity:0.64;
	font-size: 1.0625rem;
	font-weight:500;
	padding:0.25rem 0;
	border-bottom:0;
	border-bottom-width: 0%;
	transition: all 0.24s ease-in-out;
	}
.header #navi ul li a:hover {
	opacity:1;
	}
.header .hamburger,
.header .close {
	width:2rem;
	height:2rem;
	padding:6px;
	display:none;
	cursor: pointer;
	}
.header .hamburger svg, 
.header .close svg {
	fill:none;
	stroke:var(--white);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:4px
	}






/************************ HERO ************************/
	
.hero {
	padding-top: 4rem;
	padding-bottom: 4rem;
	}
.hero:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0; 
	background: rgba(0,0,0,0.48);
	pointer-events: none;
}
.hero .container {
	z-index:100;
	
	}
.hero .content {
	gap:6rem;
}
.hero .logo {
	height:3rem; 
	width:auto;
	margin:0 0 2rem;
	}



/************************ QUOTES ************************/	

.quotes-wrapper {
    display: grid;
    width: 100%;
	position:relative;
}
.quote {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
	position:relative;
	top:-2rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: center;
}
.quote.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.quote.exit-left  { transform: translateX(-60px); opacity: 0; }
.quote.exit-right { transform: translateX(60px);  opacity: 0; }
.quote.enter-left  { transform: translateX(60px);  opacity: 0; }
.quote.enter-right { transform: translateX(-60px); opacity: 0; }



/************************ EXPERTS ************************/	


#experts.section {
	overflow: hidden;
}
#experts .card {
	flex: 0 0 400px;
	background-color:var(--transparent-dark);
}
@media screen and (max-width:480px) {
	#experts .card {
		flex: 0 0 calc(100% - 5rem);
	}
}

/************************ FOOTER ************************/	
	
.footer {
	padding-top: 0;
	padding-bottom: 0;
	color:var(--cloud);
	max-width:100%;
	}
.footer .row {
	gap:2rem;
	}

/************************ RESPONSIVENESS ************************/

@media screen and (max-width:1024px) {
	.row {
		flex-direction: column;
		gap:2rem;
	}
	.row .row {
		gap:1.5rem;
	}
	.row .column.padding {
		width:100%
	}
	.fullpage {
		height: auto;
	}
	img {
		max-width:750%;
	}
	.hide_mobile {
		display:none !important;
	}
	.hide_desktop {
		display:inherit !important;
	}
	.header.row {
		flex-direction: row !important;
	}
	.hero {
		padding-top: 0;
		padding-bottom: 4rem;
	}
	.hero .container {
		padding:1rem;
	}
	.header #navi {
		padding: 2rem 1.5rem 0 2.5rem;
		position:fixed;
		top:0;
		right:-90%;
		transition: all ease 0.3s;
		background-color: rgba(0,0,0,0.9);
		box-shadow: 0 0 32px rgba(0,0,0,.48);
		width:90%;
		max-width:640px;
		height:100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap:6rem;
		align-items: flex-end;
		z-index:1;
	}
	.header #navi ul li a {
		font-size: 1.25rem;
		line-height: 1.75rem;
		font-weight:500;
		padding:0.25rem 0;
		border-bottom:0;
		border-bottom-width: 0%;
	}
	.header #navi.opened {
		right:0;
	}
	.header #navi ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		width: 100%;
		text-align: left;
	}
	.header .hamburger,
	.header .close {
			display: block;
	}

	.pointers {flex-direction: row !importnt;}

	.mobile-reverse > *:last-child {order:1}
	.mobile-reverse > *:first-child {order:2}

	.width_80 {width:80%}
	.width_75 {width:80%}
	.width_60 {width:80%}
	.width_50 {width:60%}
}

@media screen and (max-width:768px) {
	
	h1 {
		font-size:3rem;
		line-height:3.25rem;
		margin:0 0 1.25rem 0;
		}
	h2 {
		font-size:2.25rem;
		line-height:2.5rem;
		margin:0 0 1rem;
		}
	h3 {
		font-size:1.75rem;
		line-height:2.125rem;
		margin:0 0 0.75rem;
		color:var(--black);
		}
	h4 {
		font-size:1.5rem;
		line-height:2rem;
		font-weight:700;
		margin:0 0 0.5rem;
		}
	h5 {
		font-size:1.25rem;
		line-height:1.625rem;
		margin:0 0 0.25rem;
		}
	blockquote {
		font-size:1.75rem;
		line-height:2.5rem;
		margin:0 0 1rem;
	}
	blockquote:before {
		content: "\201C";
		display: block;
		font-size: 400%;
		font-weight:700;
		position: relative;
		top: 1rem;
		left: -0.25rem;
	}
	.container {
		padding: 3rem 1rem;
		gap:4rem;
		}

	.rounded {border-radius:1rem;}
	.row .rounded {border-radius:0.5rem;}

	.padding {padding:1.5rem 1.75rem 1.25rem;}
	.row .padding {padding:1.5rem 1.75rem 1.25rem;}

	.width_80 {width:80%}
	.width_75 {width:80%}
	.width_60 {width:80%}
	.width_50 {width:80%}

}

@media screen and (max-width:480px) {
	a {
		font-size:1.125rem;
		line-height: 1.625rem;
	}
	img {
		max-width:100%;
		}
	.clients img {
		max-width: 72%;
		margin:0 auto;
	}
	.width_80, 
	.width_75,
	.width_60, 
	.width_50 {width:100%}

}