:root {
  --color-green-950: #003f20;
  --color-green-900: #00552a;
  --color-green-800: #086034;
  --color-green-700: #0e7441;
  --color-green-100: #e8f3ec;

  --color-yellow-500: #f6b400;
  --color-yellow-400: #ffc533;
  --color-yellow-100: #fff3c7;

  --color-cream: #f3efe3;
  --color-cream-soft: #faf7ee;
  --color-white: #ffffff;

  --color-text: #173326;
  --color-text-muted: #5f7067;
  --color-border: #dce6dd;

  --font-heading: "Bebas Neue Pro", "Oswald", sans-serif;
  --font-heading-alt: "Oswald", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-script: "Madelyn", cursive;

  --container: 1180px;
}

@font-face {
  font-family: "Bebas Neue Pro";
  src: url("/static/fonts/bebas-neue-pro-font-family/Bebas-Neue-Pro-Regular-BF66cf3d7814160.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Madelyn";
  src: url("/static/fonts/madelyn_regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream-soft);
}

body.menu-open {
  overflow: hidden;
}

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

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

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

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.font-heading {
  font-family: var(--font-heading);
}

.font-heading-alt {
  font-family: var(--font-heading-alt);
}

.font-script {
  font-family: var(--font-script);
}

.icon-heart-sketched {
  display: block;
  overflow: visible;
}

.icon-heart-sketched path {
  fill: none;
  stroke: var(--color-green-700);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-heart-sketched path:first-child {
  stroke-width: 3.05;
}

.icon-heart-sketched path:last-child {
  stroke: #7aa783;
  stroke-width: 2.15;
  opacity: 0.96;
}

.icon-heart-sketched--btn {
  width: 21px;
  height: 19px;
  flex: 0 0 21px;
}

.navbar__cta .icon-heart-sketched path {
  stroke: #111;
}

.navbar__cta .icon-heart-sketched path:first-child {
  stroke-width: 3.2;
}

.navbar__cta .icon-heart-sketched path:last-child {
  stroke: rgba(0, 0, 0, 0.52);
  stroke-width: 2.1;
}


/* =========================
   SPECIALIZATION CARD EFFECTS
   ========================= */

.specialization-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.specialization-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 78px rgba(0, 63, 32, 0.24);
}

.specialization-card__shine {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 255, 255, 0.05) 46%,
      rgba(255, 255, 255, 0.09) 50%,
      rgba(255, 255, 255, 0.04) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-135%);
  transition: transform 0.9s ease;
}

.specialization-card:hover .specialization-card__shine {
  transform: translateX(135%);
}

@media (prefers-reduced-motion: reduce) {
  .specialization-card,
  .specialization-card__shine {
    transition: none;
  }

  .specialization-card:hover {
    transform: none;
  }
}




/* =========================
   FOUNDERS SECTION EFFECTS
   ========================= */

.founders-idea-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.founders-idea-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.105);
  box-shadow: 0 34px 82px rgba(0, 0, 0, 0.24);
}

.founders-idea-card__shine {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 255, 255, 0.05) 46%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-135%);
  transition: transform 0.9s ease;
}

.founders-idea-card:hover .founders-idea-card__shine {
  transform: translateX(135%);
}

.founder-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.founder-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.founder-card__img {
  transform: scale(1);
  transition:
    transform 0.75s ease,
    filter 0.75s ease;
}

.founder-card:hover .founder-card__img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .founders-idea-card,
  .founders-idea-card__shine,
  .founder-card,
  .founder-card__img {
    transition: none;
  }

  .founders-idea-card:hover,
  .founder-card:hover,
  .founder-card:hover .founder-card__img {
    transform: none;
  }
}


/* =========================
   LADIK SECTION EFFECTS
   ========================= */

.ladik-story-card,
.ladik-need-card,
.ladik-donation-card,
.ladik-mini-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ladik-story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 86px rgba(0, 63, 32, 0.16);
}

.ladik-need-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 68px rgba(0, 63, 32, 0.13);
}

.ladik-donation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 76px rgba(246, 180, 0, 0.25);
}

.ladik-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 63, 32, 0.18);
}

.ladik-story-image__img {
  transform: scale(1);
  transition:
    transform 0.9s ease,
    filter 0.9s ease;
}

.ladik-story-image:hover .ladik-story-image__img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

.ladik-progress-bar {
  transform-origin: left center;
  animation: ladikProgressIn 1.1s ease-out both;
}

@keyframes ladikProgressIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ladik-story-card,
  .ladik-need-card,
  .ladik-donation-card,
  .ladik-mini-card,
  .ladik-story-image__img {
    transition: none;
  }

  .ladik-story-card:hover,
  .ladik-need-card:hover,
  .ladik-donation-card:hover,
  .ladik-mini-card:hover,
  .ladik-story-image:hover .ladik-story-image__img {
    transform: none;
  }

  .ladik-progress-bar {
    animation: none;
  }
}


/* =========================
   NEED HELP SECTION EFFECTS
   ========================= */

.need-help-panel,
.need-help-cta,
.need-step-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.need-help-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 86px rgba(0, 63, 32, 0.24);
}

.need-help-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 68px rgba(0, 63, 32, 0.12);
}

.need-step-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.105);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.need-help-panel__shine {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 255, 255, 0.04) 46%,
      rgba(255, 255, 255, 0.085) 50%,
      rgba(255, 255, 255, 0.035) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-135%);
  transition: transform 0.9s ease;
}

.need-help-panel:hover .need-help-panel__shine {
  transform: translateX(135%);
}

@media (prefers-reduced-motion: reduce) {
  .need-help-panel,
  .need-help-cta,
  .need-step-card,
  .need-help-panel__shine {
    transition: none;
  }

  .need-help-panel:hover,
  .need-help-cta:hover,
  .need-step-card:hover {
    transform: none;
  }
}


/* =========================
   GALLERY SECTION EFFECTS
   ========================= */

.gallery-card,
.gallery-note-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.gallery-card:hover,
.gallery-note-card:hover {
  transform: translateY(-4px);
}

.gallery-card:hover {
  box-shadow: 0 30px 76px rgba(0, 63, 32, 0.20);
}

.gallery-note-card:hover {
  box-shadow: 0 28px 68px rgba(246, 180, 0, 0.24);
}

.gallery-card__img {
  transform: scale(1);
  transition:
    transform 0.85s ease,
    filter 0.85s ease;
}

.gallery-card:hover .gallery-card__img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}

.gallery-card--main:hover .gallery-card__img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .gallery-note-card,
  .gallery-card__img {
    transition: none;
  }

  .gallery-card:hover,
  .gallery-note-card:hover,
  .gallery-card:hover .gallery-card__img,
  .gallery-card--main:hover .gallery-card__img {
    transform: none;
  }
}


/* =========================
   DONATE SECTION EFFECTS
   ========================= */

.donate-panel,
.donate-account-card,
.donate-small-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.donate-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 86px rgba(0, 63, 32, 0.24);
}

.donate-account-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 66px rgba(246, 180, 0, 0.26);
}

.donate-small-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.105);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.14);
}

.donate-panel__shine {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 255, 255, 0.04) 46%,
      rgba(255, 255, 255, 0.085) 50%,
      rgba(255, 255, 255, 0.035) 54%,
      transparent 66%,
      transparent 100%
    );
  transform: translateX(-135%);
  transition: transform 0.9s ease;
}

.donate-panel:hover .donate-panel__shine {
  transform: translateX(135%);
}

.donate-bullet span:first-child {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.donate-bullet:hover span:first-child {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(246, 180, 0, 0.12);
}

.donate-qr {
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.donate-account-card:hover .donate-qr {
  transform: scale(1.035) rotate(-1deg);
  filter: contrast(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .donate-panel,
  .donate-account-card,
  .donate-small-card,
  .donate-panel__shine,
  .donate-bullet span:first-child,
  .donate-qr {
    transition: none;
  }

  .donate-panel:hover,
  .donate-account-card:hover,
  .donate-small-card:hover,
  .donate-bullet:hover span:first-child,
  .donate-account-card:hover .donate-qr {
    transform: none;
  }
}


/* =========================
   CONTACT SECTION EFFECTS
   ========================= */

.contact-panel,
.contact-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.contact-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 72px rgba(0, 63, 32, 0.13);
}

.contact-card:hover {
  transform: translateY(-4px);
  background-color: #fffaf0;
  box-shadow: 0 22px 52px rgba(0, 63, 32, 0.10);
}

.contact-link {
  position: relative;
  display: inline-block;
}

.contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--color-yellow-500);
  transition: width 0.3s ease;
}

.contact-link:hover::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel,
  .contact-card,
  .contact-link::after {
    transition: none;
  }

  .contact-panel:hover,
  .contact-card:hover {
    transform: none;
  }
}