/* GA5 Tire & Battery — extracted from html-design/index.html */
/* Design tokens (originally declared in html-design/css/style.css) */
:root {
--primary-red: #DF2027;
--dark: #09173A;
--white: #ffffff;
}
/* =========================================================
TIRE & BATTERY ICONS (shared by every section)
Usage:
========================================================= */
.ci-group {
position: absolute;
pointer-events: none;
z-index: 1;
}
.ci {
position: absolute;
display: block;
height: auto;
overflow: visible;
color: #151515;
filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.18));
}
/* White tools + soft glow on dark backgrounds */
.on-dark .ci {
color: #ffffff;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
}
.ci-tire { animation: ciSpin 10s linear infinite; }
.ci-tire.rev { animation-direction: reverse; }
.ci-battery { animation: ciFloat 4s ease-in-out infinite; }
.ci-wrench { animation: ciWiggle 3.5s ease-in-out infinite; transform-origin: 70% 30%; }
.ci-spark { animation: ciPulse 2s ease-in-out infinite; }
@keyframes ciSpin {
to { transform: rotate(360deg); }
}
@keyframes ciFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes ciWiggle {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-20deg); }
}
@keyframes ciPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.75); }
}
/* =========================================================
WOW SCROLL ANIMATIONS
JS adds .wow + a type class, then .wow-in when the element
scrolls into view. Individual transform properties (translate,
scale, rotate) are used so existing transforms and hover
effects are not overwritten.
========================================================= */
.wow { opacity: 0; }
.wow.wow-in {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: both;
animation-delay: var(--wow-delay, 0s);
}
.wow-up.wow-in { animation-name: wowUp; }
.wow-left.wow-in { animation-name: wowLeft; }
.wow-right.wow-in { animation-name: wowRight; }
.wow-zoom.wow-in { animation-name: wowZoom; }
.wow-tilt.wow-in { animation-name: wowTilt; }
.wow-pop.wow-in { animation-name: wowPop; animation-duration: 1.3s; }
.wow-wipe.wow-in { animation-name: wowWipe; animation-duration: 1.4s; }
@keyframes wowUp {
from { opacity: 0; translate: 0 60px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes wowLeft {
from { opacity: 0; translate: -90px 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes wowRight {
from { opacity: 0; translate: 90px 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes wowZoom {
from { opacity: 0; scale: 0.82; translate: 0 40px; }
to { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes wowTilt {
from { opacity: 0; rotate: -8deg; translate: 0 70px; }
to { opacity: 1; rotate: 0deg; translate: 0 0; }
}
/* Icons roll in like a tire */
@keyframes wowPop {
0% { opacity: 0; scale: 0.2; rotate: -180deg; translate: -60px 0; }
70% { opacity: 1; scale: 1.08; rotate: 8deg; translate: 0 0; }
100% { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
}
/* Images wipe open from the left with a slight zoom */
@keyframes wowWipe {
from { opacity: 1; clip-path: inset(0 100% 0 0); scale: 1.06; }
to { opacity: 1; clip-path: inset(0 0 0 0); scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ci { animation: none; }
}
/* =========================================================
HEADER
========================================================= */
.kn-header {
position: sticky;
top: 0;
z-index: 1000;
background: #ffffff;
transition:
transform 0.4s ease,
box-shadow 0.3s ease;
}
.kn-header.kn-hidden {
transform: translateY(-100%);
}
.kn-header.kn-scrolled {
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.kn-container {
display: flex;
align-items: center;
width: calc(100% - 40px);
max-width: 1420px;
min-height: 120px;
margin: 0 auto;
}
/* =========================================================
LOGO
========================================================= */
.kn-logo {
flex-shrink: 0;
display: flex;
align-items: center;
}
.kn-logo img {
width: 182px;
height: auto;
display: block;
}
/* =========================================================
DESKTOP MENU
========================================================= */
.kn-menu {
display: flex;
align-items: center;
gap: 50px;
margin-left: auto;
margin-right: 75px;
}
.kn-menu a {
position: relative;
padding: 12px 0;
color: #6b6b6b;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.kn-menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 2px;
background: var(--primary-red);
transition: width 0.3s ease;
}
.kn-menu a:hover,
.kn-menu a.active {
color: #151515;
font-weight: 600;
}
.kn-menu a:hover::after,
.kn-menu a.active::after {
width: 100%;
}
/* =========================================================
CONTACTS
========================================================= */
.kn-contacts {
display: flex;
align-items: center;
gap: 22px;
}
.kn-contact {
display: flex;
align-items: center;
gap: 10px;
color: #151515;
text-decoration: none;
font-family: "Montserrat", sans-serif;
}
.kn-contact i {
color: var(--primary-red);
font-size: 32px;
line-height: 1;
transition: transform 0.3s ease;
}
.kn-contact span {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.kn-contact small {
color: #555555;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
.kn-contact strong {
font-size: 17px;
font-weight: 600;
}
.kn-contact:hover {
color: var(--primary-red);
}
.kn-contact:hover i {
transform: scale(1.1) rotate(-8deg);
}
/* =========================================================
MOBILE TOGGLE
========================================================= */
.kn-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 46px;
height: 46px;
margin-left: auto;
padding: 0 11px;
border: 0;
background: #151515;
cursor: pointer;
}
.kn-toggle span {
display: block;
width: 100%;
height: 2px;
background: #ffffff;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.kn-toggle.open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.kn-toggle.open span:nth-child(2) {
opacity: 0;
}
.kn-toggle.open span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* =========================================================
MOBILE MENU
========================================================= */
.kn-mobile {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
background: #ffffff;
box-shadow: 0 20px 30px rgba(0,0,0,0.08);
transition: max-height 0.45s ease;
}
.kn-mobile.open {
max-height: 600px;
}
.kn-mobile nav {
display: flex;
flex-direction: column;
padding: 10px 20px 0;
}
.kn-mobile nav a {
padding: 14px 0;
border-bottom: 1px solid #eeeeee;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition:
color 0.3s ease,
padding-left 0.3s ease;
}
.kn-mobile nav a:hover,
.kn-mobile nav a.active {
color: var(--primary-red);
padding-left: 6px;
}
.kn-mobile-contacts {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
padding: 22px 20px 26px;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399px) {
.kn-menu {
gap: 34px;
margin-right: 45px;
}
.kn-contact i {
font-size: 28px;
}
.kn-contact strong {
font-size: 15px;
}
}
/* =========================================================
SMALL LAPTOP / LARGE TABLET
========================================================= */
@media (max-width: 1199px) {
.kn-container {
min-height: 96px;
}
.kn-logo img {
width: 150px;
}
.kn-menu {
gap: 26px;
margin-right: 35px;
}
.kn-menu a {
font-size: 14px;
}
.kn-location {
display: none;
}
}
/* =========================================================
TABLET + MOBILE
========================================================= */
@media (max-width: 991px) {
.kn-container {
width: calc(100% - 30px);
min-height: 80px;
}
.kn-menu,
.kn-contacts {
display: none;
}
.kn-toggle {
display: flex;
}
}
@media (max-width: 575px) {
.kn-container {
min-height: 70px;
}
.kn-logo img {
width: 125px;
}
.kn-toggle {
width: 42px;
height: 42px;
padding: 0 10px;
}
.kn-mobile-contacts {
flex-direction: column;
}
}
/* =========================================================
SECTION
========================================================= */
.hero-section {
width: 100%;
background: #ffffff;
padding: 0 0 50px;
overflow: hidden;
}
.hero-wrap {
position: relative;
width: 100%;
}
/* Slides stacked in the same grid cell so height is automatic */
.hero-slides {
display: grid;
}
.hero-slide {
grid-area: 1 / 1;
position: relative;
height: 710px;
visibility: hidden;
pointer-events: none;
}
.hero-slide.active {
visibility: visible;
pointer-events: auto;
}
/* =========================================================
IMAGE
========================================================= */
.hero-img {
position: absolute;
top: 0;
left: 5.2%;
width: 40%;
height: 100%;
background: #f1f1f1;
overflow: hidden;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1);
}
.hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.15);
transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide.active .hero-img {
clip-path: inset(0 0 0 0);
}
/* Light white overlay, strongest on the right where the heading overlaps */
.hero-img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0.7) 78%,
rgba(255, 255, 255, 0.82) 100%
);
}
.hero-slide.active .hero-img img {
transform: scale(1);
}
/* =========================================================
CONTENT
========================================================= */
.hero-content {
position: absolute;
top: 50%;
left: 38.5%;
z-index: 3;
transform: translateY(-50%);
}
.hero-content > * {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.7s ease,
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide.active .hero-content > * {
opacity: 1;
transform: translateY(0);
}
.hero-slide.active .hero-subtitle { transition-delay: 0.45s; }
.hero-slide.active .hero-content h1, .hero-slide.active .hero-content .h1 { transition-delay: 0.6s; }
.hero-slide.active .hero-btn { transition-delay: 0.75s; }
.hero-subtitle {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--primary-red);
font-size: 18px;
font-weight: 500;
}
.hero-subtitle::before,
.hero-subtitle::after {
content: "";
width: 64px;
height: 2px;
background: var(--primary-red);
}
.hero-content h1, .hero-content .h1 {
margin: 0 0 40px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(64px, 5.6vw, 108px);
font-weight: 800;
line-height: 0.93;
letter-spacing: 2px;
text-transform: uppercase;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 24px;
background: var(--primary-red);
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-weight: 700;
transition:
background 0.3s ease,
box-shadow 0.3s ease;
}
.hero-btn:hover {
background: #151515;
color: #ffffff;
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
/* =========================================================
VERTICAL NAV
========================================================= */
.hero-nav {
position: absolute;
top: 0;
bottom: 0;
right: 5.2%;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.hero-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 0;
border: 0;
background: transparent;
color: #151515;
cursor: pointer;
transition: color 0.3s ease;
}
.hero-arrow::before {
content: "";
width: 1.5px;
height: 30px;
background: currentColor;
transition: height 0.3s ease;
}
.hero-next {
flex-direction: column-reverse;
}
.hero-arrow span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.hero-arrow:hover {
color: var(--primary-red);
}
.hero-arrow:hover::before {
height: 45px;
}
/* Progress indicator */
.hero-dots {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hero-dots button {
width: 3px;
height: 8px;
padding: 0;
border: 0;
background: #151515;
cursor: pointer;
transition:
height 0.4s ease,
background 0.4s ease;
}
.hero-dots button.active {
height: 48px;
background: var(--primary-red);
}
/* =========================================================
TIRE & BATTERY ICONS (positions; icon styles in )
========================================================= */
.hero-drops {
position: absolute;
pointer-events: none;
z-index: 2;
}
.hero-drops-top {
top: 15px;
right: 9%;
width: 110px;
height: 70px;
}
.hero-drops-bottom {
bottom: 20px;
right: 9%;
width: 400px;
height: 170px;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399px) {
.hero-slide {
height: 620px;
}
.hero-img {
left: 3%;
width: 42%;
}
.hero-content {
left: 36%;
}
.hero-content h1, .hero-content .h1 {
font-size: clamp(56px, 6vw, 84px);
}
.hero-nav {
right: 3%;
}
.hero-drops-bottom {
transform: scale(0.8);
transform-origin: bottom right;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.hero-section {
padding-bottom: 40px;
}
.hero-slide {
height: 560px;
}
.hero-img {
left: 15px;
width: 52%;
}
.hero-content {
left: 38%;
right: 70px;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 16px;
}
.hero-subtitle::before,
.hero-subtitle::after {
width: 40px;
}
.hero-content h1, .hero-content .h1 {
margin-bottom: 30px;
font-size: clamp(46px, 7.4vw, 66px);
letter-spacing: 1px;
}
.hero-btn {
padding: 16px 20px;
font-size: 15px;
}
.hero-nav {
right: 22px;
}
.hero-drops-top {
right: 70px;
}
.hero-drops-bottom {
right: 40px;
transform: scale(0.6);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.hero-section {
padding: 0 0 30px;
}
/* Image on top, content below */
.hero-slide {
height: auto;
}
.hero-img {
position: relative;
left: auto;
width: calc(100% - 30px);
height: 340px;
margin: 0 auto;
}
/* Text sits below the image on mobile, so no overlay needed */
.hero-img::after {
display: none;
}
.hero-content {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
margin-top: 28px;
padding: 0 15px;
text-align: left;
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 14px;
}
.hero-subtitle::before,
.hero-subtitle::after {
width: 30px;
}
.hero-content h1, .hero-content .h1 {
font-size: clamp(36px, 11vw, 54px);
margin-bottom: 24px;
}
/* Nav becomes a horizontal row under the slide */
.hero-nav {
position: static;
flex-direction: row;
justify-content: flex-start;
gap: 22px;
width: calc(100% - 30px);
margin: 30px auto 0;
}
.hero-arrow,
.hero-next {
flex-direction: row;
}
.hero-next {
flex-direction: row-reverse;
}
.hero-arrow::before {
width: 24px;
height: 1.5px;
}
.hero-arrow:hover::before {
width: 34px;
height: 1.5px;
}
.hero-arrow span {
writing-mode: horizontal-tb;
transform: none;
}
.hero-dots {
flex-direction: row;
}
.hero-dots button {
width: 8px;
height: 3px;
}
.hero-dots button.active {
width: 40px;
height: 3px;
}
.hero-drops-top,
.hero-drops-bottom {
display: none;
}
}
@media (max-width: 420px) {
.hero-img {
height: 280px;
}
}
/* =========================================================
ALTERNATING LAYOUT
The slider adds "flip" to every other slide:
image right + text left (desktop & tablet only).
========================================================= */
@media (min-width: 768px) {
.hero-slide.flip .hero-img {
left: auto;
/* wipe in from the right */
clip-path: inset(0 0 0 100%);
}
.hero-slide.flip.active .hero-img {
clip-path: inset(0 0 0 0);
}
/* Overlay strongest on the left, where the text overlaps */
.hero-slide.flip .hero-img::after {
background:
linear-gradient(
270deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0.7) 78%,
rgba(255, 255, 255, 0.82) 100%
);
}
/* Text stays left-aligned on both layouts */
.hero-slide.flip .hero-content {
text-align: left;
}
}
/* Image stops short of the right nav so they don't collide */
@media (min-width: 1400px) {
.hero-slide.flip .hero-img {
right: 8.5%;
}
.hero-slide.flip .hero-content {
left: auto;
right: 41.5%;
}
}
@media (min-width: 992px) and (max-width: 1399px) {
.hero-slide.flip .hero-img {
right: 6.5%;
}
.hero-slide.flip .hero-content {
left: auto;
right: 39.5%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hero-slide.flip .hero-img {
right: 60px;
}
.hero-slide.flip .hero-content {
left: 15px;
right: 45%;
}
}
/* =========================================================
LEFT-SIDE DROPS (shown on flipped slides)
========================================================= */
.hero-drops-left-top {
top: 20px;
left: 7%;
width: 200px;
height: 230px;
}
.hero-drops-left-bottom {
bottom: 30px;
left: 5.2%;
width: 300px;
height: 120px;
}
/* Swap drop groups to the side without the image */
.hero-drops {
transition: opacity 0.6s ease;
}
.hero-drops-left-top,
.hero-drops-left-bottom,
.hero-wrap.is-flip .hero-drops-top,
.hero-wrap.is-flip .hero-drops-bottom {
opacity: 0;
}
.hero-wrap.is-flip .hero-drops-left-top,
.hero-wrap.is-flip .hero-drops-left-bottom {
opacity: 1;
}
@media (max-width: 1399px) {
.hero-drops-left-top {
left: 4%;
transform: scale(0.85);
transform-origin: top left;
}
.hero-drops-left-bottom {
left: 3%;
transform: scale(0.8);
transform-origin: bottom left;
}
}
@media (max-width: 991px) {
.hero-drops-left-top,
.hero-drops-left-bottom {
left: 15px;
transform: scale(0.6);
}
}
@media (max-width: 767px) {
.hero-drops-left-top,
.hero-drops-left-bottom {
display: none;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-img,
.hero-img img,
.hero-content > * {
transition: none !important;
}
}
/* =========================================================
SECTION
========================================================= */
.caring-section {
width: 100%;
background: #ffffff;
padding: 20px 0 60px;
overflow: hidden;
}
.caring-container {
width: calc(100% - 40px);
max-width: 1640px;
margin: 0 auto;
}
.caring-grid {
display: grid;
grid-template-columns: 44% 56%;
align-items: stretch;
min-height: 780px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.caring-content {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 60px 40px 60px 20px;
}
.caring-text {
position: relative;
z-index: 2;
width: 100%;
max-width: 480px;
}
/* =========================================================
SUBTITLE
========================================================= */
.caring-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.caring-subtitle::before,
.caring-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
/* =========================================================
HEADING
========================================================= */
.caring-text h2 {
margin: 0 0 25px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(56px, 4.4vw, 84px);
font-weight: 800;
line-height: 0.98;
letter-spacing: 1px;
text-transform: uppercase;
}
/* =========================================================
DESCRIPTION
========================================================= */
.caring-text p {
margin: 0 0 40px;
color: #1c1c1c;
font-size: 18px;
line-height: 1.7;
}
/* =========================================================
BUTTONS
========================================================= */
.caring-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 34px;
}
.caring-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 25px;
background: var(--primary-red);
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 700;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.caring-btn:hover {
background: var(--dark);
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(9,23,58,0.2);
}
.caring-link {
position: relative;
padding-bottom: 6px;
color: #151515;
text-decoration: none;
font-size: 15px;
font-weight: 700;
transition: color 0.3s ease;
}
.caring-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #151515;
transition:
background 0.3s ease,
width 0.3s ease;
}
.caring-link:hover {
color: var(--primary-red);
}
.caring-link:hover::after {
background: var(--primary-red);
}
/* =========================================================
IMAGE
========================================================= */
.caring-image {
position: relative;
background: #e9e9e9;
overflow: hidden;
}
.caring-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.caring-image:hover img {
transform: scale(1.04);
}
/* =========================================================
LARGE DESKTOP 1200 - 1499
========================================================= */
@media (max-width: 1499px) {
.caring-grid {
min-height: 680px;
}
.caring-text h2 {
font-size: clamp(52px, 5vw, 72px);
}
.caring-text p {
font-size: 17px;
}
}
/* =========================================================
TABLET (stacked)
========================================================= */
@media (max-width: 991px) {
.caring-section {
padding: 40px 0 50px;
}
.caring-container {
width: calc(100% - 30px);
}
.caring-grid {
grid-template-columns: 1fr;
min-height: 0;
gap: 40px;
}
.caring-content {
justify-content: center;
padding: 80px 20px 0;
}
.caring-text {
max-width: 620px;
}
.caring-text h2 {
font-size: clamp(50px, 9vw, 72px);
}
.caring-image {
min-height: 0;
aspect-ratio: 4 / 3;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.caring-section {
padding: 25px 0 40px;
}
.caring-grid {
gap: 30px;
}
.caring-content {
padding: 70px 5px 0;
}
.caring-subtitle {
font-size: 14px;
margin-bottom: 16px;
}
.caring-subtitle::before,
.caring-subtitle::after {
width: 30px;
}
.caring-text h2 {
font-size: clamp(40px, 13vw, 54px);
margin-bottom: 18px;
}
.caring-text p {
font-size: 15px;
margin-bottom: 30px;
}
.caring-actions {
gap: 24px;
}
.caring-btn {
padding: 15px 20px;
font-size: 14px;
}
.caring-link {
font-size: 14px;
}
.caring-image {
aspect-ratio: 1 / 1;
}
}
/* =========================================================
SECTION
========================================================= */
.services-section {
position: relative;
width: 100%;
background: #ffffff;
padding: 60px 0 90px;
overflow: hidden;
}
.services-container {
position: relative;
z-index: 2;
width: calc(100% - 40px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.services-heading {
text-align: center;
margin-bottom: 70px;
}
.services-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.services-subtitle::before,
.services-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
.services-heading h2 {
margin: 0;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(56px, 4.4vw, 76px);
font-weight: 800;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
}
/* =========================================================
GRID
========================================================= */
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: start;
}
/* =========================================================
CARD
========================================================= */
.service-card {
display: flex;
flex-direction: column;
gap: 34px;
padding: 30px;
color: #ffffff;
}
/* Red cards sit lower than dark cards */
.card-red {
background: var(--primary-red);
margin-top: 40px;
}
.card-dark {
background: #1b1b1b;
}
/* =========================================================
CARD IMAGE
========================================================= */
.service-img {
aspect-ratio: 5 / 4;
background: rgba(255,255,255,0.12);
overflow: hidden;
}
.service-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Card stays put; only the image zooms with a slight tilt.
Scale is large enough that the tilted corners never show. */
.service-img:hover img {
transform: scale(1.14) rotate(-3deg);
}
/* =========================================================
CARD TEXT
========================================================= */
.service-body h3 {
margin: 0 0 18px;
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
.service-body p {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.6;
}
.service-link {
position: relative;
display: inline-block;
padding-bottom: 7px;
color: #ffffff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.service-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ffffff;
transition: width 0.3s ease;
}
.service-link:hover {
color: #ffffff;
}
.service-link:hover::after {
width: 40%;
}
/* =========================================================
TIRE & BATTERY ICONS (positions; icon styles in )
========================================================= */
.services-drops {
position: absolute;
pointer-events: none;
z-index: 1;
}
.drops-left {
top: 90px;
left: 6%;
width: 120px;
height: 300px;
}
.drops-right {
top: 45%;
right: 7%;
width: 80px;
height: 80px;
}
/* =========================================================
LAPTOP 1200 - 1399
========================================================= */
@media (max-width: 1399px) {
.services-grid {
gap: 22px;
}
.service-card {
padding: 24px;
gap: 28px;
}
.service-body h3 {
font-size: 26px;
}
.service-body p {
font-size: 14px;
}
}
/* =========================================================
TABLET (2 columns)
========================================================= */
@media (max-width: 1199px) {
.services-section {
padding: 50px 0 70px;
}
.services-container {
width: calc(100% - 30px);
max-width: 820px;
}
.services-heading {
margin-bottom: 50px;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
/* Keep stagger: second column drops down */
.card-red {
margin-top: 0;
}
.services-grid .service-card:nth-child(2n) {
margin-top: 40px;
}
.service-card {
padding: 28px;
}
.service-body h3 {
font-size: 28px;
}
.drops-left {
left: 2%;
transform: scale(0.8);
transform-origin: top left;
}
.drops-right {
right: 2%;
}
}
/* =========================================================
MOBILE (1 column)
========================================================= */
@media (max-width: 767px) {
.services-section {
padding: 40px 0 50px;
}
.services-container {
width: calc(100% - 30px);
max-width: 480px;
}
.services-heading {
margin-bottom: 36px;
}
.services-subtitle {
font-size: 14px;
}
.services-subtitle::before,
.services-subtitle::after {
width: 30px;
}
.services-heading h2 {
font-size: clamp(38px, 11vw, 52px);
letter-spacing: 1px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.services-grid .service-card:nth-child(2n) {
margin-top: 0;
}
/* Image always on top on mobile */
.card-dark .service-img {
order: -1;
}
.service-card {
padding: 22px;
gap: 24px;
}
.service-body h3 {
font-size: 24px;
margin-bottom: 14px;
}
.service-body p {
font-size: 14px;
}
.drops-left {
top: 20px;
transform: scale(0.55);
}
.drops-right {
display: none;
}
}
/* =========================================================
SECTION
========================================================= */
.process-section {
position: relative;
width: 100%;
background: #ffffff;
padding: 70px 0 90px;
overflow: hidden;
}
.process-container {
position: relative;
z-index: 2;
width: calc(100% - 40px);
max-width: 1200px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.process-heading {
max-width: 620px;
margin: 0 auto 60px;
text-align: center;
}
.process-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.process-subtitle::before,
.process-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
.process-heading h2 {
margin: 0 0 22px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(50px, 3.6vw, 62px);
font-weight: 800;
line-height: 1.02;
letter-spacing: 2px;
text-transform: uppercase;
}
.process-heading p {
margin: 0;
color: #1c1c1c;
font-size: 17px;
line-height: 1.6;
}
/* =========================================================
STEPS
========================================================= */
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.process-step {
position: relative;
padding: 0 18px;
text-align: center;
}
/* Dotted connector between icons */
.process-step:not(:last-child)::after {
content: "";
position: absolute;
top: 30px;
left: calc(50% + 50px);
width: calc(100% - 100px);
border-top: 2px dotted #151515;
}
/* =========================================================
ICON
========================================================= */
.process-icon {
width: 62px;
height: 62px;
margin: 0 auto 30px;
transition: transform 0.4s ease;
}
.process-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: var(--primary-red);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.process-step:hover .process-icon {
transform: translateY(-6px) rotate(-4deg);
}
/* =========================================================
TEXT
========================================================= */
.process-step h3 {
margin: 0 0 6px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: 23px;
font-weight: 800;
line-height: 1.05;
text-transform: uppercase;
}
.process-step p {
margin: 0;
color: #1c1c1c;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
BUTTON
========================================================= */
.process-action {
margin-top: 60px;
text-align: center;
}
.process-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 25px;
background: #1b1b1b;
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: 700;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.process-btn:hover {
background: var(--primary-red);
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(223,32,39,0.25);
}
/* =========================================================
TIRE & BATTERY ICONS (positions; icon styles in )
========================================================= */
.process-drops {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 220px;
pointer-events: none;
z-index: 1;
}
/* =========================================================
TABLET (2 columns)
========================================================= */
@media (max-width: 991px) {
.process-section {
padding: 60px 0 70px;
}
.process-container {
width: calc(100% - 30px);
max-width: 720px;
}
.process-heading {
margin-bottom: 50px;
}
.process-heading h2 {
font-size: clamp(42px, 7vw, 54px);
}
.process-heading p {
font-size: 16px;
}
.process-steps {
grid-template-columns: repeat(2, 1fr);
row-gap: 50px;
}
/* Connector only between the pair on each row */
.process-step:not(:last-child)::after {
display: none;
}
.process-step:nth-child(odd)::after {
display: block;
}
.process-step h3 {
font-size: 22px;
}
.process-drops {
transform: scale(0.7);
transform-origin: top left;
}
}
/* =========================================================
MOBILE (1 column)
========================================================= */
@media (max-width: 575px) {
.process-section {
padding: 50px 0 60px;
}
.process-heading {
margin-bottom: 40px;
}
.process-subtitle {
font-size: 14px;
}
.process-subtitle::before,
.process-subtitle::after {
width: 30px;
}
.process-heading h2 {
font-size: clamp(34px, 10.5vw, 44px);
letter-spacing: 1px;
}
.process-heading p {
font-size: 15px;
}
.process-steps {
grid-template-columns: 1fr;
row-gap: 0;
max-width: 340px;
margin: 0 auto;
}
.process-step {
padding: 0 0 70px;
}
.process-step:last-child {
padding-bottom: 0;
}
/* Vertical dotted connector between steps */
.process-step:nth-child(odd)::after,
.process-step:not(:last-child)::after {
display: block;
top: auto;
bottom: 14px;
left: 50%;
width: 0;
height: 42px;
border-top: 0;
border-left: 2px dotted #151515;
}
.process-icon {
width: 56px;
height: 56px;
margin-bottom: 22px;
}
.process-step h3 {
font-size: 21px;
}
.process-step p {
font-size: 14px;
}
.process-action {
margin-top: 45px;
}
.process-btn {
padding: 15px 22px;
font-size: 14px;
}
.process-drops {
transform: scale(0.5);
}
}
/* =========================================================
SECTION
========================================================= */
.pickup-section {
width: 100%;
background: #ffffff;
padding: 10px 0 90px;
overflow: hidden;
}
/* Same side gutters as the hero banner (5.2% / 3% / 15px) */
.pickup-container {
width: 89.6%;
margin: 0 auto;
}
@media (max-width: 1399px) {
.pickup-container {
width: 94%;
}
}
/* =========================================================
BANNER
========================================================= */
.pickup-banner {
position: relative;
min-height: 820px;
padding: 90px 40px 0;
background: #151515;
overflow: hidden;
isolation: isolate;
}
/* Taller than the banner so it can move without showing edges */
.pickup-parallax {
position: absolute;
left: 0;
right: 0;
/* Extra 40% above and below so the stronger parallax (data-speed) never shows an edge */
top: -40%;
height: 180%;
z-index: -2;
background:
var(--pickup-bg, url("../img/hero-wheel-balancing.webp")) center / cover no-repeat;
transform: translate3d(0, 0, 0);
will-change: transform;
}
/* Dark overlay for text readability */
.pickup-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.35) 55%,
rgba(0, 0, 0, 0.55) 100%
);
}
.pickup-icons-left {
top: 34px;
left: 4%;
width: 130px;
height: 80px;
}
.pickup-icons-right {
top: 34px;
right: 4%;
width: 104px;
height: 80px;
}
@media (max-width: 767px) {
.pickup-icons {
display: none;
}
}
.pickup-heading {
position: relative;
max-width: 1200px;
margin: 0 auto;
text-align: center;
color: #ffffff;
}
.pickup-heading h2 {
margin: 0 0 30px;
font-family: "Montserrat", sans-serif;
font-size: clamp(56px, 4.4vw, 76px);
font-weight: 800;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.pickup-heading p {
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* =========================================================
CARDS
========================================================= */
.pickup-cards {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1200px;
margin: -240px auto 0;
align-items: start;
}
.pickup-card {
padding: 30px 30px 30px;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.pickup-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.pickup-light {
background: #e6e6e6;
color: #151515;
}
.pickup-red {
background: var(--primary-red);
color: #ffffff;
margin-top: 30px;
}
.pickup-dark {
background: #1b1b1b;
color: #ffffff;
}
/* =========================================================
CARD IMAGE
========================================================= */
.pickup-img {
aspect-ratio: 27 / 20;
margin-bottom: 28px;
background: rgba(0,0,0,0.08);
overflow: hidden;
}
.pickup-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pickup-card:hover .pickup-img img {
transform: scale(1.07);
}
/* =========================================================
CARD TEXT
========================================================= */
.pickup-price {
font-family: "Montserrat", sans-serif;
font-size: 46px;
font-weight: 800;
line-height: 1;
}
.pickup-price sup {
top: -0.9em;
font-size: 22px;
}
.pickup-card h3 {
margin: 10px 0 16px;
font-family: "Montserrat", sans-serif;
font-size: 19px;
font-weight: 800;
text-transform: uppercase;
}
.pickup-card p {
margin: 0 0 30px;
font-size: 12.5px;
line-height: 1.45;
}
/* =========================================================
BUTTON
========================================================= */
.pickup-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 18px;
background: var(--primary-red);
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: 700;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.pickup-btn:hover {
background: #1b1b1b;
color: #ffffff;
transform: translateY(-3px);
}
.pickup-dark .pickup-btn:hover {
background: #ffffff;
color: #1b1b1b;
}
.pickup-red .pickup-btn {
background: #ffffff;
color: #1b1b1b;
}
.pickup-red .pickup-btn:hover {
background: #1b1b1b;
color: #ffffff;
}
/* =========================================================
LAPTOP 992 - 1199
========================================================= */
@media (max-width: 1199px) {
.pickup-banner {
min-height: 740px;
padding-top: 70px;
}
.pickup-heading h2 {
font-size: clamp(48px, 6vw, 64px);
}
.pickup-cards {
gap: 22px;
max-width: 920px;
margin-top: -220px;
}
.pickup-card {
padding: 24px;
}
.pickup-price {
font-size: 40px;
}
.pickup-card h3 {
font-size: 17px;
}
}
/* =========================================================
TABLET (2 + 1 columns)
========================================================= */
@media (max-width: 991px) {
.pickup-section {
padding: 10px 0 70px;
}
.pickup-container {
width: calc(100% - 30px);
}
.pickup-banner {
min-height: 660px;
padding: 60px 30px 0;
}
.pickup-heading h2 {
margin-bottom: 20px;
font-size: clamp(42px, 8vw, 58px);
}
.pickup-cards {
grid-template-columns: repeat(2, 1fr);
max-width: 680px;
margin-top: -190px;
}
/* Third card centred on its own row */
.pickup-dark {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 11px);
}
.pickup-card p {
font-size: 13.5px;
}
}
/* =========================================================
MOBILE (1 column)
========================================================= */
@media (max-width: 575px) {
.pickup-section {
padding: 0 0 50px;
}
.pickup-container {
width: calc(100% - 30px);
}
.pickup-banner {
min-height: 560px;
padding: 50px 20px 0;
}
.pickup-heading h2 {
font-size: clamp(34px, 11vw, 44px);
letter-spacing: 1px;
margin-bottom: 16px;
}
.pickup-heading p {
font-size: 14px;
}
.pickup-cards {
grid-template-columns: 1fr;
gap: 22px;
max-width: 400px;
margin-top: -120px;
}
.pickup-red {
margin-top: 0;
}
.pickup-dark {
grid-column: auto;
width: 100%;
}
.pickup-card {
padding: 22px;
}
.pickup-card:hover {
transform: none;
}
.pickup-img {
margin-bottom: 22px;
}
.pickup-price {
font-size: 40px;
}
.pickup-card p {
font-size: 14px;
margin-bottom: 24px;
}
}
/* =========================================================
SECTION
========================================================= */
.team-section {
width: 100%;
background: #ffffff;
padding: 60px 0 90px;
overflow: hidden;
}
/* Same width as the services section */
.team-container {
width: calc(100% - 40px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
SUBTITLE (shared)
========================================================= */
.team-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.team-subtitle::before,
.team-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
/* =========================================================
FEATURED MEMBER
========================================================= */
.team-featured {
display: grid;
grid-template-columns: 45% 55%;
grid-template-rows: auto auto;
}
.team-featured-img {
position: relative;
grid-column: 1;
grid-row: 1 / 3;
min-height: 720px;
background: #3a3c44;
overflow: hidden;
}
/* Full-bleed photo, framed on the face */
.team-featured-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
display: block;
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-featured:hover .team-featured-img img {
transform: scale(1.04);
}
.team-heading {
grid-column: 2;
grid-row: 1;
padding: 0 0 60px 80px;
}
.team-heading h2 {
margin: 0;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(56px, 4.4vw, 76px);
font-weight: 800;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
}
.team-featured-info {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 70px 70px 80px;
background: linear-gradient(90deg, #2a2a2e 0%, #000000 35%, #000000 100%);
color: #ffffff;
}
.team-featured-info h3 {
margin: 0 0 18px;
color: var(--primary-red);
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
/* Speciality line under each member's name */
.team-role {
display: block;
margin: -6px 0 16px;
color: #6b6b6b;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.team-featured-info .team-role {
color: rgba(255, 255, 255, 0.7);
}
.team-featured-info p {
max-width: 560px;
margin: 0 0 34px;
font-size: 16px;
font-weight: 500;
line-height: 1.7;
}
.team-featured-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.team-featured-info .team-link {
color: #ffffff;
}
.team-featured-info .team-link::after {
background: #ffffff;
}
.team-social {
display: flex;
gap: 22px;
}
.team-social a {
color: var(--primary-red);
font-size: 18px;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.team-social a:hover {
color: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
LINK (shared)
========================================================= */
.team-link {
position: relative;
display: inline-block;
align-self: flex-start;
padding-bottom: 7px;
color: #151515;
text-decoration: none;
font-size: 15px;
font-weight: 700;
}
.team-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #151515;
transition: width 0.3s ease;
}
.team-link:hover {
color: var(--primary-red);
}
.team-link:hover::after {
width: 40%;
background: var(--primary-red);
}
/* =========================================================
OTHER MEMBERS
========================================================= */
.team-members {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 30px;
}
.team-member {
display: grid;
grid-template-columns: 320px 1fr;
align-items: center;
gap: 36px;
}
.team-member-img {
aspect-ratio: 1 / 1;
background: #3a3c44;
overflow: hidden;
}
.team-member-img img {
width: 100%;
height: 100%;
object-fit: cover;
/* Portrait photos: keep the face in the square crop */
object-position: center 35%;
display: block;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-member:hover .team-member-img img {
transform: scale(1.06);
}
.team-member-info h3 {
margin: 0 0 16px;
color: var(--primary-red);
font-family: "Montserrat", sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
.team-member-info p {
margin: 0 0 22px;
color: #1c1c1c;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
TESTIMONIAL
========================================================= */
.team-testimonial {
position: relative;
width: calc(100% - 40px);
max-width: 1400px;
min-height: 620px;
margin: 30px auto 0;
padding-bottom: 90px;
}
/* Photo fills the block; white card covers the left, leaving
the right side and a strip along the bottom visible */
.testimonial-bg {
position: absolute;
inset: 0;
background: #8a0010;
overflow: hidden;
z-index: 0;
}
/* Taller than its box so it can move without showing edges */
.testimonial-parallax {
position: absolute;
left: 0;
right: 0;
top: -25%;
height: 150%;
/* 2400x1800 photo of two cars linked by jumper cables (Pexels, free licence);
the cables and second car sit on the right, beside the white card */
background: var(--testimonial-bg, url("../img/testimonial-jump-start-cars.webp")) right center / cover no-repeat;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.testimonial-card {
position: relative;
z-index: 1;
width: 50%;
padding: 50px 70px 70px 0;
background: #ffffff;
}
.testimonial-card h2 {
margin: 0 0 20px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(50px, 3.8vw, 66px);
font-weight: 800;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
}
.testimonial-quote {
display: block;
margin-left: -10px;
color: var(--primary-red);
font-size: 60px;
line-height: 0.9;
}
.testimonial-card blockquote {
margin: 6px 0 26px;
color: #1c1c1c;
font-size: 20px;
line-height: 1.6;
}
.testimonial-name {
display: block;
color: #151515;
font-size: 16px;
font-weight: 700;
}
.testimonial-role {
display: block;
margin-top: 4px;
color: #444;
font-size: 14px;
}
/* =========================================================
TESTIMONIAL SLIDER
========================================================= */
.tslider {
touch-action: pan-y;
}
/* Slides stacked in one grid cell so height fits the tallest */
.tslider-track {
display: grid;
}
.tslide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translateX(40px);
transition:
opacity 0.6s ease,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.6s;
}
.tslide.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition:
opacity 0.6s ease 0.15s,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
visibility 0s;
}
/* Outgoing slide leaves to the left */
.tslide.leaving {
transform: translateX(-40px);
}
.tslider-controls {
display: flex;
align-items: center;
gap: 18px;
margin-top: 30px;
}
.tslider-arrow {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1.5px solid #151515;
background: transparent;
color: #151515;
font-size: 18px;
cursor: pointer;
transition:
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.tslider-arrow:hover {
background: var(--primary-red);
border-color: var(--primary-red);
color: #ffffff;
}
.tslider-dots {
display: flex;
align-items: center;
gap: 8px;
}
.tslider-dots button {
width: 10px;
height: 3px;
padding: 0;
border: 0;
background: #151515;
cursor: pointer;
transition:
width 0.4s ease,
background 0.4s ease;
}
.tslider-dots button.active {
width: 40px;
background: var(--primary-red);
}
@media (max-width: 767px) {
.tslider-controls {
margin-top: 24px;
gap: 14px;
}
.tslider-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.tslide,
.tslide.active {
transform: none;
transition: opacity 0.3s ease, visibility 0s;
}
}
/* =========================================================
LAPTOP 1200 - 1399
========================================================= */
@media (max-width: 1399px) {
.team-featured-img {
min-height: 640px;
}
.team-heading {
padding-left: 60px;
}
.team-featured-info {
padding: 56px 50px 56px 60px;
}
.team-member {
grid-template-columns: 260px 1fr;
gap: 28px;
}
.team-member-info h3 {
font-size: 24px;
}
.testimonial-card {
padding-right: 50px;
}
}
/* =========================================================
TABLET (like services: narrower container)
========================================================= */
@media (max-width: 1199px) {
.team-section {
padding: 50px 0 70px;
}
.team-container,
.team-testimonial {
width: calc(100% - 30px);
max-width: 820px;
}
.team-featured-img {
min-height: 520px;
}
.team-heading {
padding: 0 0 40px 40px;
}
.team-heading h2 {
font-size: clamp(46px, 6vw, 60px);
}
.team-featured-info {
padding: 40px 32px 40px 40px;
}
.team-featured-info h3 {
font-size: 24px;
}
.team-featured-info p {
font-size: 15px;
margin-bottom: 26px;
}
.team-members {
gap: 26px;
}
.team-member {
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
}
.team-member-img {
aspect-ratio: 4 / 3;
}
.team-member-info h3 {
font-size: 22px;
margin-bottom: 12px;
}
.team-member-info p {
font-size: 14px;
}
.team-testimonial {
min-height: 520px;
padding-bottom: 60px;
}
.testimonial-card {
width: 60%;
padding: 40px 36px 50px 0;
}
.testimonial-card h2 {
font-size: clamp(40px, 5vw, 52px);
}
.testimonial-quote {
font-size: 50px;
}
.testimonial-card blockquote {
font-size: 17px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.team-section {
padding: 40px 0 50px;
}
/* Featured: heading -> photo -> info */
.team-featured {
grid-template-columns: 1fr;
}
.team-heading {
grid-column: 1;
grid-row: 1;
padding: 0 0 30px;
}
.team-subtitle {
font-size: 14px;
}
.team-subtitle::before,
.team-subtitle::after {
width: 30px;
}
.team-heading h2 {
font-size: clamp(38px, 11vw, 52px);
letter-spacing: 1px;
}
.team-featured-img {
grid-column: 1;
grid-row: 2;
min-height: 0;
aspect-ratio: 4 / 5;
}
.team-featured-info {
grid-column: 1;
grid-row: 3;
padding: 30px 24px;
background: #000000;
}
.team-featured-info h3 {
font-size: 22px;
}
.team-featured-info p {
font-size: 14px;
}
.team-link {
font-size: 14px;
}
/* Members: one per row */
.team-members {
grid-template-columns: 1fr;
gap: 30px;
}
.team-member-info h3 {
font-size: 22px;
}
/* Testimonial: photo on top, card below */
.team-testimonial {
min-height: 0;
padding-bottom: 0;
margin-top: 40px;
}
.testimonial-bg {
position: relative;
height: 280px;
}
.testimonial-card {
width: 100%;
padding: 30px 0 0;
}
.testimonial-card h2 {
font-size: clamp(32px, 10vw, 44px);
letter-spacing: 1px;
}
.testimonial-quote {
font-size: 44px;
}
.testimonial-card blockquote {
font-size: 15px;
}
.testimonial-name {
font-size: 15px;
}
.testimonial-role {
font-size: 13px;
}
}
/* =========================================================
SECTION
========================================================= */
.find-section {
width: 100%;
background: #ffffff;
padding: 40px 0 80px;
overflow: hidden;
}
.find-container {
display: grid;
grid-template-columns: minmax(0, 710px) minmax(0, 1fr);
align-items: start;
gap: 80px;
width: calc(100% - 40px);
max-width: 1620px;
margin: 0 auto;
}
/* =========================================================
MAP
========================================================= */
.find-map {
position: relative;
aspect-ratio: 1 / 1;
background: #eeeeee;
overflow: hidden;
}
.find-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* =========================================================
HEADING
========================================================= */
.find-content {
position: relative;
padding-top: 45px;
max-width: 840px;
}
.find-icons {
top: 40px;
right: 0;
width: 170px;
height: 90px;
}
@media (max-width: 575px) {
.find-icons {
display: none;
}
}
.find-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.find-subtitle::before,
.find-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
.find-content h2 {
margin: 0 0 80px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(56px, 4.3vw, 82px);
font-weight: 800;
line-height: 0.92;
letter-spacing: 2px;
text-transform: uppercase;
}
/* =========================================================
INFO GRID
========================================================= */
.find-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 40px;
}
.find-content h3 {
margin: 0 0 16px;
color: var(--primary-red);
font-family: "Montserrat", sans-serif;
font-size: 26px;
font-weight: 700;
}
/* Left details */
.find-item {
padding: 0 0 30px;
margin-bottom: 26px;
border-bottom: 1px solid #e6e6e6;
}
.find-item:last-child {
border-bottom: 0;
margin-bottom: 0;
}
.find-item a {
color: #1c1c1c;
font-size: 15px;
text-decoration: none;
transition: color 0.3s ease;
}
.find-item a:hover {
color: var(--primary-red);
}
/* =========================================================
WORKING HOURS
========================================================= */
.find-hours {
padding-bottom: 22px;
margin-bottom: 26px;
border-bottom: 1px solid #e6e6e6;
}
.find-hour-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 0;
color: #1c1c1c;
font-size: 15px;
}
.find-hour-row + .find-hour-row {
border-top: 1px solid #e6e6e6;
}
.find-day {
text-transform: uppercase;
}
.find-book {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
background: var(--primary-red);
color: #ffffff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.find-book:hover {
background: #151515;
color: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
SOCIAL
========================================================= */
.find-social {
display: flex;
align-items: center;
gap: 30px;
padding-left: 12px;
}
.find-social a {
color: #151515;
font-size: 19px;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.find-social a:hover {
color: var(--primary-red);
transform: translateY(-3px);
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399px) {
.find-container {
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
gap: 50px;
}
.find-content {
padding-top: 20px;
}
.find-content h2 {
font-size: clamp(50px, 5vw, 68px);
margin-bottom: 50px;
}
.find-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.find-content h3 {
font-size: 23px;
}
.find-hours {
max-width: 460px;
}
}
/* =========================================================
TABLET (stacked)
========================================================= */
@media (max-width: 991px) {
.find-section {
padding: 40px 0 60px;
}
.find-container {
grid-template-columns: 1fr;
gap: 45px;
width: calc(100% - 30px);
max-width: 720px;
}
/* Content first, map below */
.find-content {
order: -1;
padding-top: 0;
max-width: none;
}
.find-content h2 {
font-size: clamp(46px, 8vw, 62px);
margin-bottom: 40px;
}
.find-grid {
grid-template-columns: 1fr 1.2fr;
gap: 36px;
}
.find-map {
aspect-ratio: 4 / 3;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.find-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.find-hours {
max-width: none;
}
}
@media (max-width: 575px) {
.find-section {
padding: 30px 0 50px;
}
.find-subtitle {
font-size: 14px;
}
.find-subtitle::before,
.find-subtitle::after {
width: 30px;
}
.find-content h2 {
font-size: clamp(36px, 11vw, 46px);
letter-spacing: 1px;
margin-bottom: 32px;
}
.find-content h3 {
font-size: 21px;
margin-bottom: 12px;
}
.find-item {
padding-bottom: 22px;
margin-bottom: 20px;
}
.find-hour-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"day book"
"time book";
row-gap: 2px;
font-size: 14px;
}
.find-day { grid-area: day; font-weight: 600; }
.find-time { grid-area: time; }
.find-book { grid-area: book; }
.find-social {
gap: 26px;
padding-left: 4px;
}
.find-map {
aspect-ratio: 1 / 1;
}
}
/* =========================================================
SECTION
========================================================= */
.book-section {
width: 100%;
background: #ffffff;
padding: 40px 0 80px;
overflow: hidden;
}
.book-container {
position: relative;
width: calc(100% - 40px);
max-width: 1470px;
margin: 0 auto;
}
/* =========================================================
FORM COLUMN
========================================================= */
.book-form-col {
position: relative;
z-index: 2;
width: 700px;
max-width: 100%;
}
.book-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--primary-red);
font-size: 16px;
font-weight: 500;
}
.book-subtitle::before,
.book-subtitle::after {
content: "";
width: 50px;
height: 2px;
background: var(--primary-red);
}
.book-form-col h2 {
margin: 0 0 95px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: clamp(50px, 3.5vw, 64px);
font-weight: 800;
line-height: 0.95;
letter-spacing: 4px;
text-transform: uppercase;
}
/* =========================================================
FORM
========================================================= */
.book-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 34px 20px;
}
.book-field-full,
.book-submit {
grid-column: 1 / -1;
}
.book-field label {
display: block;
margin-bottom: 6px;
color: #1c1c1c;
font-size: 15px;
}
.book-field input,
.book-field select,
.book-field textarea {
width: 100%;
height: 50px;
padding: 0 15px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: #ededed;
color: #1c1c1c;
font-size: 15px;
outline: none;
transition:
border-color 0.3s ease,
background 0.3s ease;
}
.book-field textarea {
height: 122px;
padding: 12px 15px;
resize: vertical;
}
.book-field select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
background:
#ededed
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23151515' stroke-width='1.8'/%3E%3C/svg%3E")
no-repeat right 16px center;
cursor: pointer;
}
.book-field input:focus,
.book-field select:focus,
.book-field textarea:focus {
border-bottom-color: var(--primary-red);
background-color: #e6e6e6;
}
.book-field.has-error input {
border-bottom-color: var(--primary-red);
}
/* =========================================================
SUBMIT
========================================================= */
.book-submit {
text-align: center;
}
.book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 25px;
border: 0;
background: var(--primary-red);
color: #ffffff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.book-btn:hover {
background: #151515;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
.book-status {
min-height: 22px;
margin: 14px 0 0;
font-size: 14px;
}
.book-status.ok {
color: #1a8a3a;
}
.book-status.error {
color: var(--primary-red);
}
/* =========================================================
IMAGE
========================================================= */
.book-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 600px;
z-index: 1;
background: #e9e9e9;
}
.book-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* White cut-out in the lower-left corner of the image */
.book-image::before {
content: "";
position: absolute;
top: 190px;
left: 0;
bottom: 0;
width: 180px;
background: #ffffff;
z-index: 1;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399px) {
.book-form-col {
width: 620px;
}
.book-image {
left: 540px;
}
.book-image::before {
width: 140px;
}
.book-form-col h2 {
margin-bottom: 70px;
}
}
@media (max-width: 1199px) {
.book-form-col {
width: 560px;
}
.book-image {
left: 500px;
}
.book-image::before {
top: 160px;
width: 110px;
}
.book-form-col h2 {
font-size: 46px;
letter-spacing: 2px;
}
}
/* =========================================================
TABLET (stacked)
========================================================= */
@media (max-width: 991px) {
.book-section {
padding: 40px 0 60px;
}
.book-container {
display: flex;
flex-direction: column;
gap: 45px;
width: calc(100% - 30px);
max-width: 720px;
}
.book-form-col {
width: 100%;
}
.book-form-col h2 {
margin-bottom: 45px;
font-size: clamp(42px, 7.5vw, 56px);
}
/* Image becomes a banner below the form */
.book-image {
position: relative;
left: auto;
height: 420px;
}
.book-image::before {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.book-section {
padding: 30px 0 50px;
}
.book-container {
gap: 35px;
}
.book-subtitle {
font-size: 14px;
}
.book-subtitle::before,
.book-subtitle::after {
width: 30px;
}
.book-form-col h2 {
margin-bottom: 32px;
font-size: clamp(32px, 10vw, 42px);
letter-spacing: 1px;
}
.book-form {
grid-template-columns: 1fr;
gap: 20px;
}
.book-field label {
font-size: 14px;
}
.book-btn {
width: 100%;
}
.book-image {
height: 280px;
}
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
width: 100%;
background: #ffffff;
padding: 10px 0 0;
}
.footer-box {
position: relative;
width: calc(100% - 174px);
max-width: 1700px;
margin: 0 auto;
padding: 80px 40px 40px;
background: #e6e6e6;
overflow: hidden;
}
.footer-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"brand news"
"copy lists";
column-gap: 60px;
row-gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
/* =========================================================
BRAND
========================================================= */
.footer-brand {
grid-area: brand;
}
.footer-logo img {
width: 272px;
max-width: 100%;
height: auto;
display: block;
}
.footer-tagline {
margin: 22px 0 0;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: 21px;
font-weight: 500;
letter-spacing: 1px;
}
.footer-copy {
grid-area: copy;
align-self: end;
margin: 0;
color: #151515;
font-size: 15px;
}
/* =========================================================
NEWSLETTER
========================================================= */
.footer-news {
grid-area: news;
}
.footer-news-title {
max-width: 500px;
margin: 0 0 16px;
color: #151515;
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.5px;
}
.footer-news-form {
display: flex;
max-width: 550px;
}
.footer-news-form input {
flex: 1;
min-width: 0;
height: 50px;
padding: 0 15px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: #ffffff;
color: #151515;
font-size: 15px;
outline: none;
transition: border-color 0.3s ease;
}
.footer-news-form input::placeholder {
color: #666666;
}
.footer-news-form input:focus {
border-bottom-color: var(--primary-red);
}
.footer-news-form button {
flex-shrink: 0;
padding: 0 25px;
border: 0;
background: #1b1b1b;
color: #ffffff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s ease;
}
.footer-news-form button:hover {
background: var(--primary-red);
}
.footer-news-status {
min-height: 20px;
margin: 8px 0 0;
font-size: 14px;
}
.footer-news-status.ok {
color: #1a8a3a;
}
.footer-news-status.error {
color: var(--primary-red);
}
/* =========================================================
LINKS + CONTACTS
========================================================= */
.footer-lists {
grid-area: lists;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 550px;
margin-top: -20px;
}
.footer-links {
margin: 0;
padding: 0;
list-style: none;
}
.footer-links li + li {
margin-top: 10px;
}
.footer-links a {
position: relative;
color: #151515;
font-size: 15px;
text-decoration: none;
transition:
color 0.3s ease,
padding-left 0.3s ease;
}
.footer-links a:hover {
color: var(--primary-red);
padding-left: 6px;
}
.footer-contacts {
display: flex;
flex-direction: column;
gap: 18px;
}
.footer-contacts > a {
display: flex;
align-items: center;
gap: 10px;
color: #151515;
font-size: 15px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-contacts > a i {
width: 20px;
color: var(--primary-red);
font-size: 19px;
text-align: center;
}
.footer-contacts > a:hover {
color: var(--primary-red);
}
.footer-social {
display: flex;
gap: 16px;
margin-top: 4px;
}
.footer-social a {
color: #151515;
font-size: 19px;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.footer-social a:hover {
color: var(--primary-red);
transform: translateY(-3px);
}
/* =========================================================
TIRE & BATTERY ICONS (positions; icon styles in )
========================================================= */
.footer-drops {
position: absolute;
top: 80px;
left: 50%;
width: 440px;
height: 300px;
margin-left: -470px;
pointer-events: none;
z-index: 1;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1399px) {
.footer-box {
width: calc(100% - 80px);
}
.footer-drops {
margin-left: -440px;
transform: scale(0.85);
transform-origin: top right;
}
}
/* =========================================================
TABLET (stacked)
========================================================= */
@media (max-width: 991px) {
.footer-box {
width: calc(100% - 30px);
padding: 60px 35px 35px;
}
.footer-inner {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"news"
"lists"
"copy";
row-gap: 45px;
}
.footer-lists {
max-width: none;
margin-top: 0;
}
.footer-news-form {
max-width: none;
}
.footer-drops {
top: 30px;
left: auto;
right: 20px;
margin-left: 0;
transform: scale(0.6);
transform-origin: top right;
}
.footer-copy {
padding-top: 25px;
border-top: 1px solid rgba(0,0,0,0.1);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.footer-box {
width: 100%;
padding: 45px 20px 28px;
}
.footer-inner {
row-gap: 36px;
}
.footer-logo img {
width: 200px;
}
.footer-tagline {
margin-top: 14px;
font-size: 18px;
}
.footer-news-title {
font-size: 17px;
}
.footer-news-form {
flex-direction: column;
gap: 10px;
}
.footer-news-form button {
height: 50px;
}
.footer-lists {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-drops {
transform: scale(0.45);
}
.footer-copy {
font-size: 13px;
text-align: center;
}
}