@font-face {
font-family: 'Haval';
src: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Light.woff2) format('woff2'),
url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Light.woff) format('woff');
font-weight: 300;
font-style: normal;
} @font-face {
font-family: 'Haval';
src: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Medium.woff2) format('woff2'),
url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Medium.woff) format('woff'),
url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Medium.eot); font-weight: 500;
font-style: normal;
} @font-face {
font-family: 'Haval';
src: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Regular.woff2) format('woff2'),
url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Regular.woff) format('woff'),
url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/fonts/Haval-Regular.eot); font-weight: 400;
font-style: normal;
}
body, html{
background-color: #0F0F10;
font-family: "Jura", sans-serif;
overflow: unset;
}
h1, h2, h3, h4, h5, h6{
font-family: "Haval", sans-serif;
font-weight: 400;
}
.custom-arrow {
background-color: #333334; 
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-button-next, .swiper-button-prev{
color: #fff !important;
width: 30px !important;
height: 30px !important;
}
.swiper-button-next svg, .swiper-button-prev svg {
height: 10px !important;
width: 10px !important;
}  .site-navbar {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1050;
height: 56px;
background: rgba(18,18,18,0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.07);
display: flex;
align-items: center;
padding: 0 24px;
border-radius: 28px;
width: min(1200px, calc(100% - 40px));
gap: 16px;
}
@media(max-width:991px){
.site-navbar{width: calc(100% - 20px); height: 52px; padding: 0 14px;}
}
.nav-burger {
display: flex;
flex-direction: column;
gap: 7px;
cursor: pointer;
padding: 6px 4px;
background: none;
border: none;
outline: none;
flex-shrink: 0;
}
.nav-burger span {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: background .2s;
} .nav-burger span:nth-child(1) {
width: 55px;     
background: #fff;  
} .nav-burger span:nth-child(2) {
width: 35px;          
background: #fff; 
}
.nav-burger:hover span { background: #fff; }
.nav-label {
color: #fff;
font-size: 18px;
letter-spacing: .04em;
margin-left: 10px;
cursor: pointer;
user-select: none;
}
.nav-socials {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.nav-socials a{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
}
@media(max-width:991px){.nav-socials{margin-left:auto; gap:6px;}}
.nav-socials img{width:28px;height:28px;display:block;flex: 0 0 28px;max-width:28px;min-width:28px;}
@media(max-width:480px){.nav-socials a{width:24px;height:24px;min-width:24px;min-height:24px;flex:0 0 24px;}.nav-socials img{width:24px;height:24px;flex:0 0 24px;max-width:24px;min-width:24px;}}
.nav-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%; text-decoration: none;
flex-shrink: 0;
}
.nav-socials a:hover { background: rgba(255,255,255,0.6); border-color: transparent; }
.nav-socials img {
width: 45px;
} .nav-socials a:nth-child(1) svg {
width: 38px;
height: 38px;
} .nav-socials a:nth-child(2) svg {
width: 30px;
height: 30px;
}
.nav-socials a:nth-child(3) svg {
width: 30px;
height: 30px;
}
.nav-socials a:nth-child(3) svg {
width: 30px;
height: 30px;
} .menu-overlay {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0,0,0,0);
pointer-events: none;
transition: background .35s ease;
}
.menu-overlay.active {
background: rgba(0,0,0,0.5);
pointer-events: all;
} .slide-menu {
border-radius: 25px;
position: fixed;
top: 80px;
left: 20px;
z-index: 1045;
width: 500px;
background: rgba(22,22,22,0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.08);
border-right: 1px solid rgba(255,255,255,0.06);
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height .55s cubic-bezier(.4,0,.2,1),
opacity .4s ease,
padding .4s ease;
}
.slide-menu.open {
pointer-events: all;   
}
.slide-menu.open {
max-height: 600px;
opacity: 1;
padding: 24px 28px 24px;
} .slot-nav a {
display: block;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
text-decoration: none;
cursor: pointer;
}
.slot-nav a:last-child { border-bottom: none; }
.slot-nav a .lw {
display: block;
overflow: hidden;
height: 30px;
position: relative;
}
.slot-nav a .lt,
.slot-nav a .lh {
display: block;
position: absolute;
left: 0; top: 0;
font-size: 22px;
font-weight: 500;
line-height: 30px;
white-space: nowrap;
letter-spacing: .02em;
transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.slot-nav a .lt { color: #fff;     transform: translateY(0); }
.slot-nav a .lh { color: #fff; transform: translateY(100%); }
.slot-nav a:hover .lt { transform: translateY(-100%); }
.slot-nav a:hover .lh { transform: translateY(0); } .menu-actions {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-book {
background: #fff;
color: #111;
border: none;
border-radius: 50px;
padding: 13px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .2s, color .2s;
text-align: center;
width: 100%;
}
.btn-book:hover { background: #000; color: #fff; outline: 1px solid #fff;
outline-offset: -2px;
}
.btn-close-menu {
background: rgba(255,255,255,0.07);
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50px;
padding: 11px 20px;
font-size: 14px;
cursor: pointer;
transition: background .2s;
text-align: center;
width: 100%;
}
.btn-close-menu:hover { background: rgba(0,0,0,0.14); }  .demo-hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
} .video-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media (max-width: 768px) {
.video-background video {
width: 100vw;
height: 100vh;
min-width: 100vw;
min-height: 100vh;
}
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78vh; height: 100vh;
min-width: 100%;
min-height: 56.25vw; transform: translate(-50%, -50%);
pointer-events: none;
} .hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.55);
} .hero-content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 90px 20px 40px;
gap: 20px;
}
.hero-content img {
max-width: 550px;
width: 100%;
}
.hero-content p {
color: rgba(255, 255, 255, 0.85);
font-size: 22px;
line-height: 1.3;
margin: 40px auto;
}
.hero-content .btn-service {
background: #111;;
color: #fff;
border-radius: 50px;
padding: 12px 66px;
font-size: 17px;
font-weight: 600;
text-decoration: none;
transition: background .2s, color .2s;
}
.hero-content .btn-service:hover {
background: #fff;
color: #111;
} #about{
background-image: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/img/about_bg.svg);
background-position: center center;
background-repeat: no-repeat;
color: #fff;
padding-top: 150px;
margin-right: 40px;
margin-left: 40px;
}
#about h3, #about h2{
font-size: 37px;
font-weight: 700;
color: #ffffff;
}
#about .studio-block{
background-color: rgba( 18, 18, 19, 0.2);
backdrop-filter: blur(10px);            
-webkit-backdrop-filter: blur(10px); 
padding: 20px 35px;
position: relative;
border-radius: 20px;
}
.btn-service{
background-color: #151517;
border-radius: 25px;
padding: 5px 30px;
padding-bottom: 8px;
color: #fff;
font-size: 24px;
}
.btn-service:hover{
background-color: #000;
}
.btn-portfolio{
background-color: #333334;
border-radius: 25px;
color: #fff;
padding: 5px 30px;
padding-bottom: 8px;
font-size: 24px;
}
.btn-portfolio:hover{
background-color: #000;
} #services{
padding: 100px auto 25px auto;
color: #fff;
margin-top: 150px;
}
#services h3{
font-size: 70px;
font-weight: 700;
color: #ffffff;
text-align: left;
z-index: 1;
margin: 0;
}
.service-block{
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 20px 35px;
border-radius: 20px;
border: 1px #29292a solid;
position: relative;
padding-bottom: 40px;
z-index: 5;
height: 400px;
}
#services .btn{
color: #fff;
background-color: #333334;
border-radius: 30px;
font-size: 24px;
padding-top: 5px;
padding-bottom: 10px;
width: 80%;
line-height: 1;
position: absolute;
bottom: -20px;
left: 10%;
}
#services .btn:hover{
background-color: #555556;
}
.left, .right {
position: relative;
width: 250px; height: 250px;
} .circle {
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.circle-65{
width: 65px;
height: 65px;
}
.circle-65:nth-child(1) {
top: -50px;
left: 10px;
}
.circle-65:nth-child(2) {
top: -50px;
left: 60px;
}
.circle-65:nth-child(3) {
top: -50px;
left: 100px;
} .circle-90 { width: 90px; height: 90px; }
.circle-80 { width: 80px; height: 80px; }
.circle-70 { width: 70px; height: 70px; } .left .circle-90 { top: 20px; left: 20px; animation: bubbleUpDown 6s ease-in-out infinite; }
.left .circle-80 { top: 20px; right: 20px; animation: bubbleDiagonal 8s ease-in-out infinite; }
.left .circle-70 { bottom: 50px; left: 40px; animation: bubbleSide 5s ease-in-out infinite; z-index: 10;} .right .circle-90 { top: 10px; right: 30px; animation: bubbleSide 7s ease-in-out infinite; }
.right .circle-80 { bottom: 30px; right: 60px; animation: bubbleDiagonal 9s ease-in-out infinite; z-index: 10;}
.right .circle-70 { top: 50px; right: 170px; animation: bubbleUpDown 5s ease-in-out infinite; z-index: 10;} @keyframes bubbleUpDown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
@keyframes bubbleDiagonal {
0%, 100% { transform: translate(0,0); }
50% { transform: translate(25px,-25px); }
}
@keyframes bubbleSide {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-30px); }
} .circle-90 {
animation: bubbleUpDown 6s ease-in-out infinite;
}
.circle-80 {
animation: bubbleDiagonal 8s ease-in-out infinite;
}
.circle-70 {
animation: bubbleSide 5s ease-in-out infinite;
}
.service-wrapper{
margin-top: -130px;
} #why{
padding: 25px 20px;
margin-top: 80px;
}
#why h3{
font-size: 48px;
font-weight: 700;
color: #ffffff;
}
.why-img .why-1{
object-fit: cover;
background-image: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/img/why-1.png);
background-position: center center;
background-repeat: no-repeat;
height: 350px;
border-radius: 20px;
}
.why-img .why-2{
object-fit: cover;
background-image: url(//wrap-it.ru/wp-content/themes/reforma_styling_2026/assets/img/why-2.png);
background-position: center center;
background-repeat: no-repeat;
height: 350px;
border-radius: 20px;
}
.whySwiper .why-wrapper{
background-color: #131314;
border-radius: 20px;
padding: 20px;
color: #fff;
border: 1px #29292a solid;
height: 200px;
}
.why-wrapper h4{
font-size: 24px;
}
.whySwiper .btn-prev, .whySwiper .btn-next{
color: #fff;
background-color: #333334;
border-radius: 30px;
font-size: 24px;
padding: 5px 80px 10px 80px;
line-height: 1;
}
.whySwiper .btn-prev:hover, .whySwiper .btn-next:hover{
background-color: #555556;
}
.custom-arrow {
background-color: #000;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.custom-arrow::after {
font-size: 18px; } #blog{
padding: 25px 0;
}
#blog h3, #blog h2{
font-size: 48px;
font-weight: 500;
color: #ffffff;
}
#blog span{
padding: 5px 30px;
background-color: #161617;
border-radius: 40px;
line-height: 1.3;
height: 35px;
margin-left: 30px;
display: inline-block;
width: auto;
}
#blog a{
text-decoration: none;
color: #ffffff;
}
#blog .post-title{
margin-top: 20px;
color: #ffffff;
font-size: 25px;
}
#blog .post-date{
color: #fff;
}
.blog-list .col-md-4{
margin-top: 0;
}
.blog-list{
padding-left: 40px;
padding-right: 40px;
}
.blog-list .col-md-4 div{
width: 95%;
} #portfolio{
padding: 25px 0;
}
#portfolio h3{
font-size: 48px;
font-weight: 700;
color: #ffffff;
}
#portfolio span{
color: #ffffff;
padding: 5px 30px;
background-color: #161617;
border-radius: 40px;
line-height: 1.3;
height: 35px;
margin-left: 30px;
}
#portfolio a{
text-decoration: none;
color: #ffffff;
} .map-contact{
position: absolute;
width: 460px;
height: 360px;
background-color: #0F0F10;
border-radius: 25px;
left: 50px;
top: 25px;
padding: 60px;
}
.map-contact h3{
font-size: 48px;
font-weight: 600;
color: #ffffff;
}
.map-contact p{
color: #fff;
font-size: 12px;
}
.map-contact .d-flex img{
height: 30px;
width: 30px;
padding: 5px;
border-radius: 50px;
background-color: #fff;
object-fit: contain; 
} #footer{
padding: 60px 0;
}
#footer p{
font-size: 12px;
font-weight: 400;
line-height: 1.1;
margin-top: 22px;
color: #fff;
margin-bottom: 0;
}
#footer a{
color: #a8cdff;
text-decoration: none;
font-size: 12px;
line-height: 1.1;
} :root {
--rs-bg: #1a1a1a;
--rs-surface: #000;
--rs-border: rgba(255,255,255,0.1);
--rs-text: #ffffff;
--rs-muted: rgba(255,255,255,0.45);
--rs-btn: #3a3a3a;
--rs-btn-hover: #4a4a4a;
--rs-input-bg: rgba(255,255,255,0.05);
--rs-input-border: rgba(255,255,255,0.15);
--rs-input-focus: rgba(255,255,255,0.25);
--rs-accent: #e0c97f;
} .btn-rs {
background: var(--rs-btn);
color: var(--rs-text);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.03em;
padding: 14px 36px;
border: 1px solid var(--rs-border);
border-radius: 50px;
transition: background 0.2s, transform 0.15s;
}
.btn-rs:hover {
background: var(--rs-btn-hover);
color: var(--rs-text);
transform: translateY(-1px);
}
.btn-rs:active {
transform: translateY(0);
} .modal-backdrop.show {
opacity: 0.75;
} .modal-content {
background: var(--rs-surface);
border: 1px solid var(--rs-border);
border-radius: 20px;
padding: 10px 6px;
color: var(--rs-text);
}
.modal-header {
border: none;
padding: 24px 28px 0;
flex-direction: column;
align-items: center;
text-align: center;
}
.modal-title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--rs-text);
}
.modal-subtitle {
margin-top: 10px;
font-size: 0.83rem;
font-weight: 400;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.modal-subtitle a {
color: var(--rs-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.btn-close-rs {
position: absolute;
top: 18px;
right: 22px;
background: none;
border: none;
color: rgba(255,255,255,0.5);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
padding: 4px;
transition: color 0.15s;
}
.btn-close-rs:hover { color: #fff; }
.modal-body {
padding: 28px 28px 10px;
}
.modal-footer {
border: none;
padding: 0 28px 28px;
flex-direction: column;
align-items: stretch;
gap: 0;
} .rs-input {
background: var(--rs-input-bg);
border: 1px solid var(--rs-input-border);
border-radius: 50px;
color: var(--rs-text);
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
padding: 14px 22px;
width: 100%;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.rs-input::placeholder { color: var(--rs-muted); }
.rs-input:focus {
background: rgba(255,255,255,0.08);
border-color: var(--rs-input-focus);
box-shadow: none;
}
.input-wrap { margin-bottom: 14px; } .rs-check-wrap {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.rs-checkbox {
width: 20px;
height: 20px;
min-width: 20px;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: 4px;
background: transparent;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
position: relative;
transition: border-color 0.2s, background 0.2s;
}
.rs-checkbox:checked {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.5);
}
.rs-checkbox:checked::after {
content: '';
position: absolute;
left: 5px; top: 2px;
width: 7px; height: 11px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(42deg);
}
.rs-check-label {
font-size: 0.82rem;
color: rgba(255,255,255,0.65);
cursor: pointer;
line-height: 1.4;
} .btn-rs-submit {
background: var(--rs-btn);
color: var(--rs-text);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 15px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50px;
width: 100%;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.btn-rs-submit:hover {
background: var(--rs-btn-hover);
transform: translateY(-1px);
}
.btn-rs-submit:active { transform: translateY(0); } .rs-legal {
font-size: 0.73rem;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 16px;
font-style: italic;
line-height: 1.45;
} .rs-divider {
height: 1px;
background: var(--rs-border);
margin: 20px 0 0;
}
#blog span:hover{
border: 1px #fff solid;
} @media (max-width: 768px) {
.nav-socials {
gap: 5px;
}
.slide-menu{
width: 90%;
left: 5%;
}
.hero-content img {
max-width: 350px;
width: 100%;
}
.hero-content p {
font-size: 18px;
line-height: 1.8;
}
#about .order-last{
margin-top: 450px;
}
#about .btn-service, #about .btn-portfolio {
font-size: 18px;
width: 80%;
}
#about{
margin-left: 5px;
margin-right: 5px;
padding-top: 20px;
}
#about .studio-block{
padding: 5px 5px;
padding-bottom: 30px;
}
.studio-block{
margin-top: 100px;
} 
#about h2 {
font-size: 40px;
font-weight: 400;
}   
#about h3 {
font-size: 22px;
font-weight: 400;
margin-top: 20px;
}
.btn-service, .btn-portfolio{
width: 100%;
margin-top: 20px;
}
.service-wrapper{
padding-top: 0 !important;
}
.service-wrapper .col-md-3{
margin-top: 50px;
}
.service-wrapper{
margin-top: 0px;
}
#services h3{
text-align: left;
}
.right, .left{
display: none;
}
#services h3 {
font-size: 50px;
font-weight: 500;
}
.whySwiper .btn-prev, .whySwiper .btn-next{
padding: 5px 30px 10px 30px;
font-size: 18px;
}
.whySwiper .why-wrapper{
height: 390px;
}
.why-wrapper h4{
margin-bottom: 25px;
}
.why-wrapper h4 {
font-size: 22px;
}
.why-21{
margin-top: 15px;
}
#blog h2 {
font-size: 40px;
line-height: 1.2;
color: #ffffff;
}
#blog h3 {
font-size: 25px;
line-height: 1.2;
}
#blog span {
margin-left: 0;
margin-bottom: 20px;
margin-top: 25px;
margin-bottom: 25px;
}
#portfolio .row .d-flex{
flex-direction: column
}
#portfolio span{
margin-left: 0;
width: 230px;
}
#portfolio h3 {
font-size: 40px;
}
.map-contact {
position: relative;
left: 0;
top: 0;
padding-top: 10px;
}
#map .row {
flex-direction: column;
}
#map .row .col:first-child {
order: 2; }
#map .row .col:last-child {
order: 1; }
} 
@media screen and (max-width: 1600px) {
.left, .right{
display: none;
}
}
@media screen and (max-width: 768px) {
.service-block{
margin-bottom: 40px;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px){
.service-block{
margin-bottom: 50px;
}
#blog .post-title {
font-size: 17px;
}
#about .studio-block{
margin-top: 100px;
}
#about h3, #about h2 {
font-size: 28px;
}
#services h3 {
font-size: 120px;
}
.btn-service{
padding: 6px 12px;
}
}
@media screen and (min-width: 1600px) and (max-width: 1800px){
.whySwiper .why-wrapper{
height: 270px;
}
#services h3 {
font-size: 150px;
}
}
@media screen and (min-width: 1400px) and (max-width: 1600px){
.service-wrapper{
margin-top: -90px;
}
#services h3 {
font-size: 130px;
}
.service-block{
height: 430px;
padding: 10px 18px;
}
.whySwiper .why-wrapper{
height: 290px;
}
}
@media screen and (min-width: 1200px) and (max-width: 1610px){
.service-wrapper{
margin-top: -50px;
}
#services h3 {
font-size: 110px;
}
.whySwiper .why-wrapper{
height: 320px;
}
#about h3, #about h2 {
font-size: 30px;
}
.btn-service{
padding: 6px 12px;
}
.service-block{
margin-bottom: 40px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.service-wrapper{
margin-top: -60px;
}
#services h3 {
font-size: 90px;
}
.whySwiper .why-wrapper{
height: 380px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
#services h3 {
font-size: 80px;
}
.whySwiper .why-wrapper{
height: 380px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.service-wrapper {
margin-top: -20px;
}
}
@media screen and (max-width: 400px){
.nav-socials img {
width: 35px;
}
.nav-socials {
gap: 4px;
}
}
.nav-menu{display:flex;gap:24px;align-items:center;margin-left:auto;margin-right:20px;}
.nav-menu a{color:#fff;text-decoration:none;font-family:"Haval",sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:1px;}
@media(max-width:991px){.nav-menu{display:none;}}
@media(min-width:992px){.nav-burger,.nav-label{display:none!important;}}
@media(max-width:991px){.nav-menu{display:none;}}
body.admin-bar .site-navbar{top: calc(10px + 32px);}
@media(max-width:782px){body.admin-bar .site-navbar{top: calc(10px + 46px);}}
body.admin-bar .slide-menu{top: calc(80px + 32px);}
@media(max-width:782px){body.admin-bar .slide-menu{top: calc(80px + 46px);}}
.service-price{color:#fff;font-size:18px;margin:10px 0;}
.section-subtitle{color:#fff;margin-top:0;margin-left:30px;}
#faq h2,#warranty h2,#reviews h2{color:#fff;}
#faq .accordion-button{background:#1a1a1a;color:#fff;}
#faq .accordion-body{background:#0f0f10;color:#fff;}
#faq .accordion-item{border-color:#333;}
#warranty ul{color:#fff;}
#warranty p,#reviews a{color:#fff;}
#warranty h2,#faq h2{color:#fff;}
.warranty-list{color:#fff;list-style:none;padding:0;}
.warranty-list li{margin:8px 0;}
#footer h4{color:#fff;}
#footer p,#footer a{color:#fff;}
.warranty-section h2,.faq-section h2{color:#fff;text-align:left;font-size:50px;font-weight:700;}
.warranty-card{background:linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:30px 20px;text-align:center;color:#fff;backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(0,0,0,0.4);height:100%;}
.warranty-num{font-size:48px;font-family:"Haval",sans-serif;font-weight:700;line-height:1;}
.warranty-text{margin-top:10px;font-size:16px;line-height:1.4;}
.faq-accordion .accordion-item{background:transparent;border:1px solid rgba(255,255,255,0.12);border-radius:12px;margin-bottom:12px;overflow:hidden;}
.faq-accordion .accordion-button{background:rgba(255,255,255,0.05);color:#fff;box-shadow:none;}
.faq-accordion .accordion-button:not(.collapsed){background:rgba(255,255,255,0.08);color:#fff;}
.faq-accordion .accordion-body{background:rgba(0,0,0,0.4);color:#fff;}
.blog-page{color:#fff;}
.blog-page h1,.blog-page h2{color:#fff;}
.blog-card{background:linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);height:100%;display:flex;flex-direction:column;}
.blog-card-img img{width:100%;height:220px;object-fit:cover;}
.blog-card-content{padding:20px;display:flex;flex-direction:column;gap:10px;}
.blog-card-meta{opacity:0.7;font-size:14px;}
.blog-card-title{font-size:22px;margin:0;}
.blog-card-title a{color:#fff;text-decoration:none;}
.blog-card-excerpt{color:rgba(255,255,255,0.85);margin:0;}
.blog-card-link{color:#fff;text-decoration:none;margin-top:auto;}