.contact-form {
    position: relative
}

.contact-form--container {
    display: flex;
    flex-direction: column;
    gap: 56px
}

@media screen and (min-width: 1024px) {
    .contact-form--container {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(56px, 9.72vw, 140px)
    }
}

.contact-form--content {
    padding: 40px 16px 0 16px
}

@media screen and (min-width: 1280px) {
    .contact-form--content {
        padding: 80px 0 0 80px
    }
}

.contact-form--title {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--grey)
}

.contact-form--title .card-contact {
    display: flex;
    gap: 24px;
    align-items: center
}

.contact-form--title img {
    height: 96px;
    width: 96px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%
}

.contact-form--title .name {
    color: var(--dark-green);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 4px
}

@media screen and (min-width: 768px) {
    .contact-form--title p {
        max-width: 300px
    }
}

.contact-form--aside {
    background: var(--beige);
    padding: 56px 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 0
}

@media screen and (min-width: 1024px) {
    .contact-form--aside {
        flex-shrink: 0;
        width: 500px;
        padding: 80px 64px 250px
    }
}

.contact-form--aside::before {
    content: '';
    width: 176px;
    height: 290px;
    background: var(--white);
    -webkit-mask: url("../images/aside-pattern.svg") no-repeat top right;
    mask: url("../images/aside-pattern.svg") no-repeat top right;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1
}

@media screen and (min-width: 1024px) {
    .contact-form--aside::before {
        width: 196px;
        height: 280px
    }
}

.contact-form--aside img {
    width: 100%;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 768px) {
    .contact-form--aside img {
        height: 250px
    }
}

@media screen and (min-width: 1024px) {
    .contact-form--aside img {
        height: 200px
    }
}

.contact-form--aside .address {
    display: flex;
    gap: 16px;
    margin-top: 16px
}

.contact-form--aside .address::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--light-green);
    -webkit-mask: url("../images/location.svg") no-repeat center;
    mask: url("../images/location.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.contact-form--aside .address p {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.56px
}

.contact-form--aside .social span {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.64px
}

.contact-form--aside .social div {
    display: flex;
    align-items: center;
    gap: 32px
}

.contact-form--aside .social div a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 72px;
    width: 72px;
    background: var(--white);
    border-radius: 50%;
    transition: background .4s ease
}

.contact-form--aside .social div a:hover {
    background: var(--light-green)
}

.contact-form--aside .social div a::before {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--dark-green)
}

.contact-form--aside .social div a.lk::before {
    -webkit-mask: url("../images/lk.svg") no-repeat center;
    mask: url("../images/lk.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.contact-form--aside .social div a.ig::before {
    -webkit-mask: url("../images/ig.svg") no-repeat center;
    mask: url("../images/ig.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.contact-form--aside .social div a.fb::before {
    -webkit-mask: url("../images/fb.svg") no-repeat center;
    mask: url("../images/fb.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.contact-form--form select {
    display: none
}

.contact-form--form input[type='text'],
.contact-form--form textarea {
    margin-bottom: 40px
}

.contact-form--form .gform_required_legend {
    margin: 40px 0
}

.contact-form--form .ginput_container_select {
    position: relative
}

.contact-form--form .select2-search--hide {
    display: none
}

.contact-form--form .select2.select2-container {
    display: block;
    padding: 8px;
    padding-right: 0;
    border: none;
    border-radius: 0;
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--grey);
    margin-bottom: 40px;
    cursor: pointer;
    transition: all .4s ease
}

.contact-form--form .select2.select2-container:hover {
    border-color: var(--gold)
}

.contact-form--form .select2.select2-container::after {
    content: "";
    pointer-events: none;
    width: 12px;
    height: 12px;
    background: var(--gold);
    -webkit-mask: url("../images/chevron-select.svg"), no-repeat center;
    mask: url("../images/chevron-select.svg"), no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: calc(50% - 12px/2)
}

.contact-form--form .select2-selection__rendered {
    font-size: 0.875rem;
    color: var(--black);
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.64px
}

.contact-form--form .select2-container:has(.select2-dropdown) {
    font-size: 0.875rem;
    display: block;
    width: 100%;
    border: 1px solid var(--dark-green);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.64px
}

.contact-form--form .select2-results__option {
    padding: 10px 12px;
    transition: all .2s ease;
    background: var(--white);
    position: relative;
    z-index: 1
}

.contact-form--form .select2-results__option--highlighted {
    background: var(--light-green)
}

.contact-form--form .select2-results__option--selected {
    background: var(--light-green)
}

.contact-form--form .gform_wrapper.gravity-theme .gform_fields{
    gap: 40px;
}

.contact-form--form .gform-footer {
    justify-content: flex-end !important;
}

.contact-form--form .gform-footer .gform_button{
    background-color: transparent !important;
    --color: var(--dark-green) !important;
    color: var(--color) !important;
    font-family: var(--title) !important;
    font-size: 1rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    letter-spacing: -0.64px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    transition: all .4s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.contact-form--form .gform-footer .gform_button::before,
.contact-form--form .gform-footer .gform_button::after {
    content: '' !important;
    background: var(--color) !important;
    width: 12px !important;
    height: 22px !important;
    transition: all .4s ease !important;
}

.contact-form--form .gform-footer .gform_button::before {
    -webkit-mask: url("../images/ellipse-left.svg") no-repeat center !important;
    mask: url("../images/ellipse-left.svg") no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.contact-form--form .gform-footer .gform_button::after {
    -webkit-mask: url("../images/ellipse-right.svg") no-repeat center !important;
    mask: url("../images/ellipse-right.svg") no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.contact-form--form .gform-footer .gform_button:hover::before {
    transform: translateX(-6px) !important;
}

.contact-form--form .gform-footer .gform_button:hover::after {
    transform: translateX(6px) !important;
}