/* Variáveis e reset */
        :root {
          --primary: #192947;
          /* Alterado para #192947 */
          --secondary: #4AC0E7;
          --accent: #00a651;
          --dark: #1e3a8a;
          --light: #f8f9fa;
          --text: #333;
          --gray: #6c757d;
          --transition: all 0.3s ease;
          --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          --border-radius: 8px;
        }

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

        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          line-height: 1.6;
          color: var(--text);
          background-color: #fff;
          overflow-x: hidden;
        }

        a {
          text-decoration: none;
          color: inherit;
        }

        ul {
          list-style: none;
        }

        img {
          max-width: 100%;
          height: auto;
          display: block;
        }

        .container {
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        .btn {
          display: inline-block;
          background: #f5f7fa;
          color: var(--primary);
          padding: 12px 28px;
          border-radius: var(--border-radius);
          font-weight: 600;
          transition: var(--transition);
          border: none;
          cursor: pointer;
          text-align: center;
        }

        .btn:hover {
          background: #0f1d38;
          color: white;
          transform: translateY(-3px);
          box-shadow: var(--shadow);
        }

        .btn-outline {
          background: transparent;
          border: 2px solid white;
          color: white;
        }

        .btn-outline:hover {
          background: rgba(255, 255, 255, 0.1);
          color: white;
        }

        section {
          padding: 80px 0;
        }

        .section-title {
          text-align: center;
          margin-bottom: 50px;
        }

        .section-title h2 {
          font-size: 2.5rem;
          color: var(--dark);
          margin-bottom: 15px;
          position: relative;
          display: inline-block;
        }

        .section-title h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: var(--secondary);
          border-radius: 2px;
        }

        .section-title p {
          font-size: 1.1rem;
          color: var(--gray);
          max-width: 700px;
          margin: 0 auto;
        }

        /* Header */
        header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          background: var(--primary);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          transition: var(--transition);
          color: white;
        }

        .header-scrolled {
          background: var(--primary);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
          padding: 10px 0;
        }

        .header-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
        }

        .logo {
          display: flex;
          align-items: center;
        }

        .logo img {
          height: 60px;
          transition: var(--transition);
        }

        .header-scrolled .logo img {
          height: 50px;
        }

        nav ul {
          display: flex;
          gap: 30px;
        }

        nav ul li a {
          font-weight: 600;
          position: relative;
          padding: 5px 0;
          transition: var(--transition);
          color: white;
        }

        nav ul li a::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--secondary);
          transition: var(--transition);
        }

        nav ul li a:hover {
          color: var(--secondary);
        }

        nav ul li a:hover::after,
        nav ul li a.active::after {
          width: 100%;
        }

        .mobile-toggle {
          display: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: white;
        }

        /* Hero Slider */
        .hero-slider {
          height: 100vh;
          position: relative;
          overflow: hidden;
        }

        .swiper {
          width: 100%;
          height: 100%;
        }

        .swiper-slide {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          background-size: cover;
          background-position: center;
        }

        .swiper-slide::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
        }

        .slide-content {
          position: relative;
          z-index: 1;
          text-align: center;
          color: white;
          max-width: 800px;
          padding: 0 20px;
        }

        .slide-content h1 {
          font-size: 3.5rem;
          margin-bottom: 20px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .slide-content p {
          font-size: 1.2rem;
          margin-bottom: 30px;
          text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .swiper-button-next,
        .swiper-button-prev {
          color: white;
          background: rgba(0, 0, 0, 0.3);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          transition: var(--transition);
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
          background: var(--primary);
        }

        .swiper-pagination-bullet {
          background: white;
          opacity: 0.7;
          width: 12px;
          height: 12px;
        }

        .swiper-pagination-bullet-active {
          background: var(--secondary);
          opacity: 1;
        }

        /* Welcome Section */
        .welcome {
          background: var(--light);
        }

        .welcome-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          align-items: center;
        }

        .welcome-content h2 {
          font-size: 2.2rem;
          color: var(--dark);
          margin-bottom: 20px;
        }

        .welcome-content h1 {
          font-size: 1.8rem;
          color: var(--primary);
          margin-bottom: 20px;
        }

        .welcome-content p {
          margin-bottom: 20px;
        }

        .welcome-image {
          border-radius: var(--border-radius);
          overflow: hidden;
          box-shadow: var(--shadow);
          transition: var(--transition);
        }

        .welcome-image:hover {
          transform: translateY(-10px);
        }

        /* Features */
        .features-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 30px;
        }

        .feature-card {
          background: white;
          border-radius: var(--border-radius);
          padding: 30px;
          text-align: center;
          box-shadow: var(--shadow);
          transition: var(--transition);
          border-top: 3px solid var(--secondary);
        }

        .feature-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
          width: 80px;
          height: 80px;
          margin: 0 auto 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(74, 192, 231, 0.1);
          border-radius: 50%;
        }

        .feature-icon img {
          width: 40px;
          height: 40px;
        }

        .feature-card h3 {
          font-size: 1.4rem;
          margin-bottom: 15px;
          color: var(--dark);
        }

        /* Products */
        .products {
          background: var(--light);
        }

        .products-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 30px;
        }

        .product-card {
          background: white;
          border-radius: var(--border-radius);
          overflow: hidden;
          box-shadow: var(--shadow);
          transition: var(--transition);
        }

        .product-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .product-image {
          height: 200px;
          overflow: hidden;
          background: #f5f7fa;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .product-image img {
          max-height: 180px;
          object-fit: contain;
          transition: var(--transition);
        }

        .product-card:hover .product-image img {
          transform: scale(1.1);
        }

        .product-content {
          padding: 20px;
        }

        .product-content h3 {
          font-size: 1.3rem;
          margin-bottom: 10px;
          color: var(--dark);
        }

        .product-content .btn {
          width: 100%;
          margin-top: 15px;
        }

        /* Testimonials */
        .testimonial-container {
          max-width: 800px;
          margin: 0 auto;
        }

        .testimonial-slider {
          background: white;
          border-radius: var(--border-radius);
          padding: 40px;
          box-shadow: var(--shadow);
        }

        .testimonial-content {
          text-align: center;
          font-size: 1.1rem;
          font-style: italic;
          margin-bottom: 30px;
          color: var(--text);
        }

        .testimonial-author {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
        }

        .testimonial-author img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover;
        }

        .author-info h4 {
          font-size: 1.2rem;
          color: var(--dark);
        }

        .author-info p {
          color: var(--gray);
          font-size: 0.9rem;
        }

        /* Contact Banner */
        .contact-banner {
          background: linear-gradient(rgba(25, 41, 71, 0.9), rgba(25, 41, 71, 0.9)), var(--primary);
          background-size: cover;
          background-position: center;
          color: white;
          text-align: center;
          padding: 80px 0;
        }

        .contact-banner h2 {
          font-size: 2.5rem;
          margin-bottom: 20px;
        }

        .contact-banner p {
          max-width: 700px;
          margin: 0 auto 30px;
          font-size: 1.1rem;
        }

        /* Map */
        .map-container {
          border-radius: var(--border-radius);
          overflow: hidden;
          box-shadow: var(--shadow);
          height: 400px;
        }

        .map-container iframe {
          width: 100%;
          height: 100%;
          border: none;
        }

        /* Footer */
        footer {
          background: var(--primary);
          color: white;
          padding: 60px 0 30px;
        }

        .footer-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 40px;
          margin-bottom: 40px;
        }

        .footer-col h3 {
          font-size: 1.3rem;
          margin-bottom: 20px;
          position: relative;
          padding-bottom: 10px;
        }

        .footer-col h3::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 2px;
          background: var(--secondary);
        }

        .footer-col p {
          margin-bottom: 15px;
          opacity: 0.8;
        }

        .footer-links li {
          margin-bottom: 10px;
        }

        .footer-links a {
          opacity: 0.8;
          transition: var(--transition);
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .footer-links a:hover {
          opacity: 1;
          color: var(--secondary);
          transform: translateX(5px);
        }

        .footer-links i {
          color: var(--secondary);
        }

        .social-links {
          display: flex;
          gap: 15px;
          margin-top: 20px;
        }

        .social-links a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          transition: var(--transition);
        }

        .social-links a:hover {
          background: var(--secondary);
          transform: translateY(-5px);
        }

        .copyright {
          text-align: center;
          padding-top: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          font-size: 0.9rem;
          opacity: 0.7;
        }

        .developer-credit {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin-top: 10px;
          color: rgba(255, 255, 255, 0.7);
        }

        .developer-credit a {
          display: flex;
          align-items: center;
          gap: 5px;
          color: var(--secondary);
          font-weight: 600;
        }

        /* Responsividade */
        @media (max-width: 992px) {
          .slide-content h1 {
            font-size: 2.8rem;
          }

          .welcome-container {
            grid-template-columns: 1fr;
          }
        }

        @media (max-width: 768px) {
          .mobile-toggle {
            display: block;
          }

          nav {
            position: fixed;
            top: 80px;
            left: -100%;
            width: 80%;
            height: calc(100vh - 80px);
            background: var(--primary);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
            z-index: 1000;
            padding: 30px;
          }

          nav.active {
            left: 0;
          }

          nav ul {
            flex-direction: column;
            gap: 20px;
          }

          .slide-content h1 {
            font-size: 2.2rem;
          }

          .slide-content p {
            font-size: 1rem;
          }

          .section-title h2 {
            font-size: 2rem;
          }
        }

        @media (max-width: 576px) {
          .hero-slider {
            height: 80vh;
          }

          .slide-content h1 {
            font-size: 1.8rem;
          }

          section {
            padding: 60px 0;
          }
        }

        /* Hero Section for About Page */
        .hero-about {
          background: linear-gradient(rgba(25, 41, 71, 0.7), rgba(25, 41, 71, 0.7)), url('../images/banner_principal_1520x600.jpg') no-repeat center center/cover;
          color: white;
          text-align: center;
          padding: 150px 0 100px;
          /* Ajuste o padding para não colidir com o header fixo */
          margin-top: 80px;
          /* Compensa a altura do header fixo */
        }

        .welcome-container.about-content-grid {
          display: block;
          /* Remove o layout de grid */
          max-width: 900px;
          /* Define uma largura máxima para o texto */
          margin: 0 auto;
          /* Centraliza o bloco de texto */
          padding: 0 20px;
          /* Adiciona padding para telas menores */
          text-align: justify;
          /* Justifica o texto para uma aparência mais formal e legível */
        }

        .welcome-content h2 {
          text-align: center;
          /* Centraliza o título "Quem Somos" */
          margin-bottom: 30px;
          /* Mais espaço abaixo do título */
          font-size: 2.8rem;
          /* Aumenta um pouco o tamanho do título */
          color: var(--primary);
          /* Garante a cor principal */
          position: relative;
          display: inline-block;
          /* Para o pseudo-elemento da linha abaixo */
          left: 50%;
          /* Centraliza o bloco */
          transform: translateX(-50%);
          /* Ajuste fino para centralizar */
        }

        .welcome-content h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: var(--secondary);
          border-radius: 2px;
        }

        .welcome-content p {
          font-size: 1.15rem;
          /* Aumenta o tamanho da fonte para melhor leitura */
          line-height: 1.8;
          /* Aumenta o espaçamento entre linhas */
          margin-bottom: 25px;
          /* Mais espaço entre os parágrafos */
          color: var(--text);
          /* Garante uma cor de texto legível */
        }

        /* Ajustes responsivos para a seção "Quem Somos" */
        @media (max-width: 768px) {
          .welcome-container.about-content-grid {
            text-align: left;
            /* Alinha o texto à esquerda em telas menores */
          }

          .welcome-content h2 {
            font-size: 2.2rem;
            /* Ajusta o tamanho do título em telas menores */
          }
        }

        @media (max-width: 576px) {
          .welcome-content h2 {
            font-size: 1.8rem;
            /* Ajusta ainda mais o tamanho do título */
          }

          .welcome-content p {
            font-size: 1rem;
            /* Ajusta o tamanho da fonte dos parágrafos */
            line-height: 1.7;
            /* Mantém o bom espaçamento */
          }
        }


        /* Responsividade para a página Sobre */
        @media (max-width: 992px) {
          .hero-about h1 {
            font-size: 2.8rem;
          }

          .about-content-grid {
            grid-template-columns: 1fr;
            /* Uma coluna em telas menores */
          }

          .about-content-grid .welcome-content,
          .about-content-grid .welcome-image,
          .about-images-column {
            grid-column: span 1;
            /* Ocupa a largura total */
          }
        }

        @media (max-width: 768px) {
          .hero-about h1 {
            font-size: 2.2rem;
          }

          .hero-about {
            padding: 120px 0 80px;
          }
        }

        @media (max-width: 576px) {
          .hero-about h1 {
            font-size: 1.8rem;
          }

          .hero-about p {
            font-size: 1rem;
          }
        }

        /* Hero Section for Contact Page */
        .hero-contact {
          background: linear-gradient(rgba(25, 41, 71, 0.7), rgba(25, 41, 71, 0.7));
          /* Use uma imagem de fundo para o banner de contato se tiver uma específica, senão use a principal */
          color: white;
          text-align: center;
          padding: 150px 0 100px;
          /* Ajuste o padding para não colidir com o header fixo */
          margin-top: 80px;
          /* Compensa a altura do header fixo */
        }

        .hero-contact h1 {
          font-size: 3.5rem;
          margin-bottom: 15px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .hero-contact p {
          font-size: 1.2rem;
          max-width: 800px;
          margin: 0 auto;
          text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* Contact Form Section */
        .contact-form-section {
          padding: 80px 0;
          background: var(--light);
        }

        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 2fr;
          /* Coluna de informações de contato e coluna de formulário */
          gap: 50px;
          align-items: flex-start;
        }

        .contact-info {
          display: flex;
          flex-direction: column;
          gap: 30px;
        }

        .info-card {
          background: white;
          padding: 30px;
          border-radius: var(--border-radius);
          box-shadow: var(--shadow);
          text-align: center;
          transition: var(--transition);
          border-top: 3px solid var(--secondary);
        }

        .info-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .info-card i {
          font-size: 2.5rem;
          color: var(--secondary);
          margin-bottom: 15px;
        }

        .info-card h3 {
          font-size: 1.5rem;
          color: var(--dark);
          margin-bottom: 10px;
        }

        .info-card p {
          color: var(--gray);
          font-size: 1rem;
        }

        .info-card p a {
          color: var(--gray);
          transition: var(--transition);
        }

        .info-card p a:hover {
          color: var(--primary);
        }


        .contact-form {
          background: white;
          padding: 40px;
          border-radius: var(--border-radius);
          box-shadow: var(--shadow);
        }

        .contact-form .section-title {
          text-align: left;
          /* Alinha o título do formulário à esquerda */
          margin-bottom: 30px;
        }

        .contact-form .section-title h2::after {
          left: 0;
          /* Alinha a linha de baixo do título à esquerda */
          transform: translateX(0);
        }

        .form-group {
          margin-bottom: 20px;
        }

        .form-group label {
          display: block;
          margin-bottom: 8px;
          font-weight: 600;
          color: var(--text);
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group textarea,
        .form-group select {
          width: 100%;
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: var(--border-radius);
          font-size: 1rem;
          color: var(--text);
          transition: border-color 0.3s ease;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
          border-color: var(--secondary);
          outline: none;
          box-shadow: 0 0 0 3px rgba(74, 192, 231, 0.2);
        }

        .form-group textarea {
          resize: vertical;
          min-height: 120px;
        }

        .select-wrapper {
          position: relative;
        }

        .select-wrapper select {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2C197.399L146.2%2C56.601C145.4%2C55.801%2C144.5%2C55.401%2C143.6%2C55.401C142.7%2C55.401%2C141.8%2C55.801%2C141%2C56.601L0%2C197.399c-1.6%2C1.6-1.6%2C4.1%2C0%2C5.7c1.6%2C1.6%2C4.1%2C1.6%2C5.7%2C0l137.9-137.9l137.9%2C137.9c1.6%2C1.6%2C4.1%2C1.6%2C5.7%2C0C288.5%2C201.599%2C288.5%2C198.999%2C287%2C197.399z%22%2F%3E%3C%2Fsvg%3E');
          background-repeat: no-repeat;
          background-position: right 12px top 50%;
          background-size: 10px auto;
          padding-right: 35px;
          /* Make space for the arrow */
        }

        /* Overriding Bulma-like button style to use your .btn */
        .contact-form .btn {
          background: var(--primary);
          color: white;
          padding: 14px 30px;
          border-radius: var(--border-radius);
          font-weight: 600;
          transition: var(--transition);
          border: none;
          cursor: pointer;
          font-size: 1.1rem;
        }

        .contact-form .btn:hover {
          background: var(--secondary);
          transform: translateY(-3px);
          box-shadow: var(--shadow);
        }


        /* Responsividade para a página Contato */
        @media (max-width: 992px) {
          .hero-contact h1 {
            font-size: 2.8rem;
          }

          .contact-grid {
            grid-template-columns: 1fr;
            /* Uma coluna em telas menores */
          }

          .contact-info {
            flex-direction: row;
            /* Volta a ser linha */
            flex-wrap: wrap;
            /* Quebra em várias linhas se necessário */
            justify-content: center;
          }

          .info-card {
            flex-basis: 45%;
            /* Duas colunas em telas médias */
          }
        }

        @media (max-width: 768px) {
          .hero-contact h1 {
            font-size: 2.2rem;
          }

          .hero-contact {
            padding: 120px 0 80px;
          }

          .info-card {
            flex-basis: 100%;
            /* Uma coluna em telas pequenas */
          }
        }

        @media (max-width: 576px) {
          .hero-contact h1 {
            font-size: 1.8rem;
          }

          .hero-contact p {
            font-size: 1rem;
          }

          .contact-form {
            padding: 30px 20px;
          }
        }

        /* WhatsApp Button */
        .whatsapp-button {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: #25d366;
          /* Cor verde do WhatsApp */
          color: white;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          z-index: 1000;
          transition: transform 0.3s ease-in-out;
        }

        .whatsapp-button:hover {
          transform: scale(1.1);
        }