/* ==========================
   🎨 VARIABILI GLOBALI
   ========================== */
:root {
    /* Font sizes */
    --h2-size: 55px;
    --h3-size: 36px;
    --h4-size: 25px;
    --p-size: 20px;
    --font46: 46px;
    --font36: 36px;
    --font32: 32px;
    --font22: 22px;
    --font18: 18px;

    /* Line heights */
    --h2-line: 100%;
    --h3-line: 40px;
    --h4-line: 105%;
    --p-line: 23px;
    --lineheight50: 50px;
    --lineheight42: 42px;
    --lineheight38: 38px;
    --lineheight26: 26px;
    --lineheight22: 22px;

    /* Font weights */
    --bold: 700;
    --bold600: 600;
    --regular: 400;

    /* Letter spacing (convertito da -3%) */
    --h1-spacing: -4.08px;
    --h2-maggiore-spacing: -2.58px;
    --h2-spacing: -1.65px;
    /* 55 × 0.03 */
    --h3-spacing: -1.08px;
    /* 36 × 0.03 */
    --h4-spacing: -0.75px;
    /* 25 × 0.03 */
    --p-spacing: -0.6px;
    /* 20 × 0.03 */

    /* Colors */
    --col-bianco: #fff;
    --col-nero: #000;
    --col-blu: #3b67bf;
}

/* Breakpoint: sotto 768px */
@media (max-width: 1024px) {
    :root {
        --h2-size: 30px;
        --h3-size: 32px;
        --h4-size: 20px;
        --p-size: 20px;
        --h2-line: 115%;
        --h3-line: 32px;
        --h4-line: 115%;
        --p-line: 26px;

    }
}

/* ==========================
   ✏️ STILI PAGINA OBLIQUO
   ========================== */

.page-template-obliquo h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-line);
    font-weight: var(--bold);
    letter-spacing: var(--h2-spacing) !important;
}

.page-template-obliquo h3,
.page-template-obliquo h3 span {
    font-size: var(--h3-size) !important;
    line-height: var(--h3-line);
    font-weight: var(--regular);
    letter-spacing: var(--h3-spacing) !important;
    background-image: none !important;
}

.page-template-obliquo h3 span {
    font-weight: var(--bold);
}

.page-template-obliquo h4 {
    font-size: var(--h4-size);
    line-height: var(--h4-line);
    font-weight: var(--regular);
    letter-spacing: var(--h4-spacing) !important;
}

.page-template-obliquo p {
    font-size: var(--p-size);
    line-height: var(--p-line);
    font-weight: var(--bold);
    letter-spacing: var(--p-spacing) !important;
}

/* aggiungi nel tuo CSS o file custom */
.fade-up {
    opacity: 0;
    transform: translateY(300px);
    will-change: transform, opacity;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================
   🎨 COLORI TESTO
   ========================== */
/* ==========================
   🎨 COLORI TESTO COMPLETI
   ========================== */

.c-bianco p,
.c-bianco h1,
.c-bianco h2,
.c-bianco h3,
.c-bianco h4,
.c-bianco h5,
.c-bianco h6,
.c-bianco span,
.c-bianco a,
.c-bianco li {
    color: var(--col-bianco) !important;
}

.c-nero p,
.c-nero h1,
.c-nero h2,
.c-nero h3,
.c-nero h4,
.c-nero h5,
.c-nero h6,
.c-nero span,
.c-nero a,
.c-nero li {
    color: var(--col-nero) !important;
}

.c-blu p,
.c-blu h1,
.c-blu h2,
.c-blu h3,
.c-blu h4,
.c-blu h5,
.c-blu h6,
.c-blu span,
.c-blu a,
.c-blu li {
    color: var(--col-blu) !important;
}

.font46,
.font46 p,
.font46 span,
.font46 h3 {
    font-size: var(--font46) !important;
    line-height: var(--lineheight50) !important;
}

@media (max-width: 1024px) {

    .font46,
    .font46 p,
    .font46 span,
    .font46 h3 {
        font-size: 38px !important;
        line-height: 42px !important;
    }
}

.font36,
.font36 p,
.font36 span,
p.font36 {
    font-size: var(--font36) !important;
    line-height: var(--lineheight38) !important;
}

@media (max-width: 1024px) {

    .font36,
    .font36 p,
    .font36 span,
    p.font36 {
        font-size: 24px !important;
        line-height: 28px !important;
    }
}

.font32,
.font32 p {
    font-size: var(--font32) !important;
    line-height: 34px !important;
}

.font22,
.font22 p,
.font22 strong {
    font-size: var(--font22) !important;
    line-height: var(--lineheight26) !important;
}

@media (max-width: 1024px) {

    .font22,
    .font22 p {
        font-size: 18px !important;
        line-height: 24px !important;
    }
}

.font18,
.font18 p {
    font-size: var(--font18) !important;
    line-height: var(--lineheight22) !important;
}

.bold,
.bold h2,
.bold h3,
.bold h4,
.bold p {
    font-weight: var(--bold) !important;
}

.bold600,
.bold600 h2,
.bold600 h3,
.bold600 h4,
.bold600 p {
    font-weight: var(--bold600) !important;
}

.regular,
.regular p {
    font-weight: var(--regular) !important;
}

.mtauto {
    margin-top: auto !important;
}

.m-0,
.m-0 h2,
.m-0 h3,
.m-0 h4,
.m-0 p {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.mt20 {
    margin-top: 20px !important;
}

body .mb20 {
    margin-bottom: 20px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

div.mb-100 {
    margin-bottom: 100px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

div.pb-100 {
    padding-bottom: 100px !important;
}

::selection {
    background: var(--col-blu) !important;
}

.cta-gialla a {
    background-color: #F2D000 !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #18272B !important;
}

@media (max-width: 1024px) {
    .mt-100 {
        margin-top: 50px !important;
    }

    div.mb-100 {
        margin-bottom: 50px !important;
    }

    .pt-100 {
        padding-top: 50px !important;
    }

    div.pb-100 {
        padding-bottom: 50px !important;
    }
}

.hidden-xl {
    display: none !important;
}

.visible-xl {
    display: block !important;
}

@media (max-width: 1024px) {
    .visible-xl {
        display: none !important;
    }

    .hidden-xl {
        display: block !important;
    }
}

.cta-blu a,
.cta-blu input {
    background-color: var(--col-blu) !important;
    color: var(--col-bianco) !important;
    background-image: none !important;
    border: 1px solid var(--col-blu) !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.cta-bianca a,
.cta-bianca input {
    background-color: var(--col-bianco) !important;
    color: var(--col-blu) !important;
    background-image: none !important;
    border: 1px solid var(--col-bianco) !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.cta-bianca-brown a,
.cta-bianca-brown input {
    background-color: var(--col-bianco) !important;
    color: #BF763B !important;
    background-image: none !important;
    border: 1px solid var(--col-bianco) !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.cta-transp a {
    background-color: transparent !important;
    color: var(--col-bianco) !important;
    background-image: none !important;
    border: 2px solid var(--col-bianco) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.logo-obliquo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
}

.title-landing {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}


.title-landing h1 {
    font-size: 36px !important;
    line-height: 40px !important;
    color: var(--col-bianco) !important;
    font-weight: var(--bold) !important;
    letter-spacing: var(--h3-spacing) !important;
}

.title-landing-b2c h1 {
    font-size: 136px !important;
    line-height: 146px !important;
    color: var(--col-bianco) !important;
    font-weight: var(--bold) !important;
    letter-spacing: var(--h1-spacing) !important;
}

.title-landing-b2c.landing-citta h1,
.title-landing-b2c.landing-citta h1 span {
    font-size: 96px !important;
    line-height: 106px !important;
    letter-spacing: -2.88px !important;
}

.title-landing-b2c.landing-citta h1 span {
    font-weight: var(--bold) !important;
    color: #000 !important;
}

@media (max-width: 1024px) {
    .title-landing-b2c h1 {
        font-size: 56px !important;
        line-height: 56px !important;
    }
}

.title-blocco-2 {
    position: absolute;
    top: 150px;
    width: 100%;
    max-width: 1100px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.title-blocco-2 h2 {
    font-size: 86px !important;
    line-height: 86px !important;
    letter-spacing: var(--h2-maggiore-spacing) !important;
}

@media (max-width: 1024px) {
    .title-blocco-2 h2 {
        font-size: 38px !important;
        line-height: 42px !important;
    }
}

.cta-hero {
    position: absolute;
    top: 15px;
    left: -20px;
    transform: translateX(25%);
    z-index: 10;
}

.cta-hero a {
    padding: 5px 20px !important;
}

.logo-hero {
    position: absolute;
    top: 15px;
    right: 0;
    transform: translateX(-25%);
    z-index: 10;
    max-width: 140px;
}

.page-template-obliquo .hellobar {
    background-color: #BF763B !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    z-index: 99;
}

.page-template-obliquo.page-id-8 .hellobar,
.page-template-obliquo.page-id-240 .hellobar,
.page-template-obliquo.page-id-248 .hellobar {
    background-color: #000 !important;
    height: 80px;
}

.page-template-obliquo .hellobar .wpb_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.page-template-obliquo .hellobar p {
    margin: 0;
    font-size: 14px;
    line-height: 15px;
}

.hero-obliquo {
    padding-top: 41px;
}

.hero-obliquo .hero-obliquo-col .vc_column-inner>.wpb_wrapper {
    height: 100vh;
}

.hero-obliquo .hero-obliquo-col .vc_column-inner>.wpb_wrapper div:first-child,
.hero-obliquo .hero-obliquo-col .vc_column-inner>.wpb_wrapper div:first-child figure,
.hero-obliquo .hero-obliquo-col .vc_column-inner>.wpb_wrapper div:first-child figure div {
    height: 100%;
    width: 100%;
}

.hero-obliquo .hero-obliquo-col .vc_column-inner>.wpb_wrapper .bg-hero img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.blocco-designer .inner-text .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.blocco-designer-b2c .inner-text .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blocco-designer .inner-text p,
.blocco-designer .inner-text h3 {
    max-width: 512px;
}

@media (max-width: 1024px) {
    .blocco-designer .inner-text .wpb_wrapper {
        padding: 15px;
    }
}

.blocco-moodboard .vc_column-inner {
    padding-top: 0 !important;
}

.blocco-moodboard {
    padding: 100px 50px;
}

.sezione-bg-counter {
    padding-top: 100px;
    padding-bottom: 100px;
}

.blocco-counter {
    padding-top: 200px;
}

.blocco-counter .stats-desc>div {
    font-size: 116px !important;
    line-height: 100% !important;
    font-weight: var(--bold) !important;
    letter-spacing: var(--h2-spacing) !important;
    color: var(--col-bianco) !important;
}

.blocco-counter .progetti-realizzati .stats-desc>div:first-child::before {
    content: "+";
}

.blocco-counter h3 {
    margin: 0;
    color: var(--col-bianco) !important;
}

.blocco-counter .wpb_text_column.wpb_content_element {
    text-align: center;
}

.oliquo-slider-partner {
    text-align: center;
}

.oliquo-slider-partner h3 {
    margin-bottom: 50px !important;
}

.oliquo-slider-partner .cta-blu {
    margin-top: 50px;
}

.slider-obliquo img {
    border-radius: 30px;
}

.page-template-obliquo .slider-obliquo h3,
.page-template-obliquo .slider-obliquo span,
.page-template-obliquo .slider-obliquo p {
    font-size: 30px !important;
    line-height: 105% !important;
}

.slider-obliquo .slider-text {
    z-index: 20;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 100%;
}

@media (min-width: 1024px) {
    .slider-text {
        max-width: 660px;
    }

}

.slider-text p {
    font-size: 30px !important;
    line-height: 34px !important;
}

.slider-obliquo {
    width: 100%;
    overflow: visible;
    padding-bottom: 40px;
    /* spazio per i pallini */
}

.slider-obliquo .swiper-slide {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 500px;
    /* 👈 altezza fissa o usa aspect-ratio sotto */
    transition: transform 0.3s ease;
    opacity: 30%;
    cursor: pointer;
}

.slider-obliquo .swiper-slide-active {
    opacity: 1;
}


/* 👇 immagine full con object-fit: cover */
.slider-obliquo .swiper-slide picture,
.slider-obliquo .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-obliquo span.swiper-pagination-bullet,
.slider-obliquo-persone span.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #fff !important;
    width: 15px;
    height: 15px;
    opacity: 1;
}

svg.swiper-navigation-icon {
    color: #fff;
}

.swiper-button-prev,
.swiper-button-next {
    top: unset !important;
    bottom: 0;
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 15px !important;
}

.swiper-button-prev {
    left: 50% !important;
    transform: translateX(-150px);

}

.swiper-button-next {
    right: 50% !important;
    transform: translateX(150px);

}

.slider-obliquo span.swiper-pagination-bullet-active,
.slider-obliquo-persone span.swiper-pagination-bullet-active {
    background: #fff !important;
}

.oliquo-slider-partner .cta-blu a {
    font-size: 36px !important;
    font-weight: var(--bold) !important;
}

.slider-obliquo-persone {
    padding-bottom: 80px !important;
}

.slider-obliquo-persone .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.slider-obliquo-persone .swiper-slide img {
    max-width: 300px;
}

.slider-obliquo-persone .swiper-slide .slider-text {
    text-align: center;
}

.slider-obliquo-persone p.cit {
    font-size: 25px !important;
    line-height: 105% !important;
    font-weight: 400;
    margin: 30px auto;
    max-width: 600px;
    color: #fff;
    text-align: center;
}

.slider-obliquo-persone .swiper-slide .slider-text p.desc {
    font-size: 20px !important;
    line-height: 23px !important;
}

.blocco-form-prefooter .testo-logo-prefooter .wpb_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* form */
#form {
    padding-top: 50px;
    padding-bottom: 50px;
}

.blocco-form-prefooter {
    padding: 15px;
}

.blocco-form-prefooter .vc_column-inner {
    padding-top: 0 !important;
}

/* ====== GRID LAYOUT ====== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 25px;
    align-items: start;
}

@media (max-width: 992px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ====== CAMPI BASE ====== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* due colonne uguali */
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.form-grid>* {
    width: 100%;
    box-sizing: border-box;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid input[type="url"],
.form-grid select,
.form-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.form-grid input[type="radio"],
.form-grid input[type="checkbox"] {
    width: auto;
    display: inline-block;
    margin-right: 8px;
}

.form-grid .radio-group,
.form-grid .checkbox-group,
.form-grid .links-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-grid input[type="file"] {
    width: 100%;
}

.form-grid .textarea-full,
.form-grid .wrapper-submit-privacy {
    grid-column: 1 / -1;
}


@media (min-width: 1024px) {
    /* .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    } */

}

@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-grid span,
.form-grid select {
    color: var(--col-blu) !important;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="tel"],
.form-grid textarea,
.form-grid select {
    min-height: 50px;
    resize: vertical;
    border-color: var(--col-blu) !important;
}

label.textarea-full {
    margin-top: 20px;
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
    color: var(--col-blu) !important;
}

.form-grid select {
    appearance: auto !important;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    border-color: var(--col-blu) !important;
}

/* ====== GRUPPI DI CAMPI ====== */
.radio-group,
.checkbox-group,
.links-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-group p,
.checkbox-group p,
.links-group p {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--col-blu);
    font-size: 14px;
}

.links-group input {
    margin-bottom: 0 !important;
}

.radio-group .form-grid label,
.checkbox-group label {
    display: flex;
    align-items: center;
}

/* ====== RADIO E CHECKBOX ====== */
.radio-group .wpcf7-list-item {
    display: inline-block;
    margin-right: 20px !important;
}

.wpcf7-list-item {
    display: block;
    margin: 0px !important;
}

.wpcf7-list-item-label {
    margin-left: 5px;
}

/* ====== TEXTAREA ====== */
.textarea-full {
    grid-column: 1 / -1;
}

/* ====== WRAPPER PRIVACY + SUBMIT ====== */
.wrapper-submit-privacy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* forza la larghezza piena */
    grid-column: 1 / -1;
    /* utile se resta dentro la grid principale */
    margin-top: 10px;
}

/* ====== PRIVACY ====== */
.privacy {
    font-size: 14px;
    flex: 1;
    /* permette al contenuto di usare spazio disponibile */
}

.privacy span,
.privacy a {
    font-size: 14px;
    color: var(--col-blu);
}

/* ====== BOTTONE ====== */
.submit-wrap {
    text-align: right;
}


/* LANDING B2C */
.blocco-preziosi .vc_column_container,
.blocco-preziosi {
    padding: 15px !important;
}

@media (max-width: 1024px) {

    .blocco-preziosi .vc_column_container,
    .blocco-preziosi {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

.testo-fixed-img-wrapper {
    position: relative;
}

p.testo-fixed-img {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    border-top: 1px solid;
    padding-top: 10px;
    width: calc(100% - 30px);
    font-weight: 600;
    font-size: 22px;
}

.sec-arancione p.leading-relaxed {
    font-size: 22px !important;
    line-height: 26px !important;
}

.bottom-footer-b2c figure,
.bottom-footer-b2c figure * {
    width: 100% !important;
}

.bottom-footer-b2c p.info,
.bottom-footer-b2c .info span {
    text-align: left;
    display: block;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.bottom-footer-b2c .info,
.bottom-footer-b2c .info a {
    color: #bbbbbd !important;
}

.bottom-footer-b2c .info-dx span {
    color: #fff !important;
}

.bottom-footer-b2c .info-dx img {
    max-width: 180px;
}

.footer-top-b2c {
    border-bottom: 1px solid #fff;
    padding-bottom: 30px;
}

@media (max-width: 1024px) {
    .sec-arancione p.leading-relaxed {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .sec-arancione img {
        max-width: 270px !important;
    }

    .bottom-footer-b2c .info-dx {
        margin-top: 20px;
    }

    .bottom-footer-b2c .info-dx span {
        font-size: 12px !important;

    }

}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .wrapper-submit-privacy {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .submit-wrap {
        text-align: left;
    }
}

/* ====== NOTE ====== */
p.form-note {
    font-size: 14px !important;
    margin-top: 10px;
    color: var(--col-blu);
    font-weight: 400;
}

/* footer */
.footer-col-left *,
.footer-col-center *,
.footer-col-right *,
.bottom-footer * {
    color: var(--col-bianco) !important;
    font-size: 16px !important;
    margin: 0;
}

.footer-col-left,
.footer-col-center,
.footer-col-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col-left {
    padding-left: 20px;
}

.footer-col-right {
    padding-right: 20px;
}

.footer-col-center a {
    font-weight: 700;
}

.bottom-footer {
    padding: 30px 0;
}

.bottom-footer p {
    text-align: center;
    display: block;
    font-size: 11px !important;
    font-weight: 400 !important;
}


@media (min-width: 1024px) {
    .footer-col-right {
        justify-content: flex-end;
    }
}

@media (max-width: 1024px) {

    .text-preslider,
    .slider-obliquo .slider-text {
        padding: 0 15px;
    }

    .title-landing {
        width: 100%;
    }

    .title-landing h1 {
        font-size: 22px !important;
        line-height: 28px !important;
        max-width: 300px;
        margin: auto;

    }

    .logo-obliquo {
        width: 80%;
        margin: auto;
    }

    .logo-hero {
        right: 50%;
        transform: translateX(50%);
    }

    .cta-hero {
        top: 65%;
        left: 0;
        transform: translate(50%, 0%);
    }

    .blocco-counter .stats-desc>div {
        font-size: 80px !important;
    }

    .blocco-counter {
        padding-top: 100px;
    }

    .sezione-bg-counter {
        padding-top: 30px;
    }

    div.blocco-counter .wpb_column .wpb_wrapper {
        padding-bottom: 20px !important;
    }

    div.blocco-counter .wpb_column:last-child .wpb_wrapper {
        padding-bottom: 0px !important;
    }

    .oliquo-slider-partner .vc_column-inner {
        padding-top: 0 !important;
    }

    .blocco-designer .cta-blu {
        padding-left: 15px;
        margin-top: 30px;
    }


    .footer-col-center {
        display: block;
    }

    .footer-col-left,
    .footer-col-center,
    .footer-col-right,
    .bottom-footer {
        padding: 15px;
    }

    .bottom-footer {
        padding-bottom: 50px;
    }

    .bottom-footer p {
        text-align: left;
    }

    .page-template-obliquo .slider-obliquo h3,
    .page-template-obliquo .slider-obliquo span,
    .page-template-obliquo .slider-obliquo p {
        font-size: 24px !important;
        line-height: 28px !important;
    }


}