/*

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)

*/

/* ############ 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: 0.5rem;
}

/* Services Page SS */
.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

/* Services Page - Main Area */
main.wrapper {
  max-width: 1300px;
  margin: auto;
}

.home,
.services-main {
  padding: 1rem 2rem 1rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1rem;
}

.home article {
  border: 1px solid #6f3f3f;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.services-main article {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.home figure {
  display: grid;
  grid-template-rows: 200px 50px;
}

.home img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* object-fit: cover; */
  object-fit: fill;
  /*guess don't need this>> width: 100%; */
  height: 250px;
}

.services-main img {
  /* border-top-left-radius: 10px; */
  /* border-top-right-radius: 10px; */
  border-radius: 10px;
  /* object-fit: cover; */
  /* object-fit: fill; */
  /*guess don't need this>> width: 100%; */
  height: 250px;
  width: 100%;
}
/* .home figcaption {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}

.home figcaption > h3 {
  color: white;
  padding: 0.75rem;
  font-size: 1.25rem;
} */

.home p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem 0.75rem;
}

.services-main h4 {
  text-align: center;
  padding: 1rem 0.75rem;
}

/* Services Page - List */
.services-benefits article {
  display: flex;
  flex-direction: column;
  /* justify-content: center; ???do i need this line */
  align-items: center;
  margin: 0 50px 50px;
}
.benefits-content h3 {
  margin: 10px;
  text-align: center;
  border: solid 1px rgb(121, 116, 116);
  background-color: rgb(237, 232, 232);
  border-radius: 10px;
  padding: 5px;
  color: #6c63cf;
}
.benefits-content ol {
  margin: 10px;
}
.benefits-content ol li {
  margin: 5px;
}

/* Services Page - benefits - media query */
@media screen and (max-width: 1280px) {
  .benefits-list {
    /* padding: 30px; */
  }
}

/* Main :: - Media Query */
@media screen and (min-width: 800px) {
  /* .hero {
    background-position: center center;
    padding: 4em 2em;
    display: flex;
    align-items: center;
  }

  .hero p {
    flex: 1;
  } */

  .home,
  .services-main {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

/* Services Page EE */

/* FAQ Page SS */

.everyqanda div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid green;
  border-radius: 15px;
  overflow: hidden;
  margin: 15px;
}
.everyqanda h4 {
  background-color: rgb(235, 235, 116);
  width: 100%;
}

@media screen and (min-width: 800px) {
  .everyqanda {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 65px;
  }
  .everyqanda div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
  }
}
/* FAQ Page EE */

/* About Section */

.about img,
.faq-header img {
  width: 300px;
  height: auto;
}

.about,
.faq-header {
  padding: 1rem;
  margin: auto;
  max-width: 1200px;
}
.about article,
.faq-header article {
  margin: 2rem auto;
  width: 80%;
  max-width: 1000px;
}
.about h1,
.faq-header h1 {
  font-size: 3rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.about article img,
.faq-header article img {
  border-left: solid 1px #9b9a9a;
  padding-left: 1rem;
}

/* ######### 9. Footer ######### */
footer {
  /* this is why there was a space between main and footer section */
  /* margin-top: 1rem; */
}
/* ######### 9a. Footer > Contact ######### */
/* Contact Main Section - incl about2 and form articles */
.hours,
.form {
  background-color: #472255;
  color: #fff;
  padding: 1rem 1rem 2rem;
}
.about2 {
  background-color: #967ba0;
  color: #fff;
  padding: 20px 10%;
  /* padding: 1rem 1rem 2rem; */
}
.about2 h2 {
  text-align: center;
}

.promocode {
  padding: 10px;
  border: 1px solid #fff;
}
.promocode h3 {
  font-size: large;
}
.promocode h3 b {
  color: rgb(16, 228, 16);
}
#state,
#promocode {
  font-weight: bold;
  color: black;
}

/* .form {
  border-left: solid 1px #dedede;
  padding-left: 1rem;
}
.about2 {
  padding-right: 1rem;
} */

.form p,
.form h3 {
  font-weight: 300;
  padding-bottom: 1rem;
  /* //:> xCUR.. */
  text-align: center;
}

/* ######### 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: 0.5rem;
  width: 100%;
}

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

.contactForm button {
  background-color: #13b1e7;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  padding: 0.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: 0.5rem;
}

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

.contactForm .checks {
  margin: 0.25em 0 1em 0.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 #267423;
  box-shadow: 0 0 2px #267423, 0px 0px 4px #267423, 1px 1px 4px #1eca18,
    2px 2px 4px #1eca18;
  outline: none;
}

/* radio buttons */
.contactForm div.radioBtns {
  margin: 1em 0;
  /* margin: 1em 4em; */
  max-width: 400px;
  /* max-width: 300px; */
  /* border: 1px solid orange; */
  /* does it matter to have flex here??? */
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  /* display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 1fr); */

  /* maybe use grid here and grid-template-areas: in here to center the radio button paragraph and buttons???, then use grid-area: on the .rBtns and  
  .radioBtns p lines below */
}

.radioBtns p {
  padding-bottom: 0;
  grid-column: span 3;
  display: flex;
  justify-content: center;
}
.rBtns {
  display: flex;
  justify-content: space-evenly;
}

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;
  cursor: pointer;
  margin: 5px;
}

/* 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 */
}

/* recaptcha area */
.g-recaptcha {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formBtn1,
.formBtn2 {
  cursor: pointer;
}

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

.hours article,
.social article {
  border-bottom: solid 2px #333738;
  font-weight: 400;
  padding-bottom: 0.25rem;
}

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

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

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

.contactInfo {
  padding-top: 0;
}

.contactInfo article {
  /* border-top: solid 2px #444b4f; */
  padding: 1rem 0;
}

.contactInfo h4 {
  font-weight: 400;
}

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

.contactInfo img {
  padding: 10px;
}

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

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

@media screen and (max-width: 999px) {
  .contactForm button {
    width: 100%;
    font-family: "Lato", sans-serif;
    font-weight: bold;
  }
  .formBtn1,
  .formBtn2 {
    margin-top: 10px;
  }
}

@media screen and (min-width: 357px) and (max-width: 699px) {
  /* About Section - media query, between 357px and 699px */
  .about article,
  .faq-header article {
    width: 90%;
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
  .social article {
    height: 100%;
    padding-top: 0;
    /* display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center; */
  }
}

/* ############ 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;
    text-align: left;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 0.25fr 1fr 0.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-iii. Trips, Large screen rules ######### */
  .tripList {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* About Section - media query, 700px */
  .about article,
  .faq-header article {
    /* width: 50%; */
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about h1,
  .faq-header h1 {
    margin: 0 1rem 0 0;
  }

  .about p {
    flex: 3;
  }

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

  .contact {
  }

  /* use flex on .hsFooter class, then width of 100% on .hours and .social classes */
  .hsFooter {
    display: flex;
    flex-direction: row;
    /* width: 100%; */
    /* margin: 0;
    padding: 0; */
  }

  .hours article,
  .social article {
    border-bottom: none;
    /* padding: 0.5rem 1rem 0.5rem 0; */
    /* text-align: right; */
  }

  /* //:> xCUR..social.. */

  .hours {
    /* display: grid;
    grid-template-columns: 0.5fr 1fr; */
    width: 100%;
  }
  .hours article {
    height: 100%;
    /* grid-column: 2/-1; */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* display: grid;
    grid-template-columns: 0.5fr 1fr;
    align-items: center; */
    border-bottom: none;
  }

  .social {
    /* display: grid;
    grid-template-columns: 1fr 0.5fr; */
    width: 100%;
  }
  .social article {
    height: 100%;
    /* grid-column: 1/2; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

    /* original code below:: */
    /* display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center; */
  }
  .social p {
    padding-bottom: 0.6rem;
  }
  .ownerName {
    margin-bottom: 0.5rem;
  }
  .phoneNumber {
    /* margin-bottom: 0; */
  }

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

  .socialIcons a {
    display: block;
  }

  .contactInfo {
    background-color: #ccb6ff;
    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 ######### */
  .contactMain {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-columns: auto minmax(min-content, 580px); */
    grid-template-areas:
      "about ."
      ". form";
  }
  .about2 {
    grid-area: about;
  }

  .form {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: auto minmax(min-content, 580px); */
    grid-template-areas:
      ". h ."
      ". p ."
      ". f .";
    /* grid-area: form; */
  }

  .form h3 {
    grid-area: h;
    /* text-align: center; */
  }

  .form p.formIntro {
    grid-area: p;
    /* text-align: center; */
  }

  /* .hours {
    display: grid;
    grid-template-columns: 1fr 4fr;
  }
  .hours article {
    grid-column: 2/3;
    text-align: center;
  }

  .social {
    display: grid;
    grid-template-columns: 4fr 1fr;
    padding-top: 0;
  }
  .social article {
    grid-column: 1/2;
    text-align: center;
  } */

  /*  ########### Note viewers, I am going to place all of our new code for the 05_03 lecture here, in between these new code start/end comments. I will end up deleting these comments once we hvae finished. I just want you to be clear on what is different compared with what we had before :) ########### */
  /*  ########### NEW CODE START (05_03) ########### */
  /* cur..form.. */
  form#contactForm {
    max-width: initial;
    grid-area: f;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-areas:
      "name ph"
      /* "ph ." */
      "email city"
      "state zip"
      "address promo"
      /* "promo promo" */
      "radio radio"
      "question question"
      "addPref addPref"
      "recaptcha recaptcha";
    /* "btn ."; */
    grid-gap: 1rem;
  }

  .contactForm div {
    margin-top: 0;
  }

  .contactForm div:nth-child(1) {
    grid-area: name;
    /* grid-column: 2/3; */
  }

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

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

  .contactForm div:nth-child(4) {
    grid-area: city;
    /* grid-column: 2/3; */
  }

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

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

  .contactForm div:nth-child(7) {
    grid-area: address;
  }

  .contactForm div:nth-child(8) {
    grid-area: promo;
  }

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

  .contactForm div:nth-child(10) {
    grid-area: question;
  }

  .contactForm div:nth-child(11) {
    grid-area: addPref;
  }

  .contactForm div:nth-child(12) {
    grid-area: recaptcha;
  }

  .contactForm button {
    width: 100%;
  }

  .contactForm textarea {
    max-width: 100%;
  }
  /*  ########### NEW CODE END (05_03) ########### */

  /* .social article {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  } */
  .hours {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
  }
  .hours article {
    height: 100%;
    grid-column: 2/-1;
    /* display: flex;
    flex-direction: column;
    align-items: center; */

    /* display: grid;
    grid-template-columns: 0.5fr 1fr;
    align-items: center; */
    border-bottom: none;
  }

  .social {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
  }
  .social article {
    height: 100%;
    grid-column: 1/2;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    /* justify-content: center; */

    /* original code below:: */
    /* display: grid;
    grid-template-columns: 1fr 0.5fr;
    align-items: center; */
  }

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

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

#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -50px 0 0 0 !important;
  z-index: -999999;
  opacity: 0;
}