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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-solutions-hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 100px;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.08),
            transparent 48%
        ),
        #010d23;

}

hr {
    margin: 30px 0 0;
	
	border: none;
}

.ts-solutions-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent 55%
        );

    pointer-events:none;

}

.ts-solutions-hero .container{

    position:relative;

    z-index:2;

}

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

.ts-solutions-hero h1{

    max-width:900px;

    margin:28px auto;

    color:#ffffff;

}

.ts-solutions-hero p{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

}

/*==========================================================
    CAPABILITY OVERVIEW
==========================================================*/

.ts-capability-overview{

    display:grid;

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

    gap:28px;

    margin-top:80px;

}

/*==========================================================
    CAPABILITY ITEM
==========================================================*/

.ts-capability-item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:46px 34px;

    border-radius:30px;

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

    border:
        1px solid rgba(146,215,248,.10);

    backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.ts-capability-item:hover{

    transform:translateY(-10px);

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

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

    box-shadow:
        0 24px 60px rgba(0,0,0,.28);

}

/*==========================================================
    CAPABILITY ICON
==========================================================*/

.ts-capability-item i{

    display:flex;

    justify-content:center;

    align-items:center;

    width:76px;

    height:76px;

    margin-bottom:24px;

    border-radius:22px;

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

    color:#92d7f8;

    font-size:2rem;

    transition:
        transform .35s ease,
        background .35s ease;

}

.ts-capability-item:hover i{

    transform:translateY(-4px);

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

}

/*==========================================================
    CAPABILITY TYPOGRAPHY
==========================================================*/

.ts-capability-item h4{

    margin:0;

    color:#ffffff;

    line-height:1.5;

}

/*==========================================================
    LINKS
==========================================================*/

.ts-capability-item{

    text-decoration:none;

    color:inherit;

}

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

@media(max-width:991px){

    .ts-solutions-hero{

        padding:150px 0 90px;

    }

    .ts-capability-overview{

        grid-template-columns:1fr;

        margin-top:60px;

    }

}

@media(max-width:767px){

    .ts-capability-item{

        padding:36px 28px;

    }

    .ts-capability-item i{

        width:68px;

        height:68px;

        font-size:1.7rem;

    }

}



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

.ts-solutions-hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 120px;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.08),
            transparent 48%
        ),
        #010d23;

}

.ts-solutions-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            transparent 50%
        );

    pointer-events:none;

}

.ts-solutions-hero .container{

    position:relative;

    z-index:2;

}

.ts-solutions-hero h1{

    color:#ffffff;

    margin:28px 0;

    max-width:850px;

    margin-left:auto;

    margin-right:auto;

}

.ts-solutions-hero p{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

}



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

.ts-solution-section{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.08),
            transparent 48%
        ),
        #010d23;

}

.ts-solution-section .container{

    position:relative;

    z-index:2;

}



/*==========================================================
    INTRODUCTION
==========================================================*/

.ts-solution-intro{

    padding-right:40px;

}

.ts-solution-intro h2{

    color:#ffffff;

    margin:24px 0;

    max-width:650px;

}

.ts-solution-intro p{

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

    line-height:1.9;

    margin-bottom:22px;

}



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

.ts-solution-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

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

}

.ts-solution-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(1,13,35,.05),
            rgba(1,13,35,.25)
        );

}

.ts-solution-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
	
	background: linear-gradient(rgba(1,13,35,.88), rgba(1,13,35,.92));

}

.ts-solution-image:hover img{

    transform:scale(1.05);

}



/*==========================================================
    SOLUTION MODULES
==========================================================*/

.ts-solution-modules{

    display:grid;

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

    gap:24px;

    margin-top:80px;

}



/*==========================================================
    SOLUTION MODULE
==========================================================*/

.ts-solution-module{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 24px;

    border-radius:28px;

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

    border:
        1px solid rgba(146,215,248,.10);

    backdrop-filter:blur(18px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.ts-solution-module:hover{

    transform:translateY(-10px);

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

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

    box-shadow:
        0 24px 60px rgba(0,0,0,.28);

}



/*==========================================================
    MODULE ICON
==========================================================*/

.ts-solution-module i{

    display:flex;

    justify-content:center;

    align-items:center;

    width:72px;

    height:72px;

    margin-bottom:24px;

    border-radius:22px;

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

    color:#92d7f8;

    font-size:1.8rem;

    transition:
        transform .35s ease,
        background .35s ease;

}

.ts-solution-module:hover i{

    transform:translateY(-4px);

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

}



/*==========================================================
    MODULE TITLE
==========================================================*/

.ts-solution-module h4{

    margin:0;

    color:#ffffff;

    line-height:1.5;

}



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

@media(max-width:1199px){

    .ts-solution-modules{

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

    }

}

@media(max-width:991px){

    .ts-solutions-hero{

        padding:140px 0 100px;

    }

    .ts-solution-section{

        padding:100px 0;

    }

    .ts-solution-intro{

        padding-right:0;

        margin-bottom:50px;

    }

    .ts-solution-image{

        margin-bottom:60px;

    }

    .ts-solution-modules{

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

        margin-top:60px;

    }

}

@media(max-width:767px){

    .ts-solution-modules{

        grid-template-columns:1fr;

    }

    .ts-solution-module{

        padding:36px 20px;

    }

    .ts-solution-module i{

        width:64px;

        height:64px;

        font-size:1.6rem;

    }

}

/*==========================================================
    SOLUTIONS NAVIGATION
==========================================================*/

.ts-solutions-nav{

    position:sticky;

    top:90px;

    z-index:100;

    background:rgba(1,13,35,.82);

    backdrop-filter:blur(18px);

    border-top:1px solid rgba(146,215,248,.08);

    border-bottom:1px solid rgba(146,215,248,.08);

}

.ts-solutions-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    padding:18px 0;

}

.ts-solutions-links a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

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

    transition:
        all .35s ease;

}

.ts-solutions-links a:hover{

    background:#92d7f8;

    color:#010d23;

    transform:translateY(-2px);

}



/*==========================================================
    DELIVERY FRAMEWORK
==========================================================*/

.ts-delivery{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.08),
            transparent 48%
        ),
        #010d23;

}

.ts-delivery .container{

    position:relative;

    z-index:2;

}

.ts-delivery h2{

    color:#ffffff;

    margin:24px 0;

}

.ts-delivery p{

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

    line-height:1.9;

}



/*==========================================================
    FRAMEWORK
==========================================================*/

.ts-framework{

    display:grid;

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

    gap:40px;

    margin-top:90px;

    position:relative;

}



/*==========================================================
    CONNECTOR
==========================================================*/

.ts-framework::before{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    top:42px;

    height:2px;

    background:

        linear-gradient(

            to right,

            rgba(146,215,248,.18),

            rgba(146,215,248,.55),

            rgba(146,215,248,.18)

        );

}



/*==========================================================
    STEP
==========================================================*/

.ts-framework-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.ts-framework-number{

    width:84px;

    height:84px;

    margin:auto auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#92d7f8;

    color:#010d23;

    font-size:1.35rem;

    font-weight:700;

    box-shadow:

        0 0 0 10px rgba(146,215,248,.08);

}

.ts-framework-step h4{

    color:#ffffff;

    margin-bottom:18px;

}

.ts-framework-step p{

    max-width:260px;

    margin:auto;

}



/*==========================================================
    MICRO INTERACTION
==========================================================*/

.ts-framework-step{

    transition:
        transform .35s ease;

}

.ts-framework-step:hover{

    transform:translateY(-8px);

}

.ts-framework-step:hover .ts-framework-number{

    transform:scale(1.08);

    transition:.35s;

}



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

@media(max-width:991px){

    .ts-framework{

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

        gap:60px 40px;

    }

    .ts-framework::before{

        display:none;

    }

    .ts-solutions-nav{

        top:80px;

    }

}

@media(max-width:767px){

    .ts-solutions-links{

        flex-direction:column;

    }

    .ts-solutions-links a{

        width:100%;

    }

    .ts-framework{

        grid-template-columns:1fr;

    }

}

/*==========================================================
    SMOOTH SCROLLING
==========================================================*/

html{

    scroll-behavior:smooth;

    scroll-padding-top:140px;

}



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

.ts-solution-section,
.ts-delivery{

    isolation:isolate;

}

.ts-solution-section::before,
.ts-delivery::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.02),

            transparent 25%,

            transparent 75%,

            rgba(0,0,0,.08)

        );

}



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

.ts-solution-image{

    position:relative;

}

.ts-solution-image::before{

    content:"";

    position:absolute;

    width:75%;

    height:75%;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:40px;

    background:

        radial-gradient(

            rgba(146,215,248,.18),

            transparent 72%

        );

    filter:blur(45px);

    z-index:-1;

}



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

.ts-solution-image{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.ts-solution-image:hover{

    transform:translateY(-6px);

    box-shadow:

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

}



/*==========================================================
    MODULE REFINEMENTS
==========================================================*/

.ts-solution-module{

    cursor:default;

    user-select:none;

}

.ts-solution-module::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    opacity:0;

    transition:opacity .35s ease;

    background:

        linear-gradient(

            135deg,

            rgba(146,215,248,.08),

            transparent 60%

        );

}

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

    opacity:1;

}



/*==========================================================
    MODULE TITLE
==========================================================*/

.ts-solution-module h4{

    transition:

        color .35s ease,

        transform .35s ease;

}

.ts-solution-module:hover h4{

    color:#92d7f8;

    transform:translateY(-2px);

}



/*==========================================================
    NAVIGATION
==========================================================*/

.ts-solutions-links a{

    position:relative;

    overflow:hidden;

}

.ts-solutions-links a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:8px;

    width:0;

    height:2px;

    background:#010d23;

    transition:.35s ease;

    transform:translateX(-50%);

}

.ts-solutions-links a:hover::after{

    width:55%;

}



/*==========================================================
    FRAMEWORK STEP
==========================================================*/

.ts-framework-step{

    transition:

        transform .35s ease,

        opacity .35s ease;

}

.ts-framework-step:hover{

    transform:translateY(-10px);

}

.ts-framework-step:hover .ts-framework-number{

    box-shadow:

        0 0 0 12px rgba(146,215,248,.12),

        0 20px 45px rgba(0,0,0,.28);

}



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

.ts-framework-number{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.ts-framework-step:hover .ts-framework-number{

    transform:scale(1.08);

}



/*==========================================================
    FADE-IN SUPPORT
==========================================================*/

.ts-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.ts-reveal.active{

    opacity:1;

    transform:none;

}



/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

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

.ts-solution-section:not(:last-of-type){

    border-bottom:1px solid rgba(146,215,248,.08);

}

.ts-delivery{

    border-top:1px solid rgba(146,215,248,.08);

}



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

.ts-solution-section .ts-section-tag,
.ts-delivery .ts-section-tag{

    margin-bottom:22px;

}



/*==========================================================
    TYPOGRAPHY
==========================================================*/

.ts-solution-intro h2,
.ts-delivery h2{

    letter-spacing:-.02em;

}

.ts-solution-intro p,
.ts-delivery p{

    font-size:1.05rem;

}



/*==========================================================
    MODULE SPACING
==========================================================*/

.ts-solution-module{

    min-height:210px;

}

.ts-solution-module h4{

    max-width:180px;

}



/*==========================================================
    ICON REFINEMENT
==========================================================*/

.ts-solution-module i{

    border:1px solid rgba(146,215,248,.12);

}



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

.ts-solution-image{

    border:1px solid rgba(146,215,248,.08);

}

.ts-solution-image img{

    display:block;

}



/*==========================================================
    DELIVERY FRAMEWORK
==========================================================*/

.ts-framework{

    align-items:start;

}

.ts-framework-step{

    padding:0 12px;

}



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

.ts-framework-number{

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

}



/*==========================================================
    NAVIGATION ACTIVE STATE
==========================================================*/

.ts-solutions-links a.active{

    background:#92d7f8;

    color:#010d23;

    box-shadow:

        0 14px 35px rgba(146,215,248,.18);

}



/*==========================================================
    FOCUS STATES
==========================================================*/

.ts-solutions-links a:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px rgba(146,215,248,.30);

}

.ts-solution-module:focus-visible{

    outline:none;

    border-color:#92d7f8;

}



/*==========================================================
    SELECTION
==========================================================*/

.ts-solution-section ::selection,
.ts-delivery ::selection{

    background:#92d7f8;

    color:#010d23;

}