/* ************************************** */
/* DEVIDE SCREEN SIZE WITH 16*/
/* ************************************** */

/* ************************************** */
/* BELOW 900 px - Small Desktop*/
/* ************************************** */

@media (max-width: 56.25em) {
  html {
    font-size: 59%;
  }
  /* ************************************** */
  /* MOBILE NAV*/
  /* ************************************** */

  /* fix scoll to right on mobile */

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav-link {
    font-size: 2.4rem;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.5s ease-in;
    transform: translatex(100%);

    z-index: 9998;

    /* HIDE */
    opacity: 0;

    /* unaccessible to mouse / keyboard */
    pointer-events: none;

    /* hide from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translatex(0);
  }

  .nav-open .icon-mobile-nav[name="close-icon"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="hamburger-icon"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 5rem;
    font-size: 5rem;
  }
}

/* ************************************** */
/* BELOW 990 px - Small Desktop*/
/* ************************************** */

@media (max-width: 61.875em) {
  /* HERO */
  .hero-header {
    display: none;
  }

  .hero-header-mobile {
    height: 40rem;
    display: block;
    margin-top: 18rem;
  }
  /* CONTACT US  */
  .contact-img {
    left: 2%;
    height: 110%;
  }
}

/* ************************************** */
/* BELOW 800 px  HEIGHT- */
/* ************************************** */

@media (max-height: 50em) {
 
  /* .hero-header {
    margin-top: auto;
    margin-bottom: auto;
  } */
  .hero {
    align-items: center;
    justify-content: center;
  }
}
/* ************************************** */
/* BELOW 840 px - Small Desktop*/
/* ************************************** */

@media (max-width: 52.5em) {
  /* ABOUT US */
  .paragraph-img {
    display: none;
  }
  .about-container,
  .impact-container {
    display: flex;
    flex-direction: column;
  }
  .heading-2 {
    text-align: center;
  }
  .paragraph {
    text-align: center;
  }

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

  /* PROGRAMS */

  .programs-bg {
    background-image: url("../img/programmes-bg-light.webp");
    background-position: center;
  }
  .description-wrapper {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
  }

  .logo-wrapper {
    justify-content: space-between;
  }

  .programs-btn {
    text-align: center;
  }
  .programs-logo {
    height: 3.2rem;
  }

  /* DONATE  */

  .donate-bg {
    background-image: url("../img/donate-bg-light.webp");
  }

  .donate-container {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* CONTACT US  */
  .contact-img {
    display: none;
  }
  .form-col {
    grid-column: 1 / 3;
  }
  label {
    text-align: center;
  }
  ::placeholder {
    text-align: center;
  }
}

/* ************************************** */
/* BELOW 690 px - Small Desktop*/
/* ************************************** */

@media (max-width: 43.125em) {
  /* UNDER CONSTRUCTION */
  .heading-1 {
    font-size: 6.2rem;
  }
}

/* ************************************** */
/* BELOW 620 px - Small Desktop*/
/* ************************************** */

@media (max-width: 39.375em) {
  /* FOOTER  */
  .footer-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .footer {
    height: 80rem;
  }
}

/* ************************************** */
/* BELOW 570 px - Small Desktop*/
/* ************************************** */

@media (max-width: 35.625em) {
  .margin-bottom-large {
    margin-bottom: 2.4rem;
  }
  /* HERO */

  .section-hero {
    height: 60rem;
  }
  .hero-header-mobile {
    margin-top: 10rem;
    height: 30rem;
  }

  /* CTA BANNER */
  .grid:not(:last-child) {
    margin-bottom: 4.8rem;
  }

  /* GALLERY */
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-img-large-01 {
    display: none;
  }
  .gallery-img-large-02 {
    display: none;
  }

  /* FOOTER  */
  .footer-wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .footer {
    height: 100rem;
    text-align: center;
  }
  .logo-col,
  .social-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* DONATE  */
  .donate-widget {
    height: 40rem;
  }
}

/* ************************************** */
/* BELOW 470 px */
/* ************************************** */

@media (max-width: 29.375em) {
  /* HERO */
  .section-hero {
    height: 50rem;
  }
  .hero-header-mobile {
    height: 25rem;
  }

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

  /* PROGRAMS */
  .programs-logo {
    height: 2.6rem;
  }

  /* UNDER CONSTRUCTION */
  .heading-1 {
    font-size: 4.8rem;
  }

  /* DONATE BANNER */
  .donate-heading {
    display: none;
  }
  .donate-heading-mobile {
    display: block;
  }
}

/* ************************************** */
/* BELOW 420 px */
/* ************************************** */

@media (max-width: 26.25em) {
  /* HERO */
  .section-hero {
    height: 45rem;
  }
  .hero-header-mobile {
    height: 20rem;
  }

  /* CTA BANNER */
  .cta-top-num {
    font-size: 6.2rem;
  }

  .cta-top-desc {
    font-size: 1.8rem;
  }
}

/* ************************************** */
/* BELOW 320 px */
/* ************************************** */
@media (max-width: 20em) {
  /* HEADER */
  .logo {
    width: 15rem;
  }
  /* HERO  */
  .section-hero {
    height: 40rem;
  }
  .hero-header-mobile {
    margin-top: 5.5rem;
  }
  /* CTA HERO  */
  .cta-top {
    gap: 1rem;
  }
  .cta-top-num {
    font-size: 4.2rem;
  }

  /* PROGRAMS SECTION */
  .programs-logo {
    display: none;
  }
}