/* ==================== RESPONSIVE MOBILE (max-width: 991.98px) ==================== */
@media (max-width: 991.98px) {
  /* ==================== TYPOGRAPHY - HEADINGS ==================== */
  .h-mobile-xl {
    font-size: 4rem;
  }

  .h-mobile-lg {
    font-size: 3.45rem;
  }

  .h-mobile-md {
    font-size: 3rem;
  }

  .h-mobile-sm {
    font-size: 2.2rem;
  }

  /* ==================== TYPOGRAPHY - TEXT ==================== */
  .text-mobile-xl {
    font-size: 2rem;
  }

  .text-mobile-lg {
    font-size: 1.85rem;
  }

  .text-mobile-md {
    font-size: 1.6rem;
  }

  .text-mobile-sm {
    font-size: 1.4rem;
  }

  .text-mobile-xs {
    font-size: 1.2rem;
  }

  /* ==================== TYPOGRAPHY - INPUT & LABELS ==================== */
  .text-mobile-input {
    font-size: 1.3rem;
  }

  /* ==================== IMAGE SIZING ==================== */
  .img-mobile-xl {
    width: 250px;
    height: 250px;
  }

  .img-mobile-lg {
    width: 160px;
    height: 120px;
  }

  .img-mobile-md {
    width: 120px;
    height: 120px;
  }

  .img-mobile-sm {
    width: 65px;
    height: 65px;
  }

  /* ==================== HEIGHT UTILITIES ==================== */
  .height-mobile-xl {
    height: 400px;
  }

  .height-mobile-lg {
    height: 300px;
  }

  /* ==================== POSITIONING - TOP OFFSET ==================== */
  .top-mobile-xl {
    top: -180px;
  }

  .top-mobile-md {
    top: -120px;
  }

  /* ==================== PADDING & SPACING - BUTTONS ==================== */
  .pad-mobile-btn-lg {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
  }

  .pad-mobile-btn-md {
    padding: 0.45rem 0.95rem;
    border-radius: 0.25rem;
  }

  /* ==================== PADDING & SPACING - FORMS ==================== */
  .pad-mobile-form-lg {
    padding: 0.875rem 0.75rem;
  }

  .pad-mobile-form-md {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
  }

  /* ==================== BADGE SCALING ==================== */
  .badge-mobile-md {
    font-size: 1.75rem;
    padding: 0.35rem 0.85rem;
  }

  .badge-mobile-sm {
    font-size: 1.25rem;
    padding: 0.35rem 0.85rem;
  }

  /* ==================== FORM CONTROLS ==================== */
  .form-control-mobile {
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
  }

  input[type="search"].mobile-search {
    font-size: 1.3rem;
    padding: 0.875rem 0.75rem;
  }

  /* ==================== BUTTONS ==================== */
  .btn-mobile-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
  }

  .btn-mobile-md {
    padding: 0.45rem 0.95rem;
    font-size: 1.85rem;
    border-radius: 0.55rem;
  }

  .btn-mobile-sm {
    padding: 0.45rem 0.95rem;
    font-size: 1.55rem;
    border-radius: 0.55rem;
  }

  /* ==================== CARD STYLING ==================== */
  .card-title-mobile {
    font-size: 2.2rem;
  }

  .card-text-mobile {
    font-size: 1.75rem;
  }

  .card-subtitle-mobile {
    font-size: 1.2rem;
  }

  /* ==================== NAVIGATION TABS ==================== */
  .nav-tabs-mobile .nav-link,
  .tabs-mobile .nav-link {
    font-size: 1.25rem;
    padding: 0.75rem 1.25rem;
  }

  /* ==================== PAGINATION ==================== */
  .pagination-mobile {
    --bs-pagination-padding-x: 1.5rem;
    --bs-pagination-padding-y: 0.75rem;
    --bs-pagination-font-size: 1.25rem;
    --bs-pagination-border-radius: 0.5rem;
  }

  /* ==================== OFFCANVAS & NAVIGATION ==================== */
  .offcanvas-title-mobile,
  button[data-bs-toggle="offcanvas"] {
    font-size: 1.85rem;
  }

  .offcanvas-menu-item-mobile,
  .dropdown-item-mobile,
  .navbar-brand-mobile {
    font-size: 1.6rem;
  }

  /* ==================== MODAL DIALOG ==================== */
  .modal-title-mobile {
    font-size: 2.2rem;
  }

  /* ==================== CLOSE BUTTONS ==================== */
  .btn-close-mobile {
    font-size: 1.4rem;
  }
}
/* ==================== END RESPONSIVE MOBILE ==================== */