@import "../_common"


.contact-secA
    height: calc(70vh - 80px)
    overflow: hidden
  
    @include media(1366)
        height: calc(100vh - 80px)
    @include media(991)
        height: auto
        overflow: visible

    .grid
        display: grid
        grid-template-columns: repeat(2, 1fr)
        gap: 20px
        height: 100%
        @include media(991)
            grid-template-columns: 1fr
            gap: 0
            height: auto

        .address
            background: linear-gradient(270deg, #ED1C24 0%, #871015 100%)
            padding: 4rem 3rem
            position: relative
            overflow: hidden
            display: flex
            flex-direction: column
            @include media(1024)
                padding: 3rem 2.5rem
            @include media(768)
                padding: 2.5rem 2rem
            @include media(540)
                padding: 2rem 1.5rem

            &::after
                content: ''
                position: absolute
                bottom: 0
                right: 0
                background: url("../../vector/bg-arrow.svg")
                width: 100%
                height: 100%
                background-size: 230px
                background-position: right bottom
                background-repeat: no-repeat
                @include media(540)
                    background-size: 160px

            .heading
                margin-bottom: 2.5rem
                @include media(768)
                    margin-bottom: 2rem
                @include media(540)
                    margin-bottom: 1.5rem

                h2
                    margin: 0
                    text-align: left
                    font-size: 32px
                    color: var(--white)
                    font-weight: 700
                    @include media(768)
                        font-size: 26px
                    @include media(540)
                        font-size: 22px

                p
                    font-size: 16px
                    color: rgba(255, 255, 255, 0.7)
                    font-weight: 400
                    margin: 12px 0 0
                    text-align: left
                    @include media(540)
                        font-size: 14px

            ul
                list-style: none
                padding: 0
                margin: 0
                display: flex
                flex-direction: column
                gap: 2rem
                position: relative
                z-index: 1
                width: 100%
                max-width: 400px
                @include media(991)
                    max-width: 100%
                @include media(768)
                    gap: 1.5rem
                @include media(540)
                    gap: 1.25rem

                li
                    display: flex
                    align-items: flex-start
                    gap: 18px
                    @include media(540)
                        gap: 14px

                    > img
                        width: 25px
                        height: 25px
                        margin-top: 2px
                        flex-shrink: 0
                        filter: brightness(0) invert(1)
                        @include media(540)
                            width: 20px
                            height: 20px

                    .content
                        display: flex
                        flex-direction: column
                        gap: 4px

                        p
                            margin: 0
                            font-size: 18px
                            font-weight: 600
                            color: var(--white)
                            letter-spacing: 1px
                            @include media(768)
                                font-size: 16px
                            @include media(540)
                                font-size: 15px

                        .dir
                            color: var(--white)
                            font-weight: 500
                            opacity: 1

                        span
                            color: rgba(255, 255, 255, 0.9)
                            line-height: 1.6
                            display: block

                        a
                            color: rgba(255, 255, 255, 0.7)
                            text-decoration: none
                            display: inline-flex
                            align-items: center
                            font-weight: 400
                            gap: 8px
                            transition: color 0.3s ease

                            &:hover
                                color: #ffffff

                            img
                                width: 16px
                                height: 16px
                                filter: brightness(0) invert(1)
                                @include media(540)
                                    width: 14px
                                    height: 14px

                        a:first-of-type
                            margin-top: 8px
                            letter-spacing: 0.3px

        .form-wrapper
            padding: 4rem 5rem
            @include media(1366)
                padding: 3.5rem 4rem
            @include media(1024)
                padding: 3rem 3rem
            @include media(991)
                padding: 3rem 2.5rem
            @include media(768)
                padding: 2.5rem 2rem
            @include media(540)
                padding: 2rem 1.5rem

            h2
                width: 100%
                max-width: 425px
                margin: 0 auto
                text-align: center
                @include media(540)
                    max-width: 310px

            .form-grid
                display: grid
                grid-template-columns: repeat(2, 1fr)
                padding: 50px 0 0
                margin: 0 auto
                position: relative
                gap: 20px
                @include media(991)
                    padding: 40px 0 0
                @include media(768)
                    width: 100%
                    padding: 30px 0 0
                    gap: 18px
                @include media(540)
                    width: 100%
                    grid-template-columns: 1fr
                    padding-top: 20px
                    gap: 14px

                .form-group
                    position: relative
                    @include media(540)
                        grid-column: 1 / span 1

                    &:nth-last-of-type(1)
                        grid-column: 1 / span 2
                        @include media(540)
                            grid-column: 1 / span 1

                    &::before
                        content: ''
                        position: absolute
                        bottom: 0
                        left: 0
                        right: 0
                        height: var(--borderwidth)
                        background: var(--black)

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

                    input, textarea, select
                        width: 100%
                        background: transparent
                        border: none
                        outline: none
                        padding: 15px 0 8px
                        color: var(--black)
                        font-family: $SFProDisplay
                        @include media(768)
                            font-size: 14px
                        @include media(540)
                            font-size: 13px

                    textarea
                        min-height: 80px
                        resize: none
                        @include media(540)
                            min-height: 70px

                    label
                        position: absolute
                        left: 0
                        bottom: 8px
                        color: var(--black)
                        font-family: $SFProDisplay
                        pointer-events: none
                        transition: all 0.3s ease
                        @include media(768)
                            font-size: 14px
                        @include media(540)
                            font-size: 13px

                    &:focus-within,
                    &.valid
                        label
                            bottom: 100%
                            font-size: 12px
                            color: var(--black)
                            top: -10px
                            @include media(768)
                                font-size: 11px
                            @include media(540)
                                font-size: 10px

                .btn
                    grid-column: 1 / span 2
                    justify-self: center
                    margin: 30px auto 0
                    cursor: pointer
                    position: relative
                    font-family: $SFProDisplay
                    @include media(768)
                        margin-top: 20px
                        padding: 12px 30px
                        font-size: 14px
                    @include media(540)
                        grid-column: 1 / span 1
                        width: 100%
                        margin-top: 15px
                        padding: 10px 25px
                        font-size: 13px


.map
    iframe
        width: 100%
        height: 850px
        border: none
        display: block
        filter: grayscale(100%) contrast(110%) brightness(90%)
        transition: filter 0.3s ease
        @include media(1366)
            height: 650px
        @include media(991)
            height: 550px
        @include media(768)
            height: 450px
        @include media(540)
            height: 300px

        &:hover
            filter: grayscale(0%)