body {
  padding: 0;
  margin: 0;
}

#home {
  min-height: 100vh;
  /* width: 100vw; */
  background: linear-gradient(#007379, #213977 40%, #212529 75%);
}

.pv-primary {
  background-color: rgb(34, 133, 214);
}

.sect {
  background-color: #212529;
  min-height: 100vh;
}

/* Ensure the link is the reference point for the absolute line */
.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 5px; /* Adjust to create space for the line */
}

/* Create the hidden line at the bottom */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Thickness of the line */
  background-color: #dae9f5; /* Change to your preferred color */
  transform: scaleX(0); /* Start with 0 width */
  transition: transform 0.3s ease-in-out; /* Smooth drawing effect */
  transform-origin: bottom left; /* Controls draw direction */
}

/* Animate the line to full width on hover */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

/* Keep your existing animation CSS, then add this below it: */

/* Target the mobile/collapsed view specifically */
@media (max-width: 991px) {
  /* Use 991px for navbar-expand-lg, or 767px for navbar-expand-md */
  .navbar-nav .nav-link {
    width: fit-content; /* Shrinks the link to the size of the text */
    margin-left: 0;
    margin-right: 0;
  }
}