:root {
    font-family: "Source Sans 3", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    letter-spacing: 0;
}

*, div {
    box-sizing: border-box;
    letter-spacing: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    background-color: #0D0E0E;
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
body,
main {
    width: 100%;
    height: 100%;
    max-width: 100%;
}

body {
    height: auto;
}

section {
    height: 100vh;
    position: relative;
}

section:first-of-type {
    height: 100vh;
}

@media screen and (max-width: 1919px) {
    section:first-of-type {
        height: auto;
    }
}

.video-container {
    height: 100vh;
    width: 100%;
    padding-top: 98px;
}

@media screen and (max-width: 1920px) {
    .video-container {
        height: auto;
        margin-bottom: -4px;
    }
}

.video-container video {
    height: auto;
}

section .container {
    height: 100vh;
}

section.contact-section {
    height: 100%;
}

section.vehicle-carousel-section {
    height: 100%;
    position: relative;
}

.contact-section-successfull {
    width: 100%;
    height: 100vh;
    display: none;
}

.contact-section-successfull-container {
    width: 55%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0 66px;
    background-color: transparent;
    color: #fff;
}

.contact-section-successfull h2 {
    font-size: 66px;
    line-height: 120%;
    text-align: center;
    font-family: 'Michroma', serif;
    font-weight: 500;
    color: #fff;
}

.contact-section-successfull p {
    font-size: 25px;
    line-height: 140%;
    color: #fff;
    margin-bottom: 128px;
    text-align: center;
}

.contact-section-successfull a {
    font-size: 21px;
    line-height: 140%;
    text-transform: uppercase;
    color: #fff;
    border-radius: 12px;
    padding: 16px 48px;
    border: 1px solid #67B0C4;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.contact-section-successfull a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #67B0C4;
    transition: width 0.4s ease-in-out;
    z-index: -1;
}

.contact-section-successfull a:hover::before {
    width: 100%;
}



/* HEADER */

.header {
    height: 98px;
    padding: 0 66px;
    background-color: #0D0E0E;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    top: 0; /* Fixed at the top of the viewport */
    left: 0;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    transform: translateY(0); /* Start off-screen */
    transition: transform 0.3s ease-in-out; /* Smooth scroll-based transition */
}

@media screen and (max-width: 1800px) {
    .header {
        padding: 0 66px;
    }
}

@media screen and (max-width: 1600px) {
    .header {
        padding: 0 64px;
    }
}

@media screen and (max-width: 1500px) {
    .header {
        padding: 0 32px;
    }
}

.header .navigation-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.header .navigation-content-container {
    position: absolute;
    background-color: #0D0E0E;
    width: 100%;
    height: 312px;
    box-sizing: border-box;
    top: 98px;
    left: 0;
    background-color: #0D0E0E;
    color: #fff;
    z-index: 99;
    align-items: center;
    justify-content: center;
}

.floated-menu-container {
    color: #fff;
    font-size: 21px;
    line-height: 140%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 50%;
    right: 96px;
    transform: translateY(-50%);
    z-index: 1;
    gap: 0;
    max-width: 54px;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 60px;
    opacity: 0;
    border-radius: 12px;
    animation: openFloatedMenu 1s ease-in-out forwards;
}

@keyframes openFloatedMenu {
    0% {
        opacity: 0;
        transform: translateX(200%) translateY(-50%);
    }
    50% {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
        max-height: 60px;
    }
    100% {
        max-height: 100%;
        opacity: 1;
    }
}

.floated-menu-container:hover {
    max-width: 260px;
}

.floated-menu-item {
    padding: 16px 16px;
    text-decoration: none;
    background-color: #67B0C4;
    color: #fff;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    cursor: pointer;
    transition: padding 0.3s ease;
    line-height: 1em;
}

.floated-menu-container:hover .floated-menu-item {
    padding: 16px 24px;
}

.floated-menu-item:hover {
    background-color: #4A8E9D;
    padding: 16px 24px;
}

.floated-menu-item:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.floated-menu-item:last-of-type {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.floated-menu-icon {
    transform: translateY(2.5px);
}

.vehicles-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.navigation-content-container {
    display: none; /* Initially hidden */
}
.navigation-content-container.active {
    display: flex; /* Shown when active */
}


.vehicle-item {
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.vehicle-item img {
    display: block;
    width: 100%;
    max-width: 300px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.vehicle-item:hover img {
    transform: scale(1.1); /* Slight zoom and rotation */
    filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.3)); 
}

.vehicle-title {
    font-size: 16px;
    line-height: 140%;
    font-weight: 700;
    text-transform: uppercase;
}

.header .navigation-container nav, .header .navigation-container nav ul, .header .navigation-container nav ul li, .header .navigation-container nav ul li a {
    height: auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 100%;
}

.header .navigation-container nav {
    height: 100%;
}

@media screen and (max-width: 1400px) {
    .header .navigation-container nav {
        height: auto;
    }
}

.header nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    text-transform: uppercase;
}

.header nav ul li a {
    color: #FFF;
    font-size: 21px;
    line-height: 140%;
    height: 98px;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.header nav ul li a span:nth-of-type(2) {
    display: none;
}


.header nav ul li:hover div.navigation-content-container {
    display: flex;
}

.header nav ul li a:hover, .header nav ul li a.active {
    color: #67B0C4;
    border-bottom: 2px solid #67B0C4;
}

.header .header-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.header .header-cta-container a {
    color: #FFF;
    font-size: 16px;
    line-height: 140%;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    transition: color 0.3s ease, border 0.3s ease;
    white-space: nowrap;
    border: 2px solid #fff;
    padding: 16px;
    border-radius: 12px;
    text-transform: uppercase;
}

.header .header-cta-wrapper:hover a {
    color: #67B0C4;
    border: 2px solid #67B0C4;
}

.header-cta-icon {
    transform: translateY(2px);
}

.header-cta-icon svg path {
    transition: fill 0.3s ease;
}

.header .header-cta-wrapper:hover .header-cta-icon svg path {
    fill: #67B0C4;
}

.hamburger-container {
    display: none;
}

.header .header-open-icon {
    display: block;
    cursor: pointer;
}

.header.mobile-menu-open header-open-icon {
    display: none;
}

.header .header-close-icon {
    display: none;
    cursor: pointer;
}

.header.mobile-menu-open header-close-icon {
    display: block;
}

.mobile-floating-menu-container {
    display: none;
}

.mobile-floating-menu-container ul li {
    background-color: #67B0C4;
    width: 100%;
    height: auto;
    margin-bottom: 1px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.mobile-floating-menu-container ul li:hover {
    background-color: #4A8E9D;
}

.mobile-floating-menu-container ul li a {
    font-size: 21px;
    line-height: 140%;
    padding: 20px 24px;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.mobile-floating-menu-container ul li a span:first-of-type {
    transform: translateY(1px);
    display: inline-block;
    text-align: center;
    width: 24px;
    height: 24px;
}

.hero-slider, .news-container, .news-details-slider {
    color: black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.hero-slider .slick-dots {
    bottom: 60px;
}

.news-container .slick-dots {
    bottom: 0;
}

.news-details-slider .slick-dots {
    bottom: 5px;
}

.news-details-video-slider .slick-dots {
    bottom: 0px;
}

.vehicle-model-carousel .slick-dots {
    bottom: 60px;
}

.video-slider-container .slick-dots {
    bottom: 0px;
}

.hero-slider .slick-dots li, .news-container .slick-dots li, .news-details-slider .slick-dots li, .model-slider .slick-dots li, .news-details-video-slider .slick-dots li, .vehicle-model-carousel .slick-dots li, .video-slider-container .slick-dots li {
    width: 40px;
    height: 6px;
    opacity: 0;
    animation: slideDots 0.5s ease-in-out forwards;
}

/* Keyframes for the sliding animation */
@keyframes slideDots {
    0% {
        transform: translateX(2000%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Add delay for each dot */
.hero-slider .slick-dots li:nth-child(1), .news-container .slick-dots li:nth-child(1), .news-details-slider .slick-dots li:nth-child(1), .model-slider .slick-dots li:nth-child(1), .news-details-video-slider .slick-dots li:nth-child(1), .model-slider .slick-dots li:nth-child(1), .vehicle-model-carousel .slick-dots li:nth-child(1), .video-slider-container .slick-dots li:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-slider .slick-dots li:nth-child(2), .news-container .slick-dots li:nth-child(2), .news-details-slider .slick-dots li:nth-child(2), .model-slider .slick-dots li:nth-child(2), .news-details-video-slider .slick-dots li:nth-child(2), .model-slider .slick-dots li:nth-child(2), .vehicle-model-carousel .slick-dots li:nth-child(2), .video-slider-container .slick-dots li:nth-child(2) {
    animation-delay: 0.3s;
}

.hero-slider .slick-dots li:nth-child(3), .news-container .slick-dots li:nth-child(3), .news-details-slider .slick-dots li:nth-child(3), .model-slider .slick-dots li:nth-child(3), .news-details-video-slider .slick-dots li:nth-child(3), .model-slider .slick-dots li:nth-child(3), .vehicle-model-carousel .slick-dots li:nth-child(3), .video-slider-container .slick-dots li:nth-child(3) {
    animation-delay: 0.5s;
}

.hero-slider .slick-dots li:nth-child(4), .news-container .slick-dots li:nth-child(4), .news-details-slider .slick-dots li:nth-child(4), .model-slider .slick-dots li:nth-child(4), .news-details-video-slider .slick-dots li:nth-child(4), .model-slider .slick-dots li:nth-child(4), .vehicle-model-carousel .slick-dots li:nth-child(4), .video-slider-container .slick-dots li:nth-child(4) {
    animation-delay: 0.7s;
}

.hero-slider .slick-dots li button, .news-container .slick-dots li button, .news-details-slider .slick-dots li button, .model-slider .slick-dots li button, .news-details-video-slider .slick-dots li button, .model-slider .slick-dots li button, .vehicle-model-carousel .slick-dots li button, .video-slider-container .slick-dots li button {
    width: 40px;
    height: 6px;
}

.hero-slider .slick-dots li button::before, .news-container .slick-dots li button::before, .news-details-slider .slick-dots li button::before, .news-details-slider .slick-dots li.slick-active button::before, .news-details-slider .slick-dots li button:hover::before, .model-slider .slick-dots li button::before, .model-slider .slick-dots li.slick-active button::before, .model-slider .slick-dots li button:hover::before, .news-details-video-slider .slick-dots li button::before, .news-details-video-slider .slick-dots li.slick-active button::before, .news-details-video-slider .slick-dots li button:hover::before, .vehicle-model-carousel .slick-dots li button::before, .vehicle-model-carousel .slick-dots li.slick-active button::before, .vehicle-model-carousel .slick-dots li button:hover::before, .video-slider-container .slick-dots li button::before, .video-slider-container .slick-dots li.slick-active button::before, .video-slider-container .slick-dots li button:hover::before {
    color: transparent;
    opacity: 1;
    width: 40px;
    height: 6px;
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%226%22%20viewBox%3D%220%200%2040%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%204L3.5%200H40V1.5L36%206H0V4Z%22%20fill%3D%22%2367B0C4%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.news-details-slider .slick-dots li button::before, .news-details-video-slider .slick-dots li button::before {
    background-image: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjYiIHZpZXdCb3g9IjAgMCA0MCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCA0TDMuNSAwSDQwVjEuNUwzNiA2SDBWNFoiIGZpbGw9IiNEMUQzRDUiLz4KPC9zdmc+Cg==');
}


.hero-slider .slick-dots li button:hover::before, .hero-slider .slick-dots li.slick-active button::before, .news-container .slick-dots li button:hover::before, .news-container .slick-dots li.slick-active button::before, .model-slider .slick-dots li button:hover::before, .model-slider .slick-dots li.slick-active button::before, .vehicle-model-carousel .slick-dots li button:hover::before, .vehicle-model-carousel .slick-dots li.slick-active button::before, .video-slider-container .slick-dots li button:hover::before, .video-slider-container .slick-dots li.slick-active button::before {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%226%22%20viewBox%3D%220%200%2040%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%204L3.5%200H40V1.5L36%206H0V4Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E');
}

.hero-slider-item {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--hero-lg-background-image);
}

@media screen and (max-width: 1000px) {
    .hero-slider-item {
        background-image: var(--hero-sm-background-image);
    }
}

.hero-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 150px;
}



.hero-text-container h2 {
    font-size: 66px;
    line-height: 120%;
    color: #fff;
    font-weight: 500;
    font-family: 'Michroma', serif;
    text-transform: none;
    margin-bottom: 16px;
    opacity: 0;
    animation: slideHeroText 0.7s ease-in-out forwards;
    animation-delay: 0.7s;
}

.hero-text-container span.description {
    font-size: 32px;
    line-height: 120%;
    color: #67B0C4;
    margin-bottom: 370px;
    opacity: 0;
    animation: slideHeroText 0.7s ease-in-out forwards;
    animation-delay: 1s;
}

/* Keyframes for the sliding animation */
@keyframes slideHeroText {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-slider .find-out-more {
    position: absolute;
    bottom: 140px;
}

.find-out-more {
    position: relative; /* To allow background animation */
    padding: 16px 48px;
    background: linear-gradient(to right, #67B0C4 0%, #67B0C4 0%, #67B0C4 100%);
    border: 2px solid #67B0C4;
    color: #fff;
    font-size: 21px;
    line-height: 140%;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
    opacity: 0;
    animation: slideHeroButton 0.7s ease-in-out forwards;
    animation-delay: 1.5s;
    background-size: 0% 100%; /* Start with no visible background */
    background-repeat: no-repeat; /* Prevent repeat */
    transition: background-size 0.5s ease; /* Smooth animation */
    z-index: 0;
    overflow: hidden; /* Ensure rounded corners are respected */
}

.find-out-more:hover {
    background-size: 100% 100%; /* Fill the entire button on hover */
}

/* Keyframes for the sliding animation */
@keyframes slideHeroButton {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.horizontal_scroll {
    position: absolute;
    top: 0;
    height: 100%;
    will-change: transform;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1000px) {
    .horizontal_scroll {
        -webkit-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
    }
    .scroll_contents {
        -webkit-scroll-snap-align: start;
        scroll-snap-align: start;
    }
}



.scroll_contents {
    height: 100%;
    width: 100vw;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: 
    linear-gradient(rgba(0, 0, 0, var(--scroll-content-bg-overlay)), rgba(0, 0, 0, var(--scroll-content-bg-overlay))),
    var(--scroll-content-lg-background-image);
}
  

@media screen and (max-width: 1000px) {
    .scroll_contents {
        background-image: 
        linear-gradient(rgba(0, 0, 0, var(--scroll-content-bg-overlay)), rgba(0, 0, 0, var(--scroll-content-bg-overlay))),
        var(--scroll-content-sm-background-image);
    }
}

@media screen and (max-width:1919px) {
    .horizontal_scroll {
        flex-direction: column;
        width: 100vw;
        height: auto;
        position: relative;
    }
    div.sticky_wrap {
        height: auto;
    }
    .scroll_contents {
        width: 100%;
        height: auto;
        aspect-ratio: 1920/1080;
    }
    .scroll_contents.separate-content {
        height: auto;
    }
}

.skip-container {
    position: fixed;
    bottom: 48px;
    right: 48px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents interaction when hidden */
    z-index: 4;
}
.skip-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.skip-container button {
    background-color: #67B0C4;
    border-radius: 12px;
    padding: 12px 32px;
    outline: none;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.skip-container button:hover {
    background-color: #4A8E9D;
}

@media screen and (max-width: 1919px) {
    .skip-container {
        display: none;
    }
}

.separate-content {
    background-size: cover;
    background-image: var(--separate-content-lg-background-image);
    aspect-ratio: 1920/925;
}

@media screen and (max-width: 1000px) {
    .separate-content {
        background-image: var(--separate-content-sm-background-image);
    }
}

.sticky_wrap {
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
}

.red {
    background-color: #0D0E0E;
    position: relative;
}

.yellow {
    background-color: #0D0E0E;
}


.green {
    background-color: #0D0E0E;
}

.blue {
    background-color: #0D0E0E;
}

.left {
    margin-top: 5vh;
    margin-left: 5vw;
}

.right {
    text-align: right;
    margin-top: 85vh;
    margin-right: 5vw;
}

.text {
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Center horizontally */
    justify-content: center; /* Center vertically */
    max-width: 830px;
    width: 100%;
    padding-left: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0%;
    overflow: visible;
    height: 100%; /* Ensure container height is defined */
    padding-top: 6%;
}

.text-left {
    left: 0;
    padding-left: 180px;
}

.text-left .text-description {
    max-width: 300px;
}

@media screen and (max-width: 1840px) {
    .text-left {
        padding-left: 100px;
    }
}

@media screen and (max-width: 1530px) {
    .text-left {
        padding-left: 48px;
    }
}

.text-center {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
    max-width: 669px;
}

.text-right {
    left: auto;
    right: 0;
    padding-right: 180px;
    box-sizing: border-box;
}

@media screen and (max-width: 1560px) {
    .text-right {
        padding-right: 48px;
        max-width: 700px;
    }
}

.text.three-columns {
    left: 0;
    transform: translateX(0);
    max-width: none;
    padding: 0 180px;
}

.text.three-columns .text-title {
    width: 100%;
    text-align: center;
}

.text.three-columns .text-title h2 {
    font-size: 47px;
    line-height: 120%;
    margin-bottom: 16px;
}

.text.three-columns .text-description {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 55px;
}

.text.three-columns .text-description p {
    width: 33.33%;
    font-size: 21px;
    line-height: 140%;
    opacity: 0.75;
    color: #fff;
}

.text.three-columns ~ .cta-wrapper.cta-wrapper-center {
    bottom: 200px;
}

.cta-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
}

.scroll_contents .cta-wrapper.cta-wrapper-right {
    justify-content: flex-end;
}

.scroll_contents .cta-wrapper.cta-wrapper-left {
    justify-content: flex-start;
}

.scroll_contents .cta-wrapper.cta-wrapper-center {
    position: absolute;
    justify-content: center;
    bottom: 60px;
    left: 0;
    width: 100vw;
}


.text-title {
    margin-bottom: 32px;
}

.mobile-image {
    display: none;
}

.text-description {
    margin-bottom: 35px;
}



.half-width .text-description {
    max-width: 435px;
}

.text-title .highlighted-text {
    color: #67B0C4;
    font-size: 32px;
    line-height: 120%;
    font-family: inherit;
}

.text h2 {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
    font-family: 'Michroma', serif;
    text-transform: none;
}

.text h3 {
    font-size: 47px;
    font-family: 'Michroma', serif;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 4px;
}

.text .paragraph-container {
    margin-bottom: 104px;
}

.text p {
    font-size: 21px;
    font-weight: 400;
    line-height: 140%;
    color: #fff;
    opacity: 0.75;
    margin-bottom: 16px;
}

.text p em {
    font-style: italic;
}

.text ul li {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
    margin-bottom: 8px;
    padding: 8px;
    padding-left: 24px;
    position: relative; /* For positioning the pseudo-element */
    list-style: none; /* Remove default bullet points */
}

.text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    width: 14px;
    height: 15px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" fill="none"><path d="M7.00016 14.1667C3.31826 14.1667 0.333496 11.1819 0.333496 7.50004C0.333496 3.81814 3.31826 0.833374 7.00016 0.833374C10.682 0.833374 13.6668 3.81814 13.6668 7.50004C13.6668 11.1819 10.682 14.1667 7.00016 14.1667ZM7.00016 12.8334C9.9457 12.8334 12.3335 10.4456 12.3335 7.50004C12.3335 4.55452 9.9457 2.16671 7.00016 2.16671C4.05464 2.16671 1.66683 4.55452 1.66683 7.50004C1.66683 10.4456 4.05464 12.8334 7.00016 12.8334Z" fill="white"/></svg>') no-repeat center;
    background-size: contain;
    margin-right: 8px;
}

.text .version-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    margin-top: 32px;
    margin-bottom: 48px;
}

.text .version-container .version-wrapper {
    display: flex;
    flex-direction: column;
}

.text .version-container .version-wrapper .version-title {
    font-size: 25px;
    line-height: 120%;
    color: #fff;
    font-family: 'Michroma', serif;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.text .version-container .version-wrapper .version-price {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
    font-weight: 700;
}



/** MANUALS */

.vehicle-documentation-banner-container {
    position: relative;
}

.vehicle-documentation-banner-container img {
    width: 100%;
    object-fit: cover;
    height: 100vh;
}

.vehicle-documentation-banner-container h1 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 66px;
    line-height: 120%;
    color: #fff;
    font-family: 'Michroma', sans-serif;
    width: 100%;
    text-align: center;
    padding: 0 56px;
}

.vehicle-documentation-banner-container h2 {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    line-height: 120%;
    color: #67B0C4;
    width: 100%;
    text-align: center;
    padding: 0 56px;
    text-transform: uppercase;
}

.vehicle-documentation-container {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 120px;
}

.vehicle-documentation-title h2 {
    font-size: 47px;
    line-height: 120%;
    font-family: 'Michroma', sans-serif;
    color: #fff;
    margin-bottom: 4px;
}

.vehicle-documentation-title {
    text-align: center;
    padding: 0 56px;
}

.vehicle-documentation-title span {
    color: #67B0C4;
    font-size: 32px;
    margin-bottom: 72px;
    display: inline-block;
}

.vehicle-documentation-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 56px;
    padding: 0 56px;
}

.vehicle-documentation-section {
    height: auto;
}

.vehicle-documentation {
    width: calc(50% - 28px);
}

.vehicle-documentation-image-wrapper {
    margin-bottom: 16px;
}

.vehicle-documentation-image-wrapper, .vehicle-documentation-image-wrapper img {
    width: 100%;
    object-fit: contain;
}

.vehicle-documentation-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.vehicle-documentation-card-text .main-title {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
    margin-bottom: 8px;
}

.vehicle-documentation-card-text .sub-title {
    font-size: 25px;
    line-height: 140%;
    color: #fff;
    margin-bottom: 32px;
}

.vehicle-documentation-cta a {
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #67B0C4;
    color: #fff;
    font-size: 12px;
    line-height: 140%;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;
    text-decoration: none;
    transition: opacity 0.3s ease-in-out;
}

.vehicle-documentation-cta a:hover {
    opacity: 0.7;
}

.vehicle-documentation-cta a span.icon {
    transform: translateY(1px);
}




/** NEWS - HOMEPAGE */

.news-container {
    padding-bottom: 90px;
    overflow-y: hidden;
    max-width: 1357px;
}

.news-homepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.news-homepage h3 {
    padding-top: 24px;
}

h3 {
    font-family: 'Michroma', serif;
    font-size: 47px;
    font-weight: 400;
    line-height: 120%;
    color: #fff;
    margin-bottom: 67px;
}

.news-card {
    max-width: none;
    display: flex;
    flex-direction: column;
    background-color: #0D0E0E;
    margin: 0 10px;
    overflow: hidden;
    width: 100%; /* Ensures cards take up the full width of their container */
    box-sizing: border-box;
}



.news-card .image-wrapper {
    width: 100%; /* Ensures image container takes up 100% width */
    display: block;
}

.news-card .image-wrapper img {
    display: block;
    width: 100%; /* Ensures the image takes up the full width of its container */
    height: auto; /* Keep the image's aspect ratio intact */
}

.news-card .data-wrapper {
    padding: 32px;
    background-color: #0D0E0E;
    width: 100%;
}

.news-card .date-wrapper span {
    font-size: 12px;
    line-height: 140%;
    font-weight: 700;
    color: #fff;
    opacity: 0.5;
    margin-bottom: 4px;
}

.news-card .data-wrapper a {
    text-decoration: none;
}

.news-card .data-wrapper h5 {
    font-size: 25px;
    line-height: 120%;
    font-family: 'Michroma', serif;
    color: #67B0C4;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px;
}

.news-card .description-wrapper {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
    opacity: 0.75;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limits to 6 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-card .description-wrapper h2, .news-card .description-wrapper h3, .news-card .description-wrapper h4, .news-card .description-wrapper h5, .news-card .description-wrapper h6 {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    font-family: var(--font-family);
}


.news-card .see-more-wrapper a {
    padding: 24px;
    padding: 8px 24px;
    border-radius: 6px;
    background-color: #67B0C4;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    line-height: 140%;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.news-card .see-more-wrapper a:hover {
    background-color: #4A8E9D;
}

footer .container {
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.footer-logo-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 70px;
    padding-bottom: 60px;
    gap: 44px;
}

.footer-social-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.footer-legal-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    width: 100%;
    max-width: 1560px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 144px 40px 196px;
    margin: 0 auto 75px auto;
    box-sizing: border-box;
}

.footer-legal-container h6 {
    font-size: 25px;
    line-height: 140%;
    font-weight: 700;
    color: #fff;
}

.footer-legal-wrapper {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 19px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.footer-legal-links {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 34px;
    flex-wrap: nowrap;
}

.footer-legal-links div {
    display: flex;
    flex-direction: column;
}

.footer-legal-links div a {
    font-size: 16px;
    line-height: 200%;
    color: #fff;
    opacity: 0.75;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-legal-links div a:hover, .footer-legal-links div a.active {
    opacity: 1;
}

.footer-pages-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 140px;
    margin-bottom: 90px;
}

.subpages-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.subpages-container a {
    font-size: 16px;
    line-height: 200%;
    color: #fff;
    opacity: 0.50;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.subpages-container a:hover, .subpages-container a.active {
    opacity: 1;
}

.main-page-title {
    font-size: 25px;
    line-height: 140%;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    margin-bottom: 14px;
    display: inline-block;
    transition: color 0.3s ease;
}

.main-page-title:hover, .main-page-title.active {
    color: #67B0C4;
}

.footer-notice-container {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
}

.footer-notice-container p {
    display: block;
    font-size: 12px;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.5);
}

.footer-notice-container p a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-notice-container p a:hover {
    color: #67B0C4;
}

.footer-copyright-container {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 98px;
    gap: 40px;
    width: 100%;
}

.footer-copyright-container a, .footer-copyright-container span {
    font-size: 16px;
    line-height: 140%;
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-copyright-container a:hover, .footer-copyright-container a.active {
    opacity: 1;
}

.banner-container {
    width: 100%;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-size: cover; /* Ensures the background covers the whole container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    background-image: var(--background-image-news-details);
    margin-top: 98px;
}




.banner-container h1 {
    font-size: 66px;
    line-height: 120%;
    color: #fff;
    font-weight: 400;
    font-family: 'Michroma', serif;
    text-transform: none;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}



.news-list-container {
    height: auto;
    padding: 24px 0 0 0;
    margin: 0 auto;
    background-color: #fff;
}



.news-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 1560px;
    gap: 24px;
    height: auto;
    margin: 0 auto;
}

@media screen and (min-width: 1921px) {
    .news-list {
        margin: 0 auto;
    }
}

.news-filters-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    max-width: 1560px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    width: 100%;
}


.news-filters-container span {
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 21px;
    line-height: 140%;
}

/* Wrapper to properly position the select and custom arrow */
.news-filter-wrapper {
    position: relative;
    width: 320px;
}

.model-select-wrapper {
    position: relative;
}

.model-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 24px;
}

.news-filter-wrapper select, .model-select-wrapper select {
    width: 100%;
    height: 48px;
    padding: 10px 40px 10px 16px; /* Leave space for the arrow */
    box-sizing: border-box;
    border: 1px solid #d1d3d5;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
    transition: border 0.3s ease;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    font-size: 16px;
}

/* Custom SVG arrow */
.news-filter-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 12px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6L6 0L0 6H12ZM12 12L6 18L0 12H12Z' fill='%230D0E0E'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.model-select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 12px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0092 6L6.01839 0L0.0275879 6H12.0092ZM12.0092 12L6.01839 18L0.0275879 12H12.0092Z' fill='%2367B0C4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

@media screen and (max-width: 600px) {
    .model-select-wrapper::after {
        top: 75%;
    }
}




.news-filters-container select:focus, .news-filters-container select:hover, .news-filters-container select:active {
    outline: none;
    border: 1px solid #67B0C4;
}

.model-select-wrapper select:focus, .model-select-wrapper select:hover, .model-select-wrapper select:active {
    outline: none;
    border: 1px solid #67B0C4;
}

.news-list-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 55px;
    row-gap: 112px;
    flex-wrap: wrap;
    width: 100%;
}



.news {
    width: 33.33%;
    max-width: 483px;
    min-width: 400px;
}




.news-card-image-wrapper {
    margin-bottom: 32px;
}

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

.news-date {
    font-size: 16px;
    line-height: 140%;
    color: #000;
    opacity: 0.5;
    margin-bottom: 8px;
}

.news-title h2, .news-title h2 a {
    font-size: 25px;
    line-height: 140%;
    color: #000;
    margin-bottom: 32px;
    font-family: 'Michroma', serif;
    display: -webkit-box; /* Required for multi-line truncation */
    -webkit-box-orient: vertical; /* Required for multi-line truncation */
    overflow: hidden; /* Hide overflowed text */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    text-overflow: ellipsis; /* Add ellipsis (...) */
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-title h2:hover, .news-title h2 a:hover {
    color: #67B0C4;
}



.news-cta-wrapper a {
    border-radius: 12px;
    background-color: #67B0C4;
    color: #fff;
    font-size: 16px;
    line-height: 140%;
    text-transform: uppercase;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.news-cta-wrapper a:hover {
    background-color: #4A8E9D;
}

.news-arrows-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    width: 100%;
    margin-top: 131px;
    margin-bottom: 96px;
}

.news-arrows-container a {
    background-color: #67B0C4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
    line-height: 140%;
    text-decoration: none;
    width: 46px;
    height: 46px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.news-arrows-container a.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.news-arrows-container a:hover {
    background-color: #4A8E9D;
}

.news-details-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 24px 32px 45px 32px;
}

.news-details-title-container, .news-details-description-container {
    max-width: 1560px;
    margin: 0 auto;
}

.news-details-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 37px;
    margin-bottom: 40px;
}

.news-details-title-container div {
    width: 50%;
}



.news-details-date {
    opacity: 0.5;
    font-size: 21px;
    line-height: 140%;
    margin-bottom: 16px;
}

.news-details-title h2 {
    font-size: 32px;
    line-height: 120%;
    color: #000;
    font-family: 'Michroma', serif;
}

.news-details-return-container {
    width: 100%;
    padding-bottom: 24px;
    max-width: 1560px;
    margin: 0 auto 40px auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.return-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: #fff;
    background-color: #67B0C4;
    font-size: 12px;
    line-height: 140%;
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color 0.3s ease;
    width: fit-content;
    border-radius: 6px;
}

.return-button span:last-of-type {
    transform: translateY(2px);
}

.return-button:hover {
    background-color: #4A8E9D;
}

.news-details-image-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.news-details-image-wrapper img {
    width: 100%;
    max-width: 752px;
    height: auto;
}

.news-details-description-container {
    margin-bottom: 78px;
}

/* Ensure single images remain block-level */
.news-details-description-container img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px auto; /* Centering single images */
}

.news-details-description-container .image-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
}


.news-details-description-container p, .news-details-description-container li {
    font-size: 21px;
    line-height: 140%;
    color: #000;
    opacity: 0.75;
    margin-bottom: 24px;
}

.news-details-description-container h3 {
    font-size: 25px;
    line-height: 120%;
    color: #000;
    font-family: 'Michroma', serif;
    margin-bottom: 32px;
    margin-top: 32px;
    opacity: 1;
}

.news-details-gallery-container {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    box-sizing: border-box; /* Ensures padding is included in the width */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.news-details-gallery-container.video-gallery {
    padding-bottom: 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* Flexbox for 1-2 videos, block layout for slider */
.news-details-gallery-container.video-gallery .news-details-video-slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 54px;
    padding-bottom: 48px;
    margin-bottom: 0;
    width: 100%;
    justify-content: center;
}

.news-details-gallery-container.video-gallery .news-slider-item {
    width: 100%;
    max-height: 422px;
    max-width: 752px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
}

/* Ensuring iframes are fully responsive */
.news-details-gallery-container.video-gallery .news-slider-item iframe {
    width: 100%;
    height: auto;
    min-height: 250px;
    aspect-ratio: 16 / 9;
}



@media screen and (max-width: 1000px) {
    .news-details-title-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 32px;
    }
    .news-details-container {
        padding-top: 24px;
    }
    .news-details-title-container div {
        width: 100%;
    }
    .news-details-image-wrapper {
        justify-content: center;
    }
}

.news-details-slider {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the slider items */
    margin: 0 -28px;
}

.news-slider-item {
    box-sizing: border-box;
    width: 538px; /* Fixed width for the items */
    height: 288px;
    margin: 0 28px;
}

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


/* Table Styling - Following Website Design Principles */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    margin-bottom: 32px;
    font-family: "Source Sans 3", sans-serif;
    overflow: hidden;
    border: 1px solid #d1d3d5;
}

/* Table Header */
th {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    line-height: 140%;
    font-weight: 700;
    text-transform: uppercase;
    padding: 16px 24px;
    text-align: left;
    border-right: 1px solid #D1D3D5;
    position: relative;
}

th:last-child {
    border-right: none;
}

/* Table Body Cells */
td {
    background-color: #fff;
    color: #000;
    font-size: 16px;
    line-height: 140%;
    font-weight: 400;
    padding: 16px 24px;
    border-bottom: 1px solid #d1d3d5;
    border-right: 1px solid #d1d3d5;
    transition: background-color 0.3s ease;
}

td:last-child {
    border-right: none;
}

/* Table Rows */
tr {
    transition: background-color 0.3s ease;
}

/* Hover Effects */
tbody tr:hover td {
    background-color: rgba(103, 176, 196, 0.05);
}

/* Striped Rows (Optional) */
tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.05);
}

tbody tr:nth-child(even):hover td {
    background-color: rgba(255, 255, 255, 1);
}

/* Table Links */
table a {
    color: #67B0C4;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

table a:hover {
    color: #4A8E9D;
    text-decoration: underline;
}

/* Dark Theme Table Variant */
table.dark-theme {
    background-color: #0D0E0E;
}

table.dark-theme th {
    background-color: #67B0C4;
    color: #fff;
    border-bottom: 2px solid #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

table.dark-theme td {
    background-color: #0D0E0E;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0.9;
}

table.dark-theme tbody tr:hover td {
    background-color: rgba(103, 176, 196, 0.1);
    opacity: 1;
}

table.dark-theme tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

table.dark-theme tbody tr:nth-child(even):hover td {
    background-color: rgba(103, 176, 196, 0.15);
}

table.dark-theme a {
    color: #67B0C4;
}

table.dark-theme a:hover {
    color: #fff;
}

/* Responsive Table */
@media screen and (max-width: 768px) {
    table {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    th, td {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    th {
        font-size: 13px;
    }
}

@media screen and (max-width: 600px) {
    /* Create horizontal scroll container */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    table {
        min-width: 600px; /* Minimum width to maintain table structure */
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0;
    }
    
    th, td {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap; /* Prevent text wrapping */
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    th:last-child,
    td:last-child {
        border-right: none;
    }
    
    th {
        font-size: 11px;
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* Compact Table Variant */
table.compact th,
table.compact td {
    padding: 8px 16px;
    font-size: 14px;
}

table.compact {
    margin-bottom: 24px;
}

/* Large Table Variant */
table.large th,
table.large td {
    padding: 20px 32px;
    font-size: 18px;
}

table.large th {
    font-size: 16px;
}

/* Table with Border Variant */
table.bordered {
    border: 2px solid #67B0C4;
}

table.bordered th,
table.bordered td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table.bordered.dark-theme th,
table.bordered.dark-theme td {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-page-container {
    background-color: #fff;
    box-sizing: border-box;
    padding: 32px 32px 0 32px;
}

main .generic-page-container:first-of-type {
    padding-top: 180px;
}

main .generic-page-container:last-of-type {
    padding-bottom: 180px;
}

.generic-page-container {
    background-color: #fff;
    box-sizing: border-box;
    padding: 1px 32px 0 32px;
}

.generic-page-container h1 {
    font-size: 66px;
    line-height: 120%;
    color: #000;
    font-weight: 400;
    font-family: 'Michroma', serif;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}

.generic-page-container h2 {
    font-size: 32px;
    line-height: 120%;
    color: #000;
    opacity: 0.5;
    width: 100%;
    text-align: center;
    margin-bottom: 56px;
}

.text-container {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 12px;
}

.text-container h3 {
    color: #000;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 32px;
    margin-top: 56px;
}

.text-container h4 {
    color: #000;
    font-size: 25px;
    line-height: 120%;
    margin-bottom: 24px;
}

.text-container p {
    font-size: 21px;
    line-height: 140%;
    opacity: 0.75;
    margin-bottom: 24px;
}

.text-container a {
    color: #67B0C4;
    text-decoration: underline;
    transition: text-decoration 0.3s ease;
}

.text-container ul, .text-container ol, .news-details-description-container ul, .news-details-description-container ol {
    margin-left: 25px;
    margin-bottom: 24px;
    font-size: 21px;
    line-height: 160%;
    padding-left: 25px;
}

.text-container ul ul, .news-details-description-container ul ul {
    padding-left: 0;
}

.text-container ul, .news-details-description-container ul {
    list-style: disc;
}

.text-container ul li::marker, .news-details-description-container ul li::marker {
    color: #67B0C4;
}

.text-container ol, .news-details-description-container ol {
    list-style: decimal;
}

.text-container a:hover {
    text-decoration: none;
}

@media screen and (max-width: 700px) {
    .generic-page-container h1 {
        font-size: 42px;
    }
    .generic-page-container {
        padding: 1px 32px 0 32px;
    }
    .generic-page-container h2 {
        font-size: 28px;
        margin-bottom: 32px;
    }
    .text-container h3 {
        margin-top: 32px;
        margin-bottom: 16px;
        font-size: 28px;
    }
    .text-container {
        padding-bottom: 64px;
    }
}

.contact-banner {
    width: 100%;
    height: auto;
    max-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: var(--background-image-contact);
    display: block;
    aspect-ratio: 1920/1080;
}


.contact-banner h1 {
    font-size: 66px;
    line-height: 120%;
    color: #fff;
    font-weight: 400;
    font-family: 'Michroma', serif;
    text-transform: none;
    text-align: center;
    width: 100%;
    max-width: 833px;
    margin: 0 auto;
    padding: 13% 32px 0 32px;
}

.contact-banner h2 {
    font-size: 32px;
    line-height: 120%;
    color: #67B0C4;
    font-weight: 400;
    text-align: center;
    width: 100%;
    max-width: 833px;
    margin: 0 auto;
    padding: 12px 32px 0 32px;
}

.contact-container {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.contact-banner-section {
    height: 100%;
}

.contact-banner-section.error-section h3 {
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.contact-container form, .contact-container .contact-form {
    width: 100%;
    max-width: 1303px;
    padding-top: 24px;
}

@media screen and (max-width: 1400px) {
    .contact-container form, .contact-container .contact-form {
        padding: 0 32px;
    }
}

.contact-row {
    width: 100%;
    max-width: 1303px;
}



.contact-row select {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #67B0C4;
    padding: 11px 0;
    color: #fff;
    opacity: 0.5;
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
    cursor: pointer;
    font-size: 25px;
    line-height: 140%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="18" viewBox="0 0 12 18" fill="none"><path d="M12.0099 6L6.01912 0L0.0283203 6H12.0099ZM12.0099 12L6.01912 18L0.0283203 12H12.0099Z" fill="%2367B0C4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 18px;
    padding-left: 16px;
}

.contact-row select option {
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    cursor: pointer;
    font-size: 18px;
    background-color: #0D0E0E;
}

.contact-row select:focus, .contact-row select:hover, .contact-row select:active {
    outline: none;
    border-bottom: 1px solid #67B0C4;
    background-color: rgba(255, 255, 255, 0.1);
}

.contact-row.full-width div, .contact-row.full-width {
    width: 100%;
}

.contact-row p, .contact-row ul, .contact-row ol {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
    opacity: 0.75;
}

.contact-row p em {
    font-style: italic;
}

em {
 font-style: italic;   
}

.contact-row ul, .contact-row ol {
    opacity: 1;
}

.contact-row ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
}

.grecaptcha-badge {
    display: none !important;
}

.contact-row ul li {
    position: relative;
    padding-left: 24px; /* Space for the custom bullet */
}

.contact-row ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 15px;
    background-image: url('data:image/svg+xml,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.00016 14.1654C3.31826 14.1654 0.333496 11.1806 0.333496 7.4987C0.333496 3.8168 3.31826 0.832031 7.00016 0.832031C10.682 0.832031 13.6668 3.8168 13.6668 7.4987C13.6668 11.1806 10.682 14.1654 7.00016 14.1654ZM7.00016 12.832C9.9457 12.832 12.3335 10.4442 12.3335 7.4987C12.3335 4.55318 9.9457 2.16536 7.00016 2.16536C4.05464 2.16536 1.66683 4.55318 1.66683 7.4987C1.66683 10.4442 4.05464 12.832 7.00016 12.832Z" fill="white"/></svg>'); 
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%); /* Center the icon vertically */
}


.error-section .contact-row p:last-of-type {
    font-size: 16px;
}

.contact-row p strong, .contact-row ul strong, .contact-row ol strong {
    font-weight: 700;
}

.contact-row p a, .contact-row ul a, .contact-row ol a {
    color: #67B0C4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-row p a:hover, .contact-row ul a:hover, .contact-row ol a:hover {
    color: #4A8E9D;
}

.contact-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.contact-row.checkbox-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.contact-row .contact-form-group input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border: 1px solid #67B0C4; /* Primary color */
    border-radius: 6px; /* Slightly rounded corners */
    background-color: #1A2C31;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

.contact-row .contact-form-group input[type="checkbox"]:hover {
    border-color: #357ABD; /* Darker shade on hover */
}

.contact-row .contact-form-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid #67B0C4;
    cursor: pointer;
    position: relative;
}

.contact-row .contact-form-group input[type="checkbox"]::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 2.86608C12 3.09696 11.9277 3.29321 11.7832 3.45482L6.17806 9.72322L5.12516 10.9007C4.98065 11.0623 4.80516 11.1431 4.59871 11.1431C4.39226 11.1431 4.21677 11.0623 4.07226 10.9007L3.01935 9.72322L0.216774 6.58902C0.0722581 6.42741 0 6.23116 0 6.00028C0 5.7694 0.0722581 5.57315 0.216774 5.41153L1.26968 4.23405C1.41419 4.07243 1.58968 3.99162 1.79613 3.99162C2.00258 3.99162 2.17806 4.07243 2.32258 4.23405L4.59871 6.78816L9.67742 1.09985C9.82194 0.93823 9.99742 0.857422 10.2039 0.857422C10.4103 0.857422 10.5858 0.93823 10.7303 1.09985L11.7832 2.27734C11.9277 2.43895 12 2.6352 12 2.86608Z" fill="white"/></svg>');
    background-size: cover;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.contact-row .contact-form-group input[type="checkbox"]:checked::after {
    opacity: 1;
}

.contact-row .contact-form-group.checkbox-group {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
}

.contact-row .contact-form-group .checkbox-label {
    position: static;
    cursor: pointer;
    font-size: 21px;
    line-height: 140%;
    opacity: 1;
    color: #fff;
}

.contact-row div {
    width: 50%;
}

.contact-form-group {
    position: relative;
    padding: 10px 0;
    margin-top: 10px;
    width: 50%;
}

.contact-form-group input {
    opacity: 0.5;
    transition: background-color 0.3s ease;
    padding-top: 11px;
}

.contact-form-group input[type="input"] {
    padding: 20px 0;
}

.contact-form-group input:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.form-field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #67B0C4;
    outline: 0;
    color: #fff;
    background: transparent;
    transition: border-color 0.2s;
    font-size: 25px;
}
.form-field::placeholder {
    color: transparent;
}
.form-field:placeholder-shown ~ .form-label {
    cursor: text;
    font-size: 25px;
    font-weight: 400;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

textarea.form-field:placeholder-shown ~ .form-label {
    top: 10%;
}

.contact-form-group.invalid .form-field {
    border-bottom: 1px solid #e70013;
    color: #e70013;
}

.contact-form-group.invalid .form-field option {
    color: #fff;
}

.contact-form-group.invalid .form-label {
    color: #e70013;
}

.contact-form-group.invalid .form-field:focus ~ .form-label {
    color: #e70013;
}


.form-label {
    position: absolute;
    top: -5px;
    display: block;
    transition: 0.2s;
    color: #fff;
    font-size: 16px;
    opacity: 0.5;
}
.form-field:focus {
    font-weight: 700;
}
select.form-field:focus {
    font-weight: 400;
}
.form-field:focus ~ .form-label {
    position: absolute;
    top: -10px;
    display: block;
    transition: 0.2s;
    font-size: 21px;
    left: 0;
    color: #67B0C4;
    font-weight: 400;
}

textarea.form-field:focus ~ .form-label {
    top: -10px;
}

.checkbox-group .form-field:focus ~ .form-label {
    position: static;
    font-size: 21px;
}
/* reset input */
.form-field:required, .form-field:invalid {
    box-shadow: none;
}

.contact-form-submit-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.contact-form-submit-wrapper span {
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
    color: #fff;
    opacity: 0.75;
}

.contact-form textarea {
    background-color: transparent;
    transition: background-color 0.3s ease;
    opacity: 0.75;
    font-size: 25px;
}

.contact-form textarea:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.contact-form-submit-wrapper button {
    cursor: pointer;
    padding: 16px 48px;
    background: linear-gradient(to right, #67B0C4 0%, #67B0C4 0%, #67B0C4 100%);
    border: 2px solid #67B0C4;
    color: #fff;
    font-size: 21px;
    font-weight: 400;
    line-height: 140%;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
    opacity: 0;
    animation: slideHeroButton 0.7s ease-in-out forwards;
    animation-delay: 1.5s;
    background-size: 0% 100%; /* Start with no visible background */
    background-repeat: no-repeat; /* Prevent repeat */
    transition: background-size 0.5s ease; /* Smooth animation */
    z-index: 0;
    overflow: hidden; /* Ensure rounded corners are respected */
}

.contact-form-submit-wrapper button:hover {
    background-size: 100% 100%; /* Fill the entire button on hover */
}

@media screen and (max-width: 850px) {
    div.contact-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .contact-row div {
        width: 100%;
    }
    .contact-form {
        gap: 12px;
    }
    .contact-form-submit-wrapper span {
        font-size: 16px;
    }
    .contact-form-submit-wrapper button {
        font-size: 18px;
        padding: 16px 38px;
    }
    .contact-banner-section {
        height: auto;
    }
    .contact-container {
        height: auto;
        padding-bottom: 40px;
        padding-top: 20px;
        box-sizing: content-box;
    }
}

@media screen and (max-width: 700px) {
    .contact-banner h1 {
        font-size: 42px;
    }
}

@media screen and (max-width: 620px) {
    .contact-container form, .contact-container .contact-form {
        padding: 0 8px;
    }
    .form-field:placeholder-shown ~ .form-label, .contact-row select, .form-field {
        font-size: 18px;
    }
    .contact-banner h1 {
        padding: 250px 16px 0 16px;
        font-size: 38px;
    }
}

.model-slider {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.model-slider .slick-dots {
    bottom: 60px;
}

.model-slider-item {
    height: 100vh;
    width: 100%;
    position: relative;
}

.model-slider-item .model-slider-text {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    position: absolute;
    top: 140px;
    left: auto;
}

.model-slider-item .model-slider-text.model-slider-text-right {
    right: 180px;
    align-items: flex-end;
}

.model-slider-item .model-slider-text.model-slider-text-left {
    right: auto;
    left: 180px;
    align-items: flex-start;
}

.model-slider-item .model-slider-text.light h3, .model-slider-item .model-slider-text.light p {
    color: #fff;
}

.model-slider-item .model-slider-text.dark h3, .model-slider-item .model-slider-text.dark p {
    color: #000;
}

.model-slider-item .model-slider-text-bottom-center {
    top: auto;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    align-items: center;
}



.model-slider-item .model-slider-text h3 {
    margin-bottom: 0;
    font-size: 47px;
    line-height: 120%;
    color: #000;
}

.model-slider-item .model-slider-text p {
    font-size: 25px;
    line-height: 140%;
}

.model-slider-item .model-slider-text.model-slider-text-right p {
    text-align: right;
}

.three-cards-container {
    background-color: #0D0E0E;
    padding: 114px 180px;
}

.two-cards-container {
    aspect-ratio: 1920/947;
    background-image: var(--two-cards-background-image);
    background-size: cover;
}

.two-cards-container .card {
    width: 50%;
    text-align: left;
}

.two-cards-container .card p {
    text-align: left;
}

.three-cards-container h4 {
    color: #fff;
    font-size: 47px;
    line-height: 120%;
    font-family: 'Michroma', serif;
    font-weight: 400;
    width: 100%;
    text-align: center;
    margin-bottom: 72px;
}

.cards-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 55px;
}

.nine-cards-container .cards-container {
    flex-wrap: wrap;
}

.card {
    text-align: center;
    width: 33.33%;
}

.nine-cards-container .card {
    width: calc(33.33% - 55px);
}

.card .image-wrapper {
    margin-bottom: 32px;
}

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

.card h5 {
    color: #fff;
    font-size: 25px;
    line-height: 140%;
    font-family: 'Michroma', serif;
    margin-bottom: 24px;
}

.card p {
    color: #fff;
    opacity: 0.75;
    font-size: 21px;
    line-height: 140%;
    text-align: center;
}

.three-cards-container.icon-container {
    background-color: rgba(255, 255, 255, 0.1);
}

.icon-wrapper {
    padding-top: 67px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 24px;
    gap: 56px;
    width: 100%;
    flex-wrap: wrap;
}

.icon-box {
    width: calc(33.33% - 38px);
    box-sizing: border-box;
    color: #fff;
    font-size: 25px;
    line-height: 140%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 35px;
    padding: 16px;
    max-width: 483px;
    border-radius: 12px;
    font-family: 'Michroma', serif;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media screen and (min-width: 1921px) {
    .icon-box {
        width: calc(33.33% - 56px);
        max-width: none;
    }
}





.icon-box span:nth-of-type(2) {
    max-width: 334px;
}

.icon-box:hover span svg .icon-hover-highlight {
    transition: fill 0.3s ease;
}

.icon-box:hover span svg .icon-hover-highlight {
    fill: #67B0C4;
}

.technical-specifications-container {
    background-color: #fff;
    text-align: center;
    padding: 112px 180px;
}

.technical-specifications-container h5 {
    font-family: 'Michroma', serif;
    font-size: 47px;
    line-height: 120%;
    margin-bottom: 64px;
}

.technical-specifications-table {
    width: 100%;
    max-width: 1129px;
    margin: 0 auto;
} 

.technical-specifications-table dl div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    padding: 8px 24px;
}

.technical-specifications-table dl div:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.technical-specifications-table dl div dt, .technical-specifications-table dl div dd {
    font-size: 21px;
    line-height: 140%;
    color: #000;
    width: 50%;
    text-align: left;
}

.technical-specifications-table dl div dt {
    font-weight: 700;
}

.model-versions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 64px;
    padding: 112px 0 80px 0;
    background-color: #D1D3D5;
}

.version-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
}

.version {
    width: 673px;
    height: 100%;
    min-height: 646px;
    box-sizing: border-box;
    padding: 48px 64px;
    border-radius: 20px;
    background-color: #fff;
}

.version h6 {
    font-size: 25px;
    line-height: 140%;
    font-family: 'Michroma', serif;
    color: #67B0C4;
    margin-bottom: 16px;
}

.version-price {
    display: block;
    font-size: 32px;
    line-height: 120%;
    color: #000;
    font-weight: 700;
    margin-bottom: 34px;
}

.version-text {
    font-size: 21px;
    line-height: 140%;
    color: #000;
    margin-bottom: 12px;
    display: block;
}

.version-equipment-list ul li {
    font-size: 21px;
    line-height: 140%;
    color: #000;
    margin-bottom: 4px;
    padding-left: 28px; /* Adjust padding for space from bullet */
    position: relative; /* For pseudo-element positioning */
    list-style: none; /* Remove default bullet points */
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.00016%2015.1673C4.31826%2015.1673%201.3335%2012.1825%201.3335%208.50065C1.3335%204.81875%204.31826%201.83398%208.00016%201.83398C11.682%201.83398%2014.6668%204.81875%2014.6668%208.50065C14.6668%2012.1825%2011.682%2015.1673%208.00016%2015.1673ZM8.00016%2013.834C10.9457%2013.834%2013.3335%2011.4462%2013.3335%208.50065C13.3335%205.55513%2010.9457%203.16732%208.00016%203.16732C5.05464%203.16732%202.66683%205.55513%202.66683%208.50065C2.66683%2011.4462%205.05464%2013.834%208.00016%2013.834Z%22%20fill%3D%22%2367B0C4%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px 17px; /* Adjust size to fit */
}

.version-cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.version-cta-wrapper a {
    padding: 16px 48px;
    border-radius: 12px;
    background-color: #67B0C4;
    color: #fff;
    font-size: 21px;
    line-height: 140%;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.version-cta-wrapper a:hover {
    background-color: #4A8E9D;
}

.vehicle-model-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 180px 0 0 180px;
    width: 100%;
    height: auto;
    aspect-ratio: 1920/1024;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), 
                var(--model-background-image);
    background-size: cover; /* Ensure the image covers the container */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

.vehicle-model-container.model-container-center {
    align-items: center;
    text-align: center;
    padding: 180px 180px 0 180px;
}

.vehicle-model-container.model-container-center h1, .vehicle-model-container.model-container-center h2 {
    max-width: 1280px;
    width: 100%;
}

.vehicle-model-container.model-container-center .model-cta-container {
    position: absolute;
    bottom: 83px;
}


@media screen and (min-width: 1921px) {
    .vehicle-model-container {
        aspect-ratio: auto;
        height: 100vh;
    }
}

@media screen and (max-width: 780px) {
    .vehicle-model-container {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), 
        var(--model-background-image-sm);
        background-repeat: no-repeat;
        background-size: cover;
        height: auto;
        aspect-ratio: 430/859;
    }
}

.model-section-center {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Fix height for background resizing */
    width: 100%;
    height: 100vh; /* Use full viewport height for consistent scaling */
    
    /* Background Fixes */
    background-image: var(--model-background-image);
    background-size: cover; /* Ensures the image resizes properly */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
}

.model-section-center.overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                var(--model-background-image);
    background-size: cover; /* Ensure the image covers the container */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}


.model-section-center .text-wrapper {
    height: 100%;
    text-align: center;
    max-width: 1460px;
    padding: 10% 4% 0 4%;
}

.video-section .text-wrapper {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    padding: 0 4%;
}

.video-section .text-wrapper h3 {
    font-size: 47px;
    line-height: 120%;
    color: #fff;
    margin-bottom: 32px;
}

.video-section .text-wrapper p {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
}

.model-section-bottom-left .text-wrapper {
    text-align: left;
    height: auto;
}

.model-section-bottom-center .text-wrapper {
    text-align: center;
    height: auto;
}

.model-section-bottom-left h3, .model-section-bottom-left p {
    width: 100%;
}

.model-section-center h3 {
    font-size: 47px;
    line-height: 120%;
    color: #fff;
    margin-bottom: 32px;
}

.model-section-center p {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
}

.model-section-bottom-left {
    justify-content: flex-end;
    padding-bottom: 80px;
    padding-top: 24px;
    align-items: flex-start;
    padding-left: 10%;
    padding-right: 5%;
}
.model-section-bottom-center {
    justify-content: flex-end;
    padding-bottom: 80px;
    padding-top: 24px;
    align-items: center;
    padding-left: 10%;
    padding-right: 5%;
}

.model-section-bottom-left h3 {
    font-size: 47px;
    line-height: 120%;
    margin-bottom: 32px;
}

.model-section-bottom-center h3 {
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 16px;
}


.model-section-bottom-left p {
    color: #fff;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 15px;
}

.model-section-bottom-center p {
    font-size: 21px;
    line-height: 140%;
    
}

.model-section-bottom-left ul {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
}

.model-section-bottom-left li {
    margin-bottom: 8px;
    list-style: none;
    padding-left: 24px; /* Adjust for space */
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99967 14.1663C3.31777 14.1663 0.333008 11.1815 0.333008 7.49967C0.333008 3.81777 3.31777 0.833008 6.99967 0.833008C10.6815 0.833008 13.6663 3.81777 13.6663 7.49967C13.6663 11.1815 10.6815 14.1663 6.99967 14.1663ZM6.99967 12.833C9.94521 12.833 12.333 10.4452 12.333 7.49967C12.333 4.55415 9.94521 2.16634 6.99967 2.16634C4.05415 2.16634 1.66634 4.55415 1.66634 7.49967C1.66634 10.4452 4.05415 12.833 6.99967 12.833Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 15px;
    background-position: left center;
}

.card li {
    margin-bottom: 8px;
    list-style: none;
    padding-left: 24px; /* Adjust for space */
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99967 14.1663C3.31777 14.1663 0.333008 11.1815 0.333008 7.49967C0.333008 3.81777 3.31777 0.833008 6.99967 0.833008C10.6815 0.833008 13.6663 3.81777 13.6663 7.49967C13.6663 11.1815 10.6815 14.1663 6.99967 14.1663ZM6.99967 12.833C9.94521 12.833 12.333 10.4452 12.333 7.49967C12.333 4.55415 9.94521 2.16634 6.99967 2.16634C4.05415 2.16634 1.66634 4.55415 1.66634 7.49967C1.66634 10.4452 4.05415 12.833 6.99967 12.833Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 15px;
    background-position: left center;
    color: #fff;
    opacity: 0.75;
    font-size: 21px;
    line-height: 140%;
}

.vehicle-model-slider-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1920/925;
}

.vehicle-model-slider-wrapper {
    height: auto;
}

.vehicle-model-slider-wrapper .slick-prev, .video-slider-container .slick-prev {
    left: 20px;
    z-index: 99;
    width: 64px;
    height: 64px;
    background-color: #67B0C4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.vehicle-model-slider-wrapper .slick-prev:hover, .video-slider-container .slick-prev:hover {
    background-color: rgba(103, 176, 196, 0.7);
}

.vehicle-model-slider-wrapper .slick-next, .video-slider-container .slick-next {
    right: 20px;
    z-index: 99;
    width: 64px;
    height: 64px;
    background-color: #67B0C4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.vehicle-model-slider-wrapper .slick-next:hover, .video-slider-container .slick-next:hover {
    background-color: rgba(103, 176, 196, 0.7);
}

.vehicle-model-slider-wrapper .slick-prev:before, .vehicle-model-slider-wrapper .slick-next:before, .video-slider-container .slick-prev:before, .video-slider-container .slick-next:before {
    content: '';
}

.vehicle-model-slider-wrapper .slick-prev, .video-slider-container .slick-prev {
    background-image: url('data:image/svg+xml,<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 7C16 7.26617 15.8946 7.52143 15.7071 7.70964C15.5195 7.89784 15.2652 8.00358 14.9999 8.00358L3.41264 8.00358L7.70621 12.3123C7.88286 12.5025 7.97903 12.7541 7.97446 13.0141C7.96989 13.2741 7.86493 13.5222 7.68171 13.7061C7.49848 13.8899 7.25128 13.9953 6.9922 13.9998C6.73312 14.0044 6.48238 13.9079 6.2928 13.7307L0.29247 7.70919C0.105192 7.52102 0 7.26595 0 7C0 6.73405 0.105192 6.47898 0.29247 6.29081L6.2928 0.26935C6.48238 0.0920783 6.73312 -0.00443069 6.9922 0.00015744C7.25128 0.00474462 7.49848 0.11007 7.68171 0.293943C7.86493 0.477815 7.96989 0.72588 7.97446 0.985874C7.97903 1.24587 7.88286 1.49749 7.70621 1.68774L3.41264 5.99642L14.9999 5.99642C15.2652 5.99642 15.5195 6.10216 15.7071 6.29037C15.8946 6.47857 16 6.73384 16 7Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 10px;
    padding: 20px;
    width: 64px;  /* Adjust to your needs */
    height: 64px; /* Adjust to your needs */
    content: '';
}



.vehicle-model-slider-wrapper .slick-next, .video-slider-container .slick-next {
    background-image: url('data:image/svg+xml,<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M-6.11959e-07 7C-5.8869e-07 6.73383 0.105362 6.47857 0.292909 6.29036C0.480456 6.10216 0.734823 5.99642 1.00005 5.99642L12.5874 5.99642L8.29379 1.68774C8.11714 1.49749 8.02097 1.24587 8.02554 0.985871C8.03011 0.725877 8.13507 0.477813 8.31829 0.29394C8.50152 0.110068 8.74872 0.00474293 9.0078 0.000155658C9.26688 -0.00443162 9.51762 0.0920765 9.7072 0.269348L15.7075 6.29081C15.8948 6.47898 16 6.73405 16 7C16 7.26595 15.8948 7.52102 15.7075 7.70919L9.7072 13.7306C9.51762 13.9079 9.26688 14.0044 9.0078 13.9998C8.74871 13.9953 8.50152 13.8899 8.31829 13.7061C8.13507 13.5222 8.03011 13.2741 8.02554 13.0141C8.02097 12.7541 8.11714 12.5025 8.29379 12.3123L12.5874 8.00357L1.00005 8.00357C0.734823 8.00357 0.480456 7.89784 0.292909 7.70963C0.105362 7.52143 -6.35228e-07 7.26616 -6.11959e-07 7Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 10px;
    width: 64px;  /* Adjust as needed */
    height: 64px; /* Adjust as needed */
    display: block;
    content: ''; /* Remove SVG from content */
}

@media screen and (max-width: 1350px) {
    .video-slider-container .slick-prev, .video-slider-container .slick-next {
        display: none;
    }
}

@media screen and (max-width: 1250px) {
    .vehicle-model-slider-wrapper .slick-next, .vehicle-model-slider-wrapper .slick-prev {
        display: none !important;
    }
}

@media screen and (max-width: 700px) {
    .vehicle-model-slider-wrapper .slick-prev, .vehicle-model-slider-wrapper .slick-next, .video-slider-container .slick-prev, .video-slider-container .slick-next {
        width: 30px;
        height: 30px;
    }
    .vehicle-model-slider-wrapper .slick-prev:before, .vehicle-model-slider-wrapper .slick-next:before, .video-slider-container .slick-prev:before, .video-slider-container .slick-next:before {
        font-size: 30px;
    }
}

.vehicle-model-slider-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

.vehicle-model-slider-thumbnails div {
    width: 90px;
    height: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s ease-in-out;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.vehicle-model-slider-thumbnails div:hover {
    opacity: 1;
}

.vehicle-model-slider-thumbnails div.active {
    border: 1px solid #fff; /* Highlight active thumbnail */
    opacity: 1;
}



.vehicle-model-slider-item {
    height: auto;
    aspect-ratio: 1920 / 925;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--vehicle-model-background-image);
}

.vehicle-model-slider-item.overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    var(--vehicle-model-background-image);
}

@media screen and (max-width: 850px) {
    .vehicle-model-slider-item {
        aspect-ratio: 430 / 859;
        background-image: var(--vehicle-model-background-image-sm);
    }
    .vehicloe-model-slider-item.overlay {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                          var(--vehicle-model-background-image-sm);
    }
    .model-section-center {
        aspect-ratio: 430 / 859;
        background-image: var(--model-background-image-sm);
    }
    .model-section-center.overlay {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                          var(--model-background-image-sm);
    }
    .grid-section {
        aspect-ratio: 430 / 859;
        background-image: var(--grid-background-image-sm);
    }
}

.grid-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: none;
    background-image: var(--grid-background-image);
    background-size: cover; /* Ensures the image resizes properly */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    padding: 100px 9% 0 9%;
}

.grid-section h2 {
    font-size: 47px;
    line-height: 120%;
    color: #fff;
    font-family: 'Michroma', serif;
    margin-bottom: 100px;
}

.grid-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 58px;
    row-gap: 120px;
    width: 100%;
    margin: 0 auto;
}

.grid-wrapper .grid-item {
    width: calc(50% - 29px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.grid-label {
    font-family: 'Michroma', serif;
    font-size: 80px;
    line-height: 86%;
    font-weight: 500;
    color: #67B0C4;
}

.grid-title {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
    margin-bottom: 24px;
    display: block;
}

.grid-text-wrapper p {
    font-size: 25px;
    line-height: 140%;
    color: #fff;
    opacity: 0.75;
}


.vehicle-model-slider-item .text-wrapper {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.vehicle-model-slider-item .text-wrapper.middle {
    bottom: 50%;
    transform: translateX(-50%) translateY(50%);
}

.vehicle-model-slider-item .text-wrapper.top {
    bottom: auto;
    top: 60px;
    transform: translateX(-50%) translateY(0);
}

@media screen and (max-width: 850px) {
    .vehicle-model-slider-thumbnails {
        gap: 12px;
    }
    .vehicle-model-slider-thumbnails div {
        width: 50px;
        height: 90px;
    }
    .vehicle-model-slider-item .text-wrapper {
        bottom: 160px;
    }
}



.slider-menu {
    position: absolute;
    top: 35%;
    left: 48px;
    opacity: 0.25;
    background-color: #000;
    width: auto;
    height: auto;
}

.vehicle-model-slider-item h4 {
    font-size: 47px;
    line-height: 120%;
    color: #fff;
    text-align: center;
    margin-bottom: 32px;
    font-family: 'Michroma', serif;
}

.vehicle-model-slider-item p {
    font-size: 25px;
    line-height: 140%;
    color: #fff;
    max-width: 1000px;
    text-align: center;
}


@media screen and (max-width: 1500px) {
    .vehicle-model-slider-item .text-wrapper {
        width: 100%;
        padding: 0 24px;
    }
    .vehicle-model-slider-item p {
        max-width: none;
    }
}

.vehicle-model-container h1 {
    font-size: 66px;
    line-height: 120%;
    font-family: 'Michroma', serif;
    text-transform: none;
    color: #fff;
    margin-bottom: 16px;
    animation: translateY 0.7s ease-in-out forwards;
    opacity: 0;
}

@keyframes translateY {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vehicle-model-container h2 {
    color: #67B0C4;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 24px;
    animation: translateY 0.7s ease-in-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.vehicle-model-container p {
    font-size: 21px;
    line-height: 140%;
    color: #fff;
    margin-bottom: 32px;
    max-width: 760px;
    opacity: 0.75;
    animation: translateY 0.7s ease-in-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.vehicle-model-container p strong, .vehicle-model-container p b {
    font-weight: 700;
}

.vehicle-model-container p em, .vehicle-model-container p i {
    font-style: italic;
}

.vehicle-model-carousel-item {
    width: 100vw;
    aspect-ratio: 1920/925;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--vehicle-model-background-image);
}



.vehicle-model-carousel-item .text-wrapper {
    bottom: 120px;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    max-width: 964px;
    left: 50%;
    transform: translateX(-50%);
}

.vehicle-model-carousel .text-wrapper h3 {
    margin-bottom: 32px;
}

.vehicle-model-carousel .text-wrapper p {
    font-size: 25px;
    line-height: 140%;
}

@media screen and (max-width: 850px) {
    .vehicle-model-carousel-item {
        background-image: var(--vehicle-model-background-image-sm);
        aspect-ratio: 430/859;
    }
    .vehicle-model-carousel .text-wrapper {
        padding: 0 32px;
    }
    .vehicle-model-carousel .text-wrapper h3 {
        font-size: 40px;
    }
    .vehicle-model-carousel .text-wrapper p {
        font-size: 21px;
    }
}

.video-slider-container {
    padding-top: 90px;
    padding-bottom: 48px;
}

.video-wrapper {
    text-align: center;
    position: relative;
}

.video-text {
    width: 100%;
    padding: 0 24px;
    text-align: center;
    margin-bottom: 0;
    min-height: 126px;
}

.video-text p {
    font-size: 25px;
    line-height: 140%;
    color: #fff;
}

.video-wrapper video {
    width: 100%;
    max-width: 1200px;
}



.specifications-container {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 24px 0;
    color: #fff;
    margin-bottom: 188px;
    max-width: 820px;
    animation: translateY 0.7s ease-in-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.specifications-container ul {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.specifications-container ul li {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    text-align: center;
    animation: opacityChange 0.7s ease-in-out forwards;
    opacity: 0;
}

@keyframes opacityChange {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.specifications-container ul li:nth-of-type(1) {
    animation-delay: 0.7s;
}

.specifications-container ul li:nth-of-type(2) {
    animation-delay: 0.9s;
}

.specifications-container ul li:nth-of-type(3) {
    animation-delay: 1.1s;
}

.specifications-container ul li:nth-of-type(4) {
    animation-delay: 1.3s;
}

.specifications-container ul li span:first-of-type {
    font-size: 32px;
    line-height: 120%;
    color: #fff;
    font-family: 'Michroma', serif;
    white-space: nowrap;
}


.specifications-container ul li span:nth-of-type(2) {
    font-size: 21px;
    line-height: 140%;
    font-weight: 700;
    color: #fff;
}

.model-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.model-cta-container a {
    padding: 16px 48px;
    border-radius: 12px;
    background-color: #67B0C4;
    color: #fff;
    font-size: 21px;
    line-height: 140%;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease;
    animation: translateY 0.7s ease-in-out forwards;
    opacity: 0;
}

.model-cta-container a:nth-of-type(1) {
    animation-delay: 0.4s;
}

.model-cta-container a:nth-of-type(2) {
    animation-delay: 0.5s;
}

.model-cta-container a:nth-of-type(3) {
    animation-delay: 0.6s;
}

.model-cta-container a:nth-of-type(4) {
    animation-delay: 0.7s;
}

.model-cta-container a:hover {
    background-color: #4A8E9D;
}

@media screen and (max-width: 1450px) {
    .version-wrapper {
        flex-direction: column;
    }
    .model-versions-container {
        padding-top: 75px;
    }
    .news-slider-item {
        height: auto;
    }

    .news-details-slider .slick-dots {
        bottom: 0;
    }

    .news-details-slider {
        padding-bottom: 50px;
    }
}













@media screen and (max-width: 780px) {
    .vehicle-model-container {
        align-items: center;
    }
    .vehicle-model-container h2 {
        text-align: center;
    }
    .vehicle-model-container h1 {
        margin-bottom: 12px;
        text-align: center;
    }
    .vehicle-model-container h2 {
        margin-bottom: 32px;
    }
    .specifications-container ul {
        flex-wrap: wrap;
        width: 100%;
        max-width: 500px;
        padding: 0 32px;
    }
    .specifications-container {
        margin-bottom: 64px;
    }
    .specifications-container ul li {
        width: calc(50% - 32px);
        align-items: center;
        justify-content: center;
    }
    .specifications-container ul li span:nth-of-type(2) {
        text-align: center;
    }
    .model-cta-container {
        flex-direction: column;
        width: 100%;
        max-width: 240px;
    }
    .model-cta-container a {
        width: 100%;
        padding: 16px 0;
        text-align: center;
    }
}







@media screen and (max-width: 720px) {
    .version {
        width: 100%;
        height: auto;
        min-height: 600px;
    }
    .technical-specifications-container {
        padding: 100px 48px;
    }
}

@media screen and (max-width: 780px) {
    .vehicle-model-container h1 {
        font-size: 48px;
    }
    .vehicle-model-container h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .vehicle-model-container {
        padding-top: 120px;
    }
    .model-slider-item .model-slider-text h3 {
        font-size: 34px;
    }
    .model-slider-item .model-slider-text p {
        font-size: 18px;
    }
    .model-slider-item .model-slider-text.model-slider-text-right {
        right: 32px;
    }
}

@media screen and (max-width: 600px) {
    .specifications-container {
        margin-bottom: 32px;
    }
    .card {
        flex-direction: column;
        gap: 16px;
    }
    .card div {
        width: 100%;
    }
    .card .image-wrapper {
        margin-bottom: 0;
    }
    .news-slider-item {
        margin: 0 6px;
    }
    .contact-section-successfull h2 {
        font-size: 48px;
    }
    .contact-section-successfull p {
        font-size: 21px;
        margin-bottom: 64px;
    }
    .vehicle-model-slider-item h4 {
        font-size: 38px;
    }
    .vehicle-model-slider-item p {
        font-size: 21px;
    }
    .grid-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    .grid-text-wrapper p {
        font-size: 18px;
    }
    .grid-label {
        font-size: 42px;
    }
}

#app {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding-top: 98px;
    background-color: #d1d3d5;
}
/* Styling the search input and dropdown */
.dealers-search-container {
    position: relative;
    width: 100%;
}

.dealer-map-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 0;
}

.dealer-map-card span {
    font-size: 16px;
    line-height: 140%;
    color: #000;
    opacity: 0.75;
}

.dealer-map-card .dealer-title {
    color: #67B0C4;
    font-size: 21px;
    line-height: 140%;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.3s ease;
}

.dealer-map-card .dealer-title:hover {
    color: #4A8E9D;
}

#dealer-list-container {
    height: 100%;
    max-height: 340px;
    overflow-y: scroll;
}

.dealer-list-wrapper {
    padding-right: 10px;
    width: 100%;
    height: auto;
    padding-top: 7px;
}

.distance-wrapper {
    font-weight: 700;
    opacity: 1;
    color: #000;
}

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

.dealer-info-wrapper {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 16px;
    transition: left 0.3s ease;
}

.dealer-info-window {
    width: 120px;
}

.dealer-info-window h3 {
    margin-bottom: 8px;
}

.gm-style .gm-style-iw-c {
    flex-direction: row-reverse;
    padding: 16px !important;
}
.gm-ui-hover-effect>span {
    margin-top: 0 !important;
    margin-right: 0 !important;
}
.gm-ui-hover-effect {
    display: flex !important;
    justify-content: flex-end;
    align-items: flex-start;
}

.dealer-contact-cta {
    padding: 8px 24px;
    background-color: #67B0C4;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    line-height: 140%;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.dealer-contact-cta:hover {
    background-color: #4A8E9D;
}

.dealer-wrapper {
    width: 100%;
}

/* Styling the scrollbar */
#dealer-list-container::-webkit-scrollbar, .dealer-form-container::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

/* Styling the scrollbar track (the background of the scrollbar) */
#dealer-list-container::-webkit-scrollbar-track, .dealer-form-container::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Light gray track background */
    border-radius: 10px; /* Rounded corners */
}

/* Styling the scrollbar thumb (the draggable part) */
#dealer-list-container::-webkit-scrollbar-thumb, .dealer-form-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Gray color for the thumb */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #f1f1f1; /* Adding some border to give it a clean look */
}

/* Styling the scrollbar thumb on hover */
#dealer-list-container::-webkit-scrollbar-thumb:hover, .dealer-form-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb when hovered */
}

#search-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 6px;
    border: none;
    outline: none;
    font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0203 11.0775L14.8755 13.9327L13.9327 14.8755L11.0775 12.0203C10.0509 12.8417 8.74901 13.333 7.33301 13.333C4.02101 13.333 1.33301 10.645 1.33301 7.33301C1.33301 4.02101 4.02101 1.33301 7.33301 1.33301C10.645 1.33301 13.333 4.02101 13.333 7.33301C13.333 8.74901 12.8417 10.0509 12.0203 11.0775ZM10.6828 10.5829C11.498 9.74274 11.9997 8.59674 11.9997 7.33301C11.9997 4.75467 9.91134 2.66634 7.33301 2.66634C4.75467 2.66634 2.66634 4.75467 2.66634 7.33301C2.66634 9.91134 4.75467 11.9997 7.33301 11.9997C8.59674 11.9997 9.74274 11.498 10.5829 10.6828L10.6828 10.5829Z' fill='%230D0E0E'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    padding-left: 36px; /* Ensure space for icon */
}


/* Styling for the dropdown */
.city-dropdown {
    position: absolute;
    top: 68px;
    width: 360px;
    left: 24px;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
}

.city-dropdown div {
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.city-dropdown div:hover {
    background-color: #f0f0f0;
}


.dealer-navigation-container {
    display: flex;
    flex-direction: row;
    padding: 40px 180px;
    height: 15%;
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 2px solid rgba(0, 0, 0, 0.10);
    gap: 39px;
}

.dealer-navigation-item:nth-of-type(1) {
    padding-left: 0;
    justify-content: flex-start;
}

.dealer-navigation-item:nth-of-type(2) {
    padding-left: 0;
    justify-content: flex-start;
}

.dealer-navigation-item:nth-of-type(3) {
    justify-content: flex-start;
    border-right: none;
}

.dealer-navigation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    border-right: 2px solid rgba(0, 0, 0, 0.10);
    padding-right: 16px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    line-height: 140%;
    font-weight: 700;
    width: 220px;
    cursor: pointer;
    transition: color 0.3s ease;
    min-width: 220px;
}

.dealer-navigation-item:hover {
    color: #67B0C4;
}

.dealer-navigation-item:hover .dealer-navigation-number-wrapper {
    background-color: #67B0C4;
    color: #fff;
}

.dealer-navigation-item span {
    white-space: nowrap;
}

.dealer-navigation-number-wrapper {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    border: 2px solid #67B0C4;
    font-size: 25px;
    line-height: 140%;
    font-weight: 700;
    color: #67B0C4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dealer-navigation-number-wrapper.active {
    background-color: #67B0C4;
    color: #fff;
}

.screen {
    display: none;
    position: relative;
    height: auto;
    min-height: calc(100vh - 98px);
}

#app.dealer-map .screen {
    display: block;
}

.screen.active {
    display: block;
}

.model-picker-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    align-items: center;
    justify-content: flex-start;
    padding-top: 48px;
    gap: 24px;
    max-width: 1560px;
    margin: 0 auto;
    height: 70%;
}

.model-select-wrapper {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
} 

.model-select-wrapper label {
    font-size: 21px;
    line-height: 140%;
    font-weight: 700;
    color: #000;
    opacity: 0.75;
}

.model-select-wrapper select {
    width: 280px;
    height: 48px;
    padding-left: 16px;
    padding-right: 40px;
    box-sizing: border-box;
    border: 1px solid #d1d3d5;
    cursor: pointer;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    line-height: 140%;
    font-weight: 400;
    transition: border 0.3s ease;
}

.model-select-wrapper select:focus, .model-select-wrapper select:hover, .model-select-wrapper select:active {
    outline: none;
    border: 1px solid #67B0C4;
}

.model-image-wrapper img {
    height: 100%;
    max-height: 280px;
}

.model-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    gap: 12px;
    padding-left: 24px;
}

.model-price-label {
    font-family: 'Michroma', serif;
    font-size: 25px;
    line-height: 140%;
    color: #000;
    opacity: 0.75;
    text-transform: uppercase;
}

.model-price {
    font-size: 32px;
    line-height: 120%;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.model-picker-cta-wrapper {
    width: 100%;
    height: 15%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    max-width: 1560px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 0;
    padding-top: 48px;
    padding-bottom: 48px;
}

.model-picker-cta {
    background-color: #67B0C4;
    text-transform: uppercase;
    color: #fff;
    font-size: 16px;
    line-height: 140%;
    border-radius: 12px;
    padding: 12px 32px;
    letter-spacing: 0;
    outline: none;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    transition: background-color 0.3s ease;
    font-family: "Source Sans 3", sans-serif;
}

.model-picker-cta:hover {
    background-color: #4A8E9D;
}

.model-picker-container h3 {
    font-size: 21px;
    line-height: 140%;
    font-weight: 700;
    color: #000;
    opacity: 0.75;
    font-family: "Source Sans 3", sans-serif;
}

.model-form {
    gap: 0;
    padding-top: 24px;
}

.model-form h3 {
    margin-bottom: 24px;
}

.model-form form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.model-form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    width: 100%;
}

.model-form-row.full-width .model-form-input-wrapper {
    width: 100%;
}

.model-form-container {
    width: 100%;
    max-width: 752px;
    padding-bottom: 24px;
}

.model-form-input-wrapper {
    width: 348px;
}

.model-form-row p {
    font-size: 16px;
    line-height: 140%;
    color: #000;
    opacity: 0.75;
    font-weight: 400;
}

.model-form-row p strong, strong, b {
    font-weight: 700;
}

.model-form-row p a {
    color: #67B0C4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.model-form-row p a:hover {
    color: #4A8E9D;
}


.model-form-input-wrapper input, .model-form-input-wrapper select, .model-form-input-wrapper textarea {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid transparent;
    outline: none;
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 140%;
    font-weight: 400;
    transition: border 0.3s ease;
}

.model-form-input-wrapper input::placeholder {
    color: #000;
    opacity: 0.5;
}



.model-form-input-wrapper input:focus, .model-form-input-wrapper input:hover, .model-form-input-wrapper input:active, .model-form-input-wrapper select:focus, .model-form-input-wrapper select:hover, .model-form-input-wrapper select:active {
    border: 1px solid #67B0C4;
}

.model-form-input-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12.0092 6L6.01839 0L0.0275879 6H12.0092ZM12.0092 12L6.01839 18L0.0275879 12H12.0092Z" fill="%2367B0C4"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 18px;
    padding-right: 30px;
    color: rgba(0, 0, 0, 0.5);
}


.model-form-row.checkbox-group {
    gap: 24px;
    flex-wrap: wrap;
}

.checkbox-group .model-form-input-wrapper {
    width: auto;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
}

.model-form-input-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    border: 1px solid #67B0C4; /* Primary color */
    border-radius: 6px; /* Slightly rounded corners */
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    margin: 0;
    padding: 0;
}


.model-form-input-wrapper input[type="checkbox"]:hover {
    border-color: #357ABD; /* Darker shade on hover */
}

.model-form-input-wrapper input[type="checkbox"]::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 2.86608C12 3.09696 11.9277 3.29321 11.7832 3.45482L6.17806 9.72322L5.12516 10.9007C4.98065 11.0623 4.80516 11.1431 4.59871 11.1431C4.39226 11.1431 4.21677 11.0623 4.07226 10.9007L3.01935 9.72322L0.216774 6.58902C0.0722581 6.42741 0 6.23116 0 6.00028C0 5.7694 0.0722581 5.57315 0.216774 5.41153L1.26968 4.23405C1.41419 4.07243 1.58968 3.99162 1.79613 3.99162C2.00258 3.99162 2.17806 4.07243 2.32258 4.23405L4.59871 6.78816L9.67742 1.09985C9.82194 0.93823 9.99742 0.857422 10.2039 0.857422C10.4103 0.857422 10.5858 0.93823 10.7303 1.09985L11.7832 2.27734C11.9277 2.43895 12 2.6352 12 2.86608Z" fill="white"/></svg>');
    background-size: cover;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.model-form-input-wrapper input[type="checkbox"]:checked::after {
    opacity: 1;
}

.model-form-input-wrapper label {
    cursor: pointer;
    white-space: break-spaces;
    font-size: 16px;
    line-height: 140%;
}

.map-container {
    display: flex;
    height: 100vh;
    position: relative;
    width: 100%;
    margin: 0;
    max-width: none;
    padding-top: 0;
}

#screen-3 .model-picker-cta-wrapper {
    border-top: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

#screen-3 {
    max-height: calc(100vh - 98px);
}

/* Dealer List Container */
.dealers-list-container {
    width: 418px;
    height: 506px;
    box-sizing: border-box;
    position: absolute;
    top: 10%; /* Keeps the dealer list visible without covering the map */
    left: 180px; /* Adjusted to prevent overlap with the map */
    background-color: #fff; /* White background for the list */
    z-index: 2;
    border-radius: 20px; /* Rounded corners for a cleaner look */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for the list */
    overflow-x: hidden;
}

.dealers-search-container {
    background-color: #67B0C4;
    padding-top: 48px;
    padding: 32px 24px 8px 24px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dealer-form-container {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    display: block;
    padding: 24px;
    overflow-y: scroll;
    height: 100%;
    transition: left 0.3s ease;
}

.dealer-map .dealers-search-container {
    position: absolute;
    top: 0;
    left: 0;
    transition: left 0.3s ease;
}

.dealer-map .dealer-list-wrapper {
    position: absolute;
    top: 148px;
    left: 0;
    transition: left 0.3s ease;
}

.back-to-results {
    font-size: 16px;
    line-height: 140%;
    font-weight: 700;
    color: #0D0E0E;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.back-to-results:hover {
    color: #67B0C4;
}

.back-to-results:hover .left-icon {
    transform: translateX(-4px);
}

.left-icon {
    display: flex;
    transition: transform 0.3s ease;
    align-items: flex-end;
}

.dealer-form-container h4 {
    font-family: 'Michroma', serif;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 16px;
}

.dealer-form-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
}


.dealer-form-info-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.dealer-form-working-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 20px;
}

.dealer-form-working-hours-title {
    font-weight: 700;
}

.dealer-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
    padding: 0;
}

.dealer-form-row select {
    width: 100%;
    height: auto;
    padding: 12px 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    border-radius: 6px;
}

.dealer-form-row input {
    width: 100%;
    padding: 12px 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.dealer-form-row input::placeholder {
    color: #000;
    opacity: 0.5;
}

.dealer-form-row input:focus, .dealer-form-row input:hover, .dealer-form-row input:active {
    border: 1px solid #67B0C4;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.dealer-form-row select:focus, .dealer-form-row select:hover, .dealer-form-row select:active {
    border: 1px solid #67B0C4;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}


/* Map styles */
#map {
    width: 100%; /* Adjusted to take remaining space after the list */
    height: 93.5%;
    box-sizing: border-box;
}

/* Current Location button styling */
.current-location-container {
    padding: 12px;
    background-color: #67B0C4;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 10px 0;
    transition: background-color 0.3s ease;
}

/* Hover effect on current location button */
.current-location-container:hover {
    background-color: #4f98a4;
}

.current-location-container span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .map-container {
        flex-direction: column;
    }
    
    .vehicle-documentation-banner-container h1 {
        font-size: 52px;
    }
    
    .vehicle-documentation-banner-container h2 {
        font-size: 28px;
    }

    .dealers-list-container {
        position: relative; /* Change to relative for small screens */
        top: auto; /* Reset top position */
        left: auto; /* Reset left position */
        width: 90%;
        margin-top: 16px;
        max-height: 50vh;
        overflow: hidden;
    }



    #screen-3 {
        height: auto;
        max-height: none;
    }
    #screen-3 .model-picker-cta-wrapper {
        position: static;
        padding-top: 64px;
        transform: translateX(0);
    }
    .city-dropdown {
        width: calc(100% - 48px);
    }

    .map-container {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 450px) {
    .dealer-info-container {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }
    #dealer-list-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 32px;
    }
    .dealer-contact-cta {
        margin-top: 6px;
        display: block;
    }
    .current-location-container {
        display: none;
    }
    .dealers-search-container {
        padding-bottom: 32px;
    }
    .contact-section-successfull a {
        font-size: 18px;
        padding: 12px 24px;
    }
    .contact-section-successfull h2 {
        font-size: 32px;
    }
    .contact-section-successfull p {
        font-size: 18px;
    }
    .contact-section-successfull-container {
        padding: 0 24px;
    }
}


@media screen and (max-width: 1400px) {
    .header div.navigation-container {
        display: none; /* Hidden initially */
        position: fixed;
        left: 0;
        top: 98px;
        width: 100%;
        height: 100svh;
        max-height: calc(100svh - 98px);
        z-index: 5;
        background-color: #0D0E0E;
        opacity: 0; /* Initially hidden */
        pointer-events: none; /* Disable interaction when hidden */
        visibility: hidden; /* Ensure it's hidden from accessibility tools */
        transform: translateX(100%); /* Hidden off-screen */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility */
        overflow: hidden;
    }
    
    .header div.navigation-container.active {
        display: block; /* Will be toggled via JavaScript */
        opacity: 1; /* Make visible */
        pointer-events: auto; /* Enable interaction */
        visibility: visible; /* Make accessible */
        transform: translateX(0); /* Slide in from the right */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s; /* Immediate visibility */
        z-index: 5;
    }

    .header div.navigation-container nav ul {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .header div.navigation-container nav ul li {
        width: 100%;
        padding: 24px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: auto;
    }

    .header nav ul li a span:nth-of-type(2) {
        display: inline-block;
        font-size: 21px;
        line-height: 140%;
        color: #fff;
        width: 11px;
        height: 30px;
    }

    .header nav ul li a.no-children span:nth-of-type(2) {
        opacity: 0.25;
    }

    .header nav ul li:hover div.navigation-content-container {
        display: none;
    }

    .header nav ul li div.navigation-content-container.active {
        display: flex;
    }

    .header .navigation-container nav ul li {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .header nav ul li a {
        border-bottom: none;
    }

    .header nav ul li a:hover, .header nav ul li a.active, .header nav ul li a:focus {
        border-bottom: none;
    }

    .mobile-floating-menu-container {
        display: block;
    }

    .header .navigation-content-container {
        position: relative;
        height: auto;
        top: 0;
        padding-top: 48px;
    }

    .vehicle-item:hover img {
        transform: scale(1);
        filter: brightness(1) contrast(1) drop-shadow(0 0 0 transparent);
    }

    .vehicles-wrapper {
        flex-direction: column;
    }

    .navigation-container {
        overflow-y: scroll;
    }

    .hamburger-container {
        display: block;
    }
    .header-cta-wrapper {
        display: none;
    }
    .mobile-floating-menu-container .header-cta-wrapper {
        display: flex;
    }
    .logo-container {
        width: 90%;
        align-items: center;
        display: flex;
        justify-content: center;
        padding-left: 10%;
    }
    .header-cta-container {
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 1400px) {
    .header .navigation-container nav ul li a {
        height: auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .navigation-container nav ul li a.vehicle-item {
        height: 100%;
    }

    div.logo-container {
        padding-left: 0;
        width: 70%;
        margin-left: 15%;
        margin-right: 0;
    }
    .logo-container a img {
        width: 100%;
        display: block;
    }
    .header-cta-container {
        width: 15%;
        justify-content: flex-end;
    }
    .hero-text-container h2 {
        font-size: 40px;
        line-height: 120%;
    }
    .hero-text-container span.description {
        font-size: 25px;
        line-height: 120%;
    }
    .hero-text-container {
        padding: 150px 40px 0 40px;
        text-align: center;
    }
    .floated-menu-container {
        display: none;
    }
    .hero-slider .find-out-more {
        bottom: 60%;
    }
    .text-left {
        padding-left: 24px;
    }
    .text ul li {
        font-size: 16px;
    }
    .text-description {
        margin-bottom: 0;
    }
    .version-wrapper {
        gap: 56px;
    }
    .text .version-container {
        margin-bottom: 32px;
        flex-wrap: wrap;
    }
    .find-out-more {
        padding: 12px 32px;
        background-color: #67B0C4;
        font-size: 16px;
    }
    .find-out-more:hover {
        background-color: #4A8E9D;
    }
    .text {
        justify-content: flex-start;
        padding-top: 60px;
        padding-right: 24px;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 120px;
        height: auto;
    }
    .text .version-container .version-wrapper .version-title {
        font-size: 21px;
    }
    .text-center {
        padding-left: 24px;
        justify-content: center;
    }
    .text.three-columns {
        padding: 64px 48px 0 48px;
    }
    .text.three-columns ~ .cta-wrapper.cta-wrapper-center {
        position: static;
        padding: 0 24px;
        align-items: center;
        justify-content: center;
    }
    .text p {
        font-size: 16px;
    }

    .scroll_contents .cta-wrapper.cta-wrapper-center {
        justify-content: flex-start;
        padding-left: 24px;
        position: relative;
    }
    .text-right {
        padding-left: 24px;
        position: absolute;
        right: 0;
        max-width: 40%;
    }
    .news-container {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1600px) {
    .three-cards-container {
        padding: 75px 64px;
    }
    .cards-container {
        gap: 32px;
    }
    .vehicle-model-container.model-container-center {
        padding: 120px 64px 0 64px;
    }
    .vehicle-model-container.model-container-center h1 {
        font-size: 55px;
        max-width: none;
    }
    .vehicle-model-container.model-container-center h2 {
        font-size: 28px;
        max-width: none;
    }
    .vehicle-model-container.model-container-center .model-cta-container {
        bottom: 44px;
    }
}


@media screen and (max-width: 1300px) {
    .three-cards-container.icon-container, .three-cards-container {
        padding: 75px 32px;
    }
    .icon-box {
        font-size: 20px;
    }
    .contact-section-successfull-container {
        width: 100%;
    }
    .grid-section {
        padding: 100px 5% 0 5%;
    }
    .grid-wrapper {
        gap: 32px;
        row-gap: 84px;
    }
    .text.three-columns {
        margin-bottom: 48px;
    }
}

@media screen and (max-width: 1100px) {
    .icon-box {
        width: calc(50% - 30px);
    }
    .grid-section {
        padding: 24px 3% 24px 3%;
    }
    .grid-section h2 {
        margin-bottom: 32px;
        font-size: 38px;
    }
    .grid-wrapper {
        flex-direction: column;
        row-gap: 42px;
    }
    .grid-wrapper .grid-item {
        width: 100%;
    }

}

@media screen and (max-width: 700px) {
    .icon-box {
        gap: 16px;
        font-size: 18px;
    }
    .icon-wrapper {
        gap: 32px;
    }
}

@media screen and (max-width: 650px) {
    .icon-wrapper {
        flex-direction: column;
    }
    .icon-box {
        width: 100%;
        max-width: none;
        gap: 32px;
    }
    .grid-wrapper .grid-item {
        gap: 32px;
    }
    .grid-label {
        font-size: 55px;
    }
    .grid-title {
        margin-bottom: 18px;
    }
}

@media screen and (max-width: 550px) {
    .vehicle-model-carousel .text-wrapper h3 {
        font-size: 32px;
    }
    .vehicle-model-carousel .text-wrapper p {
        font-size: 18px;
    }
    .three-cards-container {
        padding: 50px 32px;
    }
    .three-cards-container h4 {
        font-size: 32px;
    }
    .card h5 {
        font-size: 21px;
    }
    .card p, .card li {
        font-size: 18px;
    }
}

@media screen and (max-width: 1200px) {
    .model-slider-item .model-slider-text.model-slider-text-right {
        right: 80px;
    }
    .model-slider-item .model-slider-text.model-slider-text-left {
        left: 80px;
    }
    .nine-cards-container .card {
        width: calc(50% - 32px);
    }
    .vehicle-model-container.model-container-center {
        position: relative;
    }
    .vehicle-model-container.model-container-center h1 {
        font-size: 48px;
    }
    .vehicle-model-container.model-container-center h2 {
        font-size: 21px;
    }
    .text.three-columns {
        padding: 48px 48px 0 48px;
        margin-bottom: 64px;
    }
    .text.three-columns .text-description p {
        font-size: 18px;
    }
    .text.three-columns .text-description {
        gap: 38px;
    }
    .text.three-columns .text-title h2 {
        font-size: 40px;
    }
}

@media screen and (max-width: 1070px) {
    .text.three-columns {
        margin-bottom: 32px;
        padding: 32px 32px 0 32px;
    }
}

@media screen and (max-width: 850px) {
    .cards-container {
        flex-direction: column;
        gap: 48px;
    }
    .card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .two-cards-container .card {
        width: 100%;
    }
    .nine-cards-container .card {
        width: 100%;
    }
    .card .image-wrapper {
        margin-bottom: 0;
    }
    .card div {
        width: 100%;
    }
}

@media screen and (max-width: 1050px) {
    .vehicle-model-container.model-container-center {
        padding: 120px 32px 0 32px;
    }
    .vehicle-model-container.model-container-center h1 {
        font-size: 40px;
    }
    .vehicle-model-container.model-container-center h2 {
        font-size: 18px;
    }
    .vehicle-model-container.model-container-center .model-cta-container {
        bottom: 32px;
    }
}

@media screen and (min-width: 2559px) {
    .hero-text-container {
        padding-top: 10%;
    }
    .scroll_contents .cta-wrapper.cta-wrapper-center {
        bottom: 10%;
    }
    footer .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 1000px) {
    .hero-slider .find-out-more {
        bottom: 25%;
    }
    .half-width .text-description {
        max-width: none;
    }
    .text.text-center ~ .cta-wrapper.cta-wrapper.cta-wrapper-center {
        padding: 0;
        align-items: center;
        justify-content: center;
    }
    .text.three-columns {
        padding-top: 64px;
        margin-bottom: 52px;
    }
    .text.three-columns .text-description {
        flex-direction: column;
        font-size: 16px;
        gap: 16px;
    }
    .text.three-columns .text-description p {
        width: 100%;
        text-align: center;
        font-size: 18px;
    }
    .text.three-columns .text-title h2 {
        font-size: 36px;
    }
    .text.three-columns .highlighted-text {
        font-size: 25px;
    }
    .text.three-columns ~ .cta-wrapper.cta-wrapper-center {
        margin-bottom: 72px;
    }
    .text {
        width: 100%;
        max-width: none;
    }
    .text-right {
        position: relative;
    }
    .footer-legal-container {
        padding-left: 24px;
        padding-right: 24px;
        gap: 16px;
    }
    .footer-pages-container {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        width: 100%;
        padding-top: 24px;
        margin: 0 0 32px 0;
        flex-direction: row;
        justify-content: flex-start;
    }
    .main-page-title {
        white-space: nowrap;
    }

    .mobile-image {
        display: block;
        width: 100%;
        margin-bottom: 16px;
    }

    .text h2 {
        font-size: 21px;
        line-height: 120%;
    }

    .mobile-image img {
        width: 100%;
    }

    .news-slider-item {
        height: auto;
    }

    .news-details-slider .slick-dots {
        bottom: 0;
    }

    .news-details-slider {
        padding-bottom: 50px;
    }

    .footer-logo-container {
        padding: 70px 24px 60px 24px;
        box-sizing: border-box;
    }
    .footer-logo-container img {
        width: 100%;
        box-sizing: border-box;
    }
    .footer-legal-container {
        padding: 24px;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }
    .footer-legal-links {
        flex-direction: column;
        gap: 0;
    }
    .footer-legal-container h6 {
        font-size: 21px;
        line-height: 120%;
    }
    .subpages-container {
        display: none;
    }
    .main-page-title {
        font-size: 21px;
        line-height: 120%;
        white-space: nowrap;
    }
    .footer-notice-container {
        padding: 0 24px;
        text-align: left;
        box-sizing: border-box;
    }
    .footer-copyright-container {
        flex-wrap: wrap;
        padding: 24px;
        box-sizing: border-box;
        height: auto;
        gap: 0;
        row-gap: 24px;
    }
    .footer-copyright-container a:first-of-type {
        width: 100%;
        text-align: center;
    }
    .footer-copyright-container a {
        width: calc(50% - 24px);
        text-align: center;
    }

    .scroll_container, div.sticky_wrap, .horizontal_scroll, .scroll_contents, section {
        height: auto;
        background-position: bottom;
        position: static;
    }
    
    .vehicle-documentation {
        width: 100%;
    }

    .video-section {
        position: relative;
    }

    .scroll_contents {
        aspect-ratio: auto;
        max-height: none;
    }

    .scroll_contents.separate-content {
        aspect-ratio: auto;
        height: auto;
    }

    .model-slider-item .model-slider-text {
        position: static;
        height: 100vh;
        box-sizing: border-box;
        padding-top: 60px;
        padding-left: 24px;
        text-align: left;
    }
    .model-slider-item .model-slider-text.model-slider-text-right p {
        text-align: left;
    }
    .model-slider-item .model-slider-text.model-slider-text-right {
        align-items: flex-start;
    }
    
}

@media screen and (max-width: 1424px) {
    .news-container {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    .contact-banner {
        width: 100vw; /* Ensures it spans the full width of the viewport */
        background-image: var(--background-image-contact-sm);
        background-size: cover; /* Keeps original image dimensions */
        background-position: top center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden; /* Prevents extra spacing issues */
    }
    section.contact-section {
        height: auto;
    }
    .contact-banner h1 {
        padding: 25% 24px 0 24px;
    }
    .banner-container {
        background-image: var(--background-image-news-details-sm);
        aspect-ratio: 430/312;
        height: auto;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 300px;
    }
}

@media screen and (max-width: 470px) {
    .contact-banner {
        padding-top: 0;
    }
    .contact-banner h1 {
        font-size: 32px;
    }
    .contact-form-submit-wrapper {
        flex-direction: column;
        gap: 24px;
    }
    .contact-form-submit-wrapper button {
        align-self: flex-end;
    }
}

@media screen and (max-width: 700px) {
    .banner-container {
        justify-content: center;
    }
    .banner-container h1 {
        margin: 0;
    }
    .news {
        min-width: 350px;
        width: 100%;
    }
    .news-list-container {
        padding-top: 24px;
    }
    .news-details-container {
        padding: 24px 16px 45px 16px;
    }
    .floated-menu-container {
        right: 33px;
    }
    .contact-row p {
        font-size: 16px;
    }
}

@media screen and (max-width: 1570px) {
    #screen-1 {
        padding: 0 24px;
    }
    #screen-2 {
        padding: 0 24px;
    }
    .model-picker-cta-wrapper {
        width: 97%;
    }
}

@media screen and (max-width: 990px) {
    .dealer-navigation-item {
        flex-direction: column;
        padding: 0;
        min-width: 150px;
    }
    .dealer-navigation-container {
        gap: 0;
        padding: 24px 0;
        height: 20%;
    }
    .model-picker-cta-wrapper {
        height: 10%;
    }

    .model-image-wrapper img {
        max-height: none;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .banner-container h1 {
        font-size: 55px;
    }
    .vehicle-documentation-banner-container h1 {
        font-size: 36px;
        padding: 0 24px;
    }
    .vehicle-documentation-banner-container h2 {
        font-size: 21px;
    }
    .vehicle-documentation-container {
        padding-top: 64px;
    }
    .vehicle-documentation-title h2 {
        font-size: 40px;
        margin-bottom: 8px;
    }
    .vehicle-documentation-title span {
        font-size: 28px;
        margin-bottom: 48px;
    }
    .vehicle-documentation-card-text .main-title {
        font-size: 28px;
    }
    .vehicle-documentation-card-text .sub-title {
        font-size: 21px;
        margin-bottom: 24px;
    }
    .model-select-wrapper {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
    }
    .hero-text-container span.description {
        margin-bottom: 20%;
    }
    .hero-slider .find-out-more {
        position: static;
    }
    .text.three-columns {
        padding: 32px 20px;
    }
    .text.text.three-columns .text-description {
        gap: 12px;
    }
    .text.three-columns .text-title h2 {
        font-size: 28px;
    }
    .text.three-columns .highlighted-text {
        font-size: 21px;
    }
}





@media screen and (max-width: 800px) {
    .model-slider-item .model-slider-text.model-slider-text-left {
        left: 24px;
        top: 56px;
        width: 90%;
    }
    .model-slider-item .model-slider-text.model-slider-text-right {
        right: 24px;
        top: 56px;
        width: 90%;
    }
    .model-section-center h3 {
        font-size: 32px;
    }
    .model-section-center p {
        font-size: 24px;
    }
}

@media screen and (max-width: 500px) {
    .technical-specifications-container h5 {
        font-size: 32px;
        line-height: 120%;
        margin-bottom: 48px;
    }
    .technical-specifications-container {
        padding: 64px 32px;
    }
    .technical-specifications-table dl div dt, .technical-specifications-table dl div dd {
        font-size: 18px;
        line-height: 120%;
    }
    .three-cards-container h4 {
        font-size: 32px;
        line-height: 120%;
        margin-bottom: 48px;
    }
    .card h5 {
        font-size: 21px;
        line-height: 120%;
    }
    .card p {
        font-size: 18px;
        line-height: 120%;
    }
    .card {
        gap: 8px;
    }
}

@media screen and (max-width: 650px) {
    .version {
        width: 90%;
        margin: 0 auto;
        padding: 32px 40px;
    }
    .version-wrapper {
        gap: 32px;
    }
}

@media screen and (max-width: 450px) {
    .banner-container h1 {
        font-size: 44px;
    }
    .dealer-navigation-item span {
        font-size: 14px;
    }
    .dealer-navigation-number-wrapper span {
        font-size: 21px;
    }
    .contact-row.checkbox-group {
        flex-direction: column;
    }
}

@media screen and (max-width: 390px) {
    .dealer-navigation-item span {
        font-size: 12px;
    }
    .dealer-navigation-number-wrapper span {
        font-size: 21px;
    }
}
@media screen and (max-width: 800px) {
    .model-form-row {
        gap: 16px;
    }
}







.one-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 50px 0 92px 0;
    color: #fff;
    font-size: 25px;
    line-height: 140%;
}

.one-card-container p {
    max-width: 850px;
    text-align: center;
    padding: 0 24px;
}

.one-card-container img, .one-card-container video {
    width: 100%;
    max-width: 1290px;
    display: block;
    line-height: 1;
    object-fit: contain;
}

.full-video video {
    width: 100%;
    display: block;
    line-height: 1;
    object-fit: contain;
    aspect-ratio: 1920/1080;
}

.video-section {
    height: auto;
}

@media screen and (max-width: 1608px) {
    .banner-container h1 {
        margin: 0 24px;
    }
    .news-list {
        margin: 0 24px;
    }
}

@media screen and (max-width: 1607px) {
    .news-list {
        align-items: center;
    }
    .news-list-wrapper {
        justify-content: center;
    }
    .news-filters-container {
        max-width: 1021px;
    }
    .banner-container h1 {
        max-width: 1021px;
        margin: 0 auto;
    }
    .news {
        width: 50%;
    }
}

@media screen and (max-width: 1068px) {
    .news-filters-container {
        max-width: 483px;
    }
    .banner-container h1 {
        max-width: 483px;
        margin: 0 auto;
        text-align: center;
    }
    .news {
        width: 100%;
    }
    .news-filters-container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .news-filter-wrapper {
        width: 100%;
    }
}

@media screen and (max-width: 915px) {
    .news-list-wrapper {
        gap: 24px;
        row-gap: 56px;
    }
    .news-list-container {
        padding: 24px 0;
    }
    .contact-banner h1 {
        font-size: 42px;
    }
}

@media screen and (max-width: 760px) {
    .hero-slider .find-out-more {
        bottom: 15%;
    }
}

@media screen and (max-width: 400px) {
    div.contact-banner h1 {
        padding-top: 33%;
        font-size: 24px;
    }
}






@media screen and (max-width: 500px) {
    .dealer-navigation-number-wrapper {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    .dealer-navigation-container {
        padding: 24px 0;
        width: 100%;
        box-sizing: border-box;
    }
    .dealer-navigation-item span {
        white-space: break-spaces;
        text-align: center;
    }
    .dealer-navigation-item {
        min-width: auto;
        width: 33.33%;
    }
    .text-container {
        padding-bottom: 32px;
    }
    .news-list {
        align-items: flex-start;
    }
    .news-filter-wrapper, .news-filters-container {
        width: 100%;
    }
    .news {
        min-width: auto;
    }
    .text.text.three-columns .text-description {
        gap: 0;
    }
    .model-section-bottom-left .text-wrapper {
        padding: 0 24px;
    }
    .model-section-bottom-left h3 {
        font-size: 38px;
    }
    .model-section-bottom-left p {
        font-size: 21px;
    }
    .model-section-bottom-left ul {
        font-size: 18px;
    }
    .model-section-bottom-left {
        padding: 0;
    }
    .vehicle-model-slider-item h4 {
        font-size: 34px;
    }
    .vehicle-model-slider-item p {
        font-size: 18px;
    }
    .vehicle-model-slider-item .text-wrapper {
        padding: 0 12px;
    }
    .vehicle-model-container {
        padding: 180px 24px;
    }
}

@media screen and (max-width: 855px) {
    .news {
        max-width: 483px;
        width: 100%;
    }
    .full-video video {
        object-fit: cover;
    }
    .video-section .text-wrapper {
        top: 10%;
    }
    .video-section .text-wrapper h3 {
        font-size: 32px;
    }
    .video-section .text-wrapper p {
        font-size: 18px;
    }
}

@media screen and (max-width: 1880px) {
    .news-list-container {
        padding: 24px 0;
    }
    .vehicle-model-container {
        padding: 140px 60px 0 120px;
    }
    .specifications-container {
        margin-bottom: 140px;
    }
}

@media screen and (max-width: 1650px) {
    .vehicle-model-container {
        padding-top: 120px;
        padding-left: 64px;
    }
    .specifications-container {
        margin-bottom: 50px;
        padding: 20px 0;
    }
    .specifications-container ul li span:first-of-type {
        font-size: 24px;
    }
    .vehicle-model-container h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .vehicle-model-container p {
        font-size: 18px;
        margin-bottom: 28px;
    }
    .text.three-columns ~ .cta-wrapper.cta-wrapper-center {
        bottom: 100px;
    }

}


@media screen and (max-width: 1378px) {
    .footer-notice-container {
        padding: 0 24px;
    }
    .footer-pages-container {
        padding: 0 24px;
    }
    .vehicle-model-container {
        padding: 120px 24px 180px 52px;
    }
}

@media screen and (max-width: 1000px) {
    .technical-specifications-container {
        padding: 112px 64px;
    }
    .vehicle-model-container {
        padding: 180px 48px;
        height: auto;
    }
    
}

@media screen and (max-width: 550px) {
    .vehicle-model-container {
        padding: 120px 24px 180px 24px;
    }
}

@media screen and (max-width: 500px) {
    .model-form-row {
        flex-direction: column;
    }
    .model-form-row.checkbox-group {
        align-items: flex-start;
        margin-bottom: 6px;
    }
    .model-form form {
        gap: 16px;
    }
    #screen-3 .model-picker-container {
        padding-top: 0;
    }
    .model-picker-container {
        padding-top: 32px;
    }
    .model-form-input-wrapper {
        width: 100%;
    }
    .header {
        padding: 0 16px;
        gap: 18px;
    }
    .floated-menu-container {
        display: none;
    }
    div.contact-banner h1 {
        font-size: 32px;
    }
    .vehicle-model-container {
        padding: 180px 24px;
    }
}

@media screen and (max-width: 400px) {
    .vehicle-model-container h1 {
        font-size: 40px;
    }
    .vehicle-documentation-banner-container h1 {
        font-size: 30px;
        padding: 0 12px;
    }
    .vehicle-documentation-banner-container h2 {
        font-size: 18px;
    }
    .vehicle-documentation-container {
        padding-top: 32px;
    }
    .vehicle-documentation-title h2 {
        font-size: 32px;
    }
    .vehicle-documentation-title span {
        font-size: 24px;
    }
    .vehicle-documentation-list {
        padding: 0 24px;
    }
}