/*==================================================
    SS ONE
    HERO.CSS
==================================================*/

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

.hero{

    padding:130px 0 70px;

    background:linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%);

    overflow:hidden;

}

.hero .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:40px;

}

.hero-text h1{

    margin-bottom:25px;
    font-size:48px;

}

.hero-text p{

    font-size:19px;

    line-height:1.9;

    margin-bottom:40px;

    max-width:560px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*==============================
DASHBOARD PREVIEW
==============================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.dashboard{

    width:100%;

    max-width:500px;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #e8edf5;

    box-shadow:0 30px 70px rgba(0,0,0,.10);

}

/*==============================
TOP BAR
==============================*/

.dashboard-top{

    height:62px;

    padding:0 22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#17375E;

    color:#fff;

}

.dashboard-logo{

    font-weight:800;

    letter-spacing:.5px;

}

.dashboard-user{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#F59E0B;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

/*==============================
BODY
==============================*/

.dashboard-body{

    display:grid;

    grid-template-columns:150px 1fr;

    min-height:340px;

}

/*==============================
SIDEBAR
==============================*/

.sidebar{

    background:#f6f9fd;

    border-right:1px solid #edf2f7;

    padding:10px 18px;

}

.sidebar ul{

    list-style:none;

}

.sidebar li{

    padding:14px 16px;

    margin-bottom:10px;

    border-radius:12px;

    font-weight:600;

    color:#4b5563;

    transition:.30s;

    cursor:pointer;

}

.sidebar li.active{

    background:#17375E;

    color:#fff;

}

.sidebar li:hover{

    background:#e7eef9;

}

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

.content{

    padding:18px;

}

/*==============================
STAT CARDS
==============================*/

.stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin-bottom:25px;

}

.stat{

    background:#f8fbff;

    border:1px solid #edf2f7;

    border-radius:14px;

    padding:10px;

}

.stat span{

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-bottom:10px;

}

.stat strong{

    font-size:26px;

    color:#17375E;

}

/*==============================
CHART
==============================*/

.chart{

    background:#f8fbff;

    border:1px solid #edf2f7;

    border-radius:16px;

    padding:20px;

    margin-bottom:22px;

}

.chart-title{

    font-weight:700;

    margin-bottom:20px;

    color:#17375E;

}

.chart-bars{

    display:flex;

    align-items:flex-end;

    gap:14px;

    height:110px;

}

.chart-bars div{

    flex:1;

    background:linear-gradient(to top,#17375E,#4f7eb7);

    border-radius:10px 10px 0 0;

}

.chart-bars div:nth-child(1){height:45%;}
.chart-bars div:nth-child(2){height:75%;}
.chart-bars div:nth-child(3){height:55%;}
.chart-bars div:nth-child(4){height:95%;}
.chart-bars div:nth-child(5){height:70%;}
.chart-bars div:nth-child(6){height:88%;}

/*==============================
TABLE
==============================*/

.table{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.row{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:12px;

    padding:14px 16px;

    border-radius:12px;

    background:#f8fbff;

    border:1px solid #edf2f7;

    font-size:14px;

}

.dashboard-logo-img{

    height:34px;
    width:auto;
    display:block;

}