/*
=============== 
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(184, 91%, 17%);
  --clr-primary-2: hsl(185, 84%, 25%);
  --clr-primary-3: hsl(185, 81%, 29%);
  --clr-primary-4: hsl(184, 77%, 34%);
  /* primary/main color */
  --clr-primary-5: hsl(185, 62%, 45%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(185, 57%, 50%);
  --clr-primary-7: hsl(184, 65%, 59%);
  --clr-primary-8: hsl(184, 80%, 74%);
  --clr-primary-9: hsl(185, 94%, 87%);
  --clr-primary-10: hsl(186, 100%, 94%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --ff-primary: "Lato", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.25rem;
  --radius: 0.5rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/*
=============== 
Global Styles
===============
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--ff-primary);
  background: var(--clr-white);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
/* img {
  width: 100%;
  display: block;
} */
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 0.875rem;
}
p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}
/*  global classes */

.btn {
  text-transform: uppercase;
  background: var(--clr-primary-5);
  color: var(--clr-white);
  padding: 0.375rem 0.75rem;
  letter-spacing: var(--spacing);
  display: inline-block;
  /* font-weight: 700; */
  transition: var(--transition);
  font-size: 0.875rem;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover {
  color: var(--clr-primary-1);
  background: var(--clr-primary-8);
}
.section {
  padding: 5rem 0;
}
.section-title {
  text-align: center;
}
.section-title h2 {
  margin-bottom: 5rem;
  text-transform: uppercase;
}
.section-title span {
  color: var(--clr-primary-5);
}
.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}
@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

/*
=============== 
Navbar
===============
*/
.navbar {
  position: fixed;
  background: var(--clr-white);
  top: 0;
  left: 0;
  width: 100%; /* so its spans all across */
  box-shadow: var(--dark-shadow);
  z-index: 2;
}
.nav-icons {
  display: none;
}
.nav-center {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.nav-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.nav-toggle {
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--clr-primary-5);
  cursor: pointer;
  transition: var(--transition);
}
.nav-toggle:hover {
  transform: scale(1.2);
}
.nav-link {
  display: block; /* the li they are in actually are display block but we need to set it for the link as well so their content spans up to the end of the row */
  padding: 1rem 2rem;
  font-size: 1rem;
  text-transform: capitalize;
  transition: var(--transition);
  color: var(--clr-grey-1);
  cursor: pointer;
  letter-spacing: var(
    --spacing
  ); /* a good property to add which makes some largers heading with less text more readable */
}
.nav-link:hover {
  color: var(--clr-primary-1);
  background-color: var(--clr-primary-8);
  padding-left: 2.25rem;
}
.nav-links {
  height: 0;
  overflow: hidden; /* we do it so the navbar is hidden when the button has not been clicked by settings its height to 0, however the content will overflow so we hide it with overflow:hidden */
  /* we check what was the height of the nav-links so we can add it later 278.47px in our case then we add it to the show-links class which, with the help of js toggles the class on click, so if it it missing it will be added on click or if it is already there it will be removed */
  transition: var(--transition);
}
.show-links {
  height: 278.47px; /* if we set it to auto instead of its specific height, the transition will not be applied as it seems like auto value does not count toward changes over time */
}
@media screen and (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
  .nav-center/* contains logo and links div as children */ {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* it is a good practice to put it to wrap */
    align-items: center; /* so that all rows in the flexbox(1 in our case) are aligned in the center */
  }
  .nav-links {
    height: auto;
    display: flex; /* so all the links are next to eachother in a row */
  }
  /* removing default padding from mobile version */
  .nav-link {
    padding: 0;
    margin-right: 0.7rem;
    letter-spacing: var(--spacing);
    color: var(--clr-primary-4);
  }
  .nav-link:hover {
    color: var(--clr-primary-6);
    background: transparent;
    padding: 0;
  }
  .nav-header {
    padding: 0;
  }
  /* by default they are display block as they are links in a unordered list which is block by default which means that they will appear  */
  .nav-icons {
    display: flex;
  }
  .nav-icon {
    font-size: 1.5rem;
    margin-right: 0.7rem;
    color: var(--clr-primary-5);`
  }
  .navbar {
    padding: 0.6rem 2rem;
  }
}
/*
=============== 
Hero
===============
*/
.hero {
  min-height: 100vh;
  background: var(--clr-primary-5);
  display: flex;
  justify-content: center;
  align-items: center; /* we use this as there is only one row of data that we wish to manipulate(the .hero-banner row), so we grab this item(also know as row) and center it with align items center */
}
.hero-banner {
  color: var(--clr-white);
  text-align: center;
  padding: 0 3rem;
}

.hero-banner h1 {
  text-transform: uppercase;
}
.hero-banner p {
  max-width: 35rem;
  align-self: center; /* the item is already centered so using this property will not help, it looks like it is not as it has max width and starts from the left on mobile devices but when it reaches it it stops growing while the heading does so it appears on the left as there is margin added on the right of it, in order to center it we use margin left and right auto */
  margin-left: auto;
  margin-right: auto;
  color: var(--clr-white);
  letter-spacing: var(--spacing);
}
.hero-btn {
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  background-color: var(--clr-white);
  color: var(--clr-primary-5);
}
.hero-btn:hover {
  background: transparent;
  border-color: var(--clr-white);
}
/* We are going to add the background image only to bigger screen sizes as for samller one it does not look quite good */
@media screen and (min-width: 768px) {
  .hero {
    background: linear-gradient(rgba(44, 174, 186, 0.7), rgba(0, 0, 0, 0.7)),
      url("../images/main.jpeg") center/cover no-repeat;
  }
  .hero-banner {
    padding: 0;
  }
  .hero-banner p {
    max-width: 45rem;
  }
}
/*
=============== 
About
===============
*/

.about-img {
  margin-bottom: 2rem;
}

@media screen and (min-width: 992px) {
  .about-center {
    display: flex;
    justify-content: space-between; /* we use it to add space between the children elements */
  }
  .about-img,
  .about-info {
    margin-bottom: 0;
    flex: 0 0 calc(50% - 2rem); /* we calculate it so that we have 2rem for each child left which we can use to add space between them by adding justify-content: space-between to the parent element */
  }
}

@media screen and (min-width: 1170px) {
  /* Acts as an element inside the element with a class of .about-img that is as big as the content inside(image in our case) which is used purely for styling purposes we give it position absolute and the element which it is added to (which essentially acts as its parent) position relative so we can move it up,down,left,right, box-sizing:border-box is not applied to it by default with the * selector so marging makes the element bigger, this is the reason we need to set is explicitly when creating the element or add ::before and maybe ::after if we need it to the rule with the universal selector *    
  at first it appears on top of the image element and that is due to the fact that we set its position to absolute so it goes out of the normal flow of the document and appear on top of all others elements with position relative, in this case, we can either set the image to position relative or give the ::before element z-index of -1  */
  .about-img::before {
    content: "";
    width: 100%;
    height: 100%;
    border: 0.5rem solid var(--clr-primary-5);
    position: absolute;
    box-sizing: border-box;
    top: -1.5rem;
    left: -1.5rem;
    /* z-index: -1; */
  }
  .about-img {
    position: relative;
  }
  .about-photo {
    position: relative;
    /* z-index: -1; this would not work as the image does not have position relative*/
  }
}

/* section add to globals */

/* title add to globals */
/* section center add to globals */

/*
=============== 
Services
===============
*/
.services {
  background: var(--clr-grey-10);
}
.service {
  text-align: center;
  margin-bottom: 4rem;
}
.service-text {
  max-width: 25rem;
  margin: 0 auto;
}
.service-icon {
  background: var(--clr-primary-5);
  padding: 0.5rem;
  font-size: 2rem;
  display: inline-block;
  margin-bottom: 1.3rem;
}

/* so here is how this works - since we are using flexbox the columns will switch automatically from 1 to 2 and 3 columsn as long as there is enough space for them, however, this means that they will change ONLY when there is enough space to fit them meaning that there will be a lot of whitespace left and we cannot control how much of the section they take up, this means that we cannot control on what width they will change as they do it automatically when there is enough space for the WHOLE container
since the largest element that we have added determines the size of the box - the paragraph with a max width of 25 rem, only when there is enough space for this 25 rem to fit the new element will be added, we can gain control by adding media query and flex basis setting the percent we wish each element to take up at specific screen widths, this way we know they will always take up the space that we have specified and thanks to the fact that we have set the p element with max width, not width, it will shrink as much as we need it to and it will not overflow if we set its size less than the text in it, but rather the text will shrink and go onto a new row */
@media screen and (min-width: 576px) {
  .services-center {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* if the content cannot fit in its original size it will not shrink in order to fit it on the same row but rather all the items that cannot fit will be put on separate rows */
  }
  .service {
    flex: 0 0 calc(50% - 1rem); /* we add it so they take up exactly 50% of the section no matter on what screen they are viewed on and leave 1rem for each in order to put distance between them with the space-between used above */
    margin-bottom: 1.5rem;
  }
}

@media screen and (min-width: 992px) {
  .service {
    flex: 0 0 calc(33.33% - 1rem); /* we add it so they take up exactly 50% of the section no matter on what screen they are viewed on and leave 1rem for each in order to put distance between them with the space-between used above */
  }
}
@media screen and (min-width: 1170px) {
  .service {
    display: flex;
  }
  .service-title {
    margin-bottom: 0.5rem;
  }
  .service-icon {
    align-self: start; /* so that it does not stretch */
  }
}

/*
=============== 
Featured Tours
===============
*/
.tour-card {
  background: var(--clr-grey-10);
  margin-bottom: 2rem;
  box-shadow: var(--light-shadow);
  transition: var(--transition);
}

.tour-card:hover {
  box-shadow: var(--dark-shadow);
  transform: scale(1.02);
}

.tour-img-container {
  position: relative;
}

.tour-img {
  height: 15rem;
  object-fit: cover; /* so it remains its original height and width and the image does not get distorted but in order to do that it is cut a bit */
}
.tour-date {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--clr-primary-8);
  margin-bottom: 0;
  padding: 0.25rem 0.5rem;
  text-transform: capitalize;
}
.tour-btn {
  text-align: center;
}

.tour-info {
  padding: 1rem 0 0 1rem;
}
.tour-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.4rem 1rem 1.4rem;
}
.tour-footer p {
  color: var(
    --clr-primary-5
  ); /* we add it to the p elements specifically as the color property is not inherited */
  line-height: 0; /* we remove it as the p elements inside our div do not have more than 1 row so this height just adds unnecessary height to our document */
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .featured-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* so any space between children will be put as a margin */
  }
  .tour-card {
    flex: 0 0 calc(50% - 2rem);
  }
}

@media screen and (min-width: 1170px) {
  .tour-card {
    /* we only change this as the rules from the previous media query have already been applied */
    flex: 0 0 calc(33.333% - 2rem);
  }
}

/*
=============== 
Contact
===============
*/
.contact {
  background: var(--clr-primary-5);
}
.contact-title {
  /* for some reason paragraph do not inherit the color of the div so we would need to target them manually */
  color: var(--clr-white);
}

.contact-title p {
  color: var(--clr-primary-8);
}
.contact-form {
  display: flex;
  max-width: 28rem;
}
.form-control {
  flex: 1 1 auto;
  color: var(--clr-grey-5);
}
.form-control,
.btn-submit {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: capitalize;
  letter-spacing: var(--spacing);
  background: var(--clr-white);
  border: transparent;
}
.form-control::placeholder {
  color: inherit;
}
.btn-submit {
  font-family: var(--ff-primary); /* as it is not inherited */
  margin-left: 0.5rem;
  background: var(--clr-primary-8);
  color: var(--clr-primary-1);
  transition: var(--transition);
  cursor: pointer;
}
.btn-submit:hover {
  background: var(--clr-primary-1);
  color: var(--clr-primary-5);
}
@media screen and (min-width: 992px) {
  /* make sure there is a space between the "and" and the paranthesis otherwise the media query would not work */
  .contact-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .contact-form {
    align-items: flex-start;
    max-width: 100%;
    flex: 1 1 auto;
    padding-left: 1rem;
  }
}

/*
=============== 
Gallery
===============
*/
.gallery-img-container {
  position: relative;
  background: var(--clr-primary-5);
}
.gallery-img {
  transition: var(--transition);
  height: 17rem;
  object-fit: cover;
}
.gallery-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--clr-white);
  font-size: 2rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
  transition: var(--transition);
}
.gallery-img-container:hover .gallery-img {
  opacity: 0.5;
}
.gallery-img-container:hover .gallery-icon {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .gallery-center {
    display: flex;
    flex-wrap: wrap; /* we add it so overflowing children go onto a new row */
  }
  .gallery-img-container {
    flex: 0 0 50%;
  }
}
@media screen and (min-width: 992px) {
  .gallery-img-container {
    flex: 0 0 25%;
  }
}
/*
=============== 
Footer
===============
*/
.footer {
  background-color: var(--clr-grey-1);
  text-align: center;
  padding-left: 2rem;
  padding-right: 2rem;
}
.footer-links,
.footer-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.footer-link {
  font-size: 1rem;
  color: var(--clr-white);
  text-transform: capitalize;
  margin-right: 1rem;
  letter-spacing: var(--spacing);
  transition: var(--transition);
}
.footer-link:hover {
  color: var(--clr-primary-5);
}
.footer-icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: var(--clr-primary-8);
  transition: var(--transition);
}
.footer-icon:hover {
  color: var(--clr-primary-5);
}
.copyright {
  text-transform: capitalize;
  letter-spacing: var(--spacing);
}