.elementor-21 .elementor-element.elementor-element-790478dd .elementor-heading-title{color:#F10000;}/* Start custom CSS *//* ============================================================
   PERSONALIZZAZIONE TOTALE TEMA GIROMOTO (WebOfficina)
   ============================================================ */

/* 1. VARIABILI DI COLORE (Cambia questi per cambiare tutto) */
:root {
    --colore-principale: #0000FF;    /* Il tuo nuovo colore (es. Blu) */
    --colore-hover: #0055ff;         /* Colore quando passi il mouse */
    --sfondo-scuro: #222222;         /* Colore per Header e Footer */
    --testo-chiaro: #ffffff;         /* Colore testo sopra sfondi scuri */
}

/* 2. HEADER E BARRA SUPERIORE */
header, 
.elementor-location-header, 
.top-bar, 
#masthead {
    background-color: var(--sfondo-scuro) !important;
}

/* 3. COLORE DELLE ICONE (Telefono, Orologio, Mail) */
header i, 
.top-bar i, 
.header-contact-icons i {
    color: var(--colore-principale) !important;
}

/* 4. PULSANTI (Incluso "PRENOTA ORA") */
.elementor-button, 
button, 
input[type="submit"],
.btn-primary {
    background-color: var(--colore-principale) !important;
    color: var(--testo-chiaro) !important;
    transition: all 0.3s ease !important;
}

/* 5. EFFETTO HOVER SUI PULSANTI */
.elementor-button:hover, 
button:hover, 
input[type="submit"]:hover,
.btn-primary:hover {
    background-color: var(--colore-hover) !important;
    transform: translateY(-2px); /* Leggero sollevamento */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 6. MENU DI NAVIGAZIONE (Hover sui link) */
header a:hover, 
.elementor-nav-menu a:hover {
    color: var(--colore-principale) !important;
}

/* 7. FOOTER (Parte bassa del sito) */
footer, 
.elementor-location-footer, 
#colophon {
    background-color: var(--sfondo-scuro) !important;
    color: var(--testo-chiaro) !important;
}

/* 8. LINEE DECORATIVE (Se presenti tra le sezioni) */
.separator, 
hr, 
.elementor-divider-separator {
    border-top-color: var(--colore-principale) !important;
}/* End custom CSS */