/* Stili generali */
body {
    font-family: "Kumbh Sans", sans-serif;
    background-color: white;
    font-size: 1rem;
}

a {
    color: #5514F5;
    text-decoration: underline
}


.btn {
    margin: 0.8rem 0rem;
    border-radius: 4px;
}


/*h1 {
    font-size: 1.7rem;
}

h2 {
    font-size: 1.35rem;
}*/

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.2rem;
}

.font13 {
    font-size: 0.813rem !important;
}

.font14 {
    font-size: 0.875rem !important;
}

.font11 {
    font-size: 0.688rem !important;
}


.font-titolo{
    font-size: 1.7rem;
}

.font-sottotitolo{
    font-size: 1.125rem;
}

.font-upload{
    font-size: 1rem;
}

.font-tips{
    font-size: 0.875rem;
}




.medium {
    font-weight: 600 !important;
}


.asterisco {
    color: #000000;
    text-decoration: underline
}

.hidden,
.hidden-row {
    display: none;
}

.main-container,
.main-container2 {
    /*max-width: 856px;*/
    margin: 0 auto;

}

.main-container {
       padding: 10px 10px;
}

.center-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0rem 5rem;
    box-sizing: border-box;
}

.shrink-container {
    width: 84%;
    margin: 0 auto;
}

.white-container,
.white-bg {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    width: 100%;
    margin: 0.8rem 0rem !important;
}

.lightgrey-bg {
    background: #FAFAFA;
}

.text-center {
    text-align: center;
}

.button-container {
    text-align: center;
    margin: 20px 0;
}

.custom-table,
.dropzone {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.loader {
    width: 50px;
    /*--b: 8px;*/
    aspect-ratio: 1;
    border-radius: 30%;
    padding: 1px;
    background: conic-gradient(#0000 10%, #5514F5) content-box;
    mask:
        repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
        radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
    mask-composite: intersect;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
        radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
    -webkit-mask-composite: source-over;
    animation: l4 1s infinite steps(10);
    margin-bottom: 10px;
}

@keyframes l4 {
    to {
        transform: rotate(1turn)
    }
}

/* Layout principale */
.charts-container {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0.5rem auto;
}

.chart-text-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.chart-text {
    flex: 0 0 55%;
    padding-right: 1rem;
    font-size: 0.9em;
}

.chart-wrapper {
    flex: 0 0 40%;
    padding: 0.25rem;
}

#speseChart {
    width: 100%;
    height: auto;
}

.legend-box {
    width: 100%;
    margin-top: 1rem;
}

.legend-box ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.legend-box ul li {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.85em;
}

.legend-box ul li span {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    display: inline-block;
}

/* Pulsanti e bottoni */
.btn-scarica-pdf,
.btn-offer,
.btn-outline-primary,
.btn-scarica-pdf:hover,
.btn-offer:hover,
.btn-outline-primary:hover {
    background-color: #5514F5;
    color: white;
    font-size: 20px;
    border: none;
	font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    padding: 0.5rem 3rem;
    text-transform: uppercase;
	margin-bottom: 5px;
}

.btn-scarica-pdf:hover,
.btn-offer:hover,
.btn-outline-primary:hover {
   /* background-color: #703cf1;
    color: white;
    border-radius: 4px;*/
}

.btn-outline-offer {
    border: 2px solid #5514F5;
    color: #5514F5;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
    font-weight: bold;
}

.btn-outline-offer:hover {
    border-color: #703cf1;
}


/* Colori di evidenziazione */
.mark-blue {
    background-color: #cce5ff;
}

.mark-green {
    background-color: #d4edda;
}

.mark-yellow {
    background-color: #fff3cd;
}

.mark-orange {
    background-color: #ffac63;
}

.mark-red {
    background-color: #f8d7da;
}

.mark-purple {
    background-color: #e6e6fa;
}

.mark-energia {
    background-color: #FFEFB4;
}

.mark-trasporto {
    background-color: #CCB8FC;
}

.mark-oneri {
    background-color: #F3D1FB;
}

.mark-altro {
    background-color: #FFC1C1;
}

.mark-rai {
    background-color: #F8D7DA;
}

.mark-sociale {
    background-color: #D4EDDA;
}

.mark-fattura {
    background-color: #e6e6fa;
}

.text-green {
    color: #00B894;
    text-decoration: none;
}

.text-violet {
    color: #5514F5;
    text-decoration: none;
}

.text-white {
    color: #ffffff;
    text-decoration: none;
}

.text-black {
    color: #000000;
}

.text-rosa {
    color: #E0348E;
}


/* Dropzone e upload */
.dropzone {
    border-radius: 10px;
    border: 2px dashed #5514F5;
    color:  #5514F5;
}

.dz-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.dz-image img,
.dz-image canvas {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pdf-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    color: #999;
    font-size: 24px;
    font-weight: bold;
}

/* Bottoni di consumo */
.consumption-buttons {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.consumption-button {
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.consumption-button:not(:last-child) {
    border-right: 1px solid #ccc;
}

.consumption-button.active {
    background-color: #5514F5;
    color: white;
}

.consumption-info {
    margin-bottom: 10px;
}

.consumption-value {
    color: #5514F5;
}

.savings {
    background-color: #EBF7F2;
    padding: 15px;
    border-radius: 5px;
}

.savings-value {
    color: #5514F5;
    font-weight: bold;
}

/* Navigazione */
.navigation,
.navigation1 {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.navigation1 {
    justify-content: flex-end;
}

/* Stili Home */
.gradient-bg {
    background: linear-gradient(90deg, #FF5F19 2.67%, #E0348E 27.95%, #5514F5 66.84%, #C715EA 99.9%);
}

.text-gradient {
    background: linear-gradient(90deg, #FF5F19 2.67%, #E0348E 27.95%, #5514F5 66.84%, #C715EA 99.9%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.hero-text {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.2;
}

.partners-section img {
    max-width: 120px;
    margin: 1rem;
}

/* Form Legal */
.tabella-registrazione {
	padding: 0 10%;
}
.uploadSection_container {
	padding: 30px 30px 10px;
    background-color: #fafafa;
    border-radius: 10px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
/* Form */
.login-card {
    width: 32rem;
    background-color: transparent;
    border: none;
}

input::placeholder {
    opacity: 0.5 !important;
}

input:focus::placeholder {
    opacity: 0 !important;
}

.form-label {
    font-weight: bold;
    font-size: 1rem;
}
.form-check-label,
.form-check-label:hover,
.form-check-label:visited {
	color: #21252;
}
.form-check label {
	color: #6c6c6c !important;
}
.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 25px;
    width: 25px;
    background-color: #28a745;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.card-option.selected .checkmark {
    display: flex;
}
.invalid-feedback {
	font-size: 12px !important;	
}
.invalid-feedback a,
.invalid-feedback a:visited {
	color: #dc3545
}
/* Sezione offerte */
.logo {
    width: 100px;
    padding-right: 15px;
}

.logo50 {
    width: 50%;
}

.logo80 {
    width: 80%;
}

.logoia {
    width: auto;
}


.circle-red,
.circle-white {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.circle-red {
    background-color: #E0348E;
}

.circle-white {
    background-color: white;
}

.white-text,
.red-text {
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.white-text {
    color: white;
}

.red-text {
    color: #E0348E;
}

.card-body,
.card-offer,
.card-offer-white {
    color: black;
    border-radius: 10px;
}

.card-body {
    background-color: white;
}

.card-offer,
.card-offer-white {
    padding: 1.5rem;
    border: 1px solid #CCCCCC;
}

.card-offer-white {
    background-color: #fff;
}

.steps {
    text-align: left;
}

.steps .step {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    color: white;
}

.steps .step i {
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 1.5rem;
    background-color: white;
    color: #E0348E;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-style: normal !important;
}

.steps .step h3 {
    font-size: 1.2rem;
    margin: 0;
    padding-left: 0.1rem;
}

.gradient-border-box,
.border-box {
    width: 80%;
    border-radius: 10px;
    padding: 0.2rem;
    margin: auto;
}

.gradient-border-box {
    background: linear-gradient(90deg, #FF5F19 2.67%, #E0348E 27.95%, #5514F5 66.84%, #C715EA 99.9%);
}

.border-box {
    border: 1px solid #CCCCCC;
}

.gradient-border-content {
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 10px;
}

/* Funnel */
.progress-container {
    padding: 20px 0;
}

.progress-container .progress {
    height: 5px;
    margin-bottom: 10px;
}

.progress-step {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.progress-step .step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-step .step span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f79e33;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.question-container {
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
    /*width: 80%;*/
    margin: auto;
    padding: 1.5rem 3rem;
    box-sizing: border-box;
}

.info-list {
    padding-left: 0;
}

.info-list li {
    list-style: none;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.info-list li svg {
    margin-right: 10px;
    fill: #5514F5;
    width: 24px;
    height: 24px;
}

/* Slider */
:root {
    --marquee-width: 100%;
    --marquee-height: 100px;
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.partners-section {
    overflow: hidden;
}

.marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.marquee:before,
.marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
}

.marquee:before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.marquee:after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
    padding: 0;
    margin: 0;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
    }
}

.marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 100%;
}

.marquee-content li img {
    width: auto;
    height: 60px;
    object-fit: contain;
}

.tooltip {
    color: #000;
}

#billDetailsAccordion .accordion-body {
    font-size: 1rem;
}

#billDetailsAccordion .accordion-body table {
    font-size: 0.9rem;
}

#billDetailsAccordion .accordion-button {
    font-size: 1.1rem;
}

form h5 {
    font-weight: 600;
}

.form-label {
    font-weight: normal;
    font-size: 12px;
    padding-left: 13px;
    display: block;
}

.form-control {
    padding: 10px 13px;
}

.form-check,
.form-check2 {
    display: block;
    /*padding: 10px 40px;*/
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 16px;
}

.btn-offer-secondary,
.btn-offer-secondary:hover,
.btn-offer-secondary:visited,
.btn-offer-secondary:active {
    color: #B1AFAF;
    padding: 0.5rem 1rem 0.5rem 0;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 4px;
}

.mb-3,
.iti {
    margin-bottom: 8px !important;
}

.iti {
    position: relative;
    display: inline-block;
    width: 100% !important;
}

.progress-container .container {
    padding: 0;
}

.navigation a {
    text-decoration: none;
}

.btn-home {
    background-color: #5514F5;
    color: white;
    font-size: 0.875rem;
    border-radius: 4px;
    display: inline;
    width: auto;
    margin: 0rem 1rem;
    margin-top: 0;
}

.btn-home:hover {
    background-color: #703cf1;
    color: white;
}





.grid-chart {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: column;
    gap: 1em 1em;
    grid-template-areas:

        "chart-description chart-description chart"
}


.chart {
    grid-area: chart;
}

.chart-description {
    grid-area: chart-description;
    padding-top: 1rem;
}

.card-offerta {
    padding:1rem 0rem; 
    width:90%; 
    margin: auto; 
    font-size: 1.1rem;
}



.grid-offerta {
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    padding: 2rem 1rem;
    margin: 2rem 1rem;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em 1em;
    grid-template-areas:
        "loghetto titolo titolo promo"
        "prezzo prezzo prezzo promo"
        "dettaglio dettaglio dettaglio CTA";
}

.loghetto {
    grid-area: loghetto;
    justify-self: start;
    align-self: center;
}

.prezzo {
    grid-area: prezzo;
    align-self: center;
}

.titolo {
    grid-area: titolo;
    justify-self: start;
    align-self: center;
}

.promo {
    grid-area: promo;
    align-self: start;
}


.dettaglio {
    grid-area: dettaglio;
    align-self: center;
}


.CTA {
    grid-area: CTA;
    align-self: start;
    justify-self: center;
}


.modal-body {
   /* padding: 2rem;*/
}





/* nuova grid offerta*/

.tabella-offerta {  display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;  /* tutti auto per un migliore controllo */
    grid-auto-columns: 1fr;
    gap: 15px 5px;  /* aumentato gap verticale */
    grid-auto-flow: column;
    width: 100%;
  grid-template-areas:
    "logo titolo-offerta titolo-offerta titolo-offerta risparmio risparmio"
    ". attivazione attivazione attivazione attivazione ."
    "divider1 divider1 divider1 divider1 divider1 divider1" 
    "costo-orario costo-orario costi-fissi costi-fissi costi-fissi costi-fissi"
    "divider2 divider2 divider2 divider2 divider2 divider2" 
    "promo-1 promo-1 promo-2 promo-2 promo-2 promo-2"
    "divider3 divider3 divider3 divider3 divider3 divider3" 
    "cta cta cta cta cta cta";
}

.tabella-offerta__logo { grid-area: logo; }
.tabella-offerta__titolo { grid-area: titolo-offerta; }
.tabella-offerta__attivazione { grid-area: attivazione; }
.tabella-offerta__risparmio { justify-self: end; grid-area: risparmio; text-align: right; }
.tabella-offerta__costo-orario { grid-area: costo-orario; }
.tabella-offerta__costi-fissi { grid-area: costi-fissi; }
.tabella-offerta__promo-1 { grid-area: promo-1; }
.tabella-offerta__promo-2 { grid-area: promo-2; }
.tabella-offerta__cta { justify-self: end; grid-area: cta; }
.tabella-offerta__divider1 { border-bottom: 1px solid #98929a; grid-area: divider1; }
.tabella-offerta__divider2 { border-bottom: 1px solid #98929a; grid-area: divider2; }
.tabella-offerta__divider3 { border-bottom: 1px solid #98929a; grid-area: divider3; }
.tabella-offerta__divider4 { border-bottom: 1px solid #98929a; grid-area: divider4; }
.tabella-offerta__divider5 { border-bottom: 1px solid #98929a; grid-area: divider5; }
.tabella-offerta__documenti { grid-area: documenti; }
.tabella-offerta__pagamento { grid-area: pagamento; }


.tabella-offerta-dettaglio {  display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;  /* tutti auto per un migliore controllo */
    grid-auto-columns: 1fr;
    gap: 15px 5px;  /* aumentato gap verticale */
    grid-auto-flow: column;
    width: 100%;
  grid-template-areas:
    "logo titolo-offerta titolo-offerta titolo-offerta risparmio risparmio"
    ". attivazione attivazione attivazione risparmio risparmio"
    "divider1 divider1 divider1 divider1 divider1 divider1" 
    "costo-orario costo-orario costi-fissi costi-fissi costi-fissi costi-fissi"
    "divider2 divider2 divider2 divider2 divider2 divider2" 
    "promo-1 promo-1 promo-2 promo-2 promo-2 promo-2"
    "divider3 divider3 divider3 divider3 divider3 divider3"
    "pagamento pagamento pagamento pagamento pagamento pagamento"
    "divider4 divider4 divider4 divider4 divider4 divider4" 
    "documenti documenti documenti documenti documenti documenti"
    "divider5 divider5 divider5 divider5 divider5 divider5" 
    "cta cta cta cta cta cta";
}

.result_page_superself_items {
    background-color: #ffffff;
    padding: 30px;
    border: 2px solid #e0e0fd;
    margin: 20px 0;
    border-radius: 30px;
}




.btn-offer:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    background: #ddd;
}

.btn-offer:disabled:hover {
    opacity: 0.3;
    background: #ddd;
}

/* Stili per i messaggi di alert */
.alert {
    border-radius: 8px;
    font-size: 0.95rem;
}

.alert-warning {
    border-left: 4px solid #ffc107;
}

.alert-info {
    border-left: 4px solid #17a2b8;
}

.alert-danger {
    border-left: 4px solid #dc3545;
}










/* add ottiimzzazione mobile */

.contenitore-home {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
    /*width: 80%;*/
    color: #fff;
}


@media (min-width: 991px) {
    .text-short {
        display: none;
    }
}

/* Versione mobile */
@media (max-width: 990px) {

    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1rem;
    }


    .font-titolo{
        font-size: 1.5rem;
        line-height: 1.6rem;
        margin-bottom: 5px;
    }
    
    .font-sottotitolo{
        font-size: 1rem;
    }

    .font-upload{
        font-size: 0.875rem !important;
    }

    .font-tips{
        font-size: 0.688rem !important;
    }
    
    .logoia{
        width: 90%;
    }


    .charts-container {
        flex-direction: column;
        align-items: center;
    }

    .chart-text,
    .chart-wrapper {
        flex: 1 1 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .chart-wrapper {
        padding-top: 0;
    }

    :root {
        --marquee-elements-displayed: 3;
    }

    .marquee:before,
    .marquee:after {
        width: 0.3rem;
    }

    .question-container {
        width: 100%;
        padding: 10px;
    }

    footer {
        padding: 30px;
    }

    .btn-home {
        width: 85%;
        display: block;
        margin: 1rem 0rem;
        padding: 1rem 0rem;
        border-radius: 4px;
    }

    .btn-home:hover {
        width: 85%;
        box-shadow: 2px 2px 4px #000000;
    }

    .center-container {
        padding: 0;
    }

    .text-full {
        display: none;
    }

    .p-5 {
        padding: 0rem 1rem !important;
    }

    .hide {
        display: none;
    }

    .centra {
        text-align: center;
        justify-content: center;
    }

    .settanta {
        width: 70%;
    }




    .grid-chart {
        display: block;
        padding: 1rem;

    }

    .chart {
        max-height: 30%;
    }


    .grid-offerta {
        background-color: #ffffff;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        padding: 2rem 1rem;
        margin: 2rem 1rem;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em 1em;
        grid-template-areas:
            "loghetto loghetto promo"
            "titolo titolo titolo"
            "prezzo prezzo prezzo"
            "CTA CTA CTA"
            "dettaglio dettaglio dettaglio";
    }

    .circle-red,
    .circle-white {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }


    .prezzo h5 {
        font-size: 0.9rem !important;
    }

    .h4 {
        font-size: 0.9rem !important;
    }

    .CTA {
        grid-area: CTA;
        align-self: center;
    }


    .tabella-offerta {  display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;  /* tutti auto per un migliore controllo */
        grid-auto-columns: 1fr;
        gap: 15px 5px;  /* aumentato gap verticale */
        grid-auto-flow: column;
        width: 100%;
      grid-template-areas:
        "logo logo logo risparmio risparmio risparmio"
        "titolo-offerta titolo-offerta  titolo-offerta titolo-offerta titolo-offerta titolo-offerta"
        "attivazione attivazione attivazione attivazione attivazione attivazione  "
        "divider1 divider1 divider1 divider1 divider1 divider1" 
        "costo-orario costo-orario costo-orario costo-orario costo-orario costo-orario"
        "costi-fissi costi-fissi costi-fissi costi-fissi costi-fissi costi-fissi"
        "divider2 divider2 divider2 divider2 divider2 divider2" 
        "promo-1 promo-1 promo-1 promo-1 promo-1 promo-1"
        "promo-2 promo-2 promo-2 promo-2 promo-2 promo-2"
        "divider3 divider3 divider3 divider3 divider3 divider3" 
        "cta cta cta cta cta cta";
    }


    .tabella-offerta-dettaglio {  display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto;  /* tutti auto per un migliore controllo */
        grid-auto-columns: 1fr;
        gap: 15px 5px;  /* aumentato gap verticale */
        grid-auto-flow: column;
        width: 100%;
      grid-template-areas:
        "logo logo logo risparmio risparmio risparmio"
        "titolo-offerta titolo-offerta  titolo-offerta titolo-offerta titolo-offerta titolo-offerta"
        "attivazione attivazione attivazione attivazione attivazione attivazione  "
        "divider1 divider1 divider1 divider1 divider1 divider1" 
        "costo-orario costo-orario costo-orario costo-orario costo-orario costo-orario"
        "costi-fissi costi-fissi costi-fissi costi-fissi costi-fissi costi-fissi"
        "divider2 divider2 divider2 divider2 divider2 divider2" 
        "promo-1 promo-1 promo-1 promo-1 promo-1 promo-1"
        "promo-2 promo-2 promo-2 promo-2 promo-2 promo-2"
        "divider3 divider3 divider3 divider3 divider3 divider3"
        "pagamento pagamento pagamento pagamento pagamento pagamento"
        "divider4 divider4 divider4 divider4 divider4 divider4" 
        "documenti documenti documenti documenti documenti documenti"
        "divider5 divider5 divider5 divider5 divider5 divider5" 
        "cta cta cta cta cta cta";
    }
    
}
@media (max-width: 767px) {
    :root {
        --marquee-height: 60px;
    }
	.uploadSection_container {
		padding: 10px;
	}
	.tabella-registrazione {
		padding: 0 10px;
	}
	.custom-file-button .input-group-text {
		padding: 0.5rem !important;
		font-size: 12px;
	}
	.btn-scarica-pdf, 
	.btn-offer, 
	.btn-outline-primary, 
	.btn-scarica-pdf:hover, 
	.btn-offer:hover, 
	.btn-outline-primary:hover {
		padding: 0.5rem 1rem;
	}
	.steps .step i {
		top: -9px;
		left: -6px;
	}
	.logoai {
		width: 180px;
	}
	.logotrustpilot {
		height: 13px !important;
	}
	.carousel {
		margin-bottom: 0;
	}
	#analyzeButton {
		margin-top: 0;
	}
	.marquee-content li img {
		height: 40px;
	}
	.partners-section img {
		max-width: 100px;
		margin: 0rem;
	}
	#nome {
		margin-bottom: 5px;
	}
}