/* General body styles */
body {
  background-color: #f9fafb;
  /* Similar to Tailwind bg-gray-50 */
  font-family: Arial, Helvetica, sans-serif;
}

/* Navbar */
.navbar-custom {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.navbar-brand {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2563eb;
  /* Tailwind blue-600 */
  text-decoration: none;
}

.navbar-brand:hover {
  color: #1e40af;
}

.nav-link {
  color: #4b5563;
  /* Tailwind gray-600 */
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-link:hover {
  color: #2563eb;
}

/* Main content */
.main-content {
  padding: 2rem 1rem;
}

/* Footer */
.footer-custom {
  background-color: #fff;
  color: #6b7280;
  /* Tailwind gray-500 */
  margin-top: 3rem;
}

/* Index Page CSS */
/* Homepage Hero Section */
.home-hero {
  padding: 5rem 1rem;
  /* ~py-20 */
  border-radius: 0.75rem;
  /* ~rounded-lg */
}

.hero-title {
  font-size: 3rem;
  /* ~text-5xl */
  font-weight: 800;
  /* ~font-extrabold */
  color: #1f2937;
  /* Tailwind gray-800 */
}

.hero-subtitle {
  font-size: 1.125rem;
  /* ~text-lg */
  color: #4b5563;
  /* Tailwind gray-600 */
}

.hero-btn {
  font-weight: 700;
  padding: 0.75rem 2rem;
  /* ~py-3 px-8 */
  border-radius: 9999px;
  /* ~rounded-full */
  font-size: 1.125rem;
  /* ~text-lg */
  transition: transform 0.2s ease;
}

.hero-btn:hover {
  transform: scale(1.05);
}

/* Courses Page CSS  */
/* Page Title */
.page-title {
  font-size: 2.25rem;
  /* ~ text-4xl */
  font-weight: 700;
  color: #1f2937;
  /* Tailwind gray-800 */
}

/* Filters */
.filter-container {
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.filter-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* background-color: #818080; */
  border-radius: 10px;
  padding: 10px 15px;
}

/* Course Cards */
.course-card {
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.card-title {
  font-weight: 600;
  font-size: 20px;
}

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

.course-img {
  height: 13rem;
  /* ~h-52 */
  object-fit: cover;
}

.category-badge {
  background-color: #dbeafe;
  /* Tailwind blue-100 */
  color: #1e40af;
  /* Tailwind blue-800 */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.topic-badge {
  background-color: #ede9fe;
  /* Tailwind purple-100 */
  color: #6b21a8;
  /* Tailwind purple-800 */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.enroll-for-badge {
  background-color: #d1fae5;
  /* Tailwind green-100 */
  color: #065f46;
  /* Tailwind green-800 */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

/* Course Detail Page CSS */
/* Course Detail Page */
.course-title {
  font-size: 2rem;
  /* ~text-4xl */
  font-weight: 800;
  color: #111827;
  /* Tailwind gray-900 */
}

.course-detail-img {
  height: 24rem;
  /* ~h-96 */
  object-fit: cover;
  width: 100%;
}

.badge.bg-success-subtle {
  background-color: #d1fae5;
  /* Tailwind green-100 */
  color: #065f46;
  /* Tailwind green-800 */
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
}

.badge.bg-purple-custom {
  background-color: #f3e8ff;
  /* Tailwind purple-100 */
  color: #6b21a8;
  /* Tailwind purple-800 */
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
}

/* Similar Courses */
.course-card {
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

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

.course-img {
  height: 13rem;
  /* ~h-52 */
  object-fit: cover;
}

/* ADMIN STYLE */

/* Admin Panel */
.admin-body {
  background-color: #f3f4f6;
  /* Tailwind gray-100 */
  height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Sidebar */
.sidebar {
  width: 250px;
  background-color: #d31f25;
  /* red */
  color: #fff;
}

.sidebar-header img {
  max-width: 180px;
}

.sidebar .nav-link {
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar .nav-link:hover {
  background-color: #fff;
  color: #000;
}

.sidebar .nav-link.active {
  background-color: #fff;
  color: #000;
  font-weight: 600;
}

/* Page Titles */
.page-title {
  font-size: 2rem;
  /* ~text-3xl */
  font-weight: 700;
  /* ~font-bold */
  color: #1f2937;
  /* Tailwind gray-800 */
}

/* Form Card */
.card {
  background: #fff;
  border-radius: 0.5rem;
  /* ~rounded-lg */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* ~shadow-md */
}

/* button style */

button {
  margin: 20px 0;
}

.custom-btn {
  width: 120px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  /* padding: 10px 25px; */
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: #343a40;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  /* box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1); */
  outline: none;
  background-color: #343a40;
}

/* 16 */
.btn-16 {
  border: none;
  color: #fff;
}

.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-16:hover {
  color: #fff;
}

.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.btn-16:active {
  top: 2px;
}

button.custom-btn.btn-16 a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

.filter-style {
  background: linear-gradient(90deg,
      rgba(180, 58, 58, 1) 0%,
      rgba(253, 29, 29, 1) 50%,
      rgba(252, 176, 69, 1) 100%);
}

.course-title {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(to right, rgb(211, 31, 37) 0%, rgb(0, 0, 0) 100%) text !important;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.duration-date {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.duration-heading strong {
  color: #d31f25;
}

.category-details {
  display: flex;
  justify-content: space-between;
}

.calendar .date-box {
  background-color: #fff;
  /*background-color: #ff0000;*/
  color: #000;
  padding: 8px;
  border-radius: 10px 10px 0px 0px;;
  display: inline-block;
  text-align: center;
  /* min-width: 60px; */
  height: 90px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background: linear-gradient(to bottom, #FF0000, #000000 60%); */
  width: 100%;
  border: 1px solid #D32F2F;
}

.date-box1 {
  background-color: #000;
  color: #fff;
  border-radius: 0px 0px 10px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  width: 100%;
}

.calendar .date-num {
  font-size: 35px;
  font-weight: bold;
  line-height: 1.2;
}

.calendar .date-day {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

/* .calendar.text-center {
    padding-top: 20px;
} */
.calendar.text-center {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.frame {
  margin-left: 20px !important;
}

.category-details1 {
  display: flex;
  align-items: center;
  gap: 13px;
}

.category-details1 strong {
  color: #d31f25;
}

.duration-main {
  justify-content: space-between;
}

.category-details {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.duration-date span {
  font-weight: 600;
}

.category-details2 {
  font-weight: 700;
}

.date-month {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.mode-badge {
  background-color: #343a40;
  /* dark gray / black */
  color: #fff;
  font-size: 0.8rem;
  margin: 2px;
  text-transform: uppercase !important;
}

.card-body-part {
  height: 140px;
}

.page-link {
  /* border-radius: 5px; */
  color: #000;
}

.active .page-link {
  background-color: #d31f25 !important;
  border-radius: 5px;
  color: #fff;
  border: 0.5px solid #d31f25;
}



    .btn.btn-secondary {
        height: 100% !important;
        margin-top: 20px !important;
    }


    /* Mobile Responsive Fix */
     

    @media (max-width: 768px) {

        /* Filters */
        #filter-container {
            gap: 0px !important;
            display: flex !important;
        }

        #filter-container .dropdown {
            width: 50%;
        }

        #filter-container .dropdown button {
            width: 95%;
            text-align: left;
            margin: 10px 0px;
        }

        /* Course Card Layout */
        .course-card .row {
            flex-direction: column;
        }

        .course-card .col-lg-3,
        .course-card .col-lg-7,
        .course-card .col-lg-2 {
            width: 100%;
            max-width: 100%;
            text-align: center;
        }

        /* Calendar Center */


        /* Title */
        .card-title {
            font-size: 18px;
            text-align: center;
        }

        /* Badges */
        .badge {
            font-size: 12px;
            margin-bottom: 5px;
        }

        /* Mode Badge */
        .category {
            justify-content: center;
            margin-top: 15px;
        }

        /* Button */
        .frame {
            text-align: center;
            margin-top: 20px;
        }

        /* Card Padding */
        .card-body {
            padding: 15px;
        }

        /* Page Title */
        .course-title {
            font-size: 24px;
        }
    }

    /* Extra Small Devices */
    @media (max-width: 480px) {
        .calendar.text-center {
            padding-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        .card-title {
            font-size: 16px;
        }

        .badge {
            font-size: 11px;
            padding: 6px 10px;
        }

        .date-num {
            font-size: 22px;
        }

        .date-month,
        .date-day {
            font-size: 13px;
        }

        .custom-btn {
            font-size: 14px;
        }
    }


    @media (max-width: 768px) {


        .course-card .card {
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
            border: none;
            padding: 10px;
            background: #fff;
        }

        .course-card .row {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .course-card .col-12 {
            width: 100%;
            text-align: center;
        }



        

        /* Title spacing */
        .card-title {
            font-size: 22px;
            line-height: 1.4;
            margin: 15px 0;
            text-align: center;
        }

        /* Badges centered */
        .card-body .d-flex {
            justify-content: center;
            flex-wrap: wrap;
        }

        .badge {
            font-size: 12px;
            padding: 7px 12px;
            margin: 4px;
        }

        /* Mode badge spacing */
        .category {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        /* Button proper width */
        .frame {
            text-align: center;
        }

        .custom-btn {
            width: auto;
            min-width: 180px;
            padding: 12px 25px;
            display: inline-block;
        }
    }


    @media (max-width: 768px) {

        .course-card .card {
            min-height: 500px;
            border-radius: 18px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #eee;
            overflow: hidden;
        }

        .course-card .card-body {
           
            flex-direction: column;
            justify-content: space-between;
            padding: 0px 15px;
            height: 100%;
        }

        .course-card .card-body-part {
            flex-grow: 1;
        }

        .course-card .row {
            flex-direction: column;
            align-items: center;
        }

        .course-card .col-12 {
            width: 100%;
            text-align: center;
        }




        /* Title */
        .card-title {
            font-size: 20px;
            line-height: 1.4;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
        }

        button.custom-btn.btn-16 {
            margin-top: 0px !important;
        }

        .d-flex.flex-wrap.gap-1.mb-3 {
            margin-bottom: 0px !important;
        }

        /* Badges */
        .card-body .d-flex {
            justify-content: center;
            flex-wrap: wrap;
        }

        .badge {
            font-size: 11px;
            padding: 6px 10px;
            margin: 3px;
        }

        /* Mode */
        .category {
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        /* Button */
        .frame {
            text-align: center;
        }

        .frame {
            margin-left: 0px;
        }
    }



    @media (max-width: 768px) {
        .offline-btn {
            margin-bottom: 10px;
            display: block;
            /* ensures it moves above nicely */
            width: 100%;
            /* optional: full width for better mobile UI */
        }
    }



    @media (max-width: 768px) {

        /* 🔹 Make card height auto (remove extra space) */
        .course-card .card {
            min-height: 400px !important;
        }

        .course-card .card-body {
            padding: 12px !important;
        }

        /* 🔹 Compact content */
        .card-title {
            font-size: 18px;
            margin: 10px 0;
        }

        .badge {
            font-size: 11px;
            padding: 5px 8px;
        }

        /* 🔹 Button container spacing */
        .frame {
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            /* ✅ spacing between buttons */
            align-items: center;
        }

        /* 🔹 Buttons size control */
        .frame .custom-btn,
        .frame .offline-btn {
            width: 90%;
            max-width: 220px;
        }

        /* 🔹 Extra bottom spacing for Offline button */
        .offline-btn {
            margin-bottom: 8px;
        }
    }
	
	@media (max-width: 768px) {

    /* Make all cards equal height */
    .course-card {
        display: flex;
    }

    .course-card .card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }


    /* Content takes equal space */
    .course-card .card-body-part {
        flex-grow: 1;
    }

    /* FIX: Title height same for all */
    .card-title {
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* FIX: Badge area consistent */
    .card-body-part .d-flex {
       
        justify-content: center;
    }

    /* Button always at bottom */
    .frame {
        margin-top: auto; /* 🔥 KEY FIX */
        display: flex;
        justify-content: center;
    }

    /* Button same size */
    .frame .custom-btn {
        width: 90%;
        max-width: 220px;
    }

	


    /* Badge container - force wrap nicely */
    .card-body-part .d-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
        overflow: hidden;
    }

    

    /* Make badges compact */
    .badge {
        font-size: 10px !important;
        padding: 5px 8px;
        white-space: nowrap;
    }

    /* Ensure button always gets space */
    .frame {
        margin-top: auto;
        padding-top: 10px;
    }
	.card-body-part {
     height: auto; 
}
}	
	
@media