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

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