:root {
    --titlefont: Rubik Mono One;
    --bodyfont: Bebas Neue;

    --page-title: 2rem;
    --section-title: 1.75rem;
    --section-body: 1rem;
    --value-title: 1.5rem;
    --value-body: 1rem;
    --exec-name: 1.5rem;
    --exec-title: 1.25rem;
    --exec-bio: 1rem;

    --fontwhite90: #ffffffe0;
    --fontwhite80: #ffffffbb;
    --fontwhite70: #ffffff97;
    --fontwhite50: #ffffff55;

    --primCol: #7E47D1;
    --secCol: #63E9BA;
    --dmbgCol: #121212;
    --dmsurColOne: #232323;
    --dmsurColTwo: #343434;
    --dmsurColThr: #454545;
    --dmsurColFou: #565656;
    --dmerrorCol: #CF6679;
    --dmwarnCol: #CF8540;
    --dmcautCol: #CFCD66;

    --lmerrorCol: #B00020;
}

body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

section {
    margin-top: 2rem; 
}

.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--dmbgCol);
}

.maincontainer {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.maincontentcontainer {
    width: 80%;
}

/* sections */
.section-divider {
    height: 0.2rem;
    background-color: var(--dmsurColTwo);
    margin: 2rem 0;
    border-radius: 1rem;
}

/* text */
.page-title {
    font-family: var(--titlefont);
    font-size: var(--page-title);
    color: var(--fontwhite90);
	text-align: center;
}

.section-title {
    margin: 1rem 0;
    font-family: var(--titlefont);
    font-size: var(--section-title);
    color: var(--fontwhite90);
}

.section-body {
    margin-top: 1rem;
    font-family: var(--bodyfont);
    font-size: var(--section-body);
    color: var(--fontwhite90);
    word-spacing: 0.1rem;
    letter-spacing: 0.01rem;
}

.value-title {
    font-family: var(--titlefont);
    font-size: var(--value-title);
    color: var(--fontwhite90);
}

.value-body {
    margin-top: 1rem;
    font-family: var(--bodyfont);
    font-size: var(--value-body);
    color: var(--fontwhite90);
    word-spacing: 0.1rem;
    letter-spacing: 0.01rem;
}

.exec-name {
    font-family: var(--titlefont);
    font-size: var(--exec-name);
    color: var(--fontwhite90);
}

.exec-title {
    margin: 0.5rem 0 1rem 0;
    font-family: var(--bodyfont);
    font-size: var(--exec-title);
    color: var(--fontwhite90);
    word-spacing: 0.1rem;
    letter-spacing: 0.01rem;
}

.exec-bio {
    font-family: var(--bodyfont);
    font-size: var(--exec-bio);
    color: var(--fontwhite90);
    word-spacing: 0.1rem;
    letter-spacing: 0.01rem;
}






/* FAQ */
.section-about {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section-FAQ {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section-FAQ-container {
  	max-width: 70rem;
	background-color: var(--dmsurColOne);
	padding: 2rem 4rem;
	border-radius: 2rem;
	box-shadow: 0px 5px 10px #000000c0;
}








.FAQ {
    margin-top: 2rem;
}

img {
    transition: transform 0.5s;
    border: 0;
}

img.not-shown {
    transform: rotateX(0deg);
}

img.shown {
    transform: rotateX(180deg);
}

.FAQAnswer {
    overflow: hidden;
    max-height: 0; /* Initial state (collapsed) */
    transition: max-height 0.5s ease-out; /* Smooth transition effect */
}

.FAQAnswer.open {
    max-height: 500px; /* Adjust as needed or set to a large value */
}

.FAQbody {
	margin-left: 1rem;
}




.section-contact-us-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2rem;
}

.contact-us-form-wrapper {
	width: 40rem;
}

.contact-us-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	background-color: var(--dmsurColOne);
	border-radius: 2rem;
	box-shadow: 0px 5px 10px #000000c0;
}

fieldset {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	border-radius: 1rem;
	background-color: var(--dmsurColTwo);
	border-style: none;
	box-shadow: 0px 5px 10px #00000070;
}

label {
    font-family: var(--bodyfont);
    font-size: var(--exec-title);
    color: var(--fontwhite90);
}


input {
	background-color: var(--dmsurColFou);
	border-style: none;
	padding: 0.4rem;
	color: var(--dmtextColHME);
	font-size: 1.2rem;
	font-family: var(--bodyfont);
	border-radius: 1rem;
	padding-inline-start: 1rem;

	transition-duration: 0.5s;
}

input:focus:not(placeholder-shown):invalid {
	box-shadow: 0px 0px 8px 4px rgba(126,71,209,0.75);
	outline: none; /* Optional: Remove the default outline */
}

input:not(:placeholder-shown):valid {
	box-shadow: 0px 0px 8px 4px rgba(99, 233, 186, 0.75);
	outline: none; /* Optional: Remove the default outline */
}

input:not(:placeholder-shown):invalid {
	box-shadow: 0px 0px 8px 4px rgba(207, 102, 121, 0.75);
	outline: none; /* Optional: Remove the default outline */
}


#message {
	height: 20rem;
	background-color: var(--dmsurColFou);
	border-style: none;
	padding: 0.4rem;
	color: var(--dmtextColHME);
	font-size: 1.2rem;
	font-family: var(--bodyfont);
	border-radius: 1rem;
	padding-inline-start: 1rem;

	transition-duration: 0.5s;
}

#message:focus:not(placeholder-shown):invalid {
	box-shadow: 0px 0px 8px 4px rgba(126,71,209,0.75);
	outline: none; /* Optional: Remove the default outline */
}

#message:not(:placeholder-shown):valid {
	box-shadow: 0px 0px 8px 4px rgba(99, 233, 186, 0.75);
	outline: none; /* Optional: Remove the default outline */
}

#message:not(:placeholder-shown):invalid {
	box-shadow: 0px 0px 8px 4px rgba(207, 102, 121, 0.75);
	outline: none; /* Optional: Remove the default outline */
}





@media (max-width: 600px) {
.maincontentcontainer {
	width: 90%;
}

.section-FAQ-container {
	padding: 1.5rem 1.5rem;
}

  .contact-us-form-wrapper {
    width: 100%;
  }
  
  .contact-us-form {
  	  padding: 0.8rem 0.4rem;
      border-radius: 1rem;
  }

}