/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll offset for anchor links - ensures navbar doesn't cover content */
[id] {
  scroll-margin-top: 100px;
}

/* Page transition effects */
body {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

:root {
  /* Colors */
  --primary-600: #252e16;
  --primary-500: #303a1f;
  --primary-400: #6a715c;
  --primary-300: #878c7b;
  --primary-100: #dfded7;
  --primary-hover: #18181b;
  --secondary-color: #f2f0eb;
  --text-dark: #303a1f;
  --text-gray: #6a715c;
  --bg-light: #f2f0eb;

  /* Padding */
  --p-0: 0;
  --p-1: 0.25;
  --p-2: 0.5rem;
  --p-3: 0.75rem;
  --p-4: 1rem;
  --p-5: 1.25rem;
  --p-6: 1.5rem;
  --p-7: 1.75rem;
  --p-8: 2rem;
  --p-9: 2.25rem;
  --p-10: 2.5rem;
  --p-11: 2.75rem;
  --p-12: 3rem;
  --p-13: 3.25rem;
  --p-14: 3.5rem;
  --p-15: 3.75rem;
  --p-20: 5rem;

  /* Opacity*/
  --opacity-70: 70%;

  /* Border */
  --border-primary: 1px solid var(--primary-500);
  --border-secondary: 1px dashed var(--primary-300);
  --border-radius: 0;

  /* Transition */
  --transition: 0.3s;

  /* Text Size */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-h2: 2.25rem;
  --text-h1: 2.75rem;

  /* Text Weight */
  --font-medium: 500;
  --font-regular: 300;

  /* Text Spacing */
  --letter-spacing: 1px;
}

/* Grid */
.columns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-basis: 0;
}

.inner-p {
  padding: var(--p-6);
}

.max-w {
  max-width: 1440px;
  margin: 0 auto;
}

.rows {
  display: flex;
  flex-direction: column;
}

html {
  scroll-behavior: auto;
  overflow-x: hidden;
}

body {
  font-family: "Roboto Mono", monospace, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--primary-500);
  text-align: left;
  background-color: var(--bg-light);
  background-image: url("../images/background.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  cursor: auto;
}

body.body-dark {
  background-color: var(--primary-500);
  background-image: url("../images/background-dark.png");
}

* {
  cursor: auto;
}

a,
button,
.btn,
.nav-link,
.dropdown-item,
.link,
input[type="submit"] {
  cursor: pointer !important;
}

section {
  border-bottom: var(--border-primary);
  border-left: var(--border-primary);
  border-right: var(--border-primary);
  background-color: var(--bg-light);
}

section.dark {
  border: 1px solid var(--bg-light);
  border-top: none;
}

::selection {
  background-color: var(
    --primary-500
  ); /* Sets the background color of the selection to red */
  color: var(--bg-light); /* Sets the text color of the selection to white */
}

/* Text */
h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-medium);
  padding-bottom: var(--p-2);
  line-height: 130%;
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-medium);
  padding-bottom: var(--p-2);
  line-height: 140%;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.subtitle {
  height: auto;
  justify-content: flex-start;
  gap: var(--p-3);
  align-items: center;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing);
  margin-bottom: var(--p-3);
  font-weight: var(--font-medium);
}

.square {
  width: 8px;
  height: 8px;
  background-color: var(--bg-light);
}

.alt {
  background-color: var(--primary-500);
}

/* Navigation */
.navbar {
  background-color: var(--bg-light);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--border-primary);
  border-right: var(--border-primary);
  border-left: var(--border-primary);
}

.nav-container {
  margin: 0 auto;
  padding: var(--p-0);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
}

.nav-logo {
  display: flex;
  align-items: center;
  padding: var(--p-6);
  transition: var(--transition);
}

.nav-logo:hover {
  opacity: var(--opacity-70);
}

.nav-links {
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

.nav-link {
  text-decoration: none;
  color: var(--primary-500);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--p-6);
  background-color: none;
  transition: var(--transition);
  letter-spacing: var(--letter-spacing);
  position: relative;
  height: 68px;
}

.nav-link::before,
.nav-link::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity var(--transition);
}

.nav-link::before {
  top: 28px;
  left: 24px;
  border-top: 1px solid var(--primary-300);
  border-left: 1px solid var(--primary-300);
  transition: var(--transition);
}

.nav-link::after {
  bottom: 28px;
  right: 24px;
  border-bottom: 1px solid var(--primary-300);
  border-right: 1px solid var(--primary-300);
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary-color);
  background-color: var(--primary-100);
}

.nav-link:hover::before,
.nav-link:hover::after {
  opacity: 1;
}

.nav-link:hover::before {
  top: 12px;
  left: 12px;
}

.nav-link:hover::after {
  bottom: 12px;
  right: 12px;
}

/* Light Navigation Active State */
.nav-link.active::before,
.nav-link.active::after {
  opacity: 1;
}

.nav-link.active::before {
  top: 12px;
  left: 12px;
}

.nav-link.active::after {
  bottom: 12px;
  right: 12px;
}

/* Dropdown Menu */
.nav-item-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 48px;
  left: 0;
  background-color: var(--bg-light);
  border: var(--border-primary);
  border-top: none;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-item {
  text-decoration: none;
  color: var(--primary-500);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--p-6);
  background-color: var(--bg-light);
  transition: var(--transition);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-4);
  border-bottom: var(--border-primary);
  position: relative;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item svg {
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
  transition: var(--transition);
}

.dropdown-item::before,
.dropdown-item::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity var(--transition);
}

.dropdown-item::before {
  top: 28px;
  left: 24px;
  border-top: 1px solid var(--primary-300);
  border-left: 1px solid var(--primary-300);
  transition: var(--transition);
}

.dropdown-item::after {
  bottom: 28px;
  right: 24px;
  border-bottom: 1px solid var(--primary-300);
  border-right: 1px solid var(--primary-300);
  transition: var(--transition);
}

.dropdown-item:hover {
  background-color: var(--primary-100);
}

.dropdown-item:hover svg {
  transform: rotate(-45deg);
}

.dropdown-item:hover::before,
.dropdown-item:hover::after {
  opacity: 1;
}

.dropdown-item:hover::before {
  top: 12px;
  left: 12px;
}

.dropdown-item:hover::after {
  bottom: 12px;
  right: 12px;
}

/* Hero Section */
.hero {
  background-color: var(--bg-light);
  height: calc(100dvh - 64px);
  min-height: 400px;
  border-bottom: var(--border-primary);
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: scale-down;
  object-position: center;
  z-index: -1;
  pointer-events: none;
  transform-origin: center;
  /* optional GPU hint */
  will-change: transform;
  opacity: var(--opacity-70);
}

.hero-content,
.hero-buttons,
.wrapper {
  position: relative;
  z-index: 2;
}

.hero-content {
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--p-10);
  height: calc(100dvh - 240px);
  margin-bottom: var(--p-10);
}

.hero-column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bottom {
  justify-content: flex-end;
  align-items: flex-end;
}

.hero-title {
  font-size: var(--text-h1);
  line-height: 148%;
  font-weight: var(--font-medium);
  color: var(--primary-500);
  margin-bottom: 1.5rem;
}

.hero-description {
  font-size: var(--text-lg);
  color: var(--primary-color);
  text-align: right;
}

.hero-description:last-child {
  display: flex;
  flex-direction: row;
  gap: var(--p-5);
}

.hero-buttons {
  display: flex;
  gap: var(--p-3);
  justify-content: center;
}

.hero-buttons .btn {
  width: 100%;
  text-align: left;
}

/* Metrics Section */
.metrics h1 {
  font-size: 3.5rem;
  font-weight: var(--font-medium);
}

.metrics h3 {
  border-bottom: var(--border-primary);
}

.metrics svg {
  margin-bottom: var(--p-10);
  width: 32px;
}

.metrics img {
  width: 100%;
  max-width: 148px;
}

.metrics .column,
.logo a {
  width: 100%;
  border-right: var(--border-primary);
  justify-content: space-between;
}

.metrics .column:last-child,
.logo a:last-child {
  border-right: none;
}

.metrics p {
  color: var(--primary-400);
  font-size: var(--text-base);
}

.logo .columns {
  border-bottom: var(--border-primary);
}

.logo .columns:last-child {
  border-bottom: none;
}

.logo .column {
  height: 180px;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.logo .column:hover {
  opacity: var(--opacity-70);
}

.logo .column.no-logo {
  background-image: url("../images/block-divider.png");
  background-position: center;
  background-size: cover;
}

/* Why Section */

.why {
  background-color: var(--primary-500);
  color: var(--bg-light);
}

.why-subsection:first-child {
  height: 600px;
}

.why .why-subsection {
  overflow: hidden;
  border-bottom: 1px solid var(--bg-light);
}

.why-subsection:last-child {
  border-bottom: none;
}

.why .description {
  font-size: var(--text-default);
  font-weight: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 92%;
}

.why-subsection svg {
  width: 32px;
}

.why-top-content {
  justify-content: space-between;
  width: 100%;
}

.why-subsection .card {
  justify-content: space-between;
  height: 240px;
}

.why-subsection .card {
  border-right: 1px solid var(--bg-light);
}

.why-subsection .card:last-child {
  border-right: none;
}

.why h2 {
  padding-bottom: var(--p-0);
}

.slider {
  justify-content: flex-start;
  gap: var(--p-10);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider .topic {
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  white-space: nowrap;
  margin-top: var(--p-4);
}

/* What */
.what {
  min-height: 100dvh;
}

.what-container {
  display: flex;
  align-items: flex-start;
}

.what-sticky {
  position: sticky;
  top: 68px;
  width: 50%;
  height: calc(100dvh - 68px);
  border-right: var(--border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.what-sticky .content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.what-sticky .text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.what-sticky img {
  width: 100%;
  margin-top: auto;
}

.what-flow {
  width: 50%;
  padding: var(--p-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-2);
}

.flow-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-0);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.flow-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-label {
  background-color: var(--primary-100);
  padding: var(--p-2) var(--p-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-3);
  width: fit-content;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

.flow-card {
  border: var(--border-primary);
  background-color: var(--bg-light);
  padding: var(--p-4);
  width: 80%;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  gap: var(--p-4);
}

.flow-card svg {
  width: 20px;
  height: 20px;
}

.flow-card.no-border {
  border-bottom: 0;
}

.flow-divider {
  color: var(--primary-500);
  width: 24px;
  padding: var(--p-2) 0;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.4s;
}

.flow-section.is-visible + .flow-divider {
  opacity: 1;
}

/* Solutions */
.divider {
  background-color: var(--primary-100);
  border-bottom: var(--border-primary);
}

.divider.title {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.divider.no-text {
  height: 40px;
}

.solutions .divider img,
.divider.no-text img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.divider .subtitle {
  align-items: center;
  margin-bottom: var(--p-0);
  border-right: var(--border-primary);
}

.solution-row {
  height: 320px;
  border-bottom: var(--border-primary);
  overflow: hidden;
}

.solution-row .description {
  gap: var(--p-6);
  border-right: var(--border-primary);
  flex: 0 0 66.666%;
  width: 66.666%;
}

.solution-row .card-buttons {
  flex: 0 0 33.333%;
  width: 33.333%;
  display: flex;
  flex-direction: column;
}

.solutions .description {
  width: 100%;
}

.solutions .link {
  font-size: var(--text-default);
  margin-top: var(--p-2);
  width: fit-content;
}

.solutions .text {
  font-size: var(--text-default);
}

.card-buttons a {
  text-decoration: none;
  color: var(--primary-500);
  border-bottom: var(--border-primary);
  height: 100%;
}

.card-buttons .text {
  font-size: var(--text-sm);
}

.card-buttons .subtitle {
  margin-bottom: var(--p-0);
}

.solutions .card {
  flex: 1;
  justify-content: space-between;
  font-size: var(--text-default);
  transition: var(--transition);
  height: 100%;
}

.solutions .card:hover {
  background-color: var(--primary-100);
}

.solutions a:last-child {
  border-bottom: none;
}

.solutions .card svg {
  transform: rotate(0deg);
  transition: var(--transition);
}

.solutions .card:hover svg {
  transform: rotate(-45deg);
  transition: var(--transition);
}

.name-and-logo {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.name-and-logo img {
  width: 100px;
}

.solutions .description .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}

.card .top-content-external {
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--p-2);
}

.card .top-content-DAO {
  align-items: center;
  justify-content: center;
  height: 100%;
}

.card .top-content-external svg,
.top-content-DAO svg,
.top-content-DAO img,
.top-content-gov svg {
  width: 24px;
}

.card-buttons .cards-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  border-bottom: var(--border-primary);
}

.card-buttons .cards-wrapper:last-child {
  border-bottom: none;
}

.card-buttons .cards-wrapper a {
  border-bottom: none;
  border-right: var(--border-primary);
  flex: 1 1 33.333%;
  width: 33.333%;
  max-width: 33.333%;
  min-width: 0;
  display: flex;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--primary-500);
}

.card-buttons .cards-wrapper a:last-child {
  border-right: none;
}

.card-buttons .cards-wrapper a .card {
  width: 100%;
  flex: 1;
}

.solutions .gov-security .card {
  border-bottom: var(--border-primary);
  flex: 1;
  justify-content: center;
}

.solutions .gov-security .card:hover svg {
  transform: rotate(0deg);
}

.solutions .gov-security .subtitle {
  margin-bottom: 0;
}

.solutions .gov-security .card:last-child {
  border-bottom: none;
}

.solutions .gov-security .card:hover {
  background-color: var(--bg-light);
}

.top-content-gov {
  justify-items: center;
}

/* Track Record */

.track-record {
  background-color: var(--primary-500);
  color: var(--bg-light);
}

.track-record h1 {
  margin-bottom: var(--p-15);
}

.track-record-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.track-record-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--p-6);
  padding: var(--p-8) 0;
  border-top: 1px solid var(--bg-light);
  align-items: start;
}

.track-record-image-wrapper {
  position: relative;
  width: 100%;
  height: 132px;
}

.track-record-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.square-accent-track {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--bg-light);
  top: -8px;
  right: -8px;
}

.track-record-content {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: var(--p-3);
}

.track-record-number {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--bg-light);
  letter-spacing: var(--letter-spacing);
}

.track-record-description {
  font-size: var(--text-default);
  font-weight: var(--font-regular);
  color: var(--primary-100);
}

/* Testimonials */
.testimonials {
  background-color: var(--bg-light);
}

.testimonials-subsection {
  position: relative;
  border-bottom: var(--border-primary);
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--p-4);
}

.testimonials-header h1 {
  margin-bottom: 0;
}

.testimonials-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.testimonials-slider {
  display: flex;
  gap: 0;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.testimonial-card {
  flex: 0 0 calc(100% / 3);
  width: calc(100% / 3);
  height: 440px;
  background-color: var(--bg-light);
  border-radius: var(--border-primary);
  padding: var(--p-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-right: var(--border-primary);
}

.testimonial-card:last-child {
  border-right: none;
}

.testimonial-text {
  font-size: var(--text-default);
  line-height: 160%;
  color: var(--text-dark);
  margin-bottom: var(--p-6);
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: auto;
}

.author-image-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.author-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: var(--border-primary);
  display: block;
}

.square-accent {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--primary-500);
  top: -8px;
  right: -8px;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: var(--p-1);
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing);
}

.author-name {
  font-weight: var(--font-medium);
}

.author-role {
  color: var(--primary-400);
}

.slider-navigation {
  display: flex;
  gap: 1rem;
  position: relative;
  z-index: 10;
}

.slider-arrow {
  width: 50px;
  height: 50px;
  border: 1px solid var(--primary-500);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--primary-500);
  padding: 0;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.slider-arrow:hover {
  background-color: var(--primary-500);
  color: var(--bg-light);
}

.slider-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider-arrow:disabled:hover {
  background-color: transparent;
  color: var(--primary-500);
}

.slider-arrow svg {
  width: 24px;
  height: 24px;
}

/* CTAs */

.ctas {
  background-color: var(--primary-100);
  text-align: center;
  border-bottom: none;
  padding-top: var(--p-15);
  padding-bottom: 120px;
}

.ctas h1 {
  margin-bottom: var(--p-6);
}

/* Footer */
.footer {
  background-color: var(--primary-500);
  color: var(--bg-light);
  overflow: hidden;
  border-left: var(--border-primary);
  border-right: var(--border-primary);
}

.footer img {
  width: 100%;
}

.footer-wrapper {
  align-items: center;
  padding: var(--p-15) var(--p-0);
  border-bottom: 1px solid var(--bg-light);
}

.footer-wrapper:last-child {
  border-bottom: none;
}

.footer .logo {
  width: 50%;
}

.footer-wrapper.links {
  padding: var(--p-0);
  align-items: flex-start;
  flex-direction: row;
}

.footer-wrapper .column {
  gap: var(--p-4);
  border-right: 1px solid var(--bg-light);
  height: 220px;
}

.footer-wrapper .column:last-child {
  border-right: none;
}

.footer-wrapper .link {
  color: var(--bg-light);
  width: fit-content;
  font-size: var(--text-sm);
}

.footer-text {
  margin-top: var(--p-4);
  font-size: var(--text-sm);
  color: var(--primary-300);
}

/* Buttons */
.btn {
  font-family: "Roboto Mono", monospace, "Helvetica Neue", Arial, sans-serif;
  padding: var(--p-6) var(--p-7);
  border-radius: var(--border-radius);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  display: inline-block;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.btn svg {
  width: 24px;
}

.btn-primary {
  background-color: var(--primary-500);
  color: var(--bg-light);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.btn svg {
  transform: rotate(0deg);
  transition: var(--transition);
}

.btn:hover svg {
  transform: rotate(-45deg);
  transition: var(--transition);
}

.btn-secondary {
  background-color: var(--primary-100);
  border: var(--border-primary);
  color: var(--primary-500);
  transition: var(--transition);
}

.btn-secondary:hover {
  background-color: var(--primary-hover);
  color: var(--bg-light);
}

/* Links */
.link {
  text-decoration: none;
  color: var(--primary-500);
  border-bottom: var(--border-secondary);
  transition: var(--transition);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--p-2);
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
  width: fit-content;
}

.link svg {
  width: 20px;
}

.link:hover {
  opacity: var(--opacity-70);
}

.link svg {
  transform: rotate(0deg);
  transition: var(--transition);
}

.link:hover svg {
  transform: rotate(-45deg);
  transition: var(--transition);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scroll-reveal {
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.scroll-reveal.is-visible {
  animation: fadeInUp 0.6s ease-out forwards;
  visibility: visible;
}

.scroll-reveal-scale {
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.scroll-reveal-scale.is-visible {
  animation: fadeInScale 0.6s ease-out forwards;
  visibility: visible;
}

/* Stagger animation delays for child elements */
.scroll-reveal.is-visible:nth-child(1) {
  animation-delay: 0.05s;
}

.scroll-reveal.is-visible:nth-child(2) {
  animation-delay: 0.1s;
}

.scroll-reveal.is-visible:nth-child(3) {
  animation-delay: 0.15s;
}

.scroll-reveal.is-visible:nth-child(4) {
  animation-delay: 0.2s;
}

/* Slide-in title animation */
.slide-in-title {
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-in-title.is-visible {
  animation: slideInFromLeft 1s ease-out forwards;
  visibility: visible;
}

/* Specific Solutions */

/* ---HERO--- */
.solution-specific.hero-content,
.hero-content.no-buttons {
  height: calc(100dvh - 120px);
}

.solution-specific .hero-description {
  display: flex;
  justify-content: flex-end;
}

.solution-specific .hero-column.bottom {
  gap: var(--p-4);
}

.hero-description .links {
  display: flex;
  flex-direction: row;
}

/* ---PROBLEM--- */

.why.no-border {
  border-bottom: none;
}

.subtitle.no-margin {
  margin-bottom: 0;
}

.why.no-border .text-wrapper {
  width: 50%;
}

.why-subsection.no-border {
  border-top: 1px solid var(--bg-light);
  margin-bottom: var(--p-15);
}

.blocks-divider {
  display: flex;
  height: 100%;
  background-color: var(--bg-light);
}

.blocks-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---DECISION--- */

.image-column img {
  display: flex;
  width: 100%;
}

.image-column.smaller img {
  display: flex;
  width: 72%;
}

.topics {
  margin-top: var(--p-8);
  gap: var(--p-4);
}

.topics svg {
  width: 24px;
}

.topic-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
  gap: var(--p-4);
  padding: var(--p-4) var(--p-4);
  background-color: var(--primary-100);
}

.topic-item .number {
  font-weight: var(--font-medium);
}

/* Sequential Fade-in Animation for Topic Items */
.topic-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease-out, transform 0.8s ease-out;
}

.topic-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sequential appearance */
.topic-item:nth-child(1).is-visible {
  transition-delay: 0s;
}

.topic-item:nth-child(2).is-visible {
  transition-delay: 0.2s;
}

.topic-item:nth-child(3).is-visible {
  transition-delay: 0.4s;
}

.topic-item:nth-child(4).is-visible {
  transition-delay: 0.6s;
}

/* ---PRACTICE--- */

.impact-section {
  overflow: hidden;
}

.impact-section.columns,
.decision.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image-column.border {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: var(--border-primary);
  width: 100%;
}

.impact-section .btn {
  border: none;
  border-top: var(--border-primary);
  background-color: var(--bg-light);
}

.impact-section .btn:hover {
  background-color: var(--primary-hover);
}

.impact-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.inner-link {
  background-color: var(--primary-500);
  text-decoration: none;
  color: var(--bg-light);
  transition: 0.5s;
}

.inner-link:hover {
  opacity: 0.5;
}

/* About Page - Dark Navigation & Hero */

/* Dark Navigation */
.navbar-dark {
  background-color: var(--primary-500);
  border-bottom: 1px solid var(--bg-light);
  border-right: 1px solid var(--bg-light);
  border-left: 1px solid var(--bg-light);
}

.navbar-dark .nav-logo img {
  filter: none;
  width: 128px;
}

.navbar-dark .nav-link {
  color: var(--bg-light);
}

.navbar-dark .nav-link::before {
  border-top: 1px solid var(--primary-100);
  border-left: 1px solid var(--primary-100);
}

.navbar-dark .nav-link::after {
  border-bottom: 1px solid var(--primary-100);
  border-right: 1px solid var(--primary-100);
}

.navbar-dark .nav-link:hover {
  color: var(--bg-light);
  background-color: var(--primary-600);
}

.navbar-dark .mobile-menu-toggle .hamburger-line {
  background-color: var(--bg-light);
}

.navbar-dark .mobile-menu-toggle.active .hamburger-line {
  background-color: var(--bg-light);
}

/* Dark Mobile Menu */
.navbar-dark ~ .mobile-menu-overlay {
  background-color: var(--primary-500);
  border-bottom: 1px solid var(--bg-light);
  border-right: 1px solid var(--bg-light);
  border-left: 1px solid var(--bg-light);
}

.navbar-dark ~ .mobile-menu-overlay .mobile-menu-link {
  color: var(--bg-light);
}

.navbar-dark ~ .mobile-menu-overlay .mobile-menu-link:hover {
  opacity: var(--opacity-70);
}

.navbar-dark .mobile-menu-toggle.active .hamburger-line:nth-child(1),
.navbar-dark .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  background-color: var(--bg-light);
}

/* Dark Dropdown Menu */
.navbar-dark .dropdown-menu.dropdown-dark {
  background-color: var(--primary-500);
  border: 1px solid var(--bg-light);
  border-top: none;
}

.navbar-dark .dropdown-item {
  color: var(--bg-light);
  background-color: var(--primary-500);
  border-bottom: 1px solid var(--bg-light);
}

.navbar-dark .dropdown-item::before {
  border-top: 1px solid var(--primary-100);
  border-left: 1px solid var(--primary-100);
}

.navbar-dark .dropdown-item::after {
  border-bottom: 1px solid var(--primary-100);
  border-right: 1px solid var(--primary-100);
}

.navbar-dark .dropdown-item:hover {
  background-color: var(--primary-600);
  color: var(--bg-light);
}

/* Dark Hero Section */
.hero-dark {
  background-color: var(--primary-500);
  border-right: 1px solid var(--bg-light);
  border-left: 1px solid var(--bg-light);
}

.hero-dark .hero-title {
  color: var(--bg-light);
}

.hero-dark .hero-description {
  color: var(--primary-100);
  font-weight: var(--font-regular);
}

/* About - Team Section */
.team-section {
  border-bottom: var(--border-primary);
}

.team-header {
  border-bottom: var(--border-primary);
}

.team-members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.team-card {
  border-right: var(--border-primary);
  border-bottom: var(--border-primary);
  background-color: var(--bg-light);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
}

.team-card:nth-child(3n) {
  border-right: none;
}

.team-card:nth-child(10),
.team-card:nth-child(11),
.team-card:nth-child(12) {
  border-bottom: none;
}

.team-card:nth-child(12) {
  background-image: url("../images/block-divider.png");
  background-position: center;
  background-size: cover;
}

.team-card-content {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.team-card-front,
.team-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--p-6);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-card-front {
  opacity: 1;
  visibility: visible;
}

.team-card-back {
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: left;
}

.team-card.active .team-card-front {
  opacity: 0;
  visibility: hidden;
}

.team-card.active .team-card-back {
  opacity: 1;
  visibility: visible;
}

.team-member-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: left;
  justify-content: left;
}

.team-member-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: var(--border-primary);
}

.twitter-link {
  position: absolute;
  top: 0;
  left: 80px;
  width: 32px;
  height: 32px;
  background-color: var(--primary-500);
  color: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.twitter-link:hover {
  background-color: var(--primary-hover);
}

.twitter-link svg {
  width: 14px;
  height: 14px;
}

.team-bio {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--primary-500);
  text-align: left;
}

.team-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--p-6);
  background-color: var(--bg-light);
}

.team-info {
  display: flex;
  flex-direction: column;
  gap: var(--p-0);
}

.team-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--primary-500);
}

.team-role {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--primary-400);
}

.team-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background-color: var(--primary-100);
  color: var(--primary-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--font-regular);
  transition: var(--transition);
  position: relative;
}

.team-toggle:hover {
  background-color: var(--primary-hover);
  color: var(--bg-light);
}

.toggle-plus,
.toggle-close {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toggle-plus {
  opacity: 1;
  transform: rotate(0deg);
}

.toggle-close {
  opacity: 0;
  transform: rotate(90deg);
}

.team-card.active .toggle-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.team-card.active .toggle-close {
  opacity: 1;
  transform: rotate(0deg);
}

/* Contributions Page */
.contributions {
  background-color: var(--bg-light);
}

.contributions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.contribution-card {
  background-color: var(--bg-light);
  border: var(--border-primary);
  border-right: none;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: var(--p-6);
  text-decoration: none;
  color: var(--primary-500);
  transition: var(--transition);
  min-height: 200px;
  justify-content: space-between;
}

.contribution-card.empty {
  background-image: url("../images/block-divider.png");
  background-position: center;
  background-size: cover;
}

.contribution-card.empty:hover {
  background-color: var(--bg-light);
}

.contribution-card:nth-child(3n) {
  border-right: var(--border-primary);
}

.contribution-card:nth-child(-n + 3) {
  border-top: var(--border-primary);
}

.contribution-card:hover {
  background-color: var(--primary-100);
}

.contribution-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--p-3);
  height: auto;
}

.contribution-icon {
  width: 24px;
  height: 24px;
}

.contribution-header h3 {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin: 0;
  padding: 0;
}

.arrow-icon {
  width: 24px;
  height: 24px;
  transition: var(--transition);
}

.contribution-card:hover .arrow-icon {
  transform: rotate(-45deg);
}

.contribution-roles {
  display: flex;
  flex-direction: column;
  gap: var(--p-2);
}

.role-tag {
  font-size: var(--text-default);
  color: var(--primary-400);
}

.role-tag::before {
  content: "✦";
  margin-right: var(--p-2);
  color: var(--primary-500);
}

.contribution-card:nth-child(4),
.contribution-card:nth-child(5),
.contribution-card:nth-child(6) {
  border-bottom: none;
}

/* Divider */
.divider-contributions {
  background-color: var(--primary-500);
  height: 40px;
  overflow: hidden;
  border-left: var(--border-primary);
  border-right: var(--border-primary);
  max-width: 1440px;
  margin: 0 auto;
}

.divider-contributions img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-bottom: var(--border-primary);
}

/* Previous Contributions */
.previous-contributions {
  background-color: var(--bg-light);
  border-bottom: var(--border-primary);
}

.previous-contributions-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.previous-contributions .sidebar {
  border-right: var(--border-primary);
  display: flex;
  align-items: flex-start;
}

.previous-content {
  display: flex;
  flex-direction: column;
}

.previous-section {
  border-bottom: var(--border-primary);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--p-4);
}

.previous-section:last-child {
  border-bottom: none;
}

.previous-column {
  display: flex;
  flex-direction: column;
  gap: var(--p-2);
}

.section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  margin: 0;
  padding: 0;
}

.section-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.section-item p {
  font-size: var(--text-default);
  color: var(--primary-400);
  margin: 0;
}

.section-item::before {
  content: "✦";
  margin-right: var(--p-2);
}

/* Talks and Events */
.talks-events {
  background-color: var(--bg-light);
  border-bottom: var(--border-primary);
}

.talks-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.talks-events .sidebar {
  border-right: var(--border-primary);
  display: flex;
  align-items: flex-start;
}

.events-content {
  display: flex;
  flex-direction: column;
}

.event-card {
  border-bottom: var(--border-primary);
  display: grid;
  grid-template-columns: 3fr 1fr;
  text-decoration: none;
  color: var(--primary-500);
  transition: var(--transition);
  cursor: pointer;
}

.event-card:hover {
  background-color: var(--primary-100);
  cursor: pointer !important;
}

.event-card:last-child {
  border-bottom: none;
}

.event-description {
  font-size: var(--text-sm);
  color: var(--primary-400);
  margin: 0;
}

.event-column {
  display: flex;
  flex-direction: column;
  gap: var(--p-2);
  align-items: start;
  justify-content: center;
}

.event-column.image {
  width: 100%;
  height: 140px;
  border-left: var(--border-primary);
}

.event-column img {
  width: 100%;
  height: 100%;
}

/* Contribution Detail Pages */
.contribution-detail-hero {
  display: flex;
  flex-direction: column;
  gap: var(--p-6);
  min-height: 300px;
}

.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--bg-light);
  transition: var(--transition);
  text-decoration: none;
  color: var(--primary-500);
}

.back-link:hover {
  background-color: var(--primary-100);
}

.back-link svg {
  width: 24px;
  height: 24px;
}

.contribution-hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.contribution-content {
  background-color: var(--primary-500);
  color: var(--bg-light);
  padding-top: var(--p-15);
  padding-bottom: var(--p-15);
}

.contribution-content h1 {
  color: var(--bg-light);
  margin: 0;
  padding-bottom: var(--p-10);
  font-size: var(--text-h2);
}

.contribution-text {
  display: flex;
  flex-direction: column;
  gap: var(--p-8);
}

.contribution-text p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--bg-light);
  margin: 0;
}

.inline-link {
  color: var(--bg-light);
  text-decoration: underline;
  transition: var(--transition);
}

.inline-link:hover {
  opacity: var(--opacity-70);
}

.contribution-cta {
  background-color: var(--primary-500);
  border-top: 1px solid var(--bg-light);
  border-bottom: 1px solid var(--bg-light);
}

.cta-buttons {
  display: flex;
  gap: var(--p-4);
  padding: var(--p-10) 0;
}

.cta-buttons .btn {
  flex: 1;
}

/* About */

.text-hightlight {
  background-color: var(--primary-500);
  color: var(--bg-light);
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

/* Animated Stars Background */
.text-hightlight #stars {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1487px 822px #fff, 702px 619px #fff, 579px 76px #fff,
    881px 14px #fff, 1903px 741px #fff, 1401px 1791px #fff, 1316px 857px #fff,
    1628px 1376px #fff, 1641px 781px #fff, 1421px 25px #fff, 525px 254px #fff,
    683px 1197px #fff, 1636px 1573px #fff, 1855px 1220px #fff, 108px 1424px #fff,
    906px 1967px #fff, 205px 1681px #fff, 1930px 731px #fff, 1957px 104px #fff,
    1558px 24px #fff, 211px 468px #fff, 2px 1001px #fff, 664px 1095px #fff,
    1023px 1573px #fff, 272px 122px #fff, 659px 1641px #fff, 1518px 1633px #fff,
    1736px 1016px #fff, 1085px 1911px #fff, 737px 1784px #fff, 564px 968px #fff,
    150px 1277px #fff, 1848px 505px #fff, 1067px 1414px #fff, 1619px 1498px #fff,
    266px 757px #fff, 450px 1052px #fff, 604px 1178px #fff, 1069px 1215px #fff,
    1045px 1816px #fff, 1682px 1111px #fff, 578px 1875px #fff, 1197px 20px #fff,
    736px 1923px #fff, 1698px 592px #fff, 491px 1835px #fff, 106px 1113px #fff,
    1944px 1749px #fff, 677px 525px #fff, 798px 1663px #fff;
  animation: animStar 50s linear infinite;
  opacity: 0.5;
  z-index: 0;
}

.text-hightlight #stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1487px 822px #fff, 702px 619px #fff, 579px 76px #fff,
    881px 14px #fff, 1903px 741px #fff, 1401px 1791px #fff, 1316px 857px #fff,
    1628px 1376px #fff, 1641px 781px #fff, 1421px 25px #fff, 525px 254px #fff,
    683px 1197px #fff, 1636px 1573px #fff, 1855px 1220px #fff, 108px 1424px #fff,
    906px 1967px #fff, 205px 1681px #fff, 1930px 731px #fff, 1957px 104px #fff,
    1558px 24px #fff, 211px 468px #fff, 2px 1001px #fff, 664px 1095px #fff,
    1023px 1573px #fff, 272px 122px #fff, 659px 1641px #fff, 1518px 1633px #fff,
    1736px 1016px #fff, 1085px 1911px #fff, 737px 1784px #fff, 564px 968px #fff,
    150px 1277px #fff, 1848px 505px #fff, 1067px 1414px #fff, 1619px 1498px #fff,
    266px 757px #fff, 450px 1052px #fff, 604px 1178px #fff, 1069px 1215px #fff,
    1045px 1816px #fff, 1682px 1111px #fff, 578px 1875px #fff, 1197px 20px #fff,
    736px 1923px #fff, 1698px 592px #fff, 491px 1835px #fff, 106px 1113px #fff,
    1944px 1749px #fff, 677px 525px #fff, 798px 1663px #fff;
}

.text-hightlight #stars2 {
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 592px 134px #fff, 346px 741px #fff, 1000px 1781px #fff,
    996px 728px #fff, 1085px 1462px #fff, 526px 1128px #fff, 1951px 557px #fff,
    673px 92px #fff, 415px 776px #fff, 1570px 643px #fff, 121px 697px #fff,
    782px 1847px #fff, 1853px 256px #fff, 910px 195px #fff, 362px 1201px #fff,
    52px 1627px #fff, 387px 899px #fff, 547px 1995px #fff, 1298px 440px #fff,
    1474px 1713px #fff, 1109px 1322px #fff, 1720px 1237px #fff,
    473px 1196px #fff, 1682px 580px #fff, 1476px 655px #fff;
  animation: animStar 100s linear infinite;
  opacity: 0.5;
  z-index: 0;
}

.text-hightlight #stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 592px 134px #fff, 346px 741px #fff, 1000px 1781px #fff,
    996px 728px #fff, 1085px 1462px #fff, 526px 1128px #fff, 1951px 557px #fff,
    673px 92px #fff, 415px 776px #fff, 1570px 643px #fff, 121px 697px #fff,
    782px 1847px #fff, 1853px 256px #fff, 910px 195px #fff, 362px 1201px #fff,
    52px 1627px #fff, 387px 899px #fff, 547px 1995px #fff, 1298px 440px #fff,
    1474px 1713px #fff, 1109px 1322px #fff, 1720px 1237px #fff,
    473px 1196px #fff, 1682px 580px #fff, 1476px 655px #fff;
}

.text-hightlight #stars3 {
  position: absolute;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 222px 946px #fff, 408px 926px #fff, 1608px 1741px #fff,
    1977px 1436px #fff, 713px 1152px #fff, 139px 39px #fff, 497px 1590px #fff,
    1808px 1652px #fff, 598px 667px #fff, 1962px 75px #fff, 331px 1245px #fff,
    1600px 1822px #fff, 1463px 883px #fff, 299px 335px #fff, 1229px 909px #fff;
  animation: animStar 150s linear infinite;
  opacity: 0.5;
  z-index: 0;
}

.text-hightlight #stars3:after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 222px 946px #fff, 408px 926px #fff, 1608px 1741px #fff,
    1977px 1436px #fff, 713px 1152px #fff, 139px 39px #fff, 497px 1590px #fff,
    1808px 1652px #fff, 598px 667px #fff, 1962px 75px #fff, 331px 1245px #fff,
    1600px 1822px #fff, 1463px 883px #fff, 299px 335px #fff, 1229px 909px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.text-hightlight .text-wrapper,
.text-hightlight .back-button {
  opacity: 0;
  transform: translateX(-100px);
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 0.2s;
  position: relative;
  z-index: 1;
}

.text-hightlight p {
  font-size: 32px;
  font-weight: var(--font-regular);
  line-height: 56px;
  margin-bottom: var(--p-8);
}

/* Progressive Text Highlight Animation */
.highlight-text {
  color: var(--primary-300);
}

.highlight-text .word {
  display: inline-block;
  color: var(--primary-300);
  transition: color 0.6s ease;
}

.highlight-text .word.highlighted {
  color: var(--bg-light);
}

.why-subsection.about:first-child {
  height: auto;
}

/* TEAM */

.team-header {
  border-bottom: var(--border-primary);
}

/* Contribution Details */
.text-wrapper h1 {
  color: var(--bg-light);
}

.contribution-links {
  display: flex;
  flex-direction: row;
  gap: var(--p-6);
  margin-bottom: var(--p-10);
}

.contribution-links .link {
  color: var(--bg-light);
}

.back-button .btn-secondary {
  width: 60px;
  height: 60px;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.back-button .btn-secondary svg {
  width: 20px !important;
  height: 20px;
}

.back-button .btn:hover svg {
  transform: rotate(-0deg);
}