/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --primary-color: hsl(84, 36%, 42%);
  --primary-color-alt: rgb(78, 98, 60);
  --secondary-color: #cdab7e;
  --secondary-color-muted: hsl(34, 44%, 65%, 0.3);
  --whatsapp-color: rgb(25, 114, 92);
  --background-color: hsl(0, 0%, 95%);
  --foreground-color: hsl(222.2, 47.4%, 11.2%);
  --container-color: hsl(0, 0%, 10%);
  --container-color-foreground: hsl(0, 0%, 70%);
  --muted-color: hsl(210, 2%, 26%);
  --muted-foreground-color: rgba(0, 0, 0, 0.6);
  --error-color: rgb(196, 28, 28);
  --error-color-soft: rgb(252, 228, 228, .3);
  --success-color: rgb(31, 122, 31);
  --success-color-soft: rgba(227, 251, 227, .3);
  --info-color: rgb(11, 107, 203);
  --info-color-soft: rgb(227, 239, 251, .3);
  --alert-color: rgb(154, 91, 19);
  --alert-color-soft: rgb(253, 240, 225, .3);
  --transparent-color: hsla(0, 0%, 100%, .2);
  --transparent-color-75: hsla(0, 0%, 100%, .75);

  /*========== GRIDS ==========*/
  --grid-max2: repeat(2, max-content);
  --grid-max3: repeat(3, max-content);
  --grid-max4: repeat(4, max-content);
  --grid-a: repeat(2, 350px);
  --grid-b: 460px 340px;
  --grid-c: 620px 1fr;
  /*========== SHADOW ==========*/
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --montserrat-font: "Montserrat", sans-serif;
  --dancing-font: "Dancing Script", cursive;
  --poppins-font: "Poppins", sans-serif;
  --biggest-font-size: 3rem;
  --bigger-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 5rem;
    --bigger-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--poppins-font);
  font-size: var(--normal-font-size);
  background-color: rgb(250 250 250 / 1) ;
  color: var(--foreground-color);
  letter-spacing: .025em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input {
  font-family: inherit;
  font-size: var(--font-medium);
}

button {
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
}

h1, h2, h3, h4 {
  color: #fff;
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--text-color);
}

i {
  font-size: 1.25rem;
}

img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 2.5rem 1rem;
}

.section_title {
  font-size: var(--h1-font-size);
  font-family: var(--montserrat-font);
  text-align: center;
  line-height: 1.25;
  color: var(--foreground-color);
  font-weight: var(--font-medium);
  margin-block: 0.5rem 1.25rem;
}

.section_description {
  color: var(--muted-foreground-color);
}

.button {
  position: relative;
  overflow: hidden;
  font-family: var(--montserrat-font);
  background-color: transparent;
  color: #fff;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor: pointer;
}
.button i {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: .4s;
}
.button:hover i {
  transform: translateX(.25rem);
}

.avatar {
  width: 3rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a9b9f, #2bb3b7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.avatar-img-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.badge-icon {
  color: white;
  font-size: 8px;
}

.main, .footer {
  overflow: hidden; /* For animation ScrollReveal */
}

/*=============== HEADER & NAV ===============*/
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}
.header::after { /* for blur effect */
  content: '';
  background-color: transparent;
  backdrop-filter: none;
  transition: background .4s ease-in-out, backdrop-filter .4s ease-in-out;
}
.nav {
  position: relative;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav_logo {
  width: 3rem;
  aspect-ratio: 1/1;
}
.nav_toggle, .nav_close {
  font-size: 1.5rem;
  padding: .5rem;
  cursor: pointer;
  transition: color .4s;
}
.nav_link {
  position: relative;
  color: var(--foreground-color);
  font-weight: var(--font-semi-bold);
  font-family: var(--montserrat-font);
  transition: color .4s;
}
.nav_link::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -.5rem;
  width: 0;
  height: 2px;
  background-color: var(--foreground-color);
  transition: width .4s, background-color .4s;
}
.nav_link:hover::after {
  width: 75%
}

/* Navigation for mobile devices */
@media screen and (max-width: 1024px) {
  .nav_menu {
    position: fixed;
    z-index: var(--z-fixed);
    width: 100%;
    min-height: max-content;
    top: -150%;
    left: 0;
    padding-block: 4rem;
    background-color: var(--transparent-color-75);
    backdrop-filter: blur(24px);
    --webkit-backdrop-filter: blur(24px); /* For Safari support */
    transition-property: top;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: .4s;
  }
  .nav_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 1rem;
    row-gap: 2.5rem;
  }
  .nav_link {
    color: var(--foreground-color);
    transition: color .4s
  }
  .nav_toggle {
    color: #fff;
    transition: color .4s;
  }
  .nav_close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: var(--foreground-color);
  }
}

/*=============== HOME ===============*/
.home {
  position: relative;
  height: 100vh;
  min-height: 480px;
}
.home_content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-left: 2.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.home_data-container {
  padding-inline: 1.5rem;
  display: grid;
  row-gap: 1rem;
  pointer-events: none;
  user-select: none;
  z-index: 20;
}
.home_title {
  font-size: 32px;
  color: #fff;
  text-align: end !important;
}
.home_title span {
  color: var(--primary-color);
  font-weight: var(--font-semi-bold);
}
.home_description {
  margin-bottom: 4rem;
  color: #fff;
  text-align: end;
  font-size: var(--small-font-size);
}
.home_button {
  justify-self: flex-end;
  margin-bottom: 6rem;
  background-color: var(--primary-color);
  pointer-events: all;
}
/* Home swiper */
.home_swiper-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background-color: #000;
  min-height: 480px;
  top: 0;
  left: 0;
  background-position: center !important;
  background-size: cover !important;
}
.home_swiper {
  width: 100%;
  height: 100%;
}
.home_swiper-filter {
  position: absolute;
  height: 100vh;
  width: 100%;
  min-height: 480px;
  top: 0;
  left: 0;
}
.dark-filter {
  background: #00000050;
}
/* Home social */
.home_social-container {
  display: grid;
  justify-items: center;
  row-gap: 6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.home_social-text {
  position: relative;
  rotate: 90deg;
  font-weight: var(--font-medium);
  color: #fff;
  font-size: var(--small-font-size);
}
.home_social-text::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  right: -4rem;
  content: '';
  width: 3rem;
  height: 1px;
  background: #fff;
}
.home_social-links{
  display: grid;
  row-gap: .75rem;
}
.home_social-link i {
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: transform .4s;
}
.home_social-link:hover {
  transform: scale(1.1);
}

/*=============== PLACE ===============*/
.place_content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 3rem;
}
.place_header {
 display: block;
 font-family: var(--montserrat-font);
 font-size: var(--h1-font-size);
 color: var(--muted-foreground-color);
 font-weight: var(--font-light);
 text-align: start;
}
.place_title {
  font-size: var(--bigger-font-size);
  text-align: start;
}
.place_description {
  margin-bottom: 1.25rem;
  text-align: start;
}
.place_info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: start;
  row-gap: .5rem;
  column-gap: .5rem;
}
.place_info-item {
  display: grid;
  grid-template-columns: var(--grid-max2);
  align-items: center;
  column-gap: .5rem;
  color: var(--muted-foreground-color);
}
.place_info-label {
  font-weight: var(--font-medium);
}
.place_info-value {
  grid-column-start: 2;
  font-size: var(--small-font-size);
  color: var(--primary-color);
  font-weight: var(--font-medium);
}
/* Gallery swiper */
.place_gallery-swiper {
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
.place_gallery-slide {
  height: 24rem;
  aspect-ratio: 1/1;
}
.place_gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Gallery thumbs */
.place_gallery-thumbs {
  width: 100%;
  height: 8rem;
  border-radius: .5rem;
  margin-top: .75rem;
}
.place_thumb-button {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
}
.place_thumb-button img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* persosonalize swiperjs */
.swiper-slide.thumb-slide {
  filter: grayscale(0.5) !important;
  -webkit-backdrop-filter: grayscale(0.5) !important;
}
.swiper-slide.swiper-slide-thumb-active {
  filter: grayscale(0) !important;
  -webkit-backdrop-filter: grayscale(0) !important;
}
:root {
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: hsl(0, 0%, 95%, 1) !important;
  --swiper-theme-color: hsl(0, 0%, 95%, 1) !important;
  --swiper-pagination-fraction-color: hsl(0, 0%, 95%, 1) !important;
  --swiper-pagination-color: hsl(0, 0%, 95%, 1) !important;
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}

/*=============== LOCATION ===============*/
.location_container {
  row-gap: 3rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-content: center;
}
.location_data {
  overflow: hidden;
  text-align: center;
}
.location_description {
  margin-bottom: 2rem;
}
.location_info-list {
  text-align: start;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: .5rem;
  column-gap: 1rem;
}
.location_info-item {
  display: grid;
  grid-template-columns: var(--grid-max2);
  align-items: center;
  column-gap: .5rem;
}
.location_info-item i {
  color: var(--muted-foreground-color);
}
.location_info-label {
  font-weight: var(--font-medium);
  color: var(--muted-foreground-color);
}
.location_info-value {
  font-weight: var(--font-medium);
  font-weight: var(--small-font-size);
  color: var(--primary-color);
  grid-column-start: 2;
}
.location_map {
  box-shadow: var(--shadow);
  border-radius: .5rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.location_map-iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  border-radius: .5rem;
  border: none;
}

/*=============== TESTIMONIALS ===============*/
.testimonials {
  position: relative;
  padding-bottom: 5rem;
}
.testimonials_container-bg {
  width: 100%;
  background-color: var(--container-color);
  padding-bottom: 7rem;
  border-bottom: 2px solid var(--secondary-color);
}
.testimonials_container {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.testimonials_data {
  padding: 1.5rem;
}
.testimonials_tooltip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--h2-font-size);
  gap: .5rem;
  font-family: var(--montserrat-font);
}
.stars_outher {
  position: relative;
  display: inline-block;
  color: var(--container-color-foreground);
  white-space: nowrap;
}
.stars_outher i {
  display: inline-block;
  vertical-align: middle;
}
.stars_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
  overflow: hidden;
  color: var(--secondary-color);
  white-space: nowrap;
  pointer-events: none;
}
.stars_inner i {
  display: inline-block;
  vertical-align: middle;
}
.testimonials_rating-label {
  color: #fff;
}
.testimonials_title {
  color: #fff;
  font-family: var(--montserrat-font);
  text-align: start;
}
.testimonials_description {
  color: var(--container-color-foreground);
  text-align: start;
  margin-bottom: 1.25rem;
  font-size: var(--h3-font-size);
}
.testimonials_brand-group {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
}
.testimonials_brand {
  width: 1.5rem;
  aspect-ratio: 1/1;
}
/* Testimonilas swiper */
.testimonials_container-reviews {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(3rem);
}
.testimonials_slide {
  padding: 1.25rem;
  transition: transform .4s;
}
.review_card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 460px;
  width: 100%;
}
.review_header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}
.review_header-content {
  flex: 1;
  margin-left: 12px;
}
.review_header-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-weight: var(--font-semi-bold);
  margin-bottom: 4px;
}
.review_header-subtitle {
  display: flex;
  align-items: center;
  column-gap: .25rem;
  font-size: var(--small-font-size);
  color: var(--muted-foreground-color);
}
.meta_logo {
  width: 1rem;
  aspect-ratio: 1/1;
  vertical-align: middle;
}
.review_header-button {
  color: var(--muted-foreground-color);
  padding: .25rem;
  cursor: pointer;
  border-radius: .25rem;
}
.review_card-text {
  padding-bottom: 1rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground-color);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  min-height: 110px;
  max-height: 110px;
}

/*=============== EXPLORE ===============*/
.explore {
  padding-top: 0;
  margin-top: 8rem;
  position: relative;
  background-color: var(--container-color);
}
.explore_image {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.explore_button {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  background-color: var(--primary-color);
  z-index: 10;
}
.explore_img {
  width: 100%;
  height: 333px;
  object-fit: cover;
  object-position: center;
}
.explore_shadow {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, hsla(0, 0%, 10%, 0) 50%, hsl(0, 0%, 10%) 92%);
}
.explore_content {
  margin-inline: auto;
  padding-inline: 1rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  position: relative;
  padding-top: 16rem;
  text-align: center;
  row-gap: 2.5rem;
}
.explore_title {
  font-weight: var(--font-semi-bold);
  color: #fff;
}
.explore_description {
  color: var(--container-color-foreground);
  font-size: var(--small-font-size);
}
.explore_user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
}
.explore_avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.explore_name {
  color: #fff;
  font-size: var(--small-font-size);
}

/*=============== CONTACT ===============*/
.contact {
  background-color: var(--container-color);
}
.contact_container {
  margin-inline: auto;
  padding-inline: 1rem;
  justify-content: center;
  row-gap: 3rem;
  padding-bottom: 2.5rem;
}
.contact_data {
  text-align: center;
  max-width: 340px;
}
.contact_title{
  color: #fff;
  margin-bottom: 1.5rem;
}
.contact_description {
  margin-bottom: 2.25rem;
  color: var(--container-color-foreground);
}
.contact_image {
  order: -1;
  width: 1005;
  height: auto;
  display: grid;
  justify-items: center;
  overflow: hidden;
}
.contact_image-wrapper {
  aspect-ratio: 1/1;
  width: 300px;
  overflow: hidden;
  position: relative;
}
.contact_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .4s;
}
.contact_image-wrapper:hover .contact_img {
  scale: 1.1;
}
.contact_img-shadow {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, hsla(0,0%,10%,0) 50%, hsl(0,0%,10%) 92%);
  pointer-events: none;
}
/* Contact form */
.contact_form {
  position: relative;
  display: grid;
  row-gap: 1rem;
}
.email_message {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-2rem);
}
.error-message {
  color: var(--error-color);
}
.success-message {
  color: var(--success-color);
}
.contact_input {
  padding-block: 1.25rem;
  padding-inline: 1rem;
  border: none;
  border-radius: .5rem;
}
.contact_input-error {
  color: var(--alert-color);
  font-size: var(--small-font-size);
  position: absolute;
  top: -.75rem;
  right: 1.5rem;
  transform: translateY(-5rem);
}
.contact_button {
  background-color: var(--primary-color);
}

/*=============== FOOTER ===============*/
.footer {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  background-color: var(--container-color);
}
.footer_container {
  display: grid;
  gap: 1.5rem;
  row-gap: 4rem;
}
.footer_brand {
  display: flex;
  flex-direction: col;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.footer_logo-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.footer_logo-img {
  width: 105px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.footer_text {
  display: grid;
  gap: .25rem;
  font-weight: var(--font-semi-bold);
}
.footer_brand2 {
  color: var(--primary-color);
}
.footer_brand1 {
  color: var(--container-color-foreground);
}
.footer_certification {
  width: 120px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  order: -1;
  transform: translateY(.75rem);
}
.footer_content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
.footer_title {
  font-size: var(--normal-font-size);
  margin-bottom: 1rem;
}
.footer_social {
  display: flex;
  column-gap: 1rem;
}
.footer_social-link {
  color: var(--container-color-foreground);
  cursor: pointer;
  transition: transform .4s, color .4s;
}
.footer_social-link:hover {
  color: var(--primary-color);
  transform: translateY(-.25rem);
}
.footer_list {
  display: grid;
  row-gap: .75rem;
}
.footer_info {
  display: grid;
  grid-template-columns: var(--grid-max2);
  justify-self: start;
  gap: .5rem;
  align-items: center;
  color: var(--container-color-foreground);
  font-size: var(--small-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: .4s;
}
.footer_info:hover {  
  color: var(--primary-color);
  transform: translateX(.25rem);
}
.footer_copyright-container {
  text-align: center;
}
.footer_copyright {
  color: var(--container-color-foreground);
  font-size: var(--small-font-size);
  display: inline-block;
  margin-top: 6rem;
  padding: .5rem;
}
.footer_copyright a {
  color: var(--primary-color);
}

/* Scrollup */
.scrollup {
  z-index: var(--z-fixed);
  display: grid;
  gap: 1rem;
  position: fixed;
  right: 1rem;
  bottom: -50%;
  transition: bottom .4s;
}
.scrollup-whatsapp {
  padding: .5rem;
  position: relative;
  cursor: pointer;
  transition: transform .4s;
}
.scrollup-whatsapp img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
}
.scrollup-button {
  padding: .5rem;
  background-color: var(--muted-foreground-color);
}
.scrollup-button i {
  transition: transform .4s;
}
.scrollup-whatsapp:hover, .scrollup-button:hover i {
  transform: translateY(-.25rem);
}

/*=============== MODIFIERS & UTILITIES ===============*/
/* Show menu */
.show-menu {
  top: 0;
}

/* Add blur header */
.blur-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--transparent-color-75);
  backdrop-filter: blur(24px);
  --webkit-backdrop-filter: blur(124px); /* For Safari support */
  z-index: -10;
  box-shadow: var(--shadow);
}
.blur-header .nav_toggle {
  color: var(--foreground-color);
}

/* Active link */
.active-link::after {
  width: 75%;
}

/* Show scroll up button */
.show-scroll {
  bottom: 4rem;
}

@keyframes ripples {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}
.animate-ripples {
  position: absolute;
  /* Se va determinar segun la posicion del click con js */
  /* top: 50%; */
  /* left: 50%; */
  background-color: hsla(0, 0%, 100%, .2);
  transform: translateX(-50%) translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
  animation: ripples 0.6s linear infinite;
}

/*=============== MEDIA QUERIES ===============*/
@media screen and (min-width: 620px) {
  .container {
    max-width: 1280px;
  }
  .section_title {
    text-align: start
  }
  .home_button {
    margin-bottom: 3.5rem;
  }
  .place_content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .place_gallery {
    padding: 1.5rem 0;
  }
  .location_container {
    align-items: center;
  }
  .location_data, 
  .explore_title,
  .explore_description,
  .contact_description {
    text-align: start;
  }
  .location_info-list {
    grid-template-columns: repeat(2, max-content);
  }
  .testimonials_container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .testimonials_container-reviews {
    padding-inline: 0;
  }
  .explore_button {
    transform: translateY(-50%);
  }
  .explore_img {
    width: 100vw;
  }
  .explore_content,
  .contact_container {
    padding-inline: 5rem;
  }
  .contact_container {
    grid-template-columns: var(--grid-a);
    align-items: center;
  }
  .footer {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
  }
  .footer_brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
  }
  .footer_logo-img,
  .footer_certification {
    width: 84px;
  }
  .footer_content {
    row-gap: 2rem;
    column-gap: 4rem;
    grid-template-columns: var(--grid-max2);
  }
  .footer_data-contact {
    grid-column-start: 2;
  }
  .footer_data-support {
    grid-row-start: 2;
  }
  .scrollup {
    right: 3rem;
  }
}

@media screen and (min-width: 1025px) {
  .nav_list {
    display: flex;
    flex-direction: row;
    column-gap: 2.5rem;
    top: 0;
  }
  .nav_link {
    color: #fff;
    flex-direction: row;
    column-gap: 4rem;
  }
  .nav_link::after {
    background-color: #fff;
  }
  .blur-header .nav_link::after {
    background-color: var(--foreground-color);
  }
  .blur-header .nav_link {
    color: var(--foreground-color);
  }
  .nav_close, .nav_toggle {
    display: none;
  }
  .home_content {
    padding-left: 20rem;
    padding-right: 2rem;
  }
  .home_title {
    font-size: 2.5rem;
  }
  .place_gallery {
    padding: 0;
  }
  .place_gallery-slide {
    aspect-ratio: 16/9;
  }
  .location_container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .location_map {
    order: -1;
  }
  .testimonials_container-reviews {
    transform: translateY(5rem);
  }
  .footer_content {
    column-gap: 5rem;
    grid-template-columns: var(--grid-max3);
  }
  .footer_data-useful {
    grid-row-start: 1;
    grid-column-start: 3;
  }
}

@media screen and (min-width: 1280px) {
  .section {
    padding-bottom: 7rem 2rem;
  }
  .section-data {
    padding: 0px
  }
  .location_container {
    grid-template-columns: var(--grid-c);
    column-gap: 7rem;
    padding-block: 1rem;
  }
  .location_description {
    margin-bottom: 3rem;
  }
  .explore {
    margin-top: 12rem;
  }
  .explore_img {
    height: 600px;
  }
  .explore_content {
    padding-top: 24rem;
    grid-template-columns: var(--grid-c);
  }
  .explore_data {
    text-align: start;
  }
  .explore_user {
    justify-content: flex-end;
    align-self: flex-end;
    margin-bottom: 1.25rem;
  }
  .contact_container {
    padding-top: 1rem;
    column-gap: 8rem;
    grid-template-columns: var(--grid-b);
    padding-bottom: 5rem;
  }
  .contact_image-wrapper {
    width: 100%;
  }
  .footer_content {
    grid-template-columns: var(--grid-max4);
  }
  .footer_title {
    margin-bottom: 1.5rem;
  }
  .footer_data-contact {
    grid-row-start: 1;
    grid-column-start: 3;
  }
  .footer_data-useful {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column: span 2 / span 2;
  }
  .footer_data-support {
    grid-row-start: 1;
    grid-column-start: 4;
  }
}

/* persosonalize scroll bar */
::-webkit-scrollbar {
  width: .5rem;
  border-radius: .5rem;
  background-color: hsl(0, 0%, 10%);
}
::-webkit-scrollbar-thumb {
  border-radius: .5rem;
  background-color: hsl(0, 0%, 20%);
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 30%);
}