@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,613;1,613&display=swap");
:root {
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
  --background-main: #F5F5F5;
  --background-secondary: #E0E0E0;
  --text-primary: #1A1A1A;
  --text-secondary: #4D4D4D;
  --accent-color: #FFD700; }

.roboto-condensed-600, body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600; }

h2 {
  color: var(--text-primary); }

ol, ul {
  display: grid;
  gap: .5rem;
  padding-inline-start: 0px; }

li {
  color: var(--text-primary);
  list-style: none; }

a {
  text-decoration: none; }
  a :hover {
    color: var(--accent-color); }

p {
  color: var(--text-secondary);
  font-size: clamp(0.75rem, 1vw, 1.5rem); }

body {
  background-color: var(--background-main);
  margin: 0; }

.main-nav {
  background-color: #333;
  padding: 10px 20px; }

.nav-list, .info-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end; }

.info-menu {
  padding: 0.25em; }
  .info-menu a {
    text-decoration: none;
    color: var(--text-primary); }
    .info-menu a :hover {
      color: var(--accent-color); }
  .info-menu .icon-link {
    display: inline-flex;
    align-items: center; }

.info-menu .icon {
  height: 24px;
  margin-right: 8px; }

.info-menu .icon svg {
  width: 100%;
  height: 100%; }

.nav-item {
  margin-left: 20px;
  position: relative; }

.nav-link {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  transition: background-color 0.3s ease; }

.nav-link:hover {
  background-color: #444; }

.has-dropdown:hover .dropdown {
  display: block; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 0;
  text-align: right;
  background-color: #444;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1; }

.dropdown-item {
  display: block;
  list-style-type: none; }

.dropdown-link {
  color: white;
  margin: 0;
  padding: 12px 16px;
  list-style-type: none;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.3s ease; }

.dropdown-link:hover {
  background-color: #555; }

.hamburger {
  display: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000; }
  .hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: white; }

@media screen and (max-width: 768px) {
  .hamburger {
    position: fixed;
    right: 20px;
    background-color: #FFD700;
    z-index: 20;
    display: block; }
  .nav-list, .info-menu {
    position: fixed;
    right: -110%;
    top: 0;
    gap: 0;
    flex-direction: column;
    background-color: #333;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: 0.3s;
    justify-content: center;
    z-index: 10; }
  .nav-item {
    margin: 16px 0;
    font-size: x-large; }
  .nav-list.active, .active.info-menu {
    right: 0; }
  .has-dropdown:hover .dropdown {
    display: none; }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0; }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); } }

:root {
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
  --background-main: #F5F5F5;
  --background-secondary: #E0E0E0;
  --text-primary: #1A1A1A;
  --text-secondary: #4D4D4D;
  --accent-color: #FFD700; }

:root {
  --diagonal-section-offset: 15px;
  --diagonal-margin-offset: -0px; }

@supports (-webkit-clip-path: inset(50%)) or (clip-path: inset(50%)) {
  .diagonal-section, .diagonal-sections-alternating > section:nth-of-type(even), .diagonal-sections-alternating > section:nth-of-type(odd),
  .diagonal-section-top.diagonal-section-bottom {
    padding-top: calc(var(--diagonal-section-offset) / 2);
    padding-bottom: calc(var(--diagonal-section-offset) / 2);
    -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
    clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset))); }
  .diagonal-section--flip-x {
    -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
    clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%); } }

.diagonal-section, .diagonal-sections-alternating > section:nth-of-type(even), .diagonal-sections-alternating > section:nth-of-type(odd),
.diagonal-section-top,
.diagonal-section-bottom {
  box-shadow: inset rgba(0, 0, 0, 0.15) 0px 0px 20px 3px;
  height: 110%;
  z-index: 3;
  padding: 10px 50px 30px 50px;
  margin-top: -35px;
  margin-bottom: -35px; }
  .diagonal-section h2, .diagonal-sections-alternating > section:nth-of-type(even) h2, .diagonal-sections-alternating > section:nth-of-type(odd) h2,
  .diagonal-section-top h2,
  .diagonal-section-bottom h2 {
    margin-bottom: 0; }
  .diagonal-section p, .diagonal-sections-alternating > section:nth-of-type(even) p, .diagonal-sections-alternating > section:nth-of-type(odd) p,
  .diagonal-section-top p,
  .diagonal-section-bottom p {
    margin-bottom: 1rem;
    min-height: 90px; }
  .diagonal-section ul, .diagonal-sections-alternating > section:nth-of-type(even) ul, .diagonal-sections-alternating > section:nth-of-type(odd) ul,
  .diagonal-section-top ul,
  .diagonal-section-bottom ul {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
    text-align: center;
    gap: 0.5rem; }
    .diagonal-section ul li, .diagonal-sections-alternating > section:nth-of-type(even) ul li, .diagonal-sections-alternating > section:nth-of-type(odd) ul li,
    .diagonal-section-top ul li,
    .diagonal-section-bottom ul li {
      font-size: 1em; }

.diagonal-sections-alternating {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  gap: 3rem;
  align-items: center;
  width: 80%;
  margin-top: -3rem; }
  @media screen and (min-width: 680px) {
    .diagonal-sections-alternating {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 5rem; }
      .diagonal-sections-alternating > section:nth-child(3) {
        grid-column: span 2 / span 2; } }
  @media screen and (min-width: 968px) {
    .diagonal-sections-alternating {
      grid-template-columns: repeat(3, 1fr); }
      .diagonal-sections-alternating > section:nth-child(3) {
        grid-column: span 1 / span 1; } }
  .diagonal-sections-alternating > section:nth-of-type(odd) {
    background-color: #b4b4b8; }
  .diagonal-sections-alternating > section:nth-of-type(even) {
    background-color: #c7c8cc; }

footer {
  background-color: var(--background-color);
  padding: 1rem;
  text-align: right;
  color: var(--text-secondary); }

:root {
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
  --background-main: #F5F5F5;
  --background-secondary: #E0E0E0;
  --text-primary: #1A1A1A;
  --text-secondary: #4D4D4D;
  --accent-color: #FFD700; }

.max-w-80 {
  max-width: 80%;
  margin: auto; }

.col-span-2 {
  grid-column: span 2 / span 2; }

.bg-gray {
  background-color: lightgray; }

.areas {
  display: grid;
  align-items: start;
  margin: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  container-type: inline-size; }
  @media (max-width: 768px) {
    .areas {
      grid-template-columns: 1fr; } }
  .areas > div:first-child {
    background: lightgray;
    z-index: 1;
    padding: 2rem;
    container-type: inline-size; }
  .areas > *:nth-child(2) {
    align-self: stretch; }
  .areas p {
    text-align: center; }
  .areas h2 {
    margin-top: 0;
    margin-bottom: 1rem; }
  .areas ul {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    list-style-type: none; }

@container (width > 480px) {
  .areas ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@container (width > 800px) {
  .areas ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@container (width > 1280px) {
  .areas ul {
    grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .areas ul li {
      font-size: 1em; }
  .areas > *:nth-child(2) {
    filter: brightness(70%);
    max-height: 590px;
    width: 140%;
    height: 100%;
    object-fit: cover; }
    @media (min-width: 1360px) {
      .areas > *:nth-child(2) {
        max-height: 380px;
        object-fit: contain; } }
    @media (max-width: 768px) {
      .areas > *:nth-child(2) {
        justify-self: center; } }
.accreditations {
  padding: 2rem;
  background-color: white; }
  .accreditations p {
    text-align: center; }
  .accreditations div {
    margin: auto;
    max-width: 80%; }
  .accreditations ul {
    max-width: 100%;
    display: grid;
    margin: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2rem;
    justify-items: center;
    gap: 0.5rem; }
    @media (max-width: 640px) {
      .accreditations ul {
        grid-template-columns: repeat(1, minmax(0, 1fr)); } }
    .accreditations ul li {
      display: grid;
      justify-items: center;
      transition: box-shadow 0.3s;
      border-radius: 0.5rem;
      padding: 20px; }
    .accreditations ul li:hover {
      box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px ghostwhite; }
    .accreditations ul img {
      max-height: 200px;
      max-width: 100%; }
    @media (min-width: 640px) {
      .accreditations ul :nth-child(3) {
        grid-column: span 2 / span 2;
        max-width: 200%; } }
.py {
  padding-top: 3rem;
  padding-bottom: 3rem; }

.markdown {
  overflow-x: clip; }
  .markdown > div {
    margin: auto;
    max-width: 80%; }
    @media (max-width: 780px) {
      .markdown > div {
        max-width: 90%; } }