:root {
  --main-primary-color: #D6AD60;
  --main-primarylight-color: #d0b084;
  --main-secondary-color: #122620;
  --main-secondary-new-color: #30658E;
  --main-secondarylight-color: #BF5656;
  --main-secondarylight-new-color: #C3D363;
  --main-cta-color: #D6006E;
  --main-white-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  font-display: swap;

}

.overflow-hidden {
  overflow: hidden;
}

.inverse_color {
  /* background-color: #00adef; */
  background-color: var(--main-secondary-color);
  color: var(--main-white-color);
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

div.solid {
  border-top: 3px solid var(--main-white-color);
  width: 10%;
}


.navbar {
  background-color: var(--main-primary-color);
}

.nav-link, .navbar-brand span {
  color: var(--main-white-color) !important;
}

.navbar.scrolled {
  background-color: var(--main-primary-color);
  transition: background-color 200ms linear;
}

.navbar.scrolled .nav-link {
  color: var(--main-white-color) !important;
}

.navbar.scrolled .navbar-brand span {
  color: var(--main-white-color) !important;
}

/* Container unico del Dropdown */
.dropdown-menu {
  background-color: var(--main-secondary-new-color);
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  margin-top: 8px;
  min-width: 220px; /* Garantisce una larghezza uniforme e stabile */
  overflow: hidden;
}

/* Singola voce di menu */
.dropdown-item {
  color: var(--main-white-color) !important;
  background-color: transparent;
  padding: 10px 20px;
  font-size: 0.95rem;
  margin-bottom: 0; /* Rimosso lo stacco tra i bottoni */
  border-radius: 0;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

/* Hover e Focus raffinati */
.dropdown-item:hover, 
.dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.12); /* Trasparenza delicata sull'hover */
  color: var(--main-white-color) !important;
  padding-left: 25px; /* Sottile effetto scorrimento verso destra */
}

/* Separatore opzionale elegante */
.dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 6px 0;
}

/* Adattamento per Mobile (< 768px) */
@media (max-width: 767.98px) {
  .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.05); /* Sfondo leggero rientrato per il mobile */
    box-shadow: none;
    border-radius: 4px;
    padding: 0;
    margin-top: 4px;
    margin-left: 15px; /* Rientro gerarchico per far capire che è un sotto-menu */
  }

  .dropdown-item {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  .dropdown-item:hover, 
  .dropdown-item:focus {
    padding-left: 15px; /* Disabilita lo shift orizzontale su touch */
  }
}

/* 

.navbar {
  background-color: var(--main-primary-color);
}

.nav-link, .navbar-brand span {
  color: var(--main-white-color) !important;
} */

.active {
  /* text-decoration: underline; */
}

.nav-link:hover {
  text-decoration: underline;
}

#navbar_logo {
  width: 12%;
}

.row-separator {
  margin: 1em 0;
}

.separator {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  /* Imposta la larghezza massima del separatore */
  margin: 0 auto;
  /* Centra il separatore orizzontalmente */
}

.line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--main-secondary-new-color);
}

.circle {
  width: 20px;
  height: 20px;
  background-color: var(--main-secondary-new-color);
  border-radius: 50%;
  margin: 0 10px;
  /* Aggiunge un margine tra la linea e il cerchio */
}

@media (max-width: 480px) {

  .navbar-brand span {
    font-size: 16px;
  }
}

@media (max-width:790px) {

  .navbar-brand span {
    font-size: 16px;
  }
}

/* -----------------------------------PRIMARY_CONTENT------------------------------------------------ */
.div_io_mobile {
  display: none;
}

.full-height {
  min-height: 90vh;
  display: flex;
  flex-wrap: wrap;
}

.image-container {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 4;
}

.image-container img, .button-container button {
  max-height: 100%;
  max-width: 100%;
}

#primary_content_lc_logo {
  display: none;
}

.button-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.primary_content {
  background-color: var(--main-primary-color);
  /* background-image: url('resources/images/carousel/sfondo.webp'); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 2;

}

#primary_content-btn {
  background-image: linear-gradient(147deg, var(--main-secondarylight-color) 0%, var(--main-cta-color) 50%);
  border-color: var(--main-secondarylight-color);
  margin: 20px 0;
  padding: 5px 0 !important;
  width: 90%;
}

#primary_content-btn-v2 {
  background-image: linear-gradient(147deg, var(--main-secondary-new-color) 0%, var(--main-secondary-new-color) 50%);
  border-color: var(--main-secondary-new-color);
  margin: 20px 0;
  padding: 5px 0 !important;
  width: 90%;
}

div:not(.elfsight-app-55285fe9-b27d-4089-b6ba-af1459d96863 *):not(.bal-container *):not(.row-separator *):not(.primary_content *):not(.blog-slider *):not(.op-slider *):not(.main_container_promo *) {
  height: inherit !important;
}


@media (max-width: 415px) and (orientation: portrait) {

  .full-height {
    min-height: 85vh;
    display: flex;
    flex-wrap: wrap;
  }

  .primary_content {
    /* background-image: linear-gradient(147deg, var(--main-white-color) 0%, var(--main-primary-color) 74%); */
    background: linear-gradient(50deg, var(--main-primarylight-color) 50%, var(--main-primary-color) 50%);
  }

  #primary_content_rc_logo, #primary_content_lc_logo {
    position: absolute;
    max-height: 32vh;
    left: 0;
    right: 0;
    bottom: 50vh;
  }

  #primary_content_lc_logo {
    display: flex;
  }


  #primary_content_rc_logo img {
    display: none;
  }

  #primary_content_rc_logo div {
    width: 100%;
  }

  #primary_content_rl {
    z-index: 1;
  }

  #primary_content_rc {
    position: absolute;
    top: 75vh;
    left: 0;
    z-index: 2;
  }

  .image-container {
    height: 75vh !important;
    margin-bottom: 0 !important;
  }

  #primary_content-btn {
    background-image: linear-gradient(147deg, var(--main-secondarylight-color) 0%, var(--main-cta-color) 50%);
    font-size: 1.5em;
    width: 100%;
    padding: 10px !important;
    /* box-shadow: 0px 14px 80px rgba(255, 255, 255, 1); */
  }
}

@media (max-width: 800px) and (orientation: portrait) {

  .full-height {
    min-height: 85vh;
    display: flex;
    flex-wrap: wrap;
  }

  #primary_content_rc_logo, #primary_content_lc_logo {
    position: absolute;
    max-height: 32vh;
    left: 0;
    right: 0;
    bottom: 50vh;
  }

  #primary_content_lc_logo {
    display: flex;
  }

  #primary_content_rc_logo img {
    display: none;
  }


  #primary_content_rl {
    z-index: 1;
  }

  #primary_content_rc {
    position: absolute;
    top: 75vh;
    left: 0;
    z-index: 2;
  }


  .image-container {
    height: 75vh !important;
    margin-bottom: 0 !important;
  }

  #primary_content-btn {
    background-image: linear-gradient(147deg, var(--main-secondarylight-color) 0%, var(--main-cta-color) 50%);
    font-size: 1.5em;
    width: 100%;
    padding: 10px !important;
    /* box-shadow: 0px 14px 80px rgba(255, 255, 255, 1); */
  }
}

@media (max-width: 916px) and (orientation: landscape) {

  .primary_content .col-md-12 {
    width: 50% !important;
    flex: none !important;
  }

  .primary_content .row {
    display: flex;
    justify-content: end;
    align-items: end;
  }

  h1 {
    font-size: 2em !important;
  }

  #primary_content-btn {
    background-color: var(--main-secondarylight-color);
    padding: 20px 0;
    font-size: 1.5em;
    width: 90%;
  }
}

@media (min-width: 916px) and (max-width: 1025px) and (orientation: landscape) {
  #io_nome {
    font-size: 5.5em;
  }

  #primary_content-btn {
    background-color: var(--main-secondarylight-color);
    padding: 20px 0;
    font-size: 1.5em;
    width: 90%;
  }
}

/* -----------------------------------CHI SONO------------------------------------------------ */

.chi_sono_section {
  /* margin: 40px 0 0 0; */
  min-height: 80vh;
  background-color: var(--main-white-color);
}

.chi_sono img {
  float: left;
  width: 100%;
  border-radius: 10px;
}

.chi_sono span {
  float: right;
  text-align: justify;
  padding-right: 35px;
  color: var(--main-secondary-color);
}

.courses_list {
  list-style: none;
  padding: 0;
}

.courses_list li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f19d";
  font-display: swap;
}

.courses_list li {
  margin: 10px 0;
}

#citazione {
  text-align: center;
  padding: 34px 0;
}

#chi_sono_mobile {
  /* display: none; */
}

#chi_sono_desk {
  display: none;
}

@media (max-width: 480px) {

  #chi_sono_desk {
    display: none;
  }

  #chi_sono_mobile {
    display: block;
  }

  .chi_sono {
    margin: 10px 0;
    min-height: 80vh;
  }

  .chi_sono img {
    width: 100%;
  }

  .chi_sono span {
    text-align: center;
    padding: 5px;
  }

  #io_nome_i {
    white-space: break-spaces;
  }

  #chi_sono_title {
    display: block;
    text-align: center;
    padding: 10px 0;
  }

  #citazione {
    text-align: center;
    padding: 34px 0;
    font-size: 20px;
  }

  .courses_list li {
    text-align: left;
    border-bottom: 1px solid;
    margin: 20px 0px;
  }
}

.chi_sono_section .section-title {
  margin-bottom: 0.4em;
  text-align: center;
  color: var(--main-white-color);
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 5px 0 5px 15px;
  background: linear-gradient(-64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}

.chi_sono_section .section-footer {
  text-align: center;
  color: var(--main-white-color);
  margin-top: 0.4em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 0.5em;
  background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}


@media (max-width:790px) {
  #chi_sono_desk {
    display: none;
  }

  #chi_sono_mobile {
    display: block;
  }


  .chi_sono_section .section-title {
    background: var(--main-secondary-new-color);
  }

  .chi_sono_section .section-footer {
    background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
  }
}

/* -----------------------------------SERVIZI------------------------------------------------ */

section {
  padding: 60px 0;
  background: var(--main-secondary-new-color);
}

section .section-title {
  text-align: center;
  color: var(--main-white-color);
  margin-bottom: 50px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-white-color);
  text-align: left;
  padding: 5px 0 5px 15px;
}

#servizi_desk {
  display: none;
}

.servizi .card {
  padding: 1rem !important;
  border: none;
  margin-bottom: 1rem;
  -webkit-transition: .5s all ease;
  -moz-transition: .5s all ease;
  transition: .5s all ease;
}

.card-title {
  /* background: linear-gradient(-110deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%); */
  background-color: var(--main-secondary-new-color);
  padding-left: 0.3em;
  color: var(--main-white-color);
}

.servizi .card:hover {
  /* -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); */
}

.servizi .card .card-block {
  padding-left: 50px;
  position: relative;
}

.servizi .card .card-block a {
  /* color: #007b5e !important; */
  color: var(--main-secondary-color);
  font-weight: 700;
  text-decoration: none;
}

.servizi .card .card-block a i {
  display: none;
}

.servizi .card:hover .card-block a i {
  display: inline-block;
  font-weight: 700;
}

.servizi .card .card-block:before {
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-size: 39px;
  font-display: swap;
  /* color: #007b5e; */
  color: var(--main-secondary-new-color);
  font-weight: 900;
  left: 0;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.servizi .card .block-1:before {
  content: "\f580";
}

.servizi .card .block-2:before {
  content: "\f5c9";
}

.servizi .card .block-3:before {
  content: "\f610";
}

.servizi .card .block-4:before {
  content: "\f1ae";
}

.servizi .card .block-5:before {
  content: "\f0f0";
}

.servizi .card .block-6:before {
  content: "\f48e";
}

.servizi .card {
  position: relative;
}

.servizi .card-block {
  position: relative;
  /* Aggiungi questa proprietà per sovrapportare l'icona */
  z-index: 1;
  /* Imposta uno z-index maggiore rispetto all'icona per sovraporla */
}



.servizi .card:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  transition: 0.5s all ease;
}


.servizi .card:hover .card-icon {
  color: #fff;
}


@media (max-width: 320px) {
  .card-title {
    font-size: 1.32rem !important;
  }

  .card-text {
    text-align: justify !important;
  }
}

/* ------------------ */
/* --- Contenitore Principale Sezione --- */
#estetica_trattamenti {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Titolo Sezione visibile e distanziato */
#estetica_trattamenti h2.section-title {
    color: #122620 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 3.5rem !important;
    display: block !important;
    text-align: center !important;
}

/* --- Griglia e Spaziature (Gap) --- */
#estetica_trattamenti .row {
    row-gap: 2.5rem !important; /* Spazio verticale generoso tra le righe */
    column-gap: 0 !important;
}

/* --- Card Base --- */
#estetica_trattamenti .estetica-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(214, 173, 96, 0.3) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#estetica_trattamenti .estetica-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
}

/* --- FORZATURA IMMAGINI UNIFORMI (Aspect Ratio) --- */
#estetica_trattamenti .estetica-card .img-wrapper {
    width: 100% !important;
    height: 200px !important; /* Altezza fissa e garantita per TUTTE */
    position: relative !important;
    overflow: hidden !important;
    background-color: #f8f9fa !important;
}

#estetica_trattamenti .estetica-card .img-wrapper img,
#estetica_trattamenti .estetica-card img.card-img-top {
    width: 100% !important;
    height: 100% !important;
    max-height: 200px !important;
    object-fit: cover !important; /* Ritaglia l'immagine senza sformarla */
    object-position: center !important;
    display: block !important;
}

/* --- Corpo Card & Testi --- */
#estetica_trattamenti .estetica-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 1.5rem 1.25rem !important;
    text-align: center !important;
}

#estetica_trattamenti .estetica-card .card-title {
    color: #1a2b3c !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    background: transparent !important;
}

#estetica_trattamenti .estetica-card .card-text {
    color: #555555 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
}

/* --- Bottone --- */
#estetica_trattamenti .estetica-card .btn-estetica {
    display: inline-block !important;
    margin-top: auto !important;
    align-self: center !important;
    background-color: transparent !important;
    color: #30658E !important;
    border: 2px solid #30658E !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

#estetica_trattamenti .estetica-card .btn-estetica:hover {
    background-color: #30658E !important;
    color: #ffffff !important;
}


/* -----------------------------------SERVIZI SPECIALI: ODONTOIATRIA ESTETICA------------------------------------------------ */

.special_service_section {
  /* background: linear-gradient(to bottom, var(--main-primarylight-color) 3%, rgba(255, 255, 255, 0) 100%); */
  /* background: linear-gradient(110deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%); */
  background-image: linear-gradient(147deg, var(--main-white-color) 0%, var(--main-primarylight-color) 74%);
}



.special_service_section .section-title {
  color: var(--main-white-color);
  border-bottom: 3px solid var(--main-white-color);
  text-align: right;
  padding: 5px 15px 5px 0;
}

.special_service, .special_service_rf {
  margin: 30px 0;
}

.special_service_img, #special_service_rf_img {
  float: right;
  width: 100%;
  border-radius: 10px;
}

.special_service_section #central_box {
  border-radius: 10px;
  background: white;
  border: 0.2em solid var(--main-primary-color);
  background-color: rgba(255, 255, 255, 1);
}

.special_service_text {
  color: var(--main-secondary-color);
  border-radius: 10px;
}

#special_service-btn {
  background-color: var(--main-secondarylight-color);
  border-color: var(--main-secondarylight-color);
  margin: 20px 0;
  width: 50%;
}

#servizio_speciale_title {
  background: var(--main-secondary-new-color);
  padding: 5px;
  color: var(--main-white-color);
  border-radius: 0 5px;
}


@media (max-width: 490px) {
  .special_service div {
    padding: 10px 0;
  }

  .special_service_img {
    width: 100%;
  }

  #servizio_speciale_title {
    padding: 15px 0;
    text-align: center;
  }
}

@media (max-width:790px) {
  .special_service_section {
    background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
  }

  /* #scopri_estetica {
    background-color: var(--main-primary-color);
    padding: 10px;
    border-radius: 25px;
  }

  #scopri_estetica a {
    color: var(--main-white-color) !important;
  } */
}

@media (max-width: 1024px) {
  .special_service_section {
    margin-top: 65px !important;
  }

  #special_service-btn {
    background-color: var(--main-secondarylight-color);
    border-color: var(--main-secondarylight-color);
    padding: 20px 0;
    font-size: 1.5em;
    width: 100%;
  }
}

/* -----------------------------------SERVIZI SPECIALI: NUVOLA------------------------------------------------ */

/* Stile generale della sezione potenziato (Moderno e pulito) */
.special_service_od_nuvola_section {
    background: linear-gradient(135deg, var(--main-secondary-new-color), #2c5270);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Contenitore elegante per far risaltare il logo sul fondo scuro */
.nuvola-logo-wrapper {
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Logo pulito nei suoi colori originali */
.nuvola-brand-logo-clean {
    max-height: 45px;
    width: auto;
    object-fit: contain;
    display: block;
}
/* Etichetta del trattamento allineata al box del logo */
.treatment-label {
    display: block;
    text-align: center;
    margin-bottom: 4px;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* Titolo della sezione moderno */
.section-title-custom {
    color: var(--main-white-color);
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -0.5px;
}

/* Card delle immagini pulite ed eleganti */
.nuvola-img-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nuvola-img-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.special_service_od_nuvola_img {
    width: 100%;
    height: 280px; /* Altezza fissa per mantenere le immagini simmetriche */
    object-fit: cover;
    border-radius: 10px;
}

/* Testo descrittivo d'impatto */
.special_service_od_nuvola_text {
    color: var(--main-white-color);
    font-size: 1.6rem;
}

/* Pulsante CTA accattivante */
.btn-light {
    background-color: #ffffff;
    color: var(--main-secondary-new-color);
    transition: all 0.3s ease;
}

.btn-light:hover {
    background-color: #f8f9fa;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Utility e vecchi selettori secondari non in conflitto */
.special_service_od_nuvola {
    margin: 30px 0;
}

#servizio_speciale_title {
    background: var(--main-secondary-new-color);
    padding: 5px;
    color: var(--main-white-color);
    border-radius: 0 5px;
}

/* Media Queries ottimizzate */
@media (max-width: 490px) {
    .special_service_od_nuvola div {
        padding: 10px 0;
    }

    #servizio_speciale_title {
        padding: 15px 0;
        text-align: center;
    }
}

@media (max-width: 790px) {
    .special_service_od_nuvola_section {
        /* background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%); */
    }
}

@media (max-width: 1024px) {
    .special_service_od_nuvola_section {
        margin-top: 65px !important;
    }
}

/* -----------------------------------NOT FOUND - SERVIZI SPECIALI: ODONTOIATRIA ESTETICA------------------------------------------------ */

.special_service_section_in_notfound .section-title {
  background-color: var(--main-secondary-color);
  color: var(--main-white-color);
  border-radius: 10px;
}

.special_service_in_notfound, .special_service_rf_in_notfound {
  margin: 30px 0;
}

.special_service_in_notfound_container {
  position: relative;
}

#special_service_img_in_notfound, #special_service_rf_img_in_notfound {
  float: right;
  width: 100%;
  border-radius: 10px;
  position: relative;
}

.special_service_img_text_in_notfound {
  border-radius: 11px 11px 0 0;
  background: var(--main-secondarylight-color);
  color: var(--main-white-color);
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}


.special_service_in_notfound_container:hover {
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  cursor: pointer;
}

.special_service_text_in_notfound {
  color: var(--main-secondary-color)
}


@media (max-width: 490px) {
  .special_service_in_notfound div {
    padding: 10px 0;
  }

  #special_service_img_in_notfound {
    width: 100%;
  }

  #servizio_speciale_title_in_notfound {
    padding: 15px 0;
    text-align: center;
  }
}

@media (max-width:790px) {}

@media (max-width: 1024px) {
  .special_service_section_in_notfound {
    margin-top: 65px !important;
  }
}

/* ==========================================================================
   PAGE: PROMOZIONI & REGOLAMENTO (Opzione A - Vertical Layout)
   ========================================================================== */

/* --- 1. Variabili di Brand & Utilities --- */
:root {
    --promo-navy: #1a2b3c;
    --promo-gold: #D6AD60;
    --promo-gold-light: #fcf8f0;
    --promo-bg-soft: #f8f9fa;
}

.text-navy { color: var(--promo-navy) !important; }
.text-gold { color: var(--promo-gold) !important; }
.bg-gold { background-color: var(--promo-gold) !important; color: #ffffff !important; }
.bg-gold-subtle { background-color: var(--promo-gold-light) !important; }

/* --- 2. Contenitore Principale --- */
#main_container_promo {
    background-color: transparent !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.promo-cards-section {
    background: transparent !important;
    padding: 0 !important;
}

/* --- 3. Override Titoli Globali --- */
#main_container_promo h1,
#main_container_promo h2,
#main_container_promo h3,
#main_container_promo .card-title,
#main_container_promo .section-title {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#main_container_promo .promo-cards-section h1 {
    color: var(--promo-navy) !important;
    font-weight: 700;
}

#main_container_promo .promo-cards-section p.text-muted {
    color: #555555 !important;
}

/* --- 4. Hero Banner --- */
.promo-hero-row {
    border: 1px solid rgba(214, 173, 96, 0.2);
}

.promo-banner-img {
    object-fit: cover;
    max-height: 400px;
    width: 100%;
}

/* --- 5. Card Base (Vertical Layout) --- */
#main_container_promo .promo-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(214, 173, 96, 0.3) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    will-change: transform, box-shadow;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

#main_container_promo .promo-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(26, 43, 60, 0.12) !important;
    border-color: var(--promo-gold) !important;
}

/* --- 6. Immagine in Alto (Fix senza ritaglio/crop e altezza bloccata) --- */
#main_container_promo .promo-card-img-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* Proporzione standard pulita */
    max-height: 240px !important;    /* Evita che l'immagine cresca troppo in altezza */
    background-color: #fdfbf7 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#main_container_promo .promo-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Mostra l'immagine intera senza tagliare scritte */
    object-position: center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

#main_container_promo .promo-card:hover .promo-card-img {
    transform: scale(1.03) !important;
}

/* Badge sovrapposto - Posizionamento corretto */
#main_container_promo .promo-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background-color: var(--promo-navy) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    z-index: 5 !important;
}

/* --- 7. Corpo Card & Spaziature --- */
#main_container_promo .promo-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    padding: 1.5rem !important;
    background-color: #ffffff !important;
    height: auto !important; /* Impedisce al card-body di allungarsi oltre il necessario */
}

/* Wrapper interno per mantenere compatto il blocco di testo + highlight */
#main_container_promo .promo-card-content {
    flex: 1 0 auto !important;
}

/* Box evidenziatore dello sconto (Aderente al solo testo) */
#main_container_promo .promo-highlight {
    background-color: var(--promo-gold-light) !important;
    border-left: 4px solid var(--promo-gold) !important;
    border-radius: 8px !important;
    padding: 0.85rem 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    height: auto !important;        /* Forzato ad adattarsi solo al contenuto */
    min-height: unset !important;   /* Rimuove qualsiasi vincolo di altezza minima */
}

/* --- 8. Bottone CTA --- */
#main_container_promo .btn-promo-primary {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important; /* Spinge il bottone sempre sul fondo della card */
    background-color: var(--promo-navy) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

#main_container_promo .btn-promo-primary:hover {
    background-color: var(--promo-gold) !important;
    color: #ffffff !important;
}

/* --- 9. Sezione Regolamento --- */
.promo-rules-section {
    border: 1px solid rgba(214, 173, 96, 0.25) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%) !important;
}

.title-underline {
    width: 60px;
    height: 3px;
    background-color: var(--promo-gold);
    border-radius: 2px;
    margin-top: 8px;
}

.rule-box {
    background-color: #ffffff;
    border: 1px solid #eef2f5;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.rule-box:hover {
    transform: translateY(-3px);
    border-color: var(--promo-gold);
}

.rule-icon {
    font-size: 1.8rem;
}

/* --- 10. Responsive --- */
@media (max-width: 767.98px) {
    #main_container_promo .promo-card-img-wrap {
        aspect-ratio: 16 / 10 !important;
        max-height: 200px !important;
    }

    .promo-rules-section {
        padding: 1.5rem !important;
    }
}

/* -----------------------------------REVIEWS SECTION------------------------------------------------ */
.section_reviews {
  padding: 60px 0;
  background-color: var(--main-white-color);
}

.section_reviews .section-title {
  text-align: center;
  color: var(--main-white-color);
  margin-bottom: 50px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 5px 0 5px 15px;
  background: linear-gradient(-64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}

.section_reviews .section-footer {
  text-align: center;
  color: var(--main-white-color);
  margin-bottom: 50px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 0.5em;
  background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}

.section_reviews .section-container {
  padding: 10px 0;
}

#reviews {
  background-color: var(--main-white-color);
}

@media (max-width:790px) {
  .section_reviews .section-title {
    background: var(--main-secondary-new-color);
  }

  .section_reviews .section-footer {
    background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
  }
}

/* -----------------------------------FB SECTION------------------------------------------------ */

#fb-post {
  background-color: #385898;
}

.post-col {
  margin: 0 50px;
}

@media (max-width: 320px) {
  #fb-post {
    display: none;
  }
}

/* -----------------------------------REVIEWS------------------------------------------------ */
#reviews {
  margin-bottom: 3rem !important;
}


/* -----------------------------------SINGLE SERVICE FOCUS PAGE-------------------------------------------- */

#faq .row {
  width: 100%;
}

/* --- 1. NUOVA HERO (Isolata e moderna) --- */
.special_service_focus_section {
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 30px 10px;
  width: 100%;
}

.special_service_focus_section .special_service_focus {
  background-color: #ffffff;
  color: var(--main-secondary-color, #2c3e50);
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(60, 179, 228, 0.15);
  margin: 0 auto;
  max-width: 1450px !important;
  width: 100%;
  padding: 40px 30px !important;
}

.special_service_focus_section .special_service_focus_img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  max-height: 400px;
  transition: transform 0.5s ease;
}

.special_service_focus_section .special_service_focus_img:hover {
  transform: scale(1.02);
}

/* Allineamento perfetto del blocco CTA nella Hero desktop */
.special_service_focus .cta-wrapper .d-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.special_service_focus .cta-wrapper .text-muted {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
}

.special_service_focus_box_2 .editorial-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.special_service_focus_box_2 {
    background-color: #fcfbfa !important; /* Sfondo caldo, non bianco piatto */
    border: 1px solid #e6dcd0 !important; /* Bordo elegante */
    border-radius: 16px;
    padding: 3rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.special_service_focus_box_2 .editorial-image-wrapper img {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
}

/* Riquadro decorativo sfalsato dietro la foto */
.special_service_focus_box_2 .editorial-image-wrapper::before {
    content: "";
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 100%;
    height: 100%;
    background-color: var(--main-primary-color, #D6AD60);
    border-radius: 16px;
    opacity: 0.25;
    z-index: 1;
}

.special_service_focus_box_2 .editorial-image-wrapper img {
    position: relative;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    z-index: 2;
    width: 100%;
    object-fit: cover;
}

.special_service_focus_section .title {
  color: #1a252f;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.special_service_focus_section .solid {
  width: 50px;
  height: 4px;
  background: var(--main-secondary-new-color, #3cb3e4);
  border-radius: 2px;
}

#primary_content-btn-v2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--main-secondary-new-color, #3cb3e4) 0%, #2998c8 100%);
  border: none;
  color: #ffffff;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 28px;
  box-shadow: 0 8px 20px rgba(60, 179, 228, 0.35);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  white-space: nowrap;
}

#primary_content-btn-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(60, 179, 228, 0.5);
  filter: brightness(1.05);
}


/* --- 2. SEZIONI SUCCESSIVE (Ripristino logica originale per non rompere il resto) --- */

/* Blocco "In cosa consiste il trattamento?" */
div.row.special_service_focus:not(.special_service_focus_section *) {
  background-color: var(--main-secondarylight-color);
  color: var(--main-white-color);
  border-radius: 10px;
  /* margin: 30px 0; */
  padding: 1rem;
}

div.row.special_service_focus:not(.special_service_focus_section *) img {
  float: right;
  width: 100%;
  border-radius: 10px;
}

#special_service_focus_title {
  background-color: var(--main-secondary-new-color);
  color: white;
  text-align: right;
  padding: 10px;
  border-radius: 0 5px;
}

.special_service_focus_text {
  color: var(--main-secondary-color);
}

/* Sezione Before & After */
.after_before {
  background-color: var(--main-secondary-new-color);
  background: linear-gradient(90deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
  color: var(--main-white-color);
  position: relative;
  min-height: 600px;
}

.after_before .col-12 {
  position: relative;
}

.after_before_title_container {
  background: linear-gradient(90deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
}

.after_before_title {
  border-bottom: 3px solid;
  border-image: linear-gradient(45deg, var(--main-primarylight-color), var(--main-white-color)) 1;
  background: -webkit-linear-gradient(180deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CALL TO ACTION (CTA) Section - Ripristinata allo stato originale funzionante */
.special_service_focus_cta {
  background: linear-gradient(70deg, var(--main-primarylight-color) 62%, var(--main-white-color) 62%);
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cta-right-content {
  padding-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-info-badge {
  background: rgba(255, 255, 255, 0.85);
  border-left: 3px solid var(--main-secondarylight-color);
  padding: 15px 20px;
  border-radius: 4px;
  text-align: left;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

#special_service_appuntamento_title {
  color: var(--main-white-color);
  display: inline-block;
  border-bottom: 3px solid;
  border-image: linear-gradient(45deg, var(--main-white-color), var(--main-secondarylight-color)) 1;
  text-align: left;
  padding: 10px 0;
  margin-bottom: 25px;
}

#ssf_btn {
  background-color: var(--main-secondarylight-color);
  border-color: var(--main-secondarylight-color);
  margin: 10px 0;
  display: block;
  width: fit-content;
  padding: 14px 35px;
  font-weight: 650;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#ssf_btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: brightness(1.05);
}

#ssf_btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  .special_service_focus_cta {
    background: var(--main-primarylight-color) !important;
  }
  .cta-right-content {
    padding-left: 0;
    margin-top: 20px;
  }
  .cta-info-badge {
    background: rgba(255, 255, 255, 0.95);
    max-width: 100%;
  }
  .cta-wrapper .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    .cta-wrapper .d-flex button {
        width: 100%;
        max-width: 280px;
    }
}

/* -------------------------B&A--------------------------- */

/* -------------------------B&A--------------------------- */
/* Before After Container */

.bal-container {
  position: relative;
  max-width: 50%;
  min-height: 500px !important;
  cursor: grab;
  overflow: hidden;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  left: 25%;
}



@media (max-width: 1024px) and (max-height: 750px) {
  .after_before {
    background-color: var(--main-secondary-new-color);
    background: linear-gradient(110deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
    color: var(--main-white-color);
    position: relative;
    min-height: 18em;
  }

  .bal-container {
    position: relative;
    max-width: 100%;
    min-height: 16em !important;
    cursor: grab;
    overflow: hidden;
    left: 0;
  }
}

@media (max-width: 1024px) and (min-height: 751px) and (max-height: 1000px) {
  .after_before {
    background-color: var(--main-secondary-new-color);
    background: linear-gradient(110deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
    color: var(--main-white-color);
    position: relative;
    min-height: 18em;
  }

  .bal-container {
    position: relative;
    max-width: 100%;
    min-height: 17em !important;
    cursor: grab;
    overflow: hidden;
    left: 0;
  }
}

@media (max-width: 1024px) and (min-height: 1001px) and (max-height: 1200px) {
  .after_before {
    background-color: var(--main-secondary-new-color);
    background: linear-gradient(110deg, var(--main-white-color) 50%, var(--main-primarylight-color) 50%);
    color: var(--main-white-color);
    position: relative;
    min-height: 39em;
  }

  .bal-container {
    position: relative;
    max-width: 100%;
    min-height: 34em !important;
    cursor: grab;
    overflow: hidden;
    left: 0;
  }
}

/* @media (max-width: 1024px) and (min-height: 700px) {
  .bal-container {
    position: relative;
    max-width: 100%;
    min-height: 35em !important;
    cursor: grab;
    overflow: hidden;
    left: 0;
  }
} */

.bal-after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bal-before {
  display: block;
  position: absolute;
  top: 0;
  /* right: 0; */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  overflow: hidden;
}

.bal-before-inset {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.bal-after img,
.bal-before img {
  border-radius: 10px;
  object-fit: contain;
  position: absolute;
  width: 100%;
  height: 100%;
  /* object-position: 50% 50%; */
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.bal-beforePosition {
  background: #121212;
  color: #fff;
  left: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}

.bal-afterPosition {
  background: #121212;
  color: #fff;
  right: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}

.beforeLabel {
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.afterLabel {
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}


/* handle and arrow */

.bal-handle {
  height: 41px;
  width: 41px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -21px;
  border: 2px solid #fff;
  border-radius: 1000px;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow,
.handle-right-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}

.handle-left-arrow {
  border-right: 6px solid #fff;
  left: 50%;
  margin-left: -17px;
}

.handle-right-arrow {
  border-left: 6px solid #fff;
  right: 50%;
  margin-right: -17px;
}

.bal-handle::before {
  bottom: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}

.bal-handle::after {
  top: 50%;
  margin-top: 20.5px;
  box-shadow: 0 0 5px rgb(12, 12, 12);
}

.bal-handle::before,
.bal-handle::after {
  content: " ";
  display: block;
  width: 2px;
  background: #fff;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
}

/* ------------------------FINE B&A---------------------------- */


/* ------------------------Insta Feed---------------------------- */

.insta_feed_title {
  border-bottom: 3px solid var(--main-secondary-new-color);
  color: var(--main-secondary-new-color);
}

.instagram-container {
  overflow: auto;
  overflow-y: hidden;
  width: 100% !important;

}

/* ------------------------FINE Insta Feed---------------------------- */

/* ================================
   PREVENZIONE — COSA COMPRENDE
   ================================ */
#prevenzione_cosa {
    padding: 40px 30px;
    background: #ffffff;
}

#prevenzione_cosa .section-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#prevenzione_cosa h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

#prevenzione_cosa p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}

@media (max-width: 768px) {
    #prevenzione_cosa {
        padding: 20px 15px;
    }
    #prevenzione_cosa h3 {
        font-size: 1.2rem;
    }
}

/* ================================
   FAQ
   ================================ */
/* -------------------------------------------------
   SECTION FAQ (Unificata e pulita per tutte le pagine)
   ------------------------------------------------- */
#faq, .faq-v2 {
  background-color: #ffffff;
  border-radius: 10px;
}

.faq_title {
  color: var(--main-secondary-new-color, #3cb3e4);
  border-bottom: 3px solid var(--main-secondary-new-color, #3cb3e4);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Card FAQ Struttura Comune */
.q {
  height: 100%;
  margin-bottom: 20px; /* Gestito dal g-4 di Bootstrap nella griglia */
}

.q-block {
  position: relative;
  /* Spazio a sinistra generoso per evitare sovrapposizioni del testo con l'icona */
  padding: 1.25rem 1.25rem 1.25rem 4.5rem; 
  background-color: #f8f9fa; /* Sfondo card leggermente staccato dal fondo bianco */
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.03); /* Fine delimitatore per evitare l'effetto bianco su bianco */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  height: 100%;
}

/* Hover sulla card */
.q-block:hover {
  transform: translateY(-3px);
  background-color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* Stile Testi Card */
.q-title {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.q-text {
  color: #555555;
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Stile e Posizionamento Icona Comune (con Fallback di Default) */
.q-block::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  content: "\f059"; /* Icona di default universale: question-circle (\f059) se non specificata altra classe */
  color: var(--main-secondary-new-color, #3cb3e4);
  
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: rgba(60, 179, 228, 0.08); /* Sfumatura leggera ripresa dal tema */
  border-radius: 50%;
  
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

/* Effetto Hover sull'Icona */
.q-block:hover::before {
  transform: scale(1.1) rotate(10deg);
  background-color: var(--main-secondary-new-color, #3cb3e4);
  color: #ffffff;
}

/* Map Codici Icone FontAwesome personalizzate (opzionali per blocco) */
.q-block.block-1::before { content: "\f153"; } /* Euro */
.q-block.block-2::before { content: "\f017"; } /* Orologio */
.q-block.block-3::before { content: "\f06e"; } /* Occhio */
.q-block.block-4::before { content: "\f254"; } /* Clessidra */
.q-block.block-5::before { content: "\f0c0"; } /* Utenti */
.q-block.block-6::before { content: "\f48e"; } /* Siringa / Anestesia */

/* Responsive Media Queries per dispositivi mobili */
@media (max-width: 576px) {
  .q-block {
    padding: 1rem 1rem 1rem 3.8rem;
  }
  
  .q-block::before {
    left: 0.8rem;
    top: 1rem;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .faq_title {
    font-size: 1.5rem;
  }
}
/* ====================== */

@media (max-width: 320px) {
  .q-title {
    font-size: 1.32rem !important;
  }

  .q-text {
    text-align: justify !important;
  }
}

@media (max-width: 490px) {
  .special_service_focus div {
    padding: 10px 0;
  }

  .special_service_focus_img {
    width: 100%;
  }

  #servizio_speciale_title {
    padding: 15px 0;
    text-align: center;
  }
}

@media (max-width:790px) {
  /* #scopri_estetica {
    background-color: var(--main-primary-color);
    padding: 10px;
    border-radius: 25px;
  }

  #scopri_estetica a {
    color: var(--main-white-color) !important;
  } */
}

@media (max-width: 1024px) {
  .special_service_focus_section {
    margin-top: 65px !important;
  }

  #special_service_focus-btn {
    background-color: var(--main-secondarylight-color);
    border-color: var(--main-secondarylight-color);
    padding: 20px 0;
    font-size: 1.5em;
    width: 100%;
  }
}

/* -----------------------------------REVIEWS------------------------------------------------ */
.HeaderWriteReviewButton__Modal-sc-aghmpr-2 {
  display: none !important;
}

/* -----------------------------------CONTATTI------------------------------------------------ */

#map {
  padding: 0 20px !important;
  margin-bottom: 10px;
}

/* Stili moderni per i dettagli dei contatti */


.contact-icon-box {
  width: 38px;
  height: 38px;
  background: rgba(var(--bs-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-link:hover {
  color: var(--main-secondary-new-color, #0d6efd) !important;
  text-decoration: underline !important;
}

/* Bottoni social circolari uniformi */
.social-icon-btn {
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 1.1rem;
}

.social-icon-btn:hover {
  background: var(--main-secondary-new-color, #0d6efd);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Media Queries responsive conservate e adattate */
@media (max-width: 790px) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .map_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .contatti h2 {
    background-color: var(--main-secondary-color);
    color: var(--main-white-color);
    padding: 10px 0;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 5px;
  }

  .contatti {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    padding: 10px;
    width: 100%;
  }

  /* Su mobile centriamo la lista per bilanciare l'estetica sotto la mappa */
  .contact-info-list div.text-start {
    text-align: center !important;
    justify-content: center !important;
  }

  #map {
    padding: 0 !important;
    margin-bottom: 50px;
  }
}

/* -----------------------------------FOCUS SERVIZI------------------------------------------------ */
.section_focus {
  padding: 60px 0;
  background-color: var(--main-white-color);
}

.section_focus .section-title {
  text-align: center;
  color: var(--main-white-color);
  margin-bottom: 50px;
  text-transform: none !important;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 5px 0 5px 15px;
  background: linear-gradient(-64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}

.section_focus .section-footer {
  text-align: center;
  color: var(--main-white-color);
  margin-top: 50px;
  margin-bottom: 50px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--main-secondary-new-color);
  text-align: left;
  padding: 0.5em;
  background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
}

.section_focus .section-container {
  padding: 10px 0;
}


@media (max-width:790px) {
  .section_focus .section-title {
    background: var(--main-secondary-new-color);
  }

  .section_focus .section-footer {
    background: linear-gradient(64deg, var(--main-white-color) 50%, var(--main-secondary-new-color) 50%);
  }
}

/* -----------------------------------FOOTER------------------------------------------------ */

.footer {
  padding: 10px;
  /* position: fixed; */
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: #00adef; */
  background-color: var(--main-secondary-color);
  color: white;
  text-align: center;
}

#footer_logo {
  width: 10%;
}

.footer_left_size {
  text-align: left;
}

.footer_rigth_size {
  text-align: right;
}

.footer_rigth_size ul {
  list-style: none;
  color: var(--main-white-color) !important;
}

.footer_rigth_size a {
  color: var(--main-white-color) !important;
}

@media (max-width: 790px) {
  .footer_left_size {
    text-align: center;
    margin-bottom: 10px;
  }

  .footer_rigth_size {
    display: none;
    /* text-align: center;
    margin-top: 10px; */
  }
}

/* PER INDEX2.PHP */

.bg {
  min-height: 85vh;
  /*background-image: url('https://visualhunt.com/photos/xl/7/wood-cottage-wood-house-cabine.jpg');
    background-size: cover;
    background-position: center; */
}

.sticky-top {
  transition: all 0.25s ease-in;
}

/* style for when sitcky is applied */

.stuck .sticky-top {
  background-color: var(--main-primary-color) !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}