@import '../_common'
p
  text-align: justify 
.banner 
    .banner-wrapper
        bottom: 15% !important
        .content
            margin: 0 auto 
            width: 41%
            @include respond-to(screen-540)
              width: 80%
                
    .banner2
        .flex
            justify-content: center  !important
            .colC
                margin: 0  !important


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

       padding: 60px 0

    @include respond-to(screen-540)
       padding: 45px 0
       width: 100%
  

    p
     text-align: center
     margin-bottom: 80px
     @include respond-to(screen-1024)
       margin-bottom: 50px
     @include respond-to(screen-540)
       margin-bottom: 45px

.transport-img
    width: 100%
    height: auto
    overflow: hidden
    border-radius: 15px 
    z-index: 2

    img
        width: 100%
        height: auto
        display: block
        overflow: hidden
        object-fit: cover
.home-secD
  padding:  0 !important
.transport-secB-bg
  background-color: #BEFFFF
  position: relative
  margin-top: 145px
  @include respond-to(screen-768)
    margin-top: 80px
  @include respond-to(screen-540)
    margin-top: 30px

  
  img
    width: 100%
  .shape
    position: absolute
    top: -13%
    left: 0
    width: 100%
    z-index: -1
    @include respond-to(screen-768)
      top: -7%
    @include respond-to(screen-540)
      top: -2%

    
    img
      width: 100%
  .transport-secB
    display: grid
    grid-template-columns: repeat(2, 1fr)
    padding: 48px 0 90px
    @include respond-to(screen-1024)
      padding: 0 0 60px
    @include respond-to(screen-991)
      grid-template-columns: repeat(1, 1fr)
      gap: 20px
    @include respond-to(screen-540)
      padding: 0 0 30px

    


    > div
      padding: 35px 60px 35px 0
      @include respond-to(screen-1024)
        padding: 30px 30px 30px 0
      @include respond-to(screen-991)
        padding: 0
      

      &:first-child
        border-right: 1.8px solid var(--prime)
        @include respond-to(screen-991)
          border-right: none


      &:last-child
        padding: 0  60px 0 60px
        @include respond-to(screen-1024)
          padding: 0 0 0 24px
        @include respond-to(screen-768)
          padding: 0
          margin-top: 18px 



      h2
        margin-bottom: 30px

      p
        margin-bottom: 15px
        
    .btn-wraper
      padding: 45px 0 0 0
      text-align: left
      @include respond-to(screen-540)
        padding: 24px 0 0 0

    .transport-secB-ul
      list-style: none
      padding-left: 25px
      @include respond-to(screen-1024)
         padding-left: 0

      li
        font-size: 16px
        color: var(--text)
        margin-bottom: 24px
        position: relative
        padding-left: 45px
        @include respond-to(screen-540)
           margin-bottom: 14px
           font-size: 14px
           padding-left: 32px

        &:last-child
          margin-bottom: 0

        &::before
          content: "•"
          color: var(--prime)
          font-size: 3.2em
          position: absolute
          left: 0
          top: -28px


.transport-secC
  width: 88%
  margin: 0 auto
  @include respond-to(screen-991)
    width: 100%
.transport-cover
  padding: 60px 0 125px
  background: #fff
  @include respond-to(screen-1024)
     padding: 4px 0 95px
  @include respond-to(screen-540)
     padding: 4px 0 58px
  
  h2
    text-align: center
    margin: 23px 0 70px

    @include respond-to(screen-1536)
      margin: 23px 0 123px

    @include respond-to(screen-768)
      margin: 25px 0 50px

    @include respond-to(screen-540)
      font-size: 25px
      margin: 25px 0 

    
.transport-container
  display: grid
  grid-template-columns: repeat(2, 1fr)
  align-items: center
  margin: auto
  gap: 90px
  @include respond-to(screen-1024)
     gap: 50px
  @include respond-to(screen-991)
     grid-template-columns: repeat(1, 1fr)
     gap: 110px
  @include respond-to(screen-540)
     gap: 64px
  
  

.transport-img img
  width: 100%
  border-radius: 10px

.transport-content
  flex: 1
  z-index:1


.transport-content h2
  font-size: 28px
  text-align: center
  margin-bottom: 40px

.accordion
  padding-left: 30px
  position: relative
  @include respond-to(screen-768)
    padding-left: 30px

  &::before
    content: ""
    position: absolute
    top: 50%
    left: 50px
    transform: translateY(-50%)
    width: 2px
    height: calc(100% + 120px)
    background-color: var(--prime)
    z-index: -1

    @include respond-to(screen-540)
      left: 45px
      height: calc(100% + 64px)


  .active
     > div
         h4
          color: var(--prime)


.accordion-item
  margin-bottom: 25px
  @include respond-to(screen-768)
    margin-bottom: 18px
  @include respond-to(screen-768)
    margin-bottom: 15px
  
  

.accordion-header
  display: flex
  align-items: center
  gap: 36px
  cursor: pointer
  @include respond-to(screen-540)
    gap: 15px


.accordion-header
   h4
      font-weight: 600
      margin: 0
      color: var(--text)

      @include respond-to(screen-768)
        font-size: 20px

      @include respond-to(screen-540)
        font-size: 16px
  

.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
  padding-left: 75px
  @include respond-to(screen-540)
    padding-left: 45px

  p
    color: #555