@import "../_common"

header
    background: $white
    position: sticky
    top: 0
    z-index: 100
    padding: var(--headerpadding) var(--containerfluid)
    height: var(--headerheight)
    box-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #0000001A
    display: flex
    justify-content: space-between
    align-items: center
    .colB
        nav

            .ham-pop-btn
                display: none
                @include media(1024)
                   display: block

                svg
                    width: 45px
                    height: 45px

            ul
                display: flex
                align-items: center
                gap: 28px
                @include media(1280)
                    gap: 18px
                @include media(1024)
                    display: none

                li
                    position: relative

                        

                    a
                        color: $black
                        font-size: 15px
                        font-family: $SFProDisplay
                        letter-spacing: 1px
                        @include font(500)
                        text-decoration: none
                        transition: .5s ease
                        &:hover
                            color: $primary
                        &:has(.icon)
                            display: flex
                            align-items: center
                            gap: 10px

                    &.has-dropdown
                        position: relative
                        perspective: 800px

                        &::before
                            content: ""
                            position: absolute
                            inset: 0
                            width: 100%
                            height: 40px
                            z-index: -1

                        > a
                            img.down
                                transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)

                        &:hover
                            > a
                                color: var(--primary)
                                cursor: pointer
                                img.down
                                    transform: rotate(180deg)
                                    filter: invert(18%) sepia(99%) saturate(7482%) hue-rotate(358deg) brightness(96%) contrast(112%)

                                img.icon
                                    filter: invert(18%) sepia(99%) saturate(7482%) hue-rotate(358deg) brightness(96%) contrast(112%)

                        .dropdown
                            position: absolute
                            top: calc(100% + 14px)
                            left: 50%
                            transform: translateX(-50%) rotateX(-90deg)
                            transform-origin: top center
                            background: $white
                            min-width: 220px
                            border-radius: 10px
                            box-shadow: 0px 16px 40px rgba(0,0,0,0.15)
                            overflow: hidden
                            opacity: 0
                            pointer-events: none
                            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease

                            &::before
                                content: ''
                                position: absolute
                                top: -6px
                                left: 50%
                                transform: translateX(-50%) rotate(45deg)
                                width: 12px
                                height: 12px
                                background: $white

                            .dropdown-inner
                                padding: 8px 

                                a
                                    display: block
                                    padding: 8px 10px
                                    color: $black
                                    font-size: 14px
                                    font-family: $SFProDisplay
                                    text-decoration: none
                                    letter-spacing: 0.5px
                                    border-radius: 5px
                                    position: relative
                                    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease


                                    &:hover
                                        background: var(--primary)
                                        color: $primary
                                        padding-left: 26px
                                        color: var(--white)

                                    

                        &:hover .dropdown
                            opacity: 1
                            pointer-events: all
                            transform: translateX(-50%) rotateX(0deg)


.enquire-pop
    right: 0
    transform: translateX(100%)
    transition: .5s ease
    background: var(--white)
    max-width: 450px
    &.is-open
        transform: translateX(0%)
    .model-body
        padding: 40px 35px 30px
        height: 100%
        overflow: hidden
        position: relative
        &::after
            content: ""
            position: absolute
            bottom: -12%
            right: -34%
            width: 100%
            height: 100%
            background-image: url(../../images/logoShpe.svg)
            background-repeat: no-repeat
            background-position: 100% 100%
            background-size: 132% auto
            opacity: 0.1
            pointer-events: none  
            @include media(1280)
            bottom: -16%
        @include scrollbar(3px,$white,#5e5e5e,8px)
        @include media(675)
            padding: 70px 20px 30px
        .title
            text-align: center
            margin-bottom: 2rem
            h4
                color: #000000
                font-size: 36px
                font-weight: 500
                line-height: 1.58
                font-family: $SFProDisplay
                text-align: center
                text-transform: uppercase

            p
                font-weight: 500
                font-size: 14px
                color: $text
                line-height: 20px
                padding: 0 40px
        
                @include media(675)
                    font-size: 14px
                    max-width: 300px
        .form
            --gaptb: 15px
            input:not(.no-focus):focus ~ label,textarea:not(.no-focus):focus ~ label
                font-family: $SFProDisplay
            label,input
                font-family: $SFProDisplay
        .btn
            font-family: $SFProDisplay
            text-transform: uppercase
            width: 120px
            margin: 35px auto
          
.enquire-pop2.model
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 999
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &::after
        display: none
    &.is-open
        transform: translateY(0%)
        bottom: 0

    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: var(--primary)
        display: flex
        align-items: center
        justify-content: center
        transition: .5s ease
        @include media(675)
            right: 0
        &:hover
            background: var(--primary)
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 100%
        max-width: 450px
        background: var(--white)
        padding: 34px
        border-radius: 10px
        @include media(675)
            max-width: 95%

        @include media(768)
            padding: 28px

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

        .title
            width: 100%
            max-width: 312px
            margin: 0 auto
            text-align: center
            font-family: $SFProDisplay
            color: var(--black)
            p
                margin-top: 5px
                color: var(--text)
                font-family: $SFProDisplay

        .close
            position: absolute
            top: 0
            right: 0
            padding: 8px
            border-radius: 50%
            cursor: pointer
            background: transparent
            border: none
            z-index: 10
            line-height: 0

            svg
                width: 20px
                height: 20px

                path
                    stroke: var(--black)
        .form
            --gaptb: 15px
            margin-top: 15px
            input:not(.no-focus):focus ~ label,textarea:not(.no-focus):focus ~ label
                font-family: $SFProDisplay
            label,input
                font-family: $SFProDisplay
        .btn
            font-family: $SFProDisplay
            text-transform: uppercase
            width: 120px
            margin: 35px auto 0    

.video-pop.model
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 999
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
        bottom: 0

    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: var(--primary)
        display: flex
        align-items: center
        justify-content: center
        transition: .5s ease
        @include media(675)
            right: 0
        &:hover
            background: var(--primary)
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 100%
        max-width: 50%
        @include media(675)
            max-width: 95%
        iframe
            width: 100%
            aspect-ratio: 1.9
            border: 2px solid $white
            background: $white

.fixed-media
    position: fixed
    bottom: 5%
    right: 5%
    z-index: 999
    display: flex
    align-items: center
    gap: 20px
    @include media(991)
      bottom: 10%
      right: 3%


    .btn
        border-radius: 50px
        color: var(--white)
        @include media(991)
            display: none
    .wts
        padding: 8px
        border-radius: 50%
        background: #25D366
        display: flex
        justify-content: center
        align-items: center
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
        transition: all 0.3s ease

        svg
            width: 24px
            display: block

            path
                fill: var(--white)
        &:hover
            background: #ebebeb


.ham-pop
    position: fixed 
    top: 0
    right: 0
    width: 100%      
    max-width: 500px
    height: 100vh    
    background-image: url(../../assets/images/vector/letter-gray.svg)
    background-repeat: no-repeat
    background-position: 100% 100%
    background-size: 85% auto
    transform: translateX(100%)
    transition: transform 0.5s ease
    z-index: 9999    
    overflow: hidden 
    @include media(540)
      max-width: 100%
      transform: translateX(100%)
      right: 0
    &.is-open
        transform: translateX(0%)
    .close
        svg
            path
                stroke: $white
                stroke-width: 2
    .model-body
        padding: 100px 45px 30px
        height: 100%
        overflow-y: auto
        @include scrollbar(3px,$white,#5e5e5e,8px)
        @include media(675)
            padding: 70px 15px 20px
        .ico
            max-width: 93px
            width: 100%
            margin-bottom: 2rem
            line-height: 0
            @include media(1366)
                max-width: 70px
            img,svg
                width: 100%
                height: auto

        .nav-list
            >li
                &:not(:last-child)
                    margin-bottom: 25px
                    @include media(1366)
                        margin-bottom: 15px
                    @include media(520)
                        font-size: 14px
                >a
                    font-size: 36px
                    color: $black
                    text-transform: uppercase
                    display: inline-block
                    font-family: $SFProDisplay
                    @include font(500)
                    @include media(1366)
                        font-size: 25px
                    @include media(675)
                        font-size: 24px
                    &:hover
                        color: $primary
        .bottom-list
            border-top: 1px solid #ccc
            margin-top: 2rem
            padding-top: 2rem
            display: flex
            align-items: center
            justify-content: space-between
            .cal-btn-ham
                color: $black
                
                @include media(520)
                    font-size: 14px
                    @include font(500)
                &:hover
                    color: $primary
            .social-icons
                a
                    display: inline-block
                    vertical-align: middle
                    &:not(:last-child)
                        margin-right: 15px
                        @include media(520)
                            margin-right: 10px
                    path
                        transition: .5s ease
                        fill: $primary



.enquire-pop2.model
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 999
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
        bottom: 0

    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: var(--primary)
        display: flex
        align-items: center
        justify-content: center
        transition: .5s ease
        @include media(675)
            right: 0
        &:hover
            background: var(--primary)
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 100%
        max-width: 450px
        background: var(--white)
        padding: 34px
        border-radius: 10px
        @include media(675)
            max-width: 95%

        @include media(768)
            padding: 28px

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

        .title
            width: 100%
            max-width: 312px
            margin: 0 auto
            text-align: center
            p
                margin-top: 5px
                color: var(--text)

        .close
            position: absolute
            top: 0
            right: 0
            padding: 8px
            border-radius: 50%
            cursor: pointer
            background: transparent
            border: none
            z-index: 10
            line-height: 0

            svg
                width: 20px
                height: 20px

                path
                    stroke: var(--black)
        .form
            --gaptb: 15px
            margin-top: 15px
            input:not(.no-focus):focus ~ label,textarea:not(.no-focus):focus ~ label
                font-family: $SFProDisplay
            label,input
                font-family: $SFProDisplay
        .btn
            font-family: $SFProDisplay
            text-transform: uppercase
            width: 120px
            margin: 35px auto 0