/* Dark Theme */
body {
    background-color: #060505; /* Dark background */
    color: #ffffff; /* Light text */
}

.event-card-day-text {
    color: white !important; /* Change to any color to check */
    font-size: 24px !important;
    font-weight: bold !important;
}


.pricing-section {
    background-color: #000000; /* Slightly lighter dark background for the section */
    padding: 4rem 0;
}

.pricing-thumb {
    background-color: #2c2c2c; /* Dark card background */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 1s ease, box-shadow 1s ease;
}

.pricing-thumb:hover {
    transform: translateY(-10px); /* Lift the card slightly on hover */
}

/* Glow Effect */
.pricing-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}

.pricing-thumb:hover::before {
    opacity: 1; /* Show the glow on hover */
}

/* Card Content Styling */
.pricing-thumb h3 {
    color: #ffffff; /* Light text for headings */
    margin-bottom: 15px;
}

.pricing-list-item {
    color: #cccccc; /* Light gray text for list items */
    margin-bottom: 10px;
}

.link-fx-1 {
    color: #ffffff; /* Light text for links */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.link-fx-1 svg {
    fill: #ffffff; /* Light icon color */
}

/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns: left, middle, right */
    gap: 20px; /* Space between columns */
    width: 100%;
}

/* Left Column */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between cards */
}

/* Middle Column */
.middle-column {
    display: flex;
    align-items: stretch; /* Ensure the tall card stretches to full height */
}

.middle-column .pricing-thumb.tall-card {
    height: 100%; /* Make the middle card take full height */
}

/* Right Column */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between cards */
}

/* Waving Glow Animation */
@keyframes wave-glow {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    50% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0.8;
    }
}

/* Individual Card Glow Colors */
.left-column .pricing-thumb:nth-child(1):hover::before {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.3), transparent 70%); /* Red glow */
    animation: wave-glow 4s infinite;
}

.left-column .pricing-thumb:nth-child(2):hover::before {
    background: radial-gradient(circle, rgba(0, 255, 0, 0.3), transparent 70%); /* Green glow */
    animation: wave-glow 4s infinite;
}

.middle-column .pricing-thumb:hover::before {
    background: radial-gradient(circle, rgba(0, 81, 255, 0.292), transparent 70%); /* Blue glow */
    animation: wave-glow 4s infinite;
}

.right-column .pricing-thumb:nth-child(1):hover::before {
    background: radial-gradient(circle, rgba(255, 255, 0, 0.47), transparent 70%); /* Yellow glow */
    animation: wave-glow 4s infinite;
}

.right-column .pricing-thumb:nth-child(2):hover::before {
    background: radial-gradient(circle, rgba(218, 6, 186, 0.559), transparent 70%); /* Purple glow */
    animation: wave-glow 4s infinite;
}

@media (max-width: 767.98px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column for mobile */
    }

    .left-column,
    .middle-column,
    .right-column {
        gap: 15px; /* Reduce gap between cards for mobile */
    }

    .middle-column .pricing-thumb.tall-card {
        height: auto; /* Reset height for mobile */
    }
}