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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-about{

padding:120px 0;
background: linear-gradient(rgba(1,13,35,.88), rgba(1,13,35,.92)), url("../images/tenet-office-view-bg.jpg") center center / cover no-repeat;

}

.ts-section-tag{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:#92d7f8;

color:#010d23;

letter-spacing:.18em;

font-size:.8rem;

font-weight:700;

margin-bottom:22px;

}

.ts-about h2{

font-size:3rem;

margin-bottom:25px;

font-weight:800;

}

.ts-about h2 span{

color:#92d7f8;

}

.ts-about p{

font-size:1.08rem;

line-height:1.9;

color:#cdd6df;

}

.ts-pillars{

margin-top:45px;

display:grid;

gap:24px;

}

.ts-pillar{

display:flex;

align-items:flex-start;

gap:20px;

padding:22px;

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

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

border-radius:18px;

transition:.35s;

}

.ts-pillar:hover{

transform:translateY(-6px);

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

}

.ts-pillar i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#92d7f8;

color:#010d23;

font-size:1.25rem;

flex-shrink:0;

}

.ts-about-image{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.ts-about-image::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(1,13,35,.12),
        rgba(146,215,248,.08)
    );

    pointer-events:none;
}

.ts-about-image img{

border-radius:28px;

transition:.6s;

}

.ts-about-image:hover img{

transform:scale(1.05);

}

/*==========================================================
    01. ABOUT HERO
==========================================================*/

.about-hero{

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

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
        rgba(1,13,35,.88),
        rgba(1,13,35,.92)
    ),
    url("../images/about-boardroom.jpg")
    center center / cover no-repeat;

}

.about-hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at 78% 42%,
        rgba(146,215,248,.10),
        transparent 42%
    );

    pointer-events:none;

}

.about-hero .container{

    position:relative;

    z-index:2;

}

.about-hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:90px;

    min-height:100vh;

}

.about-hero-content{

    max-width:700px;
	
	padding-top: 60px;

}

.about-hero-content h1{

    font-size:3.4rem;

    line-height:1.05;

    font-weight:800;

    color:#ffffff;

    margin:25px 0;

}

.about-hero-content h1 span{

    color: #92d7f8;

}

.hero-intro{

    font-size:1.15rem;

    line-height:2;

    color:#cdd6df;

    margin-bottom:50px;

}

.hero-intro strong{

    color:#92d7f8;

}

.about-hero-visual{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*==========================================================
    TRUST INDICATORS
==========================================================*/

.about-trust-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:70px;

}

.trust-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    border-radius:20px;

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

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

    transition:.35s;

}

.trust-item:hover{

    transform:translateY(-8px);

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

}

.trust-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#92d7f8;

    color:#010d23;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:1.2rem;

}

.trust-text h4{

    margin:0 0 6px;

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

}

.trust-text span{

    color:#92d7f8;

}

.trust-text p{

    margin:0;

    font-size:.9rem;

    line-height:1.5;

    color:#cdd6df;

}

/*==========================================================
    HERO SCROLL INDICATOR
==========================================================*/

.hero-scroll{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:16px;

    margin-top:20px;

}

.hero-scroll span{

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#92d7f8;

}

.scroll-line{

    position:relative;

    width:2px;

    height:70px;

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

    overflow:hidden;

}

.scroll-line::before{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:#92d7f8;

    animation:scrollIndicator 2s ease-in-out infinite;

}

@keyframes scrollIndicator{

    0%{

        top:-100%;

    }

    100%{

        top:100%;

    }

}

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

/*==========================================
    Large Tablets
==========================================*/

@media (max-width:1200px){

    .about-hero-grid{

        gap:60px;

    }

    .about-hero-content h1{

        font-size:3.6rem;

    }

    .tenet-hero-mark{

        width:400px;

        height:400px;

    }

}

/*==========================================
    Tablets
==========================================*/

@media (max-width:992px){

    .about-hero{

        padding:140px 0 80px;

        min-height:auto;

    }

    .about-hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

        min-height:auto;

    }

    .about-hero-content{

        order:2;

        max-width:100%;

    }

    .about-hero-visual{

        order:1;

        justify-content:center;

    }

    .about-hero-content h1{

        font-size:3rem;

    }

    .hero-intro{

        margin-left:auto;

        margin-right:auto;

        max-width:700px;

    }

    .about-trust-grid{

        grid-template-columns:1fr;

        max-width:520px;

        margin:50px auto 60px;

    }

    .hero-scroll{

        align-items:center;

    }

    .tenet-hero-mark{

        width:340px;

        height:340px;

    }

}

/*==========================================
    Mobile
==========================================*/

@media (max-width:768px){

    .about-hero{

        padding:120px 0 70px;

    }

    .about-hero-grid{

        gap:50px;

    }

    .about-hero-content h1{

        font-size:2.4rem;

        line-height:1.15;

    }

    .hero-intro{

        font-size:1rem;

        line-height:1.8;

    }

    .section-tag{

        font-size:.72rem;

        letter-spacing:.14em;

    }

    .tenet-hero-mark{

        width:280px;

        height:280px;

    }

    .about-trust-grid{

        gap:18px;

    }

    .trust-item{

        padding:18px;

        text-align:left;

    }

    .trust-icon{

        width:52px;

        height:52px;

        font-size:1rem;

    }

    .trust-text h4{

        font-size:.95rem;

    }

    .trust-text p{

        font-size:.88rem;

    }

    .hero-scroll{

        margin-top:10px;

    }

}

/*==========================================
    Small Phones
==========================================*/

@media (max-width:480px){

    .about-hero{

        padding:110px 0 60px;

    }

    .about-hero-content h1{

        font-size:2rem;

    }

    .hero-intro{

        font-size:.95rem;

    }

    .tenet-hero-mark{

        width:230px;

        height:230px;

    }

    .about-trust-grid{

        margin:40px 0 50px;

    }

    .trust-item{

        gap:15px;

        padding:16px;

    }

    .hero-scroll span{

        font-size:.72rem;

    }

    .scroll-line{

        height:55px;

    }

}

/*==========================================================
    02. OUR STORY
==========================================================*/

.ts-story{

    position:relative;

    padding:120px 0;

    background:#010d23;

    overflow:hidden;
	
	border-top: 1px solid #152034;
	
	border-bottom: 1px solid #152034;

}

.ts-story #ts-particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    opacity:.35;

}

.ts-story .container{

    position:relative;

    z-index:2;

}

.ts-story-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}

.ts-story-content h2{

    color:#FFF;

    margin:20px 0 30px;

    font-size:3rem;

    font-weight:800;

}

.ts-story-content h2 span{

    color:#4ca9da;

}

.ts-story-content p{

    color:#FFF;

    line-height:2;

    margin-bottom:24px;

    font-size:1.08rem;

}

.ts-story-content strong{

    color:#92d7f8;

}

.ts-story-quote{

    position:relative;

    background:#ffffff;
	
	opacity: 0.7;

    border-radius:24px;

    padding:50px;

    box-shadow:

    0 18px 45px rgba(1,13,35,.08);

}

.quote-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#4ca9da;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    font-size:1.25rem;

}

.ts-story-quote blockquote{

    font-size:2rem;

    line-height:1.45;

    color:#010d23;

    font-weight:500;

    margin-bottom:45px;

}

.founder-signature{

    width:170px;

    margin-bottom:20px;

}

.ts-story-quote h5{

    margin:0;

    color:#010d23;

    font-weight:700;

}

.ts-story-quote span{

    color:#5d6c81;

}

/*==========================================================
    OUR STORY RESPONSIVE
==========================================================*/

@media (max-width:992px){

    .ts-story{

        padding:90px 0;

    }

    .ts-story-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

    .ts-story-content{

        text-align:center;

    }

    .ts-story-content h2{

        font-size:2.5rem;

    }

    .ts-story-content p{

        max-width:700px;

        margin-left:auto;

        margin-right:auto;

    }

    .ts-story-quote{

        max-width:700px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .ts-story{

        padding:80px 0;

    }

    .ts-story-content h2{

        font-size:2rem;

        line-height:1.2;

    }

    .ts-story-content p{

        font-size:1rem;

        line-height:1.8;

    }

    .ts-story-quote{

        padding:35px;

    }

    .ts-story-quote blockquote{

        font-size:1.45rem;

        line-height:1.6;

    }

    .quote-icon{

        width:52px;

        height:52px;

        font-size:1rem;

    }

    .founder-signature{

        width:140px;

    }

}

@media (max-width:480px){

    .ts-story{

        padding:70px 0;

    }

    .ts-story-content h2{

        font-size:1.75rem;

    }

    .ts-story-quote{

        padding:28px;

        border-radius:20px;

    }

    .ts-story-quote blockquote{

        font-size:1.2rem;

    }

    .founder-signature{

        width:120px;

    }

}

/*==========================================================
    03. OUR APPROACH
==========================================================*/

.ts-approach{

    padding:120px 0;

    background:

        radial-gradient(

            circle at top center,

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

            transparent 48%

        );

}

.ts-approach-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.ts-approach-heading h2{

    color:#FFF;

    margin:22px 0;

    font-size:3rem;

    font-weight:800;

}

.ts-approach-heading h2 span{

    color:#4ca9da;

}

.ts-approach-heading p{

    color:#FFF;

    line-height:2;

}

.ts-approach-grid{

    display:grid;

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

    gap:28px;

}

.approach-card{

    padding:40px 32px;

    border-radius:24px;

    background:#f8fbff;

    border:1px solid #92d7f8;

    transition:.35s;

}

.approach-card:hover{

    transform:translateY(-10px);

    border-color:#92d7f8;

    box-shadow:0 18px 45px rgba(1,13,35,.08);

}

.approach-number{

    font-size:3rem;

    font-weight:800;

    color:#92d7f8;

    margin-bottom:25px;

}

.approach-card h4{

    color:#010d23;

    margin-bottom:18px;

}

.approach-card p{

    color:#010d23;

    line-height:1.8;

}

/*==========================================================
    OUR APPROACH RESPONSIVE
==========================================================*/

/*==========================================
    Large Tablets
==========================================*/

@media (max-width:1200px){

    .ts-approach-grid{

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

        gap:24px;

    }

}

/*==========================================
    Tablets
==========================================*/

@media (max-width:992px){

    .ts-approach{

        padding:90px 0;

    }

    .ts-approach-heading{

        margin-bottom:60px;

    }

    .ts-approach-heading h2{

        font-size:2.5rem;

    }

    .ts-approach-heading p{

        max-width:680px;

        margin:0 auto;

    }

    .ts-approach-grid{

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

        gap:22px;

    }

    .approach-card{

        padding:35px 28px;

    }

    .approach-number{

        font-size:2.6rem;

    }

}

/*==========================================
    Mobile
==========================================*/

@media (max-width:768px){

    .ts-approach{

        padding:80px 0;

    }

    .ts-approach-heading{

        margin-bottom:50px;

    }

    .ts-approach-heading h2{

        font-size:2rem;

        line-height:1.2;

    }

    .ts-approach-heading p{

        font-size:1rem;

        line-height:1.8;

    }

    .ts-approach-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .approach-card{

        padding:30px 25px;

        text-align:center;

    }

    .approach-number{

        font-size:2.3rem;

        margin-bottom:20px;

    }

    .approach-card h4{

        font-size:1.2rem;

        margin-bottom:15px;

    }

    .approach-card p{

        font-size:.95rem;

        line-height:1.8;

    }

}

/*==========================================
    Small Phones
==========================================*/

@media (max-width:480px){

    .ts-approach{

        padding:70px 0;

    }

    .ts-approach-heading h2{

        font-size:1.75rem;

    }

    .approach-card{

        padding:26px 22px;

        border-radius:20px;

    }

    .approach-number{

        font-size:2rem;

    }

    .approach-card h4{

        font-size:1.1rem;

    }

    .approach-card p{

        font-size:.92rem;

    }

}

/*==========================================================
    04. TRUSTED BY
==========================================================*/

.ts-trusted{

    padding:30px 0;

    background:#fafcff;

    border-top:1px solid rgba(1,13,35,.05);

    overflow:hidden;

}

.ts-trusted-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.ts-trusted-heading h2{

    font-size:3rem;

    font-weight:800;

    color:#010d23;

    margin:22px 0;

}

.ts-trusted-heading h2 span{

    color:#4ca9da;

}

.ts-trusted-heading p{

    color:#010d23;

    line-height:2;

}

/*------------------------------------------
Logo Marquee
------------------------------------------*/

.ts-logo-marquee{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:18px 0;

}

.ts-logo-track{

    display:flex;

    align-items:center;

    gap:90px;

    width:max-content;

    animation:trustedScroll 50s linear infinite;

}

.ts-logo-track:hover{

    animation-play-state:paused;

}

.ts-logo-track img{

    height:52px;

    width:auto;

    object-fit:contain;

    transition:.35s ease;

}

.ts-logo-track img:hover{

    transform:translateY(-4px);

}

@keyframes trustedScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==========================================================
    TRUSTED BY RESPONSIVE
==========================================================*/

@media (max-width:992px){

    .ts-trusted{

        padding:30px 0;

    }

    .ts-trusted-heading h2{

        font-size:2.5rem;

    }

    .ts-logo-track{

        gap:70px;

    }

    .ts-logo-track img{

        height:46px;

    }

}

@media (max-width:768px){

    .ts-trusted{

        padding:30px 0;

    }

    .ts-trusted-heading{

        margin-bottom:50px;

    }

    .ts-trusted-heading h2{

        font-size:2rem;

    }

    .ts-logo-track{

        gap:55px;

    }

    .ts-logo-track img{

        height:40px;

    }

}

@media (max-width:480px){

    .ts-trusted{

        padding:30px 0;

    }

    .ts-trusted-heading h2{

        font-size:1.75rem;

    }

    .ts-logo-track{

        gap:45px;

    }

    .ts-logo-track img{

        height:34px;

    }

}

/*==========================================================
    05. EXECUTIVE LEADERSHIP
==========================================================*/

.ts-executive{

    position:relative;

    padding:120px 0;

    background:#010d23;

    overflow:hidden;

}

.ts-executive-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.ts-executive-heading h2{

    margin:22px 0;

    font-size:3rem;

    font-weight:800;

    color:#ffffff;

    line-height:1.2;

}

.ts-executive-heading h2 span{

    color:#92d7f8;

}

.ts-executive-heading p{

    color:#cdd6df;

    line-height:2;

    font-size:1.05rem;

}

/*------------------------------------------
Executive Grid
------------------------------------------*/

.ts-executive-grid{

    display:grid;

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

    gap:30px;

}

/*------------------------------------------
Executive Card
------------------------------------------*/

.executive-card{

    position:relative;

    text-align:center;

    padding:45px 30px;

    border-radius:26px;

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

    backdrop-filter:blur(10px);

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

    transition:.35s ease;

}

.executive-card:hover{

    transform:translateY(-10px);

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

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*------------------------------------------
Portrait
------------------------------------------*/

.executive-image{

    width:190px;
	
	position:relative;

    height:190px;

    margin:0 auto 30px;

    border-radius:50%;

    padding:6px;

    background:linear-gradient(
        135deg,
        #92d7f8,
        #4ca9da
    );

    overflow:hidden;

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

}

.executive-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    transition:.45s ease;

}

.executive-card:hover .executive-image img{

    transform:scale(1.05);

}

/*------------------------------------------
Typography
------------------------------------------*/

.executive-card h4{

    margin-bottom:10px;

    color:#ffffff;

    font-size:1.35rem;

    font-weight:700;

    transition:.3s;

}

.executive-card:hover h4{

    color:#92d7f8;

}

.executive-position{

    display:block;

    margin-bottom:22px;

    color:#92d7f8;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.executive-card p{

    color:#cdd6df;

    line-height:1.9;

    font-size:.96rem;

}

/*------------------------------------------
LinkedIn
------------------------------------------*/

.executive-social{

    margin-top:28px;

}

.executive-social a{

    width:46px;

    height:46px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    color:#92d7f8;

    text-decoration:none;

    transition:.35s;

}

.executive-social a:hover{

    background:#92d7f8;

    color:#010d23;

    transform:translateY(-3px);

}

.executive-image::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

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

    z-index:-1;

    animation:executivePulse 2.5s ease-in-out infinite;

}

@keyframes executivePulse{

    0%{

        transform:scale(1);

        opacity:.15;

    }

    50%{

        transform:scale(1.08);

        opacity:.35;

    }

    100%{

        transform:scale(1);

        opacity:.15;

    }

}

.executive-card:nth-child(2) .executive-image::before{

    animation-delay:.4s;

}

.executive-card:nth-child(3) .executive-image::before{

    animation-delay:.8s;

}

.executive-card:nth-child(4) .executive-image::before{

    animation-delay:1.2s;

}

/*==========================================================
    EXECUTIVE LEADERSHIP RESPONSIVE
==========================================================*/

/*==========================================
    Large Tablets
==========================================*/

@media (max-width:1200px){

    .ts-executive-grid{

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

        gap:28px;

    }

}

/*==========================================
    Tablets
==========================================*/

@media (max-width:992px){

    .ts-executive{

        padding:90px 0;

    }

    .ts-executive-heading{

        margin-bottom:60px;

    }

    .ts-executive-heading h2{

        font-size:2.5rem;

    }

    .ts-executive-grid{

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

        gap:24px;

    }

    .executive-card{

        padding:38px 28px;

    }

    .executive-image{

        width:170px;

        height:170px;

        margin-bottom:25px;

    }

}

/*==========================================
    Mobile
==========================================*/

@media (max-width:768px){

    .ts-executive{

        padding:80px 0;

    }

    .ts-executive-heading{

        margin-bottom:50px;

    }

    .ts-executive-heading h2{

        font-size:2rem;

        line-height:1.2;

    }

    .ts-executive-heading p{

        font-size:1rem;

        line-height:1.8;

    }

    .ts-executive-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .executive-card{

        padding:35px 25px;

    }

    .executive-image{

        width:160px;

        height:160px;

    }

    .executive-card h4{

        font-size:1.25rem;

    }

    .executive-position{

        font-size:.9rem;

    }

    .executive-card p{

        font-size:.95rem;

        line-height:1.8;

    }

}

/*==========================================
    Small Phones
==========================================*/

@media (max-width:480px){

    .ts-executive{

        padding:70px 0;

    }

    .ts-executive-heading h2{

        font-size:1.75rem;

    }

    .ts-executive-heading p{

        font-size:.95rem;

    }

    .executive-card{

        padding:30px 22px;

        border-radius:22px;

    }

    .executive-image{

        width:140px;

        height:140px;

    }

    .executive-card h4{

        font-size:1.15rem;

    }

    .executive-position{

        font-size:.85rem;

    }

    .executive-card p{

        font-size:.92rem;

    }

    .executive-social a{

        width:42px;

        height:42px;

    }

}

/*==========================================================
    06. WHY CHOOSE TENET SOLUTIONS
==========================================================*/

.ts-why{

    position:relative;

    padding:120px 0;

    background:#010d23;
	
	border-top: 1px solid #152034;
	
	border-bottom: 1px solid #152034;

    overflow:hidden;

}

.ts-why-heading{

    max-width:760px;

    margin:0 auto 20px;

    text-align:center;

}

.ts-why-heading h2{

    margin:22px 0;

    font-size:3rem;

    font-weight:800;

    color:#fff;

    line-height:1.2;

}

.ts-why-heading h2 span{

    color:#4ca9da;

}

.ts-why-heading p{

    color:#010d23;

    line-height:2;

    font-size:1.05rem;

}

/*------------------------------------------
Honeycomb Layout
------------------------------------------*/

.ts-honeycomb{

    display:grid;

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

    gap:40px;

    max-width:1200px;

    margin:0 auto;

}

.hex-card{

    position:relative;

    background:#ffffff;

    padding:55px 35px 45px;

    text-align:center;

    clip-path:polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );

    min-height:360px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.45s ease;

    box-shadow:

        0 20px 45px rgba(1,13,35,.08);

}

.hex-card:nth-child(2),
.hex-card:nth-child(5){

    transform:translateY(70px);

}

.hex-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 70px rgba(1,13,35,.16);

}

.hex-card:nth-child(2):hover,
.hex-card:nth-child(5):hover{

    transform:translateY(60px);

}

/*------------------------------------------
Icon
------------------------------------------*/

.hex-icon{

    width:110px;

    height:110px;

    border-radius:50%;

    background:#92d7f8;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    box-shadow:

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

    transition:.4s ease;

}

.hex-icon i{

    font-size:3.4rem;

    color:#010d23;

    transition:.4s ease;

}

.hex-card:hover .hex-icon{

    transform:rotate(10deg) scale(1.08);

    box-shadow:

        0 0 50px rgba(146,215,248,.45);

}

/*------------------------------------------
Typography
------------------------------------------*/

.hex-card h4{

    margin-bottom:18px;

    color:#010d23;

    font-size:1.35rem;

    font-weight:700;

    transition:.35s;

}

.hex-card:hover h4{

    color:#4ca9da;

}

.hex-card p{

    color:#010d23;

    line-height:1.8;

    font-size:.96rem;

}

/*------------------------------------------
Background Decoration
------------------------------------------*/

.ts-why::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-220px;

    top:-120px;

    border-radius:50%;

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

    filter:blur(80px);

}

.ts-why::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-220px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(76,169,218,.10);

    filter:blur(90px);

}

/*==========================================================
    WHY CHOOSE TENET SOLUTIONS RESPONSIVE
==========================================================*/

/*==========================================
    Large Tablets
==========================================*/

@media (max-width:1200px){

    .ts-honeycomb{

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

        gap:35px;

        max-width:850px;

    }

    .hex-card{

        min-height:340px;

    }

    .hex-card:nth-child(2),
    .hex-card:nth-child(5){

        transform:translateY(50px);

    }

    .hex-card:nth-child(2):hover,
    .hex-card:nth-child(5):hover{

        transform:translateY(40px);

    }

}

/*==========================================
    Tablets
==========================================*/

@media (max-width:992px){

    .ts-why{

        padding:90px 0;

    }

    .ts-why-heading{

        margin-bottom:60px;

    }

    .ts-why-heading h2{

        font-size:2.5rem;

    }

    .ts-honeycomb{

        gap:28px;

    }

    .hex-card{

        min-height:320px;

        padding:45px 28px 38px;

    }

    .hex-icon{

        width:95px;

        height:95px;

    }

    .hex-icon i{

        font-size:2.8rem;

    }

}

/*==========================================
    Mobile
==========================================*/

@media (max-width:768px){

    .ts-why{

        padding:80px 0;

    }

    .ts-why-heading{

        margin-bottom:50px;

    }

    .ts-why-heading h2{

        font-size:2rem;

    }

    .ts-why-heading p{

        font-size:1rem;

        line-height:1.8;

    }

    .ts-honeycomb{

        grid-template-columns:1fr;

        max-width:420px;

        gap:25px;

    }

    .hex-card{

        min-height:300px;

        padding:42px 26px;

    }

    /* Remove stagger on mobile */

    .hex-card:nth-child(2),
    .hex-card:nth-child(5){

        transform:none;

    }

    .hex-card:nth-child(2):hover,
    .hex-card:nth-child(5):hover{

        transform:translateY(-8px);

    }

    .hex-icon{

        width:90px;

        height:90px;

    }

    .hex-icon i{

        font-size:2.5rem;

    }

    .hex-card h4{

        font-size:1.2rem;

    }

    .hex-card p{

        font-size:.95rem;

        line-height:1.8;

    }

}

/*==========================================
    Small Phones
==========================================*/

@media (max-width:480px){

    .ts-why{

        padding:70px 0;

    }

    .ts-why-heading h2{

        font-size:1.75rem;

    }

    .ts-honeycomb{

        max-width:320px;

    }

    .hex-card{

        min-height:280px;

        padding:36px 22px;

    }

    .hex-icon{

        width:78px;

        height:78px;

        margin-bottom:22px;

    }

    .hex-icon i{

        font-size:2.2rem;

    }

    .hex-card h4{

        font-size:1.1rem;

    }

    .hex-card p{

        font-size:.9rem;

    }

}