/* rem and em DO NOT depend on html font-size in media queries! instead, 1rem = 1em = 16px. */

/*****************************/
/* ABOVE 256px (phones) */
/*****************************/
@media (min-width: 16em) {
}

/*****************************/
/* ABOVE 384px (phones) */
/*****************************/
@media (min-width: 24em) {
  html {
    /* 10px / 16px * 100 */
    font-size: 62.5%;
  }
}

/*****************************/
/* ABOVE 600px (phones) */
/*****************************/
@media (min-width: 37.5em) {
  /* ABOVE 600px (phones) */
  .sticky-top {
    position: sticky;
    top: 0;
  }

  .sticky-bottom {
    position: sticky;
    bottom: 0;
  }

  .sticky-top--map-first-half {
    position: sticky;
    top: var(--dynamic-top--map-first-half);
  }

  .sticky-top--map-second-half {
    position: sticky;
    top: var(--dynamic-top--map-second-half);
  }

  .header-hero,
  .header-hero::after {
    max-width: 160rem;
  }

  .hero-container {
    padding: 3.2rem;
  }

  .hero-item__text-box {
    /* top: 35%; */
    width: 100%;
  }

  .text-box__description {
    font-size: 3rem;
  }

  .container {
    padding: 0 3.2rem;
    /* margin: 0 0 6.4rem 0; */
  }

  .about-features-box {
    display: flex;
    flex-direction: row;
    padding-top: 4.8rem;
  }

  .about-features {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: unset;
    padding: 0;
    /*margin-top: 4.8rem; */
  }

  .about-features-row {
    display: flex;
  }

  .about-features .feature__img {
    height: fit-content;
  }

  .about-features .feature__img:nth-child(2),
  .about-features .feature__img:nth-child(4) {
    margin-top: 100%;
  }

  /* LIST PAGE */
  /*****************************/

  .section.list-page {
    padding-bottom: 12rem;
  }

  .list-page .container,
  .container--2 {
    max-width: 54rem;
    width: fit-content;
    margin: 0 auto;
    padding: 0 2.4rem;
  }

  .profile-page-edit.list-page .container {
    width: unset;
  }

  .list-page .causes__card:not(.donate-now .causes__card),
  .list-page .blog__card {
    min-width: unset;
    width: 100%;
  }

  .causes .causes_card {
    width: 58.2rem;
  }

  /* DONATE NOW PAGE */
  /*****************************/
  .donate-now .container {
    max-width: 58.4rem;
  }
}

/*****************************/
/* ABOVE 648px (small tablets) */
/*****************************/
/* @media (min-width: 40.5em) {
  .causes__card.hidden {
    display: unset;
  }
} */

/*****************************/
/* ABOVE 776px (small tablets) */
/*****************************/
@media (min-width: 48.5em) {
  .header-hero {
    height: 100%;
  }

  .hero-item__text-box {
    padding: 0 6.4rem;
    align-items: start;
  }

  .heading-primary {
    text-align: start;
    font-size: 6.2rem;
  }

  .heading-secondary {
    font-size: 4.4rem;
  }

  .heading-tertiary {
    font-size: 3rem;
  }

  .header-imgs .heading-secondary {
    font-size: 4.4rem;
  }

  /* .header-imgs .header-img-box:nth-child(1) {
    width: 50%;
  }

  .header-imgs .header-img-box:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
      linear-gradient(rgb(250, 176, 5), rgb(250, 176, 5));
    width: 50%;
  }

  .header-imgs .header-img-box:nth-child(2) .header-img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-image: url(/img/background/header/header-img-2.jpg);
    width: 100%;
    background-size: cover;
    background-position: center;
    mix-blend-mode: luminosity;
    opacity: 0.6;
  } */

  .hero-container {
    padding: 6.4rem;
    align-items: start;
  }

  .container {
    padding: 0 4.8rem;
  }

  .causes-section {
    padding-bottom: 4rem;
  }

  .causes-section .container {
    position: relative;
    margin-left: auto;
  }

  .causes__list-container {
    width: fit-content;
    margin-right: 0;
  }

  .causes__list {
    width: max-content;
  }

  .btn-nav {
    min-width: 29.4rem;
    position: absolute;
    top: 31rem;
  }

  .causes__content {
    width: fit-content;
    min-height: 60rem;
    flex-direction: row;
  }

  /* .causes-carousel { */
  /* position: relative; */
  /* overflow: hidden; */
  /* width: 100%; */
  /* margin-left: 6.4rem; */
  /* } */

  /* .causes__card-container { */
  /* margin-left: 6.4rem; */
  /* position: relative; */
  /* } */

  /* .causes {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  } */

  .causes__card {
    margin-right: 4.8rem;
    min-width: 34rem;
  }

  .causes__card.hidden {
    display: block;
  }

  /* *** EVENTS SECTION *** */
  .events-section {
    padding-top: 6.8rem;
    padding-bottom: 0;
    overflow: hidden;
  }

  .events-section .container {
    position: relative;
    margin-left: auto;
  }

  .events-container {
    gap: 3.2rem;
  }

  /* .events-header {
    width: 50%;
  } */

  .events-content {
    padding-top: 12rem;
    padding-bottom: 10.8rem;
  }

  .causes-page.page.details .events-content {
    padding-top: 14rem;
    padding-bottom: 8.7rem;
  }

  .events {
    position: relative;
  }

  .events__background {
    content: ' ';
    position: absolute;
    top: -12rem;
    bottom: -10.9rem;
    left: 30rem;
    right: -1000000rem;
    background-color: #01221c;
    border-radius: 10px 0 0 10px;
  }

  .causes-page.page.details .events__background {
    left: 37.8%;
    bottom: -8.7rem;
  }

  .events__card:not(.list-page .events__card) {
    display: flex;
    z-index: 1;
    max-width: 66rem;
  }

  .causes-page.page.details .events__card {
    width: 50rem;
  }

  .events__card-img:not(.list-page .events__card-img) {
    max-width: 30rem;
  }

  /* *** Blogs *** */
  .blogs-section .container {
    margin-bottom: 12rem;
  }

  .blogs-header .section__header .heading-secondary {
    text-align: center;
  }

  .blogs .blog__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* .blog__card-img {
    max-width: 30rem;
  } */

  .blog__card-img {
    width: 100%;
  }

  /* *** FOOTER SECTION *** */
  .footer .footer__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .footer .footer__section:last-child {
    grid-column: span 2;
  }

  /* ABOUT PAGE */
  /*****************************/
  .section.about-section.about-page .container .about-imgs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 50%;
    background-image: linear-gradient(rgb(5, 115, 95), rgb(250, 176, 5));
    border-radius: 5px;
  }

  .section.about-section.about-page .container .about-imgs .about-bgs {
    padding-left: 4.8rem;
  }

  .section.about-section.about-page .container .about-imgs .about-bg-sm {
    display: block;
    position: absolute;
    bottom: -3.2rem;
    left: 0;
    width: 50%;
    border-radius: 5px;
  }

  .section.about-section.about-page .about-content {
    padding-top: 8rem;
  }

  .section.team-section.about-page .content .team {
    grid-template-columns: 1fr 1fr;
    column-gap: 6.4rem;
  }

  /* PROFILE PAGE */
  /*****************************/
  .profile-img-box {
    grid-row: 1 / 3;
    height: fit-content;
  }

  .section.section-about-profile.profile-page .fav-quote {
    margin: unset;
    max-width: unset;
    width: 100%;
  }

  .section.section-about-profile.profile-page .profile-info {
    margin: unset;
    max-width: unset;
  }

  .section.section-socials.profile-page .icons {
    gap: 8rem;
  }

  /* LIST PAGE */
  /*****************************/
  .list-page .container,
  .container--2 {
    max-width: 69rem;
  }

  .details .donation-details__donate-list {
    flex-direction: row;
    gap: 2.4rem;
  }

  .details .donation-details__donate-list li + li {
    margin-left: 2.4rem;
    margin-top: 0;
  }

  /* DONATE NOW PAGE */
  /*****************************/
  .donate-now .container {
    max-width: 75.8rem;
  }

  .error-page__title,
  .error-page__title--2 {
    font-size: 150px;
    line-height: 150px;
  }

  /* .error-page__title-2 {
    font-size: 170px;
    line-height: 170px;
  } */
}

/*****************************/
/* ABOVE 928px (tablets) */
/*****************************/
@media (min-width: 58em) {
  .causes__card {
    margin-right: 4.8rem;
    min-width: 34rem;
  }
}

/*****************************/
/* ABOVE 928px (tablets) */
/*****************************/
@media (min-width: 58em) {
  .about-features {
    margin: 0 auto;
  }

  .about-section .container .about-features .feature {
    display: flex;
  }

  .causes-section .container {
    min-height: 60rem;
  }

  /* PROFILE PAGE */
  /*****************************/
  .section.section-about-profile.profile-page .container {
    display: grid;
    grid-template-columns: auto 1fr;
    max-width: unset;
  }

  .section.section-socials.profile-page .container {
    margin-left: 0;
  }
}

/*****************************/
/* ABOVE 1024px (tablets) */
/*****************************/
@media (min-width: 64em) {
  .sticky-top--lg-vission {
    position: sticky;
    top: var(--dynamic-top--lg-vission);
  }

  .sticky-top--lg-mission {
    position: sticky;
    top: var(--dynamic-top--lg-mission);
  }

  .margin--features {
    margin: 0 0 45rem 0;
  }

  .heading-primary {
    font-size: 8.6rem;
  }

  .hero-item__text-box {
    max-width: 96rem;
  }

  .hero-btn-link {
    margin-top: 6.4rem;
  }

  .container {
    padding: 0 0 0 2.4rem;
  }

  .about-section .container {
    max-width: fit-content;
    flex-direction: row;
  }

  .about-content {
    grid-template-columns: 1fr 1fr;
  }

  .about-features-box {
    display: flex;
    flex-direction: row;
    grid-row: 1 / 5;
    grid-column: 2 / 3;
    padding-top: 0;
  }

  .all-items {
    min-width: 55.6rem;
  }

  .sidebar {
    min-width: 39rem;
  }

  .causes-section .container {
    justify-content: space-between;
    margin-left: 0;
  }

  .causes__card-container {
    margin-left: 4.8rem;
  }

  .causes__card {
    min-width: 42rem;
  }

  /* *** EVENTS SECTION *** */
  .events-section {
    padding-top: 22.2rem;
  }

  .events-section .container {
    max-width: 100%;
    padding-right: 2.4rem;
  }

  .events-container {
    flex-direction: row;
  }

  .causes-page.page.details .events-container {
    flex-direction: column;
  }

  .events-header {
    width: 40%;
  }

  .causes-page.page.details .events-header {
    width: 100%;
  }

  .events-content {
    width: 60%;
    padding-top: unset;
  }

  .causes-page.page.details .events__background {
    left: 27.23rem;
  }

  .events__card-img:not(.list-page .events__card-img) {
    height: 100%;
  }

  .card-content-container:not(.blogs-featured .card-content-container) {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }

  .events__card-box,
  .card-content-container .card-button {
    padding: 1.6rem;
  }

  .events__card-title.heading-tertiary {
    font-size: 2rem;
  }

  .events__card-info {
    gap: 0.5rem;
  }

  .events__card-info p {
    gap: 0.5rem;
  }

  /* *** BLOGS SECTION *** */

  .blogs-section .container {
    max-width: 100%;
    padding-right: 2.4rem;
    margin: 0 0 12rem 0;
  }

  .blogs-content {
    flex-direction: row;
    gap: 3.2rem;
  }

  .blogs-featured .blog__card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .blogs-featured .card-content-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .blogs {
    gap: 3.2rem;
  }

  /* .events__card {
    width: 66rem;
  } */

  .blogs-featured .blog__card-box,
  .blogs-featured .card-button {
    padding: 3.2rem;
  }

  .blog__card-box:not(.blogs-featured .blog__card-box),
  .card-content-container .card-button:not(.blogs-featured .card-button) {
    padding: 1.6rem;
  }

  .blog__card-title.heading-tertiary:not(
      .blogs-featured .blog__card-title.heading-tertiary
    ) {
    font-size: 2rem;
  }

  .blog__card-info {
    gap: 2rem;
  }

  .blog__card-info p {
    gap: 0.5rem;
  }

  .cause-details__img-single,
  .event-details__img-single,
  .blog-details__img-single {
    height: 40rem;
  }

  /* *** FOOTER SECTION *** */
  .footer .container {
    max-width: 100%;
    padding-right: 2.4rem;
  }

  .footer .footer__container {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
  }

  .final-words .footer__line {
    display: none;
  }

  .footer .footer__section:last-child {
    grid-column: span 4;
  }

  /* ABOUT PAGE */
  /*****************************/
  .section.about-section.about-page .container {
    flex-direction: column;
    padding: 0 12rem;
  }

  .section.about-section.about-page .container .about-imgs::after {
    left: 40%;
  }

  .section.about-section.about-page .about-content {
    grid-template-columns: 1fr;
    min-width: 45%;
  }

  .section.testimonial-section .container {
    max-width: unset;
    padding: 0 2.4rem;
  }

  .section.about-page .content {
    grid-template-rows: unset;
    grid-template-columns: 1fr 1fr;
    column-gap: 4.8rem;
  }

  .section.testimonial-section .testimonials-box {
    align-self: end;
  }

  .section.faq-section .container {
    margin: 0 2.4rem;
    max-width: unset;
    padding-left: 0;
  }

  .section.team-section.about-page .content {
    grid-template-columns: unset;
  }

  .section.team-section.about-page .container {
    padding: unset;
  }

  /* LIST PAGE */
  /*****************************/
  .list-page .container {
    margin-left: auto;
    max-width: unset;
    display: grid;
    grid-template-columns: 1fr 40%;
  }

  .container--2 {
    max-width: unset;
    width: 100%;
    display: block;
    margin: 0;
  }

  .list-page .container .all-items {
    width: 100%;
  }

  .comment-form {
    width: 80%;
  }

  /* .list-page .blog__card,
  .list-page .causes__card,
  .list-page .events__card {
    max-width: unset;
    width: 100%;
  } */

  /* .list-page .sidebar {
    width: 45%;
  } */

  .causes-box {
    gap: 9.6rem;
  }

  /* .list-page .causes__card {
    max-width: 45rem;
  } */

  .event-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }

  .become-volunteer-page .container {
    max-width: unset;
    padding: 0 2.4rem;
  }

  .become-volunteer-page .row {
    flex-wrap: nowrap;
  }

  .become-volunteer-page .row .requirements,
  .become-volunteer-page .row .form {
    width: 50%;
  }

  .become-volunteer-page__form .row {
    flex-direction: column;
  }

  .become-volunteer-page__left {
    border-radius: unset;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    height: 100%;
  }

  .become-volunteer-page__right {
    border-radius: unset;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 100%;
  }

  /* DONATE NOW PAGE */
  /*****************************/
  .donate-now .container {
    flex-direction: row;
  }
}

/*****************************/
/* ABOVE 1180px (smaller desktop) */
/*****************************/
@media (min-width: 73.75em) {
  .logo {
    z-index: unset;
  }

  .logo.bring-forward {
    z-index: 2;
  }

  .main-nav {
    flex-direction: row;
    align-items: center;
    height: unset;
  }

  .main-nav > div {
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding-left: 0;
  }

  .main-nav__list {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    margin: 0 0 0 0;
  }

  .main-nav__list-item {
    border-bottom: none;
  }

  .main-nav__list-item a {
    font-size: 1.6rem;
  }

  .menu {
    padding: 0 1.8rem;
  }

  .menu__other-items {
    flex-direction: row;
    align-items: center;
    margin: 0 6.4rem;
  }

  .menu__other-items__box {
    margin-top: 0;
    margin-left: 0;
  }

  .menu__other-items .search {
    position: relative;
  }

  .menu__other-items .search::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -30px;
    width: 1px;
    background-color: #f9f4e8;
  }

  .hero-container {
    height: 100vh;
  }

  /* .header-imgs .heading-secondary {
    font-size: 4.4rem;
  } */

  /* .header-imgs .header-img-box:nth-child(1) {
    width: 33%;
  } */

  /* .header-imgs .header-img-box:nth-child(2) {
    right: 33%;
    width: 34%;
  } */

  /* .header-imgs .header-img-box:nth-child(3) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
      linear-gradient(rgb(218, 30, 39), rgb(218, 30, 39));
    width: 33%;
  } */

  /* .header-imgs .header-img-box:nth-child(3) .header-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(/img/background/header/header-img-3.jpg);
    width: 100%;
    background-size: cover;
    background-position: center;
    mix-blend-mode: luminosity;
    opacity: 0.6;
  } */

  .about-section .container .about-features .feature {
    display: flex;
  }

  .all-items {
    min-width: 71rem;
  }

  .sidebar {
    min-width: 40rem;
  }

  /* *** EVENTS SECTION *** */

  .events-section .container {
    max-width: 100%;
  }

  .events-container {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
  }

  .causes-page.page.details .events__card {
    width: 60rem;
  }

  .causes-page.page.details .events__background {
    left: 32.74rem;
  }

  /* *** BLOGS & ARTICLES SECTION *** */
  .blogs-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cause-details__img-single,
  .event-details__img-single,
  .blog-details__img-single {
    height: 46rem;
  }

  /* ABOUT PAGE */
  /*****************************/
  .section.about-section.about-page .container .about-imgs .about-bg-lg {
    margin-left: 0;
  }

  .section.about-section.about-page .about-content {
    grid-template-columns: 1fr;
    min-width: 45%;
  }

  /* PROFILE PAGE */
  /*****************************/
  /* 


  /* LIST PAGE */
  /*****************************/
  .list-page
    .grid-display:not(
      .blog-page .grid-display,
      .causes-page .grid-display,
      .events-page .grid-display
    ) {
    grid-template-columns: repeat(2, 1fr);
  }

  .list-page .container {
    grid-template-columns: 1fr 35%;
  }

  /* .list-page .blog__card,
  .list-page .causes__card,
  .list-page .events__card {
    max-width: unset;
    width: 77rem;
  } */

  .details .donation-details__donate {
    flex-direction: row;
  }

  .details .donation-details__donate-list {
    margin-bottom: 0;
  }

  .become-volunteer-page .container {
    max-width: 116.4rem;
  }

  /* DONATE NOW PAGE */
  /*****************************/
  .donate-now .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
  }

  .donate-now .sidebar {
    max-width: 40rem;
  }
}

/*****************************/
/* ABOVE 1300px (small desktop) */
/*****************************/
@media (min-width: 81.25em) {
  .header-hero {
    height: 100vh;
  }

  .hero-container {
    padding: 9.6rem;
  }

  .hero-item__text-box {
    padding: 0 8.6rem;
  }

  .heading-primary {
    font-size: 8.6rem;
  }

  .container {
    padding-left: 9.6rem;
  }

  /* 
  .btn--shrink {
    width: unset;
  } */

  .menu {
    padding: 0 3.2rem;
  }

  .main-nav__list {
    gap: 3.2rem;
  }

  .menu__other-items {
    margin: 0 9.2rem;
    gap: 4.8rem;
  }

  .menu__other-items .search::before {
    left: -30px;
  }

  .all-items {
    min-width: 74.9rem;
  }

  .sidebar {
    min-width: 42rem;
  }

  /* *** BLOGS *** */
  .blogs-section .container {
    padding-right: 9.6rem;
  }

  .cause-details__img-single,
  .event-details__img-single,
  .blog-details__img-single {
    height: 48rem;
  }

  /* *** FOOTER SECTION *** */
  .footer .container {
    margin-right: 9.6rem;
  }

  /* ABOUT PAGE */
  /*****************************/
  .section.about-section.about-page .container {
    padding: 0 19.2rem;
  }

  .section.testimonial-section .container,
  .section.faq-section.about-page .container,
  .section.team-section.about-page .container {
    padding: 0 9.6rem;
    margin: unset;
  }

  .section.team-section.about-page .content .team {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .section.team-section.about-page .container {
    max-width: unset;
  }

  /* PROFILE PAGE */
  /*****************************/
  .section.section-about-profile.profile-page .container,
  .section.section-socials.profile-page .container {
    max-width: 125rem;
  }

  .section.section-socials.profile-page .container {
    margin-left: auto;
  }

  /* LIST PAGE */
  /*****************************/
  .list-page .container,
  .container--2 {
    max-width: 125rem;
  }

  .container--2 {
    width: 100%;
    margin: 0 auto;
  }

  .become-volunteer-page .container {
    max-width: 125rem;
  }
}

/********************************8**/
/* ABOVE 1400px (larger desktops) */
/***********************************/
@media (min-width: 87.5em) {
  .hero-container {
    padding: 12.8rem;
  }

  .hero-item__text-box {
    max-width: 108rem;
    padding: 0 12.8rem;
  }

  .container {
    padding-left: 12.8rem;
  }

  .main-nav__list {
    gap: 4.8rem;
  }

  .menu__other-items .search::before {
    left: -40px;
  }

  /* *** BLOGS *** */
  .blogs-section .container {
    padding-right: 12.8rem;
  }

  /* *** FOOTER SECTION *** */
  .footer .container {
    margin-right: 12.8rem;
  }

  /* ABOUT PAGE */
  /*****************************/
  .section.testimonial-section .container,
  .section.faq-section.about-page .container {
    padding: 0 12rem;
  }

  /* PROFILE PAGE */
  /*****************************/
}