:root {
  --blue:#4d5daa;
  --red:#a2352b;
  --dred:darken(var(--red),15%);
  --font:'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bebas:'bebas-neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
  min-height: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font: 400 16px var(--font);
  background: white;
}

img {
  max-width: 100%;
}

a, button {
  border-radius: 0;
  cursor: pointer;
}

button {
  all: unset;
  cursor: pointer;
  padding: 0.5em 1em;
  background: var(--blue);
  color: white;
  border-radius: 0;
  font-family: inherit;
}

sup {
  line-height: 1em;
  vertical-align: super;
  display: inline-block;
  position: static;
}

input {
  border-radius: 0;
}

iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

* ::-moz-selection {
  color: #fff;
  background-color: var(--red);
}
* ::-moz-selection * {
  color: #fff;
}
* ::-moz-selection {
  color: #fff;
  background-color: var(--red);
}
* ::selection {
  color: #fff;
  background-color: var(--red);
}
* ::-moz-selection * {
  color: #fff;
}
* ::selection * {
  color: #fff;
}

.top {
  background: white;
  border-bottom: 5px solid var(--red);
}
.top .wrap {
  padding: clamp(28px, 3.125vw, 40px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -moz-column-gap: clamp(140px, 15.625vw, 200px);
       column-gap: clamp(140px, 15.625vw, 200px);
  row-gap: 30px;
  max-width: 960px;
  margin: auto;
  flex-wrap: wrap;
}
.top .wrap img {
  width: clamp(318.5px, 35.546875vw, 455px);
}
.top .wrap .cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.top .wrap .cta .donate {
  background: var(--red);
  padding: clamp(16px, 1.40625vw, 18px) clamp(24.5px, 2.734375vw, 35px);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font: 700 clamp(22.4px, 2.5vw, 32px)/1em var(--font);
  text-decoration: none;
  outline: none;
  border-radius: 0;
  margin-bottom: 20px;
  transition: background 0.3s;
}
.top .wrap .cta .donate:hover {
  background: red;
}
.top .wrap .cta .tel {
  font: 300 23px var(--font);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  color: var(--blue);
  transition: text-decoration-color 0.3s;
}
.top .wrap .cta .tel strong {
  font-weight: 700;
}
.top .wrap .cta .tel:hover {
  text-decoration-color: inherit;
}

.intro {
  background: url(header.jpg) top 20% right 65%/cover no-repeat;
  padding: 40px 0;
}
.intro .wrap {
  max-width: 960px;
  margin: auto;
}
.intro .wrap .text {
  width: 60%;
  justify-self: flex-end;
  background: white;
  padding: clamp(28px, 3.125vw, 40px);
  box-sizing: border-box;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.intro .wrap .text img {
  display: none;
}
.intro .wrap .text h1 {
  margin: 0 0 0.3em 0;
  font: 400 clamp(39.2px, 4.375vw, 56px) var(--bebas);
  color: var(--red);
}
.intro .wrap .text p {
  font-size: 22.5px;
  text-wrap: balance;
}
.intro .wrap .text blockquote {
  font-size: 29px;
  font-style: italic;
  font-weight: 500;
  padding: 0;
  margin: 0;
}

.list {
  background: url(list.jpg) center center/cover no-repeat;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
  color: white;
}
.list h2 {
  margin: 0 auto 1em auto;
  text-wrap: balance;
  text-align: center;
  font-size: clamp(24.5px, 2.734375vw, 35px);
  max-width: 960px;
}
.list ul {
  list-style: none;
  padding: 0;
  font: 400 clamp(24.5px, 2.734375vw, 35px) var(--font);
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 48fr 52fr;
  -moz-column-gap: clamp(28px, 3.125vw, 40px);
       column-gap: clamp(28px, 3.125vw, 40px);
}
.list ul li {
  padding-left: clamp(56px, 6.25vw, 80px);
  position: relative;
}
.list ul li:not(:last-child) {
  margin-bottom: 1em;
}
.list ul li:before {
  content: "";
  display: inline-block;
  width: clamp(56px, 6.25vw, 80px);
  height: clamp(36.4px, 4.0625vw, 52px);
  background: url(check.svg) center left/contain no-repeat;
  margin-left: clamp(-80px, -6.25vw, -56px);
  vertical-align: top;
}
.list ul li span {
  display: inline-block;
  vertical-align: top;
}

.about {
  background: white;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
}
.about .wrap {
  max-width: 960px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(42px, 4.6875vw, 60px);
}
.about .wrap .photo {
  width: clamp(210px, 23.4375vw, 300px);
  padding: 15px;
  border: 1px solid lightgray;
  box-shadow: 10px 10px 0 0 #dbdfee;
}
.about .wrap .photo img {
  display: block;
  margin-bottom: 10px;
}
.about .wrap .photo p {
  margin: 0;
  font-size: clamp(16px, 1.40625vw, 18px);
  text-align: center;
}
.about .wrap .text {
  flex: 1;
}
.about h2 {
  font: 400 clamp(39.2px, 4.375vw, 56px) var(--bebas);
  color: var(--red);
  margin: 0 0 0.5em 0;
}
.about h2 + p {
  font-size: clamp(16px, 1.71875vw, 22px);
}

.signup {
  background: url(city.jpg) center center/cover no-repeat;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
  color: white;
}
.signup h2 {
  font: 400 clamp(39.2px, 4.375vw, 56px) var(--bebas);
  text-align: center;
}
.signup form {
  max-width: 750px;
  margin: auto;
}
.signup form .wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(15px, 1.171875vw, 16px);
}
.signup form .wrap > :nth-child(-n+4) {
  grid-column: span 3;
}
.signup form .wrap > :nth-child(5) {
  grid-column: span 6;
}
.signup form .wrap > :nth-child(n+6):nth-child(-n+8) {
  grid-column: span 2;
}
.signup form .wrap h3, .signup form .wrap .checks, .signup form .wrap .submit {
  grid-column: span 6;
}
.signup form .wrap h3 {
  font-weight: 700;
  margin: 0;
}
.signup form .wrap input:not([type=checkbox]) {
  background: white;
  border-radius: 0;
  padding: clamp(10px, 0.78125vw, 16px) clamp(13px, 1.015625vw, 16px);
  font: 400 clamp(16px, 1.40625vw, 18px) var(--font);
  color: var(--red);
  outline: none;
  border: none;
}
.signup form .wrap .checks {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  -moz-column-gap: clamp(24.5px, 2.734375vw, 35px);
       column-gap: clamp(24.5px, 2.734375vw, 35px);
  row-gap: 10px;
}
.signup form .wrap .checks div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.signup form .wrap .checks input {
  margin: 0;
  transition: all 0.3s;
  outline: none;
  border: none;
}
.signup form .wrap .checks input:checked {
  accent-color: green;
}
.signup form .wrap .checks input:checked:hover {
  accent-color: blue;
}
.signup form .wrap .checks label {
  margin: 0;
}
.signup form .wrap .submit {
  text-align: center;
}
.signup form .wrap .submit button {
  border: 5px solid white;
  padding: clamp(10px, 0.78125vw, 16px) clamp(21px, 2.34375vw, 30px);
  font: 700 clamp(16px, 1.640625vw, 21px) var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: none;
  border-radius: 0;
  outline: none;
  transition: background 0.3s, color 0.3s;
}
.signup form .wrap .submit button:hover {
  background: white;
  color: var(--red);
}

footer {
  background: #11141d;
  padding: clamp(35px, 3.90625vw, 50px) 15px;
}
footer .outtro {
  max-width: 960px;
  margin: 0 auto clamp(31.5px, 3.515625vw, 45px) auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
footer .outtro img {
  width: clamp(231px, 25.78125vw, 330px);
}
footer .outtro div {
  text-align: center;
}
footer .outtro h2 {
  color: white;
  margin: 0 0 0.4em 0;
  text-align: center;
  font-size: clamp(25.2px, 2.8125vw, 36px);
}
footer .outtro a {
  color: white;
  background: var(--red);
  border-radius: 0;
  display: inline-block;
  text-transform: uppercase;
  border: none;
  font-weight: 700;
  font-size: clamp(18.2px, 2.03125vw, 26px);
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: clamp(12px, 0.9375vw, 16px) clamp(21px, 2.34375vw, 30px);
  outline: none;
  transition: background 0.3s;
}
footer .outtro a:hover {
  background: red;
}
footer p {
  color: #6476ad;
  text-align: center;
  font-size: 16px;
  margin: 0;
}

@media (max-width: 599px) {
  .top .wrap {
    flex-direction: column;
  }
  .intro {
    padding: 0;
    background: none;
  }
  .intro .wrap .text {
    width: 100%;
    justify-self: unset;
    background: url(texture.jpg) center center/cover no-repeat;
    padding-top: 30px;
  }
  .intro .wrap .text img {
    display: block;
    margin-bottom: 20px;
    box-shadow: -15px -15px 0 0 #ccd9e8;
    position: relative;
    bottom: -7.5px;
    right: -7.5px;
    transform: scale(0.95);
  }
  .list ul {
    display: block;
  }
  .about .wrap {
    display: block;
    text-align: center;
  }
  .about .wrap .text {
    text-align: left;
  }
  .about .wrap .photo {
    display: inline-block;
  }
  footer .outtro{
    flex-direction: column;
    gap:30px;
  }
}