.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* padding: 0 20px; */
    text-align: center;
    /* margin: 2rem; */
    gap: 2rem;

    a {
        -moz-transition: border-bottom-color 0.25s ease-in-out;
        -webkit-transition: border-bottom-color 0.25s ease-in-out;
        -ms-transition: border-bottom-color 0.25s ease-in-out;
        transition: border-bottom-color 0.25s ease-in-out;
        text-decoration: none;
        color: #000000;
        border-bottom: dotted 1px;
    }
}

.contact .sections {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    .left-section,
    .right-section {
        background-color: #ffffffb1;
        border-radius: 2rem;
        border: 1px solid transparent;
        padding: 1rem;
        color: #000000;
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: 300;
        letter-spacing: 0.0375em;
        line-height: 2;
    }

    .left-section {
        background-color: #ffffffb1;
        text-align: right;
        padding-right: 4rem;
        
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .icons {
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
            justify-content: right;
            font-size: 2rem;

            a {
                border-bottom: none;
            }

            .icon {
                border-radius: 999px;
                border: 1px solid transparent;
                padding: 0.5rem;

                &:hover {
                    background-color: #cfd6df;
                }
            }
        }
    }

    .right-section {
        text-align: left;

        form {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1rem;
        }

        .presentation {
            margin-bottom: 1rem;
        }

        .personal-data {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1rem 0;
        }
            
        input,
        textarea {
            padding: 1rem;
            width: 100%;
            border-radius: 0.5rem;
            border: 2px solid #e3e3e3;

            &::placeholder {
                color: #e3e3e3;
            }
        }
        .button {
            width: fit-content;
        }
        
        .actions input[type="submit"] {
            width: fit-content;
            border-radius: 0.5rem;
            border: 1px solid transparent;
            background-color: #cfd6df;
            padding: 0.75rem 1rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.6rem;
            font-weight:500;
            line-height: 2;
        
            &:hover {
                background-color: #ebf4ff;
                color: black;
            }
        }
    }
}