.hardware_banner
  height: 90vh
  background-position: center
  display: flex
  align-items: center
  padding-top: 0
  flex-direction: column-reverse
  justify-content: start
  margin-bottom: 4rem
  background-repeat: no-repeat
  @include tablet-ls
    min-height: 50vh
    height: 53vh
    background-size: cover
    background-position: center
    margin-bottom: 5rem
    justify-content: start
  @include tablet
    height: 80vh
    margin-bottom: 8rem
    margin-top: 0
    background-position: center
    justify-content: start
  @include phone
    background-image: none !important
    height: 54vh
    margin-bottom: 20rem
  video
    width: 100%
    margin-top: -5rem
    @include tablet-ls
      margin-top: 0
    @include phone
      display: none
    @include tablet
      display: none
  .hardware_hero_bg_mobile
    display: none
    width: 100%
    @include tablet
      display: block
      top: 0
      position: absolute
      margin-top: -28vh
      max-width: 100%
    @include phone
      display: block
      top: 0
      position: absolute
      margin-top: -3rem
      max-width: 100%
  h2
    width: 100%
    color: #000
    text-shadow: 0px 1px 3px #ffffff
  h1
    color: #92278F !important
  .index_hero
    display: flex
    text-align: center
    top: 6rem
    padding-left: 8rem
    @include tablet-ls
      top: 5rem
      padding-left: 0
    @include tablet
      top: 10rem
      padding-left: 0
    @include phone
      top: 8rem
      padding-left: 0
.hardware_section1
  .hardware_section1_wrap
    text-align: center
    margin-bottom: 5rem
    margin-top: 2rem
    img
      max-width: 100%
    .hardware_section1_image
      .hardware_hover
        display: none
        transition: transform 0.5s ease
      .hardware_unhover
        display: inline-flex
        transition: transform 0.5s ease
      &:hover
        .hardware_hover
          display: inline-flex
        .hardware_unhover
          display: none
    .hardware_section1_description
      h3
        font-size: 1.4rem
        font-weight: 300
        margin: 0 0 1.5rem
      h4
        font-size: 1.8rem
        margin-top: 0
        font-weight: 600
    .learn_more
      background-color: #fff
      padding: 1rem 2rem
      display: inline-flex
      border-radius: 30px;
      font-weight: normal
      color: #92278F
      border: 1px solid #92278F
      width: 160px
      justify-content: center
      transition: 0.25s ease
      margin-right: 10px
      &:hover
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)
    .buy_now
      background-color: #92278F
      padding: 1rem 2rem
      display: inline-flex
      border-radius: 30px;
      font-weight: normal
      color: #fff
      border: 1px solid #92278F
      width: 160px
      justify-content: center
      transition: 0.25s ease
      &:hover
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)

.hardware_section_2
  margin-top: 3rem
  .feature-box
    padding: 1.25rem
    display: flex
    flex-direction: column
    margin-bottom: 1.25rem
    color: #000
    background-color: #F7F6F5
    position: relative
    border-radius: 8px
    &::before
      content: ""
      position: absolute
      left: 0
      top: 20%
      height: 60%
      width: 8px
      background: #92288F 
      border-radius: 0 15px 15px 0
    h4
      font-size: 1.5rem
      font-weight: 600
      margin: 0 0 1rem
    p
      margin: 0
      font-size: 1.2rem
      @include phone
        font-size: 1.4rem
  img
    max-width: 100%
  video
    width: 100%
    outline-offset: -4px
    outline: 4px solid white
 

.hardware_section_3
  margin-bottom: 5rem
  margin-top: 5rem
  background-size: 100% 100%
  background-position: left center
  background-repeat: no-repeat
  padding: 5rem 0
  color: #fff
  @include phone
    padding: 1.5rem
    margin: 2rem 0 !important
    p
      font-size: 1.4rem
  h2
    margin: 0 !important
    font-weight: 600
    span
      font-family: "DM Serif Display", serif
      font-weight: normal
      font-style: italic
    @include phone
      br
        display: none
  img
    max-width: 100%
  .col-md-4
    .hardware_section_3_items
      padding: 2rem
      border-radius: 10px
      border: 1px solid #3434346b
      background: rgba(72, 72, 72, .3)
      backdrop-filter: blur(15px)
      -webkit-backdrop-filter: blur(15px)
      color: #fff
      height: 92%
      margin-top: 1.5rem
      1px solid #343434
      .feature-box
        display: flex
        margin-top: 15px
        img
          width: 27px
          height: 27px
          margin-right: 10px
      h3
        font-size: 1.5rem
        font-weight: 600
        color: #fff
        margin: 0 0 1.5rem
        @include phone
          font-size: 1.6rem
      p
        font-size: 1.2rem
        color: #fff
        margin: 0
        @include phone
          font-size: 1.4rem
.hardware_section_4
  margin: 5rem 0 10rem
  @include phone
    margin: 5rem 0 5rem
  h2
    margin: 0 0 6rem
    span
      font-family: "DM Serif Display", serif
      font-weight: normal
      font-style: italic
    @include phone
      margin: 0 0 3rem
  .feature-box
    background: radial-gradient(circle at top, #9B5CFF, #2A0A5E 60%, #000000 100%)
    padding: 1.5rem 1rem
    color: #fff
    border-radius: 10px
    height: 100%
    @include tablet
      margin-bottom: 1.5rem

    @include phone
      margin-bottom: 1.5rem
      height: auto
    h3
      font-size: 1.5rem
      font-weight: 600
      color: #fff
      @include phone
        font-size: 1.6rem
    p
      font-size: 1.2rem
      color: #fff
      margin: 0
      @include phone
        font-size: 1.4rem
    img
      height: 4rem
  .hardware_arrow_wrapper
    position: relative
    display: flex
    align-items: center
    justify-content: space-between
    @include phone
      display: none
    @include tablet
      display: none
    @include tablet-ls-custom
      display: none
    .arrow_1
      width: 9.688rem
      position: absolute
      left: 19%
      top: -7rem
    .arrow_2
      width: 9.688rem
      position: absolute
      right: 18%
      top: -7rem
    .reversed_arrow
      width: 9.688rem
      transform: scaleY(-1)
      position: absolute
      left: 44%
      bottom: -24rem
      @include tablet-ls
        bottom: -28rem

.hardware_section_5
  background-color: #FFFFFF
  margin-top: 5rem
  color: #fff
  background-size: cover
  background-position: right bottom
  background-repeat: no-repeat
  padding: 5rem 3rem
  border-radius: 10px
  @include phone
    max-width: 94%
    background-position: center
    padding: 3rem 2rem !important
  @include tablet
    background-position: center
  @include tablet-ls
    background-position: center

  h2
    font-weight: 600
    font-size: 2.6rem
    margin: 0

    span
      font-family: "DM Serif Display", serif
      font-weight: normal
      font-style: italic

  .desc-text
    color: #fff
    margin-bottom: 30px
    line-height: 1.6
    font-size: 1.2rem
    @include phone
        font-size: 1.4rem

  .feature-box
    display: flex
    align-items: center
    margin-bottom: 1rem
    color: #fff
    img
      max-height: 1.688rem
      max-width: 1.688rem
      margin-right: 10px

    .feature-text
      font-size: 1.2rem
      color: #fff
      margin: 0
      @include phone
          font-size: 1.4rem

  img
    max-width: 100%
    height: auto
    object-fit: cover