/* =====================================
   AI Chat Client Demo
===================================== */

.chat-demo-section{

position:relative;
overflow:hidden;
padding:100px 0;
background:#fff;

font-family:-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

}

/* Background Glow */

.chat-demo-section:before{

content:"";

position:absolute;

left:-180px;
top:-120px;

width:520px;
height:520px;

background:#56B8B8;

opacity:.08;

border-radius:50%;

filter:blur(130px);

}

.chat-demo-section:after{

content:"";

position:absolute;

right:-160px;
bottom:-120px;

width:480px;
height:480px;

background:#C8F0F0;

opacity:.15;

border-radius:50%;

filter:blur(120px);

}

.chat-container{

position:relative;
z-index:2;

width:92%;
max-width:1400px;

margin:auto;

}

/* -------------------- */
/* Pills */
/* -------------------- */

.chat-pills{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.chat-pills span{

display:flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:999px;

background:#F7FEFE;

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

font-size:13px;

font-weight:600;

color:#56B8B8;

transition:.3s;

}

.chat-pills span:hover{

background:#56B8B8;

color:#fff;

transform:translateY(-2px);

}

.chat-pills svg{

width:14px;
height:14px;

stroke:currentColor;

}

/* -------------------- */

.chat-title{

text-align:center;

margin-bottom:25px;

}

.chat-title h2{

font-size:42px;

font-weight:800;

line-height:1.15;

letter-spacing:-1px;

color:#101828;

margin:0;

}

.chat-title span{

background:linear-gradient(90deg,#56B8B8,#7BD9D9);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.chat-title p{

margin:24px auto 0;

max-width:760px;

font-size:18px;

line-height:1.8;

color:#667085;

}

/* -------------------- */
/* Image */
/* -------------------- */

.chat-image{

margin-top:55px;

}

.chat-image img{

width:100%;

display:block;

border-radius:22px;

box-shadow:

0 30px 70px rgba(15,23,42,.08),

0 10px 30px rgba(15,23,42,.08);

transition:.4s;

}

.chat-image img:hover{

transform:translateY(-8px);

box-shadow:

0 40px 90px rgba(15,23,42,.12),

0 20px 45px rgba(15,23,42,.10);

}
<style>

.chat-demo-section{
    position:relative;
    overflow:hidden;
    padding:90px 0 110px;
    background:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Background Glow */

.chat-demo-section:before{

content:"";

position:absolute;

left:-220px;

top:-180px;

width:700px;

height:700px;

background:radial-gradient(circle,
rgba(86,184,184,.18),
transparent 72%);

pointer-events:none;

}

.chat-demo-section:after{

content:"";

position:absolute;

right:-260px;

top:-160px;

width:620px;

height:620px;

background:radial-gradient(circle,
rgba(122,213,213,.12),
transparent 72%);

pointer-events:none;

}

.chat-demo-container{

position:relative;

z-index:2;

width:92%;

max-width:1400px;

margin:auto;

}

/* Heading */

.chat-demo-title{

text-align:center;

margin-bottom:22px;

}

.chat-demo-title h2{

margin:0;

font-size:42px;

font-weight:800;

line-height:1.18;

color:#101828;

letter-spacing:-1px;

}

.chat-demo-title span{

background:linear-gradient(90deg,#56B8B8,#7AD5D5);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.chat-demo-title p{

max-width:820px;

margin:22px auto 0;

font-size:18px;

line-height:1.9;

color:#667085;

}

/* Pills */

.chat-pills{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin:38px 0 55px;

}

.chat-pill{

display:flex;

align-items:center;

gap:8px;

padding:10px 18px;

font-size:13px;

font-weight:600;

color:#475467;

background:#fff;

border:1px solid #E4E7EC;

border-radius:999px;

box-shadow:0 6px 18px rgba(16,24,40,.05);

transition:.3s;

}

.chat-pill:hover{

transform:translateY(-3px);

border-color:#56B8B8;

color:#56B8B8;

box-shadow:0 12px 28px rgba(86,184,184,.18);

}

.chat-pill svg{

width:15px;

height:15px;

stroke:#56B8B8;

stroke-width:2;

fill:none;

}

/* Image */

.chat-image{

text-align:center;

}

.chat-image img{

width:100%;

display:block;

border-radius:22px;

box-shadow:0 25px 70px rgba(16,24,40,.12);

transition:.45s;

}

.chat-image img:hover{

transform:translateY(-8px) scale(1.01);

box-shadow:0 40px 90px rgba(16,24,40,.18);

}

/* Mobile */

@media(max-width:768px){

.chat-demo-section{

padding:65px 20px 70px;

}

.chat-demo-title h2{

font-size:32px;

line-height:1.25;

}

.chat-demo-title p{

font-size:16px;

line-height:1.75;

}

.chat-pills{

gap:10px;

margin:30px 0 35px;

}

.chat-pill{

font-size:12px;

padding:8px 14px;

}

.chat-image img{

border-radius:16px;

}

}