.overlay {
  display: block; /* Always block so the transition can be seen */
  position: fixed; /* Positioning relative to the viewport */
  top: 0;
  padding-top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../img/Fundos/bg_azul.webp");
  z-index: 1050; /* Lower than the navbar */
  overflow: hidden; /* Disable scroll */
  transition: transform 0.5s, visibility 0.5s; /* Smooth transition for sliding down */
  transform: translateY(-100%); /* Start above the top */
  visibility: hidden; /* Initially not visible */
}

/* Visible state for the overlay */
.overlay.show {
  display: block; /* Now shown */
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Slide down */
}

.navbar {
  z-index: 1100;
  backdrop-filter: blur(37px);
}

.row-nav-links {
  width: 100%;
}

/* Overlay Content */
.nav-link {
  font-family: "Titillium Web", sans-serif;
  font-size: 1.75rem;
  text-align: left;
  color: #ffffff;
  line-height: 2rem;
  font-weight: 300;
  letter-spacing: 0.5rem;
  text-decoration: none;
  padding: 20px 0;
}
@media (max-width: 992px) {
  .nav-link {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}
@media (max-width: 412px) {
  .nav-link {
    font-size: 1rem;
    padding: 5px 0;
    text-align: center;
  }
}

.nav-link:hover {
  color: #ffffff;
}

.nav-txt {
  font-family: "Titillium Web", sans-serif;
  font-size: 1rem;
  text-align: left;
  color: #ffffff;
  line-height: 2rem;
  font-weight: 300;
  line-height: normal;
}
@media (max-width: 992px) {
  .nav-txt {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}
@media (max-width: 576px) {
  .nav-txt {
    text-align: center;
  }
}

.line-menu {
  border: none; /* Remove default border */
  border-top: 2px solid rgba(255, 255, 255, 0.5); /* Set top border to act as the 'stroke' */
}

/* Close Button */
.closebtn {
  cursor: pointer;
  font-size: 2em;
  color: #ffffff;
  position: absolute;
  top: 20px;
  right: 40px;
}

/* Show the overlay */
.overlay.show {
  display: block;
  transform: translateY(0);
}

@media (max-width: 576px) {
  .morada-overlay {
    display: none !important;
  }
}