/* ================================== */
/* == CASE STUDY PAGE SPECIFIC STYLES == */
/* ================================== */
/* ADD THIS TO STYLES.CSS */

/* Layout Structure */

.right-sidebar {
    /* ... existing styles ... */
}

/* ... etc. ... */

/* ORANGE SUN OVERRIDE */
.sun-glow-primary {
    background: linear-gradient(270deg, #FA8E41 0%, #DE523A 100%);
}

.sun-glow-secondary {
    background: linear-gradient(315deg, #FA5C40 0%, #FA8E41 50%, #FAA940 100%);
}

.sun-glow-tertiary {
    background: radial-gradient(circle at center, #FAA940 0%, #FA8E41 40%, transparent 70%);
}

.sun-glow-gap-left {
    background: linear-gradient(135deg, #FA8E41 0%, #FA5C40 100%);
}

.sun-glow-gap-right {
    background: linear-gradient(225deg, #FA8E41 0%, #FA5C40 100%);
}

.sun-glow-overlay {
    background: radial-gradient(circle at center, #DE3A3A 0%, #FA8E41 50%, transparent 80%);
}

/* Adjust hero section height and alignment */
.hero-section {
    min-height: auto;
    padding-top: 300px;
    padding-bottom: 2rem;
    align-items: flex-start;
}

/* HERO CONTENT STYLES */
.case-study-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--text-primary);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.case-study-title {
    font-family: 'Lustria', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.case-study-subtitle {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-secondary);
}

/* CASE STUDY BODY STYLES */
.case-study-body {
    padding: 0;
    background-color: var(--white);
    font-family: 'Instrument Sans', sans-serif;
}

.case-study-body .container {
    max-width: 1200px;
    margin: 0 auto;
}

.case-study-body h2 {
    font-family: 'Lustria', serif;
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.case-study-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    margin: 3rem 0;
}

.case-study-main-image-container {
    max-width: 900px;
    margin: 0 auto 4rem auto;
}

.case-study-main-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* NEW: FEATURE IMAGE SECTION STYLE */
.cs-full-section-image-container {
    margin: 4rem auto;
    max-width: 850px;
    /* Smaller than the main hero image */
    padding: 0 2rem;
}

.cs-full-section-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


/* ================================== */
/* ==   OVERVIEW SECTION STYLES    == */
/* ================================== */

.cs-overview-section {
    text-align: center;
    padding: 4rem 0;
}

.cs-overview-section h2 {
    color: var(--text-primary);
}

.cs-overview-text {
    max-width: 750px;
    margin: 0 auto 3rem auto;
}

.cs-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 2rem 0;
}

.cs-info-item .cs-info-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.cs-info-item strong {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cs-social-icons {
    margin-bottom: 2rem;
}

.cs-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--secondary-orange);
    color: var(--white);
    border-radius: 50%;
    margin: 0 0.5rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.cs-social-icons a:hover {
    transform: scale(1.1);
    opacity: 1;
}

.cs-action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cs-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 25px;

    /* Button Fill - Orange Gradient */
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);

    /* Button Stroke */
    border: 3px solid #FF8C42;
    border-radius: 25px;

    /* Text Styling */
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;

    /* Enhanced drop shadow */
    box-shadow:
        0 0 0 rgba(255, 107, 53, 1),
        0 2px 4px rgba(255, 107, 53, 0.5),
        0 4px 12px rgba(255, 107, 53, 0.3),
        0 8px 24px rgba(255, 107, 53, 0.1);

    transition: all 0.3s ease;
    cursor: pointer;

    /* Font family for better text rendering */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 1;
}

.cs-button:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow:
        0 0 0 rgba(255, 107, 53, 1),
        0 6px 12px rgba(255, 107, 53, 0.6),
        0 12px 24px rgba(255, 107, 53, 0.4),
        0 16px 32px rgba(255, 107, 53, 0.2);
}


/* ================================== */
/* == MODERN CHALLENGE & SOLUTION SECTION == */
/* ================================== */

.cs-challenge-solution-section {
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.cs-challenge-solution-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.cs-section-title {
    font-family: 'Lustria', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.cs-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    align-items: start;
}

/* Divider Line */
.cs-comparison-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #ddd 20%, #ddd 80%, transparent 100%);
    transform: translateX(-50%);
}

/* Column Headers - Fixed Consistency */
.cs-column-header {
    text-align: center;
    margin-bottom: 3rem;
    height: 100px;
    /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-column-header h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.5rem;
    /* Fixed size */
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.cs-challenge-column .cs-column-header h3 {
    background: #ffcdd2;
    /* light red */
    color: #c62828;
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.15);
}


.cs-solution-column .cs-column-header h3 {
    background: #c8e6c9;
    /* light green */
    color: #2e7d32;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.15);
}

.cs-column-header h3::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Challenge Items - Fixed Height Consistency */
.cs-challenge-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: fit-content;
}

.cs-challenge-item {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    min-height: 120px;
    /* Minimum height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cs-challenge-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #d32f2f, #f44336);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cs-challenge-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(211, 47, 47, 0.15);
}

.cs-challenge-item:hover::before {
    transform: scaleX(1);
}

.cs-challenge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #d32f2f;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.cs-challenge-item:hover .cs-challenge-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #d32f2f, #f44336);
    color: white;
}

.cs-challenge-item p {
    margin: 0;
    font-size: 1rem;
    /* Fixed font size */
    line-height: 1.6;
    /* Consistent line height */
    color: var(--text-secondary);
    font-weight: 400;
    flex-grow: 1;
}

/* Solution Items - Fixed Height Consistency */
.cs-solution-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Match challenge gap */
    height: fit-content;
}

.cs-solution-category {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    min-height: 120px;
    /* Match challenge min-height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cs-solution-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2e7d32, #4caf50);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cs-solution-category:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(46, 125, 50, 0.15);
}

.cs-solution-category:hover::before {
    transform: scaleX(1);
}

.cs-solution-category h4 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.1rem;
    /* Fixed font size */
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
    /* Fixed line height */
}

.cs-solution-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    color: #2e7d32;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cs-solution-category:hover .cs-solution-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: white;
}

.cs-solution-category p {
    margin: 0;
    font-size: 1rem;
    /* Match challenge font size */
    line-height: 1.6;
    /* Match challenge line height */
    color: var(--text-secondary);
    padding-left: 0;
    font-weight: 400;
    flex-grow: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cs-comparison-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .cs-comparison-grid::before {
        display: none;
    }

    .cs-section-title {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

    .cs-column-header {
        height: 80px;
        /* Smaller but consistent on mobile */
    }

    .cs-column-header h3 {
        font-size: 1.25rem;
        /* Consistent mobile size */
        padding: 0.75rem 1.5rem;
    }

    .cs-challenge-item,
    .cs-solution-category {
        padding: 1.5rem;
        min-height: 100px;
        /* Consistent mobile min-height */
    }

    .cs-challenge-solution-section {
        padding: 4rem 0;
    }

    .cs-solution-list,
    .cs-challenge-list {
        gap: 1.25rem;
        /* Consistent mobile spacing */
    }
}

/* Additional Polish */
@media (prefers-reduced-motion: reduce) {

    .cs-challenge-item,
    .cs-solution-category,
    .cs-challenge-icon,
    .cs-solution-icon {
        transition: none;
    }
}



.cs-impact-results {
    padding: 5rem 0;
    background: var(--white);
    text-align: center;
}



.cs-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cs-impact-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 8px 30px rgba(255, 71, 71, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-impact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(255, 71, 71, 0.15);
}

.cs-impact-card .cs-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffecec;
    color: #ff5252;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.cs-impact-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.cs-impact-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}


/* Style for 2-column bento grids */
/* ================================== */
/* == TWO IMAGE SECTION STYLES (FIX) == */
/* ================================== */
.two-images {
    padding: 2rem 0;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Create two equal columns */
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.image-grid a {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.image-grid a:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.image-grid img {
    width: 100%;
    height: 350px;
    /* Sets a consistent height for both images */
    object-fit: cover;
    /* Fills the container, cropping if necessary */
    display: block;
}

/* Responsive rule for the two-image section */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }
}


/* Section Heading (consistent with Impact & Results) */
.section-heading {
    font-family: 'Lustria', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

/* ================================== */
/* ==   TESTIMONIAL SECTION STYLES == */
/* ================================== */

.testimonial-section {
    padding: 4rem 0;
    text-align: center;
}

/* This will use the existing h2 style from the case study body */
.testimonial-section .section-heading {
    margin-bottom: 3rem;
}

.testimonial-card {
    background: var(--white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 750px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

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

.quote-icon {
    width: 60px;
    opacity: 0.15;
}

.quote-icon img {
    width: 100%;
}

.testimonial-rating {
    color: #ffb703;
    /* A nice gold color for stars */
    font-size: 1.2rem;
}

.testimonial-text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--secondary-orange);
    margin-bottom: 2rem;
    font-weight: 500;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    /* <-- Add this line */
}

.author-name {
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.author-role {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ================================== */
/* ==   CONCLUSION SECTION STYLES  == */
/* ================================== */
/* ================================== */
/* ==   CONCLUSION SECTION STYLES  == */
/* ================================== */

.cs-conclusion-section {
    text-align: center;
    padding: 4rem 0;
}

/* This makes the heading match "Overview", "The Challenge", etc. */
.cs-conclusion-section h2 {
    font-family: 'Lustria', serif;
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* This makes the paragraph text match the rest of the page */
.cs-conclusion-section p {
    max-width: 750px;
    margin: 0 auto 2rem auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ================================== */
/* ==    BENTO GRID SECTION STYLES   == */
/* ================================== */
.cs-bento-grid-section {
    padding: 4rem 0;
}

.cs-bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Create a 6-column grid for flexibility */
    grid-auto-rows: 300px;
    /* This sets a fixed height for all rows */
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cs-bento-grid figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.cs-bento-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Changed to cover to fill the space nicely, as per modern design */
}

/* ================================== */
/* ================================== */
/* == BENTO GRID IMAGE POSITIONS == */
/* ================================== */
/* REPLACE your old img-pos classes with these final versions */

.cs-bento-grid img.img-pos-top {
    object-position: top !important;
}

.cs-bento-grid img.img-pos-bottom {
    object-position: bottom !important;
}

.cs-bento-grid img.img-pos-left {
    object-position: left !important;
}

.cs-bento-grid img.img-pos-right {
    object-position: right !important;
}

.cs-bento-grid img.img-pos-center {
    object-position: center !important;
}

/* Your custom class for manual control */
.cs-bento-grid img.img-pos-custom {
    /* Adjust these numbers as needed */
    object-position: 50% 25% !important;
}

/* Spanning items across the grid columns */
.cs-bento-grid .bento-item:nth-child(1) {
    grid-column: span 2;
}

.cs-bento-grid .bento-item:nth-child(2) {
    grid-column: span 2;
}

.cs-bento-grid .bento-item:nth-child(3) {
    grid-column: span 2;
}

.cs-bento-grid .bento-item:nth-child(4) {
    grid-column: span 3;
}

.cs-bento-grid .bento-item:nth-child(5) {
    grid-column: span 3;
}

/* Responsive adjustments for the grid */
@media (max-width: 768px) {
    /* ... existing media queries ... */

    .cs-bento-grid.two-wide {
        grid-template-columns: 1fr;
        /* Stack vertically on small screens */
        grid-auto-rows: auto;
        /* Allow height to be natural */
    }

    .cs-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }

    .cs-bento-grid .bento-item:nth-child(n) {
        grid-column: span 1;
        /* Each item takes 1 column */
    }

    .cs-bento-grid .bento-item:last-child {
        grid-column: 1 / -1;
        /* Make the last item span full width if it's odd */
    }
}

/* ================================== */
/* ==      LIGHTBOX STYLES         == */
/* ================================== */

.cs-bento-grid .bento-item {
    cursor: pointer;
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-overlay.active {
    display: flex;
    /* Shown with JS */
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 45px;
    color: white;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.lightbox-close:hover {
    transform: scale(1.1);
}


/* General Lightbox Trigger Styles */
a.lightbox-trigger {
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    line-height: 0;
    height: 100%;
    /* Prevents extra space under the image */
}

a.lightbox-trigger:hover {
    transform: scale(1.02);
    /* Adds a nice zoom effect on hover */
    opacity: 1;
}

/* Styling for clickable social media links in footer */
.social-link {
    text-decoration: none;
    display: block;
}

/* ADD THIS TO casestudy.css */

.embed-responsive-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 79.17%;
    /* This creates the correct aspect ratio for this specific LinkedIn embed (399 / 504) */
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.embed-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* =================================================================== */
/* ============= RESPONSIVE STYLES FOR CASE STUDY PAGE =============== */
/* =================================================================== */

@media (max-width: 992px) {

    /* --- General adjustments for tablets --- */
    .case-study-body .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .case-study-title {
        font-size: 2.5rem;
        /* Make hero title smaller */
    }

    .case-study-subtitle {
        font-size: 1.25rem;
    }

    .cs-info-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid on tablets */
    }

    .cs-comparison-grid {
        gap: 2rem;
        /* Reduce gap between columns */
    }
}


@media (max-width: 768px) {
    /* --- Major layout changes for mobile phones --- */

    /* Hero Section */
    .hero-section {
        padding-top: 200px;
        /* Less padding on mobile */
    }

    .case-study-title {
        font-size: 2rem;
    }

    /* Overview Section */
    .cs-info-grid {
        text-align: left;
        /* Align grid text left for readability */
    }

    /* Challenge & Solution Section */
    .cs-comparison-grid {
        grid-template-columns: 1fr;
        /* Stack columns vertically */
        gap: 3rem;
    }

    .cs-comparison-grid::before {
        display: none;
        /* Hide the vertical divider line */
    }

    .cs-column-header h3 {
        font-size: 1.2rem;
        padding: 0.75rem 1.5rem;
    }

    /* Impact & Results Section */
    .cs-impact-grid {
        grid-template-columns: 1fr;
        /* Stack impact cards */
        gap: 1.5rem;
    }

    .cs-impact-card {
        text-align: center;
        /* Center content in stacked cards */
    }

    .cs-impact-card .cs-icon {
        margin-left: auto;
        margin-right: auto;
        /* Center the icon */
    }

    /* Testimonial Section */
    .testimonial-card {
        padding: 1.5rem;
    }

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

    .testimonial-author {
        flex-direction: column;
        /* Stack author image and name */
        text-align: center;
        gap: 1rem;
    }

    /* Image Grids */
    .image-grid {
        grid-template-columns: 1fr;
        /* Stack images vertically */
    }

    .cs-bento-grid {
        grid-template-columns: 1fr;
        /* Stack all bento items */
        grid-auto-rows: auto;
    }

    .cs-bento-grid .bento-item:nth-child(n) {
        grid-column: span 1;
        /* Ensure each item takes up one column */
        height: 250px;
    }
}


/* =================================================================== */
/* ============= EXTRA STYLES FOR VERY SMALL SCREENS ================ */
/* =================================================================== */

@media (max-width: 400px) {

    /* --- KEEP YOUR EXISTING RULES FOR THE CHALLENGE SECTION HERE --- */
    .cs-column-header h3 {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .cs-challenge-item,
    .cs-solution-category {
        padding: 1rem;
    }

    .cs-challenge-item p,
    .cs-solution-category p,
    .cs-solution-category h4 {
        font-size: 0.85rem;
    }

    /* ADD this inside your @media (max-width: 768px) block */
.cs-conclusion-section p {
        font-size: 0.8rem;
        /* Adjusts conclusion text for very small screens */
        line-height: 1.7;
    }
    .case-study-body p {
        font-size: 0.8rem;
        /* Adjusts paragraph text for tablets */
        line-height: 1.7;
    }

    /* ▼▼▼ ADD THESE NEW RULES FOR THE TESTIMONIAL ▼▼▼ */

    /* Reduce padding on the main card */
    .testimonial-card {
        padding: 1.25rem 1rem;
    }

    /* Make the large quote icon smaller */
    .quote-icon {
        width: 40px;
    }

    /* Make the main testimonial text smaller and more readable */
    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* Make the author's image smaller */
    .author-img {
        width: 50px;
        height: 50px;
    }

    /* Make the author's name and role smaller */
    .author-name {
        font-size: 1rem;
    }

    .author-role {
        font-size: 0.8rem;
    }
}

/* =================================================================== */
/* ============= GLOBAL PADDING FIX FOR CASE STUDY MOBILE ============ */
/* =================================================================== */

@media (max-width: 768px) {
    /*
      This rule targets all the main sections of your case study and
      adds 1rem (about 16px) of padding on the left and right sides
      to prevent content from touching the screen edges.
    */
    .cs-overview-section,
    .cs-challenge-solution-section,
    .cs-impact-results,
    .two-images,
    .testimonial-section,
    .cs-conclusion-section,
    .cs-bento-grid-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* We also remove padding from the .container inside these sections
       to prevent double-padding issues. */
    .case-study-body .container {
        padding-left: 0;
        padding-right: 0;
    }
}