@import '../_var'


main
    overflow: hidden
.home-banner
    position: relative
    color: white
    overflow: hidden
    height: 100vh
    display: flex
    flex-direction: column
    justify-content: center
    @include media(991)
        height: 80vh
    @include media(768)
        height: 70vh
    @include media(540)
        height: 65vh
    &::before
        content: ""
        position: absolute
        width: 100%
        height: 100%
        bottom: 0
        left: 0
        z-index: 2
        background: linear-gradient(to right, rgb(0 0 0 / 72%) 36%, rgb(0 0 0 / 0%) 60%), linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 60%)
    video, img:not(.btn > img)
        object-fit: cover
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        transition: opacity 0.5s ease-in-out
    .bg-content
        position: absolute
        left: 50%
        top: 56%
        transform: translate(-50%,-50%)
        width: 100%
        max-width: 90%
        margin: 0 auto
        z-index: 2
        gap: 8px
        padding: 0 16px
        display: grid
        grid-template-columns: 1fr 370px
        align-items: center
        @include media(540)
            bottom: 8%
            gap: 6px
        .item-content
            width: 100%
            max-width: 415px
            h5
                color: var(--primary)
            h1
                margin: 12px 0 25px
                text-transform: capitalize
              
            p:not(.dics)
                color: var(--white)
                opacity: .9
                width: 100%
                max-width: 480px
        .form-grid
            background: rgb(255 255 255 / 71%)
            padding: 35px
            border-radius: 10px
            overflow: hidden
            position: relative
            --gaptb: 20px
            backdrop-filter: blur(30px) brightness(145%)
            &::before
                position: absolute
                inset: 0
                width: 100%
                height: 100%
                background: var(--gradient-b)
                content: ""
            .form-group
                input,textarea,label
                    font-family: $Poppins
            .btn
                width: 100%
            .dics
                font-size: 12px
                color: var(--black)
                font-weight: 400
                a
                    font-size: inherit
                    font-weight: inherit
                    color: var(--primary)
                    font-weight: 500


.home-secA
    padding: 70px 0
    .heading
        text-align: center
        width: 100%
        max-width: 550px
        margin: 0 auto
        padding-bottom: 3rem
        h3
            margin-bottom: 14px
        p
            width: 100%
            max-width: 450px
            margin: 0 auto

    .grid
        display: grid
        grid-template-columns: repeat(2,1fr)
        gap: 24px
        .card
            position: relative
            border-radius: 10px
            overflow: hidden
            cursor: pointer
            &::before
                content: ""
                position: absolute
                inset: 0
                width: 100%
                height: 100%
                background: linear-gradient(rgba(0, 0, 0, 0) 0, rgb(0 0 0 / 92%) 87.64%)
                z-index: 1
            &:hover
                .item-img img
                    transform: scale(1.05)
                .item-content
                    transform: translateX(-50%) translateY(-8px)
                    .btn-group
                        opacity: 1
                        max-height: 100px
                        transform: translateY(0)
                        pointer-events: all
            .item-img
                width: 100%
                height: 100%
                img
                    width: 100%
                    height: 100%
                    object-fit: cover
                    display: block
                    transition: transform 0.5s ease
            .item-content
                position: absolute
                left: 50%
                bottom: 0
                width: 100%
                padding: 30px
                transform: translateX(-50%) translateY(0)
                transition: transform 0.4s ease
                z-index: 3
                h4
                    color: var(--white)
                p
                    color: var(--white)
                    font-weight: 300
                    margin: 10px 0 20px
                .btn-group
                    display: flex
                    gap: 15px
                    opacity: 0
                    max-height: 0
                    overflow: hidden
                    transform: translateY(15px)
                    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease
                    pointer-events: none
                    .btn-secondary
                        border-color: var(--white)
                        color: var(--white)
                        &:hover
                            border-color: var(--white)
                            color: var(--black)
                            &::before
                                background: var(--white)

                            
        

.home-secB
    margin: 70px 0 0
    overflow: hidden

    .heading
        text-align: center
        max-width: 450px
        margin: 0 auto

        h3
            margin-bottom: 10px

    .swiper-wrap
        margin-top: 3rem
        position: relative

        .solutionSlider
            margin: 0 20px

            .swiper-wrapper

                .swiper-slide

                    .img
                        width: 100%
                        height: 500px        
                        overflow: hidden
                        border-radius: 10px  

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

        .btns-group
            display: flex
            justify-content: space-between
            pointer-events: none
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%) 
            z-index: 1
            width: 100%
            padding: 0 10px

            button
                width: 40px
                height: 40px
                background: var(--white)
                display: flex
                justify-content: center
                align-items: center
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
                border-radius: 5px
                border: none
                cursor: pointer
                pointer-events: all   

                &:hover
                    background: var(--primary)
                    svg path
                        stroke: var(--white)

                svg
                    width: 35px
                    height: 35px
                    display: block

                    path
                        stroke: var(--primary)

                &.swiper-button-disabled
                    opacity: 0.5
                    cursor: not-allowed
                    pointer-events: none  

                &.solutionSlider-prev
                    transform: rotate(270deg)

                &.solutionSlider-next
                    transform: rotate(90deg)
.home-secC
    padding: 70px 0
    background: var(--gray)
    .heading
        width: 100%
        max-width: 650px
        margin: 0 auto
        .content
            text-align: center
            max-width: 450px
            margin: 0 auto
            h3
                margin-bottom: 10px
        .tab-nav
            display: flex
            align-items: center
            justify-content: center
            gap: 20px
            margin-top: 2rem
            li
                padding: 10px 20px
                background: var(--white)
                font-size: 14px
                transition: all 0.3s ease-in
                border-radius: 5px
                &:hover
                    background: var(--primary)
                    color: var(--white)
                &.active
                    background: var(--primary)
                    color: var(--white)

    .tab-nav-content
        margin-top: 4rem
        .tabs
            .swiper-wrap
                position: relative
                .btns-group
                    display: flex
                    justify-content: space-between
                    pointer-events: all  
                    position: absolute
                    top: 50%
                    transform: translateX(-50%)
                    left: 50%
                    z-index: 1
                    width: 100%

                    button
                        width: 40px
                        height: 40px
                        background: var(--white)
                        display: flex
                        justify-content: center
                        align-items: center
                        border-radius: 5px
                        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px

                        &:hover
                            background: var(--primary)
                            svg
                                path
                                   stroke: var(--white)

                        svg
                            width: 35px
                            height: 35px
                            display: block
                            path
                                stroke: var(--primary)

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

                            &:hover
                                background: transparent

                                svg path
                                    fill: var(--white)

                        &.thirdSilder-prev
                            transform: rotate(270deg)
                        &.thirdSilder-next
                            transform: rotate(90deg)
                .thirdSilder   
                    margin: 0 15px
                    .swiper-wrapper
                        .swiper-slide                 
                            .card
                                border-radius: 10px
                                overflow: hidden
                                background: var(--white)
                                .item-img
                                    position: relative
                                    img
                                        width: 100%
                                        display: block
                                    &::before
                                        content: ""
                                        position: absolute
                                        inset: 0
                                        background: linear-gradient(180deg, rgb(0 0 0 / 14%) 0%, rgb(0 0 0 / 21%) 100%)
                                        width: 100%
                                        height: 100%
                                    .location
                                        position: absolute
                                        left: 20px
                                        bottom: 20px
                                        display: flex
                                        justify-content: center
                                        gap: 12px
                                        p
                                            color: var(--white)
                                            font-size: 14px
                                        svg
                                            width: 20px
                                            height: 20px
                                            path
                                                stroke: var(--white)
                                    .points
                                        position: absolute
                                        top: 20px
                                        left: 20px
                                        display: flex
                                        align-items: center
                                        gap: 15px
                                        li
                                            font-size: 14px
                                            line-height: 1.2
                                            &:first-child
                                                background: var(--primary)
                                                padding: 5px 10px
                                                color: var(--white)
                                            &:last-child
                                                border: 1px solid var(--white)
                                                color: var(--white)
                                                padding: 5px 10px
                                .item-content
                                    padding: 18px
                                    border: 1px solid var(--gray)
                                    p
                                        font-size: 14px
                                        margin: 5px 0 12px
                                    .feature-item
                                        display: grid
                                        grid-template-columns: repeat(2, 1fr)
                                        margin: 26px 0
                                        gap: 15px
                                        @include media(991)
                                            margin: 20px 0
                                            gap: 20px
                                        @include media(768)
                                            margin: 15px 0
                                            gap: 15px
                                        @include media(540)
                                            margin: 12px 0
                                            gap: 12px
                                        li
                                            display: flex
                                            gap: 12px
                                            img
                                                width: 35px
                                                height: 35px
                                                flex-shrink: 0
                                                @include media(768)
                                                    width: 30px
                                                    height: 30px
                                                @include media(540)
                                                    width: 25px
                                                    height: 25px
                                            .feature
                                                span
                                                    font-size: 14px
                                                    color: rgba(102, 102, 102, 1)
                                                    @include media(768)
                                                        font-size: 14px
                                                    @include media(540)
                                                        font-size: 13px
                                                p
                                                    color: var(--black)
                                                    margin-top: 3px
                                                    margin-bottom: 0
                                                    @include media(768)
                                                        font-size: 14px
                                                        margin-top: 2px
                                    .btn-group
                                        display: flex
                                        justify-content: space-between
                                        gap: 12px
                                        .btn
                                            width: 100%
.home-secD
    padding: 70px 0
    .heading
        width: 100%
        max-width: 550px
        margin: 0 auto
        text-align: center

        h3
            margin-bottom: 10px

        p
            width: 100%
            max-width: 450px
            margin: 0 auto

    .timeline-wrapper
        position: relative
        padding: 0 0 7rem
        display: flex
        flex-direction: column
        gap: 15px
        margin-top: 50px
        @include media(991)
            gap: 2rem
            padding: 0 0 4rem

    .timeline-line
        position: absolute
        top: 0
        bottom: 0
        left: 50%
        width: 2px
        background: #292929
        transform: translateX(-50%)
        @include media(991)
            left: 0
        @include media(675)
            display: none

    .timeline-item
        position: relative
        width: 50%
        display: flex
        justify-content: flex-start
        align-items: center
        @include media(991)
            width: 100%

        .timeline-content
            display: grid
            grid-template-columns: repeat(2, 1fr)
            align-items: center
            overflow: hidden
            max-width: 100%
            back
            @include media(991)
                margin-left: 4rem
            @include media(675)
                grid-template-columns: 1fr

            .image-box
                overflow: hidden
                border-radius: 10px
                img
                    width: 100%
                    height: 210px
                    display: block
                    object-fit: cover
                    transition: all 0.3s ease-in-out

                    &:hover
                        transform: scale(1.05)
                        cursor: pointer

            .content-box
                padding: 20px 
                @include media(1024)
                    padding: 10px 0 10px 20px
                @include media(675)
                    padding: 15px
                    text-align: center

                h5
                    font-size: 20px
                    font-weight: 600
                    margin-bottom: 15px
                    color: var(--black)

                p
                    font-size: 16px
                    color: var(--text)
                    @include media(1366)
                        font-size: 14px

        .timeline-circle
            position: absolute
            top: 50%
            transform: translateY(-50%)
            width: 45px
            height: 45px
            display: flex
            justify-content: center
            align-items: center
            background: rgba(33, 33, 33, 1)
            border: 1px solid rgba(80, 80, 80, 1)
            z-index: 2
            border-radius: 10px
            font-size: 20px
            color: var(--white)
            @include media(991)
                left: -15px
            @include media(675)
                display: none

        &:nth-child(odd)
            left: 0
            justify-content: flex-end

            .timeline-content
                margin-right: 4rem
                @include media(1366)
                    margin-right: 2rem
                @include media(675)
                    margin: 0

            .timeline-circle
                right: -22px
                @include media(675)
                    display: none

        &:nth-child(even)
            left: 50%
            @include media(991)
                left: 0

            .timeline-content
                margin-left: 4rem
                @include media(675)
                    margin: 0

            .timeline-circle
                left: -22px
                @include media(675)
                    display: none

.home-secG
    padding: 70px 0
    background: var(--gray)
    .heading
        width: 100%
        max-width: 550px
        margin: 0 auto
        text-align: center
        margin-bottom: 40px
        h3
          margin-bottom: 10px
        p
            width: 100%
            max-width: 450px
            margin: 0 auto
    .cards-grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 24px
        .card-item
            position: relative
            overflow: hidden
            border-radius: 10px
            display: flex
            padding: 25px
            background: var(--white)
            
            .card-num
                position: absolute
                right: 20px
                top: 20px
                font-weight: 600
                color: var(--text)
                z-index: 4
                font-size: 65px
                opacity: 0.1
            
            .hover-content
                padding: 20px
                transition: all 0.5s ease-in-out
                z-index: 2
                width: 100%
                max-width: 288px
                height: 100%
                h5
                    color: var(--black)
                p
                    font-size: 14px
                    margin-top: 20px
                    color: var(--text)
         


.home-secE
    padding: 70px 0
    @include media(991)
        padding: 40px 0
    @include media(767)
        padding: 30px 0

    .heading
        width: 100%
        max-width: 450px
        margin: 0 auto
        text-align: center
        @include media(540)
          max-width: 324px

    .swiper-wrap
        margin-top: 2rem
        position: relative
        @include media(991)
            margin-top: 3rem
        @include media(767)
            margin-top: 2rem

        .btns-group
            display: flex
            justify-content: space-between
            pointer-events: none               
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%) 
            z-index: 1
            width: 100%
            padding: 0 10px

            button
                width: 40px
                height: 40px
                background: var(--white)
                display: flex
                justify-content: center
                align-items: center
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
                border-radius: 5px
                border: none
                cursor: pointer
                pointer-events: all            

                &:hover
                    background: var(--primary)
                    svg path
                        stroke: var(--white)

                svg
                    width: 35px
                    height: 35px
                    display: block

                    path
                        stroke: var(--primary)

                &.swiper-button-disabled
                    opacity: 0.5
                    cursor: not-allowed
                    pointer-events: none

                &.thirdSilder-prev
                    transform: rotate(270deg)

                &.thirdSilder-next
                    transform: rotate(90deg)
        .thirdSilder
            margin: 0 20px
            overflow: hidden
            .swiper-wrapper
                padding: 20px 4px
                .swiper-slide
                    .card
                        border-radius: 10px
                        overflow: hidden
                        position: relative
                        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
                        @include media(540)
                          height: 400px
                        .card-img
                            width: 100%
                            height: 330px
                            position: relative
                            img
                                width: 100%
                                height: 100%
                                display: block
                                object-fit: cover
                                object-position: top
                            .play-btn
                                position: absolute
                                bottom: 20px
                                right: 20px
                        .card-content
                            padding: 20px
                            width: 100%
                            .header
                                display: flex
                                align-items: center
                                justify-content: space-between
                                margin: 0 0 15px
                                .stars
                                    display: flex

                                h6
                                    color: var(--black)
                                p
                                    color: var(--text)
                                    font-size: 14px


    .btn-wrap
        text-align: center
        margin-top: 3rem
        @include media(767)
            margin-top: 2rem

.home-secF
    padding: 40px 0 70px
    position: relative

    &::before
        content: ""
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        max-width: 675px
        height: 100%
        background-image: url(../../icon/building-skaleton.png)
        background-repeat: no-repeat
        filter: brightness(0) invert(1)
        background-position: center bottom
        background-size: contain
        opacity: .3
    .content-wrapper
        background: var(--gradient-a)
        border-radius: 10px
        overflow: hidden
        .content
            padding: 60px
            width: 100%
            max-width: 650px
            h3
                color: var(--white)
            p
                color: var(--white)
                opacity: .7
                margin: 12px 0 45px

            .btn-primary
                background: var(--white)
                color: var(--primary)
                border-color: var(--white)
                &::before
                        background: var(--gray)

                &:hover
                    &::before
                        background: var(--gray)

.home-secH
    padding: 70px 0 0
    .heading
        width: 100%
        max-width: 500px
        margin: 0 auto
        text-align: center
        margin-bottom: 40px
        h3
            margin-bottom: 10px
        p
            width: 100%
            max-width: 450px
            margin: 0 auto
    .content-wrapper
        height: 650px
        overflow: hidden
        border-radius: 10px

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

    @include media(991)
        padding: 40px 0

    @include media(767)
        padding: 30px 0

    .heading
        width: 100%
        max-width: 450px
        margin: 0 auto 40px
        text-align: center

        h3
            font-size: 32px
            font-weight: 700
            color: var(--dark)
            margin-bottom: 0

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

            @include media(375)
                font-size: 20px

            span
                display: block
                color: var(--purple)
                font-size: 32px
                margin-top: 5px

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

                @include media(375)
                    font-size: 20px

    .accordion-wrapper
        max-width: 800px
        margin: 0 auto

    .accordion-item
        background: var(--white)
        border-radius: 8px
        margin-bottom: 15px
        overflow: hidden
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05)
        transition: box-shadow 0.3s ease

        &:last-child
            margin-bottom: 0

        &:hover
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)

        &.active

            .accordion-header
                h4
                    color: var(--dark)

            .accordion-icon
                color: var(--purple)

                svg
                    transform: rotate(180deg)

    .accordion-header
        display: flex
        justify-content: space-between
        align-items: center
        padding: 20px 25px
        cursor: pointer
        transition: background 0.3s ease

        &:hover
            background: #fafafa

        h4
            font-size: 16px
            font-weight: 600
            color: #666
            margin: 0
            flex: 1
            padding-right: 20px
            transition: color 0.3s ease

            @include media(375)
                font-size: 14px

    .accordion-icon
        color: #666
        transition: color 0.3s ease, transform 0.3s ease
        width: 30px
        height: 30px
        display: flex
        align-items: center
        justify-content: center
        flex-shrink: 0

        svg
            transition: transform 0.3s ease
            display: block

    .accordion-content
        display: none
        padding: 0 25px 20px
        padding-right: 3rem
        background: var(--white)

        p
            margin: 0
            padding: 10px 0 0
            font-size: 14px
            color: #666
            font-weight: 400
            line-height: 1.8

            @include media(375)
                font-size: 12px

        ul
            margin: 10px 0 0 20px

            li
                font-size: 14px
                color: #666
                font-weight: 400
                line-height: 1.8
                list-style-type: disc

                @include media(375)
                    font-size: 12px