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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-hero{

position:relative;

overflow:hidden;

background:#010d23;

padding-top:var(--header-height);

min-height:100vh;

    display:flex;

    align-items:center;

}

/*==========================================================
    Mobile Hero Offset
==========================================================*/

@media (max-width: 991.98px){

    .ts-hero{

        padding-top: 40px;
		
		align-items:flex-start;

        padding-top:180px;

        padding-bottom:80px;

    }
	
	:root{

        --header-height:130px;

    }

}

.ts-hero .container{

position:relative;

z-index:5;

}

.ts-badge{

display:inline-block;

padding:10px 18px;

margin-bottom:28px;

border-radius:50px;

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

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

color:#92d7f8;

font-size:.8rem;

letter-spacing:.15em;

font-weight:600;

}

.ts-hero h1{

font-size:3rem;

line-height:1.15;

margin-bottom:25px;

font-weight:800;

}

.ts-hero h1 span{

color:#92d7f8;

}

.ts-hero p{

font-size:1.15rem;

line-height:1.9;

max-width:620px;

margin-bottom:45px;

}

.ts-hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.ts-btn-solid{

padding:15px 34px;

border-radius:50px;

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

color:white;

transition:.35s;

}

.ts-btn-solid:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(146,215,248,.25);

}

.ts-btn-solid:hover{

background:white;

color:#010d23;

}

.ts-btn-outline{

padding:15px 34px;

border-radius:50px;

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

color:white;

transition:.35s;

}

.ts-btn-outline:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(146,215,248,.25);

}

.ts-btn-outline:hover{

background:white;

color:#010d23;

}

.ts-hero-btn{

margin-left:40px;

padding:14px 28px;

border-radius:50px;

background:linear-gradient(135deg,var(--ts-primary), var(--ts-primary-dark));

color:#010d23;

font-weight:700;

transition:.35s;

}

.ts-hero-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(146,215,248,.25);

}

.ts-hero-logo{

display:flex;

justify-content:center;

align-items:center;

min-height:650px;

}

.ts-hero-logo img{

width:430px;

max-width:100%;

filter:drop-shadow(0 0 50px rgba(146,215,248,.25));

}


#ts-particles{

position:absolute;

inset:0;

width:100%;

height:100%;

z-index:1;

pointer-events:none;

opacity:.55;

}
/*==========================================================

    Hero Logo Experience

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

.ts-hero-logo{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:620px;

}

.ts-hero-logo img{

position:relative;

width:350px;

z-index:5;

animation:logoFloat 6s ease-in-out infinite;

}

.ts-logo-glow{

position:absolute;

width:360px;

height:360px;

border-radius:50%;

background:radial-gradient(

circle,

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

transparent 70%

);

filter:blur(45px);

animation:glowPulse 5s ease-in-out infinite;

}

.ts-pulse-ring{

position:absolute;

width:280px;

height:280px;

border-radius:50%;

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

animation:ringPulse 5s ease infinite;

}

@keyframes glowPulse{

0%,100%{

transform:scale(1);

opacity:.45;

}

50%{

transform:scale(1.08);

opacity:.75;

}

}

@keyframes ringPulse{

0%{

transform:scale(.92);

opacity:.15;

}

50%{

transform:scale(1);

opacity:.35;

}

100%{

transform:scale(1.08);

opacity:0;

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}