@charset "utf-8";
/* CSS Document */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,select{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;color:unset}html{scroll-behavior:smooth}a{text-decoration:none;cursor:pointer}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;border:none;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}img{max-width:100%;}
/*=== END RESET ===*/

/*=== CLEARFIX ===*/
.clear{clear:both}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{zoom:1}

/*=== GLOBAL ===*/
.flex-container{display:flex}.flex-vertical{flex-direction:column}.flex-horizontal{flex-direction:row}.flex-width{flex-grow:1;flex-shrink:1;flex-basis:100%}.flex-height{height:100%}.flex-wrap{flex-wrap:wrap}.set-width{flex-grow:0;flex-shrink:0;flex-basis:auto}.justify-center{justify-content:center}.justify-right{justify-content:flex-end}.justify-left{justify-content:flex-start}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.align-center{align-items:center}.align-top{align-items:flex-start}.align-bottom{align-items:flex-end}.align-stretch{align-items:stretch}.align-all-center{align-items:center;justify-content:center}.align-self-center{align-self:center}.align-self-right{align-self:flex-end}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.mobile-only{display: none}.max-width{margin:0 var(--sm-padding)}.map{min-height:350px;line-height:0;}


*,
*::before,
*::after {
    transition: all 0.3s ease;
}
a:hover {cursor: pointer !important;}

/*=== SELECT STYLES ===*/
::selection, ::-moz-selection {
	background: var(--red);
	color: var(--white);
	text-shadow: none;
}

:root {
	/*=== Fonts ===*/
    --Saira: "Saira", sans-serif;

	/*=== Colors ===*/
	--white: #FFFFFF;
	--red: #FF0000;
    --dk-red: #990000;
    --gray: #626262;
    --black: #333333;
    --cream: #FCF7F7;
    --gold: #D6BD68;
    --yellow: #FBD600;
    
    /*=== Font Sizes ===*/
    --p: clamp(16px, 5vw, 20px);

	/*=== Spacing ===*/
	--lg-padding: clamp(75px, 5vw, 100px);
	--sm-padding: clamp(25px, 2.5%, 2.5%);
}

    .white{color: var(--white)}
    .creaam{color: var(--cream)}
    .red{color: var(--red)}
    .gray{color: var(--gray)}
    .gold{color: var(--gold)}
    .yellow{color: var(--yellow)}
    .black{color: var(--black)}
    .dk-red {color: var(--dk-red);}

body {
    position: relative;
	font-family: var(--Saira), sans-serif !important;
	height: auto !important;
}

.page-shadow {
	max-width: 1920px!important;
    width: 100%!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px!important;
    background-color: rgb(255, 255, 255)!important;
    margin: 0 auto!important;
	overflow-x: hidden;
}

p {
    font-size: clamp(16px, 5vw, 18px);
}


.thick {
    font-weight: 900 !important;
}

.center {text-align: center;}

.xxl-heading, .xl-heading, .lg-heading, .md-heading, .sm-heading, .xs-heading {
	font-family: var(--Saira);
	text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
}

.xl-heading-bold {
	font-family: var(--Saira);
	text-transform: uppercase;
    font-weight: 900 !important;
}

.xxl-heading {font-size: clamp(40px, 5vw, 83px);line-height: clamp(40px, 5vw, 83px);}
.xl-heading {font-size: clamp(40px, 5vw, 64px);line-height: clamp(40px, 5vw, 64px);}
.lg-heading {font-size: clamp(34px, 5vw, 42px);line-height: clamp(34px, 5vw, 42px);}
.md-heading {font-size: clamp(27px, 5vw, 35px);line-height: clamp(27px, 5vw, 35px);}
.sm-heading {font-size: clamp(18px, 5vw, 26px);line-height: clamp(18px, 5vw, 26px);}
.xs-heading {font-size: clamp(16px, 5vw, 18px);line-height: clamp(16px, 5vw, 18px);}

.sm-padding {padding: 20px 0;}
.md-padding {padding: 50px 0;}
.lg-padding {padding: 100px 0;}

.width90 {width: 90%; max-width: 1600px; margin: auto;}

.bg-cream {background: var(--cream);}
.bg-gray {background: var(--gray);}

.center {text-align: center !important;}

/*=== BODY STYLES 
============================================*/
.btns-row {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}

.btn-nude:hover {color:var(--red); text-decoration: underline;}
.btn-nude:hover i {padding-left: 10px;}

.btn-white { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 220px; height: 50px; padding: 0 0 0 25px; background: #fff; border: 1px solid #ebebeb; overflow: hidden; text-decoration: none;  font-family: var(--Saira);}
.btn-white::before { content: ""; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: var(--red); transition: width .45s ease; z-index: 1; }
.btn-white:hover::before { width: 100%; }
.btn-white__text { position: relative; z-index: 2; color: #000; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .5px; transition: color .3s ease .15s, transform .45s ease; }
.btn-white:hover .btn-white__text { color: #fff; transform: translateX(10px); border-color: var(--red); }
.btn-white__icon { position: relative; z-index: 2; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.btn-white__icon i { line-height: 1; }

.btn-red { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 220px; height: 50px; padding: 0 0 0 25px; background: linear-gradient(to right, var(--red), var(--dk-red)); border:none; overflow: hidden; text-decoration: none;  font-family: var(--Saira);}
.btn-red::before { content: ""; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: var(--red); transition: width .45s ease; z-index: 1; }
.btn-red:hover::before { width: 100%; }
.btn-red__text { position: relative; z-index: 2; color: #fff; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .5px; transition: color .3s ease .15s, transform .45s ease; }
.btn-red:hover .btn-red__text { color: #fff; transform: translateX(10px); border-color: var(--red);}
.btn-red__icon { position: relative; z-index: 2; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.btn-red__icon i { line-height: 1; }

.shine {
	background: linear-gradient(
		110deg,
		var(--black) 0%,
var(--black) 30%,
var(--gray) 45%,
var(--cream) 50%,
var(--gold) 55%,
var(--gold) 70%,
var(--gray) 85%,
var(--black) 100%
	);
	background-size: 250% 100%;
	background-position: -250% 0;

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;

	animation: metalShine 10s linear infinite;
}

@keyframes metalShine {
	from {
		background-position: -250% 0;
	}
	to {
		background-position: 250% 0;
	}
}

.burnt {
	background: linear-gradient(
		90deg,
		#FFA600 0%,
		#990000 100%
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

/*=== HEADER STLES 
==============================*/
.header-top {padding: 20px 0;}
.header-top > div {display: flex; justify-content: space-between; align-items: center; gap: 25px;}
.header-top a:hover {color: var(--red);}
.header-logo {max-width: 250px; min-width: 0px; object-fit: contain;}
.header-anniv {width: 100%; max-width: 100px; height: auto;}
.header-anniv:hover {transform: scale(1.05) rotate(5deg); cursor: pointer;}
.header-contact {text-align: right;}

.header-wrap {position: sticky; top: 0; z-index: 99; background: linear-gradient(to right, var(--red), var(--dk-red));}
.header {display: flex; justify-content: space-between; align-items: center; gap: 25px;}
.header-social {display: flex; justify-content: flex-start; align-items: center; gap: 20px; color: var(--white);}

/*=== FOOTER STLES 
==============================*/
.footer-wrap {background: var(--black); color: var(--white); padding: 50px 0;}
.footer-wrap > div {display: flex; justify-content: space-between; align-items: flex-start; gap: 50px;}
.footer-logo {width: clamp(0px, 100vw, 300px); object-fit: contain; min-width: 0px; display: block;}
.footer-wrap > div > div h4 {margin-bottom: 20px;}
.footer-wrap > div > div > div {display: flex; justify-content: flex-start; align-items: flex-start; gap: 20px; line-height: 90%;}
.footer-wrap > div > div > div > ul > li {margin-bottom: 15px; display: block;}
.footer-wrap > div > div > div > ul > li a{padding-left: 5px; border-left: 2px solid transparent; display: block; transform: translateX(-5px);}
.footer-wrap > div > div > div > ul > li a:hover {border-color: var(--red); transform: translateX(0px);}

.footer-top {padding: 10px 0; background: linear-gradient(to right, var(--red), var(--dk-red)); overflow: hidden; position: relative;}
.footer-top > div {display: flex; justify-content: space-between; align-items: center;}
.footer-top > div > div:nth-child(1)  {display: flex; justify-content: flex-start; align-items: center; gap: 20px;}
.footer-top > div > div:nth-child(2)  {display: flex; justify-content: flex-start; align-items: center; gap: 20px;}

.footer-top > div > div:nth-child(1)::before {content: 'Connect'; position: absolute; left: -100%; color: rgba(255,255,255,0.5); font-size: 96px; z-index: 1;}
.footer-top > div > div:nth-child(2)::after {content: 'Call Us'; position: absolute; right: -100%; color: rgba(255,255,255,0.5); font-size: 96px; z-index: 1; white-space: nowrap;}

.footer-top a {position: relative; z-index: 2;}
.footer-top > div > div:nth-child(1):hover::before {left: 0;}
.footer-top > div > div:nth-child(2):hover::after {right: 0;}


/*=== HOME PAGE 
==============================*/
.home-hero {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("../siteart/trucks-cliff-extended.jpg"); background-size: cover; background-position: 65% center;}
.home-hero-content {padding: 100px 0; color: var(--white); display: flex; flex-direction: column; gap: 50px;}
.home-hero-content p {max-width: 600px;}
.hero-title {line-height: 80%; max-width: 600px;}

.quicklinks-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.quicklink {border: 1px solid #ebebeb; border-radius: 5px; background: #fff; position: relative; overflow: hidden;}
.quicklink .ql-arrow {position: absolute; padding: 10px; background: var(--red); right: 0; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; color: var(--white);}
.quicklink .ql-arrow span {display: none;}
.quicklink .ql-text {padding: 20px; border-top: 1px solid #ebebeb;}
.quicklink .ql-img {position: relative;}
.quicklink .ql-img img {object-fit: contain;}
.quicklink:hover {transform: translateY(-10px); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15);}
.quicklink:hover .ql-arrow {height: 100%; width: 100%; background: rgba(255,0,0,0.25);}
.quicklink:hover .ql-arrow span {display: block;}

.half-photo {display: flex; justify-content: space-between; align-items: stretch; gap: 50px;}
.half-photo .half-photo-text {flex: 1 1 0; display: flex; flex-direction: column; height: auto; gap: 25px;}
.half-photo .half-photo-img {flex: 1.25 1 0; display: flex; height: auto; position: relative; }
.half-photo .half-photo-img img {height: 100%; object-fit: cover; width: 100%; display: block;}
.half-photo .half-photo-img iframe {height: 100%; object-fit: cover; width: 100%; display: block;}
.half-photo .half-photo-img .btn-red {position: absolute; bottom: 0;}
.half-photo .half-photo-form {flex: 1.25 1 0; display: flex; height: auto; position: relative; }
.half-photo .half-photo-form .btn-red {position: absolute; bottom: 0;}

.values-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.value {display: flex; flex-direction: column; justify-content: center; padding: 50px; border: 1px solid #ebebeb; border-radius: 5px; background: var(--white); gap: 20px; position: relative;}
.value .value-arrow {position: absolute; padding: 10px; background: var(--red); top:0; right: 0; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; color: var(--white);}
.value .value-arrow span {display: none;}
.value:has(.value-arrow):hover {background: linear-gradient(rgba(255,0,0,0.05)), rgba(255,255,255,1);}
.value:hover .value-arrow {height: 30px; width: 100%;;}
.value:hover .value-arrow span {display: block;}
.values-grid .value:nth-child(2) {margin-top: -50px; margin-bottom: 50px;}
.values-grid .value:nth-child(5) {margin-top: -50px; margin-bottom: 50px;}

.reviews-heading {display: flex; justify-content: center; align-items: stretch; gap: 10px; overflow: hidden;}
.reviewsSwiper {align-items: stretch;}
.reviews-heading .wreath {height: auto; width: 50px;}
.reviewsSwiper .swiper-slide {padding: 50px 20px; border: 1px solid #ebebeb; border-radius: 5px; height: auto;}
.reviewsSwiper:hover {cursor: grab;}
.reviewsSwiper:active {cursor: grabbing;}

/*=== REVIEWS PAGE
==============================*/
.subpage-hero {background-size: cover !important; background-position: center center !important; }
.subpage-hero-content {padding: 50px 0; color: var(--white); display: flex; flex-direction: column; gap: 20px;}
.subpage-hero-content p {max-width: 600px;}
.callout {padding: 10px 0 10px 20px; border-left: 5px solid var(--red);}

.subpage-hero.reviews {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("/siteart/worker-and-truck-dark.jpg");}

.reviews-heading-left {display: flex; justify-content: flex-start; align-items: stretch; gap: 10px; overflow: hidden;}
.reviewsSwiper2, .reviewsSwiper3, .reviewsSwiper4 {align-items: stretch;}
.reviewsSwiper2 .swiper-slide, .reviewsSwiper3 .swiper-slide, .reviewsSwiper4 .swiper-slide {padding: 50px 20px; border: 1px solid #ebebeb; border-radius: 5px; height: auto; background: var(--white);}
.reviewsSwiper2, .reviewsSwiper3, .reviewsSwiper4:hover {cursor: grab;}
.reviewsSwiper2, .reviewsSwiper3, .reviewsSwiper4:active {cursor: grabbing;}

.half-photo-img .swiper  {max-width: 49vw; height: 100%; padding: 0px;}
.reviews-logo {max-width: 200px; object-fit: contain; display: block; min-width: 0px;}
.bubble {padding: 0 10px; border-radius: 100px; border: 1px solid #ebebeb; white-space: nowrap; margin: 3px 0; display: inline-block;}

/*=== ABOUT PAGE
==============================*/
.subpage-hero.about {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("/siteart/FORD-MUSTANG-ENGINE.jpg");}

.team-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.team-box {display: flex; flex-direction: column; align-items: stretch; border: 1px solid #ebebeb; border-radius: 5px; overflow: hidden;}
.team-box div:has(img) {display: flex; justify-content: center; align-items: stretch; position: relative; z-index: 3; overflow: hidden;}
.team-box div:has(img)::after {content: ''; display: block; background: linear-gradient(rgba(0,0,0,0.5)), url("/siteart/tire-square.jpg"); width: 100%; height: 100%; position: absolute; top: 0; background-size: cover; background-position: center center; z-index: -1; filter: blur(5px);}
.team-box img {object-fit: contain; height: 300px;}
.team-box div:nth-child(2) {padding: 20px; border-top: 1px solid #ebebeb; display: flex; flex-direction: column; gap: 20px; line-height: 120%;}

#facebook {margin-bottom: 100px; overflow: hidden; box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.1); border-radius: 9px;}
#facebook .fb-header {display: flex; justify-content: flex-start; align-items: flex-start; gap: 20px; background: #eee; padding: 30px 30px 50px 30px; border-radius: 10px 10px 0 0; flex-wrap: wrap;}
#facebook .fb-pfp { position: relative;}
#facebook .fb-pfp-prof {border-radius: 100%; aspect-ratio: 1/1; display: block; overflow: hidden; max-height: 150px; border: 5px solid #0095f6;}
#facebook .fb-pfp-icon {position: absolute; bottom: 0; right: 0; height: 30%; width: 30%; fill: #0095f6; background: #eee; border-radius: 100%;}
#facebook .fb-name {display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-size: 24px; color: #0095f6; font-weight: 600;}
#facebook .fb-tag {display: flex; font-weight: 600; margin-bottom: 10px;}
#facebook .fb-bio {display: flex; max-width: 500px;}
#facebook .fb-follow {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 220px; background: #0095f6; margin-left: auto; padding: 10px; border-radius: 10px; color: #fff;}
#facebook .fb-follow:hover {background: #0066a9;}
#facebook .fb-posts {container-type: inline-size; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #eee; border-radius: 0 0 10px 10px;}
#facebook .fb-posts iframe {border:none!important;overflow:hidden!important;width:100%!important;min-height: 400px!important; display: flex; justify-content: center;border-radius: 10px;}

@media screen and (max-width: 1200px) {
    #facebook .fb-posts {grid-template-columns: repeat(2, 1fr);}
    #facebook .fb-posts iframe:nth-child(3) {display: none;}
}
@media screen and (max-width: 750px) {
    #facebook .fb-posts {grid-template-columns: repeat(1, 1fr);}
    #facebook .fb-posts iframe:nth-child(2) {display: none;}
}

/*=== CONTACT PAGE
==============================*/
.subpage-hero.contact {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("/siteart/FORD-MUSTANG-DASH.jpg");}

.fb-half {display: flex; justify-content: flex-start; align-items: flex-start; gap: 30px; flex-wrap: wrap;}
.fb-half a:hover {color: var(--red);}
.store-hours {display: flex; justify-content: flex-start; align-items: flex-start; gap: 20px;}
.fb-half h4 {margin-bottom: 10px; color: var(--gray);}

.contact-box {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 20px; background: var(--gray-light); border-radius: 10px;}
.contact-box span {font-family: "Big Shoulders"; font-size: 18px; text-transform: uppercase; color: var(--navy); font-weight: 800; letter-spacing: 5%;}
/*.contact-box a::after {content: '\f105'; font-family: "Font Awesome 6 Free";}*/

.flex-form { width: 100%; margin: 0 auto 2rem auto; padding: 25px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); font-size: 15px;  font-family: var(--Saira) !important;}
.flex-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #222; letter-spacing: 0.02em; }
.flex-form input,
.flex-form select,
.flex-form textarea { width: 100%; padding: 12px 14px; margin-bottom: 1.2rem; border: 1px solid #ccc; border-radius: 5px; background: #ffffff; font-size: 15px; color: #333; transition: border-color 0.2s; box-sizing: border-box; }
.flex-form input:focus,
.flex-form select:focus,
.flex-form textarea:focus { border-color: var(--red); outline: none; }
.flex-form textarea { min-height: 100px; resize: vertical;  font-family: var(--Saira);}
.flex-form .form-row { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
.flex-form .form-note { font-size: 13px; color: #888; margin-bottom: 1rem; }
.flex-form .flex-row { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
.flex-form .form-whole { width: 100%; }
.flex-form .form-half { width: calc(50% - 0.5rem); }
.flex-form .form-third { width: calc(33.333% - 0.67rem); }

.flex-form .checkbox-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem 1rem; margin-bottom:1.5rem; }
.flex-form .checkbox-grid label { display:flex; align-items:center; gap:.5rem; margin:0; padding:.6rem .75rem; border:1px solid #ddd; border-radius:5px; font-weight:400; line-height:1.3; cursor:pointer; transition:all .2s ease; }
.flex-form .checkbox-grid label:hover { border-color:var(--red); background:#f8f8f8; }
.flex-form .checkbox-grid input[type="checkbox"] { width:auto; margin:0; padding:0; flex-shrink:0; }
.flex-form .check-label { display:flex; align-items:flex-start; gap:.75rem; font-weight:400; line-height:1.5; cursor:pointer; }
.flex-form .check-label input[type="checkbox"] { width:auto; margin:.2rem 0 0; padding:0; flex-shrink:0; }
.flex-form #recaptcha-holder .grecaptcha-badge {position: relative !important; right: 0 !important; margin-top: 20px !important;}
@media (max-width:991px) { .flex-form .checkbox-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px) { .flex-form .checkbox-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px) { .flex-form .checkbox-grid { grid-template-columns:1fr; } }

@media (max-width: 900px) {
    .form-half,
    .form-third { width: 100%; }
}
@media (max-width: 600px) {
    #formpage .flex-row {flex-direction: column; width: 100%; max-width: none;}
    #formpage .flex-row .form-half {width: 100%;}
    #formpage .flex-row .form-third {width: 100%;}
}

/*=== SERVICE PAGE
==============================*/
.subpage-hero.service {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("/siteart/truck-flatbed-sunset.jpg"); background-position: center 70% !important;}

.service-fb {display: flex; justify-content: space-between; align-items: stretch; gap: 20px;}
.service-fb > .service-box {flex: 1 1 0; height: 300px; background-size: cover !important; background-position: center center !important; max-width: 50vw; display: flex; align-items: flex-end; border-radius: 5px; overflow: hidden; position: relative;}
.service-fb > .service-box:hover {cursor: pointer;}
.service-fb > .service-box::before {content:''; position: absolute; bottom: 0; width: 100%; height: 0px; background: linear-gradient(rgba(255,0,0,0.75))}
.service-fb > .service-box:hover::before {height: 100%;}
.service-fb > .service-box:nth-child(1) { background: url("/siteart/FORD-MUSTANG-DASH.jpg");}
.service-fb > .service-box:nth-child(2) { background: url("/siteart/truck-worker-gritty.jpg");}
.service-fb > .service-box > h3 {padding: 200px 20px 20px 20px; position: relative; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0)); width: 100%;}

.forms-container .tradein-form {display: none;}
.forms-container iframe.vehicle-form {display: none;}

/*=== BLOG PAGE
==============================*/
.subpage-hero.blogs {background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("/siteart/fruendly-front-enhanced.jpg"); background-position: center 20% !important;}

.topics-grid {display: flex; grid-template-columns: repeat(6, 1fr); gap: 5px; flex-wrap: wrap;}
.topic {background: var(--red); color: var(--white); padding: 10px; border-radius: 5px;}
.topic:hover {background: var(--dk-red);}

.blog-grid {display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 5px;}
.blog-card {border: 1px solid #ebebeb; border-radius: 5px; overflow: hidden; background: var(--white);}
.blog-card:hover {background-color: #ebebeb;}
.blog-card > div {padding: 20px; }
.blog-card > img {object-fit: cover; height: 100px; width: 100%;}
.blog-card h3.sm-heading {text-transform: none; margin-bottom: 20px;}

.blog-header {overflow: hidden;}
.blog-header img {display: block;object-fit: cover; object-position: center center;height: 200px; width: 100%; }

#article {padding: 50px 0;}
#article h1 {font-size: clamp(27px, 5vw, 35px);line-height: clamp(27px, 5vw, 35px); margin-bottom: 40px; position: relative; font-weight: 600;}
#article h1::after {content: ''; position: absolute; display: block; bottom: -10px; width: 50%; height: 2px; background-color: var(--red);}
#article h2 {font-size: clamp(18px, 5vw, 26px);line-height: clamp(18px, 5vw, 26px); margin-top: 20px; margin-bottom: 10px; font-weight: 500;}
#article p {margin-bottom: 30px;}
#article ul {font-size: clamp(16px, 5vw, 18px); margin-bottom: 10px; margin-left: 10px;}
#article ul li::before {content:'\f105'; font-family: var(--fa-style-family,"Font Awesome 6 Free"); padding-right: 10px; font-weight: 600; color: var(--red);}

/*=== MEDIA BREAKS 
==============================*/
@media screen and (max-width: 1300px) {
    .footer-wrap > div {flex-wrap: wrap;}
    .footer-wrap > div > div:nth-child(1) {width: 100%;}
    
    .blog-grid {grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 1000px) {
    .header-contact {display: none;}
        
    .quicklinks-grid {grid-template-columns: repeat(2, 1fr);}
    
    .half-photo {flex-direction: column;}
    .half-photo-img {order: 2 !important; max-height: 300px;}
    .half-photo-form {order: 2 !important; max-height: none;}
    .half-photo-text {order: 1 !important;}

    
    .values-grid {grid-template-columns: repeat(2, 1fr);}
    .values-grid .value:nth-child(2) {margin-top: -50px; margin-bottom: 50px;}
    .values-grid .value:nth-child(4) {margin-top: -50px; margin-bottom: 50px;}
    .values-grid .value:nth-child(5) {margin-top: 0; margin-bottom: 0;}
    .values-grid .value:nth-child(6) {margin-top: -50px; margin-bottom: 50px;}
    
    .half-photo-img:has(.swiper) {max-height: none !important; overflow: visible;}
    .half-photo-img .swiper {max-width: 90vw !important; height: 100%;}
    
    .team-grid {grid-template-columns: repeat(3, 1fr);}
    
    .blog-grid {grid-template-columns: repeat(2, 1fr);}
}



@media screen and (max-width: 600px) {
    .values-grid {grid-template-columns: repeat(1, 1fr);}
    .values-grid .value:nth-child(n) {margin-top: 0; margin-bottom: 0;}
    
    .footer-top > div > div:nth-child(1) {display: none;}
    
    .home-hero {background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("../siteart/trucks-cliff-mobile-top.jpg"); background-size: cover; background-position: 65% bottom;}
    .mobile-hero {background: url("../siteart/trucks-cliff-mobile-bottom.jpg"); background-size: cover; background-position: 65% top; height: 400px;}
    
    .team-grid {grid-template-columns: repeat(2, 1fr);}
    
    .blog-grid {grid-template-columns: repeat(1, 1fr);}
}


@media screen and (max-width: 500px) {
    .header-anniv {display: none;}
    .header-top > div {justify-content: center;}
    
    .quicklinks-grid {grid-template-columns: repeat(1, 1fr);}
    
    .team-grid {grid-template-columns: repeat(1, 1fr);}
    
    .service-fb {flex-direction: column; gap: 5px;}
    .service-fb .service-box {max-width: none; height: 100%; overflow: visible;}
}