.hidden-desctop {
    display: none;
}

@media only screen and (max-width: 1024px),
only screen and (max-device-width: 1024px) {
    .hidden-desctop {
        display: block;
    }

    .hidden-mob {
        display: none;
    }

    .mob-menu-btn {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 44px;
        height: 44px;
        border-radius: 4px;
        border: 1px solid var(--green);
        padding: 10px;
    }

    .mob-menu-btn span {
        display: block;
        border-radius: 10px;
        width: 100%;
        height: 3px;
        background-color: var(--green);
    }

    #topslider .slider-item .image-block {
        height: 400px;
    }

    #topslider .slider-item .text-block .title {
        font-size: 2rem;
    }

    .text-right.panel ul>li {
        font-size: 1rem;
    }

    .work-container .work-item {
        width: calc(100% / 2 - 10px);
    }
}

@media only screen and (max-width: 820px),
only screen and (max-device-width: 820px) {
    #topslider .slider-item .text-block {
        width: 60%;
        left: 5%;
    }

    .content-wrap .text-container {
        width: 100%;
    }

    .content-wrap .text-right {
        width: 100%;
    }

    .preim-container .preim-item {
        width: calc(100% / 2 - 10px);
    }

    .preim-container .preim-item .circle {
        margin: auto;
    }

    .nextprojects-item {
        width: calc(100% / 2 - 10px);
    }

    .form-wrap {
        gap: 40px;
    }

    .form-wrap>.right,
    .form-wrap>.left {
        width: 100%;
    }

    .swiper-slide {
        transform: none !important;
    }

    .swiper-slide-active {
        transform: none !important;
    }

    .swiper-slide-prev,
    .swiper-slide-next {
        transform: none !important;
    }

    .projects-item {
        transform: scale(1);

    }

    #modalQuiz.overflow .modal-container {
        width: 90%;
    }

    #modalQuiz {
        overflow-y: auto;
        padding-bottom: 5vh;
    }

    .form-wrap>.center {
        width: 100%;
    }
}

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {

    #topslider .slider-item .text-block {
        width: 90%;
        left: 5%;
    }

    .work-container .work-item {
        width: 100%;
    }

    .produssers-item {
        width: 100%;
    }

    .logo-link .text-logo {
        display: none;
    }

    .preim-container .preim-item {
        width: 100%;
    }

    .nextprojects-item {
        width: 100%;
    }

    .overflow .modal-container-card {

        width: 90%;
    }

    #topslider .slider-item .text-block .title {
        font-size: 1.3rem;
    }

    .button-top-modal.premium {
        width: 100px;
        height: 100px;
        top: 44vh;
        right: 33%;
        font-size: .7rem;
    }

    .modal-header .title {
        font-size: .7rem;
        padding: 10px 20px;
    }

    .quiz-container .quiz-item .title {

        font-size: 1rem;
    }

    .quiz-container .quiz-item .description {
        font-size: .8rem;
    }

    .ansfer-wrap .input-block {
        width: 100%;
    }
}

@media only screen and (max-width: 320px),
only screen and (max-device-width: 320px) {

    h1,
    .h1 {
        font-size: 1.5rem;
    }
}