@font-face {
    font-family: 'helvetica_neue_lt_com35_thin';
    src: url('../fonts/helveticaneueltcom-th-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltcom-th-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* "optional" = il font swappa solo se carica entro 100ms, altrimenti rimane fallback.
       Elimina FOUT/CLS quando il font arriva tardi. Tradeoff: a volte vede il fallback. */
    font-display: optional;
}
.verisign {
height:30px;
	
}

#background{
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 9999;
}

body {
    background: #fff;
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #666
}

a {
    color: #6783a2;
    text-decoration: none;
    transition: color .3s, background .3s;
    -o-transition: color .3s, background .3s;
    -webkit-transition: color .3s, background .3s;
    -moz-transition: color .3s, background .3s;  
}

a:hover {
    color: #a08e50;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-weight: 400; /* Peso standard per leggibilità */
    color: #6783a2; /* Cambia il colore in base al design */
    font-size: 1.7em; /* Personalizza per ogni tag */
    line-height: 1.4; /* Migliora la leggibilità */
    margin-bottom: 0.8em; /* Spazio tra elementi */
}


img {

    height: auto;
    max-width: 100%;
}

img.autowidth {
    max-width:none 
}

.title {
    display: block;
    margin-bottom: 5px;
    font-weight: bold
}

.close {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity .3s;
    -o-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s; 
}

.close:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.btn-default {
    background: #6783a2 !important;
    color: #fff !important;
    border-color:#6783a2 !important;
}

.btn-default:hover {
    background: #a08e50 !important;
    border-color: #a08e50 !important;
}

.input-group-addon.green {
    background: #6783a2; 
    cursor: pointer
}

.nomargin {
    margin: 0
}

ul.reset {
    margin: 0;
    padding: 0;
    list-style: none
}

.table th {
    background: #e1e6ec
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color: #e1e6ec;
}

.logo-smartphone {
    display: none
}

.smartphone-to-show {
    display: none
}



/*** preventivi ***/

#preventivi {
    position:absolute;
    position:fixed;
    top:30%;
    left:0;
    width:62px;
    height:270px;
    z-index:999999999;
}

.daterangepicker {
    z-index: 999999999 !important;
}


/*** top ***/

.top {
    padding: 10px 0 20px 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background: rgba(255,255,255,0.9);
}

.top .logo {
    position: absolute;
    top: -10px;
    left: 0
}

.logo-smartphone {
    display: none
}

.top .lang {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline;
    cursor: pointer;
    position: relative;    
    background: #fff;
    margin-right: 15px;
    top: -2px;
}

.top .lang img {
    margin-top: -4px
}

.top .info {    
    text-align: right;
    position: relative;
    top: 5px;
}

.top .info i {
    color: #6783a2;
}

.top .info .email {
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
}

.top .info .tel {
    margin-right: 15px;
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
}


/*** nav ***/


.navbar.fixed {
    width:100%;
    position:fixed;
    top:0;
	z-index: 9999999999999;
}

.navbar-brand {
  padding: 0px;
}
.navbar-brand {
  display:inline;
  color:#FFFFFF;
  margin:15px;
  padding-left:35px;
}

.navbar {
    background: none;
	background-color:#FFFFFF;
    padding: 10px 0;
    margin: 0 0 0px 0;    
    border-radius: 0;
	border: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.navbar .nav > li > a {
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 25px;
    padding: 10px 30px 10px 0;
    white-space: nowrap;
}

/* Logo navbar: non deve mai uscire dalla sua colonna */
.navbar-collapse .col-xs-3 img {
    max-width: 100%;
    height: auto;
}

.navbar .nav > li > a:hover, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #c5d4e5;
    background: none;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #6783a2;
    border-top-color: #6783a2;
}

.navbar .nav li.dropdown:hover > .dropdown-toggle .caret {
    border-bottom-color: #c5d4e5;
    border-top-color: #c5d4e5;
}

.navbar-toggle {
    background: #6783a2;
    /* Bootstrap lo lascia a 34px: è il comando principale del menù su
       telefono, portato ai 44px raccomandati per il tocco. */
    min-width: 44px;
    min-height: 44px;
}

.navbar-toggle:hover {
    background: #c5d4e5;
}

.navbar-toggle .icon-bar {
    background: #fff;
}

/* Blu scuro e non #6783a2: col testo bianco quest'ultimo dava 3.93:1,
   sotto la soglia AA di 4.5 per il corpo da 20px. */
ul.dropdown-menu {
    background: #3a4f65!important;
    border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

.dropdown-menu > li > a {
    color: #fff;
    border-bottom: 1px solid #c5d4e5;
	font-size: 20px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {    
    color: #c5d4e5 !important;
    background: none;
	
}


/*** popover ***/

.popover {
    z-index: 99999;
}


/*** carousel , logo and booking ***/

/* ── CLS prevention: container con aspect-ratio fissa prima dell'init carousel ── */
#carousel-example-generic.carousel.slide.vertical {
    aspect-ratio: 1800 / 800;
    max-height: 800px;
    overflow: hidden;
}
.carousel-inner.hero {
    aspect-ratio: 1800 / 800;
    background: #fff;
    overflow: hidden;
}
.carousel-inner.hero .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    #carousel-example-generic.carousel.slide.vertical { aspect-ratio: auto; max-height: none; }
    .carousel-inner.hero { aspect-ratio: 16 / 9; }
}

.carousel.slide.vertical {
    margin-top: -30px;
}


.carousel {
    margin-bottom: 20px
}

.carousel-indicators {
    bottom: 100px;
}

.carousel-item {
    float: left;
    width: 24%;
	margin-right: 1%;
}


.carousel-box {
    position: absolute;
    width: 100%;    
    bottom: 100px;
	z-index: 999999999;
}

#pass-container {
   position: absolute;
       top: 200px; 
    left: 50px;
    z-index: 999999999;
}
.carousel-box .box {
    position: relative;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -o-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s; 
}

.carousel-box .box:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.carousel-box .box img, .smartphone-carousel img {
    background: #fff;
    padding: 3px;
    overflow: hidden;    
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);

}

.carousel-box .box .dida {
    position: absolute;
    bottom: 3px;
    left: 18px;
    padding: 10px;
    width: 256px;
    background: rgba(0,0,0,0.7);
    text-align: center;
}

.carousel-box .box .dida a {
    color: #fff;
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
}
span.dida { 
	min-width: inherit;
}
.carousel-indicators {
    bottom: 30px;
}

.carousel-item {
    float: left;
    width: 24%;
    margin-right: 1%;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    margin: 0 auto;
	margin-top:0px;
	width: 100%;
}

.smartphone-carousel {
    border-bottom: 2px solid #e1e6ec;
}

.smartphone-carousel .box {
    margin-bottom: 20px;
    text-align: center;
}

.smartphone-carousel img {
    margin-bottom: 5px;
}

.smartphone-carousel .box .dida a {   
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
}


/*** main-content ***/

.main-content {
    margin-bottom: 20px;
}

.main-content h1 {
    margin: 0 0 20px 0;    
    padding-bottom: 5px;
    border-bottom:5px solid #e1e6ec;
}

.main-content-img {
    width: auto !important;
    margin: 0 20px 20px 0;
}


/*** homepage ***/

.box-homepage {
    margin-bottom: 20px;
}

.box-homepage img {
    background: #fff;
    padding: 3px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}


/*** pagina-mappa ***/

.mappa {
    background: #e1e6ec;
    padding: 20px;
}


/*** pagina foto ***/

.photo {
    background: #e1e6ec;
    padding: 20px 20px 0px 20px;
}

.photo img {
    margin-bottom: 30px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: #fff;
    padding: 3px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    transition: opacity .3s;
    -o-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s; 
}

.photo img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.photo .margin20 img {
    margin-bottom: 20px !important
}


/*** offerta ***/

.share {    
    padding: 10px 0;    
    margin-top: -20px
}

.share a {

}

.share :hover {

}

.richiedi-preventivo {
    background: #e1e6ec;
    padding: 20px;
	border-radius: 25px;
}

.richiedi-preventivo h3 {   
    margin: 0 0 10px 0
}


/*** offerte ***/

.off {
    border-bottom: 1px solid #ddd;    
    padding: 10px 0;
    margin-left: 0;
    margin-right:0;
}

.off:hover {
    background-color: #e1e6ec;
}

.off .title {
    color: #232323;
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.date {
    color: #c9d2dd
}


/*** sidebar ***/

.sidebar .offerta {
    position: relative;
    margin-bottom: 20px
}

.sidebar .offerta img {
    width: 100%
}

.sidebar .offerta .off-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    color: #fff;
    background: rgba(103,131,162,0.7);
}

.sidebar .offerta .off-title .title a {
color:#FFFFFF;
    font-size: 16px
}
.sidebar .offerta .off-title .title {
color:#FFFFFF;
    font-size: 14px
}



.sidebar {
    margin-bottom: 20px;
}

.sidebar .sec-nav {
    margin-bottom: 20px;
}

.sidebar .sec-nav ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.sidebar .sec-nav ul li a {
    background: #6783a2;
    color: #fff;
    margin-bottom: 2px;
    display: block;
    padding: 10px;
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;

}

.sidebar .sec-nav ul li a:hover , .sidebar .sec-nav ul li a.active  {
    background: #a08e50;    
}

.sidebar .offerte {
    padding: 20px 20px 10px 20px;
    background: #e1e6ec;
    margin-bottom: 20px;
}

.sidebar .offerte h3 {
    margin: 0 0 10px 0;
    color: #6783a2 !important;
}

.sidebar .offerte .offerta {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.sidebar .offerte .offerta .title a {    
    font-size: 20px;
    color: #232323
}

.sidebar .offerte .offerta .title a:hover {
    color: #6783a2;
}

.sidebar .offerte h3 {
    color: #fff 
}

.sidebar .offerte img {
    margin-bottom:5px;
    border: 5px solid #fff;
}

.sidebar .offerte a.btn {
    margin-top:5px
}

.sidebar .fb {
    margin-bottom: 20px;
}

.TA_selfserveprop img {
    width: auto !important
}

.TA_selfserveprop > div {
    width: 100% !important
}


/*** footer ***/

.conv {
    margin-bottom: 40px;
}

.conv .logos {

}

.conv .logos img {
    max-width: 200px
}

.conv .logos img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity .3s;
    -o-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
}

.boxes {
    margin-bottom: -100px;
}

.boxes .box {
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

.boxes .box img {
    width: 100%
}

.boxes .box .title {
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #fff;    
    backgrcolor: #fff;
    padding: 20px;
    background: rgba(103,131,162,0.7);
    width: 100%;
}

.boxes .box .readmore {
    position: absolute; 
    bottom: 40px;
    left: 0px;
    color: #fff;
    padding: 20px 40px;
    background: rgba(0,0,0,0.7);
}

.boxes .box .readmore:hover {
    background: rgba(0,0,0,0.9);
}

form .datepicker-days {
    display: none !important
}

.datepicker-dropdown {
    z-index: 9999999999 !important;
}

/*** footer ***/

footer {
    background: url(../img/onda.png) no-repeat #e1e6ec;
}

footer .columns {    
    padding: 130px 0 20px 0;    
}

footer .columns h4 {
    margin: 0 0 10px 0;    
}

footer .columns .col {
    margin-bottom: 20px;
}

footer .columns .newsletter-form {

}

footer .columns .newsletter-form input[type=text] {
    margin-bottom: 10px;
    background: url(../img/email.png) no-repeat 97% 50% #fff;
}

footer .fb {
    background: #fff
}

 .copy {
    color:#fff;   
    background: #c9d2dd;
    padding: 20px 0
	
}

.copy a {

}

.copy a:hover {
    color: #fff
}

@media all  and (max-width: 1440px) and (min-width: 960px) {
    .smartphone-carousel.smartphone-to-show {
        display: block;
        margin-top: 0px;
    }
    
    .carousel-box.smartphone-to-hide {
        display: none
    }
	 .carousel-box {
 display:none;
 
}
}

@media all  and (max-width: 1200px) and (min-width: 960px) {
    .carousel-box .box .dida {
        position: absolute;
        bottom: 3px;
        left: 18px;
        padding: 10px;
        width: 206px;
        background: rgba(0,0,0,0.7);
        text-align: center;
    }
}



@media all and (max-width: 500px) {
h1,h2,h3,h4 {
    font-family: 'helvetica_neue_lt_com35_thin',Arial, sans-serif;
    font-weight: 300;
    color: #6783a2;    
    font-size: 1.3em; }

}
@media all and (max-width: 960px) {
 .container {
   padding-right: 0px;
  padding-left: 0px;
  }
    .smartphone-to-show {
        display: block !important
    }

    .smartphone-to-hide {
        display: none
    }

	.navbar {
		opacity: 0.9;
		
		
	}
    .navbar .nav > li > a {
        padding-left: 20px
    }
/* Il fondo bianco rendeva invisibili le sottovoci: il testo del dropdown
   è bianco (regola globale più sotto), quindi qui restava bianco su bianco.
   Si tiene il blu scuro della palette, come sopra i 960px. */
ul.dropdown-menu {
    background: #3a4f65!important;
    border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}
    #preventivi, .carousel-box, .logo  {
        display: none
    }

    .logo-smartphone {
        display: block;
        text-align: center;
        padding: 20px 0 0 0;
    }

    .top .lang , .top .tel  , .top .email {
        display: block;
        text-align: left;
        margin-bottom: 5px;
    }

    .top .info {
        text-align: left;
        margin-top: 10px
    }

    .carousel.slide.vertical {
        margin-top: 0px;
    }

    .carousel-indicators {
        top: 20px
    }    

    .text-right {
        text-align: left
    }
	
	footer {
		padding-left: 10px;
		padding-right: 10px;
	}
	.copy {
		padding-left: 10px;
		padding-right: 10px;
	}
	p, h1, h2, h3  {
		margin-left: 10px !important;
		margin-right: 10px;
	}
	

}

.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}



.carousel-control.left , .carousel-control.right {
  background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%) !important;
  background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%) !important;
  background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0))) !important;
  background-image: linear-gradient(to right,rgba(0,0,0,) 0,rgba(0,0,0,0) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
}

.info {
	
	width: 100% !important;
}

.container-fluid {

	z-index: 100000 !important;
}


 /* Stile per intestazione header html */
        .intestazione-header {
            background-color: #f2f0de; /* Colore di sfondo */
            height: 33.33vh; /* Altezza del div, 1/3 dello schermo */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
			margin-bottom: 50px !important;
        }

        /* Stile per la frase all'interno di intestazione header */
        .titolo-header {
            font-size: 4vw; /* Dimensioni del testo proporzionali */
        }

        /* Media query per regolare le dimensioni del testo su schermi più piccoli */
        @media (max-width: 767px) {
            .titolo-header {
                font-size: 6vw;
            }
			.intestazione-header {
           height: 20.33vh; /* Altezza del div, 1/3 dello schermo */
		   margin-bottom: 0px !important;
           
        }
        }


@media (min-width: 1200px) {
  .container {
    width: 80% !important;
  }
	.orme .container {
  max-width: 1170px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
	.news-item h3 {  margin-top: 0px; }
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFF !important;
}

.news-item {
	margin-bottom: 20px;
	
}
.container-fluid2 {
  position: relative;
  width: 100%;

 
}

#background-video {
  position: relative; /* o absolute, a seconda della necessità */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Assicurati che il video rimanga dietro agli altri contenuti */
}

#background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Questo fa la magia */
}

.mobile-visible {
    display: none; /* Nasconde il carosello su tutti i dispositivi per impostazione predefinita */
}

@media (max-width: 767px) { /* Limite per i dispositivi mobili */
    .mobile-visible {
        display: block; /* Mostra il carosello solo su dispositivi mobili */
    }
    .carousel-caption {
        background: rgba(0, 0, 0, 0.7); /* Sfondo scuro per migliorare la leggibilità */
        color: #fff;
        left: 10%;
        right: 10%;
        bottom: 20px;
    }
}


.carousel-mobile .carousel-caption {
    background: rgba(0, 0, 0, 0.7); /* Sfondo più scuro per le didascalie */
    color: #fff; /* Testo bianco per tutto il testo */
    max-width: 80%;
    left: 10%;
    right: 10%;
    bottom: 20px;
}

.carousel-mobile .carousel-caption h3 {
    color: #fff; /* Assicura che i titoli siano bianchi */
}




.carousel-mobile .carousel-inner .item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

/* Nasconde il carosello su schermi più grandi di 768px */
.offerte-carousel {
    display: none !important;
}

@media (max-width: 768px) {
    /* Mostra il carosello su dispositivi mobili o schermi più piccoli di 768px */
    .offerte-carousel {
        display: block !important;
    }
	.sidebar .offerta { 
	display: none !important;
	}
	
}
.offerte-carousel .item img {
    width: 100%; /* Assicura che l'immagine sia larga quanto il suo contenitore */
    height: 200px; /* Altezza fissa per tutte le immagini */
    object-fit: cover; /* Copre l'area disponibile, tagliando l'eccesso */
}
.offerte-carousel .item {
    padding: 10px; /* Spazio intorno agli elementi per una migliore leggibilità */
    background-color: #f9f9f9; /* Sfondo leggero per ogni elemento */
    border-radius: 5px; /* Angoli arrotondati per un look più morbido */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombra leggera per un effetto di profondità */
    margin: 10px 0; /* Margine verticale per spazio tra gli elementi */
}

.offerte-carousel .item h4 {
    margin-top: 10px; /* Spazio sopra il titolo */
    text-align: center; /* Centra il testo */
    font-size: 16px; /* Dimensione del font per migliorare la leggibilità su dispositivi mobili */
    color: #333; /* Colore del testo */
}
.owl-carousel .owl-nav {
    position: absolute;
    top: -50px; /* Ajust this value based on your needs */
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.offerte-carousel .owl-nav {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    width: 100%;
    transform: translateY(-50%); /* Ajust for exact center alignment */
}

.offerte-carousel .owl-prev, .offerte-carousel .owl-next ,.servizi-carousel  .owl-prev  , .servizi-carousel .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff; /* Background color */
    border-radius: 50%;
    width: 44px; /* Size of the buttons */
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Size of the arrows */
    color: #fff !important; /* Color of the arrows */
    border: 1px solid #ddd; /* Border of the buttons */
}

.offerte-carousel .owl-prev , .servizi-carousel  .owl-prev{
    left: 10px; /* Distance from the left edge */
}

.offerte-carousel .owl-next {
    right: 10px; /* Distance from the right edge */
}

/* Optional: Adding hover effect for buttons */
.offerte-carousel .owl-prev:hover, .offerte-carousel .owl-next:hover, .servizi-carousel  .owl-prev:hover, .servizi-carousel  .owl-next:hover {
    background-color: #eee;
}
.offerte-carousel .owl-dots {
    display: none !important;
}




/* Stili aggiuntivi per le frecce, se necessario */
.servizi-carousel .owl-carousel .owl-nav i {
    font-size: 24px; /* Example size */
}
.offerte-carousel .item .btn-offerta {
    display: block; /* Rende il link un blocco per permetterne il centrare */
    margin: 10px auto; /* Aggiunge margine sopra e sotto e centra orizzontalmente */
    padding: 10px 20px;
    background-color: #007bff; /* Colore di sfondo */
    color: #ffffff; /* Colore del testo */
    text-align: center;
    text-decoration: none;
    border-radius: 5px; /* Angoli arrotondati */
    font-weight: bold; /* Testo in grassetto */
    width: fit-content; /* Adatta la larghezza del contenuto, funziona bene per il centrare */
}

.offerte-carousel .item .btn-offerta:hover {
    background-color: #0056b3; /* Colore di sfondo al passaggio del mouse */
    color: #ffffff; /* Colore del testo al passaggio del mouse */
}
#customOwlCarousel {
	padding-bottom: 20px;
}
#customOwlCarousel .owl-nav {
	display: none !important;
}

 .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            margin-bottom: 20px; /* Spazio tra i video */
        }
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .btn-video-control {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
        }



  /* Barra mobile fissa in fondo al display, senza margini o padding */
  .mobile-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #fff !important;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Rimuove ogni padding dal container interno */
  .mobile-bottom-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Elimina i gutter interni della row e delle colonne */
  .mobile-bottom-bar .row.no-gutter {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mobile-bottom-bar .row.no-gutter > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Stile base per i pulsanti */
  .mobile-bottom-bar a.btn {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
  }
  
  /* Colori specifici per ciascun pulsante */
  .mobile-bottom-bar a.btn-call {
    background-color: #28a745;  /* Verde per "Chiama" */
  }
  .mobile-bottom-bar a.btn-booking {
    background-color: #007bff;  /* Blu per "Booking" */
  }
  .mobile-bottom-bar a.btn-contact {
    background-color: #fd7e14;  /* Arancione per "Contatti" */
  }
  
  /* Visualizza la barra solo su dispositivi con larghezza fino a 1023px (inclusi smartphone e iPad) */
  @media (min-width: 1024px) {
    .mobile-bottom-bar {
      display: none !important;
    }
  }
  
  @media (max-width: 1023px) {
    .mobile-bottom-bar {
      display: block !important;
    }
  }



/* Rimuove il padding sinistro e destro solo per la barra mobile */
.mobile-bottom-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html, body {
  overflow-x: hidden;
}
@media (max-width: 1200px) {
  .input-group.date {
    width: 100%;
  }
}



  /* Stile della top bar */
  .top-bar {
    background-color: #003366;  /* Colore di sfondo scuro, personalizzabile */
    color: #fff;
    padding: 10px 0;
    font-size: 16px;
  }

  /* Contenitore interno con layout flessibile */
  .top-bar .top-bar-content {
    display: flex;
    justify-content: flex-end;  /* Allinea gli elementi a destra */
    align-items: center;
  }

  /* Ogni elemento di contatto */
  .top-bar .contact-item {
    margin-left: 20px;
  }

  /* Link all'interno degli elementi di contatto */
  .top-bar .contact-item a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
  }

  /* Icone Font Awesome */
  .top-bar .contact-item i {
    margin-right: 8px;
    font-size: 18px;
  }

  /* Effetto hover sui link */
  .top-bar .contact-item a:hover {
    color: #f4c430;  /* Colore gold per l'hover, modificabile */
  }

@media (max-width: 767px) {
  /* Forza la larghezza completa e il layout a blocco */
  .input-group.date {
    width: 100% !important;
    display: block;
  }
  /* Assicurati che l'input all'interno occupi il 100% */
  .input-group.date .form-control {
    width: 100% !important;
  }
}
/* Card footer hotel */
.footer-hotel-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 20px 18px 16px;
  margin: 10px 0;
  transition: transform .18s ease, box-shadow .18s ease;
}

.footer-hotel-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

/* Head logo centrato */
.footer-hotel-head.center-logo{
  margin-bottom: 14px;
  padding-bottom: 10px;
  position: relative;

}

/* Lineetta sotto al logo */
.footer-hotel-head.center-logo:after{
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 10px auto 0;
  background: rgba(255,255,255,0.22);
}

/* LOGHI base */
.footer-main-logo{
  display: inline-block;
  width: 100%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.16));
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0.98;
}

/* Riduzione SOLO La Gioiosa */
.footer-main-logo.logo-gioiosa{
  transform: scale(0.75);   /* ridotta del 10% */
  transform-origin: center;
}

/* Hover */
.footer-hotel-card:hover .footer-main-logo{
  opacity: 1;
}

.footer-hotel-card:hover {
  transform: scale(0.93);
}

/* Testi */
.footer-hotel-card .hotel-info p{
  margin: 0 0 12px;
  line-height: 1.6;
}

.footer-hotel-legal{
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0;
}

/* Link */
.footer-hotel-card a{
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.35);
}

.footer-hotel-card a:hover{
  border-bottom-color: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 767px){
  .footer-main-logo{
    max-width: 200px;
  }

  .footer-main-logo.logo-gioiosa{
    transform: scale(0.75);
  }

  .footer-hotel-card:hover .footer-main-logo.logo-gioiosa{
    transform: scale(0.93);
  }
}
.mobile-bottom-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: opacity .35s ease, transform .35s ease;
}

.mobile-bottom-bar.hide-bar{
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.logo-momo {
		margin-left: 30px;
}

/* ============================
   Dropdown: titoli sezione (es. "Prossime fiere", "Fiere passate")
============================ */
.dropdown-menu .menu-section{
  color: rgba(255,255,255,0.92) !important; /* bianco elegante */
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px;
  line-height: 1.2;
  cursor: default;
  background: rgba(0,0,0,0.12);            /* leggero stacco */
}

/* (Opzionale) se per sbaglio hai <a> dentro i menu-section */
.dropdown-menu .menu-section a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* Divider più coerente sul blu */
.dropdown-menu .divider{
  background-color: rgba(255,255,255,0.18) !important;
  margin: 6px 0;
}

/* Link nel dropdown (per contrasto e leggibilità) */
.dropdown-menu > li > a{
  color: rgba(255,255,255,0.92);
}

/* Hover link */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.old.disabled,
.datepicker table tr td.new.disabled {
  color: rgba(0,0,0,0.22) !important;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.03),
    rgba(0,0,0,0.03) 6px,
    rgba(0,0,0,0.00) 6px,
    rgba(0,0,0,0.00) 12px
  ) !important;
  cursor: not-allowed !important;
  position: relative;
}

.datepicker table tr td.disabled:after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.18);
  transform: rotate(-18deg);
}


/* ═══════════════════════════════════════════════════════════════
   Vistamare Hotel Carousel v4 — CSS
   ═══════════════════════════════════════════════════════════════ */

.vhc-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.vhc-viewport {
  overflow: hidden;
  width: 100%;
}

.vhc-track {
  display: flex;
  gap: 20px;
  /* GPU acceleration */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  /* Touch */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Durante drag: cursor grab */
.vhc-dragging {
  cursor: grabbing;
}

.vhc-dragging .vhc-track {
  cursor: grabbing;
}

/* ══════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════ */

.vhc-card {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e1e6ec;
  border-top: 3px solid #6783a2;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vhc-dragging .vhc-card {
  cursor: grabbing;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .vhc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(103, 131, 162, 0.18);
  }
}

/* ══════════════════════════════════════════════════════════════
   IMMAGINE
   ══════════════════════════════════════════════════════════════ */

.vhc-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #e1e6ec;
}

.vhc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .vhc-card:hover .vhc-img-wrap img {
    transform: scale(1.05);
  }
}

.vhc-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(103, 131, 162, 0.45) 0%, transparent 60%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   BADGE
   ══════════════════════════════════════════════════════════════ */

.vhc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #6783a2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   BODY
   ══════════════════════════════════════════════════════════════ */

.vhc-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* A11Y: #6783a2 su bianco ~3.5:1 FAIL (17px regular = normal text, serve 4.5:1) -> #3a4f65 = 9:1 */
.vhc-title {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #3a4f65;
  line-height: 1.4;
  margin: 0 0 8px;
  pointer-events: none;
}
.vhc-title a,
.vhc-title strong,
.vhc-card a strong,
.vhc-card strong { color: inherit; }

.vhc-desc {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  font-weight: 400;
  flex: 1;
  margin: 0 0 16px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   SOSTITUISCI SOLO QUESTO BLOCCO nel CSS v4 esistente
   Cerca ".vhc-cta {" e sostituisci fino al prossimo commento
   ══════════════════════════════════════════════════════════════ */

/* A11Y: #6783a2 su bianco ~3.5:1 FAIL (11px uppercase = small text, serve 4.5:1) -> #3a4f65 = 9:1 */
.vhc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  align-self: flex-start;
  min-height: 48px;
  min-width: 140px;
  padding: 14px 22px;
  background: transparent;
  color: #3a4f65;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #3a4f65;
  cursor: pointer;
  position: relative;
  z-index: 100;
  -webkit-tap-highlight-color: rgba(103, 131, 162, 0.4);
  touch-action: manipulation;
  transition:
    color        .28s ease,
    background   .28s ease,
    border-color .28s ease,
    gap          .28s ease,
    padding-right .28s ease;
}

.vhc-cta::after {
  content: '→';
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: translateX(-6px);
  transition:
    opacity   .28s ease,
    max-width .28s ease,
    transform .28s ease;
}

.vhc-cta:link,
.vhc-cta:visited {
  background: transparent;
  color: #3a4f65;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .vhc-cta:hover,
  .vhc-cta:focus-visible {
    background:    #6783a2;
    color:         #fff;
    border-color:  #6783a2;
    gap:           10px;
    padding-right: 16px;
  }

  .vhc-cta:hover::after,
  .vhc-cta:focus-visible::after {
    opacity:   1;
    max-width: 20px;
    transform: translateX(0);
  }

  .vhc-cta:visited:hover {
    color: #fff;
  }
}

.vhc-cta:active {
  background:   #a08e50;
  border-color: #a08e50;
  color:        #fff;
  transform:    scale(0.97);
}

@media (min-width: 600px) and (max-width: 1023px) {
  .vhc-cta {
    width: 100%;
    min-height: 52px;
    font-size: 12px;
    justify-content: center;
  }
}

@media (max-width: 599px) {
  .vhc-cta {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    justify-content: center;
  }
}
/* ══════════════════════════════════════════════════════════════
   CONTROLS
   ══════════════════════════════════════════════════════════════ */

.vhc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 16px;
}

.vhc-progress-track {
  flex: 1;
  height: 2px;
  background: #e1e6ec;
  border-radius: 2px;
  overflow: hidden;
}

.vhc-progress-fill {
  height: 100%;
  background: #6783a2;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.vhc-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.vhc-arr {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #c5d4e5;
  background: #fff;
  color: #6783a2;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: rgba(103, 131, 162, 0.3);
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .vhc-arr:hover:not(:disabled) {
    border-color: #6783a2;
    color: #fff;
    background: #6783a2;
  }
}

.vhc-arr:active:not(:disabled) {
  border-color: #6783a2;
  color: #fff;
  background: #6783a2;
  transform: scale(0.95);
}

.vhc-arr:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   TABLET
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 1023px) {
  .vhc-body {
    padding: 16px;
  }

  .vhc-title {
    font-size: 16px;
  }

  .vhc-cta {
    width: 100%;
    min-height: 52px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
  .vhc-body {
    padding: 14px;
  }

  .vhc-title {
    font-size: 15px;
  }

  .vhc-desc {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .vhc-cta {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
  }

  .vhc-arr {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .vhc-controls {
    margin-top: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .vhc-card,
    .vhc-img-wrap img,
    .vhc-cta,
    .vhc-arr,
    .vhc-progress-fill {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════
   HOTEL SELECTOR WIDGET
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .hotel-selector-widget,
  .widget-open-tab { display: none !important; }
}

.widget-open-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #6783a2;
  width: 32px;
  padding: 22px 0;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  border-left: 3px solid #a08e50;
  box-shadow: -2px 0 12px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s;
}
.widget-open-tab.visible {
  opacity: 1;
  pointer-events: auto;
}
.widget-open-tab:hover { background: #a08e50; }
.widget-open-tab .tab-icon {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
}
.widget-open-tab .tab-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Verdana, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.hotel-selector-widget {
  position: fixed !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) translateX(0) !important;
  z-index: 99999 !important;
  width: 258px !important;
  background: #ffffff !important;
  border-radius: 12px 0 0 12px !important;
  border-left: 4px solid #a08e50 !important;
  box-shadow: -6px 0 32px rgba(103,131,162,0.22), 0 0 0 1px rgba(103,131,162,0.08) !important;
  overflow: hidden !important;
  padding: 0 !important;
  max-width: none !important;
  font-family: Arial, sans-serif !important;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1) !important;
}
.hotel-selector-widget.widget-closed {
  transform: translateY(-50%) translateX(258px) !important;
}

.widget-header {
  background: linear-gradient(135deg, #4d6480 0%, #3a4f65 100%) !important;
  padding: 14px 16px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}
.widget-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 2px;
  background: #a08e50;
  border-radius: 2px;
}
.widget-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.widget-header-title i { color: #a08e50 !important; font-size: 13px !important; }

.widget-close-btn {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.45) !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  transition: color 0.2s, background 0.2s !important;
  box-shadow: none !important;
  width: auto !important;
}
.widget-close-btn:hover {
  color: #a08e50 !important;
  background: rgba(255,255,255,0.1) !important;
  transform: none !important;
}

.widget-body {
  padding: 16px 16px 14px !important;
  background: #fff !important;
}

.hotel-selector-widget label[for="hotelSelect"] {
  display: block !important;
  font-size: 9px !important;
  font-family: Verdana, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  color: #a08e50 !important;
  font-weight: 700 !important;
  margin-bottom: 7px !important;
  font-size: 9px !important;
}
.hotel-selector-widget label[for="hotelSelect"] i {
  margin-right: 4px !important;
  font-size: 9px !important;
  color: #a08e50 !important;
}

#hotelSelect {
  width: 100% !important;
  padding: 10px 32px 10px 12px !important;
  border: 1px solid #dce4ed !important;
  border-radius: 6px !important;
  background-color: #f8fafc !important;
  color: #3a4f65 !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a08e50' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
#hotelSelect:focus {
  outline: none !important;
  border-color: #6783a2 !important;
  box-shadow: 0 0 0 3px rgba(103,131,162,0.12) !important;
}

#hotelSelectorBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  background: #6783a2 !important;
  background-color: #6783a2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 3px 12px rgba(103,131,162,0.3) !important;
  margin-bottom: 12px !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  transform: none !important;
}
#hotelSelectorBtn i {
  color: #e8d5a0 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}
#hotelSelectorBtn:hover {
  background: #a08e50 !important;
  background-color: #a08e50 !important;
  box-shadow: 0 5px 16px rgba(160,142,80,0.35) !important;
  transform: translateY(-1px) !important;
}
#hotelSelectorBtn:active {
  transform: translateY(0) !important;
}

.widget-divider {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}
.widget-divider::before {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #dce4ed) !important;
}
.widget-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #dce4ed, transparent) !important;
}
.widget-divider span {
  font-size: 9px !important;
  color: #b0bec8 !important;
  font-family: Verdana, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.hotel-selector-widget .contact-buttons {
  display: flex !important;
  gap: 7px !important;
  margin-top: 0 !important;
}
.hotel-selector-widget .btn-contact-phone,
.hotel-selector-widget .btn-contact-wa {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 6px !important;
  border-radius: 6px !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: #fff !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  text-align: center !important;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s !important;
}
.hotel-selector-widget .btn-contact-phone {
  background: #6783a2 !important;
  background-color: #6783a2 !important;
  box-shadow: 0 2px 8px rgba(103,131,162,0.25) !important;
}
.hotel-selector-widget .btn-contact-phone:hover {
  background: #4d6480 !important;
  background-color: #4d6480 !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.hotel-selector-widget .btn-contact-wa {
  background: #25D366 !important;
  background-color: #25D366 !important;
  box-shadow: 0 2px 8px rgba(37,211,102,0.22) !important;
}
.hotel-selector-widget .btn-contact-wa:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.hotel-selector-widget .btn-contact-phone i,
.hotel-selector-widget .btn-contact-wa i {
  font-size: 12px !important;
  margin-right: 0 !important;
}

.widget-footer {
  padding: 9px 16px 12px !important;
  text-align: center !important;
  background: #f8fafc !important;
  border-top: 1px solid #edf1f5 !important;
  position: relative !important;
}
.widget-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 1px;
  background: #a08e50;
}
.widget-footer span {
  font-size: 8.5px !important;
  color: #6783a2 !important;
  font-family: Verdana, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
}
.widget-footer i { color: #a08e50 !important; font-size: 8px !important; margin-right: 4px !important; }
	
	
	.legal-buttons .btn {
    font-size: 13px;
    padding: 6px 12px;
    letter-spacing: 0.3px;
    border-radius: 20px;
}

.legal-buttons .btn + .btn {
    margin-left: 6px;
}

/* Versione ancora più compatta su mobile */
@media (max-width: 576px) {
    .legal-buttons .btn {
        font-size: 12px;
        padding: 5px 10px;
    }
}
	
	footer .columns .row {
    display: flex;
    flex-wrap: wrap;
}

footer .columns .col {
    display: flex;
}

.footer-hotel-card,
.legal-links {
    width: 100%;
}



/* ── imageGallery1 — griglia fotografica redesign ─────────── */

.imageGallery1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 32px 0;
    overflow: visible;
    /* reset float legacy */
    float: none !important;
}

/* Reset clear legacy */
.imageGallery1 .clear { display: none; }

/* Prima foto: doppia larghezza per dare ritmo visivo */
.imageGallery1 > a:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Ogni cella */
.imageGallery1 > a {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-secondary);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    /* animazione entrata */
    opacity: 0;
    transform: scale(0.96);
    transition: opacity .45s ease, transform .45s ease;
}

.imageGallery1 > a.gallery-visible {
    opacity: 1;
    transform: scale(1);
}

/* Ritardo progressivo cascade */
.imageGallery1 > a:nth-child(1)  { transition-delay: .00s; }
.imageGallery1 > a:nth-child(2)  { transition-delay: .06s; }
.imageGallery1 > a:nth-child(3)  { transition-delay: .12s; }
.imageGallery1 > a:nth-child(4)  { transition-delay: .18s; }
.imageGallery1 > a:nth-child(5)  { transition-delay: .24s; }
.imageGallery1 > a:nth-child(6)  { transition-delay: .30s; }
.imageGallery1 > a:nth-child(7)  { transition-delay: .36s; }
.imageGallery1 > a:nth-child(8)  { transition-delay: .42s; }
.imageGallery1 > a:nth-child(9)  { transition-delay: .48s; }
.imageGallery1 > a:nth-child(10) { transition-delay: .54s; }

/* Immagine: sovrascrive img-responsive e attributi inline */
.imageGallery1 > a > img,
.imageGallery1 > a > img.img-responsive,
.imageGallery1 > a > img.lazyload {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;  /* annulla img-responsive */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 6px;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    /* annulla padding/margin da .photo img */
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Overlay scuro al hover */
.imageGallery1 > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            160deg,
            rgba(162, 209, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.55) 100%
    );
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 1;
    border-radius: 6px;
}

/* Icona lente */
.imageGallery1 > a::after {
    content: '\f00e';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    color: #fff;
    font-size: 28px;
    opacity: 0;
    transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    pointer-events: none;
}

/* Hover */
.imageGallery1 > a:hover > img {
    transform: scale(1.07);
}
.imageGallery1 > a:hover::before { opacity: 1; }
.imageGallery1 > a:hover::after  {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .imageGallery1 {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .imageGallery1 > a:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 540px) {
    .imageGallery1 {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .imageGallery1 > a::after { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   VMF – Vistamare Fiera
   Prefisso ultra-specifico: vmf-  (zero collisioni con il resto del sito)
   Palette: #6783a2 (primary), #a08e50 (accent), #e1e6ec (bg light), #c5d4e5
   ══════════════════════════════════════════════════════════════════════ */

/* ── Answer block ─────────────────────────────────────────────────────── */
.vmf-answer {
    background: linear-gradient(135deg, #4a6175 0%, #6783a2 100%);
    color: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    margin-bottom: 32px;
}
.vmf-answer__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 8px;
}
.vmf-answer__headline {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 18px;
    color: #fff;
}
.vmf-answer__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 22px;
}
.vmf-answer__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vmf-answer__stat strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #4a6175;
}
.vmf-answer__stat span {
    font-size: 12px;
    color: #555;
}
/* su sfondo blu (dentro vmf-answer) testo bianco */
.vmf-answer .vmf-answer__stat strong {
    color: #fff;
}
.vmf-answer .vmf-answer__stat span {
    color: #fff;
    opacity: .8;
}
.vmf-answer__btn {
    display: inline-block;
    background: #fff;
    color: #4a6175;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s, color .2s;
    margin-right: 10px;
    margin-top: 4px;
}
.vmf-answer__btn:hover,
.vmf-answer__btn:focus {
    background: #e1e6ec;
    color: #4a6175;
    text-decoration: none;
}
.vmf-answer__btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.5);
}
.vmf-answer__btn--outline:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* ── Titoli sezione ───────────────────────────────────────────────────── */
.vmf-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #4a6175;
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid #e1e6ec;
}
.vmf-section-title .vmf-icon {
    color: #6783a2;
    margin-right: 8px;
}

/* ── Calendario fiere 2026 ────────────────────────────────────────────── */
.vmf-calendar-wrap {
    overflow-x: auto;
    margin-bottom: 32px;
    border-radius: 8px;
    border: 1px solid #d0dce8;
}
.vmf-calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.vmf-calendar-table thead tr {
    background: #4a6175;
    color: #fff;
}
.vmf-calendar-table thead th {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.vmf-calendar-table tbody tr {
    border-bottom: 1px solid #eef2f6;
    transition: background .15s;
}
.vmf-calendar-table tbody tr:last-child {
    border-bottom: none;
}
.vmf-calendar-table tbody tr:hover {
    background: #f0f4f8;
}
.vmf-calendar-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
}
.vmf-calendar-table tbody tr.vmf-cal-row--main {
    background: #f0f4f8;
}
.vmf-calendar-table tbody tr.vmf-cal-row--main td {
    font-weight: 600;
}
.vmf-cal-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(103,131,162,.12);
    color: #6783a2;
    border: 1px solid rgba(103,131,162,.25);
    white-space: nowrap;
}
.vmf-cal-date {
    white-space: nowrap;
    color: #555;
    font-size: 13px;
}
.vmf-cal-link {
    color: #6783a2;
    font-weight: 600;
    text-decoration: none;
}
.vmf-cal-link:hover {
    text-decoration: underline;
    color: #4a6175;
}

/* ── Trasporti / Logistica ────────────────────────────────────────────── */
.vmf-transport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.vmf-transport-card {
    background: #f5f7fa;
    border: 1px solid #d0dce8;
    border-radius: 10px;
    padding: 18px 20px;
}
.vmf-transport-card__icon {
    font-size: 26px;
    margin-bottom: 10px;
    display: block;
    line-height: 1;
}
.vmf-transport-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #4a6175;
    margin-bottom: 6px;
}
.vmf-transport-card__time {
    font-size: 24px;
    font-weight: 800;
    color: #6783a2;
    line-height: 1;
    margin-bottom: 4px;
}
.vmf-transport-card__detail {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

/* ── Box indirizzo ingressi ───────────────────────────────────────────── */
.vmf-address-box {
    background: #faf7ef;
    border-left: 4px solid #a08e50;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.7;
}
.vmf-address-box strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7a6b3a;
}
.vmf-address-box strong:first-child {
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ── Perché Vistamare ─────────────────────────────────────────────────── */
.vmf-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.vmf-why-item {
    background: #f5f7fa;
    border: 1px solid #d0dce8;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vmf-why-item__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    color: #6783a2;
}
.vmf-why-item__text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #4a6175;
    margin-bottom: 2px;
}
.vmf-why-item__text span {
    font-size: 12px;
    color: #666;
}

/* ── Card cluster fiere ───────────────────────────────────────────────── */
.vmf-fairs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.vmf-fair-card {
    border: 1px solid #d0dce8;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
    color: inherit;
}
.vmf-fair-card:hover,
.vmf-fair-card:focus {
    box-shadow: 0 6px 24px rgba(103,131,162,.20);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.vmf-fair-card__header {
    background: #4a6175;
    padding: 12px 14px;
}
.vmf-fair-card__date {
    font-size: 11px;
    font-weight: 700;
    color: #c5d4e5;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vmf-fair-card__body {
    padding: 14px;
}
.vmf-fair-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #4a6175;
    margin-bottom: 4px;
}
.vmf-fair-card__sector {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}
.vmf-fair-card__cta {
    font-size: 12px;
    font-weight: 700;
    color: #6783a2;
    display: block;
}

/* ── CTA bar offerta ──────────────────────────────────────────────────── */
.vmf-cta-bar {
    background: linear-gradient(135deg, #4a6175 0%, #6783a2 100%);
    color: #fff;
    border-radius: 10px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0;
}
.vmf-cta-bar__text {
    font-size: 16px;
    font-weight: 700;
}
.vmf-cta-bar__sub {
    font-size: 13px;
    opacity: .85;
    margin-top: 3px;
}
.vmf-cta-bar__btn {
    background: #fff;
    color: #4a6175;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s;
    display: inline-block;
}
.vmf-cta-bar__btn:hover,
.vmf-cta-bar__btn:focus {
    background: #e1e6ec;
    color: #4a6175;
    text-decoration: none;
}

/* ── FAQ accordion (details/summary nativo) ───────────────────────────── */
.vmf-faq {
    margin-bottom: 36px;
}
.vmf-faq__item {
    border: 1px solid #d0dce8;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.vmf-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14px;
    color: #4a6175;
    cursor: pointer;
    list-style: none;
    background: #f5f7fa;
    transition: background .15s;
    user-select: none;
}
.vmf-faq__question::-webkit-details-marker { display: none; }
.vmf-faq__question::marker { display: none; }
.vmf-faq__question::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: #6783a2;
    flex-shrink: 0;
    margin-top: -1px;
}
.vmf-faq__item details[open] > .vmf-faq__question {
    background: #eef2f6;
    color: #4a6175;
}
.vmf-faq__item details[open] > .vmf-faq__question::after {
    content: "\2212";
}
.vmf-faq__answer {
    padding: 14px 16px;
    font-size: 14px;
    color: #444;
    line-height: 1.75;
    border-top: 1px solid #d0dce8;
    background: #fff;
}
.vmf-faq__answer a {
    color: #6783a2;
    font-weight: 600;
}
.vmf-faq__answer a:hover {
    text-decoration: underline;
}

/* ── Nota di breadcrumb per pagine cluster ────────────────────────────── */
.vmf-cluster-back {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}
.vmf-cluster-back a {
    color: #6783a2;
    font-weight: 600;
    text-decoration: none;
}
.vmf-cluster-back a:hover {
    text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vmf-answer {
        padding: 20px 18px;
    }
    .vmf-answer__headline {
        font-size: 18px;
    }
    .vmf-answer__stat strong,
    .vmf-answer .vmf-answer__stat strong {
        font-size: 22px;
    }
    .vmf-cta-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .vmf-transport-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .vmf-transport-grid,
    .vmf-fairs-grid,
    .vmf-why-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   SINGLE PHOTO HEADER  (.vm-subheader)
   Attivato da cartellaheader = percorso a file immagine
   ============================================================ */
.vm-subheader {
    position: relative;
    height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vm-subheader__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(74,97,117,.68) 0%, rgba(30,45,60,.48) 100%);
}
.vm-subheader__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1.5rem;
    max-width: 860px;
    width: 100%;
}
.vm-subheader__title {
    color: #fff;
    font-size: clamp(1.4rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
    margin: 0;
}
@media (max-width: 767px) {
    .vm-subheader { height: 260px; }
    .vm-subheader__title { font-size: 1.3rem; }
}

/* ============================================================
   LISTA NEWS — vn-news-card
   ============================================================ */
.vn-news-list {
    margin: 8px 0 24px;
}
.vn-news-card {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid #d0dae6;
    border-radius: 8px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(103,131,162,.10);
    transition: box-shadow .25s ease, transform .25s ease;
    text-decoration: none;
}
.vn-news-card:hover {
    box-shadow: 0 6px 20px rgba(103,131,162,.22);
    transform: translateY(-2px);
}
.vn-news-card__img-wrap {
    flex: 0 0 220px;
    width: 220px;
    min-height: 160px;
    overflow: hidden;
    display: block;
    background: #e1e6ec;
}
.vn-news-card__img-wrap--empty {
    background: #e1e6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%236783a2' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/40px no-repeat;
}
.vn-news-card__img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.vn-news-card:hover .vn-news-card__img {
    transform: scale(1.04);
}
.vn-news-card__body {
    flex: 1;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vn-news-card__date {
    font-size: 12.5px;
    color: #6783a2;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vn-news-card__date i {
    font-size: 13px;
    opacity: .8;
}
.vn-news-card__title {
    margin: 0 0 10px;
    font-size: 1.13em;
    line-height: 1.35;
    font-weight: 700;
}
.vn-news-card__title a {
    color: #3a5270;
    text-decoration: none;
}
.vn-news-card__title a:hover {
    color: #a08e50;
    text-decoration: none;
}
.vn-news-card__excerpt {
    flex: 1;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 16px;
}
.vn-news-card__cta {
    align-self: flex-start;
    font-size: 13.5px;
    padding: 7px 18px;
}

@media (max-width: 767px) {
    .vn-news-card {
        flex-direction: column;
    }
    .vn-news-card__img-wrap {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
        min-height: 0;
    }
    .vn-news-card__img {
        min-height: 0;
        height: 200px;
    }
    .vn-news-card__body {
        padding: 14px 16px;
    }
}

/* ── Informazioni pratiche fiera ──────────────────────────────────────── */
.vmf-practical-info {
    border: 1px solid #d0dce8;
    border-radius: 10px;
    margin: 36px 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(103,131,162,.10);
}
.vmf-practical-info__title {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #4a6175 0%, #6783a2 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 13px 20px;
    margin: 0;
}
.vmf-practical-info__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
}
.vmf-practical-info__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-top: 1px solid #e8eef5;
    border-left: 1px solid #e8eef5;
}
/* prima riga: niente bordo top */
.vmf-practical-info__item:nth-child(-n+3) {
    border-top: none;
}
/* prima colonna: niente bordo left */
.vmf-practical-info__item:nth-child(3n+1) {
    border-left: none;
}
.vmf-practical-info__icon {
    font-size: 20px;
    line-height: 1;
}
.vmf-practical-info__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #6783a2;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vmf-practical-info__value {
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
}
.vmf-practical-info__value a {
    color: #6783a2;
    font-weight: 600;
    text-decoration: none;
}
.vmf-practical-info__value a:hover {
    color: #a08e50;
    text-decoration: underline;
}
.vmf-pi-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .03em;
}
.vmf-pi-badge--b2b   { background: #dde8f4; color: #2a4a6b; }
.vmf-pi-badge--b2c   { background: #d6f0e0; color: #1a6b3a; }
.vmf-pi-badge--misto { background: #fde8d0; color: #a04010; }
@media (max-width: 768px) {
    .vmf-practical-info__grid { grid-template-columns: repeat(2, 1fr); }
    /* reset regole 3 colonne */
    .vmf-practical-info__item:nth-child(-n+3) { border-top: 1px solid #e8eef5; }
    .vmf-practical-info__item:nth-child(3n+1) { border-left: 1px solid #e8eef5; }
    /* applica per 2 colonne */
    .vmf-practical-info__item:nth-child(-n+2) { border-top: none; }
    .vmf-practical-info__item:nth-child(2n+1) { border-left: none; }
}
@media (max-width: 480px) {
    .vmf-practical-info__grid { grid-template-columns: 1fr; }
    .vmf-practical-info__item { border-left: none !important; }
    .vmf-practical-info__item:first-child { border-top: none; }
}


/* ── Header gallery: 3 foto su MacBook Pro 13" (1280px o 1440px CSS), 4 su schermi larghi */
@media (min-width: 961px) and (max-width: 1499px) {
    .carousel-box .col-md-3:nth-child(4) {
        display: none;
    }
    .carousel-box .col-md-3 {
        width: 33.3333%;
    }
}

/* ============================================================
   SINGLE PHOTO HERO  (.vm-hero)
   Attivato da cartellaheader = immagine + headerstile = 'hero'.
   La foto riempie la prima schermata: 100dvh meno l'ingombro
   di top-bar e nav, così il bordo inferiore coincide col fold.
   Le due risoluzioni arrivano da variabili CSS inline (720/1920).
============================================================ */
.vm-hero {
    position: relative;
    /* svh e non dvh: su mobile dvh cambia mentre la barra del browser
       scompare e l'hero "salterebbe" durante lo scroll. vh fa da riserva
       per i browser che non conoscono svh. */
    height: calc(100vh - 190px);
    height: calc(100svh - 190px);
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #22334a; /* dietro la foto mentre carica: niente lampo bianco */
}
.vm-hero__media,
.vm-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vm-hero__media img {
    object-fit: cover;
    object-position: center;
    display: block;
}
.vm-hero__overlay {
    position: absolute;
    inset: 0;
    /* Gradiente a piena forza; la scurezza scelta nel CMS scala tutto
       tramite l'opacità: 60 (default) = identico all'aspetto originale. */
    background: linear-gradient(180deg, rgba(20,32,45,.50) 0%, rgba(20,32,45,.30) 45%, rgba(16,26,38,.92) 100%);
    opacity: calc(var(--vm-overlay, 40) / 100);
}
.vm-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 74px;             /* 74: spazio per il mouse in basso */
    align-self: flex-end;             /* card in basso, come il riferimento */
    display: flex;
    justify-content: flex-start;
}
/* Card traslucida che porta breadcrumb e titolo: la foto resta luminosa */
.vm-hero__card {
    background: rgba(16, 26, 38, .52);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 18px;
    padding: 18px 30px 20px 24px;
    min-width: 280px;
    max-width: 640px;
}
.vm-hero__crumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.vm-hero__crumb i { color: rgba(255,255,255,.85); font-size: 12px; }
.vm-hero__crumb a {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
}
.vm-hero__crumb a:hover { color: #fff !important; text-decoration: underline !important; }
.vm-hero__title {
    color: #fff;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 700;
    line-height: 1.18;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
    margin: 0;
    text-wrap: balance;      /* titoli su due righe bilanciate, non 90/10 */
}
/* Indicatore a forma di mouse: sagoma con rotellina che scende */
.vm-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    width: 27px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 15px;
    background: rgba(16,26,38,.18);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.vm-hero__scroll span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #fff;
    animation: vmHeroRotella 2s ease-in-out infinite;
}
.vm-hero__scroll:hover { border-color: #fff; background: rgba(16,26,38,.45); }
@keyframes vmHeroRotella {
    0%   { transform: translateY(0);    opacity: 1; }
    60%  { transform: translateY(12px); opacity: 0; }
    61%  { transform: translateY(0);    opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 1023px) {
    .vm-hero { height: calc(100vh - 130px); height: calc(100svh - 130px); min-height: 400px; }
}
@media (max-width: 767px) {
    .vm-subheader[style*="--vm-sub-mob"] { background-image: var(--vm-sub-mob) !important; }
    .vm-hero__content { padding: 0 14px 26px; }
    .vm-hero__card { min-width: 0; width: 100%; padding: 14px 18px 16px; border-radius: 14px; }
    .vm-hero__scroll { display: none; }   /* su telefono si scorre comunque */
}
/* ── Opzione: zoom lento cinematico (Ken Burns) ──
   Un solo passaggio di ~18s che poi si ferma: l'hero "respira" all'arrivo
   senza pulsare all'infinito. */
.vm-hero--kenburns .vm-hero__media img {
    animation: vmKenBurns 18s cubic-bezier(.25,.46,.45,.94) both;
    transform-origin: center;
    will-change: transform;
}
@keyframes vmKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* ── Opzione: vignetta cinematica ──
   Bordi scuriti via gradiente radiale e resa colore leggermente più calda. */
.vm-hero--vignetta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(10,18,28,.42) 100%);
}
.vm-hero--vignetta .vm-hero__media img {
    filter: saturate(1.08) contrast(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .vm-hero__scroll span { animation: none; }
    .vm-hero--kenburns .vm-hero__media img { animation: none; }
}