:root {
      --azul-escuro: #0e2a44;
      --verde-limao: #a1e44d;
      --laranja: #fca311;
      --fundo-claro: #ffffff;
    }

    body {
        background: var(--fundo-claro) !important;
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: var(--fundo-claro);
      color: var(--azul-escuro);
    }

    header {
      background: var(--fundo-claro) !important;
      
      color: var(--fundo-claro);
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .conteudo-header {
        background-image: url('imagens/logo_texto.png');
        background-repeat: no-repeat;
        background-position: right center; /* Alinha à direita verticalmente centralizado */
        background-size: 350px; /* ou 'cover', dependendo do efeito desejado */
        width: 100%;
        padding: 20px;
        border-radius: 10px;
    }
    @media (max-width: 768px) {
        .conteudo-header {
            background-size: 120px;
        }
        header img {
            width: 120px;
        }
        .conteudo-header h1 {
          font-family: 'Comic Sans MS', cursive;
          font-size: .8rem;
        }
        .conteudo-header h6 {
          font-family: 'Comic Sans MS', cursive;
          font-size: .4rem;
        }
    }
    header h1 {
      font-family: 'Comic Sans MS', cursive;
      font-size: 2rem;
    }

    nav {
        background-color: var(--azul-escuro);
        padding: 10px ;
    }
    nav a {
      
      color: var(--verde-limao);
      margin-left: 1.5rem;
      text-decoration: none;
      font-weight:600;
    }

    .hero {
      padding: 4rem 2rem;
      text-align: center;
      background: linear-gradient(120deg, var(--verde-limao), var(--laranja));
      color: var(--azul-escuro);
    }

    .hero h2 {
      font-size: 2.5rem;
    }

    .hero p {
      font-size: 1.2rem;
      margin-top: 1rem;
    }

    .section {
      padding: 3rem 2rem;
      max-width: 960px;
      margin: 0 auto;
    }

    .cards {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .card {
      background: #f1f1f1;
      padding: 1.5rem;
      border-left: 5px solid var(--azul-escuro);
      flex: 1 1 280px;
      border-radius: 8px;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    footer {
      background: var(--azul-escuro);
      color: white;
      text-align: center;
      padding: 2rem 1rem;
      margin-top: 2rem;
    }

    .telegram-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background-color: #0088cc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      z-index: 999;
      transition: transform 0.3s ease;
    }

    .telegram-float:hover {
      transform: scale(1.1);
    }

    .linkedin-float {
      position: fixed;
      bottom: 100px;
      right: 20px; /* ajusta ao lado do botão do Telegram */
      width: 60px;
      height: 60px;
      background-color: #0077b5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      z-index: 999;
      transition: transform 0.3s ease;
    }

    .linkedin-float:hover {
      transform: scale(1.1);
    }

    .btn-fale-conosco {
      background: var(--verde-limao) !important;
      border: var(--verde-limao) !important;
      color: var(--azul-escuro) !important;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: bold;
    }
    .btn-fale-conosco:hover {
      background: var(--laranja) !important;
    }