/*

TABLE OF CONTENTS

  1. Global styles
  2. Hero
  3. Navigation
  4. Trips
  5. CTA
  6. Team
  7. Problem
    7a. Actions
  8. Gallery
  9. Footer
    9a. Contact
    9b. Connect
  10. Media Queries
    10a. Media Query, (min-width: 700px)
      10a-i. Hero
      10a-ii. Navigation, Large screen
      10a-iii. Trips, Large screen
      10a-iv. CTA summaries, Large screen rules
      10a-v. Team, Large screen rules
      10a-vi. Problem
      10a-vii. Actions
      10a-viii. Footer
    10b. Media Query, (min-width: 1000px)
    10c. Feature Query

*/
@font-face {
  font-family: 'khodijah';
  src: url('../fonts/khodijah.woff2') format('woff2'),
    url('../fonts/khodijah.woff') format('woff');
}

.centered-image {
  text-align: center;
}

.centered-image img{
    border-radius: 3%;
    width: 80%;
    box-shadow: 1px 1px 3px #fff, 2px 2px 6px rgb(28 121 138 / 50%);
    border: solid 2px rgba(255, 255, 255, .8);
  }


/* YELLOW COLOR: */
/* color: #FDD626; */
/* ############ 1. Global Styles ############ */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body>* {
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: 'Nunito', sans-serif;
  line-height: 1;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.4rem;
}

p {
  line-height: 1.4;
}

a {
  color: #36bae6;
  font-weight: bold;
}

a:hover {
  color: #e06630;
}

i {
  padding-left: .5rem;
}

/* ############ 2. Hero ############ */
.hero {
  background: url("../images/header1_sm.jpg") no-repeat center right;
  background-size: cover;
  /* background-color: #0361A6; */
  /* background-color: rgba(0, 0, 0, 0.5); */
  color: #000;
  font-size: 20px;
  text-align: center;
  display: grid;
  grid-template-columns: 10px 2fr 10px;
  grid-template-rows: .5fr 1fr 20px;
  grid-gap: 20px;
}

.hero img {
  margin: auto;
  padding-top: 1rem;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.hero article {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.hero h1 {
  font-size: 4rem;
  text-transform: uppercase;
}

.hero button {
  background-color: #fff;
  border: none;
  border-radius: 4px;
  color: #2abadf;
  font-size: 1rem;
  padding: 5px 10px;
  margin: .75rem auto 0;
}


/* ############ 3. Navigation ############ */
.logo {
  max-width: 90px;
}

.navWrap {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  height: 48px;
  width: 100%;
  background-color: #212f54;
  border-bottom: 1px solid #e0e5eb;
  box-shadow: 0px 1px 8px #223055;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navWrap p {
  color: #fdd626;
  /* font-family: 'khodijah'; */
  font-size: 1.5rem;
  width: auto;

}

input#navToggle {
  display: none;
}

input#navToggle~label {
  position: relative;
  padding: 0.25rem;
  width: 2rem;
  height: 1.25rem;
  height: 2rem;
}

input#navToggle~label>span,
input#navToggle~label>span::before,
input#navToggle~label>span::after {
  content: "";
  display: block;
  position: absolute;
  top: .75rem;
  height: 0.125rem;
  width: 1.75rem;
  opacity: 1;
  background: #fff;
  transition: 0.14s ease-in-out;
}

input#navToggle~label>span::before {
  top: -0.5rem;
}

input#navToggle~label>span::after {
  top: 0.5rem;
}

#navToggle:checked~label>span {
  width: 0;
  background: rgba(18, 18, 18, 0);
}

#navToggle:checked~label>span::before {
  transform: rotateZ(45deg);
  top: 0;
}

#navToggle:checked~label>span::after {
  transform: rotateZ(-45deg);
  top: 0;
}

#navToggle:checked~nav {
  left: 0;
}

nav {
  position: absolute;
  z-index: -1;
  top: 3.0rem;
  left: -110%;
  width: 100%;
  transition: 0.22s ease-in-out;
}

nav::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-color: #13b1e7;
  background-size: cover;
}

nav ul {
  list-style-type: none;
}

nav ul li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  padding: .75rem 1rem;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, .5);
  transition: 0.14s ease-in-out;
}

nav ul li a:hover {
  color: #36bae6;
  background: #e0e5eb;
}

nav ul li:last-of-type::before {
  content: "";
  display: block;
  padding: .5rem;
}

nav .btn {
  background: #fff;
  border-bottom: none;
  border-radius: 4px;
  box-shadow: inset 0 0 5px #eeb80c;
  color: #223054;
  width: 40%;
  padding: 0.25rem .6rem;
  letter-spacing: 1px;
  text-shadow: 0 0 1px rgb(19, 177, 231);
  text-align: center;
  display: flex;
  justify-content: center;
  margin: auto;
}

nav .btn:hover {
  background-color: #223054;
  box-shadow: inset 0 0 5px #13b1e7;
  color: #fff;
}

/* ############ 4. Trips ############ */
.trips {
  padding: 1rem;
  margin: auto;
  max-width: 1200px;
}

.trips article {
  margin: 2rem auto;
  width: 80%;
  max-width: 1000px;
}

.trips h1 {
  color: #3abadf;
  font-size: 3rem;
  margin-left: 1rem;
}

.trips article p {
  border-left: solid 1px #dedede;
  padding-left: 1rem;
}

.tripList {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 1rem;
}

.tripList li {
  background-color: rgba(255, 255, 255, .9);
  border-radius: 6px;
  border: solid 1px #dedede;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1.8rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(140px, 1fr) auto;
}

.tripList h3,
.tripList img {
  grid-row: 1 / 2;
  grid-column: 1;
}

.tripList h3 {
  background-color: rgba(255, 255, 255, .5);
  color: #fff;
  padding: .5rem;
  margin-bottom: 1rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(51, 51, 51, .7);
  align-self: end;
}

.trips a {
  border-radius: 3px;
  background-color: #39bae6;
  color: #fff;
  height: 2rem;
  margin-top: 1rem;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trips a:hover {
  background-color: #333;
}


/* ############ 5. CTA ############ */
.cta {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  margin: 2rem auto;
  padding: 2rem;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}

.cta1 {
  background-image: url("../images/ctaBG1_sm.jpg");
}

.cta2 {
  background-image: url("../images/ctaBG2_sm.jpg");
}

.cta3 {
  background-image: url("../images/ctaBG3_sm.jpg");
}

.cta h1 {
  margin-left: 1rem;
}

.cta p {
  border-left: solid 1px #fff;
  padding-left: 1rem;
  max-width: 700px;
}


/* ############ 6. Team ############ */
.team {
  margin: 1rem;
}

.team h1 {
  text-align: center;
  color: #39bae6;
}

.team p {
  margin-bottom: 1rem;
}

.teamMembers {
  list-style-type: none;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
}

.teamMembers li {
  grid-row: 1 / 2;
}

.teamMembers li:nth-child(1) {
  grid-column: 1 / 4;
  order: 1;
}

.teamMembers li:nth-child(2) {
  grid-column: 3 / 6;
}

.teamMembers li:nth-child(3) {
  grid-column: 4 / 8;
  order: 1;
  text-align: center;
}

.teamMembers li:nth-child(4) {
  grid-column: -3 / 6;
  text-align: right;
}

.teamMembers li:nth-child(5) {
  grid-column: -4 / -1;
  text-align: right;
}

.teamMembers li:hover {
  order: 2;
}

.teamMembers img {
  border-radius: 50%;
  width: 80%;
  box-shadow: 1px 1px 3px #fff, 2px 2px 6px rgb(28 121 138 / 50%);
  border: solid 2px rgba(255, 255, 255, .8);
}

.teamMembers li:nth-child(3) img {
  width: 70%;
}


/* ############ 7. Problem ############ */
section.problem {
  padding: 1rem;
  margin: auto;
}

.problem h1 {
  margin-left: 1rem;
  color: #35b1e8;
}

.problem h1~p {
  border-left: solid 1px #dedede;
  padding-left: 1rem;
}

.problem h3 {
  margin: 1rem 0 0 1rem;
  color: #223055;
}

.problem ul {
  margin: 0 0 1rem 3rem;
}

.problem img {
  margin: auto;
  display: block;
}

/* ############ 7a. Problem > Action ############ */
.action {
  padding: 1rem;
}

.action h3 {
  color: #35b1e8;
  font-style: italic;
  margin-bottom: .5rem;
}

.action h1+p {
  border-left: solid 1px #dedede;
  padding-left: 1rem;
}

.action article h1 {
  margin-left: 1rem;
}

.action ul li {
  border: solid 1px #dedede;
  border-radius: 6px;
  list-style-type: none;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: auto;
}

.action li h1 {
  background: url(../images/action1.jpg) no-repeat center;
  background-size: cover;
  border-radius: 6px 0 0 6px;
  color: #fff;
  padding-top: 1rem;
  text-align: center;
  text-shadow: 1px 1px 2px #223055;
  grid-column: 1 / 2;
  grid-row: span 2;
}

.action li h4 {
  background-color: #223055;
  border-radius: 0 6px 0 0;
  color: #fff;
  padding: .5rem 1rem;
  grid-column: 2 / -1;
  align-self: start;
}

.action li p {
  padding: .5rem 1rem 1rem;
  grid-column: 2 / -1;
}

.action li:nth-of-type(2) h1 {
  background-image: url(../images/action2.jpg);
}

.action li:nth-of-type(3) h1 {
  background-image: url(../images/action3.jpg);
}

.action li:nth-of-type(4) h1 {
  background-image: url(../images/action4.jpg);
}

.action li:nth-of-type(5) h1 {
  background-image: url(../images/action5.jpg);
}

.action li:nth-of-type(6) h1 {
  background-image: url(../images/action6.jpg);
}

/* ############ 8. Gallery ############ */
.gallery {
  max-width: 1200px;
  margin: auto;
}

.gallery h1 {
  text-align: center;
  color: #223055;
  padding: 0 1rem;
  margin-bottom: .5rem;
}

.galleryWrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: .5em;
  grid-auto-flow: row dense;
}

.galleryWrap img[src$="_w.jpg"] {
  grid-column-end: span 2;
}

.galleryWrap img[src$="_p.jpg"] {
  grid-row-end: span 2;
}

.galleryWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ######### 9. Footer ######### */
footer {
  margin-top: 1rem;
}

/* ######### 9a. Footer > Contact ######### */
.form {
  background-color: #223055;
  color: #000;
  padding: 1rem 1rem 2rem;
}

.form p {
  font-weight: 300;
  padding-bottom: 1rem;
}

/* ######### Contact Form ######### */
form#contactForm {
  max-width: 350px;
  margin: auto;
}

.contactForm div {
  margin-top: 1em;
}

.contactForm div:first-of-type {
  margin-top: 0;
}

.contactForm label {
  display: block;
}

.contactForm input,
.contactForm textarea {
  border: solid 1px #dedede;
  border-radius: 4px;
  color: #707070;
  cursor: text;
  font-size: 1rem;
  max-width: 350px;
  padding: .5rem;
  width: 100%;
}

.contactForm textarea {
  min-height: 100px;
}

.contactForm button {
  background-color: #13b1e7;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  padding: .5rem;
  min-width: 200px;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactForm button:hover {
  background-color: #35b1e8;
  color: #ffc107;
}

.contactForm i {
  font-size: 200%;
  padding-right: .5rem;
}

.contactForm input[type="submit"]:active {
  box-shadow: 1px 1px 6px rgba(255, 255, 255, .6), 0px 0px 4px rgba(255, 255, 255, .8);
}

.contactForm .checks {
  margin: .25em 0 1em .1em;
}

.contactForm input[type="checkbox"]+label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

/* custom checkbox */
.contactForm .checks label {
  display: inline-block;
}

.contactForm input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0 -1px;
}

input[type="checkbox"]:checked~span:before {
  content: "\f14a";
}

.checks span:before {
  display: inline-block;
  box-sizing: border-box;
  color: #13b1e7;
  content: "\f0c8";
  font-family: "Font Awesome 5 Free";
  font-size: 1.3em;
  margin: -3px 3px 0 0;
  vertical-align: middle;
}

.contactForm input:focus,
.contactForm textarea:focus {
  border: solid 1px #13b1e7;
  box-shadow: 0 0 2px #0d92bf, 0px 0px 4px #0d92bf, 1px 1px 4px #13b1e7, 2px 2px 4px #13b1e7;
  outline: none;
}

/* radio buttons */
.contactForm div.radioBtns {
  margin: 1em 0;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 1fr);
}

.radioBtns p {
  padding-bottom: 0;
  grid-column: span 3;
}

input[type="radio"]:first-of-type {
  margin-left: 0;
}

/* make the new radio button */
.radioBtns span:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  color: #13b1e7;
  font-size: 1.2em;
  vertical-align: middle;
  margin: -4px 3px 0 0;
}

.radioBtns label {
  position: relative;
}

/* hide the default radio buttons */
.radioBtns input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* create the on (selected) state */
input[type="radio"]:checked~span:before {
  content: "\f192";
  /* unicode for fa dot circle */
}

/* ######### 9b. Footer > Connect ######### */
.social,
.contactInfo {
  background-color: #EEF2F5;
  color: #233156;
  padding: 1rem 1rem 0;
  text-align: center;
}

.social h3 {
  border-bottom: solid 1px #EEF2F5;
  font-weight: 400;
  padding-bottom: .25rem;
}

.socialIcons {
  font-size: 200%;
  padding: 1rem 0;
}

.socialIcons a {
  color: #223055;
  padding: 0 .5rem;
}

.socialIcons a:hover {
  color: #ffc107;
}

.contactInfo {
  padding-top: 0;
}

.contactInfo article {
  border-top: solid 1px #EEF2F5;
  padding: 1rem 0;
}

.contactInfo h4 {
  font-weight: 400;
}

.contactInfo li {
  font-weight: 300;
  list-style-type: none;
}

.copy {
  font-size: 70%;
  font-weight: 300;
  padding-top: 1rem;
}

/* ############ 10. Media Queries ############ */

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {

  /* ######### 10a-i. HERO, Large screen rules ######### */
  header.hero {
    background: url(../images/header1_lg.jpg) no-repeat center left;
    background-size: cover;
    /* background-color: rgba(0, 0, 0, 0.5); */
    text-align: left;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: .25fr 1fr .25fr;
    align-items: center;
  }

  .hero img {
    margin: 0 0 0 auto;
    grid-row: 2 / 3;

  }

  .hero article {
    max-width: 1000px;
    grid-column: 3 / 6;
  }

  /* ######### 10a-ii. Navigation, Large screen rules ######### */
  .navWrap {
    display: grid;
    grid-template-columns: 100px minmax(auto, 1100px);
    justify-content: center;
    height: auto;
  }

  .navToggleLabel {
    display: none;
  }

  nav {
    position: initial;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul li a {
    border-bottom: none;
    ;
  }

  nav ul li a:hover {
    background: transparent;
  }

  nav::after,
  nav ul li:last-of-type::before {
    display: none;
    padding: initial;
  }

  nav .btn {
    width: auto;
    background: #13b1e7;
    color: #fff;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
  }

  nav.btn:hover {
    box-shadow: inset 0 0 5px #13b1e7;
    background-color: #223054;
  }

  /* ######### 10a-iii. Trips, Large screen rules ######### */
  .tripList {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .trips article {
    width: 90%;
    display: flex;
    align-items: center;
  }

  .trips h1 {
    margin: 0 1rem 0 0;
  }

  .trips p {
    flex: 3;
  }

  /* ######### 10a-iv. CTA summaries, Large screen rules ######### */
  .cta {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta1 {
    background-image: url("../images/ctaBG1_lg.jpg");
  }

  .cta2 {
    background-image: url("../images/ctaBG2_lg.jpg");
  }

  .cta3 {
    background-image: url("../images/ctaBG3_lg.jpg");
  }

  .cta h1 {
    margin-right: 1rem;
  }

  /* ######### 10a-v. Team, Large screen rules ######### */
  .team {
    max-width: 1000px;
    margin: auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr .5fr;
    grid-template-rows: repeat(2, auto);
  }

  .team h1 {
    order: 2;
    grid-column: 2 / -1;
    align-self: center;
  }

  .teamMembers {
    order: 1;
    grid-column: 1 / -1;
  }

  .team p {
    border-right: solid 1px #dedede;
    padding-right: 1rem;
    order: 2;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  /* ######### 10a-vi. Problem, Large screen rules ######### */

  section.problem {
    background: url(../images/problem1.png) no-repeat center left;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: center;
  }

  .problem h1 {
    color: #233458;
    padding-right: 1rem;
    text-align: right;
    text-shadow: 1px 1px 2px #fff;
    grid-column: 1 / 5;
  }

  .problem h1~p,
  .problem h3,
  .problem ul {
    grid-column: 5 / -1;
  }

  .problem ul {
    margin-left: 2rem;
    padding-right: 1rem;
  }

  .problem img {
    display: none;
  }


  /* ######### 10a-vii. Actions, Large screen rules ######### */

  .action {
    max-width: 1200px;
    margin: auto;
  }

  .action article {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .action article h1 {
    text-align: right;
    margin-right: 1rem;
  }

  .action ul {
    display: flex;
    flex-wrap: wrap;
  }

  .action ul li {
    flex-basis: 48%;
    grid-template-columns: 2fr 4fr;
  }

  /* ######### 10a-viii. Footer, Large screen rules ######### */
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr .25fr;
  }

  .contact {}

  .social h3 {
    border-bottom: none;
    padding: .5rem 1rem .5rem 0;
    text-align: right;
  }

  .social article {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr .5fr;
    align-items: center;
  }

  .socialIcons {
    border-left: solid #fff 1px;
    font-size: 150%;
    padding: .5rem 0 .5rem 1rem;
  }

  .socialIcons a {
    display: block;
  }

  .contactInfo {
    background-color: #EEF2F5;
    color: #233156;
    padding: 1rem 0 0;
    grid-column: 1 / -1;
  }

}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {

  /* ######### 10b-i. Footer, X-Large screen rules ######### */
  .form {
    display: grid;
    grid-template-columns: auto minmax(min-content, 580px);
    grid-template-areas:
      ". h"
      ". p"
      ". f";
  }

  .form h3 {
    grid-area: h;
  }

  .form p.formIntro {
    grid-area: p;
  }

  form#contactForm {
    max-width: initial;
    grid-area: f;
    display: grid;
    grid-template-areas:
      "name ph"
      "email news"
      "radio radio"
      "msg msg"
      "btn .";
    grid-gap: 1rem;
  }

  .contactForm div {
    margin-top: 0;
  }

  .contactForm div:nth-child(1) {
    grid-area: name;
  }

  .contactForm div:nth-child(2) {
    grid-area: ph;
  }

  .contactForm div:nth-child(3) {
    grid-area: email;
  }

  .contactForm div:nth-child(4) {
    grid-area: radio;
  }

  .contactForm div:nth-child(5) {
    grid-area: msg;
  }

  .contactForm div:nth-child(6) {
    margin: 1.8rem 0 0;
    grid-area: news;
  }

  .contactForm button {
    width: 100%;
    grid-area: btn;
  }

  .contactForm textarea {
    max-width: 100%;
  }

  .social article {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .socialIcons {
    border-left: none;
    padding-left: 0;
  }

  .socialIcons a {
    display: inline-block;
    font-size: 180%;
  }

}

/* ############ 10c. Feature Query ############ */
/* SAFARI 11+ */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .galleryWrap {
      align-items: stretch;
    }

    .galleryWrap img {
      height: inherit;
    }
  }
}