/* Reset and Base Styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --bg-dark: #0f0f2d;
        --bg-darker: #0a0a20;
        --text-white: #ffffff;
        --text-gray: #cccccc;
        --accent-blue: #00b7ff;
        --accent-cyan: #00e5ff;
        --accent-yellow: #ffd700;
        --accent-red: #ff3a3a;
        --card-bg: #1a1a40;
        --card-bg-darker: #121230;
        --card-border: rgba(59, 130, 246, 0.3);
        --blue-gradient-start: rgba(30, 64, 175, 0.3);
        --blue-gradient-end: rgba(14, 165, 233, 0.3);
    }

    body {
        font-family: 'Sora', sans-serif;
        background: linear-gradient(to bottom, var(--bg-dark), var(--bg-darker));
        color: var(--text-white);
        line-height: 1.6;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 15px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
        line-height: 1.2;
    }

    .highlight {
        color: var(--accent-cyan);
    }

    /* Button Styles */
    a {
        cursor: pointer;
        border: none;
        font-family: 'Montserrat', sans-serif; /* Make sure Montserrat is linked in HTML or use Sora */
        font-weight: 700;
        transition: all 0.3s ease;
    }

.cta-button {
background-image: linear-gradient(
  to right,
  #ff4d4d,
  #ff1a1a,
  #e60000,
  #b30000
);
    color: #fff;
    font-size: 1.6rem;
    padding: 1.6rem 2rem;
    border-radius: 50px;
    width: 80%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3);
    transform: translateY(0);
    animation: floatPulse 2s ease-in-out infinite;
}


@keyframes floatPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
    }
}


.sticky-seats {
    font-size: 1rem;
    color: #ff4d4d;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}



.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(230, 0, 0, 0.4);
}

    .cta-button:active {
        transform: translateY(1px);
    }

    /* Hero Section */
    .hero {
        padding: 5rem 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero::before, .hero::after { /* Combined for brevity */
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.1;
        z-index: 0;
    }
    .hero::before {
        top: 20%; left: 10%;
        background: var(--accent-blue);
    }
    .hero::after {
        bottom: 20%; right: 10%;
        background: var(--accent-cyan);
    }

    .hero .container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(to right, #0891b2, #0ea5e9);
        color: var(--text-white);
        padding: 0.5rem 1.5rem;
        font-size: 2rem;
        border-radius: 50px;
        margin-bottom: 2rem;
        font-weight: 600;
    }

    .badge i {
        margin-right: 0.5rem;
    }

    .hero h1 {
        font-size: 2.5rem; /* Base size, adjusted in media queries */
        margin-bottom: 2rem;
        margin-left: auto;
        margin-right: auto;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
        line-height: 1.2;
    }

    .highlight {
        color: var(--accent-cyan);
    }

    .price {
        color: var(--accent-red);
    }

    .hero h2 {
        font-size: 1.75rem; /* Base size, adjusted in media queries */
        margin-bottom: 2rem;
        max-width: 800px; /* Prevent very long lines */
        margin-left: auto;
        margin-right: auto;
        color: var(--text-white);
    }

    /* Masterclass Section */
    .masterclass-section {
        width: 100%; /* Ensure it takes full width within container */
        max-width: 1000px !important; /* Default max-width */
        margin: 2rem auto;
        background: linear-gradient(145deg, var(--card-bg), var(--card-bg-darker));
        box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--card-border);
    }

    .masterclass-header {
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem; /* Adjusted gap */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separator */
    }

    .masterclass-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.2rem; /* Adjusted size */
        font-weight: 700;
    }

    .masterclass-title i {
        color: #4ade80; /* Brighter green */
    }
    .containerx{
        width: 100%;
        
    }

    .masterclass-date {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 10px;
        border-radius: 10px;
        margin: 15px 0;
        border: 1px solid var(--accent-yellow);
        color: var(--accent-yellow);
        font-size: 1.6rem;
        font-weight: 800 !important; 
    }

    .masterclass-content {
        padding: 1.5rem;
    }

    .video-container { /* This div might be redundant if video-placeholder is direct child */
        width: 120%;
        position: relative;
    }

    .video-placeholder {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        background-color: #000; /* Fallback bg for iframe loading */
    }

    .video-placeholder iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none; /* Ensure no iframe border */
    }

    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: rgba(30, 64, 175, 0.8); /* Slightly transparent */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
        z-index: 10; /* Ensure it's above the iframe if needed */
    }
    /* Consider hiding if Vimeo controls are preferred:
    .video-placeholder:hover .play-button {
        opacity: 0; visibility: hidden;
    }
    */

    .play-button:hover {
        background: #2563eb;
        transform: translate(-50%, -50%) scale(1.1);
    }


    /* Countdown Styles */
    .countdown-container {
        max-width: 600px;
        margin: 2rem auto; /* Added top margin */
    }

    .countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .countdown-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .countdown-value {
        background: linear-gradient(to bottom, #1e3a8a, #172554);
        border: 1px solid #2563eb;
        border-radius: 8px;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
    }

    .countdown-label {
        font-size: 0.75rem;
        color: var(--text-gray);
        margin-top: 0.5rem;
        text-transform: uppercase; /* Added for style */
    }

    .countdown-divider {
        font-size: 2rem;
        font-weight: 700;
        margin-top: -1rem; /* Adjusts vertical alignment with numbers */
        color: var(--accent-blue); /* Styled divider */
    }

    /* Bonus Section */
    .bonuses {
        padding: 5rem 0;
        text-align: center;
    }

    .bonuses h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .bonuses h2 {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    .bonus-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }

    .bonus-card {
        background: linear-gradient(to bottom, var(--card-bg), var(--card-bg-darker));
        border: 1px solid var(--card-border);
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .bonus-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    .bonus-header {
        background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
        padding: 1rem;
        text-align: center;
    }

    .bonus-header h3 {
        font-size: 1.25rem;
    }

    .bonus-content {
        padding: 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .bonus-content h4 {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        min-height: 2.5em; /* Helps align titles if they wrap to 2 lines */
        color: var(--text-white);
    }

    .bonus-image {
        margin: 0 auto 1.5rem;
        width: 220px; /* Slightly smaller for balance */
        height: 220px;
        background: linear-gradient(to bottom right, var(--blue-gradient-start), var(--blue-gradient-end));
        padding: 0.75rem; /* Adjusted padding */
        border-radius: 8px;
        border: 1px solid rgba(59, 130, 246, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bonus-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .bonus-features {
        list-style: none;
        text-align: left;
        margin-bottom: 1.5rem;
        flex-grow: 1; /* Pushes footer down */
    }

    .bonus-features li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        color: var(--text-gray);
        font-size: 0.95rem; /* Slightly adjusted font size */
    }

    .bonus-features li i {
        color: var(--accent-cyan);
        margin-right: 0.75rem; /* Increased spacing */
        flex-shrink: 0;
        margin-top: 0.2em; /* Align icon better with text */
    }

    .bonus-footer {
        background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
        padding: 1rem;
        text-align: center;
        margin-top: auto; /* Ensures footer is at the bottom */
    }

    .bonus-footer p {
        font-size: 1.1rem;
        font-weight: 600;
    }

    /* Testimonial Section */
    .testimonials {
        /* padding: 5rem 0; */
        text-align: center;
    }

    .testimonials h2 {
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }

    /* NEW: Testimonial Grid Styles */
    .testimonial-grid {
        display: grid;
        /* Default to 1 column, adjust with media queries */
        grid-template-columns: 1fr;
        gap: 2rem; /* Spacing between grid items */
        max-width: 1200px; /* Optional: constrain the grid width */
        margin: 0 auto; /* Center the grid if max-width is set */
    }


    /* Styles for individual testimonial cards (largely the same) */
    .testimonial {
        /* flex: 0 0 100%; REMOVE THIS - no longer a slider item */
        background: linear-gradient(145deg, var(--card-bg), var(--card-bg-darker));
        border: 1px solid var(--card-border);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        display: flex;
        max-width: 600px;
        flex-direction: column;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .single-testimonial .testimonial{
        margin: 0 auto;
    }
    

    .testimonial:hover { /* Optional hover effect for grid items */
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.35);
    }

    .testimonial-video-wrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        /* margin-bottom: 1.5rem; */
        border-radius: 8px;
        background-color: #000;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .testimonial-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .testimonial-content {
        text-align: left;
        flex-grow: 1; /* Allows quote to push info to top if card height varies */
        display: flex;
        flex-direction: column;
    }

    .testimonial-info {
        margin-bottom: 1rem;
    }

    .testimonial-info h4 {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
        color: var(--text-white);
    }

    .testimonial-role {
        color: var(--accent-cyan);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .testimonial-rating {
        color: var(--accent-yellow);
        font-size: 0.9rem;
    }

    .testimonial-quote {
        font-style: italic;
        color: var(--text-gray);
        font-size: 1rem;
        line-height: 1.5;
        border-left: 3px solid var(--accent-blue);
        padding-left: 1rem;
        margin-top: auto; /* Pushes quote to bottom if content above is short */
    }

    /* REMOVED: .testimonial-slider, .testimonial-container (as flex), .testimonial-nav, .testimonial-nav-btn, .dot styles */

    /* Responsive Grid Columns for Testimonials */
    @media (min-width: 768px) {
        .testimonial-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets and up */
        }
    }

    @media (min-width: 1024px) {
        .testimonial-grid {
            grid-template-columns: repeat(2, 1fr); /* 3 columns on larger desktops */
        }

        .testimonial {
            padding: 0.5rem; /* Slightly more padding on larger cards */
        }
    }

    /* Guarantee Section */
    .guarantee {
        padding: 0 0 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .guarantee-box {
        max-width: 800px;
        margin: 0 auto;
        background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
        border: 1px solid var(--card-border);
        border-radius: 12px;
        padding: 2.5rem;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .guarantee-icon {
        font-size: 3rem;
        color: var(--accent-cyan);
       
    }

    .guarantee-icon img{
        width: 250px;
    }

    .guarantee-box h3 {
        font-size: 1.75rem; /* Slightly larger */
        margin-bottom: 1rem;
        color: var(--text-white);
    }

    .guarantee-box p {
        color: var(--text-gray);
        margin-bottom: 2rem; /* Increased spacing */
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.05rem; /* Slightly larger for readability */
    }

    .guarantee-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        background-color: rgba(0,0,0,0.2);
        border-radius: 50px;
        color: var(--accent-cyan);
        font-weight: 600;
    }

    .guarantee-badge i {
        margin-right: 0.5rem;
    }

    .sub-cta {
        color: var(--text-gray);
        font-size: 1.3rem;
        margin-bottom: 1rem;
        margin-top: -1.1rem;
    }

    /* Sticky Bar */
    .sticky-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to right, #1e40af, #1e3a8a);
        border-top: 1px solid #3b82f6;
        padding: 0.75rem 0;
        transform: translateY(100%);
         /* Add the following for better mobile compatibility */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .sticky-bar.visible {
        transform: translateY(0);
    }

    .sticky-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .sticky-info {
        display: flex;
        align-items: center;
    }

    .sticky-info i {
        font-size: 2.5rem;
        color: var(--accent-yellow);
        margin-right: 1rem;
        display: none;
    }

    .sticky-title {
        font-weight: 700;
        font-size: 1.1rem;
    }

    .sticky-subtitle {
        color: var(--accent-cyan);
    }

    .sticky-button {
        background: linear-gradient(
  to right,
  #ff4d4d,
  #ff1a1a,
  #e60000,
  #b30000
);
        color: #000;
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        white-space: nowrap;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

    .sticky-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    }

    /* Responsive Styles */
    @media (min-width: 600px) {
        .masterclass-header {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }

    @media (min-width: 768px) {
        .hero h1 {
            font-size: 3rem;
        }
        .hero h2 {
            font-size: 2rem;
        }
        .masterclass-section {
            max-width: 1200px; /* Masterclass section gets wider */
        }
        .masterclass-title{
            margin-bottom: 1rem !important;
        }
        .countdown-value {
            width: 80px;
            height: 80px;
            font-size: 2.5rem;
        }
        .sticky-info i {
            display: block; /* Show smile icon */
        }

        .testimonials h1 {
            font-size: 2.5rem;
        }
        .testimonials h2 {
            font-size: 2rem;
        }
        .guarantee h1 {
            font-size: 2.5rem;
        }
        .guarantee h2 {
            font-size: 2rem;
        }
    }

    @media (max-width: 767px) {
        .hero { padding: 1rem 0; }
        .hero h1 { font-size: 2.25rem; }
        .hero h2 { font-size: 1.5rem; }
        .badge{
            font-size: 0.9rem;}

        .bonuses, .testimonials, .guarantee {
            padding: 2rem 0 1rem; 
        }
        .bonus-cards {
            grid-template-columns: 1fr; /* Stack bonus cards */
        }
        .sticky-content {
            justify-content: center;
            text-align: center; /* Center text if it wraps */
        }
        .sticky-info {
            justify-content: center; /* Center info part if wrapped */
        }
        .countdown-value {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }
        .countdown-divider {
            font-size: 1.5rem;
            margin-top: -0.75rem;
        } 
        .countdown-label {
            font-size: 0.65rem;
        }
        .sub-cta{
            font-size: 0.8rem;
        }
    }

    @media (max-width: 480px) {
        .hero h1 { font-size: 1.6rem; margin-bottom: 1rem; }
        .hero h2 { font-size: 1.25rem; margin-bottom: 10px; }

        .masterclass-header {
            padding: 1rem; /* Reduce padding on small screens */
            text-align: center;
        }
        .masterclass-title { font-size: 1.1rem; }
        .masterclass-date { font-size: 0.9rem; }

        .countdown-container { margin: 0; }
        .countdown { gap: 0.25rem; }
        .countdown-value {
            width: 50px;
            height: 50px;
            font-size: 1.25rem;
        }
        .countdown-label { font-size: 0.6rem; }
        .countdown-divider {
            font-size: 1.25rem;
            margin-top: -0.6rem;
        }
        .cta-button {
            font-size: 1.1rem;
            width: 100%;
            padding: 0.75rem 1.5rem;
        }
        .bonuses h2, .testimonials h2 {
            font-size: 1.8rem;
            margin-bottom: 2rem;
        }
        .bonus-card { padding: 1rem; }
        .bonus-content h4 { font-size: 1rem; }

        .testimonial { padding: 1rem; }
        .testimonial-info h4 { font-size: 1.1rem; }
        .testimonial-quote { font-size: 0.95rem; }

        .guarantee-box { padding: 1.5rem; }
        .guarantee-box h3 { font-size: 1.8rem; }
        .guarantee-box p { font-size: 0.95rem; }

        .sticky-bar { padding: 0.5rem 0; }
        .sticky-title { font-size: 1rem; }
        .sticky-subtitle { font-size: 0.8rem; }
        .sticky-button {
            font-size: 1.2rem;
            padding: 0.6rem 1.2rem;
            width: 100%; /* Make button full width on very small screens */
            margin-top: 0.5rem; /* Add some space if it wraps under text */
        }
        .sticky-content {
            gap: 0.5rem; /* Reduce gap for very small screens */
        }

        .bonuses h1 {
            font-size: 1.8rem;
        }
        .bonuses h2 {
            font-size: 1.4rem;
        }
    }