/* Header + navigation and service card styles matching reference */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');
:root{--primary:#f47b20;--dark:#111;--navy:#1e3a5f;--muted:#6b7280;--header-height:70px;--header-shadow:0 2px 8px rgba(0,0,0,0.08)}
*{box-sizing:border-box}
body{margin:0;font-family:'Red Hat Display', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;color:var(--dark);background:#fff}

/* Professional sticky header */
.main-header{position:fixed;top:0;left:0;right:0;width:100%;height:var(--header-height);background:#fff;box-shadow:var(--header-shadow);z-index:1000;transition:box-shadow 0.3s ease}
body{padding-top:var(--header-height)}
.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:0 32px;height:100%}
.logo{flex-shrink:0;display:flex;align-items:center}
.logo a{display:flex;align-items:center;text-decoration:none}
.logo img{height:45px;width:auto;display:block;transition:opacity 0.2s ease}
.logo img:hover{opacity:0.85}

/* Desktop Navigation */
.nav{display:none;flex:1;justify-content:center;align-items:center;gap:40px;margin:0 40px}
.nav-link{position:relative;color:var(--navy);font-size:15px;font-weight:500;text-decoration:none;padding:8px 4px;transition:color 0.2s ease;letter-spacing:0.2px}
.nav-link:hover{color:var(--primary)}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transition:transform 0.3s ease;border-radius:2px}
.nav-link:hover::after{transform:scaleX(1)}

/* Header Actions (CTA + Hamburger) */
.header-actions{display:flex;align-items:center;gap:16px}

/* Hamburger Menu Button */
.menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;position:relative;z-index:1001}
.hamburger-icon{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;position:relative}
.hamburger-icon span{display:block;width:100%;height:2px;background:var(--navy);border-radius:2px;transition:all 0.3s ease}
.menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1){transform:rotate(45deg) translate(6px, 6px)}
.menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3){transform:rotate(-45deg) translate(6px, -6px)}

/* Desktop view */
@media (min-width:992px) {
  .nav{display:flex}
  .menu-btn{display:none}
  .book-btn{display:inline-flex !important}
}

/* Mobile Navigation */
@media (max-width:991px) {
  .nav{position:fixed;top:var(--header-height);right:0;bottom:0;width:320px;max-width:85vw;background:#fff;flex-direction:column;align-items:flex-start;padding:32px 24px;gap:0;margin:0;overflow-y:auto;box-shadow:-4px 0 16px rgba(0,0,0,0.1);transform:translateX(100%);transition:transform 0.3s ease;z-index:999}
  .nav.open{display:flex;transform:translateX(0)}
  .nav-link{width:100%;padding:14px 12px;font-size:16px;border-bottom:1px solid #f0f0f0}
  .nav-link:hover{background:rgba(244,123,32,0.05)}
  .nav-link::after{display:none}
}

/* Book Now button (site-wide) — Professional CTA */
.book-btn{
	display:none;
	align-items:center;
	justify-content:center;
	background:var(--primary);
	color:#fff;
	padding:14px 28px;
	min-height:44px;
	border-radius:6px;
	font-weight:600;
	font-size:14px;
	text-decoration:none;
	border:none;
	cursor:pointer;
	transition:all 0.2s ease;
	box-shadow:0 2px 8px rgba(244,123,32,0.25);
	letter-spacing:0.3px;
	text-transform:uppercase;
}
.book-btn:hover{
	background:#d86810;
	box-shadow:0 4px 12px rgba(244,123,32,0.35);
	transform:translateY(-1px);
}
.book-btn:active{
	transform:translateY(0);
	box-shadow:0 1px 4px rgba(244,123,32,0.3);
}

/* Dropdown Menu */
.nav .dropdown{position:relative}
.dropdown .nav-link{display:flex;align-items:center;gap:6px}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;box-shadow:0 8px 24px rgba(0,0,0,0.12);border-radius:8px;min-width:240px;display:none;padding:8px;z-index:100;opacity:0;transition:opacity 0.2s ease}
.dropdown-menu a{display:block;padding:12px 16px;color:var(--navy);text-decoration:none;font-size:14px;font-weight:500;border-radius:6px;transition:all 0.15s ease}
.dropdown-menu a:hover{background:rgba(244,123,32,0.08);color:var(--primary)}
.nav .dropdown:hover .dropdown-menu,.nav .dropdown.open .dropdown-menu{display:block;opacity:1}

@media (max-width:991px) {
  .dropdown-menu{position:static;box-shadow:none;border:none;padding:0 0 0 16px;min-width:auto;width:100%;transform:none;opacity:1;margin-top:8px}
  .dropdown-menu a{padding:10px 12px;font-size:15px}
}

/* Services grid/cards */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.card{background:#f6f6f6;padding:28px;border-radius:14px;box-shadow:none}
.card h3{color:var(--primary);font-size:20px;margin:0 0 14px;font-weight:700}
.card p{margin:0;color:#444;font-size:18px;line-height:1.6}

/* Clean minimalist services section */
.offerings{
	padding:80px 48px;
	background:#f8f9fa;
}

.offerings-container{
	max-width:1200px;
	margin:0 auto;
}

.section-header{
	margin-bottom:48px;
	text-align:center;
}

.section-title-text{
	font-size:36px;
	font-weight:700;
	color:#1f2937;
	margin:0 0 16px 0;
	font-family:'Red Hat Display', system-ui, sans-serif;
	letter-spacing:-0.5px;
}

.section-divider{
	width:80px;
	height:4px;
	background:var(--primary);
	border-radius:2px;
	margin:0 auto;
}

.services-list{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:32px;
}

.service-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:20px;
	padding:40px 32px;
	background:#fff;
	border:1px solid var(--primary);
	border-radius:8px;
	transition:all 0.3s ease;
	box-shadow:0 2px 4px rgba(0,0,0,0.05);
	text-decoration:none;
	color:inherit;
}

.service-item:hover{
	border-color:var(--primary);
	box-shadow:0 4px 12px rgba(244,123,32,0.15);
	transform:translateY(-4px);
}

.service-item:last-child{
	grid-column:1 / -1;
	max-width:calc(50% - 16px);
	margin:0 auto;
}

.service-icon{
	flex-shrink:0;
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#374151;
}

.service-content{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.service-title{
	font-size:20px;
	font-weight:600;
	color:#1f2937;
	margin:0 0 12px 0;
	letter-spacing:-0.2px;
	font-family:'Red Hat Display', system-ui, sans-serif;
}

.service-description{
	font-size:16px;
	line-height:1.6;
	color:#6b7280;
	margin:0;
}

.services-footer{
	margin-top:48px;
	display:flex;
	justify-content:flex-end;
}

.view-all-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:var(--primary);
	font-size:16px;
	font-weight:600;
	text-decoration:none;
	transition:all 0.2s ease;
}

.view-all-link:hover{
	gap:12px;
	color:#d86810;
}

.view-all-link svg{
	transition:transform 0.2s ease;
}

.view-all-link:hover svg{
	transform:translateX(4px);
}

@media (max-width:900px){
	.offerings{padding:48px 24px}
	.services-list{grid-template-columns:1fr;gap:24px}
	.service-item{padding:32px 24px}
	.service-item:last-child{max-width:100%}
	.service-icon{width:40px;height:40px}
	.service-title{font-size:18px}
	.service-description{font-size:15px}
}

@media (max-width:480px){
	.offerings{padding:40px 20px}
	.services-list{gap:20px}
	.service-item{padding:28px 20px}
	.service-icon{width:36px;height:36px}
	.service-icon img{width:36px;height:36px}
	.service-title{font-size:17px}
	.service-description{font-size:14px}
}

/* Hero spacing default (uses inline in HTML) */
.hero{padding:40px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:44px;margin-bottom:18px}
/* ========================================
   DHL-INSPIRED HERO SECTION
   ======================================== */
.hero.hero-bg{
	position:relative;
	width:100%;
	height:70vh;
	min-height:500px;
	max-height:650px;
	background-image:url('smalltruck.jpeg');
	background-size:cover;
	background-position:center center;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	margin-bottom:0;
	animation:bgFadeIn 1.2s ease-out;
}

@keyframes bgFadeIn{
	from{opacity:0}
	to{opacity:1}
}

/* Dark overlay for professional DHL-like appearance */
.hero.hero-bg::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.35);
	z-index:1;
}

/* Centered container */
.hero-container{
	position:relative;
	z-index:2;
	width:100%;
	max-width:900px;
	margin:0 auto;
	padding:0 32px;
	text-align:center;
}

/* Hero content centered */
.hero-content{
	width:100%;
	animation:heroFadeIn 0.6s ease-out;
}

@keyframes heroFadeIn{
	from{opacity:0;transform:translateY(20px)}
	to{opacity:1;transform:translateY(0)}
}

/* Large, bold, centered heading */
.hero-title,
.hero.hero-bg .hero-title{
	color:#fff !important;
	font-size:54px;
	font-weight:700;
	line-height:1.1;
	margin:0 0 40px 0;
	letter-spacing:0.5px;
	font-family:'Red Hat Display', 'Inter', 'Roboto', 'Helvetica', system-ui, sans-serif;
	text-align:center;
}

/* ========================================
   TRACKING BAR (CENTERED, PROMINENT)
   ======================================== */
.tracking-bar{
	display:flex;
	gap:0;
	max-width:700px;
	height:64px;
	background:#fff;
	border-radius:2px;
	overflow:hidden;
	box-shadow:0 8px 24px rgba(0,0,0,0.2);
	margin:0 auto;
}

.tracking-input{
	flex:1;
	height:100%;
	padding:0 24px;
	border:none;
	font-size:17px;
	font-family:'Inter', 'Roboto', 'Helvetica', system-ui, sans-serif;
	color:#111;
	background:#fff;
	outline:none;
}

.tracking-input::placeholder{
	color:#9ca3af;
}

.tracking-input:focus{
	outline:3px solid rgba(244,123,32,0.3);
	outline-offset:-3px;
}

.tracking-button{
	height:100%;
	padding:0 48px;
	background:#f47b20;
	color:#fff;
	border:none;
	font-size:17px;
	font-weight:700;
	font-family:'Inter', 'Roboto', 'Helvetica', system-ui, sans-serif;
	cursor:pointer;
	transition:background 0.2s ease;
	text-transform:uppercase;
	letter-spacing:1px;
}

.tracking-button:hover{
	background:#d86810;
}

.tracking-button:active{
	background:#c25e0e;
}

/* ========================================
   QUICK ACTIONS (OVERLAPPING CARDS)
   ======================================== */
.quick-actions{
	background:transparent;
	padding:0;
	margin-top:-80px;
	position:relative;
	z-index:100;
	margin-bottom:64px;
}

.quick-actions-container{
	max-width:1200px;
	margin:0 auto;
	padding:0 32px;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:32px;
}

.action-card{
	background:#fff;
	padding:48px 32px;
	border:1px solid var(--primary);
	border-radius:2px;
	transition:all 0.25s ease;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	box-shadow:0 4px 16px rgba(0,0,0,0.08);
	position:relative;
	overflow:hidden;
}

.action-card:hover{
	border-color:var(--primary);
	box-shadow:0 8px 24px rgba(0,0,0,0.12);
	transform:translateY(-4px);
}

/* Yellow ribbon accent for featured card */
.action-card--featured{
	border-color:#fbbf24;
}

.card-ribbon{
	position:absolute;
	top:12px;
	right:-32px;
	width:120px;
	height:32px;
	background:#fbbf24;
	transform:rotate(45deg);
	box-shadow:0 2px 8px rgba(251,191,36,0.4);
}

.action-icon{
	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:24px;
	color:#374151;
}

.action-title{
	font-size:20px;
	font-weight:700;
	color:#111;
	margin:0 0 12px 0;
	letter-spacing:0.2px;
	font-family:'Inter', 'Roboto', 'Helvetica', system-ui, sans-serif;
}

.action-description{
	font-size:15px;
	color:#6b7280;
	line-height:1.6;
	margin:0;
	font-family:'Inter', 'Roboto', 'Helvetica', system-ui, sans-serif;
}

.action-link{
	font-size:14px;
	font-weight:600;
	color:#f47b20;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:0.5px;
	transition:color 0.2s ease;
	margin-top:16px;
}

.action-link:hover{
	color:#d86810;
	text-decoration:underline;
}

/* Mobile adjustments */
@media (max-width:991px){
	.header-container{padding:0 20px}
	.logo img{height:40px}
}

@media (max-width:900px){
	:root{--header-height:70px}
	.hero.hero-bg{height:60vh;min-height:450px;max-height:550px}
	.hero-container{padding:0 24px}
	.hero-title{font-size:40px;margin-bottom:32px}
	.tracking-bar{flex-direction:column;height:auto;max-width:100%}
	.tracking-input{height:56px;font-size:16px}
	.tracking-button{height:56px;font-size:16px}
	.quick-actions{margin-top:-60px;margin-bottom:48px}
	.quick-actions-container{grid-template-columns:1fr;gap:24px;padding:0 24px}
	.action-card{padding:40px 28px}
	.card-ribbon{right:-28px;top:10px}
	.hero{grid-template-columns:1fr;padding:48px 20px}
	.services{grid-template-columns:1fr;gap:20px}
	.card{padding:24px}
}

footer{background:#000;color:#bfbfbf;text-align:center;padding:28px 18px}

/* Mobile backdrop for navigation */
.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width:480px){
	.hero.hero-bg{height:55vh;min-height:400px}
	.hero-container{padding:0 20px}
	.hero-title{font-size:36px;margin-bottom:28px}
	.tracking-bar{max-width:100%}
	.tracking-input{font-size:15px;height:52px;padding:0 20px}
	.tracking-button{font-size:15px;height:52px;padding:0 24px}
	.quick-actions-container{padding:0 20px;gap:20px}
	.action-card{padding:32px 20px}
	.btn{width:100%;display:block;text-align:center;padding:14px 16px}
	.hero{padding:36px 16px}
	.hero h1{font-size:24px}
	.card p{font-size:16px}
	.card h3{font-size:20px}
}

/* Improve image responsiveness */
img{max-width:100%;height:auto;display:block}



/* Additional mobile-friendly tweaks */
@media (max-width:900px){
	/* Slightly larger tap targets and reduced header footprint */
	:root{--header-height:64px}
	header{height:var(--header-height)}
	.logo img{max-width:150px}
	.nav a{font-size:17px;padding:12px 6px}
	.pill-btn,.btn,.quote-btn{font-size:16px;padding:12px 18px}
	/* Make common interactive elements full-width for ease of use */
	input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="time"],select,textarea,button{width:100%;box-sizing:border-box}
	.form-group{margin-bottom:14px}
}

@media (max-width:480px){
	body{font-size:15px}
	.hero.hero-bg{min-height:60vh}
	.hero-content h1,.hero h1{font-size:28px}
	.booking-widget{padding:18px 14px;margin-top:18px}
	.offerings{padding:32px 14px}
	.props-grid{gap:18px}
	.nav{width:100%}
	.nav a{font-size:16px}
	/* Ensure image cards keep aspect and fill available area without forcing extra scroll */
	.why-us-image,.why-us-image img,.offer-card img{height:auto;max-height:280px;object-fit:cover}
}


/* === Mobile: max-width 768px ===
	 Ensures: no horizontal scroll, stacks multi-column layouts,
	 images & containers max-width:100%, preserves colors/fonts.
*/
@media (max-width: 768px) {
	/* Prevent accidental horizontal scrolling */
	html, body { max-width: 100%; overflow-x: hidden; }

	/* Header / nav adjustments */
	:root { --header-height: 64px; }
	header { padding: 10px 12px; height: var(--header-height); }
	.logo img { max-width: 140px; }
	.menu-btn, .hamburger { display: inline-flex; }
	.nav { flex-wrap: wrap; gap: 12px; margin-left: 8px; }
	.nav a { padding: 10px 8px; font-size: 16px; }
	.book-btn { display: none; }

	/* Make hero sections more compact and stack content */
	.hero.hero-bg{height:60vh;min-height:450px}
	.hero-container{padding:0 32px}
	.hero-title{font-size:44px}
	.quick-actions-container{grid-template-columns:1fr;gap:24px;padding:0 32px}

	/* Booking widget: flow inline into document and be full width */
	.booking-widget { position: static !important; transform: none !important; margin: 14px 0; width: 100% !important; max-width: 100% !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

	/* Stack multi-column layouts vertically */
	.props-grid, .offerings-grid, .why-us-content, .services, .offerings-grid { grid-template-columns: 1fr !important; }
	.why-us-content { gap: 18px; }

	/* Images and cards scale to container */
	img, .why-us-image img, .prop-icon img, .offer-card img, .why-us-image, .prop-icon { max-width: 100%; height: auto; display: block; object-fit: cover; }

	/* Forms & controls fill available width and have larger tap targets */
	input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], select, textarea, button, .form-group input, .form-group select {
		width: 100% !important; max-width: 100% !important; padding: 12px !important;
	}
	.quote-btn, .pill-btn, .btn { width: 100%; box-sizing: border-box; }

	/* Reduce large paddings to avoid overflow */
	.value-props, .why-us, .offerings, .section-title, .props-grid { padding-left: 12px !important; padding-right: 12px !important; }

	/* Ensure grid gaps don't force overflow */
	.props-grid, .offerings-grid, .services { gap: 14px !important; }

	/* Schedule row stacks */
	.schedule-row { grid-template-columns: 1fr !important; gap: 10px !important; }

	/* Limit large fixed image heights that can cause scroll */
	.why-us-image, .offer-card, .offer-card > img { max-height: 320px; }

	/* Fleet / large card adjustments */
	.fleet-card { height: auto !important; min-height: 220px; }
	.fleet-card img { width: 100%; height: auto; max-height: 360px; object-fit: cover; display: block; }
	.fleet-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

	/* For place-autocomplete custom element ensure full width */
	gmp-place-autocomplete, gmp-place-autocomplete::part(input) { width: 100% !important; max-width: 100% !important; }

	/* Other large fixed sections: ensure they collapse gracefully */
	.problem-solution-image, .map-placeholder, .packing-image { height: auto !important; max-height: 420px; }
}

/* ========================================
   FOOTER SECTION
   ======================================== */
.main-footer{
	background:#f8f9fa;
	border-top:1px solid #e5e7eb;
	padding:60px 0 0;
	margin-top:80px;
}

.footer-container{
	max-width:1200px;
	margin:0 auto;
	padding:0 32px 48px;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:48px;
}

.footer-column{
	display:flex;
	flex-direction:column;
}

.footer-heading{
	font-size:16px;
	font-weight:700;
	color:#111;
	margin:0 0 20px 0;
	text-transform:uppercase;
	letter-spacing:0.5px;
	font-family:'Red Hat Display', system-ui, sans-serif;
}

.footer-links{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:12px;
}

.footer-links li{
	margin:0;
}

.footer-links a{
	color:#6b7280;
	text-decoration:none;
	font-size:15px;
	transition:color 0.2s ease;
	font-family:'Inter', system-ui, sans-serif;
}

.footer-links a:hover{
	color:var(--primary);
}

.footer-bottom{
	background:#fff;
	border-top:1px solid #e5e7eb;
	padding:24px 32px;
	text-align:center;
}

.footer-bottom p{
	margin:0;
	color:#6b7280;
	font-size:14px;
}

.footer-bottom a{
	color:var(--primary);
	text-decoration:none;
}

.footer-bottom a:hover{
	text-decoration:underline;
}

@media (max-width:991px){
	.footer-container{
		grid-template-columns:repeat(2, 1fr);
		gap:40px;
	}
}

@media (max-width:768px){
	.main-footer{
		padding:40px 0 0;
		margin-top:60px;
	}
	
	.footer-container{
		grid-template-columns:1fr;
		gap:32px;
		padding:0 24px 32px;
	}
	
	.footer-bottom{
		padding:20px 24px;
	}
}





/* Additional mobile-friendly rules for quote/booking/estimate widgets */
@media (max-width: 900px) {
	.booking-widget,
	.quote-widget,
	.estimate-widget {
		position: static !important;
		transform: none !important;
		margin: 12px 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-shadow: none !important;
		padding: 12px !important;
		border-radius: 12px !important;
	}

	.booking-widget h3, .quote-widget h3, .estimate-widget h3 { font-size: 16px; }
	.booking-widget .form-group, .quote-widget .form-group, .estimate-widget .form-group { margin-bottom: 10px; }

	.booking-widget input, .booking-widget select, .quote-widget input, .quote-widget select, .estimate-widget input, .estimate-widget select { width: 100% !important; }
}

/* ===== 360px VIEWPORT FIXES FOR ULTRA-SMALL MOBILE DEVICES ===== */
@media (max-width: 380px) {
	/* Critical: Reduce navigation width from 320px to 280px for better screen usage */
	.nav {
		width: 280px;
	}
	
	/* Critical: Add max-width constraint to dropdown menu to prevent overflow */
	.dropdown-menu {
		max-width: 95vw;
	}
	
	/* Critical: Reduce container padding from 32px to 16px on ultra-small screens */
	.header-container,
	.hero-container,
	.quick-actions-container,
	.footer-container {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	/* Medium Priority: Tighten tracking bar constraints */
	.tracking-bar {
		max-width: 100%;
		margin: 0 auto;
	}
	
	/* Medium Priority: Reduce widget padding for more content space */
	.booking-widget,
	.quote-widget,
	.estimate-widget {
		padding: 16px !important;
	}
	
	/* Medium Priority: Ensure single column layouts on all grids */
	.quick-actions-container,
	.tiers-grid,
	.props-grid {
		grid-template-columns: 1fr !important;
	}
	
	/* Ensure footer stacks properly */
	.footer-container {
		padding: 0 16px 24px;
	}
	
	/* Reduce section padding for ultra-small screens */
	.main-footer {
		padding: 32px 0 0;
	}
}