/*
Theme Name: BeTheme Child
Template: betheme
*/


a:hover {
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAROUSEL SWIPER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.cs-wrap { position: relative; padding: 0 48px 20px; }
.cs-wrap .swiper { overflow: hidden; }

/* ── Card ── */
.cs-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cs-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.cs-card-body {
    padding: 14px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.cs-card-title {
    margin: 0;
    font-size: 19px;
    line-height: 26px;
    padding-bottom: 5px;
}
.cs-card-desc {
    margin: 0;
    font-size: 16px;
    line-height: 23px;
}

/* ── Frecce navigazione ── */
.cs-nav {
    position: absolute;
    top: calc(220px / 2);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #333;
}
.cs-nav:hover { color: #000; }
.cs-nav-prev { left: 0; }
.cs-nav-next { right: 0; }
.cs-nav.swiper-button-disabled { opacity: .3; pointer-events: none; }

/* ── Pagination ── */
.cs-wrap .swiper-pagination { position: relative; bottom: auto; margin-top: 24px; }
.mfn-builder-content .cs-wrap .swiper-pagination-bullet {
    --mfn-swiper-pagination-bullet-width: 7px;
    --mfn-swiper-pagination-bullet-height: 7px;
    width: 7px !important;
    height: 7px !important;
    border-radius: 7px !important;
    background: #ccc !important;
    opacity: 1 !important;
    transition: width 0.3s ease, background 0.3s ease !important;
}
.mfn-builder-content .cs-wrap .swiper-pagination-bullet-active {
    --mfn-swiper-pagination-bullet-width: 28px;
    width: 28px !important;
    background: #333 !important;
    transform: scale(1) !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cs-wrap { padding: 0 8px 48px; }
    .cs-nav { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAYOFF TYPEWRITER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Decorazioni payoff ── */
.payoff-tw {
    position: relative;
    padding: 0 40px 0 45px;
    min-height: 320px; /* 5 parole × 64px line-height — evita scatto durante animazione */
}
.payoff-tw .pw-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* line1: verticale sinistra, da top prima riga a metà ultima riga,
   poi gap, poi continua 30px sotto */
/* Stato iniziale: linee nascoste (scale 0) */
.payoff-tw .pw-deco .line1-top,
.payoff-tw .pw-deco .line1-bottom,
.payoff-tw .pw-deco .line2-top,
.payoff-tw .pw-deco .line2-bottom {
    transform: scaleY(0);
    transform-origin: top center;
}
.payoff-tw .pw-deco .line1-h,
.payoff-tw .pw-deco .line2-h {
    transform: scaleX(0);
}
.payoff-tw .pw-deco .line1-h { transform-origin: right center; }
.payoff-tw .pw-deco .line2-h { transform-origin: left center; }

/* Animazione: quando .pw-visible viene aggiunta */
.payoff-tw.pw-visible .pw-deco .line1-top {
    transform: scaleY(1);
    transition: transform 0.8s ease-out 0.1s;
}
.payoff-tw.pw-visible .pw-deco .line1-h {
    transform: scaleX(1);
    transition: transform 0.5s ease-out 0.9s;
}
.payoff-tw.pw-visible .pw-deco .line1-bottom {
    transform: scaleY(1);
    transition: transform 0.4s ease-out 1.1s;
}
.payoff-tw.pw-visible .pw-deco .line2-top {
    transform: scaleY(1);
    transition: transform 0.4s ease-out 0.3s;
}
.payoff-tw.pw-visible .pw-deco .line2-h {
    transform: scaleX(1);
    transition: transform 0.5s ease-out 0.7s;
}
.payoff-tw.pw-visible .pw-deco .line2-bottom {
    transform: scaleY(1);
    transition: transform 0.8s ease-out 0.9s;
}

.payoff-tw .pw-deco .line1-top {
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 270px;
    background: #dadada;
}
.payoff-tw .pw-deco .line1-bottom {
    position: absolute;
    left: 0;
    width: 4px;
    height: 110px;
    background: #dadada;
    top: 300px;
}
/* line1-h: orizzontale che parte dal gap di line1 verso sinistra */
.payoff-tw .pw-deco .line1-h {
    position: absolute;
    left: -170px;
    top: 288px;
    width: 160px;
    height: 4px;
    background: #dadada;
}
/* line2: verticale destra — stesse misure di line1 specchiata */
.payoff-tw .pw-deco .line2-top {
    position: absolute;
    left: 365px;
    top: -85px;
    width: 4px;
    height: 110px;
    background: #dadada;
}
.payoff-tw .pw-deco .line2-bottom {
    position: absolute;
    left: 365px;
    width: 4px;
    height: 265px;
    background: #dadada;
    top: 45px;
}
/* line2-h: orizzontale che parte dal gap di line2 verso destra */
.payoff-tw .pw-deco .line2-h {
    position: absolute;
    left: 380px;
    top: 34px;
    width: 160px;
    height: 4px;
    background: #dadada;
}

.payoff-tw .pw-word {
    display: block;
    font-size: 48px;
    line-height: 64px;
    font-weight: 700;
    color: #000;
    min-height: 60px;
    opacity: 0;
}
.payoff-tw .pw-word.typing::after {
    content: '|';
    color: #C6C6C6;
    animation: pw-blink 0.6s step-end infinite;
    margin-left: 2px;
}
.payoff-tw .pw-word.done::after { content: none; }
@keyframes pw-blink { 0%,100%{opacity:1} 50%{opacity:0} }


/*slide home — IT (#n2-ss-2) + EN (#n2-ss-3) */
div#n2-ss-2, div#n2-ss-3 { min-height: 65vh !important; }
div#n2-ss-2 .n2-ss-slide, div#n2-ss-3 .n2-ss-slide { min-height: 65vh !important; }
@media (max-width: 1024px) {
    div#n2-ss-2, div#n2-ss-2 .n2-ss-slide,
    div#n2-ss-3, div#n2-ss-3 .n2-ss-slide { min-height: 80vh !important; height: 80vh !important; }
}

#n2-ss-2 .n2-ss-slide .n2-ss-layer[data-sstype="content"],
#n2-ss-3 .n2-ss-slide .n2-ss-layer[data-sstype="content"] {
    opacity: 0 !important;
    position: relative !important;
    top: 50px !important;
    transition: opacity 1s ease, top 1s ease !important;
}
#n2-ss-2 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"],
#n2-ss-3 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"] {
    opacity: 1 !important;
    top: 0 !important;
}
#n2-ss-2 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"]:nth-child(2),
#n2-ss-3 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"]:nth-child(2) {
    transition-delay: 0.3s !important;
}
#n2-ss-2 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"]:nth-child(3),
#n2-ss-3 .n2-ss-slide-active .n2-ss-layer[data-sstype="content"]:nth-child(3) {
    transition-delay: 0.6s !important;
}

#n2-ss-2 .n2-ss-layer[data-sstype="content"],
#n2-ss-3 .n2-ss-layer[data-sstype="content"] {
    margin-right: 20% !important;
    align-self: flex-start !important;
}
#n2-ss-2 .n2-ss-section-main-content,
#n2-ss-3 .n2-ss-section-main-content {
    min-height: 65vh !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-right: 10% !important;
}




/*fine slide home */

/* ══════════════════════════════════════════════════════════════════════════
   ANIMAZIONI ENTRATA — classe .anim-up su qualsiasi elemento BeBuilder
   ══════════════════════════════════════════════════════════════════════════ */
.anim-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Icon Box: immagini proporzionate ──────────────────────────────────── */
/* ── Fix nobr BeTheme ──────────────────────────────────────────────────── */
nobr {
    white-space: normal !important;
}

/* ── Footer link hover ─────────────────────────────────────────────────── */
.mfn-footer a:hover {
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* ── Icon Box: immagini proporzionate ──────────────────────────────────── */
.mfn-icon-box .icon-wrapper img.primary {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}



.iub__us-widget {
    display: none !important;
}

.nf-form-layout a:hover {
    text-decoration: none !important;
    color: #000000;
}


div#n2-ss-2 .n-uc-sUmzVFetMhn6,
div#n2-ss-3 .n-uc-ESBV5MKWrR1V
{ margin-top: -10% !important; }


@media (max-width: 1600px) {

    
    div#n2-ss-2, div#n2-ss-3 { min-height: 80vh !important; }
    div#n2-ss-2 .n2-ss-slide, div#n2-ss-3 .n2-ss-slide { min-height: 80vh !important; }

    #n2-ss-2 .n2-ss-layer[data-sstype="content"],
    #n2-ss-3 .n2-ss-layer[data-sstype="content"] {
        margin-right: 15% !important;
    }

    #n2-ss-2 .n2-ss-section-main-content,
    #n2-ss-3 .n2-ss-section-main-content {
        padding-right: 6% !important;
    }

    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V {
        margin-top: -15% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet: header — lingua + burger a destra */
    .mcb-header-section .mcb-wrap-pes4vbao.mcb-wrap {
        flex-grow: 0 !important;
        width: auto !important;
        margin-left: auto !important;
    }

    .mcb-section .mcb-wrap-pes4vbao > .mcb-wrap-inner-pes4vbao {
        flex-wrap: wrap;
        width: 90px;
    }

    #n2-ss-2 .n2-ss-section-main-content,
    #n2-ss-3 .n2-ss-section-main-content {
        padding-right: 10px !important;
    }

    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V {
        margin-top: -70% !important;
    }

    /* Tablet: font slider IT */
    div#n2-ss-2 h1#n2-ss-2item2 { font-size: 64px !important; }
    div#n2-ss-2 .n2-font-d87b9df43d826a1fac5e352a90c29f77-paragraph { font-size: 40px !important; }
    div#n2-ss-2 .n2-font-9385fa111cc49cd72e89f1afa471f066-paragraph { font-size: 33px !important; }
    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V { margin-top: -260px; }

    div#n2-ss-2 .n-uc-DjVIjHxopI6c,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V { max-width: 550px !important; }

    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V { max-width: 550px !important; }

    div#n2-ss-2 .n-uc-6t8aCUpjsfH6,
    div#n2-ss-3 .n-uc-3lf6ZYYGUlTI { max-width: 550px !important; }

    div#n2-ss-2 .n-uc-DjVIjHxopI6c,
    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-2 .n-uc-6t8aCUpjsfH6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V,
    div#n2-ss-3 .n-uc-3lf6ZYYGUlTI {
        text-align: center !important;
        align-self: center !important;
    }

    /* Tablet: font slider EN */
    div#n2-ss-3 h1#n2-ss-3item2 { font-size: 64px !important; }
    div#n2-ss-3 .n2-font-d87b9df43d826a1fac5e352a90c29f77-paragraph { font-size: 40px !important; }
    div#n2-ss-3 .n2-font-9385fa111cc49cd72e89f1afa471f066-paragraph { font-size: 33px !important; }

    #n2-ss-2 .n2-ss-layer[data-sstype="content"],
    #n2-ss-3 .n2-ss-layer[data-sstype="content"] {
        margin-right: auto !important;
        margin-left: auto !important;
    }


    /*animazione payoff home */
    .payoff-tw {
        padding: 0 40px 0 200px;
    }

    .payoff-tw .pw-deco .line1-top {
        left: 155px;
    }
    .payoff-tw .pw-deco .line1-bottom {
        left: 155px;
    }
    /* line1-h: orizzontale che parte dal gap di line1 verso sinistra */
    .payoff-tw .pw-deco .line1-h {
        left: -15px;
    }
    /* line2: verticale destra — stesse misure di line1 specchiata */
    .payoff-tw .pw-deco .line2-top {
        left: 520px;
    }
    .payoff-tw .pw-deco .line2-bottom {
        left: 520px;
    }
    /* line2-h: orizzontale che parte dal gap di line2 verso destra */
    .payoff-tw .pw-deco .line2-h {
        left: 535px;
    }

    .cs-card-title {
        font-size: 17px;
        line-height: 24px;
    }

    .cs-card-desc {
        font-size: 15px;
        line-height: 21px;
    }

}
/* Mobile: font slider */
@media (max-width: 767px) {
    div#n2-ss-2 h1#n2-ss-2item2 { font-size: 42px !important; }
    div#n2-ss-3 h1#n2-ss-3item2 { font-size: 42px !important; }
    div#n2-ss-2 .n2-font-d87b9df43d826a1fac5e352a90c29f77-paragraph,
    div#n2-ss-3 .n2-font-d87b9df43d826a1fac5e352a90c29f77-paragraph { font-size: 27px !important; }
    div#n2-ss-2 .n2-font-9385fa111cc49cd72e89f1afa471f066-paragraph,
    div#n2-ss-3 .n2-font-9385fa111cc49cd72e89f1afa471f066-paragraph {
        font-size: 26px !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 6px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.7) !important;
    }
    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V { margin-top: -180px; }
    #n2-ss-2 .n2-ss-layer[data-sstype="content"],
    #n2-ss-3 .n2-ss-layer[data-sstype="content"] {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    #n2-ss-2 .n2-ss-section-main-content,
    #n2-ss-3 .n2-ss-section-main-content {
        justify-content: center !important;
    }

    /* Posiziona l'immagine di sfondo su mobile */
    #n2-ss-2 .n2-ss-slide-background-image img,
    #n2-ss-3 .n2-ss-slide-background-image img {
        object-position: 75% 100% !important;
    }

    /* Overlay gradiente per leggibilità testo su mobile */
    #n2-ss-2 .n2-ss-slide::before,
    #n2-ss-3 .n2-ss-slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.75) 100%
        );
        z-index: 1;
        pointer-events: none;
    }
    #n2-ss-2 .n2-ss-layers-container,
    #n2-ss-3 .n2-ss-layers-container {
        position: relative;
        z-index: 2;
    }



    /*animazione payoff home */
    .payoff-tw {
        padding: 0 0 0 60px;
    }

    .payoff-tw .pw-word {
        font-size: 40px;
        line-height: 56px;
        min-height: 56px;
    }

    .payoff-tw .pw-deco .line1-top {
        left: 35px;
        height: 235px;
    }
    .payoff-tw .pw-deco .line1-bottom {
        left: 35px;
        top: 265px;
        height: 80px;
    }
    /* line1-h: orizzontale che parte dal gap di line1 verso sinistra */
    .payoff-tw .pw-deco .line1-h {
        left: -125px;
        top: 253px;
    }
    /* line2: verticale destra — stesse misure di line1 specchiata */
    .payoff-tw .pw-deco .line2-top {
        left: 315px;
        height: 80px;
        top: -55px;
    }
    .payoff-tw .pw-deco .line2-bottom {
        left: 315px;
        height: 225px;
        top: 40px;
    }
    /* line2-h: orizzontale che parte dal gap di line2 verso destra */
    .payoff-tw .pw-deco .line2-h {
        left: 330px;
        top: 28px;
    }

     .cs-card-title {
        font-size: 20px;
        line-height: 30px;
    }

    .cs-card-desc {
        font-size: 16px;
        line-height: 26px;
    }

    .mfn-footer-tmpl .mcb-section:not(.full-width) {
        max-width: 100%;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    div#n2-ss-2 .n-uc-sUmzVFetMhn6,
    div#n2-ss-3 .n-uc-ESBV5MKWrR1V {
        margin-top: -60% !important;
    }


    /*
    div#n2-ss-2 { min-height: 80vh !important; }
    div#n2-ss-2 .n2-ss-slide { min-height: 80vh !important; }
    */
}

/* ══════════════════════════════════════════════════════════════════════════
   SEZIONE PAYOFF HOME — stack su 1 colonna sotto 1280px
   Evita che payoff e testo descrittivo restino affiancati nella fascia
   laptop (1024–1280px), dove la colonna del payoff è troppo stretta e
   spezza le parole ("Tecnolo / gia").
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .mcb-section-14evyras .mcb-wrap.laptop-one-second {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Spazio sotto il payoff quando il layout diventa stacked */
    .payoff-tw { padding-bottom: 130px; }
}

/* Smartphone molto piccoli (≤380px): riduci padding payoff per evitare
   che parole lunghe come "Tecnologia"/"Esperienza" vadano a capo */
@media (max-width: 380px) {
    .payoff-tw { padding: 0 0 0 40px; min-height: 280px; }
    .payoff-tw .pw-word { font-size: 34px; line-height: 48px; min-height: 48px; }
    .payoff-tw .pw-deco .line1-top { left: 20px; height: 200px; }
    .payoff-tw .pw-deco .line1-bottom { left: 20px; top: 230px; height: 70px; }
    .payoff-tw .pw-deco .line1-h { left: -140px; top: 220px; }
    .payoff-tw .pw-deco .line2-top { left: 270px; top: -50px; height: 70px; }
    .payoff-tw .pw-deco .line2-bottom { left: 270px; top: 35px; height: 190px; }
    .payoff-tw .pw-deco .line2-h { left: 285px; top: 24px; }
}
