@media (orientation: portrait) {

    .container-prsh,
    .header,
    .container {
        display: none;
    }

    .mobile-overlay {
        /* position: fixed; */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #0e0e0e;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
        text-align: center;
    }

    /* .mobile-overlay img {
        max-width: 200px;
        margin-bottom: 20px;
    } */

    .mobile-overlay p {

        margin-bottom: 30px;
        font-weight: 400;
        font-size: clamp(5px, 4.5vw, 21px);
        line-height: 120%;
        text-align: center;
        color: #c9c9c9;
        width: 95%;
        width: 100%;
        margin: 8% 0 1% 0;
    }

    .mobile-overlay button {
        background-color: #FFD400;
        font-weight: 600;
        font-size: 25px;
        line-height: 120%;
        color: #000;
        padding: 14px 28px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        width: 95%;
    }

    body {
        overflow: hidden;
    }
}


@media (max-width: 600px) {
    .intro {
        font-size: clamp(7px, 1.3vw, 10px);
    }

    .wheel-model svg {
        padding: 2%;
    }

    header {
        display: none;
    }

    .wheel-model {
        border-radius: 20px;
    }

    .header-settings-panel-right {
        font-size: clamp(6px, 1vw, 20px);
    }

    .order-modal h1 {
        margin-bottom: 2%;
    }

    .spaced-bottom {
        font-size: clamp(6px, 1vw, 30px);
    }

    .preview-right {
        margin-bottom: 1%;
    }

    .preview-right div:first-child {
        margin-bottom: 1%;
    }

    .preview-right .label {
        margin-bottom: 1%;
    }

    .preview-left {
        aspect-ratio: 2 / 1;
    }

    .container-prsh {
        height: 92vh;
    }

    .price-old::before {
        left: -1px;
        right: -1px;
    }

    .descr-anatomy {
        font-size: clamp(4px, 1.5vw, 10px);
    }

    .block-descr-anatomy {
        font-size: clamp(7px, 1vw, 16px);
    }

    .back-btn img {
        height: 1.5vw;
    }

    h1 {
        font-size: clamp(9px, 4vw, 80px);
    }

    #orderFormTuning div p {
        font-size: clamp(4px, 1.5vh, 14px);
    }

    .nav-btn {
        height: clamp(13px, 4vw, 72px);
        width: clamp(13px, 4vw, 72px);
    }

    .back-btn {
        font-size: clamp(7px, 1vw, 18px);
    }

    .sub-counter {
        font-size: clamp(2px, 1vw, 5px);
    }

    .nav-content.active h3,
    .materials h3,
    .shadow-header h3 {
        font-size: clamp(6px, 1vw, 30px);
    }

    .cloth,
    .cloth2,
    .cloth3 {
        font-size: clamp(3px, 1vw, 16px);
    }

    .material {
        border-radius: 5px;
    }

    .material img {
        border-radius: 5px;
    }

    .color img,
    .color-img {
        border-radius: 5px;
    }

    form#orderForm .submit-button,
    form#orderForm2 .submit-button,
    form#orderForm22 .submit-button,

    form#orderFormTuning .submit-button {
        font-size: clamp(6px, 1vw, 30px);
    }

    .order-preview p {
        font-size: clamp(4px, 1.5vh, 14px);
    }

    .policy {
        font-size: clamp(3px, 1vw, 18px);
    }

    .order-h3 {
        font-size: clamp(5px, 1vw, 25px);
    }

    .order-modal h1 {
        font-size: clamp(10px, 1.5vw, 36px);
    }

    form#orderForm input,
    form#orderForm textarea,
    form#orderForm2 input,
    form#orderForm2 textarea,
    form#orderForm22 input,
    form#orderForm22 textarea,
    form#orderFormTuning input,
    form#orderFormTuning textarea {
        padding: 2.5% 7px;
        font-size: clamp(2px, 1vw, 25px);
        /* height: 6%; */
        height: auto;
    }

    .color {
        border-radius: 5px;
    }

    .reset-btn {
        font-size: clamp(4px, 1vw, 20px);
    }

    .marks h2 {
        font-size: clamp(4px, 1vw, 30px);
    }

    .mark-cost {
        font-size: clamp(5px, 1vw, 30px);
    }

    .filter-option {
        font-size: clamp(7px, 1vw, 40px);
    }

    .share-header {
        font-size: clamp(5px, 1.5vh, 30px);
    }

    #shareLinkInput {
        font-size: clamp(3px, 1.5vh, 20px);
    }

    #copyLinkButton {
        font-size: clamp(5px, 1.5vh, 20px);
    }

    .price-new {
        font-size: clamp(5px, 3vw, 45px);
    }

    #applyFilter {
        font-size: clamp(7px, 1vw, 40px);
    }

    .step-number {
        font-size: clamp(5px, 1vw, 15px);
    }

    .step p {
        font-size: clamp(7px, 1vw, 20px);
    }

    .custom-select select {
        font-size: clamp(8px, 1vw, 20px);
    }

    h2 {
        font-size: clamp(5px, 1.5vw, 23px);
    }

    .option p {
        font-size: clamp(7px, 1vw, 18px);
    }

    .option .radio {
        position: absolute;
        top: 1px;
        right: 5px;
        height: 35px;
        width: 2vw;
    }

    .main_button {
        font-size: clamp(7px, 1vw, 25px);
    }

    .custom-select {
        min-width: 150px;
    }



    .phone-time {
        width: 15%;
    }

    .phone {
        font-size: clamp(7px, 1vw, 18px);
    }

    .time {
        font-size: clamp(2px, 1vw, 4px);
    }

    .steering-preview {
        position: relative;
        width: 96%;
        aspect-ratio: 885 / 834;
    }

    .item5 {
        flex: 0 0 45%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        position: relative;
        height: auto;
        width: 100%;
    }

    .prev-button,
    .next-button {

        font-size: clamp(2px, 1vw, 20px);
    }

    .header-settings-panel-right img {
        height: clamp(6px, 4vw, 10px);
    }

    .filters.filter-toggle img {
        width: 2vw;
    }

    .filters,
    .perforation {
        font-size: clamp(1px, 1vw, 8px);
        gap: 1vw;
    }

    .desc-price {
        font-size: clamp(1px, 1vw, 8px);
    }

    .active-filters .filter-tag {
        font-size: clamp(5px, 1vw, 7px);
    }

    .header-settings-panel h3 {
        font-size: clamp(5px, 1vw, 27px);
    }

    .download {
        gap: 0.4vw;
    }

    .header-settings-panel-right {
        gap: 1vw;
    }

    .desc-name {
        font-size: clamp(4px, 1vw, 10px);
    }

}

@media (min-width: 601px) and (max-width: 1124px) {
    .container {
        /* height: auto; */
        height: 100vh;
        gap: 0px;
        padding: 1%;
    }

       form#orderForm input,
    form#orderForm textarea,
    form#orderForm2 input,
    form#orderForm2 textarea,
    form#orderForm22 input,
    form#orderForm22 textarea,
    form#orderFormTuning input,
    form#orderFormTuning textarea {
        padding: 2.5% 7px;
    }

    .wheel-model svg {
        padding: 2%;
    }

    .wheel-model {
        border-radius: 20px;
    }

    .order-modal {
        width: 76%;
        height: 80vh;
    }

    .nav-btn {
        height: clamp(15px, 3vw, 72px);
        width: clamp(15px, 3vw, 72px);
    }

    .order-modal {
        width: 76%;
        height: 80vh;
    }


    form#orderForm,
    form#orderForm2,
    form#orderForm22,
    form#orderFormTuning {
        gap: 4%;
    }

    .preview-left {
        aspect-ratio: 2/ 1;
        margin-bottom: 3%;
        width: 100%;
        height: 45%;
        padding: 5px;
    }

    header {
        display: none;
    }

    .preview-right {
        margin-bottom: 3%;
    }

    .order-modal h1 {
        margin-bottom: 2%;
    }

    .desc-price {
        font-size: clamp(5px, 1vw, 25px);
    }

    .container-prsh {
        height: 94vh;
    }

    .reset-modal p,
    .modal-content p {
        font-size: clamp(5px, 1vw, 30px);
    }

    .item5 {
        height: auto;
    }

    h1 {
        font-size: clamp(18px, 2vw, 69px);

    }

    .header-settings-panel h3 {
        font-size: clamp(10px, 1.5vw, 40px);
    }

    .prev-button,
    .next-button {
        font-size: clamp(5px, 1vw, 20px);
        padding: 1.5% 3%;
    }

    form#orderForm .submit-button, form#orderForm2 .submit-button, form#orderForm22 .submit-button, form#orderFormTuning .submit-button{
        padding: 2%;
    }

    .marks h2 {
        font-size: clamp(7px, 1vw, 30px);
    }

    .mark-cost {
        font-size: clamp(7px, 1vw, 30px);
    }

    .price-new {
        font-size: clamp(10px, 2.6vw, 45px);
    }

    .header-settings-panel h3 {
        font-size: clamp(10px, 1.5vw, 40px);
    }

    .price-old {
        font-size: clamp(12px, 1vw, 24px);
    }

    .intro {
        font-size: clamp(6px, 1.3vw, 11px);
    }

    .desc-name {
        font-size: clamp(6px, 1vw, 8px);
    }

    .step p {
        font-size: clamp(9px, 1vw, 15px);
    }

    h2 {
        font-size: clamp(11px, 1vw, 30px);
    }

    .option p {
        font-size: clamp(10px, 1vw, 18px);
    }

    .main_button {
        font-size: clamp(10px, 1vw, 16px);
        padding: 1% 0;
    }

    .option .radio {
        position: absolute;
        top: 7px;
        right: 9px;
        height: 30px;
        width: 1.5vw;
    }

    .custom-select {
        min-width: 50%;
    }

    .custom-select select {
        font-size: clamp(9px, 1.3vw, 20px);
        padding: 3% 5%;
    }

    .custom-select .arrow {
        width: 3vw;
    }

    .phone-time {
        width: 15%;
        min-width: 90px;
    }

    .phone {
        font-size: clamp(4px, 1.1vw, 6px);
    }

    .time {
        font-size: clamp(2px, 1vw, 4px);
    }

    .header-settings-panel-right img {
        height: clamp(3px, 4vw, 12px);
    }

    .filters.filter-toggle img {
        width: 2vw;
    }

    .filters,
    .perforation {
        font-size: clamp(1px, 1vw, 8px);
    }

    .active-filters .filter-tag {
        font-size: clamp(5px, 1vw, 7px);
    }

    .option {
        padding: 1%;
    }



}

@media (min-width: 1125px) and (max-width: 2559px) {
    .container {
        height: auto;
    }

    .item5 {
        height: auto;
    }

    h1 {
        font-size: clamp(18px, 4vw, 69px);

    }

    .intro {
        font-size: clamp(10px, 1.5vw, 25px);
    }

    .step p {
        font-size: clamp(13px, 1.5vw, 22px);
    }

    h2 {
        font-size: clamp(23px, 2vw, 50px);
    }

    .option p {
        font-size: clamp(11px, 1.5vw, 19px);
    }

    .main_button {
        font-size: clamp(10px, 2vw, 25px);
    }

    .option .radio {
        position: absolute;
        top: 4%;
        right: 3%;
    }

    .custom-select {
        min-width: 50%;
    }

    .custom-select select {
        font-size: clamp(9px, 1.5vw, 20px);
        padding: 3% 5%;
    }

    .custom-select .arrow {
        width: 3vw;
    }

    .phone-time {
        width: 15%;
        min-width: 90px;
    }

    .phone {
        font-size: clamp(4px, 1.1vw, 15px);
    }

    .time {
        font-size: clamp(2px, 1vw, 10px);
    }


    .active-filters .filter-tag {
        padding: 4% 0.4vw;
        font-size: clamp(5px, 1vw, 15px);
    }
}



@media (min-width: 2560px) {
    .steering-preview {
        width: 75%;
        aspect-ratio: 885 / 834;
    }

    .container-prsh {
        height: 100vh;
    }

    .intro {
        font-size: clamp(16px, 1.3vw, 35px);
    }

    h1 {
        font-size: clamp(24px, 4vw, 80px);
    }

    .step p {
        font-size: clamp(13px, 2vw, 35px);
    }

    .step-number {
        font-size: clamp(10px, 1vw, 35px);
    }

    .custom-select select {
        font-size: clamp(18px, 1vw, 35px);
    }

    h2 {
        font-size: clamp(15px, 1.5vw, 50px);
    }

    .option p {
        font-size: clamp(13px, 1vw, 35px);
    }

    .main_button {
        font-size: clamp(9px, 2vw, 40px);
    }

    .phone {
        font-size: clamp(10px, 1vw, 25px);
    }

    .time {
        font-size: clamp(7px, 1.5vw, 13px);
    }

    /* .nav-content.active h3,
    .materials h3,
    .shadow-header h3 {
        font-size: clamp(8px, 1.8vw, 40px);
    } */

    .cloth,
    .cloth2,
    .cloth3 {
        font-size: clamp(8px, 1vw, 24px);
    }

    .filters,
    .perforation {
        font-size: clamp(8px, 1vw, 30px);
    }

    .reset-btn {
        font-size: clamp(8px, 1vw, 30px);
    }

    .header-settings-panel-right {
        font-size: clamp(8px, 1vw, 30px);
    }

    .header-settings-panel-right img {
        height: clamp(15px, 4vw, 40px);
    }

    .desc-label {
        font-size: clamp(5px, 1vw, 30px);
    }

    .desc-name {
        font-size: clamp(8px, 1vw, 24px);
    }

    .prev-button,
    .next-button {
        font-size: clamp(9px, 1vw, 30px);
    }

    .extra-sale {
        font-size: clamp(6px, 1vw, 25px);
    }

    .extra-sale img {
        width: 1.5vw;
    }

    .sale {
        font-size: clamp(6px, 1vw, 25px);
    }

    .price-new {
        font-size: clamp(25px, 3vw, 60px);
        margin-right: 2.5%;
    }

    .price-old {
        font-size: clamp(6px, 2vw, 40px);
    }

    .discount-svg-tag {
        margin-left: 0.5%;
    }

    .back-btn {
        font-size: clamp(10px, 1vw, 30px);
        align-items: end;
    }

    .back-btn img {
        width: 1.3vw;
    }

    .nav-buttons {
        width: 9%;
        margin-left: 2%;
    }

    .nav-btn {
        height: clamp(30px, 4vw, 110px);
        width: clamp(30px, 4vw, 110px);
    }

    .active-filters .filter-tag {
        font-size: clamp(5px, 1vw, 20px);
    }

    .filter-more-toggle {
        font-size: clamp(5px, 1vw, 25px);
    }

    .tooltip {
        font-size: clamp(8px, 2vh, 40px);
    }

    .block-descr-anatomy {
        /* font-size: clamp(10px, 1.5vw, 25px); */
        font-size: clamp(5px, 1vw, 30px);
    }

    .descr-anatomy {
        font-size: clamp(10px, 1.5vw, 30px);
    }
}