body {
  background-color: #000 !important;
  color: #0000 !important;
}

.t4-navbar, .t4-header {
  background: linear-gradient(to right, #000, #0000) !important;
}
body[data-theme="dark"] {
  background-color: #111 !important;
  color: #0000 !important;
}
body[data-theme="dark"] .t4-header {
  background-color: #222;
}
/* Rimuove lo sfondo dai menu e li rende trasparenti */
.t4-navbar .navbar-nav > li > a {
  background: transparent !important;
  color: white !important; /* o il colore che vuoi */
  transition: color 0.3s, background 0.3s;
}
/* Quando il menu è attivo o in hover */
.t4-navbar .navbar-nav > li:hover > a,
.t4-navbar .navbar-nav > li.active > a {
  background: #000(0, 0, 0, 0.4); /* bianco */
  color: #ff6600 !important; /* arancione in hover */
  border-radius: 4px; /* opzionale: smussa l’hover */
}

/* Per evitare effetti “macchia” */
.t4-navbar .navbar-nav > li > a {
  background-clip: padding-box;
  backdrop-filter: none;
}
.t4-offcanvas-toggle {
    display: none !important;
}
.t4-header .navbar-collapse,
.t4-header .navbar-collapse.show,
.t4-header .dropdown-menu {
    background-color: #000 !important;
    color: #000 !important;
}

.t4-header .dropdown-menu a {
    color: #fff !important;
.t4-header .navbar-collapse,
.t4-header .navbar-collapse.show,
.t4-header .dropdown-menu {
    background-color: #000 !important;
    color: #fff !important;
}

.t4-header .dropdown-menu a {
    color: #fff !important;
}

.t4-header .dropdown-menu a:hover {
    background-color: #ff6600 !important;
    color: #000 !important;
}
.t4-header .t4-offcanvas-toggle .navbar-toggler-icon,
.t4-header .t4-header-toggle .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 30px;
    height: 22px;
}

.t4-header .t4-offcanvas-toggle .navbar-toggler-icon::before,
.t4-header .t4-offcanvas-toggle .navbar-toggler-icon::after,
.t4-header .t4-header-toggle .navbar-toggler-icon::before,
.t4-header .t4-header-toggle .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: ff6d01;
    transition: background-color 0.3s;
}

.t4-header .t4-offcanvas-toggle .navbar-toggler-icon::before,
.t4-header .t4-header-toggle .navbar-toggler-icon::before {
    top: 0;
}

.t4-header .t4-offcanvas-toggle .navbar-toggler-icon::after,
.t4-header .t4-header-toggle .navbar-toggler-icon::after {
    bottom: 0;
}

.t4-header .t4-offcanvas-toggle .navbar-toggler-icon span,
.t4-header .t4-header-toggle .navbar-toggler-icon span {
    position: absolute;
    top: 9px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: orange;
    transition: background-color 0.3s;
}

/* Hover effect */
.t4-header .t4-offcanvas-toggle:hover .navbar-toggler-icon::before,
.t4-header .t4-offcanvas-toggle:hover .navbar-toggler-icon::after,
.t4-header .t4-header-toggle:hover .navbar-toggler-icon::before,
.t4-header .t4-header-toggle:hover .navbar-toggler-icon::after,
.t4-header .t4-offcanvas-toggle:hover .navbar-toggler-icon span,
.t4-header .t4-header-toggle:hover .navbar-toggler-icon span {
    background-color: white;
}
/* Rendi invisibile l'hamburger secondario (laterale vuoto) */
.t4-offcanvas-toggle {
    display: none !important;
}

/* Personalizza l'hamburger visibile */
.t4-header-toggle .navbar-toggler-icon {
    background-color: #0000 !important;
    width: 30px;
    height: 24px;
    position: relative;
}
/* Colore iniziale dell'hamburger (linee visibili in stato di riposo) */
.t4-header .t4-header-toggle .navbar-toggler-icon::before,
.t4-header .t4-header-toggle .navbar-toggler-icon::after,
.t4-header .t4-header-toggle .navbar-toggler-icon span {
    background-color: white !important; /* Cambia con il colore che preferisci */
    opacity: 1 !important; /* Assicura che non sia trasparente */
}

/* Hover: Cambia colore quando il mouse passa sopra */
.t4-header .t4-header-toggle:hover .navbar-toggler-icon::before,
.t4-header .t4-header-toggle:hover .navbar-toggler-icon::after,
.t4-header .t4-header-toggle:hover .navbar-toggler-icon span {
    background-color: #ff6d01 !important; /* Cambia con il colore che preferisci in hover */
}

.t4-header-toggle .navbar-toggler-icon::before,
.t4-header-toggle .navbar-toggler-icon::after,
.t4-header-toggle .navbar-toggler-icon span {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: orange;
    transition: background-color 0.3s ease;
}

/* Linea superiore */
.t4-header-toggle .navbar-toggler-icon::before {
    top: 0;
}

/* Linea centrale */
.t4-header-toggle .navbar-toggler-icon span {
    top: 10px;
}

/* Linea inferiore */
.t4-header-toggle .navbar-toggler-icon::after {
    bottom: 0;
}

/* Hover: diventano bianche */
.t4-header-toggle:hover .navbar-toggler-icon::before,
.t4-header-toggle:hover .navbar-toggler-icon span,
.t4-header-toggle:hover .navbar-toggler-icon::after {
    background-color: white;
}
.t4-header {
    background: black !important;
}
body {
  cursor: url('/images/pointer.png'), auto;
}
<p><span style="color: #ffffff;"><strong><span style="caret-color: auto; font-family: verdana, geneva;"><span style="font-size: 18px;">Inside YOU Live A SUPERHERO</span>&nbsp;</span></strong></span></p>
<p>&nbsp;</p>
<h1><span style="font-family: IMPACT, CHICAGO; font-size: 42pt; color: #ff6d01;"><strong>SECRETPOWERS</strong></span></h1>
<p style="text-align: left;"><span style="font-family: verdana, geneva; color: #ffffff;"><strong><span style="font-size: 18pt;">LIFE, MENTAL E BUSINESS COACHING</span></strong></span></p>
<p>&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<h2 style="font-size: large; text-align: left;"><span style="font-family: verdana, geneva; font-size: 18pt;"><strong><span style="color: #ffffff;">L' </span><span style="color: #ff6d01;">AZIENDA</span><span style="color: #ffffff;"> DI </span><span style="color: #ff6d01;">FORMAZIONE </span><span style="color: #ffffff;">CHE NON TI ASPETTAVI.</span></strong></span></h2>
<h2 style="font-size: large; text-align: left;"><span style="font-family: verdana, geneva; font-size: 18pt;"><strong><span style="color: #ffffff;">MA DI CUI HAI </span><span style="color: #ff6d01;">BISOGNO</span><span style="color: #ffffff;">.</span></strong></span></h2>
<p><span style="font-size: 18pt; color: #ffffff; font-family: verdana, geneva;"><strong>PER TE, IL TUO LAVORO, LA TUA VITA.</strong></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="background-color: #fffeea; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;">
<p style="text-align: center;"><span style="font-size: 30pt;"><span style="font-family: impact, chicago;"><strong><span style="color: #000000;">VUOI DIVENTARE UN <span style="color: #ff6d02;">SUPEREROE?</span></span></strong></span></span></p>
<p style="text-align: center;"><span style="font-size: 18pt; font-family: 'book antiqua', palatino; color: #000000;"><strong>Lo sappiamo il coaching può diventare strano. Potresti iniziare a meditare abbracciando un cactus “per sentire il presente”. Oppure potresti fare scelte un po’ più comode e sicure come i Nostri Percorsi ed Eventi. E potresti lasciar&nbsp;stare i cactus dove sono.</strong></span>&nbsp;</p>
<span style="font-size: 16pt;"> <a href="index.php/super-servizi" style="text-decoration: none;"> <button style="background-color: #000; color: #ffffff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 50px;">SCOPRI tutti i Nostri SUPER Servizi</button> </a> </span></div>
<p>&nbsp;</p>
<div style="background-color: #000; padding: 20px; margin: 0; width: 100%; box-sizing: border-box;">
<p>&nbsp;<span style="font-size: 36pt; font-family: impact, chicago;"><strong><span style="color: #ffffff;"><span style="color: #ff6d02;">ENERGIA</span>, CARISMA,</span></strong></span></p>
<p><span style="font-size: 36pt; font-family: impact, chicago;"><strong><span style="color: #ffffff;">FORMAZIONE&nbsp;<span style="color: #ff6d02;"><em>360°</em></span></span></strong></span></p>
<p><span style="color: #ffffff; font-family: 'book antiqua', palatino; font-size: 18pt;">Secretpowers è il punto di riferimento per chi vuole trasformare la propria vita, professionale e personale.<br />Grazie ad un metodo unico ispirato ai Supereroi, uniamo Coaching, Riprogrammazione Mentale e Crescita Personale per aiutarti a Scoprire, Liberare e Potenziare le tue Capacità. Che tu faccia l'imprenditore, il dipendente, la casalinga o qualsiasi altra cosa, ti guidiamo passo dopo passo verso risultati concreti e duraturi per diventare un Supereroe.</span></p>
</div>
<p>&nbsp;</p>
<div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px; margin: 20px;"><a href="index.php/chi-siamo" style="text-decoration: none;"> <button style="background-color: #ff6d02; color: #ffffff; border: none; padding: 10px 40px; cursor: pointer; border-radius: 50px; font-size: 18px; font-weight: bold;"> CHI SIAMO </button> </a> <a href="index.php/super-servizi" style="text-decoration: none;"> <button style="background-color: #ff6d02; color: #ffffff; border: none; padding: 10px 30px; cursor: pointer; border-radius: 50px; font-size: 18px; font-weight: bold;"> I SUPER SERVIZI </button> </a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div style="background-color: #bec2cb; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;"><span style="color: #000000; font-size: 24pt;"><span style="font-family: impact, chicago;"> PERCHÉ SECRETPOWERS?</span></span></div>
<div style="background-color: #bec2cb; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;"><span style="color: #ffffff; font-size: 20pt;"><span style="font-family: 'book antiqua', palatino; font-size: 18pt;">Perché noi non crediamo nei limiti, solo nelle possibilità. Perché il nostro metodo è un’esperienza unica, pensata per farti sentire potente e pronto a spaccare il mondo (metaforicamente, ovviamente). E perché abbiamo già aiutato migliaia di persone a trasformare la loro vita, sia personale che professionale. La prossima potresti essere tu.</span></span></div>
<div style="background-color: #bec2cb; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;"><span style="color: #ffffff; font-size: 20pt;"><span style="font-family: 'book antiqua', palatino; font-size: 18pt;">Se stai cercando un cambiamento reale, se desideri abbandonare le vecchie abitudini che ti frenano, Secretpowers è la scelta giusta per te. Ti offriamo un percorso di crescita che unisce competenze pratiche, sostegno psicologico e ispirazione quotidiana, aiutandoti a diventare una versione migliore di te stesso. </span></span></div>
<div style="background-color: #bec2cb; padding: 20px; width: 100%; box-sizing: border-box;">
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 8px;">
<div style="background-color: #fffeea; padding: 17px; width: 110px; height: 100px; text-align: left; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; border-radius: 15px;">
<p style="font-size: 18px; font-weight: normal; text-align: center;"><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, chicago;">20 Anni di Esperienza&nbsp;</span></em></span></p>
</div>
<div style="background-color: #fffeea; padding: 17px; width: 110px; height: 100px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; border-radius: 15px; text-align: center;" text-align="">
<p style="font-size: 18px; font-weight: normal;"><span style="font-size: 12pt;"><em><span style="font-family: impact, chicago;"><span style="color: #000000;">Business Coach</span><span style="color: #000000;">&nbsp;&nbsp;</span><span style="color: #000000;">per 20 Team&nbsp;</span></span></em></span></p>
</div>
<div style="background-color: #fffeea; padding: 17px; width: 110px; height: 100px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; border-radius: 15px; text-align: center;" text-align="">
<p style="font-size: 18px; font-weight: normal;"><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, chicago;">+5000</span></em></span><br /><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, chicago;">Persone Formate</span></em></span></p>
</div>
<div style="background-color: #fffeea; padding: 17px; width: 110px; height: 100px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; border-radius: 15px; text-align: center;" text-align="">
<p style="font-size: 18px; font-weight: normal;"><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, chicago;">4000 Ore di</span></em></span><br /><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, Chicago;">Formazione</span> </em></span></p>
</div>
<div style="background-color: #fffeea; padding: 17px; width: 110px; height: 100px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; border-radius: 15px; text-align: center;">
<p style="font-size: 18px; font-weight: normal; text-align: left;"><span style="font-size: 12pt;"><em><span style="color: #000000; font-family: impact, chicago;">65 Percorsi Personali</span></em></span></p>
</div>
</div>
</div>
<p style="text-align: center;">&nbsp;</p>
<div style="background-color: #0000; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;">
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 22px;"><a href="link-al-servizio-1" style="text-decoration: none;">
<div style="background-color: #000000; padding: 20px; width: 240px; height: 240px; text-align: center; color: #ffffff; border-radius: 10px; overflow: hidden; position: relative;"><span style="font-size: 14pt;"><img src="images/IMG_1103.jpeg" alt="Life Service" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.8; position: absolute; top: 0; left: 0;" /><span style="position: relative; z-index: 2; font-weight: bold; font-family: impact, chicago; font-size: 24pt;"><span style="font-size: 36pt;"><br />LIFE</span></span></span></div>
</a><span style="font-size: 36pt;"> <a href="link-al-servizio-2" style="text-decoration: none;">
<div style="background-color: #000000; padding: 22px; width: 240px; height: 240px; text-align: center; color: #ffffff; border-radius: 10px; overflow: hidden; position: relative;"><img src="images/IMG_1104.jpeg" alt="Mental Service" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.8; position: absolute; top: 0; left: 0;" /> <span style="position: relative; z-index: 2; font-weight: bold; font-family: impact, chicago;">&nbsp;<br />MENTAL</span></div>
</a></span><a href="link-al-servizio-3" style="text-decoration: none;">
<div style="background-color: #000000; padding: 20px; width: 240px; height: 240px; text-align: center; color: #ffffff; border-radius: 10px; overflow: hidden; position: relative;"><span style="font-size: 36pt;"><img src="images/Unknown-13.jpeg" alt="Business Service" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.8; position: absolute; top: 0; left: 0;" /></span> <span style="position: relative; z-index: 2; font-size: 24pt; font-weight: bold; font-family: impact, chicago;">&nbsp;<br /><span style="font-size: 36pt;">BUSINESS</span></span></div>
</a></div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div style="background-color: #bec2cb; padding: 20px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;"><span style="color: #ffffff; font-size: 20pt;">SCOPRI CON CHI ABBIAMO COLLABORATO E LE PAROLE DI CHI CI HA GIÀ SCELTO</span></div>
<div style="text-align: center; margin: 20px 0;"><a href="link-alla-pagina.html" style="text-decoration: none;"> <button style="background-color: transparent; color: #fcc1c1; border: 2px solid #fcc1c1; padding: 30px 40px; cursor: pointer; border-radius: 50px; font-size: 20px; font-weight: bold;"> TESTIMONIANZE E COLLABORAZIONI </button> </a></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div style="background-color: #fcc1c1; padding: 0px; margin: 0px; width: 100%; box-sizing: border-box; text-align: center;">&nbsp; &nbsp; <span style="font-size: 18pt; color: #000000;"><em>S O C I A L</em>&nbsp; &nbsp;E&nbsp; <em>CONTATTI</em></span></div>
<div style="text-align: center; margin: 20px 0;"><a href="https://facebook.com/secretpowersit" target="_blank" rel="noopener" style="margin: 0 10px; color: #3b5998;" aria-label="Facebook"> <i class="fab fa-facebook fa-2x"></i> </a> <a href="https://instagram.com/_secretpowers" target="_blank" rel="noopener" style="margin: 0 10px; color: #e1306c;" aria-label="Instagram"> <i class="fab fa-instagram fa-2x"></i> </a> <a href="https://tiktok.com/@_secretpowers" target="_blank" rel="noopener" style="margin: 0 10px; color: #2af0ea;" aria-label="TikTok"> <i class="fab fa-tiktok fa-2x"></i> </a> <a href="https://youtube.com/@secretpowersit" target="_blank" rel="noopener" style="margin: 0 10px; color: #ff0000;" aria-label="YouTube"> <i class="fab fa-youtube fa-2x"></i> </a> <a href="https://wa.me/3791461215?text=Ciao!" target="_blank" rel="noopener" style="margin: 0 10px; color: #25d366;" aria-label="WhatsApp"> <i class="fab fa-whatsapp fa-2x"></i> </a>
<div style="text-align: left;">&nbsp;</div>
</div>
/* Stili generali del footer */
body .footer-wrapper {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    padding-top: 50px !important;
    padding-bottom: 20px !important;
    text-align: center !important;
    position: relative !important;
}

/* Bordo superiore dorato */
body .footer-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 10px !important;
    background-image: linear-gradient(to right, #e0b440, #ffdb58, #e0b440) !important;
}

/* Contenuto principale del footer */
body .footer-content-area {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Logo e titolo */
body .footer-logo img {
    max-width: 80px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
}
body .footer-logo h3 {
    color: #e0b440 !important;
    font-size: 1.5em !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

/* Descrizione */
body .footer-description {
    font-size: 1em !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

/* Indirizzo */
body .footer-address h4 {
    color: #e0b440 !important;
    font-size: 1.1em !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
}
body .footer-address p {
    font-size: 0.9em !important;
    margin-bottom: 30px !important;
}

/* Contatti e social */
body .footer-contacts h4 {
    color: #e0b440 !important;
    font-size: 1.1em !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
}
body .contact-item {
    margin-bottom: 20px !important;
}
body .contact-item a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.1em !important;
    transition: color 0.3s ease !important;
}
body .contact-item a:hover {
    color: #e0b440 !important;
}
body .contact-item i {
    margin-right: 8px !important;
}

/* Social icons */
body .social-icons {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
}
body .social-icons a {
    color: #e0b440 !important;
    font-size: 1.8em !important;
    margin: 0 10px !important;
    transition: color 0.3s ease !important;
}
body .social-icons a:hover {
    color: #ffdb58 !important;
}

/* Footer bottom bar */
body .footer-bottom-bar {
    background-color: #111111 !important;
    padding: 15px 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.85em !important;
    border-top: 1px solid #333333 !important;
}
body .footer-bottom-bar p {
    margin: 0 !important;
    flex-basis: auto !important;
}

/* Policy buttons */
body .footer-policy-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 10px !important;
}
body .footer-policy-links .policy-button {
    background-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    font-size: 0.9em !important;
    white-space: nowrap !important;
}
body .footer-policy-links .policy-button:hover {
    background-color: #e0b440 !important;
    color: #1a1a1a !important;
}

/* Responsività */
@media (max-width: 768px) {
    body .footer-content-area {
        padding: 0 15px !important;
    }
    body .footer-logo img {
        max-width: 60px !important;
    }
    body .footer-logo h3 {
        font-size: 1.3em !important;
    }
    body .footer-description,
    body .footer-address p {
        font-size: 0.9em !important;
    }
    body .social-icons a {
        font-size: 1.5em !important;
        margin: 0 8px !important;
    }
    body .footer-bottom-bar {
        flex-direction: column !important;
        text-align: center !important;
    }
    body .footer-policy-links {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
}

@media (max-width: 480px) {
    body .footer-policy-links {
        flex-direction: column !important;
        gap: 8px !important;
    }
    body .footer-policy-links .policy-button {
        padding: 6px 10px !important;
        font-size: 0.8em !important;
    }
}