/* Variables */
:root {
  --primary-color: #478b3f;
  --primary-color-text: #2c5b29;
  --primary-color-title: #3c7c36;
  --secondary-color: #00396e;
  --tertiary-color: #dee5ec;
  --fs-sm: clamp(0.8rem, 0.17vi + 0.69rem, 0.64rem);
  --fs-base: clamp(1rem, 0.48vi + 0.69rem, 0.8rem);
  --fs-md: clamp(1.25rem, 0.96vi + 0.64rem, 1rem);
  --fs-lg: clamp(1.56rem, 1.68vi + 0.49rem, 1.5rem);
  --fs-xl: clamp(1.95rem, 2.74vi + 0.2rem, 2.2rem);
  --fs-xxl: clamp(2.44rem, 4.27vi + -0.29rem, 3rem);
  --fs-xxxl: clamp(3.05rem, 6.47vi + -1.09rem, 4rem);
}

/* GENERAL */

html {
  width: 100vw !important;
}

body {
  background: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(243, 243, 243, 1) 9%,
    rgba(243, 243, 243, 1) 100%
  );
}

/* CUSTOM CLASSES */
.rounded-4 {
  border-radius: 4px !important;
}

.text-primary {
  color: var(--primary-color-text) !important;
}

.title-primary {
  color: var(--primary-color-title) !important;
}

.text-balance {
  text-wrap: balance;
}

.btn.btn-primary {
  background-color: #047000;
}

/* BY SECTIONS */
header {
}

nav {
  z-index: 99999;
  flex-direction: row-reverse;
  justify-content: space-between;
  background-color: #fff;

  /* Animate sticky */
  position: sticky !important;
  top: 0;
  animation: adjust-navbar linear both;
  animation-timeline: scroll();
  animation-range: 0 100px;
  transition: all 0.3s ease-in-out;

  a.navbar-brand {
    display: flex;
    justify-content: end;
    width: 50%;
    margin-right: 0;
    padding: 0;

    img {
      max-width: 130px;
      transition: all 0.3s ease-in-out;
    }
  }

  button.navbar-toggler {
    border-radius: 4px;
  }
}

main {
  section.hero {
    height: 715px;

    .carousel-inner {
      height: 100%;

      .carousel-item {
        height: 100%;

        picture {
          height: 100%;

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

  section.services {
    .service-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 323px;
      max-width: 365px;
      margin: 0 auto;
    }
  }

  section.destinations {
    .card-img-top {
      &:hover {
        transform: scale(1.15);
        filter: brightness(0.8);
        transition: all 0.3s ease-in-out;
      }
    }

    .card-body {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      padding: 0.1rem 0.5rem !important;
      background-color: #047000cc;
    }

    .see-more {
      font-size: 1.1rem;
      font-weight: 500;
    }
  }

  section.travel-experience {
    .i-container {
      min-height: 200px;
      width: 100px;
    }
  }

  section.about {
    .img-container {
      position: relative;

      .about-img {
        width: 100%;
        margin-bottom: 20px;
      }

      .sello-img-container {
        position: absolute;

        bottom: 15px;
        right: -3px;
        background-color: #f3f3f3;
        border-radius: 50%;
        margin: 10px;

        width: 80px;
        height: 80px;

        .sello-img {
          width: 80px;
          height: 80px;
        }
      }
    }

    .see-more-container {
      height: 50px;

      hr {
        position: absolute;
        margin: 0;
        top: 20px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #04700011;
      }

      span {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #047000;
        left: calc(50% - (178px / 2));
      }
    }

    #more-about-us {
      display: none;
    }
  }

  section.faq {
    .ac {
      background: transparent;
    }

    .ac .ac-header button:focus {
      outline: none;
    }
  }

  section.main-routes {
    a {
      cursor: pointer;
    }
  }
}

/* Footer */
footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 100px;
  padding: 2rem 1rem 1rem;

  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(33, 33, 33);

  h6 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5px;

    color: #fff;
  }

  h5 {
    margin-bottom: 0.875em;
    font-size: 1.25rem;

    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 5px;
  }

  a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
  }

  .links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    i {
      margin-right: 0.5rem;
    }
  }

  .info-socials {
    img {
      margin-bottom: 1rem;
    }

    .social-links {
      display: flex;
      gap: 0.5rem;

      a.social-link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;

        border: 1px solid var(--primary-color);
        text-decoration: none;
        color: var(--primary-color);
        transition: all 0.3s ease;

        &:hover {
          background-color: var(--primary-color);
          color: #fff;
        }
      }
    }
  }

  .info-contact {
    .info-contact-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      i {
        margin-right: 0.5rem;
      }

      p {
        margin-bottom: 0;
      }

      .input-group-custom {
        display: flex;
        flex-direction: row;
        height: 40px;
        font-size: 13.3px;

        input {
          padding: 1rem;
          max-width: 66%;
          height: 100%;
        }

        button {
          font-family: "Poppins", sans-serif;
          border: none;
          padding: 0.5rem 1rem;
          background-color: #047000cc;
          color: #fff;
          height: 40px;
        }
      }
    }
  }
}
.mensaje-sobre-iframe-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  top: 480px;
}
.mensaje-sobre-iframe {
  position: static;
  text-align: center;
  font-size: 12px;
  background: none;
  margin: 0;
  padding: 0;
}
/* Media Queries */
@media (min-width: 375px) {
  .mensaje-sobre-iframe-wrapper {
    top: 480px;
  }
  .mensaje-sobre-iframe {
    font-size: 11px;
    width: 90%;
    max-width: 300px;
  }
  main {
    section.services {
      .service-item {
        height: 299px;
      }
    }

    section.travel-experience {
      .i-container {
        height: 150px;
      }
    }
  }
}

@media (min-width: 425px) {
  nav {
    a.navbar-brand {
      width: 270px;
    }
  }

  main {
    section.services {
      .service-item {
        height: 251px;
      }
    }

    section.travel-experience {
      .i-container {
        height: 170px;
      }
    }

    section.about {
      .img-container {
        .sello-img-container {
          width: 130px;
          height: 130px;

          .sello-img {
            width: 130px;
            height: 130px;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .mensaje-sobre-iframe-wrapper {
    top: 330px;
  }
  .mensaje-sobre-iframe {
    font-size: 12px;
    width: 70%;
    max-width: 600px;
  }
  main {
    section.services {
      .service-item {
        min-height: 300px;
        justify-content: initial;

        h5 {
          min-height: 50px;
        }
      }
    }

    section.travel-experience {
      .i-container {
        width: 70px;
        height: 290px;
      }
    }

    /* section.about {
            .img-container {
                position: relative;
                width: 50%;
                float: left;
                margin-right: 20px;
                overflow: hidden;

                .about-img {
                    position: relative;
                    left: -25%;
                    width: 150%;
                    height: 100%;
                    object-fit: fill;
                }

                .sello-img-container {
                    z-index: 100;
                    position: absolute;
                    bottom: 19px;

                    background-color: #f3f3f3;
                    border-radius: 50%;
                    margin: 10px;
                }
            }
        } */
    section.about {
      .img-container {
        position: relative;
        overflow: hidden;
        margin: 0 auto 1.5rem !important;
        height: 330px;

        .about-img {
          position: relative;
          top: -56.8px;
          height: 150%;
          width: 100%;
          left: 0;
          margin: auto;
        }

        .sello-img-container {
          z-index: 100;
          position: absolute;
          right: 20px;
          bottom: 20px;

          background-color: #f3f3f3;
          border-radius: 50%;
          margin: 10px;
        }
      }
    }
  }

  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    p {
      max-width: 300px;
    }
  }
}

@media (min-width: 992px) {
  nav {
    max-width: calc(100vw - 100px);
    margin: 0 auto;

    /* new animation */
    animation: adjust-navbar-desktop linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;

    a.navbar-brand {
      justify-content: start;

      img {
        max-width: fit-content;
        animation: adjust-navbar-brand linear both;
        animation-timeline: scroll();
        animation-range: 0 100px;
      }
    }

    .nav-bar {
      z-index: 9999;
    }
  }

  main {
    section.travel-experience {
      .i-container {
        width: 100px;
        height: 220px;
      }
    }

    section.about {
      .img-container {
        .about-img {
          height: unset;
          top: -180px;
          object-fit: cover;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  main {
    section.travel-experience {
      h5 {
        min-height: 50px;
      }

      .i-container {
        height: 150px;
      }
    }
  }
}

@keyframes adjust-navbar {
  from {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: none;
  }

  to {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  }
}

@keyframes adjust-navbar-desktop {
  0% {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  }

  100% {
    max-width: 100vw;
    height: 66px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    padding-left: 100px;
    padding-right: 100px;
  }
}

@keyframes adjust-navbar-brand {
  to {
    max-width: 130px;
    justify-self: center;
  }
}