danovin/src/views/About/index.scss

.about {
  width: 100vw;
  max-width: 1250px;
  margin: 0px auto;
  padding: 0px 10px;
  direction: rtl;
  min-height: calc(100vh - 288px);
  padding-top: 100px;
  &__fury {
    margin-top: 30px;
    width: 100%;
    height: 650px;
    justify-content: space-between;
    &--right {
      align-items: center;
      width: 35%;
      .right-top {
        h1 {
          display: inline;
          letter-spacing: -2px;
          font-family: numeralBold;
          background-color: #00CC69;
          color: white;
        }
        p {
          margin-top: 10px;
          text-align: justify;
          font-family: numeralLight;
          color: #6d6d6d;
          letter-spacing: -1px;
        }
      }
      .right-bottom {
        margin-top: 20px;
        h2 {
          display: inline;
          font-family: numeralBold;
          background-color: #00CC69;
          color: white;
        }
        ul {
          margin: 0px;
          list-style: none;
          padding: 0px;
          margin-top: 5px;
          li {
            display: inline;
            border-bottom: 2px solid #00CC69;
            font-family: numeralLight;
            color: #6d6d6d;
          }
        }
      }
    }
    &--left {
      width: 60%;
      height: 100%;
      position: relative;
      & img{
        position: absolute;
      }
      &__1{
        top:0px;
        left: 100px;
        z-index: 100;
        height: 470px;
        width: 470px
        
      }
      &__2{
        left: 430px;
        bottom: 80px;
        z-index: 150;
        height: 235px;
        width: 235px;
        
      }
      &__3{
        bottom: 0px;
        left: 310px;
        z-index: 200;
        height: 200px;
        width: 200px;
        
      }
      &__4{
        top: 50px;
        left: 0px;
        z-index: 150;
        height: 200px;
        width: 200px;
      }
    }
  }
  &__advantages {
    width: 100%;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    justify-content: space-around;
    &--right {
      width: 48%;
      height: 100%;
      & img{
        width: 100%;
      }
    }
    &--left {
      padding-top: 20px;
      width: 48%;
      height: 100%;
      align-items: flex-end;
      margin-top: 20px;
      h1 {
        display: inline;
        font-family: numeralBold;
        background-color: #00CC69;
        color: white;
      }
      ul {
        margin: 0px;
        list-style: none;
        padding: 0px;
        margin-top: 5px;
        li {
          display: inline;
          text-align: justify;
          font-family: numeralLight;
          color: #6d6d6d;
        }
      }
    }
  }
}

.mobile-about{
  width: 100vw;
  max-width: 650px;
  margin: 0px auto;
  padding : 0px 10px 40px;
  direction: rtl;
  padding-top: 90px;
  overflow-x: hidden;
  &__fury{
    h1 {
      display: inline;
      letter-spacing: -2px;
      font-family: numeralBold;
      background-color: #00CC69;
      color: white;
    }
    p {
      margin-top: 10px;
      text-align: justify;
      font-family: numeralLight;
      color: #6d6d6d;
      letter-spacing: -1px;
    }
  }
  &__images{
    position: relative;
    height: 330px;
    width: 100%;
    & img{
      position: absolute;
      
    }
    &--1{
      top:0px;
      left: calc(100vw / 8);
      z-index: 100;
      height: calc(100vw - 100px);
      width: calc(100vw - 100px);
      max-width: 275px;
      max-height: 275px;
      
    }
    &--2{
      right: -20px;
      bottom: 70px;
      z-index: 150;
      height: calc(100vw / 2.5);
      width: calc(100vw / 2.5);
      max-width: 150px;
      max-height: 150px;
      
    }
    &--3{
      bottom: -10px;
      right: -10px;
      z-index: 200;
      height: calc(100vw / 3);
      width: calc(100vw / 3);
      max-width: 125px;
      max-height: 125px;
      
    }
    &--4{
      top: 50px;
      left: -20px;
      z-index: 150;
      height: calc(100vw / 3);
      width: calc(100vw / 3);
      max-width: 125px;
      max-height: 125px;
    }
  }
  &__keys{
    transform : translateY(-40px);
    h2 {
      display: inline;
      font-family: numeralBold;
      background-color: #00CC69;
      color: white;
    }
    ul {
      margin: 0px;
      list-style: none;
      padding: 0px;
      margin-top: 5px;
      li {
        display: inline;
        border-bottom: 2px solid #00CC69;
        font-family: numeralLight;
        color: #6d6d6d;
      }
    }
  }
  &__video{
    img {
      width: 100%;
    }
  }
  &__advantages{
    margin-top: 30px;
    h1 {
      display: inline;
      font-family: numeralBold;
      background-color: #00CC69;
      color: white;
      // margin-bottom: 20px;
    }
    ul {
      margin: 0px;
      list-style: none;
      padding: 0px;
      margin-top: 5px;
      li {
        display: inline;
        text-align: justify;
        font-family: numeralLight;
        color: #6d6d6d;
        margin-bottom: 5px;
      }
    }
  }
}