.body_removed_placeholder{display:none}
body{

font-family:'Poppins',sans-serif;
margin:0;
background:#fff;
color:#222;

}

/* HERO */

.hero{

height:90vh;

background:url('../img/hero-car.jpg') center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;

position:relative;

}

.hero-overlay{

position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);

}

.hero-content{

position:relative;
color:white;
text-align:center;
max-width:900px;

}

.hero h1{

font-size:60px;
margin-bottom:20px;

}

.hero h1 span{

color:#17c3b2;

}

.hero-search form{

display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;

}

.hero-search select,
.hero-search button{

padding:12px 15px;
border:none;
border-radius:6px;

}

.hero-search button{

background:#f4c542;
cursor:pointer;

}

/* STATS */

.stats{

padding:80px 0;
background:#f7f7f7;

}

.stats-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;

}

.stat h2{

font-size:50px;
color:#17c3b2;

}






.vehicles-section{

padding:100px 40px;
background:#fff;

}

.section-title{

text-align:center;
font-size:40px;
margin-bottom:60px;
position:relative;

}

.vehicles-row{

display:flex;
align-items:center;
position:relative;

}

.vehicles-track{

display:flex;
gap:30px;
overflow:hidden;
scroll-behavior:smooth;

}

.vehicle-card{

min-width:300px;
background:#fff;
border-radius:14px;
overflow:hidden;

box-shadow:
0 20px 40px rgba(0,0,0,0.08);

transition:all .35s;

}

.vehicle-card:hover{

transform:translateY(-10px);

box-shadow:
0 30px 60px rgba(0,0,0,0.15);

}

.vehicle-img{

height:200px;
overflow:hidden;

}

.vehicle-img img{

width:100%;
height:100%;
object-fit:cover;
transition:0.4s;

}

.vehicle-card:hover img{

transform:scale(1.1);

}

.vehicle-body{

padding:20px;

}

.vehicle-meta{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:15px 0;

}

.meta{

font-size:14px;
color:#666;

}

.price{

font-size:22px;
font-weight:700;
color:#17c3b2;

}

.vehicle-footer{

display:flex;
justify-content:space-between;
align-items:center;

}

.btn-card{

background:#0f172a;
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;

}

.badge-new{

position:absolute;
top:15px;
right:15px;

background:#17c3b2;
color:white;

padding:5px 10px;
font-size:12px;
border-radius:4px;

}

.slider-arrow{

position:absolute;
top:40%;
background:white;
border:none;

font-size:30px;

width:45px;
height:45px;

border-radius:50%;

box-shadow:0 10px 20px rgba(0,0,0,0.1);

cursor:pointer;

}

.slider-arrow.left{ left:-20px;}
.slider-arrow.right{ right:-20px;}




/* TESTIMONIAL - high-end card */

.testimonial{
	position:relative;
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.95));
	padding:28px 22px;
	border-radius:14px;
	border:1px solid rgba(15,23,42,0.06);
	box-shadow: 0 18px 50px rgba(2,6,23,0.12);
	transition:transform .36s cubic-bezier(.2,.9,.3,1), box-shadow .36s ease;
	overflow:hidden;
	min-height:150px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.testimonial::before{
	content: '“';
	font-size:56px;
	line-height:1;
	color: rgba(23,195,178,0.12);
	position:absolute;
	top:8px;
	left:12px;
	font-weight:700;
	pointer-events:none;
}

.testimonial p{
	color:#213547;
	font-size:15px;
	line-height:1.7;
	margin:0 0 16px 0;
	padding-left:6px;
}

.testimonial h4{
	margin:0;
	font-size:15px;
	font-weight:700;
	color:#0f172a;
	letter-spacing:0.2px;
}

.testimonial:hover{
	transform:translateY(-10px) scale(1.01);
	box-shadow:0 30px 80px rgba(2,6,23,0.18);
}

/* Small decorative accent */
.testimonial .accent{
	width:40px;height:4px;background:linear-gradient(90deg,#17c3b2,#0ea5a4);border-radius:4px;margin-top:10px;
}

@media (max-width:720px){
	.testimonial{padding:20px}
	.testimonial::before{font-size:44px;top:6px;left:10px}
}

/* ABOUT / BRANDS / GRID STYLES + ANIMATIONS */

.about-preview{padding:80px 20px;background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;max-width:1200px;margin:0 auto}
.about-img{height:360px;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 20px 40px rgba(2,6,23,0.08)}
.about-text h2{font-size:32px;margin-bottom:12px}
.about-text p{color:#444;line-height:1.7;margin-bottom:12px}
.about-text .btn{display:inline-block;margin-top:10px;background:linear-gradient(90deg,#17c3b2,#0ea5a4);color:#fff;padding:12px 20px;border-radius:8px;text-decoration:none}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;align-items:center}
.brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.06);text-decoration:none;color:inherit;transition:transform .28s ease,box-shadow .28s ease}
.brand-card img{max-width:100px;opacity:.95;filter:grayscale(20%);transition:transform .28s ease,filter .28s ease}

.brand-fallback{
	display:flex;
	align-items:center;
	justify-content:center;
	height:48px;
	font-weight:700;
	color:#0f172a;
	background:linear-gradient(180deg,#fff,#f6f8ff);
	border-radius:6px;
	padding:6px 10px;
}
.brand-card span{margin-top:8px;font-weight:600}
.brand-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(2,6,23,0.12)}
.brand-card:hover img{transform:scale(1.06);filter:grayscale(0)}

.fuel-grid,.mileage-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fuel-grid a,.mileage-grid a{background:#f3f4f6;padding:10px 14px;border-radius:10px;color:#111;text-decoration:none;box-shadow:0 6px 18px rgba(2,6,23,0.04);transition:transform .18s ease}
.fuel-grid a:hover,.mileage-grid a:hover{transform:translateY(-4px)}

.compare-box{display:flex;gap:10px;max-width:720px;margin:18px auto;padding:12px;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(2,6,23,0.04)}
.compare-box input{flex:1;padding:12px;border:1px solid #e6e7e9;border-radius:8px}
.compare-box button{background:#17c3b2;color:white;padding:10px 14px;border-radius:8px;border:none}

.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.testimonial p{color:#333}

.partners-grid{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.partners-grid img{max-width:120px;opacity:.9;filter:grayscale(30%);transition:transform .2s ease,filter .2s ease}
.partners-grid img:hover{transform:translateY(-6px);filter:grayscale(0)}

.cta{background:linear-gradient(90deg,#071028,#0b1222);color:#fff;padding:80px 20px;text-align:center}
.btn-cta{background:linear-gradient(90deg,#f4c542,#f59e0b);color:#111;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700}

/* REVEAL ON SCROLL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1);transition-delay:var(--reveal-delay,0ms)}
.reveal.visible{opacity:1;transform:none}

/* small screens */
@media (max-width:900px){
	.about-grid{grid-template-columns:1fr;gap:20px}
	.about-img{height:260px}
}

/* Center specific section headings and compare paragraph */
.brands h2,
.fuel-section h2,
.mileage h2,
.compare h2,
.testimonials h2,
.partners h2,
.cta h2{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.compare p{
	text-align:center;
	max-width:820px;
	margin-left:auto;
	margin-right:auto;
}

/* Add vertical spacing between main sections */
.brands,
.fuel-section,
.mileage,
.compare,
.testimonials,
.partners,
.cta{
	padding-top:60px;
	padding-bottom:60px;
}

/* Chat widget styles */
.chat-toggle{
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:9999;
	display:flex;
	align-items:center;
	gap:10px;
	background:linear-gradient(180deg,#0f172a,#071028);
	color:#fff;
	border:0;
	padding:12px 14px;
	border-radius:999px;
	box-shadow:0 12px 30px rgba(2,6,23,0.5);
	cursor:pointer;
	font-weight:600;
}

.chat-toggle svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));}

.chat-panel{
	position:fixed;
	right:20px;
	bottom:80px;
	width:360px;
	max-width:calc(100% - 40px);
	z-index:9999;
	transform:translateY(12px) scale(.98);
	opacity:0;
	pointer-events:none;
	transition:all .28s cubic-bezier(.2,.9,.3,1);
}

.chat-panel.open{opacity:1;transform:none;pointer-events:auto}

.chat-panel-inner{
	display:flex;flex-direction:column;height:520px;background:linear-gradient(180deg,#ffffff,#f8fafb);border-radius:14px;box-shadow:0 30px 60px rgba(2,6,23,0.25);overflow:hidden;border:1px solid rgba(2,6,23,0.06);
}

.chat-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,#071028,#0f172a);color:#fff}
.chat-title{font-weight:700}
.chat-close{background:transparent;border:0;color:rgba(255,255,255,0.9);font-size:18px;cursor:pointer}

.chat-messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0));}
.chat-messages .bot-message,.chat-messages .user-message{max-width:86%;padding:12px 14px;border-radius:12px;line-height:1.4}
.chat-messages .bot-message{background:#0f172a;color:#fff;align-self:flex-start;box-shadow:0 8px 20px rgba(2,6,23,0.12)}
.chat-messages .user-message{background:#eef2ff;color:#071028;align-self:flex-end}
.chat-messages .typing{width:56px;height:28px;background:rgba(255,255,255,0.07);display:flex;align-items:center;gap:6px;padding:6px;border-radius:12px}
.dot{width:8px;height:8px;background:#fff;border-radius:50%;opacity:.6;animation:blink 1s infinite}
.dot:nth-child(2){animation-delay:.12s}
.dot:nth-child(3){animation-delay:.24s}
@keyframes blink{0%{opacity:.15}50%{opacity:1}100%{opacity:.15}}

.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(2,6,23,0.04);background:linear-gradient(180deg,#fff,#fafafa)}
.chat-input{flex:1;padding:12px;border-radius:10px;border:1px solid #e6e7eb}
.chat-send{background:linear-gradient(90deg,#17c3b2,#0ea5a4);border:0;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}

@media (max-width:520px){
	.chat-panel{right:14px;left:14px;width:auto;bottom:70px}
	.chat-panel-inner{height:60vh}
}






/* ============================
HERO RESPONSIVE
============================ */

@media(max-width:900px){

.hero{
height:auto;
padding:80px 20px;
}

.hero-content{
max-width:100%;
}

.hero h1{
font-size:32px;
line-height:1.3;
}

.hero p{
font-size:15px;
}

/* FORM */

.hero-search form{
flex-direction:column;
align-items:stretch;
gap:12px;
margin-top:20px;
}

.hero-search select,
.hero-search button{
width:100%;
padding:14px;
font-size:15px;
}

/* bouton plus premium */
.hero-search button{
background:#17c3b2;
color:white;
font-weight:600;
}

}




/* ============================
STATS RESPONSIVE
============================ */

@media(max-width:900px){

.stats{
padding:50px 20px;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.stat h2{
font-size:32px;
}

.stat p{
font-size:14px;
}

}



@media(max-width:500px){

.stats-grid{
grid-template-columns:1fr;
}

}