/* Custom Theme for Startup Workshop (Blue Theme like AI Page) */
:root {
    --theme-primary: #007bff;
    /* Blue */
    --theme-secondary: #0056b3;
    /* Darker Blue */
    --theme-accent: #ffca28;
    /* Gold Accent */
    --theme-bg: #f8fafc;
    /* Light Blue/Gray BG */
}

body {
    background: var(--theme-bg);
}

.top-bar {
    background: #0a84ff;
}

.hero-section {
    background: #ffffff;
    /* Match AI page white background */
    color: #1f2937;
    /* Dark text */
    position: relative;
    overflow: hidden;
}

.hero-left h1 {
    color: #1f2937;
}

.hero-left .highlight {
    color: #007bff;
}

.hero-left .subtext {
    color: #4b5563;
}

.masterclass-details {
    background: #f1f5f9;
    border-left: 5px solid #007bff;
    backdrop-filter: none;
    color: #1f2937;
    padding: 20px;
    border-radius: 14px;
    margin-top: 20px;
    width: fit-content;
}

.cta-big {
    background: #007bff;
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
}

.cta-big:hover {
    background: #0056b3;
}

.learn-section {
    background: white;
}

.learn-grid div {
    border-left: 4px solid #007bff;
}

.register-box {
    border-top: 5px solid #007bff;
}

.pill {
    background: #e0f2fe;
    color: #007bff;
}

/* Floating Icons Animation */
.floating-icon {
    position: absolute;
    opacity: 0.05;
    animation: float 6s ease-in-out infinite;
    color: #007bff;
}

.learn-grid div:nth-child(2) {
    transition-delay: 0.2s;
}

.learn-grid div:nth-child(3) {
    transition-delay: 0.3s;
}

.learn-grid div:nth-child(4) {
    transition-delay: 0.4s;
}

/* Mobile First Refinements */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 20px;
        text-align: center;
    }

    .hero-left h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .subtext {
        font-size: 16px;
    }

    .masterclass-details {
        width: 100%;
        margin-top: 20px;
        text-align: left;
    }

    .learn-grid,
    .problem-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .transformation-grid {
        flex-direction: column;
    }

    .before,
    .after {
        width: 100%;
    }

    .mentor-box {
        flex-direction: column;
        text-align: center;
    }

    .mentor-box img {
        margin-bottom: 15px;
    }
}