@import "../_common"

main
    overflow: hidden

.home-secA
    background: var(--background)
    height: calc(100vh - var(--headerheight))
    position: relative
    overflow: hidden

    @include media(991)
        height: auto
        min-height: 70svh
        padding-bottom: 60px
    @include media(768)
        min-height: 45svh

    @include media(540)
        padding-bottom: 40px
        min-height: 68svh


    &::before
        content: ""
        position: absolute
        width: 100%
        height: 340px
        z-index: 1
        left: 0
        right: 0
        bottom: 0
        background: url("../../vector/hero.svg") no-repeat center center/cover

        @include media(768)
            height: 200px

    .cart_fig
        width: 100%
        z-index: 4
        position: absolute
        bottom: 5px
        left: 10px
        animation: slide 10s linear infinite

    .homeSwipe
        height: 60px
        margin-top: 90px
        .swiper-wrapper
            .swiper-slide
                h1
                    font-size: 36px
                    color: $black
                    text-align: center
                    font-weight: 600

                    @include media(991)
                        font-size: 24px

        @include media(991)
            margin-top: 60px

        @include media(540)
            margin-top: 50px

    .row
        z-index: 2
        max-width: 840px
        margin: 60px auto 0

        @include media(991)
            margin: 30px auto 0
            padding: 0 20px

        @include media(540)
            margin-top: 20px
            padding: 0

        .tabs
            display: flex
            gap: 30px
            overflow-x: auto
            scrollbar-width: none

            &::-webkit-scrollbar
                display: none

            @include media(768)
                gap: 10px

            .tab
                padding: 12px 15px
                display: flex
                align-items: center
                gap: 10px
                z-index: 5
                color: $text
                white-space: nowrap
                flex-shrink: 0

                &.active
                    background: $white
                    border-radius: 5px 5px 0px 0px
                    border-top: 3px solid $primary

        .search
            background: $white
            z-index: 3
            position: relative
            padding: 25px
            border-radius: 0px 5px 5px 5px
            box-shadow: 0px 8px 24px 0px #959DA533

            @include media(540)
                padding: 18px 16px

            h3
                font-size: 22px
                color: $black
                font-weight: 500
                margin-bottom: 15px

            .form
                .form-group
                    display: flex
                    gap: 30px
                    position: relative

                    @include media(540)
                        flex-wrap: wrap
                        gap: 12px

                    input[type="search"]
                        padding-left: 28px
                        flex: 1
                        border: none
                        outline: none
                        letter-spacing: 1px
                        border-bottom: 1px solid #00000030
                        min-width: 0

                        @include media(540)
                            width: 100%

                        &::placeholder
                            color: #00000082
                            font-family: $SFProDisplay
                            letter-spacing: 1px
                            @include font(400)

                    .btn
                        @include media(540)
                            width: 100%

                    &::before
                        content: ""
                        position: absolute
                        left: 0
                        top: 50%
                        transform: translateY(-50%)
                        width: 25px
                        height: 25px
                        background: url("../../icons/famicons-location.svg") no-repeat center center/cover

                        @include media(540)
                            top: 13px
                            transform: none


.home-secB
    padding: 60px 0

    @include media(768)
        padding: 40px 0

    .heading
        margin-bottom: 4rem

        @include media(768)
            margin-bottom: 2.5rem

    .row
        display: flex
        justify-content: center
        align-items: center
        gap: 20px
        min-height: 274px
        flex-wrap: wrap

        @include media(991)
            gap: 16px
            min-height: auto

        .col
            padding: 20px
            border-radius: 8px
            border: 1px solid #C0C0C0
            width: 250px
            height: 180px
            background: $gray
            display: flex
            flex-direction: column
            justify-content: center
            align-items: center
            overflow: hidden
            gap: 10px
            position: relative
            transition: all 0.5s ease-in-out
            margin: 0 -26px

            @include media(1280)
                width: 200px
                height: 165px

            @include media(991)
                margin: 0
                width: calc(50% - 8px)
                height: auto
                min-height: 180px
                transform: none !important

            @include media(540)
                width: 100%

            >*
                transition: all 0.5s ease-in-out

            h3
                font-size: 18px
                color: $text
                font-weight: 500
                font-family: $SFProDisplay

            p
                transform: translateY(100%)
                opacity: 0
                position: absolute
                pointer-events: none
                user-select: none
                text-align: center
                font-size: 16px
                color: #FFFFFFB2
                line-height: 24px

                @include media(991)
                    position: static
                    transform: translateY(0)
                    opacity: 1
                    pointer-events: auto
                    color: $text

            span
                position: absolute
                bottom: 10px
                right: 10px
                font-size: 20px
                background: $white
                width: 28px
                height: 28px
                border-radius: 8px
                display: flex
                justify-content: center
                align-items: center

            &:nth-child(1)
                transform: rotate(-3.9deg)
                z-index: 15

                @include media(991)
                    transform: none

            &:nth-child(2)
                transform: rotate(3.9deg)
                z-index: 10

                @include media(991)
                    transform: none

            &:nth-child(3)
                z-index: 5
                transform: rotate(-9deg)

                @include media(991)
                    transform: none

            &:nth-child(4)
                transform: rotate(8deg)

                @include media(991)
                    transform: none

            svg, img
                width: 45px
                height: 45px

                path
                    &[stroke]:not([fill])
                        stroke: #666
                        fill: none

                    &[fill]:not([stroke])
                        fill: #666
                        stroke: none

                    &[fill][stroke]
                        fill: #666
                        stroke: #666

                    &:not([fill]):not([stroke])
                        fill: #666
                        stroke: #666

            @include media(991)
                &:hover
                    background: $primary

                    h3
                        color: $white
                        font-size: 24px

                    p
                        color: #FFFFFFB2

                    svg
                        path
                            &[stroke]:not([fill])
                                stroke: #fff
                                fill: none

                            &[fill]:not([stroke])
                                fill: #fff
                                stroke: none

                            &[fill][stroke]
                                fill: #fff
                                stroke: #fff

                            &:not([fill]):not([stroke])
                                fill: #fff
                                stroke: #fff

            &.active
                width: 368px
                height: 264px
                background: $primary
                color: $white
                transform: none
                margin: 0 30px

                @include media(1280)
                    width: 300px
                    height: 240px

                @include media(991)
                    width: calc(50% - 8px)
                    height: auto
                    min-height: 180px
                    margin: 0
                    transform: none
                    

                @include media(540)
                    width: 100%

                img
                    filter: brightness(0) invert(1)

                svg
                    path
                        &[stroke]:not([fill])
                            stroke: #fff
                            fill: none

                        &[fill]:not([stroke])
                            fill: #fff
                            stroke: none

                        &[fill][stroke]
                            fill: #fff
                            stroke: #fff

                        &:not([fill]):not([stroke])
                            fill: #fff
                            stroke: #fff

                h3
                    font-size: 24px
                    color: $white

                p
                    position: static
                    transform: translateY(0)
                    opacity: 1
                    pointer-events: auto
                    color: var(--white)

                span
                    bottom: -30px


@keyframes slide
    0%
        transform: translateX(0)
    100%
        transform: translateX(100%)

.home-secC
    position: relative
    height: calc(100vh - 60px)
    overflow: hidden

    @include media(991)
        height: auto
        min-height: 60vh

    @include media(540)
        min-height: 50vh

    .grid-wrapper
        position: relative

        .programSlider
            position: absolute
            inset: 0
            width: 100%
            height: 100%

            @include media(991)
                display: none

            .swiper-wrapper
                .swiper-slide
                    > img
                        width: 100%
                        height: 100%
                        object-fit: cover
                        z-index: 0

        .grid
            display: grid
            grid-template-columns: repeat(3, 1fr)
            position: relative
            z-index: 1

            @include media(991)
                grid-template-columns: 1fr
                gap: 20px

            @include media(540)
                gap: 10px

            &::after
                content: ""
                width: 100%
                height: 100%
                position: absolute
                inset: 0
                background: linear-gradient(0deg, rgba(0,0,0,0) 64.28%, rgba(0,0,0,0.16) 94.05%), linear-gradient(180deg, rgba(0,0,0,0) 69.51%, rgba(0,0,0,0.7) 89.1%)
                z-index: 1

            .item
                position: relative
                min-height: 100vh
                overflow: hidden
                cursor: pointer
                z-index: 4

                @include media(991)
                    min-height: 450px
                    cursor: default

                @include media(768)
                    min-height: 400px

                @include media(540)
                    min-height: 350px

                &:not(:first-child)
                    border-left: 1px solid rgba(233,233,233,0.1)

                    @include media(991)
                        border-left: none
                        border-top: 1px solid rgba(233,233,233,0.1)

                &::after
                    content: ""
                    position: absolute
                    inset: 0
                    width: 100%
                    height: 100%
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 84.63%)

                    @include media(991)
                        display: block

                .item-img
                    display: none
                    height: 100%

                    @include media(991)
                        display: block

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

                .content
                    left: 54px
                    right: 0
                    bottom: 10%
                    position: absolute
                    padding: 0 30px 50px
                    z-index: 2
                    overflow: hidden
                    transform: translateY(calc(100% - 90px))
                    transition: transform 0.75s cubic-bezier(0.4,0,0.2,1)

                    @include media(1366)
                        left: 0
                        right: 0
                        bottom: 60px

                    @include media(991)
                        transform: translateY(0)
                        width: 450px

                    @include media(540)
                        padding: 0 16px 30px
                        width: 100%

                    h2
                        margin-bottom: 16px
                        color: var(--white)

                    p
                        margin: 0 0 45px
                        font-size: 16px
                        line-height: 1.6
                        color: var(--white)
                        opacity: 0
                        font-weight: 400
                        transform: translateY(16px)
                        transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1) 0.1s, transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.1s

                        @include media(991)
                            opacity: 1
                            transform: translateY(0)

                    .read-more
                        opacity: 0
                        color: var(--white)
                        font-size: 16px
                        display: flex
                        align-items: center
                        gap: 10px
                        transform: translateY(16px)
                        transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1) 0.2s, transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s

                        @include media(991)
                            opacity: 1
                            transform: translateY(0)

                &:hover,
                &.active
                    @media (min-width: 992px)
                        &::before
                            opacity: 1

                        .content
                            transform: translateY(0) translateY(-60px)

                            h6
                                opacity: 1

                            p
                                opacity: 1
                                transform: translateY(0)

                            .read-more
                                opacity: 1
                                transform: translateY(0)


.home-secD
    padding: 70px 0
    overflow: hidden

    @include media(768)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .heading
        text-align: center
        margin-bottom: 3rem

        @include media(768)
            margin-bottom: 2rem

    .grid
        display: grid
        grid-template-columns: 1fr 2fr
        gap: 4rem

        @include media(1366)
            gap: 40px

        @include media(991)
            grid-template-columns: 1fr
            gap: 30px

        .tab-nav
            display: flex
            flex-direction: column
            gap: 24px

            @include media(991)
                gap: 12px
                flex-direction: row
                overflow: auto

            li
                border: 1px solid #66666666
                padding: 20px
                border-radius: 5px
                display: flex
                align-items: center
                gap: 15px
                cursor: pointer

                @include media(991)
                    flex: 1
                    min-width: calc(50.55% - 8px)
                    padding: 14px
                    justify-content: center
                    align-items: center

                @include media(540)
                    min-width: calc(85% - 6px)
                    padding: 12px
                    gap: 8px
                img
                    width: 75px
                    height: 75px
                    object-fit: contain
                    flex-shrink: 0

                p
                    color: var(--text)
                    font-size: 14px
                    margin-top: 4px

                &.active
                    background: #F1F1F1

        .tab-nav-content
            position: relative

            .tabs
                opacity: 0
                transform: translateY(30px)
                transition: .35s
                pointer-events: none
                height: 0
                overflow: hidden

                &.active
                    opacity: 1
                    transform: translateY(0)
                    pointer-events: auto
                    height: auto

                .img
                    border: 1px solid #D2D2D2
                    border-radius: 5px
                    display: flex
                    justify-content: center
                    align-items: center
                    padding: 30px 20px

                    @include media(540)
                        padding: 20px 14px

                    img
                        max-width: 100%
                        height: auto

                .inner-content
                    display: grid
                    grid-template-columns: repeat(2,1fr)
                    gap: 20px
                    margin-top: 35px

                    @include media(540)
                        grid-template-columns: 1fr
                        gap: 16px
                        margin-top: 24px

                    .item-left
                        h2
                            margin-bottom: 15px
                        p
                            color: var(--text)
                            font-size: 14px

                    .item-right
                        h6
                            margin-bottom: 15px

                        li
                            color: var(--text)
                            position: relative
                            padding-left: 25px
                            font-size: 14px

                            &:not(:last-child)
                                margin-bottom: 4px

                            &::before
                                content: ""
                                position: absolute
                                top: 8px
                                left: 0
                                width: 8px
                                aspect-ratio: 1
                                border-radius: 50%
                                background: var(--primary)

                .not-found
                    display: flex
                    justify-content: center
                    align-items: center
                    flex-direction: column

                    img
                        width: 275px
                        margin: 0 auto
                        filter: grayscale(100%)

                        @include media(540)
                            width: 180px

                    h6
                        text-align: center

            .form-wrapper
                background: var(--primary)
                padding: 30px
                margin-top: 30px
                border-radius: 10px

                @include media(540)
                    padding: 20px 16px

                h5
                    color: var(--white)
                    font-size: 30px

                .form
                    display: grid
                    grid-template-columns: repeat(3,1fr)
                    margin: 15px 0 25px
                    gap: 30px

                    @include media(991)
                        gap: 20px

                    @include media(540)
                        grid-template-columns: 1fr
                        gap: 16px
                        margin: 12px 0 20px

                    .form-group
                        &::before
                            background: #FFFFFF80

                        &::after
                            background: var(--white)

                        input,textarea,label
                            color: var(--white)

                .btn
                    background: var(--white)
                    color: var(--primary)
                    font-weight: 600

                    @include media(540)
                        width: 100%


.home-secE
    padding: 70px 0
    background: var(--gray)

    @include media(768)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .tab-nav
        display: flex
        gap: 30px
        margin-top: 20px
        overflow-x: auto

        @include media(768)
            gap: 10px

        li
            padding: 6px 20px
            border-radius: 50px
            border: 1px solid var(--text)
            color: var(--text)
            cursor: pointer
            text-wrap: nowrap

            @include media(540)
                padding: 5px 14px

            &.active
                background: var(--primary)
                color: var(--white)
                border-color: var(--primary)

    .tab-nav-content
        margin-top: 4rem

        @include media(768)
            margin-top: 2.5rem

        .tabs
            display: grid
            grid-template-columns: repeat(2,1fr)
            gap: 3rem

            @include media(991)
                grid-template-columns: 1fr
                gap: 2rem

            .img
                img
                    max-width: 100%
                    height: auto
                    display: block

            .item-content
                .header
                    p
                        color: var(--text)
                        margin: 10px 0

                    .unit
                        padding: 5px 20px
                        background: #E2E2E2
                        color: var(--text)
                        border-radius: 50px
                        width: fit-content

                .dots
                    margin: 25px 0 35px

                    @include media(540)
                        margin: 20px 0 25px

                    h6
                        color: var(--text)

                .btn
                    @include media(540)
                        width: 100%


.home-secF
    position: relative
    min-height: 100vh
    padding: 70px 0
    display: flex
    align-items: center
    overflow: hidden
    height: 100vh

    @include media(991)
        padding: 50px 0
        min-height: auto
        flex-direction: column       
        justify-content: flex-start
        height: 60vh

    @include media(540)
        padding: 40px 0
        height: 70vh
    @include media(420)
        padding: 40px 0
        height: 55vh
    @include media(370)
        height: 64vh
   

    &::before
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        content: ""
        background: linear-gradient(270deg, rgba(0, 0, 0, 0) 47.38%, rgba(0, 0, 0, 0.7) 94.41%), linear-gradient(180deg, rgba(0, 0, 0, 0) 45.44%, rgba(0, 0, 0, 0.7) 89.74%)
        z-index: 1

        @include media(768)

    .singleSlider
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        object-fit: cover
        z-index: 0

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

    .content
        position: relative
        z-index: 2
        width: 100%
        padding: 0 5%
        padding-top: 40px             
        display: flex
        justify-content: space-between
        align-items: flex-end

        @include media(991)
            flex-direction: column
            align-items: flex-start
            gap: 30px
            padding: 40px 20px 0      


        > p
            position: absolute
            left: 0
            top: 0
            z-index: 999
            padding-left: 6%
            color: #fff

            @include media(991)
              padding-left: 4%

            @include media(768)
                padding-left: 15px
                left: 12%  
            @include media(540)
                left: 0
              

        .textSlider
            height: 480px
            overflow: hidden
            width: 100%

            @include media(991)
                height: 320px         
            @include media(540)
                height: 235px         

            .swiper-wrapper
                .subheading
                    max-width: 450px
                    display: flex
                    flex-direction: column
                    justify-content: space-between
                    padding-left: 10px

                        
                    @include media(768)
                        text-align: left  
                        padding: 0
                        margin: 0 auto
                        max-width: 540px

                    @include media(540)
                        margin-bottom: 1.5rem
                        font-weight: 500

                    p:not(:last-child)
                        color: var(--white)
                        letter-spacing: 2px
                        font-size: 18px

                        @include media(540)
                            font-size: 15px   

                    h2
                        color: var(--white)
                        margin: 30px 0 40px

                        @include media(991)
                            margin: 25px 0 20px

                        @include media(540)
                            font-size: 22px   
                            margin: 20px 0 16px

                        span
                            font-style: normal

                    .name
                        margin-bottom: 3rem

                        @include media(768)
                            margin-bottom: 1.5rem

                        @include media(540)
                            margin-bottom: 1rem

                        h6
                            color: var(--white)
                            font-weight: 500
                            margin-bottom: 2px

                        p
                            color: var(--white)
                            opacity: 0.7
                            font-size: 14px

    .swiper-wrap
        width: 100%
        max-width: 550px
        position: absolute
        bottom: 105px
        right: 80px
        z-index: 2


        @include media(991)
            left: 65%
            transform: translateX(-50%)
        @include media(768)
            left: 50%

        @include media(540)
            max-width: 335px  
            bottom: 0 
            right: 0     
        
        .progress
            position: absolute
            bottom: -45px
            right: 0
            width: 100%
            display: flex
            align-items: center
            gap: 16px
            z-index: 2

            @include media(991)
                right: 0
                bottom: -50px         

            @include media(675)
                position: relative
                bottom: 0
                margin-top: 20px
                justify-content: center

            .progress-track
                flex: 1
                height: 3px
                background: rgba(255, 255, 255, 0.2)
                border-radius: 2px
                overflow: hidden
                position: relative

                @include media(675)
                    display: none

                .swiper-pagination-progressbar-fill
                    background: var(--primary)

            .swiper-group
                display: flex
                justify-content: space-between
                gap: 12px
                flex-shrink: 0

                @include media(675)
                    display: none

                button
                    color: #000
                    border-radius: 50%
                    display: flex
                    justify-content: center
                    align-items: center
                    transition: 0.3s ease
                    background: transparent
                    cursor: pointer

                    &.swiper-button-disabled
                        opacity: 0.3
                        cursor: not-allowed

                    @include media(991)
                        width: 35px
                        height: 35px

                    svg
                        width: 20px
                        height: 20px

                        @include media(991)
                            width: 16px
                            height: 16px

                        path
                            fill: var(--white)
                            transition: fill 0.3s ease

                .textImgSlider-next
                    transform: rotate(270deg)

                .textImgSlider-prev
                    transform: rotate(90deg)

        .textImgSlider
            .swiper-wrapper
                padding: 2px 0

                .card
                    border-radius: 10px
                    overflow: hidden
                    width: 265px
                    height: 160px
                    img
                        width: 100%
                        height: 100%
                        border-radius: 10px
                        object-fit: cover
                        overflow: hidden


.home-secG
    padding: 70px 0
    background: var(--gray)

    @include media(768)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .heading
        text-align: center
        margin-bottom: 40px

        @include media(768)
            margin-bottom: 28px

    .grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 24px

        @include media(991)
            grid-template-columns: repeat(2, 1fr)
            gap: 16px

        @include media(540)
            grid-template-columns: 1fr
            gap: 14px

        .item
            background: #fff
            border-radius: 14px
            padding: 26px
            display: flex
            flex-direction: column
            justify-content: space-between
            align-items: flex-start

            @include media(540)
                padding: 20px
                text-align: center
                align-items: center

            img
                height: 32px
                width: auto
                margin-bottom: 18px

            h5
                font-size: 20px
                line-height: 1.4
                margin-bottom: 18px
                font-weight: 500
                color: var(--text)

            .read-more
                color: red
                font-size: 16px
                font-weight: 400

        .item:nth-child(1)
            grid-row: span 2

            @include media(991)
                grid-row: span 1

        .item:nth-child(3)
            grid-row: span 2

            @include media(991)
                grid-row: span 1

        .item:nth-child(2),
        .item:nth-child(4)
            padding: 18px

            @include media(540)
                padding: 16px

            h5
                font-size: 18px
                font-weight: 400
                color: var(--text)


.home-secH
    padding: 70px 0

    @include media(768)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .heading
        margin-bottom: 3rem

        @include media(768)
            margin-bottom: 2rem

    .grid
        display: grid
        grid-template-columns: repeat(2,1fr)
        gap: 5rem
        align-items: center

        @include media(991)
            gap: 3rem

        @include media(768)
            grid-template-columns: 1fr
            gap: 2rem

    .item-img
        border-radius: 25px
        overflow: hidden

        @include media(991)
            max-width: 560px
            margin: 0 auto
            width: 100%

        img
            width: 100%
            height: auto
            display: block

    .item-content
        width: 330px
        position: relative
        padding: 45px 0 45px 45px

        @include media(1366)
            width: 100%

        @include media(991)
            width: 100%
            max-width: 560px
            margin: 0 auto

        &::before
            content: ""
            position: absolute
            left: 12px
            top: 8px
            width: 2px
            height: calc(100% - 16px)
            background: #ddd
            border-radius: 2px

        &::after
            content: ""
            position: absolute
            left: 12px
            top: 8px
            width: 2px
            height: 0
            background: var(--primary)
            border-radius: 2px

        ul
            list-style: none
            margin: 0
            padding: 0

        li
            position: relative
            margin-bottom: 18px
            opacity: 0
            transform: translateY(16px)

            &::before
                content: ""
                position: absolute
                left: -39px
                top: 5px
                width: 14px
                height: 14px
                border-radius: 50%
                border: 2px solid #ccc
                background: #fff
                z-index: 2

            &::after
                content: ""
                position: absolute
                left: -39px
                top: 5px
                width: 14px
                height: 14px
                border-radius: 50%
                background: var(--primary)
                transform: scale(0)
                z-index: 3

            &:last-child
                margin-bottom: 0

            h6
                font-size: 18px
                margin-bottom: 5px
                font-weight: 600

            p
                font-size: 15px
                line-height: 1.6
                margin: 0

    &.animate
        .item-content::after
            animation: lineGrow 2.8s cubic-bezier(.4,0,.2,1) .4s forwards

        .item-content li
            animation: stepShow .6s ease forwards

        .item-content li::after
            animation: dotPop .4s cubic-bezier(.34,1.56,.64,1) forwards

        .item-content li:nth-child(1)
            animation-delay: .4s
            &::after
                animation-delay: .6s

        .item-content li:nth-child(2)
            animation-delay: 1s
            &::after
                animation-delay: 1.2s

        .item-content li:nth-child(3)
            animation-delay: 1.6s
            &::after
                animation-delay: 1.8s

        .item-content li:nth-child(4)
            animation-delay: 2.2s
            &::after
                animation-delay: 2.4s


@keyframes stepShow
    from
        opacity: 0
        transform: translateY(16px)
    to
        opacity: 1
        transform: translateY(0)

@keyframes dotPop
    from
        transform: scale(0)
        opacity: 0
    to
        transform: scale(1)
        opacity: 1

@keyframes lineGrow
    from
        height: 0
    to
        height: calc(100% - 16px)


.home-secI
    background: var(--gray)
    padding: 70px 0

    @include media(768)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .grid
        display: grid
        grid-template-columns: repeat(2, 1fr)
        align-items: center
        gap: 3rem

        @include media(991)
            gap: 80px

        @include media(768)
            grid-template-columns: 1fr
            gap: 51px

        @include media(540)
            gap: 36px

    .item-content
        width: 100%
        max-width: 440px
        margin-right: auto

        @include media(991)
            max-width: 100%
            margin: 0 auto
            text-align: center

        h2
            color: var(--black)
            margin-bottom: 20px
            width: 100%
            max-width: 240px

            @include media(991)
                max-width: 100%

            @include media(768)
                margin-bottom: 15px

        p
            color: var(--text)
            margin: 20px 0 30px

        .btn-glassy
            @include media(991)
                margin: 0 auto
         

    .item-img
        position: relative
        width: 100%

        @include media(991)
            max-width: 500px
            margin: 0 auto

        img
            width: 100%
            display: block

    .map-dot
        position: absolute
        width: 10px
        height: 10px
        border-radius: 50%
        background: var(--primary)
        transform: translate(-50%, -50%)
        cursor: pointer
        outline: 1px solid red
        outline-offset: 6px
        z-index: 2

        @include media(768)
            width: 10px
            height: 10px

        &::after
            content: ""
            position: absolute
            inset: -10px
            border-radius: 50%
            background: var(--primary)
            opacity: .35
            z-index: -1
            animation: mapRipple 1.8s ease-out infinite

        span
            display: none

        &:hover
            transform: translate(-50%, -50%) scale(1.25)

        &::before
            content: attr(data-city)
            position: absolute
            bottom: 165%
            left: 50%
            transform: translateX(-50%)
            background: #fff
            color: #000
            font-size: 13px
            padding: 6px 12px
            border-radius: 6px
            white-space: nowrap
            opacity: 0
            pointer-events: none
            transition: .3s
            box-shadow: 0 5px 18px rgba(0,0,0,.08)

            @include media(768)
                font-size: 11px
                padding: 4px 8px

        &:hover::before
            opacity: 1

        &:nth-child(2)
            top: 28%
            left: 24%

        &:nth-child(3)
            top: 37%
            left: 31%
            @include media(540)
                top: 42%
                left: 24%

        &:nth-child(4)
            top: 44%
            left: 40%
            @include media(540)
                top: 66%
                left: 29%
        &:nth-child(5)
            top: 46%
            left: 24%
            @include media(540)
                top: 43%
                left: 45%

        &:nth-child(6)
            top: 48%
            left: 52%


@keyframes mapRipple
    0%
        transform: scale(.4)
        opacity: .6

    70%
        transform: scale(1.8)
        opacity: 0

    100%
        opacity: 0


.home-secJ
    padding: 70px 0 30px
    background: var(--gray)

    @include media(768)
        padding: 50px 0 24px

    @include media(540)
        padding: 40px 0 20px

    .heading
        display: flex
        justify-content: space-between
        align-items: flex-start
        margin-bottom: 40px
        padding: 0 45px

        @include media(991)
            padding: 0 20px
            margin-bottom: 28px

        @include media(540)
            padding: 0 16px
            margin-bottom: 20px

        div:first-child
            text-align: center
            margin: 0 auto
            width: 100%
            max-width: 650px

        h2
            display: flex
            align-items: center
            justify-content: center
            gap: 15px
            font-size: 28px
            font-weight: 700
            color: var(--black)

            img
                display: block
                height: 32px

        p
            display: flex
            align-items: center
            justify-content: center
            gap: 10px
            font-size: 16px
            color: var(--black)
            font-weight: 600
            margin-top: 8px

            img
                width: 18px
                height: 18px

        .swiper-group
            display: flex
            justify-content: flex-end
            align-items: center
            gap: 12px
            flex-shrink: 0

            @include media(675)
                display: none

            button
                width: 42px
                height: 42px
                color: #000
                border-radius: 50%
                display: flex
                justify-content: center
                align-items: center
                transition: 0.3s ease
                background: transparent
                cursor: pointer
                box-shadow: 0px 3px 8px 0px #0000003D
                background: var(--white)

                &.centeredSlider-prev
                    transform: rotate(180deg)

                &:hover:not(.swiper-button-disabled)
                    background: #f0f0f0

                &.swiper-button-disabled
                    opacity: 0.35
                    cursor: not-allowed

                @include media(991)
                    width: 35px
                    height: 35px

                svg
                    width: 20px
                    height: 20px

                    @include media(991)
                        width: 16px
                        height: 16px

                    path
                        fill: #333
                        transition: fill 0.3s ease

    .centeredSlider
        padding: 0 0 50px 0
        min-height: 430px

        @include media(991)

        @include media(540)
            min-height: 380px
            padding: 0 0 35px

        .swiper-slide
            height: auto

        .review-card
            background: #fff
            border-radius: 12px
            padding: 40px
            display: flex
            flex-direction: column
            gap: 14px
            height: 100%
            box-shadow: 0px 7px 29px 0px #64646F33
            transition: box-shadow 0.3s ease
            position: relative

            @include media(768)
                padding: 28px

            @include media(540)
                padding: 20px

            &:hover
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1)

            &::before
                content: ""
                position: absolute
                width: 100%
                height: 100%
                background: url(../../icons/Polygon.svg)
                background-repeat: no-repeat
                background-size: 35px
                background-position: bottom left
                z-index: 1
                bottom: -20px
                left: 0

            h6
                font-size: 18px
                font-weight: 600
                color: var(--black)
                margin: 0

            p
                color: #555
                margin: 0
                flex: 1

            .stars
                display: flex
                align-items: center
                gap: 4px

                img
                    width: 18px
                    height: 18px

        .reviewer
            display: flex
            align-items: center
            gap: 12px
            margin-top: 30px

            @include media(540)
                margin-top: 20px

            .avatar
                width: 38px
                height: 38px
                border-radius: 50%
                background: #e0e0e0
                display: flex
                align-items: center
                justify-content: center
                flex-shrink: 0
                overflow: hidden

            .reviewer-info
                display: flex
                flex-direction: column
                gap: 2px

                .name
                    font-size: 14px
                    font-weight: 600
                    color: var(--black)

                .date
                    font-size: 12px
                    color: #888
.logo-wrapper
    padding: 60px 0
    background: var(--white)
    border-top: 1px solid rgba(0,0,0,0.05)
    border-bottom: 1px solid rgba(0,0,0,0.05)

    @include media(768)
        padding: 40px 0

    .heading
        padding-bottom: 40px
        text-align: center

        @include media(768)
            padding-bottom: 24px

        h3
            color: var(--black)
            margin-bottom: 0
            font-weight: 600

    .LogoSlider
        width: 100%

        .swiper-wrapper
            transition-timing-function: linear !important
            align-items: center

            .swiper-slide
                height: 60px
                border-radius: 5px
                display: flex
                justify-content: center
                align-items: center

                img
                    transition: all .3s ease
                    width: auto
                    height: 100%
                    object-fit: contain


.RecognitionsSlider-wrapper
    padding: 60px 0
    background: var(--white)
    border-top: 1px solid rgba(0,0,0,0.05)
    border-bottom: 1px solid rgba(0,0,0,0.05)

    @include media(768)
        padding: 40px 0

    .heading
        padding-bottom: 40px
        text-align: center

        @include media(768)
            padding-bottom: 24px

        h3
            color: var(--black)
            margin-bottom: 0
            font-weight: 600

    .RecognitionsSlider
        width: 100%

        .swiper-wrapper
            transition-timing-function: linear !important
            align-items: center

            .swiper-slide
                border-radius: 5px
                display: flex
                justify-content: center
                align-items: center

                img
                    transition: all .3s ease
                    width: auto
                    height: 100%
                    object-fit: contain