*, *::before, *::after {
    box-sizing: border-box;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  
  .container,
  .card,
  .wrapper,
  .content,
  .section,
  .box,
  .main-content,
  .page-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  table {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }
  
  @media (max-width: 768px) {
    table {
      font-size: 13px;
    }
  }
  
  @media (max-width: 768px) {
  
    h1 { font-size: 26px !important; line-height: 1.3; }
    h2 { font-size: 22px !important; line-height: 1.3; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    p, li, label, input, textarea, select, button {
      font-size: 14px !important;
    }
  
    .container,
    .wrapper,
    .main-content,
    .page-container,
    main, section, article, aside {
      padding: 16px !important;
      margin: 0 auto !important;
    }
  
    .card {
      width: 100% !important;
      margin: 10px 0 !important;
      padding: 16px !important;
    }
  
    .flex, .flex-row,
    [class*="flex-"],
    [class*="d-flex"],
    [style*="display: flex"],
    [style*="display:flex"] {
      flex-direction: column !important;
    }
  
    .grid,
    [class*="grid-"],
    [class*="col-"],
    [style*="display: grid"],
    [style*="display:grid"] {
      grid-template-columns: 1fr !important;
      width: 100% !important;
    }
  
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .sm\:grid-cols-2,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
      grid-template-columns: 1fr !important;
    }
  
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 14px !important;
    }
  
    button,
    .btn,
    [class*="btn-"],
    [class*="-btn"] {
      width: 100% !important;
      padding: 12px 16px !important;
      font-size: 14px !important;
      margin-bottom: 8px !important;
    }
  
    nav, .navbar, .nav-bar, .top-bar, header {
      padding: 12px 16px !important;
      flex-wrap: wrap !important;
    }
  
    img {
      max-width: 100% !important;
      height: auto !important;
    }
  
    .sidebar, .side-panel, aside {
      width: 100% !important;
      position: static !important;
      height: auto !important;
    }
  
    .overflow-x-auto,
    .scroll-x {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
    }
  
    .modal, .popup, .dialog,
    [class*="modal-"],
    [class*="-modal"] {
      width: 94vw !important;
      max-width: 94vw !important;
      margin: 20px auto !important;
      padding: 16px !important;
    }
  
    .roadmap-card,
    .phase-card,
    .step-card,
    .timeline-item {
      width: 100% !important;
      margin: 8px 0 !important;
    }
  
    [style*="width: 900px"],
    [style*="width: 800px"],
    [style*="width: 700px"],
    [style*="width: 600px"],
    [style*="width: 500px"],
    [style*="width:900px"],
    [style*="width:800px"],
    [style*="width:700px"],
    [style*="width:600px"],
    [style*="width:500px"] {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  
  @media (max-width: 380px) {
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 15px !important; }
  
    .container,
    .wrapper,
    main, section {
      padding: 10px !important;
    }
  }