/* Book (normal) */
@font-face {
  font-family: "Garet";
  src: url("../../fonts/Garet-Book.woff2") format("woff2"), url("../../fonts/Garet-Book.woff") format("woff"), url("../../fonts/Garet-Book.ttf") format("truetype"), url("../../fonts/Garet-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* Heavy (bold) */
@font-face {
  font-family: "Garet";
  src: url("../../fonts/Garet-Heavy.woff2") format("woff2"), url("../../fonts/Garet-Heavy.woff") format("woff"), url("../../fonts/Garet-Heavy.ttf") format("truetype"), url("../../fonts/Garet-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
strong {
  font-weight: var(--font-black);
}

:root {
  /* FONT WEIGHT */
  --font-normal: 400;
  --font-black: 800;
  /* COLORS */
  --black: hsl(0deg 0% 0%);
  --white: hsl(0deg 0% 100%);
  --neutral-100: hsl(0, 0%, 17%);
  --neutral-200: hsl(90, 1%, 26%);
  --neutral-300: hsl(0, 0%, 44%);
  --neutral-400: hsl(90, 1%, 63%);
  --yellow-500: hsl(67, 100%, 51%);
  --yellow-500-opacity: hsla(67, 100%, 51%, 0.5);
  --blue-500: hsl(213, 100%, 52%);
  --blue-600: hsl(213, 100%, 42%);
  --blue-500--opacity: hsla(213, 100%, 52%, 0.5);
  --red-400: hsl(346, 82%, 65%);
  --red-500: hsl(346, 95%, 56%);
  --red-600: hsl(346, 95%, 46%);
  --green-500: hsl(134, 100%, 39%);
  --green-600: hsl(134, 98%, 32%);
  --orange-300: hsl(13, 95%, 76%);
  --orange-400: hsl(12, 100%, 63%);
  --orange-500: hsl(12, 97%, 57%);
  --purple-300: hsl(264, 100%, 84%);
  --purple-400: hsl(264, 100%, 76%);
  --purple-500: hsl(266, 100%, 66%);
  --purple-700: hsl(287, 44%, 28%);
  --purple-500-opacity: hsla(266, 100%, 66%, 0.5);
  --childish-gambino-100: hsl(165, 97%, 74%);
  --childish-gambino-200: hsl(129, 58%, 68%);
  --childish-gambino-300: hsl(336, 51%, 61%);
  --childish-gambino-400: hsl(340, 60%, 46%);
  --childish-gambino-500: hsl(343, 91%, 73%);
  --childish-gambino-600: hsl(345, 94%, 61%);
  --childish-gambino-700: hsl(342, 85%, 55%);
  --childish-gambino-800: hsl(342, 95%, 35%);
  /* SIZES */
  --space-0: 0;
  --space-12: 0.0625rem;
  --space-25: 0.125rem;
  --space-50: 0.25rem;
  --space-100: 0.5rem;
  --space-125: 0.625rem;
  --space-150: 0.75rem;
  --space-175: 0.875rem;
  --space-200: 1rem;
  --space-225: 1.125rem;
  --space-250: 1.25rem;
  --space-300: 1.5rem;
  --space-400: 2rem;
  --space-450: 2.25rem;
  --space-500: 2.5rem;
  --space-600: 3rem;
  --space-650: 3.25rem;
  --space-700: 3.5rem;
  --space-750: 3.75rem;
  --space-800: 4rem;
  --space-900: 4.5rem;
  --space-1000: 5rem;
  --space-1050: 5.5rem;
  --space-1100: 6rem;
  --space-1400: 7rem;
  --space-1500: 7.5rem;
  --space-1600: 8rem;
  --space-2000: 10rem;
}

/* Media Queries */
/* Typography */
.text-1 {
  font-size: var(--space-450);
  font-weight: var(--font-black);
  line-height: 1;
}

.text-2 {
  font-size: var(--space-400);
  font-weight: var(--font-black);
  line-height: 1.35;
}

.text-3 {
  font-size: var(--space-225);
  line-height: 1.35;
}
@media (width <= 40em) {
  .text-3 {
    font-size: var(--space-175);
  }
}

.text-4 {
  font-size: var(--space-175);
  line-height: 1.25;
}

.text-5 {
  font-size: var(--space-150);
  line-height: 1.35;
}

.text-6 {
  font-size: var(--space-300);
  font-weight: var(--font-black);
  line-height: 1.35;
}

.text-7 {
  font-size: var(--space-225);
  font-weight: var(--font-black);
  line-height: 1;
}

.text-8 {
  font-size: var(--space-150);
  line-height: 1.35;
  text-transform: uppercase;
  opacity: 0.5;
}

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

.text-red {
  color: var(--red-500);
}

.text-green {
  color: var(--green-500);
}

.text-orange {
  color: var(--orange-500);
}

.text-black {
  font-weight: var(--font-black);
}

.text-red {
  color: var(--red-500);
}

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

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.gap-200 {
  gap: var(--space-200);
}

.hidden {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Garet", sans-serif;
  color: var(--white);
  font-weight: var(--font-normal);
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  width: 100%;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: currentcolor;
}
a:focus-visible {
  outline: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.stats {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, max-content);
}
@media (width <= 60em) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-300);
  }
}

.stat {
  display: grid;
}
.stat > :first-child {
  font-size: var(--space-400);
  font-weight: var(--font-black);
  line-height: 1.35;
}
.stat > :nth-child(2) {
  font-size: var(--space-150);
  line-height: 1.35;
}

.button-5, .button-4, .button-3, .button-2, .button-1 {
  --color: var(--blue-500);
  --color-hover: var(--blue-600);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--space-300);
  color: var(--white);
  font-weight: var(--font-black);
  height: var(--space-600);
  border-radius: var(--space-600);
  background-color: var(--color);
  gap: var(--space-125);
  line-height: 1;
  cursor: pointer;
  font-size: clamp(var(--space-150), 1.2vw, var(--space-200));
}
@media (width <= 40em) {
  .button-5, .button-4, .button-3, .button-2, .button-1 {
    padding-inline: var(--space-200);
  }
}
.button-5:hover, .button-4:hover, .button-3:hover, .button-2:hover, .button-1:hover {
  background-color: var(--color-hover);
}

.button-2 {
  --color: var(--red-500);
  --color-hover: var(--red-600);
}

.button-3 {
  --color: transparent;
  --color-hover: var(--black);
  height: var(--space-500);
  padding-inline: var(--space-150);
  color: var(--neutral-400);
}
@media (width <= 40em) {
  .button-3 {
    padding-inline: var(--space-100);
  }
}

.button-4 {
  --color: var(--red-500);
  --color-hover: var(--red-600);
  text-transform: uppercase;
  font-size: var(--space-225);
}
.button-4--blue {
  --color: var(--blue-500);
  --color-hover: var(--blue-600);
}
@media (width <= 40em) {
  .button-4 {
    font-size: var(--space-175);
  }
}

.button-5 {
  --color: var(--green-500);
  --color-hover: var(--green-600);
  text-transform: uppercase;
  font-size: var(--space-175);
  height: var(--space-400);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block: var(--space-800) var(--space-400);
}
@media (width <= 40em) {
  .gallery {
    width: 100%;
    margin-block: var(--space-400) var(--space-200);
  }
}
.gallery div {
  --bg: var(--red-500);
  border-radius: var(--space-400);
  background-color: var(--bg);
  padding: var(--space-100) 0 0 var(--space-100);
  transform: rotate(10deg);
}
@media (width <= 40em) {
  .gallery div {
    transform: rotate(2deg);
    margin-inline: auto;
  }
}
.gallery div:nth-child(2) {
  transform: rotate(-10deg);
  --bg: var(--green-500);
}
@media (width <= 40em) {
  .gallery div:nth-child(2) {
    transform: rotate(-2deg);
  }
}
.gallery div:nth-child(3) {
  --bg: var(--purple-500);
}
.gallery img {
  border-radius: var(--space-300);
  margin-block-end: calc(var(--space-12) * -1);
}
.gallery--big {
  margin: 0;
  width: 80%;
}
.gallery--big div:nth-child(1) {
  --bg: var(--yellow-500-opacity);
  transform: rotate(-8.3deg);
}
.gallery--big div:nth-child(2) {
  --bg: var(--purple-500-opacity);
  transform: rotate(6.5deg);
}
.gallery--big div:nth-child(3) {
  --bg: var(--blue-500--opacity);
  transform: rotate(-5.7deg);
}

.gallery-1 {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  margin-block-start: var(--space-1000);
  gap: var(--space-1000);
  justify-content: center;
}
@media (width <= 60em) {
  .gallery-1 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-500);
  }
}
@media (width <= 40em) {
  .gallery-1 {
    gap: var(--space-200);
    grid-template-columns: auto;
  }
}
.gallery-1 figure {
  --color: var(--yellow-500);
  display: grid;
  gap: var(--space-300);
  justify-items: center;
  width: 100%;
}
@media (width <= 40em) {
  .gallery-1 figure {
    grid-template-columns: max-content auto;
    align-items: center;
    justify-items: start;
  }
}
.gallery-1 figure div {
  width: 9rem;
  aspect-ratio: 1;
  background-color: var(--color);
  border-radius: 50%;
}
@media (width <= 40em) {
  .gallery-1 figure div {
    max-width: 5.5rem;
  }
}
.gallery-1 figure img {
  max-width: 8.5rem;
  border-radius: 50%;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
  transform: translate(var(--space-100), var(--space-100));
}
@media (width <= 40em) {
  .gallery-1 figure img {
    max-width: 5rem;
  }
}
.gallery-1 figure figcaption {
  font-size: var(--space-225);
  font-weight: var(--font-black);
  line-height: 1;
  color: var(--color);
  width: min-content;
}
@media (width <= 40em) {
  .gallery-1 figure figcaption {
    width: auto;
    text-align: start;
  }
}
.gallery-1 figure:nth-child(even) {
  --color: var(--childish-gambino-100);
}

.bar {
  --bg: var(--childish-gambino-100);
  border-radius: var(--space-400);
  background-color: var(--yellow-500);
  padding: var(--space-100) 0 0 var(--space-100);
  color: var(--white);
}
.bar > div {
  font-size: var(--space-225);
  line-height: 1.35;
  padding: var(--space-500) var(--space-200);
  border-radius: var(--space-300);
  background-color: var(--bg);
  display: grid;
  gap: var(--space-300);
}
.bar--20 > div {
  background-image: linear-gradient(to bottom, var(--green-500), var(--green-600));
}
.bar--50 > div {
  background-image: linear-gradient(to bottom, var(--orange-500), var(--orange-400));
}
.bar--100 > div {
  background-image: linear-gradient(to bottom, var(--red-400), var(--red-500));
}
.bar--200 > div {
  background-image: linear-gradient(to bottom, var(--childish-gambino-800), var(--childish-gambino-700));
}
.bar--onetime {
  --bg: var(--white);
  color: var(--blue-500);
  grid-column: 1/-1;
}
.bar--onetime > div {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: space-around;
  align-items: center;
  gap: var(--space-150);
}
@media (width <= 60em) {
  .bar--onetime > div {
    grid-template-columns: auto;
  }
}
.bar--onetime > div hr {
  background-color: var(--blue-500);
  width: var(--space-25);
  opacity: 0.5;
  height: 100%;
}
.bar--onetime > div p i {
  color: currentColor;
}
.bar hr {
  width: 100%;
  height: var(--space-25);
  background-color: var(--yellow-500);
  border: 0;
}
.bar h3 {
  font-size: var(--space-400);
  font-weight: var(--font-black);
  line-height: 1.35;
  line-height: 1;
}
.bar p {
  font-size: var(--space-175);
  line-height: 1.25;
  display: grid;
  gap: var(--space-200);
  text-align: center;
  justify-items: center;
}
@media (width <= 40em) {
  .bar p {
    grid-template-columns: min-content auto;
    justify-items: left;
    text-align: start;
    align-items: center;
  }
}
.bar p i {
  color: var(--yellow-500);
  font-size: clamp(var(--space-200), 1.8vw, var(--space-300));
}

.card {
  border-radius: var(--space-400);
  background-color: var(--green-500);
  max-width: 25rem;
  padding: var(--space-100) 0 0 var(--space-100);
  color: var(--black);
}
.card:last-child {
  justify-self: end;
  background-color: var(--red-500);
}
.card:last-child div {
  justify-items: center;
}
@media (width <= 60em) {
  .card {
    justify-self: center;
    max-width: none;
    width: 100%;
  }
}
.card > div {
  background-color: var(--white);
  padding: var(--space-400);
  border-radius: var(--space-300);
  display: grid;
  gap: var(--space-300);
}
@media (width <= 40em) {
  .card > div {
    padding: var(--space-200);
    justify-items: center;
    text-align: center;
  }
}

.carousel {
  overflow: hidden;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-flex;
  animation: 25s slide infinite linear;
}

.logos-slide a {
  height: 50px;
  margin: 0 40px;
  display: inline-flex;
  width: 100px;
  align-items: center;
}

.owl-stage {
  display: flex;
  gap: var(--space-200);
}
.owl-stage .owl-item:nth-child(even) .blockquote {
  --color: var(--red-500);
}

.blockquote {
  --color: var(--childish-gambino-100);
  flex: 0 0 26rem;
}
.blockquote:nth-child(even) {
  --color: var(--red-500);
}
.blockquote__citation {
  position: relative;
  padding: var(--space-500);
  padding-block-start: var(--space-400);
  border: var(--space-50) solid var(--color);
  display: grid;
  place-content: center;
  border-radius: var(--space-750) var(--space-750) var(--space-25) var(--space-750);
  gap: var(--space-200);
}
.blockquote__citation::before {
  content: "\f10d";
  font: var(--fa-font-solid);
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: var(--space-700);
  color: var(--color);
}
.blockquote footer {
  display: grid;
  gap: var(--space-100);
  text-align: end;
  margin-block-start: var(--space-200);
}
.blockquote__name {
  font-size: var(--space-225);
  font-weight: var(--font-black);
  line-height: 1;
  color: var(--color);
}
.blockquote__role {
  font-weight: var(--font-bold);
  color: var(--color);
}

.donation-form {
  display: grid;
  gap: var(--space-500);
}
.donation-form__input-group {
  width: 100%;
  min-height: var(--space-600);
  background-color: var(--neutral-200);
  padding: var(--space-50);
  border-radius: var(--space-400);
  display: flex;
  gap: var(--space-100);
  justify-content: space-between;
}
@media (width <= 60em) {
  .donation-form__input-group {
    padding: var(--space-100);
  }
}
.donation-form__input-group:focus-within {
  background-color: var(--neutral-100);
}
.donation-form__input-group > * {
  flex: 1;
}
.donation-form__input-group input[type=radio] {
  display: none;
}
@media (width <= 60em) {
  .donation-form__input-group label {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--space-200);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
    border-radius: var(--space-300);
  }
}
.donation-form__input-group input:checked + label {
  background-color: var(--white);
  color: var(--black);
}
.donation-form__input-group input:checked + label.donation-monthly i {
  color: var(--red-500);
}
.donation-form__input-group input:checked + label.donation-onetime i {
  color: var(--blue-500);
}
.donation-form__input-group input[type=number] {
  background-color: transparent;
  text-align: center;
  font-weight: var(--font-black);
  color: var(--white);
  border: 0;
  outline: 0;
}
@media (width <= 40em) {
  .donation-form__input-group input[type=number] {
    width: 70%;
  }
}
.donation-form__input-group span {
  font-weight: var(--font-black);
  flex: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  padding-inline: var(--space-200);
}
.donation-form__result {
  font-size: var(--space-175);
  line-height: 1.25;
  display: grid;
  color: var(--black);
  background-color: var(--white);
  padding: var(--space-225);
  border-radius: var(--space-300);
  gap: var(--space-225);
  justify-items: center;
}
@media (width <= 40em) {
  .donation-form__result {
    padding: var(--space-100);
  }
}
.donation-form__result div {
  display: grid;
  gap: var(--space-100);
}
.donation-form__result div p {
  display: flex;
  gap: var(--space-100);
}
.donation-form__result div i {
  color: var(--neutral-300);
}
.donation-form__your-contribution {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: var(--space-100);
}
@media (width <= 40em) {
  .donation-form__your-contribution {
    grid-template-columns: auto;
    text-align: center;
  }
}
.donation-form__bank {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-200);
  align-items: center;
  justify-content: space-between;
}
@media (width <= 40em) {
  .donation-form__bank {
    grid-template-columns: auto;
    text-align: center;
    justify-content: center;
  }
}

.header {
  background-image: url("./../images/header-bg.jpg");
  background-size: cover;
  padding-block: var(--space-500);
}
.header__container {
  display: grid;
  grid-template-columns: 25fr 28fr;
  gap: var(--space-300);
}
@media (width <= 60em) {
  .header__container {
    grid-template-columns: auto;
  }
}
.header__col {
  padding: var(--space-500);
  color: var(--white);
  display: grid;
  align-content: start;
  gap: var(--space-500);
  border-radius: var(--space-250);
  background-color: var(--black);
}
.header__col:nth-child(1) {
  padding-block-start: var(--space-1000);
  padding: var(--space-200);
  background-color: transparent;
}
@media (width <= 60em) {
  .header__col:nth-child(1) {
    padding-block-start: var(--space-200);
  }
}
@media (width <= 60em) {
  .header__col {
    padding: var(--space-200);
  }
}
@media (width <= 40em) {
  .header__col {
    padding: var(--space-50);
  }
}
.header__logo {
  width: 116px;
  height: 78px;
}
.header__heading-1 {
  font-size: var(--space-450);
  font-weight: var(--font-black);
  line-height: 1;
}
.header__heading-2 {
  font-size: var(--space-400);
  font-weight: var(--font-black);
  line-height: 1.35;
}

.container {
  width: calc(100% - var(--space-200));
  max-width: 70rem;
  margin-inline: auto;
}

.section-1 {
  padding-block: var(--space-1600);
  background-image: url("./../images/line-step-1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right calc(var(--space-100) * -1);
  background-color: var(--purple-700);
}
@media (width <= 40em) {
  .section-1 {
    padding-block: var(--space-800);
  }
}
.section-1__logo {
  display: inline-flex;
  gap: var(--space-300);
  align-items: center;
  margin-block-start: var(--space-200);
  justify-content: center;
}
@media (width <= 60em) {
  .section-1__logo img {
    width: 50%;
  }
}
.section-1__title {
  text-align: center;
}
.section-1__question {
  font-size: clamp(var(--space-500), 5vw, var(--space-1000));
  line-height: 1;
  font-weight: var(--font-black);
  color: var(--yellow-500);
  flex-grow: 0;
}
.section-1__cards {
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: var(--space-600);
  row-gap: var(--space-600);
  align-items: start;
}
@media (width <= 60em) {
  .section-1__cards {
    grid-template-columns: auto;
  }
}
@media (width <= 40em) {
  .section-1__cards {
    grid-template-columns: auto;
  }
}
.section-1__left-col {
  grid-row: 1/5;
}
.section-1__video {
  width: 100%;
  aspect-ratio: 16/9;
  margin-block-start: var(--space-1000);
}
.section-1__card {
  --rotate: 4deg;
  max-width: 26rem;
  border-radius: var(--space-400);
  background-color: var(--purple-300);
  padding: var(--space-100) 0 0 var(--space-100);
  transform: rotate(var(--rotate));
  grid-column: 2/3;
  place-self: center;
}
@media (width <= 60em) {
  .section-1__card {
    grid-column: initial;
    max-width: none;
    place-self: initial;
  }
}
.section-1__card:nth-child(2), .section-1__card:nth-child(3) {
  --rotate: -4deg;
}
@media (width <= 60em) {
  .section-1__card:nth-child(2), .section-1__card:nth-child(3) {
    grid-column: initial;
  }
}
.section-1__card:nth-child(4) {
  --rotate: -10deg;
}
@media (width <= 60em) {
  .section-1__card:nth-child(4) {
    grid-column: initial;
  }
}
.section-1__card p {
  font-size: var(--space-225);
  line-height: 1.35;
  padding: var(--space-200) var(--space-300);
  background-image: linear-gradient(to right, var(--white), var(--purple-300));
  color: var(--black);
  border-radius: var(--space-300);
}

.section-2 {
  background-image: url("./../images/header-bg.jpg");
  background-size: cover;
  padding-block: var(--space-1600);
  text-align: center;
}
@media (width <= 40em) {
  .section-2 {
    padding-block: var(--space-800);
  }
}
.section-2__container {
  display: grid;
  gap: var(--space-500);
}
.section-2__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, max-content));
  column-gap: var(--space-600);
  row-gap: var(--space-1000);
  margin-block-start: var(--space-1000);
  align-items: start;
  justify-content: center;
}
@media (width <= 60em) {
  .section-2__cards {
    grid-template-columns: repeat(2, minmax(min-content, max-content));
    row-gap: var(--space-500);
    justify-items: center;
    margin-block-start: var(--space-500);
  }
}
@media (width <= 40em) {
  .section-2__cards {
    grid-template-columns: auto;
  }
}
.section-2__card {
  --rotate: 10deg;
  --bg: var(--childish-gambino-100);
  border-radius: var(--space-400);
  background-color: var(--yellow-500);
  padding: var(--space-100) 0 0 var(--space-100);
  transform: rotate(var(--rotate));
}
.section-2__card p {
  font-size: var(--space-300);
  font-weight: var(--font-black);
  line-height: 1.35;
  padding: var(--space-125) var(--space-200);
  color: var(--black);
  border-radius: var(--space-300);
  background-color: var(--bg);
}
@media (width <= 60em) {
  .section-2__card:nth-child(1) {
    --rotate: 4deg;
  }
}
.section-2__card:nth-child(2) {
  --rotate: -16deg;
  --bg: var(--childish-gambino-200);
}
@media (width <= 60em) {
  .section-2__card:nth-child(2) {
    --rotate: -4deg;
  }
}
.section-2__card:nth-child(3) {
  --rotate: -4deg;
  --bg: var(--purple-400);
}
@media (width <= 60em) {
  .section-2__card:nth-child(3) {
    --rotate: 0deg;
  }
}
.section-2__card:nth-child(4) {
  --rotate: -4deg;
}
@media (width <= 60em) {
  .section-2__card:nth-child(4) {
    --rotate: -2deg;
  }
}
.section-2__card:nth-child(4) p {
  background-image: linear-gradient(to right, var(--orange-500), var(--orange-300));
}
.section-2__card:nth-child(5) p {
  background-image: linear-gradient(to right, var(--childish-gambino-300), var(--childish-gambino-400));
}
@media (width <= 60em) {
  .section-2__card:nth-child(5) {
    --rotate: -2deg;
  }
}
.section-2__card:nth-child(6) {
  --rotate: 5deg;
}
@media (width <= 60em) {
  .section-2__card:nth-child(6) {
    --rotate: 2deg;
  }
}
.section-2__card:nth-child(6) p {
  background-image: linear-gradient(to right, var(--childish-gambino-500), var(--childish-gambino-600));
}

.section-3 {
  padding-block: var(--space-1600);
  background-image: url("./../images/line-step-3.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: var(--blue-500);
  text-align: center;
}
@media (width <= 40em) {
  .section-3 {
    padding-block: var(--space-800);
  }
}

.chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-600);
  row-gap: var(--space-500);
  margin-block-start: var(--space-1000);
  align-items: end;
}
@media (width <= 60em) {
  .chart {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 40em) {
  .chart {
    grid-template-columns: auto;
  }
}

.section-4 {
  background-image: linear-gradient(var(--blue-500), var(--blue-500)), url("./../images/header-bg.jpg");
  background-blend-mode: color;
  background-size: cover;
  padding-block: var(--space-1600);
  text-align: center;
  position: relative;
  z-index: 0;
}
@media (width <= 40em) {
  .section-4 {
    padding-block: var(--space-800);
  }
}
.section-4::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./../images/line-step-4.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  z-index: -1;
}
.section-4 > div {
  display: grid;
  justify-items: center;
  gap: var(--space-800);
}
.section-4__content {
  display: grid;
  gap: var(--space-800);
  justify-items: center;
}
.section-4 p {
  max-width: 20rem;
}
.section-4 p:not(:first-of-type) {
  max-width: 30rem;
}

.section-5 {
  background-image: url("./../images/header-bg.jpg");
  background-size: cover;
  background-position-y: -1px;
  padding-block: var(--space-1000);
  position: relative;
  z-index: 0;
  display: grid;
  gap: var(--space-600);
}
@media (width <= 40em) {
  .section-5 {
    padding-block: var(--space-800);
  }
}
.section-5 h2 {
  text-align: center;
}

.section-6 {
  padding-block: var(--space-1600);
  background-color: var(--blue-500);
  text-align: center;
}
@media (width <= 40em) {
  .section-6 {
    padding-block: var(--space-800);
  }
}

.section-7 {
  padding-block: var(--space-600);
  background-color: var(--white);
  text-align: center;
  color: var(--black);
}

.section-8 {
  background-image: url("./../images/line-step-7.svg"), url("./../images/all.jpg");
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-block: var(--space-2000);
}
@media (width <= 60em) {
  .section-8 {
    padding-block: var(--space-300);
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (width <= 60em) {
  .cards {
    grid-template-columns: auto;
    gap: 20rem;
  }
}

.footer {
  background-color: var(--black);
  padding-block: var(--space-400);
}
.footer__container {
  display: grid;
  justify-content: center;
  justify-items: center;
  gap: var(--space-300);
}
.footer__logo {
  width: 116px;
  height: 78px;
}
.footer__nav-1 {
  display: flex;
  gap: var(--space-400);
}
@media (width <= 60em) {
  .footer__nav-1 {
    flex-direction: column;
    align-items: center;
  }
}
.footer__nav-2 {
  --col: 8;
  display: grid;
  gap: var(--space-400);
  grid-template-columns: repeat(var(--col), max-content);
}
@media (width <= 60em) {
  .footer__nav-2 {
    --col: 4;
    justify-items: center;
    margin-block: var(--space-600);
  }
}
@media (width <= 40em) {
  .footer__nav-2 {
    --col: 2;
  }
}
.footer a:hover {
  color: var(--red-500);
}
.footer__privacy {
  font-size: var(--space-175);
  line-height: 1.25;
  display: flex;
  gap: var(--space-400);
}

.social-links {
  display: flex;
  gap: var(--space-400);
}

/*# sourceMappingURL=donations.css.map */