/*=============================
GLOBAL
=============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:
    radial-gradient(circle at top,#0b2d36 0%,#071821 45%,#041118 100%);

    color:#fff;

    font-family:'Poppins',sans-serif;

    line-height:1.8;

}

a{
    text-decoration:none;
}

.case-intro-container,
.case-approach-container,
.case-final-container,
.author-box,
.trust-container{

    width:min(1200px,92%);
    margin:auto;

}


/*=============================
BACK BUTTON
=============================*/

.case-back-btn{

    width:min(1200px,92%);
    margin:35px auto;

}

.case-back-btn a{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 28px;

    border-radius:60px;

    background:#0f2833;

    border:1px solid rgba(0,255,180,.25);

    color:#fff;

    transition:.35s;

}

.case-back-btn a:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(0,255,170,.25);

}


/*=============================
INTRO
=============================*/

.case-intro-section{

    padding:30px 0 80px;

}

.section-label{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(0,255,170,.12);

    border:1px solid rgba(0,255,170,.25);

    color:#00e39b;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.case-intro-content{

    text-align:center;

}

.case-intro-content h1{

    font-size:56px;

    line-height:1.2;

    margin-bottom:30px;

    font-weight:700;

    max-width:900px;

    margin-inline:auto;

}

.case-intro-content h1{

background:linear-gradient(90deg,#ffffff,#dffcff,#00f7a8);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.case-intro-content p{

    color:#c3d4dc;

    font-size:18px;

    max-width:850px;

    margin:20px auto;

}


/*=============================
CASE CARD
=============================*/

.case-study-item{

    width:min(1200px,92%);
    margin:45px auto;

    border-radius:30px;

    overflow:hidden;

    border:1px solid rgba(0,255,180,.15);

    background:

    linear-gradient(180deg,
    rgba(12,38,48,.95),
    rgba(8,22,31,.98));

    backdrop-filter:blur(18px);

    transition:.45s;

}

.case-study-item:hover{

transform:translateY(-8px);

box-shadow:

0 20px 60px rgba(0,0,0,.45),

0 0 40px rgba(0,255,180,.10);

}


/*=============================
TOP
=============================*/

.case-study-preview{

padding:45px;

display:flex;

gap:35px;

align-items:flex-start;

}


/*=============================
NUMBER
=============================*/

.case-number{

width:120px;
height:120px;

border-radius:30px;

display:flex;
align-items:center;
justify-content:center;

font-size:48px;

font-weight:700;

background:

linear-gradient(145deg,#00f0a8,#00b8ff);

color:#03131a;

box-shadow:

0 10px 40px rgba(0,255,180,.25);

flex-shrink:0;

}


/*=============================
TEXT
=============================*/

.case-heading h2{

font-size:36px;

line-height:1.3;

margin-bottom:18px;

}

.case-heading p{

font-size:18px;

color:#bdd1d8;

margin-bottom:35px;

}


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

.case-toggle{

padding:18px 38px;

border:none;

border-radius:60px;

cursor:pointer;

font-size:16px;

font-weight:600;

color:#071821;

background:

linear-gradient(90deg,#00f0a8,#35ffd0);

transition:.4s;

}

.case-toggle:hover{

transform:translateY(-4px);

box-shadow:

0 0 35px rgba(0,255,180,.45);

}


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

.case-study-content{

padding:50px;

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

background:rgba(255,255,255,.02);

}

.case-study-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all .5s ease;
    padding:0 50px;
}

.case-study-content.active{
    max-height:8000px;
    opacity:1;
    padding:50px;
}


/*=============================
BLOCK
=============================*/

.case-block{

margin-bottom:50px;

}

.case-block h3,
.case-result h3,
.case-learning h3{

font-size:28px;

margin-bottom:18px;

color:#00f2a8;

}

.case-block p,
.case-result p,
.case-learning p{

font-size:17px;

color:#d0dde2;

}

.case-block ul{

margin-top:20px;

padding-left:25px;

}

.case-block li{

margin-bottom:12px;

color:#e6ecef;

}


/*=============================
RESULT BOX
=============================*/

.case-result{

margin:50px 0;

padding:35px;

border-radius:22px;

background:

linear-gradient(90deg,
rgba(0,255,180,.08),
rgba(0,180,255,.08));

border-left:5px solid #00f0a8;

}


/*=============================
LEARNING
=============================*/

.case-learning{

padding:35px;

border-radius:22px;

background:#0d2430;

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

}


/*=============================
BOTTOM SECTIONS
=============================*/

.case-approach-section,
.case-final-section,
.author-box-section,
.trust-section{

padding:100px 0;

}

.approach-box,
.case-final-content,
.case-cta-box,
.author-box,
.trust-card{

background:

linear-gradient(180deg,#0c2430,#081821);

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

border-radius:30px;

padding:45px;

backdrop-filter:blur(20px);

}

.case-cta-box{

margin-top:40px;

text-align:center;

}

.case-cta-box a{

display:inline-block;

margin-top:25px;

padding:18px 38px;

border-radius:60px;

background:

linear-gradient(90deg,#00f0a8,#00b8ff);

color:#041118;

font-weight:700;

}


/*=============================
AUTHOR
=============================*/

.author-box{

display:flex;

gap:40px;

align-items:center;

}

.author-image img{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

border:5px solid rgba(0,255,180,.3);

}


/*=============================
TRUST
=============================*/

.trust-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.trust-card{

transition:.35s;

}

.trust-card:hover{

transform:translateY(-8px);

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

}


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

@media(max-width:900px){

.case-study-preview{

flex-direction:column;

}

.case-number{

width:90px;
height:90px;
font-size:36px;

}

.case-heading h2{

font-size:28px;

}

.case-intro-content h1{

font-size:38px;

}

.author-box{

flex-direction:column;
text-align:center;

}

.trust-grid{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.case-study-preview,
.case-study-content{

padding:30px;

}

.case-intro-content h1{

font-size:30px;

}

.case-heading h2{

font-size:24px;

}

.case-heading p{

font-size:16px;

}

}