:root {

	--primary: #2563eb;

	--secondary: #3b82f6;

	--success: #10b981;

	--danger: #ef4444;

	--warning: #f59e0b;

	--dark: #0f172a;

	--sidebar: #111827;

	--body: #f4f7fc;

	--card: #ffffff;

	--text: #1e293b;

	--border: #e2e8f0;

	--radius: 18px;

}


* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

	font-family: "Outfit", sans-serif;

}

html {

	scroll-behavior: smooth;

}

body {

	background: var(--body);

	color: var(--text);

	overflow-x: hidden;

}

a {

	text-decoration: none;

}

img {

	max-width: 100%;

}

ul {

	margin: 0;

	padding: 0;

	list-style: none;

}


::-webkit-scrollbar {

	width: 8px;

}

::-webkit-scrollbar-track {

	background: #f1f5f9;

}

::-webkit-scrollbar-thumb {

	background: #94a3b8;

	border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

	background: #64748b;

}


.wrapper {

	display: flex;

	min-height: 100vh;

}


@media(max-width:991px) {}

@media(max-width:767px) {}

@media(max-width:575px) {}


.sidebar {

	width: 290px;

	background: #0f172a;

	color: white;

	height: 100vh;

	position: fixed;

	left: 0;

	top: 0;

	overflow-y: auto;

	display: flex;

	flex-direction: column;

	padding: 25px;

	z-index: 1040;

	transition: .35s;

	box-shadow: 15px 0 35px rgba(0, 0, 0, .08);

}


.sidebar-header {

	display: flex;

	align-items: center;

	margin-bottom: 35px;

}

.logo-box {

	width: 60px;

	height: 60px;

	border-radius: 18px;

	background: linear-gradient(135deg, #2563eb, #3b82f6);

	display: flex;

	justify-content: center;

	align-items: center;

	margin-right: 15px;

}

.logo-box img {

	width: 36px;

}

.logo-text h4 {

	margin: 0;

	font-weight: 700;

}

.logo-text span {

	font-size: 13px;

	color: #94a3b8;

}


.menu-title {

	font-size: 12px;

	color: #64748b;

	margin-bottom: 15px;

	letter-spacing: 1px;

	font-weight: 600;

}


.sidebar-menu {

	display: flex;

	flex-direction: column;

	gap: 8px;

}


.sidebar-menu a {

	display: flex;

	align-items: center;

	padding: 15px 18px;

	border-radius: 16px;

	color: #cbd5e1;

	transition: .3s;

	font-size: 15px;

	font-weight: 500;

}


.sidebar-menu a i {

	font-size: 20px;

	width: 35px;

}


.sidebar-menu a:hover {

	background: #1e293b;

	color: white;

	transform: translateX(6px);

}


.sidebar-menu a.active {

	background: linear-gradient(135deg, #2563eb, #3b82f6);

	color: white;

	box-shadow:

		0 12px 30px rgba(37, 99, 235, .35);

}


.sidebar-footer {

	margin-top: auto;

	padding-top: 25px;

	display: flex;

	align-items: center;

	border-top: 1px solid rgba(255, 255, 255, .08);

}


.sidebar-footer img {

	width: 52px;

	height: 52px;

	border-radius: 50%;

	object-fit: cover;

	margin-right: 12px;

	border: 3px solid #2563eb;

}


.sidebar-footer h6 {

	margin: 0;

	font-weight: 600;

}

.sidebar-footer small {

	color: #94a3b8;

}


.main-content {

	margin-left: 290px;

	width: calc(100% - 290px);

	padding: 30px;

	min-height: 100vh;

	transition: .35s;

}


@media(max-width:991px) {

	.sidebar {

		left: -290px;

	}

	.sidebar.show {

		left: 0;

	}

	.main-content {

		margin-left: 0;

		width: 100%;

		padding: 20px;

	}

}


.top-navbar {

	height: 90px;

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

	backdrop-filter: blur(18px);

	border-radius: 22px;

	padding: 0 28px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	position: sticky;

	top: 20px;

	z-index: 1000;

	box-shadow: 0 10px 35px rgba(15, 23, 42, .08);

	margin-bottom: 35px;

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

}


.navbar-left {

	display: flex;

	align-items: center;

	gap: 18px;

}


.page-title {

	font-size: 28px;

	font-weight: 700;

	margin: 0;

	color: #0f172a;

}


.page-subtitle {

	margin: 2px 0 0;

	font-size: 14px;

	color: #64748b;

}


.menu-toggle {

	width: 52px;

	height: 52px;

	border: none;

	border-radius: 16px;

	background: white;

	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);

	font-size: 28px;

	display: none;

	transition: .3s;

}


.menu-toggle:hover {

	background: #2563eb;

	color: white;

}


.navbar-right {

	display: flex;

	align-items: center;

	gap: 18px;

}


.search-box {

	position: relative;

}


.search-box i {

	position: absolute;

	left: 18px;

	top: 50%;

	transform: translateY(-50%);

	color: #94a3b8;

}


.search-box input {

	width: 290px;

	height: 50px;

	padding-left: 48px;

	border: none;

	background: #f8fafc;

	border-radius: 40px;

	outline: none;

	font-size: 14px;

	transition: .3s;

}


.search-box input:focus {

	box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);

}


.status-box {

	padding: 10px 18px;

	background: #ecfdf5;

	border-radius: 40px;

	display: flex;

	align-items: center;

	font-size: 14px;

	font-weight: 600;

	color: #16a34a;

}

.live-dot {

	width: 10px;

	height: 10px;

	background: #10b981;

	border-radius: 50%;

	margin-right: 10px;

	animation: pulse 1.2s infinite;

}


@keyframes pulse {

	0% {

		transform: scale(1);

		opacity: 1;

	}

	50% {

		transform: scale(1.5);

		opacity: .5;

	}

	100% {

		transform: scale(1);

		opacity: 1;

	}

}


.icon-btn {

	width: 50px;

	height: 50px;

	border: none;

	background: white;

	border-radius: 50%;

	font-size: 20px;

	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);

	position: relative;

	transition: .3s;

}


.icon-btn:hover {

	background: #2563eb;

	color: white;

}


.notification span {

	position: absolute;

	top: -4px;

	right: -2px;

	width: 22px;

	height: 22px;

	background: #ef4444;

	border-radius: 50%;

	display: flex;

	justify-content: center;

	align-items: center;

	color: white;

	font-size: 11px;

	font-weight: 700;

}


.profile-box {

	display: flex;

	align-items: center;

	gap: 14px;

	background: white;

	padding: 8px 16px;

	border-radius: 50px;

	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);

	cursor: pointer;

}


.profile-box img {

	width: 50px;

	height: 50px;

	border-radius: 50%;

	object-fit: cover;

	border: 3px solid #2563eb;

}


.profile-box h6 {

	margin: 0;

	font-weight: 700;

}


.profile-box small {

	color: #64748b;

}


@media(max-width:991px) {

	.menu-toggle {

		display: flex;

		justify-content: center;

		align-items: center;

	}

	.search-box {

		display: none;

	}

	.status-box {

		display: none;

	}

	.page-title {

		font-size: 20px;

	}

	.page-subtitle {

		display: none;

	}

	.profile-box div {

		display: none;

	}

	.profile-box {

		padding: 5px;

	}

	.profile-box i {

		display: none;

	}

}

.welcome-card {

	background: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);

	border-radius: 30px;

	padding: 40px;

	color: #fff;

	overflow: hidden;

	position: relative;

	min-height: 260px;

	box-shadow: 0 20px 40px rgba(37, 99, 235, .25);

}


.welcome-card h2 {

	font-size: 36px;

	font-weight: 700;

	margin: 18px 0;

}


.welcome-card p {

	opacity: .9;

	font-size: 16px;

	line-height: 28px;

	max-width: 550px;

}


.welcome-badge {

	display: inline-block;

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

	padding: 8px 18px;

	border-radius: 30px;

	font-size: 14px;

	backdrop-filter: blur(15px);

}


.welcome-buttons {

	margin-top: 30px;

	display: flex;

	gap: 15px;

	flex-wrap: wrap;

}


.welcome-buttons .btn {

	padding: 12px 22px;

	border-radius: 50px;

	font-weight: 600;

}


.hero-circle {

	width: 170px;

	height: 170px;

	border-radius: 50%;

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

	display: flex;

	justify-content: center;

	align-items: center;

	margin: auto;

	backdrop-filter: blur(15px);

	animation: floatIcon 4s ease-in-out infinite;

}


.hero-circle i {

	font-size: 70px;

	color: white;

}


@keyframes floatIcon {

	0% {

		transform: translateY(0px);

	}

	50% {

		transform: translateY(-15px);

	}

	100% {

		transform: translateY(0px);

	}

}


.mini-card {

	background: white;

	border-radius: 22px;

	padding: 25px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	box-shadow: 0 10px 30px rgba(15, 23, 42, .08);

	height: 118px;

	transition: .3s;

}


.mini-card:hover {

	transform: translateY(-6px);

}


.mini-card small {

	color: #64748b;

}


.mini-card h5 {

	margin-top: 10px;

	font-weight: 700;

}


.mini-card i {

	font-size: 38px;

	color: #2563eb;

}


@media(max-width:991px) {

	.welcome-card {

		padding: 30px;

		text-align: center;

	}

	.welcome-card h2 {

		font-size: 28px;

	}

	.hero-circle {

		margin-top: 30px;

		width: 130px;

		height: 130px;

	}

	.hero-circle i {

		font-size: 55px;

	}

}



.analytics-card{

    position:relative;

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

    backdrop-filter:blur(18px);

    border-radius:26px;

    padding:28px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
    0 10px 30px rgba(15,23,42,.06);

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

    min-height:220px;

}


.analytics-card::before{

    content:"";
    
    position:absolute;
    
    left:0;
    
    top:0;
    
    width:100%;
    
    height:6px;
    
    background:linear-gradient(
    90deg,
    #2563eb,
    #4f46e5,
    #06b6d4);
    
    }


    .analytics-card:hover{

        transform:translateY(-10px);
        
        box-shadow:
        
        0 25px 50px rgba(37,99,235,.18);
        
        }


        .analytics-card::after{

            content:"";
            
            position:absolute;
            
            right:-70px;
            
            top:-70px;
            
            width:180px;
            
            height:180px;
            
            background:rgba(37,99,235,.05);
            
            border-radius:50%;
            
            transition:.4s;
            
            }

            .analytics-card:hover::after{

                transform:scale(1.4);
                
                }

        

                .card-top{

                    display:flex;
                    
                    justify-content:space-between;
                    
                    align-items:center;
                    
                    margin-bottom:30px;
                    
                    }



                    .icon{

                        width:62px;
                        
                        height:62px;
                        
                        border-radius:18px;
                        
                        display:flex;
                        
                        justify-content:center;
                        
                        align-items:center;
                        
                        font-size:24px;
                        
                        color:white;
                        
                        box-shadow:
                        
                        0 12px 25px rgba(0,0,0,.12);
                        
                        }


                        .blue{

                            background:linear-gradient(
                            135deg,
                            #2563eb,
                            #3b82f6);
                            
                            }


                            .red{

                                background:linear-gradient(
                                135deg,
                                #ef4444,
                                #dc2626);
                                
                                }


                                .green{

                                    background:linear-gradient(
                                    135deg,
                                    #16a34a,
                                    #22c55e);
                                    
                                    }


                                    .orange{

                                        background:linear-gradient(
                                        135deg,
                                        #ea580c,
                                        #fb923c);
                                        
                                        }


                                        .purple{

                                            background:linear-gradient(
                                            135deg,
                                            #7c3aed,
                                            #8b5cf6);
                                            
                                            }



                                            .cyan{

                                                background:linear-gradient(
                                                135deg,
                                                #0891b2,
                                                #06b6d4);
                                                
                                                }



                                                .analytics-card h6{

                                                    margin-bottom:10px;
                                                    
                                                    font-size:15px;
                                                    
                                                    font-weight:600;
                                                    
                                                    color:#64748b;
                                                    
                                                    }



                                                    .analytics-card h2{

                                                        font-size:42px;
                                                        
                                                        font-weight:800;
                                                        
                                                        margin-bottom:18px;
                                                        
                                                        color:#0f172a;
                                                        
                                                        }



                                                        .card-footer{

                                                            display:flex;
                                                            
                                                            justify-content:space-between;
                                                            
                                                            align-items:center;
                                                            
                                                            padding:0;
                                                            
                                                            border:none;
                                                            
                                                            background:none;
                                                            
                                                            font-size:14px;
                                                            
                                                            color:#64748b;
                                                            
                                                            }



                                                            .card-footer strong{

                                                                font-weight:700;
                                                                
                                                                color:#0f172a;
                                                                
                                                                }



                                                                .trend{

                                                                    padding:7px 14px;
                                                                    
                                                                    border-radius:30px;
                                                                    
                                                                    font-size:13px;
                                                                    
                                                                    font-weight:700;
                                                                    
                                                                    display:flex;
                                                                    
                                                                    align-items:center;
                                                                    
                                                                    gap:6px;
                                                                    
                                                                    }



                                                                    .up{

                                                                        background:#ecfdf5;
                                                                        
                                                                        color:#16a34a;
                                                                        
                                                                        }



                                                                        .down{

                                                                            background:#fef2f2;
                                                                            
                                                                            color:#dc2626;
                                                                            
                                                                            }


                                                                            .analytics-card:hover .icon{

                                                                                transform:rotate(12deg) scale(1.08);
                                                                                
                                                                                transition:.35s;
                                                                                
                                                                                }



                                                                                .counter{

                                                                                    transition:.3s;
                                                                                    
                                                                                    }



                                                                                    @media(max-width:991px){

                                                                                        .analytics-card{
                                                                                        
                                                                                        padding:22px;
                                                                                        
                                                                                        min-height:190px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .analytics-card h2{
                                                                                        
                                                                                        font-size:34px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .icon{
                                                                                        
                                                                                        width:55px;
                                                                                        
                                                                                        height:55px;
                                                                                        
                                                                                        font-size:22px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        }


                                                                                        @media(max-width:575px){

                                                                                            .analytics-card{
                                                                                            
                                                                                            padding:18px;
                                                                                            
                                                                                            border-radius:20px;
                                                                                            
                                                                                            min-height:175px;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            .analytics-card h2{
                                                                                            
                                                                                            font-size:30px;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            .analytics-card h6{
                                                                                            
                                                                                            font-size:14px;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            .trend{
                                                                                            
                                                                                            font-size:11px;
                                                                                            
                                                                                            padding:6px 10px;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            .card-footer{
                                                                                            
                                                                                            font-size:12px;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            }