/* Spinner container styling */
#spinner {
    z-index: 9999;
}

/* Styling for the logo inside the spinner */
.spinner-logo img {
    width: 150px; /* Adjust the size as needed */
    animation: bounce 2s cubic-bezier(0.25, 0.1, 0.25, 1) 3;
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Styling for the video container */
.video-header {
    height: 750px;
    position: relative;
    overflow: hidden;
}

/* Styling for the background video */
.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video scales properly */
    z-index: 1;
}

/* Transparent black overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% transparency */
    z-index: 2;
}

/* Optional content styling */
.video-content {
    position: relative;
    z-index: 3; /* Ensure content appears above the overlay */
    text-align: center;
    padding: 20px;
}

.store-badge {
    width: 150px; /* Adjust the size */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.store-badge:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

.footer-bank-card {
    height: 100px; /* Adjust as needed */
    padding: 10px;
    text-align: center;
}

.phonepe-logo {
    width: 150px; /* Adjust width to your needs */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Optional: Add pointer for interactivity */
    transition: transform 0.3s ease; /* Optional hover effect */
}

.phonepe-logo:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}