body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #fff;
            
        }
        .hero{
            background-color: black;
        }
        .container {
            background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1)),
                        linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1)),
                        url('immagini/imgsfondo.png') center/cover no-repeat;
            width: 80%;
            height: 60vh !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            width: 100%;
            position: absolute;
            top: 0;
        }
        .navbar .logo img {
            height: 80px;
        }
        .menu {
            display: flex;
            gap: 20px;
        }
        .menu a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
        }
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        .hamburger div {
            width: 28px;
            height: 1.5px;
            background-color: white;
            margin: 2px 0;
            transition: 0.3s;
        }
        .navbar a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }
        h5{
            font-size: 16px;
            margin: 10px 0;
            color: #555;
        }
        
        .box {
          
            color: #000;
            padding: 40px;
            border-radius: 5px;
            width: 100%;
            margin-top: 200px;
            text-align: left;
        }
        
        .vehicle-type {
            background-color: white;
            width: 30%;
           border-radius: 6px; 
           padding: 10px;
    gap: 10px;
    margin-bottom: 10px;
  
        }
        .vehicle-type button {
            padding: 6px;
    border: none;
    background: white;
    border: 1px solid lightgray;
    color: #000;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    transition: 0.3s;
    
    
    /* Comportamento adattivo */
    flex-grow: 1;  /* Occupa spazio solo se ci sono più bottoni */
    flex-basis: auto;
    max-width: 200px; /* Evita che si allarghino troppo quando sono pochi */
}

.container-veicoli{
    display: flex;
    
}

        .vehicle-type  img {
            width: 50px;
            height: 40px;
        }
        .vehicle-type button.active {
            background: #0080F2;
            color: #fff;
        }
        .vehicle-dropdown {
            display: none;
        }
        .title-data-time{
            display: flex;
            justify-content: space-between;
            gap: 10px;
           
        }
        .title-container{
            width: 100%;
        }
        .date-time-container {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 15px;
            align-items: flex-start;
        }
        .date-time-group {
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding: 15px 8px;
            width: 100%;
            justify-content: space-between;
        }
        .date-time-group i {
            color: green;
      
        }
        .date-time-group span {
            font-weight: bold;
            display: flex;
            align-items: center;
        }
     
        .date-time-group input {
           
            text-align: center;
            width: auto;
            font-size: 18px;
            font-family: arial, sans-serif;
            font-weight: bold;
        }
        .date-time-group input.flatpickr-input {
    background-color: #fff;
    color: #000;
    font-weight: normal;
    font-size: 10px;
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
}
       .styled-select {
    flex: 1;
    width: 100%;
    font-size: 16px;
    padding: 10px;
    padding-right: 35px; /* spazio per la freccia */
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
.styled-select:focus {
    border-color: #007bff;
    outline: none;
}

        .search-btn {
            background: #0080F2;
            color: #fff;
            padding: 15px;
            border: none;
            border-radius:2px;
            width: 100%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            justify-content: center;
            margin: auto;
            
        }
        .section-noleggio {
            
            padding: 50px 10%;
            text-align: center;
            color: #000;
        }
        .section-noleggio h2 {
            font-size: 28px;
            font-weight: bold;
            text-align: left;
            margin-bottom:10px;
        }
        .section-noleggio h4 {
            text-align: left;
            font-size: 16px;
            color: #555;
            margin:10px 0 30px;
        }
   
        .slider-container {
            position: relative;
            width: 100%;
            margin: auto;
            overflow: hidden;
        }
        .noleggio-container {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .noleggio-item {
            min-width: 20%;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .noleggio-item img {
            width: 100%;
            height: 60%;
            margin-top: 15px;
        }
        .noleggio-item h3 {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }
        .noleggio-item p {
            font-size: 18px;
            font-weight: 600;
            margin: 10px;
            color: #555;
        }
        .noleggio-item .btn {
            display: inline-block;
            background: #0080F2;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
        }
       .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-20%);
            background: white;
            color: #0080F2;
            border: 1.5px solid #0080F2;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
            font-size: 14px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        .arrow:hover {
            background: #f1f1f1;
        }
        .prev { left: 2px; }
        .next { right: 2px; }
    
       
        
   /* FOOTER */
.footer {
  padding: 20px 40px;
  font-size: 16px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-bottom {
  text-align: center;
  font-size: 16px;
}
   

 @media screen and (max-width: 768px){
     
     .container{
         height: 50vh;
     }
     .navbar .logo img{
        height: 50px;
    }
     h3{
         font-size:14px;
     }
      /* box */
     box {
        width: 100%;
        padding: 15px;
        margin-top: 30px;
    }
   .vehicle-type {
            display: none;
}
    
    .vehicle-dropdown {
        display: block;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
    }


.title-data-time {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.title-container {
    width: 100%;
   
}

.date-time-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
}

 .date-time-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    gap: 5px;
}
.date-time-group input.flatpickr-input {
    background-color: #fff;
    color: #000;
    font-weight: normal;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
}


.date-time-group span {
     display: none;
}
.date-time-group input[type="date"] {
    
    width: 100%;
    font-size: 16px;
    padding: 6px;
    border: none;
    box-sizing: border-box;
}

.search-btn {
    background: #0080F2;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 18px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
    h2{
        font-size: 20px;
    }
    h4{
        font-size: 14px;
    }
    .noleggio-container{
   
        justify-content: space-between;
         margin-top: 0;
    }
    .noleggio-item {
            min-width: 100%;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .arrow{
        transform: translateY(-80%);
    }
    .menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                right: 20px;
                background: white;
                width: 150px;
                text-align: center;
                border-radius: 5px;
                gap: 0;
            }
            .menu a {
                padding: 10px;
                display: block;
                color: black;
                font-size:14px;
            }
            .hamburger {
                display: flex;
            }
        
        .menu.active {
            display: flex;
        }
      
        .styled-select {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none; /* Safari/iOS */
    -moz-appearance: none;
    color: #333;
}
           
 }
@media (max-width: 480px) {
    .navbar .logo img{
        height: 50px;
    }
    .box {
        width: 90%;
        padding: 15px;
     
        border-radius: 5px;
    }
    h3{
         font-size:10px;
     }
  
    .vehicle-type img {
        width: 20px;
        height: 20px;
    }
    
   .date-time-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    gap: 5px;
}
    .date-time-container{
        margin-bottom: 0;
    }
    
   .date-time-group input[type="date"] {
    
    font-size: 12px;
    padding: 6px;
    border: none;
    box-sizing: border-box;
}
     .styled-select{
               font-size: 10px;
               font-weight: 600;
               cursor: pointer;
               text-align: center;
           }
   

.date-time-group span {
     display: none;
}
    
    .search-btn {
        font-size: 10px;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
    }

 .vehicle-dropdown {
        display: block;
        width: 100%;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .section-noleggio{
        padding: 30px;
    }
    .section-noleggio h2{
        font-size: 18px;
        text-align: center;
    }
    .section-noleggio h4{
        font-size: 14px;
        text-align: center;
    }
     .noleggio-container{
   
        justify-content: space-between;
         margin-top: 0;
    }
    .noleggio-item {
            min-width: 100%;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
    .noleggio-item h3{
        margin-bottom: 0;
    }
    .noleggio-item p{
        margin-top: 5px;
    }
    .noleggio-item img{
        margin-top: 0;
    }
    .arrow{
        transform: translateY(-80%);
    }
    .footer-bottom{
        font-size: 12px;
    }
}