/* ===================================
Kwik Fix Auto Parts - Complete CSS
Based on Prio Movers Kenya Design
=================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--primary-red:#0B5C8A;
--primary-blue:#23243d;
--secondary-blue:#0B5C8A;
--white:#ffffff;
--light-gray:#f5f5f5;
--dark-gray:#333;
--text-gray:#666;
}
html{
scroll-behavior:smooth;
scroll-padding-top:80px;
}
body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;
color:var(--dark-gray);
overflow-x:hidden;
}
img{
max-width:100%;
height:auto;
display:block;
}
a{
text-decoration:none;
color:inherit;
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:0.75rem 1.5rem;background:#fff;color:#000;z-index:99999;text-decoration:none;outline:2px solid #000;}
@media (max-width:768px){.skip-link{position:static;width:auto;height:auto;padding:0.5rem;background:#f0f0f0;color:#000;text-align:center;border:1px solid #ccc;margin:0;}.skip-link:focus{background:#fff;outline:2px solid #000;}}
.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}
nav{
background-color:var(--white);
box-shadow:0 2px 10px rgba(0,0,0,0.1);
position:sticky;
top:0;
z-index:1000;
transition:all 0.3s ease;
}
.nav-container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
}
.logo{
font-size:16px;
font-weight:700;
color:var(--primary-blue);
display:flex;
align-items:center;
gap:10px;
}
.logo-img{
width:100px;
height:100px;
object-fit:contain;
}
.logo-text{
display:inline;
white-space:nowrap;
}
.logo-text span{
font-weight:400;
}
.logo span{
color:var(--primary-light_blue);
}
.nav-links{
display:flex;
list-style:none;
gap:35px;
align-items:center;
}
.nav-links a{
color:var(--dark-gray);
font-weight:500;
font-size:15px;
transition:color 0.3s;
position:relative;
}
.nav-links a:hover{
color:var(--primary-red);
}
.nav-cta-btn{
background-color:var(--primary-red);
color:var(--white) !important;
padding:10px 25px;
border-radius:5px;
transition:background-color 0.3s;
}
.nav-cta-btn:hover{
background-color:var(--primary-blue);
}
.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
}
.hamburger span{
width:25px;
height:3px;
background-color:var(--primary-blue);
transition:all 0.3s;
}
.mobile-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:998;
}
.mobile-overlay.active{
display:block;
}
.hero{
position:relative;
height:600px;
display:flex;
align-items:center;
justify-content:flex-start;
overflow:hidden;
background-color:var(--primary-blue);
}
.hero-picture{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.hero-image{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(0.5);
}
.hero-content{
position:relative;
z-index:2;
text-align:left;
color:var(--white);
max-width:800px;
padding:0 20px;
margin-left:max(20px,calc((100% - 1200px) / 2));
}
.hero-content h1{
font-size:40px;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
}
.hero-content p{
font-size:18px;
margin-bottom:35px;
line-height:1.6;
}
.cta-btn{
display:inline-block;
background-color:var(--primary-red);
color:var(--white);
padding:15px 40px;
border-radius:5px;
font-weight:600;
font-size:16px;
transition:all 0.3s;
}
.cta-btn:hover{
background-color:var(--primary-blue);
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
section{
padding:80px 0;
}
.section-title{
font-size:38px;
color:var(--primary-blue);
margin-bottom:10px;
font-weight:700;
text-align:center;
}
.section-subtitle{
font-size:18px;
color:var(--text-gray);
text-align:center;
margin-bottom:60px;
}
.about{
background-color:var(--white);
}
.about-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.about-text h2{
font-size:32px;
color:var(--primary-blue);
margin-bottom:25px;
line-height:1.3;
}
.about-text p{
color:var(--text-gray);
line-height:1.8;
margin-bottom:20px;
}
.about-image img{
width:100%;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.products{
background-color:var(--light-gray);
padding:60px 0;
}
.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:40px;
}
.product-card{
background-color:var(--white);
border-radius:8px;
overflow:hidden;
box-shadow:0 3px 15px rgba(0,0,0,0.07);
transition:all 0.3s;
}
.product-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.product-image{
height:180px;
overflow:hidden;
}
.product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s;
}
.product-card:hover .product-image img{
transform:scale(1.05);
}
.product-content{
padding:15px;
}
.product-content h3{
font-size:18px;
color:var(--primary-blue);
margin-bottom:10px;
font-weight:600;
}
.product-content p{
font-size:14px;
color:var(--text-gray);
margin-bottom:15px;
line-height:1.5;
}
.product-btn{
font-size:14px;
color:var(--primary-red);
font-weight:600;
transition:color 0.3s;
}
.product-btn:hover{
color:var(--primary-blue);
}
.products-cta{
text-align:center;
margin-top:20px;
}
.products-cta-btn{
display:inline-block;
background-color:var(--primary-red);
color:var(--white);
padding:12px 35px;
border-radius:5px;
font-weight:600;
font-size:16px;
transition:all 0.3s;
}
.products-cta-btn:hover{
background-color:var(--primary-blue);
transform:translateY(-1px);
}
@media (max-width:1024px){
.product-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:640px){
.product-grid{
grid-template-columns:1fr;
}
}
.cta-section{
background-color:var(--primary-red);
padding:60px 20px;
}
.cta-content{
max-width:800px;
margin:0 auto;
text-align:center;
color:var(--white);
}
.cta-content h2{
font-size:28px;
margin-bottom:15px;
font-weight:700;
}
.cta-content p{
font-size:15px;
margin-bottom:30px;
line-height:1.6;
opacity:0.95;
}
.cta-buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}
.cta-primary{
background-color:var(--white);
color:var(--primary-red);
padding:12px 30px;
border-radius:5px;
font-weight:600;
font-size:14px;
transition:all 0.3s;
}
.cta-primary:hover{
background-color:var(--primary-blue);
color:var(--white);
transform:translateY(-1px);
}
.cta-secondary{
background-color:transparent;
color:var(--white);
padding:12px 30px;
border:2px solid var(--white);
border-radius:5px;
font-weight:600;
font-size:14px;
transition:all 0.3s;
}
.cta-secondary:hover{
background-color:var(--white);
color:var(--primary-red);
}
.services{
background-color:var(--white);
padding:60px 20px;
}
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-bottom:40px;
}
.service-card{
background-color:var(--white);
border-radius:8px;
overflow:hidden;
box-shadow:0 3px 15px rgba(0,0,0,0.07);
transition:all 0.3s;
}
.service-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.service-image{
height:180px;
overflow:hidden;
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s;
}
.service-card:hover .service-image img{
transform:scale(1.05);
}
.service-content{
padding:15px;
}
.service-content h3{
font-size:18px;
color:var(--primary-blue);
margin-bottom:10px;
font-weight:600;
}
.service-content p{
font-size:14px;
color:var(--text-gray);
line-height:1.5;
}
.why-choose{
background-color:var(--light-gray);
padding:60px 20px;
}
.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}
.why-item{
text-align:center;
padding:20px;
background-color:var(--white);
border-radius:8px;
transition:all 0.3s;
}
.why-item:hover{
transform:translateY(-3px);
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}
.why-icon{
width:60px;
height:60px;
background-color:var(--primary-red);
color:var(--white);
font-size:24px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin:0 auto 15px;
}
.why-item h3{
font-size:18px;
color:var(--primary-blue);
margin-bottom:10px;
}
.why-item p{
font-size:14px;
color:var(--text-gray);
line-height:1.5;
}
.brands{
background-color:var(--white);
padding:60px 20px;
}
.brands-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:20px;
margin-top:30px;
}
.brand-card{
background-color:var(--white);
border-radius:8px;
padding:15px;
text-align:center;
box-shadow:0 3px 15px rgba(0,0,0,0.07);
transition:transform 0.3s,box-shadow 0.3s;
}
.brand-card:hover{
transform:translateY(-3px);
box-shadow:0 7px 20px rgba(0,0,0,0.12);
}
.brand-card h3{
font-size:16px;
margin:10px 0 5px;
color:var(--primary-blue);
}
.brand-card p{
font-size:12px;
color:var(--text-gray);
}
.brand-card img.brand-logo{
width:100%;
height:auto;
max-height:80px;
object-fit:contain;
margin-bottom:10px;
}
.mission-vision{
background-color:var(--primary-blue);
padding:60px 20px;
}
.mission-vision .section-title{
color:var(--white);
font-size:28px;
margin-bottom:10px;
}
.mission-vision .section-subtitle{
color:rgba(255,255,255,0.8);
font-size:16px;
margin-bottom:30px;
}
.mission-vision-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}
.mission-card,
.vision-card{
background-color:rgba(255,255,255,0.1);
padding:20px;
border-radius:8px;
display:flex;
gap:15px;
align-items:flex-start;
}
.mv-icon{
font-size:36px;
flex-shrink:0;
}
.mv-content h3{
font-size:18px;
color:var(--white);
margin-bottom:10px;
}
.mv-content p{
font-size:14px;
color:var(--white);
line-height:1.5;
opacity:0.9;
}
.mv-label{
font-size:11px;
padding:4px 12px;
border-radius:15px;
background-color:var(--white);
color:var(--primary-blue);
font-weight:600;
display:inline-block;
margin-bottom:10px;
}
.reviews{
background:linear-gradient(135deg,var(--primary-red),var(--primary-blue));
color:white;
padding:2.5rem 1rem;
border-radius:12px;
max-width:1200px;
margin:3rem auto;
box-shadow:0 6px 15px rgba(0,0,0,0.2);
}
.reviews .container{
max-width:1000px;
margin:0 auto;
}
.reviews .section-title{
font-size:28px;
margin-bottom:8px;
color:white;
text-align:center;
}
.reviews .section-subtitle{
font-size:14px;
margin-bottom:2rem;
color:rgba(255,255,255,0.9);
text-align:center;
}
.reviews-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1.5rem;
margin-top:2rem;
}
.review-card{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
padding:1.2rem;
border-radius:10px;
border:1px solid rgba(255,255,255,0.15);
transition:all 0.3s;
}
.review-card:hover{
background:rgba(255,255,255,0.15);
transform:translateY(-3px);
box-shadow:0 6px 15px rgba(0,0,0,0.15);
}
.stars{
font-size:1.2rem;
color:#ffd700;
margin-bottom:0.8rem;
}
.review-text{
font-style:italic;
font-size:0.9rem;
margin-bottom:1rem;
line-height:1.5;
color:white;
}
.reviewer{
display:flex;
align-items:center;
gap:0.8rem;
}
.reviewer-avatar{
width:40px;
height:40px;
font-size:1rem;
font-weight:700;
border-radius:50%;
background:white;
color:var(--primary-red);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.reviewer-info h3{
font-size:1rem;
margin-bottom:0.2rem;
color:white;
}
.reviewer-info p{
font-size:0.75rem;
opacity:0.85;
color:white;
}
.contact{
background-color:var(--light-gray);
padding:60px 20px;
}
.contact .section-title{
font-size:28px;
margin-bottom:5px;
}
.contact .section-subtitle{
font-size:14px;
margin-bottom:25px;
color:var(--dark-gray);
}
.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
.contact-info{
background-color:var(--white);
padding:25px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}
.contact-item{
display:flex;
gap:15px;
margin-bottom:20px;
}
.contact-icon{
width:40px;
height:40px;
font-size:18px;
}
.contact-details h3{
font-size:16px;
margin-bottom:5px;
}
.contact-details p{
font-size:13px;
line-height:1.5;
}
.contact-details a{
font-size:13px;
}
.map-container{
border-radius:8px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
min-height:350px;
}
.map-container iframe{
width:100%;
height:100%;
border:none;
}
.faqs{
display:flex;
justify-content:center;
padding:2.5rem 1rem;
background:#f4f4f4;
}
.faq-container{
width:100%;
max-width:650px;
margin:0 auto;
}
.faqs .section-title,
.faqs .section-subtitle{
text-align:center;
}
.faq-item{
width:100%;
margin-bottom:1rem;
border-radius:8px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
.faq-question{
padding:0.9rem 1rem;
font-size:0.9rem;
font-weight:600;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
background:#0B5C8A;
color:#fff;
transition:background 0.3s ease;
}
.faq-question:hover{
background:#094A73;
}
.faq-toggle{
font-size:1.2rem;
font-weight:700;
transition:transform 0.3s ease;
color:#fff;
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;
background:#23243d;
}
.faq-item.active .faq-answer{
max-height:300px;
}
.faq-item.active .faq-toggle{
transform:rotate(45deg);
}
.faq-answer-content{
padding:1rem;
font-size:0.85rem;
line-height:1.5;
color:#ffffff;
}
footer{
background-color:var(--primary-blue);
color:var(--white);
padding:50px 0 20px;
font-size:14px;
}
.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-bottom:30px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
padding:0 20px;
justify-content:space-between;
text-align:center;
}
.footer-section h3{
font-size:16px;
margin-bottom:15px;
color:var(--white);
text-align:center;
}
.social-links{
display:flex;
gap:1rem;
margin-top:1rem;
}
.social-links a{
width:40px;
height:40px;
background:var(--primary-red);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.3s;
color:#23243d;
}
/* .social-links a:nth-child(even){
background:var(--secondary);
}*/
.social-links a svg{
fill:#23243d;
width:20px;
height:20px;
}
.social-links a:hover{
transform:translateY(-5px);
}
.footer-section{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-section a{
display:block;
text-decoration:none;
color:var(--white);
transition:all 0.3s ease;
}
.footer-section p,
.footer-section a{
font-size:13px;
line-height:1.6;
margin-bottom:8px;
}
.footer-section a:hover{
padding-left:5px;
opacity:0.85;
}
.footer-section .logo{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
font-weight:700;
color:var(--white);
}
.footer-section .logo-text{
display:inline;
white-space:nowrap;
}
.footer-section .logo span{
color:var(--white);
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.2);
padding-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
max-width:1200px;
margin:0 auto;
padding-left:20px;
padding-right:20px;
font-size:12px;
}
.designer span{
font-size:12px;
}
.designer{
display:flex;
align-items:center;
gap:5px;
flex-wrap:nowrap;
}
.designer span,
.designer a,
.designer img{
display:inline-block;
}
.designer a{
font-size:12px;
color:inherit;
text-decoration:none;
position:relative;
}
.designer a::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:0;
height:1px;
background-color:currentColor;
transition:width 0.3s ease;
}
.designer a:hover::after{
width:100%;
}
.designer img{
width:18px;
height:18px;
}
.footer-section .logo span span{
font-weight:400;
}
.logo-img{
display:block;
}
.scroll-top{position:fixed;bottom:30px;right:30px;background-color:var(--primary-red);color:var(--white);width:50px;height:50px;border-radius:50%;border:none;font-size:24px;cursor:pointer;opacity:0;visibility:hidden;transition:all 0.3s;z-index:999;display:flex;align-items:center;justify-content:center}.scroll-top.visible{opacity:1;visibility:visible}.scroll-top:hover{background-color:var(--primary-blue);transform:translateY(-5px)}
@media (max-width:968px){
.hamburger{
display:flex;
}
.nav-links{
position:fixed;
left:-100%;
top:70px;
flex-direction:column;
background-color:var(--white);
width:100%;
text-align:center;
transition:0.3s;
box-shadow:0 10px 27px rgba(0,0,0,0.05);
padding:30px 0;
z-index:999;
}
.nav-links.active{
left:0;
}
.about-content,
.contact-wrapper,
.mission-vision-grid{
grid-template-columns:1fr;
}
.hero-content h1{
font-size:36px;
}
.hero-content p{
font-size:17px;
}
.section-title{
font-size:32px;
}
.hero-content{
text-align:center;
margin-left:0;
margin-right:0;
max-width:100%;
padding:0 30px;
}
}
@media (max-width:768px){
.hero{
height:500px;
}
section{
padding:50px 0;
}
.product-grid,
.services-grid{
grid-template-columns:1fr;
}
.cta-buttons{
flex-direction:column;
align-items:center;
gap:15px;
}
.cta-primary,
.cta-secondary{
width:100%;
max-width:300px;
text-align:center;
}
.mission-vision-grid{
grid-template-columns:1fr;
}
.footer-bottom{
flex-direction:column;
text-align:center;
gap:15px;
}
.hero-content{
text-align:left;
margin-left:0;
margin-right:0;
max-width:100%;
padding:0 20px;
}
.hero-content h1{
font-size:30px;
margin-bottom:15px;
text-align:left;
}
.hero-content p{
font-size:15px;
margin-bottom:25px;
line-height:1.5;
text-align:left;
}
.hero-content .cta-btn{
padding:10px 25px;
font-size:13px;
}
.section-title{
font-size:28px;
text-align:left;
}
.section-subtitle{
font-size:16px;
text-align:left;
margin-bottom:40px;
}
.about-text{
text-align:left;
}
.about-text h2{
font-size:26px;
text-align:left;
}
.about-text p{
font-size:15px;
text-align:left;
}
h2,h3{
text-align:left;
}
section p{
text-align:left;
}
.products-cta,
.cta-content{
text-align:center;
}
.products-cta-btn,
.cta-primary,
.cta-secondary{
display:inline-block;
margin:0 auto;
}
.contact-item{
text-align:left;
}
.contact-details{
text-align:left;
}
.why-item{
text-align:left;
}
.why-item h3,
.why-item p{
text-align:left;
}
.product-card,
.service-card{
text-align:left;
}
.product-content,
.service-content{
text-align:left;
}
.product-content h3,
.product-content p,
.service-content h3,
.service-content p{
text-align:left;
}
.cta-content h2,
.cta-content p{
text-align:left;
}
.mission-card,
.vision-card{
text-align:left;
}
.mv-content h3,
.mv-content p{
text-align:left;
}
.reviews .section-title,
.reviews .section-subtitle{
text-align:left;
}
.review-card{
text-align:left;
}
.faqs .section-title,
.faqs .section-subtitle{
text-align:left;
}
}
@media (max-width:480px){
.hero{
height:450px;
}
.hero-content{
text-align:left;
align-items:flex-start;
}
.hero-content h1{
font-size:24px;
margin-bottom:12px;
line-height:1.3;
text-align:left;
}
.hero-content p{
font-size:14px;
margin-bottom:20px;
line-height:1.4;
text-align:left;
}
.hero-content .cta-btn{
padding:10px 25px;
font-size:13px;
}
.section-title{
font-size:24px;
padding:0 15px;
text-align:left;
}
.section-subtitle{
font-size:14px;
padding:0 15px;
text-align:left;
}
.logo{
font-size:14px;
}
.logo-img{
height:60px;
width:auto;
}
section{
padding:40px 0;
}
.container{
padding:0 15px;
}
.about-text h2{
font-size:22px;
text-align:left;
}
.about-text p{
font-size:14px;
text-align:left;
}
.product-card h3,
.service-card h3{
font-size:18px;
}
.product-card p,
.service-card p{
font-size:13px;
}
.product-btn{
font-size:13px;
padding:8px 20px;
}
.products-cta-btn{
font-size:14px;
padding:12px 30px;
}
.why-item h3{
font-size:18px;
}
.why-item p{
font-size:13px;
}
.contact-item h3{
font-size:16px;
}
.contact-details p{
font-size:14px;
}
.footer-content{
text-align:center;
}
.footer-section{
align-items:center;
}
.footer-section a,
.footer-section p{
text-align:center;
font-size:14px;
}
.footer-section .logo{
justify-content:center;
}
.footer-bottom{
flex-direction:column;
text-align:center;
font-size:13px;
}
.designer{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:13px;
}

.product-content {
    
    align-items: center;
    text-align: center;
}

}