@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap');
body {
    background: #ffffff none repeat scroll 0 0;
    width: 100%;
    color: #666666;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
* {
    box-sizing: border-box;
}

h1 {
    color: #ffffff;
    font-size: 32px;
    text-align:center;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 15px;
}
h2 {
    color: #444444;
    line-height: 1.3;
    margin: 0 0 10px;
    font-size: 24px;
}
h3 {
    color: #23671f;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 10px;
    font-weight: 600;
}
h4 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 10px;
    font-weight: 500;
}
p {
    color: #666666;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin: 0 0 15px;
}
a {
    color: #23671f;
    text-decoration: none;
}
a:hover {
    cursor: pointer;
    text-decoration: underline;
}
a img:hover {
    opacity: 0.9;
}
ul,
ol {
    margin: 0 0 15px 20px;
    padding: 0;
}
ul li,
ol li {
    font-weight: 400;
    list-style: outside none disc;
    margin: 0 0 5px 0;
    padding: 0;
}
strong {
    font-weight: 500;
}
img {
    height: auto;
    max-width: 100%;
}
input {
    border: medium none;
}
input[type="text"],
input[type="email"],
textarea,
input[type="password"] {
    background: #efefef none repeat scroll 0 0;
    color: #555555;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 5px;
    max-width: 100%;
    padding: 15px 0;
    text-indent: 10px;
    border: 1px solid #efefef;
}
textarea {
    text-indent: 0;
    padding: 10px;
    font-family: "Montserrat", sans-serif;
}
label {
    display: block;
    color: #444;
    margin-bottom: 3px;
}
.button {
    display: block;
}
.button a,
button {
    background-color: #23671f;
    font-size: 16px;
    font-weight: 700;
    border-radius: 40px;
    color: #ffffff;
    padding: 17px 40px;
    transition: all 200ms linear 0s;
    text-transform: uppercase;
    line-height: 1;
    font-family: "Montserrat", sans-serif;
    border: none;
}
.button a:hover,
button:hover {
    cursor: pointer;
    background-color: #1a4b16;
    text-decoration: none;
    transform: scale(1.1);
}
code {
    font-family: inherit;
    font-size: inherit;
}

/** Regions and containers **/
.wrap {
    margin: 0 auto;
    width: 1100px;
    max-width: 100%;
    position: relative;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
}
ul.cols3 {
    margin: 0;
}
ul.cols3 li {
    display: inline-block;
    vertical-align: top;
    list-style: none;
    width: 180px;
    margin: 0 0 8px 0;
}
ul.cols3 li i {
    color: #23671f;
    margin-right: 5px;

}
ul.cols3 li:nth-of-type(3n) {
    margin-right: 0;
}
.mb0 {
    margin-bottom: 0;
}
.mb5 {
    margin-bottom: 5;
}
.mb10 {
    margin-bottom: 10;
}

/** Header **/
header {
    height: 190px;
    position: relative;
}
header .wrap {
    width: 1300px;
    max-width: 100%;
}
header .head-logo {
    position: absolute;
    top: 35px;
    left: 0;
}
header nav {
    position: absolute;
    right: 320px;
    top: 84px;
}
header nav ul {
    margin: 0;
    display: block;
}
header nav ul li {
    list-style: none;
    float: left;
    margin-left: 30px;
    font-size: 20px;  
}
header nav ul li a {
    color: #555555;
}

header .menu-items {
    position: absolute;
    top: 80px;
    right: 0;
    line-height: 1;
}

header .menu-items .socials {
    font-size: 34px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
header .menu-items .socials a {
    float: left;
    margin-right: 8px;
}
header .menu-items .socials a:hover {
    color: #1a4b16;
}
header .menu-phone {
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    color: #555555;
}
header .menu-phone i {
    border: 2px solid #555555;
    border-radius: 40px;
    height: 30px;
    width: 30px;
    line-height: 27px;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
header .menu-phone a {
    color: #555555;
    display: inline-block;
    vertical-align: middle;
}


/** Banner **/
#banner {
    background: #fff url("/images/bg-home.jpg") no-repeat scroll left bottom / cover;
    height: 540px;
    padding: 170px 0;
    text-align: center;
    margin-bottom: 60px;
}
#banner p {
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    width: 900px;
    max-width: 100%;
    font-size: 21px;
    margin: 0 auto 40px auto;
}
#banner .button {
    margin: 0 auto;
}
#banner .button a {
    font-size: 19px;
    padding: 17px 40px;
}

/** About **/
#about {
    margin-bottom: 140px;
}
#about .flex-container .left {
    width: 45%;
    margin-right: 5%;
}
#about .flex-container .right {
    width: 50%;
}
.tablet-show {
    display: none;
}

/** James **/

#james {
    background-color: #23671f;
    margin-bottom: 140px;
}
#james .wrap {
    width: 1050px;
    max-width: 100%;
}
#james .left {
    width: 22%;
    align-self: center;
    margin-right: 3%;
}
#james .left img {
    margin: -30px 0;
}
#james .right {
    width: 75%;
    align-self: center;
}
#james blockquote {
    text-align: center;
    position: relative;
    margin: 20px 0;
}
#james blockquote p {
    color: #ffffff;
    text-align: center;
    font-size: 22px;
    font-style: italic;
    position: relative;
    z-index: 9999;
    font-weight: 500;
    margin-bottom: 10px;
}
#james blockquote::before {
    content: '“';
    left: -40px;
    top: -20px;
    position: absolute;
    font-family: 'PT Serif', serif;
    color: #2d7629;
    font-size: 200px;
    line-height: 1;
    z-index: 999;
    font-style: italic;
}
#james blockquote cite {
    color: #fff;
    font-size: 19px;
    font-style: normal;
    text-align: center;
}

/** Services **/
#services {
    margin-bottom: 100px;
}
#services h2 {
    margin-bottom: 30px;
}
#services .service-cols3 {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 2%;
}
#services .service-cols3:nth-of-type(3n) {
    margin-right: 0;
}
#services .service-cols3 h3 {
    margin-top: 20px;
}
#services .service-cols3 p {
    font-size: 15px;
}
#services h4.center {
    text-align: center;
    margin: 10px 0 0 0;
}

/** Quote form **/
#quote {
    background-color: #23671f;
    padding: 80px 0;
    margin-bottom: 100px;
}
#quote h2 {
    color: #ffffff;
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
}
#quote h3 {
    color: #fff;
    text-align: center;
    font-size: 27px;
    font-weight: 500;
}
#quote h3 a {
    color: #fff;
    text-decoration: underline;
}
#quote #form-outer {
    background-color: #fff;
    width: 800px;
    max-width: 100%;
    padding: 40px;
    margin: 30px auto 0 auto;
}
#quote form .cols2 {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 10px;
    float: left;
}
#quote form .cols1 {
    width: 100%;
}
#quote form .cols2:nth-of-type(2n) {
    margin-right: 0;
}
#quote form input {
    width: 100%;
}
#quote form textarea {
    width: 100%;
    margin-bottom: 20px;
}

#points {
    margin-bottom: 100px;
}
#points ul.tick li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 50px;
    color: #4a4949;
    font-size: 18px;
    font-weight: 500;
    width: 31%;
    margin-right: 2%;
    display: inline-block;
    vertical-align: top;
}
#points ul.tick li:nth-of-type(3n) {
    margin-right: 0;
}
#points ul.tick li::before {
    color: #23671f;
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 40px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
}

/** Footer **/
#footer {
    background-color: #186311;
}
#footer .footer-grass img {
    width: 100%;
    height: auto;
}
#footer .flex-container {
    align-content: center;
    justify-content: center;
    padding: 50px 0;
}
#footer .left {
    margin-right: 50px;
    align-self: center;
}
#footer .right {
    align-self: center;
}
#footer  .footer-phone {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
}
#footer .footer-abn {
    color: #fff;
    pointer-events: none;
}
#footer  .footer-phone a {
    color: #fff;
}
#copyright p {
    text-align: center;
    margin: 30px 0;
}

/******************************/
/********* RESPONSIVE *********/

/* All phone sizes */
 @media (max-width: 767px) {
     body {
         font-size: 15px;
    }
     h1 {
         font-size: 25px;
    }
     h2 {
         font-size: 19px;
         margin-bottom: 10px;
    }
     h3 {
         font-size: 17px;
         margin-bottom: 10px;
    }
     h4 {
         font-size: 15px;
         margin-bottom: 10px;
    }
     p {
         font-size: 15px;
         margin-bottom: 10px;
    }
     ul, ol {
         font-size: 15px;
         margin: 0 0 10px 0;
    }
     ul li,
     ol li {
         margin-bottom: 5px;
    }
     .button a,
     button {
         font-size: 13px;
    }
    .wrap,
     #banner .wrap {
        width: 80%;
    }
    .flex-container {
        display: block;
    }
    .flex-container .left,
     #about .flex-container .left {
        width: 100%;
         margin: 0 0 20px 0;
    }
    .flex-container .right,
     #about .flex-container .right {
        width: 100%;
        margin: 0;
    }
     header {
         height: auto;
         padding: 20px 0;
     }
     header .head-logo {
         position: relative;
         width: 100%;
         text-align: center;
         margin-bottom: 5px;
         top: unset;
         left: unset;
     }
     header .head-logo img {
         width: 250px;
     }
     header nav {
         position: relative;
         width: 100%;
         text-align: center;
         top: unset;
         right: unset;
         display: block;
     }
     header nav ul {
         text-align: center;
         margin: 0 auto;
     }
     header nav ul li {
         font-size: 16px;
         float: none;
         display: inline;
         margin: 0 10px;
     }
     header .menu-items {
         position: relative;
         left: unset;
         top: unset;
         text-align: center;
         margin: 13px 0 0 0;
     }
     header .menu-items .socials {
         font-size: 25px;
     }
     header .menu-items .menu-phone {
         font-size: 18px;
     }
     header .menu-items .menu-phone i {
         font-size: 12px;
         height: 25px;
         width: 25px;
         line-height: 20px;
     }
     #banner {
         height: auto;
         padding: 80px 0 60px 0;
         margin-bottom: 40px;
     }
     #banner p {
         font-size: 15px;
     }
     #banner .button a {
         font-size: 14px;
     }
     #about {
         margin-bottom: 80px;
     }
     #about .flex-container .left img {
         width: 100%;
     }
     #james {
         margin-bottom: 60px;
         padding-bottom: 30px;
     }
     #james .left {
        width: 200px;
        margin: 0 auto 40px auto;
        display: block;
    }
    #james .left img {
        margin-top: -20px;
    }
    #james .wrap {
        width: 80%;
    }
    #james .right {
        width: 100%;
    }
    #james blockquote p {
        font-size: 18px;
    }
    #james blockquote cite {
        font-size: 16px;
    }
    #james blockquote {
        margin: 0;
    }
     
     #services {
         margin-bottom: 40px;
     }
     #services h2 {
         margin-bottom: 20px;
     }
     #services .service-cols3 {
         width: 100%;
         margin: 0 0 30px 0;
     }
     #services .service-cols3 h3 {
         margin-top: 10px;
     }
     #services h4.center {
         text-align: left;
         margin: 0;
     }
     
     #quote {
         margin-bottom: 60px;
         padding: 50px 0;
     }
     #quote h2 {
         font-size: 22px;
     }
     #quote h3 {
         font-size: 20px;
     }
     #quote form .cols2 {
         width: 100%;
         margin: 0 0 10px 0;
     }
     
     #points {
         margin-bottom: 40px;
     }
     #points ul.tick li {
         width: 100%;
         font-size: 15px;
         vertical-align: middle;
         margin: 0 0 25px 0;
         padding-left: 40px;
     }
     #points ul.tick li::before {
    top: -8px;
    left: 0;
    font-size: 30px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
}
     #footer {
         text-align: center;
     }
     #footer .flex-container {
         padding: 40px 0;
     }
     #footer .left {
         margin: 0;
     }
     #footer .right {
         margin: 0;
     }
     
}


/** Just small phones **/
 @media (min-width: 1px) and (max-width: 479px) {
     ul.cols3 li {
         width: 100%;
     }
}

/* Just large phones */
 @media (min-width: 480px) and (max-width: 767px) {
     ul.cols3 li {
         width: 160px;
         margin-right: 0 !important;
     }
}


/** All small to medium tablet size **/
 @media (min-width: 768px) and (max-width: 999px) {
     body {
         font-size: 15px;
    }
     h1 {
         font-size: 25px;
    }
     h2 {
         font-size: 20px;
         margin-bottom: 10px;
    }
     h3 {
         font-size: 17px;
         margin-bottom: 10px;
    }
     h4 {
         font-size: 15px;
         margin-bottom: 10px;
    }
     p {
         font-size: 15px;
         margin-bottom: 10px;
    }
     ul,
     ol {
         font-size: 15px;
         margin: 0 0 10px 0;
    }
     ul li,
     ol li {
         margin-bottom: 5px;
    }
     .button a, .form-submit {
         font-size: 13px;
    }
    .wrap {
         width: 80%;
     }
     header {
  height: 110px;
}
header .head-logo {
  width: 250px;
  top: 18px;
  left: 10px;
}
header .menu-items {
  top: 45px;
  right: 10px;
}
header .menu-phone {
  font-size: 18px;
}
header .menu-phone i {
  width: 25px;
  height: 25px;
  line-height: 23px;
  font-size: 14px;
}
header .menu-items .socials {
  font-size: 24px;
  margin-right: 0;
}
header nav ul li {
  font-size: 16px;
  margin-left: 13px;
}
header nav {
  right: 240px;
  top: 47px;
}
#banner {
  height: auto;
  padding: 130px 0 90px 0;
}
#banner p {
  font-size: 17px;
}
#banner .button a {
  font-size: 14px;
}
     #about {
         margin-bottom: 60px;
     }
   #james {
         margin-bottom: 60px;
     }
    #james .wrap {
        width: 90%;
    }
     #services {
         margin-bottom: 80px;
     }
     #services .service-cols3 {
         width: 48%;
         margin-right: 4%;
     }
     #services .service-cols3:nth-of-type(2n) {
         margin-right: 0!important;
     }
     #services .service-cols3:nth-of-type(3n) {
         margin-right: 4%;
     }
     #quote {
         margin-bottom: 60px;
     }
     #quote h2 {
         font-size: 27px;
     }
     #quote h3 {
         font-size: 24px;
     }
     #points {
         margin-bottom: 60px;
     }
     #points ul.tick li {
         width: 48%;
         font-size: 16px;
         margin-right: 3%;
     }
     #points ul.tick li:nth-of-type(2n) {
         margin-right: 0!important;
     }
     #points ul.tick li:nth-of-type(3n) {
         margin-right: 3%;
     }
     .tablet-show {
    display: block;
    }
    .tablet-hide {
        display: none;
    }
    #about .flex-container {
        display: block;
    }
    #about .flex-container .left {
        width: 100%;
        margin: 0 0 30px 0;
    }
    #about .flex-container .right {
        width: 100%;
        margin: 0;
    }

}
/* Just small Tablet size */
 @media (min-width: 768px) and (max-width: 849px) {
     
         #james .left {
         width: 18%;
         margin-right: 2%;
     }
    #james .left img {
        margin-top: -30px;
    }
     #james .right {
         width: 80%;
     }
     #james blockquote {
         margin: 15px 0;
     }
     #james blockquote::before {
         font-size: 150px;
         left: -20px;
         top: -10px;
     }
    #james blockquote p {
        font-size: 16px;
        margin-bottom: 5px;
    }
    #james blockquote cite {
        font-size: 16px;
    }

}
/** Just medium tablet Size **/
 @media (min-width: 850px) and (max-width: 999px) {
     


     #james .flex-container {
         justify-content: center;
     }
     #james blockquote {
         margin: 25px 0;
     }
     #james blockquote::before {
         font-size: 150px;
         left: -30px;
         top: -15px;
     }
    #james blockquote p {
        font-size: 17px;
    }
    #james blockquote cite {
        font-size: 16px;
    }
     #james .left {
    width: 160px;
    margin-right: 20px;
}
#james .left img {
    margin: -30px 0;
}
#james .right {
    width: 560px;
}
}


/** All large and extra large tablet Size **/
 @media (min-width: 1000px) and (max-width: 1180px) {
     h1 {
         font-size: 26px;
     }
     .wrap {
         width: 80%;
     }
     header {
  height: 140px;
}
header .head-logo {
  width: 300px;
  top: 26px;
  left: 10px;
}
header .menu-items {
  top: 58px;
  right: 10px;
}
header .menu-phone {
  font-size: 20px;
}
header .menu-phone i {
  width: 30px;
  height: 30px;
  line-height: 26px;
  font-size: 15px;
}
header .menu-items .socials {
  font-size: 32px;
}
header nav ul li {
  font-size: 18px;
  margin-left: 18px;
}
header nav {
  right: 280px;
  top: 60px;
}
#banner {
  height: auto;
  padding: 170px 0 130px 0;
}
#banner p {
  font-size: 19px;
}
#banner .button a {
  font-size: 15px;
}
     #about {
         margin-bottom: 60px;
     }
     #james {
         margin-bottom: 100px;
     }
#james .wrap {
  max-width: 90%;
}
#james blockquote p {
  font-size: 19px;
}
     #points ul.tick li {
         font-size: 16px;
         padding-left: 47px;
     }
     #points ul.tick li::before {
         font-size: 35px;
     }
     
}

/** Laptops small **/
 @media (min-width: 1181px) and (max-width: 1300px) {
     
     
header .head-logo {
  left: 10px;
  width: 300px;
}
header {
  height: 160px;
}
header .menu-items {
  right: 10px;
  top: 67px;
}
header nav {
  top: 72px;
}
.wrap {
  max-width: 90%;
}
#james .wrap {
  width: 90%;
}
#james blockquote p {
  font-size: 19px;
}
#banner p {
  font-size: 18px;
}
h1 {
  font-size: 28px;
}
#banner .button a {
  font-size: 17px;
}
header nav ul li {
  font-size: 18px;
}
header .menu-phone {
  font-size: 20px;
}
header .menu-items .socials {
  font-size: 30px;
}
#banner {
  height: 470px;
}

}
/** Laptops large **/
 @media (min-width: 1301px) and (max-width: 1480px) {

}
/** Header under 1920px**/
 @media (min-width: 1481px) and (max-width: 1919px) {

}