/* =========================================
   SECTION WRAPPER
========================================= */

    .value-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 1px solid #dbeafe;
      background: rgba(255, 255, 255, 0.85);
      padding: 8px 14px;
      color: #2452A3;
      font-size: 0.86rem;
      box-shadow: 0 4px 12px rgba(16, 42, 92, 0.08);
      backdrop-filter: blur(2px);
    }

    .value-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #3f7dff;
      flex-shrink: 0;
    }

    .value-title {
      margin-top: 1.4rem;
      margin-bottom: 0;
      color: #183B72;
      line-height: 1.35;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .value-desc {
      margin: 1rem auto 0;
      color: #64748b;
      line-height: 1.9;
      font-size: 0.97rem;
    }
.case-section{
    position:relative;
    overflow:hidden;
    margin-top:100px;
}

.case-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    background:
    linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid rgba(10,88,202,.08);
    padding:48px;
    box-shadow:
    0 12px 40px rgba(10,88,202,.06);
}

.case-wrapper::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    background:rgba(158,197,254,.18);
    top:-240px;
    right:-180px;
}

.case-wrapper::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(10,88,202,.04);
    left:-120px;
    bottom:-150px;
}

/* =========================================
   LEFT CONTENT
========================================= */

.content-area{
    position:relative;
    z-index:2;
    padding-right:20px;
}

.top-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:50px;
    background:#edf5ff;
    border:1px solid rgba(10,88,202,.08);
    color:#0a58ca;
    font-weight:700;
    margin-bottom:28px;
}

.badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#0a58ca;
}

.main-title{
    line-height:1.2;
    letter-spacing:-2px;
    margin-bottom:28px;
    font-weight: 600;
    color:#0f172a;
}

.main-title span{
    background:linear-gradient(90deg,#0a58ca,#3d8bfd);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.main-desc{
    font-size:18px;
    line-height:2;
    color:var(--desc);
    max-width:760px;
    margin-bottom:42px;
}

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

.action-group{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.btn-primary-custom{
    height:58px;
    padding:0 34px;
    border:none;
    border-radius:18px;
    background:
    linear-gradient(135deg,#0a58ca,#3d8bfd);
    color:#fff;
    font-weight:700;
    box-shadow:
    0 12px 30px rgba(10,88,202,.18);
    transition:.35s;
}

.btn-primary-custom:hover{
    transform:translateY(-3px);
}

.btn-light-custom{
    height:40px;
    padding:0 34px;
    border-radius:55px;
    border:1px solid #dbeafe;
    background:#fff;
    color:#0a58ca;
    font-weight:700;
    transition:.35s;
}

.btn-light-custom:hover{
    background:#f5f9ff;
    transform:translateY(-3px);
}

/* =========================================
   TAGS
========================================= */

.tag-group{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.tag-item{
    padding:5px 20px;
    border-radius:50px;
    background:#eff6ff;
    color:#3b82f6;
    font-weight:500;
    transition:.3s;
    cursor:pointer;
    font-size: 12px;
}



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

.stats-panel{
    position:relative;
    z-index:2;
    background:
    linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid rgba(10,88,202,.08);
    border-radius:30px;
    padding:26px;
    box-shadow:
    0 10px 35px rgba(10,88,202,.06);
}

.panel-title{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:50px;
    background:#edf5ff;
    color:#0a58ca;
    font-weight:700;
    margin-bottom:24px;
}

/* =========================================
   GRID CARD
========================================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    align-items:center;
}

.stats-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius:22px;
    border:1px solid rgba(10,88,202,.08);
    padding:15px;
    min-height:170px;
    transition:.35s;
    font-size:30px;
    font-weight:900;
    line-height:1;
    padding-top:40px;
}

.stats-card::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(158,197,254,.16);
    top:-50px;
    right:-40px;
}

.stats-card:hover{
    transform:translateY(-4px);
    box-shadow:
    0 14px 35px rgba(10,88,202,.1);
}

.stats-label{
    display:block;
    position:relative;
    z-index:2;
    color:#475569;
    font-size:16px;
    font-weight:500;
    margin-top:15px;
}

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



@media(max-width:991px){

    .case-wrapper{
        padding:36px;
    }

    .content-area{
        padding-right:0;
        margin-bottom:40px;
    }

   
}

@media(max-width:768px){

    body{
        padding:15px;
    }

    .case-wrapper{
        padding:24px;
        border-radius:24px;
    }


    .main-desc{
        font-size:15px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stats-card{
        min-height:auto;
    }

    .stats-number{
        font-size:46px;
    }

}