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

    :root {
        --content-width: 768px;
    }

    .main-title span {
        font-size: 35px;
    }

}


@media screen and (max-width: 1560px) {
    :root {
        --content-width: 50%;
    }
}



@media screen and (max-width: 1180px) {
    :root {
        --content-width: 100%;
    }

    [class*="__container"] {
        max-width: 1180px;
    }

    .quiz-container {
        padding: 30px 16px 30px 16px;
    }

    .quiz-inner {
        margin-top: 40px;
        max-width: 652px;
    }

    .main-wrapper {
        flex-direction: column;
    }

    .main-backdrop {
        display: none;
    }

    
    .mobile-backdrop {
        position: relative;
        display: block;
        max-height: 544px;
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
    }

    .mobile-backimage {
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .mobile-backimage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-title {
        display: none;
        position: absolute;
        z-index: 1;
        bottom: 40px;
        left: 40px;
    }

    .mobile-title.current-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: displayAnim .7s ease;
    }

    .mobile-title span:not(:last-child) {
        margin-bottom: 10px;
    }

    .mobile-title span {
        font-family: 'Poppins';
        display: inline-block;
        padding: 20px;
        background: #C59A61;
        backdrop-filter: blur(27px);
        font-style: normal;
        font-weight: 300;
        font-size: 35px;
        line-height: 100%;
        color: #FFFFFF;
    }


    /* .modal-contacts__wrapper {
        height: 80vh;
    } */
}



@media screen and (max-width: 768px) {
    header {
        padding: 10px 0 20px 0;
    }

    .header-logo {
        width: 90px;
        height: 70px;
        display: flex;
        justify-content: center;
    }

    .btn-sm {
        padding: 14px 60px 12px 20px;
    }

    .btn-sm span {
        font-weight: 600;
        font-size: 12px;
        line-height: 12px;
    }

    .btn-sm span::after {
        left: calc(100% + 20px);
        width: 20px;
        height: 12px;
        background-position: 50%;
        background-size: contain;
    }

    .btn-tg.larg {
        min-width: 132px;
        padding: 12px 10px 10px 10px;
    }

    .larg span {
        font-size: 12px;
        line-height: 18px;
    }

    .progress-line {
        height: 6px;
    }

    .mobile-backdrop {
        margin-top: 10px;
    }

    .mobile-title span {
        font-weight: 300;
        font-size: 20px;
        line-height: 100%;
        padding: 10px;
    }

    .mobile-title span:not(:last-child) {
        margin-bottom: 5px;
    }

    .mobile-title {
        bottom: 20px;
        left: 16px;
    }

    .quiz-container {
        padding: 20px 16px 28px 16px;
    }

    .quiz-title {
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .quiz-questionbox {
        gap: 10px;
    }

    .quiz-q {
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
    }

    .quiz-q_info span {
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
    }

    .counter--q_name {
        font-weight: 600;
        font-size: 14px;
        line-height: 21px;
    }

    .counter--q_desc {
        font-weight: 300;
        font-size: 12px;
        line-height: 15px;
    }

    .count-btn {
        width: 24px;
        height: 24px;
    }

    .count-btn.amount-minus::after {
        width: 10px;
        height: 2px;
        background-position: 50%;
    }

    .count-btn.amount-plus::after {
        width: 10px;
        height: 10px;
        background-position: 50%;
    }

    .number-amount {
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        max-width: 38px;
    }

    .btn-lg {
        padding: 15px 60px 11px 20px;
    }

    .btn-lg span {
        font-weight: 600;
        font-size: 12px;
        line-height: 12px;
    }

    .btn-lg span::after {
        position: absolute;
        content: '';
        left: calc(100% + 20px);
        width: 22px;
        top: -3px;
        height: 16px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgN0MwLjQ0NzcxNSA3IDAgNy40NDc3MiAwIDhDMCA4LjU1MjI4IDAuNDQ3NzE1IDkgMSA5VjdaTTIxLjcwNzEgOC43MDcxMUMyMi4wOTc2IDguMzE2NTggMjIuMDk3NiA3LjY4MzQyIDIxLjcwNzEgNy4yOTI4OUwxNS4zNDMxIDAuOTI4OTMyQzE0Ljk1MjYgMC41Mzg0MDggMTQuMzE5NSAwLjUzODQwOCAxMy45Mjg5IDAuOTI4OTMyQzEzLjUzODQgMS4zMTk0NiAxMy41Mzg0IDEuOTUyNjIgMTMuOTI4OSAyLjM0MzE1TDE5LjU4NTggOEwxMy45Mjg5IDEzLjY1NjlDMTMuNTM4NCAxNC4wNDc0IDEzLjUzODQgMTQuNjgwNSAxMy45Mjg5IDE1LjA3MTFDMTQuMzE5NSAxNS40NjE2IDE0Ljk1MjYgMTUuNDYxNiAxNS4zNDMxIDE1LjA3MTFMMjEuNzA3MSA4LjcwNzExWk0xIDlIMjFWN0gxVjlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
    }

    .quiz-opt {
        margin-top: 30px;
    }

    .footer__wrapper {
        padding: 0 16px;
    }

    .copyright {
        font-weight: 400;
        font-size: 10px;
        line-height: 13px;
    }

    .footer-menu ul > li > a {
        font-weight: 400;
        font-size: 10px;
        line-height: 13px;
    }

    .footer-menu ul {
        gap: 20px 30px;
    }

    .radio--q > span,
    .checkbox--q > span {
        font-weight: 600;
        font-size: 14px;
        line-height: 14px;
        padding: 18px 28px 14px 28px;
    }

    .quiz-row {
        gap: 10px;
    }

    .quiz-row:not(:last-child) {
        margin-bottom: 18px;
    }

    .q--withpattern .q--range-val {
        position: absolute;
        top: 10%;
    }

    .q--range-val {
        font-weight: 400;
        font-size: 30px;
        line-height: 45px;
    }

    .q--range-pattern {
        margin-bottom: 30px;
    }

    .q--rval {
        font-weight: 300;
        font-size: 12px;
        line-height: 18px;
    }

    .quiz-contact-form {
        margin-top: 20px;
    }

    .contact-row > label {
        font-weight: 600;
        font-size: 12px;
        line-height: 15px;
    }

    .contact-row:not(:last-child) {
        margin-bottom: 10px;
    }

    input[type='text'], input[type='tel'], input[type='email'], input[type='url'], textarea {
        padding: 10px;
        font-size: 14px;
    }


    .modal-contacts__desc h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .modal-contacts {
        padding: 76px 16px 25px 35px;
    }

    .modal-contacts__desc p {
        font-size: 14px;
        line-height: 18px;
    }

    .modal-contacts__adress h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .contacts__adressbox {
        font-size: 14px;
        line-height: 170%;
    }

    .modal-contacts__more a, .modal-contacts__more span {
        font-size: 14px;
        line-height: 170%;
    }

    .admin-bar .close-contacts {
        top: calc(44px + 32px);
    }

    .admin-bar .close-contacts,
    .close-contacts {
        top: 20px;
        right: 16px;
    }

}