/* CSS Reset - Modern 2025 Best Practices */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

span {
  display: inline-block;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

/* Remove default focus styles completely */
:focus,
:focus-visible,
:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove Chrome's default focus ring on all interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[contenteditable]:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove focus styles for focus-visible as well */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure consistent sizing for form elements */
input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Remove spinner from number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Improve text selection */
::selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: black;
}

::-moz-selection {
  background-color: var(--blue, #007bff);
  color: white;
}

/* Remove default margin from paragraphs and headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
  line-height: 1.5;
}

/* Improve accessibility for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* BASE */
html {
  font-size: 62.5%;
}

svg {
  width: 100%;
  height: auto;
}

:root {
  /* Base Configuration */
  --min-screen-width: 320px;
  --max-screen-width: 1366px;
  --max-p-width: 80rem;
  /* Base Values - Mobile First */
  --base-space: 2rem;
  /* Smaller base for mobile */
  --base-text: 1.25rem;
  /* Base text size for mobile */
  --menu-height-mobile: 8rem;
  --menu-height-desktop: 15rem;
  --scroll-margin-mobile: var(--menu-height-mobile);
  --scroll-margin-desktop: var(--menu-height-desktop);
  /* Multipliers - Mobile First */
  --font-multiplier: 1.2;
  /* Font scaling for mobile */
  /* transitions */
  --transition-s: 0.2s ease-in-out all;
  --transition-m: 0.4s ease-in-out all;
  --transition-l: 0.8s ease-in-out all;
  /* fonts */
  /* Color Palette */
  --black: rgba(29, 11, 0, 1);
  --white: rgba(255, 255, 255, 1);
  --blue: rgba(185, 224, 254, 1);
  --lightBlue: rgba(204, 233, 255, 1);
  --brightBlue: rgba(141, 238, 255, 1);
  --darkBlue: rgba(42, 143, 220, 1);
  --pink: rgba(237, 149, 212, 1);
  --lightPink: rgba(255, 175, 232, 1);
  --darkPink: rgba(190, 85, 160, 1);
  --lime: rgba(230, 252, 205, 1);
  --highlightLime: rgba(204, 255, 145, 1);
  --darkLime: rgba(125, 147, 99, 1);
  --highlightPink: #ff95e1;
  /* Text Color Classes */
}
:root .text-black {
  color: var(--black) !important;
}
:root .text-white {
  color: var(--white) !important;
}
:root .text-blue {
  color: var(--blue) !important;
}
:root .text-light-blue {
  color: var(--lightBlue) !important;
}
:root .text-bright-blue {
  color: var(--brightBlue) !important;
}
:root .text-dark-blue {
  color: var(--darkBlue) !important;
}
:root .text-pink {
  color: var(--pink) !important;
}
:root .text-light-pink {
  color: var(--lightPink) !important;
}
:root .text-dark-pink {
  color: var(--darkPink) !important;
}
:root .text-lime {
  color: var(--lime) !important;
}
:root .text-dark-lime {
  color: var(--darkLime) !important;
}
:root {
  /* SITE VARS */
  --text-shadow-1: 4px 0px 0px #000;
  --text-stroke-s: 0.3px #000;
  /* Calculated Spacing Variables */
  /* Spacing scale */
  --space-3xs: clamp(0.063rem, 0.4vw + calc(var(--base-space) * 0.25), calc(var(--base-space) * 0.3125));
  --space-2xs: clamp(0.125rem, 0.6vw + calc(var(--base-space) * 0.5), calc(var(--base-space) * 0.625));
  --space-xs: clamp(0.25rem, 1vw + calc(var(--base-space) * 1), calc(var(--base-space) * 1.25));
  --space-s: clamp(0.5rem, 2vw + calc(var(--base-space) * 2), calc(var(--base-space) * 2.5));
  --space-m: clamp(1rem, 3vw + calc(var(--base-space) * 3), calc(var(--base-space) * 3.75));
  --space-l: clamp(2rem, 4vw + calc(var(--base-space) * 4), calc(var(--base-space) * 5));
  --space-xl: clamp(3rem, 6vw + calc(var(--base-space) * 5), calc(var(--base-space) * 6.25));
  --space-2xl: clamp(4rem, 8vw + calc(var(--base-space) * 6), calc(var(--base-space) * 7.5));
  --space-3xl: clamp(5rem, 10vw + calc(var(--base-space) * 7), calc(var(--base-space) * 8.75));
  --space-4xl: clamp(6rem, 12vw + calc(var(--base-space) * 8), calc(var(--base-space) * 10));
  /* Base Typography Scale - Already defined above */
  /* Calculated Typography Variables */
  --text-xs: clamp(var(--base-text), calc(0.1vw + 1.22rem), calc(var(--base-text) * 1.08 * var(--font-multiplier)));
  --text-s: clamp(
    calc(var(--base-text) * 1.2 * var(--font-multiplier)),
    calc(0.29vw + 1.41rem),
    calc(var(--base-text) * 1.44 * var(--font-multiplier))
  );
  --text-m: clamp(
    calc(var(--base-text) * 1.44 * var(--font-multiplier)),
    calc(0.57vw + 1.62rem),
    calc(var(--base-text) * 1.92 * var(--font-multiplier))
  );
  --text-l: clamp(
    calc(var(--base-text) * 1.73 * var(--font-multiplier)),
    calc(0.99vw + 1.84rem),
    calc(var(--base-text) * 2.56 * var(--font-multiplier))
  );
  --text-xl: clamp(
    calc(var(--base-text) * 2.07 * var(--font-multiplier)),
    calc(1.6vw + 2.08rem),
    calc(var(--base-text) * 3.41 * var(--font-multiplier))
  );
  --text-2xl: clamp(
    calc(var(--base-text) * 2.49 * var(--font-multiplier)),
    calc(2.46vw + 2.32rem),
    calc(var(--base-text) * 4.55 * var(--font-multiplier))
  );
  --text-3xl: clamp(
    calc(var(--base-text) * 2.98 * var(--font-multiplier)),
    calc(3.68vw + 2.56rem),
    calc(var(--base-text) * 6.06 * var(--font-multiplier))
  );
  --text-4xl: clamp(
    calc(var(--base-text) * 3.58 * var(--font-multiplier)),
    calc(5.37vw + 2.76rem),
    calc(var(--base-text) * 8.08 * var(--font-multiplier))
  );
  /* Grid Columns */
  --columns-1: repeat(1, minmax(0, 1fr));
  --columns-2: repeat(2, minmax(0, 1fr));
  --columns-3: repeat(3, minmax(0, 1fr));
  --columns-4: repeat(4, minmax(0, 1fr));
  --columns-5: repeat(5, minmax(0, 1fr));
  --columns-6: repeat(6, minmax(0, 1fr));
  --columns-7: repeat(7, minmax(0, 1fr));
  --columns-8: repeat(8, minmax(0, 1fr));
  /* Base Border Radius */
  --base-radius: 0.4rem;
  /* Calculated Border Radius Variables */
  --radius-xs: clamp(var(--base-radius), calc(-0vw + 0.4rem), var(--base-radius));
  --radius-s: clamp(calc(var(--base-radius) * 1.5), calc(-0.19vw + 0.86rem), calc(var(--base-radius) * 2));
  --radius-m: clamp(calc(var(--base-radius) * 2.5), calc(-0.19vw + 1.26rem), calc(var(--base-radius) * 3));
  --radius-l: clamp(calc(var(--base-radius) * 4), calc(-0.38vw + 2.12rem), calc(var(--base-radius) * 5));
  --radius-xl: clamp(calc(var(--base-radius) * 6.5), calc(-0.57vw + 3.38rem), calc(var(--base-radius) * 8));
  --radius-full: 999rem;
}

/* Desktop Spacing Override */
@media (min-width: 768px) {
  :root {
    /* Base Values - Desktop */
    --base-space: 3rem;
    /* Larger base for desktop */
    --base-text: 1.2rem;
    /* Larger base text for desktop */
    /* Multipliers - Desktop */
    --font-multiplier: 1.3;
    /* Font scaling for desktop */
    --menu-height: 5rem;
  }
}
/* layout */
/* Scroll margin for all elements with IDs */
[id] {
  scroll-margin-top: var(--scroll-margin-mobile);
}

@media (min-width: 991px) {
  [id] {
    scroll-margin-top: var(--scroll-margin-desktop);
  }
}
/* for fixed menu */
main section:first-child {
  padding-top: var(--space-m);
}
@media (min-width: 991px) {
  main section:first-child {
    padding-top: var(--space-l);
  }
}

main section:last-child {
  padding-bottom: var(--space-m);
}

section {
  width: 100%;
  padding: var(--space-m) var(--space-xs);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
}
@media (min-width: 991px) {
  section {
    padding: var(--space-m) var(--space-m);
  }
}

header .visible-menu .container {
  position: relative;
  max-width: 1500px;
}

.visible-menu {
  padding-top: 0;
  padding-bottom: 0;
  /* always on top fix */
  position: fixed;
  z-index: 1000;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: var(--max-screen-width);
  gap: var(--space-xs);
}
@media (min-width: 991px) {
  .container {
    gap: var(--space-2xs);
  }
}

div {
  gap: var(--space-2xs);
}

.break-out {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  display: block;
}

/* Flex Direction Utilities */
.flex-col {
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
}

.flex-row {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}

.flex-col-reverse {
  flex-direction: column-reverse;
  display: flex;
  flex-wrap: wrap;
}

.flex-row-reverse {
  flex-direction: row-reverse;
  display: flex;
  flex-wrap: wrap;
}

.flex-shrink {
  flex: 0 1 auto;
}

/* Flex Wrap Utilities */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Justify Content Utilities */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Align Items Utilities */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* Grid Layout Utilities */
.grid {
  display: grid;
}

/* Grid Template Columns - Horizontal Grids */
.grid-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Grid Auto Columns */
.grid-auto {
  display: grid;
  grid-template-columns: auto;
}

.grid-auto-2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.grid-auto-3 {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

.grid-auto-4 {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

/* Grid Column Proportions - Common Layouts */
.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.grid-1-3 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.grid-3-1 {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.grid-1-4 {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

.grid-4-1 {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

.grid-2-3 {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
}

/* Three Column Proportions */
.grid-1-1-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

.grid-1-2-1 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.grid-2-1-1 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.grid-1-1-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
}

.grid-1-3-1 {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.grid-3-1-1 {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
}

/* Grid Auto Fit */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-fit-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-auto-fit-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Grid Auto Fill */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-auto-fill-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.grid-auto-fill-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Align Content Utilities */
.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

/* Align Self Utilities */
.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

/* Gap Utilities */
.gap-0 {
  gap: 0;
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-4xs {
  gap: var(--space-4xs);
}

.gap-3xs {
  gap: var(--space-3xs);
}

.gap-2xs {
  gap: var(--space-2xs);
}

.gap-s {
  gap: var(--space-s);
}

.gap-m {
  gap: var(--space-m);
}

.gap-l {
  gap: var(--space-l);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

.c-gap-0 {
  column-gap: 0;
}

.c-gap-xs {
  column-gap: var(--space-xs);
}

.c-gap-4xs {
  column-gap: var(--space-4xs);
}

.c-gap-3xs {
  column-gap: var(--space-3xs);
}

.c-gap-2xs {
  column-gap: var(--space-2xs);
}

.c-gap-s {
  column-gap: var(--space-s);
}

.c-gap-m {
  column-gap: var(--space-m);
}

.c-gap-l {
  column-gap: var(--space-l);
}

.c-gap-xl {
  column-gap: var(--space-xl);
}

.c-gap-2xl {
  column-gap: var(--space-2xl);
}

.r-gap-0 {
  row-gap: 0;
}

.r-gap-xs {
  row-gap: var(--space-xs);
}

.r-gap-4xs {
  row-gap: var(--space-4xs);
}

.r-gap-3xs {
  row-gap: var(--space-3xs);
}

.r-gap-2xs {
  row-gap: var(--space-2xs);
}

.r-gap-s {
  row-gap: var(--space-s);
}

.r-gap-m {
  row-gap: var(--space-m);
}

.r-gap-l {
  row-gap: var(--space-l);
}

.r-gap-xl {
  row-gap: var(--space-xl);
}

.r-gap-2xl {
  row-gap: var(--space-2xl);
}

/* Gap Utilities */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--space-xs);
}

.p-s {
  padding: var(--space-s);
}

.p-m {
  padding: var(--space-m);
}

.p-l {
  padding: var(--space-l);
}

.p-xl {
  padding: var(--space-xl);
}

.p-top-0 {
  padding-top: 0;
}

.p-top-xs {
  padding-top: var(--space-xs);
}

.p-top-s {
  padding-top: var(--space-s);
}

.p-top-m {
  padding-top: var(--space-m);
}

.p-top-l {
  padding-top: var(--space-l);
}

.p-top-xl {
  padding-top: var(--space-xl);
}

.p-bot-0 {
  padding-bottom: 0;
}

.p-bot-xs {
  padding-bottom: var(--space-xs);
}

.p-bot-s {
  padding-bottom: var(--space-s);
}

.p-bot-m {
  padding-bottom: var(--space-m);
}

.p-bot-l {
  padding-bottom: var(--space-l);
}

.p-bot-xl {
  padding-bottom: var(--space-xl);
}

.p-left-0 {
  padding-left: 0;
}

.p-left-xs {
  padding-left: var(--space-xs);
}

.p-left-s {
  padding-left: var(--space-s);
}

.p-left-m {
  padding-left: var(--space-m);
}

.p-left-l {
  padding-left: var(--space-l);
}

.p-left-xl {
  padding-left: var(--space-xl);
}

.p-right-0 {
  padding-right: 0;
}

.p-right-xs {
  padding-right: var(--space-xs);
}

.p-right-s {
  padding-right: var(--space-s);
}

.p-right-m {
  padding-right: var(--space-m);
}

.p-right-l {
  padding-right: var(--space-l);
}

.p-right-xl {
  padding-right: var(--space-xl);
}

.m-0 {
  margin: 0;
}

.m-xs {
  margin: var(--space-xs);
}

.m-s {
  margin: var(--space-s);
}

.m-m {
  margin: var(--space-m);
}

.m-l {
  margin: var(--space-l);
}

.m-xl {
  margin: var(--space-xl);
}

.m-top-0 {
  margin-top: 0;
}

.m-top-xs {
  margin-top: var(--space-xs);
}

.m-top-s {
  margin-top: var(--space-s);
}

.m-top-m {
  margin-top: var(--space-m);
}

.m-top-l {
  margin-top: var(--space-l);
}

.m-top-xl {
  margin-top: var(--space-xl);
}

.m-bot-0 {
  margin-bottom: 0;
}

.m-bot-xs {
  margin-bottom: var(--space-xs);
}

.m-bot-s {
  margin-bottom: var(--space-s);
}

.m-bot-m {
  margin-bottom: var(--space-m);
}

.m-bot-l {
  margin-bottom: var(--space-l);
}

.m-bot-xl {
  margin-bottom: var(--space-xl);
}

.m-left-0 {
  margin-left: 0;
}

.m-left-xs {
  margin-left: var(--space-xs);
}

.m-left-s {
  margin-left: var(--space-s);
}

.m-left-m {
  margin-left: var(--space-m);
}

.m-left-l {
  margin-left: var(--space-l);
}

.m-left-xl {
  margin-left: var(--space-xl);
}

.m-right-0 {
  margin-right: 0;
}

.m-right-xs {
  margin-right: var(--space-xs);
}

.m-right-s {
  margin-right: var(--space-s);
}

.m-right-m {
  margin-right: var(--space-m);
}

.m-right-l {
  margin-right: var(--space-l);
}

.m-right-xl {
  margin-right: var(--space-xl);
}

/* Remove padding when screen is wide enough */
@media (min-width: 1516px) {
  section {
    padding-left: 0;
    padding-right: 0;
  }
}
/* z- index */
.z--1 {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 1000;
}

.z-10000 {
  z-index: 10000;
}

.overflow-hidden {
  overflow: hidden;
}

/* typography */
@font-face {
  font-family: "font-primary";
  src: url("../fonts/sam-bobby.woff2") format("woff2"), url("../fonts/sam-bobby.woff") format("woff"), url("../fonts/sam-bobby.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "font-secondary";
  src: url("../fonts/sam-sugar.woff2") format("woff2"), url("../fonts/sam-sugar.woff") format("woff"), url("../fonts/sam-sugar.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "font-body";
  src: url("../fonts/sam-hubballi.woff2") format("woff2"), url("../fonts/sam-hubballi.woff") format("woff"), url("../fonts/sam-hubballi.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-size: var(--text-4xl);
  font-family: "font-primary";
  font-weight: normal;
}

h2 {
  font-size: var(--text-3xl);
  font-family: "font-primary";
  font-weight: normal;
}

h3 {
  font-size: var(--text-xl);
  font-family: "font-secondary";
  font-weight: normal;
}

h4 {
  font-size: var(--text-xs);
  font-family: "font-secondary";
  font-weight: normal;
}

h5 {
  font-size: var(--text-l);
  font-family: "font-secondary";
  font-weight: normal;
}

h6 {
  font-size: var(--text-m);
  font-family: "font-secondary";
  font-weight: normal;
}

body {
  font-size: var(--text-s);
  font-family: "font-body";
  font-weight: normal;
  background-color: var(--blue);
}

p {
  font-size: var(--text-s);
  max-width: var(--max-p-width);
  width: 100%;
  line-height: 1.2em;
}

.body-l {
  font-size: calc(var(--text-l));
  max-width: var(--max-p-width);
  width: 100%;
}

.text-center {
  text-align: center;
}

.m-text-center {
  text-align: center;
}
@media (min-width: 991px) {
  .m-text-center {
    text-align: left;
  }
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/* buttons */
.btn {
  min-width: 2rem;
  text-align: center;
  transition: var(--transition-s);
  display: inline-flex;
  align-self: flex-start;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.mob-s {
  --mob-display: flex;
  --desk-display: none;
  display: var(--mob-display) !important;
}
@media (min-width: 991px) {
  .mob-s {
    display: var(--desk-display) !important;
  }
}

.desk-s {
  --mob-display: none;
  --desk-display: flex;
  display: var(--mob-display) !important;
}
@media (min-width: 991px) {
  .desk-s {
    display: var(--desk-display) !important;
  }
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/* links and buttons */
.text-link,
p > a {
  position: relative;
  display: inline;
  text-decoration: none;
  color: var(--darkPink);
  background-image: linear-gradient(to right, var(--darkPink) 0%, var(--darkPink) 100%);
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 5px);
  background-size: 100% 2px;
  transition: var(--transition-s);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.text-link:hover,
p > a:hover {
  color: white;
  background-image: linear-gradient(to right, var(--darkPink) 0%, var(--darkPink) 100%);
  background-size: 100% 100%;
}

.wysiwyg p > a,
.wysiwyg p a {
  color: var(--black) !important;
}
.wysiwyg p > a:hover,
.wysiwyg p a:hover {
  color: white !important;
}

.link-blue {
  background-image: linear-gradient(to right, var(--darkBlue) 0%, var(--darkBlue) 100%);
  color: var(--black);
}
.link-blue:hover {
  background-image: linear-gradient(to right, var(--darkBlue) 0%, var(--darkBlue) 100%);
  color: var(--black);
}

.link-blue-2 {
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  .link-blue-2:hover {
    color: var(--darkBlue);
    transform: scale(1.05);
  }
}

.fit-content {
  width: fit-content;
  max-width: fit-content;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.line-fix {
  margin-top: -2px;
}

.dev-container {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.dev-button {
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: var(--text-s);
}

.dev-container:hover .dev-expand {
  display: block;
}

.dev-expand {
  display: none;
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: var(--text-s);
}

.dev .container {
  border: 1px solid red !important;
}

.dev .container > * {
  border: 0.5px solid yellow !important;
}

.bg-dev .container {
  background-color: red !important;
}

.bg-dev .container > * {
  background-color: yellow !important;
}

/* animations */
.blink-an {
  animation: blink 2s linear infinite;
}

.blink-an-once {
  animation: blink 2s linear;
}

/* utility */
.s-an {
  animation-duration: 0.2s;
}

.m-an {
  animation-duration: 0.4s;
}

.l-an {
  animation-duration: 0.8s;
}

.an-infinite {
  animation-iteration-count: infinite;
}

.an-forwards {
  animation-fill-mode: forwards;
}

.an-paused {
  animation-play-state: paused;
}

/* eases */
.instant-an {
  animation-timing-function: steps(1);
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(15deg);
  }
  4% {
    transform: rotate(-15deg);
  }
  6% {
    transform: rotate(15deg);
  }
  8% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* off-canvas */
.off-canvas {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  height: 100dvh;
  z-index: 900;
  transition: right 0.3s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow-y: scroll;
}

.off-canvas.open {
  right: 0;
}

/* Off-canvas overlay */
.off-canvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 899;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#main-nav {
  z-index: 1001;
}

.off-canvas-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Off-canvas header */
.off-canvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.off-canvas-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.off-canvas-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  color: #666;
  transition: color 0.2s ease;
}

.off-canvas-close:hover {
  color: #333;
}

/* Body scroll prevention */
body.off-canvas-open {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .off-canvas {
    max-width: 100%;
    width: 100%;
  }
}
/* Left side variant */
.off-canvas.left {
  right: auto;
  left: -105%;
}

.off-canvas.left.open {
  left: 0;
}

/* Top variant */
.off-canvas.top {
  top: -100%;
  right: auto;
  left: 0;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  max-height: 80dvh;
  transition: top 0.4s ease-in-out;
}

.off-canvas.top.open {
  top: 0;
}

/* Bottom variant */
.off-canvas.bottom {
  top: auto;
  bottom: -100%;
  right: auto;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  transition: bottom 0.4s ease-in-out;
}

.off-canvas.bottom.open {
  bottom: 0;
}

/* Different sizes */
.off-canvas.small {
  max-width: 300px;
}

.off-canvas.large {
  max-width: 500px;
}

.off-canvas.full {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
}

/* Off-canvas content container */
.off-canvas-content {
  overflow-x: hidden;
  height: 100%;
}

/* Notice dismissed state - applied to trigger button */
#notice-off-canvas {
  height: auto;
}
#notice-off-canvas .off-canvas-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
@media (min-width: 991px) {
  #notice-off-canvas .off-canvas-content {
    padding-top: 0;
  }
}
#notice-off-canvas .banner-container {
  position: relative;
  left: auto;
  right: auto;
  transform: none !important;
}

#notice-off-canvas.big-notice .banner-container {
  max-width: 1250px;
}
#notice-off-canvas.big-notice .banner-text {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 991px) {
  #notice-off-canvas.big-notice .banner-text {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
}

.notice-icon {
  position: absolute;
  width: var(--text-xs);
  height: var(--text-xs);
  background-color: red;
  border: 1px solid black;
  border-radius: 50%;
  right: 10%;
  top: 0;
  transition: var(--transition-s);
}
@media (min-width: 991px) {
  .notice-icon {
    width: var(--text-s);
    height: var(--text-s);
    right: 10%;
    top: -5%;
  }
}

.notice-dismissed .notice-icon {
  display: none;
}

/* Carousel Component */
.carousel-container {
  width: 100%;
  height: 100%;
}

.carousel {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  min-height: 50px;
  flex-wrap: wrap;
}

.carousel-wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  display: none;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
}
.carousel-item.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.carousel-item > p {
  align-self: center !important;
}
.carousel-item h4 {
  text-transform: capitalize;
}
.carousel-item h5 {
  text-transform: lowercase;
}

.text-container-carousel {
  margin-top: var(--space-xs);
}

.carousel[data-active-items]:not([data-active-items="1"]) .carousel-wrapper {
  display: flex;
  gap: var(--space-s);
  position: relative;
}
.carousel[data-active-items]:not([data-active-items="1"]) .carousel-item {
  display: none;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.carousel[data-active-items]:not([data-active-items="1"]) .carousel-item.active {
  max-width: 100%;
  display: flex;
  flex: 1;
  z-index: 1;
  min-width: 0;
}
@media (min-width: 991px) {
  .carousel[data-active-items]:not([data-active-items="1"]) .carousel-item.active {
    max-width: 50%;
  }
}

/* Pagination */
.carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  width: 100%;
  z-index: 2;
}
.carousel-pagination .carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.carousel-pagination .carousel-dot.active {
  background-color: #333;
}
.carousel-pagination .carousel-dot:hover {
  background-color: #999;
}

/* hide submit button and replace with custom button */
#gform_submit_button_1 {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -5;
}

.gform-footer {
  margin-block-start: 0 !important;
}

/* Hide title */
.gform_title {
  display: none;
}

/* Hide required legend */
.gform_required_legend {
  display: none;
}

/* main wrapper */
.gform_wrapper form .gform_fields {
  gap: var(--space-xs);
}
.gform_wrapper .gfield--type-html {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.gform_wrapper p {
  text-align: center;
}
.gform_wrapper .gfield_label {
  font-size: var(--text-m) !important;
}

/* disable subs under time */
.hour_label,
.minute_label {
  display: none !important;
}

.gform_wrapper {
  /* form styling */
  /* Text inputs, textareas, selects */
}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=password],
.gform_wrapper input[type=number],
.gform_wrapper textarea,
.gform_wrapper select {
  border: 3px solid var(--darkBlue) !important;
  border-radius: var(--radius-s) !important;
}
.gform_wrapper {
  /* Focus state */
  /* Disabled state */
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border: var(--darkPink) 3px solid !important;
  background-color: var(--lightPink) !important;
  color: var(--black) !important;
}
.gform_wrapper {
  /* Placeholder text */
}
.gform_wrapper ::placeholder,
.gform_wrapper .gf_placeholder {
  color: var(--darkBlue) !important;
}
.gform_wrapper input:focus::placeholder,
.gform_wrapper textarea:focus::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}
.gform_wrapper {
  /* Placeholder color on focus */
}
.gform_wrapper {
  /* Buttons */
}
.gform_wrapper button,
.gform_wrapper input[type=submit],
.gform_wrapper input[type=button],
.gform_wrapper input[type=reset] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: none;
  background-color: #111827;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.gform_wrapper {
  /* Button hover / active / focus */
}
.gform_wrapper button:hover,
.gform_wrapper input[type=submit]:hover,
.gform_wrapper input[type=button]:hover,
.gform_wrapper input[type=reset]:hover {
  background-color: #020617;
}
.gform_wrapper button:active,
.gform_wrapper input[type=submit]:active,
.gform_wrapper input[type=button]:active,
.gform_wrapper input[type=reset]:active {
  transform: translateY(1px);
}
.gform_wrapper button:focus-visible,
.gform_wrapper input[type=submit]:focus-visible,
.gform_wrapper input[type=button]:focus-visible,
.gform_wrapper input[type=reset]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.gform_wrapper input[type=radio] {
  border: 3px solid var(--darkBlue) !important;
}
.gform_wrapper input[type=radio]:before {
  background-color: var(--darkPink) !important;
}
.gform_wrapper input[type=radio]:checked {
  border: var(--darkPink) 3px solid !important;
  background-color: var(--lightPink) !important;
  color: var(--black) !important;
}

.gform_wrapper input[type=text][aria-invalid=true],
.gform_wrapper input[type=email][aria-invalid=true],
.gform_wrapper input[type=tel][aria-invalid=true],
.gform_wrapper input[type=url][aria-invalid=true],
.gform_wrapper input[type=password][aria-invalid=true],
.gform_wrapper input[type=number][aria-invalid=true],
.gform_wrapper textarea[aria-invalid=true],
.gform_wrapper select[aria-invalid=true] {
  border: var(--pink) 2px solid !important;
}

/* buttons */
.btn {
  font-family: "font-primary";
  font-weight: normal;
}

.btn * {
  transition: var(--transition-s);
}

.btn-s {
  display: block;
  width: 342px;
  max-width: 100%;
  height: 52.8px;
  position: relative;
  transition: var(--transition-s);
}
@media (min-width: ) {
  .btn-s {
    width: 370.5px;
    max-width: 370.5px;
    height: 57.2px;
  }
}

.btn-s.btn-pink svg text {
  fill: var(--white);
  font-size: calc(var(--text-m) * 0.8);
}

.btn-s.btn-pink svg path {
  fill: var(--pink);
  stroke: var(--darkPink);
}

.btn-s.btn-blue svg text {
  fill: var(--darkBlue);
  font-size: calc(var(--text-m) * 0.8);
}

.btn-s.btn-blue svg path {
  fill: var(--lightBlue);
  stroke: var(--darkBlue);
}

.btn-s.btn-lime svg text {
  fill: var(--black);
  font-size: calc(var(--text-m) * 0.8);
}

.btn-s.btn-lime svg path {
  fill: var(--lime);
  stroke: var(--black);
}

/* hover elements */
.btn-s.btn-pink .btn-svg-left .cls-2,
.btn-s.btn-pink .btn-svg-right .st1 {
  fill: var(--lightPink) !important;
}

.btn-s.btn-pink .btn-svg-left .cls-1,
.btn-s.btn-pink .btn-svg-right .st0 {
  fill: var(--darkPink) !important;
}

.btn-s.btn-blue .btn-svg-left .cls-2,
.btn-s.btn-blue .btn-svg-right .st1 {
  fill: var(--brightBlue) !important;
}

.btn-s.btn-blue .btn-svg-left .cls-1,
.btn-s.btn-blue .btn-svg-right .st0 {
  fill: var(--darkBlue) !important;
}

.btn-s.btn-lime .btn-svg-left .cls-2,
.btn-s.btn-lime .btn-svg-right .st1 {
  fill: var(--lime) !important;
}

.btn-s.btn-lime .btn-svg-left .cls-1,
.btn-s.btn-lime .btn-svg-right .st0 {
  fill: var(--black) !important;
}

.btn-svg-right {
  position: absolute;
  right: -30px;
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  opacity: 0;
  pointer-events: none;
}
.btn-svg-right .btn-svg-g-1 {
  opacity: 1;
}
.btn-svg-right .btn-svg-g-2 {
  opacity: 0;
}
.btn-svg-right .st1,
.btn-svg-right .st0 {
  stroke: none !important;
}

.btn-svg-left {
  position: absolute;
  left: -30px;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  opacity: 0;
  pointer-events: none;
}
.btn-svg-left .btn-svg-g-1 {
  opacity: 1;
}
.btn-svg-left .btn-svg-g-2 {
  opacity: 0;
}
.btn-svg-left .cls-2,
.btn-svg-left .cls-1 {
  stroke: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn-s:hover {
    transform: scale(1.06);
  }
  .btn-s.btn-pink:hover svg path {
    fill: var(--lightPink);
  }
  .btn-s.btn-blue:hover svg path {
    fill: var(--brightBlue);
  }
}
/* large btn */
/* arrows + text */
.btn-group-l {
  max-width: 500px;
  row-gap: var(--space-3xs);
}
.btn-group-l h4 {
  font-size: var(--text-xs);
  color: var(--darkPink);
  text-wrap: balance;
}
@media (min-width: 991px) {
  .btn-group-l {
    row-gap: var(--space-3xs);
  }
  .btn-group-l h4 {
    font-size: var(--text-s);
  }
}

.btn-l {
  width: 75%;
  max-width: 400px;
}

.btn-group-l.reverse {
  flex-direction: column-reverse;
}

.btn-group-l.no-idle .arrow-left,
.btn-group-l.no-idle .arrow-right {
  animation: none;
  opacity: 0;
}

.btn-group-l.text-s text {
  font-size: 24px !important;
}

.btn-group-l.fric-hover .fric-rem-container {
  opacity: 0;
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  .btn-group-l.fric-hover .btn-arrows-group:hover ~ .fric-rem-container {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-arrows-group:hover .arrow-left {
    transform: scale(1.2) translateX(30%);
    animation-play-state: paused;
    opacity: 1 !important;
  }
  .btn-arrows-group:hover .arrow-right {
    transform: scale(1.2) scaleY(-1) rotate(180deg) translateX(30%);
    animation-play-state: paused;
    opacity: 1 !important;
  }
}
.btn-arrows-group {
  gap: 2.5%;
}

.arrow-right,
.arrow-left {
  width: 10%;
  transition: all 0.2s ease-in-out;
}

.arrow-right {
  transform: rotate(180deg) scaleY(-1);
}

.btn-group-l.btn-pink .btn-l-art text {
  fill: var(--white);
  font-size: 30px;
}
.btn-group-l.btn-pink .btn-l-art .shadow {
  fill: var(--darkPink);
}
.btn-group-l.btn-pink .btn-l-art .front {
  fill: var(--pink);
  stroke: var(--darkPink);
  stroke-width: 3px;
}
.btn-group-l.btn-pink .arrow-icon .shadow {
  fill: var(--darkPink);
  stroke: var(--darkPink);
  stroke-width: 0px;
}
.btn-group-l.btn-pink .arrow-icon .front {
  fill: var(--pink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-group-l.btn-pink .btn-arrows-group:hover .arrow-icon .front {
    fill: var(--lightPink);
  }
  .btn-group-l.btn-pink .btn-arrows-group:hover .btn-l .front {
    fill: var(--lightPink);
  }
}

.btn-group-l.btn-light-pink .btn-l-art text {
  fill: var(--white);
  font-size: 30px;
}
.btn-group-l.btn-light-pink .btn-l-art .shadow {
  fill: var(--darkPink);
}
.btn-group-l.btn-light-pink .btn-l-art .front {
  fill: var(--lightPink);
  stroke: var(--darkPink);
  stroke-width: 3px;
}
.btn-group-l.btn-light-pink .arrow-icon .shadow {
  fill: var(--darkPink);
  stroke: var(--darkPink);
  stroke-width: 0px;
}
.btn-group-l.btn-light-pink .arrow-icon .front {
  fill: var(--lightPink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-group-l.btn-light-pink .btn-arrows-group:hover .arrow-icon .front {
    fill: #ff95e1;
  }
  .btn-group-l.btn-light-pink .btn-arrows-group:hover .btn-l .front {
    fill: #ff95e1;
  }
}

.btn-group-l.btn-lime .btn-l-art text {
  fill: var(--black);
  font-size: 30px;
}
.btn-group-l.btn-lime .btn-l-art .shadow {
  fill: var(--black);
}
.btn-group-l.btn-lime .btn-l-art .front {
  fill: var(--white);
  stroke: var(--black);
  stroke-width: 3px;
}
.btn-group-l.btn-lime .arrow-icon .shadow {
  fill: var(--black);
  stroke: var(--black);
  stroke-width: 0px;
}
.btn-group-l.btn-lime .arrow-icon .front {
  fill: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .btn-group-l.btn-lime .btn-arrows-group:hover .arrow-icon .front {
    fill: var(--lime);
  }
  .btn-group-l.btn-lime .btn-arrows-group:hover .btn-l .front {
    fill: var(--lime);
  }
}

.btn-group-l.btn-limelime .btn-l-art text {
  fill: var(--black);
  font-size: 30px;
}
.btn-group-l.btn-limelime .btn-l-art .shadow {
  fill: var(--black);
}
.btn-group-l.btn-limelime .btn-l-art .front {
  fill: var(--lime);
  stroke: var(--black);
  stroke-width: 3px;
}
.btn-group-l.btn-limelime .arrow-icon .shadow {
  fill: var(--black);
  stroke: var(--black);
  stroke-width: 0px;
}
.btn-group-l.btn-limelime .arrow-icon .front {
  fill: var(--lime);
}
@media (hover: hover) and (pointer: fine) {
  .btn-group-l.btn-limelime .btn-arrows-group:hover .arrow-icon .front {
    fill: var(--lime);
  }
  .btn-group-l.btn-limelime .btn-arrows-group:hover .btn-l .front {
    fill: var(--lime);
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-arrows-group:hover .btn-l {
    transform: scale(1.03);
  }
}
.fric-rem {
  margin-top: -5px;
}
@media (min-width: 991px) {
  .fric-rem {
    margin-top: -10px;
  }
}

/* decorative buttons */
.btn-dec-1,
.btn-dec-2 {
  position: relative;
  display: inline-block;
}

.btn-text {
  color: var(--black);
  transition: var(--transition-s);
}

.quote-link {
  width: 25%;
  max-width: 100px;
  transition: var(--transition-s);
  z-index: 10;
  position: relative;
  line-height: 0;
}
@media (min-width: 991px) {
  .quote-link {
    position: absolute;
  }
}
.quote-link span {
  color: var(--black);
  font-family: "font-primary";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -43%);
  text-align: center;
  width: 80%;
  z-index: 1;
  line-height: 0.9em;
}

.deco-text-m span {
  font-size: clamp(16px, 5.5vw, 24px);
}

.front {
  fill: var(--white);
  transition: var(--transition-s);
}

@media (hover: hover) and (pointer: fine) {
  .quote-link:hover {
    transform: scale(1.5) rotate(10deg);
  }
  .quote-link:hover .front {
    fill: var(--pink);
  }
}
/* deco specific styling */
.insta-deco-btn span {
  font-size: clamp(18px, 6vw, 28px);
}

/* icon round buttons */
.icon-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon-container h4 {
  font-size: var(--text-m);
  color: var(--darkPink);
}
.icon-container h5 {
  font-size: var(--text-s);
  color: var(--darkPink);
}
.icon-container .text-container {
  flex-direction: column;
  gap: var(--space-3xs);
  text-align: right;
  opacity: 0;
  display: none;
  transition: var(--transition-s);
}
@media (min-width: 991px) {
  .icon-container .text-container {
    display: flex;
  }
}

.icon-link {
  width: var(--text-4xl);
}

.reverse-icon-container {
  flex-direction: row-reverse;
}
.reverse-icon-container .text-container {
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .icon-container:has(.icon-link:hover) .text-container {
    opacity: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  .container-icon:hover .icon {
    transform: translate(2%, 3%);
  }
  .container-icon:hover .circle {
    transform: translate(2%, 3%);
  }
}
.container-icon .shadow {
  fill: var(--black);
  stroke: var(--black);
  transition: var(--transition-s);
}

.container-icon .circle {
  fill: var(--lime);
  stroke: var(--black);
  transition: var(--transition-s);
}

.container-icon .icon {
  fill: var(--black);
  transition: var(--transition-s);
}

.close-icon .circle {
  fill: var(--brightBlue);
}

.sticky-cta {
  display: none;
  opacity: 1;
  position: fixed;
  bottom: -80px;
  right: 5%;
  z-index: -10;
}
.sticky-cta .btn-l {
  width: 100% !important;
}
.sticky-cta .fric-rem-container {
  display: none;
}
.sticky-cta .arrow-left,
.sticky-cta .arrow-right {
  display: none;
}
@media (min-width: 991px) {
  .sticky-cta {
    opacity: 1;
    display: block;
    position: fixed;
    bottom: -80px;
    right: 5%;
    right: max((100vw - 1920px) / 2 + 96px, 16px);
    left: auto;
    z-index: -10;
  }
  .sticky-cta .btn-l {
    width: 100% !important;
  }
}

.notice-btn {
  display: block;
}

.sticky-left {
  width: var(--text-4xl);
  left: 5%;
  right: auto;
}
@media (min-width: 991px) {
  .sticky-left {
    left: 25px;
    left: max((100vw - 1920px) / 2 + 96px, 16px);
    width: var(--text-2xl);
  }
}

.btn-dec-2 {
  transform-origin: center center !important;
}
.btn-dec-2 .front {
  animation: linearSpin 15s linear infinite;
}
.btn-dec-2 .shadow {
  animation: linearSpin 15s linear infinite;
}

@keyframes linearSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-round {
  background-color: var(--lime);
  font-family: "font-primary";
  border: 3px solid var(--black);
  border-radius: var(--radius-m);
  padding: var(--space-3xs) var(--space-s);
  padding-top: calc(var(--space-3xs) + 5px);
}

.nav-section {
  padding: var(--space-xs);
}

.close-btn-nav,
.main-nav-hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  width: var(--text-xl);
  padding-right: var(--space-xs);
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: var(--space-xs);
  margin-top: calc(var(--space-xs) * -1);
  margin-right: calc(var(--space-xs) * -1);
  box-sizing: content-box;
}
@media (min-width: 991px) {
  .close-btn-nav,
  .main-nav-hamburger {
    margin: 0;
    right: 5%;
    padding: 0;
    width: var(--text-3xl);
  }
}

.main-nav-hamburger {
  padding-right: var(--space-xs);
  padding-top: var(--space-xs);
  margin-right: calc(var(--space-xs) * -1);
  margin-top: 0;
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav-hamburger:hover {
    transform: scale(1.2);
  }
}
.main-nav-hamburger.pin-active {
  top: 50px !important;
}
@media (min-width: 991px) {
  .main-nav-hamburger.pin-active {
    top: 0 !important;
  }
}

#main-nav {
  background-color: var(--lightBlue);
}
#main-nav .container {
  text-align: center;
  height: 100%;
  max-width: 1500px;
}
#main-nav .main-nav-list {
  flex-shrink: 0; /* Don't shrink the main nav */
  max-width: 1000px;
}
#main-nav .sub-menu-nav {
  /*  margin-top: auto; Push to bottom */
  flex-shrink: 0; /* Don't shrink the sub menu */
}
@media (min-width: 991px) {
  #main-nav .sub-menu-nav {
    margin-top: 0;
  }
}
#main-nav .sub-menu-nav a {
  font-size: var(--text-s);
  display: inline-block;
}
#main-nav a .text-nav {
  font-size: inherit;
}
#main-nav a {
  font-family: "font-primary";
  font-size: calc(var(--text-3xl));
  position: relative;
}
@media (min-width: 360px) {
  #main-nav a {
    font-size: calc(var(--text-3xl) * 1.2);
  }
}
@media (min-width: 991px) {
  #main-nav a {
    font-size: calc(var(--text-3xl) * 1.3);
  }
}
@media (min-width: 1366px) {
  #main-nav a {
    font-size: 10rem;
  }
}
#main-nav a .prive {
  top: -20px;
  left: -20px;
  font-size: var(--text-xl);
  z-index: 3;
}
@media (min-width: 991px) {
  #main-nav a .prive {
    top: -18px;
  }
}
#main-nav a .workshop {
  top: -10px;
  left: 0px;
  font-size: var(--text-s);
}
@media (min-width: 991px) {
  #main-nav a .workshop {
    top: -10px;
    font-size: var(--text-m);
  }
}
#main-nav .quote {
  font-size: var(--text-m);
  position: absolute;
  top: 0;
  left: 0;
}
#main-nav .tagline {
  font-size: var(--text-s);
  font-family: "font-primary";
}
#main-nav .tagline a {
  display: inline-block;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  #main-nav .tagline a:hover {
    text-decoration: none;
    color: var(--darkBlue);
    transform: scale(1.2) translateX(10px);
  }
}

.navigation {
  height: 100%;
}
@media (min-width: 991px) {
  .navigation {
    row-gap: var(--space-m);
  }
}
.navigation .main-nav-list a {
  z-index: 5;
}
@media (min-width: 991px) {
  .navigation .main-nav-list {
    flex-direction: row;
    justify-content: center;
    row-gap: var(--space-3xs);
    column-gap: var(--space-m);
  }
}
.navigation .main-nav-list li {
  position: relative;
  align-self: center;
}
.navigation .main-nav-list li div {
  position: absolute;
  z-index: 1;
  transition: var(--transition-s);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .navigation .text-nav {
    transform: scale(1) rotate(0deg);
  }
  .navigation li:hover div {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .navigation li:hover .text-nav {
    color: var(--blue);
    -webkit-text-stroke: var(--text-stroke-s);
    text-shadow: var(--text-shadow-1);
    transform: scale(1.2) rotate(3deg);
  }
}
.navigation .home-nav-icon {
  width: var(--text-4xl);
  top: -10px;
  left: -30%;
}
@media (min-width: 991px) {
  .navigation .home-nav-icon {
    width: var(--text-4xl);
  }
}
.navigation .agenda-nav-icon {
  width: var(--text-4xl);
  top: -10px;
  right: -25%;
  transform: rotate(45deg);
}
@media (min-width: 991px) {
  .navigation .agenda-nav-icon {
    width: var(--text-4xl);
  }
}
.navigation .workshops-nav-icon {
  width: var(--text-4xl);
  top: -20px;
  left: -25%;
}
@media (min-width: 991px) {
  .navigation .workshops-nav-icon {
    top: -70px;
    left: -37%;
    width: 40%;
  }
}
.navigation .contact-nav-icon {
  width: var(--text-4xl);
  top: -10px;
  right: -25%;
}
@media (min-width: 991px) {
  .navigation .contact-nav-icon {
    top: -10px;
    right: -27%;
    width: 30%;
  }
}
.navigation .about-nav-icon {
  width: var(--text-4xl);
  top: -10px;
  right: -25%;
}
@media (min-width: 991px) {
  .navigation .about-nav-icon {
    top: -10px;
    left: -25%;
    width: 60%;
  }
}
.navigation .workshop-prive-nav-icon {
  width: var(--text-4xl);
  top: -10px;
  right: -25%;
}
@media (min-width: 991px) {
  .navigation .workshop-prive-nav-icon {
    top: -20px;
    right: -38%;
    width: 40%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .sub-menu-text a {
    transition: var(--transition-s);
    transform: scale(1);
  }
  .sub-menu-text li:hover a {
    color: var(--darkBlue);
    transform: scale(1.2);
  }
}
/* active menu styling */
.home #main-nav .navigation li .home-nav {
  color: var(--white);
  -webkit-text-stroke: var(--text-stroke-s);
  text-shadow: var(--text-shadow-1);
  font-size: var(--text-4xl);
}
@media (min-width: 1366px) {
  .home #main-nav .navigation li .home-nav {
    font-size: 14rem;
  }
}
@media (min-width: 360px) {
  .home #main-nav .navigation li .home-nav {
    font-size: calc(var(--text-4xl) * 1.5);
  }
}
.home #main-nav .navigation li .home-nav-icon {
  width: 18vw;
  top: -20%;
  left: -27%;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 991px) {
  .home #main-nav .navigation li .home-nav-icon {
    width: 40%;
    top: -30%;
    left: -40%;
    opacity: 0;
  }
}

.prive-workshops #main-nav .navigation li .prive-nav .text-nav {
  color: var(--white);
  -webkit-text-stroke: var(--text-stroke-s);
  text-shadow: var(--text-shadow-1);
  font-size: var(--text-3xl);
}
@media (min-width: 1366px) {
  .prive-workshops #main-nav .navigation li .prive-nav .text-nav {
    font-size: 14rem;
  }
}
@media (min-width: 360px) {
  .prive-workshops #main-nav .navigation li .prive-nav .text-nav {
    font-size: calc(var(--text-3xl) * 1.5);
  }
}
.prive-workshops #main-nav .navigation li .workshop-prive-nav-icon {
  width: 25vw;
  top: -60%;
  right: -10%;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 991px) {
  .prive-workshops #main-nav .navigation li .workshop-prive-nav-icon {
    top: -20px;
    right: -38%;
    width: 40%;
    opacity: 0;
  }
}

.home #main-nav .navigation li .home-nav {
  color: var(--white);
  -webkit-text-stroke: var(--text-stroke-s);
  text-shadow: var(--text-shadow-1);
  font-size: var(--text-4xl);
}
@media (min-width: 1366px) {
  .home #main-nav .navigation li .home-nav {
    font-size: 14rem;
  }
}
@media (min-width: 360px) {
  .home #main-nav .navigation li .home-nav {
    font-size: calc(var(--text-4xl) * 1.5);
  }
}
.home #main-nav .navigation li .home-nav-icon {
  width: 18vw;
  top: -20%;
  left: -27%;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 991px) {
  .home #main-nav .navigation li .home-nav-icon {
    width: 40%;
    top: -30%;
    left: -40%;
    opacity: 0;
  }
}

/* logo and tagline */
.logo,
.tagline {
  position: absolute;
}

.logo {
  left: 0;
  bottom: 0;
}

.tagline {
  right: 0;
  bottom: 0;
}

/* logo */
.logo {
  width: 15%;
  padding: var(--space-xs);
  transform: translate(calc(var(--space-xs) * -1), var(--space-xs));
  box-sizing: content-box;
}
@media (min-width: 991px) {
  .logo {
    width: 10%;
  }
}

#main-logo {
  transition: var(--transition-s);
  transform-origin: left bottom;
}
#main-logo #backdrop path,
#main-logo #backdrop polygon {
  fill: var(--lightBlue);
  transition: var(--transition-s);
}
#main-logo .st0 {
  isolation: isolate;
}
#main-logo #letters path,
#main-logo #letters polygon {
  fill: var(--black);
  isolation: isolate;
  transition: var(--transition-s);
}

@media (hover: hover) and (pointer: fine) {
  .logo #main-logo:hover {
    transform: rotate(-15deg) scale(2) translate(10px, 10px);
  }
  .logo #main-logo:hover #backdrop path,
  .logo #main-logo:hover #backdrop polygon {
    fill: var(--blue);
  }
  .logo #main-logo:hover #letters path,
  .logo #main-logo:hover #letters polygon {
    fill: var(--black);
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover #main-logo {
    transform: rotate(-15deg) scale(2) translate(10px, 10px);
  }
}
/* icons */
.icon-nav {
  width: var(--text-2xl);
}

#footer {
  background-color: var(--lightBlue);
  z-index: 30;
  position: relative;
  overflow: hidden;
}
#footer section {
  max-width: 1000px;
  margin: 0 auto;
}
#footer .main-nav-list {
  column-gap: var(--space-s);
}
#footer .sub-menu-nav {
  /*  margin-top: auto; Push to bottom */
  flex-shrink: 0; /* Don't shrink the sub menu */
}
@media (min-width: 991px) {
  #footer .sub-menu-nav {
    margin-top: 0;
  }
}
#footer .sub-menu-nav a {
  font-size: var(--text-l);
  display: inline-block;
}
#footer a .text-nav {
  font-size: inherit;
}
#footer a {
  font-family: "font-primary";
  font-size: calc(var(--text-3xl));
  position: relative;
}
@media (min-width: 360px) {
  #footer a {
    font-size: calc(var(--text-3xl) * 1.2);
  }
}
@media (min-width: 991px) {
  #footer a {
    font-size: calc(var(--text-3xl) * 1.3);
  }
}
@media (min-width: 1366px) {
  #footer a {
    font-size: 10rem;
  }
}
#footer a .prive {
  top: -20px;
  left: -20px;
  font-size: var(--text-xl);
  z-index: 3;
}
@media (min-width: 991px) {
  #footer a .prive {
    top: -18px;
  }
}
#footer a .workshop {
  top: -10px;
  left: 0px;
  font-size: var(--text-s);
}
@media (min-width: 991px) {
  #footer a .workshop {
    top: -10px;
    font-size: var(--text-m);
  }
}
#footer .quote {
  font-size: var(--text-m);
  position: absolute;
  top: 0;
  left: 0;
}
#footer .tagline {
  font-size: var(--text-s);
  font-family: "font-primary";
}
#footer .tagline a {
  display: inline-block;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  #footer .tagline a:hover {
    text-decoration: none;
    color: var(--darkBlue);
    transform: scale(1.2) translateX(10px);
  }
}

.logo-container-footer svg {
  width: 80%;
  max-width: 300px;
}
.logo-container-footer p {
  text-align: center;
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.socials-footer ul {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4xs);
}
@media (min-width: 991px) {
  .socials-footer ul {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
}

#footer .location-footer {
  font-family: "font-body";
  font-size: var(--text-xl);
  text-align: center;
}

#footer .side-note {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#footer .side-note a {
  font-family: "font-body";
  font-size: var(--text-l);
}
#footer .side-note .author-link,
#footer .side-note .green-link {
  font-family: "font-body";
  font-size: var(--text-s);
}

#footer .footer-svg-group-left,
#footer .footer-svg-group-right {
  position: absolute;
  bottom: 0;
  width: 20%;
}
@media (min-width: 991px) {
  #footer .footer-svg-group-left,
  #footer .footer-svg-group-right {
    top: 10%;
  }
}

#footer .footer-svg-group-left {
  left: -5%;
  transform-origin: bottom left;
}

#footer .footer-svg-group-right {
  right: -5%;
  transform-origin: bottom left;
}

.quote {
  font-family: "font-secondary";
  font-size: var(--text-s);
}

.quote-margin {
  margin-top: calc(var(--space-2xs) * -1);
  font-size: var(--text-xs);
}
@media (min-width: 991px) {
  .quote-margin {
    font-size: var(--text-m);
  }
}

.quote.blue {
  color: var(--darkBlue);
}

.quote.pink {
  color: var(--darkPink);
}

.r2 {
  transform: rotate(2deg);
}

.r-2 {
  transform: rotate(-2deg);
}

.r3 {
  transform: rotate(3deg);
}

.r-3 {
  transform: rotate(-3deg);
}

h1 {
  font-size: calc(var(--text-4xl) * 1.3) !important;
}

@media (min-width: 991px) {
  h1 span {
    font-size: calc(var(--text-4xl) * 1.3) !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}
@media (min-width: 991px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-align: inherit;
  }
}

h3 {
  text-wrap: balance;
  max-width: 700px;
  line-height: 1.2em;
}

/* titles */
.header-l {
  width: fit-content;
  text-align: center;
}
.header-l span {
  display: block;
}

.header-l .svg-group {
  position: absolute;
  z-index: 2;
  width: 30%;
  aspect-ratio: 1/1;
}
.header-l .svg-group img {
  width: 35%;
  position: absolute;
}

#header-home #creatieve {
  font-size: 15vw;
}
@media (min-width: 991px) {
  #header-home #creatieve {
    font-size: var(--text-4xl);
  }
}
#header-home #borrel {
  font-size: 12vw;
  transform: rotate(-3deg);
}
@media (min-width: 991px) {
  #header-home #borrel {
    font-size: calc(var(--text-4xl) * 0.9);
  }
}
#header-home #workshops {
  font-size: 15vw;
  transform: rotate(1deg);
}
@media (min-width: 991px) {
  #header-home #workshops {
    font-size: var(--text-4xl);
  }
}

#header-home .quote-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
@media (min-width: 991px) {
  #header-home .quote-container {
    flex-direction: column;
  }
}
#header-home .quote {
  text-align: center;
  font-size: var(--text-m);
}
@media (min-width: 991px) {
  #header-home .quote {
    font-size: var(--text-s);
  }
}
#header-home .quote-2 {
  font-size: var(--text-xs);
}
@media (min-width: 991px) {
  #header-home .quote-2 {
    font-size: var(--text-xs);
  }
}

#header-home .svg-group-1,
#header-prive .svg-group-1 {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
@media (min-width: 991px) {
  #header-home .svg-group-1,
  #header-prive .svg-group-1 {
    left: -4%;
  }
}
#header-home .svg-group-1 #star-doodle,
#header-prive .svg-group-1 #star-doodle {
  width: 10%;
  top: 54%;
  left: 7%;
}
#header-home .svg-group-1 #star-doodle-1,
#header-prive .svg-group-1 #star-doodle-1 {
  width: 20%;
  top: 30%;
  left: -10%;
}
#header-home .svg-group-1 #star-doodle-2,
#header-prive .svg-group-1 #star-doodle-2 {
  width: 10%;
  top: 17%;
  left: 10%;
  transform: rotate(10deg);
}
#header-home .svg-group-1 #objects,
#header-prive .svg-group-1 #objects {
  width: 60%;
  left: 20%;
}
#header-home .svg-group-2,
#header-prive .svg-group-2 {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media (min-width: 991px) {
  #header-home .svg-group-2,
  #header-prive .svg-group-2 {
    right: -5%;
  }
}
#header-home .svg-group-2 #star-doodle,
#header-prive .svg-group-2 #star-doodle {
  width: 10%;
  top: 54%;
  left: 85%;
  transform: rotate(15deg);
}
#header-home .svg-group-2 #star-doodle-1,
#header-prive .svg-group-2 #star-doodle-1 {
  width: 15%;
  top: 30%;
  left: 12%;
}
#header-home .svg-group-2 #star-doodle-2,
#header-prive .svg-group-2 #star-doodle-2 {
  width: 10%;
  top: 65%;
  left: 70%;
  transform: rotate(10deg);
}
#header-home .svg-group-2 #objects,
#header-prive .svg-group-2 #objects {
  top: 10%;
  width: 90%;
  left: 10%;
}
#header-home .svg-group-3,
#header-prive .svg-group-3 {
  width: 20%;
  top: -21%;
  right: -13%;
  transform: rotate(-15deg);
}
@media (min-width: 991px) {
  #header-home .svg-group-3,
  #header-prive .svg-group-3 {
    top: -16%;
    right: -10%;
  }
}
#header-home .svg-group-3 #objects,
#header-prive .svg-group-3 #objects {
  width: 100%;
}
#header-home .svg-group-4,
#header-prive .svg-group-4 {
  width: 15%;
  bottom: -9%;
  left: -14%;
  transform: rotate(-15deg);
}
@media (min-width: 991px) {
  #header-home .svg-group-4,
  #header-prive .svg-group-4 {
    bottom: -5%;
    left: -12%;
  }
}
#header-home .svg-group-4 #objects,
#header-prive .svg-group-4 #objects {
  width: 100%;
}

#header-prive #prive {
  font-size: 16.5vw;
  transform: rotate(1deg);
}
#header-prive #workshops {
  font-size: 16.5vw;
  transform: rotate(1deg);
}
@media (min-width: 991px) {
  #header-prive #workshops {
    font-size: var(--text-4xl);
  }
}

#header-home .quote-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
@media (min-width: 991px) {
  #header-home .quote-container {
    flex-direction: column;
  }
}
#header-home .quote {
  text-align: center;
  font-size: var(--text-m);
}
@media (min-width: 991px) {
  #header-home .quote {
    font-size: var(--text-s);
  }
}
#header-home .quote-2 {
  font-size: var(--text-xs);
}
@media (min-width: 991px) {
  #header-home .quote-2 {
    font-size: var(--text-xs);
  }
}

#header-prive .svg-group-1 {
  top: 10%;
  transform: translateY(-50%);
  left: -5%;
  width: 35%;
}
@media (min-width: 991px) {
  #header-prive .svg-group-1 {
    top: 20%;
    left: 4%;
    width: 25%;
  }
}
#header-prive .svg-group-2 {
  top: 8%;
  transform: translateY(-50%);
  right: -8%;
  width: 35%;
}
@media (min-width: 991px) {
  #header-prive .svg-group-2 {
    top: 18%;
    right: 2%;
    width: 25%;
  }
}
#header-prive .svg-group-2 #star-doodle {
  width: 10%;
  top: 54%;
  left: 85%;
  transform: rotate(15deg);
}
#header-prive .svg-group-2 #star-doodle-1 {
  width: 15%;
  top: 30%;
  left: 12%;
}
#header-prive .svg-group-2 #star-doodle-2 {
  width: 10%;
  top: 65%;
  left: 70%;
  transform: rotate(10deg);
}
#header-prive .svg-group-2 #objects {
  top: 10%;
  width: 90%;
  left: 10%;
}
#header-prive .svg-group-3 {
  display: none;
}
#header-prive .svg-group-4 {
  display: none;
}

#header-prive .quote-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
@media (min-width: 991px) {
  #header-prive .quote-container {
    flex-direction: column;
  }
}
#header-prive .quote {
  text-align: center;
  font-size: var(--text-m);
}
@media (min-width: 991px) {
  #header-prive .quote {
    font-size: var(--text-s);
  }
}
#header-prive .quote-2 {
  font-size: var(--text-s);
  display: none;
}
@media (min-width: 991px) {
  #header-prive .quote-2 {
    font-size: var(--text-xs);
    display: block;
  }
}

.sub-h3 {
  max-width: 400px;
  text-align: center;
}

.title-800 {
  max-width: 800px;
  text-align: center;
}

@media (min-width: 991px) {
  .title-m-container h2 {
    font-size: calc(var(--text-4xl) * 1.3);
  }
}
.title-m-container h3 {
  margin-top: calc(var(--space-xs) * -1);
}
@media (min-width: 991px) {
  .title-m-container h3 {
    margin-top: calc(var(--space-2xs) * -1);
    margin-bottom: var(--space-2xs);
  }
}
.title-m-container .icon-container-left {
  position: absolute;
  top: 0;
  left: -15%;
  width: var(--text-s);
}
.title-m-container .icon-container-left img {
  opacity: 0;
}
.title-m-container .icon-container-right {
  position: absolute;
  top: 0;
  right: -15%;
  width: var(--text-s);
}
.title-m-container .icon-container-right img {
  opacity: 0;
}
.title-m-container .title-m {
  position: relative;
}
.title-m-container .title-m .quote {
  position: absolute;
}
.title-m-container .title-m .quote:nth-child(2) {
  top: -20px;
  right: 0;
  transform: rotate(10deg);
}
.title-m-container .title-m .quote:nth-child(3) {
  top: -20px;
  right: 0;
}
.title-m-container .title-m .quote:nth-child(4) {
  top: -20px;
  right: 0;
}

.quote-fade-in {
  opacity: 0;
}

.fade-in-hero {
  opacity: 0;
}

.pretty-wrap {
  text-wrap: pretty;
}

.balance-wrap {
  text-wrap: balance;
}

.balance-wrap-m {
  text-wrap: balance;
}
@media (min-width: 991px) {
  .balance-wrap-m {
    text-wrap: pretty;
  }
}

.balance-wrap-d {
  text-wrap: pretty;
}
@media (min-width: 991px) {
  .balance-wrap-d {
    text-wrap: balance;
  }
}

/* BASE */
.blue-section h3,
.blue-section h4 {
  color: var(--darkBlue);
}

.blue-overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: var(--blue);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  top: 0;
  left: 0;
}

/* pink section */
.pink-section {
  background-color: var(--pink);
}
.pink-section h2 {
  color: var(--white);
}
.pink-section h3 {
  color: var(--darkPink);
}

/* lime section */
.lime-section {
  background-color: var(--lime);
}
.lime-section h2 {
  color: var(--black);
}
.lime-section h3 {
  color: var(--darkLime);
}

/* shape divider */
.shape-div-container {
  width: 100vw;
  overflow: hidden;
  /* fix for white lines */
  margin-bottom: -2px;
}
.shape-div-container img {
  width: 300vw;
  max-width: 300vw;
}
@media (min-width: 991px) {
  .shape-div-container img {
    width: 100%;
    max-width: 100%;
  }
}

.shape-div-container.bg-pink {
  background-color: var(--pink);
}

.shape-div-container.bg-lime {
  background-color: var(--lime);
}

.shape-div-container.top {
  margin-top: -2px;
  margin-bottom: 0;
}

.banner-container.blue .icon-dec .info-icon .fill {
  fill: var(--lightBlue);
}
.banner-container.blue .icon-dec .info-icon .stroke {
  fill: var(--darkBlue);
}
.banner-container.blue h3 {
  color: var(--darkBlue);
}
.banner-container.blue .wysiwyg p > a,
.banner-container.blue .wysiwyg p a {
  color: var(--darkBlue) !important;
  background-image: linear-gradient(to right, var(--darkBlue) 0%, var(--darkBlue) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .banner-container.blue .wysiwyg p > a:hover,
  .banner-container.blue .wysiwyg p a:hover {
    color: white !important;
    background-image: linear-gradient(to right, var(--darkBlue) 0%, var(--darkBlue) 100%);
    color: var(--black);
  }
}

.banner-container.blue .banner-svg .backdrop-banner {
  fill: var(--blue) !important;
}

.banner-container {
  width: 97%;
  max-width: 850px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.banner-container > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.banner-container .banner-text {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  padding: var(--space-s) var(--space-xs);
  text-align: center;
}
.banner-container h3 {
  color: var(--white);
}
.banner-container .icon-dec {
  position: absolute;
  top: -20px;
  height: 80px;
  right: -10px;
  width: 80px;
  z-index: 15;
  transform: rotate(10deg);
}
@media (min-width: 360px) {
  .banner-container .icon-dec {
    top: -40px;
  }
}
.banner-container .icon-container-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  z-index: 15;
  pointer-events: none;
  transform: translate(-40%, -40%);
}
.banner-container .icon-container-left .icon-dec {
  top: 0;
}
.banner-container .icon-container-left .icon-dec:nth-child(1) {
  width: 80px;
  height: 100px;
  top: 0;
  left: 0;
  transform: rotate(-10deg);
}
.banner-container .icon-container-left .icon-dec:nth-child(2) {
  width: 100px;
  height: 140px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
}
.banner-container .icon-container-left .icon-dec:nth-child(3) {
  width: 80px;
  height: 100px;
  bottom: -60px;
  top: auto;
  left: 0;
  transform: rotate(-20deg);
}
.banner-container .icon-container-right {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 150px;
  z-index: 15;
  transform: translate(40%, 20%);
}
.banner-container .icon-container-right .icon-dec {
  bottom: 0;
  top: auto;
}
.banner-container .icon-container-right .icon-dec:nth-child(1) {
  width: 80px;
  height: 100px;
  top: 0;
  right: 0;
  transform: rotate(10deg);
}
.banner-container .icon-container-right .icon-dec:nth-child(2) {
  width: 100px;
  height: 140px;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-15deg);
}
.banner-container .icon-container-right .icon-dec:nth-child(3) {
  width: 80px;
  height: 100px;
  bottom: -60px;
  top: auto;
  right: 0;
  transform: rotate(20deg);
}

.scale-up {
  transform: scale(0);
}

.logo.logo-sticky {
  display: none;
  width: var(--text-4xl);
  height: auto;
  padding-left: var(--space-xs);
  padding-top: var(--space-xs);
  padding-right: 0;
  padding-bottom: 0;
  margin: 0;
  transform: none;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-105%);
  bottom: auto;
  z-index: 500;
}
@media (min-width: 991px) {
  .logo.logo-sticky {
    display: block;
    left: -1%;
    left: max((100vw - 1920px) / 2 + 96px, 16px);
    padding-left: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .logo.logo-sticky:hover #main-logo {
    transform-origin: left top;
    transform: rotate(7deg) scale(1.5) translate(10px, -10px) !important;
  }
}

.disclaimer-container h4 {
  font-family: "font-secondary" !important;
}

.doodle-left-group-ag,
.doodle-right-group-ag {
  position: absolute;
  width: 50%;
  z-index: 1;
}
@media (min-width: 1536px) {
  .doodle-left-group-ag,
  .doodle-right-group-ag {
    width: 40%;
  }
}

.doodle-left-group-ag {
  transform-origin: bottom right;
  left: -15%;
  top: -15%;
  transform: rotate(20deg);
}
@media (min-width: 1536px) {
  .doodle-left-group-ag {
    left: -19%;
    top: -9%;
    transform: rotate(0deg);
  }
}

.doodle-right-group-ag {
  transform-origin: bottom left;
  right: -10%;
  top: -13%;
  transform: rotate(-8deg);
}
@media (min-width: 1536px) {
  .doodle-right-group-ag {
    right: -19%;
    top: -9%;
    transform: rotate(0deg);
  }
}

.agenda-listing-container .pin-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
  pointer-events: none;
}
.agenda-listing-container .pin-hack .whatsapp-agenda-btn,
.agenda-listing-container .pin-hack .info-agenda-btn {
  transform: scale(0);
  display: block;
  width: 15%;
  max-width: 100px;
  height: auto;
  z-index: 15;
  position: absolute;
  bottom: 2%;
  left: -2%;
  pointer-events: auto;
}
@media (min-width: 1366px) {
  .agenda-listing-container .pin-hack .whatsapp-agenda-btn,
  .agenda-listing-container .pin-hack .info-agenda-btn {
    left: -15%;
  }
}
.agenda-listing-container .pin-hack .info-agenda-btn {
  bottom: 20vw;
}
@media (min-width: 991px) {
  .agenda-listing-container .pin-hack .info-agenda-btn {
    bottom: 130px;
  }
}
.agenda-listing-container .pin-hack .info-agenda-btn .circle {
  fill: var(--brightBlue);
}

#agenda-info {
  background: transparent;
  box-shadow: none;
}

#banner-agenda,
#notice-banner {
  position: relative;
  margin-top: 50px;
  margin-bottom: var(--space-xs);
}
@media (min-width: 991px) {
  #banner-agenda,
  #notice-banner {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}
#banner-agenda .close-btn-nav,
#notice-banner .close-btn-nav {
  top: -5px;
  right: 7%;
  width: 40px;
  height: 40px;
}
@media (min-width: 991px) {
  #banner-agenda .close-btn-nav,
  #notice-banner .close-btn-nav {
    top: 7%;
    right: 5%;
    width: 60px;
    height: 60px;
  }
}
#banner-agenda .icon-dec.mob-s,
#notice-banner .icon-dec.mob-s {
  left: -2%;
  transform: rotate(-10deg);
}

.banner-container-agenda {
  position: relative;
  z-index: 10;
  width: 94%;
  max-width: 1366px;
  margin: auto;
}
@media (min-width: 991px) {
  .banner-container-agenda {
    width: 95%;
  }
}
.banner-container-agenda .agenda-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.agenda-listing-container {
  box-sizing: content-box;
  background-color: var(--blue);
  border-left: 5px solid var(--black);
  border-right: 12px solid var(--black);
  z-index: 2;
  width: 98.5%;
  margin-left: calc(-5px + 0.6%);
  margin-top: 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
}
@media (min-width: 991px) {
  .agenda-listing-container {
    margin-top: calc(var(--space-s) * -1);
    width: 99.1%;
    margin-left: calc(-10px + 0.4%);
    border-left: 10px solid var(--black);
    border-right: 20px solid var(--black);
    margin-left: calc(-10px + 0.6%);
  }
}
.agenda-listing-container h2 {
  font-size: calc(var(--text-4xl) * 0.85);
}
@media (min-width: 991px) {
  .agenda-listing-container h2 {
    font-size: calc(var(--text-4xl) * 1.2);
  }
}
.agenda-listing-container h2,
.agenda-listing-container h3,
.agenda-listing-container h4,
.agenda-listing-container p {
  color: var(--black);
  font-family: "font-secondary";
}

.agenda-listing-top,
.agenda-listing-bottom {
  position: relative;
  z-index: 1;
}

.top-title {
  padding-top: var(--space-s);
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}
.top-title p {
  margin-bottom: var(--space-s);
}

.ui-wrapper-agenda {
  margin: auto;
  width: 100%;
  position: relative;
}
@media (min-width: 991px) {
  .ui-wrapper-agenda {
    max-width: 70%;
  }
}

.gradient-fade {
  width: 100%;
  height: var(--space-m);
  background: linear-gradient(to bottom, rgb(185, 224, 254), rgba(185, 224, 254, 0));
  position: absolute;
  bottom: calc(var(--space-m) * -1 + 3px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 991px) {
  .gradient-fade {
    width: 120%;
  }
}

#scroll-over-workshop-doodles .gradient-fade {
  top: -10px;
  z-index: 10;
  height: var(--space-m);
  background: linear-gradient(180deg, rgb(185, 224, 254) 0%, rgb(185, 224, 254) 45%, rgba(185, 224, 254, 0) 100%);
}

.ui-agenda {
  position: sticky;
  /* some offset because of gsap fuckery on cached page */
  top: -10px;
  z-index: 14;
  padding-top: calc(var(--space-xs) + 10px);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  background-color: var(--blue);
}
.ui-agenda .star-group {
  display: none;
}
@media (min-width: 991px) {
  .ui-agenda {
    padding-top: calc(var(--space-s) * 0.7 + 10px);
  }
  .ui-agenda .star-group {
    position: absolute;
    display: none;
    z-index: 1000;
    width: 10%;
    height: 35px;
  }
  .ui-agenda .star-group img {
    bottom: 0;
    position: absolute;
    width: 50%;
    z-index: 1000;
  }
  .ui-agenda .active .star-group {
    display: block;
  }
  .ui-agenda .star-group.left {
    left: -6%;
    top: -27%;
  }
  .ui-agenda .star-group.left .star-1 {
    top: -15%;
    transform: rotate(-7deg);
  }
  .ui-agenda .star-group.left .star-2 {
    top: -60%;
    left: 50%;
    width: 100%;
  }
  .ui-agenda .star-group.left .star-3 {
    top: 5%;
    left: -90%;
    width: 100%;
    transform: rotate(-12deg);
  }
  .ui-agenda .star-group.right {
    right: -10%;
    bottom: -50%;
    width: 8%;
    height: 30px;
  }
  .ui-agenda .star-group.right .star-1 {
    top: -15%;
    transform: rotate(-7deg);
    width: 100%;
  }
  .ui-agenda .star-group.right .star-2 {
    top: -60%;
    left: 50%;
  }
  .ui-agenda .star-group.right .star-3 {
    top: 5%;
    left: -90%;
    transform: rotate(-12deg);
  }
}
@media (min-width: 1536px) {
  .ui-agenda {
    padding-top: var(--space-s);
  }
}
.ui-agenda .btn-wrapper {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  flex-wrap: nowrap;
  padding-bottom: var(--space-3xs);
  margin: auto;
}
@media (min-width: 1366px) {
  .ui-agenda .btn-wrapper {
    width: 60%;
    gap: var(--space-xs);
  }
}
.ui-agenda .gradient-fade {
  width: 100%;
  height: var(--space-m);
  background: linear-gradient(to bottom, rgb(185, 224, 254), rgba(185, 224, 254, 0));
  position: absolute;
  bottom: calc(var(--space-m) * -1 + 3px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 991px) {
  .ui-agenda .gradient-fade {
    width: 120%;
  }
}
.ui-agenda a {
  width: 30%;
}
.ui-agenda .btn-s-AG path {
  fill: var(--lightBlue);
}
.ui-agenda .btn-s-AG text {
  font-size: calc(var(--text-4xl) * 1.3);
}
@media (min-width: 991px) {
  .ui-agenda .btn-s-AG text {
    font-size: calc(var(--text-2xl));
  }
}
.ui-agenda .active {
  width: 38%;
}
.ui-agenda .active .btn-s-AG path {
  fill: var(--lime);
}
.ui-agenda .active text {
  font-size: calc(var(--text-4xl) * 1.5);
}
@media (min-width: 991px) {
  .ui-agenda .active text {
    font-size: calc(var(--text-2xl) * 1.1);
  }
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  margin: auto;
  margin-top: var(--space-s);
  margin-bottom: var(--space-m);
  width: 95%;
}
@media (min-width: 768px) {
  .agenda-list {
    margin-top: var(--space-m);
    max-width: 70%;
  }
}
@media (min-width: 991px) {
  .agenda-list .chapter-title {
    font-size: var(--text-2xl);
  }
}
.agenda-list h4 {
  padding-top: var(--space-xs);
  font-family: "font-body";
  font-size: var(--text-m);
}

.agenda-chapter {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (min-width: 1536px) {
  .agenda-chapter {
    scroll-margin-top: 17rem;
  }
}

.agenda-item {
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .agenda-item .agenda-item-link, .agenda-item {
    transition: var(--transition-s);
  }
  .agenda-item .agenda-item-link {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0);
  }
  .agenda-item.oto .agenda-item-link {
    box-shadow: 0 0 10px 10px rgba(255, 175, 232, 0) !important;
  }
  .agenda-item.gast-host .agenda-item-link {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0);
  }
  .agenda-item .agenda-item-link:hover {
    box-shadow: 0 0 10px 10px rgb(255, 255, 255);
  }
  .agenda-item.oto .agenda-item-link:hover {
    box-shadow: 0 0 10px 10px rgb(255, 175, 232) !important;
    background-color: var(--highlightPink) !important;
  }
  .agenda-item.gast-host .agenda-item-link:hover {
    box-shadow: 0 0 10px 10px rgb(255, 255, 255);
    background-color: var(--highlightLime);
  }
}
.agenda-item h3 {
  margin-top: 3%;
  font-family: "font-primary";
}
.agenda-item h4 {
  padding-top: var(--space-3xs);
}
.agenda-item .agenda-item-link {
  background-color: var(--white);
  padding: var(--space-2xs) var(--space-3xs);
  border-radius: 999em;
  border: 2px solid black;
  display: block;
}

.agenda-item.oto {
  margin-bottom: var(--space-s);
}
@media (min-width: 991px) {
  .agenda-item.oto {
    margin-bottom: 0;
  }
}
.agenda-item.oto .agenda-item-link {
  background-color: var(--lightPink) !important;
}

.agenda-item.gast-host {
  margin-bottom: var(--space-s);
}
@media (min-width: 991px) {
  .agenda-item.gast-host {
    margin-bottom: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .agenda-item.gast-host .agenda-gast-host-sticker:hover {
    transform: scale(1) rotate(0deg) translateY(35%);
  }
  .agenda-item.gast-host .agenda-gast-host-sticker:hover .front {
    fill: var(--lime);
  }
  .agenda-item.gast-host a .agenda-gast-host-sticker:hover {
    transform: scale(1.2) rotate(-10deg) translateY(55%);
  }
  .agenda-item.gast-host a .agenda-gast-host-sticker:hover .front {
    fill: var(--lightPink);
  }
}
.agenda-item.gast-host .agenda-item-link {
  background-color: var(--lime);
}

.agenda-item.extern-loc {
  margin-top: var(--space-xs);
}
@media (min-width: 991px) {
  .agenda-item.extern-loc {
    margin-top: var(--space-2xs);
  }
}
.agenda-item.extern-loc .ext-loc-container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .agenda-item.extern-loc .ext-loc-container a:hover {
    transform: scale(1.2);
  }
}
@media (min-width: 991px) {
  .agenda-item.extern-loc .ext-loc-container {
    transform: translate(-80%, -120%);
  }
}
.agenda-item.extern-loc .ext-loc-container a {
  display: inline-block;
  transition: var(--transition-s);
  transform-origin: bottom center;
}
.agenda-item.extern-loc .ext-loc-container h4 {
  font-size: var(--text-xs);
  font-family: "font-secondary";
  margin-bottom: var(--space-3xs);
}
@media (min-width: 991px) {
  .agenda-item.extern-loc .ext-loc-container h4 {
    font-size: var(--text-s);
  }
}
.agenda-item.extern-loc .ext-loc-container .ext-loc-icon {
  width: var(--text-s);
  margin: auto;
}

.agenda-listing-bottom {
  margin-top: 0px;
}
@media (min-width: 991px) {
  .agenda-listing-bottom {
    margin-top: calc(var(--space-s) * -1);
  }
}

.agenda-date-sticker {
  position: absolute;
  top: 0;
  bottom: auto;
  right: 0;
  transform: translate(15%, -60%);
  width: 23%;
  pointer-events: none;
}
@media (min-width: 991px) {
  .agenda-date-sticker {
    transform: translate(35%, -40%);
  }
}
.agenda-date-sticker .shadow {
  display: none;
}
.agenda-date-sticker .front {
  fill: var(--brightBlue);
}
.agenda-date-sticker span {
  font-size: clamp(16px, 7vw, 34px);
  transform: translate(-54%, -43%);
}

.agenda-oto-sticker {
  pointer-events: none;
  position: absolute;
  left: -2%;
  bottom: 0%;
  transform: translateY(55%);
}
@media (min-width: 991px) {
  .agenda-oto-sticker {
    width: 28%;
    max-width: 28%;
    left: 0;
    bottom: 50%;
    transform: translate(-40%, 50%);
  }
}
.agenda-oto-sticker .front {
  fill: var(--lightPink);
}
.agenda-oto-sticker span {
  font-size: clamp(8px, 4vw, 30px);
  margin-left: -3%;
}

.agenda-gast-host-sticker {
  position: absolute;
  right: -2%;
  bottom: 0%;
  transform: translateY(55%);
  width: 23%;
  z-index: 13;
}
@media (min-width: 991px) {
  .agenda-gast-host-sticker {
    max-width: 18%;
    transform: translateY(35%);
  }
}
.agenda-gast-host-sticker .front {
  fill: var(--lime);
}
.agenda-gast-host-sticker span {
  font-size: clamp(8px, 4.5vw, 24px);
  transform: translate(-50%, -50%);
  overflow-wrap: break-word;
  word-break: break-word;
}
.agenda-gast-host-sticker .text-small {
  font-size: clamp(8px, 3vw, 16px);
  margin-left: -3%;
}

.sticker-s-agenda {
  position: absolute;
  border-radius: 999em;
  border: 1px solid var(--black);
  padding: var(--space-3xs) var(--space-2xs);
  padding-bottom: 0;
}

.agenda-item.disabled .almost-sold-out {
  display: none;
}

.sticker-s-agenda.almost-sold-out {
  background-color: var(--brightBlue);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  text-wrap: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  font-size: var(--text-s);
}
@media (min-width: 991px) {
  .sticker-s-agenda.almost-sold-out {
    font-size: var(--text-m);
  }
}

.sticker-s-agenda.sub-cat {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  text-wrap: nowrap;
  background-color: var(--lightBlue);
  text-transform: uppercase;
  pointer-events: none;
  font-size: var(--text-s);
}
@media (min-width: 991px) {
  .sticker-s-agenda.sub-cat {
    font-size: var(--text-m);
  }
}

.info-icon {
  width: 100%;
  height: 100%;
}
.info-icon .fill {
  fill: var(--pink);
}
.info-icon .stroke {
  fill: var(--darkPink);
}

/* END BASE */
/*showcase text */
.showcase-container {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 991px) {
  .showcase-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
  }
}
@media (min-width: 991px) {
  .showcase-container .left-showcase {
    width: 30%;
    flex: 0 0 auto;
    position: relative;
  }
}
.showcase-container .left-showcase .title {
  z-index: 10;
  position: relative;
  width: 70%;
}
@media (min-width: 991px) {
  .showcase-container .left-showcase .title {
    width: 100%;
    transform: translateX(30%);
  }
}
.showcase-container .left-showcase .media-container {
  position: absolute;
  transform: rotate(-15deg);
  width: 95%;
}
@media (min-width: 991px) {
  .showcase-container .left-showcase .media-container {
    width: 85%;
  }
}
@media (min-width: 1536px) {
  .showcase-container .left-showcase .media-container {
    width: 100%;
  }
}
.showcase-container .left-showcase .media-container .quote-link {
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 40%;
}
@media (min-width: 991px) {
  .showcase-container .left-showcase .media-container .quote-link {
    bottom: -4%;
    left: -4%;
  }
}
.showcase-container .left-showcase .media-container .quote {
  position: absolute;
  top: -7%;
  left: -18%;
  transform: rotate(-20deg);
  text-align: center;
}
.showcase-container .right-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.showcase-container .right-showcase h4 {
  font-size: var(--text-2xl);
  text-align: left;
  text-wrap: balance;
}
@media (min-width: 480px) {
  .showcase-container .right-showcase h4 {
    font-size: var(--text-3xl);
  }
}
@media (min-width: 991px) {
  .showcase-container .right-showcase h4 {
    font-size: var(--text-xl);
    text-wrap: balance;
  }
}
.showcase-container .right-showcase .showcase-text {
  display: flex;
  flex-direction: row;
  gap: var(--space-2xs);
}
@media (min-width: 991px) {
  .showcase-container .right-showcase .showcase-text {
    gap: var(--space-xs);
  }
}
@media (min-width: 991px) {
  .showcase-container .right-showcase .showcase-text:nth-child(1) .showcase-text-container {
    padding-left: 10%;
  }
}
.showcase-container .right-showcase .showcase-text-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 991px) {
  .showcase-container .right-showcase .showcase-text-container {
    width: 70%;
  }
}
.showcase-container .right-showcase .mobile-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-2xs);
}
@media (min-width: 360px) {
  .showcase-container .right-showcase .mobile-container {
    gap: var(--space-2xs);
  }
}
.showcase-container .right-showcase .text-container-m {
  display: flex;
  align-items: flex-end; /* Align h4 to bottom */
  flex: 0 0 70%; /* Don't grow, can shrink, preferred 30% */
  min-width: 0; /* Allow flex item to shrink below content size */
}
.showcase-container .right-showcase .art-container {
  display: flex;
}
.showcase-container .right-showcase .art-container img {
  width: 100%;
  height: auto;
  max-width: 120px;
}
@media (min-width: 991px) {
  .showcase-container .right-showcase .art-container img {
    max-width: 160px;
  }
}
.btn-showcase {
  margin-top: -50px;
}

/* showcase section specific styling */
/* home sip */
#sip-showcase #sip-media {
  top: -30%;
  transform: rotate(30deg);
  z-index: 5;
}
@media (min-width: 991px) {
  #sip-showcase #sip-media {
    top: 38%;
    left: 25%;
    transform: rotate(-10deg);
    z-index: 5;
  }
}
@media (min-width: 1536px) {
  #sip-showcase #sip-media {
    top: 28%;
    left: 12%;
  }
}
@media (min-width: 1920px) {
  #sip-showcase #sip-media {
    left: 15%;
  }
}
#sip-showcase .right-showcase {
  margin-top: -5%;
}
@media (min-width: 480px) {
  #sip-showcase .right-showcase {
    margin-top: -20%;
  }
}
@media (min-width: 991px) {
  #sip-showcase .right-showcase {
    margin-top: 0px;
  }
}
#sip-showcase .arrow-dec {
  top: 7%;
  right: 25%;
  transform: scaleX(-1) rotate(20deg);
  width: 40%;
  max-width: 60px;
}
@media (min-width: 360px) {
  #sip-showcase .arrow-dec {
    top: 10%;
  }
}
@media (min-width: 991px) {
  #sip-showcase .arrow-dec {
    top: 10%;
    right: -44%;
    transform: scaleX(-1) rotate(20deg);
  }
}
#sip-showcase #arrow-sip-2 {
  top: 20%;
  right: -44%;
  transform: scaleX(1) rotate(20deg);
}
#sip-showcase .player-container {
  height: 94%;
}
#sip-showcase iframe {
  height: 120%;
}

#sip-title {
  width: 60%;
}
@media (min-width: 991px) {
  #sip-title {
    width: 100%;
  }
}

/* home - and make */
#and-make-showcase {
  margin-top: 400px;
}
@media (min-width: 991px) {
  #and-make-showcase {
    margin-top: 0;
    flex-direction: row-reverse;
  }
}
#and-make-showcase .showcase-text:nth-child(2) .showcase-text-container {
  margin-top: 400px;
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text:nth-child(2) .showcase-text-container {
    margin-top: 0;
  }
}
#and-make-showcase .arrow-dec {
  top: 10%;
  right: 5%;
  transform: scaleX(-1) rotate(20deg);
  width: 35px;
}
@media (min-width: 360px) {
  #and-make-showcase .arrow-dec {
    top: 12%;
    right: 5%;
  }
}
@media (min-width: 480px) {
  #and-make-showcase .arrow-dec {
    top: 15%;
    right: 5%;
    width: 60px;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .arrow-dec {
    width: 50px;
    left: 0%;
    right: -44%;
    transform: scaleX(1) rotate(20deg);
  }
}
@media (min-width: 991px) {
  #and-make-showcase .arrow-1 {
    left: -138%;
    top: 11%;
    width: 80px;
    transform: scaleX(1) rotate(65deg);
  }
}
@media (min-width: 991px) {
  #and-make-showcase .arrow-2 {
    left: -40%;
    top: 25%;
    width: 70px;
    transform: scaleX(1) rotate(5deg);
  }
}
@media (min-width: 991px) {
  #and-make-showcase .arrow-3 {
    left: -24%;
    top: 31%;
    width: 115px;
    transform: scaleX(1) rotate(0deg);
  }
}
#and-make-showcase .player-container {
  width: 82%;
  height: 89%;
}
#and-make-showcase iframe {
  height: 100%;
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text {
    flex-direction: row-reverse;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text:nth-child(1) .showcase-text-container {
    padding-left: 0;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text:nth-child(2) .showcase-text-container {
    width: 60%;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text:nth-child(3) .showcase-text-container {
    width: 70%;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .showcase-text:nth-child(3) {
    transform: translateX(20%);
  }
}
@media (min-width: 991px) {
  #and-make-showcase .art-container {
    justify-content: end;
  }
}
@media (min-width: 991px) {
  #and-make-showcase .right-showcase {
    margin-top: 300px;
  }
}

#and-make-title {
  width: 100%;
}
@media (min-width: 991px) {
  #and-make-title {
    transform: translateX(-70%);
    width: 160%;
    max-width: 160%;
  }
}

#and-make-media {
  z-index: 5;
}
@media (min-width: 991px) {
  #and-make-media {
    transform: rotate(5deg);
    top: 25%;
    left: 10%;
    width: 85%;
  }
}

/* doodle specific widths */
#creatief-doodle-showcase {
  max-width: 110px;
}

#open-sign-doodle-showcase {
  width: 100%;
}

/* Hero */
#hero-section {
  position: relative;
  padding-top: var(--space-xs);
}
@media (min-width: 991px) {
  #hero-section {
    padding: 0;
    min-height: 750px;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
@media (min-width: 1536px) {
  #hero-section {
    margin-top: 0;
  }
}
#hero-section .logo-container {
  gap: var(--space-m);
}
@media (min-width: 991px) {
  #hero-section .logo-container {
    gap: var(--space-xs);
  }
}

#blur-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(185, 224, 254, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  z-index: 11;
  pointer-events: none;
}

.logo-hero {
  width: 100%;
  max-width: 600px;
}
@media (min-width: 1536px) {
  .logo-hero {
    max-width: 700px;
  }
}
@media (min-width: 1920px) {
  .logo-hero {
    max-width: 800px;
  }
}

/* quotes text container */
.quote-text-container {
  flex: 1;
  max-width: 225px;
}
.quote-text-container h3 {
  text-align: inherit;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2xs);
}
.quote-text-container h4 {
  text-align: inherit;
  font-size: var(--text-m);
  text-wrap: auto;
  padding-right: 20px;
}

.prive-container .quote-text-container {
  max-width: fit-content;
}
.prive-container .quote-text-container h4 {
  padding-left: 20px;
  max-width: 235px;
}

.prive-container {
  opacity: 1;
}
.splash-complete .prive-container {
  animation: fadeInHero 0.6s ease-in-out forwards;
  animation-delay: 0.3s;
}

.about-container {
  opacity: 1;
}
.splash-complete .about-container {
  animation: fadeInHero 0.6s ease-in-out forwards;
  animation-delay: 0.7s;
}

@keyframes fadeInHero {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* desktop edits */
/* about hero */
.about-container.desk-s {
  /* fix for 991 - 1300 */
  top: 50%;
  left: -140px;
  width: 150px;
  height: 300px;
}
.about-container.desk-s h3 {
  position: absolute;
  left: 0px;
  font-size: 40px;
  top: -30px;
}
.about-container.desk-s h4 {
  position: absolute;
  left: 0px;
  top: 65px;
  font-size: 20px;
}
.about-container.desk-s .quote-text-container {
  width: 100%;
  max-width: 100%;
}
.about-container.desk-s .quote-link {
  left: 0;
  top: 150px;
  width: 100%;
}
.about-container.desk-s .tag-container {
  bottom: 0;
  position: absolute;
  height: 50px;
  width: 100px;
}
.about-container.desk-s .tag-container h5 {
  font-size: 14px;
}
.about-container.desk-s .tag-container .tag-1 {
  position: absolute;
  top: 0;
  left: -5px;
}
.about-container.desk-s .tag-container .tag-2 {
  position: absolute;
  top: 0px;
  right: -5px;
}
.about-container.desk-s .tag-container .tag-3 {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  left: 50%;
}
.about-container.desk-s .arrow-dec {
  bottom: 0;
  right: -30px;
  rotate: 90deg;
}
.about-container.desk-s {
  /* 1300 upwards */
}
@media (min-width: 1300px) {
  .about-container.desk-s {
    top: 50%;
    left: -320px;
    width: 260px;
    height: 200px;
  }
  .about-container.desk-s h3 {
    top: auto;
    left: 10px;
    font-size: 40px;
  }
  .about-container.desk-s h4 {
    left: auto;
    right: 0px;
    top: 65px;
  }
  .about-container.desk-s .quote-text-container {
    width: 100%;
    max-width: 100%;
  }
  .about-container.desk-s .quote-link {
    left: 0;
    top: 50px;
    width: 45%;
  }
  .about-container.desk-s .tag-container {
    bottom: 0;
    height: 50px;
    width: 100px;
  }
  .about-container.desk-s .tag-container .tag-1 {
    top: 0;
    left: -5px;
  }
  .about-container.desk-s .tag-container .tag-2 {
    top: 0px;
    right: -5px;
  }
  .about-container.desk-s .tag-container .tag-3 {
    top: 20px;
    transform: translateX(-50%);
    left: 50%;
  }
  .about-container.desk-s .arrow-dec {
    bottom: 0;
    rotate: 90deg;
  }
}

/* prive hero */
.prive-container.desk-s {
  /* fix for 991 - 1300 */
  top: 15%;
  right: -150px;
  width: 150px;
  height: 400px;
}
.prive-container.desk-s h3 {
  position: absolute;
  left: 0px;
  font-size: 40px;
  top: 0px;
}
.prive-container.desk-s h4 {
  position: absolute;
  left: 0px;
  top: 130px;
  font-size: 20px;
}
.prive-container.desk-s .quote-text-container {
  width: 100%;
  max-width: 100%;
}
.prive-container.desk-s .quote-link {
  left: 20px;
  top: 270px;
  width: 100%;
}
.prive-container.desk-s .tag-container {
  bottom: 0;
  position: absolute;
  height: 50px;
  width: 100px;
}
.prive-container.desk-s .tag-container h5 {
  font-size: 14px;
}
.prive-container.desk-s .tag-container .tag-1 {
  position: absolute;
  top: 0;
  left: -5px;
}
.prive-container.desk-s .tag-container .tag-2 {
  position: absolute;
  top: 0px;
  right: -5px;
}
.prive-container.desk-s .tag-container .tag-3 {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  left: 50%;
}
.prive-container.desk-s .arrow-dec {
  top: 0;
  bottom: auto;
  left: -90px;
  top: -60px;
  rotate: 270deg;
}
.prive-container.desk-s {
  /* 1300 upwards */
}
@media (min-width: 1300px) {
  .prive-container.desk-s {
    top: 0%;
    right: -310px;
    width: 325px;
    height: 200px;
  }
  .prive-container.desk-s h3 {
    top: auto;
    left: 0px;
    font-size: 40px;
  }
  .prive-container.desk-s h4 {
    right: auto;
    top: 95px;
    max-width: 245px;
  }
  .prive-container.desk-s .quote-text-container {
    width: 100%;
    max-width: 100%;
  }
  .prive-container.desk-s .quote-link {
    right: 0px;
    left: auto;
    top: 50px;
    width: 45%;
  }
  .prive-container.desk-s .tag-container {
    bottom: 0;
    height: 50px;
    width: 100px;
  }
  .prive-container.desk-s .tag-container .tag-1 {
    top: 0;
    left: -5px;
  }
  .prive-container.desk-s .tag-container .tag-2 {
    top: 0px;
    right: -5px;
  }
  .prive-container.desk-s .tag-container .tag-3 {
    top: 20px;
    transform: translateX(-50%);
    left: 50%;
  }
  .prive-container.desk-s .arrow-dec {
    top: -20px;
    bottom: auto;
    left: -75px;
    right: auto;
  }
}
@media (min-width: 1536px) {
  .prive-container.desk-s .arrow-dec {
    left: -100px;
  }
}
@media (min-width: 1920px) {
  .prive-container.desk-s {
    right: -240px;
  }
}

/* decorative elements */
.arrow-dec {
  position: absolute;
  bottom: -80px;
  right: 0;
  transform: scaleX(-1);
  width: 60px;
}
@media (min-width: 360px) {
  .arrow-dec {
    bottom: -65px;
    width: 50px;
  }
}

.arrow-dec img {
  width: 100%;
  height: auto;
}

/* frames */
/* SVG Image Frame Styles */
.svg-image-frame {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  /* dont think i need this anymore 
  aspect-ratio: 531.7 / 899; */
}

.svg-image-frame .desktop-image {
  display: none;
}

.svg-image-frame .mobile-image {
  display: block;
}

/* SVG Video Frame Styles */
.svg-video-frame {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* wrapper to mask the actual iframe */
.player-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: 92%;
  overflow: hidden;
  z-index: 3;
}

.player-container iframe {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

/* Vimeo Mute Button Styles */
.vimeo-mute-btn {
  position: absolute;
  z-index: 5;
  bottom: 5%;
  right: 7%;
  background: rgba(0, 0, 0, 0.7);
  padding: 2%;
  border-radius: 50%;
  width: 20%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.vimeo-mute-btn.vimeo-btn-ready {
  opacity: 1;
  transform: scale(1);
}

#and-make-media .vimeo-mute-btn {
  bottom: 8%;
  right: 12%;
}

/* 991px + responsive behavior */
@media (min-width: 768px) {
  .svg-image-frame .desktop-image {
    display: block;
  }
  .svg-image-frame .mobile-image {
    display: none;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .svg-image-frame {
    /* Ensure crisp rendering on retina displays */
    shape-rendering: geometricPrecision;
  }
}
.frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.frame-decoration {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-images-container {
  width: 160vw;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  gap: 5px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 20%) scale(0.6);
  transform-origin: top;
  top: 0;
  z-index: 15;
}
@media (min-width: 400px) {
  .hero-images-container {
    transform: translate(-50%, -10%) scale(0.6);
  }
}
@media (min-width: 480px) {
  .hero-images-container {
    transform: translate(-50%, -10%) scale(0.6);
  }
}
@media (min-width: 991px) {
  .hero-images-container {
    width: 70%;
    transform: translate(-50%, -5%) scale(0.6);
    max-width: 1250px;
  }
}

#hero-left-img,
#workshops-left-img {
  margin-top: var(--space-s);
  transform: rotate(-10deg) translateX(60%);
  will-change: transform;
  z-index: 2;
}

#hero-center-img,
#workshops-center-img {
  z-index: 3;
}

#hero-right-img,
#workshops-right-img {
  margin-top: var(--space-s);
  transform: rotate(10deg) translateX(-60%);
  will-change: transform;
  z-index: 2;
}

.doodles-hero-left-container {
  position: absolute;
  top: 0%;
  left: -10%;
  width: 100%;
  height: 150px;
  transform: scale(0.5);
  transform-origin: top;
}
.doodles-hero-left-container #plant-1-doodle {
  top: 0;
  left: -10%;
  width: 50%;
}
.doodles-hero-left-container #stripes-1-doodle {
  top: -60%;
  left: 10%;
  width: 20%;
}
@media (min-width: 991px) {
  .doodles-hero-left-container #stripes-1-doodle {
    top: 80%;
    left: 28%;
    width: 12%;
  }
}
.doodles-hero-left-container #paintbrush-1-doodle {
  top: -70%;
  left: 30%;
  width: 50%;
}
.doodles-hero-left-container #paintbrush-2-doodle {
  top: -75%;
  left: 60%;
  width: 40%;
}

.doodles-hero-left-container img {
  position: absolute;
}

.doodles-hero-right-container {
  position: absolute;
  top: 0%;
  right: -10%;
  width: 100%;
  height: 150px;
  transform: scale(0.5);
  transform-origin: top;
}
.doodles-hero-right-container #prikker-doodle {
  top: -80%;
  right: 50%;
  width: 50%;
}
.doodles-hero-right-container #wine-bottle-doodle {
  top: -50%;
  right: 25%;
  width: 50%;
}
.doodles-hero-right-container #yapyapyap-doodle {
  top: -40%;
  right: -10%;
  width: 50%;
}
@media (min-width: 991px) {
  .doodles-hero-right-container #yapyapyap-doodle {
    top: -30%;
    right: -13%;
    width: 50%;
  }
}
.doodles-hero-right-container #line-cutter-doodle {
  top: 40%;
  right: -25%;
  width: 50%;
}
@media (min-width: 991px) {
  .doodles-hero-right-container #line-cutter-doodle {
    top: 190%;
    right: -5%;
    width: 50%;
  }
}
.doodles-hero-right-container #stripes-2-doodle {
  top: 150%;
  right: -20%;
  width: 20%;
}
@media (min-width: 991px) {
  .doodles-hero-right-container #stripes-2-doodle {
    top: 193%;
    right: 16%;
    width: 13%;
  }
}

.doodles-hero-right-container img {
  position: absolute;
}

/* hero title section  - home page*/
.home #hero-title-section {
  padding-top: 0;
  margin-top: calc(var(--space-4xl) * 1.3);
  scroll-margin-top: 300px;
}
@media (min-width: 991px) {
  .home #hero-title-section {
    margin-top: var(--space-2xl);
    scroll-margin-top: 400px;
  }
}

/* fix for targetting the same trigger as pin in the hero section */
@media (min-width: 991px) {
  .pin-fix {
    z-index: 20;
    position: relative;
  }
}

.insta-highlight-link h4 {
  font-size: var(--text-m);
}

.insta-highlight {
  width: 100%;
  max-width: 350px;
  transition: var(--transition-s);
  transform-origin: center bottom;
}

.insta-highlight .insta-blue {
  transition: var(--transition-s);
}

.insta-highlight .insta-blue {
  fill: var(--lightBlue);
}

@media (hover: hover) and (pointer: fine) {
  .insta-highlight-link:hover .insta-blue {
    fill: var(--pink);
  }
  .insta-highlight-link:hover .insta-highlight {
    transform: scale(1.5);
  }
}
/* workshops section */
.workshops-shape-div {
  margin-top: -130px;
  position: relative;
  z-index: 10;
}
@media (min-width: 991px) {
  .workshops-shape-div {
    margin-top: -130px;
    position: relative;
    z-index: 20;
  }
}

#images-container-workshops {
  top: -120px;
  pointer-events: none;
  width: 150vw;
  z-index: 20;
  transform: translate(-50%, 0%) scale(0.6);
}
@media (min-width: 991px) {
  #images-container-workshops {
    top: -200px;
    width: 100%;
    transform: translate(-50%, 0%) scale(0.6);
  }
}
#images-container-workshops .eyes-doodle {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  z-index: 10;
}
#images-container-workshops #right-arm-workshop {
  position: absolute;
  bottom: -40%;
  right: 8%;
  width: 40%;
  z-index: 1;
  transform-origin: top left;
}
#images-container-workshops #left-arm-workshop {
  position: absolute;
  bottom: -40%;
  left: 13%;
  width: 43%;
  z-index: 1;
  transform-origin: top right;
}
#images-container-workshops #paint-doodle-workshops-1,
#images-container-workshops #paint-doodle-workshops-2,
#images-container-workshops #paint-doodle-workshops-3,
#images-container-workshops #paint-doodle-workshops-4,
#images-container-workshops #paint-doodle-workshops-5,
#images-container-workshops #paint-doodle-workshops-6,
#images-container-workshops #paint-doodle-workshops-7,
#images-container-workshops #paint-doodle-workshops-8 {
  position: absolute;
  width: 20%;
  z-index: 15;
}
#images-container-workshops #paint-doodle-workshops-1 {
  bottom: -60%;
  left: 70%;
  transform: rotate(10deg);
  width: 15%;
  z-index: 16;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-1 {
    left: 90%;
    bottom: -40%;
  }
}
#images-container-workshops #paint-doodle-workshops-2 {
  bottom: -40%;
  left: 50%;
  width: 10%;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-2 {
    bottom: -30%;
  }
}
#images-container-workshops #paint-doodle-workshops-3 {
  bottom: -105%;
  left: 20%;
  width: 25%;
  transform: rotate(-20deg);
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-3 {
    left: 5%;
    bottom: -60%;
  }
}
#images-container-workshops #paint-doodle-workshops-4 {
  bottom: -50%;
  left: 20%;
  width: 3%;
  transform: rotate(10deg);
  z-index: 0;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-4 {
    left: 5%;
    bottom: -60%;
  }
}
#images-container-workshops #paint-doodle-workshops-5 {
  bottom: -100%;
  left: 40%;
  width: 4%;
  transform: rotate(20deg);
  z-index: 0;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-5 {
    left: 10%;
    bottom: -60%;
  }
}
#images-container-workshops #paint-doodle-workshops-6 {
  bottom: -60%;
  left: 50%;
  width: 3%;
  transform: rotate(10deg);
  z-index: 0;
}
#images-container-workshops #paint-doodle-workshops-7 {
  bottom: -80%;
  left: 60%;
  width: 3%;
  transform: rotate(10deg);
  z-index: 0;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-7 {
    left: 80%;
    bottom: -60%;
  }
}
#images-container-workshops #paint-doodle-workshops-8 {
  bottom: -80%;
  left: 70%;
  width: 3%;
  transform: rotate(10deg);
  z-index: 0;
}
@media (min-width: 991px) {
  #images-container-workshops #paint-doodle-workshops-8 {
    left: 90%;
    bottom: -60%;
  }
}

#stars-bg-studio {
  position: absolute;
  top: -100px;
  left: -78%;
  width: 200vw;
  max-width: 200vw;
}
@media (min-width: 991px) {
  #stars-bg-studio {
    max-width: 970px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    top: 0;
  }
}

.studio-section {
  row-gap: var(--space-s);
}
@media (min-width: 991px) {
  .studio-section {
    row-gap: var(--space-xs);
  }
}

#workshop-title {
  margin-top: 700px;
  margin-bottom: 100px;
}
#workshop-title .title-m {
  position: relative;
}
#workshop-title .title-m .quote {
  position: absolute;
}
#workshop-title .title-m .quote:nth-child(2) {
  top: -20px;
  right: 140px;
  transform: rotate(-2deg);
}
@media (min-width: 991px) {
  #workshop-title .title-m .quote:nth-child(2) {
    top: -20px;
    right: -60px;
  }
}
#workshop-title .title-m .quote:nth-child(3) {
  top: calc(-20px - var(--text-s));
  right: 50px;
  transform: rotate(2deg);
}
@media (min-width: 991px) {
  #workshop-title .title-m .quote:nth-child(3) {
    right: -103px;
    top: 0;
  }
}
#workshop-title .title-m .quote:nth-child(4) {
  top: -20px;
  right: 10px;
  transform: rotate(0deg);
}
@media (min-width: 991px) {
  #workshop-title .title-m .quote:nth-child(4) {
    right: -130px;
    top: 20px;
  }
}
#workshop-title h2 {
  z-index: 1;
}
#workshop-title > h3 {
  text-align: center;
  transform: rotate(-2deg);
  margin-top: calc(var(--space-2xs) * -1);
  margin-bottom: 0;
}
@media (min-width: 991px) {
  #workshop-title > h3 {
    max-width: 50%;
  }
}
#workshop-title .btn-group-l {
  margin-top: -35px;
  z-index: 1;
}
@media (min-width: 991px) {
  #workshop-title .btn-group-l {
    margin-top: -40px;
  }
}
@media (min-width: 991px) {
  #workshop-title {
    margin-top: 1200px;
    margin-bottom: 0px;
  }
}

@media (min-width: 991px) {
  #studio-doodle-workshops {
    max-width: 500px;
    margin: auto;
  }
}

.showcase-ws-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (min-width: 991px) {
  .showcase-ws-container {
    width: 70%;
    max-width: 900px;
  }
}
.showcase-ws-container .title-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
}
.showcase-ws-container .title {
  width: 90%;
}
.showcase-ws-container .title-icon {
  transform: scaleX(-1) translate(10%, 40%) rotate(20deg);
}
@media (min-width: 991px) {
  .showcase-ws-container .title-icon {
    width: 70px;
    flex-shrink: 0;
  }
}
.showcase-ws-container .bottom-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (min-width: 991px) {
  .showcase-ws-container .bottom-container {
    flex-direction: row-reverse;
  }
}
.showcase-ws-container .text-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 991px) {
  .showcase-ws-container .text-container {
    width: 50%;
  }
}
.showcase-ws-container .text-container h4 {
  font-size: var(--text-m);
  text-align: left;
}
.showcase-ws-container .text-container .extra-info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xs);
}
@media (min-width: 991px) {
  .showcase-ws-container .text-container .extra-info {
    min-height: 220px;
  }
}
.showcase-ws-container .text-container .info-icon {
  width: 30%;
  max-width: 20px;
  height: auto;
}
.showcase-ws-container .text-container .info-icon .fill {
  fill: var(--lightPink);
}
.showcase-ws-container .text-container .extra-info-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.showcase-ws-container .scroll-wrapper {
  position: relative;
  height: 150px;
  width: 100%;
}
@media (min-width: 991px) {
  .showcase-ws-container .scroll-wrapper {
    width: 50%;
  }
}
.showcase-ws-container .media-container {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-55%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 991px) {
  .showcase-ws-container .media-container {
    align-items: start;
    transform: translateX(-50%);
  }
}
.showcase-ws-container .media-container .left-picture,
.showcase-ws-container .media-container .right-picture {
  margin-left: -15%;
  width: 90%;
  flex-shrink: 0;
}
@media (min-width: 991px) {
  .showcase-ws-container .media-container .left-picture,
  .showcase-ws-container .media-container .right-picture {
    width: 100%;
    margin-left: 0;
  }
}
.showcase-ws-container .media-container .left-picture {
  margin-right: -30%;
  z-index: 1;
  position: relative;
  transform: rotate(-10deg);
}
@media (min-width: 991px) {
  .showcase-ws-container .media-container .left-picture {
    width: 100%;
    transform: rotate(-5deg);
    margin-right: 0%;
  }
}
.showcase-ws-container .media-container .right-picture {
  margin-left: -20px;
  z-index: 2;
  position: relative;
  width: 50%;
}
@media (min-width: 991px) {
  .showcase-ws-container .media-container .right-picture {
    width: 80%;
    margin-left: -70%;
    margin-top: -35%;
  }
}

/* showcase specific styling */
#gutsen-showcase .title-container {
  width: 80%;
}
#gutsen-showcase .right-picture {
  margin-left: -10%;
  margin-top: -35%;
  width: 90%;
}
@media (min-width: 991px) {
  #gutsen-showcase .right-picture {
    margin-left: -70%;
    margin-top: -45%;
  }
}
#gutsen-showcase .title-icon {
  transform: scaleX(-1) translate(10%, -20%) rotate(20deg);
}
@media (min-width: 991px) {
  #gutsen-showcase .title-icon {
    transform: scaleX(-1) translate(10%, -20%) rotate(20deg);
  }
}
@media (min-width: 991px) {
  #gutsen-showcase .media-container {
    left: 43%;
  }
}

#kleien-showcase .title-container {
  width: 80%;
}
@media (min-width: 991px) {
  #kleien-showcase .title-container {
    width: 80%;
  }
}
@media (min-width: 991px) {
  #kleien-showcase .bottom-container {
    flex-direction: row;
  }
}
@media (min-width: 991px) {
  #kleien-showcase .title-container {
    flex-direction: row-reverse;
  }
}
#kleien-showcase .title-icon {
  width: 10%;
}
@media (min-width: 991px) {
  #kleien-showcase .title-icon {
    transform: scaleX(1) translate(-20%, 20%) rotate(55deg);
    width: 70px;
  }
}
#kleien-showcase .left-picture {
  margin-left: -5%;
}
@media (min-width: 991px) {
  #kleien-showcase .left-picture {
    margin-left: -10%;
  }
}
#kleien-showcase .right-picture {
  width: 60%;
  margin-top: -40%;
}

@media (min-width: 991px) {
  #schilderen-showcase {
    width: 80%;
    max-width: 100%;
    margin-top: -100px;
  }
  #schilderen-showcase .title {
    width: 100%;
  }
}
@media (min-width: 991px) and (min-width: 991px) {
  #schilderen-showcase .title-icon {
    transform: scaleX(1) translate(30%, 30%) rotate(10deg);
  }
}
#schilderen-showcase .media-container {
  transform: translateX(-45%);
}
@media (min-width: 991px) {
  #schilderen-showcase .media-container {
    transform: translateX(-50%);
  }
}
@media (min-width: 991px) {
  #schilderen-showcase .title-icon {
    width: 50px;
    transform: scaleX(-1) translate(0%, 20%) rotate(30deg);
  }
}

@media (min-width: 991px) {
  #gasthosts-showcase {
    width: 80%;
    max-width: 100%;
  }
  #gasthosts-showcase .title {
    width: 100%;
  }
  #gasthosts-showcase .title-container {
    flex-direction: row-reverse;
  }
}
@media (min-width: 991px) and (min-width: 991px) {
  #gasthosts-showcase .title-icon {
    transform: scaleX(1) translate(30%, 30%) rotate(10deg);
  }
}
@media (min-width: 991px) {
  #gasthosts-showcase .bottom-container {
    flex-direction: row;
  }
}
#gasthosts-showcase .right-picture {
  width: 65%;
}
@media (min-width: 991px) {
  #gasthosts-showcase .right-picture {
    width: 100%;
    margin-left: -40%;
    margin-top: -40%;
  }
}
#gasthosts-showcase .left-picture {
  margin-left: -5%;
}
@media (min-width: 991px) {
  #gasthosts-showcase .left-picture {
    width: 50%;
    margin-top: 15%;
    margin-right: 10%;
    z-index: 3;
  }
}

#agenda-title h2 {
  font-size: calc(var(--text-4xl) * 1.5);
}
@media (min-width: 991px) {
  #agenda-title h2 {
    font-size: calc(var(--text-4xl) * 1.2);
  }
}
#agenda-title .icon-container-left {
  left: -5%;
}
@media (min-width: 991px) {
  #agenda-title .icon-container-left {
    left: 0%;
  }
}
#agenda-title .icon-container-left .square-lime-1 {
  width: 40%;
  transform: rotate(-25deg);
  margin-left: -10px;
}
#agenda-title .icon-container-left .square-lime-2 {
  width: 60%;
  transform: rotate(-15deg);
  margin-bottom: 3px;
}
#agenda-title .icon-container-left .square-lime-3 {
  margin-left: -10px;
}
#agenda-title .icon-container-right {
  bottom: 10%;
  top: auto;
  right: -10%;
}
@media (min-width: 991px) {
  #agenda-title .icon-container-right {
    right: -5%;
  }
}
#agenda-title .icon-container-right .square-lime-1 {
  width: 40%;
  transform: rotate(15deg);
}
@media (min-width: 991px) {
  #agenda-title .icon-container-right .square-lime-1 {
    width: 60%;
  }
}
#agenda-title .icon-container-right .square-lime-2 {
  width: 80%;
  transform: rotate(-5deg);
  margin-left: 5px;
}
@media (min-width: 991px) {
  #agenda-title .icon-container-right .square-lime-2 {
    width: 100%;
  }
}

.gallery-image-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
@media (min-width: 991px) {
  .gallery-image-container {
    flex-wrap: nowrap;
    padding: var(--space-xs);
  }
}
.gallery-image-container .svg-image-frame {
  transform: rotate(0);
  flex: 1 1 calc(50% - var(--space-2xs) / 2);
}
.gallery-image-container .svg-image-frame:only-child {
  flex: 1 1 100%;
}
@media (min-width: 991px) {
  .gallery-image-container .svg-image-frame {
    flex: 0 1 auto;
  }
}

.gallery-image-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
@media (min-width: 991px) {
  .gallery-image-container {
    flex-wrap: nowrap;
    padding: var(--space-xs);
  }
}
.gallery-image-container .svg-image-frame {
  transform: rotate(0);
  flex: 1 1 calc(50% - var(--space-2xs) / 2);
}
.gallery-image-container .svg-image-frame:only-child {
  flex: 1 1 100%;
}
@media (min-width: 991px) {
  .gallery-image-container .svg-image-frame {
    flex: 0 1 auto;
  }
}

#container-2-prive p {
  max-width: 600px;
  flex-shrink: 0;
}
@media (min-width: 991px) {
  #container-2-prive .btn-group-l {
    margin-top: var(--space-2xs);
  }
}
#container-2-prive .svg-image-frame {
  flex-shrink: 1;
  margin-top: -60px;
}
#container-2-prive .inner-container {
  flex-shrink: 1;
  max-width: 500px;
}
@media (min-width: 991px) {
  #container-2-prive .inner-container {
    flex-shrink: 0;
  }
}

.social-proof {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10%;
  gap: 5px;
  font-size: var(--text-xs) !important;
  z-index: 10;
  transform-origin: center center;
  font-family: "font-body" !important;
  transition: var(--transition-s);
}
@media (hover: hover) and (pointer: fine) {
  .social-proof:hover {
    transform: scale(1.1) translateX(-45%);
  }
}
.social-proof span {
  font-size: var(--text-xs) !important;
}
@media (min-width: 991px) {
  .social-proof span {
    font-size: var(--text-xs) !important;
  }
}
.social-proof img {
  margin-top: -5px;
}

.header-l .social-proof {
  width: 60vw;
  top: -50px;
}
@media (min-width: 991px) {
  .header-l .social-proof {
    width: auto;
    top: -10%;
  }
}

#social-proof-reviews {
  position: relative;
  transform: translateX(0%);
  left: auto;
  font-size: var(--text-l) !important;
}
#social-proof-reviews span {
  font-size: var(--text-l) !important;
}
#social-proof-reviews img {
  margin-top: -15px;
  width: 130px;
  max-width: 130px;
}
@media (hover: hover) and (pointer: fine) {
  #social-proof-reviews:hover {
    transform: scale(1.1);
  }
}

#reviews-container .carousel-item.active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
}
#reviews-container .carousel-wrapper {
  align-items: center;
  justify-content: center;
  min-height: 350px;
}
#reviews-container .text-container-carousel h4 {
  font-family: "font-body";
  font-size: var(--text-l);
  color: var(--black);
}
#reviews-container .text-container-carousel h5 {
  font-family: "font-body";
  font-size: var(--text-m);
}

.carousel-pagination .carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.carousel-pagination .carousel-dot.active {
  background-color: var(--darkBlue);
}
.carousel-pagination .carousel-dot:hover {
  background-color: white;
}

#workshop-prive-title .quote {
  position: absolute;
  top: 0;
  z-index: 1;
}
#workshop-prive-title .quote:nth-child(2) {
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  width: 100%;
}
@media (min-width: 991px) {
  #workshop-prive-title .quote:nth-child(2) {
    top: -20%;
    left: -5%;
    transform: rotate(-2deg);
    font-size: var(--text-xs);
    width: auto;
    width: fit-content;
  }
}
@media (min-width: 991px) {
  #workshop-prive-title .quote:nth-child(3) {
    top: -20%;
    right: -5%;
    transform: rotate(2deg);
    font-size: var(--text-xs);
    transition: var(--transition-s);
    cursor: pointer;
    width: fit-content;
  }
}
@media (hover: hover) and (pointer: fine) {
  #workshop-prive-title .quote:nth-child(3):hover {
    transform: scale(1.1);
  }
}
#workshop-prive-title .mail-icon .icon {
  fill: var(--pink);
}

.prive-img-cont-m {
  flex-wrap: nowrap;
}
.prive-img-cont-m #prive-img-left-m {
  width: 70vw !important;
  max-width: 70vw !important;
}
.prive-img-cont-m #prive-img-right-m {
  width: 60vw;
  max-width: 60vw;
  margin-left: -15%;
}

.quote-listing {
  position: absolute;
  top: -50%;
  right: 0;
}
@media (min-width: 991px) {
  .quote-listing {
    top: -20%;
    right: -10%;
    transform: rotate(2deg);
  }
}

.prive-listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}
@media (min-width: 991px) {
  .prive-listing {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-end;
  }
}
.prive-listing .listing-item {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  cursor: pointer;
}
.prive-listing .listing-item h2 {
  text-align: center;
  background-color: var(--lightPink);
  font-family: "font-primary";
  color: black;
  border: 3px solid;
  font-size: var(--text-xl);
  padding: var(--space-2xs);
  width: 80%;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}
@media (min-width: 991px) {
  .prive-listing .listing-item h2 {
    font-size: var(--text-l);
  }
}
.prive-listing .listing-item .listing-img {
  margin-top: calc(var(--space-s) * -1);
}
@media (min-width: 991px) {
  .prive-listing .listing-item .listing-img {
    margin-top: calc(var(--space-s) * -0.8);
  }
}
.prive-listing .listing-item .btn-round {
  transform: translateY(-80%);
  align-self: center;
}
.prive-listing .listing-item .sticker-prive {
  position: absolute;
  max-width: 40%;
  width: 40%;
  top: -20%;
  left: -7%;
  z-index: 20;
}
@media (min-width: 991px) {
  .prive-listing .listing-item .sticker-prive {
    top: -20%;
    left: -15%;
    max-width: 35%;
    width: 35%;
  }
}
.prive-listing .listing-item .sticker-prive span {
  transform: translate(-56%, -39%);
  font-size: clamp(10px, 5vw, 20px);
  max-width: 50%;
  word-break: break-word;
}
@media (min-width: 991px) {
  .prive-listing .listing-item .sticker-prive span {
    font-size: clamp(10px, 1.2vw, 23px);
  }
}

.prive-listing .sticker h2 {
  width: 80%;
  margin-left: 20%;
  padding-right: var(--space-2xs);
  padding-left: var(--space-2xs);
}
@media (min-width: 991px) {
  .prive-listing .sticker h2 {
    width: 80%;
    margin: 0 auto;
    padding-right: var(--space-xs);
    padding-left: var(--space-xs);
  }
}

@media (hover: hover) and (pointer: fine) {
  .prive-listing .listing-item {
    transition: var(--transition-s);
  }
  .prive-listing .listing-item:hover {
    transform: scale(1.05);
    z-index: 10;
  }
  .prive-listing .quote-link:hover {
    transform: none;
  }
  .prive-listing .listing-item:hover .sticker-prive {
    transform: scale(1.5) rotate(10deg);
  }
  .prive-listing .listing-item:hover .sticker-prive .shadow,
  .prive-listing .listing-item:hover .sticker-prive .front {
    animation-duration: 6s;
  }
  .prive-listing .listing-item:hover .sticker-prive .front {
    fill: var(--lime);
  }
}
.prive-info-popup {
  height: 100% !important;
  padding: var(--space-xs);
  overflow-x: hidden;
  padding-top: var(--space-m);
}
.prive-info-popup h3 {
  font-family: "font-primary";
  color: var(--black) !important;
  font-size: var(--text-xl);
}
.prive-info-popup .banner-container {
  max-width: 1100px;
  align-items: center;
}
.prive-info-popup .off-canvas-content .banner-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.prive-info-popup .banner-text {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
  max-width: 800px;
}
.prive-info-popup .close-btn-nav {
  top: 6%;
  right: 9%;
}
@media (min-width: 991px) {
  .prive-info-popup .close-btn-nav {
    width: var(--text-xl);
  }
}

.info-prive-images {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
}
.info-prive-images > * {
  width: 100%;
}
.info-prive-images > *:nth-child(1) {
  grid-column: 1/6;
  grid-row: 1;
  margin-left: -30%;
}
@media (min-width: 991px) {
  .info-prive-images > *:nth-child(1) {
    width: 38%;
    position: absolute;
    top: -100px;
    left: calc(-0.5 * (min(1100px, 100vw) - 800px) - 120px);
    margin-left: 0;
    z-index: 2;
  }
}
.info-prive-images > *:nth-child(2) {
  grid-column: 3/9;
  grid-row: 1;
  z-index: 1;
}
@media (min-width: 991px) {
  .info-prive-images > *:nth-child(2) {
    width: 20%;
    position: absolute;
    top: 200px;
    left: calc(-0.5 * (min(1100px, 100vw) - 800px) - 80px);
  }
}
.info-prive-images > *:nth-child(3) {
  grid-column: 6/11;
  grid-row: 1;
  margin-left: 30%;
}
@media (min-width: 991px) {
  .info-prive-images > *:nth-child(3) {
    width: 25%;
    position: absolute;
    bottom: 0;
    right: calc(-0.5 * (min(1100px, 100vw) - 800px) - 80px);
  }
}

.quotes-rotator {
  display: grid;
  /* single cell; height adjusts to tallest quote or set a fixed height */
}

/* All quotes occupy the same grid cell */
.quotes-rotator .quote-container {
  grid-area: 1/1;
  opacity: 0;
  display: flex; /* for centering text */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  animation-name: quoteFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  gap: var(--space-2xs);
}
.quotes-rotator .quote-container h4 {
  color: var(--darkBlue);
}
.quotes-rotator .quote-container img {
  height: var(--text-xs);
  width: auto;
}

@keyframes quoteFade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.quote-m-top {
  margin-top: calc(var(--space-2xs) * -1);
}
@media (min-width: 991px) {
  .quote-m-top {
    margin-top: calc(var(--space-2xs) * -1);
  }
}

.cta-prive p {
  margin-top: var(--space-2xs);
}
.cta-prive .btn-s.btn-lime {
  margin-top: var(--space-xs);
}

/* gravity forms */
#field_1_9 {
  grid-column: 1/8;
}

#choice_1_9_1,
#label_1_9_1 {
  pointer-events: none;
}

#field_1_11 {
  margin-top: var(--space-s);
}

#field_1_19 {
  grid-column: 8/12;
}

.title-icon {
  display: flex;
  align-self: center;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: center;
  color: var(--black) !important;
  flex-direction: row-reverse;
}
.title-icon img {
  width: 50px;
}
@media (min-width: 991px) {
  .title-icon img {
    width: var(--text-2xl);
  }
}

#field_1_6 {
  position: relative;
  z-index: 2;
}

#field_1_16 p {
  text-align: left;
}

#field_1_21 {
  transition: var(--transition-s);
  margin-bottom: 170px;
}
#field_1_21 .group {
  z-index: 1;
  position: relative;
  margin-top: -50px;
  background-color: var(--lightPink);
  width: 100%;
}
#field_1_21 img {
  position: absolute;
  right: -10%;
  top: 10%;
  align-self: flex-end;
  width: 70vw;
  height: 70vw;
  margin-top: 0px;
  max-inline-size: 400px;
  max-block-size: 400px;
}
#field_1_21 .gradient-fade {
  top: 0;
  z-index: 1;
  height: 30px;
}

#field_1_5 {
  z-index: 2;
  margin-top: -190px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=number],
textarea {
  padding-top: 5px !important;
}

.gform-field-label.gform-field-label--type-inline {
  padding-top: 3px !important;
}

.gform_wrapper select {
  font-family: "font-primary" !important;
}

#contact-btns-conf h4,
#contact-btns-conf h5 {
  color: var(--darkBlue);
}
#contact-btns-conf .circle {
  fill: var(--lightBlue);
}

#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--lightBlue);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-out;
}
#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#splash-screen {
  z-index: 99999;
}

/*# sourceMappingURL=global.css.map */