body,
      html {
          overflow-x: hidden;
      }

      .tool-container {
          margin-top: 80px;
          display: grid;
          grid-template-columns: 250px 1fr 300px;
          gap: 2rem;
          max-width: 1400px;
          margin: 80px auto 0;
          padding: 2rem;
      }

      .left-sidebar {
          background: white;
          padding: 1.5rem;
          border-radius: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          max-height: 800px;
          /* adjust height as needed */
          overflow-y: auto;
          /* enables scrolling if items overflow */

      }

      .right-sidebar {
          background: white;
          padding: 1.5rem;
          border-radius: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          max-height: 800px;
          /* adjust height as needed */
          overflow-y: auto;
          /* enables scrolling if items overflow */

      }

      .left-sidebar h3 {
          margin-bottom: 1rem;
          color: #1f2937;
      }

      .left-sidebar ul {
          list-style: none;
      }

      .left-sidebar ul li {
          margin-bottom: 0.8rem;
      }

      .left-sidebar ul li a {
          color: #1d4ed8;
          text-decoration: none;
          transition: color 0.3s;
      }

      .left-sidebar ul li a:hover {
          color: #2563eb;
      }


      @media (max-width: 430px) {

          /* Prevent any element from causing horizontal scroll */
          body,
          html {
              overflow-x: hidden;
              width: 100%;
          }

          .tool-container {
              grid-template-columns: 1fr;
              gap: 1rem;
              padding: 1rem;
              margin: 60px auto 0;
              max-width: 100%;
          }

          .calculator-content,
          .calculator-box,
          .calculator-article {
              padding: 1rem !important;
              border-radius: 8px;
          }

          .input-group input {
              font-size: 0.95rem;
              padding: 0.6rem 0.8rem;
          }

          .calculate-btn {
              font-size: 1rem;
              padding: 0.7rem 1.5rem;
              width: 100%;
          }

          .calculator-article h2 {
              font-size: 1.3rem;
          }

          .left-sidebar,
          .right-sidebar {
              display: none !important;
          }

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

          .calculator-article {
              padding: 1.5rem !important;
          }

          .calculator-article ul {
              padding: 1rem !important;
              margin: 1rem 0 !important;
          }

          .calculator-article ul li {
              padding-left: 1.5rem !important;
              font-size: 1rem !important;
          }

          .calculator-article h2 {
              font-size: 1.5rem !important;
              margin: 1.5rem 0 1rem 0 !important;
          }

          .calculator-article h3 {
              font-size: 1.25rem !important;
              margin: 1rem 0 0.75rem 0 !important;
          }

          .calculator-article p {
              font-size: 1rem !important;
          }

      }


      @media (max-width: 1200px) {
          .tool-container {
              grid-template-columns: 200px 1fr 250px;
              padding: 1.5rem;
              gap: 1.5rem;
          }
      }

      @media (max-width: 992px) {
          .tool-container {
              grid-template-columns: 1fr;
          }

          .left-sidebar,
          .right-sidebar {
              display: none;
          }
      }

      @media (max-width: 768px) {
          .calculator-box {
              padding: 1rem;
          }

          .calculator-content {
              padding: 1rem;
          }

          .calculator-article {
              padding: 1rem;
          }
      }

      .calculator-content {
          background: white;
          padding: 2rem;
          border-radius: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .calculator-box {
          background: #f8fafc;
          padding: 2rem;
          border-radius: 8px;
          margin-bottom: 2rem;
      }

      .input-group {
          margin-bottom: 1.5rem;
      }

      .input-group label {
          display: block;
          margin-bottom: 0.5rem;
          color: #4b5563;
          font-weight: 500;
      }

      .input-group input {
          width: 100%;
          padding: 0.8rem;
          border: 1px solid #e5e7eb;
          border-radius: 5px;
          font-size: 1rem;
      }

      .calculate-btn {
          background: #2563eb;
          color: white;
          padding: 0.8rem 2rem;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 1rem;
          transition: background 0.3s;
      }

      .calculate-btn:hover {
          background: #1e40af;
      }

      .result {
          margin-top: 1.5rem;
          padding: 1rem;
          background: #f3f4f6;
          border-radius: 5px;
          display: none;
      }

      .calculator-article {
          margin-top: 3rem;
          padding: 3rem;
          background: white;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          line-height: 1.8;
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          color: #374151;
          max-width: 100%;
          overflow-wrap: break-word;
      }

      /* Main headings */
      .calculator-article h2 {
          color: #111827;
          margin: 2.5rem 0 1.5rem 0;
          font-size: 1.875rem;
          font-weight: 700;
          border-bottom: 3px solid #3b82f6;
          padding-bottom: 0.75rem;
          position: relative;
      }

      .calculator-article h2:first-child {
          margin-top: 0;
      }

      .calculator-article h2::before {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 0;
          width: 60px;
          height: 3px;
          background: #1d4ed8;
          border-radius: 2px;
      }

      /* Sub headings */
      .calculator-article h3 {
          color: #1f2937;
          margin: 2rem 0 1rem 0;
          font-size: 1.5rem;
          font-weight: 600;
          position: relative;
          padding-left: 1rem;
      }

      .calculator-article h3::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 1.5rem;
          background: #3b82f6;
          border-radius: 2px;
      }

      /* Paragraphs */
      .calculator-article p {
          margin-bottom: 1.5rem;
          text-align: justify;
          color: #4b5563;
          font-size: 1.1rem;
          line-height: 1.8;
      }

      /* Lists - Professional styling */
      .calculator-article ul {
          margin: 1.5rem 0 2rem 0;
          padding-left: 0;
          list-style: none;
          background: #f8fafc;
          border-radius: 8px;
          padding: 1.5rem;
          border-left: 4px solid #3b82f6;
      }

      .calculator-article ul li {
          margin-bottom: 1rem;
          padding-left: 2rem;
          position: relative;
          color: #374151;
          font-size: 1.05rem;
          line-height: 1.7;
      }

      .calculator-article ul li:last-child {
          margin-bottom: 0;
      }

      /* Custom bullet points */
      .calculator-article ul li::before {
          content: '▶';
          position: absolute;
          left: 0;
          top: 0;
          color: #3b82f6;
          font-size: 0.9rem;
          font-weight: 600;
      }

      /* Ordered lists - Use natural numbering without custom bullets */
      .calculator-article ol {
          margin: 1.5rem 0 2rem 0;
          background: #fefbf3;
          border-radius: 8px;
          padding: 1.5rem 1.5rem 1.5rem 3rem;
          border-left: 4px solid #f59e0b;
          list-style-type: decimal;
          list-style-position: outside;
      }

      .calculator-article ol li {
          margin-bottom: 1rem;
          padding-left: 0.5rem;
          color: #374151;
          font-size: 1.05rem;
          line-height: 1.7;
      }

      .calculator-article ol li:last-child {
          margin-bottom: 0;
      }

      .calculator-article ol li::marker {
          color: #f59e0b;
          font-weight: 700;
      }

      /* Strong/Bold text */
      .calculator-article strong {
          color: #1f2937;
          font-weight: 700;
      }

      /* Code-like elements */
      .calculator-article code {
          background: #f3f4f6;
          padding: 0.2rem 0.5rem;
          border-radius: 4px;
          font-family: 'Monaco', 'Menlo', monospace;
          font-size: 0.9rem;
          color: #dc2626;
      }

      /* Emphasis blocks */
      .calculator-article blockquote {
          margin: 2rem 0;
          padding: 1.5rem;
          background: #eff6ff;
          border-left: 4px solid #3b82f6;
          border-radius: 0 8px 8px 0;
          font-style: italic;
          color: #1e40af;
      }

      /* Tables if any */
      .calculator-article table {
          width: 100%;
          border-collapse: collapse;
          margin: 2rem 0;
          background: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .calculator-article th,
      .calculator-article td {
          padding: 0.75rem 1rem;
          text-align: left;
          border-bottom: 1px solid #e5e7eb;
      }

      .calculator-article th {
          background: #f9fafb;
          font-weight: 600;
          color: #374151;
      }

      /* Links within articles */
      .calculator-article a {
          color: #3b82f6;
          text-decoration: underline;
          transition: color 0.2s ease;
      }

      .calculator-article a:hover {
          color: #1d4ed8;
      }

      /* Highlight boxes for important information */
      .calculator-article .highlight {
          background: #fef3c7;
          border: 1px solid #f59e0b;
          border-radius: 8px;
          padding: 1rem;
          margin: 1.5rem 0;
      }

      .calculator-article .highlight p {
          margin-bottom: 0;
          color: #92400e;
      }