body {
      /* background: linear-gradient(120deg, #d6d6d6, #ffffff); */
      font-family: 'Segoe UI', sans-serif;
    }

    textarea {
      font-family: monospace;
      height: 200px;
      resize: vertical;
    }

    footer {
      color: #fff;
      text-align: center;
      padding: 1rem;
      /* margin-top: 4rem; */
    }

    #ads {
      height: 250px;
      background: #f0f0f0;
      border: 1px dashed #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: #666;
    }

    textarea.form-control {
    font-family: 'Fira Code', monospace;
    font-size: 15px;
    color: #212529;
    background-color: #fefefe;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 1rem;
    line-height: 1.4;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  }

  textarea.form-control:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    background-color: #fff;
    outline: none;
  }

  textarea.form-control:hover {
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    background-color: #fff;
    outline: none;
  }

  /* Style the select box */
  .form-select {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 0.2s ease-in-out;
  }

  /* Style the select box on hover */
  .form-select:hover {
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    background-color: #fff;
    outline: none;
  }

  /* Style the select box on focus */
  .form-select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    background-color: #fff;
    outline: none;
  }

  /* Chromium workaround via focus-visible (not perfect but helps) */
  .form-select:focus option:checked {
    background-color: #000;
    color: #fff;
  }

  .form-select option:hover {
      background-color: #000 !important;
      color: #fff !important;
  }

  .bg-dark2 {
    background-color: rgb(0 0 0) !important;
  }

    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
            url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1600&q=80') center center/cover no-repeat;
        color: white;
        padding: 100px 0;
        height: 80vh;
    }

    .pattern-bg {
        background-image: url('https://www.transparenttextures.com/patterns/cartographer.png');
        background-color: #f0f0f0;
    }

    .pattern-bg2 {
        background-image: url('https://www.transparenttextures.com/patterns/p2.png');
        background-color: #2e2e48;
    }

    .features-list {
        padding-left: 0;
    }

    .features-list li {
        list-style: none;
        margin-bottom: 15px;
        font-size: 1.05rem;
    }

    .features-list i {
        color: #2e2e48;
        margin-right: 10px;
    }

    .why-section {
        background-color: #f9fbfd;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 60px 0;
    }

    .why-section h2 {
        font-weight: 700;
    }

    .why-section ul {
        padding-left: 0;
    }

    .why-section li {
        list-style: none;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    .why-section li i {
        color: #2e2e48;
        margin-right: 10px;
    }

    .why-section img {
        border-radius: 10px;
        max-height: 400px;
        object-fit: cover;
    }

    .tool-section {
        background: linear-gradient(to right, #1e1e2f, #2e2e48);
        padding: 60px 0;
        color: #fff;
    }

    .tool-card {
        border: none;
        border-radius: 8px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .tool-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    .tool-card .card-body {
        flex-grow: 1;
    }

    .tool-card p {
        min-height: 60px;
    }

    form .form-control {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s;
    }

    form .form-control:focus {
        border-color: #343a40;
    }