body {
       background: #ffffff;
       font-family: Arial, sans-serif;
   }

   /* Navbar */
   .top-navbar {
       border-bottom: 1px solid #eee;
       /* padding: 12px 0; */
   }
   .navbar {
    padding: 0px 12px 0px 12px!important;
   }
   .brand-text {
       font-weight: 700;
       font-size: 18px;
       color: #000;
   }

   .brand-text span {
       color: #000;
   }

   .nav-link {
       font-size: 14px;
       color: #000 !important;
       font-weight: 500;
       margin-right: 10px;
   }

   .nav-link:hover {
       color: #007bff !important;
   }

   .btn-outline-dark-rounded {
       border-radius: 25px;
       padding: 6px 18px;
       font-size: 13px;
       font-weight: 500;
   }

   /* Page Title */
   .page-title {
       font-size: 28px;
       font-weight: 700;
       text-align: center;
       margin: 35px 0 30px 0;
   }

   /* Course Card */
   .course-card {
       border-radius: 8px;
       border: 1px solid #e5e5e5;
       overflow: hidden;
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
       transition: 0.2s;
   }

   .course-card:hover {
       transform: translateY(-4px);
   }

   .course-img {
       width: 100%;
       height: 170px;
       object-fit: cover;
   }

   .badge-off {
       position: absolute;
       top: 10px;
       left: 10px;
       background: #ff4d4d;
       color: white;
       font-size: 11px;
       font-weight: 600;
       padding: 3px 8px;
       border-radius: 5px;
   }

   .badge-featured {
       position: absolute;
       top: 10px;
       right: 10px;
       background: #ffc107;
       color: #000;
       font-size: 11px;
       font-weight: 600;
       padding: 3px 8px;
       border-radius: 5px;
   }

   .course-title {
       font-size: 14px;
       font-weight: 700;
       margin-top: 10px;
       min-height: 45px;
   }

   .course-desc {
       font-size: 12px;
       color: #777;
       margin-bottom: 10px;
       min-height: 40px;
   }

   .course-meta {
       font-size: 12px;
       color: #555;
       margin-bottom: 6px;
   }

   .course-meta i {
       color: #444;
       margin-right: 5px;
   }

   .price-box {
       margin-top: 10px;
       font-size: 14px;
       font-weight: 700;
   }

   .old-price {
       font-size: 12px;
       font-weight: 500;
       color: #777;
       text-decoration: line-through;
       margin-left: 6px;
   }

   .btn-view-course {
       width: 100%;
       margin-top: 12px;
       background: #f0f0f0;
       border: none;
       font-weight: 600;
       font-size: 13px;
       padding: 10px;
       border-radius: 6px;
   }

   .btn-view-course:hover {
       background: #e0e0e0;
   }

   /* Container width like screenshot */
   /* .main-container{
            max-width: 1100px;
        } */

   .navbar-right-tools {
       gap: 10px;
   }

   .search-wrapper {
       position: relative;
   }

   .search-input {
       border-radius: 6px;
       font-size: 12px;
       padding-right: 50px;
       height: 32px;
       width: 220px;
       background: #f7f7f7;
       border: 1px solid #e5e5e5;
   }

   .search-shortcut {
       position: absolute;
       right: 8px;
       top: 50%;
       transform: translateY(-50%);
       background: #fff;
       border: 1px solid #ddd;
       font-size: 11px;
       padding: 2px 6px;
       border-radius: 4px;
       color: #555;
   }

   .icon-btn {
       height: 34px;
       width: 34px;
       border-radius: 6px;
       border: 0px solid #dddddd00;
       background: #fff;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 15px;
       cursor: pointer;
   }

   .icon-btn:hover {
       background: #f0f0f0;
   }

   .user-btn {
       padding: 0;
   }

   .user-btn i {
       font-size: 20px;
   }

   .user-dropdown {
       width: 260px;
       padding: 10px;
       border-radius: 8px;
       box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
   }

   .user-info {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 8px;
   }

   .user-avatar {
       height: 40px;
       width: 40px;
       border-radius: 50%;
       background: #f1f1f1;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 18px;
   }

   .secured-text {
       font-size: 12px;
       color: #777;
       padding: 5px;
   }


   .footer-links li {
       margin-bottom: 8px;
   }

   .footer-links a {
       text-decoration: none;
       color: #555;
       font-size: 14px;
       transition: 0.3s;
   }

   .footer-links a:hover {
       color: #000;
       text-decoration: underline;
   }

   #navlogo {
       width: 100px;
   }

   /* HERO SECTION */
   .course-hero {
       background: #1d2639;
       color: #fff;
       padding: 60px 0;
   }

   .course-hero h1 {
       font-size: 28px;
       font-weight: 700;
   }

   .course-hero p {
       font-size: 14px;
       color: #d0d0d0;
       max-width: 750px;
   }

   .badge-hot {
       background: #f7c948;
       color: #000;
       font-size: 11px;
       font-weight: bold;
       padding: 6px 10px;
       border-radius: 5px;
       display: inline-block;
   }

   /* COURSE BOX */
   .content-box {
       background: #fff;
       border: 1px solid #eee;
       border-radius: 10px;
       padding: 20px;
       margin-bottom: 25px;
   }

   .content-box h5 {
       font-weight: bold;
       margin-bottom: 15px;
   }

   .content-box ul {
       padding-left: 18px;
       margin: 0;
   }

   .content-box ul li {
       font-size: 14px;
       margin-bottom: 10px;
   }

   /* COURSE CONTENT LIST */
   .course-list .list-group-item {
       font-size: 14px;
       border: none;
       border-bottom: 1px solid #eee;
       padding: 12px 10px;
   }

   /* SIDEBAR CARD */
   .sidebar-card {
       background: #fff;
       border: 1px solid #eee;
       border-radius: 10px;
       padding: 15px;
   }

   .sidebar-card img {
       width: 100%;
       border-radius: 10px;
   }

   .price {
       font-size: 18px;
       font-weight: bold;
   }

   .old-price {
       text-decoration: line-through;
       color: gray;
       font-size: 13px;
       margin-left: 8px;
   }

   .buy-btn {
       width: 100%;
       background: #000;
       color: #fff;
       border-radius: 6px;
       padding: 10px;
       font-weight: bold;
       border: none;
       text-decoration: none;
   }

   .buy-btn:hover {
       background: #222;
   }

   .sidebar-card ul li {
       font-size: 13px;
       margin-bottom: 8px;
   }

   .accordion-button {
       font-size: 14px;
       font-weight: 600;
   }

   .accordion-body ul li {
       font-size: 14px;
   }

   .accordion-title {
       cursor: pointer;
   }

   .demo-lesson {
       font-size: 13px !important;
   }

   .demo-material-mcq {
       font-size: 12px !important;
   }

   .study-mat{
     font-size: 14px !important;
     text-decoration: none;
     color: #2a2929;
   }