*,
*::after,
*::before {
  /* Global reset */
  padding: 0;
  margin: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }

body {
  padding: 3rem;
  box-sizing: border-box;
  /* so that paddings and borders arent added to the size of the element */
  /* All of the following properties will be inherited by all the child elements */
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777; }

/* To create custom animations */
/* For browser performance its best to animate opacity and the transform properties */
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

/* Animation for our button */
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes shake {
  0% {
    transform: translateX(0.001rem); }
  50% {
    transform: translateX(-0.001rem); }
  75% {
    transform: translateX(0.001rem); } }

.heading-primary {
  color: white;
  text-transform: uppercase;
  margin-bottom: 6rem; }

.heading-primary-main {
  /* since span is an inline element and we want our heading lines to be one after the other
        we can change its display to block to make it act like a block level element */
  display: block;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 3.5rem;
  animation: moveInLeft 1s;
  backface-visibility: hidden;
  /* To stop the shakiness of animations */ }

.heading-primary-sub {
  /* since span is an inline element and we want our heading lines to be one after the other
        we can change its display to block to make it act like a block level element */
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1.7rem;
  animation: moveInRight 1s;
  backface-visibility: hidden;
  /* To stop the shakiness of animations */ }

.heading-secondary {
  text-transform: uppercase;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  background: linear-gradient(to right, #7ed56f, #28b485);
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.2s;
  text-align: center; }
  .heading-secondary:hover {
    transform: skewY(2deg) skewX(2deg) scale(1.1);
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase; }

.paragraph {
  font-size: 1.6rem; }
  .paragraph:not(:last-child) {
    margin-bottom: 3rem; }

.u-center-text {
  text-align: center; }

.u-margin-bottom-small {
  margin-bottom: 2rem; }

.u-margin-bottom-medium {
  margin-bottom: 4rem; }

.u-margin-bottom-large {
  margin-bottom: 8rem; }

.u-margin-top-large {
  margin-top: 8rem; }

.u-margin-top-medium {
  margin-top: 4rem; }

.u-margin-top-small {
  margin-top: 2rem; }

.header {
  height: 95vh;
  /* Will take up 95 percent of the viewport height */
  background-image: linear-gradient(to right, rgba(126, 213, 111, 0.877), rgba(40, 180, 133, 0.855)), url(../img/hero.jpg);
  /* Putting two background images over each other, the first one is the top one, so we reduce its opacity to make
          the second one visible */
  background-size: cover;
  /* Whatever the width of the viewport or the parent is, it will take up the entire space */
  background-position: top;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  /* Is used to clip an element by specifying which coordinates our element should be visible in, go in clockwise direction
        starting from top-left*/
  position: relative;
  /* So that our headers,image and "discover more" button can be absolute */ }

.logo-box {
  /* This is the container for our image and we can position this absolutely in our header which is our parent */
  position: absolute;
  top: 4rem;
  left: 4rem; }

.logo {
  height: 3.5rem;
  /* Width is automatically figured out by browser */ }

.text-box {
  /* This is the container for our headers and button and we can position this absolutely in our header which is our parent */
  position: absolute;
  top: 40%;
  left: 50%;
  /* The above two are in relation to the parent element */
  transform: translate(-50%, -50%);
  /* Shifting the text box to -50 percent its OWN width and height to make it appear in the center */
  text-align: center;
  /* Since the button (anchor tag) is an inline block element it is treated as text so we can align it in the center by just
        saying text align */ }

/* Pseudo elements allows us to potentially create virtual elements so, the after pseudo element
      acts like an element after the one we have currently selected even though there is nothing
      like that in our markup */
.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -20vh;
  height: 95vh; }

.section-features {
  background-image: linear-gradient(to right, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../../img/nat-4.jpg);
  height: 95vh;
  background-size: cover;
  padding: 20rem 0;
  transform: skewY(-7deg);
  margin-top: -10rem;
  margin-bottom: 10rem; }
  .section-features > * {
    transform: skewY(7deg); }

.section-tours {
  text-align: center;
  height: 120vh;
  background-color: #f7f7f7;
  padding: 30rem;
  margin-top: -20rem; }

.section-testimonials {
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.86); }

.section-booking {
  background: linear-gradient(to right, #7ed56f, #28b485);
  padding: 15rem 0; }

.book {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 60%), url(../img/nat-10.jpg);
  background-size: cover;
  height: 50rem;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.46);
  padding: 2rem;
  max-width: 114rem;
  margin: 0 auto; }
  .book-form {
    width: 50%;
    padding: 5rem;
    height: 100%; }

.row {
  max-width: 114rem;
  margin: 0 auto; }
  .row:not(:last-child) {
    margin-bottom: 8rem; }
  .row [class^='col-'] {
    float: left; }
    .row [class^='col-']:not(:last-child) {
      margin-right: 6rem; }
  .row .col-1-of-2 {
    width: calc((100% - 6rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3); }
  .row .col-2-of-3 {
    width: calc( 2 * ((100% - 2 * 6rem) / 3) + 6rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4); }
  .row .col-2-of-4 {
    width: calc( 2 * ((100% - 3 * 6rem) / 4) + 6rem); }
  .row .col-3-of-4 {
    width: calc( 3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }

.navigation {
  position: relative; }
  .navigation-checkbox {
    display: none; }
  .navigation-button {
    background-color: white;
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    position: fixed;
    top: 6rem;
    right: 6rem;
    z-index: 3;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); }
  .navigation-background {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    background-image: radial-gradient(#7ed56f, #28b485);
    position: fixed;
    top: 6.5rem;
    right: 6.5rem;
    z-index: 1;
    transition: all 0.5s; }
  .navigation-nav {
    height: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    opacity: 0;
    width: 0; }
  .navigation-list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 300; }
  .navigation-item {
    margin: 3rem; }
  .navigation-link:link, .navigation-link:visited {
    text-decoration: none;
    color: inherit;
    padding: 1rem 2rem;
    background: linear-gradient(120deg, transparent 0%, transparent 50%, white 50%);
    background-size: 300%;
    transition: all 0.6s; }
  .navigation-link:hover {
    background-position: 100%;
    color: #7ed56f;
    border-radius: 3px; }
  .navigation :hover {
    cursor: pointer; }
  .navigation-checkbox:checked ~ .navigation-nav {
    opacity: 1;
    width: 100vw;
    height: 100vh;
    animation: moveInLeft 0.7s; }
  .navigation-checkbox:checked ~ .navigation-background {
    transform: scale(80); }

.hamburger {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.line {
  width: 3rem;
  background-color: rgba(128, 128, 128, 0.6);
  height: 0.3rem;
  margin: 0.7rem; }

.btn {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  border-radius: 10rem;
  display: inline-block;
  border: none;
  transition: all 0.3s;
  font-size: 1.6rem; }
  .btn-form {
    font-size: 1.2rem; }
  .btn:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    /* Offset in x, Offset in y ,blur-amount, colour */
    cursor: pointer; }
  .btn:active {
    /* Clicked state */
    transform: translateY(-0.1rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    /* Offset in x, Offset in y ,blur-amount, colour */ }

.btn-white {
  color: #777;
  background-color: white; }

.btn-animated {
  animation: fadeIn 2s; }

.btn-text:link, .btn-text:visited {
  color: #55c57a;
  padding: 0.3rem;
  font-size: 1.6rem;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #55c57a;
  transition: all 0.2s; }

.btn-text:hover {
  color: white;
  background-color: #55c57a;
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }

.btn-text:active {
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn-green {
  color: white;
  background-color: #55c57a; }

.composition {
  position: relative; }
  .composition-photo {
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    position: absolute;
    border-radius: 1px;
    z-index: 0;
    transition: all 0.2s; }
    .composition-photo-p1 {
      top: -2rem;
      left: 0; }
    .composition-photo-p2 {
      top: 2rem;
      right: 0; }
    .composition-photo-p3 {
      top: 10rem;
      left: 20%; }
    .composition-photo:hover {
      outline: 1.5rem solid #55c57a;
      outline-offset: 0.8rem;
      transform: scale(1.05) translateY(-0.5rem);
      box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
      z-index: 1; }
  .composition:hover .composition-photo:not(:hover) {
    transform: scale(0.9); }

.feature-box {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 2.5rem;
  transition: all 0.3s;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
  .feature-box:hover {
    transform: translateY(-1.5rem) scale(1.03);
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.4);
    cursor: pointer; }
  .feature-box-icon {
    font-size: 6rem;
    color: transparent;
    background: linear-gradient(to right, #7ed56f, #28b485);
    background-clip: text;
    -webkit-background-clip: text; }

.card {
  height: 52rem;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative; }
  .card-side {
    height: 52rem;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    width: 100%;
    transition: all 0.8s ease;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3); }
    .card-side-front {
      background-color: white; }
    .card-side-back {
      background-color: green;
      transform: rotateY(180deg); }
      .card-side-back-color-1 {
        background: linear-gradient(to right bottom, #ffb900, #ff7730); }
      .card-side-back-color-2 {
        background: linear-gradient(to right bottom, #7ed56f, #28b485); }
      .card-side-back-color-3 {
        background: linear-gradient(to right bottom, #2998ff, #5643fa); }
  .card:hover .card-side-front {
    transform: rotateY(-180deg); }
  .card:hover .card-side-back {
    transform: rotateY(0); }
  .card-picture {
    position: relative;
    background-size: cover;
    height: 23rem;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    background-blend-mode: soft-light; }
    .card-picture-1 {
      background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg); }
    .card-picture-2 {
      background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg); }
    .card-picture-3 {
      background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg); }
  .card-heading {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 300;
    color: black;
    text-align: right;
    position: absolute;
    top: 12rem;
    right: 2rem;
    color: white; }
  .card-heading-span {
    padding: 0.75rem 0.5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; }
    .card-heading-span-1 {
      background: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }
    .card-heading-span-2 {
      background: linear-gradient(to right bottom, rgba(126, 213, 111, 0.85), rgba(40, 180, 133, 0.85)); }
    .card-heading-span-3 {
      background: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85)); }
  .card-details {
    text-transform: capitalize;
    margin-top: 3rem; }
    .card-details ul {
      list-style: none;
      width: 80%;
      margin: 0 auto; }
      .card-details ul li {
        padding: 1rem;
        font-size: 1.2rem;
        text-align: center; }
        .card-details ul li:not(:last-child) {
          border-bottom: 1px solid #f7f7f7; }
  .card-cta {
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; }
  .card-price-box {
    font-weight: 200;
    color: white; }
    .card-price-box-only {
      font-size: 2rem; }
    .card-price-box-value {
      font-size: 6rem; }

.background-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1; }

.story {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 6rem;
  width: 75%;
  transform: skew(-7deg);
  border-radius: 3px;
  box-shadow: 0 3rem 4rem rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  margin-bottom: 4rem; }
  .story-shape {
    width: 15rem;
    height: 15rem;
    float: left;
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    margin-right: 4rem;
    position: relative; }
  .story-image {
    height: 100%;
    transition: all 0.6s;
    transform: translateX(-4rem) scale(1.4);
    backface-visibility: hidden; }
  .story-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    font-size: 2rem;
    color: white;
    z-index: -1;
    text-align: center;
    transition: all 0.6s;
    backface-visibility: hidden; }
  .story:hover .story-caption {
    z-index: 1;
    transform: translate(-50%, -50%); }
  .story:hover .story-image {
    transform: scale(1);
    filter: blur(0.2rem); }

.story > * {
  transform: skew(7deg); }

.form-group-radio {
  width: 48%;
  display: inline-block; }
  .form-group-radio-label {
    font-size: 1.6rem;
    cursor: pointer;
    position: relative;
    padding-left: 4rem; }
  .form-group-radio-button {
    height: 3rem;
    width: 3rem;
    border: 5px solid #7ed56f;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0; }
    .form-group-radio-button::after {
      content: '';
      height: 1.3rem;
      width: 1.3rem;
      background-color: #7ed56f;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0; }
  .form-group-radio-input {
    display: none; }
  .form-group-radio-input:checked ~ .form-group-radio-label .form-group-radio-button::after {
    opacity: 1; }

.form-input {
  font-size: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  font-family: inherit;
  font-weight: 300;
  width: 100%; }
  .form-input:focus:invalid {
    outline: 1px solid #ffb900; }
  .form-input:focus:valid {
    outline: 1px solid #7ed56f; }
  .form-input:not(:last-child) {
    margin-bottom: 1.5rem; }
  .form-input:focus {
    outline: 1px solid #ffb900;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }