diff --git a/css/bmi.css b/css/bmi.css
deleted file mode 100644
index 640a0fb..0000000
--- a/css/bmi.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/* BMI Calculator Container */
-.bmi-container {
-    max-width: 600px;
-    margin: 60px auto;
-    padding: 40px;
-    background-color: #333; /* Dark gray background */
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.bmi-container h2 {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #f7f7f7;
-}
-
-.bmi-container p {
-    font-size: 16px;
-    color: #f7f7f7;
-    margin-bottom: 30px;
-}
-
-/* BMI Form Styles */
-.bmi-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.bmi-form label {
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-.label {
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-.bmi-form input,
-.bmi-form textarea {
-    padding: 10px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444; /* Dark gray input background */
-    color: #f0f0f0; /* Light text */
-}
-
-.bmi-form input:focus,
-.bmi-form textarea:focus {
-    outline: none;
-    background-color: #555; /* Slightly lighter on focus */
-}
-
-textarea {
-    resize: none;
- }
-/* Calculate Button */
-.bmi-form button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444; /* Dark button */
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.bmi-form button:hover {
-    background-color: #666; /* Lighter on hover */
-}
-
-/* Result Display */
-#result {
-    font-size: 16px;
-    color: #f7f7f7;
-    margin-top: 20px;
-}
-
-#bmi {
-    font-size: 16px;
-    padding: 8px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444;
-    color: #f0f0f0;
-}
-
-/* Text Area for Expert Advice */
-#expert-opinion {
-    width: 100%;
-    font-size: 16px;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444;
-    color: #f0f0f0;
-}
-
-/* Print and Reload Buttons */
-.bmi-container button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444;
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    margin: 10px;
-}
-
-.bmi-container button:hover {
-    background-color: #666;
-}
diff --git a/css/bmr.css b/css/bmr.css
deleted file mode 100644
index 1281de6..0000000
--- a/css/bmr.css
+++ /dev/null
@@ -1,137 +0,0 @@
-
-
-/* BMR Calculator Container */
-.bmr-container {
-    max-width: 600px;
-    margin: 60px auto;
-    padding: 40px;
-    background-color: #333; /* Dark gray background */
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.bmr-container h2 {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #f7f7f7;
-}
-
-.bmr-container p {
-    font-size: 16px;
-    color: #f7f7f7;
-    margin-bottom: 30px;
-}
-
-/* BMR Form Styles */
-#bmr-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-#bmr-form label {
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-#bmr-form input,
-#bmr-form select {
-    padding: 10px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444; /* Dark gray input background */
-    color: #f0f0f0; /* Light text */
-}
-
-#bmr-form input:focus,
-#bmr-form select:focus {
-    outline: none;
-    background-color: #555; /* Slightly lighter on focus */
-}
-
-/* Calculate Button */
-button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444; /* Dark button */
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-button:hover {
-    background-color: #666; /* Lighter on hover */
-}
-
-/* Result Display */
-.result {
-    margin-top: 30px;
-    font-size: 20px;
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-/* Footer */
-footer {
-    background-color: white;
-    color: black;
-    padding: 40px 20px;
-    font-size: 14px;
-}
-
-.footer-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 1000px;
-    margin: 0 auto;
-    gap: 30px;
-}
-
-/* Logo Section */
-.footer-logo {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.footer-logo .logo-img {
-    width: 100px;
-    margin-bottom: 10px;
-}
-
-/* Links Section */
-.footer-links {
-    display: flex;
-    justify-content: space-between;
-    gap: 80px; /* Space between groups */
-    width: 100%;
-}
-
-.link-group {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    text-align: left;
-}
-
-.footer-links a {
-    color: black;
-    text-decoration: none;
-    font-size: 14px;
-    transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-    color: #ccc; /* Light gray */
-}
-
-footer p {
-    font-size: 12px;
-    color: #bbb;
-}
diff --git a/css/calorie.css b/css/calorie.css
deleted file mode 100644
index c59d3a6..0000000
--- a/css/calorie.css
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-/* Calorie Calculator Container */
-.calorie-container {
-    max-width: 600px;
-    margin: 60px auto;
-    padding: 40px;
-    background-color: #333;
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.calorie-container h2 {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #f7f7f7;
-}
-
-.calorie-container p {
-    font-size: 16px;
-    color: #f7f7f7;
-    margin-bottom: 30px;
-}
-
-/* Form Styles */
-#calorie-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-#calorie-form label {
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-#calorie-form input,
-#calorie-form select {
-    padding: 10px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444;
-    color: #f0f0f0;
-}
-
-#calorie-form input:focus,
-#calorie-form select:focus {
-    outline: none;
-    background-color: #555;
-}
-
-/* Calculate Button */
-button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444;
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-button:hover {
-    background-color: #666;
-}
-
-/* Result Display */
-.result {
-    margin-top: 30px;
-    font-size: 20px;
-    color: #f7f7f7;
-    font-weight: bold;
-}
diff --git a/css/protein.css b/css/protein.css
deleted file mode 100644
index 1948971..0000000
--- a/css/protein.css
+++ /dev/null
@@ -1,77 +0,0 @@
-
-/* Protein Calculator Container */
-.protein-container {
-    max-width: 600px;
-    margin: 60px auto;
-    padding: 40px;
-    background-color: #333;
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.protein-container h2 {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #f7f7f7;
-}
-
-.protein-container p {
-    font-size: 16px;
-    color: #f7f7f7;
-    margin-bottom: 30px;
-}
-
-/* Form Styles */
-#protein-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-#protein-form label {
-    color: #f7f7f7;
-    font-weight: bold;
-}
-
-#protein-form input,
-#protein-form select {
-    padding: 10px;
-    font-size: 16px;
-    border: none;
-    border-radius: 5px;
-    background-color: #444;
-    color: #f0f0f0;
-}
-
-#protein-form input:focus,
-#protein-form select:focus {
-    outline: none;
-    background-color: #555;
-}
-
-/* Calculate Button */
-button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444;
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-button:hover {
-    background-color: #666;
-}
-
-/* Result Display */
-.result {
-    margin-top: 30px;
-    font-size: 20px;
-    color: #f7f7f7;
-    font-weight: bold;
-}
diff --git a/css/water.css b/css/water.css
deleted file mode 100644
index d66f9d9..0000000
--- a/css/water.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/* Water Intake Calculator Container */
-.calculator-container {
-    max-width: 600px;
-    margin: 60px auto;
-    padding: 40px;
-    background-color: #333; /* Dark background */
-    border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-/* Title Styling */
-.calculator-container h2 {
-    font-size: 30px;
-    font-weight: bold;
-    color: #f7f7f7;
-    margin-bottom: 20px;
-}
-
-/* Form Styling */
-.calculator-container form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.calculator-container label {
-    font-weight: bold;
-    color: #f7f7f7;
-}
-
-.calculator-container input[type="number"],
-.calculator-container select {
-    padding: 10px;
-    font-size: 16px;
-    border-radius: 5px;
-    border: none;
-    background-color: #444; /* Dark gray input background */
-    color: #f0f0f0;
-}
-
-.calculator-container input[type="number"]:focus,
-.calculator-container select:focus {
-    outline: none;
-    background-color: #555; /* Lighter on focus */
-}
-
-/* Buttons */
-.calculator-container button {
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #fff;
-    background-color: #444;
-    border: none;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    margin: 10px 0;
-}
-
-.calculator-container button:hover {
-    background-color: #666;
-}
-
-/* Result Display */
-#result {
-    margin-top: 20px;
-    font-size: 16px;
-    color: #f7f7f7;
-}
-
-#result h3 {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-#water-intake {
-    font-size: 18px;
-    color: #f0f0f0;
-}