input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


* {
    transition: 0.5s;
}

input,
select {
    cursor: pointer;
}

html,
body {

    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    flex-direction: column;

    font-size: 20px;
    font-family: "Jost", arial;

}


.fascia1 {
    background: url(sfondo.jpg) no-repeat;
    background-size: cover;
    margin: 0;
    padding: 2% 2%;
}

/*
FONT:
https://fonts.google.com/specimen/Jost


COLORI:
Nero: #1f2121
Verde: #1cbf44
Grigio: #efefef
Arancione: #f49300
Blu box #163a57
Blu url: #025dbe*/

.testo_sfondo span {
    color: white;
    background-color: #f49300;
    padding: 3px;
    padding-inline: 10px;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: none;
    display: block;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 2%;
    width: fit-content;
}

.testo_sfondo {
    width: fit-content;
    margin: 4.7%;
    color: WHITE;
    font-size: 1.6em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    margin-top: 10%;
}

h1 {
    font-size: 2em;
    text-align: center;
    width: 100%;
    margin: 2% auto;
    display: block;
    ;
}

.t {
    font-size: 1.3em;
    text-align: center;
    width: 66%;
    margin: 2% auto;
    display: block;
    margin-top: 0%;
}





.cont_step {
    width: 70%;
    border-radius: 1em;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    display: block;
    margin: 0 auto;
    padding: 1%;
    min-width: 1000px;
    --border: 0.5px solid gray;
    margin: 0 auto;
    margin-top: 1em;
    margin-top: -5%;
    background: white;

    padding-bottom: 2%;

}



.step {
    transition: all 0.4s ease;
}

.hidden {
    display: none;
}

.options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.reg_form,
.option {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}

.option:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #1857c6;
    /* blu intenso */
    color: white;
}

.option:hover img {
    filter: brightness(0) invert(1);
    /* rende l'icona bianca */
}

.reg_form h2 {
    margin-bottom: 0;
    margin: 0;

}


#offerta img {
    display: block;
    margin: 0 auto;
}

.option:hover .bottone {
    color: #1857c6;
    background: white;
}

.step {
    opacity: 1;
    transition: opacity 0.5s ease;
    margin-bottom: 2%;
    text-align: center;
}

.step.fade-out {
    opacity: 0;
}

.step.fade-in {
    opacity: 1;
}


.no-autonomi-btn {
    border: 2px solid orange;
    color: orange;
    background-color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    transition: all 0.3s ease;
    width: fit-content;
    margin: 0 auto;
    display: block;
}

.no-autonomi-btn .linea-sinistra {
    width: 2px;
    height: 20px;
    background-color: black;
    display: inline-block;
}


.form_iniziale {

    text-align: center;

}


.input {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    background-color: #efefef;
    border-radius: 6px;
    border: 0px;
    padding: 1.5% 2%;
    font-size: 1.3em;
}

.progress-container {
    margin-top: 0;
}

.progress-container {
    width: 85%;
    max-width: 500px;
    height: 17px;
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto;
    PADDING: 5px;
    margin-bottom: 2%;

    display: none;
}

.progress-bar {
    height: 100%;
    width: 10%;
    background: #f49300;

    border-radius: 999px;
    transition: width 0.4s ease-in-out;
}

.pulsante_verde {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    background-color: #efefef;
    border-radius: 6px;
    border: 0px;

    font-size: 1.3em;
    color: white;
    text-align: center;
    padding: 20px;
    border: 0px;
    background-color: limegreen;
    font-weight: 200;
    margin: 2% auto;
    display: block;

}

.sotto_form {
    display: flex;
    width: 90%;
    MARGIN: 0 AUTO;
    TEXT-ALIGN: CENTER;
    margin-top: 3%;
}

.sotto_form div {
    width: 25%;
}

.sotto_form img {
    width: 20%;
    vertical-align: middle;
    margin-right: 2%;
    top: -7%;
    POSITION: RELATIVE;
}


.cont_ele {
    display: flex;
    width: 80%;

    margin: 2% auto;

}

.ele {
    width: 27%;
    background: #163a57;
    color: white;
    padding: 1%;
    margin: 2% auto;

    text-align: left;
    border-radius: 16px;
    padding-left: 2%;
}

.ele img {
    margin: 0 auto;
    width: 90%;
    display: block;
}

.ele h2 {
    margin-bottom: 0;
    margin-top: 0;

}

.ele h2,
.ele ul {
    margin-left: 5%;
    margin-top: 0;
}

.lungo {
    width: fit-content;
    padding: 1% 2%;
    font-weight: normal;
    max-width: 1000px;
}

.corto3 {
    width: 28%;
}

.corto {
    width: 30%;
    padding: 2% 2%;
    font-weight: normal;
    max-width: 1014px;
    display: inline-block;
}

.indietro {
    width: 11%;
}

#email,
#telefono,
#professione {
    width: 61%;
    padding: 20px;
    max-width: 1000px;
}

#telefono {
    margin-bottom: 1%;
}

#comune {
    width: 100%;
    padding: 16px;
    margin: 0;
}

#cap {
    width: 30%;
    display: inline;
}

#cap_select {
    display: inline-block;
    width: 30%;
    /* margin-right: -19%; */
}

h2 {
    text-transform: uppercase;
}

.step6 .avanti {
    width: 42% !important;

}


.piva {
    WIDTH: 58%;
    TEXT-ALIGN: LEFT;
    FONT-SIZE: 12PX;
    MARGIN: 9px AUTO;
}

.corto2 {
    width: 33%;
    padding: 1.5% 2%;
    font-weight: normal;
    max-width: 1014px;
    display: inline-block;
}

.data {
    margin: 0%;
    width: 20%;
    display: inline-block;
    padding: 20px;
}

.footer {
    text-align: center;
    padding: 4%;
    padding-top: 2%;
    box-sizing: border-box;
    background-color: #efefef;
    font-size: 14px;
    font-family: arial;
}

.step h3 {
    font-weight: normal;
}

.step h2 {
    margin-bottom: 0;
}

.step .options {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.step-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

.step-buttons button {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 23px;
    padding: 12px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Pulsante indietro */
.step-buttons .indietro {
    background-color: white;
    color: #28c041;
    border: 2px solid #28c041;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-buttons .indietro::before {

    font-size: 18px;
    margin-right: 8px;
}

.ele h2 {
    margin: 1% auto;
    FONT-SIZE: 1.2EM;
    TEXT-ALIGN: CENTER;
}

.hidden {
    display: none;
}

.avanti {
    width: 37%;
}

#step6 .avanti {
    width: 60%;
}

/* Pulsante avanti */
.step-buttons button:not(.indietro) {
    background-color: #28c041;
    color: white;
    padding: 20px
}

.step-buttons button:hover {
    opacity: 0.9;
}

.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.input-euro-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.input-euro-wrapper .euro-symbol {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    color: #444;
    pointer-events: none;
}

.importo-euro {
    padding: 20px;
    padding-left: 10%;
    /* spazio per il simbolo € */
}


@media screen and (max-width: 1000px) {

    .cont_step {
        min-width: 300px;
        width: 95%;
        padding-top: 4%;
    }

    .sotto_form {
        flex-wrap: wrap;
    }

    .sotto_form div {
        width: 50%;
        text-align: center;
        font-size: 20px;
        margin: 5% auto;
    }

    .sotto_form img {
        display: block;
        margin: 0 auto;
    }


    #importo {
        padding-left: 10%;
        font-size: 20px;
    }

    .pagina {
        padding-top: 3%;
    }

    .fascia1 {
        margin: 0;
        background: url(moby_aper.jpg) no-repeat;
        height: 601px;
        background-size: 100%;
    }



    .testo_sfondo {
        display: none;
    }

    h1 {
        width: 90%;
        margin: 5% auto;
        font-size: 25px;
    }

    .cont_ele {
        display: block;
    }

    .ele {
        width: 86%;
        margin: 9% auto;
        text-align: center;
        PADDING-BOTTOM: 20PX;
    }

    .ele ul {
        margin-left: 5%;
        margin-top: 0;
        margin: 0 auto;
        text-align: left;
    }

    .ele h2 {
        margin: 1% auto;
        FONT-SIZE: 20PX;
        TEXT-ALIGN: CENTER;
    }

    .t {
        font-size: 20px;
        text-align: center;
        width: 66%;
        margin: 6% auto;
        display: block;
        margin-top: 0%;
    }

    .lungo {
        width: 85%;
        padding: 1% 2%;
        font-weight: normal;
        max-width: 998px;
        font-size: 25px;
    }

    .input {
        padding: 10px;
        width: 80%;
    }

    .step-buttons .indietro {
        font-size: 30px;
        padding: 0px;
    }

    .step .options {
        width: 100%;
    }

    .corto {
        width: 40%;
        padding: 10px;
        font-size: 20px;
    }

    .indietro {
        width: 25%;
    }

    .avanti {
        width: 50%;
    }

    #email,
    #telefono,
    #professione {
        width: 81%;
        padding: 10px;
        max-width: 1000px;
        font-size: 20px;
    }

    .data {
        margin: 0%;
        width: 31%;
        display: inline-block;
        padding: 10px;
        font-size: 20px;
        padding-left: 2px;
    }

    .p {
        font-size: 0.7em;
    }

    .cont_step {
        margin-bottom: 4%;
    }

    .t {
        width: 90%;
    }

    .form_iniziale {
        width: 95%;
        margin: 0 auto;
    }


    .avanti {
        width: 54%;
        background-color: #28c041;
        color: white;
        padding: 10px;
        font-size: 20px;
        height: fit-content;
    }

    .step-buttons button:not(.indietro) {
        background-color: #28c041;
        font-size: 20px;
        color: white;
        padding: 10px;
        height: fit-content;
    }

    .input-euro-wrapper .euro-symbol {
        position: absolute;
        left: 11%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.3em;
        color: #444;
        pointer-events: none;
    }


    .pulsante_verde {
        width: 80%;
        max-width: 355px;
        margin: 0 auto;
        display: block;
        background-color: #efefef;
        border-radius: 6px;
        border: 0px;
        font-size: 20px;
        color: white;
        text-align: center;
        padding: 10px;
        border: 0px;
        background-color: limegreen;
        font-weight: bold;
        margin: 5% auto;
        display: block;
    }

    .step-buttons {
        display: flex;
        gap: 9px;
        justify-content: center;
        margin-top: 25px;
    }

    .step h2 {
        margin-bottom: 0;
        font-size: 24px;
    }

    step-buttons .indietro {
        background-color: white;
        color: #28c041;
        border: 2px solid #28c041;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .piva {
        WIDTH: 87%;
        TEXT-ALIGN: LEFT;
        FONT-SIZE: 12PX;
        MARGIN: 9px AUTO;
    }

    #cap {
        width: 45%;
        display: inline;
        padding: 7px;
    }

    #comune {
        width: 100%;
        padding: 7px;
        margin: 0;
    }

    #cap_select {
        display: inline-block;
        width: 45%;
        /* margin-right: -19%; */
    }

    #step6 .avanti {
        width: 90%;
    }
}

@media screen and (max-width:500px) {
    .fascia1 {
        margin: 0;
        background: url(moby_aper.jpg) no-repeat;
        height: 32%;
        background-size: 100%;
    }

}

@media screen and (max-width:450px) {
    .fascia1 {
        margin: 0;
        background: url(moby_aper.jpg) no-repeat;
        height: 27%;
        background-size: 100%;
    }
}

@media screen and (max-width:400px) {
    .fascia1 {
        margin: 0;
        background: url(moby_aper.jpg) no-repeat;
        height: 32%;
        background-size: 100%;
    }
}