/*
Theme Name: Total Terrain Solutions Custom Wordpress Theme
Author: Justin Guerrero and George Chung
Description: Custom wordpress theme for Total Terrain Solutions; inspiration draw from previous work on latitudeco.com.  Credit to BTS Brands for inspiration.
Version: 1.0
*/

/************type***************/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800;900&display=swap');
body{overflow-x: hidden !important; color: #555555; font-size: 15px; line-height: 28px;
    font-family: 'Raleway', sans-serif; font-weight: 500;
}
.numbers {
	font-family: 'Work Sans', sans-serif; 
	white-space: nowrap;
	/*font-weight: 400;*/
	display: inline-block !important;
	text-decoration: inherit;
}

.fa-brands{font-family: "Font Awesome 6 Brands" !important;}


.site-header ul, .entire-footer ul, .my-gallery ul {list-style: none;}
/************************* fonts, buttons, icons and text blocks styles**********************************/
@media (min-width: 768px) {
    h1{font-size: 44px; color: #18181b; font-weight: bold; line-height: 44px; font-family: 'Bebas Neue', sans-serif;}
    h2{font-size: 44px; color: #000000;                    line-height: 44px; font-family: 'Bebas Neue', sans-serif;}
    h3{font-size: 24px; color: #000000; font-weight: 300; line-height: 26px; font-family: 'Raleway', sans-serif;}
    h4{font-size: 20px; color: #000000; font-weight: 400; line-height: 30px; font-family: 'Raleway', sans-serif;}
    h5{font-size: 16px; color: #000000; font-weight: 500; line-height: 24px; font-family: 'Raleway', sans-serif;}
    h6{font-size: 14px; color: #000000; font-weight: 400; line-height: 24px; font-family: 'Raleway', sans-serif;}
}
@media (max-width: 768px){
    h1{font-size: 24px; color: #18181b; font-weight: bold; line-height: 44px; font-family: 'Bebas Neue', sans-serif;}
    h2{font-size: 36px; color: #000000;                    line-height: 44px; font-family: 'Bebas Neue', sans-serif;}
    h3{font-size: 20px; color: #000000; font-weight: 300; line-height: 26px; font-family: 'Raleway', sans-serif;}
    h4{font-size: 16px; color: #000000; font-weight: 400; line-height: 30px; font-family: 'Raleway', sans-serif;}
    h5{font-size: 14px; color: #000000; font-weight: 500; line-height: 24px; font-family: 'Raleway', sans-serif;}
    h6{font-size: 12px; color: #000000; font-weight: 400; line-height: 24px; font-family: 'Raleway', sans-serif;}
}

 /***h1,h2{-webkit-transform: scaleX(0.8); transform: scaleX(0.8);}***/

p, li{font-family: 'Raleway', sans-serif;letter-spacing: 0.15rem; font-weight: 500; font-size: large;}
strong {font-weight: 800;}

.headerText {white-space: nowrap;  text-align: center;}
#homeHeaderText h1{margin-top: -20px; margin-bottom: 40px; color: white !important;}
#landscapingHeaderText h1, #snowscapingHeaderText h1, #contactHeaderText h1{margin-top: -20px; margin-bottom: 40px;}
#homeHeaderInput h2{font-family: 'Raleway', sans-serif; margin-top: -10px; margin-bottom: 40px;}
.headerText h2{color: white;}
.upperCASE {text-transform: uppercase !important;}

@media (max-width: 768px) {
    #homeHeaderText h1{line-height: 1.2;margin-bottom: none;}
    .serviceComponentsBanner{flex-direction: column;}    
}


/* 968px determined by menu navigation more than doubling up */
    /* On smaller resolutions, hide content for Large screens */
    @media only screen and (max-width: 1160px) {
        .LARGESCREEN {display: none;}
   }

   /* On larger resolutions, hide contentfor Small screens */
    @media only screen and (min-width: 1161px) {
        .SMALLSCREEN {display: none;}
   }

.gen-container{padding-left: 5%; padding-right: 5%;}
.section-title{margin-bottom: 40px;}

/*hyperlink highlights*/
.blogSingle a, .editor-field a{text-decoration: none; color: inherit; font-weight: bold; transition: color 0.2s ease;}
.blogSingle a:hover, .editor-field a:hover{color: green;}
.lift{display: inline-block;transition: transform 0.2s ease}
.lift:hover{transform: translateY(-2px) scale(1.03);}




/************************* margins and paddings***************************************************************/
.marginxs{margin-top: 30px; margin-bottom: 30px;}
.marginlast{margin-bottom: 0 !important; margin-top: 90px;}
.marginsm{margin-top: 55px; margin-bottom: 55px;}
.marginmd{margin-top: 90px; margin-bottom: 90px;}
.marginlg{margin-top: 150px; margin-bottom: 150px;}
.mrg-bt-40{margin-bottom: 40px;}
.mrg-bt-30{margin-bottom: 30px;}
.mrg-bt-20{margin-bottom: 20px;}
.marginauto{margin: auto;}

.margin-tb-100{margin: 100px 0 100px 0;}
.margin-tb-100.margin-end{margin-bottom: 0px; padding-bottom: 100px;}
.margin-tb-100.margin-start{margin-top: 0px; padding-top: 100px;}
.margin-tb-100-200{margin: 100px 0 200px 0;}
.margin-tb-100-200.margin-end{margin-bottom: 0px; padding-bottom: 200px;}
.margin-tb-100-200.margin-start{margin-top: 0px; padding-top: 100px;}


.notopmargin{margin-top: 0 !important;} .nobottommargin{margin-bottom: 0 !important;} .noleftmargin{margin-left:  0 !important;} .norightmargin{margin-right:  0 !important;}
.notoppadding{padding-top: 0 !important;} .nobottompadding{padding-bottom: 0 !important;} .noleftpadding{padding-left:  0 !important;} .norightpadding{padding-right:  0 !important;}
.custom-width-80{width: 80%; margin: auto;}
.custom-width-90{width: 90%; }
.txt-padded{padding-left: 15px; padding-right: 15px;}
.txt-padded-white{padding: 50px; background: #f9f9f9;}
.head-left{left: 2.5vw; right: none;}
.head-more-left{left: 15vw; right: none;}
.head-more-right{right: 2.5vw; left: none;}
.head-right{right: 2.5vw;left: none;}

.flexCenter{display: flex; justify-content: center; align-content: center; flex-wrap: wrap; text-align:center;}
.flexVertical{display: flex; flex-direction: column; flex-wrap: wrap;}
.flexHorizontal{display: flex; flex-direction: row;}
/************************* margins and paddings end***************************************************************/

/*****************backgrounds, borders and lines**************************************************************************************/
.line{height: 1px; border-bottom: 1px solid #c5c5c5;}
.line-gold{height: 1px; border-bottom: 5px solid #dda036;}
.line-gold-thin{height: 1px; border-bottom: 2px solid #dda036;}
.line-dark-thin{height: 1px; border-bottom: 1px solid #cccccc;}
.bg-white{background: #ffffff;}
.bg-white-tr{background: rgba(255, 255, 255, 0.8);}
.bg-dark{background: #2e3233;}
.bg-dark-buildings{background: url('assets/img/buildings.png')center bottom no-repeat #181d1e;}
.bg-light-gray{background: #f5f5f5;}
.bg-light-blue{background: #899fac;}
.bg-nexus2{background: url('assets/img/bg-nexus-2.png') center bottom no-repeat #181d1e; background-size: 100%;
    width: 100%; height: 90px;}
    
.underline {
  position: relative;
  display: inline-block;
  --line-color: #CCEB6D;
  --line-posX: -50%;
}

.underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px; /* space between text and line */
  transform: translateX(var(--line-posX));
  width: calc(100% - 0.8em);
  height: 8px;
  background: var(--line-color);
}
.underline.green{--line-color: #CCEB6D;}
.underline.blue{--line-color: #E1E9F6;}
.underline.centered{--line-posX: -50%;}
.underline.left{--line-posX:-80%;}
.underline.right{--line-posX:0%;}
.overflowHidden {overflow: hidden;}
/*****************backgrounds, borders and lines**************************************************************************************/

/*** global rules ***/
.gen-transition{-webkit-transition: 0.3s ease-in-out !important;-moz-transition: 0.3s ease-in-out !important;-ms-transition: 0.3s ease-in-out !important;-o-transition: 0.3s ease-in-out !important;transition: 0.3s ease-in-out !important;}
/*** global rules end ***/

/*******************main navigation************************************************/
.navbar-fxd-wrapper{position: fixed; top: 0px; left: 0; z-index: 999; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3); background: #fff;}
.page-template-about .navbar-fxd-wrapper, .page-template-home .navbar-fxd-wrapper{background: none;}
.site-logo{width: 280px; height: 80px;/* max-width: 100%;*/ background: url('assets/svgs/tts-logo.svg') ; background-position: center; background-repeat: no-repeat;
	background-size: 60% !important; transition: none !important;}

#menu-primary-menu{-webkit-transition: 0.3s ease-in-out !important;-moz-transition: 0.3s ease-in-out !important;-ms-transition: 0.3s ease-in-out !important;-o-transition: 0.3s ease-in-out !important;transition: 0.3s ease-in-out !important;}
#navbar{padding-right: 0; margin-left:auto;}
#nav-button{display: none;}
.navbar{margin-bottom: 0; border: none; display: flex; padding: 0px 10px 0px 10px; width: 100%; }
.navbar-nav{float: right; margin-top: 30px; width: 100%; text-align: right; padding: 0;}
.navbar-nav li{margin: 0 0px; padding: 0; float: none; display: inline-block; }
.navbar-nav li { margin: 0 1px; float: none; display: inline-block; position: relative;}
.navbar-nav li:before {content: '';}

.navphone-container{/*height: 50px;*/margin-right:auto; align-self: end;}
.navphone a{color: #cceb6d !important; position: relative; transition: 0.3s ease-in-out !important; overflow: hidden; text-decoration:none;}

.navphone a:hover{ color: #e1e9f6 !important;}
.navphone {white-space: nowrap; padding: 10px 0; font-size: 22px; font-weight: 700;}
.navmenu{margin-left: auto;}

.navbar-nav li a { display: block; position: relative; width: fit-content;  padding: 15px 0; margin: 0 10px;  font-size: 16px;  font-weight: 400; color: #CCEB6D;
    -webkit-transition: 0.3s ease-in-out !important; -moz-transition: 0.3s ease-in-out !important; -ms-transition: 0.3s ease-in-out !important;
    -o-transition: 0.3s ease-in-out !important; transition: 0.3s ease-in-out !important; }
.navbar-nav li:hover > a { color: #E1E9F6; text-decoration: none;}
.navbar-nav li a:before { content: ''; background: #ffffff; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; opacity: 0;}
.navbar-nav li:hover > a:before { opacity: 1;}
.navbar-nav li a:after, .navbar-nav li.current-menu-item a:after { content: ''; background: #E1E9F6; width: 0; height: 3px; position: absolute; left: 0; bottom: 0;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;}
.navbar-nav li.current-menu-item:hover a:after, .navbar-nav li.current-menu-item a:after, .navbar-nav li:hover > a:after{ left: 0; width: 100%;}
.navbar-nav li a:focus {
    outline: none;
    text-decoration: none;
}


@media(min-width: 1161px){
    .navbar-nav li .sub-menu{display: none; position: absolute; width: 270px; right: 9px; padding-inline-start: 0px;}
    .navbar-nav li:hover .sub-menu{display: block;  background: rgba(0,0,0,0.4);}
    .navbar-nav .sub-menu li{display: block; text-align: left; margin: 0; padding: 0 !important; border-bottom: 1px solid #eee;}
    .navbar-nav .sub-menu li a{color: #fff; padding: 5px 10px; font-weight: 500; font-size: 14px;}
    .navbar-nav .sub-menu li a:before, .navbar-nav .sub-menu li a:after{display: none;}
}
@media(max-width: 1160px){ 
    .menu-item-has-children {padding-right: 100px !important;}

    .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-item-has-children > .sub-menu {
        display: none;
        width: fit-content;
    }

    .menu-item-has-children.open > .sub-menu {
        display: block;
    }
    .menu-item-has-children > span {
        position: absolute;
        top: 4px;
        right: 20px;
        background: none;
        border: 1px solid #dddddd;
        border-radius: 0px;
        padding: 4px 10px 2px;
    }
  .menu-item-has-children > span {
    display: inline-block !important;
  }
  .navbar-nav > li {
    display: flex;
    flex-direction: column;
    }
    
    #navbar {margin-left: auto; margin-right: auto;}
    
    .navbar-nav > li:not(:last-child)::after{display: none;}  /** doesn't make sense in mobile **/
}


li.current-menu-item > a, li.current_page_item > a {
    color: #E1E9F6; /* highlighted color */
    
}

.navbar-nav > li {
    position: relative;
    padding: 0 18px;
    text-transform: uppercase;
    font-weight: 400;
    flex-direction: column;
}

.navbar-nav > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 40%;
    bottom: 40%;
    width: 1px;
    background: #dcdcdc;
}

.navbar-header {padding-right: 30px; align-content: center;}

.icon-bar{background: white;}

.submenu {
  display: none;
}

.submenu.open {
  display: block;
}


@media(max-width: 1250px) {
    .navbar-toggle{margin-top: 15px; margin-bottom: 15px; border: none; border-radius: 0;}
}


/*******************main navigation ends************************************************/
/****swiper****/
.swiper-pagination-bullets {display:none;}
/****swiper end***/



/***
====================================================================
        media Starts
====================================================================
***/
@media(max-width:768px){
    .vertical-768{display:flex !important; flex-direction: column !important; justify-content: center; align-content: center; flex-wrap: wrap;}
    .hide-768{display: none !important;}
    .home-row-1 .terrain-wrapper{flex-direction:column;}
    .services-btns {width: 400px !important; height: 400px !important;}
    #home-button-1{display: flex; justify-content: center;}
    .terrain-text{text-align: center;}
    .terrain-title{text-align: center; margin: auto;}
}
@media(max-width:1024px){
    .vertical-1024{display:flex !important; flex-direction: column !important; justify-content: center; align-content: center; flex-wrap: wrap;}
    #singleArticle{flex-direction: column;}
    #singleArticle-Article{max-width:none;}
}
@media(max-width:1080px){
    #about{left: 30vw !important;}
}
@media(max-width:1160px){
    .hide-1160{display: none;}
    .show-1160{display: block !important;}
    .navphone-container{align-self: center;}
    .navbar{flex-direction: column;}
    #menu-primary-menu-links{display: flex; flex-direction: column; justify-content: center;}
    #navhead-and-bar{display: flex; justify-content: space-between;}
    .navbar-nav{margin-top: 0px;}
}
@media(min-width:1161px){
    .collapse{display: block !important; visibility: visible;}
}

@media(max-width: 1224px){
    .vertical-1224{display:flex !important; flex-direction: column !important; justify-content: center; align-content: center; flex-wrap: wrap;} 
    .contact-form{margin-top: 20px; display: flex; justify-content: center;}
    .mobile-fix-100{width: 100% !important;}
}
@media(max-width:1260px){
    .hide-1260{display: none;}
}
@media(max-width:1300px){
    .hide-1300{display: none;}
}

/***
====================================================================
        media Ends
====================================================================
***/


/***
====================================================================
        Home Starts
====================================================================
***/
.headerSec{ position: relative; width: 100%;max-height: min(80vh, 700px); overflow: hidden; padding: 0; transition: 0.3s; display: flex; align-content: center; flex-wrap: wrap;}
.headerSec:before{content: ""; position: absolute; width: 100%; height: 100%;  background: rgba(0,0,0,0.38);}
/*.headerSec:before{content: '';position:relative;bottom: 0;left: 0;background: rgb(0, 98, 39);width: 70%;height: 10px;z-index: 2; display: none;}*/
#videoDesktop {object-fit: cover; width: 100%; height: 100%;}
#videoBG {
    position:fixed;
    z-index: -999999; display: none;
}
@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
        height: 100%;
    }
}
#singleDesktop {object-fit: cover; object-position: center center; display: block; width: 100%; height: 700px;}

.headerSec #aboutDesktop {object-position: 50% 40%;}
.headerSec .slide-text {position:absolute; z-index: 10;top: 50%; left: 12.5vw;}
.headerSec .slide-text #about{position:absolute; z-index: 10;top: -60px; left: 60vw;}
.headerSec .slide-text h1{font-family: 'Raleway', sans-serif}
.headerSec .slide-text h4{color: #fff;}
.headerSec .slide-text {color: #fff;}
.headerSec .slide-text p {color: #fff; line-height: 22px; padding: 0; margin-bottom: 15px !important;}

.headerSec .slide-text a {padding: 15px 80px !important; display: inline-block; color: #000000; font-size: 16px;
    line-height: 26px; text-transform: uppercase; font-weight: 600; transition: 0.3s ease-in-out !important; overflow: hidden;
    position: relative; background: #CCEB6D; margin-top: 20px; border-radius: 20px;}
.headerSec .slide-text a:hover { color: #000; text-decoration: none; background: #E1E9F6;}

.headerSec .slide-text a:before, .headerSec .slide-text a:after{content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.3); transform: rotate(0); transition: 0.3s; opacity: 0;}

.headerSec .slide-text a:before{transform-origin: bottom left;}
.headerSec .slide-text a:hover:before{transform: rotate(-180deg); opacity: 1;}

.headerSec .slide-text a:after {transform-origin: bottom right;}
.headerSec .slide-text a:hover:after{transform: rotate(180deg); opacity: 1;}
.headerSec .slide-text ul.mainBannerBtns {display: flex; justify-content: center; width: 100%; list-style-type: none;}
.headerSec .slide-text ul.mainBannerBtns li {padding-right: 10px;}
.headerSec .slide-text ul.mainBannerBtns li:last-child {padding-right: 0;}
.leftAlign{text-align: left !important;}

#blank-bar {
  width: 100%;
  display: block;
  background-color: black;
}

.terrain-trapezoid {
    position: relative;
    width: 800px;
    height: inherit;
}

.terrain-trapezoid svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}




/***
====================================================================
	End Home
====================================================================
***/
/***
====================================================================
	Start Home Intro
====================================================================
***/

.homeIntro{display: block;}
.homeIntro h2{color: #000; font-size: 28px; line-height: 42px;}
.homeIntro p{color: #000;}
.homeIntro .txt-left{text-align: left;}


#bgsolid {
    background-color: rgba(0,0,0,1);
    transition:background-color 0.3s ease;
}
#bgsolid.scrolled {
    background-color: rgba(0,0,0,0.64);
    color: white;
}
#blank-bar{
    width: 100%;
    height: 
}

/***
====================================================================
	End Home Intro
====================================================================
***/
/***
====================================================================
	Start Home
====================================================================
***/

@media(min-width: 1161px){
    .home-row-1 {
      margin: 100px auto 100px !important;
      box-shadow: -20px 20px 20px;
      max-width: 1200px;
    }
}
.home-row-1 {
    margin: 100px 0 100px 0;
    display: flex;
    
}


.home-row-2 {
    display:flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
}

.home-row-2{content:"";padding: 50px 0;  background-color: #E1E9F6; position: relative; z-index: 1;}
.home-brands-carousel-1-area, .home-brands-carousel-2-area{content:"";  background-color: #E1E9F6; position: relative; z-index: 1;}
.home-row-3{position: relative; margin: 100px 0px; overflow: hidden;}
.home-row-2, .home-brands-carousel-2-area{background-color: #E1E9F6;}
.home-brands{display: flex;}
.home-brands-carousel-1-area{background-color: #CCEB6D}
.home-brands-carousel-1-area, .home-brands-carousel-2-area{width: 50%; display: flex; flex-direction: column;}
.terrain-wrapper {
  position: relative;
  width: 100%;
  background: black;
  z-index: 1;
  padding: 40px 20px;
  padding-right: 60px;
}

.topography-filter, .topography-filter-long{
  position: relative !important;
}

.topography-filter:after{
  content: ""; /* Required for pseudo-elements to render */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('assets/svgs/topography.svg'); /* Your pattern image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1; /* Adjust this value for desired opacity (0.0 to 1.0) */
  z-index: -1; /* Places the pseudo-element behind the content */
  transform: translateZ(0); /* IE bugfix */
}

.topography-filter-long:after{
  content: ""; /* Required for pseudo-elements to render */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('assets/svgs/topography-long.svg'); /* Your pattern image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25; /* Adjust this value for desired opacity (0.0 to 1.0) */
  z-index: -1; /* Places the pseudo-element behind the content */
}

.invert:after{filter: invert() !important;}
.darker3:after{opacity: 0.4 !important;}
.darker2:after{opacity: 0.25 !important;}
.darker:after{opacity: 0.17 !important;}
.lighter:after{opacity:0.05 !important;}

.terrain-content {
  position: relative;
  padding: 2vw;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow:hidden;
  z-index: 1;
}
.terrain-content .highlight {
  color: #CCEB6D;
}
.terrain-content h2{
  color: white;
}

.terrain-swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-height: 700px;
    max-width: 400px;
}
@media(min-width:769px){
    .terrain-swiper{
        /*box-shadow: -20px 20px 20px;*/
    }
}

.terrain-swiper img {
    width: 100%;
}

/***.terrain-content .terrain-title{content: ""; position: absolute; width: 80px; height: 3px; background: #CCEB6D; bottom: -15px; left: 2vw;} ***/
.terrain-title{width: fit-content;}


.generic-btn {
  background: #c4ff4d;
  color: black;
  border: none;
  padding: 0.8rem 1.5rem;
  font-weight: normal;
  border-radius: 10px;
  cursor: pointer;
  z-index: 5;
  position: relative;
  transition: background 0.3s ease;
}

.generic-btn:hover {
  background: #E1E9F6;
}

.generic-btn2 {
  background: #E1E9F6;
  color: black;
  border: none;
  padding: 0.8rem 1.5rem;
  font-weight: normal;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.generic-btn2:hover {
  background: #000;
  color: #c4ff4d
}

.generic-btn3 {
  background: #c4ff4d;
  color: black;
  border: none;
  padding: 0.8rem 3rem;
  font-weight: normal;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.generic-btn3:hover {
  background: #E1E9F6;
}

.home-services{display: flex; /*gap: 10%;*/ justify-content: space-evenly; position: relative; align-items: center; width: 100%;}
.services-btns{
    position: relative;
    width: clamp(400px, 30vw, 500px);
    aspect-ratio: 1/1;
    margin:30px;
    background:var(--bg-url);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 0 0 0 0;
    box-shadow: 0 12px 25px rgba(0,0,0, 0.3);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.services-btns a{margin: auto; display: block;}

.services-btns:hover{
    transform: scale(1.1);
    text-decoration: none;
}
    
.services-btns::before{
    content: "";
    position: absolute;
    background: rgba(0,0,0,0.55);
    inset: 0; /* implicitly specifies width and height */
    opacity: 1;
}
.services-btns:hover::before{
}

.services-btns span{
    position: relative;
    text-align: center;
    z-index: 1;
    text-decoration: none;
    color: white;
    font-size: 2rem;
    margin: 10px;
}

.services-btns .service-btn-label {
    overflow: hidden;
    width: 100%;
    z-index: 1;
    margin-top:auto;
    margin-bottom:auto;
}

.services-btns .service-btn-label img{
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.services-btns .service-btn-caption {padding: 0 35px;}

.arrows-and-title{
    display: flex; 
    flex-direction: row;
    height: 35%;
}
.arrow {
  padding-top: 20px;
  font-size: 2rem;
  color: green;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: relative;
}

/* Keyframes for left/right arrows */
@keyframes move-left {
  0%, 100% { left: 0; }
  50% { left: -6px; }
}

@keyframes move-right {
  0%, 100% { right: 0; }
  50% { right: -6px; }
}

#snow-arrows-and-title .left-arrow{transform: translateX(3.5vw);}
#snow-arrows-and-title .right-arrow{transform: translateX(-3.5vw);}

.left-arrow{/*transform: translateX(1.5vw);*/}
.right-arrow {/*transform: translateX(-1.5vw);*/}

/* Animate arrows on hover */
.services-btns:hover .left-arrow {
  opacity: 1;
  animation: move-left 0.8s infinite ease-in-out;
}

.services-btns:hover .right-arrow {
  opacity: 1;
  animation: move-right 0.8s infinite ease-in-out;
}

.Carousel-text {display: flex; justify-content: center; align-content: center; flex-direction: column; margin-left: 10%; margin-right: 10%; text-align: center;}

.push-to-bottom {margin-top: auto;}

/***
====================================================================
	End Home
====================================================================
***/
/***
====================================================================
	Start About Us
====================================================================
***/
.missionComponentsBanner {
    /*
    height:400px;
    margin: 50px 0;
    */
    gap: 4%;
    
}
.missionComponentsBanner .missionElement {width: 380px; flex-shrink: 0px; padding: 100px 0px;}
.missionComponentsBanner .missionElement p, .missionComponentsBanner .missionElement h2{
    color: white !important;
    position:relative;
    z-index:5;
}

.missionComponentsBanner:before{
    content: "";
    position: absolute;
    background-color: black;
    width:100%;
    height: 100%;
    z-index:-2;
}

.componentsSub:before{
    filter: invert();
}

.peopleSection {
    gap: 20px;
    margin: 50px 0;
    position: relative;
}
.peopleBanner {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
.peopleBanner:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #E1E9F6;
    z-index: -1;
}

.peopleBanner .imgSec {
    flex-shrink: 0;
    width: 498px;
    height: 650px;
}
.peopleBanner .textSec {
    margin: 5%;
    width: calc(100% - 498px - 10%);   
}
@media(max-width:1250px) {
    .peopleBanner {flex-direction: column;}
    .peopleBanner .textSec {width: 90% !important;}
}

/***
====================================================================
	End About Us
====================================================================
***/

/***
====================================================================
	Start Services
====================================================================
***/

.galleryPortal{
    content: "";
    position: relative;
    padding: 100px 80px;
    background-color: black;
    z-index: -1;
}
.galleryPortal:before{filter: invert(); opacity: 0.3 !important;}
.galleryPortal p{color: white;}

.serviceComponentsBanner {
    content: "";
    position: relative;
    width: 100%;
    /*height: 500px;*/
    background-color: #E1E9F6;
    z-index: 1;
    justify-content: space-around;
}

.serviceStatementSec {
    margin: 0 20%;   
}

.serviceComponentsBanner{
    margin: 50px 0;
    padding: 50px 20px;
    gap: 3%;
}

.servicePersonalizationSec {
    margin: 50px 0;   
}

@media(max-width: 1000px) {
    .services{flex-direction: column; flex-wrap: wrap; align-content: center;}   
}

/***
====================================================================
	End Services
====================================================================
***/
/***
====================================================================
	Start Gallery
====================================================================
***/
/* ===============================
   GALLERY CSS — THUMBNAILS + FULLSCREEN MORPH
================================ */

/* ---------- Thumbnails / Grid ---------- */
.gallery-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.featuredGallery {
    /*margin: 20px 10%;*/
    margin: 60px auto 60px;
    /*padding: 20px 0; */
    background-color: #E1E9F6;
    /*border-radius: 5px; */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    max-width: 100vw;
    width: 100vw;
    justify-self: center;
}
.featuredGallery .gallery-row {margin-top: -40px; margin-bottom: -40px;}
.landscapingGallery h2, .snowRemovalGallery h2{padding: 40px 0px;}



.galleryItems {
    margin: 20px;
}

/* ---------- Project Gallery Container ---------- */
.projectGallery {
    width: 300px;
    position: relative;
    overflow: hidden;  /* default thumbnail */
    cursor: pointer;
}

/* Caption overlay */
.projectGallery::after {
    content: var(--title, "");
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 14px;
    text-align: center;
    backdrop-filter: blur(4px);
    z-index: 10;
}

/* Pattern overlay */
.projectGallery::before {
    content: "";
    position: absolute;
    top: calc(100% - 2rem - 20px);
    left: 0;
    width: 100%;
    height: calc(100% - 0px);
    background-image: url('assets/images/topography.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert();
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Hover fade-in */
.projectGallery:hover::before {
    opacity: 0.55;
}

/* Swiper buttons */
.projectGallery .swiper-button-prev,
.projectGallery .swiper-button-next {
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.7;
}

.projectGallery .swiper-button-prev::after,
.projectGallery .swiper-button-next::after {
    content: "";
}

/* ---------- Swiper / Thumbnails ---------- */
.project-swiper {
    position: relative;
    object-fit: cover;
    transform-origin: top left;  /* for morph */
    will-change: transform;
}

/*.project-swiper .swiper-container,*/

/** copy begin: credit to https://oxygen4fun.supadezign.com/tips/swiperjs-tips-and-good-practice/ **/

.swiper-slide img {
    opacity: 0.1;
    transition: .3s ease all
}

.swiper-slide-active img,
.swiper-slide-duplicate-active img {
    opacity: 1
}



/** end copy **/

.featured-gallery-slide{width: 300px; height: 300px; flex-shrink: 0;}

.swiper-wrapper.featured{
    --size: 300px;
    width: var(--size);
    max-height: var(--size);
}

.project-swiper {width: 100%;}

.project-swiper img,
.project-swiper video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;  /* thumbnail fit */
}

.projectGallery{width: 300px;}

.projectGallery img, .projectGallery video{
    width: 300px;
    height: 300px;
    object-fit: cover;
    max-width: 90vw;
    max-height: 80vh;
}

.projectGallery .swiper-slide {margin-top: auto; margin-bottom: auto;}


/* ---------- FULLSCREEN MORPH ---------- */
/* Default overlay (hidden) */



.projectGallery.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9001;
    overflow: visible;
    background: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Hide caption and pattern in fullscreen */
.projectGallery.is-fullscreen::before,
.projectGallery.is-fullscreen::after {
    opacity: 0 !important;
    pointer-events: none;
}

.projectGallery.is-fullscreen .projectCaption {
    opacity: 0;
}

/* Fullscreen Swiper */
.projectGallery.is-fullscreen .project-swiper {
    width: fit-content;
    max-width: 80vw;
    height: fit-content;
    max-height: 80vh;
    /*outline: 2px solid red; /* debug */

}

.projectGallery.is-fullscreen img,
.projectGallery.is-fullscreen video {
    width: inherit;
    height: inherit;
    object-fit: contain;
}


/***
====================================================================
	End Gallery
====================================================================
***/

/***
====================================================================
	Start BLOGs
====================================================================
***/

@media(max-width: 768px){
    .blogpost{display: flex; flex-direction: column-reverse;}
}

.blogBox{border: 1px solid #f3f3f3; padding: 30px;}
.blogPosts {/*max-width: calc(100% - 400px);*/ gap: 40px;}
.blogPosts .d-flex{display: flex;align-items: flex-start; flex-wrap: nowrap; margin-bottom: 30px; }

.blogPosts .blogBox .blogImage{overflow: hidden; position: relative; margin-right: 20px;}
.blogPosts .blogBox .blogImage img {transform: scale(1); transition: .3s;}
.blogBox:hover .blogImage img {transform: scale(1.1);}

.blogPosts .blogBox .blogContent{width: calc(100% - 200px);}
.blogPosts .blogBox .blogImage img {width: 200px;}

.blogPosts .blogBox .blogContent a.blogButton {font-size: 12px; background: #425968; padding: 3px 15px; color: #fff; margin-bottom: 15px;}

.blogContent h5, .blogContent a{color: black;}
.blogContent>a{ font-weight: bold;}
.blogContent>a:hover{ text-decoration: none;}

.bb {color: black;}
.bb:hover{color: black; text-decoration: none;}
.bb:hover h5{text-decoration: none;}
.bb h5{position: relative; font-size:2.0rem; display: inline-block;}
.bb h5:after{ content: ''; background: black; width: 0; height: 3px; position: absolute; left: 0; bottom: 0;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;}
    
.bb:hover .underlineTitle h5::after{width: 100%;}

.dateStamp { /* used in BLOGs page */
    display: inline-block;
    background: black;
    color: white;
    padding: 0 2em;
}

.dateBox { /* used in individual articles */
    display: block;
    border-radius: 15px;
    height: 75px;
    justify-content: center;
    align-content: center;
    text-align: center;
    background: #cceb6d;
    transform: translateX(-100px) translateY(20px);
    padding:5px 20px;
    overflow: hidden; /* used to hide corners of typography tag */
}
.dateBox .numbers{font-family: "Bebas Neue";}
.dateBox p{font-family: "Bebas Neue";}




#featuredArticlesSec{
    align-self: flex-start;
    position: relative;
    display: inline-block;
    width: 400px;
    margin:auto;
    margin-top: unset;
}

#featuredArticlesSec:before{
    content: "";
    position: absolute;
    background-color: #ECEFF1;
    width:100%;
    height: 100%;
    z-index:-2;
}
#featuredArticleSec:after{
    transform:  rotate(-90deg); 
    background-repeat: repeat !important;
}

.article-img-wrapper {width: 100%; aspect-ratio: 16 / 9;}
@media(min-width:1025px){
    #singleArticle-Article{max-width:70vh; margin-right: 0;}
    
    #singleArticle-Feature{margin-left: 0; margin-right: auto;}
}
/***
====================================================================
	End BLOGs
====================================================================
***/
/***
====================================================================
	Start Contact
====================================================================
***/

.listPretty{list-style-type: none;}

.listPretty li:not(.exclude):hover .li-info, .listPretty li:not(.exclude):hover span{
    font-weight: bold; text-decoration: none;
}
.listPretty li .li-info{color: black; font-size: 20px; line-height: 2;}

.infoSec{padding: 60px;}

/* Default submit button style */
.wpcf7-submit {
  background-color: #cceb6d; /* green */
  color: black;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover highlight (brighter green) */
.wpcf7-submit:hover {
  background-color: #e1e9f6; /* lighter green highlight */
  transform: translateY(-2px); /* optional button lift */
}


/***
====================================================================
	End Contact
====================================================================
***/

/********************************footer****************************************************/

/* .entire-footer:before{content: ""; background: black; position: absolute; width: 100%; height: 100%;z-index: -1;} */

.icon-cutout {
  --icon-scale: 1;
  width: calc(2.8rem * var(--icon-scale));;
  /*height: 2.2rem;*/
  display: inline-block;
  vertical-align: middle;
  fill: #E1E9F6;
}
@media(max-width: 768px){
    .icon-cutout.social-icon{--icon-scale: 2.00;}
}
@media(min-width: 769px){
    .icon-cutout.social-icon {--icon-scale: 1.43;}
}

.icon-cutout:hover {
    transition: 0.3s ease-in-out !important;
    fill: #cceb6d;
}

.footerNavigationMenus{--footerFontSize: 1.8rem;}
@media(min-width: 993px){
    .footerNavigationMenus{display: flex; justify-content: space-evenly;}
}
@media(max-width: 1160px){
    .footer-contact.SMALLSCREEN {display: flex; justify-content: center;}
    .icon-cutout{--icon-scale: 1.3;}
}
.footerNavigationMenus a{font-size: var(--footerFontSize); padding: 9px;}

.container-footer {background: black;}
.container-footer .footer-logo{display: block; justify-self: center;}
.container-footer .get-in-touch{position: relative;}
.container-footer .get-in-touch::after {position: absolute; top: auto; left: 0; width: 100%; max-width: 1170px; height: 1px; content: ""; background-color: #899fac;
    margin: auto; bottom: -60px; right: 0;}

.container-footer .get-in-touch .line-shape{position: relative;}
.container-footer .get-in-touch .line-shape::after {position: absolute; top: auto; left: 0; width: 100%;max-width: 1170px; height: 1px;
    content: ""; background-color: #454545; margin: auto; bottom: -60px; right: 0;}

.container-footer .get-in-touch .d-flex {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end;}
.container-footer .get-in-touch .get-in-content img{width: 23px;}
.container-footer .get-in-touch .get-in-content h3{font-size: 22px; color: #ffffff; margin-left: 7px; margin-bottom: 0; margin-top: 20px;}
.container-footer .get-in-touch .get-in-content p{margin-left: 20px !important; padding: 0 !important; margin-top: 0 !important; font-size: 15px;}


.container-footer .get-in-touch .mybtn {padding: 5px 60px !important; display: inline-block; color: #fff; font-size: 16px;
    border: 1px solid #899fac; line-height: 26px; text-transform: uppercase; font-weight: 600; transition: 0.3s ease-in-out !important;
    margin-top: 15px; overflow: hidden; position: relative;}
.container-footer .get-in-touch .mybtn:hover {color: #fff; text-decoration: none; border: 1px solid #899fac; background: #899fac;}

.container-footer .get-in-touch .mybtn:before, .container-footer .get-in-touch .mybtn:after{content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.3); transform: rotate(0); transition: 0.3s; opacity: 0;}

.container-footer .get-in-touch .mybtn:before{transform-origin: bottom left;}
.container-footer .get-in-touch .mybtn:hover:before{transform: rotate(-180deg); opacity: 1;}

.container-footer .get-in-touch .mybtn:after {transform-origin: bottom right;}
.container-footer .get-in-touch .mybtn:hover:after{transform: rotate(180deg); opacity: 1;}

.container-footer .footer-area ul{padding-inline-start: 0px;} 
.container-footer .footer-area h3{ margin-top: 0; margin-bottom: 25px; display: inline-block; position: relative; font-size: 18px;
    line-height: 24px;}
.container-footer .footer-area p{margin-bottom: 10px !important;}
.container-footer .footer-area h3:before, .container-footer .footer-area h3:after{position: absolute; content: ''; height: 1px; left: 0;}
.container-footer .footer-area h3:before{background: #899fac;  width: 70%; bottom: -8px; z-index: 1;}
.container-footer .footer-area h3:after{background: #899fac; width: 30%; bottom: -12px;}

.container-footer .footer-area .navigation ul li a { color: #fff; display: block;}
.container-footer .footer-area .navigation ul li a:hover{color: #CCEB6D; text-decoration: none;}
.footer-area .footer-logo img { width: 250px;}
.container-footer .footer-area .contact p span{color: #425968;}

.container-footer .footer-area .footer-social{display: flex; justify-content: center; gap: 10px; margin-left: auto; margin-right: auto; line-height: 0; margin: 15px 0; padding-inline-start: 0px;}
.container-footer .footer-area .footer-social li{display: inline-block;}

/***
.container-footer .footer-area .footer-social li a{color: black; background: #E1E9F6; font-size: 14px; display: block; width: 40px; height: 40px; border-radius: 5px;
    line-height: 40px; text-align: right;}
.container-footer .footer-area .footer-social li a:hover{background: #CCEB6D;}
***/

.container-footer .footer-area .footer-social i.fa-facebook-f, .container-footer .footer-area .footer-social i.fa-linkedin-in {position: relative; right: 15%; bottom: -15%;}


/***.container-footer .footer-area .icon-outset i{color: #E1E9F6;}***/
.container-footer .footer-area .icon-outset li{line-height: 28px; padding: 9px;}
.container-footer .footer-area .icon-outset a{color: #fff;}
.container-footer .footer-area .icon-outset a:hover{color: #CCEB6D; text-decoration: none;}
/***.container-footer .footer-area .icon-outset span {line-height: 20px; display: block;}***/
/*.container-footer .footer-area .icon-outset li {padding-left: 30%;}*/

.container-footer .footer-area .contact .icons p{line-height: 20px; margin: 0 !important;}
.footer-label{text-align: center; font-size: 26.5px;}
.navigation li{text-align: center; font-size: 14.5px;}
.footer-label .underline::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(var(--line-posX));
    width: calc(100% - 0.8em);
    height: 2px;
    background: #CCEB6D;
}
.contact-label {justify-self: start; padding-left: calc(2 * var(--footerFontSize));}

.copyright {background: black;}
.copyright p {margin: 5px 0 !important; line-height: 18px; text-align: center;}
.copyright a{color: #636363; font-size: 12px;}
.copyright a:hover{color: #ffffff;}

/********************************footer ends****************************************************/