.parent-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.custom-center {
    font-size: 30px;
}

.custom-green {
    color: #b3b3b3 !important;
    font-size: 12px;
}

.rd-navbar-toggle {
    background: transparent !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 10px; /* Ensure it has area to show background */
}

.rd-navbar-toggle.active {
    background-color: #ddd !important;
}

.interactive-video {
    display: block; /* removes inline spacing */
    width: 100%; /* fill parent container width */
    height: auto; /* keep aspect ratio */
    max-width: 100%; /* prevent overflow */
    margin: 0; /* no extra margin */
    padding: 0; /* no extra padding */
    object-fit: cover; /* fill container, crop if needed to avoid letterbox */
    vertical-align: bottom; /* fix inline alignment gaps */
    background: black; /* fallback bg color for letterboxing */
}

.search-box {
    padding: 20px 0;
}

.swiper-slide {
    position: relative;
    overflow: hidden;
}

/* Blur overlay */
.swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;  /* uses slide’s background */
    filter: blur(0px) brightness(1);
    transform: scale(1.1); /* prevents blur edges */
    transition: filter 0.8s ease-in; /* smooth blur */
    z-index: 0;
    animation: addBlur 0.8s ease-in forwards;
    animation-delay: 1s; /* start after 1 second */
}

/* Ensure content stays sharp */
.swiper-slide > * {
    position: relative;
    z-index: 1;
}

/* Keyframes for blur */
@keyframes addBlur {
    from {
        filter: blur(0px) brightness(1);
    }
    to {
        filter: blur(12px) brightness(0.8);
    }
}

.custom-black {
    color: #0D0A0A !important;
}