diff --git a/contactus.html b/contactus.html
index 410fb86..76f78c4 100644
--- a/contactus.html
+++ b/contactus.html
@@ -21,10 +21,23 @@
         }
 
         .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
+            width: 100%;
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 2rem;
+            background: linear-gradient(135deg, #ead6ee, #a0f1ea);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
+        .container h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            /* Bigger typography */
+            font-weight: bold;
+            margin-bottom: 30px;
+            color: #ff4d4d;
+            cursor: default;
+    }
 
         /* Navbar */
         nav {
@@ -123,8 +136,92 @@
             font-weight: bold;
         }
 
+        /*new form-cont css*/
+        .form-cont {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      text-align: left;
+    }
+    .form-cont textarea {
+        width: 100%;
+        padding: 16px 12px;
+        font-size: 16px;
+        color: #3a506b;
+        background: #e6f0fa;
+        border: 1px solid #b3c7d6;
+        border-radius: 5px;
+        outline: none;
+        transition: 0.3s border-color ease-in-out;
+    }
+    form label {
+      font-weight: 600;
+      color: #333;
+      width: 100%;
+    }
+
+    form input,
+    form select {
+      width: 100%;
+      align-self: center;
+
+      border: 1px solid #ccc;
+      border-radius: 0px;
+      border: none;
+      border-bottom: 2px solid #ccc;
+      font-size: 1rem;
+      background-color: transparent;
+      transition: all 0.3s ease-in-out;
+    }
+
+    form input[type="text"]:focus,
+    form input[type="date"]:focus,
+    form input[type="time"]:focus,
+    form input[type="email"]:focus,
+    form select:focus {
+      outline: none;
+      background-color: transparent;
+      border-bottom: 2px solid #ff4d4d;
+      /* White bottom border on focus */
+    }
+
+    form .btn {
+      background-color: #ff4d4d;
+      border: 2px solid #ff4d4d;
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: bold;
+      padding: 25px;
+      width: 100%;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1.25rem;
+      margin-top: 30px;
+    }
+
+
+    form .btn:hover {
+      background-color: transparent;
+      color: #ff4d4d;
+    }
+    /* Floating label effect */
+    .form-group input:focus + label,
+    .form-group textarea:focus + label,
+    .form-group input:not(:placeholder-shown) + label,
+    .form-group textarea:not(:placeholder-shown) + label {
+        top: -8px;
+        left: 8px;
+        font-size: 12px;
+        background-color: #f0f4f8;
+        color: #5c91ad;
+        padding: 0 5px;
+        border-radius: 3px;
+    }
+
         /* Form Group and Floating Label */
-        .form-group {
+        /*.form-group {
             position: relative;
             margin-bottom: 25px;
         }
@@ -156,8 +253,9 @@
             transition: 0.3s ease-in-out;
             pointer-events: none;
         }
-
+*/
         /* Floating label effect */
+        /*
         .form-group input:focus + label,
         .form-group textarea:focus + label,
         .form-group input:not(:placeholder-shown) + label,
@@ -172,6 +270,7 @@
         }
 
         /* Submit Button */
+        /*
         .submit-btn {
             background-color: #ff8c00;
             color: #fff;
@@ -189,7 +288,7 @@
             background-color: #2e3b4e;
             color: #ff8c00;
         }
-
+*/
         /* Footer */
         /* footer {
             background-color: #2e3b4e;
@@ -267,32 +366,121 @@
       </nav>
     <!-- Contact Form Section -->
     <section class="container">
-        <div class="contact-form">
-            <h2>Contact Us</h2>
-            <form>
-                <div class="form-group">
-                    <input type="text" id="name" name="name" required placeholder=" ">
-                    <label for="name">Full Name</label>
-                </div>
-                <div class="form-group">
-                    <input type="email" id="email" name="email" required placeholder=" ">
-                    <label for="email">Email Address</label>
-                </div>
-                <div class="form-group">
-                    <input type="text" id="subject" name="subject" required placeholder=" ">
-                    <label for="subject">Subject</label>
-                </div>
-                <div class="form-group">
+        <!--<div class="contact-form">--> <!--removed div to match it with the differnt forms in the website-->
+            <h1>Contact Us</h1>
+            <form id="contactForm">
+                <div class="form-cont">
+                    <label for="name">Your Name:</label>
+                    <input type="text" id="name" placeholder="Enter your full name" required>
+                  </div>
+                  <div class="form-cont">
+                    <label for="email">Email Address:</label>
+                    <input type="text" id="email" placeholder="Enter your email" required>
+                  </div>
+                  <div class="form-cont">
+                    <label for="name">Subject:</label>
+                    <input type="text" id="subject" placeholder="Enter the subject" required>
+                  </div>
+                  <div class="form-cont">
+                    <label for="name">Message:</label>
                     <textarea id="message" name="message" rows="5" required placeholder=" "></textarea>
-                    <label for="message">Your Message</label>
-                </div>
-                <button type="submit" class="submit-btn">Send Message</button>
+                  </div>
+                  <button type="submit" class="btn">Submit Ticket</button>
             </form>
-        </div>
+        <!--</div>-->
     </section>
 
     <!-- Footer -->
     <footer class="footer-container">
+      <div class="footer-top">
+<footer>
+
+    <div class="footer-logo-section">
+        <a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
+        <p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
+        <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
+        <div class="social-icons">
+          <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
+          <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
+          <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
+          <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
+          <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
+      </div>      
+    </div>
+  
+    <div class="footer-container">
+        <div class="footer-logo-section">
+            <a href="#"><img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
+            <p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
+            <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
+            <div class="social-icons">
+                <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
+                <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
+                <a href="https://www.twitter.com"><i class="fa-brands fa-x-twitter"></i></a>
+                <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
+                <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
+            </div>
+        </div>
+
+
+        <div class="footer-links">
+            <div class="footer-column">
+                <h4>HELPFUL LINKS</h4>
+                <ul>
+                    <li><a href="#">Help Centre</a></li>
+                    <li><a href="#">Special Assistance</a></li>
+                    <li><a href="#">Download The App</a></li>
+                    <li><a href="#">Booking Conditions</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h4>ABOUT US</h4>
+                <ul>
+                    <li><a href="#">Media Center</a></li>
+                    <li><a href="#">Investors</a></li>
+                    <li><a href="ModernSlaveryAct.html">Modern Slavery Act</a></li>
+                    <li><a href="terms.html">Terms Of Use</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h4>KEEPING SAFE</h4>
+                <ul>
+                    <li><a href="#">ATOL Protected</a></li>
+                    <li><a href="./travelawares.html">Travel Aware</a></li>
+                    <li><a href="fcdoTravel.html">FCDO Travel Advice</a></li>
+                    <li><a href="#">ABTA</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h4>FIND US</h4>
+                <ul>
+                    <li><a href="contactus.html">Contact Us</a></li>
+                    <li><a href="GroupCookieNotice.html">Group Cookie Notice</a></li>
+                    <li><a href="privacy.html">Privacy And Policy</a></li>
+                    <li><a href="sitemap.html">Sitemap</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <ul>
+                <li><a href="#">Holiday Type</a></li>
+                <li><a href="#">Holiday Deals</a></li>
+                <li><a href="#">Popular Counters</a></li>
+                <li><a href="#">Top Hotels</a></li>
+            </ul>
+        </div>
+    </div>
+</footer>
+
+
+          
+<!-- <style>
+/* General Footer Styling */
+.footer-container {
         <div class="footer-top">
           
          
@@ -473,7 +661,344 @@ <h4>FIND US</h4>
   }
 </style>
 
-  
+
+<style>
+    /* Social Media Icons */
+    .social-icons a {
+      display: inline-block;
+      margin: 0 10px;
+      color: #12e9cc;
+      font-size: 1.5rem;
+      text-decoration: none;
+    }
+    .social-icons a:hover {
+      color: #76b2ab;
+    }
+
+    /* Contact Form Styling */
+    .contact-form {
+        background-color: #f0f4f8;
+        padding: 40px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        margin-top: 30px;
+        animation: fadeIn 1.2s ease-in-out;
+    }
+
+    .contact-form h2 {
+        margin-bottom: 20px;
+        color: #3a506b;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    /* Form Group and Floating Label */
+    /*.form-group {
+        position: relative;
+        margin-bottom: 25px;
+    }
+
+    .form-group input,
+    .form-group textarea {
+        width: 100%;
+        padding: 16px 12px;
+        font-size: 16px;
+        color: #3a506b;
+        background: #e6f0fa;
+        border: 1px solid #b3c7d6;
+        border-radius: 5px;
+        outline: none;
+        transition: 0.3s border-color ease-in-out;
+    }
+
+    .form-group input:focus,
+    .form-group textarea:focus {
+        border-color: #5c91ad;
+        background-color: #ffffff;
+    }
+
+    .form-group label {
+        position: absolute;
+        top: 50%;
+        left: 12px;
+        transform: translateY(-50%);
+        color: #6c757d;
+        font-size: 16px;
+        transition: 0.3s ease-in-out;
+        pointer-events: none;
+    }
+*/
+    /*added new form to have uniformity*/
+    form {
+      display: flex;
+      width: 100%;
+      height: auto;
+    }
+
+    .form-cont {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      text-align: left;
+    }
+    .form-cont textarea {
+        width: 100%;
+        padding: 16px 12px;
+        font-size: 16px;
+        color: #3a506b;
+        background: #e6f0fa;
+        border: 1px solid #b3c7d6;
+        border-radius: 5px;
+        outline: none;
+        transition: 0.3s border-color ease-in-out;
+    }
+    form label {
+      font-weight: 600;
+      color: #333;
+      width: 100%;
+    }
+
+    form input,
+    form select {
+      width: 100%;
+      align-self: center;
+
+      border: 1px solid #ccc;
+      border-radius: 0px;
+      border: none;
+      border-bottom: 2px solid #ccc;
+      font-size: 1rem;
+      background-color: transparent;
+      transition: all 0.3s ease-in-out;
+    }
+
+    form input[type="text"]:focus,
+    form input[type="date"]:focus,
+    form input[type="time"]:focus,
+    form input[type="email"]:focus,
+    form select:focus {
+      outline: none;
+      background-color: transparent;
+      border-bottom: 2px solid #ff4d4d;
+      /* White bottom border on focus */
+    }
+
+    form .btn {
+      background-color: #ff4d4d;
+      border: 2px solid #ff4d4d;
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: bold;
+      padding: 25px;
+      width: 100%;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1.25rem;
+      margin-top: 30px;
+    }
+
+
+    form .btn:hover {
+      background-color: transparent;
+      color: #ff4d4d;
+    }
+    /* Floating label effect */
+    .form-group input:focus + label,
+    .form-group textarea:focus + label,
+    .form-group input:not(:placeholder-shown) + label,
+    .form-group textarea:not(:placeholder-shown) + label {
+        top: -8px;
+        left: 8px;
+        font-size: 12px;
+        background-color: #f0f4f8;
+        color: #5c91ad;
+        padding: 0 5px;
+        border-radius: 3px;
+    }
+
+    /* Submit Button */
+    
+    .submit-btn {
+        background-color: #ff4d4d;
+      border: 2px solid #ff4d4d;
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: bold;
+      padding: 25px;
+      width: 100%;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1.25rem;
+      margin-top: 30px;
+    }
+
+    .submit-btn:hover {
+        background-color: transparent;
+      color: #ff4d4d;
+    }
+    
+
+    /* General Footer Styling */
+    .footer-container {
+      background-color: #1f2937;
+      color: #ffffff;
+      padding: 40px 0;
+      font-family: Arial, sans-serif;
+    }
+</style>
+
+/* General Footer Styling */
+.footer-container {
+    background-color: #1f2937;
+    color: #ffffff;
+    padding: 40px 0;
+    font-family: Arial, sans-serif;
+}
+
+/* Logo and Tagline */
+.footer-logo-section {
+    text-align: center;
+    margin-bottom: 30px;
+}
+.footer-logo {
+    max-width: 150px;
+    margin-bottom: 10px;
+    border-radius: 50px;
+}
+.footer-logo-section p {
+    margin: 5px 0;
+    font-size: 0.95rem;
+}
+.follow-us {
+    margin-top: 10px;
+    font-weight: bold;
+}
+
+/* Social Media Icons */
+.social-icons a {
+    display: inline-block;
+    margin: 0 10px;
+    color: #12e9cc;
+    font-size: 1.5rem;
+    text-decoration: none;
+}
+.social-icons a:hover {
+    color: #76b2ab;
+}
+
+/* Footer Link Sections */
+.footer-links {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: 20px 100px;
+}
+.footer-column {
+    flex-basis: 20%;
+    margin-bottom: 10px;
+}
+.footer-column h4 {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    color: #12e9cc;
+}
+.footer-column ul {
+    list-style: none;
+    padding: 0;
+}
+.footer-column ul li {
+    margin-bottom: 8px;
+}
+.footer-column ul li a {
+    color: #ffffff;
+    text-decoration: none;
+    font-size: 0.95rem;
+}
+.footer-column ul li a:hover {
+    text-decoration: underline;
+}
+
+/* Footer Bottom Links */
+.footer-bottom {
+    text-align: center;
+    border-top: 1px solid #ddd;
+    padding-top: 20px;
+}
+.footer-bottom ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.footer-bottom ul li {
+    display: inline-block;
+    margin: 0 15px;
+}
+.footer-bottom ul li a {
+    color: #12e9cc;
+    text-decoration: none;
+    font-size: 0.95rem;
+}
+.footer-bottom ul li a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .footer-links {
+        flex-direction: column;
+        align-items: center;
+    }
+    .footer-column {
+        flex-basis: 100%;
+        text-align: center;
+    }
+}
+
+/* Footer Bottom Links */
+.footer-bottom {
+  text-align: center;
+  border-top: 1px solid #ddd;
+  padding-top: 20px;
+}
+.footer-bottom ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.footer-bottom ul li {
+  display: inline-block;
+  margin: 0 15px;
+}
+.footer-bottom ul li a {
+  color: #12e9cc;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+.footer-bottom ul li a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .footer-links {
+    flex-direction: column;
+    align-items: center;
+  }
+  .footer-column {
+    flex-basis: 100%;
+    text-align: center;
+  }
+}
+</style>
+
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTop" onclick="scrollToTop()">↑</button>
+
     <script>
         document.querySelector("form").addEventListener("submit", function(e) {
             e.preventDefault();
diff --git a/index.html b/index.html
index 77df6c6..b843b29 100644
--- a/index.html
+++ b/index.html
@@ -521,15 +521,13 @@ <h2>What type of transportation do you prefer for your travels?</h2>
       </a><div>
 
             <a href="index.html" style="text-decoration: none;"><i class="fas fa-home"></i> Home</a>
-
             <a href="about.html" style="text-decoration: none;"><i class="fas fa-info-circle"></i> About</a>
             <a href="buy.html" style="text-decoration: none;"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
             <a href="sell.html" style="text-decoration: none;"><i class="fas fa-tags"></i> Sell</a>
             <a href="contactus.html" style="text-decoration: none;"><i class="fas fa-envelope"></i> Contact</a>
             <a href="contributor.html" style="text-decoration: none;"><i class="fas fa-users"></i> Contributors</a>
             <a href="register.html" style="text-decoration: none;"><i class="fas fa-sign-in-alt"></i> Login</a>
-
-          
+       
     
           </div>