/*
Theme Name: Rent Cars in Islamabad
Theme URI: https://rentcarislamabad.com/
Author: Rent Car Islamabad
Author URI: https://rentcarislamabad.com/
Description: A clean, responsive WordPress theme for car rental businesses. Includes a vehicle fleet post type with price, seats, model year and fuel details, call and WhatsApp booking buttons, and homepage sections for fleet, how it works, why choose us, testimonials, FAQ and contact. No plugins required.
Version: 1.1.39
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carrental
*/

:root {
	--accent: #f59e0b;
	--dark: #111827;
	--dark-2: #1f2937;
	--text: #1f2937;
	--muted: #6b7280;
	--bg: #f9fafb;
	--card: #ffffff;
	--border: #e5e7eb;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	overflow-wrap: break-word;
}

/* No left-right scroll on mobile: clip any off-screen overflow (clip keeps the sticky header working; hidden is the fallback for older browsers) */
html, body { overflow-x: hidden; }
html, body { overflow-x: clip; }

a { color: var(--dark); }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

.container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Top bar */
.top-bar {
	background: var(--dark-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	padding: 8px 0;
}

.top-bar-inner {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.top-bar a { color: #d1d5db; text-decoration: none; }
.top-bar a:hover { color: var(--accent); }

/* Header */
.site-header {
	background: var(--dark);
	color: #fff;
	padding: 8px 0;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
	border-bottom: 3px solid var(--accent);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.site-branding a.site-title {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: -0.5px;
}

.custom-logo { max-height: 68px; width: auto; }

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.main-nav a {
	color: #e5e7eb;
	text-decoration: none;
	font-weight: 600;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.main-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.header-phone {
	background: var(--accent);
	color: #111827;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 999px;
	white-space: nowrap;
}

.header-phone:hover { color: #111827; opacity: 0.9; }

/* Mobile menu toggle (hidden on desktop, shown on small screens) */
.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.site-main { min-height: 60vh; }

/* Hero */
.hero {
	position: relative;
	background-color: var(--dark);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	color: #fff;
	padding: 16px 0 14px;
	aspect-ratio: auto;
	min-height: 400px;
	text-align: center;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero-slides {
	position: absolute;
	inset: 0;
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	animation: heroFade 30s infinite;
}

.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }
.hero-slide:nth-child(5) { animation-delay: 24s; }

/* Desktop hero slides (mobile block below overrides these at <=760px) */
.hero-slide:nth-child(1) { background-image: url('assets/slides/slide-rangerover.jpg?v=126'); }
.hero-slide:nth-child(2) { background-image: url('assets/slides/slide-gwagon.jpg?v=126'); }
.hero-slide:nth-child(3) { background-image: url('assets/slides/slide-bmw.jpg?v=126'); }
.hero-slide:nth-child(4) { background-image: url('assets/slides/slide-audi.jpg?v=126'); }
.hero-slide:nth-child(5) { background-image: url('assets/slides/slide-lc300.jpg?v=126'); }

@keyframes heroFade {
	0% { opacity: 0; }
	4% { opacity: 1; }
	20% { opacity: 1; }
	24% { opacity: 0; }
	100% { opacity: 0; }
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,24,39,0.32) 0%, rgba(17,24,39,0.22) 55%, rgba(17,24,39,0.35) 100%);
}

@media (max-width: 760px) {
	.hero { aspect-ratio: auto; }
	.hero-slide { background-size: cover; }
	.hero-slide:nth-child(1) { background-image: url('assets/slides/slide-m-rangerover.jpg?v=131'); }
	.hero-slide:nth-child(2) { background-image: url('assets/slides/slide-m-gwagon.jpg?v=131'); }
	.hero-slide:nth-child(3) { background-image: url('assets/slides/slide-m-bmw.jpg?v=131'); }
	.hero-slide:nth-child(4) { background-image: url('assets/slides/slide-m-audi.jpg?v=131'); }
	.hero-slide:nth-child(5) { background-image: url('assets/slides/slide-m-lc300.jpg?v=131'); }
	.hero-inner { width: 100%; }
	.cta-row { flex-direction: column; align-items: stretch; }
	.cta-row .btn { text-align: center; }
	.hero-trust { flex-direction: column; gap: 8px; align-items: center; }
	.custom-logo { max-height: 52px; }
}

.hero-inner {
	position: relative;
	z-index: 1;
}

.hero-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid rgba(245,158,11,0.6);
	border-radius: 999px;
	padding: 6px 16px;
	margin: 0 0 8px;
}

.hero h1 {
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 8px;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.hero-subtitle {
	font-size: 17px;
	color: #e5e7eb;
	max-width: 660px;
	margin: 0 auto 12px;
	line-height: 1.6;
}

.hero-trust {
	list-style: none;
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: #d1d5db;
}

.hero-trust li {
	position: relative;
	padding-left: 20px;
}

.hero-trust li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 800;
}

@media (max-width: 760px) {
	.hero { padding: 44px 0 36px; }
	.hero h1 { font-size: 32px; }
	.hero-subtitle { font-size: 17px; }
	.hero-trust { gap: 12px 20px; }
}

.cta-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.hero .btn { padding: 11px 22px; border-radius: 4px; }

.btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.btn-accent { background: var(--accent); color: #111827; }
.btn-accent:hover { color: #111827; opacity: 0.9; }
.btn-outline { border: 2px solid #fff; color: #fff; }
.btn-outline:hover { color: var(--accent); border-color: var(--accent); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { color: var(--accent); }

/* Sections */
.section { padding: 56px 0; }
.section-alt { background: #fff; }
.section h2 {
	font-size: 30px;
	margin: 0 0 8px;
	text-align: center;
	letter-spacing: -0.5px;
}
.section-lead {
	text-align: center;
	color: var(--muted);
	max-width: 640px;
	margin: 0 auto 36px;
}

/* Fleet grid */
.fleet-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.vehicle-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vehicle-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.vehicle-card a.card-link { text-decoration: none; color: inherit; }

/* Card image area: consistent aspect ratio, cover fit, rounded top via card overflow */
.vehicle-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #374151, #111827);
}

.vehicle-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vehicle-media .vehicle-thumb.placeholder { height: 100%; }

/* Price pill under the car name (not over the photo) */
.price-badge {
	display: inline-block;
	margin: 0 0 12px;
	background: var(--accent);
	color: #111827;
	font-weight: 800;
	font-size: 16px;
	padding: 8px 14px;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.price-badge .per { font-size: 13px; font-weight: 600; }

.vehicle-thumb img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
}

.vehicle-thumb.placeholder {
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #374151, #111827);
	color: #d1d5db;
	font-weight: 600;
}

.vehicle-body { padding: 22px 20px 20px; }

.vehicle-body h3 { margin: 0 0 10px; font-size: 20px; }

.vehicle-meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 14px;
}

/* Tasteful dividers between meta items */
.vehicle-meta li + li {
	border-left: 1px solid var(--border);
	padding-left: 12px;
}

/* Card call-to-action */
.card-cta {
	display: inline-block;
	background: var(--dark);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 4px;
	text-decoration: none;
}

.vehicle-card a.card-cta:hover { background: var(--accent); color: #111827; }

.vehicle-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--dark);
}

.vehicle-price .per {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

/* Steps + features */
.steps-grid, .features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.step, .feature {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.step-number {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent);
	color: #111827;
	font-weight: 800;
	font-size: 20px;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.step h3, .feature h3 { margin: 0 0 8px; font-size: 19px; }
.step p, .feature p { margin: 0; color: var(--muted); }

/* Testimonials */
.testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.testimonial {
	background: var(--card);
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.testimonial p { margin: 0 0 12px; font-style: italic; }
.testimonial cite { font-style: normal; font-weight: 700; }
.testimonial-rating { font-size: 13px; color: var(--muted); font-style: normal; }

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 12px;
}
.faq-list summary { font-weight: 700; cursor: pointer; }
.faq-list p { color: var(--muted); margin: 10px 0 0; }

/* Contact band */
.contact-band {
	background: var(--dark);
	color: #fff;
	padding: 48px 0;
	text-align: center;
}
.contact-band h2 { color: #fff; }
.contact-band p { color: #d1d5db; }
.contact-band a { color: var(--accent); }

/* Single vehicle */
.vehicle-single {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px;
	margin: 40px auto;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.vehicle-single h1 { margin-top: 0; }
.vehicle-single .vehicle-thumb img { height: 380px; border-radius: 10px; }
.vehicle-details {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	color: var(--muted);
}
.vehicle-details strong { color: var(--text); }

/* Blog / pages */
.post-list article, .page-content, .post-content {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.post-list h2 { margin: 0 0 8px; }
.post-list h2 a { text-decoration: none; }
.post-meta { color: var(--muted); font-size: 14px; }
.entry-content { margin-top: 16px; }

/* Pagination */
.nav-links { display: flex; gap: 10px; justify-content: center; margin: 32px 0; }
.nav-links a, .nav-links span {
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
}
.nav-links span.current { background: var(--accent); border-color: var(--accent); font-weight: 700; }

/* Blog cards (homepage Latest from the Blog) */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.blog-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.blog-card a.card-link { text-decoration: none; color: inherit; }

.blog-thumb img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.blog-thumb.placeholder {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #374151, #111827);
	color: #d1d5db;
	font-weight: 600;
}

.blog-body { padding: 20px; }
.blog-body h3 { margin: 0 0 8px; font-size: 19px; }
.blog-body p { color: var(--muted); margin: 0; }
.blog-body .post-meta { font-size: 13px; margin-bottom: 8px; }

.section-more { text-align: center; margin-top: 32px; }

/* Footer */
.site-footer {
	background: var(--dark);
	color: #d1d5db;
	padding: 56px 0 24px;
	margin-top: 0;
	border-top: 4px solid var(--accent);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.footer-col h3 { color: #fff; margin: 0 0 12px; font-size: 17px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col p { margin: 0 0 10px; }
.footer-brand { color: #fff; font-size: 20px; font-weight: 800; }
.site-footer a { color: #e5e7eb; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.copyright { text-align: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); color: #9ca3af; font-size: 14px; }

/* Mobile menu + narrow screens */
@media (max-width: 760px) {
	.menu-toggle { display: inline-block; }
	.header-phone { display: none; }
	.header-inner { flex-wrap: nowrap; }
	.main-nav { display: none; }
	.main-nav.nav-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--dark);
		padding: 8px 20px 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.main-nav.nav-open ul { flex-direction: column; gap: 4px; }
	.main-nav.nav-open a { display: block; padding: 10px 0; }
	.hero { padding: 48px 0; }
	.hero h1 { font-size: 32px; }
	.section { padding: 40px 0; }
}

/* Responsive */
@media (min-width: 640px) {
	.fleet-grid { grid-template-columns: 1fr 1fr; }
	.steps-grid, .features-grid, .testimonials-grid { grid-template-columns: 1fr 1fr; }
	.blog-grid { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.hero h1 { font-size: 46px; }
}

@media (min-width: 960px) {
	.fleet-grid { grid-template-columns: 1fr 1fr 1fr; }
	.steps-grid, .features-grid { grid-template-columns: repeat(4, 1fr); }
	.testimonials-grid { grid-template-columns: repeat(3, 1fr); }
	.blog-grid { grid-template-columns: repeat(4, 1fr); }
	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* Floating WhatsApp button (bottom-right corner) */
.whatsapp-float {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35);
	transition: transform 0.2s ease;
}

.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { display: block; }

@media (max-width: 760px) {
	.whatsapp-float { left: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* Header Book Now button (opens WhatsApp) */
.header-book {
	background: var(--accent);
	color: #111827;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 4px;
	white-space: nowrap;
}

.header-book:hover { color: #111827; opacity: 0.9; }

@media (max-width: 760px) {
	.header-book { display: none; }
	.site-branding a.site-title { font-size: 20px; }
}

/* Brand logos strip */
.brands-strip {
	background: #fff;
	padding: 28px 0;
	border-bottom: 1px solid #e5e7eb;
}

.brands-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.brands-row img {
	height: 44px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

@media (max-width: 760px) {
	.brands-row { justify-content: center; gap: 20px; }
	.brands-row img { height: 34px; }
}

/* Satisfaction Guarantee services */
.satisfaction-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.service-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-align: left;
}

.service-thumb {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.service-text h3 { margin: 0 0 6px; font-size: 18px; }
.service-text p { margin: 0; color: var(--muted); line-height: 1.6; }

@media (min-width: 760px) {
	.satisfaction-grid { grid-template-columns: 1fr 1fr; }
}