/*========================================================================

TENET SOLUTIONS FRAMEWORK

--------------------------------------------------------------------------

Project     : Tenet Solutions Website
File        : transformation.css
Author      : Tenet Solutions (Technical Partner & Solutions Architect)
Signature   : Designed & Engineered with Intent.

All Rights Reserved. Copyright 2026

========================================================================*/

.ts-solutions{

    position:relative;

    overflow:hidden;
	
	background:#121d31;

}

.ts-solution{

    margin-top:90px;

}

.ts-solution:first-of-type{

    margin-top:60px;

}

/*----------------------------------------------------------
    Solution Heading
----------------------------------------------------------*/

.ts-solution-title{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:40px;

}

.ts-solution-title i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(146,215,248,.08);

    color:#92d7f8;

    font-size:1.8rem;

    flex-shrink:0;

}

.ts-solution-title h3{

    margin:0;

    font-size:2rem;

    font-weight:700;

    color:#92d7f8;

}

.ts-solution-title p{

    margin:8px 0 0;

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

    font-size:1rem;

}

/*----------------------------------------------------------
    Journey Cards
----------------------------------------------------------*/

.ts-stage{

    position:relative;

    height:100%;

    padding: 20px 30px;

    border-radius:22px;

    background:rgba(1, 13, 35, 0.4);

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

    backdrop-filter:blur(10px);

    transition:.35s ease;

}

.ts-stage:hover{

    transform:translateY(-8px);

    border-color:rgba(146,215,248,.30);

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

}

.ts-stage small{

    display:block;

    margin-bottom:5px;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:1rem;

    font-weight:700;

    color:#92d7f8;

}

.ts-stage h5{

    margin:0;

    font-size:1rem;

    line-height:1.8;

    font-weight:100;

    color:#fff;

}

/*----------------------------------------------------------
    Connector Lines
----------------------------------------------------------*/

.ts-stage::after{

    content:"";

    position:absolute;

    top:50%;

    right:-40px;

    width:40px;

    height:2px;

    background:rgba(146,215,248,.25);

    transform:translateY(-50%);

    z-index:2;

}

.col-lg-4:last-child .ts-stage::after{

    display:none;

}

/*----------------------------------------------------------
    Animated Pulse
----------------------------------------------------------*/

.ts-stage::before{

    content:"";

    position:absolute;

    top:50%;

    right:-40px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#92d7f8;

    transform:translateY(-50%);

    opacity:0;

}

.ts-solution:hover .ts-stage::before{

    animation:tsPulse 2.2s linear infinite;

}

.ts-stage:nth-child(2)::before{

    animation-delay:.7s;

}

.ts-stage:nth-child(3)::before{

    animation-delay:1.4s;

}

@keyframes tsPulse{

    0%{

        opacity:0;

        transform:translateY(-50%) translateX(0);

    }

    20%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(-50%) translateX(40px);

    }

}

/*----------------------------------------------------------
    Accent Colours
----------------------------------------------------------*/

.problem{

    border-top:3px solid #92d7f8;

}

.help{

    border-top:3px solid #92d7f8;

}

.outcome{

    border-top:3px solid #92d7f8;

}

/*----------------------------------------------------------
    Responsive
----------------------------------------------------------*/

@media(max-width:991px){

    .ts-solution{

        margin-top:70px;

    }

    .ts-solution-title{

        flex-direction:column;

        text-align:center;

    }

    .ts-stage{

        margin-bottom:25px;

    }

    .ts-stage::after,

    .ts-stage::before{

        display:none;

    }

}