/* ============================================================
   CROMA — Landing Custom CSS
   Solo classi personalizzate. Non modifica il CSS del template.
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
:root {
    --croma-gold:       #c9a96e;
    --croma-gold-lt:    #e8d9c0;

    /* Nuova palette */
    --croma-white:      #FFFFFF;
    --croma-blue:       #40AFDC;
    --croma-gray-lt:    #8C9199;
    --croma-gray:       #5E6368;
    --croma-gray-dk:    #32353A;
    --croma-yellow:     #FEEA01;
}

html, body {
    background-color: var(--croma-white);
}

.bg-color-body {
    background-color: var(--croma-gray-dk) !important;
}

.bg-color-1 {
    background-color: var(--croma-gray-dk) !important;
}

/* ── Utility colori ──────────────────────────────────────── */
.c-white    { color: var(--croma-white); }
.c-blue     { color: var(--croma-blue); }
.c-gray-lt  { color: var(--croma-gray-lt); }
.c-gray     { color: var(--croma-gray); }
.c-gray-dk  { color: var(--croma-gray-dk); }
.c-yellow   { color: var(--croma-yellow); }

.bg-white    { background-color: var(--croma-white); }
.bg-blue     { background-color: var(--croma-blue); }
.bg-gray-lt  { background-color: var(--croma-gray-lt); }
.bg-gray     { background-color: var(--croma-gray); }
.bg-gray-dk  { background-color: var(--croma-gray-dk); }
.bg-yellow   { background-color: var(--croma-yellow); }

/* ── Preloader barra ─────────────────────────────────────── */
.croma-preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.croma-preloader__bar {
    width: 260px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.croma-preloader__fill {
    height: 100%;
    width: 0%;
    background: var(--croma-yellow);
    border-radius: 2px;
    transition: width 0.08s linear;
}
.croma-preloader__count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Header & Hero: Sfondo grigio scuro ─────────────────── */
.header-sticky,
.hero-one.section {
    background-color: var(--croma-gray-dk) !important;
}

.header-sticky.sticky-active {
    background-color: rgba(50, 53, 58, 0.92) !important;
}

/* ── Palette: override giallo oro → #FEEA01 ──────────────── */

/* Preloader barra (già aggiornata sopra) */

/* Menu desktop: voce attiva / hover */
.main-menu > ul > li:hover > a,
.main-menu > ul > li.active > a {
    color: var(--croma-yellow);
}

/* Menu desktop: bordo sub-menu */
.main-menu ul.sub-menu,
.main-menu ul.mega-menu {
    border-bottom-color: var(--croma-yellow);
}

/* Menu desktop: separatori mega-menu */
.main-menu ul.mega-menu > li > a {
    border-color: var(--croma-yellow);
}
.main-menu ul.mega-menu > li > a::before,
.main-menu ul.mega-menu > li > a::after {
    background-color: var(--croma-yellow);
}

/* Burger icon hover (desktop) */
.moblide-header .vs-menu-toggle:hover {
    color: var(--croma-yellow);
}

/* Logo mobile: simmetrico all'hamburger, stesso margine dal bordo opposto */
@media (max-width: 991.98px) {
    .moblide-header .logo.d-lg-none {
        margin-left: auto;
        justify-content: flex-end;
    }
    .moblide-header .logo.d-lg-none img {
        height: 55px;
        width: auto !important;
        max-width: none !important;
    }
    .moblide-header .header-right {
        display: none !important;
    }
}
.moblide-header .header-right .search-btn {
    color: var(--croma-yellow);
}

/* Mobile menu: bordo laterale pannello */
.vs-menu-wrapper .vs-menu-area {
    border-right-color: var(--croma-yellow);
}
/* Mobile menu: close-btn hover */
.vs-menu-wrapper .vs-menu-toggle:hover {
    color: var(--croma-yellow);
}
/* Mobile menu: voce attiva */
.vs-mobile-menu ul li.vs-active > a {
    color: var(--croma-yellow);
}
.vs-mobile-menu ul .vs-item-has-children.vs-active .vs-mean-expand {
    background-color: var(--croma-yellow);
}

/* Bottone "Contattaci" */
.btn-primary {
    background: linear-gradient(to right, var(--croma-yellow), #ffffff);
}
.btn-primary .btn-wrapper {
    background: var(--croma-yellow);
}
.btn-primary .btn-wrapper:not(.v2)::before {
    background: linear-gradient(90deg, var(--croma-yellow) 0%, #c9b800 100%);
}

/* ── Hero: sfondo grigio palette ────────────────────────── */
.hero-one,
.hero-one__main {
    background-color: var(--croma-gray-dk) !important;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 1600px) {
    .hero-one__main::before {
        content: '';
        position: absolute;
        top: 170px;
        left: 0;
        right: 47%;
        bottom: 0;
        background-image: url('/images/music-shape-1-1.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: left center;
        transform: rotate(180deg);
        filter: brightness(0) invert(1);
        opacity: 0.35;
        z-index: -1;
        pointer-events: none;
    }
}

/* ── Hero Marquee: sfondo grigio scuro ───────────────────── */
.hero-one__slider-area.bg-color-1 {
    background-color: var(--croma-gray-dk) !important;
}

/* ── Hero: centra verticalmente il contenuto nella colonna sinistra ── */
.hero-one__main .container > .row {
    min-height: 100vh;
    align-items: center;
}


.hero-one__main .hero-one__content {
    padding-top: 100px;
    padding-bottom: 60px;
}

/* ── Palette hero: override giallo oro → #FEEA01 ────────── */

/* Icona SVG in basso a sinistra */
.hero-one__main .hro-icon {
    color: var(--croma-yellow);
}

/* Marquee: testi e icone SVG */
.hero-one__slide .text {
    color: var(--croma-yellow);
}
.hero-one__separator {
    color: var(--croma-yellow);
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.6;
    letter-spacing: 0;
}

/* Sottotitolo hero: "Precisione. Metodo. Controllo." */
.text-color-primary {
    color: var(--croma-yellow);
}

/* ── Instagram2 loop infinito senza spazi ────────────────── */
.instagram2 {
    overflow: hidden;
}
.instagram2__marquee-container {
    overflow: hidden;
}

/* ── Video Section: Solo immagine ── */
.video__player-wrapper img {
    min-height: 400px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .video__player-wrapper img {
        min-height: auto;
    }
}

/* ── Brand / Partner: Sfondo palette ── */
.brands__slider {
    background: var(--croma-gray-dk) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media only screen and (max-width: 767.98px) {
    .brands__slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media only screen and (max-width: 575.98px) {
    .brands__slider {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.brand-slide img[src*="Storch"] {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.brand-slide--inline-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 575.98px) {
    .brand-slide--inline-svg {
        margin-top: 20px;
    }
}
.brand-slide--inline-svg svg {
    fill: #ffffff;
    width: 100%;
    max-width: 160px;
    height: auto;
}

/* ── Galleria Lavori ── */
#lavori .section-title {
    color: var(--croma-gray-dk) !important;
}

/* Section-shape: leggermente più in alto e più a destra rispetto al default (bottom:0; left:0) */
#lavori .section-shape {
    bottom: 80px;
    left: 60px;
}

#lavori .section-shape img {
    width: 200px;
    animation: lavori-spin 12s linear infinite;
}
@keyframes lavori-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 1558px) {
    #lavori .section-shape {
        display: none;
    }
}


/* Sfondo bottoni e box */
.work__tabs .work-tab button,
.work__tabs .work-tab button.active,
.work-box {
    background-color: var(--croma-gray-dk) !important;
}

.work__tabs .work-tab button {
    color: var(--croma-white) !important;
}

.btn-primary .btn-wrapper {
    color: var(--croma-gray-dk) !important;
}

/* ── Testimonial: Sfondo palette ── */
.quote__wrapper,
.quote__slider {
    background: var(--croma-gray-dk) !important;
}

/* ── Statistiche: Sfondo palette ── */
.statistic__box .icon-box svg circle[fill="#141514"] {
    fill: var(--croma-gray-dk) !important;
}

.statistic__box .icon-box svg circle[stroke="black"] {
    stroke: var(--croma-gray) !important;
}

/* ── Servizi: Sfondo card ── */
.service-box,
.service-box.v2 .service-content {
    background-color: var(--croma-gray-dk) !important;
}

.service-box .service-body .title {
    line-height: 1.25;
    margin-bottom: 14px;
}

.service-box .service-content .title,
.service-box .service-content p,
.croma-approach .title,
.croma-approach p {
    color: var(--croma-white) !important;
}

.service-number {
    color: var(--croma-yellow) !important;
}

.service-box .service-icon svg rect[fill="#0E0E0E"] {
    fill: var(--croma-gray-dk) !important;
}

.work__tabs .work-tab button .dot {
    background-color: var(--croma-gray) !important;
}

/* ── Fix trasparenza Hero (fade-anim) ── */
/* Assicuriamoci che gli elementi con animazione siano visibili se JS non completa.
   Non usiamo !important su opacity per permettere a GSAP di animarla,
   ma impostiamo un valore di base sicuro. */
.fade-anim {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animazione corretta: translateX(-50%) su contenuto 2×
   — quando il secondo set finisce la posizione è uguale all'inizio → seamless */
@keyframes croma_marquee {
    0%   { transform: translateY(-50%) translateX(0); }
    100% { transform: translateY(-50%) translateX(-50%); }
}
.instagram2__marquee {
    width: max-content !important;       /* si espande a contenere entrambi i set */
    left: 0 !important;                  /* non usa più left per l'animazione */
    justify-content: flex-start !important;
    animation-name: croma_marquee !important;
    animation-duration: 40s !important;
}

/* Slide dimensioni fisse — sovrascrive Bootstrap .w-100 */
.instagram2__slide {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    margin-right: 16px;
    overflow: hidden;
}
.instagram2__slide a {
    display: block;
    overflow: hidden;
}
.instagram2__slide img {
    width: 280px !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── Badge hero ──────────────────────────────────────────── */
.croma-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--croma-gold);
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: 100px;
    padding: 6px 18px;
    margin-bottom: 28px;
}
.croma-hero-badge span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--croma-gold);
    display: inline-block;
}

/* ── Italic accent dorato ────────────────────────────────── */
.croma-italic {
    color: var(--croma-yellow);
}

/* ── Pillars "Perché Croma" ──────────────────────────────── */
.croma-pillar {
    padding: 36px 32px;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    height: 100%;
    background-image: url('../template/assets/images/service/service-box-bg-1-1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: border-color 0.3s, transform 0.3s;
}
.croma-pillar:hover {
    border-color: var(--croma-blue);
    transform: translateY(-4px);
}
.croma-pillar:hover .croma-pillar__num {
    color: var(--croma-blue);
}
.croma-pillar__num {
    font-size: 13px;
    color: var(--croma-yellow);
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0.1em;
}
.croma-pillar h5 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 12px;
}
.croma-pillar p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    margin: 0;
}

@media only screen and (max-width: 1439.98px) {
    .croma-pillar h5 { font-size: 28px; }
}
@media only screen and (max-width: 1199.98px) {
    .croma-pillar h5 { font-size: 26px; }
}
@media only screen and (max-width: 991.98px) {
    .croma-pillar h5 { font-size: 24px; }
}
@media only screen and (max-width: 767.98px) {
    .croma-pillar h5 { font-size: 23px; }
}
@media only screen and (max-width: 575.98px) {
    .croma-pillar h5 { font-size: 22px; }
    .croma-pillar p  { font-size: 14px; }
}

/* ── Approccio callout ───────────────────────────────────── */
.croma-approach {
    border-left: 3px solid var(--croma-yellow);
    padding: 24px 32px;
    margin-top: 32px;
}
.croma-approach h4 {
    margin-bottom: 10px;
    /* font-size (30px), font-family (Bricolage Grotesque), color (#fff) ereditati da h4 base */
}
.croma-approach p {
    font-size: 16px;
    font-weight: 500;
    color: #9d9d9d;
    line-height: 1.75;
    margin: 0;
}

/* ── Instagram CTA band ──────────────────────────────────── */
.croma-ig-band {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    border-radius: 16px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.croma-ig-band h3 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}
.croma-ig-band p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    margin: 0;
}
.croma-ig-band .btn-ig {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #222;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.croma-ig-band .btn-ig:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    color: #222;
}

/* ── Contatti info cards ─────────────────────────────────── */
.croma-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.croma-contact-card__icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(201,169,110,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--croma-gold);
    font-size: 16px;
    flex-shrink: 0;
}
.croma-contact-card__text h6 {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 3px;
}
.croma-contact-card__text p,
.croma-contact-card__text a {
    font-size: 15px;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    margin: 0;
}
.croma-contact-card__text a:hover {
    color: var(--croma-blue);
}

/* ── Marcatore dorato sul titolo FAQ ─────────────────────── */
.faq .highlight {
    color: var(--croma-gold);
}
.faq .highlight::after {
    background-color: var(--croma-gold);
}

/* ── Hero: limita contenuto alla colonna sinistra (la foto è absolute a destra) */
@media (min-width: 1200px) {
    .hero-one__content {
        max-width: 54%;
    }
}

/* ── Scroll-to-top: disabilita CSS transition (GSAP gestisce opacity/transform) */
.scrollToTop {
    transition: none !important;
}

/* ── Servizi: card 1 e 2 stessa altezza ─────────────────── */
.col-md-6 .service-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.col-md-6 .service-box .service-body {
    flex-grow: 1;
}

/* ── Servizi: palette giallo nuovo ──────────────────────── */
.service__shapes {
    color: var(--croma-yellow);
}

.service-box .service-header .service-icon {
    color: var(--croma-yellow);
}

.service-box .service-header .service-number {
    color: var(--croma-yellow);
}

.service-box:hover .service-footer .circle {
    background-color: var(--croma-yellow);
    border-color: rgba(254, 234, 1, 0.2);
}

.service-box.v2 .service-content {
    background: var(--croma-yellow);
}

.service-box.v2:hover .service-content .service-footer .circle {
    color: var(--croma-yellow);
}

.service-box2 .icon i,
.service-box2 .icon svg {
    color: var(--croma-yellow);
}

/* ── Statistiche: sfondo sezione e hover icona ───────────── */
.bg-color-primary {
    background-color: var(--croma-yellow);
}

.statistic__box:hover .icon-box {
    color: var(--croma-blue);
}

/* ── Testimonial / Quote: paginazione attiva ────────────── */
.quote__slider .quote__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--croma-yellow);
}

/* ── Galleria Lavori: card e hover ──────────────────────── */
.work-box .work-thumb .thumb-info {
    background: rgba(254, 234, 1, 0.30);
}

.work-box .work-content .work-link {
    color: var(--croma-yellow);
}

.work-box:hover .work-content .work-info .sub-title {
    color: var(--croma-yellow);
}

/* Tab filtri gallery */
.work__tabs .work-tab button.active .dot {
    background-color: var(--croma-yellow);
    border-color: var(--croma-yellow);
}
.work-masonry__filter .vs-btn.active {
    color: var(--croma-yellow);
}

/* Portfolio masonry: giallo palette + stessa trasparenza hover di "I nostri lavori" (0.7) */
.portfolio-box .icon-box {
    background: rgba(254, 234, 1, 0.30);
}
.portfolio-box .content {
    color: var(--croma-yellow);
    background: var(--croma-gray-dk);
}

/* ── Palette globale: section-sub-title e highlight ─────── */
.section-sub-title {
    color: var(--croma-yellow);
}

.section-title .highlight {
    color: var(--croma-yellow);
}

/* ── FAQ – palette giallo nuovo ─────────────────────────── */

.faq__accordion .accordion-item .accordion-body ul li::before {
    color: var(--croma-yellow);
}

/* ── Contact – palette giallo nuovo ─────────────────────── */

.contact__content .section-title {
    color: var(--croma-yellow);
}

.contact__content .contact-list li svg {
    color: var(--croma-yellow);
}

.contact__content .contact-list li a:hover {
    color: var(--croma-blue);
}

/* ── Footer – palette giallo nuovo ──────────────────────── */

/* Icona telefono nel footer-info */
.footer__center.common .footer-info .contact-info .contact-icon {
    color: var(--croma-yellow);
    border-right-color: var(--croma-blue);
}

/* Hover link telefono nel footer-info */
.footer__center.common .footer-info .contact-info .contact a:hover {
    color: var(--croma-yellow);
}

/* "Seguici su:" titolo social */
.footer__center.common .footer-info .social-info .social-title {
    color: var(--croma-yellow);
}

/* Hover icone social */
.footer__center.common .footer-info .social-info ul li a:hover {
    color: var(--croma-yellow);
}

/* Link footer (hover + icona freccia) */
.footer-links ul li a:hover {
    color: var(--croma-yellow);
}

.footer-links ul li a i {
    color: var(--croma-yellow);
}

/* Linea di accento sotto i titoli widget */
.footer-widgets .widgets-title::before {
    background-color: var(--croma-yellow);
}

/* "Croma" nel copyright */
.text-color-primary {
    color: var(--croma-yellow);
}

/* ── Scroll-to-top – palette giallo nuovo ────────────────── */

.scroll-btn i {
    background-color: var(--croma-yellow);
}

.scroll-btn::before {
    border-color: var(--croma-yellow);
}

/* ── Instagram – palette giallo nuovo ───────────────────── */

.instagram2.section::after {
    background: var(--croma-yellow);
}

.instagram2__info {
    background-color: var(--croma-yellow);
}

/* ── Chi Siamo – palette giallo nuovo ───────────────────── */

/* Bordo bottoni tab */
.about__tabs .nav-item .nav-link {
    border-color: var(--croma-yellow);
}

/* Linea di connessione tra bottoni */
.about__tabs .nav-item:not(:last-of-type)::after {
    background-color: var(--croma-yellow);
}

/* Testo voce attiva */
.about__tabs .nav-item .nav-link.active {
    color: var(--croma-yellow);
}

/* Icone checklist note */
.about__tab-content .notes-and-info .note .note-list li i {
    color: var(--croma-yellow);
}

/* Bg decorativo thumb */
.about__tab-thumb .thumb-bg::after {
    background-color: var(--croma-yellow);
}

/* Card "Come lavoriamo": uguale altezza su desktop */
#pills-approccio .col-md-6 {
    display: flex;
}

#pills-approccio .col-md-6 .stack-box.v2 {
    height: 100%;
}

/* Bottone "Parlaci del tuo progetto": uguale al Contattaci dell'header */
#chi-siamo .about__tab-content .btn-primary .btn-wrapper {
    background: var(--croma-yellow) !important;
    color: var(--croma-gray-dk) !important;
}
#chi-siamo .about__tab-content .btn-primary .btn-wrapper span {
    color: var(--croma-gray-dk) !important;
}
#chi-siamo .about__tab-content .btn-primary .btn-wrapper::before {
    background: linear-gradient(90deg, var(--croma-yellow) 0%, #c9b800 100%) !important;
}

/* Card "Come lavoriamo": sfondo grigio scuro */
#chi-siamo .stack-box.v2 {
    background-color: var(--croma-gray-dk) !important;
}

/* Card hover: testo grigio scuro */
#chi-siamo .stack-box.v2:hover h5,
#chi-siamo .stack-box.v2:hover p {
    color: var(--croma-gray-dk) !important;
}

/* Card "Come lavoriamo": cerchio decorativo */
.stack-box.v2 .shape {
    background-color: var(--croma-yellow);
}

/* ── Chi Siamo – tab navigation ─────────────────────────── */
/* Linea che collega i bottoni: estesa a tutta larghezza (overflow hidden la taglia) */
#chi-siamo .about__tabs .nav-item:not(:last-of-type)::after {
    width: 200vw;
}

/* Primo bottone: stile "About Me" (yellow filled, angoli quadri) */
#chi-siamo .about__tabs .nav-item:first-child .nav-link.active {
    border-radius: 6px;
    background-color: var(--croma-yellow);
    color: #1a1a1a;
    margin-left: 7px;
    width: calc(100% - 7px);
}

#chi-siamo .about__tabs .nav-item:first-child .nav-link.active::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    left: -9px;
    top: 0;
    border-radius: 6px;
    background: var(--croma-yellow);
}

/* ── Chi Siamo background ────────────────────────────────── */
#chi-siamo {
    background-color: var(--croma-gray-lt);
    z-index: 0;
}

#chi-siamo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='xMidYMid slice'%3E%3Cellipse cx='200' cy='180' rx='320' ry='170' fill='none' stroke='white' stroke-width='2' opacity='0.20' transform='rotate(-22 200 180)'/%3E%3Cellipse cx='1150' cy='620' rx='360' ry='190' fill='none' stroke='white' stroke-width='2' opacity='0.18' transform='rotate(18 1150 620)'/%3E%3Cellipse cx='720' cy='120' rx='260' ry='110' fill='none' stroke='white' stroke-width='1.5' opacity='0.15' transform='rotate(35 720 120)'/%3E%3Cellipse cx='950' cy='450' rx='200' ry='90' fill='none' stroke='white' stroke-width='1.2' opacity='0.13' transform='rotate(-10 950 450)'/%3E%3Cpath d='M0,320 C180,275 360,365 540,320 S900,275 1080,320 S1300,360 1440,315' fill='none' stroke='white' stroke-width='1.8' opacity='0.17'/%3E%3Cpath d='M0,520 C220,475 440,560 660,520 S1060,475 1260,520 S1400,555 1440,530' fill='none' stroke='white' stroke-width='1.4' opacity='0.17'/%3E%3Cpath d='M0,680 C200,640 420,720 640,680 S1080,640 1300,680 S1420,705 1440,690' fill='none' stroke='white' stroke-width='1.1' opacity='0.13'/%3E%3Ccircle cx='600' cy='360' r='5' fill='white' opacity='0.26'/%3E%3Ccircle cx='1020' cy='140' r='4.5' fill='white' opacity='0.24'/%3E%3Ccircle cx='280' cy='480' r='4' fill='white' opacity='0.25'/%3E%3Ccircle cx='1310' cy='380' r='5' fill='white' opacity='0.22'/%3E%3Ccircle cx='860' cy='680' r='3.5' fill='white' opacity='0.22'/%3E%3Ccircle cx='440' cy='200' r='3' fill='white' opacity='0.20'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Testi bianchi (esclusi quelli gialli già definiti) */
#chi-siamo .section-title,
#chi-siamo p,
#chi-siamo h5,
#chi-siamo h6,
#chi-siamo .note-list li,
#chi-siamo .about__tabs .nav-item .nav-link {
    color: var(--croma-white);
}

/* Tab inattiva: sfondo grigio scuro invece di nero */
#chi-siamo .about__tabs .nav-item .nav-link:not(.active) {
    background-color: var(--croma-gray-dk) !important;
}

/* Tab attiva: testo grigio scuro invece di nero */
#chi-siamo .about__tabs .nav-item:first-child .nav-link.active {
    color: var(--croma-gray-dk) !important;
}

/* Tab Approccio attiva: giallo con testo grigio scuro */
#chi-siamo .about__tabs .nav-item:last-child .nav-link.active {
    background-color: var(--croma-yellow) !important;
    color: var(--croma-gray-dk) !important;
    border-color: var(--croma-yellow) !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 822px) {
    .section-title .highlight-bottom-border::after {
        bottom: 1px;
    }

    .about.section.section-padding-bottom {
        padding-top: 40px;
    }

    /* Hero mobile: immagine sopra, testo sotto */
    .hero-one__main {
        padding-top: 120px;
    }
    .hero-one__main-thumb {
        display: block !important;
        position: relative !important;
        right: auto;
        bottom: auto;
        order: -1;
        text-align: center;
        padding-inline: 12px;
    }
    .hero-one__main-thumb img {
        max-width: 100%;
    }
    .hero-one__main .container > .row {
        min-height: auto;
        align-items: flex-start;
    }
    .hero-one__main .hero-one__content {
        padding-top: 20px;
        padding-bottom: 100px;
    }
    .croma-ig-band {
        padding: 28px 22px;
        text-align: center;
        justify-content: center;
    }
    .croma-ig-band h3 { font-size: 20px; }
    .croma-pillar { padding: 24px 18px; }
    .croma-approach { padding: 18px 20px; }
}

/* ── Servizi: Swiper slider ─────────────────────────────── */
.service-swiper {
    padding-bottom: 44px;
}

.service-swiper .swiper-slide {
    height: auto;
}

.service-swiper .swiper-slide .service-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-swiper .swiper-slide .service-box .service-body {
    flex-grow: 1;
}

.service-swiper-pagination .swiper-pagination-bullet {
    background: var(--croma-yellow);
    opacity: 0.4;
}

.service-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--croma-yellow);
    opacity: 1;
}

/* ── Servizi: allinea padding-top al visivo del bottom ─── */
@media (min-width: 768px) {
    .service.section.section-padding-top-bottom {
        padding-top: 140px;
        padding-bottom: 100px;
    }
}

/* ── Quote / Testimonial: sfondo grigio scuro ───────────── */
.quote.section {
    background-color: var(--croma-gray-dk) !important;
    background-image: url('../images/about-bg-2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Quote / Testimonial: padding-top uguale al bottom ──── */
.quote.section {
    padding-top: 60px;
}
@media (min-width: 768px) {
    .quote.section {
        padding-top: 120px;
    }
}

/* ── Perché Croma: sfondo grigio scuro + texture SVG astratta ── */
.croma-pricing-bg {
    position: relative;
    background-color: var(--croma-gray-dk) !important;
}
.croma-pricing-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='1300' cy='-50' r='500' fill='none' stroke='white' stroke-width='1.5' opacity='0.07'/%3E%3Ccircle cx='1300' cy='-50' r='360' fill='none' stroke='white' stroke-width='1' opacity='0.04'/%3E%3Ccircle cx='140' cy='750' r='440' fill='none' stroke='white' stroke-width='1.5' opacity='0.06'/%3E%3Ccircle cx='140' cy='750' r='300' fill='none' stroke='white' stroke-width='0.8' opacity='0.04'/%3E%3Cellipse cx='720' cy='350' rx='620' ry='280' fill='none' stroke='white' stroke-width='1' opacity='0.03' transform='rotate(-12 720 350)'/%3E%3Cpath d='M-100,520 C250,80 550,620 850,180 S1250,420 1600,80' fill='none' stroke='white' stroke-width='1.2' opacity='0.06'/%3E%3Cpath d='M-100,180 C280,520 580,40 980,380 S1320,620 1600,280' fill='none' stroke='white' stroke-width='0.8' opacity='0.04'/%3E%3Ccircle cx='360' cy='170' r='4' fill='white' opacity='0.12'/%3E%3Ccircle cx='920' cy='460' r='3' fill='white' opacity='0.1'/%3E%3Ccircle cx='1080' cy='190' r='5' fill='white' opacity='0.08'/%3E%3Ccircle cx='210' cy='530' r='3.5' fill='white' opacity='0.09'/%3E%3Ccircle cx='660' cy='75' r='2.5' fill='white' opacity='0.11'/%3E%3Ccircle cx='1380' cy='580' r='4' fill='white' opacity='0.07'/%3E%3Ccircle cx='740' cy='620' r='3' fill='white' opacity='0.08'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
.croma-pricing-bg > * {
    position: relative;
    z-index: 1;
}

/* ── Immagini Categorie: testi su sfondo bianco ─────────── */
#portfolio .section-sub-title,
#portfolio .section-title,
#portfolio .work-masonry__filter .vs-btn {
    color: var(--croma-gray-dk) !important;
}
#portfolio .work-masonry__filter .vs-btn.active {
    color: var(--croma-yellow) !important;
}

/* ── FAQ: sfondo grigio chiaro ──────────────────────────── */
.croma-faq-bg {
    background-color: var(--croma-gray-lt) !important;
}

/* ── FAQ: testi bianchi su sfondo grigio ────────────────── */
.croma-faq-bg .faq__thumb .info,
.croma-faq-bg .accordion-button,
.croma-faq-bg .accordion-body,
.croma-faq-bg .accordion-body p,
.croma-faq-bg .accordion-body ul li,
.croma-faq-bg .accordion-body a {
    color: var(--croma-white) !important;
    transition: color 0.25s;
}
#collapseFour .accordion-body a:hover {
    color: var(--croma-blue) !important;
}

/* ── Footer: sfondo grigio chiaro ───────────────────────── */
footer.footer {
    background-color: var(--croma-gray-lt) !important;
}

/* ── Footer: testi bianchi, hover blu ──────────────────── */
footer.footer,
footer.footer p,
footer.footer span,
footer.footer li,
footer.footer a,
footer.footer .footer-links ul li a,
footer.footer .widgets-title,
footer.footer .footer-widgets .contact-info .contact,
footer.footer .footer__center .footer-info .contact-info .contact {
    color: var(--croma-white) !important;
}

footer.footer a:hover,
footer.footer .footer-links ul li a:hover {
    color: var(--croma-blue) !important;
}

/* ── Footer: sfondo uniforme identico a FAQ ─────────────── */
footer.footer,
footer.footer .footer__top,
footer.footer .footer__center {
    background-color: var(--croma-gray-lt) !important;
}

/* ── Footer bottom: "Croma" in giallo ───────────────────── */
footer.footer .footer__bottom .copyright .text-color-primary {
    color: var(--croma-yellow) !important;
}

/* ── Menu mobile: logo area grigio scuro (era nero #171a1b) ── */
.vs-menu-wrapper .mobile-logo {
    background-color: var(--croma-gray-dk) !important;
}

/* ── Menu mobile: link hover giallo ─────────────────────── */
.vs-mobile-menu ul li a:hover {
    color: var(--croma-yellow) !important;
}

/* ── Form check: label non diventa rossa su errore privacy ── */
.form-check-input.is-invalid ~ .form-check-label {
    color: inherit !important;
}

/* ── Highlight sottolineatura: giallo palette ───────────── */
.section-title .highlight-bottom-border::after {
    background-color: var(--croma-yellow) !important;
}

/* ============================================================
   PRIVACY POLICY
   ============================================================ */

.privacy-wrap {
    background: #fff;
    color: #1a1a1a;
    padding: calc(90px + 11rem) 0 5rem;
}

/* ─── Container ─── */
.privacy-container {
    max-width: 860px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ─── Hero titolo ─── */
.privacy-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--croma-gray-dk);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.privacy-hero-title em {
    font-style: italic;
    color: var(--croma-gray);
}
.privacy-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--croma-gray-lt);
    margin-bottom: 1rem;
}
.privacy-subtitle {
    font-size: 1rem;
    color: var(--croma-gray);
    margin-bottom: 0.5rem;
    line-height: 1.7;
}
.privacy-date {
    font-size: 0.78rem;
    color: var(--croma-gray-lt);
    letter-spacing: 0.04em;
}
.privacy-hero-line {
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 2.5rem 0 0;
}

/* ─── TOC ─── */
.privacy-toc {
    margin: 3rem 0 0;
    padding: 2rem 2.2rem;
    background: #f5f5f5;
    border-left: 3px solid var(--croma-yellow);
}
.privacy-toc-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--croma-gray);
    margin-bottom: 1rem;
}
.privacy-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.4rem 2rem;
}
.privacy-toc-list li {
    font-size: 0.9rem;
    color: var(--croma-gray);
}
.privacy-toc-list a {
    color: var(--croma-gray);
    text-decoration: none;
    transition: color 0.2s;
}
.privacy-toc-list a:hover { color: var(--croma-gray-dk); }

/* ─── Sezioni ─── */
.privacy-section {
    padding: 3.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.privacy-section:last-child { border-bottom: none; }

.privacy-h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--croma-gray-dk);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.privacy-section-num {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--croma-gray-lt);
    flex-shrink: 0;
}
.privacy-h3 {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--croma-gray);
    margin: 1.8rem 0 0.8rem;
}
.privacy-section p {
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--croma-gray);
    margin-bottom: 1rem;
}
.privacy-section p:last-child { margin-bottom: 0; }

/* ─── Lista ─── */
.privacy-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}
.privacy-list li {
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--croma-gray);
    padding: 0.5rem 0 0.5rem 1.4rem;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.privacy-list li:last-child { border-bottom: none; }
.privacy-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--croma-yellow);
    font-size: 0.75rem;
    top: 0.6rem;
}

/* ─── Card ─── */
.privacy-card {
    background: #f5f5f5;
    padding: 1.6rem 2rem;
    border-left: 2px solid var(--croma-yellow);
    margin-top: 1rem;
}
.privacy-card p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--croma-gray);
    margin-bottom: 0 !important;
}
.privacy-card .mt-4 { margin-top: 1rem; }

/* ─── Grid finalità ─── */
.privacy-grid {
    display: grid;
    gap: 1px;
    background: rgba(0,0,0,0.08);
    margin: 1rem 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.privacy-purpose-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    transition: background 0.2s;
}
.privacy-purpose-item:hover { background: #f9f9f9; }
.privacy-purpose-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--croma-gray-dk);
    background: rgba(0,0,0,0.04);
}
.privacy-purpose-item strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--croma-gray-dk);
    margin-bottom: 0.3rem;
}
.privacy-purpose-item p {
    font-size: 0.82rem !important;
    margin-bottom: 0 !important;
}

/* ─── Callout ─── */
.privacy-callout {
    background: var(--croma-gray-dk);
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
}
.privacy-callout p {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
}
.privacy-callout .privacy-link { color: var(--croma-yellow) !important; }

/* ─── Tabella ─── */
.privacy-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
}
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.privacy-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--croma-gray);
    padding: 0.8rem 1.2rem;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    white-space: nowrap;
}
.privacy-table td {
    padding: 1rem 1.2rem;
    color: var(--croma-gray);
    line-height: 1.6;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: top;
}
.privacy-table tr:last-child td { border-bottom: none; }
.privacy-table tr:hover td { background: #f5f5f5; }

/* ─── Link ─── */
.privacy-link {
    color: var(--croma-gray-dk);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    transition: border-color 0.2s, color 0.2s;
}
.privacy-link:hover {
    color: var(--croma-gray-dk);
    border-color: var(--croma-gray-dk);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .privacy-toc { padding: 1.5rem; }
    .privacy-toc-list { grid-template-columns: 1fr; }
    .privacy-card { padding: 1.2rem 1.4rem; }
    .privacy-callout { padding: 1.2rem 1.4rem; }
    .privacy-purpose-item { padding: 1.2rem; }
}