/* Stile base per tutti i dispositivi */
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; 
background-color: #09dae6;
}


body {
  margin: 0;
  min-height: 100vh;
  background: 
    /* Bolle */
    radial-gradient(ellipse at 15% 20%, rgba(180,235,255,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(190,240,255,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 70%, rgba(170,230,255,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 75%, rgba(185,238,255,.13) 0%, transparent 50%),
    radial-gradient(circle at 25% 40%, rgba(200,245,255,.12) 0%, transparent 14%),
    radial-gradient(circle at 70% 50%, rgba(195,242,255,.10) 0%, transparent 16%),
    radial-gradient(circle at 40% 25%, rgba(210,250,255,.08) 0%, transparent 8%),
    radial-gradient(circle at 60% 80%, rgba(205,248,255,.09) 0%, transparent 10%),
    
    /* Piante acquatiche */
    repeating-linear-gradient(75deg, transparent 0, transparent 150px, rgba(30,180,80,.10) 150px, rgba(20,150,60,.06) 153px, rgba(40,200,100,.08) 157px, transparent 165px),
    repeating-linear-gradient(105deg, transparent 0, transparent 190px, rgba(50,210,110,.07) 190px, rgba(30,180,80,.05) 193px, rgba(60,220,120,.06) 197px, transparent 205px),
    repeating-linear-gradient(85deg, transparent 0, transparent 220px, rgba(20,160,70,.05) 220px, rgba(40,200,100,.03) 224px, transparent 230px),
    
    /* Vegetazione fondo */
    radial-gradient(ellipse at 10% 98%, rgba(40,200,100,.12) 0%, transparent 10%),
    radial-gradient(ellipse at 30% 95%, rgba(30,180,80,.10) 0%, transparent 12%),
    radial-gradient(ellipse at 55% 97%, rgba(50,210,110,.09) 0%, transparent 8%),
    radial-gradient(ellipse at 75% 96%, rgba(35,190,85,.11) 0%, transparent 10%),
    radial-gradient(ellipse at 92% 98%, rgba(45,200,95,.08) 0%, transparent 7%),
    
    /* Rocce */
    radial-gradient(ellipse at 20% 99%, rgba(100,80,60,.13) 0%, rgba(80,60,40,.06) 35%, transparent 60%),
    radial-gradient(ellipse at 60% 98%, rgba(120,100,80,.11) 0%, rgba(90,70,50,.05) 30%, transparent 55%),
    radial-gradient(ellipse at 85% 99%, rgba(110,90,70,.12) 0%, rgba(85,65,45,.06) 32%, transparent 58%),
    
    /* Riflessi e luce */
    repeating-linear-gradient(35deg, transparent 0, transparent 220px, rgba(180,235,255,.035) 220px, rgba(200,245,255,.025) 226px, transparent 235px),
    repeating-linear-gradient(-55deg, transparent 0, transparent 260px, rgba(160,225,255,.025) 260px, rgba(180,235,255,.015) 266px, transparent 275px),
    linear-gradient(180deg, rgba(200,240,255,.06) 0%, rgba(150,220,240,.03) 25%, rgba(100,200,230,.015) 50%, transparent 75%),
    
    /* Sedimenti */
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.02) 0%, transparent 4%),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,.015) 0%, transparent 3%),
    radial-gradient(circle at 45% 60%, rgba(255,255,255,.018) 0%, transparent 5%),
    
    /* Fondo acquario */
    radial-gradient(ellipse at 50% 0%, #4a8cba 0%, #3a7aa8 20%, #2a6890 45%, #1a5578 70%, #0e3d5a 85%, #062838 100%);
  
  background-size: 
    450px 450px, 500px 500px, 400px 400px, 480px 480px,
    300px 300px, 320px 320px, 220px 220px, 250px 250px,
    100% 100%, 100% 100%, 100% 100%,
    350px 350px, 320px 320px, 380px 380px, 300px 300px, 340px 340px,
    350px 350px, 400px 400px, 380px 380px,
    100% 100%, 100% 100%, 100% 100%,
    350px 350px, 320px 320px, 380px 380px,
    100% 100%;
  
  background-repeat: 
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat,
    repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat,
    repeat, repeat, repeat,
    repeat, repeat, repeat,
    no-repeat;
  
  animation: aquariumPulse 7s ease-in-out infinite alternate;
}

@keyframes aquariumPulse {
  0% { opacity: .92; }
  100% { opacity: 1; }
}

body::before,
body::after {
  content: '🐠';
  position: fixed;
  font-size: 40px;
  animation: fishSwim 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
    animation-iteration-count: 1;
}

body::before {
  content: '🐟';
  font-size: 35px;
  animation-duration: 20s;
  animation-delay: -10s;
  animation-iteration-count: 1;
	z-index: 1000;
}

body::after {
  content: '🐡';
  font-size: 30px;
  animation-duration: 22s;
  animation-delay: -15s;
  animation-iteration-count: 12;
  z-index: 1000;
    animation-iteration-count: 1;
}

@keyframes fishSwim {
  0% { 
    transform: translate(-50px, 20vh) scaleX(1);
    opacity: 0.5;
  }
  25% { 
    transform: translate(30vw, 40vh) scaleX(1);
    opacity: 0.8;
  }
  50% { 
    transform: translate(80vw, 25vh) scaleX(-1);
    opacity: 0.9;
  }
  75% { 
    transform: translate(40vw, 55vh) scaleX(-1);
    opacity: 0.7;
  }
  100% { 
    transform: translate(110vw, 35vh) scaleX(1);
    opacity: 0.5;
  }
}

.content {
  position: relative;
  z-index: 3;
  background: rgba(0, 20, 40, 0.2);
  backdrop-filter: blur(2px);
  min-height: 100vh;
  padding: 20px;
  color: #e0f0ff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

@keyframes aquariumPulse {
  0% { opacity: .92; }
  100% { opacity: 1; }
}


/*Body della starthone*/
.starthome {
  body {
    margin: 0;
  min-height: 100vh;
  background-color: blue;
}
}


.container1050 {
    max-width: 1050px !important;
    margin: 0 auto;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 0;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
}

/* Il pulsante è nascosto quando lo schermo è grande */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* MEDIA QUERY: si attiva quando lo schermo è largo al massimo 992px */
@media (max-width: 992px) {
    /* Mostra il pulsante */
    .menu-toggle { display: block; }

    /* Nascondi i link di default */
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: #444;
        position: absolute;
        top: 60px; /* Altezza della barra di navigazione */
        left: 0;
    }

    /* Classe per mostrare il menu quando si clicca */
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        text-align: center;
        width: 100%;
    }
}

/* Stili per desktop */
.footer-content {
    font-size: 30px;
}

/* Stili per mobile */
@media (max-width: 767px) {
    .footer-content {
        font-size: 21px;
    }
    /* Altre modifiche */
}
.ombra {
	-webkit-box-shadow: -5px 5px 15px #000000;
    box-shadow: -5px 5px 15px #000000;
}






/* Stili personalizzati per il layout delle 3 colonne */
		@media (min-width: 768px) {
			/* Su tablet e desktop: 25% - 25% - 50% */
			.col-special-1,
			.col-special-2 {
				flex: 0 0 50%;
				max-width: 50%;
			}
			.col-special-3 {
				flex: 0 0 50%;
				max-width: 50%;
			}
		}
		
		@media (max-width: 767px) {
			/* Su mobile: prime 2 colonne 50% ciascuna, terza 100% */
			.col-special-1,
			.col-special-2 {
				flex: 0 0 100%;
				max-width: 100%;
			}
			.col-special-3 {
				flex: 0 0 100%;
				max-width: 100%;
			}
			
			/* Margin-top 0 per l'header su mobile */
			.header-image {
				margin-top: 15px !important;
			}
		}
		
		/* Reset padding per colonne con spazi uniformi */
		.row-special {
			margin-right: -5px;
			margin-left: -5px;
		}
		
		.row-special > [class*="col-"] {
			padding-right: 5px;
			padding-left: 5px;
		}
		
		/* Contenitore interno per ogni colonna - allineamento verticale */
		.col-inner {
			padding: 5px;
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.col-inner3 {
/* 			padding: 5px; */
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		
		/* Per le prime due colonne - allinea il contenuto in alto */
		.col-special-1 .col-inner,
		.col-special-2 .col-inner {
			justify-content: flex-start;
		}
		
		/* Per la terza colonna - allineamento specifico */
		.col-special-3 .col-inner {
			justify-content: flex-start; /* Cambiato da space-between */
		}
		
		/* Contenitore del testo nella terza colonna */
		.col-special-3 .text-wrapper {
			margin-bottom: 0px
		}
		
		/* Contenitore dell'immagine nella terza colonna - spinge verso il basso */
		.col-special-3 .image-wrapper {
			margin-top: auto; /* Spinge l'immagine in basso */
		}
		
		/* Immagini responsive al 100% */
		.img-fluid-100 {
			max-width: 100%;
			height: auto;
			display: block;
			width: 100%;
		}
		
		/* Testi responsive con clamp */
		.text-col-1 {
			    font-size: clamp(15px, 1.5vw, 20px);
			text-align: left;
			color: #050ce2;
			font-weight: bold;
			padding: 5px 5px 5px 10px;
			border-bottom: 0px solid #ffffff;
			font-family: 'Gentium Plus', serif;
			line-height: 1.2;
			margin: 0;
		}
		
		.text-col-2 {
			font-size: clamp(17px, 2vw, 24px);
			text-align: left;
			color: rgb(52, 1, 1);
			font-weight: bold;
			padding: 5px 5px 5px 10px;
			border-bottom: 0px solid #FFF;
			font-family: 'Gentium Plus', serif;
			line-height: 1.2;
			margin: 0;
		}
		
		.text-col-3 {
			font-size: clamp(1rem, 4vw, 3rem);
			text-align: left;
			color: #00F;
			font-weight: bold;
			padding: 5px 5px 5px 10px;
			border-bottom: 0px solid #FFF;
			font-family: 'Gentium Plus', serif;
			line-height: 1.2;
			margin: 0;
		}
		
		/* Checkmark responsive */
		.checkmark {
			font-size: clamp(50px, 10vw, 106px);
			text-align: center;
			color: #F00;
			font-weight: bold;
			margin: -10px 0 0 0;
			font-family: 'Gentium Plus', serif;
			line-height: 1;
		}
		
		/* Ombra */
		/* .ombra {
			box-shadow: 0 2px 8px rgba(0,0,0,0.2);
		} */
		
		/* Margini uniformi per il contenitore */
		.container1050 {
			padding-left: 10px;
			padding-right: 10px;
		}
		
		/* Spazio bianco sotto le colonne */
		.colonne-section {
			padding-bottom: 15px;
		}
		
		/* Rimuovere il margin-top negativo su mobile */
		@media (max-width: 767px) {
			.container1050{
				margin-top: 5px !important;
			}
		}

				div.listino {
					text-align: left;
					text-decoration: none;
					color: #e67e22;
					padding-top: 4px;
					font-size: 24pt;
					font-weight: 600;
					font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", "sans-serif";
				}
		
				div.prezzi {
					text-align: center;
					padding-top: 3px;
				}


     div.flexBP {
      position: relative;
      display: flex;
      align-items: self-start;
      flex-direction: row;
      justify-content: center;
      gap: 20px 15px;
}