/* Case Study Page Styles */

body{
    background-color: #F2F2F2 !important;
}

/* Hero Section */
.case-study-hero {
    background: #063D38;
    padding: 250px 32px 32px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
}

.case-study-hero .container{
    width: 100%;
}

/* .case-study-hero .container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0;
} */

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    padding: 8px 24px;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    width: fit-content;
}

.breadcrumb-item {
    color: #FFF;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-xs);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb-item:hover {
    opacity: 0.7;
}

.breadcrumb-item.current {
    pointer-events: none;
}

.breadcrumbs svg {
    flex-shrink: 0;
}

/* Hero Title */
.hero-title-wrapper {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 32px;
}

.hero-title {
    color: #FFF;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-heading-h1);
    font-style: normal;
    font-weight: var(--alpha-body-medium);
    line-height: 130%;
    margin: 0;
}

.hero-title-wrapper svg {
    flex-shrink: 0;
}

/* Hero Subtitle */
.hero-subtitle {
    color: #FFF;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-large);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    margin-top: 16px;
}

/* Hero Video */
.hero-video-wrapper {
    margin-top: 80px;
    /* padding: 0 32px; */
}

.hero-video {
    width: 100%;
    border-radius: 40px;
    display: block;
}

/* Case Study Sections */
.case-study-section {
    padding: 128px 80px;
    background-color: #F2F2F2;
}

/* .case-study-section .container {
    max-width: var(--max-width-wide);
} */

.case-study-section.results-section{
    padding: 128px 80px;
}

/* Section Content Layout */
.section-content {
    display: flex;
    justify-content: space-between;
}

.overview-section .section-content {
    align-items: center;
}

.content-left {
    flex: 0 0 65%;
}

.content-left-alt{
    flex: 0 0 calc(35% - 205px);
}

.content-right-alt {
    flex: 0 0 65%;
}

.content-right {
    flex: 0 0 calc(35% - 90px);
}

/* Section Typography */
.section-title {
    color: #0A0A0A;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-heading-h2);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 100%;
    margin: 0 0 24px 0;
}

.section-text {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-medium);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    margin: 0 0 24px 0;
}

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

/* Meta List */
.meta-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-item {
    color: #3D3D3D;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-small);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    padding: 10px 24px;
    background-color: #E0E0E0;
    border-radius: 100px;
}

/* Spacer Image Section */
.spacer-image-section {
    background-color: #F2F2F2;
    padding: 0 80px;
}

/* .spacer-image-section .container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
} */

.spacer-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 40px;
}

/* Section Divider (kept for any remaining dividers) */
.section-divider {
    background-color: #F2F2F2;
    padding: 0px 32px;
}

/* .section-divider .container{
    max-width: var(--max-width-wide);
} */

.divider{
    width: 100%;
    height: 1px;
    background-color: #858585;
}


/* Challenge Section */
.challenge-section .content-left {
    flex: 0 0 70%;
}

/* Solution Section */
.case-study-section.solution-section{
    background: #D7E6E2;
}

.solution-images {
    margin-top: 128px;
}

.solution-image-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.grid-item {
    border-radius: 40px;
    overflow: hidden;
    /* min-height: 532px; */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-item:nth-child(1) {
    grid-column: span 3;
    grid-row: span 1;
}

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

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

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

/* Results Section */
/* .results-section .container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
} */

.results-intro {
    max-width: 800px;
    margin-bottom: 80px;
}

.stat-value.stat-num {
  font-size: var(--alpha-heading-h1) !important;
}

.stat-value {
  font-size: var(--alpha-heading-h3) !important;
  max-width: 410px;
}

/* Feedback Section */
/* .feedback-section .container {
    max-width: var(--max-width-wide);
} */

.case-study-section.feedback-section{
    padding: 80px 80px 200px 80px;
}

.feedback-left {
    flex: 0 0 calc(42% - 120px);
}

.feedback-right {
    flex: 0 0 58%;
}

.feedback-content{
    position: relative;
}

.quote-icon {
    width: 100px;
    height: auto;
    position: absolute;
    left: -85px;
    top: -35px;
}

.feedback-quote {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-large);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    margin: 0 0 32px 0;
}

.feedback-author {
    margin-top: 32px;
}

.author-name {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-heading-h5);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 130%;
    margin: 0 0 8px 0;
}

.author-title {
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-small);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    margin: 0;
}

/* Share Section */
.share-section {
    background-color: #F2F2F2;
    padding: 0px 80px 64px;
}

/* .share-section .container {
    max-width: var(--max-width-wide);
} */

.share-wrapper {
    display: flex;
    align-items: center;
    gap: 32px;
}

.share-title {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-medium);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 150%;
}

.share-buttons {
    display: flex;
    gap: 8px;
}

.share-button {
    color: #FFF;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-medium);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 150%;
    padding: 14px 32px;
    background: #000;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-button:hover {
    background-color: #F06831;
}

/* Next Case Section */
.next-case-section {
    background: #F2F2F2;
    padding: 64px 80px 38px 80px;
}

/* .next-case-section .container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
} */

.next-case-inner {
    padding: 0 110px;
}

.next-case-header {
    margin-bottom: 40px;
}

.next-case-label {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-body-small);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    display: block;
    margin-bottom: 8px;
}

.next-case-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
}

.next-case-title {
    color: #000;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--alpha-heading-h4);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 150%;
    margin: 0;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.next-case-title-wrapper svg {
    flex-shrink: 0;
    transform: translateX(0px);
    transition: 0.3s ease-in-out;
}

.next-case-title-wrapper:hover svg {
    transform: translateX(10px);
}

.next-case-title-wrapper:hover .next-case-title {
    color: #F06831;
}

.next-case-video {
    margin-top: 40px;
}

.next-case-video video {
    width: 100%;
    height: 480px;
    border-radius: 40px;
    display: block;
    object-fit: cover;
}

.case-study-cta-section{
    background-color: #F2F2F2;
    padding: 0px 120px 200px;
}

.case-study-cta-content{
    display: flex;
    justify-content: center;
}

/* CTA Section - Using styles from index.html */

/* Responsive Design */

/* Extra Large Screens */
@media (min-width: 1800px) {
    .case-study-hero {
        padding: 250px 32px 32px 32px;
    }

    .case-study-section {
        padding: 128px 120px;
    }

    .case-study-section.results-section {
        padding: 128px 120px;
    }

    .case-study-section.feedback-section {
        padding: 0px 120px 200px;
    }

    .share-section {
        padding: 0px 120px 64px;
    }

    .next-case-section {
        padding: 64px 120px 30px;
    }

    .case-study-cta-section {
        padding: 0px 120px 200px;
    }
}

/* Large Screens */
@media (min-width: 1400px) and (max-width: 1799px) {
    .case-study-hero {
        padding: 250px 32px 32px 32px;
    }

    .case-study-section {
        padding: 120px 120px;
    }

    .case-study-section.results-section {
        padding: 120px 120px;
    }

    .case-study-section.feedback-section {
        padding: 0px 120px 200px;
    }

    .share-section {
        padding: 0px 120px 64px;
    }

    .next-case-section {
        padding: 64px 120px 30px;
    }

    .case-study-cta-section {
        padding: 0px 120px 200px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .case-study-hero {
        padding: 200px 40px 40px 40px;
    }

    .case-study-section {
        padding: 100px 48px;
    }

    .spacer-image-section {
    padding: 0 48px;
}

    .case-study-section.results-section {
        padding: 100px 48px;
    }

    .case-study-section.feedback-section {
        padding: 0px 48px 120px;
    }

    .share-section {
        padding: 0px 48px 48px;
    }

    .next-case-section {
        padding: 48px 48px 30px;
    }

    .case-study-cta-section {
        padding: 0px 48px 120px;
    }

    .section-content {
        flex-direction: column;
        gap: 16px;
    }

    .hidden-alt{
        display: none;
    }

    .content-left,
    .content-right,
    .content-left-alt,
    .content-right-alt {
        flex: 1;
    }

    .casestudy-logo{
        padding-top: 30px;
    }

    .next-case-inner {
        padding: 0 40px;
    }

    .solution-image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-item:nth-child(1),
    .grid-item:nth-child(2),
    .grid-item:nth-child(3),
    .grid-item:nth-child(4) {
        grid-column: span 1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .case-study-hero {
        padding: 150px 20px 32px 20px;
    }

    .case-study-section {
        padding: 80px 20px;
    }

        .spacer-image-section {
    padding: 0 20px;
}

    .case-study-section.results-section {
        padding: 80px 28px;
    }

    .case-study-section.feedback-section {
        padding: 64px 28px 100px;
    }

    .share-section {
        padding: 0px 28px 48px;
    }

    .next-case-section {
        padding: 48px 28px 30px;
    }

    .case-study-cta-section {
        padding: 0px 28px 100px;
    }

    .spacer-image-section {
        padding: 0 20px;
    }

    .solution-images {
    margin-top: 60px;
}

    .share-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .share-buttons {
        flex-wrap: wrap;
    }

    .share-button {
        padding: 12px 24px;
    }

    .hero-title-wrapper {
        gap: 24px;
    }

    .hero-title-wrapper svg{
        width: 44px;
        height: 44px;
    }

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

    .hero-video-wrapper {
        margin-top: 60px;
    }

    .hero-video {
        border-radius: 24px;
    }

    .solution-image-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* .grid-item {
        min-height: 300px;
    } */

    .quote-icon {
        width: 60px;
        left: -10px;
        top: -20px;
    }

    .next-case-inner {
        padding: 0 20px;
    }

    .next-case-video {
        margin-top: 32px;
    }

    .next-case-video video {
        border-radius: 24px;
        height: 300px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .case-study-hero {
        padding: 24px 20px 16px 20px;
    }

    .case-study-section {
        padding: 60px 20px;
    }

    .case-study-section.results-section {
        padding: 60px 20px;
    }

    .case-study-section.feedback-section {
        padding: 48px 20px 80px;
    }

    .share-section {
        padding: 0px 20px 40px;
    }

    .next-case-section {
        padding: 40px 20px 20px;
    }

    .case-study-cta-section {
        padding: 0px 20px 80px;
    }

    .breadcrumbs {
        padding: 6px 16px;
    }

    .hero-title-wrapper svg {
        width: 48px;
        height: 48px;
    }

    .hero-video-wrapper {
        margin-top: 40px;
    }

    /* .grid-item {
        min-height: 250px;
    } */

    .next-case-inner {
        padding: 0;
    }

    .next-case-video video {
        height: 250px;
    }
}