@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap");

.coe {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

.coe h2 {
  padding: 10vh 20px;
  font-optical-sizing: auto;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 3rem;
  text-align: center;
  border-radius: 10px;
  margin: 1rem 0;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.coe h2.hero1 {
  background-color: #bf5700;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%239d4700' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.coe h2.hero2 {
  background-color: #00a9b7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230094a1' fill-opacity='0.4'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.coe h2.hero3 {
  background-color: #a6cd57;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%2392b44d' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.coe h2 small {
  font-weight: 400;
  font-size: 1.5rem;
  color: white;
  line-height: 1.4;
  width: 100%;
  display: block;
}

.coe h3 {
  background: #00a9b7;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  color: #fff;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1.5rem;
  margin-top: 2rem;
}

.coe p {
  line-height: 1.4;
  font-size: 1rem;
  margin: 1rem;
}

.coe table {
  border-spacing: 0;
  column-width: auto;
  table-layout: fixed;
  width: 100%;
  margin: 1rem 0;
  border-radius: 10px;
  overflow: hidden;
  font-size: 1rem;
}

.coe table thead tr {
  background: #333f48;
  color: #fff;
}

.coe table th {
  text-align: left;
  margin: 0;
  padding: 1rem;
}

.coe table td {
  margin: 0;
  padding: 1rem !important;
  text-align: left;
}

.coe tbody tr:nth-child(odd) {
  background-color: #e0e0e0;
}

.coe tbody tr:hover {
  background-color: #f8971f;
  transition: background-color 0.3s ease;
}

.coe .headshot {
  width: 200px;
  float: left;
  margin: 0 1rem 1rem 0;
  border-radius: 10px;
  rotate: -3deg;
}

.coe .logo {
  display: block;
  margin: 0 auto;
  width: 33%;
}

.coe .module-grid {
  margin: 0 auto;
  width: 66%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 40px;
  margin-bottom: 20px;
}

.coe .module-icon {
  width: 100%;
}

.coe .module-grid p {
  text-align: center;
  font-weight: bold;
}

.coe .ai-citation {
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
}

.coe-ce {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background: white;
  padding-bottom: 2rem;
}

.coe-ce * {
  box-sizing: border-box;
}

.coe-ce a {
  color: #bf5700;
}

.coe-ce p,
.coe-ce ol,
.coe-ce ul {
  margin: 1rem !important;
  line-height: 1.4;
}

.coe-ce > .header {
  background: #2a7b9b;
  background: linear-gradient(
    180deg,
    rgba(42, 123, 155, 1) 0%,
    rgba(87, 199, 133, 1) 50%,
    rgba(237, 221, 83, 1) 100%
  );
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  justify-content: flex-end;
  height: 350px;
}

.coe-ce .header h1 {
  background: rgba(214, 210, 196, 0.5);
  text-align: center;
  margin: 0;
  padding: 0.5rem;
  color: #bf5700;
}

.coe-ce .menu {
  font-size: 0.9rem;
  margin-top: 1rem;
}

.coe-ce h2 {
  color: #bf5700;
  text-align: center;
  font-size: 2em;
}

.coe-ce h3 {
  color: #bf5700;
  text-align: left;
  font-size: 1.6em;
}

.coe-ce a.button {
  background: #bf5700;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none !important;
  padding: 0.5rem;
  margin: 1rem;
}

.coe-ce hr {
  border: none;
  margin: 2rem 0;
  background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1149.24 72.01"><!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) --><defs><style> .st0, .st1 { fill: none; stroke: %23bf5700; stroke-miterlimit: 10; stroke-width: 4px; } .st1 { stroke-dasharray: 12 8; } </style></defs><g><line class="st1" x1="0" y1="35.74" x2="534.8" y2="35.75"/><line class="st1" x1="614.45" y1="36.25" x2="1149.24" y2="36.26"/></g><g><path class="st0" d="M574.62,70.01c-1.07,0-2.06-.57-2.6-1.49l-3.31-5.6c-6.8-11.5-13.23-22.36-15.42-26.77-1.6-3.27-2.4-6.77-2.4-10.41,0-13.09,10.65-23.74,23.74-23.74s23.74,10.65,23.74,23.74c0,3.64-.8,7.13-2.39,10.38-.02.04-.04.08-.06.12-2.24,4.46-8.62,15.26-15.38,26.68l-3.31,5.6c-.54.92-1.53,1.49-2.6,1.49Z"/><path class="st0" d="M574.62,36.52c-6.4,0-11.61-5.21-11.61-11.61s5.21-11.61,11.61-11.61,11.61,5.21,11.61,11.61-5.21,11.61-11.61,11.61Z"/></g></svg>');
  height: 60px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.coe-ce .box {
  margin: 2rem 1rem;
  padding: 1rem;
}

.coe-ce .box p {
  margin: 1rem 0;
}

.coe-ce .box hr {
  background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1149.24 72.01"><!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1) --><defs><style> .st0, .st1 { fill: none; stroke: %23ffffff; stroke-miterlimit: 10; stroke-width: 4px; } .st1 { stroke-dasharray: 12 8; } </style></defs><g><line class="st1" x1="0" y1="35.74" x2="534.8" y2="35.75"/><line class="st1" x1="614.45" y1="36.25" x2="1149.24" y2="36.26"/></g><g><path class="st0" d="M574.62,70.01c-1.07,0-2.06-.57-2.6-1.49l-3.31-5.6c-6.8-11.5-13.23-22.36-15.42-26.77-1.6-3.27-2.4-6.77-2.4-10.41,0-13.09,10.65-23.74,23.74-23.74s23.74,10.65,23.74,23.74c0,3.64-.8,7.13-2.39,10.38-.02.04-.04.08-.06.12-2.24,4.46-8.62,15.26-15.38,26.68l-3.31,5.6c-.54.92-1.53,1.49-2.6,1.49Z"/><path class="st0" d="M574.62,36.52c-6.4,0-11.61-5.21-11.61-11.61s5.21-11.61,11.61-11.61,11.61,5.21,11.61,11.61-5.21,11.61-11.61,11.61Z"/></g></svg>');
  height: 60px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.coe-ce .box.three-quarters {
  width: 75%;
  margin: 0 auto;
}

.coe-ce .box.rounded {
  border-radius: 10px;
}

.coe-ce .box.beige {
  background: #d6d2c4;
}

.coe-ce .box.beige h2 {
  margin: 0;
  color: #bf5700;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
  text-align: left;
}

.coe-ce .box.blue {
  background: #005f86;
  color: white;
}

.coe-ce .box.blue h2 {
  margin: 1rem 0;
  color: white;
  text-align: left;
}

.coe-ce .box.orange {
  background: #f8971f;
  padding: 1rem;
  color: black;
}

.coe-ce .box.orange h2 {
  color: black;
  text-align: left;
}

.coe-ce .modules {
  margin: 1rem;
  display: grid;
  grid-template-columns: fit-content(50%) fit-content(50%);
  align-self: center;
  justify-content: center;
  gap: 1rem;
}

.coe-ce .module {
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  justify-self: center;
}

.coe-ce .module h3 {
  display: block;
  width: 300px;
  margin: 0;
  background: #005f86;
  padding: 1rem;
  color: white;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
}

.coe-ce .module h3 > a {
  text-decoration: none !important;
  color: white;
}

@media (max-width: 768px) {
  .coe .module-grid {
    width: 25%;
    grid-template-columns: 1fr;
  }

  .coe-ce .modules {
    grid-template-columns: 1fr;
  }
}