/* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background: var(--bg);
            color: var(--text);
            transition: background 0.3s,
            color 0.3s;
        }
        
        form input, form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
#comments {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
  white-space: pre-wrap;
}

    button{
        font-size: larger;
    }
        
        #toolList {
          display: flex; 
           flex-wrap: wrap;
         }

        h1 {
          text-align: center;  
        }
        
       input[type="text"] {
    width: 100%;
    padding: 12px;
    margin: 0px;
    font-size: 16px;
    border: 1px solid #333;
    border-radius: 10px;
   }

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .search {
      background: white;
      padding: 15px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }

    .search:hover {
      transform: scale(1.02);
    }
    
        .buttons{
            display: flex;
            justify-content: space-around;
        }

        :root {
            --bg: #ffffff;
            --text: #333;
            --card-bg: #f5f5f5;
            --header-bg: #222;
            --nav-bg: #333;
            --sidebar-bg: #f7f7f7;
        }

        body.dark {
            --bg: #121212;
            --text: #ddd;
            --card-bg: #1f1f1f;
            --header-bg: #181818;
            --nav-bg: #222;
            --sidebar-bg: #181818;
        }

        header {
            background: var(--header-bg);
            color: #ffffff;
            text-align: center;
        }

        nav {
            background: var(--nav-bg);
            display: flex;
            justify-content: space-around;
            padding: 0.5rem 1rem;
        }

        nav a {
            color: #fff;
            text-decoration: none;
           margin: 0 5px;
            font-weight: bold;
            border-left: 1px solid #ffffff;
            border-right: 1px solid #ffffff;
            border-radius: 5px;
            padding: 0 10px;
          
        }
        .h2 {
            background-color: #333;
            color: white;
            border-radius: 10px;
        }
        
        .recent-cat {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          background-color: #333;
          color: white;
          }
        
        .a-div {
          margin: 10px 0;
          padding: 5px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: center;
          justify-content: center;
        }
        
        .dark-light-toggle {
            cursor: pointer;
            font-size: 1.2rem;
        }

        .container {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
            padding: 20px;
        }

        .main-content {
            display: grid;
            grid-template-columns: repeat(auto-fit,              minmax(200px, 1fr));
            gap: 15px;
        }

        .tool-card {
            margin: 20px;
            border-bottom:1px solid black;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 5px black;
            
        }
        .main-div {
         
        }

        .tool-card a {
            text-decoration: none;
            color: var(--text);
            font-weight: bold;
            font-size: larger;
        }
        ul li{
            margin: 10px;
        }
        
        a {
         text-decoration: none;
         color: white;
         padding: 10px;
         border-radius: 10px;
        }
        .widget{
            margin: 20px;
        }

        aside {
            background: var(--sidebar-bg);
            padding: 15px;
            border-radius: 5px;
        }

        footer {
            background: var(--header-bg);
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        .search-bar input {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .widget {
            margin-bottom: 20px;
        }
        .a-div a {
         padding: 5px 5px;
         margin: 5px;
         text-decoration: none;
         color: black;
         text-align: center;
         border: 1px solid black;
         border-radius: 10px;
         width: 300px;
        }
        .pages a {
         padding: 5px;
         margin: 5px;
        }

        a:hover {
        background-color:black;
        color: white;
        border-radius: 5px;
        }
        .tool-card a:hover {
        background-color:#333;
        color: white;
        border-radius: 10px;
        }
        
        ul li {
            list-style: none;
            margin: 10px;
        }
        h3, p {
         margin: 20px;
         padding: 0px;
        }
        h2 {
         border-bottom: 1px solid black;
         border-radius: 10px;
         padding: 0 15px;
         font-size: larger;
        }
        .tools-disc h1 {
          margin: 20px 10px;
          font-size: larger;
          padding: 10px 0;
          background-color:#333;
          color: white;
          border-radius: 10px;
        }

        section {
        margin:20px;
        padding:20px;
        }
         section h3 {
        margin:20px 0px;
        padding:0px;
        }
        section p {
        margin:10px 0px;
        padding:0px;
        }
        ol {
          margin: 10px 30px;
        }
        .faq{
         margin-top:20px;
        }
        .faq h3 {
         margin: 0;
         padding: 0;
        }

        .widget h3 {
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

       
        /* Image to Base64 Converter Tool CSS */
        .tool-box {
        background: #ffffff;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 5px 10px rgb(0 0 0);
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        }
        
        #qrText, #wordCounterInput, #charCounterInput, #caseInput, #slugInput, #metaTitle, #metaDescription, #metaKeywords, #metaOutput, #densityText, #densityOutput, #robotsOption, #jsonInput, #jsonOutput, #base64Input, #base64Output, #minifyInput, #minifyOutput, #loanAmount, #interestRate, #tenure, #emiOutput, #gstAmount, #gstRate, #gstOutput, #loanPrincipal, #loanRate, #loanYears, #loanOutput, #caseOutput{
           margin: 10px;
           padding: 10px;
           width :auto;
           height: 100px;
        }
        
        .tool-box h2 {
        margin-bottom: 15px;
        font-size: 22px;
        color: #333;
        text-align: center;
        }
        
        .tool-box input[type="file"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 10px;
        display: block;
        width: 100%;
        }
        
        .tool-box button {
        padding: 10px 20px;
        background: #333;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;
        font-size: large;
        }
        
        .tool-box button:hover {
        background: #0056b3;
        }
        
        .tool-box .output {
        margin-top: 15px;
        background: #f9f9f9;
        padding: 10px;
        border: 1px solid #ccc;
        word-break: break-all;
        border-radius: 4px;
        font-family: monospace;
        max-height: 300px;
        overflow: auto;
        }
        .pages{
            border-top: 1px solid black;
            display: flex;
            justify-content: center;
            background-color: #333;
        }
        .pages a{
            color: white;
        }
        @media(max-width: 550px) {
            
            nav a {
                font-size:15px;
            }
            .tool-card{
                margin: 10px;
            }
            .main-div {
             display: flex;
             flex-direction: column;
        }
        }
        
        @media(min-width: 750px) {
            
            nav a, .pages a{
                font-size:20px ;
            }
            
        }