.navlist {
  display: flex;
  background: var(--bg-color);
}

.navlist a {
  font-size: var(--p-font);
  font-weight: 500;
  color: var(--other-color);
  margin-left: 40px;
  transition: all 0.5s ease;
}

.navlist a:hover {
  text-shadow: 3px 3px 20px var(--main-color), -2px 1px 30px var(--text-color);
}

#menu-icon {
  font-size: 35px;
  z-index: 10001;
  cursor: pointer;
  display: none;
}

@media (max-width: 950px) {
  .hero {
    /* height: 90vh; */ /*decidi no ponerlo asi*/
    background-position: 90%;
  }
  .contenido-modal img {
    width: 80% !important;
  }

  .container_text_deep {
    display: none;
  }
  .container_text {
    text-align: center;
  }
  .accordion_container {
    display: block !important;
  }
  .panel {
    text-align: left;
  }
  :root {
    --h1-font: 3.5rem;
  }

  .social {
    margin-bottom: 20px;
  }

  #menu-icon {
    display: block;
  }

  .navlist {
    position: absolute;
    top: 100%;
    right: -100%;
    width: 255px;
    min-height: 100vh;
    flex-direction: column;
    background: var(--bg-color) !important;
    transition: all 0.5s ease;
  }

  .navlist a {
    display: block;
    padding: 17px;
    font-size: 22px;
  }

  .navlist.active {
    right: 0;
  }

  .container_title_modal {
    width: 88%;
    margin: 0 auto;
  }

  #container_img {
    flex-direction: column;
  }

  #container_img img {
    order: -1;
    width: 85%;
    margin: 0 auto;
  }

  .container_text {
    width: 85% !important;
    margin: 0 auto !important;
    margin-top: 20px !important;
  }
}