@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 ===*/
    --Roboto: "Roboto", sans-serif;
    --Roboto-Cond: "Roboto Condensed", "Roboto", sans-serif;

	/*=== Colors ===*/
	--black: #1A1A1A;
	--white: #F6F6F6;
	--red: #E50000;
    --gray: #808080;
    --lt-gray: #CFCFCF;
    
    /*=== Font Sizes ===*/
    --p: clamp(16px, 5vw, 20px);

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

    .black{color: var(--black)}
    .white{color: var(--white)}
    .red{color: var(--red)}
    .gray{color: var(--gray)}
    .lt-gray{color: var(--lt-gray)}

.bg-white {background: var(--white);}
.bg-black {background: var(--black);}
.bg-red {background: var(--red);}
.bg-gray {background: var(--gray);}
.bg-lt-gray {background: var(--lt-gray);}

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

.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;
}
strong, b {
    font-weight: 800;
}
p {
    font-size: clamp(16px, 5vw, 18px);
}


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

.center {text-align: center;}

.xxl-heading, .xl-heading, .lg-heading, .md-heading, .sm-heading {
	font-family: var(--Roboto-Cond);
	text-transform: uppercase;
}

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


.xs-heading {
	font-family: var(--Roboto-Cond);
    font-weight: 900;
	text-transform: uppercase;
	padding-top: 5px;
}
.xxl-heading {font-size: clamp(56px, 10vw, 128px);line-height: clamp(56px, 10vw, 96px);}
.xl-heading {font-size: clamp(56px, 5vw, 64px);line-height: clamp(56px, 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;}

/*=== BODY STYLES 
============================================*/
.btn-red {max-width: 250px; font-family: var(--Roboto-Cond); text-transform: uppercase; font-weight: 500; position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:4rem; padding: 10px 7rem 10px 15px; background:var(--red); color:var(--white); text-decoration:none; overflow:hidden; border:1px solid var(--red); transition:color .35s ease, background .35s ease;}
.btn-red::before {content:""; position:absolute; top:0; right:0; width:30%; height:100%; background:var(--white); clip-path:polygon(35% 0,100% 0,100% 100%,0 100%); transition:width .35s ease;}
.btn-red::after {content:"\f178"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--red); font-size:2rem; line-height:1; transition:right .35s ease;}
.btn-red:hover::before {width:38%;}
.btn-red:hover::after {right:0.5rem;}

.btn-white {max-width: 250px; font-family: var(--Roboto-Cond); text-transform: uppercase; font-weight: 500; position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:4rem; padding: 10px 7rem 10px 15px; background:var(--white); color:var(--red); text-decoration:none; overflow:hidden; border: 1px solid var(--white); transition:color .35s ease, background .35s ease;}
.btn-white::before {content:""; position:absolute; top:0; right:0; width:30%; height:100%; background:var(--red); clip-path:polygon(35% 0,100% 0,100% 100%,0 100%); transition:width .35s ease;}
.btn-white::after {content:"\f178"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--white); font-size:2rem; line-height:1; transition:right .35s ease;}
.btn-white:hover::before {width:38%;}
.btn-white:hover::after {right:0.5rem;}

/*=== HEADER STYLES
==============================*/
.top-runner {color: var(--white); background: var(--black) !important;}
.top-runner a:hover {color: var(--red);}
.top-runner > div {display: flex; justify-content: space-between; align-items: center;}
.top-runner > div > div {display: flex; justify-content: flex-start; align-items: center; gap: 50px;}
.header-wrap {background: var(--red);}
.nav-wrap {display: flex; justify-content: flex-end; align-items: center;}
.header {display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;}
.header-logo {width: 100%; height: 100%; max-height: 60px;}

/* Header Search */
.header-search {display: flex; justify-content: center; align-items: stretch; height: 100%;}
.header-search input {padding: 10px; 
     background-color: var(--white) !important; 
     border: none !important; 
     border-radius: 0 !important; 
     box-sizing: unset !important; 
     color: var(--black) !important; 
     display: block !important; 
     height: auto !important; 
     line-height: unset !important; 
     overflow: unset !important; 
     width: 100% !important;}
.header-search button {padding: 10px; background: var(--red); color: var(--white); border-left: 1px solid var(--red);}
.header-search button:hover {background: var(--white); color: var(--red);}

/*=== FOOTER STYLES
==============================*/
.footer-wrap {display: flex; justify-content: space-between; align-items: stretch; border-top: 1px solid var(--red); background: var(--black);}
.footer-content {flex: 2 1 0; padding: 50px 2.5vw; display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap;}
.footer-content div:has(> ul){display: flex; gap: 50px; padding-top: 20px; color: var(--white); flex-wrap: wrap;}
.footer-content li {position: relative; display: block; margin-top: 10px;}
.footer-content a::after {display: none; position: absolute; content: '\f0da'; left: 0;top: 0; color: var(--red);  font-family: "Font Awesome 5 Free"; font-weight: 900; transform: translateX(calc(-100% - 5px));}
.footer-content a:hover{ color: var(--red);}
.footer-content a:hover::after {display: block;}
.footer-logo {flex: 1 1 0; background: var(--red); display: flex; justify-content: center; align-items: center; height: auto; padding: 20px;}
.footer-logo img {height: 100%; width: 100%; max-width: 200px;}

/*=== HOME PAGE 
==============================*/
.home-hero {background:linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)), url("../siteart/white-truck-equipment-trailer.jpg"); background-position: center center; background-size: cover;}
.home-hero > div {}
.home-hero-text {padding: 100px 0; color: var(--white);display: flex; flex-direction: column; gap: 20px;}
.home-hero-text p {max-width: 400px;}

.featuredSwiper .swiper-wrapper {padding: 20px 0;}
.featuredSwiper .swiper-slide {display: flex; flex-direction: column; gap: 20px; padding: 10px; border-radius: 5px; position: relative; background: var(--white);}
.featuredSwiper .swiper-slide > div {display: flex; flex-direction: column; gap: 10px;}
.featuredSwiper .swiper-slide img {height: 300px; display: block; border-radius: 5px; width: 100%; object-fit: cover;}
.featuredSwiper .swiper-slide:hover::after {background: var(--red); color: var(--white);}
.featuredSwiper .swiper-slide:hover {transform: translateY(-5px);}
.featuredSwiper .swiper-slide::after {content: '\f090'; position: absolute; z-index: 2; right: 0; top: 0; padding: 10px; border-radius: 1000px; overflow: hidden; font-family: "Font Awesome 6 Free"; font-weight: 900; background: var(--white);}
.swiper-nav-top {position: relative; display: flex; justify-content: flex-start; gap: 5px;height: auto; margin-bottom: 10px;}
.swiper-nav-top > .swiper-button-prev,
.swiper-nav-top > .swiper-button-next {position: relative; top: unset; left: unset; right: unset; bottom: unset; height: unset; width: unset; margin: unset; background: var(--white); padding: 10px; color: var(--red); max-height: none; display: flex; justify-content: center; align-items: center; border-radius: 5px;}

.search-row {display: flex; justify-content: space-between; align-items: stretch; gap: 10px; margin-top: 20px;}
.search-row > div {flex: 1 1 0; width: 100%; max-width: none;}
.search-row > div > input,
.search-row > div > select {flex: 1 1 0; width: 100%; max-width: none; padding: 10px 20px; height: 100%;}
.search-row > button {background: var(--red); color: var(--white); padding: 10px 20px; height: auto;}
.search-row > button:hover {background: var(--black);}

.ql-button-wrapper {display: flex; justify-content: space-between; align-items: stretch; gap: 10px;}
.ql-button {position: relative; flex: 1 1 0; display: flex; align-items: flex-end;height: auto; padding: 100px 20px 20px; border-radius: 5px; border: 1px solid transparent;}
.ql-button::after {content: '\f090'; position: absolute; z-index: 2; right: 5px; top: 5px; padding: 10px; border-radius: 1000px; overflow: hidden; font-family: "Font Awesome 6 Free"; font-weight: 900; background: var(--white); border: 1px solid var(--white);}
.ql-button:hover::after {background: var(--red); color: var(--white);}
.ql-button:nth-of-type(1) {background: var(--red);}
.ql-button:nth-of-type(2) {background: var(--gray);}
.ql-button:nth-of-type(3) {background: var(--black); border-color: var(--white);}
.ql-button:hover {transform: translateY(-5px);}

.ql-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: stretch;}
.ql-box {display: flex; flex-direction: column; height: auto; align-items: flex-start; color: var(--white); border: 1px solid rgba(255,255,255,0.25); padding: 10px; border-radius: 5px; position: relative;}
.ql-box img {height: 200px; width: auto; object-fit: contain; display: block;}
.ql-box h3, .ql-box span {padding: 5px 10px;}
.ql-box:hover {background: var(--white); color: var(--red);}
.ql-box::after {content: '\f090'; position: absolute; z-index: 2; right: 5px; top: 5px; padding: 10px; border-radius: 1000px; overflow: hidden; font-family: "Font Awesome 6 Free"; font-weight: 900; background: var(--white); color: var(--black); border: 1px solid var(--white);}
.ql-box:hover::after {color: var(--red);}

.half-photo {display: flex; justify-content: space-between; align-items: stretch; border-radius: 5px; overflow: hidden;}
.half-photo > div {flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; height: auto;}
.half-photo-text {padding: 50px 2.5vw; background: var(--red);}
.half-photo-text > img {max-width: 200px;}
.half-photo-img {flex: 2 1 0 !important; background: var(--white);}
.half-photo-img > img {height: 100%; object-fit: cover; width: auto;}
.half-photo-img .swiper-slide {display: flex; justify-content: center; align-items: stretch;}
.half-photo-img .swiper-slide:hover {cursor: grab;}
.half-photo-img .swiper-slide:active {cursor: grabbing;}
.half-photo-img .swiper-slide img {height: 100%; width: auto; object-fit: contain;}
.half-photo-img .swiper-slide img.cover {height: 100%; width: 100%; object-fit: cover;}
.half-photo-img .swiper-button-prev-design,
.half-photo-img .swiper-button-next-design {display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; position: absolute; background: var(--red); color: var(--white) !important; z-index: 10;}
.half-photo-img .swiper-button-prev-design:hover,
.half-photo-img .swiper-button-next-design:hover {cursor: pointer;}
.half-photo-img .swiper-button-prev-design {}
.half-photo-img .swiper-button-next-design {right: 0;}

.brandSwiper .swiper-slide {display: flex; justify-content: center; align-items: stretch; background: var(--white); border-radius: 5px; height: auto; padding: 20px; transition: 0.3s ease all;}
.brandSwiper .swiper-slide:hover {cursor: grab; background: var(--red); transition: 0.3s ease all;}
.brandSwiper .swiper-slide:active {cursor: grabbing;}
.brandSwiper .swiper-slide img {height: 100%; width: auto; object-fit: contain;}
div:has(> .swiper-button-prev-brand) {display: flex;  align-items: center; gap: 10px;}
div:has(> div > .swiper-button-prev-brand) {display: flex; align-items: center; flex-wrap: wrap; gap: 50px;}
.brandSwiper .swiper-button-prev-brand,
.brandSwiper .swiper-button-next-brand {display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; position: relative; background: var(--red); color: var(--white) !important; z-index: 10;}
.brandSwiper .swiper-button-prev-brand:hover,
.brandSwiper .swiper-button-next-brand:hover {cursor: pointer;}
.brandSwiper .swiper-button-prev-brand {}
.brandSwiper .swiper-button-next-brand {right: 0;}

/*=== CONTACT PAGE
==============================*/
.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; padding: 25px; background: var(--white); border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); font-size: 15px; }
.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; font-family: var(--body-font); 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(--primary); outline: none; }
.flex-form textarea { min-height: 100px; resize: vertical; }
.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;  width: 100%;}
.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); }

@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%;}
}

.thankyou-box {display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; padding: 30px 20px;}

.trailerSwiper {height: 100%; width: 100% !important; max-width: 100vw;}
.trailerSwiper .swiper-slide { height: 100%; max-width: 100% !important; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 50px;}
.trailerSwiper-nav {display: flex; justify-content: space-between; position: absolute; z-index: 10; top: 15px; width: calc(100% - 40px);}
.trailerSwiper-nav > * {display: flex; justify-content: center; align-items: center; padding: 10px 20px; background: var(--red); color: var(--white); border-radius: 5px;}
.trailerSwiper-nav > *:hover {background: var(--black); cursor: pointer;}
.trailerSwiper .swiper-pagination {height: 10px;}
.trailerSwiper .swiper-pagination-progressbar-fill {background: var(--red);}
.trailerSwiper .option-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(200px,1fr));gap:15px; min-width: 0;}
.trailerSwiper .option-card {position:relative;display:block;padding:10px;border:2px solid #ddd;border-radius:12px;cursor:pointer;transition:all .2s ease; min-width: 0;}
.trailerSwiper .option-card input {position:absolute;opacity:0;}
.trailerSwiper .option-card:has(input:checked) {color: var(--white); border-color:var(--red);background: var(--red);}
.trailerSwiper-nav >*.is-hidden {display:none !important;}

/*=== MEDIA QUERIES
==============================*/
@media screen and (max-width: 1000px) {
    .top-runner > div > div:not(.search-outer-container) {display: none;}
    .top-runner > div {justify-content: flex-end;}
    .header-search {width: 100%; justify-content: flex-end;}
    
    .ql-grid {grid-template-columns: repeat(3, 1fr);}
    
    .half-photo {flex-direction: column;}
    .half-photo-img:has(.swiper-slide) {height: 350px !important; overflow: visible;}
    .half-photo-img .swiper-wrapper {height: 300px !important; width: 90vw;}
    .half-photo-img .trailerSwiper .swiper-wrapper {height: auto !important; width: 100%;}
    .half-photo-img:has(.trailerSwiper .swiper-slide) {height: auto !important; width: 100%;}
}

@media screen and (max-width: 768px) {
    .footer-wrap {flex-direction: column;}
    
    .search-row {flex-direction: column;}
    
    .ql-button-wrapper {flex-direction: column;}
    
    .ql-grid {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 500px) {
    .ql-grid {grid-template-columns: repeat(1, 1fr);}
}