/*
 Theme Name:   Labstrap Sitelabs
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Tema child de Labstrap para Sitelabs
 Author:       Marq Martí
 Author URI:   http://example.com
 Template:     labstrap
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  labstrap-child
*/

:root{
	--primary:#3d6db5;
	--secondary:#2a4b7c;

}






.text-primary {
    color: #3d6db5;
}




.page-id-81 header{

    padding: 12rem 0;
}



.card {
    box-shadow: 0 15px 40px rgb(0 0 0 / 25%) !important;
    border: none !important;
    border-radius: 0.85rem !important; /* Arrodoniment homogeni a tota la web */
    overflow: hidden !important;     /* Això talla les imatges automàticament */
}

.card .card-img-top, 
.card img {
    border-top-left-radius: 0.85rem !important;
    border-top-right-radius: 0.85rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    object-fit: cover;
}

.card-body  {
    border-radius: 10px!important;
}




.p2s9 .card {
    border-radius: 0px!important;
    box-shadow: none!important;
    border: 1px !important;
}


p, body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}


h1,h2,h3,h4,h5,h6{
   font-family: 'Work Sans', sans-serif;
   font-weight: 700; 
}

.p2s12 .card {
    padding: 1.25rem;
    padding: 2rem 2.4rem;
    border-radius: 10px;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    margin-bottom: -60px;
    border: 0
}

.p2s11 {
    text-align: center;
}



.galeria p {
    margin-bottom: 3rem;
}

.page-id-2 footer {
    padding-top: 9rem!important;
    margin-top: -5rem;
}

.video-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 5;
}

.p2s7 h6 {
    color: #3d6db5;
font-size: 1.2rem;
}

.p2s7 h3 {
        color: #000000;
font-size: 1.2rem!important;
}

.p81s2 h6 {
    color: #3d6db5;
}

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

section#p2s1 {
    position: relative;
    overflow: hidden;
    padding: 9rem 0;
}

.p81s2 .item h3 {
    font-size: 1.4rem;
}

.p81s2 .h6, h6 {
    font-size: 0.8rem;
}

 .page-id-2 header{

    padding: 11rem 0;


}



    img.rounded-circle.guide-image {
        width: 50%!important;
        height: auto!important;
        margin-bottom: 2rem!important;
    }

    img.rounded-circle.guide-image {
    border-radius: 50% !important;
}

.content_tours section .container {
    padding: 0;
}

.content_tours .card-body {
    padding: 1rem 1.4rem;
}

.content_tours .col-lg-4.col-md-6.item .card {
    background-color: #f5f5f5;
    text-align: center;
}

.page-id-812 header {
    padding: 12rem 0;
}

.p81s2 .item img, .p2s7 .item img {
    margin-bottom: 1rem;
    border-radius: 50%;
    max-width: 8.5rem;
    padding: 0.4rem;
    border: 0.01rem solid var(--primary);
}

.btn-primary:hover {
    color: #fff;
}

section {
    padding: 4rem 0;
}

img.brand {
    max-height: 2.3rem;
    width: auto;
}

.content_tours section {
	padding: 1.5rem;
}

.page-template-tours .texto_imagen {
        padding-top: 4rem;
            padding-bottom: 4rem;
}

.page-template-tours .full_width {
        padding-top: 4rem;
            padding-bottom: 4rem;
            text-align: center;
}

.form-group label {
    font-size: 0.8rem;
    color: #000000;
}

.page-template-tours .card-body p {
    font-size: 80%;
    margin-bottom: 0;
    line-height: 1.2rem;
}

div#slider {
    margin-bottom: 0;
}

.icono_formulario {
	color: #babcbd;
}

.card.shadow.border-0.sidebar {
    border-top: 4px solid #007bff !important;
}

#carousel .slides li {
    opacity: 0.6;
    cursor: pointer
}
li.flex-active-slide {
    opacity: 1 !important;
}

.sidebar .form-control {
    font-size: 0.85rem;
}

.sidebar label.custom-control-label {
    font-size: 0.85rem;
}

section#p2s4 .card-body, section#p2s5 .card-body {
    background-color: #000000 !important;
}

section#p2s4 h3, section#p2s5 h3 {
    color: #fff;
}

section#p2s4 .card-body p, section#p2s5 .card-body p {
    color: #fff;
}

section#p2s4 li {
    color: #fff;
}

section#p2s4 .card, section#p2s5 .card {
    background-color: #000000 !important;
}



/* Millorem l'interliniat dels títols per l'estil de l'archive */
.post-type-archive-tours .card-title {
    line-height: 1.25;
    font-size: 1.25rem;
}

.p288s6 .item h3, .p291s6 .item h3, .p293s6 .item h3 {
    font-size: 0.9rem!important;
}

.p288s9 .item h3, .p291s9 .item h3, .p293s8 .item h3 {
    font-size: 1.15rem!important;
}

.p288s9 p, .p291s9 p, .p293s9 p {
    font-size: 80%;
    line-height: 1.25rem;
}

.p288s9 h4.icono, .p291s9 h4.icono, .p293s9 h4.icono {
    font-size: 1.5rem;
}

.p288s6 .card-body, .p291s6 .card-body, .p293s6 .card-body {
    padding: 0.2rem 0.2rem;
    text-align: center;
}


.p2s4 .item h3 {
    line-height: 1.3!important;
}

section#p288s2 .item, section#p291s2 .item, section#p293s2 .item {
    margin-bottom: 1rem;
}



section#p288s2 p, section#p291s2 p, section#p293s2 p {
    line-height: 1.2rem;
    font-size: 0.8rem;
}



section#p288s2 small, section#p291s2 small, section#p291s2 small {
    font-size: 70%;
}




h5.introheader {
        font-size: 1rem!important;
    }

.page-id-532 header {
    text-align: center;
    padding: 4rem 0;
}

.page-id-532 h1.title.mb-4 {
    margin-bottom: 5rem!important;
}

.p532s1 {
    padding-top: 0rem!important;
}

    section#p2s4 {
    background-color: transparent !important;
    margin-top: -7rem;
    padding-top: 0px;
    padding-bottom: 14rem;
    margin-bottom: -115px;
}

section#p2s5 {
    background-color: #000000 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 60px;
    height: 60px;
    background-color: transparent;
    background-size: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

#carouselExampleIndicators {
    overflow: hidden;
}

section#p2s8 {
    background-image: url(https://mtbdreams.com/wp-content/uploads/2026/02/background-gallery-portada-2.jpg)!important;
}

section#p2s10 {
    background-image: url(https://mtbdreams.com/wp-content/uploads/2026/02/background-instagram-1.jpg)!important;
}

section#p2s11, section#p2s12 {
    background-color: #f5f5f5!important;
}

/* 1. Donem format al botó perquè el text quedi a l'esquerra i la icona a la dreta */
#accordionExample .btn-link {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none; /* Opcional: treu el subratllat dels enllaços */
    color: #333; /* Opcional: ajusta el color del text */
}

/* 2. Creem la icona del chevron utilitzant un fons SVG */
#accordionExample .btn-link::after {
    content: "";
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 1rem;
    /* Icona SVG d'un chevron cap avall (color gris fosc #333) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 100%;
    /* Afegim una transició suau per quan giri */
    transition: transform 0.3s ease-in-out;
}

/* 3. Quan la pregunta està PLEGADA (té la classe .collapsed), el chevron apunta cap a la dreta */
#accordionExample .btn-link.collapsed::after {
    transform: rotate(-90deg);
}

/* 4. Quan la pregunta està DESPLEGADA (no té la classe .collapsed), el chevron apunta cap avall */
#accordionExample .btn-link:not(.collapsed)::after {
    transform: rotate(0deg);
}

/* Afegim una transició suau a la icona dins de l'enllaç de l'itinerari */
.itinerary-toggle i {
    transition: transform 0.3s ease-in-out;
}

/* Quan està PLEGAT (classe .collapsed present): la icona es queda com està (apuntant avall) */
.itinerary-toggle.collapsed i {
    transform: rotate(0deg);
}

/* Quan està DESPLEGAT (no té la classe .collapsed): la icona gira cap a dalt */
.itinerary-toggle:not(.collapsed) i {
    transform: rotate(-180deg);
}

/* Treu l'ombra de les cards només a la template de tours */
.single-tours .card {
    box-shadow: none !important;
}

.whatsapp-pop {
    position: fixed;
    bottom: 1.4rem;
    right: 4%;
}



/* El botó de WhatsApp (Base general: cercle i colors) */
.whatsapp-pop .circle {
    background: #25d366;
    border-radius: 50%;
    width: 60px;  /* Mida base circular */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    padding: 0;
}

.whatsapp-pop .circle a {
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    display: flex;
}

@media (min-width:768px) {

/* 1. Seleccionem la teva columna específica i la fem Flex */
#p812s1 .col-lg-4.col-md-6.item {
    display: flex !important;
}

/* 2. Fem que el contingut (la card) s'estiri per ocupar tot l'alt */
#p812s1 .col-lg-4.col-md-6.item > div {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%; /* Perquè no perdi l'amplada en ser flex-item */
}

#p2s4 .container {
    max-width: 90%;
    width: 90%;
}

   img.rounded-circle.guide-image {
        min-width: 130px !important;
    }


.page-id-2 h3 {
    font-size: 2rem;
}

    .page-id-2 h1 {
        font-size: 3.4rem;
        line-height: 1.1!important;
    }

    section#p2s1 p.text-light {
    line-height: 1.6;
    font-size: 1.2rem !important;
}

section#p2s3 {
    padding-bottom: 10rem;
    padding-top: 8rem;
}


.card1 {
    padding: 0px 15% 0 0 !important;
}

.card2 {
    padding: 0 0 0 15% !important;
}

.page-id-2 h5 {
    font-size: 1.6rem;
}

.page-id-2 h6 {
    font-size: 1.2rem;
}

.whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

.whatsapp-color {
    color: #25D366;
}

/* Efecte de créixer el botó de WhatsApp (només té sentit amb ratolí) */
    .whatsapp-pop .circle:hover {
        transform: scale(1.1);
        background: #20ba5a;
        box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    }


}


@media (max-width:767px) {

    .content_tours .col-lg-3.col-md-6.item {
    max-width: 50%;
}

section#what-to-expect,
section#guides,
section#form {
    padding: 0rem!important;
}

.page-id-2 h3 {
    font-size: 1.8rem;
}

.page-id-2 h1 {
    font-size: 2.4rem;
} 

.page-id-2 h5 {
    font-size: 1.4rem;
}

.page-id-2 h6 {
    font-size: 1rem;
}

.card {
        margin: 0;
    }
    .content_tours .items {
    text-align: center;
}

section#included {
    text-align: left;
}

.whatsapp-pop {
        bottom: 6rem;
    }
    .whatsapp-pop .circle {
        width: 55px;
        height: 55px;
    }


}