@font-face {font-family: ProximaNova; src: url('../font/ProximaSoft-Regular.ttf');}
@font-face {font-family: ProximaNova; font-weight: 500; src: url('../font/ProximaSoft-SemiBold.ttf');}
@font-face {font-family: ProximaNova; font-weight: 700; src: url('../font/ProximaSoft-Bold.ttf');}

body {
  font-family: ProximaNova, sans-serif;
  width: clamp(600px, 65%, 880px);
  max-width: 80vw;
  margin: 15vh auto;

    > a {
      height: 60px;
      width: 260px;
      display: block;
      margin-bottom: 40px;

      img {
        height: 60px;
      }
    }
}

h2 {
  color: #267D9C;
  font-size: 26px;
  font-weight: 700;
}

h2 {
  text-align: center;
}

.header-center-aligned {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 30px;

span {
    max-width: 675px;
    align-self: center;
  }
}

.container {
  display: flex;
  gap: 50px;

  > .left {
    display: flex;
    gap: 20px;
    flex-direction: column;
    flex: 1 1;

    > div > h3 {
      margin-bottom: 25px;
    }

    .card {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-decoration: none;
      padding: 5px 0;
      color: inherit;

      .text {
        display: flex;
        flex-direction: column;
        gap: 10px;

        > .title {
          text-decoration: underline;
          color: #267D9C;
          font-weight: 500;
          font-size: 18px;
        }

        > .description {
          font-size: 14px;
        }
      }

      > img {
        height: 65px;
        margin: 0 20px 0 0;
      }
    }

    .card:hover {
      background-color: #F8F8F8;
      cursor: pointer;
    }
  }

  .right {
    flex: 1 1;

    > h3 {
      margin-bottom: 25px;
    }

    > div:first-of-type {
      margin-bottom: 30px;
    }

    a {
      font-weight: 500;
      display: block;
      width: 100%;
      font-size: 18px;
      color: #267D9C;
    }

    h3 {
      font-weight: 500;
    }

    span {
      font-size: 14px;
    }
  }
}

@media only screen and (max-width: 800px) {
  .container {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
}