:root {
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 16px;
  --font-size-xl: 16px;
  
  --font-size-h1-xs: 24px;
  --font-size-h1-sm: 32px;
  --font-size-h1-md: 40px;
  --font-size-h1-lg: 40px;
  --font-size-h1-xl: 40px;

  --font-size-h2-xs: 20px;
  --font-size-h2-sm: 24px;
  --font-size-h2-md: 28px;
  --font-size-h2-lg: 28px;
  --font-size-h2-xl: 28px;
}

body {
  font-size: var(--font-size-xs);
  background-color: #F5F5F5;
}

/* Stile base per i link ai social */
h1 {
  font-size: var(--font-size-h1-xs);
  color: #5998C5;
}

h2 {
  font-size: var(--font-size-h2-xs);
  color: #5998C5;
}
a {
	text-decoration: none;
	padding: 10px;
}
.container {
  max-width: 960px;
  margin: auto;
  padding: 2rem;
}
.social-bar {
	display: flex;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 60px rgba(93, 70, 232, 0.15);
	border: 1px solid#ebe9e9;
}
.slider-nav-item {
	padding: 10px;
}
.logo {
  margin-bottom: 1rem;
}
.social-bar {
    display: flex;
    justify-content: center; /* Centra orizzontalmente i figli */
    align-items: center; /* Centra verticalmente i figli */
    flex-wrap: wrap; /* Permette agli elementi di andare a capo se non ci sta spazio */
    gap: 20px; /* Distanza tra gli elementi */
}

.slider-nav-item {
    display: inline-flex; /* Usa flex anche qui per centrare l'icona dentro l'ancora */
    align-items: center; /* Centra verticalmente l'icona */
    justify-content: center; /* Centra orizzontalmente l'icona */
    text-decoration: none; /* Rimuove sottolineatura del link */
    color: inherit; /* Mantiene il colore del testo ereditato o può essere impostato esplicitamente */
}
.fas.fa-envelope, .fas.fa-phone-alt{
	padding-right: 5px;
}
.footer {
	text-align: center;
	padding: 1rem;
	bottom: 0;
	width: 100%;
}
@media (min-width: 600px) {
  body {
    font-size: var(--font-size-sm);
  }
  h1 {
    font-size: var(--font-size-h1-sm);
  }
  h2 {
    font-size: var(--font-size-h2-sm);
  }
}

@media (min-width: 768px) {
  body {
    font-size: var(--font-size-md);
  }
  h1 {
    font-size: var(--font-size-h1-md);
  }
  h2 {
    font-size: var(--font-size-h2-md);
  }
}

@media (min-width: 992px) {
  body {
    font-size: var(--font-size-lg);
  }
  h1 {
    font-size: var(--font-size-h1-lg);
  }
  h2 {
    font-size: var(--font-size-h2-lg);
  }
}

@media (min-width: 1200px) {
  body {
    font-size: var(--font-size-xl);
  }
  h1 {
    font-size: var(--font-size-h1-xl);
  }
  h2 {
    font-size: var(--font-size-h2-xl);
  }
}