@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
  {
	margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
}


  html,body {
	overflow-x: hidden;
	scroll-behavior: smooth;
	font-family: 'Poppins', sans-serif;
}
.txt {
	font-size: 70px;
}
#section0 {
	height: 930px;
}
nav {
	margin-bottom: 120px;
}
nav ul {
	list-style: none;
	display: flex;
	gap:20px;
}
nav a{
	color: #062b82;
	text-decoration: none;
	position: relative;
	padding: 2px;
}
nav a:hover{
	color: #5378cf;
}
nav a::after{
	content: '';
	height: 2px;
	width:0%;
	background: #5378cf;
	position:absolute;
	bottom: 0;
	left:0;
	transition: 150ms ease-in-out;
}
nav a:hover::after{
	width:100%;
}
.slider{
	position: absolute;
	width: 100%;
	background: #2c3e50; /* darckblue */
	top: 130px;
}
.myslide{
	height: 800px;
	display: none;
	overflow: hidden;
}

.prev, .next{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 50px;
	padding: 15px;
	cursor: pointer;
	color: #fff;
	transition: 0.1s;
	user-select: none;
}
.prev:hover, .next:hover{
	color: #062b82; /* blue */
}
.next{
	right: 0;
}
.dotsbox{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 20px;
	cursor: pointer;
}
.dot{
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	border-radius: 50%;
	margin: 0 10px;
	cursor: pointer;
}
#toggle_button{
	display: none;
}
label[for="toggle_button"]{
	display:none;
}
label[for="toggle_button"] span{
	font-size: 20px;
}
/* /2 */

/* javascript */
.active, .dot:hover{
	border-color: #062b82; /* blue */
}
/* /javascript */

/* muslide add fade */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
.container2 {
	position: absolute;
	top: 3700px;
	width: 80%;
	margin: 50px auto;
	left: 50%;
  	transform: translate(-50%, -50%);
	max-width: 90%;
}
.body{
	margin: 0%;
	
}

nav{
justify-content: space-around;

}

header{
position: absolute;
top:0px;
left: 0px;
right: 0px;
width: 100%;
background: #fff;
display: flex;
justify-content: space-between;
height: 130px;
}
.container1 {
	width:900px;
	margin-top: 54px;
	margin-right: -277px;
	}
.logo{
	top: -357px;
	scale: 12%;
	object-fit:cover;
	position:absolute;
	left:-1216px;
}

	.menu-link {
	color: #062b82;
	margin-left: 26px;
	font-size: 18px;
	text-decoration:none;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
}
	.name a{
		text-decoration: none;
		color: #062b82;
	}
	#about_me_section{
		padding: 100px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 100px;
		flex-wrap: wrap-reverse;
	}
	.about_me_container{
		width: 750px;
		max-width: 90%;
	}
	#about_me_section img{
		width: 300px;
		max-width: calc(90% - 20px);
		border: 2px solid;
		border-color: #fff;
	}
	.about_me_container h2{
		font-size: 80px;
		color: #062b82;
		margin: 0%;
	}
	.about_me_container p{
		text-align: justify;
		line-height: 155%;
	}
	#services_section{
		padding: 70px 0;
		background-color: #062b82;
	}
	#services_section h2{
		font-size: 30px;
		text-align: center;
		color: #fff;
	}
	#services_section img{
		display: block;
	  	margin-left: auto;
  		margin-right: auto;
	}
	.flex_container{
		margin-top:50px;
		display:flex;
		gap: 40px;
		justify-content: center;
		flex-wrap: wrap;
	}
	.card {
		width: 350px;
		background-color: #0e3185;
		border-radius: 100px;
		padding: 60px 20px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
	}
	.card p{
		color: #fff;
	}
	.card *{
		text-align: center;
	}
	.abstand {
		position: absolute;
		top: 10000px;
	}
	.line_rechts{
		position: absolute;
		color: #062b82;
		width: 885px;
		height: 453px;
		top: 1900px;
		left: 1374px;
		  transform: rotate(43deg);
		background-color: #062b82;
		border-width:0px;
	}

	.line_links{
		position:absolute;
		color: #5378cf;
		width: 3623px;
		height: 392px;
		top: 2533px;
		left: -841px;
		  transform: rotate(225deg);
		background-color: #5378cf;
		border-width:0px;
	}


	#section3{
		gap: 20px;
		padding: 70px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	#section3 h1{
		font-size: 40px;
		color: #062b82;
	}

	#section4 {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #fff;;
	}
	#section4::before {
		content: '';
		position: absolute;
		left: 0;
		width: 50%;
		height: 100%;
		background: #fff;
	}
	.contact_container{
		position: relative;
		min-width: 1100px;
		min-height: 550px;
		display: flex;
		z-index: 1000;
	}
	.contact_container .contactInfo
	{
		position: absolute;
		top: 40px;
		width: 350px;
		height: calc(100% - 80px);
		background: #062b82;
		z-index: 1;
		padding: 40px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: 0 20px 25px rgba(0,0,0,0.15);
	}
	.contact_container .contactInfo h2
	{
		color: #fff;
		font-size: 24px;
		font-weight: 500;
	}
	.contact_container .contactInfo ul.info
	{
		position: relative;
		margin: 20px 0;
	}
	.contact_container .contactInfo ul.info li
	{
		position: relative;
		list-style: none;
		display: flex;
		margin: 10px 0;
		cursor: pointer;
		align-items: flex-start;
	}

	.contact_container .contactInfo ul.info li span:nth-child(1)
	{
		width: 30px;
		min-width: 30px;
	}
	.contact_container .contactInfo ul.info li span:nth-child(1) img
	{
		max-width: 100%;
	}
	.contact_container .contactInfo ul.info li span:nth-child(2)
	{
		color: #fff;
		margin-left: 10px;
		font-weight: 300;
	}
	.contact_container .contactInfo ul.sci
	{
		position: relative;
		display: flex;
	}
	.contact_container .contactInfo ul.sci li
	{
		list-style: none;
		margin-right:15px;
	}
	.contact_container .contactInfo ul.sci li a
	{
		text-decoration: none;

	}
	.contact_container .contactInfo ul.sci li a img
	{
		filter: invert(1);
	}


	.contact_container .contactForm{
		position:absolute;
		padding: 70px 50px;
		padding-left: 250px;
		margin-left: 150px;
		width: calc(100% - 150px);
		height: 100%;
		background: #fff;
		box-shadow: 0 50px 50px 40px rgba(0,0,0,0.25)
	}
	.contact_container .contactForm h2{
		color: #062b82;
		font-size: 24px;
		font-weight: 500;
	}
	.contact_container .contactForm .formBox{
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 30px;
	}
	.contact_container .contactForm .formBox .inputBox{
		position: relative;
		margin-bottom: 35px;
	}
	.contact_container .contactForm .formBox .inputBox.w50{
		width: 47%;
	}
	.contact_container .contactForm .formBox .inputBox.w100{
		width: 100%;
	}
	.contact_container .contactForm .formBox .inputBox input,
	.contact_container .contactForm .formBox .inputBox textarea{
		width: 100%;
		resize:none;
		padding: 5px 0;
		font-size: 18px;
		font-weight: 300;
		color: #333;
		border: none;
		outline: none;
		border-bottom: 1px solid #777;
	}
	.contact_container .contactForm .formBox .inputBox textarea{
		height: 120px;
	}
	.contact_container .contactForm .formBox .inputBox span{
		position: absolute;
		left: 0;
		padding: 5px 0;
		pointer-events: none;
		font-size: 18px;
		font-weight: 300;
		transition: 0.3s;

	}
	.contact_container .contactForm .formBox .inputBox input:focus ~ span,
	.contact_container .contactForm .formBox .inputBox input:valid ~ span,
	.contact_container .contactForm .formBox .inputBox textarea:focus ~ span,
	.contact_container .contactForm .formBox .inputBox textarea:valid ~ span
	{
		transform: translateY(-20px);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 1px;
		color: #062b82;
		font-weight: 500;
	}
	.contact_container .contactForm .formBox .inputBox input[type="submit"] {
		position: relative;
		cursor: pointer;
		background: #062b82;
		color: #fff;
		border: none;
		max-width: 150px;
		padding: 12px;
	}
	.contact_container .contactForm .formBox .inputBox input[type="submit"]:hover
	{
		background: #5378cf;
	}
	footer{
		background-color: #062b82;
		padding: 15px;
		right: 0;
		left: 0;
		bottom: 0;
	}
	footer a{
		position: relative;
		margin-top: 33px;
		margin-left: 20px;
		text-decoration: none;
		color: #fff;
	}
	footer a:hover{
	color: #5378cf;
}
	.beraten a{
		text-decoration: none;
		color: #fff;
	}
	.beraten:hover{
		box-shadow: inset 190px 0 0 0 #5378cf;
	}


button{
	background: #062b82;
	width: 100px;
	border: none;
	color: #fff;
	height: 35px;
	border-radius: 30px;
	margin-top: 20px;
	box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}
.button2:hover{
	box-shadow: inset 100px 0 0 0 #5378cf;
}
.contact-left h3{
	color:#062b82;
	font-weight: 600;
	margin-bottom: 30px;
}
.contact-right h3{
	font-weight: 600;
	margin-bottom: 30px;
}
tr td:first-child{
	padding-right: 20px;
}
tr td {
	padding-top: 20px;
}
.whatsapp-btn-container {
    position: fixed;
    right: 30px;
    opacity: 0;
    bottom: -50px;
    padding: 24px;
    animation: fade-up 1000ms forwards;
    animation-delay: 1000ms;
}

@keyframes fade-up {
    100% {
        bottom: 24px;
        opacity: 1;
    }
}

.whatsapp-btn-container .whatsapp-btn {
    font-size: 48px;
    color: #fff;
    display: inline-block;
    transition: all 400ms;
}

.whatsapp-btn-container .whatsapp-btn:hover {
    transform: scale(1.2);
}

.whatsapp-btn-container span {
    position: absolute;
    top: 0;
    left: 4px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: #fff;
    transform: rotateZ(20deg) translateX(10px);
    opacity: 0;
    transition: all 400ms;
}

.instagram-btn-container .instagram-btn:hover + span {
    transform: rotateZ(0deg) translateX(0px);
    opacity: 1;
}

.instagram-btn-container .instagram-btn {
    font-size: 48px;
    color: #fff;
    display: inline-block;
    transition: all 400ms;
}

.instagram-btn-container .instagram-btn:hover {
    transform: scale(1.2);
}

.instagram-btn-container span {
    position: absolute;
    top: 0;
    left: 4px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: #fff;
    transform: rotateZ(20deg) translateX(10px);
    opacity: 0;
    transition: all 400ms;
}

.instagram-btn-container .instagram-btn:hover + span {
    transform: rotateZ(0deg) translateX(0px);
    opacity: 1;
}



@-webkit-keyframes fade {
  from {opacity: 0.8}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.8}
  to {opacity: 1}
}
/* /muslide add fade */

/* 3 */
.txt{
	position: absolute;
	color: #ffffff;
	letter-spacing: auto;
	line-height: 25px;
	top: 40%;
	left: 15%;
	-webkit-animation-name: posi;
  	-webkit-animation-duration: 2s;
  	animation-name: posi;
  	animation-duration: 2s;
	z-index: 1;
	font-family: Courier New, monospace;
}

@-webkit-keyframes posi {
  from {left: 25%;}
  to {left: 15%;}
}


@keyframes posi {
  from {left: 25%;}
  to {left: 15%;}
}

.txt h1{
	color: #05287a; /* blue */
	font-size: 50px;
	margin-bottom: 20px;
}
.txt p{
	font-weight: bold;
	font-size: 20px;
}
/* /3 */

/* 4 */
.IMAGE{
	transform: scale(1.5, 1.5);
	-webkit-animation-name: zoomin;
  	-webkit-animation-duration: 40s;
  	animation-name: zoomin;
  	animation-duration: 40s;
}
@-webkit-keyframes zoomin {
  from {transform: scale(1, 1);}
  to {transform: scale(1.5, 1.5);}
}


@keyframes zoomin {
  from {transform: scale(1, 1);}
  to {transform: scale(1.5, 1.5);}
}
/* /4 */



/* 5 */
@media screen and (max-width: 800px){
	.txt{
		letter-spacing: 2px;
		line-height: 25px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-animation-name: posi2;
		-webkit-animation-duration: 2s;
		animation-name: posi2;
		animation-duration: 2s;
	}

	@-webkit-keyframes posi2 {
	  from {top: 35%;}
	  to {top: 50%;}
	}


	@keyframes posi2 {
	  from {top: 35%;}
	  to {top: 50%;}
	}

	.txt h1{
		font-size: 40px;
	}
	.txt p{
		font-size: 13px;
	}

}
/* /5 */
/* /6 */
@media (max-width: 1000px) {
	nav ul {
		display: none;
		flex-direction: column;
		padding: 0px;
		padding-right: 0px;
	}
}
@media (max-width: 1720px) {
	.container1 {
		width:1000px;
		}
}
@media (max-width: 1455px) {
	.container1 {
		width:1100px;
		}
}
@media (max-width: 1300px) {
	.container1 {
		width:1200px;
		}
}
@media (max-width: 1190px) {
	.container1 {
		width:1400px;
		}
}
@media (max-width: 1060px) {
	.container1 {
		width:1500px;
		}
}
@media (max-width: 800px) {
	html{
		height: 100%;
		width: 100%;
		overflow-x: hidden;
	}
	.logo {
		scale: 5%;
	}
nav {
	position: absolute;
	left: -360px;
	top: -50px;
	background-color: #fff;
	padding: 15px;
	border-radius: 0 0 25px 25px;
        
}
nav ul {
	display: none;
	flex-direction: column;
	padding: 0px;
	padding-right: 0px;
}
label[for="toggle_button"]{
	display:block;
}

.logo {
	scale: 8%;
	position: relative;
	top: -375px;
	left: -1270px;
}
#about_me_section {
	padding: 20px 0;
}
.about_me_container h2{
	font-size: 60px
}
.menu-link {
	font-size: 10px;
}

.txt {
text-align: center;
width: 400px;
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
}
.txt h1{
	font-size: 30px;
}
.txt p{
max-width:70%;

}
.beraten{
	scale: 80%;
}
.prev,
.next {
	display: none;
}
#toggle_button:checked ~ ul {
	display: flex;
}
label[for="toggle_button"]{
	display:none;
}
.slider{
	top: 90px;
}
.dot{
	height: 2px;
	width: 2px;
}
.Über_mich_head{
	font-size: 20px;
	top: 920px;
}
.line_1{
	width: 300px;
	top: 30px;
}
#über_mich_section{
	top: -60px;
	
	max-width: 100%;
	gap: 17px;
}

#über_mich_section img{
	width: 150px;
	border-color: #fff;
	border-radius: 25px 25px 25px 25px;
}
.container3{
	position: absolute;
	top: 38px;
	margin: 150px auto;
	width:100%;
	padding: 8px;
	scale: 50%;
}
.line_2{
	top:2350px;
	width:1900px;
	height: 400px;
}
.google{
	top: 330px;
	left: 0%;
	scale: 80%;
}
.referenzen_head{
	font-size: 17px;
	top: 2380px;
}
.line_refernzen{
	width: 200px;
	top: 2407px;
}
header{
	height: 100px;
}
.kontakte_head{
	font-size: 20px;
	top: 3250px;
}
.line_kontakte{
	width: 300px;
	top: 3280px;
}
.container2{
	position: relative;
	top: -900px;
	scale: 60%;
	left: 0%;
	
}
.line_bottom{
	position: relative;
	top: -1100px;
}
.bottom{
	position: relative;
	top: -1170px;
}
.whatsapp-btn-container{
	right: -315px;
}
}
@media (max-width : 1200px) {
	
	.contact_container
	{
		width:90%;
		min-width: auto;
		margin: 20px;
		box-shadow: 0 20px 50px rgba(0,0,0,0.2);
	}
	.contact_container .contactInfo
	{
		top: 0;
		height:550px;
		position: relative;
		box-shadow: none;
	}
	.contact_container .contactForm
	{
		position: relative;
		width: calc(100% - 350px);
		padding-left: 0;
		margin-left: 0;
		padding: 40px;
		height: 550px;
		box-shadow: none;
	}
}
@media (max-width : 991px) {

	#section4
	{
		background: #fff;
	}
	#section4::before
	{
		display: none
	}
	.contact_container
	{
		display: flex;
		flex-direction: column-reverse;
	}
	.contact_container .contactInfo
	{
		width: 100%;
		height: auto;
	}
	.contact_container .contactForm
	{
		width: 100%;
		height: auto;
		flex-direction: row;
	}
	.contact_container .contactInfo ul.sci
	{
		position: relative;
		display: flex;
		
	}
}
@media (max-width : 600px) {
	.contact_container .contactForm
	{
		padding: 25px;
	}
	.contact_container .contactInfo
	{
		padding: 25px;
		flex-direction: column;
		align-items: flex-start;
	}
	.contact_container .contactInfo ul.sci
	{
		margin-top: 40px;
	}
	.contact_container .contactForm .formBox .inputBox.w50
	{
		width: 100%;
	}
}