/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Small devices (mobile/tablets, 767px and below) */
@media only screen and (max-width: 766px) {
	.swiper-slide-contents span {
		font-size:47px !important;
		font-weight:400 !important;
		color:white !important;
		line-height:49px !important;
	}
	.swiper-slide-contents .mobil {
		display:block;
	}
	.swiper-slide-contents .desk_tab {
		display:none;
	}
	.swiper-slide-contents .elementor-slide-description .e-con-inner {
		margin-bottom:80px !important;
	}
	.swiper-slide-contents .elementor-heading-title {
		
	}
}

/* Medium devices (tablets/desktops, 768px and up) */
@media only screen and (min-width: 768px) {
	.swiper-slide-contents .desk_tab {
		display:none;
	}
	.swiper-slide-contents span {
		font-size:57px !important;
		font-weight:400 !important;
		color:white !important;
		line-height:60px !important;
	}
	.swiper-slide-contents .elementor-heading-title {
		
	}
}

/* Large devices (large laptops and desktops, 1168px and up) */
@media only screen and (min-width: 1168px) {
	.swiper-slide-contents .mobil {
		display:none;
	}
	.swiper-slide-contents .desk_tab {
		display:block;
	}
	.swiper-slide-contents span {
		font-size:77px !important;
		font-weight:400 !important;
		color:white !important;
		line-height:1em !important;
	}
}

/* Per mòbil */
@media (max-width: 767px) {
	.elementor-slides .swiper-slide:nth-of-type(3) .swiper-slide-bg {
		background-image: url('https://www.webdemostra.com/veter/wp-content/uploads/2025/07/club.jpg') !important;
		background-size:contain !important;
		background-position:top center !important;
	}
	.elementor-slides .swiper-slide:nth-of-type(6) .swiper-slide-bg {
		background-image: url('https://www.webdemostra.com/veter/wp-content/uploads/2025/07/club.jpg') !important;
		background-size:contain !important;
		background-position:top center !important;
	}
	.swiper-slide-bg {
		background-color:#E9E7E8 !important;
	}
}


.swiper-slide-inner {
	max-width:1516px;
}
.color_emfasi {
	color:var( --e-global-color-accent );
}
.color_text {
	background-color:var( --e-global-color-text ) !important;
	font-size:25px !important;
}

/* Aquest codi CSS no canvia i ja és correcte. */
.elementor-element-73b3c3d .e-loop-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.elementor-element-73b3c3d .e-loop-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ÍTEMS SERVEIS */
/* ============================================== */
/* --- 1. EFECTES EN PASSAR EL RATOLÍ (HOVER) --- */
/* ============================================== */

/* --- Efecte de vora animada --- */
.item_servei {
    position: relative; 
    overflow: hidden;
}

.e-loop-item:hover .item_servei {
    border-color: transparent !important;
}

.item_servei::before,
.item_servei::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    pointer-events: none;
    border-style: solid;
    border-color: var(--e-global-color-accent);
}

.item_servei::before {
    top: 0; left: 0; width: 0; height: 100%;
    border-width: 3px 0 3px 0;
    transition: width 0.4s ease-in-out;
}

.item_servei::after {
    bottom: 0; left: 0; width: 100%; height: 0;
    border-width: 0 3px 0 3px;
    transition: height 0.4s ease-in-out;
}

.e-loop-item:hover .item_servei::before { width: 100%; }
.e-loop-item:hover .item_servei::after { height: 100%; }


/* --- Efecte a la imatge i text superposat --- */
.item_servei .elementor-widget-theme-post-featured-image {
    overflow: hidden; 
}

.item_servei .elementor-widget-theme-post-featured-image img {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.e-loop-item:hover .item_servei .elementor-widget-theme-post-featured-image img {
    opacity: 0.05; 
    transform: scale(1.15);
}

.item_servei .text_absolut {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.item_servei .text_absolut p {
    margin: 0; padding: 0;
}

.e-loop-item:hover .item_servei .text_absolut {
    opacity: 1;
    visibility: visible;
}


/* --- Canvi de color del títol --- */
.e-loop-item:hover .item_servei .elementor-heading-title {
    color: var(--e-global-color-accent) !important;
}


/* ============================================== */
/* --- 2. MAQUETACIÓ I CENTRAT DEL TÍTOL --- */
/* ============================================== */

/* 1. Apliquem Flexbox al contenidor pare directe dels blocs */
.item_servei > .e-con-inner {
    display: flex;
    flex-direction: column; /* Fills en columna (un sobre l'altre) */
    height: 100%;          /* Ocupa tota l'alçada disponible */
}

/* 2. Seleccionem el segon contenidor fill i fem que creixi */
.item_servei > .e-con-inner > .e-con:nth-child(2) {
    flex-grow: 1;            /* LA CLAU: Creix per omplir l'espai restant */
    display: flex;           /* El fem flexible per centrar el seu contingut */
    align-items: center;     /* Centra el widget del títol verticalment */
    justify-content: center; /* Centra el widget del títol horitzontalment */
}
/* FI */

/*IDIOMES //https://github.com/bluebits-academy/language-switcher/blob/master/index.html */
.idiomes nav {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.idiomes .lang-menu {
    width: auto;
	height:35px;
    text-align: left;
    /*font-weight: bold;*/
    position: relative;
	text-transform:uppercase;
	font-size:15px;
	font-weight:600;
}
.idiomes .lang-menu .selected-lang {
    display: flex;   
    justify-content: space-between;
	align-items: center;
    line-height: 2;
    cursor: pointer;
	padding:0 20px;
	color:var( --e-global-color-text );
}
.idiomes .lang-menu .selected-lang:after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-image: url(https://www.armandribas.cat/wp-content/uploads/2024/09/drop-down-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
	margin:0 20px 0 10px;
}

.idiomes .lang-menu ul {
    margin: 0 0 0 2px;
    padding: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #f8f8f8;
    position: absolute;
    top: 35px;
    right: initial; /*4px*/
    width: 100px;
    border-radius: 5px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
}


.idiomes .lang-menu ul li {
    list-style: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.idiomes .lang-menu ul li a {
    text-decoration: none;
    width: 100%;
    padding: 7px 18px;
    display: block;
	color:#336;
}

.idiomes .lang-menu ul li:hover {
    background-color: #f2f2f2;
}

.idiomes .lang-menu:hover ul {
    display: block;
	z-index: 999;
}
/* FI IDIOMES */