<template>
  <div class="section-limit" >
    <div class="section-limit-h5-wrap">
<!--      <ball  class="b-ball"></ball>-->
<!--      <svg-icon icon-class="hstart" ></svg-icon>-->
      <img v-lazy="'/images/hstart.png'" class="section-limit-start b-ball" alt="">
      <div class="section-limit-div">
        <h1 class="section-limit-title wow  fadeInDown" >
          <span>We are LightLimX</span>
          <!--        <svg-icon icon-class="start" class="section-limit-title-img"></svg-icon>-->
        </h1>
        <div class="section-limit-c">
          <p class="section-limit-title-desc wow fadeInDownBig">
            We Make The
            <br/>Impossible Possible.
          </p>
        </div>
      </div>
      <div class="section-limit-flower-wrap wow fadeInDownBig">
        <svg-icon icon-class="hstart" class="section-limit-start c-ball"></svg-icon>
      </div>
<!--      <div class="section-limit-flower-wrap  wow fadeInDown">-->
<!--        <svg-icon icon-class="flower"></svg-icon>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  import {assetsUri} from '~/utils/index.js'
    export default {
      name: "SectionLimitX",
      data(){
        return {
          assetsUri
        }
      },

    }
</script>

<style scoped lang="less">
.section-limit{
  width: 100%;
  height: 100%;
  /*min-height: 100vh;*/
  box-sizing: border-box;
  padding-top: .96rem;
  &-div{
    margin-right: .16rem;
  }
  &-start{
  }
  &-flower-wrap{
    margin-top: 1rem;
    .svg-icon{
      width: 8.95rem;
      height: 6.59rem;
    }
  }
  .b-ball{
    display: none;
  }
  .c-ball{
    /*transform: scale(2.2);*/
  }
  &-c{
    padding-top: 1.1rem;
    display: flex;
    align-items: center;
  }
  &-h5-wrap{
    height: 100%;
    display: flex;
    align-items: center;
    /*overflow: hidden;*/
  }
  &-title{
    padding-top: 1.05rem;
    font-size: 1.10rem;
    font-family: Manrope;
    font-weight: bold;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    word-break: keep-all;
    white-space: nowrap;
    &-img{
      display: block;
      width: 3.29rem;
      height: 2.42rem;
      margin-left: -.88rem;
    }
    >span{
      font-size: .68rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: 1.31rem;
      color: #FFFFFF;
      position: relative;
      word-break: keep-all;
    }
    &-desc{
      word-break: keep-all;
      white-space: nowrap;
      margin-top: 0;
      font-weight: bold;
      color: #FFFFFF;
      font-size: .44rem;
      font-family: Manrope;
      line-height: .72rem;
    }
  }
}
  @media screen and (max-width: 768px){
    .section-limit{
      padding-top: .88rem;
      &-c{
        padding-top: .57rem;
        justify-content: center;
      }
      .b-ball{
        display: block;
      }
      &-flower-wrap{
        .c-ball{
          display: none;
        }
      }
      &-h5-wrap{
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        padding-top: .78rem;
        flex-direction: column;
        .b-ball{
          width: calc( 7.49rem - .3rem);
          height: 5.51rem;
          margin: 0 auto;
          box-sizing: content-box;
        }
      }
      &-flower-wrap{
        margin-top: .77rem;
        .svg-icon{
          width: 1.57rem;
          height: .2rem;
        }
      }
      &-title{
        padding-top: 1.03rem;
        font-size: .62rem;
        color: #FFFFFF;
        &-img{
          width: 2.32rem;
          height: 1.64rem;
          margin-left: -.6rem;
        }
        >span{
          font-size: .6rem;
          font-family: Manrope;
          font-weight: bold;
          line-height: 1.31rem;
          color: #FFFFFF;
        }
        &-desc{
          margin-top: 0;
          text-align: center;
          font-size: .42rem;
          font-family: Manrope;
          font-weight: bold;
          line-height: .68rem;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
