.custom_landing__balls div.isVisible {
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-out;
}

.offer-left, .offer-right, .offer-center, .offer-single {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility: hidden;
    will-change: transform, opacity, box-shadow;
}

@media (max-width: 1023px) {
    .offer-left, .offer-right, .offer-center, .offer-single {
        transform: scale(1);
        margin-bottom: 1rem;
    }

    .offer-center {
        border-color: rgba(234, 88, 12, 0.5) !important;
        border-width: 2px !important;
    }

    .offer-left:hover, .offer-right:hover, .offer-center:hover, .offer-single:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }
}

@media (min-width: 1024px) {
    .offer-left, .offer-right {
        transform: scale(0.92);
        z-index: 1;
        opacity: 0.95;
    }

    .offer-center {
        transform: scale(1.08);
        z-index: 2;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        border-color: rgba(234, 88, 12, 0.5) !important;
        border-width: 2px !important;
    }

    .offer-left {
        transform-origin: right center;
        margin-right: -5px;
    }

    .offer-right {
        transform-origin: left center;
        margin-left: -5px;
    }

    .offer-left:hover, .offer-right:hover {
        transform: scale(1.05);
        z-index: 3;
        opacity: 1;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    .offer-center:hover {
        transform: scale(1.12);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        border-color: rgba(234, 88, 12, 0.8) !important;
    }

    .grid-cols-3 > div {
        position: relative;
    }
}

/* Override offer colors for private-offer page */
/* Left offer gets the pink color scheme (previously center) */
.offer-left {
    background-color: #fff1f2 !important; /* Very light pink background */
    border-color: #e11d48 !important; /* Rich pink/red border */
}

.offer-left h3 {
    background-color: #fecdd3 !important; /* Light pink header */
    color: #9f1239 !important; /* Deep red text */
}

.offer-left button {
    background-color: #e11d48 !important; /* Rich pink/red button */
}

.offer-left button span:first-child {
    background-color: #be123c !important; /* Deeper red button icon area */
}

.offer-left button:hover {
    background-color: #be123c !important; /* Deeper red on hover */
}

.offer-left button span:first-child:hover {
    background-color: #9f1239 !important; /* Even deeper red on hover */
}

/* Center offer gets the default orange color scheme */
.offer-center {
    background-color: #fff7ed !important; /* Very light orange background */
    border-color: #f97316 !important; /* Rich orange border */
}

.offer-center h3 {
    background-color: #ffd8ae !important; /* Light orange header */
    color: #9a3412 !important; /* Deep orange text */
}

.offer-center button {
    background-color: #f97316 !important; /* Rich orange button */
}

.offer-center button span:first-child {
    background-color: #ea580c !important; /* Deeper orange button icon area */
}

.offer-center button:hover {
    background-color: #ea580c !important; /* Deeper orange on hover */
}

.offer-center button span:first-child:hover {
    background-color: #c2410c !important; /* Even deeper orange on hover */
}

/* Dark mode specific styles */
.dark .offer-left {
    background-color: #831843 !important; /* Dark pink background */
    border-color: #fb7185 !important; /* Lighter pink border for contrast */
}

.dark .offer-left h3 {
    background-color: #9f1239 !important; /* Darker pink header */
    color: #fecdd3 !important; /* Light pink text for contrast */
}

.dark .offer-left button {
    background-color: #e11d48 !important; /* Rich pink/red button */
}

.dark .offer-center {
    background-color: #7c2d12 !important; /* Dark orange background */
    border-color: #fdba74 !important; /* Lighter orange border for contrast */
}

.dark .offer-center h3 {
    background-color: #9a3412 !important; /* Darker orange header */
    color: #fed7aa !important; /* Light orange text for contrast */
}

.dark .offer-center button {
    background-color: #f97316 !important; /* Rich orange button */
}

.offer-right {
    background-color: #f0fdf4 !important; /* Very light green background */
    border-color: #16a34a !important; /* Rich green border */
}

.offer-right h3 {
    background-color: #dcfce7 !important; /* Light green header */
    color: #166534 !important; /* Deep green text */
}

.offer-right button {
    background-color: #16a34a !important; /* Rich green button */
}

.offer-right button span:first-child {
    background-color: #15803d !important; /* Deeper green button icon area */
}

.offer-right button:hover {
    background-color: #15803d !important; /* Deeper green on hover */
}

.offer-right button span:first-child:hover {
    background-color: #166534 !important; /* Even deeper green on hover */
}

/* Dark mode specific styles */
.dark .offer-right {
    background-color: #14532d !important; /* Dark green background */
    border-color: #4ade80 !important; /* Lighter green border for contrast */
}

.dark .offer-right h3 {
    background-color: #166534 !important; /* Darker green header */
    color: #dcfce7 !important; /* Light green text for contrast */
}

.dark .offer-right button {
    background-color: #16a34a !important; /* Rich green button */
}

.dark .offer-right button span:first-child {
    background-color: #15803d !important; /* Deeper green button icon area */
}

.dark .offer-right button:hover {
    background-color: #22c55e !important; /* Brighter green on hover for dark mode */
}

.dark .offer-right button span:first-child:hover {
    background-color: #16a34a !important; /* Brighter green on hover for dark mode */
}

/* Offer side images */
.offer-side-image {
    max-width: 200px;
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    transition: all 0.5s ease;
    position: relative;
    z-index: 10;
}

.offer-left-image {
    transform: rotate(-5deg) translateY(-20px);
}
.offer-left-image-wrapper {
    left: -125px;
    top: 110px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-out;
}

.offer-right-image {
    transform: rotate(5deg) translateY(-20px);
}
.offer-right-image-wrapper {
    right: -85px;
    top: 110px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-out;
}

/* Dark mode styles for side images */
.dark .offer-side-image {
    filter: brightness(0.8) drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.2));
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Landing page animations */
.landing-header {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

.landing-subheader {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

.landing-plan {
    opacity: 0;
    animation: scaleIn 0.6s ease forwards;
}

.landing-plan:nth-child(1) {
    animation-delay: 0.3s;
}

.landing-plan:nth-child(2) {
    animation-delay: 0.5s;
}

.landing-plan:nth-child(3) {
    animation-delay: 0.7s;
}

/* Filmstrip animations */
.filmstrip-wrapper {
    opacity: 0;
}

#filmstrip {
    animation: fadeIn 1s ease forwards;
    animation-delay: 0.8s;
}

#filmstrip2 {
    animation: slideInLeft 1.2s ease forwards;
    animation-delay: 1s;
}

#filmstrip3 {
    animation: slideInRight 1.2s ease forwards;
    animation-delay: 1.2s;
}
footer {
    background: linear-gradient(to top, #000, transparent);
}
.filmstrip-wrapper {
    opacity: 0.7 !important;
}
@media (max-width: 1100px) {
    .filmstrip-wrapper {
        display: none;
    }
}