/* HTML / BODY / CONTAINER / ESSENTIALS */
:root {
  --primary-BG1: #e5edf7;
  --primary-BG2: #ccdaee;
  --primary-COLOR: #0047a0;
  --primary-TEXT1: #0047a0;
  --primary-TEXT2: #e5edf7;
  --primary-TEXT3: #00387c;
  --timeline-section-number: #347dd6;
  --timeline-blend-mode: multiply;
  --form-placeholder: rgba(0, 71, 160, 0.6);
  --hero-star-color: rgba(0, 71, 160, 0.5);
  --star-glow-rgb: 74, 154, 255;
  --glow-blur-radius: 15px;
  --glow-intensity: 0.8;
  --selection-bg: #0047a0;
  --selection-text: #e5edf7;
  --toc-floating-shadow: 0 14px 34px rgba(0, 47, 107, 0.16);
  --toc-floating-border: rgba(0, 71, 160, 0.14);
  --toc-floating-surface: rgba(245, 250, 255, 0.85);
  --toc-floating-surface-strong: rgba(245, 250, 255, 0.97);
}
html[data-theme="dark"] {
  --primary-BG1: #0047ab;
  --primary-BG2: #003d93;
  --primary-COLOR: #e5edf7;
  --primary-TEXT1: #e5edf7;
  --primary-TEXT2: #0047ab;
  --primary-TEXT3: #f2f8ff;
  --timeline-section-number: #b8d6ff;
  --timeline-blend-mode: screen;
  --form-placeholder: rgba(245, 250, 255, 0.6);
  --hero-star-color: rgba(245, 250, 255, 0.5);
  --star-glow-rgb: 229, 237, 247;
  --selection-bg: #e5edf7;
  --selection-text: #0047a0;
  --toc-floating-shadow: 0 18px 40px rgba(0, 11, 30, 0.34);
  --toc-floating-border: rgba(229, 237, 247, 0.18);
  --toc-floating-surface: rgba(0, 58, 139, 0.92);
  --toc-floating-surface-strong: rgba(0, 58, 139, 0.92);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
html {
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
  background-color: var(--primary-COLOR);
  color: var(--primary-TEXT1);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--primary-BG1);
  overflow-x: hidden;
}
main {
  counter-reset: timeline-step;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 20px;
  right: 20px;
  border-left: 2px solid var(--primary-COLOR);
  border-right: 2px solid var(--primary-COLOR);
  pointer-events: none;
  z-index: 9998;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  opacity: 0.1;
  pointer-events: none;
  z-index: 9999;
}
.container {
  width: min(1250px, calc(100% - 40px));
  margin: 0 auto;
  padding: 60px 24px;
  box-sizing: border-box;
}
p {
  font-size: 1.25rem;
  line-height: 2;
  margin: 0px;
  max-width: 800px;
  color: var(--primary-TEXT3);
}
a {
  color: var(--primary-TEXT1);
  text-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition: text-shadow 220ms ease;
}
a:hover {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
h1 {
  font-size: 4rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.5;
  margin-top: 0;
  text-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition: text-shadow 220ms ease;
  margin-bottom: 60px;
}
h1:hover {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
h2 {
  font-size: 2rem;
  font-weight: normal;
  text-align: center;
  margin-top: 0;
  text-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition: text-shadow 220ms ease;
}
h2:hover {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}

/* NAVIGATION BAR LAYOUT */
.site-header,
.site-footer {
  background: var(--primary-COLOR);
  color: var(--primary-TEXT2);
  font-size: 1rem;
  font-weight: 600;
  display: block;
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(var(--star-glow-rgb), 0.2);
  z-index: 9997;
  pointer-events: none;
}
.scroll-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--primary-COLOR);
  transition: width 80ms linear;
}
.bar-inner {
  height: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* HEADER */
.site-header {
  height: 60px;
}
.site-header a {
  color: var(--primary-TEXT2);
  text-decoration: none;
  padding: 8px 2px;
  opacity: 0.95;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.site-header a:hover {
  opacity: 0.8;
}
.site-header a:active {
  transform: translateY(1px);
}
.site-header a.active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* FOOTER */
.site-footer {
  height: 100px;
}
.site-footer a {
  color: var(--primary-TEXT2);
  text-decoration: none;
  opacity: 0.95;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.site-footer a:hover {
  opacity: 0.8;
}
.site-footer .scroll-to-top {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* STAR ICON */
.theme-toggle {
  width: 25px;
  height: 25px;
  display: block;
  cursor: pointer;
  color: var(--primary-TEXT2);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.theme-toggle:hover {
  opacity: 0.8;
}
.theme-toggle:active {
  transform: translateY(1px);
}

/* NAVIGATION LINKS */
.nav-links-right {
  display: flex;
  align-items: center;
  gap: 50px;
}
.nav-links-left {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* LANDING PAGE */
.landing {
  min-height: 90vh;
  position: relative;
  display: flex;
  align-items: center;
}

/* Reusable section wrapper for pages that use <hero-stars> */
.hero-stars-section {
  position: relative;
  overflow: hidden;
}
.hero-stars-section > .container {
  position: relative;
  z-index: 1;
}

/* Custom element host positioning for shared hero backdrop */
hero-stars {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* BLURRED HERO STARS BACKDROP */

/* Container holds stars inside hero, positioned relative to .landing */
.hero-stars-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Base star styles */
.hero-star {
  position: absolute;
  pointer-events: none;
  color: var(--hero-star-color);
  mix-blend-mode: multiply;
}
.hero-star--1 {
  width: 500px;
  height: 500px;
  top: -150px;
  left: -200px;
  filter: blur(20px) drop-shadow(0 0 40px var(--hero-star-color));
  animation: float-star-1 15s ease-in-out infinite;
}
.hero-star--2 {
  width: 350px;
  height: 350px;
  top: 10%;
  right: -100px;
  filter: blur(20px) drop-shadow(0 0 30px var(--hero-star-color));
  animation: float-star-2 20s ease-in-out infinite;
}
.hero-star--3 {
  width: 600px;
  height: 600px;
  bottom: -200px;
  left: 30%;
  filter: blur(20px) drop-shadow(0 0 50px var(--hero-star-color));
  animation: float-star-3 25s ease-in-out infinite;
}
.hero-star--4 {
  width: 250px;
  height: 250px;
  top: 10px;
  left: 40%;
  filter: blur(20px) drop-shadow(0 0 25px var(--hero-star-color));
  animation: float-star-4 18s ease-in-out infinite;
}
.hero-star--5 {
  width: 250px;
  height: 250px;
  bottom: -100px;
  filter: blur(20px) drop-shadow(0 0 25px var(--hero-star-color));
  animation: float-star-5 18s ease-in-out infinite;
}
/* Floating animation for dreamy effect */
@keyframes float-star-1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(25deg);
  }
  50% {
    transform: translate(20px, -15px) rotate(25deg);
  }
}
@keyframes float-star-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-15deg);
  }
  50% {
    transform: translate(-25px, 20px) rotate(-15deg);
  }
}
@keyframes float-star-3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(40deg);
  }
  50% {
    transform: translate(-15px, 25px) rotate(40deg);
  }
}
@keyframes float-star-4 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-5deg);
  }
  50% {
    transform: translate(-5px, 15px) rotate(10deg);
  }
}
@keyframes float-star-5 {
  0%,
  100% {
    transform: translate(0, 0) rotate(15deg);
  }
  50% {
    transform: translate(-25px, 20px) rotate(15deg);
  }
}
.landing-container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}
.landing-column-left,
.landing-column-right {
  height: 100%;
  width: 100%;
}
.landing-column-right {
  display: grid;
  justify-items: right;
  align-items: end;
}
.landing-title {
  text-align: left;
}
.landing-content {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 140px;
}
.landing-cta-button a {
  font-size: 2rem;
  text-decoration: none;
  padding-top: auto;
  margin-bottom: 30px;
  display: inline-flex;
  gap: 0;
  transition: all 0.3s ease;
  align-items: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.button-text {
  display: inline;
}
.button-arrow {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 0.2em;
}
.button-arrow::before {
  content: "→";
}
.landing-cta-button a:hover {
  transform: scale(1.05) translateX(5px);
}
.landing-cta-button a:hover .button-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.landing-cta-button a:hover .button-arrow {
  opacity: 1;
}
.landing-image {
  width: 100%;
  display: grid;
  place-items: center;
}

/* SPINNING STAR */
#spinning-star {
  width: 260px;
  max-width: 90%;
  height: auto;
  color: var(--primary-COLOR);
  transform-origin: center;
  animation: spin-star 40s linear infinite reverse;
  scale: 1;
  filter: drop-shadow(0 0 0 rgba(var(--star-glow-rgb), 0));
  transition:
    scale 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 220ms ease;
}

#spinning-star:hover {
  scale: 1.05;
  filter: drop-shadow(
    0 0 var(--glow-blur-radius)
      rgba(var(--star-glow-rgb), var(--glow-intensity))
  );
  animation: spin-star 40s linear infinite reverse;
}
@keyframes spin-star {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Star entrance animation - rotate and scale in */
@keyframes star-rotate-in {
  from {
    opacity: 0;
    transform: rotate(180deg) scale(0.3);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

#spinning-star.animate-in {
  animation:
    star-rotate-in 1s ease-out forwards,
    spin-star 40s linear infinite reverse 1.3s;
}

/* Timeline section slide-in animations */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.timeline-section.animate-in {
  animation: slide-in-left 0.8s ease-out forwards;
}

/* TABLE OF CONTENTS */
.timeline-toc {
  width: fit-content;
}
.timeline-toc-toggle {
  display: none;
}
.timeline-toc-panel {
  width: fit-content;
}
nav[aria-label="table-of-contents"] ul {
  counter-reset: toc-step;
  padding: 0;
  margin: 0;
}
.toc-item {
  counter-increment: toc-step;
  font-size: 1.375rem;
  line-height: 1.5;
  display: inline-block;
  text-decoration: none;
  margin-bottom: 6px;
}
.toc-number {
  display: inline-flex;
  min-width: 2.3ch;
  text-decoration: none;
  margin-right: 4px;
}
.toc-number::before {
  content: counter(toc-step, decimal-leading-zero) ".";
}
.toc-title {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-bottom: 2px solid currentColor;
}
.toc-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 300ms ease-out;
}
.toc-item:hover .toc-title {
  border-bottom-color: transparent;
}
.toc-item:hover .toc-title::after {
  width: 100%;
}

/* SECTIONS */
.timeline-section {
  counter-increment: timeline-step;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  display: block;
  padding-bottom: 20px;
}
.timeline-section::before {
  content: counter(timeline-step, decimal-leading-zero);
  position: absolute;
  right: clamp(12px, 5vw, 72px);
  top: clamp(16px, 6vw, 76px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-size: clamp(9.375rem, 22vw, 18.75rem);
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #9ac2ff;
  opacity: 0.12;
  mix-blend-mode: var(--timeline-blend-mode);
  filter: blur(0.9px);
  text-shadow:
    0 0 10px rgba(139, 188, 255, 0.22),
    0 0 35px rgba(61, 120, 255, 0.2);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
}
.timeline-section:hover::before {
  opacity: 0.2;
  transform: translate3d(-6px, -2px, 0);
  filter: blur(0px);
}
.timeline-section .container {
  position: relative;
  z-index: 1;
}
.timeline-star {
  position: absolute;
  width: 500px;
  height: 500px;
  left: -240px;
  bottom: -150px;
  top: auto;
  z-index: 0;
  user-select: none;
  color: var(--hero-star-color);
  mix-blend-mode: multiply;
  pointer-events: none;
  filter: blur(20px) drop-shadow(0 0 40px var(--hero-star-color));
  animation: none;
}
html[data-theme="dark"] .timeline-star {
  mix-blend-mode: screen;
}
.timeline-section--light {
  background-color: var(--primary-BG1);
}
.timeline-section--dark {
  background-color: var(--primary-BG2);
}
.timeline-section--light::before {
  color: var(--timeline-section-number);
  opacity: 0.11;
}
.timeline-section--dark::before {
  color: var(--timeline-section-number);
  opacity: 0.14;
}
.section-label {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  padding: 5px 20px;
  justify-content: center;
  background-color: var(--primary-COLOR);
  color: var(--primary-TEXT2);
}
.section-label::before {
  content: counter(timeline-step, decimal-leading-zero) ". ";
}
.section-date {
  font-size: 1.375rem;
  font-weight: normal;
  margin: 0;
  margin-left: auto;
}
.section-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 50px;
  row-gap: 30px;
  margin-top: 50px;
  align-items: start;
  grid-template-areas:
    "left quote"
    "left body"
    "left courses";
}
.section-left {
  grid-area: left;
  max-width: 300px;
}
.section-right {
  display: contents;
}
.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.section-quote {
  grid-area: quote;
  font-style: italic;
  font-size: 2.25rem;
  text-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition: text-shadow 220ms ease;
}
.section-quote:hover {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
.section-courselist-light,
.section-courselist-dark {
  grid-area: courses;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}
.section-courselist-dark ul,
.section-courselist-light ul {
  list-style: none;
  margin: 0;
  padding: 20px;
}
.section-courselist-light {
  background-color: var(--primary-BG2);
}
.section-courselist-dark {
  background-color: var(--primary-BG1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-section::before {
    transition: none;
  }
}

/* DIVIDER LINE  */
.divider {
  width: 100%;
  height: 1.5px;
  background-color: var(--primary-COLOR);
  margin-top: 20px;
}

/* ABOUT / CONTACT PAGE COLUMNS */
.about-container,
.contact-container {
  min-height: 90vh;
}
.column-layout {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 60px;
}
.column-left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.column-right {
  min-width: 0;
}
.column-right p {
  max-width: 700px;
}

/* FAQ SECTION */
.faq-section {
  background-color: var(--primary-BG2);
  width: 100%;
}
.faq-section h2 {
  margin-bottom: 60px;
}
.faq-item {
  border: 2px solid var(--primary-COLOR);
  background: transparent;
  margin: 40px auto;
  overflow: hidden;
  max-width: 800px;
  box-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}
.faq-item:hover,
.faq-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
.faq-item > summary {
  list-style: none;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  color: var(--primary-TEXT1);
  font-size: 1.375rem;
  user-select: none;
}
.faq-icon {
  flex: 0 0 auto;
  display: block;
  color: currentColor;
}
.faq-star {
  width: 25px;
  height: 25px;
  transition: transform 180ms ease;
}
.faq-chevron {
  width: 25px;
  height: 25px;
  margin-left: auto;
  transition: transform 220ms ease;
}
.faq-item:hover .faq-star,
.faq-item:focus-within .faq-star {
  transform: rotate(-10deg) scale(1.04);
}
.faq-item:hover .faq-chevron,
.faq-item:focus-within .faq-chevron {
  transform: translateX(2px);
}
.faq-item[open] .faq-chevron {
  transform: rotate(90deg);
}
.faq-content {
  padding: 0 20px 18px 58px;
}

/* CONTACT PAGE */
.note {
  font-size: 1.375rem;
  text-align: center;
  margin: 0 auto;
}

/* FORM LAYOUT */
.contact-form {
  max-width: 650px;
}
.form-group {
  position: relative;
  margin: 0 0 20px 0; /* reset browser fieldset margin */
  border: 2px solid var(--primary-COLOR);
  padding: 0;
  min-width: 0; /* fix fieldset min-width quirk */
  box-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease;
}
.form-group:hover,
.form-group:focus-within {
  box-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
.form-label {
  margin-left: 5px; /* visual indent matching input padding */
  padding: 0 6px;
  color: var(--primary-TEXT1);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition: text-shadow 220ms ease;
}
.form-input,
.form-textarea {
  width: 100%;
  border: none; /* border lives on the fieldset now */
  background: transparent;
  padding: 14px 14px;
  font-size: 1.375rem;
  font-family: inherit;
  color: var(--primary-TEXT1);
  outline: none;
  box-sizing: border-box;
}
.form-group:focus-within .form-label {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
.form-group:hover .form-label {
  text-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
/* glow on hover/focus is now handled by .form-group:hover and :focus-within */
.form-textarea {
  resize: none;
  min-height: 170px;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--form-placeholder);
  font-style: italic;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 10px;
}
.form-status {
  margin: 0;
  max-width: none;
}
.form-status:empty {
  display: none;
}
.submit-button {
  border: 2px solid var(--primary-COLOR);
  background: var(--primary-COLOR);
  font-size: 1.375rem;
  color: var(--primary-TEXT2);
  padding: 15px 15px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(var(--star-glow-rgb), 0);
  transition:
    filter 180ms ease,
    box-shadow 220ms ease;
}
.submit-button:hover {
  filter: brightness(0.8);
  box-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
.submit-button:focus,
.submit-button:focus-visible,
.submit-button:active {
  box-shadow: 0 0 var(--glow-blur-radius)
    rgba(var(--star-glow-rgb), var(--glow-intensity));
}
#contact-form-shell {
  width: 100%;
}
.contact-thanks {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 7rem;
  box-sizing: border-box;
}
.contact-thanks h2 {
  margin: 0 0 0.25rem 0;
}

/* FLYING STARS */
#stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.flying-star {
  position: fixed;
  font-size: 1.2rem;
  pointer-events: none;
  opacity: 0.8;
  animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

/* SECTION GALLERY (Swiper) */
section .gallery.swiper {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
section .swiper-wrapper {
  align-items: center;
}
section .swiper-slide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
section img.section-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
}

section .swiper-button-prev,
section .swiper-button-next {
  color: var(--primary-COLOR);
  background: transparent;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    background-color 180ms ease,
    opacity 180ms ease;
  border: none;
}

section .gallery.swiper:hover .swiper-button-prev,
section .gallery.swiper:hover .swiper-button-next {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

section .swiper-button-prev {
  left: 3px;
}
section .swiper-button-next {
  right: 3px;
}
section .swiper-button-prev::after,
section .swiper-button-next::after {
  font-size: 26px;
}
section .swiper-button-prev:hover,
section .swiper-button-next:hover {
  background: rgba(var(--star-glow-rgb), 0.18);
}