@import '../_var'
p
  text-align: justify 
.banner
    &.home-banner
        .bg 
            height: 100vh
            @include respond-to(screen-991)
              height: 70vh
            @include respond-to(screen-768)
               height: 75vh
            @include respond-to(screen-540)
               height: 60vh
            .banner-wrapper
                bottom: 40%
                .container
                    .content
                        display: flex
                        justify-content: center
                        h2
                            max-width: 590px
                            text-align: center
                            color: #fff
                            text-transform: capitalize
                            @include respond-to(screen-1024)
                               max-width: 465px
                            @include respond-to(screen-991)
                               max-width: 350px

                            @include respond-to(screen-768)
                               max-width: 345px
                            @include respond-to(screen-540)
                               width: 65%
                               font-size: 34px
                            @include respond-to(screen-420)
                               width: 100%

            .banner-wrapper.banner2
                bottom: 10%
                @include respond-to(screen-991)
                   bottom: 5%
                .container-fluid
                    .flex
                        align-items: flex-end
                        justify-content: space-between
                        line-height: 1

                        .colA
                            .flex
                                gap: 20px
                                @include respond-to(screen-540)
                                  gap: 9px
                                li
                                    padding: 0 15px 0 0 
                                    @include respond-to(screen-540)
                                            padding: 0 6px 0 0 
                                    &:not(:last-child)
                                        border-right: 1px solid #ffffff73
                                        
                                    a
                                        display: flex
                                        flex-direction: column
                                        align-items: center
                                        gap: 10px
                                        transition: 0.5s ease 
                                        font-size: 14px
                                        &:hover
                                            color: #1BB6F0 
                                        img
                                            width: 35px
                                        &.star
                                          transition: 0.5s ease
                                          gap:5px
                                          svg
                                            width: 20px
                                        
                                          &:hover
                                            svg
                                              path
                                                stroke: #1BB6F0
                                                transition: 0.5s ease
                                        
                        .colB
                            .play-btn
                                margin-right: 26px
                                --btnsize: 52px
                                @include respond-to(screen-540)
                                   --btnsize: 38px
                                   margin-top: 34px
                                  
                                svg
                                    width: 90px
                                    height: 90px
                                    position: absolute
                                    top: -21px
                                    left: -20px
                                    transform: rotate(274deg)
                                    @include respond-to(screen-540)
                                       width: 70px
                                       height: 70px
                                       top: -14px
                                       left: -17px

                                    text
                                        fill: #fff
                                        letter-spacing: 4px
                        .colC
                            display: block
                            @include respond-to(screen-991)
                               margin-right: 0
                               text-align: center
                               margin-bottom: 33px
                               display: none

                            button
                                @include scroll
                                margin-right: 5rem
                                img 
                                    @include respond-to(screen-520)
                                        width: 40px
                                
.home-secA
    padding: 80px 0
    @include respond-to(screen-1024)
      padding: 50px 0
    @include respond-to(screen-540)
      padding: 24px 0
      background-color: #DCE2FF
    .container
        &.flex
            justify-content: center
            align-items: flex-start
            gap: 80px
            padding: 20px 10px
            @include respond-to(screen-1366)
               gap: 45px
            @include respond-to(screen-768)
                gap: 45px
            @include respond-to(screen-540)
               gap: 16px
               padding:10px 

            .left-a, .right-a
                flex: 1
                @include respond-to(screen-991)
                    flex: auto
            .left-a
                position: relative
                border-radius: 10px
                overflow: hidden
                &::before
                    content: ""
                    width: 100%
                    height: 100%
                    position: absolute
                    left: 0
                    bottom: 0
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%)
                    z-index: -1
                img
                    border-radius: 10px
                    width: 100%
                    height: 100%
                .count-wrapper
                    display: grid
                    grid-template-columns: repeat(4, 1fr)
                    position: absolute
                    color: #fff
                    align-items: center
                    bottom: 2%
                    left: 0
                    padding: 10px 20px
                    width: 100%
                    gap: 60px
                    @include respond-to(screen-1366) 
                      gap: 18px
                    @include respond-to(screen-768)
                       grid-template-columns: repeat(2, 1fr)
                       gap: 30px
                       top: 50%
                       left: 50%
                       transform: translate(-50% , -50%)
                    @include respond-to(screen-540)
                        gap: 14px
                        padding: 10px 10px
                    
                    .count-info-wrap
                        flex: 1
                        &:first-child
                            flex: 0 1 auto
                            padding-right: 25px
                            @include respond-to(screen-540)
                              padding-right: 0

                        .count-info
                            @include respond-to(screen-540)
                                text-align: left
                            h4, p
                                color: #fff
                                font-size: 30px
                                @include respond-to(screen-1366)
                                  font-size: 20px


                                @include respond-to(screen-540)
                                   font-size: 16px
                            p
                                font-size: 14px
                                text-align: left
                                @include respond-to(screen-540)
                                  font-size: 14px

            .right-a
                padding: 20px 0
                text-align: left
                @include respond-to(screen-991)
                  text-align: center
                @include respond-to(screen-540)
                  padding: 0

                h2
                    text-transform: capitalize
                    line-height: 1
                    margin-bottom: 30px
                    @include respond-to(screen-540)
                        font-size: 28px

                        
                        
                p
                    color: var(--text)
                    margin-bottom: 15px

                    &:nth-last-of-type(1)
                      font-family: $Averta-light
                    &:nth-last-of-type(3)
                      font-family: $Averta-Semibold
                        
                    &:nth-last-of-type(2)
                      font-family: $Averta-regular

                        
                    

                    @include respond-to(screen-991)
                      width: 85%
                      margin: 0 auto
                    @include respond-to(screen-540)
                      width: 100%
                

                    

 
                .theme-btn
                    margin-top: 30px
                    display: inline-block
                    @include hover
                    &::after
                        background-color: #4459C5
                        border-radius: 25px
                    &::before
                        border-radius: 25px

.home-secB
    position: relative
    height: 100%
    padding: 80px 0 
    background-image: url(/assets/images/home/secB-bg.png)
    background-repeat: no-repeat
    background-size: cover
    background-color: #8497FB

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

    &::before
        content: ""
        width: 100%
        height: 80%
        background-image: url(/assets/images/home/secB-shape.png)
        background-repeat: no-repeat
        background-size: cover
        background-position-x: center
        background-position-y: 100px
        position: absolute
        left: 0
        bottom: 0
    .container
        .sub-heading
            text-align: center
            h3, p
                color: #fff
                text-transform: capitalize
            h3
                line-height: 48px
                font-size: 35px
                @include respond-to(screen-540)
                  font-size: 28px

        .building-wings-container
            position: relative
            padding: 50px 0 70px
            @include respond-to(screen-768)
               padding: 50px 0 0
            @include respond-to(screen-540)
               padding: 34px 0 0
            .swiper-nav.swiper-group
                display: flex
                align-items: center
                width: 28%
                justify-content: space-between
                position: absolute
                left: 36%
                top: 30%
                z-index: 2
                @include respond-to(screen-768)
                  left: 26%
                  width: 50%
                @include respond-to(screen-540)
                  left: 4%
                  width: 90%

                button
                    color: #fff
            .wings-slider
                padding: 15px 0
                .swiper-wrapper
                    .item.swiper-slide
                        display: flex
                        flex-direction: column
                        align-items: center
                        transition: 1s ease
                        transform: translateY(130px)
                        &.swiper-slide-prev, &.swiper-slide-next
                            transform: translateY(130px)
                            figcaption
                                transition: 0.3s ease
                                transform: translateY(-30px)
                                h5
                                    font-size: 18px
                        &.swiper-slide-active
                            transform: translateY(0)
                            figure
                                scale: 1
                            figcaption
                                p, .read-more
                                    opacity: 1
                        figure
                            scale: 0.7
                            transition: 0.7s ease
                            img
                                border-radius: 50%
                        figcaption
                            padding: 5px 20px
                            text-align: center 
                            h5, p 
                                color: #fff 
                            h5
                                font-size: 28px
                                line-height: 48px
                                font-weight: 600
                                text-transform: capitalize
                                transition: 0.5s ease
                            p
                                padding-bottom: 30px
                                opacity: 0
                                transition: 1s ease
                                text-align: center 
                                &:last-child
                                   font-family: 600 !important

                            .read-more
                                @include regularBtn
                                padding: 6px 20px
                                opacity: 0
                                transition: 1s ease

.home-secC
    width: 100%
    height: 80vh
    .container-fluid
        padding: 0
        height: 100%
        .grid
            height: 100%
            grid-template-columns: repeat(5, 1fr)
            @include respond-to(screen-1024)
              grid-template-columns: repeat(4, 1fr)
            @include respond-to(screen-991)
              grid-template-columns: repeat(3, 1fr)
            @include respond-to(screen-768)
              grid-template-columns: repeat(2, 1fr)
            
            .notes
                width: 100%
                height: 100%
                display: flex
                justify-content: space-between
                padding: 40px 30px
                overflow: hidden
                cursor: pointer
                position: relative
                transition: 0.5s ease
                @include respond-to(screen-768)
                    padding: 90px 16px
                    flex-direction: column-reverse
                @include respond-to(screen-768)
                    padding: 80px 16px
                    flex-direction: column-reverse
                @include respond-to(screen-540)
                    padding: 45px 16px
                    flex-direction: column-reverse
                &::before
                    content: ""
                    position: absolute
                    width: 100%
                    height: 100%
                    left: 0
                    bottom: 0
                    background: #0000005d
                    opacity: 0
                    transition: 0.5s ease
                &:hover
                    .icon1
                        transform: translateY(0%)
                    .icon2
                      transform: translateY(75%)
                      @include respond-to(screen-768)
                        transform: translateY(0)

                    
                    &.notes1, &.notes2, &.notes3, &.notes4, &.notes5, &.notes6, &.notes7
                        background-color: transparent 
                    &.notes3
                        .icon1
                            transform: translateY(750%)
                        .icon2
                            transform: translateY(110%)
                            @include respond-to(screen-768)
                               transform: translateY(0)
                              
                    &::before
                        opacity: 1
                .icon1
                    transform: translateY(75%)
                    transition: 0.5s ease
                    p
                        font-size: 20px
                        line-height: 25px
                        color: #fff
                        font-weight: 600
                        max-width: 140px
                        @include respond-to(screen-540)
                           font-size: 16px
                .icon2
                    transform: translateY(0%)
                    transition: 0.5s ease
                img
                  width: 100%
                  @include respond-to(screen-768)
                    width: 38px
                figure
                    position: absolute
                    width: 100%
                    height: 100%
                    left: 0
                    bottom: 0
                    z-index: -1
                    img
                        width: 100%
                        height: 100%
                        object-fit: cover
            .notes1
                background-color: #E03E40
                transition: 0.5s ease
            .notes2
                background-color: #1BB6F0
                transition: 0.5s ease
            .notes3
                background-color: #1B0E96
                transition: 0.5s ease
                flex-direction: column
                align-items: center
                grid-column: span 2
                grid-row: span 2
                @include respond-to(screen-991)
                   grid-column: span 1
                   grid-row: span 2
                   padding: 88px 12px 25px
                @include respond-to(screen-675) 
                   grid-column: span 1
                @include respond-to(screen-540)
                   grid-column: span 1
                   grid-row: span 2


                .icon1
                    transform: translateY(0%)
                    @include respond-to(screen-768)
                      transform: translateY(-150%)
                    p
                        max-width: fit-content
                        font-size: 36px
                        line-height: 48px
                        @include respond-to(screen-768)
                            font-size:30px
                        @include respond-to(screen-540)
                            font-size: 18px
                            line-height: 24px
                .icon2
                    transform: translateY(20%)
                    @include respond-to(screen-768)
                      transform: translateY(-27%)
                    @include respond-to(screen-540)
                      transform: translateY(30%)

                img
                  width: 100%

            .notes4
                background-color: #E69000
            .notes5
                background-color: #3740EA
            .notes6
                background-color: #FF59CD
                @include respond-to(screen-1024)
                  grid-column: span 2
                @include respond-to(screen-991)
                  grid-column: span 1
                
            .notes7
                background-color: #BCBF00

                @include respond-to(screen-1024)
                  grid-column: span 2
                @include respond-to(screen-768)
                  grid-column: span 1
                
.home-secD   
    width: 100%
    padding: 80px 0 
    @include respond-to(screen-1024)
      padding: 48px 0 80px 
    @include respond-to(screen-768)
      padding: 48px 0 55px 
    
    

    background: #DCE2FF
    .sub-heading
        text-align: center
        h2
            text-transform: none
            max-width: 365px
            margin: 0 auto
            line-height: 1
            @include respond-to(screen-540)
                font-size: 28px
    .events-slider-container
        position: relative
        padding: 50px 0 60px
        @include respond-to(screen-540)
            padding: 34px 0 38px
        .events-nav
            display: flex
            align-items: center
            justify-content: space-between
            width: 70%
            position: absolute
            left: 16%
            top: 32%
            z-index: 2
            @include respond-to(screen-991)
                display: none

            button
                background: #fff
                width: 40px
                height: 40px
                border-radius: 50%
                display: inline-block
        .events-slider
            .item
                transition: 1s ease
                &.swiper-slide-active
                    figcaption
                        a
                            opacity: 1
                &.swiper-slide-prev
                    transform: rotate(356deg)
                    scale: 0.8
                    transition: .5 ease
                    opacity: 0.5
                    @include respond-to(screen-768) 
                        transform: rotate(360deg)
                        scale: 1
                &.swiper-slide-next
                    transform: rotate(364deg)
                    scale: 0.8
                    transition: .5 ease
                    opacity: 0.5
                    @include respond-to(screen-768) 
                        transform: rotate(360deg)
                        scale: 1
                figure
                    height: 270px
                    @include respond-to(screen-768) 
                       height: 230px
                    img
                        width: 100%
                        height: 100%
                        object-fit: cover
                        border-top-left-radius: 10px
                        border-top-right-radius: 10px
                figcaption
                    padding: 25px 15px 35px
                    background-color: #fff
                    border-bottom-left-radius: 10px
                    border-bottom-right-radius: 10px
                    h6
                        line-height: 20px
                    p
                        font-size: 14px
                        line-height: 20px
                        padding: 11px 0
                    a
                        color: #4358C5
                        font-size: 14px
                        line-height: 20px
                        font-weight: 500
                        position: relative
                        opacity: 0
                        transition: 0.5s ease 
                        &::after
                            content: ""
                            position: absolute
                            background: url(/assets/icon/right-arow.svg)
                            width: 100%
                            height: 100%
                            background-repeat: no-repeat
    .btn-wraper
        text-align: center
        .theme-btn
            @include hover
            &::after
                background-color: #4459C5
                border-radius: 25px
            &::before
                border-radius: 25px

.home-secE
  width: 100%
  padding: 80px 0 
  background: #fff

  @include respond-to(screen-768)
    padding: 48px 0 

  .container
    .sub-heading
      text-align: center

      p
        width: 100%
        margin: 0 auto

        @include respond-to(screen-991)
          width: 70%

        @include respond-to(screen-540)
          width: 75%

    h2
      text-transform: none
      max-width: 365px
      margin: 0 auto 10px
      line-height: 1

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

    .grid
      padding-top: 2.5rem
      grid-template-columns: repeat(5, 1fr)
      grid-gap: 3px

      @include respond-to(screen-991)
        grid-template-columns: repeat(3, 1fr)

      @include respond-to(screen-768)
        grid-template-columns: repeat(2, 1fr)

      @include respond-to(screen-540)
        padding-top: 1.5rem

      .item
        position: relative 

        &:nth-child(even)
          figcaption p
            background: var(--prime)

        &:nth-child(odd)
          figcaption p
            background: var(--yellow)

        &:last-child
          @include respond-to(screen-768)
            grid-column: span 2
            display: none

        @include before(linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0, 0.5) 70%))

        &::before
          z-index: 1

        &:hover
          figure img
            transform: scale(1.06)

        figure
          overflow: hidden
          height: 100%

          img
            width: 100%
            height: 100%
            object-fit: cover
            transition: 0.5s ease
            transform-origin: top

        figcaption
          position: absolute
          top: 0
          left: 50%
          z-index: 2
          width: 100%
          transform: translateX(-50%)

          p
            font-size: 20px
            font-weight: 500
            text-align: center
            color: #fff
            padding: 20px

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

                            
                        

.home-secF
    width: 100%
    background: #314491
    padding: 80px 0

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

    .container
        position: relative

        .sub-heading
            position: relative
            text-align: center

            h2
                position: relative
                z-index: 2
                font-size: 60px
                line-height: 1
                color: #fff
                margin: 0 auto 35px

                @include respond-to(screen-1366)
                    font-size: 55px

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

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

                @include respond-to(screen-675)
                    font-size: 36px

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

                @include respond-to(screen-420)
                    font-size: 25px
                    margin-bottom: 30px

            span
                position: absolute
                left: 50%
                top: 50%
                transform: translate(-50%, -60%)
                font-size: 100px
                font-family: 'Queens'
                text-transform: uppercase
                color: #ffffff29
                z-index: 1
                pointer-events: none
                white-space: nowrap

                @include respond-to(screen-1366)
                    font-size: 90px

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

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

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

                @include respond-to(screen-420)
                    font-size: 38px


        .shining-stars-container
            padding: 60px 0 0
            position: relative
            @include respond-to(screen-1024)
              padding: 15px 0 0
            
            .swiper
                margin: 0 20px
                @include respond-to(screen-991)
                   margin: 0

            .stars-nav
                display: flex
                align-items: center
                justify-content: space-between
                gap: 15px
                position: absolute
                top: 65%
                left: 0
                transform: translateY(-50%)
                width: 100%
                z-index: 2

                button
                    background: #fff  
                    width: 40px
                    height: 40px
                    border-radius: 50%
                    display: inline-block
                    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px

            .shining-slider
                margin: 0 24px
                .item
                    background: #fff
                    padding: 40px 15px 0
                    border-radius: 10px
                    .flex
                        justify-content: space-between
                        @include respond-to(screen-768)
                            flex-wrap: nowrap
                        
                        figcaption
                            h4
                                font-size: 22px
                                @include respond-to(screen-1366)
                                    font-size: 18px
                            .rank
                                padding-top: 25px
                                padding-left: 8px
                            h2
                                font-family: $Averta
                                font-weight: 600
                                color: #667ADF
                                padding-left: 8px
                                span
                                    font-size: 15px
                        
                        figure
                            position: relative
                            width: 150px
                            height: 150px
                            flex-shrink: 0
                            @include respond-to(screen-768)
                                width: 120px
                                height: 120px
                            
                            img
                                width: 100%
                                height: 100%
                                object-fit: contain
                                object-position: top
                                mask-image: url('/assets/images/loadmore.svg')
                                mask-size: contain
                                mask-repeat: no-repeat
                                mask-position: center
                                -webkit-mask-image: url('/assets/images/loadmore.svg')
                                -webkit-mask-size: contain
                                -webkit-mask-repeat: no-repeat
                                -webkit-mask-position: center
                                background: #c4ebf9



// Mixins
@mixin respond-to($breakpoint)
    @if $breakpoint == screen-540
        @media (max-width: 540px)
            @content
    @else if $breakpoint == screen-675
        @media (max-width: 675px)
            @content
    @else if $breakpoint == screen-768
        @media (max-width: 768px)
            @content
    @else if $breakpoint == screen-991
        @media (max-width: 991px)
            @content
    @else if $breakpoint == screen-1024
        @media (max-width: 1024px)
            @content
    @else if $breakpoint == screen-1366
        @media (max-width: 1366px)
            @content

// Mixins
@mixin respond-to($breakpoint)
    @if $breakpoint == screen-540
        @media (max-width: 540px)
            @content
    @else if $breakpoint == screen-675
        @media (max-width: 675px)
            @content
    @else if $breakpoint == screen-768
        @media (max-width: 768px)
            @content
    @else if $breakpoint == screen-991
        @media (max-width: 991px)
            @content
    @else if $breakpoint == screen-1024
        @media (max-width: 1024px)
            @content
    @else if $breakpoint == screen-1366
        @media (max-width: 1366px)
            @content

.home-secG
    width: 100%
    background: #fea718
    padding: 60px 0 0
    overflow: hidden
    
    @include respond-to(screen-1024)
        padding: 40px 0 0
    
    .container
        .sub-heading
            text-align: center
            margin: 50px 0 0
            
            @include respond-to(screen-768)
                margin-bottom: 20px
            
            @include respond-to(screen-540)
                margin-bottom: 30px
            
            h2
                text-transform: none
                max-width: 365px
                margin: 0 auto 10px
                line-height: 1
                color: #fff
            
            p
                color: #fff
                text-align: center
        
        .parents-container
            padding-top: 30px
            
            @include respond-to(screen-540)
                padding-top: 0
            
            .flex
                align-items: flex-end
                justify-content: center
                gap: 3rem
                line-height: 0
                
                @include respond-to(screen-1024)
                    gap: 3rem
                
                @include respond-to(screen-991)
                    gap: 1.5rem
                
                @include respond-to(screen-768)
                    align-items: flex-start
                    flex-wrap: wrap
                
                .colA
                    flex: 0 1 35%
                    
                    @include respond-to(screen-1024)
                        flex: 0 1 35%
                    
                    @include respond-to(screen-768)
                        flex: 0 1 50%
                        display: none
                    
                    img
                        width: 100%
                        height: 100%
                        object-fit: cover
                
                .colB
                    flex: 0 1 36%
                    padding: 0 0 50px
                    display: flex
                    justify-content: center
                    align-items: center
                    flex-direction: column
                    gap: 35px
                    
                    @include respond-to(screen-991)
                        flex: 0 1 50%
                    
                    @include respond-to(screen-768)
                        flex: 0 1 70%
                        padding: 0 0 43px 0
                    
                    .parents-tab-nav-content
                        width: 100%
                        position: relative
                        max-width: 100%
                        
                        .tabs
                            background: #fff
                            padding: 40px
                            border-radius: 25px
                            position: absolute
                            top: 0
                            left: 0
                            width: 100%
                            opacity: 0
                            visibility: hidden
                            transition: opacity 0.5s ease, visibility 0.5s ease
                            
                            @include respond-to(screen-675)
                                padding: 26px
                                max-width: 450px
                                margin: 0 auto
                                left: 50%
                                transform: translateX(-50%)
                            
                            @include respond-to(screen-540)
                                max-width: 310px
                            
                            &.active
                                opacity: 1
                                visibility: visible
                                position: relative
                                left: auto
                                transform: none
                            
                            &::before
                                content: ""
                                display: inline-block
                                margin: 0 5px
                                vertical-align: middle
                                width: 30px
                                height: 60px
                                border-right: solid 30px rgb(255, 255, 255)
                                border-bottom: solid 30px transparent
                                border-top: solid 30px transparent
                                position: absolute
                                transform: rotate(270deg)
                                left: 20%
                                bottom: -10%
                                z-index: 0
                                
                                @include respond-to(screen-1366)
                                    bottom: -10%
                                
                                @include respond-to(screen-1024)
                                    bottom: -10%
                                
                                @include respond-to(screen-540)
                                    bottom: -10%
                                    left: 14%
                            
                            .parents-comments
                                p
                                    font-size: 16px
                                    line-height: 28px
                                    color: #000
                                    
                                    @include respond-to(screen-540)
                                        font-size: 14px
                                        line-height: 20px
                                
                                .parents-info
                                    padding-top: 80px
                                    justify-content: space-between
                                    align-items: center
                                    
                                    @include respond-to(screen-1024)
                                        padding-top: 45px
                                    
                                    @include respond-to(screen-540)
                                        padding-top: 20px
                                    
                                    .parent-name
                                        h5
                                            font-size: 18px
                                            color: #000
                                            margin: 0
                                        
                                        h6
                                            font-size: 14px
                                            color: #666
                                            margin: 5px 0 0
                                    
                                    button.play-btn
                                        --bordercolor: var(--prime)
                                        --playbtncolor: #000
                                        cursor: pointer
                    
                    .parent-wrap
                        position: relative
                        width: 100%
                        max-width: 350px
                        margin: 0 auto
                        padding: 0 50px
                        
                        @include respond-to(screen-675)
                            max-width: 320px
                        
                        
                        .parents-tab-nav
                            width: 100%
                            overflow: hidden
                          
                            .swiper-wrapper
                                display: flex
                                align-items: center

                            .swiper-slide
                                cursor: pointer
                                transition: all 0.3s ease
                                opacity: 1
                                transform: scale(0.85)
                                
                                &.swiper-slide-active
                                    opacity: 1
                                    transform: scale(1)

                                    img
                                        border: 2px solid #fff
                                        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2)
                                
                                img
                                    width: 45px
                                    height: 45px
                                    object-fit: cover
                                    border-radius: 50%
                                    display: block
                                    border: 2px solid transparent
                                    transition: all 0.3s ease
                        
                        .swiper-group
                            position: absolute
                            left: 0
                            right: 0
                            top: 50%
                            transform: translateY(-50%)
                            display: flex
                            align-items: center
                            justify-content: space-between
                            z-index: 10
                            pointer-events: none
                            
                            button
                                pointer-events: auto
                                background-color: #fff
                                width: 35px
                                height: 35px
                                border-radius: 50%
                                color: #000
                                display: flex
                                align-items: center
                                justify-content: center
                                border: none
                                cursor: pointer
                                transition: all 0.3s ease
                                
                                @include respond-to(screen-540)
                                    width: 30px
                                    height: 30px
                                
                                &:hover
                                    transform: scale(1.1)
                                
                                &:disabled
                                    opacity: 0.5
                                    cursor: not-allowed
                                
                                svg
                                    width: 12px
                                    height: 24px
                            
                            .parent-tabs-slider-prev
                                svg
                                    transform: rotate(180deg)
                
                .colC
                    flex: 0 1 auto
                    transform: translateY(-55px)
                    
                    @include respond-to(screen-768)
                        transform: translateY(-20px)
                        flex: 0 1 100%
                    
                    .flex
                        flex-direction: column
                        align-items: center
                        justify-content: center
                        gap: 20px
                        
                        @include respond-to(screen-768)
                            flex-direction: row
                        
                        a
                            text-decoration: none
                            
                            &:hover
                                .contents
                                    background: #fff
                                    
                                    .icon
                                        svg
                                            path
                                                fill: #BCBF00
                                    
                                    p
                                        color: #BCBF00
                        
                        .contents
                            min-width: 132px
                            text-align: center
                            padding: 15px 10px
                            border-radius: 10px
                            border: 2px solid #fff
                            transition: 0.5s ease
                            
                            .icon
                                img
                                    width: 35px
                                    height: auto
                            
                            p
                                font-size: 14px
                                line-height: 18px
                                color: #fff
                                font-weight: 600
                                padding-top: 7px
                                max-width: 110px
                                margin: 0 auto
                                transition: 0.3s ease
                                text-align: left

.home-secH
  width: 100%
  background: #fff
  padding: 60px 0 0
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column

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

  .form-container
    width: 100%
    margin: 0 auto

    .sub-heading
      text-align: center
      margin-bottom: 40px
      h2
        font-size: 2.5rem
        line-height: 1.3
        width: 40%
        margin: 0 auto
        @include respond-to(screen-1366)
        @include respond-to(screen-1024)
            width: 45%
        @include respond-to(screen-768)
            width: 50%
            font-size: 2rem
        @include respond-to(screen-540)
            width: 55%
            font-size: 1.5rem
            line-height: 1.3
            margin: 0 auto
        @include respond-to(screen-420)
            font-size: 1.5rem
            line-height: 1.3
            width: 94%
            margin: 0 auto

    .bg-image
      figure
        width: 100%
        margin: 0
        overflow: hidden
        position: relative
        height: 80vh

        @include respond-to(screen-540)
          height: 40vh

        img
          width: 100%
          height: 100%
          object-fit: cover
          display: block

    .form-container
      width: 100%
      display: flex
      justify-content: center
      margin-top: -120px
      @include respond-to(screen-540)
        width: 94%
        margin-top: -80px

      .rotate-form
        form
          max-width: 600px
          width: 100%
          text-align: center
          padding: 0 78px 30px
          transform: translateY(-4rem)
          position: relative
          border-radius: 50px

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

          &::after
            position: absolute
            top: -40px
            left: 0
            width: 100%
            height: 100%
            background-color: #fff
            content: ''
            transform: rotate(6deg)
            z-index: -1
            border-radius: 50px
            @include respond-to(screen-540)
              top: 0
              transform: rotate(0)
              border-radius: 30px


          &::before
            content: ""
            max-width: 608px
            height: 100%
            background: #fff
            position: absolute
            top: -55px
            left: -19px
            rotate: 5deg
            border-radius: 50px
            z-index: -1
            @include respond-to(screen-675)
              max-width: 540px
            @include respond-to(screen-540)
              width: 0

          .title-image
            margin-bottom: 30px
            @include respond-to(screen-540)
              margin-bottom: 0

            img
              width: 160px
              @include respond-to(screen-540)
                width: 110px


          .form-grid
            display: grid
            grid-template-columns: repeat(2, 1fr)
            grid-column-gap: 30px
            grid-row-gap: 20px

            @include respond-to(screen-540)
              grid-template-columns: 1fr 1fr

            .form-group
              position: relative

              &:nth-child(5)
                grid-column: span 2

                @include respond-to(screen-540)
                  grid-column: span 2

            .sbmt-grp
              grid-column: span 2
              text-align: center
              margin-top: 20px

              @include respond-to(screen-540)
                grid-column: span 2

              .theme-btn
                @include hover
                &::after
                  background-color: #4459C5
                  border-radius: 25px
                &::before
                  border-radius: 25px

                            
                                
.shining-slider
    margin-top: 0
    @include respond-to(screen-540)
       margin-top: 36px
.home-secF
    .container
        .sub-heading
            display: flex
            justify-content: flex-end

        .swiper-nav.swiper-group
            display: flex
            justify-content: space-between
            align-items: center
            gap: 12px

            @include respond-to(screen-540)
                display: none

        .btn-hovleft,
        .btn-hovright
            background-color: #fff
            width: 45px
            height: 45px
            border-radius: 50%
            color: #000 !important
            display: flex
            align-items: center
            justify-content: center


.health-secA
  background: #DCE2FF
  padding: 35px 0 80px

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

  .heading
    width: 55%
    margin: 0 auto
    text-align: center

    @include respond-to(screen-1536)
      width: 55%
    @include respond-to(screen-991)
      width: 70%
    @include respond-to(screen-675)
      width: 100%

  .btn-groups
    display: flex
    gap: 65px
    justify-content: center
    margin: 60px 0 90px

    @include respond-to(screen-991)
      gap: 35px
    @include respond-to(screen-540)
      margin: 36px 0 20px
      gap: 10px

    .btn-wraper
        display: inline-block
        background: #bdbdbd         
        color: #000 !important
        padding: 12px 30px
        border-radius: 30px
        font-weight: 600
        cursor: pointer
        transition: .3s ease
        @include respond-to(screen-540)
           padding: 12px 14px

        &.active
          background: var(--prime)     
          color: #fff

  .health-card
    .health-grid
      display: grid
      grid-template-columns: 450px 450px 1fr
      gap: 25px

      @include respond-to(screen-1366)
        grid-template-columns: repeat(3, 1fr)
      @include respond-to(screen-1024)
        grid-template-columns: repeat(3, 1fr)
      @include respond-to(screen-991)
        grid-template-columns: repeat(2, 1fr)
      @include respond-to(screen-540)
        grid-template-columns: repeat(1, 1fr)

      .card
        padding: 40px
        background: #fff
        border-radius: 20px

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

        &:last-child
          @include respond-to(screen-991)
            grid-column: 1 / -1

        div
          h6
            margin-top: 45px
            color: var(--text)

            @include respond-to(screen-540)
              margin-top: 28px

          p
            margin-top: 12px