@media screen and (min-width: 980px) and (max-width: 1300px) {
}

@media screen and (min-width: 700px) and (max-width: 980px) {
}

@media screen and (min-width: 400px) and (max-width: 700px) {
}

@media screen and (max-width: 400px) {
}
/* Заголовки */

@media screen and (min-width: 980px) and (max-width: 1300px) {

    .content h1 {
        font-size: 28px;
    }

    .content h2 {
        font-size: 24px;
    }

    .content h3 {
        font-size: 18px;
    }

    .content h4 {
        font-size: 14px;
    }
}

@media screen and (min-width: 700px) and (max-width: 980px) {

    .content h1 {
        font-size: 26px;
    }

    .content h2 {
        font-size: 22px;
    }

    .content h3 {
        font-size: 18px;
    }

    .content h4 {
        font-size: 14px;
    }
}

@media screen and (min-width: 400px) and (max-width: 700px) {

    .content h1 {
        font-size: 24px;
    }

    .content h2 {
        font-size: 20px;
    }

    .content h3 {
        font-size: 16px;
    }

    .content h4 {
        font-size: 14px;
    }
}

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

    .content h1 {
        font-size: 22px;
    }

    .content h2 {
        font-size: 18px;
    }

    .content h3 {
        font-size: 16px;
    }

    .content h4 {
        font-size: 14px;
    }
}


/* Адаптируем шапку */
@media screen and (min-width: 980px) and (max-width: 1300px) {
    .header {
        padding: 35px 25px;
    }

        .header .content a.logo .img {
            width: 100px;
            flex: 0 0 100px;
        }

        .header .content a.logo .text {
            font-size: 35px;
        }

            .header .content a.logo .text span {
                font-size: 14px;
            }

        .header .content .bars-button {
            width: 60px;
            height: 60px;
        }
}

@media screen and (min-width: 700px) and (max-width: 980px) {
    .header {
        padding: 25px 20px;
    }

        .header .content a.logo .img {
            width: 80px;
            flex: 0 0 80px;
        }

        .header .content a.logo .text {
            font-size: 25px;
            max-width: 350px;
        }

            .header .content a.logo .text span {
                font-size: 13px;
                padding-top: 4px;
            }

        .header .content .bars-button {
            width: 60px;
            height: 60px;
        }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    .header {
        padding: 18px 12px;
    }

        .header .content a.logo {
            gap: 15px;
        }

            .header .content a.logo .img {
                width: 80px;
                flex: 0 0 80px;
            }

            .header .content a.logo .text {
                font-size: 20px;
                max-width: 240px;
            }

                .header .content a.logo .text span {
                    font-size: 12px;
                    padding-top: 4px;
                }

        .header .content .bars-button {
            width: 40px;
            height: 40px;
        }
}

@media screen and (max-width: 400px) {
    .header {
        padding: 15px 10px;
    }

        .header .content a.logo {
            align-items: flex-start;
            gap: 10px;
        }

            .header .content a.logo .img {
                width: 60px;
                flex: 0 0 60px;
            }

            .header .content a.logo .text {
                font-size: 18px;
                max-width: 230px;
            }

                .header .content a.logo .text span {
                    font-size: 12px;
                    padding-top: 3px;
                }

        .header .content .bars-button {
            width: 35px;
            height: 35px;
        }
}


/* Адаптируем подвал */
@media screen and (min-width: 980px) and (max-width: 1300px) {
    .footer {
        display: block;
        background-color: #333333;
        padding: 30px 25px;
    }

        .footer .content a.logo .text {
            font-size: 22px;
        }

        .footer .content .contacts > .contact-block .name {
            margin: 0 0 10px 0;
        }
}

@media screen and (min-width: 700px) and (max-width: 980px) {
    .footer {
        display: block;
        background-color: #333333;
        padding: 30px 25px;
    }

        .footer .content a.logo {
            gap: 15px;
        }

            .footer .content a.logo .img {
                width: 65px;
                flex: 0 0 65px;
            }

            .footer .content a.logo .text {
                font-size: 22px;
                max-width: 250px;
            }

                .footer .content a.logo .text span {
                    font-size: 13px;
                }

        .footer .content .contacts {
            grid-gap: 25px;
        }

            .footer .content .contacts > .contact-block {
                max-width: 170px;
            }

                .footer .content .contacts > .contact-block .name {
                    margin: 0 0 10px 0;
                }

                .footer .content .contacts > .contact-block > div.phone a,
                .footer .content .contacts > .contact-block > div.mail a {
                    font-size: 12px;
                }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    .footer {
        display: block;
        background-color: #333333;
        padding: 40px 25px;
    }

        .footer .content {
            flex-direction: column;
            align-items: center;
            gap: 45px;
        }

            .footer .content a.logo {
                gap: 15px;
            }

                .footer .content a.logo .img {
                    width: 65px;
                    flex: 0 0 65px;
                }

                .footer .content a.logo .text {
                    font-size: 22px;
                    max-width: 250px;
                }

                    .footer .content a.logo .text span {
                        font-size: 13px;
                    }

            .footer .content .contacts {
                flex-direction: column;
                grid-gap: 25px;
            }

                .footer .content .contacts > .contact-block {
                    max-width: 250px;
                    text-align: center;
                    font-size: 14px;
                }

                    .footer .content .contacts > .contact-block .name {
                        margin: 0 0 10px 0;
                    }

                    .footer .content .contacts > .contact-block > div {
                        font-size: 14px;
                    }

                        .footer .content .contacts > .contact-block > div.phone a,
                        .footer .content .contacts > .contact-block > div.mail a {
                            font-size: 14px;
                        }
}

@media screen and (max-width: 400px) {
    .footer {
        display: block;
        background-color: #333333;
        padding: 40px 25px;
    }

        .footer .content {
            flex-direction: column;
            align-items: center;
            gap: 45px;
        }

            .footer .content a.logo {
                align-items: flex-start;
                gap: 15px;
            }

                .footer .content a.logo .img {
                    width: 65px;
                    flex: 0 0 65px;
                }

                .footer .content a.logo .text {
                    font-size: 20px;
                    max-width: 250px;
                }

                    .footer .content a.logo .text span {
                        font-size: 13px;
                    }

            .footer .content .contacts {
                flex-direction: column;
                grid-gap: 25px;
            }

                .footer .content .contacts > .contact-block {
                    max-width: 250px;
                    text-align: center;
                    font-size: 14px;
                }

                    .footer .content .contacts > .contact-block .name {
                        margin: 0 0 10px 0;
                    }

                    .footer .content .contacts > .contact-block > div {
                        font-size: 14px;
                    }

                        .footer .content .contacts > .contact-block > div.phone a,
                        .footer .content .contacts > .contact-block > div.mail a {
                            font-size: 14px;
                        }
}

/* Адаптируем Cards*/
@media screen and (min-width: 980px) and (max-width: 1300px) {
    .cards {
        padding: 75px 25px;
        background-size: 65% auto;
    }

        .cards h2 {
            padding: 0 0 45px 0;
        }

        .cards .elements {
            grid-gap: 35px;
        }

            .cards .elements .element {
                gap: 20px;
                padding: 45px;
            }

                .cards .elements .element:before {
                    top: 25px;
                    right: 120px;
                }

                .cards .elements .element .icon {
                    flex: 0 0 80px;
                    min-height: 80px;
                }
}

@media screen and (min-width: 700px) and (max-width: 980px) {
    .cards {
        min-height: 500px;
        padding: 75px 25px;
        background-size: 65% auto;
    }

        .cards h2 {
            padding: 0 0 45px 0;
        }

        .cards .elements {
            grid-gap: 35px;
        }

            .cards .elements .element {
                gap: 10px;
                padding: 25px;
            }

                .cards .elements .element:before {
                    top: 15px;
                    right: 70px;
                    width: 70px;
                    height: 15px;
                }

                .cards .elements .element .icon {
                    flex: 0 0 60px;
                    min-height: 60px;
                }

                .cards .elements .element .text {
                    font-size: 13px;
                    line-height: 18px;
                }

                    .cards .elements .element .text h4 {
                        padding: 0 0 7px 0;
                    }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    .cards {
        min-height: 500px;
        padding: 65px 25px;
        background-size: 150% auto;
    }

        .cards h2 {
            padding: 0 0 45px 0;
        }

        .cards .elements {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 35px;
        }

            .cards .elements .element {
                gap: 15px;
                padding: 25px;
            }

                .cards .elements .element:before {
                    top: 15px;
                    right: 130px;
                    width: 70px;
                    height: 15px;
                }

                .cards .elements .element .icon {
                    flex: 0 0 70px;
                    min-height: 70px;
                }

                .cards .elements .element .text {
                    font-size: 13px;
                    line-height: 18px;
                }

                    .cards .elements .element .text h4 {
                        padding: 0 0 7px 0;
                    }
}

@media screen and (max-width: 400px) {
    .cards {
        min-height: 500px;
        padding: 55px 25px;
        background-size: 200% auto;
    }

        .cards h2 {
            padding: 0 0 45px 0;
        }

        .cards .elements {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 35px;
        }

            .cards .elements .element {
                gap: 15px;
                padding: 25px;
            }

                .cards .elements .element:before {
                    top: 15px;
                    right: 90px;
                    width: 70px;
                    height: 15px;
                }

                .cards .elements .element .icon {
                    flex: 0 0 60px;
                    min-height: 60px;
                }

                .cards .elements .element .text {
                    font-size: 13px;
                    line-height: 18px;
                }

                    .cards .elements .element .text h4 {
                        padding: 0 0 7px 0;
                    }
}

/* Адаптация продукт */
@media screen and (min-width: 980px) and (max-width: 1300px) {
    .product {
        padding: 125px 75px;
        background-size: 75% auto;
    }

        .product .content {
            min-height: 350px;
        }
}

@media screen and (min-width: 700px) and (max-width: 980px) {
    .product {
        padding: 75px 65px 250px 65px;
        background-size: 85% auto;
    }

        .product .content {
            min-height: 350px;
        }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    .product {
        padding: 75px 45px 250px 45px;
        background-size: 145% auto;
    }

        .product .content {
            min-height: 350px;
        }
}

@media screen and (max-width: 400px) {
    .product {
        padding: 75px 25px 250px 25px;
        background-size: 145% auto;
    }

        .product .content {
            min-height: 350px;
        }
}

/* Адаптируем стартовый экран */
@media screen and (min-width: 980px) and (max-width: 1300px) {
    .start-screen {
        min-height: 400px;
    }

        .start-screen:before {
            background-size: 65% auto;
            background-position: calc(100% + 100px) 100%;
        }

        .start-screen .content {
            max-width: 700px;
            margin: inherit;
        }
}

@media screen and (min-width: 700px) and (max-width: 980px) {
    .start-screen {
        min-height: 400px;
        padding: 75px 65px 75px 65px;
    }

        .start-screen:before {
            background-size: auto 100%;
            background-position: calc(100% + 100px) 100%;
            opacity: 0.3;
        }

        .start-screen .content {
            max-width: 500px;
            margin: inherit;
        }
}

@media screen and (min-width: 400px) and (max-width: 700px) {
    .start-screen {
        min-height: 400px;
        padding: 75px 45px 75px 45px;
    }

        .start-screen:before {
            background-size: auto 100%;
            background-position: calc(100% + 100px) 100%;
            opacity: 0.3;
        }

        .start-screen .content {
            max-width: 500px;
            margin: inherit;
        }
}

@media screen and (max-width: 400px) {
    .start-screen {
        min-height: 400px;
        padding: 75px 25px 75px 25px;
    }

        .start-screen:before {
            background-size: auto 100%;
            background-position: calc(100% + 100px) 100%;
            opacity: 0.3;
        }

        .start-screen .content {
            max-width: 500px;
            margin: inherit;
        }
}