diff --git a/migrations/versions/83fb8f773037_.py b/migrations/versions/2309db853ee5_.py
similarity index 97%
rename from migrations/versions/83fb8f773037_.py
rename to migrations/versions/2309db853ee5_.py
index 1dbc687610..27d785e2e1 100644
--- a/migrations/versions/83fb8f773037_.py
+++ b/migrations/versions/2309db853ee5_.py
@@ -1,8 +1,8 @@
 """empty message
 
-Revision ID: 83fb8f773037
+Revision ID: 2309db853ee5
 Revises: 
-Create Date: 2025-03-19 01:32:37.695224
+Create Date: 2025-03-20 14:23:41.224215
 
 """
 from alembic import op
@@ -10,7 +10,7 @@
 
 
 # revision identifiers, used by Alembic.
-revision = '83fb8f773037'
+revision = '2309db853ee5'
 down_revision = None
 branch_labels = None
 depends_on = None
diff --git a/src/front/js/component/navbar.js b/src/front/js/component/navbar.js
index 6673f30114..e7c6b3ce10 100755
--- a/src/front/js/component/navbar.js
+++ b/src/front/js/component/navbar.js
@@ -1,29 +1,27 @@
 import React, { useContext, useEffect } from "react";
 import logo from "../../img/Icono puppereats.png";
 import { Link } from "react-router-dom";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { CiSearch } from "react-icons/ci";
 import { Context } from "../store/appContext";
 import { FaUserCircle, FaShoppingCart, FaSignOutAlt } from "react-icons/fa";
 
-export const Navbar = ({ setActiveCategory }) => {  // Recibimos setActiveCategory como prop
+export const Navbar = ({ setActiveCategory }) => {  
     const { store, actions } = useContext(Context);
     const { user, cart } = store;
 
-	useEffect(() => {
-		console.log("Usuario en navbar:", user);
-	}, [user, cart]);
+    useEffect(() => {
+        console.log("Usuario en navbar:", user);
+    }, [user, cart]);
 
-     const totalUnidades = store.cart.reduce((total, producto) => total + (producto.cantidad || 1), 0)
+    const totalUnidades = store.cart.reduce((total, producto) => total + (producto.cantidad || 1), 0);
      
     if (typeof setActiveCategory !== "function") {
         console.error("⚠️ Error: setActiveCategory no es una función en Navbar.js.");
-        return null; // Evitamos que falle si `setActiveCategory` no es válida
+        return null;
     }
 
     return (
         <nav className="navbar navbar-expand-lg shadow-lg" style={{ 
-            background: "linear-gradient(180deg, #FBD989 5%, #F4C4A4 40%, #EC955B 95%)",
+            background: "#EABDE6" ,
             padding: "15px 30px",
         }}>
             <div className="container-fluid">
@@ -33,25 +31,18 @@ export const Navbar = ({ setActiveCategory }) => {  // Recibimos setActiveCatego
                 </Link>
 
                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
-                    <form className="d-flex me-auto" role="search">
-                        <input className="form-control me-2" type="search" placeholder="Buscar comida..." aria-label="Search" style={{ borderRadius: "8px", height: "30px", width: "250px", fontSize: "1.1rem" }} />
-                        <button className="btn btn-outline-dark" type="submit" style={{ borderRadius: "8px", padding: "2px 6px" }}>
-                            <CiSearch size={12} />
-                        </button>
-                    </form>
-
                     <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
                         <li className="nav-item m-2">
-                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("dogFood")}>Caninos</button>
+                            <Link to="/" className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("dogFood")}>Caninos</Link>
                         </li>
                         <li className="nav-item m-2">
-                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("catFood")}>Felinos</button>
+                            <Link to="/" className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("catFood")}>Felinos</Link>
                         </li>
                         <li className="nav-item m-2">
-                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("exoticFood")}>Exóticos</button>
+                            <Link to="/" className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("exoticFood")}>Exóticos</Link>
                         </li>
                         <li className="nav-item m-2">
-                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("accesories")}>Accesorios</button>
+                            <Link to="/" className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("accesories")}>Accesorios</Link>
                         </li>
                     </ul>
 
@@ -63,7 +54,6 @@ export const Navbar = ({ setActiveCategory }) => {  // Recibimos setActiveCatego
                                     <span className="fw-semibold">Perfil</span>
                                 </Link>
                                 <Link to="/carrito" className="btn btn-warning d-flex align-items-center">
-                                    {/* <FaShoppingCart size={18} className="me-1" /> Cesta {cartItemCount > 0 && `(${cartItemCount})`} */}
                                     <FaShoppingCart size={18} className="me-1" /> Cesta {totalUnidades > 0 && `(${totalUnidades})`}
                                 </Link>
                                 <button className="btn btn-light text-muted border-0 d-flex align-items-center" onClick={actions.logout}>
diff --git "a/src/front/js/component/recuperacionContrase\303\261a.js" "b/src/front/js/component/recuperacionContrase\303\261a.js"
index 75d04d9eb4..f15c30a525 100644
--- "a/src/front/js/component/recuperacionContrase\303\261a.js"
+++ "b/src/front/js/component/recuperacionContrase\303\261a.js"
@@ -1,46 +1,100 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom'; // ✅ Importamos useNavigate
+import React, { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
 
 export const RecuperacionContraseña = () => {
-    const [email, setEmail] = useState('');
-    const navigate = useNavigate(); // ✅ Inicializamos el hook de navegación
+  const [email, setEmail] = useState("");
+  const navigate = useNavigate();
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        
-        try {
-            const response = await fetch(`${process.env.BACKEND_URL}/api/forgotpassword`, { // ✅ Asegúrate de que esta ruta es correcta
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email })
-            });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-            const data = await response.json();
-            
-            if (response.ok) {
-                alert("Correo enviado correctamente. Revisa tu bandeja de entrada."); // ✅ Alert con el mensaje
-                navigate("/loginSignup"); // ✅ Redirigir al inicio de sesión después de aceptar el alert
-            } else {
-                alert(`Error: ${data.msg}`);
-            }
-        } catch (error) {
-            alert("Error de conexión con el servidor.");
+    try {
+      const response = await fetch(
+        `${process.env.BACKEND_URL}/api/forgotpassword`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email }),
         }
-    };
+      );
 
-    return (
-        <div>
-            <h2>Recuperar contraseña</h2>
-            <form onSubmit={handleSubmit}>
-                <input 
-                    type="email" 
-                    placeholder="Introduce tu correo electrónico" 
-                    value={email} 
-                    onChange={(e) => setEmail(e.target.value)} 
-                    required 
-                />
-                <button type="submit">Enviar</button>
-            </form>
+      const data = await response.json();
+
+      if (response.ok) {
+        alert("Correo enviado correctamente. Revisa tu bandeja de entrada.");
+        navigate("/loginSignup");
+      } else {
+        alert(`Error: ${data.msg}`);
+      }
+    } catch (error) {
+      alert("Error de conexión con el servidor.");
+    }
+  };
+
+  return (
+    <div 
+      className="d-flex justify-content-center align-items-center min-vh-100" 
+      style={{
+        background: "linear-gradient(to bottom, #FFDCAE, #ffffff)",
+        backgroundSize: "cover",
+        padding: "2rem"
+      }}
+    >
+      <div
+        className="card shadow-lg p-5"
+        style={{
+          width: "100%",
+          maxWidth: "35rem",
+          borderRadius: "20px",
+          backgroundColor: "#ffffff",
+          border: "none",
+          boxShadow: "0 10px 30px rgba(0, 0, 0, 0.1)"
+        }}
+      >
+        <div className="card-body text-center">
+          <h2 className="card-title mb-4" style={{ color: "#333", fontWeight: "bold" }}>Recuperar Contraseña</h2>
+          <p className="text-muted mb-4" style={{ fontSize: "1.1rem" }}>
+            Ingresa tu correo y te enviaremos instrucciones para restablecer tu contraseña.
+          </p>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <input
+                type="email"
+                className="form-control p-3"
+                style={{
+                  borderRadius: "10px",
+                  border: "2px solid #ddd",
+                  transition: "border-color 0.3s ease-in-out",
+                }}
+                placeholder="Introduce tu correo electrónico"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                onFocus={(e) => e.target.style.borderColor = "#007bff"}
+                onBlur={(e) => e.target.style.borderColor = "#ddd"}
+              />
+            </div>
+            <button
+              type="submit"
+              className="btn w-100 py-2"
+              style={{
+                backgroundColor: "#007bff",
+                color: "#ffffff",
+                fontSize: "1.1rem",
+                borderRadius: "10px",
+                transition: "0.3s ease-in-out",
+              }}
+              onMouseOver={(e) => e.target.style.backgroundColor = "#0056b3"}
+              onMouseOut={(e) => e.target.style.backgroundColor = "#007bff"}
+            >
+              Enviar Correo
+            </button>
+          </form>
+          <Link to="/" className="d-block mt-3 text-secondary" style={{ fontSize: "1rem", textDecoration: "none" }}>
+            <i className="bi bi-arrow-left"></i> Volver a la página principal
+          </Link>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
diff --git a/src/front/js/layout.js b/src/front/js/layout.js
index 7029175067..01ea293517 100755
--- a/src/front/js/layout.js
+++ b/src/front/js/layout.js
@@ -74,7 +74,7 @@ const Layout = () => {
 // Nuevo componente para manejar el Navbar
 const PageWithNavbar = ({ activeCategory, setActiveCategory }) => {
     const location = useLocation(); 
-    const hideNavbarRoutes = ["/perfilUsuario", "/loginSignup"];   // Rutas donde ocultamos el Navbar
+    const hideNavbarRoutes = ["/perfilUsuario","/RecuperacionContraseña",];   // Rutas donde ocultamos el Navbar
 
     return (
         <>
diff --git a/src/front/js/pages/AlertComponent.js b/src/front/js/pages/AlertComponent.js
index 389eb7ecc3..fef50d10df 100644
--- a/src/front/js/pages/AlertComponent.js
+++ b/src/front/js/pages/AlertComponent.js
@@ -24,9 +24,17 @@ const AlertComponent = () => {
                     <p className='mt-3'>Aww yeah..! Tu pedido se ha realizado correctamente. En unos minutos recibirás la confirmación en tu correo electrónico.</p>
                     <p className="mb-0">Si necesitas cancelar algún producto o realizar cualquier modificación, ponte en contacto con nosotros a través del formulario de contacto.</p>
                     <hr/>
-                    <Link className="text-center" to="/">
-                    <p><strong>Volver a la página principal</strong></p>
+                    <Link 
+                        className="text-center" 
+                        to="/" 
+                        onClick={(e) => {
+                        e.preventDefault(); // Evita que React Router haga la navegación interna
+                        window.location.href = "/"; // Redirige y recarga correctamente
+                        }}
+                        >
+                        <p><strong>Volver a la página principal</strong></p>
                     </Link>
+
                 </div>
             )}
           
diff --git a/src/front/js/pages/loginSignup.js b/src/front/js/pages/loginSignup.js
index 59ffd5bff0..71f4ad82ac 100644
--- a/src/front/js/pages/loginSignup.js
+++ b/src/front/js/pages/loginSignup.js
@@ -1,18 +1,17 @@
 import React, { useState, useContext } from 'react';
 import { Context } from '../store/appContext';
 import { Link, useNavigate } from 'react-router-dom';
-import "../../styles/home.css";
 
 export const LoginSignup = () => {
-    const { actions, store } = useContext(Context);
+    const { actions } = useContext(Context);
     const navigate = useNavigate();
 
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [isSignup, setIsSignup] = useState(false);
-    const [loading, setLoading] = useState(false); 
-    const [error, setError] = useState(''); 
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
     const [successMessage, setSuccessMessage] = useState('');
 
     const handleSubmit = async (e) => {
@@ -25,7 +24,7 @@ export const LoginSignup = () => {
             const dataUser = { name, email, password };
             if (isSignup) {
                 await actions.signup(dataUser, navigate);
-                setSuccessMessage('¡Registro exitoso! Redirigiendo a inicio de sesión...');
+                setSuccessMessage();
                 setTimeout(() => {
                     setIsSignup(false);
                 },);
@@ -35,79 +34,136 @@ export const LoginSignup = () => {
             setName('');
             setEmail('');
             setPassword('');
-        } catch (err) {
-            setError('Error al procesar la solicitud. Por favor, intenta nuevamente.');
+        } catch (error) {
+            setError('Error al procesar la solicitud.');
         } finally {
             setLoading(false);
         }
     };
 
     return (
-        <div className="registration-view-container" style={{ background: "linear-gradient(to bottom, #FCE5CD, #FFFFFF)" }}>
-            <div className="form-container">
-                {!isSignup && (
-                    <form className="auth-form login-form" onSubmit={handleSubmit}>
-                        <h2>Iniciar sesión</h2>
-                        <input
-                            type="email"
-                            placeholder="Correo electrónico"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            required
-                        />
-                        <input
-                            type="password"
-                            placeholder="Contraseña"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            required
-                        />
-                        <button type="submit" disabled={loading}>
-                            {loading ? 'Cargando...' : 'Iniciar sesión'}
-                        </button>
-                        {error && <p className="error-message">{error}</p>}
-                        <p onClick={() => setIsSignup(true)}>¿No tienes cuenta? <strong>Regístrate</strong></p>
-                        
-                        {/* NUEVO: Enlace para recuperación de contraseña */}
-                        <p>
-                            ¿Olvidaste tu contraseña? <Link to="/RecuperacionContraseña">Recupérala aquí</Link>
-                        </p>
-                    </form>
-                )}
-                {isSignup && (
-                    <form className="auth-form signup-form" onSubmit={handleSubmit}>
-                        <h2>Regístrate</h2>
-                        <input
-                            type="name"
-                            placeholder="Nombre"
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            required
-                        />
-                        <input
-                            type="email"
-                            placeholder="Correo electrónico"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            required
-                        />
-                        <input
-                            type="password"
-                            placeholder="Contraseña"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            required
-                        />
-                        <button type="submit" disabled={loading}>
-                            {loading ? 'Cargando...' : 'Registrar'}
+        <div 
+            className="d-flex justify-content-center align-items-center min-vh-100" 
+            style={{
+                background: "linear-gradient(to bottom, #FFDFEF, #ffffff)",
+                backgroundSize: "cover",
+                padding: "2rem"
+            }}
+        >
+            <div
+                className="card shadow-lg p-5"
+                style={{
+                    width: "100%",
+                    maxWidth: "35rem",
+                    borderRadius: "20px",
+                    backgroundColor: "#ffffff",
+                    border: "none",
+                    boxShadow: "0 10px 30px rgba(0, 0, 0, 0.1)"
+                }}
+            >
+                <div className="card-body text-center">
+                    <h2 className="mb-4" style={{ color: "#333", fontWeight: "bold" }}>
+                        {isSignup ? "Regístrate" : "Iniciar sesión"}
+                    </h2>
+
+                    <form onSubmit={handleSubmit}>
+                        {isSignup && (
+                            <div className="mb-3">
+                                <input
+                                    type="text"
+                                    className="form-control p-3"
+                                    style={{
+                                        borderRadius: "10px",
+                                        border: "2px solid #ddd",
+                                        transition: "border-color 0.3s ease-in-out",
+                                    }}
+                                    placeholder="Nombre"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    required
+                                    onFocus={(e) => e.target.style.borderColor = "#007bff"}
+                                    onBlur={(e) => e.target.style.borderColor = "#ddd"}
+                                />
+                            </div>
+                        )}
+                        <div className="mb-3">
+                            <input
+                                type="email"
+                                className="form-control p-3"
+                                style={{
+                                    borderRadius: "10px",
+                                    border: "2px solid #ddd",
+                                    transition: "border-color 0.3s ease-in-out",
+                                }}
+                                placeholder="Correo electrónico"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                required
+                                onFocus={(e) => e.target.style.borderColor = "#007bff"}
+                                onBlur={(e) => e.target.style.borderColor = "#ddd"}
+                            />
+                        </div>
+                        <div className="mb-3">
+                            <input
+                                type="password"
+                                className="form-control p-3"
+                                style={{
+                                    borderRadius: "10px",
+                                    border: "2px solid #ddd",
+                                    transition: "border-color 0.3s ease-in-out",
+                                }}
+                                placeholder="Contraseña"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                                onFocus={(e) => e.target.style.borderColor = "#007bff"}
+                                onBlur={(e) => e.target.style.borderColor = "#ddd"}
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="btn w-100 py-2"
+                            style={{
+                                backgroundColor: loading ? "#6c757d" : "#007bff",
+                                color: "#ffffff",
+                                fontSize: "1.1rem",
+                                borderRadius: "10px",
+                                transition: "0.3s ease-in-out",
+                                cursor: loading ? "not-allowed" : "pointer",
+                            }}
+                            disabled={loading}
+                            onMouseOver={(e) => !loading && (e.target.style.backgroundColor = "#0056b3")}
+                            onMouseOut={(e) => !loading && (e.target.style.backgroundColor = "#007bff")}
+                        >
+                            {loading ? "Cargando..." : isSignup ? "Registrar" : "Iniciar sesión"}
                         </button>
-                        {error && <p className="error-message">{error}</p>}
-                        {successMessage && <p className="success-message">{successMessage}</p>}
-                        <p onClick={() => setIsSignup(false)}>¿Ya tienes cuenta? <strong>Inicia sesión</strong></p>
+
+                        {error && <p className="text-danger text-center mt-2">{error}</p>}
+                        {successMessage && <p className="text-success text-center mt-2">{successMessage}</p>}
                     </form>
-                )}
-                  <Link to="/">
-                  <p>Volver a la página principal</p></Link>
+
+                    <p className="text-center mt-3">
+                        {isSignup ? (
+                            <>
+                                ¿Ya tienes cuenta? <span className="text-primary" style={{ cursor: "pointer" }} onClick={() => setIsSignup(false)}>Inicia sesión</span>
+                            </>
+                        ) : (
+                            <>
+                                ¿No tienes cuenta? <span className="text-primary" style={{ cursor: "pointer" }} onClick={() => setIsSignup(true)}>Regístrate</span>
+                            </>
+                        )}
+                    </p>
+
+                    {!isSignup && (
+                        <p className="text-center mt-1">
+                            <Link to="/RecuperacionContraseña" className="text-primary">¿Olvidaste tu contraseña?</Link>
+                        </p>
+                    )}
+
+                    <Link to="/" className="d-block mt-3 text-secondary" style={{ fontSize: "1rem", textDecoration: "none" }}>
+                        <i className="bi bi-arrow-left"></i> Volver a la página principal
+                    </Link>
+                </div>
             </div>
         </div>
     );
diff --git a/src/front/styles/home.css b/src/front/styles/home.css
index 9d39d50a24..e69de29bb2 100755
--- a/src/front/styles/home.css
+++ b/src/front/styles/home.css
@@ -1,160 +0,0 @@
-/*
-    home.css: This website contains selectors only used in home.css
-
-    All pages share the styles on index.css but you should create 
-    one more css for each page that will contain the selected used 
-    on that page only (the ones not reused in other pages).
-*/
-
-.registration-view-container {
-    font-family: 'Arial', sans-serif;
-    background-color: #f5f7fa;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-  }
-  
-  .registration-view-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, #e2efff, #ffffff);
-    padding: 20px;
-  }
-  
-  /* Form container */
-  .form-container {
-    background-color: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-    padding: 30px 40px;
-    width: 100%;
-    max-width: 400px;
-    transition: all 0.3s ease;
-  }
-  
-  /* Form title */
-  form h2 {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    color: #333;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    letter-spacing: 1.2px;
-  }
-  
-  /* Input fields */
-  input {
-    width: 100%;
-    padding: 12px;
-    margin: 10px 0;
-    border-radius: 8px;
-    border: 2px solid #d1d1d1;
-    background-color: #f9f9f9;
-    font-size: 16px;
-    transition: border-color 0.3s ease, background-color 0.3s ease;
-  }
-  
-  /* Focus effect on inputs */
-  input:focus {
-    outline: none;
-    border-color: #5b8fcb;
-    background-color: #e8f0fe;
-  }
-  
-  /* Submit button */
-  button {
-    width: 100%;
-    padding: 12px;
-    background-color: #5b8fcb;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  
-  /* Hover effect on button */
-  button:hover {
-    background-color: #3d6ea5;
-  }
-  
-  button:disabled {
-    background-color: #a0c6f1;
-    cursor: not-allowed;
-  }
-  
-  /* Error message styling */
-  .error-message {
-    color: #e74c3c;
-    font-size: 14px;
-    margin-top: 10px;
-    text-align: center;
-  }
-  
-  /* Link styling for switching between login and signup */
-  p {
-    color: #5b8fcb;
-    text-align: center;
-    cursor: pointer;
-    font-size: 14px;
-    margin-top: 10px;
-    transition: color 0.3s ease;
-  }
-  
-  /* Hover effect on links */
-  p:hover {
-    color: #3d6ea5;
-  }
-  
-  /* Animations for form entry */
-  .auth-form {
-    opacity: 0;
-    transform: translateY(20px);
-    animation: slideIn 0.5s forwards;
-  }
-  
-  .auth-form.login-form {
-    animation-delay: 0.3s;
-  }
-  
-  .auth-form.signup-form {
-    animation-delay: 0.3s;
-  }
-  
-  /* Slide-in animation for forms */
-  @keyframes slideIn {
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  
-  /* Animation for form container on hover */
-  .form-container:hover {
-    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
-    transform: translateY(-5px);
-  }
-  
-  /* Responsive styles */
-  @media (max-width: 600px) {
-    .form-container {
-      padding: 20px;
-    }
-  
-    form h2 {
-      font-size: 20px;
-    }
-  
-    input,
-    button {
-      font-size: 14px;
-    }
-  }
\ No newline at end of file