diff --git a/bg2.jpg b/bg2.jpg
new file mode 100644
index 000000000..810a7bd42
Binary files /dev/null and b/bg2.jpg differ
diff --git a/index.html b/index.html
index 9f77d5415..96c796884 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
     <link rel="stylesheet" type="text/css" href="./style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <title>CalcDiverse</title>
 </head>
 
@@ -46,7 +46,10 @@
                 <li class="nav-item">
                     <a href="./assets/contact/contact.html" class="nav-link">Contact</a>
                 </li>
-
+                <li class="nav-item">
+                    <input type="checkbox" id="theme-toggle">
+                    <label for="theme-toggle" class="nav-link"></label>
+                </li>
             </ul>
             <div class="hamburger">
                 <span class="bar"></span>
@@ -92,7 +95,8 @@ <h3>Calculates the area and perimeter of different useful 2D shapes.</h3>
                     <a href="./Calculators/2D-Shapes-Calculator/2D-Shapes-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/2D-Shapes-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/2D-Shapes-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -103,10 +107,12 @@ <h3>Calculates the area and perimeter of different useful 2D shapes.</h3>
                 <h2>3D Shapes Volume Calculator</h2>
                 <h3>Calculates the volume of different important and useful 3D shapes.</h3>
                 <div class="card-footer">
-                    <a href="./Calculators/3D-Shapes-Volume-Calculator/3D-Shapes-Volume-Calculator.html" target="_blank">
+                    <a href="./Calculators/3D-Shapes-Volume-Calculator/3D-Shapes-Volume-Calculator.html"
+                        target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/3D-Shapes-Volume-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/3D-Shapes-Volume-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -120,7 +126,8 @@ <h3>Calculates the person's age by taking in the date of birth as input.</h3>
                     <a href="./Calculators/Age-Calculator/Age-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Age-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Age-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -134,9 +141,10 @@ <h3>Basic old school calculator for simple calculations</h3>
                     <a href="./Calculators/Basic-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Basic-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Basic-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
-                    </a> 
+                    </a>
                 </div>
             </div>
         </div>
@@ -148,7 +156,8 @@ <h3>Calculates the Body Mass Index of a person using Height & Weight.</h3>
                     <a href="./Calculators/BMI-Calculator/BMI-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/BMI-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/BMI-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -157,12 +166,14 @@ <h3>Calculates the Body Mass Index of a person using Height & Weight.</h3>
         <div class="box">
             <div class="content">
                 <h2>Clothing Size Calculator</h2>
-                <h3>Inter-converts clothing sizes from one country to another, the international size, and the exact measurements for each size.</h3>
+                <h3>Inter-converts clothing sizes from one country to another, the international size, and the exact
+                    measurements for each size.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Clothing-Size-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Clothing-Size-Calculator/" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Clothing-Size-Calculator/"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -176,7 +187,8 @@ <h3>Interconverts color codes among RGB, RGBA, HEX (Hexadecimal), HSL, HSV and C
                     <a href="./Calculators/Color-Code-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Color-Code-Calculator/" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Color-Code-Calculator/"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -190,7 +202,8 @@ <h3>Converts the value of one Currency unit into another Currency unit.</h3>
                     <a href="./Calculators/Currency-Calculator/Currency-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Currency-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Currency-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -204,7 +217,8 @@ <h3>Calculates Date & Time of the Specific Period</h3>
                     <a href="./Calculators/Date-Time-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Date-Time-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Date-Time-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -218,7 +232,8 @@ <h3>Converts the Degree into Radian and vice-versa.</h3>
                     <a href="./Calculators/Degree-Radian-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Degree-Radian-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Degree-Radian-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -229,10 +244,12 @@ <h3>Converts the Degree into Radian and vice-versa.</h3>
                 <h2>Multiplication Table Calculator</h2>
                 <h3>Calculates the multiplication table of any number.</h3>
                 <div class="card-footer">
-                    <a href="./Calculators/Multiplication-Table-Calculator/Multiplication-Table-Calculator.html" target="_blank">
+                    <a href="./Calculators/Multiplication-Table-Calculator/Multiplication-Table-Calculator.html"
+                        target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Multiplication-Table-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Multiplication-Table-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                 </div>
                 </a>
@@ -246,7 +263,8 @@ <h3>Calculates the number of days between two specified dates.</h3>
                     <a href="./Calculators/Number-of-Days-Calculator/Number-of-Days-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Number-of-Days-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Number-of-Days-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -260,7 +278,8 @@ <h3>Calculates the log of the given number to any base.</h3>
                     <a href="./Calculators/Logarithm-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Logarithm-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Logarithm-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -274,7 +293,8 @@ <h3>Calculates the antilog of the any given number taken over any base.</h3>
                     <a href="./Calculators/Antilog-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Antilog-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Antilog-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -288,7 +308,8 @@ <h3>Calculates SGPA and CGPA on the basis of credits and grades.</h3>
                     <a href="./Calculators/GPA-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GPA-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GPA-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -302,7 +323,8 @@ <h3>Calculates the length conversion between two specified units.</h3>
                     <a href="./Calculators/Length-Calculator/Length.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Length-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Length-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -316,7 +338,8 @@ <h3>Calculates the grade based on marks entered.</h3>
                     <a href="./Calculators/Grade-Calculator/grade.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Grade-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Grade-Calculator"
+                        title="Source Code" target="_blank">
 
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                 </div>
@@ -331,7 +354,8 @@ <h3>Calculates Maximum, minimum, mean, median, mode, etc.</h3>
                     <a href="./Calculators/Statistics-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Statistics-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Statistics-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -340,12 +364,14 @@ <h3>Calculates Maximum, minimum, mean, median, mode, etc.</h3>
         <div class="box">
             <div class="content">
                 <h2>Sunrise & Sunset Calculator</h2>
-                <h3>This Calculates approximate about when the sun will rise and set at that particular point on the Earth's surface.</h3>
+                <h3>This Calculates approximate about when the sun will rise and set at that particular point on the
+                    Earth's surface.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Sunrise-Sunset-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sunrise-Sunset-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sunrise-Sunset-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -359,7 +385,8 @@ <h3>Evaluates derivatives and mathematical functions.</h3>
                     <a href="./Calculators/Differential-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Differential-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Differential-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -373,7 +400,8 @@ <h3>Calculates Hours, Minutes, Seconds for any entered time.</h3>
                     <a href="./Calculators/Time-Calculator/Time-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Time-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Time-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -387,7 +415,8 @@ <h3>Calculate Daily Water Intake based on Weight, Activity, Weather</h3>
                     <a href="./Calculators/Water-Intake-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Water-Intake-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Water-Intake-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -401,7 +430,8 @@ <h3>Calculates trigonometric functions and inverses.</h3>
                     <a href="./Calculators/Trigonometric-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Trigonometric-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Trigonometric-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -415,7 +445,8 @@ <h3>Converts given Percentage to Fraction with detailed solution.</h3>
                     <a href="./Calculators/Percentage-To-Fraction-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Percentage-To-Fraction-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Percentage-To-Fraction-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -429,7 +460,8 @@ <h3>Calculates the Mass conversion between two specified units.</h3>
                     <a href="./Calculators/Mass-Calculator/Mass-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Mass-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Mass-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -443,7 +475,8 @@ <h3>Calculates the factorial of any large number instantly.</h3>
                     <a href="./Calculators/Factorial-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Factorial-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Factorial-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -457,7 +490,8 @@ <h3>Calculates the Nth number from Fibonacci Sequence.</h3>
                     <a href="./Calculators/Fibonacci-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fibonacci-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fibonacci-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -471,7 +505,8 @@ <h3>Calculates weight from kgs to pounds and vice-versa.</h3>
                     <a href="./Calculators/Weight-Calculator/Weight-calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Weight-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Weight-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -485,7 +520,8 @@ <h3>Calculates the Pressure conversion between two specified units.</h3>
                     <a href="./Calculators/Pressure-Calculator/Pressure.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pressure-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pressure-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -499,7 +535,8 @@ <h3>Calculates the prime factors of the given number.</h3>
                     <a href="./Calculators/Prime-Factorization-Calculator/index.html " target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Prime-Factorization-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Prime-Factorization-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -513,7 +550,8 @@ <h3>Calculate the theoretical resistance of a 4-band resistor.</h3>
                     <a href="./Calculators/4-Band-Resistance-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/4-Band-Resistance-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/4-Band-Resistance-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -527,7 +565,8 @@ <h3>Calculates the different results of a triangle based on input sides.</h3>
                     <a href="./Calculators/Triangle-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Triangle-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Triangle-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -541,7 +580,8 @@ <h3>Calculates the square root of a number instantly.</h3>
                     <a href="./Calculators/Square-Root-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Square-Root-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Square-Root-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -555,7 +595,8 @@ <h3>Calculates cube root of any number.</h3>
                     <a href="./Calculators/Cube-Root-Calculator/Cube-Root-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cube-Root-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cube-Root-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -569,7 +610,8 @@ <h3>Calculates the nth root of a given number upto n precision.</h3>
                     <a href="./Calculators/General-Root-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/General-Root-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/General-Root-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -583,7 +625,8 @@ <h3>Calculates the value percentage of any given number.</h3>
                     <a href="./Calculators/Percentage-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Percentage-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Percentage-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -597,7 +640,8 @@ <h3>Converts input data size to other data sizes instantly.</h3>
                     <a href="./Calculators/Data-Size-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Data-Size-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Data-Size-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -608,10 +652,12 @@ <h3>Converts input data size to other data sizes instantly.</h3>
                 <h2>Definite Integral Calculator</h2>
                 <h3>Evaluates Integral of Mathematical Functions with Definite Limits.</h3>
                 <div class="card-footer">
-                    <a href="./Calculators/Definite-Integral-Calculator/Definite-Integral-Calculator.html" target="_blank">
+                    <a href="./Calculators/Definite-Integral-Calculator/Definite-Integral-Calculator.html"
+                        target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Definite-Integral-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Definite-Integral-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -625,7 +671,8 @@ <h3>Calculates results of different bitwise operations based on inputs.</h3>
                     <a href="./Calculators/Bitwise-Calculator/Bitwise-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bitwise-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bitwise-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -639,7 +686,8 @@ <h3>Calculates daily calorie intake based on given inputs.</h3>
                     <a href="./Calculators/Calorie-Intake-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Calorie-Intake-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Calorie-Intake-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -650,10 +698,12 @@ <h3>Calculates daily calorie intake based on given inputs.</h3>
                 <h2>Day From The Date Calculator</h2>
                 <h3>Calculates the day for the specified date.</h3>
                 <div class="card-footer">
-                    <a href="./Calculators/Day-From-The-Date-Calculator/Day-From-The-Date-Calculator.html" target="_blank">
+                    <a href="./Calculators/Day-From-The-Date-Calculator/Day-From-The-Date-Calculator.html"
+                        target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Day-From-The-Date-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Day-From-The-Date-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -667,7 +717,8 @@ <h3>Calculates the Temperature conversion between two specified units.</h3>
                     <a href="./Calculators/Temperature-Calculator/Temperature-Calculator.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Temperature-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Temperature-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -681,7 +732,8 @@ <h3>Calculates nPr and nCr after taking inputs as n and r.</h3>
                     <a href="./Calculators/Permutation-Combination-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Permutation-Combination-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Permutation-Combination-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -695,7 +747,8 @@ <h3>Calculator that gives an idea of the returns on their mutual fund investment
                     <a href="./Calculators/Systematic-Investment-Plan-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Systematic-Investment-Plan-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Systematic-Investment-Plan-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -709,7 +762,8 @@ <h3>Effortlessly split bills with our calculator. Simplify expense sharing now!<
                     <a href="./Calculators/Bill-Split-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bill-Split-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bill-Split-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -723,7 +777,8 @@ <h3>Calculates the simple interest.</h3>
                     <a href="./Calculators/Simple-Interest-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Simple-Interest-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Simple-Interest-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -737,7 +792,8 @@ <h3>Calculates Greatest Common Divisor of Two values or multiple values .</h3>
                     <a href="./Calculators/GCD-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GCD-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GCD-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -751,7 +807,8 @@ <h3>Calculates LCM of multiple numbers.</h3>
                     <a href="./Calculators/LCM-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/LCM-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/LCM-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -765,7 +822,8 @@ <h3>Calculates efficiency of the vehicle</h3>
                     <a href="./Calculators/Fuel-Efficiency-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fuel-Efficiency-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fuel-Efficiency-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -779,7 +837,8 @@ <h3>Calculates square and cube of a number.</h3>
                     <a href="./Calculators/Square-Cube-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Square-Cube-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Square-Cube-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -793,7 +852,8 @@ <h3>Which takes two numbers X and Y and then calculate X<sup>Y</sup>.</h3>
                     <a href="./Calculators/Exponent-Calculator/Exponent.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Exponent-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Exponent-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -807,7 +867,8 @@ <h3>Calculates values of variables from linear equation in two variables.</h3>
                     <a href="./Calculators/Linear-Equation-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Linear-Equation-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Linear-Equation-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -821,7 +882,8 @@ <h3>Calculates the roots of a quadratic equation.</h3>
                     <a href="./Calculators/Quadratic-Equation-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Quadratic-Equation-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Quadratic-Equation-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -835,7 +897,8 @@ <h3>solves cubic equations, providing real or complex solutions</h3>
                     <a href="./Calculators/Cubic-Equation-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cubic-Equation-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cubic-Equation-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -849,7 +912,8 @@ <h3>Takes Principal amount, time in years, interest rate and Gives compound inte
                     <a href="./Calculators/Compound-Interest-Calculator/Compound.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Compound-Interest-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Compound-Interest-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -863,7 +927,8 @@ <h3>Calculates the amount of sleep required based on age and activity level.</h3
                     <a href="./Calculators/Sleep-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sleep-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sleep-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -877,7 +942,8 @@ <h3>Unlock Savings with Precision: Your Ultimate Discount Calculator!</h3>
                     <a href="./Calculators/Discount-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Discount-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Discount-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -891,7 +957,8 @@ <h3>Which takes two sides of right-angled triangle and gives third side.</h3>
                     <a href="./Calculators/Pythagoras-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pythagoras-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pythagoras-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -905,7 +972,8 @@ <h3>Your key to matrix operations!</h3>
                     <a href="./Calculators/Matrix-Calculator/matrix.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Matrix-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Matrix-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -919,7 +987,8 @@ <h3>Converts Rectangular form into Polar form and vice versa.</h3>
                     <a href="./Calculators/Rectangular-Polar-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Rectangular-Polar-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Rectangular-Polar-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -933,7 +1002,8 @@ <h3>Which takes two numbers X and Y and then calculate X / Y.</h3>
                     <a href="./Calculators/Ratio-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Ratio-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Ratio-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -947,7 +1017,8 @@ <h3>Converts various css units.</h3>
                     <a href="./Calculators/CSS-Unit-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CSS-Unit-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CSS-Unit-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -961,7 +1032,8 @@ <h3>Input three values to compute the fourth, showcasing proportionality..</h3>
                     <a href="./Calculators/Proportionality-Calculator/Proportionality.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Proportionality-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Proportionality-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -975,7 +1047,8 @@ <h3>Calculates nth Term and sum of n Terms present in an Arithmetic Sequence.</h
                     <a href="./Calculators/Arithmetic-Progression-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Arithmetic-Progression-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Arithmetic-Progression-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -989,7 +1062,8 @@ <h3>Calculates nth Term and sum of n Terms present in an Geometric Sequence.</h3
                     <a href="./Calculators/Geometric-Progression-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Geometric-Progression-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Geometric-Progression-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1003,7 +1077,8 @@ <h3>Calculates the nth term of Harmonic Progression series.</h3>
                     <a href="./Calculators/Harmonic-Progression-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Harmonic-Progression-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Harmonic-Progression-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1017,7 +1092,8 @@ <h3>Instantly find the time difference anywhere in the world.</h3>
                     <a href="./Calculators/Time-Zone-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Time-Zone-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Time-Zone-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1031,7 +1107,8 @@ <h3>To Calculate Heart Rate Monitors</h3>
                     <a href="./Calculators/Heart-Rate-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Heart-Rate-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Heart-Rate-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1040,12 +1117,14 @@ <h3>To Calculate Heart Rate Monitors</h3>
         <div class="box">
             <div class="content">
                 <h2>Real Estate Calculator</h2>
-                <h3>This tool allows users to input property details and obtain essential information for financial planning.</h3>
+                <h3>This tool allows users to input property details and obtain essential information for financial
+                    planning.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Real-Estate-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Real-Estate-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Real-Estate-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1054,12 +1133,14 @@ <h3>This tool allows users to input property details and obtain essential inform
         <div class="box">
             <div class="content">
                 <h2>Graphing Calculator</h2>
-                <h3>This calculator includes a graphical display to visualize functions commonly used in mathematics and science.</h3>
+                <h3>This calculator includes a graphical display to visualize functions commonly used in mathematics and
+                    science.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Graphing-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Graphing-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Graphing-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1073,7 +1154,8 @@ <h3>Converts binary to decimal, octal, hexadecimal and vice versa.</h3>
                     <a href="./Calculators/Number-System-Calculator/Number-System.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Number-System-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Number-System-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1087,7 +1169,8 @@ <h3>Counts the Total Words, Unique words, Average word length and Exports the da
                     <a href="./Calculators/Word-Count-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Word-Count-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Word-Count-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1096,12 +1179,14 @@ <h3>Counts the Total Words, Unique words, Average word length and Exports the da
         <div class="box">
             <div class="content">
                 <h2>Love Calculator</h2>
-                <h3>Calculates a percentage score of love compatibility based on names or birthdates (mostly for fun).</h3>
+                <h3>Calculates a percentage score of love compatibility based on names or birthdates (mostly for fun).
+                </h3>
                 <div class="card-footer">
                     <a href="./Calculators/Love-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Love-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Love-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1110,12 +1195,14 @@ <h3>Calculates a percentage score of love compatibility based on names or birthd
         <div class="box">
             <div class="content">
                 <h2>Pregnancy Due Date Calculator</h2>
-                <h3>Designed to estimate the due date for a pregnant woman based on the first day of her last menstrual period.</h3>
+                <h3>Designed to estimate the due date for a pregnant woman based on the first day of her last menstrual
+                    period.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Pregnancy-Due-Date-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pregnancy-Due-Date-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pregnancy-Due-Date-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1129,7 +1216,8 @@ <h3>Computes all the Armstrong Numbers for the specified Number of digits.</h3>
                     <a href="./Calculators/Armstrong-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Armstrong-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Armstrong-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1137,13 +1225,14 @@ <h3>Computes all the Armstrong Numbers for the specified Number of digits.</h3>
         </div>
         <div class="box">
             <div class="content">
-              <h2>Intelligence Calculator</h2>
+                <h2>Intelligence Calculator</h2>
                 <h3>Shows the intelligence using his/her IQ.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Intelligence-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Intelligence-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Intelligence-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1157,7 +1246,8 @@ <h3>Calculates Area and Perimeter for Ellipse and Hyperbola</h3>
                     <a href="./Calculators/Ellipse-And-Hyperbola-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Ellipse-And-Hyperbola-Calculator/" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Ellipse-And-Hyperbola-Calculator/"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1171,7 +1261,8 @@ <h3>Calculates The EMI based on loan amount, interest rate and tenure</h3>
                     <a href="./Calculators/EMI-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/EMI-Calculator/" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/EMI-Calculator/"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1185,7 +1276,8 @@ <h3>This tool allows users to convert speeds between different units.</h3>
                     <a href="./Calculators/Speed-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Speed-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Speed-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1199,7 +1291,8 @@ <h3>Calculates the Short URL from Long URL.</h3>
                     <a href="./Calculators/Short-URL-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Short-URL-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Short-URL-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1213,7 +1306,8 @@ <h3>It allows users to compare old and new loan terms by inputting relevant info
                     <a href="./Calculators/Mortgage-Refinance-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Mortgage-Refinance-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Mortgage-Refinance-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1227,7 +1321,8 @@ <h3>Calculates the actual take-home pay from your Cost to Company (CTC).</h3>
                     <a href="./Calculators/Net-Salary-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Net-Salary-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Net-Salary-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1241,7 +1336,8 @@ <h3>It allows users to calculate the Conductivity & Resistivity.</h3>
                     <a href="./Calculators/Conductivity-And-Resistivity-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Conductivity-And-Resistivity-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Conductivity-And-Resistivity-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1255,7 +1351,8 @@ <h3>Calculates the amount of calories burnt from particular exercise.</h3>
                     <a href="./Calculators/Calorie-Burnt-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Calorie-Burnt-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Calorie-Burnt-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1269,7 +1366,8 @@ <h3>Calculates the Taylor Series expansion of a mathematical function.</h3>
                     <a href="./Calculators/Taylor-Series-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Taylor-Series-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Taylor-Series-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1283,7 +1381,8 @@ <h3>Calculates the probability of an event A given that event B has occurred.</h
                     <a href="./Calculators/Baye's-Theorem-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Baye's-Theorem-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Baye's-Theorem-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1297,7 +1396,8 @@ <h3>Calculator that determines whether a given number is a Smith number or not.<
                     <a href="./Calculators/Smith-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Smith-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Smith-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1311,7 +1411,8 @@ <h3>Calculates the Goods and Service tax of any product in rupees and dollars.</
                     <a href="./Calculators/GST-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GST-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/GST-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1320,12 +1421,14 @@ <h3>Calculates the Goods and Service tax of any product in rupees and dollars.</
         <div class="box">
             <div class="content">
                 <h2>Carbon Footprint Calculator</h2>
-                <h3>Calculates an individual's carbon footprint based on the miles driven per year, per month, and per week.</h3>
+                <h3>Calculates an individual's carbon footprint based on the miles driven per year, per month, and per
+                    week.</h3>
                 <div class="card-footer">
                     <a href="./Calculators/Carbon-Footprint-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Carbon-Footprint-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Carbon-Footprint-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1339,8 +1442,9 @@ <h3>It estimates the annual energy and water consumption.</h3>
                     <a href="./Calculators/Environmental-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Environmental-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Environmental-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1353,8 +1457,9 @@ <h3>Calculates the resultant vector, dot product and angle between 2 vectors.</h
                     <a href="./Calculators/Vector-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Vector-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Vector-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1367,8 +1472,9 @@ <h3>Calculates electricity costs based on user-supplied units, time, and cost pa
                     <a href="./Calculators/Electricity-Bill-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electricity-Bill-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electricity-Bill-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1381,8 +1487,9 @@ <h3>Calculates the cost of taxi ride based on distance, base fare and time.</h3>
                     <a href="./Calculators/Taxi-Fare-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Taxi-Fare-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Taxi-Fare-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1395,8 +1502,9 @@ <h3>Calculates the distance between two points on a 2D plane.</h3>
                     <a href="./Calculators/2D-Distance-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/2D-Distance-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/2D-Distance-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1409,8 +1517,9 @@ <h3>Calculates the required time for downloading as per different system configu
                     <a href="./Calculators/Download-Time-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Download-Time-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Download-Time-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1423,8 +1532,9 @@ <h3>Calculates the due date of the ongoing loan.</h3>
                     <a href="./Calculators/Loan-Repayment-Date-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Loan-Repayment-Date-Calculator" title="Source Code" target="_blank">
-                      <img src="./assets/images/github.png" alt="Source Code"></img>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Loan-Repayment-Date-Calculator"
+                        title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
@@ -1437,7 +1547,8 @@ <h3>Calculates power between different units.</h3>
                     <a href="./Calculators/Power-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Power-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Power-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1451,12 +1562,14 @@ <h3>Calculates the Savings from your income and expenditure.</h3>
                     <a href="./Calculators/Expenditure-And-Savings-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Expenditure-And-Savings-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Expenditure-And-Savings-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>
-        </div>
+               
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Pronic Number Calculator</h2>
@@ -1465,7 +1578,8 @@ <h3>Checks if a number is pronic and finds pronic numbers in a range.</h3>
                     <a href="./Calculators/Pronic-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pronic-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Pronic-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1479,7 +1593,8 @@ <h3>Whatever number you give it will return 7.</h3>
                     <a href="./Calculators/Thala-For-A-Reason-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Thala-For-A-Reason-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Thala-For-A-Reason-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1493,7 +1608,8 @@ <h3>Calculates various cricket related terms.</h3>
                     <a href="./Calculators/Cricket-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cricket-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Cricket-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1507,7 +1623,8 @@ <h3>Calculates the risk in Investment on the basis of some input parameters.</h3
                     <a href="./Calculators/Investment-Risk-Tolerance-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Investment-Risk-Tolerance-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Investment-Risk-Tolerance-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1521,7 +1638,8 @@ <h3>Calculates the Equivalent Resistance of the Series and Parallel Configuratio
                     <a href="./Calculators/Equivalent-Resistance-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Equivalent-Resistance-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Equivalent-Resistance-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1535,7 +1653,8 @@ <h3>Calculates the angle between the hour and minute hands for a specified time.
                     <a href="./Calculators/Clock-Hands-Angle-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Clock-Hands-Angle-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Clock-Hands-Angle-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1549,7 +1668,8 @@ <h3>Calculates Centripetal force and acceleration.</h3>
                     <a href="./Calculators/Centripetal-Force-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Centripetal-Force-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Centripetal-Force-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1563,7 +1683,8 @@ <h3>Check the number is bouncy or not and finds bouncy numbers in a range.</h3>
                     <a href="./Calculators/Bouncy-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bouncy-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Bouncy-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1577,7 +1698,8 @@ <h3>Provides the graph as per the given function like sin, cos, tan, etc.</h3>
                     <a href="./Calculators/Trigonometric-Function-Graphing-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Trigonometric-Function-Graphing-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Trigonometric-Function-Graphing-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1591,7 +1713,8 @@ <h3>Converts between infix, prefix and postfix expressions.</h3>
                     <a href="./Calculators/Infix-Prefix-Postfix-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Infix-Prefix-Postfix-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Infix-Prefix-Postfix-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1605,7 +1728,8 @@ <h3>Computes the total atomic weights of elements in a given chemical formula</h
                     <a href="./Calculators/Molecular-Weight-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Molecular-Weight-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Molecular-Weight-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1619,7 +1743,8 @@ <h3>Calculates Max Height, Range, Time Of Flight of Projectile.</h3>
                     <a href="./Calculators/Projectile-Motion-Calculator/Projectile.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Projectile-Motion-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Projectile-Motion-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1633,7 +1758,8 @@ <h3>Calculates total budget for home renovation.</h3>
                     <a href="./Calculators/Home-Renovation-Budget-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Home-Renovation-Budget-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Home-Renovation-Budget-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1647,7 +1773,8 @@ <h3>Checks the number is disarium or not and finds disarium numbers in a range.<
                     <a href="./Calculators/Disarium-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Disarium-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Disarium-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1661,7 +1788,8 @@ <h3>Calculates the typing speed in two different units.</h3>
                     <a href="./Calculators/Typing-Speed-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Typing-Speed-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Typing-Speed-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1675,7 +1803,8 @@ <h3>Calculates the Quotient and Remainder.</h3>
                     <a href="./Calculators/Remainder-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Remainder-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Remainder-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1689,7 +1818,8 @@ <h3>Calculates the time required to finish reading a book.</h3>
                     <a href="./Calculators/Book-Reading-Time-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Book-Reading-Time-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Book-Reading-Time-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1703,7 +1833,8 @@ <h3>Perfoms mathematical operations on complex numbers.</h3>
                     <a href="./Calculators/Complex-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Complex-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Complex-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1717,7 +1848,8 @@ <h3>Converts CGPA to percentage and vice-versa.</h3>
                     <a href="./Calculators/CGPA-Percentage-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CGPA-Percentage-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CGPA-Percentage-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1731,7 +1863,8 @@ <h3>Calculates tax liability based on user input annual income.</h3>
                     <a href="./Calculators/Income-Tax-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Income-Tax-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Income-Tax-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1745,7 +1878,8 @@ <h3>Calculates number of vowels and consonants in a given paragraph.</h3>
                     <a href="./Calculators/Vowel-Consonant-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Vowel-Consonant-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Vowel-Consonant-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1759,7 +1893,8 @@ <h3>Calculates the Probability of different events.</h3>
                     <a href="./Calculators/Probability-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Probability-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Probability-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1773,7 +1908,8 @@ <h3>Compute stress and strain using force, area, and length inputs.</h3>
                     <a href="./Calculators/Stress-Strain-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Stress-Strain-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Stress-Strain-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1787,7 +1923,8 @@ <h3>Checks the number is neon or not and finds neon numbers in a range.</h3>
                     <a href="./Calculators/Neon-Number-Calculator/index.html" target="_blank">
                         <button>Try Now</button>
                     </a>
-                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Neon-Number-Calculator" title="Source Code" target="_blank">
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Neon-Number-Calculator"
+                        title="Source Code" target="_blank">
                         <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
@@ -1809,9 +1946,12 @@ <h3>Checks the number is neon or not and finds neon numbers in a range.</h3>
             <div class="social">
                 <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
                 <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a href="https://www.github.com/Rakesh9100" target="_blank"><i
+                        class="fa-brands fa-square-github"></i></a>
+                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i
+                        class="fa-brands fa-square-x-twitter"></i></a>
+                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
+                        class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="#home">Home</a></li>
@@ -1833,4 +1973,4 @@ <h3>Checks the number is neon or not and finds neon numbers in a range.</h3>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 0c4cf0138..2e0e52214 100644
--- a/script.js
+++ b/script.js
@@ -7,6 +7,17 @@ document.addEventListener("DOMContentLoaded", function () {
     }, 500)
 });
 
+const toggleSwitch = document.querySelector('#theme-toggle');
+const body = document.querySelector('body');
+
+toggleSwitch.addEventListener('change', () => {
+  if (toggleSwitch.checked) {
+    body.classList.add('light-mode');
+  } else {
+    body.classList.remove('light-mode');
+  }
+});
+
 hamburger.addEventListener("click", mobileMenu);
 function mobileMenu() {
     hamburger.classList.toggle("active");
diff --git a/style.css b/style.css
index 84b60f96d..ee09e7ef5 100644
--- a/style.css
+++ b/style.css
@@ -1,1360 +1,1518 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 :root {
-    --primary: #ff1b82;
-    --secondary: #f4eff0;
-    --ternary: #1327ff;
-    --light: #f7f26c;
-    --dark: #f50414;
-    --track: rgb(111, 111, 139)
+  --primary: #ff1b82;
+  --secondary: #f4eff0;
+  --ternary: #1327ff;
+  --light: #f7f26c;
+  --dark: #f50414;
+  --track: rgb(111, 111, 139);
 }
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 /* Scrollbar Css */
 
 ::-webkit-scrollbar {
-    width: 10px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: var(--track);
+  background: var(--track);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--light);
-    border-radius: 25px;
+  background: var(--light);
+  border-radius: 25px;
 }
 
 /* Preloader Css */
 
 #loader-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1001;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
 }
 
 #loader-wrapper .loader-section {
-    position: fixed;
-    top: 0;
-    width: 51%;
-    height: 100%;
-    background: #fff;
-    z-index: 1000;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+  position: fixed;
+  top: 0;
+  width: 51%;
+  height: 100%;
+  background: #fff;
+  z-index: 1000;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
 }
 
 #loader-wrapper .loader-section.section-left {
-    left: 0;
+  left: 0;
 }
 
 #loader-wrapper .loader-section.section-right {
-    right: 0;
+  right: 0;
 }
 
 #loader {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-    margin: -75px 0 0 -75px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #3498db;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-    z-index: 99999;
+  display: block;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #3498db;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+  z-index: 99999;
 }
 
 #loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #e74c3c;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #e74c3c;
+  -webkit-animation: spin 3s linear infinite;
+  animation: spin 3s linear infinite;
 }
 
 #loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #f9c922;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #f9c922;
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
 }
 
 .loaded #loader-wrapper {
-    visibility: hidden;
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
-    -webkit-transition: all 0.3s 1s ease-out;
-    transition: all 0.3s 1s ease-out;
+  visibility: hidden;
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+  -webkit-transition: all 0.3s 1s ease-out;
+  transition: all 0.3s 1s ease-out;
 }
 
 .loaded #loader-wrapper .loader-section.section-left {
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .loaded #loader-wrapper .loader-section.section-right {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .loaded #loader {
-    opacity: 0;
-    -webkit-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+  opacity: 0;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 @-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
 
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
 
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 /* Preloader Css Ends */
 
+/* Dark-Light Mode Switch */
+
+#hybrid {
+  visibility: hidden;
+}
+
+#theme-toggle {
+  visibility: hidden;
+}
+
+#theme-toggle + label {
+  content: '';
+  display: inline-block;
+  cursor: pointer;
+  height: 45px;
+  width: 45px;
+  border-radius: 50%;
+  transition: all 0.3s ease-in-out;
+}
+
+#theme-toggle:not(:checked) + label {
+  background-color: gold;
+}
+
+#theme-toggle:checked + label {
+  background-color: transparent;
+  box-shadow: inset -18px -16px 1px 1px #fff;
+}
+
+/* 
+#toggle {
+  display: none;
+}
+
+.toggle-switch {
+  display: block;
+  z-index: 100;
+}
+
+.toggle-label {
+  position: fixed;
+  top: 21px;
+  left: 200px;
+  right: 20px;
+  width: 50px;
+  height: 25px;
+  background-color: gray;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+.toggle-label::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 21px;
+  height: 21px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch:checked + .toggle-label {
+  background-color: #ff1b82;
+}
+
+.toggle-switch:checked + .toggle-label::after {
+  transform: translateX(25px);
+} */
+
+/* Main Body Starts here */
+
 body {
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background-image: url(./assets/images/background.jpg);
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    font-size: 1.4rem;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-image: url(./assets/images/background.jpg);
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-size: 1.4rem;
+  transition: all 0.3s ease-in-out;
 }
 
 html {
-    font-size: 62.5%;
+  font-size: 62.5%;
 }
 
 body,
 html {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 300;
-    line-height: 1.4;
-    scroll-behavior: smooth;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 300;
+  line-height: 1.4;
+  scroll-behavior: smooth;
 }
 
+/* LIGHT MODE CODE STARTS HERE */
+
+body.light-mode {
+  background-image: url(./bg2.jpg);
+  color: #00d0ff;
+}
+
+body.light-mode .navbar {
+  font-family: "Poppins", sans-serif;
+  background-color: rgb(9, 5, 40);
+  margin: 0 auto;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 0, 0, 0.8),
+    rgb(12, 219, 219),
+    rgba(0, 0, 0, 0.8)
+  );
+  backdrop-filter: blur(50px);
+  -webkit-backdrop-filter: blur(50px);
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+body.light-mode .comp-section .compcontainer h1 {
+  font-family: Ubuntu;
+  color: rgba(0, 0, 0, 0.8);
+  text-shadow: 2px 2px 10px rgb(12, 219, 219);
+  margin-top: 16px;
+}
+
+body.light-mode .comp-section .compcontainer h3 {
+  font-family: "Poppins", sans-serif;
+  color: rgba(0, 0, 0, 0.91);
+  margin-top: 2rem;
+  font-weight: 400;
+  font-size: 2.5rem;
+}
+
+body.light-mode .paragraph {
+  font-size: 2rem;
+  width: 85%;
+  text-align: center;
+  font-weight: 500;
+  margin: auto;
+  margin-top: 18px;
+  padding: 10px;
+  color: rgba(0, 0, 0, 0.91);
+}
+
+body.light-mode #searchBar h1 {
+  font-family: Ubuntu;
+  font-size: 4rem;
+  color: black;
+  text-shadow: 2px 2px 10px rgb(12, 219, 219);
+  margin-top: 16px;
+}
+
+body.light-mode .container .box .content h2 {
+  font-size: 2em;
+  /* color: #fff; */
+  color: #181b1c;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+/* LIGHT MODE CODE ENDS HERE */
+
 header {
-    position: sticky;
-    top: 0;
-    z-index: 100;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .navbar {
-    font-family: 'Poppins', sans-serif;
-    background-color: rgb(9, 5, 40);
-    margin: 0 auto;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(46, 151, 192, 0.8));
-    backdrop-filter: blur(50px);
-    -webkit-backdrop-filter: blur(50px);
-    border-radius: 50px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  font-family: "Poppins", sans-serif;
+  background-color: rgb(9, 5, 40);
+  margin: 0 auto;
+  margin-top: 10px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0),
+    rgba(46, 151, 192, 0.8)
+  );
+  backdrop-filter: blur(50px);
+  -webkit-backdrop-filter: blur(50px);
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  transition: all 1s ease-in-out;
 }
 
 .navbar a {
-    text-decoration: none;
-    font-size: 2rem;
-    font-weight: 700;
-    padding: 0.5rem 1rem;
-    border: 1px solid transparent;
-    color: var(--secondary);
-    transition: 0.3s ease-in-out;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 700;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  color: var(--secondary);
+  transition: 0.3s ease-in-out;
 }
 
 .image-logo {
-    float: left;
-    align-items: center;
-    display: flex;
+  float: left;
+  align-items: center;
+  display: flex;
 }
 
 .nav-link:hover {
-    color: #ff1b82;
-    border-top-color: #ff1b82;
-    border-bottom-color: #ff1b82;
+  color: #ff1b82;
+  border-top-color: #ff1b82;
+  border-bottom-color: #ff1b82;
 }
 
 nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  transition: all 1s ease-in-out;
 }
 
 nav ul {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  gap: 2rem;
+  list-style: none;
+}
+
+.nav-menu li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .logo {
-    font-size: 2.3rem;
-    font-weight: 700;
-    margin-left: -10px;
-    font-family: Ubuntu;
-    color: #ffffff;
-    transition: color 0.3s ease-in-out;
+  font-size: 2.3rem;
+  font-weight: 700;
+  margin-left: -10px;
+  font-family: Ubuntu;
+  color: #ffffff;
+  transition: color 0.3s ease-in-out;
 }
 
 .logo:hover {
-    color: #b400a5;
+  color: #b400a5;
 }
 
 .hamburger {
-    display: none;
+  display: none;
 }
 
 .bar {
-    display: block;
-    width: 25px;
-    height: 3px;
-    margin: 5px auto;
-    -webkit-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
-    background-color: var(--secondary);
+  display: block;
+  width: 25px;
+  height: 3px;
+  margin: 5px auto;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  background-color: var(--secondary);
 }
 
 /* Components Section Css */
 
 section {
-    scroll-margin-top: 50px;
-    z-index: 100;
+  scroll-margin-top: 50px;
+  z-index: 100;
 }
 
 .comp-section .compcontainer .logo img {
-    width: 250px;
-    margin-bottom: -25px;
+  width: 250px;
+  margin-bottom: -25px;
 }
 
 .comp-section .compcontainer h1,
 .comp-section .compcontainer h3 {
-    display: flex;
-    flex-direction: column;
-    gap: 30px;
-    z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  z-index: 200;
+  transition: all 1s ease-in-out;
 }
 
 .comp-section .compcontainer h1 {
-    font-family: Ubuntu;
-    text-shadow: 2px 2px 10px var(--light);
-    margin-top: 16px;
+  font-family: Ubuntu;
+  text-shadow: 2px 2px 10px var(--light);
+  margin-top: 16px;
 }
 
 .comp-section .compcontainer h3 {
-    font-family: 'Poppins', sans-serif;
-    color: rgb(244 239 240 / 91%);
-    margin-top: 2rem;
-    font-weight: 400;
-    font-size: 2.5rem;
+  font-family: "Poppins", sans-serif;
+  color: rgb(244 239 240 / 91%);
+  margin-top: 2rem;
+  font-weight: 400;
+  font-size: 2.5rem;
 }
 
 .comp-section .compcontainer a {
-    margin-top: 50px;
+  margin-top: 50px;
 }
 
 .comp-section .compcontainer .started {
-    font-size: 20px;
-    font-weight: 700;
-    border: none;
-    margin-top: 21px;
-    padding: 10px 45px;
-    border-radius: 18px;
-    color: #ffffff;
-    background: var(--primary);
-    cursor: pointer;
-    transition: 0.5s ease-in-out;
+  font-size: 20px;
+  font-weight: 700;
+  border: none;
+  margin-top: 21px;
+  padding: 10px 45px;
+  border-radius: 18px;
+  color: #ffffff;
+  background: var(--primary);
+  cursor: pointer;
+  transition: 0.5s ease-in-out;
 }
 
 .comp-section .compcontainer .started:hover {
-    transform: scale(1.02);
-    background: #ff6984;
+  transform: scale(1.02);
+  background: #ff6984;
 }
 
 .paragraph {
-    font-size: 2rem;
-    width: 85%;
-    text-align: center;
-    font-weight: 500;
-    margin: auto;
-    margin-top: 18px;
-    padding: 10px;
-    color: rgb(244 239 240 / 91%);
+  font-size: 2rem;
+  width: 85%;
+  text-align: center;
+  font-weight: 500;
+  margin: auto;
+  margin-top: 18px;
+  padding: 10px;
+  color: rgb(244 239 240 / 91%);
+  transition: all 1s ease-in-out;
 }
 
 .comp-section {
-    display: grid;
-    color: var(--secondary);
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    z-index: 4;
+  display: grid;
+  color: var(--secondary);
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 4;
 }
 
 .comp-section h1 {
-    font-size: 65px;
+  font-size: 65px;
 }
 
 .comp-section h3 {
-    font-size: 32px;
+  font-size: 32px;
 }
 
 .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 40px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 40px 0;
 }
 
 .container .box {
-    position: relative;
-    width: 320px;
-    height: 400px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 40px 30px;
-    transition: 0.5s;
+  position: relative;
+  width: 320px;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 40px 30px;
+  transition: 0.5s;
 }
 
 .container .box::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 50px;
-    width: 50%;
-    height: 100%;
-    background: #d8de07;
-    border-radius: 8px;
-    transform: skewX(15deg);
-    transition: 0.5s;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50px;
+  width: 50%;
+  height: 100%;
+  background: #d8de07;
+  border-radius: 8px;
+  transform: skewX(15deg);
+  transition: 0.5s;
 }
 
 .container .box::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 50px;
-    width: 50%;
-    height: 100%;
-    background: #de652a;
-    border-radius: 8px;
-    transform: skewX(15deg);
-    transition: 0.5s;
-    filter: blur(30px);
-    transition: 0.5s;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50px;
+  width: 50%;
+  height: 100%;
+  background: #de652a;
+  border-radius: 8px;
+  transform: skewX(15deg);
+  transition: 0.5s;
+  filter: blur(30px);
+  transition: 0.5s;
 }
 
 .container .box:hover:before,
 .container .box:hover:after {
-    transform: skewX(0deg);
-    left: 20px;
-    width: calc((100% - 90px));
+  transform: skewX(0deg);
+  left: 20px;
+  width: calc((100% - 90px));
 }
 
 .container .box .content h3 {
-    font-size: 15px;
-    color: #efe0f1;
-    margin-top: 20px;
-    transition: all 0.3s;
+  font-size: 15px;
+  color: #efe0f1;
+  margin-top: 20px;
+  transition: all 0.3s;
 }
 
 .container .box .content button {
-    all: unset;
-    width: 100px;
-    height: 30px;
-    font-size: 16px;
-    background: transparent;
-    border: none;
-    position: relative;
-    color: #f0f0f0;
-    cursor: pointer;
-    z-index: 1;
-    padding: 9px 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
+  all: unset;
+  width: 100px;
+  height: 30px;
+  font-size: 16px;
+  background: transparent;
+  border: none;
+  position: relative;
+  color: #f0f0f0;
+  cursor: pointer;
+  z-index: 1;
+  padding: 9px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
 }
 
 .container .box .content button::after,
 .container .box .content button::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    z-index: -99999;
-    transition: all .4s;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: -99999;
+  transition: all 0.4s;
 }
 
 .container .box .content button::before {
-    transform: translate(0%, 0%);
-    width: 100%;
-    height: 100%;
-    background: #28282d;
-    border-radius: 10px;
+  transform: translate(0%, 0%);
+  width: 100%;
+  height: 100%;
+  background: #28282d;
+  border-radius: 10px;
 }
 
 .container .box .content button::after {
-    transform: translate(10px, 10px);
-    width: 35px;
-    height: 35px;
-    background: #ffffff15;
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    border-radius: 50px;
+  transform: translate(10px, 10px);
+  width: 35px;
+  height: 35px;
+  background: #ffffff15;
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 50px;
 }
 
 .container .box .content button:hover::before {
-    transform: translate(5%, 20%);
-    width: 110%;
-    height: 110%;
+  transform: translate(5%, 20%);
+  width: 110%;
+  height: 110%;
 }
 
 .container .box .content button:hover::after {
-    border-radius: 10px;
-    transform: translate(0, 0);
-    width: 100%;
-    height: 100%;
+  border-radius: 10px;
+  transform: translate(0, 0);
+  width: 100%;
+  height: 100%;
 }
 
 .container .box .content button:active::after {
-    transition: 0s;
-    transform: translate(0, 5%);
+  transition: 0s;
+  transform: translate(0, 5%);
 }
 
 .container .box .content img {
-    float: right;
-    cursor: pointer;
-    height: 36px;
-    width: 36px;
-    font-weight: 900;
-    margin-right: -25px;
-    border-radius: 20px;
-    background-color: white;
-    color: #ffffff;
-    transition: .5s;
-    z-index: 3;
+  float: right;
+  cursor: pointer;
+  height: 36px;
+  width: 36px;
+  font-weight: 900;
+  margin-right: -25px;
+  border-radius: 20px;
+  background-color: white;
+  color: #ffffff;
+  transition: 0.5s;
+  z-index: 3;
 }
 
 .container .box .content img:hover {
-    color: #fff;
-    transform: rotateY(180deg);
+  color: #fff;
+  transform: rotateY(180deg);
 }
 
 .container .box .content img:before {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #f00;
-    transition: .5s;
-    z-index: 2;
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #f00;
+  transition: 0.5s;
+  z-index: 2;
 }
 
 .container .box .content img:hover:before {
-    top: 0;
+  top: 0;
 }
 
 .container .box .content img:hover {
-    background-color: #e1ff00;
-    border: 1px solid #e1ff00;
-    box-shadow: 0 0 6px 2px #e1ff00;
+  background-color: #e1ff00;
+  border: 1px solid #e1ff00;
+  box-shadow: 0 0 6px 2px #e1ff00;
 }
 
 .card-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
 .container .box:nth-child(even)::before,
 .container .box:nth-child(even)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(odd)::before,
 .container .box:nth-child(odd)::after {
-    background: linear-gradient(315deg, #00ff88, #f200ff);
+  background: linear-gradient(315deg, #00ff88, #f200ff);
 }
 
 .container .box:nth-child(2)::before,
 .container .box:nth-child(2)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(3)::before,
 .container .box:nth-child(3)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(4)::before,
 .container .box:nth-child(4)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(5)::before,
 .container .box:nth-child(5)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(6)::before,
 .container .box:nth-child(6)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(7)::before,
 .container .box:nth-child(7)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(8)::before,
 .container .box:nth-child(8)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(9)::before,
 .container .box:nth-child(9)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(10)::before,
 .container .box:nth-child(10)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(11)::before,
 .container .box:nth-child(11)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(12)::before,
 .container .box:nth-child(12)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(13)::before,
 .container .box:nth-child(13)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(14)::before,
 .container .box:nth-child(14)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(15)::before,
 .container .box:nth-child(15)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(16)::before,
 .container .box:nth-child(16)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(17)::before,
 .container .box:nth-child(17)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(18)::before,
 .container .box:nth-child(18)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(19)::before,
 .container .box:nth-child(19)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(20)::before,
 .container .box:nth-child(20)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(21)::before,
 .container .box:nth-child(21)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(22)::before,
 .container .box:nth-child(22)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(23)::before,
 .container .box:nth-child(23)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(24)::before,
 .container .box:nth-child(24)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(25)::before,
 .container .box:nth-child(25)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(26)::before,
 .container .box:nth-child(26)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(27)::before,
 .container .box:nth-child(27)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(28)::before,
 .container .box:nth-child(28)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(29)::before,
 .container .box:nth-child(29)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(30)::before,
 .container .box:nth-child(30)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(31)::before,
 .container .box:nth-child(31)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(32)::before,
 .container .box:nth-child(32)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(33)::before,
 .container .box:nth-child(33)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(34)::before,
 .container .box:nth-child(34)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(35)::before,
 .container .box:nth-child(35)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(36)::before,
 .container .box:nth-child(36)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(37)::before,
 .container .box:nth-child(37)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(38)::before,
 .container .box:nth-child(38)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(39)::before,
 .container .box:nth-child(39)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(40)::before,
 .container .box:nth-child(40)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(41)::before,
 .container .box:nth-child(41)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(42)::before,
 .container .box:nth-child(42)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(43)::before,
 .container .box:nth-child(43)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(44)::before,
 .container .box:nth-child(44)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(45)::before,
 .container .box:nth-child(45)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(46)::before,
 .container .box:nth-child(46)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(47)::before,
 .container .box:nth-child(47)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(48)::before,
 .container .box:nth-child(48)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(49)::before,
 .container .box:nth-child(49)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(50)::before,
 .container .box:nth-child(50)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(51)::before,
 .container .box:nth-child(51)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(52)::before,
 .container .box:nth-child(52)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(53)::before,
 .container .box:nth-child(53)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(54)::before,
 .container .box:nth-child(54)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(55)::before,
 .container .box:nth-child(55)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(56)::before,
 .container .box:nth-child(56)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(57)::before,
 .container .box:nth-child(57)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(58)::before,
 .container .box:nth-child(58)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(59)::before,
 .container .box:nth-child(59)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(60)::before,
 .container .box:nth-child(60)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(61)::before,
 .container .box:nth-child(61)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(62)::before,
 .container .box:nth-child(62)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(63)::before,
 .container .box:nth-child(63)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(64)::before,
 .container .box:nth-child(64)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(65)::before,
 .container .box:nth-child(65)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(66)::before,
 .container .box:nth-child(66)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(67)::before,
 .container .box:nth-child(67)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(68)::before,
 .container .box:nth-child(68)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(69)::before,
 .container .box:nth-child(69)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(70)::before,
 .container .box:nth-child(70)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(71)::before,
 .container .box:nth-child(71)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(72)::before,
 .container .box:nth-child(72)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(73)::before,
 .container .box:nth-child(73)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(74)::before,
 .container .box:nth-child(74)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(75)::before,
 .container .box:nth-child(75)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(76)::before,
 .container .box:nth-child(76)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(77)::before,
 .container .box:nth-child(77)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(78)::before,
 .container .box:nth-child(78)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(79)::before,
 .container .box:nth-child(79)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(80)::before,
 .container .box:nth-child(80)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(81)::before,
 .container .box:nth-child(81)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(82)::before,
 .container .box:nth-child(82)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(83)::before,
 .container .box:nth-child(83)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(84)::before,
 .container .box:nth-child(84)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(85)::before,
 .container .box:nth-child(85)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(86)::before,
 .container .box:nth-child(86)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(87)::before,
 .container .box:nth-child(87)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(88)::before,
 .container .box:nth-child(88)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(89)::before,
 .container .box:nth-child(89)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(90)::before,
 .container .box:nth-child(90)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(91)::before,
 .container .box:nth-child(91)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(92)::before,
 .container .box:nth-child(92)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(93)::before,
 .container .box:nth-child(93)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(94)::before,
 .container .box:nth-child(94)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(95)::before,
 .container .box:nth-child(95)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(96)::before,
 .container .box:nth-child(96)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(97)::before,
 .container .box:nth-child(97)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(98)::before,
 .container .box:nth-child(98)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(99)::before,
 .container .box:nth-child(99)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(100)::before,
 .container .box:nth-child(100)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(101)::before,
 .container .box:nth-child(101)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(102)::before,
 .container .box:nth-child(102)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(103)::before,
 .container .box:nth-child(103)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(104)::before,
 .container .box:nth-child(104)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(105)::before,
 .container .box:nth-child(105)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(106)::before,
 .container .box:nth-child(106)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(107)::before,
 .container .box:nth-child(107)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(108)::before,
 .container .box:nth-child(108)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(109)::before,
 .container .box:nth-child(109)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(110)::before,
 .container .box:nth-child(110)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(111)::before,
 .container .box:nth-child(111)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(112)::before,
 .container .box:nth-child(112)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(113)::before,
 .container .box:nth-child(113)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(114)::before,
 .container .box:nth-child(114)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(115)::before,
 .container .box:nth-child(115)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(116)::before,
 .container .box:nth-child(116)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(117)::before,
 .container .box:nth-child(117)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(118)::before,
 .container .box:nth-child(118)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(119)::before,
 .container .box:nth-child(119)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(120)::before,
 .container .box:nth-child(120)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(121)::before,
 .container .box:nth-child(121)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(122)::before,
 .container .box:nth-child(122)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(123)::before,
 .container .box:nth-child(123)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(124)::before,
 .container .box:nth-child(124)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(125)::before,
 .container .box:nth-child(125)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(126)::before,
 .container .box:nth-child(126)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(127)::before,
 .container .box:nth-child(127)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box:nth-child(128)::before,
 .container .box:nth-child(128)::after {
-    background: linear-gradient(315deg, #03a9f4, #ff0058);
+  background: linear-gradient(315deg, #03a9f4, #ff0058);
 }
 
 .container .box:nth-child(129)::before,
 .container .box:nth-child(129)::after {
-    background: linear-gradient(315deg, #4dff03, #00d0ff);
+  background: linear-gradient(315deg, #4dff03, #00d0ff);
 }
 
 .container .box:nth-child(130)::before,
 .container .box:nth-child(130)::after {
-    background: linear-gradient(315deg, #2b3427, #0a596a);
+  background: linear-gradient(315deg, #2b3427, #0a596a);
 }
 
 .container .box:nth-child(131)::before,
 .container .box:nth-child(131)::after {
-    background: linear-gradient(315deg, #ffbc00, #ff0058);
+  background: linear-gradient(315deg, #ffbc00, #ff0058);
 }
 
 .container .box:nth-child(132)::before,
 .container .box:nth-child(132)::after {
-    background: linear-gradient(315deg, #1e470c, #00d0ff);
+  background: linear-gradient(315deg, #1e470c, #00d0ff);
 }
 
 .container .box:nth-child(133)::before,
 .container .box:nth-child(133)::after {
-    background: linear-gradient(315deg, #3a3f38, #6abd1b);
+  background: linear-gradient(315deg, #3a3f38, #6abd1b);
 }
 
 .container .box span {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 50;
-    pointer-events: none;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  pointer-events: none;
 }
 
 .container .box span::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    opacity: 0;
-    transition: 0.5s;
-    animation: animate 2s ease-in-out infinite;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  transition: 0.5s;
+  animation: animate 2s ease-in-out infinite;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
 .container .box:hover span::before {
-    top: -50px;
-    left: 50px;
-    width: 100px;
-    height: 100px;
-    opacity: 1;
+  top: -50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  opacity: 1;
 }
 
 .container .box span::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    opacity: 0;
-    transition: 0.5s;
-    animation: animate 2s ease-in-out infinite;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    animation-delay: -1s;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  transition: 0.5s;
+  animation: animate 2s ease-in-out infinite;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  animation-delay: -1s;
 }
 
 .container .box:hover span::after {
-    bottom: -50px;
-    right: 50px;
-    width: 100px;
-    height: 100px;
-    opacity: 1;
+  bottom: -50px;
+  right: 50px;
+  width: 100px;
+  height: 100px;
+  opacity: 1;
 }
 
 @keyframes animate {
+  0%,
+  100% {
+    transform: translateY(10px);
+  }
 
-    0%,
-    100% {
-        transform: translateY(10px);
-    }
-
-    50% {
-        transform: translateY(-10px);
-    }
+  50% {
+    transform: translateY(-10px);
+  }
 }
 
 .container .box .content {
-    position: relative;
-    left: 0;
-    padding: 20px 40px;
-    background: rgba(255, 255, 255, 0.05);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    backdrop-filter: blur(10px);
-    z-index: 1;
-    transition: 0.5s;
-    color: #fff;
+  position: relative;
+  left: 0;
+  padding: 20px 40px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  z-index: 1;
+  transition: 0.5s;
+  color: #fff;
 }
 
 .container .box:hover .content {
-    left: -25px;
-    padding: 60px 40px;
+  left: -25px;
+  padding: 60px 40px;
 }
 
 .container .box .content h2 {
-    font-size: 2em;
-    color: #fff;
-    margin-bottom: 10px;
-    text-align: center;
+  font-size: 2em;
+  color: #fff;
+  margin-bottom: 10px;
+  text-align: center;
 }
 
 .container .box .content p {
-    font-size: 1.1em;
-    margin-bottom: 10px;
-    line-height: 1.4em;
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  line-height: 1.4em;
 }
 
 .container .box .content a {
-    display: inline-block;
-    font-size: 1.1em;
-    color: #f7dafb;
-    padding: 10px;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 700;
-    margin-top: 5px;
+  display: inline-block;
+  font-size: 1.1em;
+  color: #f7dafb;
+  padding: 10px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 700;
+  margin-top: 5px;
 }
 
 /* Contributors Styling */
 
 .contributors {
-    margin: 0;
-    padding: 0;
-    padding-bottom: 50px;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 50px;
 }
 
 .contributors h1 {
-    text-align: center;
-    color: #cb73d8;
-    font-size: 4rem;
-    margin-bottom: 50px;
+  text-align: center;
+  color: #cb73d8;
+  font-size: 4rem;
+  margin-bottom: 50px;
 }
 
 .contributors h1:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 #contributor {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .contributor-card {
-    width: 65px;
-    height: 65px;
-    clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
-    margin: 5px;
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  width: 65px;
+  height: 65px;
+  clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
+  margin: 5px;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
 .contributor-card:hover {
-    transform: scale(1.35);
-    opacity: 0.85;
+  transform: scale(1.35);
+  opacity: 0.85;
 }
 
 .contributor-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.contributor-card:nth-child(4n+1),
-.contributor-card:nth-child(4n+3) {
-    margin-top: -4px;
+.contributor-card:nth-child(4n + 1),
+.contributor-card:nth-child(4n + 3) {
+  margin-top: -4px;
 }
 
 /* Contributors Styling Ends */
@@ -1362,352 +1520,359 @@ section {
 /* Progress Bar */
 
 #progress {
-    position: fixed;
-    bottom: 20px;
-    right: 10px;
-    height: 50px;
-    width: 50px;
-    z-index: 10;
-    display: none;
-    place-items: center;
-    border-radius: 50%;
-    transition: opacity 0.3s, background-color 0.3s;
-    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
-    cursor: pointer;
+  position: fixed;
+  bottom: 20px;
+  right: 10px;
+  height: 50px;
+  width: 50px;
+  z-index: 10;
+  display: none;
+  place-items: center;
+  border-radius: 50%;
+  transition: opacity 0.3s, background-color 0.3s;
+  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3),
+    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
+    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
+    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
-
 #progress-value {
-    display: block;
-    height: calc(100% - 15px);
-    width: calc(100% - 15px);
-    background-color: rgb(104, 98, 232);
-    background: linear-gradient(90deg, rgb(159, 157, 235) 0%, rgb(212, 153, 222) 39%, rgb(253, 199, 134) 100%);
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 26px;
-    color: black;
+  display: block;
+  height: calc(100% - 15px);
+  width: calc(100% - 15px);
+  background-color: rgb(104, 98, 232);
+  background: linear-gradient(
+    90deg,
+    rgb(159, 157, 235) 0%,
+    rgb(212, 153, 222) 39%,
+    rgb(253, 199, 134) 100%
+  );
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 26px;
+  color: black;
 }
 
 /* Footer Section Css */
 
 .footer-basic {
-    width: 100%;
-    padding: 40px 0;
-    background-color: rgb(9, 5, 40, 0.9);
+  width: 100%;
+  padding: 40px 0;
+  background-color: rgb(9, 5, 40, 0.9);
 }
 
 .footer-basic ul {
-    padding: 0;
-    list-style: none;
-    text-align: center;
-    font-size: 18px;
-    line-height: 1.6;
-    margin-bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  font-size: 18px;
+  line-height: 1.6;
+  margin-bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .footer-basic li {
-    padding: 0 10px;
+  padding: 0 10px;
 }
 
 .footer-basic ul a {
-    color: var(--light);
-    padding: 8px;
-    font-weight: 500;
-    border: 1px solid transparent;
-    text-decoration: none;
-    transition: 0.3s ease-in;
-    opacity: 0.8;
+  color: var(--light);
+  padding: 8px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  text-decoration: none;
+  transition: 0.3s ease-in;
+  opacity: 0.8;
 }
 
 .footer-basic ul a:hover {
-    opacity: 1;
-    color: var(--primary);
-    border-top-color: var(--primary);
-    border-bottom-color: var(--primary);
+  opacity: 1;
+  color: var(--primary);
+  border-top-color: var(--primary);
+  border-bottom-color: var(--primary);
 }
 
 .footer-basic .social {
-    text-align: center;
-    padding-bottom: 25px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
+  text-align: center;
+  padding-bottom: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .social {
-    font-size: 3.5rem;
-    text-decoration: none;
-    margin: 0 1rem;
-    transition: 0.3s ease-in-out;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2rem;
+  font-size: 3.5rem;
+  text-decoration: none;
+  margin: 0 1rem;
+  transition: 0.3s ease-in-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
 }
 
 .social a {
-    color: var(--secondary);
+  color: var(--secondary);
 }
 
 .social a:hover {
-    color: var(--primary);
+  color: var(--primary);
 }
 
 .footer-basic .copyright {
-    margin-top: 15px;
-    text-align: center;
-    font-size: 13px;
-    color: rgb(255, 255, 255);
-    margin-bottom: 0;
+  margin-top: 15px;
+  text-align: center;
+  font-size: 13px;
+  color: rgb(255, 255, 255);
+  margin-bottom: 0;
 }
 
 /* Sticky ScrollToTop Button */
 
 .scrollToTopContainer {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    margin: 0 2rem 2rem 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 0 2rem 2rem 0;
 
-    height: fit-content;
-    width: fit-content;
-    z-index: 100000;
+  height: fit-content;
+  width: fit-content;
+  z-index: 100000;
 }
 
 .scrollToTopButton {
-    border-radius: 100%;
-    height: 42px;
-    width: 42px;
-    background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 100%;
+  height: 42px;
+  width: 42px;
+  background-color: rgba(255, 255, 255, 0.9);
 
-    border: 0;
-    cursor: pointer;
-    box-shadow: 0px 0px 10px 1px palevioletred;
+  border: 0;
+  cursor: pointer;
+  box-shadow: 0px 0px 10px 1px palevioletred;
 }
 
 .HideElement {
-    display: none;
+  display: none;
 }
 
 /* MEDIA QUERY */
 
 @media (max-width: 1030px) {
-    .hero-section {
-        flex-direction: column;
-        text-align: center;
-        width: auto;
-        height: 80vh;
-    }
+  .hero-section {
+    flex-direction: column;
+    text-align: center;
+    width: auto;
+    height: 80vh;
+  }
 }
 
 @media (max-width: 925px) {
-    .hero-section {
-        flex-direction: column;
-        text-align: center;
-        width: auto;
-        height: 85vh;
-    }
+  .hero-section {
+    flex-direction: column;
+    text-align: center;
+    width: auto;
+    height: 85vh;
+  }
 
-    .herocontainer {
-        border: 1px transparent;
-        padding-bottom: 10px;
-    }
+  .herocontainer {
+    border: 1px transparent;
+    padding-bottom: 10px;
+  }
 }
 
 @media (max-width: 786px) {
-    .hero-section {
-        flex-direction: column;
-        text-align: center;
-        width: auto;
-        height: 95vh;
-    }
+  .hero-section {
+    flex-direction: column;
+    text-align: center;
+    width: auto;
+    height: 95vh;
+  }
 
-    .herocontainer {
-        border: 1px transparent;
+  .herocontainer {
+    border: 1px transparent;
 
-        padding-bottom: 10px;
-    }
+    padding-bottom: 10px;
+  }
 
-    #mySearch {
-        height: 6rem;
-        width: 50rem;
-    }
+  #mySearch {
+    height: 6rem;
+    width: 50rem;
+  }
 
-    .comp-section h1 {
-        font-size: 55px;
-    }
+  .comp-section h1 {
+    font-size: 55px;
+  }
 
-    .footer-basic>footer>ul>li>a {
-        font-size: 15px;
-    }
+  .footer-basic > footer > ul > li > a {
+    font-size: 15px;
+  }
 }
 
 @media (max-width: 500px) {
-    .hero-section {
-        height: 98vh;
-    }
+  .hero-section {
+    height: 98vh;
+  }
 
-    .herocontainer {
-        border: 1px transparent;
-        padding-bottom: 10px;
-    }
+  .herocontainer {
+    border: 1px transparent;
+    padding-bottom: 10px;
+  }
 
-    #mySearch {
-        height: 5rem;
-        width: 30rem;
-        font-size: 1.6rem;
-    }
+  #mySearch {
+    height: 5rem;
+    width: 30rem;
+    font-size: 1.6rem;
+  }
 }
 
 @media only screen and (max-width: 768px) {
-    .nav-menu {
-        position: fixed;
-        height: 100%;
-        left: -100%;
-        top: 5rem;
-        flex-direction: column;
-        background-color: black;
-        width: 100%;
-        border-radius: 10px;
-        text-align: center;
-        transition: 0.3s;
-        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
-    }
-
-    .herocontainer {
-        padding: 40px;
-    }
-
-    .herocontainer h1 {
-        font-size: 400%;
-        padding-bottom: 40px;
-    }
-
-    .herocontainer h3 {
-        font-size: 200%;
-        padding-bottom: 40px;
-    }
-
-    .herocontainer p {
-        font-size: 120%;
-        text-align: center;
-    }
-
-    .nav-menu.active {
-        left: 0;
-    }
-
-    .nav-item {
-        margin: 2.5rem 0;
-        font-size: 20px;
-    }
-
-    nav li:hover {
-        border-bottom: 0.4rem var(--secondary-color) solid;
-        transition: 0.3s ease-in-out;
-    }
-
-    .hamburger {
-        display: block;
-        cursor: pointer;
-    }
-
-    .hamburger.active .bar:nth-child(2) {
-        opacity: 0;
-    }
-
-    .hamburger.active .bar:nth-child(1) {
-        transform: translateY(8px) rotate(45deg);
-    }
-
-    .hamburger.active .bar:nth-child(3) {
-        transform: translateY(-8px) rotate(-45deg);
-    }
+  .nav-menu {
+    position: fixed;
+    height: 100%;
+    left: -100%;
+    top: 5rem;
+    flex-direction: column;
+    background-color: black;
+    width: 100%;
+    border-radius: 10px;
+    text-align: center;
+    transition: 0.3s;
+    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+  }
+
+  .herocontainer {
+    padding: 40px;
+  }
+
+  .herocontainer h1 {
+    font-size: 400%;
+    padding-bottom: 40px;
+  }
+
+  .herocontainer h3 {
+    font-size: 200%;
+    padding-bottom: 40px;
+  }
+
+  .herocontainer p {
+    font-size: 120%;
+    text-align: center;
+  }
+
+  .nav-menu.active {
+    left: 0;
+  }
+
+  .nav-item {
+    margin: 2.5rem 0;
+    font-size: 20px;
+  }
+
+  nav li:hover {
+    border-bottom: 0.4rem var(--secondary-color) solid;
+    transition: 0.3s ease-in-out;
+  }
+
+  .hamburger {
+    display: block;
+    cursor: pointer;
+  }
+
+  .hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+  }
+
+  .hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+
+  .hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
 }
 
 .trynow-button {
-    transition: transform .2s;
+  transition: transform 0.2s;
 }
 
 .trynow-button:hover {
-    transform: scale(1.15);
+  transform: scale(1.15);
 }
 
 .footer-links {
-    transition: transform .2s;
+  transition: transform 0.2s;
 }
 
 .footer-links:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 /* Search Bar Css */
 
 #searchBar {
-    text-align: center;
-    border-radius: 14px;
-    margin: 2rem 2rem 0;
-    color: white;
-    width: 100%;
+  text-align: center;
+  border-radius: 14px;
+  margin: 2rem 2rem 0;
+  color: white;
+  width: 100%;
 }
 
 #searchBar h1 {
-    font-family: Ubuntu;
-    font-size: 4rem;
-    text-shadow: 2px 2px 10px var(--light);
-    margin-top: 16px;
+  font-family: Ubuntu;
+  font-size: 4rem;
+  text-shadow: 2px 2px 10px var(--light);
+  margin-top: 16px;
 }
 
 #searchBar button {
-    font-size: 2.5rem;
-    background: transparent;
-    border: 0;
-    color: white;
-    margin-left: 1rem;
-    background-color: #ff1b82;
-    padding: .7rem;
-    width: 8rem;
-    border-radius: 5rem;
+  font-size: 2.5rem;
+  background: transparent;
+  border: 0;
+  color: white;
+  margin-left: 1rem;
+  background-color: #ff1b82;
+  padding: 0.7rem;
+  width: 8rem;
+  border-radius: 5rem;
 }
 
 #searchBar button:hover {
-    transform: scale(1.02);
-    background: #ff6984;
+  transform: scale(1.02);
+  background: #ff6984;
 }
 
 #searchBar input {
-    font-family: 'Poppins', sans-serif;
-    border: 0;
-    padding: 1rem;
-    height: 4rem;
-    font-size: 2rem;
-    text-align: center;
-    border-radius: 2rem;
-    width: 40rem;
-    transition: all linear .2s;
-    font-weight: 600;
+  font-family: "Poppins", sans-serif;
+  border: 0;
+  padding: 1rem;
+  height: 4rem;
+  font-size: 2rem;
+  text-align: center;
+  border-radius: 2rem;
+  width: 40rem;
+  transition: all linear 0.2s;
+  font-weight: 600;
 }
 
 #searchBar input:hover {
-    transform: scale(1.02);
-    box-shadow: -5px -5px 10px #682572;
+  transform: scale(1.02);
+  box-shadow: -5px -5px 10px #682572;
 }
 
 @media (max-width: 650px) {
-    #searchBar input {
-        width: 100%;
-        font-size: 1.5rem;
-    }
-
-    #searchBar button {
-        margin-top: 0.5em;
-    }
+  #searchBar input {
+    width: 100%;
+    font-size: 1.5rem;
+  }
+
+  #searchBar button {
+    margin-top: 0.5em;
+  }
 }