.contact {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 1rem;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        background: url("../images/contactBG.jpg") center center/cover no-repeat;
        left: 0;
        width: 100%;
        height: 100%;
        filter: brightness(0.3);
        z-index: -1;
    }

    h2 {
        font-size: 5dvw;
        transition: all .3s ease-in-out;
        background: url("../images/text-bg2.png") center;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        position: relative;
        filter: hue-rotate(0deg);

        &::after {
            content: "Get in Touch";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../images/text-bg2.png") center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(.5rem) brightness(1.5);
            z-index: -1;
        }
        @media (max-width: 1080px) and (orientation: portrait) {
            font-size: 7dvw;
        }
    }

    p {
        font-size: 1.5dvw;
        transition: all .3s ease-in-out;
        z-index: 1;
        position: relative;
        &::after {
            content: "Interested in a commission, art piece, a chat with another fellow artist, or just want to say hello? I'm always open to discussing new projects, artistic opportunities, or experimental collaborations.";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../images/text-bg2.png") center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(.5rem) brightness(1.5);
            z-index: -1;
        }
        @media (max-width: 1080px) and (orientation: portrait) {
            font-size: 4dvw;
        }
    }
}

.contactContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    width: 90%;
    margin: 0 auto;

    @media (max-width: 1080px) and (orientation: portrait) {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
}

.contactContainerText {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (max-width: 1080px) and (orientation: portrait) {
        width: 100%;
    }
}

.contactFormContainer {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media (max-width: 1080px) and (orientation: portrait) {
        width: 100%;
    }
}



.socialButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 5dvw;
    height: 5dvw;
    aspect-ratio: 1/1;
    padding: 0;
    
    background: url("../images/button-bg.png") center center/cover no-repeat;
    border: none;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    transition: transform 0.3s ease, background 0.3s ease, z-index 0s;
    position: relative; 
    mix-blend-mode: difference;
    &.is-orbiting {
        animation: orbit 5s linear infinite;
        pointer-events: none;
        
    }

    &.is-orbiting svg {
        animation: counter-orbit 5s linear infinite;
    }

    svg {
        width: 50%;
        height: auto;
        fill: black;
        filter: drop-shadow(0 0 .5rem black); 
    }
    
    &:hover {
        filter: brightness(1.2);
        transform: scale(2);
        z-index: 10; 
        
       &::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: url("../images/button-bg.png") center center/cover no-repeat;
        z-index: -1;
        }
    } 
    &:first-child {
        margin-left: 4dvw;
    }
    &:last-child {
        margin-bottom: 2dvw;
    }
    @media (max-width: 1080px) and (orientation: portrait) {
        width: 15dvw;
        height: 15dvw;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.socialLinks {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}