html,
body {
width: 100%;
max-width: 100%;
overflow-x: clip !important;
}
@supports not (overflow: clip) {
html,
body {
overflow-x: hidden !important;
}
}
/*
* Belt-and-braces: if the page markup wraps everything in a top-level
* container (Laravel's #app, a .wrapper/.site, etc.), that box can still
* force the viewport to scroll sideways even when html/body are clipped,
* if IT is wider than 100vw. Clip common wrapper patterns too.
* Safe to keep even if none of these selectors exist on the page.
*/
#app,
.wrapper,
.site,
.site-wrapper,
main {
max-width: 100%;
overflow-x: hidden;
}
/* =========================================================
CLASSIC CARS GALLERY
EN / AR compatible
========================================================= */
.classic-cars-section {
width: 100%;
max-width: 100%;
overflow-x: clip;
overflow-y: visible;
margin-bottom: -30px;
margin-top: -60px;
}
/*
* Grid/flex children default to min-width:auto. For a slider this means the
* width of every slide can become the grid item's minimum width and make the
* whole document wider than the viewport. Allow every ancestor in this
* component to shrink to its grid column instead.
*/
.classic-cars-section .container,
.classic-cars-section .split-section,
.classic-cars-section .cars-slider-col,
.classic-cars-section .car-gallery-stage,
.classic-cars-section .car-gallery-track,
.classic-cars-section .car-gallery-thumbs {
min-width: 0 !important;
min-inline-size: 0 !important;
}
.classic-cars-section .container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.classic-cars-section .split-section {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 56px;
align-items: center;
width: 100%;
max-width: 100%;
overflow-x: clip;
box-sizing: border-box;
}
.classic-cars-section .cars-slider-col {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0 !important;
/*
* Clip ONLY the x-axis here. `overflow: hidden` (both axes) was
* cutting off content that needed to render outside this column's
* vertical bounds in RTL. `overflow: visible` let horizontal
* overflow escape all the way to the page and shift sideways.
* Clipping x while leaving y open fixes both problems at once.
*/
overflow-x: hidden;
overflow-y: visible;
box-sizing: border-box;
}
.classic-cars-section .car-gallery-stage {
position: relative;
/*
* Hard-constrain the slider's own box to its column with !important —
* this element was measuring wider than its parent column, which is
* what pushed the page wide in the first place.
*/
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 10;
overflow: hidden;
background:
radial-gradient(circle at 50% 35%, rgba(197, 160, 89, 0.14), transparent 52%),
#050505;
border: 1px solid rgba(197, 160, 89, 0.3);
border-radius: 28px;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
box-sizing: border-box;
/* isolate so nothing inside can affect ancestor layout/paint bounds */
isolation: isolate;
contain: layout paint;
}
/*
* Keep the mechanical slider LTR in both languages.
* This avoids RTL transform / scrolling inconsistencies.
*/
.classic-cars-section .car-gallery-stage,
.classic-cars-section .car-gallery-track,
.classic-cars-section .car-gallery-thumbs {
direction: ltr !important;
}
.classic-cars-section .car-gallery-track {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
transform: translate3d(0, 0, 0);
transition: transform 0.6s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
overflow: visible;
}
.classic-cars-section .car-gallery-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
min-width: 100%;
height: 100%;
overflow: hidden;
background: #050505;
user-select: none;
box-sizing: border-box;
}
.classic-cars-section .car-gallery-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain !important;
object-position: center center !important;
background: #050505;
pointer-events: none;
user-select: none;
}
.classic-cars-section .car-gallery-shade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.68) 0%,
rgba(0, 0, 0, 0.08) 42%,
transparent 70%
);
}
.classic-cars-section .car-gallery-counter {
position: absolute;
top: 18px;
right: 18px;
z-index: 8;
min-width: 60px;
height: 36px;
display: inline-flex;
justify-content: center;
align-items: center;
padding-inline: 14px;
background: rgba(5, 5, 5, 0.72);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.classic-cars-section .car-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(5, 5, 5, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.classic-cars-section .car-gallery-arrow:hover {
background: var(--gold);
color: #111;
border-color: var(--gold);
}
.classic-cars-section .car-gallery-arrow:active {
transform: translateY(-50%) scale(0.92);
}
.classic-cars-section .car-gallery-prev {
left: 14px;
}
.classic-cars-section .car-gallery-next {
right: 14px;
}
.classic-cars-section .car-gallery-arrow i {
pointer-events: none;
}
.classic-cars-section .car-gallery-dots {
position: absolute;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.classic-cars-section .car-gallery-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: width 0.25s ease, background 0.25s ease;
}
.classic-cars-section .car-gallery-dot.active {
width: 24px;
background: var(--gold);
}
.classic-cars-section .car-gallery-thumbs {
display: flex;
gap: 10px;
width: 100%;
max-width: 100%;
margin-top: 14px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
box-sizing: border-box;
overscroll-behavior-x: contain;
}
.classic-cars-section .car-gallery-thumbs::-webkit-scrollbar {
height: 6px;
}
.classic-cars-section .car-gallery-thumbs::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
}
.classic-cars-section .car-gallery-thumb {
position: relative;
flex: 0 0 92px;
width: 92px;
height: 64px;
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: #050505;
opacity: 0.48;
box-sizing: border-box;
transition:
opacity 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.classic-cars-section .car-gallery-thumb:hover {
opacity: 0.85;
}
.classic-cars-section .car-gallery-thumb.active {
opacity: 1;
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(197, 160, 89, 0.2);
}
.classic-cars-section .car-gallery-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain !important;
object-position: center center !important;
background: #050505;
}
.classic-cars-section .car-gallery-thumb-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #111;
color: var(--gold);
}
.classic-cars-section .cars-gold-rule {
margin: 0 0 24px;
}
.classic-cars-section .cars-description {
color: var(--gray-light);
margin-bottom: 24px;
line-height: 1.9;
}
.classic-cars-section .cars-ideal {
color: var(--gray-light);
line-height: 1.9;
}
.classic-cars-section .cars-ideal strong {
color: var(--gold);
}
html[dir="rtl"] .classic-cars-section .cars-content {
text-align: right;
}
/* Tablet */
@media (max-width: 992px) {
.classic-cars-section .split-section {
grid-template-columns: 1fr !important;
gap: 36px;
}
.classic-cars-section .car-gallery-stage {
aspect-ratio: 16 / 11;
}
.classic-cars-section .cars-content {
max-width: 100%;
}
}
/* Mobile */
@media (max-width: 576px) {
.classic-cars-section .split-section {
gap: 28px;
}
.classic-cars-section .car-gallery-stage {
aspect-ratio: 4 / 3;
border-radius: 18px;
}
.classic-cars-section .car-gallery-thumb {
flex: 0 0 74px;
width: 74px;
height: 52px;
}
.classic-cars-section .car-gallery-arrow {
width: 36px;
height: 36px;
}
.classic-cars-section .car-gallery-dots {
bottom: 12px;
}
.classic-cars-section .car-gallery-counter {
top: 12px;
right: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.classic-cars-section .car-gallery-track {
transition: none;
}
}
/* =========================================================
PARTNERS MARQUEE
========================================================= */
.partners-marquee-section {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden !important;
overflow-x: clip !important;
contain: layout paint;
}
.marquee-viewport {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
height: 90px;
overflow: hidden !important;
overflow-x: clip !important;
direction: ltr;
contain: strict;
}
.marquee-track {
position: absolute;
top: 10px;
left: 0;
display: flex;
width: max-content;
max-width: none;
direction: ltr;
will-change: transform;
}
.marquee-group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 70px;
padding-right: 70px;
}
.marquee-logo {
display: block;
flex-shrink: 0;
width: auto;
height: 70px;
max-width: 180px;
object-fit: contain;
}
.marquee-logo-sm {
height: 58px;
}
.marquee-track-en {
animation: partners-marquee-en 25s linear infinite;
}
.marquee-track-ar {
animation: partners-marquee-ar 25s linear infinite;
}
@keyframes partners-marquee-en {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes partners-marquee-ar {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
.marquee-viewport:hover .marquee-track {
animation-play-state: paused;
}
@media (max-width: 768px) {
.marquee-viewport {
height: 72px;
}
.marquee-track {
top: 8px;
}
.marquee-group {
gap: 38px;
padding-right: 38px;
}
.marquee-logo {
height: 52px;
max-width: 135px;
}
.marquee-logo-sm {
height: 44px;
}
.marquee-track-en,
.marquee-track-ar {
animation-duration: 18s;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
transform: none;
}
}
/* =========================================================
EXISTING HOME PAGE STYLES
========================================================= */
.academy-grid {
gap: 28px;
}
.academy-card {
background: var(--dark-2);
border: none;
padding: 46px 26px 34px;
text-align: center;
position: relative;
overflow: visible;
clip-path: polygon(
22px 0%, 100% 0%,
100% calc(100% - 22px), calc(100% - 22px) 100%,
0% 100%, 0% 22px
);
box-shadow: 6px 6px 0 var(--red-dark);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
/* hairline frame that survives the clipped corners */
.academy-card::before {
content: '';
position: absolute;
inset: 0;
clip-path: inherit;
padding: 1px;
background: linear-gradient(160deg,
rgba(255,45,74,0.55) 0%,
rgba(255,45,74,0.08) 45%,
rgba(255,45,74,0.4) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
/* crosshair bracket, top-left corner cut */
.academy-card::after {
content: '';
position: absolute;
top: 10px;
left: 29px;
width: 12px;
height: 12px;
border-top: 2px solid rgba(255,45,74,0.55);
border-left: 2px solid rgba(255,45,74,0.55);
z-index: 2;
transition: all 0.25s ease;
}
.academy-card:hover {
transform: translate(-4px, -4px);
box-shadow: 10px 10px 0 var(--red-dark);
background: var(--dark-3);
}
.academy-card:hover::after {
width: 17px;
height: 17px;
border-color: var(--red);
}
/* station number, sitting in the clipped corner like a target lane tag */
.academy-num {
position: absolute;
top: 14px;
right: 24px;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.18);
z-index: 2;
transition: color 0.25s ease;
}
.academy-card:hover .academy-num {
color: rgba(255,45,74,0.5);
}
/* icon housed in a scope ring */
.academy-icon {
position: relative;
width: 74px;
height: 74px;
margin: 4px auto 26px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.academy-icon::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid var(--red);
border-radius: 50%;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.academy-icon::after {
content: '';
position: absolute;
inset: -9px;
border: 1px solid rgba(255,45,74,0.22);
border-radius: 50%;
}
.academy-card:hover .academy-icon::before {
transform: scale(1.06);
box-shadow: 0 0 0 4px rgba(255,45,74,0.1);
}
.academy-icon i {
position: relative;
font-size: 24px;
color: var(--red);
z-index: 1;
}
/* reticle ticks poking out of the ring, N / S / E / W */
.reticle-tick {
position: absolute;
background: rgba(255,45,74,0.45);
z-index: 1;
transition: all 0.25s ease;
}
.reticle-top,
.reticle-bottom {
left: 50%;
width: 2px;
height: 9px;
transform: translateX(-50%);
}
.reticle-top { top: -15px; }
.reticle-bottom { bottom: -15px; }
.reticle-left,
.reticle-right {
top: 50%;
width: 9px;
height: 2px;
transform: translateY(-50%);
}
.reticle-left { left: -15px; }
.reticle-right { right: -15px; }
.academy-card:hover .reticle-tick {
background: var(--red);
}
.academy-card:hover .reticle-top { top: -19px; }
.academy-card:hover .reticle-bottom { bottom: -19px; }
.academy-card:hover .reticle-left { left: -19px; }
.academy-card:hover .reticle-right { right: -19px; }
/* card title with a crosshair underline that "zeros in" on hover */
.academy-card h3 {
font-size: 15px;
color: var(--white);
position: relative;
z-index: 2;
padding-top: 16px;
margin-bottom: 0;
}
.academy-card h3::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 2px;
background: var(--red);
transition: width 0.25s ease;
}
.academy-card:hover h3::before {
width: 48px;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.academy-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.academy-grid {
grid-template-columns: 1fr;
}
.academy-card {
clip-path: polygon(
16px 0%, 100% 0%,
100% calc(100% - 16px), calc(100% - 16px) 100%,
0% 100%, 0% 16px
);
}
}
/* .img-placeholder video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} */
.events-bg {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* remove this line if you want it to scroll normally, especially on mobile */
}
.events-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.55) 50%,
rgba(0,0,0,0.75) 100%
);
z-index: 1;
}
.partners-split {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 64px;
align-items: center;
max-width: 1080px;
margin: 56px auto 0;
}
/* ---- Seal column ---- */
.partners-seal-col {
text-align: center;
}
.partners-seal {
position: relative;
width: 260px;
height: 260px;
margin: 0 auto 28px;
display: flex;
align-items: center;
justify-content: center;
}
.seal-ring-outer {
position: absolute;
inset: 0;
border: 1px solid rgba(124, 124, 122, 0.646);
border-radius: 50%;
}
.seal-ring-inner {
position: absolute;
inset: 20px;
border: 2px solid var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(201,162,39,0.06);
}
.seal-core {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 30px;
}
.seal-core i {
font-size: 30px;
color: var(--gold);
margin-bottom: 4px;
}
.seal-line1 {
font-family: var(--font-heading);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white);
}
.seal-line2 {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--gray-light);
text-transform: uppercase;
}
/* four ticks marking N/E/S/W like a rangefinder seal */
.seal-tick {
position: absolute;
background: var(--gold);
z-index: 1;
}
.seal-tick-top,
.seal-tick-bottom {
left: 50%;
width: 2px;
height: 14px;
transform: translateX(-50%);
}
.seal-tick-top { top: -2px; }
.seal-tick-bottom { bottom: -2px; }
.seal-tick-left,
.seal-tick-right {
top: 50%;
width: 14px;
height: 2px;
transform: translateY(-50%);
}
.seal-tick-left { left: -2px; }
.seal-tick-right { right: -2px; }
.partners-seal-caption {
max-width: 320px;
margin: 0 auto;
color: var(--gray-light);
font-size: 14px;
line-height: 1.8;
}
/* ---- List column ---- */
.partners-list-col {
display: flex;
flex-direction: column;
}
.partner-item {
display: grid;
grid-template-columns: 40px 52px 1fr;
align-items: flex-start;
gap: 20px;
padding: 26px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: padding-left 0.25s ease;
}
.partner-item:first-child {
padding-top: 0;
}
.partner-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.partner-item:hover {
padding-left: 10px;
}
.partner-num {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(211, 210, 209, 0.849);
padding-top: 4px;
transition: color 0.25s ease;
}
.partner-item:hover .partner-num {
color: var(--gold);
}
.partner-item-icon {
width: 52px;
height: 52px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(193, 193, 192, 0.25);
border-radius: 50%;
transition: all 0.25s ease;
}
.partner-item-icon i {
font-size: 18px;
color: var(--gold);
}
.partner-item:hover .partner-item-icon {
background: rgba(220, 156, 151, 0.1);
border-color: var(--gold);
}
.partner-item-text h3 {
font-size: 16px;
color: var(--white);
margin-bottom: 6px;
}
.partner-item-text p {
font-size: 13.5px;
color: var(--gray-light);
line-height: 1.75;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.partners-split {
grid-template-columns: 1fr;
gap: 40px;
}
.partners-seal {
width: 210px;
height: 210px;
}
}
@media (max-width: 480px) {
.partner-item {
grid-template-columns: 28px 44px 1fr;
gap: 14px;
}
.partner-item-icon {
width: 44px;
height: 44px;
}
.partner-item-icon i {
font-size: 15px;
}
}
.hero-stat-label{
text-align: center;
}
/* =========================================================
CLASSIC CARS SLIDER — markup used by home.blade.php
The slider mechanics stay LTR in both locales; surrounding copy stays RTL.
========================================================= */
.classic-cars-section,
.classic-cars-section .container,
.classic-cars-section .split-section,
.classic-cars-section .cars-slider-col,
.classic-cars-section .cc-slider-wrap,
.classic-cars-section .cc-track,
.classic-cars-section .cc-thumbs {
min-width: 0 !important;
min-inline-size: 0 !important;
max-width: 100%;
box-sizing: border-box;
}
.classic-cars-section {
width: 100%;
overflow-x: clip;
}
.classic-cars-section .split-section {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: 56px;
align-items: center;
width: 100%;
}
.classic-cars-section .cars-slider-col {
width: 100%;
overflow-x: clip;
overflow-y: visible;
padding: 0 !important;
}
.classic-cars-section .cc-slider-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
direction: ltr !important;
isolation: isolate;
contain: layout paint;
border: 1px solid rgba(197, 160, 89, .3);
border-radius: 28px;
background: #050505;
box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}
.classic-cars-section .cc-track {
display: flex;
width: 100%;
height: 100%;
direction: ltr !important;
transform: translate3d(0, 0, 0);
transition: transform .6s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
touch-action: pan-y;
}
.classic-cars-section .cc-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
min-width: 100%;
height: 100%;
overflow: hidden;
background: #050505;
user-select: none;
}
.classic-cars-section .cc-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
}
.classic-cars-section .cc-gradient {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08) 42%, transparent 70%);
}
.classic-cars-section .cc-slide-info {
position: absolute;
z-index: 3;
right: 24px;
bottom: 24px;
left: 24px;
color: #fff;
}
.classic-cars-section .cc-counter {
position: absolute;
z-index: 8;
top: 18px;
right: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 60px;
height: 36px;
padding-inline: 14px;
direction: ltr;
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
background: rgba(5,5,5,.72);
color: #fff;
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(8px);
}
.classic-cars-section .cc-arrow {
position: absolute;
z-index: 10;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
transform: translateY(-50%);
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
background: rgba(5,5,5,.72);
color: #fff;
cursor: pointer;
backdrop-filter: blur(10px);
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.classic-cars-section .cc-arrow:hover {
border-color: var(--gold);
background: var(--gold);
color: #111;
}
.classic-cars-section .cc-arrow-prev { left: 14px; }
.classic-cars-section .cc-arrow-next { right: 14px; }
.classic-cars-section .cc-dots {
position: absolute;
z-index: 8;
bottom: 16px;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transform: translateX(-50%);
direction: ltr;
}
.classic-cars-section .cc-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.45);
cursor: pointer;
transition: width .25s ease, background .25s ease;
}
.classic-cars-section .cc-dot.active {
width: 24px;
background: var(--gold);
}
.classic-cars-section .cc-thumbs {
display: flex;
gap: 10px;
width: 100%;
margin-top: 14px;
padding: 10px;
overflow-x: auto;
overflow-y: hidden;
direction: ltr !important;
overscroll-behavior-x: contain;
scrollbar-width: thin;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(255,255,255,.035);
-webkit-overflow-scrolling: touch;
}
.classic-cars-section .cc-thumb {
position: relative;
flex: 0 0 92px;
width: 92px;
height: 64px;
padding: 0;
overflow: hidden;
border: 2px solid transparent;
border-radius: 10px;
background: #050505;
opacity: .48;
cursor: pointer;
transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.classic-cars-section .cc-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.classic-cars-section .cc-thumb.active {
border-color: var(--gold);
opacity: 1;
transform: translateY(-2px);
}
.classic-cars-section .classic-cars-rule { margin: 0 0 24px; }
.classic-cars-section .classic-cars-copy { color: var(--gray-light); line-height: 1.9; }
.classic-cars-section .classic-cars-copy-spaced { margin-bottom: 24px; }
html[dir="rtl"] .classic-cars-section .cars-content {
direction: rtl;
text-align: right;
}
@media (max-width: 992px) {
.classic-cars-section .split-section {
grid-template-columns: minmax(0, 1fr) !important;
gap: 36px;
}
}
@media (max-width: 576px) {
html,
body,
#app,
main {
width: 100%;
max-width: 100%;
overflow-x: clip !important;
}
.classic-cars-section {
margin-top: 0;
margin-bottom: 0;
}
.classic-cars-section .container {
width: 100%;
padding-inline: 16px;
}
.classic-cars-section .split-section { gap: 28px; }
.classic-cars-section .cc-slider-wrap {
aspect-ratio: 4 / 3;
border-radius: 18px;
}
.classic-cars-section .cc-arrow {
width: 36px;
height: 36px;
}
.classic-cars-section .cc-arrow-prev { left: 10px; }
.classic-cars-section .cc-arrow-next { right: 10px; }
.classic-cars-section .cc-counter {
top: 12px;
right: 12px;
}
.classic-cars-section .cc-dots { bottom: 12px; }
.classic-cars-section .cc-thumb {
flex-basis: 74px;
width: 74px;
height: 52px;
}
/* Final RTL mobile fix: thumbnails no longer create a horizontal
scrolling box that can enlarge the document viewport. */
html[dir="rtl"] .classic-cars-section .cc-thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
max-width: 100%;
overflow: hidden;
direction: rtl !important;
}
html[dir="rtl"] .classic-cars-section .cc-thumb {
width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 74 / 52;
}
html[dir="rtl"] .partners-marquee-section,
html[dir="rtl"] .marquee-viewport {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden !important;
overflow-x: clip !important;
direction: ltr !important;
}
html[dir="rtl"] .marquee-track {
position: absolute !important;
right: auto !important;
left: 0 !important;
margin: 0 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.classic-cars-section .cc-track { transition: none; }
}