@charset "UTF-8";
/* kanit-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/kanit-v17-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/kanit-v17-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/kanit-v17-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/kanit-v17-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/kanit-v17-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/kanit-v17-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/kanit-v17-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/kanit-v17-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/kanit-v17-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/kanit-v17-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/kanit-v17-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/kanit-v17-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/kanit-v17-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/kanit-v17-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/kanit-v17-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/kanit-v17-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/kanit-v17-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kanit-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kanit";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/kanit-v17-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/inter-v20-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/inter-v20-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/inter-v20-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/inter-v20-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Typography Variables
--------------------------------------------- */
.heading-xl {
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.25;
}

.heading-lg {
  font-size: clamp(29px, 2.3333vw, 51px);
  line-height: 1.25;
}

.heading-md {
  font-size: clamp(26px, 2.3333vw, 44px);
  line-height: 1.2;
}

.heading-sm {
  font-size: clamp(22px, 2.3333vw, 32px);
  line-height: 1.2;
}

.heading-xs {
  font-size: clamp(17px, 2.3333vw, 25px);
  line-height: 1.2;
}

.heading-xxs {
  font-size: clamp(15px, 2.3333vw, 21px);
  line-height: 1.2;
}

/* Default Color Variables
--------------------------------------------- */
/* #7C7C7C; */
/* Theme Color Variables
--------------------------------------------- */
/** HTML Selection 
--------------------------------------------- */
/* Primary theme fonts
--------------------------------------------- */
/* Border Colors
--------------------------------------------- */
/* Base Line Height.
--------------------------------------------- */
/* Font Sizes
--------------------------------------------- */
/* Spacing
--------------------------------------------- */
/* Hero
--------------------------------------------- */
/* Footer
--------------------------------------------- */
/* Navbar
--------------------------------------------- */
/* Components
--------------------------------------------- */
/* Theme Custom Variabeles
-------------------------------------------- */
/** CSS Variables */
:root {
  --primary-font: Inter, Helvetica, Arial, sans-serif;
  --secondary-font: Kanit, Helvetica, Arial, sans-serif;
  --body-text-clr: #686868;
  --dark-clr: #191919;
  --white-clr: #ffffff;
  --primary-clr: #191919;
  --akzent-clr: #C1ED00;
  --secondary-clr: #C1ED00;
  --light-grey-clr: #e2e2e2;
  --grey-clr: #6b6767;
  --grey-text-clr: #6b7280;
  --primary-hover-clr: #191919;
  --secondary-hover-clr: #C1ED00;
  --akzent-hover-clr: #C1ED00;
  --default-heading-font: Inter, Helvetica, Arial, sans-serif;
  --default-text-font: Inter, Helvetica, Arial, sans-serif;
  --default-heading-clr: #191919;
  --default-heading-fw: 400;
  --secondary-heading-font: Inter, Helvetica, Arial, sans-serif;
  --heading-xl-fs: clamp(32px, 4vw, 60px);
  --heading-xl-lh: 1.25;
  --heading-lg-fs: clamp(29px, 2.3333vw, 51px);
  --heading-lg-lh: 1.25;
  --heading-md-fs: clamp(26px, 2.3333vw, 44px);
  --heading-md-lh: 1.2;
  --heading-sm-fs: clamp(22px, 2.3333vw, 32px);
  --heading-sm-lh: 1.2;
  --heading-xs-fs: clamp(17px, 2.3333vw, 25px);
  --heading-xs-lh: 1.2;
  --heading-xxs-fs: clamp(15px, 2.3333vw, 21px);
  --heading-xxs-lh: 1.2;
  --text-sm: clamp(12px, 2.333vw, 13px);
  --text-md: clamp(14px, 2.333vw, 15px);
  --text-lg: clamp(16px, 2.333vw, 17px);
  --text-xl: clamp(18px, 2.333vw, 20px);
  --small-text: clamp(12px, 2.333vw, 13px);
  --text-fs-sm: clamp(12px, 2.333vw, 13px);
  --small-text-fs: clamp(12px, 2.333vw, 13px);
  --pretitle-font: Inter, Helvetica, Arial, sans-serif;
  --pretitle: clamp(13px, 2.3333vw, 14px);
  --pretitle-fw: 400;
  --subtitle-font: 400;
  --subtitle: clamp(13px, 2.3333vw, 14px);
  --subtitle-fw: Inter, Helvetica, Arial, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --body-fs: clamp(14px, 2.33333vw, 15px);
  --body-lh: 1.7;
  --body-fw: 400;
  --body-text-clr:#686868;
  --mobile-nav-fs: clamp(19px, 2.3333vw, 21px);
  --mobile-nav-bg-clr: #191919;
  --mobile-nav-link-clr: #ffffff;
  --mobile-nav-link-hover-clr: #C1ED00;
  --mobile-nav-link-current-clr: #C1ED00;
  --hero-pretitle-fs: clamp(15px, 2.3333vw, 16px);
  --hero-title-fs: clamp(29px, 3.5vw, 65px);
  --hero-subtitle-fs: clamp(13px, 2.3333vw, 14px);
  --hero-text-clr: #ffffff;
  --hero-bg-clr: #191919;
  --nav-bg: #ffffff;
  --nav-shadow: 1px 2px 7px rgba(61, 61, 61, 0.25);
  --nav-sticky-bg: #ffffff;
  --nav-sticky-shadow: 1px 2px 7px rgba(61, 61, 61, 0.25);
  /* Sizing */
  --nav-container-width: 100%;
  --nav-height-desktop: 120px;
  --nav-height-mobile: 100px;
  --nav-height-sticky: 90px;
  /* Logo */
  --logo-max-width: 220px;
  --logo-max-width-sticky: 90%;
  /* Surfaces & shadows */
  --nav-bg-clr: #ffffff;
  --nav-shadow: 1px 2px 7px rgba(61, 61, 61, 0.25);
  --nav-sticky-bg: #ffffff;
  --nav-sticky-shadow: 1px 2px 7px rgba(61, 61, 61, 0.25);
  /* Back-compat alias */
  --nav-bg: var(--nav-bg-clr);
  /* Links (STANDARD) */
  --nav-link-clr: #191919;
  --nav-link-hover-clr: #C1ED00;
  --nav-link-active-clr: #C1ED00;
  --nav-link-fs: clamp(14px, 2.3333vw, 15px);
  --nav-link-weight: 700;
  /* Links (TRANSPARENT) */
  --nav-transparent-link-clr: #ffffff;
  --nav-transparent-link-hover-clr: #C1ED00;
  --nav-transparent-link-active-clr: #C1ED00;
  --nav-transparent-link-hover-opacity: 1;
  --nav-transparent-link-active-opacity: 1;
  /* Hamburger (state colors) */
  --hamburger-line-height: 2.5px;
  --hamburger-line-color-standard: #191919;
  --hamburger-line-color-transparent: #ffffff;
  /* Legacy tokens */
  --hamburger-line-color: #ffffff;
  --hamburger-line-active-color: #ffffff;
  --hamburger-background-color: #C1ED00;
  --hamburger-background-active-color:#C1ED00;
  /* NAV CTA – STANDARD (filled) */
  --nav-cta-bg: #191919;
  --nav-cta-text: #ffffff;
  --nav-cta-border: #191919;
  --nav-cta-bg-hover: #C1ED00;
  --nav-cta-text-hover: #191919;
  --nav-cta-border-hover: #C1ED00;
  /* NAV CTA – TRANSPARENT (outline white) */
  --nav-cta-tr-bg: transparent;
  --nav-cta-tr-text: #ffffff;
  --nav-cta-tr-border: #ffffff;
  --nav-cta-tr-bg-hover: #ffffff;
  --nav-cta-tr-text-hover: #191919;
  --nav-cta-tr-border-hover: #ffffff;
  /* Mobile navigation */
  --mobile-nav-fs: clamp(19px, 2.3333vw, 21px);
  --mobile-nav-bg-clr: #191919;
  --mobile-nav-link-clr: #ffffff;
  --mobile-nav-link-hover-clr: #C1ED00;
  --mobile-nav-link-current-clr: #C1ED00;
  /* Mobile overlay close button */
  --mobile-nav-close-clr: #ffffff;
  --mobile-nav-close-hover-clr: var(--akzent-clr);
  --mobile-nav-close-bg: transparent;
  --mobile-nav-close-bg-hover: transparent;
  /* Dropdown sizes */
  --dropdown-desktop-fs: 14px;
  --dropdown-mobile-fs: 14px;
  --footer-top-clr: #ffffff;
  --footer-top-link-clr: #ffffff;
  --footer-top-link-hover-clr: #C1ED00;
  --footer-top-fs: clamp(12px, 2.333vw, 13px);
  --footer-top-bg-clr: #191919;
  --footer-section-title-fs: clamp(15px, 2.33333vw, 16px);
  --footer-section-title-fw: 700;
  --footer-section-title-font: Inter, Helvetica, Arial, sans-serif;
  --footer-section-title-clr: #191919;
  --footer-social-link-clr: #ffffff;
  --footer-social-link-hover-clr: #C1ED00;
  --footer-social-link-fs: 30px;
  --footer-bottom-clr: #A7A7A7;
  --footer-bottom-link-clr: #A7A7A7;
  --footer-bottom-fs: clamp(14px, 2.33333vw, 15px);
  --footer-bottom-bg-clr: #191919;
  --footer-bottom-link-clr: #A7A7A7;
  --footer-bottom-link-hover-clr: #C1ED00;
  --accordion-title-clr: $dark;
  --accordion-title-fs: clamp(16px, 2.3333vw, 18px);
  --accordion-icon-clr: $dark;
  --accordion-active-title-clr: #191919;
  --accordion-active-icon-clr: #191919;
  --btn-padding-y: 15px;
  --btn-padding-x: 20px;
  --btn-border-radius: 0;
  --btn-fs: clamp(14px, 2.333vw, 15px);
  --btn-font: Inter, Helvetica, Arial, sans-serif;
  --btn-weight: 700;
  --btn-text-transform: uppercase;
  --btn-line-height: 1.25;
  --btn-primary-bg: #191919;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #191919;
  --btn-primary-bg-hover: transparent;
  --btn-primary-text-hover: #191919;
  --btn-primary-border-hover: #191919;
  --btn-secondary-bg: #C1ED00;
  --btn-secondary-text: #191919;
  --btn-secondary-border: #C1ED00;
  --btn-secondary-bg-hover: #191919;
  --btn-secondary-text-hover: #ffffff;
  --btn-secondary-border-hover: #191919;
  --btn-outline-bg: transparent;
  --btn-outline-text: #191919;
  --btn-outline-border: #191919;
  --btn-outline-bg-hover: #191919;
  --btn-outline-text-hover: #ffffff;
  --btn-outline-border-hover: #191919;
  --html-selection-bg-clr: #C1ED00;
  --html-selection-clr: #191919;
  --card-title-fs: clamp(18px, 2.3333vw, 21px);
  --card-description-fs: clamp(14px, 2.33333vw, 15px);
}

img {
  width: auto;
  height: auto;
}

.white-text {
  color: #ffffff;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.ms-n1 {
  margin-left: -0.25rem !important;
}

.me-n1 {
  margin-right: -0.25rem !important;
}

.mx-n1 {
  margin-left: -0.25rem !important;
  margin-right: -0.25rem !important;
}

.my-n1 {
  margin-top: -0.25rem !important;
  margin-bottom: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.ms-n2 {
  margin-left: -0.5rem !important;
}

.me-n2 {
  margin-right: -0.5rem !important;
}

.mx-n2 {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}

.my-n2 {
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.ms-n3 {
  margin-left: -1rem !important;
}

.me-n3 {
  margin-right: -1rem !important;
}

.mx-n3 {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}

.my-n3 {
  margin-top: -1rem !important;
  margin-bottom: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.ms-n4 {
  margin-left: -1.5rem !important;
}

.me-n4 {
  margin-right: -1.5rem !important;
}

.mx-n4 {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
}

.my-n4 {
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5 {
  margin-top: -3rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

.ms-n5 {
  margin-left: -3rem !important;
}

.me-n5 {
  margin-right: -3rem !important;
}

.mx-n5 {
  margin-left: -3rem !important;
  margin-right: -3rem !important;
}

.my-n5 {
  margin-top: -3rem !important;
  margin-bottom: -3rem !important;
}

/** Color & Backgrounds */
.akzent-bg {
  background: var(--akzent-clr) !important;
}

.dark-bg {
  background: var(--dark-clr) !important;
}

.akzent-text {
  color: var(--akzent-clr) !important;
}

.light-text {
  color: #ffffff !important;
}
.light-text p {
  color: #ffffff !important;
}

/** Heading */
.pretitle,
.subtitle {
  color: var(--dark-clr);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  text-transform: uppercase;
}

.text-wrapper h2 {
  font-size: var(--heading-md-fs);
  margin-bottom: 0.45rem;
}
.text-wrapper h3 {
  font-size: var(--heading-sm-fs);
  margin-bottom: 0.45rem;
}
.text-wrapper h4 {
  font-size: var(--heading-xs-fs);
  margin-bottom: 0.45rem;
}
.text-wrapper h5, .text-wrapper h6 {
  font-size: var(--heading-xxs-fs);
  margin-bottom: 0.45rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondary-font);
}

.icon-box-title {
  font-family: var(--primary-font);
}

.note-box {
  background: var(--dark-clr);
  padding: 2rem;
  border-radius: 20px;
}
.note-box .note-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--akzent-clr);
  font-size: var(--heading-xxs-fs);
}
.note-box p {
  color: #ffffff;
  margin: 0;
}

.hero-header.hero-background-color {
  background: var(--dark-clr);
}
.hero-header.hero-background-color .hero-title,
.hero-header.hero-background-color .hero-pretitle,
.hero-header.hero-background-color .hero-subtitle {
  color: #ffffff;
}

.hero-header .hero--content-wrapper.text-left {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}
.hero-header .hero-title {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
}
.hero-header .hero-pretitle,
.hero-header .hero-subtitle {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: var(--primary-font);
  margin-bottom: 0;
}

.hero-header .hero-background-color {
  padding-top: 10.938rem;
}
@media (max-width: 991px) {
  .hero-header .hero-background-color {
    padding-top: 5.625rem;
  }
}
.hero-header .hero-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}
@media (max-width: 991px) {
  .hero-header .hero-container {
    gap: 15px;
  }
}
.hero-header .hero-ci-element svg {
  max-height: clamp(55px, 5vw, 90px);
  width: auto;
}

.hero-header.hero-image .hero--image-wrapper .hero-image {
  max-height: 62.5rem;
  object-fit: cover;
}

.navbar .social-link.instagram {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.navbar .social-link.instagram i {
  font-size: 30px;
}

@media (min-width: 1400px) {
  .navbar li.menu-btn {
    margin-left: 30px;
  }
}
.navbar nav ul li a {
  text-transform: uppercase;
}

#footer {
  text-align: center;
}
#footer .social-media-menu {
  justify-content: center;
}
#footer .footer-cta-heading {
  color: #ffffff;
  font-size: var(--heading-xl-fs);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
}
#footer #footer-cta-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
#footer .footer-bottom .copyright-info {
  flex-direction: column;
}
#footer .footer-bottom .legal-links {
  justify-content: center;
}
#footer .social-media-menu .social-menu-item .social-link {
  color: #ffffff;
}
#footer .social-media-menu .social-menu-item .social-link:hover {
  color: var(--akzent-clr);
}

.dark-bg-section {
  background: var(--dark-clr);
  padding-block: clamp(3rem, 1.5rem + 4vw, 7.813rem);
}
.dark-bg-section .section-header h2, .dark-bg-section .section-header h3, .dark-bg-section .section-header h4, .dark-bg-section .section-header h5, .dark-bg-section .section-header h6, .dark-bg-section .section-header p, .dark-bg-section .section-header span {
  color: #ffffff;
}

/** Home */
#home-intro {
  margin: 0;
  background: #000000;
  padding-top: clamp(1.5rem, 0.75rem + 2vw, 4.25rem);
  padding-bottom: clamp(3rem, 1.5rem + 4vw, 7.813rem);
}

.section-divider {
  position: relative;
  margin: 0;
  padding: 0;
  height: 2px;
  background: #eaeaea;
}

/** Biography */
#about-me .about-image {
  width: 100%;
  height: 100%;
}

/** Overview Boxes Home */
.overview-box {
  background-color: #000000;
  border-radius: 24px;
  padding: 2.5rem;
  color: #ffffff;
}
.overview-box .overview-box-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

section#hero-startseite .hero-pretitle {
  color: var(--akzent-clr);
}

.price-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.price-table + .price-table {
  margin-top: 36px;
}

.price-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  padding: 35px;
  color: var(--dark-clr);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 991px) {
  .price-card {
    padding: 30px 15px;
  }
}
.price-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.price-card-months {
  font-size: clamp(44px, 7vw, 63px);
  font-weight: 800;
  line-height: 1;
}
.price-card-unit {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.price-card-priceper {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 30px);
}
.price-card-price-note {
  font-size: 13px;
  color: var(--grey-text-clr);
  font-weight: 500;
}
.price-card-total {
  margin: 2px 0 12px;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
}
.price-card-total-note {
  margin-left: 10px;
  font-size: clamp(14px, 2.333vw, 15px);
  color: var(--grey-text-clr);
  font-weight: 500;
}
.price-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.price-card-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 10px;
}
.price-card-features li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--akzent-clr);
  border-radius: 3px;
  margin-top: 5px;
}
.price-card-spearator {
  background: #E2E2E2;
  width: 100%;
  height: 1.5px;
  margin: 15px 0;
}
.price-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.938rem;
}

/** Default Theme Card Style */
.card {
  border-radius: 10px;
  box-shadow: unset;
  background: #ffffff;
}
.card .card-content .card-title {
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.4;
}
.card .card-icon-wrapper {
  height: 65px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/** Dark BG Card */
.dark-bg-card {
  background: var(--dark-clr);
}
.dark-bg-card h2,
.dark-bg-card h3,
.dark-bg-card h4,
.dark-bg-card h5,
.dark-bg-card h6,
.dark-bg-card p,
.dark-bg-card span {
  color: #ffffff;
}

/** Advantage Card */
.advantage-card .card-icon-wrapper {
  justify-content: flex-start;
  height: 35px;
  width: 35px;
}
.advantage-card .card-icon-wrapper .card-icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 35px;
  width: 35px;
}
.advantage-card .card-icon-wrapper .card-icon-bg svg {
  fill: var(--dark-clr);
}

/** Service Preview Card */
.service-preview-card {
  padding: 1.45rem;
}
.service-preview-card .card-content {
  padding: 0;
}
.service-preview-card .summary-list p {
  margin: 0;
}
.service-preview-card .card-icon-wrapper svg * {
  fill: #ffffff;
}

.service-card {
  border-radius: 0;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid rgb(239, 239, 239);
}

/** Service Card */
.service-card {
  display: flex;
  gap: 15px;
  flex-direction: column;
}
.service-card .card-icon-wrapper {
  height: 110px;
  width: 110px;
}
.service-card .card-icon-wrapper svg {
  width: auto;
  height: 35px;
}
.service-card .card-content {
  padding: 0;
}
.service-card .card-content .summary-list p {
  margin: 0;
}

.service-card .summary-list,
.service-preview-card .summary-list {
  gap: 7px;
}

.icon-circle {
  height: 75px;
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 100px;
}

.arrow-icon-link:hover .icon {
  transform: translateX(5px);
}

/** Instagram CTA Card */
.instagram-cta-card {
  border-radius: 30px;
  text-align: center;
  padding: 3rem 1.5rem;
}
.instagram-cta-card .card-icon-wrapper {
  width: 100%;
  height: auto;
}
.instagram-cta-card .card-icon-wrapper i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  width: 40px;
  height: 40px;
  line-height: 1;
}
.instagram-cta-card .card-pretitle {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
}
.instagram-cta-card .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 300ms;
}
.instagram-cta-card .social-link .link-text {
  font-size: clamp(18px, 2.333vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
}
.instagram-cta-card .social-link:hover .link-text {
  color: var(--akzent-clr);
}

.advantage-icon-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.advantage-icon-box .icon-wrapper {
  height: 75px;
  width: 75px;
  border: 2px solid #ffffff;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon-link {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 300ms;
}
.arrow-icon-link .text {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(13px, 2.333vw, 14px);
  font-weight: 700;
  color: var(--dark-clr);
}
.arrow-icon-link .icon {
  border-radius: 100px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 300ms;
}
.arrow-icon-link .icon i {
  font-size: 22px;
}

.arrow-icon-link .icon.akzent-bg {
  color: var(--dark-clr);
}

.price-note-warning {
  font-size: 13px;
  color: red;
}