body {
   font-family: 'Open Sans', sans-serif;
   margin: 0;
   padding: 0;
   background-color: #F7592B;
}

.container {
   max-width: 900px;
   margin: 0 auto;
   padding: 20px;
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(5px);
   border-radius: 10px;
}

h1 {
   font-family: 'Poppins', sans-serif;
   text-align: center;
   font-size: 2.5em;
   margin-bottom: 20px;
   color: #333;
}

form {
   margin-bottom: 20px;
}

textarea {
   width: 98%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 16px;
   font-family: 'Open Sans', sans-serif;
   outline: none;
   transition: border-color 0.3s;
}

textarea:focus {
   border-color: #007BFF;
}

button {
   display: block;
   width: 100%;
   margin-top: 20px;
   background-color: #FD562A;
   color: #fff;
   border-radius: 6px;
   font-size: 18px;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   text-transform: uppercase;
   padding: 10px 20px;
   cursor: pointer;
   border: none;
   transition: background-color 0.3s;
}

button:hover {
   background-color: #BF2902;
}

.result {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
   margin-top: 20px;
}
.status-pass {
   color: green;
   font-weight: 700;
}
.status-fail {
   color: red;
   font-weight: 700;
}
.counter-card {
   flex: 1;
   max-width: 150px;
   padding: 20px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 6px;
   background-color: #f9f9f9;
}

.counter-card h4 {
   margin-top: 0;
   font-size: 1.2em;
   color: #555;
}

.counter-card p {
   font-size: 32px;
   margin-bottom: 0;
   font-weight: bold;
   color: #333;
}

.table-container {
   overflow-x: auto;

}

table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px 0;
   font-size: 1em;
   min-width: 400px;
}

table th, table td {
   padding: 12px 15px;
   border: 1px solid #ddd;
   text-align: left;
}

table th {
   font-weight: bold;
   background-color: #f2f2f2;
}

table td {
   font-size: 1em;
}



        .table-container::-webkit-scrollbar {
         height: 8px;
     }

     .table-container::-webkit-scrollbar-thumb {
         background-color: #888;
         border-radius: 10px;
     }

     .table-container::-webkit-scrollbar-track {
         background-color: #f1f1f1;
     }

     

@media (max-width: 769px) {
   .counter-card {
       max-width: 100%;
       margin-bottom: 20px;
   }

   table th, table td {
       font-size: 0.8em;
   }
}