i have succssfully updated the div and added the hover effect over it

about.html

@@ -73,11 +73,12 @@ <h3>PRIYA Ghosal</h3>
                   </P>
               </div>
                  <div class="team-description">
-                    <p style="color: white;"> Behind BuddyTrail is a diverse team of travel enthusiasts, tech innovators, and customer experience experts.
+                    <p style="color: rgb(0, 0, 0);"> Behind BuddyTrail is a diverse team of travel enthusiasts, tech innovators, and customer experience experts.
                         United by our love for exploration and commitment to excellence, we work tirelessly to ensure your journey with
                         us is seamless, inspiring, and unforgettable.</p>
+                        <div class="align1">  
                         <a href="team.html" id="cta-button">The BuddyTrail Team</a>
-
+                        </div>
               </div> 
 
 
@@ -90,12 +91,20 @@ <h3>PRIYA Ghosal</h3>
  /* Global Styles */
 
  /* CTA Button */
-
-
+.align1{
+    width: 255px;
+    height: 50px;
+    display: flex;
+    align-self: flex-end;
+    margin-bottom: 10px;
+    justify-content: center;
+    margin-top: 55px;
+    margin-right: 220px;   
+}
 #cta-button {
-   margin-left: 300px;
-    display: inline-block;
-    padding: 10px 10px;  /* Adjust padding for button size */
+    display: flex;
+    justify-content: center;
+    padding: 5px;/* Adjust padding for button size */    
     background-color: #000;  /* Background color black */
     color: #fff;  /* Text color white */
     text-align: center;
@@ -104,9 +113,9 @@ <h3>PRIYA Ghosal</h3>
     border-radius: 5px;  /* Rounded corners */
     width: 250px;  /* Fixed width */
     height: 45px;  /* Fixed height */
-    line-height: 30px;  /* Vertically center text */
+    line-height: 35px;  /* Vertically center text */
     transition: background-color 0.3s ease, transform 0.3s ease;
-    margin-bottom: 20px;
+
 }
 
 /* Hover Effect */
@@ -116,15 +125,24 @@ <h3>PRIYA Ghosal</h3>
 }
 
  .team-description{
-
-  border: 2px solid black;
-  border-radius: 10%;
-  background-color: #286db3;
-  font-weight: bolder;
-  position:relative;
-  left: 35%;
-  top: -300px;
-  display: inline-block;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    background-color: #eef5f9;
+    border-radius: 10px;
+    padding: auto;
+    width: 700px;
+    height: 350px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.4s ease;
+    border: 2px solid transparent;
+ }
+ .team-description:hover{
+    background: linear-gradient(45deg, #ff66b2, #c0c0c0); /* Pink-silver gradient */
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    border-color: #007BFF;
  }
 body {
     font-family: 'Poppins', sans-serif;