.contact-page .description {

    margin-bottom: 40px;

    width: calc((var(--container--width) - 30px) / 2);

}



.contact-page .description p {

    margin: 0;

}









.contact-page .form {

    background-color: var(--color--bright-gray);

    box-sizing: border-box;

    display: grid;

    grid-column-gap: 30px;

    grid-template-columns: repeat(2, 1fr);

    margin: 0 0 64px calc(-1 * ((var(--viewport--width) - var(--container--width)) / 2));

    padding: 64px calc((var(--viewport--width) - var(--container--width)) / 2);

    position: relative;

    width: var(--viewport--width);

}



.contact-page form {

    background-color: var(--color--white);

    border-radius: 20px;

    padding: 32px 24px;

}



.contact-page form[_submited]::after {

    transform: scale(1);

}



.contact-page form::after {

    background-color: var(--color--white-transparent-72);

    bottom: 0;

    content: "";

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    transform: scale(0);

}



.contact-page .field {

    margin-bottom: 44px;

}



.contact-page .checkbox {

    margin-bottom: 28px;

}



.contact-page .note {

    margin-bottom: 48px;

}



.contact-page .button-wrapper {

    display: flex;

    justify-content: center;

}









.contact-page .info {

    display: grid;

    grid-column-gap: 30px;

    grid-template-columns: repeat(2, 1fr);

    margin-bottom: 64px;

}



.contact-page .info .icon {

    align-items: center;

    border-radius: 50%;

    color: var(--color--white);

    display: flex;

    height: 80px;

    justify-content: center;

    width: 80px;

}



.contact-page .info p:first-child {

    margin-top: 0;

}



.contact-page .info p:last-child {

    margin-bottom: 0;

}



.contact-page .info p:not(:last-child) {

    margin-bottom: 56px;

}



.contact-page .info p {

    display: grid;

    grid-column-gap: 30px;

    grid-template-columns: 80px auto;

}



.contact-page .info .align-center {

    align-items: center;

}



.contact-page .info .align-top {

    padding-top: 4px;

}



.contact-page .info .align-top .text > span {

    display: block;

    margin-bottom: 28px;

}



.contact-page .info .align-top .item:nth-child(2) > span {

    display: block;

}



.contact-page .info p:not(:nth-child(4)) .icon {

    background-image: linear-gradient(200deg, var(--color--slate-blue) 0%, var(--color--dodger-blue) 50%, var(--color--new-car) 100%);

}



.contact-page .info p:nth-child(4) {

    color: var(--color--islamic-green);

    font-size: 30px;

    font-weight: 500;

}



.contact-page .info p:nth-child(4) .icon {

    background-color: var(--color--islamic-green);

}



.contact-page .info .data {

    display: block;

}



.contact-page .info .bold {

    font-weight: 500;

}



.contact-page .footer:not(:last-child) {

    margin-bottom: 44px;

}



.contact-page .message {

    border: 2px solid;

    border-radius: 8px;

    margin: 0;

    padding: 8px 72px 7px;

    position: relative;

    text-align: center;

    z-index: 1;

}



.contact-page .message.success {

    border-color: var(--color--islamic-green);

}



.contact-page .message.error {

    border-color: var(--color--old-sliver);

}