/* --- 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);
  padding: 1.5em;
}

.fieldset.form-columns-1 .hs-input{
  width: 10%;
}

.legal-consent-container{
  color: var(--text-secondary);
  margin:8px 0;
  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);
}

.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;
}

.submitted-message{
padding: 50px;
}

.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-accent);
  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: 1px solid var(--border);
  margin-top: 0.5em;
  margin-bottom: 0.7em;
  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(--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);
  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: 16px 30px;
  border: none;
  display: block;
  transition: all .2s ease;
  cursor: pointer;
  margin: 0;
}

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

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

.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: 0 0 8px 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: flex-start;
}

.hs-form input[type='checkbox'] {
  width: auto !important;
  width: 16px;
  height: 22px;
  display: inline;
  cursor: pointer;
  margin-right: 0.75em;
  margin-bottom: 0;
  margin-top: 0.2em;
  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);
  }
  
  
  .legal-consent-container{
  color: var(--text-secondary);
   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(--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);
  }

  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 --- */

.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);
  color: var(--text-tertiary);
  cursor: pointer;
  overflow: hidden;
  transition: padding 0.6s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button svg {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 24px;
  z-index: 9;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button .arr-2 {
  display: none;
}

.primary-button .circle {
  display: none;
}

.primary-button .text {
  position: relative;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.primary-button:hover {
  padding-right: 60px;
  background-color: var(--button-hover);
}

.primary-button:hover .arr-1 {
  opacity: 1;
  transform: translateX(0);
}

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











.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(--text-tertiary);
  color: var(--bg-dark);
  cursor: pointer;
  overflow: hidden;
  transition: padding 0.6s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button svg {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 24px;
  z-index: 9;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button .arr-2 {
  display: none;
}

.secondary-button .circle {
  display: none;
}

.secondary-button .text {
  position: relative;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.secondary-button:hover {
  padding-right: 60px;
  color: var(--text-tertiary);
  background-color: var(--button-hover);
}

.secondary-button:hover .arr-1 {
  opacity: 1;
  transform: translateX(0);
}

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










.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;
  right: 16px;
  z-index: 9;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.tertiary-button .arr-2 {
  display: none;
}

.tertiary-button .circle {
  display: none;
}

.tertiary-button .text {
   text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  position: relative;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.tertiary-button:hover {
  color: var(--button-hover);
  padding-right: 48px;
}

.tertiary-button:hover .arr-1 {
  opacity: 1;
  transform: translateX(0);
}

.tertiary-button:hover .text {

}

.tertiary-button:active {
  scale: 0.95;
}












@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;
    padding: 16px 24px;
  }
  
  .primary-button svg {
    transition: none;
    transform: none;
    opacity: 1;
    position: static;
  }
  
  .primary-button .arr-1 {
    position: static;
  }
  
  .primary-button .circle {
    display: none;
  }
  
  .primary-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
  }

  .primary-button:hover {
    box-shadow: none;
    transform: none;
    padding: 16px 24px;
  }
  
  .primary-button:hover .text {
    margin: 0;
    padding: 0;
    transform: none;
  }
  
  .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);
    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;
    padding: 16px 24px;
  }
  
  .secondary-button svg {
    transition: none;
    transform: none;
    opacity: 1;
    position: static;
  }
  
  .secondary-button .arr-1 {
    position: static;
  }
  
  .secondary-button .circle {
    display: none;
  }
  
  .secondary-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
  }

  .secondary-button:hover {
    box-shadow: none;
    transform: none;
    padding: 16px 24px;
  }
  
  .secondary-button:hover .text {
    margin: 0;
    padding: 0;
    transform: none;
  }
  
  .secondary-button:active {
    scale: 1;
    box-shadow: none;
  }
  
  
  
  
  
  
  
  .tertiary-button{
    display: flex;
    margin: 0 auto;
    gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: none;
    overflow: visible;
    padding: 16px 0;
  }

  .tertiary-button svg {
    transition: none;
    transform: none;
    opacity: 1;
    position: static;
  }

  .tertiary-button .arr-1 {
    position: static;
  }

  .tertiary-button .text {
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    text-align: center;
  }

  .tertiary-button:hover {
    transform: none;
    transition: color 0.3s ease;
    padding: 16px 0;
  }

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

  .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-color: #0085FF; 
  --secondary-color: #3649A9;

  /* Backgrounds Color */
  --bg-light: #FFFFFF; 
  --bg-light-accent: #F2F2F2;
  --bg-highlight: #3649A9;
  --bg-dark: #0D0D0D; 
  --bg-dark-accent: #4A4A4A; 

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

  /* Text Colors */
  --text-primary: #0D0D0D;
  --text-secondary: #4A4A4A;
  --text-tertiary: #FFFFFF;

  /*Button Text Colors */
  --button-default: #0085FF;
  --button-hover: #0047AB;
  --button-pressed: #0047AB;


  /* Gradients */
  --gradient-1: linear-gradient(to right, #CCE7FF 0%, #F0F4FF 100%);
  --gradient-2: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  --gradient-3: linear-gradient(270deg, rgba(240, 249, 255, 0) 0%, #F0F9FF 49.52%);
  --gradient-3-mobile:  linear-gradient(360deg, #F0F9FF 50.48%, rgba(240, 249, 255, 0) 100%);

}

.text-p{
color: var(--text-primary);
}

.text-s{
color: var(--text-secondary);
}

.text-t{
color: var(--text-tertiary);
}



.drop-shadow {
 box-shadow: 0 20px 60px 0 rgba(9, 21, 43, 0.05);
}


.drop-shadow-2 {
 box-shadow: -20px 0 50px 0 rgba(13, 13, 13, 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:  'GT Zirkon', sans-serif;
  --h1-desktop-medium-font-weight: 500; /* Medium */
  --h1-desktop-medium-font-size: 4.5em;
  --h1-desktop-medium-line-height: 120%;
  --h1-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
   /* H1 Mobile */
  --h1-mobile-font-family:  'GT Zirkon', sans-serif;
  --h1-mobile-font-weight: 500; /* Medium */
  --h1-mobile-font-size: 2.125em;
  --h1-mobile-line-height: 120%;
  --h1-mobile-letter-spacing: -0.05em; /* -5% */
  
   /* H1 Highlighted desktop medium */
  --h1-highlight-desktop-medium-font-family:  'GT Zirkon', sans-serif;
  --h1-highlight-desktop-medium-font-weight: 700; /* Bold */
  --h1-highlight-desktop-medium-font-size: 4.5em;
  --h1-highlight-desktop-medium-line-height: 120%;
  --h1-highlight-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
  
   /* H1 Highlighted mobile */
  --h1-highlight-mobile-font-family:  'GT Zirkon', 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.05em; /* -5% */
  
   /*H2 Desktop Medium */
  --h2-desktop-medium-font-family:  'GT Zirkon', sans-serif;
  --h2-desktop-medium-font-weight: 500; /* Medium */
  --h2-desktop-medium-font-size: 3.5em;
  --h2-desktop-medium-line-height: 120%;
  --h2-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
   /* H2 Mobile */
  --h2-mobile-font-family:  'GT Zirkon', sans-serif;
  --h2-mobile-font-weight: 500; /* Medium */
  --h2-mobile-font-size: 1.75em;
  --h2-mobile-line-height: 120%;
  --h2-mobile-letter-spacing: -0.05em; /* -5% */
  
  
   /* H2 Highlighted desktop medium */
  --h2-highlight-desktop-medium-font-family: 'GT Zirkon', sans-serif;
  --h2-highlight-desktop-medium-font-weight: 700; /* Bold */
  --h2-highlight-desktop-medium-font-size: 3.5em;
  --h2-highlight-desktop-medium-line-height: 120%;
  --h2-highlight-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
  
   /* H2 Highlighted mobile */
  --h2-highlight-mobile-font-family: 'GT Zirkon', 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.05em; /* -5% */

  
  /*H3 Desktop Medium */
  --h3-desktop-medium-font-family:  'GT Zirkon', sans-serif;
  --h3-desktop-medium-font-weight: 500; /* Medium */
  --h3-desktop-medium-font-size: 3em;
  --h3-desktop-medium-line-height: 120%;
  --h3-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
   /* H3 Mobile */
  --h3-mobile-font-family:  'GT Zirkon', sans-serif;
  --h3-mobile-font-weight: 500; /* Medium */
  --h3-mobile-font-size: 1.5em;
  --h3-mobile-line-height: 120%;
  --h3-mobile-letter-spacing: -0.05em; /* -5% */
  
  /*H4 Desktop Medium */
  --h4-desktop-medium-font-family:  'GT Zirkon', sans-serif;
  --h4-desktop-medium-font-weight: 500; /* Medium */
  --h4-desktop-medium-font-size: 2em;
  --h4-desktop-medium-line-height: 120%;
  --h4-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
   /* H4 Mobile */
  --h4-mobile-font-family:  'GT Zirkon', sans-serif;
  --h4-mobile-font-weight: 500; /* Medium */
  --h4-mobile-font-size: 1.375em;
  --h4-mobile-line-height: 120%;
  --h4-mobile-letter-spacing: -0.05em; /* -5% */
  
  /*H5 Desktop Medium */
  --h5-desktop-medium-font-family:  'GT Zirkon', sans-serif;
  --h5-desktop-medium-font-weight: 500; /* Medium */
  --h5-desktop-medium-font-size: 1.5em;
  --h5-desktop-medium-line-height: 120%;
  --h5-desktop-medium-letter-spacing: -0.05em; /* -5% */
  
   /* H5 Mobile */
  --h5-mobile-font-family:  'GT Zirkon', sans-serif;
  --h5-mobile-font-weight: 500; /* Medium */
  --h5-mobile-font-size: 1.25em;
  --h5-mobile-line-height: 120%;
  --h5-mobile-letter-spacing: -0.05em; /* -5% */
  
  /* 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: 1.125em;
  --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: 1.125em;
  --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: 1em;
  --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: 1em;
  --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:  'GT Zirkon', 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:   'GT Zirkon', sans-serif;
  --button-text-mobile-font-weight: 500; /* 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 --- */