@import '../_common';
@import '../../sass/transport/transport'
p
  text-align: justify 
.banner
  z-index: 2
  .bg
    .banner-wrapper
      bottom: 15% !important

.home-secD
  background-color: #fff
  padding: 0

.transport-secC
  width: 100%

  .transport-container
    align-items: flex-start

  .transport-cover
    padding: 120px 0 125px
    @include respond-to(screen-991)
      padding: 80px 0 65px
    .transport-img
      z-index: 2
      display: none
      @include respond-to(screen-675)


      img
        width: 100%
        position: sticky
        top: calc( 28% - 100px )
        @include respond-to(screen-1366)
          top: calc(36% - 100px)

        @include respond-to(screen-991)
          position: static
    .transport-container
      @include respond-to(screen-1024)
        gap: 35px

      @include respond-to(screen-991)
        grid-template-columns: 1fr
      .transport-content
        position: relative
        z-index: 1

        &::after
          content: ""
          width: 2px
          height: calc(100% + 1200px)
          position: absolute
          top: 50%
          left: 20px
          transform: translateY(-50%)
          z-index: -1
          background-color: var(--prime)
          transition: height 0.3s ease
          @include respond-to(screen-540)
            height: calc(100% + 300px)
            left: 16px
          
        


        .accordion
          padding: 0

          &::before
            height: 0
            width: 0

          h3
            text-align: left
            margin: 30px 0 20px 75px

          .accordion-item
            @include respond-to(screen-1024)
                margin-bottom: 16px
            .accordion-header
              display: flex
              align-items: center
              gap: 10px
              cursor: pointer
          

              div
                h4
                  margin-left: 24px
                  font-size: 18px
                  @include respond-to(screen-1366)
                    font-size: 16px
                    line-height: 22px
                    margin-left: 8px
                  @include respond-to(screen-540)
                    margin-left: 8px
                    font-size: 14px
                  
            .accordion-body
                p:not(ul li > p)
                  position: relative
                  padding-left: 18px   
                  font-size: 14px
                  line-height: 1.6
                  color: #555
                  padding-top: 5p
                  @include respond-to(screen-1024)
                      font-size: 14px
                  &::before
                    content: "•"
                    position: absolute
                    left: 0
                    top: 4px
                    font-size: 20px
                    line-height: 1
                    color: var(--prime)

                ul
                  li

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


                .symbol
                  position: relative
                  display: flex
                  align-items: center
                  justify-content: center
                  width: 40px
                  height: 40px
                  border: 2px solid var(--prime)
                  color: var(--prime)
                  border-radius: 50%
                  font-size: 22px
                  background-color: var(--white)
                  line-height: 1
                  font-weight: 600

                  @include respond-to(screen-540)
                    width: 32px
                    height: 32px

                .accordion-item.active
                  .symbol
                    background-color: var(--prime)
                    color: #fff

                .accordion-body
                  display: none
                  @include respond-to(screen-540)
                  p
                    color: #555

                  ul
                    li
                      strong
                        margin: 12px 0 5px
                        display: block