/* Reset e Impostazioni Base */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: "Times New Roman", Times, serif; background-color: #fcfcfc; color: #333; line-height: 1.6; padding-top: 100px; }
        a { color: #036dc5; text-decoration: underline;font-weight:bold; }
        a:hover { text-decoration: underline;}
        img { max-width: 100%; height: auto; display: block; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
        section { padding: 20px 0; border-bottom: 1px solid #eee; }
		
        h1 { color:#b52600;margin-bottom: 15px; font-weight: normal;}
        h2 { color:#000; margin-bottom: 15px; font-weight:normal; }
		h3 { color: #111; margin-top: 15px; margin-bottom: 15px; font-weight: normal; text-transform:uppercase;}
		

        /* Header Fisso */
        header { position: fixed; top: 0; left: 0; right: 0; height: auto; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 1000; padding: 10px 0; }
        .header-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
        .logo-area { flex: 1; min-width: 280px; }
        .logo { font-size: 24px; font-weight: bold; }
        .logo span { color: #036dc5; }
        .logo em { color: #444; font-style: normal; }
        .subtitle { font-size: 13px; color: #666; display: block; margin-top: 2px; }
        nav { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
        .nav-links { display: flex; gap: 15px; align-items: center; list-style: none; }
        .btn-spread { background-color: #036dc5; color: white; border: none; padding: 8px 15px; font-family: "Times New Roman", serif; font-size: 15px; cursor: pointer; border-radius: 4px; }
        .btn-spread:hover { background-color: #025596; }

        /* Slide Automatica Pure CSS (Senza Script) */
        .slider-container { overflow: hidden; position: relative; width: 100%; max-height: 450px; background: #eee; }
        .slider { display: flex; width: 300%; animation: slideAnimation 12s infinite; }
        .slide-item { width: 33.333%; position: relative; }
        .slide-item img { width: 100%; height: 450px; object-fit: cover; }
        .slide-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.9); padding: 15px; text-align: center; }
        @keyframes slideAnimation {
            0%, 27% { transform: translateX(0); }
            33%, 60% { transform: translateX(-33.333%); }
            66%, 93% { transform: translateX(-66.666%); }
            100% { transform: translateX(0); }
        }

        /* Breadcrumbs */
        .breadcrumbs { padding: 15px 0; font-size: 15PX; color: #666; border-bottom: 1px solid #eee; }

        /* Articolo Principale */
        .main-article { text-align: left; width: 100%; }
        .main-article h1, .main-article h2 { text-align: left; }
        .main-article p { text-align: justify; width: 100%; max-width: 100%; margin: 20px 0; FONT-SIZE:20PX; }
        
		/* Contenitore principale della foto */
.center-img-box {
    display: flex;
    flex-direction: column;   /* Incolonna la foto e la didascalia */
    align-items: center;      /* Centra orizzontalmente tutto il contenuto interno */
    justify-content: center;  /* Allinea al centro */
    margin: 30px auto;        /* Centra l'intero blocco nella pagina e dà spazio sopra/sotto */
    max-width: 800px;         /* Limite massimo di larghezza come nel tuo codice */
    width: 100%;
}

/* Regola specifica per l'immagine dentro il box */
.center-img-box img {
    display: block;
    max-width: 100%;          /* Impedisce alla foto di uscire dallo schermo sui telefoni */
    height: auto;
}

/* Regola per la didascalia */
.img-caption { 
    display: block !important;
    text-align: center !important; /* Forza il testo al centro indipendentemente da altre regole */
    font-style: italic; 
    color: #555; 
    margin-top: 10px;         /* Distanza tra la foto e il testo */
    width: 100%;
}


        /* Virtual Exploration Experience */
        .virtual-section { background-color: #f9f9f9; padding: 30px; border-radius: 4px; }
        .iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin-bottom: 30px; }
        .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

        /* Galleria Immagini Cliccabili (Fallback Lightbox senza Script via CSS :target) */
        .gallery-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
        .gallery-left { flex: 1.5; min-width: 300px; }
        .gallery-right { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 280px; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; border: 1px solid #ddd; transition: opacity 0.2s; }
        .gallery-item img:hover { opacity: 0.9; }
        .gallery-left img { height: 310px; }
        .gallery-right img { height: 150px; }
        
        /* Lightbox CSS senza script */
        .lightbox { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); text-align: center; padding: 40px; }
        .lightbox:target { display: block; }
        .lightbox-content { max-width: 80%; max-height: 80vh; margin: 0 auto; }
        .lightbox-caption { color: white; margin-top: 15px; font-size: 18px; }
        .close-lightbox { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; text-decoration: none; }

        /* Bottone Tip Jar */
        .tip-section { justify-content: center; display: flex; padding: 50px; }
        .btn-tip { display: inline-block; background-color: #fff; border: 2px solid #036dc5; color: #036dc5; padding: 12px 25px; font-size: 16px; font-weight: bold; border-radius: 4px; text-align: center; }
        .btn-tip:hover { background-color: #036dc5; color: white; text-decoration: none; }

        /* Griglia Bottoni Timeline */
        .timeline-buttons-section { text-align: center; }
        .timeline-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
        .btn-period { display: inline-block; background-color: #f0f4f8; color: #036dc5; padding: 6px 12px; font-size: 13px; border: 1px solid #d0daf0; border-radius: 3px; }
        .btn-period:hover { background-color: #036dc5; color: white; text-decoration: none; }

        /* Hub Box Generico (Latest Treasures & Timeline Hub) */
        .hub-section-title { margin-bottom: 25px; text-align: left; }
        .hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
        .hub-box { background: #f4f4f4; border: 1px solid #333; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
        .hub-box img { width: 100%; height: 150px; object-fit: cover; }
        .hub-box-content { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .hub-box-title { font-size: 15px; margin-bottom: 5px; font-weight: bold; }

        /* Elenco Date Storiche */
        .history-list { margin-top: 10px; text-align: left; }
        .history-date-group { margin-bottom: 40px; }
        .history-date { font-size: 20px; font-weight: bold; color: #036dc5; border-left: 3px solid #036dc5; padding-left: 10px; margin-bottom: 15px; }
        .history-events { list-style-type: square; padding-left: 20px; margin-bottom: 20px; font-size: 18px;}
        .history-events li { margin-bottom: 8px; }

        /* Footer */
        footer { background-color: #f4f4f4; padding: 40px 0; font-size: 15PX; text-align: center; border-top: 1px solid #ddd; width: 100%; }
        .footer-links { display: flex; justify-content: center; gap: 15px; list-style: none; margin-bottom: 15px; }
        .footer-credits { color: #666; max-width: 100%; width: 100%; padding: 0 20px; line-height: 1.4; margin: 0 auto; }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            .hub-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            body { padding-top: 130px; }
            .header-grid { flex-direction: column; text-align: center; }
            .logo-area { min-width: 100%; }
            nav { justify-content: center; }
            .gallery-grid { flex-direction: column; }
            .gallery-left, .gallery-right { width: 100%; }
            .slider-item img { height: 300px; }
        }
        @media (max-width: 480px) {
            body { padding-top: 150px; }
            .hub-grid { grid-template-columns: 1fr; }
            .gallery-right { grid-template-columns: 1fr; }
            .footer-links { flex-direction: column; gap: 5px; }
        }
		
				
	    /* Navigazione Fine Pagina (Pre / Next) */
		.pagination-container {
			display: flex;
			justify-content: center;
			gap: 15px;
			padding: 30px 0;
			width: 100%;
		}
		.btn-pagination {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 8px 16px;
			font-size: 16px;
			font-weight: bold;
			color: #036dc5;
			background: #fff;
			border: 2px solid #036dc5;
			border-radius: 4px;
		}
		.btn-pagination:hover {
			background: #036dc5;
			color: #fff;
			text-decoration: none;
		}
		@media (max-width: 480px) {
			.btn-pagination {
				flex: 1;
				justify-content: center;
				max-width: 150px;
			}
		}
		
		blockquote {
  margin: 1.5em 0;
  padding: 1em 2em;
  border-left: 6px solid #3498db;
  background: #f4f8fb;
  border-radius: 0 8px 8px 0;
  font-size: 20px;
}