@import url('../assets/fonts/fonts.css');

body {
    margin: 0;
  
  }
  nav {
    background-color: rgba(175, 175, 175, 0); /* Fondo con transparencia */
    color: white;
    padding:20px 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que el navbar esté encima de otros elementos */
    transition: background-color 0.8s ease; /* Transición de color de fondo */
  }


  nav .logo {
    font-size: 1.5rem;
    
    /* margin-left: 20px; */
  }

  .nav-item{
    font-family: 'FractulAltMedium' !important;
    /* font-weight: bold; */
  }

  .logo img {
    width: 351px;
    /* margin-left: 10px; */
  }

  .logo {
    cursor: pointer; /* Cambiar cursor a puntero en el hover */
}

.logo:hover {
    cursor: pointer;
}

  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  nav ul li {
    margin-right: 20px;
    color: white;
  }

  nav ul li:hover  {
    margin-right: 20px;
    color: black;
  }

  nav ul li a {
    text-decoration: none;
    color: white;
    transition: background-color 0.3s;
    padding: 6px 15px;
   
  }
  nav ul li a:hover {
    background-color:#08FFDE; 
    text-decoration: none;
    color: black;
  }

  .menu-icon{
    display: none;
  }

  .footer-nav{
    display: none;
  }

.footer-nav p {
  margin: 0;
}

.footer-nav a {
  color: #08FFDE;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

  @media screen and (max-width: 1225px) {

    nav {
      background-color: rgba(175, 175, 175, 0); /* Fondo con transparencia */
      color: white;
      padding:20px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000; /* Asegura que el navbar esté encima de otros elementos */
      transition: background-color 0.8s ease; /* Transición de color de fondo */
    }
    .logo img {
      width: 150px;
      margin-left: 10px;
    }
  }

  /* Estilos para vista móvil */
  @media screen and (max-width: 768px) {


    nav {
      background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro */
      padding: 18px;
  }
  nav ul {
      display: none; /* Ocultar menú en vista responsive */
      position: fixed; /* Cambia a posición fija para cubrir toda la pantalla */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Asegura que el menú cubra toda la pantalla */
      background-color: rgba(0, 0, 0, 0.95); /* Fondo oscuro con más transparencia */
      justify-content: center; /* Centra los elementos horizontalmente */
      align-items: center; /* Centra los elementos verticalmente */
      flex-direction: column; /* Asegura que los elementos estén en columna */
      z-index: 999; /* Asegura que el menú esté encima de otros elementos */
  }
  nav ul.show {
      display: flex; /* Mostrar menú cuando la clase 'show' está presente */
  }
  nav ul li {
      margin: 20px 0; /* Espaciado entre elementos */
      font-size: 20px; /* Aumenta el tamaño de la letra */
  }
  nav .menu-icon {
      cursor: pointer;
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1500; /* Asegura que el ícono esté encima del menú */
      color: white;
      font-size: 28px; /* Aumenta un poco el tamaño del ícono */
  }

  .logo img {
      width: 60%;
      margin-left: 20px;
  }
  .footer-nav {
    display: block; /* Mostrar footer en vista móvil */
    position: absolute;
    bottom: 20px; /* Ubica el footer en la parte inferior */
    width: 100%; /* Asegura que el footer cubra todo el ancho */
    padding: 0 20px; /* Espaciado lateral */
}

  }