@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /*COLORS*/
  --lighterblack: #393939;
  --black: #181818;
  --jetblack: #000;
  --vibrant-green: #44cc33;
  --dark-green: #048002;
  --forest-green: #036001;
  --deep-green: #014f00;
  --olive-green: #236a1a;
  --muted-green: #5C8C4F;

  --light-gray: #a8a6a6;
  --medium-gray:#696969;
  --off-white: #f4fcf3;
  --white: #fff;
  --pale-green: #DDF2D8;
  --sage-green: #b5bfb2;
  --moss-green: #6b9663;
  --dusty-green: #6A8C61;

  --charcoal: #292929;

  /*Fonts*/
  --primary-font: "Poppins", "Montserrat", sans-serif;
  --secundary-font: "Open Sans", sans-serif;;
  --decorative-font: 'Courier New', Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: #ececec;
  }
}

li {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

main, body{
  width: 100%;
}

h1, h2, h3, p, span, a, strong, i, b, u, em {
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit; 
  text-decoration: none;
  color: inherit; 
  line-height: 1.5;
}

form,
input,
textarea,
button,
label {
  font-family: inherit;
  font-size: inherit;
  hyphens: auto;
  background-color: transparent;
  display: block;

}

body {
  font-smooth: always;
  min-height: 100vh;
  width: 100vw;
  font-size: 100%;
  font-family: var(--secundary-font);
  line-height: 1.4;
  box-sizing: border-box;
  background-color: #F2F2F2;
}


/*HEADER SECTION*/
.header {
  width: 100%;
  /*padding: 1em;*/
  display: flex;
  flex-direction: column;
  background:#e8e5e5; 
}

/*--LANGUAGE SELECTION--*/
.lang-selection {
  background-color: #494949;
  padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  /* font-size: 1rem; */
}

.dropdown-content.select-dropdown li span {
  color: var(--vibrant-green); 
  font-weight: 600;
  font-size: 1rem; 
  background-color: #444444d1;
}

.dropdown-content.select-dropdown li span:hover {
  color: #ffffff; 
}

.input-field{
  margin: 0;
  position: relative; 
}
/*-- END LANGUAGE SELECTION--*/

/*NAV*/
nav {
  height: 70px;
  background-color: #000000a3; 
}


.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 px;
}

.brand-logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}


.logo img {
  width:70px;
  height: auto;
  margin-right: 10px;
}

.brand-title {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  white-space: nowrap; 
}

.menu-icon {
  font-size: 2em;
}

.user-view{
  height: 180px;
}
/*-- END NAV --*/
/*END HEADER SECTION*/
    

/*MAIN SECTION*/
/*--IMAGE--*/
.img-container {
  width: 100%;
  /* height: 18em; */
  height: 45em;
  /* margin: 0;  */
  background-image: radial-gradient(transparent, #0000008c), url(/Multimedia/Imgs/La_fortuna_waterfall2.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
  display: flex;
  align-items: center;
  color: var(--white);
  margin-top: -72px;
}



.img-header__title{
  font-size: 1.20em;
  text-align: center;
  padding: 5px;
  background: linear-gradient(to right, #004f00a2, #048002ad);   
  border-radius: 0 10px 10px 0;
  width: 80%; 
  box-shadow: 0px 4px 12px #0000006e;
  padding-left: 30px;
}



/*--SERVICES INFO--*/
.services-container{
  display: flex;
  flex-flow: row wrap;
}
.services-container, .testimonials{
  width: 100%;
  margin: auto;
  padding: auto;
}

.services-container{
  max-width: 80%;
}

.services__title{
  font-family: var(--decorative-font);
  text-transform: uppercase;
  font-size: .99em;
  width: 100%;
  margin: 90px 0;
}


.services__subtitle{
  font-size: 1.40em;
  margin-bottom: 80px;
}

.services__paragraph{
  text-align: justify;
  font-size: .99em;
  margin-bottom: 130px;
  line-height: 1.8;
}


/*--CARDS--*/
 .cards{
  width: 100%;
  margin: 50px 0 50px 0;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  gap:20px;
  position: relative;
  
}

.card{
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: white;
  box-shadow: 0px 4px 6px #0000001a; 
  margin-top: 20px;
  }


.card__img {
  margin: 1rem; 
  margin-top: -1.5rem; 
  height: 11rem; 
  overflow: hidden;
  border-radius: 1rem; 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  color: white;
  box-shadow: 0px 4px 6px var(--medium-gray); 
}

.card__img-tours{
  background-image: url(/Multimedia/Imgs/Cascada-azul.jpeg);
}

.card__img-transportation{
  background-image: url(/Multimedia/Imgs/Turismo_Van.jpeg);
}

.card__img-tours:hover, .card__img-transportation:hover, .why-us-section__img:hover{
  transform: scale(1.05);
  transition:  .5s ease-in-out;
}

.card-content {
  padding: .75rem 1.5rem; 
  margin-top: -40px;
}

.card__title, .carousel-title {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.5; 
}

.card-footer {
  padding: 30px; 
  padding-top: 15px; 
}

.card__btn {
  background-color: var(--moss-green);
  font-family: var(--decorative-font);
  font-weight: 700; 
  text-transform: uppercase;
  color: white;
  box-shadow: 0px 4px 6px var(--sage-green); 
  transition: all 0.3s linear ;
}

.card__paragraph, .services__paragraph, .testimonials__paragraph{
  text-align: justify;
}


.card__btn:hover, .why-us-section__btn a:hover, .cta__btn a:hover{
  background-color: var(--white);
  color: var(--dark-green);
  transform: scaleX(1.05);
  border: 1px solid var(--forest-green);
}

/*--END CARDS--*/   
/*--END SERVICES INFO--*/
    
.why-us-section{
  background-color: var(--sage-green);
  padding: 40px 5px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s linear ;
  margin: 90px 0;
}


.why-us-section .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.why-us-section__title, .card__title, .services__subtitle, .testimonials__title, .cta__title, .img-header__title{
  font-family: var(--primary-font);
  font-weight: 500;
}
  
.why-us-section__img{
  border-radius: 5px 25px;
  /* border-radius: 0px 100%; */
  /* border-radius: 100%; */
  box-shadow: 2px 2px 10px var(--lighterblack);
}

.why-us-section__btn a{
background-color: var(--deep-green);
padding: 10%;
box-shadow: 0px 4px 8px var(--light-gray); 
color: var(--white);
}


.why-us-section__paragraph{
  width: 100%;
  margin-bottom: 30px;
  text-align: justify;
  line-height: 1.7;
}
.why-us-section__btn a, .card__btn {
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem; 
  font-size: 1em; 
  font-weight: bold;
  transition: all 0.3s linear;
}

.why-us-section__btn{
  display: flex;
  justify-content: center;
}

.why-us-section__title,  .why-us-section__img{
  margin-bottom: 10%;
}
.why-us-section__title, .services__title, .services__subtitle,  .testimonial-header{
  text-align: center;
}


.decorative__item{
  background-color: var(--black);
  height: .15em;
}

.item--long-line{
  margin: 5% auto;
  width: 90%;
}

.item--short-line{
  margin: 0 10%;
}

.testimonial-header{
  /* margin: 5% 0; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-us-section__title, .testimonials__title{
  font-size: 1.20em;
}

.why-us-section__title, .testimonials__title, .services__title{
  padding: 5% 0;
}


.testimonials {
  
  background: 
    linear-gradient(135deg, #dbdadacc 25%, transparent 25%) 0 0,
    linear-gradient(225deg, #bfbfbf3b 25%, transparent 25%) 0 0,
    linear-gradient(315deg, #dbdadacc 25%, transparent 25%) 0 0,
    linear-gradient(45deg, #bfbfbf3b 25%, transparent 25%) 0 0;

 
}
.carousel{
  height: 450px;
  padding: 40px 0;

}


.carousel .carousel-item{
  width: 235px;  
  margin: auto;
  z-index: 1;
}

.carousel .indicators .indicator-item{
  border-radius: 0;
  transform: rotate(45deg);
  margin: 0 15px;
  background-color: var(--dusty-green);
}

.carousel .indicators .indicator-item.active{
  background-color: var(--dark-green);
}

.content{
  background-color: #dfdddd;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  height:300px;
  padding: 2px;
  border-radius: 25px;
  color: rgb(0, 0, 0);
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}

.content:hover {
  transform: scale(1.05);
}
.carousel-title{
  font-family: var(--primary-font);
  color: var(--olive-green);
  font-weight: bolder;
}

.carousel-paragraph{
  font-size: .95em;
  text-align: justify;
  padding: 0 20px;
}

.social-tripadvisor{
  display: flex;
  justify-content: center;
  margin: 90px 0 50px 0;
}

/*--END TESTIMONIALS--*/


/*--CTA's--*/
.card.horizontal{
  margin: auto;
  position: relative;
  bottom: -5em;
  z-index: 2;
  padding: 5px 0 20px; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.cta__title{
  text-align: center;
}

.cta__btn a{
  border-radius: 50px;
  padding: 4% 6%;
  background-color: var(--olive-green);
  color: var(--white);
  font-weight: bold;
  transition: all 0.3s linear ;
}

.btn-whatsApp img{
  position:fixed;
  width:60px;
  height:60px;
  bottom:25px;
  right:15px;
  filter: drop-shadow(0px 1px 10px #0000004d);
  z-index:5;
  animation: btn-whatsApp_movement 0.9s infinite alternate;
}

@keyframes btn-whatsApp_movement {
  from{transform:translateY(0)}
  to{transform: translateY(-10px);}
}
/*END MAIN SECTION*/

/*FOOTER SECTION*/
.footer{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: var(--charcoal);
  color: var(--white);
  position: relative;
}

.footer-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 90px 20px 20px;
}

.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  width: 100%;
}
.contact-phone, .contact-email, .customer-service-hours{
  display: flex;
  width: 100%;
}
.contact-phone{
  border-top: 2px solid var(--jetblack);
}
.customer-service-hours{
  border-bottom: 2px solid var(--jetblack);
}

.contact__img{
  margin-right: 9px;
  width: 20px;
  height: 19px;
}

.customer-service-hours, .contact-phone{
  padding: 10px 0;
}

.company-summary p{
  text-align: justify;
}

.footer-company-name{
  margin-bottom: 10px;
}

  
.nav-left{
  margin-top: 10px;
}

.footer-nav, .footer-social, .company-summary, .footer-bottom{
  width: 100%;
}
.footer-nav ul li {
  margin-bottom: 10px; 
}

.footer-bottom{
  background-color:#181818;
  padding: 20px 0;
  font-size: .80em;
}

.footer-bottom__paragraph{
  text-align: center;
}

.footer-social ul{
  display: flex;
  justify-content: space-evenly;
  margin: 30px 0 0;
}

.social__img{
  width: 30px;
  margin-bottom: 20px;
}

.tripadvisor-logo-black{
  filter: invert(1);
}

.footer-contact, .footer-nav, .company-summary{
  /* min-width: 200px;  */
  margin: 10px;
}

.footer-company-name:hover, .company-summary__paragraph:hover, .footer-contact__title:hover, .phone-number:hover,.email:hover, .Opening_Hours:hover, .footer-nav a:hover, .footer-bottom__paragraph:hover, .footer-links:hover, .footer-links a:hover{
  color:var(--vibrant-green);
}

.contact__img:hover{
  filter: invert(.45);
}

/* .testimonials a > img{
  margin:  auto;
} */

.footer-nav .nav-left,
.footer-nav .nav-right {            
  background-color: var(--charcoal);
  box-shadow: none;
}

.footer-nav ul{
  display: flex;
  flex-direction: column;
}

.nav-right{
  margin-top: 70px;
}



/* Animations */
.hidden {
  opacity: 0;
  filter: blur(1px);
  transition: all 1s;
}


.hidden {
  opacity: 0;
  filter: blur(1px);
  transition: all 1s;
}

.hidden.card-transportation {
  transform: translateX(-100%); 
}

.hidden.card-tours {
  transform: translateX(100%);
}
.show.card-transportation {
  opacity: 1; 
  filter: blur(0);
  transform: translateX(0); 
}

.show.card-tours {
  opacity: 1; 
  filter: blur(0);
  transform: translateX(0); 
}

 
.nav-links li a {
  position: relative;
  transition: color 0.3s ease;
}

/* Efecto hover */
.nav-links li a::before {
  content: '';
  position: absolute;
  background-color: #0fc10c92;
  width: 0; 
  margin-left: 15px;
  height: 3px;
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
}

/* Animación en hover */
.nav-links li a:hover::before {
  width: 60%; 
  
}


@media (prefers-reduced-motion) {
  .hidden {
      transition: none;
  }    
}


@media screen and (min-width:550px){
  /*--LANGUAGE SELECTION--*/
  .lang-selection {
    font-size: 1.50rem;
  }
  
  .sidenav-overlay{
   z-index: 4;
  } 

  .dropdown-content.select-dropdown li span {
    font-size: 1.50rem; 
  }

  /*--END LANGUAGE SELECTION--*/

  /*--NAV--*/
  nav{
    height: 90px;
  }

  .logo img {
  width:90px;
  margin-right: 5px;
  }

  .brand-title {
  font-size: 1.60em;
  }
  
  .menu-icon {

  font-size: 2.10em;
  }

  .sidenav{
    width: 350px;
  }

  .sidenav li a{
    font-size: 1.20em;
  }

  .background img{
    width: 220px;
  }
  /*--END NAV--*/

  .header {
    z-index: 5;
    position: fixed;
    top: 0; 
    width: 100%;
    background-color: #e8e5e533; 
  }

  /*IMG*/
  .img-container {
    height: 80em;
}

  .img-header__title{
    width: 80%; 
    font-size: 2em;
    padding-left: 60px;
    margin-top: 40%;
  }
   /*END IMG*/

  /*SERVICES INTRODUCTION*/
  .services-container{
    max-width: 85%;
    padding: 5% 2% 3%;
  }

  .services__title{
    font-size: 1.50em;
  }

  .services__subtitle, .why-us-section__title, .testimonials__title{
    font-size: 2em;
  }

  .services__paragraph{
    text-align: justify;
    margin-bottom: 30px;
  }

  /*CARDS*/
  .cards{
    display: flex;
    flex-flow:  nowrap;
    margin-top: 3.50em;
    gap: 40px;
  }

  .card__img{
    height: 13rem; 
  }
  
  .card__title, .carousel-title {
    font-size: 1.55em; 
  }

  .card__paragraph, .services__paragraph, .why-us-section__paragraph, .testimonials__paragraph{
    font-size: 1.50em;
  }
  /*END CARDS*/

  /*END SERVICES INTRODUCTION*/
  .why-us-section__btn, .card__btn, .cta__btn{
    padding: 0.90rem 1.50rem; 
    font-size: 1.40em; 
    margin: 5% 0;    
  }

  /*--TESTIMONIES SECTION--*/
  
  .item--long-line{
    width: 80%;
    margin: 3% auto;
  }
 
  .item--short-line{
    margin: auto;
    width: 70%;
  }
 
  .carousel {
    height: 500px; 
    width: 100%; 
    /* margin:  auto;  */
    perspective: -200px;
  }

  .carousel .carousel-item {
    width: 420px;   
  }

  .carousel .indicators .indicator-item {
    width: 10px;
    height: 10px;
  }

  .carousel-paragraph{
    font-size: 1.20em;
  }

  .social-tripadvisor{
    margin-top: 10%;
  }

  .tripadvisor-logo-black{
    width: 3em;
  }
  /*--END TESTIMONIALS--*/

  /*CTA*/  
.card.horizontal{
  bottom: -14em;
  width: 80%;
}

.cta__btn{
  width: 60%;
}

.cta__btn, .cta__title{
  font-size: 1.70em;
  text-align: center;
}  
  .btn-whatsApp img{
    width:70px;
    height:70px;
    bottom: 20px;
  }
  /*END CTA*/

  /*FOOTER*/
  .footer{
    margin-top: 5em;
  }

  .footer-container{
    padding: 180px 60px 30px;
  }

  .footer-contact{
    gap: 20px;
    padding: 40px 0;
  }

  .contact__img{
    width: 35px;
    height: 35px;
  }

  .contact__img{
    margin-right: 20px;
  }

  .footer-company-name, .footer-contact__title, .footer-links{
    font-size: 1.65rem;
  }

  .footer-bottom__paragraph{
    text-align: center;
  }

  .footer-social ul{
    display: flex;
    justify-content: space-evenly;
    /* margin: 30px 0 0; */
  }

  .social__img{
    width: 45px
  }

  .footer-nav li > a{
    font-size: 1.55rem;
  }

  .company-summary__paragraph, .phone-number, .email, .Opening_Hours, .links-container nav ul li a, .footer-bottom__paragraph{
    font-size: 1.35em;
  }

  .links-container{
    display: flex;
    gap: 10%
  }

  .nav-right{
    margin-top: 0;
  }

  .footer-nav{
    height: 15em;
  } 
}
    
@media screen and (min-width:1000px){

   /*--LANGUAGE SELECTION--*/
   .lang-selection {
    padding: 0em 0.70em;
    font-size: .50rem;
  }
  
  .dropdown-content.select-dropdown li span { 
    font-size: 1rem; 
  }
  /*--END LANGUAGE SELECTION--*/

  /*--NAV--*/
  nav{
    height: 70px;
  }

  .nav-wrapper li a{
    font-size: 1.4em;
  }

  .logo img {
    width:200px;
    margin-top: 50px;
    margin-left: 20px;
  }

  .brand-title {
    font-size: 1.8em;
  }
  /*--END NAV--*/
 
  /*IMG*/
  .img-container {
    height: 65em;
    background-position: top;
  }

  .img-header__title{
    width:70%; 
    font-size: 2.25em;
    padding: 20px 30px 0;   
  }
  /*END IMG*/

  
  /*SERVICES INTRODUCTION*/
  .services-container{
    display: flex;
    justify-content: center;
    margin: auto 50px;
  }
  .services__title{
    margin-bottom: -20px;
  }
 
  /*CARDS*/
  .cards{
    width: 90%;
  }

  .card__img{
    height: 15rem; 
  }

  .card-footer-transportation{
    margin-top: 0em;
  }
   /*END CARDS*/
  /*END SERVICES INTRODUCTION*/

 .why-us-section__title{
    padding: 2% 0;
  }

  .why-us-section__img{
    width: 80%;
    }


  /*--TESTIMONIES SECTION--*/  
  .testimonials {
    background: 
      linear-gradient(135deg, #dbdadacc 30%, transparent 30%) 0 0,
      linear-gradient(225deg, #bfbfbf3b 30%, transparent 30%) 0 0,
      linear-gradient(315deg, #dbdadacc 30%, transparent 30%) 0 0,
      linear-gradient(45deg, #bfbfbf3b 30%, transparent 30%) 0 0;
  }
    .item--long-line{
      width: 70%;
    }

    .item--short-line{
      width: 50%;
    }

  .carousel {
    height: 750px; 
    perspective: -100px;
    margin-top: -100px;
  }

  .carousel .carousel-item {
    width: 420px;  
  }

  .content{
    height:300px; 
  }
  
  .social-tripadvisor{
    margin-bottom: 2%;
  }
  /*--END TESTIMONIALS--*/

  .footer{
    margin-top: 5em;
    display: flex;
    align-items: center;
  }

  .footer-container{
    padding: 180px 0 40px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 50px;
    width: 90%;
  }

  .contact__img{
    width: 25px;
    height: 25px;
    margin-right: 30px;
  }

  .footer-company-name, .footer-contact__title, .footer-links{
    font-size: 1.40rem;
    margin: 0;
  }

  
  .company-summary{
    height: 200px;
  }
  
  .card__paragraph, .services__paragraph, .why-us-section__paragraph, .testimonials__paragraph{
    font-size: 1.30em;
  }
    
  .company-summary__paragraph, .phone-number, .email, .Opening_Hours, .links-container nav ul li a, .footer-bottom__paragraph{
    font-size: 1.20em;
  }
  .company-summary__paragraph{
    margin-top: 20px;
  }

  .footer-bottom{
    padding: 25px 0;
    font-size: .99rem;
  }
  
  
  .footer-social{
    width: 50%;
  }

  .footer-social ul{
    display: flex;
    justify-content: space-evenly;
    /* margin: 30px  0; */
  }
  
  .social__img{
    width: 45px;
    margin-bottom: 30px;
  }
   
  .footer-nav li > a{
    font-size: 1.55rem;
  }

  main, body{
    width: 100%;
  }
}

@media screen and (min-width:2200px){ 
  .img-container {
    height: 95em;
    background-position: center;
  }   
}