/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /* background-color: #f9f9f9; */
  color: #333;
  line-height: 1.6;
}

/* Header */
header {
  background: #5175a2;
  color: white;
  text-align: center;
  padding: 20px 0;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  Color:#fff;
}

header p {
  margin: 5px 0 0;
  font-size: 1rem;
}

/* Navigation */
nav {
  background: #333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-size: 1rem;
  white-space: nowrap;
}

nav a:hover {
  text-decoration: underline;
}


 .hero {
      background: #d7dfea; /* Soft Pale Yellow Background */
      color: black; /* Black Text Color */
      text-align: center;
      padding: 20px 20px; /* Reduced padding for smaller height */
    }
    .hero h2 {
      font-size: 1.6rem; /* Slightly smaller font size */
      margin: 0;
    }
    .hero p {
      font-size: 1rem; /* Smaller font size */
      margin: 10px 0 20px;
    }

	 .main {
			 text-align:center;
			 margin: 0 auto;
		 }


  
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f6f8;
      margin: 0;
      padding: 40px;
      color: #333;
    }

    .container {
      max-width: 600px;
      margin: auto;
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    h1 {
      text-align: center;
      color: #2c3e50;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    label {
      margin-top: 15px;
      font-weight: bold;
    }

    input, textarea {
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    input:focus, textarea:focus {
      border-color: #2980b9;
      outline: none;
    }

    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }

    button {
      margin-top: 20px;
      padding: 12px;
      background-color: #2980b9;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #2471a3;
    }
  </style>
		
		
		
		
		
		
		
		
		/* Tools Section 
		
		
		
		.ad-banner {
				  display: flex;
				  justify-content: center;
				  padding: 20px 0;
				  Background-Color: none;

				}
			
		
		

			/* Tool Layout Wrapper (with ads on sides) 
			.tool-layout-wrapper {
			  display: flex;
			  justify-content: center;
			  align-items: flex-start;
			  gap: 20px;
			  margin: 50px auto;
			  max-width: 1280px;
			  padding: 0 20px;
			  		  
			}

			.side-ad {
				  width: 160px;
				  min-width: 160px;
				  padding: 0px;
				}
				
			*/
			
			
			
			
			
			

			/* Main Section */
			.tool-area {
			  flex-grow: 1;
			  max-width: 900px;
			}

			.main-section {
			  background-color: #fff;
			  padding: 30px 20px;
			  border-radius: 10px;
			  box-shadow: 0 0 10px rgba(0,0,0,0.05);
			  text-align: center;
			}

			.main-section h2 {
			  font-size: 1.8rem;
			  margin-bottom: 20px;
			}

			/* Upload Box */
			.upload-box {
			  background: white;
			  border: 2px dashed #007BFF;
			  border-radius: 15px;
			  padding: 40px 20px;
			  max-width: 600px;
			  margin: 0 auto 20px;
			  transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.upload-box:hover {
			  transform: translateY(-5px);
			  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			}

			.upload-box i {
			  font-size: 3.5rem;
			  color: #007BFF;
			  margin-bottom: 15px;
			}

			.upload-box p {
			  font-size: 1rem;
			  color: #555;
			  margin-bottom: 15px;
			}

			.upload-box input[type="file"] {
			  display: none;
			}

			.upload-box label {
			  background: #007BFF;
			  color: white;
			  padding: 10px 20px;
			  border-radius: 5px;
			  cursor: pointer;
			  font-size: 1rem;
			}

			.upload-box label:hover {
			  background: #0056b3;
			}

			/* Compression Percentage */
			.percentage-container {
			  margin: 20px auto;
			  max-width: 600px;
			  text-align: center;
			}

			.percentage-container input[type="number"] {
			  width: 100px;
			  padding: 5px 10px;
			  font-size: 1rem;
			  border: 1px solid #ccc;
			  border-radius: 5px;
			}

			/* Progress Bar */
			.progress-bar {
			  width: 100%;
			  max-width: 600px;
			  height: 10px;
			  margin: 20px auto;
			  background-color: #e0e0e0;
			  border-radius: 5px;
			  overflow: hidden;
			}

			.progress-bar-fill {
			  width: 0%;
			  height: 100%;
			  background-color: #007BFF;
			  transition: width 0.5s ease;
			}


			.download-btn:hover {
			  background: #218838;
			}

			.download-btn, .refresh-btn {
				  display: block;
				  margin: 10px auto;
				  padding: 10px 20px;
				  font-size: 16px;
				  color: #fff;
				  background-color: #28a745;
				  border: none;
				  border-radius: 5px;
				  cursor: pointer;
				  text-align: center;
				}
				.refresh-btn {
				  background-color: #007bff;
				}






			/* Footer */
			footer {
			  background: #333;
			  color: white;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  padding: 20px;
			  flex-wrap: wrap;
			}

			footer p {
			  margin: 0;
			  font-size: 0.9rem;
			  margin-right: 20px;
			  text-align: left;
			}

			.footer-links {
			  display: flex;
			  gap: 15px;
			  margin-left: 20px;
			}

			.footer-links a {
			  color: white;
			  text-decoration: none;
			  font-size: 0.9rem;
			}

			.footer-links a:hover {
			  text-decoration: underline;
			}

			/* Responsive */
			@media (max-width: 1024px) {
			  .tool-layout-wrapper {
				flex-direction: column;
				align-items: center;
			  }

			  .side-ad {
				display: none;
			  }

			  .tool-area {
				max-width: 100%;
			  }
			}