.stages_certification {
  & .stages_certification-title {
    color:  #34495E;
    font-family: "Bebas Neue";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 24px;
    max-width: 200px;
  }


}

.stages_certification-items {
  display: flex;
  flex-direction: column;
  gap: 16px;

  & .stages_certification-item {
    padding-top: 32px;
    padding-bottom: 32px;

    &:nth-child(odd) {
      background-color: #F5F5F5;
    }

    & .stages_certification-item__inner {
      display: flex;
      gap: 30px;

      @media(max-width: 700px) {
        flex-direction: column;
      }

      & .stages_certification-item-title {
        display: flex;
        gap: 16px;
        max-width: 255px;
        width: 100%;
        /* min-width: 203px; */

        & .stages_certification-item-title__num {
          border-radius: 6px;
          background: #009245;
          width: 36px;
          min-width: 36px;
          height: 36px;
          max-height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;

          color: #FFF;
          font-family: "Bebas Neue";
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: 100%;

          & span {
            color: #FFF;
            font-family: "Bebas Neue";
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            transform: translateY(2.5px);
          }

        }

        & .stages_certification-item-title__text {
          color: #27AE60;
          font-family: "Bebas Neue";
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: 120%;
          max-width: 203px;
          width: 100%;
        }
      }

      & .stages_certification-item__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 795px;
        width: 100%;

        & .stages_certification-item__content-links {
          display: flex;
          flex-direction: column;
          gap: 12px;

          & a {
            color: #34495E;
            font-family: 'Roboto';
            font-size: 15px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
              color: #009245;
            }
          }
        }

        & .stages_certification-item__content-text {
          color: #34495E;
          font-family: 'Roboto';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          & a {
            color: #009245;
            font-family: 'Roboto';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }

        & ol.stages-list {
          list-style: none;
          counter-reset: num;
          display: flex;
          flex-direction: column;
          gap: 8px;
          width: 100%;


          &>li {
            counter-increment: num;
            position: relative;
            padding-left: 1.2em;
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: #34495E;
            font-family: 'Roboto';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;

            &::before {
              content: counter(num) ". ";
              position: absolute;
              left: 0;
              transition: all .3s;
              color: #34495E;
              font-family: 'Roboto';
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }

            & span {
              color: #34495E;
              font-family: 'Roboto';
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }

            & .links {
              display: flex;
              flex-direction: column;
              gap: 6px;

              & a {
                color: #34495E;
                font-family: 'Roboto';
                font-size: 15px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-decoration: none;

                &:hover {
                  color: #009245;
                  text-decoration: underline;
                }
              }
            }
          }

          & li:has(.stages_certification-item__acc) {
            &::before {
              top: 12px;
              font-weight: 600;
            }
          }

          & li:has(.stages_certification-item__acc-list-item.active) {
            &::before {
              color: #009245;
              transition: all .3s;
            }
          }
        }

        & .stages_certification-item__acc {
          & .stages_certification-item__acc-list {
            & .stages_certification-item__acc-list-item {
              border-bottom: 1px solid #E8E8E6;
              transition: all .3s ease-in;
              padding-bottom: 16px;

              & .stages_certification-item__acc-list-item__title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                margin-bottom: 10px;


                & span {
                  font-family: 'Roboto';
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  transition: all .3s ease-in;
                }

                & svg {
                  transition: transform 0.3s ease;
                  min-width: 40px;
                }
              }

              & .stages_certification-item__acc-list-item__content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease, opacity 0.3s ease;
                opacity: 0;

                & ul {
                  list-style: none;
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  margin-bottom: 15px;

                  &>li {
                    position: relative;
                    color: #34495E;
                    font-family: 'Roboto';
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;

                    &::before {

                      content: '';
                      width: 4px;
                      height: 4px;
                      border-radius: 50%;
                      left: -15px;
                      top: 7px;

                      background-color: #34495E;
                      position: absolute;
                    }
                  }
                }


              }

              &.active {
                border-color: #009245;
                transition: all .3s ease-in;

                .stages_certification-item__acc-list-item__content {
                  opacity: 1;
                  overflow: visible;
                }

                & .stages_certification-item__acc-list-item__title {
                  & span {
                    color: #009245;
                    transition: all .3s ease-in;
                  }

                  & svg {
                    transform: rotate(180deg);
                  }
                }
              }
            }
          }
        }
      }
    }

  }
}

.stages_certification-contacts {
  display: flex;
  gap: 30px;

  @media(max-width: 992px) {
    flex-direction: column;
    gap: 24px;
  }

  & .stages_certification-contacts__title {
    color: var(--DBlue, #34495E);
    font-family: "Bebas Neue";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    max-width: 255px;
    width: 100%;
  }

  & .stages_certification-contacts__person {
    border-radius: 10px;
    border: 2px solid #E0E0E0;
    background-color: #fff;
    padding: 18px;
    padding-right: 78px;
    display: flex;
    align-items: center;
    max-width: 825px;
    width: 100%;
    gap: 24px;

    @media(max-width: 992px) {
      padding: 16px;
      max-width: 688px;
      width: initial;
    }

    & .stages_certification-contacts__person-left {
      display: flex;
      align-items: center;

      & .stages_certification-contacts__person-avatar {
        width: 80px;
        min-width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    & .stages_certification-contacts__person-right {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;

      @media(max-width: 700px) {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      & .stages_certification-contacts__person-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 279px;

        & .stages_certification-contacts__person-name {
          color: #34495E;
          font-family: 'Roboto';
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
        }

        & .stages_certification-contacts__person-position {
          color: #34495E;
          font-family: 'Roboto';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
      }

      & .stages_certification-contacts__person-contacts {
        display: flex;
        max-width: 174px;
        gap: 2px;
        flex-wrap: wrap;

        & .stages_certification-contacts__person-tel {
          color: #34495E;
          font-family: 'Roboto';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-decoration: none;

          &:hover {
            color: #009245;
            text-decoration: underline;
          }
        }

        & span {
          color: #34495E;
          font-family: 'Roboto';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        & .stages_certification-contacts__person-email {
          width: 100%;
          color: #34495E;
          font-family: 'Roboto';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-decoration: none;

          &:hover {
            color: #009245;
            text-decoration: underline;
          }
        }
      }


    }
  }
}