@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

        body {
              font-family: 'Plus Jakarta Sans', sans-serif;

            background-color: #f8f9fa;
            color: #333;
        }

        /* Sidebar Desktop */
        .sidebar {
            width: 280px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background: #0d6efd;
            border-right: 1px solid #eee;
            padding: 2rem;
            z-index: 1000;
        }

        .main-content {
            margin-left: 280px;
            padding: 1rem;
        }

        /* Profile Section in Sidebar */
        .profile-card img {
          width: 100px;
            height: 95px;
            object-fit: cover;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 2px solid orange;
            padding: 2px 3px;
        }

        .nav-link {
            color: #fff;
            font-weight: 500;
            padding: 0.8rem 1rem;
            border-radius: 10px;
            transition: 0.3s;
            margin-bottom: 0.5rem;
        }
        .offcanvas .nav-link{
            color:#000;
            border-bottom: 1px solid #999;
        }
        .nav-link:hover, .nav-link.active {
            background: #e9ecef;
            color: #0d6efd;
        }

        /* Soft UI Cards */
        .stat-card {
            background: white;
            border: none;
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #0d6efd;
        }

        /* Section Styling */
        section { padding: 2rem 0; }
        .section-title { font-weight: 700; margin-bottom: 10px; position: relative; }
        .section-title::after {
            content: '';
            display: block;
            width: 50px;
            height: 4px;
            background: #0d6efd;
            margin-top: 10px;
            border-radius: 2px;
        }

        /* Responsive Adjustments */
        @media (max-width: 991.98px) {
            .sidebar { display: none; }
            .main-content { margin-left: 0; }
            .mobile-nav { display: flex !important; }
        }

        .mobile-nav {
            display: none;
            background: white;
            padding: 1rem;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 1050;
        }
        #home p{
            text-align: justify;
        }