/*==========================================================
    COMPANY STORY X9
==========================================================*/

#tarmal-story-x9{

    position:relative;
    overflow:hidden;

    padding:140px 0 90px;

    background:#0b0d10;

    color:#fff;

    isolation:isolate;

}


/*==============================
BACKGROUND
==============================*/

.tsx9-bg{

    position:absolute;
    inset:0;

    overflow:hidden;

    z-index:0;

}

.tsx9-bg-image{

    position:absolute;
    inset:0;

    background-image:url("../images/company-story/bg.jpg"); /* Replace */

    background-size:cover;
    background-position:center;

    transform:scale(1.08);

    opacity:.34;

}

.tsx9-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(237,48,52,.16),
    transparent 40%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.05),
    transparent 45%),

    linear-gradient(
    180deg,
    rgba(6,8,12,.55),
    rgba(8,9,11,.95)
    );

}


/*==============================
GRID
==============================*/

.tsx9-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.05) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.05) 1px,
    transparent 1px);

    background-size:70px 70px;

    opacity:.22;

}


/*==============================
SMOKE
==============================*/

.tsx9-smoke{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    filter:blur(110px);

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

}

.tsx9-smoke-1{

    top:-180px;
    left:-150px;

}

.tsx9-smoke-2{

    right:-220px;
    bottom:-180px;

}


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

.tsx9-content{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}


/*==============================
LEFT
==============================*/

.tsx9-image-wrap{

    position:relative;

    perspective:1800px;

}

.tsx9-image{

    position:relative;
    
     height:720px; 

    border-radius:26px;

    overflow:hidden;

    background:#111;

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.55);

}

.tsx9-image img{

    display:block;

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}


/*==============================
GLOW
==============================*/

.tsx9-glow{

    position:absolute;

    inset:-12px;

    border-radius:30px;

    border:1px solid rgba(237,48,52,.35);

    box-shadow:

    0 0 80px rgba(237,48,52,.30);

}


/*==============================
BADGE
==============================*/

.tsx9-badge{

    position:absolute;

    top:32px;
    right:-18px;

    display:flex;

    align-items:center;

    gap:10px;

    background:rgba(20,20,20,.92);

    padding:14px 22px;

    border-radius:14px;

    backdrop-filter:blur(14px);

    font-size:.9rem;

    font-weight:600;

}

.tsx9-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ed3034;

}


/*==============================
30 CARD
==============================*/

.tsx9-card{

    position:absolute;

    left:-40px;
    bottom:-35px;

    width:250px;

    padding:30px;

    border-radius:22px;

    backdrop-filter:blur(22px);

    background:

    rgba(255,255,255,.08);

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

    box-shadow:

    0 30px 80px rgba(0,0,0,.45);

}

.tsx9-card h2{

    font-size:4rem;

    line-height:1;

    color:#ed3034;

}

.tsx9-card p{

    margin-top:12px;

    color:#ddd;

}


/*==============================
RIGHT
==============================*/

.tsx9-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#ed3034;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.85rem;

    font-weight:700;

}

.tsx9-label::before{

    content:"";

    width:46px;
    height:2px;

    background:#ed3034;

}

.tsx9-title{

    margin:28px 0;

    font-size:3rem;

    line-height:1.08;

    font-weight:800;
    
    color:#ffffff;

}

.tsx9-text{

    color:#cfcfcf;

    line-height:1.9;

    font-size:1.08rem;

}


/*==============================
LIST
==============================*/

.tsx9-list{

    list-style:none;

    margin:45px 0;

    padding:0;

}

.tsx9-list li{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:22px;

    color:#f2f2f2;

}

.tsx9-list span{

    width:13px;
    height:13px;

    margin-top:8px;

    border-radius:50%;

    background:#ed3034;

    flex:none;

}


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

.tsx9-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    color:#fff;

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

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

    text-decoration:none;

    transition:.35s;

}

.tsx9-btn:hover{

    background:#ed3034;

    border-color:#ed3034;

}


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

.tsx9-timeline{

    position:relative;

    z-index:5;

    display:flex;

    justify-content:space-between;

    margin-top:120px;

    padding-top:55px;

}

.tsx9-progress{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

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

}

.tsx9-progress::after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    background:#ed3034;

}

.tsx9-item{

    position:relative;

    width:20%;

}

.tsx9-point{

    display:block;

    width:18px;
    height:18px;

    border-radius:50%;

    margin:0 auto 20px;

    background:#ed3034;

    box-shadow:

    0 0 25px rgba(237,48,52,.75);

}

.tsx9-year{

    display:block;

    margin-bottom:14px;

    text-align:center;

    font-size:1.1rem;

    font-weight:700;

}

.tsx9-item p{

    text-align:center;

    color:#cfcfcf;

    font-size:.95rem;

}