/* =============================================
   UNIVERSAL BOOTSTRAP RESPONSIVE OVERRIDE
   Works: 320px → 4K (3840x2160)
   ============================================= */

/* ---- ROOT FONT SCALING ---- */
html {
  font-size: clamp(12px, 1.1vw, 20px);
}

/* =============================================
   TYPOGRAPHY — h1 to h6, p, lead, small
   ============================================= */
h1, .h1 { font-size: clamp(1.6rem, 2.8vw, 4rem); line-height: 1.2; }
h2, .h2 { font-size: clamp(1.4rem, 2.2vw, 3.2rem); line-height: 1.25; }
h3, .h3 { font-size: clamp(1.2rem, 1.8vw, 2.6rem); line-height: 1.3; }
h4, .h4 { font-size: clamp(1rem, 1.5vw, 2rem); line-height: 1.35; }
h5, .h5 { font-size: clamp(0.9rem, 1.2vw, 1.6rem); line-height: 1.4; }
h6, .h6 { font-size: clamp(0.85rem, 1vw, 1.3rem); line-height: 1.4; }

p {
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  line-height: clamp(1.5, 1.8, 2);
  margin-bottom: clamp(0.5rem, 1vw, 1.5rem);
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.8rem);
  line-height: 1.6;
}

small, .small {
  font-size: clamp(0.7rem, 0.85vw, 1rem);
}

.display-1 { font-size: clamp(2.5rem, 6vw, 8rem); }
.display-2 { font-size: clamp(2.2rem, 5vw, 7rem); }
.display-3 { font-size: clamp(2rem, 4.5vw, 6rem); }
.display-4 { font-size: clamp(1.8rem, 4vw, 5rem); }
.display-5 { font-size: clamp(1.6rem, 3.5vw, 4.5rem); }
.display-6 { font-size: clamp(1.4rem, 3vw, 4rem); }

/* =============================================
   CONTAINER
   ============================================= */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: clamp(540px, 90vw, 2400px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 2vw, 60px);
  padding-right: clamp(12px, 2vw, 60px);
}

.container-fluid {
  width: 100%;
  padding-left: clamp(12px, 2vw, 60px);
  padding-right: clamp(12px, 2vw, 60px);
}

/* =============================================
   GRID — ROW & COLUMNS
   ============================================= */
.row {
  --bs-gutter-x: clamp(0.5rem, 2vw, 2.5rem);
  --bs-gutter-y: clamp(0.5rem, 1.5vw, 2rem);
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  padding-left: calc(0.5 * var(--bs-gutter-x));
  padding-right: calc(0.5 * var(--bs-gutter-x));
}

/* =============================================
   SPACING — margin & padding utilities
   ============================================= */
/* Override Bootstrap spacing scale */
:root {
  --bs-spacer: clamp(0.5rem, 1vw, 1.5rem);
}

.m-0  { margin: 0 !important; }
.m-1  { margin: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.m-2  { margin: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.m-3  { margin: clamp(0.5rem, 1vw, 1.5rem) !important; }
.m-4  { margin: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.m-5  { margin: clamp(1rem, 2.5vw, 4rem) !important; }

.mt-1 { margin-top: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.mt-2 { margin-top: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.mt-3 { margin-top: clamp(0.5rem, 1vw, 1.5rem) !important; }
.mt-4 { margin-top: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.mt-5 { margin-top: clamp(1rem, 2.5vw, 4rem) !important; }

.mb-1 { margin-bottom: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.mb-2 { margin-bottom: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.mb-3 { margin-bottom: clamp(0.5rem, 1vw, 1.5rem) !important; }
.mb-4 { margin-bottom: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.mb-5 { margin-bottom: clamp(1rem, 2.5vw, 4rem) !important; }

.ms-1 { margin-left: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.ms-2 { margin-left: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.ms-3 { margin-left: clamp(0.5rem, 1vw, 1.5rem) !important; }
.ms-4 { margin-left: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.ms-5 { margin-left: clamp(1rem, 2.5vw, 4rem) !important; }

.me-1 { margin-right: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.me-2 { margin-right: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.me-3 { margin-right: clamp(0.5rem, 1vw, 1.5rem) !important; }
.me-4 { margin-right: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.me-5 { margin-right: clamp(1rem, 2.5vw, 4rem) !important; }

.p-0  { padding: 0 !important; }
.p-1  { padding: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.p-2  { padding: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.p-3  { padding: clamp(0.5rem, 1vw, 1.5rem) !important; }
.p-4  { padding: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.p-5  { padding: clamp(1rem, 2.5vw, 4rem) !important; }

.pt-1 { padding-top: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.pt-2 { padding-top: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pt-3 { padding-top: clamp(0.5rem, 1vw, 1.5rem) !important; }
.pt-4 { padding-top: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.pt-5 { padding-top: clamp(1rem, 2.5vw, 4rem) !important; }

.pb-1 { padding-bottom: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.pb-2 { padding-bottom: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pb-3 { padding-bottom: clamp(0.5rem, 1vw, 1.5rem) !important; }
.pb-4 { padding-bottom: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.pb-5 { padding-bottom: clamp(1rem, 2.5vw, 4rem) !important; }

.ps-1 { padding-left: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.ps-2 { padding-left: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.ps-3 { padding-left: clamp(0.5rem, 1vw, 1.5rem) !important; }
.ps-4 { padding-left: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.ps-5 { padding-left: clamp(1rem, 2.5vw, 4rem) !important; }

.pe-1 { padding-right: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.pe-2 { padding-right: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pe-3 { padding-right: clamp(0.5rem, 1vw, 1.5rem) !important; }
.pe-4 { padding-right: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.pe-5 { padding-right: clamp(1rem, 2.5vw, 4rem) !important; }

/* Gap utilities */
.gap-1 { gap: clamp(0.15rem, 0.4vw, 0.5rem) !important; }
.gap-2 { gap: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.gap-3 { gap: clamp(0.5rem, 1vw, 1.5rem) !important; }
.gap-4 { gap: clamp(0.8rem, 1.5vw, 2.5rem) !important; }
.gap-5 { gap: clamp(1rem, 2.5vw, 4rem) !important; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  font-size: clamp(0.75rem, 1vw, 1.1rem);
  padding: clamp(0.3rem, 0.6vw, 0.9rem) clamp(0.6rem, 1.5vw, 2rem);
  border-radius: clamp(4px, 0.5vw, 10px);
}

.btn-sm {
  font-size: clamp(0.65rem, 0.8vw, 0.95rem);
  padding: clamp(0.2rem, 0.4vw, 0.6rem) clamp(0.4rem, 1vw, 1.2rem);
}

.btn-lg {
  font-size: clamp(0.9rem, 1.3vw, 1.5rem);
  padding: clamp(0.5rem, 0.9vw, 1.2rem) clamp(1rem, 2vw, 3rem);
}

/* =============================================
   CARD
   ============================================= */
.card {
  border-radius: clamp(6px, 0.8vw, 20px);
}

.card-body {
  padding: clamp(0.8rem, 1.5vw, 2.5rem);
}

.card-title {
  font-size: clamp(0.9rem, 1.3vw, 1.8rem);
  margin-bottom: clamp(0.3rem, 0.6vw, 1rem);
}

.card-text {
  font-size: clamp(0.78rem, 0.95vw, 1.15rem);
}

.card-header,
.card-footer {
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1.5vw, 2.5rem);
  font-size: clamp(0.8rem, 1vw, 1.2rem);
}

.card-img-top {
  border-radius: clamp(6px, 0.8vw, 20px) clamp(6px, 0.8vw, 20px) 0 0;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  padding: clamp(0.4rem, 0.8vw, 1.2rem) clamp(0.8rem, 2vw, 3rem);
}

.navbar-brand {
  font-size: clamp(1rem, 1.5vw, 2rem);
}

.navbar-brand img {
  height: clamp(30px, 4vw, 80px);
  width: auto;
}

.nav-link {
  font-size: clamp(0.78rem, 0.95vw, 1.2rem);
  padding: clamp(0.2rem, 0.4vw, 0.6rem) clamp(0.4rem, 0.8vw, 1.2rem) !important;
}

.navbar-toggler {
  padding: clamp(0.2rem, 0.4vw, 0.6rem) clamp(0.4rem, 0.8vw, 1rem);
}

/* =============================================
   FORMS
   ============================================= */
.form-control,
.form-select {
  font-size: clamp(0.78rem, 1vw, 1.1rem);
  padding: clamp(0.3rem, 0.6vw, 0.9rem) clamp(0.5rem, 1vw, 1.2rem);
  border-radius: clamp(4px, 0.5vw, 10px);
  height: auto;
}

.form-label {
  font-size: clamp(0.78rem, 0.95vw, 1.1rem);
  margin-bottom: clamp(0.2rem, 0.4vw, 0.6rem);
}

.form-text {
  font-size: clamp(0.7rem, 0.8vw, 1rem);
}

.form-check-label {
  font-size: clamp(0.78rem, 0.95vw, 1.1rem);
}

.input-group-text {
  font-size: clamp(0.78rem, 1vw, 1.1rem);
  padding: clamp(0.3rem, 0.6vw, 0.9rem) clamp(0.5rem, 1vw, 1.2rem);
}

/* =============================================
   TABLE
   ============================================= */
.table {
  font-size: clamp(0.72rem, 0.95vw, 1.1rem);
}

.table th,
.table td {
  padding: clamp(0.3rem, 0.7vw, 1.2rem) clamp(0.4rem, 0.8vw, 1.5rem);
}

.table thead th {
  font-size: clamp(0.72rem, 0.9vw, 1.1rem);
}

/* =============================================
   MODAL
   ============================================= */
.modal-dialog {
  max-width: clamp(300px, 50vw, 900px);
}

.modal-content {
  border-radius: clamp(6px, 0.8vw, 20px);
}

.modal-header,
.modal-footer {
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1.5vw, 2rem);
}

.modal-body {
  padding: clamp(0.8rem, 1.5vw, 2.5rem);
}

.modal-title {
  font-size: clamp(0.9rem, 1.3vw, 1.8rem);
}

/* =============================================
   BADGE
   ============================================= */
.badge {
  font-size: clamp(0.6rem, 0.8vw, 1rem);
  padding: clamp(0.2rem, 0.4vw, 0.6rem) clamp(0.3rem, 0.6vw, 0.9rem);
  border-radius: clamp(3px, 0.4vw, 8px);
}

/* =============================================
   ALERT
   ============================================= */
.alert {
  font-size: clamp(0.78rem, 1vw, 1.1rem);
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1.5vw, 2rem);
  border-radius: clamp(4px, 0.6vw, 12px);
}

/* =============================================
   LIST GROUP
   ============================================= */
.list-group-item {
  font-size: clamp(0.78rem, 1vw, 1.1rem);
  padding: clamp(0.4rem, 0.8vw, 1.2rem) clamp(0.6rem, 1.2vw, 2rem);
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  font-size: clamp(0.72rem, 0.9vw, 1.1rem);
}

.breadcrumb-item + .breadcrumb-item::before {
  font-size: clamp(0.72rem, 0.9vw, 1.1rem);
}

/* =============================================
   PAGINATION
   ============================================= */
.page-link {
  font-size: clamp(0.72rem, 0.95vw, 1.1rem);
  padding: clamp(0.2rem, 0.5vw, 0.8rem) clamp(0.4rem, 0.8vw, 1.2rem);
}

/* =============================================
   DROPDOWN
   ============================================= */
.dropdown-menu {
  font-size: clamp(0.78rem, 0.95vw, 1.1rem);
  border-radius: clamp(4px, 0.6vw, 12px);
  padding: clamp(0.2rem, 0.4vw, 0.6rem) 0;
  min-width: clamp(120px, 12vw, 280px);
}

.dropdown-item {
  font-size: clamp(0.78rem, 0.95vw, 1.1rem);
  padding: clamp(0.3rem, 0.5vw, 0.8rem) clamp(0.8rem, 1.5vw, 2rem);
}

.dropdown-header {
  font-size: clamp(0.7rem, 0.85vw, 1rem);
  padding: clamp(0.3rem, 0.5vw, 0.8rem) clamp(0.8rem, 1.5vw, 2rem);
}

/* =============================================
   TABS & PILLS
   ============================================= */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: clamp(0.78rem, 0.95vw, 1.2rem);
  padding: clamp(0.3rem, 0.6vw, 0.9rem) clamp(0.6rem, 1.2vw, 1.8rem);
  border-radius: clamp(4px, 0.5vw, 10px);
}

/* =============================================
   ACCORDION
   ============================================= */
.accordion-button {
  font-size: clamp(0.82rem, 1.1vw, 1.3rem);
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1.5vw, 2rem);
}

.accordion-body {
  font-size: clamp(0.78rem, 1vw, 1.15rem);
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1.5vw, 2rem);
}

/* =============================================
   IMAGES
   ============================================= */
img {
  max-width: 100%;
  height: auto;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: clamp(2px, 0.3vw, 6px);
  border-radius: clamp(4px, 0.5vw, 10px);
}

/* =============================================
   ICONS (font-awesome / bootstrap-icons)
   ============================================= */
.bi, [class^="bi-"] {
  font-size: clamp(0.9rem, 1.2vw, 1.8rem);
}

.fa, .fas, .far, .fab, [class^="fa-"] {
  font-size: clamp(0.9rem, 1.2vw, 1.8rem);
}

/* =============================================
   SECTION GENERAL
   ============================================= */
/* section {
  padding: clamp(30px, 5vw, 120px) 0;
} */

/* =============================================
   MEDIA QUERIES — Breakpoint overrides
   ============================================= */

/* Mobile — 320px to 575px */
@media (max-width: 575px) {
  html { font-size: 13px; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.4rem; }
  h3, .h3 { font-size: 1.2rem; }
  p { font-size: 0.88rem; }
  .btn { font-size: 0.82rem; }
  /* section { padding: 30px 0; } */
}

/* Tablet — 576px to 991px */
@media (min-width: 576px) and (max-width: 991px) {
  html { font-size: 14px; }
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.7rem; }
  h3, .h3 { font-size: 1.4rem; }
  p { font-size: 0.95rem; }
  /* section { padding: 50px 0; } */
}

/* Laptop — 992px to 1399px */
@media (min-width: 992px) and (max-width: 1399px) {
  html { font-size: 15px; }
  .container { max-width: 1200px; }
}

/* Full HD — 1400px to 1919px */
@media (min-width: 1400px) and (max-width: 1919px) {
  html { font-size: 16px; }
  .container { max-width: 1400px; }
}

/* 2K — 1920px to 2559px */
@media (min-width: 1920px) and (max-width: 2559px) {
  html { font-size: 17px; }
  .container { max-width: 1800px; }
  h1, .h1 { font-size: 3rem; }
  h2, .h2 { font-size: 2.5rem; }
  h3, .h3 { font-size: 2rem; }
  p { font-size: 1.1rem; }
  .btn { font-size: 1rem; }
  .nav-link { font-size: 1rem; }
  .card-body { padding: 2rem; }
  .table { font-size: 1rem; }
  /* section { padding: 80px 0; } */
}

/* QHD — 2560px to 3839px */
@media (min-width: 2560px) and (max-width: 3839px) {
  html { font-size: 19px; }
  .container { max-width: 2200px; }
  h1, .h1 { font-size: 3.5rem; }
  h2, .h2 { font-size: 3rem; }
  h3, .h3 { font-size: 2.4rem; }
  h4, .h4 { font-size: 2rem; }
  p { font-size: 1.2rem; }
  .btn { font-size: 1.1rem; padding: 0.7rem 2rem; }
  .nav-link { font-size: 1.1rem; }
  .card-body { padding: 2.5rem; }
  .table { font-size: 1.1rem; }
  .form-control, .form-select { font-size: 1.1rem; }
  .modal-dialog { max-width: 700px; }
  /* section { padding: 100px 0; } */
  .navbar { padding: 1rem 3rem; }
}

/* 4K — 3840px and above */
@media (min-width: 3840px) {
  html { font-size: 22px; }
  .container { max-width: 3000px; }
  h1, .h1 { font-size: 4.5rem; }
  h2, .h2 { font-size: 3.8rem; }
  h3, .h3 { font-size: 3rem; }
  h4, .h4 { font-size: 2.5rem; }
  h5, .h5 { font-size: 2rem; }
  h6, .h6 { font-size: 1.6rem; }
  p { font-size: 1.4rem; line-height: 1.9; }
  .lead { font-size: 2rem; }
  .btn { font-size: 1.3rem; padding: 1rem 2.5rem; }
  .btn-sm { font-size: 1rem; }
  .btn-lg { font-size: 1.6rem; padding: 1.2rem 3.5rem; }
  .nav-link { font-size: 1.3rem; }
  .navbar-brand { font-size: 2.2rem; }
  .navbar-brand img { height: 80px; }
  .card-body { padding: 3rem; }
  .card-title { font-size: 2rem; }
  .card-text { font-size: 1.3rem; }
  .table { font-size: 1.3rem; }
  .table th, .table td { padding: 1.2rem 1.5rem; }
  .form-control, .form-select { font-size: 1.3rem; padding: 0.9rem 1.2rem; }
  .form-label { font-size: 1.2rem; }
  .input-group-text { font-size: 1.2rem; }
  .modal-dialog { max-width: 1000px; }
  .modal-title { font-size: 2rem; }
  .dropdown-menu { font-size: 1.2rem; min-width: 280px; }
  .dropdown-item { font-size: 1.2rem; padding: 0.7rem 2rem; }
  .badge { font-size: 1rem; padding: 0.5rem 0.9rem; }
  .alert { font-size: 1.2rem; padding: 1.2rem 2rem; }
  .list-group-item { font-size: 1.2rem; padding: 1rem 2rem; }
  .page-link { font-size: 1.1rem; padding: 0.7rem 1.2rem; }
  .breadcrumb { font-size: 1.1rem; }
  .accordion-button { font-size: 1.4rem; padding: 1.2rem 2rem; }
  .accordion-body { font-size: 1.2rem; }
  .nav-tabs .nav-link, .nav-pills .nav-link { font-size: 1.3rem; }
  .bi, [class^="bi-"], .fa, .fas, .far, .fab { font-size: 1.6rem; }
  /* section { padding: 120px 0; } */
  .navbar { padding: 1.2rem 4rem; }
  .row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2rem; }
}