/* Animație de intrare pentru elemente */
.hero-content,
.about-content,
.portfolio-item,
.contact-form,
.pricing-item,
.contact-info,
.contact-map{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animație specifică pentru .service-item */
.service-item {
    opacity: 0;
    transform: translateX(-100px); /* Modificat: pornesc de la stânga */
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}


.hero-content.active,
.about-content.active,
.portfolio-item.active,
.contact-form.active,
.pricing-item.active,
.contact-info.active,
.contact-map.active,
.service-item.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Hover Underline Effect pentru meniu */
nav .hover-underline {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

nav .hover-underline::after,
nav .hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, #00ffff);
  bottom: -3px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

nav .hover-underline::before {
  top: -3px;
  transform-origin: left;
}

nav .hover-underline:hover::after,
nav .hover-underline:hover::before,
nav .hover-underline:focus::after,
nav .hover-underline:focus::before,
nav .hover-underline:active::after,
nav .hover-underline:active::before {
  transform: scaleX(1);
}

nav .hover-underline:hover,
nav .hover-underline:focus,
nav .hover-underline:active {
  color: #fff; /* Păstrează culoarea albă la hover */
}

/* Optimizare pentru dispozitive mobile */
@media (max-width: 768px) {
  nav .hover-underline {
    padding: 10px 0;
  }
  
  /* Afișează o linie subțire sub link-ul activ pe mobil */
  nav .hover-underline.active::after {
    transform: scaleX(1);
  }
}

.usecase-detail {
  animation: slideIn 1.5s ease-in-out;
  animation-delay: 1s;
}