@charset "utf-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
} 


h1 {
	font-size: 48px;
	font-weight: 700;
	color: white;
}

h2{
	font-size: 40px;
	font-weight: 500;
	font-style: italic;
	color: #5603AD;
}

h3{
	font-size: 26px;
	font-weight: 500;
	color: #5603AD; /* mit definierten Farben austauschen */
}

h4{
	font-size: 18px;
	font-weight: 700;
}

p,
a{
	font-size: 18px;
	font-weight: 500;
	color: #0E041E;
}

small {
	font-size: 13px;
	font-weight: 500;
	color: rgba(14, 4, 30, 0.35);
}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
	margin-left: auto;
	width: inherit;
}

li {
  float: right;
	padding-left: 3%;
}

li a {
  display: block;
  color: #0e041e;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  color: #5603AD;
}

body {
	margin: 0;
}


.header{
	position: fixed;
	align-items: center;
	padding: 32px 100px 32px 100px;
	width: 100%;
	background-color: rgba(14, 4, 30, 0.80);
	backdrop-filter: blur(5px);
	top: 0; left: 0;
	display: flex;
	z-index:100;
}

.header li a {
	color: white;
}

.header_right {
	list-style: none;
	display: inline-block;
	margin-right: 160px;
	margin-left: 3%;
}

.header_logo{
	width: 63px;
}

.header_contact{
	text-decoration: none;
	background: none;
	border: 2px solid #F6FAFE; /* später in defin. Farbe austauschen */
	color: #F6FAFE;
	border-radius: 16px;
	padding: 6px 16px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}

.popup .overlay {
	position: fixed;
	top:0px;
	left:0px;
	width:100vw;
	height: 100vh;
	background:rgba(0,0,0,0.7);
	z-index:1;
	display:none;
}

.popup .content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    background: #fff;
    width: 375px;
    height: fit-content;
    z-index: 3;
    text-align: left;
    padding: 3%;
    box-sizing: border-box;
}

.popup .close-btn {
	position:absolute;
	right:20px;
	top:20px;
	width:auto;
	height:auto;
	color:#0E041E; /* definierte Farbe einsetzen */
	font-size:42px;
	font-weight:200;
	line-height:30px;
	text-align:center;
	border-radius:50%;
}

.popup.active .overlay {
	display:block;
}

.popup.active .content {
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
    display: block; 
}

.popup.active .content h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

.popup.active .content input {
	margin-bottom: 15px;
}


/*Header - Mareen*/

.navigation {
	padding: 1% 8%;
}

/* Container max width*/

.container {
	padding: 5% 8%;
}


.opener {
	background-image: url("img/mindwavr.jpg");
	background-repeat: no-repeat;
	min-height: 520px;
	background-position: right;
	background-size: auto;
	align-content: end;
}

.opener p {
	color: white;
	max-width: 50%;
}

.outfit {
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

	.product{
		margin-bottom: 0px;
		padding-bottom: 0px;
	}

	.product div {
		width: 100%;
		display: flex;
  		flex-direction: column; 
	}

.application {
	display: flex;
	padding-top: 0px;
}

.application div {
	width: 30%;
	padding: 3%;
}

.application div:first-child {
	padding-left: 8%
}

.application div:last-child {
	padding-right: 8%
}

.application .first-step,
.application .third-step {
	background-color: #5603AD;
}

.application .second-step {
	background-color: #8367C7;
}

.application .first-step p,
.application .first-step h3,
.application .second-step p,
.application .second-step h3,
.application .third-step p,
.application .third-step h3{
	color: white;
}

.application .number {
	font-size: 48px;
	text-align: center;
	font-weight: 900;
	margin-top: 0;
}

.scope-boxes {
	display: flex;
	flex-direction: row;
}

.scope-boxes div{
	width: 30%;
	padding: 20px 25px;
	display: flex;
	background-color: #5603AD;
	border-radius: 10px;
}

.scope-boxes div:first-child,
.scope-boxes div:nth-child(2) {
	margin-right: 5%;
}

.scope-boxes div h4 {
	margin: 0;
	color: white;
	align-self: center;
}

.scope-boxes span {
	margin-right: 5%;
	color: white;
	font-size: 50px;
}

.testimonials {
	background-color: #5603AD;
	display: flex;
	align-items: center;
}

.testimonials div {
	background-color: white;
	border-radius: 10px;
	padding: 3% 5%;
	position: relative;
    animation: animateright 0.5s;
}

.testimonials h3 a {
	text-decoration: none;
	font-size: 26px;
	font-weight: 800;
	color: #5603ad;
}

.testimonials h4 a {
	text-decoration: none;
	font-size: 18px;
	font-weight: 800;
	color: #5603ad;
}

.w3-button {
	width: 60px;
    height: 60px;
    background-size: 50px;
    font-size: 30px;
    background-color: transparent;
    border: none;
    position: relative;
	margin: 0 15px;
	color: white;
}

@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.contact {
	display: flex;
	
}

.contact-image {
	height: 460px;
	background-position: center;
	background-size: auto;
	align-content: end;
	background-image: url("img/neuroflexr.jpg");
	background-color:green;
	width: 50%;
	overflow: hidden;
}

.contact-text {
	width: 40%;
	padding: 5% 5%;
	align-content: center;
}

.contact-text .header_contact,
.content .header_contact{
	border: 2px solid #5603AD;
	color: #5603AD;
}

.content .header_contact {
	margin-top: 5px;
}

.header_contact:hover {
	cursor: pointer;
}

.footer {
	background-color: #0e041e;
	display: flex;
}

.footer p,
.footer a{
	color: white;
}

.footer p {
	margin-top: 0;
}

.footer-logo {
	margin-right: 30px;
}

.links {
	display: flex;
	align-self: center;
	margin-left: auto;
}

.links p {
	margin: 0 15px;
}

.instagram_logo,
.x_logo,
.threads_logo {
	width: 20px;
	position: relative;
	top: 1px;
}

.x_logo {
	top: 2.5px;
}

.threads_logo {
	top: 0;
}

.links a {
	text-decoration: none;
}

/*Data Protection*/

.data-protection .header_right,
.imprint .header_right{
	margin-left: auto;
}

.data-protection .container,
.imprint .container{
	padding: 8% 8% 5% 8%;
}

.data-protection h1,
.imprint h1{
	color: #5603AD;
}

.imprint .data-protection-link {
	text-decoration: none;
	color: #5603AD;
}

@media screen and (max-width: 1449px){ 

	h1 {
		font-size: 44px;
	}

	h2{
		font-size: 36px;
	}

	h3{
		font-size: 22px;
	}
}
/*
.contact-image {
		background-image: url("img/neuroflexr.jpg");
		background-size: cover;
		background-repeat:no-repeat;
		width: auto;
	}
}
*/
@media screen and (max-width: 1279px){ 

	h1 {
		font-size: 42px;
	}

	h2{
		font-size: 34px;
	}

	h3{
		font-size: 20px;
	}
}
/*
.contact-image {
		background-image: url("img/neuroflexr.jpg");
		background-size: cover;
		background-repeat:no-repeat;
		width: auto;
	}
}
*/
@media screen and (max-width: 1023px){ 

	h1 {
		font-size: 40px;
	}

	h2{
		font-size: 32px;
	}

	h3{
		font-size: 18px;
	}

}

@media screen and (max-width: 767px){ 
	
	.opener {
	background-image: url("img/mindwavr.jpg");
	background-repeat: no-repeat;
	min-height: 520px;
	background-position: center;
	background-size: auto;
	align-content: end;
}
	
	.opener p {
		max-width: 100%;
	}
	
	.product{
		margin-bottom: 0px;
		padding-bottom: 0px;
	}

	.product div {
		width: 100%;
		display: flex;
  		flex-direction: column; 
	}
	
	.application-container {
			padding-top: 0px;
	}

	.application {
  		display: flex;
  		flex-direction: column; 
	}
	
	.application div {
		width: 100%;
		padding: 8%;
	}
	
	.application div:first-child {
		padding: 8%;

	}

	.application div:second-child {
		padding: 8%;

	}
	
	.application div:third-child {
		padding: 8%;

	}
	.application p
	{
		width: 85%;
	}
	
	.scope-boxes {
  		display: flex;
  		flex-direction: column; 
		width: 100%;
	}
	
	.scope-boxes div {
		width: auto;
		margin-bottom: 8px;
		margin-right: 0px !important;
	}
	
	
	
	.contact {
		display: flex;
		flex-direction: column;
	}

	
	.contact-image {
		background-image: url("img/neuroflexr.jpg");
		background-size: cover;
		background-repeat:no-repeat;
		width: auto;
	}
	
	.contact-text {
		width: auto;
	}
	
	.footer {
		display: block;
	}
}