@import '../_common'
p
  text-align: justify 

.banner
    &.home-banner
        .bg 
            .banner-wrapper
                bottom: 15% !important
                .container
                    .content
                        display: flex
                        justify-content: center
                        h2
                            max-width: 600px
                            text-align: center
                            color: #fff
                            text-transform: capitalize
                            @include respond-to(screen-1024)
                               max-width: 465px
                            @include respond-to(screen-991)
                               max-width: 350px

                            @include respond-to(screen-768)
                               max-width: 345px
                            @include respond-to(screen-540)
                               width: 65%
                               font-size: 34px
                            @include respond-to(screen-420)
                               width: 100%
                               font-size: 30px

.guide-secA
  padding: 50px 0 80px
  width: 90%
  margin: 0 auto
  @include respond-to(screen-1536)
    width: 100%

  .guide-card
    margin-top: 60px
    display: flex
    flex-direction: column
    gap: 110px 
    @include respond-to(screen-991)
      gap: 65px 
    @include respond-to(screen-675)
      gap: 35px 
    

  .card
    display: grid
    grid-template-columns: repeat(2, 1fr)
    gap: 40px
    align-items: center
    @include respond-to(screen-1024)
      grid-template-columns: 1fr
      gap: 30px
    @include respond-to(screen-540)
      gap: 20px
    
    

    img
      width: 100%
      border-radius: 15px

    &:nth-child(even)
      > img
        order: 2
        @include respond-to(screen-1024)
          order: 1

      > .card-content
        order: 1

    .card-content
      .card-content-ul
        list-style: none
        padding: 30px 0 0 25px

        @include respond-to(screen-675)
             padding: 18px 0 0 18px
        @include respond-to(screen-540)
             padding: 18px 0 0 
        
        

        li
          font-size: 16px
          color: var(--text)
          margin-bottom: 10px
          position: relative
          padding-left: 45px

          @include respond-to(screen-675)
            padding-left: 35px
            font-size: 14px

          @include respond-to(screen-540)
            padding-left: 26px

          &::before
            content: "•"
            color: var(--prime)
            font-size: 2.4em 
            position: absolute
            left: 0
            top: 0
            line-height: 1