html {
  scroll-behavior: smooth;
}

:root {
  /*--rojo: #dc3545;*/
  --negro: #181F25;
  --gris: #C8C8C8;
  --verde: #32CD32;
  --verde2: #9ADA70;
  --rosa: #FF6984;
  --azul: #298AF5;
  --amarillo: #FFC107;
  --naranja: #F58625;
}

.text-azul {
  color: var(--azul)
}

.text-amarillo {
  color: var(--amarillo)
}

.text-naranja {
  color: var(--naranja)
}

.bg-azul {
  background-color: var(--azul);
}

.bg-amarillo {
  background-color: var(--amarillo);
}

.bg-naranja {
  background-color: var(--naranja);
}

.btn-naranja {
  background-color: var(--naranja);
}

.btn-naranja:hover {
  opacity: 0.8;
}

.btn-outline-naranja {
  border: 2px solid var(--naranja);
  color: var(--naranja);
}

.btn-outline-naranja:hover {
  background-color: var(--naranja);
  color: white;
}

body {
  font-family: 'Montserrat';
  font-size: 22px;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* Smooth transition */
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
}

/* floating */
.floating {
  position: relative;
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  z-index: -1;
}

@keyframes floating {
  from {
    transform: translate(0, 0px);
  }

  65% {
    transform: translate(0, 19px);
  }

  to {
    transform: translate(0, -0px);
  }
}

/* fin floating */

/* Active navigation link styling based on scroll section */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link.nav-active {
  color: var(--azul) !important;
  font-weight: 600;
}

.nav-link.nav-active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--azul);
  border-radius: 2px;
}

/* Stars overlay - fixed positioning */
#stars-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

/* Prevent body horizontal scroll */
body {
  overflow-x: hidden;
}

.hero {
  top: 70%;
  left: 70%;
  transform: translate(-50%, -50%);
}

/* section screen large */
.section-cover-top {
  height: calc(100vh - 60px); /* Forces exact screen height */
}

.section-cover-bot {
  height: 100vh; /* Forces exact screen height */
}

.navbar-height {
  height: 80px; /* Adjust this value to match your navbar's actual height */
}
/* Fin section screen large */

/* Back to top button */
#myBtn {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    /*background-color: red;*/
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

#myBtn:hover {
    background-color: #555;
}
/* Fin Back to top button */