:root {
  --dark-green: #1F3F31;
  --light-green: #B4E3A7;
  --purple: #9f82f6d9;
  --light-grey-green: #A5C4A5;
  --light-grey: #B5B5B5;
  --font-family-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-family-sans-serif: 'Onest', 'Arial', 'Helvetica', sans-serif;
  --scale-1: 4px;
  --scale-2: 8px;
  --scale-3: 12px;
  --scale-4: 16px;
  --scale-5: 24px;
  --scale-6: 64px;
  --scale-7: 96px;
  --scale-8: 128px;
  --scale-9: 192px;
  --scale-10: 256px;
  --scale-11: 384px;
  --scale-12: 512px;
  --scale-13: 640px;
  --scale-14: 768px;
  --font-size: 14px;
  --font-size-xxl: 32px;
  --font-size-xl: 24px;
  --font-size-l: 20px;
  --font-size-default: 15px;
  --font-size-medium: 14px;
  --font-size-small: 13px;
  --font-size-hint: 12px;
  --border-radius: 20px;
}

h1 {
  color: #1F3F31;
font-family: Marcellus;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

h2 {
  color: #1F3F31;
font-family: Onest;
font-size: 35px!important;
font-style: normal;
font-weight: 700;
line-height: normal;
}

p {
  color: rgba(39, 62, 50);
font-family: Onest;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 30px */
}

li {
  margin: 5px;
}

.top-logo {
  width: 110px !important;
  opacity: 0.75;

}

.logos {
  background: rgba(245, 245, 232, 0.95) !important;
  backdrop-filter: blur(20px);
}

body {
  font-family: var(--font-family-sans-serif) !important;
  color: var(--dark-green);
}
body header {
  background: var(--dark-green) !important;
  opacity: 0.95;
}
body header .sub-header {
  max-width: 1280px;
  margin: 0 auto;
  background: rgba(31, 63, 49, 0.9);
  backdrop-filter: blur(7.5px);
  padding: var(--scale-3);
  display: flex;
  justify-content: space-between;
}
body header .sub-header img {
  height: 24px;
  filter: brightness(100);
}
body header .sub-header a {
  color: #fff;
  font-size: var(--font-size);
}
body header .sub-header a:hover {
  text-decoration: none;
  opacity: 0.8;
}
body .hero-container {
  background-color: rgba(39, 62, 50) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin-top: -48px;
  padding-top: 48px;
}
body .hero-container .hero {
  margin: 0 auto;
  padding: var(--scale-6) var(--scale-4);
  max-width: 1280px;
  display: flex;
  gap: var(--scale-5);
  align-items: stretch;
  align-content: space-between;
}
.left-section {

  display: flex;
width: 695px;
padding: 40px;
flex-direction: column;
align-items: flex-start;
align-content: space-between;
gap: 28px;
flex-shrink: 0;

border-radius: 20px;
background: rgba(245, 245, 232, 0.95);
backdrop-filter: blur(15px);
}


.headtworeplace {
color: #1F3F31;
font-family: Onest;
font-size: 35px;
font-style: normal;
font-weight: 700;
line-height: normal;
}



body .hero-container .hero .left-section,
body .hero-container .hero .right-section {
  flex: 1;
}
body .hero-container .hero .left-section {
  background: red;
  padding: var(--scale-5);
  border-radius: var(--border-radius);
  background: rgba(245, 245, 232, 0.95);
  backdrop-filter: blur(15px);
}
body .hero-container .hero .left-section h1 {
  color: var(--dark-green);
}
body .hero-container .hero .left-section ul {
  list-style: none;
  /* Removes the default list style */
  padding-left: 0;
}
body .hero-container .hero .left-section ul li {
  position: relative;
  /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px;
}
body .hero-container .hero .left-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  /* Width of the SVG */
  height: 23px;
  /* Height of the SVG */
  background-image: url("data:image/svg+xml;utf8,<svg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11 0C4.9225 0 0 4.9225 0 11C0 17.0775 4.9225 22 11 22C17.0775 22 22 17.0775 22 11C22 4.9225 17.0775 0 11 0ZM16.5 4.895L18.48 6.875L9.625 15.73L4.895 11L6.875 9.02L9.625 11.77L16.5 4.895Z' fill='%23B4E3A7'/></svg>");
  background-size: contain;
  /* Ensures the SVG fits within the dimensions */
  background-repeat: no-repeat;
}
body .hero-container .hero .right-section {
  display: flex;
  flex-direction: column;
  gap: var(--scale-5);
  text-align: center;
}
body .hero-container .hero .right-section .logos,
body .hero-container .hero .right-section .form {
  border-radius: var(--border-radius);
  background: rgba(245, 245, 232, 0.95);
  backdrop-filter: blur(5px);
  padding: var(--scale-5);
}
body .hero-container .hero .right-section {
 display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
body .hero-container .hero .right-section img {
  padding: 0px var(--scale-4);
  flex: 0 0 25%;
  max-width: 25%;
}
body .hero-container .hero .right-section .form h2 {
  font-weight: 600;
  color: var(--dark-green);
  font-size: var(--font-size-xxl);
}
body .hero-container .hero .right-section .form .emailonly_slim {
  background: none !important;
  border: none;
  margin-top: var(--scale-3) !important;
  padding-top: 0px !important;
  width: 100%;
  max-width: 600px !important;
}
body .hero-container .hero .right-section .form .emailonly_slim .input_email {
  border-radius: 10px !important;
  border: 2px solid #B5B5B5 !important;
  background: #FFF !important;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) inset !important;
  width: 100%;
}
body .hero-container .hero .right-section .form .emailonly_slim label.form-check-label {
  font-size: var(--font-size-default);
}
body .hero-container .hero .right-section .form .btn-success {
  display: flex;
  justify-content: center;
  gap: var(--scale-3);
  border-radius: 100px;
  background: var(--purple) !important;
  padding: 15px 35px;
  color: #fff;
  font-size: var(--font-size-l);
  width: 100%;
  margin-top: var(--scale-4);
}
body .hero-container .hero .right-section .form .badges {
  display: flex;
  gap: var(--scale-3);
  justify-content: center;
  align-items: center;
}
body .hero-container .hero .right-section .form .badges img {
  width: 120px;
  height: 100%;
}
body .content-container {
  background: rgba(245,245,232);
  backdrop-filter: blur(5px);
}

body .content-container .cases-container {
  padding: var(--scale-5) var(--scale-3) !important;
}

body .content-container .cases-container h2 {
  text-align: center;
  padding-top: var(--scale-5);
  color: var(--dark-green);
}
body .content-container .cases-container .cases {
  margin: 0 auto;
  padding: var(--scale-5) var(--scale-4);
  max-width: 1280px;
  display: flex;
  gap: var(--scale-5);
  align-items: flex-start;
  align-content: space-between;
}
body .content-container .cases-container .cases .first-case,
body .content-container .cases-container .cases .second-case {
  display: flex;
  align-content: space-between;
  align-items: center;
  gap: var(--scale-2);
  align-items: start;
  flex: 1;
}
body .content-container .cases-container .cases .first-case p,
body .content-container .cases-container .cases .second-case p {
  margin-bottom: var(--scale-2);
}
body .content-container .cases-container .cases .first-case p.name,
body .content-container .cases-container .cases .second-case p.name {
  font-weight: 700;
  margin-bottom: 0px;
}
body .content-container .cases-container .cases .first-case img,
body .content-container .cases-container .cases .second-case img {
  height: 100%;
}
body .content-container .arguments-container {
  margin-top: var(--scale-4);
}
body .content-container .arguments-container .arguments {
  margin: 0 auto;
  padding: var(--scale-5) var(--scale-4);
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scale-4);
  grid-template-rows: auto;
  grid-template-areas: "firstargument firstshowcase" "firstargument secondargument" "secondshowcase secondargument";
  justify-items: center;
}
body .content-container .arguments-container .arguments h2 {
  color: var(--dark-green);
}
body .content-container .arguments-container .arguments img {
  max-width: 500px;
  width: 100%;
}
body .content-container .arguments-container .arguments .first-argument {
  grid-area: firstargument;
}
body .content-container .arguments-container .arguments .first-argument ul {
  list-style: none;
  /* Removes the default list style */
  padding-left: 0;
}
body .content-container .arguments-container .arguments .first-argument ul li {
  position: relative;
  /* Needed for absolute positioning of the pseudo-element */
  padding-left: 30px;
}
body .content-container .arguments-container .arguments .first-argument ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  /* Width of the SVG */
  height: 23px;
  /* Height of the SVG */
  background-image: url("data:image/svg+xml;utf8,<svg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11 0C4.9225 0 0 4.9225 0 11C0 17.0775 4.9225 22 11 22C17.0775 22 22 17.0775 22 11C22 4.9225 17.0775 0 11 0ZM16.5 4.895L18.48 6.875L9.625 15.73L4.895 11L6.875 9.02L9.625 11.77L16.5 4.895Z' fill='%231F3F31'/></svg>");
  background-size: contain;
  /* Ensures the SVG fits within the dimensions */
  background-repeat: no-repeat;
}
body .content-container .arguments-container .arguments .first-showcase {
  grid-area: firstshowcase;
}
body .content-container .arguments-container .arguments .second-argument {
  grid-area: secondargument;
}
body .content-container .arguments-container .arguments .second-showcase {
  grid-area: secondshowcase;
}
body .content-container .arguments-container .arguments a {
  margin-top: var(--scale-4);
  background: none;
  border-width: 3px;
  border-color: var(--dark-green);
  color: var(--dark-green);
  font-size: var(--font-size-l);
}
body .content-container .arguments-container .arguments a:hover {
  opacity: 0.7;
}
body .download-container .download {
  margin: 0 auto;
  padding: var(--scale-6) var(--scale-4);
  max-width: 1280px;
  display: flex;
  gap: var(--scale-5);
  align-items: flex-start;
  align-content: space-between;
}
body .download-container .download img {
  height: 100%;
  max-width: 350px;
  width: 100%;
}
body .download-container .download .text h2 {
  color: var(--dark-green);
}
body .download-container .download .text button {
  background: var(--dark-green);
  border-width: 3px;
  border-color: var(--dark-green);
  font-size: var(--font-size-l);
}
body .download-container .download .text button:hover {
  opacity: 0.8;
}
@media only screen and (max-width: 767px) {
  body .hero-container {
    padding-top: 90px;
  }
  body .hero-container .hero {
    display: block !important;
    padding: var(--scale-5) var(--scale-3) !important;
  }
  body .hero-container .hero .left-section {
    margin-bottom: var(--scale-5);
    max-width: 100%;
  }
  body .content-container .cases-container .cases {
    padding: var(--scale-4) var(--scale-4);
    display: block !important;
  }
  body .content-container .cases-container .cases img {
    width: 100px;
  }
  body .content-container .cases-container .cases .first-case {
    margin-bottom: var(--scale-5);
  }
  body .content-container .cases-container .cases .first-case,
  body .content-container .cases-container .cases .second-case {
    flex-direction: column;
  }
  body .content-container .cases-container .cases .first-case img,
  body .content-container .cases-container .cases .second-case img {
    text-align: center;
    margin: 0 auto;
    display: block;
  }
  body .arguments-container {
    margin-top: var(--scale-4);
  }
  body .arguments-container .arguments {
    display: flex !important;
    flex-direction: column;
  }
  body .download-container {
    margin-top: var(--scale-4);
  }
  body .download-container .download {
    display: flex !important;
    flex-direction: column;
    padding: var(--scale-5) var(--scale-4);
  }
}
h1 {
  font-family: var(--font-family-serif) !important;
}

@media only screen and (max-width: 450px) {
h1, h2 {
  font-size: 26px;
}

}

.quote-logo {
  height:100px;
  width:100px;
}

.emailonly {
  background: none;
  border: none;
}

.btn-success{
  background: var(--dark-green);
  border-width: 1px;
  border-color: var(--dark-green);
}

.form-check-input {
  position: unset;
}

.form-check {
  display:flex;
}

#mobile-button {
  border-radius: 0px !important;
  background-color: #9f82f6d9 !important;
  border-style: none;

}

a.btn.btn-success.rounded-pill.mb-1 {
  border-radius: 0px !important;
  background-color: #9f82f6d9 !important;
  border-style: none;
  color: white;
}

.quote {
  font-style: italic;
}

.download-container {
  background: rgba(231,230,179);
}

.form-check-label#resource_confirm_terms_label {
  margin-left: 5px !important;
}


.message-div {
  font-size: 20px !important;
  padding: 20px;
  margin: 10px;
}

#confirm_terms_label {
  margin-left: 5px !important;
}