/*======================================
FRAMEWORK 10 STORY
======================================*/

.story{

position:relative;

padding:var(--space-2xl) 0;

}

.story-heading{

text-align:center;

max-width:800px;

margin:auto auto var(--space-2xl);

}

.story-heading span{

color:var(--secondary);

letter-spacing:4px;

}

.story-heading h2{

font-size:70px;

margin:25px 0;

}

.timeline{

position:relative;

max-width:900px;

margin:auto;

}

.line{

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:var(--gradient-primary);

transform:translateX(-50%);

}

.story-card{

width:42%;

padding:35px;

background:var(--glass);

backdrop-filter:blur(var(--blur));

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

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

margin-bottom:80px;

position:relative;

transition:var(--transition);

}

.left{

margin-right:auto;

}

.right{

margin-left:auto;

}

.number{

font-size:60px;

font-family:Syne;

background:var(--gradient-primary);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:20px;

}

.story-card h3{

font-size:34px;

margin-bottom:20px;

}

.story-card p{

line-height:1.8;

}

.reveal{

opacity:0;

transform:translateY(80px);

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

@media(max-width:992px){

.line{

left:25px;

}

.story-card{

width:calc(100% - 60px);

margin-left:60px;

}

.left,

.right{

margin-right:0;

}

.story-heading h2{

font-size:46px;

}

}