/* Import Oswald and Quicksand Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    background-color: #F5F5F5;
    font-weight: 500;
}

/* Header and Navigation */
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

header {
    background-color: #2a2a2a;
    color: white;
    padding: 0.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo img {
    height: 80px;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}

.logo-text h1 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.logo-text p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    grid-column: 2;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Oswald', sans-serif;
    padding: 0.5rem 0;
}

.nav-links a:hover {
    color: #00acff;
}

/* Main Content */
main {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
}

/* Override main width for home page with redesigned sections */
body:has(.hero-redesign) main {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(1, 112, 185, 0.85), rgba(1, 112, 185, 0.85)), url('../assetsimages/jet-mechanic-jobs.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem 3rem;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 3rem;
}

.hero h2 {
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.hero-btn {
    background-color: white;
    color: #0170B9;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
}

.hero-btn:hover {
    background-color: #00acff;
    color: white;
}

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

/* Cards */
.card {
    background: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddddd;
}

.card h3 {
    color: #3a3a3a;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid #0170B9;
    padding-bottom: 0.5rem;
}

.categories {
    list-style: none;
}

.categories li {
    padding: 0.75rem;
    margin: 0.5rem 0;
    background-color: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #dddddd;
    transition: all 0.3s;
}

.categories li:hover {
    background-color: #0170B9;
    border-color: #0170B9;
}

.categories a {
    color: #0170B9;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.categories li:hover a {
    color: white;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #3a3a3a;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dddddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #0170B9;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* Buttons */
/* Base button styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

.btn-full-width {
    width: 100%;
    display: block;
}

/* Primary button - Blue */
.btn-primary {
    background: #0170b9;
    color: white;
}

.btn-primary:hover {
    background: #015a94;
    color: white;
}

/* Secondary button - Gray */
.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background: #5a6268;
    color: white;
}

/* Success/Accept button - Green */
.btn-accept,
.btn-success {
    background: #4caf50;
    color: white;
}

.btn-accept:hover,
.btn-success:hover {
    background: #43a047;
    color: white;
}

/* Danger/Reject button - Red */
.btn-reject,
.btn-danger {
    background: #f44336;
    color: white;
}

.btn-reject:hover,
.btn-danger:hover {
    background: #e53935;
    color: white;
}

/* Message button - Blue (same as primary) */
.btn-message {
    background: #0170b9;
    color: white;
}

.btn-message:hover {
    background: #015a94;
    color: white;
}

/* View button - Solid blue */
.btn-view {
    background: #0170b9;
    color: white;
}

.btn-view:hover {
    background: #015a94;
    color: white;
}

/* Delete button - Outlined red */
.btn-delete {
    background: white;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.btn-delete:hover {
    background: #ffebee;
    color: #dc3545;
}

/* Withdraw button - Outlined red (similar to delete) */
.btn-withdraw {
    background: white;
    color: #c62828;
    border: 2px solid #c62828;
}

.btn-withdraw:hover {
    background: #ffebee;
    color: #c62828;
}

/* Disabled button state */
.btn-disabled,
.btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-disabled:hover,
.btn:disabled:hover {
    background: #cccccc;
    color: #666666;
}

/* Footer */
footer {
    background-color: #2a2a2a;
    color: white;
    padding: 3rem 1.5rem 1.5rem;
    margin-top: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-bottom: 2rem;
}

.footer-mission h3 {
    color: #0170B9;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.footer-mission p {
    color: #ccc;
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
}

.footer-menus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.footer-menu h4 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}

.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.75rem;
}

.footer-menu a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    display: block;
}

.footer-menu a:hover {
    color: #0170B9;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-menus {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Course & Module Pages */
.course-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.module-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.module-number {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9, #0056a3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    width: fit-content;
}

.module-card h3 {
    color: #2a2a2a;
    margin: 0.5rem 0 1rem;
    font-size: 1.5rem;
}

.module-card p {
    color: #666;
    flex-grow: 1;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.module-meta {
    display: none;
}

.course-progress-summary {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-progress-summary h2 {
    margin-top: 0;
    margin-bottom: 2rem;
    color: #2a2a2a;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0170B9;
    margin-bottom: 0.5rem;
}

.stat-label {
    display: block;
    color: #666;
    font-size: 0.95rem;
}

/* Module Detail Pages */
.module-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.module-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: #0170B9;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #0056a3;
}

.module-title-section {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-title-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.module-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9, #0056a3);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0;
}

.module-title-section h1 {
    margin: 0;
    color: #2a2a2a;
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.module-title-section p {
    color: #666;
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
}

.module-video-section {
    margin: 2rem 0;
}

.video-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-content-area {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    min-height: 400px;
}

.module-section {
    margin-bottom: 3rem;
}

.module-section:last-child {
    margin-bottom: 0;
}

.module-section h2 {
    color: #2a2a2a;
    font-size: 1.8rem;
    margin: 0 0 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 1rem;
}

.section-content {
    color: #666;
    line-height: 1.6;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1.15rem;
}

.section-content p,
.section-content li,
.section-content a,
.section-content span {
    font-family: 'Quicksand', sans-serif !important;
}

.highlight-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.highlight-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.highlight-list li::before {
    content: '✈';
    position: absolute;
    left: 0;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
}

.content-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}

.content-placeholder p {
    font-size: 1.2rem;
    margin: 0;
}

/* Welcome section navigation */
.welcome-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.welcome-navigation .btn {
    flex: 1;
    min-width: 150px;
    box-shadow: none;
}

.btn-slim {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Footer navigation */
.module-navigation-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.module-navigation-footer .btn {
    flex: 1;
    min-width: 200px;
}

.btn-arrow {
    font-weight: 900;
    font-size: 1.2em;
    display: inline-block;
    text-shadow:
        -0.5px -0.5px 0 currentColor,
        0.5px -0.5px 0 currentColor,
        -0.5px 0.5px 0 currentColor,
        0.5px 0.5px 0 currentColor;
}

/* Responsive Course Pages */
@media (max-width: 968px) {
    .modules-grid {
        grid-template-columns: 1fr;
    }

    .progress-stats {
        grid-template-columns: 1fr;
    }

    .module-content-area {
        padding: 2rem 1.5rem;
    }

    .module-navigation-footer {
        flex-direction: column;
    }

    .module-navigation-footer .btn {
        width: 100%;
    }

    .course-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .module-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Work Experience Specific Styles */
.experience-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #F5F5F5;
    border: 1px solid #dddddd;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.experience-item:hover {
    box-shadow: 0 2px 8px rgba(1, 112, 185, 0.1);
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.experience-header h4 {
    color: #3a3a3a;
    font-weight: 600;
    font-size: 1.2rem;
}

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #0170B9;
    color: white;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 500;
}

.experience-item .company {
    color: #3a3a3a;
    margin-bottom: 0.5rem;
}

.experience-item .date-range {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.experience-item .description {
    color: #3a3a3a;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.experience-item .skills {
    color: #3a3a3a;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.experience-item .actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dddddd;
}

/* Login Page Specific Styles */
.login-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
}

.login-container.centered {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
}

.login-card {
    max-width: 800px;
    width: 100%;
}

.login-options {
    margin-top: 1.5rem;
    text-align: center;
}

.login-options a {
    color: #0170B9;
    text-decoration: none;
}

.login-options a:hover {
    color: #00acff;
    text-decoration: underline;
}

.info-card ul {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.info-card li {
    margin-bottom: 0.5rem;
    color: #3a3a3a;
}

/* Profile Page Specific Styles */
.content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.summary-stats {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-item h4 {
    font-size: 2.5rem;
    color: #0170B9;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: #3a3a3a;
    font-weight: 500;
}

.category-breakdown ul {
    list-style: none;
    margin-top: 1rem;
}

.category-breakdown li {
    padding: 0.5rem 0;
    color: #3a3a3a;
    border-bottom: 1px solid #dddddd;
}

.category-breakdown li:last-child {
    border-bottom: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links */
a {
    color: #0170B9;
    transition: color 0.3s;
}

a:hover {
    color: #00acff;
}

/* Landing Page Specific Styles */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: #3a3a3a;
    margin-bottom: 2rem;
}

.programs {
    margin-bottom: 4rem;
}

.program-card {
    display: flex;
    flex-direction: column;
}

.program-features {
    list-style: none;
    margin: 1.5rem 0;
    flex-grow: 1;
}

.program-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #3a3a3a;
}

.program-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0170B9;
    font-weight: bold;
}

.program-card .btn {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}

.cta-section {
    background: linear-gradient(135deg, #0170B9 0%, #00acff 100%);
    color: white;
    padding: 4rem 2rem;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 4rem;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    background-color: white;
    color: #0170B9;
}

.btn-large:hover {
    background-color: #2a2a2a;
    color: white;
}

.why-choose {
    margin-bottom: 4rem;
}

/* Benefits Table */
.benefits-table-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    margin-bottom: 4rem;
}

.benefits-table {
    max-width: 800px;
    margin: 0 auto 2rem;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.benefit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #dddddd;
}

.benefit-row:last-child {
    border-bottom: none;
}

.benefit-row:nth-child(even) {
    background-color: #F5F5F5;
}

.benefit-name {
    font-size: 1.1rem;
    color: #3a3a3a;
    font-weight: 500;
}

.benefit-access {
    color: #0170B9;
    font-weight: 600;
    font-size: 1.1rem;
}

.benefits-cta {
    text-align: center;
    margin-top: 2rem;
}

.price-highlight {
    font-size: 1.5rem;
    color: #3a3a3a;
    margin-bottom: 1.5rem;
}

.price-highlight strong {
    color: #0170B9;
    font-size: 1.8rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h2 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .content {
        grid-template-columns: 1fr;
    }

    .login-container {
        grid-template-columns: 1fr;
    }

    .experience-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .benefit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
    }

    .benefit-name {
        font-size: 1rem;
    }

    .benefit-access {
        font-size: 1rem;
    }

    .price-highlight {
        font-size: 1.2rem;
    }

    .price-highlight strong {
        font-size: 1.5rem;
    }
}


/* Checkout Page Styles */
.pricing-details {
    margin: 2rem 0;
}

.price-tag {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.price-tag .currency {
    font-size: 2rem;
    vertical-align: super;
}

.price-tag .amount {
    font-size: 4rem;
    font-weight: bold;
}

.price-tag .period {
    font-size: 1.5rem;
    opacity: 0.9;
}

.membership-features {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.membership-features h3 {
    color: #FF6B35;
    margin-bottom: 1rem;
}

.membership-features ul {
    list-style: none;
    padding: 0;
}

.membership-features li {
    padding: 0.5rem 0;
    color: #3a3a3a;
    font-size: 1rem;
}

.billing-info {
    padding: 1rem;
    background-color: #e9ecef;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.billing-info p {
    margin: 0.5rem 0;
}

.secure-checkout {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.secure-checkout p {
    margin: 0.5rem 0;
    color: #6c757d;
}

.small-text {
    font-size: 0.875rem;
}

.testimonial {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-left: 4px solid #FF6B35;
    margin: 1.5rem 0;
    font-style: italic;
}

.faq-item {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.faq-item p {
    margin: 0.5rem 0;
}

.faq-item strong {
    color: #FF6B35;
}

/* Subscription CTA on Signup Page */
.subscription-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
}

.subscription-cta h3 {
    color: white;
    margin-bottom: 0.5rem;
}

.subscription-cta p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Payment Section on Signup Page */
.payment-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
}

.payment-section h3 {
    color: #FF6B35;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.payment-note {
    color: #5a5a5a;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.stripe-card-element {
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background-color: white;
    transition: border-color 0.3s;
}

.stripe-card-element:hover {
    border-color: #0170B9;
}

.stripe-card-element.StripeElement--focus {
    border-color: #0170B9;
    box-shadow: 0 0 0 2px rgba(1, 112, 185, 0.1);
}

.stripe-card-element.StripeElement--invalid {
    border-color: #fa755a;
}

.card-errors {
    color: #fa755a;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    min-height: 20px;
}

.billing-address {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.billing-address h4 {
    color: #3a3a3a;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}

.form-group.half-width {
    flex: 1;
}

/* Pricing Highlight on Signup Page */
.pricing-highlight {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.price-badge {
    margin-bottom: 0.5rem;
}

.price-badge .currency {
    font-size: 1.5rem;
    vertical-align: super;
}

.price-badge .amount {
    font-size: 3rem;
    font-weight: bold;
}

.price-badge .period {
    font-size: 1.2rem;
    opacity: 0.9;
}

.cancel-note {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.95;
}

.pricing-features {
    margin-top: 2rem;
}

.feature-highlight {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.feature-highlight:last-child {
    border-bottom: none;
}

.feature-highlight h4 {
    color: #FF6B35;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.feature-highlight p {
    margin: 0;
    color: #5a5a5a;
}

/* Legal Pages Styling */
.legal-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem;
    width: 100%;
}

.legal-page h1 {
    color: #2a2a2a;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.legal-page h2 {
    color: #3a3a3a;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e0e0e0;
}

.legal-page h3 {
    color: #4a4a4a;
    font-size: 1.3rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-page h4 {
    color: #5a5a5a;
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.legal-page p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: #3a3a3a;
}

.legal-page ul, .legal-page ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.legal-page li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.legal-page strong {
    color: #2a2a3a;
    font-weight: 600;
}

.last-updated {
    color: #777;
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.legal-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid #FF6B35;
    background-color: #fff9f5;
    padding: 1.5rem;
    border-radius: 8px;
}

.legal-footer p {
    margin: 0;
    font-size: 1rem;
}

/* Consent Checkbox Styling */
.consent-group {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #3a3a3a;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.checkbox-label a {
    color: #0170B9;
    text-decoration: underline;
    font-weight: 500;
}

.checkbox-label a:hover {
    color: #00acff;
}

/* ================================
   Dashboard Styles
   ================================ */

/* Dashboard page background - applied to body */
body.dashboard-page {
    background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('../assetsimages/Aircraft%20Mechanic%20Training-min.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

body.dashboard-page main {
    margin: 0;
    padding: 0;
    max-width: none;
}

.dashboard-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 80px);
}

.dashboard-header {
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.dashboard-header-left {
    flex: 0 0 auto;
}

.dashboard-header h1 {
    font-size: 2.5rem;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.dashboard-header #user-greeting {
    font-size: 1.25rem;
    color: #666;
}

.dashboard-messages {
    flex: 1;
    min-width: 0;
    max-width: 600px;
}

.revolving-messages {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.message-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: 1rem;
    color: #0170B9;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem;
    background: #f0f8ff;
    border-radius: 4px;
}

.message-item.active {
    opacity: 1;
    position: relative;
}

@media (max-width: 968px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-messages {
        width: 100%;
        max-width: none;
    }
}

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

.dashboard-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

.dashboard-full-width {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    gap: 1rem;
}

.card-header h2 {
    font-size: 1.5rem;
    color: #2a2a2a;
    margin: 0;
}

.card-icon {
    font-size: 2rem;
}

/* Training Hours Stats */
.stats-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.stat-value {
    display: block;
    font-size: 3.5rem;
    font-weight: bold;
    color: #0170B9;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: #666;
    margin-top: 0.5rem;
    font-family: 'Quicksand', sans-serif;
}

.stat-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0170B9 0%, #F7931E 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-label {
    font-size: 0.9rem;
    color: #666;
}

/* Experiences List */
.experiences-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.experience-item {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0170B9;
}

.experience-title {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.experience-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

.experience-hours {
    font-weight: 600;
    color: #0170B9;
}

/* Account Status */
.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.status-label {
    font-weight: 600;
    color: #666;
}

.status-value {
    color: #2a2a2a;
}

.status-value.status-active {
    color: #28a745;
    font-weight: 600;
}

.status-value.status-canceled,
.status-value.status-past_due {
    color: #dc3545;
    font-weight: 600;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    margin-bottom: 1.5rem;
}

.action-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #2a2a2a;
    transition: all 0.3s ease;
}

.action-link:hover {
    background-color: #e9ecef;
    transform: translateX(5px);
}

.action-icon {
    font-size: 1.5rem;
}

/* Recent Activity */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.activity-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 0.25rem;
}

.activity-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

.activity-date {
    color: #999;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background-color: #2a2a2a;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-error {
    background-color: #dc3545;
}

.toast-success {
    background-color: #28a745;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-header h1 {
        font-size: 2rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-value {
        font-size: 2.5rem;
    }
}

/* Account Management Styles - Unified Horizontal Layout */
.account-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Single Large White Container with Horizontal Sections */
.account-unified-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Individual Account Sections */
.account-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}


/* Section Headers */
.section-header {
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.5rem;
    color: #2a2a2a;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    font-size: 1.5rem;
}

/* Vertical Separator Between Sections */
.section-separator {
    display: none;
}

/* Form Styles */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: #2a2a2a;
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    padding: 0.65rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.form-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 0.5rem;
    justify-content: flex-start;
    align-items: center;
}

.form-actions .btn {
    width: auto;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

/* Subscription Info */
.subscription-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.subscription-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subscription-actions .btn {
    width: 100%;
}

/* Account Actions */
.account-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-link.danger {
    color: #dc3545;
}

.action-link.danger:hover {
    background-color: #dc354510;
}

/* Danger Zone - Separate Container */
.danger-zone-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 2px solid #dc3545;
    background-color: #fff5f5;
}

.danger-warning {
    color: #dc3545;
    margin-bottom: 1rem;
    font-weight: 500;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Message Styles */
.message {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Status Colors */
.status-active {
    color: #28a745;
    font-weight: 600;
}

.status-canceling {
    color: #ffc107;
    font-weight: 600;
}

.status-canceled {
    color: #dc3545;
    font-weight: 600;
}

.status-past_due {
    color: #dc3545;
    font-weight: 600;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    max-width: 400px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background-color: #28a745;
    color: white;
}

.toast-error {
    background-color: #dc3545;
    color: white;
}

.toast-info {
    background-color: #17a2b8;
    color: white;
}

/* Mobile Responsive for Account Pages */
/* Keep horizontal layout on all screen sizes - removed vertical stacking */

@media (max-width: 768px) {
    .account-page-container {
        padding: 1rem;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .account-unified-container {
        padding: 1.5rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .subscription-actions {
        gap: 0.75rem;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}

/* Dynamic Header Navigation Styles */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-2px);
    color: #0170B9;
}

.btn-nav-signup {
    /* Removed orange background styling */
}

.btn-get-started {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-get-started:hover {
    background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    color: white !important;
}

/* User Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.user-avatar {
    font-size: 1.5rem;
}

.user-name {
    font-weight: 500;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    list-style: none;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: #2a2a2a;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dropdown-menu a:hover {
    color: #0170B9;
}

/* Mobile Get Started Button - hidden on desktop */
.mobile-get-started {
    display: none;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    grid-column: 3;
    justify-self: end;
}

.hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: relative;
    transition: background-color 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    position: absolute;
    transition: all 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

.mobile-menu-toggle.active .hamburger {
    background-color: transparent;
}

.mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile Navigation */
@media (max-width: 968px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 0.25rem 0;
    }

    .navbar {
        padding: 0 1rem;
        grid-template-columns: auto 1fr auto;
    }

    .logo img {
        height: 50px;
    }

    /* Mobile Get Started button between logo and hamburger */
    .mobile-get-started {
        display: inline-block;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Oswald', sans-serif;
        justify-self: end;
        margin-right: 1rem;
        white-space: nowrap;
    }

    .mobile-get-started:hover {
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
        color: white;
        text-decoration: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #2a2a2a;
        flex-direction: column;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .nav-links.mobile-active {
        max-height: 100vh;
        padding: 1rem 0;
        overflow-y: auto;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
    }

    .nav-links a {
        padding: 0;
    }

    .nav-link {
        width: 100%;
        padding: 0.35rem 1.5rem !important;
        justify-content: flex-start;
    }

    .btn-nav-signup {
        margin: 0.5rem 0;
        width: 100%;
        display: block;
        text-align: left;
        padding: 1rem 2.5rem;
    }

    /* Hide the Get Started button in the dropdown menu on mobile */
    .btn-get-started {
        display: none !important;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 0.5rem;
        margin-left: 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        color: white;
        padding: 0.75rem 1rem;
    }

    .dropdown-menu a:hover {
        color: #0170B9;
    }
}

/* Tablet Navigation */
@media (max-width: 1024px) and (min-width: 969px) {
    .nav-links {
        gap: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }

    .user-name {
        display: none;
    }
}


/* Message Admin Styles */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f9f9f9;
    border-left: 4px solid #0170B9;
    border-radius: 4px;
    gap: 1rem;
}

.message-admin-content {
    flex: 1;
}

.message-admin-content p {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-weight: 500;
}

.message-admin-content small {
    color: #666;
}

.message-admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* ==================== QUIZ SYSTEM STYLES ==================== */

/* Quiz Container */
.quiz-container {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    padding: 2rem;
    background-color: white;
    min-height: calc(100vh - 200px);
}

/* Quiz Header */
.quiz-header {
    margin-bottom: 2rem;
}

.quiz-title-section h1 {
    color: #2a2a2a;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.quiz-title-section p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Quiz Info */
.quiz-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #0170B9;
}

.quiz-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quiz-info-item strong {
    color: #2a2a2a;
    font-weight: 600;
    font-size: 0.9rem;
}

.quiz-info-item span {
    color: #666;
    font-size: 1.1rem;
}

/* Quiz Start Section */
.quiz-start-section {
    margin-top: 2rem;
    text-align: center;
}

.quiz-start-section .btn {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* Progress Bar */
.quiz-progress-container {
    margin: 2rem 0;
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0170B9, #0056a3);
    transition: width 0.3s ease;
}

.quiz-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #666;
}

/* Quiz Content */
.quiz-content-area {
    margin-top: 2rem;
}

/* Quiz Questions */
.quiz-question {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.question-number {
    font-weight: 600;
    color: #0170B9;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-points {
    font-size: 0.9rem;
    color: #666;
    background-color: #f9f9f9;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.question-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Quiz Answers */
.question-answers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-answer {
    position: relative;
}

.quiz-answer label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-answer label:hover {
    border-color: #0170B9;
    background-color: #f9f9f9;
}

.quiz-answer input[type="radio"],
.quiz-answer input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.quiz-answer input[type="radio"]:checked + .answer-text,
.quiz-answer input[type="checkbox"]:checked + .answer-text {
    font-weight: 600;
}

.quiz-answer label:has(input:checked) {
    border-color: #0170B9;
    background-color: #f0f8ff;
}

.answer-text {
    flex: 1;
    font-size: 1.05rem;
    color: #3a3a3a;
    line-height: 1.5;
}

/* Text Input for Fill in the Blank */
.quiz-text-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1.05rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.quiz-text-input:focus {
    outline: none;
    border-color: #0170B9;
}

/* Quiz Submit Section */
.quiz-submit-section {
    margin-top: 3rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #f0f0f0;
}

.quiz-submit-section .btn {
    font-size: 1.1rem;
    padding: 1rem 3rem;
}

.quiz-submit-section .btn-primary {
    background: #0170b9;
    color: white;
}

.quiz-submit-section .btn-primary:hover {
    background: #015a94;
    color: white;
}

/* Results Section */
.quiz-results-section {
    margin-top: 2rem;
}

.results-card {
    background-color: white;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.results-header {
    text-align: center;
    margin-bottom: 2rem;
}

.results-header h2 {
    font-size: 2rem;
    color: #2a2a2a;
    margin-bottom: 1rem;
}

.results-status {
    margin: 1rem 0;
}

.status-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.1rem;
}

.status-pass {
    background-color: #28a745;
    color: white;
}

.status-fail {
    background-color: #dc3545;
    color: white;
}

/* Score Display */
.results-score {
    text-align: center;
    margin: 2rem 0;
}

.score-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #e0e0e0;
    position: relative;
}

.score-circle.score-pass {
    border-color: #28a745;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.score-circle.score-fail {
    border-color: #dc3545;
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.score-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: #2a2a2a;
}

.score-details {
    margin-top: 1rem;
}

.score-details p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    color: #3a3a3a;
}

/* Results Review */
.results-review {
    margin-top: 3rem;
}

.results-review h3 {
    font-size: 1.5rem;
    color: #2a2a2a;
    margin-bottom: 1.5rem;
    text-align: center;
}

.review-item {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.review-item.review-correct {
    border-left: 4px solid #28a745;
    background-color: #f8fff9;
}

.review-item.review-incorrect {
    border-left: 4px solid #dc3545;
    background-color: #fff8f8;
}

.review-item.review-neutral {
    border-left: 4px solid #6c757d;
    background-color: #f8f9fa;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.review-number {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

.review-status {
    font-weight: 600;
    font-size: 0.95rem;
}

.review-correct .review-status {
    color: #28a745;
}

.review-incorrect .review-status {
    color: #dc3545;
}

.review-question {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 1rem;
}

.review-item p {
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #3a3a3a;
}

.review-explanation {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    color: #666 !important;
    font-style: italic;
}

/* Results Actions */
.results-actions {
    margin-top: 3rem;
    text-align: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Loading Indicator */
.quiz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0170B9;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.quiz-loading p {
    font-size: 1.1rem;
    color: #666;
}

/* Error Message */
.quiz-error {
    text-align: center;
    padding: 3rem 2rem;
}

.quiz-error p {
    font-size: 1.2rem;
    color: #dc3545;
    margin-bottom: 2rem;
}

/* Lead Magnet Gate (for public quiz access) */
.lead-magnet-gate {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0;
}

.lead-magnet-gate .lead-magnet-content {
    display: block;
    text-align: center;
}

.lead-magnet-content h2 {
    color: #1e40af;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.lead-magnet-content > p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.lead-form-error {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: left;
    font-size: 0.9rem;
}

.lead-magnet-form {
    text-align: left;
}

.lead-form-group {
    margin-bottom: 1.25rem;
}

.lead-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
}

.lead-form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.lead-form-group input:focus {
    outline: none;
    border-color: #0170b9;
    box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.1);
}

.lead-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.lead-submit-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.lead-privacy-notice {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Responsive Styles for Quiz */
@media (max-width: 768px) {
    .quiz-container {
        padding: 1rem;
    }

    .quiz-question {
        padding: 1.5rem 1rem;
    }

    .question-text {
        font-size: 1.1rem;
    }

    .quiz-info {
        gap: 1rem;
    }

    .results-card {
        padding: 1.5rem;
    }

    .score-circle {
        width: 150px;
        height: 150px;
    }

    .score-percentage {
        font-size: 2.5rem;
    }

    .results-actions {
        flex-direction: column;
    }
}

/* ==================== END QUIZ SYSTEM STYLES ==================== */


/* ==================== QUIZ RESULTS TABLE STYLES ==================== */

/* Quiz Results Table */
.quiz-results-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.quiz-results-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 0.9rem;
}

.quiz-result-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background-color 0.2s;
}

.quiz-result-row:hover {
    background-color: #f9f9f9;
}

.quiz-result-row:last-child {
    border-bottom: none;
}

.quiz-result-col {
    color: #333;
}

.quiz-col-title strong {
    color: #2a2a2a;
    font-size: 1rem;
}

.quiz-col-date {
    color: #666;
    font-size: 0.9rem;
}

.quiz-score {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
}

.quiz-score.score-pass {
    background-color: #d4edda;
    color: #155724;
}

.quiz-score.score-fail {
    background-color: #f8d7da;
    color: #721c24;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.status-pass {
    background-color: #28a745;
    color: white;
}

.status-badge.status-fail {
    background-color: #dc3545;
    color: white;
}

.quiz-col-time {
    color: #666;
    font-size: 0.9rem;
}

.quiz-col-action .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}

/* Responsive Quiz Results Table */
@media (max-width: 1024px) {
    .quiz-results-header {
        grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .quiz-result-row {
        grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .quiz-col-time {
        display: none;
    }
}

@media (max-width: 768px) {
    .quiz-results-header {
        display: none;
    }

    .quiz-result-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.25rem 1rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .quiz-result-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .quiz-col-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .quiz-col-title strong {
        font-size: 1.1rem;
    }

    .quiz-result-col::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        font-size: 0.85rem;
    }

    .quiz-col-title::before {
        display: none;
    }

    .quiz-col-action {
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .quiz-col-action::before {
        display: none;
    }

    .quiz-col-action .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== END QUIZ RESULTS TABLE STYLES ==================== */


/* ==================== QUIZ BUILDER ADMIN STYLES ==================== */

/* Admin Container */
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.admin-header {
    margin-bottom: 2rem;
}

.admin-header h1 {
    color: #2a2a2a;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.admin-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Quiz List */
.quiz-list {
    display: grid;
    gap: 1.5rem;
}

.quiz-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}

.quiz-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quiz-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.quiz-item-header h3 {
    color: #2a2a2a;
    font-size: 1.3rem;
    margin: 0;
}

.quiz-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-active {
    background-color: #28a745;
    color: white;
}

.status-draft {
    background-color: #6c757d;
    color: white;
}

.quiz-description {
    color: #666;
    margin-bottom: 1rem;
}

.quiz-item-meta {
    display: flex;
    gap: 2rem;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.quiz-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quiz-builder-modal {
    max-width: 1000px;
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: #f8f9fa;
}

.modal-header h2 {
    margin: 0;
    color: #0170b9;
    font-size: 1.25rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.modal-close:hover {
    background-color: #f0f0f0;
}

.modal-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: white;
}

/* Form Sections */
.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.form-section h3 {
    color: #2a2a2a;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e0e0e0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
}

.checkbox-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Question Builder */
.question-builder {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.question-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.question-builder-header:hover {
    background: #e9ecef;
}

.question-builder.collapsed .question-builder-header {
    margin-bottom: 0;
    border-radius: 8px;
}

.question-builder-header h4 {
    margin: 0;
    color: #0170B9;
    font-size: 1.1rem;
}

.collapse-icon {
    color: #0170B9;
    font-size: 0.8rem;
    display: inline-block;
    width: 16px;
    text-align: center;
    transition: transform 0.2s;
}

.question-builder-content {
    padding-top: 1rem;
    transition: all 0.3s ease;
}

.btn-icon {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn-icon:hover {
    background-color: #f0f0f0;
}

.btn-icon.btn-danger {
    color: #000000;
}

.btn-icon.btn-danger:hover {
    background-color: #dc3545;
    color: white;
}

/* Answers Section */
.answers-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.answer-builder {
    margin-bottom: 0.75rem;
}

.answer-builder-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.answer-builder-row input[type='radio'],
.answer-builder-row input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-builder-row input[type='text'] {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 1rem;
}

/* Button Sizes */
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.empty-state-sm {
    text-align: center;
    padding: 1rem;
    color: #888;
    font-size: 0.9rem;
}

/* Grade Level Builder */
.grade-level-builder {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.grade-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.grade-level-header:hover {
    background: #e9ecef;
}

.grade-level-builder.collapsed .grade-level-header {
    margin-bottom: 0;
    border-radius: 8px;
}

.grade-level-content {
    padding-top: 1rem;
    transition: all 0.3s ease;
}


/* Loading Container */
.loading-container {
    text-align: center;
    padding: 3rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container {
        padding: 1rem;
    }

    .modal {
        padding: 1rem;
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .quiz-item-actions {
        flex-wrap: wrap;
    }
}

/* ==================== END QUIZ BUILDER ADMIN STYLES ==================== */

/* Start A&P OJT Button Styles */
#startOJTBtn {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

#startOJTBtn:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* Lead Magnet Section Styles */
.lead-magnet-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 4rem 2rem;
    margin: 3rem 0;
}

.lead-magnet-container {
    max-width: 1000px;
    margin: 0 auto;
}

.lead-magnet-header {
    text-align: center;
    margin-bottom: 3rem;
}

.lead-magnet-header h2 {
    color: #1e40af;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.lead-magnet-header p {
    color: #4b5563;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.lead-magnet-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.benefits-list {
    background: white;
    border-left: 4px solid #3b82f6;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.benefits-list h3 {
    color: #1e40af;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.benefits-list ul {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: #374151;
    font-size: 1.1rem;
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
    font-size: 1.5rem;
}

.lead-form-wrapper {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.lead-form .form-group {
    margin-bottom: 1.5rem;
}

.lead-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-weight: 600;
    font-size: 1rem;
}

.lead-form .form-group input {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.lead-form .form-group input:focus {
    outline: none;
    border-color: #3b82f6;
}

.lead-form button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
}

.lead-form button[type="submit"]:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.error-message {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.privacy-notice {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lead-magnet-section {
        padding: 3rem 1.5rem;
    }

    .lead-magnet-header h2 {
        font-size: 1.875rem;
    }

    .lead-magnet-header p {
        font-size: 1rem;
    }

    .lead-magnet-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .benefits-list li {
        font-size: 1rem;
    }
}

/* ==========================================================================
   HOME PAGE REDESIGN - Evidence-Based Conversion Optimized Layout
   ========================================================================== */

/* Hero Section - Above the Fold with F-Pattern Layout */
.hero-redesign {
    background:
        linear-gradient(135deg, rgba(42, 42, 42, 0.80) 0%, rgba(58, 58, 58, 0.80) 100%),
        url('https://munlrhimkmcmtvdyszjt.supabase.co/storage/v1/object/public/website-images/aircraft-mechanic-ojt-training-min.jpeg') center/cover no-repeat;
    display: flex;
    align-items: center;
    padding: 6rem 2rem;
    color: white;
    position: relative;
}

.hero-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-content-wrapper.hero-centered {
    grid-template-columns: 1fr;
    max-width: 1200px;
    text-align: center;
}

.hero-centered .hero-text {
    padding-right: 0;
}

.hero-centered .hero-trust-signals {
    justify-content: center;
}

.hero-text {
    padding-right: 2rem;
}

.hero-headline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: white;
}

.hero-subheadline {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.95);
}

.hero-trust-signals {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.trust-icon {
    background: #0170b9;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hero-cta {
    margin-top: 2.5rem;
}

.hero-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.hero-cta-buttons .btn {
    flex: 1;
    padding: 1.25rem 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

.btn-primary-large {
    background-color: #0170b9;
    color: white;
}

.btn-primary-large:hover {
    background-color: #015a94;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-secondary-large {
    background-color: #f7941d;
    color: white;
}

.btn-secondary-large:hover {
    background-color: #e8850a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero-cta .cta-subtext {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: white !important;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Two Paths Comparison Section */
.comparison-section {
    padding: 80px 2rem;
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.7) 100%), url('https://munlrhimkmcmtvdyszjt.supabase.co/storage/v1/object/public/website-images/aircraft-piston-engine-overhaul-min.jpeg') center center no-repeat;
    background-size: cover;
}

.comparison-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

.comparison-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.comparison-section .section-header h1,
.comparison-section .section-header h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
    display: block;
}

.comparison-section .section-header p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
}

.comparison-section .comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.comparison-column {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
    border: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.comparison-column:first-child {
    background: #fff;
    border: 2px solid #dc2626;
}

.comparison-column.highlight {
    background: #fff;
    border: 3px solid #2563eb;
}

.column-header {
    padding: 30px 25px;
    text-align: center;
    border-bottom: 2px solid #e0e0e0;
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
}

.comparison-column:first-child .column-header {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-bottom: none;
}

.comparison-column:first-child .column-header h2 {
    color: #fff;
}

.comparison-column:first-child .column-header p {
    color: #fff;
    opacity: 0.95;
}

.comparison-column.highlight .column-header {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #fff;
    border-bottom: none;
}

.column-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.column-header p {
    font-size: 1rem;
    opacity: 0.9;
}

.comparison-body {
    padding: 0;
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    flex: 1;
}

.comparison-row {
    padding: 15px 25px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-column:first-child .comparison-row {
    border-bottom-color: #e5e7eb;
}

.comparison-column:first-child .comparison-row:first-child .row-value {
    color: #dc2626;
    font-weight: 800;
}

.comparison-column.highlight .comparison-row {
    border-bottom-color: #f0f0f0;
}

.row-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 6px;
}

.row-value {
    font-size: 1.1rem;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.row-description {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.comparison-section .cta-section {
    text-align: center;
    margin-top: 60px;
    padding: 50px 30px;
    background: #f8f9fa;
    border-radius: 8px;
}

.comparison-section .cta-section h3 {
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 15px;
    font-weight: 700;
}

.comparison-section .cta-section p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 15px 40px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    color: #fff;
}

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

    .comparison-section .comparison-wrapper .comparison-column.highlight {
        order: -1;
    }

    .comparison-section .section-header h1 {
        font-size: 2.2rem;
    }

    .comparison-section .section-header p {
        font-size: 1.1rem;
    }

    .comparison-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* Problem-Solution Framework */
.problem-solution {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: #f9fafb;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3rem;
    text-align: center;
}

.section-headline.solution-headline {
    color: #1e40af;
    margin-top: 4rem;
}

.section-subheadline {
    font-size: 1.25rem;
    color: #64748b;
    margin-top: -2rem;
    margin-bottom: 3rem;
}

.section-subheadline.centered,
.section-headline.centered {
    text-align: center;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.problem-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.problem-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.problem-item h3 {
    font-size: 1.5rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.problem-item p {
    color: #64748b;
    line-height: 1.6;
}

.solution-grid {
    display: grid;
    gap: 3rem;
    margin-bottom: 3rem;
}

.solution-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.solution-item:nth-child(even) {
    grid-template-columns: 1.5fr 1fr;
}

.solution-item:nth-child(even) img {
    order: 2;
}

.solution-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.solution-content h3 {
    font-size: 1.75rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.solution-content p {
    color: #475569;
    line-height: 1.7;
    font-size: 1.1rem;
}

.section-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Features & Benefits */
.features-benefits {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: #f9fafb;
    padding: 2.5rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-card h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.feature-card p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #475569;
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

/* Social Proof */
.social-proof {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #1e40af;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: #64748b;
    font-weight: 600;
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.badge-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #bfdbfe;
}

.badge-item h4 {
    color: #1e40af;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.badge-item p {
    color: #64748b;
    line-height: 1.5;
}

/* Price Lock Guarantee Section - Professional Design */
.price-lock-guarantee {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: linear-gradient(135deg, #0a1929 0%, #1a2f42 50%, #0a1929 100%);
    position: relative;
    overflow: hidden;
}

.price-lock-guarantee.white-bg {
    background: #ffffff;
}

.price-lock-guarantee.white-bg::before {
    display: none;
}

.price-lock-guarantee.white-bg .price-lock-wrapper {
    box-shadow: none;
    padding: 2rem 0;
}

.price-lock-guarantee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(1, 112, 185, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(1, 112, 185, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.price-lock-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    padding: 3.5rem 4rem;
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(1, 112, 185, 0.1);
    position: relative;
    z-index: 1;
}

/* Top Badge */
.price-lock-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #0170B9 0%, #0056a3 100%);
    padding: 0.65rem 1.75rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(1, 112, 185, 0.25);
}

.shield-icon {
    width: 24px;
    height: 24px;
    color: white;
}

.badge-label {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Headlines */
.price-lock-headline {
    font-size: 3rem;
    font-weight: 700;
    color: #0a1929;
    margin: 0 0 1rem 0;
    font-family: 'Oswald', sans-serif;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.price-lock-subheadline {
    font-size: 1.35rem;
    color: #64748b;
    margin: 0 0 2.5rem 0;
    font-weight: 500;
}

/* Header Section */
.price-lock-header {
    text-align: left;
    margin-bottom: 2.5rem;
}

/* Two Column Layout */
.price-lock-two-column {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

.price-lock-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-lock-right {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.price-lock-benefits {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Visual Image Section */
.price-lock-visual {
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.price-lock-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    max-height: 400px;
    object-fit: cover;
}

.price-lock-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(1, 112, 185, 0.75) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
}

.overlay-badge {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.overlay-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0170B9;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content Grid */
.price-lock-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.price-lock-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.price-lock-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    margin: 0;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Guarantee Stats */
.guarantee-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.stat-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1.5rem 3rem;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    flex: 1;
    max-width: 400px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    color: #0170B9;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0170B9;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Benefits Cards - styles moved to .price-lock-benefits above */

.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 2px solid #bae6fd;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: #0170B9;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(1, 112, 185, 0.15);
}

.benefit-icon {
    width: 32px;
    height: 32px;
    color: #0170B9;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a1929;
    margin: 0 0 0.5rem 0;
    font-family: 'Oswald', sans-serif;
}

.benefit-text p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* CTA Section */
.price-lock-cta {
    text-align: center;
    padding-top: 2.5rem;
    border-top: 2px solid #e2e8f0;
}

.btn-price-lock {
    display: inline-block;
    background: linear-gradient(135deg, #0170B9 0%, #0056a3 100%);
    color: white;
    padding: 1.25rem 3.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 20px rgba(1, 112, 185, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-price-lock:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(1, 112, 185, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #0056a3 0%, #004080 100%);
    color: white;
}

.cta-fine-print {
    font-size: 0.95rem;
    color: #64748b;
    margin: 1rem 0 0 0;
    font-weight: 500;
}

.price-lock-disclaimer {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 1rem 0 0 0;
    font-style: italic;
    line-height: 1.5;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design for Price Lock */
@media (max-width: 992px) {
    .price-lock-two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .price-lock-right {
        position: static;
        order: -1;
    }

    .price-lock-image {
        max-height: 300px;
    }

    .price-lock-content-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .guarantee-stats {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .price-lock-guarantee {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .price-lock-wrapper {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .price-lock-header {
        margin-bottom: 1.5rem;
    }

    .price-lock-headline {
        font-size: 2.25rem;
    }

    .price-lock-subheadline {
        font-size: 1.15rem;
    }

    .price-lock-badge-top {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .price-lock-image {
        max-height: 250px;
    }

    .price-lock-visual {
        margin: 0 0 1.5rem 0;
    }

    .price-lock-image-overlay {
        padding: 1.5rem;
    }

    .overlay-badge {
        padding: 0.85rem 1.75rem;
    }

    .overlay-text {
        font-size: 1rem;
    }

    .price-lock-description {
        text-align: center;
        font-size: 1rem;
    }

    .guarantee-stats {
        flex-direction: column;
        align-items: center;
    }

    .stat-box {
        width: 100%;
        max-width: 300px;
    }

    .price-lock-benefits {
        gap: 1rem;
    }

    .benefit-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .btn-price-lock {
        width: 100%;
        padding: 1.25rem 2rem;
        font-size: 1.1rem;
    }
}

/* Lead Magnet Redesign */
.lead-magnet-redesign {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
}

.lead-magnet-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: stretch;
}

.lead-magnet-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.lead-magnet-right {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lead-magnet-right .pdf-report-preview {
    margin-top: 0;
}

.lead-magnet-right .pdf-report-preview img {
    max-height: 650px;
}

.lead-magnet-headline {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
}

.lead-magnet-subheadline {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.lead-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lead-benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
}

.benefit-check {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.lead-form-card {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
}

.lead-form-card h3 {
    color: #1e293b;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
}

#free-aptitude-test {
    scroll-margin-top: 0;
}

.lead-form-redesign .form-group {
    margin-bottom: 1.5rem;
}

.lead-form-redesign label {
    display: block;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lead-form-redesign input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.lead-form-redesign input:focus {
    outline: none;
    border-color: #3b82f6;
}

.btn-secondary-large {
    width: 100%;
    background-color: #f59e0b;
    color: white;
    padding: 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary-large:hover {
    background-color: #d97706;
    transform: translateY(-2px);
}

.privacy-text {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 1rem;
}

/* PDF Report Preview */
.pdf-report-preview {
    margin-top: 1.5rem;
    text-align: center;
}

.pdf-report-preview img {
    max-width: 100%;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.pdf-preview-caption {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.lead-form-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* FAQ Section */
.faq-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: white;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.faq-item {
    background: #f9fafb;
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.faq-item h3 {
    color: #1e293b;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.faq-item p {
    color: #475569;
    line-height: 1.7;
}

/* Final CTA */
.final-cta {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
}

.final-cta-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.final-cta-content h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
}

.final-cta-text {
    font-size: 1.25rem;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.95);
}

.price-box {
    background: rgba(255, 255, 255, 0.15);
    padding: 3rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.price-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.price-amount .currency {
    font-size: 2rem;
    font-weight: 700;
}

.price-amount .number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
}

.price-amount .period {
    font-size: 1.5rem;
    font-weight: 600;
}

.price-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.btn-primary-xlarge {
    background-color: white;
    color: #1e40af;
    padding: 1.5rem 4rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin: 2rem 0;
}

.btn-primary-xlarge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background-color: #f0f9ff;
}

.guarantee-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.guarantee-box h4 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: white;
}

.guarantee-box p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.final-trust-items {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 1rem;
    margin-top: 2rem;
}

.final-trust-items span {
    font-weight: 600;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-redesign {
        padding: 3rem 1.5rem;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text {
        padding-right: 0;
    }

    .hero-headline {
        font-size: 2rem;
    }

    .hero-subheadline {
        font-size: 1.1rem;
    }

    .hero-trust-signals {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .problem-grid {
        grid-template-columns: 1fr;
    }

    .solution-item {
        grid-template-columns: 1fr;
    }

    .solution-item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .solution-item:nth-child(even) img {
        order: 0;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-bar {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }

    .hero-cta-buttons {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    .btn-primary-large,
    .btn-secondary-large {
        width: 100%;
        max-width: 350px;
        text-align: center;
    }

    .lead-magnet-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lead-magnet-headline {
        font-size: 1.75rem;
    }

    .lead-form-card {
        padding: 2rem;
    }

    .pdf-report-preview {
        margin-top: 2rem;
    }

    .pdf-report-preview img {
        max-height: 250px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .final-cta-content h2 {
        font-size: 2rem;
    }

    .price-amount .number {
        font-size: 3.5rem;
    }

    .btn-primary-xlarge {
        padding: 1.25rem 2rem;
        font-size: 1.25rem;
    }

    .final-trust-items {
        flex-direction: column;
        gap: 1rem;
    }

    /* Left-align headings and intro text on mobile after hero */
    .membership-value-stack h2,
    .membership-value-stack > .container > div:first-child,
    .pricing-feature-detail h2,
    .pricing-feature-detail .feature-detail-intro,
    .price-lock-guarantee h2,
    .price-lock-guarantee .price-lock-headline,
    .lead-magnet-redesign .lead-magnet-content,
    .lead-magnet-headline,
    .lead-magnet-subhead,
    .faq-section .section-headline {
        text-align: left !important;
    }
}

/* Tablet text alignment (between 768px and 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Left-align headings and intro text on tablet after hero */
    .membership-value-stack h2,
    .membership-value-stack > .container > div:first-child,
    .pricing-feature-detail h2,
    .pricing-feature-detail .feature-detail-intro,
    .price-lock-guarantee h2,
    .price-lock-guarantee .price-lock-headline,
    .lead-magnet-redesign .lead-magnet-content,
    .lead-magnet-headline,
    .lead-magnet-subhead,
    .faq-section .section-headline {
        text-align: left !important;
    }
}

/* ========================================
   Pricing Page Styles
   ======================================== */

/* Extend hero section to full page height */
.hero-redesign.pricing-hero {
    min-height: calc(100vh - 80px);
    padding-bottom: 100px;
    background: linear-gradient(135deg, #0170b9 0%, #2e5bff 100%) !important;
}

/* Center hero heading and subheadline on pricing page */
.hero-redesign.pricing-hero .hero-headline,
.hero-redesign.pricing-hero .hero-subheadline {
    text-align: center;
}

.pricing-value-box {
    max-width: 800px;
    margin: 40px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 40px;
    text-align: center;
}

.pricing-value-box-title {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #0170B9;
}

.intro-text {
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

.pricing-features-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.pricing-features-table tr {
    border-bottom: 1px solid #e0e0e0;
}

.pricing-features-table tr:last-child {
    border-bottom: none;
}

.pricing-features-table td {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    text-align: left;
}

.pricing-features-table td > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.feature-content {
    flex: 1;
    display: block;
}

.checkmark {
    color: #0170B9;
    font-size: 1.5rem;
    margin-right: 15px;
    flex-shrink: 0;
    font-weight: bold;
}

.feature-title {
    display: block;
    margin-bottom: 5px;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 1.15rem;
}

.feature-description {
    color: #666;
    font-size: 1.05rem;
    line-height: 1.5;
}

.learn-more-btn {
    display: inline-block;
    flex-shrink: 0;
    padding: 6px 14px;
    background-color: #0170B9;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.learn-more-btn:hover {
    background-color: #015a94;
    color: white;
    transform: translateY(-1px);
}

.cta-container {
    text-align: center;
    margin-top: 40px;
}

.cta-subtext {
    margin-top: 15px;
    color: #666;
    font-size: 0.9rem;
}

.pricing-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #e0e0e0;
}

.pricing-amount-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pricing-amount .price {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1;
}

.pricing-amount .price-period {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #666;
    margin-left: 0;
}

.pricing-cta-button {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: #2a2a2a;
    padding: 16px 48px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.pricing-cta-button:hover {
    background: linear-gradient(135deg, #F7931E 0%, #FF6B35 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    color: #2a2a2a;
}

.pricing-cta-button .arrow-right {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pricing-cta-button .arrow-right svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Membership Value Stack Section */
.membership-value-stack {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Pricing Feature Detail Sections */
.pricing-feature-detail {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #f8fafc;
}

.pricing-feature-detail.dark-section {
    background: #1e293b;
}

.pricing-feature-detail.dark-section h2,
.pricing-feature-detail.dark-section h3 {
    color: #ffffff;
}

.pricing-feature-detail.dark-section .feature-detail-intro {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .course-video-container {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .course-info-card {
    background: #334155;
    border-left-color: #f97316;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .course-info-card h3 {
    color: #ffffff !important;
}

.pricing-feature-detail.dark-section .course-info-card p {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .course-info-card p:last-child {
    color: #f97316;
}

.pricing-feature-detail.dark-section .feature-detail-content {
    background: #334155;
    border-left: 4px solid #f97316;
    box-shadow: none;
}

.pricing-feature-detail.dark-section .feature-detail-content h3 {
    color: #ffffff !important;
}

.pricing-feature-detail.dark-section .feature-detail-content p {
    color: #cbd5e1;
}

.pricing-feature-detail.dark-section .feature-detail-content p strong {
    color: #ffffff;
}

.pricing-feature-detail.dark-section .feature-detail-list li {
    color: #cbd5e1;
    border-bottom-color: #475569;
}

.pricing-feature-detail.dark-section .feature-detail-list li strong {
    color: #ffffff;
}

/* Blue Section Styling - matches pricing hero gradient */
.pricing-feature-detail.blue-section {
    background: linear-gradient(135deg, #0170b9 0%, #2e5bff 100%);
}

.pricing-feature-detail.blue-section h2,
.pricing-feature-detail.blue-section h3 {
    color: #ffffff;
}

.pricing-feature-detail.blue-section .feature-detail-intro {
    color: rgba(255, 255, 255, 0.9);
}

.pricing-feature-detail.blue-section .course-info-card {
    background: white;
    border-left-color: #f97316;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pricing-feature-detail.blue-section .course-info-card h3 {
    color: #1e293b !important;
}

.pricing-feature-detail.blue-section .course-info-card p {
    color: #475569;
}

.pricing-feature-detail.blue-section .course-info-card p:last-child {
    color: #f97316;
}

.pricing-feature-detail.blue-section .feature-detail-content {
    background: white;
    border-left: 4px solid #f97316;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pricing-feature-detail.blue-section .feature-detail-content h3 {
    color: #1e293b !important;
}

.pricing-feature-detail.blue-section .feature-detail-list li {
    color: #475569;
    border-bottom-color: #e0e0e0;
}

.pricing-feature-detail.blue-section .feature-detail-list li strong {
    color: #1e293b;
}

.tech-pubs-disclaimer {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-top: 30px;
    font-style: italic;
}

.pricing-feature-detail .feature-detail-content h3 {
    color: #1e293b;
}

.pricing-feature-detail .container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-feature-detail h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    text-align: center;
}

.pricing-feature-detail .feature-detail-intro {
    font-size: 1.15rem;
    color: #475569;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.7;
}

.pricing-feature-detail .feature-detail-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #f97316;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-feature-detail h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 25px;
}

.pricing-feature-detail .feature-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature-detail .feature-detail-list li:first-child {
    padding-top: 0;
}

.pricing-feature-detail .feature-detail-list li {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}

.pricing-feature-detail .feature-detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pricing-feature-detail .feature-detail-list li strong {
    color: #1e293b;
}

.pricing-feature-detail .feature-detail-cta {
    text-align: center;
    margin-top: 30px;
}

/* Two Column Layout */
.feature-detail-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Course Video Column Styles */
.course-video-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-video {
    display: flex;
    align-items: flex-start;
}

.course-video-container {
    width: 100%;
    line-height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.course-video-container .section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.course-info-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #f97316;
    margin-top: 20px;
}

.course-info-card h3 {
    color: #1e293b;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.course-info-card p {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.course-info-card p:last-child {
    margin-bottom: 0;
    color: #f97316;
}

.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

@media (max-width: 900px) {
    .feature-detail-two-column {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .course-video-column {
        order: -1;
    }
}

@media (max-width: 768px) {
    .pricing-feature-detail {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .pricing-feature-detail h2 {
        font-size: 1.8rem;
    }

    .pricing-feature-detail .feature-detail-content {
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .hero-redesign.pricing-hero {
        min-height: auto;
        padding-bottom: 60px;
    }

    .pricing-value-box {
        padding: 30px 20px;
        margin: 30px 20px;
    }

    .pricing-features-table td {
        padding: 15px 10px;
    }

    .checkmark {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    .pricing-amount .price {
        font-size: 2.75rem;
    }

    .pricing-cta-button {
        width: 100%;
        text-align: center;
        padding: 14px 32px;
    }

    .sticky-cta-bar .btn {
        width: 100%;
    }

    /* Mechanic course section - wider content on mobile with background transition */
    .mechanic-course-section {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(30, 41, 59, 0.9) 75%, #1e293b 100%), url('https://munlrhimkmcmtvdyszjt.supabase.co/storage/v1/object/public/website-images/how-to-become-an-aircraft-mechanic-course-min.jpeg') center top no-repeat !important;
        background-size: cover !important;
    }

    /* Comparison section - image on header, dark gray below */
    .comparison-section {
        background: #333 !important; /* Dark gray for entire section */
        padding: 0 !important; /* Remove all padding so image is full width */
    }

    .comparison-section .container {
        padding: 0;
    }

    .comparison-section .section-header {
        background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://munlrhimkmcmtvdyszjt.supabase.co/storage/v1/object/public/website-images/aircraft-piston-engine-overhaul-min.jpeg') center center no-repeat !important;
        background-size: cover !important;
        padding: 60px 12px !important; /* Equal padding top/bottom to center content */
        margin-bottom: 2rem !important; /* Space below image before first card */
    }

    .comparison-section .section-header h2,
    .comparison-section .section-header p {
        color: #fff !important;
    }

    .comparison-section .comparison-wrapper {
        padding: 0 16px; /* Side padding for the cards area */
        padding-bottom: 2rem; /* Space below last card before blue section */
        margin-bottom: 0; /* Remove default margin that creates white gap */
    }

    /* Global mobile section padding - all sections with containers */
    section {
        padding-left: 16px;
        padding-right: 16px;
    }

    section > .container {
        padding: 0;
    }

    /* Exception: comparison-section has special full-bleed handling */
    .comparison-section {
        padding: 0 !important;
    }

    /* Course pages - match homepage 16px edge spacing */
    body:has(.course-container) main,
    body:has(.module-container) main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .course-container,
    .module-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Stack module badge above heading on mobile */
    .module-title-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .price-lock-guarantee {
        padding-top: 3rem !important;
        margin-top: 0 !important;
    }

    .price-lock-wrapper {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .pricing-feature-detail .feature-detail-content,
    .pricing-feature-detail .course-info-card,
    .pricing-feature-detail .course-video-container,
    .price-lock-wrapper,
    .comparison-column,
    .pdf-report-preview img {
        border-radius: 8px;
    }
}