/* ====================================

   NCC BORTOLOSSI - STILI FINALI (style.css)

   Versione: Logo integrato nello sfondo del titolo

   ==================================== */



/* ====================

   Reset e Base

   ==================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Roboto', sans-serif;

    line-height: 1.6;

    background-color: #000; 

    color: #f5f5f5; 

}



.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px 0;

}



/* Tipografia */

h1, h2, h3, h4 {

    font-family: 'Montserrat', sans-serif;

    color: #e0e0e0; 

    line-height: 1.2;

    margin-bottom: 15px;

}



h2 { font-size: 2.5em; text-align: center; }

h3 { font-size: 2em; text-align: center; margin-bottom: 30px;}

h4 { font-size: 1.5em; }



p {

    margin-bottom: 10px;

    text-align: center; 

}



a {

    color: #e6b800; 

    text-decoration: none;

    transition: color 0.3s ease;

}



a:hover {

    color: #ffd700;

}



/* Pulsanti Generici */

.btn {

    display: inline-block;

    background-color: #e6b800; 

    color: #000;

    padding: 12px 25px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 20px;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



.btn:hover {

    background-color: #ffd700;

    transform: translateY(-1px);

}



.btn-call {

    background-color: #38b000; 

    color: #fff;

    margin-left: 15px; 

}



.btn-call:hover {

    background-color: #2a8f00;

}



/* ====================

   Header e Navigazione

   ==================== */

header {

    background-color: #1a1a1a; 

    color: #fff;

    /* PADDING RIDOTTO PER COMPATTARE L'HEADER */

    padding: 10px 0; 

    border-bottom: 1px solid #333;

    position: sticky;

    top: 0;

    z-index: 1000;

}



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center; 

    flex-wrap: nowrap; 

    padding: 0;

}



/* REGOLA .header-logo RIMOSSA COMPLETAMENTE */





/* GRUPPO TITOLO E SOTTOTITOLO (ORA CON LOGO DI SFONDO) */

header .header-title-group {

    display: flex;

    flex-direction: column; 

    align-items: flex-start; 

    flex-grow: 1; 

    

 }



header h1 {

    margin: 0;

    font-size: 1.7em; 

    margin-bottom: 0; 

    white-space: normal; 

}



header .header-subtitle {

    color: #e6b800; 

    font-size: 0.9em; 

    font-weight: 700;

    margin: 0;

    padding-bottom: 5px; 

    text-align: left;

}



/* Regola per la Navigazione */

header nav {

    margin-left: auto; 

    flex-shrink: 0; 

}



header nav ul {

    list-style: none;

    display: flex;

}



header nav ul li {

    margin-left: 20px; 

}



header nav ul li a {

    color: #fff;

    font-weight: bold;

    padding: 5px 0;

    border-bottom: 2px solid transparent;

}



header nav ul li a:hover {

    color: #e6b800;

    border-bottom: 2px solid #e6b800;

}



/* ====================

   Hero Section e Altro (non modificato)

   ==================== */

.hero {

    background: url('sfondo_hero.png') no-repeat center center/cover;

    color: #fff;

    text-align: center;

    padding: 100px 0;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.6); 

    z-index: 1;

}



.hero .container {

    position: relative;

    z-index: 2;

}



.hero h2 {

    font-size: 3.5em;

    margin-bottom: 15px;

    color: #fff;

}



.hero p {

    font-size: 1.3em;

    max-width: 800px;

    margin: 0 auto 30px auto;

}



/* ====================

   Sezioni Generiche

   ==================== */

section {

    padding: 80px 0;

}



section:nth-of-type(odd) {

    background-color: #0d0d0d; 

}



/* ====================

   Services Section

   ==================== */

.services .service-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

    margin-top: 40px;

}



.services .service-item {

    background-color: #1a1a1a;

    padding: 30px;

    border-radius: 8px;

    text-align: center;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    transition: transform 0.3s ease;

}



.services .service-item:hover {

    transform: translateY(-5px); 

}



.services .service-item h4 {

    color: #e6b800;

    margin-bottom: 10px;

}



.services .service-item p {

    color: #ccc;

    text-align: center; 

}



/* ====================

   Fleet Section

   ==================== */

.fleet .vehicle-gallery {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 

    gap: 30px;

    margin-top: 40px;

}



.fleet .vehicle-item {

    background-color: #1a1a1a;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    text-align: center;

}



.fleet .vehicle-item img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    display: block;

    border-bottom: 1px solid #333;

}



.fleet .vehicle-item h4 {

    margin-top: 15px;

    color: #e6b800;

}



.fleet .vehicle-item p {

    padding: 0 20px 20px;

    color: #ccc;

    text-align: center;

}



/* ====================

   Contact Section

   ==================== */

.contact form {

    max-width: 600px;

    margin: 40px auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.contact input[type="text"],

.contact input[type="email"],

.contact input[type="tel"],

.contact textarea {

    background-color: #222;

    border: 1px solid #444;

    padding: 12px;

    border-radius: 5px;

    color: #f5f5f5;

    font-size: 1em;

}



.contact input::placeholder,

.contact textarea::placeholder {

    color: #888;

}



.contact input:focus,

.contact textarea:focus {

    outline: none;

    border-color: #e6b800;

    box-shadow: 0 0 5px rgba(230, 184, 0, 0.5);

}



.contact textarea {

    resize: vertical;

}



.contact .contact-info {

    text-align: center;

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid #333;

}



.contact .contact-info p {

    margin-bottom: 8px;

    font-size: 1.1em;

}



/* ====================

   Footer

   ==================== */

footer {

    background-color: #1a1a1a;

    color: #ccc;

    text-align: center;

    padding: 25px 0;

    border-top: 1px solid #333;

    font-size: 0.9em;

}





/* ====================

   Responsive Design

   ==================== */

@media (max-width: 768px) {

    header .container {

        flex-direction: column; 

        text-align: center;

        align-items: center;

    }

    

    /* MODIFICA PER IL GRUPPO TITOLO SU MOBILE */

    header .header-title-group {

        align-items: center; 

        margin-bottom: 15px; 

        

        /* Centrare il logo di sfondo su mobile */

        background-position: center bottom;

        background-size: 40px auto; 

        padding-left: 0; /* Rimuovi lo spazio extra a sinistra */

        

        /* Aggiungi padding superiore/inferiore per separare il logo */

        padding-top: 45px; /* Spazio per logo + margine */

    }

    

    header nav {

        margin-left: 0; 

        width: 100%; 

    }

    

    header h1 {

        font-size: 1.5em; 

    }



    header .header-subtitle {

        font-size: 0.8em; 

    }





    header nav ul {

        margin-top: 0; 

        flex-wrap: wrap;

        justify-content: center;

    }



    header nav ul li {

        margin: 0 10px 10px 10px;

    }



    .hero h2 {

        font-size: 2.5em;

    }



    section {

        padding: 60px 0;

    }

    

    .hero .container .btn {

        display: block;

        width: 80%;

        margin: 10px auto;

    }



    .btn-call {

        margin-left: auto; 

    }



    h2 { font-size: 2em; }

    h3 { font-size: 1.7em; }

}





@media (max-width: 480px) {

    header h1 {

        font-size: 1.3em;

    }

    

    .header-title-group {

        background-size: 35px auto; /* Logo più piccolo su schermi molto piccoli */

        padding-top: 40px; 

    }



    .hero h2 {

        font-size: 2em;

    }

    .btn {

        padding: 10px 20px;

        font-size: 0.9em;

        width: 90%;

    }

}/* Stile base per tutti i messaggi di notifica (alert) */

.alert-success, .alert-error {

    padding: 15px;                  /* Spazio interno */

    margin-bottom: 20px;            /* Spazio sotto il messaggio */

    border: 1px solid transparent;  /* Bordo sottile */

    border-radius: 5px;             /* Angoli arrotondati */

    font-weight: bold;              /* Testo in grassetto */

    text-align: center;             /* Testo centrato */

}



/* Stile per i messaggi di SUCCESS (richiesta inviata) */

.alert-success {

    color: #155724;                 /* Testo Verde scuro */

    background-color: #d4edda;      /* Sfondo Verde chiaro */

    border-color: #c3e6cb;          /* Bordo Verde medio */

}



/* Stile per i messaggi di ERRORE (invio fallito o campi mancanti) */

.alert-error {

    color: #721c24;                 /* Testo Rosso scuro */

    background-color: #f8d7da;      /* Sfondo Rosso chiaro */

    border-color: #f5c6cb;          /* Bordo Rosso medio */

}