/* Custom overrides — non generato da sass, non toccare public/css/style.css */

/* Logo footer: il testo del logo è scuro, sul footer scuro serve un fondo chiaro per restare leggibile */
.footer-wrapper .about-logo img {
    max-width: 280px;
    background-color: var(--white-color, #fff);
    padding: 10px 16px;
    border-radius: 12px;
}

/* Titoli widget footer (es. "Link utili"): con 5 colonne le colonne auto-width vanno a capo sul titolo.
   overflow/ellipsis come rete di sicurezza: i titoli arrivano da CMS/traduzioni e potrebbero
   in futuro essere più lunghi di quelli attuali, il nowrap da solo li farebbe uscire dalla colonna. */
.footer-widget .widget_title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sezione massaggi in home (.team-area con data-bg-src): il tema applica l'immagine di sfondo
   direttamente sulla section, senza overlay. Serve un velo scuro per far risaltare il testo
   bianco e i title-shape, lasciando comunque intravedere l'immagine sotto.
   Il tema (style.css, .team-area) mostra la foto come fascia in alto a dimensione naturale
   (~625px, bg-top-center) solo da 1200px in su; sotto i 1200px passa a background-size: cover
   su tutta la section (vedi @media max-width:1199px in _team.scss). L'overlay segue la stessa
   soglia per restare sempre limitato all'area realmente occupata dalla foto. */
.team-area {
    position: relative;
}

.team-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 625px;
    max-height: 100%;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0.8) 100%);
    z-index: 1;
}

@media (max-width: 1199px) {
    .team-area::before {
        height: 100%;
    }
}

.team-area > .container,
.team-area > .shape-mockup {
    position: relative;
    z-index: 2;
}

.service-preview {
    display: block;
    height: 100%;
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;

    transition: transform .35s ease, box-shadow .35s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.service-preview:hover {
    transform: translateY(-6px);

}

.service-preview_img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--smoke-color);
}

.service-preview_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.service-preview:hover .service-preview_img img {
    transform: scale(1.08);
}

.service-preview_body {
    padding: 24px;
}

/* Anteprime trattamenti in layout alternato (immagine/testo): l'immagine non è più dentro
   .service-preview, quindi qui aggiungiamo il border-radius che prima ereditava dalla card */
.service-preview_img-standalone {
    border-radius: 16px;
    overflow: hidden;
}

.service-preview_title {
    font-family: var(--title-font);
    font-size: 22px;
    line-height: 1.1;
    color: var(--title-color);
    margin-bottom: 8px;
    transition: color .3s ease;
    font-weight: 900;
    text-transform: uppercase;
}

.service-preview:hover .service-preview_title {
    color: var(--theme-color);
}

.service-preview_text {
    font-family: var(--body-font);
    color: var(--body-color);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
}

.service-preview_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--theme-color);
    font-weight: 600;
    font-size: 14px;
}

.service-preview_link i {
    transition: transform .3s ease;
}

.service-preview:hover .service-preview_link i {
    transform: translateX(4px);
}

@media (min-width: 992px) {
    .service-single-sidebar {
        position: sticky;
        top: 110px;
        align-self: flex-start;
    }
}

.service-gallery-item {
    position: relative;
}

.service-gallery-link {
    display: block;
}

.service-gallery-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity .35s ease;
}

.service-gallery-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.service-gallery-item:hover .service-gallery-link::after,
.service-gallery-item:hover .service-gallery-zoom {
    opacity: 1;
}

.service-gallery-item:hover .service-gallery-zoom {
    transform: translate(-50%, -50%) scale(1);
}

.page-img-slider {
    margin-bottom: 30px;
}

.page-img-slider .page-img {
    margin-bottom: 0;
}

.page-img-slider .page-img img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .page-img-slider .page-img img {
        height: 280px;
    }
}

.page-img-slider.arrow-wrap {
    overflow: hidden;
}

.page-img-slider.arrow-wrap .slick-arrow,
.page-img-slider.arrow-wrap:hover .slick-arrow {
    left: 16px;
    --icon-size: 44px;
}

.page-img-slider.arrow-wrap .slick-arrow.slick-next,
.page-img-slider.arrow-wrap:hover .slick-arrow.slick-next {
    left: auto;
    right: 16px;
}

.page-img-slider .slick-dots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
}

.page-img-slider .slick-dots li {
    display: inline-block;
    line-height: 0;
}

.page-img-slider .slick-dots li button {
    font-size: 0;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    background-color: transparent;
    transition: all ease .3s;
}

.page-img-slider .slick-dots li.slick-active button {
    background-color: var(--theme-color);
}

/* Dots slider massaggi in home (attivi solo sotto i 992px): stesso stile a barrette di .th-dots dell'hero,
   senza aggiungere .th-dots al contenitore per non centrare il testo delle card */
#serviziSlide1 .slick-dots {
    display: flex;
    justify-content: center;
    width: 100%;
    list-style: none;
    margin: 40px 0 0 0;
    padding: 0;
}

#serviziSlide1 .slick-dots li {
    display: inline-block;
    background-color: var(--white-color);
    margin: 0 12px;
    padding: 3px 0;
    height: 3px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.6s ease;
}

#serviziSlide1 .slick-dots li button {
    font-size: 0;
    width: 30px;
    height: 3px;
    padding: 3px 0;
    margin: 0 6px;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    display: inline-block;
}

#serviziSlide1 .slick-dots li.slick-active {
    transform: scaleX(1.5);
    background-color: var(--theme-color);
}

/* Slider massaggi in home da tablet/mobile: si intravede la card successiva a destra, così si capisce
   che lo slider scorre. Slick calcola la larghezza delle slide su $list.width() (senza padding),
   quindi il padding-right lascia visibile una porzione della slide seguente */
@media (max-width: 991px) {
    #serviziSlide1 .slick-list {
        padding-right: 18%;
    }
}

.contraindications-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--smoke-color);
    border-left: 4px solid var(--yellow-color);
    border-radius: 4px;
}

.contraindications-banner_icon {
    flex: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--yellow-color);
    color: var(--title-color);
    font-size: 16px;
}

.contraindications-banner_title {
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--title-color);
    font-weight: 600;
}

.contraindications-banner_content p:last-child {
    margin-bottom: 0;
}

.service-info-widget {
    background-color: var(--smoke-color);
    padding: 24px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.service-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.service-info-list li:first-child {
    padding-top: 0;
}

.service-info-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.service-info-list i {
    flex: none;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--white-color);
    color: var(--theme-color);
    font-size: 15px;
}

.service-info-label {
    flex: 1 1 auto;
    color: var(--body-color);
}

.service-info-value {
    flex: none;
    font-weight: 600;
    color: var(--title-color);
}

.service-contact-widget {
    margin-bottom: 40px;
}

.service-contact-widget .widget_title {
    margin-bottom: 20px;
}

.service-contact-widget .contact-form {
    padding: 24px;
}

.service-contact-widget .form-group {
    margin-bottom: 16px;
}

.service-contact-widget .contact-form select,
.service-contact-widget .contact-form input {
    background-color: var(--smoke-color);
}

.service-contact-widget .contact-form select:focus,
.service-contact-widget .contact-form input:focus {
    background-color: var(--smoke-color);
}

.course-program-box {
    background-color: var(--smoke-color);
    padding: 24px 30px;
    border-radius: 20px;
}

.form-switch {
    padding-left: 0px !important;
}

.percorso-carousel .slick-track {
    display: flex !important;
}

.percorso-carousel .slick-slide {
    height: auto;
}

.percorso-carousel .slick-slide > div {
    height: 100%;
    border-radius: 20px;
}

.percorso-carousel .testi-grid {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Frecce del carousel percorso sotto le slide, centrate (lo stile di default le spinge fuori dal layout) */
.percorso-carousel.slick-slider {
    padding-bottom: 74px;
}

.percorso-carousel .slick-arrow {
    --icon-size: 44px;
    top: auto;
    bottom: 0;
    left: calc(50% - var(--icon-size) - 8px);
    right: auto;
    margin: 0;
}

.percorso-carousel .slick-arrow.slick-next {
    left: calc(50% + 8px);
    right: auto;
}

.percorso-carousel .testi-quote {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.blog-carousel .slick-track {
    display: flex !important;
}

.blog-carousel .slick-slide {
    height: auto;
}

.blog-carousel .slick-slide > div {
    height: 100%;
}

.blog-carousel .th-blog.blog-single {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.blog-carousel .blog-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Anteprime blog: la card della lista/home riusa .blog-single, che nel dettaglio ha un titolo grande (36px) */
.th-blog-wrapper:not(.blog-details) .blog-single .blog-title,
.blog-carousel .blog-single .blog-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Paginatore (pager.php, PAGER_TYPE_CATALOG): il tema non copre .pagination/.page-link, restava lo stile bootstrap di default */
.pagination-wrapper.pager {
    gap: 12px;
}

.pagination-wrapper.pager .pagination {
    gap: 6px;
    margin-bottom: 0;
}

.pagination-wrapper.pager .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 50%;
    color: var(--title-color, #17181b);
    font-weight: 500;
    background-color: var(--white-color, #fff);
    transition: all 0.3s ease-in-out;
}

.pagination-wrapper.pager .page-item .page-link i {
    font-size: 14px;
}

.pagination-wrapper.pager .page-item:not(.disabled) .page-link:hover {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color, #fff);
}

.pagination-wrapper.pager .page-item.active .page-link {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color, #fff);
}

.pagination-wrapper.pager .page-item.disabled .page-link {
    color: var(--body-color, #6c757d);
    background-color: var(--smoke-color, #f5f5f5);
    border-color: var(--border-color, #e5e5e5);
    pointer-events: none;
    opacity: 0.6;
}

.pagination-wrapper.pager small {
    color: var(--body-color, #6c757d);
    font-size: 14px;
}

.percorso-carousel .testi-quote i {
    font-size: 150px;
    color: var(--theme-color2);
    opacity: .12;
}

/* Widget "recent-post" (sidebar blog-dettaglio): il tema non fissa una dimensione per media-img,
   quindi con le immagini reali (non le demo del template) escono enormi e spingono il titolo fuori riga */
.sidebar-area .recent-post .media-img {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
}

.sidebar-area .recent-post .media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-area .recent-post .media-body {
    min-width: 0;
}

/* Elenco contatti pagina contatti: icona+testo senza box, stile analogo a castelfrancocostruzioni
   (request-item/contact-info-link) invece delle card .contact-info del tema */
.contact-list {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
}

.contact-list-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--body-color);
    font-weight: 600;
}

.contact-list-link i {
    color: var(--theme-color);
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

a.contact-list-link:hover {
    color: var(--theme-color);
}

/* Box "discipline" in home (service-area2): il tema fa sporgere .global-icon di 80px sopra il box
   (pensato per una griglia con gutter gy-5 e un'immagine separata sotto ogni box). Qui il box è
   centrato in verticale via flex (h-100 + justify-content-center) e non c'è immagine sotto, quindi
   lo sporgere finiva per sovrapporre il testo sotto la griglia. Con .service-box_fa l'icona (ora
   un'icona fontawesome, non più un'immagine) resta dentro il flusso normale del box. */
.service-box_fa .global-icon {
    margin: 0 auto;
}

.service-box_fa .global-icon i {
    font-size: 34px;
    color: var(--theme-color);
}

/* Quando il nodo "discipline" ha una sua immagine (es. cristalli.webp, meditazione.webp) la
   mostriamo al posto dell'icona fontawesome di fallback: deve riempire il cerchio di .global-icon */
.service-box_fa .global-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.img1.image3 {
    border-radius: 20px;
    overflow: hidden;
}

/* Iconcina "fiore" davanti a .sub-title: stessa icona (fa-spa) già usata come indicatore
   nelle voci del dropdown di menu (.main-menu ul.sub-menu li a::before in style.css) */
.sub-title::before {
    content: "\f5bb";
    font-family: var(--icon-font);
    font-weight: 900;
    display: inline-block;
    margin-right: 8px;
    color: var(--theme-color2);
}

/* Claim in home (atom "claim" del nodo home), sopra la sezione chi siamo */
.claim-banner-sec {
    background-color: var(--theme-color2);
    padding: 40px 0;
}

.claim-banner-sec .claim-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.claim-banner-sec .claim-banner__deco {
    flex-shrink: 0;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6) 35%, rgba(255, 255, 255, .6) 65%, transparent);
}

.claim-banner-sec .claim-banner__text {
    margin: 0;
    font-family: var(--title-font);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--white-color);
    text-align: center;
}

@media (max-width: 575px) {
    .claim-banner-sec .claim-banner__deco {
        display: none;
    }
}

/* Video autoplay in home (atom "youtubes" del nodo home), sotto la sezione chi siamo.
   Il video viene iniettato da youtube-background.js dentro .home-video-bg, che deve
   restare a dimensione/posizione fissa da qui (vedi il plugin: imposta solo l'iframe). */
.home-video-box {
    position: relative;
    overflow: hidden;
    height: 700px;
}

.home-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-video-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

@media (max-width: 991px) {
    .home-video-box {
        height: 500px;
    }
}

@media (max-width: 575px) {
    .home-video-box {
        height: 350px;
    }
}

/* Titoli corsi in formazione.php: il tema riduce .box-title a 20px/18px sotto i 1399px,
   qui devono restare leggibili a 28px anche su tablet/mobile */
.formazione-title {
    font-size: 28px;
}

/* Titoli trattamenti in trattamenti.php: qui il layout alternato immagine/testo è a piena
   larghezza (non le mini card del carousel in home), servono almeno 28px come in formazione.php */
.trattamenti-title {
    font-size: 28px;
}

/* Hero home (index.php, .hero-10): l'altezza della slide era determinata dal padding di
   .hero-style10, che varia in base alla lunghezza di titolo/sottotitolo di ogni slide,
   causando altezze diverse tra una slide e l'altra. Altezza fissa + centratura verticale
   con flexbox a ogni breakpoint, invece del solo padding (che da solo dipende dal contenuto).
   !important: slick (rows: 1 di default) avvolge ogni slide e le mette inline
   style="display: inline-block", che annullava il flex e quindi la centratura. */
.hero-10 .th-hero-slide {
    position: relative;
    height: 870px;
    display: flex !important;
    align-items: center;
}

/* con altezza fissa + flex il padding verticale del tema (232/180/140px) non serve più,
   e sommato al contenuto poteva superare l'altezza della slide */
.hero-10 .hero-style10 {
    padding: 0;
}

.hero-10 .hero-style10 > :last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .hero-10 .th-hero-slide {
        height: 700px;
    }
}

@media (max-width: 991px) {
    .hero-10 .th-hero-slide {
        height: 620px;
    }
}

@media (max-width: 767px) {
    .hero-10 .th-hero-slide {
        height: 520px;
    }
}

@media (max-width: 575px) {
    .hero-10 .th-hero-slide {
        height: 460px;
    }
}

/* Card corsi in formazione.php (.price-card): .price-card_img (style.css) ha altezza fissa
   400px anche su mobile, dove la card passa a piena larghezza (display:block) — risultava
   sproporzionata rispetto al resto della card. */
@media (max-width: 767px) {
    .price-card_img {
        height: 260px;
    }
}

@media (max-width: 575px) {
    .price-card_img {
        height: 220px;
    }
}

/* Card corsi in formazione.php: la riga (.row) usa lo stretch di default di bootstrap, ma
   .price-card (style.css) non ha height:100%, quindi card con elenco corsi di lunghezza
   diversa nella stessa riga restano disallineate in basso. */
.price-card {
    height: 100%;
}

/* Card blog nella lista (blog.php, .th-blog-wrapper, non il carousel in home): .th-blog.blog-single
   (style.css) non ha height:100%, quindi titolo/estratto di lunghezza diversa producono card
   disallineate nella stessa riga. Stesso fix già applicato al carousel di home (.blog-carousel qui sopra). */
.th-blog-wrapper .th-blog.blog-single {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* la spaziatura tra le card la gestisce il gutter .g-4 della row: margin-bottom (40px + 30px di .th-blog)
       e margin-right: 10px (style.css, >= 1300px) rendevano le distanze orizzontali/verticali diverse */
    margin: 0;
}

/* layout interno dell'anteprima, uguale tra lista (blog.php) e carousel in home (index.php) */
.th-blog-wrapper .th-blog.blog-single,
.blog-carousel .th-blog.blog-single {
    --blog-space-x: 30px;
    --blog-space-y: 30px;
}

.th-blog-wrapper .blog-single .blog-img,
.blog-carousel .blog-single .blog-img {
    margin-bottom: 25px;
}

.th-blog-wrapper .blog-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* il bottone va in fondo alla card (allineato tra card della stessa riga) senza allungare il titolo */
.th-blog-wrapper .blog-content .th-btn,
.blog-carousel .blog-content .th-btn {
    margin-top: auto;
    align-self: flex-start;
}

.th-blog-wrapper .blog-single .blog-text,
.blog-carousel .blog-single .blog-text {
    margin-bottom: 25px;
}

/* Mappa Google Maps in contatti.php: l'iframe aveva altezza fissa 500px inline, senza
   riduzione su mobile (occupava ~75% della viewport su un telefono prima dello scroll). */
.contact-embed-map {
    width: 100%;
    height: 500px;
}

@media (max-width: 767px) {
    .contact-embed-map {
        height: 350px;
    }
}

@media (max-width: 575px) {
    .contact-embed-map {
        height: 280px;
    }
}

/* Titolo sezione trattamenti in home (index.php, #contact-sec): un po' più grande del .title-home
   standard (50px / 40px su mobile, style.css), che resta invariato nelle altre sezioni. */
#contact-sec .title-home {
    font-size: 60px;
    line-height: 1.15;
}

@media (max-width: 768px) {
    #contact-sec .title-home {
        font-size: 46px;
    }
}

/* Sezione trattamenti in home (index.php, #contact-sec): .bg-top-center (style.css) mostra lo sfondo
   a dimensione naturale (background-size: auto, 1920x920), ma la sezione è alta solo quanto il testo
   + padding (~500px), quindi l'immagine veniva tagliata sotto (e ai lati sotto i 1920px di larghezza).
   Da desktop la sezione prende le proporzioni dell'immagine, che si vede per intero; su tablet/mobile
   la sezione sarebbe troppo bassa per il testo, quindi resta alta quanto il contenuto con cover. */
#contact-sec.appointment-area3 {
    background-size: cover;
    background-position: center center;
}

@media (min-width: 992px) {
    #contact-sec.appointment-area3 {
        aspect-ratio: 1920 / 920;
        display: flex;
        /* contenuto (.appointment-content, già a sinistra nella col-lg-6) in basso a sinistra */
        align-items: flex-end;
        padding-top: 0;
        padding-bottom: 80px;
    }
}

/* Sfumatura scura dal basso verso l'alto sotto il testo (in basso a sinistra da desktop),
   per leggibilità del testo bianco sull'immagine; il contenuto resta sopra con z-index. */
#contact-sec.appointment-area3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.2) 40%, rgba(13, 13, 13, 0) 65%);
    pointer-events: none;
}

#contact-sec.appointment-area3 > .container {
    position: relative;
    z-index: 1;
}

/* su tablet/mobile il testo occupa tutta l'altezza della sezione: sfumatura più uniforme */
@media (max-width: 991px) {
    #contact-sec.appointment-area3::before {
        background: linear-gradient(0deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.25) 100%);
    }
}

/* Footer verde (footer.php, .footer-layout9): il tema ha fondo quasi nero (#131614) con accenti rosa
   (--theme-color2) e hover verdi (--theme-color). Sul fondo verde gli hover verdi sparirebbero e il
   rosa va usato su elementi pieni (icone, bottone) con testo bianco: testi chiari, accenti/hover rosa
   (--theme-color2), copyright verde scuro. */
.footer-wrapper.footer-layout9 {
    --body-color: var(--white-color);
    background-color: var(--theme-color);
}

.footer-layout9 .copyright-wrap {
    background-color: #2C4837;
}

.footer-layout9 .th-widget-about .footer-info {
    color: rgba(249, 248, 246, 0.85);
}

.footer-layout9 .th-widget-about .footer-info i {
    background-color: var(--black-color2);
    color: var(--white-color);
    transition: background-color 0.3s;
}

/* prima colonna: icone e bottone neri, rosa al passaggio del mouse */
.footer-layout9 .th-widget-about .footer-info:hover i {
    background-color: var(--theme-color2);
}

.footer-layout9 .text-inherit:hover,
.footer-layout9 .footer-links a:hover,
.footer-layout9 .copyright-text a,
.footer-layout9 .footer-widget.widget_nav_menu a:hover,
.footer-layout9 .footer-widget.widget_nav_menu a:hover:before {
    color: var(--theme-color2);
}

.footer-layout9 .footer-widget.widget_nav_menu a {
    color: var(--white-color);
}

.footer-layout9 .copyright-text a:hover {
    color: var(--white-color);
}

.footer-layout9 .th-social.footer-social a,
.footer-layout9 .th-social.footer-social a i {
    color: var(--white-color);
}

.footer-layout9 .th-social.footer-social a {
    background-color: rgba(255, 255, 255, 0.12);
}

.footer-layout9 .th-social.footer-social a:hover {
    background-color: var(--theme-color2);
    border-color: var(--theme-color2);
}

/* Bottone "Prenota ora" nero: il .th-btn del tema è verde, uguale al nuovo fondo del footer.
   In hover i pseudo-elementi (:before/:after) del tema lo coprono di rosa, testo bianco. */
.footer-layout9 .th-btn {
    background-color: var(--black-color2);
    color: var(--white-color);
}

.footer-layout9 .th-btn:before,
.footer-layout9 .th-btn:after {
    background-color: var(--theme-color2);
}

.footer-layout9 .th-btn:hover {
    color: var(--white-color);
}

/* Da mobile l'immagine principale della sezione chi siamo (.img-box1) occupa tutta la larghezza */
@media (max-width: 767px) {
    .img-box1 .img1 {
        width: 100%;
    }

    .img-box1 .img1 img {
        width: 100%;
    }
}

/* Da mobile il logo dell'header è un po' più grande (desktop: max-height 55px in style.css).
   Sotto i 575px si allarga anche il fondo bianco (.logo-bg) per continuare a contenerlo */
@media (max-width: 991px) {
    .header-logo img {
        max-height: 62px;
    }

    /* Il fondo bianco segue l'altezza reale della barra (logo + padding), anche in sticky,
       invece delle altezze fisse del tema (85px / 70px) tarate sul logo da 55px */
    .header-layout2 .logo-bg,
    .header-layout2 .sticky-wrapper.sticky .logo-bg {
        height: 100%;
    }
}

@media (max-width: 575px) {
    .header-layout2 .logo-bg {
        width: 70%;
    }
}

/* Solo in home la sezione chi siamo ha una sola immagine: niente margine sotto e larghezza piena */
.img-box1.img-box1-home {
    margin-bottom: 0;
}

.img-box1.img-box1-home .img1,
.img-box1.img-box1-home .img1 img {
    width: 100%;
}

/* Prima dell'inizializzazione di slick le slide dell'hero sono impilate: mostriamo solo la prima
   per evitare il layout shift (CLS) quando il carosello viene creato */
.hero-10 .th-carousel:not(.slick-initialized) > .th-hero-slide:not(:first-child) {
    display: none !important;
}

/* Chi sono: da desktop .img2 sporgeva sotto .img-box1 del 30% della sua altezza (bottom: -30%),
   oltre i 120px di margin-bottom riservati, e veniva tagliata dall'overflow hidden di .about-sec.
   La allineiamo al fondo dello spazio riservato così resta sempre visibile per intero */
@media (min-width: 1200px) {
    .img-box1 .img2 {
        bottom: -120px;
    }
}

/* Menu mobile: il "+" è un pulsante separato (.th-mean-expand), il link della voce porta alla pagina */
.th-mobile-menu ul .menu-item-has-children > a:after {
  display: none;
}

.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand {
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-top: -18px;
  cursor: pointer;
}

.th-menu-wrapper .th-menu-area {
  max-width: 370px;
}