/* Blue Theme Variables */
:root {
    --primary-color: #0066cc;
    /* Deep Blue */
    --primary-dark: #004c99;
    --primary-light: #e6f0ff;
    --accent-color: #00c4cc;
    /* Teal/Cyan for accents */
    --text-main: #1a1a1a;
    --text-body: #4a5568;
    --text-light: #ffffff;
    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 8px;
    --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
    --max-width: 1200px;
}

/* Global Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--text-body);
    background-color: var(--bg-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    line-height: 1.2;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 80px 0;
}

.text-primary {
    color: var(--primary-color);
}

.text-center {
    text-align: center;
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-dark {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
    box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-light);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Hero Section */
.hero {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text-col {
    text-align: left;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.hero-h2 {
    font-size: 2.5rem;
    color: #5e5d5d;
}

.hero p {
    font-size: 1.15rem;
    color: var(--text-body);
    margin-bottom: 30px;
}

/* Feature Chips */
.feature-chips {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.feature-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.feature-chip i {
    color: var(--primary-color);
}

/* Hero Form Card */
.hero-form-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}

.form-header {
    text-align: center;
    margin-bottom: 24px;
}

.form-header h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.form-header p {
    font-size: 0.9rem;
    color: var(--text-body);
    margin-bottom: 15px;
}

.price-banner {
    background: #fff8e1;
    /* Light yellow for contrast */
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #ffeebb;
}

.price-strike {
    text-decoration: line-through;
    color: #999;
}

.price-final {
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--text-main);
}

.discount-tag {
    background: #27c93f;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.hero-form .form-group {
    margin-bottom: 15px;
}

.hero-form input,
.hero-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.hero-form input:focus,
.hero-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    border-width: 2px;
    margin: -1px;
    /* Prevent layout shift */
    margin-bottom: 14px;
}

.hero-stats {
    display: flex;
    justify-content: flex-start;
    /* Left align stats now */
    gap: 40px;
    margin-top: 40px;
}


/* Tech Badges */
.tech-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.tech-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.tech-badge img {
    height: 20px;
    width: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.25rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-stats {
        justify-content: center;
    }

    .nav-links {
        display: none;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .btn-primary {
        font-size: 12px;
    }
}

/* Urgency Bar */
.urgency-bar {
    background-color: var(--bg-dark);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1001;
}

.urgency-bar .highlight {
    color: var(--accent-color);
    font-weight: bold;
}

/* Terminal Visual */
.terminal-window {
    background: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: 'Consolas', 'Monaco', monospace;
    text-align: left;
    margin-top: 40px;
    border: 1px solid #333;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.terminal-header {
    background: #2d2d2d;
    padding: 10px 15px;
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

.terminal-body {
    padding: 20px;
    color: #fff;
    font-size: 0.9rem;
}

.cmd {
    color: #f1c40f;
}

.log {
    color: #ddd;
}

.success {
    color: #2ecc71;
    font-weight: bold;
}

.cursor {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Course Comparison Table (New) */
.course-comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    text-align: center;
    margin-top: 30px;
}

.course-comparison-table th {
    padding: 20px 10px;
    font-size: 1.2rem;
    font-weight: 800;
    border-bottom: 2px solid #eee;
    vertical-align: bottom;
}

.course-comparison-table td {
    padding: 18px 10px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.95rem;
    color: var(--text-body);
    vertical-align: middle;
}

.course-comparison-table tr:last-child td {
    border-bottom: none;
}

.course-comparison-table th.feature-head {
    text-align: left;
    color: var(--text-main);
}

.course-comparison-table td.feature-row-head {
    text-align: left;
    font-weight: 600;
    color: var(--text-main);
}

/* Column Headers Colors */
.col-java {
    color: #e76f00;
}

.col-python {
    color: #3776ab;
}

.col-dotnet {
    color: #512bd4;
}

.col-mern {
    color: #00a98f;
}

@media (max-width: 768px) {
    .course-comparison-table {
        min-width: 800px;
        /* Force horizontal scroll on mobile */
    }
}

/* Golden Quad Badge */
.badge-pill {
    background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
    /* Cyan to Blue */
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 198, 255, 0.4);
}

.btn-syllabus {
    background: #004c99;
    /* Dark Blue */
    color: white;
    border-radius: 8px;
    padding: 14px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0, 76, 153, 0.3);
}

.btn-syllabus:hover {
    background: #003366;
    transform: translateY(-2px);
}

/* Tabbed Syllabus Section */
.syllabus-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.tab-btn i {
    font-size: 1.2rem;
}

.tab-btn:hover {
    color: var(--primary-color);
    background: var(--bg-light);
}

.tab-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.syllabus-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.syllabus-content.active {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: start;
}

@media (max-width: 768px) {
    .syllabus-content.active {
        grid-template-columns: 1fr;
    }
}

/* Left Side: Track Info */
.track-info {
    text-align: left;
}

.track-info h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-main);
}

.track-desc {
    font-size: 1.1rem;
    color: var(--text-body);
    margin-bottom: 30px;
}

/* Right Side: Modules List */
.track-modules {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.module-detail-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    text-align: left;
}

.module-detail-card h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topic-tag {
    background: var(--bg-light);
    color: var(--text-main);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.topic-tag:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-light);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tools & Technologies Section */
.tools-tech-section {
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.tools-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}

/* Left: Tool Badges */
.tools-intro h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.tools-intro p {
    color: var(--text-body);
    margin-bottom: 30px;
    font-size: 1rem;
}

.tool-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tool-pill {
    background: #ffeebb;
    /* Yellow background from image */
    color: #333;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    border: 1px solid #ffd580;
}

.tool-pill:hover {
    transform: translateY(-3px);
    background: #ffd580;
}

/* Right: Progress Bars */
.tech-progress-container h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.skill-bar-item {
    margin-bottom: 20px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.progress-track {
    background: #e2e8f0;
    height: 10px;
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    /* Green in image, keeping Blue theme or adapting? User image has Green text, bars are grey? No, bars look grey in screenshot? Ah, screenshot has grey background bars... wait. The user image bars are grey? No, typically they are filled. I will use primary blue for fill. */
    width: 0%;
    /* Animate width */
    border-radius: 20px;
    transition: width 1.5s ease-out;
}

@media (max-width: 768px) {
    .tools-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Student Reviews Infinite Scroll */
.reviews-section {
    background: #f8fafc;
    overflow: hidden;
    /* Hide scrollbar */
}

/* Container for the marquee */
.reviews-marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0 40px 0;
    cursor: grab;
    /* optional: if we add JS drag later */
}


/* The moving track */
.reviews-track {
    display: flex;
    gap: 30px;
    animation: scroll 40s linear infinite;
    /* Adjust speed here */
    width: max-content;
}

/* Pause animation on hover */
.reviews-marquee:hover .reviews-track {
    animation-play-state: paused;
}

/* Individual Card */
.review-card {
    max-width: 350px;
    background: white;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    /* Removed scroll-snap logic as we are using animation now */
    white-space: normal;
    /* Allow text to wrap inside card */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Keyframes for scrolling left */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-350px * 7 - 30px * 7));
        /* Move by (card_width + gap) * number_of_unique_cards */
        /* Calculation: 7 unique cards. 350px width + 30px gap = 380px per card. 380 * 7 = 2660px */
        /* Wait, I added 7 unique reviews in index.html (Review 1-4, 5, 6, 7). 
           So width to move is approx 50%.
           Better is to use percentage if width is known, or fit-content.
           Actually, the safer way for seamless loop is -50% if we duplicated EXACTLY 1 set.
           My index.html has:
           Set 1: 7 cards
           Set 2: 6 cards (Review 1-6 duplicated) -> Wait, I should double check if I duplicated ALL 7.
           Let me check my previous output.
        */
        transform: translateX(-50%);
        /* Works best if track contains exactly 2 identical sets of items */
    }
}

.review-stars {
    color: #ffc107;
    /* Star yellow */
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.review-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-body);
    margin-bottom: 30px;
    line-height: 1.6;
}

.reviewer-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.reviewer-details h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
}

.reviewer-role {
    font-size: 0.85rem;
    color: var(--text-body);
}

.review-tag {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.reviews-disclaimer {
    margin-top: 30px;
    font-size: 0.85rem;
    color: var(--text-body);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .review-card {
        max-width: 300px;
    }

    .reviews-track {
        animation-duration: 30s;
        /* Faster on mobile? Or slower? usually same is fine */
    }
}

/* Growth/Booming Section */
.growth-section {
    background: white;
}

.growth-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.growth-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.growth-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 102, 204, 0.1);
    border-color: var(--primary-light);
}

.growth-title-lg {
    font-size: 1.1rem;
    color: var(--text-body);
    font-weight: 600;
}

.growth-value-lg {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 10px 0;
}

.growth-source {
    font-size: 0.85rem;
    color: var(--text-body);
    opacity: 0.7;
    margin-bottom: 20px;
}

.salary-graph {
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(230, 240, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 10px;
}

/* Industry Relevant Syllabus Section */
.industry-relevant-section {
    background: var(--bg-light);
}

.syllabus-check-card {
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    max-width: 900px;
    /* Centered width */
    margin: 0 auto;
    border: 1px solid var(--border-color);
}

.syllabus-check-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 40px;
}

.check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.check-item:last-child {
    border-bottom: none;
}

.check-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.check-icon-box {
    width: 50px;
    height: 50px;
    background: #eff6ff;
    /* Light Blue bg */
    color: var(--primary-color);
    /* Blue icon */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.check-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: left;
}

.check-mark {
    color: #27c93f;
    /* Green check */
    font-size: 1.5rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .syllabus-check-card {
        padding: 30px;
    }

    .check-item {
        align-items: flex-start;
    }

    .check-mark {
        margin-top: 10px;
    }
}

/* Horizontal Process Roadmap (Redesign) */
.roadmap-section-horizontal {
    background: var(--bg-light);
    padding: 80px 0;
    color: var(--text-main);
}

.process-flow-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    position: relative;
    max-width: 1000px;
    margin: 40px auto 0;
}

.process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 10px;
}

.step-icon-box {
    width: 90px;
    height: 90px;
    background: white;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 3px solid white;
}

.step-icon-box i {
    font-size: 2rem;
    color: #64748b;
    transition: color 0.3s ease;
}

/* Hover Effects */
.process-step:hover .step-icon-box {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 102, 204, 0.15);
}

.process-step:hover .step-icon-box i {
    color: var(--primary-color);
}

.step-content {
    text-align: center;
}

.step-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.step-content p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
}

/* Connector Arrow */
.process-arrow {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    /* Aligns with icon box */
    color: #cbd5e1;
    font-size: 2rem;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .process-flow-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .process-step {
        width: 100%;
        max-width: 400px;
        flex-direction: row;
        align-items: center;
        text-align: left;
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
    }

    .step-icon-box {
        margin-bottom: 0;
        margin-right: 20px;
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        border-width: 2px;
    }

    .step-icon-box i {
        font-size: 1.5rem;
    }

    .step-content {
        text-align: left;
    }

    .process-arrow {
        display: none;
        /* Hide horizontal arrows on mobile */
    }

    /* Add vertical connectors if needed, or keeping it clean as stacked cards */
    .process-step::after {
        content: '';
        display: block;
        width: 2px;
        height: 20px;
        background: #e2e8f0;
        position: absolute;
        bottom: -20px;
        left: 55px;
        /* Center of icon */
    }

    .process-step:last-child::after {
        display: none;
    }
}

/* Simple CSS Graph Bars/Points simulation since we lack SVG lib */
.salary-point {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 2px solid white;
}

.growth-card-sm {
    background: white;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
    height: calc(50% - 15px);
    /* Half height minus gap */
    transition: all 0.3s ease;
}

.growth-card-sm:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 102, 204, 0.1);
    border-color: var(--primary-light);
}

.growth-card-sm:last-child {
    margin-bottom: 0;
}

.growth-value-highlight {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    margin-top: 10px;
}

.growth-desc {
    font-size: 0.95rem;
    color: var(--text-body);
    margin-top: 10px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .growth-grid {
        grid-template-columns: 1fr;
    }

    .growth-card-sm {
        height: auto;
        margin-bottom: 20px;
    }
}

/* Why Alpha Tech Section */
.why-alpha-section {
    background: white;
}

.why-alpha-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.why-alpha-card {
    background: white;
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 16px;
    transition: all 0.3s ease;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.why-alpha-card:hover {
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1);
    transform: translateY(-5px);
    border-color: var(--primary-light);
}

.why-icon {
    width: 50px;
    height: 50px;
    background: #eff6ff;
    /* Light Blue */
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.why-alpha-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-main);
}

.why-alpha-card p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.6;
}

.why-bottom-bar {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    font-weight: 600;
    width: 100%;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bar-item i {
    font-size: 1.2rem;
}

@media (max-width: 992px) {
    .why-alpha-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .why-alpha-grid {
        grid-template-columns: 1fr;
    }

    .why-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }
}