body {
    /*
    Основные цвета:
    red #EB5757
    blue #A5A6F6
    dark blue #589BD4
    green #10CF75
    yellow #FFDA44
    orange #F29F05
    white #FFFFFF
    dark #0D0D0D
    */

    .logo-main {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    color: #0D0D0D;
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;

    scroll-behavior: smooth;

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    /* Для Firefox */
    input[type="number"] {
    -moz-appearance: textfield;
    }
    .notification {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
        max-width: 600px;
        max-height: 80vh;
        background-color: white;
        color: #333;
        padding: 25px;
        border-radius: 50px;
        gap: 25px;
        z-index: 1000;
        text-align: center;
        box-shadow: 0px 4px 15px rgba(16, 207, 117, 0.3);
        box-sizing: border-box;
        overflow: hidden;
        border: 5px solid #10CF75;
    }

    .notification.modal {
        border: 5px solid #589BD4;
    }

    /* Стиль для индикатора загрузки (спиннера) */
    .loading-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 400px;
        background-color: white;
        padding: 25px;
        border-radius: 50px;
        color: #333;
        text-align: center;
        box-shadow: 0px 4px 15px rgba(88, 155, 212, 0.3);
        z-index: 1000;
        animation: fadeIn 0.3s ease-out;
        border: 5px solid #589BD4;
    }

    .spinner-container {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    /* Стиль для контейнера с изображением спиннера */
    .spinner {
        width: 50px;   /* Можно установить нужный размер */
        height: 50px;
    }

    /* Если нужно анимировать SVG, добавьте его анимацию */
    .spinner img {
        width: 100%;
        height: 100%;
        animation: spin 2s linear infinite;
    }

    .modal-content {
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 5px;
        max-height: 60vh;  /* Ограничиваем высоту для текста */
        overflow-y: auto;  /* Включаем прокрутку для текста */
        padding-right: 15px;  /* Добавляем немного отступа, чтобы текст не упирался в края */
    }

    .warning {
        color: #0D0D0D;
        width: 100%;
        text-decoration: none;
        text-align: center;
        margin: 0;
    }

    .warning.link {
        color: #A5A6F6;
    }

    .main_btn {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        text-align: center;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #589BD4;
        cursor: pointer;
    }


    .main_btn:hover {
        background-color: #A5A6F6;

    }

    .main_btn:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }

    .bnt_form {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 15px 25px;
        background-color: #10CF75;
        color: #FFFFFF;
        border-radius: 100px;
        font-size: 18px;
        font-weight: 300;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
    }

    .bnt_form:hover {
        background-color: #12E883;
        cursor: pointer;
    }

    .bnt_form:active {
        background-color: #EB5757;
    }


    .bnt_form.modal {
        background-color: #589BD4;
    }

    .bnt_form.modal:hover {
        background-color: #A5A6F6;
    }

    .bnt_form.modal:active {
        background-color: #EB5757;
    }


    .main_btn.contact_btn {
        color: #589BD4;
        background-color: #fff;
        border: 2px solid #589BD4;
        cursor: pointer;
        gap: 15px;
    }

    .main_btn.contact_btn:hover {
        color: #fff;
        background-color: #A5A6F6;
        border: 2px solid #A5A6F6;
    }

    .main_btn.contact_btn:active {
        color: #fff;
        background-color: #A5A6F6;
        transform: translateY(4px);
    }

    .bnt_search {
        width: 100%;
        background-color: #589BD4;
        color: #FFFFFF;
        border-radius: 100px;
        font-weight: 300;
        border: none;
        font-family: 'Montserrat', sans-serif;
    }

    .bnt_search:hover {
        background-color: #A5A6F6;
        cursor: pointer;
    }

    .bnt_search:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }

    .contact {
        display: grid;
        flex-direction: column;
        gap: 15px;
        width: 100%;

    }

    .messenger-options {
        border: 0px solid blue;

        display: flex;
        width: 100%;
        gap: 10px;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .messenger-btn {
        border: 0px solid blue;

        display: flex;
        width: 100%;
        align-items: center;
        border: 2px solid #589BD4;
        border-radius: 50px;
        cursor: pointer;
        transition: background-color 0.3s, border-color 0.3s;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .messenger-icon {
        border: 0px solid blue;
        margin: 0;
        width: 34px;
        height: 34px;
    }

    .messenger-icon.arrow {
        transform: rotate(-90deg);
    }

    .messenger-options input[type="checkbox"] {
        display: none;
    }

    .messenger-options input[type="checkbox"]:checked + .messenger-btn {
        background-color: #A5A6F6;
        border: 2px solid #A5A6F6;
        color: white;

    }

    .messenger-options input[type="checkbox"]:checked + label.messenger-btn .messenger-icon {
        filter: brightness(0) invert(1);
    }

    .select_crm {
        display: flex;
        width: 100%;
        padding: 15px 25px;

        border: none;
        outline: none;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 18px;
        font-weight: 300;
        text-align-last: center;

        justify-content: center;
        align-items: center;

        font-family: 'Montserrat', sans-serif;
        transition: 0.5s;

        appearance: none;
        background: url('/static/images/arrow.svg') no-repeat right 25px center;
        background-size: 25px;
        padding-right: 50px;
    }

    .select_crm:hover {
        border: 2px solid #10CF75;
        cursor: pointer;
    }

    .selected_crm {
        text-align-last: center;
    }

    .form-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;

        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        margin-bottom: 10px;
    }

    /* Скрываем checkbox, но он всё ещё участвует в валидации */
    .checkbox-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Кастомный прямоугольник */
    .custom-checkbox {
        width: 24px;
        height: 24px;
        border: 2px solid #589BD4;
        border-radius: 6px;
        display: inline-block;
        background: url('/static/images/check.svg') no-repeat center;
        background-size: 16px;
        transition: all 0.3s;
    }

    /* Когда чекбокс выбран */
    .checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
        background-color: #10CF75;
        border-color: #10CF75;
    }

    /* Текст */
    .warning {
        font-size: 14px;
        font-weight: 400;
        color: #0D0D0D;
    }

    .warning.link {
        color: #A5A6F6;
    }




}

@media (min-width: 1200px) {
    .grid-container {
        max-width: 1200px;
        height: 100%;

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 50px;

        justify-content: center;
        align-items: center;

        margin: 0 auto;
        padding-bottom: 50px;
    }

    .main {
        display: grid;
        grid-column: 1 / 13;
        height: 100vh;
        gap: 50px;

        justify-items: center;
        align-items: center;

        margin: 0;
    }

    .div-logo-main {
        display: grid;
        grid-column: 1 / 7;
        justify-content: center;
        align-content: center;
    }

    .text {
        display: flex
        flex-direction: column;
        grid-column: 8 / 13;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .main_text_1 {
        display: flex;
        font-size: 36px;
    }

    .main_text_2 {
        display: flex;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .main_btn {
        font-size: 24px;
        border-radius: 50px;
        padding: 10px 25px;
    }



    .div_form {
        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 50px;
        min-height: 600px;

        box-sizing: border-box;
        padding-top: 120px;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 50px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 25px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .h2 {
        font-size: 42px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 18px;
        font-weight: 300;
    }

    .label_and_input_field {
        display: flex;

        width: 100%;
        gap: 15px;
        height: 100%;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 15px 50px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    .input-field::placeholder {
        color: #82B4DF;
        font-size: 18px;
        font-weight: 200;
    }


    /*  */

    .messenger-btn {
        padding: 15px 25px;
        font-size: 24px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */



    .bnt_search {
        padding: 15px 25px;
        font-size: 24px;
    }
}

@media (max-width: 1199px) {
    .grid-container {
        max-width: 1200px;
        height: 100%;

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 50px;

        justify-content: center;
        align-items: center;

        margin: 0px 25px;
        padding-bottom: 50px;
    }

    .main {
        display: grid;
        grid-column: 1 / 13;
        height: 100vh;
        gap: 50px;

        justify-items: center;
        align-items: center;

        margin: 0;
    }

    .div-logo-main {
        display: grid;
        grid-column: 1 / 7;
        justify-content: center;
        align-content: center;
    }

    .text {
        display: flex
        flex-direction: column;
        grid-column: 8 / 13;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .main_text_1 {
        display: flex;
        font-size: 36px;
    }

    .main_text_2 {
        display: flex;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .main_btn {
        font-size: 24px;
        border-radius: 50px;
        padding: 10px 25px;
    }



    .div_form {
        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 50px;
        min-height: 600px;

        box-sizing: border-box;
        padding-top: 120px;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 50px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 25px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .h2 {
        font-size: 42px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 18px;
        font-weight: 300;
    }

    .label_and_input_field {
        display: flex;

        width: 100%;
        gap: 15px;
        height: 100%;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 15px 50px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    .input-field::placeholder {
        color: #82B4DF;
        font-size: 18px;
        font-weight: 200;
    }


    /*  */

    .messenger-btn {
        padding: 15px 25px;
        font-size: 24px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */



    .bnt_search {
        padding: 15px 25px;
        font-size: 24px;
    }
}

@media (max-width: 960px) {
    .grid-container {
        border: 0px solid black;
        width: 100%;
        max-width: 960px;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 50px;

        justify-content: center;
        align-items: center;

        margin: 0;
        padding: 0 25px 50px 25px;
        box-sizing: border-box;
    }

    .main {
        border: 0px solid blue;

        grid-column: 1 / 13;
        height: 100vh;
        min-height: 960px;
        padding: 0 25px 0 25px;
        gap: 0;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .div-logo-main {
        border: 0px solid blue;

        width: 90%;

        justify-content: center;
        align-items: center;

        box-sizing: border-box;
    }

    .logo-main {
        border: 0px solid blue;

        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }

    .text {
        display: grid;

        border: 0px solid blue;

        width: 85%;
        box-sizing: border-box;
    }

    .main_text_1 {
        font-size: 36px;
        box-sizing: border-box;
    }

    .main_text_2 {
        font-size: 24px;
        box-sizing: border-box;
    }

    .main_btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 24px;
        text-align: center;
        text-decoration: none;

        color: #fff;
        background-color: #589BD4;
        cursor: pointer;
        outline: none;

        border-radius: 50px;
        padding: 15px 25px;
    }

    .main_btn:hover {
        background-color: #A5A6F6;
    }

    .main_btn:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }




    .div_form {
        border: 0px solid green;

        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;

        justify-content: center;
        gap: 25px;
        min-height: 600px;
        margin: 0;

        box-sizing: border-box;
        padding-top: 120px;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 10px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;

        width: 100%;
        gap: 5px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .h2 {
        font-size: 42px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 16px;
        font-weight: 300;
    }

    .label_and_input_field {
    display: flex;

    width: 100%;
    gap: 15px;
    height: 100%;
    margin-bottom: 25px;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 15px 25px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    .input-field::placeholder {
        color: #82B4DF;
        font-size: 18px;
        font-weight: 200;
    }


    /* Псевдокласс focus */
    select-input-field:focus {
        border-color: #3a7bd5;
        background-color: #cfe2fc;
        box-shadow: 0 0 5px rgba(56, 123, 213, 0.5);
    }

    /*  */
    .messenger-btn {
        padding: 15px 25px;
        font-size: 24px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */

    .bnt_search {
        padding: 15px 25px;
        font-size: 24px;
    }


}

@media (max-width: 720px) {
     .grid-container {
        border: 0px solid blue;
        width: 100%;
        max-width: 720px;
        height: 100%;
        background-color: #fff;

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 50px;

        justify-content: center;
        align-items: center;

        padding: 0 25px 50px 25px;
        margin: 0;
        box-sizing: border-box;
    }

    .main {
        border: 0px solid green;

        grid-column: 1 / 13;
        height: 100vh;
        padding: 0 25px 0 25px;
        gap: 0;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .div-logo-main {
        border: 0px solid blue;

        width: 100%;

        justify-content: center;
        align-items: center;

        box-sizing: border-box;
    }

    .logo-main {
        border: 0px solid blue;

        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }

    .text {
        display: grid;
        border: 0px solid blue;

        width: 93%;
        box-sizing: border-box;
    }

    .main_text_1 {
        font-size: 24px;
    }

    .main_text_2 {
        font-size: 18px;
    }

    .main_btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        text-decoration: none;

        color: #fff;
        background-color: #589BD4;
        cursor: pointer;
        outline: none;

        border-radius: 50px;
        padding: 15px 25px;
    }

    .main_btn:hover {
        background-color: #A5A6F6;
    }

    .main_btn:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }







    .div_form {
        border: 0px solid yellow;

        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;

        justify-content: center;
        gap: 25px;
        min-height: 600px;
        margin: 0;

        box-sizing: border-box;
        padding-top: 100px;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 15px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 25px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .label_and_input_field.date{
        display: flex;
         flex-direction: row;
    }

    .h2 {
        font-size: 42px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 14px;
        font-weight: 300;
    }

    .label_and_input_field {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 15px;
        height: 100%;
        margin-bottom: 25px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 15px 25px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    .input-field::placeholder {
        color: #82B4DF;
        font-size: 18px;
        font-weight: 200;
    }
    
    /*  */
    .messenger-options {
        display: flex;
        flex-direction: column;
    }
    .messenger-btn {
        padding: 15px 15px;
        font-size: 24px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */

    .bnt_search {
        padding: 15px 25px;
        font-size: 24px;
    }
}

@media (max-width: 520px) {
    .grid-container {
        border: 0px solid green;
        width: 100%;
        max-width: 520px;
        height: 100%;
        background-color: #fff;

        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 25px;

        padding: 0 12px 50px 12px;
        margin: 0;
        box-sizing: border-box;
    }

    .main {
        border: 0px solid red;

        grid-column: 1 / 7;
        height: 100vh;
        min-height: 520px;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
    }

    .div-logo-main {
        border: 0px solid blue;

        width: 100%;

        justify-content: center;
        align-items: center;

        box-sizing: border-box;
    }

    .logo-main {
        border: 0px solid blue;

        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }

    .text {
        border: 0px solid blue;

        width: 100%;
        box-sizing: border-box;
    }

    .main_text_1 {
        font-size: 18px;
    }

    .main_text_2 {
        font-size: 14px;
        line-height: 1.2;

    }

    .main_btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        text-align: center;
        text-decoration: none;

        color: #fff;
        background-color: #589BD4;
        cursor: pointer;
        outline: none;

        border-radius: 50px;
        padding: 15px 25px;
    }

    .main_btn:hover {
        background-color: #A5A6F6;
    }

    .main_btn:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }





    .div_form {
        border: 0px solid black;

        grid-column: 1 / 7;
        display: flex;
        flex-direction: column;

        justify-content: center;
        gap: 25px;
        min-height: 600px;
        margin: 0;

        box-sizing: border-box;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 10px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 5px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .h2 {
        font-size: 42px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 12px;
        font-weight: 300;
    }

    .label_and_input_field {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 10px;
        height: 100%;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 5px 25px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    .input-field::placeholder {
        color: #82B4DF;
        font-size: 18px;
        font-weight: 200;
    }


    /*  */
    .messenger-options {
        display: flex;
        flex-direction: column;
    }
    .messenger-btn {
        padding: 10px 15px;
        font-size: 18px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */

    .bnt_search {
        padding: 10px 15px;
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    .grid-container {
        border: 0px solid red;
        width: 100%;
        max-width: 420px;
        height: 100%;
        background-color: #fff;

        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 25px;

        padding: 0 12px 50px 12px;
        margin: 0;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .main {
        border: 0px solid red;

        grid-column: 1 / 7;
        height: 100vh;
        min-height: 480px;



        justify-content: center;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
    }

    .div-logo-main {
        border: 0px solid blue;

        width: 100%;

        justify-content: center;
        align-items: center;

        box-sizing: border-box;
    }

    .logo-main {
        border: 0px solid blue;

        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }

    .text {
        border: 0px solid blue;

        width: 100%;
        box-sizing: border-box;
    }

    .main_text_1 {
        font-size: 18px;
    }

    .main_text_2 {
        font-size: 14px;
        line-height: 1.2;
    }

    .main_btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        text-align: center;
        text-decoration: none;

        color: #fff;
        background-color: #589BD4;
        cursor: pointer;
        outline: none;

        border-radius: 50px;
        padding: 12px 25px;
    }

    .main_btn:hover {
        background-color: #A5A6F6;
    }

    .main_btn:active {
        background-color: #A5A6F6;
        transform: translateY(4px);
    }





    .div_form {
        border: 0px solid black;

        grid-column: 1 / 7;
        display: flex;
        flex-direction: column;

        justify-content: center;
        gap: 25px;
        min-height: 600px;
        margin: 0;

        box-sizing: border-box;
    }

    .div_form_input {
        display: flex;
        flex-direction: column;
        gap: 25px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .div_input_field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .h2 {
        font-size: 28px;
        font-weight: 700;
        text-align: center;

        margin: 0;
    }

    .h3 {
        display: grid;
        width: 100%;
        text-align: center;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin: 0;
    }

    .warning {
        font-size: 12px;
        font-weight: 200;
    }

    .label_and_input_field {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 10px;
        height: 100%;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .label_for_input {
        width: auto;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 0;

        box-sizing: border-box;
        justify-content: center;
        align-items: center;

    }

    .input-field {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 5px 25px;
        text-align: center;

        background-color: #DEEBF6;
        border: 2px solid #589BD4;
        border-radius: 50px;

        font-size: 24px;
        font-weight: 400;
    }

    /*  */
    /* Желаемый тип связи */
    .messenger-options {
        display: flex;
        flex-direction: column;
    }

    .messenger-btn {
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 300;
        gap: 10px;
    }
    /*  */

    .bnt_search {
        padding: 10px 15px;
        font-size: 16px;
    }
}