body {
	font-family: Arial, sans-serif;
	margin: 0;
	background-color: #f4f7f9;
	color:#333;
}

header {
    background-color:#2c7be5;
    color:white;
    padding:12px 30px;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.header-content{
    max-width:1180px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header-title h1{
    margin:0;
    font-size:2rem;
    line-height:1.1;
}
.header-title p{
    margin:5px 0 0;
    font-size:1rem;
}
.header-button{
    display:flex;
    align-items:center;
    gap:8px;
    background:white;
    color:#2c7be5;
    padding:11px 22px;
    border-radius:25px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}
.header-button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.header-button span{
    transition:.25s;
}
.header-button:hover span{
    transform:translateX(5px);
}
.header-compact {
    display: none;
}

section,
.container{
	scroll-margin-top:90px;
}
.container {
	max-width: 1000px;
	margin: 30px auto;
	padding: 5px 20px 20px 20px;
	background: white;
	border-radius: 8px;
	box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.container-wide{
	max-width:1180px;
}
h2 {
	color: #2c7be5;
}
.services {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}
.service{
	min-height:120px;
	display:flex;
	flex-direction:column;
	text-decoration:none;
	color:inherit;
	text-decoration:none;	
    position:relative;
    overflow:hidden;
    flex:1 1 30%;
    background:#f1f5f9;
    padding:15px;
    border-radius:6px;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}
.service::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#1a5bb8;
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .25s ease;
}
.service:hover{
    transform:translateY(-6px);
    background:#fff;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    border:1px solid #1a5bb8;
    cursor: pointer;
}
.service:hover::before{
    transform:scaleY(1);
}
.service::after{
    content:"→";
    position:absolute;
    right:18px;
    bottom:14px;
    font-size:22px;
    color:#2c7be5;
    opacity:0;
    transform:translateX(-8px);
    transition:.25s;
}
.service:hover::after{
    opacity:1;
    transform:translateX(0);
}
.service h3{
    transition:color .25s ease;
    margin-bottom:10px;
    font-size:1.15rem;
}
.service p{
    margin:0;
    font-size:0.95rem;
    line-height:1.5;
    color:#60717a;
}
.service:hover h3{
    color:#2c7be5;
}
.service-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.service-title svg{
    flex-shrink:0;
    color:#2c7be5;
    transition:.25s;
}
.service h3{
    margin:0;
}
.service:hover svg{
    transform:scale(1.1);
}

 .profile-link-wrapper {
    text-align: center;
    margin-top: 20px;
}
.profile-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: #2f73d9;
    font-weight: 600;
    text-decoration: none;
}
.profile-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #2f73d9;
    transition: width .3s ease;
}
.profile-link:hover::after {
    width: 100%;
}
.profile-link .arrow {
    transition: transform .25s ease;
}
.profile-link:hover .arrow {
    transform: translateX(6px);
}

.pathology-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
	margin-top: 22px;
}
.pathology-header h2 {
    margin: 0;
}
.pathology-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2f73d9;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.pathology-link .arrow {
    font-size: 20px;
    transition: transform .25s ease;
}

.pathology-link:hover .arrow {
    transform: translateX(-5px);
}

.hero-container {
	padding-top: 15px;
}
.hero{
    padding:40px 0;
    background:#f8fbfd;
}
.hero-wrapper{
    display:grid;
    grid-template-columns: 380px 1fr;
    gap:55px;
    align-items:stretch;
}
.hero-image{
	height:100%;
}
.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:26px;
}
.hero-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.hero-text .hero-intro{
    font-size:1.25rem;
    line-height:1.7;
    color:#334b55;
	text-align:justify;
}
.hero-title{
    margin:0 0 35px;
    color:#2c7be5;
    font-size:1.6rem;
    line-height:1.15;
	font-weight:bold;
	text-align:center;
}
.hero-intro{
    margin:0;
	margin-right:20px;
}
.hero-quote{
	display:flex;
    align-items:flex-start;
    gap:18px;
    margin-top:5px;
    padding-left:15px;
	margin-left:20px;
    max-width:520px;
}
.hero-quote::before{
    content:"";
    width:3px;
    background:#c9e2ea;
    align-self:stretch;
}
.hero-quote p{
    font-family:'Caveat', cursive;
    font-size:1.85rem;
    line-height:1.4;
    color:#3b5963;
	margin:0;
	margin-right:12px;
}

.contacts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.contact-card{
    background:#f1f5f9;
    padding:25px;
    border-radius:10px;
    border-left:5px solid #2c7be5;
    transition:.25s;
}
.contact-card.parma{
    border-color: #2c7be5;
    background: rgba(44,123,229,0.18);
}
.contact-card.parma:hover{
	box-shadow: 0 0 0 1px #2c7be5;
}
.contact-card.cremona {
    border-color: #4caf50;
    background: rgba(76,175,80,0.18);
}
.contact-card.cremona:hover{
	box-shadow: 0 0 0 1px #4caf50;
}
.contact-card.mantova {
    border-color: #d98c2b;
    background: rgba(217,140,43,0.18);
}
.contact-card.mantova:hover{
	box-shadow: 0 0 0 1px #d98c2b;
}
.contact-card:hover{
    background:white;
    transform:translateY(-5px);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}
.contact-card h3{
    margin-top:0;
    color:#2c7be5;
}
.contact-card a{
    color:#2f73d9;
    text-decoration:none;
    font-weight:600;
}

.faq-links-home{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:30px;
    padding:0 25px;
}
.faq-link-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:260px;
    padding:13px 24px;
    background:#2c7be5c9;
    color:#fff;
	border:1px solid #cfdde5;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    transition:all .25s ease;
}
.faq-link-button:hover{
    background:#2e76d6;
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.faq-box{
    margin-top:45px;
    padding:30px;
    background:#f8fbfd;
    border-radius:12px;
    border-top:3px solid #c9e2ea;
}
.faq-box h3{
    text-align:center;
    color:#2c7be5;
}
.faq-items{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:25px;
}
.faq-item{
    background:white;
    padding:20px;
    border-radius:8px;
}
.faq-item strong{
    color:#334b55;
}
.faq-item p{
    color:#60717a;
    line-height:1.5;
}
footer {
	text-align: center;
	padding: 20px;
	background-color: #2c7be5;
	color: white;
	margin-top: 30px;
}
footer a{
    color:inherit;
    text-decoration:underline;
}

footer,
footer a{
    color:#fff;
}

@media(max-width:768px){

.contacts,
.faq-items{
    grid-template-columns:1fr;
}
.faq-links-home{
    flex-direction:column;
    gap:15px;
    padding:0;
}
.faq-link-button{
    width:100%;
    min-width:0;
}
header {
	position: sticky;
	top: 0;
	z-index: 1000;

	background: #2c7be5;

	/* altezza del normale header */
	height: 80px;

	padding: 0;

	box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.header-content {
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	box-sizing: border-box;
	padding: 14px 15px;
}

/* =========================
   HEADER NORMALE
   ========================= */
.header-normal {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .25s ease,
		transform .3s ease;
}
.header-normal .header-title {
	flex: 1;
	min-width: 0;
	text-align: center;
}
.header-normal .header-title h1 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.15;
}
.header-normal .header-title p {
	margin: 4px 0 0;

	font-size: .82rem;
	line-height: 1.3;
}

/* =========================
   HEADER COMPATTO
   ========================= */
.header-compact {
	display: flex;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition:
		opacity .25s ease,
		transform .3s ease;
}
.header-normal .header-button {
	display: none;
}
.header-compact .header-button {
	display: flex;
}
.header-compact .header-title {
	flex: 1;
	min-width: 0;
	text-align: left;
}
.header-compact .header-title h1 {
	margin: 0;

	font-size: 1rem;
	line-height: 1.15;
}

.header-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 15px;
	padding: 8px 10px;
	border-radius: 22px;
	font-size: .72rem;
	white-space: nowrap;
	background: white;
	color: #2c7be5;
	text-decoration: none;
	font-weight: 600;
}
header.scrolled .header-normal {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
header.scrolled .header-compact {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.container{
	margin:18px 12px;
	padding:20px;
}
.services{
	grid-template-columns:1fr;
}
.service{
	padding:22px;
}
.service h3{
	font-size:1.15rem;
}
.service p{
	font-size:.95rem;
	line-height:1.6;
}
.hero-wrapper{
	grid-template-columns:1fr;
	gap:25px;
}
.hero-image{
	width:100%;
	height:320px;
	margin:0;
}
.hero-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 18%;
	border-radius:20px;
}
.hero-text{
	display:block;
	text-align:left;
}
.hero-title{
	font-size:1.6rem;
	line-height:1.1;
	margin-bottom:20px;
}
.hero-intro{
	font-size:1.05rem;
	line-height:1.7;
	text-align:left;
}
.hero-quote{
	margin:0px 0px;
	max-width:none;
	padding-left:8px;
}
.hero-quote p{
	font-size:1.6rem;
}

.profile-link-wrapper{
	text-align:center;
}

.pathology-header{
	flex-direction:column;
	align-items:flex-start;
	gap:15px;
}
.pathology-link{
	width:100%;
	line-height:1.5;
}
.pathology-header h2{
	font-size:1.45rem;
	line-height:1.3;
}	
}