:root {
  --brand-font: "Figtree", Arial, Helvetica, sans-serif;
  --brand-font-bold:  700;

  --primary: #04776E;
  --primary-hover: #036059;
  --mid-grey: #808080;
  --grey: #f8f8f8;
}

@font-face {
  font-family: Figtree;
  src: url("/fonts/Figtree-Regular.woff2") format("woff2"), url("/fonts/Figtree-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: Figtree;
  src: url("/fonts/Figtree-Bold.woff2") format("woff2"), url("/fonts/Figtree-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Figtree;
  src: url("/fonts/Figtree-Black.woff2") format("woff2"), url("/fonts/Figtree-Black.woff") format("woff");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

body.watc {
  font-family: var(--brand-font);

  main {
    max-width: 1600px;
  }

  header {
    padding: 0;
    height: 60px;
    background: var(--white);
    border-bottom: 1px solid var(--mid-grey);

    a {
      display: flex;

      img {
        max-width: 133px;
        max-height: 20px;
        overflow: hidden;
      }
    }
  }

  .frame p {
    font-size: 14px;
  }

  &.isMobile .btn {
    font-size: var(--ios-no-zoom-mobile-font-size);
  }

  h2,
  h3 {
    font-weight: var(--brand-font-bold);
    font-size: 1.1em;
    text-transform: capitalize;
  }

.btn {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    font-family: var(--brand-font);
    font-weight: var(--brand-font-bold);
    transition: .3s ease-in-out;
    border-radius: 20px;
    padding: 12px 0;
}

  .btn:hover,
  .btn:focus {
    color: var(--white);
    background: var(--primary-hover);
  }

  .btn.cancel {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
  }

  .btn.cancel:hover,
  .btn.cancel:focus {
    color: var(--white);
    background: var(--grey);
    border-color: var(--black);
  }

  @media (max-width: 1022px) {
    header {
      .wrapper {
        margin-left: 14px;
      }
    }
  }

  @media (min-width: 768px) {
    header {
      height: 71px;
    }
  }

  @media (min-width: 1022px) {
    header {
      a {
        margin-left: 15px;
        justify-content: start;
        width: fit-content;
        display: flex;

        img {
          max-width: 240px;
          max-height: 36px;
          height:36px;
        }
      }
    }
  }
}