@font-face {
    font-family: 'Bahnschrift';
    src: url('../themes/tmp/assets/fonts/Bahnschrift.eot');
    src: url('../themes/tmp/assets/fonts/Bahnschrift.eot?#iefix') format('embedded-opentype'),
    url('../themes/tmp/assets/fonts/Bahnschrift.svg#Bahnschrift') format('svg'),
    url('../themes/tmp/assets/fonts/Bahnschrift.ttf') format('truetype'),
    url('../themes/tmp/assets/fonts/Bahnschrift.woff') format('woff'),
    url('../themes/tmp/assets/fonts/Bahnschrift.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Days';
    src: url('../themes/tmp/assets/fonts/Days.eot');
    src: url('../themes/tmp/assets/fonts/Days.eot?#iefix') format('embedded-opentype'),
    url('../themes/tmp/assets/fonts/Days.svg#Days') format('svg'),
    url('../themes/tmp/assets/fonts/Days.ttf') format('truetype'),
    url('../themes/tmp/assets/fonts/Days.woff') format('woff'),
    url('../themes/tmp/assets/fonts/Days.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
html, body {margin: 0; padding: 0; font-family: 'Bahnschrift';}
body {font-size: 10px;}

ul, ol {margin: 0 0 15px 20px; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Days';}
h1, h2, h3, h4, h5, h6, p {margin: 0 0 15px; padding: 0;}

.main {display: flex; flex-direction: column; min-height: 100vh;}

body .mb_20 {margin-bottom: 20px;}
body .mb_25 {margin-bottom: 25px;}
body .mb_30 {margin-bottom: 30px;}

.red {color: #da0902;}

.pdb_45 {padding-bottom: 45px;}

.radius_10 {border-radius: 10px;}

header {padding: 0 0 15px; position: relative; z-index: 10;}

header ul,
header ol {margin: 0; padding: 0;}
header ul li {list-style: none;}

header a:link, header a:visited {color: #303030; text-decoration: none;}
header a:hover {color: #da0902;}

.logo { width: 100%; max-width: 160px;}
#logo {position: relative; min-height: 1px;}
#logo img, #logo {display: block;}
#logo img {position: absolute; left: 0; top: -20px; width: 100%; height: auto;}

#mobileSidebar {position: fixed; top: 0; left: 0; width: 100%; max-width: 420px; z-index: 100; background: #ffffff; bottom: 0; height: 100vh;
    transform: translateX(-100%);
    display: none;
    transition: transform 0.25s ease;
    font-size: 1.4rem;
    padding: 20px;
}

#mobileSidebarBtn {position: absolute; right: 10px; top: 10px; border: 0; padding: 0; margin: 0; background: none;}
#mobileSidebarBtn svg {display: block; width: 35px; height: 35px;}

.mobileSidebarNav ul {margin: 0; padding: 0;}
.mobileSidebarNav ul li {list-style: none; padding: 3px 0;}

#mobileNav {display: none;}
#mobileNav button {display: block; background: none; margin: 0; padding: 0; border: 0; margin-right: 20px;}
#mobileNav button svg {display: block; width: 35px; height: 35px;}
#mobileLogo {display: none;}
#mobileLogo img {height: 70px; width: auto; display: block;}

.headerTop {background: #363e46; color: #ffffff; padding: 3px 0; text-align: right;}
.headerTop .container {font-size: 1rem; }

.rates {display: flex; gap: 15px; justify-content: end;}

.headerGrid {display: flex;}

.headerInfo {flex-grow: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 15px;}
.headerContact {display: flex; align-items: center;}
.iconPhone {display: block; margin-right: 10px;}
.iconPhone svg {display: block; width: 25px; height: 25px; stroke: #c8120d; position: relative; top: -2px;}
.headerPhone {font-size: 1.6rem;color: #da0902;}
.headerPhone a:link, .headerPhone a:visited {color: #da0902;}
.headerNav ul {display: flex; flex-wrap: wrap; text-transform: uppercase; gap: 20px;}

.container {position: relative; max-width: 1100px; margin: 0 auto; font-size: 1.1rem; width: 100%;}
.container.text_center {text-align: center;}

.pageTitle h1,
.pageTitle h2 {font-size: 2rem; text-align: center; text-transform: uppercase; font-weight: normal;}

.topPage {height: 80px; background: url(../themes/tmp/assets/images/pageTop.jpg) no-repeat; background-size: cover; background-position: center -600px; opacity: 0.5;}

#china-row {background: url(../themes/tmp/assets/images/china-car-top.jpg) no-repeat; background-size: cover; background-position: center center; opacity: 0.5;}

#bnrWrap {background: #dddddd; overflow: hidden;}
.videoItem {height: 550px; position: relative;}
.videoItem video {height: auto; width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.videoItem:after {content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5)}
.videoItemTitle {position: absolute; left: 0; top: 50%; width: 100%; z-index: 2; transform: translateY(-50%); text-align: center; background: rgba(218,9,2,.8); padding: 12px; font-size: 2rem;}
.videoItemTitle h2,
.videoItemTitle h3 {margin: 0;padding: 0; color: #FFFFFF; font-weight: normal; text-transform: uppercase;}
.videoItemTitle h3 {font-size: 1.2rem;}

.pageContainers {display: grid; grid-template-columns: 100%; padding: 45px 0 0;}

.containerRow {padding: 45px 0 0;}
.textContainer h1,
.textContainer h2,
.textContainer h3,
.textContainer h4 {font-size: 2rem;}

.serviseItemText ul {
    margin: 0 0 0 20px; 
    font-size: .7rem; 
    padding-top: 10px;
}

.serviseWrap {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.serviseItem {
    background: #dddddd; 
    border-radius: 8px; 
    overflow: hidden; 
    position: relative;
}

.serviseItem a {display: flex; flex-direction: column; padding: 12px; height: 360px; justify-content: end; position: relative; z-index: 1;}
.serviseItem:before {content: ' '; display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; z-index: 0;
    background: rgb(54,62,70);
    background: linear-gradient(0deg, rgba(54,62,70,1) 0%, rgba(54,62,70,0.86) 27%, rgba(252,252,252,0) 100%);
}
.serviseItemTitle {
    margin: 0; 
    padding: 0; 
    font-size: 1.2rem; 
    font-weight: normal; 
    text-transform: uppercase;
}

.serviseItemTitle span {display: block;}
.serviseItem a:link, .serviseItem a:visited {color: #ffffff; text-decoration: none;}

.oc-text-red {
    color: #C72019;
}

.text-car-page {
    font-size: 1.2rem;
}

.china-car-row-1 {
    padding-bottom: 25px;
}

.china-car-row-2 {
    padding: 35px 0;
    background: #F7F7F7;
}

.china-car-row-3, .china-car-row-4 {
    padding: 35px 0;
}

.china-car-title {
    font-size: 1.8rem; 
    text-transform: uppercase; 
    margin: 0 0 25px; 
    padding: 0; 
    font-weight: normal;
    color: #374151;
    text-align: center;
}


.china-car-row-2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.china-car-row-2-grid-item {
    border-left: 10px solid #C72019;
}

.why-title {
    background: #C72019;
    color: #FFFFFF;
    padding: 10px 0;
    font-size: 1.1rem;
    margin: 0;
    font-weight: normal;
    border-radius: 0 10px 10px 0;
}

.why-description {
    padding: 10px 10px 0 10px;
    font-size: .9rem;
    margin: 0;
}

.works-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.works-item {
    padding: 15px;
    border: 1px solid #CACACA;
    border-radius: 12px;
    background: #F7F7F7;
}

.works-title {
    font-size: 1.1rem; 
    margin: 0 0 10px;
    text-align: center;
    color: #2B2B2C;
}

.works-description {
    font-size: .9rem; 
    margin: 0;
    text-align: center;
    color: #2B2B2C;
    
}

.advantages-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.advantages-title {
    font-size: 1.1rem; 
    margin: 0;
    text-align: center;
    color: #374151;
    font-weight: normal;
}

.advantages-item-icon {
    display: flex; 
    justify-content: center; 
    margin-bottom: 10px;
}

.advantages-item-icon img {
    display: block; 
    width: 80px; 
    height: auto; 
}

.china-car-order-row {
    background: #2F3B44;    
    border-radius: 20px;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    overflow: hidden;
}

.china-car-order-row p {
    margin: 0;
    padding: 0;
}

.china-car-order-info {
    padding: 25px;
}

.china-car-order-title {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.china-car-order-form-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin: 0 0 5px;
}

.china-car-order-form {
    background: #C72019;
    padding: 25px;
}

.china-car-order-form:hover {
    background: #A31615;
    cursor: pointer;
}


#modal {
    font-size: 1.2rem;
    width: 90%;
    max-width: 700px;
}


.modal-form label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.modal-form input[type="text"],
.modal-form input[type="tel"],
.modal-form input[type="email"] {
    width: 100%;
    padding: 8px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

.modal-form textarea {
    width: 100%;
    padding: 8px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

.modal-form label.modal-form-agree {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.9rem;
    gap: 6px;
    line-height: 1;
}

#form-res {
    font-size: 1rem;
}

.modal-form-agree a:link,
.modal-form-agree a:visited {
    color: #C72019;
    text-decoration: underline;
}

.modal-form-agree a:hover {
    text-decoration: none;
}

.modal-form-button {
    background-color: #C72019;
    color: #FFFFFF;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.modal-form-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
}


.cars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.car-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    border-top: 1px solid #CCCCCC;
    padding-top: 15px;
}

.car-item-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.car-item .f-carousel {
    --f-carousel-gap: 10px;
}

.car-item .f-carousel.has-dots {
    margin: 0;
}

.car-item .f-carousel__dots {
    position: absolute;
    top: 0;
    right: 0;
    justify-content: end;
    padding: 5px;
}

.car-item .f-carousel__dot {
    width: 10px;
    height: 10px;
}

.car-gallery-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.car-gallery-dots span {
    flex-grow: 1;
    height: 100%;
    display: block;
    cursor: pointer;
}

.car-item .f-carousel__dot:after {
    background: #ffffff;
}

.car-title {
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.car-longtitle {
    font-size: .8rem;
    margin: 0 0 8px;
    color: #555555;
}

.car-introtext {
    font-size: 1rem;
    margin: 0;
}

.car-order-row {
    padding-top: 12px;
}

.car-order {
    display: inline-block;
    background-color: #2F3B44;
    color: #FFFFFF;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}

.car-price {
    font-size: 1rem;
    margin-bottom: 10px;
}

.car-price span {
    font-weight: bold;
    font-size: 1.5rem;
    color: #C72019;
}

.car-order:hover {
    background-color: #1C262D;
}

.car-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.servisePage {display: flex;}

.servisePageContent {width: calc(100% - 280px); padding-right: 40px;}
.servisePageSidebar {width: 280px;}
.servisePageSidebarImage {border-radius: 10px; overflow: hidden; margin-bottom: 20px;}
.servisePageSidebarImage img {display: block; width: 100%; height: auto;}

.servisePageSidebarContactTitle {font-size: 1.2rem;}

.advantagesWrap {background: #c8120d; color: #ffffff; padding: 35px 0; border-radius: 8px; display: flex; flex-wrap: wrap; row-gap: 25px;
    background-image: url(../themes/tmp/assets/images/map.png?v=1);
    background-size: cover;
}
.advantageItem {width: calc(100% / 3); padding: 0 25px;}
.advantageItemTitle {font-size: 1.6rem; margin: 0; text-transform: uppercase; font-weight: normal;}

.clientSection {background: #363e46; color: #ffffff; padding: 35px 0 50px;}
.clientItem img {display: block; max-width: 100%; height: auto; border-radius: 4px;}
#clients .swiper-slide {width: auto;}

#map {height: 450px;}

.fancybox__content {width: 100%; max-width: 600px; font-size: 1.2rem;}

footer {margin-top: auto; background: #363e46; color: #ffffff; padding: 15px 0;}
footer a:link, footer a:visited {color: #ffffff; text-decoration: underline;}
footer a:hover {text-decoration: none;}

.footerNav hr {display: block; width: 100%; margin: 15px 0; padding: 0; border: 0; border-top: 1px solid #2e363e; border-bottom: 1px solid #444d57;}
.footerNav ul {margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px;}
.footerNav ul li {list-style: none;}

.footerBottom {display: flex; justify-content: space-between; font-size: .8rem;}
@media (max-width: 1250px) {
    .container {max-width: 1024px; padding-left: 10px; padding-right: 10px;}
}

@media (max-width: 1024px) {
    .container {max-width: 768px;}
    .serviseItem a {height: 306px;}
    .serviseItemTitle {font-size: 1.1rem;}
    .serviseItemText ul {font-size: .6rem; margin: 0;}
    .serviseItemText ul li {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; list-style: none;}

    .advantageItemTitle {font-size: 1.1rem;}
    .advantageItemText {font-size: .6rem;}
    #map {height: 250px;}

    .china-car-row-2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .works-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .china-car-order-form {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .cars {
        grid-template-columns: 1fr;;
    }

}

@media (max-width: 900px) {
    .serviseItemTitle {
        font-size: .9rem;
    }
    .serviseItem a {
        height: 250px;
    }
    .serviseWrap {
        gap: 5px;
    }
    .serviseItem a {
        padding: 8px;
    }
}

@media (max-width: 768px) {
    header {padding-top: 10px; padding-bottom: 10px;}
    .headerGrid {align-items: center;}
    .headerNav {display: none;}
    .logo {width: auto; max-width: none;}
    #logo {display: none;}
    #mobileLogo, #mobileNav {display: block;}
    .serviseItem a {height: 180px;}
    .serviseItemText {display: none;}
    .videoItem {height: 320px;}
    .videoItemTitle {font-size: 1.2rem;}
    .videoItemTitle h3 {font-size: .8rem;}
    #mobileSidebar {display: block;}

    body.mmobile {overflow: hidden;}
    .mmobile #mobileSidebar {transform: translateX(0);}

    .topPage {background-position: center; height: 40px;}
    .pageContainers {padding-left: 10px; padding-right: 10px; padding-bottom: 25px;}

}

@media (max-width: 767px) {
    .serviseWrap {flex-direction: column; align-items: center;}
    .serviseItem {width: 100%; max-width: 350px;}

    .serviseWrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 621px) {
    .advantageItem {width: calc(100% / 2)}
    .advantages-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .china-car-title {font-size: 1.4rem;}

    .china-car-order-row {
        grid-template-columns: 1fr;
    }

    .china-car-order-form {
        padding: 20px;
        text-align: center;
        border-radius: 20px;
    } 

    .china-car-order-info {
        padding: 0;
        margin-bottom: 15px;
    }

    .china-car-order-row {
        padding: 25px;
        
    }

}

@media (max-width: 464px) {
    .advantageItem {width: 100%;}
    .videoItem {height: 200px;}
    .videoItemTitle {font-size: .8rem;}
    .videoItemTitle h3 {font-size: .6rem;}
}

@media (max-width: 464px) {
    #mobileLogo img {height: 60px;}
    .headerPhone {font-size: 1.4rem;}

    .text-car-page h1 {
        font-size: 20px;
    }

    .text-car-page {
        font-size: 14px;
    }

    .china-car-title {
        font-size: 1.2rem;
    }

    .china-car-row-2-grid {
        gap: 8px;
    }

    .china-car-row-2-grid-item {
        border-left: 5px solid #C72019;
    }

    .why-title {
        font-size: .9rem;
        padding-right: 10px;
    }

    .why-description {
        font-size: .7rem;
    }

    .works-list, .advantages-list {
        display: flex;
        gap: 10px;
        overflow-x: auto;
    }

    .works-item, .advantages-item {
        width: 60%;
        flex: none;  
    } 

    .advantages-item {
        width: 45%;
    }

    .advantages-item-icon img {
        width: 60px;
    }

    .advantages-title {
        font-size: .9rem;
    }

    .china-car-order-title {
        font-size: 1.4rem;
        text-align: center;
    }

    .china-car-order-row p {
        font-size: .9rem;
        text-align: center;
    }

    .china-car-order-form-title {
        font-size: 1rem;
    }

    .china-car-order-form {
        padding: 15px;
    }

    .car-item {
        gap: 15px;
    }

    .car-title {
        font-size: .9rem;
    }

    .car-introtext {
        font-size: .7rem;
    }

    .car-order {
        font-size: .9rem;
        padding: 10px;
    }

}