html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
    padding-top: 120px;
}

.navbar-collapse {
  flex-grow: unset;
}

.navbar-suma {
  height: 120px;
  padding: 0 96px 0 96px;
  background-color: #E41010;
  text-align: right;
  box-shadow: 0px 6px 6px 0px #00000040;
}

.navbar-suma .navbar-brand IMG {
  width: 128px;
}

.navbar-suma LI A.nav-link {
  text-align:center;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}

.navbar-suma LI A.nav-link:hover,
.navbar-suma LI A.nav-link.active {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px; /* Ajusta la distancia */
  text-decoration-thickness: 2px; /* Cambia el grosor */
}

@media (max-width: 991.98px) {
  body {
    padding-top: 96px;
  }

  .navbar-suma {
    height: 96px;
    padding: 0 40px 0 40px;
  }

  .navbar-suma LI A.nav-link {
    text-align: left;
  }
  .navbar-suma .navbar-toggler IMG {
    width: 48px;
  }

  .navbar-suma .navbar-brand IMG {
    width: 110px;
  }

  .offcanvas-collapse {
    position: fixed;
    top: 96px; /* Height of navbar-suma */
    bottom: 0;
    right: 100%;
    width: 300px;
    max-width: 50%;
    padding-right: 1rem;
    padding-left: 40px;
    overflow-y: auto;
    visibility: hidden;
    background-color: #E41010;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    box-shadow: 6px 0px 6px 0px #0000004D;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(100%);
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  body {
    padding-top: 48px;
  }

  .navbar-suma {
    height: 48px;
    padding: 0 24px 0 24px;
  }

  .offcanvas-collapse {
    position: fixed;
    top: 48px; /* Height of navbar-suma */
  }

  .navbar-suma .navbar-toggler IMG {
    width: 24px;
  }

  .navbar-suma .navbar-brand IMG {
    width: 64px;
  }
}