/* _reset.css - Сучасний CSS Reset для веб-проектів */

/* === БАЗОВЕ СКИДАННЯ === */

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

/* === HTML та BODY === */

html {
  font-size: 100%;
  /* 16px базовий розмір */
  line-height: 1.15;
  /* Покращена читабельність */
  -webkit-text-size-adjust: 100%;
  /* Запобігає автоматичному масштабуванню на iOS */
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Плавна прокрутка */
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === ЗАГОЛОВКИ === */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
}

/* === ПАРАГРАФИ === */

p {
  margin: 0;
}

/* === СПИСКИ === */

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
}

/* === ПОСИЛАННЯ === */

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

a:hover,
a:focus {
  outline: 0;
}

/* Видаляємо підкреслення з усіх посилань */

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* === ЗОБРАЖЕННЯ ТА МЕДІА === */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
  vertical-align: middle;
}

/* Запобігання переповненню зображень */

img,
embed,
iframe,
object,
video {
  max-width: 100%;
}

/* === ФОРМИ === */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

button:disabled {
  cursor: not-allowed;
}

/* Видаляємо стилі з checkbox та radio */

input[type='checkbox'],
input[type='radio'] {
  width: auto;
  margin-right: 0.5rem;
}

/* Покращуємо зовнішній вигляд інпутів */

input,
textarea,
select {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Видаляємо стрілку з select в IE */

select::-ms-expand {
  display: none;
}

/* Покращуємо зовнішній вигляд textarea */

textarea {
  resize: vertical;
  overflow: auto;
}

/* === ТАБЛИЦІ === */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0;
}

th {
  font-weight: 600;
}

/* === HR === */

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #e1e1e1;
  margin: 1rem 0;
}

/* === ЦИТАТИ === */

blockquote,
q {
  quotes: none;
  margin: 0;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

/* === АБРЕВІАТУРИ === */

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/* === ВИДІЛЕННЯ ТЕКСТУ === */

b,
strong {
  font-weight: bolder;
}

/* === КОД === */

code,
kbd,
samp,
pre {
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.9em;
}

pre {
  overflow: auto;
  white-space: pre;
}

/* === МАЛЕНЬКИЙ ТЕКСТ === */

small {
  font-size: 0.8em;
}

/* === SUBSCRIPT та SUPERSCRIPT === */

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* === ДЕТАЛІ === */

details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}

/* === ПРИХОВАНІ ЕЛЕМЕНТИ === */

[hidden],
template {
  display: none !important;
}

/* === ДОСТУПНІСТЬ === */

/* Покращуємо фокус для клавіатурної навігації */

:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Видаляємо outline для миші, але залишаємо для клавіатури */

:focus:not(:focus-visible) {
  outline: none;
}

/* Покращуємо контрастність для користувачів з порушеннями зору */

@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
}

/* Зменшуємо анімації для користувачів з вестибулярними розладами */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === УТИЛІТАРНІ КЛАСИ === */

/* Клас для приховування елементів від екранних читачів */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Клас для повного скидання всіх стилів */

.unstyled {
  all: unset;
  display: revert;
}

/* === WEBKIT СКРОЛБАР === */

/* Стилізація скролбара для Webkit браузерів */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* === SELECTION === */

/* Кастомні кольори виділення тексту */

::selection {
  background-color: #4a90e2;
  color: white;
}

::-moz-selection {
  background-color: #4a90e2;
  color: white;
}

:root {
  /* colors */
  --color-orange-100: #FFE3BE;
  --color-orange-400: #FFAA36;
  --color-orange-700: #864D00;
  --color-orange-800: #593300;
  --color-black: #000000;
  --color-white-100: #FFFFFF;
  --color-white-600: #FFFFFF99;
  --color-white-800: #FFFFFFE0;
  --color-gray-monochrome-100: #FBFBFC;
  --color-gray-monochrome-400: #D4D5D6;
  --color-gray-monochrome-700: #6E7173;
  --color-gray-monochrome-800: #2C2A29;
  --color-gray-200: #D5DAE7;
  --color-gray-300: #DCE1F3;
  --color-gray-400: #D4D5D6;
  --color-gray-500: #797D82;
  --color-gray-600: #3E4355;
  --color-gray-800: #2C2A29;
  --color-blue-50: #FAFAFE;
  --color-blue-100: #C0CEFF;
  --color-blue-200: #58A3FF;
  --color-blue-300: #3A5BCF;
  --color-blue-500: #213786;
  --color-blue-600: #1133B1;
  --color-blue-700: #050E2F;
  --color-blue-800: #000F44;
  --color-blue-900: #001561;
  --color-salate-200: #9FD418;
  --color-olive-300: #536F0D;
  --color-olive-500: #384419;
  --color-olive-700: #27320D;
  --color-green-200: #C1FFDE;
  --color-green-300: #61E696;
  --color-green-600: #18984D;
  --color-orange-bg: #FFB34C14;
  --color-blue-bg: #1849FF26;
  --color-olive-bg: #AAEB040D;
  --color-green-bg: rgba(30, 186, 93, 0.1);
  --color-overlay: #000000CC;
  /* gradients */
  --gradient-orange-dark: linear-gradient(0deg, #FFA021 0%, #B66B06 100%);
  --gradient-orange-light: linear-gradient(90deg, #D55C00 0%, #FFA021 70.19%);
  --gradient-blue: linear-gradient(180deg, #072BAF 0%, #5479FF 100%);
  --gradient-blue-light: linear-gradient(90deg, #113F9B 0%, #5CBEFF 74.04%);
  --gradient-blue-medium: linear-gradient(180deg, rgba(0, 43, 199, 0) 0%, rgba(0, 43, 199, 0.6) 100%);
  --gradient-blue-dark: linear-gradient(120.26deg, #050E2F 12.16%, #1D51C3 91.29%);
  --gradient-grey: linear-gradient(90deg, #545454 0%, #EFF0F5 70.19%);
  --gradient-grey-light: linear-gradient(132.36deg, #FFFFFF 22.09%, #DEDEDE 106.1%);
  --gradient-olive: linear-gradient(68.17deg, #27320D 52.1%, #A7E701 114.13%);
  --gradient-olive-dark: linear-gradient(180deg, #536F0D 0%, #A0D518 100%);
  --gradient-olive-light: linear-gradient(90deg, #55710C 0%, #9FD318 70.19%);
  --gradient-green-dark: linear-gradient(180deg, #128641 0%, #00D355 100%);
  --gradient-green-light: linear-gradient(90deg, #038540 0%, #81E7B1 70.19%);
  --gradient-green-ultra-light: linear-gradient(180deg, #008837 0%, #00D355 100%);
  --gradient-hero-dark: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  --gradient-hero-blue: linear-gradient(230.39deg, rgba(0, 55, 253, 0) 45.36%, rgba(0, 55, 253, 0.98) 100.91%);
  /* font-size */
  --font-size-xxs: 12.59px;
  --font-size-xs: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;

  /* Typography */
  --font-family-base:
    'UZSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;

  /* border-radius */
  --rounded-xsm: 4px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-xl: 20px;
  --rounded-2xl: 24px;
  --rounded-full: 125px;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-white-100, #fff);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0px;
    background-color: var(--color-white-100, #fff);
}

/* === ГЛОБАЛЬНІ СТИЛІ === */

.container {
    max-width: 1236px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
}

img {
    max-width: 100%;
}

/* Tablet styles */

@media screen and (min-width: 768px) {
    .container {
        max-width: 1023px;
        padding: 0 24px;
    }
}

/* Desktop styles */

@media screen and (min-width: 1024px) {
    .container {
        max-width: 1240px;
        padding: 0 40px;
    }
}

/* Large desktop styles - for screens wider than 1240px */

@media screen and (min-width: 1280px) {
    .container {
        padding: 0;
    }
}

.title-h1 {
    font-weight: 700;
    font-size: var(--font-size-4xl);
    line-height: 1.1;
    letter-spacing: 0px;

    @media (min-width: 1024px) {
        font-size: var(--font-size-5xl);
    }
}

.title-h2 {
    font-weight: 700;
    font-size: var(--font-size-4xl);
    line-height: 1.05;
    letter-spacing: 0px;

    @media (min-width: 1024px) {
        font-size: var(--font-size-3xl);
    }
}

.title-h2--blue {
    color: var(--color-blue-500);
}

.title-h3 {
    color: var(--color-blue-500);
    font-weight: 600;
    font-size: var(--font-size-2xl);
    line-height: 1.15;
}

.title-h3--gray {
    color: var(--color-gray-monochrome-800);
}

.title-h3--olive {
    color: var(--color-olive-500);
}

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

.title-h4 {
    font-weight: 700;
    font-size: var(--font-size-2xl);
    letter-spacing: 0px;

    @media (min-width: 1024px) {
        font-size: var(--font-size-4xl);
    }
}

.title-h4--blue {
    color: var(--color-blue-500);
}

.text-body {
    color: var(--color-gray-800);
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: 113.99999999999999%;

    @media (min-width: 1024px) {
        font-size: var(--font-size-md);
    }
}

.form-input-block {
    position: relative;
}

.form-label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #6C6E75;

    @media (min-width: 1024px) {
        margin-bottom: 6px;
    }
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--rounded-md);
    border: 1px solid var(--color-gray-400);
    font-size: 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.form-textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
    height: 112px;
}

.custom-checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.custom-checkbox + label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-checkbox + label::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #d5dae7;
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    background-color: #eff1f6;
}

.custom-checkbox:checked + label::before {
    border-color: #213786;
    background-color: #213786;
    background-image: url("/frontend/zr/images/check.svg");
}

@font-face {
  font-family: 'UZSans';
  src: url('/frontend/zr/fonts/UZSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UZSans';
  src: url('/frontend/zr/fonts/UZSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UZSans';
  src: url('/frontend/zr/fonts/UZSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UZSans';
  src: url('/frontend/zr/fonts/UZSans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'UZSans';
  src: url('/frontend/zr/fonts/UZSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.button-primary {
  width: 100%;
  height: 56px;
  background-color: var(--color-blue-500);
  color: var(--color-white-100);
  border: none;
  border-radius: var(--rounded-md);
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;

}

.button-primary:hover {
  background-color: #2E469E;
}

.button-primary--inversion {
  background-color: var(--color-white-100);
  color: var(--color-blue-500);

  &:hover {
    background-color: var(--color-gray-400);
  }
}

.button-primary--grey {
  background-color: var(--color-gray-monochrome-800);

  &:hover {
    background-color: var(--color-gray-monochrome-700);
  }
}

.button-primary--olive {
  background-color: var(--color-olive-300);

  &:hover {
    background-color: var(--color-olive-500);
  }
}

.button-outline {
  width: 100%;
  height: 56px;
  background-color: transparent;
  color: var(--color-white-100);
  border: 1px solid var(--color-white-100);
  border-radius: var(--rounded-md);
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;

  &:hover {
    background-color: var(--color-white-100);
    color: var(--color-blue-500);
  }
}

.button--link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-inside {
    position: relative;
    padding: 355px 0 65px 0;
    margin-top: 84px;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}

.slider-inside--memorial {
    height: 570px;
    margin-top: -84px;
}

.zakhysnyky .slider-inside::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(80, 110, 0, 0) 42.53%, #506e00 100%) !important;
}

.zakhysnyky .slider-inside.test_css::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(80, 110, 0, 0) 42.53%, #506e00 100%) !important;
}

.memorial-page .slider-inside::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 59.35%, rgb(255 255 255 / 22%) 70.78%, rgb(255 255 255 / 99%) 93.64%);
}

.blood-donation .slider-inside::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(33, 55, 134, 0) 27.64%, #213786 87.89%);
}

.memorial-page .slider-inside {
    padding: 145px 0 40px 0;
}

.slider-inside__inner {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    line-height: 1.3;
}

.slider-inside__title {
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 16px;
}

.slider-inside__text {
    font-weight: 500;
    font-size: 16px;
}

@media (min-width: 600px) {
    .slider-inside__inner {
        text-align: center;
    }

    .slider-inside__title {
        font-size: 56px;
    }

    .slider-inside__text {
        font-size: 18px;
    }

    .memorial-page .slider-inside {
        padding: 145px 0 40px 0;
    }
}

@media (min-width: 1024px) {
    .slider-inside {
        margin-top: 96px;
    }

    .slider-inside--memorial {
        margin-top: -96px;
    }
}

.fees-card__inner {
    position: relative;
    width: 292px;
    height: 380px;
    border-radius: 24px;
    overflow: hidden;
    padding: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.fees-card__inner--wide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fees-card__badge {
    max-width: max-content;
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--rounded-full);
    padding: 5px 16px;
    display: inline-block;
    border: 1px solid transparent;
    margin-bottom: 16px;
}

.fees-card--technic .fees-card__badge {
    color: #f3ffd6;
    background: linear-gradient(#384419, #384419) padding-box,
    linear-gradient(180deg, #536f0d 0%, #a0d518 100%) border-box;
}

.fees-card__wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.fees-card__title {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;

}

.fees-card__text {
    font-size: 14px;
    font-weight: 500;
    color: #ffffffe0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fees-card__progress-wrapper {

}

.fees-card__progress-wrapper--margin {
    margin-top: 24px;
}

.fees-card__progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fees-card__progress-row--top {
    font-weight: 600;
    font-size: 14px;
    color: #ffffff99;
}

.fees-card__progress {
    width: 100%;
    height: 8px;
    margin-top: 15px;
    border-radius: 20px;
    overflow: hidden;
}

.progress-bar {
    height: 8px;
    border-radius: 46px;
}

.fees-card__progress-row--bottom {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

.fees-card__btn {
    border-radius: 12px;
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border: 1px solid #fff;
    margin-top: 24px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.fees-card__btn:hover {
    background-color: var(--color-white-100);
    color: var(--color-blue-500);
}

/* === Варіації === */

/* technic */

.fees-card--technic {
    background: var(--color-olive-500);
}

.fees-card--technic .fees-card__badge {
    color: #f3ffd6;
    background: linear-gradient(#384419, #384419) padding-box,
    linear-gradient(180deg, #536f0d 0%, #a0d518 100%) border-box;
}

.fees-card--technic .fees-card__progress {
    background: #1a2401;
}

.fees-card--technic .progress-bar {
    background: linear-gradient(90deg, #55710c 0%, #9fd318 70.19%);
}

/* technic */

/* medicine */

.fees-card--medicine {
    background: var(--color-blue-300);
}

.fees-card--medicine .fees-card__badge {
    color: var(--color-green-200);
    background: linear-gradient(var(--color-blue-300), var(--color-blue-300)) padding-box,
    linear-gradient(180deg, #128641 0%, #00D355 100%) border-box;
}

.fees-card--medicine .fees-card__progress {
    background: var(--color-blue-600);
}

.fees-card--medicine .progress-bar {
    background: var(--gradient-green-light);
}

/* medicine */

/* general */

.fees-card--general {
    background: var(--color-blue-500);
}

.fees-card--general .fees-card__badge {
    color: #FFE4C0;
    background: linear-gradient(#2c3e85, #2c3e85) padding-box,
    linear-gradient(0deg, #FFC36D 0%, #D87B00 100%) border-box;
}

.fees-card--general .fees-card__progress {
    background: var(--color-blue-900);
}

.fees-card--general .progress-bar {
    background: var(--gradient-orange-light);
}

/* general */

/* family */

.fees-card--family {
    background: var(--color-blue-700);
}

.fees-card--family .fees-card__badge {
    color: var(--color-blue-100);
    background: linear-gradient(var(--color-blue-700), var(--color-blue-700)) padding-box,
    var(--gradient-blue) border-box;
}

.fees-card--family .fees-card__progress {
    background: var(--color-gray-600);
}

.fees-card--family .progress-bar {
    background: var(--gradient-grey);
}

/* family */

/* house */

.fees-card--house {
    background: var(--color-blue-900);
}

.fees-card--house .fees-card__badge {
    color: var(--color-blue-100);
    background: linear-gradient(var(--color-blue-900), var(--color-blue-900)) padding-box,
    var(--gradient-blue) border-box;
}

.fees-card--house .fees-card__progress {
    background: var(--color-blue-800);
}

.fees-card--house .progress-bar {
    background: var(--gradient-blue-light);
}

/* house */

.fees-card--image-bg .fees-card__progress {
    background: rgba(0, 0, 0, 0.4);

}

/* responsive */

@media screen and (min-width: 768px) {
    .fees-card__inner--wide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 380px;
    }

    .fees-card__text {
        -webkit-line-clamp: 2;
    }
}

@media (min-width: 1280px) {
    .fees-card__inner--wide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .fees-card__btn {
        max-width: 272px;
    }

}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination__inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  /* padding: 12px 10px; */
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--rounded-xsm);
  cursor: pointer;
}

.pagination__arrow--disabled {
  color: var(--color-gray-200);
}

.pagination__icon {
  width: 16px;
  height: 16px;
}

.pagination__icon--rotated {
  transform: rotate(180deg);
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  width: 32px;
  height: 36px;
  color: var(--color-blue-500);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--rounded-xsm);
  cursor: pointer;
}

.pagination__item--active {
  border: none;
  background-color: var(--color-blue-500);
  color: var(--color-white-100);
  font-weight: 700;
}

@media screen and (max-width: 400px) {
    .pagination__item{
        width: 30px;
    }

    .pagination__inner {
         gap: 3px;
    }

    .pagination__arrow{
        width: 32px;
    }
}
/* Responsive Styles */

@media (min-width: 1024px) {}

.heart {
    padding: 56px 0;
}

.heart--blue-bg {
    background-color: var(--color-blue-50)
}

.heart__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.heart__image {
    max-width: 314px;
    margin: 0 24px;
    animation: heartbeat 900ms infinite;
}

.heart__text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.heart__text-wrap > h4 {
    max-width: 468px;
    text-align: center;
}

.heart__text-wrap > button {
    width: 200px;
}

@media screen and (min-width: 1024px) {
    .pagination__item:hover {
        border: none;
        background-color: var(--color-blue-500);
        color: var(--color-white-100);
    }

    .heart__inner {
        flex-direction: row;
        justify-content: center;
    }

    .heart__image {
        order: 2;
    }

    .heart__text-wrap {
        order: 1;
        align-items: start;
    }

    .heart__text-wrap > h4 {
        text-align: left;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.05);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/**
 * Swiper 12.0.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 11, 2025
 */

:root {
  --swiper-theme-color: #007aff
}

:host {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1
}

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  box-sizing: initial;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  width: 100%;
  z-index: 1
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0)
}

.swiper-horizontal {
  touch-action: pan-y
}

.swiper-vertical {
  touch-action: pan-x
}

.swiper-slide {
  display: block;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-3d {
  perspective: 1200px;

  .swiper-cube-shadow,
  .swiper-slide {
    transform-style: preserve-3d
  }
}

.swiper-css-mode {
  >.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  >.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
  }

  &.swiper-horizontal {
    >.swiper-wrapper {
      scroll-snap-type: x mandatory
    }
  }

  &.swiper-vertical {
    >.swiper-wrapper {
      scroll-snap-type: y mandatory
    }
  }

  &.swiper-free-mode {
    >.swiper-wrapper {
      scroll-snap-type: none
    }

    >.swiper-wrapper>.swiper-slide {
      scroll-snap-align: none
    }
  }

  &.swiper-centered {
    >.swiper-wrapper:before {
      content: "";
      flex-shrink: 0;
      order: 9999
    }

    >.swiper-wrapper>.swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always
    }
  }

  &.swiper-centered.swiper-horizontal {
    >.swiper-wrapper>.swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before)
    }

    >.swiper-wrapper:before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after)
    }
  }

  &.swiper-centered.swiper-vertical {
    >.swiper-wrapper>.swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before)
    }

    >.swiper-wrapper:before {
      height: var(--swiper-centered-offset-after);
      min-width: 1px;
      width: 100%
    }
  }
}

.swiper-3d {

  .swiper-slide-shadow,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
  }

  .swiper-slide-shadow {
    background: #00000026
  }

  .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, #00000080, #0000)
  }

  .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, #00000080, #0000)
  }

  .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, #00000080, #0000)
  }

  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, #00000080, #0000)
  }
}

.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid #0000;
  box-sizing: border-box;
  height: 42px;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
  position: absolute;
  top: 50%;
  transform-origin: 50%;
  width: 42px;
  z-index: 10
}

.swiper-watch-progress .swiper-slide-visible,
.swiper:not(.swiper-watch-progress) {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode {
  .swiper-wrapper:after {
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0
  }
}

.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
  }
}

.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper:after {
    height: var(--swiper-virtual-size);
    width: 1px
  }
}

:root {
  --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
  align-items: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer;
  display: flex;
  height: var(--swiper-navigation-size);
  justify-content: center;
  position: absolute;
  width: var(--swiper-navigation-size);
  z-index: 10;

  &.swiper-button-disabled {
    cursor: auto;
    opacity: .35;
    pointer-events: none
  }

  &.swiper-button-hidden {
    cursor: auto;
    opacity: 0;
    pointer-events: none
  }

  .swiper-navigation-disabled & {
    display: none !important
  }

  svg {
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    width: 100%;
    fill: currentColor;
    pointer-events: none
  }
}

.swiper-button-lock {
  display: none
}

.swiper-horizontal {

  .swiper-button-next,
  .swiper-button-prev,
  ~.swiper-button-next,
  ~.swiper-button-prev {
    margin-top: calc(0px - var(--swiper-navigation-size)/2);
    top: var(--swiper-navigation-top-offset, 50%)
  }

  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl~.swiper-button-next,
  &~.swiper-button-prev,
  .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
  }

  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl~.swiper-button-prev,
  &~.swiper-button-next,
  .swiper-button-next {
    left: auto;
    right: var(--swiper-navigation-sides-offset, 4px)
  }

  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl~.swiper-button-next,
  &~.swiper-button-prev,
  .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(180deg)
    }
  }

  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl~.swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg)
    }
  }
}

.swiper-vertical {

  .swiper-button-next,
  .swiper-button-prev,
  ~.swiper-button-next,
  ~.swiper-button-prev {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - var(--swiper-navigation-size)/2)
  }

  .swiper-button-prev,
  ~.swiper-button-prev {
    bottom: auto;
    top: var(--swiper-navigation-sides-offset, 4px);
    transform: rotate(-90deg)
  }

  .swiper-button-next,
  ~.swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    transform: rotate(90deg)
  }
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity .3s;
  z-index: 10;

  &.swiper-pagination-hidden {
    opacity: 0
  }

  &.swiper-pagination-disabled,
  .swiper-pagination-disabled>& {
    display: none !important
  }
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  left: 0;
  top: var(--swiper-pagination-top, auto);
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden;

  .swiper-pagination-bullet {
    position: relative;
    transform: scale(.33)
  }

  .swiper-pagination-bullet-active,
  .swiper-pagination-bullet-active-main {
    transform: scale(1)
  }

  .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
  }

  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
  }

  .swiper-pagination-bullet-active-next {
    transform: scale(.66)
  }

  .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
  }
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));

  button& {
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0
  }

  .swiper-pagination-clickable & {
    cursor: pointer
  }

  &:only-child {
    display: none !important
  }
}

.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
  left: var(--swiper-pagination-left, auto);
  right: var(--swiper-pagination-right, 8px);
  top: 50%;
  transform: translate3d(0, -50%, 0);

  .swiper-pagination-bullet {
    display: block;
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
  }

  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;

    .swiper-pagination-bullet {
      display: inline-block;
      transition: transform .2s, top .2s
    }
  }
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
  }

  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;

    .swiper-pagination-bullet {
      transition: transform .2s, left .2s
    }
  }
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, #00000040);
  position: absolute;

  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: left top;
    width: 100%
  }

  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top
  }

  &.swiper-pagination-horizontal,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
  .swiper-horizontal>&,
  .swiper-vertical>&.swiper-pagination-progressbar-opposite {
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
    width: 100%
  }

  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical,
  .swiper-horizontal>&.swiper-pagination-progressbar-opposite,
  .swiper-vertical>& {
    height: 100%;
    left: 0;
    top: 0;
    width: var(--swiper-pagination-progressbar-size, 4px)
  }
}

.swiper-pagination-lock {
  display: none
}

.swiper-scrollbar {
  background: var(--swiper-scrollbar-bg-color, #0000001a);
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;

  &.swiper-scrollbar-disabled,
  .swiper-scrollbar-disabled>& {
    display: none !important
  }

  &.swiper-scrollbar-horizontal,
  .swiper-horizontal>& {
    bottom: var(--swiper-scrollbar-bottom, 4px);
    height: var(--swiper-scrollbar-size, 4px);
    left: var(--swiper-scrollbar-sides-offset, 1%);
    position: absolute;
    top: var(--swiper-scrollbar-top, auto);
    width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);
    z-index: 50
  }

  &.swiper-scrollbar-vertical,
  .swiper-vertical>& {
    height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);
    left: var(--swiper-scrollbar-left, auto);
    position: absolute;
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    width: var(--swiper-scrollbar-size, 4px);
    z-index: 50
  }
}

.swiper-scrollbar-drag {
  background: var(--swiper-scrollbar-drag-bg-color, #00000080);
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%
}

.swiper-scrollbar-cursor-drag {
  cursor: move
}

.swiper-scrollbar-lock {
  display: none
}

.swiper-zoom-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;

  >canvas,
  >img,
  >svg {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain
  }
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none
}

.swiper .swiper-notification {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out
}

.swiper-grid>.swiper-wrapper {
  flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: column;
  flex-wrap: wrap
}

.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out
    }
  }

  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;

    .swiper-slide {
      pointer-events: none
    }
  }

  .swiper-slide-active {
    pointer-events: auto;

    & .swiper-slide-active {
      pointer-events: auto
    }
  }
}

.swiper.swiper-cube {
  overflow: visible
}

.swiper-cube {
  .swiper-slide {
    backface-visibility: hidden;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    visibility: hidden;
    width: 100%;
    z-index: 1;

    .swiper-slide {
      pointer-events: none
    }
  }

  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
  }

  .swiper-slide-active {

    &,
    & .swiper-slide-active {
      pointer-events: auto
    }
  }

  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
  }

  .swiper-cube-shadow {
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: .6;
    position: absolute;
    width: 100%;
    z-index: 0;

    &:before {
      background: #000;
      bottom: 0;
      content: "";
      filter: blur(50px);
      left: 0;
      position: absolute;
      right: 0;
      top: 0
    }
  }
}

.swiper-cube {
  .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
  }
}

.swiper-cube {

  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right,
  .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0
  }
}

.swiper.swiper-flip {
  overflow: visible
}

.swiper-flip {
  .swiper-slide {
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1;

    .swiper-slide {
      pointer-events: none
    }
  }

  .swiper-slide-active {

    &,
    & .swiper-slide-active {
      pointer-events: auto
    }
  }
}

.swiper-flip {

  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right,
  .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0
  }
}

.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
  }
}

.swiper.swiper-cards {
  overflow: visible
}

.swiper-cards {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transform-origin: center bottom
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* ===== header ===== */

.header-wrapper {
    position: fixed;
    top: 0;
    padding: 12px 0;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    z-index: 9999;
    transition: all 0.5s ease;
}

.header-wrapper--transparent {
    background: linear-gradient(0deg, rgba(33, 55, 134, 0) 0%, #213786 100%);
}

.header-wrapper--scrolling {
    padding: 0;
}

.header__in {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1360px;
}

.header__in-block--pc {
    display: none;
}

.header__in-block--pc > a {
    transition: all 0.3s ease;
}

.header-logo {
    display: block;
    width: 150px;
    height: 64px;
    color: var(--color-blue-500);
    transition: height 0.5s ease;
}

.header-wrapper.header-wrapper--scrolling .header-logo {
    height: 48px;
}

.header-logo--olive {
    color: var(--color-olive-500);
}

.header-logo--white {
    color: var(--color-white-100);
}

.menu-logo svg{
    display: block;
    width: 118px;
    height: 50px;
    color: var(--color-blue-500);
}

.menu-list {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 16px 24px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.4s ease;
    z-index: 12;
    background: #fff;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    list-style: none;
}

.menu-list--active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-action-bar {
    margin-top: 40px;
    margin-bottom: 40px;
}

.menu-list__item {
    padding: 18px 10px;
    color: #2c2a29;
    font-weight: 500;
}

.menu-list--active .menu-list__item {
    border-bottom: 1px solid #eaebf1;
}

.menu-list .menu-list__item:first-child {
    border-top: 1px solid #eaebf1;
}

.menu-list__link {
    text-decoration: none;
    font-size: 18px;
    display: block;
    transition: color 0.3s ease;
    position: relative;
}

.menu-list__link::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 0;
    width: 24px;
    height: 24px;
    background: url("../images/menu-arrow.svg") 0 0 no-repeat;
}

.close-btn {
    display: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.menu-list--active .close-btn {
    display: flex;
    color: var(--color-black);
}

.toggle-btn {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 7px;
    cursor: pointer;
}

.toggle-btn span {
    display: block;
    width: 27px;
    height: 2px;
    background-color: var(--color-blue-500);
    border-radius: 20px;
}

.toggle-btn--olive span {
    background-color: var(--color-olive-500);
}

.toggle-btn--white span {
    background-color: var(--color-white-100);
}

.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000ad;
    z-index: 11;
}

.menu-overlay--active {
    display: block;
}

/* Mobile: Hide dropdown, show individual links */

.menu-list__item--desktop-only {
    display: none;
}

.menu-list__item--mobile-only {
    display: block;
}

.header__in-lang-block {
    position: relative;
}

.header__in-lang {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
}

.button--olive {
    background-color: var(--color-olive-500);
    color: var(--color-white-100);
}

.button--olive:hover {
    background-color: var(--color-olive-300);
}

/* Responsive styles */

@media screen and (min-width: 500px) {
    .menu-list {
        left: auto;
        right: 0;
        width: 345px;
        border-bottom-left-radius: 20px;
        transform: translateX(100%);
        box-shadow: -8px 0 24px -8px rgba(0, 0, 0, 0.18), -1px 0 4px rgba(0, 0, 0, 0.08);
    }

    .menu-list--active {
        transform: translateX(0);
    }
}

@media screen and (min-width: 1100px) {
    .header-wrapper {
        padding: 18px 0;
    }

    .header-wrapper--scrolling {
        padding: 0;
    }

    .header__in-block--pc {
        display: block;
    }

    .header-wrapper.header-wrapper--scrolling > .container > .header__in > .header__in-block--pc > a {
        height: 46px;
    }

    /* Desktop: Show dropdown, hide individual mobile links */
    .menu-list__item--desktop-only {
        display: block;
    }

    .menu-list__item--mobile-only {
        display: none;
    }

    .menu-list {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        box-shadow: none;
        background: transparent;
        overflow: visible;
        scrollbar-width: auto;
    }

    body.memorial-page .menu-list__item {
        color: var(--color-white-100);
    }

    .menu-list__item {
        padding: 0;
        font-weight: 600;
        font-size: 18px;
        line-height: 100%;
        color: var(--color-blue-500);
    }

    .menu-list__item:hover {
        color: #2E469E;
    }

    .menu-list__item--olive {
        color: var(--color-olive-500);
    }

    .menu-list__item--olive:hover {
        color: var(--color-olive-300);
    }

    .menu-list__item--white {
        color: var(--color-white-100);
    }

    .menu-list__item--white:hover {
        color: var(--color-white-600);
    }

    .menu-list__link::before {
        display: none;
    }

    .toggle-btn {
        display: none;
    }

    /* Dropdown styles for desktop */
    .menu-list__item--has-dropdown {
        position: relative;
    }

    .menu-list__dropdown-trigger {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-family: inherit;
        padding: 8px 0;
        margin: -8px 0;
    }

    .menu-list__dropdown-icon {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .menu-list__item--has-dropdown:hover .menu-list__dropdown-icon {
        transform: rotate(180deg);
    }

    .menu-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        padding: 24px 0px;
        min-width: 200px;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid rgba(220, 225, 243, 1);
        border-radius: 24px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease 0.1s, visibility 0.15s ease 0.1s;
        z-index: 100;
        list-style: none;
        margin-top: 0;
    }

    .menu-list__item--has-dropdown:hover .menu-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .menu-dropdown__item {
        padding: 0;
    }

    .menu-dropdown__link {
        display: block;
        padding: 10px 24px;
        color: var(--color-blue-500);
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .menu-dropdown__link:hover {
        background-color: #f5f6fa;
        color: #2E469E;
    }

    .menu-mobile{
        display: none!important;
    }
}

/* ===== header ===== */

.footer {
  padding-top: 36px;
  color: var(--color-gray-800);
  border-top: 1px solid var(--color-gray-400);
}

.footer__logo-lg {
    width: 150px;
    height: 64px;
    margin-bottom: 36px;
}

.footer__logo-m {
  width: 45px;
  height: 16px;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 0.333fr);
  gap: 40px;
  grid-template-areas: 'contacts contacts' 'navigation socials';
  align-items: start;
  justify-items: start;
  padding-bottom: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-400);

}

.footer__links-item:nth-child(1) {
  grid-area: contacts;
}

.footer__links-item:nth-child(2) {
  grid-area: navigation;
}

.footer__links-item:nth-child(3) {
  grid-area: socials;
}

.footer__links-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 12px;

}

.footer__links-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -1%;
  color: #737678;
}

.footer__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.footer__links-text {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  font-size: 16px;
}

.footer__links-text--blue {
  color: var(--color-blue-500);
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -1%;
}

.footer__info {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  padding: 16px 0;
  font-size: var(--font-size-xs);
  line-height: 1.23;
  letter-spacing: -1px;

}

.footer__info-links :first-child {
  margin-right: 20px;
}

@media screen and (min-width: 768px) {
  .footer__links {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'contacts navigation socials';
    justify-items: center;
  }

  .footer__info {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'links logo copyright';
    align-items: center;
  }

  .footer__info-links {
    grid-area: links;
  }

  .footer__copyright {
    grid-area: copyright;
    text-align: right;
  }

  .footer__logo-m {
    grid-area: logo;
    margin: 0;
    justify-self: center;
  }
}

@media screen and (min-width: 1024px) {
  .footer__info {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'links logo copyright';
    align-items: center;
  }

  .footer__info-links {
    grid-area: links;
  }

  .footer__copyright {
    grid-area: copyright;
  }

  .footer__logo-m {
    grid-area: logo;
  }


}

@media screen and (min-width: 1280px) {

  .footer__info {
    font-size: var(--font-size-sm);
    line-height: 1.25;
    letter-spacing: normal;
  }
}

.hero-main {
    padding: 92px 0 40px 0;
}

.hero-main__inner {
    position: relative;
}

.hero-main__swiper {
    height: 600px;
    border-radius: var(--rounded-2xl);
}

.hero-main__img-thumb {
    position: relative;
    border-radius: var(--rounded-2xl);
    overflow: hidden;
    max-width: 100%;
    height: 100%;
    display: block;
    background: var(--gradient-hero-dark), var(--gradient-hero-blue);
    z-index: 1;
}

.hero-main__img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero-dark), var(--gradient-hero-blue);
    z-index: 10;
}

.hero-main__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hero-main__content {
    position: absolute;
    bottom:64px;
    z-index: 3;
    padding: 0 16px;
    text-align: start;
}

.hero-main__content .title-h1{
    margin-bottom: 8px;
}

.hero-main__description {
    line-height: 1.2;
}

.hero-main__buttons {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.swiper-pagination.hero-main__pagination {
    bottom: -34px !important;
}

span.swiper-pagination-bullet {
    border-radius: 20px !important;
}

span.swiper-pagination-bullet {
    transition: width 0.5s ease, background-color 0.5s ease;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
}

/* Responsive Styles */

@media (min-width: 480px) {

    .hero-main__content {
        padding: 0 24px;
    }

    .hero-main__buttons {
        width: 100%;
        flex-direction: row;
        justify-content: start;
        gap: 32px;
    }

    .hero-main__buttons .button--link{
        width: auto;
        display: inline-block;
    }
}

@media (min-width: 1024px) {
    .hero-main {
        padding: 104px 0 40px 0;
    }

    .hero-main__content {
        padding: 0 64px;
    }

    .hero-main__description {
        font-size: var(--font-size-md);
        width: 600px;
    }
}

.fundraisers {
  padding: 32px 0 40px 0;
  ;
}

.histories {
    padding: 40px 0;
    background: var(--color-blue-50);
}

.histories__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.histories__all {
    display: none;
}

.histories__statistic {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    font-weight: 600;
    border-radius: var(--rounded-2xl);
    background: var(--gradient-blue-dark);
}

.histories__statistic-value {
    font-size: var(--font-size-3xl);
}

.histories__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.histories__icon-list {
    margin-top: 16px;
    margin-bottom: 16px;
}

.fees-card__inner:not(:first-child) > .histories__icon-list {
    margin-top: 32px;
}

.histories__icon-first {
    margin-bottom: 6px;
}

.histories__icon-first,
.histories__icon-second {
    display: flex;
    align-items: center;
    gap: 8px;
}

.histories__icon-text {
    color: var(--color-white-800);
    font-weight: 500;
    font-size: var(--font-size-xs);
    line-height: 1.2;
}

.histories__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.histories__icon--family {
    color: var(--color-blue-200)
}

.histories__icon--house {
    color: var(--color-blue-200)
}

.histories__icon--technic {
    color: var(--color-salate-200);
}

.histories__icon--medicine {
    color: var(--color-green-300);
}

.histories__icon--general {
    color: var(--color-orange-400);
}

.histories__result-text {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* responsive styles */

@media (min-width: 768px) {
    .histories__title-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .histories__all {
        display: flex;
        gap: 4px;
        text-decoration: none;
        color: var(--color-blue-500);
        font-weight: 600;
        font-size: 18px;
        margin-top: 5px;
        position: relative;
    }

    .histories__all-icon {
        width: 24px;
        height: 24px;
        transform: rotate(-45deg);
    }

    .histories__statistic {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .histories__cards {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .histories__cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .histories__cards {
        grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 'first first second third' 'first first fourth fifth';
        gap: 24px;
    }

    .fees-card__inner:nth-child(1) {
        grid-area: first;
    }

    .fees-card__inner:nth-child(2) {
        grid-area: second;
    }

    .fees-card__inner:nth-child(3) {
        grid-area: third;
    }

    .fees-card__inner:nth-child(4) {
        grid-area: fourth;
    }

    .fees-card__text.fees-card__text--text-line-clamp-8 {
        -webkit-line-clamp: 8;
    }
}

.movie {
  padding: 64px 0;

}

.movie__video-container {
  position: relative;
  /* padding-bottom: 56.25%; */
  /* 16:9 aspect ratio */
  height: 206px;
  overflow: hidden;
  border-radius: var(--rounded-2xl);
  margin-bottom: 32px;
}

.movie__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie__title {
  margin-bottom: 16px;
  color: var(--color-blue-500);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.05;
}

.movie__description {
  margin-bottom: 24px;
  color: var(--color-black-100, #000);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.1;
}

.movie__text>a {
  width: 229px;
}

/* responsive styles */

@media screen and (min-width: 480px) {
  .movie__video-container {
    height: 300px;
  }
}

@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {
  .movie__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 32px;
    grid-template-areas: 'text video';
  }

  .movie__video-container {
    grid-area: video;
    height: 400px;
    margin-bottom: 0;
  }

  .movie__text {
    grid-area: text;
    align-self: center;
  }
}

@media screen and (min-width: 1280px) {
  .movie__text {
    max-width: 520px;
  }
}

.power {
    padding-bottom: 56px;
    background-color: var(--color-olive-700);
}

.power__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.power__content {
    margin-top: 32px;
}

.power__content > h2 {
    margin-bottom: 16px;
}

.power__text {
    margin-bottom: 24px;
    font-weight: 500;
    font-size: var(--font-size-md);
    line-height: 1.14;
}

.power__content > a {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 212px;
    text-align: center;
}

/*Responsive styles*/

@media (min-width: 768px) {
    .power {
        height: 539px;
        padding-bottom: 0;
    }

    .power__inner {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
    }

    .power__image-thumb {
        flex: 0 0 50%;
        height: 100%;
    }

    .power__content-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .power__content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

@media screen and (min-width: 1024px) {
    .power__content-wrapper > div {
        margin-left: 0;
    }
}

@media (min-width: 1280px) {
    .power__inner {
        gap: 64px;
    }


    .power__image-thumb {
        height: 539px;
    }

    .power__img {
        object-position: top;
    }

    .power__content-wrapper {
        position: relative;
        max-width: 50%;
    }

    .power__content {
        max-width: 567px;
        width: 100%;
    }

}

.memorial {
  padding: 64px 0;
  color: var(--color-gray-monochrome-800);
}

.memorial__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.memorial__image-thumb {
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  margin-bottom: 8px;
}

.memorial__img {
  border-radius: var(--rounded-2xl);
}

.memorial__img-text {
  color: var(--color-gray-monochrome-700);
  font-weight: 600;
  font-style: italic;
  font-size: var(--font-size-xs);
}

.memorial__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.memorial__text {
  max-width: 620px;
  font-weight: 500;
  font-size: var(--font-size-md);
  line-height: 1.2;
}

.memorial__cards-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}


.memorial__card {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 16px;
  height: 116px;
  padding: 8px;
  border: 1px solid var(--color-gray-monochrome-400);
  border-radius: var(--rounded-sm);
  background: var(--gradient-grey-light);
  color: var(--color-gray-800);
  font-weight: 600;
}

.memorial__card-num {
  font-size: var(--font-size-xl);
}

.memorial__card-title {
  font-size: var(--font-size-xs);
}

.memorial__content>a {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 182px;
  text-align: center;
}

/*Responsive styles*/

@media (min-width: 768px) {
  .memorial__cards-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

.memorial__card:last-child {
  grid-column: span 3;
}
}

@media (min-width: 1024px) {
  .memorial__inner {
    flex-direction: row;
  }

  .memorial__img-wrapper {
    flex: 0 0 50%;
    order: 2;
  }

  .memorial__content {
    flex: 1;
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  .memorial__img-wrapper {
    flex: 0 0 55.5%;
  }
}

.who-are-iron {
  margin: 50px 0;
}

.who-are-iron__inner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 32px;
}

.who-are-iron__title {
  font-weight: 700;
  font-size: 40px;
  color: #384419;
  margin-bottom: 24px;
}

.who-are-iron__text {
  font-weight: 500;
  font-size: 18px;
  color: #2c2a29;
  max-width: 520px;
}

.who-are-iron__img {
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.who-are-iron__img img {
  object-fit: cover;
  object-position: center;
  height: 100%;
}

.who-are-iron__block-2 {
  order: -1;
}

.who-are-iron__numbers-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 16px;
  margin-top: 24px;
  color: #fff;
}

.who-are-iron__numbers-block {
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(68.17deg, #27320d 52.1%, #a7e701 114.13%);
}

.who-are-iron__number {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 13px;
}

.who-are-iron__numbers-text {
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 700px) {
  .who-are-iron__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .who-are-iron__block-2 {
    order: 2;
  }

  .who-are-iron__numbers-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    margin-top: 41px;
  }
}

.needs {
  background: #384419;
  padding: 64px 0;
}

.needs-title {
  text-align: center;
  font-weight: 700;
  font-size: 40px;
}

.needs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  margin-top: 32px;
}

.needs__grid-block {
  border: 1px solid #896525;
  border-radius: 24px;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.needs__grid-text {
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  max-width: 120px;
}

.needs__icons {
  width: 48px;
  height: 48px;
  fill: #fbaa19;
}

.needs__icons use {
  fill: #fbaa19;
}

@media (min-width: 768px) {
  .needs__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
  }
}

@media (min-width: 992px) {
  .needs__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.fees {
  margin: 40px 0;
  position: relative;
  margin-bottom: 62px;
}

.title-fees {
  font-size: 32px;
  font-weight: 600;
}

.title-fees__all {
  display: inline-block;
  text-decoration: none;
  color: #384419;
  font-weight: 600;
  font-size: 18px;
  margin-top: 5px;
  position: relative;
}

.title-fees__all-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0px;
  right: -25px;
  fill: var(--color-olive-500);
  transform: rotate(-45deg);
}

.title-fees__all--blue {
  color: var(--color-blue-500);
}

.fees-slider-container {
  margin-top: 16px;
}

.see-all-btn-block {
  display: none;
  text-align: center;
}

.see-all-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  background: var(--color-olive-500);
  margin-top: 32px;
  padding: 16px;
  width: 320px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.see-all-btn:hover {
  background: var(--color-olive-300);
  color: var(--color-white-100);
}

.see-all-btn--main-page {
  width: 190px;
  background-color: var(--color-blue-500);
}

.see-all-btn--main-page:hover {
  background-color: var(--color-blue-300);
  color: var(--color-white-100);
}

.swiper-pagination--top .swiper-button-next,
.swiper-pagination--top .swiper-button-prev {
  display: none;
}

.swiper-button-next svg,
.swiper-button-prev svg {
  color: #384419;
  width: 24px !important;
  height: 24px !important;
}

.button-next--blue svg,
.button-prev--blue svg {
  fill: var(--color-blue-500);
  color: var(--color-blue-500);
}

.swiper-pagination--top .swiper-button-prev {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .title-fees {
    font-size: 40px;
    font-weight: 700;
  }

  .title-fees__all {
    display: none;
  }

  .see-all-btn-block {
    display: block;
  }

  .swiper-pagination--top {
    position: absolute;
    top: 0;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .swiper-pagination--top .swiper-button-next,
  .swiper-pagination--top .swiper-button-prev {
    display: flex;
    position: relative;
    background: #f2f3fb;
    border-radius: 50%;
    overflow: hidden;
  }
}

.way {
  margin: 64px 0;
}

.way__title {
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 24px;
}

.way__text {
  font-size: 18px;
  font-weight: 500;
  color: #2c2a29;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.way__grid,
.way__gallery {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 40px;
  gap: 24px;
}

.way__block-img,
.way__gallery-img {
  border-radius: 24px;
  overflow: hidden;
}

.way__block-img img,
.way__gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.way__block-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-olive-500);
  margin-top: 24px;
}

.way__block-text {
  font-size: 18px;
  font-weight: 500;
  color: #2c2a29;
  margin-top: 8px;
}

.way__gallery {
  margin-top: 40px;
}

@media (min-width: 700px) {
  .way__grid,
  .way__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.memorial__numbers {
  background: var(--color-blue-900);
  padding: 72px 20px;
  padding-top: 42px;
}

.memorial__numbers__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-direction: column;
}

.memorial__numbers-text {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  max-width: 500px;
}

.memorial__numbers-number {
    background: #fff;
    padding: 30px 24px;
    max-width: 100%;
    color: var(--color-blue-900);
    font-weight: 600;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid #B6BCD4;
    order: -1;
}

.memorial__numbers-number:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(52.58deg, #ffffff 44.15%, #5b8eff 104.85%);
}

.memorial__numbers-number__title {
  font-size: 36px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.memorial__numbers-number__text {
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .memorial__numbers__inner {
    flex-direction: row;
    gap: 64px;
  }

  .memorial__numbers-number {
    order: 2;
    max-width: 230px;
  }
}

.memorial-heroes {
    margin: 64px 0;
}

.memorial-heroes__inner {
    position: relative;
}

.memorial-heroes__wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
}

.memorial-heroes__search-form {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.memorial-heroes__search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.memorial-heroes__search-input {
    width: 100%;
    padding: 16px 20px 16px 50px;
    color: var(--color-gray-800);
    border: 1px solid rgba(182, 188, 212, 1);
    border-radius: var(--rounded-md);
    cursor: pointer;
    transition: 250ms;
}

.memorial-heroes__search-input:focus-visible {
    outline: 2px solid #ccd8e3;
    outline-offset: 2px;
}

.memorial-heroes__search-input::placeholder {
    font-weight: 600;
    font-size: 16px;
    line-height: 10px;
    color: rgba(131, 141, 179, 1);
}

.memorial-heroes__title {
    font-size: 40px;
    font-weight: 600;
}

.memorial-heroes__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.memorial-heroes__block {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* background: var(--color-blue-900); */
}

.memorial-heroes__block-img {
    position: relative;
    height: 360px;
}

.memorial-heroes__block-img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    rgba(0, 43, 199, 0) 74.1%,
    #001561 107.22%);
    z-index: 1;
}

.memorial-heroes__block-img img {
    width: 100%;
    height: 360px;
    height: 360px;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%);
}

.memorial-heroes__block__bottom {
    padding: 32px 16px 24px 16px;
    text-align: center;
    margin-top: -51px;
    height: 305px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: var(--color-blue-900);
}

.memorial-heroes__block__name {
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin-top: 18px;
    padding: 32px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.memorial-heroes__block__date {
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-top: 8px;
}

.memorial-heroes__btns {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    color: #fff;
    margin-top: 35px;
    justify-content: center;
}

.memorial-heroes__btn {
    font-size: 18px;
    font-weight: 700;
    border: 1px solid #fff;
    border-radius: var(--rounded-md);
    padding: 16px 26px;
    cursor: pointer;
    transition: 250ms;
}

.memorial-heroes__btn:hover {
    opacity: 0.8;
}

.memorial-heroes__btn-2 {
    padding: 16px 16px;
}


.memorial-heroes__block__lable-wrapper {
    position: absolute;
    top: 341px;
    left: 0;
    width: 225px;
    height: 40px;
    z-index: 1;
}

.memorial-heroes__block__lable {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 8px 15px;
    border-top-right-radius: 30px;
    border: 1px solid transparent;
    background: linear-gradient(86.77deg, #0a0f1a 5.96%, #1e57d2 88.02%);
    overflow: hidden;
    white-space: nowrap;
}

.memorial-heroes__block__lable:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 6px;
    height: 28px;
    width: 20px;
    background-color: #1e57d2;
}

.memorial-heroes__block__lable-triangle {
    position: absolute;
    top: 0;
    right: -94px;
    width: 100px;
    height: 100%;
    clip-path: polygon(0% 100%, 0% 28.75%, 23% 100%);
    background-color: #1e57d2;
    z-index: 2;
}

.marquee-text {
    display: inline-block;
    padding-left: 0%;
    animation: none;
}

.memorial-heroes__block__bottom:hover .memorial-heroes__block__lable .marquee-text {
    animation: marquee 10s linear infinite;
}

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

.memorial-heroes__btn svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}


@media (min-width: 672px) {
    .memorial-heroes__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 987px) {
    .memorial-heroes__wrap {
        flex-direction: row;
    }

    .memorial-heroes__search-form {
        max-width: 300px;
    }

    .memorial-heroes__search-input {
        font-size: var(--font-size-md);
        line-height: 1.15;
    }

    .memorial-heroes__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1315px) {
    .memorial-heroes__grid {
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 48px;
    }
}

.memorial-other {
  margin-top: 64px;
}

.memorial-other__title-row {
  color: var(--color-blue-500);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  margin-bottom: 32px;
}

.memorial-other__title {
  font-size: 32px;
  font-weight: 600;
  position: relative;
}

.memorial-other__title-btn {
  display: inline-block;
  text-decoration: none;
  position: relative;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.memorial-other__title-btn svg {
  fill: var(--color-blue-500);
  width: 24px;
  height: 24px;
}

.memorial-other__inner .memorial-heroes__btn {
  padding: 16px 16px;
}

@media (min-width: 650px) {
  .memorial-other__title-row {
    flex-direction: row;
    align-items: center;
  }
}

.memorial-single {
    padding: 100px 0 48px 0;
}

.memorial-single__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 24px;
}

.memorial-single__profile-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

.memorial-single__badge {
    --fill: linear-gradient(86.77deg, #0a0f1a 6%, #1e57d2 105%);
    --stroke: linear-gradient(266.05deg, #353535 16%, #1e57d2 109%);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    border: 1px solid transparent;
    background: var(--fill) padding-box,
    var(--stroke) border-box;
    margin-bottom: 24px;
    display: inline-block;
}

.memorial-single__photo {
    border-radius: var(--rounded-2xl);
    overflow: hidden;
    position: relative;
}

.memorial-single__photo:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            180deg,
            rgba(0, 43, 199, 0) 74.1%,
            #001561 107.22%
    );
    z-index: 1;
}

.memorial-single__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
    display: block;
}

.memorial-single__content {
    color: var(--color-gray-800);
}

.memorial-single__name {
    margin: 0 0 6px;
    font-size: 40px;
    line-height: 1.15;
    color: var(--color-blue-900);
    font-weight: 800;
}

.memorial-single__dates {
    color: var(--color-blue-900);
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 18px;
}

.memorial-single__text p {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 18px;
}

.memorial-single__aside {
    position: sticky;
    top: 70px;
    height: fit-content;
    padding: 0 24px 24px 24px;
    color: #fff;
    background: var(--color-blue-700);
    border-radius: var(--rounded-lg);
    overflow: hidden;
}

.memorial-single__aside-title {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    z-index: 2;
}

.memorial-single__candle {
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    display: flex;
    justify-content: center;
}

.memorial-single__candle img {
    display: block;
}

.memorial-single__candle-img {
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease;
    height: 100%;
}

.memorial-single__candle--flicker .memorial-single__candle-img {
    opacity: 1;
}

.memorial-single__btn {
    width: 100%;
    border: 1px solid #e3e9f6;
    background: #fff;
    color: #0b0b0b;
    border-radius: var(--rounded-md);
    padding: 10px 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.memorial-single__btn:hover {
    filter: brightness(0.98);
}

.memorial-single__btn-ico {
    font-size: 18px;
}

.memorial-single__divider {
    margin: 24px 0;
    border: none;
    height: 1px;
    background: #FFFFFF66;
}

.memorial-single__share-label {
    text-align: center;
    margin-bottom: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.memorial-single__share-list {
    display: flex;
    justify-content: space-evenly;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.memorial-single__btn svg {
    width: 24px;
    height: 24px;
}

.memorial-single__share-list a {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memorial-single__share-list svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: #e8e8e9;
}

/* ===== Responsive ===== */

@media (min-width: 650px) {
    .memorial-single__profile-grid {
        display: block;
    }

    .memorial-single__photo {
        float: left;
        width: 320px;
        margin: 0 24px 16px 0;
        border-radius: var(--rounded-2xl);
        overflow: hidden;
        position: relative;
        shape-outside: margin-box;
    }
}

@media (min-width: 992px) {
    .memorial-single__grid {
        grid-template-columns: 2.4fr 1fr;
    }
}

@media (min-width: 1100px) {
    .memorial-single {
        padding: 128px 0 48px 0;
    }
}

.flicker {
    position: absolute;
    width: 10px;
    height: 80px;
    border-radius: 50%;
    top: 120px;
    left: 47%;
    background-color: #fee3ac;
    box-shadow: 0 0 0px 0px #fee3ac;
    -webkit-animation: 10s flicker infinite;
    animation: 10s flicker infinite;
    transition: opacity 1.2s ease-in-out, visibility 0s 1s;

    /*display: none;*/
    animation-play-state: paused;
    opacity: 0;
    visibility: hidden;
}

.memorial-single__candle--flicker .flicker {
    opacity: 1;
    animation-play-state: running;
    visibility: visible;
}

@-webkit-keyframes flicker {
    80% {
        opacity: 0;
        box-shadow: 0 0 0.33px 0.165px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    46% {
        opacity: 0;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    78% {
        opacity: 0;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    59% {
        opacity: 0;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    25% {
        opacity: 0;
        box-shadow: 0 0 1.65px 0.825px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    16% {
        opacity: 0;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    55% {
        opacity: 0;
        box-shadow: 0 0 2.31px 1.155px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    66% {
        opacity: 0;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    81% {
        opacity: 0;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 3.63px 1.815px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    80% {
        opacity: 0;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    98% {
        opacity: 0;
        box-shadow: 0 0 4.29px 2.145px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    5% {
        opacity: 0;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    52% {
        opacity: 0;
        box-shadow: 0 0 5.61px 2.805px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    34% {
        opacity: 0;
        box-shadow: 0 0 6.27px 3.135px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    98% {
        opacity: 0;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    77% {
        opacity: 0;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    2% {
        opacity: 0;
        box-shadow: 0 0 7.59px 3.795px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    68% {
        opacity: 0;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    38% {
        opacity: 0;
        box-shadow: 0 0 8.25px 4.125px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    34% {
        opacity: 0;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    93% {
        opacity: 0;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    92% {
        opacity: 0;
        box-shadow: 0 0 9.57px 4.785px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    40% {
        opacity: 0;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    47% {
        opacity: 0;
        box-shadow: 0 0 10.23px 5.115px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 11.55px 5.775px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    11% {
        opacity: 0;
        box-shadow: 0 0 12.21px 6.105px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    18% {
        opacity: 0;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    39% {
        opacity: 0;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 13.53px 6.765px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    11% {
        opacity: 0;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    91% {
        opacity: 0;
        box-shadow: 0 0 14.19px 7.095px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    86% {
        opacity: 0;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    2% {
        opacity: 0;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    21% {
        opacity: 0;
        box-shadow: 0 0 15.51px 7.755px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    1% {
        opacity: 0;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    28% {
        opacity: 0;
        box-shadow: 0 0 16.17px 8.085px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    50% {
        opacity: 0;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    12% {
        opacity: 0;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    22% {
        opacity: 0;
        box-shadow: 0 0 17.49px 8.745px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    10% {
        opacity: 0;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    75% {
        opacity: 0;
        box-shadow: 0 0 18.15px 9.075px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    7% {
        opacity: 0;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    35% {
        opacity: 0;
        box-shadow: 0 0 19.47px 9.735px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    41% {
        opacity: 0;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    58% {
        opacity: 0;
        box-shadow: 0 0 20.13px 10.065px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    55% {
        opacity: 0;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    9% {
        opacity: 0;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    71% {
        opacity: 0;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 21.45px 10.725px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    96% {
        opacity: 0;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    39% {
        opacity: 0;
        box-shadow: 0 0 22.11px 11.055px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    45% {
        opacity: 0;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    90% {
        opacity: 0;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 23.43px 11.715px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    78% {
        opacity: 0;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    83% {
        opacity: 0;
        box-shadow: 0 0 24.09px 12.045px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    79% {
        opacity: 0;
        box-shadow: 0 0 25.41px 12.705px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    49% {
        opacity: 0;
        box-shadow: 0 0 26.07px 13.035px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    81% {
        opacity: 0;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    45% {
        opacity: 0;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 27.39px 13.695px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    63% {
        opacity: 0;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    31% {
        opacity: 0;
        box-shadow: 0 0 28.05px 14.025px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    8% {
        opacity: 0;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    96% {
        opacity: 0;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    60% {
        opacity: 0;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    77% {
        opacity: 0;
        box-shadow: 0 0 29.37px 14.685px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    93% {
        opacity: 0;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    14% {
        opacity: 0;
        box-shadow: 0 0 30.03px 15.015px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 31.35px 15.675px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    30% {
        opacity: 0;
        box-shadow: 0 0 32.01px 16.005px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    60% {
        opacity: 0;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    29% {
        opacity: 0;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 0;
        transform: rotate(5deg);
    }
    77% {
        opacity: 0.23;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    61% {
        opacity: 0.23;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    86% {
        opacity: 0.23;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    84% {
        opacity: 0.23;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    60% {
        opacity: 0.23;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    57% {
        opacity: 0.23;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    20% {
        opacity: 0.23;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    96% {
        opacity: 0.23;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    57% {
        opacity: 0.23;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    49% {
        opacity: 0.23;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    58% {
        opacity: 0.23;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    34% {
        opacity: 0.23;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    49% {
        opacity: 0.23;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    7% {
        opacity: 0.23;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    28% {
        opacity: 0.23;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    72% {
        opacity: 0.23;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    28% {
        opacity: 0.23;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    68% {
        opacity: 0.23;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    78% {
        opacity: 0.23;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    54% {
        opacity: 0.23;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    90% {
        opacity: 0.23;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    32% {
        opacity: 0.23;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    91% {
        opacity: 0.23;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    99% {
        opacity: 0.23;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    75% {
        opacity: 0.23;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    52% {
        opacity: 0.23;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    76% {
        opacity: 0.23;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    53% {
        opacity: 0.23;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    27% {
        opacity: 0.23;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    100% {
        opacity: 0.23;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    12% {
        opacity: 0.45;
        box-shadow: 0 0 0.33px 0.165px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    72% {
        opacity: 0.45;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    55% {
        opacity: 0.45;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    94% {
        opacity: 0.45;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    13% {
        opacity: 0.45;
        box-shadow: 0 0 1.65px 0.825px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    54% {
        opacity: 0.45;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    6% {
        opacity: 0.45;
        box-shadow: 0 0 2.31px 1.155px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    27% {
        opacity: 0.45;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    11% {
        opacity: 0.45;
        box-shadow: 0 0 3.63px 1.815px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    57% {
        opacity: 0.45;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    29% {
        opacity: 0.45;
        box-shadow: 0 0 4.29px 2.145px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    23% {
        opacity: 0.45;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    90% {
        opacity: 0.45;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    84% {
        opacity: 0.45;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    6% {
        opacity: 0.45;
        box-shadow: 0 0 5.61px 2.805px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    80% {
        opacity: 0.45;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    7% {
        opacity: 0.45;
        box-shadow: 0 0 6.27px 3.135px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    41% {
        opacity: 0.45;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    92% {
        opacity: 0.45;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    30% {
        opacity: 0.45;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    45% {
        opacity: 0.45;
        box-shadow: 0 0 7.59px 3.795px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    99% {
        opacity: 0.45;
        box-shadow: 0 0 8.25px 4.125px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    63% {
        opacity: 0.45;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    63% {
        opacity: 0.45;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    86% {
        opacity: 0.45;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 9.57px 4.785px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    52% {
        opacity: 0.45;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    1% {
        opacity: 0.45;
        box-shadow: 0 0 10.23px 5.115px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    47% {
        opacity: 0.45;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    44% {
        opacity: 0.45;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    76% {
        opacity: 0.45;
        box-shadow: 0 0 11.55px 5.775px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    70% {
        opacity: 0.45;
        box-shadow: 0 0 12.21px 6.105px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    36% {
        opacity: 0.45;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    16% {
        opacity: 0.45;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    75% {
        opacity: 0.45;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    68% {
        opacity: 0.45;
        box-shadow: 0 0 13.53px 6.765px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    29% {
        opacity: 0.45;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    83% {
        opacity: 0.45;
        box-shadow: 0 0 14.19px 7.095px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    60% {
        opacity: 0.45;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    98% {
        opacity: 0.45;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    39% {
        opacity: 0.45;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    94% {
        opacity: 0.45;
        box-shadow: 0 0 15.51px 7.755px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    26% {
        opacity: 0.45;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    78% {
        opacity: 0.45;
        box-shadow: 0 0 16.17px 8.085px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    10% {
        opacity: 0.45;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    11% {
        opacity: 0.45;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    87% {
        opacity: 0.45;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    74% {
        opacity: 0.45;
        box-shadow: 0 0 17.49px 8.745px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    3% {
        opacity: 0.45;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    90% {
        opacity: 0.45;
        box-shadow: 0 0 18.15px 9.075px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    7% {
        opacity: 0.45;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    9% {
        opacity: 0.45;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    36% {
        opacity: 0.45;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    89% {
        opacity: 0.45;
        box-shadow: 0 0 19.47px 9.735px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    31% {
        opacity: 0.45;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    39% {
        opacity: 0.45;
        box-shadow: 0 0 20.13px 10.065px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    24% {
        opacity: 0.45;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    62% {
        opacity: 0.45;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    66% {
        opacity: 0.45;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    87% {
        opacity: 0.45;
        box-shadow: 0 0 21.45px 10.725px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    19% {
        opacity: 0.45;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    66% {
        opacity: 0.45;
        box-shadow: 0 0 22.11px 11.055px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    42% {
        opacity: 0.45;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    77% {
        opacity: 0.45;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    13% {
        opacity: 0.45;
        box-shadow: 0 0 23.43px 11.715px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    51% {
        opacity: 0.45;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    96% {
        opacity: 0.45;
        box-shadow: 0 0 24.09px 12.045px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    92% {
        opacity: 0.45;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    43% {
        opacity: 0.45;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    9% {
        opacity: 0.45;
        box-shadow: 0 0 25.41px 12.705px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    8% {
        opacity: 0.45;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    22% {
        opacity: 0.45;
        box-shadow: 0 0 26.07px 13.035px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    91% {
        opacity: 0.45;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    27% {
        opacity: 0.45;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    96% {
        opacity: 0.45;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    65% {
        opacity: 0.45;
        box-shadow: 0 0 27.39px 13.695px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    69% {
        opacity: 0.45;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    76% {
        opacity: 0.45;
        box-shadow: 0 0 28.05px 14.025px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    8% {
        opacity: 0.45;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    64% {
        opacity: 0.45;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    62% {
        opacity: 0.45;
        box-shadow: 0 0 29.37px 14.685px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    89% {
        opacity: 0.45;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    4% {
        opacity: 0.45;
        box-shadow: 0 0 30.03px 15.015px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    80% {
        opacity: 0.45;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    54% {
        opacity: 0.45;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    91% {
        opacity: 0.45;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    12% {
        opacity: 0.45;
        box-shadow: 0 0 31.35px 15.675px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    26% {
        opacity: 0.45;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    68% {
        opacity: 0.45;
        box-shadow: 0 0 32.01px 16.005px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    35% {
        opacity: 0.45;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    58% {
        opacity: 0.45;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    14% {
        opacity: 0.45;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 60px;
        transform: rotate(5deg);
    }
    4% {
        opacity: 0.32;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    45% {
        opacity: 0.32;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    5% {
        opacity: 0.32;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    81% {
        opacity: 0.32;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    15% {
        opacity: 0.32;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    4% {
        opacity: 0.32;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    94% {
        opacity: 0.32;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    60% {
        opacity: 0.32;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    88% {
        opacity: 0.32;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    58% {
        opacity: 0.32;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    74% {
        opacity: 0.32;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    39% {
        opacity: 0.32;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    99% {
        opacity: 0.32;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    86% {
        opacity: 0.32;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    45% {
        opacity: 0.32;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    7% {
        opacity: 0.32;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    37% {
        opacity: 0.32;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    62% {
        opacity: 0.32;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    73% {
        opacity: 0.32;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    50% {
        opacity: 0.32;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    93% {
        opacity: 0.32;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    70% {
        opacity: 0.32;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    44% {
        opacity: 0.32;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    90% {
        opacity: 0.32;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    17% {
        opacity: 0.32;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    89% {
        opacity: 0.32;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    6% {
        opacity: 0.32;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    11% {
        opacity: 0.32;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    15% {
        opacity: 0.32;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    27% {
        opacity: 0.32;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    85% {
        opacity: 0.32;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    50% {
        opacity: 0.32;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    57% {
        opacity: 0.32;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    60% {
        opacity: 0.32;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    52% {
        opacity: 0.32;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    30% {
        opacity: 0.32;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    99% {
        opacity: 0.32;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    97% {
        opacity: 0.32;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    91% {
        opacity: 0.32;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    41% {
        opacity: 0.32;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    42% {
        opacity: 0.32;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    30% {
        opacity: 0.32;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    52% {
        opacity: 0.32;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    64% {
        opacity: 0.32;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 60px;
        transform: rotate(5deg);
    }
}

@keyframes flicker {
    80% {
        opacity: 0;
        box-shadow: 0 0 0.33px 0.165px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    46% {
        opacity: 0;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    78% {
        opacity: 0;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    59% {
        opacity: 0;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    25% {
        opacity: 0;
        box-shadow: 0 0 1.65px 0.825px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    16% {
        opacity: 0;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    55% {
        opacity: 0;
        box-shadow: 0 0 2.31px 1.155px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    66% {
        opacity: 0;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    81% {
        opacity: 0;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 3.63px 1.815px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    80% {
        opacity: 0;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    98% {
        opacity: 0;
        box-shadow: 0 0 4.29px 2.145px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    5% {
        opacity: 0;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    52% {
        opacity: 0;
        box-shadow: 0 0 5.61px 2.805px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    34% {
        opacity: 0;
        box-shadow: 0 0 6.27px 3.135px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    98% {
        opacity: 0;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    77% {
        opacity: 0;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    2% {
        opacity: 0;
        box-shadow: 0 0 7.59px 3.795px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    68% {
        opacity: 0;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    38% {
        opacity: 0;
        box-shadow: 0 0 8.25px 4.125px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    34% {
        opacity: 0;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    93% {
        opacity: 0;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    92% {
        opacity: 0;
        box-shadow: 0 0 9.57px 4.785px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    40% {
        opacity: 0;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    47% {
        opacity: 0;
        box-shadow: 0 0 10.23px 5.115px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    43% {
        opacity: 0;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 11.55px 5.775px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    11% {
        opacity: 0;
        box-shadow: 0 0 12.21px 6.105px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    18% {
        opacity: 0;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    39% {
        opacity: 0;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    32% {
        opacity: 0;
        box-shadow: 0 0 13.53px 6.765px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    11% {
        opacity: 0;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    91% {
        opacity: 0;
        box-shadow: 0 0 14.19px 7.095px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    86% {
        opacity: 0;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    2% {
        opacity: 0;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    21% {
        opacity: 0;
        box-shadow: 0 0 15.51px 7.755px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    1% {
        opacity: 0;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    28% {
        opacity: 0;
        box-shadow: 0 0 16.17px 8.085px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    50% {
        opacity: 0;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    12% {
        opacity: 0;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    22% {
        opacity: 0;
        box-shadow: 0 0 17.49px 8.745px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    10% {
        opacity: 0;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    75% {
        opacity: 0;
        box-shadow: 0 0 18.15px 9.075px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    7% {
        opacity: 0;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    35% {
        opacity: 0;
        box-shadow: 0 0 19.47px 9.735px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    41% {
        opacity: 0;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    58% {
        opacity: 0;
        box-shadow: 0 0 20.13px 10.065px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    55% {
        opacity: 0;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    9% {
        opacity: 0;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    71% {
        opacity: 0;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 21.45px 10.725px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    96% {
        opacity: 0;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    39% {
        opacity: 0;
        box-shadow: 0 0 22.11px 11.055px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    45% {
        opacity: 0;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    90% {
        opacity: 0;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    48% {
        opacity: 0;
        box-shadow: 0 0 23.43px 11.715px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    78% {
        opacity: 0;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    83% {
        opacity: 0;
        box-shadow: 0 0 24.09px 12.045px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    24% {
        opacity: 0;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    79% {
        opacity: 0;
        box-shadow: 0 0 25.41px 12.705px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    69% {
        opacity: 0;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    49% {
        opacity: 0;
        box-shadow: 0 0 26.07px 13.035px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    81% {
        opacity: 0;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    45% {
        opacity: 0;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 27.39px 13.695px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    63% {
        opacity: 0;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    31% {
        opacity: 0;
        box-shadow: 0 0 28.05px 14.025px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    8% {
        opacity: 0;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    96% {
        opacity: 0;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    60% {
        opacity: 0;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    77% {
        opacity: 0;
        box-shadow: 0 0 29.37px 14.685px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    93% {
        opacity: 0;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    14% {
        opacity: 0;
        box-shadow: 0 0 30.03px 15.015px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    74% {
        opacity: 0;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    64% {
        opacity: 0;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    67% {
        opacity: 0;
        box-shadow: 0 0 31.35px 15.675px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    27% {
        opacity: 0;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    30% {
        opacity: 0;
        box-shadow: 0 0 32.01px 16.005px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    60% {
        opacity: 0;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    29% {
        opacity: 0;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    89% {
        opacity: 0;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 0;
        transform: rotate(5deg);
    }
    77% {
        opacity: 0.23;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    61% {
        opacity: 0.23;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    86% {
        opacity: 0.23;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 0;
        transform: rotate(0deg);
    }
    84% {
        opacity: 0.23;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    60% {
        opacity: 0.23;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 0;
        transform: rotate(-0.5deg);
    }
    57% {
        opacity: 0.23;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 0;
        transform: rotate(0.5deg);
    }
    20% {
        opacity: 0.23;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    96% {
        opacity: 0.23;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 0;
        transform: rotate(1deg);
    }
    57% {
        opacity: 0.23;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 0;
        transform: rotate(-1deg);
    }
    49% {
        opacity: 0.23;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 0;
        transform: rotate(1.5deg);
    }
    58% {
        opacity: 0.23;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 0;
        transform: rotate(-1.5deg);
    }
    34% {
        opacity: 0.23;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    49% {
        opacity: 0.23;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 0;
        transform: rotate(-2deg);
    }
    7% {
        opacity: 0.23;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 0;
        transform: rotate(2deg);
    }
    28% {
        opacity: 0.23;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    72% {
        opacity: 0.23;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 0;
        transform: rotate(2.5deg);
    }
    28% {
        opacity: 0.23;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 0;
        transform: rotate(-2.5deg);
    }
    68% {
        opacity: 0.23;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    78% {
        opacity: 0.23;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    54% {
        opacity: 0.23;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 0;
        transform: rotate(3deg);
    }
    90% {
        opacity: 0.23;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 0;
        transform: rotate(-3deg);
    }
    32% {
        opacity: 0.23;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    91% {
        opacity: 0.23;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 0;
        transform: rotate(-3.5deg);
    }
    99% {
        opacity: 0.23;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 0;
        transform: rotate(3.5deg);
    }
    75% {
        opacity: 0.23;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    52% {
        opacity: 0.23;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 0;
        transform: rotate(4deg);
    }
    76% {
        opacity: 0.23;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 0;
        transform: rotate(-4deg);
    }
    53% {
        opacity: 0.23;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    27% {
        opacity: 0.23;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    10% {
        opacity: 0.23;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 0;
        transform: rotate(4.5deg);
    }
    100% {
        opacity: 0.23;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 0;
        transform: rotate(-4.5deg);
    }
    12% {
        opacity: 0.45;
        box-shadow: 0 0 0.33px 0.165px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    72% {
        opacity: 0.45;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    55% {
        opacity: 0.45;
        box-shadow: 0 0 0.99px 0.495px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    94% {
        opacity: 0.45;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    13% {
        opacity: 0.45;
        box-shadow: 0 0 1.65px 0.825px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    54% {
        opacity: 0.45;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    6% {
        opacity: 0.45;
        box-shadow: 0 0 2.31px 1.155px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    27% {
        opacity: 0.45;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 2.97px 1.485px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    11% {
        opacity: 0.45;
        box-shadow: 0 0 3.63px 1.815px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    57% {
        opacity: 0.45;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    29% {
        opacity: 0.45;
        box-shadow: 0 0 4.29px 2.145px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    23% {
        opacity: 0.45;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    90% {
        opacity: 0.45;
        box-shadow: 0 0 4.95px 2.475px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    84% {
        opacity: 0.45;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    6% {
        opacity: 0.45;
        box-shadow: 0 0 5.61px 2.805px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    80% {
        opacity: 0.45;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    7% {
        opacity: 0.45;
        box-shadow: 0 0 6.27px 3.135px #fee1a7;
        height: 78px;
        transform: rotate(-0.5deg);
    }
    41% {
        opacity: 0.45;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    92% {
        opacity: 0.45;
        box-shadow: 0 0 6.93px 3.465px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    30% {
        opacity: 0.45;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    45% {
        opacity: 0.45;
        box-shadow: 0 0 7.59px 3.795px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    99% {
        opacity: 0.45;
        box-shadow: 0 0 8.25px 4.125px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    63% {
        opacity: 0.45;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    63% {
        opacity: 0.45;
        box-shadow: 0 0 8.91px 4.455px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    86% {
        opacity: 0.45;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 9.57px 4.785px #fee0a2;
        height: 76px;
        transform: rotate(-1deg);
    }
    52% {
        opacity: 0.45;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    1% {
        opacity: 0.45;
        box-shadow: 0 0 10.23px 5.115px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    47% {
        opacity: 0.45;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    71% {
        opacity: 0.45;
        box-shadow: 0 0 10.89px 5.445px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    44% {
        opacity: 0.45;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    76% {
        opacity: 0.45;
        box-shadow: 0 0 11.55px 5.775px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    70% {
        opacity: 0.45;
        box-shadow: 0 0 12.21px 6.105px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    36% {
        opacity: 0.45;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    16% {
        opacity: 0.45;
        box-shadow: 0 0 12.87px 6.435px #fede9d;
        height: 74px;
        transform: rotate(-1.5deg);
    }
    75% {
        opacity: 0.45;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    68% {
        opacity: 0.45;
        box-shadow: 0 0 13.53px 6.765px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    29% {
        opacity: 0.45;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    83% {
        opacity: 0.45;
        box-shadow: 0 0 14.19px 7.095px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    60% {
        opacity: 0.45;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    98% {
        opacity: 0.45;
        box-shadow: 0 0 14.85px 7.425px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    39% {
        opacity: 0.45;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    94% {
        opacity: 0.45;
        box-shadow: 0 0 15.51px 7.755px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    26% {
        opacity: 0.45;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    78% {
        opacity: 0.45;
        box-shadow: 0 0 16.17px 8.085px #fedc98;
        height: 72px;
        transform: rotate(-2deg);
    }
    10% {
        opacity: 0.45;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    11% {
        opacity: 0.45;
        box-shadow: 0 0 16.83px 8.415px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    87% {
        opacity: 0.45;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    74% {
        opacity: 0.45;
        box-shadow: 0 0 17.49px 8.745px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    3% {
        opacity: 0.45;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    90% {
        opacity: 0.45;
        box-shadow: 0 0 18.15px 9.075px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    7% {
        opacity: 0.45;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    9% {
        opacity: 0.45;
        box-shadow: 0 0 18.81px 9.405px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    36% {
        opacity: 0.45;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    89% {
        opacity: 0.45;
        box-shadow: 0 0 19.47px 9.735px #fedb93;
        height: 70px;
        transform: rotate(-2.5deg);
    }
    31% {
        opacity: 0.45;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    39% {
        opacity: 0.45;
        box-shadow: 0 0 20.13px 10.065px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    24% {
        opacity: 0.45;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    62% {
        opacity: 0.45;
        box-shadow: 0 0 20.79px 10.395px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    66% {
        opacity: 0.45;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    87% {
        opacity: 0.45;
        box-shadow: 0 0 21.45px 10.725px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    19% {
        opacity: 0.45;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    66% {
        opacity: 0.45;
        box-shadow: 0 0 22.11px 11.055px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    42% {
        opacity: 0.45;
        box-shadow: 0 0 22.77px 11.385px #fed98e;
        height: 68px;
        transform: rotate(-3deg);
    }
    77% {
        opacity: 0.45;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    13% {
        opacity: 0.45;
        box-shadow: 0 0 23.43px 11.715px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    51% {
        opacity: 0.45;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    96% {
        opacity: 0.45;
        box-shadow: 0 0 24.09px 12.045px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    92% {
        opacity: 0.45;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    79% {
        opacity: 0.45;
        box-shadow: 0 0 24.75px 12.375px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    43% {
        opacity: 0.45;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    9% {
        opacity: 0.45;
        box-shadow: 0 0 25.41px 12.705px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    8% {
        opacity: 0.45;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    22% {
        opacity: 0.45;
        box-shadow: 0 0 26.07px 13.035px #fed789;
        height: 66px;
        transform: rotate(-3.5deg);
    }
    91% {
        opacity: 0.45;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    27% {
        opacity: 0.45;
        box-shadow: 0 0 26.73px 13.365px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    96% {
        opacity: 0.45;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    65% {
        opacity: 0.45;
        box-shadow: 0 0 27.39px 13.695px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    69% {
        opacity: 0.45;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    76% {
        opacity: 0.45;
        box-shadow: 0 0 28.05px 14.025px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    56% {
        opacity: 0.45;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    8% {
        opacity: 0.45;
        box-shadow: 0 0 28.71px 14.355px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    64% {
        opacity: 0.45;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    62% {
        opacity: 0.45;
        box-shadow: 0 0 29.37px 14.685px #fed584;
        height: 64px;
        transform: rotate(-4deg);
    }
    89% {
        opacity: 0.45;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    4% {
        opacity: 0.45;
        box-shadow: 0 0 30.03px 15.015px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    80% {
        opacity: 0.45;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    54% {
        opacity: 0.45;
        box-shadow: 0 0 30.69px 15.345px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    91% {
        opacity: 0.45;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    12% {
        opacity: 0.45;
        box-shadow: 0 0 31.35px 15.675px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    26% {
        opacity: 0.45;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    68% {
        opacity: 0.45;
        box-shadow: 0 0 32.01px 16.005px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    35% {
        opacity: 0.45;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    58% {
        opacity: 0.45;
        box-shadow: 0 0 32.67px 16.335px #fdd47f;
        height: 62px;
        transform: rotate(-4.5deg);
    }
    14% {
        opacity: 0.45;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 60px;
        transform: rotate(5deg);
    }
    4% {
        opacity: 0.32;
        box-shadow: 0 0 0.66px 0.33px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    45% {
        opacity: 0.32;
        box-shadow: 0 0 1.32px 0.66px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 1.98px 0.99px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    5% {
        opacity: 0.32;
        box-shadow: 0 0 2.64px 1.32px #fee3ac;
        height: 80px;
        transform: rotate(0deg);
    }
    81% {
        opacity: 0.32;
        box-shadow: 0 0 3.3px 1.65px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    15% {
        opacity: 0.32;
        box-shadow: 0 0 3.96px 1.98px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    4% {
        opacity: 0.32;
        box-shadow: 0 0 4.62px 2.31px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    94% {
        opacity: 0.32;
        box-shadow: 0 0 5.28px 2.64px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    60% {
        opacity: 0.32;
        box-shadow: 0 0 5.94px 2.97px #fee1a7;
        height: 78px;
        transform: rotate(0.5deg);
    }
    88% {
        opacity: 0.32;
        box-shadow: 0 0 6.6px 3.3px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    58% {
        opacity: 0.32;
        box-shadow: 0 0 7.26px 3.63px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    74% {
        opacity: 0.32;
        box-shadow: 0 0 7.92px 3.96px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    39% {
        opacity: 0.32;
        box-shadow: 0 0 8.58px 4.29px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    99% {
        opacity: 0.32;
        box-shadow: 0 0 9.24px 4.62px #fee0a2;
        height: 76px;
        transform: rotate(1deg);
    }
    86% {
        opacity: 0.32;
        box-shadow: 0 0 9.9px 4.95px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    45% {
        opacity: 0.32;
        box-shadow: 0 0 10.56px 5.28px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    7% {
        opacity: 0.32;
        box-shadow: 0 0 11.22px 5.61px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    37% {
        opacity: 0.32;
        box-shadow: 0 0 11.88px 5.94px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 12.54px 6.27px #fede9d;
        height: 74px;
        transform: rotate(1.5deg);
    }
    62% {
        opacity: 0.32;
        box-shadow: 0 0 13.2px 6.6px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    73% {
        opacity: 0.32;
        box-shadow: 0 0 13.86px 6.93px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    50% {
        opacity: 0.32;
        box-shadow: 0 0 14.52px 7.26px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    93% {
        opacity: 0.32;
        box-shadow: 0 0 15.18px 7.59px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    70% {
        opacity: 0.32;
        box-shadow: 0 0 15.84px 7.92px #fedc98;
        height: 72px;
        transform: rotate(2deg);
    }
    44% {
        opacity: 0.32;
        box-shadow: 0 0 16.5px 8.25px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    90% {
        opacity: 0.32;
        box-shadow: 0 0 17.16px 8.58px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    17% {
        opacity: 0.32;
        box-shadow: 0 0 17.82px 8.91px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 18.48px 9.24px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    89% {
        opacity: 0.32;
        box-shadow: 0 0 19.14px 9.57px #fedb93;
        height: 70px;
        transform: rotate(2.5deg);
    }
    6% {
        opacity: 0.32;
        box-shadow: 0 0 19.8px 9.9px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    11% {
        opacity: 0.32;
        box-shadow: 0 0 20.46px 10.23px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    15% {
        opacity: 0.32;
        box-shadow: 0 0 21.12px 10.56px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    27% {
        opacity: 0.32;
        box-shadow: 0 0 21.78px 10.89px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    85% {
        opacity: 0.32;
        box-shadow: 0 0 22.44px 11.22px #fed98e;
        height: 68px;
        transform: rotate(3deg);
    }
    50% {
        opacity: 0.32;
        box-shadow: 0 0 23.1px 11.55px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 23.76px 11.88px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    57% {
        opacity: 0.32;
        box-shadow: 0 0 24.42px 12.21px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    60% {
        opacity: 0.32;
        box-shadow: 0 0 25.08px 12.54px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    52% {
        opacity: 0.32;
        box-shadow: 0 0 25.74px 12.87px #fed789;
        height: 66px;
        transform: rotate(3.5deg);
    }
    30% {
        opacity: 0.32;
        box-shadow: 0 0 26.4px 13.2px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    3% {
        opacity: 0.32;
        box-shadow: 0 0 27.06px 13.53px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    99% {
        opacity: 0.32;
        box-shadow: 0 0 27.72px 13.86px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    97% {
        opacity: 0.32;
        box-shadow: 0 0 28.38px 14.19px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    91% {
        opacity: 0.32;
        box-shadow: 0 0 29.04px 14.52px #fed584;
        height: 64px;
        transform: rotate(4deg);
    }
    41% {
        opacity: 0.32;
        box-shadow: 0 0 29.7px 14.85px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    42% {
        opacity: 0.32;
        box-shadow: 0 0 30.36px 15.18px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    30% {
        opacity: 0.32;
        box-shadow: 0 0 31.02px 15.51px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    52% {
        opacity: 0.32;
        box-shadow: 0 0 31.68px 15.84px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    64% {
        opacity: 0.32;
        box-shadow: 0 0 32.34px 16.17px #fdd47f;
        height: 62px;
        transform: rotate(4.5deg);
    }
    40% {
        opacity: 0.32;
        box-shadow: 0 0 33px 16.5px #fdd27a;
        height: 60px;
        transform: rotate(5deg);
    }
}

@media (min-width: 400px) {
    .flicker {
        left: 48%;
    }
}

@media (min-width: 480px) {
    .flicker {
        left: 48.5%;
    }
}

@media (min-width: 650px) {
    .flicker {
        left: 49%;
    }
}

@media (min-width: 992px) {
    .flicker {
        left: 47.5%;
        top: 105px;
    }
}

@media (min-width: 1024px) {
    .flicker {
        top: 100px;
    }
}

@media (min-width: 1124px) {
    .flicker {
        top: 113px;
    }
}

@media (min-width: 1200px) {
    .flicker {
        top: 120px;
    }
}

@media (min-width: 1280px) {
    .flicker {
        left: 48%;
    }
}

.candle_modal {


    .modal-content {
        background: linear-gradient(233.72deg, #050e2f 25.23%, #102c95 108.98%);
    }

    .call-popup-title {
        font-size: 36px;
        line-height: 32px;
        color: #fff;
        text-align: center;
    }

    .family-hero__preset-amounts {
        display: flex;
    }

    span.family-hero__currency {
        color: #fff;
    }

    .call-popup-text p {
        color: #fff;
        text-align: center;
    }

    button.family-hero__amount-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    small.text-muted {
        color: #fff;
        text-align: center;
        margin: 0 auto;
        display: block;
        padding-top: 20px;
    }

    .family-hero__donate-btn {
        position: absolute;
        right: 0;
        top: 31px;
        transform: translateY(-50%);
        border: 1px solid transparent;
        border-radius: var(--rounded-full);
        padding: 18px 67px;
        border-bottom-right-radius: var(--rounded-full);
        border-top-right-radius: var(--rounded-full);
        border-top-left-radius: 268px;
        border-bottom-left-radius: 0;
    }


}

.time-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 640px;
    width: calc(100% - 16px);
    padding: 48px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white-100);
    font-weight: 600;
    text-align: center;
    border: transparent;
    border-radius: 24px;
    background: linear-gradient(233.72deg, #050e2f 25.23%, #102c95 108.98%);

    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
    z-index: 12;
}

.time-popup.time-popup--active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.time-popup::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.time-popup__close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white-100);
}

.time-popup__content {
    max-width: 512px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

.time-popup__title {
    font-size: 36px;
    line-height: 32px;
}

.time-popup__text {
    font-size: 18px;
    margin-top: 8px;
}

.time-popup__list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
    justify-items: center;
}

.time-popup__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 14, 47, 1);
    border: 1px solid rgba(33, 55, 134, 1);
    border-radius: 24px;
}

.time-popup__item:hover {
    background: #001561;
}

.time-popup__item:nth-child(5):last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
}

.time-popup__time {
    font-weight: 700;
    font-size: 24px;
}

.time-popup__number {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.88);
}

.time-popup__bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.time-popup__bottom > button {
    color: #0B0B0B;

}

.time-popup__note {
    font-size: 16px;
    color: #FFFFFF99;
}

/*Модифікатор*/

.time-popup__item---white {
    background-color: var(--color-white-100);
    color: rgba(0, 21, 97, 1);
}

.time-popup__item---white .time-popup__number {
    color: var(--color-blue-500)
}

.time-popup__item---white:hover {
    color: var(--color-white-100);
}

.time-popup__item---white:hover .time-popup__number {
    color: rgba(255, 255, 255, 0.88);
}

.reminiscence {
    background-color: var(--color-blue-50);
    padding: 32px 0;
}

.reminiscence__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reminiscence__form-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    background: var(--color-white-100);
    box-shadow: 0px 4px 58.3px -8px rgba(204, 205, 237, 1);
    border-radius: var(--rounded-2xl);
}

.reminiscence__text-block {
    max-width: 324px;
}

.reminiscence__text-block > h3 {
    color: var(--color-blue-500);
    margin-bottom: 24px;
}

.reminiscence__text {
    color: var(--color-gray-monochrome-700);
    max-width: 296px;
}

.reminiscence__form {
    display: flex;
    flex-direction: column;
    gap: 24px;

    color: var(--color-gray-800);
}

.reminiscence__form > button {
    max-width: 195px;
    margin-left: auto;
}

.reminiscence__form-input-block {
    position: relative;
}

.reminiscence__form-label {
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--color-gray-800);
}

.reminiscence__form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--rounded-md);
    border: 1px solid var(--color-gray-400);
    font-size: 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.reminiscence__form-textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
    height: 112px;
}

.reminiscence__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reminiscence__item {
    padding: 16px;
    background: linear-gradient(120.26deg, #050E2F 12.16%, #1D51C3 91.29%);
    border-radius: var(--rounded-2xl);
}

.reminiscence__item-text {
    max-width: 280px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 18px;
}

.reminiscence__item-name {
    font-weight: 500;
    font-size: 18px;
}

.reminiscence__item-date {
    font-weight: 500;
    font-size: 13px;
    color: var(--color-white-600);
}

/* Responsive styles */

@media screen and (min-width: 768px) {
    .reminiscence__form-block {
        flex-direction: row;
    }

    .reminiscence__text-block {
        flex: 1;
    }

    .reminiscence__form {
        flex: 1.5;
        max-width: 400px;
    }

    .form-section__input {
        font-size: 15px;
    }

    .reminiscence__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .reminiscence__item {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media screen and (min-width: 1024px) {
    .reminiscence__form-block {
        justify-content: center;
        align-items: center;
    }

    .reminiscence__item {
        flex: 1 1 calc(33.333% - 20px);
        max-width: calc(33.333%);
    }

    .reminiscence__form-label {
        margin-bottom: 6px;
    }
}

@media screen and (min-width: 1280px) {
    .reminiscence__item {
        padding: 24px;
    }

    .reminiscence__item-text {
        max-width: 100%;
        font-size: 20px;
    }

    .reminiscence__item-name {
        font-size: 20px;
    }

    .reminiscence__item-date {
        font-size: 16px;
    }

    .reminiscence__form-block {
        gap: 64px;
    }
}

.hero-stories {
    padding: 100px 0 32px 0;
}

.hero-stories > .container > h1 {
    display: none;
}

.hero-stories__content {
    max-width: 600px;
    position: absolute;
    top: auto;
    bottom: 56px;
    left: 16px;
    z-index: 4;
}

.hero-stories__content .title-h4{
    margin-bottom: 8px;
}

.hero-stories__content .button-outline, .hero-news__content .button-outline{
    width: auto;
    display: inline-block;
}

.hero-stories__description {
    padding-right: 15px;
    margin-bottom: 16px;
}

.hero-stories__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 2px;
    border-radius: 100px;
    border: none;
    display: inline-block;
    z-index: 1;
}

.hero-stories__badge span {
    position: relative;
    display: block;

    padding: 8px 16px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;

    z-index: 2;

}

/* === Варіації === */

/* technic */

.hero-stories__badge.hero-stories__badge--technic {
    background: linear-gradient(180deg, #536F0D 0%, #A0D518 100%);
}

.hero-stories__badge--technic.hero-stories__badge span {
    background: var(--color-olive-700);
    color: #F3FFD6;
}

/* technic */

/* medicine */

.hero-stories__badge--medicine.hero-stories__badge {
    background: linear-gradient(180deg, #008837 0%, #00D355 100%);
}

.hero-stories__badge--medicine.hero-stories__badge span {
    background: #21526b;
    color: rgba(193, 255, 222, 1);
}

/* medicine */

/* general */

.hero-stories__badge--general.hero-stories__badge {
    background: linear-gradient(0deg, #94ABFE 0%, #1A4AFF 100%);
}

.hero-stories__badge--general.hero-stories__badge span {
    background: #283b81;
    color: #F3FFD6;
}

/* general */

/* family */

.hero-stories__badge--family.hero-stories__badge {
    background: linear-gradient(180deg, #072BAF 0%, #5479FF 100%);
}

.hero-stories__badge--family.hero-stories__badge span {
    background: var(--color-blue-900);
    color: #C0CEFF;
}

/* family */

/* house */

.hero-stories__badge--house.hero-stories__badge {
    background: linear-gradient(180deg, #072BAF 0%, #5479FF 100%);
}

.hero-stories__badge--house.hero-stories__badge span {
    background: var(--color-blue-900);
    color: #C0CEFF;
}

/* house */

/* defenders */

.hero-stories__badge--defenders.hero-stories__badge {
    background: rgba(255, 255, 255, 0.6)
}

.hero-stories__badge--defenders.hero-stories__badge span {
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-white-100);
}

/* defenders */

/* Responsive styles */

@media (min-width: 768px) {
    .hero-stories > .container > h1 {
        display: block;
        color: var(--color-blue-500);
        margin-bottom: 24px;
    }
}

@media (min-width: 1024px) {
    .hero-stories {
        padding: 112px 0 40px 0;
    }

    .hero-stories__content {
        left: 32px;
        bottom: 32px;
    }
}

@media (min-width: 1280px) {
    .hero-stories__content {
        left: 64px;
        bottom: 64px;
    }
}

.stories-list {
    padding-top: 32px;
    padding-bottom: 56px;
}

.stories__list__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}

.stories-list__item {
    width: 100%;
    max-width: 300px;
}

.fees-card__text--text-line-clamp-2 {
    -webkit-line-clamp: 2;
}

/* Responsive Styles */

@media (min-width: 768px) {
    .stories-list {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    /*.stories__list__list {*/
    /*  grid-template-columns: repeat(2, 1fr);*/
    /*  margin-bottom: 24px;*/
    /*}*/
    .stories-list__item {
        width: calc(50% - 8px);
        min-width: 280px;
    }
}

@media (min-width: 1280px) {
    .stories-list__item {
        width: calc(25% - 24px);
        min-width: 280px;
    }

    .fees-card__text.fees-card__text--text-line-clamp-2 {
        -webkit-line-clamp: 2;
    }
}

.stories-other {
  padding: 40px 0;
  background-color: #F4F6FC;
}

.stories-other__inner {}

.stories-other__all {
  display: flex;
  gap: 4px;
  text-decoration: none;
  color: var(--color-blue-500);
  font-weight: 600;
  font-size: 18px;
  margin-top: 5px;
  position: relative;
}

.stories-other__all-icon {
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
}

.stories-other__list {
  margin-top: 16px;
  display: flex;
  gap: 24px;
  overflow-x: auto;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stories-other__list .news-list__link{
    display: block;
    width: 100%;
}

.stories-other__item {
  width: 320px;
  height: 380px;
  flex-shrink: 0;
}

/* Responsive styles */

@media screen and (min-width:768px) {
  .stories-other__title-wrap {
    display: flex;
    justify-content: space-between;
  }

  .stories-other__list {
    gap: 10px;
  }

  .stories-other__item {
    width: 296px;
    height: 380px;
  }
}

@media screen and (min-width:1280px) {

  .stories-other__list {
    gap: 10px;
  }

  .stories-other__item {
    width: 302px;
    height: 380px;
  }
}

.reports-hero {
    padding: 148px 0 64px 0;
    background: linear-gradient(120.26deg, #050E2F 12.16%, #1D51C3 91.29%);
}

.reports-hero__inner > h1 {
    margin-bottom: 24px;
}

.reports-hero__description {
    font-size: var(--font-size-md);
    margin-bottom: 24px;
}

.reports-hero__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reports-hero__cards-item {
    font-weight: 600;
    background: linear-gradient(82.22deg, #00145B 50.65%, #002AC1 101.16%);
    border: 1px solid rgba(24, 75, 255, 1);
    border-radius: var(--rounded-xl);
    padding: 24px;
}

.reports-hero__card-value {
    font-size: var(--font-size-3xl);
}

/* Responsive styles */

@media (min-width: 768px) {
    .reports-hero__inner > h1 {
        text-align: center;
    }

    .reports-hero__description {
        text-align: center;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .reports-hero__cards {
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width: 1024px) {
    .reports-hero {
        padding: 160px 0 64px 0;
    }

    .reports-hero__card-value {
        font-size: var(--font-size-3xl);
    }

    .reports-hero__cards {
        gap: 24px;
    }

    .reports-hero__cards-item {
        width: 254px;
    }
}

.details {
  padding: 40px 0;
}

.details__inner {}

.details__inner>h2 {
  margin-bottom: 16px;
}

.details__text {
  max-width: 655px;
  margin: 0 auto;
  margin-bottom: 24px;
  color: var(--color-gray-800);
  font-weight: 500;
  font-size: var(--font-size-md);
  line-height: 1.14;
  text-align: center;
}

.details__reports {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.details__reports-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
  padding: 16px;
  color: var(--color-blue-500);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--rounded-2xl);
}

.details__year {
  font-weight: 600;
  font-size: var(--font-size-4xl);
}

.details__numbers-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding: 16px;
  background: rgba(246, 246, 248, 1);
  border-radius: var(--rounded-sm);
}

.details__numbers-item {
  font-weight: 600;
}

.details__number {}

.details__number-value {
  font-size: var(--font-size-xl);
}

.details__number-text {
  font-size: var(--font-size-xxs);
}

/* Responsive styles */

@media (min-width: 768px) {
    .details__reports {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .details__reports-item {
        flex: 1;
        max-width: 198px;
        min-width: 308px;
    }
}

@media (min-width: 1280px) {
  .details__inner>h2 {
    margin-bottom: 24px;
  }

  .details__text {
    margin-bottom: 50px;
  }
}

.fundraising-list {
    padding: 100px 0 32px 0;
}

.fundraising-list__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.fundraising-list__inner > h1 {
    color: var(--color-blue-500);
}

.fundraising-list__description {
    margin: 0 auto;
    max-width: 600px;
    color: var(--color-blue-500);
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -1%;
    text-align: center;
}

.fundraising-list__list {
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.fundraising-list__item {
    width: 100%;
    max-width: 300px;
}

/* Responsive styles */

@media (min-width: 768px) {
    .fundraising-list__item {
        width: calc(50% - 8px);
        min-width: 280px;
    }
}

@media (min-width: 1024px) {
    .fundraising-list {
        padding-top: 112px;
    }

    .fundraising-list__list {
        width: 100%;
    }
}

@media screen and (min-width: 1280px) {
    .fundraising-list {
        padding-bottom: 80px;
    }

    .fundraising-list__inner > h1 {
        font-size: 56px;
        line-height: 64px;
        letter-spacing: -1%;
    }

    .fundraising-list__description {
        font-size: 20px;
        line-height: 24px;
    }

    .fundraising-list__list {
        max-width: 1240px;
        margin: 0 auto;
    }

    .fundraising-list__item {
        width: calc(25% - 12px);
        min-width: 280px;
    }
}

.single {
    padding-top: 100px;
}

.single__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

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

.single__text-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single__badge {
    max-width: max-content;
    display: inline-block;
    padding: 5px 16px;
    font-weight: 500;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    border-radius: var(--rounded-full);
    border: 1px solid transparent;
}

.single__amount {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: var(--color-gray-800);
}

.single__icon-first,
.single__icon-second {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single__icon-first {
    margin-bottom: 8px;
}

.single__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.single__icon-text {
    font-weight: 500;
    font-size: var(--font-size-xs);
    line-height: 1.15;
    color: var(--color-gray-monochrome-700);
}

.single__description {
    font-weight: 500;
    font-size: var(--font-size-md);
    color: var(--color-gray-800);
    text-align: justify;
}

.single__images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single__image {
    border-radius: 16px;
    object-fit: cover;

}

.single__card {
    position: sticky;
    top: 70px;
    padding: 24px;
    border-radius: var(--rounded-2xl);
}

.single__card-title {
    font-weight: 600;
    font-size: var(--font-size-xl);
    line-height: 1.14;
}

.single__button-wrapper {
    margin-top: 32px;
}

.fees-done {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--rounded-full);
    padding: 8px;
}

.fees-done__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fees-done__icon {
    width: 48px;
    height: 48px;
}

.fees-done__phrase {
    color: var(--color-white-600);
    font-weight: 600;
    font-size: var(--font-size-xs);
    line-height: 24px;
}

.fees-done__amount {
    font-weight: 600;
    font-size: var(--font-size-md);
    line-height: 22px;
}

.fees-done__note {
    margin-top: 8px;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
}

/* Модифікатори кольору в залежності від типу збору/історії */

/* Для  іконок */

.single--medicine {
    color: var(--color-green-300);
}

.single--general {
    color: var(--color-orange-400);
}

.single--house {
    color: var(--color-blue-200);
}

.single--family {
    color: var(--color-blue-200);
}

.single--technic {
    color: var(--color-salate-200);
}

/* Для фону картки */

.single__card--medicine {
    background-color: var(--color-green-300);
}

.single__card--general {
    background-color: var(--color-orange-400);
}

.single__card--house {
    background-color: var(--color-blue-200);
}

.single__card--technic {
    background-color: var(--color-salate-200);
}

.single__card--family {
    background-color: var(--color-blue-700);
}

/* Для бейджу */

.single__badge--medicine.single__badge {
    color: var(--color-green-600);
    background: linear-gradient(var(--color-white-100), var(--color-white-100)) padding-box,
    linear-gradient(180deg, #008837 0%, #00D355 100%) border-box;
}

.single__badge--technic.single__badge {
    color: #749a14;
    background: linear-gradient(var(--color-white-100), var(--color-white-100)) padding-box,
    linear-gradient(180deg, #536F0D 0%, #A0D518 100%);
}

.single__badge--general.single__badge {
    color: var(--color-orange-700);
    background: linear-gradient(var(--color-white-100), var(--color-white-100)) padding-box,
    linear-gradient(0deg, #FFA021 0%, #B66B06 100%) border-box;
}

.single__badge--house.single__badge {
    color: var(--color-blue-300);
    background: linear-gradient(var(--color-white-100), var(--color-white-100)) padding-box,
    linear-gradient(180deg, #072BAF 0%, #5479FF 100%) border-box;
}

/* Для картки завершеного збору */

.fees-done--medicine {
    background: var(--color-blue-500);
}

.fees-done--general {
    background: var(--color-orange-800);
}

.fees-done--house {
    background: var(--color-blue-700);
}

.fees-done--technic {
    background: var(--color-olive-700);
}

.fees-done--family {
    background: var(--color-blue-900);
}

/* також для картки завершеного збору при наявності картинки на фоні картки */

.fees-card--image-bg .fees-done {
    background: rgba(0, 0, 0, 0.4);
}

/* Для тексту в кнопці */

.fees-card--house > .single__button-wrapper > a {
    color: var(--color-blue-900);
}

.fees-card--medicine > .single__button-wrapper > a {
    color: var(--color-blue-300);
}

.fees-card--family > .single__button-wrapper > a {
    color: var(--color-blue-700);
}

.fees-card--technic > .single__button-wrapper > a {
    color: var(--color-olive-500);
}


/* Responsive styles */

@media (min-width: 768px) {
    .single__inner {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .single__description {
        max-width: 555px;
    }

    .single__card {
        height: fit-content;
        max-width: 354px;
    }


}

@media (min-width: 1024px) {
    .single {
        background-color: #F6F6F8;
        padding-bottom: 64px;
        padding-top: 128px;
    }

    .single__inner {
        grid-template-columns: 1.25fr 0.75fr;
        align-items: start;
    }

    .single__text {
        width: 100%;
        align-items: center;
        padding: 40px 8% 64px 8%;
        border-radius: var(--rounded-2xl);
        background-color: #fff;
    }
}

@media (min-width: 1280px) {
    .single__inner {
        grid-template-columns: 1.4fr 0.6fr;
        align-items: start;
    }
}

.family-hero {
    background: linear-gradient(120.26deg, #050E2F 12.16%, #1D51C3 91.29%);
    padding: 148px 0 80px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.family-hero__inner {
    padding: 0 8px;
    max-width: 640px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.family-hero__inner > h1 {
    margin-bottom: 24px;
}

.family-hero__payment-options {
    display: flex;
    background: transparent;
    border: 1px solid var(--color-white-100);
    border-radius: 50px;
    padding: 5px;
    margin: 0 0 40px 0;
    position: relative;
}

.family-hero__payment-options::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 50%;
    height: calc(100% + 2px);
    background: #f59e0b;
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1;
}

.family-hero__payment-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 46px;
    background: transparent;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.family-hero__payment-btn:first-child {
    padding: 10px 18px 10px 9px;
}

.family-hero__payment-btn:last-child {
    text-wrap: nowrap;
    padding: 10px 9px 10px 18px;
}

.family-hero__payment-options--monthly::before {
    transform: translateX(calc(100% + 2px));
}

.family-hero__payment-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.family-hero__donation-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.family-hero__amount-input {
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: var(--rounded-lg);
    border: 1px solid var(--color-white-100);
    padding: 16px 24px;
    gap: 1px;
}

.family-hero__input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0;
    outline: none;
}

.family-hero__input::placeholder {
    color: var(--color-white-100);
}

.family-hero__input::-webkit-outer-spin-button,
.family-hero__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.family-hero__input[type=number] {
    -moz-appearance: textfield;
}

.family-hero__currency {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.family-hero__input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.family-hero__donate-btn {
    background: white;
    color: #1e3a8a;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.family-hero__donate-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

.family-hero__preset-amounts {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.family-hero__amount-btn {
    background: transparent;
    border: 1px solid var(--color-white-100);
    border-radius: 50px;
    color: white;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.family-hero__amount-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.family-hero__amount-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {

    .family-hero__payment-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .family-hero__amount-input {
        padding: 14px 24px;
        border-radius: var(--rounded-lg);
        border: 1px solid var(--color-white-100);
    }

    .family-hero__input {
        text-align: left;
        padding: 0;
        font-size: 1.25rem;
    }

    .family-hero__donate-btn {
        width: 100%;
        padding: 16px 24px;
        border-radius: 12px;
        font-size: 1.1rem;
    }

    .family-hero__preset-amounts {
        gap: 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .family-hero__amount-btn {
        padding: 14px 16px;
        font-size: 0.9rem;
        border-radius: 50px;
        border: 1px solid var(--color-white-100);
    }
}

@media (max-width: 480px) {
    .family-hero {
        padding: 148px 0 64px 0;
    }

    .family-hero__container {
        padding: 0 16px;
    }

    .family-hero__title {
        font-size: 1.75rem;
        margin-bottom: 24px;
    }

    .family-hero__payment-options {
        margin-bottom: 24px;
    }

    .family-hero__preset-amounts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
    }

    .family-hero__amount-btn {
        padding: 12px 8px;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.15;
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .family-hero__donation-form {
        gap: 24px;
    }
}

@media screen and (min-width: 1024px) {
    .family-hero {
        padding: 160px 0 64px 0;
    }

    .family-hero__payment-btn:last-child,
    .family-hero__payment-btn:first-child {
        font-size: 20px;
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .family-hero__payment-btn:hover:not(.family-hero__payment-btn--active) {
        background: rgba(255, 255, 255, 0.1);
    }

    .family-hero__amount-input {
        display: grid;
        grid-template-columns: minmax(50px, 130px) auto;
        justify-content: start;
        gap: 8px;
        border-radius: var(--rounded-full);
        padding: 16px 24px;
        font-size: 24px;
        line-height: 1.15;
    }

    
    .family-hero__input {
        min-width: 130px;
        padding-left: 8px;
        border-radius: var(--rounded-full);
        font-size: 24px;
        line-height: 1.15;
    }

    .family-hero__donate-btn {
        position: absolute;
        right: 0;
        top: 31px;
        transform: translateY(-50%);
        border: 1px solid transparent;
        border-radius: var(--rounded-full);
        padding: 18px 86px;

        border-bottom-right-radius: var(--rounded-full);
        border-top-right-radius: var(--rounded-full);
        border-top-left-radius: 268px;
        border-bottom-left-radius: 0;
    }

    .family-hero__preset-amounts {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .family-hero__amount-btn {
        font-size: 18px;
        line-height: 1.15;
    }
}

.family-details {
    padding: 40px 0;
}

.family-details__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1240px;
    background: linear-gradient(95.36deg, #F9FAFE 24.96%, #DEE4F7 120.06%);
    border-radius: 24px;
    padding: 32px 40px;
}

.family-details__tabs {
    width: max-content;
    height: 42px;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 8px;
    display: flex;
    gap: 16px;
    border-radius: 6px;
    color: #0F172A;
    background-color: #E8E8F1;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.family-details__tabs-item {
    width: 52px;
    height: 32px;
    color: #0F172A;
    border-radius: 3px;
}

.family-details__tabs-item > label {
    display: flex;
    padding: 6px 12px;
    cursor: pointer;
}

.family-details__radio-eur,
.family-details__radio-uah,
.family-details__radio-usd {
    display: none;
}

.family-details__tabs-item:has(.family-details__radio-uah:checked),
.family-details__tabs-item:has(.family-details__radio-eur:checked),
.family-details__tabs-item:has(.family-details__radio-usd:checked) {
    background: var(--color-white-100, #fff);
}

.family-details__list {
    color: #0F172A;
}

.family-details-item {
    display: none;
}

.family-details__inner:has(.family-details__radio-uah:checked) .family-details-item--uah,
.family-details__inner:has(.family-details__radio-eur:checked) .family-details-item--eur,
.family-details__inner:has(.family-details__radio-usd:checked) .family-details-item--usd {
    display: block;
}

.family-details-item__info {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: start;
    font-size: 24px;
}

.family-details-item__info-title {
    font-weight: 600;
}

.family-details-item__info-text {
    font-weight: 400;
}

.family-details-item__info-text--break {
    word-break: break-all;
}

.family-details__inner > button {
    max-width: 281px;
}

/* Responsive styles */

@media (min-width: 1024px) {
    .family-details {
        padding: 64px 0;
    }

    .family-details-item__info :not(:last-child) {
        margin-bottom: 8px;
    }

    .family-details-item__info {
        flex-direction: row;
    }
}

.join {
    padding: 84px 0 40px 0;
}

.join__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.join__image {
    max-height: 521px;
}

.join__content-wrapper {
    max-width: 520px;
}

.join__title {
    margin-bottom: 16px;
    color: var(--color-blue-500);
    font-weight: 700;
    font-size: 48px;
}

.join__text {
    margin-bottom: 24px;
}

.join__content > a {
    max-width: 208px;
    margin-right: auto;
}

/* Responsive styles */

@media screen and (min-width: 768px) {
    .join__inner {
        flex-direction: row;
    }

    .join__image-thumb {
        flex: 1;
        order: 2;
    }

    .join__image {
        height: 100%;
        object-fit: cover;
    }

    .join__content-wrapper {
        flex: 1;
        order: 1;
    }
}

@media screen and (min-width: 1024px) {
    .join {
        padding: 96px 0 0 0;
    }

    .join__inner {
        align-items: center;
        justify-content: space-between;
    }

    .join__image-thumb {
        max-width: 50%;
    }

    .join__image {
        width: 100%;
    }

    .join__content-wrapper {
        margin-left: auto;
    }
}

.directions {
    background: var(--color-blue-500);
    padding: 61px 0;
}

.directions__title {
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    text-align: center;

}

.directions__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.directions__item {
    padding: 24px;
    background: rgba(5, 27, 106, 1);
    border: 1px solid rgba(46, 70, 155, 1);
    border-radius: var(--rounded-2xl);
}

.directions__item-title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.14;

}

.directions__sublist {
    margin-left: 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.24;
    list-style: disc;

}

.directions__sublist-item {
}

/* responsive styles */

@media (min-width: 768px) {
    .directions__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .directions__list {
        max-width: 856px;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .directions__title {
        font-size: 36px;
    }

    .directions__item-title {
        font-size: 24px;
    }

    .directions__sublist {
        font-size: 16px;
    }
}

.already-helped {
    padding: 64px 0;
}

.already-helped__title {
    margin-bottom: 32px;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    text-align: center;
    color: var(--color-blue-500);
}

.already-helped__slider {
    height: 130px;
    margin-bottom: 32px;
    margin-left: 1px;
}

.already-helped__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(213, 218, 231, 1);
    border-radius: var(--rounded-2xl);
    background: var(--color-white-100);
    width: 100%;
    height: 100%;
    overflow: hidden;

    /*background-color: red;*/
}

.already-helped__slide-img {
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit: cover;*/
    /*object-position: center;*/

}

.already-helped__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.already-helped__item {
    border-radius: var(--rounded-2xl);
    max-height: 260px;
}

.already-helped__item:first-child {
    grid-column: 1/span 3;
}

.already-helped__item:nth-child(2) {
    grid-column: 4/span 3;
}

.already-helped__item:nth-child(3),
.already-helped__item:nth-child(4) {
    grid-column: 1/span 6;
}

.already-helped__item:nth-child(5) {
    grid-column: 1/span 3;
}

.already-helped__item:nth-child(6) {
    grid-column: 4/span 3;
}

.already-helped__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-2xl);
    overflow: hidden;
}

/* Responsive styles */

@media screen and (min-width: 768px) {
    .already-helped__slider {
        height: 150px;
    }
}

@media screen and (min-width: 1024px) {
    .already-helped__grid {
        grid-template-columns: repeat(9, 1fr);
        gap: 16px;
    }

    .already-helped__item:first-child {
        grid-column: 1/span 3;
    }

    .already-helped__item:nth-child(2) {
        grid-column: 4/span 3;
    }

    .already-helped__item:nth-child(3) {
        grid-column: 7/span 3;
    }

    .already-helped__item:nth-child(4) {
        grid-column: 1/span 4;
    }

    .already-helped__item:nth-child(5) {
        grid-column: 5/span 2;
    }

    .already-helped__item:nth-child(6) {
        grid-column: 7/span 3;
    }
}

.partners-movie {
    position: relative;
    max-height: 590px;
    min-height: 491px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    overflow: hidden;
}

.partners-movie__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.partners-movie::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.partners-movie__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.partners-movie__text {
    position: relative;
    max-width: 490px;
    z-index: 1;
}

.partners-movie__title {
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
}

.partners-movie__description {
    margin-bottom: 32px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.14;
}

.partners-movie__text > a {
    max-width: 229px;
    margin-right: auto;
}

/* Responsive styles */

@media screen and (min-width: 480px) {
    .partners-movie__title {
        max-width: 380px;
    }
}

@media screen and (min-width: 1024px) {
    .partners-movie__inner {
    }
}

@media screen and (min-width: 1280px) {
    .partners-movie__inner {
        height: 591px;
    }
}

.become-friend {
    padding: 64px 0;
}

.become-friend__inner {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 40px;
}

.become-friend__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.become-friend__item {
    border-radius: var(--rounded-md);
    overflow: hidden;
}

.become-friend__image {
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-md);
    overflow: hidden;
}

.become-friend__text {
    max-width: 446px;
}

.become-friend__title {
    margin-bottom: 16px;
}

.become-friend__description {
    margin-bottom: 24px;
}

.become-friend__text > a {
    max-width: 165px;
    margin-right: auto;
}

/* Responsive styles */

@media (min-width: 1024px) {
    .become-friend__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .become-friend__text {
        order: 1;
    }

    .become-friend__list {
        max-width: 50%;
        order: 2;
    }
}

.partners-form {
    padding: 32px 0;
}

.partners-form__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.partners-form__text-card-wrap {
    max-width: 520px;
}

.partners-form__text {
    padding-bottom: 32px;
}

.partners-form__title {
    margin-bottom: 24px;
    color: var(--color-blue-500);
}

.partners-form__cards-invite {
    margin-bottom: 16px;
    color: var(--color-blue-500);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.05;

}

.partners-form__cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.partners-form__cards-item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--rounded-2xl);
    background: rgba(243, 246, 255, 1);
}

.partners-form__icon {
    width: 32px;
    height: 32px;
}

.partners-form__item-text {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.14;
    color: var(--color-gray-800);
}

.partners-form__form {
    width: 100%;
    max-width: 496px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    color: var(--color-black);
    border-radius: var(--rounded-2xl);
    box-shadow: 0px 4px 58.3px -8px rgba(204, 205, 237, 1);
}

.form-select-wrapper {
    position: relative;
}

.form-select {
    color: #6C6E75;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-select-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(90deg);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.26711 11.8159C6.03743 11.577 6.04488 11.1972 6.28374 10.9675L9.43395 8L6.28374 5.0325C6.04488 4.80282 6.03743 4.423 6.26711 4.18413C6.49679 3.94527 6.87661 3.93782 7.11548 4.1675L10.7155 7.5675C10.8331 7.68062 10.8996 7.83679 10.8996 8C10.8996 8.16321 10.8331 8.31938 10.7155 8.4325L7.11548 11.8325C6.87661 12.0622 6.49679 12.0547 6.26711 11.8159Z' fill='%236C6E75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.form-select-wrapper--open::after {
    transform: translateY(-50%) rotate(-90deg);
}

.partners-form__form > button {
    max-width: 150px;
    margin-left: auto;
}

/* Responsive styles */

@media screen and (min-width: 1024px) {
    .partners-form__inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .partners-form__text-card-wrap {
        max-width: 520px;
    }
}

@media screen and (min-width: 1280px) {
    .partners-form {
        padding: 64px 0;
    }

    .partners-form__cards-item {
        padding: 24px;
    }

    .partners-form__item-text {
        font-size: 18px;
    }

    .partners-form__form {
        padding: 32px 48px;
    }
}

/* Модифікатор для використання на сторінці Друзів залізної родини */

@media (min-width: 1280px) {
    .partners-form__inner--center {
        justify-content: center;
        gap: 64px;
    }
}

.hero-news__content {
    max-width: 736px;
    position: absolute;
    top: auto;
    bottom: 56px;
    left: 16px;
    z-index: 4
}

.hero-news__content > h4 {
    color: var(--color-white-100);
}

.hero-news__details {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: start;
    margin-bottom: 8px;
    color: var(--color-gray-monochrome-100);
    font-size: 18px;
    line-height: 16px;
}

.hero-news__details .dot {
    height: 3px;
    width: 3px;
    border-radius: var(--rounded-full);
    background-color: var(--color-gray-monochrome-100);
}

.hero-news__details .tag:hover{
    color:white;
    opacity:0.8;
}

@media screen and (min-width: 1280px) {
    .hero-news__content {
        bottom: 32px;
        left: 32px;
    }
}

.news-list {
    padding: 32px 0 64px 0;
}

.news-list__list {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 16px;
    justify-content: center;
    margin-left: -8px;
    margin-right: -8px;
}

.news-list__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 360px;
}

.news-card__image {
    width: 100%;
    transition: opacity 0.2s ease;
}

.news-card__image:hover{
    opacity: 0.85;
}

.news-list__img {
    width: 100%;
    max-height: 225px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    object-fit: cover;
    object-position: center;
}

.news-list__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: start;
}

.news-list__details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 4px;
    font-size: 13px;
    color: #8D9092;
    margin-bottom: 4px;
    line-height: 1.1;
}

.news-list__details .dot {
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background-color: #8D9092;
}

.news-list__item-title {
    color: var(--color-blue-500);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */

@media (min-width: 768px) {
    .news-list__item {
        width: calc(50% - 8px);
        min-width: 280px;
    }

    .news-list__img {
        height: 225px;
    }
}

@media (min-width: 1024px) {
    .news-list__item {
        width: calc(33% - 16px);
        min-width: 280px;
    }
}

@media (min-width: 1280px) {
    .news-list__item {
        width: calc(25% - 16px);
        min-width: 280px;
    }
}

.news-single__text-wrap {
    max-width: 555px;
    margin-bottom: 16px;
}

.single-news__top-img {
    margin-bottom: 8px;
    border-radius: var(--rounded-2xl);
}

.news-single__title {
    margin-top: 4px;
    font-weight: 700;
}

.news-single__images {
    column-count: 1;
    column-gap: 6px;
    justify-items: stretch;
    justify-content: start;
}

.news-single__images .single__image-link{
    display: block;
    margin-bottom: 6px;
    break-inside: avoid;
    border-radius: 10px;
    overflow: hidden;
}

.news-single__images .single__image {
    width: 100%;
    display: block;
    border-radius: inherit;
    transition: transform 0.3s ease;
    object-fit: cover;
}


.news-single__divider {
    background: #58A3FF;
}

.news-single--txt-blue {
    color: #58A3FF;
}

/* Responsive */

@media (min-width: 1280px) {
    .news-single__images {
        column-count: 3;
    }

    .news-single__title {
        margin-top: 8px;
        font-weight: 700;
    }
}

.other-news__item {
    min-width: 298px;
    flex: 1;
    height: 100%;
}

.friends-list {
    padding-top: 84px;
    margin-bottom: 24px;
}

.friends-list__inner {
}

.friends-list__title {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    text-align: center;
    color: var(--color-blue-500);
}

.friends-list__description {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.friends-list__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding-top: 32px;
}

.friends-list__item {
    width: min(298px, 360px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--rounded-2xl);
    overflow: hidden;
}

.friends-list__image {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: top;
}

.friends-list__content {
    position: relative;
    height: 131px;
    display: flex;
    align-items: end;
}

.friends-list__badge {
    width: max-content;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: var(--rounded-full);
}

/* Модифікатори фону бейджу */

.friends-list__badge--patron {
    background: linear-gradient(180deg, #0AEE84 0%, #0DB265 87.82%);
}

.friends-list__badge--honorary {
    background: linear-gradient(180deg, #19D2FB 12.18%, #09A7CA 100%);
}

.friends-list__badge--star {
    background: linear-gradient(180deg, #FBAA19 0%, #E76C00 122.78%);
}

.friends-list__badge--position {
    position: relative;
    top: 0;
    left: 0;
    transform: translateX(0);
}

/* Модифікатори фону бейджу */

.friends-list__badge-icon {
    width: 20px;
    height: 20px;
}

.friends-list__badge span {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.14;
}

.friends-list__name-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    line-height: 1.14;
    text-align: center;
}

.friends-list__name {
    font-size: 28px;
    color: var(--color-blue-500);
    display: -webkit-box;
}

.friends-list__profile {
    font-size: 14px;
    color: var(--color-gray-500);
    max-width: 260px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */

@media (min-width: 1024px) {
    .friends-list {
        padding-top: 96px;
    }
}

@media (min-width: 1280px) {

    .friends-list__title {
        font-size: 56px;
        line-height: 64px;
        letter-spacing: -1%;
    }

    .friends-list__name {
        font-size: 24px;
    }
}

.friends-phrase {
    padding: 80px 0;
    background-color: var(--color-blue-500);
}

.container {
}

.friends-phrase__inner {
}

.friends-phrase__text {
    max-width: 654px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
}

.other-friends__item {
    min-width: 361px;
    flex: 1;
    height: 100%;
}

/* Модифікатори фону картки на сторінці зіркового друга */

.single__card--friend-patron {
    background: linear-gradient(327.58deg, #050E2F 46.1%, #1AFF94 98.87%);
}

.single__card--friend-honorary {
    background: linear-gradient(327.58deg, #050E2F 46.1%, #21D7FF 98.87%);
}

.single__card--friend-star {
    background: linear-gradient(327.58deg, #050E2F 46.1%, #FA8118 98.87%);
}

/* Модифікатори фону картки на сторінці зіркового друга */

/* Модифікуємо колір іконок в залежності від кольору фону картки на сторінці зіркового друга */

.single__card--friend-star .memorial-single__share ul {
    color: #F78E00;
}

.single__card--friend-patron .memorial-single__share ul {
    color: #61E696;
}

.single__card--friend-honorary .memorial-single__share ul {
    color: #58A3FF;
}

/* Модифікуємо колір іконок в залежності від кольору фону картки на сторінці зіркового друга */


.hero-blood__text {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.14;
    text-align: center;

}

.hero-blood__btn {
    max-width: 276px;
    margin: 0 auto;
    margin-top: 24px;
}

.hero-blood__icon {
    margin-left: 12px;
    width: 24px;
    height: 24px;
    color: var(--color-blue-500);
}

.hero-blood__icon--white {
    color: var(--color-white-100);
}

.blood-cards {
    background: var(--color-blue-500);
    padding: 0 0 64px 0;
}

.blood-cards__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.blood-cards__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start;
    width: 100%;
    max-width: 360px;
    padding: 16px 16px 33px 16px;
    border-radius: var(--rounded-2xl);
    background-color: #051B6A;
    overflow: hidden;
}

.blood-cards__img {
    width: 100%;
    height: 252px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--rounded-sm);
}

.blood-cards___title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.14;
}

.blood-cards__text {
    font-weight: 500;
    line-height: 1.14;
}

/* Responsive */

@media (min-width: 1280px) {
    .blood-cards__list {
        gap: 32px;
        flex-wrap: nowrap;
    }

    .blood-cards__item {
        max-width: 33%;
    }
}

.become-donor {
    padding: 32px 0 24px 0;
}

.become-donor__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.become-donor__text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.become-donor__title {
    color: var(--color-blue-500);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.05;
}

.become-donor__text {
}

.become-donor__steps-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.become-donor__steps {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
}

.become-donor__step {
    min-height: 161px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--color-gray-300);
    border-radius: 32px;
    box-shadow: 0px 4px 32.5px -19px rgba(93, 102, 171, 1);
    color: var(--color-blue-500);
    font-weight: 500;
    line-height: 1.14;
}

.become-donor__step-title {
    font-size: 24px;
}

.become-donor__step-text {
    color: var(--color-gray-monochrome-700);
    font-size: 18px;
}

.become-donor__step-link {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
}

.become-donor__image {
    width: min(100%, 483px);
    border-radius: 32px;
    overflow: hidden;
}

/* Responsive */

@media screen and (min-width: 725px) {
    .become-donor__steps-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media screen and (min-width: 1024px) {
    .become-donor {
        padding-top: 64px;
    }
}

.guide {
    padding: 32px 0 80px 0;
}

.guide__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px
}

.guide__cards-wrapper {
}

.guide__title {
    color: var(--color-blue-500);
    margin-bottom: 24px;
    colot: var(--color-blue-500);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.14;
    text-align: center;
}

.guide__cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.guide__cards-item {
    width: 360px;
    padding: 24px;
    border: 1px solid var(--color-gray-300);
    border-radius: 32px;
    box-shadow: 0px 4px 32.5px -19px rgba(93, 102, 171, 1);
}

.guide__card-title {
    margin-bottom: 12px;
    color: var(--color-blue-500);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.14;
}

.guide__card-list {
}

.guide__card-list-item {
    display: flex;
    align-items: center;
}

.guide__card-list-item:not(:last-child) {
    margin-bottom: 8px;
}

.guide__card-icon {
    margin-right: 8px;
    width: 18px;
    height: 18px;
}

.guide__card-item-text {
    color: var(--color-gray-monochrome-700);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.05;
}

.guide__links-wrapper {
}

.guide__links-title {
    color: var(--color-blue-500);
    margin-bottom: 24px;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    line-height: 1.14;
    text-align: center;
}

.guide__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.guide__card-title--center {
    text-align: center;
}

.guide__btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-blue-500);
}

/* Responsive */

@media (min-width: 768px) {
    .guide__cards-item {
        min-height: 206px;
    }
}

a.tag{
    transition: all 0.15s ease;
}

a.tag:hover{
    color:var(--color-gray-800);
}

.single_tag_page .hero-stories{
    padding-bottom: 0;
}
.single_tag_page .news-list{
    padding-top: 0;
}