/* Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* General */
 body {
     font-family: 'Roboto', sans-serif;
     color: #333;
     background-color: #FFFFFF;
     line-height: 1.6;
     overflow-x: hidden;
      transition: margin-left 0.3s ease;
 }

 h1, h2, h3, h4, h5 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     color: #1E3A8A;
 }

 p, a {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     color: #555;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 16px;
 }

 .section {
     padding: 80px 0; /* Mais espaçamento vertical */
     text-align: center;
 }

 .section-intro {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px; /* Mais espaçamento abaixo */
     color: #666;
 }

 .bg-light {
     background-color: #F9FAFB;
 }


 /* Navigation */
 nav {
     background-color: #F5F8F9;
     padding: 16px 0;
     position: sticky;
     top: 0;
     z-index: 1000;
     transition: padding 0.3s ease-in-out;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
 }

 nav.scrolled {
     padding: 8px 0;
 }


 .nav-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 16px;
 }

 .logo {
     width: 150px;
     height: auto;
     transition: width 0.3s ease-in-out;
 }

 nav.scrolled .logo {
     width: 120px;
 }

 .menu-toggle {
     display: none;
     background: none;
     border: none;
     font-size: 30px;
     cursor: pointer;
     color: #1E3A8A;
     padding: 0;
     margin-right: 10px;
     transition: color 0.2s ease-in-out; /* Transição para o ícone */
 }
 .menu-toggle:hover {
     color: #FFC107;
 }


 .nav-menu {
     display: flex;
     align-items: center;
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 24px;
     margin: 0;
     padding: 0;
 }

 .nav-links li a {
     text-decoration: none;
     color: #1E3A8A;
     font-size: 17px;
     transition: color 0.2s ease-in-out;
     position: relative;
     display: block;
     padding: 5px 0;
 }

 .nav-links li a:hover {
     color: #FFC107;
 }

 .nav-links li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -5px;
     left: 0;
     background-color: #FFC107;
     transition: width 0.3s ease-in-out;
 }

 .nav-links li a:hover::after {
     width: 100%;
 }


 /* Elevation */
 .mdc-elevation--z2 {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .mdc-elevation--z3 {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 .mdc-elevation--z8 {
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
 }

 /* Buttons */
 .mdc-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     text-decoration: none;
     font-size: 18px;
     border-radius: 8px;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
     cursor: pointer;
     min-height: 48px;
     text-transform: none;
     font-weight: 500;
     border: none;
 }

 .mdc-button--raised {
     background-color: #FFC107;
     color: #1E3A8A;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
 }

 .mdc-button--raised:hover,
 .mdc-button--raised:focus {
     background-color: #FFD54F;
     transform: translateY(-3px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra ainda mais forte */
 }

 .mdc-button--raised.btn-whatsapp {
     background-color: #25D366;
     color: #FFFFFF;
 }

 .mdc-button--raised.btn-whatsapp:hover,
 .mdc-button--raised.btn-whatsapp:focus {
     background-color: #2ECC71;
      transform: translateY(-3px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }

 .mdc-button--raised.btn-call {
      background-color: #1E3A8A;
     color: #FFFFFF;
 }
 .mdc-button--raised.btn-call:hover,
 .mdc-button--raised.btn-call:focus {
      background-color: #0D2A6A;
      transform: translateY(-3px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }


 .mdc-button--outlined {
     background-color: transparent;
     color: #1E3A8A;
     border: 2px solid #1E3A8A;
      padding: 10px 22px;
      transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
 }

 .mdc-button--outlined:hover,
 .mdc-button--outlined:focus {
     background-color: rgba(30, 58, 138, 0.1); /* Leve fundo azul */
      color: #0D2A6A; /* Azul mais escuro */
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 }

 .mdc-button .material-icons {
     margin-right: 8px;
     font-size: 24px;
 }

 .btn-small {
     padding: 8px 16px;
     font-size: 16px;
     min-height: 40px;
 }

 .btn-full-width {
     width: 100%;
     margin-bottom: 15px;
 }


 /* Hero */
 .hero {
     position: relative;
     /* background-image: url('fundo.png'); */
     background: linear-gradient(135deg, #1E3A8A, #3498DB); /* Gradiente mais vibrante */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     text-align: center;
     padding: 120px 16px; /* Mais espaçamento vertical */
     min-height: 650px; /* Altura mínima maior */
     display: flex;
     align-items: center;
     justify-content: center;
     color: #FFFFFF;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5); /* Sobreposição mais suave */
     z-index: 1;
     opacity: 0.9; /* Um pouco mais transparente */
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 900px;
     animation: fadeInUp 1s ease-out; /* Animação ao carregar */
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-content h1 {
     font-size: 48px;
     color: #FFFFFF;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }

 .hero-content h2 {
     font-size: 36px;
     color: #FFC107;
     margin-bottom: 30px; /* Mais espaçamento abaixo */
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .hero-content p {
     font-size: 22px;
     color: #E0E0E0;
     margin-bottom: 40px;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 .hero-address {
     font-size: 20px;
     font-weight: 500;
     margin-top: 40px;
     color: #FFFFFF;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     opacity: 0.8; /* Um pouco mais sutil */
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
     animation: fadeIn 1s ease-out 0.5s forwards; /* Animação com delay */
     opacity: 0;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }

 .cta-center {
     text-align: center;
     margin-top: 50px; /* Mais espaçamento acima */
 }
 .cta-center .mdc-button {
     margin: 0 10px;
 }

 /* About */
 .about {
     position: relative;
     overflow: hidden; /* Para os elementos animados */
 }

 .about h3 {
     margin-bottom: 20px;
     font-size: 36px;
     animation: slideInLeft 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateX(-20px);
     animation-fill-mode: forwards;
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-20px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .about-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 50px; /* Mais espaçamento entre elementos */
     align-items: center;
     margin-top: 50px; /* Mais espaçamento acima */
     text-align: left;
     animation: slideInRight 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateX(20px);
     animation-fill-mode: forwards;
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(20px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .about-img {
     width: 100%;
     max-width: 500px;
     border-radius: 12px;
     margin: 0 auto;
     display: block;
     transition: transform 0.3s ease-in-out; /* Transição suave */
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra */
 }

 .about-img:hover {
     transform: scale(1.05); /* Leve zoom no hover */
     opacity: 0.9; /* Leve transparência */
 }

 .about-text {
     padding: 20px; /* Mais espaçamento interno */
     background-color: rgba(255, 255, 255, 0.8); /* Fundo levemente transparente */
     border-radius: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
 }

 .about-text p {
     font-size: 18px;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     color: #333;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }

 .about-text .mdc-button {
      margin-top: 25px;
      display: inline-flex;
 }


 /* Benefits Section */
 .benefits {
     background-color: #F0F4C3; /* Amarelo bem claro */
     position: relative;
     overflow: hidden; /* Para os elementos animados */
 }

 .benefits::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(240, 244, 195, 0.3); /* Leve sobreposição */
     z-index: 1;
 }

 .benefits h3 {
      margin-bottom: 50px; /* Mais espaçamento abaixo */
      font-size: 36px;
      position: relative;
      z-index: 2;
      animation: slideInDown 1s ease-out; /* Animação */
      opacity: 0;
      transform: translateY(-20px);
      animation-fill-mode: forwards;
 }

 @keyframes slideInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .benefit-item {
     max-width: 800px;
     margin: 25px auto; /* Mais espaçamento vertical */
     padding: 30px; /* Mais espaçamento interno */
     background-color: #FFFFFF;
     border-radius: 12px;
     text-align: center;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra mais forte */
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transição suave */
     position: relative;
     z-index: 2;
 }

 .benefit-item:hover {
     transform: translateY(-5px); /* Leve "levantar" no hover */
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Sombra ainda mais forte */
 }

 .benefit-item h4 {
     font-size: 24px;
     margin-bottom: 15px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
 }

 .benefit-item p {
     font-size: 17px;
     color: #555;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }

 .benefit-icon {
     font-size: 60px; /* Ícones maiores */
     color: #FFC107;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     transition: transform 0.3s ease-in-out; /* Transição suave */
 }

 .benefit-icon:hover {
     transform: scale(1.1); /* Leve zoom no hover */
 }

 /* Frotistas Section */
 .frotistas {
     background-color: #E3F2FD; /* Azul bem claro */
     position: relative;
     overflow: hidden; /* Para os elementos animados */
 }

 .frotistas::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(227, 242, 253, 0.3); /* Leve sobreposição */
     z-index: 1;
 }

 .frotistas h3 {
     margin-bottom: 50px; /* Mais espaçamento abaixo */
     font-size: 36px;
     position: relative;
     z-index: 2;
     animation: slideInLeft 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateX(-20px);
     animation-fill-mode: forwards;
 }

 .frotista-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 50px; /* Mais espaçamento entre elementos */
     align-items: start;
     margin-top: 50px; /* Mais espaçamento acima */
     text-align: left;
     position: relative;
     z-index: 2;
     animation: slideInRight 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateX(20px);
     animation-fill-mode: forwards;
 }

 .frotista-text {
     padding: 20px; /* Mais espaçamento interno */
     background-color: rgba(255, 255, 255, 0.8); /* Fundo levemente transparente */
     border-radius: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
 }

 .frotista-text p {
     font-size: 18px;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     color: #333;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }

 .frotista-cta-block {
     background-color: #FFC107;
     padding: 40px; /* Mais espaçamento interno */
     border-radius: 12px;
     text-align: center;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
     max-width: 450px;
     margin: 0 auto;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transição suave */
 }

 .frotista-cta-block:hover {
     transform: scale(1.02); /* Leve zoom no hover */
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Sombra ainda mais forte */
 }

 .frotista-cta-block h4 {
     font-size: 24px;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
 }

 .frotista-cta-block p {
     font-size: 17px;
     margin-bottom: 30px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }


 /* Catalog */
 .catalog {
     background-color: #FFF3E0; /* Laranja bem claro */
     position: relative;
     overflow: hidden; /* Para os elementos animados */
 }

 .catalog::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 243, 224, 0.3); /* Leve sobreposição */
     z-index: 1;
 }

 .catalog h3 {
     margin-bottom: 50px; /* Mais espaçamento abaixo */
     font-size: 36px;
     position: relative;
     z-index: 2;
     animation: slideInDown 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateY(-20px);
     animation-fill-mode: forwards;
 }

 .cluster {
     margin-bottom: 70px; /* Mais espaçamento abaixo */
     padding: 40px; /* Mais espaçamento interno */
     background-color: #FFFFFF;
     border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra mais forte */
     position: relative;
     z-index: 2;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transição suave */
 }

 .cluster:hover {
     transform: translateY(-5px); /* Leve "levantar" no hover */
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Sombra ainda mais forte */
 }

 .cluster h4 {
     font-size: 28px;
     margin-bottom: 30px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s ease-in-out; /* Transição suave */
 }

 .cluster:hover h4 {
     color: #FFC107; /* Amarelo no hover */
 }

 .cluster .icon-left {
     margin-right: 15px; /* Mais espaçamento à direita */
     font-size: 36px; /* Ícones maiores */
     color: #FFC107;
     transition: transform 0.3s ease-in-out; /* Transição suave */
 }

 .cluster:hover .icon-left {
     transform: scale(1.1); /* Leve zoom no hover */
 }

 .cluster p {
     font-size: 18px;
     margin-bottom: 40px; /* Mais espaçamento abaixo */
     color: #555;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }

 .products {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajuste no minmax */
     gap: 30px; /* Mais espaçamento entre produtos */
     justify-items: center;
     padding: 0 20px;
 }

 .mdc-card.product-card {
     background-color: #FFFFFF; /* Fundo branco para cards */
     border-radius: 12px;
     width: 100%;
     max-width: 300px; /* Largura máxima um pouco maior */
     padding: 30px; /* Mais espaçamento interno */
     text-align: center;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      border: 1px solid #eee; /* Borda sutil */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
 }

 .mdc-card.product-card:hover {
     transform: translateY(-8px); /* Efeito mais pronunciado no hover */
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
 }

 .product-card img {
     width: 100%;
     max-width: 200px; /* Tamanho da imagem um pouco maior */
     height: auto;
     border-radius: 12px; /* Mais arredondado */
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     object-fit: contain;
     background-color: #FFFFFF;
     padding: 15px; /* Mais espaçamento interno */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
     transition: transform 0.3s ease-in-out; /* Transição suave */
 }

 .product-card img:hover {
     transform: scale(1.05); /* Leve zoom no hover */
 }

 .product-card h5 {
     font-size: 22px; /* Título do produto um pouco maior */
     margin-bottom: 12px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
     transition: color 0.3s ease-in-out; /* Transição suave */
 }

 .product-card:hover h5 {
     color: #FFC107; /* Amarelo no hover */
 }

 .product-card p {
     font-size: 16px;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     color: #555;
     line-height: 1.7; /* Mais espaçamento entre linhas */
 }

 .product-card .mdc-button {
     width: 90%;
     margin-top: 15px; /* Mais espaçamento acima */
 }


 /* FAQ */
 .faq {
     background-color: #DCEDC8;
     position: relative;
     overflow: hidden;
 }

 .faq::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(220, 237, 200, 0.3);
     z-index: 1;
 }

 .faq h3 {
     margin-bottom: 50px;
     font-size: 36px;
     position: relative;
     z-index: 2;
     animation: slideInDown 1s ease-out;
     opacity: 0;
     transform: translateY(-20px);
     animation-fill-mode: forwards;
 }

 .faq-item {
     margin-bottom: 25px;
     padding: 30px;
     background-color: #FFFFFF;
     border-radius: 12px;
     text-align: left;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
     position: relative;
     z-index: 2;
     cursor: pointer;
 }

 .faq-item:hover {
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
      transform: translateY(-3px);
 }

 .faq-item h4 {
     font-size: 20px;
     margin-bottom: 15px;
     color: #1E3A8A;
     transition: color 0.3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .faq-item h4::after {
     content: '+';
     font-size: 24px;
     color: #1E3A8A;
     transition: transform 0.3s ease-in-out;
 }

 .faq-item.active h4::after {
     content: '-';
     transform: rotate(45deg);
 }

 .faq-item p {
     font-size: 17px;
     color: #333;
     line-height: 1.7;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
     padding: 0 10px;
 }

 .faq-item.active p {
     max-height: 500px;
     padding: 10px;
     margin-top: 10px;
 }


 /* Final CTA */
 .final-cta {
     background: linear-gradient(135deg, #1E3A8A, #2A5298);
     color: #FFFFFF;
     position: relative;
     overflow: hidden;
 }

 .final-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(30, 58, 138, 0.4);
     z-index: 1;
 }

 .final-cta h3 {
     font-size: 40px;
     margin-bottom: 20px;
     color: #FFFFFF;
     position: relative;
     z-index: 2;
     animation: slideInLeft 1s ease-out;
     opacity: 0;
     transform: translateX(-20px);
     animation-fill-mode: forwards;
 }

 .final-cta p {
     font-size: 22px;
     margin-bottom: 40px;
     color: #E0E0E0;
     position: relative;
     z-index: 2;
     animation: slideInRight 1s ease-out;
     opacity: 0;
     transform: translateX(20px);
     animation-fill-mode: forwards;
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-20px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(20px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .final-cta .cta-buttons {
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
      position: relative;
      z-index: 2;
      animation: fadeInUp 1s ease-out 0.5s forwards;
      opacity: 0;
      transform: translateY(20px);
 }

 /* Footer */
 footer {
     background-color: #FFC107;
     text-align: center;
     padding: 60px 16px; /* Mais espaçamento vertical */
     color: #1E3A8A;
     position: relative;
     overflow: hidden;
 }

 footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 193, 7, 0.1); /* Leve sobreposição */
     z-index: 1;
 }

 footer h3 {
     font-size: 30px;
     margin-bottom: 15px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
     position: relative;
     z-index: 2;
     animation: slideInDown 1s ease-out; /* Animação */
     opacity: 0;
     transform: translateY(-20px);
     animation-fill-mode: forwards;
 }

 .footer-divider {
     width: 80px;
     height: 2px;
     background-color: #1E3A8A;
     margin: 15px auto 30px; /* Mais espaçamento vertical */
     border: none;
     position: relative;
     z-index: 2;
 }

 footer p {
     font-size: 18px;
     margin-bottom: 20px; /* Mais espaçamento abaixo */
     color: #1E3A8A;
     position: relative;
     z-index: 2;
     opacity: 0.8; /* Um pouco mais sutil */
 }

 footer .contact {
     display: flex;
     flex-direction: column;
     gap: 15px; /* Mais espaçamento vertical */
     max-width: 400px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
 }

 footer .contact p {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     transition: color 0.3s ease-in-out; /* Transição suave */
 }

 footer .contact p:hover {
     color: #0D2A6A; /* Azul mais escuro no hover */
 }

 footer .contact a {
     color: #1E3A8A;
     text-decoration: none;
 }

 footer .contact a:hover {
     color: #0D2A6A;
     text-decoration: underline;
 }

 .contact-icon {
     font-size: 24px;
     margin-right: 15px; /* Mais espaçamento à direita */
     color: #1E3A8A;
     transition: transform 0.3s ease-in-out; /* Transição suave */
 }

 .contact-icon:hover {
     transform: scale(1.1); /* Leve zoom no hover */
 }


 /* WhatsApp Float */
 .whatsapp-float {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 1000;
     border-radius: 50%;
     padding: 12px; /* Mais espaçamento interno */
     background-color: #25D366;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .whatsapp-float:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }

 .whatsapp-float img {
     width: 100%;
     height: auto;
 }

 /* Responsiveness */
 @media (max-width: 768px) {

     /* Navigation - Mobile Styles */
     nav {
         padding: 12px 16px;
     }

     nav.scrolled {
         padding: 12px 16px;
     }
      nav.scrolled .logo {
         width: 150px;
      }


     .nav-content {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         padding: 0;
     }

     .logo {
         width: 140px;
     }

     .menu-toggle {
         display: block;
          order: 2;
     }

     .nav-menu {
         position: fixed;
         top: 0;
         right: -100%;
         width: 75%;
         height: 100%;
         background-color: #1E3A8A;
         flex-direction: column;
         padding: 80px 20px 20px;
         transition: right 0.3s ease-in-out;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
         z-index: 999;
         align-items: flex-start;
     }

     .nav-menu.active {
         right: 0;
     }

     .nav-links {
         flex-direction: column;
         width: 100%;
         gap: 15px;
     }

     .nav-links li {
         width: 100%;
     }

     .nav-links li a {
         color: #FFFFFF;
         font-size: 18px;
         padding: 12px 10px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }

     .nav-links li a:hover {
         background-color: rgba(255, 255, 255, 0.1);
     }

     .nav-links li a::after {
         display: none;
     }

      .menu-toggle.active::before {
          content: 'close';
      }


     .hero {
         padding: 80px 16px;
         min-height: 500px;
     }

     .hero-content h1 {
         font-size: 36px;
     }

     .hero-content h2 {
         font-size: 28px;
     }

     .hero-content p {
         font-size: 20px;
     }

      .cta-buttons {
         flex-direction: column;
         gap: 15px;
         max-width: 300px;
         margin-left: auto;
         margin-right: auto;
     }

      .cta-center .mdc-button {
          margin: 10px 0;
      }

     .section {
         padding: 40px 0;
     }

      .section-intro {
         font-size: 17px;
         margin-bottom: 30px;
     }

     .about h3, .benefits h3, .catalog h3, .faq h3, .final-cta h3, .frotistas h3 {
         font-size: 30px;
     }

     .about-grid {
         grid-template-columns: 1fr;
         gap: 30px;
         text-align: center;
     }

     .about-text {
         text-align: center;
     }

      .about-text .mdc-button {
          display: inline-flex;
      }


     .benefit-item h4 {
         font-size: 22px;
     }

      .benefit-item p {
         font-size: 16px;
     }

      .benefit-icon {
         font-size: 40px;
     }

     .frotista-content {
         grid-template-columns: 1fr;
         gap: 30px;
         text-align: center;
     }
      .frotista-cta-block {
         padding: 20px;
      }
     .frotista-cta-block h4 {
         font-size: 20px;
     }
     .frotista-cta-block p {
         font-size: 16px;
         margin-bottom: 20px;
     }
      .btn-full-width {
         width: 80%;
         margin-left: auto;
         margin-right: auto;
      }


     .cluster {
         margin-bottom: 40px;
         padding: 20px;
     }

     .cluster h4 {
         font-size: 24px;
         flex-direction: column;
         gap: 10px;
     }
      .cluster .icon-left {
         margin-right: 0;
         margin-bottom: 5px;
         font-size: 28px;
     }

     .cluster p {
         font-size: 17px;
         margin-bottom: 20px;
     }

     .products {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 15px;
         padding: 0;
     }

     .mdc-card.product-card {
         max-width: 250px;
         padding: 15px;
     }
      .product-card h5 {
         font-size: 18px;
     }
      .product-card p {
         font-size: 14px;
     }

     .faq-item {
         padding: 20px;
     }
      .faq-item h4 {
         font-size: 18px;
     }
      .faq-item p {
         font-size: 16px;
     }


     .final-cta h3 {
         font-size: 32px;
     }
      .final-cta p {
         font-size: 18px;
     }


     footer {
         padding: 40px 16px;
     }

     footer h3 {
         font-size: 26px;
     }

     footer p {
         font-size: 16px;
     }

     footer .contact p {
         font-size: 15px;
     }

     .contact-icon {
         font-size: 22px;
     }

     .whatsapp-float {
         width: 50px;
         height: 50px;
         bottom: 16px;
         right: 16px;
         padding: 8px;
     }

 }

 @media (max-width: 480px) {
      .hero {
         padding: 60px 10px;
         min-height: 450px;
     }

     .hero-content h1 {
         font-size: 32px;
     }

     .hero-content h2 {
         font-size: 26px;
     }

     .hero-content p {
         font-size: 17px;
     }

      .hero-address {
         font-size: 17px;
     }


     .section-intro {
         font-size: 16px;
     }

      .about h3, .benefits h3, .catalog h3, .faq h3, .final-cta h3, .frotistas h3 {
         font-size: 26px;
     }

      .benefit-item h4 {
         font-size: 20px;
     }
      .benefit-item p {
         font-size: 15px;
     }
     .benefit-icon {
         font-size: 36px;
     }

     .frotista-cta-block {
          max-width: 100%;
     }
      .btn-full-width {
         width: 100%;
      }


      .cluster h4 {
         font-size: 20px;
     }
      .cluster .icon-left {
         font-size: 24px;
     }
      .cluster p {
         font-size: 16px;
     }

     .products {
          grid-template-columns: 1fr;
     }
      .mdc-card.product-card {
         max-width: 280px;
         margin: 0 auto;
     }


     .faq-item h4 {
         font-size: 17px;
     }
      .faq-item p {
         font-size: 15px;
     }


     .final-cta h3 {
         font-size: 28px;
     }
      .final-cta p {
         font-size: 17px;
     }


      footer h3 {
         font-size: 22px;
     }
      footer p {
         font-size: 15px;
     }
      footer .contact p {
         font-size: 14px;
     }
     .contact-icon {
         font-size: 20px;
     }

      .whatsapp-float {
         width: 45px;
         height: 45px;
         padding: 6px;
     }
 }

 /* Seções específicas (redundância defensiva para modularidade) */
 .about h3,
 .benefits h3,
 .frotistas h3,
 .catalog h3,
 .faq h3,
 .final-cta h3,
 .frotista-cta-block h4,
 .benefit-item h4,
 .cluster h4,
 .faq-item h4 {
     text-transform: uppercase;
 }

 /* Versalete para títulos menores (produtos) */
 .product-card h5 {
     font-variant: small-caps;
     text-transform: none;
     font-size: 18px;
 }

 /* Botões em caixa alta */
 .mdc-button {
     text-transform: uppercase;
     font-weight: 600;
 }

 /* Links de navegação em caixa alta */
 .nav-links li a {
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: 0.5px;
 }