@import '../_common'



p
  text-align: justify 

.banner
    &.home-banner
        .bg     
              .banner-wrapper
                bottom: 10% !important
                .container
                    .content
                        display: flex
                        justify-content: center
                        h2
                            max-width: 500px
                            text-align: center
                            color: #fff
                            text-transform: capitalize
                            @include respond-to(screen-1024)
                               max-width: 350px
                            @include respond-to(screen-991)
                               font-size: 40px
                            @include respond-to(screen-540)
                               font-size: 35px
                            @include respond-to(screen-420)
                               font-size: 28px
            
.banner2
    .flex
        justify-content: center  !important
        .colC
            margin: 0  !important

.home-secA
    background-color: #fff
    h2
      text-align: center
      margin-bottom: 30px
      @include respond-to(screen-675)
        margin-bottom: 12px
    
    .container.flex
        @include respond-to(screen-991)
              flex-direction: column 

.about-img,
.about-content
  flex: 1
  overflow: hidden

  img
    height: 100%
    width: 100%
    object-fit: contain
    border-radius: 12px


  p
    padding: 0 20px 0
    @include respond-to(screen-991)
      text-align: center
    @include respond-to(screen-991)
       padding: 0 



.about-content
  height: 410px
  overflow: auto

  &::-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

  p
    &:last-of-type
      padding-top: 20px

.item-grids , .item-grid
  display: grid
  grid-template-columns: 1fr 1fr
  background-color: var(--prime)
  overflow: hidden
  @include respond-to(screen-991)
    grid-template-columns: 1fr 

  .director-img
    position: relative
    height: 100%
    overflow: hidden
    @include respond-to(screen-768)
       height: 450px
    @include respond-to(screen-540)
       height: 350px
    
    .play-btn
         --playbtncolor: #fff
         position: absolute
         bottom: 60px
         right: 60px
         z-index: 1
         --btnsize: 65px
         @include respond-to(screen-991)
           bottom: 6px
           right: 54px
         @include respond-to(screen-540)
           bottom: 40px
           --btnsize: 45px

         &::after 
          border-left: calc(var(--btnsize) / 5.6) solid var(--playbtncolor)

    img
      width: 100%
      height: 100%
      object-fit: cover
      display: block
 
    &::after
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background: linear-gradient(to top, rgb(0 0 0 / 85%), rgba(255, 255, 255, 0))
      pointer-events: none

  .item-content
    color: var(--white)
    padding: 110px 110px 0 110px
    position: relative
    @include respond-to(screen-1280)
      padding: 40px 70px 0 50px
    @include respond-to(screen-1024)
      padding: 30px 54px 0 45px
    @include respond-to(screen-991)
       text-align: center
    @include respond-to(screen-540)
      padding: 26px 20px 0 20px
    
    .item-content-para1
       p
        &:last-child
            padding: 20px 0 60px
            @include respond-to(screen-991)
               padding: 26px 0 0
        &:first-child
            padding: 40px 0 0
            @include respond-to(screen-991)
               padding: 26px 0 0
    h5
      margin-bottom: 14px

    h2
      width: 52%
      @include respond-to(screen-1440)
        width: 90%

      @include respond-to(screen-991)
        margin: 0 auto
        width: 100%
    p
      color: var(--white)
      padding: 20px 0 5px 0
      width: 92%
      opacity: 0.8
      @include respond-to(screen-1024)
         padding: 35px 0
         @include respond-to(screen-768)
            padding:26px 0
            width: 100%
            margin: 0 auto


    h6
      font-size: 14px
      line-height: 20px
      margin-bottom: 4px
      @include respond-to(screen-540)
        margin-top:4px
    .chats
      display: flex
      justify-content: flex-end

      img
        @include respond-to(screen-540)
          width: 85px
.item-content-para, .item-content-para1
  position: relative
  max-height: 320px
  overflow-y: auto
  overflow-x: hidden
  margin: 15px 0


    

  /* Scrollbar base */
  &::-webkit-scrollbar
    width: 4px

  /* Track - thin white line */
  &::-webkit-scrollbar-track
    background: transparent
    border-right: 2px solid rgba(255,255,255,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(255,255,255,0.9)

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


.right-border
  position: absolute
  right: -20px
  top: 0
  border-right: 1px solid var(--white)
  display: inline-block
  @include respond-to(screen-540)
    display: none

  div
    position: absolute
    left: -5px
    top: 34%
    width: 12px
    height: 70px
    background-color: #fff
    transform: translateY(-50%)
    display: inline-block



.our-legacy
    // padding: 80px 0 0
    // @include respond-to(screen-1024)
    //   padding: 40px 0 0
    .our-heading
        text-align: center
        margin-bottom: 55px
        @include respond-to(screen-1024)
          margin-bottom: 30px
 
.year-timeline
  margin: 30px 0 68px
  position: relative
  @include respond-to(screen-1024)
     margin: 30px 0 45px

.years-container
  display: flex
  flex-direction: column
  align-items: center

.year-dots
  display: flex
  justify-content: space-between
  width: 100%
  position: relative
  z-index: 2
  padding: 0 65px

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


.year-dot
  display: flex
  flex-direction: column
  align-items: center
  cursor: pointer
  font-weight: 500
  color:#686868
  transition: all 0.3s ease
  font-size: 16px
  @include respond-to(screen-540)
    font-size: 11px


  &::before
    content: ''
    width: 18px
    height: 18px
    border-radius: 50%
    border: 1px solid var(--prime)
    background-color: var(--white)
    margin-bottom: 8px
    transition: all 0.3s ease

  &.active
    color: var(--prime)
    font-weight: bold

    &::before
      background-color: #0066cc
      width: 18px
      height: 18px

.timeline-line
  position: absolute
  top: 8px
  left: 0
  right: 0
  height: 1px
  background-color: var(--prime)
  z-index: -1

.swiper-nav
  display: flex
  justify-content: center
  gap: 20px
  margin: 20px 0

.legacy-prev,
.legacy-next
  background: none
  border: none
  cursor: pointer
  padding: 5px

  &:hover
    opacity: 0.8
  svg
    width: 30px
    height: 30px

    @include respond-to(screen-1024)
        width: 30px
        height: 30px

    @include respond-to(screen-991)
        width:20px
        height:20px

    path
        stroke: var(--prime)
.legacy-content
    padding: 60px
    flex: 1
    @include respond-to(screen-1280)
       padding: 25px
    @include respond-to(screen-540)
       padding: 25px 0

    p
     &:first-child
        font-size: 2rem
        margin-bottom: 14px
        color: var(--black)
        font-weight: 500
        @include respond-to(screen-540)
          font-size: 1.5rem
     
.our-legacy
  position: relative

  .swiper-nav
    position: absolute
    top: 54%
    left: 50%
    transform: translate(-50%, -50%)
    width: 100%
    z-index: 2
    justify-content: space-between

    @include respond-to(screen-1024)
      width: 100%
      left: -2%

    @include respond-to(screen-991)
      top: 74%
      display: none

    // @include respond-to(screen-540)
    //   opacity: 1
    //   top: 44%
    //   left: 91%
    // @include respond-to(screen-420)
    //   top: 40%
    //   left: 50%
    //   width: 100%

    .legacy-prev, .legacy-next
      z-index: 9999
      display: inline-block
      @include respond-to(screen-540)
        background: #fff
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px
        width: 40px
        height: 40px
        border-radius: 50%
        opacity: 1
      
    .legacy-prev
        display: block
   
  .our-legacy-slider
    .swiper-wrapper
      .item
        .flex
          display: grid
          grid-template-columns: repeat(2, 1fr)

          @include respond-to(screen-1280)
            width: 80%

          @include respond-to(screen-1024)
            width: 90%

          @include respond-to(screen-768)
            grid-template-columns: 1fr
            gap: 0
            width: 80%

          @include respond-to(screen-540)
            width: 98%
          
          .legacy-content
            &:last-child
              font-size: 14px
              @include respond-to(screen-540)
                text-align: center
        
.vision
    padding: 110px 0 0
    @include respond-to(screen-1366)
       padding: 65px 0 0
    @include respond-to(screen-991)
      padding: 25px 0 0
    
    
    h2
        text-align: center
        padding: 0 0 60px
        @include respond-to(screen-1024)
           padding: 0 0 45px 

    .img-a
        display: flex
        justify-content: center
        position: relative
        z-index: 2
      
    .vision-main
        background-image: url('/assets/images/about/vission-bg.png')
        background-repeat: no-repeat
        width: 100%
        height: 100%
        background-size: cover
        background-position: 106px -120px
        padding: 0 0 90px
        position: relative
        @include respond-to(screen-1366)
            background-position: 32% -120px
        
        // Add a gradient overlay to fade edges into white
        &::before
            content: ''
            position: absolute
            top: 0
            left: 0
            right: 0
            bottom: 0
            background: #ffffff9e
            pointer-events: none
            z-index: 1
        
        .img-a
          position: relative
          @include respond-to(screen-540)
              width: 320px
              margin: 0 auto


          .text
              font-size: 34px
              font-weight: 600
              position: absolute
              left: 50%
              top: 10%
              transform: translateX(-50%)

              &:nth-of-type(2)
                  top: 35%

              &:nth-of-type(3)
                  top: auto
                  bottom: 35%

        .vision-card
            position: relative
            display: grid
            grid-template-columns: 1fr 1fr
            color: var(--white)
            gap: 35px
            padding-top: 80px
            width: 90%
            margin: 0 auto
            z-index: 2
            @include respond-to(screen-1280)
               width: 95%
               padding-top: 50px
            @include respond-to(screen-768)
               grid-template-columns: 1fr 
               width: 70%
               padding-top: 60px
            @include respond-to(screen-540)
               width: 90%
            .card
                padding: 50px
                display: flex
                gap: 35px
                border-radius: 18px
                align-items: flex-start

                @include respond-to(screen-1366)
                   padding: 20px
                @include respond-to(screen-540)
                   flex-direction: column
                   padding: 16px
                   gap: 20px

                &:last-child
                   img
                      width: 100%
                      @include respond-to(screen-991)
                          width: 65px

                &:nth-child(odd)
                  
                    background-color: var(--prime)
                &:nth-child(even)
                    background-color: var(--green)
                img
                    width: 100px
                    @include respond-to(screen-1366)
                        width: 65px
                        margin: 0 auto
                   
            .card-content
                color: var(--white)
                max-height: 320px
                overflow: auto
                @include respond-to(screen-540)
                    text-align: center

                &::-webkit-scrollbar
                  width: 4px

                &::-webkit-scrollbar-track
                  background: transparent
                  border-right: 2px solid rgba(255,255,255,0.6)

                &::-webkit-scrollbar-thumb
                  background: #aeb92f
                  border-radius: 0
                  min-height: 60px
                  margin: 2px
                  border-left: 3px solid transparent
                  border-right: 3px solid transparent

                &::-webkit-scrollbar-thumb:hover
                  background: rgba(255,255,255,0.9)

                @include respond-to(screen-540)
                  &::-webkit-scrollbar
                    display: none
                h4
                    font-size: 2rem
                    margin-bottom: 20px
                p
                    color: var(--white)
                    width: 95%

.Leadership , .staff-info,
.home-secF
    background-color: #fff
    padding: 40px 0 
    @include respond-to(screen-1024)
       padding: 30px 0 
    @include respond-to(screen-991)
       padding: 30px 0 
    .container
        .heading
            display: flex
            justify-content: center
            align-items: center
            @include respond-to(screen-540)
              justify-content: center

            h2
              color: var(--black) 

        .shining-stars-container
              padding: 60px 0 0
              position: relative
              @include respond-to(screen-1024)
                padding: 35px 0 0

              .swiper-nav
                  display: flex
                  align-items: center
                  justify-content: space-between
                  gap: 15px
                  position: absolute
                  top: 50%
                  left: 0
                  transform: translateY(-50%)
                  width: 100%
                  z-index: 2
                  @include respond-to(screen-991)
                      display: none

                  button
                      background: #fff  
                      width: 40px
                      height: 40px
                      border-radius: 50%
                      display: inline-block
                      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
              
              .Leadership-next , .staff-next , .staff-prev , .Leadership-prev , .affiliation-prev , .affiliation-next
                  border: 1px solid var(--black)
                  width: 45px
                  height: 45px
                  border-radius: 50%

              .team-card
                  cursor: pointer
                  img
                      aspect-ratio: 1 / 1 
                      width: 100%
                      object-fit: cover
                      background-color: #7CE3FF
                      border-radius: 16px
                      display: block

              .team-content
                  text-align: center
                  padding: 20px 0 0

.item-grid
  max-height: none
  height: auto
  min-height: 660px // ensure minimum height is 660px

  @include respond-to(screen-1280)
    min-height: 660px


.item-content
      @include respond-to(screen-768)
        text-align: center


.our-legacy-slider
    .swiper-wrapper
        .item
            .about-img

              
// .staff-info,
//  .home-secF
//     background-color: #fff
//     padding: 80px 0 
//     @include respond-to(screen-1280)
//        padding: 5px 0 
//     @include respond-to(screen-1024)
//        padding: 40px 0 60px
//     @include respond-to(screen-540)
//        padding: 40px 0 20px
    

.profile-model
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 999999
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
        bottom: 0
    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: var(--prime)
        display: flex
        align-items: center
        justify-content: center
        @include respond-to(screen-675)
            right: 0
        &:hover
            background: #1b2b7c
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 100%
        max-width: 50%
        @include respond-to(screen-675)
            max-width: 95%
        iframe
            width: 100%
            aspect-ratio: 1.9
            border: 2px solid $white

.profile-model
    .model-body
        background: var(--white)
        padding: 30px
        border-radius: 10px
        @include respond-to(screen-1366)
           max-width: 70%
        @include respond-to(screen-991)
           max-width: 80%
        @include respond-to(screen-768)
          padding: 18px
        @include respond-to(screen-540)
           max-width: 92%
       
        

        .profile-content-wrap
            display: grid
            grid-template-columns: repeat(2 , 1fr)
            align-items:  flex-start
            gap: 45px
            position: relative 
            @include respond-to(screen-768)
              gap: 20px
            @include respond-to(screen-540)
              grid-template-columns: 1fr

            .close-video
                position: absolute 
                right: -15px
                top: -15px
                width: 35px
                height: 35px
                @include respond-to(screen-540)
                  width: 25px
                  height: 25px
                @include respond-to(screen-420)

                  right: -12px
                  top: -12px

            .profile-image
                overflow: hidden
                border-radius: 10px
                background: #7CE3FF
                height: 100%
                display: flex
                align-items: flex-end
                
                img
                    width: 100%
                    height: 100%
                    object-fit: cover
                
            .profile-details

                .profile-name
                  
                    @include respond-to(screen-768)
                        font-size: 20px
                    @include respond-to(screen-540)
                        font-size: 18px
                    
                small
                  color: var(--text)
                  font-size: 14px
                  padding: 10px 0 20px
                  display: block
                  border-bottom: 1px solid #d7d7d7
                    
                h6
                    border-bottom: 2px solid var(--primary)
                    display: inline-block
                    margin-bottom: 25px
                    @include respond-to(screen-540)
                      font-size: 15px

                

                .social-media
                    display: flex
                    gap: 10px
                    margin-top: 40px
                    @include respond-to(screen-768)
                      margin-top: 4px

                    li
                        background: var(--primary)
                        padding: 8px
                        border-radius: 50%
                        svg
                            width: 20px
                            height: 20px
                            display: block

                            path
                                fill: var(--white)

                .profile-content
                    height: 255px
                    overflow-y: scroll
                    margin-top: 20px
                    padding-right: 18px

                    &::-webkit-scrollbar
                       width: 4px

                    &::-webkit-scrollbar-track
                        background: #f0f0f0

                    &::-webkit-scrollbar-thumb
                        background-color: #0f2b7f73
                        border-radius: 4px

                    &::-webkit-scrollbar-thumb:hover
                        background-color: darkred
                        scrollbar-color: #c6ffe38a
                        scrollbar-width: thin 

                    p
                        margin-bottom: 10px
                        font-size: 14px
                        line-height: 20px
                        color: var(--text)
                        @include respond-to(screen-768)
                            font-size: 12px
                            line-height: 18px