/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Tema child per Hello Elementor
Author: Luigi Vitale
Author URI: https://nexuma.net/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* =========================
   WORK SANS – TITOLI
========================= */

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* =========================
   FUTURA – TESTI / UI
========================= */


@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Light font.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Light Italic font.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Book font.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Book Italic font.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/futura medium bt.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Medium Italic font.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Heavy font.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Heavy Italic font.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Bold font.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Bold Italic font.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Extra Black font.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ======================== 
    COLORI GLOBALI
=========================*/

:root {
    --color-blue-logo: #000049;
    --purple-icon: #b37aff;
    --blue-icon: #1017f3;
    --azure-icon: #388aff;
    
    --color-psychology: #5b2d8b;
    --color-marketing: #0a2eff;
    --color-brand: #1ec8ff;
    --color-tech: #6a5cff;
    --color-business: #ff2fb2;
}

/* =======================
    RESET & BASE
======================== */

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
    font-family: 'Futura', Arial, sans-serif !important;
    /* color: var(--color-text);
       background: #fff; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Work Sans', Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
span {
  letter-spacing: 0.01em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  opacity: 1;
  /*pointer-events: none;*/
}

h1 {
    font-size: 4.235rem;
    font-weight: 500;
}
h2 {
    font-size: 4.235rem;
    font-weight: 500;
}
h3 {
    font-size: 2.618rem;
    font-weight: 500;
}
h4 {
    font-size: 1.618rem;
    font-weight: 500;
}
h5 {
    font-size: 1.25rem;
    font-weight: 500;
}
/*
h6, p, span {
    font-size: 1rem;
    font-weight: 500;
}
*/
div {
    font-size: 0.9rem;
    font-weight: 500;
}

/* MANUTENZIONE PAGE */
.hero-cnt{
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease, background-position 6s linear;
}
.title-cnt {
    
}

.svr-cnt{
    position: relative;
}

.svr-cnt-inner {
    display: none;
    opacity: 0;
    width: 500px;
    max-width: 500px;
    transition: opacity 10.6s ease;
}

.svr-cnt-inner.active {
    opacity: 1;
    display: block;
}

.call-cnt {
    
}
/* Container principale */
.blog-article-container {
    max-width: 100%;
    margin: 0px auto;
    margin-top: -120px;
    padding: 0 0px;
    font-family: 'Futura', Arial, sans-serif;
    color: #11e;
    line-height: 1.8;
}
.heroContainer {
    max-width: 100%;
    min-height: 60vh;
    margin: 0px auto;
    padding: 0 0px;
    padding-top: 130px;
    font-family: 'Futura', Arial, sans-serif;
    background: linear-gradient(135deg,#1ec8ff 0%,#6a5cff 45%,#000049 100%);

    line-height: 1.8;
}
.heroContainer h2{
    position: absolute;
    top: 100px;
    right: 100px;
    font-size: 200px!important;
    color: #b37aff1f;
    background-color: #00000000;
}
.heroContainer2 {
    max-width: 900px;
    margin: 0px auto;
    padding: 0 20px;
    font-family: 'Futura', Arial, sans-serif;
    background: #1ec8ff00;
    line-height: 1.8;
}
.bodyContainer {
    max-width: 900px;
    margin: 0px auto;
    margin-top: -30vh;
    padding: 0 20px;
    font-family: 'Futura', Arial, sans-serif;
    color: #11e;
    line-height: 1.8;
}

/* Titolo articolo */
.blog-article-container .article-title {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 500;
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--color-blue-logo);
    letter-spacing: 0.01em;
}

/* Autore e data */
.blog-article-container .article-meta {
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
}

/* Immagine in evidenza */
.blog-article-container .article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Contenuto articolo */
.blog-article-container .article-content {
    font-family: 'Futura', Arial, sans-serif;
    font-size: 1rem;
    color: #111;
}

.blog-article-container .article-content h2,
.blog-article-container .article-content h3,
.blog-article-container .article-content h4 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 500;
    margin: 30px 0 15px;
    color: var(--color-blue-logo);
}

.blog-article-container .article-content p {
    margin-bottom: 20px;
}

.blog-article-container .article-content a {
    color: var(--color-brand);
    text-decoration: none;
}

.blog-article-container .article-content a:hover {
    text-decoration: underline;
}

/* Box CTA finale */
.blog-article-container .article-cta {
    text-align: center;
    margin-top: 50px;
}

.blog-article-container .article-cta a.cta-button {
    display: inline-block;
    background-color: var(--color-blue-logo);
    color: #fff;
    padding: 14px 30px;
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-article-container .article-cta a.cta-button:hover {
    background-color: var(--color-brand);
}

/* Articoli correlati */
.blog-article-container .related-articles {
    margin-top: 60px;
}

.blog-article-container .related-articles h3 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--color-blue-logo);
}

.blog-article-container .related-articles ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.blog-article-container .related-articles li {
    flex: 1 1 30%;
}

.blog-article-container .related-articles li a {
    font-family: 'Futura', Arial, sans-serif;
    font-weight: 500;
    color: var(--color-brand);
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-article-container .related-articles li a:hover {
    color: var(--color-psychology);
}

/* Quote / blocchi evidenziati */
.blog-article-container blockquote,
.blog-article-container .quote-hero {
    font-family: 'Work Sans', Arial, sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.8rem;
    color: var(--color-blue-logo);
    border-left: 4px solid var(--color-brand);
    padding-left: 20px;
    margin: 40px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-article-container {
        padding: 0 15px;
    }

    .blog-article-container .article-title {
        font-size: 2.2rem;
    }

    .blog-article-container .article-content {
        font-size: 0.95rem;
    }
    
    .blog-article-container .related-articles ul {
        flex-direction: column;
        gap: 15px;
    }
}