/* Version: 2026.05.04 */

.hero {
width: 50%;
margin: 1rem 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.9rem;
font-weight: 300;
line-height: 1.7;
letter-spacing: 0.02em;
text-align: center;
background: transparent;
color: #111;
text-shadow:
0 1px 0 #fff,
0 2px 3px rgba(0, 0, 0, 0.12);
z-index: 1;
}

.grid {
width: 64%;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 2rem;
}

.quadrant {
position: relative;
width: 48%;
margin: 1rem 0;
display: flex;
flex-direction: column;
background-color: #F8F8F8;
  box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.15);
padding: 1rem;
overflow: auto;
font-weight: 300; /* Aumenta leggermente lo spessore */
text-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

.quadrant-left {
width: 100%;
display: flex;
justify-content: flex-start;
margin-top: auto;
padding-top: 1rem;
}

.quadrant-right {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: auto;
padding-top: 1rem;
}

.quadrant-leftright {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: auto;
padding-top: 1rem;
}

.quadrant-text {
margin-top: 2rem;
}

.quadrant-red {
position: relative;
width: 100%;
transform: scale(1);
  transition: transform 1s ease, box-shadow 1s ease;
z-index: 0;
}

.quadrant-red::before {
  content: "";
position: absolute;
inset: 0;
background-image: url('/images/rubino.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 0;
  pointer-events: none;
}

.quadrant-red:hover {
  transform: scale(1.05);
  box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,0.15);
z-index: 1;
}

.quadrant-red:hover::before {
  opacity: 0.1;
}

.quadrant-red-gfx {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
z-index: 1;
}

.quadrant-red-gfx::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/images/biblos.svg');
background-size: 15%;
  background-repeat: no-repeat;
  background-position: top left;
opacity: 0.25;
}

.quadrant-red-title {
color: #000080;
margin-top: 1.8rem;
}

.quadrant-red-link {
color: #000080;
}

.quadrant-green {
position: relative;
width: 100%;
transform: scale(1);
  transition: transform 1s ease, box-shadow 1s ease;
z-index: 0;
}

.quadrant-green::before {
  content: "";
position: absolute;
inset: 0;
background-image: url('/images/smeraldo.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 0;
  pointer-events: none;
}

.quadrant-green:hover {
  transform: scale(1.05);
  box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,0.15);
z-index: 1;
}

.quadrant-green:hover::before {
  opacity: 0.1;
}

.quadrant-green-gfx {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
z-index: 1;
}

.quadrant-green-gfx::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/images/intelligenza-artificiale.svg');
background-size: 12%;
  background-repeat: no-repeat;
  background-position: top left;
opacity: 0.25;
}

.quadrant-green-title {
color: #808000;
margin-top: 1.8rem;
}

.quadrant-yellow {
position: relative;
width: 100%;
transform: scale(1);
  transition: transform 1s ease, box-shadow 1s ease;
z-index: 0;
}

.quadrant-yellow::before {
  content: "";
position: absolute;
inset: 0;
background-image: url('/images/topazio.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 0;
  pointer-events: none;
}

.quadrant-yellow:hover {
  transform: scale(1.05);
  box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,0.15);
z-index: 1;
}

.quadrant-yellow:hover::before {
  opacity: 0.1;
}

.quadrant-yellow-gfx {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
z-index: 1;
}

.quadrant-yellow-gfx::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/images/accessibility.svg');
background-size: 12%;
  background-repeat: no-repeat;
  background-position: top left;
opacity: 0.25;
}

.quadrant-yellow-title {
color: #008000;
margin-top: 1.8rem;
}

.quadrant-blue {
position: relative;
width: 100%;
transform: scale(1);
  transition: transform 1s ease, box-shadow 1s ease;
z-index: 0;
}

.quadrant-blue::before {
  content: "";
position: absolute;
inset: 0;
background-image: url('/images/zaffiro.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 0;
  pointer-events: none;
}

.quadrant-blue:hover {
  transform: scale(1.05);
  box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,0.15);
z-index: 1;
}

.quadrant-blue:hover::before {
  opacity: 0.1;
}

.quadrant-blue-gfx {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
z-index: 1;
}

.quadrant-blue-gfx::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/images/laurea.svg');
background-size: 12%;
  background-repeat: no-repeat;
  background-position: top left;
opacity: 0.25;
}

.quadrant-blue-title {
color: #800000;
margin-top: 1.8rem;
}