html, body {
    background-color: #eeeeee;
}
.my-indicator{display:none;}
.htmx-request .my-indicator{display:inline;}
.htmx-request.my-indicator{display:inline;}
.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}
.card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
.w75 {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.card-hover-move {
    transition: transform 0.2s ease;
}
.card-hover-move:hover {
    transform: scale(1.01) translateY(-7px);
    box-shadow: 0 8px 8px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}
.w75 {
    width: 100%;
    height: auto;
    max-width: 600px;
}
.adspot {
    margin-bottom: 0;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@view-transition {
  navigation: auto;
}

/* Apply fade effect to both old and new root elements */
::view-transition-old(root),
::view-transition-new(root) {
  animation: fade-scale-in 300ms ease both;
}
.bg-light {
    background-color:#fff;
}
@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.image-overlay-container {
    position: relative;
    display: inline-block;
}
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    text-align: center;

    /* Optional responsive text scaling */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    font-weight: bold;
    width: 90%;
    font-size: 2rem; /* base size for small screens */
    @media (min-width: 576px) {
        font-size: 2.5rem;
    }
    @media (min-width: 992px) {
        font-size: 3rem;
    }
    @media (min-width: 1200px) {
        font-size: 3.5rem;
    }
}