@import "../../variables.scss";

.stepsCard {
  padding-top:  $pad + 100;
  padding-bottom:  $pad + 40;

  @media (max-width: $xxl){
    padding-top:  $pad + 60;
    padding-bottom:  $pad + 30;
  }

  @media (max-width: $md){
    padding-top:  $pad + 30;
  }
  
  .stepsTitle{
    margin-bottom: $mrg + 60;
    @media (max-width: $xxl){
      margin-bottom: $mrg + 20;
    }
    h2 {
      text-transform: uppercase;
      margin-bottom: $mrg + 12;
      font-size: $font + 43;
      @media (max-width: $xxl){
        font-size: $font + 30;
      }
      @media (max-width: $xl){
        font-size: $font + 20;
        margin-bottom: $mrg;
      }
      @media (max-width: $md){
        font-size: $font + 16;
      }
      span {
        color: $blue;
      }
    }
    h3 {
      text-transform: uppercase;
      margin-bottom: $mrg + 18;
      font-weight: $font-weight-regular;
      letter-spacing: 1px;
      font-size: $font + 24;
      @media (max-width: $xxl){
        font-size: $font + 20;
      }
      @media (max-width: $xl){
        font-size: $font + 16;
        margin-bottom: $mrg + 10;
      }
      @media (max-width: $md){
        font-size: $font + 12;
      }
    }
    p{
      font-size: $font + 8; 
      line-height: 1.8;
      @media (max-width: $xl){
        font-size: $font + 6; 
        br {
          display: none;
        }
      }
    }
  }
  .stepsList {
    .stepsInfoCard {
        display: flex;    
        justify-content: center;
        max-width:900px;
        margin: 0 auto;
        padding-left: $pad;
        @media (max-width: $xxl){
          max-width:740px;
        }
        @media (max-width: $xl){
          max-width:600px;
        }
        li {
          counter-increment: step-counter; 
          position: relative;
          list-style: none;
          padding: 0;
          padding-bottom: $pad + 30;
          @media (max-width: $xl){
            padding-bottom: $pad + 10;
          }
          @media (max-width: $md){
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
          }
          @media (max-width: $md){
            padding-bottom: $pad + 20;
          }
          &:last-child{
            padding-bottom: 0px;
          }
          &::before {
            content: counter(step-counter, decimal-leading-zero); 
            font-size: $font + 80;
            color:$text-grey3;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: $font-weight-heavy;
            width: 126px;
            flex: 0 0 126px;
            padding-right:30px;
            @media (max-width: $xxl){
              font-size: $font + 60;
            }
            @media (max-width: $xl){
              font-size: $font + 40;
              width: 100px;
              flex: 0 0 100px;
            }
            @media (max-width: $md){
              font-size: $font + 30;
              padding-right:0px;
              margin: 0 auto;
            }
          }
        }
        .stepsInfoCardLt {
          display: flex;
          align-items: center;
          width: 264px;
          flex: 0 0 264px;
          margin-right: $mrg + 50;
          @media (max-width: $xxl){
            width: 200px;
            flex: 0 0 200px;
            margin-right: $mrg + 30;
          }
          @media (max-width: $xl){
            width: 180px;
            flex: 0 0 180px;
            margin-right: $mrg + 10;
          }
          @media (max-width: $md){
            width: 120px;
            flex: 0 0 120px;
            margin: 0 auto $mrg + 10;
          }
          .stepsIcon {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);         

            @media (max-width: $xxl){
              width: 100px;
            }
            @media (max-width: $xl){
              width: 80px;
            }
            @media (max-width: $md){
              width: 60px;
            }
          }
        }
        .stepsInfoCardRt {
          text-align: left;
          margin-top: -10px;
          @media (max-width: $md){
            text-align: center;
          }
          @media (max-width: $sm){
            padding-left: 0;
          }
          p{
            font-size: $font + 8; 
            line-height: 1.8;
            color: $grey2;
            @media (max-width: $xxl){
              font-size: $font + 6; 
            }
            @media (max-width: $xl){
              font-size: $font + 5; 
            }
          }
          span {
            font-weight: $font-weight-light;
            margin-bottom: 0;
            display: block;
            font-size: $font + 22;
            @media (max-width: $xxl){
              font-size: $font + 18;
            }
            @media (max-width: $xl){
              font-size: $font + 8;
            }
          }
          h3 {
            margin-bottom: $mrg - 4;
            @media (max-width: $xxl){
              font-size: $font + 24;
            }
            @media (max-width: $xl){
              font-size: $font + 14;
            }
          }
        }
    }
  }
}