@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



:root {

  --lightgreen : #CCDEC6;

  --font : 'Josefin Sans';

  --darkgrey : #8F8F8F;

  --logogrey : #A9AAA9;

  --black : #1E1E1E;

  --blue : #2491D0;

  --red : #DB2727;

  --yellow : #FFDE16;

  --darkblue : #002D62;

}



body {

  margin : 0;

  padding : 0;

  overflow-x : hidden;

  max-width : 100vw;

}



::-webkit-scrollbar {

  background-color : var(--darkgrey);

}



::-webkit-scrollbar-thumb {

  background-color: rgb(255,255,255,0.3);

}



::-webkit-scrollbar-thumb:hover {

  background-color: rgb(255,255,255,0.4);

}



.hamburger {

  display : block;

  width : 50px;

  height : 50px;

  position : absolute;

  right : 20px;

  top : 20px;

  transition-duration: 0.5s;

  z-index : 99;

  font-size : 40px;

  color : white;

  background-color : rgb(0,0,0,0);

  border : none;

  cursor : pointer;

}



#hamburgerX {

  z-index : 95;

  opacity : 0;

  color : white;

  }



#navDiv {

  position : absolute;

  width : 30vw;

  right : -100%;

  height : 100vh;

  margin : 0;

  padding : 0;

  background-color : var(--darkgrey);

  z-index : 90;

  display : flex;

  flex-direction : column;

  align-items : center;

  justify-content: center;

  overflow : hidden;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

  transition-duration : 0.5s;

}



#navDiv > * > h4 {

  font-family : var(--font);

  font-size : 18px;

  color : var(--black)!important;

  font-weight : bold;

  margin : 0;

  width : 100%;

  text-align : center;

}

#navDiv > a {

  padding : 20px;

  padding-left : 50vw;

  padding-right : 50vw;

  background-color : var(--logogrey);

  margin-top : 20px;

  transition-duration : 0.3s;

}



#navDiv > a:hover {

  background-color : rgb(0,0,0,0.06);

}



#nav-logo {

  width : 40%;

  height : auto;

  margin : 20px;

}



#slideShow {

  width : 100vw;

  height : 100vh;

  position : relative;

  padding : 0;

  margin : 0;

  overflow : hidden;

}



#slideshowContainer {

  height : 400%;

  width : 100vw;

  top : 0;

  left : 0;

  display : flex;

  flex-direction : column;

  align-items : center;

  justify-content : center;

  position : relative;

  padding : 0;

  margin : 0;

  transition-duration: 1s;

}



.slide {

  height : 100%;

  width : 100%;

  position : relative;

  left : 0;

  padding : 0;

  margin : 0;

}



#slide1 {

  background-image : url('images/slide-1.png');

  background-size : cover;

  background-position : bottom;

 }

 #slide2 {

   background-image : url('images/civil.jpg');

   background-size : cover;

   background-position : center;

  }

  #slide3 {

    background-image : url('images/transportation.jpg');

    background-size : cover;

    background-position : center;

   }

/*

header {

  position : relative;

  width : 100vw;

  height : 100vh;

  background-image : url("images/slide-1.png");

  background-repeat : no-repeat;

  background-size : cover;

  background-position : center;

  padding : 0;

  margin : 0;

} */



header > #logo {

  height : 100px;

  width : auto;

  position : absolute;

  left : 20px;

  top : 20px;

  padding : 0;

  margin : 0;

  z-index : 50;

}



.section-header {

  width : 100vw;

  height : auto;

  display : flex;

  flex-direction : column;

  align-items : center;

  justify-content : center;

  padding-top : 20px;

  padding-bottom : 20px;

}



h1, h2, h3 {

  font-family : Raleway;

  font-size : 22px;

  margin : 10px;

}



h2 {

  font-weight : normal;

}



h3 {

  font-weight : bold;

  color : white;

}



/* offerCards */



section {

  width : 100vw;

  height : auto;

  padding : 0;

  padding-top : 50px;

  padding-bottom : 50px;

  margin : 0;

  display : flex;

  flex-direction : column;

  align-items : center;

  justify-content : center;

}



.brick-section {

  background-image : url("images/background-images/bricks.jpg");

  background-size : cover;

  background-position : center;

  background-repeat : no-repeat;

}



.lamp-section {

  background-image : url("images/background-images/lights.jpg");

  background-size : cover;

  background-position : center;

  background-repeat : no-repeat;

}



/* cards */



.cardContainer {

  display : flex;

  flex-direction : row;

  align-items : center;

  justify-content : space-around;

  flex-wrap : wrap;

  margin : 0;

  width : 80%;

  height : auto;

  padding : 0;



}



.card {

  background-color : var(--logogrey);

  width : 270px;

  height : 320px;

  margin : 20px;

  overflow : hidden;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

  transition-duration : 0.5s;

}



.card:hover > * {

  bottom : 0;

}



.card:hover {

  transform : scale(1.1);

}



.cardInfo {

  position : relative;

  text-align : center;

  display : flex;

  flex-direction : column;

  align-items : center;

  justify-content : space-between;

  background-color : rgb(0,0,0,0);

  width : 100%;

  height : 100%;

  transition-duration : 0.5s;

  bottom : -88%;

  color : white;

  backdrop-filter : blur(8px);

}



.cardInfo > .subHeader {

  font-family : var(--font);

  font-size : 20px;

  color : white;

  width : 100%;

  padding-top : 10px;

  padding-bottom : 10px;

  margin : 0;

  color : white;

}



.cardInfo:hover > .filter {

opacity : 1;

}



.cardInfo > p {

  max-width : 80%;

  margin-top : 50px;

  font-size : 16px;

  font-family : var(--font);

  font-weight : 100;

  color : white;

  margin-bottom : 0;

  padding : 0;

}



.subHeader {

  font-family : var(--font);

}



.cardText {

  font-family : "Open Sans";

}



.offerButton {

  padding : 10px;

  padding-left : 15px;

  padding-right : 15px;

  border : 0;

  background-color : white;

  color : white;

  font-family : var(--font);

  font-weight : bold;

  margin : 40px;

  cursor : pointer;

  transition-duration : 0.3s;

  font-size : 16px;

}



#civil {

  background : url("images/civil.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



#construction {

  background : url("images/construction.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



#transportation {

  background : url("images/transportation.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



#vaps {

  background : url("../images/vaps.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : left;

}

/* End offerCards */





h4 {

  font-family : var(--font);

  color : var(--black);

  font-weight : bold;

  margin : 0;

  font-size : 20px;

  white-space : nowrap;

}



h5 {

    font-family : var(--font);

  color : var(--black);

  font-weight : bold;

  margin : 0;

  font-size : 20px;

  white-space : normal;

  max-width : 90%;

  text-align : center;

}



p {

  color : black;

  font-weight : normal;

  text-align : center;

  font-size : 20px;

  font-family : var(--font);

  max-width : 50%;

}



.card-img {

  height : 40%;

  width : auto;

  margin : 0;

  margin-bottom : 50px;

}



.button-container {

  width : 20%;

  height : auto;

  display : flex;

  flex-direction : row;

  align-items : center;

  justify-content : center;

}



button {

  width : 140px;

  height : 50px;

  background-color : rgb(255,255,255,0);

  border : 0;

  font-family : var(--font);

  font-weight : bold;

  color : white;

  cursor : pointer;

  transition-duration : 0.3s;

  margin-top : 30px;

  margin : 20px;

}



button:hover {

  background-color : var(--logogrey);

  color : white

}



.x-button {

  padding : 5px;

  width : 35px!important;

  height : 35px!important;

  background-color : white;

  border : 0;

  font-size : 20px;

  color : black;

  position : absolute;

  right : 30px;

  top : 30px;

  cursor : pointer;

}



/* Footer */



footer {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-around;

    padding-top : 30px;

    padding-bottom : 30px;

    width : 100%;

    position : relative;

    background-color : white;

    z-index : 10;

}



footer > * {

  max-width : 70%;

  text-align: center;

  font-family : var(--font);

}





.footerIconTextContainer {

  display : flex;

  flex-direction : row;

  justify-content : flex-start;

  align-items: center;

  max-width : 100%;

}



.footerText {

  font-size : 18px;

  color : var(--black);

  text-align : left;

  max-width : 30vw;

}



.footerText:hover {

  text-decoration : underline;

  transform : scale(1);

}



#copyright {

  text-align : center;

  white-space : normal;

}



#copyright:hover {

  text-decoration : none;

}



.footerIcon {

  width : 40px;

  height : 40px!important;

  margin : 20px;

}



#footerContainer {

  display : flex;

  flex-direction : row;

  align-items : center;

  justify-content: space-between;

  width : 100%;

}



#footerIconContainer {

  display : flex;

  flex-direction : column;

}



#footerIconContainer > img {

  width : 130px;

  height : auto;

}



#footerCredit {

  color : var(--black);

  width : 100%;

  text-align : right;

  font-size : 16px

}



#credit {

  color : white;

}



#credit:hover {

  cursor : pointer;

  text-decoration : underline;



}



#footerSectionDiv {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  width : 100%;



}



#footerNavDiv {

  display : flex;

  flex-direction: row;

  align-items: stretch;

  justify-content:  space-around;

  padding-top : 10px;

  padding-bottom : 10px;

  width : 90%;

}



.footerLink {

  color : var(--black);

  font-size: 18px;

  font-weight : light;

  white-space : nowrap;

}



hr {

  border : 1px solid var(--black);

  width : 80%;

}



a {

  text-decoration : none;

  color : inherit;

}



a:hover {

  text-decoration : underline;

}



/* End Footer */



.short-header {

  width : 100%;

  height : 15vh;

  padding : 0;

  margin : 0;

}



#about-header {

  background-image : url("images/background-images/roads.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



#contact-header {

  background-image : url("images/background-images/construction.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



#work-header {

  background-image : url("images/background-images/civil.jpg");

  background-size : cover;

  background-repeat : no-repeat;

  background-position : center;

}



.IconTextContainer {

  display : flex;

  flex-direction : row;

  justify-content : flex-start;

  align-items: center;

  max-width : 100%;

}



a {

  color : var(--darkRed);

  transition-duration : 0.3s;

  font-weight : 500;

}



.Text {

  font-size : 24px;

  color : var(--darkRed);

  text-align : left;

  max-width : 30vw;

}



.Text:hover {

  text-decoration : underline;

  transform : scale(1);

}



#Container {

  display : flex;

  flex-direction : row;

  align-items : center;

  justify-content: space-between;

  width : 100%;

}



#IconContainer {

  display : flex;

  flex-direction : column;

}



.Link {

  color : var(--darkRed);

  font-size: 16px;

  font-weight : light;

}



.icon {

  width : 40px;

  height : 40px;

  margin : 20px;

  fill : var(--darkRed);

}



.photo-container {

  display : flex;

  flex-direction : row;

  align-items : center;

  justify-content : space-around;

  flex-wrap : wrap;

  width : 80%;

}



.photo-container > img {

  width : 40%;

  height : auto;

  border : 8px solid white;

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

  margin : 20px;

  transition-duration : 0.5s;

}



.photo-container > img:hover {

  transform : scale(1.05) rotate(2deg);

}



@media screen and (max-width: 980px) {



  #slideshowContainer {

    height : 300vh;

    width : 100vw;

    top : 0;

    left : 0;

    display : flex;

    flex-direction : column;

    align-items : center;

    justify-content : center;

    position : relative;

    padding : 0;

    margin : 0;

    transition-duration: 1s;

    background-image : url('images/background-images/roads.jpg');

    background-size : cover;

    background-position : center;

  }



  .slide {

    height : 100%;

    width : 100vw;

    position : relative;

    left : 0;

    padding : 0;

    margin : 0;

  }



 #slide4 {

    display : none;

    background-image : url('images/transportation.jpg');

    background-size : cover;

    background-position : center;

  }



  p {

    max-width : 70vw;

    font-size : 18px;

    margin : 20px;

  }



  .hamburger {

    color : white;

  }



  #navDiv {

    left : -120%;

    width : 100vw;

  }



  header {

    display : flex;

    align-items : center;

    justify-content : center;

    background-color : white;

  }



  header > #logo {

    top : 40%;

    left : 22%;

    position : absolute;

    width : 50%;

    height : auto;

  }





  h2, h3 {

    font-family : Raleway;

    font-size : 22px;

    margin : 10px;

    text-align : center;

    max-width : 80%;

    white-space : normal;

  }



  #card-container {

    display : flex;

    flex-direction : column;

    align-items : center;

    justify-content : space-around;

    scroll-behavior : smooth;

  }



  .card {

    height : 60vh;

    width : 90%;

  }



  #quote-div {

    height : auto;

    width : 77vw;

    background-color : white;

    flex-direction : column;

    align-items : center;

    justify-content : space-between;

    padding : 20px;

    position : relative;

  }



  #service-container {

    display : flex;

    flex-direction : column;

    align-items : flex-start;

    justify-content : flex-start;

    flex-wrap : nowrap;

    height : auto!important;

    width : 90%;

  }



  #submitted {

    left : 2%;

    top : 35%;

    width : 70vw;

  }



  .item-container {

    flex-direction : column!important;

    align-items : flex-start!important;

  }



.checkbox-subscribe > * > p {

    max-width : 80%;

    text-align : left;

  }

  /* Footer */



  footer {

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: space-around;

      padding-top : 30px;

      padding-bottom : 30px;

      width : 100%;

      position : relative;

      z-index : 10;

  }



  footer > * {

    width : 95%!important;

  }





  .footerIconTextContainer {

    width : 95vw!important;

  }



  .footerText {

    max-width : 90vw!important;

  }





  #footerContainer {

    flex-direction : column;

  }



  #footerIconContainer {

    flex-direction : column;

  }



  #footerCredit {

    text-align : center!important;

  }



  #footerNavDiv {

    width : 90vw;

    justify-content : space-between;

  }



  .footerLink {

    font-size : 14px;

  }





  hr {

    width : 90%;

  }



  #copyright {

    text-align : center;

  }



  /* End Footer */



  .button-container {

    width : auto;

    height : auto;

    display : flex;

    flex-direction : column;

    align-items : center;

    justify-content : space-between;

  }



  .lamp-section {

    background-image : url("images/background-images/lights.jpg");

    background-size : cover;

    background-position : right;

    background-repeat : no-repeat;

  }



  .IconTextContainer {

    display : flex;

    flex-direction : row;

    justify-content : flex-start;

    align-items: center;

    max-width : 100%;

  }



  .Text {

    font-size : 20px;

    max-width : 80vw;

  }



  .icon {

    width : 40px;

    height : 40px;

    margin : 0;

    margin-right : 10px;

  }



  .photo-container {

    display : flex;

    flex-direction : row;

    align-items : center;

    justify-content : space-around;

    flex-wrap : wrap;

    width : 90%;

  }



  .photo-container > img {

    width : 90%;

    height : auto;

    border : 8px solid white;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    margin : 20px;

    transition-duration : 0.5s;

  }



}