/* 
 * Complete CSS for Csaba Stefan Bako's Service Provider Experiences Portal
 * Author: Csaba Stefan Bako
 * Updated: May 2025 - With Mobile Menu Fix
 */

/* ==========================================================================
   Table of Contents:
   1. Base & Reset
   2. Header Components
   3. Footer Components
   4. Layout Components
   5. Homepage Specific
   6. Case Studies Styles
   7. About Page Styles
   8. General Pages Styles
   9. Shared Components
   10. Media Queries
   ========================================================================== */

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

html {
    font-size: 62.5%; /* 1rem = 10px for easier calculations */
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

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

figure {
    margin: 2rem 0;
}

figcaption {
    font-size: 1.4rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

ul, ol {
    list-style-position: inside;
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
    color: #0066cc;
    transition: color 0.3s ease;
}

a:hover {
    color: #004080;
}

hr {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 3rem 0;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a3c5c;
}

h1 {
    font-size: 3.6rem;
    margin-bottom: 2.5rem;
}

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

h3 {
    font-size: 2.4rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

h4 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
}

h5 {
    font-size: 1.8rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

h6 {
    font-size: 1.6rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #2b2b2b;
}

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

/* Enhanced strong tag */
strong {
    font-weight: 600;
    color: #000;
}

/* Lead paragraph */
.lead {
    font-size: 1.9rem;
    font-weight: 500;
    color: #1a3c5c;
    margin-bottom: 2rem;
    line-height: 1.9;
}

/* ==========================================================================
   2. Header Components
   ========================================================================== */
.site-header {
    background: linear-gradient(135deg, #1a3c5c 0%, #2a5f8c 100%);
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

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

.menu {
    display: flex;
    list-style: none;
    margin: 0;
}

.menu li {
    position: relative;
    margin-left: 2rem;
}

.menu a {
    color: white;
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.menu a:hover, .menu a.active {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.dropdown {
    position: relative;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    list-style: none;
    margin: 0;
}

.dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    color: #333;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.submenu a:hover {
    background-color: #f8f9fa;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    position: relative;
}

/* Hamburger Icon - Base State */
.hamburger, .hamburger::before, .hamburger::after {
    content: '';
    display: block;
    background: white;
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.hamburger {
    top: 50%;
    transform: translateY(-50%);
}

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

.hamburger::after {
    bottom: -8px;
}

/* CRITICAL: Hamburger Icon - Active State (X transformation) */
.mobile-menu-toggle.active .hamburger {
    background: transparent;
}

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

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

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
}

.lang-switch {
    display: inline-block;
    padding: 0.5rem 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 1.4rem;
    margin-left: 0.3rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.lang-switch.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: default;
}

.lang-switch:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
}

/* Professional Links Banner */
.professional-links-banner {
    background-color: #f0f2f5;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.professional-links {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}

.prof-link {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.4rem;
    transition: transform 0.2s ease;
}

.prof-link:hover {
    transform: translateY(-2px);
}

.link-label {
    font-weight: 500;
    margin-right: 0.5rem;
}

.link-url {
    color: #0066cc;
}

/* ==========================================================================
   3. Footer Components
   ========================================================================== */
.site-footer {
    background: #1a3c5c;
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-logo {
    flex: 2;
    min-width: 250px;
}

.footer-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
}

.footer-links, 
.footer-legal, 
.footer-language {
    flex: 1;
    min-width: 150px;
}

.footer-links h3, 
.footer-legal h3,
.footer-language h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.footer-links ul, 
.footer-legal ul,
.footer-language ul {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    list-style: none;
}

.footer-links a, 
.footer-legal a,
.footer-language a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
}

.footer-links a:hover, 
.footer-legal a:hover,
.footer-language a:hover {
    color: white;
    text-decoration: underline;
}

.footer-language a.active {
    color: white;
    font-weight: 500;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   4. Layout Components
   ========================================================================== */
/* Main Content Area */
.site-content {
    padding: 4rem 0;
}

.content-wrapper {
    display: flex;
    gap: 3rem;
}

.main-content {
    flex: 2;
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar {
    flex: 1;
}

/* Widgets */
.widgets-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.widget-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    border-top: 3px solid #0066cc;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.widget-title {
    font-size: 1.8rem;
    color: #1a3c5c;
    margin-bottom: 1rem;
}

.widget-content {
    font-size: 1.4rem;
}

/* Two column layout for specific content */
.two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

/* ==========================================================================
   5. Homepage Specific
   ========================================================================== */
/* Hero Section */
.hero-section {
    margin-bottom: 4rem;
}

.intro-text {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

/* Homepage Headers */
.homepage h1 {
    font-size: 3.4rem;
    color: #1a3c5c;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 1rem;
}

.homepage h2 {
    font-size: 2.8rem;
    color: #1a3c5c;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.homepage h3 {
    font-size: 2.4rem;
    color: #1a3c5c;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.homepage h4 {
    font-size: 2.2rem;
    color: #1a3c5c;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
}

.homepage h5 {
    font-size: 2rem;
    color: #1a3c5c;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.homepage h6 {
    font-size: 1.8rem;
    color: #1a3c5c;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Additional header styles for h7-h10 if needed */
.homepage h7, .homepage .h7 {
    font-size: 1.7rem;
    color: #1a3c5c;
    margin-top: 1.4rem;
    margin-bottom: 0.9rem;
    font-weight: 700;
    display: block;
}

.homepage h8, .homepage .h8 {
    font-size: 1.6rem;
    color: #1a3c5c;
    margin-top: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
    display: block;
}

.homepage h9, .homepage .h9 {
    font-size: 1.5rem;
    color: #1a3c5c;
    margin-top: 1.2rem;
    margin-bottom: 0.7rem;
    font-weight: 700;
    display: block;
}

.homepage h10, .homepage .h10 {
    font-size: 1.4rem;
    color: #1a3c5c;
    margin-top: 1.1rem;
    margin-bottom: 0.6rem;
    font-weight: 700;
    display: block;
}

.homepage .subheading {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1a3c5c;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Content Section */
.content-section {
    margin-bottom: 4rem;
}

/* Latest Cases */
.latest-cases {
    margin-top: 4rem;
}

.case-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #0066cc;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.case-card h3, 
.case-card h4, 
.case-card h5, 
.case-card h6, 
.case-card h7, 
.case-card h8, 
.case-card h9, 
.case-card h10 {
    font-size: 2rem;
    color: #1a3c5c;
    margin-bottom: 0.8rem;
}

.time-spent {
    display: inline-block;
    font-size: 1.4rem;
    color: #666;
    font-weight: 500;
    font-style: italic;
    margin-left: 0.5rem;
}

//* ==========================================================================
   6. Case Studies Styles - Improved Compact Version
   ========================================================================== */
/* Case Study Header */
.case-header {
    margin-bottom: 2rem; /* Reduced from 3rem */
}

.case-study h1 {
    font-size: 3.2rem;
    color: #1a3c5c;
    margin-bottom: 0.8rem; /* Reduced from 1rem */
    padding-bottom: 0.4rem; /* Reduced from 0.5rem */
    border-bottom: 2px solid #e0e0e0;
}

.case-subtitle {
    font-size: 2rem;
    color: #555;
    margin-bottom: 1.8rem; /* Reduced from 2.5rem */
    font-weight: 400;
    font-style: italic;
}

/* Case Study Section - Compact spacing */
.case-section {
    margin-bottom: 2.5rem; /* Reduced from 4rem */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reduced from 1.5rem */
}

/* New flexible image layouts */
.case-section-with-image {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2.5rem; /* Reduced from 4rem */
    align-items: flex-start;
}

.case-section-with-image.image-left {
    flex-direction: row-reverse;
}

.case-section-text {
    flex: 3;
}

.case-section-image {
    flex: 2;
    max-width: 40%;
}

.case-section-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.case-section-image figcaption {
    font-size: 1.4rem;
    color: #666;
    text-align: center;
    margin-top: 0.6rem; /* Reduced from 0.8rem */
    font-style: italic;
}

/* Two column layout for case sections */
.case-section-columns {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2.5rem; /* Reduced from 4rem */
}

.case-column {
    flex: 1;
}

/* Image gallery for cases */
.case-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0 2rem; /* Reduced from 2rem 0 3rem */
}

.gallery-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

/* Case Study headings - Compact spacing */
.case-study h2 {
    font-size: 2.6rem;
    color: #1a3c5c;
    margin-top: 2.2rem; /* Reduced from 3.5rem */
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    position: relative;
}

.case-study h2::after {
    content: '';
    position: absolute;
    bottom: -0.3rem; /* Reduced from -0.5rem */
    left: 0;
    width: 4rem; /* Reduced from 5rem */
    height: 2px; /* Reduced from 3px */
    background: #0066cc;
}

.case-study h3 {
    font-size: 2.2rem;
    color: #1a3c5c;
    margin-top: 1.8rem; /* Reduced from 3rem */
    margin-bottom: 0.8rem; /* Reduced from 1.2rem */
}

.case-study h4 {
    font-size: 1.9rem;
    color: #1a3c5c;
    margin-top: 1.5rem; /* Reduced from 2.5rem */
    margin-bottom: 0.7rem; /* Reduced from 1rem */
}

.case-study h5, .case-study h6 {
    font-size: 1.7rem;
    color: #1a3c5c;
    margin-top: 1.3rem; /* Reduced from 2rem */
    margin-bottom: 0.7rem; /* Reduced from 1rem */
}

/* Additional header styles for h7-h10 in case studies */
.case-study h7, .case-study .h7 {
    font-size: 1.6rem;
    color: #1a3c5c;
    margin-top: 1.2rem; /* Reduced from 1.8rem */
    margin-bottom: 0.6rem; /* Reduced from 0.9rem */
    font-weight: 700;
    display: block;
}

.case-study h8, .case-study .h8 {
    font-size: 1.5rem;
    color: #1a3c5c;
    margin-top: 1.1rem; /* Reduced from 1.7rem */
    margin-bottom: 0.6rem; /* Reduced from 0.8rem */
    font-weight: 700;
    display: block;
}

.case-study h9, .case-study .h9 {
    font-size: 1.4rem;
    color: #1a3c5c;
    margin-top: 1rem; /* Reduced from 1.6rem */
    margin-bottom: 0.5rem; /* Reduced from 0.7rem */
    font-weight: 700;
    display: block;
}

.case-study h10, .case-study .h10 {
    font-size: 1.3rem;
    color: #1a3c5c;
    margin-top: 0.9rem; /* Reduced from 1.5rem */
    margin-bottom: 0.5rem; /* Reduced from 0.6rem */
    font-weight: 700;
    display: block;
}

/* Compact paragraph spacing */
.case-study p {
    margin-bottom: 1rem; /* Reduced from default 1.5rem */
    line-height: 1.7;
}

.main-paragraph {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.2rem;
}

/* Enhanced article images */
.article-image {
    margin: 1.8rem 0; /* Reduced from 2.5rem 0 */
    text-align: center;
}

.article-image img {
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.article-image img:hover {
    transform: scale(1.02);
}

.article-image.float-left {
    float: left;
    margin: 0.5rem 2rem 1.5rem 0; /* Reduced bottom margin */
    max-width: 40%;
}

.article-image.float-right {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem; /* Reduced bottom margin */
    max-width: 40%;
}

/* Article image caption */
.image-caption {
    font-size: 1.4rem;
    color: #666;
    text-align: center;
    margin-top: 0.8rem; /* Reduced from 1rem */
    font-style: italic;
}

/* Project Timeline - Compact */
.project-timeline {
    margin: 2.5rem 0; /* Reduced from 3rem 0 */
    position: relative;
}

.timeline-container {
    border-left: 3px solid #0066cc;
    margin-left: 2rem;
    padding-left: 3rem;
    position: relative;
}

.milestone {
    margin-bottom: 2rem; /* Reduced from 2.5rem */
    position: relative;
}

.milestone:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #0066cc;
    border-radius: 50%;
    left: -38px;
    top: 5px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

.milestone.success:before {
    background: #5cb85c;
}

.milestone.warning:before {
    background: #f0ad4e;
}

.milestone.danger:before {
    background: #d9534f;
}

.milestone.info:before {
    background: #5bc0de;
}

.milestone-date {
    font-weight: bold;
    color: #1a3c5c;
    margin-bottom: 0.4rem; /* Reduced from 0.5rem */
    font-size: 1.6rem;
}

.milestone-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.4rem; /* Reduced from 0.5rem */
    font-size: 1.8rem;
}

.milestone-content {
    color: #555;
    font-size: 1.5rem;
}

.timeline-highlight {
    background-color: #fff3cd;
    padding: 2px 5px;
    border-radius: 3px;
}

.timeline-quote {
    font-style: italic;
    border-left: 3px solid #ccc;
    padding: 1.2rem; /* Reduced from 1.5rem */
    margin: 1.2rem 0; /* Reduced from 1.5rem 0 */
    color: #555;
    background-color: #f8f9fa;
    border-radius: 6px;
}

/* Phase markers */
.phase-marker {
    position: relative;
    margin: 2.5rem 0 2rem -3rem; /* Reduced from 4rem 0 3rem -3rem */
    padding: 0.8rem 1.2rem 0.8rem 2.5rem; /* Reduced padding */
    background: #f8f9fa;
    border-radius: 0 4px 4px 0;
    font-weight: 600;
    color: #1a3c5c;
    font-size: 1.7rem; /* Reduced from 1.8rem */
    border-left: 3px solid #0066cc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Related links */
.related-links {
    margin-top: 2.5rem; /* Reduced from 3rem */
    padding-top: 1.2rem; /* Reduced from 1.5rem */
    border-top: 1px solid #e0e0e0;
    font-style: italic;
}

/* Case Studies Listing Page */
.page-intro {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 2.5rem; /* Reduced from 3rem */
    color: #444;
}

.cases-filter, .content-section.filter {
    margin-bottom: 2rem; /* Reduced from 2.5rem */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.case-studies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2.5rem; /* Reduced from 3rem */
}

.case-study-card {
    flex: 1 1 300px;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.case-card-content {
    padding: 1.8rem; /* Reduced from 2rem */
}

.case-card-title {
    margin-top: 0;
    color: #1a3c5c;
    font-size: 1.8rem;
    margin-bottom: 1rem; /* Reduced from 1.2rem */
}

.case-card-description {
    color: #555;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1.2rem; /* Reduced from 1.5rem */
}

.case-meta {
    font-size: 1.3rem;
    color: #777;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem; /* Reduced from 1.5rem */
    gap: 1rem;
}

.case-time {
    display: flex;
    align-items: center;
}

.case-time::before {
    content: "⏱️";
    margin-right: 0.5rem;
}

.case-category {
    background: #e9ecef;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.case-card-link {
    display: inline-block;
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
    margin-top: 0.8rem; /* Reduced from 1rem */
    transition: color 0.2s;
}

.case-card-link:hover {
    color: #004080;
    text-decoration: underline;
}

.filter-btn {
    background: #f1f3f5;
    border: none;
    padding: 0.7rem 1.3rem; /* Reduced from 0.8rem 1.5rem */
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.4rem;
    transition: all 0.2s;
}

.filter-btn:hover, .filter-btn.active {
    background: #0066cc;
    color: white;
}

.no-results {
    text-align: center;
    padding: 3rem; /* Reduced from 4rem */
    background: #f8f9fa;
    border-radius: 8px;
    margin: 1.5rem 0; /* Reduced from 2rem 0 */
    color: #555;
}

/* Compact list spacing for case studies */
.case-study ul, .case-study ol {
    margin-bottom: 1rem; /* Reduced from default 1.5rem */
}

.case-study li {
    margin-bottom: 0.6rem; /* Reduced from 0.8rem */
}

/* Enhanced bullet spacing for case studies */
.main-content ul.bullet-enhanced li {
    margin-bottom: 0.7rem; /* Reduced from 1rem */
    line-height: 1.6; /* Slightly reduced line height */
}

/* Compact special boxes */
.case-study .info-box, 
.case-study .warning-box, 
.case-study .callout-box, 
.case-study .highlight-box {
    margin: 1.2rem 0; /* Reduced from 2rem 0 */
    padding: 1rem 1.5rem; /* Reduced from 1.5rem 2rem */
}

/* Better spacing between elements */
.case-study p + h3 {
    margin-top: 1.5rem; /* Reduced space after paragraph before h3 */
}

.case-study p + h4 {
    margin-top: 1.2rem; /* Reduced space after paragraph before h4 */
}

.case-study ul + h3, .case-study ol + h3 {
    margin-top: 1.6rem; /* Reduced space after list before h3 */
}

.case-study ul + h4, .case-study ol + h4 {
    margin-top: 1.3rem; /* Reduced space after list before h4 */
}

/* Better spacing for text followed by lists */
.case-study p + ul, .case-study p + ol {
    margin-top: 0.6rem; /* Reduced gap between paragraph and following list */
}

/* Mobile adjustments - even more compact */
@media (max-width: 768px) {
    .case-section {
        margin-bottom: 2rem;
        gap: 0.8rem;
    }
    
    .case-study h2 {
        margin-top: 1.8rem;
        margin-bottom: 0.8rem;
        font-size: 2.4rem;
    }
    
    .case-study h3 {
        margin-top: 1.5rem;
        margin-bottom: 0.7rem;
        font-size: 2rem;
    }
    
    .case-study h4 {
        margin-top: 1.2rem;
        margin-bottom: 0.6rem;
        font-size: 1.8rem;
    }
    
    .case-study p {
        margin-bottom: 0.9rem;
    }
    
    .case-header {
        margin-bottom: 1.5rem;
    }
    
    .case-subtitle {
        margin-bottom: 1.5rem;
    }
    
    .article-image {
        margin: 1.5rem 0;
    }
    
    .project-timeline {
        margin: 2rem 0;
    }
}

@media (max-width: 576px) {
    .case-section {
        margin-bottom: 1.5rem;
        gap: 0.6rem;
    }
    
    .case-study h2 {
        margin-top: 1.5rem;
        margin-bottom: 0.7rem;
        font-size: 2.2rem;
    }
    
    .case-study h3 {
        margin-top: 1.2rem;
        margin-bottom: 0.6rem;
        font-size: 1.9rem;
    }
    
    .case-study p {
        margin-bottom: 0.8rem;
    }
    
    .case-card-content {
        padding: 1.5rem;
    }
    
    .main-content ul.bullet-enhanced li {
        margin-bottom: 0.6rem;
        padding-left: 2.5rem;
    }
}

/* ==========================================================================
   7. About Page Styles
   ========================================================================== */
.about-page h1, 
.about-page h2 {
    position: relative;
    padding-bottom: 1.2rem;
    margin-top: 4rem;
    margin-bottom: 2.5rem;
}

.about-page h1:after, 
.about-page h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #0066cc, #4da6ff);
}

.about-page h3 {
    position: relative;
    margin-bottom: 1.8rem;
    color: #1a3c5c;
}

.cta-box {
    text-align: center;
    margin: 5rem auto;
    max-width: 600px;
    padding: 3rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9f0f7 100%);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cta-button {
    display: inline-block;
    background: #0066cc;
    color: white;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 1.5rem;
    transition: background 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
    background: #004080;
    transform: translateY(-2px);
    text-decoration: none;
    color: white;
}

.experience-grid,
.strengths-grid,
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 2.5rem;
    margin: 3rem 0 4rem;
}

.experience-card,
.strength-card,
.expertise-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.experience-card {
    border-top: 4px solid #0066cc;
}

.strength-card {
    border-left: 4px solid #0066cc;
}

.expertise-card {
    border-top: 4px solid #5cb85c;
}

.experience-card:hover,
.strength-card:hover,
.expertise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.experience-title,
.strength-title,
.expertise-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #1a3c5c;
}

.experience-duration {
    color: #0066cc;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    background-color: rgba(0, 102, 204, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 30px;
}

.experience-description,
.strength-description {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #333;
}

.expertise-intro {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    color: #444;
}

.more-details {
    font-size: 1.4rem;
    opacity: 0.8;
    transition: opacity 0.3s;
    margin-left: 1rem;
}

.more-details:hover {
    opacity: 1;
}

.special-note-container {
    text-align: center;
    margin: 5rem 0;
}

.special-note {
    display: inline-block;
    max-width: 800px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
    color: #1a3c5c;
    padding: 3rem;
    background-color: #f0f5fa;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    margin: 0 auto;
    text-align: center;
}

/* ==========================================================================
   8. General Pages Styles
   ========================================================================== */
.general-page h1 {
    font-size: 3rem;
    color: #1a3c5c;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.general-page h2 {
    font-size: 2.4rem;
    color: #1a3c5c;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.general-page h3 {
    font-size: 2rem;
    color: #1a3c5c;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
}

.general-page h4 {
    font-size: 1.8rem;
    color: #1a3c5c;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.general-page h5, .general-page h6 {
    font-size: 1.6rem;
    color: #1a3c5c;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.general-section {
    margin-bottom: 4rem;
}

.general-content {
    font-size: 1.6rem;
    line-height: 1.7;
}

.general-page ul {
    list-style: disc;
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.general-page ol {
    list-style: decimal;
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.general-page li {
    margin-bottom: 0.8rem;
}

.last-update {
    font-style: italic;
    color: #666;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

/* Cookie settings */
.cookie-settings-button {
    margin: 2rem 0;
}

.cookie-settings-button button {
    background: #0066cc;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cookie-settings-button button:hover {
    background: #004080;
}

/* ==========================================================================
   9. Shared Components
   ========================================================================== */
/* Tables */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;
    font-size: 1.4rem;
}

th, td {
    padding: 1.2rem 1.5rem;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #f8f9fa;
    color: #1a3c5c;
    font-weight: 600;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

tr:hover {
    background-color: #f0f2f5;
}

/* Lists */
/* Improved list appearance */
ul, ol {
    list-style-position: inside;
    margin-left: 2.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.8;
}

li {
    margin-bottom: 0.8rem;
}

/* Check lists */
.check-list {
    list-style: none;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
}

.check-list li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 2.5rem;
    line-height: 1.6;
}

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

/* Bullet lists with custom styling */
.bullet-list {
    list-style: none;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
}

.bullet-list li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 2rem;
    line-height: 1.6;
}

.bullet-list li:before {
    content: "•";
    color: #0066cc;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.8rem;
}

/* Buttons */
.btn-read-more {
    display: inline-block;
    background: #0066cc;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    margin-top: 1rem;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-read-more:hover {
    background: #004080;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Story blocks */
.story-content {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.story-highlight {
    background-color: #fff9e6;
    padding: 1rem 1.5rem;
    border-left: 4px solid #f0ad4e;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.story-callout {
    border-left: 4px solid #0066cc;
    background-color: #f1f8ff;
    padding: 1.5rem 2rem;
    border-radius: 4px;
    color: #1a3c5c;
    margin: 2.5rem 0;
}

.story-image {
    margin: 2rem 0;
    text-align: center;
}

.story-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.story-image figcaption {
    margin-top: 0.5rem;
    font-size: 1.4rem;
    color: #666;
    font-style: italic;
}



/* Case Studies Bullets Default */

/* DEFAULT BULLET for backward compatibility - applies to all case study lists without specific classes */
.main-content.case-study li {
    position: relative;
    list-style: none;
    padding-left: 2.5rem;
    margin-bottom: 0.8rem;
}

.main-content.case-study li:before {
    content: "•";
    color: #1a3c5c;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.6rem;
}


/* ==========================================================================
   IMPROVED BULLET SYSTEM - Professional Font Awesome Icons
   ========================================================================== */

/* BASE BULLET SETUP - All custom lists need this foundation */
.main-content ul.bullet-enhanced li {
    position: relative;
    list-style: none;
    padding-left: 3rem;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.main-content ul.bullet-enhanced li:before {
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.4rem;
}

/* ==========================================================================
   1. STANDARD BULLET (•) - Default professional dot
   ========================================================================== */
.main-content ul.standard-bullet li:before {
    content: "•";
    font-family: inherit;
    color: #1a3c5c;
    font-weight: bold;
    font-size: 1.8rem;
    top: 0.1rem;
}

/* ==========================================================================
   2. ARROW BULLET (▶) - For steps, processes, methods
   ========================================================================== */
.main-content ul.arrow-bullet li:before {
    content: "\f0da";
    color: #0066cc;
}

/* ==========================================================================
   3. CHECKMARK BULLET (✓) - For benefits, features, completed items
   ========================================================================== */
.main-content ul.check-bullet li:before {
    content: "\f00c";
    color: #27ae60;
}

/* ==========================================================================
   4. INFO BULLET (ℹ) - For informational content, neutral facts
   ========================================================================== */
.main-content ul.info-bullet li:before {
    content: "\f05a";
    color: #3498db;
}

/* ==========================================================================
   5. WARNING BULLET (⚠) - For important warnings, cautions
   ========================================================================== */
.main-content ul.warning-bullet li:before {
    content: "\f071";
    color: #f39c12;
}

/* ==========================================================================
   6. ERROR BULLET (✗) - For problems, issues, failures
   ========================================================================== */
.main-content ul.error-bullet li:before {
    content: "\f00d";
    color: #e74c3c;
}

/* ==========================================================================
   7. MEDICAL BULLET (⚕) - For health-related content
   ========================================================================== */
.main-content ul.medical-bullet li:before {
    content: "\f0f1";
    color: #e74c3c;
}

/* ==========================================================================
   8. DOCUMENT BULLET (📄) - For documents, forms, paperwork
   ========================================================================== */
.main-content ul.document-bullet li:before {
    content: "\f15b";
    color: #7f8c8d;
}

/* ==========================================================================
   9. STAR BULLET (★) - For important/featured items
   ========================================================================== */
.main-content ul.star-bullet li:before {
    content: "\f005";
    color: #f1c40f;
}

/* ==========================================================================
   10. SETTINGS BULLET (⚙) - For configurations, technical settings
   ========================================================================== */
.main-content ul.settings-bullet li:before {
    content: "\f013";
    color: #95a5a6;
}

/* ==========================================================================
   11. CONTACT BULLET (👤) - For contact information
   ========================================================================== */
.main-content ul.contact-bullet li:before {
    content: "\f007";
    color: #34495e;
}

/* ==========================================================================
   12. SECURITY BULLET (🛡) - For security, privacy, protection
   ========================================================================== */
.main-content ul.security-bullet li:before {
    content: "\f132";
    color: #27ae60;
}


/* Blockquotes and Special Notes */
blockquote {
    background-color: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.highlight-box {
    background-color: #e8f4f8;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border: 1px solid #d1e8f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.highlight-box strong {
    color: #2980b9;
}

.callout-box {
    background-color: #f9f0e8;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border: 1px solid #f5e0d1;
    border-left: 4px solid #e67e22;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.callout-box strong {
    color: #d35400;
}

.info-box {
    background-color: #e8f4f8;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border: 1px solid #d1e8f5;
    border-left: 4px solid #3498db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-box strong {
    color: #2980b9;
}

.warning-box {
    background-color: #fcf8e3;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border: 1px solid #faebcc;
    border-left: 4px solid #f0ad4e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.warning-box strong {
    color: #c0392b;
}

.special-note p {
    margin-bottom: 1rem;
}

.special-note p:last-child {
    margin-bottom: 0;
}

.special-note ul, .special-note ol {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

/* Note with title */
.note-title {
    font-weight: 600;
    color: #1a3c5c;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    display: block;
}

/* Pull quote for highlighting important quotes */
.pull-quote {
    font-size: 2rem;
    line-height: 1.4;
    font-style: italic;
    color: #1a3c5c;
    padding: 1rem 3rem;
    margin: 3rem 0;
    position: relative;
    text-align: center;
}

.pull-quote:before,
.pull-quote:after {
    content: '"';
    font-size: 4rem;
    color: #ccc;
    position: absolute;
    height: 4rem;
    line-height: 1;
}

.pull-quote:before {
    top: 0;
    left: 0;
}

.pull-quote:after {
    bottom: -0.5rem;
    right: 0;
}

/* Author citation for pull quotes */
.quote-author {
    display: block;
    text-align: right;
    font-size: 1.6rem;
    color: #555;
    font-weight: normal;
    margin-top: 1rem;
}

.quote-author:before {
    content: "— ";
}

/* Content dividers */
.content-divider {
    display: flex;
    align-items: center;
    margin: 4rem 0;
    color: #ccc;
    font-size: 1.4rem;
}

.content-divider:before,
.content-divider:after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.content-divider:before {
    margin-right: 1rem;
}

.content-divider:after {
    margin-left: 1rem;
}

/* Section divider with icon */
.section-divider {
    text-align: center;
    margin: 4rem 0;
    position: relative;
}

.section-divider:before {
    content: "";
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
}

.section-divider span {
    background-color: white;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
    color: #1a3c5c;
    font-size: 1.6rem;
}

/* Code blocks and syntax */
pre {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 2rem 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.4rem;
    line-height: 1.5;
    border: 1px solid #e0e0e0;
}

code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.4rem;
    color: #e74c3c;
}

pre code {
    background-color: transparent;
    padding: 0;
    color: #333;
    font-size: 1.3rem;
}

/* ==========================================================================
   10. Media Queries
   ========================================================================== */
@media (max-width: 992px) {
    /* Layout adjustments */
    .content-wrapper {
        flex-direction: column;
    }
    
    .sidebar-left {
        order: 2;
    }
    
    .sidebar-right {
        order: 3;
    }
    
    .main-content {
        order: 1;
    }
    
    /* Widget grid for better space usage */
    .widgets-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }
    
    /* Center professional links */
    .professional-links {
        justify-content: center;
    }
    
    /* Adjust grids */
    .experience-grid, 
    .strengths-grid,
    .expertise-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
    
    /* Reduce note size */
    .special-note {
        font-size: 1.8rem;
        padding: 2.5rem;
    }
    
    /* Case section with image becomes stacked on tablet */
    .case-section-with-image {
        flex-direction: column;
    }
    
    .case-section-with-image.image-left {
        flex-direction: column;
    }
    
    .case-section-image {
        max-width: 100%;
        margin-bottom: 2rem;
    }
    
    /* Two column layout for case sections becomes single column */
    .case-section-columns {
        flex-direction: column;
        gap: 3rem;
    }
    
    /* Responsive image adjustments */
    .article-image.float-left,
    .article-image.float-right {
        float: none;
        margin: 2rem 0;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Base font size adjustment */
    html {
        font-size: 58%;
    }
    
    /* CRITICAL: Mobile menu activation */
    .mobile-menu-toggle {
        display: block;
    }
    
    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #1a3c5c;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
    }
    
    .menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .menu li {
        margin: 0;
        margin-bottom: 1rem;
    }
    
    /* Submenu handling */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        margin-left: 2rem;
        min-width: auto;
        display: none;
    }
    
    .dropdown.active .submenu {
        display: block;
    }
    
    .submenu a {
        color: white;
        border-bottom: none;
    }
    
    /* CRITICAL: Ensure hamburger animation works on mobile */
    .mobile-menu-toggle.active .hamburger {
        background: transparent;
    }
    
    .mobile-menu-toggle.active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .mobile-menu-toggle.active .hamburger::after {
        transform: rotate(-45deg);
        bottom: 0;
    }
    
    /* Language switcher */
    .language-switcher {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: flex-start;
    }
    
    .lang-switch {
        padding: 0.8rem 1.2rem;
        font-size: 1.6rem;
    }
    
    /* Footer layout */
    .footer-content {
        flex-direction: column;
        gap: 3rem;
    }
    
    /* Adjust grids */
    .experience-grid, 
    .strengths-grid,
    .expertise-grid {
        grid-template-columns: 1fr;
    }
    
    /* Card padding */
    .experience-card, 
    .strength-card,
    .expertise-card {
        padding: 2rem;
    }
    
    /* Further reduce heading sizes */
    .homepage h1, .case-study h1, .general-page h1 {
        font-size: 2.8rem;
    }
    
    .homepage h2, .case-study h2, .general-page h2 {
        font-size: 2.4rem;
    }
    
    .homepage .subheading {
        font-size: 2rem;
    }
    
    .case-study h3, .general-page h3 {
        font-size: 2rem;
    }
    
    /* Adjust titles */
    .experience-title,
    .expertise-title {
        font-size: 2rem;
    }
    
    .strength-title {
        font-size: 1.8rem;
    }
    
    /* Note adjustments */
    .special-note {
        font-size: 1.7rem;
        padding: 2rem;
    }
    
    .cta-box {
        padding: 2rem;
    }
    
    /* Timeline adjustments */
    .timeline-container {
        margin-left: 1rem;
        padding-left: 2rem;
    }
    
    .milestone:before {
        left: -28px;
        width: 14px;
        height: 14px;
    }
    
    .phase-marker {
        margin-left: -2rem;
        padding-left: 2rem;
    }
    
    /* Case cards */
    .case-card {
        padding: 1.5rem;
    }
    
    /* Professional links banner */
    .professional-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    /* Story content mobile adjustments */
    .story-content {
        padding: 2rem;
    }
    
    .lead {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    /* Layout adjustments */
    .widgets-container {
        grid-template-columns: 1fr;
    }
    
    /* Case cards */
    .case-card {
        padding: 1.5rem;
    }
    
    /* Table handling */
    table {
        font-size: 1.3rem;
    }
    
    th, td {
        padding: 0.8rem;
    }
    
    /* Image handling */
    .article-image {
        margin: 1.5rem -1.5rem;
    }
    
    .article-image img {
        border-radius: 0;
    }
    
    /* Two column layout becomes single column */
    .two-column {
        grid-template-columns: 1fr;
    }
    
    /* Reduce more spacing */
    .case-section {
        margin-bottom: 3rem;
    }
    
    .hero-section {
        margin-bottom: 3rem;
    }
    
    .content-section {
        margin-bottom: 3rem;
    }
    
    /* Reduce note container margin */
    .special-note-container {
        margin: 3rem 0;
    }
    
    /* Adjust buttons */
    .btn-read-more {
        display: block;
        text-align: center;
    }
    
    /* Further reduce margins */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1.2rem;
    }
    
    p {
        margin-bottom: 1.2rem;
    }
    
    .main-content {
        padding: 1.5rem;
    }
    
    /* Pull quote adjustments */
    .pull-quote {
        font-size: 1.8rem;
        padding: 1rem 2rem;
    }
    
    .pull-quote:before,
    .pull-quote:after {
        font-size: 3rem;
    }
}

/* End of CSS */