@font-face {
    font-family: "HyndaiSans-Medium";
    src: url("../fonts/font/HyundaiSansHead-Medium.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: HyndaiSans-Regular;
    src: url("../fonts/font/HyundaiSansText-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Museo-500";
    src: url("../fonts/font/Museo-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Museo";
    src: url("../fonts/font/Museo-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Museo";
    src: url("../fonts/font/Museo-300.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Museo";
    src: url("../fonts/font/Museo-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

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

body, html{
    font-family: HyndaiSans-Regular, sans-serif;
    /* background-color: #fff; */
    margin: 0%;
    padding: 0%;
    font-size:calc(10/1920*100vw);
    overflow-x: hidden;
}

section{
    width: 100%;
    max-width: 152rem;
    margin: 0 auto;
    padding: 0;
    z-index: 1;
    position: relative;
}

span, p, li{
    font-size: 1.6rem;
    line-height: 2.6rem;
    list-style-position: inside;
}

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

button{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-weight: 500;
}

[lang="kk"] body, html[lang="kk"] {
  font-family: "Museo", sans-serif !important;
  /* font-weight: 500; */
}

[lang="kk"] body button, [lang="kk"] body .btn-1, [lang="kk"] .btn, [lang="kk"] select, [lang="kk"] form, [lang="kk"] .input-field {
    font-family: "Museo", sans-serif !important;
}

/* Header & Footer styles */

header{
    position: fixed;
    width: 100%;
    background-color: #fff;
    padding: 0;
    z-index: 3000;
}

img {
    max-width: 100%;
    object-fit: contain;
}



.header-top{
    width: 100%;
    padding: 1.7rem 20rem;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E8E8E8;
}

.company-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.4rem;
}

.phone_number, .location{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.phone_number img, .location img{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}

.bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.bg-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 154rem;
    width: 100%;
    padding: 0 2rem;
    margin: 0 auto;
}

.container-sm {
    max-width: 100rem;
    padding: 0 2rem;
    margin: 0 auto;
    width: 100%;
}

.phone_number span, .location span{
    color: #666666;
    font-size: 1.4rem;
}

.service-links{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
    margin-left: 5rem;
}

.service-link-unity{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    cursor: pointer;

}

.divider-sl{
    width: 0;
    height: 1.4rem;
    border-left: 1px solid #666666;
}

.service-link-unity img{
    width: 1.5rem;
    height: 1.5rem;
}

.service-link-unity a{
    color: #666666;
    text-decoration: none;
    font-size: 1.4rem;
}

.socials-lang{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.567rem;
}

.social-links{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    margin-left: 3rem;
}

.instagram{
    width: 1.467rem;
    height: 1.468rem;
    cursor: pointer;
}

.facebook{
    width: 0.667rem;
    height: 1.277rem;
    cursor: pointer;
}

.youtube{
    width: 1.867rem;
    height: 1.346rem;
    cursor: pointer;
}

.lang-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
}

.lang-nav a{
    text-decoration: none;
    font-size: 1.4rem;
    color: #666666;
    cursor: pointer;
}

.divider{
    width: 0;
    height: 1.4rem;
    border-left: 1px solid #666666;
}


.pt-0 {
    padding-top: 0px !important;
  }
  
  .pt-1 {
    padding-top: 1rem;
  }
  
  .pt-2 {
    padding-top: 2rem;
  }
  
  .pt-3 {
    padding-top: 3rem;
  }
  
  .pt-4 {
    padding-top: 4rem;
  }
  
  .pt-5 {
    padding-top: 5rem;
  }
  
  .pt-6 {
    padding-top: 6rem;
  }
  
  .pt-7 {
    padding-top: 7rem;
  }
  
  .pt-8 {
    padding-top: 8rem;
  }
  
  .pt-9 {
    padding-top: 9rem;
  }
  
  .pt-10 {
    padding-top: 10rem;
  }
  
  .pb-0 {
    padding-bottom: 0px !important;
  }
  
  .pb-1 {
    padding-bottom: 1rem;
  }
  
  .pb-2 {
    padding-bottom: 2rem;
  }
  
  .pb-3 {
    padding-bottom: 3rem;
  }
  
  .pb-4 {
    padding-bottom: 4rem;
  }
  
  .pb-5 {
    padding-bottom: 5rem;
  }
  
  .pb-6 {
    padding-bottom: 6rem;
  }
  
  .pb-7 {
    padding-bottom: 7rem;
  }
  
  .pb-8 {
    padding-bottom: 8rem;
  }
  
  .pb-9 {
    padding-bottom: 9rem;
  }
  
  .pb-10 {
    padding-bottom: 10rem;
  }
  
  .pb-14 {
    padding-bottom: 14rem;
  }
  
  .mt-auto {
    margin-top: auto;
  }
  
  .mt-0 {
    margin-top: 0px;
  }
  
  .mt-1 {
    margin-top: 1rem;
  }
  
  .mt-2 {
    margin-top: 2rem;
  }
  
  .mt-3 {
    margin-top: 3rem;
  }
  
  .mt-4 {
    margin-top: 4rem;
  }
  
  .mt-5 {
    margin-top: 5rem;
  }
  
  .mt-6 {
    margin-top: 6rem;
  }
  
  .mt-7 {
    margin-top: 7rem;
  }
  
  .mt-8 {
    margin-top: 8rem;
  }
  
  .mt-9 {
    margin-top: 9rem;
  }
  
  .mt-10 {
    margin-top: 10rem;
  }

  .relative {
    position: relative;
  }
  
  .mb-0 {
    margin-bottom: 0px !important;
  }
  
  .mb-1 {
    margin-bottom: 1rem;
  }
  
  .mb-2 {
    margin-bottom: 2rem;
  }
  
  .mb-3 {
    margin-bottom: 3rem;
  }
  
  .mb-4 {
    margin-bottom: 4rem;
  }
  
  .mb-5 {
    margin-bottom: 5rem;
  }
  
  .mb-6 {
    margin-bottom: 6rem;
  }
  
  .mb-7 {
    margin-bottom: 7rem;
  }
  
  .mb-8 {
    margin-bottom: 8rem;
  }
  
  .mb-9 {
    margin-bottom: 9rem;
  }
  
  .mb-10 {
    margin-bottom: 10rem;
  }
  
  .ml-auto {
    margin-left: auto;
  }
  
  .ml-1 {
    margin-left: 1rem;
  }
  
  .ml-2 {
    margin-left: 2rem;
  }
  
  .ml-3 {
    margin-left: 3rem;
  }
  
  .ml-4 {
    margin-left: 4rem;
  }
  
  .ml-5 {
    margin-left: 5rem;
  }
  
  .ml-6 {
    margin-left: 6rem;
  }
  
  .ml-7 {
    margin-left: 7rem;
  }
  
  .ml-8 {
    margin-left: 8rem;
  }
  
  .ml-9 {
    margin-left: 9rem;
  }
  
  .ml-10 {
    margin-left: 10rem;
  }
  
  .mr-auto {
    margin-right: auto;
  }
  
  .w-100 {
    width: 100%;
  }


  .title-sm {
    font-size: 3.6rem;
    line-height: 1;
  }

  .text-center {
    text-align: center;
  }
  
.page-warranty {
    background: #f3f3f3;
  }
  

.header-bottom{
    width: 100%;
    margin: 0 auto;
    padding: 3.055rem 20rem;
    position: relative;
}

.navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logos{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.345rem;
}

.hyndai-logo{
    width: 16.323rem;
    height: 2.245rem;
}

.astana-motors-logo{
    width: 17.216rem;
    height: 1.347rem;
}

.logo-d{
    height: 2.245rem;
}

.navigation-dropdowns{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5rem;
}

.dropdown-point{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.dropdown-point a{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.dropdown-link{
    text-decoration: none;
    color: #666666;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
}
.model-menu {
    /* max-width: 192rem; */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #F8FAFB;
    display: none;
    flex-direction: column;
    z-index: 3500;
    padding: 4.1rem 20rem 9.2rem 20rem;
}

.models-trucks-mp{
    margin: 0 auto;
    padding: 8rem 0 12rem 0;
    position: relative;
}

.head-tabs-button-dropdown{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: auto;
    margin-bottom: 4.5rem;
}


.view-all-btn-dropdown{
    position: relative !important;
    padding: 2rem 3.5rem;
    font-size: 1.6rem;
    color: #003B70;
    border: 2px solid #003B70;
    background-color: transparent;
    border-radius: 30px 30px 30px 0;
    right: 0;
    top: 0 !important;
    cursor: pointer;
}

.head-tabs-dropdown{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.head-tabs h2{
    font-size: 3.6rem;
}

.tabs-btn-group-dropdown{
    position: relative;
    display: flex;
    gap: 3rem;
    overflow: hidden;
    top: 0 !important;
}
    
.tab-btn-dropdown {
    color: #666666;
    border: none;
    background: transparent;
    width: auto;
    padding: 1rem 0rem;
    font-size: 1.6rem;
    cursor: pointer;
}
    
.tab-btn-dropdown.active-4 {
    border-bottom: 2px solid #009DC5;
    color: #000;
    margin: 0.2vw;
    font-weight: 100;
}

.grid-models-dropdown {
    display: none;
    position: relative;
}

.grid-models-dropdown.active-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7rem 13.2rem;
    position: relative
}

.truck-model-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.7rem;
    cursor: pointer;
}

.desc-model{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.desc-model h3{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 2.8rem;
    color: #000;
}

.desc-model span{
    color: #666666;
}

.more-details-link{
    font-family: HyndaiSans-Regular, sans-serif;
    font-size: 1.4rem;
    color: #333333;
    text-decoration: underline !important;
    margin-top: 1.3rem;
}

.porter{
    width: 21rem !important;
    height: auto !important;
}

.porter-1{
    width: 23.91rem !important;
    height: auto !important;
}

.porter-bus{
    width: 25.1rem !important;
    height: auto !important;
}

.dropdown.open ~ .nav-outer-container {
    display: block;
}

.dropdown.open .model-menu{
    display: flex;
}

.dropdown-close{
    position: absolute;
    width: 2.35rem !important;
    top: 6rem;
    right: 3.85rem;
    background: none;
    border: none;
    cursor: pointer;
}

.close{
    width: 2.35rem !important;
    height: 2.35rem !important;
}

.dropdown.open .dropdown-arrow{
    transform: rotate(180deg);
}

.nav-outer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    opacity: 0;
}

.nav-outer-container.active {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

.dropdown-point img{
    width: 0.9rem;
    height: 0.5rem;
}

.burger-menu img{
    width: 3rem;
    height: 1.6rem;
}

.burger-menu {
    display: none;
}

footer{
    width: 100%;
    background-color: #1F1E21;
    position: relative;
}

.footer-top{
    width: 100%;
    max-width: 152rem;
    margin: 0 auto;
    padding: 5.6rem 0;
    display: flex;
    flex-direction: row;
    gap: 4.8rem;
    /* justify-content: space-between; */
    align-items: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.logo-bottom-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.653rem;
}

.hyndai-white-logo{
    width: 14.283rem;
    height: 1.965rem;
}

.astana-motors-white-logo{
    width: 18.02rem;
    height: 1.41rem;
}

.content-1{
    width: 38.4rem;
    display: flex;
    flex-direction: column;
    gap: 2.268rem;
}

.content-1 span{
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.footer-top a {
    color: inherit;
}

.footer-links {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 0.1rem;
}

.social-links-bottoms{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
    margin-top: 7.111rem;
}

.dropdown-footer li{
    list-style: none;
    margin-bottom: 1.2rem;
}

.content-2, .content-3, .content-4, .content-5, .content-6{
    width: 17rem;
}

li p{
    display: inline;
}

.container-news-inside img {
    height: auto;
}

.footer-top .footer-title{
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.9rem;
    margin-bottom: 0;
    line-height: 1;
}

.footer-bottom{
    width: 100%;
    max-width: 152rem;
    margin: 0 auto;
    padding: 5.5rem 0 3.2rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.copyright{
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 1);
}

.service-links-bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.8rem;
    margin-left: 11rem;
}

.service-link-bottom{
    text-decoration: none;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 1);
}

.company-info-bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.9rem;
}

.phone_number-bottom, .location-bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.phone_number-bottom img, .location-bottom img{
    width: 1.5rem;
    height: 1.5rem;
}

.phone_number-bottom span, .location-bottom span{
    color: rgba(255, 255, 255, 1);
    font-size: 1.4rem;
}

/* MP page styles */
.hero-swiper {
    margin-top: 13.867rem;
    width: 100%;
    height: 55rem;
    position: relative;
}

.text-page {
    margin-top: 13.867rem;
    padding-bottom: 6rem;
}

.breadcrumbs a {
    color: inherit;
}

.text h1 {
    font-size: 3.2rem;
    margin-bottom: 3rem;
}

.text h4 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.text p {
    margin-bottom: 2rem;
}

.text li {
    margin-bottom: 2rem;
}

h4 span {
    font-size: inherit;
}

h1 span {
    font-size: inherit;
}

.swiper-wrapper {
  height: 100%;
}

.swiper-slide {
  width: 100%;
  flex-shrink: 0;
  z-index: 1;
}

.swiper-wrapper {
  display: flex;
  flex-direction: row;
}

.swiper-slide {
    position: relative !important;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-btn {
    position: absolute;
    border-radius: 50%;
    background-color: #fff !important;
    border: none;
    color: #003B70 !important;
    width: 6rem;
    height: 6rem;
    top: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2;
}

.prev-page {
  left: 5.7rem;
}

.next-page {
  right: 5.7rem;
}

.hero-pagination {
    display: flex;
    justify-content: center;
    transform: translateY(-7rem);
    bottom: -2rem !important;
    z-index: 3;
}

.hero-pagination .swiper-pagination-bullet {
    width: 0.5rem !important;
    height: 0.5rem !important;
    background: rgba(255, 255, 255, 1) !important;
    margin: 0 0.6rem !important;
    border-radius: 50% !important;
}

.hero-pagination .swiper-pagination-bullet-active {
    width: 5.5rem !important;
    background: #fff !important;
    border-radius: 0.15rem !important;
}

.hero-content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 8.8rem 20rem;
    justify-content: flex-end;
    height: 100%;
}

.hero-content h1 {
  font-size: 6rem;
  margin: 0;
  padding: 0;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 2.0rem;
  margin: 0;
  padding: 0;
  margin-bottom: 2.8rem;
}

.hero-content h2 {
  font-size: 4rem;
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
}

.btn-group-1 {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn{
    background-color: #fff;
    color: #000;
    border: none;
    padding: 1.5rem 5.1rem;
    font-size: 1.6rem;
    cursor: pointer;
    text-align: center;
    width: 23.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "HyndaiSans-Medium";
}

.alt{
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.hero-content .disclaimer-banner {
    margin-top: 7.9rem;
    color: #fff;
    
}

.hero-content .disclaimer-banner p {
    margin-bottom: 0;
}

.models-trucks-mp{
    margin: 0 auto;
    padding: 8rem 0 12rem 0;
    position: relative;
}

.head-tabs-button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.btn-1{
    position: absolute;
    padding: 2rem 3.5rem;
    font-size: 1.6rem;
    color: #003B70;
    border: 2px solid #003B70;
    background-color: transparent;
    border-radius: 3rem 3rem 3rem 0;
    right: 0;
    top: 7.5rem;
    cursor: pointer;
    font-family: "HyndaiSans-Medium";
}

.head-tabs{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 8.8rem;
}

.head-tabs h2{
    font-size: 3.6rem;
}

.tabs-btn-group-mp {
    display: inline-flex;
    gap: 3rem;
    overflow: hidden;
}
    
.tabbtn {
    color: #666666;
    border: none;
    background: transparent;
    width: auto;
    padding: 1rem 0rem;
    font-size: 1.6rem;
    cursor: pointer;
}
    
.tabbtn.active-3 {
    border-bottom: 2px solid #009DC5;
    color: #000;
    margin: 0.2vw;
    font-weight: 100;
}

.gridmodels {
    display: none;
    position: relative;
}
  
.gridmodels.active-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7rem 13.225rem;
    position: relative
}

.truck-model-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.7rem;
    cursor: pointer;
}

.desc-model{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.desc-model h3{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 2.8rem;
    color: #000;
}

.desc-model span{
    color: #666666;
}


.porter-mp{
    width: 21rem;
    height: auto;
}

.porter-1-mp{
    width: 23.91rem;
    height: auto;
}

.porter-bus-mp{
    width: 25.6rem;
    height: auto;
}

.grid-sections-mp{
    position: relative;
    max-width: none;
    height: 224.5rem;
    background-image: url(../img/dealer-bg.jpg);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    background-color: #fff;
}

.grid-sections-mp::before{
    content: "";
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,1),
        rgba(255,255,255,0)
    );
}

.grid-section-service{
    position: relative;
    max-width: 152rem;
    margin: 0 auto;
    padding: 4.6rem 0;
}

.grid-section{
    display: grid;
    grid-template-columns: repeat(2, 2fr);
}

.card-service-mp{
    width: 100%;
    height: 60rem;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    padding: 0 4.8rem;
    color: #fff;
}

.card-desc{
    max-width: 49.7rem;
    margin: auto auto 7.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    font-size: 1.6rem;
}

.leasing-desc-mp{
    display: flex;
    z-index: 1;
}

.card-desc h3{
    font-size: 2.8rem;
    font-family: "HyndaiSans-Medium", sans-serif;
    text-align: center;
}

.card-desc p{
    text-align: center;
    margin-top: 0.5rem;
}

.service-btn-mp{
    margin-top: 2.7rem;
    width: 23.8rem;
    max-width: 20.5rem;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.service-btn-mp-alt{
    margin-top: 2.7rem;
    width: 23.8rem;
    max-width: 20.5rem;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    background-color: #fff;
    border: none;
    color: #000;
    cursor: pointer;
    text-align: center;
}

.card-service-1{
    background-image: url(../img/blue-truck.jpg);
}
.card-service-2{
    background-image: url(../img/buses.jpg);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #000;
}

.card-service-3{
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.service-video-mp{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.card-service-4{
    background-image: url(../img/wheel.jpg);
}

.dealers{
    width: 100%;
    max-width: 152rem;
    margin: 0 auto;
    padding: 8rem 0 12rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.8rem;
}

.dealers h3{
    color: #fff;
    font-size: 3.6rem;
    margin: 0;
    padding: 0;
}

.dealers p{
    color: #fff;
    margin: 0;
    padding: 0;
}

.btn-group-dealers{
    display: flex;
    gap: 1rem;
}

.news .swiper-pagination {
    display: none;
    position: relative !important;
    margin-top: 1.5vw;
    text-align: center;
}

.news .swiper-pagination-bullet {
  width: 0.3125vw;
  height: 0.3125vw;
  background-color: #000;
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0 0.4vw;
}

.news .swiper-pagination-bullet-active {
  width: 1.75vw;
  border-radius: 0.26vw;
  background-color: #000;
}
.news{
    display: block;
    flex-direction: column;
    align-items: center;
    background-color: #E8E8E8;
    max-width: none;
    padding: 9.2rem 20rem;
}

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

.news-header h1{
    color: #000;
    font-size: 2.1vw;
    margin: 0;
}

.more-news-mp{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 1.6rem;
    color: #003B70;
    text-decoration: underline;
    margin-left: auto;
}

.news-header button{
    margin-left: auto;
}

.news-cards{
    margin-top: 1.7vw;
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

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

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

.news-content{
    margin-top: 2.7rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    height: 17rem;
}
.news-card h2{
    font-size: 2rem;
    line-height: 2.8rem;
    color: #333333;
    font-weight: 600;
}
.news-card span{
    color: #666666;
    font-weight: 400;
    display: flex;
    font-size: 1.4rem;
    line-height: 2rem;
}

.date-news-mp{
    display: flex;
    margin-top: auto;
}

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

/* Hero-nav-service & Nav-service */
.hero-nav-service{
    display: flex;
    margin-top: 13.5rem;
    max-width: none;
    height: 50rem;
}

.hero-nav-service:has(.bg-wrapper)::after {
    content: '';
    z-index: 0;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .25);
    z-index: -1;
}

.nav-service {
    position: relative;
    z-index: 3;
}

.nav-service{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.text-with-divider-h{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.text-with-divider-h span{
    color: #fff;
}

.nav-service h1{
    color: #fff;
    font-size: 6rem;
    margin: 0;
    padding: 0;
}

.sub-hero-service-overview-bg{
    background-color: rgba(243, 243, 243, 1);
}

/* Service_1 page styles */
.hero-nav-service_1{
    height: 70rem;
    background-image: url(../img/hero-nav-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.sub-hero-service_1-bg{
    background-color: #F3F3F3;
}

.subhero-content{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 10.8rem;
    padding: 8.6rem 0 10.5rem;
}

.subhero-content h2{
    font-size: 3.6rem;
    margin: 0;
    padding: 0;
}

.subhero-subcontent{
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 130%;
}

.subhero-subcontent span{
    line-height: 2.6rem;
    color: #333333;
}

.service-content{
    display: flex;
    flex-direction: column;
    gap: 12rem;
    padding: 12rem 0;
}

.service-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15.1rem;
}

.service-card:nth-child(even) {
    flex-direction: row-reverse;
}

.service-card img {
    width: 74.7rem;
    height: auto;
}

.service-card-text{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 62.2rem;
}

.service-card-text h3{
    font-size: 3.6rem;
    margin: 0;
    padding: 0;
}

.service-card-text p{
    line-height: 2.6rem;
    color: #333333;
}

.service-card-btn{
    padding: 1.7rem 7rem;
    border: 1px solid #333333;
    width: fit-content;
    font-family: HyndaiSans-Regular, sans-serif;
}

/* Service_2 page styles */
.hero-nav-service_2{
    background-image: url(../img/servicen1-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


.sub-hero-service_2-bg{
    background-color: #F3F3F3;
}

.service-2-hero-img{
    width: 100%;
    height: auto;
}

.list-point-service_2{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.8rem;
    padding: 8rem 0 12rem 0;
}

.point-item-service_2{
    width: 100%;
    max-width: 126.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.point-header-service_2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    padding: 2.7rem 4.6rem;
    cursor: pointer;
}

.point-title-service_2{
    font-size: 1.6rem;
    color: #333333;
}

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

.guarantee-arrow{
    margin-left: 6.1rem;
}

.guarantee{
    font-size: 1.6rem;
    color: #333333;
}

.dropdown-arrow-dark{
    width: 1.4rem;
    height: 0.9rem;
}

.point-content-service_2{
    display: none;
    flex-direction: column;
    gap: 2vw;
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding: 4.013rem 10.9rem;
}

.point-content-service_2 span{
    line-height: 2.6rem;
    color: #333333;
}
.point-content-service_2.open{
    display: flex;
}

.list-run{
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
}

.list-run h3{
    font-family: HyndaiSans-Regular, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: #666666;
}

.run-items{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-left: 2.4rem;
}

.run-items li{
    position: relative;
    font-size: 1.6rem;
    color: #333333;
}

.run-items li::before{
    content: "";
    position: absolute;
    top: 0.8rem;
    left: -2rem;
    font-size: 2rem;
    width: 0.4rem;
    height: 0.4rem;
    background-color: #00AAD2;
    border-radius: 50%;
}

.head-tabs-s2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 8.8rem;
}

.point-item-service_2.open .dropdown-arrow-dark {
    transform: rotate(180deg);
}

.guarantee-warranty-bg{
    background-color: #F3F3F3;
}
.guarantee-warranty{
    padding: 8.5rem 0 10.5rem 0;
}

.tabs-btn-group-service_2{
    display: flex;
    flex-direction: row;
}

.s2-tabbtn {
    width: 38rem;
    color: #666666;
    background: transparent;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 3.2rem;
    border-bottom: 3px solid #D9D9D9;
}

.s2-tabbtn.active-2 {
    border-bottom: 3px solid #009DC5;
    color: #009DC5;
}

.tab-icon{
    width: 4.8rem;
    height: 4.8rem;
    filter: brightness(0) opacity(0.6);
    transition: fill 0.3s ease;
}



.s2-tabbtn.active-2 .tab-icon{
    filter: brightness(1) opacity(1);
}
.guarantee-warranty .points-items-service{
    display: none;
}
.guarantee-warranty .points-items-service.active-2{
    display: block;
}
.block{
    padding-top: 0;
}

.manual-book-bg{
    position: relative;
    background-image: url(../img/manual-book-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.manual-book-bg::before{
    content: "";
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 55rem;
    background: linear-gradient(
        to bottom,
        rgba(243,243,243,1),
        rgba(243,243,243,0)
    );
}

.manual-book{
    
    width: 126.4rem;
}

.manual-book-content{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 55.7rem 0;
    gap: 5.155rem;
    z-index: 10;
}

.manual-book-title{
    font-size: 1.6rem;
    color: #000;
    line-height: 2.6rem;
    text-align: center;
}

.manual-book-btn{
    display: flex;
    flex-direction: row;
    padding: 1.8rem 4.9rem;
    width: 34rem;
    background-color: transparent;
    border: 1px solid #333333
}

.manual-book-btn a{
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    font-size: 1.6rem;
    text-decoration: none;
    color: #333333;
    text-wrap: nowrap;
}

/* Service_3 section */
.hero-nav-service_3{
    background-image: url(../img/service-stuff.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.subhero-description-service_3{
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7.6rem 45.7rem;
}

.sub-hero-desc{
    text-align: center;
    width: 100%;
    line-height: 2.6rem;
    color: #333333;
}

.service_3-calculator-bg{
    background-color: #F3F3F3;
}

.service_3-calculator{
    max-width: none;
    display: flex;
    z-index: 2;
    flex-direction: row;
}

.calculator-service-bg{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: #F3F3F3;
    max-width: 109.8rem;
}

.calculator-service {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
}

.calculator-service{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 10.6rem 0 9.6rem;
}



.calculator-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.calculator-h1{
    font-size: 4rem;
}

.remove-all{
    line-height: 2.8rem;
    color: #888888;
    text-decoration: underline;
}

.grid-calculator{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 2rem;
}
.model-cto,
.class-cto,
.city-cto,
.dealer-cto{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cto-head{
    font-family: HyndaiSans-Regular, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
}

.cto-dropdown-label{
    font-family: HyndaiSans-Regular, sans-serif;
    font-weight: 400;
}

.cto-dropdown {
    position: relative;
    width: 100%;
}

.cto-dropdown-btn {
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 1rem 2.6rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: #f3f3f3;
    cursor: pointer;
    z-index: 2;
}

.cto-dropdown-arrow {
    width: 1.4rem;
    height: auto;
    transition: transform 0.25s ease;
}

.cto-dropdown-btn.active .cto-dropdown-arrow {
  transform: rotate(180deg);
}

.cto-dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  z-index: 100;
  font-size: 1.6rem;
}

.cto-dropdown-menu.show {
  display: block;
  z-index: 10;
}

.cto-dropdown-item {
    position: relative;
    z-index: 10;
    padding: 1rem;
    cursor: pointer;
}

.cto-dropdown-item:hover {
  background: #eee;
}

.dealer-cto a{
    color:#333333;
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

/* Slider CSS */
.reglament{
    color: #333333;
}

.slider-wrapper {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  /* padding: 0 1.35rem; */
  position: relative;
}

.cto-slider {
  width: 100%;
  margin: 0;
  padding: 0;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 4px;
  background: #00a7c6;
  border-radius: 2px;
  outline: none;
}

.cto-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.7rem;
  height: 2.7rem;
  background: #fff;
  border: 6px solid #00a7c6;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}


input[type="range"]::-moz-range-thumb {
  width: 1.8rem;
  height: 1.8rem;
  background: #fff;
  border: 6px solid #00a7c6;
  border-radius: 50%;
  cursor: pointer;
}

.slider-labels {
    font-family: HyndaiSans-Regular, sans-serif;
    font-weight: 400;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    font-size: 1.6rem;
    margin-top: 2rem;
    position: relative;
}


.slider-labels .active {
  font-weight: 700;
  color: #333333;
}


.slider-labels span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
  }


.slider-info {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
}

.year-km{
    margin-top: 4.7rem;
}

.overall-cto-bg{
    width: 100%;
    max-width: 82.2rem;
    margin: 0;
    padding: 0;
    background-color: #D9D9D9;
}

.overall-cto{
    width: 100%;
    max-width: 40.5rem;
    margin: 0 auto;
    padding: 8.9rem 0 10.6rem;
    background-color: #D9D9D9;
}

.overall{
    display: flex;
    flex-direction: column;
    gap: 4.4rem;
}

.overall-subsections{
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.subsection-cto{
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

.category-cto{
    color: #333333;
    text-wrap: nowrap;
}

.underline-divider{
    width: 45%;
    border-bottom: 0.5px dashed #333333;
}

.price{
    color: #333333;
    text-wrap: nowrap;
}

.overall-price{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.3rem;
}

.itogo{
    font-size: 2.4rem;
    color: #333333;
}

.itogo-price{
    font-size: 2.4rem;
    color: #333333;
}

.overall-cto-btn{
    width: 100%;
    color: #fff;
    background-color: #003B70;
    font-size: 1.6rem;
    padding: 1.6rem 0;
}

/* End-description */
.end-description-service_3{
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7.2rem 45.7rem;
}


.end-description-service_3 li{
    width: 100%;
    font-size: 1.2rem;
    line-height: 2.2rem;
    color: #333333;
}

.end-description-service_3 li::marker{
    padding-right: 1rem;
}

/* Service_4 section */
.hero-nav-service_4{
    background-image: url(../img/parts-service-4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.subhero-description-service_4-bg{
    max-width: none;
    width: 100%;
    background-color: #F4F4F4;
}

.subhero-nav{
    padding: 8.5rem 0 11.1rem;
    display: flex;
    flex-direction: row;
    gap: 11.2rem;
}

.head-subhero{
    width: 100%;
    max-width: 51rem;
    font-size: 3.6rem;
}

.long-desc{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 89.8rem;
}


.original-parts-service_4{
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 9.7rem 0 10.3rem;
    align-items: center;
}

.head-original-parts{
     font-size: 2rem;
}

.original-parts-cards{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2.2rem;
}

.op-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5.7rem;
    padding: 7.4rem 3.8rem 5.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.op-icon{
    height: 6rem;
    width: auto;
}

.op-card-desc{
    text-align: center;
    color: #333;
}

.caution-block{
    width: 100%;
    max-width: 113rem;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: center;
}

.caution-icon{
    height: 4rem;
    width: auto;
}

.divider-s4{
    height: 4rem;
    border-left: 1px solid #333;
}

.caution-desc{
    color: #333;
}

.parts-photo-cards{
    display: flex;
    flex-direction: row;
    height: 72rem;
    max-width: none;
    margin: 0;
}

.original-parts-img, .bootleg-parts-img{
    width: 100%;
}

.original-parts-img img, .bootleg-parts{
    object-fit: cover;
    height: 72rem;
}



.bootleg-parts-img{
    position: relative;
}

.not-permited{
    width: 44.731rem !important;
    height: 44.731rem !important;
    position: absolute;
    top: 13.8rem;
    left: 25.669rem;
}

/* Service_5 section */
.hero-nav-service_5{
    background-image: url(../img/service-5-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0rem -12rem;
    height: auto;
    padding: 20.1rem 40rem 19.5rem;
}

.nav-service_5{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-service_5 h1{
    font-size: 6rem;
    text-align: center;
}

.sub-nav-points{
    width: 81rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6rem;
    margin-top: 6.9rem;
}

.sub-nav-points span{
    font-family: "HyndaiSans-Medium",sans-serif;
    font-weight: 500;
    font-size: 2.4rem; 
    line-height: 100%;
    color: #fff;

}

.divider-s5{
    height: 7rem;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.promotion{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}

.promotion img{
    width: 7.9rem;
    height: auto;
}

.line-of-parts-service_5{
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 8.2rem 0 9.9rem;
    align-items: center;
}

.head-line-of-parts{
    font-size: 4rem;
}

.line-of-parts-cards{
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.lop-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 5.9rem 5.5rem 5.6rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.lop-icon{
    height: 6rem;
    width: auto;
}

.lop-card-desc{
    font-size: 1.6rem;
    text-align: center;
    color: #333;
}

.pl2-bg{
    background-color: #F4F4F4;
}

.pl2-contents{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pl2-content{
    display: flex;
    flex-direction: column;
    gap: 12rem;
    padding: 12rem 0;
}

.pl2-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15.1rem;
}

.pl2-card:nth-child(even) {
    flex-direction: row-reverse;
}

.pl2-point{
    width: 4.7rem;
    height: 4.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #00AAD2;
    color: #00AAD2;
    font-size: 1.6rem;
    background-color: transparent;
    margin-bottom: 0.9rem;
}

.pl2-point-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.1rem;
}

.pl2-card img {
    width: 74.7rem;
    height: auto;
}

.pl2-card-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.1rem;
    max-width: 62.2rem;
}

.pl2-card-text h3{
    font-size: 3.6rem;
    margin: 0;
    padding: 0;
}

.pl2-card-text p{
    color: #666;
    text-align: center;
}

.characteristics{
    width: 100%;
    border-collapse: collapse;
}

.pl2-parts{
    margin-bottom: 5.5rem;
}

.pl2-parts-mobile{
    display: none;
}

.head-characteristics{
    background-color: #003B70;
    color: #fff;
}

.head-characteristics th{
    font-size: 2rem;
    padding: 2.7rem 6.2rem;
}

.name-h-th{
    text-align: left;
}

.k-number-th{
    width: 38.3rem;
}

.price-th{
    width: 26.1rem;
}

.row-charactheristics-table{
    color: #333333;
}

.row-charactheristics-table td{
    border: 1px solid #D9D9D9;
    padding: 1.7rem 6.2rem;
    font-size: 1.6rem;
}

.number-td, .k-number-td, .price-td{
    text-align: center;
}

.disclaimer-s5{
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 6.3rem;
    color: #333;
}

/* Instructions section */
.hero-nav-instructions{
    background-image: url(../img/instructions-bg.jpg);
    background-size: cover;
    margin-top: 15rem;
    padding: 16.7rem 0rem 16.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.download-instructions{
    font-family: "HyndaiSan-Regular", sans-serif;
    width: 34rem;
    padding: 1.7rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.9rem;
}

.download-instructions img{
    width: 1.4rem;
    height: auto;
}

.instructions-models-bg{
    background-color: #F4F4F4;
}

.instructions-models{
    padding: 9.6rem 0;
}

.instructions-gridmodels{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.intsructions-model-card{
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    align-items: center;
    background-color: #fff;
    padding: 3.9rem 4.5rem;
}

.intsructions-model-card img{
    max-height: 12rem;
}

.intsructions-model-card h3{
    font-size: 1.6rem;
}

.download-manual{
    font-family: HyndaiSans-Regular, sans-serif;
    margin-top: 3.1rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.233rem;
    background-color: #003B70;
    color: #fff;
}

.download-manual img{
    width: 1.6rem;
    height: 1.7rem;
}


/* News section */
.hero-nav-news{
    background-image: url(../img/news-bg.jpg);
    background-size: cover;
    background-position: center;
}

.today-news-bg{
    background-color: #F4F4F4;
}

.today-news{
    padding: 9.1rem 0 10.7rem;
}

.today-news-card{
    display: flex;
    flex-direction: row;
    background-color: #fff;
}

.today-news-card img{
    width: 50%;
    height: auto;
}

.today-news-card-desc{
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin: 0 auto;
    padding: 10.5rem 12.8rem 9.3rem;
}

.tn-card-head{
    font-size: 2rem;
    line-height: 2.8rem;
    color: #333;
}

.tn-card-desc{
    font-size: 1.4rem;
    line-height: 2rem;
    color: #666;
}

.tn-card-date{
    margin-top: 2.6rem;
    color: #666;
}

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

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

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

.news-card-n img{
    width: 100%;
    object-fit: cover;
    height: 23rem;
    max-height: 23rem;
}

.news-card-n h2{
    font-size: 2rem;
    line-height: 2.8rem;
    margin-top: 0.3rem;
    color: #000;
}

.news-card-n span{
    margin: 0;
    color: #666;
    font-size: 1.4rem;
    margin-bottom: 2.6rem;
}

.news-card-n p{
    margin: auto 0;
    color: #666;
    font-size: 1.4rem;
}

.pagination-news-bg{
    background-color: #F4F4F4;
}

.pagination-news{
    padding: 4.8rem 0;
}

.pagination-news-catalog{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5.5rem;
}

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



.page-number{
    font-weight: 400;
    font-size: 2rem;
    color: #003B70;
    background-color: transparent;
    border: none;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.page-number.more{
    text-decoration: none !important;
}

.prev-page, .next-page{
    font-weight: 600;
    font-size: 1vw;
    border: 1px solid #003B70;
    border-radius: 50%;
    color: #003B70;
    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-inside section */
.mobile-news-inside-hero{
    display: none;
}

.hero-news-inside-bg{
    background-color: #003B70;
}
.hero-news-inside{
    margin-top: 13.5rem;
    max-width: 100.6rem;
    padding: 8.4rem 0 7.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.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{
    margin: 0;
    margin-bottom:  3.05rem;
    margin-top: 0.5vw;
}

.heading-hero-news span{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 4rem;
    line-height: 100%;
}

.date-share-news-inside{
    font-family: "HyndaiSans-Medium", sans-serif;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 1.7vw 0vw;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

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

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

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

.facebook-ni{
    width: 0.832rem;
    height: 1.604rem;
}

.vk-ni{
    width: 1.847rem;
    height: 1.055rem;
}

.twitter-ni{
    width: 1.675rem;
    height: 1.362rem;
}

.telegram-ni{
    width: 1.613rem;
    height: 1.344rem;
}

.whatsapp-ni{
    width: 1.52rem;
    height: 1.52rem;
}

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

.subhero-news-inside-bg{
    background-color: #F4F4F4;
}

.subhero-news-inside{
    max-width: 100.6rem;
    padding: 6.4rem 0 7.4rem;
}

.subhero-news-inside-desc{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    font-size: 2rem;
    line-height: 2.8rem;
    color: #666;
}

.subhero-ni-desc-strong{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-weight: 500;
}

.article{
    display: flex;
    flex-direction: column;
    gap: 4.1rem;
    max-width: none;
    margin: 0;
    padding: 5rem 0 7.95rem;
    color: #333;
}

.container-news-inside{
    display: flex;
    flex-direction: column;
    gap: 4.1rem;
    max-width: 100.6rem;
    margin: 0 auto;
}

.sub-article-1{
    max-width: 100.6rem;
    padding: 5.1rem 7.8rem;
    margin: 0 auto;
    border: 1px solid #00AAD2;
    border-left: 3px solid #00AAD2;
}

.sub-article-1 p{
    font-family: "HyndaiSans-Medium", sans-serif;
    color: #00AAD2;
    font-size: 2rem;
    line-height: 2.8rem;
}
.news-article-slider{
    padding-left: 23.7vw;
    padding-right: 23.7vw;
}


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

.pagination-news-inside{
    display: flex !important;
    justify-content: center;
    margin: 3.1rem auto 8.3rem;
    gap: 2.5rem;
}

.swiper-pagination-bullet{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #003B70;
    gap: 2.2vw;
}

.swiper-pagination-bullet-active{
    width: 5.5rem;
    height: 0.5rem;
    border-radius: 1.5rem;
    background-color: #003B70 !important;
}

.quote{
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    width: 100%;
    padding: 5.2rem 7.8rem 5.3rem;
    border: 1px solid #00AAD2;
}

.quote-1{
    font-family: "HyndaiSans-Medium", sans-serif;
    color: #00AAD2;
    font-size: 2rem;
    line-height: 2.8rem;
}

.author{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4.328rem;
}

.author-image-group{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 0.9rem;
}

.author-pic{
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    object-fit: cover;
}

.dots{
    width: 1.973rem;
    height: 1.9rem;
}

.author-info{
    display: flex;
    flex-direction: column;
    color: #00AAD2;
}

.name{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-weight: 500;
}

.occupation{
    font-size: 1.4rem;
}

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

.list-article span{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 2rem;
    line-height: 2.8rem;
    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: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}

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

.ordered-list-article{
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
}

.ordered-list-article span{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 2rem;
    line-height: 2.8rem;
    margin: 0;
    
}

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

}

.o-list-component-news li{
    font-size: 1.6rem;
    line-height: 2.6rem;
    display: flex;
    flex-direction: row;
    counter-increment: my-counter;
    position: relative;
    padding-left: 4rem;
    margin-bottom: 1.5rem;
}

.o-list-component-news li::before{
    content: counter(my-counter);
    position: absolute;
    font-size: 1.2rem;
    left: 0vw;
    top: -0.2rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 2px solid #00AAD2;
    background-color: transparent;
    font-weight: 700;
    color:#00AAD2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alt-date-share-ni{
    border-top: 1px solid #333333;
    color: #333;
}

.news-ni-bg{
    background-color: #F4F4F4;
}

.news-ni{
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    padding: 7.1rem 0 6.6rem;
}

.news-header-ni{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-header-ni span{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-size: 3rem;
    color: #333;
}

/* Leasing section */
.hero-nav-leasing{
    background-image: url(../img/leasing-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.subhero-nav-leasing-bg{
    background-color: #F4F4F4;
}

.subhero-nav-leasing{
    display: flex;
    flex-direction: row;
    gap: 11.2rem;
    padding: 7.5rem 0 10.5rem;
}

.strong-subhero-leasing{
    font-family: "HyndaiSans-Medium", sans-serif;
    font-weight: 500;
}

.leasing-dealers{
    padding: 7.1rem 0 7.5rem;
}

.leasing-dealers-cards{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5rem;
}

.leasing-dealers-card{
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    align-items: center;
    width: 100%;
    padding: 5.8rem 6.6rem 3.8rem;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-radius: 0.5rem;
}

.my-car-finance-logo{
    width: 29.661rem;
    height: auto;
}

.ld-astana-motors-logo{
    width: 16.333rem;
    height: auto;
}

.foundation-industry-logo{
    width: 17.683rem;
    height: auto;
}

.leasing-dealers-card h2{
    margin-top: auto;
    font-size: 1.6rem;
    padding: 1rem 4.4rem;
    text-align: center;
    border-top: 1px solid rgba(51, 51, 51, 0.15);
    border-bottom: 1px solid rgba(51, 51, 51, 0.15);
}

.head-astana-motors-ld{
    border-top: 1px solid rgba(0, 170, 210, 0.15) !important;
    border-bottom: 1px solid rgba(0, 170, 210, 0.15) !important;
}

.bid{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.8rem;
}

.individual{
        display: block;
    }

.percentage-ls-m{
    display: none;
}


.bid span{
    color: #666;
}

.bid h3{
    font-size: 2rem;
    color: #333;
}

.term{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.8rem;
}

.term span{
    color: #666;
}

.term h3{
    font-size: 2rem;
    color: #333;
}

.mobile-v-card{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.down-payment{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.6rem;
}

.down-payment span{
    color: #666;
}

.down-payment h3{
    font-size: 2rem;
    color: #333;
}

.desc-down-payment{
    font-size: 1.2rem;
}

.leasing-dealer-btn{
    font-family: "HyndaiSans-Medium", sans-serif;
    color: #333;
    background-color: transparent;
    font-size: 1.6rem;
    padding: 1.5rem 5.1rem;
    text-decoration: none;
    border: 1px solid #333;
    text-wrap: nowrap;
}

.phone-ld{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.1rem;
}

.phone-ld img{
    width: 2rem;
    height: auto;
}

.phone-ld span{
    font-family: "HyndaiSans-Medium", sans-serif;
    color: #00AAD2;
}

.leasing-forms-bg{
    background-image: url(../img/leasing-form-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mobile-la-ls{
    display: none;
}

.desktop-la-ls{
    display: block;
}

.leasing-forms{
    padding: 9.9rem 0 10.8rem;
}

.leasing-form {
    background: #fff;
    margin: auto;
    display: flex;
}

.form-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.8rem;
    padding: 6.7rem 11.9rem 10.8rem 10.3rem;
    background-color: #F4F4F4;
    width: 35%;
}

.form-left img {
    max-width: 100%;
    margin-bottom: 2.9rem;
}

.model-selection{
    font-size: 1.6rem;
}

.form-right {
    width: 65%;
    padding: 7.7rem 10.9rem 7.9rem 10.7rem;
}

.form-right h2 {
    font-size: 4rem;
    margin-bottom: 4.8rem;
    color: #333333;
}

.grid-form-right{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 2.1rem;
}

.form-group-right{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group-right label{
    font-size: 1.6rem;
}

.form-group-left{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.form-group-left label{
    font-size: 1.6rem;
}
.model-selection{
    background-color: transparent;
    padding: 1.6rem 2.6rem;
}
.model-selection option{
    font-size: 1.6rem;
    border: 1px solid #ccc;
}

.radio-group {
    display: flex;
    gap: 3.3rem;
    margin-top: 0.6rem;
}

.radio-group label{
    display: flex;
    align-items: center;
    gap: 1.8rem;
    text-align: center;
}

.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  background-color: #D9D9D9;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
}

.custom-radio:checked::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 0.6rem solid #003B70;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.form-group-right input,.form-group-right select {
    width: 100%;
    padding: 1.6rem 2.9rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1.6rem;
}

.checkbox-submit{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 7rem;
}

.checkbox {
    font-size: 1.4rem;
}

.checkbox label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    color: #333;
}

.custom-checkbox {
  /* appearance: none; */
  /* -webkit-appearance: none; */
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid #003B70;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  accent-color: #003b70;
}

.custom-checkbox:checked {
  background: #003B70;
}

/* .custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
  width: 0.4rem;
  height: 0.7rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
} */

.btn-forms-leasing {
    width: 38.4rem;
    background: #003B70;
    color: #fff;
    border: none;
    padding: 2.5rem 12.7rem;
    cursor: pointer;
    font-size: 1.6rem;
    font-family: HyndaiSans-Regular, sans-serif;
}

.btn-forms-leasing:hover {
    background: #002e6f;
}

/* Dealers section */
.hero-nav-dealers{
    background-image: url(../img/dealers-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    padding: 6.4rem 0;
}

.nav-dealers h1{
    font-size: 2rem;
}

.contact-info-map{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    max-width: none;
    margin: 0;
}

.sidebar {
	--scrollbar-width: 8px;
	padding: 4.9rem 0 6.8rem;
	width: calc(95.4rem + var(--scrollbar-width));
	margin-right: calc(var(--scrollbar-width) * -1);
	max-height: 100vh;
	overflow-y: scroll;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: #00a7c6 transparent;
}

/* WebKit (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

.sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
	background: #00a7c6;
	border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
	background: #008ba5;
}

.city-select{
    padding: 0 11.2rem;
    margin-bottom: 3.2rem;
    position: relative;
}

.city-select select {
    width: 100%;
    padding: 1.6rem 2.9rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    appearance: none;
}

.city-select::after {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    position: absolute;
    right: 13.6rem;
    top: 30%;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.available-dealers{
    font-size: 1.2rem;
    color: #666;
}
.dealers-list-dl {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #002169 rgba(0,0,0,0.1);
}

.dealers-list-dl::-webkit-scrollbar {
    width: 4px;
}

.dealers-list-dl::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.dealers-list-dl::-webkit-scrollbar-thumb {
    background: #002169;
    border-radius: 4px;
}

.dealer-item-dl {
    padding: 0 11.2rem;
    width: 63.4rem;
    box-sizing: border-box;
}

.dealer-header-dl {
    font-size: 0.9vw;
    font-weight: 600;
    padding: 2.3rem 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1)
}

.dealer-header-dl .arrow-dl {
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

.dealer-item-dl.active-dl .arrow-dl {
    transform: rotate(225deg);
}

.dealer-body-dl {
    font-size: 0.8vw;
    color: rgba(0,0,0,0.7);
    padding: 1rem 0 2.8rem;
}

.dealer-body-dl p {
    color: #666;
}

.dealer-item-dl .dealer-body-dl {
    display: none;
}


.dealer-item-dl.active-dl .dealer-body-dl {
    display: block;
}

.dealer-item-dl.active-dl .dealer-header-dl {
    padding-top: 4.9rem;
}

.dealer-item-dl.active-dl{
    background-color: #F4F4F4;
}

.dealer-label {
    display: inline-block;
    font-family: "HyndaiSans-Medium", sans-serif;
    background: #00a3d9;
    color: #fff;
    font-size: 1.2rem;
    padding: 0.2rem 0.7rem;
    margin-bottom: 1vw;
}

.dealer-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2vw;
}


.dealer-actions button {
    width: 16.5rem;
    padding: 1.2rem 0;
    border: 1px solid #003B70;
    background: #fff;
    color: #003B70;
    font-size: 1.4rem;
    cursor: pointer;
}

.dealer-actions button:first-child {
    background: #003B70;
    color: #fff;
}


#map-container{
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 100vh;
    min-height: 60rem;
}

.dealer-cluster-icon {
	position: relative;
	width: 64px;
	height: 54px;
}

.dealer-cluster-icon-img {
	width: 64px;
	height: 54px;
	display: block;
}

.dealer-cluster-icon-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	background: #fff;
	color: #003B70;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: center;
	border-radius: 10px;
	border: 2px solid #003B70;
	box-sizing: border-box;
}

.swiper-scrollbar {
    position: absolute;
    top: 0;
    height: 70%;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    width: 0.3125vw;
    right: 0.3vw;
    z-index: 10;
    bottom: 0;
    margin-top: 2vw;
}
  
.swiper-scrollbar-drag {
    background: #002169;
    border-radius: 4px;
}

.dealer-body-dl a, .ymaps-2-1-79-balloon__layout a {
    color: inherit;
}

/* About section */
.hero-nav-about{
    background-image: url(../img/about-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    padding: 19.4rem 0;
}

.subhero-nav-about-bg{
    background-color: #F4F4F4;
}

.about-vehicle{
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 9.7rem 0 10.3rem;
    align-items: center;
}

.head-about-vehicle{
     font-size: 2rem;
}

.about-vehicle-cards{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2.2rem;
}

.av-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5.7rem;
    padding: 7.4rem 3.8rem 5.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.av-icon{
    height: 6rem;
    width: auto;
}

.av-card-desc-group{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.av-card-desc{
    text-align: center;
    color: #000;
}

.av-card-subdesc{
    color: #666;
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-align: center;
}

.caution-block-about{display: none;}

.about-image-manufacturer{
    background-image: url(../img/manufacturer.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70.5rem;
}

.about-cut-bg{
    background-color: #003B70;
}

.about-cut{
    height: 73.6rem;
    position: relative;
}

.circle-cut{
    position: absolute;
    width: 52rem;
    height: 52rem;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    padding: 11.5rem 12.5rem 10.5rem;
    color: #fff;
}

.n-1{
    top: 11.3rem;
    left: 26.3rem;
    z-index: 2;
}

.n-2{
    top: 11.3rem;
    right: 26.3rem;
    background-color: rgba(0, 35, 66, 0.25);
    border: none;
    z-index: 1;
}

.circle-cut h2{
    font-size: 10rem;
    padding: 0;
    padding: 0 3.2rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.circle-cut span{
    text-align: center;
}

.about-description{
    padding: 7.9rem 0 8.2rem;
    max-width: 100.6rem;
    margin: 0 auto;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 4.1rem;
}

.about-image-manufacturer-2{
    background-image: url(../img/manufacturer-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70.5rem;
}

/* Model section */
.model-hero-bg{
    background-image: url(../img/model-hero-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 14.5rem;
    position: relative;
    height: 80rem;
}

.model-hero-bg section {
    position: static;
    height: 100%;
}

.hero-content-model{
    display: flex;
    flex-direction: column;
    padding: 10.2rem 0 9.5rem;
    color: #fff;
    height: 100%;
}

.model-head-desc{
    width: 51rem;
    margin-bottom: 3.5rem;
}

.model-head-desc h1{
    font-size: 7rem;
    line-height: 1;
}

.model-head-desc p{
    font-size: 3rem;
    line-height: 100%;
    margin-top: 2rem;
}

.model-head-desc p span {
    font-size: inherit;
}

.model-head-desc h2{
    font-size: 5rem;
    font-family: "HyndaiSans-Medium";
    margin-top: 2rem;
    font-weight: 400;
    text-wrap: nowrap;
}

.disclaimer-model{
    margin-top: 27.5rem;
    font-size: 1.6rem;
}

.guarantee-model{
    /* position: absolute; */
    left: 0;
    bottom: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    border-radius: 0.6rem;
    align-self: flex-start;
    margin-top: auto;
}

.guarantee-icon-frame{
    background-color: #00AAD2;
    border-radius: 0 0.6rem 0.6rem 0;
    padding: 1.8rem 2.3rem;
    align-self: stretch;
}

.guarantee-icon{
    width: 4.7rem;
    height: auto;
}

.guarantee-model-desc{
    color: #00AAD2;
    padding: 1.2rem 3.5rem 1.5rem 3rem;
    height: 100%;
}

.head-guarantee-desc{
    font-size: 3.7rem;
}

.subhead-guarantee-desc{
    font-size: 1.6rem;
}

.nav-information-bg{
    background-color: #003B70;
}

.nav-information{
    padding: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 19rem;
    color: #fff;
}

.point-nav-information{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    cursor: pointer;
}

.point-nav-information h2{
    font-size: 2rem;
    color: #fff;
}

.point-nav-information-icon{
    width: 2.8rem;
    height: auto;
}

.request-icon{
    width: 3.8rem;
}

.divider-model{
    height: 4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.peculiarities-bg{
    background-color: #fff;
}

.peculiarities-head {
    font-size: 5rem;
    line-height: 1;
    font-family: "HyndaiSans-Medium";
    font-weight: 400;
}

.font-main {
    font-family: "HyndaiSans-Medium";
    font-weight: 400;
}

.peculiarities{
    padding: 6.2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.5rem;
}

.peculiarities-cards{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    gap: 5.5rem;
    justify-content: center;
}

.peculiarities-card{
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(51, 51, 51, 0.15);
    padding: 4.5rem 3.2rem 3.6rem;
    text-align: center;
    width: 26rem;
    height: 20rem;
}

.peculiarities-card img{
    height: 4.5rem;
    width: auto;
}

.peculiarities-card span{
    margin-top: auto;
    color: #333;
    line-height: 1.1;
    text-wrap: balance;
}

.engine-icon{
    height: 4rem;
}

.capacity-icon{
    height: 4.2rem;
}

.porter-carpenter-bg{
    background-image: url(../img/model-porter-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 87.3rem;
}

.benefits-model-bg{
    background-color: #fff;
}

.benefits-model{
    padding: 10rem 0 9.4rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

.model-benefit-card{
    display: flex;
    flex-direction: row;
}

.model-benefit-card:nth-child(even){
    flex-direction: row-reverse;
}

.image-benefit-model{
    background-color: #E7E4DF;
    width: 76rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-benefit-model img {
    width: 100%;
}

.model-benefit-card-text{
    padding: 15.2rem 12.5rem;
    width: 76rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    background-color: #F3F3F3;
}

.model-benefit-card-text h3{
    font-size: 3.6rem;
    line-height: 100%;
}

.model-benefit-card-text p{
    color: #666;
}

.specification-bg{
    background-color: #F3F3F3;
}

.specification{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 8rem 0;
}

.specification-head{
    font-size: 5rem;
    color: #333;
}

.spec-table {
    width: 100%;
    margin: auto;
    border-collapse: collapse;
    background: #fff;
}

.spec-table th {
  background: #E4EEF7;
  padding: 2.2rem 13.1rem;
  text-align: left;
  font-size: 2rem;
}

.spec-table th:first-child {
  border-right: none;
}

.table-head-alt{
    width: 64.4rem;
    text-align: center !important;
    padding: 2.2rem 0 !important;
}

.spec-table td {
  border: 1px solid #e6e6e6;
  padding: 1.8rem 13.1rem;
  font-size: 1.6rem;
  vertical-align: middle;
  color: #666;
}

.narrow-column{
    width: 36.5rem;
    padding-right: 0 !important;
}

.numeric-value{
    text-align: center !important;
}

.spec-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.group td:first-child {
    background: #fff;
}

.sub-label {
  padding-left: 6.7rem !important;
  color: #666;
}

.variation-model-bg{
    background-color: #003B70;
}

.variation-model{
    color: #fff;
    padding: 7.3rem 0 10rem;
    display: flex;
    flex-direction: column;
    gap: 9.3rem;
    align-items: center;
}

.page-porter .variation-model {
    gap: 5.3rem;
}

.variation-model h1{
    font-size: 5rem;
}

.variant-model-points{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    flex-wrap: wrap;
    row-gap: 9rem;
    align-items: baseline;
    column-gap: 1rem;
}

.variant-model-point{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    min-width: 24rem;
    width: 100%;
}

.variant-model-point span{
    font-size: 2rem;
    margin-top: auto;
    text-align: center;
}

.variant-model-point img {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

.divider-model-2{
    height: 17.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.divider-model-2{
    height: auto;
}

.isometric{
    height: 10rem;
    width: auto;
}

.industrial{
    height: 9rem;
    width: auto;
}

.boarded{
    height: 8.9rem;
    width: auto;
}

.equipment-options-bg{
    background-image: url(../img/equipment-option-bg.jpg);
    height: 71.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipment-options-bg h2{
    font-size: 5rem;
    color: #fff;
}

.options-advantages-bg{
    background-color: #F3F3F3;
    padding: 8.5rem 0 10rem;
}
.options-advantages{
    padding: 8.5rem 0 10rem;
}

.grid-options-advantages{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5.7rem 5.3rem;
}

.grid-4 .grid-options-advantages {
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
}

.grid-4 .advantage-desc {
    padding: 3.6rem 4rem 5rem;
}

.grid-4 .advantage-desc h2 {
    font-size: 2rem;
    font-weight: 400;
}

.bg-light .advantage-desc {
    background: #F3F3F3;
    flex-grow: 1;
}

.card-option-advantage{
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.card-option-advantage img{
    width: 100%;
    height: auto;
    height: 25rem;
    object-fit: cover;
}


.advantage-desc{
    padding: 4.4rem 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-grow: 1;
}

.advantage-desc h2{
    font-size: 2.4rem;
    line-height: 120%;
    font-weight: 400;
}

.advantage-desc span{
    color: #666;
}

.design-model-bg{
    background-color: #1F1E21;
    background-image: url(../img/hyndai-porter-grid-bg.jpg);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    height: 203.7rem;
}

.design-model-bg::before{
    content: "";
    position: absolute !important;
    top: 97.4rem;
    left: 0;
    width: 100%;
    height: 40.9rem;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(31, 30, 33, 1),
        rgba(255,255,255,0)
    );
}

.page-ex8 .design-model-bg::before {
    top: 75.4rem;
}

.page-ex5 .design-model-bg::before {
    top: 99.4rem;
}

.design-model{
    position: relative;
    z-index: 4;
    padding: 9.8rem 0 ;
}

.design{
    display: flex;
    flex-direction: column;
}

.head-tab-design{
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 5.2rem;
}

.tabs-btn-group-model{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tab-btn-model{
    padding: 1.7rem 8.5rem;
    background-color: #fff;
    border: none;
    color: #333333;
    font-size: 1.6rem;
    cursor: pointer;
}

.tab-btn-model.active-7{
    background-color: #003B70;
    color: #fff;
}

.head-tab-design h2{
    font-size: 5rem;
}
.design-grid{
    display: none;
}

.design-grid.active-7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.design-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.views-truck-model{
    width: 100% !important;
    object-fit: contain !important;
}

.views-truck-model-alt{
    width: 100% !important;
    object-fit: contain !important;
}

.design-grid-m, .desgin-grid-m.active-7{
    display: none;
}

.design-swiper img {
  width: 100%;
  border-radius: 4px;
}

.technical-characteristics{
    margin-top: 12.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.5rem;
    color: #fff;
}

.technical-characteristics h2{
    font-size: 5rem;
}

.manual-book-model-btn{
    display: flex;
    flex-direction: row;
    padding: 1.8rem 4.9rem;
    width: auto;
    align-items: center;
    gap: 2rem;
    background-color: #fff;
    border: none;
}

.manual-book-model-btn a{
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    font-size: 1.6rem;
    text-decoration: none;
    color: #333333;
    text-wrap: nowrap;
}

.text_block {
    position: absolute;
    top: 7rem;
    bottom: 7rem;
    right: 11.5rem;
    padding: 11rem 12rem 10rem;
    background: #003c70d4;
    color: #fff;
    max-width: 58rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.text-md {
    font-size: 1.6rem;
    line-height: 1.4;
}

.text h3 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.form__page {
    display: block;
    padding-bottom: 8rem;
}

/* --- Hero --- */

.form__page .become-dealer-hero {
    position: relative;
    width: 100%;
    
    max-width: 100%;    
}

.form__page {
    margin: 13.5rem auto 5rem auto;
    padding-top: 8rem;
}

.form__page .become-dealer-hero .breadcrumbs {
    position: absolute;
    top: 2.5rem;
    left: 4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.4rem;
    color: #fff;
}

.form__page .become-dealer-hero .breadcrumbs a {
    color: #fff;
    opacity: .85;
    transition: opacity .2s ease;
}

.form__page .become-dealer-hero .breadcrumbs a:hover {
    opacity: 1;
}

.form__page .become-dealer-hero .breadcrumbs span {
    opacity: .6;
}

.form__page .become-dealer-hero picture,
.form__page .become-dealer-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.form__page .become-dealer-hero img {
    object-fit: cover;
}

/* --- Content --- */

.form__page .become-dealer-content {
    width: 100%;
    max-width: 152rem;
    margin: 0 auto;
    padding: 0 4rem;
}

.form__page .wrapper-small {
    max-width: 80rem;
    margin: 0 auto 5rem auto;
}

.form__page .wrapper-small.text-center {
    text-align: center;
}

.form__page .wrapper-small h1,
.form__page .wrapper-small h2 {
    font-size: 3.2rem;
    font-weight: 600;
    color: #002c5f;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.form__page .wrapper-small p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.2rem;
}

/* --- Form wrapper --- */

.form__page .wrapper {
    max-width: 64rem;
    margin: 0 auto;
}

.form__page .bid-modal {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: .8rem;
    padding: 4rem;
}

.form__page .form-row {
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
}

.form__page .form-row label {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: .6rem;
}

.input-field {

font-family: HyndaiSans-Regular, sans-serif;

}


.form__page .input-field,
.form__page select.input-field,
.form__page select,
.form__page textarea {
    width: 100%;
    padding: 1.3rem 1.5rem;
    font-size: 1.5rem;
    border: 1px solid #ccced3;
    border-radius: .4rem;
    background: #fff;
    color: #000;
    outline: none;
    font-family: HyndaiSans-Regular, sans-serif;
    transition: border-color .2s ease;
}

.form__page .input-field:focus,
.form__page select:focus,
.form__page textarea:focus {
    border-color: #002c5f;
}

.form__page textarea.input-field,
.form__page textarea.memo {
    min-height: 9rem;
    resize: vertical;
}

.form__page .errorMessage {
    color: #d0021b;
    font-size: 1.3rem;
    margin-top: .5rem;
}

.form__page .input-field.error {
    border-color: #d0021b;
}

.form__page .form-row .col {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    font-size: 1.5rem;
    color: #555;
}

.form__page .form-row .col label {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.form__page .form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 1.8rem 0;
}

.form__page .form-checkbox-row label {
    font-size: 1.3rem;
    color: #777;
    line-height: 1.4;
}

.form__page .form-checkbox-row input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.form__page .btn,
.form__page .btn__black {
    width: 100%;
    padding: 1.6rem;
    background: #002c5f;
    color: #fff;
    border: none;
    border-radius: .4rem;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background .2s ease;
}

.form__page .btn:hover,
.form__page .btn__black:hover {
    background: #00193a;
}

.form__page .btn.loading {
    opacity: .6;
    pointer-events: none;
}

/* --- Success popup (.modal) --- */

.form__page .modal {
    display: none;
    padding: 4rem;
    text-align: center;
}

.form__page .modal .popup-btn-close {
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}

.form__page .modal .popup-btn-close::before,
.form__page .modal .popup-btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #002c5f;
}

.form__page .modal .popup-btn-close::before { transform: rotate(45deg); }
.form__page .modal .popup-btn-close::after  { transform: rotate(-45deg); }

@media (max-width: 800px) {
    .form__page .become-dealer-content { padding: 0 2rem; }
    .form__page  { margin-bottom: 3rem; margin-top: 8rem; padding-bottom: 8rem;}
    .form__page .become-dealer-hero .breadcrumbs { top: 1.5rem; left: 2rem; }
    .form__page .wrapper-small { margin-bottom: 3rem; }

    .form__page .become-dealer-hero picture, .form__page .become-dealer-hero img {height: 100%; object-fit: cover;}
    .form__page .wrapper-small h1,
    .form__page .wrapper-small h2 { font-size: 4rem; }
    .form__page .bid-modal { padding: 3rem 2.2rem; }
}

.truck-cto {
    transition: opacity 0.15s ease;
  }

.overall-cto-btn.download-model-img {
    margin-top: -2rem;
}

.l-dealer {
    height: 16rem;
}

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

    section{
        max-width: 44rem !important;
    }

    span, p{
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    /* Header & Footer styles */


    .header-top{
        display: none;
    }


    .header-bottom{
        padding: 1.9rem 2rem;
    }

    .logos{
        gap: 2.682rem;
    }

    .hyndai-logo{
        width: 13.086rem;
        height: 1.943rem;
    }

    .astana-motors-logo{
        width: 13.802rem;
        height: 1.166rem;
    }

    .logo-d{
        height: 1.8rem;
    }

    .navigation-dropdowns{
        display: none;
    }

    .burger-menu {
        display: block;
    }

    .burger-menu img{
        width: 3.45rem;
        height: 1.727rem;
    }

    .footer-top{
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }

    .logo-bottom-group{
        margin: 0 auto;
    }


    .content-1{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0rem 2rem;
        gap: 2rem;
    }

    .content-1 span, .footer-top a{
        font-size: 1.4rem;
        text-align: center;
    }

    .social-links-bottoms{
        margin: 0 auto;
        gap: 2.129rem;
    }


    .content-2, .content-3, .content-4, .content-5, .content-6{
        display: none;
    }

    .footer-top .footer-title{
        color: #fff;
        font-size: 1.8rem;
        margin-bottom: 1.9rem;
    }

    .footer-bottom{
        padding: 3.4rem 0 3.2rem 0;
    }

    .copyright{
        margin: 0 auto;
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 1);
    }

    .service-links-bottom{
        display: none
    }
    .company-info-bottom{
        display: none;
    }

    .phone_number-bottom, .location-bottom{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .phone_number-bottom img, .location-bottom img{
        width: 1.5rem;
        height: 1.5rem;
    }

    .phone_number-bottom span, .location-bottom span{
        color: rgba(255, 255, 255, 1);
        font-size: 1.4rem;
    }

    /* Mobile Menu styles */

    .mobile-menu{
        display: none;
        position: fixed;
        flex-direction: column;
        top: 0;
        left: 0;
        width: 100vw;
        max-width: none !important;
        z-index: 7000;
        background-color: #fff;
        overflow: visible;
    }

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

    .head-of-mobile-menu{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 2.3rem 5vw;
    }

    .social-links{
        margin: 0;
    }


    .container-m{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

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

    .navigation-m{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 1.8rem;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        z-index: 6000;
    }

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

    .dropdown-point-m{
        position: relative;
        z-index: 6500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        gap: 0.32vw;
        height: 14.04vw;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .model-variation-screen {
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 7000;
        overflow-y: auto;
        display: none;
        }

    .dropdown-m.open .model-variation-screen {
        display: block;
        background-color: #F5F7FA;
    }

    .models-trucks-mp-dropdown {
        padding: 2rem 1.6rem;
    }

    .head-tabs-button-dropdown-m {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .tabs-btn-group-dropdown-m {
        display: flex;
        gap: 2.4rem;
    }

    .tab-btn-dropdown-m {
        background: none;
        border: none;
        font-size: 1.4rem;
        font-weight: 500;
        color: #999;
        padding-bottom: 0.8rem;
        position: relative;
        cursor: pointer;
    }

    .tab-btn-dropdown-m.active-5 {
        color: #000;
        font-weight: 600;
    }

    .tab-btn-dropdown-m.active-5::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.1rem;
        width: 100%;
        height: 0.2rem;
        background: #00aad2;
    }

    .grid-models-dropdown-m {
        display: none;
        margin-top: 2.4rem;
    }

    .grid-models-dropdown-m.active-5 {
        display: flex;
        flex-direction: column;
    }

    .truck-model-card-m {
        display: flex;
        justify-content: space-between;
        padding: 1.6rem 10.7rem 1.6rem 0;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .truck-model-card-m img {
        width: 11rem;
        height: auto;
        object-fit: contain;
    }

    .desc-model-m {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .desc-model-m h3 {
        font-size: 2rem;
        margin: 0;
    }

    .desc-model-m span {
        font-family: HyndaiSans-Regular, sans-serif;
        font-size: 1.4rem;
        color: #777;
    }

    .more-details-link {
        font-size: 1.4rem;
        text-decoration: underline;
        margin-top: 0.4rem;
    }

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

    .porter-m{
        width: 14.845rem !important;
        height: auto;
    }

    .porter-1-m{
        width: 17.5rem !important;
        height: auto;
    }

    .porter-bus-m{
        width: 14.845rem !important;
        height: auto;
    }

    .nav-name-m{
        position: relative;
        font-size: 1.8rem;
        font-weight: 400;
        color: #666;
        padding: 0vw 5vw;
    }



    .dropdown-menu-m {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        position: relative;
    }

    .dropdown-menu-m ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .dropdown-menu-m li{
        border-top: 1px solid rgba(0,0,0,0.1);
        padding: 2.6rem 0;
        margin: 0 2rem;
    }

    .dropdown-menu-item-m{
        text-decoration: none;
        color: #666;
        font-size: 1.4rem;
        
    }

    
    .dropdown-m.open .dropdown-menu-m {
        opacity: 1;
        max-height: 1000px !important;
    }


    .dropdown-arrow-m{
        width: 0.95rem;
        height: auto;
    }

    .dropdown-m.open .dropdown-arrow-m{
        transform: rotate(180deg);
    }

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

    .service-links-m{
        background-color: #F3F3F3;
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        padding: 1.9rem 5vw;
        justify-content: center;
    }

    .service-link-unity-m{
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .service-link-unity-m img{
        width: auto;
        height: 1.5rem;
    }

    .service-link-m{
        font-size: 1.2rem;
        text-decoration: none;
        color: #666;
        text-wrap: nowrap;

    }

    /* MP section */
    
    .hero-swiper {
        margin-top: 5.5rem !important;
        width: 100%;
        height: auto;
        position: relative;
    }

    .hero .swiper-slide img {
        position: static;
    }

    .hero-content {
        align-items: center;
        color: #fff;
        padding: 3rem 2rem 4rem;
        height: 100%;
    }

    .hero-pagination .swiper-pagination-bullet {
        background: #002e6f !important;
    }

    .hero-content h1 {
        font-size: 4rem;
        line-height: 4.2rem;
        margin-bottom: 1.6rem;
        color: #fff;
    }

    .hero-content p {
        font-size: 1.4rem;
        line-height: 2.6rem;
        margin-bottom: 1.6rem;
    }

    .hero-content h2{
        font-size: 3rem;
        margin-bottom: 3.2rem;
        color: #fff;
    }

    .hero-content .disclaimer-banner{
        margin-top: 23.9rem;
        text-align: center;
        font-size: 1.2rem;
    }

    .hero-pagination{
        transform: translateY(-2rem);
    }

    .hero-content .btn.showPopupForm {
        border: 1px solid #00193a;
    }

    .hero-content .btn.alt {
        background: #00193a;
        color: #fff;
    }

    .btn-group-1{
        gap: 0.958rem;
    }

    .btn{
        width: 19.5rem !important;
        padding: 1.6rem 0;
        font-size: 1.4rem;
        text-wrap: nowrap;
    }

    .hero-btn{
        display: none;
    }

    .models-trucks-mp{
        padding: 3.9rem 0 15.4rem;
    }

    .head-tabs h2{
        font-size: 2.4rem;
    }

    .tabbtn{
        font-size: 1.4rem;
        padding: 0.5rem 0rem;
    }

    .gridmodels{
        grid-template-columns: repeat(2, 1fr)!important;
        gap: 4.6rem 5.4rem !important;
    }

    .truck-model-card{
        width: 17.5rem;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
    }

    .truck-model-card img{
        width: 100%;
        height: auto;
    }

    .porter{
        width: 100% !important;
        height: auto !important;
    }

    .porter-1{
        width: 100% !important;
        height: auto !important;
    }

    .porter-bus{
        width: 100% !important;
        height: auto !important;
    }

    .desc-model h3{
        font-size: 2rem;
    }

    .desc-model span{
        font-size: 1.4rem;
    }

    .more-details-link{
        font-size: 1.2rem;
        margin: 0;
    }

    .view-all-btn{
        display: none;
    }


    .view-all-btn-m{
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 100%;
        border-radius: 3rem 3rem 3rem 0;
        margin: 0 auto;
        left: 0;
    }

    .grid-sections-mp{
        height: 178rem;
        max-width: none !important;
    }

    .grid-section-service{
        max-width: 44rem;
        margin: 0 auto;
        padding: 0;
    }

    .grid-sections-mp::before{
        top: 122rem
    }

    .grid-section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-service-mp{
        height: 34.7rem;
    }

    .card-desc{
        margin: auto auto 3.8rem;
        text-align: center;
    }

    .card-desc h3{
        font-size: 2.4rem;
    }

    .card-desc p{
        display: none;
    }

    .service-btn-mp{
        margin-top: 1rem;
    }

    .service-btn-mp-alt{
        margin-top: 1rem;
    }

    .dealers{
        max-width: 44rem;
        padding: 5.9rem 0;
    }

    .dealers h3{
        font-size: 2.4rem;
    }

    .dealers p{
        display: none;
    }

    .news{
        max-width: none !important;
        padding: 5.9rem 0;
    }

    .swiper-container-outer{
        display: none;
    }

    .news-cards-mobile{
        display: flex;
        flex-direction: column;
        padding: 0 2rem;
    }

    .news-cards-mobile h2{
        color: #000;
    }
    
    .news-card-mobile{
        width: 100%;
        height: auto;
    }

    .news-content{
        gap: 1.5rem;
    }

    .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: 1.4rem;
        width: 100%;
    }


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

    .news-header{
        margin-bottom: 4.5vw;
        flex-direction: column;
        gap: 1rem;
    }

    .news-header h1{
        font-size: 2.4rem;
    }

    .more-news-mp{
        margin: 0;
        font-size: 1.4rem;
    }

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

    .news-card-mobile{
        width: 100%;
        height: auto;
        border-top: 1px solid rgba(0, 0, 0, 0.15);

    }
    .date-news-mp{
        font-size: 1.2rem;
        color: #666;
        margin: 0;
    }

    /* Hero-nav-service & Nav-service */
    .hero-nav-service{
        width: 100%;
        margin-top: 5.5rem;
        max-width: none !important;
        height: 30rem;
        padding: 13rem 0 10rem;
    }
    .nav-service{
        margin: 0 auto;
    }

    .text-with-divider-h{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .text-with-divider-h span{
        color: #fff;
        font-size: 1.4rem;
    }

    .nav-service h1{
        color: #fff;
        font-size: 3rem;
        margin: 0;
        padding: 0;
        text-align: center;
    
    }

    /* Service_1 page styles */
    .hero-nav-service_1{
        background-position: -30rem;
    }

    .sub-hero-service_1-bg{
        background-color: #F3F3F3;
    }

    .subhero-content{
        flex-direction: column;
        align-items: start;
        padding: 4.7rem 0 5.9rem;
        gap: 2rem;
    }

    .subhero-content h2{
        font-size: 1.8rem;
        margin: 0;
        padding: 0;
    }

    .subhero-subcontent{
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        width: 100%;
    }

    .subhero-subcontent span{
        line-height: 2.6rem;
        color: #333333;
    }

    .service-content{
        display: flex;
        flex-direction: column;
        gap: 7rem;
        padding: 5rem 0 7rem;
    }

    .service-card, .service-card:nth-child(even) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

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

    .service-card-text{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-width: 62.2rem;
        width: 100%;
    }

    .service-card-text h3{
        font-size: 1.8rem;
        margin: 0;
        padding: 0;
    }

    .service-card-text p{
        color: #333333;
    }

    .service-card-btn{
        padding: 1.7rem 7rem;
        border: 1px solid #333333;
        width:100% !important;
        font-family: "HyndaiSans-Medium", sans-serif;
        margin-top: 1.5rem;
    }

    /* Service_2 page styles */
    .hero-nav-service_2{
        background-size: 240%;
        background-position: -50rem;
    }


    .sub-hero-service_2-bg{
        background-color: #F3F3F3;
    }

    .service-2-hero-img{
        width: 114.2rem !important;
        height: 30rem;
        transform: translateX(-33rem);
    }

    .image-service_2{
        max-width: none !important;
        height: 30rem;

    }

    .list-point-service_2{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.4rem;
        padding: 8rem 0 4rem 0;
    }

    .point-header-service_2{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background-color: #fff;
        padding: 1.4rem 2.6rem;
    }

    .point-title-service_2{
        font-size: 1.6rem;
        color: #333333;
        align-self: start;
        text-wrap: wrap;
    }

    .guarantee-head{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .guarantee-arrow{
        margin-left: auto;
    }

    .guarantee{
        align-self: start;
        font-size: 1.2rem;
        color: #333333;
    }

    .dropdown-arrow-dark{
        width: 1.4rem;
        height: 0.9rem;
    }

    .point-content-service_2{
        display: none;
        flex-direction: column;
        gap: 2vw;
        position: relative;
        background-color: rgba(255, 255, 255, 0.5);
        width: 100%;
        padding: 3rem 2.6rem 4.1rem;
    }

    .point-content-service_2 span{
        line-height: 2.2rem;
        color: #333333;
    }
    .point-content-service_2.open{
        display: flex;
    }

    .list-run{
        display: flex;
        flex-direction: column;
        gap: 1.9rem;
    }

    .list-run h3{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 1.4rem;
        color: #666666;
    }

    .run-items{
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        margin-left: 2.4rem;
    }

    .run-items li{
        position: relative;
        font-size: 1.4rem;
        color: #333333;
    }

    .run-items li::before{
        content: "";
        position: absolute;
        top: 0.8rem;
        left: -2rem;
        font-size: 2rem;
        width: 0.4rem;
        height: 0.4rem;
        background-color: #00AAD2;
        border-radius: 50%;
    }

    .head-tabs-s2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 4.6rem;
    }

    .guarantee-warranty-bg{
        background-color: #F3F3F3;
    }
    .guarantee-warranty{
        padding: 0rem;
    }

    .tabs-btn-group-service_2{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.7rem 0rem;
    }

    .s2-tabbtn {
        width: 22rem;
        color: #666666;
        background: transparent;
        padding: 1rem 2rem;
        font-size: 1.4rem;
        gap: 1rem;
    }

    .s2-tabbtn.active-2 {
        border-bottom: 3px solid #009DC5;
        color: #009DC5;
    }

    .tab-icon{
        width: 4.8rem;
        height: 4.8rem;
        fill:#666666;
        transition: fill 0.3s ease;
    }

    .s2-tabbtn.active-2 .tab-icon{
        fill:#009DC5 !important;
    }
    .guarantee-warranty .points-items-service{
        display: none;
    }
    .guarantee-warranty .points-items-service.active-2{
        display: block;
    }
    .block{
        padding-top: 0;
    }

    .manual-book-bg{
        position: relative;
        background-image: url(../img/manual-book-bg.jpg);
        background-repeat: no-repeat;
        background-size: 48.1rem 25.9rem;
        background-position: bottom;
        background-color: #F3F3F3;
    }

    .manual-book-bg::before{
        content: "";
        position: absolute !important;
        top: 17rem;
        left: 0;
        width: 100%;
        height: 20rem;
        background: linear-gradient(
            to bottom,
            rgba(243,243,243,1),
            rgba(243,243,243,0)
        );
    }

    .manual-book{
        width: 100%;
    }

    .manual-book-content{
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0 25.6rem 0;
        gap: 5.155rem;
        z-index: 10;
    }

    .manual-book-title{
        font-size: 1.4rem;
        color: #000;
        line-height: 2.6rem;
        text-align: center;
    }

    .manual-book-btn{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 1.8rem 4.9rem;
        width: 30rem !important;
        background-color: transparent;
        border: 1px solid #333333
    }

    .manual-book-btn a{
        font-size: 1.4rem;
        font-family: HyndaiSans-Regular, sans-serif;
    }

    /* Service_3 section */
    .hero-nav-service_3{
        background-image: url(../img/service-stuff-m.jpg);
    }


    .subhero-description-service_3{
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 4rem 0rem 5rem;
    }

    .sub-hero-desc{
        text-align: center;
        width: 100%;
        line-height: 2.2rem;
        color: #333333;
    }

    .service_3-calculator{
        max-width: none;
        display: flex;
        flex-direction: column;
    }

    .calculator-service-bg{
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        background-color: #F3F3F3;
        max-width: 109.8rem;
    }

    .calculator-service {
        width: 100%;
        max-width: 75rem;
        margin: 0 auto;
    }

    .calculator-service{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 10.6rem 0 0rem;
    }



    .calculator-head{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .calculator-h1{
        font-size: 2.4rem;
    }

    .remove-all{
        display: none;
    }

    .grid-calculator{
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .model-cto,
    .class-cto,
    .city-cto,
    .dealer-cto{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .cto-head{
        font-family: HyndaiSans-Regular, sans-serif;
        font-weight: 400;
        font-size: 1.4rem;
    }

    .cto-dropdown-label{
        font-family: HyndaiSans-Regular, sans-serif;
        font-weight: 400;
    }

    .cto-dropdown {
        position: relative;
        width: 100%;
    }

    .cto-dropdown-btn {
        font-size: 1.4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        width: 100%;
        padding: 1rem 2.4rem;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        background: #f3f3f3;
        cursor: pointer;
        z-index: 2;
    }



    .cto-dropdown-arrow {
        width: 1rem;
    }


    .cto-dropdown-item {
        position: relative;
        z-index: 10;
        padding: 1rem;
        cursor: pointer;
        font-size: 1.4rem;
    }

    .cto-dropdown-item:hover {
    background: #eee;
    }

    .dealer-cto a{
        color:#333333;
        font-size: 1.2rem;
        margin-top: 0.5rem;
    }

    /* Slider CSS */

    .service_3-slider{
        margin-top: 4rem;
    }
    .reglament{
        color: #333333;
        margin-bottom: 1rem;
    }

    .slider-wrapper {
        width: 100%;
        margin-top: 2rem;
    }

    .cto-slider {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .slider-labels .active {
        font-weight: 700;
        color: #333333;
    }


    .slider-labels span {
        text-align: center;
    }


    .slider-info {
        text-align: center;
        margin-top: 12px;
        font-size: 14px;
    }

    .year-km{
        margin-top: 4.7rem;
    }

    .overall-cto-bg{
        background-color: transparent;
    }

    .overall-cto{
        max-width: none;
        margin: 0 auto;
        padding: 8.9rem 0 10.6rem;
        background-color: transparent;
    }

    .overall-cto img{
        background-color: #D9D9D9;
        padding: 3.5rem 6.4rem;
    }

    .overall{
        display: flex;
        flex-direction: column;
        gap: 4.4rem;
    }

    .overall-subsections{
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .subsection-cto{
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    .category-cto{
        color: #333333;
        text-wrap: nowrap;
    }

    .underline-divider{
        width: 65%;
        border-bottom: 0.5px dashed #333333;
    }

    .price{
        color: #333333;
        text-wrap: nowrap;
    }

    .overall-price{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.3rem;
    }

    .itogo{
        font-size: 2.4rem;
        color: #333333;
    }

    .itogo-price{
        font-size: 2.4rem;
        color: #333333;
        text-wrap: nowrap;
    }

    .overall-cto-btn{
        width: 100% !important;
        color: #fff;
        background-color: #003B70;
        font-size: 1.6rem;
        padding: 1.6rem 0;
    }



    /* End-description */
    .end-description-service_3{
        display: flex;
        width: 100%;
        max-width: none !important;
        margin: 0;
        padding: 4rem 2rem;
    }


    .end-description-service_3 li{
        width: 100%;
        font-size: 1.2rem;
        line-height: 2.2rem;
        color: #333333;
    }

    .end-description-service_3 li::marker{
        padding-right: 1rem;
    }

    /* Service_4 section */
    .hero-nav-service_4{
        background-image: url(../img/parts-service-4-m.jpg);
    }

    .nav-service_4{
        padding: 0 2rem;
    }

    .subhero-description-service_4-bg{
        max-width: none;
        width: 100%;
        background-color: #F4F4F4;
    }

    .subhero-nav{
        padding: 5.8rem 0 4.2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .head-subhero{
        width: 100%;
        max-width: none;
        font-size: 1.4rem;
    }

    .long-desc{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }


    .original-parts-service_4{
        display: flex;
        flex-direction: column;
        gap: 5rem;
        padding: 9.7rem 0 10.3rem;
        align-items: center;
    }

    .head-original-parts{
        font-size: 1.8rem;
        line-height: 100%;
        text-align: center;
    }

    .text h3 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .original-parts-cards{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2.2rem;
    }

    .op-card{
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 3.8rem;
        padding: 3.3rem 2.5rem 2.6rem;
    }

    .op-icon{
        height: 4rem;
        width: auto;
    }

    .op-card-desc{
        text-align: start;
        color: #333;
    }

    .caution-block{
        width: 100%;
        max-width: 113rem;
        display: flex;
        flex-direction: row;
        gap: 2.1rem;
        align-items: start;
    }

    .caution-icon{
        height: 2.3rem;
        width: auto;
    }

    .divider-s4{
        display: none;
    }

    .caution-desc{
        font-size: 1.2rem;
        color: #333;
        border-left: 1px solid #333;
        padding-left: 2.1rem;
    }

    .parts-photo-cards{
        max-width: 100% !important;
        display: flex;
        flex-direction: row;
        height: 18rem;
        max-width: none;
        margin: 0;
    }

    .original-parts-img, .bootleg-parts-img{
        width: 100%;
    }

    .original-parts-img img, .bootleg-parts{
        object-fit: cover;
        height: 18.075rem;
    }



    .bootleg-parts-img{
        position: relative;
    }

    .not-permited{
        width: 11.183rem !important;
        height: 11.183rem !important;
        position: absolute;
        top: 3.45rem;
        left: 6.4rem;
    }

    /* Service_5 section */

    .hero-nav-service_5{
        background-image: url(../img/service-5-bg-m.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: auto;
        padding: 14rem 2rem 15rem;
    }

    .nav-service_5 h1{
        font-size: 2.4rem;
        text-align: center;
    }

    .sub-nav-points{
        width: 44.1rem;
        gap: 1rem;
        margin-top: 4.4rem;
    }

    .sub-nav-points span{
        font-family: "HyndaiSans-Medium",sans-serif;
        font-weight: 500;
        font-size: 1.4rem; 
        line-height: 100%;
        color: #fff;
        width: auto;
    }

    .sub-nav-points span:first-child{
        width: 15rem;
    }

    .divider-s5{
        height: 4.3rem;
        border-left: 1px solid rgba(255, 255, 255, 0.45);
    }

    .promotion{
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .promotion img{
        width: 6rem;
        height: auto;
    }

    .line-of-parts-service_5{
        display: flex;
        flex-direction: column;
        gap: 2.6rem;
        padding: 4.7rem 0 4rem;
        align-items: center;
    }

    .head-line-of-parts{
        font-size: 1.8rem;
        text-align: center;
    }

    .line-of-parts-cards{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .lop-card{
        flex-direction: row;
        align-items: center;
        gap: 2.2rem;
        padding: 2rem 2.7rem 2rem 2.5rem;
    }

    .lop-icon{
        height: 4rem;
        width: auto;
    }

    .lop-card-desc{
        font-size: 1.4rem;
        text-align: start;
    }

    .pl2-contents{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pl2-content{
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding: 5rem 0;
    }

    .pl2-card, .pl2-card:nth-child(even) {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }


    .pl2-point{
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #00AAD2;
        color: #00AAD2;
        font-size: 1.4rem;
        background-color: transparent;
        margin-bottom: 0;
    }

    .pl2-point-head{
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

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

    .pl2-card-text{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.1rem;
        max-width: 62.2rem;
    }

    .pl2-card-text h3{
        font-size: 1.8rem;
        margin: 0;
        padding: 0;
    }

    .pl2-card-text p{
        color: #666;
        text-align: center;
    }

    .characteristics-m{
        width: 100%;
        border-collapse: collapse;
    }

    .pl2-parts-mobile{
        display: block;
        margin-bottom: 5.5rem;
    }

    .pl2-parts{
        display: none;
    }

    .head-characteristics{
        background-color: #003B70;
        color: #fff;
        
    }

    .head-characteristics th{
        font-size: 2rem;
        padding: 1.6rem 2.3rem;
        border: 1px solid rgba(255,255,255,0.25);
    }

    .name-h-th{
        text-align: left;
    }

    .k-number-th{
        width: 38.3rem;
    }

    .price-th{
        width: 26.1rem;
    }

    .row-charactheristics-table{
        color: #333333;
    }

    .row-charactheristics-table td{
        border: 1px solid #D9D9D9;
        padding: 1.6rem 2.3rem;
        font-size: 1.6rem;
        align-self: flex-start;
    }

    .number-td, .k-number-td, .price-td{
        text-align: center;
    }

    .number-td{
        padding-bottom: 3.8rem !important; 
    }

    .disclaimer-s5{
        font-size: 1.4rem;
        margin-bottom: 5.4rem;
    }

    .name-td{
        font-size: 1.6rem;
        color: #333
    }
    .meta{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .meta span{
        font-size: 1.2rem;
        color: #666;
    }

    .divider-table-m{
        height: 1.2rem;
        width: 0;
        border-left: 1px solid #666;
    }

    /* Instructions section */
    .hero-nav-instructions{
        background-image: url(../img/instructions-bg-m.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 5.5rem;
        padding: 8.7rem 0rem 9.3rem;
    }

    .download-instructions{
        font-family: "HyndaiSan-Regular", sans-serif;
        width: 30rem !important;
        padding: 1.3rem 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.4rem;
        margin-top: 1.6rem;
    }

    .download-instructions img{
        width: 1.4rem;
        height: auto;
    }

    .instructions-models-bg{
        background-color: #F4F4F4;
    }

    .instructions-models{
        padding: 3.9rem 0 5.8rem;
    }

    .instructions-gridmodels{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .intsructions-model-card{
        width: 21.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        align-items: center;
        background-color: #fff;
        padding: 2.5rem 2rem 3.4rem;
    }

    .intsructions-model-card h3{
        font-size: 1.4rem;
        text-align: center;
    }

    .download-manual{
        font-family: HyndaiSans-Regular, sans-serif;
        margin-top: auto;
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1.2rem;
        background-color: #003B70;
        color: #fff;
    }

    .inst-desc-model{
        display: flex;
        flex-direction: column;
        margin-top: auto;
        gap: 2.3rem;
    }

    .download-manual img{
        width: 1.6rem;
        height: 1.7rem;
    }

    .porter-i{
        width: 15rem;
        height: auto;
    }

    .porter-1-i{
        width: 15rem;
        height: auto;
    }

    .porter-bus-i{
        width: 15rem;
        height: auto;
    }

    /* News section */
    .today-news{
        padding: 5rem 0 5.7rem;
    }

    .today-news-card{
        display: flex;
        flex-direction: column;
        gap: 3.4rem;
        background-color: transparent;
    }

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

    .today-news-card-desc{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 0 auto;
        padding: 0;
    }

    .tn-card-head{
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: #333;
    }

    .tn-card-desc{
        font-size: 1.4rem;
        line-height: 2rem;
        color: #666;
    }

    .tn-card-date{
        margin-top: 0;
        color: #666;
    }

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

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

    .grid-news-cards{
        display: flex;
        flex-direction: column;
        gap: 5rem 2rem;
    }

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

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

    .news-card-n h2{
        font-size: 1.8rem;
        line-height: 2.4rem;
        margin-top: 0.9rem;
    }


    .pagination-news-bg{
        background-color: #F4F4F4;
    }

    .pagination-news{
        padding: 2.2rem 0;
    }

    .pagination-news-catalog{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6.7rem;
    }

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



    .page-number{
        font-weight: 400;
        font-size: 2rem;
        color: #003B70;
        background-color: transparent;
        border: none;
        width: auto;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
    }

    .page-number.more{
        text-decoration: none !important;
    }

    .prev-page, .next-page{
        width: 3.7rem;
        height: 3.7rem;
    }

    .prev-page img, .next-page img{
        width: auto;
        height: 1.233rem;
    }

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

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

    /* News-inside section */
    .mobile-news-inside-hero{
        display: none;
    }

    .hero-news-inside-bg{
        background-color: #003B70;
    }
    .hero-news-inside{
        margin-top: 5.5rem;
        max-width: 100.6rem;
        padding: 5.5rem 0 5.8rem;
    }

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

    .text-with-divider-h{
        font-size: 1.4rem;
        gap: 0.5vw;
        color: #9F9FA0;
    }

    .heading-hero-news{
        margin: 0;
        margin-bottom: 2.1rem;
        margin-top: 0.5rem;
        text-align: center;
    }

    .heading-hero-news span{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 2.4rem;
        line-height: 100%;
        
    }

    .date-share-news-inside{
        font-family: "HyndaiSans-Medium", sans-serif;
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 3rem 0rem;
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .date-news-inside{
        font-size: 1.4rem;
        margin: 0;
    }

    .share{
        display: flex;
        flex-direction: row;
        gap: 2.5rem;
        font-size: 1.4rem;
    }

    .share span{
        display: none;
    }
    .desktop-news-inside-hero{
        width: 100%;
        height: auto;
    }

    .subhero-news-inside-bg{
        background-color: #F4F4F4;
    }

    .subhero-news-inside{
        max-width: 100.6rem;
        padding: 6.4rem 0 7.4rem;
    }

    .subhero-news-inside-desc{
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        font-size: 2rem;
        line-height: 2.8rem;
        color: #666;
    }

    .subhero-ni-desc-strong{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-weight: 500;
    }

    .article{
        display: flex;
        flex-direction: column;
        gap: 4.1rem;
        max-width: none;
        margin: 0 auto;
        padding: 5rem 0 7.95rem;
        color: #333;
    }

    .container-news-inside{
        display: flex;
        flex-direction: column;
        gap: 4.1rem;
        max-width: 100.6rem;
        margin: 0 auto;
    }

    .sub-article-1{
        max-width: 100.6rem;
        padding: 3.4rem 2.5rem 4.3rem;
        margin: 0 auto;
        border: 1px solid #00AAD2;
        border-left: 6px solid #00AAD2;
    }

    .sub-article-1 p{
        font-family: "HyndaiSans-Medium", sans-serif;
        color: #00AAD2;
        font-size: 1.8rem;
        line-height: 2.6rem;
    }
    .news-article-slider{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }


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

    .pagination-news-inside{
        display: flex !important;
        justify-content: center;
        margin: 3.1rem auto 0;
        gap: 2.5rem;
    }

    .swiper-pagination-bullet{
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #003B70;
        gap: 2.2vw;
    }

    .swiper-pagination-bullet-active{
        width: 5.5rem;
        height: 0.5rem;
        border-radius: 1.5rem;
        background-color: #003B70 !important;
    }

    .quote{
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
        width: 100%;
        padding: 4.1rem 3.5rem 4.4rem;
        border: 1px solid #00AAD2;
        border-left: 6px solid #00AAD2;
    }

    .quote-1{
        font-family: "HyndaiSans-Medium", sans-serif;
        color: #00AAD2;
        font-size: 1.8rem;
        line-height: 2.6rem;
    }

    .author{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2.329rem;
    }

    .author-image-group{
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 0.9rem;
    }

    .author-pic{
        width: 4.6rem;
        height: 4.6rem;
        border-radius: 50%;
        object-fit: cover;
    }

    .dots{
        width: 1.973rem;
        height: 1.9rem;
    }

    .author-info{
        display: flex;
        flex-direction: column;
        color: #00AAD2;
    }

    .name{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-weight: 500;
    }

    .occupation{
        font-size: 1.4rem;
    }

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

    .list-article span{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 1.8rem;
        line-height: 2.8rem;
        margin: 0;
    }

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

    .list-component-news li{
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
    }

    .list-component-news li::before{
        content: "";
        position: absolute;
        top: 0.5rem;
        left: 0;
        width: 0.4rem;
        height: 0.4rem;
        background-color: #00AAD2;
    }

    .ordered-list-article{
        display: flex;
        flex-direction: column;
        gap: 1.9rem;
    }

    .ordered-list-article span{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 1.8rem;
        line-height: 2.8rem;
        margin: 0;
        
    }

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

    }

    .o-list-component-news li{
        font-size: 1.4rem;
        display: flex;
        flex-direction: row;
        counter-increment: my-counter;
        position: relative;
        padding-left: 4rem;
        margin-bottom: 1.5rem;
    }

    .o-list-component-news li::before{
        content: counter(my-counter);
        position: absolute;
        font-size: 1.2rem;
        left: 0vw;
        top: -0.1vw;
        width: 2.1rem;
        height: 2.1rem;
        border: 2px solid #00AAD2;
        background-color: transparent;
        font-weight: 700;
        color:#00AAD2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .alt-date-share-ni{
        border-top: 1px solid #333333;
        color: #333;
    }

    .news-ni-bg{
        background-color: #F4F4F4;
    }

    .news-ni{
        display: flex;
        flex-direction: column;
        gap: 4.5rem;
        padding: 7.1rem 0 6.6rem;
    }

    .news-header-ni{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .news-header-ni span{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-size: 3rem;
        color: #333;
    }

    /* Leasing section */
    .subhero-nav-leasing{
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
        padding: 3.8rem 0 5.9rem;
    }

    .strong-subhero-leasing{
        font-family: "HyndaiSans-Medium", sans-serif;
        font-weight: 500;
    }

    .leasing-dealers{
        padding: 7.1rem 0 7.5rem;
    }

    .leasing-dealers-cards{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 5rem;
    }

    .leasing-dealers-card{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        width: 100%;
        padding: 3.6rem 5.5rem 2.7rem;
        border: 1px solid rgba(51, 51, 51, 0.15);
        border-radius: 0.5rem;
    }

    .my-car-finance-logo{
        width: 19.774rem;
        height: auto;
    }

    .ld-astana-motors-logo{
        width: 16.333rem;
        height: auto;
    }

    .foundation-industry-logo{
        width: 17.683rem;
        height: auto;
    }

    .leasing-dealers-card h2{
        margin-top: 1rem;
        width: 100%;
        font-size: 1.4rem;
        padding: 1.4rem 0;
        text-align: center;
        border-top: 1px solid rgba(51, 51, 51, 0.15);
        border-bottom: 1px solid rgba(51, 51, 51, 0.15);
    }

    .head-astana-motors-ld{
        border-top: 1px solid rgba(0, 170, 210, 0.15) !important;
        border-bottom: 1px solid rgba(0, 170, 210, 0.15) !important;
    }

    .bid{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0.8rem;
        text-wrap: nowrap;
    }

    .underline-divider-ls{
        width: 100%;
        border-bottom: 1px dashed #333;
        margin-top: 1.2rem;
    }

    .bid span{
        color: #666;
    }

    .bid h3{
        font-size: 1.4rem;
        color: #333;
    }

    .individual{
        display: none;
    }

    .percentage-ls-m{
        display: block;
    }

    .term{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0.8rem;
        text-wrap: nowrap;
    }

    .term span{
        color: #666;
    }

    .term h3{
        font-size: 1.4rem;
        color: #333;
    }

    .down-payment{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-bottom: 1.6rem;
    }

    .mobile-v-card{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-wrap: nowrap;
    }

    .down-payment span{
        color: #666;
    }

    .down-payment h3{
        font-size: 1.4rem;
        color: #333;
    }

    .desc-down-payment{
        font-size: 1.2rem;
    }

    .leasing-dealer-btn{
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "HyndaiSans-Medium", sans-serif;
        color: #333;
        background-color: transparent;
        font-size: 1.6rem;
        padding: 1.5rem 0;
        text-decoration: none;
        border: 1px solid #333;
        text-wrap: nowrap;
    }

    .phone-ld{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.4rem;
        margin-top: 1.1rem;
    }

    .phone-ld img{
        width: 2rem;
        height: auto;
    }

    .phone-ld span{
        font-family: "HyndaiSans-Medium", sans-serif;
        color: #00AAD2;
    }

    .leasing-forms-bg{
        background-image: url(../img/leasing-form-bg-m.png);
        background-color: #F6F6F6;
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
        height: 107.6rem;
    }

    .leasing-forms{
        padding: 9.9rem 0 10.8rem;
        
    }

    .mobile-la-ls{
        display: block;
        font-size: 2.4rem;
    }

    .desktop-la-ls{
        display: none;
    }

    .leasing-form {
        background-color: transparent;
        margin: auto;
        display: flex;
        flex-direction: column;
    }

    .form-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.8rem;
        padding: 0;
        background-color: transparent;
        width: 100%;
        padding-bottom: 2.9rem;
    }


    .form-left img {
        display: none;
    }

    .form-right {
        width: 100%;
        padding: 0;
        background-color: transparent;
    }

    .form-right h2 {
        font-size: 4rem;
        margin-bottom: 4.8rem;
        color: #333333;
    }

    .grid-form-right{
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .form-group-right{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .form-group-right label{
        font-size: 1.6rem;
    }

    .form-group-left{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .form-group-left label{
        font-size: 1.6rem;
    }
    .model-selection{
        background-color: transparent;
        padding: 1.6rem 2.4rem;
        font-size: 1.4rem;
        border-radius: 4px;
    }
    .model-selection option{
        font-size: 1.6rem;
        border: 1px solid #ccc;
    }

    .radio-group {
        display: flex;
        gap: 3.3rem;
        margin-top: 0.6rem;
    }

    .radio-group label{
        display: flex;
        align-items: center;
        gap: 1.8rem;
        text-align: center;
    }

    .custom-radio {
        appearance: none;
        -webkit-appearance: none;
        width: 1.8rem;
        height: 1.8rem;
        background-color: #D9D9D9;
        border-radius: 50%;
        margin-right: 8px;
        position: relative;
        cursor: pointer;
    }

    .custom-radio:checked::before {
        content: "";
        width: 1rem;
        height: 1rem;
        border: 0.6rem solid #003B70;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    .form-group-right input,.form-group-right select {
        width: 100%;
        padding: 1.6rem 2.9rem;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 1.4rem;
    }

    .checkbox-submit{
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        gap: 3rem;
        margin-top: 3.5rem;
    }

    .checkbox {
        font-size: 1.4rem;
    }

    .checkbox label {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        color: #333;
    }

    .custom-checkbox {
        appearance: none;
        /* -webkit-appearance: none; */
        width: 2.2rem;
        height: 2.2rem;
        border: 2px solid #003B70;
        accent-color: #003b70;
        background-color: transparent;
        cursor: pointer;
        position: relative;
    }

    .custom-checkbox:checked {
    background: #003B70;
    }

    /* .custom-checkbox:checked::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        top: 0.4rem;
        width: 0.4rem;
        height: 0.7rem;
        border: 2px solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    } */

    .btn-forms-leasing {
        width: 100% !important;
        background: #003B70;
        color: #fff;
        border: none;
        padding: 2.5rem 12.7rem;
        cursor: pointer;
        font-size: 1.6rem;
        font-family: HyndaiSans-Regular, sans-serif;
    }

    .btn-forms-leasing:hover {
        background: #002e6f;
    }

    /* Dealers section */
    .hero-nav-dealers{
        background-image: url(../img/dealers-bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: auto;
        padding: 5.4rem 2rem;
    }

    .nav-dealers h1{
        font-size: 1.8rem;
    }

    .contact-info-map{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        max-width: none !important;
        margin: 0;
    }

    .sidebar{
        width: 100%;
        padding: 4.9rem 0 6.8rem;
        position: relative;
    }

    .city-select{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 2rem;
        margin-bottom: 3.2rem;
    }

    .city-select select {
        width: 100%;
        padding: 1.6rem 2.9rem;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 1.4rem;
    }

    .city-select::after {
        right: 4.6rem;
        top: 28%;
    }

    .available-dealers{
        font-size: 1.2rem;
        color: #666;
    }
    .swiper-sidebar-dl {
        height: 100%;
    }

    .swiper-wrapper-dl {
        display: flex;
        flex-direction: column;
    }

    .swiper-slide-dl {
        width: 100%;
    }

    .dealer-item-dl {
        width: 100%;
        padding: 0 2rem;
    }

    .dealer-header-dl {
        font-size: 1.4rem;
        font-weight: 600;
        padding: 2.3rem 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.1)
    }

    .dealer-header-dl .arrow-dl {
        width: 1rem;
        height: 1rem;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg);
        transition: transform 0.3s;
    }

    .dealer-item-dl.active-dl .arrow-dl {
        transform: rotate(225deg);
    }

    .dealer-body-dl {
        display: none;
        font-size: 0.8vw;
        color: rgba(0,0,0,0.7);
        padding: 1rem 0 2.8rem;
    }

    .dealer-body-dl p {
        text-wrap: nowrap;
        color: #666;
    }

    .dealer-item-dl.active-dl .dealer-body-dl {
        display: block;
    }

    .dealer-item-dl.active-dl .dealer-header-dl {
        padding-top: 4.9rem;
    }

    .dealer-item-dl.active-dl{
        background-color: #F4F4F4;
    }

    .dealer-label {
        display: inline-block;
        font-family: "HyndaiSans-Medium", sans-serif;
        background: #00a3d9;
        color: #fff;
        font-size: 1.2rem;
        padding: 0.2rem 0.7rem;
        margin-bottom: 1vw;
    }

    .dealer-actions {
        display: flex;
        justify-content: center;
        gap: 0.6vw;
        margin-top: 1.2vw;
    }

    .dealer-actions button {
        width: 21.353rem;
        padding: 1.2rem 0;
        border: 1px solid #003B70;
        background: #fff;
        font-size: 1.4rem;
        cursor: pointer;
    }

    .dealer-actions button:first-child {
        background: #003B70;
        color: #fff;
    }

    #map-container{
        width: 100%;
        height: 40rem;
        overflow: hidden;
    }


    /* About section */
    .hero-nav-about{
        padding: 12.3rem 0;
    }

    .subhero-nav-about  .head-subhero{
        font-size: 1.8rem;
    }


    .head-about-vehicle{
        font-size: 1.8rem;
        text-align: center;
    }
    
    .about-vehicle{
        padding: 4.2rem 0 6.5rem;
    }

    .about-vehicle-cards{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2.2rem;
    }

    .av-card{
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 3.2rem;
        padding: 2.9rem 2.5rem 2.2rem;
        align-items: start;
    }

    .av-icon{
        width: 5rem;
        height: auto;
    }

    .av-card-desc-group{
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .av-card-desc{
        font-family: "HyndaiSans-Medium", sans-serif;
        text-align: start;
        color: #000;
    }

    .av-card-subdesc{
        font-family: HyndaiSans-Regular, sans-serif;
        color: #666;
        font-size: 1.2rem;
        line-height: 1.6rem;
        text-align: start;
    }

    .caution-block-about{
        display: flex;
    }


    .about-image-manufacturer{
        background-image: url(../img/manufacturer.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 30rem;
    }

    .about-cut-bg{
        background-color: #003B70;
    }

    .about-cut{
        height: 98.4rem;
        position: relative;
    }

    .circle-cut{
        position: absolute;
        width: 44rem;
        height: 44rem;
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.4rem;
        padding: 12.4rem 7.2rem 12.4rem;
        color: #fff;
    }

    .n-1{
        top: 6.6rem;
        left: 0rem;
        z-index: 2;
    }

    .n-2{
        top: 43.8rem;
        right: 0rem;
        background-color: rgba(0, 35, 66, 0.25);
        border: none;
        z-index: 1;
    }

    .circle-cut h2{
        font-size: 6rem;
        padding: 0;
        padding: 0 3.2rem 0.6rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    }

    .circle-cut span{
        text-align: center;
    }

    .about-description{
        padding: 7.9rem 0 8.2rem;
        max-width: 100.6rem;
        margin: 0 auto;
        color: #666;
        display: flex;
        flex-direction: column;
        gap: 4.1rem;
    }

    .about-image-manufacturer-2{
        background-image: url(../img/manufacturer-2.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 30rem;
    }
    
    /* Model section */
    .model-hero-bg{
        background-image: url(../img/model-hero-bg-m.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 5.5rem;
        position: relative;
        height: 80rem;
    }

    .model-hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(to bottom, rgb(0 0 0 / 28%) 0%, rgb(19 19 19 / 0%) 60%, rgba(0, 59, 112, 0.0) 100%);
   
    }

    .model-hero-bg section {
        position: relative;
        z-index: 1;
    }

    .hero-content-model{
        display: flex;
        flex-direction: column;
        padding: 10.2rem 0 9.5rem;
        color: #fff;
        align-items: center;
        text-align: center;
    }

    .model-head-desc{
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        width: 100%;
        margin-bottom: 3.5rem;
    }

    .model-head-desc h1{
        font-size: 4rem;
    }

    .model-head-desc p{
        width: 100%;
        font-size: 1.8rem;
        line-height: 100%;
        margin-top: 0;
    }

    .model-head-desc h2{
        font-size: 3rem;
        margin-top: 1rem;
    }

    .disclaimer-model{
        align-self: self-start;
        text-align: start;
        margin-top: 38.5rem;
        width: 45%;
        font-size: 1.4rem;
    }

    .model-btn{
        width: 23.5rem !important;
    }

    .guarantee-model{
        /* position: absolute; */
        margin-left: auto;
        margin-right: auto;
        top: 70.7rem;
    }

    .guarantee-icon-frame{
        background-color: #00AAD2;
        padding: 1.1rem 1.479rem;
    }

    .guarantee-icon{
        width: 3.021rem;
        height: auto;
    }

    .guarantee-model-desc{
        color: #00AAD2;
        padding: 1.34rem 2.169rem 1.146rem 2.413rem;
        height: auto;
    }

    .head-guarantee-desc{
        font-size: 2rem;
    }

    .subhead-guarantee-desc{
        font-size: 1rem;
    }

    .nav-information-bg{
        background-color: #003B70;
    }

    .nav-information{
        padding: 2rem 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }

    .point-nav-information{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.1rem;
        width: 8.9rem;
        cursor: pointer;
    }

    .point-nav-information h2{
        font-size: 1.2rem;
    }

    .point-nav-information-icon{
        width: 1.717rem;
        height: auto;
    }

    .request-icon{
        width: 2.33rem;
    }

    .divider-model{
        height: 6.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .peculiarities-bg{
        background-color: #fff;
    }

    .peculiarities{
        padding: 3.2rem 0 4rem;
        gap: 2.5rem;
    }

    .peculiarities-cards{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .peculiarities-card{
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid rgba(51, 51, 51, 0.15);
        padding: 2.3rem 2.6rem;
        text-align: start;
        width: 100%;
        height: auto;
        gap: 3.5rem;
    }

    .peculiarities-card img{
        height: 3.5rem;
        width: auto;
    }

    .peculiarities-card span{
        margin-top: 0;
        color: #333;
    }

    .engine-icon{
        height: 3.3rem;
    }

    .capacity-icon{
        height: 3rem;
    }

    .porter-carpenter-bg{
        background-image: url(../img/model-porter-2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 21.8rem;
    }

    .benefits-model-bg{
        background-color: #fff;
    }

    .benefits-model{
        padding: 4.7rem 0;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .page-porter .variant-model-points {
        max-width: 100%;
        gap: 2.5rem;
        align-items: normal;
    }

    .model-benefit-card, .model-benefit-card:nth-child(even){
        display: flex;
        flex-direction: column;
        width: 100%;
    }


    .image-benefit-model{
        background-color: #E7E4DF;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .engine-1{
        width: 100%;
    }

    .model-benefit-card-text{
        padding: 5.1rem 3.6rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        background-color: #F3F3F3;
    }

    .model-benefit-card-text h3{
        font-size: 1.8rem;
        line-height: 100%;
    }


    .specification-bg{
        background-color: #F3F3F3;
        overflow: scroll;
    }

    .specification{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.7rem;
        padding: 6.5rem 0 6.7rem;
    }

    .specification-head{
        font-size: 2.4rem;
        color: #333;
    }

    .spec-table {
        width: 100%;
        margin: auto;
        border-collapse: collapse;
        background: #fff;
    }

    .spec-table th {
        background: #E4EEF7;
        padding: 2.5rem 2.4rem;
        text-align: left;
        font-size: 1.6rem;
    }

    .table-head-alt{
        width: 15.7rem;
        text-align: center !important;
        padding: 2.2rem 0 !important;
    }

    .spec-table td {
        border: 1px solid #e6e6e6;
        padding: 1.8rem 2.4rem;
        font-size: 1.4rem;
        vertical-align: middle;
        color: #666;
    }

    .narrow-column{
        width: 36.5rem;
        padding-right: 0 !important;
    }

    .numeric-value{
        vertical-align: top !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }

    .spec-table td:last-child {
        text-align: right;
        white-space: nowrap;
    }

    .group td:first-child {
        background: #fff;
    }

    .sub-label {
        padding-left: 3.2rem !important;
        color: #666;
    }

    .variation-model-bg{
        background-color: #003B70;
    }

    .variation-model{
        color: #fff;
        padding: 4.7rem 0 5.5rem;
        display: flex;
        flex-direction: column;
        gap: 5.2rem;
        align-items: center;
    }

    .variation-model h1{
        font-size: 2.4rem;
    }

    .variant-model-points{
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: row;
        justify-content: none;
        gap: 2.5rem;
        align-items: center;
        row-gap: 4.5rem;
    }


    .text_block {
        position: static;
        padding: 4rem 2rem;
        max-width: 100%;
    }

    .title-sm {
        font-size: 2rem;
    }
    

    .variant-model-point{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.7rem;
        min-width: revert;
        text-align: center;
    }

    .variant-model-point span{
        font-size: 1.4rem;
    }

    .divider-model-2{
        display: none;
    }

    .isometric{
        height: 4.4rem;
        width: auto;
    }

    .industrial{
        height: 4.1rem;
        width: auto;
    }

    .boarded{
        margin-top: 0.5rem;
        height: 3.7rem;
        width: auto;
    }

    .equipment-options-bg{
        background-image: url(../img/equipment-option-bg-m.jpg);
        height: 30rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .equipment-options-bg h2{
        font-size: 2.4rem;
        color: #fff;
    }

    .options-advantages-bg{
        background-color: #F3F3F3;
        padding: 4rem 0 5rem;
    }


    .options-advantages-bg+.pc-calculator-bg {
        padding-top: 0;
        padding-bottom: 4rem;
    }

    .options-advantages{
        padding: 4rem 0 5rem;
    }

    .grid-options-advantages{
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .card-option-advantage{
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

    .card-option-advantage img{
        width: 100%;
        height: auto;
    }

    .advantage-desc, .bg-light .advantage-desc, .grid-4 .advantage-desc{
        padding: 3.436rem 3.5rem 4rem 2.655rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .advantage-desc h2{
        font-size: 1.8rem;
        line-height: 100%;
    }

    .advantage-desc span{
        color: #666;
    }

    .design-model-bg{
        background-color: #1F1E21;
        background-image: url(../img/hyndai-porter-grid-bg.jpg);
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        /* height: 103rem; */
        height: 90rem;
    }

    .design-model-bg::before{
        content: "";
        position: absolute !important;
        /* top: 76.5rem; */
        top: 63.9rem;
        left: 0;
        width: 100%;
        height: 12.6rem;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            rgba(#1F1E21),
            rgba(255,255,255,0)
        );
    }

    .page-ex8 .design-model-bg::before {
        top: 70.4rem;
    }

    .page-ex10 .design-model-bg::before {
        top: 75.5rem;
    }

    .design-model{
        position: relative;
        z-index: 4;
        padding: 5.5rem 0 ;
    }

    .design{
        display: flex;
        flex-direction: column;
    }

    .head-tab-design{
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-bottom: 5.2rem;
    }

    .tabs-btn-group-model{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .tab-btn-model{
        padding: 1.7rem 7.3rem;
        background-color: #fff;
        border: none;
        color: #333333;
        font-size: 1.6rem;
    }

    .tab-btn-model.active-7{
        background-color: #003B70;
        color: #fff;
    }

    .head-tab-design h2{
        font-size: 2.4rem;
    }
    .design-grid{
        display: none;
    }

    .design-grid.active-7 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .design-model .design .design-grid-pc {
        display: none;
    }

    .design-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .views-truck-model{
        width: 100% !important;
        object-fit: contain !important;
    }

    .views-truck-model-alt{
        width: 100% !important;
        object-fit: contain !important;
    }

    .design-swiper img {
        width: 100%;
        border-radius: 4px;
    }

    .technical-characteristics{
        margin-top: 7.5rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 2.7rem;
        color: #fff;
    }

    .design-grid, .design-grid.active-7{
        /* display: none; */
    }

    .design-grid-m {
        display: none;
    }

    .design-grid-m.active-7 {
        display: block;
    }

    .grid-model-slide {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .grid-model-slide img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        background: #fff;
    }

    .mobile-design-model {
        display: flex;
        justify-content: center;
        /* transform: translateY(4rem); */
        bottom: 3rem !important;
        z-index: 3;
        position: static;
        margin-top: 4rem;
    }

    .mobile-design-model .swiper-pagination-bullet {
        width: 0.5rem !important;
        height: 0.5rem !important;
        background: rgba(255, 255, 255, 1) !important;
        margin: 0 0.6rem !important;
        border-radius: 50% !important;
    }

    .mobile-design-model .swiper-pagination-bullet-active {
        width: 5.5rem !important;
        background: #fff !important;
        border-radius: 0.15rem !important;
    }

    .technical-characteristics h2{
        font-size: 2.4rem;
    }

    .manual-book-model-btn{
        display: flex;
        flex-direction: row;
        padding: 1.8rem 3.7rem;
        width: 30rem !important;
        background-color: #fff;
        border: none;
    }

    .manual-book-model-btn a{
        font-family: HyndaiSans-Regular, sans-serif;
        display: flex;
        flex-direction: row;
        gap: 1.7rem;
        font-size: 1.4rem;
        text-decoration: none;
        color: #333333;
        text-wrap: nowrap;
    }
}

@media (min-width: 801px) {
    .mobile-menu{
        display: none !important;
    }
}

/* ============================================================
   Simple header dropdown (about / buy / service nav items)
   ============================================================ */
.navigation-dropdowns .dropdown-point {
    position: relative;
}

.navigation-dropdowns .model-dropdown {
    position: static;
}

.navigation-dropdowns .about-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 22rem;
    padding-top: 1rem;
    display: none;
    z-index: 4000;
    background: transparent;
}
.navigation-dropdowns .about-menu ul {
    list-style: none;
    margin: 0;
    padding: 1.6rem 0;
    background: #ffffff;
    /* box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12); */
    border-radius: 0.8rem;
}
.navigation-dropdowns .about-menu li {
    list-style: none;
}
.navigation-dropdowns .about-menu .dropdown-menu-item {
    display: block;
    padding: 1rem 2.4rem;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.5rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.navigation-dropdowns .about-menu .dropdown-menu-item:hover {
    background: #f5f7f9;
    color: #002c5f;
}
.navigation-dropdowns .dropdown-point:hover .about-menu,
.navigation-dropdowns .dropdown-point.open .about-menu,
.navigation-dropdowns .dropdown.open .about-menu {
    display: block;
}
.navigation-dropdowns .dropdown-point:hover .dropdown-arrow,
.navigation-dropdowns .dropdown-point.open .dropdown-arrow,
.navigation-dropdowns .dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}
.navigation-dropdowns .dropdown-arrow {
    transition: transform .2s ease;
}


.noscroll {
    overflow: hidden;
}

#popup.popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .6);
    overflow-y: auto;
    padding: 4rem 2rem;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popup .popup-content {
    position: relative;
    max-width: 52rem;
    width: 100%;
    margin: auto;
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25);
}

#popup .wrapper {
    padding: 4rem;
}

#popup .popup-header {
    margin-bottom: 2.5rem;
    padding-right: 4rem;
}

#popup .popup-title {
    font-size: 2.6rem;
    font-weight: 600;
    color: #002c5f;
    line-height: 1.2;
}

#popup .popup-header .text-xl {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #555;
}

#popup .popup-btn-close {
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}

#popup .popup-btn-close::before,
#popup .popup-btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #002c5f;
}

#popup .popup-btn-close::before { transform: rotate(45deg); }
#popup .popup-btn-close::after  { transform: rotate(-45deg); }

#popup .form-row {
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
}

#popup .form-row label {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: .6rem;
}

#popup .input-field,
#popup select.input-field {
    width: 100%;
    padding: 1.3rem 1.5rem;
    font-size: 1.5rem;
    border: 1px solid #ccced3;
    border-radius: .4rem;
    background: #fff;
    color: #000;
    outline: none;
    transition: border-color .2s ease;
}

#popup .input-field:focus {
    border-color: #002c5f;
}

#popup textarea.input-field {
    min-height: 9rem;
    resize: vertical;
}

#popup .form-row .errorMessage,
#popup .errorMessage {
    color: #d0021b;
    font-size: 1.3rem;
    margin-top: .5rem;
}

#popup .input-field.error {
    border-color: #d0021b;
}

#popup .form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 1.8rem 0;
}

#popup .form-checkbox-row label {
    font-size: 1.3rem;
    color: #777;
    line-height: 1.4;
}

#popup .form-checkbox-row input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

#popup .btn.button-black {
    width: 100%;
    padding: 1.6rem;
    background: #002c5f;
    color: #fff;
    border: none;
    border-radius: .4rem;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background .2s ease;
}

#popup .btn.button-black:hover {
    background: #00193a;
}

#popup .btn.loading {
    opacity: .6;
    pointer-events: none;
}

#popup .form_result {
    font-size: 1.6rem;
    color: #002c5f;
    text-align: center;
}

#popup .form_result.whitespace {
    margin: 2rem 0;
}

#popup .file-input-wrapper {
    position: relative;
}

#popup .file-input-wrapper .file-input {
    position: absolute;
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
}

#popup .file-input-label {
    display: inline-block;
    padding: 1.2rem 1.5rem;
    border: 1px dashed #ccced3;
    border-radius: .4rem;
    font-size: 1.4rem;
    color: #555;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

@media (max-width: 800px) {
    #popup .wrapper { padding: 3rem 2.2rem; }
    #popup .popup-title { font-size: 3.2rem; }
}


.form-section {
    padding: 6rem 0 8rem 0;
}

.form-section .wrapper {
    max-width: 64rem;
    margin: 0 auto;
}

.form-section-title {
    font-size: 3.2rem;
    font-weight: 600;
    color: #002c5f;
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-section-text {
    font-size: 1.6rem;
    color: #555;
    margin-bottom: 3rem;
}

.form-section .bid-modal {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: .8rem;
    padding: 4rem;
}

.form-section .form-row {
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
}

.form-section .form-row label {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: .6rem;
}

.form-section .input-field,
.form-section select.input-field,
.form-section select {
    width: 100%;
    padding: 1.3rem 1.5rem;
    font-size: 1.5rem;
    border: 1px solid #ccced3;
    border-radius: .4rem;
    background: #fff;
    color: #000;
    outline: none;
    transition: border-color .2s ease;
}

.form-section .input-field:focus,
.form-section select:focus {
    border-color: #002c5f;
}

.form-section textarea.input-field {
    min-height: 9rem;
    resize: vertical;
}

.form-section .errorMessage {
    color: #d0021b;
    font-size: 1.3rem;
    margin-top: .5rem;
}

.form-section .input-field.error {
    border-color: #d0021b;
}

.form-section .form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 1.8rem 0;
}

.form-section .form-checkbox-row label {
    font-size: 1.3rem;
    color: #777;
    line-height: 1.4;
}

.form-section .form-checkbox-row input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.form-section .btn,
.form-section .btn__black {
    width: 100%;
    padding: 1.6rem;
    background: #002c5f;
    color: #fff;
    border: none;
    border-radius: .4rem;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background .2s ease;
}

.form-section .btn:hover,
.form-section .btn__black:hover {
    background: #00193a;
}

.form-section .btn.loading {
    opacity: .6;
    pointer-events: none;
}

@media (max-width: 800px) {
    .form-section .bid-modal { padding: 3rem 2.2rem; }
    .form-section-title { font-size: 4rem; }
}