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

#splash-screen {
    position: fixed; width: 100%; height: 100vh;
    background: #0a0a0a; display: flex; justify-content: center; align-items: center;
    z-index: 1000;
text-decoration:none;
color:rgb(250, 250, 250);
font-family: 'Franklin Gothic Medium';
font-weight: bolder;
}
.progress-wrapper { width: 390px; height: 4px; background: #ffffff; position: center; }
.progress-wheel { width: 0%; height: 100%; background: #ff0000; position:relative; }
body.loading{
    overflow: hidden;
    height: 100vh;
}
.counter-bubble {
    position: absolute; right: -20px; top: -40px;
    background: #000a0b; color: #f8fafa; padding: 4px 8px; border-radius: 4px; font-size: 16px;}
.counter-bubble::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    border-top: 5px solid#ffffff; border-left: 5px solid transparent; border-right: 5px solid transparent;
}


body { font-family:sans-serif; color: #ffffff;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(WEBSITE\ BACKGROUND.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;}

.logo { color: #ffffff; font-size: 28px; font-weight: bold; }
.navbar { position: sticky; top: 0; width: 100%; z-index: 1000; background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(250, 0, 0, 1)); display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; }
.navbar .menu ul { display: flex; list-style: none; margin: 0; padding: 0; }
.navbar .menu ul li { margin-left: 35px; font-size: 14px; }
.navbar .menu ul li:first-child { margin-left: 0; }
.navbar .menu ul li a { text-decoration: none; color: #ffffff; font-weight: bold; transition: 0.4s; }
.navbar .menu ul li a:hover { color:black; }

.home-section h1 { font-size: 48px; margin-bottom: 20px; }
.section-content { max-width: 1000px; margin: 0 auto; }
.section-text { font-size: 16px; line-height: 1.6; color: #ffff; margin-bottom: 40px; }

.section-title { font-size: 42px; margin-bottom: 15px; color: #f9f9f8; text-transform: uppercase; }

.footer { background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); padding: 70px 5px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-col h4 { font-size: 18px; margin-bottom: 15px; color: #f9f9f8; }
.footer-col p { font-size: 17px; color: #bbb; line-height: 1.6; }
.footer-bottom { text-align: center; margin-top: 40px; font-size: 14px; color: #bbb; }

.car-row { display: flex; align-items: flex-start; gap: 40px; margin: 60px auto; padding: 20px; max-width: 1200px; }

.car-row.reverse { flex-direction: row-reverse; }

.car-image img { width: 100%; max-width: 450px; border-radius: 10px; transition: transform 0.4s; }

.car-image img:hover { transform: scale(1.05); }

.car-info { flex: 1; max-width: 500px; }

.car-info h2 { font-size: 28px; margin-bottom: 15px; color: #fbfafa; }

.car-info p { font-size: 16px; color: #ccc; margin-bottom: 15px; line-height: 1.6; }

.car-info div { list-style: none; padding: 0; }

.car-info div li { padding-left: 20px; margin-bottom: 8px; font-size: 14px; color: #ea1212; }

.car-info div li { color: #ffffff; font-weight: bold; }


.card-01 {background-image: url(acc.jpg); background-position: center; background-size: 100%; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-01:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }


.card-02 {background-image: url(acc\ 1.jpg); background-position: center; background-size: 85%; border-radius: 10px; padding: 150px; transition: all 0.4s; }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }


.card-03 {background-image: url(card3.jpg); background-position: center; background-size: 90%; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-03:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }


.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1300px; margin: 0 auto ; padding: 20px; }
.card-1 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(rally.jpeg);background-position: cover;background-size: 110%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-1:hover {  transform: translateY(-10px); }
.card h1 { font-size: 20px; color: #ffffff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbbbbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: dotted; padding: 100px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-2 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(images\ \(7\).jpeg); background-position: center;background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-2:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-3 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(spin\ festival.jpg); background-position: center; background-size: 100%;  border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-3:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-4 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(rtsa.jpg); background-position: center; background-size: 125%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-4:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-5 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(car\ meet.jpg); background-position: cover; background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-5:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-6 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(kids.jpg); background-position: center; background-size: 155%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-6:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-7 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(zedcar.jpg); background-position: center; background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-7:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-8 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(sprayrite.jpg); background-position: center; background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-8:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-9 {background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(muyana.jpg); background-position: center; background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-9:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-10 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(acc.jpg); border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-10:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-11 {background-image: url(acc.jpg); border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-11:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }


.card-20 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(TACE.jpg); border: 2px solid #e20808; background-position: center; background-size: 100%; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-20:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-19 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(muyana.jpg); background-position: cover; background-size: 100%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-19:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }

.card-18 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(sprayrite.jpg); background-position: cover; background-size: 99%; border: 2px solid #e20808; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-18:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }



.card-21 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(wire.jpg); background-position: center; background-size: 100%; border: 2px solid #e20808; background-position: center; background-size: 100%; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-21:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }


.card-22 {background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(jan\ japan.webp); background-position: center; background-size: 100%; border: 2px solid #e20808; background-position: center; background-size: 100%; border-radius: 10px; padding: 20px; transition: all 0.4s; }
.card-22:hover {  transform: translateY(-10px); }
.card h3 { font-size: 20px; color: #fff; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 20px; }
.button { background: #e20808; color: #ffffff; text-decoration: none; padding: 10px 25px; border-radius: 5px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.button:hover { background: #ff0000; transform: scale(1.05); }


.a[href^="tel:"],
.a[href^="mailto:"] {
    color: #e20808;
    text-decoration: none;
    font-weight: bold;
}
.a[href^="tel:"]:hover,
.a[href^="mailto:"]:hover {
    text-decoration: underline;
    color: #ff0000

}