@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;1,100&display=swap");

/*=========VARIABLES*/
:root {
  --rojo_magical: #f97316;/*footer*/
  --azul_celeste: #2e8b57;/*barra abajo*/
  --naranja: #e63946;/*barra arriba*/
  --verde_claro: #C0C8F2;
  --azul_celestev2: #f97316;
  --azul_fuerte: #e63946;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  box-sizing: border-box;
}

/*==============GENERAL CLASS=======*/
.bg-orange {
  background-color: var(--naranja);
  height: 22px;
}

.bg-blue {
  background-color: var(--azul_celeste);
  height: 22px;
  margin-bottom: 80px;
}

.btn_book_tour {
  background-color: #fff;
  color: var(--naranja);
  font-weight: 600;
  border: none;
  outline: none;
}

.btn_book_tour:hover {
  background-color: #fff;
  background-color: #fff;
  color: var(--naranja);
  font-weight: 600;
  border: none;
  outline: none;
}

a {
  text-decoration: none;
}

.box-shadow-col {
  padding: 20px;
  border-radius: 7px;
  margin: 6px;
  border: 1px solid #e0d9d9;
}

.title_key {
  color: var(--naranja);
  /* font-size: 16px; */
  margin: 0;
}

.subtitle_one {
  color: #444444;
  /* font-size: 40px; */
  font-weight: 700;
  margin: 0;
}

/*==========END GENERAL CLASS=========*/
/*==========NAVBAR==================*/
.navbar-nav {
  margin-left: auto !important;
}

.navbar-nav .nav-item .nav-link {
  margin-right: 10px;
}

.navbar-nav .nav-item:nth-child(1) .nav-link:hover {
  border-bottom: 2px solid var(--azul_celeste);
  /* Estilo para el primer enlace */
}

.navbar-nav .nav-item:nth-child(2) .nav-link:hover {
  border-bottom: 2px solid var(--naranja);
  /* Estilo para el primer enlace */
}

.navbar-nav .nav-item:nth-child(3) .nav-link:hover {
  border-bottom: 2px solid var(--rojo_magical);
  /* Estilo para el primer enlace */
}

.navbar-nav .nav-item:nth-child(4) .nav-link:hover {
  border-bottom: 2px solid var(--azul_celestev2);
  /* Estilo para el primer enlace */
}

/*=============END NAVBAR==========*/
/*===================INDEX====================*/
.portada {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  height: 80vh;
 /* background-position-y: -43px;*/
}

.portada::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
}

.title_port {
  position: absolute;
  text-align: center;
}

.title_home {
  font-size: 2.3rem;
  text-align: center;
  color: #ffff;
  font-weight: 800;
  margin-bottom: 50px;
}

.p_tittle_port {
  font-size: 1rem;
  color: #ffff;
  font-weight: 700;
  margin: 10px 0 40px 0;
}

.btn-book {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn_tours {
  background-color: var(--naranja);
  border: none;
  padding: 10px;
}

.btn_tours:hover {
  border-radius: 20px 0;
  background-color: var(--naranja);
  color: #ffff;
}

.top_tours {
  text-align: center;
  color: var(--azul_celeste);
  font-weight: 600;
  margin: 30px;
}

.img_top_tours {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.magic_top .card {
  border: none;
  background-color: rgb(245, 242, 242);
}

.magic_top .card .card-body {
  padding: 17px;
}

.magic_top .card-title {
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: 600;
}

.magic_top .tour_one .card-title,
.magic_top .tour_three .card-title {
  color: var(--naranja);
}

.magic_top .tour_two .card-title {
  color: var(--azul_celeste);
}

.magic_top .card-text {
  font-size: 14px;
  color: #4f4d4d;
}

.promotion_tour {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46vh;
  background-size: cover;
  background-repeat: no-repeat;
  /*background-position-y: -375px;*/
  margin: 40px 0;
}

.title_promotion {
  color: #ffff;
  font-weight: 800;
  text-align: center;
}

.text_promotion {
  color: #ffff;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

.tour_promotion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title_tour_promotion {
  color: #ffff;
  font-size: 16px;
  text-align: center;
}

.all_tours {
  padding: 40px 0;
}

.all_tours_title {
  color: var(--rojo_magical);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}

.all_tours .col-lg-3 {
  margin: 0;
  padding: 0;
}

.all_tours .card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
}

.all_tours .card::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.35);
}

.all_tours .card .text {
  padding: 30px;
}

.all_tours .card .title_card {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}

.all_tours .card img {
  flex: 1;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.all_tours .card .card-text-front {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.all_tours .card .card-text-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  width: 100%;
  opacity: 0;
  background-color: var(--naranja);
  color: #ffff;
  height: 100%;
  transition: opacity 0.3s ease;
}

.all_tours .card .card-text-back .text ul li {
  font-size: 15px;
  font-weight: 600;
}

.tour_link {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}

.all_tours .card:hover .card-text-front {
  opacity: 0;
}

.all_tours .card:hover .card-text-back {
  opacity: 1;
}

/*=================END INDEX=================*/
/*==========FOOTER=============*/
.footer_section {
  margin-top: 30px;
  display: flex;
  align-items: center;
  min-height: 30vh;
  background-color: var(--rojo_magical);
  color: #fff;
  padding: 50px 0 20px 0;
}

.footer_section .p_footer,
.footer_section .list_contact,
.footer_section form {
  margin-top: 20px;
}

.title_footer {
  font-size: 20px;
  font-weight: 800;
  padding-bottom: 20px;
  color: #ffff;
}

.brand-section {
  background-color: var(--rojo_magical);
}

.newsletter {
  margin-bottom: 20px;
}

.newsletter form input,
.newsletter form button {
  margin-bottom: 20px;
}

.newsletter form input {
  width: 100%;
  padding: 10px;
  border: none;
}

.newsletter form button {
  background-color: var(--azul_celestev2);
  border: none;
  outline: none;
  color: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

.brand-section .social-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.brand-section .social-icons i {
  margin: 10px;
}

.brand-section .container {
  border-top: 1px solid #fff;
}

.brand-section small a {
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.contact_links ul {
  list-style: none;
  padding-left: 1rem;
}

.contact_links ul li {
  margin-bottom: 10px;
}

.contact_links ul li i {
  margin-right: 5px;
}

/*=============END FOOTER*/
/*==================ABOUT========================*/
.about_banner {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  height: 20vh;
  margin-bottom: 40px;
  /*background-position-y: -350px;*/
}

.about_banner .title_key {
  font-size: 16px;
  color: #ffffff;
}

.about_banner::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.content_banner {
  z-index: 2;
}

.content_banner .title_about {
  color: #fff;
  font-size: 60px;
  font-weight: 600;
}

.why_magical {
  padding: 0;
  margin-bottom: 40px;
}

.why_magical .col-xl-4 {
  width: 31% !important;
}

.why_magical .box-shadow-col p {
  font-size: 16px;
}

.why_magical .title_key {
  font-size: 16px;
}

.why_magical .subtitle_one {
  text-align: start;
  font-size: 30px;
  margin-left: 10px;
}

.why_magical h2.subtitle_one {
  font-size: 20px;
}

.pro_magical .title_key {
  font-size: 16px;
}

.pro_magical .subtitle_one {
  font-size: 34px;
  margin-bottom: 20px;
}

.why_magical i,
.pro_magical i {
  font-size: 40px;
  color: var(--naranja);
}

.pro_magical .title_pro {
  font-size: 20px;
  font-weight: 700;
  color: #444444;
  margin-left: 10px;
}

/*================END ABOUT========================*/
/*=============START TOURS*/
.tours-page .title_about {
  font-size: 50px;
}

.tours-page .about_banner::after {
  background-color: rgba(0, 0, 0, 0.5);
}

.section-tours-list .card {
  border-radius: 20px;
  margin-bottom: 40px;
  min-height: 630px;
}

.section-tours-list .card .img-tour {
  border-radius: 20px 20px 0 0;
}

.section-tours-list .card .golden-tour {
  position: absolute;
  width: 30%;
  top: 38%;
  right: 0;
}

.section-tours-list .card-body {
  padding: 10px 20px;
}

.section-tours-list .card-title {
  color: #292828;
  width: 70%;
  font-size: 25px;
  font-weight: 600;
}

.section-tours-list .card-text {
  font-size: 16px;
  color: #5a5a5a !important;
}

.icon-container {
  margin-right: 20px;
}

.pro-tours i {
  font-size: 16px;
  color: var(--rojo_magical);
}

.pro-tours .votes-tours {
  color: #000;
  margin-left: 10px;
  font-size: 16px;
}

.pro-tours small {
  color: #000;
  margin-left: 10px;
}

.card-footer {
  border: none;
  background-color: transparent;
}

.price-tours .person-tours {
  font-size: 12px;
}

.price-tours .value-tour {
  font-size: 26px;
  font-weight: 700;
}

.price-tours .cash-tour {
  color: var(--rojo_magical);
  font-size: 12px;
}

.tour_card .card {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
}

.tour_card .card:hover {
  transform: translateY(-10px);
}

.section-tours-list .card:hover .card-title {
  color: var(--rojo_magical);
}

.section-tours-list .card:hover .pro-tours i {
  color: var(--azul_celeste);
}

/*END TOURS*/
/*=============details tours=============*/
/* .page-details #gallery-tours .item img {
  width: 100%;
  max-height: 100vh;
  object-fit: cover;
  object-position: center top;
} */

.head-title-price-tour .name-tour {
  padding-top: 10px;
  border-bottom: 1px solid var(--azul_fuerte);
}

.head-title-price-tour .name-tour .tour_name {
  font-size: 40px;
  font-weight: 700;
}

.head-title-price-tour .icons-tours i {
  margin: 10px 0 10px 10px;
  color: var(--naranja);
}

.head-title-price-tour .content-price {
  /* 
  /*background-color: rgb(240, 238, 238);*/
  /* */
  background-color: rgb(240, 238, 238);; /* o el gris que uses */
  padding: 20px;
  border: 1px solid #f9f9f9;
  border-radius: 10px;
  max-height: fit-content;
  width: 80%;
}

.head-title-price-tour .content-price .prices {
  padding: 10px 30px 10px 30px;
}

.head-title-price-tour .content-price .title-price {
  display: flex;
  flex-direction: column;
  color: #474747;
  font-size: 18px;
  font-weight: 600;
}

.head-title-price-tour .content-price .value-price {
  font-size: 30px;
  font-weight: 700;
  color: var(--naranja);
}

.value-price small {
  font-size: 12px;
}
.title_tours_description{
  font-size: 25px!important;
  font-weight: 700;
  color: #000;
  margin-top: 10px;
}
.btn-book-now {
  display: flex;
  align-self: flex-end;
  background-color: var(--azul_fuerte);
  width: 100%;
  border: none;
}

.btn-book-now:hover {
  background-color: var(--rojo_magical);
}

.details-content-tour {
  margin-bottom: 40px;
}

.description-tour {
  padding-bottom: 40px;
}
.description-tour h2{
  font-size: 22px;
  font-weight: 700;
}
.details-content-tour .accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--azul_fuerte);
}

.details-content-tour .accordion .accordion-item:first-child {
  border-top: 1px solid var(--azul_fuerte);
}

.details-content-tour .accordion .accordion-item:last-child {
  border: none;
}

.details-content-tour .accordion .accordion-item .accordion-button:focus {
  border-color: none;
  box-shadow: none;
}

.accordion-button {
  color: var(--naranja);
  font-size: 18px;
  font-weight: 600;
}

.details-content-tour .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: var(--azul_fuerte);
}

.details-content-tour .accordion-button:not(.collapsed)::after {
  background-image: none;
}

.details-content-tour .accordion-button::after {
  background-image: none;
}

/*===========end details tours*/

/*boot tours*/
.form-fields-book{
  background-color: var(--naranja);
  padding: 30px;
  border-radius: 20px;
  color: #fff;
}
.title-form{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}
.title-form span{
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  text-align: center;
}
.main-book-tour{
  margin-bottom: 40px;
}
.book-form .form-group  label{
  padding-top: 20px;
  font-size: 18px;
}
.book-form .form-group input{
  border-radius: 10px;
  border: none;
  outline: none;
}
.iti{
  width: 100%;
}
.book-form .btn-book{
  background-color: #fff;
  width: 50%;
  border: none;
  border-radius: 20px;
  color: var(--naranja);
  padding: 10px 20px;
}

/*end book tours*/

/*checkout-tours*/
.cart-list-items .card{
  border-radius: 20px;
  box-shadow: -2px 6px 31px -4px rgba(231, 230, 230, 0.79);
}
/*end checkout-tours*/
/*terms h2*/

.sub-title-terms{
  margin: 10px 0;
   font-weight:600;
   font-size:22px;
}
/*end terms h2*/
/*MEDIAS*/

/*Pantallas Medianas*/
@media (min-width: 949px) and (max-width: 1279px) {
  /*=============================INDEX==============================*/
  .portada {
    max-height: 45vh;
  }

  .img_top_tours {
    height: 250px;
  }

  /*=============================END INDEX==============================*/
  /*===========START ABOUT*/
  .about_banner {
    max-height: 40vh;
    background-position-y: -100px;
  }

  /*=============END ABOUIT=============*/
}

@media (min-width: 951px) and (max-width: 1024px) {
  /*=============================INDEX==============================*/
  .promotion_tour {
    min-height: 30vh;
    background-position-y: -37px;
  }

  /*=============================END INDEX==============================*/
  /*=======Tours=========*/
  .section-tours-list .card .golden-tour {
    top: 25%;
  }

  .section-tours-list .card-title {
    margin-top: 15px;
    font-size: 27px;
  }

  /*ENd Tours=======*/
}

/*/MEdia general para dispositivos medianos*/
@media (max-width: 950px) {
  /*=============================INDEX==============================*/
  .img_top_tours {
    height: 250px;
  }

  .promotion_tour {
    position: relative;
  }

  .promotion_tour::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .content_promotion_tour {
    z-index: 2;
  }

  .why_magical .col-lg-6 {
    width: 48% !important;
  }

  .why_magical .col-lg-12 {
    width: 100% !important;
  }

  /*=============================END INDEX==============================*/
}

/*End media general*/

@media (min-width: 801px) and (max-width: 950px) {
  /*=============================INDEX==============================*/
  .promotion_tour {
    min-height: 30vh;
    background-position: center;
    /*=============================END INDEX==============================*/
  }
}

@media (min-width: 766px) and (max-width: 900px) {
  /*=============================INDEX==============================*/
  .portada {
    max-height: 35vh;
  }

  /*=============================END INDEX==============================*/
  /*==========START ABOUT============**/
  .about_banner {
    max-height: 30vh;
    background-position-y: -10px;
  }
}

@media (min-width: 601px) and (max-width: 800px) {
  /*=============================INDEX==============================*/

  .promotion_tour {
    min-height: 25vh;
    background-position: center;
  }

  /*=============================END INDEX==============================*/
}

@media (min-width: 601px) and (max-width: 767px) {
  .magic_top .container {
    max-width: 90%;
  }

  /*==========START ABOUT============**/

  .about_banner .title_about {
    font-size: 50px;
  }

  .why_magical .col-md-12 {
    width: 100% !important;
  }

  /*==========END ABOUT============**/
  /*=======Tours=========*/
  .section-tours-list .card .golden-tour {
    top: 40%;
  }

  .section-tours-list .card-title {
    font-size: 35px;
  }

  /*ENd Tours=======*/
}

@media (max-width: 600px) {
  /*=================INDEX===================*/
  .portada {
    max-height: 70vh;
    background-position: center;
  }

  .promotion_tour {
    min-height: 35vh;
    background-position: center;
  }

  .brand-section small a {
    font-size: 10px;
  }

  /*=======================END INDEX===========*/
  /*==========START ABOUT============**/
  .about_banner {
    max-height: 30vh;
    background-position-y: -10px;
  }

  .about_banner .title_about {
    font-size: 30px;
  }

  .why_magical .col-sm-12 {
    width: 100% !important;
  }

  /*==========END ABOUT============**/
  /*=======Tours=========*/
  .section-tours-list .card .golden-tour {
    top: 40%;
  }

  .section-tours-list .card-title {
    font-size: 35px;
  }

  /*ENd Tours=======*/
}

@media (min-width: 385px) and (max-width: 431px) {
  /*=======Tours=========*/
  .section-tours-list .card .golden-tour {
    top: 35%;
  }

  .section-tours-list .card-title {
    font-size: 25px;
  }

  /*ENd Tours=======*/
}

@media (max-width: 384px) {
  /*=================INDEX===================*/
  .content_promotion_tour {
    margin: 40px 0;
  }

  .brand-section small a {
    font-size: 9px;
  }

  /*=======================END INDEX===========*/
  /*=======Tours=========*/
  .section-tours-list .card .golden-tour {
    top: 30%;
  }

  .section-tours-list .card-title {
    font-size: 25px;
  }

  /*ENd Tours=======*/
}