: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;
}

.company-hero-section {}

.company-about {}

.company-values {}

.exec-team-about {}





/* wrappers */
.value-card-wrapper {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
}

.exec-team-wrapper {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 2rem 0;
	justify-content: center;
}





/* cards */
.value-card {
	background-color: var(--dmsurColOne);
	padding: 1rem;
	max-width: 24rem;
	height: 10rem;
	text-wrap: balance;
	border-radius: 1rem;
	box-shadow: 0px 5px 10px #000000c0;
	position: relative;
	overflow: hidden;
}

.value-sheen {
	width: 8rem;
	height: 12rem;
	background-color: #ffffff20;
	position: absolute;
	top: 50%;
	left: 80%;
	transform: translate(-50%, -50%) skew(-15deg);
	box-sizing: border-box;
}



.exec-team-card-box {
	background-color: transparent;
	width: 24rem;
	height: 30rem;
	perspective: 1000px;
	box-shadow: 0px 5px 10px #000000c0;
	border-radius: 1rem;
}

.exec-team-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.exec-team-card-box:hover .exec-team-card-inner {
	transform: rotateY(180deg);
}

.exec-team-card-front, .exec-team-card-back {
	text-wrap: balance;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;

	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.exec-team-card-front {
	background-color: var(--dmsurColOne);
}

.exec-team-card-back {
	background-color: var(--dmsurColTwo);
	transform: rotateY(180deg);
}

.exec-team-info-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 90%;
}






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

.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);
	margin-top: 1rem;
}

.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;
}







/* images */
.exec-team-image-wrapper {
	height: 80%;
	overflow: hidden;
	border-radius: 1rem 1rem 0 0;
}

.exec-team-image {
	width: 100%;
}




.disclaimer {
	font-family: var(--bodyfont);
	color: var(--dmtextColDIS);
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
	display: flex;
}