:root {
  --c1: #A88BD8;
  --c2: #fff9f1;
  --c3: #FAB53F;
  --c4: #3A245C;
  --c5: #ffffff;
  --c6: #f4f4f4;
  color: var(--c4);
  --base-font-size: 10px;
  --module-spacing: 80px;
  --font-feeling-passionate: 'Feeling Passionate';
  --font-archivo-narrow: 'Archivo Narrow';
  --font-soria: 'Soria';
  --radius: 32px ;
  --primary-button-bg-color: var(--c3);
  --primary-button-text-color: var(--c4);
  --primary-button-border-color: var(--c3);
  --primary-button-hover-bg-color: var(--c1);
  --primary-button-hover-text-color: var(--c5);
  --primary-button-hover-border-color: var(--c1);
  --primary-button-padding-vertical: large;
  --primary-button-padding-horizontal: extraLarge;
  --primary-button-border-radius: 999px;
  --primary-button-border-style: solid;
  --primary-button-border-width: 2px;
  --primary-button-hover-border-style: solid;
  --primary-button-hover-border-width: 2px;
  --primary-button-transition: transform 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
  --primary-button-hover-transform: scale(1.05);
  --secondary-button-bg-color: transparent;
  --secondary-button-text-color: var(--c1);
  --secondary-button-border-color: var(--c1);
  --secondary-button-padding-vertical: medium;
  --secondary-button-padding-horizontal: medium;
  --secondary-button-border-radius: var(--radius, 0px);
  --secondary-button-border-style: solid;
  --secondary-button-border-width: 2px;
  --secondary-button-hover-transform: none;
  --tertiary-button-bg-color: transparent;
  --tertiary-button-text-color: var(--c4);
  --tertiary-button-border-color: var(--c4);
  --tertiary-button-padding-vertical: medium;
  --tertiary-button-padding-horizontal: medium;
  --tertiary-button-border-radius: var(--radius, 0px);
  --tertiary-button-border-style: solid;
  --tertiary-button-border-width: 0 0 2px 0;
  --tertiary-button-hover-transform: none;
  --navigation-button-bg-color: var(--c1);
  --navigation-button-text-color: var(--c4);
  --navigation-button-border-color: transparent;
  --navigation-button-padding-vertical: medium;
  --navigation-button-padding-horizontal: medium;
  --navigation-button-border-radius: var(--radius, 0px);
  --navigation-button-border-style: none;
  --navigation-button-hover-transform: none;

  --module-border: none;
  --module-border-color: var(--c4);
  --module-border-width: 2px;
  --input-border: none;
  --input-border-color: var(--c4);
  --input-border-width: 2px;
  --shadow: none;
}

@font-face {
  font-family: 'Feeling Passionate';
  src: url('/api/documents/file/Feeling_Passionate.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo Narrow';
  src: url('/api/documents/file/ArchivoNarrow-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soria';
  src: url('/api/documents/file/Soria%20font.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* Typography Styles */

.nv-h1 {
  font-family: var(--font-feeling-passionate);
  font-weight: 400;
  line-height: 1.25;
  font-size: calc(var(--base-font-size) * 5.6);
  letter-spacing: normal;
}

.nv-h2 {
  font-family: var(--font-soria);
  font-weight: 400;
  line-height: 1.25;
  font-size: calc(var(--base-font-size) * 4.2);
  letter-spacing: normal;
}

.nv-h3 {
  font-family: var(--font-soria);
  font-weight: 400;
  line-height: 1.25;
  font-size: calc(var(--base-font-size) * 2.6);
  letter-spacing: normal;
}

.nv-h4, .nv-th {
  font-family: var(--font-archivo-narrow);
  font-weight: 600;
  line-height: 1.25;
  font-size: calc(var(--base-font-size) * 2.2);
  letter-spacing: normal;
}

.nv-h5 {
  font-family: var(--font-archivo-narrow);
  font-weight: 600;
  line-height: 1.5;
  font-size: calc(var(--base-font-size) * undefined);
  letter-spacing: normal;
}

.nv-h6 {
  font-family: var(--font-archivo-narrow);
  font-weight: 600;
  line-height: 1.5;
  font-size: calc(var(--base-font-size) * undefined);
  letter-spacing: normal;
}

.nv-p, li, .nv-td {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1.5;
  font-size: calc(var(--base-font-size) * 1.8);
  letter-spacing: normal;
}

.nv-ps {
  
  font-weight: 400;
  line-height: 1.5;
  font-size: calc(var(--base-font-size) * 1.6);
  letter-spacing: normal;
}

.primaryButtonFont {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1;
  font-size: calc(var(--base-font-size) * 2);
  letter-spacing: normal;
}

.secondaryButtonFont {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1;
  font-size: calc(var(--base-font-size) * 2);
  letter-spacing: normal;
}

.tertiaryButtonFont {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1;
  font-size: calc(var(--base-font-size) * 2);
  letter-spacing: normal;
}

.navigationButtonFont {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1;
  font-size: calc(var(--base-font-size) * 2);
  letter-spacing: normal;
}

.headerNavigationButtonFont {
  font-family: var(--font-archivo-narrow);
  font-weight: 400;
  line-height: 1;
  font-size: calc(var(--base-font-size) * 3.2);
  letter-spacing: normal;
}


/* Responsive Typography Styles */


@media (min-width: 480px) {
  .headerNavigationButtonFont {
    font-size: calc(var(--base-font-size) * 4);
  }
}

@media (min-width: 768px) {
  .nv-h1 {
    font-size: calc(var(--base-font-size) * 7.2);
  }
  .nv-h2 {
    font-size: calc(var(--base-font-size) * 5.6);
  }
  .nv-h3 {
    font-size: calc(var(--base-font-size) * 3.2);
  }
  .nv-h4, .nv-th {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .nv-h5 {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .nv-h6 {
    font-size: calc(var(--base-font-size) * 2);
  }
  .primaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .secondaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .tertiaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .navigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.2);
  }
}

@media (min-width: 992px) {
  .nv-p, li, .nv-td {
    font-size: calc(var(--base-font-size) * 2);
  }
  .nv-ps {
    font-size: calc(var(--base-font-size) * 1.8);
  }
  .headerNavigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.2);
  }
}

@media (min-width: 1280px) {
  .nv-h1 {
    font-size: calc(var(--base-font-size) * 8);
  }
  .nv-h2 {
    font-size: calc(var(--base-font-size) * 6);
  }
  .nv-h3 {
    font-size: calc(var(--base-font-size) * 3.6);
  }
  .nv-h4, .nv-th {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .nv-h5 {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .nv-h6 {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .primaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .secondaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .tertiaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .navigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .headerNavigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.4);
  }
}

@media (min-width: 1921px) {
  .nv-p, li, .nv-td {
    font-size: calc(var(--base-font-size) * 2.2);
  }
  .nv-ps {
    font-size: calc(var(--base-font-size) * 2);
  }
  .nv-h1 {
    font-size: calc(var(--base-font-size) * 8.8);
  }
  .nv-h2 {
    font-size: calc(var(--base-font-size) * 6.8);
  }
  .nv-h3 {
    font-size: calc(var(--base-font-size) * 4);
  }
  .nv-h4, .nv-th {
    font-size: calc(var(--base-font-size) * 2.8);
  }
  .nv-h5 {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .nv-h6 {
    font-size: calc(var(--base-font-size) * 2.4);
  }
  .primaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .secondaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .tertiaryButtonFont {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .navigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.6);
  }
  .headerNavigationButtonFont {
    font-size: calc(var(--base-font-size) * 2.6);
  }
}

/* Responsive Border Radius Styles */


/* BUTTON STYLES */

/* Primary Button */

.primaryButton {
  background-color: var(--c3);
  color: var(--c4);
  border-color: var(--c3);
  padding: 16px 32px;
  border-radius: 999px;
  border-style: solid;
  border-width: 2px;
  transition: transform 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
}

.primaryButton:hover {
  background-color: var(--c1);
  color: var(--c5);
  border-color: var(--c1);
  border-style: solid;
  border-width: 2px;
  transform: scale(1.05);
}

/* Secondary Button */

.secondaryButton {
  background-color: transparent;
  color: var(--c1);
  border-color: var(--c1);
  padding: 12px 16px;
  border-radius: var(--radius, 0px);
  border-style: solid;
  border-width: 2px;
}

/* Tertiary Button */

.tertiaryButton {
  background-color: transparent;
  color: var(--c4);
  border-color: var(--c4);
  padding: 12px 16px;
  border-radius: var(--radius, 0px);
  border-style: solid;
  border-width: 0 0 2px 0;
}

/* Navigation Button */

.navigationButton {
  background-color: var(--c1);
  color: var(--c4);
  border-color: transparent;
  padding: 12px 16px;
  border-radius: var(--radius, 0px);
  border: none;
}

/* Responsive Button Padding */

@media (min-width: 768px) {
  .primaryButton {
    padding: 24px 40px;
  }
  .secondaryButton {
    padding: 16px 24px;
  }
  .tertiaryButton {
    padding: 16px 24px;
  }
  .navigationButton {
    padding: 16px 24px;
  }
}


/* Responsive Module Spacing */


@media (min-width: 768px) {
  :root {
    --module-spacing: 120px;
  }
}

@media (min-width: 1280px) {
  :root {
    --module-spacing: 160px;
  }
}
