:root {
    --col-primary: #386643;
    --col-primary-light: #8ddd6e;
    --col-primary-dark: #33582f;

    --col-secondary: #4b3200;
    --col-secondary-light: #bd915d;
    --col-secondary-light-shadow: #3d3115;

    --col-footer-highlight: #fff25c;
    --col-boxcontainer: #c4ce7a;
    --col-white: #fff;
    --col-grey: #333;

    --border-radius: 5px;
}

/* boxcontainer */
div.boxcontainer{background-color:var(--col-boxcontainer); padding:10px; border-radius: var(--border-radius);}
div.boxcontainer h2{font-weight:normal}
div.boxcontainer h4{font-weight:bold}
div.boxcontainer ul{font-style:italic; color:var(--col-grey); list-style:none; font-size:17px; margin:0}
div.boxcontainer ul li{padding:0 0 30px 70px; background:url('../img/tick.png') no-repeat 0 3px}

/* headings */
h2, h4{color: var(--col-secondary)}
h4{font-weight:bold} 
h1{color:var(--col-secondary)}

/* header */
div.header h2, div.header h3{color:var(--col-white); font-weight:normal}
div.header div.txtrt h2{margin-bottom:0; font-size:39px} 
div.header div.txtrt h3{margin-top:0; line-height:normal; font-size: 20px;} 
div.header h1{ font-size: 20px; line-height: 1; padding-right: 50px}
div.header h1 span{font-weight:normal; text-shadow:none;} 

@media screen and (min-width: 768px) {
  div.header{position:relative; height:130px} 
  div.header h1{font-size: 20px; line-height: 40px; padding-right: 0;}
  div.header h1 span {font-size: 18px; display: inline-block;}
  div.header div.navbar{position:absolute; top:50px; left:0}
  div.header div.txtrt h3{font-size: 24px;}
}

@media screen and (min-width: 980px) {
  div.header h1{font-size: 30px;}
}

/* txtrt */
.txtrt span{font-size:20px; font-weight:normal} 
.txtrt p{font-size:20px}

@media screen and (min-width: 768px) {
  .txtrt{text-align:right; position:relative} 
  .header .txtrt {margin-top: 10px;}
  .txtrt .btn-mini{position:absolute; bottom:-19px; right:0; width:170px} 
}

/* footer */
div.footercontainer{
  background-color:var(--col-primary); 
  margin-left: -20px; 
  margin-right: -20px;
  margin-top:40px; 
  padding-bottom:50px; 
  padding-left: 20px; 
  padding-right: 20px; 
  position: relative;
}

@media screen and (min-width: 768px) {
  div.footercontainer {
    margin-inline: 0;
  }
}

footer .txtrt p{color: var(--col-footer-highlight); line-height: 1.5;}
footer h2{font-size:30px; margin-top: 40px; line-height: 1; margin-bottom: 20px} 
footer .txtrt h3{font-size:24px; margin:0} 
footer h2 span{font-size:65px}
footer .btn{margin-block:20px}
div.footcredits { margin: 0; position: absolute; bottom: 10px;}
div.footcredits, div.footcredits a{color:var(--col-primary-light); font-size:10px; margin-top:75px} 

@media screen and (min-width: 768px) {
  div.footcredits {position: static; margin-top: 20px;}
}

/* hero */
.hero { display: flex; gap: 10px; margin-block: 16px }
.hero h2, .hero p{color:var(--col-primary-dark)}
.hero{position:relative} 
.hero h2{font-size:32px; line-height: 1; margin-top: 0;} 
body .hero p{font-size:23px; line-height:normal} 
.hero p span{font-weight:bold; font-size:21px} 
.hero-img {height: 90px; width: 90px}
.hero .subtxt{font-size:16px; color:var(--col-white)} 
.hero .arrow{position:absolute; right:-40px; bottom:-17px; z-index:2}

@media screen and (min-width: 768px) {
  .hero-img {height: 150px; width: 150px}
}

@media screen and (min-width: 980px) {
  .hero{height:270px} 
  .hero div{position:absolute; right:0; width:200px; top:20px} 
  .hero-img {height: 250px; width: 250px}
  .hero p span{font-size:22px} 
  .hero .arrow{bottom:25px}
}

/* fonts */
div.header h1, footer h2 span{font-family: 'CantarellBold';} 
div.header .txtrt, footer .txtrt, .hero div, h1, h2, h4, .btn{font-family: 'CantarellRegular'; font-weight:normal} 
.handwritten, footer .txtrt p {font-family: 'ArchitectsDaughterRegular'} 

.navbar .nav > li > a:first-child{padding-left:0}

@media screen and (max-width: 767px) {
  .navbar .nav { float: none; margin: 10px 0 0 0; text-align: center; background-color: var(--col-boxcontainer); border-radius: var(--border-radius); }
  .navbar .nav > li { float: none }
  .navbar .nav > li > a, .navbar .nav > li > a:first-child { padding: 8px 10px; font-size: 18px; }
}

.navbar-toggle {
  background-color: var(--col-secondary-light);
  border: 0;
  border-radius: var(--border-radius);
  font-size: 12px;
  line-height: 1.2;
  padding: 5px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 45px; 
}

article p, footer h2, footer h3{color:var(--col-white)}
.testimonial h2{font-size:22px} 
.carousel {max-width: 460px; margin: 0 auto}
div.testimonials article{margin-bottom:60px; max-width: 750px} 
div.testimonials article p{color:var(--col-grey)} 
.reasons { margin-bottom: 20px; }
.contactform input, .contactform select, .contactform textarea { width: 100%; box-sizing: border-box; }
.contactform input, .contactform select { height: 30px }
.triton {border: 1px solid var(--col-primary); box-shadow:1px 1px 2px 1px var(--col-secondary-light-shadow);}
div.gallery img{border: 1px solid var(--col-primary); box-shadow:1px 1px 2px 1px var(--col-secondary-light-shadow); display: block; width: 100%;} 
.gallery-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));}
.carousel-inner { border-color: var(--col-primary); box-shadow:1px 1px 2px 1px var(--col-secondary-light-shadow)}

/* featbullets */
ul.featbullets{font-size:20px; margin:20px 25px} 
ul.featbullets li{line-height:normal}

/* get rid of fb count */
.fb-like{width:97px; overflow:hidden; display:block}
.icon-fb{background:url('../img/fb.jpg') no-repeat} 

/* jobdone (tick) */
div.jobdone{background-image:url('../img/tick.png'); background-repeat:no-repeat; background-position:265px 15px}  
div.jobdone h1{color:var(--col-primary); font-size:60px; font-weight:bold; padding-left:20px} 
div.jobdone span{font-style:italic; font-size:40px; font-weight:normal; padding-left:120px}

@media screen and (max-width: 979px) {
  div.jobdone{background-position:215px 15px}  
  div.jobdone h1 {font-size: 46px}
  div.jobdone span {padding-left: 0; font-size: 38px}
}