body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.responsive-container {
    width: 100%;
    height: 100%;
    background-image: url('odi.png'); /* Desktop image */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    font-family: 'Poppins', sans-serif; /* Apply Poppins to ensure it's available */
}

/* --- Desktop Floating Animation Keyframes (no horizontal transform) --- */
@keyframes float-desktop {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } /* Floats up 8px */
    100% { transform: translateY(0px); }
}

/* --- Mobile Floating Animation Keyframes (includes horizontal centering) --- */
@keyframes float-mobile {
    0% { transform: translateX(-50%) translateY(0px); } /* Centered, starts at 0 vertical offset */
    50% { transform: translateX(-50%) translateY(-8px); } /* Centered, floats up 8px */
    100% { transform: translateX(-50%) translateY(0px); } /* Centered, returns to 0 vertical offset */
}


.ticket-button {
    position: absolute;
    /* --- Desktop Positioning --- */
    bottom: 10vh;
    right: 25vw;

    /* New Button Styles */
    background-color: #daff02;
    color: #333;
    padding: 18px 35px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    /* --- Apply Desktop Floating Animation --- */
    animation: float-desktop 3s ease-in-out infinite;

    /* Smooth transitions for hover and other dynamic changes */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.ticket-button:hover {
    background-color: #c9e600;
    transform: translateY(-2px); /* Desktop hover: only translateY */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    animation: none; /* Stop the float animation on hover */
}

/* Media query for mobile devices (screens smaller than 768px wide) */
@media (max-width: 768px) {
    .responsive-container {
        background-image: url('mobile-01.png'); /* Different image for mobile */
    }

    .ticket-button {
        /* --- Mobile Positioning: Top and Centered --- */
        top: 5vh;   /* Position from the top (adjust as needed) */
        left: 50%;  /* Moves the left edge to the center */
        right: auto; /* Remove right positioning for mobile */
        bottom: auto; /* Remove bottom positioning for mobile */

        /* Base transform for horizontal centering (before animation/hover) */
        transform: translateX(-50%);

        font-size: 1.1em; /* Smaller font size on mobile */
        padding: 12px 15px; /* Smaller padding on mobile */
        border-radius: 40px; /* Adjust border-radius for mobile if needed */

        /* --- Apply Mobile Floating Animation --- */
        animation: float-mobile 2.5s ease-in-out infinite; /* Apply mobile-specific animation */
    }

    .ticket-button:hover {
        /* --- Mobile Hover: Maintain Centering + Lift --- */
        transform: translateX(-50%) translateY(-2px); /* Ensures it stays centered while lifting */
        animation: none; /* Still stop float on hover for cleaner interaction */
    }
}