@media (min-width: 0px) and (max-width: 1000px)
{   
    .header-nav
    {
        display: none;
    }
    .header-wrapper
    {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    .header-contacts
    {
        flex-wrap: wrap;
        gap: 8px;
    }
    .header-button
    {
        height: 32px;
        padding: 8px 16px;
    }

    .wrapper
    {
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
    }

    .problem-card
    {
        max-width: 100%;
    }
    .service-list-row,
    .service-list-row-2,
    .service-list-row-3
    {
        flex-direction: column;
    }
    .service-item
    {
        flex-direction: row;
        padding: 0;
    }
    .service-item-body
    {
        box-sizing: border-box;
        padding: 24px;
    }
    .faqs-list
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .cases-item
    {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cases-item-right,
    .cases-item-left
    {
        width: 100%;
        border-radius: 16px;
    }
    
    .problems-list,
    .cases-list
    {
        overflow: clip;
    }
    
}
@media (min-width: 0px) and (max-width: 500px)
{ 
    .hero-video-wrapper
    {
        display: none;
    }

    .hero-title
    {
        font-size: 36px;
    }
    .hero-subtitle
    {
        font-size: 18px;
    }
    .title
    {
        font-size: 30px;
    }
    .subtitle
    {
        font-size: 18px;
    }
    .problem-title
    {
        font-size: 30px;
    }
    .problem-text
    {
        font-size: 18px;
    }
    ul li
    {
        font-size: 18px;
    }

    .service-list-row,
    .service-list-row-2,
    .service-list-row-3
    {
        flex-direction: column;
    }
    .service-item
    {
        flex-direction: column;
    }

    .step-item-title,
    .case-title    
    {
        font-size: 30px;
    }
    .step-item-text,
    .case-text
    {
        font-size: 20px;
    }
    .step-card
    {
        /*
        height: 300px;
        max-height: 300px;
        */
    }
    .contacts .title
    {
        font-size: 30px;
    }
}