/*======================================
 Frontend developed by Ari:
 https://github.com/Ari-Ario?tab=repositories
========================================*/ 

/*======================================
[ CSS Table of contents ]
* Global CSS
* Header CSS
	+ Topbar
	+ Main Menu

* Content CSS
* Contact Us CSS
* About CSS
* Footer CSS
* Responsive CSS
========================================*/ 
/*=================================
	Global CSS, Homepage+common css
==================================*/

body {
	background: #F1EFE5;
	color: black;
	font-family: 'Noto Serif';
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
main {
	width:100%;
	max-width: 1342px;
	text-align: center;
	align-items: center;
	flex: 1;
	flex-direction: column;
	margin-top:176px;
}
*h1 {
	line-height: 50px;
	letter-spacing: 1px;
}
*p {
	line-height: 125%;
	letter-spacing: 0;
}

p > a { color:#31703F; }
p > a:hover { color:#000; text-decoration:none; }

/*=============================
	Header CSS 
===============================*/
.header {
	width: 100vw;
	height: 108px;
	background-color: #F1EFE5 !important;
	position: fixed;
	top: 0px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-description {
	text-decoration:none;
	cursor: pointer;
	line-height: 24px;
}
.header-border {
	max-height: 108px;
	background-color: #f1efe500;
	top:  20px;
	z-index: 10;
	background-color: #F1EFE5;
	display: flex;
	flex:1;
	justify-content: center;
	padding:0 20px;
}

.header-content {
	max-width: 1312px;
	display: flex;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	line-height: 0.2em;
}

.header-content h1 {
	font-size: 24px;
	font-weight: 600;
	color: black;
	margin: 0;
	text-align: left;
}

.header-content h2 {
	font-size: 32px;
	font-weight: 600;
	color: #EE5731;
	margin: 0;
	font-family: 'Caveat';
}

.button-standard {
	color: white;
	border: none;
	padding: 10px 20px;
	height: 39px;
	font-weight: 600;
	line-height:1.1em;
	cursor: pointer;
	border-radius: 30px;
	text-decoration:none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}
.button-standard:hover {
	background-color: black;
}
.button-primary {
	background-color: #31703F; /* 40% darker than #52BA69 */
	font-size: 15px;
	font-weight: 600;
	line-height:1.1em;
	text-decoration:none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.button-secondary {
	background-color: #EE5731;
	height: 48px;
	font-size: 17px;
	font-weight: 600;
	padding: 0 30px;
}
.button-primary, 
.button-standard {
	font-family: 'Noto Sans';
}
.button-popup {
	display: none;
}
.button-header {
	width: 210px;
	max-height: 40px;
	line-height:1.1em;
	text-decoration:none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}
.button-diskalkulie {
	margin-top: 20px;
}
.close-icon {
	display: none;
}
/*=============================
	Sub-Header CSS 
===============================*/
.menu-responsive {
	display: none;
	background-color: #F1EFE5;
	padding: 2px;
}
.sub-header {
	position:fixed;
	top:108px;
	width: 100vw;
	height: 66px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: white solid 1px;
	border-bottom: white solid 1px;
	background-color: #F1EFE5;
	z-index:10;
}
.sidebar,
.tabs {
	display: block;
	align-items: center;
	text-align: left;
	max-width: 1312px;
	width:100%;
	padding:0 20px;
}
.tabs {
	margin-top: 20px;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	box-sizing: border-box;
	max-width:100%;
}

/* Style tab links */

.tablink {
color:inherit;
  background-color: #55555500;
  float: left;
  border: none;
  outline: none;
  padding:0;
  font-size: 17px;
  font-family:'Noto Sans';
  display: flex;
  text-align: center;
  text-decoration:none;
}
.tablink:nth-child(1) {
	padding-right: 4.2%;
}
.tablink:nth-child(2) {
	padding-right: 4.3%;
}
.tablink:nth-child(3) {
	padding-right: 5%;
}
.tablink:nth-child(4) {
	margin-right: auto;
}
.tablink:nth-child(5) {
    float: right;
    margin-right: 0px;
}

.tablink [class^="buttoncontent"],
.tablink [class*=" buttoncontent"] {
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-bottom: 2px solid transparent; 
}
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none; 
}

.tablink [class^="buttoncontent"]:hover,
.tablink [class^="buttoncontent"]:focus,
.tablink [class*=" buttoncontent"]:hover,
.tablink [class*=" buttoncontent"]:focus,
.tablink.selected [class^="buttoncontent"],
.tablink.selected [class*=" buttoncontent"] {
	border-color: rgb(238, 87, 49); 
}

.tablink.selected [class^="buttoncontent"],
.tablink.selected [class*=" buttoncontent"] {
	border-color: rgb(238, 87, 49); 
}

.reserved {
	display: none;
}
/*=============================
	Content CSS 
===============================*/
.tabs [class*=" tabcontent"] + div {
	display: block;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: black;
  display: none;
}
.diskalkulie-paddingbottom {
	padding-top: 7px;
}
.parents-paddingbottom {
	padding-bottom: 0px;
}
.therapy-paddingbottom {
	/* padding-bottom: 2300px; */
}
/* Show the active tab content */
.tabcontent.active {
	display: block;
}
/* Standard container styling */
.standardcontainer {
	display: block;
	justify-content: center;
	align-items: center;
}

/*=============================
	Containers CSS 
===============================*/

.content-containers{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	position: relative;
	margin-bottom: 200px;
	padding: 60px 80px 40px 40px;
	width: 1312px; 
	height: fit-content; 
	box-sizing: border-box;
	width: 100%;
}
.content-containers.align-top {
	align-items: flex-start;
}
@media screen and (min-width: 501px) {
	.content-containers.align-top .description-container > :first-child {
		margin-top: 0 !important;
	}
}
.about-container {
	padding: 28px 80px 20px 40px;
	margin-bottom: 0 !important;
	margin-left: 50px;
}
.cont3 {
	/* margin-top: 160px; */
	/* margin-bottom: 200px !important; */
}
.content-containers h1 {
	line-height: 50px;
	font-size: 45px;
	letter-spacing: 0;
}
.content-containers p {
	max-width: 414px;
	line-height: 125%;
	text-align: left;
}
.content-containers li {
	padding-left: 0px;
	line-height: 125%;
	max-width: 400px;
}

/* Left container styling */
.header-white {
	width: 40%;
	margin-top: 20px;
}
.description-container {
	width: 40%;
}
.curve3-container {
	display: flex;
	align-items: flex-end;
	padding-bottom: 0;
	margin-top: 116px !important;

}

.detail-container h1 {
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: left;
}

/* Right container styling */
.detail-container {
	width: 32%;
	font-size: 20px; 
	font-weight: 400;
}
.des-container ul {
	padding: 0;
	margin: 0;
}
.detail-white ul {
	 padding-left: 12px;
}
.description-container ul {
	padding-left: 24px ;
}
.detail-white ul li {
	list-style-type: none;
	display: flex;
	align-items: center;
	padding-left:25px;
	background-repeat:no-repeat;
	background-position:0 5px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCQkJCQkJCQkJPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0iI0VFNTczMSI+PC9yZWN0PgoJCQkJCQkJCQk8cGF0aCBkPSJNNi43MDI5OCAxMS45ODY3QzYuNjI5MjYgMTEuOTY3IDYuNTc3NjUgMTEuOTM3NSA2LjU0ODE2IDExLjg5ODFDNi41MTg2NyAxMS44NTg3IDYuNDg5MTkgMTEuNzggNi40NTk3IDExLjY2MThDNi40NTk3IDExLjU1MzUgNi40MTU0NiAxMS40NzQ4IDYuMzI3IDExLjQyNTZDNi4yMzg1MyAxMS4zNzYzIDYuMDY4OTcgMTEuMzMyIDUuODE4MzEgMTEuMjkyN0M1LjY1NjEzIDExLjE4NDQgNS41MjM0MyAxMS4wNjEzIDUuNDIwMjIgMTAuOTIzNUM1LjMxNzAxIDEwLjc3NTggNS4yMzU5MSAxMC41NDQ1IDUuMTc2OTMgMTAuMjI5NEM1LjExNzk2IDkuOTA0NTUgNS4wNTg5OCA5LjQyNzA4IDUgOC43OTcwMkM1LjAyOTQ5IDguNDUyNDUgNS4wNTE2MSA4LjE2MjAzIDUuMDY2MzUgNy45MjU3NkM1LjA5NTg0IDcuNjg5NDkgNS4xMjUzMyA3LjQ2Nzk4IDUuMTU0ODIgNy4yNjEyNEM1LjM1Mjg5IDUuODcyNTggNS4xNzM4MSA2LjY5NjY2IDUuNDU4OTIgNS45OTg2NkM1LjU2MjEzIDUuNzgyMDcgNS43NzU5MiA1LjYyNDU2IDYuMTAwMyA1LjUyNjExQzYuMTg4NzcgNS41MDY0MiA2LjMwNjcyIDUuNDk2NTggNi40NTQxNyA1LjQ5NjU4QzYuNjE2MzYgNS40OTY1OCA2Ljc0MTY4IDUuNTA2NDIgNi44MzAxNSA1LjUyNjExQzcuMDY2MDYgNS41OTUwMiA3LjE5ODc2IDUuNzAzMzIgNy4yMjgyNSA1Ljg1MDk5QzcuMjcyNDggNS45OTg2NiA3LjI4NzIzIDYuMTI2NjQgNy4yNzI0OCA2LjIzNDkzQzcuMjI4MjUgNy40NDg5MSA3LjI2Mjc4IDcuNjEyNjMgNy4xNjc0MyA4LjQ3MjE0QzcuMTA4NDUgOS4wMDM3NiA3LjEwMTA4IDkuMzg3NyA3LjE0NTMxIDkuNjIzOThDNy4xNDUzMSA5LjY1MzUxIDcuMTQ1MzEgOS42OTc4MSA3LjE0NTMxIDkuNzU2ODhDNy4xNjAwNiA5LjgwNjEgNy4xODIxNyA5Ljg1MDQgNy4yMTE2NiA5Ljg4OTc4QzcuMjQxMTUgOS45MTkzMiA3LjI3ODAxIDkuOTM0MDggNy4zMjIyNSA5LjkzNDA4QzcuMzgxMjIgOS45MjQyNCA3LjQyNTQ2IDkuODk0NzEgNy40NTQ5NCA5Ljg0NTQ4QzcuNDk5MTggOS43OTYyNiA3LjU0MzQxIDkuNzIyNDIgNy41ODc2NCA5LjYyMzk4QzcuNjQ2NjIgOS41MjU1MyA3LjcyMDM0IDkuNDEyMzEgNy44MDg4MSA5LjI4NDMzQzguMDAwNDkgOS4wMzgyMSA4LjE5MjE3IDguNzcyNDEgOC4zODM4NCA4LjQ4NjkxQzguNTkwMjYgOC4xOTE1NyA4Ljc2NzIgNy45MTA5OSA4LjkxNDY0IDcuNjQ1MTlDOS4xODAwNCA3LjIzMTcxIDkuNDQ1NDQgNi44NzczIDkuNzEwODQgNi41ODE5NkM5Ljk3NjI0IDYuMjg2NjIgMTAuMjI2OSA1Ljk1NjgyIDEwLjQ2MjggNS41OTI1NkMxMC41NTEzIDUuNDM1MDUgMTAuNzA2MSA1LjIwODYyIDEwLjkyNzMgNC45MTMyOEMxMS4xNjMyIDQuNjA4MDkgMTEuMzg0MyA0LjMyNzUyIDExLjU5MDggNC4wNzE1NUMxMS44NDE0IDMuODE1NTkgMTIuMDc3MyAzLjU2OTQ3IDEyLjI5ODUgMy4zMzMyQzEyLjUzNDQgMy4wOTY5MyAxMi44MDcyIDIuNzgxODkgMTMuMTE2OCAyLjM4ODExQzEzLjU0NDQgMS45MTU1NiAxMy45MTMgMS41NzA5OSAxNC4yMjI2IDEuMzU0NDFDMTQuNTMyMyAxLjEyNzk4IDE0LjgwNSAxLjAxNDc3IDE1LjA0MDkgMS4wMTQ3N0MxNS4yMDMxIDAuOTk1MDc4IDE1LjMzNTggMC45OTUwNzggMTUuNDM5IDEuMDE0NzdDMTUuNTU3IDEuMDI0NjEgMTUuNjY3NiAxLjA3ODc2IDE1Ljc3MDggMS4xNzcyQzE1Ljg4ODcgMS4yODU1IDE1Ljk2MjUgMS40MDg1NiAxNS45OTIgMS41NDYzOEMxNi4wMjE0IDEuNjg0MjEgMTUuOTY5OCAxLjg2MTQxIDE1LjgzNzEgMi4wNzhDMTUuNzE5MiAyLjI5NDU4IDE1LjQ2ODUgMi41ODUgMTUuMDg1MiAyLjk0OTI1QzE0Ljc5MDMgMy4yNDQ2IDE0LjQ1ODUgMy41ODkxNiAxNC4wODk5IDMuOTgyOTVDMTMuNzM2MSA0LjM3Njc0IDEzLjQwNDMgNC43NTA4NCAxMy4wOTQ3IDUuMTA1MjVDMTIuNzk5OCA1LjQ0OTgxIDEyLjU4NiA1LjcwNTc4IDEyLjQ1MzMgNS44NzMxNEMxMi4zNzk2IDUuOTgxNDMgMTIuMzEzMiA2LjA5NDY0IDEyLjI1NDMgNi4yMTI3OEMxMi4xOTUzIDYuMzMwOTIgMTIuMTA2OCA2LjQzOTIxIDExLjk4ODkgNi41Mzc2NkMxMS44NDE0IDYuNjM2MSAxMS42NDI0IDYuODQ3NzYgMTEuMzkxNyA3LjE3MjY0QzExLjE0MSA3LjQ5NzUyIDEwLjg5NzggNy44MTc0NyAxMC42NjE5IDguMTMyNUMxMC4zOTY1IDguNTQ1OTggMTAuMTgyNyA4Ljg3MDg2IDEwLjAyMDUgOS4xMDcxM0M5Ljg3MzAzIDkuMzMzNTYgOS43NDc3IDkuNTIwNjEgOS42NDQ0OSA5LjY2ODI4QzkuNTU2MDIgOS44MTU5NSA5LjQ2NzU2IDkuOTU4NyA5LjM3OTA5IDEwLjA5NjVDOS4yOTA2MiAxMC4yMzQzIDkuMTgwMDQgMTAuNDA2NiA5LjA0NzM0IDEwLjYxMzRDOC45NzM2MiAxMC43ODA3IDguODcwNDEgMTAuOTIzNSA4LjczNzcxIDExLjA0MTZDOC42MTk3NSAxMS4xNTk4IDguNTUzNCAxMS4yNDg0IDguNTM4NjYgMTEuMzA3NEM4LjQzNTQ1IDExLjQxNTcgOC4yNTExNCAxMS41Mjg5IDcuOTg1NzQgMTEuNjQ3MUM3LjczNTA5IDExLjc2NTIgNy40ODQ0MyAxMS44NTg3IDcuMjMzNzggMTEuOTI3NkM2Ljk4MzEyIDExLjk5NjYgNi44MDYxOSAxMi4wMTYyIDYuNzAyOTggMTEuOTg2N1oiIGZpbGw9IndoaXRlIj48L3BhdGg+CgkJCQkJCQkJCTwvc3ZnPg==);
	background-size:16px 16px;
}


.checkboxs {
	background-color: #EE5731; 
	color: white; 
	border-radius: 50%; 
	padding: 1px; 
	font-size: 30px;
	margin-right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }
/* Photo container styling */
.owner-container {
	position: absolute;
	top: 88%;
	left: 38.5%;
	transform: translate(-50%, -50%);
	width: 230px;
	height: 230px;
	border-radius: 50%;
	overflow: hidden;
	z-index: 8;
}

.circle-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.second-illustration {
	margin-bottom: 60px;
}
.photo-about .video {
	border-radius: 20px;
	width: 528px;
}
.photo-container {
	max-width: 412px;
}
.photo-th {
	max-width: 412px;
	align-self: auto;
	margin-top: 40px;
	margin-bottom: auto;
}
.first-container {
	margin-top: 60px;
	/* max-height: 660px; */
	padding: 60px 40px 140px 24px;
}
.white-container {
	background-color: white !important;
	border-radius: 20px !important;
}
.white-container2 {
	background-color: white !important;
	border-radius: 20px !important;
	padding-left: 70px;
	padding-bottom: 150px;
	height: 705px;
}
.parents1,
.therapy1,
.diskalkulie1  {
	flex-direction: column;
}

.description-diskalkulie {
	margin-top: auto;
	margin-left: 22px;
	padding-top: 0px;
}
.photo-diskalkulie {
	align-self: center; 
	margin-top: 30px ;
	margin-left: 80px;

}
.photo-about {
	padding-top: 64px;
	width: 50%;
}
.therapy1,
.parents1 {
    margin-top: auto;
	padding-top: 90px;
}
.therapy1 {
}
.therapy1 h1 {
	width: 500px;
}
.diskalkulie-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 40px;
	margin: 68px 0;
	max-width: 864px;
	max-height: 231px;
}
.diskalkulie-container div {
	display: flex;
	justify-content: left;
}
.line-container {
    background-color: white !important;
    border-radius: 20px !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 2px);
    background-size: 50px 50px; /* Adjust spacing of the lines */
}

/* Numbers styling */
.numbers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* It ensures numbers don't interfere with clicks */
}
.numbers-mobile {
	display: none;
}

.number {
	position: absolute;
	font-size: 140px;
	z-index: 8;
}

/* Number positions */
.number-5 {
	top: -6%;
	/* left: -2%; */
	left: -1%;
	/* transform: rotate(-30deg); */
}

.number-4 {
	top: -1%;
	left: 6%;
}
.number-9 {
	top: 45%;
	right: 1.6%;
}

.number-2 {
	top: 72.6%;
	right: 8%;
}

.number-0 {
	top: 81%;
	right: 22%;
}

.curves {
	position: absolute;
	top: 109%;
	left: 43.2%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	border-radius: 51%;
	z-index: 2;
}
.first-container .curves {
	top:115%;
}
.curvesTablet,
.curvesCellphone {
	display: none;
}
.curve2 {
	left: 50.8%;
	top: 120%;
}
.curve3 {
	top: 110% !important;
}
.curve3-container {
}

div.curve4 {
	top: 118%;
	left: 40%;
}

.curve-diskalkulie {
	top: 120%;
	left: 39.3%;
}
.curve-parents {
	top: 120%;
	left: 39.3%;
}
.curve-therapy {
	top: 121%;
	left: 39.3%;
}

:last-child > .curves,
:last-child > .curvesTablet,
:last-child > .curvesCellphone {
	display: none!important;
}
/* Cards Container styling */
.cards-container {
	display: flex;
	justify-content: space-between; 
	gap: 0 20px;
	max-width: 1312px;
	margin: 0 0 20px 0;
	padding-top: 100px;
}

.cards-container + .container-reverse .curveCellphone1 { padding-top:0 !important; }
.button-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 35px;
	margin-bottom: 140px;
}

/* Card Styling */
.card {
	background-color: #fff;
	border-radius: 20px;
	padding: 22px 50px;
	flex: 1 1 calc(33.333% - 20px);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Content */
.card h2 {
	font-size: 36px;
	line-height: 36px;
}

/* h2:has(+ p) {
	margin-bottom: 40px !important;
  } */

.card p {
	padding-top: 0px;
	font-size: 20px;
}

.photo-introducing {
	width: 50%;
	border-radius: 20px;
	max-width: 528px;
	overflow: hidden;
	z-index: 9;
}

.owner-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Container of questions */
.question-container,
.question-container2,
.question-parents {
	text-align: center;
	align-items: center;
	max-width: 864px;
	margin: auto;
}
.question-container {
	margin-bottom: 107px;
	margin-top: 140px;
}
.question-container2 {
	margin-top: 48px;
	padding-left: 40px;
	height: auto;
	margin-bottom: 72px;
}
.question-parents {
	margin-top: 18px;
	padding-right: 26px;
	margin-bottom: 104px;
}
.question-container h1,
.question-container2 h1,
.question-parents h1 {
	line-height: 50px;
	text-align: left;
	margin-bottom: 30px;
	max-width: 70%;
}
.question-container2 h1 {
	margin-bottom: 50px;
}

.question-container h1:empty,
.question-container2 h1:empty,
.question-parents h1:empty { display:none; }

.question-container2 p,
.question-container p, 
.question-parents p  {
	text-align: left;
	margin-bottom: 50px;
	line-height: 123%;
}

.question-home {
	padding: 30px 0;
	width: 100%;

}
.question-therapy {
	padding: 35px 0;
	width: 100%;
}
.faq-item {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-top:-1px;
	/* Note:we have two different paddings in Home and in Therapie Möglichkeitne */
	cursor: pointer;
	text-align: left;
}
.faq-item div:first-child {
	font-size: 25px;
	font-weight: 700;
}
.question span { margin-right: 24px; }
.last-question {
	border-bottom: 1px solid black;
}
.faq-content {
	display: none;
	padding-top: 10px;
}
.faq-item .question {
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-item .arrow {
	transition: transform 0.3s;
}
.faq-item.open .arrow {
	transform: rotate(180deg);
}
.button-questions {
	text-align: left;
	margin-top: 50px;
}
.arrow {
	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 4px;
}
.down {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/* ------------------- styling of Form ------------------------- */

/* Form Container */
.contact-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin: 0 20px;
	margin-bottom: 105px;
	padding: 6% 0;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form Title and Description */
.form-description,
.form-section,
.button-form {
	max-width: 864px;
	display: block;
	text-align: left;
}
.form-description {
	margin-top: 10px;
}
.contact-form h1 {
	font-size: 45px;
	font-weight: 700;
	line-height: 50px;
	max-width: 70%;
}

.contact-form p {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 75px;
}

/* Form Sections */
.form-section {
	width: 100%;
	margin-bottom: 30px;
}

.form-section label {
	display: block;
	font-family: 'Noto Sans';
	font-size: 15px;
	font-weight: 400;
	color: #00000099;
	margin-bottom: 14px;
}

.form-line {
	margin: 20px 0 22px 0;
	border-bottom: 1px solid #00000099;
}

/* Form Rows (for inline elements) */
.form-row {
	display: flex;
	gap: 20px;
}

/* Form Groups (for individual inputs/selects) */
.form-group {
	flex: 1;
}

.input-with-suffix {
	position: relative;
	width: 100%;
}
.input-with-suffix .suffix {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: #666;
	font-size: 15px;
	font-family:'Noto Sans';
	pointer-events: none; /* Prevent interaction with the suffix */
}

input[type="text"],
input[type="number"],
input[type="tel"],
select {
	width: 100%;
	max-width: 864px;
	padding: 16px;
	border: 1px solid #00000099;
	border-radius: 5px;
	font-family:'Noto Sans';
	font-size: 15px;
	font-weight:bold;
	color: #00000099;
	background-color: transparent;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
	appearance: none;;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
select:focus {
	border-color: #EE5731;
	outline: none;
}

[data-error] label {
	color:#EE5731;
}

[data-error] input[type="text"],
[data-error] input[type="number"],
[data-error] input[type="tel"],
[data-error] select {
	border-color:#EE5731;
}

/* Button Styling */
.button-form {
	width: 100%;
	text-align: left;
}
button[type="submit"] {
	align-items: flex-start;
	margin-top: 38px;
	margin-bottom: 36px;
	transition: background-color 0.3s ease;
	height: 48px;
	padding: 0 34px !important;
}


/* --------------------footer styling ----------------- */
footer {
	background-color: #f7f4ec00;
	width: 100%;
	padding-top:40px;
	padding-bottom:40px;
	border-top: white solid 1px;
	margin-top: auto;
	display: flex;
	align-items: center;
	font-size:20px;
}

.footer-border {
	width: 1312px;
	margin: 0 auto;
	padding: 0 20px;
	align-items: center;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.footer-detail {
	width: 60%;
}

.footer-description {
	text-align: left;
	line-height: 0.8em;
}
.footer-description h2 {
	font-size: 1.2em;
	line-height:0.67em;
	font-weight: bold;
	margin-bottom: 10px;
}

.footer-description h3 {
	font-size: 1.6em;
	line-height:0.5em;
	font-weight: 600;
	color: #EE5731;
	margin: 0;
	font-family: 'Caveat', cursive;
}

.footer-address {
	display: flex;
	gap: 60px;
	margin-top: 36px;
	font-size: 1em;
	line-height:1em;
	font-weight: 400;
}

.footer-address div {
	text-align: left;
	line-height: 0.8em;
}

.footer-address span {
	display: block;
	margin-top: 5px;
	opacity: 0.6;
	font-size: 0.75em;
	line-height:1em;
	font-family: "Noto Sans";
}

.footer-address a {
	text-decoration: none;
	color: black;
	margin-top: 10px;
}
.footer-address a:hover {
	color:#31703F;
}
.footer-address p {
	margin-top: 8px;
}
.footer-photos {
	display: flex;
	gap: 32px;
	width: 40%;
	justify-content: end;
}

.photo-placeholder {
	width: 192px;
	height: 120px;
	background-color: #ddd;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.line-space {
	min-width: 100%;
	max-height: 68px;
	border-top: 1px solid #ffffff;
	font-size: 14px;
	padding: 0;
	margin: 0;
}

.reserved-rights {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	max-width: 1312px;
	font-size: 17px;
	font-weight: 600;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Noto Sans';
	height: 68px;
	padding:0 20px;
}

.reserved-rights nav {
}

.reserved-rights nav a {
	margin-left: 40px;
	text-decoration: none;
	color: black;
}

.reserved-rights nav a:hover {
	color:#31703F;
}

/* styling of Diskalkulie, parents page ------------------------- */
.diskalkulie-faq {
	display: flex;
	justify-content: center;
	padding-top: 120px;
	padding-bottom: 60px;
}
.parents-faq {
	display: flex;
	justify-content: center;
	margin-top: 100px;
}
.middle-description {
	width:100%;
	max-width: 864px;
	padding:  0;
}
.middleDescAbout {
	max-width: 864px;
	margin-top: 34px;
	margin-bottom: auto;
	padding: 0 0 0 35px;
	width: 100%;
}
.middleDescTherapy {
	max-width: 864px;
	margin-bottom: 90px;
	padding: 0 0 0 35px;
	width: 100%;
}
.middleDescTherapy h3 {
	width: 100%;
	margin: 0;
}
.middleDescTherapy p {
	width: 100%;
}
.middleDescAbout h1 {
	max-width: 500px;
}
.middleDescAbout p {
	max-width: 100%;
	width: 100% !important;
}
.middle-parents {
	max-width: 864px;
	margin-top: 170px;
	padding:  0;
	text-align: left;
}
.middle-parents h1 {
	padding-top: 0;
	line-height: 50px;
}
.middle-parents p {
	padding-top: 0;
	line-height: 125%;
}
.parentsh1 {
	width: 60% !important;
}


.middle-containers{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	position: relative;
	padding: 62px 80px 30px 40px;
	width: 1312px; 
	height: auto; 
	box-sizing: border-box;
	width: 100%;
}

.middle-containers h1 {
	line-height: 50px;
	font-size: 45px;
	letter-spacing: 0;
}

.section-th {
	padding-bottom: 24px;
}

.middle-therapy {
	width: 864px;
	max-width: 864px;
	margin-top: 106px;
	padding:  0;
	padding-left: 34px;
}
.middle-therapy h1 {
	padding-top: 0;
	line-height: 50px;
}
.therapy-cont2 {
	margin-bottom: 84px;
}
.section-questions {
	display: flex;
	flex-direction: column;
	font-size: 17px;
	font-weight: 700;
	text-align: center !important;
	align-items: center;
	justify-content: center;
}
.section-questions p { 
	width: 100% !important;
	max-width: 100% !important;
	font-size: 25px;
	font-weight: 700;
	line-height: 30px;
	padding: 16px 0;
	margin: 0;
}
.section-challenge {
	margin-top: 0;
	margin-bottom: 100px;
}
.section-challenge h1 {
	font-weight: bold;
	max-width: 60%;
	margin-bottom: 0px;
}
.section-challenge p {
	font-weight: 400;
	line-height: 123%;
	margin-top: 16px;
}
.section-middle {
	padding-bottom: 72px;
}
.last-section {
	padding-bottom: 80px;
}

.img-row {
	display: flex;
	-ms-flex-wrap: wrap; 
	flex-wrap: wrap;
	width: 1312px;
	margin-bottom: 0;
	gap: 30px;
	justify-content: center;
	align-items: center;
  }
.img-about {
  margin-bottom: 113px;
}
  /* Create four equal columns that sits next to each other */
  .column {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	-ms-flex: 25%;
	flex: 20%;
	max-width: 25%;
	gap: 30px;
	height: 638px;
	max-height: 638px;
  }
  
  .column img {
	vertical-align: middle;
	width: 303px;
	height: 303px;
	background-color: #fffbfb;
	overflow-y: hidden;
	gap: 20px;
	border-radius: 8px;
  }


/* ---------- Switch ------------- */
.switch-section {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: "Noto Sans";
  }
  
  /* Switch Container */
  .switch {
	position: relative;
	display: inline-block;
	width: 458px;
	height: 52px;
	cursor: pointer;
  }
  
  /* Hide the Default Checkbox */
  #switch {
	display: none;
  }
  
  /* Slider (Toggle Button) */
  .slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e0e0e0;
	border-radius: 50px;
	transition: background-color 0.3s ease;
  }
  
  /* Slider Circle (Toggle Handle) */
  .slider::before {
	content: '';
	position: absolute;
	width: 50%;
	height: 40px;
	background-color: #fff;
	border-radius: 50px; /* in a circle case 50% */
	top: 5px;
	left: 5px;
	transition: transform 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Labels (Light/Dark Text) */
  .labels {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	font-size: 17px;
	font-weight: 400;
	justify-content: space-around;
	padding: 0 10px;
	box-sizing: border-box;
	pointer-events: none; /* Preventing blocking clicks */
  }
  
  .labels span {
	font-size: 14px;
	color: #888;
	transition: color 0.3s ease;
  }
  
  .labels .firstSwitch {
	color: #000;
  }
  
  .labels .secondSwitch {
	color: #888;
  }
  
  /* Switch When Checked (Dark Mode) */
  #switch:checked + .switch .slider {
	background-color: #34323D;
  }
  
  #switch:checked + .switch .slider::before {
	transform: translateX(220px);
  }
  
  #switch:checked + .switch .labels .firstSwitch {
	color: #888;
	font-weight: 400;
  }
  
  #switch:checked + .switch .labels .secondSwitch {
	color: #000;
	/* font-weight: 600; */
  }
  
  /* Container Styles */
  .switchContainers {
	width: 864px;
  }
  .switch-container {
	margin: 68px 0 126px 0;
	width: 100%;
	min-width: 200px;
  }
  
  .timeline-item {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 30px 0;
    border-bottom: 1px solid black;
  }
  
.timeline-content {
	display: flex;
	flex-direction: column;
	padding-left: 60px;
	margin-top: auto;
	align-items: flex-start;
}
.timeline-content span {
}
.timeline-year,
.timeline-content span:first-child {
	font-family: 'Noto Serif';
	font-size: 25px;
	font-weight: 700;
  }
  .timeline-content span:last-child {
	font-size: 20px;
	font-weight: 400;
  }

  input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.question-container + .diskalkulie-faq {
	padding:0;
	margin-top:-70px;
}

a[name] { position:absolute; top:-200px; left:0; }

.curve-cont { margin-bottom:140px; }
.curve-cont:last-child { display:none; }

.diskalkulie-faq + .diskalkulie-faq { padding-top:0; padding-bottom:60px; }
.diskalkulie-container { margin:0; }

h1.prx_h1 { margin-top:0; padding-top:0; }