@media screen and (max-width: 992px){
    .hero {
        min-height: auto;
    }

    .why-us .section-title,
    .why-us .section-intro {
        text-align: center;
    }

    .why-us .cards {
        margin-top: 20px;
    }

    .faq .section-head {
        text-align: center;
    }

    .footer__content {
        flex-direction: column;
    }

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

@media screen and (max-width: 768px){

    body {
        font-size: 14px;
    }

    .h1 {
        font-size: 20px;
    }

    .h3 {
        font-size: 16px;
    }

    .logo-link img {
        width: 170px;
    }

    .socials {
        gap: 8px;
    }

    .socials img {
        width: 32px;
        height: 32px;
    }

    .hero__right-pic {
        width: 40%;
    }

    .hero__left-pic {
        width: 30%;
    }

    .section {
        padding: 30px 0;
    }

    .section-title {
        font-size: 24px;
    }

    .section-intro {
        font-size: 16px;
    }

    .section-head {
        margin-bottom: 30px;
    }

    .card {
        padding: 16px;
    }

    .why-us__cards .card {
        margin-bottom: 16px;
        gap: 6px;
    }

    .why-us__cards .card img {
        width: 40px;
        height: 40px;
    }

    .why-us__digit  {
        font-size: 32px;
    }

    .why-us__text {
        font-size: 14px;
    }

    .services .card {
        margin-bottom: 16px;
    }

    .services .card img {
        max-width: 230px;
    }

    .faq__item {
        padding: 20px 0;
    }

    .faq__header {
        font-size: 18px;
    }

    .faq__body {
        font-size: 15px;
    }

    .content {
        padding: 30px 0;
    }

    .footer {
        padding: 24px 0;
        font-size: 14px;
    }

    .footer__content > * {
        padding: 15px 0;
    }

}

@media screen and (max-width: 576px){
    .form__submit {
        width: 100%;
    }
    .form__info {
        max-width: 100%;
    }

    .contacts__item {
        font-size: 14px;
    }

    .contacts__item--arrow::before {
        left: -54px;
        top: -24px;
        width: 52px;
        height: 38px;
        transform: rotate(34deg);
    }
}