/* Reset base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  color: #222;
  line-height: 1.6;
  background-color: #f7f9fa; /* leggero grigio per contesto istituzionale */
}

/* Hero section */
.hero {
  position: relative;
  height: 50vh;
  overflow: hidden; /* taglia img se troppo grande; per il resize */
  margin-bottom: 1.5em;  /* spazio sotto */
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(65%);   /* da verificare */
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* centraggio perfetto */
  color: #ffffff;
  text-align: center;
  padding: 0 1rem;
  width: 85%;
}


.hero-credit {
  position: absolute;
  bottom: 0.5rem; /* Small margin from the bottom edge */
 right: 0.5rem;  /* Small margin from the right edge */
  
  color: #ffffff; /* White text */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Small shadow for contrast */
  font-size: 0.95rem; /* Small, subtle text size */
  text-align: right;
  padding: 0; /* Remove unnecessary padding */
  width: auto; /* Let the content define the width */
  z-index: 10; /* Ensure it appears above the image/overlay */
}

/* Style the text inside the credit div */
.hero-credit p {
    margin: 0; /* Remove default paragraph margins */
}


.hero-overlay h1 {
    /*  font-size: 2.5rem; */
    font-size: 2.8vw;  
  font-weight: 700;
  text-shadow: 2px 2px 12px rgba(0,0,0,0.4);
  margin-bottom: 1.0em;
}

.hero-overlay h2 {
    /*  font-size: 2.5rem; */
    font-size: 1.75vw;  
  font-weight: 700;
  text-shadow: 2px 2px 12px rgba(0,0,0,0.4);
  margin-bottom: 0.2em;
}

.hero-overlay h3 {
    /*  font-size: 2.5rem; */
    font-size: 1.1vw;  
  font-weight: 700;
  text-shadow: 2px 2px 12px rgba(0,0,0,0.4);
  margin-bottom: 1.0em;
  margin-top: 0.0em;
}

/* Banner loghi */
.banner img {
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* Contenuto */
.content {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.content h2 {
  color: #003354; /* un blu istituzionale scuro */
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #003354;
  display: inline-block;
  font-family: Arial, sans-serif;
}

.content p {
  margin-bottom: 1rem;
  text-align: justify;
}

.content ol {
    margin-top:0rem;
    margin-bottom: 1rem ;
    margin-left:2rem;
    text-align: justify;
    
}


.nav-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  text-align: center;
  background-color: transparent;   
  padding: 1rem 0;
  border: none;                    
}

.nav-bar a.nav-link {
  display: inline-block;
  text-decoration: none !important;
  color: #333 !important;
  background-color: #e6e6e6 !important;
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  transition: all 0.3s ease;
  font-weight: 500;
}

.nav-bar a.nav-link:hover {
  background-color: #d4d4d4 !important;
  color: #000 !important;
}

.nav-bar a.nav-link.active {
  background-color: #0066cc !important;
  color: #fff !important;
  font-weight: bold;
}

.nav-bar a.nav-link {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-bar a.nav-link:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}


.immagine-centrata {
  display: block; 
  margin: 0 auto; 
  width: 80%; 
}