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

    @font-face {
    font-family: 'Folio Std Light';
    font-style: normal;
    font-weight: normal;
    src: local('Folio Std Light'), url('../fonts/Folio-Std-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Folio Std Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Folio Std Medium'), url('../fonts/Folio-Std-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Folio Std Bold Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Folio Std Bold Condensed'), url('../fonts/Folio-Std-Bold-Condensed.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Folio Std Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Folio Std Bold'), url('../fonts/Folio-Std-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Folio Std Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Folio Std Extra Bold'), url('../fonts/Folio-Std-Extra-Bold.woff') format('woff');
    }


*,
*::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 ===*/
    --Folio-Cond: "Folio Std Bold Condensed", sans-serif;
    --Folio-lt: "Folio Std Light", sans-serif;

	/*=== Colors ===*/
	--white: #FFFFFF;
	--cream: #FFF9F0;
    --gray: #F0EDEE;
    --black: #2b2b2b;
    --orange: #FF7C06;
    
    /*=== 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)}
    .cream{color: var(--cream);}
    .gray{color: var(--gray)}
    .black{color: var(--black)}
    .orange{color: var(--orange)}

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

.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;}

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

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


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

.gimmespace {width: 100%; height: 100px;}

/*=== BODY STYLES 
============================================*/

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

.btn-row {display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-top: 20px; flex-wrap: wrap;}

.btn-orange { color: var(--black); background: var(--orange); display: flex; justify-content: center; align-items: center; padding: 10px 20px 7px; max-width: 220px; text-transform: uppercase; border-radius: 5px; letter-spacing: 5%; font-weight: 600; width: 100%; font-family: var(--Folio-Cond); font-size: 20px;}
.btn-orange:hover { color: var(--orange); background: var(--white);}

.btn-black { color: var(--white); background: var(--black); display: flex; justify-content: center; align-items: center; padding: 10px 20px 7px; max-width: 220px; text-transform: uppercase; border-radius: 5px; letter-spacing: 5%; font-weight: 600; width: 100%; font-family: var(--Folio-Cond); font-size: 20px;}
.btn-black:hover { color: var(--orange); background: var(--white);}

.btn-phone { color: var(--black); background: var(--orange); justify-content: center; align-items: center; padding: 10px; max-width: 220px; text-transform: uppercase; border-radius: 5px; letter-spacing: 5%; font-weight: 600; width: 50px; height: 50px;}
.btn-phone:hover { color: var(--orange); background: var(--white);}

/*=== HEADER STYLES
==============================*/
body:has(#inv) .header-wrap {position: relative; box-shadow: 0px 5px 15px -10px rgba(0,0,0,0.15);}
.header-wrap {position: absolute; width: 100%; margin-top: 25px; z-index: 99;}
.primary.nav {display: flex; justify-content: space-between; align-items: center; padding: 20px 0px 20px 20px;  border-radius: 20px; top: 0; background: var(--white);}
.right-icons {display: flex; justify-content: flex-end; align-items: center; gap: 1vw; background: var(--orange); padding: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.right-icons a {padding: 10px; border-radius: 10px;}
.right-icons a:hover {background: var(--orange); color: var(--white);}
.header-logo img,.header-logo svg {height: 100%; width: 100%; max-height: 100px; object-fit: contain;}
.header-logo:hover svg {fill: var(--orange) !important;}
.mobile-menu-fb{display: flex; justify-content: space-between; align-items: center; gap: 50px; padding: 20px 5% !important;}
.mobile-menu-right {display: flex; flex-wrap: wrap; gap: 20px;justify-content: center; align-items: center;}
.menu-toggle {padding: 0 !important;}

/* Header Search */
.header-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  background-size: 1px 200px;
  position: relative;
  overflow: hidden;
  margin-left: 25px;
}

.header-search-icon:hover {
  cursor: pointer;
}

.header-search-icon:hover i {
  color: var(--white);
}

.header-search-icon a {
  position: relative;
  z-index: 1;
}

.header-search-icon i {
      color: #000;
    font-size: 22px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*  */
.header-search-slide {
  background: transparent;
  padding: 30px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box !important;
/*  border-top: 1px solid var(--gray);*/
}

#slide-search-input {border: 1px solid var(--gray);}

.search-outer-container {
  width: 100%;
  max-height: 100%;
  height: 50px;
}

.header-search {
  display: flex;
  height: 100%;
}

.header-search input[type="text"] {
  font-weight: 400;
  font-style: normal;
  font-size: 16px !important;
  color: #808080 !important;
  text-transform: uppercase;
  background: #d3d3d3;
  border: none;    
  font-family: var(--Folio-lt) !important;
}

.header-search ::placeholder {
  font-weight: 400;
  font-style: normal;
  font-size: 16px !important;
  color: #808080 !important;
  text-transform: uppercase;
}

.header-search i {
  color: #fff;
  font-size: 25px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

#mobile-form-submit {
  max-height: 80px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

#mobile-form-submit:hover {
  background: var(--black) !important;
  cursor: pointer;
}

.header-search input:focus {
  outline: none !important;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
}

.initiallyHidden {
  display: none;
}

/*=== FOOTER STYLES
==============================*/
.footer-wrap {border-top: 1px solid var(--gray); padding: 50px 0;}
.footer-logo {height: 100%; max-height: 100px; min-height: 100px;}
.footer-wrap > div {display: flex; justify-content: space-between; align-items: flex-start; gap: 75px; flex-wrap: wrap;}
.footer-wrap > div ul {display: flex; flex-direction: column; gap: 15px; padding: 15px 0;}
.footer-wrap h4 {background: linear-gradient(rgba(0,0,0,0));}
.footer-wrap > div ul li a:hover {color: var(--orange);}
.footer-contact ul li {text-align: right;}
.footer-contact ul li a {display: flex; gap: 10px;}
.footer-wrap > div div:not(.footer-contact) ul li a::after {content:''; display: block; height: 2px; width: 0px; background: var(--orange);}
.footer-wrap > div div:not(.footer-conact) ul li a:hover::after {width: 100%;}

/*=== HOME PAGE 
==============================*/
.home-hero {background: linear-gradient(rgba(0,0,0,0.75)), url("../siteart/dozer-dirt-mound-full.jpg") center/cover; }
.home-hero > div {display: flex; justify-content: space-between; align-items: center; overflow: visible; padding-top: 20vh; margin-left: 5%; min-height: 100vh;}
.home-hero > div > div {flex: 1 1 0;}
.home-hero > div > div:has(>img) {display: flex; justify-content: center; align-items: center; overflow: visible; flex: 2 1 0;}
.home-hero > div > div > img {object-fit: cover; object-position: left center; height: clamp(0px, 50vw, 800px); display: block;}

.callout-banner {background: linear-gradient(to top, var(--white) 0%, var(--white) 50%, var(--orange) 50%, var(--orange) 100%); padding: 50px 0;}
.callout-banner > a:hover > div {color: var(--orange); transform: translateY(-5px); border-color: var(--orange);}
.callout-banner > a > div {padding: 50px; background: linear-gradient(rgba(0,0,0,0.75)), url("../siteart/dozer-gravel-sky.jpg") center/cover; border-radius: 20px; color: var(--white); border: 3px solid transparent;}
.callout-banner > a > div > span {text-align: right; width: 100%;}

section:has(.swiper) {position: relative;}
.swiper-button-next {right: 0 !important; color: var(--orange);}
.swiper-button-prev {left: 0 !important; color: var(--orange);}
.swiper {height: 100%;}
.swiper-slide {position: relative; text-align: center;font-size: 18px;background: transparent;display: flex;justify-content: center;align-items: stretch; border-radius: 20px; overflow: hidden; height: 100%; border: 3px solid transparent;}
.swiper-slide:hover {border-color: var(--orange);}
.swiper-slide:hover img  {transform: scale(1.05);}
.swiper-slide:hover h4  {color: var(--orange);}
.swiper-slide:hover::before  {background: rgba(0,0,0,0.25);}
.swiper-slide img {display: block;width: 100%;height: 250px;object-fit: cover; }
.swiper-slide::before {content: ''; position: absolute; display: flex; height: 100%; width: 100%; background: rgba(0,0,0,0.5); z-index: 2;}
.swiper-slide h4 {position: absolute; bottom: 20px; left: 20px; z-index: 3; background: linear-gradient(rgba(0,0,0,0));}

.half-photo {margin-top: 100px; padding-bottom: 100px; position: relative; overflow: hidden;}
.half-photo > img {margin-left: 5%; position: absolute; width: 100%; z-index: 1;}
.half-photo > div {position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: stretch; gap: 100px;}
.half-photo > div > div {flex: 1 1 0;}
.half-photo > div > div:not(.bento-images) {align-self: flex-end; padding-top: 150px;}
.half-photo > div > .bento-images {display: flex; align-items: stretch; gap: 20px; flex: 1.5 1 0; padding-top: 20px;}
.half-photo > div > .bento-images img {height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.15);}
.half-photo > div > .bento-images > div:nth-child(2) {display: flex; flex-direction: column; gap: 20px;}
.half-photo > div > .bento-images > div:nth-child(2) img { max-height: 400px; flex: 1 1 0;}

.location {position: relative;}
.location > img {position: absolute; top: 0; left: 0; z-index: 1; transform: scaleX(-1); height: clamp(200px, 20vw, 300px); object-fit: cover; object-position: left center;}
.location > div {display: flex; justify-content: space-between; align-items: stretch; gap: 50px; position: relative; z-index: 2; padding: 50px 0;}
.location > div > div:nth-child(1) {flex: 1.5 1 0; display: flex; flex-direction: column;align-items: stretch;}
.location > div > div:nth-child(1) a:hover {color: var(--orange);}
.location > div > div:nth-child(2) {flex: 1 1 0; display: flex; align-items: stretch;}
.location > div > div img {border-radius: 20px; width: 100%; object-fit: cover; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.15);}

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

/*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;}
.CaptchaImagePanel img {max-width: 200px !important; object-fit: cover !important; object-position: center center;}
.CaptchaMessagePanel {padding:0 0 0 0 !important;margin:0 0 0 0 !important;font-weight:normal !important;font-size:12px;line-height:14px;}
.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:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}

/*=== ABOUT PAGE 
============================================*/
.subpage-hero {background-position:center center!important; background-size:cover!important; height:350px; position:relative; z-index:1; display:flex; align-items:flex-end;}
.subpage-hero h1 {position:relative; padding: 20px; margin: auto auto 50px; line-height: 1;text-box: trim-both cap alphabetic;}
.subpage-hero h1::before {content:""; position:absolute; top:0; left:0; width:50px; height:100%; border-left:5px solid var(--orange); border-top:5px solid var(--orange); border-bottom:5px solid var(--orange); box-sizing:border-box;}

.subpage-hero.about {background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url("/siteart/excavators-two.jpg");}

.photo-left > div {display: flex; justify-content: space-between; align-items: stretch; gap: 50px;}
.photo-left > div > div {flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch;}
.photo-left > div > div img {min-height: 0; object-fit: cover; border-radius: 20px; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.15); height: 100%;}

/*=== CONTACT PAGE 
============================================*/
.subpage-hero.contact {background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url("/siteart/loader-dynamic.jpg");}

.social-row {display: flex; justify-content: flex-start; align-items: center; gap: 20px; font-size: 24px; margin-top: 35px;}
.social-row a {width: 40px; height: 40px; background: var(--orange); color: var(--white); display: flex; justify-content: center; align-items: center; border-radius: 10px;}
.social-row a:hover {transform: scale(1.1); background: var(--black);}

/*=== SERVICE PAGE 
============================================*/
.subpage-hero.service {background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url("/siteart/excavators-on-ship.jpg");}

.mini-bento-images {display: flex; margin-top: 50px; gap: 10px;}
.mini-bento-images > div {display: flex; flex-direction: column; flex: 1 1 0; gap: 10px;}
.mini-bento-images > div > img {height: 100%; object-fit: cover; border-radius: 10px;}
.mini-bento-images > div:nth-child(1) {width: 100%;}







@media screen and (max-width: 1200px) {
    .half-photo > div {flex-direction: column;}
    .bento-images {max-height: none !important;}
    
    .location > div > div:nth-child(2) {flex: 1.5 1 0;}

}

@media screen and (max-width: 1000px) {
    nav.primary {display: none !important;}
    
    .home-hero > div {flex-direction: column-reverse; width: 90%; margin: auto; align-items: flex-start;  padding: 100px 0 50px; min-height: 0px;}
    .home-hero > div > div:nth-child(2) {justify-content: flex-end; width: 100%; margin-top: 50px;}
    .home-hero > div  h1 {max-width: 600px;}
    
    .location > div {flex-direction: column;}
    .location > div:nth-child(1) img {max-height: 300px;}
    .location > div > div:nth-child(2) > form {width: 100%;}
    
    .photo-left > div {flex-direction: column-reverse;}
    .photo-left > div img {max-height: 350px;}
}

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

@media screen and (max-width: 600px) {
    .bento-images {flex-wrap: wrap;}
    .bento-images > div {width: 100%;}
    .bento-images > div img {height: 200px !important; width: 100%;}
    .bento-images > div:nth-child(2) {display: none !important;}
    
    .location > img {object-position: right;}
    
    .half-photo > img {display: none;}
    .half-photo > div > div:first-child {padding-top: 0;}
    
    .mini-bento-images {display: none;}
}