@import "../_common"

main
    overflow: hidden

.about-secA
    padding: 70px 0
    display: flex
    align-items: center

    @include media(1366)
        padding: 25px 0
    @include media(991)
        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(768)
            grid-template-columns: 1fr
            gap: 2rem
            text-align: center
        @include media(540)
            gap: 1.5rem

        .item-media
            border-radius: 10px
            overflow: hidden

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

            img
                width: 100%
                display: block

        .item-content
            width: 100%
            max-width: 475px
            @include media(991)
                margin: 0 auto

            @include media(675)
                max-width: 100%
                display: flex
                flex-direction: column
                align-items: center

            h6
                color: var(--primary)

            h1
                margin: 2rem 0 25px

                @include media(540)
                    margin: 1rem 0 15px

            p
                color: var(--text)

            .btn
                display: flex
                gap: 30px
                margin-top: 30px

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

                
         

.about-secB
    padding: 70px 0 0
    background: var(--gray)
    overflow: hidden

    @include media(991)
        padding: 50px 0 
    @include media(540)
        padding: 40px 0 

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

    .tabs
        display: flex
        align-items: center
        justify-content: center
        flex-wrap: wrap
        gap: 12px
        list-style: none
        @include media(991)
          margin-bottom: 3rem

        @include media(540)
            gap: 8px

        li
            padding: 7px 24px
            border: 1px solid #666
            border-radius: 50px
            color: #666
            cursor: pointer
            font-size: 14px
            transition: background 0.3s, color 0.3s, border-color 0.3s
            user-select: none

            @include media(400)
                padding: 6px 18px

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

    .foundationSlider
        margin: 0 20px
        position: relative
        overflow: visible !important

        @include media(991)
            margin: 0

        .slider-connector
            position: absolute
            top: 125%
            left: 50%
            transform: translate(-50%, -50%)
            width: 750px
            height: 750px
            border-radius: 50%
            border-top: 2px dashed rgba(210, 210, 210, 1)
            z-index: 0
            pointer-events: none

            @include media(768)
                display: none

        .swiper-wrapper

            .swiper-slide
                transition: transform 0.6s ease
                display: flex
                align-items: center
                justify-content: center

                &.swiper-slide-prev
                    transform: rotate(-15deg) scale(1)
                    transform-origin: center center
                    margin-top: 10rem

                    @include media(991)
                        transform: none
                        margin-top: 0

                &.swiper-slide-next
                    transform: rotate(15deg) scale(1)
                    transform-origin: center center
                    margin-top: 10rem

                    @include media(991)
                        transform: none
                        margin-top: 0

                &.swiper-slide-active
                    transform: none

                    .card
                        background: var(--primary)
                        box-shadow: 0 20px 50px rgba(232, 25, 44, 0.35)

                        h6
                            color: var(--white)
                            opacity: 1

                        p
                            color: rgba(255, 255, 255, 0.85)
                            opacity: 1

                        img
                            filter: brightness(0) invert(1)

                .card
                    padding: 34px 45px
                    display: flex
                    justify-content: center
                    flex-direction: column
                    align-items: center
                    border-radius: 14px
                    background: var(--white)
                    position: relative
                    transition: background 0.4s ease, color 0.4s ease
                    cursor: pointer
                    min-height: 350px
                    width: 100%
                    overflow: hidden

                    @include media(768)
                        min-height: 280px
                        padding: 28px 35px
                    @include media(540)
                        min-height: 240px
                        padding: 20px
                    @include media(400)
                        min-height: 200px
                        padding: 18px 16px

                    &::before
                        content: ''
                        position: absolute
                        inset: 0
                        border-radius: 14px
                        padding: 1px
                        background: linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%)
                        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
                        -webkit-mask-composite: xor
                        mask-composite: exclude
                        pointer-events: none

                    img
                        width: 55px
                        height: 55px

                        @include media(540)
                            width: 44px
                            height: 44px

                    h6
                        color: var(--black)
                        font-size: 20px
                        font-weight: 600
                        margin: 20px 0 10px
                        text-align: center
                        transition: color 0.4s
                        opacity: 0

                        @include media(540)
                            margin: 15px 0 8px

                    p
                        color: var(--text)
                        opacity: 0
                        text-align: center
                        font-size: 14px
                        line-height: 1.6
                        transition: color 0.4s, opacity 0.4s

                        @include media(1366)
                            font-size: 13px


.about-secC
    padding: 70px 0 0
    overflow: hidden

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

    .grid
        display: grid
        grid-template-columns: 1fr 1fr 1fr
        align-items: stretch

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

    .item-left
        padding-bottom: 70px

        @include media(991)
            padding-bottom: 0
        @include media(768)
            padding-bottom: 0
        @include media(540)
            text-align: center
            padding-bottom: 0

        p:not(.name > p)
            color: var(--primary)
            font-weight: 600

        h5
            margin: 4rem 0 3rem

            @include media(768)
                margin: 2rem 0 2rem
            @include media(540)
                margin: 1.5rem 0 1.5rem

        .name
            @include media(540)
                display: flex
                flex-direction: column
                align-items: center

            h6
                margin-top: 20px

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

            p
                color: var(--text)

    .item-img
        display: flex
        align-items: flex-end
        position: relative

        @include media(991)
            order: -1
            justify-content: center

        img
            display: block
            width: 100%

            @include media(991)
                max-width: 400px
            @include media(540)
                max-width: 280px

        &::before
            content: ""
            position: absolute
            left: 50%
            bottom: -35%
            transform: translateX(-50%)
            background: rgba(0, 0, 0, 0.3)
            width: 450px
            height: 450px
            z-index: -1
            border-radius: 50%
            filter: blur(15px)
            opacity: 0.4

            @include media(991)
                display: none

    .item-quots
        display: flex
        align-items: center
        justify-content: center

        @include media(991)
            display: none

        img
            max-width: 120px


.about-secD
    padding: 70px 0
    background: var(--gray)
    overflow: hidden

    @include media(540)
        padding: 40px 0

    .heading
        margin-bottom: 20px

    .grid-wrapper
        position: relative

    .truck
        position: absolute
        bottom: 50%
        right: 0
        transform: translateX(150%) translateY(50%)
        z-index: 10

        img
            display: block

    .timeline-wrapper
        width: 100%
        max-width: 100%
        margin: 0 auto
        height: 300px
        overflow: visible
        margin-top: 145px
        transform: translateX(150%)


.about-secD.start-animation

    .truck
        animation: truckPullTimeline 12s cubic-bezier(0.2, 0.9, 0.3, 1) forwards

    .timeline-wrapper
        animation: timelineDragged 15s 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards


.timeline
    position: relative
    display: flex
    justify-content: space-between
    padding: 70px 0
    width: 100%

    &::before
        content: ""
        position: absolute
        left: 0
        right: 0
        top: 50%
        transform: translateY(-50%)
        height: 2px
        background: #d0d0d0
        z-index: 1

    input[type="radio"]
        display: none


.time-item
    position: relative
    flex: 1
    text-align: center
    z-index: 2

    &:last-child
        .content
            left: auto
            right: 0
            transform: translateY(10px)

    .dot
        position: absolute
        left: 50%
        top: 50%
        cursor: pointer
        transform: translate(-50%, -50%)
        width: 12px
        height: 12px
        border-radius: 50%
        background: #d0d0d0
        z-index: 3
        transition: background .3s

        // vertical line
        &::before
            content: ""
            position: absolute
            left: 50%
            transform: translateX(-50%)
            width: 1px
            height: 0
            background: transparent
            transition: height .4s

        // blinking ripple (APPLY TO ALL)
        &::after
            content: ""
            position: absolute
            left: 50%
            top: 50%
            transform: translate(-50%, -50%)
            width: 12px
            height: 12px
            border-radius: 50%
            border: 1px solid #6161617c
            animation: dotBlink 1.6s infinite



    .year
        position: absolute
        left: 50%
        transform: translateX(-50%)
        cursor: pointer
        white-space: nowrap
        transition: .3s

    .content
        position: absolute
        left: 110%
        transform: translateX(-50%) translateY(10px)
        width: 254px
        padding-left: 35px
        opacity: 0
        visibility: hidden
        pointer-events: none
        transition: .4s
        text-align: left

        h4
            margin: 8px 0
            color: var(--primary)
            font-size: 20px

        p
            line-height: 1.5



.time-item:nth-of-type(odd)

    .year
        bottom: calc(50% + 30px)

    .content
        top: calc(50% + 80px)

    .dot::before
        top: 100%



.time-item:nth-of-type(even)

    .year
        top: calc(50% + 30px)

    .content
        bottom: calc(50% + 80px)

    .dot::before
        bottom: 100%



input:checked + .time-item 

    .dot
        background: $primary

        &::before
            height: 160px
            background: $primary

        &::after
            border-color: $primary

    .year
        color: $primary

    .content
        opacity: 1
        visibility: visible
        pointer-events: auto
        transform: translateX(-50%) translateY(0)



@keyframes dotBlink
    0%
        transform: translate(-50%, -50%) scale(1)
        opacity: .7

    70%
        transform: translate(-50%, -50%) scale(2.2)
        opacity: 0

    100%
        opacity: 0


@keyframes truckPullTimeline
    0%
        transform: translateX(150%) translateY(50%)
    100%
        transform: translateX(-250%) translateY(50%)
        opacity: 0

@keyframes timelineDragged
    0%
        transform: translateX(100%)
    40%
        transform: translateX(-10px)
    80%
        transform: translateX(15px)
    100%
        transform: translateX(0)


@include media(991)

    .about-secD

        .truck
            position: relative
            transform: none !important
            animation: none !important
            margin: 0 auto 16px

        .timeline-wrapper
            transform: none !important
            animation: none !important
            margin-top: 40px

            height: auto

    .about-secD.start-animation

        .truck
            animation: none !important

        .timeline-wrapper
            animation: none !important


@include media(768)

    .about-secD

        .truck
            display: none

        .timeline-wrapper
            height: auto
            margin-top: 20px

        .timeline
            flex-direction: column
            padding: 0 0 0 36px
            gap: 0

            &::before
                left: 5px
                top: 0
                bottom: 0
                right: auto
                width: 2px
                height: 100%
                transform: none

        .time-item
            flex: none
            text-align: left
            padding: 24px 0 24px 28px
            min-height: 80px
            @include media(540)
              padding: 31px 0 5px 13px
            

            .dot
                left: -25px
                top: 34px
                transform: none

                &::before
                    display: none

            .year
                position: static
                transform: none
                display: inline-block
                cursor: pointer
                color: #666
                margin-bottom: 4px

            .content
                position: static
                transform: none
                opacity: 0
                visibility: hidden
                width: 100%
                padding-left: 0
                max-width: 100%
                display: grid
                grid-template-rows: 0fr
                transition: grid-template-rows 0.4s ease, opacity 0.4s ease, visibility 0.4s

            .content-inner
                overflow: hidden

        .time-item:nth-of-type(odd),
        .time-item:nth-of-type(even)
            .year
                top: auto
                bottom: auto
                position: static
                transform: none

            .content
                top: auto
                bottom: auto
                position: static
                transform: none

            .dot::before
                display: none

        input:checked + .time-item

            .dot
                background: $primary

            .year
                color: $primary

            .content
                opacity: 1
                visibility: visible
                grid-template-rows: 1fr
                transform: none

@include media(991)

    .about-secD

        .timeline
            padding: 0 0 0 25px
            width: 540px
            @include media(540)
               width: 324px