﻿@media only screen and (max-width: 1439px) {
    .projects {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantages .container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .advantages .star__yellow {
        top: 9%;
        left: 3%;
    }

    .advantages .star__green {
        top: 96%;
        left: 44%;
    }

    .advantages .star__orange {
        top: 12%;
        left: 80%;
    }

    .advantages .star__blue {
        top: 67%;
        left: 77%;
    }

    .hero .main__text .line .title {
        font-size: 110px;
    }

    .hero .main__text .line h1 {
        font-size: 80px;
        line-height: 70px;
    }

    .hero .main__text .line img {
        max-height: 70px;
    }

    .hero .main__text .hands {
        right: -85px;
    }

    .hero .main__text .judge {
        left: -55px;
        top: 65px;
    }
}

@media only screen and (max-width: 1300px) {
    .features .feature__container .feature__preview h2 {
        font-size: 28px;
        line-height: 30px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 80px;
        height: 80px;
    }

    .swiper-button-next {
        right: -90px;
    }

    .swiper-button-prev {
        left: -90px;
    }
}

@media only screen and (max-width: 1250px) {
    .products__list.mobile {
        display: grid;
    }

    .products__list.full {
        display: none;
    }

    .products__list {
        gap: 20px;
    }

    .products__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .products__tags__box {
        display: none;
    }

    .product__tag.mobile {
        display: flex;
        width: 100%;
        max-width: calc(100% - 59px);
        position: sticky;
        top: 10px;
    }

    .products__list .product__box {
        display: flex;
        flex-direction: column;
        gap: 20px;
        opacity: 1;
        height: 100%;
        margin-bottom: 0 !important;
        overflow: visible;
    }
}

@media only screen and (max-width: 1099px) {
    :root {
        --basic-block-padding: 5%;
    }

    .objectives .vision,
    .objectives .mission {
        grid-template-columns: minmax(0, 1fr);
    }

    .objectives .mission {
        justify-items: center;
    }

    .features {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

        .features .feature__container .feature__preview img {
            max-height: 100px;
        }

    .lang__selector.full {
        display: none;
    }

    .navigation .lang__selector {
        position: relative;
        padding-left: var(--basic-block-padding);
        margin-top: 20px;
    }

    .navigation {
        flex-direction: row;
        justify-content: flex-start;
        margin: 15px 0;
        position: initial;
    }

        .navigation img {
            left: auto;
            right: 5%;
        }

        .navigation .menu__toggle {
            display: block;
            font-size: 42px;
            line-height: 42px;
            cursor: pointer;
        }

        .navigation .menu__mobile {
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 0;
            top: 0;
            background: #fff;
            width: 100%;
            height: 100dvh;
            z-index: 10;
            padding: 15px 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

            .navigation .menu__mobile.visible {
                opacity: 1;
                visibility: visible;
                max-height: 100dvh;
                overflow: hidden;
                overflow-y: auto;
            }

        .navigation .menu__full {
            display: none;
        }

        .navigation .menu__mobile .menu__toggle {
            padding-left: var(--basic-block-padding);
        }

        .navigation ul {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding-left: var(--basic-block-padding);
            gap: 0;
        }

            .navigation ul li {
                padding: 15px 0;
                border-bottom: 1px dashed var(--maim-text-color);
                text-align: start;
            }

    .swiper {
        max-width: 80%;
    }

    .swiper-button-next {
        right: 0;
    }

    .swiper-button-prev {
        left: 0;
    }

    .go__up__button {
        z-index: 2;
        width: 40px;
        height: 40px;
        font-size: 34px;
        bottom: 5%;
    }

    .support__container {
        bottom: calc(18% + 90px);
        right: calc(5% + 8px);
    }

        .support__container .action__button {
            width: 55px;
            height: 55px;
            font-size: 26px;
        }

        .support__container .light__circle {
            width: 80px;
            height: 80px;
        }

        .support__container .middle__circle {
            height: 65px;
            width: 65px;
        }

        .support__container .internal__circle {
            width: 55px;
            height: 55px;
        }

        .support__container .open__block .callback__form {
            max-width: 60%;
            padding: 15px;
        }

            .support__container .open__block .callback__form .input__container input {
                padding: 0px 0;
            }

            .support__container .open__block .callback__form .input__container {
                border-radius: 11px;
                padding: 0px 5px;
                gap: 4px;
            }

            .support__container .open__block .callback__form .submit__button {
                padding: 7px 10px;
                font-size: 15px;
                border-radius: 11px;
            }

            .support__container .open__block .callback__form p {
                font-size: 13px;
                line-height: 14px;
            }

            .support__container .open__block .callback__form h4 {
                font-size: 20px;
                line-height: 18px;
            }
}

@media only screen and (max-width: 800px) {
    .hero .main__text .line .title {
        font-size: 64px;
        letter-spacing: 0;
    }

    .hero .main__text .line h1 {
        font-size: 46px;
        line-height: 44px;
    }

    .hero .main__text .line img {
        max-height: 46px;
    }

    .hero .main__text .judge {
        left: -55px;
        top: 65px;
    }

    .hero .main__text .hands {
        right: -65px;
    }

    .about {
        flex-direction: column;
    }

    footer {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product__box .project__block__box {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .product__box .project__block .name h3 {
        font-size: 30px;
    }

    .product__box .project__block .dates__box {
        gap: 0;
        flex-direction: column;
    }
}

@media only screen and (max-width: 700px) {
    .projects {
        grid-template-columns: 1fr;
    }

    .objectives .info__box .img img {
        max-height: 200px;
    }

    .features .feature__container .feature__full img {
        max-height: 125px;
    }

    .callback__cover {
        padding: 44px 0;
    }

        .callback__cover .callback h2 {
            font-size: 34px;
        }

        .callback__cover .callback p {
            font-size: 24px;
            line-height: 24px;
        }

        .callback__cover .callback .button {
            font-size: 26px;
            padding: 8px 50px;
            margin-top: 30px;
        }
}

@media only screen and (max-width: 650px) {

    .advantages .container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .advantages .star__yellow {
        top: 6%;
        left: 0%;
    }

    .advantages .star__green {
        top: 61%;
        left: 20%;
    }

    .advantages .star__orange {
        top: 43%;
        left: 80%;
    }

    .advantages .star__blue {
        top: 95%;
        left: 94%;
    }

    .social .container {
        flex-direction: column;
    }

    section h2 {
        font-size: 44px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 500px) {
    .hero .main__text .judge {
        left: 0;
        top: -5px;
    }

    .hero .main__text .star__yellow {
        right: 0px;
    }

    .hero .main__text .star__blue {
        left: 25px;
    }

    .hero .main__text .star__green {
        right: -30px;
        bottom: -30px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .team .slide .text .name {
        font-size: 15px;
    }

    .team .slide .text .role {
        font-size: 13px;
        line-height: 16px;
    }
    }

@media only screen and (max-width: 450px) {
    .features .feature__container {
        padding: 25px;
    }

        .features .feature__container .feature__preview img {
            right: 0px;
            top: 5px;
        }

    .product__box .project__block .name h3 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 375px) {
    .team .slide {
        grid-template-columns: 160px 1fr;
    }
        .team .slide .imgs__box {
            width: 160px;
        }
}

@media only screen and (max-width: 350px) {
    .product__box .project__block .head {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .product__box .project__img {
        max-width: 210px;
    }

        .product__box .project__img img {
            max-width: 210px;
        }
}

@media only screen and (max-width: 325px) {
    .features .feature__container .feature__preview h2 {
        font-size: 22px;
        line-height: 26px;
    }

    .hero .main__text .line .title {
        font-size: 50px;
    }

    .hero .main__text .line h1 {
        font-size: 42px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 320px) {
    .team .slide {
        grid-template-columns: 125px 1fr;
    }

        .team .slide .imgs__box {
            width: 125px;
        }
}

@media only screen and (max-height: 375px) {
    .navigation .menu__mobile.visible {
        max-height: calc(100dvh - 30px);
    }
}
