.container {
    margin: 0 auto;
}

.boton-portfolio{
    margin: 20px 10px;
}

.boton-portfolio .btn-secondary{
    background-color: var(--color-primario);
}

.boton-portfolio .btn-secondary:hover{
    background-color: var(--color-terciario);
}

.titulo-develop {
    margin-left: 20px;
}

.location-title h5{
    display: inline-block;
    border-bottom: 2px solid var(--color-primario);
}

.tags {
    margin-left: 5px;
}

.span-primary{
    background-color: var(--color-primario);
    color: white;
    border-radius: 5px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.span-secondary{
    background-color: var(--color-terciario);
    color: #000;
    border-radius: 5px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.span-tertiary{
    background-color: var(--color-quinto);
    color: white;
    border-radius: 5px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.carousel-container {
    position: relative;
    max-width: 1200px; /* Tamaño máximo que puede tener el carousel */
    height: 100%; /* Altura ajustable a un porcentaje de la altura de la pantalla */
    overflow: hidden;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    min-width: 100%; /* Cada slide debe ocupar el 100% del ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
}

.carousel-slide img {
    width: 100%; /* La imagen debe ocupar el 100% del ancho del slide */
    height: 100%; /* La imagen debe ocupar el 100% de la altura del slide */
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.carousel-container button {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 10px;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.item-desc{
    padding: 5px;
    color: var(--color-sexto);
    margin-bottom: 0 !important;
}

.separador{
    border-top: 2px solid var(--color-terciario);
}

.item-desc strong{
    color: var(--color-primario);
}


#navbar {
    background-color: var(--color-primario);
    transition: background-color 0.5s ease;
}

  #navbar.scrolled {
    background-color: var(--color-primario); 
    transition: background-color 0.5s ease;
}

  .navbar-toggler{
    background-color: var(--color-primario);
  }
  
  .navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3e%3cpath stroke="rgba(255, 255, 255, 1)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"%3e%3c/path%3e%3c/svg%3e');
}

  .power {
    background-image: url('img/fondo.webp');
    background-size: cover; /* Ajusta la imagen para que cubra toda la sección */
    background-position: bottom; /* Centra la imagen horizontalmente */
    height: 100vh; /* Establece la altura de la sección al 100% de la viewport */
    color: white;
    align-items: center;
    justify-content: center;
}

.texto-hero{
  padding: 250px 1.5rem 1.5rem 1.5rem;
}
/* Estilos para pantallas grandes */
@media (min-width: 990px) {
  .power {
      height: 600px; /* Establece un límite de altura para pantallas grandes */
      background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
  }

  .texto-hero{
    padding: 200px 1.5rem 1.5rem 1.5rem;
    width: 600px;
  }
}


/* Estilos para pantallas anchas */
.navbar-collapse {
  background-color: transparent; /* o cualquier otro valor que desees */
  border-radius: 0;
  margin: 10px; /* o cualquier otro valor que desees */
}

.navbar-nav .nav-item {
  margin: 10px; /* o cualquier otro valor que desees */
}

.navbar-collapse .nav-link {
  color: var(--color-secundario); /* o cualquier otro valor que desees */
  margin-left: 0;
}


/* Estilos para pantallas estrechas (menos de 990px) */
@media (max-width: 990px) {
  .navbar-collapse {
      background-color: var(--color-primario);
      border-radius: 0.5rem;
      margin: 5px 0 0 0;
      padding: 0.5rem;
  }

  .navbar-nav .nav-item {
      margin: 0;
  }

  .navbar-collapse .nav-link {
      color: white !important;
      margin-left: 15px;
      font-weight: 600; /* Hace el texto más grueso */
      transition: background-color 0.3s, color 0.3s; /* Suaviza la transición del color */
  }

  .navbar-nav .nav-item .boton-sign-in{
    display: flex;
    justify-content: end;
  }
  

  .navbar-collapse .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Cambia el color de fondo al pasar el mouse */
    color: var(--color-primario); /* Cambia el color del texto al pasar el mouse */
  }
}