/* Root variables from catuaba.html */
      :root {
          --primary: #e53e3e;
          --primary-dark: #c53030;
          --accent: #ed8936;
          --text: #2d3748;
          --text-light: #718096;
          --background: #fff5f5;
      }

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

      body {
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
          color: var(--text);
          line-height: 1.6;
          background: var(--background);
      }

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

      /* Header styles from catuaba.html */
      .header {
          background: white;
          padding: 0;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          position: sticky;
          top: 0;
          z-index: 1000;
      }

      .header-top {
          background: var(--primary-dark);
          padding: 8px 0;
          color: white;
          font-size: 0.9rem;
      }

      .header-top .container {
          display: flex;
          justify-content: flex-end;
          gap: 20px;
      }

      .header-top a {
          color: white;
          text-decoration: none;
          transition: opacity 0.3s;
      }

      .header-top a:hover {
          opacity: 0.8;
      }

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

      .logo {
          color: var(--primary);
          text-decoration: none;
          font-size: 2rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      /* Enhanced Contact Content Styles */
      .contact-hero {
          background: linear-gradient(135deg, #fff5f5 0%, #fffaf0 100%);
          padding: 80px 0;
          text-align: center;
          position: relative;
          overflow: hidden;
      }

      .contact-hero::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url("/assets/images/contato-image.jpg") center/cover;
          opacity: 0.1;
          z-index: 0;
      }

      .contact-hero-content {
          position: relative;
          z-index: 1;
      }

      .contact-hero h1 {
          color: var(--primary);
          font-size: 3rem;
          margin-bottom: 20px;
      }

      .contact-hero p {
          color: var(--text-light);
          max-width: 600px;
          margin: 0 auto;
          font-size: 1.2rem;
      }

      .contact-grid {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 60px;
          margin-bottom: 60px;
      }

      .contact-info {
          background: white;
          padding: 40px;
          border-radius: 15px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          max-width: 600px;
          width: 100%;
          text-align: center;
      }

      .contact-method {
          margin-bottom: 30px;
          position: relative;
          padding: 0 20px;
      }

      .contact-method::before {
          position: relative;
          display: block;
          margin-bottom: 10px;
          font-size: 2rem;
      }

      .contact-method.email::before {
          content: "📧";
      }

      .contact-method.phone::before {
          content: "📞";
      }

      .contact-method.address::before {
          content: "📍";
      }

      .contact-method.hours::before {
          content: "🕒";
      }

      .contact-method h3 {
          color: var(--primary);
          margin-bottom: 8px;
          font-size: 1.2rem;
      }

      .contact-method p {
          color: var(--text-light);
      }


      .social-links {
          display: flex;
          gap: 20px;
          justify-content: center;
          margin-top: 30px;
      }

      .social-link {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: var(--background);
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: var(--primary);
          font-size: 1.2rem;
          transition: all 0.3s;
      }

      .social-link:hover {
          background: var(--primary);
          color: white;
          transform: translateY(-3px);
      }

      /* Success Message Animation */
      @keyframes slideIn {
          from {
              transform: translateY(-100%);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      .success-message {
          display: none;
          position: fixed;
          top: 20px;
          right: 20px;
          background: #48bb78;
          color: white;
          padding: 15px 25px;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          animation: slideIn 0.5s ease-out;
          z-index: 1000;
      }

      .footer {
          background: #1a202c;
          color: white;
          padding: 60px 0 0;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: 40px;
          margin-bottom: 40px;
      }

      .footer-section h3 {
          color: white;
          margin-bottom: 20px;
          font-size: 1.2rem;
          position: relative;
          padding-bottom: 10px;
      }

      .footer-section h3::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 40px;
          height: 2px;
          background: var(--accent);
      }

      .footer-links {
          list-style: none;
      }

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

      .footer-links a {
          color: var(--text-light);
          text-decoration: none;
          transition: color 0.3s;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .footer-links a:hover {
          color: white;
      }

      .copyright {
          text-align: center;
          padding: 20px;
          background: #151a23;
          color: var(--text-light);
          margin-top: 40px;
      }

      @media (max-width: 768px) {
          .contact-info {
              padding: 20px;
          }

          .contact-hero h1 {
              font-size: 2rem;
          }
      }