/* =========================================

1. COLORI E IMPOSTAZIONI GENERALI
   ========================================= */

:root {
--blue-dark: #344B60;
--blue-medium: #344B60;
--blue-light: #65B5E5;


--background: #F1F5F7;
--background-light: #FFFFFF;
--grey: #DCE5EA;
--text: #414B52;
--white: #FFFFFF;


}

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

html {
scroll-behavior: smooth;
}

body {
background-color: var(--background);
color: var(--text);
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
font-weight: 300;
line-height: 1.7;
}

a {
text-decoration: none;
color: inherit;
}

button {
font-family: "Segoe UI", sans-serif;
}

/* =========================================
2. HEADER
========================================= */

.header {
min-height: 85px;
padding: 0 7%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background-color: var(--white);
z-index: 100;
border-bottom: 1px solid var(--grey);
}

.logo {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
color: var(--blue-dark);
}

.logo a {
transition: color 0.3s ease;
}

.logo a:hover {
color: var(--blue-light);
}

/* =========================================
3. MENU HAMBURGER
========================================= */

.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
width: 35px;
height: 35px;
flex-direction: column;
justify-content: center;
gap: 6px;
z-index: 110;
}

.hamburger span {
width: 28px;
height: 2px;
background-color: var(--blue-dark);
transition: all 0.3s ease;
}

.hamburger:hover span {
background-color: var(--blue-light);
}

/* =========================================
4. NAVIGAZIONE ORIZZONTALE
========================================= */

.navigation {
width: 100%;
min-height: 60px;
padding: 0 7%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 35px;
background-color: var(--white);
border-bottom: 1px solid var(--grey);
position: relative;
z-index: 90;
}

.navigation a {
color: var(--blue-dark);
font-family: "Segoe UI", sans-serif;
font-size: 13px;
letter-spacing: 0.5px;
transition: color 0.3s ease;
position: relative;
}

.navigation a::after {
content: "";
position: absolute;
bottom: -7px;
left: 0;
width: 0;
height: 1px;
background-color: #148ED2;
transition: width 0.3s ease;
}

.navigation a:hover,
.navigation a.active,
.navigation a[aria-current="page"] {
color: #148ED2;
}

.navigation a.active::after,
.navigation a[aria-current="page"]::after {
width: 100%;
}

.navigation a:hover::after {
width: 100%;
}

/* =========================================
5. PULSANTI
========================================= */

.primary-button,
.header-button,
.cta-button {
background-color: var(--blue-dark);
color: var(--white);
border: 1px solid var(--blue-dark);
border-radius: 4px;
padding: 16px 28px;
display: inline-block;
font-family: "Segoe UI", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}

.primary-button:hover,
.header-button:hover {
background-color: #0878B5;
border-color: #0878B5;
transform: translateY(-3px);
}

.secondary-button {
background-color: transparent;
color: var(--blue-dark);
border: 1px solid var(--blue-dark);
border-radius: 4px;
padding: 16px 28px;
display: inline-block;
font-family: "Segoe UI", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
transition: all 0.3s ease;
}

.secondary-button:hover {
background-color: var(--blue-dark);
color: var(--white);
transform: translateY(-3px);
}

/* =========================================
6. HERO SECTION
========================================= */

.hero {
min-height: 650px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 60px 7%;
gap: 60px;
background-color: var(--background);
}

.hero-content {
max-width: 550px;
}

.subtitle {
color: var(--blue-dark);
font-size: 24px;
letter-spacing: 3px;
font-weight: 500;
}

.hero h1 {
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
color: var(--blue-dark);
font-size: clamp(45px, 5vw, 68px);
line-height: 1.1;
font-weight: 300;
margin: 25px 0;
}

.hero-content > p {
font-size: 18px;
margin-bottom: 35px;
max-width: 500px;
color: var(--text);
}

.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.hero-buttons .primary-button {
min-width: 230px;
min-height: 67px;
display: inline-flex;
justify-content: center;
align-items: center;
}

.hero-image {
position: relative;
width: 100%;
height: auto;
overflow: visible;
background-color: transparent;
}

.hero-image img {
width: 100%;
height: auto;
object-fit: initial;
object-position: center;
display: block;
}

/* =========================================
7. INTRODUZIONE INTEGRATA NELLA HERO
========================================= */

.hero-introduction {
margin-top: 65px;
max-width: 550px;
}

.hero-introduction h2 {
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
color: var(--blue-dark);
font-size: 18px;
line-height: 1.2;
font-weight: 300;
margin: 18px 0;
}

.hero-introduction p {
font-size: 18px;
line-height: 1.8;
color: var(--text);
margin-bottom: 15px;
}

.hero-introduction .text-link {
margin-top: 10px;
}

/* =========================================
8. INTRODUCTION
========================================= */

.introduction {
padding: 110px 15%;
text-align: center;
background-color: var(--background-light);
}

.introduction h2 {
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
font-size: 46px;
line-height: 1.2;
color: var(--blue-dark);
font-weight: 300;
margin: 25px 0;
}

.introduction p {
max-width: 650px;
margin: auto;
font-size: 15px;
color: var(--text);
}

.text-link {
display: inline-block;
margin-top: 30px;
color: var(--blue-dark);
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid var(--blue-light);
padding-bottom: 4px;
transition: color 0.3s ease;
}

.text-link:hover {
color: #0878B5;
}

/* =========================================
9. TRATTAMENTI E SERVIZI
========================================= */

.treatments {
padding: 110px 7%;
text-align: center;
background-color: #FFFFFF;
}

.section-heading {
margin-bottom: 55px;
}

.section-heading h2 {
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
font-size: 46px;
line-height: 1.2;
color: var(--blue-dark);
font-weight: 300;
margin: 25px 0;
}

.section-heading p {
font-size: 15px;
}

.treatment-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-bottom: 50px;
text-align: left;
}

.treatment-card {
padding: 40px 30px;
background-color: var(--background-light);
border: 1px solid var(--grey);
border-bottom: 3px solid var(--blue-dark);
transition: all 0.3s ease;
}

.treatment-card:hover {
transform: translateY(-6px);
border-bottom-color: #0878B5;
}

.treatment-card span {
color: var(--blue-dark);
font-size: 13px;
font-weight: 500;
}

.treatment-card h3 {
color: var(--blue-dark);
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
font-size: 25px;
font-weight: 400;
margin: 20px 0;
}

.treatment-card p {
font-size: 14px;
}

/* =========================================
10. CALL TO ACTION
========================================= */

.cta {
background-color: var(--blue-dark);
color: var(--white);
padding: 100px 15%;
text-align: center;
}

.cta h2 {
font-family: "Segoe UI Light", "Segoe UI", sans-serif;
font-size: 46px;
line-height: 1.2;
color: var(--white);
font-weight: 300;
margin: 25px 0;
}

.cta p {
font-size: 15px;
margin-bottom: 30px;
color: var(--white);
}

.cta .subtitle {
color: #D5EBF8;
}

.cta-button {
background-color: var(--white);
color: var(--blue-dark);
border-color: var(--white);
}

.cta-button:hover {
background-color: #E5F1F7;
border-color: #E5F1F7;
transform: translateY(-3px);
}

/* =========================================
11. FOOTER
========================================= */

.footer {
background-color: var(--background-light);
padding: 55px 7% 20px;
}

.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 40px;
}

.footer-content h3 {
color: var(--blue-dark);
letter-spacing: 2px;
}

.footer-content p,
.footer-links a {
font-size: 13px;
}

.footer-links {
display: flex;
gap: 25px;
}

.footer-links a {
transition: color 0.3s ease;
}

.footer-links a:hover {
color: var(--blue-dark);
}

.copyright {
border-top: 1px solid var(--grey);
padding-top: 20px;
text-align: center;
font-size: 11px;
}

/* =========================================
12. TABLET
========================================= */

@media (max-width: 1000px) {


.navigation {
    gap: 20px;
}

.navigation a {
    font-size: 12px;
}

.hero {
    grid-template-columns: 1fr;
    padding: 50px 7%;
    gap: 40px;
}

.hero-content {
    max-width: 100%;
}

.hero-image {
    height: auto;
}

.hero-introduction {
    max-width: 100%;
}

.treatment-grid {
    grid-template-columns: 1fr 1fr;
}

.introduction {
    padding: 90px 10%;
}


}

/* =========================================
13. SMARTPHONE
========================================= */

@media (max-width: 700px) {


.header {
    min-height: 75px;
    padding: 0 6%;
}

.logo {
    font-size: 17px;
}

.header-button {
    font-size: 10px;
    padding: 10px 12px;
    margin-left: auto;
    margin-right: 15px;
}

.hamburger {
    display: flex;
    flex-shrink: 0;
}

.navigation {
    position: absolute;
    top: 75px;
    left: 0;
    width: 100%;
    min-height: auto;
    padding: 25px 8%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background-color: var(--blue-dark);
    border-bottom: none;
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
    z-index: 90;
}

.navigation.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.navigation a {
    color: var(--white);
    font-size: 14px;
}

.navigation a:hover {
    color: #D5EBF8;
}

.navigation a::after {
    display: block;
    bottom: -5px;
} 

.navigation a.active,
.navigation a[aria-current="page"] {
    color: #FFFFFF;
}

.navigation a.active::after,
.navigation a[aria-current="page"]::after {
    background-color: #148ED2;
    width: 100%;
}

.hero {
    grid-template-columns: 1fr;
    padding: 45px 6%;
    min-height: auto;
    gap: 40px;
}

.hero h1 {
    font-size: 43px;
}

.hero-content > p {
    font-size: 14px;
}

.hero-buttons {
    flex-direction: column;
    align-items: stretch;
}

.hero-buttons .primary-button {
    width: 100%;
}

.hero-image {
    height: auto;
}

.hero-introduction {
    margin-top: 50px;
}

.hero-introduction h2 {
    font-size: 28px;
}

.introduction {
    padding: 75px 8%;
}

.introduction h2 {
    font-size: 35px;
}

.treatments {
    padding: 75px 6%;
}

.section-heading h2 {
    font-size: 36px;
}

.treatment-grid {
    grid-template-columns: 1fr;
}

.cta {
    padding: 75px 8%;
}

.cta h2 {
    font-size: 36px;
}

.footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.footer-links {
    flex-direction: column;
    gap: 15px;
}


}

/* =========================================
14. ACCESSIBILITA'
========================================= */

a:focus-visible,
button:focus-visible {
outline: 3px solid var(--blue-light);
outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {


*,
*::before,
*::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
}

}
.treatment-list {
    margin: 15px 0 20px 20px;
    padding-left: 15px;
    list-style-type: disc;
}

.treatment-list li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    padding-left: 5px;
    margin-bottom: 5px;
}

.treatment-list1 {
    width: 650px;
    max-width: 100%;
    margin: 15px auto 20px;
    padding-left: 20px;
    text-align: left;
    list-style-position: outside;
}

.treatment-list1 li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    padding-left: 3px;
    margin-bottom: 5px;
}

@media (max-width: 700px) {
    .treatment-list {
        width: 100%;
    }
}
.lesson-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.lesson-buttons a {
    width: 260px;
    min-height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    padding: 14px 15px;
    text-align: center;
}

@media (max-width: 600px) {
    .lesson-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .lesson-buttons a {
        width: 100%;
    }
}
/* SCHEDE SERVIZI CLICCABILI */

.treatment-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.treatment-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 5px;
}