:root {
  --page-sides: 120px;

  --nav-height: 50px;
  --nav-flex-gap: 1.25em;
  --nav-link-pad: 1em;

  --bio-margin: 0 0px;

  /*--c-accent: #ad0000;*/
  --c-accent: #cc2027;
  --c-accent-hov: #ba1313;
  /*--c-accent-d1: #6f0000;*/
  --c-accent-d1: #7e1502;
  --c-accent-txt: #fff;

  --bg: #fff;
  --bg-i1: #fdf8f8;
  --bg-i2: #ece2e2;
  --bg-i3: #e29696;
  --bg-i4: #bd3e3e;
  --bg-bl: #4f0000;

  --txt: #000;
  --txt-hov: #2f2f2f;

  --hero-text-size: 72px;

  --tns: 0.2s;

  --cards-box-shadow: -10px 10px var(--c-accent-d1);
}

@media screen and (max-width: 768px) {
  :root {
    --page-sides: 24px;
    --bio-margin: 0px;
    --hero-text-size: 40px;
    --cards-box-shadow: 0;
	}
.nav-action {
    font-size: 14px; /* Reduce font size */
    padding: 10px 5px; /* Reduce padding */
  }
  .nav-action-highlight a {
    white-space: nowrap; /* Prevent the text from wrapping */
  }
  .nav-action, .nav-action-highlight {
    display: inline-block;
    width: max-content; /* This will make sure the width is just enough for the content */
  }
  /* Adjustments for the logo and navigation container */
  .nav-left, .nav-center, .nav-right {
    flex: 0 1 auto; /* Allow the boxes to shrink but not to grow */
  }

  .logo {
    height: 40px; /* or your preferred height */
    width: auto; /* maintain aspect ratio */
    max-width: 100%; /* ensure it doesn't stretch beyond its container */
    object-fit: contain; /* Ensures the image is scaled correctly within the dimensions */
  }

  /* ... other styles ... */
}
  }
}
a {
  color: inherit;
  text-decoration: none;
  width: fit-content;
}
a:visited {
  color: inherit;
  text-decoration: none;
}

.rotated {
  transform: rotate(180deg);
  transition: var(--tns);
}

body {
  margin: 0;
  font-size: 18px;
  line-height: 1.25em;
  font-weight: 400;
  font-family: "Libre Franklin", Arial, Helvetica, sans-serif;
  color: var(--txt);
}

.material-symbols-rounded {
  user-select: none !important;
  pointer-events: none !important;
}

nav {
  padding: 0 var(--page-sides);
  display: flex;
  gap: var(--nav-flex-gap);
  font-size: 16px;
  font-weight: 500;
  line-height: 1em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  height: var(--nav-height);
  position: sticky;
  top: 0;
  background-color: var(--bg);
  z-index: 90;
}
.nav-left,
.nav-right {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-right > a > div,
.nav-right > div {
  height: 100%;
  line-height: var(--nav-height);
  padding: 0 var(--nav-link-pad);
}
.nav-left {
  justify-content: left;
}
.logo {
  height: 60px !important;
	width: auto !important;
}
.nav-center {
  flex-grow: 1;
}
.nav-right {
  justify-content: flex-end;
}
.nav-link {
  transition: var(--tns);
  cursor: pointer;
}
.nav-link:hover {
  color: var(--txt-hov);
  transition: var(--tns);
}
.nav-action-highlight {
  border-bottom: 3px solid var(--c-accent);
  box-sizing: border-box;
  color: var(--c-accent);
  transition: var(--tns);
  cursor: pointer;
}
.nav-action-highlight:hover {
  background-color: var(--c-accent-hov);
  border: 0;
  color: var(--c-accent-txt);
  transition: var(--tns);
}
.space-right {
  margin-right: 20px;
}

main > div {
  padding: 80px var(--page-sides);
}

.two-panel {
  display: flex;
  flex-flow: row wrap;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.35em;
  gap: 50px;
}
.two-panel > div {
  flex: 600px 1 1;
}
.two-panel-text {
  display: flex;
  flex-direction: column;
  gap: 2em;
  flex-grow: 1;
}
.two-panel-text > .title {
  font-size: var(--hero-text-size);
  line-height: 1em;
  font-weight: 500;
}
.main-action {
  width: fit-content;
  padding: 14px 28px;
  font-weight: 500;
  color: var(--c-accent-txt);
  background-color: var(--c-accent);
}
.two-panel-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.two-panel-pic-container {
  height: clamp(163px, 37vw, 380px);
  width: clamp(300px, 37vw, 700px);
  box-shadow: 32px 32px var(--c-accent);
}
.two-panel-pic {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: saturate(0);
}

.accent-sec {
  background-color: var(--bg-i1);
}

.carousel {
  background-color: var(--bg-i1);
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}
.carousel > .carousel-title {
  font-size: 36px;
  font-weight: 400;
}
.carousel-consist {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  column-gap: 70px;
  row-gap: 2em;
  filter: grayscale(0%);
  user-select: none;
  pointer-events: none;
}
.carousel-consist > div > img {
  height: clamp(40px, 5vw, 150px);
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.main-content > .title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2em;
}
.main-content > .subtitle {
  font-size: 24px;
  line-height: 1.35em;
  font-weight: 200;
}

.cards {
  margin-top: 20px;
  display: flex;
  flex-flow: row wrap;
  row-gap: 50px;
  column-gap: 80px;
}
.cards-item {
  box-shadow: var(--cards-box-shadow);
  border: 2px solid var(--c-accent-d1);
  padding: 30px;
  flex: 250px 1 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-weight: 200;
  line-height: 1.5em;
}
.cards-item-icon {
  color: var(--c-accent);
  font-size: 60px;
}
.cards-item-icon > span.material-symbols-rounded {
  font-size: 90px;
}
.cards-item-title {
  font-weight: 400;
  font-size: 24px;
  line-height: 1em;
}

.content-split {
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
}
.content-split-sec {
  flex: 500px 1 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.large-text {
  font-size: 24px;
  font-weight: 200;
  line-height: 1.4em;
}
.content-split-sec > .title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1em;
}
.content-dropdown {
  background-color: var(--bg);
  border: 2px solid var(--txt);
}
.content-dropdown-title {
  display: flex;
  padding: 26px;
  line-height: 1.1em;
  font-size: 20px;
  cursor: pointer;
}
.content-dropdown-title-text {
  flex-grow: 1;
}
.content-dropdown-title-icon {
  transition: var(--tns);
}
.content-dropdown-text {
  padding: 0 26px 26px 26px;
  display: none;
  font-weight: 200;
  line-height: 1.5em;
}

.ceros-container {
  height: 500px;
  background-color: var(--bg-i2);
}

.team-title {
  font-size: 28px;
}
.team-columns {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  row-gap: 60px;
  column-gap: 120px;
}
.team-columns > div {
  padding: var(--bio-margin);
  display: flex;
  flex-direction: column;
  max-width: 280px;
  flex-grow: 0;
  gap: 12px;
  padding: 9px;
  background-color: var(--bg);
  border: 2px solid #eee;
}
.team-headshot > img {
  height: 280px;
  width: 280px;
  object-fit: cover;
  object-position: top;
  user-select: none;
  pointer-events: none;
  filter: saturate(100%);
}
.team-member {
  font-size: 24px;
  display: flex;
}
.team-member > div:first-child {
  flex-grow: 1;
}
.team-member > div > a {
  transition: var(--tns);
}
.team-member > div > a:hover {
  color: #333;
  transition: var(--tns);
}
.team-position {
  font-weight: 200;
}

.final-action {
  background-color: var(--bg-bl);
  color: var(--c-accent-txt);
  display: flex;
  align-items: center;
  gap: 2em;
}
.final-action > .title {
  font-size: 28px;
  font-weight: 500;
  flex-grow: 1;
  line-height: 1.2em;
}
.final-action > a > .action-ico {
  color: var(--txt);
  background-color: var(--bg);
}
.final-action > a > .action-ico:hover {
  color: var(--txt);
  background-color: #fafafa;
}
.action-ico {
  padding: 18px 30px;
  color: var(--c-accent-txt);
  background-color: var(--c-accent);
  font-weight: 500;
  font-size: 20px;
  display: flex;
  gap: 18px;
  width: fit-content;
  cursor: pointer;
  transition: var(--tns);
}
.action-ico:hover {
  background-color: var(--c-accent-hov);
  transition: var(--tns);
}

footer > div {
  padding: 3em var(--page-sides);
}
.footer-links {
  color: var(--c-accent-txt);
  background-color: var(--bg-i4);
}
footer > .legal {
  font-size: 16px;
  font-weight: 300;
}
footer > .legal > .legal-logo {
  height: 2em;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Sign In Page */
.signin-fp {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
.signin-disc {
  background-color: var(--bg-bl);
  color: var(--c-accent-txt);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 690px;
  gap: 30px;
}
.disc-maxwidth {
  max-width: 85%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.disc-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
}
.disc-text {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.25em;
}
.signin-form {
  flex-grow: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
form.signin {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-group > label {
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
}
.form-group > input {
  border-radius: 0;
  border: 2px solid;
  font-size: 18px;
  font-family: inherit;
  padding: 12px 0;
  text-indent: 15px;
}
.form-group > input:focus {
  box-shadow: none;
  outline: 1px solid;
}
.submit-group {
  display: flex;
  row-gap: 30px;
  column-gap: 80px;
  align-items: center;
}
.helptext {
  flex-grow: 1;
  transition: var(--tns);
}
.helptext > a:hover {
  text-decoration: underline;
  transition: var(--tns);
}
.form-go {
  background-color: var(--c-accent);
  color: var(--c-accent-txt);
  border: 0;
  font-size: 20px;
  font-weight: 400;
  font-family: inherit;
  padding: 12px 32px;
  cursor: pointer;
  transition: var(--tns);
}
.form-go:hover {
  background-color: var(--c-accent-hov);
  transition: var(--tns);
}

.signin-logo-contianer {
  width: fit-content;
  text-align: right;
}
.signin-logo {
  height: 80px;
}
.auo-notice {
  font-size: 14px;
  font-weight: 600;
  line-height: 1em;
  text-transform: uppercase;
  margin-top: 6px;
  position: relative;
}