/* General Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    background-color: #f4f7fa;
}

/* Top Navbar */
.top-navbar {
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    color: #333;
    display: flex;
   
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    transition: background-color 0.3s ease;
}

.navbar-left {
    width: 260px;
    display: flex;
    align-items: center;
}

.brand-logo img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.brand-logo img:hover {
    transform: rotate(15deg); /* Slight rotation on hover */
}

.brand-name {
    font-size: 22px;
    font-weight: 700;
    color: #1e3a8a;
    margin-top: 0px;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.toggle-sidebar-btn {
    background: none;
    width: 40px;
    height: 30px;
  left: 0;
   margin-top: 50px;
   padding: 0;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    margin-right: 10px;
    transition: color 0.3s, transform 0.3s ease;
    box-shadow:none;
   
}

.toggle-sidebar-btn:hover {
    color: #ffffff;
    transform: scale(1.1); /* Enlarge slightly on hover */
}

.navbar-center-and-right 
{
    width: 100%;
    display: flex;
   padding: 20 0px; 
   margin-left: 10px;
    justify-content: space-between;

}
.navbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
}

.user-avatar:hover {
    border-color: #1e3a8a;
}

.username {
    font-size: 14.5px;
    color: #333;
    transition: color 0.3s ease;
}

.notifications {
    position: relative;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.notifications:hover {
    color: #1e3a8a;
    transform: scale(1.1);
}

.badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Sidebar styling */
.sidebar {
    width: 250px;
    height: 100%;
    background-color: #1e3a8a;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0; /* Start in visible position */
    overflow-y: auto;
    padding-top: 80px; /* Space for top navbar */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    transition: left 4.4s ease; /* Smooth transition for sliding */
    z-index: 1000;
}

/* Sidebar hidden by moving it off-screen */
.sidebar.hidden {
    left: -250px; /* Move sidebar off-screen */
}


.sidebar.collapsed {
    transform: translateX(-260px);
}





.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sidebar .section-title {
    font-size: 13px;
    padding: 15px 20px;
    color: #d1e1f1;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px; /* Adds space between icon and text */
    transition: background 0.3s ease;
}







/* Triangle Icon (Right Arrow) */
.sidebar .section-title::after {
    content: ""; /* Empty content for pseudo-element */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #a3b8d9; /* Triangle color */
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Rotate Triangle for Expanded State */
.sidebar .section-title.expanded::after {
    transform: rotate(180deg); /* Rotate 180 degrees when expanded */
}





.sidebar .section-title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}



.section-content
{
background-color: #ffffff;


}

.sidebar ul li a {
    color: #0095ff;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 15px;
    transition: background 0.3s ease, padding-left 0.3s ease, transform 0.2s ease;
    border-radius: 4px;
}

.sidebar ul li a i {
    margin-left: 20px;
    margin-right: 10px;
    font-size: 16px;
    color: #068ff8;
}

.sidebar ul li a:hover {
   
    padding-left: 25px;
   transform: scale(1.05);
   
}

.sidebar ul li a.active {
    background-color: #4b72bf;
    font-weight: bold;
    padding-left: 24px;
    border-left: 4px solid #ffffff;
}



/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-260px);
    }
    .sidebar.collapsed {
        transform: translateX(0);
    }
    .top-navbar {
        padding: 0 15px;
    }
}

/* Custom styling for the hamburger icon */
.fas.fa-bars {
    font-size: 24px;
    color: #333;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s ease;
}

.fas.fa-bars:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.fas.fa-bars.active {
    color: #4b72bf;
    transform: rotate(90deg);
}