@import ../_common

header
    position: fixed
    top: 0
    left: 0
    right: 0
    z-index: 10
    transition: all 0.4s ease
    background: var(--white)

    &::before
        content: ""
        position: absolute
        top: 0
        left: 0
        right: 0
        height: 0
        z-index: -1
        transition: 0.4s ease
        background: var(--white)

    &.header-fixed::before,
    &.header-fill::before
        height: 100%

    &.header-fixed
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px

        .header-wrapper
            padding: 8px 0
            transition: all 0.4s ease

            .colA, .colB
                .logo
                    width: 85px
                    transition: all 0.4s ease

                    @include media(540)
                        width: 70px

                .menu-list
                    li
                        a
                            font-size: 14px
                            transition: all 0.4s ease

            .colB
                .menu-list
                    gap: 20px
                    transition: all 0.4s ease

                    @include media(1024)
                        gap: 20px

                    li
                        a
                            font-size: 14px
                            transition: all 0.4s ease

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

                    .hasDropDown
                        > a
                            svg
                                width: 10px
                                transition: all 0.4s ease

    .header-wrapper
        padding: 5px 0
        display: flex
        flex-wrap: wrap
        align-items: center
        transition: all 0.4s ease
        justify-content: space-between
        gap: 40px

        @include media(1024)
            gap: 10px

        @include media(991)
            flex-direction: row
            gap: 20px

        @include media(540)
            gap: 15px
            padding: 5px 0

        .colA, .colB
            display: flex
            align-items: center
            gap: 60px
            transition: all 0.4s ease

            @include media(1366)
                gap: 60px

            @include media(1024)
                gap: 30px

            @include media(991)
                gap: 20px

            .logo
                width: 125px
                transition: all 0.4s ease
                flex-shrink: 0

                @include media(540)
                    width: 85px
                img
                    transition: all 0.4s ease

            a
                display: block

                img
                    width: 100%
                    height: auto
                    display: block
                    transition: all 0.4s ease

            .menu-list
                display: flex
                align-items: center
                gap: 25px

                @include media(991)
                    display: none

                li
                    display: flex
                    justify-content: center
                    flex-direction: column
                    align-items: center
                    gap: 8px
                    position: relative

                    a:not(.btn)
                        color: $black
                        text-transform: capitalize
                        font-size: 14px
                        font-weight: 400
                        transition: all 0.4s ease
                        text-decoration: none
                        position: relative

                    &.hasDropDown
                        > a
                            display: flex
                            align-items: center
                            gap: 6px

                            svg
                                width: 12px
                                height: 12px
                                flex-shrink: 0
                                transition: transform 0.3s ease

                        .dropdown-menu
                            display: block
                            position: absolute
                            top: calc(100% + 14px)
                            left: 50%
                            transform: translateX(-50%) translateY(-10px)
                            opacity: 0
                            visibility: hidden
                            pointer-events: none
                            min-width: 200px
                            background: var(--white)
                            border-radius: 8px
                            box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12)
                            padding: 14px
                            z-index: 100
                            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease

                            &::before
                                content: ""
                                position: absolute
                                top: -6px
                                left: 50%
                                transform: translateX(-50%)
                                border-width: 0 6px 6px 6px
                                border-style: solid
                                border-color: transparent transparent var(--white) transparent

                            li
                                width: 100%
                                text-align: left

                                a
                                    display: block
                                    padding: 10px 20px
                                    font-size: 14px
                                    color: $black
                                    white-space: nowrap
                                    text-align: left
                                    transition: background 0.2s ease, padding-left 0.2s ease
                                    width: 100%
                                    border-radius: 5px

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

                        &:hover
                            > a
                                svg
                                    transform: rotate(180deg)

                            .dropdown-menu
                                opacity: 1
                                visibility: visible
                                pointer-events: auto
                                transform: translateX(-50%) translateY(-8px)
                
.ham-pop
  position: fixed
  top: 0
  right: 0
  width: 100%
  max-width: 500px
  height: 100vh
  transform: translateX(100%)
  transition: transform 0.5s ease
  z-index: 999999
  overflow: hidden
  background-color: #fff

  &::after
    content: ""
    position: absolute
    bottom: 0
    right: 0
    width: 340px
    height: 340px
    background-image: url(../../images/logo-bg.svg)
    background-repeat: no-repeat
    background-position: 100% 100%
    background-size: contain
    filter: brightness(0) invert(0)
    opacity: 0.1
    pointer-events: none

    @include media(1366)
      width: 200px
      height: 200px

  &.is-open
    transform: translateX(0%)

    .model-body
      .nav-list

        margin-bottom: 14px


        > li
          animation: fadeSlideIn 0.6s ease forwards
          opacity: 0
          transform: translateY(20px)

          @for $i from 1 through 10
            &:nth-child(#{$i})
              animation-delay: 0.15s * $i

    .nav-list
      > li
        &:not(:last-child)
          margin-bottom: 15px

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

          @include media(675)
            margin-bottom: 6px

        &.desktop-non
          display: none

          @include media(991)
            display: block

        &.hasDropdown
          position: relative

          .plu-ico
            position: absolute
            right: 0
            top: 4px
            --sizeplu: 20px
            height: var(--sizeplu)
            width: var(--sizeplu)
            cursor: pointer

            @include media(675)
              --sizeplu: 14px

            &::before
              content: ""
              position: absolute
              top: 50%
              translate: 0 -50%
              left: 0
              right: 0
              height: 2px
              width: 100%
              background: var(--secondary)
              transition: 0.5s ease
              transform: rotate(90deg)

            &::after
              content: ""
              position: absolute
              top: 50%
              translate: 0 -50%
              left: 0
              right: 0
              height: 2px
              width: 100%
              background: var(--secondary)
              transition: 0.5s ease

            &.active
              &::before
                transform: rotate(0deg)
                opacity: 0

          .dropdown-menu-ham
            display: none
            padding-top: 8px

            ul
              max-height: 110px
              overflow-y: auto
              @include scrollbar(4px, #fff, #1BB6F0, 4px)

              li
                padding: 4px 0

                a
                  font-size: 15px
                  color: #000

                  &:hover
                    color: var(--text)

        > a
          font-size: 28px
          line-height: 1.06
          color: $black
          display: inline-block
          transition: 0.5s ease
          font-family: $Poppins
          text-transform: uppercase
          @include font(500)

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

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


          &:hover
            color:var(--secondary)

  .close
    path
      stroke: $white
      stroke-width: 2 !important

  .model-body
    padding: 90px 40px 30px
    height: 100%
    overflow: hidden
    display: flex
    flex-direction: column
    position: relative
    @include scrollbar(6px, $white, #5e5e5e, 8px)

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

    .logo
      margin-bottom: 20px
      filter: contrast(0.5)

      img
        max-width: 40%

    .ico
      max-width: 70px
      margin-bottom: 55px
      line-height: 0

      img,
      svg
        width: 100%
        height: auto

    .mid-list
      display: flex
      flex-direction: column
      gap: 10px

      .nav-list
        padding-bottom: 12px

        > li
          &:not(:last-child)
            margin-bottom: 15px

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

          > a
            font-size: 28px
            line-height: 1.06
            color: $secondary
            display: inline-block
            transition: 0.5s ease
            font-family: $Poppins
            text-transform: uppercase
            @include font(500)

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

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

            &:hover
              color: #414141
              transform: translateX(5px)

          &.hasDropdown
            position: relative
            cursor: pointer

            .plu-ico
              position: absolute
              right: 0
              top: 4px
              --sizeplu: 22px
              height: var(--sizeplu)
              width: var(--sizeplu)
              cursor: pointer

              &::before,
              &::after
                content: ''
                position: absolute
                top: 50%
                translate: 0 -50%
                left: 0
                right: 0
                height: 2px
                width: 100%
                background: $black
                transition: .5s ease

              &::before
                transform: rotate(90deg)

              &.active
                &::before
                  transform: rotate(0deg)
                  opacity: 0

          .dropdown-menu-ham
            display: none
            border-top: 1px solid #ccc
            border-right: none
            border-left: none
            margin: 12px 0 0
            padding: 15px 0 0

            li

            &:not(:last-child)

            a
              color: $text

              &:hover
                color: $black

      li
        a
          font-size: 28px
          line-height: 1.06
          color: $black
          display: inline-block
          transition: 0.5s ease
          font-family: $Poppins
          text-transform: uppercase
          @include font(500)

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

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

          &:hover
            color: #414141
            transform: translateX(5px)

          &:hover
            color: $secondary
            transform: translateX(5px)

    .bottom-list
      border-top: 1px solid #cacaca
      margin-top: 3rem
      padding: 20px 0
      display: flex
      align-items: center
      gap: 1rem

      .social-icons
        display: flex
        justify-content: center
        align-items: center
        gap: 20px

        a
          svg
            path
              fill: var(--secondary)
              transition: all 0.2s ease-in-out

          &:hover
            path
              fill: var(--secondary)


@keyframes fadeSlideIn
  from
    opacity: 0
    transform: translateY(20px)
  to
    opacity: 1
    transform: translateY(0)


.alert-pop
    position: fixed
    left: 50%
    top: 100%
    transform: translateX(-50%)
    transition: .5s ease
    background: var(--white)
    width: 90%
    max-width: 950px
    height: fit-content
    border-radius: 10px
    overflow: hidden
    z-index: 999

    @include media(768)
        max-width: 92%

    @include media(540)
        width: 95%
        max-height: calc(100dvh - 40px)
        overflow-y: auto
        border-radius: 16px

    &::after
        content: ""
        position: absolute
        bottom: -90px
        left: -70px
        width: 100%
        height: 100%
        background-image: url(../../icon/favicon.png)
        background-repeat: no-repeat
        background-position: left bottom
        opacity: 0.1
        z-index: -1
        background-size: 294px

        @include media(768)
            display: none

    .model-body
        padding: 34px

        @include media(768)
            padding: 28px

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

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

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

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

            @include media(540)
                gap: 16px

            .item-content
                @include media(768)
                    order: 1

                h4
                    font-weight: 400
                    color: var(--black)
                    width: 100%
                    max-width: 425px
                    line-height: 1.35

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

                    @include media(540)
                        max-width: 100%
                        font-size: 22px

                    strong
                        font-weight: 700

                        span
                            font-size: inherit
                            color: var(--primary)
                            font-weight: inherit

                p
                    margin: 12px 0 32px

                    @include media(768)
                        margin: 14px 0 24px

                    @include media(540)
                        margin: 10px 0 20px
                        font-size: 13px
                        line-height: 1.5

                .input-wrap
                    display: flex
                    align-items: center
                    background: #f1f3f5
                    border-radius: 12px
                    padding: 6px 10px 6px 6px
                    width: 100%
                    gap: 5px

                    @include media(540)
                        flex-direction: column
                        padding: 8px
                        gap: 8px
                        border-radius: 14px

                    input
                        flex: 1
                        width: 100%
                        border: none
                        background: transparent
                        // padding: 14px 16px
                        font-size: 14px
                        outline: none
                        color: #333
                        font-family: $Poppins

                        @include media(540)
                            padding: 10px 12px
                            font-size: 13px
                            width: 100%

                        &::placeholder
                            color: #9aa0a6

                    .btn-submit
                        border: none
                        background: var(--primary)
                        color: white
                        padding: 12px
                        border-radius: 10px
                        font-size: 14px
                        font-weight: 600
                        cursor: pointer
                        transition: .25s
                        font-family: $Poppins
                        white-space: nowrap
                        display: block

                        @include media(540)
                            width: 100%
                            padding: 13px
                            border-radius: 10px
                            font-size: 14px

            .item-img
                height: 480px
                border-radius: 5px
                overflow: hidden

                @include media(768)
                    height: 260px
                    order: 0

                @include media(540)
                    height: 200px
                    border-radius: 10px

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

    &.is-open
        top: 50%
        transform: translate(-50%, -50%)

.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: $Poppins
                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
            .btn
                margin: 0 auto
                transform: translateY(20px)
            .form-group
                    position: relative 
                    
                    &::before
                        content: ''
                        position: absolute
                        bottom: 0
                        left: 0
                        right: 0
                        height: var(--borderwidth)
                        background: #666

                    &.active
                        &::before
                           background: var(--primary)
                    
                    &::after
                        content: ''
                        position: absolute
                        bottom: 0
                        left: 0
                        right: 0
                        height: var(--borderwidth)
                        background: red
                        width: 0
                        transition: .5s ease

                        

                    input, textarea
                        color: #000
                        font-family: $Poppins

                    label
                        color: #666
                        font-family: $Poppins

                    &:focus,
                    &.valid
                        outline: none
                        & ~ label
                            color: var(--black)

                        

                    .custom-select
                        .current
                            color: #666
                        &::before
                            filter: brightness(0)

                    &.active
                        .custom-select
                            .current
                                color: #000

                        .label
                            color: var(--black)
    
          
.fixed-media
    position: fixed
    bottom: 5%
    right: 5%
    z-index: 2
    display: flex
    align-items: center
    gap: 20px
    @include media(768)
        display: none
    .wts
        padding: 8px
        border-radius: 50%
        background: #0fa144
        color: var(--white)
        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-in-out

        svg
            width: 22px
            display: block
            path
                fill: var(--white)


    .btn-primary
        display: block
        border-radius: 50px
        font-size: 14px
        font-weight: 600
        transition: all 0.3s ease-in-out
        

.video-pop
    left: 0
    right: 0
    background: #0000007a
    z-index: 12
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: $secondary
        display: flex
        align-items: center
        justify-content: center
        @include media(675)
            right: 0
        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




.footer-strip
    position: fixed
    bottom: 0
    left: 0
    right: 0
    z-index: 10 
    background: $white
    display: none

    @include media(991)
        display: block

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

        li
            flex: 1

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

            a
                display: flex
                flex-direction: column
                align-items: center
                justify-content: center
                gap: 6px
                padding: 8px 5px
                height: var(--footerstrip)
                text-decoration: none
                text-transform: uppercase
                font-size: 12px
                font-weight: 600
                letter-spacing: 0.5px
                color: $primary

                span
                    line-height: 1
                    text-align: center
                    text-transform: capitalize
                    @include media(375)
                        font-size: 12px

                svg
                    width: 20px
                    height: 20px
                    @include media(375)
                        width: 15px
                        height: 15px

                    path
                        fill: currentColor
                        stroke: currentColor