@media (max-width: 1201px) {
    .header {
        padding: 50px 60px 190px;
    }

    .info_list {
        gap: 50px;
        width: 474px;
        height: 170px;
    }

    .slogan {
        font-size: 28px;
    }

    .info_text {
        font-size: var(--fz-2);
    }

    .phone {
        top: 100px;
    }
}

@media (max-width: 1024px) {
    .phone_btn:hover {
        letter-spacing: .3px;
    }

    .phone_btn:active {
        letter-spacing: 3px;
    }
}

@media (max-width: 1000px) {

    .header_col:nth-child(3) {
        top: 139px;
        left: -100px;
    }

    .info_list {
        width: auto;
        height: auto;
    }
}

@media (max-width: 1024px) and (max-height: 1400px) {
    .background {
        height: 80vh;
    }

    .header_col:nth-child(3) {
        left: -90px;
    }

    .info_list{
        flex-direction: column;
        width: auto;
        height: auto;
    }
}

@media (max-width: 900px) {
    .loan_form {
        justify-content: initial;
        flex-direction: column;
    }

    .checkbox_text {
        max-width: 80%;
    }

    .form_col:nth-child(2) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0px;
    }

    .form_submit_wrapper {
        margin: 40px 0 15px;
    }

    .monthly_fee,
    .percent {
        text-align: initial;
        flex-basis: 48%;
    }

    .footer_inner {
        flex-direction: column;
    }

    .header_col:nth-child(3) {
        position: relative;
        top: 150px;
    }

    .header {
        justify-content: initial;
        flex-direction: column;
        align-items: center;
        gap: 100px;
        padding: 50px 60px 100px;
        box-shadow: 0 0 20px 0 var(--color-5), inset 0 0 20px 0 var(--color-5);
    }

    .header_col {
        align-items: flex-start;
    }

    .header_col:nth-child(3) {
        position: initial;
        top: 0px;
    }

    .info_list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 50px 0;
    }

    .info_list_item {
        flex-basis: 50%;
    }

    .info_list_item:nth-child(2n) {
        text-align: end;
    }

    .slogan {
        color: var(--color-3);
        font-weight: var(--fw-medium);
    }

    .info_text {
        color: var(--color-3);
        font-weight: var(--fw-thin);
        font-size: var(--fz-3);
    }

    .main {
        padding-top: 100px;
    }

    .phone {
        top: 47px;
    }
}

@media (max-width: 700px) {
    .header {
        padding: 25px 60px 100px;
    }

    .header_col:nth-child(2) {
        gap: 50px;
    }

    .monthly_fee {
        margin-bottom: 40px;
    }

    .monthly_fee,
    .percent {
        text-align: initial;
        flex-basis: 100%;
    }
}

@media (max-width: 630px) {
    .info_list_item {
        flex-basis: initial;
    }

    .info_list_item:nth-child(2n) {
        text-align: initial;
    }

    .info_list {
        flex-direction: column;
        height: auto;
    }
}

@media (max-width: 500px) {
    .phone {
        top: 70px;
        width: 280px;
        height: 540px;
    }

    .phone_clock {
        top: 35px;
    }

    .message_title {
        font-size: 14px;
        font-weight: var(--fw-regular);
    }

    .message_text {
        font-size: 10px;
        font-weight: var(--fw-regular);
    }

    .title {
        font-size: 32px;
    }

    .message_anim {
        transform: scale(1.2);
    }
}

@media (max-height: 801px) {
    .header {
        padding: 80px 60px 120px;
    }

    .header_col {
        gap: 50px;
    }

    .background {
        height: 100vh;
    }
}

@media (max-height: 701px) {

    .header {
        padding: 50px 60px 120px;
    }

    .header_col:nth-child(2) {
        gap: 35px;
    }

    .background {
        height: 120vh;
    }
}

@media (max-height: 600px) {
    .header_col:nth-child(3) {
        top: 100px;
    }
}

@media (max-width: 450px) and (max-height: 800px) {
    .background {
        height: 100vh;
    }
}

@media (max-width: 400px) {

    .monthly_fee_title,
    .percent_title {
        font-size: var(--fz-2);
    }

    .checkbox_wrapper {
        gap: 0;
        justify-content: space-between;
    }

    .checkbox_text {
        max-width: 80%;
    }
}