@import "../_common"

main
    overflow: hidden

.storage-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)

            .btns
                display: flex
                gap: 30px
                margin-top: 30px
                @include media(768)
                    justify-content: center

                @include media(480)
                    flex-direction: column
                    gap: 15px
                    width: 100%

                    .btn
                        width: 100%
                        justify-content: center

                .btn-border-white
                    border-color: var(--black)
                    color: var(--black)
                    transition: all 0.3s ease-in

                    img
                        filter: brightness(0)

                    &:hover
                        background: var(--black)
                        color: var(--white)
                        img
                            filter: brightness(0) invert(1)

            .input-wrap
                background: var(--gray)
                border: 1px solid rgba(230, 230, 230, 1)
                padding: 15px 30px
                border-radius: 50px
                position: relative
                margin-top: 30px
                display: none
                justify-content: space-between

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

                input
                    background: none
                    border: none
                    outline: none
                    width: calc(100% - 60px)
                    margin: 0 18px


.storage-secB
    position: relative
    padding: 70px 0
    background: var(--gray)

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    &::after
        content: ""
        position: absolute
        top: 50%
        right: 20px
        transform: translateY(-50%)
        width: 100%
        height: 100%
        background: url("../../images/other/bg.png")
        background-size: 100%
        background-repeat: no-repeat
        background-position: right center

        @include media(675)
            display: none

    .content
        width: 100%
        max-width: 512px
        display: flex
        justify-content: center
        align-items: center
        flex-direction: column
        text-align: center
        margin: 0 auto
        position: relative
        z-index: 1

        @include media(540)
            max-width: 100%
            padding: 0 10px

        &::after
            content: ""
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            width: 100%
            height: 100%
            background: var(--gray)
            filter: blur(30px)
            z-index: -1

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


.storage-secC
    padding: 70px 0

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .heading
        margin-bottom: 3rem

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

    .grid
        display: flex
        gap: 20px
        align-items: stretch
        min-height: 550px

        @include media(991)
            min-height: 420px
            gap: 12px

        @include media(675)
            flex-direction: column
            min-height: unset

        .item
            width: 10%
            border-radius: 10px
            overflow: hidden
            position: relative
            cursor: pointer
            flex-shrink: 0
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1)

            @include media(675)
                width: 100% !important
                height: 80px
                transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1)

                &:hover
                    height: 90px

                &.active
                    height: 420px
                    width: 100% !important

            &:hover
                width: 11%

            &.active
                width: 65%

                &::before
                    backdrop-filter: blur(0)
                    -webkit-backdrop-filter: blur(0)
                    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 3.31%, rgba(0, 0, 0, 0.7) 49.93%)

                &::after
                    opacity: 0

                .item-content
                    p
                        writing-mode: horizontal-tb
                        opacity: 1

                    h4
                        opacity: 1

                    p:last-child
                        opacity: 1

            &::before
                content: ""
                position: absolute
                inset: 0
                width: 100%
                height: 100%
                background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(26, 26, 26, 0.4) 100%)
                backdrop-filter: blur(4px)
                -webkit-backdrop-filter: blur(4px)
                transition: backdrop-filter 0.6s ease, background 0.6s ease
                z-index: 1

            &::after
                content: ""
                position: absolute
                bottom: 30px
                left: 50%
                transform: translateX(-50%)
                width: 40px
                height: 40px
                background: url("../../icons/plus.svg") no-repeat center / 40px
                opacity: 1
                transition: opacity 0.4s ease
                z-index: 2

                @include media(675)
                    bottom: 50%
                    transform: translate(-50%, 50%)
                    right: 0
                    left: auto

            .item-img
                position: absolute
                inset: 0
                width: 100%
                height: 100%

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

            .item-content
                position: absolute
                top: 0
                left: 0
                padding: 40px
                width: 100%
                max-width: 475px
                z-index: 2

                @include media(991)
                    padding: 25px 30px
                    max-width: 100%

                @include media(675)
                    padding: 20px 25px

                p
                    color: var(--white)
                    writing-mode: vertical-rl
                    opacity: 1
                    transition: opacity 0.4s ease 0.1s, writing-mode 0s

                    @include media(675)
                        writing-mode: horizontal-tb

                    &:last-child
                        color: rgba(255, 255, 255, 0.7)
                        opacity: 0
                        transition: opacity 0.4s ease 0.2s

                h4
                    margin: 2rem 0 20px
                    color: var(--white)
                    opacity: 0
                    transition: opacity 0.4s ease 0.15s, writing-mode 0s

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


.storage-secD
    padding: 70px 0
    background: var(--gray)

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

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

    .swiper-wrap
        position: relative

        .btn
            margin: 0 auto
            transform: translateY(20px)

            @include media(540)
                transform: translateY(10px)

        .centeredSlider
            width: 100%
            overflow: visible !important
            padding: 20px 0

        .swiper-slide
            transition: transform 0.5s ease, filter 0.5s ease
            transform: scale(0.55)
            filter: grayscale(100%) brightness(0.85)
            cursor: pointer
            display: flex
            flex-direction: column
            align-items: center

            &.swiper-slide-active
                transform: scale(1) !important
                filter: grayscale(0%) brightness(1) !important
                z-index: 2

                .item-content
                    .slide-label, ul
                        opacity: 1

                    .slide-label
                        color: var(--black)

            &.swiper-slide-prev,
            &.swiper-slide-next
                z-index: 1

            .item
                overflow: hidden
                width: 100%

            .item-img
                img
                    width: 100%
                    height: 320px
                    object-fit: cover
                    display: block

                    @include media(675)
                        height: 220px

                    @include media(480)
                        height: 180px

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

                .slide-label
                    margin: 20px 0 25px
                    letter-spacing: 0.5px
                    text-align: center
                    transition: opacity 0.4s ease
                    color: rgba(0, 0, 0, 0.4)

                    @include media(540)
                        margin: 12px 0 16px

                ul
                    display: flex
                    flex-wrap: wrap
                    justify-content: center
                    gap: 10px
                    opacity: 0

                    @include media(675)
                        gap: 8px

                    li
                        padding: 5px 20px
                        border: 1px solid rgba(102, 102, 102, 1)
                        border-radius: 50px
                        font-weight: 600
                        color: var(--primary)

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

        .swiper-group
            position: absolute
            top: 50%
            width: 100%
            max-width: 650px
            margin: 0 auto
            left: 0
            right: 0
            transform: translateY(-50%)
            display: flex
            justify-content: space-between
            pointer-events: none
            z-index: 10
            padding: 0 8px

            @include media(675)
                max-width: 100%
                padding: 0

        .centeredSlider-prev,
        .centeredSlider-next
            pointer-events: all
            border-radius: 50%
            border: none
            cursor: pointer
            display: flex
            align-items: center
            justify-content: center
            transition: box-shadow 0.2s

            svg
                width: 35px
                height: 35px

                @include media(675)
                    width: 28px
                    height: 28px

        .centeredSlider-prev
            svg
                transform: rotate(90deg)

        .centeredSlider-next
            svg
                transform: rotate(-90deg)


.storage-secE
    width: 100%
    padding: 70px 0
    position: relative
    overflow: hidden

    @include media(540)
        padding: 45px 0

    .circle-effect
        left: 86%
        top: 65%

    .heading
        margin: 0 0 60px
        position: relative

        @include media(540)
            margin: 0 0 30px

        h3
            text-transform: uppercase
            text-align: center

        .circle-effect
            left: 10%

    .icon-row
        position: relative
        display: flex
        justify-content: center
        align-items: center
        gap: 70px
        padding: 0 20px

        @include media(991)
            gap: 40px

        @include media(675)
            gap: 30px
            padding: 0 15px

        @include media(540)
            gap: 20px
            padding: 0 10px

        &::before
            content: ""
            width: 100%
            height: 1px
            position: absolute
            top: 30px
            left: 0
            background: #BFBFBF
            z-index: 0

            @include media(675)
                top: 20px

        .icon-item
            display: flex
            flex-direction: column
            align-items: center
            gap: 15px
            position: relative
            z-index: 1
            cursor: pointer

            @include media(540)
                gap: 8px

            .icon
                border: 1px solid #66666633
                display: flex
                justify-content: center
                align-items: center
                width: 64px
                height: 64px
                border-radius: 50%
                background: var(--white)
                transition: all 0.3s ease

                @include media(675)
                    width: 40px
                    height: 40px

                svg , img
                    width: 35px
                    height: 35px

                    @include media(675)
                        width: 22px
                        height: 22px

                    path
                        fill: none
                        stroke: #666
                        stroke-width: 1.5
                        transition: all .3s ease

                img
                    transition: filter 0.3s ease

                    @include media(675)
                        width: 20px

            p
                width: 100%
                max-width: 100px
                text-align: center
                opacity: 0.5
                transition: opacity 0.3s ease

                @include media(540)
                    font-size: 10px
                    line-height: 1.2
                    max-width: 70px

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

                    img
                        filter: brightness(0) invert(1)
                        opacity: 1

                    svg
                        path
                            fill: none
                            stroke: var(--white)

                p
                    opacity: 1

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

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

        .swiper-group
            position: absolute
            top: 50%
            left: 0
            transform: translateY(-50%)
            width: 100%
            display: flex
            justify-content: space-between
            pointer-events: none

            button
                border: 1px solid var(--primary)
                width: 50px
                height: 50px
                border-radius: 50%
                cursor: pointer
                display: flex
                justify-content: center
                align-items: center
                padding: 0
                transition: all 0.3s ease
                pointer-events: auto

                @include media(991)
                    display: none

                svg
                    width: 20px
                    height: 20px

                    path
                        fill: var(--primary)

                &:hover
                    background: var(--primary)
                    border-color: var(--primary)

                    svg path
                        fill: var(--white)

                &:disabled
                    opacity: 0.3
                    cursor: not-allowed

            .why-us-next
                transform: rotate(270deg)

            .why-us-prev
                transform: rotate(90deg)

        .why-us-slider
            width: 100%
            max-width: 1050px
            margin: 0 auto

            @include media(1280)
                max-width: 950px

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

            @include media(540)
            

            .swiper-wrapper
                .swiper-slide
                    .grid
                        display: grid
                        grid-template-columns: repeat(2, 1fr)
                        gap: 60px
                        align-items: center

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

                        @include media(540)
                            gap: 20px

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

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

                            

                            img
                                width: 100%
                                display: block

                        .item-content
                            @include media(768)

                            h4
                                margin-bottom: 10px

                            ul
                                margin: 30px 0 40px

                                @include media(991)
                                    display: inline-flex
                                    flex-direction: column
                                    align-items: flex-start
                                    text-align: left

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

                                li
                                    display: flex
                                    align-items: flex-start
                                    gap: 12px
                                    color: var(--text)
                                    margin-bottom: 8px
                                    position: relative

                                    &::before
                                        content: ""
                                        width: 6px
                                        height: 6px
                                        min-width: 6px
                                        margin-top: 7px
                                        border-radius: 50%
                                        background: var(--primary)

                            p
                                color: var(--text)
                                line-height: 1.6

                                @include media(991)
                                    width: 60%
                                    margin: 0 auto

                                @include media(675)
                                    width: 100%

                            


.storage-secF
    background: var(--gray)
    padding: 70px 0
    overflow: hidden

    @include media(991)
        padding: 60px 0

    @include media(540)
        padding: 40px 0

    .heading
        text-align: center

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

        @include media(991)
            margin-top: 3rem

        @include media(540)
            margin-top: 2rem

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

            @include media(675)
                display: none

            button
                color: #000
                width: 40px
                height: 40px
                border-radius: 50%
                display: flex
                justify-content: center
                align-items: center
                transition: 0.3s ease
                background: var(--white)
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px

                &.swiper-button-lock,
                &.swiper-button-disabled
                    opacity: 0
                    visibility: hidden
                    pointer-events: none

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

                svg
                    width: 20px
                    height: 20px

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

                    path
                        fill: var(--black)

                &:hover
                    opacity: 0.8

            .why-next
                transform: rotate(270deg)

            .why-prev
                transform: rotate(90deg)

        .why-slider
            margin: 0 20px

            @include media(991)
                margin: 0

            .swiper-wrapper
                .swiper-slide
                    .card
                        padding: 34px
                        display: flex
                        justify-content: center
                        flex-direction: column
                        align-items: center
                        border-radius: 10px
                        background: var(--white)
                        position: relative
                        transition: all 0.3s ease-in
                        cursor: pointer
                        height: -webkit-fill-available

                        @include media(540)
                            padding: 20px

                        &::before
                            content: ''
                            position: absolute
                            top: 0
                            left: 0
                            right: 0
                            bottom: 0
                            border-radius: 15px
                            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

                        .icon, svg
                            width: 45px
                            height: 45px

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

                        h6
                            color: var(--black)
                            margin: 20px 0 10px
                            text-align: center

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

                        p
                            color: var(--text)
                            opacity: .7
                            text-align: center

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

                    &.swiper-slide-active,
                    &:hover
                        .card
                            background: var(--primary)

                            img, svg
                                filter: brightness(0) invert(1)

                            h6
                                color: var(--white)

                            p
                                color: rgba(255, 255, 255, 0.7)

.storage-secG
    padding: 70px 0

    @include media(768)
        padding: 50px 0

    @include media(480)
        padding: 40px 0
    overflow: hidden

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

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

        @include media(480)
            margin-bottom: 30px
            padding: 0 16px

        h2
            flex: 1
            padding-right: 20px

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

            @include media(675)
                display: none

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

                &.needSlider-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

    .needSlider
        overflow: visible
        margin: 0 45px

        @include media(768)
            margin: 0 24px

        @include media(480)
            margin: 0 16px

        .swiper-wrapper
            .swiper-slide
                .grid
                    display: block

                    .item-img
                        height: 450px
                        overflow: hidden
                        border-radius: 10px

                        @include media(991)
                            height: 320px

                        @include media(480)
                            height: 220px
                        img
                            width: 100%
                            height: 100%
                            object-fit: cover
                            object-position: top

                    .item-content
                        display: none
                        opacity: 0
                        transition: opacity 0.4s ease

                        p
                            margin: 25px 0 35px
                            color: var(--text)

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

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

                    @include media(540)
                        gap: 1.25rem

                    .item-img
                        height: 450px
                        overflow: hidden
                        border-radius: 10px


                        @include media(991)
                            height: 320px

                        @include media(480)
                            height: 220px
                        img
                            width: 100%
                            height: 100%
                            object-fit: cover
                            object-position: top


                    .item-content
                        display: block
                        opacity: 1
                        transition: opacity 0.4s ease 0.2s
                        @include media(991)
                           text-align: center
                           margin: 0 auto


                        h4
                            display: flex
                            align-items: center
                            gap: 10px
                            font-size: clamp(1.1rem, 2.5vw, 1.4rem)
                            @include media(991)
                              justify-content: center


                            img
                                flex-shrink: 0
                                width: 20px
                                height: 20px

                        p
                            margin: 25px 0 35px
                            color: var(--text)
                            font-size: clamp(0.875rem, 1.5vw, 1rem)
                            line-height: 1.7

                            @include media(480)
                                margin: 16px 0 24px

                        .btn
                            @include media(991)
                                justify-content: center
                                margin: 0 auto

                  

.storage-secH
    background: var(--gray)
    padding: 70px 0

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 40px 0

    .grid
        display: grid
        grid-template-columns: 340px 1fr
        gap: 45px

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

        @include media(540)
            gap: 20px

        .heading
            h2
                text-align: left
                margin-bottom: 30px

                @include media(991)
                    text-align: center

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

            .btn
                @include media(991)
                    margin: 0 auto
                    display: flex

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

            .accordion-item
                border-radius: 8px
                margin-bottom: 15px
                overflow: hidden
                transition: all 0.3s ease
                border: 1px solid rgba(210, 210, 210, 1)

                @include media(540)
                    margin-bottom: 10px

                &:hover
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
                    border: 1px solid #ffffff

                &.active
                    .accordion-icon
                        color: var(--black)

                    .accordion-header
                        background: var(--white)

                        h4
                            color: var(--black)


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

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

                    &:hover
                        background: #fafafa

                    h4
                        font-weight: 600
                        color: #666
                        margin: 0
                        font-size: 18px
                        flex: 1
                        padding-right: 20px
                        @include media(540)
                          font-size: 16px


                .accordion-icon
                    font-size: 24px
                    font-weight: 300
                    color: #666
                    transition: all 0.3s ease
                    width: 30px
                    height: 30px
                    display: flex
                    align-items: center
                    justify-content: center
                    flex-shrink: 0

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

                    @include media(540)
                        padding: 0 18px
                        padding-right: 18px

                    p
                        padding: 20px 0
                        margin: 0
                        color: #666
                        font-weight: 400