*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#2c3e50;--secondary:#e74c3c;--accent:#e71408;--light:#ecf0f1;--dark:#34495e;--text:#333;--text-light:#666;--white:#fff;--gray:#ddd}
body{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.6;color:var(--text);background-color:#f8f9fa;min-height:100vh;display:flex;flex-direction:column}
.page{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}
.homebrands{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background-color:var(--white);border-radius:8px;padding:30px;box-shadow:0 5px 15px #0000000d;transition:transform .3s}
.left{width:33%}
.container{width:100%;max-width:1600px;margin:0 auto;padding:0 20px}
.brands2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:20px}
.brands2 li img{border:1px solid #ccc;padding:10px}
.brands2 li{margin:0 auto}
.main{width:100%;max-width:1600px;margin:10px auto 10px;padding:20px;background-color:#fff;border:1px solid #ccc}
.main2{width:100%;max-width:1600px;margin:10px auto;padding:20px;background-color:#fff;border:1px solid #ccc}
.brandimg{width:100%;max-width:1600px;margin:10px auto;padding:20px;background-color:#fff;border:1px solid #ccc;text-align:center;background:url(diamond-plate.webp)100% 100%}
.brandimg img{border:1px solid #ccc;padding:10px;border-radius:4px;background-color:#fff;box-shadow:#00000059 0 5px 15px}
.mainimg{width:100%;max-width:1600px;margin:10px auto}
img{max-width:100%;height:auto}
.imgcenter{display:block;margin:0 auto;border-radius:4px}
.blog-snippet img{border-radius:4px}
ol{padding-left:20px}
.main td{padding:5px;text-alin:center}
a{text-decoration:none;color:var(--primary);transition:color .3s;font-weight:600}
a:hover{color:var(--secondary)}
ul{list-style:none;padding-left:10px}
.imageinsert{float:left;margin:15px 45px 15px 0;border-radius:4px;background-color: #fff;}
.imageinsertright{float:right;margin:15px 45px 15px 0;border-radius:4px}
.main ul{list-style:circle;margin-left:10px}
.btn{display:inline-block;background-color:var(--accent);color:var(--white);padding:12px 25px;border-radius:4px;font-weight:600;text-align:center;transition:all .3s;border:none;cursor:pointer;margin-top:auto;min-width:150px}
.btn:hover{background-color:#777573;color:var(--white);transform:translateY(-2px)}
.btn-secondary{background-color:var(--primary)}
.btn-secondary:hover{background-color:#1a252f}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin:15px 0;color:var(--primary)}
hr{color:#ccc;opacity:0.5;margin:15px auto}
h1{font-size:1.8rem}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
p{margin:10px 0}
section{padding:10px 0}
.text-center{text-align:center}
header{background-color:var(--white);box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:1000}
.header-container{display:flex;justify-content:space-between;align-items:center;padding:15px 10px}
.logo{font-size:24px;font-weight:700;color:var(--primary)}
.logo span{color:var(--accent)}
nav ul{display:flex}
nav ul li{margin-left:25px}
nav ul li a{font-weight:600}
.mobile-toggle{display:none;background:none;border:none;font-size:24px;color:var(--primary);cursor:pointer}
.fa-paper-plane{background:url(/plane.png);display:block;height:15px;width:15px}
.fa-bars{background:url(/bar.png);display:block;height:35px;width:35px}
.hero{background-image:linear-gradient(#0009,#0009),url(/Off-Road-Wheels.webp);background-size:cover;background-position:center;color:var(--white);text-align:center;padding:150px 0}
.hero h1{font-size:3rem;margin-bottom:20px;color:var(--white)}
.hero h2{font-size:1.5rem;font-weight:400;margin-bottom:40px;color:var(--white)}
.hero-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{position:relative;display:inline-block;padding-bottom:15px}
.section-title h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background-color:var(--accent)}
.section-title p{max-width:1600px;margin:0 auto;color:var(--text-light);text-align:left}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:40px}
.category-card{background-color:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 5px 15px #0000001a;transition:transform 0.3s,box-shadow .3s}
.category-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #00000026}
.category-img{height:200px;background-color:#fff;text-align:center}
.category-content{padding:20px;display:flex;flex-wrap:wrap;justify-content:center;height:268px}
.category-content h3{margin-bottom:10px}
.category-content p{margin-bottom:20px;color:var(--text-light)}
.about{background-color:var(--light)}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.feature-card{background-color:var(--white);border-radius:8px;padding:30px;box-shadow:0 5px 15px #0000000d;transition:transform .3s;text-align:center}
.feature-card:hover{transform:translateY(-5px)}
.feature-icon{font-size:40px;color:var(--accent);margin-bottom:20px}
.brands{background-color:var(--white)}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;align-items:center}
.brand-logo{height:100px;background-color:var(--light);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:transform .3s}
.brand-logo:hover{transform:scale(1.05)}
.testimonials{background-color:var(--primary);color:var(--white)}
.testimonials .section-title h2{color:var(--white)}
.testimonials .section-title p{color:#fffc}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.testimonial-card{background-color:#ffffff1a;border-radius:8px;padding:30px}
.testimonial-content{font-style:italic;margin-bottom:20px}
.testimonial-author{display:flex;align-items:center}
.author-img{width:50px;height:50px;border-radius:50%;background-color:var(--gray);margin-right:15px;display:flex;align-items:center;justify-content:center}
.author-info h4{color:var(--white);margin-bottom:5px}
.author-info p{color:#fffc;font-size:14px}
.cta{background-color:var(--accent);color:var(--white);text-align:center;padding:60px 0}
.cta h2{color:var(--white)}
.cta p{max-width:700px;margin:0 auto 30px}
.faq{background-color:var(--white)}
.faq-container{max-width:800px;margin:0 auto}
.faq-item{margin-bottom:20px;border:1px solid var(--gray);border-radius:8px;overflow:hidden}
.faq-question{padding:20px;background-color:var(--light);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s,padding .3s}
.faq-answer.active{padding:20px;max-height:500px}
footer{background-color:var(--dark);color:var(--white);padding:60px 0 20px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:40px}
.footer-column h3{color:var(--white);margin-bottom:20px;position:relative;padding-bottom:10px}
.footer-column h3::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background-color:var(--accent)}
.footer-links li{margin-bottom:10px}
.footer-column a,.footer-links a{color:#fffc}
.footer-links a:hover{color:var(--accent)}
.newsletter-form{display:flex;margin-top:20px}
.newsletter-form input{flex:1;padding:10px;border:none;border-radius:4px 0 0 4px}
.newsletter-form button{background-color:var(--accent);color:var(--white);border:none;padding:10px 15px;border-radius:0 4px 4px 0;cursor:pointer}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #ffffff1a;color:#fff9}
@media (max-width: 992px) {
.homebrands,.brands2{grid-template-columns:1fr 1fr;gap:5px}
.about-content{grid-template-columns:1fr}
.about-img{order:-1}
}
@media (max-width: 768px) {
.brands2 li{max-width:170px;margin:10px 5px;padding:5px}
.mainimg{margin:0 auto}
.hero{background-image:linear-gradient(#0009,#0009),url(/Off-Road-Wheels-sm.webp)}
h1{font-size:2rem}
h2{font-size:1.5rem}
.mobile-toggle{display:block}
nav{position:fixed;top:70px;left:-100%;width:80%;height:calc(100vh - 70px);background-color:var(--white);box-shadow:0 5px 15px #0000001a;transition:left .3s;z-index:1000;overflow-y:auto}
nav.active{left:0}
nav ul{flex-direction:column;padding:20px}
nav ul li{margin:0 0 15px}
.hero{padding:100px 0}
.hero h1{font-size:1.8rem}
.hero-buttons{flex-direction:column;gap:10px}
.hero-buttons .btn{width:100%}
}
@media (max-width: 468px) {
.hero{background-image:linear-gradient(#0009,#0009),url(/Off-Road-Wheels-xs.webp)}
.brandimg,.main2,.main{margin:-5px auto;border:none}
.homebrands{grid-template-columns:1fr}
}
.pattern-section{margin-bottom:30px}
.section-heading{background-color:#f8f8f8;padding:10px;margin-bottom:10px;border-left:4px solid #e71408;font-size:18px}
.table-container{overflow-x:auto;margin-bottom:20px}
table{width:100%;border-collapse:collapse;margin-bottom:10px}
th{background-color:#e71408;color:#fff;font-weight:700;text-align:left;padding:10px}
td{border:1px solid #ddd;padding:10px}
tr:nth-child(even){background-color:#f5f5f5}
@media screen and (max-width: 768px) {
table,thead,tbody,th,td,tr{display:block}
thead tr{position:absolute;top:-9999px;left:-9999px}
tr{margin-bottom:15px;border:1px solid #ccc}
td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%;text-align:left}
td:before{position:absolute;top:10px;left:10px;width:45%;padding-right:10px;white-space:nowrap;font-weight:700;content:attr(data-label)}
.section-heading{font-size:16px}
.imageinsertright,.imageinsert{width:100%;height:auto;float:none}
}
.intro-text{margin-bottom:20px;line-height:1.6}
.note{font-style:italic;font-size:14px;margin:10px 0;color:#666}
#content-guide{background-color:#f9f9f9;border:1px solid #ddd;padding:15px 20px;border-radius:6px;margin:20px 0;font-size:1.1em;max-width:900px;margin-left:auto;margin-right:auto}
#content-guide > strong{display:block;font-weight:700;margin-bottom:10px;color:#222}
#content-guide ul{display:block;list-style:none;padding-left:0;margin:0;}
#content-guide ul li{margin:0}
#content-guide ul li a{display:inline-block;white-space:nowrap;color:#0073e6;text-decoration:none;font-weight:600}
#content-guide ul li a:hover,#content-guide ul li a:focus{text-decoration:underline;color:#004a99}

@media screen and (max-width: 768px) {
#content-guide ul li a {
 white-space: normal}
}