/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Anchor text decoration */
a{
  text-decoration: none;
}


/* Set core body defaults */
body {
  max-width: 1920px;
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/*When larger than 1920 center body*/
@media only screen and (min-width: 1920px){
  body{
    margin: 0 auto;
  }
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}


@font-face {
    font-family: 'garamond condensed';
    src: url(/Assets/Fonts/Garamond\ Condensed\ Light\ Regular.ttf) format(truetype);
}

/*GLOBAL*/

/* Hide class to use via js */
.hide-item{
  display: none;
}

/* show class to use via js */
.show-item{
  display: block;
}

/*BUTTONS*/

/* global styling for buttons*/
.button-global{
  height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 24px; font-size: 1rem; font-weight: 400;
  font-family: 'inter', Arial, Helvetica, sans-serif;
}

.bt-one {
  width: 130px; border: 2px solid #2D5F16;
  color: #2D5F16; background-color: transparent;
}

.bt-two {
  width: 185px; border: none; padding-left: 5px;
  color: #ffffff; font-weight: 300; background-color: #2B5219;
}

.bt-two img {
  width: 1.6rem; margin-left: .7rem;
}

@media only screen and (max-width: 450px){
  .bt-two{
    font-size: .85rem; width: 155px; height: 40px;
  }
  .bt-two img {
    width: 1.3rem; margin-left: .5rem;
  }
}

.bt-three {
  width: 220px; border: none;
  padding-left: 5px;
  color: #243919;
  font-weight: 300;
  background-color: #F5F8D9;
}

.bt-three img {
  width: 1.6rem;
  margin-left: .7rem;
}


@media only screen and (max-width:450px){
  .bt-three{
    font-size: .85rem;
    width: 185px;
    height: 40px;
  }

  .bt-three img {
  width: 1.3rem;
  margin-left: .5rem;
  }
}

.bt-four{
  font-size: .85rem;
  width: 110px;
  height: 40px;
  border: none;
  padding-left: 5px;
  color: #243919;
  font-weight: 300;
  background-color: #F5F8D9;
  display: none;
}

.bt-four img {
  width: 1.3rem;
  margin-left: .5rem;
}

@media only screen and (max-width: 850px){
  .bt-three{
    display: none;
  }
  .bt-four{
    display: flex;
  }
}

.bt-five {
  width: 150px; border: none;
  padding-left: 5px;
  color: #243919;
  font-weight: 300;
  background-color: #F5F8D9;
}

.bt-five img {
  width: 1.6rem;
  margin-left: .7rem;
}

@media only screen and (max-width:850px){
  .bt-five{
    width: 125px;
    height: 40px;
    font-size: .85rem;
  }
  .bt-five img {
    width: 1.3rem;
    margin-left: .5rem;
  }
}

.bt-six {
  width: 158px; border: none;
  padding-left: 5px;
  color: #243919;
  font-weight: 300;
  background-color: #F5F8D9;
}

.bt-six img {
  width: 1.6rem;
  margin-left: .7rem;
}

@media only screen and (max-width:850px){
  .bt-six{
    width: 130px;
    height: 40px;
    font-size: .85rem;
  }
  .bt-six img {
    width: 1.3rem;
    margin-left: .5rem;
  }

}

.bt-seven {
  width: 185px; border: none;
  padding-left: 5px;
  color: #243919;
  font-weight: 300;
  background-color: #F5F8D9;
}

.bt-seven img {
  width: 1.6rem;
  margin-left: .7rem;
}

@media only screen and (max-width:450px){
  .bt-seven{
    font-size: .85rem;
    width: 158px;
    height: 40px;
  }

  .bt-seven img {
  width: 1.3rem;
  margin-left: .5rem;
  }
}

.bt-eight {
  width: 180px; border: none;
  padding-left: 5px;
  color: #ffffff;
  font-weight: 300;
  background-color: #2B5219;
}

.bt-eight img {
  width: 1.6rem;
  margin-left: .7rem;
}

@media only screen and (max-width: 450px){
  .bt-eight{
    font-size: .85rem;
    width: 155px;
    height: 40px;
  }

  .bt-eight img {
    width: 1.3rem;
    margin-left: .5rem;
  }
}
.bt-one:hover{
  background-color: #f1f1f1;
}

.bt-one:active{
  background-color: #2D5F16;
  color: #ffffff;
  border: none;
}

.bt-two:hover,
.bt-eight:hover{
  background-color: #224014;
}

.bt-two:active,
.bt-eight:active{
  background-color: #000000;
}

.bt-three:hover,
.bt-four:hover,
.bt-five:hover,
.bt-six:hover,
.bt-seven:hover{
  background-color: #edf0d2;
}

.bt-three:active,
.bt-four:active,
.bt-five:active,
.bt-six:active,
.bt-seven:active{
  background-color: #bfc2a9;
}

#navbar{
  width: 100%; height: 80px; z-index: 1000;
  background-color: #ffffff;
}

@media only screen and (max-width: 700px){
  #navbar{
    height: 64px;
  }
}

@media only screen and (max-width: 400px){
  #navbar{
    height: 56px;
  }
}

#navbar .nav-container{
  width: 97%; height: 100%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}

.nav-container img{
  height: 50px;
}


@media only screen and (max-width: 700px){
  .nav-container img{
    height: 45px;
  }
}

@media only screen and (max-width: 400px){
  .nav-container img{
    height: 40px;
  }
}

.nav-container ol{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  list-style-type: none;
  display: flex; flex-direction: row; flex-grow: 0;
  gap: 4rem;
}
@media only screen and (max-width: 1040px){
  .nav-container ol{
    gap: 2.5rem;
  }
}

@media only screen and (max-width: 850px){
  .nav-container ol, .nav-container a{
    display: none;
  }
}

.nav-container ol li{
    display: inline-flex; align-items: center;
    /*position: relative;*/
    padding-bottom: 2px;
    font-weight:400; font-size: 1rem;
}

.nav-container li a.home-item{
  color:#64B928;
}

.nav-container li a:hover{
  color: #64B928;
}

/* for mobile */
.nav-container .hamburger{
  width: 50px; height: 50px;
}

.nav-container .hamburger-close-button{
  width: 40px; height: 29px;
  margin: 0 5px; /* centering closing icon with hamburger icon */
}

@media only screen and (max-width: 700px){
  .nav-container .hamburger{
    height: 46px;
  }
  .nav-container .hamburger-close-button{
    height: 25px;
  }
}

@media only screen and (max-width: 400px){
  .nav-container .hamburger{
    height: 36px;
  }
  .nav-container .hamburger-close-button{
    height: 20px;
  }
}

nav#drawer-nav{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  width: 100vw; height: 100vh; min-height: 90vw;
  padding: 5rem;
  z-index: 20;
  position: fixed; top:80px; left: 0;
  background-color: #FFFFFF;
  transform: translateX(100%);
  overflow: hidden;
}


@media only screen and (min-width: 850px){
  nav#drawer-nav{
    display: none;
  }
}

@media only screen and (max-width: 700px){
  nav#drawer-nav{
    top: 64px;
  }
}

@media only screen and (max-width: 500px){
  nav#drawer-nav{
    top: 56px;
    padding: 4rem 4rem;
  }
}

@media only screen and (max-width: 400px){
  nav#drawer-nav{
    padding: 4rem 2rem;
  }
}

#drawer-nav ol{
  list-style: none; max-width: 700px; margin: 0 auto;
}

#drawer-nav ol li{
  font-size: 1.25rem; padding: 2rem 0px;
  border-bottom: 1px solid #D3D3D3;
}
@media only screen and (max-width: 500px){
  #drawer-nav ol li{
    font-size: 1rem; padding: 1.5rem 0;
  }
}

#drawer-nav ol li:hover{
  text-decoration: underline;
}

#drawer-nav.open-drawer{
  transform: translateX(0%);
  transition-duration: .2s; /* transformation time */
}

main{
  margin-top: 25px;
}

@media only screen and (max-width: 700px){
  main{
    margin-top: 15px;
  }
}

@media only screen and (max-width: 400px){
  main{
    margin-top: 5px;
  }
}

section .welcome-panel{
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 1.5%;
  display: grid;
  grid-template-columns: minmax(0, 55vw) minmax(0, 800px);
  grid-auto-rows: auto;
  column-gap: clamp(2rem, 2.5vw, 3rem);
  row-gap: 2rem;
  align-items: center;
}

@media only screen and (max-width:1040px){
  section .welcome-panel{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    max-width: 700px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 450px) {
  section .welcome-panel {
    padding: 0;
  }
}

/*TEXT*/
p{
  line-height: 2em;
  font-family: 'inter', Arial, Helvetica, sans-serif;
}

h1{
  font-family: 'garamond condensed';
  letter-spacing: -0.055em;
  line-height: normal;
  font-weight: 100;
  display: inline-block;
  font-size: clamp(2rem, 5.3vw, 90px);
  width: clamp(300px, 49vw, 856px);
  grid-column: 1/ 2;
  grid-row: 2/ 3;
}

h1 span{
  color: #9AD32F;
}

@media only screen and (max-width: 1040px){
  h1{
    font-size: clamp(68px, 7.25vw, 75px);
    width: clamp(605px, 64.5vw, 670px)
  }
}

@media only screen and (max-width: 630px){
  h1{
     font-size: clamp(1.9rem, 10.8vw, 68px);
     width: clamp(305px, 96.5vw, 605px);
  }
}

@media only screen and (max-width:600px){
  h1{
    grid-row: 1/2;
  }
}

@media only screen and (max-width:450px){
  section .welcome-panel{
    padding: 0;
  }

  h1{
    padding: 0 0 0 1.5%;
  }

  .welcome-panel a {
    padding: 0 0 0 1.5%;
  }
}

h2{
  font-family: 'garamond condensed';
  font-size: clamp(48px, 4.15vw, 3.75rem);
  font-weight: 100;
  letter-spacing: -0.055em;
  display: inline-block;
}

@media only screen and (max-width:1040px){
  h2{
    font-size: clamp(40px, 4.62vw, 48px);
  }
}

@media only screen and (max-width:700px){
  h2{
    max-width: 460px;
  }
}


@media only screen and (max-width:600px){
  h2{
    max-width: unset;
    font-size: clamp(1.9rem, 6.7vw, 40px);
  }
}

.info-bar{
  width: 385px;
  height: 37px;
  background-color: #F5F8D9;
  border-radius: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1/ 2;
  grid-row: 1/ 2;
  align-self: start;
}

@media only screen and (max-width: 600px){
  .info-bar{
    display: none;
  }
}

.info-bar p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  color: #2B5219;
  font-size: .75rem;
}

p.h1-sub-heading{
  grid-column: 1/ 2;
  grid-row: 3 / 4;
}

@media only screen and (max-width: 600px){
  p.h1-sub-heading{
    grid-row: 2 / 3;
  }
}

@media only screen and (max-width:500px){
  p.h1-sub-heading{
    font-size: clamp(12px, 2.9vw, 14px);
  }
}

@media only screen and (max-width: 450px) {
  p.h1-sub-heading {
    padding: 0 0 0 1.5%;
  }
}

.fact-container{
  background-color: #F5F8D9;
  height: clamp(125px, 18.5vw, 280px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  grid-row: 5/ 6; grid-column: 1 / 2; align-self: end;
}

@media only screen and (max-width:1040px){
  .fact-container{
    grid-row: 5 / 6;
    height: clamp(187.65px, 20.85vw, 217px);
  }
}

@media only screen and (max-width:600px){
  .fact-container {
    grid-row: 4 / 5;
    height: clamp(125px, 31.2vw, 187.65px);
  }
}

.fact{
  width: clamp(120px, 9.6vw, 200px);
  margin: 2rem;
}

@media only screen and (max-width: 1040px){
  .fact{
    width: clamp(118.8px, 13.2vw, 137.2px);
    margin: 1rem;
  }
}

/*
@media only screen and (max-width: 722px){
  .fact{
    width: clamp(80px, 13.2vw, 137.2px);
    margin: 1rem;
  }
}*/

@media only screen and (max-width: 600px){
  .fact{
    margin: .7rem;
    width: clamp(80px, 19.8vw, 118.8px);
  }
}

.fact img{
  width: 90%;
}

.fact p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  color: #2B5219;
  font-size: clamp(9px, 0.7vw, 14px);
  line-height: normal;
}

@media only screen and (max-width: 1040px){
  .fact p{
    font-size: clamp(8.78px, .975vw, 10.1px);
  }
}

@media only screen and (max-width: 600px){
  .fact p{
    font-size: clamp(8px, 1.45vw, 8.78px);
  }
}

/*Holds button .bt-two*/
.welcome-panel a {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

@media only screen and (max-width:1040px){
  .welcome-panel a {
  grid-row: 4 / 5;
  }
}

@media only screen and (max-width:600px){
  .welcome-panel a {
  grid-row: 3 / 4;
  }
}

.banner-img{
  grid-column: 2/3;
  grid-row: 1/6;
  height: 100%;
  width: 100%;
  justify-self: center;
  object-fit: cover;
  object-position: left;
}

@media only screen and (max-width:1040px){
  .banner-img{
    grid-row: 6 / 7;
    grid-column: 1 / 2;
    max-height: 400px;
    object-position: left 0 top 30%;
  }
}

@media only screen and (max-width:600px){
  .banner-img{
  grid-row: 5 / 6;
  }
}

section.care-section{
  margin: 14rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (max-width: 1700px){
  section.care-section{
    margin-top: clamp(9rem, 13.2vw, 14rem);
  }
}

@media only screen and (max-width: 600px){
  section.care-section{
    margin: 6rem auto;
  }
}

.care-section .icon-holder{
  margin-top: 2rem;
  max-width: 1100px;
  display: flex;
  justify-content: space-evenly;
  gap: clamp( 1rem, 7.5vw, 9rem);
  align-items: center;
}

@media only screen and (max-width:1040px){
  .care-section h2{
    width: clamp(476.09px, 52.9vw ,550px);
    text-align: center;
  }
}

@media only screen and (max-width:600px){
  .care-section h2{
    width: clamp(315px, 79.19vw, 476.09px);
    text-align: center;
  }
}

.icon-holder img{
  width: clamp(40px, 4.2vw ,80px);
  height: clamp(35px, 3.65vw, 70px);
  object-fit: contain;
}

@media only screen and (max-width:1040px){
  .icon-holder img{
    width: clamp(40px, 4.5vw ,46px);
    height: clamp(35px, 3.85vw, 40.25px);
  }
}

@media only screen and (max-width:600px){
  .icon-holder img{
    width: clamp(30px, 6.7vw ,40px);
    height: clamp(26.25px, 5.85vw, 35px);
  }
}

section.advantages-section{
  width: 100%;
  background-color: #243919;
  padding: 0 1.5%;
  margin-top: 14rem;
}

@media only screen and (max-width: 1700px) {
    section.advantages-section {
        margin-top: clamp(9rem, 13.2vw, 14rem);
        
    }
}

@media only screen and (max-width: 600px) {
    section.advantages-section {
        margin-top: 6rem;
    }
}

.advantages-grid-container{
  column-gap: clamp(2rem, 2.5vw, 3rem);
  row-gap: 2rem;
  max-width: 1480px;
  padding: 7rem 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 450px) minmax(0, 500px) minmax(0, 450px);
  grid-auto-rows: auto;
}

@media only screen and (max-width: 1040px){
  .advantages-grid-container{
    grid-template-columns: minmax(0, 1fr);
    max-width: 700px;
    row-gap: 2rem;
  }
}

@media only screen and (max-width: 600px){
  .advantages-grid-container{
    row-gap: 0;
    padding: 4rem 0;
  }
}

.advantages-header-section{
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.advantages-header-section > *{
  margin-bottom: 2rem;
}

.advantages-section h2{
  color: #ffffff;
  text-align: left;
}

@media only screen and (max-width:1040px){
  .advantages-header-section{
    width: clamp(300px, 39.5vw, 410px);
    margin-left: 2rem
  }
}

@media only screen and (max-width: 400px){
  .advantages-header-section{
    /*margin-left: clamp(10px, 8vw, 2rem);*/
    margin-left: 10px;
  }
}

.advantages-section a{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  align-self: end;
}

@media only screen and (max-width: 1040px){
  .advantages-section a{
    margin-left: 2rem
  }
}

@media only screen and (max-width: 400px){
  .advantages-section a{
    /*margin-left: clamp(10px, 8vw, 2rem);*/
    margin-left: 10px;
  }
}

.advantages-img{
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 40% bottom 15%;
}

@media only screen and (max-width: 1040px){
  .advantages-img{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    padding-top: 3rem;
    max-height: 500px;
    object-position: left 0 top 25%;
  }
}

@media only screen and (max-width: 722px){
  .advantages-img{
    max-height: unset;
    height: clamp(250px, 69.3vw, 500px);
  }
}

.advantages-section h3{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: clamp(16px, 1.08vw, 1.17rem);
  margin-bottom: .5rem;
} 

@media only screen and (max-width: 1040px){
  .advantages-section h3{
    /*font-size: clamp(16px, 1.8vw, 1.17rem);*/
    font-size: 1.17rem;
    margin-bottom: .2rem;
  }
}

@media only screen and (max-width: 722px){
  .advantages-section h3{
    font-size: clamp(16px, 2.6vw, 1.17rem);
  }
}

@media only screen and (max-width: 500px){
  .advantages-section h3{
    font-size: 14px;
    margin-bottom: .1rem;
  }
}

.advantages-section p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  color: #ffffff;
}

@media only screen and (max-width:500px){
  .advantages-section p{
    font-size: clamp(12px, 2.9vw, 14px);
  }
}

.advantages-list-container{
  height: clamp( 550px, 42.25vw, 730px);
  grid-row: 1 / 3;
  grid-column: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 1040px){
  .advantages-list-container{
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    height: 750px;
    padding-top: 3rem;
    margin-left: 2rem;
  }
}

@media only screen and (max-width: 450px){
  .advantages-list-container{
    height: 600px;
  }
}

@media only screen and (max-width: 400px){
  .advantages-list-container{
    /*margin-left: clamp(10px, 8vw, 2rem);*/
    margin-left: 10px;
  }
}

.advantages-list-item{
  width: 100%;
  display: flex;
  margin-bottom: 2rem;
}

.advantages-list-item img{
  width: clamp(56px, 4.2vw, 80px);
  height: clamp(56px, 4.2vw, 80px);
  margin-right: clamp(1rem, 1.855vw, 2rem);
}

@media only screen and (max-width: 1040px){
  .advantages-list-item img{
    width: 70px;
    height: 70px;
    margin-right: 3rem;
  }
}

@media only screen and (max-width:722px){
  .advantages-list-item img{
    width: clamp(45px, 9.7vw, 70px);
    height: clamp(45px, 9.7vw, 70px);
    margin-right: clamp(1rem, 6.66vw, 3rem);
  }
}

.a-l-i-last{
  margin-bottom: 0!important;
}

.advantages-text-holder{
  width: clamp(250px ,19.1vw, 330px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 1040px){
  .advantages-text-holder{
    /*width: clamp(250px ,34.6vw, 360px);*/
    width: 360px;
  }
}

@media only screen and (max-width: 722px){
  .advantages-text-holder{
    width: clamp(226px, 49.9vw, 360px);
  }
}

.advantages-text-holder p{
 font-size: clamp(12px, 0.94vw, 16px);
}

@media only screen and (max-width: 1040px){
  .advantages-text-holder p{
    /*font-size: clamp(12px ,1.55vw, 16px);*/
    font-size: 16px;
  }
}

@media only screen and (max-width: 722px){
  .advantages-text-holder p{
    font-size: clamp(12px ,2.5vw, 16px);
  }
}

section.solutions-section{
  background-image: url(/Assets/Images/solutions-img-01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: clamp(650px, 49.3vw, 850px);
  padding: 5rem 1.5%;
  background-position: left 0 bottom 15%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

@media only screen and (max-width:850px){
  section.solutions-section{
    background-position: left 25% bottom 0;
  }
}

@media only screen and (max-width:600px){
  section.solutions-section{
    padding: 4rem 1.5%;
  }
}

.solutions-section h2{
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.773);
  width: clamp(580px, 46.9vw, 900px);
  margin-bottom: 3rem;
}
@media only screen and (max-width:1040px){
  .solutions-section h2{
    width: clamp(480px, 56.3vw, 580px);
  }
}

@media only screen and (max-width:500px){
  .solutions-section h2{
    width: clamp(300px, 90vw, 450px);
  }
}

@media only screen and (max-width:400px){
  .solutions-section h2{
    max-width: 330px;
  }
}

.solutions-button-panel{
  display: flex;
  width: clamp(580px, 46.9vw, 900px);
  justify-content: flex-start;
}

.solutions-button-panel a{
  margin-right: 3rem;
}

@media only screen and (max-width:1040px){
  .solutions-button-panel{
    width: clamp(480px, 56.3vw, 580px);
  }
  .solutions-button-panel a{
    margin-right: 2rem;
  }
}

@media only screen and (max-width:500px){
  .solutions-button-panel{
    width: clamp(310px, 90vw, 450px);
  }
}

@media only screen and (max-width:400px){
  .solutions-button-panel{
    width: clamp(300px, 90vw, 330px);
  }
}

section.client-section{
  width: 100%;
  padding: 0 1.5%;
  margin: 14rem 0;
}

@media only screen and (max-width: 1700px) {
    section.client-section {
      margin: clamp(9rem, 13.2vw, 14rem) 0;
    }
}

@media only screen and (max-width: 600px) {
    section.client-section {
      margin: 6rem auto;
    }
}
.client-section h3{
  font-family: 'garamond condensed';
  letter-spacing: -0.055em;
  font-weight: 100;
  display: inline-block;
  font-size: 1.9rem;
}

@media only screen and (max-width: 1400px){
  .client-section h3{
    font-size: clamp(1.5rem, 2.18vw, 1.9rem);
  }
}

.client-grid-container{
  max-width: 1092px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 530px) minmax(0, 530px);
  grid-auto-rows: auto; row-gap: 2rem; column-gap: 2rem;
}

@media only screen and (max-width: 1400px){
  .client-grid-container{
    max-width: unset; width: clamp(812px, 78vw, 1092px);
  }
}

@media only screen and (max-width: 850px){
  .client-grid-container{
    grid-template-columns: minmax(0, 530px);
    max-width: 530px;
    width: 100%;
    min-width: 300px;
  }
}

@media only screen and (max-width: 550px){
  .client-grid-container{
    row-gap: clamp(10px, 3vw, 2rem);
  }
}

.client-header-section{
  grid-row: 1 / 2; grid-column: 1 / 3;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding-bottom: 2rem;
}

@media only screen and (max-width:850px){
  .client-header-section{
    grid-column: 1 / 2;
  }
}

.client-header-section h2{
  margin-bottom: 2rem;
}

.client-section p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  margin-bottom: 0!important;
}

@media only screen and (max-width:500px){
  .client-section p{
    font-size: clamp(12px, 2.9vw, 14px);
  }
}

@media only screen and (max-width: 550px){
  .client-info-card p{
    font-size: clamp(12px, 3vw, 1rem);
  }
}

.client-info-card{
  color: #2B5219;
  background-color: #F5F8D9;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 530px;
  padding: 2rem;
}

@media only screen and (max-width: 1400px){
  .client-info-card{
    width: clamp(390px, 37.9vw, 530px);
  }
}

@media only screen and (max-width: 850px){
  .client-info-card{
    width: 100%;
  }
}

@media only screen and (max-width: 550px){
  .client-info-card{
    padding: clamp(1rem, 4vw, 2rem);
  }

}

.client-info-card img{
  width: 61px;
  height: 61px;
}

@media only screen and (max-width: 550px){
  .client-info-card img{
    width: clamp(40px, 11.2vw, 61px);
  }

}

.client-info-card > *{
  margin-bottom: 2rem;
}

@media only screen and (max-width: 550px){
  .client-info-card > *{
    margin-bottom: 1rem;
  }
}

.c-one{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.c-two{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.c-three{
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.c-four{
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

@media only screen and (max-width:850px){
  .c-one{
    grid-row: 2 / 3;
  }
  .c-two{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
  .c-three{
    grid-row: 4 / 5;
  }
  .c-four{
    grid-row: 5 / 6;
    grid-column: 1 / 2;
  }
}
#services-sec{
  background-color: #243919;
  color: #ffffff;
  padding: 0 1.5%;
  margin: 14rem 0;
  width: 100%;
}

@media only screen and (max-width: 1700px) {
    #services-sec {
        margin: clamp(9rem, 13.2vw, 14rem) 0;
    }
}

@media only screen and (max-width: 600px) {
    #services-sec {
        margin: 6rem auto;
    }
}

.services-grid-container{
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  grid-auto-rows: auto;
  max-width: 1500px;
  min-width: 1000px;
  padding: 7rem 4rem;
  margin: 0 auto;
  row-gap: 4rem;
  column-gap: clamp(60px, 15.5vw, 268px);
}

@media only screen and (max-width:1500px){
  .services-grid-container{
    column-gap: 60px;
    max-width: 1390px;
  }
}

@media only screen and (max-width: 1220px){
  .services-grid-container{
    padding: 7rem 3rem;
  }
}

@media only screen and (max-width: 1040px){
  .services-grid-container{
    grid-template-columns: minmax(0, 700px);
    max-width: 700px;
    min-width: 300px;
  }
}

@media only screen and (max-width: 600px){
  .services-grid-container{
    max-width: 490px;
    min-width: unset;
    padding: 4rem 1rem;
    row-gap: 3rem;
  }
}

@media only screen and (max-width: 400px){
  .services-grid-container{
    padding: 4rem 5px;
  }
}

#services-sec h2{
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  padding-bottom: 2rem;
}

@media only screen and (max-width: 1040px){
  #services-sec h2{
    grid-column: 1 / 2;
  }
}

.service-card{
  display: flex;
  flex-direction: row;
  max-width: 600px;
}

.service-text-holder{
  min-width: 390px;
}

@media only screen and (max-width: 1220px){
  .service-text-holder{
    min-width: 328px;
  }
}

@media only screen and (max-width: 720px){
  .service-text-holder{
    min-width: 325px;
  }
}

@media only screen and (max-width: 450px){
  .service-text-holder{
    min-width: unset;
  }
}

.service-card h3{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  margin-bottom: 1.5rem;
  font-size: clamp(16px, 1.09vw, 1.17rem);
}

.service-card p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 0.94vw, 16px);
}

@media only screen and (max-width: 1220px){
  .service-card h3{
    margin-bottom: 1rem;
  }
  .service-card p{
    font-size: 12px;
  }
}

@media only screen and (max-width: 1040px){
  .service-card h3{
    font-size: 16.5px;
  }
  .service-card p{
    font-size: 15px;
  }
}

@media only screen and (max-width: 720px){
  .service-card p{
    font-size: clamp(12px, 2.1vw, 15px);
  }
}

@media only screen and (max-width: 500px){
  .service-card h3{
    margin-bottom: .5rem;
    font-size: 14px;
  }
}

.service-card img{
  width: clamp(65px, 5.8vw, 80px);
  height: clamp(65px, 5.8vw, 80px);
  margin-right: clamp(2rem, 2.8vw, 3rem);
}

@media only screen and (max-width: 1040px){
  .service-card img{
    width: 70px;
    height: 70px;
    margin-right: 3rem;
  }
}


@media only screen and (max-width: 520px){
  .service-card img{
    width: 50px;
    height: 50px;
    margin-right: 1.5rem;
  }
}

@media only screen and (max-width: 420px){
  .service-card img{
    width: 45px;
    height: 45px;
    margin-right: 1rem;
  }
}

.s-one{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.s-two{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.s-three{
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.s-four{
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.s-five{
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

.s-six{
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}

.s-seven{
  grid-row: 5 / 6;
  grid-column: 1 / 2;
}

.s-eight{
  grid-row: 5 / 6;
  grid-column: 2 / 3;
}

.s-nine{
  grid-row: 6 / 7;
  grid-column: 1 / 2;
}

.s-ten{
  grid-row: 6 / 7;
  grid-column: 2 / 3;
}

.s-eleven{
  grid-row: 7 / 8;
  grid-column: 1 / 2;
}

.s-twelve{
  grid-row: 7 / 8;
  grid-column: 2 / 3;
}

.s-thirteen{
  grid-row: 8 / 9;
  grid-column: 1 / 2;
}

.s-fourteen{
  grid-row: 8 / 9;
  grid-column: 2 / 3;
}

s-fifteen{
  grid-row: 9 / 10;
  grid-column: 1 / 2;
}

.services-grid-container p.s-sub-heading{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  grid-row: 10 / 11;
  grid-column: 1 / 3;
  padding-top: 2rem;
  width: 760px;
}
.s-sub-two{
  display: none;
}

@media only screen and (max-width: 500px){
  .services-grid-container p.s-sub-heading{
    font-size: clamp(13px, 2.9vw, 14px);
  }
  .s-sub-one{
    display: none;
  }
  .s-sub-two{
    display: inline;
  }
}

.services-grid-container a{
  grid-row: 11 / 12;
  grid-column: 1 / 2;
}

@media only screen and (max-width: 1040px){
  .s-one{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  .s-two{
    grid-row: 3 / 4;
    grid-column: 1/ 2;
  }

  .s-three{
    grid-row: 4 / 5;
    grid-column: 1 / 2;
  }

  .s-four{
    grid-row: 5 / 6;
    grid-column: 1 / 2;
  }

  .s-five{
    grid-row: 6 / 7;
    grid-column: 1 / 2;
  }

  .s-six{
    grid-row: 7 / 8;
    grid-column: 1 / 2;
  }

  .s-seven{
    grid-row: 8 / 9;
    grid-column: 1 / 2;
  }

  .s-eight{
    grid-row: 9 / 10;
    grid-column: 1 / 2;
  }

  .s-nine{
    grid-row: 10 / 11;
    grid-column: 1 / 2;
  }

  .s-ten{
    grid-row: 11 / 12;
    grid-column: 1 / 2;
  }

  .s-eleven{
    grid-row: 12 / 13;
    grid-column: 1 / 2;
  }

  .s-twelve{
    grid-row: 13 / 14;
    grid-column: 1 / 2;
  }

  .s-thirteen{
    grid-row: 14 / 15;
    grid-column: 1 / 2;
  }

  .s-fourteen{
    grid-row: 15 / 16;
    grid-column: 1 / 2;
  }

  .s-fifteen{
    grid-row: 16 / 17;
    grid-column: 1 / 2;
  }

  .services-grid-container p.s-sub-heading{
    grid-row: 17 / 18;
    grid-column: 1 / 2;
    max-width: 100%;
  }

  .services-grid-container a{
    grid-row: 18 / 19;
    grid-column: 1 / 2;
  }
}

#about-sec{
  padding: 0 1.5%;
  width: 1000px;
  margin: 14rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media only screen and (max-width: 1700px){
  #about-sec{
    margin: clamp(9rem, 13.2vw, 14rem) auto;
  }
}

@media only screen and (max-width: 1500px) {
  #about-sec{
    width: clamp(830px, 66vw, 1000px);
  }
  
}

@media only screen and (max-width: 1040px) {
  #about-sec{
    width: clamp(600px, 79vw, 830px);

  }
  
}
@media only screen and (max-width: 650px) {
  #about-sec{
    width: clamp(0px, 92vw, 600px);
  }
  
}

@media only screen and (max-width: 600px) {
  #about-sec{
    width: 100vw;
    margin: 6rem auto;

  }
  
}
@media only screen and (max-width: 550px) {
    #about-sec{
      gap: clamp(10px, 3vw, 2rem);
    }
}

#about-sec h2{
  margin-bottom: 3rem;
}

@media only screen and (max-width: 600px) {
  #about-sec h2{
    text-align: center;
  } 
}

@media only screen and (max-width: 450px) {
  #about-sec h2{
    max-width: 320px;
    margin: 0 auto;
    padding-bottom: 3rem;
  } 
}

.about-card{
  width: 1000px;
  color: #2B5219;
  background-color: #F5F8D9;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media only screen and (max-width: 1500px) {
  .about-card{
    width: 100%;
  }
  
}

@media only screen and (max-width: 600px) {
  .about-card{
    width: 530px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 550px) {
  .about-card{
    width: 100%;
    padding: clamp(1rem, 4vw, 2rem);
  }
}

.about-card img{
  width: 50px;
  height: 50px;
  object-fit: contain;
}

@media only screen and (max-width: 600px) {
  .about-card img{
    width: clamp(40px, 8.2vw, 50px);
    height: clamp(40px, 8.2vw, 50px);
  }
  
}

.about-card h3{
  font-family: 'garamond condensed';
  letter-spacing: -0.055em;
  font-weight: 100;
  display: inline-block;
  font-size: 1.9rem;
}

@media only screen and (max-width: 1400px) {
  .about-card h3 {
    font-size: clamp(1.5rem, 2.18vw, 1.9rem);
  }
}

.about-card p{
  font-family: 'inter', Arial, Helvetica, sans-serif;
}

@media only screen and (max-width: 550px) {
    .about-card p {
        font-size: clamp(.8rem, 3vw, 1rem);
    }
}

.a-p-two{
  display: none;
}

@media only screen and (max-width: 1040px){
  .a-p-one{
    display: none;
  }
  .a-p-two{
    display: inline;
  }
}

.line-seperator{
  width: 90%; height: 1px; margin: 0 auto; background-color: #D3D3D3;
}

/* GALLERY */
section.gallery{
  width: 100%;
  overflow: hidden;
  margin: 14rem auto;
}

@media only screen and (max-width: 1700px){
  section.gallery{
    margin: clamp(9rem, 13.2vw, 14rem) auto;
  }
}

@media only screen and (max-width: 600px){
  section.gallery{
    margin: 6rem auto;
  }
}

.gallery h2{
  width: 100%;
  text-align: center;
  margin-bottom: 3rem;
}

.swiper-gallery {
  width: 100%;
  position: relative; /* for nav and paginiation */
}

.swiper-gallery-wrapper {
  -webkit-transition-timing-function:linear!important;
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important;
  display: flex; align-items: center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  padding-bottom: 3rem; 
}

@media only screen and (max-width: 600px){
  .swiper-gallery-wrapper{
    padding-bottom: 1rem; 
  }
}
.swiper-gallery-slide {
  display: flex; justify-content: center; align-items: center; flex-shrink: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.swiper-gallery-slide img{
  max-width: 700px; max-height: 500px;
}
@media only screen and (max-width: 700px){
  .swiper-gallery-slide img{
    max-width: 100%; max-height: unset;
  }
}

.gallery-button-cont{
  width: 100%; height: 100px; display: flex; justify-content: center; align-items: center;
}

.gallery-buttons {
  position: absolute; width: 150px; height: 48px;
}

.swiper-button-prev,
.swiper-button-next {
  border: 2px solid #000000; border-radius: 1.5rem;
  color: #000000!important;
  height: 48px!important; width: 48px!important;
  padding: 8px;
}

/* IMAGE LIGHTBOX EFFECT FOR GALLERY ITEMS */
.lightbox{
  width: 100vw; height: 100vh;
  padding: 0 10px;
  position: fixed; top: 0; left: 0;
  display: none; justify-content: center; align-items: center;
  background-color: #000000;
  z-index: 2000;
}

.lightbox-img {
  max-width: 700px; max-height: 500px;
  object-fit: contain;
}
@media only screen and (max-width: 700px){
  .lightbox-img {
    max-width: 100%;
    max-height: unset;
  }
}

.lightbox .close {
  position: absolute; top: 20px; right: 30px;
  width: 20px; height: 20px;
  cursor: pointer;
}

section.contact{
  width: 838px;
  margin: 14rem auto;
  border-radius: 40px;
  display: grid; grid-template-columns: 380px minmax(0, 3rem) 410px; row-gap: 40px;
  /* prevent nav from blocking section h1 */
}

@media only screen and (max-width: 1700px){
  section.contact{
    margin: clamp(9rem, 13.2vw, 14rem) auto;
  }
}

@media only screen and (max-width: 950px){
  section.contact{
    grid-template-columns: 380px minmax(0, 3rem) 250px;
    width: 646px;
  }
}
@media only screen and (max-width: 750px){
  section.contact{
    width: 70%;
    grid-template-columns: 1fr minmax(0, 3rem) 0;
  }
}
@media only screen and (max-width: 600px){
  section.contact{
    margin: 6rem auto;
  }
}
@media only screen and (max-width: 450px){
  section.contact{
    width: 80%;
  }
}

/* hide labels but keep in dom for accessibility in form */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact h2{
  grid-column: 1/ span 3; grid-row: 1/ span 1;
}

form ::placeholder{
  font-family: 'inter', Arial, Helvetica, sans-serif;
  font-size: 16px;
}

@media only screen and (max-width: 500px){
  form ::placeholder{
    font-size: 14px;
  }
}

.contact-sub-header{
  margin-bottom: 2rem;
  grid-column: 1/ 2; grid-row: 2/ span 1;
}
@media only screen and (max-width: 750px){
  .contact-sub-header{
    grid-column: 1/ span 3; grid-row: 2/ span 1;
  }
}

@media only screen and (max-width: 500px){
    .contact-sub-header{
      margin-bottom: 0;
      font-size: clamp(12px, 2.9vw, 14px);
    }
}

.contact .contact-info{
  grid-column:  1/ 2; grid-row: 3/ span 1;
  display: flex; flex-direction: column;
}

@media only screen and (max-width: 750px){
  .contact .contact-info{
    grid-column: 1/ span 3;
    grid-row: 3/ span 1;
  }
}

.contact-info > *{
  margin-bottom: 1rem;
}

.contact-info .contact-item{
  display: flex; flex-direction: row; align-items: center; color: #000000;
}

.contact-item p{
  font-size: 1rem;
  color: #696969;
}

@media only screen and (max-width: 500px){
  .contact-item p{
    font-size: clamp(12px, 2.9vw, 14px);
  }
}

.contact-item img{
  width: 2.5rem; height: 2.5rem;
  margin-right: 2rem;
}
@media only screen and (max-width: 750px){
  .contact-item img{
    width: 2rem; height: 2rem;
  }
}
@media only screen and (max-width: 500px){
  .contact-item img{
    width: 1.5rem; height: 1.5rem;
  }
}
@media only screen and (max-width: 400px){
  .contact-item img{
    margin-right: 1rem;
  }
}

.contact form{
  grid-column: 3/ 4; grid-row: 1/ span 5;
  display: grid; grid-template-columns: repeat(4, [col-start] 1fr); row-gap: .9rem;
}

@media only screen and (max-width: 750px){
  .contact form{
    grid-column: 1/ span 3;
    grid-row: 4/ span 1;
  }
}

/* global form input style */
form .user-input{
  background-color: #F9FCE3;
  height: 48px;
  padding: 1rem;
  border: none;
  font-weight: 400;
  font-size: 1rem;
}

@media only screen and (max-width: 500px){
  form .user-input{
    font-size: 14px;;
  }
}
/* placing name label/input inside grid */
form .l-name{
  grid-column: col-start/ span 5;
  grid-row: 1/ 2;
}
.contact form #name{
  grid-column: col-start/ span 5; grid-row: 2/ 3;
  width: 250px;
}

/* placing email label/input inside grid */
form .l-email{
  grid-column: col-start/ span 5; grid-row: 3/ 4;
}
.contact form #email{
  grid-column: col-start/ span 5; grid-row: 4/ 5;
  width: 250px;
}

/* placing phone label/input inside grid */
form .l-phone{
  grid-column: col-start/ span 5; grid-row: 5/ 6;
}
.contact form #phone{
  grid-column: col-start/ span 5; grid-row: 6/ 7;
  width: 250px;
}

/* placing address label/input inside grid */
form .l-address{
  grid-column: col-start/ span 5; grid-row: 7/ 8;
}
.contact form #address{
  grid-column: col-start/ span 5; grid-row: 8 /9;
  width: 250px;
}

/* placing message label/input inside grid */
form .l-message{
  grid-column: col-start/ span 5; grid-row: 9/ 10;
}
.contact form textarea{
  grid-column: col-start/ span 5; grid-row: 10/ 11;
  width: 400px;
  height: 160px;
  resize: none;
}
.contact form button{
  grid-column: col-start/ span 5; grid-row: 11/12;
  margin-top: .9rem;
}
@media only screen and (max-width: 950px){
  .contact form textarea{
    width: 250px;
  }
}
@media only screen and (max-width: 750px){
  .contact form textarea{
    width: 400px;
  }
}
@media only screen and (max-width: 700px){
  .contact form textarea{
    width: 100%; max-width: 400px;
  }
}

footer{
  width: 100%;
  display: grid; grid-template-columns: 10% repeat(10, [col-start] 1fr) 10%; row-gap: 1rem;
  padding: 2.5rem;
  background-color: #18280F;
  font-family: 'inter', Arial, Helvetica, sans-serif;
}
@media only screen and (max-width: 450px){
  footer{
    padding: 2.5rem 0;
  }
}

footer h3,
footer h4,
footer th{
  color: #ffffff;
}

footer p,
footer table td,
footer ol li{
  color: #ffffff; font-size: .8rem;
}

footer img.footer-logo{
  height: 4rem;
  grid-column: col-start / span 10; 
  grid-row: 1;
  margin: 1rem 0;
}

@media only screen and (max-width: 350px){
  footer img.footer-logo{
    height: 3rem;
  }
}

/* Footer body grid-item and grid */
footer .footer-body-cont{
  grid-column: col-start / span 10; grid-row: 2;
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 235px minmax(0, 1fr) 146px minmax(0, 1fr) 86px;
}
@media only screen and (max-width: 1050px){
  footer .footer-body-cont{
    grid-template-columns: 240px minmax(0, 293px) 240px; justify-self: center; row-gap: 2rem;
  }
}
@media only screen and (max-width: 700px){
  footer .footer-body-cont{
    grid-template-columns: 240px minmax(0, 2rem) 150px; justify-self: start;
  }
}
@media only screen and (max-width: 600px){
  footer .footer-body-cont{
    grid-row: 2; grid-template-columns: 240px minmax(0, 293px) 90px;
  }
}
@media only screen and (max-width: 525px){
  footer .footer-body-cont{
    grid-row: 2; grid-template-columns: 240px minmax(0, 293px) minmax(0, 90px);
  }
}

/* contact link container */
.footer-body-cont .contact-links{
  grid-column: 1/ span 1;
  width: 240px; min-width: 240px;
}

.contact-links h4{
  margin-bottom: 1.3rem;
}

.contact-links ol{
  list-style: none; font-weight: 300;
}

.contact-links ol li{
  margin-bottom: .5rem;
}

/* office ours table */
footer table.t-hours{
  grid-column: 3/span 1; min-width: 235px; height: 230px;
  text-align: left; font-weight: 300;
}
@media only screen and (max-width: 1050px){
  footer table.t-hours{
    grid-column: 1/ span 1; grid-row: 2/ span 1;
  }
}

/* service location table */
footer table.t-areas{
  grid-column: 5/ span 1;
  height: 284px; min-width: 146px;
  text-align: left; font-weight: 300;
}
@media only screen and (max-width: 1050px){
  footer table.t-areas{
    grid-column: 3/ span 1; grid-row: 2/ span 1;
  }
}
@media only screen and (max-width: 750px){
  footer table.t-areas{
    grid-column: 1/ span 1; grid-row: 3/ span 1;
  }
}

.t-hours .day{
  width: 124px;
}

th{
  font-size: 1rem; height: 2.5rem; vertical-align: top; 
}

/* footer nav */
.quick-links{
  grid-column: 7/span 1; min-width: 86px;
}
@media only screen and (max-width: 1050px){
  .quick-links{
    grid-column: 3/ span 1; grid-row: 1/ span 1;
  }
}
@media only screen and (max-width: 750px){
  .quick-links{
    grid-column: 1/ span 1; grid-row: 4/ span 1; margin-top: 1rem;
  }
}

.quick-links h4{
  margin-bottom: 1.3rem;
}

.quick-links ol{
  list-style: none;
}

.quick-links ol li{
  margin-bottom: .5rem;
}

.quick-links ol li:hover{
  text-decoration: underline;
}

footer .copyright{
  grid-column: col-start / span 10; grid-row: 6;
  justify-self: center;
  font-size: 10px; font-weight: 300; text-align: center; margin-top: 3rem;
}

@media only screen and (max-width: 750px){
  footer .copyright{
    font-size: 8px; 
  }
}