* General Reset and Styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

     html, body {
    height: 100%; /* Ensure the html and body take the entire height of the viewport */
    margin: 0; /* Remove default margin */
}

body {
    font-family: Arial, sans-serif;
    background-image: url('images/bgg.jpeg'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the whole viewport */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image from repeating */
    background-color: #f0f2f5; /* Fallback color */
    color: #333; /* Text color */
    line-height: 1.6; /* Line height for better readability */
    overflow: hidden; /* Prevents scrolling */
    height: 100vh; /* Ensures body takes full viewport height */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
}
       /* Header Styles */
header {
    background: linear-gradient(135deg, #82c0ff, #6488e9); /* Gradient from light to dark blue */
    color: #fff; /* Change text color to white for better contrast */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Set a fixed height for the header */
    border-bottom: 3px solid #151185; /* Add a solid bottom border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly more pronounced shadow */
    z-index: 1001; /* Higher z-index than menu */
    border-radius: 0 0 15px 15px; /* Rounded bottom corners */
}
/* Inner container for better alignment */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Menu Icon */
.menu-icon i {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s; /* Smooth scaling effect */
}

/* Menu Icon hover effect */
.menu-icon i:hover {
    transform: scale(1.1); /* Scale up on hover */
}

/* Header Title */
.header-title {
    font-size: 20px; /* Slightly larger font size */
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
    margin: 0;
}

/* User Profile Icon */
.user-profile i {
    font-size: 24px;
    cursor: pointer;
    color: #fff; /* Ensure icon is white for contrast */
    transition: color 0.3s; /* Smooth color transition */
}

/* User Profile Icon hover effect */
.user-profile i:hover {
    color: #ffd700; /* Color change on hover (gold) */
}

/* Optional: Add styles for anchors if required */
header a {
    color: #fff; /* Ensure links in header are white */
    text-decoration: none; /* Remove underline */
}

header a:hover {
    text-decoration: underline; /* Underline on hover */
}
       /* Sliding Menu */
#menu {
    position: fixed;
    top: 0;
    left: -250px; /* Initially off-screen */
    width: 250px;
    height: calc(100% - 50px); /* Adjust height to avoid overlapping with header */
    background-color: #fff;
    transition: left 0.3s ease-in-out; /* Smooth transition */
    z-index: 1000; /* Ensure it's below the header */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optional: slight shadow for depth */
}

        #menu a {
            display: flex;
            align-items: center;
            color: #151185;
            padding: 15px;
            text-decoration: none;
            font-size: 18px;
            border-bottom: 1px solid #ddd;
        }

        #menu a i {
            margin-right: 10px;
        }

        #menu a:hover {
            background-color: ;
        }

        /* Main Content Section */
        .dashboard-container {
            max-width: 1200px;
            margin: 10px auto;
            padding: 20px;
            margin-top: 60px;
        }

        .dash {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .d-top,
        .d-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .d-top i {
            margin-right: 8px;
            cursor: pointer;
            display: inline-block;
        }

        .d-bot b {
            font-size: 1.5rem;
        }

        button {
            padding: 8px 16px;
            background-color: #151185;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            transition: background-color 0.3s;
        }

        /* Button Container */
        .button-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        /* Services Section */
        .services-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Fit 3 cards per row */
            gap: 10px;
            margin-top: 20px;
        }

        .service-card {
            text-align: center;
            background: #fff;
            color: #151185;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, background 0.3s;
            cursor: pointer;
            text-decoration: none;
        }

        .service-card:hover {
            background: ;
            transform: scale(1.05);
        }

        .service-card i {
            font-size: 15px;
            margin-bottom: 5px;
        }

        .service-card p {
            font-size: 12px;
            margin: 0;
        }

    /* Fixed Footer Menu */
.wrapper {
    width: 100%;
    max-width: 500px; /* Set a maximum width for confinement */
    height: 60px; /* Height of footer */
    background: linear-gradient(135deg, #82c0ff, #6488e9); /* Use the same beautiful gradient as the header */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px; /* Reduced left and right padding */
    position: fixed;
    bottom: 0;
    z-index: 999;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 15px; /* Rounded corners */
    border-top: 3px solid #151185; /* Only add top border */
    /* Remove any borders you do not want */
}

.wrapper ul {
    display: flex;
    justify-content: space-around;
    position: relative;
    width: 100%;
    list-style: none; /* Remove list styling */
    padding: 0;
    margin: 0;
}

.wrapper ul li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Centering the content */
    cursor: pointer;
    transition: background 0.3s ease; /* Smooth background transition */
    padding: 5px 0; /* Added padding to make height more compact */
}

.wrapper ul li:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Light background on hover */
    border-radius: 8px; /* Slightly rounded corners on hover */
}

.wrapper ul li a {
    color: #ffffff; /* White text color for contrast */
    display: block;
    text-align: center;
    text-decoration: none; /* Remove underline */
}

.wrapper ul li a span {
    display: block;
}

.wrapper ul li a .icon {
    font-size: 20px; /* Reduced icon size */
    margin-bottom: -3px; /* Adjusted margin to keep spacing tight */
    transition: transform 0.3s ease; /* Smooth transform transition */
}

.wrapper ul li:hover a .icon {
    transform: scale(1.1); /* Slightly increase icon size on hover */
}

.wrapper ul li a .text {
    font-size: 9px; /* Reduced font size */
    font-weight: bold;
    transition: color 0.3s ease; /* Smooth color transition */
}

.wrapper ul li:hover a .text {
    color: #ffffff; /* Keep text white on hover */
}

/* Optional: Adjust responsiveness */
@media (max-width: 768px) {
    .wrapper {
        height: 60px; /* Further reduce height on smaller screens */
        padding: 0 3px; /* Further reduce padding for mobile */
    }

    .wrapper ul li a .icon {
        font-size: 18px; /* Smaller icon size for mobile */
    }

    .wrapper ul li a .text {
        font-size: 8px; /* Smaller text for mobile */
    }
}

        /* Remove Dot */
        .wrapper .pointer {
            display: none;
        }

        /* Mobile Responsive Adjustments */
        @media (max-width: 768px) {
            .wrapper ul li a .text {
                font-size: 8px;
            }

            .wrapper ul li a .icon {
                font-size: 20px;
            }
        }
         .img{
        border-radius:50%;
        border:2px solid white;
        transform:scale(0.9);
        object-fit:cover;
        height:25px;
        width:25px;
        padding:0;
    }
    .service-icon {
    width: 25px; 
    height: auto;
}