@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;
    --Akshar: "Akshar", sans-serif;

	/*=== Colors ===*/
	--white: #FFFFFF;
	--black: #1A1A1A;
	--yellow: #FFC400;
	--gray: #313131;

    
    /*=== 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)}
    .yellow{color: var(--yellow)}
    .black{color: var(--black)}
    .gray{color: var(--gray)}

body {
    position: relative;
	font-family: var(--Akshar), sans-serif !important;
	height: auto !important;
    background-color: var(--tan);
    background-image:
        url("/siteart/logo-background.svg");
}

.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-family: var(--Barlow);*/
    font-weight: 800;
}
p {
    font-size: clamp(16px, 5vw, 18px);
}
.bold {
	font-family: var(--Saira);
    font-weight: 900;
}

.thick {
	font-family: var(--Saira);
    font-weight: 600 !important;
}

.center {text-align: center;}

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

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


.xs-heading {
	font-family: var(--Saira);
    font-weight: 900;
	text-transform: uppercase;
	padding-top: 5px;
}
.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;}

.page-wrap-min-height {min-height: 100vh; display: flex; flex-direction: column;}
.page-wrap-min-height .splatter-bg {flex: 1; display: flex;}

/*=== BODY STYLES 
============================================*/
.width90 {width: 90%; max-width: 1600px; margin: auto;}
.gray-bg {background-color: var(--gray);}
.splatter-bg {background:linear-gradient(rgba(49,49,49,0.85)), url("/siteart/paint-splatter-white.webp"), linear-gradient(var(--gray)); background-size: contain; background-position: left center; background-repeat: no-repeat;}
.splatter-right-bg {background:linear-gradient(rgba(49,49,49,0.85)), url("/siteart/paint-splatter-white-right.webp"), linear-gradient(var(--gray)); background-size: contain; background-position: right center; background-repeat: no-repeat;}
.photo-bg {background: linear-gradient(rgba(0,0,0,0.5)), url("/siteart/dozer-and-excavator-bw.webp") center no-repeat; background-size: cover !important;}

.btn-yellow {display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 20px; max-width: 220px; background-color: var(--yellow); color: var(--black); border-radius: 10px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--yellow);}
.btn-yellow:hover {background-color: var(--black); color: var(--yellow);}

.btn-black {display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 20px; max-width: 220px; background-color: var(--black); color: var(--yellow); border-radius: 10px; text-transform: uppercase; font-weight: 600; border: 1px solid var(--black);}
.btn-black:hover {background-color: var(--yellow); color: var(--black);}

/*=== HEADER STYLES 
==============================*/
.subpage-header .header-wrap {position: relative !important; background: var(--black) !important;}
*:not(.subpage-header) .header-wrap {position: absolute; width: 100%; z-index: 2; background: linear-gradient(to bottom, var(--black), transparent);}
.header-logo {max-width: 300px; height: auto; object-fit: contain; padding: 20px 0;}
.primary.nav {display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 50px;}

.mobile-menu-fb {display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 50px; width: 90% !important; margin: auto;}
.mobile-menu-right {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 25px;}
a.menu-toggle {padding: 0 !important; margin: 0 !important;}
.btn-phone {color: var(--black); padding: 10px 15px; background-color: var(--orange); border-radius: 10px;}
.btn-phone:hover { background-color: var(--white); border-radius: 10px;}

.last-link {background-color: var(--yellow); color: var(--black) !important;}
.last-link:hover {background-color: var(--black) !important; color: var(--yellow) !important;}

/*=== FOOTER STYLES 
==============================*/
.footer-wrap {background: var(--black) !important; background-size: cover; background-position: top center; padding: 100px 0; color: var(--white);}
.footer-wrap a:not(.btn-yellow):hover {color: var(--yellow);}
.footer-logo {max-width: 300px; object-fit: contain;}
.footer-wrap > div {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 50px; flex-wrap: wrap;}
.footer-wrap > div > div > ul {padding: 0 25px; text-transform: uppercase;}
.footer-wrap > div > div > ul > li {margin-bottom: 15px;}
.footer-wrap > div > div:last-child {text-align: right;}
.footer-wrap > div > div:last-child i.fa-facebook-square {font-size: 32px;}
.copyright-text {font-size: 13px;}

/*=== HOME PAGE 
==============================*/

.home-hero {position: relative; z-index: 1; width: 100%; max-width: 100%; top: 0; height: 100vh; background: linear-gradient(rgba(0,0,0,0.5)), url("/siteart/excavators-front.webp") center; background-color: var(--black); background-repeat: no-repeat;}
.home-hero-text {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; height: 100%;}
.home-hero-text h1 {max-width: 600px; margin-bottom: 20px;}
.home-hero-text p {max-width: 400px; margin-bottom: 20px;}

.quicklinks-grid {position: relative; z-index: 2; display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-top: -100px; }
.quicklink { position:relative; display:block; height:340px; border-radius:16px; overflow:hidden; text-decoration:none; background:#000; box-shadow:0 0 25px rgba(0,0,0,1); }
.quicklink-img { position:absolute; inset:0; }
.quicklink-img img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(1); transition:transform .5s ease, filter .5s ease; }
.quicklink h2 { position:absolute; left:0; bottom:20px; width: 100%; text-align: center; margin:0; z-index:2; }
.quicklink::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 65%); }
.quicklink:hover img { transform:scale(1.06); filter:brightness(.65); }
.quicklink:hover { transform:translateY(-6px); box-shadow:0 30px 60px rgba(0,0,0,.45); transition:transform .35s ease, box-shadow .35s ease; }

section:has(.half-photo) {padding: 150px 0 100px 0;}
.half-photo {display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 50px;}
.half-photo > div {display: flex; flex-direction: column; width: 100%;}
.half-photo > .half-photo-text {}
.half-photo > .half-photo-img { border-radius: 10px; overflow: hidden; box-shadow: 15px 15px 25px 5px rgba(0,0,0,0.75);}
.half-photo > div > img {display: block;object-fit: cover; height: 100%; }
.half-photo > div > iframe {min-height: 400px;}

.yellow-banner {background: var(--yellow); display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; }
.yellow-banner-text {padding: 50px 0; margin-left: 5vw;}
/*.yellow-banner .yellow-banner-img {height: 100%;}*/
.yellow-banner .yellow-banner-img img {object-fit: cover; object-position: left center; display: block; height: 100%;}

.photo-callout {position: relative; padding: 100px 0;}
.photo-callout-text {padding: 100px 35vw 100px 5vw; background: linear-gradient(to top, rgba(204,204,204,1), var(--white), rgba(204,204,204,1)); max-width: 80%; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.photo-callout-text h2, .photo-callout-text p { max-width: 700px;}
.photo-callout-img {position: absolute; right: clamp(0px, calc(100px - 20vw), 300px); top: 50%; transform: translateY(-50%); max-width: 100%;}
.photo-callout-img img {display: block; max-width: 600px; object-fit: contain;}

.half-text-section {padding: 100px 0;}
.half-text-section.homepg {background: linear-gradient(rgba(0,0,0,0.75)), url("../siteart/dozer-and-excavator-bw.webp") no-repeat center; background-size: cover;}
.half-text-text {max-width: 600px;}

.map-full {position: relative;}
.map-callout {position: absolute; width: 90%; right: 50%; transform: translateX(50%);bottom: -50px; padding: clamp(1rem, 5vw, 50px); display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5vw; text-align: center; background: linear-gradient(rgba(0,0,0,0.75)), url("/siteart/dozer-and-excavator.webp") no-repeat center; background-size: cover; border-radius: 20px;}

/*=== CONTACT PAGE 
==============================*/
.subpage-hero.contact {background: linear-gradient(rgba(0,0,0,0.5)), url("/siteart/dozer-and-excavator.webp") center no-repeat;}

.subpage-hero { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; background-size: cover !important;}
.subpage-hero-text {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px 0; margin-left: 5vw; width: 100%;}
.subpage-hero .subpage-hero-img img {object-fit: cover; object-position: left center; display: block; height: 100%;}


#contact-form {display: flex; flex-direction: column; gap: 10px; font-size: var(--p); max-width: 100%;}
#contact-form label {display: none;}
#contact-form input {padding: 20px; width: 100%;}
#contact-form .input-row {display: flex; flex-direction: row; gap: 10px;}
#contact-form .dualFields {width: 50%;}
#contact-form textarea {width: 100%; height: 200px; border: none; font-family: var(--Inter); padding: 20px; font-size: var(--p);}
#contact-form input.submit:hover {cursor: pointer ;}

/*control the Captcha */
.CaptchaPanel {margin:0 0 0 0 !important;padding:0 0 0 0 !important;text-align: center;line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0;padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important;margin:0 0 0 0 !important;font-weight:normal !important;font-size:12px;line-height:14px; color: #fff;}
.CaptchaAnswerPanel {margin:0 0 0 0;padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:2;text-decoration: underline !important;margin:0 0 0 0;padding:8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}

@media screen and (max-width: 700px) {
    #contact-form .input-row {flex-direction: column; width: 100%;}
    #contact-form .dualFields {width: 100%;}
}

/*=== ABOUT PAGE 
==============================*/
.subpage-hero.about {background: linear-gradient(rgba(0,0,0,0.5)), url("/siteart/excavator-lineup.webp") center no-repeat;}

#about-swiper {padding: 0 0 100px 0; overflow: visible;}
#about-swiper:hover {cursor: grab;}
#about-swiper:active {cursor: grabbing;}
#about-swiper .swiper-container.gallery-top { width: 100%; height: 100% !important; margin-left: auto; margin-right: auto; aspect-ratio: 1920/1080;}
#about-swiper .swiper-container.gallery-thumbs { width: 100%; height: 100% !important; margin-left: auto; margin-right: auto;  aspect-ratio: 8/1;}
#about-swiper .swiper-slide { background-size: cover; background-position: center; border-radius: 10px;}
#about-swiper .gallery-top { height: 80%; width: 100%; }
#about-swiper .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; }
#about-swiper .gallery-thumbs .swiper-slide { height: 100%; opacity: 0.4; }
#about-swiper .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border: 3px solid var(--yellow);}
#about-swiper .swiper-button-next, #about-swiper .swiper-button-prev {color: var(--white); background: rgba(0,0,0,0.25); backdrop-filter: blur(10px); border-radius: 10px; padding: 10px;}
#about-swiper .swiper-button-next:hover, #about-swiper .swiper-button-prev:hover {color: var(--black); background: rgba(255,255,255,0.25);}

/*=== MEDIA QUERIES
==============================*/
@media screen and (max-width: 1000px) {
    .primary.nav {display: none;}
    .quicklinks-grid {grid-template-columns:repeat(2, 1fr);}
    .photo-callout-text {padding: 50px 5vw;}
    .photo-callout-text, .photo-callout-text h2, .photo-callout-text p  {max-width: 100%;}
    .photo-callout-img {position: relative; top: unset; right: unset; bottom: -50px; transform: none; display: flex; justify-content: center;}
    .photo-callout-img img {max-width: 100%; max-height: 400px;}
}
@media screen and (max-width: 750px) {
    .half-photo {flex-direction: column;}
    .yellow-banner-text {width: 90%; margin: auto;}
    .yellow-banner-img {display: none;}
    .subpage-hero-text {width: 90%; margin: auto;}
    .subpage-hero-img {display: none;}
    .gallery-thumbs {display: none;}
}

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