/* --- Theme base styles --- */

/* --- Font Family --- */
/* Inter */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap'); */



/* --- Generic
This is where reset, normalize & box-sizing styles go.
*/
*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
* Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
* Add the correct box sizing in Firefox.
*/

hr {
  box-sizing: content-box;
  height: 0;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
*/

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
========================================================================== */

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
* Remove the inheritance of text transform in Edge and Firefox.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
  text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
* Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
*/

legend {
  padding: 0;
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
* Add the correct display in Edge and Firefox.
*/

details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
  display: list-item;
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

form {
  background-color: var(--bg-light-accent);
  /* Updated padding to be equivalent to 30px */
  padding: 1.875em;
/*   border: 1px solid var(--border); */
  border-radius: 10px;
}

.submitted-message{
 font-family: var(--paragraph-1-desktop-medium-font-family);
 font-weight: var(--paragraph-1-desktop-medium-font-weight);
 font-size: var(--paragraph-1-desktop-medium-font-size);
 line-height: var(--paragraph-1-desktop-medium-line-height);
 letter-spacing: var(--paragraph-1-desktop-medium-letter-spacing);
}

.hs-form .form-columns-1 .input {
  margin-right: 0 !important;
}

.hs-form .form-columns-1 .hs-input:not([type="checkbox"]) {
  width: 100% !important;
}

.hs-form .form-columns-2 .input,
.form-columns-2 .hs-form-field {
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.hs-form .form-columns-2 {
  display: flex;
  gap: 1em;
}

.hs-form fieldset {
  max-width: 100% !important;
}

.hs-form input:not([type="submit"]),
.hs-form textarea,
.hs-form select {
  background-color: var(--bg-light);
 font-family: var(--paragraph-2-desktop-medium-font-family);
 font-weight: var(--paragraph-2-desktop-medium-font-weight);
 font-size: var(--paragraph-2-desktop-medium-font-size);
 line-height: var(--paragraph-2-desktop-medium-line-height);
 letter-spacing: var(--paragraph-2-desktop-medium-letter-spacing);
  color: var(--text-primary);
  padding: 0.9375em;
  width: 100%;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  box-sizing: border-box;
}

.hs-form select {
  /* Keep these essential properties */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  /* Define the arrow color here. 
    The SVG will inherit this color via the 'currentColor' keyword.
  */
  color: var(--primary-c);

  /* New SVG Background for the dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5 L8 11 L14 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 1em;

  /* We must set a text color for the options, separate from the arrow color */
  /* This assumes you have a variable for primary text color */
  color: var(--text-primary); 
  
  /* Add padding to the right to prevent text from overlapping the arrow */
  padding-right: 2.5em; 
}

.hs-form select:focus {
  border-color: var(--primary-c);
  outline: 0;

  /* New SVG Background for the focused (up arrow) state */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 11 L8 5 L14 11'/%3e%3c/svg%3e");
}

.hs-form select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.hs-form input::placeholder,
.hs-form textarea::placeholder,
.hs-form select::placeholder {
  font-family: var(--paragraph-1-desktop-medium-font-family);
  color: var(--text-secondary);
}

.hs-form label {
  color: var(--text-primary);
  font-family: var(--h5-desktop-medium-font-family);
 font-weight: var(--h5-desktop-medium-font-weight);
 font-size: var(--h5-desktop-medium-font-size);
 line-height: var(--h5-desktop-medium-line-height);
 letter-spacing: var(--h5-desktop-medium-letter-spacing);
  text-align: left;
}

.hs-error-msg {
  font-size: 0.875em !important;
  font-weight: 500;
  text-align: left;
  color: red !important;
}

.hs-form input[type="submit"] {
  font-family: var(--button-text-desktop-medium-font-family);
  font-weight: var(--button-text-desktop-medium-font-weight);
  font-size: var(--button-text-desktop-medium-font-size);
  color: var(--text-tertiary);
  background-color: var(--button-default);
  padding: 1em 1.5em;
  border: none;
  display: block;
  transition: all .2s ease;
  border-radius: 52px;
  cursor: pointer;
  margin: 0;
}

.hs-form .hs_submit {
  display: flex;
  justify-content: center;
}

.hs_submit input[type="submit"]:hover {
  background-color: var(--button-hover-light);
}

.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
  border: 1px solid var(--primary-c);
}

.hs-form textarea {
  resize: none;
  min-height: 9em;
  box-sizing: border-box;
}

.hs-form ul {
  list-style-type: none;
}

.hs-form .inputs-list {
  padding-left: 0px;
    margin: 15px 0 20px 0;
    display: flex;
    gap: 20px;
}

.hs-form .hs-form-checkbox-display span {
   font-family: var(--paragraph-2-desktop-medium-font-family);
 font-weight: var(--paragraph-2-desktop-medium-font-weight);
 font-size: var(--paragraph-2-desktop-medium-font-size);
 line-height: var(--paragraph-2-desktop-medium-line-height);
 letter-spacing: var(--paragraph-2-desktop-medium-letter-spacing);
}

.hs-form .hs-form-checkbox label {
    display: flex;
    align-items: center;
}

.hs-form .hs-form-booleancheckbox-display {
  display: flex;
  align-items: center;
}

.hs-form input[type='checkbox'] {
  width: auto !important;
  width: 16px;
  height: 16px;
  display: inline;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: var(--primary-c);
}

@media (max-width: 768px) {
  
  .hs-form input[type="submit"] {
   width: 100%; 
  }
  
  .hs-form .inputs-list{
  flex-direction: column;
    gap: 10px;
  }
  
  
  .hs-form .hs-form-checkbox-display span {
  font-family: var(--paragraph-2-mobile-font-family);
 font-weight: var(--paragraph-2-mobile-font-weight);
 font-size: var(--paragraph-2-mobile-font-size);
 line-height: var(--paragraph-2-mobile-line-height);
 letter-spacing: var(--paragraph-2-mobile-letter-spacing);
}
  
  
  .hs-form label{
   font-family: var(--h5-mobile-font-family);
 font-weight: var(--h5-mobile-font-weight);
 font-size: var(--h5-mobile-font-size);
 line-height: var(--h5-mobile-line-height);
 letter-spacing: var(--h5-mobile-letter-spacing);
  }
  
  form {
    /* Adjust padding for mobile devices */
    padding: 1.5em 1em;
  }
  .hs-form {
    text-align: left;
  }
  .hs-form .hs_submit {
    display: block;
  }
  .hs-form input,
  .hs-form textarea,
  .hs-form select {
    margin-bottom: 1em;
     font-family: var(--paragraph-2-mobile-font-family);
 font-weight: var(--paragraph-2-mobile-font-weight);
 font-size: var(--paragraph-2-mobile-font-size);
 line-height: var(--paragraph-2-mobile-line-height);
 letter-spacing: var(--paragraph-2-mobile-letter-spacing);
  }
  .hs-form .form-columns-2 {
    flex-direction: column;
    gap: 1em;
  }
  .hs-error-msgs {
    margin-top: -10px;
  }
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  .hs-form .form-columns-1 .input {
    margin-right: 0 !important;
  }
  .hs-form .form-columns-1 .hs-input:not([type="checkbox"]),
  .form-columns-2 .hs-form-field .hs-input {
    width: 100% !important;
  }
  .hs-form .form-columns-2 .input,
  .form-columns-2 .hs-form-field {
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/***************************************************
 * Multistep Form
 ***************************************************/

/* Flag and caret section */
:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-PhoneInput__FlagAndCaret) {
  background-color: var(--bg-light) !important;
  border-right: 0 !important;
  padding: 12px 16px !important;
  position: relative;
  z-index: 999999999999999999999;
  border-radius: 8px 0 0 8px !important;
}

/* Input field styling */
:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-PhoneInput) input[type="tel"] {
  padding: 12px 16px !important;
  border-radius: 0 8px 8px 0 !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-Step__Content) {
  padding: 0 !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput, .hsfc-DateInput) {
  background-color: var(--bg-light) !important;
  color: var(--text-primary) !important;
  font-family: var(--paragraph-1-desktop-medium-font-family) !important;
  font-size: 0.875em !important;
  padding: 12px 16px !important;
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  box-sizing: border-box !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-FieldLabel__RequiredIndicator) {
  color: var(--text-primary) !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-Heading) {
  color: var(--text-primary) !important;
  font-size: 2.25em;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] :is(.hsfc-TextInput, .hsfc-TextareaInput)::placeholder {
  font-family: var(--paragraph-1-desktop-medium-font-family) !important;
  color: var(--text-secondary) !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] .hsfc-FieldLabel {
  color: var(--text-primary) !important;
  font-family: var(--paragraph-2-desktop-medium-font-family) !important;
  font-weight: var(--paragraph-2-desktop-medium-font-weight) !important;
  font-size: var(--paragraph-2-desktop-medium-font-size) !important;
  text-align: left !important;
  margin-bottom: 0.5em !important;
}

:where(.hs-form, .hs-form-html, [data-hs-cos-type="form"], div[id^="hs_form_target_"])
[data-hsfc-id="Renderer"] .hsfc-Button {
  font-family: var(--button-text-desktop-medium-font-family);
  font-weight: var(--button-text-desktop-medium-font-weight);
  font-size: var(--button-text-desktop-medium-font-size);
  color: var(--text-tertiary) !important;
  background-color: var(--button-default) !important;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  margin: 13px 0 0 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

.hs-form [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons .hsfc-Button:hover {
  background-color: var(--button-hover-light) !important;
}

@media (max-width: 768px) {
  .hs-form [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
    padding: 0;
    text-align: left;
  }
  
  .submitted-message{
 font-family: var(--paragraph-1-mobile-font-family);
 font-weight: var(--paragraph-1-mobile-font-weight);
 font-size: var(--paragraph-1-mobile-font-size);
 line-height: var(--paragraph-1-mobile-line-height);
 letter-spacing: var(--paragraph-1-mobile-letter-spacing);
 
  }
  
  .hs-form [data-hsfc-id="Renderer"] .hsfc-Button {
    text-align: center;
    justify-content: center;
  }
}

.hs-form [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: var(--primary-c);
}

.hs-form [data-hsfc-id="Renderer"] .hsfc-Step input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: var(--primary-c);
}

/* Radio button styles inside the multi-step form steps */
.hs-form [data-hsfc-id="Renderer"] .hsfc-Step input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.4375em;
  margin-bottom: 0;
  margin-top: 0;
  accent-color: var(--primary-c);
}

/* --- Objects
Non-cosmetic design patterns including grid and layout classes)
*/


/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12{
/*   min-height: 1px; */
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
  .row-fluid .span1 {
    width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span2 {
    width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span3 {
    width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span4 {
    width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span5 {
    width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span6 {
    width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span7 {
    width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span8 {
    width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span9 {
    width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span10 {
    width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span11 {
    width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
  }
  
}
/* --- Unknown but removes bottom invisible padding */
.body-wrapper {
  height: 100px;
}


.content-wrapper {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* --- Global components --- */

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/




.btn-1 {
  padding: 0.05em;
  border-radius: 0.625em;
  display: inline-block;
  cursor: pointer;
}

.btn-1-inner {
  text-align: center;
  border-radius: 0.625em;
  padding: 1.25em 2.5em;
  background-color: var(--white);
  color: var(--bg);
  transition: .3s;
}

.btn-1:hover {
  background: var(--gradient-1); 
  color: var(--primary);
}

.btn-1:hover .btn-1-inner {
  background-color: #1F282F;
  color: var(--primary);
}


.btn-3 {
  padding: 0.05em;
  border-radius: 0.625em;
  display: block;
  cursor: pointer;
}

.btn-3-inner {
  text-align: center;
  border-radius: 0.625em;
  padding: 1.25em 2.5em;
  background-color: var(--primary);
  color: var(--white);
  transition: .3s;
}

.btn-3:hover {
  background: var(--gradient-1); 
  color: var(--primary);
}
.btn-3:hover .btn-3-inner {
  background-color: #1F282F;
  color: var(--primary);
}


@media (max-width: 768px) {
  .btn-1 {
    display: block;
  }

  .btn-1-inner {
    padding: .75em 0;

  }

  .btn-3-inner {
    padding: .75em 0;

  }
}
.button-wrapper{
display: inline-flex;
      align-self: flex-start;
}
.primary-button {
  font-family: var(--button-text-desktop-medium-font-family);
  font-weight: var(--button-text-desktop-medium-font-weight);
  font-size: var(--button-text-desktop-medium-font-size);
  font-style: Medium;
  line-height: var(--button-text-desktop-medium-line-height);
  letter-spacing: var(--button-text-desktop-medium-letter-spacing);
  text-align: center;
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--button-default);
  border-radius: 52px;
  color: var(--text-tertiary);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button svg {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button .arr-1 {
  right: 24px;
}

.primary-button .arr-2 {
  left: -25%;
}

.primary-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color:  var(--button-hover-dark);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button .text {
  position: relative;
  z-index: 1;
  margin-right: 0;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  padding-right: calc(24px + 12px);
}

a.primary-button:active {
/*   color: black; */
}

.primary-button:hover {
  border-radius: 8px;
  color: var(--gradient-1);
  box-shadow: 0 0 0 12px transparent;
  background-color: var(--bg-light);
}

.primary-button:hover .arr-1 {
  right: -25%;
}

.primary-button:hover .arr-2 {
  left: 18px;
}

.primary-button:hover .text {
  margin-left: 0;
  margin-right: 0;
  transform: translateX(0);
  padding-left: calc(24px + 12px);
  padding-right: 0;
}

.primary-button:active {
  scale: 0.95;
  color: var(--text-tertiary);
}

.primary-button:active .circle {
  background-color: var(--button-pressed);
}

.primary-button:hover .circle {
  width: 100%;
  opacity: 1;
}











.secondary-button {
  font-family: var(--button-text-desktop-medium-font-family);
  font-weight: var(--button-text-desktop-medium-font-weight);
  font-size: var(--button-text-desktop-medium-font-size);
  font-style: Medium;
  line-height: var(--button-text-desktop-medium-line-height);
  letter-spacing: var(--button-text-desktop-medium-letter-spacing);
  text-align: center;
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--bg-dark);
  border-radius: 52px;
  color: var(--text-tertiary);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button svg {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button .arr-1 {
  right: 24px;
}

.secondary-button .arr-2 {
  left: -25%;
}

.secondary-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color:  var(--button-hover-dark);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button .text {
  position: relative;
  z-index: 1;
  margin-right: 0;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  padding-right: calc(24px + 12px);
}

a.secondary-button:active {
/*   color: black; */
}

.secondary-button:hover {
  border-radius: 8px;
  color: var(--gradient-1);
  box-shadow: 0 0 0 12px transparent;
  background-color: var(--bg-light);
}

.secondary-button:hover .arr-1 {
  right: -25%;
}

.secondary-button:hover .arr-2 {
  left: 18px;
}

.secondary-button:hover .text {
  margin-left: 0;
  margin-right: 0;
  transform: translateX(0);
  padding-left: calc(24px + 12px);
  padding-right: 0;
}

.secondary-button:active {
  scale: 0.95;
  color: var(--text-tertiary);
}

.secondary-button:active .circle {
  background-color: var(--button-pressed);
}

.secondary-button:hover .circle {
  width: 100%;
  opacity: 1;
}










.tertiary-button {
  
  font-family: var(--button-text-desktop-medium-font-family);
  font-weight: var(--button-text-desktop-medium-font-weight);
  font-size: var(--button-text-desktop-medium-font-size);
  font-style: Medium;
  line-height: var(--button-text-desktop-medium-line-height);
  letter-spacing: var(--button-text-desktop-medium-letter-spacing);
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  color: var(--button-default);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  padding: 16px 16px 16px 0; 
}
.tertiary-button svg {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tertiary-button .arr-1 {
  right: 16px; 
}
.tertiary-button .arr-2 {
  left: -25%;
}
.tertiary-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tertiary-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  padding-right: calc(24px + 12px);
}
.tertiary-button:hover {
  color: var( --secondary-c);
}
.tertiary-button:hover .arr-1 {
  right: -25%; /* Moves out */
}
.tertiary-button:hover .arr-2 {
  left: 2px;
}


.tertiary-button:hover .text {
  transform: translateX(0);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  padding-left: calc(24px + 12px);
  padding-right: 0;
}
.tertiary-button:active {
  scale: 0.95;
}
.tertiary-button:hover .circle {
  width: 100%;
  opacity: 1;
}












@media (max-width: 768px) {
  .button-wrapper{
display: block;
        align-self: unset;
}
  .animated-button-wrapper {
    display: block;
  }

  .primary-button {
 font-size: var(--button-text-mobile-font-size);
 line-height: var(--button-text-mobile-line-height);
 letter-spacing: var(--button-text-mobile-letter-spacing);
    display: flex;
    gap: 12px;
    width: 100%;
    text-align: center;
    justify-content: center;
    overflow: visible;
    box-shadow: none;
    transition: border-radius 0.6s ease, background-color 0.3s ease, color 0.3s ease;
  }
  
  .primary-button svg {
    transition: none;
    transform: none;
  }
  
  .primary-button .arr-1 {
    right: 24px;
    position: static;
  }
  
  .primary-button .arr-2 {
    display: none;
  }
  
  .primary-button .circle {
    display: none;
  }
  
  .primary-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
  }

  .primary-button:hover {
    border-radius: 8px;
    background-color: var(--secondary-c);
    color: var(--text-tertiary);
    box-shadow: none;
    transform: none;
  }
  
  .primary-button:hover .text {
    margin: 0;
    padding: 0;
    transform: none;
  }
  
  /* Simple active state */
  .primary-button:active {
    scale: 1;
    box-shadow: none;
  }
  
  
  
  
  
  
  
   .secondary-button {
 font-size: var(--button-text-mobile-font-size);
 line-height: var(--button-text-mobile-line-height);
 letter-spacing: var(--button-text-mobile-letter-spacing);
/*      background-color: var( --button-hover-dark);
     color:var(--text-primary); */
/*      border: 1px solid var(--border); */
    display: flex;
    gap: 12px;
    width: 100%;
    text-align: center;
    justify-content: center;
    overflow: visible;
    box-shadow: none;
    transition: border-radius 0.6s ease, background-color 0.3s ease, color 0.3s ease;
  }
  
  .secondary-button svg {
    transition: none;
    transform: none;
  }
  
  .secondary-button .arr-1 {
    right: 24px;
    position: static;
  }
  
  .secondary-button .arr-2 {
    display: none;
  }
  
  .secondary-button .circle {
    display: none;
  }
  
  .secondary-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
  }

  .secondary-button:hover {
    border-radius: 8px;
    background-color: var(--secondary-c);
    color: var(--text-tertiary);
    box-shadow: none;
    transform: none;
  }
  
  .secondary-button:hover .text {
    margin: 0;
    padding: 0;
    transform: none;
  }
  
  .secondary-button:active {
    scale: 1;
    box-shadow: none;
  }
  
  
  
  
  
  
  
   .tertiary-button{
/*     display: block;
    width: auto; */
  }
  
  .tertiary-button {
  display: flex;
  margin: 0 auto;
    gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Remove transitions and animations */
  transition: none;
  overflow: visible;
  padding: 16px 0;
}

/* Keep icons visible but remove animations */
.tertiary-button svg {
  transition: none;
  transform: none;
}

/* Position the visible arrow statically */
.tertiary-button .arr-1 {
  right: 16px;
  position: static;
}

/* Hide the second arrow completely */
.tertiary-button .arr-2 {
  display: none;
}

/* Hide the circle animation element */
.tertiary-button .circle {
  display: none;
}

/* Center the text and remove all spacing adjustments */
.tertiary-button .text {
  margin: 0;
  padding: 0;
  transform: none;
  transition: none;
  text-align: center;
}

/* Remove hover effects */
.tertiary-button:hover {
  transform: none;
  transition: color 0.3s ease;
}

.tertiary-button:hover .text {
  margin: 0;
  padding: 0;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Simple active state */
.tertiary-button:active {
  scale: 1;
}

  
  
  
  
  
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


:root {
  /* Brand Color */
  --primary-c: #1742FF; 
  --secondary-c: #7A38FF;

  /* Backgrounds Color */
  --bg-light: #FFFFFF; 
  --bg-light-accent: #F5F7FF;
  --bg-light-accent-2: #FCFFFA;
  --bg-dark: #132C48; 
  --bg-dark-accent: #8895A3; 

  /* Border Color */
  --border: #C4CAD1;

  /* Text Colors */
  --text-primary: #132C48;
  --text-secondary: #4E6176;
  --text-tertiary: #FFFFFF;

  /*Button Text Colors */
  --button-default: #1742FF;
  --button-hover-light: #7A38FF;
  --button-hover-dark: #FFFFFF;
  --button-pressed: #7A38FF;


  /* Gradients */
  --gradient-1: linear-gradient(90deg, #7A38FF 0%, #1742FF 100%);
  --gradient-2: linear-gradient(180deg, #132C48 0%, rgba(19, 44, 72, 0) 100%);
  --gradient-3: linear-gradient(to right, rgba(245, 247, 255, 0) 0%, #1742FF 100%);
}


.drop-shadow {
  box-shadow: 0px 20px 60px rgba(9, 21, 43, 0.05);
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');


:root {
    /*H1 Desktop Medium */
  --h1-desktop-medium-font-family:  'Alexandria', sans-serif;
  --h1-desktop-medium-font-weight: 500; /* Medium */
  --h1-desktop-medium-font-size: 3.75em;
  --h1-desktop-medium-line-height: 120%;
  --h1-desktop-medium-letter-spacing: 0%;
  
   /* H1 Mobile */
  --h1-mobile-font-family:  'Alexandria', sans-serif;
  --h1-mobile-font-weight: 500; /* Medium */
  --h1-mobile-font-size: 2.125em;
  --h1-mobile-line-height: 120%;
  --h1-mobile-letter-spacing: 0%;
  
   /* H1 Highlighted desktop medium */
  --h1-highlight-desktop-medium-font-family:  'Bricolage Grotesque', sans-serif;
  --h1-highlight-desktop-medium-font-weight: 700; /* Bold */
  --h1-highlight-desktop-medium-font-size: 3.75em;
  --h1-highlight-desktop-medium-line-height: 120%;
  --h1-highlight-desktop-medium-letter-spacing: 0%;
  
  
   /* H1 Highlighted mobile */
  --h1-highlight-mobile-font-family:  'Bricolage Grotesque', sans-serif;
  --h1-highlight-mobile-font-weight: 700; /* Bold */
  --h1-highlight-mobile-font-size: 2.125em;
  --h1-highlight-mobile-line-height: 120%;
  --h1-highlight-mobile-letter-spacing: 0%;
  
   /*H2 Desktop Medium */
  --h2-desktop-medium-font-family:  'Alexandria', sans-serif;
  --h2-desktop-medium-font-weight: 500; /* Medium */
  --h2-desktop-medium-font-size: 3em;
  --h2-desktop-medium-line-height: 120%;
  --h2-desktop-medium-letter-spacing: 0%;
  
   /* H2 Mobile */
  --h2-mobile-font-family:  'Alexandria', sans-serif;
  --h2-mobile-font-weight: 500; /* Medium */
  --h2-mobile-font-size: 1.75em;
  --h2-mobile-line-height: 120%;
  --h2-mobile-letter-spacing: 0%;
  
  
   /* H2 Highlighted desktop medium */
  --h2-highlight-desktop-medium-font-family:  'Bricolage Grotesque', sans-serif;
  --h2-highlight-desktop-medium-font-weight: 700; /* Bold */
  --h2-highlight-desktop-medium-font-size: 3em;
  --h2-highlight-desktop-medium-line-height: 120%;
  --h2-highlight-desktop-medium-letter-spacing: 0%;
  
  
   /* H2 Highlighted mobile */
  --h2-highlight-mobile-font-family:  'Bricolage Grotesque', sans-serif;
  --h2-highlight-mobile-font-weight: 700; /* Bold */
  --h2-highlight-mobile-font-size: 1.75em;
  --h2-highlight-mobile-line-height: 120%;
  --h2-highlight-mobile-letter-spacing: 0%;

  
  /*H3 Desktop Medium */
  --h3-desktop-medium-font-family:  'Alexandria', sans-serif;
  --h3-desktop-medium-font-weight: 500; /* Medium */
  --h3-desktop-medium-font-size: 2.5em;
  --h3-desktop-medium-line-height: 120%;
  --h3-desktop-medium-letter-spacing: 0%;
  
   /* H3 Mobile */
  --h3-mobile-font-family:  'Alexandria', sans-serif;
  --h3-mobile-font-weight: 500; /* Medium */
  --h3-mobile-font-size: 1.5em;
  --h3-mobile-line-height: 120%;
  --h3-mobile-letter-spacing: 0%;
  
  /*H4 Desktop Medium */
  --h4-desktop-medium-font-family:  'Alexandria', sans-serif;
  --h4-desktop-medium-font-weight: 500; /* Medium */
  --h4-desktop-medium-font-size: 1.25em;
  --h4-desktop-medium-line-height: 120%;
  --h4-desktop-medium-letter-spacing: 0%;
  
   /* H4 Mobile */
  --h4-mobile-font-family:  'Alexandria', sans-serif;
  --h4-mobile-font-weight: 500; /* Medium */
  --h4-mobile-font-size: 1.125em;
  --h4-mobile-line-height: 120%;
  --h4-mobile-letter-spacing: 0%;
  
  /*H5 Desktop Medium */
  --h5-desktop-medium-font-family:  'Alexandria', sans-serif;
  --h5-desktop-medium-font-weight: 500; /* Medium */
  --h5-desktop-medium-font-size: 1em;
  --h5-desktop-medium-line-height: 120%;
  --h5-desktop-medium-letter-spacing: 0%;
  
   /* H5 Mobile */
  --h5-mobile-font-family:  'Alexandria', sans-serif;
  --h5-mobile-font-weight: 500; /* Medium */
  --h5-mobile-font-size: 1em;
  --h5-mobile-line-height: 120%;
  --h5-mobile-letter-spacing: 0%;
  
  /* Body 1 */
  --paragraph-1-desktop-medium-font-family:  'Poppins', sans-serif;
  --paragraph-1-desktop-medium-font-weight: 400; /* Regular */
  --paragraph-1-desktop-medium-font-size: 1em;
  --paragraph-1-desktop-medium-line-height: 150%;
  --paragraph-1-desktop-medium-letter-spacing: 0%;
  
  /* Body 1 Mobile */
  --paragraph-1-mobile-font-family:  'Poppins', sans-serif;
  --paragraph-1-mobile-font-weight: 400; /* Regular */
  --paragraph-1-mobile-font-size: 1em;
  --paragraph-1-mobile-line-height: 150%;
  --paragraph-1-mobile-letter-spacing: 0%;
  
  
  /* Body 1 Highlighted*/
  --paragraph-1-desktop-medium-highlight-font-family:  'Poppins', sans-serif;
  --paragraph-1-desktop-medium-highlight-font-weight: 600; /* Semibold */
  --paragraph-1-desktop-medium-highlight-font-size: 1em;
  --paragraph-1-desktop-medium-highlight-line-height: 150%;
  --paragraph-1-desktop-medium-highlight-letter-spacing: 0%;
  
  /* Body 1 Highlighted Mobile */
  --paragraph-1-mobile-highlight-font-family:  'Poppins', sans-serif;
  --paragraph-1-mobile-highlight-font-weight: 600; /* Semibold */
  --paragraph-1-mobile-highlight-font-size: 1em;
  --paragraph-1-mobile-highlight-line-height: 150%;
  --paragraph-1-mobile-highlight-letter-spacing: 0%;
  
  
   /* Body 2 */
  --paragraph-2-desktop-medium-font-family:  'Poppins', sans-serif;
  --paragraph-2-desktop-medium-font-weight: 400; /* Regular */
  --paragraph-2-desktop-medium-font-size: 0.875em;
  --paragraph-2-desktop-medium-line-height: 150%;
  --paragraph-2-desktop-medium-letter-spacing: 0%;
  
  /* Body 2 Mobile */
  --paragraph-2-mobile-font-family:  'Poppins', sans-serif;
  --paragraph-2-mobile-font-weight: 400; /* Regular */
  --paragraph-2-mobile-font-size: 0.875em;
  --paragraph-2-mobile-line-height: 150%;
  --paragraph-2-mobile-letter-spacing: 0%;
  
  
  /* Body 2 Highlighted*/
  --paragraph-2-desktop-medium-highlight-font-family:  'Poppins', sans-serif;
  --paragraph-2-desktop-medium-highlight-font-weight: 600; /* Semibold */
  --paragraph-2-desktop-medium-highlight-font-size: 0.875em;
  --paragraph-2-desktop-medium-highlight-line-height: 150%;
  --paragraph-2-desktop-medium-highlight-letter-spacing: 0%;
  
  /* Body 2 highlighted Mobile */
  --paragraph-2-mobile-highlight-font-family:  'Poppins', sans-serif;
  --paragraph-2-mobile-highlight-font-weight: 600; /* Semibold */
  --paragraph-2-mobile-highlight-font-size: 0.875em;
  --paragraph-2-mobile-highlight-line-height: 150%;
  --paragraph-2-mobile-highlight-letter-spacing: 0%;
 
  
  /* Button Text Desktop Medium */
  --button-text-desktop-medium-font-family:  'Alexandria', sans-serif;
  --button-text-desktop-medium-font-weight: 500; /* Medium */
  --button-text-desktop-medium-font-size: 1.125em;
  --button-text-desktop-medium-line-height: 100%;
  --button-text-desktop-medium-letter-spacing: 0%;
  
  /* Button Text Mobile */
  --button-text-mobile-font-family:  'Alexandria', sans-serif;
  --button-text-mobile-font-weight: 600; /* Medium */
  --button-text-mobile-font-size: 1em;
  --button-text-mobile-line-height: 100%;
  --button-text-mobile-letter-spacing: 0%;
  
}

a {
  text-decoration: none;
}

p,h1,h2,h3,h4,h5,h6 {
  margin: 0;
}


h1 {
 font-family: var(--h1-desktop-medium-font-family);
 font-weight: var(--h1-desktop-medium-font-weight);
 font-size: var(--h1-desktop-medium-font-size);
 line-height: var(--h1-desktop-medium-line-height);
 letter-spacing: var(--h1-desktop-medium-letter-spacing);
}

.h1-font {
  font-family: var(--h1-desktop-medium-font-family);
 font-weight: var(--h1-desktop-medium-font-weight);
 font-size: var(--h1-desktop-medium-font-size);
 line-height: var(--h1-desktop-medium-line-height);
 letter-spacing: var(--h1-desktop-medium-letter-spacing);
}



.h1-highlight {
  font-family: var(--h1-highlight-desktop-medium-font-family);
 font-weight: var(--h1-highlight-desktop-medium-font-weight);
 font-size: var(--h1-highlight-desktop-medium-font-size);
 line-height: var(--h1-highlight-desktop-medium-line-height);
 letter-spacing: var(--h1-highlight-desktop-medium-letter-spacing);
}


h2 {
 font-family: var(--h2-desktop-medium-font-family);
 font-weight: var(--h2-desktop-medium-font-weight);
 font-size: var(--h2-desktop-medium-font-size);
 line-height: var(--h2-desktop-medium-line-height);
 letter-spacing: var(--h2-desktop-medium-letter-spacing);
}

.h2-font {
  font-family: var(--h2-desktop-medium-font-family);
 font-weight: var(--h2-desktop-medium-font-weight);
 font-size: var(--h2-desktop-medium-font-size);
 line-height: var(--h2-desktop-medium-line-height);
 letter-spacing: var(--h2-desktop-medium-letter-spacing);
}

.h2-highlight {
  font-family: var(--h2-highlight-desktop-medium-font-family);
 font-weight: var(--h2-highlight-desktop-medium-font-weight);
 font-size: var(--h2-highlight-desktop-medium-font-size);
 line-height: var(--h2-highlight-desktop-medium-line-height);
 letter-spacing: var(--h2-highlight-desktop-medium-letter-spacing);
}
  


h3 {
 font-family: var(--h3-desktop-medium-font-family);
 font-weight: var(--h3-desktop-medium-font-weight);
 font-size: var(--h3-desktop-medium-font-size);
 line-height: var(--h3-desktop-medium-line-height);
 letter-spacing: var(--h3-desktop-medium-letter-spacing);
}

.h3-font {
 font-family: var(--h3-desktop-medium-font-family);
 font-weight: var(--h3-desktop-medium-font-weight);
 font-size: var(--h3-desktop-medium-font-size);
 line-height: var(--h3-desktop-medium-line-height);
 letter-spacing: var(--h3-desktop-medium-letter-spacing);
}


h4 {
 font-family: var(--h4-desktop-medium-font-family);
 font-weight: var( --h4-desktop-medium-font-weight);
 font-size: var(--h4-desktop-medium-font-size);
 line-height: var(--h4-desktop-medium-line-height);
 letter-spacing: var(--h4-desktop-medium-letter-spacing);
}

.h4-font {
 font-family: var(--h4-desktop-medium-font-family);
 font-weight: var( --h4-desktop-medium-font-weight);
 font-size: var(--h4-desktop-medium-font-size);
 line-height: var(--h4-desktop-medium-line-height);
 letter-spacing: var(--h4-desktop-medium-letter-spacing);
}

  

h5 {
 font-family: var(--h5-desktop-medium-font-family);
 font-weight: var(--h5-desktop-medium-font-weight);
 font-size: var(--h5-desktop-medium-font-size);
 line-height: var(--h5-desktop-medium-line-height);
 letter-spacing: var(--h5-desktop-medium-letter-spacing);
}

.h5-font {
 font-family: var(--h5-desktop-medium-font-family);
 font-weight: var(--h5-desktop-medium-font-weight);
 font-size: var(--h5-desktop-medium-font-size);
 line-height: var(--h5-desktop-medium-line-height);
 letter-spacing: var(--h5-desktop-medium-letter-spacing);
}


.body-1 {
 font-family: var(--paragraph-1-desktop-medium-font-family);
 font-weight: var(--paragraph-1-desktop-medium-font-weight);
 font-size: var(--paragraph-1-desktop-medium-font-size);
 line-height: var(--paragraph-1-desktop-medium-line-height);
 letter-spacing: var(--paragraph-1-desktop-medium-letter-spacing);
}


.body-1-highlight {
 font-family: var(--paragraph-1-desktop-medium-highlight-font-family);
 font-weight: var(--paragraph-1-desktop-medium-highlight-font-weight);
 font-size: var(--paragraph-1-desktop-medium-highlight-font-size);
 line-height: var(--paragraph-1-desktop-medium-highlight-line-height);
 letter-spacing: var(--paragraph-1-desktop-medium-highlight-letter-spacing);
}


.body-2 {
 font-family: var(--paragraph-2-desktop-medium-font-family);
 font-weight: var(--paragraph-2-desktop-medium-font-weight);
 font-size: var(--paragraph-2-desktop-medium-font-size);
 line-height: var(--paragraph-2-desktop-medium-line-height);
 letter-spacing: var(--paragraph-2-desktop-medium-letter-spacing);
}

.body-2-highlight {
 font-family: var(--paragraph-2-desktop-medium-highlight-font-family);
 font-weight: var(--paragraph-2-desktop-medium-highlight-font-weight);
 font-size: var(--paragraph-2-desktop-medium-highlight-font-size);
 line-height: var(--paragraph-2-desktop-medium-highlight-line-height);
 letter-spacing: var(--paragraph-2-desktop-medium-highlight-letter-spacing);
}


.button {
 font-family: var(--button-text-desktop-medium-font-family);
 font-weight: var(--button-text-desktop-medium-font-weight);
 font-size: var(--button-text-desktop-medium-font-size);
 line-height: var(--button-text-desktop-medium-line-height);
 letter-spacing: var(--button-text-desktop-medium-letter-spacing);
  text-align: center;
}
  





/* Mobile Styles */
@media (max-width: 768px) {


  h1 {
 font-family: var(--h1-mobile-font-family);
 font-weight: var(--h1-mobile-font-weight);
 font-size: var(--h1-mobile-font-size);
 line-height: var(--h1-mobile-line-height);
 letter-spacing: var(--h1-mobile-letter-spacing);
}

.h1-font {
  font-family: var(--h1-mobile-font-family);
 font-weight: var(--h1-mobile-font-weight);
 font-size: var(--h1-mobile-font-size);
 line-height: var(--h1-mobile-line-height);
 letter-spacing: var(--h1-mobile-letter-spacing);
}

  
  .h1-highlight {
  font-family: var(--h1-highlight-mobile-font-family);
 font-weight: var(--h1-highlight-mobile-font-weight);
 font-size: var(--h1-highlight-mobile-font-size);
 line-height: var(--h1-highlight-mobile-line-height);
 letter-spacing: var(--h1-highlight-mobile-letter-spacing);
}
  
    h2 {
 font-family: var(--h2-mobile-font-family);
 font-weight: var(--h2-mobile-font-weight);
 font-size: var(--h2-mobile-font-size);
 line-height: var(--h2-mobile-line-height);
 letter-spacing: var(--h2-mobile-letter-spacing);
}

.h2-font {
  font-family: var(--h2-mobile-font-family);
 font-weight: var(--h2-mobile-font-weight);
 font-size: var(--h2-mobile-font-size);
 line-height: var(--h2-mobile-line-height);
 letter-spacing: var(--h2-mobile-letter-spacing);
}

  
  .h2-highlight {
  font-family: var(--h2-highlight-mobile-font-family);
 font-weight: var(--h2-highlight-mobile-font-weight);
 font-size: var(--h2-highlight-mobile-font-size);
 line-height: var(--h2-highlight-mobile-line-height);
 letter-spacing: var(--h2-highlight-mobile-letter-spacing);
}
  
  
  h3 {
 font-family: var(--h3-mobile-font-family);
 font-weight: var(--h3-mobile-font-weight);
 font-size: var(--h3-mobile-font-size);
 line-height: var(--h3-mobile-line-height);
 letter-spacing: var(--h3-mobile-letter-spacing);
}
  

  .h3-font {
 font-family: var(--h3-mobile-font-family);
 font-weight: var(--h3-mobile-font-weight);
 font-size: var(--h3-mobile-font-size);
 line-height: var(--h3-mobile-line-height);
 letter-spacing: var(--h3-mobile-letter-spacing);
}
  
 h4 {
 font-family: var(--h4-mobile-font-family);
 font-weight: var( --h4-mobile-font-weight);
 font-size: var(--h4-mobile-font-size);
 line-height: var(--h4-mobile-line-height);
 letter-spacing: var(--h4-mobile-letter-spacing);
}

  
.h4-font {
 font-family: var(--h4-mobile-font-family);
 font-weight: var( --h4-mobile-font-weight);
 font-size: var(--h4-mobile-font-size);
 line-height: var(--h4-mobile-line-height);
 letter-spacing: var(--h4-mobile-letter-spacing);
}

  
  h5 {
 font-family: var(--h5-mobile-font-family);
 font-weight: var(--h5-mobile-font-weight);
 font-size: var(--h5-mobile-font-size);
 line-height: var(--h5-mobile-line-height);
 letter-spacing: var(--h5-mobile-letter-spacing);
}
  
  
 .h5-font {
 font-family: var(--h5-mobile-font-family);
 font-weight: var(--h5-mobile-font-weight);
 font-size: var(--h5-mobile-font-size);
 line-height: var(--h5-mobile-line-height);
 letter-spacing: var(--h5-mobile-letter-spacing);
}
  
.body-1 {
 font-family: var(--paragraph-1-mobile-font-family);
 font-weight: var(--paragraph-1-mobile-font-weight);
 font-size: var(--paragraph-1-mobile-font-size);
 line-height: var(--paragraph-1-mobile-line-height);
 letter-spacing: var(--paragraph-1-mobile-letter-spacing);
} 
  
  
  .body-1-highlight {
 font-family: var(--paragraph-1-mobile-highlight-font-family);
 font-weight: var(--paragraph-1-mobile-highlight-font-weight);
 font-size: var(--paragraph-1-mobile-highlight-font-size);
 line-height: var(--paragraph-1-mobile-highlight-line-height);
 letter-spacing: var(--paragraph-1-mobile-highlight-letter-spacing);
}
  
.body-2 {
 font-family: var(--paragraph-2-mobile-font-family);
 font-weight: var(--paragraph-2-mobile-font-weight);
 font-size: var(--paragraph-2-mobile-font-size);
 line-height: var(--paragraph-2-mobile-line-height);
 letter-spacing: var(--paragraph-2-mobile-letter-spacing);
}

.body-2-highlight {
 font-family: var(--paragraph-2-mobile-highlight-font-family);
 font-weight: var(--paragraph-2-mobile-highlight-font-weight);
 font-size: var(--paragraph-2-mobile-highlight-font-size);
 line-height: var(--paragraph-2-mobile-highlight-line-height);
 letter-spacing: var(--paragraph-2-mobile-highlight-letter-spacing);
}
  
  .button {
 font-family: var(--button-text-mobile-font-family);
 font-weight: var(--button-text-mobile-font-weight);
 font-size: var(--button-text-mobile-font-size);
 line-height: var(--button-text-mobile-line-height);
 letter-spacing: var(--button-text-mobile-letter-spacing);
}
  
}




/* .container {font-size: 16px;}
@media (max-width: 1440px) { .container { font-size: 12.8px; } }
@media (max-width: 1300px) { .container { font-size: 12px; } }
@media (max-width: 1200px) { .container { font-size: 11px; } }
@media (max-width: 1100px) { .container { font-size: 10px; } }
@media (max-width: 1000px) { .container { font-size: 9.5px; } }
@media (max-width: 900px) { .container { font-size: 9px; } }
@media (max-width: 768px) { .container { font-size: 16px; } }
 */

 .container {
    font-size: 16px;
  } 

 @media (max-width: 1200px) { .container { font-size: 14.5px; } }
  @media (max-width: 1100px) { .container { font-size: 12.5px; } }
  @media (max-width: 1000px) { .container { font-size: 11px; } }
  @media (max-width: 900px)  { .container { font-size: 10px; } }
  @media (max-width: 800px)  { .container { font-size: 10px; } }

  @media (max-width: 768px) {
    .container { font-size: 16px; }
}


/* --- Utilities --- */
/* common-Macro */
/* --- Macro CSS --- */