/*!
Theme Name: Qarabonita Theme
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */
:root {
    --primary   : #1E1E1E;
    --primary-2 : #F9C16C;
    --primary-3 : #F2A5BB;
    --primary-4 : #C2E1CE;

    --secondary-1: #FCE0B5;
    --secondary-2: #F8D2DD;
    --secondary-3: #E0F0E7;
    
    --neutral-1000: #333333;
    --neutral-900: #4A4A4A;
    --gris-claro: #F5F5F5;
    --neutral-200: #e8e8e8;
      
    --border-radius : 15px;
  
    --h1-size-movil : 24px;
    --h1-size-tablet-vert : 30px;
    --h1-size-tablet : 40px;
    --h1-size-laptop : 48px;
  
    --h2-size-movil : 24px;
    --h2-size-tablet-vert : 30px;
    --h2-size-tablet : 40px;
    --h2-size-laptop : 48px;
  
    --swiper-theme-color : #FF8B00;
    --swiper-navigation-size: 44px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
    --swiper-navigation-color: #FF8B00;
  }
  /*Secciones*/
.section_content{
  padding: 20px 20px!important;
  margin: 0!important;
  height: auto!important;
}

@media (min-width: 476px){
  .section_content{
    padding: 30px 25px!important;
    margin: 0!important;
  }
}
@media (min-width: 768px){
  .section_content{
    padding: 50px 30px!important;
    margin: 0!important;
  }
}
@media (min-width: 992px){
  .section_content{
    padding: 55px 30px!important;
    margin: 0!important;
  }
}
@media (min-width: 1200px){
  .section_content{
    padding: 60px 10px!important;
    margin: 0!important;
  }
}
@media (min-width: 1500px){
  .section_content{
    padding: 80px 10px!important;
    margin: 0!important;
  }
}
  /* .menu-titulo{

  } */

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    
    text-transform: uppercase;
    
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  
  text-transform: uppercase;
  
}

/*Contact US*/

#form-contact label{
  color: var(--neutral-1000)!important;
  font-size: 14px!important;
  font-weight: bold !important;
}

#form-contact form input[type="text"],
#form-contact form input[type="email"],
#form-contact form input[type="date"],
#form-contact form input[type="number"],
#form-contact form input[type="email"]:invalid,
#form-contact form input[type="email"]:valid,
#form-contact form input[type="tel"],
#form-contact form select,
#form-contact form textarea,
#form-contact .cf7b-group-tours
{
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background-color: var(--neutral-200)!important;
  border: solid 1px var(--neutral-1000);
  border-radius: 5px;
  color: var(--neutral-1000);
}
#form-contact form textarea{
  height: 150px;
}

/* #form-contact form textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
  height: 200px;
  background-color: var(--bgcolor-fields);
  border-color: black;
  color: #000;
  border-radius: 5px;
} */

#form-contact p{
  margin-bottom: 0;
} 

/* Header Paginas*/

.container-header {
  height: 350px!important; /* Altura predeterminada para móviles */
}
.container-header_titulo{
  margin-bottom: 70px!important;
}
.container-header_titulo h1{
  color: white!important;
  font-size: 28px!important;
  line-height: 32px!important;
  text-align: center!important;
}

/* Tablets en orientación vertical (≥ 768px) */
@media (min-width: 768px) {
  .container-header {
    height: 400px!important;
  }
  .container-header_titulo{
    margin-bottom: 100px!important;
  }
  .container-header_titulo h1{
    color: white!important;
    font-size: 35px!important;
    line-height: 39px!important;
  }
}

/* Tablets en horizontal y pantallas pequeñas (≥ 1024px) */
@media (min-width: 1024px) {
  .container-header {
    height: 350px!important;
  }
  .container-header_titulo{
    margin-bottom: 100px!important;
  }
  .container-header_titulo h1{
    color: white!important;
    font-size: 45px!important;
    line-height: 49px!important;
  }
}

/* Escritorios y pantallas grandes (≥ 1280px) */
@media (min-width: 1280px) {
  .container-header {
    height: 400px!important;
  }
  .container-header_titulo{
    margin-bottom: 100px!important;
  }
  .container-header_titulo h1{
    color: white!important;
    font-size: 55px!important;
    line-height: 59px!important;
  }
}
/* Escritorios y pantallas grandes (≥ 1550px) */
@media (min-width: 1550px) {
  .container-header {
    height: 450px!important;
  }
  .container-header_titulo{
    margin-bottom: 100px!important;
  }
  .container-header_titulo h1{
    color: white!important;
    font-size: 60px!important;
    line-height: 64px!important;
  }
}




.qara-social-media {
  display: flex;
  flex-direction: row; /* Alinear en columna */
  gap: 10px;
}

.qara-follow {
  display: flex;
  flex-direction: column; /* Alinear en fila */
  gap: 10px;
}

.qara-social-media a, .qara-follow a {
  position: relative;
  text-decoration: none;
  white-space: nowrap; /* Para evitar que el texto se divida */
}


/* Estilos base para los enlaces */
.icon-qara {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* Estilos para el tooltip */
.qara-tip {
  visibility: hidden;
  width: max-content;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 4px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Posición arriba del enlace */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Flecha debajo del tooltip */
.qara-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Mostrar el tooltip al pasar el ratón */
.icon-qara:hover .qara-tip {
  visibility: visible;
  opacity: 1;
}