/* ==========================================================================
   1. FONTS (PESI STATICI)
   ========================================================================== */
/* Montserrat Light */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300; /* Light */
  font-display: swap;
  src: url('../fonts/Montserrat-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400; /* Medium */
  font-display: swap;
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
}

/* Montserrat SemiBold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600; /* SemiBold */
  font-display: swap;
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200; /* Extra Light */
  font-display: swap;
  src: url('../fonts/inter-v20-latin-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300; /* Extra Light */
  font-display: swap;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; /* Regular */
  font-display: swap;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700; /* Bold */
  font-display: swap;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;

}

/* Il blocco esterno che gestisce lo spazio bianco fisico */
.fascia-orizzontale-sito {
    /* py-5 nell'html crea lo stacco bianco sopra e sotto */
    overflow: hidden;
}
.fascia-orizzontale-sito {
    background-color: #ffffff !important;
    
    /* Questo gradiente crea sia la fascia che la sfumatura orizzontale */
    background-image: linear-gradient(90deg, #0166B2 0%, #d4e4f5 60%, #ffffff 100%) !important;
    
    /* Questo comando taglia il gradiente sopra e sotto, creando lo spazio bianco fisso */
    background-size: 100% 76%; /* 100% larghezza, 76% altezza della fascia azzurra */
    background-repeat: no-repeat !important;
    background-position: center center !important; /* Centra la fascia azzurra lasciando il bianco sopra e sotto */
    
    /* Spazio bianco reale sopra e sotto i box */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (max-width: 767px) {
    .fascia-orizzontale-sito {
        /* Rimuoviamo il gradiente */
        background-image: none !important;
        
        /* Se vuoi mantenere il bianco di fondo */
        background-color: #ffffff !important;
        
        /* Eventuale riduzione del padding se su mobile ti sembra troppo alto */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}
/*.font-montserrat {
    font-family: 'Montserrat', sans-serif; 
}*/


/* Scrivendo .lead.testo-gradiente-responsive diciamo al browser di disattivare il comando nativo di Bootstrap */


/* Titolo principale (il più importante) */
h1 {
    font-weight: 700 !important;
    color: #0166B2 !important;
    /* clamp(minimo, fluido, massimo) */
    font-size: 6vw !important;
}

/* Sottotitoli di sezione */
h2 {
    font-weight: 600 !important;
    color: #0d233a !important;
    font-size: 6vw !important;
}

/* Testi di supporto / Lead */
.lead {
    font-weight: 400 !important;
    font-size: 2.0rem !important;
}

.lead.testo-gradiente-responsive {
    font-weight: 400 !important;
    letter-spacing: -0.5px !important;
    color: #212529 !important; /* Ripristinato il colore scuro del testo */
    
    /* Questa formula crea il movimento continuo e liquido senza scatti */
    font-size: calc(1rem + 2.0vw) !important;
}

.section_descrition {
    font-weight: 400 !important;
    font-size: calc(1rem + 2.0vw) !important;
}
.privacy_marelli, 
.privacy_marelli p {    
    font-weight: 400 !important;
}

.dati_footer {
    color:white!important;
    font-size: calc(1rem + 1.5vw) !important;
}


/* Regola "migliorativa": vale SOLO da 768px in su (Tablet e Desktop) */
@media (min-width: 768px) {
    h1 {
    font-size: 2.6vw !important;
}
    h2 {
    font-size: 1.8vw !important;
}
    p {
    font-size: 1.45rem !important;
}
.lead.testo-gradiente-responsive {
    font-weight: 300 !important;
    font-size: 2vw !important;
    line-height: 1.3 !important;
}
.section_descrition {
    font-weight: 300 !important;
    font-size: 1.5rem !important;
}
.dati_footer p{
    color:#FFFFFF!important;
    font-size: calc(0.3rem + 1.1vw) !important;

}
.privacy_marelli, 
.privacy_marelli p {
    font-size: 1.1rem!important;      /* Riduce la dimensione del testo base */
    color: #333;
}

}



/* ==========================================================================
   STILI AGGIORNATI PER LA PAGINA NOLEGGIO (.servizi-page)
   ========================================================================== */

/* Ridimensioniamo leggermente i titoli delle sezioni (Noleggio bilance, ecc.) */
.servizi-page h4.elenco-titolo,
.servizi-page h3 {
    font-size: 1.20rem !important; /* Leggermente più compatto e armonioso */
    color: #0d233a !important;
}

/* Ingrandiamo i testi descrittivi interni e le voci dell'elenco */
.servizi-page .item-servizio span,
.servizi-page .descrizione-servizi {
    /* font-size: 1.15rem !important; Più grande e leggibile rispetto a prima */
    color: #4a5568 !important;
}

/* Evidenziamo bene le parole in grassetto (es. portate, tipologie di lame) */
.servizi-page .item-servizio strong {
   /*  font-size: 1.15rem !important; */
    font-weight: 700 !important;
    color: #2d3748 !important; /* Un tono più scuro per far risaltare i dati tecnici */
}

/* Adattiamo la dimensione delle icone a fianco dei testi grandi */
.servizi-page .item-servizio i {
    font-size: 1.2rem !important;
}

/* Stile per il Carousel */
.hero-carousel, .carousel-inner, .carousel-item {
    height: 100%;
}
    
.hero-carousel img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    }

    /* Pulsante CTA con angoli molto arrotondati */
.btn-custom {
    display: inline-block;
    padding: 12px 35px !important; /* Leggermente più largo per gli angoli tondi */
    white-space: nowrap;
    font-size: 1.1rem;
    background-color: #f8f9fa;
    color: #dc3545;
    border: none;
    text-decoration: none;
    border-radius: 50px; /* Angoli completamente arrotondati */
    font-weight: 400;
    transition: all 0.3s ease;
    }
    
.btn-custom:hover {
    transform: translateY(-3px); /* Effetto sollevamento */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    color: #dc3545;
    }

/* Fix per mobile */
@media (max-width: 767px) {
    .hero-container { height: auto; }
    .hero-carousel { height: 350px; }
    .hero-bg-gradient {
    /* Su mobile la sfumatura è meglio dall'alto verso il basso */
    background: linear-gradient(180deg, #a71d2a 0%, #dc3545 100%);
        }
    }
/* Footer con blu istituzionale pieno */
.footer-gradient {
    background-color: #0066b2 !important; /* Il tuo blu principale */
}

/* Campi input: Azzurro molto chiaro, quasi pastello */
.footer-form-input {
    background-color: #e3f2fd !important; /* Azzurro chiarissimo (Bootstrap info-100) */
    border: 1px solid #bbdefb !important; /* Bordo azzurro tenue */
    color: #0066b2 !important; /* Testo blu scuro per contrasto */
    transition: all 0.3s ease;
}

/* Effetto al focus: diventano bianchi per dare feedback */
.footer-form-input:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Placeholder e Label */
.footer-form-input::placeholder {
    color: #90caf9 !important;
}

/* Etichette e testo nel footer */
.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}