/*@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');*/
@font-face {
    font-family: "Gilda Display";
    src: url('fonts/GildaDisplay-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Urbanist";
    src: url('fonts/Urbanist-VariableFont_wght.ttf') format('truetype');
}
.urbanist-regular {
  font-family: "Urbanist", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.gilda-display-regular {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
}
body{
	font-family: "Urbanist", serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 32px;
	color:#797c7f !important;
	background-color: #ffffff;
}
p {
	color:#676771  !important;
	line-height: 34px;
}
h1 {
	font-family: "Gilda Display", serif;
	text-align: center;
	color: #ffffff;
	font-size: 70px;
	letter-spacing: 14px;
}
h2 {
	font-family: "Gilda Display", serif;
	color: #010305;
}
h3 {
	font-size: 25px;
}
h3 a{
	color: #010305;;
}
h4{
	font-size: 32px;
	color: #010305;
}
a {
	color: #04395a;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #1f597d;
	text-decoration: none;
}
.verdino{
	color: #17b900;
}
.blu{
	color: #1f597d;
}
.form-control {
  font-size: inherit;
 }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #1f597d;
}
.spot-white{
	color:#ffffff !important;
}
#logo{
	max-width: 200px;
	aspect-ratio: 2258 / 407;
}
#logo2{
	max-width: 200px;
	aspect-ratio: 2258 / 407
}
#logo3{
	max-width: 200px;
	aspect-ratio: 2258 / 407
}
.bandiera {
  width: 22px;
  margin-right: 10px;
  margin-bottom: 3px;
}
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.nav-link {
  font-size: 20px;
}
.bg-dark {
  box-shadow: 0 0 15px #333;
  background-color: #fff !important;
}
#navbar-top {
  transition: background-color 0.5s ease 0s;
}
.navbar-toggler {
	color: #cacaca;
  background-color: #ddd;
}
/* slide home full ===================================================*/
/* Impostare l'immagine a schermo intero */
.fotoslideFull {
	position: relative;
	height: 100vh; /* Imposta l'altezza del carosello a tutta l'altezza della finestra */
	/*overflow: hidden; /* Evita che le immagini escono dai bordi */
}
.scurita{
	filter: brightness(80%);
}
.stelle{
	max-width: 130px;
}
#header{
	min-height: 300px;	
}
.imgheader{
	min-height: 300px;
	text-align: center;
	color: #ffffff;
	text-shadow: 1px 1px 8px #0000003d
}

.uno{
	background-image: url('../img/header/1.jpg');
	background-position: center center;
}
.due{
	background-image: url('../img/header/2.jpg');
	background-position: center center;
}
.tre{
	background-image: url('../img/header/3.jpg');
	background-position: center center;
	background-size: cover;
}
#carouselHomeSlider {
	width: 100%;
	height: 100%;
}
/* Assicurati che il carosello stesso occupi tutto lo spazio */
#carouselHomeSlider .carousel-inner {
	height: 100%;
	width: 100%;
}

#carouselHomeSlider .carousel-item {
	width: 100%;
	height: 100%;
}
/* Aggiungi il comportamento a schermo intero per le immagini */
#carouselHomeSlider .carousel-item img {
	object-fit: cover; /* Fai in modo che l'immagine copra tutta la finestra */
	width: 100%;
	height: 100%;
	transition: transform 10s ease;
	transform: scale(1.0);
}

#carouselHomeSlider .carousel-item .carousel-caption p,
#carouselHomeSlider .carousel-item .carousel-caption h1 {
  text-shadow: 1px 1px 2px black;
}
#carouselHomeSlider .carousel-caption {
  bottom: 37%;
}
#carouselHomeSlider .carousel-caption {
  right: 30%;
  left: 30%;
}
#carouselHomeSlider .carousel-caption {
  bottom: 37%;
}
/* FINEEEEEEEEEEEEEE slide home full ===================================================*/
.section-subtitle {
  font-family: "Urbanist", sans-serif;
  margin-bottom: 10px;
  color: #04395a;
  font-size: 15px;
  align-items: center;
  letter-spacing: 2px;
}
.section-title {
  font-family: "Gilda Display", serif;
  font-size: 35px;
  line-height: 50px;
  color: #141414;
  position: relative;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.floating-image {
    animation: floatImage 5s ease-in-out infinite alternate;
}

.floating-image.opposite {
    animation: floatImageReverse 5s ease-in-out infinite alternate;
}

@keyframes floatImage {
    0% {
        transform: translateY(25px);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(5px);
    }
}

@keyframes floatImageReverse {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(25px);
    }
}

.icone {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: brightness(0.8); /* Inizia scura */
    margin: 10px;
}

.icone:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1); /* Diventa chiara quando hover */
}
.b-divider-1 {
    width: 100%;
    height: 400px;
    background-image: url("../img/4.jpg");
    background-position: center center;
    background-size: cover;
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    position: relative; /* Necessario per il posizionamento dell'overlay */
}
.b-divider-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Overlay scuro */
    z-index: 1; /* Mette l'overlay sopra l'immagine ma sotto il testo */
}
.b-divider-2 {
    width: 100%;
    height: 400px;
    background-image: url("../img/1.jpg");
    background-position: center center;
    background-size: cover;
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    position: relative; /* Necessario per il posizionamento dell'overlay */
}
.b-divider-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Overlay scuro */
    z-index: 1; /* Mette l'overlay sopra l'immagine ma sotto il testo */
}
.b-divider-3 {
    width: 100%;
    height: 400px;
    background-image: url("../img/2.jpg");
    background-position: center center;
    background-size: cover;
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    position: relative; /* Necessario per il posizionamento dell'overlay */
}
.b-divider-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Overlay scuro */
    z-index: 1; /* Mette l'overlay sopra l'immagine ma sotto il testo */
}
.h1divider {
    position: relative; /* Per far sì che il testo sia sopra l'overlay */
    text-align: center;
    max-width: 1190px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px black;
    color: white; /* Scritta chiara */
    padding: 20px;
    z-index: 2; /* Assicura che il testo sia sopra l'overlay */
    padding-top: 120px;
    
}
.h1divider H1 {
font-size: 57px;
}
.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: #fbf0e3;;
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
/* fine slide home full ===================================================*/
/* Animazioni */
@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}
.square {
  width: 200px;
  height: 200px;
  background: orange;
  // etc...
}

@media (prefers-reduced-motion: no-preference) {
  .square-animation {
    animation: wipe-enter 1s 1;
  }
}



.zoom {
	overflow: hidden;
	margin: 0 auto;
}

.zoom img {
	width: 100%;
	transition: 0.3s all ease-in-out;
}

.zoom:hover img {
	transform: scale(1.04);
}
.animated {
	-webkit-animation-duration: 1.5s;
			animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
}

@keyframes fadeInLeft {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(-40%, 0, 0);
			transform: translate3d(-40%, 0, 0);
	}

	100% {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
	}
}
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
			animation-name: fadeInLeft;
}
@keyframes fadeInRight {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(40%, 0, 0);
			transform: translate3d(40%, 0, 0);
	}

	100% {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
	}
}
.fadeInRight {
	-webkit-animation-name: fadeInRight;
			animation-name: fadeInRight;
}
@keyframes fadeInTop {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInTop {
	-webkit-animation-name: fadeInTop;
	animation-name: fadeInTop;
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 40%, 0);
		transform: translate3d(0, 40%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInBottom {
	-webkit-animation-name: fadeInBottom;
	animation-name: fadeInBottom;
}
.ruota {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.ruota:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

i.i-ruota{
	display: inline-block;
	transition: transform 0.8s ease-in-out;
}
i.i-ruota:hover {
	transform: rotate(360deg);
}

#cswrapper {
	margin-left: auto;
	margin-right: auto;
}

#cscontainer {
	justify-content: center;
	font-family: "Gilda Display", serif;
}
#cswrapper h4 {
	animation: text-shadow 7.0s ease-in-out infinite;
}
#cswrapper h4:hover {
	animation-play-state: paused;
}
@keyframes text-shadow {
	0% {  
		transform: translateY(0);
		text-shadow: 
			0 0 0 #0c2ffb, 
			0 0 0 #2cfcfd, 
			0 0 0 #fb203b, 
			0 0 0 #fefc4b;
	}

	5% {  
		transform: translateY(-1em);
		text-shadow: 
			0 0.125em 0 #0c2ffb, 
			0 0.25em 0 #2cfcfd, 
			0 -0.125em 0 #fb203b, 
			0 -0.25em 0 #fefc4b;
	}

	10% {  
		transform: translateY(0.5em);
		text-shadow: 
			0 -0.0625em 0 #0c2ffb, 
			0 -0.125em 0 #2cfcfd, 
			0 0.0625em 0 #fb203b, 
			0 0.125em 0 #fefc4b;
	}
	
	20% {
		transform: translateY(-0.25em);
		text-shadow: 
			0 0.03125em 0 #0c2ffb, 
			0 0.0625em 0 #2cfcfd, 
			0 -0.03125em 0 #fb203b, 
			0 -0.0625em 0 #fefc4b;
	}

	30% {  
		transform: translateY(0);
		text-shadow: 
			0 0 0 #0c2ffb, 
			0 0 0 #2cfcfd, 
			0 0 0 #fb203b, 
			0 0 0 #fefc4b;
	}
	
}
/* Animation property */
.telmove {
	animation: wiggle 2s linear infinite;
}
/* Keyframes */
@keyframes wiggle {
	0%, 7% {
	transform: rotateZ(0);
	}
	15% {
	transform: rotateZ(-15deg);
	}
	20% {
	transform: rotateZ(10deg);
	}
	25% {
	transform: rotateZ(-10deg);
	}
	30% {
	transform: rotateZ(6deg);
	}
	35% {
	transform: rotateZ(-4deg);
	}
	40%, 100% {
	transform: rotateZ(0);
	}
}
.telmove {
	position: absolute;
}
input:user-invalid {
  border: 2px solid #bdd7fa;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

@media (prefers-reduced-motion: reduce) {
	* {
	  animation: none !important;
	  transition: none !important;
	}
}
.footer
{
background-color: #FFF;
}
/* Media Query per schermi mobili (max-width: 768px) */
@media (max-width: 768px) {
	body{
	font-size: 20px;
	}
	.nav-link {
  font-size: 22px;
	}
  h1 {
	font-size: 40px;
	letter-spacing: 7px;
	}
	.h1divider H1 {
	font-size: 32px;
	font-weight: bold;
	}
  .fotoslideFull {
    height: 670px; /* Imposta l'altezza a tutta la finestra anche sui dispositivi mobili */
   
  }
  #carouselHomeSlider .carousel-caption {
  bottom: 30%;
	}
  .spot-white{
  	font-size: 16px;
  }
  #carouselHomeSlider .carousel-item img {
    object-fit: cover; /* L'immagine occupa l'intero schermo senza distorsioni */
  }
  #carouselHomeSlider .carousel-caption {
  right: 7%;
  left: 7%;
	}
	.verde{
		font-size: 24px;
	}
	@keyframes fadeInLeft {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}
	.fadeInLeft {
		-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
	}
	@keyframes fadeInRight {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}
	.fadeInRight {
		-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
	}

}