@media (max-width: 1500px) {
    header .btn {
        display: none;
    }
}

@media (max-width: 1220px) {
    header .btn,
    header .nav-menu,
    header .social {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .how-we-work .content {
        grid-template-columns: 1fr 1fr;
    }

    .footer>div {
        flex-basis: calc(70%/3);
    }

    .footer {
        flex-wrap: wrap;
    }

    footer .logo img {
        width: 247px;
    }

    footer .logo-block p {
        margin-left: 0;
    }

    footer .footer {
        display: grid;
        grid-auto-columns: 1.3fr 1fr 1fr;
        grid-template-areas:
            "column1 column2 column3"
            "column4 column4 column4"
    }

    footer .footer .logo {
        grid-area: column1;
    }


    footer .footer .menu {
        grid-area: column2;
    }

    footer .footer .content {
        grid-area: column3;
    }

    footer .footer .copy {
        grid-area: column4;
        grid-column: 1/4;
        max-width: 100%;
        flex-direction: row;
    }

    footer .footer .copy a {
        width: max-content;
    }

    header .mobile-menu {
        display: block;
    }

    .quiz .quiz-wrapper .right-block {
        display: none;
    }

    .quiz .present.mobile-block {
        display: block;
    }

    .quiz .descripttion-quiz {
        display: none;
    }

    .quiz .present.mobile-block>div.flex{
        gap: 20px;
    }

    .quiz form {
        flex-basis: 85%;
    }
}

@media (max-width: 950px) {
    .title-form {
        font-size: 20px;
        margin: 0;
    }

    form svg {
        height: 20px;
        width: 20px;
    }

    .order-call-form form input[name="name"]::placeholder,
    .order-call-form form input[name="phone"]::placeholder {
        font-size: 15px;
    }

    .order-call-form form input[name="name"], .order-call-form form input[name="phone"] {
        border: 1px solid #BDBDBD;
        border-radius: 8px;
        padding: 15px 14px;
    }

    .order-call-form {
        border-radius: 20px;
    }

    #orderCall svg {
        height: 1em;
        width: 1em;
    }

    .order-call-form {
        padding: 27px 32px;
    }

    .description-form {
        margin-top: 15px;
    }

    .order-call-form form input[type="submit"] {
        background: #F1AB5A;
        border: navajowhite;
        width: max-content;
        padding: 17px 12%;
        font-family: InterSemiBold;
        font-size: 15px;
        border-radius: 12px;
        color: var(--text-color-white);
    }

    input[type="checkbox"] {
        height: 20px;
        width: 20px;
        border: 1px solid #BDBDBD;
        border-radius: 6px;
    }

    .step2 .img-content {
        display: none;
    }

    .quiz .question-container .step2  .change-step {
        padding: 22px 4em;
    }

    .step3 .change-step {
        padding: 22px 3em;
    }
}

@media (max-width: 900px) {
    .title-banner.bold span {
        font-size: 35px;
    }

    header .social {
        display: flex;
        gap: 5px;
    }

    .banner-img {
        height: 586px;
        width: 100%;
        background-size: cover;
        position: relative;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position-x: 71%;
    }
}

@media (max-width: 768px) {
    header {
        height: 75px;
    }

    .container {
        padding-left: 50px;
        padding-right: 50px;
    }

    header .container {
        padding-right: 51px;
        padding-left: 42px;
    }

    header .logo img {
        width: 65%;
    }

    header .social img {
        width: 100%;
        height: 30px;
    }

    header .social a:first-child img {
        height: 27px;
        margin-top: auto;
    }

    header .social a:first-child {
        display: flex;
    }

    header .contact {
        gap: 19px;
    }

    .banner .text-block {
        position: relative;
        z-index: 2;
        top: 16%;
        left: 6.5%;
        width: 90%;
    }

    .banner .from-maker {
        padding: 10px 17px;
    }

    .title-banner {
        margin: 12px 0 12px 0;
    }

    .banner .tizers .tizer p {
        margin-bottom: 0px;
    }

    .our_production .title-our-block {
        font-size: 24px;
    }

    .our_production .row-1 img, .our_production .row-3 img {
        max-height: 137px;
        object-fit: cover;
    }

    .our_production .row-2 img {
        max-height: 226px;
        object-fit: cover;
    }

    .our_production .row-1, .our_production .row-2, .our_production .row-3 {
        gap: 21px;
        margin-bottom: 21px;
    }

    .title-how-we-work {
        font-size: 24px;
    }

    .how-we-work-wrapper {
        padding-top: 3.8%;
        padding-bottom: 5.8%;
    }

    .how-we-work .title-block p:last-child {
        margin-top: 6px;
        margin-bottom: 27px;
    }

    .how-we-work .item {
        background: #FFFFFF;
        border-radius: 20px;
        border: 1px dashed #BDBDBD;
        padding: 22px 18px 12px 18px;
    }

    .how-we-work .item .top img {
        width: 37px;
    }

    .how-we-work .item .top p {
        font-size: 35px;
    }

    .how-we-work .item .middle p {
        font-size: 20px;
        margin-top: 16px;
        margin-bottom: 0;
    }

    .how-we-work .item .bottom p {
        margin-top: 7px;
    }

    .how-we-work .content {
        gap: 15px;
    }

    footer .logo img {
        width: 110px;
    }

    footer .nav-link {
        width: max-content;
    }

    footer .footer .menu {
        margin: auto;
        height: 80%;
    }

    footer .column.contact {
        margin-top: 14px;
    }

    footer .contact .order-call {
        padding: 15px 32px;
        margin-top: 19px;
    }

    footer .footer .copy {
        margin-top: 9px;
    }

    footer .footer .copy p:last-child {
        margin-bottom: 4px;
    }

    .how-we-work .content {
        gap: 18px;
        margin-top: 2%;
    }

    footer .logo img {
        width: 112px;
    }

    .footer {
        padding: 1.5% 6.5%;
    }

    footer .logo img {
        margin-bottom: 1%;
    }

    footer .logo-block p {
        margin-bottom: 20px;
    }

    footer .menu {
        margin-top: 13px;
    }

    footer .nav-link {
       gap: 3px;
    }

    footer .contact {
        margin-top: 13px;
    }

    footer .nav-link {
        flex-direction: column;
        width: max-content;
        margin: auto;
        padding-left: 26px;
    }

    footer .contact .order-call {
        padding: 14px 31px;
        margin-top: 14px;
    }

    .order-call-form {
        max-width: 363px;
        padding: 27px 27px;
    }

    .description-form {
        margin-top: 8px;
        margin-bottom: 26px;
    }

    .order-call-form form {
        flex-direction: column;
        margin-top: 0px;
        gap: 7px;
    }

    form div.flex p a,
    form div.flex p:has(a) {
        font-size: 13px;
    }

    .order-call-form form input[type="submit"] {
        width: 100%;
        margin-top: 12px;
    }

    .order-call-form form {
        margin-bottom: 0;
    }

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

    .quiz-wrapper {
        padding-left: 28px;
    }

    .quiz .title-quiz {
        font-size: 24px;
        margin-bottom: 0px;
        margin-top: 21px;
    }

    .present>p {
        margin-bottom: 10px;
        margin-top: 12px;
    }

    .quiz .present.mobile-block .item {
        gap: 5%;
        align-items: center;
        padding: 13px 13px;
        background: #E6E6E6;
        border-radius: 8px;
        border: 1px dashed #343B4C;
        margin-bottom: 2%;
        width: 34%;
    }

    .quiz .present.mobile-block>div.flex {
        gap: 12px;
    }

    .quiz .step-block .step {
        width: 100%;
        background-color: #E6E6E6;
        height: 8px;
        border-radius: 100px;
    }

    .quiz .step-block {
        width: 71%;
    }

    .quiz .title-question {
        margin-top: 6px;
        font-size: 20px;
    }

    .input-block {
        gap: 8px;
    }

    .input-block label {
        max-height: 155px;
        max-width: 155px;
        position: relative;
        flex-basis: 31%;
    }

    .input-block label img {
        height: 152px;
        max-width: 152px;
        border-radius: 12px;
        object-fit: cover;
        border: 3px solid transparent;
        width: 100%;
    }

    .quiz form {
        flex-basis: 97%;
    }

    .quiz .present.mobile-block .item {
        gap: 5%;
        align-items: center;
        padding: 13px 13px;
        background: #E6E6E6;
        border-radius: 8px;
        border: 1px dashed #343B4C;
        margin-bottom: 2%;
        width: 30%;
    }

    .change-step {
        background-color: #F1AB5A;
        border-radius: 12px;
        padding: 16px 2.7em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        margin-top: 3em;
        cursor: pointer;
    }

    .question-container:has(.step2) .step2 .title-question {
        margin-top: 5px;
    }

    .quiz .question-container .step2 .input-block input {
        display: block;
        max-width: 94px;
        border: 2px solid #BDBDBD;
        border-radius: 10px;
        height: 39px;
        margin-top: 11px;
    }

    .step2 .input-block {
        gap: 16px;
    }

    .step2 .needFroze {
        margin-top: 1.4em;
    }

    .quiz .question-container .nav  .change-step {
        padding: 17px 3em;
    }

    .quiz .question-container .step2  .change-step {
        background-color: #F1AB5A;
        border-radius: 12px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        margin-top: 4.5em;
        cursor: pointer;
    }

    .needFroze label:before {
        height: 23px;
        width: 23px;
    }

    .needFroze div:has(input[type="radio"]:checked) label:before,
    .quiz.closet .step3 .needFroze label:before  {
        border: 5px solid #F1AB5A;
        height: 17px;
        width: 17px;
    }

    .step3 .needFroze {
        gap: 8px;
    }

    .question-container:has(.step4) .step-block,
    .question-container:has(.step5) .step-block,
    .question-container:has(.step6) .step-block {
        margin-bottom: 1.7%;
    }

    .question-container:has(.step4) .step4 .title-question,
    .question-container:has(.step5) .step5 .title-question,
    .question-container:has(.step6) .step6 .title-question {
        margin-bottom: 2.5%;
    }

    .question-container:has(.step4) .step4 .input-block label p,
    .question-container:has(.step5) .step5 .input-block label p,
    .question-container:has(.step8) .step8 .input-block label p,
    .question-container:has(.step7) .step7 .input-block label p {
        margin-top: 2%;
    }

    .question-container:has(.step4) .step4 .change-step {
        margin-top: 3em;
    }

    .step5 .input-block label img {
        max-width: 118px;
        height: 127px;
    }

    .question-container:has(.step5) .step5 .input-block label p {
        margin-top: 7%;
    }

    .question-container:has(.step5) .step5 .change-step {
        margin-top: 3.5em;
    }

    .question-container:has(.step4),
    .question-container:has(.step5),
    .question-container:has(.step7),
    .question-container:has(.step8),
    .question-container:has(.step6) {
        margin-top: 0;
    }

    .step6 .input-block label img {
        max-width: 148px;
        height: 150px;
    }

    .question-container:has(.step6) .step6 .input-block label p {
        margin-top: 5%;
    }

    .question-container:has(.step7) .step-block {
        margin-bottom: 2%;
    }

    .step7 .needFroze {
        margin-top: 15px;
    }

    .step7 .needFroze>div {
        margin-bottom: 8px;
    }

    .step7 .plan {
        margin-top: 1em;
    }

    .step7 .plan .file {
        margin-top: 11px;
    }

    .step7 .file-btn {
        padding: 16px 25px;
    }

    .step7 .change-step {
        margin-top: 1.6em;
    }


    .question-container:has(.step8) .step-block {
        margin-bottom: 0%;
    }

    .step8 .success-step {
        margin-top: 13px;
        margin-bottom: 7px;
        color: #F1AB5A;
        font-size: 20px;
    }

    .step8 .needFroze {
        margin-top: 0;
    }

    .step8 .needFroze>div {
        margin-bottom: 7px;
    }

    .step8 input[name="quizPhone"] {
        border: 1px solid #BDBDBD;
        border-radius: 10px;
        padding: 15px 23px;
        width: 52.2vw;
    }

    .step8 input[type="submit"] {
        background: #F1AB5A;
        border: navajowhite;
        width: max-content;
        padding: 16px 9%;
        font-family: InterSemiBold;
        font-size: 15px;
        border-radius: 12px;
        color: var(--text-color-white);
        /* width: 21vw; */
    }

    .step8 .quiz-contact {
        margin-bottom: 7px;
    }

    .step8 .change-step {
        margin-top: 1.2em;
    }

    .quiz .container {
        margin: auto;
        margin-top: 8%;
        margin-bottom: 8%;
    }

    .step8 .quiz-contact {
        margin-top: 13px;
    }

    .quiz-wrapper {
        border-radius: 20px;
    }

    .quiz.closet .step1  label p.for-margin {
        margin-right: -2px;
    }

    .quiz.closet .step5 .input-block p {
        font-size: 13px;
    }

}

@media (max-width: 600px) {
    header .contact .email {
        display: none;
    }

    footer .footer {
        display: grid;
        grid-auto-columns: 1fr 1.3fr;
        grid-template-areas: "column2 column3"
        "column1 column1"
            "column4 column4";
    }

    footer .footer .logo-block {
        grid-area: column1;
    }

    footer .nav-link {
        flex-direction: column;
        width: max-content;
        margin: 0;
        padding-left: 0;
    }

    footer .footer .menu {
        margin: auto 0;
    }

    .how-we-work .content {
        grid-template-columns: 1fr;
    }

    footer .footer .copy {
        grid-column: 1/3;
    }

    .step4 .input-block,
    .step6 .input-block,
    .step1 .input-block,
    .step5 .input-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .step1 .input-block label {
        max-height: 100%;
    }

    .step5 .input-block label img {
        max-width: 155px;
        height: 155px;
    }

    .step5 .input-block label,
    .step6 .input-block label {
        max-height: 100%;
    }

    .quiz .question-container .step2  .change-step {
        background-color: #F1AB5A;
        border-radius: 12px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48%;
        box-sizing: border-box;
        margin-top: 4.5em;
        cursor: pointer;
    }

    .quiz-wrapper {
        padding-left: 0px;
        box-shadow: none;
        background: none;
    }

    .question-container:has(.step5) .step5 .change-step {
        margin-top: 0.5em;
    }

    .step7 .file-btn {
        box-shadow: 0px 0px 8.9px 0px #0000001A;

    }

    .quiz.closet .step1 .input-block {
        align-items: start;
    }

    footer .footer .logo {
        margin-top: 7%;
    }
}

@media (max-width: 650px) {
    .quiz-contact {
        flex-direction: column;
        width: 100%;
    }

    .quiz-contact input {
        width: 100%;
    }
}

@media (max-width: 520px) {
    header .contact .phone,
    header .contact .social {
        display: none;
    }

    .quiz .present.mobile-block .item {
        width: 90%;
    }

    .quiz .present.mobile-block>div.flex {
        flex-direction: column;
    }
}

@media (max-width: 460px) {
    .content-mobile-menu {
        flex-direction: column;
        gap: 30px;
    }

    #mobileMenu {
        height: max-content;
        padding: 6.5% 0;
    }

    #orderCall {
        width: 96vw;

    }

    .order-call-form {
        max-width: 96vw;
        padding: 27px 16px;
    }

    .description-form {
        margin-top: 8px;
        margin-bottom: 24px;
    }
}

@media (max-width: 360px) {
    .title-banner.bold span {
        font-size: 33px;
    }

    header .container {
        padding-right: 20px;
        padding-left: 11px;
    }

    .banner .text-block {
        left: 5.5%;
    }

    .banner .from-maker {
        padding: 7px 12px;
    }

    .title-banner {
        margin: 17px 0 15px 0;
    }

    .banner .tizers .tizer p {
        margin-top: 12px;
    }

    .banner .tizers .tizer p:before {
        content: '';
        background: url("/assets/design/uyut68/images/tizer.svg");
        height: 1.2em;
        width: 1.2em;
        background-repeat: no-repeat;
        background-size: contain;
        padding-right: 8px;
        margin-bottom: auto;
    }

    .banner .tizers {
        width: 83%;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .row-1 {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-2 {
        grid-template-columns: 1fr;
    }

    .our_production .row-1 img,
    .our_production .row-3 img {
        max-height: 108px;
    }

    .our_production .row-1 img:last-child {
        grid-column: 1/3;
        max-height: 223px;
    }

    .our_production .row-2 img {
        max-height: 223px;
    }

    .our_production img {
        border-radius: 8px;
    }

    .our_production .title-our-block {
        margin-bottom: 18px;
    }

    .our_production .row-1,
    .our_production .row-2,
    .our_production .row-3 {
        gap: 10px;
        margin-bottom: 10px;
    }

    .our_production .title-our-block {
        margin-bottom: 18px;
    }

    .how-we-work-wrapper {
        padding-top: 11.8%;
    }

    .how-we-work .title-block p:last-child {
        margin-top: 6px;
        margin-bottom: 14px;
    }

    .how-we-work .item .bottom p {
        margin-top: 7px;
        line-height: 123%;
        margin-bottom: 6px;
    }

    .how-we-work .content {
        gap: 9px;
        margin-top: 2%;
    }

    .how-we-work-wrapper {
        padding-bottom: 11%;
    }

    .how-we-work {
        margin-bottom: 17.5%;
    }

    .footer {
        padding: 4.5% 5.5%;
    }

    footer .footer .logo {
        margin-top: 10%;
    }

    footer .logo-block p {
        margin-bottom: 10px;
    }

    #mobileMenu {
        padding: 4.5% 0;
    }

    #mobileMenu .logo svg {
        padding-top: 11px;
        padding-right: 5px;
    }

    .content-mobile-menu {
        margin-top: 36px;
        margin-left: 10px;
    }

    .content-mobile-menu {
        gap: 43px;
    }

    #mobileMenu .social img {
        height: 50px;
        width: 42px;
    }

    .quiz-wrapper {
        background: none;
        box-shadow: none;
        padding-left: 0;
        flex-direction: column;
    }

    .present>p {
        margin-bottom: 10px;
        margin-top: 2px;
    }

    .quiz .present.mobile-block>div.flex {
        gap: 2px;
    }

    .quiz .present.mobile-block .item {
        width: 100%;
        box-sizing: border-box;
    }

    .quiz .step-block {
        width: 100%;
        margin: 22px 0 17px 0;
    }

    .step1 .input-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .step1 .input-block label {
        max-height: max-content;
    }

    .change-step {
        margin-top: 1em;
    }

    .quiz .right-block {
        padding: 0;
    }

    .quiz .right-block .img {
        height: 328px;
        padding-top: 0;
        width: 100%;
        overflow: hidden;
        background: linear-gradient(102.57deg, #FFFFFF -23.75%, #F1AB5A 182.08%);
        border-radius: 15px;
    }

    .quiz .right-block img {
        height: 143%;
        width: 100%;
        object-fit: contain;
        border-radius: 15px;
        scale: -1 1;
        padding-top: 0;
    }

    .quiz .quiz-wrapper .right-block {
        display: flex;
    }

    .quiz .right-block .present {
        display: none;
    }

    .about-owner {
        margin-bottom: 10px;
    }

    .quiz .title-quiz {
        display: none;
    }

    .quiz .step1 .title-quiz {
        display: block;
    }

    .question-container:has(.step2) .step2 .title-question {
        margin-top: 2px;
    }

    .step2 .needFroze {
        margin-top: 15px;
    }

    .quiz .question-container .step2  .change-step {
        margin-top: 1.5em;
    }

    .quiz .question-container .nav .change-step {
        width: 48%;
        padding: 17px 10px;
        box-sizing: border-box;
    }

    .quiz .step3 .nav {
        margin-top: auto;
        margin-bottom: 0;
    }

    .question-container:has(.step4) .step-block, .question-container:has(.step5) .step-block, .question-container:has(.step6) .step-block {
        margin-bottom: 4.7%;
    }

    .step4 .input-block,
    .step5 .input-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .step4 .input-block label {
        height: 100%;
        max-height: 100%;
    }

    .question-container:has(.step4) .step4 .input-block label p,
    .question-container:has(.step5) .step5 .input-block label p,
    .question-container:has(.step8) .step8 .input-block label p,
    .question-container:has(.step7) .step7 .input-block label p {
        margin-top: 8%;
    }

    .question-container:has(.step4) .step4 .change-step {
        margin-top: 12px;
    }

    .step6 .input-block label {
        margin-bottom: auto;
    }

    .step7 .file-btn {
        padding: 16px 25px;
        box-shadow: 0px 0px 8.9px 0px #0000001A;
    }

    .step7 .quiz .title-question {
        margin-top: 15px;
    }

    .step7 .needFroze {
        margin-top: 7px;
    }

    .step7 .plan {
        margin-top: 13px;
    }

    .step7 .plan .file {
        margin-top: 20px;
    }

    .step7 .change-step {
        margin-top: 1em;
    }

    .step8 .needFroze {
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }

    .question-container:has(.step8) .step8 .title-question {
        margin-bottom: 11px;
    }

    .step8 .quiz-contact {
        margin-top: 7px;
    }

    .for-mobile {
        display: block;
    }

    .step8 .quiz-contact input[type="submit"] {
        display: none;
    }

    .step8 input[name="quizPhone"] {
        width: 88vw;
    }

    .step8 input[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }

    .quiz.closet .step5 .input-block p {
        font-size: 15px;
    }

    .quiz.closet .step5 label[for="basesTwolevel"] p {
        margin-right: -17px;
    }

    .our_production .owl-nav {
        display: none;
    }
}

@media (max-width: 340px) {
    .step2 .input-block {
        gap: 16px;
        flex-wrap: wrap;
    }
}

@media (max-width: 320px) {
    footer .footer {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-areas:
                "column2"
                "column3"
        "column1"
            "column4";
    }

    footer .footer .copy {
        grid-column: 1/2;
    }
}