@import '../_common'
footer
  background: var(--primary)
  padding: 50px 0 30px
  @include media(768)
    margin-bottom: 63px
    padding: 30px 0 

  .footer-grid
    display: grid
    grid-template-columns: repeat(4, 1fr)
    // gap: 20px
    padding-bottom: 60px
    @include media(768)
       grid-template-columns: repeat(2, 1fr)
       gap: 35px
    @include media(420)
       grid-template-columns: 1fr

    .footer-column
      p
        color: var(--white)
        font-size: 16px
        margin-bottom: 18px
        font-weight: 600

      a, span
        color: var(--white)
        font-size: 14px
        margin: 0 0 4px
        display: block
        opacity: 0.7

      &.logo
        img
          max-width: 150px
          height: auto
          filter: brightness(0) invert(1)

      &.contact
        .address
          a
            display: flex
            align-items: center
            gap: 20px
            margin-bottom: 20px
            @include media(768)
              gap: 12px

            svg
              flex-shrink: 0
              width: 34px
              height: 34px
              @include media(768)
                width: 24px
                height: 24px
              path
                stroke: var(--white)
                opacity: 1
            span
              display: inline
              opacity: 0.8
              color: var(--white)
              margin: 0
        .be_partner
             display: flex
             align-items: center
             justify-content: flex-start
             margin-top: 35px

             .btn-white
                display: flex
                align-items: center
                width: auto
                opacity: 1
                color: var(--primary)
                margin: 0

                &:hover
                    background: #e0e0e0
.prettify
        display: flex
        justify-content: space-between
        width: 100%
        padding-top: 25px
        border-top: 1px solid rgba(255, 255, 255, 0.31)
        @include media(420)
          flex-direction: column
          gap: 15px
        .left
            display: flex
            width: 70%
            gap: 14px
            @include media(420)
              width: 100%
              justify-content: center
          
            p
                color: var(--white)
                font-size: 14px
                opacity: 0.7
            img
                width: 60px

        .right
            @include media(420)
              margin: 0 auto
            a
                padding-left: 8px
                display: inline-block
                @include media(420)
                    margin: 0 auto
                svg
                    path
                        fill: var(--white)