/* ---------- MEDIA QUERIES ---------- */


@media (min-width: 451px) and (max-width: 1024px) {

    .contacts-main {
        display: flex;
        flex-direction: column;
        height: auto;
        margin-top: 150px;

    }

    .contacts-info .block2 {
        margin-top: -25px;
    }

    .contacts-main .left-col {
        display: none;
    }

    .contacts-main .right-col {
        display: flex;
        flex-direction: column;

        height: auto !important;
        position: static !important;
    }

    .contacts-info,
    .location-info,
    .form-info {
        display: flex !important;
        position: static !important;
        flex-direction: column;
    }

    .contacts-info {
        order: 1;
        gap: var(--double-margin);
    }

    .image-container {
        order: 3;

        position: relative !important;
        width: 100% !important;
        height: 500px !important;

        left: 0 !important;
        bottom: 0 !important;
    }

    .image-container,
    .image-anim-wrapper {
        height: 65vh !important;
        min-height: 500px;
    }

    #mapFrame {
        width: 100%;
        height: 100% !important;
        opacity: 1 !important;
        position: absolute !important;
        inset: 0;
    }

    #mainImage {
        display: none;
    }

    .location-info {
        order: 4;
        margin-top: 150px;
    }

    .form-info {
        order: 2;
        width: 100%;
        margin-top: 100px;
    }

    #mainImage {
        display: none;
    }

    #mapFrame {
        opacity: 1 !important;
        position: relative !important;
        width: 100%;
        height: 100%;

        margin-top: 100px;
    }

    .form-info .block-forms {
        margin-top: 25px;
    }

    .form-info input,
    .form-info textarea {
        width: 100%;

        padding-bottom: 15px;
        margin-bottom: var(--half-margin);

        border: none;
        border-bottom: 1px solid #000;

        background: transparent;
        outline: none;

        transition: border-color 0.3s;

        font-size: var(--dropdown-font-size);
        font-family: inherit;
    }

    .form-info input::placeholder,
    .form-info textarea::placeholder {
        font-family: 'Switzer-Medium';
        font-size: var(--dropdown-font-size);
        color: rgba(0, 0, 0, 0.4);
    }

    .form-info textarea {
        height: 32px;
    }

    .form-info input:focus,
    .form-info textarea:focus {
        border-bottom-color: rgba(0, 0, 0, 0.2);
    }

    .form-info button {
        margin-top: 15px;

        border: none;
        background: transparent;
        outline: none;

        font-size: var(--main-font-size);
        opacity: var(--opacity-value);

        transition: font-size 0.3s ease, opacity 0.3s ease;
        cursor: pointer;
    }

    .form-info button:hover {
        font-size: var(--menu-a-font-size);
        opacity: 1;
    }

    .form-info button.sending {
        font-size: var(--menu-a-font-size);
        opacity: 1 !important;
        pointer-events: none;
    }

    .form-info button.sent {
        font-size: var(--menu-a-font-size);
        opacity: 1 !important;
        pointer-events: none;
    }
}



@media (max-width: 450px) {

    .contacts-main {
        display: flex;
        flex-direction: column;
        height: auto;
        margin-top: 100px;
    }

    .contacts-main .left-col {
        display: none;
    }

    .contacts-main .right-col {
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: auto !important;
        position: static !important;
    }

    .contacts-info,
    .location-info,
    .form-info {
        display: flex !important;
        position: static !important;
        flex-direction: column;
    }

    .contacts-info {
        order: 1;
        gap: var(--double-margin);
    }

    .image-container {
        order: 3;

        position: relative !important;
        width: 100% !important;
        height: 500px !important;

        left: 0 !important;
        bottom: 0 !important;
    }

    .image-container,
    .image-anim-wrapper {
        height: 65vh !important;
        min-height: 500px;
    }

    #mapFrame {
        width: 100%;
        height: 100% !important;
        opacity: 1 !important;
        position: absolute !important;
        inset: 0;
    }

    #mainImage {
        display: none;
    }

    .location-info {
        order: 4;
    }

    .form-info {
        order: 2;
        width: 100%;

        margin-top: 15px;
    }

    #mainImage {
        display: none;
    }

    #mapFrame {
        opacity: 1 !important;
        position: relative !important;
        width: 100%;
        height: 100%;

        margin-top: 15px;
    }

    .form-info .block-forms {
        margin-top: 15px;
    }

    .form-info input,
    .form-info textarea {
        width: 100%;

        padding-bottom: 10px;
        margin-bottom: var(--half-margin);

        border: none;
        border-bottom: 1px solid #000;

        background: transparent;
        outline: none;

        transition: border-color 0.3s;

        font-size: var(--dropdown-font-size);
        font-family: inherit;
    }

    .form-info input::placeholder,
    .form-info textarea::placeholder {
        font-family: 'Switzer-Medium';
        font-size: var(--dropdown-font-size);
        color: rgba(0, 0, 0, 0.4);
    }

    .form-info textarea {
        height: 32px;
    }

    .form-info input:focus,
    .form-info textarea:focus {
        border-bottom-color: rgba(0, 0, 0, 0.2);
    }

    .form-info button {
        margin-top: 15px;

        border: none;
        background: transparent;
        outline: none;

        font-size: var(--main-font-size);
        opacity: var(--opacity-value);

        transition: font-size 0.3s ease, opacity 0.3s ease;
        cursor: pointer;
    }

    .form-info button:hover {
        font-size: var(--menu-a-font-size);
        opacity: 1;
    }

    .form-info button.sending {
        font-size: var(--menu-a-font-size);
        opacity: 1 !important;
        pointer-events: none;
    }

    .form-info button.sent {
        font-size: var(--menu-a-font-size);
        opacity: 1 !important;
        pointer-events: none;
    }

}