.career-page {
  color: #363636;
  h2 {
    color: #363636;
    font-size: 26px;
    font-weight: 700;
  }
  section  {
    position: relative;
    background: #fff;
    padding: 80px 0;
    @media (max-width: 1023px) {
      padding: 60px 0;
    }
    &:nth-child(odd) {
      background: #F5F5F5;
    }
    &.page-header {
      padding: 220px 0 80px 0;
      @media (max-width: 1023px) {
        padding: 160px 0 60px 0;
      }
      &.light-text {
        color: #fff;
        .breadcrumb > a, p, h1 {
          color: #fff;
        }
      }
      .breadcrumb {
        margin: 0 0 20px 0;
        a {
          font-size: 16px;
          font-weight: 400;
          color: #363636;
          @media (hover: hover) and (pointer: fine) {
            &:hover,
            &:focus {
              color: #9D2235;
            }
          }
        }
      }
      p {
        margin: 0 0 20px 0;
      }
      .block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 880px;
        @media (max-width: 1023px) {
          width: 100%;
        }
      }
      &.bg-image{
        .block {
          max-width: 50%;
          @media (max-width: 1023px) {
            max-width: 100%;
          }
        }
        .mobile-image {
          width: 100%;
          height: auto;
          display: none;
          margin: 0 0 40px 0;
        }
        @media (max-width: 1023px) {
          padding: 108px 0 80px 0;
          background: transparent !important;
          background-color: #363636 !important;
          .mobile-image {
            display: block;
          }
        }
      }
    }
    &.job-categories {
      h2 {
        display: block;
        padding: 0 0 20px 0;
      }
      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: 295px 0 0 0;
        background: linear-gradient(180deg, #F5F5F5 0%, #FFF 100%);;
      }
      .categories {
        display: flex;
        gap: 20px;
        @media (max-width: 1023px) {
          flex-direction: column;
        }
      }
      .category {
        flex: 1 1 100%;
        img{
          width: 100%;
          height: 214px;
          object-fit: cover;
        }
        p {
          padding: 20px 45px;
          color: #363636;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          background-color: #fff;
        }
        .button {
          display: block;
          text-align: center;
        }
      }
    }
    &.job-links {
      .job-content {
        max-width: 780px;
        p {
          margin: 30px 0;
        }
      }
      .positions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        .position {
          white-space: nowrap;
          .button {
            @media (max-width: 1023px) {
              justify-content: space-between;
            }
          }
        }
        @media (max-width: 1023px) {
          flex-direction: column;
        }
      }
    }
    &.featured {
      h2 {
        display: block;
        color: #363636;
        font-size: 36px;
        font-weight: 700;
        padding: 0 0 40px 0;
      }
      .flex {
        display: flex;
        gap: 40px;
        @media (max-width: 1023px) {
          flex-direction: column;
        }

        .featured-content {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;
          padding-bottom: 43px;
          max-width: 355px;
          @media (max-width: 1023px) {
            max-width: 100%;
            padding-bottom: 0px;
          }

          &::before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            width: 181px;
            height: 3px;
            background: #9D2235;
            z-index: 1;
          }
          @media (max-width: 1023px) {
            &::before {
              width: 100%;
            }
            svg {
              margin: 40px 0 0 0;
            }
          }

          .quote {
            font-size: 24px;
            font-weight: 400;
            line-height: normal;
            margin: 25px 0;
          }

          .name {
            font-weight: 700;
          }
        }

        .video-wrapper {
          flex: 1 1 auto;
          min-width: 0;
          .video {
            width: 100% !important;
            aspect-ratio: 16 / 9;
            height: auto !important;
          }
        }

        .meta {
          margin: 10px 0 0 0;
          display: flex;
          justify-content: space-between;
        }
      }
    }
    &.video-list {
      .videos {
        display: flex;
        gap: 20px;
        @media (max-width: 1023px) {
          flex-direction: column;
        }
        .video-wrapper {
          flex: 1 1 100%;
          .video {
            width: 100% !important;
            aspect-ratio: 16 / 9;
            height: auto !important;
          }
        }
      }
      .video-title {
        padding: 0 0 20px 0;
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        margin: 20px 0 0 0;
        text-transform: uppercase;
      }
      .video-content {
        padding: 20px 0 0 0;
        display: flex;
        gap: 12px;
        svg {
          flex: 0 0 25px;
          width: 25px;
        }
      }
    }
    &.process {
      position: relative;
      position: unset;
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        text-align: center;
      }
      .step-wrapper {
        .wrap {
          position: unset;
        }
        position: relative;
        width: 100%;
      }
      p {
        text-align: center;
        max-width: 620px;
      }
      .steps {
        margin: 40px 0 0 0;;
        display: flex;
        justify-content: stretch;
        gap: 20px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 91px;
          width: 100%;
          height: 3px;
          background: #E5E5E5;
          z-index: 1;
        }
        @media (max-width: 1023px) {
          flex-direction: column;
          &::before {
            display: none;
          }
        }
      }
      .step {
        text-align: center;
        flex: 1 1 100%;
        width: 100%;
        position: relative;
        z-index: 2;
        background-color: #E5E5E5;
        padding: 38px 20px;
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        color: #000;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        min-width: 0;
        @media (max-width: 1023px) {
          padding: 38px 0;
        }
      }
      .paragraphs {
        display: flex;
        gap: 20px;
        margin: 50px 0 0 0;
        @media (max-width: 1023px) {
          flex-direction: column;
        }
        p {
          flex: 1 1 100%;
          display: block;
          text-align: left;
        }

        ul {
          margin: 0 0 0 20px;
          padding: 0;
          list-style: disc;
        }
        li {
          list-style: disc;
        }
      }
    }
    &.grid-text {
      background: #363636;
      color: #E5E5E5;
      &.light-grey, &.white {
        color: #363636;
        background: #E5E5E5;
        h2, p {
          color: #363636;
        }
        .grid-head {
          border-bottom-color: #363636;
          .text {
            .label {
              color: #363636;
            }
            a {
              color: #000000;
              &:visited {
                color: #000000;
              }
          
              @media (hover: hover) and (pointer: fine) {
                &:hover,
                &:focus {
                  color: #363636;
                }
              }
            }
          }
        }
        .paragraphs {
          .paragraph {
            .label {
              color: #363636;
            }
            a {
              color: #000000;
          
              &:visited {
                color: #000000;
              }
          
              @media (hover: hover) and (pointer: fine) {
                &:hover,
                &:focus {
                  color: #363636;
                }
              }
            }
          }
        }
      }
      &.white {
        color: #363636;
        background: #ffffff;
      }
      h2, p {
        color: #E5E5E5;
      }
      .grid-head {
        display: flex;
        gap: 100px;
        border-bottom: 3px solid #E5E5E5;
        padding: 0 0 15px 0;
        @media (max-width: 1023px) {
          gap: 40px;
          flex-direction: column;
        }

        .text {
          min-width: 0;
          flex: 1 1 100%;
          .label {
            color: #E5E5E5;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;
            margin: 0 0 20px 0;
          }
          ul {
            margin: 10px 0;
          }
          li {
            margin: 0 0 0 30px;
            list-style: disc;
          }
          a {
            color: #ffffff;
            text-decoration: underline;
        
            &:visited {
              color: #ffffff;
            }
        
            @media (hover: hover) and (pointer: fine) {
              &:hover,
              &:focus {
                color: #E5E5E5;
              }
            }
          }
        }

        img {
          min-width: 0;
          display: block;
          flex: 1 1 100%;
          width: 100%;
          height: auto;
          object-fit: cover;
          margin-bottom: 25px;
        }
      }
      .paragraphs {
        display: flex;
        flex-wrap: wrap;
        gap: 68px;
        margin: 35px 0 0 0;
        @media (max-width: 1023px) {
          gap: 40px;
          flex-direction: column;
        }
        .paragraph {
          flex: 1 1 25%;
          min-width: 0;
          .label {
            color: #E5E5E5;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;
            margin: 0 0 20px 0;
          }
          ul {
            margin: 10px 0;
          }
          li {
            margin: 0 0 0 30px;
            list-style: disc;
          }
          a {
            color: #ffffff;
            text-decoration: underline;
        
            &:visited {
              color: #ffffff;
            }
        
            @media (hover: hover) and (pointer: fine) {
              &:hover,
              &:focus {
                color: #E5E5E5;
              }
            }
          }
        }
        p {
          flex: 1 1 100%;
          display: block;
          text-align: left;
        }
      }
    }
    &.questions {
      background: #F5F5F5;
      .wrap {
        display: flex;
        align-items: center;
        gap: 100px;
        @media (max-width: 1023px) {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }
      }
      .label {
        font-size: 36px;
        line-height: 49px;
        font-weight: bold;
      }
      .value {
        font-size: 20px;
        line-height: 27px;
      }
    }
  }

  .button {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 18px 22px;
    gap: 10px;
    background-color: #9D2235;
    color: #ffffff !important;
    border: 1px solid #9D2235;
    text-decoration: none !important;
    text-transform: none;

    @media (hover: hover) and (pointer: fine) {
			&:hover,
			&:focus {
				background-color: #fff;
        color: #9D2235 !important;
			}
		}
  }
  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    color: #363636;
    text-decoration: underline;

    &:visited {
      color: #363636;
    }

    @media (hover: hover) and (pointer: fine) {
			&:hover,
			&:focus {
				text-decoration: none;
        color: #9D2235;
			}
		}
  }
  .wrap {
    @media (max-width: 1023px) {
      width: 100% !important;
      min-width: 10px !important;
    }
  }
  @media (max-width: 1023px) {
    iframe{
      aspect-ratio: 16 / 9;
      width: 100% !important;
      height: auto !important;
    }
  }
}