@import '../_var.sass'

footer
  background: linear-gradient(90deg, #1D34AC 10%, #4459C5 100%)
  padding: 45px 0
  @include respond-to(screen-991)
     margin-bottom: 65px
  .footer-wrap
    display: flex
    align-items: stretch
    min-height: 120px

    .container
      display: flex
      align-items: stretch


    .footer-left
      display: flex
      align-items: center
      gap: 40px
      flex: 1.2

      @include respond-to(screen-768)
        flex-direction: column
        gap: 24px
        padding: 24px 20px

      @include respond-to(screen-540)
        padding: 20px 16px

      .colC
        width: 100%
        max-width: 275px
        @include respond-to(screen-991)
           max-width: 100%

     
        h5
          color: #fff
          font-weight: 600
          padding-bottom: 16px
          font-size: 20px

        .form
          --theme: #fff
          --color: #fff
          display: flex
          flex-direction: column
          gap: 10px

          .form-group
            position: relative

            input
              background: transparent
              border: none
              border-bottom: 1px solid #fff
              color: #fff
              padding: 6px 0
              font-size: 14px
              width: 100%
              outline: none

              &::placeholder
                color: transparent

            label
              position: absolute
              left: 0
              top: 6px
              color: #ffffffb2
              font-size: 14px
              pointer-events: none
              transition: 0.3s ease

          .theme-btn
            @include regularBtn(6px 15px)
            align-self: flex-start
            margin-top: 6px

      .colD
        width: 100%
        max-width: 300px
        @include respond-to(screen-540)
            max-width: 100%
        h5
          color: #fff
          font-weight: 600
          padding-bottom: 16px
          font-size: 20px

        a
          &:not(.theme-btn)
            display: block
            font-size: 13px
            color: #ffffffb2
            line-height: 1.5
            margin-bottom: 8px

          &.theme-btn
            @include regularBtn(6px 15px)
            margin-top: 10px
            display: inline-block

        

    .footer-right
      display: flex
      flex-direction: column
      justify-content: center
      gap: 40px
      flex: 1
      border-left: none

      @include respond-to(screen-768)
        padding: 20px 16px

      @include respond-to(screen-540)
        flex-direction: column
        padding: 16px

      .colA
        display: flex
        align-items: center
        gap: 18px
        flex-wrap: wrap
        justify-content: flex-end

        @include respond-to(screen-991)
          gap: 12px
      
        

        .contact
          display: flex
          align-items: center
          gap: 8px


          &:not(:last-child)
            padding-right: 20px
            border-right: 1px solid #D0CFCF

            @include respond-to(screen-540)
              border-right: none
              padding-right: 0

          svg
            path
                fill: var(--white)

          .contact-details
            h6
              color: #fff
              font-size: 16px
              font-weight: 600
              margin-bottom: 2px
              line-height: 1.2

            a
              color: #fff
              font-size: 14px
              opacity: 0.7

              &:hover
                  opacity: 1 !important
                  color: var(--white)

              @include respond-to(screen-1024)
                font-size: 12px

      .colB
        display: flex
        gap: 40px
        justify-content: flex-end
        
        @include respond-to(screen-540)
          flex-direction: column

        .theme-btn
            @include regularBtn(6px 15px)
            align-self: flex-start
            margin-top: 6px

        .social-icons

          ul
            display: flex
            align-items: center
            gap: 8px
            list-style: none
            padding: 0
            margin: 0

            li
              img
                width: 22px
                height: 22px
        ul
          display: flex
          align-items: center
          gap: 10px
          list-style: none
          padding: 0
          margin: 0
          flex-wrap: wrap

          li
            
            &.hasDropdown
              @include hasDropdown(4%)
              position: relative

              &::before
                filter: brightness(0) invert(1)
              &:hover
                  &::before
                     filter: brightness(1) 

              &:hover
                &::before
                  transform: rotate(180deg)
                  transition: 0.5s ease
                .dropdown-menu
                  opacity: 1
                  transform: scale3d(1, 1, 1)
              .pay-fee
                  background: var(--white)

              .btn2
                border-color: var(--white)
                color: var(--white)

                &:hover
                    color: var(--black)
                    &::before,
                    &::after
                        background-color: var(--white)

              a
                padding: 6px 30px 6px 10px
                color: #000
                border-color: #000
                transition: 0.3s ease
                @include hover
                &::after
                  border-radius: 25px
                &::before
                  border-radius: 25px

              .dropdown-menu
                --triangle: 10px
                position: absolute
                bottom: calc(100% + var(--triangle))
                top: auto
                left: 50%
                translate: -50% 0
                transform: perspective(2000px) translate3d(0px, 0px, 50px) rotateX(90deg) scale3d(0.86, 0.75, 1)
                transform-origin: bottom
                transition: 0.4s ease
                opacity: 0
                min-width: 185px
                z-index: 6

                &::before
                  content: ""
                  display: block
                  position: absolute
                  top: calc(100% - var(--triangle) / 2)
                  left: 50%
                  translate: -50% 0
                  width: var(--triangle)
                  height: var(--triangle)
                  background: #fff
                  transform: rotate(45deg)
                  z-index: -1

                ul
                  display: block
                  background: #fff
                  padding: 12px 10px
                  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px
                  border-radius: 5px
                  text-align: left
                  white-space: nowrap

                  li
                    display: block
                    padding: 0

                    &:not(:last-child)
                      margin-bottom: 2px

                    a
                      font-size: 13px
                      display: block
                      color: #000
                      padding: 5px
                      border-radius: 5px
                      @include hover
                      &:hover
                        color: #fff

  // RESPONSIVE - stack vertically on mobile
  @include respond-to(screen-675)
    .footer-wrap
      .container
        flex-direction: column

      .footer-left
        flex-direction: column

      .footer-right
        .colA
          flex-direction: column
          align-items: flex-start

          .contact
            border-right: none !important
            padding-right: 0 !important