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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-contact-us-hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 140px;

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

}

.ts-contact-us-hero::before{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;

}

.ts-contact-us-hero::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-420px;

    top:-420px;

    border-radius:50%;

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

    pointer-events:none;

}

.ts-contact-us-hero .container{

    position:relative;

    z-index:2;

}



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

.ts-contact-us-hero .ts-section-tag{

    margin-bottom:26px;

}

.ts-contact-us-hero h1{

    margin-bottom:34px;

    color:#ffffff;

    line-height:1.15;

    letter-spacing:-.03em;

}

.ts-contact-us-hero p{

    max-width:760px;

    margin:0 auto;

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

    font-size:1.08rem;

    line-height:1.95;

}



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

.ts-contact-us-hero::marker{

    display:none;

}

.ts-contact-us-hero .container::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:30px auto 0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(146,215,248,.8),
        transparent
    );

}

/*==========================================================
    CONTACT DETAILS
==========================================================*/

.ts-contact-us-details{

    position:relative;

    padding:120px 0 140px;

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

}

.ts-contact-us-details .container{

    position:relative;

    z-index:2;

}



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

.ts-contact-us-intro{

    text-align:center;

    margin-bottom:70px;

}

.ts-contact-us-intro h2{

    color:#ffffff;

    margin:24px 0;

}

.ts-contact-us-intro p{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

}



/*==========================================================
    CONTACT PANEL
==========================================================*/

.ts-contact-us-panel{

    position:relative;

    overflow:hidden;

    padding:50px;

    border-radius:32px;

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

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

    backdrop-filter:blur(18px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.35);

}

.ts-contact-us-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

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

            transparent 70%

        );

    pointer-events:none;

}



/*==========================================================
    CONTACT ITEM
==========================================================*/

.ts-contact-us-item{

    position:relative;

    height:100%;

    text-align:center;

    padding:20px 25px;

}

.ts-contact-us-item::after{

    content:"";

    position:absolute;

    top:15%;

    right:0;

    width:1px;

    height:70%;

    background:

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

}

.ts-contact-us-item:last-child::after{

    display:none;

}



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

.ts-contact-us-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:22px;

    background:

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

    color:#92d7f8;

    font-size:1.6rem;

    transition:

        transform .35s,

        background .35s;

}

.ts-contact-us-item:hover

.ts-contact-us-icon{

    transform:

        translateY(-6px);

    background:

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

}



/*==========================================================
    LABEL
==========================================================*/

.ts-contact-us-label{

    display:block;

    margin-bottom:18px;

    color:#92d7f8;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



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

.ts-contact-us-item a{

    display:block;

    margin-bottom:8px;

    color:#ffffff;

    font-weight:500;

    text-decoration:none;

    transition:

        color .30s;

}

.ts-contact-us-item a:hover{

    color:#92d7f8;

}



/*==========================================================
    TEXT
==========================================================*/

.ts-contact-us-item p{

    margin:0;

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

    line-height:1.8;

}



/*==========================================================
    HOVER EFFECT
==========================================================*/

.ts-contact-us-item{

    transition:

        transform .35s;

}

.ts-contact-us-item:hover{

    transform:translateY(-5px);

}



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

@media (max-width:991px){

    .ts-contact-us-panel{

        padding:40px;

    }

    .ts-contact-us-item::after{

        display:none;

    }

    .ts-contact-us-item{

        padding:30px 20px;

    }

}

@media (max-width:768px){

    .ts-contact-us-details{

        padding:90px 0;

    }

    .ts-contact-us-panel{

        padding:30px;

        border-radius:24px;

    }

    .ts-contact-us-intro{

        margin-bottom:50px;

    }

}

@media (max-width:576px){

    .ts-contact-us-panel{

        padding:24px;

    }

    .ts-contact-us-item{

        padding:25px 15px;

    }

    .ts-contact-us-icon{

        width:64px;

        height:64px;

        font-size:1.4rem;

    }

}



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

@media (max-width:992px){

    .ts-contact-us-hero{

        padding:150px 0 110px;

    }

}

@media (max-width:768px){

    .ts-contact-us-hero{

        padding:135px 0 90px;

    }

    .ts-contact-us-hero h1{

        line-height:1.2;

    }

    .ts-contact-us-hero p{

        font-size:1rem;

        line-height:1.8;

    }

}

@media (max-width:576px){

    .ts-contact-us-hero{

        padding:120px 0 80px;

    }

}

/*==========================================================
    GOOGLE MAP
==========================================================*/

.ts-google-map{

    position:relative;

    width:100%;

    height:520px;

    overflow:hidden;

    background:#010d23;

}

.ts-google-map iframe{

    display:block;

    width:100%;

    height:100%;

    border:0;

}



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

@media (max-width:992px){

    .ts-google-map{

        height:460px;

    }

}

@media (max-width:768px){

    .ts-google-map{

        height:400px;

    }

}

@media (max-width:576px){

    .ts-google-map{

        height:440px;

    }

}