@import '../_common'
@import '../../sass/Examination-Evaluation/Examination-Evaluation'

p
  text-align: justify 
.banner
  z-index: 2
  &::before
     background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%),linear-gradient(180deg, rgba(0, 0, 0, 0) 24.5%, rgba(0, 0, 0, 0.85) 100%)
   

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

      .content
        width:100%
        margin: 0 auto !important
        h2
          width: 100%


.global-secA
    display: grid
    grid-template-columns: repeat(2 , 1fr)
    align-items: center
    gap: 65px
    padding-top: 45px

    @include respond-to(screen-991)
      grid-template-columns: repeat(1 , 1fr)
      gap: 25px
    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

    .global-secA-content
        padding-right: 120px
        @include respond-to(screen-1440)
           padding-right: 30px
        @include respond-to(screen-991)
           padding-right: 0
        p
          @include respond-to(screen-768)
            text-align: center

        p:not(:last-child)
            margin-bottom: 35px
            @include respond-to(screen-768)
                margin-bottom: 25px

    
.global-secB
    margin: 64px 0
    .heading
        width: 30%
        margin: 0 auto
        text-align: center
        @include respond-to(screen-1536)
          width: 50%
        @include respond-to(screen-1024)
          width: 55%
        @include respond-to(screen-768)
          width: 85%
        @include respond-to(screen-420)
          width: 100%
        
        h4
            font-size: 2rem
            line-height: 1.4
            @include respond-to(screen-768)
              line-height: 1.2
            @include respond-to(screen-540)
              font-size: 20px
  
        a
            @include respond-to(screen-540)
              font-size: 15px


    .global-grid
        display: grid
        grid-template-columns: repeat(6 , 1fr)
        gap: 20px
        margin-top: 45px
        @include respond-to(screen-1024)
          grid-template-columns: repeat( 3 , 1fr)
        @include respond-to(screen-675)
          grid-template-columns: repeat( 2 , 1fr)
          margin-top: 30px
        @include respond-to(screen-420)
          grid-template-columns: repeat( 1 , 1fr)
        
        .card
            display: flex
            justify-content: center
            align-items: center
            flex-direction: column
            gap: 30px
            padding: 30px
            border: 1px solid #CFCFCF
            border-radius: 6px
            h4
                font-weight: 600
                font-size: 18px
                text-align: center
                @include respond-to(screen-1536)
                  font-size: 16px
            img
                width: 85px
        
.international-activities
  background-color: transparent
  padding: 60px 0

  @include respond-to(screen-991)
    padding: 40px 0

  .activities-wrapper
    display: grid
    grid-template-columns: repeat(2, 1fr)
    gap: 65px
    align-items: center

    @include respond-to(screen-991)
      grid-template-columns: 1fr
      gap: 35px

    @include respond-to(screen-540)
      gap: 25px

    .content-block
      order: 2


      h4
        font-size: 20px
        color: var(--text)
        margin-bottom: 20px
        line-height: 1.4
        font-weight: 600

        @include respond-to(screen-675)
          font-size: 18px
          margin-bottom: 15px

      .activity-list
        list-style: none
        padding: 30px 0 0 0
        margin: 0

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

        li
          font-size: 14px
          color: var(--text)
          margin-bottom: 10px
          position: relative
          padding-left: 25px
          line-height: 1.5

          @include respond-to(screen-540)
            padding-left: 20px
            font-size: 13px

          &::before
            content: ""
            width: 10px
            height: 10px
            background-color: var(--prime)
            border-radius: 50%
            position: absolute
            left: 0
            top: 7px

    .slider-block
      order: 2
      border-radius: 10px
      overflow: hidden
      position: relative

      @include respond-to(screen-991)
        order: 1

      .whats-slider
        .swiper-slide
          img
            width: 100%
            display: block
            object-fit: cover

      .swiper-group
          position: absolute
          top: 50%
          left: 0
          right: 0
          transform: translateY(-50%)
          display: flex
          justify-content: space-between
          padding: 0 20px
          z-index: 2
          pointer-events: none

          .whats-prev
              transform: rotate(180deg)

          button
              pointer-events: auto
              background: #fff
              border: none
              width: 44px
              height: 44px
              border-radius: 50%
              display: flex
              align-items: center
              justify-content: center
              cursor: pointer
              box-shadow: 0 4px 12px rgba(0,0,0,.2)

              

              svg
                  width: 14px
                  path
                      stroke: var(--prime-light)

      .slider-pagination
        position: absolute
        bottom: 10px
        left: 50%
        transform: translateX(-50%)
        z-index: 10
        text-align: center

        .swiper-pagination-bullet
          opacity: 0.4
          transition: opacity 0.3s
          background: #fff

          &-active
            opacity: 1