body.ver_2 {
  --primaryColorGreen: #D1B3FD;
  --secondaryColor: #D1B3FD;
  --terciaryColor: #3D296E;
}

#section-0.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 86px; 
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#section-0.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 9, 26, 0.28) 0%, rgba(4, 9, 26, 0.38) 40%, rgba(4, 9, 26, 0.32) 68%, rgba(4, 9, 26, 0.02) 100%),
    linear-gradient(180deg, rgba(255, 122, 0, 0.12) 0%, rgba(4, 9, 26, 0.06) 100%);
  pointer-events: none;
}

#section-0.lp-hero .container {
  position: relative;
  z-index: 1;
}

#section-0.lp-hero .lp-hero-copy {
  max-width: 640px;
  color: #fff;
}

#section-0.lp-hero .lp-hero-copy h1 {
  color: #fff;
  font-size: clamp(36px, 3.4vw, 66px);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 18px;
  text-wrap: balance;
}

#section-0.lp-hero .lp-hero-copy p {
  margin-bottom: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  text-wrap: balance;
}

#section-0.lp-hero .lp-hero-card {
  width: 100%;
  max-width: 610px;
  background: rgba(239, 246, 255, 0.96);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(4px);
}

#section-0.lp-hero .hero-response-copy {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  color: #20252d;
}

#section-0.lp-hero .hero-response-copy h1 {
  margin: 0;
  color: #20252d;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.08;
  font-weight: 800;
}

#section-0.lp-hero .hero-response-copy h3 {
  margin: 0;
  color: #40444d;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
  font-weight: 600;
  text-wrap: balance;
}

.hero-fieldset {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
}

.hero-fieldset.active {
  display: block;
}

.hero-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.hero-field {
  position: relative;
}

.hero-dropdown {
  position: relative;
}

.hero-field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  color: #1d82ff;
  font-size: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-field-icon .fa {
  color: #1d82ff;
}
#terms-error{
  color: red;
  font-size: 12px;
}
.hero-control {
  width: 100%;
  height: 55px;
  border: 0;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(17, 47, 92, 0.06);
  color: #6f7785;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 0 20px 0 62px;
  outline: none;
  opacity: 1;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hero-control::placeholder {
  color: #8b94a1;
}

.hero-control:focus {
  box-shadow: 0 0 0 2px rgba(29, 130, 255, 0.24), 0 12px 26px rgba(17, 47, 92, 0.08);
}

.hero-control.hero-select-control {
  position: relative;
  display: block;
  cursor: pointer;
}

.hero-control.hero-select-control::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 18px solid #1d82ff;
  transform: translateY(-28%);
  pointer-events: none;
}

.hero-select-field .hero-control {
  padding-right: 60px;
  background-image: url('/img/icons/hero_select.svg');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 15px center;
}

.hero-dropdown.has-value .hero-select-control {
  color: #20252d;
}

.hero-dropdown.is-open .hero-control.hero-select-control::after {
  transform: translateY(-12%) rotate(180deg);
}

.hero-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
  display: grid;
  gap: 8px;
  padding: 10px;
  margin: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 45px rgba(4, 17, 48, 0.18);
  border: 1px solid rgba(29, 130, 255, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.hero-dropdown.is-open .hero-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-dropdown-option {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #f7fbff;
  color: #6f7785;
  font-size: 18px;
  font-weight: 500;
  padding: 12px 16px;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hero-dropdown-option:hover,
.hero-dropdown-option.is-selected {
  background: #e8f2ff;
  color: #1457cc;
}

.hero-dropdown-option:active {
  transform: scale(0.99);
}

.hero-control.correct,
.hero-control.incorrect {
  transform: translateZ(0);
}

.hero-control.correct {
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.28), 0 12px 26px rgba(17, 47, 92, 0.08) !important;
}
 

.hero-terms {
  grid-column: 1 / -1;
  padding-top: 4px;
}

.hero-term {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  color: #20252d;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.hero-term input {
  display: none;
}

.hero-term-box {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid #1d82ff;
  border-radius: 4px;
  background: #fff;
  position: relative;
  margin-top: -2px;
}

.hero-term input:checked + .hero-term-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0px;
  width: 11px;
  height: 20px;
  border-right: 3px solid #1d82ff;
  border-bottom: 3px solid #1d82ff;
  transform: rotate(40deg);
}

.hero-term-copy a {
  color: #1d82ff;
  font-weight: 700;
}

.hero-term-copy a:hover {
  color: #1457cc;
}

.hero-submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.hero-submit {
  width: 250px;
  min-height: 60px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff4d25 0%, #ff2f18 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 42px rgba(255, 47, 24, 0.34);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(255, 47, 24, 0.42);
}

.hero-field .error,
.hero-terms .error {
  display: block;
  margin: 8px 8px 0 8px;
  color: #d92b2b;
  font-size: 13px;
  line-height: 1.3;
}

/* Process section */
.process-section {
  padding: 70px 0;
  background-color: #FFFBF2;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.process-section .section-title {
  text-align: center;
  margin-bottom: 40px;
}

.process-section .section-title h2 {
  font-size: 30px;
  color: #6c6c6c;
  margin-bottom: 0;
  font-weight: 700;
}

.process-section .section-title p {
  color: #8a8a8a;
  margin-bottom: 0;
  font-size: 30px;
}

.process-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.process-card {
  border: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  padding: 18px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  min-height: 260px;
  position: relative;
  max-width: 288px;
  margin: 0 auto;
}

.process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  background-image: var(--card-border-svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.process-card .process-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  background-color: #9b9b9b;
  mask-size: contain;
  mask-repeat: no-repeat;
  top: -35px;
  position: relative;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.process-card.icon-1 .process-icon {
  mask-image: var(--processIcon1);
  -webkit-mask-image: var(--processIcon1);
}

.process-card.icon-2 .process-icon {
  mask-image: var(--processIcon2);
  -webkit-mask-image: var(--processIcon2);
}

.process-card.icon-3 .process-icon {
  mask-image: var(--processIcon3);
  -webkit-mask-image: var(--processIcon3);
}

.process-card.icon-4 .process-icon {
  mask-image: var(--processIcon4);
  -webkit-mask-image: var(--processIcon4);
}

.process-card h3 {
  font-size: 23px;
  color: #5b5b5b;
  font-weight: 400;
  margin-left: auto;
  margin-right: auto;
}

.process-card p {
  color: #7b7b7b;
  font-size: 18px;
  line-height: 1.1;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 0;
  margin-right: auto;
}

.process-card {
  --card-border-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='290' height='282' viewBox='0 0 290 282' fill='none'><path d='M73 1H1V281H289V1H217' stroke='%239B9B9B' stroke-width='2'/></svg>");
}

.process-card:hover {
  transform: translateY(-4px);
  --card-border-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='290' height='282' viewBox='0 0 290 282' fill='none'><path d='M73 1H1V281H289V1H217' stroke='url(%23paint0_linear_2083_1045)' stroke-width='2'/><defs><linearGradient id='paint0_linear_2083_1045' x1='145' y1='1' x2='145' y2='281' gradientUnits='userSpaceOnUse'><stop stop-color='%23D1B3FD'/><stop offset='1' stop-color='%233D296E'/></linearGradient></defs></svg>");
}

.process-card:hover .process-icon {
  filter: brightness(0) saturate(100%) invert(62%) sepia(58%) saturate(451%) hue-rotate(211deg) brightness(111%) contrast(98%);
}

.process-card:hover h3,
.process-card:hover p {
  color: #4a4a4a;
}

@media (max-width: 1200px) {
  #section-0.lp-hero {
    padding: 60px 0 72px;
    min-height: 760px;
  }

  #section-0.lp-hero .lp-hero-card {
    max-width: 560px;
    padding: 24px;
  }

  .hero-control {
    font-size: 20px;
  }

  .hero-submit {
    min-height: 112px;
  }

  .process-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 50px;
  }

  .process-card p {
    margin-bottom: auto;
  }
}

@media (max-width: 1024px) {
  #section-0.lp-hero .lp-hero-copy {
    text-align: center;
    margin: 0 auto;
  }

  #section-0.lp-hero .lp-hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  #section-0.lp-hero .lp-hero-card {
    margin: 0 auto;
  }

  .hero-form-grid {
    grid-template-columns: 1fr;
  }

  .hero-dropdown .hero-control.hero-select-control::after {
    right: 16px;
  }

  .hero-submit {
    width: 100%;
    min-height: 98px;
  }
}

@media (max-width: 768px) {
  #section-0.lp-hero .lp-hero-copy h1 {
    font-size: clamp(30px, 7vw, 44px);
  }

  #section-0.lp-hero .lp-hero-copy p {
    font-size: 18px;
  }

  .hero-term {
    font-size: 15px;
  }

  #section-0.lp-hero .hero-response-copy {
    min-height: 260px;
  }

  .process-section {
    padding: 56px 0;
  }

  .process-section .section-title h2,
  .process-section .section-title p {
    font-size: 24px;
  }

  .process-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process-card {
    max-width: 240px;
    min-height: 240px;
  }

  .process-card h3 {
    font-size: 20px;
  }

  .process-card p {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  #section-0.lp-hero {
    padding: 36px 0 44px;
  }

  #section-0.lp-hero .lp-hero-card {
    padding: 18px;
    border-radius: 22px;
  }

  #section-0.lp-hero .lp-hero-copy h1 {
    margin-bottom: 12px;
  }

  #section-0.lp-hero .lp-hero-copy p {
    font-size: 16px;
  }

  .hero-control {
    height: 56px;
    border-radius: 14px;
    padding-left: 62px;
  }

  .hero-field-icon {
    left: 14px;
    width: 28px;
    height: 28px;
    font-size: 28px;
  }

  .hero-dropdown .hero-control.hero-select-control::after {
    right: 14px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-top-width: 14px;
  }

  .hero-term {
    gap: 10px;
    font-size: 14px;
  }

  .hero-term-box {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .hero-term input:checked + .hero-term-box::after {
    left: 8px;
    top: 3px;
    width: 9px;
    height: 17px;
  }

  .hero-submit {
    min-height: 84px;
    font-size: 24px;
  }

  #section-0.lp-hero .hero-response-copy {
    min-height: 220px;
    gap: 12px;
  }

  #section-0.lp-hero .hero-response-copy h1 {
    font-size: clamp(24px, 7vw, 32px);
  }

  #section-0.lp-hero .hero-response-copy h3 {
    font-size: 16px;
  }

  .process-section .section-title {
    margin-bottom: 28px;
  }

  .process-section .section-title h2 {
    font-size: 22px;
  }

  .process-section .section-title p {
    font-size: 22px;
  }

  .process-card {
    min-height: 220px;
    padding: 16px;
  }

  .process-card .process-icon {
    width: 46px;
    height: 46px;
    top: -28px;
  }

  .process-card h3 {
    font-size: 18px;
  }

  .process-card p {
    font-size: 14px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
  --primaryColorGreen: #5ced85;
  --secondaryColor: #acd190;
  --terciaryColor: #054b2c;
  --standardboxshadow: 0 0 25px var(--primaryColorGreen);
  --serviceSectionBg: url('/img/bg_section_2.png');
  --processIcon1: url('/img/icons/icon_card_1.svg');
  --processIcon2: url('/img/icons/icon_card_2.svg');
  --processIcon3: url('/img/icons/icon_card_3.svg');
  --processIcon4: url('/img/icons/icon_card_4.svg');
}

/* Optional, but needed if you want the extracted sections to keep the same font */
body {
  font-family: 'Montserrat';
}

/* Nav */
.nav {
  background-color: #fff;
  color: #6C6C6C;
}

.nav img {
  max-width: 120px;
  padding-block: 20px;
}

.nav img.img-fluid {
  max-width: 300px;
}

/* Service section */
.service-section {
  padding: 40px 0 60px;
  min-height: 780px;
  background-color: #e6f6ff;
  background-image: var(--serviceSectionBg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  text-align: center;
}

.service-section h2 {
  font-size: 30px;
  color: #6c6c6c;
  max-width: 630px;
  font-weight: 500;
  margin: 0 auto 50px;
}

.service-section p {
  color: #6b6b6b;
  max-width: 1020px;
  margin: 10px auto 0;
  text-wrap: balance;
  font-size: 20px;
}

/* FAQ */
.faq-section {
  padding: 50px 0 70px;
  background-color: #FFFBF2;
  text-align: center;
}

.faq-section h1 {
  font-size: 30px;
  color: #5b5b5b;
  margin-bottom: 26px;
  font-weight: 700;
}

.faq-section .accordion-header {
  margin-bottom: 0;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: transparent;
  border: 2px solid #6c6c6c;
  border-radius: 0 !important;
  text-align: left;
  box-shadow: none;
  overflow: hidden;
}

.faq-item+.faq-item {
  border-top: 2px solid #6c6c6c;
}

.faq-item .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 12px 14px;
  font-size: 20px;
  font-weight: 700;
  color: #6C6C6C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: auto;
  min-height: 0;
}

.faq-item .accordion-button::after {
  display: none;
}

.faq-item .accordion-button:focus {
  box-shadow: none;
}

.faq-item .faq-icon {
  min-width: 40px;
  height: 40px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='%23054B2C'/><path d='M18 26C17.7188 26 17.4688 25.9062 17.2812 25.7188C16.875 25.3438 16.875 24.6875 17.2812 24.3125L21.5625 20L17.2812 15.7188C16.875 15.3438 16.875 14.6875 17.2812 14.3125C17.6562 13.9062 18.3125 13.9062 18.6875 14.3125L23.6875 19.3125C24.0938 19.6875 24.0938 20.3438 23.6875 20.7188L18.6875 25.7188C18.5 25.9062 18.25 26 18 26Z' fill='white'/></svg>");
  position: relative;
}

.faq-item .accordion-button:not(.collapsed) .faq-icon {
  background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='%23ACD190'/><path d='M26 22C26 22.2813 25.9062 22.5313 25.7188 22.7188C25.3438 23.125 24.6875 23.125 24.3125 22.7188L20 18.4375L15.7188 22.7188C15.3438 23.125 14.6875 23.125 14.3125 22.7188C13.9062 22.3438 13.9062 21.6875 14.3125 21.3125L19.3125 16.3125C19.6875 15.9063 20.3438 15.9063 20.7188 16.3125L25.7188 21.3125C25.9062 21.5 26 21.75 26 22Z' fill='white'/></svg>");
}

/* Only keep this if your body can have class="ver_2" */
body.ver_2 .faq-item .faq-icon {
  background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='%233D296E'/><path d='M18 26C17.7188 26 17.4688 25.9062 17.2812 25.7188C16.875 25.3438 16.875 24.6875 17.2812 24.3125L21.5625 20L17.2812 15.7188C16.875 15.3438 16.875 14.6875 17.2812 14.3125C17.6562 13.9062 18.3125 13.9062 18.6875 14.3125L23.6875 19.3125C24.0938 19.6875 24.0938 20.3438 23.6875 20.7188L18.6875 25.7188C18.5 25.9062 18.25 26 18 26Z' fill='white'/></svg>");
}

body.ver_2 .faq-item .accordion-button:not(.collapsed) .faq-icon {
  background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='20' cy='20' r='20' fill='%23D1B3FD'/><path d='M26 22C26 22.2813 25.9062 22.5313 25.7188 22.7188C25.3438 23.125 24.6875 23.125 24.3125 22.7188L20 18.4375L15.7188 22.7188C15.3438 23.125 14.6875 23.125 14.3125 22.7188C13.9062 22.3438 13.9062 21.6875 14.3125 21.3125L19.3125 16.3125C19.6875 15.9063 20.3438 15.9063 20.7188 16.3125L25.7188 21.3125C25.9062 21.5 26 21.75 26 22Z' fill='white'/></svg>");
}

.faq-content {
  padding: 0 14px 12px;
  color: #7b7b7b;
  font-size: 13px;
  line-height: 1.45;
}

/* Modal */
.modal .btn.btn-block {
  background-color: var(--primaryColorGreen);
  width: 200px;
  color: #fff;
  margin: auto;
  transition: all 0.3s ease;
  border-radius: 30px;
}

.modal .btn.btn-block:hover {
  transform: scale(1.1);
  background-color: var(--primaryColorGreen);
}

.modal .modal-content {
  background-color: rgba(255, 255, 255, 1);
  color: #000;
  border-radius: 15px;
  box-shadow: var(--standardboxshadow);
}

.modal button.close {
  color: #000 !important;
}

.modal .modal-header {
  padding: 10px 30px;
}
@media(max-width: 1440px){
    .hero-control{
        font-size: 12px;
    }
    .hero-submit{
        min-height: 50px;
        max-height: 50px;
    }
}
/* Responsive rules that affect the pasted elements */
@media (max-width: 768px) {
  .nav img {
    margin-top: 10px;
    padding-block: 5px;
  }
  .nav * {
    justify-content: center !important;
  }

  .service-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .service-section p {
    font-size: 14px;
  }
}

@media (max-width: 450px) {
  .nav p {
    text-align: center;
    font-size: 12px;
  }

  .nav img.img-fluid {
    margin: 0;
  }

  .nav img:not(.img-fluid) {
    width: 100px;
  }

  .nav img {
    padding: 10px;
  }
}
