:root {
    --md-sys-color-primary: #0061a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d1e4ff;
    --md-sys-color-on-primary-container: #001d36;

    --md-sys-color-secondary: #535f70;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d7e3f7;
    --md-sys-color-on-secondary-container: #101c2b;

    --md-sys-color-tertiary: #00e676;
    --md-sys-color-on-tertiary: #000000;
    --md-sys-color-tertiary-container: #9ff5bc;
    --md-sys-color-on-tertiary-container: #00210e;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-background: #fdfcff;
    --md-sys-color-on-background: #1a1c1e;

    --md-sys-color-surface: #fdfcff;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-surface-variant: #dfe2eb;
    --md-sys-color-on-surface-variant: #43474e;
    --md-sys-color-outline: #73777f;

    --md-sys-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);

    --md-sys-typescale-display-large: 57px;
    --md-sys-typescale-headline-large: 32px;
    --md-sys-typescale-body-large: 16px;
    --md-sys-typescale-label-large: 14px;

    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 9999px;

    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-duration-short: 200ms;
    --md-sys-motion-duration-medium: 400ms;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: 'Roboto', 'Inter', system-ui, sans-serif;
    margin: 0;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.contenitore {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 100%;
}

@media (min-width: 576px) {
    .contenitore {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .contenitore {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .contenitore {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .contenitore {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .contenitore {
        max-width: 1320px;
    }
}

@media (min-width: 2560px) {
    .contenitore {
        max-width: 2400px;
        padding: 0 2rem;
    }
}

@media (min-width: 3840px) {
    .contenitore {
        max-width: 3600px;
        padding: 0 3rem;
    }
}

@media (min-width: 7680px) {
    .contenitore {
        max-width: 7200px;
        padding: 0 5rem;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

h1 {
    font-size: var(--md-sys-typescale-display-large);
    line-height: 1.1;
}

h2 {
    font-size: var(--md-sys-typescale-headline-large);
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

a:hover {
    color: var(--md-sys-color-tertiary);
}

.testo-centro {
    text-align: center;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 1rem;
}

.contenitore-onda {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

.onda {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0);
    animation: animazione-onda 0.6s linear;
    pointer-events: none;
}

@keyframes animazione-onda {
    to {
        transform: scale(4);
        opacity: 0;
    }
}