.display-4 {
  font-weight: 800 !important;
}

.display-6 {
  font-weight: 600 !important;
}

.text-lightblue {
  color: #090DE8FF;
}

.text-greenlime {
  color: #ACEF0A;
}

.bg-lightblue {
  background-color: #090DE8;
}

.bg-bluedark {
  background-color: #020461;
}

.bg-greenlime {
  background-color: #ACEF0A;
}

.bg-white {
  background-color: #ffffff;
}

.vh-768 {
  height: 768px;
}

.fs-16 {
  font-size: 1rem;
}


.h-20 {
  height: calc(20vh - 100px);
}


/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Mobile screen styles */
@media (max-width: 767px) {
  .carousel-item {
    flex: 0 0 100%;
  }

  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }

  .navbar-image {
    width: 5.6rem;
  }

  .hero-container {
    height: 100%;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .carousel-item {
    flex: 0 0 33.33%;
  }

  .navbar-image {
    width: 5.6rem;
  }

  .nav-item {
    margin: 0;
  }

  .ps-md-10 {
    padding-left: 10rem; /* Nilai padding-start untuk layar desktop */
  }

  .hero-container {
    height: 100%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .navbar-image {
    width: 7.2rem;
  }

  .nav-item{
    margin: 8px;
}
.hero-image {
  height: 100vh;
}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}