section.courses
  @include spaceSection
  .container
    align-items: flex-start
  .container .backTrain
    align-items: center
    gap: 0 .5rem
    span
      color: $black
    @media (min-width: 1280px)
      &:hover
        span
          text-decoration: underline
  .container .filters
    width: 100%
    margin: 2rem 0
    @media (min-width: 768px)
      display: none
    select
      width: 100%
      background-color: $white
      border: 1px solid $black
      border-radius: 20px
      padding: .5rem 10px
      //text-transform: uppercase
  .container .filtersBig
    @media (min-width: 768px)
      display: flex
      width: 100%
      gap: 0 2rem
      margin: 2rem 0 4rem
      a
        flex: 1
        color: rgba(0, 0, 0, .5)
        position: relative
        &::after
          content: ''
          position: absolute
          bottom: -8px
          left: 0
          height: 1px
          width: 100%
          background-color: $black
      a.active
        font-weight: 700
        color: $black
        &::after
          height: 5px
    @media (min-width: 1024px)
      width: 100%
      align-self: center
    @media (min-width: 1440px)
      width: 100%
      a
        font-size: 18px
    @media (min-width: 1600px)
      // width: 65%
      gap: 0 3rem
      a
        font-size: 20px
  .container .blockCourse
    padding-bottom: 1rem
    gap: 1rem
    // border-bottom: 1px solid $black
    .text
      gap: .5rem 0
      margin-bottom: 1rem
      @media (min-width: 1440px)
        margin-bottom: 2rem
      h2
        //text-transform: uppercase
      @media (min-width: 768px)
        p 
          width: 60%
      @media (min-width: 1024px)
        p 
          width: 40%
        h2
          font-size: 28px
      @media (min-width: 1440px)
        h2
          font-size: 30px
      @media (min-width: 1600px)
        p 
          width: 35%
        h2
          font-size: 32px
      @media (min-width: 1900px)
        p 
          width: 30%
    .listItems
      gap: 2rem
      flex-wrap: wrap
      align-items: flex-start
      justify-content: flex-start
      @media (min-width: 1280px)
        align-items: stretch
      .item
        width: 100%
        align-items: flex-start
        padding: 2rem
        gap: 1.5rem 0
        border: 1px solid #c4c4c4
        border-radius: 20px
        text-align: center
        justify-content: center
        align-items: center
        @media (max-width: 768px)
          display: block
        @media (min-width: 768px)
          width: calc( 50% - 2rem )
        @media (min-width: 1280px)
          width: calc( 33% - 2rem )
          transition: all .2s
          &:hover
            background-color: $black
            h2
              color: $yellow
            .txtItem 
              p, li
                color: $white
        h2
          color: $black
          font-size: 20px
          height: 4rem
          @media (max-width: 780px)
            height: auto
            margin-bottom: 2%
        .button_contact
          position: inherit
          background-color: $yellow
          align-items: center
          padding: 1rem 1.5rem
          border-radius: 30px
          gap: 0 .5rem
          transition: all .3s
          box-shadow: 0px 13px 27px -5px rgba(50,50,93,0.25) , 0px 8px 16px -8px rgba(0,0,0,0.3) , 0px -6px 16px -6px rgba(0,0,0,0.025) 
          font-weight: 700
          width: auto
          //margin-top: 5% !important
          //margin-bottom: 10% !important
          justify-content: center
          &:hover
            cursor: pointer
          span
            color: $textColor
          @media (min-width: 1280px)
            &:hover
              gap: 0 .8rem
        .txtItem
          width: 100%
          p, li
            margin-bottom: 5px
            color: $black
            height: 11rem
            overflow-y: hidden
            overflow-x: visible
            margin-bottom: 1rem
            @media (max-width: 780px)
              height: auto
              margin-top: 2rem
              margin-bottom: 0rem
          ul
            padding-left: 1.1rem
        .txtItem.opened
          height: auto
        .moreTxt
          color: #909CA4
          @media (min-width: 1280px)
          cursor: pointer
            // .duration
            //   span
            //     color: $white
            //   svg path
            //     fill: $white
        @media (min-width: 1440px)
          width: calc( 25% - 2rem )
        // .duration
        //   justify-content: flex-start
        //   align-items: center
        //   gap: 0 .5rem
        //   span
        //     font-size: 14px

.block_spare_parts
  @media (min-width: 1100px)
    padding: 0% 10%
  .text
    background: $backColor
    border-radius: 10px
    padding: 2rem 2rem 2rem 2rem !important
    @media (max-width: 700px)
      display: block
    .colflex
      display: block
    img
      width: 50% !important
      border-radius: 20px !important
      margin-left: 10%
      height: 250px
      object-fit: contain
      @media (max-width: 700px)
        width: 100% !important
        margin-left: 0px !important
        margin-top: 25px !important
    h2
      color: $textColor
      width: 100% !important
    p
      color: $textColor
      width: 100% !important