/*
Theme Name: give-child
Theme URI: https://rizq.org/
Author: Ali Zaman
Author URI: https://rizq.org/
Description: Give Child Theme.
Version: 1.0
*/

/*custom styles*/

.donation__page {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.donation__page.hidden {
	opacity: 0;
	pointer-events: none;
}
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

footer,
header,
nav,
section,
main {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  border-radius: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-16px / 2);
  margin-right: calc(-16px / 2);
}
.row.no-gutters {
  margin: 0;
}
.row.no-gutters [class*=" col-"] {
  padding: 0;
}

.col-1 {
  max-width: 8.3333333333%;
  width: 8.3333333333%;
  padding-inline: calc(16px / 2);
}

.col-2 {
  max-width: 16.6666666667%;
  width: 16.6666666667%;
  padding-inline: calc(16px / 2);
}

.col-3 {
  max-width: 25%;
  width: 25%;
  padding-inline: calc(16px / 2);
}

.col-4 {
  max-width: 33.3333333333%;
  width: 33.3333333333%;
  padding-inline: calc(16px / 2);
}

.col-5 {
  max-width: 41.6666666667%;
  width: 41.6666666667%;
  padding-inline: calc(16px / 2);
}

.col-6 {
  max-width: 50%;
  width: 50%;
  padding-inline: calc(16px / 2);
}

.col-7 {
  max-width: 58.3333333333%;
  width: 58.3333333333%;
  padding-inline: calc(16px / 2);
}

.col-8 {
  max-width: 66.6666666667%;
  width: 66.6666666667%;
  padding-inline: calc(16px / 2);
}

.col-9 {
  max-width: 75%;
  width: 75%;
  padding-inline: calc(16px / 2);
}

.col-10 {
  max-width: 83.3333333333%;
  width: 83.3333333333%;
  padding-inline: calc(16px / 2);
}

.col-11 {
  max-width: 91.6666666667%;
  width: 91.6666666667%;
  padding-inline: calc(16px / 2);
}

.col-12 {
  max-width: 100%;
  width: 100%;
  padding-inline: calc(16px / 2);
}

.col-md-1 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-1.no-gutters {
  padding: 0;
}

.col-md-2 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-2.no-gutters {
  padding: 0;
}

.col-md-3 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-3.no-gutters {
  padding: 0;
}

.col-md-4 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-4.no-gutters {
  padding: 0;
}

.col-md-5 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-5.no-gutters {
  padding: 0;
}

.col-md-6 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-6.no-gutters {
  padding: 0;
}

.col-md-7 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-7.no-gutters {
  padding: 0;
}

.col-md-8 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-8.no-gutters {
  padding: 0;
}

.col-md-9 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-9.no-gutters {
  padding: 0;
}

.col-md-10 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-10.no-gutters {
  padding: 0;
}

.col-md-11 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-11.no-gutters {
  padding: 0;
}

.col-md-12 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-md-12.no-gutters {
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .col-md-1 {
    max-width: 8.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-md-1.no-gutters {
    padding: 0;
  }
  .col-md-2 {
    max-width: 16.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-md-2.no-gutters {
    padding: 0;
  }
  .col-md-3 {
    max-width: 25%;
    padding-inline: calc(16px / 2);
  }
  .col-md-3.no-gutters {
    padding: 0;
  }
  .col-md-4 {
    max-width: 33.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-md-4.no-gutters {
    padding: 0;
  }
  .col-md-5 {
    max-width: 41.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-md-5.no-gutters {
    padding: 0;
  }
  .col-md-6 {
    max-width: 50%;
    padding-inline: calc(16px / 2);
  }
  .col-md-6.no-gutters {
    padding: 0;
  }
  .col-md-7 {
    max-width: 58.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-md-7.no-gutters {
    padding: 0;
  }
  .col-md-8 {
    max-width: 66.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-md-8.no-gutters {
    padding: 0;
  }
  .col-md-9 {
    max-width: 75%;
    padding-inline: calc(16px / 2);
  }
  .col-md-9.no-gutters {
    padding: 0;
  }
  .col-md-10 {
    max-width: 83.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-md-10.no-gutters {
    padding: 0;
  }
  .col-md-11 {
    max-width: 91.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-md-11.no-gutters {
    padding: 0;
  }
  .col-md-12 {
    max-width: 100%;
    padding-inline: calc(16px / 2);
  }
  .col-md-12.no-gutters {
    padding: 0;
  }
}
.col-lg-1 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-1.no-gutters {
  padding: 0;
}

.col-lg-2 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-2.no-gutters {
  padding: 0;
}

.col-lg-3 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-3.no-gutters {
  padding: 0;
}

.col-lg-4 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-4.no-gutters {
  padding: 0;
}

.col-lg-5 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-5.no-gutters {
  padding: 0;
}

.col-lg-6 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-6.no-gutters {
  padding: 0;
}

.col-lg-7 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-7.no-gutters {
  padding: 0;
}

.col-lg-8 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-8.no-gutters {
  padding: 0;
}

.col-lg-9 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-9.no-gutters {
  padding: 0;
}

.col-lg-10 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-10.no-gutters {
  padding: 0;
}

.col-lg-11 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-11.no-gutters {
  padding: 0;
}

.col-lg-12 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-lg-12.no-gutters {
  padding: 0;
}

@media only screen and (min-width: 992px) {
  .col-lg-1 {
    max-width: 8.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-1.no-gutters {
    padding: 0;
  }
  .col-lg-2 {
    max-width: 16.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-2.no-gutters {
    padding: 0;
  }
  .col-lg-3 {
    max-width: 25%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-3.no-gutters {
    padding: 0;
  }
  .col-lg-4 {
    max-width: 33.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-4.no-gutters {
    padding: 0;
  }
  .col-lg-5 {
    max-width: 41.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-5.no-gutters {
    padding: 0;
  }
  .col-lg-6 {
    max-width: 50%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-6.no-gutters {
    padding: 0;
  }
  .col-lg-7 {
    max-width: 58.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-7.no-gutters {
    padding: 0;
  }
  .col-lg-8 {
    max-width: 66.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-8.no-gutters {
    padding: 0;
  }
  .col-lg-9 {
    max-width: 75%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-9.no-gutters {
    padding: 0;
  }
  .col-lg-10 {
    max-width: 83.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-10.no-gutters {
    padding: 0;
  }
  .col-lg-11 {
    max-width: 91.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-11.no-gutters {
    padding: 0;
  }
  .col-lg-12 {
    max-width: 100%;
    padding-inline: calc(16px / 2);
  }
  .col-lg-12.no-gutters {
    padding: 0;
  }
}
.col-xl-1 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-1.no-gutters {
  padding: 0;
}

.col-xl-2 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-2.no-gutters {
  padding: 0;
}

.col-xl-3 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-3.no-gutters {
  padding: 0;
}

.col-xl-4 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-4.no-gutters {
  padding: 0;
}

.col-xl-5 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-5.no-gutters {
  padding: 0;
}

.col-xl-6 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-6.no-gutters {
  padding: 0;
}

.col-xl-7 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-7.no-gutters {
  padding: 0;
}

.col-xl-8 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-8.no-gutters {
  padding: 0;
}

.col-xl-9 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-9.no-gutters {
  padding: 0;
}

.col-xl-10 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-10.no-gutters {
  padding: 0;
}

.col-xl-11 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-11.no-gutters {
  padding: 0;
}

.col-xl-12 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xl-12.no-gutters {
  padding: 0;
}

@media only screen and (min-width: 1200px) {
  .col-xl-1 {
    max-width: 8.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-1.no-gutters {
    padding: 0;
  }
  .col-xl-2 {
    max-width: 16.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-2.no-gutters {
    padding: 0;
  }
  .col-xl-3 {
    max-width: 25%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-3.no-gutters {
    padding: 0;
  }
  .col-xl-4 {
    max-width: 33.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-4.no-gutters {
    padding: 0;
  }
  .col-xl-5 {
    max-width: 41.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-5.no-gutters {
    padding: 0;
  }
  .col-xl-6 {
    max-width: 50%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-6.no-gutters {
    padding: 0;
  }
  .col-xl-7 {
    max-width: 58.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-7.no-gutters {
    padding: 0;
  }
  .col-xl-8 {
    max-width: 66.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-8.no-gutters {
    padding: 0;
  }
  .col-xl-9 {
    max-width: 75%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-9.no-gutters {
    padding: 0;
  }
  .col-xl-10 {
    max-width: 83.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-10.no-gutters {
    padding: 0;
  }
  .col-xl-11 {
    max-width: 91.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-11.no-gutters {
    padding: 0;
  }
  .col-xl-12 {
    max-width: 100%;
    padding-inline: calc(16px / 2);
  }
  .col-xl-12.no-gutters {
    padding: 0;
  }
}
.col-xxl-1 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-1.no-gutters {
  padding: 0;
}

.col-xxl-2 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-2.no-gutters {
  padding: 0;
}

.col-xxl-3 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-3.no-gutters {
  padding: 0;
}

.col-xxl-4 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-4.no-gutters {
  padding: 0;
}

.col-xxl-5 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-5.no-gutters {
  padding: 0;
}

.col-xxl-6 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-6.no-gutters {
  padding: 0;
}

.col-xxl-7 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-7.no-gutters {
  padding: 0;
}

.col-xxl-8 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-8.no-gutters {
  padding: 0;
}

.col-xxl-9 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-9.no-gutters {
  padding: 0;
}

.col-xxl-10 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-10.no-gutters {
  padding: 0;
}

.col-xxl-11 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-11.no-gutters {
  padding: 0;
}

.col-xxl-12 {
  width: 100%;
  padding-inline: calc(16px / 2);
}
.col-xxl-12.no-gutters {
  padding: 0;
}

@media only screen and (min-width: 1600px) {
  .col-xxl-1 {
    max-width: 8.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-1.no-gutters {
    padding: 0;
  }
  .col-xxl-2 {
    max-width: 16.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-2.no-gutters {
    padding: 0;
  }
  .col-xxl-3 {
    max-width: 25%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-3.no-gutters {
    padding: 0;
  }
  .col-xxl-4 {
    max-width: 33.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-4.no-gutters {
    padding: 0;
  }
  .col-xxl-5 {
    max-width: 41.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-5.no-gutters {
    padding: 0;
  }
  .col-xxl-6 {
    max-width: 50%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-6.no-gutters {
    padding: 0;
  }
  .col-xxl-7 {
    max-width: 58.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-7.no-gutters {
    padding: 0;
  }
  .col-xxl-8 {
    max-width: 66.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-8.no-gutters {
    padding: 0;
  }
  .col-xxl-9 {
    max-width: 75%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-9.no-gutters {
    padding: 0;
  }
  .col-xxl-10 {
    max-width: 83.3333333333%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-10.no-gutters {
    padding: 0;
  }
  .col-xxl-11 {
    max-width: 91.6666666667%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-11.no-gutters {
    padding: 0;
  }
  .col-xxl-12 {
    max-width: 100%;
    padding-inline: calc(16px / 2);
  }
  .col-xxl-12.no-gutters {
    padding: 0;
  }
}
.m-0 {
  margin: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.m-1 {
  margin: 4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.m-2 {
  margin: 8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.m-3 {
  margin: 12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.m-4 {
  margin: 16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.m-5 {
  margin: 20px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.m-6 {
  margin: 24px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.m-7 {
  margin: 28px !important;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.pt-7 {
  padding-top: 28px !important;
}

.pb-7 {
  padding-bottom: 28px !important;
}

.m-8 {
  margin: 32px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.m-9 {
  margin: 36px !important;
}

.mb-9 {
  margin-bottom: 36px !important;
}

.mt-9 {
  margin-top: 36px !important;
}

.pt-9 {
  padding-top: 36px !important;
}

.pb-9 {
  padding-bottom: 36px !important;
}

.m-10 {
  margin: 40px !important;
}

.mb-10 {
  margin-bottom: 40px !important;
}

.mt-10 {
  margin-top: 40px !important;
}

.pt-10 {
  padding-top: 40px !important;
}

.pb-10 {
  padding-bottom: 40px !important;
}

.m-11 {
  margin: 44px !important;
}

.mb-11 {
  margin-bottom: 44px !important;
}

.mt-11 {
  margin-top: 44px !important;
}

.pt-11 {
  padding-top: 44px !important;
}

.pb-11 {
  padding-bottom: 44px !important;
}

.m-12 {
  margin: 48px !important;
}

.mb-12 {
  margin-bottom: 48px !important;
}

.mt-12 {
  margin-top: 48px !important;
}

.pt-12 {
  padding-top: 48px !important;
}

.pb-12 {
  padding-bottom: 48px !important;
}

.m-13 {
  margin: 52px !important;
}

.mb-13 {
  margin-bottom: 52px !important;
}

.mt-13 {
  margin-top: 52px !important;
}

.pt-13 {
  padding-top: 52px !important;
}

.pb-13 {
  padding-bottom: 52px !important;
}

.m-14 {
  margin: 56px !important;
}

.mb-14 {
  margin-bottom: 56px !important;
}

.mt-14 {
  margin-top: 56px !important;
}

.pt-14 {
  padding-top: 56px !important;
}

.pb-14 {
  padding-bottom: 56px !important;
}

.m-15 {
  margin: 60px !important;
}

.mb-15 {
  margin-bottom: 60px !important;
}

.mt-15 {
  margin-top: 60px !important;
}

.pt-15 {
  padding-top: 60px !important;
}

.pb-15 {
  padding-bottom: 60px !important;
}

.m-16 {
  margin: 64px !important;
}

.mb-16 {
  margin-bottom: 64px !important;
}

.mt-16 {
  margin-top: 64px !important;
}

.pt-16 {
  padding-top: 64px !important;
}

.pb-16 {
  padding-bottom: 64px !important;
}

.m-17 {
  margin: 68px !important;
}

.mb-17 {
  margin-bottom: 68px !important;
}

.mt-17 {
  margin-top: 68px !important;
}

.pt-17 {
  padding-top: 68px !important;
}

.pb-17 {
  padding-bottom: 68px !important;
}

.m-18 {
  margin: 72px !important;
}

.mb-18 {
  margin-bottom: 72px !important;
}

.mt-18 {
  margin-top: 72px !important;
}

.pt-18 {
  padding-top: 72px !important;
}

.pb-18 {
  padding-bottom: 72px !important;
}

.m-19 {
  margin: 76px !important;
}

.mb-19 {
  margin-bottom: 76px !important;
}

.mt-19 {
  margin-top: 76px !important;
}

.pt-19 {
  padding-top: 76px !important;
}

.pb-19 {
  padding-bottom: 76px !important;
}

.m-20 {
  margin: 80px !important;
}

.mb-20 {
  margin-bottom: 80px !important;
}

.mt-20 {
  margin-top: 80px !important;
}

.pt-20 {
  padding-top: 80px !important;
}

.pb-20 {
  padding-bottom: 80px !important;
}

@media (min-width: 768px) {
  .m-0-md {
    margin: 0px !important;
  }
  .mb-0-md {
    margin-bottom: 0px !important;
  }
  .mt-0-md {
    margin-top: 0px !important;
  }
  .m-1-md {
    margin: 4px !important;
  }
  .mb-1-md {
    margin-bottom: 4px !important;
  }
  .mt-1-md {
    margin-top: 4px !important;
  }
  .m-2-md {
    margin: 8px !important;
  }
  .mb-2-md {
    margin-bottom: 8px !important;
  }
  .mt-2-md {
    margin-top: 8px !important;
  }
  .m-3-md {
    margin: 12px !important;
  }
  .mb-3-md {
    margin-bottom: 12px !important;
  }
  .mt-3-md {
    margin-top: 12px !important;
  }
  .m-4-md {
    margin: 16px !important;
  }
  .mb-4-md {
    margin-bottom: 16px !important;
  }
  .mt-4-md {
    margin-top: 16px !important;
  }
  .m-5-md {
    margin: 20px !important;
  }
  .mb-5-md {
    margin-bottom: 20px !important;
  }
  .mt-5-md {
    margin-top: 20px !important;
  }
  .m-6-md {
    margin: 24px !important;
  }
  .mb-6-md {
    margin-bottom: 24px !important;
  }
  .mt-6-md {
    margin-top: 24px !important;
  }
  .m-7-md {
    margin: 28px !important;
  }
  .mb-7-md {
    margin-bottom: 28px !important;
  }
  .mt-7-md {
    margin-top: 28px !important;
  }
  .m-8-md {
    margin: 32px !important;
  }
  .mb-8-md {
    margin-bottom: 32px !important;
  }
  .mt-8-md {
    margin-top: 32px !important;
  }
  .m-9-md {
    margin: 36px !important;
  }
  .mb-9-md {
    margin-bottom: 36px !important;
  }
  .mt-9-md {
    margin-top: 36px !important;
  }
  .m-10-md {
    margin: 40px !important;
  }
  .mb-10-md {
    margin-bottom: 40px !important;
  }
  .mt-10-md {
    margin-top: 40px !important;
  }
  .m-11-md {
    margin: 44px !important;
  }
  .mb-11-md {
    margin-bottom: 44px !important;
  }
  .mt-11-md {
    margin-top: 44px !important;
  }
  .m-12-md {
    margin: 48px !important;
  }
  .mb-12-md {
    margin-bottom: 48px !important;
  }
  .mt-12-md {
    margin-top: 48px !important;
  }
  .m-13-md {
    margin: 52px !important;
  }
  .mb-13-md {
    margin-bottom: 52px !important;
  }
  .mt-13-md {
    margin-top: 52px !important;
  }
  .m-14-md {
    margin: 56px !important;
  }
  .mb-14-md {
    margin-bottom: 56px !important;
  }
  .mt-14-md {
    margin-top: 56px !important;
  }
  .m-15-md {
    margin: 60px !important;
  }
  .mb-15-md {
    margin-bottom: 60px !important;
  }
  .mt-15-md {
    margin-top: 60px !important;
  }
  .m-16-md {
    margin: 64px !important;
  }
  .mb-16-md {
    margin-bottom: 64px !important;
  }
  .mt-16-md {
    margin-top: 64px !important;
  }
  .m-17-md {
    margin: 68px !important;
  }
  .mb-17-md {
    margin-bottom: 68px !important;
  }
  .mt-17-md {
    margin-top: 68px !important;
  }
  .m-18-md {
    margin: 72px !important;
  }
  .mb-18-md {
    margin-bottom: 72px !important;
  }
  .mt-18-md {
    margin-top: 72px !important;
  }
  .m-19-md {
    margin: 76px !important;
  }
  .mb-19-md {
    margin-bottom: 76px !important;
  }
  .mt-19-md {
    margin-top: 76px !important;
  }
  .m-20-md {
    margin: 80px !important;
  }
  .mb-20-md {
    margin-bottom: 80px !important;
  }
  .mt-20-md {
    margin-top: 80px !important;
  }
}
@media (max-width: 767px) {
  .d-none-md {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .m-0-lg {
    margin: 0px !important;
  }
  .mb-0-lg {
    margin-bottom: 0px !important;
  }
  .mt-0-lg {
    margin-top: 0px !important;
  }
  .m-1-lg {
    margin: 4px !important;
  }
  .mb-1-lg {
    margin-bottom: 4px !important;
  }
  .mt-1-lg {
    margin-top: 4px !important;
  }
  .m-2-lg {
    margin: 8px !important;
  }
  .mb-2-lg {
    margin-bottom: 8px !important;
  }
  .mt-2-lg {
    margin-top: 8px !important;
  }
  .m-3-lg {
    margin: 12px !important;
  }
  .mb-3-lg {
    margin-bottom: 12px !important;
  }
  .mt-3-lg {
    margin-top: 12px !important;
  }
  .m-4-lg {
    margin: 16px !important;
  }
  .mb-4-lg {
    margin-bottom: 16px !important;
  }
  .mt-4-lg {
    margin-top: 16px !important;
  }
  .m-5-lg {
    margin: 20px !important;
  }
  .mb-5-lg {
    margin-bottom: 20px !important;
  }
  .mt-5-lg {
    margin-top: 20px !important;
  }
  .m-6-lg {
    margin: 24px !important;
  }
  .mb-6-lg {
    margin-bottom: 24px !important;
  }
  .mt-6-lg {
    margin-top: 24px !important;
  }
  .m-7-lg {
    margin: 28px !important;
  }
  .mb-7-lg {
    margin-bottom: 28px !important;
  }
  .mt-7-lg {
    margin-top: 28px !important;
  }
  .m-8-lg {
    margin: 32px !important;
  }
  .mb-8-lg {
    margin-bottom: 32px !important;
  }
  .mt-8-lg {
    margin-top: 32px !important;
  }
  .m-9-lg {
    margin: 36px !important;
  }
  .mb-9-lg {
    margin-bottom: 36px !important;
  }
  .mt-9-lg {
    margin-top: 36px !important;
  }
  .m-10-lg {
    margin: 40px !important;
  }
  .mb-10-lg {
    margin-bottom: 40px !important;
  }
  .mt-10-lg {
    margin-top: 40px !important;
  }
  .m-11-lg {
    margin: 44px !important;
  }
  .mb-11-lg {
    margin-bottom: 44px !important;
  }
  .mt-11-lg {
    margin-top: 44px !important;
  }
  .m-12-lg {
    margin: 48px !important;
  }
  .mb-12-lg {
    margin-bottom: 48px !important;
  }
  .mt-12-lg {
    margin-top: 48px !important;
  }
  .m-13-lg {
    margin: 52px !important;
  }
  .mb-13-lg {
    margin-bottom: 52px !important;
  }
  .mt-13-lg {
    margin-top: 52px !important;
  }
  .m-14-lg {
    margin: 56px !important;
  }
  .mb-14-lg {
    margin-bottom: 56px !important;
  }
  .mt-14-lg {
    margin-top: 56px !important;
  }
  .m-15-lg {
    margin: 60px !important;
  }
  .mb-15-lg {
    margin-bottom: 60px !important;
  }
  .mt-15-lg {
    margin-top: 60px !important;
  }
  .m-16-lg {
    margin: 64px !important;
  }
  .mb-16-lg {
    margin-bottom: 64px !important;
  }
  .mt-16-lg {
    margin-top: 64px !important;
  }
  .m-17-lg {
    margin: 68px !important;
  }
  .mb-17-lg {
    margin-bottom: 68px !important;
  }
  .mt-17-lg {
    margin-top: 68px !important;
  }
  .m-18-lg {
    margin: 72px !important;
  }
  .mb-18-lg {
    margin-bottom: 72px !important;
  }
  .mt-18-lg {
    margin-top: 72px !important;
  }
  .m-19-lg {
    margin: 76px !important;
  }
  .mb-19-lg {
    margin-bottom: 76px !important;
  }
  .mt-19-lg {
    margin-top: 76px !important;
  }
  .m-20-lg {
    margin: 80px !important;
  }
  .mb-20-lg {
    margin-bottom: 80px !important;
  }
  .mt-20-lg {
    margin-top: 80px !important;
  }
}
@media (max-width: 991px) {
  .d-none-lg {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .m-0-xl {
    margin: 0px !important;
  }
  .mb-0-xl {
    margin-bottom: 0px !important;
  }
  .mt-0-xl {
    margin-top: 0px !important;
  }
  .m-1-xl {
    margin: 4px !important;
  }
  .mb-1-xl {
    margin-bottom: 4px !important;
  }
  .mt-1-xl {
    margin-top: 4px !important;
  }
  .m-2-xl {
    margin: 8px !important;
  }
  .mb-2-xl {
    margin-bottom: 8px !important;
  }
  .mt-2-xl {
    margin-top: 8px !important;
  }
  .m-3-xl {
    margin: 12px !important;
  }
  .mb-3-xl {
    margin-bottom: 12px !important;
  }
  .mt-3-xl {
    margin-top: 12px !important;
  }
  .m-4-xl {
    margin: 16px !important;
  }
  .mb-4-xl {
    margin-bottom: 16px !important;
  }
  .mt-4-xl {
    margin-top: 16px !important;
  }
  .m-5-xl {
    margin: 20px !important;
  }
  .mb-5-xl {
    margin-bottom: 20px !important;
  }
  .mt-5-xl {
    margin-top: 20px !important;
  }
  .m-6-xl {
    margin: 24px !important;
  }
  .mb-6-xl {
    margin-bottom: 24px !important;
  }
  .mt-6-xl {
    margin-top: 24px !important;
  }
  .m-7-xl {
    margin: 28px !important;
  }
  .mb-7-xl {
    margin-bottom: 28px !important;
  }
  .mt-7-xl {
    margin-top: 28px !important;
  }
  .m-8-xl {
    margin: 32px !important;
  }
  .mb-8-xl {
    margin-bottom: 32px !important;
  }
  .mt-8-xl {
    margin-top: 32px !important;
  }
  .m-9-xl {
    margin: 36px !important;
  }
  .mb-9-xl {
    margin-bottom: 36px !important;
  }
  .mt-9-xl {
    margin-top: 36px !important;
  }
  .m-10-xl {
    margin: 40px !important;
  }
  .mb-10-xl {
    margin-bottom: 40px !important;
  }
  .mt-10-xl {
    margin-top: 40px !important;
  }
  .m-11-xl {
    margin: 44px !important;
  }
  .mb-11-xl {
    margin-bottom: 44px !important;
  }
  .mt-11-xl {
    margin-top: 44px !important;
  }
  .m-12-xl {
    margin: 48px !important;
  }
  .mb-12-xl {
    margin-bottom: 48px !important;
  }
  .mt-12-xl {
    margin-top: 48px !important;
  }
  .m-13-xl {
    margin: 52px !important;
  }
  .mb-13-xl {
    margin-bottom: 52px !important;
  }
  .mt-13-xl {
    margin-top: 52px !important;
  }
  .m-14-xl {
    margin: 56px !important;
  }
  .mb-14-xl {
    margin-bottom: 56px !important;
  }
  .mt-14-xl {
    margin-top: 56px !important;
  }
  .m-15-xl {
    margin: 60px !important;
  }
  .mb-15-xl {
    margin-bottom: 60px !important;
  }
  .mt-15-xl {
    margin-top: 60px !important;
  }
  .m-16-xl {
    margin: 64px !important;
  }
  .mb-16-xl {
    margin-bottom: 64px !important;
  }
  .mt-16-xl {
    margin-top: 64px !important;
  }
  .m-17-xl {
    margin: 68px !important;
  }
  .mb-17-xl {
    margin-bottom: 68px !important;
  }
  .mt-17-xl {
    margin-top: 68px !important;
  }
  .m-18-xl {
    margin: 72px !important;
  }
  .mb-18-xl {
    margin-bottom: 72px !important;
  }
  .mt-18-xl {
    margin-top: 72px !important;
  }
  .m-19-xl {
    margin: 76px !important;
  }
  .mb-19-xl {
    margin-bottom: 76px !important;
  }
  .mt-19-xl {
    margin-top: 76px !important;
  }
  .m-20-xl {
    margin: 80px !important;
  }
  .mb-20-xl {
    margin-bottom: 80px !important;
  }
  .mt-20-xl {
    margin-top: 80px !important;
  }
}
@media (max-width: 1199px) {
  .d-none-xl {
    display: none !important;
  }
}
@media (min-width: 1600px) {
  .m-0-xxl {
    margin: 0px !important;
  }
  .mb-0-xxl {
    margin-bottom: 0px !important;
  }
  .mt-0-xxl {
    margin-top: 0px !important;
  }
  .m-1-xxl {
    margin: 4px !important;
  }
  .mb-1-xxl {
    margin-bottom: 4px !important;
  }
  .mt-1-xxl {
    margin-top: 4px !important;
  }
  .m-2-xxl {
    margin: 8px !important;
  }
  .mb-2-xxl {
    margin-bottom: 8px !important;
  }
  .mt-2-xxl {
    margin-top: 8px !important;
  }
  .m-3-xxl {
    margin: 12px !important;
  }
  .mb-3-xxl {
    margin-bottom: 12px !important;
  }
  .mt-3-xxl {
    margin-top: 12px !important;
  }
  .m-4-xxl {
    margin: 16px !important;
  }
  .mb-4-xxl {
    margin-bottom: 16px !important;
  }
  .mt-4-xxl {
    margin-top: 16px !important;
  }
  .m-5-xxl {
    margin: 20px !important;
  }
  .mb-5-xxl {
    margin-bottom: 20px !important;
  }
  .mt-5-xxl {
    margin-top: 20px !important;
  }
  .m-6-xxl {
    margin: 24px !important;
  }
  .mb-6-xxl {
    margin-bottom: 24px !important;
  }
  .mt-6-xxl {
    margin-top: 24px !important;
  }
  .m-7-xxl {
    margin: 28px !important;
  }
  .mb-7-xxl {
    margin-bottom: 28px !important;
  }
  .mt-7-xxl {
    margin-top: 28px !important;
  }
  .m-8-xxl {
    margin: 32px !important;
  }
  .mb-8-xxl {
    margin-bottom: 32px !important;
  }
  .mt-8-xxl {
    margin-top: 32px !important;
  }
  .m-9-xxl {
    margin: 36px !important;
  }
  .mb-9-xxl {
    margin-bottom: 36px !important;
  }
  .mt-9-xxl {
    margin-top: 36px !important;
  }
  .m-10-xxl {
    margin: 40px !important;
  }
  .mb-10-xxl {
    margin-bottom: 40px !important;
  }
  .mt-10-xxl {
    margin-top: 40px !important;
  }
  .m-11-xxl {
    margin: 44px !important;
  }
  .mb-11-xxl {
    margin-bottom: 44px !important;
  }
  .mt-11-xxl {
    margin-top: 44px !important;
  }
  .m-12-xxl {
    margin: 48px !important;
  }
  .mb-12-xxl {
    margin-bottom: 48px !important;
  }
  .mt-12-xxl {
    margin-top: 48px !important;
  }
  .m-13-xxl {
    margin: 52px !important;
  }
  .mb-13-xxl {
    margin-bottom: 52px !important;
  }
  .mt-13-xxl {
    margin-top: 52px !important;
  }
  .m-14-xxl {
    margin: 56px !important;
  }
  .mb-14-xxl {
    margin-bottom: 56px !important;
  }
  .mt-14-xxl {
    margin-top: 56px !important;
  }
  .m-15-xxl {
    margin: 60px !important;
  }
  .mb-15-xxl {
    margin-bottom: 60px !important;
  }
  .mt-15-xxl {
    margin-top: 60px !important;
  }
  .m-16-xxl {
    margin: 64px !important;
  }
  .mb-16-xxl {
    margin-bottom: 64px !important;
  }
  .mt-16-xxl {
    margin-top: 64px !important;
  }
  .m-17-xxl {
    margin: 68px !important;
  }
  .mb-17-xxl {
    margin-bottom: 68px !important;
  }
  .mt-17-xxl {
    margin-top: 68px !important;
  }
  .m-18-xxl {
    margin: 72px !important;
  }
  .mb-18-xxl {
    margin-bottom: 72px !important;
  }
  .mt-18-xxl {
    margin-top: 72px !important;
  }
  .m-19-xxl {
    margin: 76px !important;
  }
  .mb-19-xxl {
    margin-bottom: 76px !important;
  }
  .mt-19-xxl {
    margin-top: 76px !important;
  }
  .m-20-xxl {
    margin: 80px !important;
  }
  .mb-20-xxl {
    margin-bottom: 80px !important;
  }
  .mt-20-xxl {
    margin-top: 80px !important;
  }
}
@media (max-width: 1599px) {
  .d-none-xxl {
    display: none !important;
  }
}
:root {
  --container-size: 1156px;
  --container-lg-size: 1600px;
  --gutter-width: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
  --space-25: 100px;
  --space-40: 160px;
}
@media (min-width: 768px) {
  :root {
    --gutter-width: var(--space-10);
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter-width: var(--space-18);
  }
}

.container {
  width: 100%;
  max-width: var(--container-size);
  padding: 0 var(--gutter-width);
  margin: 0 auto;
}
.container-fluid {
  max-width: 100%;
  padding: 0 var(--gutter-width);
}
.container-lg {
  max-width: var(--container-lg-size);
}

:root {
  --white: #fff;
  --black: #000;
  --primary-50: #fbfbeb;
  --primary-100: #f5f6cb;
  --primary-200: #edec9b;
  --primary-300: #e3dd61;
  --primary-400: #d9ca36;
  --primary-500: #d3bd2a;
  --primary-600: #ae9020;
  --primary-700: #8b6a1d;
  --primary-800: #74561f;
  --primary-900: #634820;
  --primary-950: #39260f;
  --secondary1-50: #fcf6fd;
  --secondary1-100: #f7ecfb;
  --secondary1-200: #efd7f7;
  --secondary1-300: #e5b8ef;
  --secondary1-400: #d68ee4;
  --secondary1-500: #c061d4;
  --secondary1-600: #a140b2;
  --secondary1-700: #8b3497;
  --secondary1-800: #732c7c;
  --secondary1-900: #612966;
  --secondary1-950: #3d1042;
  --secondary2-50: #fff0f3;
  --secondary2-100: #ffe2e8;
  --secondary2-200: #ffcadd;
  --secondary2-300: #ff9fb7;
  --secondary2-400: #ff6991;
  --secondary2-500: #fe356f;
  --secondary2-600: #ed135d;
  --secondary2-700: #c8084e;
  --secondary2-800: #a70a48;
  --secondary2-900: #8f0c44;
  --secondary2-950: #500120;
  --neutral-50: #f6f7f9;
  --neutral-100: #edeef1;
  --neutral-200: #d7dae0;
  --neutral-300: #b3b9c6;
  --neutral-400: #8a94a6;
  --neutral-500: #667085;
  --neutral-600: #565e73;
  --neutral-700: #464c5e;
  --neutral-800: #3d424f;
  --neutral-900: #363a44;
  --neutral-950: #24262d;
  --info-50: #eff8ff;
  --info-100: #daeeff;
  --info-200: #bee2ff;
  --info-300: #91d0ff;
  --info-400: #5db5fd;
  --info-500: #2e90fa;
  --info-600: #2176ef;
  --info-700: #1960dc;
  --info-800: #1b4bd2;
  --info-900: #1c448c;
  --info-950: #162a55;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #ffcdc9;
  --error-300: #fdaaa4;
  --error-400: #f97970;
  --error-500: #f04438;
  --error-600: #de3024;
  --error-700: #bb241a;
  --error-800: #9a221a;
  --error-900: #80231c;
  --error-950: #460d09;
  --warning-50: #fffbed;
  --warning-100: #fff7d4;
  --warning-200: #ffeba8;
  --warning-300: #ffda71;
  --warning-400: #ffbf38;
  --warning-500: #fda712;
  --warning-600: #f79009;
  --warning-700: #c56a09;
  --warning-800: #9d530f;
  --warning-900: #7e4510;
  --warning-950: #442106;
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a8f2c6;
  --success-300: #6fe6a7;
  --success-400: #36d183;
  --success-500: #12b76a;
  --success-600: #079455;
  --success-700: #057747;
  --success-800: #075e3a;
  --success-900: #074d32;
  --success-950: #022c1c;
  --primary-color: var(--primary-400);
  --secondary-color: var(--secondary1-700);
  --secondary-color-2: var(--secondary2-700);
  --primary-text: var(--neutral-950);
  --primary-body-text: var(--neutral-900);
  --primary-subtext: var(--neutral-600);
  --disable-color: var(--neutral-400);
  --divider-color: var(--neutral-200);
  --success-color: var(--success-700);
  --focus-color: var(--info-700);
  --warning-color: var(--warning-800);
  --error-color: var(--error-700);
  --breed-background-light: #e7f5f5;
  --breed-primary: #109f99;
  --relief-and-resiliance: #328fad;
}

:root {
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
  	0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06),
  	0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
  	0px 12px 16px -4px rgba(16, 24, 40, 0.1);
  --shadow-xl: 0px 12px 24px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.25);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.2);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-3xl {
  box-shadow: var(--shadow-3xl);
}

.color-primary {
  color: var(--primary-700);
}

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

.color-secondary1 {
  color: var(--secondary1-700);
}

.color-secondary2 {
  color: var(--secondary2-700);
}

.color-disable {
  color: var(--neutral-400);
}

.color-success {
  color: var(--success-700);
}

.color-error {
  color: var(--error-700);
}

.color-boldPrimary {
  color: var(--primary-200);
}

.color-subText {
  color: var(--neutral-900);
}

@font-face {
  font-family: "Futura";
  src: url("assets/fonts/Futura-Light.eot");
  src: url("assets/fonts/Futura-Light.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Futura-Light.woff2") format("woff2"), url("assets/fonts/Futura-Light.woff") format("woff"), url("assets/fonts/Futura-Light.ttf") format("truetype"), url("assets/fonts/Futura-Light.svg#Futura-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("assets/fonts/Futura-Bold.eot");
  src: url("assets/fonts/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Futura-Bold.woff2") format("woff2"), url("assets/fonts/Futura-Bold.woff") format("woff"), url("assets/fonts/Futura-Bold.ttf") format("truetype"), url("assets/fonts/Futura-Bold.svg#Futura-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("assets/fonts/Futura-Medium.eot");
  src: url("assets/fonts/Futura-Medium.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Futura-Medium.woff2") format("woff2"), url("assets/fonts/Futura-Medium.woff") format("woff"), url("assets/fonts/Futura-Medium.ttf") format("truetype"), url("assets/fonts/Futura-Medium.svg#Futura-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-family: "Futura", "san-serif";
  --sdg-font-family: "Oswald", sans-serif;
  --fontsize-heading-1: 3.5rem;
  --fontsize-heading-2: 2.5rem;
  --fontsize-heading-3: 2rem;
  --fontsize-heading-4: 1.75rem;
  --fontsize-heading-5: 1.5rem;
  --fontsize-heading-6: 1.25rem;
  --fontsize-body-xs: 12px;
  --fontsize-body-sm: 14px;
  --fontsize-body-md: 14px;
  --fontsize-body-lg: 16px;
  --fontsize-body-xl: 18px;
  --weight-light: 300;
  --weight-medium: 500;
  --weight-bold: 700;
}
@media (min-width: 768px) {
  :root {
    --fontsize-heading-1: 4rem;
    --fontsize-heading-2: 3rem;
    --fontsize-heading-3: 2.5rem;
    --fontsize-heading-4: 2rem;
    --fontsize-heading-5: 1.75rem;
    --fontsize-heading-6: 1.5rem;
    --fontsize-body-md: 16px;
    --fontsize-body-lg: 18px;
    --fontsize-body-xl: 20px;
  }
}
@media (min-width: 992px) {
  :root {
    --fontsize-heading-1: 4.5rem;
    --fontsize-heading-2: 3.75rem;
    --fontsize-heading-3: 3rem;
    --fontsize-heading-4: 2.25rem;
    --fontsize-heading-5: 1.875rem;
  }
}

h1 {
  font-size: var(--fontsize-heading-1);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fontsize-heading-2);
  line-height: 1.26;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fontsize-heading-3);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--fontsize-heading-4);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h5 {
  font-size: var(--fontsize-heading-5);
  line-height: 1.25;
}

h6 {
  font-size: var(--fontsize-heading-6);
  line-height: 1.3;
}

.body-xs {
  font-size: var(--fontsize-body-xs);
  line-height: 1.5;
}

.body-sm {
  font-size: var(--fontsize-body-sm);
  line-height: 1.42;
}

.body-md {
  font-size: var(--fontsize-body-md);
  line-height: 1.5;
}

.body-lg {
  font-size: var(--fontsize-body-lg);
  line-height: 1.56;
}

.body-xl {
  font-size: var(--fontsize-body-xl);
  line-height: 1.5;
}

.weight-light {
  font-weight: var(--weight-light);
}

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

.weight-bold {
  font-weight: var(--weight-bold);
}

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

@keyframes textBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0 0;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  outline: 0;
  border: 0;
  font-family: var(--font-family);
  font-weight: var(--weight-medium);
  color: var(--primary-text);
  border-radius: 4px;
  box-shadow: var(--shadow-xs);
  transition: 0.4s all ease-in;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.btn span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  line-height: 1;
}
.btn:before {
  content: "";
  display: inline-flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  z-index: 0;
  transition: 0.3s all ease-in;
}
.btn:hover {
  transition: 0.3s all ease-in;
}
.btn:hover::before {
  left: 0;
}
.btn:disabled {
  opacity: 55%;
  pointer-events: none;
}
.btn-xs {
  height: 36px;
  padding-inline: var(--space-4);
  font-size: var(--fontsize-body-sm);
}
.btn-xs span {
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .btn-xs {
    padding-inline: 16px;
  }
  .btn-xs span {
    gap: 8px;
  }
}
.btn-sm {
  height: 40px;
  padding-inline: var(--space-4);
  font-size: var(--fontsize-body-sm);
}
.btn-sm span {
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .btn-sm {
    padding-inline: 20px;
  }
  .btn-sm span {
    gap: 10px;
  }
}
.btn-md {
  height: 44px;
  padding-inline: var(--space-4);
  font-size: var(--fontsize-body-md);
}
.btn-md span {
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .btn-md {
    padding-inline: 24px;
  }
  .btn-md span {
    gap: 12px;
  }
}
.btn-lg {
  height: 48px;
  padding-inline: var(--space-4);
  font-size: var(--fontsize-body-md);
}
.btn-lg span {
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .btn-lg {
    padding-inline: 28px;
  }
  .btn-lg span {
    gap: 14px;
  }
}
.btn-filled {
  background-color: var(--primary-color);
  border: 3px solid var(--primary-color);
}
.btn-filled:before {
  background-color: var(--primary-500);
}
.btn-filled:hover, .btn-filled:active {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  transition: 0.4s all ease-in;
}
.btn-filled:focus {
  border-color: var(--focus-color);
}
.btn-filled.light {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}
.btn-filled.light:hover, .btn-filled.light:active {
  background-color: var(--primary-400);
  border-color: var(--primary-400);
}
.btn-filled.light:hover:before, .btn-filled.light:active:before {
  background-color: var(--primary-400);
}
.btn-outlined {
  border: 2px solid var(--secondary1-500);
  background-color: transparent;
}
.btn-outlined:before {
  background-color: var(--secondary1-100);
}
.btn-outlined:hover, .btn-outlined:active {
  background-color: var(--secondary1-100);
}
.btn-outlined:active {
  border-width: 3px;
  border-color: var(--focus-color);
}
.btn-outlined.light {
  color: var(--white);
}
.btn-outlined.light:hover, .btn-outlined.light:active {
  background-color: transparent;
}
.btn-outlined.light:hover span, .btn-outlined.light:active span {
  color: var(--white);
}
.btn-outlined.light:hover span svg,
.btn-outlined.light:hover span path, .btn-outlined.light:active span svg,
.btn-outlined.light:active span path {
  fill: var(--white);
}
.btn-outlined.light:hover:before, .btn-outlined.light:active:before {
  background-color: rgba(255, 255, 255, 0.15);
}
.btn-text {
  background-color: transparent;
  color: var(--secondary-color);
  border: 3px solid transparent;
  padding-inline: var(--space-2);
  box-shadow: none;
  transition: background 0.3s ease-in;
}
.btn-text:hover {
  background-color: var(--secondary1-100);
  transition: background 0.3s ease-in;
  color: var(--secondary-color);
}
.btn-text:before {
  border-radius: 4px;
  background-color: var(--secondary1-100);
}
.btn-text.primary {
  color: var(--primary-700);
}
.btn-text.primary:active {
  background-color: var(--primary-100);
  color: var(--primary-700);
}
.btn-text.primary:before {
  background-color: var(--primary-100);
}
.btn-text.light {
  color: var(--white);
}
.btn-text.light:hover, .btn-text.light:active {
  background-color: transparent;
}
.btn-text.light:hover span, .btn-text.light:active span {
  color: var(--white);
}
.btn-text.light:hover span svg,
.btn-text.light:hover span path, .btn-text.light:active span svg,
.btn-text.light:active span path {
  fill: var(--white);
}
.btn-text.light:hover:before, .btn-text.light:active:before {
  background-color: rgba(255, 255, 255, 0.15);
}

.link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-700);
  border: 3px solid transparent;
  cursor: pointer;
  background-color: transparent;
}
.link-text {
  text-decoration: underline;
}
.link-xs {
  padding: 0;
  font-size: var(--fontsize-body-xs);
  gap: 8px;
}
.link-sm {
  padding: 0;
  font-size: var(--fontsize-body-sm);
  gap: 8px;
}
.link-md {
  padding: 0;
  font-size: var(--fontsize-body-md);
  gap: 10px;
}
.link-lg {
  padding: 0;
  font-size: var(--fontsize-body-lg);
  gap: 10px;
}
.link:hover, .link:active {
  color: var(--secondary-color);
}
.link:hover svg,
.link:hover path, .link:active svg,
.link:active path {
  fill: var(--secondary-color);
}
.link.light {
  color: var(--primary-200);
}
.link.light:hover, .link.light:active {
  background-color: transparent;
}
.link.light:hover span, .link.light:active span {
  color: var(--primary-200);
}
.link.light:hover span svg,
.link.light:hover span path, .link.light:active span svg,
.link.light:active span path {
  color: var(--primary-200);
}
.link.light:hover:before, .link.light:active:before {
  background-color: rgba(255, 255, 255, 0.15);
}
.link:active {
  border-color: var(--focus-color);
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--space-7);
}
.form-checkbox {
  margin-bottom: var(--space-7);
  display: flex;
  gap: var(--space-2);
}
.form-label {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: var(--fontsize-body-sm);
}
.form-control {
  box-shadow: var(--shadow-xs);
  background-color: var(--white);
  border: 1px solid var(--divider-color);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
}
.form-control::-moz-placeholder {
  color: var(--neutral-600);
}
.form-control::placeholder {
  color: var(--neutral-600);
}
.form-control {
  /* Chrome, Safari, Edge, Opera */
}
.form-control::-webkit-outer-spin-button, .form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-control {
  /* Firefox */
}
.form-control[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.form-control[type=date] {
  color: var(--neutral-600);
}
.form-control[type=date]:valid {
  color: var(--primary-text);
}
.form-control-area {
  width: 100%;
  resize: none;
  font-family: var(--font-family);
  font-size: var(--fontsize-body-md);
  font-weight: var(--weight-light);
}
.form-control:active, .form-control:focus {
  border-color: var(--neutral-400);
  outline: none;
}
.form-text {
  font-size: var(--fontsize-body-xs);
  font-weight: var(--weight-light);
  margin-top: 6px;
  position: absolute;
  top: 100%;
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.form-text.error {
  color: var(--error-color);
}
.form-iconField {
  position: relative;
}
.form-iconField .form-icon {
  display: inline-flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--space-3);
}
.form-iconField .form-control {
  width: 100%;
  padding-inline-start: var(--space-10);
}
.form-iconField.endIcon .form-icon {
  left: unset;
  right: var(--space-3);
}
.form-iconField.endIcon .form-control {
  padding-inline-start: var(--space-3);
  padding-inline-end: var(--space-10);
}
.form-label-xs {
  font-size: var(--fontsize-body-xs);
}
.form-control-xs {
  height: 36px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.form-label-sm {
  font-size: var(--fontsize-body-xs);
}
.form-control-sm {
  height: 40px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.form-label-md {
  font-size: var(--fontsize-body-sm);
}
.form-control-md {
  height: 44px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}
.form-label-lg {
  font-size: var(--fontsize-body-sm);
}
.form-control-lg {
  height: 48px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}

.select {
  position: relative;
  --option-height: 48px;
}
.select__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.select__toggle:not(.btn) {
  padding: var(--space-3);
  font-size: var(--fontsize-body-md);
  border: 1px solid var(--divider-color);
  border-radius: 4px;
  background-color: var(--white);
  font-weight: var(--weight-light);
}
.select__toggle .dropdown-icon {
  color: var(--primary-text);
}
.select__toggle-xs {
  height: 36px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.select__toggle-sm {
  height: 40px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.select__toggle-md {
  height: 44px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}
.select__toggle-lg {
  height: 48px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}
.select__options {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 0;
  width: 100%;
  background-color: var(--white);
  z-index: 10;
  list-style: none;
  padding: 0;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--divider-color);
  max-height: calc(var(--option-height) * 4.5);
  overflow-y: auto;
}
.select__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fontsize-body-md);
  font-weight: var(--weight-light);
  cursor: pointer;
  height: var(--option-height);
  gap: var(--space-2);
}
.select__option .tick {
  display: none;
}
.select__option:hover {
  background-color: var(--neutral-50);
}
.select__option.selected {
  color: var(--secondary-color);
}
.select__option.selected .tick {
  display: inline-flex;
}
.select__option__selected {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  text-align: start;
}
.select.open .select__options {
  display: block;
}
.select.open .select__toggle[aria-expanded=true] {
  display: flex;
}
.select.open .select__toggle:not(.btn)[aria-expanded=true] {
  border-color: var(--neutral-400);
}

.checkbox {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox__input:checked ~ .checkbox__mark {
  background-color: var(--primary-50);
  border-color: var(--primary-600);
}
.checkbox__input:checked ~ .checkbox__mark:after {
  content: "";
  position: absolute;
  display: block;
  left: 2px;
  top: 3px;
  width: 8px;
  height: 4.5px;
  border: solid var(--primary-600);
  border-width: 0 2px 2px 0;
  transform: scaleX(-1) rotate(45deg);
}
.checkbox__mark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: var(--white);
  border: 2px solid var(--divider-color);
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.checkbox__mark:hover {
  background-color: var(--neutral-50);
  border-color: var(--neutral-300);
}
.checkbox__mark:focus {
  border-width: 2px;
  border-color: var(--focus-color);
}
.checkbox__text {
  font-size: var(--fontsize-body-md);
}
.checkbox__subtext {
  font-size: var(--fontsize-body-md);
  font-weight: var(--weight-light);
}
.checkbox.disabled {
  opacity: 55%;
}

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.radios .radio {
  width: calc(50% - 8px);
}
.radios.one .radio {
  width: calc(100% - 0px);
}
.radios.three .radio {
  width: calc(33.3333333333% - 10.6666666667px);
}

.radio input {
  position: absolute;
  inset: 0;
  display: none;
}
.radio input:checked ~ .radio-mark {
  border-color: var(--primary-600);
  box-shadow: var(--shadow-md);
  transition: all 0.4s ease-in;
}
.radio .radio-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-medium);
  color: var(--primary-text);
  text-align: center;
  border: 1px solid var(--divider-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.4s ease-in;
  width: 100%;
}
.radio .radio-mark:hover {
  background-color: var(--neutral-50);
  border-color: var(--neutral-300);
  transition: all 0.4s ease-in;
}
.radio.radio-xs .radio-mark {
  height: 36px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.radio.radio-sm .radio-mark {
  height: 40px;
  padding-inline: 12px;
  font-size: var(--fontsize-body-sm);
}
.radio.radio-md .radio-mark {
  height: 44px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}
.radio.radio-lg .radio-mark {
  height: 48px;
  padding-inline: 16px;
  font-size: var(--fontsize-body-md);
}

/* Base styles for the radio button */
input[type=radio] {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid var(--divider-color);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
  background-color: var(--white);
  margin: 0;
}
input[type=radio].small {
  width: 16px;
  height: 16px;
}
input[type=radio] {
  /* Styling when the radio button is checked */
}
input[type=radio]:checked {
  border-color: var(--primary-600);
}
input[type=radio] {
  /* Inner circle for checked state */
}
input[type=radio]:checked::before {
  content: "";
  display: block;
  width: 10px; /* Size of the inner circle */
  height: 10px;
  background-color: var(--primary-600); /* Inner circle color */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type=radio] {
  /* When the radio button is hovered */
}
input[type=radio]:hover {
  background-color: var(--neutral-50);
}
input[type=radio]:focus {
  outline: 1px solid var(--focus-color);
  border-color: var(--focus-color);
}

.plainRadio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pill {
  background-color: var(--secondary1-50);
  border: 1px solid var(--secondary1-200);
  border-radius: 16px;
  color: var(--secondary-color);
  padding: var(--space-1) var(--space-3);
}
.pill.success {
  border-color: var(--success-200);
  background-color: var(--success-50);
  color: var(--success-color);
}
.pill.warning {
  border-color: var(--warning-200);
  background-color: var(--warning-50);
  color: var(--warning-color);
}
.pill.error {
  border-color: var(--error-200);
  background-color: var(--error-50);
  color: var(--error-color);
}
.pill.filter {
  border-color: var(--neutral-800);
  background-color: var(--white);
  color: var(--primary-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--space-6);
  cursor: pointer;
}
.pill.filter.selected, .pill.filter:hover {
  background-color: var(--neutral-800);
  color: var(--white);
}

.stepper {
  display: flex;
  gap: var(--space-6);
  --circle-size: 24px;
}
.stepper .step {
  text-align: center;
  flex: 1;
}
.stepper .step:not(:last-child) {
  position: relative;
}
.stepper .step:not(:last-child):after {
  content: "";
  display: inline-flex;
  width: calc(100% - var(--circle-size));
  height: 1px;
  background-color: var(--divider-color);
  position: absolute;
  top: calc(var(--circle-size) / 2);
  left: calc(50% + var(--circle-size) / 2 + var(--space-3));
}
.stepper .step .circle {
  width: var(--circle-size);
  height: var(--circle-size);
  margin: 0 auto;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  color: var(--primary-subtext);
  font-size: var(--fontsize-body-xs);
  border: 1px solid var(--divider-color);
}
.stepper .step p {
  margin-top: var(--space-3);
  font-size: var(--fontsize-body-sm);
  color: var(--primary-subtext);
}
.stepper .step.active .circle {
  border-color: var(--primary-600);
  color: var(--primary-700);
  background-color: var(--primary-50);
}
.stepper .step.active p {
  color: var(--primary-text);
}
.stepper .step.completed .circle {
  border-color: var(--success-color);
  background-color: var(--success-color);
  color: var(--white);
}
.stepper .step.completed p {
  color: var(--primary-text);
}

.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}
.tabs__header {
  display: flex;
}
.tabs__button {
  position: relative;
  flex: 1;
  padding: var(--space-7) var(--space-10) var(--space-1);
  text-align: center;
  background: none;
  border: none;
  border-top: 2px solid var(--divider-color);
  cursor: pointer;
  font-size: var(--fontsize-body-sm);
  transition: all 0.3s ease;
  color: var(--neutral-600);
  font-family: var(--font-family);
  font-weight: var(--weight-medium);
  transition: 0.2s all ease;
}
.tabs__button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 10px;
  border: solid transparent;
  border-width: 10px 12px 0 12px;
  transition: 0.2s all ease;
}
.tabs__button:hover {
  color: var(--primary-text);
}
.tabs__button:hover:before {
  border-top-color: var(--neutral-100);
  transition: 0.2s all ease;
}
.tabs__button.active {
  border-color: var(--primary-600);
  color: var(--primary-text);
}
.tabs__button.active:before {
  border-top-color: var(--primary-500);
  transition: 0.2s all ease;
}
.tabs__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  animation: fadeIn 0.3s ease;
}
.tabs__panel.active {
  display: flex;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  --arrow-size: 12px;
}
.tooltip__btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip__btn:hover + .tooltip__text, .tooltip__btn:focus + .tooltip__text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.tooltip__text {
  position: absolute;
  bottom: calc(100% + var(--arrow-size));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--white);
  padding: var(--space-3);
  font-size: 12px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translate(-50%, 10px);
  width: -moz-max-content;
  width: max-content;
  max-width: 328px;
}
.tooltip__text:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 10px;
  border: solid transparent;
  border-width: 10px 12px 0 12px;
  border-top-color: var(--white);
}

.accordion__header {
  display: flex;
  background-color: transparent;
  border: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-7) 0;
  font-size: var(--fontsize-body-lg);
  cursor: pointer;
  text-align: start;
  border-top: 1px solid var(--divider-color);
  font-family: var(--font-family);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
}
.accordion__header svg {
  transform: scaleY(-1);
  transition: 0.2s all ease;
}
.accordion__header svg:hover rect {
  fill: var(--neutral-50);
  transition: 0.3s all ease-in;
}
.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: 0.2s all ease-in;
}
.accordion__item.open .accordion__header svg {
  transform: scaleY(1);
  transition: 0.2s all ease;
}
.accordion__item.open .accordion__content {
  max-height: 1000px;
  padding-bottom: var(--space-7);
  transition: 0.2s all ease-in;
}

.carousal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-left: 40%;
  margin-top: var(--space-6);
}
.carousal__actions button {
  display: inline-flex;
  background: transparent;
  border-color: transparent;
  outline: unset;
  padding: 0;
  cursor: pointer;
  border: 0;
}
.carousal__actions button:hover rect {
  fill: var(--neutral-50);
  transition: 0.3s all ease-in;
}
.carousal__actions button:disabled {
  opacity: 0.55;
  pointer-events: none;
}
.carousal .splide__pagination {
  bottom: unset;
  top: calc(100% + var(--space-6) + 12px);
  justify-content: flex-start;
  padding: 0;
}
.carousal .splide__pagination__page {
  background-color: var(--neutral-950);
  opacity: 0.14;
  cursor: pointer;
}
.carousal .splide__pagination__page.is-active {
  opacity: 1;
  background-color: var(--neutral-950);
  transform: scale(1);
}
.carousal.light .splide__pagination__page {
  background-color: var(--white);
}
@media (min-width: 768px) {
  .carousal {
    margin-top: var(--space-11);
  }
}

.toast {
  --toast-side-space: var(--space-18);
  --toast-size: calc(100vw - var(--space-6));
  position: fixed;
  z-index: 1000;
  top: var(--toast-side-space);
  right: var(--space-8);
  background-color: var(--white);
  border: 1px solid var(--divider-color);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: var(--toast-size);
  border-radius: var(--space-3);
  display: flex;
  gap: var(--space-3);
  transform: translateX(calc(100% + var(--toast-side-space) + var(--toast-size)));
  transition: 0.3s all ease-in;
}
.toast.show {
  transform: translateX(0);
  transition: 0.3s all ease-in;
}
.toast__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
@media (min-width: 992px) {
  .toast {
    --toast-size: 400px;
  }
}

.pagination {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: var(--space-3);
  --button-size: 40px;
}
.pagination__prev, .pagination__next, .pagination__current, .pagination__input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size);
  height: var(--button-size);
  min-width: var(--button-size);
  background-color: transparent;
  border: 1px solid var(--neutral-100);
  border-radius: var(--space-1);
  padding: var(--space-1);
  line-height: 1;
  cursor: pointer;
}
.pagination__prev.disabled, .pagination__next.disabled, .pagination__current.disabled, .pagination__input.disabled {
  opacity: 40%;
}
.pagination__current, .pagination__input {
  text-align: center;
  color: var(--primary-text);
  font-size: var(--fontsize-body-md);
  font-weight: var(--weight-medium);
  font-family: var(--font-family);
  line-height: 1;
  /* Chrome, Safari, Edge, Opera */
}
.pagination__current::-webkit-outer-spin-button, .pagination__current::-webkit-inner-spin-button, .pagination__input::-webkit-outer-spin-button, .pagination__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination__current, .pagination__input {
  /* Firefox */
}
.pagination__current[type=number], .pagination__input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.progressBar {
  width: 100%;
  background-color: var(--neutral-200);
  border-radius: var(--space-9);
  height: 30px;
  margin-block: var(--space-1);
  transition: 0.3s all ease-in-out;
  position: relative;
}
.progressBar__progress {
  background-color: var(--page-primary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  border-radius: var(--space-9);
  transition: 0.3s all ease-in-out;
}
.progressBar__marker {
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 20px;
  top: 100%;
  background-color: var(--neutral-200);
  border-radius: 0 0 var(--space-6) var(--space-6);
  z-index: 1;
  transform: translateX(-50%);
}
.progressBar__marker_1 {
  left: 25%;
}
.progressBar__marker_2 {
  left: 50%;
}
.progressBar__marker_3 {
  left: 75%;
}
.progressBar__marker.active {
  background-color: var(--page-primary);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: var(--space-5);
  overflow: auto;
}
.modal.is-visible {
  display: flex;
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__content {
  margin: auto;
  background-color: var(--white);
  padding: var(--space-4);
  border-radius: 8px;
  position: relative;
  max-width: 90%;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: auto;
}
.modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: flex-end;
  margin-top: var(--space-10);
}
.modal.medium .modal__content {
  max-width: 760px;
}
.modal#homepageModal .modal__content {
  max-width: 900px;
  padding: var(--space-5);
}

.modalThankYou {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-5) var(--space-12) var(--space-12);
}
.modalThankYou__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

:root {
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 992px;
  --breakpoint-desktop: 1200px;
  --breakpoint-extralarge: 1600px;
}

body {
  font-family: var(--font-family);
  color: var(--primary-text);
  line-height: 1.25;
  font-weight: var(--weight-medium);
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--divider-color);
}

img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.d-none {
  display: none !important;
}

.opacity-0 {
  opacity: 0;
}

:root {
  --header-height: 84px;
}

.header {
  position: sticky;
  top: 0;
  background-color: var(--white);
  z-index: 20;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: var(--space-10);
  height: var(--header-height);
  border-bottom: 1px solid var(--neutral-800);
}
.header .logo {
  max-height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
.header__bar {
  display: flex;
  gap: var(--space-10);
}
.header__quickActions {
  display: none;
  gap: var(--space-3);
  margin-left: auto;
}
.header__quickActions .select__options {
  min-width: 160px;
}
.header__quickActions .select__option {
  padding-inline: var(--space-3);
}
.header__quickActions .select__option a {
  color: var(--primary-text);
  text-decoration: none;
}
.header__quickActions .green {
  color: var(--success-800);
}
.header__quickActions .green:before, .header__quickActions .green.btn-text:hover {
  background-color: var(--success-50);
}
.header__quickActions .green:hover {
  border-color: var(--success-50);
}
.header__quickActions .green:hover:before {
  background-color: var(--success-50);
}
@media (min-width: 768px) {
  .header__quickActions {
    display: inline-flex;
    align-items: center;
  }
}
@media (min-width: 1200px) {
  .header {
    margin-bottom: var(--space-15);
  }
  .header .container-fluid {
    padding-inline: var(--space-8);
  }
}

.navbar {
  padding: 0;
  display: none;
}
.navbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}
.navbar__item {
  position: relative;
  padding-bottom: 40px;
  margin-bottom: -40px;
}
.navbar__item:hover .navbar__link {
  color: var(--primary-700);
}
.navbar__item:hover .navbar__link > svg {
  transform: scaleY(-1);
  transition: 0.2s all ease-in;
}
.navbar__item:hover .navbar__link > svg,
.navbar__item:hover .navbar__link > svg path {
  fill: var(--primary-700);
}
.navbar__item:hover:after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-700);
  transition: 0.2s all ease-in;
}
.navbar__item--has-mega-menu:hover .mega-menu, .navbar__item--has-mega-menu:hover .megaMenu {
  display: flex;
}
.navbar__item:hover .menu {
  display: block;
}
.navbar__link {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: background-color 0.3s ease;
  color: var(--neutral-800);
  font-size: var(--fontsize-body-md);
}
@media (min-width: 1200px) {
  .navbar {
    display: block;
  }
}

.mega-menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  max-height: calc(100% - var(--header-height));
  background-color: var(--white);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  flex-wrap: wrap;
  width: 100vw;
}
.mega-menu__content > ul {
  margin-bottom: var(--space-3);
}
.mega-menu__heading {
  padding: var(--space-2) var(--space-6);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fontsize-body-sm);
  text-decoration: none;
  cursor: pointer;
}
.mega-menu__item {
  padding: var(--space-2) var(--space-6);
}
.mega-menu__item:not(:last-child) {
  margin-bottom: var(--space-2);
}
.mega-menu__item a {
  text-decoration: none;
  color: var(--primary-text);
}
.mega-menu__item:hover {
  background-color: var(--neutral-50);
}
.mega-menu__subtext {
  margin-top: var(--space-1);
  color: var(--neutral-600);
}
.mega-menu__box {
  padding-block: var(--space-8);
}
.mega-menu__footer {
  padding: var(--space-6) var(--space-8);
  background-color: var(--primary-50);
  width: 100%;
}
.mega-menu__footer__box {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}
.mega-menu__footer__box .btn:hover {
  background-color: transparent;
}
.mega-menu__footer__box .btn:hover::before {
  content: unset;
}
.mega-menu__footer__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.mega-menu__footer__text p {
  margin: 0;
}

.menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  background-color: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--divider-color);
  padding: var(--space-4) var(--space-2);
}
.menu li {
  min-width: 350px;
}

.hamburger {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.hamburger .crossIcon {
  display: none;
}
.hamburger__box {
  position: fixed;
  display: flex;
  flex-direction: column;
  left: 0;
  top: var(--header-height);
  height: calc(100% - var(--header-height));
  background-color: var(--white);
  width: 100%;
  transform: translateX(-100%);
  transition: 0.3s all ease-in;
}
.hamburger__menu {
  padding: var(--space-4);
}
.hamburger__menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  color: var(--primary-text);
  text-decoration: none;
  font-size: var(--fontsize-body-md);
}
.hamburger__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-top: auto;
  border-top: 1px solid var(--divider-color);
  background-color: var(--white);
  z-index: 2;
}
.hamburger__submenu {
  position: absolute;
  width: 100%;
  height: calc(100vh - 140px - var(--header-height));
  overflow-y: auto;
  background: var(--white);
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  padding: var(--space-4);
}
.hamburger__submenu .hamburger__menu__item {
  padding-inline-start: var(--space-7);
}
.hamburger__submenu.active {
  transform: translateX(0);
}
.hamburger__accordion {
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--divider-color);
}
.hamburger__accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.hamburger__accordion__details {
  padding-inline-start: var(--space-7);
  padding-bottom: var(--space-3);
  transition: 0.3s all ease;
}
.hamburger__accordion__details .megaMenu_subMenu:first-child {
  margin-top: 0;
}
.hamburger__accordion__btn {
  background-color: transparent;
  padding: 0;
  outline: 0;
  border: 0;
  cursor: pointer;
  transition: 0.3s all ease;
}
.hamburger.open .crossIcon {
  display: inline-flex;
}
.hamburger.open .menuIcon {
  display: none;
}
.hamburger.open .hamburger__box {
  transform: translateX(0);
  transition: 0.3s all ease-in;
}
@media (min-width: 768px) {
  .hamburger {
    margin-left: unset;
  }
  .hamburger__box {
    max-width: 400px;
    box-shadow: var(--shadow-xl);
  }
  .hamburger__footer {
    display: none;
  }
}
@media (min-width: 1200px) {
  .hamburger {
    display: none;
  }
}

.megaMenu {
  background-color: var(--white);
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  max-height: calc(100% - var(--header-height));
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  z-index: 1000;
  flex-wrap: wrap;
  width: 100vw;
}
.megaMenu__item {
  border-radius: var(--space-1);
  transition: 0.02s background ease-in;
}
.megaMenu__item svg {
  transition: 0.5s all ease-in;
}
.megaMenu__item.active {
  background-color: var(--primary-100);
  transition: 0.3s background ease-in;
}
.megaMenu__item.active a {
  color: var(--primary-700);
}
.megaMenu__item.active a svg,
.megaMenu__item.active a path {
  fill: var(--theme-text-color);
}
.megaMenu__item.active svg {
  transform: translateX(5px);
  transition: 0.5s all ease-in;
}
.megaMenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--primary-700);
  text-decoration: none;
}
.megaMenu__detail {
  --brand-color: var(--primary-500);
}
.megaMenu__detail:not(.active) {
  display: none;
}
.megaMenu__detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.megaMenu__detail__info img {
  display: flex;
}
.megaMenu__detail.agriculture {
  --brand-color: var(--success-800);
}
.megaMenu__detail.relief {
  --brand-color: var(--relief-and-resiliance);
}
.megaMenu__detail.education {
  --brand-color: var(--secondary2-600);
}
.megaMenu__detail.research {
  --brand-color: var(--success-400);
}
.megaMenu__detail.special {
  --brand-color: var(--secondary1-600);
}
.megaMenu_subMenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.megaMenu_subMenu__title {
  font-size: var(--fontsize-body-xs);
  font-weight: var(--weight-bold);
  color: var(--brand-color);
  margin-bottom: var(--space-1);
}
.megaMenu_subMenu + .megaMenu_subMenu {
  margin-top: var(--space-8);
}
.megaMenu_subMenu ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.megaMenu_subMenu ul .link {
  line-height: 1.5;
  text-decoration: none;
  border: 0;
  padding: 5px 3px;
}
.megaMenu_subMenu ul .link:hover {
  text-decoration: underline;
  color: var(--primary-700);
}
.megaMenu .container > .row {
  margin: 0 -24px;
}
.megaMenu .container > .row > [class*=col-] {
  padding: 0 var(--space-6);
}

.footer {
  background-color: var(--neutral-950);
  color: var(--neutral-100);
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
}
.footer__columns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--space-10);
}
.footer__column {
  width: 100%;
}
.footer__column ul:not(:last-child) {
  margin-bottom: var(--space-10);
}
.footer__heading {
  font-size: var(--fontsize-body-md);
  text-transform: capitalize;
  margin-bottom: var(--space-4);
}
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--neutral-100);
  font-size: var(--fontsize-body-sm);
  font-weight: var(--weight-light);
  text-decoration: none;
  padding-block: var(--space-2);
}
.footer__link:hover {
  color: var(--primary-300);
}
.footer__link:hover svg,
.footer__link:hover path {
  stroke: var(--primary-300);
}
.footer__copyrights {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--neutral-100);
}
.footer__copyrights > .body-sm {
  order: 2;
}
.footer__socialIcons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.footer__social {
  text-decoration: none;
  transition: 0.2s all ease-in;
}
.footer__social:not(.colored) svg,
.footer__social:not(.colored) path {
  fill: var(--neutral-300);
}
.footer__social:not(.colored):hover, .footer__social:not(.colored):focus {
  transform: scale(1.1);
  transition: 0.2s all ease-in;
}
.footer__social:not(.colored):hover svg,
.footer__social:not(.colored):hover path, .footer__social:not(.colored):focus svg,
.footer__social:not(.colored):focus path {
  fill: var(--primary-300);
}
.footer__partner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
}
@media (min-width: 768px) {
  .footer__column:not(:first-child) {
    width: calc(50% - var(--space-10) / 2);
  }
  .footer__copyrights {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: var(--space-8);
  }
  .footer__copyrights > .body-sm {
    order: unset;
  }
  .footer__partner {
    text-align: end;
    justify-content: flex-end;
  }
}
@media (min-width: 1200px) {
  .footer {
    padding: var(--space-16) var(--space-8) var(--space-12);
    gap: var(--space-16);
  }
  .footer__columns {
    flex-wrap: nowrap;
  }
  .footer__column {
    width: 100%;
  }
  .footer__column:not(:last-child) {
    max-width: 216px;
  }
  .footer__column:last-child {
    max-width: 400px;
    flex-shrink: 0;
  }
}

.newsletter__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.newsletter__field .form-group {
  margin: 0;
}
.newsletter__field .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .newsletter__field {
    flex-wrap: nowrap;
  }
  .newsletter__field .form-group {
    margin: inherit;
  }
  .newsletter__field .btn {
    width: auto;
  }
}

.back-button {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--weight-bold);
  padding: var(--space-2) 0;
  color: var(--primary-subtext);
}
.back-button svg {
  transform: scaleX(-1);
  fill: var(--primary-subtext);
}

.donation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.donation__left {
  width: 100%;
  flex-shrink: 0;
}
.donation__right {
  flex-grow: 1;
}
.donation__right .stepper {
  margin-bottom: var(--space-10);
}
.donation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-10);
}
.donation img {
  max-width: 100%;
}
@media (min-width: 768px) {
  .donation {
    gap: var(--space-10);
    flex-wrap: nowrap;
  }
  .donation__left {
    max-width: 360px;
  }
}
@media (min-width: 1200px) {
  .donation {
    gap: var(--space-18);
  }
  .donation__left {
    max-width: 420px;
  }
  .donation__right .stepper {
    margin-bottom: var(--space-16);
  }
  .donation__actions {
    margin-block: var(--space-16);
  }
}

.summarySection {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  background-color: var(--neutral-50);
  border: 0.5px solid var(--divider-color);
  border-radius: 8px;
}
.summarySection__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.paymentCard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--divider-color);
  border-radius: 6px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.paymentCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.paymentCard__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.paymentCard__card {
  display: inline-flex;
  border: 1px solid var(--divider-color);
  border-radius: 4px;
  width: 60px;
  padding: var(--space-2) var(--space-1);
  justify-content: center;
}
.paymentCard__card img {
  max-width: 100%;
  max-height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}
.paymentCard:hover {
  background-color: var(--neutral-50);
  border-color: var(--neutral-300);
}
.paymentCard.selected {
  border-color: var(--primary-600);
}
@media (min-width: 768px) {
  .paymentCard {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
}

.bankDetails {
  border: 1px solid var(--divider-color);
  padding: var(--space-5) var(--space-4);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.bankDetails__card {
  background-color: var(--neutral-50);
  border-radius: 4px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bankDetails__card:not(:last-child) {
  margin-bottom: var(--space-2);
}
.bankDetails__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  --arrow-size: 12px;
}
.bankDetails__line .copy-btn {
  border: 0;
  width: 40px;
  height: 40px;
  background: unset;
  cursor: pointer;
  position: relative;
}
.bankDetails__line .copy-btn.copied {
  transform: scale(0.9);
  transition: 0.2s all ease-in;
}
.bankDetails__line .copy-btn.copied .tooltip__text {
  opacity: 1;
  visibility: visible;
}
.bankDetails__actions {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  gap: var(--space-2);
}

.confirmationBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) 0;
}
.confirmationBlock__icon {
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .confirmationBlock {
    padding: var(--space-16) 0;
    margin-top: var(--space-9);
  }
  .confirmationBlock .btn {
    margin-top: var(--space-3);
  }
}

.dontationDetails {
  margin-bottom: var(--space-10);
}
.dontationDetails__imageBlock {
  padding: var(--space-6) var(--space-7);
  background-color: var(--neutral-50);
  border: 1px solid var(--divider-color);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.dontationDetails__imageBlock img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
}
.dontationDetails__receipt {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: var(--space-5);
}
.dontationDetails__line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.dontationDetails__line p:first-child {
  width: 140px;
  min-width: 140px;
}
@media (min-width: 768px) {
  .dontationDetails .row {
    margin: 0 -20px;
  }
  .dontationDetails [class*=" col-"] {
    padding: 0 var(--space-5);
  }
  .dontationDetails__receipt {
    margin-top: 0;
  }
  .dontationDetails__line {
    gap: var(--space-6);
  }
  .dontationDetails__line .pills {
    gap: var(--space-3);
  }
}
@media (min-width: 1200px) {
  .dontationDetails .row {
    margin: 0 -36px;
  }
  .dontationDetails [class*=" col-"] {
    padding: 0 var(--space-9);
  }
}

.heroBanner {
  --work-color: var(--primary-500);
  --brand-color: var(--secondary1-700);
  padding: var(--space-1) 0 var(--space-10);
  text-align: center;
}
.heroBanner__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}
.heroBanner__box:after {
  content: "";
  display: inline-block;
  border-bottom: 1px solid var(--neutral-800);
}
.heroBanner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-grow: 1;
  text-align: center;
}
.heroBanner__content .btn {
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-inline: auto;
}
.heroBanner__media {
  max-width: 100%;
  width: 100%;
}
.heroBanner__media img,
.heroBanner__media video,
.heroBanner__media iframe {
  max-width: 100%;
  border-radius: 8px;
}
.heroBanner__media iframe {
  width: 100%;
}
.heroBanner__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.heroBanner__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.heroBanner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.heroBanner__actions .btn {
  margin: unset;
}
.heroBanner__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  position: absolute;
  top: calc(100% + var(--space-3));
}
.heroBanner__pill {
  position: relative;
}
.heroBanner__pill span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--primary-text);
  position: relative;
  padding: var(--space-2);
  z-index: 1;
}
.heroBanner__pill:before {
  content: "";
  display: inline-flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  z-index: 0;
  border-radius: var(--space-2);
  transition: 0.3s all ease-in;
}
.heroBanner__pill:hover {
  transition: 0.3s all ease-in;
}
.heroBanner__pill:hover::before {
  background-color: var(--secondary1-50);
  left: 0;
}
.heroBanner__pill.program svg,
.heroBanner__pill.program path {
  fill: var(--work-color);
  stroke: var(--work-color);
}
.heroBanner__pill.brand svg,
.heroBanner__pill.brand path {
  fill: var(--brand-color);
  stroke: var(--brand-color);
}
@media (min-width: 768px) {
  .heroBanner {
    padding: var(--space-7) 0 var(--space-18);
    text-align: start;
  }
  .heroBanner__box {
    flex-direction: row;
    gap: var(--space-10);
    align-items: flex-end;
  }
  .heroBanner__box:after {
    content: unset;
  }
  .heroBanner__media {
    max-width: 365px;
  }
  .heroBanner__media img,
  .heroBanner__media video,
  .heroBanner__media iframe {
    max-width: 365px;
  }
  .heroBanner__media iframe {
    aspect-ratio: 1/1;
  }
  .heroBanner__content {
    position: relative;
    align-items: flex-start;
    text-align: start;
    gap: var(--space-6);
    border-bottom: 1px solid var(--neutral-800);
    padding-bottom: var(--space-2);
  }
  .heroBanner__content .btn {
    margin-top: var(--space-2);
    margin-inline: unset;
  }
  .heroBanner__actions {
    justify-content: flex-start;
  }
  .heroBanner__pills {
    top: calc(100% + var(--space-2));
  }
}
@media (min-width: 992px) {
  .heroBanner__box {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .heroBanner__content {
    padding-block: var(--space-11);
  }
  .heroBanner__media {
    max-width: 500px;
  }
  .heroBanner__media img,
  .heroBanner__media video,
  .heroBanner__media iframe {
    max-width: 500px;
  }
  .heroBanner__pills {
    gap: var(--space-5);
    justify-content: center;
    top: calc(100% + var(--space-5));
  }
  .heroBanner.homepageHero video {
    min-height: 596px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .heroBanner.videoHero video {
    min-height: 596px;
    -o-object-fit: unset;
       object-fit: unset;
  }
}
@media (min-width: 1200px) {
  .heroBanner__media {
    max-width: 720px;
  }
  .heroBanner__media img,
  .heroBanner__media video,
  .heroBanner__media iframe {
    max-width: 720px;
  }
}

.stats {
  padding: var(--space-10) 0;
  background-color: var(--neutral-50);
  text-align: center;
}
.stats__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.stats .row {
  row-gap: var(--space-5);
  margin-inline: -10px;
}
.stats .row [class*=" col-"] {
  padding: 0 calc(var(--space-5) / 2);
}
.stats .row [class*=" col-"]:first-child .stats__card, .stats .row [class*=" col-"]:nth-child(5) .stats__card {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.stats .row [class*=" col-"]:nth-child(2) .stats__card, .stats .row [class*=" col-"]:nth-child(6) .stats__card {
  background-color: var(--primary-100);
  color: var(--secondary1-700);
}
.stats .row [class*=" col-"]:nth-child(3) .stats__card, .stats .row [class*=" col-"]:nth-child(4) .stats__card {
  background-color: var(--secondary2-700);
  color: var(--white);
}
.stats__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  height: 100%;
  min-height: 150px;
  padding: var(--space-2);
}
.stats__card h1 {
  font-weight: var(--weight-bold);
}
.stats.white {
  background-color: var(--white);
}
@media (min-width: 768px) {
  .stats {
    padding: var(--space-15) 0;
  }
  .stats__card {
    min-height: 300px;
  }
}
@media (min-width: 1200px) {
  .stats {
    padding: var(--space-25) 0;
  }
  .stats__intro {
    margin-bottom: var(--space-18);
  }
}

.theSolutions {
  padding: var(--space-10) 0;
}
.theSolutions__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .theSolutions .splide__track {
    margin-inline-end: -32px;
  }
  .theSolutions .splide__slide {
    padding-inline-end: var(--space-8);
  }
}
@media (min-width: 1200px) {
  .theSolutions {
    padding: var(--space-25) 0;
  }
  .theSolutions__intro {
    margin-bottom: var(--space-18);
  }
}

.solutionCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.solutionCard__media img,
.solutionCard__media video {
  border-radius: 12px;
  max-height: 410px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.solutionCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}
.solutionCard__content p.color-secondary1 {
  display: flex;
}
.solutionCard__content p.color-secondary1:before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background-color: var(--primary-950);
  border-radius: 100%;
  display: inline-flex;
  margin: 7px;
}
.solutionCard__content p.color-secondary1 {
  flex-wrap: wrap;
}
.solutionCard__content p.color-secondary1:before {
  background-color: var(--secondary1-700);
}
.solutionCard__content h5 {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.solutionCard__content .link {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-4);
}
.solutionCard__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}
@media (min-width: 768px) {
  .solutionCard {
    gap: var(--space-8);
  }
}

.successStory {
  background-color: var(--primary-50);
  padding: var(--space-10) 0;
}
.successStory__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.successStory__card {
  position: relative;
  border-radius: 8px;
  padding-top: 92.6%;
  cursor: pointer;
}
.successStory__card video {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom left;
     object-position: bottom left;
  inset: 0;
  border-radius: 8px;
}
.successStory__card__content {
  backdrop-filter: blur(24px);
  border: 1px solid var(--neutral-100);
  padding: var(--space-6) var(--space-5);
  border-radius: 4px;
  position: absolute;
  bottom: var(--space-10);
  left: var(--space-6);
  right: var(--space-6);
  color: var(--white);
  max-width: calc(100% - var(--space-12));
}
.successStory__card__role {
  margin-top: var(--space-1);
  font-size: var(--fontsize-body-md);
}
.successStory__card__program {
  font-size: var(--fontsize-body-md);
  font-weight: var(--weight-light);
  margin-top: var(--space-4);
}
.successStory .row {
  row-gap: var(--space-6);
}
@media (min-width: 768px) {
  .successStory {
    padding: var(--space-15) 0;
  }
}
@media (min-width: 1200px) {
  .successStory {
    padding: var(--space-25) 0;
  }
  .successStory__intro {
    margin-bottom: var(--space-18);
  }
}

.paymentDetails {
  padding: var(--space-10) 0;
  background-color: var(--neutral-950);
  color: var(--white);
}
.paymentDetails .container {
  max-width: 1296px;
}
.paymentDetails__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
@media (min-width: 1200px) {
  .paymentDetails {
    padding: var(--space-25) 0;
  }
  .paymentDetails__intro {
    margin-bottom: var(--space-18);
  }
}

.paymentTabs {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-100);
  border-radius: 4px;
  min-height: 400px;
}
.paymentTabs__buttons {
  display: flex;
  width: 100%;
}
.paymentTabs__button {
  background-color: transparent;
  color: var(--white);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--divider-color);
  cursor: pointer;
  outline: 0;
  box-shadow: none;
  flex-grow: 1;
  flex-basis: 33.33%;
  font-size: var(--fontsize-body-md);
}
.paymentTabs__button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.paymentTabs__button.active {
  color: var(--secondary1-700);
  background-color: var(--secondary1-200);
  border-bottom: 2px solid var(--secondary1-500);
}
.paymentTabs__content {
  display: none;
  flex-grow: 1;
  padding: var(--space-5);
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
.paymentTabs__content.active {
  display: flex;
}
@media (min-width: 992px) {
  .paymentTabs {
    flex-direction: row;
  }
  .paymentTabs__buttons {
    flex-direction: column;
    max-width: 400px;
  }
  .paymentTabs__button {
    flex-basis: auto;
    flex-grow: unset;
    padding: var(--space-7) var(--space-8);
    text-align: start;
  }
  .paymentTabs__button.active {
    border-bottom: 4px solid var(--secondary1-500);
  }
  .paymentTabs__content {
    padding: var(--space-6) var(--space-8);
    border-left: 1px solid var(--secondary1-200);
  }
}

.tabBankDetails {
  padding-block: var(--space-5);
}
.tabBankDetails:not(:last-child) {
  border-bottom: 1px solid var(--neutral-100);
}
.tabBankDetails > p:not(:last-child) {
  margin-bottom: var(--space-2);
}
.tabBankDetails__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  word-break: break-word;
}
.tabBankDetails__content img {
  max-width: 70px;
}
.tabBankDetails__content img.mobileWallet {
  height: 24px;
  max-width: unset;
}
.tabBankDetails__content h6 {
  margin-bottom: var(--space-4);
}
.tabBankDetails__content p {
  margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
  .tabBankDetails {
    padding-inline: var(--space-5);
  }
}

.joinBanner {
  background-color: var(--secondary1-50);
  padding: var(--space-10) 0;
}
.joinBanner__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.joinBanner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.joinBanner__content h3 {
  font-weight: var(--weight-bold);
}
.joinBanner__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-2);
}
.joinBanner__media {
  width: 100%;
}
@media (min-width: 1200px) {
  .joinBanner {
    padding: var(--space-25) 0;
  }
  .joinBanner__box {
    flex-direction: row;
    align-items: center;
    gap: var(--space-18);
  }
  .joinBanner__media {
    max-width: 576px;
    flex-shrink: 0;
  }
  .joinBanner__content .btn {
    margin-top: var(--space-5);
  }
}

.donationChart {
  padding: var(--space-10) 0;
}
.donationChart__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.donationChart__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  order: 1;
}
.donationChart__content h3 {
  font-weight: var(--weight-bold);
}
.donationChart__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-2);
}
.donationChart__media {
  width: 100%;
  order: 2;
}
.donationChart.finance {
  background-color: var(--primary-50);
}
.donationChart.finance .donationChart__box {
  justify-content: space-between;
}
.donationChart.finance .donationChart__content {
  max-width: 710px;
}
@media (min-width: 768px) {
  .donationChart__box {
    flex-direction: row;
    align-items: center;
  }
  .donationChart__media {
    max-width: 350px;
    flex-shrink: 0;
    order: 1;
  }
  .donationChart__content {
    order: 2;
  }
  .donationChart.finance .donationChart__content {
    order: 1;
  }
}
@media (min-width: 1200px) {
  .donationChart {
    padding: var(--space-25) 0;
  }
  .donationChart__box {
    gap: var(--space-18);
  }
  .donationChart__media {
    max-width: 512px;
  }
  .donationChart__content .btn {
    margin-top: var(--space-5);
  }
}

.partners {
  padding: var(--space-10) 0;
  background-color: var(--neutral-50);
}
.partners__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.partners__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}
.partners__content h3 {
  font-weight: var(--weight-bold);
}
.partners__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-2);
}
.partners__media {
  width: 100%;
}
@media (min-width: 768px) {
  .partners__media {
    max-width: 400px;
    flex-shrink: 0;
  }
}
@media (min-width: 1200px) {
  .partners {
    padding: var(--space-25) 0;
  }
  .partners__box {
    flex-direction: row;
    gap: var(--space-18);
  }
  .partners__media {
    max-width: 580px;
  }
  .partners__content .btn {
    margin-top: var(--space-5);
  }
}

.certificates {
  padding: var(--space-10) 0;
  background-color: var(--primary-500);
}
.certificates .container {
  max-width: 902px;
}
.certificates.legal {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.certificates.legal .container {
  max-width: 1150px;
}
.certificates.legal .row {
  justify-content: center;
}
.certificates.legal .body-lg {
  color: var(--neutral-100);
}
.certificates .row {
  row-gap: var(--space-5);
}
.certificates__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.certificates__intro p {
  color: var(--primary-body-text);
}
.certificates__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  background-color: var(--white);
  border: 1px solid var(--divider-color);
  border-radius: 6px;
  padding: var(--space-4);
  height: 100%;
  box-shadow: var(--shadow-md);
}
.certificates__card img {
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1200px) {
  .certificates {
    padding: var(--space-25) 0;
  }
  .certificates__intro {
    margin-bottom: var(--space-18);
  }
}

.howToHelp {
  padding: var(--space-10) 0;
  overflow: hidden;
}
.howToHelp__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.howToHelp__box {
  background-color: var(--secondary1-700);
  border-radius: 12px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  color: var(--white);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.howToHelp__box.volunteer {
  background-color: var(--success-700);
}
.howToHelp__box.partner {
  background-color: var(--secondary2-700);
  margin-left: 2%;
}
.howToHelp__box + .howToHelp__box {
  margin-top: var(--space-8);
}
.howToHelp__media {
  width: 100%;
  max-width: 50%;
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
  height: calc(100% + 2px);
}
.howToHelp__media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 300px;
}
.howToHelp__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.howToHelp__content h5 {
  font-weight: var(--weight-bold);
}
.howToHelp__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-2);
}
.howToHelp .row {
  row-gap: var(--space-8);
  margin-inline: -16px;
}
.howToHelp .row [class*=" col-"] {
  padding: 0 calc(var(--space-8) / 2);
}
.howToHelp .row [class*=" col-"]:first-child .howToHelp__box {
  height: 100%;
}
@media (min-width: 1200px) {
  .howToHelp {
    padding: var(--space-25) 0;
  }
  .howToHelp__intro {
    margin-bottom: var(--space-18);
  }
  .howToHelp__media img {
    min-height: unset;
  }
}

.faqs {
  padding: var(--space-10) 0;
  background-color: var(--primary-50);
}
.faqs__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.faqs__questions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  gap: var(--space-4);
  background-color: var(--primary-100);
  border: 1.5px solid var(--primary-600);
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  margin-top: var(--space-10);
}
.faqs li {
  display: flex;
}
.faqs li:before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background-color: var(--primary-950);
  border-radius: 100%;
  display: inline-flex;
  margin: var(--space-2);
}
.faqs.white {
  background-color: transparent;
}
.faqs.white .faqs__questions {
  border-color: var(--neutral-800);
  background-color: var(--neutral-50);
}
.faqs.secondary {
  background-color: var(--neutral-50);
}
@media (min-width: 1200px) {
  .faqs {
    padding: var(--space-25) 0;
  }
  .faqs__intro {
    margin-bottom: var(--space-18);
  }
  .faqs__questions {
    padding: var(--space-16);
    margin-top: var(--space-18);
  }
  .faqs__questions .btn {
    margin-top: var(--space-6);
  }
}

.changeMovement {
  padding: var(--space-10) 0;
}
.changeMovement__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
@media (min-width: 1200px) {
  .changeMovement {
    padding: var(--space-25) 0;
  }
  .changeMovement__intro {
    margin-bottom: var(--space-18);
  }
}

.photoGrid {
  width: 100%;
}
.photoGrid__media {
  position: relative;
  height: 410px;
  cursor: pointer;
  margin-bottom: var(--space-5);
}
.photoGrid__media img {
  display: inline-flex;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  filter: brightness(0.9);
}
.photoGrid__media img:hover {
  border-color: var(--secondary1-500);
  box-shadow: var(--shadow-xl);
}
.photoGrid__media.grid {
  height: 235px;
}
@media (min-width: 768px) {
  .photoGrid__media {
    margin-bottom: 0;
  }
  .photoGrid__media:not(:last-child) {
    margin-bottom: var(--space-7);
  }
}

.ramzan-page .footer {
  padding-bottom: calc(var(--donation-block-height) + var(--space-2));
}

.rizqMission {
  padding: var(--space-10) 0;
}
.rizqMission__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 750px;
  padding-bottom: var(--space-6);
}
.rizqMission__content .btn {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.rizqMission__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  --image-1-size: 410px;
}
.rizqMission__media img {
  border-radius: 8px;
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
}
.rizqMission__media img:first-child {
  max-width: var(--image-1-size);
}
.rizqMission__media img:nth-child(2) {
  flex-grow: 1;
  max-width: calc(100% - var(--image-1-size) - var(--space-12));
}
@media (min-width: 768px) {
  .rizqMission {
    padding: var(--space-18) 0;
  }
  .rizqMission__media {
    gap: var(--space-12);
  }
  .rizqMission__media img {
    gap: var(--space-12);
  }
  .rizqMission__content {
    gap: var(--space-6);
    padding-bottom: var(--space-18);
  }
  .rizqMission__content .btn {
    margin-top: var(--space-2);
  }
}
@media (min-width: 992px) {
  .rizqMission__media {
    flex-direction: row;
  }
}

.dastarkhwan {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .dastarkhwan {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .dastarkhwan {
    padding: var(--space-25) 0;
  }
}
.dastarkhwan {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.dastarkhwan__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.dastarkhwan__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  order: -1;
}
.dastarkhwan__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--space-2);
}
.dastarkhwan__media {
  width: 100%;
}
.dastarkhwan.ration {
  background-color: var(--primary-100);
  color: var(--primary-text);
}
.dastarkhwan.ration p {
  color: var(--primary-body-text);
}
.dastarkhwan.light {
  background-color: var(--neutral-50);
  color: var(--primary-text);
}
.dastarkhwan.light p {
  color: var(--primary-body-text);
}
.dastarkhwan.light-2 {
  background-color: var(--neutral-100);
}
.dastarkhwan .carousal__actions button:hover rect {
  fill: rgba(255, 255, 255, 0.3);
}
.dastarkhwan #sliderAward {
  margin: 0;
}
.dastarkhwan #sliderAward h1 {
  font-size: var(--fontsize-heading-3);
}
.dastarkhwan #sliderAward .dastarkhwan__media {
  order: 2;
}
@media (min-width: 768px) {
  .dastarkhwan__box {
    flex-direction: row;
    align-items: center;
  }
  .dastarkhwan__content {
    order: unset;
  }
  .dastarkhwan__media {
    max-width: 340px;
    flex-shrink: 0;
  }
  .dastarkhwan #sliderAward .dastarkhwan__media {
    order: unset;
  }
}
@media (min-width: 1200px) {
  .dastarkhwan__box {
    gap: var(--space-18);
  }
  .dastarkhwan__media {
    max-width: 552px;
  }
  .dastarkhwan__content .btn {
    margin-top: var(--space-5);
  }
}
@media (min-width: 1350px) {
  .dastarkhwan #sliderAward h1 {
    font-size: var(--fontsize-heading-1);
  }
}

.beginnings {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .beginnings {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .beginnings {
    padding: var(--space-25) 0;
  }
}
.beginnings__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .beginnings__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .beginnings__intro {
    margin-bottom: var(--space-18);
  }
}
.beginnings__intro p {
  color: var(--primary-body-text);
}
.beginnings__media {
  text-align: center;
}
.beginnings__media img {
  max-width: 685px;
  width: 100%;
}
.beginnings__media video {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--divider-color);
  cursor: pointer;
}
.beginnings__media.wider img {
  max-width: 725px;
}
.beginnings.light {
  background-color: var(--primary-50);
}

.donationBlock {
  position: fixed;
  bottom: 0;
  z-index: 5;
  width: 100vw;
  transition: 0.3s transform ease-in;
}
.donationBlock__block, .donationBlock__qurbani {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  border-top: 1px solid var(--neutral-100);
  justify-content: center;
}
.donationBlock__form {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
  margin-top: auto;
}
.donationBlock__form .form-control {
  flex-grow: 1;
}
.donationBlock .mobileQuickDonate {
  display: none;
  align-items: center;
  line-height: 32px;
}
.donationBlock .row [class*=" col-"]:first-child .donationBlock__block, .donationBlock .row [class*=" col-"]:first-child .donationBlock__qurbani {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.donationBlock .row [class*=" col-"]:first-child .donationBlock__qurbani .btn {
  color: var(--white);
}
.donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__block, .donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__qurbani {
  background-color: var(--primary-500);
  color: var(--primary-text);
}
.donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__block p, .donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__qurbani p {
  color: var(--primary-body-text);
}
.donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__block .btn, .donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__qurbani .btn {
  color: var(--primary-text);
}
.donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__qurbani .btn {
  border-color: var(--neutral-950);
}
.donationBlock .row [class*=" col-"]:nth-child(2) .donationBlock__qurbani .btn:hover span {
  color: var(--primary-text);
}
.donationBlock .row [class*=" col-"]:nth-child(3) .donationBlock__block, .donationBlock .row [class*=" col-"]:nth-child(3) .donationBlock__qurbani {
  background-color: var(--secondary2-700);
  color: var(--white);
}
.donationBlock .row [class*=" col-"]:nth-child(3) .donationBlock__qurbani .btn {
  border-color: var(--white);
}
.donationBlock__toggle {
  display: inline-flex;
  position: absolute;
  background-color: transparent;
  border: 0;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  padding: 0;
  border-radius: 100%;
  border: 1px solid var(--neutral-100);
  transition: 0.3s all ease-in;
}
.donationBlock__toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s all ease-in;
}
.donationBlock__pill {
  padding: var(--space-1) var(--space-3);
  background-color: var(--secondary1-50);
  border: 1px solid var(--secondary1-200);
  color: var(--secondary1-700);
  font-size: var(--fontsize-body-xs);
  border-radius: var(--space-4);
  position: absolute;
  top: -16px;
  left: var(--space-5);
  display: none;
}
.donationBlock__qurbani {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.donationBlock__qurbani__media {
  width: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
.donationBlock__qurbani__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.donationBlock__qurbani__content .btn {
  margin-top: var(--space-6);
}
.donationBlock .btn svg {
  max-width: 14px;
}
.donationBlock.close {
  transform: translateY(calc(100% - 65px));
  transition: 0.3s transform ease-in;
}
.donationBlock.close .donationBlock__block > *:not(.mobileQuickDonate) {
  display: none;
}
.donationBlock.close .donationBlock__block .mobileQuickDonate {
  display: inline-flex;
}
.donationBlock.close .donationBlock__toggle {
  transform: scaleY(-1);
  top: 10px;
  transition: 0.3s transform ease-in;
}
.donationBlock.close .donationBlock__qurbani {
  padding-block: var(--space-2);
  height: 60px;
}
.donationBlock.close .donationBlock__qurbani p,
.donationBlock.close .donationBlock__qurbani .btn {
  display: none;
}
.donationBlock.close .donationBlock__qurbani__media {
  width: 60px;
}
@media (min-width: 768px) {
  .donationBlock__block {
    padding: var(--space-4) var(--space-6);
  }
  .donationBlock__form {
    flex-wrap: wrap;
  }
  .donationBlock .btn svg {
    max-width: 16px;
  }
  .donationBlock.close {
    transform: translateY(calc(100% - 60px));
  }
  .donationBlock.close .donationBlock__pill {
    display: inline-flex;
    transition: 0.3s all ease-in;
  }
  .donationBlock.close .donationBlock__block > *:not(.mobileQuickDonate) {
    display: inline-flex;
  }
  .donationBlock.close .donationBlock__block .mobileQuickDonate {
    display: none;
  }
}
@media (min-width: 992px) {
  .donationBlock__qurbani {
    padding: var(--space-5);
    gap: var(--space-5);
  }
  .donationBlock__qurbani__media {
    width: 160px;
  }
}

.joinSustaining {
  background-color: var(--secondary1-700);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .joinSustaining {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .joinSustaining {
    padding: var(--space-25) 0;
  }
}
.joinSustaining__box {
  display: flex;
  flex-direction: column;
  border-radius: var(--space-3);
  overflow: hidden;
}
.joinSustaining__media {
  display: flex;
  width: 100%;
}
.joinSustaining__media video,
.joinSustaining__media img {
  width: 100%;
  height: 420px;
  width: 100%;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
}
.joinSustaining__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  background-color: var(--white);
  padding: var(--space-6);
}
.joinSustaining__content .btn {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.joinSustaining__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.joinSustaining.dark {
  background-color: transparent;
}
.joinSustaining.dark .joinSustaining__content {
  background-color: var(--secondary1-700);
}
.joinSustaining.dark .joinSustaining__content,
.joinSustaining.dark .joinSustaining__content .color-subText {
  color: var(--white);
}
@media (min-width: 768px) {
  .joinSustaining__content {
    gap: var(--space-3);
    padding: var(--space-14);
  }
  .joinSustaining__actions {
    margin-top: var(--space-5);
  }
}
@media (min-width: 1200px) {
  .joinSustaining__box {
    flex-direction: row;
  }
  .joinSustaining__media {
    max-width: 550px;
  }
}

.combatHunger {
  overflow: hidden;
  padding: var(--space-10) 0;
}
.combatHunger__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-bottom: var(--space-10);
}
.combatHunger__card {
  border-radius: var(--space-3) var(--space-3) var(--space-9) var(--space-3);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  background-color: var(--secondary1-700);
  color: var(--white);
  height: 100%;
}
.combatHunger__card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.combatHunger__card__link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  color: var(--white);
  text-decoration: none;
  padding-top: var(--space-5);
  margin-top: auto;
}
.combatHunger__card__link:hover svg,
.combatHunger__card__link:hover path {
  fill: rgba(255, 255, 255, 0.15);
}
.combatHunger .row {
  margin-inline: -20px;
  row-gap: var(--space-6);
}
.combatHunger .row [class*=" col-"] {
  padding-inline: var(--space-5);
}
.combatHunger .row [class*=" col-"]:first-child .combatHunger__card {
  background-color: var(--secondary2-700);
}
@media (min-width: 992px) {
  .combatHunger__card {
    padding: var(--space-9);
  }
}
@media (min-width: 1200px) {
  .combatHunger {
    padding: var(--space-25) 0;
  }
  .combatHunger__intro {
    margin-bottom: var(--space-18);
  }
}

.problemStatement {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .problemStatement {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .problemStatement {
    padding: var(--space-25) 0;
  }
}
.problemStatement {
  background-color: var(--secondary1-50);
}
.problemStatement__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .problemStatement__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .problemStatement__intro {
    margin-bottom: var(--space-18);
  }
}
.problemStatement__intro {
  text-align: center;
}
.problemStatement .container {
  max-width: 1280px;
}
.problemStatement__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.problemStatement__media {
  width: 100%;
}
.problemStatement__media img {
  width: 100%;
  border-radius: var(--space-2);
}
.problemStatement .row {
  margin-inline: -22px;
  row-gap: var(--space-6);
}
.problemStatement .row [class*=" col-"] {
  padding-inline: calc(var(--space-11) / 2);
}
.problemStatement .row [class*=" col-"] * {
  max-width: 264px;
  text-align: center;
  margin-inline: auto;
}
.problemStatement__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.problemStatement__content h4 {
  color: var(--section-primary-color);
  margin-bottom: var(--space-1);
}
.problemStatement__content__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .problemStatement__box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-18);
  }
  .problemStatement .row {
    row-gap: var(--space-11);
  }
  .problemStatement .row [class*=" col-"] * {
    text-align: start;
    margin-inline: unset;
  }
  .problemStatement__media {
    max-width: 350px;
    flex-shrink: 0;
  }
  .problemStatement__content__details {
    margin-bottom: var(--space-5);
  }
}
@media (min-width: 1200px) {
  .problemStatement__media {
    max-width: 485px;
  }
}

.awards {
  padding: var(--space-10) 0;
  background-color: var(--neutral-950);
  color: var(--white);
}
.awards__intro {
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-10);
}
.awards__tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  row-gap: var(--space-10);
  padding-top: var(--space-5);
}
.awards__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: center;
  width: 100%;
}
.awards__block img {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  max-height: 62px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .awards {
    padding: var(--space-18) 0;
  }
  .awards__tiles {
    -moz-column-gap: var(--space-3);
         column-gap: var(--space-3);
  }
  .awards__block {
    max-width: calc(50% - var(--space-6) / 2);
  }
}
@media (min-width: 1200px) {
  .awards {
    padding: var(--space-25) 0;
  }
  .awards__intro {
    margin-bottom: var(--space-18);
  }
  .awards__tiles {
    row-gap: var(--space-16);
  }
  .awards__block {
    max-width: calc(33.33% - var(--space-6) * 2 / 3);
  }
}

.newsAndStories {
  padding: var(--space-10) 0;
  background-color: var(--secondary1-50);
}
.newsAndStories__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .newsAndStories .splide__track {
    margin-inline-end: -24px;
  }
  .newsAndStories .splide__slide {
    padding-inline-end: var(--space-6);
  }
}
@media (min-width: 1200px) {
  .newsAndStories {
    padding: var(--space-25) 0;
  }
  .newsAndStories__intro {
    margin-bottom: var(--space-18);
  }
}

.newsCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  background-color: var(--white);
  border: 1px solid var(--divider-color);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  padding: var(--space-5) var(--space-4);
}
.newsCard__media {
  position: relative;
  background-color: var(--primary-50);
  border-radius: 12px;
}
.newsCard__media img,
.newsCard__media video {
  border-radius: 12px;
  height: 310px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.newsCard__media .pill {
  position: absolute;
  top: var(--space-3);
  left: var(--space-2);
}
.newsCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}
.newsCard__content .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}
@media (min-width: 768px) {
  .newsCard {
    gap: var(--space-8);
  }
}

.quickActions__block {
  background-color: var(--primary-100);
  padding: var(--space-7);
}
.quickActions__block .btn {
  margin-top: var(--space-2);
}
.quickActions__block.dark {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.quickActions__block.full {
  padding: var(--space-10) 0;
}
.quickActions__block.full .btn {
  margin-top: var(--space-5);
}
.quickActions__content {
  max-width: 650px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  margin-inline: auto;
}
@media (min-width: 1200px) {
  .quickActions__content {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    margin-inline: auto;
  }
  .quickActions__block.full {
    padding: var(--space-25) 0;
  }
}

.whyVolunteer {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .whyVolunteer {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .whyVolunteer {
    padding: var(--space-25) 0;
  }
}
.whyVolunteer__intro {
  margin-bottom: var(--space-10);
}
.whyVolunteer__intro .row {
  align-items: center;
  row-gap: var(--space-10);
}
.whyVolunteer__media {
  width: 100%;
}
.whyVolunteer__media img {
  width: 100%;
  display: flex;
  max-width: 1150px;
  margin-inline: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.whyVolunteer.yellow {
  background-color: var(--primary-50);
}
@media (min-width: 1200px) {
  .whyVolunteer__intro {
    margin-bottom: var(--space-18);
  }
}

.wayToInvolve {
  padding: var(--space-10) 0;
  background-color: var(--primary-50);
}
.wayToInvolve__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.wayToInvolve__intro p {
  color: var(--primary-body-text);
}
.wayToInvolve .row {
  align-items: center;
  transition: 0.3s all ease-in;
}
.wayToInvolve__card {
  background-color: var(--primary-100);
  border: 1px solid var(--neutral-800);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--space-3) var(--space-3) var(--space-11) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  justify-content: center;
}
.wayToInvolve__card li {
  display: flex;
}
.wayToInvolve__card li:before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background-color: var(--primary-950);
  border-radius: 100%;
  display: inline-flex;
  margin: 10px;
}
.wayToInvolve__accordion {
  border-bottom: 1px solid var(--neutral-800);
}
.wayToInvolve__accordion__btn {
  cursor: pointer;
  padding-block: var(--space-6);
}
.wayToInvolve__accordion__btn:hover {
  color: var(--secondary1-700);
}
.wayToInvolve__accordion__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 0;
  overflow: hidden;
  transition: 0.2s all ease-in;
}
.wayToInvolve__accordion__content li {
  display: flex;
}
.wayToInvolve__accordion__content li:before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background-color: var(--primary-950);
  border-radius: 100%;
  display: inline-flex;
  margin: 10px;
}
.wayToInvolve__accordion__content .link {
  width: -moz-fit-content;
  width: fit-content;
}
.wayToInvolve__accordion.open .wayToInvolve__accordion__content {
  max-height: 1000px;
  padding-bottom: var(--space-7);
  transition: 0.2s all ease-in;
}
.wayToInvolve__media {
  position: relative;
}
.wayToInvolve__media img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1200px) {
  .wayToInvolve {
    padding: var(--space-25) 0;
  }
  .wayToInvolve__intro {
    margin-bottom: var(--space-18);
  }
  .wayToInvolve .row {
    margin: 0 -36px;
  }
  .wayToInvolve .row [class*=" col-"] {
    padding: 0 var(--space-9);
  }
}

.volunteerSignup {
  padding: var(--space-10) 0;
  background-color: var(--primary-500);
}
.volunteerSignup__box {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-50);
  border-radius: 12px;
  gap: var(--space-8);
  overflow: hidden;
}
.volunteerSignup__intro {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.volunteerSignup__form {
  padding: var(--space-5);
}
.volunteerSignup__media {
  display: none;
}
@media (min-width: 768px) {
  .volunteerSignup__box {
    flex-direction: row;
  }
}
@media (min-width: 1200px) {
  .volunteerSignup {
    padding: var(--space-25) 0;
  }
  .volunteerSignup__form {
    padding: var(--space-11);
  }
  .volunteerSignup__intro {
    margin-bottom: var(--space-8);
  }
  .volunteerSignup__media {
    display: flex;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .volunteerSignup__media img {
    display: flex;
    -o-object-position: bottom center;
       object-position: bottom center;
    -o-object-fit: cover;
       object-fit: cover;
    height: calc(100% + 10px);
    margin: -5px 0;
  }
}

.partnersGroup {
  padding: var(--space-10) 0;
}
.partnersGroup__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.partnersGroup__intro p {
  color: var(--primary-body-text);
}
.partnersGroup__brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.partnersGroup .tabs {
  gap: var(--space-10);
}
.partnersGroup .tabs__header {
  max-width: 100%;
  overflow-x: auto;
}
@media (min-width: 1200px) {
  .partnersGroup {
    padding: var(--space-25) 0;
  }
  .partnersGroup .tabs {
    gap: var(--space-14);
  }
  .partnersGroup__intro {
    margin-bottom: var(--space-18);
  }
  .partnersGroup__brands {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    gap: var(--space-8);
  }
}

.partnerCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  border: 1.2px solid var(--divider-color);
  border-radius: var(--space-2);
  height: 105px;
  width: 146px;
  box-shadow: var(--shadow-xs);
}
.partnerCard img {
  max-width: 100px;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.testimonials {
  padding: var(--space-10) 0;
  background-color: var(--neutral-50);
}
.testimonials__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .testimonials .splide__track {
    margin-inline-end: -24px;
  }
  .testimonials .splide__slide {
    padding-inline-end: var(--space-6);
  }
}
@media (min-width: 1200px) {
  .testimonials {
    padding: var(--space-25) 0;
  }
  .testimonials__intro {
    margin-bottom: var(--space-18);
  }
}

.testimonialCard {
  border: 1px solid var(--divider-color);
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.testimonialCard__logo img {
  max-height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
}
.testimonialCard__user {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider-color);
  margin-top: auto;
  --user-image-size: 44px;
}
.testimonialCard__user__pic {
  width: var(--user-image-size);
  min-width: var(--user-image-size);
  height: var(--user-image-size);
}
.testimonialCard__user__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.testimonialCard__user__title {
  color: var(--primary-subtext);
}
@media (min-width: 768px) {
  .testimonialCard {
    padding: var(--space-8);
    gap: var(--space-7);
  }
  .testimonialCard__user {
    padding-top: var(--space-7);
    --user-image-size: 52px;
  }
}

.contactForm {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .contactForm {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .contactForm {
    padding: var(--space-25) 0;
  }
}
.contactForm__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .contactForm__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .contactForm__intro {
    margin-bottom: var(--space-18);
  }
}
.contactForm__form {
  background-color: var(--neutral-50);
  border: 1px solid var(--divider-color);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
}
.contactForm__form .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .contactForm__form {
    padding: var(--space-10) var(--space-8);
  }
}

.locations {
  background-color: var(--primary-50);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .locations {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .locations {
    padding: var(--space-25) 0;
  }
}
.locations__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .locations__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .locations__intro {
    margin-bottom: var(--space-18);
  }
}
.locations__content {
  text-align: center;
}
.locations__content .tabs__header {
  overflow-x: auto;
}
.locations__content .tabs__button {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  min-width: 65%;
}
.locations__content .tabs__content {
  padding-top: var(--space-8);
}
.locations__content iframe {
  margin-inline: auto;
  max-width: 100%;
  height: 280px;
}
@media (min-width: 768px) {
  .locations .tabs__button {
    min-width: unset;
  }
  .locations__content iframe {
    height: 350px;
  }
}
@media (min-width: 1200px) {
  .locations .tabs__button {
    padding-inline: var(--space-6);
  }
  .locations .tabs__content {
    padding-top: var(--space-15);
  }
  .locations .tabs__content iframe {
    height: 560px;
  }
}

.followUsNewsletter {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .followUsNewsletter {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .followUsNewsletter {
    padding: var(--space-25) 0;
  }
}
.followUsNewsletter {
  --social-media-icon: 28px;
  background-color: var(--secondary1-50);
}
.followUsNewsletter__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}
.followUsNewsletter__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}
.followUsNewsletter__socialMedia {
  display: inline-flex;
  gap: var(--space-8);
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-8);
}
.followUsNewsletter__socialMedia__icon {
  display: inline-flex;
  width: var(--social-media-icon);
  text-decoration: none;
}
.followUsNewsletter__newsletter {
  background-color: var(--secondary1-700);
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  padding: var(--space-7) var(--space-6);
  color: var(--white);
  text-align: center;
}
.followUsNewsletter__newsletter .btn {
  width: 100%;
}
.followUsNewsletter__newsletter h5 {
  margin-bottom: var(--space-3);
}
.followUsNewsletter__newsletter .row {
  align-items: center;
}
.followUsNewsletter__newsletter__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
}
.followUsNewsletter__newsletter__field .form-iconField {
  flex-grow: 1;
}
@media (min-width: 768px) {
  .followUsNewsletter__newsletter {
    padding: var(--space-11) var(--space-8);
    text-align: start;
  }
  .followUsNewsletter__newsletter__field {
    margin-top: var(--space-8);
  }
  .followUsNewsletter__newsletter .btn {
    width: auto;
  }
  .followUsNewsletter__intro {
    flex-wrap: nowrap;
  }
  .followUsNewsletter__socialMedia {
    width: auto;
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .followUsNewsletter {
    --social-media-icon: 32px;
  }
  .followUsNewsletter__intro {
    margin-bottom: var(--space-18);
  }
  .followUsNewsletter__socialMedia {
    gap: var(--space-10);
  }
  .followUsNewsletter__newsletter {
    padding: var(--space-16) var(--space-11);
  }
  .followUsNewsletter__newsletter__field {
    margin-top: 0;
  }
}

.reportAndStatement {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .reportAndStatement {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .reportAndStatement {
    padding: var(--space-25) 0;
  }
}
.reportAndStatement__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .reportAndStatement__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .reportAndStatement__intro {
    margin-bottom: var(--space-18);
  }
}
.reportAndStatement__intro {
  text-align: center;
}
.reportAndStatement .row {
  margin: 0 -20px;
  row-gap: var(--space-6);
}
.reportAndStatement .row [class*=" col-"] {
  padding: 0 var(--space-5);
}

.reportCard {
  background-color: var(--neutral-50);
  border: 1px solid var(--divider-color);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  text-align: center;
  height: 100%;
}
.reportCard ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .reportCard {
    padding: var(--space-8);
  }
  .reportCard ul {
    margin-top: var(--space-8);
  }
}

.zakatCard {
  background-color: var(--white);
  border: 1px solid var(--primary-500);
  border-radius: var(--space-2);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  height: calc(100% - var(--space-5));
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-3);
}
.zakatCard img {
  max-width: 60px;
}
.zakatCard__wrapper {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  text-align: start;
}
.zakatCard__wrapper .beginnings__intro {
  max-width: unset;
  margin-bottom: 0 !important;
}
@media (min-width: 992px) {
  .zakatCard {
    gap: var(--space-4);
  }
  .zakatCard__wrapper {
    flex-wrap: nowrap;
    gap: var(--space-10);
  }
}

.zakatCalculator {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .zakatCalculator {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .zakatCalculator {
    padding: var(--space-25) 0;
  }
}
.zakatCalculator__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .zakatCalculator__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .zakatCalculator__intro {
    margin-bottom: var(--space-18);
  }
}
.zakatCalculator__layout {
  display: grid;
  gap: var(--space-5);
}
.zakatCalculator__grid {
  display: grid;
  gap: var(--space-5);
}
.zakatCalculator__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.zakatCalculator__group h6 {
  color: var(--primary-700);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--divider-color);
}
.zakatCalculator__group + .zakatCalculator__group {
  margin-top: auto;
}
.zakatCalculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.zakatCalculator__field:not(:last-child) {
  margin-bottom: var(--space-3);
}
.zakatCalculator__field label {
  font-size: var(--fontsize-body-sm);
}
.zakatCalculator__summary {
  border: 1px solid var(--primary-500);
  border-radius: var(--space-2);
  background-color: var(--primary-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  height: 100%;
}
.zakatCalculator__summary .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.zakatCalculator__total {
  width: 100%;
  border: 1px solid var(--primary-500);
  border-radius: var(--space-1);
  padding: var(--space-10) var(--space-5);
  text-align: center;
  background-color: var(--white);
}
.zakatCalculator__total p {
  margin-bottom: var(--space-1);
}
.zakatCalculator__zakatPayable {
  width: 100%;
  margin-top: var(--space-5);
  text-align: center;
}
@media (min-width: 768px) {
  .zakatCalculator .zakatCalculator {
    padding: var(--space-10);
  }
  .zakatCalculator__layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
  }
  .zakatCalculator__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media (min-width: 1200px) {
  .zakatCalculator {
    padding: var(--space-18) 0;
  }
  .zakatCalculator__layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .zakatCalculator__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.anniversaryBanner__banner {
  position: relative;
}
.anniversaryBanner__banner img:not(.anniversaryBanner__animated) {
  min-height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
}
.anniversaryBanner__animated {
  position: absolute;
  width: 100px;
  height: 150px;
  left: 0;
}
.anniversaryBanner__animated.right {
  left: unset;
  right: 0;
}
.anniversaryBanner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  text-align: center;
  max-width: 1000px;
  margin: var(--space-10) auto;
}
.anniversaryBanner__content video {
  width: 100%;
}
.anniversaryBanner__content .body-lg:first-child {
  max-width: 650px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .anniversaryBanner__content {
    gap: var(--space-12);
    margin-block: var(--space-18);
  }
  .anniversaryBanner__animated {
    width: 320px;
    height: 380px;
    left: 0;
  }
}

.manifesto {
  background-color: var(--primary-50);
}
.manifesto__content {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .manifesto__content {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .manifesto__content {
    padding: var(--space-25) 0;
  }
}
.manifesto__content {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.manifesto__content img {
  position: absolute;
  bottom: 160px;
  right: 10px;
}
.manifesto__content h3.weight-bold {
  width: 100%;
  text-align: right;
  margin-top: 0;
}
@media (min-width: 768px) {
  .manifesto__content p.body-md {
    width: 50%;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}
@media (min-width: 992px) {
  .manifesto__content p.body-md {
    width: 30%;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}

.founders {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .founders {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .founders {
    padding: var(--space-25) 0;
  }
}
.founders__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .founders__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .founders__intro {
    margin-bottom: var(--space-18);
  }
}
.founders__intro {
  text-align: center;
}
.founders__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}
.founders__card__media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.founders__card__media img {
  width: 100%;
}
.founders__card__intro {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(24px);
  padding: var(--space-6);
}
@media (min-width: 992px) {
  .founders__card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }
  .founders__card__media {
    max-width: 600px;
  }
}

.programCampaigns {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .programCampaigns {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .programCampaigns {
    padding: var(--space-25) 0;
  }
}
.programCampaigns {
  background-color: var(--secondary1-50);
}
.programCampaigns.red {
  background-color: var(--secondary2-50);
}
.programCampaigns__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .programCampaigns__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .programCampaigns__intro {
    margin-bottom: var(--space-18);
  }
}
.programCampaigns__intro {
  text-align: center;
}
.programCampaigns__card {
  background-color: var(--secondary1-700);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.programCampaigns__card__content {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-5);
  color: var(--white);
}
.programCampaigns__card__content h4 {
  margin-bottom: var(--space-4);
}
.programCampaigns__card__content .divider {
  margin-block: var(--space-6);
}
.programCampaigns__card__content .btn {
  margin-top: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.programCampaigns__card__media {
  width: 100%;
  order: -1;
}
.programCampaigns__card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right center;
     object-position: right center;
  transform: scale(1.01) translate(-1px);
}
.programCampaigns__card__pillBlock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--neutral-100);
}
.programCampaigns__card__pillBlock + .body-xl {
  margin-bottom: var(--space-3);
  color: var(--neutral-100);
}
.programCampaigns__card.red {
  background-color: var(--secondary2-700);
}
.programCampaigns__card.red .pill {
  color: var(--error-700);
}
@media (min-width: 768px) {
  .programCampaigns__card__content {
    padding: var(--space-11) var(--space-8);
  }
}
@media (min-width: 1200px) {
  .programCampaigns__card {
    flex-direction: row;
  }
  .programCampaigns__card__media {
    order: unset;
    max-width: 600px;
    flex-shrink: 0;
  }
  .programCampaigns__card__content {
    padding: var(--space-18) var(--space-8);
  }
}

.supportSystem {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .supportSystem {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .supportSystem {
    padding: var(--space-25) 0;
  }
}
.supportSystem {
  background-color: var(--primary-50);
}
.supportSystem__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .supportSystem__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .supportSystem__intro {
    margin-bottom: var(--space-18);
  }
}
.supportSystem__intro {
  text-align: center;
}
.supportSystem__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  background-color: var(--primary-100);
  margin-top: var(--space-7);
  border-radius: var(--space-4);
  padding: var(--space-6) var(--space-8);
  text-align: center;
}
.supportSystem__stats__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.supportSystem__stats__block h2 {
  color: var(--primary-700);
}
.supportSystem__stats__block .body-md {
  color: var(--neutral-600);
}
@media (min-width: 768px) {
  .supportSystem__stats {
    flex-wrap: nowrap;
  }
}
@media (min-width: 992px) {
  .supportSystem__stats {
    flex-wrap: nowrap;
    margin-top: var(--space-18);
    padding: var(--space-16);
  }
}

.gallery {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .gallery {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .gallery {
    padding: var(--space-25) 0;
  }
}
.gallery__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .gallery__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .gallery__intro {
    margin-bottom: var(--space-18);
  }
}
.gallery__intro {
  text-align: center;
}
.gallery__images img {
  border-radius: 6px;
  width: 462px;
  height: 264px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-inline: auto;
  box-shadow: var(--shadow-sm);
}
.gallery__images .row {
  justify-content: center;
  row-gap: var(--space-6);
  margin: 0 -12px;
}
.gallery__images [class*=col-] {
  padding: 0 var(--space-3);
}
.gallery__action {
  text-align: center;
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .gallery__action {
    margin-top: var(--space-11);
  }
}

.recognization {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .recognization {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .recognization {
    padding: var(--space-25) 0;
  }
}
.recognization {
  text-align: center;
  background-color: var(--secondary2-700);
  color: var(--white);
}
.recognization .body-xl {
  color: var(--neutral-100);
}
.recognization__awards {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.recognization__awards__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: center;
  justify-content: center;
}
.recognization__awards__card img {
  width: 62px;
  height: 62px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-inline: auto;
}
.recognization .row {
  row-gap: var(--space-10);
}
@media (min-width: 768px) {
  .recognization__awards {
    gap: var(--space-18);
  }
  .recognization .row {
    row-gap: var(--space-18);
  }
}

.ourwork {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .ourwork {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .ourwork {
    padding: var(--space-25) 0;
  }
}
.ourwork {
  background-color: var(--secondary1-50);
}
.ourwork__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .ourwork__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .ourwork__intro {
    margin-bottom: var(--space-18);
  }
}
.ourwork__intro {
  text-align: center;
}
@media (min-width: 768px) {
  .ourwork .splide__track {
    margin-inline-end: -20px;
  }
  .ourwork .splide__slide {
    padding-inline-end: var(--space-5);
  }
}

.ourworkCard {
  border: 1px solid var(--divider-color);
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.ourworkCard:hover {
  box-shadow: 0 0 11px rgba(16, 24, 40, 0.0588235294);
  border-color: var(--neutral-300);
}
.ourworkCard__media img,
.ourworkCard__media video {
  border-radius: 6px;
  height: 240px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ourworkCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}
.ourworkCard__content h5 {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .ourworkCard {
    gap: var(--space-8);
  }
}

.breedService {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .breedService {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .breedService {
    padding: var(--space-25) 0;
  }
}
.breedService {
  background-color: var(--neutral-50);
}
.breedService__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .breedService__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .breedService__intro {
    margin-bottom: var(--space-18);
  }
}
.breedService__intro {
  text-align: center;
}
.breedService__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-10) var(--space-5);
  background-color: var(--breed-primary);
  color: var(--white);
  text-align: center;
  height: 100%;
  justify-content: flex-end;
}
.breedService__card img {
  width: 240px;
  margin-inline: auto;
}
.breedService__card .btn {
  width: 100%;
  max-width: 260px;
  margin-top: var(--space-10);
  margin-inline: auto;
}
.breedService .row {
  justify-content: center;
  row-gap: var(--space-5);
}
.breedService .row [class*=" col-"]:nth-child(1) .breedService__card .btn {
  border-color: var(--white);
}
.breedService .row [class*=" col-"]:nth-child(2) .breedService__card {
  background-color: var(--primary-500);
  color: var(--primary-text);
}
.breedService .row [class*=" col-"]:nth-child(2) .breedService__card .btn {
  border-color: var(--neutral-950);
}
.breedService .row [class*=" col-"]:nth-child(2) .breedService__card .btn, .breedService .row [class*=" col-"]:nth-child(2) .breedService__card .btn:hover span {
  color: var(--primary-text);
}
.breedService .row [class*=" col-"]:nth-child(3) .breedService__card {
  background-color: var(--white);
  color: var(--primary-text);
}
.breedService .row [class*=" col-"]:nth-child(3) .breedService__card .btn {
  border-color: var(--neutral-400);
  color: var(--primary-text);
}
.breedService .row [class*=" col-"]:nth-child(3) .breedService__card .btn, .breedService .row [class*=" col-"]:nth-child(3) .breedService__card .btn:hover span {
  color: var(--primary-text);
}
@media (min-width: 1200px) {
  .breedService {
    padding-top: var(--space-20);
  }
  .breedService__card {
    padding: var(--space-10) var(--space-5);
  }
  .breedService .btn {
    margin-top: var(--space-15);
  }
}

.proposition {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background-color: var(--breed-background-light);
  text-align: center;
  border-radius: var(--space-2);
  padding: var(--space-10) var(--space-6);
  color: var(--breed-primary);
  height: 100%;
}
.proposition img {
  width: 100px;
  height: 100px;
  margin: auto;
  transition: 0.3s all ease-in-out;
}
.proposition:hover {
  background-color: #e1f0f0;
}
.proposition:hover img {
  transform: scale(1.2);
  transition: 0.3s all ease-in-out;
}

.donateAnimal {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .donateAnimal {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .donateAnimal {
    padding: var(--space-25) 0;
  }
}
.donateAnimal__box {
  background: var(--breed-primary) url("assets/images/breed-donate-bg.png") no-repeat bottom center;
  background-size: cover;
  color: var(--white);
  text-align: center;
  padding: var(--space-20) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.donateAnimal__box .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin: var(--space-5) auto 0;
}
@media (min-width: 1200px) {
  .donateAnimal__box {
    padding: 120px 0;
    background-size: contain;
  }
  .donateAnimal__box .btn {
    margin-top: var(--space-8);
  }
}

.formTitle {
  text-align: center;
  margin-bottom: var(--space-10);
}

.modal__header .btn-text {
  display: none;
}
@media (min-width: 1200px) {
  .modal__footer {
    margin: var(--space-10) var(--space-16) var(--space-6);
  }
}

@media (min-width: 1200px) {
  .animalForm,
  .basicForm {
    margin: 0 var(--space-16);
  }
}

.query {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.query:not(:last-child) {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: var(--space-5);
}
.query .radios {
  margin-top: var(--space-3);
}
.query .radioSection {
  margin: calc(var(--space-3) / 2) 0;
}
.query .radioSection.disabled {
  opacity: 20%;
  pointer-events: none;
}
.query .form-checkbox {
  margin: 0;
  cursor: pointer;
}
.query.disabled {
  opacity: 20%;
}
.query.disabled .disabled {
  opacity: 1;
}

.introModal__media {
  width: 100%;
  display: block;
  max-width: 600px;
  margin: 0 auto var(--space-3);
}
.introModal .breedService__card img {
  max-width: 150px;
}
.introModal .row {
  justify-content: center;
  row-gap: var(--space-5);
  margin: 0 -2px;
}
.introModal [class*=col-] {
  padding: 0 2px;
}
.introModal [class*=col-]:nth-child(1) .breedService__card {
  background-color: var(--primary-500);
  color: var(--primary-text);
}
.introModal [class*=col-]:nth-child(1) .breedService__card .btn {
  border-color: var(--neutral-950);
}
.introModal [class*=col-]:nth-child(1) .breedService__card .btn, .introModal [class*=col-]:nth-child(1) .breedService__card .btn:hover span {
  color: var(--primary-text);
}
.introModal [class*=col-]:nth-child(1) .breedService__card .btn:hover path {
  fill: var(--primary-text);
}
.introModal [class*=col-]:nth-child(2) .breedService__card .btn {
  border-color: var(--white);
}
@media (min-width: 768px) {
  .introModal .breedService__card img {
    max-width: 220px;
  }
}

.muharram .color-primary {
  color: var(--error-700);
}
.muharram .beginnings__intro {
  max-width: 800px;
}
.muharram .dastarkhwan {
  background-color: var(--neutral-950);
  color: var(--secondary1-50);
}
.muharram .dastarkhwan h3 {
  color: var(--error-700);
}
.muharram .dastarkhwan__content {
  order: -1;
}
@media (min-width: 768px) {
  .muharram .dastarkhwan__content {
    order: unset;
  }
}
.muharram .joinSustaining {
  background-color: var(--error-700);
}

.campaign .beginnings__intro,
.campaign .stats__intro,
.campaign .blogsBlock__intro {
  max-width: 800px;
}
.campaign .stats_row {
  max-width: 970px;
  margin-inline: auto;
}
.campaign .light-bg {
  background-color: var(--neutral-50);
}
.campaign.flood {
  --page-primary-bg: var(--success-50);
}
.campaign.flood .programCampaigns__card {
  background-color: var(--breed-primary);
}
.campaign.flood .programCampaigns__card__content .body-xl {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  margin-bottom: var(--space-5);
}
.campaign.flood .changeMovement {
  background-color: var(--primary-50);
}
.campaign.flood .programCampaigns {
  background-color: transparent;
}
.campaign.flood .photoGrid__media {
  overflow: hidden;
  border-radius: var(--space-3);
  border: 3px solid transparent;
}
.campaign.flood .photoGrid__media:hover {
  border-color: var(--breed-primary);
}
.campaign.flood .photoGrid__media img {
  transform: scale(1.05);
  width: calc(100% + 4px);
}

.blogsBlock {
  background-color: var(--neutral-50);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .blogsBlock {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .blogsBlock {
    padding: var(--space-25) 0;
  }
}
.blogsBlock__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .blogsBlock__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .blogsBlock__intro {
    margin-bottom: var(--space-18);
  }
}
.blogsBlock__intro {
  text-align: center;
}
.blogsBlock .splide__slide {
  padding-inline-end: var(--space-5);
}

.blogsCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.blogsCard__media {
  width: 100%;
  flex-shrink: 0;
  max-width: 100%;
}
.blogsCard__media img {
  border-radius: var(--space-3);
}
.blogsCard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.blogsCard__content .btn {
  margin-top: var(--space-1);
}
@media (min-width: 768px) {
  .blogsCard {
    gap: var(--space-8);
  }
}
@media (min-width: 1200px) {
  .blogsCard {
    flex-direction: row;
  }
  .blogsCard__media {
    width: 315px;
  }
}

#sliderMuharramBlog {
  padding-bottom: var(--space-15);
}
#sliderMuharramBlog .splide__pagination {
  top: calc(100% - var(--space-5));
  justify-content: center;
}
@media (min-width: 768px) {
  #sliderMuharramBlog {
    padding-bottom: unset;
  }
}

.photoGridMobile {
  padding-bottom: var(--space-10);
}
.photoGridMobile .photoGrid__media {
  border-radius: var(--space-3);
  height: 100%;
  margin: 0;
}
.photoGridMobile + .photoGrid {
  display: none;
}
@media (min-width: 768px) {
  .photoGridMobile {
    display: none;
    padding-bottom: unset;
  }
  .photoGridMobile + .photoGrid {
    display: block;
  }
}

.btn.red {
  background: linear-gradient(90deg, var(--neutral-950) 21.28%, var(--error-700) 85.11%);
  animation: textBackground 5s ease-out infinite;
  background-size: 200% 100%;
  color: var(--white);
}
.btn.red:hover:before {
  background-color: var(--error-700);
}

.floodStats {
  background-color: var(--success-50);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .floodStats {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .floodStats {
    padding: var(--space-25) 0;
  }
}
.floodStats__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 750px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .floodStats__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .floodStats__intro {
    margin-bottom: var(--space-18);
  }
}
.floodStats__intro {
  text-align: center;
}
.floodStats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--white);
  width: 100%;
  height: 100%;
  aspect-ratio: 2/1;
  border-radius: var(--space-2);
  color: var(--breed-primary);
  padding: var(--space-10) var(--space-5);
}
.floodStats__card.primary {
  background-color: var(--breed-primary);
  color: var(--white);
}
.floodStats .row {
  row-gap: var(--space-4);
}
@media (min-width: 768px) {
  .floodStats__card {
    aspect-ratio: 1;
  }
}

.blogDetail {
  margin-bottom: var(--space-10);
}
.blogDetail__back {
  margin-bottom: var(--space-10);
}
.blogDetail__back a {
  color: var(--primary-700);
}
.blogDetail__blog {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.blogDetail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.blogDetail__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.blogDetail__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fontsize-body-sm);
  color: var(--secondary1-700);
}
.blogDetail__media img {
  width: 100%;
  border-radius: var(--space-2);
}
.blogDetail__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-size: var(--fontsize-heading-6);
}
.blogDetail__content ul li {
  display: flex;
}
.blogDetail__content ul li:before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background-color: var(--primary-950);
  border-radius: 100%;
  display: inline-flex;
  margin: var(--space-3);
}
.blogDetail__content a {
  color: var(--secondary1-700);
}
.blogDetail__content b {
  font-weight: 700;
}
.blogDetail__suggestions {
  padding-block: var(--space-5);
}
.blogDetail__suggestions .splide {
  padding-top: var(--space-5);
}
@media (min-width: 768px) {
  .blogDetail__suggestions .splide__slide {
    padding-inline-end: var(--space-5);
  }
}
.blogDetail__share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-5);
  border-top: 1px solid var(--divider-color);
  border-bottom: 1px solid var(--divider-color);
}
.blogDetail__share .footer__socialIcons {
  display: inline-flex;
}
.blogDetail__share .footer__socialIcons:not(.colored) svg, .blogDetail__share .footer__socialIcons:not(.colored) path {
  fill: var(--text-primary);
}
@media (min-width: 768px) {
  .blogDetail {
    margin-bottom: var(--space-15);
  }
  .blogDetail__back {
    margin-bottom: var(--space-15);
  }
  .blogDetail__blog {
    gap: var(--space-10);
  }
  .blogDetail__suggestions {
    padding-top: 0;
    margin-top: var(--space-5);
  }
  .blogDetail__suggestions .splide {
    padding-top: 0;
  }
  .blogDetail__share {
    margin-top: var(--space-5);
  }
}
@media (min-width: 992px) {
  .blogDetail {
    margin-bottom: var(--space-25);
  }
}

.blogWrap {
  margin-bottom: var(--space-15);
}
.blogWrap__container {
  display: flex;
  gap: var(--space-10);
}
.blogWrap__menu {
  display: none;
  width: 220px;
  flex-shrink: 0;
}
.blogWrap__mobileMenu {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}
.blogWrap__mobileMenu .form-group {
  max-width: 220px;
  margin-inline-start: auto;
}
.blogWrap__hamburger button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.blogWrap__hamburger__back {
  padding: var(--space-5) var(--space-4);
}
.blogWrap__hamburger__back button {
  padding: 0;
}
.blogWrap__hamburger__menu {
  position: fixed;
  left: 0;
  transform: translateX(-100%);
  background-color: var(--white);
  top: var(--header-height);
  height: calc(100dvh - var(--header-height));
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  z-index: 998;
  flex-wrap: wrap;
  width: 100vw;
  transition: 0.3s all ease-in;
}
.blogWrap__hamburger__menu.open {
  transform: translateX(0);
  transition: 0.3s all ease-in;
}
.blogWrap__hamburger__menuButton,
.blogWrap__hamburger .level-2 .blogWrap__hamburger__menuItem {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background-color: var(--white);
  font-size: var(--fontsize-body-md);
  color: var(--text-primary);
  cursor: pointer;
}
.blogWrap__hamburger__menuButton:focus, .blogWrap__hamburger__menuButton:active,
.blogWrap__hamburger .level-2 .blogWrap__hamburger__menuItem:focus,
.blogWrap__hamburger .level-2 .blogWrap__hamburger__menuItem:active {
  background-color: var(--secondary1-100);
  color: var(--secondary1-700);
}
.blogWrap__hamburger__menuItem {
  width: 100%;
}
.blogWrap__hamburger__menuItem .level-2 .blogWrap__hamburger__back button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.blogWrap__hamburger__menuItem .blogWrap__hamburger__menuList {
  position: fixed;
  right: 0;
  transform: translateX(100%);
  background-color: var(--white);
  top: 0;
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  flex-wrap: wrap;
  width: 100vw;
  transition: 0.3s all ease-in;
}
.blogWrap__hamburger__menuItem .blogWrap__hamburger__menuList.open {
  transform: translateX(0);
  transition: 0.3s all ease-in;
}
.blogWrap__blogs {
  width: 100%;
}
.blogWrap__blogs .row {
  row-gap: var(--space-4);
}
.blogWrap .pills {
  display: none;
}
.blogWrap .tab-content:not(.active) {
  display: none;
}
.blogWrap .pagination {
  margin-top: var(--space-10);
}
@media (min-width: 992px) {
  .blogWrap__mobileMenu {
    display: none;
  }
  .blogWrap__menu {
    display: block;
  }
  .blogWrap .pills {
    display: flex;
    margin-bottom: var(--space-10);
    gap: var(--space-2);
  }
}

.blogNav__list {
  margin-top: var(--space-2);
}
.blogNav__list li {
  width: 100%;
  padding: var(--space-3);
  border-bottom: 1px solid var(--divider-color);
  cursor: pointer;
  font-size: var(--fontsize-body-md);
  line-height: 1.5;
}
.blogNav__list li.active {
  background-color: var(--secondary1-100);
  color: var(--secondary1-700);
  border-color: var(--secondary1-700);
}

.aboutPage .beginnings.about {
  position: relative;
  background-image: url("assets/images/core-value-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}
.aboutPage .beginnings.about:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7411764706);
  z-index: 1;
}
.aboutPage .beginnings.about {
  color: var(--white);
}
.aboutPage .beginnings.about .beginnings__intro {
  max-width: 1150px;
}
.aboutPage .beginnings.about .beginnings__intro p {
  color: var(--white);
}
.aboutPage .beginnings.about .container {
  position: relative;
  z-index: 2;
}
.aboutPage .beginnings:not(.about) {
  text-align: center;
  justify-content: center;
  align-items: center;
}
.aboutPage .beginnings:not(.about) .beginnings__media {
  margin-bottom: var(--space-10);
}
.aboutPage .beginnings:not(.about) .beginnings__media img {
  max-width: 850px;
}
.aboutPage .beginnings:not(.about) .btn {
  text-align: center;
}
.aboutPage .howToHelp {
  background-color: var(--secondary1-50);
}
.aboutPage .problemStatement__media {
  max-width: 640px;
  margin-inline: auto;
}
.aboutPage .problemStatement__content {
  text-align: center;
}
.aboutPage .problemStatement .container {
  max-width: var(--container-lg-size);
}
.aboutPage .theSolutions {
  margin-bottom: var(--space-10);
}
.aboutPage .theSolutions__intro {
  max-width: 1100px;
}
.aboutPage .theSolutions .carousal__actions #prevBtn,
.aboutPage .theSolutions .carousal__actions #nextBtn {
  display: none;
}
.aboutPage .theSolutions .splide__pagination {
  justify-content: center;
}
@media (min-width: 1200px) {
  .aboutPage .problemStatement__box {
    gap: var(--space-10);
  }
  .aboutPage .problemStatement__content {
    text-align: start;
  }
  .aboutPage .theSolutions {
    margin-bottom: 0;
  }
  .aboutPage .theSolutions .carousal__actions #prevBtn,
  .aboutPage .theSolutions .carousal__actions #nextBtn {
    display: inline-block;
  }
  .aboutPage .theSolutions .splide__pagination {
    justify-content: flex-start;
  }
}

.timeline {
  --line-width: 128px;
  --timeline-gap: var(--space-40);
  margin-bottom: var(--space-11);
}
.timeline .container {
  display: flex;
  flex-direction: column;
  gap: var(--timeline-gap);
}
.timeline__line {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.timeline__line:before, .timeline__line:after {
  content: " ";
  position: absolute;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.timeline__line:before {
  width: 3px;
  height: 135px;
  background-color: var(--neutral-950);
  top: 100%;
}
.timeline__line:after {
  width: 31px;
  height: 31px;
  border-radius: 100px;
  background-color: var(--neutral-950);
  border: 8px solid var(--white);
  top: calc(100% + 30px);
}
.timeline__media {
  width: 100%;
  order: -1;
}
.timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  text-align: center;
}
.timeline__content .body-lg {
  color: var(--primary-subtext);
}
@media (max-width: 768px) {
  .timeline__line:last-of-type:before, .timeline__line:last-of-type:after {
    content: unset;
  }
}
@media (min-width: 768px) {
  .timeline {
    --timeline-gap: var(--space-20);
    margin-bottom: var(--space-18);
  }
  .timeline__line {
    flex-direction: row;
  }
  .timeline__line:before {
    height: calc(100% + var(--timeline-gap));
    top: auto;
  }
  .timeline__line:after {
    top: var(--space-6);
  }
  .timeline__media {
    order: inherit;
  }
  .timeline__media, .timeline__content {
    width: calc(50% - var(--line-width) / 2);
  }
  .timeline__content {
    text-align: start;
    gap: var(--space-8);
  }
  .timeline .container .timeline__line:nth-child(2n) .timeline__content {
    text-align: end;
  }
}
@media (min-width: 1200px) {
  .timeline {
    margin-bottom: var(--space-25);
  }
}

.philosophy {
  background-color: var(--neutral-50);
}
.philosophy .combatHunger__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 1010px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .philosophy .combatHunger__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .philosophy .combatHunger__intro {
    margin-bottom: var(--space-18);
  }
}
.philosophy .combatHunger__intro {
  text-align: center;
}

.alignValue {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .alignValue {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .alignValue {
    padding: var(--space-25) 0;
  }
}
.alignValue {
  background-color: var(--neutral-50);
}
.alignValue__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .alignValue__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .alignValue__intro {
    margin-bottom: var(--space-18);
  }
}
.alignValue__intro {
  text-align: center;
}
.alignValue__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background-color: var(--white);
  border: 1px solid var(--primary-500);
  box-shadow: var(--shadow-xs);
  border-radius: var(--space-2);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}
.alignValue__card__authour,
.alignValue__card h6 {
  color: var(--primary-500);
}
.alignValue .row {
  row-gap: var(--space-5);
}
.alignValue .row [class*=col-] .alignValue__card {
  height: 100%;
}
.alignValue .row [class*=col-]:nth-child(2) {
  align-self: flex-end;
}
.alignValue .row [class*=col-]:nth-child(5) {
  align-self: flex-start;
}

.approach {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .approach {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .approach {
    padding: var(--space-25) 0;
  }
}
.approach__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .approach__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .approach__intro {
    margin-bottom: var(--space-18);
  }
}
.approach__intro {
  max-width: unset;
}
.approach .row {
  row-gap: var(--space-5);
}
.approach__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  background-color: var(--neutral-50);
  box-shadow: var(--shadow-xs);
  border-radius: var(--space-2);
  padding: var(--space-6) var(--space-8);
  height: 100%;
}
.approach__card .btn {
  margin-top: auto;
}
.approach__card h5 {
  margin-bottom: var(--space-8);
}
.approach__card__icon {
  display: inline-flex;
  padding: var(--space-4);
  background-color: var(--white);
  border-radius: var(--space-25);
}

.teamWrap {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .teamWrap {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .teamWrap {
    padding: var(--space-25) 0;
  }
}
.teamWrap__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .teamWrap__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .teamWrap__intro {
    margin-bottom: var(--space-18);
  }
}
.teamWrap .row {
  justify-content: center;
  row-gap: var(--space-8);
}
.teamWrap .tabs__panel {
  padding-top: var(--space-10);
}
.teamWrap .tabs__panel .row {
  row-gap: var(--space-5);
}
.teamWrap.advisors {
  background-color: var(--secondary1-50);
}
@media (min-width: 768px) {
  .teamWrap {
    padding: var(--space-15) 0;
  }
  .teamWrap__intro {
    margin-bottom: var(--space-10);
  }
}
@media (min-width: 1200px) {
  .teamWrap {
    padding: var(--space-20) 0;
  }
  .teamWrap__intro {
    margin-bottom: var(--space-15);
  }
  .teamWrap .tabs__panel {
    padding-top: var(--space-13);
  }
}

.teamCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
  padding: var(--space-10);
  padding-bottom: var(--space-5);
  border: 2px solid var(--primary-500);
  border-radius: var(--space-2);
  background-color: var(--white);
  height: 100%;
}
.teamCard__media {
  width: 100%;
  border-radius: var(--space-2);
  height: 390px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
.teamCard__info {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
  gap: var(--space-2);
}
.teamCard__info__social {
  display: inline-flex;
  align-self: center;
  gap: var(--space-2);
}
.teamCard__info__socialIcon {
  display: inline-flex;
  text-decoration: none;
  transition: 0.2s all ease-in;
}
.teamCard__info__socialIcon svg {
  width: 40px;
  height: 40px;
}
.teamCard__info__socialIcon:hover, .teamCard__info__socialIcon:focus {
  transform: scale(1.15);
  transition: 0.2s all ease-in;
}

.ourWorkPage {
  --section-primary-color: var(--primary-500);
  --section-secondary-bg: var(--primary-50);
  --section-border: var(--primary-300);
  --section-text: var(--primary-text);
}
.ourWorkPage.livestockPage {
  --section-primary-color: var(--success-800);
  --section-secondary-bg: var(--success-50);
  --section-border: var(--success-600);
  --section-text: var(--white);
}
.ourWorkPage.livestockPage .color-primary {
  color: var(--section-primary-color);
}
.ourWorkPage.reliefPage {
  --section-primary-color: var(--relief-and-resiliance);
  --section-secondary-bg: rgba(50, 143, 173, 0.1);
  --section-border: #4bbfe4;
  --section-text: var(--white);
}
.ourWorkPage.reliefPage .color-primary {
  color: var(--section-primary-color);
}
.ourWorkPage.specialProject {
  --section-primary-color: var(--secondary1-600);
  --section-secondary-bg: var(--secondary1-50);
  --section-border: var(--secondary1-500);
  --section-text: var(--white);
}
.ourWorkPage.specialProject .color-primary {
  color: var(--section-primary-color);
}
.ourWorkPage.educationPage {
  --section-primary-color: var(--secondary2-600);
  --section-secondary-bg: var(--secondary2-50);
  --section-border: var(--secondary2-400);
  --section-text: var(--white);
}
.ourWorkPage.educationPage .color-primary {
  color: var(--section-primary-color);
}
.ourWorkPage.researchAndAdvancement {
  --section-primary-color: var(--success-400);
  --section-secondary-bg: var(--success-50);
  --section-border: var(--success-50);
  --section-text: var(--primary-text);
}
.ourWorkPage.researchAndAdvancement .color-primary {
  color: var(--section-primary-color);
}
.ourWorkPage .problemStatement {
  background-color: var(--section-secondary-bg);
}
.ourWorkPage .problemStatement .container {
  max-width: var(--container-lg-size);
}
.ourWorkPage .problemStatement__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.ourWorkPage .problemStatement__content h4 {
  color: var(--section-primary-color);
  margin-bottom: var(--space-1);
}
.ourWorkPage .problemStatement__content__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 1200px) {
  .ourWorkPage .problemStatement__media {
    max-width: 580px;
  }
  .ourWorkPage .problemStatement__content__details {
    margin-bottom: var(--space-5);
  }
}
.ourWorkPage .theSolutions {
  background-color: var(--section-secondary-bg);
}
.ourWorkPage .blogsBlock {
  background-color: transparent;
}
.ourWorkPage .joinSustaining {
  background-color: var(--section-secondary-bg);
}
.ourWorkPage .joinSustaining__content {
  background-color: var(--section-primary-color);
}
.ourWorkPage .joinSustaining__content,
.ourWorkPage .joinSustaining__content .color-subText {
  color: var(--section-text);
}
.ourWorkPage .solutionCard__media {
  border-radius: var(--space-2);
}
.ourWorkPage .solutionCard__media img {
  height: 230px;
}
.ourWorkPage .solutionCard__media.empty {
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}
.ourWorkPage .solutionCard__media.empty img {
  -o-object-fit: contain;
     object-fit: contain;
}

.impactStats {
  background-color: var(--section-primary-color);
  color: var(--section-text);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .impactStats {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .impactStats {
    padding: var(--space-25) 0;
  }
}
.impactStats__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .impactStats__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .impactStats__intro {
    margin-bottom: var(--space-18);
  }
}
.impactStats__intro {
  text-align: center;
}
.impactStats__box .row {
  align-items: stretch;
  row-gap: var(--space-4);
}
.impactStats__box [class*=col-]:not(:last-child) {
  border-bottom: 1px solid var(--section-border);
}
.impactStats__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  justify-content: center;
  text-align: center;
  padding-block: var(--space-5);
  min-height: 150px;
}
@media (min-width: 768px) {
  .impactStats__box [class*=col-]:not(:last-child) {
    border-bottom: none;
  }
  .impactStats__box [class*=col-]:nth-child(odd) {
    border-right: 1px solid var(--section-border);
  }
}
@media (min-width: 992px) {
  .impactStats__box [class*=col-]:nth-child(odd) {
    border-right: 0;
  }
  .impactStats__box [class*=col-]:not(:last-child) {
    border-bottom: none;
    border-right: 1px solid var(--section-border);
  }
}

.aim {
  position: relative;
  box-shadow: var(--shadow-sm);
  color: var(--white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.aim:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.aim .beginnings__intro {
  max-width: 1150px;
  margin-bottom: 0;
}
.aim .beginnings__intro p {
  color: var(--white);
}
.aim .container {
  position: relative;
  z-index: 2;
}
.aim.food {
  background-image: url("assets/images/food-aim.png");
}
.aim.food:before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), linear-gradient(0deg, rgba(211, 189, 42, 0.1), rgba(211, 189, 42, 0.1));
}
.aim.livestock {
  background-image: url("assets/images/livestock-aim.png");
}
.aim.livestock:before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), linear-gradient(0deg, rgba(5, 119, 71, 0.1), rgba(5, 119, 71, 0.1));
}
.aim.relief {
  background-image: url("assets/images/relief-aim.png");
}
.aim.relief:before {
  background: rgba(0, 0, 0, 0.7);
}
.aim.special {
  background-image: url("assets/images/special-project-aim.png");
}
.aim.special:before {
  background: rgba(0, 0, 0, 0.7);
}
.aim.education {
  background-image: url("assets/images/education-aim.png");
}
.aim.education:before {
  background: rgba(0, 0, 0, 0.6980392157);
}
.aim.research {
  background-image: url("assets/images/research-aim.png");
}
.aim.research:before {
  background: rgba(0, 0, 0, 0.8);
}

.brandAndProgram {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .brandAndProgram {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .brandAndProgram {
    padding: var(--space-25) 0;
  }
}
.brandAndProgram__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 860px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .brandAndProgram__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .brandAndProgram__intro {
    margin-bottom: var(--space-18);
  }
}
.brandAndProgram__intro {
  text-align: center;
}
.brandAndProgram__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .brandAndProgram__header {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .brandAndProgram__header {
    margin-bottom: var(--space-18);
  }
}
.brandAndProgram__header {
  margin-bottom: var(--space-6);
}
.brandAndProgram__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  border-radius: var(--space-3) var(--space-3) var(--space-9) var(--space-3);
  overflow: hidden;
  height: 100%;
}
.brandAndProgram__card__media {
  width: 100%;
}
.brandAndProgram__card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--section-primary-color);
  color: var(--section-text);
  flex-grow: 1;
  box-shadow: var(--shadow-xs);
}
.brandAndProgram__card__content.secondary-1 {
  background-color: var(--secondary1-700);
  color: var(--white);
}
.brandAndProgram__card__content.secondary-1 rect,
.brandAndProgram__card__content.secondary-1 path {
  stroke: var(--white);
}
.brandAndProgram__card__content.secondary-2 {
  background-color: var(--breed-primary);
  color: var(--white);
}
.brandAndProgram__card__content.secondary-2 rect,
.brandAndProgram__card__content.secondary-2 path {
  stroke: var(--white);
}
.brandAndProgram__card__content.muharram {
  background-color: var(--error-700);
  color: var(--white);
}
.brandAndProgram__card__content.muharram rect,
.brandAndProgram__card__content.muharram path {
  stroke: var(--white);
}
.brandAndProgram__card__content.arbain {
  background-color: var(--neutral-950);
  color: var(--white);
}
.brandAndProgram__card__content.arbain rect,
.brandAndProgram__card__content.arbain path {
  stroke: var(--white);
}
.brandAndProgram__card__action {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}
.brandAndProgram__card__action rect,
.brandAndProgram__card__action path {
  stroke: var(--section-text);
}
.brandAndProgram__card__action svg:hover {
  transform: scale(1.05);
  transition: 0.2s all ease;
  fill: rgba(255, 255, 255, 0.2);
}
.brandAndProgram__box + .brandAndProgram__box {
  margin-top: var(--space-7);
}
.brandAndProgram__box .row {
  row-gap: var(--space-7);
}
.brandAndProgram__box .splide__slide:nth-child(even) {
  padding-inline-start: 10px;
}
.brandAndProgram__box .splide__slide:nth-child(odd) {
  padding-inline-end: 10px;
}
@media (min-width: 768px) {
  .brandAndProgram__header {
    margin-bottom: var(--space-6);
  }
  .brandAndProgram__box + .brandAndProgram__box {
    margin-top: var(--space-12);
  }
  .brandAndProgram__card.fullWidth {
    flex-direction: row;
  }
  .brandAndProgram__card.fullWidth .brandAndProgram__card__media {
    width: 50%;
  }
  .brandAndProgram__card.fullWidth .brandAndProgram__card__content {
    justify-content: center;
  }
  .brandAndProgram__card.fullWidth .brandAndProgram__card__action {
    margin-top: unset;
  }
}
@media (min-width: 1200px) {
  .brandAndProgram__header {
    margin-bottom: var(--space-6);
  }
  .brandAndProgram__card__content {
    padding: var(--space-8);
  }
  .brandAndProgram__box + .brandAndProgram__box {
    margin-top: var(--space-18);
  }
}

.seeding {
  --page-primary: var(--success-800);
  --page-primary-light-bg: var(--success-50);
  --page-secondary: var(--primary-500);
  --page-secondary-light-bg: var(--primary-50);
  --section-primary-color: var(--page-secondary);
  --section-text: var(--primary-text);
  --section-border: var(--primary-300);
}
.seeding .problemStatement {
  background-color: transparent;
}
.seeding .problemStatement__intro {
  max-width: 670px;
}
.seeding .problemStatement__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.seeding .problemStatement__content h2 {
  color: var(--page-primary);
  margin-bottom: var(--space-1);
}
.seeding .dastarkhwan {
  background-color: var(--page-primary-light-bg);
}
.seeding .beginnings {
  text-align: center;
}
.seeding .beginnings__intro {
  max-width: 820px;
}
.seeding .beginnings__media iframe {
  height: auto;
  min-height: 350px;
  max-width: 1000px;
  border-radius: var(--space-3);
}
.seeding .whyVolunteer {
  background-color: var(--page-secondary-light-bg);
}
.seeding .joinSustaining {
  background-color: var(--page-primary-light-bg);
}
.seeding .joinSustaining__content {
  background-color: var(--page-primary);
  color: var(--white);
}
.seeding .photoGrid__media {
  overflow: hidden;
  border-radius: var(--space-3);
  border: 3px solid transparent;
}
.seeding .photoGrid__media:hover {
  border-color: var(--page-primary);
}
.seeding .photoGrid__media img {
  transform: scale(1.05);
  width: calc(100% + 4px);
}
@media (min-width: 768px) {
  .seeding .beginnings__media iframe {
    min-height: 550px;
  }
  .seeding .problemStatement .row [class*=" col-"] * {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .seeding .impactStats__box .row > [class*=col-]:nth-child(4) {
    border-right: 0;
  }
  .seeding .problemStatement .row [class*=" col-"] * {
    max-width: 264px;
  }
}

.causeSupport {
  background-color: var(--page-primary-light-bg);
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .causeSupport {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .causeSupport {
    padding: var(--space-25) 0;
  }
}
.causeSupport__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .causeSupport__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .causeSupport__intro {
    margin-bottom: var(--space-18);
  }
}
.causeSupport__intro {
  text-align: center;
}
.causeSupport__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.causeSupport__form .radio {
  width: 100%;
}
.causeSupport__form .radio-mark {
  border-color: var(--page-primary);
  color: var(--page-primary);
}
.causeSupport__form .radio input:checked ~ .radio-mark {
  background-color: var(--page-primary);
  border-color: var(--page-primary);
  color: var(--white);
}
.causeSupport__form .progressBar {
  margin-bottom: var(--space-5);
}
.causeSupport__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.causeSupport__actions {
  text-align: center;
}
.causeSupport .container {
  max-width: calc(780px + var(--gutter-width) * 2);
}
.causeSupport .color-secondary1 {
  color: var(--page-primary);
}
@media (min-width: 768px) {
  .causeSupport__form {
    gap: var(--space-10);
  }
  .causeSupport .radio {
    width: calc(50% - 8px);
  }
}
@media (min-width: 1200px) {
  .causeSupport__form {
    gap: var(--space-15);
  }
  .causeSupport .radio {
    width: calc(33.3333333333% - 10.6666666667px);
  }
}

.pledges {
  --page-primary: var(--secondary2-700);
  --section-border: var(--primary-300);
}
.pledges .problemStatement {
  background-color: transparent;
}
.pledges .problemStatement__intro {
  max-width: 670px;
}
.pledges .problemStatement__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.pledges .problemStatement__content h2 {
  color: var(--page-primary);
  margin-bottom: var(--space-1);
}
.pledges .dastarkhwan {
  background-color: transparent;
  color: var(--primary-text);
}
.pledges .whyVolunteer {
  background-color: var(--primary-50);
}
.pledges .impactStats {
  background-color: var(--primary-color);
  text-align: center;
}
.pledges .impactStats .row {
  justify-content: center;
}
.pledges .photoGrid__media {
  overflow: hidden;
  border-radius: var(--space-3);
  border: 3px solid transparent;
}
.pledges .photoGrid__media:hover {
  border-color: var(--page-primary);
}
.pledges .photoGrid__media img {
  transform: scale(1.05);
  width: calc(100% + 4px);
}
@media (min-width: 768px) {
  .pledges .beginnings__media iframe {
    min-height: 550px;
  }
  .pledges .problemStatement .row [class*=" col-"] * {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .pledges .impactStats__box .row > [class*=col-]:nth-child(4) {
    border-right: 0;
  }
}
@media (min-width: 1200px) {
  .pledges .problemStatement .row [class*=" col-"] * {
    max-width: 264px;
  }
}

.brandAndProgramsPage {
  --section-primary-color: var(--secondary1-700);
  --section-secondary-bg: var(--secondary1-50);
  --section-border: var(--secondary1-500);
  --brand-color: var(--primary-500);
  --brand-text: var(--neutral-950);
  --section-text: var(--white);
}
.brandAndProgramsPage .color-primary {
  color: var(--section-primary-color);
}
.brandAndProgramsPage .heroBanner {
  --brand-color: var(--section-primary-color);
  margin-bottom: var(--space-5);
}
.brandAndProgramsPage .beginnings {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .beginnings__intro {
  max-width: 100%;
}
.brandAndProgramsPage .beginnings__media {
  max-width: 768px;
  margin-inline: auto;
}
.brandAndProgramsPage .beginnings__media iframe {
  border-radius: var(--space-2);
}
.brandAndProgramsPage .problemStatement {
  background-color: var(--white);
  overflow: hidden;
}
.brandAndProgramsPage .problemStatement .container {
  max-width: var(--container-lg-size);
}
.brandAndProgramsPage .problemStatement__intro {
  max-width: 830px;
}
.brandAndProgramsPage .problemStatement .row .col-12 * {
  max-width: 100%;
}
.brandAndProgramsPage .combatHunger {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .combatHunger .row [class*=" col-"]:first-child .combatHunger__card {
  background-color: var(--brand-color);
  color: var(--brand-text);
}
.brandAndProgramsPage .combatHunger .row [class*=" col-"]:last-child .combatHunger__card {
  background-color: var(--section-primary-color);
}
.brandAndProgramsPage .dastarkhwan,
.brandAndProgramsPage .testimonials {
  background-color: var(--white);
  color: var(--primary-text);
}
.brandAndProgramsPage .proposition {
  background-color: var(--white);
  color: var(--primary-text);
}
.brandAndProgramsPage .proposition svg {
  margin-inline: auto;
}
.brandAndProgramsPage .programCampaigns {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .programCampaigns__card {
  background-color: var(--section-primary-color);
  color: var(--section-text);
}
.brandAndProgramsPage .programCampaigns__card__content {
  color: var(--section-text);
}
.brandAndProgramsPage .programCampaigns__card__content .body-xl {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
.brandAndProgramsPage .joinSustaining {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .joinSustaining__content {
  background-color: var(--section-primary-color);
  color: var(--section-text);
}
.brandAndProgramsPage .stats {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .stats .row {
  justify-content: center;
}
.brandAndProgramsPage .partners {
  background-color: var(--section-secondary-bg);
}
.brandAndProgramsPage .photoGrid__media {
  overflow: hidden;
  border-radius: var(--space-3);
  border: 3px solid transparent;
}
.brandAndProgramsPage .photoGrid__media:hover {
  border-color: var(--section-primary-color);
}
.brandAndProgramsPage .photoGrid__media img {
  transform: scale(1.05);
  width: calc(100% + 4px);
}
.brandAndProgramsPage.rizqBachao {
  --section-primary-color: var(--breed-primary);
  --section-secondary-bg: #ebf4f7;
  --section-border: #70b1c6;
  --section-text: var(--white);
}
.brandAndProgramsPage.rizqDastarkhwan {
  --section-primary-color: var(--primary-500);
  --section-secondary-bg: var(--primary-50);
  --section-border: var(--primary-300);
  --section-text: var(--primary-text);
}
.brandAndProgramsPage.rizqDastarkhwan .color-primary {
  color: var(--primary-700);
}
.brandAndProgramsPage.rizqDastarkhwan .combatHunger__card {
  color: var(--primary-text);
}
.brandAndProgramsPage.groRizq, .brandAndProgramsPage.kissanDost {
  --section-primary-color: var(--success-800);
  --section-secondary-bg: var(--success-50);
  --section-border: var(--success-600);
  --section-text: var(--white);
  --brand-color: var(--primary-500);
  --brand-text: var(--primary-text);
}
.brandAndProgramsPage.groRizq .heroBanner, .brandAndProgramsPage.kissanDost .heroBanner {
  --work-color: var(--success-800);
}
.brandAndProgramsPage.groRizq .heroBanner svg path, .brandAndProgramsPage.kissanDost .heroBanner svg path {
  stroke: transparent;
}
.brandAndProgramsPage.rizqBreed {
  --section-primary-color: var(--breed-primary);
  --section-secondary-bg: var(--warning-100);
  --section-border: var(--success-600);
  --section-text: var(--white);
  --brand-color: var(--primary-500);
  --brand-text: var(--primary-text);
}
.brandAndProgramsPage.rizqBreed .heroBanner {
  --work-color: var(--breed-primary);
}
.brandAndProgramsPage.rizqBreed .heroBanner svg path {
  stroke: transparent;
}
.brandAndProgramsPage.hilPage, .brandAndProgramsPage.emergencyPage {
  --section-primary-color: #328fad;
  --section-secondary-bg: #ebf4f7;
  --section-border: #5ba5bd;
  --section-text: var(--white);
}
.brandAndProgramsPage.hilPage .heroBanner, .brandAndProgramsPage.emergencyPage .heroBanner {
  --work-color: #328fad;
}
.brandAndProgramsPage.hilPage .heroBanner svg path, .brandAndProgramsPage.emergencyPage .heroBanner svg path {
  stroke: transparent;
}
.brandAndProgramsPage.youthPage {
  --section-primary-color: var(--secondary2-600);
  --section-secondary-bg: var(--secondary2-50);
  --section-border: var(--secondary2-400);
  --section-text: var(--white);
}
.brandAndProgramsPage.youthPage .heroBanner {
  --work-color: var(--secondary2-600);
}
.brandAndProgramsPage.youthPage .heroBanner svg path {
  stroke: transparent;
}
.brandAndProgramsPage.emergencyPage .brandAndProgram__box .splide__slide, .brandAndProgramsPage.youthPage .brandAndProgram__box .splide__slide {
  padding-inline: 10px;
}
.brandAndProgramsPage.emergencyPage .brandAndProgram__box .splide__slide:first-child, .brandAndProgramsPage.youthPage .brandAndProgram__box .splide__slide:first-child {
  padding-inline-start: 0;
}
.brandAndProgramsPage.emergencyPage .stats, .brandAndProgramsPage.youthPage .stats {
  background-color: var(--neutral-50);
}
.brandAndProgramsPage.wefnexPage {
  --section-primary-color: var(--success-400);
  --section-secondary-bg: var(--success-50);
  --section-text: var(--primary-text);
}
.brandAndProgramsPage.wefnexPage .heroBanner {
  --work-color: var(--success-400);
}
.brandAndProgramsPage.wefnexPage .heroBanner svg path {
  stroke: transparent;
}
.brandAndProgramsPage.wefnexPage .partners__media img {
  max-width: 380px;
}
.brandAndProgramsPage.wefnexPage .combatHunger .row [class*=" col-"]:last-child .combatHunger__card {
  color: var(--primary-text);
}
@media (min-width: 768px) {
  .brandAndProgramsPage {
    margin-bottom: 0;
  }
}

.brandStats {
  padding: var(--space-11) 0;
}
@media (min-width: 768px) {
  .brandStats {
    padding: var(--space-18) 0;
  }
}
@media (min-width: 1200px) {
  .brandStats {
    padding: var(--space-25) 0;
  }
}
.brandStats__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 750px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .brandStats__intro {
    margin-bottom: var(--space-12);
  }
}
@media (min-width: 1200px) {
  .brandStats__intro {
    margin-bottom: var(--space-18);
  }
}
.brandStats__intro {
  text-align: center;
}
.brandStats__card {
  background-color: #dda63a;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: 100%;
  border-radius: var(--space-2);
  padding: var(--space-8);
  font-family: var(--sdg-font-family);
  justify-content: space-around;
}
.brandStats__card .body-md {
  font-size: 24px;
  line-height: 1.3;
}
.brandStats__card.one {
  background-color: #e5243b;
}
.brandStats__card.two {
  background-color: #dda63a;
}
.brandStats__card.three {
  background-color: #4c9f38;
}
.brandStats__card.eight {
  background-color: #a21942;
}
.brandStats__card.eleven {
  background-color: #fd9d24;
}
.brandStats__card.twelve {
  background-color: #bf8b2e;
}
.brandStats__card.twelve p {
  line-height: 1;
}
.brandStats__card.thirteen {
  background-color: #3f7e44;
}
.brandStats__card.fifteen {
  background-color: #56c02b;
}
.brandStats__card.sixteen {
  background-color: #00689d;
}
.brandStats__card.seventeen {
  background-color: #19486a;
}
.brandStats__card__data {
  display: flex;
  color: var(--white);
}
.brandStats__card__data .h2 {
  line-height: 1;
  margin-right: var(--space-2);
}
.brandStats__card__data p {
  line-height: 1.75;
  text-transform: uppercase;
}
.brandStats__card svg {
  margin-inline: auto;
}
.brandStats .row {
  row-gap: var(--space-5);
  justify-content: center;
}/*# sourceMappingURL=styles.css.map */