Update style.css

style.css

@@ -1,33 +1,90 @@
 /* General Styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 body {
-    font-family: Arial, sans-serif;
-    line-height: 1.6;
+  margin: 0;
+  font-family: Arial, sans-serif;
 }
 
-/* Navbar Styles */
+/* Navbar */
 .navbar {
-    background-color: #006400; /* Dark Green */
-    padding: 15px 50px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  background-color: #004d26;
+  color: #fff;
+  padding: 10px 20px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
 }
 
-.navbar .logo {
-    color: white;
-    font-size: 24px;
-    font-weight: bold;
+.navbar .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.navbar .greeting {
-    color: white;
-    font-size: 18px;
+.welcome-message {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+/* Headline Section */
+.headline {
+  background-color: #004d26;
+  color: #fff;
+  text-align: center;
+  padding: 40px 20px;
+  margin-top: 50px;
+}
+
+/* Converter Section */
+.converter-section {
+  background-color: #fff;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.converter-box {
+  background-color: #fff;
+  border: 2px solid #004d26;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+  width: 300px;
+}
+
+/* How to Use Section */
+.how-to-use {
+  background-color: #004d26;
+  color: #fff;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.how-to-use h2 {
+  font-weight: bold;
+}
+
+.step-box {
+  background-color: #f0f0f0;
+  color: #000;
+  padding: 20px;
+  margin: 10px auto;
+  border-radius: 10px;
+  width: 250px;
+  text-align: left;
+}
+
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .navbar .welcome-message {
+    display: none;
+  }
+
+  .converter-box,
+  .step-box {
+    width: 100%;
+  }
 }
 
 /* Headline Section */
@@ -117,14 +174,12 @@ button:hover {
 }
 
 /* Footer Section */
+./* Footer */
 .footer {
-    background-color: #808080; /* Gray */
-    color: white;
-    padding: 20px;
-    text-align: center;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
+  background-color: #ccc;
+  color: #000;
+  text-align: center;
+  padding: 10px 20px;
 }
 
 /* Responsive Design */