.fotomultiple.menu-item {
  cursor: pointer;
}
/* .menu-item:hover {
  background-color: #b5bfc9;
  border-radius: 15px;
} */
.menu-bg {
  background-color: #3E8DA8; /* Colore azzurrino */
}
.sottomenu-bg {
  background-color: #b5bfc9; /* Colore grigio */
}
.image-container {
  display: none; /* Nascondiamo inizialmente */
  border: 1px solid #ccc;
  padding: 20px;
  min-height: 200px;
}
.image-container img {
  max-width: 100%;
  height: auto;
}
.color-bar {
  /* display: none; */
  width: 100%;
  max-width: 300px;
  /* border: solid blue; */
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.color-bar div {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s;
}
.color-bar div:hover {
  transform: scale(1.1);
}
.navbar-nav {
  flex: 1; /* Distribuisce le voci del menu */
}
.nav-item {
  text-align: center;
  flex-grow: 1;
}
.navbar-nav .nav-link {
  color: white;
  transition: color 0.3s ease;
}
/* .navbar-nav .nav-link:hover {
  color: black;
} */
.navbar-nav {
  color: black;
}
.container {
    margin: 0 auto;
    padding: 10px;
    /* max-width: 1200px; */
}

.fotomultiple-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    justify-items: center;
}

.fotosingola {
    text-align: center;
}

.fotosingola-contenuto img {
    max-height: 20vh;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.fotosingola-contenuto p {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}
.clsParteCentrale{width: 100%;}
.clCentralImages{border-radius: 10px;}
.clMainImage{border-radius: 10px; border: solid; width: 50%}

#idMenuLateraleSx2 {
  border-radius: 5px;
  color:  white;
  text-align: center;
}

.menu-item.active {
  background-color: #b5bfc9 !important; /* Cambia colore */
  color: black !important;
  border-radius: 15px;
}

.dropdown-item {
  border-radius: 15px; /* Bordo arrotondato */
  /* transition: background-color 0.3s ease-in-out, transform 0.2s; Animazione fluida */
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: #b5bfc9 !important; /* Colore arancione con !important per sovrascrivere Bootstrap */
  background-color: #555 !important; /* Colore arancione con !important per sovrascrivere Bootstrap */
  color: white !important; /* Cambia il colore del testo per visibilità */
  border-radius: 15px; /* Mantiene gli angoli arrotondati */
}

.evidenziato {
  background-color: #b5bfc9 !important;
  background-color: #0056b3 !important;
  border-radius: 15px;
}

.evidenziato a {
  color: black;
}

.cliccato {
  background-color: #b5bfc9;
  background-color: #555;
  border-radius: 15px;
}

.list-group-item.evidenziato {
  background-color: #b5bfc9 !important;
  background-color: #0056b3 !important;
  border-radius: 15px !important;
}

.list-group-item.cliccato {
  background-color: #b5bfc9 !important;
  background-color: #555 !important;
  border-radius: 15px !important;
}
/* Stili specifici per mobile */
@media (max-width: 767px) {

    body {
      padding-top: 0 !important; /* Rimuovi il padding per il fixed-top su mobile */
    }

    #sideMenu        {display: none !important;}
    .row             {flex-direction: column; width: 100%;}
    #descrizione     {width: 100%}
    #fotoCentrale    {width: 100%}
    #fotoSingola     {width: 100%}
    .col-9.col-md-10 {width: 100% !important; /* Comportamento di col-12 */flex: 0 0 100% !important;}
    .grid-container_filati {position: static !important;bottom: auto !important;top: auto !important;}
    #caratteristiche {display: none !important; /* forza la regola */visibility: visible !important; /* annulla visibility:hidden inline */}
    /* Forza le row interne a espandersi su tutta la larghezza del container-fluid */
    .container-fluid > .row {width: 100%;margin-left: 0;margin-right: 0;}

  
    .navbar {
        height: auto !important; /* Permette all'altezza di adattarsi al contenuto */
        min-height: 14vh; /* Altezza minima per il menu chiuso */
    }
    
    .navbar-collapse {
        position: relative !important; /* Cambiato da absolute a relative */
        top: auto;
        box-shadow: none;
        max-height: 70vh; /* Limita l'altezza del menu espanso */
        overflow-y: auto; /* Permette lo scroll se il contenuto è troppo lungo */
    }
    
    /* Rimuovi il fixed-top solo su mobile per permettere lo scorrimento */
    .navbar.fixed-top {
        position: relative !important;
    }
            
    .navbar-nav {
        background-color: #4169E1;
        padding: 1rem;
        border-radius: 0 0 10px 10px;
        margin-top: 0.5rem;
    }
            
    .nav-item {
        margin: 0.5rem 0;
        text-align: left;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        text-align: left;
    }
    
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #4169E1;
        z-index: 1000;
    }
    
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .navbar-brand {
        padding: 0;
    }
}