* {
  padding:0;
  margin:0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

html,body {
  overflow-x: hidden;
}


.landing-page {
  background-image: url(landingphoto1.webp);
  background-size: cover;
  background-attachment: fixed;
  height: 700px;
  display: flex;
  padding:0;
  margin:0;
}

.homepage-logo {
  position: relative;
  width: 400px;
  margin-left: 20%;
}

/* navbar */
.home {
  padding:0;
  padding-top: 10px;
  background-color: transparent;
}

.navbar {
  padding:0;
  padding-top: 10px;
  background-color: #C19944;
}

.navbar-brand {
  margin-left: 3%;
  font-size: 30px;
  font-family: 'DM Serif Display', serif;
}

.nav-link {
  color: #fff !important;
  font-size: 20px;
  margin-right: 100px;
}

.navbar-toggler {
  margin-right: 10%;
  margin-top: 10%;
  align-items: center;
  color: #fff;
}

.navbar-toggler-icon {
  width: 5rem;
  height: 5rem;
  padding: 0;
}


/* End of Navbar */

.landing-text-box {
  margin: auto;
  margin-top: 20%;
  margin-right: 15%;
  margin-left: 25%;
  padding-top: 2%;
  padding-bottom: 3%;
  background: rgba(1, 1, 1, 0.5);
  color: #fff;
}

/* Homepage */

.landing-title {
  padding-bottom: 30px;
  padding-left: 100px;
  padding-right: 100px;
  font-size: 50px;
}

.aboutus-home {
  margin-top: 5%;
}

.home-blurb {
  font-size: 50px;
  padding: 0 150px;
  line-height: 60px;
  margin-top: 6%;
}

.services-home {
  margin-top: 100px;
  background-image: url(images/grass-background.webp);
  height: 1000px;
  width: 100%;
  color: #fff;
}

.home-heading1 {
  padding-top: 3%;
}

.services-home-images-holder {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-top: 50px;
}

.services-home-images {
  width: 100%;
  margin-top: 8px;
  vertical-align: middle;
}

.services-home-image-text {
  font-size: 30px;
}

.column {
  -ms-flex: 25%;
  /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}


.home-projects {
  margin-top: 100px;
  margin-bottom: 100px;
  font-size: 50px;
}


.home-projects-description {
  margin-top: 20px;
  padding: 0 160px;
  line-height: 60px;
}



.copyright {
  color: #EAF6F6;
  margin-top: 10px;
  background-color: #696969;
  margin-bottom: 0;
}

/* End of Homepage */

/* About page */

.middle-about {
  padding-top: 150px;
}

.about-text-header {
  font-size: 3rem;
}

.about-first-text {
  margin-top: 20px;
  font-size: 1.3rem;
  text-align: center;
}

.about-second-text {
  margin-top: 120px;

  font-size: 1.3rem;
}

.about-first-image {

}

.about-second-image {
  width: 100%;
}

.second-about {
  margin-top: 100px;
}

.testimonials {
  margin: 3% 0;
}


/* Projects */

.projects-main-heading {
  padding: 0;
}

.middle-projects {
  margin-top: 170px;
}

.projects-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.projects-column {
  -ms-flex: 33%;
  /* IE10 */
  flex: 33%;
}

.project-images {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  height: 300px;
  border-radius: 20px;
}

/* Individual project pages */

.h1specific {
  margin-top: 5%;
}

.project-content {
  margin-top: 100px;
}
.individual-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.individual-row-two {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-top: 5%;
}

.col-individual {
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.col-image {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* End of individual project pages */

/*        test arrow
.arrow{
  position: relative;/*it important to set this to relative to be able to use :before in absolute*/
  /*
  width: 200px;
  height: 40px;
  background: #C19944;
  font-size: 30px;
}



 /*
.arrow:before{
  content: '';
  position:absolute;
  left: 100%;
  top: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #C19944;
}

*/

/*
.tallaght-heading {
  margin-top: 8%;
  margin-left: 7%;
  text-align: left;
}
*/

.edited-images {
  width: 800px;
}

.projects-name {
  font-size: 25px;
  color: #C19944;
  margin-bottom: 10%;
}

.individual-project-text {
  margin-top: 2%;
  font-size: 20px;
  letter-spacing: 1px;
  padding: 0 10%;
}



/*services */



.services {
  margin-top: 10%;
}

.services-image1 {
  width: 500px;

}

.all-services {
  margin-top: 50px;
}

.services-heading1 {
  padding-top: 20px;
  font-size: 70px;
}

.services-heading2 {
  font-size: 50px;
}

.paving {
  margin-top: 80px;
}

.left-image {
  width: 500px;
  float: left;
  margin-left: 5%;
}

.left-heading {
  font-size: 70px;
  color: #C19944;
  text-align: left;
  padding-left: 33%;
  margin-left: 8%;
}

.left-text {
  text-align: left;
  font-size: 30px;
  padding-left: 33%;
  padding-right: 10%;
  margin-left: 8%;
}


.right-image {
  width: 500px;
  float: right;
  margin-right: 5%;
}

.right-heading {
  font-size: 70px;
  color: #C19944;
  text-align: left;
  padding-left: 5%;
}

.right-text {
  text-align: left;
  font-size: 30px;
  padding-left: 5%;
  padding-right: 10%;
}

.decking {
  margin-top: 80px;
}

.pergolas {
  margin-top: 8%;
}

.turf {
  margin-top: 6%;
}

.hedge {
  margin-top: 8%;
}

.fencing {
  margin-top: 6%;
}

.garden {
  margin-top: 8%;
}

.commercial {
  margin-top: 6%;
}

/* Contact */
.contact {
  padding-top: 10%;
  background-image: url(contact-background.webp);
  background-size: cover;
  height: 800px;
  color: #fff;
}

.contact-text {
  font-size: 40px;
  padding: 0 25%;
}

.contact-info {
  margin-top: 2%;
  font-size: 40px;
}

.email {
  font-size: 40px;
}

/*footer */

.footer {
  background-color: #696969;
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
}

.footer-link:hover {
  color: black;
}

.footer-contact {
  background-color: #696969;
  padding-top: 20px;
  padding-bottom: 2%;
}

.footer-services {
  margin-top: 11%;
  background-color: #696969;
  padding-top: 20px;
}

.fa-facebook {
  color: #fff;
}

.fa-phone {
  color: #fff;
}

.fa-envelope {
  color: #fff;
}

/*buttons */
.myButton {
  box-shadow: inset 0 0 0 0 #fff;
  background: linear-gradient(to bottom, #fff 5%, #fff 100%);
  background-color: #fff;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-weight: bold;
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0 0 0 #fff;
}

.myButton:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

.myButton:active {
  position: relative;
}

.myButton-home {
  box-shadow: inset 0 0 0 0 #C19944;
  background: linear-gradient(to bottom, #C19944 5%, #C19944 100%);
  background-color: #C19944;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Arial;
  font-size: 20px;
  padding: 6px 24px;
  text-decoration: none;
  margin-top: 20px;
}

.myButton-home:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

.myButton-home:active {
  position: relative;
}

.myButton-homeTwo {
  box-shadow: inset 0 0 0 0 #C19944;
  background: linear-gradient(to bottom, #C19944 5%, #C19944 100%);
  background-color: #C19944;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Arial;
  font-size: 20px;
  padding: 6px 24px;
  text-decoration: none;
  margin-top: 40px;
}

.myButton-homeTwo:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

.myButton-homeTwo:active {
  position: relative;
}

.myButton-individual-services {
  box-shadow: inset 0 0 0 0 #C19944;
  background: linear-gradient(to bottom, #C19944 5%, #C19944 100%);
  background-color: #C19944;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Arial;
  font-size: 20px;
  padding: 6px 24px;
  text-decoration: none;
  margin-top: 40px;
}

.myButton-individual-services:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

.myButton-individual-services:active {
  position: relative;
}

.myButton-about {
  box-shadow: inset 0 0 0 0 #C19944;
  background: linear-gradient(to bottom, #C19944 5%, #C19944 100%);
  background-color: #C19944;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Arial;
  font-size: 20px;
  padding: 6px 24px;
  text-decoration: none;
  margin-left: 50px;
}

.myButton-about:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

.myButton-about:active {
  position: relative;
}

/* Mobile compatibility */

@media screen and (max-width: 1800px) and (min-width: 1515px) {
  .landing-title {
    padding:0 !important;
  }
}

@media screen and (max-width: 1400px) and (min-width: 990px) {
  .individual-project-text {
    margin-top: 0;
    font-size: 100%;
    letter-spacing: 1px;
    padding: 0;
  }
  h1{
    padding: 0
  }
}

@media screen and (max-width: 740px) {
  .navbar-toggler {
    margin-top: 5px;
    margin-left: 42%;
  }

  .services {
    margin-top: 30%;
  }

  .middle-projects {
    margin-top: 40%;
  }

  .about-text-header {
    margin-top: 20%;
  }

  .contact-text {
    margin-top: 20%;
  }

  .contact {
    height: 2400px !important;
  }



}

@media screen and (max-width: 700px) {
  .navbar-brand {
    font-size: 30px;
    padding: 0;
    margin-left: 1%;

  }


  .nav-link {
    text-align: center;
    margin:0;

  }

  .homepage-logo {
    position: absolute;
    margin-left: 30px;
  }

  .landing-text-box {
    margin-top: 60%;
    margin-right: 1%;
    margin-left: 1%;
  }


  .landing-page {
    height: 800px;
  }

  .home-blurb {
    padding: 0 1%;
    font-size: 30px;
  }

  .myButton-home {
    margin-bottom: 5%;
  }

  .aboutus-home-image {
    width: 450px;
  }

  .services-home {
    height: 3000px;
  }

  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }

  .home-heading1 {
    padding-top: 10%;
  }
  .home-projects-image {
    width: 450px;
  }
  .home-projects-description {
    font-size: 30px;
    padding: 0 1%;
    margin-bottom: 0;
  }
  .about-first-text {
    margin-top: 60px;
    margin-left: 2%;
    padding-right: 2%;
    font-size: 1.3rem;
    text-align: center;
  }
  .about-first-image {
    width: 450px;
    margin:0;
  }
  .about-second-image {
    width: 450px;
    margin: 0;
  }
  .about-second-text {
    margin-top: 10px;
    margin-right: 2%;
    padding-left: 2%;
    font-size: 1.3rem;
  }
  .myButton-about {
    margin:0;
  }
  .contact-header {
    margin-top: 90%;
  }

}

@media screen and (max-width: 1100px) and (min-width:900px) {
  .landing-text-box {
    margin-top: 30%;
    margin-right: 15%;
    margin-left: 35%;
    margin-bottom: 2%;
  }

  .landing-title {
    padding-left: 5%;
    padding-right: 5%;
    padding-top:0;
  }

  .homepage-logo {
    position:absolute;
    margin-top: 20px;
    margin-left: 20px;
  }

  .landing-page {
    height: 650px;
  }
}

@media screen and (max-width: 900px) and (min-width:700px) {
  .landing-text-box {
    margin-top: 50%;
    margin-right: 15%;
    margin-left: 35%;
    margin-bottom: 2%;
  }

  .landing-title {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0;
  }

  .homepage-logo {
    position:absolute;
    margin-top: 20px;
    margin-left: 20px;
  }

  .landing-page {
    height: 800px;
  }

}

@media screen and (max-width: 1700px) and (min-width:990px) {
  .home-blurb {
    margin-top: 0;
    font-size: 30px;
    padding: 0 4%;
  }

  .aboutus-home-image {
    width: 550px;
  }

}

@media screen and (max-width: 990px) {
  html,body {
    overflow-x: hidden;
  }
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 100%;
  }
  .services-home {
    height: 1650px;
  }
  .nav-link {
    text-align: center;
    font-size: 3rem;
    padding: 1rem 0;
    background-color: #C19944;
    margin: 0;
  }
  .navbar-toggler {
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .navbar-brand {
    font-size: 60px;
  }

  .home-blurb {
    font-size: 70px;

    line-height: 60px;
    margin-top: 6%;
  }

  .myButton {
    font-size: 40px;
  }

  .myButton-home {
    font-size: 40px;
    margin-bottom: 5%;
  }

  .aboutus-home-image {
    width: 100%;
  }

  .myButton-homeTwo {
    font-size: 40px;
    margin-top: 5%;
  }

}


@media screen and (max-width: 1600px) and (min-width:990px) {
  .home-projects-image {
    width: 500px;

  }
  .home-projects-description {
    font-size: 30px;
    padding: 0;
    margin-right: 10%;
  }
  .myButton-homeTwo {
    margin-right: 10%;
  }

}

@media screen and (max-width: 990px) and (min-width:700px) {
  .home-projects-image {
    width: 100%;

  }
  .home-projects-description {
    margin-top: 10%;
    font-size: 70px;
    padding: 0 10%;
  }
}


@media screen and (min-width: 990px) and (max-width: 1800px) {
  .about-first-text {
    margin-top: 0;
    margin-left: 10%;

    font-size: 1.3rem;
    text-align: center;
  }
  .about-first-image {
    width: 600px;
    margin:0;
  }
  .about-second-image {
    display: flex;
    width: 100%;
    margin: 0;
  }
  .about-second-text {
    margin-top: 10px;
    margin-right: 2%;
    padding-left: 2%;
    font-size: 1.3rem;
  }
  .myButton-about {
    margin:0;
  }
}

@media screen and (max-width: 990px) {
  .services-image1 {
    margin-top: 20%;
    margin-bottom: 10%;
    width: 100%;
  }
  .services-heading1 {
    font-size: 90px;
  }
  .services-heading2 {
    font-size: 70px;
  }
  .left-image {
    float: none;
    width: 100%;
    margin: 0;
  }
  .left-heading {
    float: none;
    text-align: center;
    margin:0;
    padding: 0;
    font-size: 90px;
  }
  .left-text {
    float: none;
    text-align: center;
    margin:0;
    padding: 0;
    font-size: 40px;
  }
  .right-image{
    float: none;
    width: 100%;
    margin: 0;
  }
  .right-heading {
    float: none;
    text-align: center;
    margin:0;
    padding: 0;
    font-size: 90px;
  }
  .right-text {
    float: none;
    text-align: center;
    margin:0;
    padding: 0;
    font-size: 40px;
  }
  .footer, .footer-services, .footer-contact {
    font-size: 30px;
  }
  .projects-column {
    -ms-flex: 100%;
    /* IE10 */
    flex: 100%;
    max-width: 100%;
  }
  .project-images {
    height: 400px;
  }
  .projects-name {
    font-size: 50px;
  }
  .projects-main-heading {
    padding-top: 10%;
    font-size: 60px;
  }

  .contact {
    padding-top: 30%;
    height: 1800px;
    font-size: 70px;
    padding-right:0;
    margin-right:0;
  }
  .contact-text {
    font-size: 90px;
    padding: 0 5%;
  }
  .contact-info {
    margin-top: 25%;
    font-size: 5rem;
  }
  .email {
    font-size: 3.5rem;
  }

  .second-about {display:flex; flex-flow: column; }
  .second-div {order:1}
  .first-div {order:2}

  .myButton-about {
    margin-bottom: 15%;
    margin-top: 7%;
    font-size: 50px;
    margin-left: 0;
  }

  .middle-about {
    margin-top: 10%;
  }

  .about-text-header {
    font-size: 90px;
    margin-bottom: 10%;
  }
  .about-first-text {
    font-size: 70px;
  }
  .about-first-image {
    width: 100%;
    padding:0;
  }
  .about-second-text {
    font-size: 70px;
  }
  .about-second-image {
    width: 100%;
    padding:0;
  }

}


@media screen and (max-width: 2000px) and (min-width: 990px) {
  .projects-column {
    -ms-flex: 33%;
    /* IE10 */
    flex: 33%;
    max-width: 33%;
  }
}


@media screen and (max-width: 990px) {
  .col-individual {
    flex: 100%;
    max-width: 100%;
    padding: 0 4px;
  }
  .project-content {
    margin-top: 300px;
  }

  .col-individual h1 {
    font-size: 70px;
  }

  .individual-project-text {
    margin-top: 10%;
    font-size: 50px;
    padding: 0;
  }
  h1{
    padding:0;
  }

  .col-indivual h1 {
    padding: 0;
  }

  .myButton-individual-services {
    margin-bottom: 5%;
    font-size: 40px;
  }
}

@media screen and (max-width: 700px) {
  h1 {
    margin-top: 4%;
  }
}



@media screen and (min-width: 1100px) and (max-width: 1515px) {
  .landing-text-box {
    margin-top: 15%;
    margin-left: 10%;
    margin-right: 10%;
  }
  .landing-title {
    padding: 0;
  }
}

@media screen and (min-width:1800px) {
  .landing-text-box {
    margin-top: 10%;
    margin-right: 15%;
    margin-left: 35%;
    margin-bottom: 5%;
  }

  .landing-title {
    padding: 5%;
  }

  @media screen and (max-width: 1100px) and (min-width:900px) {
    .landing-text-box {
      margin-top: 30%;
      margin-right: 15%;
      margin-left: 35%;
      margin-bottom: 35%;
    }