@import '../_common'

p
  text-align: justify 
.banner
  z-index: 2

  .bg
    .banner-wrapper
      bottom: 15% !important

      .content
        width: 40%
        margin: 0 auto !important 
        @include respond-to(screen-540)
           width: 65%

.sikll-secA
  padding: 80px 0 110px
  position: relative
  @include respond-to(screen-991)
    padding: 65px 0
  @include respond-to(screen-540)
      padding: 45px 0

  &::before
    content: ''
    position: absolute
    top: 0
    bottom: 0
    left: 0
    width: 2px
    background-image: repeating-linear-gradient(to bottom, var(--prime), var(--prime) 8px, transparent 10px, transparent 16px)

  .heading
    width: 55%
    margin: 0 auto
    text-align: center
    @include respond-to(screen-1366)
      width: 64%
    @include respond-to(screen-1280)
      width: 70%
    @include respond-to(screen-1024)
      width: 90%
    

    p
      text-align: justify
      @include respond-to(screen-991)
        margin-bottom: 45px

      @include respond-to(screen-540)
        margin-bottom: 35px


.skill-grid-parent
  .skill-grid
    display: grid
    grid-template-columns: repeat(2, 1fr)
    align-items: center
    gap: 180px
    margin-top: 135px
    position: relative



    @include respond-to(screen-1366)
      margin-top: 56px
      gap: 110px

    @include respond-to(screen-991)
      grid-template-columns: 1fr
      gap: 45px
      margin-top: 66px

    @include respond-to(screen-991)
      margin-top: 49px

  .skill-grid
    &:nth-child(2n)
      .numbers
        @include respond-to(screen-991)
          order: 1

    .numbers
      display: flex
      gap: 45px
      border-radius: 15px

      @include respond-to(screen-1024)
        gap: 6px

      .line-number
        font-size: 1.2rem
        color: var(--white)
        background-color: var(--prime)
        width: 45px
        height: 45px
        border-radius: 50px
        display: flex
        justify-content: center
        align-items: center
        flex: none
        position: relative
        top: 0
        left: -24px
        font-weight: 600
        @include respond-to(screen-991)
          position: absolute
        @include respond-to(screen-540)
          font-size: 14px
          width: 30px
          height: 30px
          left: -14px


    .skill-content
      height: 350px
      overflow: auto
      padding-right: 2rem
      @include respond-to(screen-991)
        margin-left: 55px
        text-align: center
        padding-right: 0
      @include respond-to(screen-540)
        margin-left: 26px

      p
        text-align: justify

      &::-webkit-scrollbar
        width: 4px

      /* Track - thin white line */
      &::-webkit-scrollbar-track
        background: transparent
        border-right: 2px solid rgba(199, 199, 199, 0.6)

      /* Thumb - white rectangle */
      &::-webkit-scrollbar-thumb
        background: #2998ff
        border-radius: 0
        min-height: 60px
        margin: 2px
        border-left: 3px solid transparent
        border-right: 3px solid transparent

      /* Hover effect */
      &::-webkit-scrollbar-thumb:hover
        background: rgba(199, 199, 199, 0.6)

      /* Hide on mobile */
      @include respond-to(screen-540)
        &::-webkit-scrollbar
          display: none

      h2
        margin-bottom: 30px
        font-size: 36px
        line-height: 1.25
        position: sticky
        top: 0
        background: #fff
        padding:  0 10px
        @include respond-to(screen-675)
          font-size: 26px
        @include respond-to(screen-540)
          margin-bottom: 15px


      h5
        margin: 25px 0 14px

      ol
        li
          margin: 0 0 15px
          font-size: 14px
          text-align: justify
          color: var(--text)

        @include respond-to(screen-1024)
          font-size: 32px

        @include respond-to(screen-991)
          margin-bottom: 12px

        @include respond-to(screen-767)
          font-size: 28px

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

        @include respond-to(screen-365)
          font-size: 22px

    img
      border-radius: 15px
      box-shadow: 17px -15px 0px 0px #C1CBFF
      width: 100%
      display: inline-block

      @include respond-to(screen-991)
        width: 90%
        margin: 0 auto
        transform: translateY(20px)
      @include respond-to(screen-540)
        width: 85%
        box-shadow: 9px -8px 0px 0px #C1CBFF