/* 
Theme Name: welfarepellegrini
Description: Custom theme for welfarepellegrini
Author: WALLABI
Author URI: https://www.wallabi.it/
Template: hello-elementor
Version: 1.0.1
Text Domain: welfarepellegrini-child-theme
*/

/*-----------------------------------------------------------------------------------------------*/
/*-------------------------------------- VARIABILI GLOBALI --------------------------------------*/
[class*=" eicon-"], [class^=eicon] {
	font-family: eicons !important;
}
:root {

}

html *
{
   font-family: 'titillium web' !important;
}

#breadcrumbs a {
    text-decoration: underline;
		font-size:17px;
}

.diagonale {
  background: #fafafa;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 75%);
}
.img_atf {
	margin-top:-70px !important;
}

@media only screen and (max-width: 767px) {
	.diagonale {
  background: #fafafa;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 90%);
}
	.img_atf {
		margin-top:-30px !important;
	}
}



/* SETTAGGI PER LA PAGINA Semplifica la gestione del tuo business */
.page-id-6107 #button-fixed{
	display:none !important;
}
.page-id-6107 .diagonale {
    display: none !important;
}

.page-id-6107 .menu_bar, .page-id-6107 .elementor-location-footer {
    display: none !important;
}

.page-id-6107 .btn.btn-outline:not(#\#):not(#\#) .pseudo-bg:after {
    background-color: #fcbe00 !important;
    color: var(--color-blue);
}

.page-id-6107 .btn.btn-secondary:not(#\#):not(#\#) .pseudo-bg {
	color:var(--color-blue);
}

.page-id-6107 .btn.btn-secondary:not(#\#):not(#\#) .pseudo-bg:after {
	background-color: #fcbe00 !important;
  color: #fff !important;
	border:1px solid var(--color-blue) !important;
	border-radius:10px !important;
}

.page-id-6107 .btn.btn-secondary:not(#\#):not(#\#) .pseudo-bg:before {
	background-color:var(--color-blue) !important;
	color:#fff !important;
}



button.wpcf7-form-control.wpcf7-submit:focus {
		outline: 2px solid #000 !important;
		outline-offset: 6px !important;
		border-radius: 6px !important;
}

li::marker {
  color: #00597b;
}

a.underline {
	text-decoration:underline !important;
}

a.link-footer{
	color:#fff !important;
	text-decoration:underline !important;
	font-size:16px !important;
}
a.link-footer:hover{
	color:#7ed2dd !important;
}

.elementor-location-footer li.link-nero a {
    color: #fcbe00 !important;
}

li.link-nero a {
  color: #000 !important;
}

.rientro {
	padding-left:3% !important;
	padding-right:3% !important;
}

.anchor-link{
  color: red;
  transition: color 0.6s ease;
}

.anchor-link.active {
  color: #00597B !important;
  font-weight: bold;
}

/*------------------------------- CONTACT FORM 7 ------------------------*/

#responsive-form{
max-width:1200px;
width:100%;
}

.form-row{
width: 100%;
}

.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

.wpcf7-submit{
float: right;
}

.text-form {
	font-size:16px;
}

button.wpcf7-form-control.wpcf7-submit {
    float: none !important;
    border-color: #00597b !important;
		background: #00597b !important;
    color: #ffffff !important;
    height: 50px !important;
}

button.wpcf7-form-control.wpcf7-submit:hover {
    float: none !important;
    border-color: #00597b !important;
		background: #ffffff !important;
    color: #00795b !important;
    height: 50px !important;
}

span.wpcf7-list-item-label {
    color: #000;
		font-size: 20px;
}
label {
    width: 100%;
}

/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
	.column-half{
		width: 50%;
	}
}



/*-----------------------------------------------------------------------------------------------*/

.site-header, .page-header {
	display:none;
}

/*------------------------------- Sticky Navbar ------------------------*/
.menu_bar  {
    position: fixed !important; /* Fissato in cima alla pagina */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 10px 20px !important;
    background-color: traparent !important; /* Sfondo trasparente di default */
    transition: background-color 0.3s ease !important; /* Transizione fluida per il cambiamento di colore */
    z-index: 1000 !important; /* Assicurati che il menù sia sopra al contenuto */
		color: green !important;
}

/* Stile per il menù quando si è scrollato */
.menu_bar.scrolled {
    background-color: white !important; /* Sfondo bianco quando la pagina è scrollata */
}

.menu_bar.scrolled a {
    color: #00597B !important; /* Sfondo bianco quando la pagina è scrollata */
}
.menu_bar.scrolled a:after {
    background-color: #00597B !important; /* Sfondo bianco quando la pagina è scrollata */
}


/*------------------------------- BOTTONE FISSO RICHIEDI INFORMAZIONI ------------------------*/
#bottone-info span.elementor-button-text {
    z-index: 100;
		position:relative;
		top:-9px !important;
		font-weight: 700 !important;
		font-size: 20px;
		width:200px;
		left: -10px;
    top: -6px;
}
#bottone-info {
    padding: 10px 20px;
    font-size: 22px;
    border: 0px;
		width:260px;
		height:50px;
    background-color: #fcbe00; /* Colore di sfondo iniziale */
    color: #00597B;
    cursor: pointer;
    position: fixed;
		bottom:20px;
		rigth:20px;
    overflow: hidden; /* Necessario per limitare l'effetto al bordo del bottone */
		border-radius:10px;
}

#bottone-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #00597b; /* Colore della barra */
    z-index: 0; /* Impostiamo un z-index basso per la barra */
		transition: left 2s ease; /* Transizione fluida */
}

/*------------------------------- BOTTONE GENERICO ------------------------*/

.bottone span.elementor-button-text{
    z-index: 100 !important;
		font-weight: 700 !important;
		font-size:20px;
		line-height: 35px;
}

@media only screen and (max-width: 767px) {
	.bottone span.elementor-button-text{
		line-height: 15px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {  
	.bottone span.elementor-button-text{
		line-height: 15px;
	}
}

.bottone {
    padding: 10px 20px;
    font-size: 10px !important;
    border: 0px;
		width:240px;
		height:56px;
		text-align:center;
    background-color: #FFF; 
		color:#00597B;
		border:1px solid #00597B;
    cursor: pointer;
    overflow: hidden; 
		border-radius:10px;
}
.bottone span.elementor-button-text {
		color:#00597B !important;
}
.largo {
	width:400px !important;
}

.bottone .barra-sfondo {
		position: absolute;
    top: 0;
    left: -100%; /* Partiamo fuori dalla vista a sinistra */
    width: 100%;
    height: 100%;
    background-color: #00597B; /* Colore della barra */
    transition: left 0.6s ease; /* Transizione fluida */
    z-index: 0;
}

.bottone.hover .barra-sfondo {
    left: 0; /* La barra si sposterà verso destra (0%) quando il mouse è sopra */
}
.bottone.hover span.elementor-button-text {
    color: #fff !important;
    z-index: 1000;
}

/*------------------------------- BOTTONE HOT ------------------------*/

.bottone_hot {
    z-index: 10 !important;
		position:relative;
		top:5px;
}
.bottone_hot {
    padding: 12px 20px;
    font-size: 16px;
    border: 0px;
		width:220px;
		height:50px;
		text-align:center;
    background-color: #FFF; 
		color:#444;
		border:1px solid #444;
    cursor: pointer;
    overflow: hidden; 
		border-radius:10px;
}
.bottone_hot .barra-sfondo_hot {
		position: absolute;
    top: 0;
    left: -100%; /* Partiamo fuori dalla vista a sinistra */
    width: 100%;
    height: 100%;
    background-color: #fcbe00; /* Colore della barra */
    transition: left 0.3s ease; /* Transizione fluida */
    z-index: -10;
}
.bottone_hot.hover_hot .barra-sfondo_hot {
    left: 0; /* La barra si sposterà verso destra (0%) quando il mouse è sopra */
}
.bottone_hot.hover_hot {
    color: #fff !important;
    z-index: 20 !important;
}




.bottone_drop {
    padding: 15px 10px;
    font-size: 10px !important;
    border: 0px;
		width:240px;
		height:56px;
		text-align:center;
    background-color: #fcbe00; 
		color:black;
		border:0px solid #00597B;
    cursor: pointer;
    overflow: hidden; 
		border-radius:10px;
		
}
.bottone_drop span.elementor-button-text {
		color:#00795b !important;
		font-weight:500 !important;
}
.bottone_drop .barra-sfondo_drop {
		position: absolute;
    top: 0;
    left: -100%; /* Partiamo fuori dalla vista a sinistra */
    width: 100%;
    height: 100%;
    background-color:#00597b; /* Colore della barra */
    transition: left 0.6s ease; /* Transizione fluida */
    z-index: 0;
}

.bottone_drop.hover .barra-sfondo_drop {
    left: 0; /* La barra si sposterà verso destra (0%) quando il mouse è sopra */
}
.bottone_drop.hover span.elementor-button-text {
    color: #fff !important;
    z-index: 1000;
}


/*------------------------------- BOTTONE PRODOTTI ------------------------*/

.bottone_prodotti {
    padding: 10px 10px;
    font-size: 10px !important;
    border: 0px;
		width:240px;
		height:56px;
		text-align:center;
    background-color: #FFF; 
		color:#00597B;
		border:0px solid #00597B;
    cursor: pointer;
    overflow: hidden; 
		border-radius:10px;
		
}
.bottone_prodotti span.elementor-button-text {
		color:#707070 !important;
		font-weight:500 !important;
}
.medio {
	width:280px !important;
}
.lungo {
	width:480px !important;
}

.bottone_prodotti .barra-sfondo_prodotti {
		position: absolute;
    top: 0;
    left: -100%; /* Partiamo fuori dalla vista a sinistra */
    width: 100%;
    height: 100%;
    background-color: #707070; /* Colore della barra */
    transition: left 0.6s ease; /* Transizione fluida */
    z-index: 0;
}

.bottone_prodotti.hover .barra-sfondo_prodotti {
    left: 0; /* La barra si sposterà verso destra (0%) quando il mouse è sopra */
}
.bottone_prodotti.hover span.elementor-button-text {
    color: #fff !important;
    z-index: 1000;
}

@media only screen and (max-width: 767px) {
	.bottone_prodotti span.elementor-button-text{
		line-height: 15px;
		font-size: 20px !important;
		font-weight:500 !important;
	}
	.medio {
		width:260px !important;
	}	
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {  
	.bottone_prodotti span.elementor-button-text{
		line-height: 15px;
		font-size: 20px !important;
		font-weight:500 !important;
	}
}







/* ------------------ ZOOM EFFECT HOVER IMAGE --------------------- */
.img-wrapper {
    display: inline-block;
    overflow: hidden;
    border-radius:15px;
}
.img-wrapper img {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    vertical-align: middle;
}
.img-wrapper img:hover {
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
    transform:scale(1.05);
		border-radius:10px;
}


.imgswap {
  display: block;
  width: 62px;
  height: 62px;
  margin: 20px auto;
  border: 0px;
  overflow: hidden;
  position: relative;
  background: url('/wp-content/uploads/2025/01/freccia_dx.png') no-repeat 0 0;
  background-size:cover;
}
.imgswap:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  transform:translateX(-100%);
  transition:all .4s ease;
  background:url('/wp-content/uploads/2025/01/freccia_dx-hover.png') no-repeat 0 0;
  background-size:cover;
}

.imgswap:hover:after{
  transform:translateX(0%);
  opacity:0.8;/* remove this if you don't want partial opacity*/
  opacity:1;
}

.imgswap-bianco {
  display: block;
  width: 62px;
  height: 62px;
  margin: 20px auto;
  border: 0px;
  overflow: hidden;
  position: relative;
  background: url('/wp-content/uploads/2025/06/freccia_dx-bianco.png') no-repeat 0 0;
  background-size:cover;
}
.imgswap-bianco:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  transform:translateX(-100%);
  transition:all .4s ease;
  background:url('/wp-content/uploads/2025/06/freccia_dx-bianco-hover.png') no-repeat 0 0;
  background-size:cover;
	pointer-events: none; /* 👈 questa riga risolve il problema */
}

.imgswap-bianco:hover:after{
  transform:translateX(0%);
  opacity:0.8;/* remove this if you don't want partial opacity*/
  opacity:1;
}


.imgswap-bianco {
    z-index: 1 !important;
}


/*-----------------------------------------------------------------------------------------------*/
/*------------------------------------------ DESKTOP --------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1024px) {
	.titolo p {
			font-size:80px;
			line-height:65px;
	}
	.occhiello p {
		font-size:24px;
	}
}	


/*-----------------------------------------------------------------------------------------------*/
/*-------------------------------------- TABLET VERTICALE ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 1023px) {  

}

/*-----------------------------------------------------------------------------------------------*/
/*-------------------------------------- MOBILE VERTICALE ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
	.bottone_drop {
		padding: 10px 10px;
	}

}