:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #1e8449;
    --primaryLight: #1ad167;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    --subTitleFontSize: clamp(1.2rem, 2.5vw, 2rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
body{
  box-sizing: border-box;
}
table{
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 5px;
  border:1px solid #ccc;
  border-spacing: 0px!important;
  font-size: 110%;
}
tr{
  background-color: #fff;
}
th{
  border-radius: 5px;
  text-align: left;
    margin: 0;
  padding: 5px;
}
tr:nth-of-type(even){
  background-color: #f3f3f3;
}
td{
  margin: 0;
  padding: 5px;
  border-radius: 5px;
}
a.btn{
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.btn{
  border-radius: 5px;
  background-color: var(--primary);
  padding: 10px 20px;
  margin: 5px;
  color:#fff;
  border: 1px solid var(--primaryLight);
      font-weight: 400;
    font-size:110%;
}
.btn:hover{
  background-color: var(--primaryLight);
  cursor: pointer;
}
.center{text-align: center !important}
div.input{
  padding:5px 0;
}
input{
    width: 350px;
    padding: 10px 25px;
    vertical-align: baseline;
    font-weight: 400;
    font-size:110%;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 #FFF;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}
textarea{
  line-height: 4;
    width: 350px;
    padding: 10px 25px;
    vertical-align: baseline;
    font-weight: 400;
    font-size:110%;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 #FFF;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}
select{
  width: 350px;
     padding: 10px 25px;
    vertical-align: baseline;
    font-weight: 400;
    font-size:110%;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 #FFF;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
}
input[type="number"]
{
  padding:10px 5px;
  margin:0 0px;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Lato", serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;

    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}
.cs-subtitle {
    font-size: var(--subTitleFontSize);
    line-height: 1.2em;

    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 900;
    color: var(--headerColor);
    margin-bottom: 0.25rem;
    display: block;
}
.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                            



/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 6.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
#carticon:hover{
  color:var(--primaryLight);
  cursor: pointer;
}
#carticon{
  color:var(--primary);
  font-size: 110%;
  text-decoration: none;
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

#hero-229 div.cs-items{
  list-style: none;
  color: var(--bodyTextColorWhite);
  text-align: left;
  list-style-type: none;
  padding:0;

  text-transform: none !important;
  font-weight: normal !important;
  font-size: 110%;
  margin: 0 auto;
  display: inline-block;
}
#hero-229 i.fa{
  font-size: 80%;
  padding: 0 10px 0 0;
}
#hero-229 div.cs-items > div{
  font-size: 120%;
  padding: 7px 0;
}
#hero-229{
  padding:0 5px;
  text-indent: 0;
  margin: 0;
  font-size: 120%;
  text-align: left;
  width: 100%;

}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-229 {
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-229 .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-229 .cs-picture:before {
    /* Black Color Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-229 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-229 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
/*    padding: clamp(9rem, 25.95vw, 17.5rem) 0;*/
    padding: 60px 0;
    margin: auto;
    position: relative;
  }

  #hero-229 .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    /*max-width: clamp(29rem, 60vw, 35.125rem);*/
/*    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    box-sizing: border-box;*/
  }
  #hero-229 .cs-topper {
    /* 13px - 16px */
    /*font-size: clamp(0.8125rem, 1.6vw, 1rem);*/
    font-size: 3rem;
    line-height: 1.2em;
   
    text-align: left;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-229 .cs-title {
    /* 39px - 61px */
    /*font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);*/
    font-size:2.5rem;
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    /*margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;*/
    color: var(--bodyTextColorWhite);
    position: relative;
    padding:0;
    text-align: center;
    display: block;
    margin: 0 auto;
  }
  #hero-229 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    /*margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;*
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
    display: block;
    margin: 0 atuo
  }
  #hero-229 .cs-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-229 .cs-button {
    min-width: 12.3125rem;
  }
  #hero-229 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 3rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-229 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-229 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-229 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-229 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-229 .cs-button-transparent:before {
    content: '';
    position: absolute;
    display: block;
    background: #000;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-229 .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-229 .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-229 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }

  #hero-229 .cs-button-group {
    flex-direction: row;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-229 {
    background: url("/img/home-slider.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-229 .cs-picture img {
    display: none;
  }
}




/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-37 {
        position: relative;
        /* Prevents overflow from the image going off screen */
        overflow: hidden;
    }
    #why-choose-37 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 7vw, 4rem);
    }
    #why-choose-37 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39.375rem;
        margin-right: auto;
        /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #why-choose-37 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
   
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #why-choose-37 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 43.75rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #why-choose-37 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-37 .cs-text {
        margin-bottom: 1rem;
    }
    #why-choose-37 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #why-choose-37 .cs-ul {
        padding: 0;
        margin: 0;
    }
    #why-choose-37 .cs-li {
        list-style: none;
        font-size: 1.25rem;
        line-height: 1.5em;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #1a1a1a;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #why-choose-37 .cs-icon {
        margin-right: 1rem;
    }
    #why-choose-37 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #why-choose-37 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #why-choose-37 .cs-button-solid:hover:before {
        width: 100%;
    }
    #why-choose-37 .cs-button-solid {
        /* button override */
        margin-top: 2rem;
    }
    #why-choose-37 .cs-picture {
        display: block;
        position: relative;
        width: 100%;
        height: 18.75rem;
    }
    #why-choose-37 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* In Between - 650px */
@media only screen and (min-width: 40.625rem) {
    #why-choose-37 .cs-ul {
        columns: 2;
        max-width: 34.375rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-37 {
        /* moved padding pack to the section container */
        padding: var(--sectionPadding);
    }
    #why-choose-37 .cs-content {
        width: 60%;
        padding: 0;
    }
    #why-choose-37 .cs-picture {
        height: 100%;
        width: 50%;
        left: 50%;
        right: auto;
        display: block;
        position: absolute;
        bottom: 0;
        z-index: -1;
    }
    #why-choose-37 .cs-picture:before {
        /* Triangle over image */
        content: "";
        width: 21.875rem;
        background: #fff;
        /* makes the triangle shape over the image */
        clip-path: polygon(0 0, 73% 0, 42% 100%, 0 100%);
        opacity: 1;
        display: block;
        position: absolute;
        top: -0.125rem;
        bottom: -0.125rem;
        left: -0.125rem;
        right: auto;
        z-index: 10;
    }
    #why-choose-37 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
    #why-choose-37 .cs-picture:before {
        width: 18.75rem;
        -webkit-clip-path: polygon(0 0, 100% 0, 14% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 14% 100%, 0 100%);
    }
}

                                





                                /*-- -------------------------- -->
<---         Collection         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #collection-1577 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #collection-1577 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #collection-1577 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #collection-1577 .cs-title {
    margin: 0;
  }
  #collection-1577 .cs-topper {
    color: var(--secondary);
  }
  #collection-1577 .cs-card-group {
    list-style: none;
    width: 100%;
    /* changes to 1280px on tablet */
    /*width: 34.375rem;*/
    width:100%;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content:space-evenly;
/*    grid-template-rows: repeat(12, 1fr);*/
  
  }
  #collection-1577 .cs-item {
    max-width: 100%;
   
    position: relative;
  }
  #collection-1577 .cs-item:hover .cs-background img {
    opacity: .5;
    transform: scale(1.4);
  }
  #collection-1577 .cs-link {
    text-decoration: none;
    /* changes at tablet */
    height: 60vw;
    max-height: 21.75rem;
    padding: 2.5rem 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #collection-1577 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    /* set to -2 so the gradient overlay (z-index: -1) appears in front of the images, but behind the text */
    z-index: -2;
  }
  #collection-1577 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #collection-1577 .cs-category {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    /* 12px - 20px top & bottom, 16px - 24px sides*/
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
    color: var(--main-white, #ffffff);
    position: relative;
    transition: color .3s;
    /* blurred background - done as a pseudo element so backdrop-filter won't distort the text */
  }
  #collection-1577 .cs-category:hover {
    color: var(--headerColor);
  }
  #collection-1577 .cs-category:hover:before {
    background-color: #ffffff;
  }
  #collection-1577 .cs-category:before {
    content: "";
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    --webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: background-color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #collection-1577 .cs-card-group {
    max-width: 80rem;
    grid-template-columns: repeat(12, 1fr);
  }
  #collection-1577 .cs-item {
    /* 180px - 348px */
    height: clamp(11.75rem, 25vw, 21.75rem);
    width: clamp(11.75rem, 25vw, 21.75rem);
    grid-column: span 3;
  }
}
#collection-1577 {
background: rgb(105,155,134);
background: linear-gradient(90deg,rgba(105,155,134,1) 0%, rgba(105,155,134,0.5) 50%, rgba(105,155,134,1) 100%);
  padding-top: 10vh;
}
                                


/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/
#footer{
  display: flex;
  flex-direction: row;
  background-color: black;
  color: var(--bodyTextColorWhite);
  padding:1.2rem;
  flex-wrap: wrap;


  width: 100%;
  align-items: center;
  justify-content: space-evenly;

}
#footer a{
  color:var(--bodyTextColorWhite);
  text-decoration: none;
}
#footer a span{
  text-decoration: underline;
}
#footer .cs-text{
  color: var(--bodyTextColorWhite);
}
/*Product View*/

#product
{
  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 0 50px 0;
}
#product-main
{
  display: flex;
  flex:1;
  flex-direction: row;
  gap: 15px;
  flex-wrap: wrap;
}
#product-img img{
  height:200px;
}
#product-img{
  height:200px;

}
#product .prd_qnty{
  width: 80px;
}

/*cart*/
#cart
{
  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 0 50px 0;
}
.cartmain{
  width: 100%;
}
#cart a.icon{
  color:var(--primary);
}
#checkout
{

  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 0 50px 0;

}

div.checkout{
  border-radius: 5px;
  border:1px solid #f3f3f3;
  background-color: white;
  padding:5px;
  display: flex;
  flex-direction: column;

}
div.checkout label
{
  display: block;
  width: 100%;
}

#contact
{

  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 0 50px 0;

}

div.contact{
  border-radius: 5px;
  border:1px solid #f3f3f3;
  background-color: white;
  padding:5px;
  display: flex;
  flex-direction: column;

}
div.contact label
{
  display: block;
  width: 100%;
}

#page-content
{

  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 10px;

}
._ModalOverlay{
  width:100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(0,0,0,.70);
  position: fixed;
  top:0;
  left:0;
  overflow: hidden;
}
._ModalContainer{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(248,248,248);
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  color:#000;
  max-width: 80%;
}
._ModalHeader{
  padding-right: 25px;
  padding-left: 25px;
}
._ModalBody{
  padding: 25px;
  max-height: 80vh;
  overflow-y:auto;
  min-width: 40vw;
}
._ModalFooter{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 25px 15px 0;
  gap:10px;
}
._ModalScroll{
  max-height: 79vh;
  overflow-y: auto;
}
a._ModalClose{  }
a._ModalClose:hover{
  text-decoration: none;
  cursor:pointer;
}
#size
{

  display: flex;
  flex:1;
  flex-direction: column;
  max-width: 1000px;
  align-items: center;
  margin: 0 auto;
  padding:50px 10px;

}
.diagrams{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 0;
  justify-content: center;
}
.diagrams > div{
  padding: 20px 0;

}
.diagrams div img{
  width:200px;
}
.diagrams h3
{
  text-align: center;
}
.diagrams .smallinfo{
  display: felx;
  text-align: center;
  justify-content: center;
  align-content: center;
  align-items: center;
  height:4rem;
  color:black;
  margin:10px;

}
.diagrams div.eight .smallinfo{
  background-color: rgba(93,163,113,.3);

}
.diagrams div.eight h3{
  color: rgba(93,163,113,1);
}
.diagrams div.quarter .smallinfo{
  background-color: rgba(209,142,87,.3);

}
.diagrams div.quarter h3{
  color: rgba(209,142,87,1);
}
.diagrams div.half .smallinfo{
  background-color: rgba(75,146,145,.3);

}
.diagrams div.half h3{
  color: rgba(75,146,145,1);
}
.diagrams div.whole .smallinfo{
  background-color: rgba(198,220,127,.3);

}
.diagrams div.whole h3{
  color: rgba(198,220,127,1);
}



/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-603 {
    padding: var(--sectionPadding);
  }
  #pricing-603 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-603 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #pricing-603 .cs-toggle-group {
    width: auto;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-603 .cs-plan {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-603 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle {
    width: 3.875rem;
    height: 2.25rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 0.75rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-603 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-603 .cs-toggle.active .cs-toggle-switch {
    left: 2rem;
  }
  #pricing-603 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffba43 -24.69%, #e12213 126.23%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-603 .cs-toggle-switch {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.375rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-603 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    row-gap: 2.5rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #pricing-603 .cs-card-group.active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing-603 .cs-card-group.active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                            transform 0.6s;
  }
  #pricing-603 .cs-card-group.active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: scale(1);
  }
  #pricing-603 .cs-card-group.active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-603 .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    left: left;
    bottom: auto;
    transform: scale(1);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;
  }
  #pricing-603 .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    /* reset on tablet */
    top: 62.5rem;
    transform: scale(0);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-item {
    list-style: none;
    width: 100%;
    /* matches the -88px the cs-price-box's margin top to offset it */
    margin: 5.5rem 0 0 0;
    /* 80px - 100px top *
            /* 16px - 56px left & right */
    /* 16px - 48px bottom */
    padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem) clamp(1rem, 5vw, 3rem);
    box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #pricing-603 .cs-price-box {
    width: 100%;
    /* 32px - 48px margin-bottom */
    margin: -10.5rem 0 clamp(2rem, 5vw, 3rem) 0;
    /* 24px - 32px top & bottom */
    /* 24px - 48px left and right */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #12192d;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  #pricing-603 .cs-package {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-price {
    /* 24px - 32px */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-desc {
    font-size: 0.75rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #pricing-603 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    font-weight: 400;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--bodyTextColor);
  }
  #pricing-603 .cs-included {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: 700;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--headerColor);
  }
  #pricing-603 .cs-ul {
    /* 32px - 48px */
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }
  #pricing-603 .cs-li {
    font-size: 0.875rem;
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-603 .cs-icon {
    width: 0.9375rem;
    height: auto;
    /* push icon a little from the top so it looks centered */
    margin-top: 0.1875rem;
    display: block;
  }
  #pricing-603 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-603 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-603 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-603 .cs-price-button {
    /* 14px - 18px */
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    /* 36px - 50px */
    line-height: clamp(2.25rem, 4.5vw, 3.125rem);
    font-weight: 400;
    text-transform: uppercase;
    width: 100%;
    height: clamp(2.25rem, 4.5vw, 3.125rem);
    /* pushes button to the bottom of the cs-item */
    margin-top: auto;
    border-radius: 0.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-603 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #pricing-603 .cs-option2 {
    top: auto;
    bottom: 0;
  }
}