body {
     margin: 0;
     font-family: "Poppins", sans-serif;
     background: #f7f9fc;
     box-sizing: border-box;
 }

 .lms {
     display: flex;
 }

 /* Sidebar */
 .sidebar {
     background: #1f1f1f;
     color: #fff;
     height: 100vh;
     padding: 20px;
     transition: all 0.5s ease;
     z-index: 5;
 }

 .sidebar h2 {
     text-align: center;
     margin-bottom: 30px;
 }

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

 .sidebar ul li {
     margin: 10px 0;
 }

 .sidebar ul li a {
     text-decoration: none;
     color: #fff;
     display: block;
     padding: 10px;
     border-radius: 5px;
     transition: background-color 0.3s;
 }

 .sidebar ul li a:hover,
 .sidebar ul li a.active {
     background: linear-gradient(270deg, #00abc9, #0291aa);
 }

 /* Navbar */
 .navbar2 {
     background: #1f1f1f;
     color: #fff;
     padding: 0 20px;
     display: none;
     justify-content: space-between;
     align-items: center;
     
     width: 100%;
     z-index: 10;
     transition: all 0.5s ease;
 }
 .navbar2 h2{
    font-size: 18px;
    margin: 0;
 }

 .navbar2.active {
     display: flex;
     height: 60px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .navbar2 .menu {
     display: flex;
     gap: 15px;
 }

 .navbar2 .menu li {
     list-style: none;
 }

 .menu li a {
     border: 1px solid #333;
     border-radius: 6px;
 }

 .navbar2 .menu a {
     color: #fff;
     text-decoration: none;
     padding: 6px 12px;
     border-radius: 4px;
     transition: background 0.3s;
     border: 1px solid #333;
     font-size: 13px;
 }

 .navbar2 .menu a:hover,
 .navbar2 .menu a.active {
     background: #00abc9;
 }

 .navbar2 span.exit-btn {
     cursor: pointer;
     background: #a20f00;
     padding: 6px 12px;
     border-radius: 4px;
     transition: background 0.3s;
 }

 .navbar2 span.exit-btn:hover {
     background: #e74c3c;
 }

 /* Lecture Sidebar */
/* Lecture Sidebar as sticky */
.lecture-sidebar {
    width: 300px;
    background-color: white;
    height: 100vh;
    border-radius: 0px 0px 10px 0px ;
    position: -webkit-sticky;
    position: sticky;
    top: 170px;              
    left: 0;
    padding: 10px;
    z-index: 4;
    transition: all 0.5s ease;
}




.lec-list {
  height: 80vh;
  overflow-y: auto;
  border-radius: 5px;
}

/* Scrollbar width */
.lec-list::-webkit-scrollbar {
  width: 8px;
}

/* Scrollbar track */
.lec-list::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;
}

/* Scrollbar handle */
.lec-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00abc9, #006e74);
  border-radius: 10px;
  margin-left: 5px;
}

/* Handle hover */
.lec-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #008ba3, #004c4f);
}


 .lecture-sidebar.active {
     left: 0;
 }

 .lecture-sidebar h3 {
     margin-top: 0;
     margin-bottom: 15px;
 }

 .lecture-sidebar ul {
     list-style: none;
     padding: 0;
     margin-right: 5px;
 }

 .lecture-sidebar li {
     margin-bottom: 6px;
 }

 /* .lecture-link::after {
        content: "";
        display: block;
        width: 50px;
        height: 4px;
        background: linear-gradient(270deg, #fdfdfd, #0291aa);
        border-radius: 2px;
        margin-top: 5px;
      } */
 .lecture-sidebar li a {
     display: block;
     padding: 8px 12px;
     border-radius: 4px;
     font-size: 12px;
     background: #34495e;
     color: #fff;
     text-decoration: none;
     transition: background 0.3s;
     white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .lecture-sidebar li a:hover,
 .lecture-sidebar li a.active {
     background: #00abc9;
 }



 /* Main */
 /* .main {
        width: calc(100% - 250px);
        margin-left: 300px;
        padding: 20px;
        transition: all 0.5s ease;
        position: relative;
      } */
 .main.shifted {
     /* margin-left: 312px; */
     /* margin-top: 60px; */
 }

 .header2 {
     display: block;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     background-color: #1f1f1f;
     padding: 5px 10px;
     border-radius: 5px;
 }

 .header2 .name-btn {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
 }

 .header2 h2 {
     margin: 0;
     color: #fff !important;
        font-size: 20px;
 }

 .header2 span {
     color: #fff;
     cursor: pointer;
     background-color: #a20f00;
     transition: background-color 0.3s;
     padding: 8px 12px;
     border-radius: 6px;
 }

 .header2 span:hover {
     background-color: #e74c3c;
 }

 .header2 span i {
     margin-left: 8px;
 }

 .main {
     width: 100%;
     /* margin-left: 15px; */
     /* tumne 300px likha tha, lekin sidebar 250px hai */
     padding: 20px;
     /* margin-right: 15px; */
     transition: all 0.5s ease;
     position: relative;
     /* transition ke dauran bahar na nikle */
 }

 /* Pages */
 .page {
     transform: translateX(0);
     background: #fff;
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.5s ease;
 }

 /* Inactive pages */
 .page:not(.active) {
     pointer-events: none;
     display: none;
 }

 /* Active page */
 .page.active {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 .page h3 {
     margin-top: 0;
     padding-bottom: 10px;
     margin-bottom: 20px;
     color: #333;
 }

 .page h3::after {
     content: "";
     display: block;
     width: 50px;
     height: 4px;
     background: linear-gradient(270deg, #00abc9, #0291aa);
     border-radius: 2px;
     margin-top: 5px;
 }

 .l-2 {
     margin: 7px 0px 7px 15px;
     font-size: 20px;
     font-weight: 600;
 }

#course-title-main-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: black;
  padding: 10px 0px 10px 10px;
  border-radius: 5px;
  /* margin-bottom: 25px; */
  width: 320px;
}

#course-title-main {
  color: white;
  font-size: 13px;
  white-space: nowrap;        /* single line */
  overflow: hidden;           /* hide extra text */
  text-overflow: ellipsis;    /* show ... */
  max-width: 260px;           /* adjust as per layout */
  display: inline-block;
}


 @media (max-width: 768px) {
     .lecture-sidebar{
        position: fixed;
        top: 210px !important;
        height: 60vh;
     }
     .lec-list{
        height: 50vh;
     }

     .page{
        padding: 10px;
     }
 }

 @media (max-width: 576px) {
     /* .sidebar {
         left: -250px;
     } */

     .sidebar.active {
         left: 0;
     }

     .main.shifted {
         margin-left: 5px;
     }

     .main {
         margin-left: 15px;
         margin-right: 5px;
     }
     .page{
        padding: 5px;
     }
 }


 .lec-data {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     align-items: center;
     background: #fff;
     border: 1px solid #e5e7eb;
     border-left: 4px solid #00abc9;
     /* Stylish accent */
     padding: 5px 10px;
     border-radius: 5px;
     font-family: "Segoe UI", sans-serif;
     max-width: 420px;
     margin: 7px 0;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }

 /* Course Number (left side) */
 .course-no span {
     font-weight: 700;
     font-size: 12px;
     color: #006e74;
     background: #e6f8fa;
     padding: 4px 10px;
     border-radius: 5px;
 }

 /* Right side column */
 .total-lectures {
     display: flex;
     flex-direction: column;
     text-align: right;
     gap: 4px;
 }

 .total-lectures span {
     font-size: 10px;
     font-weight: 500;
     color: #444;
 }