/* ==========================================================================
   CASE STUDY
========================================================================== */

.case-study {

    position: relative;

    overflow: clip;

    background: var(--color-body);

    isolation: isolate;

}

.case-study::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    /* background:

radial-gradient(

circle at top right,

rgba(249,115,22,.08),

transparent 28%

); */

    background:
        #0F172A;

}

/* ==========================================================================
   SECTION
========================================================================== */

.case-study__section {

    position: relative;

    padding-block: clamp(6rem, 8vw, 8.5rem);

}

.case-study__section+.case-study__section {

    border-top: 1px solid rgba(255, 255, 255, .04);

}

/* ==========================================================================
   BREADCRUMB
========================================================================== */

.case-study__breadcrumb {

    position: relative;

    z-index: 10;

    padding-top: calc(var(--header-height) + 2rem);

    padding-bottom: 2rem;

}

.breadcrumb {

    display: flex;

    align-items: center;

    gap: .75rem;

    flex-wrap: wrap;

    font-size: .95rem;

}

.breadcrumb a {

    color: var(--color-text-light);

    transition: var(--transition-fast);

}

.breadcrumb a:hover {

    color: var(--color-primary);

}

.breadcrumb span {

    color: var(--color-primary);

}

/* ==========================================================================
   HERO
========================================================================== */

.case-study__hero {

    position: relative;

    padding-top: 2rem;

    padding-bottom: 7rem;

}

.case-study__hero .container {

    display: grid;

    grid-template-columns: 1fr .95fr;

    align-items: start;

    gap: clamp(4rem, 7vw, 7rem);

}

.case-study__hero-content {

    padding-top: 1rem;

    max-width: 650px;

}

.case-study__badge {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    padding: .75rem 1.25rem;

    margin-bottom: 2rem;

    border-radius: 999px;

    background: rgba(249, 115, 22, .08);

    border: 1px solid rgba(249, 115, 22, .20);

    color: var(--color-primary);

    font-weight: 600;

}

.case-study__badge::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow: 0 0 12px rgba(249, 115, 22, .6);

}

.case-study__title {

    font-size: clamp(3rem, 5vw, 4.8rem);

    line-height: 1.05;

    letter-spacing: -.04em;

    margin-bottom: 1.75rem;

}

.case-study__description {

    max-width: 620px;

    font-size: 1.08rem;

    line-height: 1.9;

    color: var(--color-text-light);

    margin-bottom: 2.5rem;

}

.case-study__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

}

/* ==========================================================================
   HERO IMAGE
========================================================================== */

.case-study__hero-image {

    display: flex;

    justify-content: center;

    align-items: flex-start;

}

.case-study__hero-image img {

    width: 100%;

    max-width: 620px;

    height: auto;

    object-fit: contain;

    border-radius: var(--radius-xl);

    border: 1px solid var(--color-border);

    background: var(--color-card);

    box-shadow:

        0 35px 70px rgba(0, 0, 0, .30),

        0 12px 30px rgba(249, 115, 22, .08);

}

/* ==========================================================================
   COMMON SECTION HEADER
========================================================================== */

.case-study__section-header {

    max-width: 760px;

    margin-inline: auto;

    margin-bottom: 4rem;

    text-align: center;

}

.case-study__section-header .section-tag {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    margin-bottom: 1rem;

    color: var(--color-primary);

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.case-study__text .section-tag {
    color: var(--color-primary);
}

.case-study__section-header .section-title {

    margin-bottom: 1.25rem;

}

.case-study__section-header p {

    max-width: 680px;

    margin-inline: auto;

    color: var(--color-text-light);

    line-height: 1.9;

}


/* ==========================================================================
   PROJECT OVERVIEW
========================================================================== */

.case-study__overview-content {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 3rem;

    text-align: center;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .16);

}

.case-study__overview-content p {

    margin: 0;

    color: var(--color-text-light);

    line-height: 2;

    font-size: 1.05rem;

}


.case-study__overview-content {

    transition: .35s ease;

}

.case-study__overview-content:hover {

    transform: translateY(-6px);

    border-color: var(--color-primary);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .22);

}




/* ==========================================================================
   CONTENT LAYOUT
========================================================================== */

.case-study__content {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);

    align-items: center;

    gap: clamp(4rem, 7vw, 7rem);

}


.case-study__content--reverse {

    direction: rtl;

}

.case-study__content--reverse>* {

    direction: ltr;

}

/* ==========================================================================
   TEXT
========================================================================== */
.case-study__challenge .case-study__text {

    max-width: 620px;


}

.case-study__content--reverse .case-study__text {

    margin-left: auto;

}

.case-study__text h2,

.case-study__text h3 {

    margin-bottom: 1.25rem;

    line-height: 1.2;

}

.case-study__text p {

    color: var(--color-text-light);

    font-size: 1.03rem;

    line-height: 1.95;

    margin-bottom: 1.35rem;

}

.case-study__text p:last-child {

    margin-bottom: 0;

}

.case-study__text strong {

    color: var(--color-title);

}

.case-study__text ul {

    display: grid;

    gap: 1rem;

    margin-top: 2rem;

}

.case-study__text li {

    display: flex;

    align-items: flex-start;

    gap: .85rem;

    color: var(--color-text-light);

    line-height: 1.8;

}

.case-study__text li::before {

    content: "";

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    margin-top: .72rem;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow: 0 0 12px rgba(249, 115, 22, .45);

}

/* ==========================================================================
   IMAGE
========================================================================== */

.case-study__image {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-xl);

    border: 1px solid var(--color-border);

    background: var(--color-card);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .18);

    transition:

        transform .45s ease,

        border-color .35s ease,

        box-shadow .45s ease;

}

.case-study__image:hover {

    transform: translateY(-10px);

    border-color: var(--color-border-hover);

    box-shadow:

        0 28px 70px rgba(0, 0, 0, .28);

}

.case-study__image img {

    display: block;

    /* width:100%;

    height:auto;

    object-fit:contain; */

    object-position: top center;

    transition: transform .6s ease;

}

.case-study__image img, .case-study__image video {

    width: 100%;

    height: auto;

    object-fit: contain;

    display: block;

}

.case-study__image:hover img {

    transform: scale(1.02);

}

.case-study__image:hover video {

    transform: scale(1.02);

}

/* ==========================================================================
   EXPAND BUTTON
========================================================================== */

.case-study__expand {

    position: absolute;

    right: 1.25rem;

    bottom: 1.25rem;

    width: 56px;

    height: 56px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background: rgba(15, 23, 42, .88);

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, .08);

    opacity: 0;

    transform: translateY(12px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        background .35s ease;

    z-index: 5;

}

.case-study__image:hover .case-study__expand {

    opacity: 1;

    transform: translateY(0);

}

.case-study__expand:hover {

    background: var(--gradient-primary);

}


.case-study__appointment-image:hover .case-study__expand {

    opacity: 1;

    transform: translateY(0);

}

.case-study__expand:hover {

    background: var(--gradient-primary);

}

/* ==========================================================================
   PROJECT INFORMATION
========================================================================== */

.case-study__info-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1.5rem;

    margin-top: 4rem;

}

.case-study__info-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    min-height: 220px;

    padding: 2rem;

    text-align: left;

}

.case-study__info-card i {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    border-radius: 50%;

    background: rgba(249, 115, 22, .08);

    color: var(--color-primary);

    font-size: 1.55rem;

    transition: .35s ease;
    border: 1px solid rgba(249, 115, 22, .15);

}

.case-study__info-card:hover i {

    transform: scale(1.08);

    background: rgba(249, 115, 22, .15);

}

.case-study__info-card span {

    margin-bottom: .65rem;

    font-size: .78rem;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--color-primary);

}

.case-study__info-card h3 {

    margin-bottom: .9rem;

    line-height: 1.3;

}

.case-study__info-card p {

    color: var(--color-text-light);

    line-height: 1.8;

}


/* ==========================================================================
   DESIGN CHALLENGE
========================================================================== */

.case-study__challenge .case-study__content {

    display: flex;

    justify-content: center;

}

.case-study__challenge .case-study__text {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 3rem;

    text-align: center;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .16);

}

.case-study__challenge .case-study__text p {

    margin: 0;

    line-height: 2;

}


/* ==========================================================================
   DESIGN GOALS
========================================================================== */

.case-study__goals-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.75rem;

    margin-top: 4rem;

}

.case-study__goal-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    min-height: 250px;

    padding: 2.5rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    transition: .35s ease;

}

.case-study__goal-card:hover {

    transform: translateY(-8px);

    border-color: var(--color-primary);

}

.case-study__goal-card i {

    border: 1px solid rgba(249, 115, 22, .15);

    width: 76px;

    height: 76px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.75rem;

    border-radius: 50%;

    background: rgba(249, 115, 22, .08);

    color: var(--color-primary);

    font-size: 1.75rem;

    transition: .35s ease;

}

.case-study__goal-card:hover i {

    transform: translateY(-4px);

    background: rgba(249, 115, 22, .16);

}

.case-study__goal-card h3 {

    margin-bottom: 1rem;

}

.case-study__goal-card p {

    color: var(--color-text-light);

    line-height: 1.85;

}

/* ==========================================================================
   TIMELINE
========================================================================== */

/* .case-study__timeline{

    display:grid;

    gap:1.5rem;

    max-width:980px;

    margin-inline:auto;

} */

.case-study__timeline {

    max-width: 950px;

    margin: 4rem auto 0;

    display: grid;

    gap: 1.5rem;

}

.case-study__timeline-item {

    display: flex;

    align-items: flex-start;

    gap: 1.75rem;

    padding: 2rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    transition: .35s ease;

}

.case-study__timeline-item:hover {

    transform: translateY(-6px);

    border-color: var(--color-primary);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);

}


/* .case-study__timeline-number{

    flex-shrink:0;

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(249,115,22,.08);

    color:var(--color-primary);

    font-size:1.6rem;

    font-weight:700;

} */

.case-study__timeline-number {

    width: 70px;

    height: 70px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(249, 115, 22, .08);

    color: var(--color-primary);

    font-size: 1.3rem;

    font-weight: 700;

    border: 1px solid rgba(249, 115, 22, .15);

}

.case-study__timeline-number:hover i {

    transform: translateY(-4px);

    background: rgba(249, 115, 22, .16);
}



/* .case-study__timeline-content h3{

    margin-bottom:.75rem;

}

.case-study__timeline-content p{

    color:var(--color-text-light);

    line-height:1.85;

} */

.case-study__timeline-content {

    flex: 1;

}

.case-study__timeline-content h3 {

    margin-bottom: .75rem;

}

.case-study__timeline-content p {

    color: var(--color-text-light);

    line-height: 1.9;

}


@media(max-width:768px) {

    .case-study__timeline-item {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

}



/* ==========================================================================
   design approach
========================================================================== */


.case-study__design-approach .case-study__goals-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}

@media(max-width:991px) {

    .case-study__design-approach .case-study__goals-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:576px) {

    .case-study__design-approach .case-study__goals-grid {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================================
   COLOR STRATEGY
========================================================================== */

/* .case-study__color-palette{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:1.75rem;

} */

.case-study__color-palette {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

    align-content: start;

}

/* .case-study__color-card{

    padding:2rem;

    text-align:center;

} */


.case-study__color-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 1.75rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    transition: .35s;

}

.case-study__color-card:hover {

    transform: translateY(-6px);

    border-color: var(--color-primary);

}

/* .case-study__color-preview{

    width:100%;

    height:170px;

    margin-bottom:1.5rem;

    border-radius:var(--radius-lg);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);

} */

.case-study__color-preview {

    width: 100%;

    height: 160px;

    border-radius: 18px;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(255, 255, 255, .08);

}

/* .case-study__color-card h3{

    margin-bottom:.6rem;

}

.case-study__color-card span{

    color:var(--color-primary);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.06em;

} */


.case-study__color-card h3 {

    margin-bottom: .5rem;

    text-align: center;

}

.case-study__color-card span {

    text-align: center;

    color: var(--color-primary);

    font-weight: 600;

}

.case-study__colors .case-study__text {

    max-width: 520px;

}

@media(max-width:992px) {

    .case-study__color-palette {

        grid-template-columns: repeat(2, 1fr);

    }


}

@media(max-width:768px) {

    .case-study__color-palette {

        grid-template-columns: 1fr;

    }

}

/* ==========================================================================
   APPOINTMENT
========================================================================== */
.case-study__appointment-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 5rem;

}



.case-study__appointment-content h3 {

    margin-bottom: 1rem;

}



.case-study__booking-step {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    transition: .35s;

}

.case-study__booking-step span {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(249, 115, 22, .10);

    color: var(--color-primary);

    font-weight: 700;

    flex-shrink: 0;

}

.case-study__booking-step p {

    margin: 0;

    color: var(--color-text);

}

.case-study__booking-step:hover {

    transform: translateX(8px);

    border-color: var(--color-primary);

}

/* ==========================================================================
   BOOKING FLOW
========================================================================== */

.case-study__booking-flow {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 2rem;

}

.case-study__booking-step {

    display: flex;

    align-items: center;

    gap: 1rem;

    min-height: 88px;

    padding: 1.25rem 1.5rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    transition: .35s;



}

.case-study__booking-step:hover {

    transform: translateY(-4px);

    border-color: var(--color-primary);

    box-shadow: 0 18px 35px rgba(0, 0, 0, .15);

}

/* background: rgba(249, 115, 22, .16); */


.case-study__booking-step span:hover i {
    background: rgba(249, 115, 22, .16);
}

.case-study__booking-step span {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(249, 115, 22, .08);

    color: var(--color-primary);

    font-weight: 700;

    border: 1px solid rgba(249, 115, 22, .15);

}


.case-study__appointment-image {
    position: relative;

    overflow: hidden;

    border-radius: var(--radius-xl);

    background: var(--color-card);

    border: 1px solid var(--color-border);

    padding: 1.25rem;

}

.case-study__appointment-image img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

}

.case-study__appointment-content {

    max-width: 560px;

}

.case-study__appointment-content h3 {

    margin-bottom: 1rem;

}


@media (max-width:991px) {

    .case-study__booking-flow {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================================
   HIGHLIGHTS
========================================================================== */

.case-study__highlights-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 1.5rem;

    margin-top: 4rem;

}

.case-study__highlight-card {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    min-height: 220px;

    padding: 2rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    transition: .35s ease;

}

.case-study__highlight-card:hover {

    transform: translateY(-8px);

    border-color: var(--color-primary);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);

}



.case-study__highlight-card i {


    width: 76px;

    height: 76px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.75rem;

    border-radius: 50%;

    background: rgba(249, 115, 22, .08);

    color: var(--color-primary);

    font-size: 1.75rem;

    transition: .35s ease;
    border: 1px solid rgba(249, 115, 22, .15);

}

.case-study__highlight-card:hover i {

    transform: translateY(-4px) scale(1.06);

    background: rgba(249, 115, 22, .16);

    color: var(--color-primary);

}

.case-study__highlight-card h3 {

    margin-bottom: 1rem;

}

.case-study__highlight-card p {

    color: var(--color-text-light);

    line-height: 1.9;

}


/* ==========================================================================
   FINAL OUTCOME
========================================================================== */

.case-study__outcome .case-study__content {

    display: flex;

    justify-content: center;

    align-items: center;

}

.case-study__outcome-card {

    width: 100%;

    max-width: 820px;

    margin: 0 auto;

    padding: 3rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    text-align: center;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);

}

.case-study__outcome-card p {

    color: var(--color-text-light);

    line-height: 1.9;

}

.case-study__outcome-card p+p {

    margin-top: 1.5rem;

}



/* ==========================================================================
   NEXT PROJECT
========================================================================== */

.case-study__next-project {

    text-align: center;

}

.case-study__next-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    max-width: 900px;

    margin-inline: auto;

    padding: 4rem;

    border-radius: var(--radius-xl);

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .03),
            rgba(255, 255, 255, .02));

    border: 1px solid var(--color-border);

}

.case-study__next-card .section-tag,

.case-study__next-card h2,

.case-study__next-card p {

    text-align: center;

}

.case-study__next-card p {

    max-width: 640px;

    margin: 1rem auto 2rem;

}

.case-study__next-card .btn {

    align-self: center;

}



/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media(max-width:992px) {

    .case-study__hero .container,

    .case-study__content,

    .case-study__appointment-layout {

        grid-template-columns: 1fr;

    }

    .case-study__hero {

        padding-bottom: 5rem;

    }

    .case-study__hero-content {

        max-width: 100%;

    }

    .case-study__hero-image {

        justify-content: center;

    }

    .case-study__hero-image img {

        max-width: 760px;

    }

    .case-study__info-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .case-study__goals-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .case-study__color-palette {

        grid-template-columns: repeat(2, 1fr);

    }

    .case-study__highlights-grid {

        grid-template-columns: 1fr;

    }

    .case-study__appointment-layout {

        justify-items: center;

    }

    .case-study__appointment-content {

        width: 100%;

        text-align: center;

    }

    .case-study__booking-flow {

        width: 100%;

        margin-top: 2rem;

    }

    .case-study__booking-step {

        justify-content: space-between;

    }

}

@media(max-width:768px) {

    .case-study__section {

        padding-block: 5rem;

    }

    .case-study__info-grid,

    .case-study__goals-grid,

    .case-study__color-palette {

        grid-template-columns: 1fr;

    }

    .case-study__content {

        gap: 3rem;

    }

    .case-study__hero-content {

        text-align: center;

    }

    .case-study__description {

        margin-inline: auto;

    }

    .case-study__actions {

        justify-content: center;

    }

    .case-study__next-card {

        padding: 2.5rem;

    }

    .case-study__info-card {

        align-items: center;

        text-align: center;

    }

    .case-study__info-card i {

        margin-inline: auto;

    }

    .case-study__appointment-content {

        max-width: 100%;

        margin: 0 auto;

        text-align: center;

    }

    .case-study__booking-flow {

        grid-template-columns: 1fr;

        justify-content: center;

    }

    .case-study__booking-step {

        justify-content: space-between;

        text-align: center;

    }

}

@media(max-width:576px) {

    .case-study__title {

        font-size: 2.3rem;

    }

    .case-study__hero {

        padding-bottom: 4rem;

    }

    .case-study__timeline-item {

        flex-direction: column;

        text-align: center;

    }

    .case-study__booking-step {

        align-items: flex-start;

    }

}

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

.case-study__lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    background: rgba(0, 0, 0, .88);

    backdrop-filter: blur(10px);

}

.case-study__lightbox.active {

    display: flex;

}

.case-study__lightbox-content {

    position: relative;

    width: min(1200px, 100%);

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.case-study__lightbox-image {

    display: block;

    width: 100%;

    max-width: 1100px;

    max-height: 80vh;

    object-fit: contain;

    border-radius: 20px;

}

.case-study__lightbox-close,

.case-study__lightbox-prev,

.case-study__lightbox-next {

    position: absolute;

    width: 56px;

    height: 56px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: #fff;

    background: rgba(15, 23, 42, .9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 100;

    font-size: 30px;

    line-height: 1;

}

.case-study__lightbox-close {

    top:12px;

    right:12px;

}

.case-study__lightbox-prev {

    left: 24px;

    top: 50%;

    transform: translateY(-50%);

}

.case-study__lightbox-next {

    right: 24px;

    top: 50%;

    transform: translateY(-50%);

}

.case-study__lightbox-caption {

    margin-top: 1.25rem;

    color: #fff;

    text-align: center;

}

.case-study__lightbox-counter {

    margin-top: .5rem;

    color: rgba(255, 255, 255, .7);

}


@media(max-width:768px) {

    .case-study__lightbox {

        padding: 1rem;

    }

    .case-study__lightbox-prev {

        left: 12px;

    }

    .case-study__lightbox-next {

        right: 12px;

    }

    .case-study__lightbox-close {

        top:12px;

        right: 12px;

    }

}