diff --git a/assets/css/contact.css b/assets/css/contact.css
index 926032a..bafcc68 100644
--- a/assets/css/contact.css
+++ b/assets/css/contact.css
@@ -6,29 +6,40 @@
 
 body {
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f4f4f4;
+    background: linear-gradient(to bottom, #e9f5e9, #cce8cc); /* Soft gradient */
     color: #333;
 }
+
 .getback {
     top: 20px;
     left: 20px;
     position: absolute;
-    background-color: #28a745;
+    background: linear-gradient(90deg, #28a745, #218838);
     color: white;
-    padding: 10px 20px;
+    padding: 12px 22px;
     border-radius: 8px;
     text-align: center;
     text-decoration: none;
     font-family: "Arial", sans-serif;
     font-weight: bold;
-    font-size: 16px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    font-size: 18px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
 }
 
 .getback:hover {
-    background-color: #218838;
-    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+    transform: translateY(-2px);
+    animation: pulse 0.5s infinite alternate; /* Add pulse animation */
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(1.05);
+    }
 }
 
 .container2 {
@@ -40,12 +51,14 @@ body {
 .header {
     text-align: center;
     padding: 30px 20px;
+    position: relative;
 }
 
 .header h1 {
     font-size: 36px;
-    color: green;
+    color: #28a745;
     margin-bottom: 10px;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .header p {
@@ -64,15 +77,17 @@ body {
     flex: 1 1 500px;
     background-color: #fff;
     padding: 30px;
-    border-radius: 8px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    border-radius: 12px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     margin-bottom: 20px;
+    position: relative;
 }
 
 .contact-form h2 {
     font-size: 28px;
     color: #333;
     margin-bottom: 20px;
+    border-bottom: 2px solid #28a745; /* Underline */
 }
 
 .contact-form label {
@@ -87,9 +102,16 @@ body {
     width: 100%;
     padding: 12px;
     margin-bottom: 20px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 2px solid #ddd;
+    border-radius: 6px;
     font-size: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: border 0.3s ease;
+}
+
+.contact-form input:focus,
+.contact-form textarea:focus {
+    border-color: #28a745; /* Green focus border */
 }
 
 .contact-form textarea {
@@ -98,18 +120,20 @@ body {
 }
 
 .contact-form .submit-btn {
-    background-color: green;
+    background: linear-gradient(90deg, #28a745, #218838);
     color: white;
     padding: 12px 24px;
     border: none;
-    border-radius: 4px;
+    border-radius: 6px;
     font-size: 18px;
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: background 0.3s ease, transform 0.2s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .contact-form .submit-btn:hover {
-    background-color: rgb(35, 144, 35);
+    background: linear-gradient(90deg, #218838, #1e7e34); /* Darker green */
+    transform: translateY(-1px);
 }
 
 /* Contact Information Styling */
@@ -117,18 +141,19 @@ body {
     flex: 1 1 400px;
     background-color: #282c34;
     padding: 30px;
-    border-radius: 8px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     color: white;
     margin-bottom: 20px;
+    position: relative;
 }
 
 .contact-info h2 {
     font-size: 28px;
-    color: green;
+    color: #28a745;
     margin-bottom: 20px;
     text-align: center;
-    border-bottom: 2px solid green;
+    border-bottom: 2px solid #28a745;
     padding-bottom: 10px;
 }
 
@@ -138,12 +163,6 @@ body {
     align-items: center;
 }
 
-.contact-info .info-icon {
-    font-size: 30px;
-    margin-right: 15px;
-    color: green;
-}
-
 .contact-info .info h3 {
     font-size: 20px;
     color: #fff;
@@ -156,9 +175,10 @@ body {
     margin-top: 0;
 }
 
-.info-icon svg {
-    width: 30px;
-    height: 30px;
+.contact-info .info-icon {
+    width: 24px; /* Adjust icon width */
+    height: 24px; /* Adjust icon height */
+    margin-right: 15px; /* Space between icon and text */
 }
 
 /* Map Section */
@@ -167,8 +187,31 @@ body {
     width: 100%;
     height: 400px;
     background-color: #ddd;
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Add tree texture as a background */
+.contact-form::before,
+.contact-info::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('tree-texture.png') no-repeat center center;
+    opacity: 0.05; /* Subtle texture effect */
+    z-index: 0;
+    border-radius: 12px;
+}
+
+.contact-form h2,
+.contact-info h2,
+.getback {
+    position: relative; /* To bring text above the background */
+    z-index: 1;
 }
 
 /* Media queries for responsive design */
diff --git a/contact.html b/contact.html
index 21888ca..ce07e36 100644
--- a/contact.html
+++ b/contact.html
@@ -1,164 +1,88 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Contact Us</title>
-        <link rel="stylesheet" href="assets/css/contact.css" />
-    </head>
-    <body>
-        <a href="index.html" class="getback"> ← Back </a>
-        <div class="container2">
-            <!-- Header Section -->
-            <div class="header">
-                <h1>Contact Us</h1>
-                <p>
-                    We're here to help! Get in touch with us through the form or
-                    details below.
-                </p>
-            </div>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact Us</title>
+    <link rel="stylesheet" href="assets/css/contact.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-kXaK6D6E4bZC31t2jUw5A9bGZ5DL44b/a3RbT0/aey2HS7HXtxaG3hnFQF4UvF5LJbxO2dB7RLDuMA17gAYvg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <a href="index.html" class="getback"> ← Back </a>
+    <div class="container2">
+        <!-- Header Section -->
+        <div class="header">
+            <h1>Contact Us</h1>
+            <p>We're here to help! Get in touch with us through the form or details below.</p>
+        </div>
 
-            <!-- Contact Form and Info Section -->
-            <div class="contact-wrapper">
-                <!-- Contact Form -->
-                <div class="contact-form">
-                    <h2 style="color: green">Send Us a Message</h2>
-                    <form action="#" method="POST">
-                        <label for="name">Full Name</label>
-                        <input
-                            type="text"
-                            id="name"
-                            name="name"
-                            placeholder="Your full name..."
-                            required
-                        />
+        <!-- Contact Form and Info Section -->
+        <div class="contact-wrapper">
+            <!-- Contact Form -->
+            <div class="contact-form">
+                <h2 style="color: green">Send Us a Message</h2>
+                <form action="#" method="POST">
+                    <label for="name">Full Name</label>
+                    <input type="text" id="name" name="name" placeholder="Your full name..." required />
 
-                        <label for="email">Email Address</label>
-                        <input
-                            type="email"
-                            id="email"
-                            name="email"
-                            placeholder="Your email..."
-                            required
-                        />
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" placeholder="Your email..." required />
 
-                        <label for="message">Your Message</label>
-                        <textarea
-                            id="message"
-                            name="message"
-                            placeholder="Write your message here..."
-                            required
-                        ></textarea>
+                    <label for="message">Your Message</label>
+                    <textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
 
-                        <button type="submit" class="submit-btn">
-                            Send Message
-                        </button>
-                    </form>
-                </div>
+                    <button type="submit" class="submit-btn">Send Message</button>
+                </form>
+            </div>
 
-                <!-- info section -->
-                <div class="contact-info">
-                    <h2>Our Contact Information</h2>
-                    <div class="info">
-                        <span class="info-icon">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M3 10l4.621 4.62a2 2 0 010 2.829l-1.42 1.42a12 12 0 007.621 7.621l1.42-1.42a2 2 0 012.829 0L21 21"
-                                />
-                            </svg>
-                        </span>
-                        <div>
-                            <h3>Phone</h3>
-                            <p>+1 234 567 890</p>
-                        </div>
+            <!-- Info section -->
+            <div class="contact-info">
+                <h2>Our Contact Information</h2>
+                <div class="info">
+                    <span class="info-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M3 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3zm0-2h18V5H3v14zm1-11h2v2H4v-2zm0 4h2v2H4v-2zm0 4h2v2H4v-2zm4-8h2v2H8V8zm0 4h2v2H8v-2zm0 4h2v2H8v-2zm4-8h2v2h-2V8zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>
+                    </span>
+                    <div>
+                        <h3>Phone</h3>
+                        <p>+1 234 567 890</p>
                     </div>
-                    <div class="info">
-                        <span class="info-icon">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M16 12l-4 4m0 0l-4-4m4 4V8"
-                                />
-                            </svg>
-                        </span>
-                        <div>
-                            <h3>Email</h3>
-                            <p>support@yourcompany.com</p>
-                        </div>
+                </div>
+                <div class="info">
+                    <span class="info-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M3.5 6.1a1.1 1.1 0 011.2-1.1c3.1.2 6.2 1 9.3 2.6a1 1 0 01.4 1.4c-1.2 1.5-2.3 3-3.5 4.4a14.1 14.1 0 01-5.6 2.2c-.6.1-1.1-.3-1.4-.8l-.6-1.3c-.3-.7-.1-1.5.5-1.9.9-.7 1.7-1.6 2.5-2.4 1.3-1.1 2.7-2.4 3.8-3.8a1 1 0 00.1-1.2c-2.9-1.5-5.8-2.3-8.8-2.3a1.1 1.1 0 00-1.1 1.1c0 4.4 2.5 8.4 6.3 10.5.4.2.6.6.6 1.1 0 .6-.5 1.2-1.2 1.3C4.5 18.5 2.5 16.4 2 13.4c-.2-1 .4-2.1 1.2-2.6.5-.3 1.2-.3 1.7.2 1.5 1.3 3.1 2.6 4.8 3.7a1.1 1.1 0 001.6-.2c1.4-1.7 2.8-3.4 4-5.3 1.4-2.3 2-4.7 2.2-7.3a1.1 1.1 0 00-1.1-1.2c-1.6 0-3.2.2-4.8.6a1 1 0 01-.7-1.8c1.8-.4 3.7-.6 5.6-.6a3.3 3.3 0 013.3 3.3c-.1 3.5-1.2 7-3.2 9.9a1 1 0 00.1 1.4c2.8 1.7 4.6 4.5 4.6 7.3 0 2.4-1.5 4.7-4.1 5.6-1 .3-2.1.3-3.1.1-1.2-.3-2.2-1-2.8-2.2a1 1 0 00-1.8-.1c-2.4 4.2-8.7 5.2-12.3 1.9z"/></svg>
+                    </span>
+                    <div>
+                        <h3>Email</h3>
+                        <p>support@yourcompany.com</p>
                     </div>
-                    <div class="info">
-                        <span class="info-icon">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M12 11.8l8 8m0 0L12 11.8m0 0l-8 8M12 11.8L8 16.4"
-                                />
-                            </svg>
-                        </span>
-                        <div>
-                            <h3>Office Address</h3>
-                            <p>1234 Example St, City, Country</p>
-                        </div>
+                </div>
+                <div class="info">
+                    <span class="info-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M12 2l10 8-10 8-10-8 10-8zm0 12l2 2-2 2-2-2 2-2z"/></svg>
+                    </span>
+                    <div>
+                        <h3>Office Address</h3>
+                        <p>1234 Example St, City, Country</p>
                     </div>
-                    <div class="info">
-                        <span class="info-icon">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M12 8v4l2 2m8 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                                />
-                            </svg>
-                        </span>
-                        <div>
-                            <h3>Business Hours</h3>
-                            <p>Mon - Fri, 9:00 AM - 6:00 PM</p>
-                        </div>
+                </div>
+                <div class="info">
+                    <span class="info-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M12 8v4l2 2m8 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </span>
+                    <div>
+                        <h3>Business Hours</h3>
+                        <p>Mon - Fri, 9:00 AM - 6:00 PM</p>
                     </div>
                 </div>
             </div>
+            
+        </div>
 
-            <!-- Map Section -->
-            <div class="map">
-                <iframe
-                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509363!2d144.95373531532174!3d-37.81627977975178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577f564f693dd7a!2sVictoria%20Market!5e0!3m2!1sen!2sin!4v1603119239336!5m2!1sen!2sin"
-                    width="100%"
-                    height="100%"
-                    frameborder="0"
-                    style="border: 0"
-                    allowfullscreen=""
-                    aria-hidden="false"
-                    tabindex="0"
-                ></iframe>
-            </div>
+        <!-- Map Section -->
+        <div class="map">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509363!2d144.95373531532174!3d-37.81627977975178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577f564f693dd7a!2sVictoria%20Market!5e0!3m2!1sen!2sin!4v1603119239336!5m2!1sen!2sin"
+                width="100%" height="100%" frameborder="0" style="border: 0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
         </div>
-    </body>
+    </div>
+</body>
 </html>
diff --git a/index.html b/index.html
index f19a0e6..93b967c 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
             rel="stylesheet"
         />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
+
         <title>Tree2Hope</title>
 
         <!-- font awesome cdn -->