/* Override Bootstrap column width via CSS and make circular */
/* Only apply the column override on large screens and up */
@media (min-width: 992px) {
  #ho .hero-image.col-lg-6 {
    flex: 0 0 33.333333%; /* Makes it act like col-lg-4 */
    max-width: 33.333333%;
  }
}

/* Image styling for all screen sizes */
#ho .hero-image {
  border-radius: 50%; /* Makes the image circular */
  aspect-ratio: 1; /* Ensures perfect circle (square aspect ratio) */
  object-fit: cover; /* Maintains image quality while fitting circle */
}

/* CSS for #wstep section with smaller text */
#wstep .hero-title .fs-1 {
  font-size: 1.25rem !important; /* Makes text much smaller than fs-1 */
  line-height: 1.6;
}

/* Optional: Make text even smaller on mobile devices */
@media (max-width: 768px) {
  #wstep .hero-title .fs-1 {
    font-size: 1.1rem !important;
    margin: 0 1rem !important; /* Reduce horizontal margins on mobile */
  }
}


#wplaty .status {
    white-space: nowrap;
    word-break: keep-all;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#wplaty .datagrid-content {
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
}

#wplaty .datagrid-content::-webkit-scrollbar {
    height: 4px; /* Chrome, Safari */
}

#wplaty .datagrid-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

#mapa .carousel-indicators {
    display: none !important;
}