/*!
Theme Name: octoglass
Theme URI: http://underscores.me/
Author: whynot
Author URI: http://underscores.me/
Description: Тема, разработанная для сайта octoglass.ru
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: whynot_v2
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--red) var(--main-black);
}

:root {
    --main-black: #0F0F0F;
    --light-black: #1d1d1d;
    --white: #fff;
    --red: #FF2D21;
}

html {
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--white);
    background: var(--main-black);
    position: relative;
    z-index: 0;
}

section {
    padding: 7rem 0;
}

a {
    text-decoration: none;
    color: inherit;
}

h2 {
    font-size: 4.8rem;
    line-height: 5rem;
    user-select: none;
    font-weight: 600;
}

h2 span {
    color: var(--red);
}

input[type="text"] {
    font-size: 1.6rem;
}

/*MAIN STYLES*/
.container {
    max-width: 144rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.df {
    display: flex;
}

.fww {
    flex-wrap: wrap;
}

.fdc {
    flex-direction: column;
}

.jcc {
    justify-content: center;
}

.jcsb {
    justify-content: space-between;
}

.jce {
    justify-content: end;
}

.aic {
    align-items: center;
}

.aife {
    align-items: flex-end;
}

.aifs {
    align-items: flex-start;
}

.ais {
    align-items: stretch;
}

.ttu {
    text-transform: uppercase;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.tac {
    text-align: center;
}

/*SOCIAL*/
.social {
    position: fixed;
    bottom: 2rem;
    right: 3.4rem;
    z-index: 90;
    gap: 5px;
}

.social-link {
    background: var(--main-black);
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--red);
    border-radius: 5px;
}

.social-link:hover {
    transform: scale(1.1);
    transition: .3s ease-in;
}

.social-link:not(hover) {
    transition: .3s ease-in;
}

.social-link img {
    width: 100%;
}

/*HEADER*/
.main-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: #ffffff00;
    padding: 1.2rem 0px;
    z-index: 100;
}

.header-logo {
    display: block;
    max-width: 19.2rem;
    width: 100%;
}

.header-logo img {
    width: 100%;
}

.header-menu {
    font-size: 1.4rem;
    text-transform: uppercase;
    gap: 20px;
}

.header-link {
    display: block;
}

.link-with-submenu {
    position: relative;
    z-index: 0;
}

.submenu {
    position: absolute;
    z-index: -10;
    top: 2rem;
    right: -2rem;
    height: 0px;
    padding: 0 1rem;
    overflow: hidden;
    background: var(--light-black);
    color: var(--white);
    opacity: 0;
    width: max-content;
}

.submenu a:hover {
    color: var(--red);
    transition: .3s ease-in;
}

.submenu a:not(hover) {
    transition: .3s ease-in;
}

.link-with-submenu:hover .submenu {
    height: auto;
    padding-top: 2rem;
    padding-bottom: 1rem;
    transition: .3s ease-in;
    gap: 0.5rem;
    opacity: 1;
}

.link-with-submenu:not(hover) .submenu {
    transition: .3s ease-in;
}

.header-link:hover {
    color: var(--red);
    transition: .3s ease;
}

.header-link:not(hover) {
    transition: .3s ease;
}

.header-phone {
    font-weight: bold;
}

.header-phone:hover {
    color: var(--red);
    transition: .3s ease;
}

.header-phone:not(hover) {
    transition: .3s ease;
}

.header-lang {
    padding: 0.4rem;
    border: 1px solid var(--red);
    background: var(--main-black);
    border-radius: 0.5rem;
    min-width: 4rem;
    text-align: center;
    cursor: pointer;
}

.mobile-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #0000009f;
    opacity: 0;
}

.header-burger {
    display: none;
    z-index: 1000;
    position: relative;
}

.mobile-menu {
    max-width: fit-content;
    width: 100%;
    background: var(--light-black);
    height: 100%;
    position: fixed;
    right: -100rem;
    top: 0rem;
}
.mobile-menu a {
    text-transform: uppercase;
}
.header-lang .trp-language-switcher {
    width: auto;
    height: auto;
}

.header-lang .trp-language-switcher:hover {
    transform: none;
}

.header-lang .trp-language-switcher a:hover,
.header-lang .trp-language-switcher-container a:hover {
    text-decoration: none;
    background-color: transparent;
    color: inherit;
    transition: .3s ease-in;
}

.header-lang .trp-language-switcher a:not(hover),
.header-lang .trp-language-switcher-container a:not(hover) {
    transition: .3s ease-in;
}

.header-lang .trp-language-switcher:focus .trp-ls-shortcode-language,
.header-lang .trp-language-switcher:hover .trp-ls-shortcode-language {
    padding: 0;
    left: 0.5rem;
}

.header-lang .trp-language-switcher>div {
    padding: 0;
    border: none;
    background-image: none;
    background-color: #00000000;
    color: var(--red);
    width: auto !important;
}

.header-lang .trp-language-switcher .trp-ls-shortcode-current-language {
    display: block;
}

.header-lang .trp-language-switcher>div>a {
    padding: 0;
    font-size: 1.6rem;
    color: var(--white);
    font-weight: bold;
}

.header-lang .trp-language-switcher>div>a:hover {
    background: #00000000;
}

/*HERO*/
.hero {
    background: url(../img/hero-bg.webp) no-repeat 45% center /cover;
    position: relative;
    min-height: 100vh;
    height: 100%;
    padding-bottom: 0px;
    overflow: hidden;
    z-index: 10;
}

.hero .container {
    height: 100%;
}

.hero-wrapper {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 10%, rgba(102, 102, 102, 0) 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.hero-bg {
    max-width: 40%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background: #0000009f;
}

.hero-title {
    font-size: 5.6rem;
    font-weight: 600;
    line-height: 5.6rem;
    max-width: 52rem;
}

.hero-title span {
    color: var(--red);
}

.hero-lines {
    position: relative;
    max-width: 80%;
    /* min-height: 60.4rem; */
    height: 100%;
    width: 100%;
    border-top: 1rem solid var(--red);
    border-left: 1rem solid var(--red);
    margin-top: 5rem;
    padding-top: 14rem;
    padding-left: 3.6rem;
    border-image: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    border-image-slice: 1;
    z-index: 10;
}

.hero-lines img {
    position: absolute;
    display: block;
    right: -10%;
    top: 30%;
    max-width: 65rem;
    width: 100%;
    z-index: 20;
}

.hero-car {
    position: absolute;
    display: none;
    right: 15%;
    top: 43%;
    max-width: 42%;
    width: 100%;
    z-index: 20;
}

.hero-border-top {
    border-right: 1rem solid transparent;
    height: 36rem;
    position: absolute;
    max-height: 40%;
    left: 0px;
    top: 0px;
    width: 100%;
    border-image: linear-gradient(180deg, var(--red) 20%, var(--main-black) 60%);
    border-image-slice: 1;
    z-index: 10;
}

.hero-buttons {
    margin-top: 3.8rem;
    gap: 12px;
    position: relative;
    z-index: 23;
}

.hero-btn {
    padding: 1.2rem 2.3rem;
    border: none;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}

.hero-btn:hover {
    transform: scale(1.1);
    transition: .2s ease-in;
}

.hero-btn:not(hover) {
    transition: .2s ease-in;
}

.red-btn {
    background: var(--red);
    color: var(--white);
}

.white-btn {
    color: var(--light-black);
}

/*ABOUT*/
.about {
    position: relative;
}

.about-text {
    max-width: 45%;
    gap: 2.3rem;
    padding-left: 3rem;
    z-index: 20;
}

.about-description {
    font-size: 2rem;
    line-height: 2.7rem;
}

.about-img {
    position: relative;
    max-width: 55%;
    width: 100%;
    z-index: 10;
}

.about-img img {
    width: 100%;
}

.about-lake {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

.about-glass {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: #000000c6;
    opacity: 0;
}

.about-glass.on {
    opacity: 1;
    transition: 2s ease;
}

.about-window {
    position: relative;
    z-index: 3;
}

.about-shadow {
    background: linear-gradient(120deg, rgba(15, 15, 15, 1) 10%, rgba(15, 15, 15, 0.6) 25%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 80%);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.about-top-shadow {
    background: linear-gradient(180deg, rgba(15, 15, 15, 1) 5%, rgba(255, 255, 255, 0) 20%);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 16;
    width: 100%;
    height: 100%;
}

.about-left-shadow {
    background: linear-gradient(90deg, rgba(15, 15, 15, 0.5) 5%, rgba(255, 255, 255, 0) 10%);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 17;
    width: 100%;
    height: 100%;
}

.about-bottom-shadow {
    background: linear-gradient(0deg, rgba(15, 15, 15, 1) 5%, rgba(255, 255, 255, 0) 20%);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 18;
    width: 100%;
    height: 100%;
}

.about-right-shadow {
    background: linear-gradient(270deg, rgba(15, 15, 15, 1) 5%, rgba(255, 255, 255, 0) 20%);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 19;
    width: 100%;
    height: 100%;
}

.about-pult {
    max-width: 27rem;
    bottom: -10rem;
    left: 45%;
    transform: rotate(-10deg);
    z-index: 50;
    cursor: pointer;
}

.about-pult img {
    width: 100%;
}

.about-pult.on {
    transform: translateX(-10rem) skew(5deg) translateY(3rem) rotate(80deg);
    transition: 1s ease-in;
}

.about-pult:not(.on) {
    transition: 1s ease-in;
}

.about-pult.on~.about-img .about-glass {
    opacity: 1;
    transition: 2s ease-in;
}

.about-pult:not(.on)~.about-img .about-glass {
    opacity: 0;
    transition: 2s ease-in;
}

/*LAYER*/
.layer {
    margin-top: 4rem;
}

.layer .layer-pagination {
    position: relative;
}

.layer-swiper {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.layer-wrapper {
    margin-top: 3.6rem;
    padding-bottom: 3.6rem;
}

.layer-pagination {
    gap: 1.3rem;
    margin-top: 3.5rem;
    user-select: none;
}

section .layer-bullet {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--red);
}

.layer-bullet {
    font-size: 3.2rem;
    font-weight: 600;
}

.layer-bullet.swiper-pagination-bullet-active {
    background: var(--red);
}

.layer-slide {
    text-align: center;
    user-select: none;
}

.layer-slide img {
    position: relative;
    z-index: 20;
    width: 90%;
}

.layer-slide-text {
    position: relative;
    z-index: 10;
    max-width: 70rem;
    width: 100%;
    font-size: 2rem;
    line-height: 2.7rem;
    margin: 0 auto;
}

.layer-slide-text span {
    color: var(--red);
}

.layer-slide-bg {
    border-bottom: 1rem solid var(--red);
    border-left: 1rem solid var(--red);
    border-right: 1rem solid var(--red);
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
    min-height: 25rem;
    position: absolute;
    bottom: 0px;
    text-align: center;
    left: 0px;
    right: 0px;
    border-image: linear-gradient(180deg, var(--main-black) 30%, var(--red) 60%);
    border-image-slice: 1;
}

/*WHY*/
/* .why {
    background: url(../img/why_bg.png) no-repeat center bottom /cover;
} */

.why-top {
    flex-wrap: wrap;
    margin-top: 4.5rem;
    column-gap: 5rem;
    row-gap: 6rem;
}

.why-block {
    max-width: 29%;
    width: 100%;
    gap: 1.5rem;
    user-select: none;
}

.why-icon {
    max-width: 5rem;
    width: 100%;
}

.why-icon img {
    width: 100%;
}

.why-text {
    gap: 0.5rem;
}

.why-title {
    font-size: 2.4rem;
    font-weight: bold;
    padding-bottom: 1rem;
}

.why-description {
    font-size: 1.6rem;
    line-height: 2rem;
}

/*GLASS*/
.glasses {
    padding-top: 0rem;
    position: relative;
}

.glasses-bg {
    position: absolute;
    top: -15rem;
    left: 0px;
    width: 100%;
    height: 100%;
}

.glass-bg {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.glass-bg img {
    width: 100%;
    opacity: .1;
}

.glasses.animate .glass-bg img {
    opacity: .5;
    transition: 2s ease-in;
}

.glasses.animate .glass-bg {
    transition: 3s;
}

.glasses:not(.animate) .glass-bg {
    transition: 3s;
}

.glasses.animate .glass-bg1 {
    transform: translateY(-10rem);
}

.glasses.animate .glass-bg2 {
    transform: translateY(-5rem);
}

.glasses.animate .glass-bg3 {
    transform: translateY(5rem);
}

.glasses.animate .glass-bg4 {
    transform: translateY(10rem);
}

.glasses.animate .glass-bg5 {
    transform: translateY(5rem);
}

.glasses:not(.animate) .glass-bg img {
    transition: 2s ease-in;
}

.why-bottom {
    min-height: 60rem;
}

.why-glass {
    position: relative;
    margin-top: 15rem;
}

.glass {
    position: absolute;
    max-width: 39rem;
    width: 100%;
    cursor: pointer;
    transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.glass img {
    width: 100%;
}

.glass1 {
    left: 25%;
    top: 0rem;
    z-index: 50;
}

.glass2 {
    left: 30%;
    top: 5rem;
    z-index: 40;
}

.glass3 {
    left: 35%;
    top: 10rem;
    z-index: 30;
}

.glass4 {
    left: 40%;
    top: 15rem;
    z-index: 20;
}

.glass5 {
    left: 45%;
    top: 20rem;
    z-index: 10;
}

/* .glasses.animate .glass {
    transform: rotate(-5deg);
    transition: 3s ease-in; 
}
.glasses:not(.animate) .glass {
    transition: 3s ease-in; 
} */

.glasses.animate .glass1,
.glasses.animate .glass2,
.glasses.animate .glass3,
.glasses.animate .glass4,
.glasses.animate .glass5 {
    transition: left 3s cubic-bezier(0.5, 0, 0.5, 1);
    /* Плавное начало и конец */
}

.glasses:not(.animate) .glass1,
.glasses:not(.animate) .glass2,
.glasses:not(.animate) .glass3,
.glasses:not(.animate) .glass4,
.glasses:not(.animate) .glass5 {
    transition: left 3s cubic-bezier(0.5, 0, 0.5, 1);
    /* Плавное начало и конец */
}

.glasses.animate .glass1 {
    left: 15%;
}

.glasses.animate .glass2 {
    left: 25%;
}

.glasses.animate .glass3 {
    left: 35%;
}

.glasses.animate .glass4 {
    left: 45%;
}

.glasses.animate .glass5 {
    left: 55%;
}

/*CAR*/
.car h2 {
    max-width: 55%;
    width: 100%;
}

.car-content {
    margin-top: 3.2rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.car-image-swiper {
    max-width: 100%;
    width: 100%;
    margin-left: inherit;
}

.car-text-swiper {
    max-width: 100%;
    width: 100%;
    margin-left: inherit;
}

.car-card {
    display: block;
    position: relative;
    font-size: 20px;
    /* Размер шрифта */
    overflow: hidden;
    max-width: 60%;
}

.car-card:hover img {
    transform: scale(1.1);
    transition: .5s ease;
}

.car-card:not(hover) img {
    transition: .3s ease;
    object-fit: cover;
}

.car-card img {
    width: 100%;
}

.car-shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #0000008c;
    padding: 4rem;
}

.car-content .car-card-pagination {
    left: 0rem;
    top: 8rem;
    width: auto;
    height: auto;
}

.car-card-pagination .swiper-pagination-bullet {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--red);
}

.car-card-pagination .swiper-pagination-bullet-active {
    background: var(--red);
    transition: .3s ease;
}

.car-text {
    padding: 2rem;
    border-left: 1rem solid transparent;
    border-top: 1rem solid transparent;
    width: fit-content;
    border-image: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    border-image-slice: 1;
}

.car-text-title {
    font-size: 3rem;
    font-weight: bold;
}

.car-text-description {
    font-size: 2rem;
    margin-top: 1rem;
}

.car-button-prev,
.car-button-next {
    color: var(--red);
}

.car-button-prev:hover,
.car-button-next:hover {
    color: var(--red);
    transform: scale(1.1);
    transition: .3s ease;
}

.car-videos {
    row-gap: 3rem;
    margin-top: 3rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.car-video {
    max-width: 48%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.poster {
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    width: 100%;
    height: 95%;
    display: block;
    z-index: 1;
}

.car-video video {
    width: 100%;
    position: relative;
    z-index: 2;
}

.sk {
    width: 100%;
    justify-content: flex-end;
}

.sk-link {
    max-width: 15%;
    width: 100%;
    display: block;
}

.sk-link img {
    width: 100%;
}

/*SALE*/
.sale-wrapper {
    padding-top: 3rem;
}

.sale-slide {
    max-width: 33.33%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.sale-slide img {
    width: 100%;
}

.sale-bg {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.0) 75%);
    backdrop-filter: blur(5px);
    max-width: 32rem;
    max-height: 32rem;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    top: 10%;
    transition: 1s ease-in-out;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.sale-name {
    font-size: 2rem;
    margin-top: 3rem;
    font-weight: bold;
    line-height: 2.5rem;
    max-width: 80%;
    text-align: center;
}

.sale-price {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: bold;
}

.sale-price span {
    opacity: .3;
    padding-left: 1rem;
    text-decoration: line-through;
}

.sale-button {
    margin-top: 2rem;
    padding: 0.5rem;
    background: var(--red);
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 30%;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.sale-button:hover {
    transform: scale(1.2);
    transition: .3s ease;
}

.sale-button:not(hover) {
    transition: .3s ease;
}

.sale-slide-center img {
    transform: scale(1.1);
    transition: .5s ease-in;
}

.sale-slide:not(.sale-slide-center) img {
    transition: .5s ease-in-out;
}

.sale-slide-center .sale-bg {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.0) 65%);
    max-width: 40rem;
    max-height: 40rem;
    transform: scale(1.2);
    transition: .5s ease-in;
    top: 1rem;
}

.sale-button-next,
.sale-button-prev {
    color: var(--red);
}

/*QUIZ*/
.quiz {
    background: url(../img/quiz-bg.webp) no-repeat center center /cover;
    position: relative;
}
.quiz form {
    margin-top: 3rem;
}
.quiz-wrapper {
    background: #000000a4;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}

.quiz-content {
    position: relative;
    z-index: 20;
    max-width: 35%;
}

.quiz-questions {
    margin-top: 9rem;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.quiz-slide {
    display: none;
}

.quiz-slide.active {
    display: block;
}

.quiz-slide input[type="text"],
.quiz-slide input[type="tel"] {
    padding: 7px 21px;
    font-size: 1.6rem;
    outline: none;
    border: 2px solid var(--main-black);
    width: 100%;
}

.quiz-buttons {
    gap: 11px;
    margin-top: 3.2rem;
}

.quiz-btn {
    cursor: pointer;
    font-size: 2rem;
}

.quiz-radio {
    gap: 4rem;
    padding: 1.5rem 0;
}

.quiz input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0px;
    z-index: -1;
}
.quiz label {
    color: var(--white);
    font-size: 1.6rem;
}
.quiz label::before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    width: 2rem;
    height: 2rem;
}
.quiz input[type="radio"]:checked + label {
    color: var(--red);
}
.quiz-radio-button label {
    font-size: 1.5rem;
    gap: 1rem;
    border: 2px solid #00000000;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
}

.quiz-radio-button label i {
display: none;
}

.quiz-radio-button label img {
    width: 100%;
}
.modal-form {
    gap: 2rem;
}
.modal-radio {
    position: relative;
}

.modal-radio input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0px;
    z-index: -1;
}
.modal-radio label  {
    font-size: 1.5rem;
    gap: 1rem;
    border: 2px solid #00000000;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
}
.modal-radio label:has(input[type='radio'])::before {
    width: 1.5rem;
    height: 1.5rem;
    content: '';
    border-radius: 50%;
    border: 1px solid var(--red);
    background: var(--main-black);
}
.modal-radio label:has(input[type='radio']:checked) {
    color: var(--red)
}
.modal-radio label:has(input[type='radio']:checked)::before {
    padding: 0.2rem;
    background: var(--red);
    border-color: var(--light-black);
}
.modal-radio .wpcf7-list-item {
    margin: 0px;
}
#prev-btn {
    padding: 5px 14px;
    background: var(--white);
    color: var(--red);
}

#next-btn {
    padding: 5px 34px;
    background: var(--red);
}

.quiz input[type="submit"] {
    padding: 5px 10px;
    background: var(--red);
    border: none;
    outline: none;
    color: var(--white);
}

.quiz-error {
    font-size: 1.4rem;
    color: var(--red);
    margin-top: 1rem;
    opacity: 0;
}
.quiz input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0px;
    z-index: -1;
}
.quiz label {
    font-size: 1.5rem;
    gap: 1rem;
    border: 2px solid #00000000;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
}
.quiz label::before {
    width: 1.5rem;
    height: 1.5rem;
    content: '';
    margin-top: 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--red);
    background: var(--main-black);
}
.quiz label:has(input[type="radio"]:checked)  {
    color: var(--red)
}
.quiz .quiz-radio-button:has(input[type="radio"]:checked) label::before {
    padding: 0.2rem;
    background: var(--red);
    border-color: var(--light-black);
}
.message {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white);
}
/*FEEDBACK*/
.feedback {
    position: relative;
    padding-top: 10rem;
}

.mobile-phone {
    width: 34rem;
    height: 68rem;
    border: 4px solid #3d3d3d;
    border-radius: 5rem;
    padding: 0.4rem;
    background: var(--main-black);
}

#phone1 {
    transform: rotate(-10deg) skew(2deg) translateX(10rem);
    position: relative;
}

#phone2 {
    transform: rotate(20deg) translateX(20rem);
    position: absolute;
    top: 25rem;
    left: 20%;
    z-index: 20;
}

#phone1:hover~#phone2 {
    transform: rotate(10deg) translateX(15rem) translateY(10rem);
    transition: .3s ease;
}

#phone1:hover~#phone2 .mobile-content {
    opacity: 1;
    color: var(--white);
    transition: .3s ease;
}

#phone1:not(hover)~#phone2 {
    transition: .3s ease;
}

.mobile-inside {
    border: 1px solid #4e4e4e;
    border-radius: 4.5rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.mobile-fixed {
    width: 100%;
    height: 7%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #00000000;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    z-index: 200;
}

.mobile-chamber {
    max-width: 30%;
    width: 100%;
    background: #000;
    height: 100%;
    border-radius: 2.5rem;
    position: relative;
}

.mobile-chamber i {
    position: absolute;
    right: 20%;
    top: 40%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: green;
    opacity: 0;
}

.mobile-content {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.mobile-phone:hover .mobile-content {
    background: #fff;
    transition: .3s ease-in;
    opacity: 1;
}

.mobile-phone:not(hover) .mobile-content {
    transition: .3s ease-in;
}

.mobile-top {
    width: 100%;
    height: fit-content;
    padding: 1.5rem 3rem 1rem 4rem;
    color: var(--main-black);
    font-size: 1.5rem;
    font-weight: 500;
}

.mobile-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    width: 100%;
}

.mobile-bottom img {
    width: 100%;
    padding: 1rem;
}

.mobile-phone:hover .mobile-chamber i {
    opacity: 1;
}

.mobile-top-right {
    gap: 0.5rem;
}

.mobile-top-right img {
    display: block;
    max-width: 2.3rem;
}

.feedback-block {
    max-width: 50%;
    width: 100%;
}

.feedback-content {
    gap: 20rem;
}

.feedback-links {
    gap: 3rem;
}

.feedback-link {
    justify-content: center;
    background: var(--white);
    width: 100%;
    padding: 0.5rem;
    position: relative;
    border: 1px solid var(--red);
    z-index: 5;
}

.feedback-link:hover {
    transform: scale(1.1);
    transition: .3s ease;
}

.feedback-link:not(hover) {
    transition: .3s ease;
}

.feedback-link img {
    width: 3rem;
    height: 3rem;
}

.tg-link {
    background: var(--red);
}

.wa-link {
    background: var(--main-black);
}

/*FOOTER*/
.main-footer {
    padding: 5rem 0px;
}

.main-footer a {
    display: block;
}

.footer-menu {
    list-style-type: none;
    font-size: 1.4rem;
    text-transform: uppercase;
    gap: 0.5rem;
    margin-top: 2rem;
}
.footer-logo {
    max-width: 30%;
}
.footer-logo img {
    width: 100%;
}
.footer-block {
    max-width: 50%;
    width: 100%;
}
.footer-block.df {
    justify-content: end;
    align-items: end;
}
.footer-menu li:hover a {
    color: var(--red);
    transition: .3s ease;
}

.footer-menu li:not(hover) a {
    transition: .3s ease;
}

.studio-link {
    display: block;
    font-size: 1.5rem;
    color: var(--red);
    padding-right: 5rem;
}

.studio-link span {
    color: var(--white);
    font-weight: bold;
}

/*SERVICES-PAGE*/
.services-hero {
    background: url(../img/services-hero.webp) no-repeat center center /cover;
    padding: 10rem 0px;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.services-hero-bg {
    background: #0000009b;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}
.service-title {
    margin-top: 2rem;
}
.services-hero-wrapper {
    padding: 4.5rem;
    min-height: 45rem;
    border-top: 1rem solid var(--red);
    border-left: 1rem solid var(--red);
    max-width: 70%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 20;
    border-image: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    border-image-slice: 1;
}

.services-hero-car {
    max-width: 60rem;
    width: 100%;
    z-index: 30;
    position: absolute;
    bottom: -8rem;
    right: -10rem;
}

.services-hero-car img {
    width: 100%;
}

.services-about {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.services-about-bg {
    gap: 3rem;
    position: absolute;
    top: 2rem;
    left: 0px;
}

.services-about-second {
    justify-content: end;
    align-self: flex-end;
}

.services-about-content {
    background: #0000009b;
    width: 100%;
    height: 100%;
    z-index: 50;
    position: relative;
    padding: 7rem 0;
}

.services-about-content .container {
    gap: 2rem;
}

.services-about-row {
    max-width: 50%;
}

.services-about-row img {
    width: 100%;
}

.services-about-block {
    position: relative;
}

.services-about-big-text {
    position: relative;
    font-size: 4.8rem;
    line-height: 5rem;
    font-weight: 500;
    max-width: 45%;
    padding-left: 6rem;
    padding-bottom: 9rem;
}

.services-about-small-text {
    max-width: 40%;
    font-size: 2rem;
    line-height: 2.7rem;
    font-weight: 500;
}

.services-about-rect {
    position: absolute;
    left: 0px;
    bottom: 0px;
    max-width: 10rem;
    max-height: 20rem;
    width: 100%;
    height: 100%;
    background: var(--red);
    z-index: -1;
}

.services-about-button {
    display: block;
    padding: 1rem 2rem;
    background: var(--red);
    width: fit-content;
    font-size: 2rem;
    margin-top: 10rem;
}

.services-tabs-buttons {
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tab-btn {
    font-size: 1.6rem;
    padding: 1.5rem 2.3rem;
    background: var(--light-black);
    cursor: pointer;
    color: #545454;
    font-weight: 600;
    user-select: none;
}

.tab-btn.active {
    background: var(--red);
    color: var(--white);
}

.tabs-content {
    margin-top: 6rem;
}

.tab-content {
    display: none;
}

.services-tab-content.active {
    display: flex;
    gap: 5rem;
}

.services-tab-text-block {
    max-width: 60%;
    gap: 5rem;
}

.services-tab-image-block {
    max-width: 40%;
}

.services-tab-image-mobile {
    display: none;
}

.services-tab-text {
    gap: 1rem;
    font-size: 1.6rem;
}

.services-tab-link {
    display: block;
    padding: 1rem 2rem;
    background: var(--red);
    font-size: 2rem;
    width: fit-content;
}

.services-tab-image-block img {
    width: 100%;
}
.service-link {
    display: block;
    padding: 0.5rem 1rem;
    background: var(--light-black);
    font-size: 1.6rem;
}
.service-link:hover {
    transform: scale(1.05);
    transition: .3s ease;
    background: var(--red);
}
.service-link:not(hover) {
    transition: .3s ease;
}
/*SINGLE-SERVICE*/
.single-service {
    gap: 9rem;
}

.single-page-title {
    font-size: 4.8rem;
    text-transform: uppercase;
    line-height: 5rem;
    font-weight: 500;
}

.single-image {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    padding-right: 3rem;
}

.single-image img {
    width: 100%;
}

.single-figure {
    max-width: 35%;
    width: 100%;
    border-top: 10px solid var(--red);
    border-left: 10px solid var(--red);
    border-bottom: 10px solid var(--red);
    min-height: 25rem;
    position: absolute;
    right: 0px;
    top: 15%;
}

.single-service-text {
    gap: 2rem;
    font-size: 2rem;
    line-height: 2.7rem;
}

.single-service-text p {
    max-width: 80%;
}

.single-video {
    position: relative;
}

.single-video-block {
    max-width: 50%;
    width: 100%;
    position: relative;
}

.single-video-video img {
    width: 100%;
}

.single-video-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 10rem;
    max-height: 25rem;
    background: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.single-video-text-block {
    padding-left: 7rem;
    padding-top: 2rem;
    position: relative;
}

.single-video-text {
    position: relative;
    z-index: 20;
}

.single-video-description {
    font-size: 2rem;
    line-height: 2.7rem;
    margin-top: 3rem;
}

.single-benefits {
    flex-wrap: wrap;
}

.single-benefit {
    max-width: 30%;
    width: 100%;
    gap: 2.7rem;
}

.single-benefit-title {
    font-size: 3.2rem;
    color: var(--red);
    line-height: 4rem;
}

.single-benefit-description {
    font-size: 2rem;
    line-height: 2.7rem;
    text-align: center;
}

.single-service-image img {
    width: 100%;
}

.single-spec {
    gap: 5rem;
}

.single-spec-column {
    padding: 1rem;
}

.single-spec-column-first {
    max-width: 40%;
    width: 100%;
}

.single-spec-column-second {
    max-width: 60%;
    width: 100%;
}

.single-spec-title-row {
    background: linear-gradient(90deg, var(--red) 10%, var(--main-black) 70%);
}

.single-spec-title-row .single-spec-column {
    font-size: 3.2rem;
    text-transform: uppercase;
    padding-left: 4rem;
}

.single-spec-row:not(.single-spec-title-row) {
    border-bottom: 1px solid var(--white);
    font-size: 2rem;
    padding: 1rem;
}

.single-info-block {
    max-width: 50%;
    width: 100%;
}

.single-info-image {
    position: relative;
}

.single-info-image-bg {
    position: absolute;
    max-width: 60%;
    max-height: 60%;
    width: 100%;
    height: 100%;
    border: 1rem solid var(--red);
    left: 0;
    bottom: 0;
    z-index: 10;
}

.single-info-image img {
    width: 100%;
    position: relative;
    display: block;
    z-index: 20;
}

.single-info-text-block {
    position: relative;
    padding-left: 7rem;
    padding-top: 2rem;
}

.single-info-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 10rem;
    max-height: 25rem;
    background: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.single-info-text {
    position: relative;
    z-index: 20;
}

.single-info-description {
    font-size: 2rem;
    line-height: 2.7rem;
    margin-top: 3rem;
}

.single-cert {
    gap: 5rem;
    margin-top: 3rem;
}

.single-cert-content {
    row-gap: 10rem;
}

.single-cert-content a {
    display: block;
    max-width: 33.33%;
    cursor: pointer;
    width: 100%;
}

.single-cert-content img {
    width: 100%;
    padding: 0px 2rem;
}

.single-service .single-info:nth-child(2n) {
    flex-direction: row-reverse;
    gap: 5rem;
    margin-top: 3rem;
}

.single-info:nth-child(2n) .single-info-image-bg {
    left: inherit;
    right: 0px;
}

.single-color {
    max-width: 20%;
    width: 100%;
    padding: 1rem;
    text-align: center;
    font-size: 1.6rem;
    gap: 1rem;
}

.single-color-simple {
    max-width: 15rem;
    min-height: 6rem;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}

/*ABOUT-PAGE*/
.about-hero {
    background: url(../img/about-hero.webp) no-repeat center center /cover;
    padding: 6rem 0px;
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.about-hero-bg {
    background: #0000009b;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}

.about-hero-wrapper {
    position: relative;
    z-index: 20;
}

.about-hero-car {
    max-width: 70rem;
    width: 100%;
    z-index: 30;
    position: absolute;
    bottom: -8rem;
    right: -10rem;
}

.about-hero-car img {
    width: 100%;
}

.about-text-block {
    gap: 2rem;
}

.about-galleries {
    gap: 3rem;
}

.single-cert-slide {
    max-width: 33.3%;
}

.single-cert-slide img {
    width: 100%;
    padding: 1rem;
}

/*PAGE-NEWS*/
.news-hero {
    min-height: 50vh;
    overflow: hidden;
    position: relative;
    background: url(../img/news-bg.webp) no-repeat center center /cover;
}

.news-hero-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: #0000009b;
}

.news-hero-content {
    z-index: 20;
    position: relative;
}

.news-hero-block {
    max-width: 40%;
    width: 100%;
    height: 100%;
    padding: 15rem 5rem;

}

.news-hero-block:nth-child(2) {
    border-right: 10px solid var(--red);
    border-top: 10px solid var(--red);
    margin-top: 5rem;
    border-image: linear-gradient(180deg, var(--red) 20%, var(--main-black) 70%);
    border-image-slice: 1;
}

.news-hero-block:nth-child(1) {
    border-left: 10px solid var(--red);
    border-bottom: 10px solid var(--red);
    margin-top: 10rem;
    border-image: linear-gradient(90deg, var(--red) 20%, var(--main-black) 70%);
    border-image-slice: 1;
}

.news-hero-bg img {
    width: 100%;
    height: 100%;
}

.news-content {
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 5rem;
}

.news-block {
    max-width: 49%;
    width: 100%;
    padding: 1rem;
    gap: 3rem;
}

.news-block-top {
    gap: 1.5rem;
}

.news-block:hover {
    background: var(--light-black);
    transition: .3s ease-in;
}

.news-block:not(hover) {
    transition: .3s ease-in;
}

.news-image {
    overflow: hidden;
}

.news-image img {
    width: 100%;
}
.back {
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--red);
    padding: 0.5rem 1rem;
    width: fit-content;
}
.news-title {
    font-size: 3.2rem;
    font-weight: 600;
    color: var(--white);
    line-height: 3rem;
}

.news-text {
    font-size: 2rem;
    line-height: 2.7rem;
}

.news-button {
    padding: 1rem 2.5rem;
    font-size: 1.6rem;
    background: var(--red);
    width: fit-content;
}

.news-button:hover {
    transform: scale(1.1);
    transition: .3s ease-in;
}

.news-button:not(hover) {
    transition: .3s ease-in;
}

/*SINGLE-NEWS*/
.single-news-content {
    gap: 2rem;
    margin-top: 5rem;
}

.single-news-title {
    max-width: 70%;
}

.single-news-block {
    gap: 5rem;
}

.single-news-column {
    max-width: 50%;
    width: 100%;
}

.single-news-text {
    gap: 0.5rem;
}

.single-news-image {
    gap: 3rem;
}

.single-news-image img {
    width: 100%;
}

.single-news-image video {
    width: 100%;
}

.single-news-text h3 {
    font-size: 2.1rem;
    line-height: 2.7rem;
    font-weight: 700;
    padding: 0.5rem 0px;
}

.single-news-text h4 {
    font-size: 1.8rem;
    line-height: 2.7rem;
    font-weight: 700;
    padding: 0.5rem 0px;
}

.single-news-text p {
    font-size: 2rem;
    line-height: 2.7rem;
    font-weight: normal;
}

.single-news-text ul,
.single-news-text ol {
    font-size: 2rem;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 3rem;
}

.single-news-text a,
.single-news-text span {
    color: var(--red);
}

/*SINGLE-JOB*/


.single-job-title {
    color: var(--red);
    margin-top: 5rem;
}

.single-job-content {
    gap: 2rem;
}

.single-job-content p {
    font-size: 2rem;
}

.single-job-slider {
    margin-top: 3rem;
}

.single-job-slide {
    max-width: 70%;
}

.single-job-slide img {
    width: 100%;
}

.job-pagination {
    margin-top: 3rem;
    position: relative;
    margin-left: 10rem;
}

.job-pagination .swiper-pagination-bullet {
    width: 2rem;
    height: 2rem;
    background: var(--red);
}

.job-button-next,
.job-button-prev {
    color: var(--red);
}

/*TECH-PAGE*/
.tech-tabs {
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 6rem;
}

.tech-page-content {
    margin-top: 6rem;
    font-size: 2rem;
    line-height: 2.7rem;
}

.tech-title {
    text-transform: uppercase;
}

.tech-block-title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.tech-text-block {
    gap: 2rem;
}

.tech-images-block {
    gap: 5rem;
}

.tech-free-block {
    gap: 5rem;
}

/*404*/
.page-404 {
    height: 90vh;
}

.page-404 .container {
    gap: 30rem;
}

.page-404-text {
    margin-top: 10rem;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
}

.page-404-button {
    font-size: 2rem;
    padding: 1rem 3rem;
    font-weight: bold;
    background: var(--red);
}

/*MODAL*/
.modal-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -2;
    background: #000000a5;
    opacity: 0;
    display: flex;
}

.modal-wrapper.open {
    z-index: 200;
    opacity: 1;
    transition: .3s;
}

.modal-wrapper:not(.open) {
    transition: .3s;
}

.modal-content {
    max-width: 50%;
    padding: 4rem;
    background: var(--main-black);
}

.modal-title {
    font-size: 2rem;
    padding-bottom: 2rem;
    color: var(--white);
    font-weight: bold;
}

.modal-title span {
    color: var(--red);
}

.modal-form form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.modal-input .iti  {
    max-width: 50%;
    width: 100%;
}
.quiz .iti {
    max-width: 100%;
    width: 100%;
}
.modal-input .iti__country-name {
    font-size: 1rem;
    color: var(--white);
}
.modal-input .iti__country-list {
    background: var(--light-black);
}
.modal-input input {
    border: none;
    outline: none;
    padding: 0.5rem 1rem;
    background: var(--light-black);
    border: 1px solid var(--red);
    font-size: 1.6rem;
    color: var(--white);
    max-width: 100%;
    width: 100%;
}

.modal-submit input {
    border: none;
    background: var(--red);
    padding: 0.5rem 2rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--white);
    max-width: 100%;
    width: fit-content;
}

.modal-wrapper .wpcf7 form.init .wpcf7-response-output,
.modal-wrapper .wpcf7 form.resetting .wpcf7-response-output,
.modal-wrapper .wpcf7 form.submitting .wpcf7-response-output {
    padding: 0;
    display: block;
}

.modal-wrapper .wpcf7 form .wpcf7-response-output {
    border: none;
    padding: 0;
    margin: 0;
    margin-top: 1rem;
    display: block;
}

.modal-disclaimer {
    font-size: 1.4rem;
}

.modal-wrapper .wpcf7 form .wpcf7-response-output {
    border: none;
    padding: 0;
    font-size: 1.4rem;
}

.modal-radio {
    display: flex;
    gap: 1.5rem;
}

.modal-radio label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
}
/*SINGLE-ARTICLE*/
.article-template .single-news-image {
    display: none;
}
.article-template .single-news-text {
    max-width: 100%;
}
.single-news-text img {
    max-width: 60%;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.page-template-page-articles .news-block {
    max-width: 100%;
    border-bottom: 0.1rem solid var(--red);
    padding-bottom: 2rem;
}
.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
	margin: 0 auto;
}
.pagination .current {
    color: var(--red);
}
@media (max-width: 1400px) {
    .hero-car {
        top: 49%;
    }
}

@media (max-width: 1280px) {
    section {
        padding: 5rem 0px;
    }

    h2 {
        font-size: 3.8rem;
        line-height: 4rem;
    }

    .why-glass {
        margin-top: 5rem;
    }

    .why-bottom {
        min-height: 50rem;
    }

    /* .glass:hover {
        transform: scale(1.1) translateY(5rem);
    } */
    .glass1 {
        left: 10%;
    }

    .glass2 {
        left: 20%;
    }

    .glass3 {
        left: 30%;
    }

    .glass4 {
        left: 40%;
    }

    .glass5 {
        left: 50%;
    }

    .mobile-phone {
        max-width: 25rem;
        max-height: 50rem;
    }

    #phone2 {
        top: 25rem;
        left: 10%;
    }
}

@media (max-width: 1230px) {
    .hero {
        min-height: 90vh;
    }

    .hero-title {
        font-size: 4.5rem;
        line-height: 4.6rem;
        max-width: 40rem;
    }

    .hero-lines {
        padding-left: 2rem;
    }

    .quiz-content {
        max-width: 40%;
    }

    .feedback-content h2 {
        font-size: 3.8rem;
        line-height: 4rem;
    }
}

@media (max-width: 1100px) {
    .hero-car {
        top: 51%;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 8px;
    }

    .hero {
        min-height: 80vh;
    }

    .glass {
        max-width: 35rem;
    }

    .mobile-phone {
        border-radius: 4.1rem;
        padding: 0.2rem;
    }

    .mobile-top {
        padding: 1rem 2rem 1rem 3.2rem;
    }

    .mobile-top-right img {
        max-width: 1.6rem;
    }

    .mobile-time {
        font-size: 1.2rem;
    }

    .mobile-chamber {
        max-width: 20%;
    }

    .mobile-chamber i {
        width: 0.4rem;
        height: 0.4rem;
    }

    .mobile-inside {
        border-radius: 3.5rem;
    }

    .feedback-link:hover {
        transform: none;
    }

    .services-hero {
        min-height: fit-content;
        padding: 10rem 0 3rem 0;
    }

    .services-hero-wrapper {
        border-width: 0.5rem;
        min-height: 30rem;
        max-width: 37%;
    }

    .services-about {
        padding-top: 0;
    }

    .services-about-big-text {
        font-size: 3.3rem;
        line-height: 120%;
        max-width: 60%;
    }

    .services-about-small-text {
        max-width: 60%;
        padding-top: 2rem;
    }

    .services-about-button {
        margin-top: 5rem;
    }

    .services-about-content .container {
        height: 100%;
        justify-content: space-around;
        padding: 2rem 0;
    }

    .tab-btn {
        padding: 1rem 1.5rem;
    }

    .single-service {
        gap: 5rem;
    }

    .single-info:nth-child(2n) .single-info-image-bg {
        right: 0px;
    }

    .single-service-text p {
        max-width: 100%;
    }

    .single-info-block p:not(.single-page-title) {
        font-size: 2rem;
        line-height: 130%;
    }

    .single-page-title {
        font-size: 3rem;
        line-height: 130%;
    }

    .single-spec-title-row .single-spec-column {
        font-size: 3rem;
        line-height: 130%;
    }

    .single-spec-row {
        line-height: 130%;
    }

    .single-benefit {
        gap: 2rem;
    }
}

@media (max-width: 890px) {
    h2 {
        font-size: 3rem;
        line-height: 3.1rem;
    }

    .hero {
        min-height: 70vh;
    }

    .social {
        z-index: 150;
    }

    .main-header>.container {
        align-items: center;
    }

    .main-header {
        position: fixed;
        top: 0rem;
        left: 0rem;
        background: #0000008c;
    }

    .header-menu {
        display: none;
    }

    .header-burger {
        display: flex;
        max-width: 5rem;
        width: 100%;
        cursor: pointer;
        padding: 1.5rem 0px;
    }

    .header-burger span {
        position: relative;
        width: 100%;
        height: 0.3rem;
        background: var(--red);
        display: block;
        border-radius: 25rem;
    }

    .header-burger span::before {
        position: absolute;
        width: 100%;
        top: 1rem;
        left: 0px;
        height: 0.3rem;
        background: var(--red);
        display: block;
        border-radius: 25rem;
        content: '';
    }

    .header-burger span::after {
        position: absolute;
        width: 100%;
        bottom: 1rem;
        left: 0px;
        height: 0.3rem;
        background: var(--red);
        display: block;
        border-radius: 25rem;
        content: '';
    }

    .header-burger.open span {
        transform: translateX(4rem);
        width: 70%;
        transition: .3s ease-in;
    }

    .header-burger.open span::before {
        transform: translateX(-4rem) rotate(45deg);
        top: 0rem;
        transition: .3s ease-in;
    }

    .header-burger.open span::after {
        transform: translateX(-4rem) rotate(-45deg);
        bottom: 0rem;
        transition: .3s ease-in;
    }

    .header-burger span p {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0rem;
        left: 0px;
        transition: .3s ease-in;
    }

    .header-burger span p::before {
        position: absolute;
        opacity: 0;
        width: 30%;
        height: 100%;
        content: '';
        left: 0px;
        top: 0.4rem;
        background: var(--red);
    }

    .header-burger span p::after {
        position: absolute;
        opacity: 0;
        width: 30%;
        height: 100%;
        content: '';
        left: 0px;
        bottom: 0.4rem;
        background: var(--red);
    }

    .header-burger.open span p {
        opacity: 1;
    }

    .header-burger.open span p::before {
        transform: rotate(45deg);
        transition: .3s ease-in;
        opacity: 1;
    }

    .header-burger.open span p::after {
        transform: rotate(-45deg);
        transition: .3s ease-in;
        opacity: 1;
    }

    .header-burger:not(.open) span p::after {
        transition: .3s ease-in;
    }

    .header-burger:not(.open) span p::before {
        transition: .3s ease-in;
    }

    .header-burger:not(.open) span {
        transition: .3s ease-in;
    }

    .header-burger:not(.open) span::before {
        transition: .3s ease-in;
    }

    .header-burger:not(.open) span::after {
        transition: .3s ease-in;
    }

    .mobile-wrapper.open {
        z-index: 99;
        transition: .3s;
        opacity: 1;
    }

    .mobile-wrapper:not(.open) {
        transition: .3s;
    }

    .mobile-menu {
        padding: 10rem 3rem;
        font-size: 2rem;
        gap: 2rem;
    }

    .mobile-submenu {
        font-size: 1.5rem;
    }

    .mobile-submenu a {
        padding-left: 0.5rem;
    }

    .header-lang {
        max-width: 7rem;
    }

    .mobile-wrapper.open .mobile-menu {
        right: 0rem;
        transition: .3s;
    }

    .mobile-wrapper:not(.open) .mobile-menu {
        transition: .3s;
        right: -100rem;
    }

    .hero-title {
        font-size: 3.5rem;
        line-height: 4rem;
    }


    .hero-buttons {
        position: relative;
    }

    .hero-btn {
        padding: 1rem 2rem;
        font-size: 1.4rem;
        font-weight: normal;
    }

    .about-pult {
        max-width: 22rem;
        bottom: 0rem;
    }

    .about-description {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .layer {
        margin-top: 0px;
    }

    .why-top {
        gap: 4rem;
    }

    .why-block {
        max-width: 30%;
    }

    .glasses-bg {
        top: 0rem;
    }

    .sale-name {
        font-size: 1.7rem;
        line-height: 2rem;
    }

    .quiz-slide input[type="text"],
    .quiz-slide input[type="tel"] {
        font-size: 1.8rem;
    }

    .quiz-content {
        max-width: 55%;
    }

    .feedback-content h2 {
        font-size: 2.8rem;
    }

    .news-block {
        gap: 2.5rem;
    }

    .news-title {
        font-size: 2.5rem;
    }

    .single-info-image-bg {
        border-width: 0.5rem
    }

    .single-info-text-block {
        padding-left: 2rem;
    }

    .single-service .single-benefit-description {
        font-size: 1.5rem;
    }
    .modal-content {
        max-width: 70%;
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: 65vh;
    }

    .sale-slide {
        max-width: 100%;
        padding: 5rem;
        padding-top: 10rem;
    }

    .sale-slide-active img {
        /* transform: scale(1.1); */
        transition: .5s ease-in;
    }


    .sale-slide:not(.sale-slide-active) img {
        transition: .5s ease-in-out;
    }

    .sale-slide-center img {
        transform: none;
    }

    .sale-slide-center .sale-bg {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.0) 75%);
        backdrop-filter: blur(5px);
        max-width: 32rem;
        max-height: 32rem;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        z-index: -1;
        top: 10%;
        transition: 1s ease-in-out;
    }

    .sale-slide-active .sale-bg {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.0) 65%);
        max-width: 65%;
        max-height: 65%;
        transform: scale(1.2);
        transition: .5s ease-in;
        top: 5rem;
    }

    .car-card {
        max-width: 100%;
    }

    .sk-link {
        max-width: 25%;
    }

    .feedback-link:hover {
        transform: none;
    }

    .services-hero-wrapper {
        border: none;
        max-width: 100%;
    }

}

@media (max-width: 701px) {
    html {
        font-size: 7px;
    }

    section {
        padding: 3rem 0;
    }

    .hero {
        min-height: 60vh;
    }

    .hero-bg {
        max-width: 43%;
    }

    .why-top {
        gap: 3rem;
    }

    .why-block {
        max-width: 48%;
    }

    .car-text-description {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .services-hero-wrapper {
        max-width: 50%;
    }

    .services-about-big-text {
        font-size: 2.5rem;
        line-height: 120%;
    }

    .services-about-small-text {
        font-size: 1.8rem;
        line-height: 120%;
    }

    .single-service-text p {
        max-width: 100%;
    }

    .single-service {
        gap: 5rem;
    }

    .single-benefits {
        justify-content: center;
        gap: 3rem;
        align-items: stretch;
    }

    .single-benefit {
        max-width: 48%;
        padding: 2rem;
        border: #ffffff21;
    }
}

@media (max-width: 650px) {
    .hero {
        min-height: 55vh;
    }

    .layer-slide-bg {
        max-width: 65%;
        bottom: 3rem;
    }

    .layer-slide-text {
        max-width: 60%;
    }

    section .layer-bullet {
        width: 3.5rem;
        height: 3.5rem;
    }

    .layer-bullet {
        font-size: 2.5rem;
    }

    .single-news-block {
        flex-direction: column-reverse;
        padding-top: 2rem;
    }

    .single-news-title {
        max-width: 100%;
    }

    .single-news-text {
        max-width: 100%;
    }
}

@media (max-width: 585px) {
    .modal-input input {
        width: 100%;
    }
    .main-header {
        padding: 1.5rem 0;
    }

    .mobile-menu {
        max-width: fit-content;
        font-size: 1.8rem;
    }

    .hero-title {
        max-width: 32rem;
    }

    .hero {
        min-height: 40vh;
    }

    .hero-bg {
        max-width: 48%;
    }

    .hero-lines {
        padding-top: 2rem;
        margin-top: 7rem;
    }

    .hero-car {
        right: 12%;
        top: 48%;
        max-width: 40%;
    }


    .hero-border-top,
    .hero-lines {
        border-width: 0.5rem;
    }
.layer-slide-text {
    font-size: 1.6rem;
}
    .why-block {
        max-width: 100%;
        gap: 2.5rem;
    }

    .glasses {
        padding-bottom: 0rem;
    }

    .glass {
        max-width: 29rem;
        transition: .3s ease;
    }

    .glass1 {
        left: 15%;
    }

    .glass2 {
        left: 20%;
    }

    .glass3 {
        left: 25%;
    }

    .glass4 {
        left: 30%;
    }

    .glass5 {
        left: 35%;
    }

    .glasses.animate .glass1 {
        left: 5%;
    }

    .glasses.animate .glass2 {
        left: 15%;
    }

    .glasses.animate .glass3 {
        left: 25%;
    }

    .glasses.animate .glass4 {
        left: 35%;
    }

    .glasses.animate .glass5 {
        left: 45%;
    }

    .car h2 {
        max-width: 100%;
    }

    .feedback {
        padding-top: 3rem;
    }

    .feedback .container {
        flex-direction: column-reverse;
    }

    .feedback-block {
        max-width: 100%;
        position: relative;
    }

    .feedback-content {
        gap: 4rem;
    }

    #phone1 {
        margin-top: 10rem;
    }

    #phone2 {
        top: 0rem;
        left: 20%;
    }

    .mobile-content {
        opacity: 1;
        background: var(--white);
    }

    .news-title {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }

    .services-about-big-text {
        max-width: 100%;
    }

    .services-about-small-text {
        max-width: 100%;
    }

    .services-about-row {
        max-width: 80%;
    }

    .services-tab-link {
        font-size: 1.5rem;
    }

    .services-tab-content {
        flex-direction: column-reverse;
        gap: 3rem;
    }

    .services-tab-content.active {
        gap: 3rem;
    }

    .services-tab-text-block {
        max-width: 100%;
        gap: 3rem;
    }

    .services-tab-image-block {
        display: none;
    }

    .services-tab-image-mobile {
        display: block;
    }

    .services-tab-image-mobile img {
        width: 100%;
    }

    .single-info {
        flex-direction: column;
        gap: 5rem;
    }

    .single-service .single-info:nth-child(2n) {
        flex-direction: column;
    }

    .single-info-text-block {
        max-width: 100%;
    }

    .single-info-image-bg {
        bottom: -2rem;
    }

    .single-benefits {
        gap: 1rem;
    }

    .single-cert-slide {
        max-width: 50%;
    }

    .about-galleries .single-job-title {
        margin-top: 2rem;
    }

    .main-footer {
        padding: 2rem 0;
    }

    .main-footer .container {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-block {
        max-width: 100%;
    }
    .footer-block.df {
        align-items: start;
    }
    .modal-content {
        max-width: 90%;
    }
    .single-news-image  {
        max-width: 60%;
    }
    .single-news-text {
        max-width: 100%;
    }
    .single-service {
        padding-top: 5rem;
    }
    .single-news-text img {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        max-width: fit-content;
    }

    .hero {
        min-height: 32vh;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 3rem;
        max-width: 28rem;
    }

    .hero-btn {
        padding: 1rem;
    }

    .about-pult {
        top: 30%;
    }

    .glass {
        max-width: 24rem;
    }

    #phone1 {
        margin-top: 2rem;
        transform: rotate(-5deg) skew(1deg) translateX(0rem);
    }

    #phone2 {
        left: 12%;
    }

    .services-about {
        overflow: hidden;
        padding: 0;
    }

    .services-about-content {
        padding: 2rem 0;
    }

    .services-about-big-text {
        padding-bottom: 4rem;
        padding-top: 1rem;
    }

    .services-about-bg {
        top: 2rem;
    }

    .tab-btn {
        padding: 0.5rem;
        font-size: 1.4rem;
    }

    .single-service {
        gap: 3rem;
    }

    .single-benefit {
        max-width: 100%;
    }

    .single-spec-row:not(.single-spec-title-row) {
        font-size: 1.6rem;
        gap: 1rem;
    }

    .single-info-image {
        max-width: 70%;
    }

    .single-service-text {
        font-size: 1.8rem;
        line-height: 120%;
    }

}

@media (max-width: 440px) {
    .mobile-phone {
        max-width: 20rem;
        max-height: 40rem;
    }
}

@media (max-width: 410px) {
    h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
h2.single-news-title {
    font-size: 2.2rem;
}
    .container {
        padding: 0 2rem;
    }
.single-news-text p {
    font-size: 1.8rem;
}
    .hero {
        min-height: 27vh;
    }

    .hero-title {
        font-size: 2rem;
        max-width: 18rem;
        line-height: 2.5rem;
    }

    .hero-lines {
        margin-top: 4rem;
    }

    .hero-buttons {
        flex-direction: column;
        max-width: 50%;
    }

    .hero-btn:hover {
        transform: none;
    }

    .about-text {
        padding-left: 1rem;
    }

    .layer-slide-bg {
        max-width: 80%;
        bottom: 1rem;
        border-width: 0.5rem;
    }

    .layer-slide-text {
        max-width: 70%;
        font-size: 1.6rem;
    }

    .why-title {
        padding-bottom: 0rem;
        font-size: 2rem;
    }

    .quiz-content {
        max-width: 100%;
    }

    .quiz-btn {
        font-size: 1.5rem;
    }

    .mobile-phone {
        max-width: 20rem;
        max-height: 40rem;
    }

    .mobile-top {
        padding-top: 0.6rem;
    }

    .mobile-top-right img {
        max-width: 1.3rem;
    }

    .mobile-time {
        font-size: 1rem;
        padding-top: 0.1rem;
    }

    #phone2 {
        left: 7%;
    }



}