/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

#home-header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("./images/forest.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#about-header {
  background-color: var(--color-primary);
}

#about-header .navbar {
  background-color: var(--color-primary);
}

.cta-buttons {
  gap: 1rem;
}

.cta-buttons a {
  min-width: 8.75rem;
}

.cta-buttons a:nth-of-type(1) {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.cta-buttons a:nth-of-type(2) {
  background-color: transparent;
  border: 1px solid var(--color-white);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.cta-buttons a:nth-of-type(1):hover,
.cta-buttons a:nth-of-type(1):active {
  background-color: var(--color-secondary-light);
  border: 1px solid var(--color-secondary-light);
}

.cta-buttons a:nth-of-type(2):hover,
.cta-buttons a:nth-of-type(2):active {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-white);
}

.stats .col-12 div {
  gap: 0.5rem;
}

.stats .col-12 div p + p {
  color: var(--color-secondary);
}

main h1 {
  color: var(--color-primary);
}

.grid-images {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "image1 image2 image3"
    "image1 image2 image3"
    "image4 image4 image3";
  grid-auto-columns: 1fr;
  grid-auto-rows: 12rem;
  gap: 1rem;
}

.grid-images div:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: image1;
}
.grid-images div:nth-of-type(2) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: image2;
}
.grid-images div:nth-of-type(3) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  -ms-grid-column: 5;
  grid-area: image3;
}
.grid-images div:nth-of-type(4) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: image4;
}

.our-mission__content,
.our-history__content {
  color: var(--color-black);
}

#form-toast {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
}

/* ================================== */
/* Media Queries */
/* ================================== */

/* Large screen size */
@media only screen and (max-width: 992px) {
  #our-history-section .row .col-12:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  #our-history-section .row .col-12:nth-of-type(2) {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
}

/* Medium screen size */
@media only screen and (max-width: 768px) {
  .navbar {
    background-color: var(--color-primary);
  }

  .grid-images {
    grid-template-areas:
      "image1 image3"
      "image2 image3"
      "image4 image3";
  }

  .grid-images div:nth-of-type(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .grid-images div:nth-of-type(2) {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .grid-images div:nth-of-type(3) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 2;
  }

  .grid-images div:nth-of-type(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
}

/* Small screen size */
@media only screen and (max-width: 576px) {
  .cta-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .grid-images {
    grid-template-areas:
      "image1"
      "image2"
      "image3"
      "image4";
  }

  .grid-images div:nth-of-type(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .grid-images div:nth-of-type(2) {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .grid-images div:nth-of-type(3) {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .grid-images div:nth-of-type(4) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
}