diff --git a/css/style.css b/css/style.css
index b47fd92..8e6977a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,594 +1,427 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  text-decoration: none;
-  outline: none;
-  font-family: 'Inter', sans-serif;
-}
-
-body {
-  background-color: #f1f6fc31;
-}
-
-header {
-  background-position: center;
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-h3 {
-  font-size: 35px;
-}
-
-p {
-  color: #000009be;
-}
-
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 5%;
-}
-
-.btn {
-  background-color: #4f9cf9;
-  color: #fff;
-  padding: 15px 20px;
-  border-radius: 10px;
-  cursor: pointer;
-  display: inline-block;
-  transition: 0.1s;
-}
-
-.btn.animate-btn {
-  animation: animate-outline 1s ease-out infinite;
-}
-
-.btn:hover {
-  background-color: #3580db;
-}
-
-@keyframes animate-outline {
-  from {
-    outline: 0px solid #4f9bf98a;
-  }
-  to {
-    outline: 15px solid #4f9bf900;
-  }
-}
-
-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 30px;
-}
-
-nav ul {
-  display: flex;
-  align-items: center;
-}
-
-nav ul a {
-  color: #fff;
-  margin: 0 25px;
-  text-transform: uppercase;
-  font-size: 14px;
-  display: block;
-}
-
-nav ul a:not(.btn)::after {
-  content: '';
-  background-color: #4f9cf9;
-  width: 0;
-  height: 2px;
-  display: block;
-  margin: 0 auto;
-  transition: 0.3s;
-}
-
-nav ul a:hover::after {
-  width: 100%;
-}
-
-nav .menu-icon {
-  cursor: pointer;
-  color: #fff;
-  font-size: 25px;
-  display: none;
-}
-
-nav .close-icon {
-  display: none;
-  font-size: 25px;
-  color: #fff;
-}
-
-.banner {
-  padding: 90px;
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.banner-text {
-  margin: 200px;
-  text-align: center;
-}
-
-.banner-text h1 {
-  font-size: 5rem;
-  color: #fff;
-}
-
-.banner-text p {
-  font-size: 1.5rem;
-  color: #ffffffb7;
-  font-weight: lighter;
-  margin: 18px 0;
-}
-
-.banner-text a {
-  margin: 20px;
-}
-
-/* Style Seção Conteúdo ---------------------------*/
-.conteudo {
-  padding: 5% 0;
-  background-color: #d3e6fd;
-}
-
-.conteudo .rows-cards {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.conteudo .row-card-item {
-  width: 500px;
-  padding: 10px;
-  transition: 0.5s;
-}
-
-.conteudo .row-card-item h3 {
-  transition: 0.5s;
-}
-
-.conteudo .row-card-item p {
-  margin: 10px 0;
-  transition: 0.5s;
-}
-
-/* Style Seção Serviços ---------------------------*/
-.servicos {
-  padding-top: 10%;
-}
-.servicos .container > p {
-  padding: 10px 0;
-}
-.servicos .container h3,
-.servicos .container > p {
-  text-align: center;
-}
-
-.servicos .rows-cards {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.servicos .row-card-item {
-  background-color: #d3e6fd;
-  width: 350px;
-  height: 220px;
-  padding: 12px;
-  margin: 15px;
-  border-radius: 15px;
-  transition: 0.5s;
-}
-
-.servicos .row-card-item:hover {
-  background-color: #4f9cf9;
-  margin-top: -2px;
-}
-
-.servicos .row-card-item:hover p {
-  color: #fff;
-}
-
-.servicos .row-card-item img {
-  background-color: #4f9cf9;
-  border-radius: 15px;
-  width: 70px;
-  padding: 10px;
-}
-
-.servicos .row-card-item p.serv-name {
-  margin: 5px 0;
-  transition: 0.5s;
-}
-
-.servicos .row-card-item p.serv-text {
-  transition: 0.5s;
-}
-.dados {
-  padding-bottom: 10%;
-  margin-top: 5%;
-}
-.dados .container {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.dados .dados-item {
-  padding: 3.5rem;
-  color: #000000be;
-  text-align: center;
-  background-color: #d3e6fd;
-  transition: 0.3s;
-}
-
-.dados .dados-item:nth-child(1) {
-  border-radius: 15px 0 0 15px;
-}
-
-.dados .dados-item:nth-child(4) {
-  border-radius: 0 15px 15px 0;
-}
-
-.dados .dados-item:nth-child(2),
-.dados .dados-item:nth-child(3),
-.dados .dados-item:nth-child(4) {
-  border-left: solid 2px #4f9cf9;
-}
-
-.dados .dados-item img {
-  background-color: #4f9cf9;
-  border-radius: 15px;
-  padding: 10px;
-  margin-bottom: 15px;
-  width: 70px;
-  transition: 0.3s;
-}
-
-.dados .dados-item p {
-  font-size: 18px;
-  margin-bottom: 0px;
-}
-
-.dados .dados-item p strong {
-  font-size: 28px;
-}
-
-/* Style Seção Clientes ---------------------------*/
-.clientes {
-  padding: 10% 0;
-  background-color: #d3e6fd;
-}
-.clientes p {
-  padding: 10px 0;
-}
-.clientes .container h3,
-.clientes .container > p {
-  text-align: center;
-}
-
-.clientes .rows-cards {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.clientes .row-card-item {
-  width: 300px;
-  height: auto;
-  padding: 10px;
-  transition: 0.5s;
-}
-
-.clientes .row-card-item:hover {
-  margin-top: -2px;
-}
-
-/* Style Seção Sobre ---------------------------*/
-.sobre {
-  padding: 10% 0;
-}
-.sobre .container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.sobre .sobre-text {
-  width: 40%;
-}
-
-.sobre p {
-  margin: 18px 0;
-  color: #000000a6;
-  text-align: justify;
-}
-
-.sobre .sobre-img {
-  width: 50%;
-}
-
-.sobre .sobre-img img {
-  width: 80%;
-  border-radius: 10px;
-}
-
-/* Style Seção Depoimentos ---------------------------*/
-.depoimentos {
-  padding-bottom: 10%;
-}
-
-.depoimentos h3,
-.depoimentos p {
-  text-align: center;
-}
-
-.depoimentos p {
-  padding: 10px 0;
-}
-
-.depoimentos .cards {
-  display: flex;
-  justify-content: center;
-}
-
-.depoimentos .card-item {
-  width: 350px;
-  background-color: #d3e6fd;
-  margin: 15px;
-  border-radius: 14px;
-  text-align: center;
-  transition: 0.5s;
-}
-
-.depoimentos .card-item:hover {
-  background-color: #4f9cf9;
-  margin-top: -2px;
-}
-
-.depoimentos .card-item img {
-  width: 80px;
-  display: block;
-  margin: 10px auto;
-  border-radius: 100%;
-}
-
-.depoimentos .card-item .name-user {
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 15px;
-  transition: 0.5s;
-}
-
-.depoimentos .card-item .text-user {
-  font-size: 15px;
-  padding: 0 15px;
-  transition: 0.5s;
-}
-
-.depoimentos .card-item .star {
-  margin: 15px 0;
-  border-top: 2px solid #71767a23;
-}
-
-.depoimentos .card-item .star i {
-  color: #4f9cf9;
-  margin-top: 15px;
-  font-size: 20px;
-  transition: 0.5s;
-}
-
-.depoimentos .card-item:hover .name-user,
-.depoimentos .card-item:hover .text-user,
-.depoimentos .card-item:hover .star i {
-  color: #fff;
-}
-
-/* Style Contato ---------------------------*/
-.contato {
-  background: #d3e6fd;
-  padding: 5% 0;
-
-}
-.contato .container h3,
-.contato .container > p {
-  text-align: center; 
-  margin-bottom: 20px;
-}
-
-.contato-info {
-  display: flex;
-  align-items:start;
-  justify-content: space-between;
-  padding-top: 70px;
-  min-height: 80vh;
-}
-
-.contato-info .left-side {
-  width: 50%;
-  padding: 30px;
-  height: fit-content;
-}
-
-.contato-info .left-side div {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-#icon i {
-  width: 40px;
-  text-align: center;
-  padding: 10px;
-  margin: 20px 5px;
-  font-size: 20px;
-  background: #4f9cf9;
-  border-radius: 100%;
-  align-items: center;
-  color: #fff;
-  cursor: pointer;
-  transition: 0.5s;
-}
-
-#icon i:hover {
-  color: #184b88;
-}
-
-.contato-info .left-side div i {
-  font-size: 20px;
-  margin-right: 20px;
-  color: #4f9cf9;
-}
-
-.contato .right-side {
-  width: 450px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 20px 20px;
-  background: #d3e6fd;
-  border-radius: 10px;
-  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
-}
-
-.contato .right-side form {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-form label {
-  color: #184b88;
-  font-size: 15px;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-
-form input {
-  padding: 8px;
-  outline: none;
-  border: 0;
-  margin-bottom: 10px;
-  font-size: 15px;
-  border-radius: 5px;
-  background-color: #fff;
-  transition: all 0.3s;
-  
-}
-
-form input:focus,
-form textarea:focus {
-  border-radius: 10px;
-  border: solid 1px #4f9cf9;
-
-}
-
-form textarea {
-  padding: 10px;
-  outline: none;
-  border: 0;
-  margin-bottom: 20px;
-  font-size: 15px;
-  transition: all 0.3s;
-  border-radius: 10px;
-  background-color: #f5f5f5;
-  resize: none;
-}
-
-form button {
-  border: none;
-}
-
-#button {
-  text-align: center;
-  padding: 10px 0;
-}
-
-
-/* Style Rodapé ---------------------------*/
-footer {
-  padding: 1% 0;
-  background-color: #4f9cf9;
-  text-align: center;
-}
-
-footer p,
-footer a {
-  color: #0000009c;
-  font-size: 14px;
-  text-decoration: none;
-  margin: 0 10px 0;
-}
-
-footer .footer-text {
-  padding-bottom: 20px;
-}
-
-
-/* Style Menu Mobile ---------------------------*/
-/* Style Menu Mobile ---------------------------*/
-/* Style Menu Mobile ---------------------------*/
-
-@media (max-width: 830px) {
-
-
-  /* Menu responsivo --------------------------- */
-  .ul {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #184b88;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    clip-path: circle(0% at 100% 0);
-    transition: 0.7s;
-  }
-  .ul.open {
-    clip-path: circle(141.4% at 100% 0);
-  }
-  .ul a {
-    margin: 8px 0;
-    font-size: 15px;
-  }
-  nav .menu-icon {
-    display: block;
-  }
-  nav .close-icon {
-    display: block;
-    position: absolute;
-    top: 45px;
-    right: 40px;
-  }
-
-  /* Página responsiva --------------------------- */
-  .conteudo .rows-cards .row-card-item {
-    margin-top: 10px;
-    padding: 0 20px;
-    order: 2;
-
-
-  }
-
-
-
-
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --primary-color: #0D2C54;
+  --secondary-color: #FFFFFF;
+  --accent-color: #F9A826;
+  --accent-color-darker: #E89A1E;
+  --text-color: #333333;
+  --background-light: #F1F6FC;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+  outline: none;
+  font-family: 'Inter', sans-serif;
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--secondary-color);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+h3 {
+  font-size: 2.5rem;
+  color: var(--primary-color);
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+p {
+  color: var(--text-color);
+  line-height: 1.6;
+}
+
+.btn {
+  background-color: var(--accent-color);
+  color: var(--primary-color);
+  font-weight: 600;
+  padding: 15px 30px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-block;
+  transition: background-color 0.3s, transform 0.3s;
+  border: none;
+  font-size: 1rem;
+}
+
+.btn:hover {
+  background-color: var(--accent-color-darker);
+  transform: translateY(-2px);
+}
+
+/* Header */
+header {
+  background-color: rgba(13, 44, 84, 0.9);
+  background-blend-mode: multiply;
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
+  position: relative;
+  width: 100%;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--primary-color);
+  z-index: 1000;
+  padding: 1.5rem 5%;
+}
+
+nav .logo {
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+nav ul {
+  display: flex;
+  align-items: center;
+}
+
+nav ul a {
+  color: var(--secondary-color);
+  margin: 0 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+nav ul a:not(.btn)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--accent-color);
+  transition: width 0.3s;
+}
+
+nav ul a:hover:not(.btn)::after {
+  width: 100%;
+}
+
+nav .menu-icon, nav .close-icon {
+  display: none;
+  cursor: pointer;
+  color: var(--secondary-color);
+  font-size: 1.8rem;
+}
+
+/* Hero (Banner) */
+.banner {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--secondary-color);
+  padding-top: 80px; /* To offset fixed nav */
+}
+
+.banner-text h1 {
+  font-size: 3.5rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.banner-text p {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 1.5rem 0 2.5rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Sections General */
+section {
+  padding: 6rem 0;
+}
+
+/* Services */
+#servicos {
+  background-color: var(--background-light);
+}
+
+.servicos .rows-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.servicos .row-card-item {
+  background-color: var(--secondary-color);
+  padding: 2rem;
+  text-align: center;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.servicos .row-card-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+}
+
+.servicos .row-card-item i {
+  font-size: 3rem;
+  color: var(--primary-color);
+  margin-bottom: 1.5rem;
+}
+
+.servicos .row-card-item .serv-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+/* Benefits */
+#beneficios {
+  background-color: var(--secondary-color);
+}
+
+.beneficios .rows-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.beneficios .row-card-item {
+  padding: 2rem;
+  text-align: center;
+}
+
+.beneficios .row-card-item i {
+  font-size: 3rem;
+  color: var(--accent-color);
+  margin-bottom: 1.5rem;
+}
+
+.beneficios .row-card-item p {
+  font-size: 1.1rem;
+  color: var(--text-color);
+  font-weight: 500;
+}
+
+/* Testimonials */
+#depoimentos {
+  background-color: var(--background-light);
+}
+
+.depoimentos .cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.depoimentos .card-item {
+  background-color: var(--secondary-color);
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+}
+
+.depoimentos .card-item .text-user {
+  font-style: italic;
+  color: var(--text-color);
+  flex-grow: 1;
+}
+
+.depoimentos .card-item .name-user {
+  font-weight: 600;
+  margin-top: 1.5rem;
+  color: var(--primary-color);
+}
+
+.depoimentos .card-item .star {
+  margin-top: 1rem;
+  color: var(--accent-color);
+}
+
+/* Contact */
+#contato {
+  background-color: var(--secondary-color);
+}
+
+.contato .container h3 {
+  margin-bottom: 3rem;
+}
+
+.contato-info {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 3rem;
+}
+
+.contato-info .left-side, .contato-info .right-side {
+  flex: 1;
+  min-width: 300px;
+}
+
+.contato-info .left-side form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+form label {
+  display: none; /* Modern forms often use placeholders */
+}
+
+form input, form textarea {
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 1rem;
+}
+
+form input::placeholder, form textarea::placeholder {
+  color: #999;
+}
+
+form textarea {
+  resize: vertical;
+  min-height: 150px;
+}
+
+.contato-info .right-side div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.contato-info .right-side i {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+  margin-right: 1.5rem;
+  width: 30px;
+  text-align: center;
+}
+
+/* Footer */
+footer {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  text-align: center;
+  padding: 3rem 0;
+}
+
+footer .footer-links {
+  margin-bottom: 1.5rem;
+}
+
+footer .footer-links a {
+  color: var(--secondary-color);
+  margin: 0 1rem;
+  font-size: 0.9rem;
+  transition: color 0.3s;
+}
+
+footer .footer-links a:hover {
+  color: var(--accent-color);
+}
+
+footer .social-icons {
+  margin-bottom: 1.5rem;
+}
+
+footer .social-icons a {
+  color: var(--secondary-color);
+  font-size: 1.5rem;
+  margin: 0 0.8rem;
+  transition: color 0.3s;
+}
+
+footer .social-icons a:hover {
+  color: var(--accent-color);
+}
+
+footer p {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.9rem;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .banner-text h1 {
+    font-size: 2.8rem;
+  }
+}
+
+@media (max-width: 768px) {
+  nav .ul {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--primary-color);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    clip-path: circle(0% at 100% 0);
+    transition: clip-path 0.5s ease-in-out;
+  }
+
+  nav .ul.open {
+    clip-path: circle(150% at 100% 0);
+  }
+
+  nav .ul a {
+    margin: 1.5rem 0;
+    font-size: 1.2rem;
+  }
+
+  nav .ul .btn {
+    font-size: 1.2rem;
+  }
+
+  nav .menu-icon {
+    display: block;
+  }
+
+  nav .close-icon {
+    display: block;
+    position: absolute;
+    top: 1.8rem;
+    right: 5%;
+  }
+
+  .banner-text h1 {
+    font-size: 2.2rem;
+  }
+
+  .banner-text p {
+    font-size: 1rem;
+  }
+
+  h3 {
+    font-size: 2rem;
+  }
+}
diff --git a/img/background-home.jpg b/img/hero-background.jpg
similarity index 100%
rename from img/background-home.jpg
rename to img/hero-background.jpg
diff --git a/index.html b/index.html
index 59f7493..d6d24b2 100644
--- a/index.html
+++ b/index.html
@@ -1,406 +1,214 @@
-<!DOCTYPE html>
-<html lang-pt-br>
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- Font Awesome-->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
-      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <title>Techwork | Responsive</title>
-  </head>
-  <body>
-    <header id="home" style="background-image: url('img/background-home.jpg')">
-      <div class="container">
-        <nav>
-          <a href="index.html">
-            <img src="img/logo.png" alt="Logo" />
-          </a>
-          <ul class="ul">
-            <a href="#home">Home</a>
-            <a href="#conteudo">Conteúdo</a>
-            <a href="#servicos">Serviços</a>
-            <a href="#clientes">Clientes</a>
-            <a href="#sobre">Sobre nós</a>
-            <a class="btn" href="#contato">Contato</a>
-
-            <div class="close-icon" onclick="closeMenu()">
-              <i class="fa fa-times-circle"></i>
-            </div>
-          </ul>
-
-          <div class="menu-icon" onclick="openMenu()">
-            <i class="fa fa-bars"></i>
-          </div>
-        </nav>
-      </div>
-
-      <!-- Seção Banner ------------------------------------>
-      <section class="banner">
-        <div class="banner-text">
-          <h1>Techwork</h1>
-          <p>Constuimos sua marca com habilidades no código e design</p>
-          <a class="btn animate-btn" href="contato.html">Entar em contato</a>
-        </div>
-      </section>
-    </header>
-
-    <!-- Seção Conteúdo ------------------------------------->
-    <section id="conteudo" class="conteudo">
-      <div class="container">
-        <div class="rows-cards">
-          <!-- row card item 1-->
-          <div class="row-card-item">
-            <h3>Faça mais com Techwork</h3>
-            <p>
-              Criação de websites, loja virtual, blogues para pequenas, médias e
-              grandes empresas. Ter um site online nunca foi tão fácil.
-            </p>
-          </div>
-          <span><img src="img/security1.png" alt="" /></span>
-
-          <!-- row card item 2-->
-          <span><img src="img/security2.png" alt="" /></span>
-          <div class="row-card-item">
-            <h3>Ter um website nunca foi tão fácil</h3>
-            <p>
-              Agora com a nosa empresa ter um website é algo simplesmente fácil,
-              basta entrar em contato e nós vamos desenvolver o seu website em
-              tempo redord para você começar a conquistar o mundo.
-            </p>
-          </div>
-
-          <!-- row card item 3-->
-          <div class="row-card-item">
-            <h3>Tenha um website seguro</h3>
-            <p>
-              Nós trabalhamos com tecnologias atualizadas, eficientes e as mais
-              seguras do mercado, assim conseguimos entregar os serviços de
-              backup e manutenção do seu site em tempo record.
-            </p>
-          </div>
-          <span><img src="img/security3.png" alt="" /></span>
-        </div>
-      </div>
-    </section>
-    <!--End Conteúdo  --------------------------------------->
-
-    <!-- Seção Serviços ------------------------------------->
-    <section id="servicos" class="servicos">
-      <div class="container">
-        <h3>Nossos Serviços</h3>
-        <p>Conheça os nossos melhores serviços</p>
-        <div class="rows-cards">
-          <!-- row card item 1-->
-          <div class="row-card-item">
-            <img src="img/cloud.png" alt="" />
-            <p class="serv-name"><strong>Serviços em nuvem</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-
-          <!-- row card item 2-->
-          <div class="row-card-item">
-            <img src="img/digital-marketing.png" alt="" />
-            <p class="serv-name"><strong>Marketing digital</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-
-          <!-- row card item 3-->
-          <div class="row-card-item">
-            <img src="img/seo.png" alt="" />
-            <p class="serv-name"><strong>SEO</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-
-          <!-- row card item 4-->
-          <div class="row-card-item">
-            <img src="img/virtual_store.png" alt="" />
-            <p class="serv-name"><strong>Criação de loja virtual</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-
-          <!-- row card item 5-->
-          <div class="row-card-item">
-            <img src="img/layer.png" alt="" />
-            <p class="serv-name"><strong>Identidade visual & design</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-
-          <!-- row card item 6-->
-          <div class="row-card-item">
-            <img src="img/manager.png" alt="" />
-            <p class="serv-name"><strong>Criação de conteúdo</strong></p>
-            <p class="serv-text">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-              Perferendis reprehenderit, dicta quasi incidunt facilis optio
-              soluta aut debitis sunt sint velit.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!--End Serviços  --------------------------------------->
-
-    <!--Seção Dados ----------------------------------->
-    <section class="dados">
-      <div class="container">
-        <div class="dados-item">
-          <img src="img/cloud.png" alt="" />
-          <p><strong>+360</strong><br />Projetos concluídos</p>
-        </div>
-
-        <div class="dados-item">
-          <img src="img/manager.png" alt="" />
-          <p><strong>+890</strong><br />Clientes satisfeitos</p>
-        </div>
-
-        <div class="dados-item">
-          <img src="img/trophy.png" alt="" />
-          <p><strong>+4303</strong><br />Jornada de trabalho</p>
-        </div>
-
-        <div class="dados-item">
-          <img src="img/layer.png" alt="" />
-          <p><strong>+254</strong><br />Publicidade paga</p>
-        </div>
-      </div>
-    </section>
-    <!--End Dados ------------------------------------->
-
-    <!--Seção Clientes ------------------------------------->
-    <section class="clientes">
-      <div class="container">
-        <h3>Clientes e parceiros</h3>
-        <p>Prestamos serviços para todo tipo de empresa ou projeto</p>
-        <div class="rows-cards">
-          <!-- row card item 1-->
-          <div class="row-card-item">
-            <img src="img/pfaudler.png" alt="" />
-          </div>
-          <!-- row card item 2-->
-          <div class="row-card-item">
-            <img src="img/slack.png" alt="" />
-          </div>
-          <!-- row card item 3-->
-          <div class="row-card-item">
-            <img src="img/eliane-indiani.png" alt="" />
-          </div>
-          <!-- row card item 4-->
-          <div class="row-card-item">
-            <img src="img/wow.png" alt="" />
-          </div>
-        </div>
-      </div>
-    </section>
-    <!--End Clientes  -------------------------------------->
-
-    <!--Section Sobre -------------------------------------->
-    <section id="sobre" class="sobre">
-      <div class="container">
-        <div class="sobre-text">
-          <h3>Sobre nós</h3>
-          <p>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita
-            dolorem perspiciatis quam eveniet eius assumenda dolorum ea? At quam
-            nesciunt quas? Necessitatibus cum corporis fugit doloremque eveniet
-            quo aperiam dolor porro, neque, ad cumque, quis quia culpa
-            consequuntur deleniti provident vel quisquam. Tenetur, rerum
-            debitis.
-          </p>
-          <a class="btn animate-btn" href="contato.html">Saiba mais</a>
-        </div>
-        <div class="sobre-img">
-          <img src="img/sobre.jpg" alt="Sobre" />
-        </div>
-      </div>
-    </section>
-    <!--End Sobre --------------------------------------->
-
-    <!-- Seção Depoimentos ---------------------------------->
-    <section class="depoimentos">
-      <div class="container">
-        <h3>Depoimentos</h3>
-        <p>O que os clientes estão dizendo sobre nós</p>
-        <div class="cards">
-          <!-- card item 1-->
-          <div class="card-item">
-            <img src="img/me.jpg" alt="Matheus" />
-            <p class="name-user">Herry Jones</p>
-            <p class="text-user">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-            <div class="star">
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star-o" aria-hidden="true"></i>
-            </div>
-          </div>
-          <!--end card item 1-->
-
-          <!-- card item 2-->
-          <div class="card-item">
-            <img src="img/me.jpg" alt="Matheus" />
-            <p class="name-user">Herry Jones</p>
-            <p class="text-user">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-            <div class="star">
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star-o" aria-hidden="true"></i>
-            </div>
-          </div>
-          <!--end card item 2-->
-
-          <!-- card item 3-->
-          <div class="card-item">
-            <img src="img/me.jpg" alt="Matheus" />
-            <p class="name-user">Herry Jones</p>
-            <p class="text-user">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-            <div class="star">
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star" aria-hidden="true"></i>
-              <i class="fa fa-star-o" aria-hidden="true"></i>
-            </div>
-          </div>
-          <!--end card item 3-->
-        </div>
-      </div>
-    </section>
-    <!-- End Depoimentos --------------------------------->
-
-    <!-- Contato------------------------------------------>
-    <section id="contato" class="contato">
-      <div class="container">
-        <h3>Contato</h3>
-        <p>
-          Entre em contato que retornaremos em tempo recorde<br />para que seu
-          projeto não fique só no papel.
-        </p>
-
-        <div class="contato-info">
-          <div class="left-side">
-            <div>
-              <i class="fa fa-map-marker"></i>
-              <p>
-                Av. Charles Schnneider, 1700 - Vila Costa<br />
-                CEP: 12040-900 - Taubaté/SP
-              </p>
-            </div>
-            <div>
-              <i class="fa fa-envelope"></i>
-              <p>comercial@techwork.com.br</p>
-            </div>
-            <div>
-              <i class="fa fa-phone"></i>
-              <p>+55 12 99164-9931</p>
-            </div>
-            <div class="links">
-              <a id="icon" href="#"><i class="fa fa-facebook"></i></a>
-              <a id="icon" href="#"><i class="fa fa-instagram"></i></a>
-              <a id="icon" href="#"><i class="fa fa-github"></i></a>
-              <a id="icon" href="#"><i class="fa fa-linkedin"></i></a>
-            </div>
-          </div>
-
-          <div class="right-side">
-            <form action="https://api.staticforms.xyz/submit" method="post">
-              <label>Nome:</label>
-              <input type="text" name="name" required autocomplete="none" />
-              <label>E-mail:</label>
-              <input type="email" name="email" required autocomplete="none" />
-              <label>Assunto:</label>
-              <input type="text" name="assunto" required autocomplete="none" />
-              <label>Mensagem:</label>
-              <textarea name="message" cols="30" rows="10" required ></textarea>
-              <div id="button">
-                <button type="submit" name="enviar" class="btn animate-btn">
-                  Enviar Mensagem
-                </button>
-              </div>
-
-              <input
-                type="hidden"
-                name="accessKey"
-                value="fffa98ab-815c-4245-b7d4-10c496fdffdb"
-              />
-              <input type="hidden" name="replyTo" value="@" />
-              <input
-                type="hidden"
-                name="redirectTo"
-                value="http://127.0.0.1:5500/obrigado.html"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="mapa">
-      <div class="mapa">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3671.987005210367!2d-45.58438422388417!3d-23.024249342081127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ccf8675370199b%3A0x26b086d017a216fd!2sTaubat%C3%A9%20Shopping!5e0!3m2!1spt-BR!2sbr!4v1699924235021!5m2!1spt-BR!2sbr"
-          width="100%"
-          height="700"
-          style="border: 0"
-          allowfullscreen=""
-          loading="lazy"
-          referrerpolicy="no-referrer-when-downgrade"
-        ></iframe>
-      </div>
-    </section>
-    <!-- End Contato ------------------------------------->
-
-    <!--Footer ------------------------------------------->
-    <footer>
-      <div class="container">
-        <div class="footer-text">
-          <p>
-            Copyright © 2023 - <span>Techwork</span> | Todos os direitos
-            reservados.
-          </p>
-          <a href="#">Política de privacidade e proteção de dados pessoais.</a>
-        </div>
-      </div>
-    </footer>
-
-    <script src="js/main.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Font Awesome-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
+      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+    <title>Manutenção Expressa | Fornos e Fogões</title>
+  </head>
+  <body>
+    <header id="home" style="background-image: url('img/hero-background.jpg')">
+      <div class="container">
+        <nav>
+          <a href="index.html" class="logo"> Manutenção Expressa </a>
+          <ul class="ul">
+            <a href="#home">Início</a>
+            <a href="#servicos">Serviços</a>
+            <a href="#beneficios">Benefícios</a>
+            <a href="#depoimentos">Depoimentos</a>
+            <a href="#contato">Contato</a>
+            <a class="btn" href="#contato">Solicitar Orçamento</a>
+
+            <div class="close-icon" onclick="closeMenu()">
+              <i class="fa fa-times-circle"></i>
+            </div>
+          </ul>
+
+          <div class="menu-icon" onclick="openMenu()">
+            <i class="fa fa-bars"></i>
+          </div>
+        </nav>
+      </div>
+
+      <!-- Seção Hero -->
+      <section class="banner">
+        <div class="banner-text">
+          <h1>Seu forno ou fogão parou? Nós resolvemos rápido!</h1>
+          <p>Especialistas em manutenção residencial com atendimento rápido e garantido.</p>
+          <a class="btn animate-btn" href="#contato">Agendar visita agora</a>
+        </div>
+      </section>
+    </header>
+
+    <!-- Seção de Serviços -->
+    <section id="servicos" class="servicos">
+      <div class="container">
+        <h3>O que fazemos</h3>
+        <div class="rows-cards">
+          <div class="row-card-item">
+            <i class="fa fa-fire"></i>
+            <p class="serv-name"><strong>Manutenção de fornos elétricos e a gás</strong></p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-wrench"></i>
+            <p class="serv-name"><strong>Reparos em fogões de todas as marcas</strong></p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-shield"></i>
+            <p class="serv-name"><strong>Troca de peças com garantia</strong></p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-cog"></i>
+            <p class="serv-name"><strong>Limpeza técnica e preventiva</strong></p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-star"></i>
+            <p class="serv-name"><strong>Atendimento emergencial</strong></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Seção de Benefícios -->
+    <section id="beneficios" class="beneficios">
+      <div class="container">
+        <h3>Por que escolher a gente?</h3>
+        <div class="rows-cards">
+          <div class="row-card-item">
+            <i class="fa fa-clock-o"></i>
+            <p>Atendimento rápido e pontual</p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-certificate"></i>
+            <p>Técnicos certificados</p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-thumbs-up"></i>
+            <p>Garantia no serviço</p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-usd"></i>
+            <p>Preço justo e transparente</p>
+          </div>
+          <div class="row-card-item">
+            <i class="fa fa-home"></i>
+            <p>Atendimento em domicílio</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Seção de Depoimentos -->
+    <section id="depoimentos" class="depoimentos">
+      <div class="container">
+        <h3>Clientes satisfeitos</h3>
+        <div class="cards">
+          <div class="card-item">
+            <p class="text-user">“Tive um problema com meu forno e o técnico resolveu tudo no mesmo dia. Super recomendo!”</p>
+            <p class="name-user">— Ana Paula, São Paulo</p>
+            <div class="star">
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+            </div>
+          </div>
+           <div class="card-item">
+            <p class="text-user">“Atendimento nota 10 e preço justo. Meu fogão ficou novo em folha, virei cliente!”</p>
+            <p class="name-user">— Carlos Souza, Campinas</p>
+            <div class="star">
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+            </div>
+          </div>
+           <div class="card-item">
+            <p class="text-user">“Equipe muito profissional e educada. Fizeram a limpeza preventiva do meu forno e o resultado foi impecável.”</p>
+            <p class="name-user">— Mariana Lima, Santos</p>
+            <div class="star">
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+              <i class="fa fa-star" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Seção de Contato -->
+    <section id="contato" class="contato">
+      <div class="container">
+        <h3>Fale conosco</h3>
+        <div class="contato-info">
+          <div class="left-side">
+             <form action="https://api.staticforms.xyz/submit" method="post">
+              <label>Nome:</label>
+              <input type="text" name="name" required />
+              <label>Telefone:</label>
+              <input type="text" name="phone" required />
+              <label>Mensagem:</label>
+              <textarea name="message" cols="30" rows="10" required></textarea>
+              <button type="submit" class="btn">Enviar mensagem</button>
+               <input type="hidden" name="accessKey" value="fffa98ab-815c-4245-b7d4-10c496fdffdb"/>
+               <input type="hidden" name="redirectTo" value="obrigado.html"/>
+            </form>
+          </div>
+
+          <div class="right-side">
+            <div>
+              <i class="fa fa-whatsapp"></i>
+              <p>(11) 99999-8888</p>
+            </div>
+             <div>
+              <i class="fa fa-phone"></i>
+              <p>(11) 4444-5555</p>
+            </div>
+            <div>
+              <i class="fa fa-envelope"></i>
+              <p>contato@manutencaoexpress.com</p>
+            </div>
+            <div>
+              <i class="fa fa-map-marker"></i>
+              <p>Atendemos toda a região da Grande São Paulo.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+      <div class="container">
+        <div class="footer-links">
+            <a href="#home">Início</a>
+            <a href="#servicos">Serviços</a>
+            <a href="#beneficios">Benefícios</a>
+            <a href="#depoimentos">Depoimentos</a>
+            <a href="#contato">Contato</a>
+        </div>
+        <div class="social-icons">
+            <a href="#"><i class="fa fa-whatsapp"></i></a>
+            <a href="#"><i class="fa fa-instagram"></i></a>
+            <a href="#"><i class="fa fa-facebook"></i></a>
+        </div>
+        <p>© 2025 Manutenção Expressa – Todos os direitos reservados</p>
+      </div>
+    </footer>
+
+    <script src="js/main.js"></script>
+  </body>
+</html>