@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300..700&display=swap');
body{
    background: linear-gradient(-135deg,
            #ffffff 0%,
            #fffbff 30%,
            #f4e6ff 100%);
}
.contact-me {
    display: flex;
    width: 100%;
    max-width: 1570px;
    margin: 0 auto;
    padding: 0 0 60px 0;
    position: relative;
    min-height: calc(100svh - 0px - 83px);
}

.contact-me>* {
    flex: 1 0 0;
}

.contact__left {
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;

    img {
        width: 100%;
        /* height: 100%; */
        object-fit: cover;
        border-radius: 50%;
        max-width: 330px;
        aspect-ratio: 1/1;
        flex-shrink: 0;
        border: 5px solid pink;
        padding: 5px;
    }

    h1 {
        margin-top: 20px;
        font-size: 44px;
        color: #333;
        font-weight: bolder;
        text-align: center;
        /* font-family: Lemonada; */
        /* text-shadow:
            -2px -2px 1px #fff,
            2px 2px 1px #fcb0ff9d,
            0 0 10px #0000001a; */
    }
}

.contact__right {
    flex-basis: 60%;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;

    .contact__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        margin-bottom: auto;

        img {
            /* width: 100%; */
            height: 100%;
            object-fit: cover;
            /* max-width: 150px;
            max-height: 46px; */
        }

        .contact__head__socials {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            border: 3px solid #333;
            border-radius: 15px;
            height: 100%;
            padding: 10px;
            background-color: #ffffff1a;

            .footer__items__social__link {
                display: flex;
                justify-content: center;
                align-items: center;
                aspect-ratio: 1/1;
                background-color: unset;

                i {
                    font-size: 26px;
                    color: #333;
                }
            }
        }
    }

    h1 {
        font-size: 44px;
        margin-bottom: 30px;
        text-align: center;
        /* font-family: Lemonada; */
        color: #333;
    }

    p {
        text-align: justify;
        text-align-last: center;
        margin-bottom: 30px;
    }

    .contact__infor {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: auto;

        .contact__infor__item {
            margin: 5px 0;
            display: flex;
            align-items: center;

            i{
                width: 30px;
                aspect-ratio: 1/1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                color: #ff00ff2a;
                margin-top: -4px;
            }
        }
    }
}

.more-infor {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 10px 0;

    .col:first-child {
        flex: 1 0 40%;
        display: inherit;
        justify-content: center;
    }

    .col:last-child {
        flex: 1 0 60%;
        display: inherit;
        justify-content: center;
    }
}