/* ========================================
   Global Stylesheet - Importing Partials (7-1 Pattern)
   ======================================== */
:root {
  --accent-color: #2CA5B5;
  --white-color: #ffffff;
  --black-color: #000000;
  --bg-light: #f8f8f8;
  --bg-dark: #242424;
  --bg-dark-secondary: #2d2d2d;
  --bg-dark-tertiary: #111111;
  --text-dark-primary: #333333;
  --text-dark-secondary: #555555;
  --text-light-primary: #f1f1f1;
  --text-light-secondary: #cccccc;
  --link-hover-color: #238491;
  --link-hover-color-dark: #56B7C4;
  --cta-hover-bg: #d94c50;
  --_glow-color-light-rgb: 173, 216, 230;
  --_glow-color-dark-rgb: 176, 196, 222;
  --font-main: "Kanit", sans-serif;
  --font-secondary: "Kanit", sans-serif;
  --trans-duration-fast: 0.2s;
  --trans-duration-medium: 0.35s;
  --trans-duration-smooth: 0.6s;
  --trans-duration-slow: 0.8s;
  --trans-timing-ease: ease;
  --trans-timing-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-timing-ease-out: ease-out;
  --trans-timing-layout: cubic-bezier(0.4, 0, 0.2, 1);
  --z-content-overlay: 5;
  --z-nav-menu: 1010;
  --border-radius-large: 16px;
  --border-radius-medium: 12px;
  --card-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.18);
  --card-hover-shadow: 0 12px 35px 4px rgba(0, 0, 0, 0.15);
  --header-height-initial: 150px;
  --header-height-scrolled: 80px;
  --header-height-initial-mobile: 120px;
  --header-height-scrolled-mobile: 70px;
  --header-blur-amount: 3px;
  --header-bg-opacity: 0.7;
  --header-bg-blur-opacity: 0.2;
  --space-section-bottom: 4rem;
  --section-padding-bottom: 6rem;
  --unified-form-container-bg: var(--white-color);
  --unified-form-container-padding: clamp(1.5rem, 5vw, 2.5rem);
  --unified-form-container-radius: var(--border-radius-large);
  --unified-form-container-shadow: var(--card-shadow);
  --unified-form-container-text-color: var(--text-dark-primary);
  --unified-form-container-max-width: 600px;
}

.body-no-scroll {
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

:root {
  color-scheme: light dark;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

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

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

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

h1, h2, h3, h4, h5, h6 {
  text-align: inherit;
}

body {
  font-family: var(--font-main);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-dark-primary);
  background-color: var(--bg-light);
  padding-top: var(--header-height-scrolled);
  overflow-x: hidden;
}

.hero {
  padding-block: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: inherit;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}

h4 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
}

p {
  margin-bottom: 1rem;
  max-width: 75ch;
}

strong, b {
  font-weight: 500;
}

a {
  color: var(--accent-color);
  font-weight: 400;
  -webkit-transition: color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: color var(--trans-duration-fast) var(--trans-timing-ease);
}
a:hover, a:focus-visible {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.text-normal {
  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
  line-height: 1.5;
  text-align: left;
  color: var(--text-dark-secondary);
  max-width: none;
}
html.dark-mode .text-normal {
  color: var(--text-light-secondary);
}

.text-normal-exposed {
  font-size: clamp(1.5rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--text-dark-secondary);
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
}
html.dark-mode .text-normal-exposed {
  color: var(--text-light-secondary);
}

.text-small-justified {
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: justify;
  color: var(--text-dark-secondary);
  margin-top: 1.5rem;
  padding: 0.4rem 0.6rem;
  background-color: var(--bg-light);
  border-radius: 8px;
  border: 1px solid var(--form-border-color-light);
}
html.dark-mode .text-small-justified {
  color: var(--text-light-secondary);
  background-color: var(--bg-dark);
  border-color: var(--form-border-color-dark);
}

.text-accent {
  color: var(--accent-color);
}

:root {
  --color-cta-button-bg: #ff5a5f;
  --z-header: 1000;
  --header-bg-rgb-light: 255, 255, 255;
  --header-bg-rgb-dark: 30, 30, 30;
  --header-bg-scrolled: rgba(var(--header-bg-rgb-light), var(--header-bg-opacity));
  --header-bg-scrolled-blur: rgba(var(--header-bg-rgb-light), var(--header-bg-blur-opacity));
  --header-bg-scrolled-dark: rgba(var(--header-bg-rgb-dark), var(--header-bg-opacity-dark, var(--header-bg-opacity)));
  --header-bg-scrolled-blur-dark: rgba(var(--header-bg-rgb-dark), var(--header-bg-blur-opacity-dark, var(--header-bg-blur-opacity)));
  --card-border-color-dark: rgba(255, 255, 255, 0.2);
  --header-text-initial: var(--white-color);
  --header-scrolled-shadow: 0 12px 35px 8px rgba(0, 0, 0, 0.22);
}

.main-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: var(--z-header);
  transition: height var(--trans-duration-smooth) var(--trans-timing-ease), color var(--trans-duration-medium) var(--trans-timing-ease), background-color var(--trans-duration-medium) var(--trans-timing-ease), border-color var(--trans-duration-medium) var(--trans-timing-ease), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-backdrop-filter var(--trans-duration-medium) var(--trans-timing-ease), backdrop-filter var(--trans-duration-medium) var(--trans-timing-ease);
  height: var(--header-height-initial);
  color: var(--header-text-initial);
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.main-header .header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  height: 100%;
  padding-inline: var(--header-padding-inline, 1.5rem);
  max-width: 1400px;
  margin-inline: auto;
}
.main-header .logo-container {
  position: absolute;
  top: 50%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: left var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: left var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), left var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), left var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
}
.main-header .logo-container .logo-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.main-header .logo-container .logo-link #main-logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 90%;
  -o-object-fit: contain;
     object-fit: contain;
  height: calc(var(--header-height-initial) * 0.52);
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: height var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: height var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: height var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: height var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
}
.main-header .header-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-left: auto;
}
.main-header .header-controls .cta-button {
  background-color: var(--color-cta-button-bg);
  color: var(--white-color);
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), opacity var(--trans-duration-medium) var(--trans-timing-ease), visibility var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), opacity var(--trans-duration-medium) var(--trans-timing-ease), visibility var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), opacity var(--trans-duration-medium) var(--trans-timing-ease), visibility var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), opacity var(--trans-duration-medium) var(--trans-timing-ease), visibility var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
}
.main-header .header-controls .cta-button:hover, .main-header .header-controls .cta-button:focus-visible {
  background-color: var(--cta-hover-bg);
  -webkit-transform: translateY(-2px) translateX(0);
          transform: translateY(-2px) translateX(0);
}
.main-header .header-controls .hamburger-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 56px;
  height: 56px;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: calc(var(--z-nav-menu) + 1);
  color: var(--text-dark-primary);
  -webkit-transition: color var(--trans-duration-medium) var(--trans-timing-ease);
  transition: color var(--trans-duration-medium) var(--trans-timing-ease);
}
.main-header .header-controls .hamburger-button .hamburger-line {
  display: block;
  width: 32px;
  height: 3.5px;
  background-color: currentColor;
  border-radius: 1.5px;
  -webkit-transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap), opacity var(--trans-duration-fast) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap), opacity var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  -webkit-transform-origin: center;
          transform-origin: center;
  will-change: transform, opacity;
}
.main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(1) {
  -webkit-transform: translateY(10.5px) rotate(45deg);
          transform: translateY(10.5px) rotate(45deg);
}
.main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(2) {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  opacity: 0;
}
.main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(3) {
  -webkit-transform: translateY(-10.5px) rotate(-45deg);
          transform: translateY(-10.5px) rotate(-45deg);
}
.main-header.header-scrolled {
  height: var(--header-height-scrolled);
  color: var(--text-dark-primary);
  background-color: var(--header-bg-scrolled);
  -webkit-box-shadow: var(--header-scrolled-shadow);
          box-shadow: var(--header-scrolled-shadow);
  border-bottom: 1px solid var(--card-border-color);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  .main-header.header-scrolled {
    background-color: var(--header-bg-scrolled-blur);
    -webkit-backdrop-filter: blur(var(--header-blur-amount));
    backdrop-filter: blur(var(--header-blur-amount));
  }
}
.main-header.header-scrolled .logo-container {
  left: var(--header-padding-inline, 1.5rem);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.main-header.header-scrolled .logo-container #main-logo {
  height: calc(var(--header-height-scrolled) * 0.68);
}
.main-header.header-scrolled .header-controls .cta-button {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  pointer-events: auto;
}
@media (min-width: 1251px) {
  .main-header.header-scrolled {
    --_header-max-width: 1400px;
    --_header-fade-width: 250px;
    --_header-fade-start-offset: calc(var(--_header-max-width) / 2 - 50px);
    --_header-fade-end-offset: calc(var(--_header-fade-start-offset) + var(--_header-fade-width));
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .main-header.header-scrolled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--header-bg-scrolled);
    -webkit-box-shadow: var(--header-scrolled-shadow);
            box-shadow: var(--header-scrolled-shadow);
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(black), color-stop(black), to(transparent));
    -webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--_header-fade-end-offset)), black calc(50% - var(--_header-fade-start-offset)), black calc(50% + var(--_header-fade-start-offset)), transparent calc(50% + var(--_header-fade-end-offset)));
    mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(black), color-stop(black), to(transparent));
    mask-image: linear-gradient(to right, transparent calc(50% - var(--_header-fade-end-offset)), black calc(50% - var(--_header-fade-start-offset)), black calc(50% + var(--_header-fade-start-offset)), transparent calc(50% + var(--_header-fade-end-offset)));
  }
  html.dark-mode .main-header.header-scrolled::before {
    background-color: var(--header-bg-scrolled-dark);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
    .main-header.header-scrolled::before {
      background-color: var(--header-bg-scrolled-blur);
      -webkit-backdrop-filter: blur(var(--header-blur-amount));
      backdrop-filter: blur(var(--header-blur-amount));
    }
    html.dark-mode .main-header.header-scrolled::before {
      background-color: var(--header-bg-scrolled-blur-dark);
    }
  }
  .main-header.header-scrolled::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: -1;
    background-color: var(--card-border-color);
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(black), color-stop(black), to(transparent));
    -webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--_header-fade-end-offset)), black calc(50% - var(--_header-fade-start-offset)), black calc(50% + var(--_header-fade-start-offset)), transparent calc(50% + var(--_header-fade-end-offset)));
    mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(black), color-stop(black), to(transparent));
    mask-image: linear-gradient(to right, transparent calc(50% - var(--_header-fade-end-offset)), black calc(50% - var(--_header-fade-start-offset)), black calc(50% + var(--_header-fade-start-offset)), transparent calc(50% + var(--_header-fade-end-offset)));
  }
  html.dark-mode .main-header.header-scrolled::after {
    background-color: var(--card-border-color-dark);
  }
}

@media (max-width: 768px) {
  .main-header {
    height: var(--header-height-initial-mobile);
  }
  .main-header .header-container {
    padding-inline: var(--header-padding-inline-mobile, 0.5rem);
  }
  .main-header .logo-container #main-logo {
    height: calc(var(--header-height-initial-mobile) * 0.44);
  }
  .main-header.header-scrolled {
    height: var(--header-height-scrolled-mobile);
  }
  .main-header.header-scrolled .logo-container #main-logo {
    height: calc(var(--header-height-scrolled-mobile) * 0.55);
  }
  .main-header .header-controls {
    gap: 0.25rem;
  }
  .main-header .header-controls .cta-button {
    padding: 0.5em 1em;
    font-size: 0.8rem;
  }
  .main-header .header-controls .hamburger-button {
    width: 48px;
    height: 48px;
    gap: 6px;
  }
  .main-header .header-controls .hamburger-button .hamburger-line {
    width: 28px;
    height: 3px;
  }
  .main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(1) {
    -webkit-transform: translateY(9px) rotate(45deg);
            transform: translateY(9px) rotate(45deg);
  }
  .main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(2) {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    opacity: 0;
  }
  .main-header .header-controls .hamburger-button[aria-expanded=true] .hamburger-line:nth-child(3) {
    -webkit-transform: translateY(-9px) rotate(-45deg);
            transform: translateY(-9px) rotate(-45deg);
  }
  .main-header .header-controls .theme-toggle-button {
    display: none;
  }
}
html.dark-mode .main-header.header-scrolled {
  background-color: var(--header-bg-scrolled-dark);
  border-bottom-color: var(--card-border-color-dark);
  color: var(--text-light-primary);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  html.dark-mode .main-header.header-scrolled {
    background-color: var(--header-bg-scrolled-blur-dark);
  }
}
html.dark-mode .main-header.header-scrolled .hamburger-button {
  color: var(--text-light-primary);
}

:root {
  --nav-link-active-color: #ff5269;
}

.main-nav-menu {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: min(85vw, 400px);
  height: 100vh;
  background-color: rgba(var(--header-bg-rgb-light), 0.9);
  color: var(--text-dark-primary);
  -webkit-box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  padding: calc(var(--header-height-scrolled) + 2rem) 2rem 2rem;
  z-index: var(--z-nav-menu);
  overflow-y: auto;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  visibility: hidden;
  -webkit-transition: visibility 0s var(--trans-duration-medium), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: visibility 0s var(--trans-duration-medium), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap), visibility 0s var(--trans-duration-medium);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap), visibility 0s var(--trans-duration-medium), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  will-change: transform, visibility;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  .main-nav-menu {
    background-color: rgba(var(--header-bg-rgb-light), 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.main-nav-menu[aria-hidden=false] {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.main-nav-menu .main-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav-menu .main-nav-links li {
  margin-bottom: 1.5rem;
}
.main-nav-menu .main-nav-links .main-nav-link {
  color: inherit;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0;
  display: block;
  position: relative;
  -webkit-transition: color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: color var(--trans-duration-fast) var(--trans-timing-ease);
}
.main-nav-menu .main-nav-links .main-nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background-color: var(--nav-link-active-color);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: center left;
          transform-origin: center left;
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap);
  transition: transform var(--trans-duration-medium) var(--trans-timing-snap), -webkit-transform var(--trans-duration-medium) var(--trans-timing-snap);
  will-change: transform;
}
.main-nav-menu .main-nav-links .main-nav-link:hover, .main-nav-menu .main-nav-links .main-nav-link:focus-visible, .main-nav-menu .main-nav-links .main-nav-link.active {
  color: var(--nav-link-active-color);
  text-decoration: none;
}
.main-nav-menu .main-nav-links .main-nav-link:hover::after, .main-nav-menu .main-nav-links .main-nav-link:focus-visible::after, .main-nav-menu .main-nav-links .main-nav-link.active::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.main-nav-menu .nav-menu-controls {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main-nav-menu .theme-toggle-button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -webkit-transition: background-color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease);
}
.main-nav-menu .theme-toggle-button:hover, .main-nav-menu .theme-toggle-button:focus-visible {
  background-color: rgba(128, 128, 128, 0.2);
}
.main-nav-menu .theme-toggle-button .icon-light,
.main-nav-menu .theme-toggle-button .icon-dark {
  display: block;
  width: 24px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.main-nav-menu .theme-toggle-button .icon-light {
  background-image: url("assets/icons/icon-light-mode.png");
}
.main-nav-menu .theme-toggle-button .icon-dark {
  background-image: url("assets/icons/icon-dark-mode.png");
}
html:not(.dark-mode) .main-nav-menu .theme-toggle-button .icon-dark {
  display: none;
}
html:not(.dark-mode) .main-nav-menu .theme-toggle-button .icon-light {
  -webkit-filter: invert(1);
          filter: invert(1);
}
html.dark-mode .main-nav-menu .theme-toggle-button .icon-light {
  display: none;
}

:root {
  --footer-link-hover-color: var(--white-color);
  --footer-heading-color: var(--white-color);
  --footer-divider-color: rgba(255, 255, 255, 0.1);
  --footer-bottom-text-color: rgba(255, 255, 255, 0.5);
}

.site-footer {
  background-color: var(--bg-dark-secondary);
  color: var(--text-light-secondary);
  padding-top: var(--space-section-bottom);
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-bottom: 1.5rem;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}
.site-footer .footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--footer-divider-color);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 768px) {
  .site-footer .footer-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.5rem;
  }
  .site-footer .footer-content > .footer-group {
    width: 100%;
    max-width: 350px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .site-footer .footer-content .footer-group-info .footer-logo {
    margin-inline: auto;
  }
  .site-footer .footer-content .footer-group-info p {
    text-align: center;
  }
  .site-footer .footer-content .footer-group-legal ul {
    margin-inline: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
  }
}
.site-footer .footer-group {
  min-width: 150px;
}
.site-footer .footer-group-info .footer-logo {
  max-width: 113px;
  opacity: 0.9;
  margin-bottom: 1rem;
}
.site-footer .footer-group-info p {
  line-height: 1.6;
  margin-bottom: 0;
  font-size: 0.85rem;
}
.site-footer .footer-group-info a {
  color: var(--text-light-secondary);
  text-decoration: none;
  -webkit-transition: color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: color var(--trans-duration-fast) var(--trans-timing-ease);
}
.site-footer .footer-group-info a:hover, .site-footer .footer-group-info a:focus-visible {
  color: var(--footer-link-hover-color);
  text-decoration: underline;
}
.site-footer .footer-group-partners {
  text-align: center;
}
.site-footer .footer-group-partners h4 {
  font-size: 0.95rem;
  color: var(--text-light-secondary);
  margin-bottom: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
}
.site-footer .footer-group-partners .partner-logo {
  max-width: 130px;
  height: auto;
  opacity: 0.8;
  -webkit-transition: opacity var(--trans-duration-fast) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-fast) var(--trans-timing-ease);
  margin-inline: auto;
}
.site-footer .footer-group-partners .partner-logo:hover {
  opacity: 1;
}
.site-footer .footer-group-legal {
  text-align: left;
}
.site-footer .footer-group-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-group-legal li {
  margin-bottom: 0.5rem;
}
.site-footer .footer-group-legal a {
  color: var(--text-light-secondary);
  text-decoration: none;
  -webkit-transition: color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: color var(--trans-duration-fast) var(--trans-timing-ease);
}
.site-footer .footer-group-legal a:hover, .site-footer .footer-group-legal a:focus-visible {
  color: var(--footer-link-hover-color);
  text-decoration: underline;
}
.site-footer .footer-group-legal .footer-admin-link a {
  color: var(--footer-bottom-text-color);
  opacity: 0.6;
  font-weight: 400;
}
.site-footer .footer-group-legal .footer-admin-link a:hover, .site-footer .footer-group-legal .footer-admin-link a:focus-visible {
  color: var(--footer-link-hover-color);
  opacity: 1;
}
.site-footer .footer-group-social {
  text-align: center;
}
.site-footer .footer-group-social .social-icons {
  display: inline-block;
}
.site-footer .footer-group-social .social-icons a {
  display: inline-block;
}
.site-footer .footer-group-social .social-icons a img {
  width: 50px;
  height: 50px;
  margin-inline: 0.5em;
  opacity: 0.7;
  -webkit-transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), transform var(--trans-duration-fast) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-fast) var(--trans-timing-ease), transform var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease);
  will-change: opacity, transform;
}
.site-footer .footer-group-social .social-icons a:hover img, .site-footer .footer-group-social .social-icons a:focus-visible img {
  opacity: 1;
  -webkit-transform: scale(1.15) translateY(-2px);
          transform: scale(1.15) translateY(-2px);
}
.site-footer > p {
  max-width: none;
  text-align: center;
  font-size: 0.85rem;
  color: var(--footer-bottom-text-color);
  margin-top: 0;
  margin-bottom: 0;
}
.site-footer > p:first-of-type {
  padding-top: 2rem;
  margin-bottom: 0.5rem;
}

:root {
  --z-background: -10;
  --circle-count: 15;
  --circle-count-mobile: 8;
  --floating-bg-h: 210;
  --floating-bg-s: 20%;
  --floating-bg-l: 60%;
  --floating-opacity-base: 0.4;
  --floating-blur-base: 4px;
  --floating-shadow: rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  :root {
    --circle-count: var(--circle-count-mobile, 8);
  }
}
.bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: var(--z-background, -10);
  pointer-events: none;
}

.floating-circles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  -webkit-filter: blur(var(--floating-blur-base));
          filter: blur(var(--floating-blur-base));
  -webkit-box-shadow: 0 2px 5px var(--floating-shadow);
          box-shadow: 0 2px 5px var(--floating-shadow);
  -webkit-animation: float ease-in-out infinite;
          animation: float ease-in-out infinite;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.floating-circle--type3 {
  opacity: calc(var(--floating-opacity-base) * 0.7);
  -webkit-filter: blur(calc(var(--floating-blur-base) * 2));
          filter: blur(calc(var(--floating-blur-base) * 2));
}
@media (max-width: 768px) {
  .floating-circle {
    -webkit-animation: none;
            animation: none;
  }
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(6vw, 4vh);
            transform: translate(6vw, 4vh);
  }
  50% {
    -webkit-transform: translate(10vw, 0vh);
            transform: translate(10vw, 0vh);
  }
  75% {
    -webkit-transform: translate(4vw, -6vh);
            transform: translate(4vw, -6vh);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(6vw, 4vh);
            transform: translate(6vw, 4vh);
  }
  50% {
    -webkit-transform: translate(10vw, 0vh);
            transform: translate(10vw, 0vh);
  }
  75% {
    -webkit-transform: translate(4vw, -6vh);
            transform: translate(4vw, -6vh);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
:root {
  --z-base: 1;
  --text-light-hero: var(--text-light-primary);
  --hero-overlay-start: rgba(10, 10, 10, 0.8);
  --hero-overlay-end: rgba(10, 10, 10, 0.2);
  --text-shadow-color: rgba(0, 0, 0, 0.5);
  --fs-h1-mobile: clamp(2rem, 1.5rem + 4vw, 3rem);
  --fs-h1-desktop: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --fs-subheading-mobile: clamp(1rem, 0.9rem + 1vw, 1.25rem);
  --fs-subheading-desktop: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
  --hero-content-padding: 1rem;
  --hero-trans-delay: 0.2s;
}

.hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
  background-color: var(--black-color);
  display: grid;
  margin-top: calc(-1 * var(--header-height-scrolled));
  z-index: 2;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 67% calc(100% - 35px), 34% calc(100% - 70px), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 67% calc(100% - 35px), 34% calc(100% - 70px), 0 100%);
}
.hero #hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 65%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, var(--hero-overlay-start)), to(transparent));
  background: linear-gradient(to top, var(--hero-overlay-start) 20%, transparent 100%);
  display: grid;
  place-items: end center;
  padding: var(--hero-content-padding);
  padding-bottom: 20vh;
}
.hero .hero-content {
  color: var(--text-light-hero);
  max-width: 900px;
}
.hero .hero-content h1,
.hero .hero-content .hero-subheading {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity var(--trans-duration-slow) var(--trans-timing-ease-out), -webkit-transform var(--trans-duration-slow) var(--trans-timing-ease-out);
  transition: opacity var(--trans-duration-slow) var(--trans-timing-ease-out), -webkit-transform var(--trans-duration-slow) var(--trans-timing-ease-out);
  transition: opacity var(--trans-duration-slow) var(--trans-timing-ease-out), transform var(--trans-duration-slow) var(--trans-timing-ease-out);
  transition: opacity var(--trans-duration-slow) var(--trans-timing-ease-out), transform var(--trans-duration-slow) var(--trans-timing-ease-out), -webkit-transform var(--trans-duration-slow) var(--trans-timing-ease-out);
  text-shadow: 1px 1px 3px var(--text-shadow-color);
  will-change: opacity, transform;
}
.hero .hero-content h1 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.hero .hero-content .hero-subheading {
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
  -webkit-transition-delay: var(--hero-trans-delay);
          transition-delay: var(--hero-trans-delay);
  max-width: 600px;
  margin-inline: auto;
}
.hero.hero-video-ready .hero-content h1,
.hero.hero-video-ready .hero-content .hero-subheading {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@media (max-width: 768px) {
  .hero {
    height: 60vh;
  }
  .hero .hero-overlay {
    -ms-flex-line-pack: start;
        align-content: start;
    padding-bottom: 20rem;
    padding-top: calc(var(--header-height-initial-mobile) + 2rem);
  }
  .hero .hero-content h1 {
    font-size: 2.8rem;
  }
  .hero .hero-content .hero-subheading {
    font-size: 1.1rem;
    text-align: left;
  }
}
.fog-overlay {
  position: relative;
  top: -1px;
  height: 25vh;
  background-color: transparent;
  z-index: 1;
  pointer-events: none;
}

:root {
  --_pattern-opacity-light: 0.8;
  --_pattern-opacity-dark: 0.9;
  --_pattern-bg-size: 500px auto;
  --intro-bg-light: var(--bg-light);
  --intro-bg-dark: var(--bg-dark);
}

.intro-fog-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: -70px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(black), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 25vh), transparent 100%);
  mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(black), to(transparent));
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 25vh), transparent 100%);
}
.intro-fog-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/images/patterns/intro_section1.webp");
  background-repeat: repeat;
  background-position: center center;
  background-size: var(--_pattern-bg-size);
  opacity: var(--_pattern-opacity-light);
  z-index: -1;
}
html.dark-mode .intro-fog-wrapper::before {
  background-image: url("assets/images/patterns/intro_section1-d.webp");
  opacity: var(--_pattern-opacity-dark);
}

.intro-section {
  position: relative;
  overflow: visible;
  padding: 0 1rem 2rem 1rem;
  background-color: transparent;
  z-index: 1;
  color: var(--text-dark-primary);
}
html.dark-mode .intro-section {
  color: var(--text-light-primary);
}
.intro-content-wrapper {
  position: relative;
  z-index: 1;
  padding-top: 5rem;
  padding-bottom: 0rem;
  max-width: 900px;
  margin-inline: auto;
}
.intro-content-wrapper p {
  margin-inline: auto;
  margin-bottom: 4rem;
}
.intro-content-wrapper p:first-of-type {
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .intro-content-wrapper {
    padding-top: 5rem;
  }
  .intro-content-wrapper p {
    font-size: clamp(1.2rem, 2.7vw, 1.3rem);
  }
}
.intro-content-wrapper .skills-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.5rem;
  max-width: 900px;
}
@media (max-width: 992px) {
  .intro-content-wrapper .skills-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    max-width: 600px;
    justify-items: center;
  }
}
@media (max-width: 576px) {
  .intro-content-wrapper .skills-list {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 300px;
  }
}
.intro-content-wrapper .skill-item {
  -webkit-transform: scale(1.35);
          transform: scale(1.35);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  list-style-type: none;
}
.intro-content-wrapper .skill-icon {
  width: 80px;
  height: auto;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}
.intro-content-wrapper .skill-text {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1rem;
  color: var(--accent-color);
  line-height: 1.3;
  padding-bottom: 3rem;
}

.about-workshops-section {
  padding: clamp(2.6rem, 7vh, 5.25rem) 1rem;
  padding-bottom: clamp(2.6rem, 7vh, 5.25rem);
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--text-light-primary);
  will-change: transform;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), 67% 100%, 34% calc(100% - 35px), 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), 67% 100%, 34% calc(100% - 35px), 0 100%);
}
@media (min-width: 1025px) {
  .about-workshops-section {
    margin-top: var(--spacing-above-prednosti);
  }
}
@media (max-width: 1024px) {
  .about-workshops-section {
    margin-top: var(--spacing-above-prednosti-mobile);
    margin-bottom: var(--spacing-below-prednosti-mobile);
  }
}
.about-workshops-section::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 1;
  background: -webkit-gradient(linear, left top, right top, from(#272727), to(#09596d));
  background: linear-gradient(to right, #272727, #09596d);
  -webkit-mask-image: url("assets/icons/triangle-mask.png");
  mask-image: url("assets/icons/triangle-mask.png");
  -webkit-mask-size: auto 70px;
  mask-size: auto 70px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: top center;
  mask-position: top center;
}
.about-workshops-section::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: -webkit-gradient(linear, left top, right top, from(#272727), to(#09596d));
  background: linear-gradient(to right, #272727, #09596d);
}
.about-workshops-section .content-wrapper {
  max-width: 1000px;
  padding-top: 4rem;
  padding-bottom: 6rem;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.about-workshops-section .content-wrapper h2 {
  font-size: clamp(1.95rem, 1.584rem + 1.828vw, 2.681rem);
  color: var(--text-light-primary);
  background: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 4rem;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.about-workshops-section .content-wrapper p {
  font-size: clamp(1.2rem, 2.7vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 70ch;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  text-align: center;
  color: var(--text-light-primary);
}
html.dark-mode .about-workshops-section .content-wrapper p {
  color: var(--text-light-secondary);
}
.about-workshops-section .content-wrapper p:last-of-type {
  margin-bottom: 0;
}
.about-workshops-section .content-wrapper p::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto 0.5em auto;
  background-image: url("assets/icons/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 1025px) {
  .about-workshops-section .content-wrapper p {
    max-width: 49ch;
  }
}
@media (max-width: 768px) {
  .about-workshops-section::before {
    height: 35px;
    -webkit-mask-size: auto 35px;
    mask-size: auto 35px;
  }
  .about-workshops-section::after {
    top: 35px;
  }
  .about-workshops-section .content-wrapper {
    padding-top: 3rem;
  }
}

.about {
  background-color: var(--bg-light);
  color: var(--text-dark-primary);
  padding-top: var(--space-section-bottom);
  padding-bottom: var(--section-padding-bottom);
  padding-inline: 1rem;
}
.about .content {
  max-width: 1100px;
  margin: 0 auto;
}
.about .vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
  margin-bottom: 8rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.about .vision-mission h3 {
  font-size: 1.3rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
}
.about .vision-mission p {
  margin-bottom: 0;
}
.about .vision-mission p:last-child {
  grid-column: 1/-1;
  grid-row: 2/3;
  margin-top: 2rem;
}
.about .team-section {
  display: none !important;
  margin-top: 4rem;
}
.about .team-section h3 {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
}
.about .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.about .team-member {
  margin: 0;
}
.about .team-member img {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  will-change: transform, box-shadow;
}
.about .team-member:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.about .team-member figcaption {
  font-weight: 600;
  color: var(--text-dark-primary);
  font-size: 1rem;
}
.about .contact-button-wrapper {
  text-align: center;
  margin-top: 0;
}
@media (max-width: 768px) {
  .about {
    contain: content;
  }
  .about .vision-mission {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-inline: 1rem;
  }
  .about .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
  }
  .about .team-member img {
    max-width: 140px;
  }
}

:root {
  --_edge-stroke-color-light: rgba(0, 180, 210, 0.7);
  --_edge-stroke-color-dark: rgba(125, 202, 228, 0.7);
  --_edge-stroke-width: 5px;
  --_edge-glow-blur: 10px;
  --_edge-glow-color: rgba(52, 228, 255, 1);
}

.hero-edge-effect,
.bottom-edge-effect {
  position: absolute;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.hero-edge-effect path,
.bottom-edge-effect path {
  fill: none;
  stroke: var(--_edge-stroke-color-light);
  stroke-width: var(--_edge-stroke-width);
  -webkit-filter: drop-shadow(0 0 var(--_edge-glow-blur) var(--_edge-glow-color));
          filter: drop-shadow(0 0 var(--_edge-glow-blur) var(--_edge-glow-color));
}
html.dark-mode .hero-edge-effect path,
html.dark-mode .bottom-edge-effect path {
  stroke: var(--_edge-stroke-color-dark);
}

.hero-edge-effect {
  bottom: -1px;
}

.bottom-edge-effect {
  bottom: 0;
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.has-glow-edge {
  position: relative;
}
.has-glow-edge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--_edge-stroke-color-light);
  -webkit-box-shadow: 0 0 10px var(--_edge-glow-color);
          box-shadow: 0 0 10px var(--_edge-glow-color);
}
html.dark-mode .has-glow-edge::before {
  background-color: var(--_edge-stroke-color-dark);
}

.subpage-header {
  background-color: var(--header-bg-scrolled);
  border-bottom: 1px solid var(--card-border-color);
  -webkit-box-shadow: var(--card-shadow);
          box-shadow: var(--card-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  .subpage-header {
    background-color: var(--header-bg-scrolled-blur);
    -webkit-backdrop-filter: blur(var(--header-blur-amount));
    backdrop-filter: blur(var(--header-blur-amount));
  }
}
html.dark-mode .subpage-header {
  background-color: var(--header-bg-scrolled-dark);
  border-bottom-color: var(--card-border-color-dark);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  html.dark-mode .subpage-header {
    background-color: var(--header-bg-scrolled-blur-dark);
  }
}
.subpage-header .header-container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.subpage-header .logo-container {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  margin: 0 auto;
}
.subpage-header .logo-container .subpage-logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 auto;
}

.subpage-content {
  max-width: 960px;
  margin: 2rem auto 0; /* Removed bottom margin */
  padding: 1rem 2rem;
  padding-top: 140px;
  background-color: var(--card-background);
  border-radius: var(--border-radius-medium);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
}
.subpage-content h1 {
  text-align: left;
  margin-bottom: 2.5rem;
  color: var(--primary-color);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.subpage-content .subpage-image-container {
  position: relative;
  margin-bottom: 1.5rem;
}
.subpage-content .subpage-main-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-large);
  position: relative;
  z-index: 1;
}

.subpage-metadata {
  position: absolute;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.7);
  padding: 0.5rem 0.8rem;
  border-radius: var(--border-radius-large);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  top: 1rem;
  right: 1rem;
  bottom: auto;
  left: auto;
}
@media (max-width: 767px) {
  .subpage-metadata {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    border-radius: 0;
    border-top-left-radius: var(--border-radius-large);
    padding: 0;
    gap: 0.5rem;
  }
  .subpage-metadata .age-group {
    padding: 0.3em 0.6em;
  }
  .subpage-metadata .card-stars {
    font-size: 1.8rem;
  }
}
.subpage-metadata .age-groups-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.subpage-metadata .age-group {
  padding: 0.4em 0.8em;
  border-radius: 15px;
  font-size: 1.1em;
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.1;
  -webkit-box-shadow: var(--age-shadow);
          box-shadow: var(--age-shadow);
  white-space: nowrap;
}
.subpage-metadata .age-group.age-g1 {
  background-color: var(--age-g1-bg);
  color: var(--age-g1-text);
}
.subpage-metadata .age-group.age-g2 {
  background-color: var(--age-g2-bg);
  color: var(--age-g2-text);
}
.subpage-metadata .card-stars {
  font-size: 2rem;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2rem;
}
.subpage-metadata .card-stars .star.filled {
  color: var(--star-filled-color);
  -webkit-filter: var(--star-shadow);
          filter: var(--star-shadow);
}
.subpage-metadata .card-stars .star.empty {
  color: var(--star-empty-color);
}

.text-content h2, .text-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-color-strong);
}
.text-content p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
  color: var(--text-color);
  font-size: 1.1em;
}
.text-content a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.text-content a:hover {
  color: var(--link-hover-color);
}

#prijava {
  margin-top: -80px; /* Negative margin to offset for header */
  padding-top: 100px; /* Padding to push content down */
  border-top: 1px solid var(--border-color);
}
#prijava .form-section-title {
  font-size: 1.3rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
#prijava .form-main-title {
  text-align: left;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.3;
  padding-left: 0;
}
#prijava .form-main-title .form-subtitle {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-color-secondary);
  margin-top: 0.25rem;
}
#prijava label {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
#prijava input[type=text],
#prijava input[type=email],
#prijava input[type=tel],
#prijava select,
#prijava textarea {
  padding: 10px;
  font-size: 1.05rem;
}
#prijava select {
  padding-right: 35px;
}
#prijava .checkbox-group label {
  font-size: 0.95rem;
}

.subpage-content .apply-section {
  margin-bottom: 2rem;
}

.subpage-footer {
  background-color: var(--background-color);
  color: var(--text-color);
  border-top: 1px solid var(--border-color);
  margin-top: 1.5rem; /* Reduced from 3rem */
  padding: 1.5rem 1rem;
}
.subpage-footer .footer-content-simple {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.subpage-footer .footer-content-simple .footer-text-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.subpage-footer .footer-content-simple .footer-text-group p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-color);
}
.subpage-footer .footer-content-simple .footer-back-link {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.subpage-green-screen-1 .video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.subpage-green-screen-1 .video-item {
  background-color: var(--background-color);
  border-radius: var(--border-radius-medium);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.subpage-green-screen-1 .video-item:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: var(--shadow-strong);
          box-shadow: var(--shadow-strong);
}
.subpage-green-screen-1 .video-item .video-thumbnail {
  width: 100%;
  height: 180px;
  background-color: #e0e0e0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-style: italic;
  color: #888;
}
.subpage-green-screen-1 .video-item .video-title {
  padding: 1rem;
  font-weight: 600;
  color: var(--text-color-strong);
}

.section-title {
  font-family: var(--font-secondary);
  font-weight: 500;
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0.1em 0.8em;
  margin-bottom: 5rem;
  font-size: clamp(1.82rem, 1.9rem + 1.70625vw, 3.5rem);
  text-align: center;
  color: var(--text-dark-primary);
}
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.2rem, 1rem + 1.5vw, 2.3rem);
  }
}
html.dark-mode .section-title {
  color: var(--text-light-primary);
}
html.dark-mode .section-title::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.section-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-image: url("assets/images/patterns/underline1.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

:root {
  --workshop-section-offset: 0vh;
  --spacing-above-prednosti: 25vh;
  --spacing-below-prednosti: 20rem;
  --spacing-above-prednosti-mobile: 15rem;
  --spacing-below-prednosti-mobile: 15rem;
  --card-bg: var(--white-color);
  --card-border-color: rgba(0, 0, 0, 0.55);
  --card-text-primary: var(--text-dark-primary);
  --card-text-secondary: var(--text-dark-secondary);
  --card-details-bg: rgba(231, 231, 231, 0.75);
  --card-overlay-bg: rgba(255, 255, 255, 0.5);
  --age-g1-bg: #84bdc0;
  --age-g1-text: var(--black-color);
  --age-g2-bg: #e6bb97;
  --age-g2-text: var(--black-color);
  --age-shadow: 0 3px 5px rgba(0,0,0,0.25);
  --star-filled-color: hsl(40, 100%, 55%);
  --star-empty-color: rgba(0, 0, 0, 0.25);
  --star-shadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px hsla(40, 100%, 55%, 0.7));
  --icon-color: var(--card-text-primary);
  --icon-shadow: drop-shadow(3 2px 3px rgba(0,0,0,0.3));
  --card-hover-brightness: 0.98;
  --card-max-width: 850px;
  --card-stagger: 5.5vw;
}

.workshops-intro-text {
  font-size: clamp(1.2rem, 2.7vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 60ch;
  margin-bottom: 1rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;
  color: var(--text-dark-primary);
}
html.dark-mode .workshops-intro-text {
  color: var(--text-light-primary);
}
.workshops-intro-text a.newsletter-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}
.workshops-intro-text a.newsletter-link:hover, .workshops-intro-text a.newsletter-link:focus-visible {
  color: var(--link-hover-color);
}
html.dark-mode .workshops-intro-text a.newsletter-link {
  color: var(--accent-color);
}
html.dark-mode .workshops-intro-text a.newsletter-link:hover, html.dark-mode .workshops-intro-text a.newsletter-link:focus-visible {
  color: var(--link-hover-color-dark);
}

.workshops-block {
  position: relative;
  margin-top: -10rem;
  z-index: calc(var(--z-content-overlay) + 1);
}

.section-intro-background {
  background-color: var(--bg-light);
  padding: 1rem;
  padding-top: 4rem;
  margin-bottom: -3rem;
  position: relative;
  z-index: 1;
}
html.dark-mode .section-intro-background {
  background-color: var(--bg-dark);
}

.intro-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25vh;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--bg-light)), to(transparent));
  background: linear-gradient(to bottom, var(--bg-light), transparent);
  -webkit-transform: translateY(calc(100% - 1px));
          transform: translateY(calc(100% - 1px));
  z-index: -1;
}

html.dark-mode .intro-fade-overlay {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--bg-dark)), to(transparent));
  background: linear-gradient(to bottom, var(--bg-dark), transparent);
}

.cards-container {
  padding: 0;
  padding-bottom: 3rem;
  margin: 0;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cards-section .section-title {
  margin-bottom: 2rem;
}

#workshops-container .card:last-child {
  margin-bottom: 0;
}

#news-container .card:last-child {
  margin-bottom: 0;
}

.card {
  scroll-margin-top: calc(var(--header-height-scrolled) + 20px);
  background: transparent;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  margin-block: 5rem;
  max-width: var(--card-max-width);
  position: relative;
  border: 1px solid var(--card-border-color);
  -webkit-box-shadow: var(--card-shadow);
          box-shadow: var(--card-shadow);
  color: var(--card-text-primary);
  -webkit-transition: -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: box-shadow var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: box-shadow var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.7s var(--trans-timing-layout), -webkit-transform 0.7s var(--trans-timing-layout), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.7s var(--trans-timing-layout), -webkit-transform 0.7s var(--trans-timing-layout), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.7s var(--trans-timing-layout), transform 0.7s var(--trans-timing-layout), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.7s var(--trans-timing-layout), transform 0.7s var(--trans-timing-layout), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform 0.7s var(--trans-timing-layout), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-medium) var(--trans-timing-ease);
  will-change: opacity, transform;
}
.card.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.card .card-image-container {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-large);
  -webkit-transition: border-radius var(--trans-duration-smooth) var(--trans-timing-layout) var(--trans-duration-medium);
  transition: border-radius var(--trans-duration-smooth) var(--trans-timing-layout) var(--trans-duration-medium);
}
.card .card-image-container .card-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform var(--trans-duration-slow) var(--trans-timing-layout);
  transition: -webkit-transform var(--trans-duration-slow) var(--trans-timing-layout);
  transition: transform var(--trans-duration-slow) var(--trans-timing-layout);
  transition: transform var(--trans-duration-slow) var(--trans-timing-layout), -webkit-transform var(--trans-duration-slow) var(--trans-timing-layout);
  will-change: transform;
  border-radius: 0;
}
.card .card-image-container .card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2.5rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background: var(--card-overlay-bg);
  color: var(--card-text-primary);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--border-radius-large);
  border-bottom-right-radius: var(--border-radius-large);
  -webkit-transition: border-radius var(--trans-duration-smooth) var(--trans-timing-layout) var(--trans-duration-medium);
  transition: border-radius var(--trans-duration-smooth) var(--trans-timing-layout) var(--trans-duration-medium);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  .card .card-image-container .card-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}
.card .card-image-container .card-title-wrapper {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 1rem;
}
.card .card-image-container .card-title {
  font-family: var(--font-secondary);
  font-size: clamp(1.2em, 3vw, 1.4em);
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.2;
  color: inherit;
  text-align: left;
}
.card .card-image-container .card-meta {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem;
}
.card .card-image-container .age-groups-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
.card .card-image-container .age-group {
  padding: 0.4em 0.8em;
  border-radius: 15px;
  font-size: 0.85em;
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.2;
  -webkit-box-shadow: var(--age-shadow);
          box-shadow: var(--age-shadow);
  white-space: nowrap;
}
.card .card-image-container .age-group.age-g1 {
  background-color: var(--age-g1-bg);
  color: var(--age-g1-text);
}
.card .card-image-container .age-group.age-g2 {
  background-color: var(--age-g2-bg);
  color: var(--age-g2-text);
}
.card .card-image-container .card-stars {
  font-size: 1.5rem;
  line-height: 1;
  padding-right: 0.2rem;
}
.card .card-image-container .card-stars .star.filled {
  color: var(--star-filled-color);
  -webkit-filter: var(--star-shadow);
  filter: var(--star-shadow);
}
.card .card-image-container .card-stars .star.empty {
  color: var(--star-empty-color);
}
.card .card-image-container .card-info {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--card-text-secondary);
  background-color: rgba(var(--card-bg), 0.7);
  padding: 0.2em 0.5em;
  border-radius: 4px;
}
.card .card-image-container .card-expand-icon {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.5rem);
  right: clamp(1rem, 4vw, 1.8rem);
  font-size: 1.1rem;
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  will-change: transform;
  color: var(--icon-color);
  -webkit-filter: var(--icon-shadow);
          filter: var(--icon-shadow);
  padding: 0.2rem;
}
.card .card-details {
  max-height: 0;
  overflow: hidden;
  padding: 0 clamp(1.5rem, 5vw, 2.5rem);
  contain: content;
  background-color: var(--card-details-bg);
  -moz-osx-font-smoothing: grayscale;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--border-radius-large);
  border-bottom-right-radius: var(--border-radius-large);
  -webkit-transition: max-height var(--trans-duration-smooth) var(--trans-timing-layout), padding var(--trans-duration-smooth) var(--trans-timing-layout);
  transition: max-height var(--trans-duration-smooth) var(--trans-timing-layout), padding var(--trans-duration-smooth) var(--trans-timing-layout);
  will-change: max-height, padding;
}
.card .card-details > *:not(button) {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.card .card-details .card-short {
  font-weight: 500;
  margin-bottom: 1.5rem;
  font-size: 1.3em;
  font-family: var(--font-secondary);
  color: var(--text-dark-primary);
  padding-top: 1.5rem;
  text-align: left;
}
.card .card-details .card-full {
  margin-bottom: 2rem;
  white-space: pre-wrap;
  text-align: left;
  font-size: 1.2em;
  line-height: 1.6;
  font-family: var(--font-main);
  color: var(--card-text-primary);
}
.card .card-details .card-full a {
  color: var(--button-primary-bg);
  text-decoration: underline;
  font-weight: 600;
}
.card .card-details .card-full a:hover, .card .card-details .card-full a:focus-visible {
  color: var(--button-primary-hover-bg);
  text-decoration: none;
}
.card.expanded .card-details {
  max-height: 1500px;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.card.expanded .card-expand-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.card.expanded .card-image-container .card-overlay,
.card.expanded .card-image-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-transition: border-radius 0s;
  transition: border-radius 0s;
}
.card:hover:not(.expanded) {
  -webkit-box-shadow: var(--card-hover-shadow);
          box-shadow: var(--card-hover-shadow);
  -webkit-filter: brightness(var(--card-hover-brightness));
          filter: brightness(var(--card-hover-brightness));
}
.card:hover:not(.expanded) .card-image {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

@media (min-width: 1025px) and (max-width: 1921px) {
  .card {
    max-width: 900px;
  }
}
@media (min-width: 1922px) {
  .card.stagger-left, .card.stagger-right {
    -webkit-transform: translateY(30px) translateX(var(--stagger-offset, 0));
            transform: translateY(30px) translateX(var(--stagger-offset, 0));
  }
  .card.stagger-left {
    --stagger-offset: calc(var(--card-stagger) * -1);
  }
  .card.stagger-right {
    --stagger-offset: var(--card-stagger);
  }
  .card.is-visible.stagger-left, .card.is-visible.stagger-right {
    -webkit-transform: translateY(0) translateX(var(--stagger-offset, 0));
            transform: translateY(0) translateX(var(--stagger-offset, 0));
  }
  .card.stagger-left + .card.stagger-left, .card.stagger-right + .card.stagger-right {
    margin-inline: auto;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  .card.stagger-left + .card.stagger-left.is-visible, .card.stagger-right + .card.stagger-right.is-visible {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media (min-width: 1922px) {
  .card {
    max-width: 1200px;
  }
}
@media (max-width: 768px) {
  .card {
    margin-block: 3rem;
    max-width: 100%;
  }
  .card:hover {
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-box-shadow: var(--card-shadow);
            box-shadow: var(--card-shadow);
    -webkit-filter: none;
            filter: none;
  }
  .card:hover .card-image {
    -webkit-transform: none;
            transform: none;
  }
  .card .card-details {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .card .card-image-container .card-overlay {
    padding: 1rem 1rem !important;
  }
  .card.expanded .card-details .card-short {
    padding-top: 1rem;
  }
  .card.expanded .card-details .card-button {
    margin-bottom: 1.5rem;
  }
  .card .card-title {
    font-size: 1.1em;
  }
  .card .card-stars {
    font-size: 1.3rem;
  }
  .card .age-group {
    font-size: 0.8em;
    padding: 0.3em 0.6em;
  }
  .card .card-expand-icon {
    font-size: 1rem;
    bottom: 1rem;
    right: 1rem;
  }
  .card .card-details .card-short {
    font-size: 1em;
    padding-top: 1rem;
  }
  .card .card-details .card-full {
    font-size: 0.95em;
  }
  .card .card-button {
    padding: 10px 20px;
    font-size: 0.95em;
    margin-bottom: 1.5rem;
  }
}
@media (min-width: 1025px) {
  #delavnice-in-tecaji-section {
    margin-top: var(--spacing-below-prednosti);
  }
}
@media (max-width: 1024px) {
  #delavnice-in-tecaji-section {
    margin-top: 0;
  }
}

#gallery {
  background-color: transparent;
  padding-top: 10rem;
  padding-bottom: 15rem;
}
@media (max-width: 768px) {
  #gallery {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .gallery-container {
    padding-inline: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
  }
}
.gallery-container p {
  grid-column: 1/-1;
  color: var(--text-dark-secondary);
  padding: 2rem;
}

.gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--border-radius-medium);
  -webkit-box-shadow: var(--card-shadow);
          box-shadow: var(--card-shadow);
  cursor: pointer;
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  position: relative;
  aspect-ratio: 4/3;
  opacity: 0;
  -webkit-transform: translateY(20px) scale(0.95);
          transform: translateY(20px) scale(0.95);
  -webkit-transition: opacity 0.6s var(--trans-timing-ease-out), -webkit-transform 0.6s var(--trans-timing-ease-out), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.6s var(--trans-timing-ease-out), -webkit-transform 0.6s var(--trans-timing-ease-out), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.6s var(--trans-timing-ease-out), transform 0.6s var(--trans-timing-ease-out), box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity 0.6s var(--trans-timing-ease-out), transform 0.6s var(--trans-timing-ease-out), box-shadow var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform 0.6s var(--trans-timing-ease-out), -webkit-box-shadow var(--trans-duration-medium) var(--trans-timing-ease);
  will-change: opacity, transform;
}
.gallery-item.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-fast) var(--trans-timing-ease);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-fast) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-fast) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), filter var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-filter var(--trans-duration-fast) var(--trans-timing-ease);
  will-change: transform;
}
.gallery-item:hover {
  -webkit-transform: scale(1.02) translateY(-4px);
          transform: scale(1.02) translateY(-4px);
  -webkit-box-shadow: var(--card-hover-shadow);
          box-shadow: var(--card-hover-shadow);
}
.gallery-item:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
}

@media (max-width: 768px) {
  .gallery-item:hover {
    -webkit-transform: none;
            transform: none;
    -webkit-box-shadow: var(--card-shadow);
            box-shadow: var(--card-shadow);
  }
  .gallery-item:hover img {
    -webkit-transform: none;
            transform: none;
    -webkit-filter: none;
            filter: none;
  }
}
.unified-form-container {
  background-color: var(--unified-form-container-bg);
  padding: var(--unified-form-container-padding);
  border-radius: var(--unified-form-container-radius);
  -webkit-box-shadow: var(--unified-form-container-shadow);
          box-shadow: var(--unified-form-container-shadow);
  color: var(--unified-form-container-text-color);
  max-width: var(--unified-form-container-max-width);
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--form-border-color-light);
  -webkit-transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), border-color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), border-color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), border-color var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), border-color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
}
html.dark-mode .unified-form-container {
  border-color: var(--form-border-color-dark);
}

:root {
  --form-border-color-light: #ccc;
  --form-focus-shadow: 0 0 0 3px hsla(188, 70%, 80%, 0.5);
  --apply-section-gradient-start: #258c9a;
  --apply-section-gradient-end: #194d53;
  --apply-section-margin-top: 35rem;
  --apply-section-margin-bottom: 35rem;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--form-border-color-light);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: var(--font-main);
  font-size: 1.1875rem;
  background-color: var(--form-bg-light);
  color: var(--text-dark-primary);
  -webkit-transition: border-color var(--trans-duration-fast) var(--trans-timing-ease), background-color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: border-color var(--trans-duration-fast) var(--trans-timing-ease), background-color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: border-color var(--trans-duration-fast) var(--trans-timing-ease), background-color var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: border-color var(--trans-duration-fast) var(--trans-timing-ease), background-color var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background-color: var(--white-color);
  -webkit-box-shadow: var(--form-focus-shadow);
          box-shadow: var(--form-focus-shadow);
}
input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--text-dark-secondary);
  opacity: 0.7;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=number]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--text-dark-secondary);
  opacity: 0.7;
}
input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--text-dark-secondary);
  opacity: 0.7;
}
input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=url]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: var(--text-dark-secondary);
  opacity: 0.7;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--text-dark-secondary);
  opacity: 0.7;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-dark-secondary);
  font-size: 1.1875rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.checkbox-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.checkbox-group input[type=checkbox] {
  width: auto;
  margin-right: 12px;
  margin-top: 3px;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid var(--form-border-color-light);
  border-radius: 3px;
  background-color: var(--white-color);
  display: inline-block;
  vertical-align: middle;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
}
.checkbox-group input[type=checkbox]:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: 80%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  mask-size: 80%;
  mask-position: center;
  mask-repeat: no-repeat;
}
.checkbox-group input[type=checkbox]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
.checkbox-group label {
  margin-bottom: 0;
  line-height: 1.4;
  cursor: pointer;
}

.hp-field {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.apply-section {
  position: relative;
}

.school-apply-styling {
  --_chamfer-size: 100px;
  padding-top: 12rem;
  padding-bottom: 8rem;
  margin-top: var(--apply-section-margin-top);
  margin-bottom: var(--apply-section-margin-bottom);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_chamfer-size)), calc(100% - var(--_chamfer-size)) 100%, var(--_chamfer-size) 100%, 0 calc(100% - var(--_chamfer-size)));
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_chamfer-size)), calc(100% - var(--_chamfer-size)) 100%, var(--_chamfer-size) 100%, 0 calc(100% - var(--_chamfer-size)));
}
.school-apply-styling::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 1;
  background: -webkit-gradient(linear, left top, right top, from(var(--apply-section-gradient-start)), to(var(--apply-section-gradient-end)));
  background: linear-gradient(to right, var(--apply-section-gradient-start), var(--apply-section-gradient-end));
  -webkit-mask-image: url("assets/icons/triangle-mask.png");
  mask-image: url("assets/icons/triangle-mask.png");
  -webkit-mask-size: auto 70px;
  mask-size: auto 70px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: top center;
  mask-position: top center;
}
@media (max-width: 768px) {
  .school-apply-styling::before {
    height: 35px;
    -webkit-mask-size: auto 35px;
    mask-size: auto 35px;
  }
}
.school-apply-styling::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: -webkit-gradient(linear, left top, right top, from(var(--apply-section-gradient-start)), to(var(--apply-section-gradient-end)));
  background: linear-gradient(to right, var(--apply-section-gradient-start), var(--apply-section-gradient-end));
}
@media (max-width: 768px) {
  .school-apply-styling::after {
    top: 35px;
  }
}

.apply-section .content-wrapper {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.apply-section .content-wrapper .form-main-title {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--text-dark-primary);
  font-size: clamp(1.56rem, 1.267rem + 1.463vw, 2.145rem);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-align: left;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}
html.dark-mode .apply-section .content-wrapper .form-main-title {
  color: var(--text-light-primary);
}
.apply-section .content-wrapper .form-main-title::after {
  display: none;
}
.apply-section .content-wrapper .form-required-notice {
  margin-bottom: 0;
  margin-top: 0.2rem;
  color: var(--text-dark-secondary);
}
html.dark-mode .apply-section .content-wrapper .form-required-notice {
  color: var(--text-light-secondary);
}
html.dark-mode .apply-section .content-wrapper .form-required-notice .form-required-notice-text {
  font-size: 0.85rem;
  margin-bottom: 0;
  margin-top: 0.2rem;
  color: var(--text-dark-secondary);
}
html.dark-mode html.dark-mode .apply-section .content-wrapper .form-required-notice .form-required-notice-text {
  color: var(--text-light-secondary);
}

.apply-form-intro,
.unified-form-container {
  grid-column: 1;
}

.apply-form-intro {
  position: relative;
  z-index: 2;
  color: var(--text-light-primary);
  text-align: center;
  padding-inline: var(--unified-form-container-padding);
}
.apply-form-intro h2 {
  font-size: clamp(1.95rem, 1.584rem + 1.828vw, 2.681rem);
  margin-bottom: 2rem;
}
.apply-form-intro p {
  font-size: clamp(1.2rem, 2.7vw, 1.3rem);
  margin-inline: auto;
  margin-bottom: 0;
}

.unified-form-container {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  background-color: var(--unified-form-container-bg);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: transform var(--trans-duration-medium) var(--trans-timing-ease), -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
}
.unified-form-container:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.form-section {
  margin-bottom: 2rem;
}

.form-section-title {
  font-size: 1.3rem;
  color: var(--accent-color);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.3rem;
}

.address-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.address-row .form-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.name-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.name-row .form-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 0;
}

button[type=submit].button--primary {
  margin-top: 1.5rem;
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5em; /* Space between items in the row */
  margin-bottom: 1.75em; /* Keep bottom margin */
}

.form-row .form-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* Allow items to grow */
  min-width: 150px; /* Prevent items from becoming too narrow */
  margin-bottom: 0; /* Remove bottom margin from groups inside a row */
}

/* Adjust specific rows if needed */
/* Target the specific row containing student count and age fields */
/* Apply flex properties for roughly equal distribution */
.form-row:has(#student_count):has(#age_from) .form-group {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30%;
          flex: 1 1 30%; /* Allow grow/shrink, aim for ~30% basis */
}

@media (max-width: 768px) {
  .apply-section .unified-form-container {
    margin-inline: 0;
  }
  .apply-section {
    --_chamfer-size: 50px;
    padding-bottom: 8rem;
  }
  .apply-section .form-main-title {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: clamp(1.56rem, 1.267rem + 1.463vw, 2.145rem);
  }
}
@media (max-width: 600px) {
  .apply-section .address-row,
  .apply-section .name-row,
  .apply-section .form-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
  .apply-section .address-row .form-group,
  .apply-section .name-row .form-group,
  .apply-section .form-row .form-group {
    margin-bottom: 1.5rem;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
  }
}
.input-with-suffix {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.input-with-suffix input[type=number] {
  padding-right: 45px;
}
.input-with-suffix span {
  position: absolute;
  right: 15px;
  color: var(--form-placeholder-color, #999);
  pointer-events: none;
  font-size: 1.1rem;
}

:root {
  --z-modal: 1020;
  --z-lightbox: 1030;
  --modal-backdrop-color: rgba(0, 0, 0, 0.6);
  --modal-backdrop-blur: 5px;
  --lightbox-bg: rgba(0, 0, 0, 0.85);
  --lightbox-close-color: var(--white-color);
  --lightbox-close-opacity: 0.8;
  --lightbox-close-opacity-hover: 1;
}

dialog {
  width: calc(100% - 2rem);
  z-index: var(--z-modal);
  opacity: 0;
  -webkit-transform: scale(0.95) translateY(10px);
          transform: scale(0.95) translateY(10px);
  -webkit-transition: opacity var(--trans-duration-medium) var(--trans-timing-ease), display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete, -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-medium) var(--trans-timing-ease), display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete, -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
  transition: opacity var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease), display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete;
  transition: opacity var(--trans-duration-medium) var(--trans-timing-ease), transform var(--trans-duration-medium) var(--trans-timing-ease), display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete, -webkit-transform var(--trans-duration-medium) var(--trans-timing-ease);
}
dialog[open] {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
dialog::-ms-backdrop {
  background-color: var(--modal-backdrop-color);
  -webkit-backdrop-filter: var(--modal-backdrop-blur);
  backdrop-filter: var(--modal-backdrop-blur);
  opacity: 0;
  transition: opacity var(--trans-duration-medium) ease, backdrop-filter var(--trans-duration-medium) ease, -webkit-backdrop-filter var(--trans-duration-medium) ease, display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete;
}
dialog::backdrop {
  background-color: var(--modal-backdrop-color);
  -webkit-backdrop-filter: var(--modal-backdrop-blur);
  backdrop-filter: var(--modal-backdrop-blur);
  opacity: 0;
  transition: opacity var(--trans-duration-medium) ease, backdrop-filter var(--trans-duration-medium) ease, -webkit-backdrop-filter var(--trans-duration-medium) ease, display var(--trans-duration-medium) allow-discrete, overlay var(--trans-duration-medium) allow-discrete;
}
dialog[open]::-ms-backdrop {
  opacity: 1;
}
dialog[open]::backdrop {
  opacity: 1;
}

.lightbox-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--lightbox-bg);
  padding: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: none;
  border-radius: 0;
  margin: 0;
  max-width: none;
  z-index: var(--z-lightbox);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity var(--trans-duration-medium) ease, visibility 0s var(--trans-duration-medium);
  transition: opacity var(--trans-duration-medium) ease, visibility 0s var(--trans-duration-medium);
  will-change: opacity, visibility;
}
.lightbox-modal::-ms-backdrop {
  display: none;
}
.lightbox-modal::backdrop {
  display: none;
}
.lightbox-modal.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.lightbox-modal .lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.lightbox-modal .lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  opacity: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: opacity 0.4s ease 0.1s, -webkit-transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, -webkit-transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, -webkit-transform 0.4s ease 0.1s;
  will-change: opacity, transform;
}
.lightbox-modal.is-visible .lightbox-image {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.lightbox-modal .lightbox-close-btn {
  position: absolute;
  top: -40px;
  right: -20px;
  background: none;
  border: none;
  color: var(--lightbox-close-color);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  opacity: var(--lightbox-close-opacity);
  -webkit-transition: opacity var(--trans-duration-fast) ease;
  transition: opacity var(--trans-duration-fast) ease;
  z-index: 10;
}
.lightbox-modal .lightbox-close-btn:hover, .lightbox-modal .lightbox-close-btn:focus-visible {
  opacity: var(--lightbox-close-opacity-hover);
}
@media (max-width: 768px) {
  .lightbox-modal .lightbox-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 2rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.response-modal .modal-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.response-modal .modal-text {
  margin-bottom: 1.5rem;
  color: var(--text-dark-secondary);
  line-height: 1.6;
}

:root {
  --button-primary-bg: var(--accent-color);
  --button-primary-text: var(--white-color);
  --button-primary-shadow: 0 5px 12px rgba(44, 165, 181, 0.3);
  --button-primary-hover-bg: color-mix(in srgb, var(--button-primary-bg) 85%, black);
  --button-primary-hover-shadow: 0 8px 18px rgba(44, 165, 181, 0.4);
  --button-secondary-bg: #e0e0e0;
  --button-secondary-text: var(--text-dark-primary);
  --button-secondary-hover-bg: #d0d0d0;
}

:where(body) .button {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  -webkit-box-shadow: var(--button-primary-shadow);
          box-shadow: var(--button-primary-shadow);
  cursor: pointer;
  -webkit-transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), transform var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  transition: background-color var(--trans-duration-fast) var(--trans-timing-ease), color var(--trans-duration-fast) var(--trans-timing-ease), transform var(--trans-duration-fast) var(--trans-timing-ease), box-shadow var(--trans-duration-fast) var(--trans-timing-ease), -webkit-transform var(--trans-duration-fast) var(--trans-timing-ease), -webkit-box-shadow var(--trans-duration-fast) var(--trans-timing-ease);
  will-change: transform, box-shadow;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}
:where(body) .button:hover, :where(body) .button:focus-visible {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  background-color: var(--button-primary-hover-bg);
  -webkit-box-shadow: var(--button-primary-hover-shadow);
          box-shadow: var(--button-primary-hover-shadow);
}
:where(body) .button:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.button--secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.button--secondary:hover, .button--secondary:focus-visible {
  background-color: var(--button-secondary-hover-bg);
  color: var(--button-secondary-text);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.button--secondary:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

html.dark-mode :root {
  --text-dark-primary: #222;
  --text-dark-secondary: #ccc;
  --card-bg: var(--bg-dark-secondary);
  --card-border-color: rgba(255, 255, 255, 0.15);
  --card-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.35);
  --card-text-primary: var(--text-light-primary);
  --card-text-secondary: var(--text-light-secondary);
  --card-details-bg: var(--bg-dark);
  --card-overlay-bg: linear-gradient(to top, rgba(28, 28, 30, 0.9), rgba(28, 28, 30, 0.5));
  --card-short-text: #f0f0f0;
  --button-primary-bg: #84bdc0;
  --button-primary-text: var(--black-color);
  --button-primary-shadow: 0 5px 12px rgba(132, 189, 192, 0.3);
  --button-primary-hover-bg: #6da7aa;
  --button-primary-hover-shadow: 0 8px 18px rgba(132, 189, 192, 0.4);
  --button-secondary-bg: #555;
  --button-secondary-text: var(--text-light-primary);
  --button-secondary-hover-bg: #666;
  --age-g1-bg: #00f5d4;
  --age-g1-text: var(--black-color);
  --age-g2-bg: #ffc83d;
  --age-g2-text: var(--black-color);
  --age-shadow: 0 3px 5px rgba(0,0,0,0.25);
  --star-empty-color: rgba(255, 255, 255, 0.35);
  --icon-color: var(--card-text-primary);
  --icon-shadow: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  --card-hover-brightness: 1.12;
  --card-hover-shadow: 0 12px 35px 4px rgba(0, 0, 0, 0.4);
  --floating-bg-h: 220;
  --floating-bg-s: 15%;
  --floating-bg-l: 20%;
  --floating-opacity-base: 0.25;
  --floating-shadow: rgba(0, 0, 0, 0.15);
  --form-border-color-dark: #333333;
  --fog-gradient-end-light: var(--fog-gradient-end-dark);
  --unified-form-container-bg: var(--bg-dark-secondary);
  --unified-form-container-shadow: var(--card-shadow);
  --unified-form-container-shadow: var(--card-shadow);
  --unified-form-container-text-color: var(--text-light-primary);
}
html.dark-mode body {
  color: var(--text-light-primary);
  background-color: var(--bg-dark);
}
html.dark-mode a {
  color: var(--accent-color);
}
html.dark-mode a:hover, html.dark-mode a:focus-visible {
  color: var(--link-hover-color-dark);
}
html.dark-mode section p {
  color: var(--text-light-secondary);
}
html.dark-mode .main-header.header-state-final {
  color: var(--text-light-primary);
  background-color: rgba(var(--header-bg-rgb-dark), var(--header-bg-opacity));
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  html.dark-mode .main-header.header-state-final {
    background-color: rgba(var(--header-bg-rgb-dark), var(--header-bg-blur-opacity));
  }
}
html.dark-mode .main-header.header-state-initial {
  color: var(--header-text-hero);
}
@media (max-width: 768px) {
  html.dark-mode .main-header .hamburger-button {
    color: var(--white-color);
  }
}
html.dark-mode .main-nav-menu {
  background-color: rgba(var(--header-bg-rgb-dark), 0.9);
  color: var(--text-light-primary);
  -webkit-box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  border-top-color: rgba(255, 255, 255, 0.1);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px)) {
  html.dark-mode .main-nav-menu {
    background-color: rgba(var(--header-bg-rgb-dark), 0.7);
  }
}
html.dark-mode .main-nav-menu .nav-menu-controls {
  border-top-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .main-nav-menu .theme-toggle-button:hover, html.dark-mode .main-nav-menu .theme-toggle-button:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .about-workshops-section {
  color: var(--text-light-secondary);
}
html.dark-mode .cards-section {
  background-color: transparent;
}
html.dark-mode .card {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html.dark-mode .card .card-details .card-full a {
  color: var(--button-primary-bg);
}
html.dark-mode .card .card-details .card-full a:hover, html.dark-mode .card .card-details .card-full a:focus-visible {
  color: var(--button-primary-hover-bg);
}
html.dark-mode .card .card-details {
  background-color: rgba(30, 30, 30, 0.75);
  color: var(--text-light-primary);
  -webkit-clip-path: inset(0 0 1px 0);
          clip-path: inset(0 0 1px 0);
}
html.dark-mode .card .card-details .card-short {
  color: var(--card-short-text);
}
html.dark-mode #gallery {
  background-color: transparent;
}
html.dark-mode #gallery .gallery-container p {
  color: var(--text-light-secondary);
}
html.dark-mode .about {
  background-color: var(--bg-dark);
}
html.dark-mode input[type=text],
html.dark-mode input[type=email],
html.dark-mode input[type=tel],
html.dark-mode input[type=url],
html.dark-mode input[type=number],
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--bg-dark-secondary);
  border-color: var(--form-border-color-dark);
  color: var(--text-light-primary);
}
html.dark-mode input[type=text]::-webkit-input-placeholder, html.dark-mode input[type=email]::-webkit-input-placeholder, html.dark-mode input[type=tel]::-webkit-input-placeholder, html.dark-mode input[type=url]::-webkit-input-placeholder, html.dark-mode input[type=number]::-webkit-input-placeholder, html.dark-mode select::-webkit-input-placeholder, html.dark-mode textarea::-webkit-input-placeholder {
  color: var(--text-light-secondary);
  opacity: 0.5;
}
html.dark-mode input[type=text]::-moz-placeholder, html.dark-mode input[type=email]::-moz-placeholder, html.dark-mode input[type=tel]::-moz-placeholder, html.dark-mode input[type=url]::-moz-placeholder, html.dark-mode input[type=number]::-moz-placeholder, html.dark-mode select::-moz-placeholder, html.dark-mode textarea::-moz-placeholder {
  color: var(--text-light-secondary);
  opacity: 0.5;
}
html.dark-mode input[type=text]:-ms-input-placeholder, html.dark-mode input[type=email]:-ms-input-placeholder, html.dark-mode input[type=tel]:-ms-input-placeholder, html.dark-mode input[type=url]:-ms-input-placeholder, html.dark-mode input[type=number]:-ms-input-placeholder, html.dark-mode select:-ms-input-placeholder, html.dark-mode textarea:-ms-input-placeholder {
  color: var(--text-light-secondary);
  opacity: 0.5;
}
html.dark-mode input[type=text]::-ms-input-placeholder, html.dark-mode input[type=email]::-ms-input-placeholder, html.dark-mode input[type=tel]::-ms-input-placeholder, html.dark-mode input[type=url]::-ms-input-placeholder, html.dark-mode input[type=number]::-ms-input-placeholder, html.dark-mode select::-ms-input-placeholder, html.dark-mode textarea::-ms-input-placeholder {
  color: var(--text-light-secondary);
  opacity: 0.5;
}
html.dark-mode input[type=text]::placeholder,
html.dark-mode input[type=email]::placeholder,
html.dark-mode input[type=tel]::placeholder,
html.dark-mode input[type=url]::placeholder,
html.dark-mode input[type=number]::placeholder,
html.dark-mode select::placeholder,
html.dark-mode textarea::placeholder {
  color: var(--text-light-secondary);
  opacity: 0.5;
}
html.dark-mode input[type=text]:focus,
html.dark-mode input[type=email]:focus,
html.dark-mode input[type=tel]:focus,
html.dark-mode input[type=url]:focus,
html.dark-mode input[type=number]:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  border-color: var(--accent-color);
  background-color: var(--bg-dark-secondary);
  -webkit-box-shadow: var(--form-focus-shadow);
          box-shadow: var(--form-focus-shadow);
}
html.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ccc'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
html.dark-mode label {
  color: var(--text-light-secondary);
}
html.dark-mode .checkbox-group input[type=checkbox] {
  background-color: var(--bg-dark);
  border-color: var(--form-border-color-dark);
}
html.dark-mode .checkbox-group input[type=checkbox]:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
html.dark-mode .apply-section .form-section-title {
  color: var(--accent-color);
}
html.dark-mode .apply-section .divider {
  background-color: var(--form-border-color-dark);
}
html.dark-mode .unified-form-container {
  background-color: var(--bg-dark-secondary);
  color: var(--text-light-primary);
}

html.dark-mode .unified-form-container h2,
html.dark-mode .unified-form-container label {
  color: var(--text-light-primary);
}

html.dark-mode .unified-form-container p {
  color: var(--text-light-secondary);
}

/* Standalone Newsletter Page Dark Mode Fix */
html.dark-mode .subpage-background .unified-form-container h2,
html.dark-mode .subpage-background .unified-form-container label {
    color: var(--text-light-primary);
}

html.dark-mode .subpage-background .unified-form-container p {
    color: var(--text-light-secondary);
}

html.dark-mode .unified-form-container h2,
html.dark-mode .unified-form-container label {
  color: var(--text-light-primary);
}

html.dark-mode .unified-form-container p {
  color: var(--text-light-secondary);
}


html.dark-mode .unified-form-container h2,
html.dark-mode .unified-form-container label {
  color: var(--text-light-primary);
}

html.dark-mode .unified-form-container p {
  color: var(--text-light-secondary);
}
html.dark-mode .newsletter-modal .newsletter-form p {
  color: var(--text-light-secondary);
}
html.dark-mode .newsletter-modal .newsletter-form label {
  color: var(--text-light-primary);
}
html.dark-mode .response-modal .modal-text {
  color: var(--text-light-secondary);
}
/* Newsletter Standalone Page Styles */
.subpage-background {
    background: linear-gradient(180deg, var(--bg-color-start) 0%, var(--bg-color-end) 100%);
}

.newsletter-page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px); /* Adjust 160px based on header/footer height */
    padding: 2rem;
}

.newsletter-page-content .newsletter-form {
    width: 100%;
    max-width: 500px; /* Max width of the form */
    margin: 0 auto;
}

/* Ensure form has a background to stand out from the page gradient */
.newsletter-page-content .unified-form-container {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-elevation-medium);
}

@media (max-width: 768px) {
    .newsletter-page-content {
        min-height: calc(100vh - 120px); /* Adjust for smaller header/footer */
        padding: 1rem;
    }
}
/* Dark mode text color fix for subpages */
.dark-mode .subpage-background {
    color: var(--text-color);
}