/*================================*/

.about-section{

    position:relative;

    padding:110px 0;

    background:#f6fbf8;

}

.about-section{

    background-image:
    linear-gradient(rgba(246,251,248,.92),
    rgba(246,251,248,.92)),
    url(images/doodles-white.png);

    background-size:800px;

}

.about-header{

text-align:center;

max-width:820px;

margin:auto auto 60px;

}

.about-badge{

display:inline-block;

padding:10px 24px;

background:white;

border-radius:100px;

font-weight:700;

color:#179c63;

box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.about-header h2{

font-size:54px;

font-weight:800;

margin-top:20px;

line-height:1.2;

}

.about-header h2 span{

color:#25D366;

}

.about-header p{

margin-top:18px;

font-size:18px;

color:#6b7280;

line-height:1.9;

}

.about-card{

background:white;

border-radius:30px;

padding:42px;

position:relative;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.about-card::after{

content:"";

position:absolute;

right:-40px;

top:-40px;

width:130px;

height:130px;

background:#f2fbf6;

border-radius:50%;

}

.icon-circle{

width:56px;

height:56px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:white;

float:left;

margin-right:15px;

}

.bg-purple{

background:#7C3AED;

}

.title-mini{

padding-top:5px;

}

.title-mini h5{

font-weight:700;

margin-bottom:2px;

}

.title-mini small{

color:#777;

}

.about-card h3{

font-size:40px;

font-weight:800;

line-height:1.25;

color:#23352d;

}

.about-card p{

font-size:17px;

line-height:1.9;

color:#6b7280;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

margin-top:30px;

}

.feature-grid div{

background:#f7fcf9;

border:1px solid #d9f0e2;

padding:14px;

border-radius:14px;

text-align:center;

font-weight:600;

}

.phone-preview{

margin-top:35px;

background:#efeae2;

border-radius:24px;

padding:25px;

min-height:190px;

position:relative;

}

.bubble{

padding:14px 18px;

border-radius:18px;

max-width:75%;

font-size:15px;

}

.bubble-right{

margin-left:auto;

background:#25D366;

color:white;

margin-bottom:20px;

}

.bubble-left{

background:white;

box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.insight-box{

background:#f4fbf7;

padding:22px;

border-radius:22px;

margin-top:30px;

}

.insight-box h6{

font-weight:700;

margin-bottom:18px;

color:#148b59;

}

.insight-item{

background:white;

padding:14px 18px;

border-radius:16px;

margin-bottom:12px;

border:1px solid #e5efe8;

}

.about-section::before{

content:"";

position:absolute;

width:320px;

height:320px;

background:#d8fff0;

filter:blur(120px);

left:-120px;

top:120px;

opacity:.45;

}

.about-section::after{

content:"";

position:absolute;

width:260px;

height:260px;

background:#dff8ff;

filter:blur(120px);

/* right:-100px; */

bottom:40px;

opacity:.5;

}

.about-card{

background:white;

border-radius:32px;

border:1px solid rgba(37,211,102,.08);

box-shadow:

0 20px 60px rgba(37,211,102,.08),

0 8px 20px rgba(0,0,0,.04);

transition:.3s;

}

.about-card:hover{

transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(37,211,102,.14);

}
