/* This file is compiled using Sass. Instead of editing it directly
 * please modify g/scss/child-sponsorship.scss.
 */
h2 {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.4;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

h4 {
  font-size: 1.25rem;
  font-weight: 700;
}

.bg-shaded {
  background-color: #efefef;
}

.img-icon-lg {
  width: 80px;
}

.img-icon-sm {
  width: 50px;
}

#intro u {
  background-image: url("https://gfamedia.org/images/child-sponsorship/short-line.png");
  background-position: 0 97%;
  background-repeat: no-repeat;
  background-size: contain;
  text-decoration-color: rgba(0, 0, 0, 0);
  text-wrap: nowrap;
}
#intro .img-fluid {
  margin-top: -1rem;
}

#child-carousel {
  background-color: #00566e;
}
#child-carousel::before {
  background-color: #efefef;
  content: "";
  display: block;
  min-height: 2rem;
}

.child-carousel-filters {
  background-color: var(--bs-white);
  margin-top: -2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
.child-carousel-filters [data-bs-toggle=collapse]:has(+ .collapse.show),
.child-carousel-filters [data-bs-toggle=collapse]:not(.collapsed):has(+ .collapsing) {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
}

.child-carousel-body {
  position: relative;
}
.child-carousel-body .card-child {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  flex-direction: row;
  height: 8rem;
}
.child-carousel-body .card-child .card-img {
  border-radius: var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius);
  flex-shrink: 0;
  object-fit: cover;
  object-position: top center;
  width: 40%;
}
.child-carousel-body .card-child .card-body {
  align-self: center;
  width: 60%;
}
.child-carousel-body .card-child .card-title {
  font-size: 1.1rem;
}
.child-carousel-body .card-child-detail {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
.child-carousel-body .card-child-detail .card-img {
  aspect-ratio: 1;
}
.child-carousel-body .card-child-detail .card-img > img {
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}
.child-carousel-body .card-child-detail .card-title {
  font-size: 1.4rem;
}
.child-carousel-body .card-child-detail .card-text {
  font-size: 1.1rem;
}
.child-carousel-body .child-carousel-spinner {
  display: none;
  z-index: 3;
}
.child-carousel-body.htmx-request .card-child-detail,
.child-carousel-body.htmx-request .card-child {
  opacity: 0.25;
}
.child-carousel-body.htmx-request .child-carousel-spinner {
  display: flex;
}

#benefits .show-benefits-children,
#benefits .show-benefits-sponsors {
  position: relative;
  transition: opacity 0.6s ease-in-out;
  z-index: 2;
}
#benefits[data-benefits=children] .show-benefits-sponsors, #benefits[data-benefits=sponsors] .show-benefits-children {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: 1;
}
#benefits .btn-outline-primary {
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-border-radius: 0;
  --bs-btn-color: var(--bs-dark);
  --bs-btn-font-weight: 600;
  border-width: 0 0 4px 0;
}

#make-possible {
  background-color: #efefef;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 93.7%, 0.94)), to(hsla(0, 0%, 93.7%, 0.94))), url("https://gfamedia.org/images/child-sponsorship/world_1-p-1080.png");
  background-image: linear-gradient(180deg, hsla(0, 0%, 93.7%, 0.94), hsla(0, 0%, 93.7%, 0.94)), url("https://gfamedia.org/images/child-sponsorship/world_1-p-1080.png");
  background-position: 0px 0px, 8% 53%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}
#make-possible h2 {
  font-size: 2.25rem;
}
#make-possible p {
  font-size: 1.25rem;
}

#sponsor-quotes {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}
#sponsor-quotes .blockquote {
  font-family: var(--gfa-header-major-font-family);
  font-size: 1.5rem;
  line-height: 1.7;
}
#sponsor-quotes .blockquote-footer {
  color: var(--bs-gray-300);
  font-size: 1.25rem;
}
#sponsor-quotes .carousel {
  align-items: center;
  display: flex;
  height: 21rem;
  position: relative;
}
@keyframes carousel1 {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  3.3333333333% {
    opacity: 1;
    visibility: visible;
  }
  30% {
    opacity: 1;
    visibility: visible;
  }
  33.3333333333% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
#sponsor-quotes .carousel .slide {
  animation: carousel1 18s linear 0s infinite normal both;
  position: absolute;
}
#sponsor-quotes .carousel .slide:nth-child(2) {
  animation-delay: 6s;
}
#sponsor-quotes .carousel .slide:nth-child(3) {
  animation-delay: 12s;
}

@media (min-width: 768px) {
  #intro .img-fluid {
    margin-top: -5rem;
  }
  #sponsor-quotes .carousel {
    height: 14rem;
  }
  .child-carousel-body .card-child .card-text {
    font-size: 0.95rem;
  }
  .child-carousel-body .card-child-detail .card-img {
    width: 45%;
  }
  .child-carousel-body .card-child-detail .card-img > img {
    border-radius: var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius);
  }
}
@media (min-width: 992px) {
  .child-carousel-body > .row {
    height: 44rem;
  }
  .child-carousel-body > .row > .col {
    height: calc(50% - 0.25rem);
  }
  .child-carousel-body .card-child {
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .child-carousel-body .card-child .card-body {
    width: 100%;
  }
  .child-carousel-body .card-child .card-img {
    aspect-ratio: 0.925;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    width: 100%;
  }
  .child-carousel-body .card-child .card-text {
    font-size: 0.85rem;
  }
  #sponsor-quotes .carousel {
    height: 12rem;
  }
}
@media (min-width: 1200px) {
  .child-carousel-body .card-child .card-text {
    font-size: 0.95rem;
  }
  .child-carousel-body > .row {
    height: 46rem;
  }
}
@media (min-width: 1400px) {
  .child-carousel-body .card-child .card-text {
    font-size: 0.975rem;
  }
  .child-carousel-body > .row {
    height: 47rem;
  }
}

/*# sourceMappingURL=child-sponsorship.css.map */