/*!
Theme Name: RonatAuto
Author: OmegaStudio
Author URI: http://omegastar.ru
Version: 1.0.0
License: GNU General Public License v2 or later
*/

html, body {width: 100%; margin: 0;	padding: 0;	font-family: "Roboto", Sans-serif; font-size: 16px; line-height: 21px;scroll-behavior: smooth;
	background: var(--body-bg-image) 0 0 repeat var(--body-bg-color); color: var(--body-text);}
a  {outline: none; text-decoration: none; color:#000;}
a:hover {text-decoration: none; color:#fb0616;}
.color__red {color: #fb0616;}
.container {max-width: 1180px;}
h1 {margin:0; padding: 0; font-size: 46px; font-weight: 700;}
h2 {font-size: 34px; font-weight: 600; line-height: 38px;}
.bold {font-weight: 600;}
@media (max-width: 991px) {
    .container {max-width: 100%; padding: 0 20px;}
}

/*===============Header===========*/
header {padding:20px 0; display: flex; gap: 20px; align-items: center; justify-content: space-between;}
.top__logo {display: flex; gap: 20px;  font-size: 11px; font-weight: 600; align-items: center;}
.top__logo-name {font-size: 28px;display: block; font-family: "Times New Roman", Sans-serif; margin-bottom: 10px;}
.top__logo-info {width: 150px; line-height: 13px;}
.top__logo:hover {color:#000;}
.header__button {display: none;}
.header__contacts {display: flex; gap: 60px; align-items: center; justify-content: space-between;}
.header__contacts-address {background: url('/wp-content/uploads/2026/03/local.png') no-repeat 0 center; background-size: 34px 34px; padding-left: 50px;}
.header__address-title {font-weight: 600;}
.header__contacts-address p {margin:0; padding:0;}
.header__contacts .branch__block-social {margin: 0;}
.header__contacts-phone {font-size: 22px; font-weight: 600;}
.offcanvas .header__contacts {display: none;}

/*===============Menu===========*/
nav .menu {list-style: none; display: flex; gap: 40px; font-weight: 500; font-size: 18px;}
nav .current-menu-item a {color: #fb0616;}
.offcanvas-header {margin:20px 0 0 0;}
.offcanvas ul {list-style: none; margin: 0; padding: 0;}
.offcanvas ul li {margin: 15px 0; font-size: 20px;}
.offcanvas-header {align-items: flex-start;}
.header__button-city {display: block; border: none; background: #000; color: #fff; border-radius: 5px; padding: 10px 30px; font-size: 15px;}
@media (max-width: 991px) {
    .header__button {display: block; border: none; background: #000; color: #fff; border-radius: 5px; padding: 10px 30px; font-size: 15px;}
    nav {display: none;}
    .header__contacts {display: none;}
    .offcanvas .header__contacts {display: block; padding-top: 20px; margin-top: 20px; border-top: 1px solid #ccc;}
    .offcanvas .header__contacts-phone, .offcanvas .header__contacts-address {margin-bottom: 20px;}

}
@media (max-width: 580px) {
    .top__logo img {display: none;}
}
@media (max-width: 380px) {
    .header__button {padding: 10px 20px; font-size: 13px;}
}


.mobile__bottom {background: #fff; color: #000; padding: 10px 0; display: none; position: fixed; bottom: 0; left: 0; width: 100%; 
    border-top: 1px solid #ccc;}
@media (max-width: 768px) {
   .mobile__bottom {display: flex !important; justify-content: space-around; align-items: center;}
   .mobile__bottom a {padding:0 15px;}
   .city_button {border: 1px solid #000; color: #000; background: none; border-radius: 10px; font-size: 12px; font-weight: 500; display: block; padding: 5px 20px !important;}
}



/*===============Block 1===========*/
.top__block {margin:0 0 30px 0; display: flex; align-items: center;}
.top__block-left {font-size: 46px; font-weight: 700; line-height: 48px;flex: 0 0 35%;}
.top__block-text {display: block;}
.top__block-left svg {display: block; width: 310px;}
.top__block-right {flex: 0 0 60%;}
.top__block-right img {width: 100%; height:auto;}
.top__block-button {background: #fb0616; display: inline-block; text-align: center; padding: 0 30px; border-radius: 5px; color: #fff; font-size: 16px; 
	font-weight: 500; margin-top: 20px;}
.top__block-button:hover {background: #000; color: #fff;}

.draw-line {stroke: #fb0616; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1000;
      stroke-dashoffset: 1000; opacity: 1; animation: drawCycle 34s linear infinite;}
@keyframes drawCycle {
    /* старт: линии нет */
    0% {
	    stroke-dashoffset: 1000;
        opacity: 1;
      }
    /* линия рисуется ~1.5 сек */
    4.41% {
	    stroke-dashoffset: 0;
        opacity: 1;
    }
    /* держится 30 сек */
    92.65% {
        stroke-dashoffset: 0;
	    opacity: 1;
    }
    /* мгновенно исчезает */
    92.66% {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    /* скрыта ~2 сек */
    100% {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
}
@media (max-width: 768px) {
    .top__block {margin:0 0 30px 0; display: flex; align-items: center; flex-wrap: wrap;}
    .top__block-left {font-size: 46px; font-weight: 700; line-height: 48px;flex: 0 0 100%; text-align: center; margin-bottom: 30px;}
    .top__block-right {flex: 0 0 70%; margin: 0 auto;}
    .top__block-left svg {display: block; width: 310px; margin: 0 auto;}
}    


/*===============Block 1===========*/
.top__inner {margin-top: -40px;}
.top__inner .top__block-left {flex: 0 0 45%;}
.top__inner h1 {font-size: 38px; font-weight: 700; line-height: 48px;}
.top__inner .top__block-left svg {display: block; width: 100%;}
.top__inner .top__block-right {flex: 0 0 50%;}
.top__inner .color__red {display: inline-block;}
@media (max-width: 1120px) {
    .top__inner h1 {font-size: 32px; font-weight: 700; line-height: 44px;}
}    
@media (max-width: 991px) {
    .top__inner .top__block-left {flex: 0 0 60%;}
    .top__inner .top__block-right {flex: 0 0 40%;}
    .top__inner {margin-top: -20px;}
}    
@media (max-width: 768px) {
    .top__inner {margin-top: 0;}
    .top__inner .top__block-left {flex: 0 0 100%; text-align: center; margin-bottom: 0;}
    .top__inner h1 {font-size: 32px; font-weight: 700; line-height: 36px;}
    .top__inner .top__block-right {flex: 0 0 70%; margin: 0 auto;}
}    


/*===============Number Block===========*/
.numbers__block {display: flex; margin: 0 auto; margin-bottom: 90px; align-items: flex-start; justify-content: space-between; width: 70%;}
.number__block {flex:0 0 30%; display: flex; gap:10px;font-size: 18px;font-weight: 500; align-items: center;}
.number__block .count-up {color: #fb0616; font-weight: 600; font-size: 90px;}
@media (max-width: 1140px) {
    .numbers__block {width: 90%;}
}      
@media (max-width: 768px) {
    .number__block .count-up {color: #fb0616; font-weight: 600; font-size: 60px;}
    .number__block {font-size: 15px;}
    .numbers__block {width: 100%;}
}  
@media (max-width: 650px) {
    .number__block .count-up {color: #fb0616; font-weight: 600; font-size: 60px;}
    .number__block {font-size: 15px; flex:0 0 46%; margin-bottom: 20px;}
    .numbers__block {flex-wrap: wrap; justify-content: space-evenly;margin-bottom: 20px;}
}
@media (max-width: 460px) {
    .number__block .count-up {color: #fb0616; font-weight: 600; font-size: 40px;}
}
@media (max-width: 380px) {
    .numbers__block {width: 70%;}
    .number__block {font-size: 15px; flex:0 0 100%; margin-bottom: 40px;}
    .number__block .count-up {color: #fb0616; font-weight: 600; font-size: 60px;}
}


.diplom {margin:0 0 70px 0; text-align: center;}
.diplom img {width: 60%; height: auto; margin: 0 auto;}

[x-cloak] {display: none !important;}
.diplom__img {display: block;max-width: 100%;height: auto;	cursor: zoom-in;transition: transform 0.3s ease, opacity 0.3s ease;}
.diplom__img:hover {transform: scale(1.02);	opacity: 0.96;}
.diplom-modal {position: fixed;	inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(0, 0, 0, 0.88);}
.diplom-modal__image {display: block; max-width: 90vw;max-height: 90vh;	width: auto;height: auto;border-radius: 10px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);}
.diplom-modal__close {position: absolute;top: 20px;	right: 20px;width: 44px;height: 44px;border: none;border-radius: 50%;background: #fff;	color: #000;
	font-size: 28px;line-height: 1;	cursor: pointer;}
@media (max-width: 768px) {
    .diplom img {width: 90%; height: auto; margin: 0 auto;}
}    
@media (max-width: 650px) {
    .diplom {margin:0 0 30px 0;}
    .diplom-modal__image {width: 100%;}
}    


/*===============Branches Block===========*/
.branches__block {margin-bottom: 70px;}
.branches__block h2 {text-align: center; margin: 0 auto 50px auto; width: 50%;}
.branches__block-inline {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.branch__block {flex: 0 0 28%; background: url('/wp-content/uploads/2026/03/bg_city.png') no-repeat center -20px; background-size: contain; margin-bottom: 60px;}
.branch__block img {width: 100%; height: auto;}
.branch__block h3 {font-size: 24px; font-weight: 500; margin-top: -20px;}
.branch__block p {margin:3px 0; font-size: 15px;}
.branch__block-social {display: flex; align-items: center; gap: 10px; margin-top: 10px;}
.branch__block-social img {width: 34px; height: 34px;}
.branch__block-button {background: #fb0616; display: inline-block; text-align: center; padding: 10px 30px; border-radius: 5px; color: #fff; font-size: 16px; 
	font-weight: 500; margin-top: 20px;}
.branch__block-button:hover {background: #000; color: #fff;}


@media (max-width: 991px) {
    .branches__block h2 {width: 80%;}
}  
@media (max-width: 768px) {
   .branch__block {flex: 0 0 45%;margin-bottom: 40px;}     
   .branches__block {margin-bottom: 40px;}
}    
@media (max-width: 480px) {
    .branches__block h2 {width: 90%; font-size: 28px; line-height: 32px; margin: 0 auto 30px auto;}
    .branch__block {flex: 0 0 90%;margin:0 auto 40px auto; text-align: center;} 
    .branch__block-social {display: block;}
}  


/*===============Franshiza Block===========*/
.franshiza__block {margin-bottom: 120px; display: flex; align-items: center; justify-content: space-between;}
.franshiza__block-image {flex: 0 0 50%;}
.franshiza__block-image img {width: 100%; height: auto;}
.franshiza__block-right {flex: 0 0 45%;}
.franshiza__block-info {font-size: 34px; font-weight: 600; margin-bottom: 20px;}
@media (max-width: 991px) {
    .franshiza__block-image {flex: 0 0 40%;}
    .franshiza__block-right {flex: 0 0 55%;}
}  
@media (max-width: 768px) {
    .franshiza__block-image {display: none;}
    .franshiza__block-right {flex: 0 0 100%;}
}  
@media (max-width: 480px) {
    .franshiza__block {margin-bottom: 50px;}
    .franshiza__block-right {text-align: center;}
    .franshiza__block-info {font-size: 28px; line-height: 32px; margin-bottom: 10px;}
}  


/*===============Video Block===========*/
.video__block {margin-bottom: 90px; display: flex; align-items: flex-start; justify-content: space-between;}
.video__block-left {flex: 0 0 25%;}
.video__block-info {display: flex; align-items: center; gap: 20px; margin: 20px 0 0 0;}
.video__block-info p {margin:0; padding: 0; font-weight: 500; font-size: 16px;}
.video__block-right {flex: 0 0 65%;}
.video__block-right ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.video__block-right ul li {padding: 0; margin: 0 0 30px 0; flex: 0 0 47%;}

.videos-card {position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; background: #000; border-radius: 5px;}
.videos-card__image {display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.videos-card::after {content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none;}
.videos-card__top, .videos-card__bottom, .videos-card__play {position: absolute; z-index: 2;}
.videos-card__top {top: 16px; left: 16px; right: 16px;}
.videos-card__title {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);}
.videos-card__play {top: 50%; left: 50%; width: 50px; height: 34px; background: #ff0000; border-radius: 5px; transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);}
.videos-card__play::before {content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); width: 0; height: 0;
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 20px solid #fff;}
.videos-card__bottom {left: 16px; right: 16px; bottom: 16px;}
.videos-card__watch {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);}
.videos-card:hover .videos-card__play {transform: translate(-50%, -50%) scale(1.05);}
.videos-card__play {transition: transform 0.2s ease;}

@media (max-width: 991px) {
    .video__block-left {flex: 0 0 30%;}
}  
@media (max-width: 768px) {
    .video__block {flex-wrap: wrap;margin-bottom: 40px;}
    .video__block-left {flex: 0 0 100%; text-align: center; margin-bottom: 30px;}
    .video__block-left h2 {margin: 0;}
    .video__block-info a {display: none;}
    .video__block-info {margin:0;}
    .video__block-info p {margin:10px 0 0 0; text-align: center; flex: 0 0 100%;}
    .video__block-right {flex: 0 0 100%;}
}  
@media (max-width: 480px) {
    .video__block-left h2 {font-size: 28px; line-height: 32px;}
    .video__block-right ul li {margin: 0 0 30px 0; flex: 0 0 100%;}
} 


/*===============Steps Block===========*/
.steps__block {width: 90%; margin: 0 auto 70px auto;}
.steps__block h2 {text-align: center; margin: 0 auto 50px auto; width: 40%;}
.steps__block-inline {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.step__block {flex: 0 0 30%; text-align: center;}
.steps__block img {width: auto; height: 80px; margin-bottom: 20px;}
.steps__block h3 {font-size: 24px; font-weight: 500; margin-bottom: 30px;}
@media (max-width: 768px) {
    .steps__block {width: 100%; margin: 0 0 40px 0;}
    .steps__block h2 {margin: 0 0 50px 0; width: 100%;}
    .step__block {flex: 0 0 47%; margin-bottom: 30px;}
    .steps__block-inline {justify-content: space-around;}
}  
@media (max-width: 480px) {
    .steps__block h2 {font-size: 28px; line-height: 32px;}
    .step__block {flex: 0 0 100%; margin-bottom: 30px;}
}  


/*===============About Block===========*/
.about__block {width: 90%; margin: 0 auto 70px auto;}
.about__block h2 {text-align: center; margin: 0 auto 50px auto; width: 60%;}
.about__block p {margin:20px 0;font-size: 20px; line-height: 28px;}
@media (max-width: 991px) {
    .about__block h2 {margin: 0 0 50px 0; width: 100%;}
}  
@media (max-width: 480px) {
    .about__block h2 {font-size: 28px; line-height: 32px;}
} 


/*===============Auto Block===========*/
.autos__block {margin-bottom: 70px;}
.autos__block h2 {text-align: center; margin: 0 auto 50px auto; width: 40%;}
.autos__block-inline {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.auto__block {flex: 0 0 30%; margin-bottom: 60px; text-align: center;}
.auto__block h3 {text-transform: uppercase; font-weight: 600; color: #fb0616; font-size: 20px;}
.auto__block-meta {font-size: 24px; margin-bottom: 20px;}

[x-cloak] {display: none !important;}
body.gallery-lock {overflow: hidden;}
.car-gallery {width: 100%;}
.car-gallery__main-wrap {position: relative; overflow: hidden; border-radius: 5px; background: #fff;}
.car-gallery__main {display: block;	width: 100%; height: 260px;	object-fit: cover; cursor: zoom-in;	transition: opacity 0.3s ease;}
.car-gallery__main:hover {opacity: 0.96;}
.car-gallery__arrow {position: absolute; top: 50%; transform: translateY(-50%);	z-index: 2;
	width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.45);
	color: #fff; font-size: 22px; line-height: 1;	cursor: pointer; display: flex;	align-items: center;justify-content: center;padding: 0;
    	transition: background 0.3s ease;}
.car-gallery__arrow:hover {background: rgba(0, 0, 0, 0.7);}
.car-gallery__arrow--prev {left: 10px;}
.car-gallery__arrow--next {right: 10px;}
.car-gallery__thumbs {display: flex; margin-top:2px;flex-wrap: wrap; justify-content: flex-start; gap: 1px; background: #efefef;}
.car-gallery__thumb {padding: 0; border: none;	background: #000;border-radius: 5px; overflow: hidden; flex: 0 0 33%;
	 cursor: pointer; transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
.car-gallery__thumb:hover {opacity: 1;transform: translateY(-2px);}
.car-gallery__thumb img {display: block;width: 100%;height: 80px;object-fit: cover;opacity: 0.5;}
.car-gallery__thumb.is-active  img {opacity: 1;}
.car-gallery__modal {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;padding: 40px 70px;background: rgba(0, 0, 0, 0.92);}
.car-gallery__modal-image {display: block;	max-width: 100%;max-height: 90vh;width: auto;height: auto;object-fit: contain;border-radius: 10px;}
.car-gallery__modal-close {position: absolute;top: 20px;right: 20px;z-index: 3;width: 44px;	height: 44px;border: none;border-radius: 50%;background: #fff;
	color: #000;font-size: 30px;line-height: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;	padding: 0;}
.car-gallery__modal-arrow {position: absolute;	top: 50%;transform: translateY(-50%);z-index: 3;width: 52px;height: 52px;border: none;border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);	color: #fff;font-size: 34px;line-height: 1;cursor: pointer;display: flex;
	align-items: center;justify-content: center;padding: 0;	transition: background 0.3s ease;}
.car-gallery__modal-arrow:hover {background: rgba(255, 255, 255, 0.28);}
.car-gallery__modal-arrow--prev {left: 20px;}
.car-gallery__modal-arrow--next {right: 20px;}

.auto__block-tariffs {display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0 0;}
.car-tariff-row {flex:0 0 33%;}
.auto__block-s {background: #efefef; border-radius: 15px; padding:5px 15px; font-size: 14px; margin-bottom: 5px; display: block;}
.auto__block-n {font-size: 14px; font-weight: 600;}

@media (max-width: 991px) {
    .auto__block {flex: 0 0 48%;}
    .autos__block h2 {text-align: center; margin: 0 auto 50px auto; width: 100%;}
    
}  
@media (max-width: 768px) {
	.car-gallery__main {height: 220px;}
	.car-gallery__thumb img {width: 74px;height: 52px;}
	.car-gallery__modal {padding: 20px 16px;}
	.car-gallery__modal-arrow {width: 24px;	height: 24px;font-size: 20px;}
	.car-gallery__modal-arrow--prev {left: 10px;}
	.car-gallery__modal-arrow--next {right: 10px;}
	.car-gallery__modal-close {top: 10px;right: 10px;}
    .autos__block {margin-bottom: 20px;}
}
@media (max-width: 680px) {
    .auto__block {flex: 0 0 100%;}
    .car-gallery__thumb img {display: block;width: 100%;height: 130px;object-fit: cover;opacity: 0.5;}
    .car-gallery__main {display: block;	width: 100%; height: 360px;	object-fit: cover; cursor: zoom-in;	transition: opacity 0.3s ease;}
}    
@media (max-width: 480px) {
    .autos__block h2 {font-size: 28px; line-height: 32px; margin-bottom: 30px;}
    .car-gallery__thumb img {display: block;width: 100%;height: 60px;object-fit: cover;opacity: 0.5;}
    .car-gallery__main {display: block;	width: 100%; height: auto;	object-fit: cover; cursor: zoom-in;	transition: opacity 0.3s ease;}
}  


footer {background: #fb0616; padding: 15px 0; text-align: center; color:#fff}
.scroll-to-top {position: fixed; right: 20px; bottom:70px; padding: 10px 10px; border-radius: 100px; cursor: pointer;	
    transition: opacity 0.3s ease, transform 0.3s ease; background: #000; color: #fff !important; font-size: 40px;}
.scroll-to-top:hover {transform: translateY(-2px);}