/* ==========================================================================
  00. RESET
  =========================================================================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margini */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -- accessibility - rimuove le animazioni(solo le mie e non quelle di bootstrap)
 per chi le ha disattivate --*/
@media (prefers-reduced-motion: reduce) {
  /* AOS */
  [data-aos],
  .animate__animated {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Effetti hover del tuo menu */
  .dropdown-menu .dropdown-item {
    transition: none !important;
    transform: none !important;
  }

  /* Scrolling liscio disattivato */
  :root {
    scroll-behavior: auto !important;
  }
}
/* -- fine accessibility --*/

/* ==========================================================================
   Breakpoints e Container - Linee guida uniformi
   ========================================================================== */

/*
  Breakpoint utilizzati per il CSS:
    - Desktop:     ≥ 992px
    - Tablet:      768px – 991px
    - Mobile:      ≤ 767px
*/

/* Container (desktop first) */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
  max-width: 1140px; /* Desktop: max-width sempre attivo */
}

/* Tablet */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .container {
    max-width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/*==========================================================================*/
/*01. STILI BASE
/*==========================================================================*/

/* Font di base */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased; /* migliora resa font su Chrome/Safari */
  -moz-osx-font-smoothing: grayscale; /* migliora resa font su Firefox/macOS */
}

body {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  color: var(--colore-testo);
  font-weight: 600;
}

/*----------------------------------*/
/*    Colori
/*----------------------------------*/
:root {
  /* Celeste */
  --azzurro: #009fe3;
  --azzurro-rgb: 0, 159, 227;

  /*Arancione*/
  --orange: #ee7200;

  /* Colori del testo */
  --colore-testo: #333;
  --testo-grigio: #888;

  /* Fondini */
  --fondino-arancione: #de880fb5;
  --fondino-azzurro: #cce6f4;

  /* Altri colori */
  --bordo-grigio: #ddd;
  --grigio-medio: #8a8a8a;
  --grigio-chiaro: #f4f4f4;
}
.bg-grigio-chiaro {
  background-color: var(--grigio-chiaro);
}
.bg-azzurro {
  background-color: var(--azzurro);
}
.bg-fondino-azzurro {
  background-color: var(--fondino-azzurro);
}
.white {
  color: #fff;
}
.azzurro {
  color: var(--azzurro);
}

/* ==========================================================================
  02. TYPOGRAPHY
  =========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--azzurro);
  letter-spacing: -0.25px;
}
h1,
h2 {
  font-weight: 900;
}
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

/*-- desktop --*/
p {
  font-size: 16px;
}
.titolo-60 {
  font-size: 60px;
  line-height: 1.1;
}
.titolo-42 {
  font-size: 42px;
}
.titolo-26 {
  font-size: 26px;
}

/*-- tablet --*/
@media (max-width: 991px) {
  .titolo-60 {
    font-size: 50px;
    line-height: 1.2;
  }
  .titolo-42 {
    font-size: 34px;
  }
  .titolo-26 {
    font-size: 20px;
  }
}

/*-- mobile --*/
@media (max-width: 767px) {
  .titolo-60 {
    font-size: 40px;
  }
  .titolo-42 {
    font-size: 30px;
  }
  .titolo-26 {
    font-size: 20px;
  }
}

/* links */
a {
  color: var(--azzurro);
  text-decoration: none;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

a:hover {
  color: var(--orange);
  text-decoration: none;
}

a:focus {
  outline: none;
  text-decoration: none;
}

/* ==========================================================================
  00. MARGINI E PADDING
  =========================================================================== */

/*------------------------------------------*/
/*  Padding Sopra e Sotto
/*------------------------------------------*/
.pt-120 {
  padding-top: 120px;
}
.pt-100 {
  padding-top: 100px;
}
.pt-80 {
  padding-top: 80px;
}
.pt-70 {
  padding-top: 70px;
}
.pt-40 {
  padding-top: 40px;
}
.pt-30 {
  padding-top: 30px;
}

.pl-30 {
  padding-left: 30px;
}
.pr-30 {
  padding-right: 30px;
}
.pb-100 {
  padding-bottom: 100px;
}
.pb-120 {
  padding-bottom: 120px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pb-40 {
  padding-bottom: 40px;
}

.py-120-100 {
  padding-top: 120px;
  padding-bottom: 100px;
}
.py-120-40 {
  padding-top: 120px;
  padding-bottom: 40px;
}

.py-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.mt-120 {
  margin-top: 120px;
}
.mb-150 {
  margin-bottom: 150px;
}
.mb-120 {
  margin-bottom: 120px;
}
.mb-80 {
  margin-bottom: 80px;
}
.mb-40 {
  margin-bottom: 40px;
}

.pt-60 {
  padding-top: 60px;
}
.pb-60 {
  padding-bottom: 60px;
}

/* Tablet */
@media (max-width: 991px) {
  .py-80 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .mt-120 {
    margin-top: 100px;
  }
  .mb-120 {
    margin-bottom: 100px;
  }
  .pt-120 {
    padding-top: 100px;
  }
  .pb-120 {
    padding-bottom: 90px;
  }
  .pt-100 {
    padding-top: 70px;
  }
  .pt-80 {
    padding-top: 60px;
  }
  .pb-80 {
    padding-bottom: 60px;
  }
  .pt-60 {
    padding-top: 50px;
  }
  .pb-60 {
    padding-bottom: 50px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .mt-120 {
    margin-top: 80px;
  }
  .mb-120 {
    margin-bottom: 80px;
  }
  .pb-120 {
    padding-bottom: 70px;
  }
  .pt-100 {
    padding-top: 60px;
  }
  .pt-60 {
    padding-top: 40px;
  }
  .pb-50 {
    padding-bottom: 40px;
  }
}

/*==========================================================================*/
/*00. LIBRERIA AOS CLASSI PERSONALIZZATE
/*==========================================================================*/
/* Questo css serve a modificare il comportamento di default di AOS che
imposta il translate a 100px - qui invece è impostato a 40px */
/* --- Fade In (solo opacità, come fadeIn) --- */
[data-aos='fade-in'] {
  opacity: 0;
}
[data-aos='fade-in'].aos-animate {
  opacity: 1;
}

/*==========================================================================*/
/*01. HEADER - NAVBAR
/*==========================================================================*/

/* logo */
#logo-cg {
  height: auto;
  width: auto;
  max-width: 180px;
}

.navbar {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* --- MENU PRINCIPALE --- */
.navbar-nav > .nav-item > .nav-link {
  text-transform: uppercase;
  color: var(--azzurro);
  transition: color 0.2s ease;
}

.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus,
.nav-item.show > .nav-link,
.nav-link.active {
  color: var(--orange);
}

/* Dropdown visibile al passaggio del mouse (solo su desktop) */
@media (min-width: 768px) {
  .navbar-nav > .nav-item {
    margin-left: 20px;
  }
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* evita spostamenti */
  }
}
@media (max-width: 767px) {
  .navbar-collapse {
    margin-left: 20px;
  }
}

/* --- DROPDOWN (contenitore) --- */
.dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px 6px;
}

/* --- VOCI SOTTOMENU --- */
.dropdown-menu .dropdown-item {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--testo-grigio);
  padding: 15px 16px; /* padding iniziale */
  transition: all 0.3s ease-in-out;
  transform: translateX(0);
}

/* --- HOVER VOCI SOTTOMENU --- */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #fff;
  color: var(--azzurro);
  transform: translateX(8px); /* spostamento a destra */
}

/* Link attivo nella navbar (singoli + parent dei dropdown) ------*/
.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item.show > .nav-link,              /* quando il dropdown è aperto */
.navbar-nav .nav-item .dropdown-toggle.active,       /* quando marchi attivo via PHP */
.navbar .nav-link[aria-expanded="true"]              /* quando Bootstrap espande il menu */ {
  color: var(--orange);
}

/* Stato attivo degli elementi nel menu a discesa */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: #fff;
  color: var(--orange);
}

/* bordo tra gli elementi */
.dropdown-menu > li {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}

/* niente bordo sull’ultimo */
.dropdown-menu > li:last-child {
  border-bottom: 0;
}

/*==========================================================================*/
/*00. BUTTONS
/*==========================================================================*/

.btn-link {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 26px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  background-color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  margin-top: 40px;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--orange);
  border: 1px solid var(--orange);
  background: #fff;
  transform: scale(1.03);
}
@media (max-width: 991px) {
  .btn-link {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .btn-link {
    margin-top: 20px;
  }
}
/*==========================================================================*/
/*00. TESTATA PAGINA
/*==========================================================================*/

.testata-pagina {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; /* necessario per il posizionamento dell’overlay */
  overflow: hidden;
}

.testata-pagina::before {
  content: '';
  position: absolute;
  inset: 0; /* equivale a top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.1); /* overlay nero con opacità */
  z-index: 1;
}

.testata-pagina h2 {
  z-index: 2;
  font-size: 46px;
  position: relative; /* per stare sopra l’overlay */
  padding-top: 300px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
  .testata-pagina {
    height: 600px;
  }
  .testata-pagina h2 {
    padding-top: 300px;
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .testata-pagina {
    height: 400px;
  }
  .testata-pagina h2 {
    padding-top: 200px;
    font-size: 36px;
  }
}

/* Immagini specifiche per diverse pagine */
.testata-pagina.chi-siamo {
  background-image: url('/images/testate-pagina/chi-siamo-testata.webp');
}
.testata-pagina.centro-odontoiatrico {
  background-image: url('/images/testate-pagina/centro-odontoiatrico-testata.webp');
}
.testata-pagina.la-visita {
  background-image: url('/images/testate-pagina/la-visita-testata.webp');
}
.testata-pagina.servizi {
  background-image: url('/images/testate-pagina/servizi-testata.webp');
}
.testata-pagina.odontoiatria-infantile {
  background-image: url('/images/testate-pagina/odontoiatria-infantile.webp');
}
.testata-pagina.ortodonzia {
  background-image: url('/images/testate-pagina/ortodonzia-tradizionale-e-invisibile.webp');
}
.testata-pagina.prevenzione {
  background-image: url('/images/testate-pagina/prevenzione-terapia-igienica-testata.webp');
}
.testata-pagina.gnatologia {
  background-image: url('/images/testate-pagina/gnatologia-testata.webp');
}
.testata-pagina.implantologia {
  background-image: url('/images/testate-pagina/implantologia-e-protesi-dentaria.webp');
}
.testata-pagina.parodontologia {
  background-image: url('/images/testate-pagina/parodontologia-testata.webp');
}
.testata-pagina.endonzia {
  background-image: url('/images/testate-pagina/endonzia-testata.webp');
}
.testata-pagina.odontoiatria-conservativa {
  background-image: url('/images/testate-pagina/odontoiatria-conservativa-testata.webp');
}
.testata-pagina.chirurgia-orale {
  background-image: url('/images/testate-pagina/chirurgia-orale-testata.webp');
}
.testata-pagina.estetica-del-sorriso {
  background-image: url('/images/testate-pagina/servizi-testata.webp');
}
.testata-pagina.filosofia {
  background-image: url('/images/testate-pagina/filosofia-testata.webp');
}

/*------------------------------------------*/
/*  SEZIONE SOTTO LA FOTO DI TESTATA
/*------------------------------------------*/
.section-testata {
  margin-top: 80px;
  margin-bottom: 80px;
}

.section-testata h1 {
  font-size: 60px;
  line-height: 1.1;
  margin-bottom: 20px;
}
.section-testata h2 {
  margin-top: -10px;
  margin-bottom: 20px;
}

/* Tablet */
@media (max-width: 991px) {
  .section-testata {
    margin-top: 60px;
    margin-bottom: 70px;
  }
  .section-testata h1 {
    font-size: 50px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .section-testata {
    margin-top: 40px;
    margin-bottom: 60px;
  }
  .section-testata h1 {
    font-size: 40px;
  }
}

/*==========================================================================*/
/*00. SEZIONI ORIZZONTALI - colonna immagine + colonna testo
/*==========================================================================*/

/*------------------------------------------*/
/*  SEZIONE CON TESTO CENTRALE
/*------------------------------------------*/

.section-centrale {
  text-align: center;
}

.section-centrale h2 {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 20px;
}

.section-centrale p {
  margin-bottom: 16px;
}
@media (max-width: 991px) {
  .section-centrale h2 {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .section-centrale h2 {
    font-size: 34px;
  }
}

/*----------------------------------------------------------------*/
/*  SEZIONE CON TESTO A DESTRA E SEZIONE CON TESTO A SINISTRA
/*----------------------------------------------------------------*/

/*-- titoletto --*/
.section-sinistra .titoletto,
.section-destra .titoletto {
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
/*--- colonna con testo a destra  --*/
.section-destra-txt {
  padding-left: 55px;
  padding-right: 30px;
}
/*--- colonna con testo a sinistra--*/
.section-sinistra-txt {
  padding-left: 30px;
  padding-right: 55px;
}

/*-- titolo e paragrafo --*/
.section-sinistra-txt h2,
.section-destra-txt h2 {
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.25px;
  line-height: 1.2;
}
.section-sinistra-txt p,
.section-destra-txt p {
  margin-top: 5px;
}

/*-- immagine --*/
.section-sinistra-img img,
.section-destra-img img {
  object-fit: cover;
  width: 100%;
  display: block;
}

/*--- colonna con testo a sinistra e a destra--*/
/* Tablet */
@media (max-width: 991px) {
  .section-sinistra-txt,
  .section-destra-txt {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 50px;
  }
  .section-sinistra-txt h2,
  .section-destra-txt h2 {
    font-size: 34px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .section-sinistra-txt,
  .section-destra-txt {
    padding-left: 30px;
    padding-right: 30px;
  }
  .section-sinistra-txt h2,
  .section-destra-txt h2 {
    font-size: 30px;
  }
}

.titoletto-link {
  color: var(--orange);
  font-size: 0.825rem;

  font-weight: 800;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.5px;
  margin-top: 28px;
  margin-bottom: 28px;
  transition: color 0.3s ease, transform 0.2s ease;
}
.titoletto-link:hover {
  color: var(--azzurro); /* cambia colore in hover */
  transform: translateX(4px); /* piccolo spostamento a destra */
  text-decoration: underline; /* aggiunge sottolineatura */
}

/* ==========================================================================
  00. RICHIEDI UNA PRIMA VISITA
  =========================================================================== */

.banner-richiesta-visita {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 991px) {
  .banner-richiesta-visita {
    min-height: 350px;
  }
}
@media (max-width: 767px) {
  .banner-richiesta-visita {
    min-height: 270px;
  }
}

.banner-richiesta-visita {
  background-image: url('/images/testate-pagina/richiedi-prima-visita.webp');
}

.banner-richiesta-visita.home {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-home.webp');
}

.banner-richiesta-visita.pediatrica {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-pediatrica.webp');
}

.banner-richiesta-visita.banner-ortodonzia {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-ortodonzia.webp');
}

.banner-richiesta-visita.banner-chirurgia-orale {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-chirurgia-orale.webp');
}

.banner-richiesta-visita.banner-conservativa {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-conservativa.webp');
}

.banner-richiesta-visita.banner-endonzia {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-endonzia.webp');
}

.banner-richiesta-visita.banner-estetica {
  background-image: url('/images/testate-pagina/banner-estetica-del-sorriso.webp');
}

.banner-richiesta-visita.banner-parodontologia {
  background-image: url('/images/testate-pagina/banner-parodontolgia.webp');
}

.banner-richiesta-visita.banner-implantologia {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-implantologia.webp');
}

.banner-richiesta-visita.banner-gnatologia {
  background-image: url('/images/testate-pagina/banner-richiedi-visita-gnatologia.webp');
}

/* ==========================================================================
  00. PAGINA CENTRO ODONTOIATRICO
  =========================================================================== */

/*-- CARD DOTTORI --*/
/* Base */
.card-dottori {
  display: block;
  background-color: #fff;
  border-radius: 0;
  border: none;
  color: var(--colore-testo);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.card-dottori .card-body {
  padding-top: 25px;
}
/* Testi */
.card-dottori .card-title {
  color: var(--azzurro);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.card-dottori .card-subtitle {
  font-weight: 400;
}

.card-dottori .card-subtitle {
  color: var(--testo-grigio);
}

/* Immagini uniformi + zoom-inverso */
.zoom-inverso {
  overflow: hidden;
}

.card-dottori img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transform: scale(1.1); /* più grande di base */
  transition: transform 0.5s ease;
}

.card-dottori:hover img,
.card-dottori:focus-visible img {
  transform: scale(1); /* zoom verso l'interno */
}

/* Mobile più compatto */
@media (max-width: 767.98px) {
  .card-dottori img {
    height: 280px;
  }
}

/*-- GALLERY CENTRO ODONTOIATRICO --*/
/* Contenitore */
#gallery-centro-odontoiatrico a {
  aspect-ratio: 3 / 2; /* per ritaglio a 1200x800 */
  display: block;
  position: relative;
  overflow: hidden;
}

/* Immagini: un po’ più larghe, traslate a sinistra */
#gallery-centro-odontoiatrico img {
  width: calc(100% + 50px);
  max-width: calc(100% + 50px);
  height: auto;
  object-fit: cover;
  display: block;
  transform: translate3d(-40px, 0, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Overlay: leggero */
#gallery-centro-odontoiatrico a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Hover: immagine “rientra” e overlay compare */
#gallery-centro-odontoiatrico a:hover img {
  transform: translate3d(0, 0, 0);
}
#gallery-centro-odontoiatrico a:hover::after {
  opacity: 1;
}

/* ==========================================================================
00. PAGINA SERVIZI
=========================================================================== */

section.servizi-elenco {
  position: relative;
  z-index: 2;
}

.servizio-img {
  position: relative;
  overflow: hidden;
}

.servizio-link {
  display: block;
  position: relative;
  transition: transform 0.3s ease;
}
.servizio-link img {
  height: 300px;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

@media (max-width: 576px) {
  .servizio-link img {
    height: 250px;
  }
}

.servizio-testo {
  width: 100%;
  max-width: 80%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -20%);
  color: #fff;
  text-align: center;
  background-color: rgba(0, 159, 227, 0.8);
  font-family: var(--ff-primario);
  font-size: 30px;
  line-height: 36px;
  font-weight: bold;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

/*--- colonna con testo a sinistra--*/
@media (max-width: 991.98px) {
  .servizio-testo {
    font-size: 26px;
    line-height: 30px;
    max-width: 85%;
  }
}
/*--- colonna con testo a sinistra--*/
/* Mobile */
@media (max-width: 767.98px) {
  .servizio-testo {
    font-size: 24px;
    max-width: 90%;
    line-height: 28px;
    padding: 8px 16px;
  }
}

/* Effetto hover: ingrandisce tutto e cambia colore del background del testo */
.servizio-link:hover {
  transform: scale(1.03);
}

.servizio-link:hover .servizio-testo {
  background-color: rgba(238, 115, 0, 0.7); /* colore arancio */
}

/* ==========================================================================
  00. PAGINA ORTONDONZIA INFANTILE
  =========================================================================== */
.servizi-infantili {
  padding: 30px 0 30px 80px;
  /* background-color: var(--azzurro); */
}
.servizi-infantili .servizi-1-3 {
  margin-right: 100px;
  padding-left: 0;
}
.servizi-infantili h2 {
  font-size: 42px;
  padding-bottom: 60px;
}
.servizio-infantile-img {
  background-image: url('/images/odontoiatria-infantile/odontoiatria-infantile-servizi.webp');
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  min-height: 300px;
}

.servizio-infantile h5 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  .servizi-infantili {
    padding: 30px;
  }
  .servizio-infantile-img {
    min-height: 500px;
  }

  .servizi-infantili h2 {
    text-align:start;
    font-size: 34px;
    padding-bottom: 40px;
  }
  .servizi-infantili .servizi-1-3 {
    margin-right: 0;
  }
}

/* ==========================================================================
  00. PAGINA ORTONDONZIA tradizionale e invisibile
  =========================================================================== */
.ortodonzia-tradizionale-invisibile {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--azzurro);
}
.ort-tradizionale,
.ort-invisibile {
  background-color: #fff;
  padding: 30px 30px;
  box-shadow: 0 4px 24px rgba(var(--azzurro-rgb), 0.4);
}

@media (min-width: 992px) {
  .ort-tradizionale,
  .ort-invisibile {
    min-height: 370px;
  }
}
.ortodonzia-tradizionale-invisibile img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.ort-tradizionale h2,
.ort-invisibile h2 {
  font-size: 38px;
  letter-spacing: -0.25px;
  line-height: 1.2;
  padding-bottom: 20px;
}
.ort-tradizionale p,
.ort-invisibile p {
  margin-bottom: 16px;
}

@media (max-width: 991px) {
  .ort-tradizionale h2,
  .ort-invisibile h2 {
    font-size: 32px;
  }
  .ort-tradizionale {
    margin-bottom: 60px;
  }
}

/* ==========================================================================
  00. PAGINA IMPLANTOLOGIA E PROTESI DENTARIA
  =========================================================================== */
.implantologia-protesi {
  padding: 30px 0 30px 80px;
  /* background-color: var(--azzurro); */
}

/* ==========================================================================
00. NEWS SINGOLA E NOTIZIE
=========================================================================== */

.testata-news-singola {
  height: 150px;
  background-image: url('/images/testate-pagina/news-singola.webp'); /* tua immagine */
  background-size: cover;
  background-position: center;
  position: relative;
}
.testata-news-singola div {
 padding-left:0;
 padding-right:0;}

.testata-news-singola h2 {
  font-size: 30px;
  padding: 80px 0 0 12px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.news-singola {
  padding: 70px 0 10px;
}
.news-titolo {
  font-size: 42px;
  line-height: 1.2;
}

/* Desktop default */
.news-immagine {
  display: block;
  width: 100%;
  height: 450px; /* altezza coerente con 950×450 */
  object-fit: cover;
  object-position: center;
}

/* Tablet */
@media (max-width: 991.98px) {
  .news-singola {
  padding-top:50px;
  }
  .news-immagine {
    height: 360px;
  }
  .news-titolo {
  font-size: 36px;
  line-height: 1.1;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .testata-news-singola h2 {
  font-size: 26px;
  padding:60px 30px;
  }
  .news-singola {
    padding: 50px 20px 30px;
  }
  .news-immagine {
    height: 240px;
  }
}

/* =========================
   NORMALIZZAZIONE CONTENUTO DINAMICO
   Wrapper: .news-contenuto
   ========================= */
/* Spaziatura base: titoli, paragrafi, liste */
.news-contenuto > * {
  margin-top: 0;
  margin-bottom: 12px;
}
.news-contenuto h1,
.news-contenuto h2,
.news-contenuto h3,
.news-contenuto h4,
.news-contenuto h5,
.news-contenuto h6 {
  font-weight: 700;
  color: var(--azzurro);
  font-size: 26px;
  margin-top: 30px;
}
/*desktop */
.news-singola p {
  margin-right: 100px;
}
/* Mobile */
@media (max-width: 767.98px) {
   .news-singola p{
    margin-right: 0;
  }
}


/* ------------ PAGINATORE DELLE NEWS  ------------------ */
.pagination-area {
  text-align: center;
  width: 100%;
  margin-top: 20px;
}
.pagination-area .pagination {
  display: inline-block;
  list-style: none;
  font-size: 24px;
  color: var(--azzurro);
  text-align: center;
}
.pagination-area .pagination li {
  display: inline;
}
.pagination-area .pagination li a,
.pagination-area .pagination li a.active {
  float: left;
  margin: 0 3px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #999999;
}
.pagination-area .pagination li a:hover {
  color: var(--azzurro);
}
.pagination-area .pagination li.active a {
  border: 1px solid var(--azzurro);
  color: var(--azzurro);
  font-weight: bold;
}
/* -------------- FINE PAGINATORE DELLE NEWS ------------------ */

/* ------ NOTIZIE ------ */

.testata-notizie {
  height: 150px;
  background-image: url('/images/testate-pagina/news-singola.webp'); /* tua immagine */
  background-size: cover;
  background-position: center;
  position: relative;
}
.testata-notizie h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
00. SEZIONE CARD TRE NEWS - 1 RIGA IN HOME - 3 RIGHE IN NEWS-LIST
=========================================================================== */
/* titolo della sezione */
.ultime-news {
  padding-top: 70px;
  padding-bottom: 100px;
}

@media (max-width: 991px) {
  .ultime-news {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .ultime-news {
    padding-top: 30px;
    padding-bottom: 80px;
  }
  .ultime-news p {
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
  }
}

/*-- CARD NOTIZIE --*/
/* Base */
.card-notizie {
  background-color: #fff;
  border: none;
  border-radius: 0;
  transition: all 450ms ease-in-out;
  overflow: hidden;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
}

.card-notizie .card-body {
  padding: 20px 25px;
}

/* Titolo */
.card-notizie .card-title {
  color: var(--azzurro);
  font-weight: 700;
  font-size: 20px;
}

/* Testo */
.card-notizie .card-text {
  margin-top: auto; /* spinge il testo in basso */
}
.card-notizie img {
  width: 100%;
  aspect-ratio: 16/9; /* controlla la proporzione */
  object-fit: cover;
  display: block;
}

.card-notizie:hover {
  transform: scale(1.03);
  background-color: #fafafa;
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
/* pulsante leggi tutte le notizie */
.ultime-news .btn {
  color: #fff;
  background-color: var(--azzurro);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.25px;
  font-weight: 600;
  padding: 12px 24px;
  transition: transform 0.2s ease, background-color 0.3s, color 0.3s;
}

.ultime-news .btn:hover {
  color: var(--azzurro);
  background-color: #fff;
  transform: scale(1.03);
}

/* ==========================================================================
  00. PAGINA PREVENZIONE E TERAPIA IGIENICA
  =========================================================================== */
.card-icone-dentali {
  padding-top: 100px;
  padding-bottom: 80px;
  margin-bottom: 100px;
  margin-top: 100px;
}
.card-icone-dentali h3 {
  text-align: center;
  font-size: 38px;
  color: #fff;
  padding-bottom: 45px;
}
.card-icone-dentali .card {
  border-radius: 38px;
  text-align: center;
  padding-top: 30px;
}
.card-icone-dentali .card-body {
  padding: 15px 25px;
}
.card-icone-dentali .card-img-top {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}
.card-icone-dentali .card-title {
  font-size: 20px;
  color: var(--azzurro);
}

/* ==========================================================================
  00. PAGINA GNATOLOGIA
  =========================================================================== */

/*  tre box orizzontali al centro */
.servizi-box {
  padding-top: 80px;
  height: 220px; /* altezza della riga celeste */
}

/* Contenitore intera riga con bordi arrotondati */
.box-row {
  margin-top: -60px;
  margin-bottom: 120px;
}
/* Box interni */
.box-row .box-item {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* serve per posizionare la linea divisoria */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Testo */
.box-row h5 {
  font-size: 20px;
  margin-bottom: 8px;
  line-height: 28px;
}

@media (max-width: 767.98px) {
  .servizi-box .box-item {
    border-right: none;
    border-bottom: 1px solid #8a8a8a;
  }
  .servizi-box .box-item:last-child {
    border-bottom: none;
  }
}

/* ------- I nostri trattamenti ------- */
.trattamenti {
  padding: 30px 0 30px 80px;
}
.trattamenti-img {
  background-image: url('/images/gnatologia/i-nostri-trattamenti.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}
@media (max-width: 1200px) {
  .trattamenti-img {
    min-height: 500px;
  }
}
@media (max-width: 767px) {
  .trattamenti {
    padding: 30px 30px 10px;
  }
  .trattamenti-img {
    min-height: 300px;
  }
}

.trattamenti h2 {
  padding-bottom: 15px;
}

.trattamenti h5 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* ==========================================================================
  00. PAGINA IMPLANTOLOGIA E PROTESI DENTARIA
  =========================================================================== */
.col-protesi-dentaria,
.col-implantologia {
  background-color: var(--azzurro);
  border-radius: 8px;
  padding: 60px 60px 30px 80px;
  margin: 60px 0px 50px -140px;
}
.protesi-dentaria,
.box-implantologia {
  padding-bottom: 30px;
  color: #fff;
}

.protesi-dentaria-img,
.implantologia-img {
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}

@media (max-width: 1200px) {
  .col-protesi-dentaria,
  .col-implantologia {
    margin: -100px 0px 0px;
    padding: 40px;
  }
  .protesi-dentaria-img,
  .implantologia-img {
    min-height: 400px;
  }
}

.protesi-dentaria-img {
  background-image: url('/images/implantologia/protesi-dentaria.webp');
}
.implantologia-img {
  background-image: url('/images/implantologia/implantologia.webp');
}

.protesi-dentaria h2,
.box-implantologia h2 {
  color: #fff;
  font-size: 42px;
  padding-bottom: 30px;
}

.protesi-dentaria h5,
.box-implantologia h5 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.list-implantologia p,
.list-protesi-dentaria p {
  margin-bottom: 10px;
}

.list-protesi li {
  display: flex;
  margin-bottom: 15px;
}
.list-protesi li span {
  flex-shrink: 0;
  margin-right: 20px;
}

.lista-puntata li {
  display: flex;
  margin-bottom: 5px;
}
.lista-puntata li span {
  flex-shrink: 0;
  margin-right: 15px;
}

/*--- GALLERY IMPLANTOLOGIA ---*/
/*--- GALLERY-CONTATTI ---*/
/* Immagini */
#gallery-implantologia img,
#gallery-contatti img,
#gallery-prevenzione-e-terapia-igienica img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

/* ==========================================================================
  00. PAGINA CONTATTI
  =========================================================================== */

.testata-contatti {
  height: 150px;
  background-image: url('/images/testate-pagina/news-singola.webp'); /* tua immagine */
  background-size: cover;
  background-position: center;
  position: relative;
}
.testata-contatti h1 {
  font-size: 42px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/*------ RECAPITI ------ */
.recapiti {
  padding: 80px 0 80px;
}

@media (max-width: 991px) {
  .recapiti {
    padding: 60px 20px 60px;
  }
}

.recapiti span,
.recapiti a {
  font-weight: 600;
  font-size: 18px;
}

/* MAP */
#map {
  width: 100%;
  height: 400px;
}

/* --------------------------------------------------------
    MODULO DI CONTATTO
-------------------------------------------------------- */

.divContactBoxLoader {
  display: none;
  padding: 15px 0;
  color: #464646;
}
.divContactBoxLoader img {
  vertical-align: middle;
  margin-left: 10px;
}

.modulo-contatto .form-custom {
  width: 80%;
  margin: 0 0 0 auto;
  background-color: var(--fondino-azzurro);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  .modulo-contatto .form-custom {
    width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 767px) {
  .modulo-contatto .form-custom {
    margin-top: 40px;
  }
}

.modulo-contatto h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.modulo-contatto a {
  color: var(--azzurro);
  font-size: 14px;
  font-weight: 600;
}

.modulo-contatto .form-custom-control,
.modulo-contatto .form-custom-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.btn-modulo-contatto {
  font-weight: 600;
  background-color: var(--azzurro);
  color: #fff;
  border: none;
  padding: 12px 20px;
  margin-top: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-modulo-contatto:hover {
  background-color: var(--fondino-arancione);
  color: #fff;
}

/* Nasconde il campo honeypot del modulo contatti */
.honeypot {
  display: none;
}

/* ==========================================================================
  00. PAGINA CHIRURGIA ORALE MINI INVASIVA
  =========================================================================== */
.interventi-img,
.mini-invasivo-img {
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}
.mini-invasivo-img {
  background-image: url('/images/chirurgia-orale/approccio-mini-invasivo.webp');
}
.interventi-img {
  background-image: url('/images/gnatologia/i-nostri-trattamenti.webp');
}
.interventi,
.mini-invasivo {
  background-color: var(--azzurro);
  padding: 100px 0 80px 80px;
}
@media (max-width: 1200px) {
  .interventi-img,
  .mini-invasivo-img {
    min-height: 400px;
  }
  .mini-invasivo {
    padding: 40px;
  }
}
.interventi h2,
.mini-invasivo h2 {
  color: #fff;
  font-size: 42px;
  padding-bottom: 30px;
}
.interventi h6,
.mini-invasivo h6 {
  color: #fff;
  font-size: 0.825rem;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 28px;
}

.interventi p,
.mini-invasivo p {
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}

.interventi h5,
.mini-invasivo h5 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.tipologie-interventi h5 {
  color: var(--azzurro);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 20px;
}

/* ==========================================================================
  00. PAGINA PARADONTOLOGIA
  =========================================================================== */
.bg-trattamenti-chirurgici,
.bg-trattamenti-endonzia,
.bg-trattamenti-estetica {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* necessario per il posizionamento dell’overlay */
  overflow: hidden;
}

.bg-trattamenti-chirurgici {
  background-image: url('/images/paradontologia/trattamenti-chirurgici-paradontologia.webp');
}
.bg-trattamenti-endonzia {
  background-image: url('/images/endonzia/trattamenti-endonzia.webp');
}
.bg-trattamenti-estetica {
  background-image: url('/images/estetica-del-sorriso/trattamenti-estetica-del-sorriso.webp');
}

.bg-trattamenti-chirurgici::before,
.bg-trattamenti-endonzia::before,
.bg-trattamenti-estetica::before {
  content: '';
  position: absolute;
  inset: 0; /* equivale a top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.2); /* overlay nero con opacità */
  z-index: 1;
  z-index: 1;
}
.bg-trattamenti-chirurgici h2 {
  text-align: center;
  z-index: 10;
  font-size: 44px;
  position: relative; /* per stare sopra l’overlay */
  padding-bottom: 30px;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.trattamenti-chirurgici,
.trattamenti-endonzia,
.trattamenti-estetica {
  z-index: 10;
  max-width: 80%;
}

@media (max-width: 991px) {
  .trattamenti-chirurgici,
  .trattamenti-endonzia,
  .trattamenti-estetica {
    max-width: 90%;
  }
}

.card-paradontologia {
  height: 100%;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 20px;
}
.card-paradontologia .card-title {
  font-size: 30px;
  color: var(--azzurro);
  margin-bottom: 20px;
}

/* ==========================================================================
  00. PAGINA ENDONZIA
  =========================================================================== */
.card-endonzia,
.card-estetica {
  height: 100%;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 40px;
}

@media (max-width: 991px) {
  .card-endonzia,
  .card-estetica {
    padding: 20px;
  }
}

.card-endonzia .card-title,
.card-estetica .card-title {
  font-size: 24px;
  color: var(--azzurro);
  margin-bottom: 20px;
}

.card-endonzia .card-text,
.card-estetica .card-text {
  font-weight: 400;
  padding-right: 20px;
}

/* BANNER RICHIESTA VISITA personalizzazioni */
.banner-endonzia h3 {
  font-size: 32px;
}
.banner-endonzia p {
  font-size: 20px;
  max-width: 90%;
  margin-bottom: 20px;
}

/* ==========================================================================
  00. PAGINA FILOSOFIA
  =========================================================================== */
.swiperFilosofia-wrap {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.swiperFilosofia-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* pallini della navigazione */
.swiperFilosofia-pagination {
  width: 100%;
  text-align: center;
  left: 0;
  position: relative;
  padding-top: 50px;
}

.swiperFilosofia-main .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: var(--azzurro);
  opacity: 0.3;
  border-radius: 50%;
  transition: background 0.3s, opacity 0.3s;
}

.swiperFilosofia-main .swiper-pagination-bullet-active {
  background: var(--azzurro);
  opacity: 1;
  transform: scale(1.2);
}

/* frecce della navigazione */
.swiperFilosofia-button-prev,
.swiperFilosofia-button-next {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background: var(--azzurro); /* azzurro trasparente */
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  transition: background 0.2s;
  user-select: none;
}

.swiperFilosofia-button-prev:hover,
.swiperFilosofia-button-next:hover {
  background: var(--fondino-arancione);
}

.swiperFilosofia-button-prev {
  left: 15px;
}

.swiperFilosofia-button-next {
  right: 15px;
}

/* Icone base per le frecce */
.swiperFilosofia-button-prev::after {
  content: '‹';
}
.swiperFilosofia-button-next::after {
  content: '›';
}

/* riquadri a destra della immagine dello slider */
.riquadro-slide-filosofia {
  background-color: var(--azzurro);
  padding: 50px;
  margin-left: -120px;
}
.riquadro-slide-filosofia h3 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 20px;
}
.riquadro-slide-filosofia p {
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}
/* Tablet */
@media (max-width: 991.98px) {
  .swiperFilosofia-wrap {
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .riquadro-slide-filosofia {
    padding: 30px;
  }
}
/* Mobile */
@media (max-width: 767.98px) {
  .swiperFilosofia-wrap {
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .swiperFilosofia-main img {
    height: 200px;
  }
  .riquadro-slide-filosofia {
    background-color: var(--azzurro);
    margin: 0;
    padding: 30px 50px;
  }
  .riquadro-slide-filosofia p {
    font-size: 16px;
  }
  .riquadro-slide-filosofia h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .swiperFilosofia-button-prev,
  .swiperFilosofia-button-next {
    top: 25%;
  }
}

/* ==========================================================================
  00. PAGINA HOME
  =========================================================================== */
/* --------- slider in testata --------- */
.swiperHome-wrap {
  position: relative; /* necessario per il posizionamento dell’overlay */
  overflow: hidden;
}

.swiperHome-main {
  position: relative; /* necessario per posizionare sopra il testo */
}
.swiperHome-main h2 {
  z-index: 2;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* solo verticale */
  color: #fff;
  text-align: center;
  padding-top: 300px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.swiperHome-main img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  /* Stiliper tablet */
  .swiperHome-main img {
    height: 600px;
  }
  .swiperHome-main h2 {
    padding-top: 300px;
  }
}
@media (max-width: 767px) {
  /* Stili per mobile */
  .swiperHome-main img {
    height: 400px;
  }
  .swiperHome-main h2 {
    padding-top: 200px;
  }
}

.swiperHome-main .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.swiperHome-main .swiper-pagination.swiper-pagination-bullets {
  bottom: 30px;
}
.swiperHome-main .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: #fff;
  opacity: 0.7;
  border-radius: 50%;
  transition: background 0.3s, opacity 0.3s;
}

.swiperHome-main .swiper-pagination-bullet-active {
  background: var(--azzurro);
  opacity: 1;
  transform: scale(1.2);
}

/* --------- slider servizi in home --------- */
.swiperServizi-wrap {
  background-color: var(--azzurro);
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 100px;
  margin-top: 100px;
}

/* Tablet */
@media (max-width: 991.98px) {
  .swiperServizi-wrap {
    margin-bottom: 80px;
    margin-top: 80px;
    padding: 60px 20px;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .swiperServizi-wrap {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 80px;
    margin-top: 80px;
  }
}

.swiperServizi-wrap h2 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  margin-bottom: 50px;
}
/* pallini della navigazione */
.swiperServizi-pagination {
  width: 100%;
  text-align: center;
  left: 0;
  position: relative;
  padding-top: 40px;
}

.swiperServizi-main .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: #fff;
  opacity: 0.3;
  border-radius: 50%;
  transition: background 0.3s, opacity 0.3s;
}

.swiperServizi-main .swiper-pagination-bullet-active {
  background: var(--orange);
  opacity: 1;
  transform: scale(1.2);
}

/* ==========================================================================
  00. FOOTER
  =========================================================================== */
footer {
  background-color: #f6f6f6;
  padding: 80px 0 20px;
}
.info-footer {
  margin-bottom: 10px;
}
footer hr {
  margin: 5px 0;
}
.footerCopyright {
  padding: 10px 0;
  font-size: 0.9rem;
}

.footerCopyright a {
  margin-left: 15px; /* spazio tra i link */
  text-decoration: none;
}
@media (max-width: 991px) {
  footer {
    padding: 60px 0 20px;
  }
}
@media (max-width: 767px) {
  .info-footer {
    margin-top: 30px;
  }
}