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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-conversation{

    position:relative;

    overflow:hidden;

    padding:140px 0;

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

}

.ts-conversation::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(146,215,248,.16),
            transparent 40%
        );

    pointer-events:none;

}

.ts-conversation::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-420px;

    top:-420px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(146,215,248,.08),
            transparent 72%
        );

    pointer-events:none;

}



/*==========================================================
    SECTION HEADER
==========================================================*/


.ts-conversation .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-conversation h2{

    color:#92d7f8;

    margin-bottom:24px;

}

.ts-conversation> .container> .row:first-child p{

    max-width:760px;

    margin:auto;

    color:#FFF;

    line-height:1.9;

}



/*==========================================================
    PANELS
==========================================================*/

.ts-contact-info,
.ts-form-panel{

    position:relative;

    border-radius:34px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow: 0 30px 80px rgba(0,0,0,.28);

}



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

.ts-contact-info{

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

    padding:35px;

    height:100%;

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

}

.ts-contact-info::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

        radial-gradient(

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

            transparent 72%

        );

    pointer-events:none;

}



/*==========================================================
    PANEL TITLES
==========================================================*/

.ts-contact-info h4{

    color:#010d23;

    margin-bottom:12px;

}

.ts-contact-info h5{

    color:#010d23;

    margin-top:15px !important;

    margin-bottom:22px;
	
	padding:0px;

}

.ts-contact-intro{

    color:#010d23;

    line-height:1.8;

    margin-bottom:35px;

}



/*==========================================================
    CONTACT ITEMS
==========================================================*/

.ts-contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:31px;

}

.ts-contact-item:last-child{

    margin-bottom:0;

}

.ts-contact-item i{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#92d7f8;

    color:#010d23;

    font-size:1.15rem;

    transition:.35s;

}

.ts-contact-item:hover i{

    transform:translateY(-4px);

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

}

.ts-contact-item strong{

    display:block;

    margin-bottom:6px;

    color:#010d23;

    font-size:1rem;

}

.ts-contact-item p{

    margin:0;

    color:#010d23;

    line-height:1.7;

}



/*==========================================================
    DIVIDER
==========================================================*/

.ts-contact-info hr{

    margin:20px 0;

    border:none;

    height:1px;

    background: linear-gradient(to right, rgba(1,13,35,.08), rgba(146,215,248,.45), rgba(1,13,35,.08));

}

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

.ts-feature-grid{

    display:grid;

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

    gap:18px;

}

/*==========================================================
    FEATURE CARD
==========================================================*/

.ts-feature-card{

    position:relative;

    background:#ffffff;

    border-radius:20px;

    padding:10px;

    text-align:center;

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

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

}

.ts-feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

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

            transparent

        );

    opacity:0;

    transition:.35s;

}

.ts-feature-card:hover{

    transform:translateY(-8px);

    border-color:#92d7f8;

    box-shadow:

        0 18px 40px rgba(1,13,35,.10);

}

.ts-feature-card:hover::before{

    opacity:1;

}

.ts-feature-card i{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:56px;

    height:56px;

    border-radius:18px;

    margin-bottom:18px;

    background:#92d7f8;

    color:#010d23;

    font-size:1.8rem;

    transition:.35s;

}

.ts-feature-card:hover i{

    transform:scale(1.08);

}

.ts-feature-card h6{

    margin:0;

    color:#010d23;

    font-weight:600;

    line-height:1.6;

}



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

.ts-form-panel{

    position:relative;

    background:#92d7f8;

    padding:35px;

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

}


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

.ts-response-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:999px;

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

    color:#010d23;

    font-weight:600;

    backdrop-filter:blur(10px);

}

.ts-response-badge i{

    color:#010d23;

}

.ts-response-badge strong{

    font-weight:700;

}



/*==========================================================
    FORM HEADER
==========================================================*/

.ts-form-panel h3{

    color:#010d23;

    margin-top:15px;

    margin-bottom:16px;

}

.ts-form-panel>p{

    color:#010d23;

    line-height:1.8;

    margin-bottom:5px;

}

/*==========================================================
    PROGRESS SYSTEM 2.0
==========================================================*/

.ts-progress-wrapper{

    position:relative;

    margin:25px 0 25px !important;

}

.ts-progress-track{

    position:absolute;

    top:21px;

    left:22px;

    right:22px;

    height:4px;

    border-radius:999px;

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

    overflow:hidden;

}

.ts-progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:#010d23;

    transition:width .45s cubic-bezier(.65,0,.35,1);

}

.ts-progress-steps{

    display:flex;

    justify-content:space-between;

    position:relative;

    z-index:2;

}

.ts-step{

    position:relative;

    width:44px;

    height:44px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:.95rem;

    font-weight:700;

    color:#010d23;

    transition:

        background .35s,

        color .35s,

        transform .35s,

        box-shadow .35s;

}

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

.ts-form-step h5{

    margin:0 0 10px;

    font-size:1.5rem;

    font-weight:700;

    color:#010d23;

}

.ts-form-step p{

    margin:0 0 28px;

    color:#010d23;

    line-height:1.7;

}

.ts-step.active{

    background:#010d23;

    color:#ffffff;

    transform:scale(1.08);

    box-shadow:

        0 12px 30px rgba(1,13,35,.25);

}

.ts-step.complete{

    background:#010d23;

    color:#ffffff;

}

.ts-step.complete span{

    opacity:0;

    transform:scale(.45);

    transition:.25s;

}

.ts-step.complete::before{

    content:"✓";

    position:absolute;

    font-weight:700;

    animation:tsCheck .35s ease;

}

@keyframes tsCheck{

    0%{

        transform:scale(.35) rotate(-20deg);

        opacity:0;

    }

    70%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*==========================================================
    FORM STAGE
==========================================================*/

.ts-form-stage{

    margin-top:0;
    margin-bottom:0;
    padding:0;
	height:auto !important;
    min-height:0 !important;
	transition:height .3s ease;

}

.ts-form-step{
    display:none;
    height:0;
    overflow:hidden;
    margin:0;
    padding:0;
}

.ts-form-step.active{
    display:block;
    height:auto;
    overflow:visible;
    animation:fadeStep .35s ease;
}

/*==========================================================
    FORM ELEMENTS
==========================================================*/

.ts-form-panel input,
.ts-form-panel select,
.ts-form-panel textarea{

    width:100%;

    margin-bottom:18px;

    padding:17px 20px;

    border:none;

    border-radius:16px;

    background:#ffffff;

    color:#010d23;

    font-size:.96rem;

    transition:

        box-shadow .30s,

        transform .30s;

}

.ts-form-panel textarea{

    resize:vertical;

    min-height:170px;

}

.ts-form-panel input::placeholder,
.ts-form-panel textarea::placeholder{

    color:#010d23;

}

.ts-form-panel input:focus,
.ts-form-panel select:focus,
.ts-form-panel textarea:focus{

    outline:none;

    transform:translateY(-2px);

    box-shadow:

        0 0 0 3px rgba(1,13,35,.12),

        0 12px 24px rgba(1,13,35,.08);

}



/*==========================================================
    CONTACT METHOD
==========================================================*/

.ts-contact-method{

    display:flex;

    gap:30px;

    margin:28px 0;

    flex-wrap:wrap;

}

.ts-contact-method label{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:#010d23;

    cursor:pointer;

}

.ts-contact-method input{

    width:18px;

    height:18px;

    margin:0;

}



/*==========================================================
    PRIVACY
==========================================================*/

.ts-privacy{

    margin-top:24px;
	
	margin-bottom: 20px;
	
    padding:20px 24px;

    border-radius:18px;

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

    color:#26415c;

    line-height:1.8;

    font-size:.92rem;

}



/*==========================================================
    BUTTONS
==========================================================*/

.ts-form-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-top:0px;

}

.ts-btn-secondary,
.ts-btn-primary,
.ts-btn-submit{

    border:none;

    border-radius:999px;

    padding:16px 34px;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .30s,

        box-shadow .30s,

        background .30s;

}

.ts-btn-secondary{

    background:#ffffff;

    color:#010d23;

}

.ts-btn-primary,
.ts-btn-submit{

    background:#010d23;

    color:#ffffff;

}

.ts-btn-secondary:hover,
.ts-btn-primary:hover,
.ts-btn-submit:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 36px rgba(1,13,35,.20);

}

.ts-btn-submit{

    display:none;

}



/*==========================================================
    SUCCESS PANEL
==========================================================*/

.ts-form-success{

    display:none;

    text-align:center;

    padding:60px 30px;

}

.ts-form-success.active{

    display:block;

    animation:fadeSuccess .5s ease;

}

.ts-form-success i{

    font-size:3.5rem;

    color:#198754;

    margin-bottom:20px;

}

.ts-form-success h3{

    margin-bottom:18px;

}

.ts-form-success p{

    color:#26415c;

    max-width:420px;

    margin:auto auto 30px;

}

@keyframes fadeSuccess{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



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

@media(max-width:991px){

    .ts-conversation{

        padding:100px 0;

    }

    .ts-contact-info,
    .ts-form-panel{

        padding:36px;

    }

    .ts-form-stage{

        min-height:auto;

    }

    .ts-feature-grid{

        grid-template-columns:1fr;

    }

    .ts-form-navigation{

        flex-direction:column;

    }

    .ts-btn-secondary,
    .ts-btn-primary,
    .ts-btn-submit{

        width:100%;

    }

}

@media(max-width:767px){

    .ts-contact-item{

        gap:14px;

    }

    .ts-contact-item i{

        width:50px;

        height:50px;

        border-radius:15px;

    }

    .ts-form-panel{

        padding:30px;

    }

    .ts-progress-track{

        left:20px;

        right:20px;

    }

    .ts-step{

        width:40px;

        height:40px;

    }

    .ts-contact-method{

        flex-direction:column;

        gap:15px;

    }

}



/*==========================================================
    MICRO INTERACTIONS
==========================================================*/

.ts-contact-info,
.ts-form-panel{

    transition:

        transform .40s ease,

        box-shadow .40s ease;

}

.ts-contact-info:hover{

    transform:translateY(-4px);

}

.ts-form-panel:hover{

    transform:none;

}

@keyframes fadeStep{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}