Improve feedback button according to you

index.html

@@ -392,13 +392,10 @@ <h2 class="heading">Contact <span>Us!</span></h2>
 
         <textarea name="" id="" cols="30" rows="10" placeholder="Your Message" required></textarea>
         <input type="submit" class="btn" id="contact-btn"><br>
+        </form>
         <div class="button-container">
           <button id="review-btn">Give feedback</button>
         </div>
-
-
-        </form>
-
     </section>
 
 <!-- Modal  -->

style.css

@@ -877,75 +877,77 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 #review-btn {
-  padding: 12px 20px;
+  padding: 10px 20px;
   border: none;
-  border-radius: 5px;
-  background-color: #FFA07A;
-  color: #fff;
+  border-radius: 5px 0 0 5px;
+  background-color: #00BFFF;
+  color: white;
   font-size: 16px;
+  writing-mode: vertical-rl;
   cursor: pointer;
   transition: background-color 0.3s ease;
-  display: inline-block; /* Ensure it behaves like a button */
+  position: absolute;
+  right: 0; /* Attach to the right edge */
+  top: 50%; /* Vertically center */
+  transform: translateY(-50%); /* Adjust for centering */
+  white-space: nowrap; /* Prevent text from wrapping */
 }
 
 #review-btn:hover {
-  cursor: pointer;
-  box-shadow: 0 4px 6px rgba(183, 253, 6, 0.1); 
-  background-color: #FF6347;
+  background-color: #1E90FF;
 }
 
 .button-container {
-  text-align: left; /* Ensure the container aligns its children to the left */
-  margin-top: 10px;
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 200; /* Ensure it stays on top */
 }
 
 /* Modal styles */
 .modal {
-  display: none;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
+  display: none; /* Hidden by default */
   position: fixed;
-  z-index: 101;
+  z-index: 100; /* Behind the button */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  /*overflow: auto;*/
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
+  justify-content: center;
+  align-items: center;
 }
 
 .modal-content {
-  background-color: #ffffff;
-  margin: 10% auto;
-  padding: 30px;
-  border-radius: 10px;
-  width: 70%;
-  max-width: 500px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+    margin: auto;
+    padding: 20px;
+    border-radius: 5px;
+    width: 80%;
+    max-width: 500px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
 }
 
 .close {
   color: #aaa;
   float: right;
-  font-size: 24px;
+  font-size: 28px;
   font-weight: bold;
-  cursor: pointer;
 }
 
 .close:hover,
 .close:focus {
-  color: #000;
+  color: black;
+    text-decoration: none;
+    cursor: pointer;
 }
 
 .modal-content h2 {
   margin-top: 0;
-  margin-bottom: 20px;
-  text-align: center;
-  color:black;
-  font-size: 20px;
+    margin-bottom: 15px;
+    text-align: center;
 }
 
 .modal-content label {