:root{
	--yellow:#f8ac00;
	--yellow-2:#f8ac00;
	--ink:#111;
	--red:#ffdf01;
	--muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:'Inter',sans-serif;
	color:#1a1a1a;
	margin:0;
	background:#fff
}
h1,h2,h3,.display-font{font-family:'Oswald',sans-serif;
	letter-spacing:.5px
}
a{text-decoration:none}

.topbar{background:#fff;
	font-size:14px;
	font-weight:500;
	padding:14px;}
.topbar .container{display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 16px}
.brand-logo{background:#000;
	color:var(--yellow);
	font-family:'Oswald',sans-serif;
	font-weight:700;
	padding:6px 10px;border:2px solid #000;border-radius:4px;line-height:1;display:inline-block}
.brand-logo small{display:block;font-size:8px;color:#fff;letter-spacing:1px;margin-top:2px}
.topbar .socials a{color:#000;margin-left:10px;font-size:16px}

.mainnav{background:#000}
.mainnav .nav-link{color:#fff !important;font-weight:600;font-size: 18px;
	letter-spacing: .5px;
	text-transform: capitalize;padding:14px 14px !important}
.mainnav .nav-link:hover{color:var(--yellow) !important}
.mainnav .dropdown-menu{background:#111;border:1px solid #333;border-radius:4px}
.mainnav .dropdown-item{color:#fff;font-size:18px;font-weight: 600;}
.mainnav .dropdown-item:hover{background:var(--yellow);color:#000}

.hero{background:var(--yellow);position:relative;overflow:hidden;padding:50px 0 70px;background: url(https://towbuddytowing.com/wp-content/uploads/2026/06/junk-car-removal-calgary.png);
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 49px;
	height: 700px;}
.hero::before{content:"";position:absolute;inset:0;background:
	radial-gradient(circle at 20% 30%, rgba(0,0,0,.04), transparent 40%),
	radial-gradient(circle at 80% 70%, rgba(0,0,0,.04), transparent 40%);}
.hero h1{font-size:70px;font-weight:700;color:#000;line-height:.95;text-shadow:2px 2px 0 rgba(0,0,0,.08)}
.hero h1 .big{display:block;font-size:100px;}
.hero .for-junk{color:#fff;text-shadow:2px 2px 0 #000;font-size:clamp(28px,4.5vw,56px);font-weight:700;line-height:1}
.hero img.car{max-width:560px;width:80%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.free-tow{position:absolute;right:8%;top:46%;width:110px;height:110px;background:var(--red);color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Oswald';font-size:20px;text-align:center;
	clip-path:polygon(50% 0,61% 12%,76% 5%,80% 21%,95% 22%,90% 38%,100% 50%,90% 62%,95% 78%,80% 79%,76% 95%,61% 88%,50% 100%,39% 88%,24% 95%,20% 79%,5% 78%,10% 62%,0 50%,10% 38%,5% 22%,20% 21%,24% 5%,39% 12%);
	transform:rotate(-12deg)}
.btn-quote{background:#fff;color:#000;border:2px solid #000;border-radius:30px;padding:18px 36px;font-weight:700;letter-spacing:1px}
.btn-quote:hover{background:#000;color:var(--yellow)}

.section{padding:60px 0}
.about-tag{color:#000;font-weight:700;letter-spacing:2px;font-size:13px}
.about-tag::after{;display:inline-block;width:36px;height:2px;background:var(--yellow-2);vertical-align:middle;margin-left:8px}
.exp-badge{background:#000;color:#fff;padding:14px 18px;border-radius:6px;display:inline-flex;gap:10px;align-items:center}
.exp-badge .num{color:var(--yellow);font-family:'Oswald';font-size:32px;font-weight:700;line-height:1}
.check{color:var(--yellow-2);margin-right:8px}
.btn-yellow{background:#ebede0;color:#000;border:0;padding:10px 26px;font-weight:700}
.btn-yellow:hover{background:#000;color:#fff;}

.fleet-wrap{padding:40px}
.fleet-card{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06); padding:7px;text-align: center;}
.fleet-card h5{
	font-size: 26px;
}
.fleet-card p{
	font-size:20px
}
.fleet-card img{height:200px;width:100%;object-fit:cover}
.fleet-card .body{padding:18px}
.red-sub{color:var(--yellow);font-weight:700; font-size: 26px;}

.how{background:#eceff2}
.step-card{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:24px;text-align:center;height:100%}
.step-label{font-family:'Oswald';letter-spacing:2px;color:#000;font-size:22px;}
.step-label p{
	font-size:18px;
}
.arrow-circle{width:110px;height:110px;border-radius:50%;background:#eab617;display:flex;align-items:center;justify-content:center;font-size:84px;color:#000;margin:0 auto}

.carousel-3d-wrap{position:relative;height:340px;margin:30px auto;perspective:1400px;max-width:1100px}
.carousel-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.c3d-item{position:absolute;top:50%;left:50%;width:340px;height:260px;margin-left:-170px;margin-top:-130px;
	border:4px solid #fff;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.25);
	transition:transform .6s ease, opacity .6s ease, filter .6s ease;cursor:pointer;background:#000}
.c3d-item img{width:100%;height:100%;object-fit:cover;display:block}
.c3d-item.active{border-color:var(--yellow);box-shadow:0 25px 50px rgba(0,0,0,.4)}
.c3d-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
	background:var(--yellow);color:#fff;display:flex;align-items:center;justify-content:center;border:0;z-index:10;font-size:20px}
.c3d-nav.prev{left:10px}
.c3d-nav.next{right:10px}

.faq-title{text-align:center;font-weight:700}
.faq-title .star{color:var(--yellow-2)}
.accordion-button{font-weight:600;font-size:18px;background:#f3f5f7;color:#000; padding:22px;}
.accordion-button:not(.collapsed){background:#a9a9a973;color:#000;box-shadow:none}
.accordion-button::after{background-image:none;content:"+";font-size:24px;line-height:1;width:auto;height:auto;color:#000;}
.accordion-button:not(.collapsed)::after{content:"−"}
.accordion-item{border:1px solid #e5e7eb;border-radius:6px !important;margin-bottom:16px;overflow:hidden}

.content-block{margin:4rem auto;padding:40px 16px;overflow: hidden scroll;
	max-height: 450px;
	height: 100%;}
.content-block h2{text-align:center;font-family:'Inter';font-weight:600}
.content-block h3{font-weight:700;margin-top:24px;font-family:'Inter'}
.content-block p{color:#444;font-size:14px;line-height:1.7}
.content-block::-webkit-scrollbar {
	width: 5px;
}
.content-block::-webkit-scrollbar-thumb {
	background: grey;
	border-radius: 10px;
}
.content-block::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

.cta-black{background:#000;padding:24px 0;text-align:center;display: flex;
	justify-content: center;}
.cta-black .btn-call{background:var(--yellow);color:#000;font-weight:700;border-radius:30px;padding:10px 26px;margin-right:8px}
.cta-black .btn-start{background:#fff;color:#000;font-weight:700;border-radius:30px;padding:10px 26px;border:2px solid #fff}

footer{background:var(--yellow);padding:50px 0 30px}
footer h6{font-weight:700;font-family:'Oswald';letter-spacing:1px;margin-bottom:14px;font-size: 24px;}
footer a{color:#000;display:block;padding:8px 0;font-size:20px; font-weight: 500;}
footer a:hover{text-decoration:underline}
.footer-brand .brand-logo{font-size:22px;padding:10px 14px}
.footer-social a{display:inline-block;background:#000;color:var(--yellow);width:43px;height:43px;border-radius:50%;
	text-align:center;line-height:30px;margin-right:6px;font-size:14px}
@media(max-width:480px){
	.btn-quote-banner{
		top: 14rem !important;
	}
	.c3d-nav.next{
		top: 16rem;
		left: 8rem;
	}
	.c3d-nav.prev{
		left: 11.3rem;
		top: 16rem;
	}
	.hero{
		background-position: center;
		height: 357px;
	}
	.btn-quote-banner{
		top: 12rem;
	}
	.btn-quote{
		padding: 10px 26px;
	}
	.fleet-wrap{
		padding: 20px;
	}
}
@media(max-width:768px){
	.free-tow{width:80px;height:80px;font-size:14px;right:4%;top:55%}
	.hero img.car{width:90%}
	.c3d-item{width:315px;height:180px;margin-left:-158px;margin-top:-90px}
	.carousel-3d-wrap{height:260px}
}
.elementor-widget-container, .socials{
	width: 19%;
	text-align: center;
}
.sell_parts{
	width: 61%;
	margin: 0px 0px 0px 45px;
	padding: 10px 0px 10px 20px;
	border-style: solid;
	border-width: 0px 0px 0px 2px;
	font-size: 18px;
}
.elementor-widget-container img{
	width: 230px;
}
.btn-quote-banner{
	position: absolute;
	top: 33rem;
	width: 100%;
	left: 0;
	right: 0;
}
.fleet-sec{
	padding-bottom:80px;
}
.wpcf7-spinner{
	top: -32px;
	left: 156px;
	opacity: 99;
}
textarea{
	max-height: 70px !important;
}
.wpcf7 form.sent .wpcf7-response-output{
	color:#fff !important;
}

.btn-black {
	background: #000;
	color: #fff;
	border: 1px solid #000;
}
.btn-black:hover {
	background: #222;
	color: #fff;
}

.quote-modal {
	background: url('https://images.unsplash.com/photo-1594950036725-d9b4f6d4f5d3?q=80&w=1000') center/cover no-repeat;
	position: relative;
}

.quote-modal::before {
	content: "";
	position: absolute;

	top: 50px; 
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 215, 0, 0.35); 
	z-index: 0;
	pointer-events: none;
}

.quote-modal .modal-content {
	background: transparent;
	border: none;
	position: relative;
	z-index: 1;
}

.quote-modal .modal-header {
	background: #000;
	color: #fff;
	border-bottom: none;
	position: relative;
	z-index: 2; 
}
.quote-modal .modal-title {
	color: #fff;
	font-weight: 600;
}

.quote-modal .form-control {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #ccc;
	color: #000;
}
.quote-modal .form-control::placeholder {
	color: #666;
}
p .btn.btn-black.w-100{
	margin-bottom: -26px !important;
}

.quote-modal .btn-black {
	background: #000;
	color: #fff;
	border: 1px solid #000;
	font-weight: 600;
}
.quote-modal .btn-black:hover {
	background: #222;
	color: #fff;
}
.quote-modal{
	border-style: dashed;
	border-color: #f8ac00;
	border-width: 3px;
}
.socials {
	display: flex;
	gap: 12px;
	align-items: center;
}
.cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #000;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.cta-icon:hover {
	transform: scale(1.05);
}
.cta-icon i {
	font-size: 22px;
	animation: blink-yellow-white 1.2s infinite;
}
@keyframes blink-yellow-white {
	0%, 100% {
		color: #ffd700;
	}
	50% {
		color: #ffffff;
	}
}