/* Pages-specific styles for content-heavy site */
.main-content {
    padding: 2rem 0;
    min-height: 80vh;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.main-article {
    min-width: 0;
}

.sticky-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: #068200;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: #444;
}

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(45deg, #068200, #0b7c01);
    z-index: 1000;
    transition: width 0.3s ease;
}

/* Article meta info */
.article-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f0f8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #444;
}

.reading-time, .word-count, .last-updated {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Table of contents */
.table-of-contents {
    background: #f0f8f0;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 3rem;
    border-left: 4px solid #068200;
}

.table-of-contents h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

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

.toc-list li {
    margin-bottom: 0.5rem;
}

.toc-list a {
    color: #068200;
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    padding: 0.3rem 0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.toc-list a:hover {
    background: #e8f5e8;
    padding-left: 1rem;
}

.toc-list .toc-level-2 {
    padding-left: 1rem;
}

.toc-list .toc-level-3 {
    padding-left: 2rem;
}

/* Article styles for content-heavy pages */
.article {
    background: white;
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    line-height: 1.8;
    font-size: 1rem;
}

/* Reduce spacing for article sections */
.article section {
    padding: 0.5rem 0;
}

.article section:first-of-type {
    padding-top: 0;
}

.article section + section {
    margin-top: 1rem;
}

/* Enhanced typography for long content */
.article h1 {
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.article h2 {
    font-size: 1.6rem;
    margin: 1.5rem 0 1.5rem 0;
    line-height: 1.4;
}

.article h3 {
    font-size: 1.3rem;
    margin: 2rem 0 1rem 0;
    line-height: 1.4;
}

.article h4 {
    font-size: 1.1rem;
    margin: 2rem 0 1.2rem 0;
    line-height: 1.4;
    color: #2c3e50;
    font-weight: 600;
}

.article p {
    margin-bottom: 1.5rem;
    text-align: justify;
    color: #444;
}

/* Content sections with proper spacing */
.content-section + .content-section {
    margin-top: 2rem;
}

.content-section {
    margin-bottom: 2rem;
    padding: 0 0 1.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.content-section:last-child {
    border-bottom: none;
}

.question-item {
    margin-bottom: 2rem;
}

.question-item h4 {
    margin-top: 2.2rem;
    margin-bottom: 1.2rem;
}

/* Enhanced spacing for h4 elements in content areas */
.answer-box h4, 
.tips h4, 
.strategy-content h4,
.method-content h4,
.prep-content h4,
.answer-strategy h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
}

/* Specific spacing for content that follows h4 elements */
.answer-box h4 + p,
.tips h4 + ul,
.strategy-content h4 + ul,
.method-content h4 + ul,
.prep-content h4 + ul {
    margin-top: 0.8rem;
}

.strategy-box, .example-box {
    margin-top: 1.2rem;
}

.tip-card, .form-type-card, .quality-item {
    margin-bottom: 1.5rem;
}

.step {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step h4 {
    margin-bottom: 0.8rem;
    margin-top: 0;
}

.step p {
    margin-bottom: 0.5rem;
}

.step-content {
    flex: 1;
}

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

/* Section dividers */
.section-divider {
    border: none;
    height: 2px;
    background: linear-gradient(45deg, #068200, #0b7c01);
    margin: 3rem 0;
    border-radius: 1px;
}

.article-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.article-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.article-subtitle {
    font-size: 1.2rem;
    color: #555;
    font-weight: 300;
}

.article-content {
    line-height: 1.8;
}

.content-section {
    margin-bottom: 2rem;
}

.content-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0.5rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #068200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Specific adjustment for article section h2 */
.article section h2 {
    margin-top: 0;
}

.content-section h2 i {
    color: #068200;
}

.content-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.content-section p {
    margin-bottom: 1rem;
    color: #444;
}

/* Principle cards */
.principle-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.principle-card {
    background: linear-gradient(135deg, #f5fbf5, #edf7ed);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #d4e6d4;
    transition: transform 0.3s ease;
}

.principle-card:hover {
    transform: translateY(-5px);
}

.principle-card h3 {
    color: #068200;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.principle-card p {
    color: #444;
    font-size: 0.9rem;
}

/* Answer examples */
.answer-examples {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.example-card {
    background: #f5fbf5;
    border-radius: 10px;
    padding: 2rem;
    border-left: 4px solid #068200;
}

.example-card h3 {
    color: #068200;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.example-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.answer-box {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.answer-box h4 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.answer-box p {
    color: #444;
    line-height: 1.6;
    font-size: 0.9rem;
}

.tips {
    background: #e8f5e8;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #c8e6c9;
}

.tips h4 {
    color: #068200;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.tips ul {
    padding-left: 2rem;
}

.tips li {
    color: #444;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Warning box */
.warning-box {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 2rem 2rem 2rem 2.5rem !important;
    margin-top: 2rem;
}

.warning-box ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin-left: 0.5rem !important;
    margin-top: 1rem;
}

.warning-box li {
    position: relative;
    padding-left: 0.5rem !important;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    margin-left: 0 !important;
}

.warning-box h3 {
    color: #856404;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.ng-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.ng-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
}

.ng-item h4 {
    color: #dc3545;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.ng-item p {
    color: #555;
    font-size: 0.8rem;
}

/* Checklist */
.checklist {
    background: #f0f8f0;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #068200;
}

.checklist-item label {
    color: #333;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Formula box */
.formula-box {
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.formula-step {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.step-number {
    width: 40px;
    height: 40px;
    background: #068200;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 0 1rem 0;
    flex-shrink: 0;
}

.step-content h3 {
    color: #068200;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.step-content p {
    color: #333;
    font-size: 0.9rem;
}

.formula-arrow {
    font-size: 1.5rem;
    color: #068200;
    font-weight: 600;
}

/* Sidebar */
.sidebar {
    max-width: 300px;
    margin: 2rem auto 0;
}

.related-articles, .quick-tips {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.related-articles h3, .quick-tips h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.related-articles ul {
    list-style: none;
}

.related-articles li {
    margin-bottom: 0.5rem;
}

.related-articles a {
    color: #068200;
    text-decoration: none;
    font-size: 0.9rem;
}

.related-articles a:hover {
    text-decoration: underline;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tip-item i {
    color: #068200;
    font-size: 0.9rem;
}

.tip-item p {
    color: #333;
    font-size: 0.8rem;
    margin: 0;
}

/* Enhanced sidebar styles */
.sidebar {
    background: #f0f8f0;
    border-radius: 15px;
    padding: 2rem;
    height: fit-content;
}

/* Universal fix for all bullet points in content sections */
.content-section ul {
    padding-left: 1.5rem !important;
    margin-left: 0.5rem !important;
}

.content-section li {
    padding-left: 0.5rem !important;
    margin-left: 0 !important;
}

/* Fix for answer-box and tips sections */
.answer-box, .tips {
    padding: 2rem 2rem 2rem 2.5rem !important;
}

.answer-box ul, .tips ul {
    padding-left: 1.5rem !important;
    margin-left: 0.5rem !important;
}

.answer-box li, .tips li {
    padding-left: 0.5rem !important;
    margin-left: 0 !important;
}

.sidebar-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

.sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.related-articles, .quick-tips, .tags, .recent-posts {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.tags .tag {
    display: inline-block;
    background: #e8f5e8;
    color: #068200;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    margin: 0.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tags .tag:hover {
    background: #068200;
    color: white;
}

/* Social share buttons */
.social-share {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.social-share h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
    font-size: 1.1rem;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-btn {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.facebook {
    background: #4267b2;
}

.share-btn.line {
    background: #00b900;
}

.share-btn.copy {
    background: #6c757d;
}

/* Article navigation */
.article-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
}

.nav-prev, .nav-next {
    flex: 1;
    max-width: 45%;
}

.nav-link {
    display: block;
    padding: 1rem;
    background: #f0f8f0;
    border-radius: 8px;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: #e8f5e8;
    transform: translateY(-2px);
}

.nav-direction {
    font-size: 0.8rem;
    color: #068200;
    margin-bottom: 0.5rem;
}

.nav-title {
    font-weight: 600;
}

/* Responsive design for content-heavy pages */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
        padding: 1rem 0.5rem;
        gap: 2rem;
        margin: 0 auto;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .container {
        padding: 0 1rem;
        max-width: 100%;
    }

    .sticky-sidebar {
        position: static;
        order: -1;
    }

    .article {
        padding: 2rem 1.5rem;
        margin: 0;
        border-radius: 10px;
        overflow-x: hidden;
    }

    .article h1 {
        font-size: 1.8rem;
        line-height: 1.3;
        word-wrap: break-word;
    }

    .article h2 {
        font-size: 1.4rem;
        word-wrap: break-word;
    }

    .article h3 {
        font-size: 1.2rem;
        word-wrap: break-word;
    }

    .article h4 {
        font-size: 1rem;
        margin: 1.5rem 0 1rem 0;
        word-wrap: break-word;
    }

    .article-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .example-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .formula-box {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .formula-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .ng-examples {
        grid-template-columns: 1fr;
    }

    .principle-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .article-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-prev, .nav-next {
        max-width: 100%;
    }

    .share-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Enhanced spacing for mobile */
    .content-section {
        margin-bottom: 1.8rem;
        padding: 0 0 1.2rem 0;
    }

    .content-section + .content-section {
        margin-top: 1.8rem;
    }

    /* Prevent content overflow */
    .answer-box, .tips, .warning-box, .checklist, .code-block {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Better spacing for cards on mobile */
    .tip-card, .form-type-card, .quality-item, .example-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.8rem;
        max-width: 100%;
    }

    .main-content {
        padding: 0.8rem 0.5rem;
        gap: 1.5rem;
        margin: 0;
    }

    .article {
        padding: 1.5rem 1rem;
        margin: 0;
        border-radius: 8px;
    }

    .article-header h1 {
        font-size: 1.6rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .content-section h2 {
        font-size: 1.3rem;
        margin: 1rem 0 1.2rem 0;
    }
    
    .article section {
        padding: 0.3rem 0;
    }
    
    .article section + section {
        margin-top: 0.8rem;
    }

    .content-section h3 {
        font-size: 1.1rem;
        margin: 1.5rem 0 1rem 0;
    }

    .content-section h4 {
        font-size: 1rem;
        margin: 1.5rem 0 0.8rem 0;
    }

    .checklist-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .breadcrumb {
        margin-bottom: 1rem;
        padding: 0 0.5rem;
        font-size: 0.85rem;
    }

    .table-of-contents {
        padding: 1rem;
        margin-bottom: 2rem;
    }

    /* Better mobile spacing for content sections */
    .content-section {
        margin-bottom: 1.5rem;
        padding: 0 0 1rem 0;
    }

    .content-section + .content-section {
        margin-top: 1.5rem;
    }

    /* Enhanced mobile typography */
    .article p {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 1.2rem;
    }

    /* Better mobile card spacing */
    .principle-card, .example-card, .tip-card {
        padding: 1.2rem;
        margin-bottom: 1.2rem;
    }

    /* Improve mobile form elements */
    .answer-box, .tips, .warning-box {
        padding: 1.2rem;
        margin-bottom: 1.2rem;
    }

    /* Mobile-specific spacing improvements */
    .answer-box h4, .tips h4 {
        margin-top: 1rem;
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }
    
    /* Further reduce spacing for very small screens */
    .article section {
        padding: 0.2rem 0;
    }
    
    .article section + section {
        margin-top: 0.6rem;
    }
}

/* Additional styles for better content presentation */
.importance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Improved spacing for h5 and h6 headings */
h5 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Specific spacing improvements for detail sections */
.step-details h5,
.tool-details h5,
.section-details h5,
.vision-structure h6,
.prep-example h6,
.tips-section h6,
.success-example h6,
.check-method h5,
.ai-prompt-example h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.step-details ul,
.tool-details ul,
.section-details ul {
    margin-top: 0.5rem;
}

.importance-card {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
    transition: transform 0.3s ease;
}

.importance-card:hover {
    transform: translateY(-2px);
}

.importance-card h4 {
    color: #068200;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

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

.styled-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

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

.discovery-process {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

.process-stage {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
}

.stage-number {
    width: 40px;
    height: 40px;
    background: #068200;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.stage-content h4 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.stage-content p {
    color: #555;
    font-size: 0.9rem;
    margin: 0;
}

.code-block {
    background: white;
    border: 1px solid #068200;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.code-block h4 {
    color: #068200;
    margin-bottom: 1rem;
}

.code-block pre, pre {
    background: #f8f9fa;
    color: #2c3e50;
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #dee2e6;
}

/* Specific styling for inline code */
code {
    padding: 0.2rem 0.4rem;
    display: inline;
    background: #f8f9fa;
    color: #2c3e50;
    border: none;
    border-radius: 3px;
}

/* Additional missing styles */
.strength-categories, .category-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.category-card {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
}

.category-card h4 {
    color: #068200;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strength-list, .experience-items {
    list-style: none;
    padding-left: 0;
}

.strength-list li, .experience-items li {
    padding: 0.3rem 0;
    padding-left: 1rem;
    position: relative;
}

.strength-list li:before, .experience-items li:before {
    content: "•";
    color: #068200;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.values-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.value-category {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-top: 4px solid #068200;
}

.value-category h4 {
    color: #068200;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.value-tag {
    background: #e8f5e8;
    color: #068200;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    border: 1px solid #c8e6c9;
}

.values-exercise {
    background: #f0f8f0;
    padding: 2rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.exercise-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.step {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #068200;
}

.step h5 {
    color: #068200;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
}

.step p {
    color: #555;
    margin: 0;
}

/* Additional elements styling */
.aptitude-features, .aptitude-dimensions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-card, .dimension-card {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
}

.feature-card h4, .dimension-card h4 {
    color: #068200;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.dimension-list li {
    padding: 0.5rem 0;
    padding-left: 1rem;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.dimension-list li:before {
    content: "▶";
    color: #068200;
    position: absolute;
    left: 0;
    font-size: 0.8rem;
}

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

.reframe-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-top: 4px solid #068200;
}

.reframe-card h4 {
    color: #068200;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.2rem;
}

.reframe-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.weakness-view, .strength-view {
    padding: 1rem;
    border-radius: 8px;
}

.weakness-view {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.strength-view {
    background: #e8f5e8;
    border-left: 4px solid #068200;
}

.weakness-view h5, .strength-view h5 {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weakness-view p, .strength-view p {
    margin: 0;
    font-size: 0.9rem;
}

.integration-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.integration-step {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    border-top: 4px solid #068200;
}

.integration-step h4 {
    color: #068200;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.self-map-framework {
    background: #f0f8f0;
    padding: 2rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.map-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.map-section {
    background: white;
    padding: 1.2rem;
    border-radius: 8px;
    border-left: 4px solid #068200;
    text-align: center;
}

.map-section h5 {
    color: #068200;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
}

.map-section p {
    color: #555;
    font-size: 0.85rem;
    margin: 0;
}

.application-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.application-card {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
}

.application-card h4 {
    color: #068200;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.application-list li {
    padding: 0.3rem 0;
    padding-left: 1rem;
    position: relative;
}

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

.action-plan {
    background: #f0f8f0;
    padding: 2rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.action-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.action-step {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.action-step .step-number {
    width: 35px;
    height: 35px;
    background: #068200;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.action-step h4 {
    color: #2c3e50;
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.action-step p {
    color: #555;
    font-size: 0.9rem;
    margin: 0;
}

/* Additional mobile improvements */
@media (max-width: 768px) {
    .discovery-process {
        flex-direction: column;
        gap: 1rem;
    }
    
    .process-stage {
        flex-direction: column;
        text-align: center;
        padding: 1.2rem;
    }
    
    .importance-grid, .strength-categories, .values-matrix, 
    .aptitude-features, .aptitude-dimensions, .reframe-examples,
    .integration-process, .map-components, .application-areas, .action-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .code-block pre {
        font-size: 0.85rem;
        padding: 0.8rem;
    }
    
    .exercise-steps {
        gap: 1rem;
    }
    
    .step {
        padding: 1.2rem;
    }
    
    .values-exercise {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .discovery-process .process-stage {
        padding: 1rem;
    }
    
    .stage-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .importance-card {
        padding: 1.2rem;
    }
    
    .code-block {
        padding: 1rem;
    }
    
    .code-block h4 {
        font-size: 0.95rem;
    }
}

/* Real Estate & Construction specific styles */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f0f8f0, #e8f5e8);
    border-radius: 15px;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
}

.page-subtitle {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.industry-overview, .category-section, .common-questions, .company-overview,
.job-categories, .interview-questions, .skills-development, .industry-trends,
.preparation-checklist, .related-links, .business-types, .required-skills,
.market-trends, .customer-service, .legal-knowledge, .career-path,
.preparation-tips, .product-categories, .technical-knowledge, .market-analysis,
.customer-segments, .industry-challenges, .construction-types, .career-development {
    margin-bottom: 3rem;
}

.industry-overview h2, .category-section h2, .common-questions h2,
.company-overview h2, .job-categories h2, .interview-questions h2,
.skills-development h2, .industry-trends h2, .preparation-checklist h2,
.related-links h2, .business-types h2, .required-skills h2,
.market-trends h2, .customer-service h2, .legal-knowledge h2,
.career-path h2, .preparation-tips h2, .product-categories h2,
.technical-knowledge h2, .market-analysis h2, .customer-segments h2,
.industry-challenges h2, .construction-types h2, .career-development h2 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #068200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.overview-content, .category-grid, .company-grid, .job-grid,
.questions-grid, .skills-grid, .trends-grid, .checklist-grid,
.links-grid, .business-grid, .types-grid, .challenges-grid,
.knowledge-grid, .market-grid, .segments-grid, .points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.overview-item, .category-card, .company-card, .job-card,
.question-item, .skill-category, .trend-item, .checklist-item,
.link-card, .business-card, .type-card, .challenge-item,
.knowledge-item, .market-item, .segment-item, .point-item {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #068200;
}

.overview-item:hover, .category-card:hover, .company-card:hover,
.job-card:hover, .question-item:hover, .skill-category:hover,
.trend-item:hover, .link-card:hover, .business-card:hover,
.type-card:hover, .challenge-item:hover, .knowledge-item:hover,
.market-item:hover, .segment-item:hover, .point-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.overview-icon, .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #068200;
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.overview-text h3, .category-card h3, .company-card h3,
.job-card h3, .question-item h3, .skill-category h3,
.trend-item h3, .link-card h3, .business-card h3,
.type-card h3, .challenge-item h3, .knowledge-item h3,
.market-item h3, .segment-item h3, .point-item h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.category-points h4, .job-content h4, .question-content h4,
.business-content h4, .type-content h4 {
    color: #068200;
    margin: 1.5rem 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.category-points ul, .job-content ul, .question-content ul,
.skill-category ul, .checklist-item ul, .knowledge-item ul,
.market-item ul, .segment-item ul {
    list-style: none;
    padding-left: 0;
}

.category-points li, .job-content li, .question-content li,
.skill-category li, .checklist-item li, .knowledge-item li,
.market-item li, .segment-item li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 2rem;
}

.category-points li:before, .job-content li:before, .question-content li:before,
.skill-category li:before, .checklist-item li:before, .knowledge-item li:before,
.market-item li:before, .segment-item li:before {
    content: "✓";
    color: #068200;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.questions-accordion .question-item {
    border: none;
    border-left: 4px solid #068200;
    margin-bottom: 2rem;
}

.questions-accordion .question-content {
    padding: 1rem 0;
}

.career-timeline, .career-stages, .service-process, .lifecycle-stages {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.career-stage, .process-step, .stage-item {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
    position: relative;
}

.career-stage h3, .process-step h3, .stage-item h3 {
    color: #068200;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.tip-card {
    background: #f0f8f0;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #068200;
}

.tip-card h3 {
    color: #068200;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.company-info p {
    margin: 0.5rem 0;
    color: #555;
}

.company-info strong {
    color: #2c3e50;
}

.link-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.link-card:hover {
    text-decoration: none;
    color: inherit;
}

.link-card i {
    color: #068200;
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Print styles */
@media print {
    .header, .footer, .sidebar {
        display: none;
    }

    .article {
        box-shadow: none;
        margin: 0;
        padding: 1rem;
    }

    .formula-box, .warning-box, .checklist {
        break-inside: avoid;
    }
}

/* Fix for highlight-box and skill-card bullet points overlapping with green line */
.highlight-box {
    background: #f0f8f0;
    border: 1px solid #e8f5e8;
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.5rem 2rem !important;
    margin: 1.5rem 0;
    border-left: 4px solid #068200;
}

.highlight-box ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin-left: 0.5rem !important;
    margin-top: 1rem;
}

.highlight-box li {
    position: relative;
    padding-left: 0.5rem !important;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    margin-left: 0 !important;
}

.skill-card ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0.5rem !important;
    margin-top: 1rem;
}

.skill-card li {
    position: relative;
    padding-left: 1.5rem !important;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    margin-left: 0 !important;
}

/* Additional styling for skill-card to match skill-category */
.skill-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #068200;
    margin-bottom: 2rem;
}

.skill-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.skill-card ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.skill-card li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 2rem;
    margin-left: 0;
}

.skill-card li:before {
    content: "✓";
    color: #068200;
    font-weight: bold;
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
}

/* Mobile responsive styles for real estate pages */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    .overview-content, .category-grid, .company-grid, .job-grid,
    .questions-grid, .skills-grid, .trends-grid, .checklist-grid,
    .links-grid, .business-grid, .types-grid, .challenges-grid,
    .knowledge-grid, .market-grid, .segments-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .overview-item, .category-card, .company-card, .job-card,
    .question-item, .skill-category, .trend-item, .checklist-item,
    .link-card, .business-card, .type-card, .challenge-item,
    .knowledge-item, .market-item, .segment-item, .point-item {
        padding: 1.5rem;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 1.5rem;
    }
    
    .page-header h1 {
        font-size: 1.8rem;
    }
    
    .overview-item, .category-card, .company-card, .job-card,
    .question-item, .skill-category, .trend-item, .checklist-item,
    .link-card, .business-card, .type-card, .challenge-item,
    .knowledge-item, .market-item, .segment-item, .point-item {
        padding: 1.2rem;
    }
    
    /* Additional mobile fixes for bullet points */
    .highlight-box {
        padding: 1.5rem 1rem 1.5rem 1.8rem !important;
    }
    
    .highlight-box ul, .skill-card ul, .tips ul, .warning-box ul, .answer-box ul {
        padding-left: 1.2rem !important;
        margin-left: 0.3rem !important;
    }
    
    .highlight-box li, .skill-card li, .warning-box li, .answer-box li, .tips li {
        padding-left: 0.5rem !important;
        margin-left: 0 !important;
    }
    
    .warning-box, .answer-box, .tips {
        padding: 1.5rem 1rem 1.5rem 1.8rem !important;
    }
    
    /* Ensure proper spacing for skill-card on mobile */
    .skill-card li {
        padding-left: 1.2rem !important;
    }
    
    .skill-card li:before {
        left: 0.3rem;
    }
    
    /* Content section mobile fix */
    .content-section ul {
        padding-left: 1.2rem !important;
        margin-left: 0.3rem !important;
    }
    
    .content-section li {
        padding-left: 0.5rem !important;
    }
}