/* ==========================================
   Hero
========================================== */

.dashboard-hero{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:55px;

    background:linear-gradient(135deg,#0B3C5D 0%,#0A9396 55%,#38BDF8 100%);

    color:#ffffff;

    box-shadow:0 25px 60px rgba(15,23,42,.18);

}


/* ==========================================
   Decorations
========================================== */

.hero-decoration{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.hero-circle-1{

    width:280px;

    height:280px;

    top:-120px;

    right:-120px;

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

}

.hero-circle-2{

    width:180px;

    height:180px;

    bottom:-70px;

    left:-70px;

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

}


/* ==========================================
   Hero Top
========================================== */

.hero-top{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.4fr .9fr;

    gap:45px;

    align-items:center;

}


/* ==========================================
   Left
========================================== */

.hero-left{

    display:flex;

    flex-direction:column;

}


/* ==========================================
   Badge
========================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 16px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-badge svg{

    width:18px;

    height:18px;

}


/* ==========================================
   Heading
========================================== */

.hero-left h1{

    font-size:2.8rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

.hero-left h1 span{

    color:#FCD34D;

}


/* ==========================================
   Description
========================================== */

.hero-left p{

    font-size:16px;

    line-height:1.8;

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

    max-width:650px;

}


/* ==========================================
   Buttons
========================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:32px;

    flex-wrap:wrap;

}

.hero-primary-btn,

.hero-secondary-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:15px 28px;

    border-radius:14px;

    font-weight:700;

    transition:.30s;

}

.hero-primary-btn{

    background:#ffffff;

    color:#0A9396;

}

.hero-primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(0,0,0,.20);

}

.hero-secondary-btn{

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

    color:#ffffff;

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

    backdrop-filter:blur(8px);

}

.hero-secondary-btn:hover{

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

}


/* ==========================================
   Right
========================================== */

.hero-right{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ==========================================
   Info Card
========================================== */

.hero-info{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

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

    transition:.30s;

}

.hero-info:hover{

    transform:translateY(-4px);

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

}


/* ==========================================
   Icon
========================================== */

.hero-info i{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    flex-shrink:0;

}

.hero-info svg{

    width:24px;

    height:24px;

}


/* ==========================================
   Text
========================================== */

.hero-info small{

    display:block;

    font-size:13px;

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

    margin-bottom:4px;

}

.hero-info strong{

    font-size:16px;

    font-weight:700;

    color:#ffffff;

    word-break:break-word;

}


/* ==========================================
   Divider
========================================== */

.hero-divider{

    width:100%;

    height:1px;

    margin:40px 0;

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

}




/* ==========================================
   Stat Card
========================================== */

.hero-stat{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

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

    transition:.30s;

}

.hero-stat:hover{

    transform:translateY(-5px);

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

}


/* ==========================================
   Stat Icon
========================================== */

.hero-stat-icon{

    width:56px;

    height:56px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

}

.hero-stat-icon svg{

    width:24px;

    height:24px;

    color:#0A9396;

}


/* ==========================================
   Stat Text
========================================== */

.hero-stat h2{

    font-size:28px;

    font-weight:800;

    color:#ffffff;

    margin-bottom:4px;

}

.hero-stat span{

    font-size:14px;

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

}