.contact-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width: 100%;
    height: 100%;
}


.contact-container .form {
    grid-area: 1 / 2 / 4 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    animation: form 1.5s cubic-bezier(0.25, 0.5, 0.5, 1) 0.3s forwards;
    transform: translateX(80px);
    opacity: 0;
    filter: blur(10px);
}

@keyframes form {
    to {
        transform: translate(0, 0);
        opacity: 1;
        filter: none;
    }
}

.form :nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
}

.form :nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
}

.form :nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}

.form :nth-child(4) {
    grid-area: 3 / 1 / 4 / 2;
}

.form :nth-child(5) {
    grid-area: 3 / 2 / 4 / 3;
}

.form :nth-child(6) {
    grid-area: 4 / 1 / 5 / 3;
}

.form :nth-child(7) {
    grid-area: 5 / 1 / 7 / 3;
    align-items: flex-start;
}

.form :nth-child(8) {
    grid-area: 7 / 1 / 8 / 3;
    justify-content: center;
}

.contact-container .social-contact {
    grid-area: 3 / 1 / 4 / 2;
}

.contact-container .infos {

    grid-area: 1 / 1 / 3 / 2;
}

.form div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 90%;
}

.form input,
.form textarea {
    border-radius: 10px;
    width: 100%;
    padding: 15px;
    border: none;
    background-color: rgb(255, 255, 255);
    font-size: 15px;
    color: #291C59;
    font-family: "report", sans-serif;
    height: 100%;
    transition: all .5s cubic-bezier(0.9, 0, 0.3, 1);
    resize: none;
}

.form textarea {
    height: auto;
    transition: all .5s cubic-bezier(0.9, 0, 0.3, 1);
}

.form input:focus,
.form textarea:focus {
    box-shadow: 0 5px 10px black;
    outline: none;
    transition: all .5s cubic-bezier(0.9, 0, 0.3, 1);
    overflow: visible;
}

.form textarea:focus {
    height: 130%;
    transition: all .5s cubic-bezier(0.9, 0, 0.3, 1);


}

.form textarea::placeholder,
.form input::placeholder {
    color: #291C59;
}

.contact-container .infos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: infos 1.5s cubic-bezier(0.25, 0.5, 0.5, 1) 0.3s forwards;
    transform: translateX(-80px);
    opacity: 0;
    filter: blur(10px);
}

@keyframes infos {
    to {
        transform: translate(0, 0);
        opacity: 1;
        filter: none;
    }
}

.contact-container .infos .donnees {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}


.contact-container .infos .bas p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.contact-container .social-contact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: social 1.5s cubic-bezier(0.25, 0.5, 0.5, 1) 0.7s forwards;
    transform: translateY(80px);
    opacity: 0;
    filter: blur(10px);
}

.social-contact ul {
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.social-contact li,
.social-contact li a {
    width: 50px;
    height: 50px;
    position: relative;
}




@keyframes social {
    to {
        transform: translate(0, 0);
        opacity: 1;
        filter: none;

    }
}

.confirmation.case {
    position: absolute;
    right: 25px;
    bottom: 20px;
    z-index: 100;
    animation: confi 1.5s cubic-bezier(0.25, 0.5, 0.5, 1) 0.7s forwards;
    transform: translateX(80px);
    opacity: 0;
    filter: blur(10px);
}

@keyframes confi {
    to {
        transform: translate(0, 0);
        opacity: 1;
        filter: none;
    }
}


@media (max-width:850px) {

    .contact-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        margin-top: 0;
        height: 100%;
        padding: 0 10px;
    }

    .contact-container .form {
        grid-area: 1 / 1 / 2 / 2;
        grid-column-gap: 20px;
    }

    .form input,
    .form textarea {
        padding: 8px;
        height: 85%;
    }

    .contact-container .social-contact {
        grid-area: 3 / 1 / 4 / 2;
        gap: 20px;
    }

    .contact-container .social-contact .insta.hover,
    .contact-container .social-contact .linkedin.hover {
        display: none;
    }

    .contact-container .infos {
        grid-area: 2 / 1 / 3 / 2;
        gap: 60px;
    }

    .contact-container .infos .bas p {
        gap: 10px;
        font-size: 12px !important;

    }

    .confirmation.case {
    right: 20px;
    top: 90px;
    bottom: auto;
}


}