diff --git a/assets/css/styles.css b/assets/css/styles.css
index be32e06..4d5b0db 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -415,47 +415,87 @@ img.menu__img {
   margin-bottom: var(--mb-3);
 }
 /*========== FOOTER ==========*/
-.footer__container{
+.footer {
+  background-color: #1c1c1c; /* Dark background for contrast */
+  padding: 3rem 0;
+  color: #fff;
+}
+
+.footer__container {
+  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   row-gap: 2rem;
+  column-gap: 1.5rem;
+  justify-content: space-between;
+  align-items: start;
+  padding: 5%;
 }
-.footer__logo{
-  font-size: var(--h3-font-size);
-  color: var(--first-color);
-  font-weight: var(--font-semi-bold);
+
+.footer__logo {
+  font-size: 2rem;
+  color: #f5a623; /* Bright accent color for the logo */
+  font-weight: 600;
+  margin-bottom: 1rem;
 }
-.footer__description{
+
+.footer__description {
   display: block;
-  font-size: var(--small-font-size);
-  margin: .25rem 0 var(--mb-3);
+  font-size: 1rem;
+  color: greenyellow;
+  margin: .5rem 0 1.5rem;
 }
-.footer__social{
 
+.footer__social {
   font-size: 30px;
+  color: #f5a623; /* Accent color */
+  margin-right: 1rem;
+  transition: color 0.3s ease;
+}
 
-  color: var(--title-color);
-  margin-right: var(--mb-2);
+.footer__social:hover {
+  color: greenyellow; /* White on hover */
 }
-.footer__title{
-  font-size: var(--h2-font-size);
-  color: var(--title-color);
-  margin-bottom: var(--mb-2);
+
+.footer__title {
+  font-size: 1.75rem;
+  color: #f5a623;
+  margin-bottom: 1rem;
 }
-.footer__link{
+
+.footer__link {
   display: inline-block;
-  color: var(--text-color);
-  margin-bottom: var(--mb-1);
+  color: greenyellow;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  transition: color 0.3s ease;
 }
-.footer__link:hover{
-  color: var(--first-color);
+
+.footer__link:hover {
+  color: #f5a623;
+  text-decoration: underline; /* Adds emphasis on hover */
 }
-.footer__copy{
+
+.footer__copy {
   text-align: center;
-  font-size: var(--small-font-size);
-  color: var(--text-color-light);
-  margin-top: 3.5rem;
+  font-size: 0.875rem;
+  color: yellowgreen;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #333;
+}
+
+/* Hover effects for links and icons */
+.footer__social:hover,
+.footer__link:hover {
+  color: #f5a623;
 }
 
+/* Optional: Add smooth transitions for all elements */
+.footer__link, .footer__social {
+  transition: color 0.3s ease;
+}
+
+
 /*========== MEDIA QUERIES ==========*/
 @media screen and (min-width: 576px){
   .home__container,
diff --git a/index.html b/index.html
index d8c21d5..2f59938 100644
--- a/index.html
+++ b/index.html
@@ -185,41 +185,41 @@ <h2 class="section-title contact__initial">Contact us</h2>
         </main>
 
         <!--========== FOOTER ==========-->
-        <footer class="footer section bd-container">
-            <div class="footer__container bd-grid">
+        <footer class="footer section bd-container" style="background-color: #1c1c1c; color: #fff; padding: 2rem 0;">
+            <div class="footer__container bd-grid" style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; row-gap: 2rem;">
                 <div class="footer__content">
-                    <a href="#" class="footer__logo">Tasty Food</a>
-                    <span class="footer__description">Restaurant</span>
-                    <div>
-                        <a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
-                        <a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
-                        <a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
+                    <a href="#" class="footer__logo" style="font-size: 3rem; font-weight: bold; color: #fff;">Tasty Food</a>
+                    <span class="footer__description" style="display: block; margin: 0.5rem 0;">Restaurant</span>
+                    <div style="margin-top: 1rem;">
+                        <a href="#" class="footer__social" style="margin-right: 1rem; color: greenyellow; font-size: 1.5rem; transition: color 0.3s;"><i class='bx bxl-facebook'></i></a>
+                        <a href="#" class="footer__social" style="margin-right: 1rem; color: greenyellow; font-size: 1.5rem; transition: color 0.3s;"><i class='bx bxl-instagram'></i></a>
+                        <a href="#" class="footer__social" style="margin-right: 1rem; color: greenyellow; font-size: 1.5rem; transition: color 0.3s;"><i class='bx bxl-twitter'></i></a>
                     </div>
                 </div>
-
+        
                 <div class="footer__content">
-                    <h3 class="footer__title">Services</h3>
+                    <h3 class="footer__title" style="font-size: 1.5rem; color: #fff; margin-bottom: 1rem;">Services</h3>
                     <ul>
-                        <li><a href="#" class="footer__link">Delivery</a></li>
-                        <li><a href="#" class="footer__link">Pricing</a></li>
-                        <li><a href="#" class="footer__link">Fast food</a></li>
-                        <li><a href="#" class="footer__link">Reserve your spot</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Delivery</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Pricing</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Fast food</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Reserve your spot</a></li>
                     </ul>
                 </div>
-
+        
                 <div class="footer__content">
-                    <h3 class="footer__title">Information</h3>
+                    <h3 class="footer__title" style="font-size: 1.5rem; color: #fff; margin-bottom: 1rem;">Information</h3>
                     <ul>
-                        <li><a href="#" class="footer__link">Event</a></li>
-                        <li><a href="#" class="footer__link">Contact us</a></li>
-                        <li><a href="#" class="footer__link">Privacy policy</a></li>
-                        <li><a href="#" class="footer__link">Terms of services</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Event</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Contact us</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Privacy policy</a></li>
+                        <li><a href="#" class="footer__link" style="color: greenyellow; transition: color 0.3s;">Terms of services</a></li>
                     </ul>
                 </div>
-
+        
                 <div class="footer__content">
-                    <h3 class="footer__title">Adress</h3>
-                    <ul>
+                    <h3 class="footer__title" style="font-size: 1.5rem; color: #fff; margin-bottom: 1rem;">Address</h3>
+                    <ul style="color: greenyellow;">
                         <li>Lima - Peru</li>
                         <li>Jr Union #999</li>
                         <li>999 - 888 - 777</li>
@@ -227,9 +227,11 @@ <h3 class="footer__title">Adress</h3>
                     </ul>
                 </div>
             </div>
-
-            <p class="footer__copy">&#169; 2020 Bedimcode. All right reserved</p>
+        
+            <p class="footer__copy" style="text-align: center; color: greenyellow ; margin-top: 2rem;">&#169; 2020 Bedimcode. All rights reserved</p>
         </footer>
+        
+        
 
         <!--========== SCROLL REVEAL ==========-->
         <script src="https://unpkg.com/scrollreveal"></script>