.carousel {
  position: relative;
  width: 100%;
  overflow: hidden; /* Ascunde imaginile care ies din viewport */
  max-height: 500px; /* Înălțime maximă pentru carusel */
  margin: 20px 0; /* Spațiu deasupra și dedesubt */
  border-radius: 15px; /* Rotunjire pentru întreg caruselul */
}

.carousel-track {
  display: flex;
  animation: slide 25s linear infinite; /* Mișcare continuă */
  gap: 20px; /* Spațiu între imagini */
  transition: transform 0.3s ease; /* Tranziție pentru mișcări manuale */
}

.carousel-item {
  flex: 0 0 auto; /* Imaginile nu se redimensionează automat */
  width: calc(100% / 3); /* Lățime pentru 3 imagini pe rând */
  max-height: 500px; /* Asigură proporțiile imaginilor */
  overflow: hidden; /* Ascunde părțile din imagine care ies */
  position: relative;
  border-radius: 15px; /* Rotunjire pentru imagini */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Umbră subtilă */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efect de hover */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajustează imaginea pentru a umple spațiul */
  object-position: center; /* Centrare pe verticală și orizontală */
  transition: transform 0.3s ease; /* Adaugă o tranziție pentru efectul de hover */
  border-radius: 15px; /* Asigură rotunjirea și la imagini */
}

/* Animație carusel */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.carousel-item:hover img {
  transform: scale(1.05); /* Mărire subtilă la hover */
}

.text-overlay-carousel {
  position: absolute;
  bottom: 10%;
  left: 10%;
  font-family: 'Roboto', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  transition: font-size 0.3s ease; /* Diminuează textul pentru mobil */
}

/* Oprirea animației la hover */
.carousel:hover .carousel-track {
  animation-play-state: paused; /* Animația se oprește când mouse-ul este deasupra */
}

/* Indicatori carusel */
.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dot.active {
  background-color: white;
}

.carousel-dot:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Stil pentru butoane de navigare */
.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  font-size: 1.5em;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Adaptări pentru mobil */
@media (max-width: 768px) {
  .carousel-item {
    width: 100%; /* Imaginile ocupă întreaga lățime */
    max-height: 350px; /* Înălțime mai mare pentru imagini pe mobil */
  }

  .carousel-item img {
    object-fit: cover; /* Ajustează imaginea pentru a umple spațiul */
  }

  .text-overlay-carousel {
    font-size: 1em; /* Text mai mic pentru mobil */
    bottom: 5%; /* Plasare mai aproape de marginea inferioară */
    left: 5%; /* Margine laterală mai mică */
  }
  /* .small-image {
     padding: 20px; Padding redus pentru mobil 
  } */

  .carousel-item  .small-image img {
    width: 100%;
    height: 100%; /* Face imaginea să ocupe mai mult spațiu */
  }

  .content-container {
    gap: 30px; /* Spațiu între elemente mai mic pe mobil */
  }
}

@media (max-width: 768px) {
  .carousel-track {
    animation: slide 10s linear infinite; /* Reduce durata animației la 10 secunde */
  }
}