@font-face {
    font-family: "TTBold";
    src: url("/static/fonts/TT_Hoves_Pro_Trial/TT\ Hoves\ Pro\ Trial\ Bold.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "TTDemiBold";
    src: url("/static/fonts/TT_Hoves_Pro_Trial/TT\ Hoves\ Pro\ Trial\ DemiBold.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "TTRegular";
    src: url("/static/fonts/TT_Hoves_Pro_Trial/TT\ Hoves\ Pro\ Trial\ Regular.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "TTMedium";
    src: url("/static/fonts/TT_Hoves_Pro_Trial/TT\ Hoves\ Pro\ Trial\ Medium.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "TTLight";
    src: url("/static/fonts/TT_Hoves_Pro_Trial/TT\ Hoves\ Pro\ Trial\ Light.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "FixelText";
    src: url(static/fonts/fixel/FixelDisplay/FixelDisplay-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}


body, html{
    font-family: 'TTRegular', sans-serif;
    height: auto;
    width: auto;
    margin: 0%;
    padding: 0%;
    font-size:calc(16*100vw/1920)
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.container{
    width: 100%;
    max-width: calc(1520/1920*100vw);
    margin: 0 auto;
    padding: 0;
}

section{
    padding: 0;
}

h1{
    font-family: "TTBold", sans-serif;
}

h2{
    font-family: "TTDemiBold", sans-serif;
}

h3{
    font-family: "TTMedium", sans-serif;
}

a:-webkit-any-link{
    text-decoration: none;
    color: unset;
}

.navbar{
    height: 4.17vw;
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    justify-content: space-between;
}


.container-1{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-links{
    width: 34%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.nav-links li{
    list-style: none;
    padding: 0;
}

.nav-links a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: 0.83vw;
    height: 4.17vw;
}

.btn, .btn-1{
    font-family: "TTRegular", sans-serif;
    font-weight: 400;
}

.active-nav{
    border-bottom: 3px solid #D6000E;
}

.logo{
    margin-left: 3.3vw;
    width: 8.9vw;
    height: auto;
}

.lang-nav{
    display: flex;
    align-items: center;
    gap: 1vw;
    font-size: 0.83vw;
}

.divider{
    border: none;
    border-right: 1px solid #002169;
    width: 0;
    height: 0.75vw;
    box-sizing: border-box;
}

.sponsor{
    text-decoration: none;
    color: #000;
    margin-left: 3.3vw;
    margin-right: 2vw;
    font-size: 0.8vw;
}

.socials{
    display: flex;
    flex-direction: row;
    gap: 1.7vw;
}

.socials img{
    height: 1.0417vw;
    width: auto;
}

.menu-icon{
    display: none;
}

.bottom-sponsor{
    display: none !important;
}

.divider-nav{
    display: none;        
}

.mobile-nav-links-bottom{
    display: none !important;
}

.hero-container{
    position: relative;
    background-image: url("/static/img/background-moon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    height: 125vh;
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
}

.hero-content{
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    color: #fff;
    padding: 6.3vw 10.4vw;
}

.hero-content h1{
    font-size: 5.208vw;
    margin: 0;
    font-weight: 700;
}

.hero-content h2{
    font-size: 2.50417vw;
    font-weight: 600;
    margin: 0.25vw;
}

.hero-content span, .hero-content p{
    font-size: 1.5vw;
    margin: 1.5vw;
    margin-bottom: 2.2vw;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'TTRegular', sans-serif;
    width: 12.5vw;
    height: 2.9vw;
    background: #fff;
    border: none;
    color: #000;
    text-align: center;
    padding:  0.5vw 1vw;
    font-size: 0.8vw;
    font-weight: 400;
    cursor: pointer;
    letter-spacing: 0.1vw;
}

.car-picture video{
    width: 45.72917vw;
    height: auto;
}

.container-nav{
    display: flex;
    flex-direction: column;
    gap: 2.3vw;
    left: 3.6vw;
    top: 15.7vw;
    position: absolute;
}

.car-navigation{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: sticky;
    top: 10%;
    z-index: 5000;
}

.car-nav-link{
    width: 100vh;
    max-width: calc(33px*100vw/1920px);
    transition: max-width 0.3s ease-in-out;
    border-bottom: 1px solid #000;
}

.active-car-link{
    max-width: calc(78px*100vw/1920px);
    border-bottom: 1px solid #000;
}

.car-container{
    position: sticky;
    top: 0;
    min-height: 56.25vw;
    z-index: 1;
}

.car-content{
    flex: 1;
    padding: 15.6vw 0vw;
    display: flex;
    flex-direction: row;
    gap: 6.6vw;
}

.car-picture{
    width: 45.73vw;
    height: auto;
}

.car-information{
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    margin: 2vw 0vw;
}

.car-information span{
    margin-top: 1.2vw;
    font-size: 1.25vw;
    line-height: 1.67vw;
}

.car-information p{
    margin: 0;
    font-size: 0.8vw;
    line-height: 1.35417vw;
}

.haval-logo{
    width: 12.45vw;
}

.haval-container{
    background-color: #F2ECEC;
}

.tank-container{
    background-color: #D8E1E1;
}

.tank{
    margin: 3.5vw 0vw;
}

.tank-logo{
    width: 4.323vw;
    height: auto;
}

.gwm-container{
    background-color: #DBEBFF;
}

.gwm-logo{
    width: 10.15625vw;
    height: auto;
}

.gwm{
    margin: 6vw 0vw;
}

.wey-container{
    background-color: #C2B5AC;
    position: relative;
}

.wey-logo{
    width: 4.896vw;
    height: auto;
}

.tabs {
    display: inline-flex;
    border: 0.07vw solid #000;
    overflow: hidden;
}

.tab {
    background: transparent;
    border: none;
    width: 13.5417vw;
    padding: 0.8vw 0vw;
    font-size: 0.8vw;
    cursor: pointer;
    color: #000;
}

.tab.active {
    background: #000;
    color: #fff;
    margin: 0.2vw;
}

.wey{
    margin: 0;
}

.navbar-bottom{
    height: 9.2vw;
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    justify-content: space-between;
    z-index: 50;
    border-bottom: 2px solid #E9E9E9;
}

.container-bottom{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-links-bottom{
    width: 34%;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.nav-links-bottom li{
    list-style: none;
    padding: 0;
}

.nav-links-bottom a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: 0.83vw;
    height: 9.2vw;
}

.trademark{
    font-weight: 300;
    position: relative;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vw 0vw 2vw 0vw;
    font-family: "TTLight", sans-serif;
    z-index: 50;
    font-size: 0.8vw;
}

/* About section */
.about-intro{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #F7F7F7;
    color: #000;
}
.about-intro video{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.history-about{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9.5vw 0vw 5.7vw;
    height: 130vh;
    background-image: url(/static/img/history-bg.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #051c48;
    color: #000;
}

.history-content{
    display: flex;
    flex-direction: row;
    gap: 3vw;
    max-width: 100%;
}

.history-content-left{
    display: flex;
    font-size: 1.25vw;
    line-height: 1.9vw;
    color: #fff;
    font-weight: 100;
}

.history-content-left span{
    width: 38.02083vw;
}

.history-content-right{
    font-size: 0.82vw;
    line-height: 1.35417vw;
    color: #fff;
    font-weight: 100;
}

.history-btn{
    margin-top: 3vw;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.vision-mission{
    display: flex;
    flex-direction: column;
    background-image: url(/static/img/cars-bg.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    color: #000;
    background-color: #45829E;
    height: 120vh;
}

.heading-vision-mission{
    display: flex;
    flex-direction: column;
    padding: 8.3vw 0vw 0vw 0vw;
    align-items: center;
    margin-bottom: auto;
    gap: 1.3vw;
}

.heading-vision-mission h3{
    font-family: "TTMedium", sans-serif;
    font-weight: 400;
    font-size: 2.1875vw;
    margin: 0;
    color: #fff;
}

.heading-vision-mission span{
    font-size: 1.2vw;
    color: #fff;
}

.vision-mission-nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2vw;
    padding: 0vw 0vw 3.5vw 0vw;
}

.vision-mission-nav-mobile{
    display: none;
}

.btn-1{
    color: #fff;
    background-color: transparent;
    padding: 0.75vw 0vw;
    font-size: 1.25vw;
    border: none;
}

.active-about{
    border-bottom: 1px solid #fff;
}

.higher-about-cards{
    display: flex;
    flex-direction: row;
}

.about-cards{
    display: flex;
    flex-direction: column;
    gap: 3.2vw;
}

.about-card{
    display: flex;
    flex-direction: column;
    padding: 10vw 6vw 5.4vw 10.4vw;
    gap: 2.1vw;
}

.about-card h3{
    font-family: "FixelText", sans-serif;
    font-size: 2.083vw;
    margin: 0;
}

.about-card p{
    font-family: "FixelText", sans-serif;
    margin: 0;
    font-size: 0.82vw;
    line-height: 1.3vw;
}

.about-points{
    margin-top: 2.7vw;
    display: flex;
    flex-direction: row;
    gap: 1.5vw;
}

.inner-market{
    margin-top: 2vw;
}

.about-point-card{
    display: flex;
    flex-direction: column;
    width: auto;
}

.bigger-point{
    font-family: "FixelText", sans-serif;
    font-size: 6.5vw !important;
    margin: 0;
}

.small-desc-point{
    font-family: "FixelText", sans-serif;
    font-size: 0.82vw !important;
}

.global-about{
    width: 65%;
}

.inner-market-cd{
    width: 32%;
}

.directions{
    font-size: 1.25vw !important;
}
.import-icon{
    width: 4.1667vw;
    height: auto;
    margin-bottom: 1.2vw;
}

.import-points{
    display: flex;
    flex-direction: row;
    gap: 3.5vw;
    margin-top: 0;
}

.import-point-card{
    width: 23%;
}

.card1-about{
    background-color: #F6F6F6;
}

.card2-about{
    background-color: #EDECEC;
    padding-bottom: 10vw;
}

.card3-about{
    background-color: #F6F6F6;
    padding-top: 8vw;
    padding-bottom: 9vw;
}

.sticky-red-video{
    background-color: #D6000E;
    padding: 7vw 10.4vw;
}

.sticky-red-video video{
    position: sticky;
    top: 10vw;
    width: 31.25vw;
    height: 27.60417vw;
    object-fit: cover;
}

.video-mobile-red-sticky{
    display: none;
}

.map{
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #7ABBD9, #9FD6E3);
    padding: 0vw 9vw; 
    height: 47.60417vw;
    position: relative;
    color: #fff;
}

.main-map-content{
    display: flex;
    flex-direction: row;
}

.map-1{
    width: 72.5%;
    height: auto;
    position: absolute;
    left: 3.8vw;
    bottom: 0.2vw;
    z-index: 1;
}

.map-2{
    position: absolute;
    width: 65%;
    height: auto;
    z-index: 2;
    left: 4.78vw;
    bottom: 6.58vw;
}

.main-map-content{
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.map h3{
    font-family: "TTMedium", sans-serif;
    font-weight: 300;
    font-size: 2.083svw;
    text-align: center;
    text-transform: uppercase;
    margin-top: 5.5vw;
}

.map-desc{
    margin-top: 3vw;
    display: flex;
    flex-direction: column;
    gap: 5vw;
    font-size: 1.0417vw;
    line-height: 1.4583vw;
    z-index: 2;
    width: 33%;
}

.map-title{
    width: 100%;
    margin-right: 1vw;
}

.markings{
    display: flex;
    flex-direction: column;
    gap:1vw;
    padding-left: 7.8vw;
    font-size: 0.82vw !important;
}

.marking{
    display: flex;
    flex-direction: row;
}

.marking span{
    width: 15.8vw;
}

.dot{
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 50%;
    margin-right: 1vw;
}

.white{
    border: 1px solid #000;
    background-color: #fff;
}

.blue{
    background-color: #2578B2;
    border: none;
}

.green{
    background-color: #3A7059;
    border: none;
}

.about-global-swiper{
    display: flex;
    flex-direction: column;
    padding: 5.5vw 0vw;
}

.heading-global-swiper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0vw 20.4vw 1.2vw;
    text-align: center;
}

.heading-global-swiper h3{
    font-family: "TTRegular", sans-serif;
    font-weight: 400;
    font-size: 2.083vw;
    margin: 0;
    margin-bottom: 1.7vw;
}

.heading-global-swiper span{
    width: 90%;
    font-size: 0.82vw;
    line-height: 1.35vw;
    margin-bottom: 1.8vw;
}

.tabs-1 {
    display: inline-flex;
    border: 0.07vw solid #000;
    overflow: hidden;
    margin-bottom: 2.3vw;
}
    
.tab-btn {
        background: transparent;
        border: none;
        width: 13vw;
        padding: 0.65vw 0vw;
        font-size: 0.72917vw;
        cursor: pointer;
        color: #000;
}
    
.tab-btn.active-3 {
        background: #000;
        color: #fff;
        margin: 0.2vw;
        font-weight: 100;
}

.swiper-container-outer {
    width: 100%;
}

.card6{
    width: 100%;
    height: auto;
}

.card6 img{
    width: 100%;
    height: auto;
}

.card6 span{
    color: rgba(0,0,0,1);
    font-weight: 100;
    display: flex;
    font-size: 1.0418vw;
    width: 100%;
    margin: 1.2vw 0vw;
}

.swiper-block {
    display: none;
    position: relative;
}
  
.swiper-block.active-3 {
    display: flex;
    flex-direction: column;
    position: relative
}


.mySwiper1, .mySwiper2{
    padding-left: 10vw;
    padding-right: 10vw;
}

.dealers{
    display: flex;
    flex-direction: row;
    height: 100%;
}

.dealer-card{
    width: 50%;
    background-color: #F7F7F7;
}


.dealer-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-half{
    margin: 0 auto;
    padding: 0 10.4vw 0 6.3vw;
}

.dealer-heading-m{
    display: none;
}

.dealer-heading{
    display: flex;
    flex-direction: column;
    font-family: "TTRegular", sans-serif;
    font-weight: 300;
    padding: 5vw 0vw 2.5vw;
    font-size: calc(40px*100vw/1920px);
    
}

.dealer-container{
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

.dealer-container ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    margin-top: 1.7vw;
}

.nos-point{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    font-size: 1.0417vw;
    position: relative;
    padding: 0vw 0vw 1.2vw;
    cursor: pointer;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}


.network-of-sale a{
    text-decoration: none;
    color: #000;
    font-weight: 300;
}

.nos-name{
    font-size: calc(24px*100vw/1920px);
}

.nos-status{
    width: calc(35*100vw/1920);
    height: calc(35*100vw/1920);
}

.nos-info{
    display: none;
    flex-direction: column;
    gap: 2vw;
    position: relative;
    padding-top: 1.5vw;
    
}

.nos-info.open{
    display: flex;
}

.nos-info-more{
    display: flex;
    flex-direction: column;
    gap: 1.15vw;
    font-size: 0.83vw;
    line-height: 1.35vw;
    color: #363F4C;
    font-weight: 400;
    margin-bottom: 1vw;
}

.nos-info-more span{
    font-size: calc(18px*100vw/1920px);
}

.nos-info-more p{
    padding-left: 1.5vw;
}

.nos-info-more p:first-child{
    padding-left: 0;
}

.timeline{
    background-image: url(/static/img/bg-timeline.svg);
    background-color: #DEF3F8;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 44vw;
}

.timeline-heading{
    font-size: calc(40px*100vw/1920px);
    font-weight: 400;
    text-transform: uppercase;
    color: #1D80A9;
    padding-top: 7vw;
    padding-left: 10.4vw;
}

.timeline-img{
    position: absolute;
    bottom: 4vw;
    left: 0.3vw;
    width: 96%;
    height: auto;
}

.timeline-m{
    display: none;
}

/* News section */
.head-news{
    border-top: 1px solid #D9D9D9;
    background-color: #F7F7F7;
}

.news-short-content{
    display: flex;
    flex-direction: row;
    gap: 3.2vw;
}

.news-car-picture video{
    width: 38.02083vw;
    height: 25.78125vw;
    object-fit: cover;
}

.news-short-information{
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    margin: 3.5vw 0vw;
}

.news-short-information span{
    font-size: 1.25vw;
    line-height: 1.7vw;
}

.news-short-information p{
    margin: 0;
    font-size: 0.82vw;
    line-height: 1.25vw;
    color: #696969;
}

.date-news{
    margin-top: 0.4vw !important;
    margin-bottom: 3.7vw !important;
}

.news-b{
    background-color: transparent;
    border: 1px solid #000;
    color: #000;
}

.news-cards{
    display: flex;
    flex-direction: column;
    padding: 5.2vw 0vw 5.7vw;
}

.grid-news-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);;
    gap: 4.7vw 1vw;
}

.news-card-n{
    display: flex;
    flex-direction: column;
}

.news-card-n video{
    width: 25.52vw;
    height: 17vw;
    object-fit: cover;
}

.news-card-n span{
    font-size: 1.18vw;
    line-height: 1.7vw;
    margin-top: 2.5vw;
}

.news-card-n p{
    margin: 0;
    color: #9F9FA0;
    margin-top: 1.5vw;
    font-size: 0.8vw;
}

.pagination-catalog{
    margin-top: 6.5vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2.2vw;
}

.page-numbers{
    display: flex;
    flex-direction: row;
    gap: 0.1vw;
}

.page-number{
    font-weight: 400;
    font-size: 0.8vw;
    color: #000;
    background-color: transparent;
    border: none;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.prev-page, .next-page{
    font-weight: 600;
    font-size: 1vw;
    border: 1px solid #000;
    border-radius: 50%;
    color: #000;
    background-color: transparent;
    width: 2.318vw;
    height: 2.318vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.prev-page img, .next-page img{
    width: auto;
    height: 0.85vw;
}

.prev-page img{
    transform: translateX(-0.1vw);
}

.next-page img{
    transform: translateX(0.1vw);
}

.news-bottom{
    background-color: #f7f7f7;
}

/* News-inside section */
.mobile-news-inside-hero{
    display: none;
}
.hero-news-inside{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.2vw 23.8vw;
    background-color: #F7F7F7;
    color: #000;
}

.container-news-inside{
    width: 100%;
    max-width: calc(1004/1920*100vw);
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.hero-news-inside-head{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}

.text-with-divider-h{
    font-size: 0.82vw;
    font-weight: 200;
    display: flex;
    gap: 0.5vw;
    color: #9F9FA0;
}

.heading-hero-news{
    font-family: "FixelText", sans-serif;
    font-size: 2.1875vw;
    margin: 0;
    margin-bottom: 1.2vw;
    margin-top: 0.5vw;
    line-height: 3.02083vw;
    width: 90%;
}

.date-share-news-inside{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 1.7vw 0vw;
    justify-content: space-between;
    border-top: 1px solid #D9D9D9;
    color: #9F9FA0;
}

.date-news-inside{
    font-size: 0.83vw;
    margin: 0;
}

.share{
    display: flex;
    flex-direction: row;
    gap: 2vw;
    font-size: 0.8vw;
}

.social-icons{
    display: flex;
    flex-direction: row;
    gap: 1.8vw;
}

.social-icons img{
    width: auto;
    height: 0.9375vw;
}

.hero-news-inside-content{
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.hero-news-inside-content span{
    font-size: 1.2vw;
    line-height: 1.5;
    margin: 0;
    margin-top: 3vw;
}

.hero-news-inside-content img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.article{
    display: flex;
    flex-direction: column;
    gap: 3vw;
    padding: 5vw 0vw;
}


.article span{
    line-height: 1.35417vw;
    font-size: 0.8vw;
}

.big-picture{
    width: 100%;
    height: auto;
}

.news-article-slider{
    padding-left: 23.7vw;
    padding-right: 23.7vw;
}


.news-slider{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1vw;
    margin-bottom: 1.5vw;
    padding: 0vw 23.7vw 0vw 23.7vw;
}

.swiper-slide img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.swiper-container-outer-2{
    width: 100%;
}
.news-inside-pic-slider{
    position: relative;
    height: auto;
}

.mobile-desc-card{
    display: none !important;
}

.pagination-mobile{
    display: none !important;
}

.pagination-about-mobile-1 , .pagination-about-mobile-2{
    display: none;
}

.swiper-pagination-bullet-active{
    background-color: rgba(0, 0, 0, 1) !important;
    gap: 2.2vw;
    margin-top: 3vw;
}

.swiper-pagination-bullet{
    background-color: rgba(0, 0, 0, 0.5);
    gap: 2.2vw;
    margin-top: 3vw;
}

.image-information{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.6vw;
    color:#696969;
}

.image-information img{
    width: 1.0417vw;
    height: 1.0417vw;
    margin-right: 1vw;
}

.slider-buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
}

.news-inside-btn{
    width: 2.60417vw;
    height: 2.60417vw;
}

.news-inside-btn img{
    width: auto;
    height: 0.94375vw;
}

.article p{
    margin-top: 2vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    border-left: 2px solid #000;
    padding-left: 2.5vw;
    margin-bottom: 1vw;
    font-family: "TTMedium", sans-serif;
    font-size: 1.25vw;
    line-height: 1.875vw;
}


.quote{
    display: flex;
    flex-direction: column;
    border: 1px solid #D6000E;
    padding: 3vw 5.7vw; 
}

.dots{
    width: 2.45052083vw;
    height: auto;
    margin-bottom: 3vw;
}

.quote-1{
    border: none !important;
    font-size: 1.25vw;
    line-height: 1.875vw;
    margin-bottom: 2.5vw;
    padding: 0 !important;
    margin-top: 0 !important;
}

.author{
    display: flex;
    flex-direction: row;
}

.author img{
    width: 5.2083vw;
    height: 5.2083vw;
}

.author-info{
    margin-left: 1.2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.name{
    font-size: 1.25vw;
}

.occupation{
    margin-top: 0.2vw;
    font-size: 0.82vw;
}

.list-article{
    display: flex;
    flex-direction: column;
}

.list-article span{
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    margin: 0;
}

.list-component-news{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2vw;
    margin-top: 1.2vw;
}

.list-component-news li{
    position: relative;
    padding-left: 1.5vw;
    margin-bottom: 0.8vw;
    font-size: calc(16px*100vw/1920px);
}

.list-component-news li::before{
    content: "";
    position: absolute;
    top: 0.1vw;
    left: 0;
    width: 0.25vw;
    height: 0.25vw;
    background-color: #E1251B;
}

.news-inside-video{
    position: relative;
    margin-top: 0.1vw;
    margin-bottom: 1vw;
}

.news-inside-video video{
    width: 100%;
    height: auto;
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.5vw;
    height: 3.5vw;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ordered-list-article{
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

.ordered-list-article span{
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    margin: 0;
    
}

.o-list-component-news{
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
    list-style: none;
    counter-reset: my-counter;

}

.o-list-component-news li{
    font-size: calc(16px*100vw/1920px);
    display: flex;
    flex-direction: row;
    counter-increment: my-counter;
    position: relative;
    margin-bottom: 0.8vw;
    padding-left: 2vw;
}

.o-list-component-news li::before{
    content: counter(my-counter);
    position: absolute;
    font-size: 0.8vw;
    left: 0vw;
    top: -0.1vw;
    width: 1.3vw;
    height: 1.3vw;
    border: 1px solid #000;
    background-color: transparent;
    font-weight: 100;
    color:#000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-ni{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0vw 10.42vw 5vw;
}

.news-ni-mobile{
    display: none;
}

.news-header-ni{
    font-family: "FixelText", sans-serif;
    font-size: 2.1875vw;
    color: #000;
}

.news-header-ni h1{
    margin: 0;
}

.swiper-container-outer-1 {
    width: 100%;
    margin-top: 2.2vw;
}

.news-card{
    width: 100%;
    height: auto;
}

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

.news-card span{
    color: rgba(0,0,0,0.6);
    font-weight: 100;
    display: flex;
    font-size: 0.82vw;
    width: 100%;
}

.news-card-info{
    color: #000 !important;
    font-size: 1.25vw !important;
    line-height: 1.7vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

/* Contacts section */

.contacts-cards{
    display: flex;
    flex-direction: row;
}

.contact-card{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 7vw 10.4vw 8vw;
}

.haval-contact-card{
    background-color: #F2ECEC;
}

.tank-contact-card{
    background-color: #D8E1E1;
}

.suv-contacts{
    width: 100%;
    height: 12.1875vw;
    object-fit: cover;
}

.haval-logo-c{
    width: 12.448vw;
    height: auto;
    margin-top: 3.2vw;
}

.tank-logo-c{
    width: 4.32vw;
    height: 5.46875vw;
    margin-top: 1.6vw;
    margin-bottom: 3vw;
}

.contact-button{
    position: absolute;
    bottom: 3vw;
    right: 2.1vw;
    width: 4.17vw;
    height: 4.17vw;
    border: 1px solid #000;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.contact-short-description{
    margin-top: auto;
    margin-bottom: 1.5vw;
    font-size: 1.25vw;
    line-height: 1.7vw;
}

.dealers{
    font-size: 0.82vw;
}

.contact-button img{
    width: 1.69vw;
    height: 1.69vw;
}

/* Mobile Menu */

.mobile-menu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #F8FAFB;
    padding-top: 7.5vw;
    padding-bottom: 0;
    flex-direction: column;
    z-index: 5500;
    overflow-y: auto;
}

.head-of-mobile-menu{
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 0vw 5vw;
}

.socials-lang{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0vw 5vw;
    gap: 22vw;
    margin-top: 4vw;
    margin-bottom: 4vw;
    margin-right: auto;
}

.mobile-menu-lang-nav{
    display: flex !important;
    align-items: center;
    gap: 3vw;
    font-size: calc(16px*100vw/480px);
    color: #000;
}

.divider-mobile{
    border: none;
    border-right: 1px solid #000;
    width: 0;
    box-sizing: border-box;
    height: 4vw;
}



.container-m{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 2vw;
    padding-bottom: 10vw;
    gap: 5vw;
    height: 100%;
}

.nav-links-m{
    display: flex;
    flex-direction: column;
    /* gap: 3.5vw; */
    padding: 0;
    margin: 0;
}

.navigation-m{
    background-color: transparent;
    display: flex;
    flex-direction: column;
    z-index: 6000;
    text-transform: uppercase;
}

.navigation-m ul{
    list-style: none;
    padding: 0;
}

.dropdown-point{
    position: relative;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #000;
    font-weight: 800;
    font-size: 3.3vw;
    gap: 0.32vw;
    height: 14.04vw;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


.close-mobile-menu{
    width: 3.19vw;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}
.close-mobile-menu img{
    width: 3.19vw;
    height: auto;
}



.nav-name-m{
    position: relative;
    font-size: 3.3vw;
    font-weight: 400;
    color: #000;
    margin: 0vw 5vw;
    text-transform: uppercase;
}

.mobile-menu.open{
    display: flex;
}


.dropdown-menu-m {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #F8FAFB;
}

.dropdown-menu-m ul{
    display: flex;
    flex-direction: column;
    gap: 7vw;
    padding: 0;
    margin: 0;
    padding: 7vw 12vw;
}

.dropdown-menu-m a{
    text-decoration: none;
    color: #000;
    font-weight: 800;
    font-size: 3vw;
}

  
.dropdown-m.open .dropdown-menu-m {
    opacity: 1;
}

.dropdown-m.navigation-m.open {
    background-color: #F5F7FA;
}


.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

.gray-bottom{
    background-color: #F7F7F7;
}

@media (max-width: 1000px){
    body, html{
        font-size:calc(10/480*100vw);
    }

    .container{
        max-width: 100%;
        padding: 4.5vw 2rem;
    }

    .logo{
        width: calc(122px*100vw/480px);
        height: auto;
        margin: 0;
    }

    .nav-links, .sponsor, .socials, .lang-nav, .bottom-logo, .bottom-contacts{
        display: none !important;
    }

    .menu-icon{
        display: block;
        width: calc(30px*100vw/480px);
        height: auto;
        cursor: pointer;
    }

    .bottom-socials{
        display: flex !important;
        flex-direction: row;
        gap: 4vw;
    }

    .mobile-menu-socials{
        gap: 7vw;
    }

    .container-bottom{
        flex-direction: column-reverse;
        align-items: center;
        gap: 6vw;
    }

    .instagram{
        width: calc(20px*100vw/480px) !important;
        height: calc(20px*100vw/480px) !important;
    }

    .facebook{
        width: calc(10px*100vw/480px) !important;
        height: calc(20px*100vw/480px) !important;
    }

    .navbar-bottom, .nav-links-bottom a{
        height: auto;
        border-bottom: none;
    }

    .mobile-nav-links-bottom{
        display: flex !important;
        width: 100%;
        gap: 2vw;
        width: auto;
        text-transform: none;
    }

    .mobile-nav-links-bottom a{
        font-size: calc(12px*100vw/480px);
        padding: 0;
    }

    .bottom-sponsor{
        display: block !important;
    }

    .nav-links-bottom{
        display: none;
    }

    .divider-nav{
        display: block;
        border-left: 1px solid #002169;
        height: calc(12px*100vw/480px);
        width: 0;
        box-sizing: border-box;
    }

    .trademark{
        font-size: calc(12px*100vw/480px);
    }

    /* MP section */
    .hero-container{
        padding: 0;
        height: calc(701px*100vw/480px);
        position: relative;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .hero-content{
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: center;
        color: #fff;
        padding: 6.3vw 10.4vw;
    }

    .hero-content h1{
        font-size: calc(60px*100vw/480px);
        margin: 0;
        font-weight: 700;
    }

    .hero-content h2{
        font-size: calc(22px*100vw/480px);
        text-align: center;
    }

    .hero-content span, .hero-content span{
        font-size: calc(14px*100vw/480px);
        margin: 1.5vw;
        margin-bottom: 5vw;
    }

    .btn{
        width: calc(240px*100vw/480px);
        height: calc(55px*100vw/480px);
        font-size: calc(14px*100vw/480px);
        letter-spacing: 0.1vw;
    }

    .container-nav{
        display: none;
    }

    .car-picture video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .car-container{
        position: relative;
        height: auto;
        min-height: 100%;
        z-index: 1;
    }

    .car-content{
        flex: 1;
        padding: 12.5vw 0vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6.6vw;
    }

    .car-picture{
        width: 100%;
        height: calc(222px*100vw/480px);
        margin: 0;
        padding: 0;
    }

    .car-information{
        display: flex;
        flex-direction: column;
        text-align: center;
        height: auto;
        align-items: center;
        gap: 5vw;
    }

    .car-information span{
        font-size: calc(22px*100vw/480px);
        line-height: calc(28px*100vw/480px);
    }

    .car-information p{
        margin: 0;
        font-size: calc(16px*100vw/480px);
        line-height: calc(26px*100vw/480px);
    }

    .haval-logo{
        width: calc(159px*100vw/480px);
    }

    .tank{
        margin: 3.5vw 0vw;
    }

    .tank-logo{
        width: calc(67px*100vw/480px);
        height: auto;
    }

    .gwm-container{
        background-color: #DBEBFF;
    }

    .gwm-logo{
        width: calc(155px*100vw/480px);
        height: auto;
    }

    .gwm{
        margin: 6vw 0vw;
    }

    .wey-container{
        background-color: #C2B5AC;
        position: relative;
    }

    .wey-logo{
        width: calc(74px*100vw/480px);
        height: auto;
    }

    .tabs {
        display: inline-flex;
        border: 0.07vw solid #000;
        overflow: hidden;
        width: 98%;
    }

    .tab {
        background: transparent;
        border: none;
        width: calc(192px*100vw/480px);
        padding: 2vw 0vw;
        font-size: calc(14px*100vw/480px);
        cursor: pointer;
        color: #000;
    }

    .tab.active {
        background: #000;
        color: #fff;
        margin: 0.5vw;
    }

    .wey{
        margin: 0;
    }

    /* About section */

    .history-about{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 9.5vw 0vw 5.7vw;
        height: calc(865px*100vw/480px);
        background-image: url(/static/img/history-bg.png);
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #051c48;
        color: #000;
    }

    .history-content{
        display: flex;
        flex-direction: column;
        gap: 3vw;
        max-width: 100%;
    }

    .history-content-left{
        display: flex;
        font-size: calc(14px*100vw/480px);
        line-height: calc(22px*100vw/480px);
        color: #fff;
        font-weight: 100;
    }

    .history-content-left span{
        width: 100%;
    }

    .history-content-right{
        font-size: calc(14px*100vw/480px);
        line-height: calc(22px*100vw/480px);
        color: #fff;
        font-weight: 100;
    }

    .history-btn{
        width: 100%;
        margin-top: 3vw;
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
    }

    .vision-mission{
        display: flex;
        flex-direction: column;
        background-image: url(/static/img/cars-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        color: #000;
        background-color: #45829E;
        height: calc(370px*100vw/480px);
    }

    .heading-vision-mission{
        display: flex;
        flex-direction: column;
        padding: 8.3vw 7vw 0vw 7vw;
        align-items: center;
        margin-bottom: auto;
        gap: 1.3vw;
    }

    .heading-vision-mission h3{
        font-family: "TTMedium", sans-serif;
        font-weight: 400;
        font-size: calc(22px*100vw/480px);
        line-height: calc(28px*100vw/480px);
        text-align: center;
        margin: 0;
        color: #fff;
    }

    .heading-vision-mission span{
        font-size: calc(14px*100vw/480px);
        line-height: calc(22px*100vw/480px);
        text-align: center;
        color: #fff;
    }

    .vision-mission-nav{
        display: none;
    }

    .vision-mission-nav-mobile{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 4vw;
    }

    .vm-btn-m{
        background-color: rgba(255, 255, 255, 0.5) !important;
        width: calc(7px*100vw/480px);
        height: calc(7px*100vw/480px);
        border-radius: 50%;
        background-color: transparent;
    }

    .active-about-m{
        background-color: #fff !important;
    }

    .higher-about-cards{
        display: flex;
        flex-direction: row;
    }

    .about-cards{
        display: flex;
        flex-direction: column;
        gap: 3.2vw;
    }

    .about-card{
        display: flex;
        flex-direction: column;
        padding: 10vw 5.4vw 10.4vw;
        gap: 3vw;
    }

    .about-card h3{
        font-family: "FixelText", sans-serif;
        font-size: calc(22px*100vw/480px);
    }

    .about-card p{
        font-family: "FixelText", sans-serif;
        margin: 0;
        font-size: calc(14px * 100vw / 480px);
        line-height: calc(22px * 100vw / 480px);
    }

    .about-points{
        margin-top: 2.7vw;
        display: flex;
        flex-direction: row;
        gap: 1.5vw;
    }

    .inner-market{
        justify-content: space-between;
        margin-top: 2vw;
    }

    .about-point-card{
        display: flex;
        flex-direction: column;
        width: auto;
    }

    .bigger-point{
        font-family: "FixelText", sans-serif;
        font-size: calc(70px * 100vw / 480px) !important;
        margin: 0;
    }

    .small-desc-point{
        font-family: "FixelText", sans-serif;
        font-size: calc(14px * 100vw / 480px) !important;
    }

    .global-about{
        width: 65%;
    }

    .inner-market-cd{
        width: 40%;
    }

    .directions{
        font-size: calc(18px*100vw/480px) !important;
    }
    .import-icon{
        width: calc(45px * 100vw / 480px);
        height: calc(45px * 100vw / 480px);
        margin-bottom: 1.2vw;
    }

    .import-points{
        display: flex;
        flex-direction: row;
        gap: 3.5vw;
        margin-top: 0;
    }


    .import-point-card{
        width: 100% !important;
    }

    .card1-about{
        background-color: #F6F6F6;
    }

    .card2-about{
        background-color: #EDECEC;
        padding-bottom: 10vw;
    }

    .card3-about{
        background-color: #F6F6F6;
        padding-top: 8vw;
        padding-bottom: 9vw;
    }

    .video-mobile-red-sticky{
        display: block !important;
    }

    .video-mobile-red-sticky video{
        width: 100%;
        height: calc(353px * 100vw / 480px);
        display: block;
        object-fit: cover;
    }

    .sticky-red-video{
        display: none;
    }

    .map{
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #7ABBD9, #9FD6E3) !important;
        padding: calc(55px * 100vw / 480px) 7vw; 
        height: auto;
        color: #fff;
    }

    .main-map-content{
        display: flex;
        flex-direction: row;
    }

    .map-1{
        width: 100%;
        height: auto;
        position: relative;
        display: block;
        z-index: 1;
    }

    .map-2{
        position: absolute;
        width: 65%;
        height: auto;
        z-index: 2;
        left: 17.2vw;
        top: 27vw;
    }

    .main-map-content{
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .map h3{
        font-family: "TTMedium", sans-serif;
        font-weight: 300;
        font-size: calc(22px*100vw/480px);
        text-align: center;
        text-transform: uppercase;
        margin: 0;
    }

    .map-desc{
        margin-top: 3vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;
        font-size: calc(14px * 100vw / 480px);
        line-height: calc(18px * 100vw / 480px);
        z-index: 2;
        width: 100%;
    }

    .map-title{
        width: 100%;
        margin-right: 1vw;
    }

    .markings{
        display: flex;
        flex-direction: column;
        gap:3vw;
        font-size: calc(14px * 100vw / 480px) !important;
        padding: 0;
    }

    .marking{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .marking span{
        width: 100%;
    }

    .dot{
        width: calc(24px * 100vw / 480px);
        height: calc(24px * 100vw / 480px);
        border-radius: 50%;
        margin-right: 5vw;
    }

    .white{
        border: 1px solid #000;
        background-color: #fff;
    }

    .blue{
        background-color: #2578B2;
        border: none;
    }

    .green{
        background-color: #3A7059;
        border: none;
    }

    .about-global-swiper{
        display: flex;
        flex-direction: column;
        height: 135vw;
        padding: 5.5vw 0vw;
    }

    .heading-global-swiper{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 0vw 7vw 1.2vw;
        text-align: center;
    }

    .heading-global-swiper h3{
        font-family: "TTRegular", sans-serif;
        font-weight: 400;
        font-size: calc(22px * 100vw/480px);
        line-height: calc(22px * 100vw/480px);
        margin: 0;
        margin-bottom: 1.7vw;
    }

    .heading-global-swiper span{
        width: 100%;
        font-size: calc(14px * 100vw / 480px);
        line-height: calc(22px * 100vw/480px);
        margin-bottom: 1.8vw;
    }

    .tabs-1 {
        display: inline-flex;
        border: 0.07vw solid #000;
        overflow: hidden;
        margin-bottom: 2.3vw;
    }
        
    .tab-btn {
            background: transparent;
            border: none;
            width: calc(192px * 100vw / 480px);
            padding: 2vw 0vw;
            font-size: calc(14px * 100vw / 480px);
            cursor: pointer;
            color: #000;
    }

    .tab-btn.active-3 {
        background: #000;
        color: #fff;
        margin: 0.5vw;
        font-weight: 100;
    }
        

    .swiper-container-outer {
        width: 100%;
    }

    .card6{
        width: 100%;
        height: auto;
    }

    .card6 img{
        display: block;
        width: 100%;
        height: auto;
    }

    .card6 span{
        color: rgba(0,0,0,1);
        font-weight: 100;
        display: flex;
        font-size: calc(16px * 100vw / 480px);
        width: 100%;
        margin: 1.2vw 0vw;
    }

    .swiper-block {
        display: none;
        position: relative;
    }
    
    .swiper-block.active-3 {
        display: flex;
        flex-direction: column;
        position: relative;
    }


    .pagination-about-mobile-1, .pagination-about-mobile-2{
        position: relative;
        display: flex !important;
        justify-content: center;
        margin-top: 6vw;
        gap: 3vw;
    }



    .mySwiper1, .mySwiper2{
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .dealers{
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #F7F7F7;
        padding: 0vw 0vw 7vw;
        height: 100%;
    }

    .contact-card .dealers {
        background: transparent;
    }

    .dealer-card{
        width: 100%;
        background-color: #F7F7F7;
    }

    .dealer-left{
        width: 100%;
        height: calc(417px*100vw/480px);
        overflow: hidden;
        padding: 7vw 7vw;
    }


    .dealer-left img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .container-half{
        margin: 0 auto;
        padding: 0 10.4vw 0 6.3vw;
    }

    .dealer-heading-m{
        display: flex;
        flex-direction: column;
        font-family: "TTRegular", sans-serif;
        text-align: center;
        font-weight: 300;
        padding: 7vw 0vw 0vw;
        font-size: calc(22px*100vw/480px);
    }

    .dealer-heading{
        display: none;
        
    }

    .dealer-container{
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
    }

    .dealer-container ul{
        list-style: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 3vw;
        margin-top: 1.7vw;
    }

    .nos-point{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        font-size: 1.0417vw;
        position: relative;
        padding: 0vw 0vw 3vw;
        cursor: pointer;
    }


    .network-of-sale a{
        text-decoration: none;
        color: #000;
        font-weight: 300;
    }

    .nos-name{
        font-size: calc(22px*100vw/480px);
    }

    .nos-status{
        width: calc(25px*100vw/480px);
        height: calc(25px*100vw/480px);
    }

    .nos-info{
        display: none;
        flex-direction: column;
        gap: 2vw;
        position: relative;
        padding-top: 1.5vw;
    }

    .nos-info.open{
        display: flex;
    }

    .nos-info-more{
        display: flex;
        flex-direction: column;
        gap: 1.15vw;
        font-size: calc(14px * 100vw / 480px);
        line-height: calc(22px * 100vw / 480px);
        color: #363F4C;
        font-weight: 400;
        margin-bottom: 1vw;
    }

    .nos-info-more span{
        font-size: calc(18px*100vw/480px);
    }

    .nos-info-more-points{
        display: flex;
        flex-direction: column;
        gap: 1.2vw;
        padding-left: 1.5vw;
    }

    .timeline{
        background-image: none;
        width: 100%;
        height: auto;
        background: linear-gradient(180deg, #8BC3D2, #4280B9);
    }

    .timeline-m{
        display: block;
        
    }

    .timeline-heading{
        position: relative;
        font-size: calc(22px*100vw/480px);
        font-weight: 400;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        padding: 5vw 7vw;
        background-color: #8BC3D2;
        z-index: 5;
    }

    .timeline-img{
        display: none;
        position: absolute;
        bottom: 4vw;
        left: 0.3vw;
        width: 96%;
        height: auto;
    }

    .timeline-m {
        position: relative;
        width: 80%;
        margin: 0 auto;
        z-index: 3;
        }

    .timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 2px;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        transform: translateX(-50%);
    }

    .timeline-item {
        position: relative;
        width: 50%;
        box-sizing: border-box;
    }

    .timeline-item::before {
        content: "";
        position: absolute;
        top: 35px;
        width: calc(13px * 100vw / 480px);
        height: calc(13px * 100vw / 480px);
        background: radial-gradient(circle, #1D80A9 0%, #fff);
        border: 2px solid #fff;
        border-radius: 50%;
        z-index: 2;
    }

    .timeline-item:nth-child(even) {
        left: 0;
        text-align: right;
    }
    .timeline-item:nth-child(even)::before {
        right: calc((-8px) * 100vw / 480px);
    }

    .timeline-item:nth-child(odd) {
        left: 50%;
    }
    .timeline-item:nth-child(odd)::before {
        left: calc((-8px) * 100vw / 480px);
    }

    .timeline-content {
        background: transparent;
        border: none;
        padding: calc(30px * 100vw / 480px) calc(20px * 100vw / 480px) 0;
        border-radius: 10px;
    }

    .timeline-content h3 {
        font-family: "FixelText", sans-serif;
        margin: 0;
        color: #fff;
        font-size: calc(22px * 100vw / 480px);
        font-weight: 600;
    }

    .timeline-content p {
        font-family: "FixelText", sans-serif;
        color: #fff;
        font-size: calc(12px * 100vw / 480px);
        line-height: calc(14px * 100vw / 480px);
        margin-top: 5px;
    }

    .timeline-1990{
        padding-bottom: 5vw;
    }

    .dull-background{
        background-color: #4280B9;
        width: 100%;
        height: 15vw;
    }

    /* News section */

    .news-short-content{
        display: flex;
        flex-direction: column;
        gap: 3.2vw;
    }

    .news-car-picture video{
        width: 100%;
        height: calc(271px*100vw/480px);
        object-fit: cover;
        display: block;
    }

    .news-short-information{
        display: flex;
        flex-direction: column;
        gap: 1.2vw;
        margin: 3.5vw 0vw;
    }

    .news-short-information span{
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
    }

    .news-short-information p{
        margin: 0;
        font-size: calc(14px*100vw/480px);
        line-height: calc(22px*100vw/480px);
        color: #696969;
    }

    .date-news{
        margin-top: 0.4vw !important;
        margin-bottom: 3.7vw !important;
    }

    .news-b{
        width: 100%;
        background-color: transparent;
        border: 1px solid #000;
        color: #000;
    }

    .news-cards{
        display: flex;
        flex-direction: column;
    }

    .grid-news-cards{
        display: grid;
        grid-template-columns: repeat(1, 1fr);;
        gap: 4.7vw 1vw;
    }

    .news-card-n{
        display: flex;
        flex-direction: column;
    }

    .news-card-n video{
        width: 100%;
        height: auto;
    }

    .news-card-n span{
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
        margin-top: 5vw;
    }

    .news-card-n p{
        margin: 0;
        color: #9F9FA0;
        margin-top: 5vw;
        font-size: calc(14px*100vw/480px);
    }
    .pagination-catalog{
        margin-top: 6.5vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15vw;
    }

    .page-numbers{
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 3vw;
    }

    .page-number{
        font-weight: 400;
        font-size: calc(14px*100vw/480px);
        color: #000;
        background-color: transparent;
        border: none;
        width: 1.5vw;
        height: 1.5vw;
        padding: 0;
        text-decoration: underline;
    }

    .more{
        text-decoration: none;
    }

    .prev-page, .next-page{
        font-weight: 600;
        font-size: 1vw;
        border: 1px solid #000;
        border-radius: 50%;
        color: #000;
        background-color: transparent;
        width: calc(44.2px*100vw/480px);
        height: calc(45px*100vw/480px);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .prev-page img, .next-page img{
        width: auto;
        height: calc(16.07px*100vw/480px);
    }

    .prev-page img{
        transform: translateX(-0.1vw);
    }

    .next-page img{
        transform: translateX(0.1vw);
    }

    .news-bottom{
        background-color: #f7f7f7;
    }

    /* News-inside section */

    .mobile-news-inside-hero{
        display: block;
        width: 100%;
        height: calc(250px*100vw/480px);
        object-fit: cover;
    }

    .desktop-news-inside-hero{
        display: none;
    }

    .hero-news-inside{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0vw;
        background-color: #F7F7F7;
        color: #000;
    }

    .hero-news-inside-head{
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
    }

    .text-with-divider-h{
        display: none;
    }

    .hero-news-description{
        display: flex;
        flex-direction: column;
        font-size: calc(14px*100vw/480px);
        padding: 7vw 7vw;
        margin: 0;
    }

    .heading-hero-news{
        font-family: "FixelText", sans-serif;
        font-size: calc(22px*100vw/480px);
        margin-bottom: 3vw;
        line-height: calc(28px*100vw/480px);
        width: 100%;
    }

    .date-share-news-inside{
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 3vw 0vw;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #D9D9D9;
        color: #9F9FA0;
    }

    .date-share-news-inside span{
        font-size: calc(14px*100vw/480px);
        text-align: center;
    }

    .date-news-inside{
        margin: 0;
    }

    .share span{
        display: none;
    }

    .social-icons{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5vw;
    }

    .facebook{
        width: calc(8.47px*100vw/480px);
        height: auto;
    }

    .twitter{
        width: calc(16.95px*100vw/480px) !important;
        height: auto !important;
    }

    .vk{
        width: calc(20.71px*100vw/480px) !important;
        height: auto !important;
    }


    .hero-news-inside-content span{
        font-size: calc(16px*100vw/480px);
        line-height: calc(28px*100vw/480px);
        margin: 0;
        margin-top: 3vw;
    }

    .hero-news-inside-content img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .article{
        display: flex;
        flex-direction: column;
        gap: 3vw;
        padding: 5vw 0vw;
        
    }

    .container-news-inside{
        width: 100%;
        max-width: calc(400px*100vw/480px);
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2vw;
        overflow: visible;
    }

    .news-article-slider{
        padding-left: 10vw;
        padding-right: 10vw;
    }


    .article span{
        line-height: calc(22px*100vw/480px);
        font-size: calc(14px*100vw/480px);
    }

    .mobile-desc-card{
        display: block !important;
        margin-top: 2vw;
    }

    .pagination-mobile{
        position: absolute;
        display: flex !important;
        justify-content: center;
        margin-top: 4vw;
        margin-bottom: 6vw;
        gap: 3vw;
    }

    .big-picture{
        width: 100%;
        height: auto;
        display: block;
    }

    .image-information{
        margin-top: 2vw;
        display: flex;
        flex-direction: row;
        align-items: start;
        font-size: 0.6vw;
        color:#696969;
        padding-left: 10vw;
    }

    .image-information img{
        width: calc(14px*100vw/480px);
        height: calc(14px*100vw/480px);
        margin-top: 1vw;
        margin-right: 1vw;
    }

    .slider-buttons{
        display: none;
    }

    .news-inside-pic-slider{
        height: 75vw;
    }
    .article p{
        margin-top: 2vw;
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
        border-left: 2px solid #000;
        padding-left: 2.5vw;
        margin-bottom: 1vw;
        font-family: "TTMedium", sans-serif;
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
    }


    .quote{
        display: flex;
        flex-direction: column;
        border: 1px solid #D6000E;
        padding: calc(80px*100vw/480px) calc(40px*100vw/480px) calc(50px*100vw/480px); 
    }

    .dots{
        width: calc(32px*100vw/480px);
        height: auto;
        margin-bottom: 3vw;
    }

    .quote-1{
        border: none;
        margin-bottom: calc(31px*100vw/480px) !important;
    }

    .author{
        display: flex;
        flex-direction: row;
    }

    .author img{
        width: calc(60px*100vw/480px);
        height: calc(60px*100vw/480px);
    }

    .author-info{
        margin-left: 1.2vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .name{
        font-size: 1.25vw;
    }

    .occupation{
        margin-top: 0.2vw;
        font-size: 0.82vw;
    }

    .list-article{
        display: flex;
        flex-direction: column;
    }

    .list-article span{
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
        font-weight: 500;
        margin: 0;
    }

    .list-component-news{
        list-style: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 5vw;
        margin-top: 3vw;
    }

    .list-component-news li{
        position: relative;
        font-size: calc(14px*100vw/480px);
        padding-left: 3vw;
        margin-bottom: 0.8vw;
    }

    .list-component-news li::before{
        content: "";
        position: absolute;
        top: 1vw;
        left: 0;
        width: calc(4px*100vw/480px);
        height: calc(4px*100vw/480px);
        background-color: #E1251B;
    }

    .news-inside-video{
        position: relative;
        margin-top: 0.1vw;
        margin-bottom: 1vw;
    }

    .news-inside-video video{
        display: block;
        width: 100%;
        height: auto;
    }

    .play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 3.5vw;
        height: 3.5vw;
        object-fit: contain;
        opacity: 1;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .ordered-list-article{
        display: flex;
        flex-direction: column;
        gap: 0.8vw;
    }

    .ordered-list-article span{
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
        margin: 0;
    }

    .o-list-component-news{
        display: flex;
        flex-direction: column;
        gap: 5vw;
        list-style: none;
        counter-reset: my-counter;
        margin-top: 3vw;

    }

    .o-list-component-news li{
        font-size: calc(14px*100vw/480px);
        display: flex;
        flex-direction: row;
        counter-increment: my-counter;
        position: relative;
        margin-bottom: 0.8vw;
        padding-left: 8vw;
    }

    .o-list-component-news li::before{
        content: counter(my-counter);
        position: absolute;
        font-size: calc(14px*100vw/480px);
        left: 0vw;
        top: -0.1vw;
        width: calc(25px*100vw/480px);
        height: calc(25px*100vw/480px);
        border: 1px solid #000;
        background-color: transparent;
        font-weight: 100;
        color:#000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .news-ni{
        display: none;
    }

    .news-ni-mobile{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0vw 5vw 5vw;
    }

    .news-card-mobile{
        width: 100%;
        height: auto;
    }

    .news-img img{
        display: block;
        width: 100%;
        height: auto;
    }

    .news-card-mobile span{
        color: rgba(0,0,0,0.6);
        font-weight: 100;
        display: flex;
        font-size: 0.82vw;
        width: 100%;
    }

    .news-card-info{
        color: #000 !important;
        font-size: 1.25vw !important;
        line-height: 1.7vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
    }

    .news-ni-mobile{
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 0vw 7vw 7vw;
    }

    .news-header-ni{
        justify-content: start;
        font-family: "FixelText", sans-serif;
        font-size: calc(22px*100vw/480px);
        color: #000;
        margin-bottom: 8vw;
    }

    .news-header-ni span{
        width: 100%;
    }

    .news-img{
        margin-bottom: 5vw;
    }

    .news-card-mobile{
        width: 100%;
        height: auto;
        border-top: 1px solid #E4E4E4;
        margin: 5vw 0vw;
    }

    .news-card-mobile span{
        font-size: calc(14px*100vw/480px);
    }

    .news-card-info{
        font-size: calc(18px*100vw/480px) !important;
        line-height: calc(26px*100vw/480px);
    }

    /* Contacts section */
    .contacts-cards{
        flex-direction: column;
    }

    .contact-card{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 7vw 10.4vw 20vw;
    }

    .haval-contact-card{
        background-color: #F2ECEC;
    }

    .tank-contact-card{
        background-color: #D8E1E1;
    }

    .suv-contacts{
        height: calc(170px*100vw/480px);
        object-fit: cover;
    }

    .haval-logo-c{
        width: calc(159px*100vw/480px);
        height: auto;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    .tank-logo-c{
        width: calc(67px*100vw/480px);
        height: calc(85px*100vw/480px);
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    .contact-button{
        position: absolute;
        bottom: 3vw;
        right: 2.1vw;
        width: calc(40px*100vw/480px);
        height: calc(40px*100vw/480px);
        border: 1px solid #000;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .contact-short-description{
        margin-top: auto;
        margin-bottom: 5vw;
        font-size: calc(18px*100vw/480px);
        line-height: calc(26px*100vw/480px);
        text-align: center;
    }

    .dealers{
        font-size: calc(16px*100vw/480px);
    }

    .contact-button img{
        width: calc(16.25px*100vw/480px);
        height: calc(16.25px*100vw/480px);
    }
}