#page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 12px;
}

/* -------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------- */
.page-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #64748b;
}

.post-title {
  font-size: 18px;
  font-weight: 700;
  margin: 8px 0;
}

.post-excerpt {
  color: #475569;
  margin-bottom: 12px;
}

/* -------------------------------------------------------
   COLOR SYSTEM (Tailwind-like)
------------------------------------------------------- */
.text-primary {
  color:#848484;
}

.btn-primary {
  background: rgb(19 91 236 / var(--tw-bg-opacity, 1));
  border-color: rgb(19 91 236 / var(--tw-bg-opacity, 1));
}
.btn-primary:hover,
.btn-primary:focus {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

.btn-default {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
  margin-top:5px;
  margin-bottom:5px
}
.btn-default:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* -------------------------------------------------------
   SPACING SCALE (Tailwind-like)
   (Only the needed utilities)
------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 20px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

.p-4 { padding: 16px !important; }
.p-5 { padding: 20px !important; }

/* -------------------------------------------------------
   RADIUS + SHADOW (Tailwind-like)
------------------------------------------------------- */
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.shadow-md {
  box-shadow: 0 4px 6px rgba(0,0,0,.08);
}
.shadow-lg {
  box-shadow: 0 10px 15px rgba(0,0,0,.10);
}

/* hover shadow used on cards */
.card-custom:hover {
  box-shadow: 0px 12px 26px -2px rgba(0,0,0,.15);
  transform: translateY(-3px);
}

/* -------------------------------------------------------
   SEARCH BAR
------------------------------------------------------- */
.search-wrapper {
  position: relative;
}

#search-input {
  padding-left: 38px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}

#search-input:focus {
  border-color: rgb(19 91 236 / var(--tw-bg-opacity, 1));
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}

.search-wrapper::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 7px;
  font-size: 18px;
  opacity: .6;
}

/* -------------------------------------------------------
   FILTER CHIPS
------------------------------------------------------- */
.filter-chip {
  padding: 8px 9px;
  border: 1px solid #dbe1e8;
  background: rgb(203 213 225 / 0.8);
  color: #475569;
  transition: .2s all ease;
  margin-right: 4px;
    border-radius: 10px;
}

.filter-chip:hover {
  background: #e2e8f0;
}
.btn-group > .filter-chip:last-child {
  background: rgb(19 91 236 / var(--tw-bg-opacity, 1)) !important;
  border-color: rgb(19 91 236 / var(--tw-bg-opacity, 1)) !important;
  color: #fff !important;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 10px !important}
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 10px !important}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius: 10px !important}
.btn-default{font-weight: bold; padding: 6px 12px;background: #fff !important;}
.btn-default:hover{background: #ccc !important}
.btn-group-vertical > .btn, .btn-group > .btn{float: right}
/* -------------------------------------------------------
   CARD STYLING
------------------------------------------------------- */
.card-custom {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0 !important;
  transition: .25s ease;
  background: #fff;
}

.panel-image {
  width: 100%;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 180px;
  border-bottom: 1px solid #e2e8f0;
}

.panel-body {
  padding: 16px !important;
}

.read-more {
  color:black;
  font-weight: 600;
    margin-top: 10px
}
.read-more:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------
   ASPECT RATIO
------------------------------------------------------- */
.aspect-w-16 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.aspect-w-16 > * {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------
   PAGINATION
------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  border-radius: 8px !important;
  margin: 0 3px;
  border-color: #cbd5e1;
  color: #475569;
}

.pagination > .active > a,
.pagination > .active > span {
  background: rgb(19 91 236 / var(--tw-bg-opacity, 1)) !important;
  border-color: rgb(19 91 236 / var(--tw-bg-opacity, 1)) !important;
  color: #fff !important;
}

/* -------------------------------------------------------
   SIDEBAR BOXES
------------------------------------------------------- */
.sidebar-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.sidebar-icon {
  font-size: 32px;
  margin-right: 12px;
}

/* -------------------------------------------------------
   DARK MODE (optional, inactive)
------------------------------------------------------- */
.dark {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

.dark .card-custom {
  background: #1e293b !important;
  border-color: #334155 !important;
}
.dark #search-input {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}
.dark .sidebar-box {
  background: #1e293b;
  border-color: #334155;
}
.dark .btn-default {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}