@font-face {
	font-family: 'jet_brains_mono';
	src: url("webfonts/JetBrainsMono-Regular.woff2") format("woff2")
}

@font-face {
	font-family: 'font_700';
	src: url("webfonts/Font_700.woff2");
	font-weight: 700;
}

@font-face {
	font-family: 'test_400';
	src: url("webfonts/Font_400.woff2");
	font-weight: 700;
}

@font-face {
	font-family: 'test_300';
	src: url("webfonts/Font_300.woff2");
	font-weight: 700;
}

@font-face {
	font-family: 'Kumbh_Sans_Medium';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("webfonts/Kumbh_Medium.woff2") format('woff2');
  }

  @font-face {
	font-family: 'Kumbh_Sans_Bold';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("webfonts/Kumbh_Bold.woff2") format('woff2');
  }

  @font-face {
	font-family: 'Kumbh_Sans_Light';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("webfonts/Kumbh_Light.woff2") format('woff2');
  }

.h2_left {
	font-family: "font_700";
	color: #f94135;
	font-size: 2.5em;
	max-width: 1000px;
	padding-left: 150px;
}

.h2_typewriter {
	font-family: "jet_brains_mono";
	color: #f94135;
	font-size: 1.4em;
	max-width: 1000px;
}

.h2_left_grid {
	font-family: "font_700";
	color: #f94135;
	font-size: 2.5em;
	max-width: 500px;
	padding-left: 150px;
}

.h2_left_grid_2 {
	font-family: "font_700";
	color: #f94135;
	font-size: 2.5em;
	max-width: 550px;
	padding-left: 35px;
}

.h2_center_grid {
	font-family: "font_700";
	color: #f94135;
	font-size: 2.5em;
	text-align: center;
	align-content: center;
}


.h2_right {
font-family: "font_700";
	color: #f94135;
	font-size: 2.5em;
	max-width: 600px;
	padding-left: 700px;
}

.paragraph_black {
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	max-width: 1000px;
	padding-left: 150px;
}

.paragraph_grid {
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	padding-left: 150px;
	text-decoration: none;
	max-width: 700px;
	color: #000000
}

.paragraph_white {
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	max-width: 50%;
	color: #FFFFFF;
	padding-left: 700px;
}

.paragraph_grid_white {
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	padding-left: 150px;
	color: #efeded;
	padding: 30px;
}

.paragraph_grid_white_2 {
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	padding-left: 35px;
	color: #efeded;
	max-width: 90%;
}

.paragraph_grid_white_centered {
	display: block;
	font-family: "test_300";
	font-size: 1.2em;
	line-height: 27px;
	color: #efeded;
	text-align: center;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.paragraph_bold {
	font-family: "font_700";
	font-size: 1.2em;
	padding-left: 150px;
}

.paragraph_circle{
	position: relative;
	font-family: "test_400";
	font-size: 1.4em;
	line-height: 27px;
	padding-left: 150px;
	margin-top: 380px;
	color: #efeded;
	z-index: 1000;
}

.paragraph_circle_phone{
	position: relative;
	font-family: "test_400";
	font-size: 1.4em;
	line-height: 27px;
	padding-left: 20px;
	color: #efeded;
	z-index: 10;
	padding-top: 40px;
	padding-bottom: 40px;
}

/* Media query for responsive design */
@media (max-width: 960px) {
    .paragraph_white {
        padding-left: 20px;
		padding-right: 20px;
		max-width: 100%;
    }
	
	.paragraph_grid_white_2 {
        padding-left: 20px;
		padding-right: 20px;
		max-width: 100%;
    }
	
	.paragraph_grid {
		padding-left: 20px;
		padding-right: 20px;
		max-width: 68%;
	}
	.paragraph_black {
		padding-left: 20px;
		max-width: 90%;
	}
	.h2_left {
		padding-left: 20px;
	}
	.h2_left_grid {
		padding-left: 20px;
	}
	
	.h2_left_grid_2 {
		padding-left: 20px;
	}
	
	.h2_right {
		padding-left: 20px;
	}
	.paragraph_bold {
		padding-left: 20px;
	}

	.paragraph_circle {
		display: none;
	}
	.paragraph_circle_phone{
		display: block;
	}
}

/* Basic styling */
body {
	font-family: "test_300";
    background-color: #efeded;
}

header {
    /*background-color: #333;*/
    color: #fff;
    text-align: center;
    padding: 20px 0;
	position: relative; /* Position relative for the pseudo-element */
}

.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100; /* Ensure it appears above other content */
  /* Add any other styles you want for the sticky header */
}

/* Scalable image CSS */
.scalable-image {
    max-width: 30%; /* Make the image scalable while maintaining aspect ratio */
}


/* Scalable image CSS */
.scalable-image_2 {
	padding-left: 35px;
    max-width: 90%; /* Make the image scalable while maintaining aspect ratio */
}


/* Adjust styles for the image */
.image-column img {
    max-width: 80%; /* Ensure the image fits within the column */
	min-width: 250px;
    height: auto; /* Maintain aspect ratio */
	border-radius: 50%;
	padding: 40px;
	padding-top: 100px;
	margin-left: 80px;
}

.image-project{
	max-width: 80%;
	display: block;
	align-content: center;
  	margin-left: auto;
  	margin-right: auto;
}

.runder-kreis-1 {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 30%;
	min-width: 250px;
}

.runder-kreis-2 {
	position: absolute;
	top: 2000;
	left: 0;
	z-index: 1;
	width: 550px;
	padding-top: 280px;
}

@media (min-width: 960px) and (max-width: 1250px) {
	.runder-kreis-2 {
		opacity: 30%;
		max-width: 80%;
	}
	.paragraph_circle {
		display: none;
	}

}

@media (max-width: 960px) {
	.scalable-image {
		max-width: 60%;
	}
    .scalable-image_2 {
        padding-left: 20px;
		padding-right: 20px;
		max-width:90%;
    }
	.runder-kreis-1 {
		opacity: 0.3;
	}
	.image-column img {
		display: block;
		align-content: center;
		margin-left: 0;
		margin-right: auto;
		min-width: 500px;
		padding: 0px;
		padding-top: 10px;
	}
	.runder-kreis-2 {
		display: none;
	}
}	

/* Updated navigation styling */
.a {
	color: #efeded;
	font-family: "test_300";
	font-size: 1.8em;
	text-decoration: none;
}

#menu-list li {
    margin: 10px;
}

#menu-list {
	list-style-type: none;
}

/* Media query for smaller screens */
@media (max-width: 960px) {
	#menu-list{
		display: none;
		left:45%;
		padding: 0;
		text-align: center;
		position: absolute;
		top: calc(15% + 10px); /* Position below the icon */
		z-index: 3;
	}
	
	a {
	color: #2e2e2e;
}
}


/* Media query for larger screens */
@media (min-width: 960px) {
    /* Display the menu list vertically */
    #menu-list {
		position: absolute;
		right: 0;
		top: 0;
		padding-right: 100px;
		padding-top: 50px;
        display: block;
        text-align: right; /* Align the menu list to the left */
        width: 200px; /* Set the width of the vertical menu */
    	z-index: 4;
		list-style-type: none;
    }
	
	a {
		font-size: 1.8em;
	}

}

/* Updated content section styling with different background colors */
.section1 {
    width: 100%; /* Fill the entire width */
	padding-top: 150px;
	overflow: hidden;
	/*background-color: #f7d794; /* Section 1 background color */
}

.section2 {
    width: 100%; /* Fill the entire width */
    /*padding: 20px;*/
    background-color: #2e2e2e; /* Section 2 background color */
	overflow: hidden;
}

.section3 {
	width: 100%; /* Fill the entire width */
    background-color: #efeded; /* Section 3 background color */
	overflow: hidden;
}

.section_phone{
	width: 100%; /* Fill the entire width */
    background-color: #f94135; /* Section 3 background color */
	overflow: hidden;
	display: none;
}

.grid-container {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}	

.grid-container_2 {
	display: grid;
	width: 100%;
	grid-template-columns: 40% 60%;
	gap: 0px;
}	

@media (max-width: 1250px) {
		.section_phone{
		display: block;
	}
}
/* Media query for responsive design - stack columns on small screens */
@media (max-width: 960px) {
    .grid-container {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }
	.grid-container_2 { 
		grid-template-columns: 1fr;
	}
	.section1{
		padding-top: 30px;
	}
}

.section4 {
    width: 100%; /* Fill the entire width */
    background-color: #2e2e2e; /* Section 4 background color */
	overflow: hidden;
}

.section5 {
    width: 100%; /* Fill the entire width */
    background-color: #efeded; /* Section 4 background color */
	overflow: hidden;
	padding-bottom: 40px;
}

.typewriter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
	margin: 0;
	max-height: 50px;
}
 
.hidden {
	display: none;
}

@keyframes blink {
    0% { visibility: hidden; }
    50% { visibility: hidden; }
    100% { visibility: visible; }
}

#underscore {
    animation: blink 1.0s infinite;
}


/* Footer styling */
footer {
    background-color: #2e2e2e;
    color: #efeded;
    text-align: center;
    padding: 10px 0;
	text-decoration: none;
}

.footer {
	font-size: 1em;
	text-decoration: none;
	color: #efeded
}

/* Smooth scrolling behavior for anchor links */
html {
    scroll-behavior: smooth;
}