:root {
  /** colors **/
  color-scheme: light-dark;
  --neutral-10: #fbfdff;
  --neutral-20: #e0e7ede5;
  --neutral-50: #87929ee5;
  --neutral-60: #66727de5;
  --neutral-80: #3a3e42e5;
  --neutral-90: #1e2124;
  --primary-10: #dad8ff;
  --primary-50: #6c63ffe5;
  --primary-60: #5750dde5;
  --primary-80: #302a9ce5;
  --primary-90: #221f5f;
  --error-10: #ffc9c9e5;
  --error-50: #ad3737e5;
  --error-90: #602525;
  --success-10: #bcffd6e5;
  --success-50: #24ad58e5;
  --success-90: #224931;
  --info-10: #9dd4ffe5;
  --info-50: #2882c8e5;
  --info-90: #225983;
  --surface-lighter: #f4f3ff;
  --surface-light: #e3e2f8e5;
  --surface-dark: #36354fe5;
  --surface-darker: #24243de5;
  --background-lighter: #d6daf3;
  --background-light: #c9ccebe5;
  --background-dark: #24233d;
  --background-darker: #131235e5;
  /** font declarations **/
  --heading-font-family: "Playfair", serif;
  --font-family: sans-serif, "poppins";
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  --box-shadow-0: 0 0 0 #000;
  --box-shadow-sm: 0 0 6px -4px #3a3e42;
  --box-shadow-md: 0 2px 8px -4px #3a3e42;
  --box-shadow-lg: 0 4px 12px -4px #3a3e42;
  /** dimensions **/
  --base-font-size: 18px;
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --radius-xs: 8px;
  --gap-xlg: 64px;
  --gap-lg: 32px;
  --gap-md: 20px;
  --gap-sm: 12px;
  --gap-xs: 4px;
  /** media screen sizes **/
  --screen-desktop: 1440px;
  --screen-tablet: 720px;
  --screen-mobile: 480px;
  --screen-smobile: 380px;
}

body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;

  & *, *::before, *::after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  & img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  & .container {
    max-width: 926px;
    width: 100%;
    margin: 0 auto;
    padding: 0.8em 2em;
    position: relative;

    &.wide {
      max-width: 1040px;
    }

    &.wider {
      max-width: 1200px;
    }

    @media (max-width: 720px) {
      max-width: 80dvw;
      font-size: 16px;

      &.wide {
        max-width: 88dvw;
      }
      &.wider {
        max-width: 95dvw;
      }
    }
  }

  & .content {
    padding: 2em 1em;
    text-align: left;
  }

  & p.leading {
    font-size: 1.2em;
    opacity: 0.8;
    margin: 0.8em 0;
    text-wrap: balance;
  }

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

  & .bg-surface {
    color: light-dark(var(--neutral-90), var(--neutral-10));
    background-color: light-dark(var(--surface-light), var(--surface-dark));
  }

  & .bg-background {
    background-color: light-dark(var(--background-lighter), var(--background-dark));
    color: light-dark(var(--neutral-90), var(--neutral-10));
  }

  & .bg-dark {
    color: light-dark(var(--neutral-90), var(--neutral-10));
    background-color: light-dark(var(--surface-darker), var(--background-dark));
  }

  & .italics {
    font-style: italic;
  }

  h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 {
    line-height: 120%;
    margin: 0;
    font-family: var(--heading-font-family);
    font-weight: bold;
    color: var(--primary-80);
  }
  .display-1 {
    font-size: 4em;
    margin: 0;
  }

  .display-2 {
    font-size: 3.5em;
    margin: 0;
  }

  h1,
  .h1 {
    font-size: 3em;
    margin: 0.4em 0;
  }

  h2, .h2 {
    font-size: 2.45em;
    margin: 0.36em 0;
  }

  h3, .h3 {
    font-size: 2em;
    margin: 0.4em 0;
  }

  p, .p, .paragraph {
    font-weight: normal;
    font-size: 1em;
    line-height: 140%;
    text-wrap: balance;
    margin-inline-end: 2em;
  }

  @media (max-width: 720px) {
    .display-1 {
      font-size: 3.25em;
    }
    .display-2 {
      font-size: 2.84em;
    }
    h1, .h1 {
      font-size: 2.5em;
      margin: 0.32em 0;
    }
    h2, .h2 {
      font-size: 2.12em;
      margin: 0.25em 0;
    }
    h2, .h2 {
      font-size: 1.4em;
      margin: 0.18em 0;
    }
  }
  &>section {
    background: light-dark(var(--surface-lighter), var(--surface-darker));
    color: light-dark(var(--neutral-80), var(--neutral-10));
    position: relative;
    z-index: 10;
    margin-top: 76px;
    margin-bottom: 265px;
    align-content: center;
    box-shadow: 0 10px 50px rgba(38, 27, 46, 0.25);

      @media (prefers-reduced-motion: no-preference) {
        h1, h2, h3, h4, p, button, figure, .enters {
          animation: fade-in linear;
          animation-timeline: view();
          /**
          animation-range-start: cover; entry, entry-crossing, cover, contain, exit, exit-crossing
          animation-range-end: cover 200px;
          */
      }
    }
  }
}

[data-tooltip] {
  position: relative;

  &:hover::after {
    opacity: 1;
    transform: translate(-50%, -120%);
  }

  &::after {
    content: attr(data-tooltip);
    position: absolute;
    inset: 0 50% auto 50%;
    transform: translate(-40%, 0);
    background-color: light-dark(var(--surface-darker), var(--surface-light));
    color: light-dark(var(--neutral-10), var(--primary-90));
    padding: 0.6em 0.8em;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    line-height: 120%;
    box-shadow: 0 2px 12px -6px var(--neutral-50);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    width: 12em;
    z-index: 10;
    text-align: center;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

}

nav {
  position: fixed;
  top: 0;
  z-index: 200;
  width: 100%;
  padding: 0.2em 0;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(50px);
  box-shadow: 0 4px 20px -8px var(--neutral-50);

  & .container {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
  }

  & .brand-logo {
    max-height: 40px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items:center;
    padding: 0.4em 0 0 0;
    color: var(--primary-60);
    text-decoration: none;
    line-height: 100%;
    font-family: var(--heading-font-family);
    font-weight: 600;
    font-style: italic;
    font-size: larger;

    & img {
      height: 60px;
      aspect-ratio: 1/1;
      object-fit: contain;
    }
  }

  & ul, .nav-links {
    display: inline-flex;
    justify-content: space-between;
    gap: var(--gap-sm);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  & ul a, .link {
    position: relative;
    padding: 0 0.4em;
    text-decoration: none;
    color: var(--neutral-80);
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: auto 0 -4px 0;
      margin: 0 auto;
      width: 0%;
      height: 2px;
      opacity: 0.5;
      background-color: var(--primary-50);
      transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    &.current, &:hover {
      color: light-dark(var(--primary-50), var(--primary-60));
      &::after {
        width: 50%;
      }
    }
  }

  & .menu-icon {
    display: none;
    width: 1.2em;
    aspect-ratio: 1/1;
    border-radius: var(--radius-sm);
    color: light-dark(var(--neutral-80), var(--neutral-20));
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    &::after {
      content: '';
      background-color: light-dark(var(--primary-10), var(--primary-80));
    }
    &:hover {
      color: light-dark(var(--primary-90), var(--primary-10));
    }

  }

  @media (max-width: 720px) {
    .menu-icon {
      display: block;
    }

    ul.nav-links {
      display: none;
    }
  }

  .scroll-watcher {
    height: 0.2em;
    background-color: light-dark(var(--primary-50), var(--primary-60));
    width: 100%;
    scale: 0 1;
    transform-origin: left center;
    transform: translateY(2px);
    animation: expand linear;
    animation-timeline: scroll();
  }
}

footer {
  background-color: light-dark(var(--surface-light), var(--surface-darker));
  color: light-dar(var(--primary-90), var(--primary-10));
  padding: 1.4em 0;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;

  & .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-md);
  }

  & .brand-logo {
    cursor: pointer;
    display: inline-flex;
    gap: var(--gap-sm);
    align-items:center;
    color: var(--primary-90);
    text-decoration: none;
    line-height: 100%;
    font-family: var(--heading-font-family);
    font-weight: 600;
    font-style: italic;
    font-size: 32px;
    margin: 0 auto;
    transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    & img {
      width: 68px;
      aspect-ratio: 1/1;
      object-fit: contain;
      filter: saturate(100%) brightness(100%);
      transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    &:hover {
      color: var(--primary-60);
      & img {
        filter: saturate(200%) brightness(130%);
      }
    }
  }

  & ul, .nav-links {
    display: inline-flex;
    justify-content: center;
    gap: var(--gap-md);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  & ul a, .link {
    position: relative;
    padding: 0 0.4em;
    text-decoration: none;
    text-wrap: nowrap;
    color: var(--neutral-80);
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    & svg {
      width: 1.3em;
      aspect-ratio: 1/1;
    }

    &.current, &:hover {
      color: light-dark(var(--primary-50), var(--primary-60));
    }
  }

  & .copyright {
    color: var(--neutral-60);
    text-align: center;
    font-size: smaller;
  }

  @media (max-width: 720px) {
    & ul, & .nav-links {
      gap: var(--gap-sm);
    }
  }

  @media (max-width: 480px) {
    padding: 0.8em 0;

    & ul, & .nav-links {
      gap: var(--gap-xs);
    }
  }
}

.hero {
  min-height: 75dvh;
  width: 100%;
  color: light-dark(var(--neutral-80), var(--neutral-10));
  background-color: light-dark(var(--surface-light), var(--surface-dark));
  padding: 3em 0;
  margin-bottom: -1em;
  z-index: 10;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.marquee-wrapper {
  margin: 0 auto;
  max-width: 1280px;
  overflow: clip;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-image: linear-gradient(90deg,var(--surface-lighter) 0%, transparent 20%, transparent 80%, var(--surface-lighter) 100%);
    pointer-events: none;
  }
}

.marquee {
  position: relative;
  margin: 0.4em 0;
  width: max-content;
  height: fit-content;
  padding: 1em 0;
  overflow-x: hidden;
  display: inline-flex;
  background-color: light-dark(var(--surface-light), var(--surface-dark));
  box-shadow: 0 8px 12px -10px var(--neutral-50);
  transform: translateX(0);
  animation: marquee 20s linear infinite;

  /**
  &:hover {
    animation-play-state: paused;
  }**/

  .flex {
    display: flex;
    flex-direction: row;
    gap: var(--gap-md);
    margin-left: var(--gap-md);
  }
}

.pill {
  padding: 0.4em 1em;
  border-radius: var(--radius-sm);
  corner-radius: superellipse(1);
  background-color: light-dark(var(--background-light), var(--background-dark));
  color: light-dark(var(--primary-90), var(--primary-10));
  line-height: 100%;
  align-items: baseline;
  font-size: 0.9em;
  font-weight: 200;
  box-shadow: 0 3px 8px -4px var(--neutral-60);

  &.primary {
    background-color: light-dark(var(--primary-50), var(--primary-60));
    color: light-dark(var(--neutral-10), var(--primary-10));
  }

  &.error {
    background: var(--error-50);
    color:var(--neutral-10);
  }
  &.success {
    background-color: light-dark(var(--success-50), var(--success-90));
    color: light-dark(var(--neutral-10), var(--success-10));
  }
  &.info {
    background-color: light-dark(var(--info-50), var(--info-90));
    color: light-dark(var(--neutral-10), var(--info-10));
  }
  &.black {
    background-color: var(--neutral-90);
    color: var(--neutral-10);
  }
}


.pre-title {
  color: var(--primary-60);
  font-size: 20px;
  font-weight: 700;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 0.6em;
} 

.page-restriction {
    max-width: 1240px;
    margin: 0 auto;
}

.cols {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--gap-lg);
  align-items: center;
  justify-content: start;

  & .col-6 {
    flex: 1;
  }
  & .col-4 {
    flex: 0.5;
  }
  & .col-8 {
    flex: 2
  }
  &.reversed {
    flex-direction: unset;
  }
  @media (max-width: 720px) {
    flex-direction: column;
    gap: var(--gap-sm);

    &.reversed {
      flex-direction: column-reverse;
    }
    & .col-6, & .col-4, & .col-8 {
      width: 100%;
    }
  }
}

.grid, [role="grid"] {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(342px, 1fr));
  gap: var(--gap-sm);
  padding: 0;
  margin: 0;
}

details, .accordion {
  padding: 0;
  margin: 0;
  line-height: 140%;
  text-wrap: balance;
  background-color: unset;
  transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);

  & summary {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    position: relative;
    list-style: none;
    padding: 0.85em 0.85em;
    margin: 0;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 10px -8px var(--neutral-50);
    background-color: light-dark(var(--surface-lighter), var(--surface-darker));
    transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    &::after {
      content: '⇾';
      position: absolute;
      inset: 25% 0 0 auto;
      font-size: larger;
      transform: translateX(-2em) scale(0.8);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    & .icon {
      width: 2em;
      aspect-ratio: 1/1;
      transform: scale(1);
      transition: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    &:hover {
      box-shadow: 0 10px 18px -12px var(--neutral-50);
      color: light-dark(var(--primary-60), var(--primary-10));

      &::after {
        opacity: 1;
        transform: translateX(-0.8em);
      }
      & .icon {
        transform: scale(1.2);
      }
    }
  }

  & summary +div, & summary +p {
    margin: 1em 0 0 1.4em;
    transform: translateY(-20px);
    opacity: 0;
    max-height: 0;
    transition: 
      all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95),
      transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s;

      & img {
        display: block;
        width: 8em;
        aspect-ratio: 1/1;
        object-fit: cover;
      }
  }

  &[open], &[open="true"] {
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

    & summary +div, summary +p {
      transform: translateY(0);
      opacity: 1;
      max-height: fit-content;
      transition: 
        all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95),
        transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s;
    }

  }
}

button,
.btn,
.button {
  background-color: light-dark(var(--surface-lighter), var(--surface-darker));
  color: light-dark(var(--primary-80), var(--neutral-20));
  text-decoration: none;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  line-height: 100%;
  box-shadow: var(--box-shadow-0);
  border: none;
  border-radius: var(--radius-xs);
  width: fit-content;
  padding: 1em 1.4em;
  cursor: pointer;
  margin: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    background-color: light-dark(var(--surface-light), var(--surface-darker));
  }

  &.btn-branded,&.btn-primary {
    background-color: var(--primary-50);
    color: var(--primary-10);

    &:hover {
      color: var(--neutral-10);
      background-color: var(--primary-60);
    }
  }

  &.btn-error {
    background-color: var(--error-50);
    color: var(--error-10);

    &:hover {
      background-color: var(--error-90);
    }
  }

  &.btn-success {
    background-color: var(--success-50);
    color: var(--success-10);

    &:hover {
      background-color: var(--success-90);
    }
  }

  &.btn-outline-primary,&.btn-outline-branded {
    border: solid 0.128em var(--primary-50);
    background-color: light-dark(var(--surface-lighter), var(--surface-darker));
    color: light-dark(var(--primary-80), var(--neutral-20));

    &:hover {
      color: var(--neutral-10);
      background-color: var(--primary-50);
    }
  }

  &.md {
    padding: 0.65em 1em;
  }

  &.sm {
    padding: 0.4em 0.65em;
  }
}

.buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);

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

  @media (max-width: 720px) {
    gap: var(--gap-sm);
  }
}

figure:not(.mansory figure) {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  border-radius: 50%;
  border: solid 10px var(--primary-10);

  & img {
    filter: brightness(100%) blur(0);
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    box-shadow: 0 0 0 0 var(--primary-50);
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  & figcaption {
    opacity: 0;
    margin: 1em 2em;
    position: absolute;
    inset: 35% auto 50% auto;
    text-align: center;
    padding: 0 2em;
    color: white;
    line-height: 600%;
    text-wrap: balance;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  &:hover {
    border-radius: 20%;
    border: solid 0px var(--primary-10);

    & img {
      filter: brightness(50%) blur(10px);
      box-shadow: 0 10px 40px -12px var(--primary-50);
    }

    & figcaption {
      opacity: 1;
      line-height: 140%;
      visibility: visible;
      transform: translateY(0);
    }
  }
}

.mansory {
  column-count: 4;
  gap: var(--gap-sm);
  row-gap: var(--gap-sm);
  padding: 0;
  margin: 2em auto;

  @media (max-width: 1020px) {
    column-count: 3;
  }
  @media (max-width: 720px) {
    column-count: 2;
  }

  @media (max-width: 480px) {
    column-count: 1;
  }

  &>figure {
    border: none;
    overflow: hidden;
    border-radius: var(--radius-sm);
    aspect-ratio: attr(aria-ratio);
    position: relative;
    margin: 0;
    cursor: pointer;
    margin-bottom: var(--gap-lg);

    & img {
      border-radius: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      filter: brightness(100%);
      transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    & figcaption {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 2;
      font-size: 0.7em;
      font-weight: 300;
      padding: 4em 1.5em 2em 1.5em;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      text-overflow: hidden;
      color: var(--neutral-10);
      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

    &:hover {
      & img {
        filter: brightness(120%);
        transform: scale(1.1);
      }
    }
  }
}

dialog {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--suface-light);
  width: auto;
  max-width: 80dvw;
  max-width: 980px;
  transform: scale(0.5);
  position: relative;
  overflow:hidden;
  transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);

  &[open] {
    opacity: 1;
    transform: scale(1);
  }

  & .content {
    width: 100%;
    height: 99dvh;
    color: var(--neutral-10);
    text-align: center;

    & img {
      width: 100%;
      height: 90%;
      margin: 0 auto;
      margin-bottom: var(--gap-md);
      object-fit: contain;
    }
  }

  &::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(var(--gap-lg));
  }

  & .btn-close {
    padding: 0.8em;
    margin: 0 0 0.4em 0;
    cursor: pointer;
    color: var(--neutral-10);
    position: absolute;
    inset: -1em 0 auto auto;
  }
}

.testimonial-carousel {
  background-color: unset;
  width: 100%;
  height: 340px;
  position: relative;
  display: flex;
  scroll-behavior: smooth;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  padding: 0 2em;

  &::-webkit-scrollbar {
    display: none;
  }

  & .testimonial-card {
    flex-grow: 1;
    flex-shrink: 0;
    padding: 1em;
    margin: 4em 1em 2em 0;
    height: 240px;
    width: 22em;
    position: relative;
    scroll-snap-align: center;
    background-color: light-dark(#ffffffe1, #312d42);
    text-align: center;
    line-height: 140%;
    text-wrap: pretty;
    border: solid 1px var(--neutral-20);
    border-radius: var(--radius-lg);
    corner-radius: superellipse(1.7);
    filter: grayscale(1);
    box-shadow: 0 0 10px -8px var(--neutral-50);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);

    &::after {
      content: '"';
      font-size: 6em;
      font-family: var(--heading-font-family);
      font-style: italic;
      position: absolute;
      inset: auto 0% 0 auto;
      width: 100%;
      margin: 0;
      padding: 0;
      font-style: italic;
      opacity: 0;
      color: var(--primary-50);
      transform: translateY(0.8em);
      transition: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    &:hover {
      filter: grayscale(0);
      box-shadow: 0 4px 20px -10px var(--neutral-50);
      background-color: light-dark(var(--surface-light), var(--surface-dark));
      &::after {
        transform: translateY(0.3em);
        opacity: 0.2;
      }

      & .testimonial-author > img {
        scale: 1;
      }
    }
    
    & .testimonial-author {
      margin: 0 auto;
      margin-bottom: 0.8em;
      line-height: 100%;
      color: light-dark(var(--primary-60), var(--primary-50));
      opacity: 0.8;


      & img {
        display: block;
        margin: -3.5em auto 0.8em auto;
        width: 6em;
        aspect-ratio: 1/1;
        border: solid 2px var(--primary-10);
        border-radius: var(--radius-lg);
        corner-radius: superellipse(1);
        box-shadow: 0 8px 10px -8px var(--neutral-50);
        scale: 0.8;
        transform-origin: bottom center;
        transition: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
      }
    }

    & p {
      font-size: medium;
      width: 100%;
    }

    &.blank {
      border: unset;
      background: transparent;
      content: '';
      color: transparent;
      box-shadow: unset;
      cursor: default;
      &::after {
        display: none;
      }
      
      &:hover {
        box-shadow: unset;
      }
    }
  }
}

.carousel-container {
  background-color: light-dark(var(--surface-light), var(--surface-dark));
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
  border-radius: var(--radius-md);
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  list-style: none;
  padding: 0 2em;

  &::-webkit-scrollbar {
    display: none;
  }

  & .slide {
    padding: 0;
    margin: 0;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
    scroll-snap-align: center;
    opacity: 0.2;
    font-size: 1.4em;
    text-wrap: balance;
    transform: scale(0.8);
    line-height: 150%;
    color: var(--neutral-60);
    filter: grayscale(1);
    transition: all 0.5s ease-in-out;

    animation: focus-slide ease-in-out both;
    animation-timeline: view(block);
    animation-range: cover 25% cover 75%;
  }

  /*
  &::scroll-button(up), &::scroll-button(down) {
    @extend button;
  }
  &::scroll-button(up) {
    content: '← Prev';
  }
  &::scroll-button(down) {
    content: 'Next →';
  }
  */
}

.emoji {
  position: absolute;
  z-index: 10;
  font-size: 4em;
  cursor: default;
  inset: 35% auto auto -0.6em;

  &.pos-1 {
    left: auto;
    right: -0.6em;
    top: 0;
  }
  &.pos-2 {
    right: auto;
    top: 0;
  }
  &.pos-3 {
    right: auto;
  }
  &.pos-4 {
    left: auto;
    right: -0.6em;
  }
  &.pos-5 {
    left: 0;
    top: auto;
    right: auto;
    bottom: 25%;
  }
  &.pos-6 {
    left: auto;
    right: -0.6em;
    top: auto;
    bottom: 25%;
  }
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: fit-content !important;
  margin: 0 auto;
}

.mx-auto {
  margin: 0 auto;
}

.medals {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  justify-content: end;
  list-style: none;
  padding: 0;

  & img {
    width: 5em;
    aspect-ratio: 1/1;
    opacity: 0.6;
    transform: scale(0.8);
    transform-origin: bottom center;
    transition: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);

    &:hover {
      transform: scale(1);
      opacity: 1;
    }
  }
}


.square-contain {
  width: 250px;
  height: 340px;
  margin: 80px;
  background-color: #f0f0f0;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.about-section{
  padding: 160px 15px ;
}
.about-section h1 {
  font-size: 64px;
  line-height: 80px;
}
.about-section h2 {
    font-size: 25px;
    font-family: var(defult-font-family);
    text-align: left;
}
.about-section-content {
    margin: 20px;
}

.project-desciption {
  padding: 160px 20px;
}


.homepage-link {
  color: var(--primary-color);
  text-align: center;
  display: block;
}

.about-paragraphs {
  margin: 30px 0;
  text-align: center;
}

.email-link {
  display: flex;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
}

.email-link:hover {
  text-decoration: underline;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: roate(360deg); }
}

@keyframes expand {
  to {scale: 1 1; }
}

@keyframes fade-in {
  5%, 95% { scale: 0.8; opacity: 0; transform: translateY(50px); }
  25%, 75% { scale: 1; opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translate(-50%); }
}

@keyframes focus-slide {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
    font-weight: 400;
    filter: blur(2px) grayscale(1) brightness(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    font-weight: 700;
    color: light-dark(var(--primary-80), var(--primary-10));
    filter: blur(0px) grayscale(0) brightness(1.2);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  }
}