body,
html {
  height: 100%;
}

.bg1 {
  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-size: cover;
}

.container-img {
  width: 200px;
  /* Fixed width for the container */
  height: 150px;
  /* Fixed height for the container */
  object-fit: contain;
  /* Scale image down to fit inside without stretching or cropping */
}

.half-width-img {
  width: 75%;
  height: auto;
  /* Maintain aspect ratio */
  text-align: center;
}

.img_sp {
  max-width: 100%;
  height: auto;
}

/* Mobile dropdown styles */
@media (max-width: 767.98px) {
  .dropdown-menu .dropdown-item {
    color: white;
    white-space: normal;
    text-wrap: wrap;
    word-break: break-word;
    max-width: 100vw;
    width: 100vw;
  }
}

/* Desktop dropdown styles */
@media (min-width: 768px) {
  .dropdown-menu .dropdown-item {
    color: white;
    white-space: normal;
    text-wrap: wrap;
    word-break: break-word;
    max-width: 40vw;
    width: 40vw;
  }
}

/* 1. Fix the main carousel container height */
.carousel-inner {
  height: 50vh;
  overflow: hidden;
}

/* 2. Reset base slide styles */
.carousel-inner .carousel-item {
  height: 100%;
  width: 100%;
  text-align: center;
}

/* 3. Apply flexbox ONLY to the active slide and during transition animations */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 4. Restrain image dimensions inside the slide */
.carousel-inner .carousel-item img,
.half-width-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 6s ease;
}

/* Responsive mobile adjustment */
@media (max-width: 768px) {

  .carousel-inner,
  .carousel-inner .carousel-item {
    height: 250px;
  }
}

.container {
  border-radius: 15px;
}

.bg-customblue {
  /* Solid Color (Red, Green, Blue) */
  background-color: rgb(14, 7, 141);
}

.logoleogart {
  height: 40px !important;
  /* Forces the height change */
  width: auto !important;
  /* Forces the correct aspect ratio */
}

.dropdown-item:hover {
  color: black;
}