@import url("https://use.typekit.net/thk1qtq.css");
@import url("https://use.typekit.net/szz1brf.css");

#custom-slider-wrapper {
  --base-font-size: 18px;

  /* Text theme colors - Dark background (default) */
  --text-big-title-stroke: color-mix(
    in oklab,
    var(--primary-color),
    transparent 90%
  );
  --text-big-title-shadow: color-mix(
    in oklab,
    var(--primary-color),
    transparent 20%
  );
  --text-big-title-color: var(--primary-color);
  --text-mid-title-color: rgba(255, 255, 255, 1);
  --text-mid-expo-color: rgba(255, 255, 255, 1);

  /* Text theme colors - Light background (white/no background) */
  --text-light-big-title-stroke: color-mix(
    in oklab,
    var(--primary-color),
    transparent 0%
  );
  --text-light-big-title-shadow: color-mix(
    in oklab,
    var(--primary-color),
    transparent 20%
  );
  --text-light-big-title-color: var(--primary-color);
  --text-light-mid-title-color: #1e1e1e;
  --text-light-mid-expo-color: #1e1e1e;

  /* Base Layout Reset for Slider Only */
  width: 100%;
  height: 800px; /* Takes full viewport height */
  position: relative;
  overflow: hidden;
  font-size: var(--base-font-size);
  display: block;
  border: 1px solid #dadada;
  font-family: "futura-100-cyrillic", sans-serif;
  color: #e9f2f8;
  background-color: transparent; /* FIXED: 'none' isn't valid, used transparent */
  margin: 65px 0 300px 0;
}
a {
  cursor: pointer;
}
#custom-slider-wrapper * {
  box-sizing: border-box;
}

#custom-slider-wrapper .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

#custom-slider-wrapper .curved-panel {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* WAS: height: 100vh; */
  border-radius: 0px;
  position: relative;
  anchor-name: --curved;
  left: 0;
  right: 0;
}

#custom-slider-wrapper .curved-track {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* WAS: height: 100vh; */
  min-width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#custom-slider-wrapper .curved-track::-webkit-scrollbar {
  display: none;
}

#custom-slider-wrapper .card {
  flex: 0 0 100%;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  /* WAS: height: 100vh; */
  border-radius: 0px;
  overflow: hidden;
  margin: 0;
  scroll-snap-align: center;
  position: relative;
  container-type: inline-size;
}

#custom-slider-wrapper .card img,
#custom-slider-wrapper .card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.45s ease-in-out;
}

#custom-slider-wrapper .card video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#custom-slider-wrapper .card > img {
  position: relative;
  z-index: 1;
}

/* Vertical Alignment Calculus */

/* Default (Top) */
#custom-slider-wrapper .card[data-v-align="top"] .caption {
  justify-content: flex-start !important;
}

/* Center */
#custom-slider-wrapper .card[data-v-align="center"] .caption {
  justify-content: center !important;
}

/* Bottom */
#custom-slider-wrapper .card[data-v-align="bottom"] .caption {
  justify-content: flex-end !important;
}

/* 1. The Wrapper: Acts as a full-size flex overlay */
#custom-slider-wrapper .caption {
  position: absolute; /* Still needed to sit ON TOP of the image */
  inset: 0; /* Shorthand for top:0, right:0, bottom:0, left:0 */
  width: 100%;
  height: 100%;

  /* Flexbox automatically centers the inner content */
  display: flex;
  flex-direction: column;
  justify-content: start; /* Vertically center */
  align-items: center; /* Horizontally center */

  z-index: 10;
  pointer-events: none; /* Allows clicking through the empty space */
}

/* 2. The Content Box: Centered, max-width, left-aligned text */
#custom-slider-wrapper .caption-inner {
  width: 100%;
  max-width: 1280px; /* The constraint you requested */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Keeps text aligned to the left */
  text-align: left;
  padding-inline: 8.5vw;
  padding-block-start: 3rem;
  padding-block-end: 3.5rem;
  pointer-events: auto;
  font-family: "futura-100-cyrillic", sans-serif;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  @media (width >= 1900px) {
    padding-inline: min(2.4vw, 120px);
  }
}

#custom-slider-wrapper .caption-inner .big-title {
  font-size: clamp(2.5rem, 1.4rem + 2.75vi, 6rem);
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  margin-block: 0;
  opacity: 1;
  height: 100%;
  text-shadow: -1.5px 1.5px 0
    color-mix(in oklab, var(--primary-color), transparent 60%);
  margin-bottom: 3rem;
  /* color: var(--text-big-title-color); */
  padding: 0;
  white-space: nowrap;
}

/* --- FONT OVERRIDES (Placed AFTER your main big-title block) --- */

/* 1. INTER Override */
#custom-slider-wrapper .card[data-font="inter"] .big-title {
  font-family: "Inter", sans-serif;
  /* Inter handles 900 weight and uppercase well, so we leave those alone */
}

/* 2. FUTURA Override */
#custom-slider-wrapper .card[data-font="futura"] .big-title {
  font-family: "futura-100-cyrillic", sans-serif;
  -webkit-text-stroke: var(--text-big-title-stroke) 1px;
  paint-order: stroke fill;
  /* Futura usually looks good in uppercase, keeping it. */
}

/* 3. SPLASH Override (CRITICAL FIXES) */
#custom-slider-wrapper .card[data-font="splash"] .big-title {
  font-family: "p22-marcel-script-pro", sans-serif !important;
  font-style: normal !important;
  font-size: min(29.75rem, calc(3rem + 7vw));
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-transform: none;

  /* RESET weight: Script fonts are usually standard weight (400) */
  font-weight: 400;

  /* OPTIONAL: Remove text stroke if it makes the script hard to read */
  /* -webkit-text-stroke: 0; */
}

#custom-slider-wrapper .caption-inner .mid-title {
  font-size: clamp(1.25rem, 1rem + 0.93vi, 1.875rem);
  line-height: 1.3;
  font-weight: 500;
  margin-block: 0;
  margin-bottom: 1rem;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: var(--text-mid-title-color);
  padding: 0;
}

#custom-slider-wrapper .caption-inner .mid-expo {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.6rem) !important;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  font-weight: 300;
  max-inline-size: 80ch;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  margin-block: 0;

  margin-bottom: 0.5rem;
  color: var(--text-mid-expo-color);
  padding: 0;
}

#custom-slider-wrapper .mid-expo {
  text-shadow: -0.5px 0.5px 0
    color-mix(in oklab, var(--primary-color), transparent 5%);
}

#custom-slider-wrapper .big-title span.bt-char {
  display: inline-block;
}

/* Light text theme */
#custom-slider-wrapper
  .card[data-text-theme="light"]
  .caption-inner
  .big-title {
  color: color-mix(in oklab, var(--primary-color), transparent 75%);
  -webkit-text-stroke: var(--text-light-big-title-stroke) 1px;
  text-shadow: -2px 2px 0 var(--text-light-big-title-shadow);
  /* color: var(--text-light-big-title-color); */
}

#custom-slider-wrapper
  .card[data-text-theme="light"]
  .caption-inner
  .mid-title {
  color: var(--text-light-mid-title-color);
}

#custom-slider-wrapper .card[data-text-theme="light"] .caption-inner .mid-expo {
  color: var(--text-light-mid-expo-color);
}

/* Alignments */
#custom-slider-wrapper .card[data-caption-align="left"] .caption-inner {
  align-items: flex-start;
  text-align: left;
}

#custom-slider-wrapper .card[data-caption-align="center"] .caption-inner {
  align-items: center;
  text-align: center;
}

#custom-slider-wrapper .card[data-caption-align="right"] .caption-inner {
  align-items: flex-end;
  text-align: right;
}

#custom-slider-wrapper .caption-inner p {
  margin-block: 0;
  height: 100%;
  text-align: inherit;
  font-family: "futura-100-cyrillic", sans-serif;
  padding: 0;
}

#custom-slider-wrapper .caption a {
  pointer-events: auto;
}

#custom-slider-wrapper .btn-hldr {
  margin: 20px 0 20px 0px;
}

#custom-slider-wrapper .btn-hldr.bottom-row-mobile {
  display: none;
}

#custom-slider-wrapper .das-btn {
  font-size: clamp(1.2rem, 1.28vi + 1.1rem, 1.21rem);
  font-weight: 400;
  border: 1px solid hotpink;
  padding: 10px 18px;
  color: white;
  border-radius: 30px;
  corner-shape: squircle;
  text-decoration: none;
  background-color: hotpink;
  margin-top: 200px;
}

#custom-slider-wrapper .das-btn:hover {
  background-color: green;
  color: white;
}

/* Master Container for internal modules */
#custom-slider-wrapper .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  pointer-events: none;
}

#custom-slider-wrapper .content > * {
  pointer-events: auto;
}

#custom-slider-wrapper .content[data-display="grid"] {
  display: grid;
}

#custom-slider-wrapper .content-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-slider-wrapper .content-inner:empty {
  display: none;
}

/* Navigation Buttons */
#custom-slider-wrapper .nav-button {
  position: absolute; /* Changed from fixed to absolute to stay inside wrapper */
  top: 40%;
  /* transform: translateY(-50%); */
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.12s ease;
  pointer-events: auto;
  /* padding: 20px; */
  width: auto;
  height: auto;
  transition: all 0.5s ease;
}

#custom-slider-wrapper .nav-button:hover {
  opacity: 1;
}

#custom-slider-wrapper .nav-button.left {
  left: 0px;
}

#custom-slider-wrapper .nav-button.right {
  right: 00px;
}

#custom-slider-wrapper .nav-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  line-height: 1;
  transition: color 0.3s ease;
}

#custom-slider-wrapper .nav-button-icon svg {
  width: 3.5rem;
  height: 3.5rem;
  /* fill: currentColor; */
  display: block;
  filter: drop-shadow(-1px 1px 0 var(--dark-shadow-color));
  transition: filter 0.3s ease;
}

#custom-slider-wrapper .nav-button.left .nav-button-icon svg {
  transform: rotate(180deg);
}

#custom-slider-wrapper .nav-button-label {
  font-size: 1.1rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.3s ease, color 0.3s ease,
    text-shadow 0.3s ease;
}

#custom-slider-wrapper .nav-button:hover .nav-button-label {
  opacity: 1;
  max-width: 500px;
}

/* --- INVERTED NAV BUTTON THEMES --- */

/* 1. When background is LIGHT -> Show DARK arrows */
#custom-slider-wrapper:has(.card[data-display="light"].current)
  .nav-button-icon,
#custom-slider-wrapper:has(.card[data-display="light"].current)
  .nav-button-label {
  color: var(--dark-arrow-color);
}

#custom-slider-wrapper:has(.card[data-display="light"].current)
  .nav-button-icon
  svg {
  filter: drop-shadow(-1px 1px 0px var(--dark-shadow-color));
}

/* 2. When background is DARK -> Show LIGHT arrows */
#custom-slider-wrapper:has(.card[data-display="dark"].current) .nav-button-icon,
#custom-slider-wrapper:has(.card[data-display="dark"].current)
  .nav-button-label {
  color: var(--light-arrow-color);
}

#custom-slider-wrapper:has(.card[data-display="dark"].current)
  .nav-button-icon
  svg {
  filter: drop-shadow(-0.5px 0.5px 3px var(--light-shadow-color));
}

/* Modular Child Elements */
#custom-slider-wrapper .mod-parent {
  display: flex;
  flex-wrap: wrap;
  gap: 180px;
  justify-content: center;
  align-items: center;
}

#custom-slider-wrapper .mod-child {
  flex: 1 1 380px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease;
  cursor: pointer;
}

#custom-slider-wrapper .mod-child img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  max-height: 400px;
  transition: transform 0.6s ease;
}

#custom-slider-wrapper .mod-child:hover {
  transform: scale(1.03);
}

#custom-slider-wrapper .mod-child:hover img {
  transform: scale(1.03);
}

#custom-slider-wrapper .mod-parent:hover .mod-child:not(:hover) {
  transform: scale(0.9);
}

#custom-slider-wrapper .mod-parent:hover .mod-child:not(:hover) img {
  transform: scale(0.9);
}

/* --- SUSTAINABLE FIX: ISOLATED SLIDE 3 LAYOUT --- */

/* 1. GRID CONTAINER (APPLIES ONLY TO SLIDE WITH BOTTOM ROW) */
/* We toggle display: grid ONLY here. Slides 1 & 2 remain display: block/flex default. */
#custom-slider-wrapper .card:has(.bottom-row) {
  display: grid !important;
  width: 100% !important;
  /* height: 1000px !important; */

  /* The Structure: Top Content (Auto) / Bottom Fill (1fr) */
  grid-template-rows: auto 1fr !important;
  grid-template-columns: 100% !important;

  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 2. BACKGROUND IMAGE (ONLY FOR SLIDE 3) */
/* We ensure the image sits behind the grid content */
#custom-slider-wrapper .card:has(.bottom-row) > img,
#custom-slider-wrapper .card:has(.bottom-row) > video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 3. CAPTION (ONLY FOR SLIDE 3) */
/* We switch position from absolute (default) to relative (grid item) */
#custom-slider-wrapper .card:has(.bottom-row) .caption {
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;

  /* CRITICAL: We DO NOT force alignment here. 
     We let the existing data-caption-align attribute handle the inner text. */

  z-index: 25 !important;
  pointer-events: none;
}

/* 4. BOTTOM ROW (THE FILLER) */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-row {
  grid-row: 2 !important;
  position: relative !important;

  /* Fill the remaining 1fr space */
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;

  gap: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 30 !important;
}
/* MISSION DIRECTIVE: Bottom Row Column Behavior */

/* 1. Range < 900px: 0 Columns (Hidden) */
@media screen and (max-width: 899px) {
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-row {
    display: none !important;
  }
}

/* 2. Range 900px - 1400px: Max 4 Columns */
@media screen and (min-width: 900px) and (max-width: 1400px) {
  /* Ensure the row itself is visible */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Reset basic cell behavior */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell {
    display: block !important;
    flex: 1 1 0% !important;
  }

  /* CRITICAL: Strict Limit - Hide 5th item and beyond */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:nth-child(n + 5) {
    display: none !important;
  }

  /* Hover effect for the visible items */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover {
    flex: 2 1 0% !important;
  }
}

/* 3. Range > 1400px: No Limit (Show All) */
@media screen and (min-width: 1401px) {
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Ensure ALL cells are visible */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell {
    display: block !important;
    flex: 1 1 0% !important;
  }

  /* Hover effect */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover {
    flex: 2 1 0% !important;
  }
}

/* 5. CELL & HOVER (SCOPED STRICTLY TO BOTTOM ROW ELEMENTS) */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell {
  position: relative !important;
  display: block !important;
  flex: 1 1 0% !important; /* Equal width */
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: #000 !important;
  cursor: pointer !important;

  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 6. RESTORED OVERLAY (SCOPED TO BOTTOM ROW) */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* GLOBAL VARIABLE USAGE - NO LOCAL DEF */
  background-color: color-mix(
    in oklab,
    var(--primary-color),
    transparent 20%
  ) !important;

  opacity: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;

  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 7. RESTORED TEXT TRANSITION (SCOPED TO BOTTOM ROW) */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell::after {
  content: attr(data-label);
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 120%) !important;
  color: #fff !important;
  font-family: "futura-100-cyrillic", sans-serif;
  font-size: 3rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;
  text-shadow: -1.5px 2px 0px
    color-mix(in oklab, var(--secondary-color), transparent 60%);
  opacity: 0.3 !important;
  z-index: 20 !important;
  pointer-events: none !important;

  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover: Slide Text Up */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover::after {
  opacity: 1 !important;
  font-size: 1.1rem !important;
  transform: translate(-50%, -50%) !important;
}

/* --- HOVER INTERACTIONS --- */

/* Expand Cell */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover {
  flex: 2.8 1 0% !important;
  z-index: 50 !important;
}

/* Show Overlay */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover::before {
  opacity: 1 !important;
}

/* Zoom Image */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover img {
  transform: scale(1.05) !important;
}

/* Slide Text Up */
#custom-slider-wrapper .card:has(.bottom-row) .bottom-cell:hover::after {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  /* Stack vertically on mobile */
  #custom-slider-wrapper .card:has(.bottom-row) .caption {
    position: relative !important;
    height: auto !important;
    padding: 8.5rem 2.4vw !important; /* Restore padding */
    inset: 0 !important;
  }

  #custom-slider-wrapper .card:has(.bottom-row) .bottom-row {
    position: relative !important;
    height: auto !important;
    flex-direction: column !important;
  }

  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell {
    width: 100% !important;
    height: 200px !important;
    flex: none !important;
    cursor: pointer;
  }

  /* Show label always */
  #custom-slider-wrapper .card:has(.bottom-row) .bottom-cell::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

#custom-slider-wrapper .card:has(.bottom-row) .btn-hldr.bottom-row-mobile {
  display: inline-flex;
  margin-top: 1.5rem;
}
#custom-slider-wrapper .btn-hldr {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: center;
  gap: 26px;
  margin: 30px 0 15px 0;
  margin-left: 0;
}

#custom-slider-wrapper .card {
  /* Very Light Grey */
  background: linear-gradient(-45deg, #ffffff, #f5f5f5);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;

  /* Optional: If your images have transparency or gaps, 
     this ensures the grey shows through */
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 1. The Wrapper */
.bg-slideshow-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* 2. The Color Overlay */
.bg-slideshow-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Using color-mix as requested. 
     Adjust the percentage (e.g., 80%) to control how "thick" the color is.
     This mixes 80% of your Primary Color with Transparency.
  */
  /* Replace your existing background-color line with this: */
}

/* 3. The Image (Start State: Invisible & Blurry) */
.bg-slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  /* Initial State */
  opacity: 0;
  filter: blur(15px); /* Strong blur */
  transform: scale(1.1); /* Zoomed in slightly to hide blur edges */

  /* Slower Transition 
     We animate Opacity, Blur (filter), and Scale (transform) all at once.
  */
  transition: opacity 3s ease-in-out, filter 3s ease-in-out,
    transform 3s ease-out;
}

/* 4. The Active State (Visible & Sharp) */
.bg-slide-img.active {
  opacity: 1;
  filter: blur(0px); /* Becomes sharp */
  transform: scale(1); /* Settles into natural size */
}

/* 1. DEFINE THE THEME COLORS (The "Source") */
:root {
  /* Enable the feature */
  color-scheme: light dark;

  /* Format: light-dark( LightModeColor, DarkModeColor ); 
     - Left side is what you see on a Light Slide
     - Right side is what you see on a Dark Slide
  */

  /* Text Colors */
  --theme-text-main: light-dark(
    #1a1a1a,
    #ffffff
  ); /* Black on Light / White on Dark */
  --theme-text-muted: light-dark(
    #4a4a4a,
    #cccccc
  ); /* Dark Grey on Light / Light Grey on Dark */

  /* Button Colors */
  --theme-btn-bg: light-dark(
    #d32f2f,
    #ffffff
  ); /* Red on Light / White on Dark */
  --theme-btn-text: light-dark(
    #ffffff,
    #d32f2f
  ); /* White on Light / Red on Dark */
}

/* 2. WIRE UP YOUR SPECIFIC CLASSES (The "Connection") */

/* The Titles */
.card .big-title,
.card .mid-title,
.card .mid-expo,
.card .caption p {
  color: #fff;
  transition: color 0.3s ease; /* Smooth transition when theme flips */
}

/* The Button (.das-btn) */
.card .das-btn {
  background-color: var(--theme-btn-bg) !important;
  color: var(--theme-btn-text) !important;
  border-color: var(
    --theme-btn-text
  ) !important; /* Optional if it has a border */
  transition: all 0.3s ease;
}

/* 3. ENSURE THE CONTAINER REACTS */
/* This ensures the JS can actually flip the mode */

body,
.slider-container {
  transition: background-color 0.3s ease;
}

#zg3 {
  pointer-events: none;
}

.service-links {
  list-style: none;
  padding: 0;
  margin: 0px 0 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem 13rem;
}

.service-links li {
  margin: 4px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--color-text-default);
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
  font-weight: var(--font-normal);
  text-decoration: underline solid var(--color-text-default) 0.05em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.service-link:hover {
  /* Hover State */
  color: var(--color-text-default); /* Orange text on hover */
  text-decoration: underline solid var(--secondary-color) 1px;
}
#custom-slider-wrapper .caption-inner .service-links .mid-expo {
  text-shadow: -0px 0px 0
    color-mix(in oklab, var(--primary-color), transparent 80%);
}

.nav-container {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: center;
  gap: 26px;
  margin: 100px 0 15px 0;
}
.spoofy {
  display: inline-flex;
  place-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  background: white;
  border-radius: 200px; /* High radius for the squircle look */
  border: 1px solid rgba(37, 37, 37, 0);
  padding: 8px 20px;
  margin: 0px 0 0px -9px;
  text-decoration: none;
  color: rgb(37, 37, 37);
  z-index: 100;
}
.spoofy:hover {
  background: rgba(255, 255, 255, 0.446);
  border: 1px solid rgba(37, 37, 37, 0.3);
  color: rgb(37, 37, 37);
}

.spoofy:active,
.spoofy:focus {
  background: var(--primary-color);
  color: rgb(240, 240, 240);
}