.course {
  &__cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 145px 0;

    &--plant-safety {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-cover-plant-safety.jpg");
    }

    &--heat-exchanger-design {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-heat-exchanger-design.jpg");
    }

    &--economics-of-industrial-plants {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-economics-of-industrial-plants.jpg");
    }

    &--process-safety-engineering {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-process-safety-engineering.jpg");
    }

    &--production-engineering {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-production-engineering.jpg");
    }

    &--process-engineering {
      background-image: linear-gradient(rgba(0, 29, 49, 0.64), rgba(0, 29, 49, 0.64)),
        url("../assets/images/courses/course-process-engineering.jpg");
    }
  }

  &__title {
    max-width: 560px;
    margin: auto;
  }

  &__text {
    margin-top: 30px;
    margin-bottom: 20px;
    font-family: Roboto;
    font-size: 18px;
    line-height: calc(22 / 18);
    font-weight: 300;
    color: var(--color-4);
  }

  &__introduction {
    padding: 75px 0;

    &-about {
      max-width: 800px;
      display: flex;
      flex-direction: column;
      margin: auto;
    }

    &-headline {
      margin-bottom: 45px;
    }

    &-text {
      color: var(--color-2);
      font-family: Calibri, sans-serif;
      line-height: calc(40 / 27);
      padding-bottom: 80px;
    }

    &-title {
      font-size: 18px;
      line-height: calc(25 / 18);
      font-weight: 400;
      color: var(--color-2);
      margin-bottom: 20px;
    }

    &-subtitle {
      font-weight: 400;
      color: var(--color-2);
      font-family: Calibri, sans-serif;

      @media screen and (max-width: 768px) {
        margin-bottom: 100px;
      }
    }

    &-prerequisites {
      margin-top: 130px;
      padding-bottom: 90px;

      @media screen and (max-width: 768px) {
        margin-top: 50px;
      }
    }
  }

  &__corriculum {
    margin-bottom: 45px;

    &-headline {
      margin-bottom: 45px;
    }

    &-items {
      max-width: 800px;
      display: flex;
      flex-direction: column;
      margin: auto;
    }

    &-dropdown {
      padding: 20px;
      display: flex;
      flex-direction: column;
      background-color: rgba(118, 171, 205, 0.1);
      border-radius: 5px;
      margin-bottom: 5px;

      &--active {
        background-color: rgba(var(--color-6-rgb), 0.3);
      }

      .dropdown {
        margin-left: 45px;
        overflow: hidden;
        transition: 0.2s all ease;
        height: 0;

        &__item {
          display: flex;
          margin-bottom: 25px;

          &:first-child {
            margin-top: 40px;
          }
        }
        &__text {
          font-size: 18px;
          line-height: calc(18 / 18);
          color: var(--color-black);
          margin-bottom: 0;
          margin-left: 20px;
          text-align: left;
        }
      }
    }

    &-wrap {
      display: flex;
      align-items: center;
      cursor: pointer;
      text-align: left;
    }

    &-number {
      font-size: 18px;
      line-height: calc(18 / 18);
      font-weight: 400;
      font-family: Roboto;
    }

    &-title {
      font-weight: 400;
      font-size: 24px;
      line-height: calc(29 / 24);
      font-family: Roboto;
      margin: 0;
      padding-left: 40px;
      color: var(--color-black);
    }

    &-arrow {
      margin-left: auto;
      position: relative;

      &::after,
      &::before {
        transition: all 0.25s ease;
        position: absolute;
        bottom: -5px;
        width: 3px;
        height: 9px;
        background-color: #76abcd;
        content: "";
      }

      &::after {
        transform: translate(-2px, 0) rotate(-45deg);
      }

      &::before {
        transform: translate(2px, 0) rotate(45deg);
      }

      &--active {
        &::after {
          transform: translate(-2px, 0) rotate(45deg);
        }
        &::before {
          transform: translate(2px, 0) rotate(-45deg);
        }
      }
    }
  }

  &__value {
    margin-top: 70px;

    &-item {
      display: flex;
      align-items: center;
      margin-bottom: 35px;
    }

    &-heading {
      color: var(--color-2);
      font-family: Calibri, sans-serif;
      font-weight: 300;
    }

    &-icon {
      fill: var(--color-6);
    }

    &-text {
      padding-left: 10px;
      font-family: Roboto;
      font-size: 18px;
      font-weight: 400;
      line-height: calc(25 / 18);
      color: var(--color-black);
      margin: 0;
    }
  }

  &__items {
    margin-top: 145px;
    padding-bottom: 80px;
    overflow: hidden;

    &-wrap {
      margin-top: 45px;
      padding-top: 80px;
      padding-bottom: 60px;
      position: relative;
    }

    &-item {
      margin-bottom: 35px;
    }

    &-icon {
      height: 50px;
      margin-bottom: 15px;
    }

    &-text {
      max-width: 250px;
      margin: auto;
      color: var(--color-2);
      @media screen and (max-width: 768px) {
        max-width: 220px;
        margin: auto;
      }
    }

    &-arrow-top {
      position: absolute;
      top: 0;
      left: calc(50% - 315px);

      @media screen and (max-width: 768px) {
        transform: scaleY(-1) rotateZ(-95deg);
        left: -5%;
        top: 20%;
        height: 110px;
      }
    }

    &-arrow-bottom {
      position: absolute;
      bottom: 0;
      left: calc(50% + 115px);

      @media screen and (max-width: 768px) {
        transform: scaleY(-1) rotateZ(-90deg);
        left: 65%;
        bottom: 25%;
        height: 110px;
      }
    }
  }

  &__certificate {
    padding: 70px 0;

    &-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding-right: 90px;
    }

    &-title {
      margin-bottom: 45px;
    }

    &-text {
      font-family: Calibri, sans-serif;
      color: var(--color-2);
      line-height: calc(40 / 27);
    }

    &-image {
      width: 100%;
      border-radius: 5px;
    }
  }
}