<footer class="main-footer width-limit">
  <section class="footer-links">
    <div class="footer-links-section">
      <p class="footer-links-section-title">
        Pipedrive
      </p>
      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/about">About</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/about">Über</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/about">Acerca de</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/about">À propos</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/about">Sobre</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/pricing">Pricing</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/pricing">Preise</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/pricing">Precios </a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/pricing">Tarifs</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/pricing">Preço</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/jobs">Jobs</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/en/jobs">Karriere</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/jobs">Trabajos</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/en/jobs">Carrières</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/jobs">Carreiras</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/blog">Blog</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/blog">Blog</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/blog">Blog</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/blog">Blog</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/blog">Blog</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/newsroom">Newsroom</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/newsroom">Newsroom</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/newsroom">Sala de noticias </a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/newsroom">Newsroom</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/newsroom">Newsroom</a>
    </div>
  
    <div class="footer-links-section">
      <p class="footer-links-section-title">
        <span class="lang-en">Product</span>
        <span class="lang-de">Produkt</span>
        <span class="lang-es">Producto</span>
        <span class="lang-fr">Produit</span>
        <span class="lang-br">Produto</span>
      </p>
      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/products/sales">Sales software</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/products/sales">Produkte</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/products/sales">Productos</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/products/sales">Produits</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/products/sales">Produtos</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/products">Features</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/products">Funktionen</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/products">Funciones</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/products">Fonctionnalités</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/products">Recursos</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/features/privacy-security">Privacy and security</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/features/privacy-security">Datenschutz und Sicherheit</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/features/privacy-security">Privacidad y seguridad</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/features/privacy-security">Confidentialité et sécurité</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/features/privacy-security">Privacidade e segurança</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/marketplace">Marketplace</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/en/marketplace">Integrationen</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/en/marketplace">Integraciones</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/en/marketplace">Intégrations</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/en/marketplace">Integrações</a>

      <a class="footer-links-section-item lang-en" href="https://status.pipedrive.com/">Status</a>
      <a class="footer-links-section-item lang-de" href="https://status.pipedrive.com/">Status</a>
      <a class="footer-links-section-item lang-es" href="https://status.pipedrive.com/">Estado</a>
      <a class="footer-links-section-item lang-fr" href="https://status.pipedrive.com/">État du système</a>
      <a class="footer-links-section-item lang-br" href="https://status.pipedrive.com/">Status</a>

      <a class="footer-links-section-item lang-en" href="https://developers.pipedrive.com/">API</a>
      <a class="footer-links-section-item lang-de" href="https://developers.pipedrive.com/">API</a>
      <a class="footer-links-section-item lang-es" href="https://developers.pipedrive.com/">API</a>
      <a class="footer-links-section-item lang-fr" href="https://developers.pipedrive.com/">API</a>
      <a class="footer-links-section-item lang-br" href="https://developers.pipedrive.com/">API</a>
    </div>
  
    <div class="footer-links-section">
      <p class="footer-links-section-title">
        <span class="lang-en">Discover</span>
        <span class="lang-de">Entdecken</span>
        <span class="lang-es">Descubre</span>
        <span class="lang-fr">Découvrez</span>
        <span class="lang-br">Descubra</span>
      </p>
      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/partner">Partner Program</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/partner">Partnerprogramm</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/partner">Programa para socios</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/partner">Partenaires</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/partner">Programa de parceria</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/blog/what-is-crm">What is CRM?</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/blog/was-ist-crm">Was bedeutet CRM?</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/blog/que-es-crm">¿Qué es CRM? </a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/resources/what-is-crm">Qu'est-ce qu'un CRM ?</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/blog/o-que-e-crm">O que é um CRM?</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/crm-comparison">CRM comparison</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/crm-comparison">CRM-Vergleich</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/crm-comparison">Comparación de CRM</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/crm-comparison">Comparatif des CRM</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/crm-comparison">Comparação de CRM</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/resources">Resources</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/resources">Ressourcen</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/resources">Recursos</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/resources">Ressources</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/resources">Ferramentas</a>
    </div>
  
    <div class="footer-links-section">
      <p class="footer-links-section-title">
        <span class="lang-en">Help Center</span>
        <span class="lang-de">Support Center</span>
        <span class="lang-es">Centro de ayuda</span>
        <span class="lang-fr">Centre d'assistance</span>
        <span class="lang-br">Central de Ajuda</span>
      </p>
      <a class="footer-links-section-item lang-en" href="https://community.pipedrive.com/">Community</a>
      <a class="footer-links-section-item lang-de" href="https://community.pipedrive.com/">Community</a>
      <a class="footer-links-section-item lang-es" href="https://community.pipedrive.com/">Comunidad</a>
      <a class="footer-links-section-item lang-fr" href="https://community.pipedrive.com/">Communauté</a>
      <a class="footer-links-section-item lang-br" href="https://community.pipedrive.com/">Comunidade</a>

      <a class="footer-links-section-item lang-en" href="https://support.pipedrive.com/en">Knowledge Base</a>
      <a class="footer-links-section-item lang-de" href="https://support.pipedrive.com/de">Knowledge Base</a>
      <a class="footer-links-section-item lang-es" href="https://support.pipedrive.com/es">Base de conocimiento</a>
      <a class="footer-links-section-item lang-fr" href="https://support.pipedrive.com/fr">Base de connaissance</a>
      <a class="footer-links-section-item lang-br" href="https://support.pipedrive.com/pt">Base de Conhecimento</a>

      <a class="footer-links-section-item lang-en" href="https://www.pipedrive.com/en/academy">Academy</a>
      <a class="footer-links-section-item lang-de" href="https://www.pipedrive.com/de/academy">Academy</a>
      <a class="footer-links-section-item lang-es" href="https://www.pipedrive.com/es/academy">Academia</a>
      <a class="footer-links-section-item lang-fr" href="https://www.pipedrive.com/fr/academy">Académie</a>
      <a class="footer-links-section-item lang-br" href="https://www.pipedrive.com/pt/academy">Academia</a>

      <a class="footer-links-section-item lang-en" href="https://support.pipedrive.com/en/contact-us">Support</a>
      <a class="footer-links-section-item lang-de" href="https://support.pipedrive.com/de/contact-us">Support</a>
      <a class="footer-links-section-item lang-es" href="https://support.pipedrive.com/es/contact-us">Asistencia</a>
      <a class="footer-links-section-item lang-fr" href="https://support.pipedrive.com/fr/contact-us">Assistance</a>
      <a class="footer-links-section-item lang-br" href="https://support.pipedrive.com/pt/contact-us">Suporte</a>
    </div>
  </section>
  
  <section class="footer-bottom">
    <div class="footer-bottom-row">
      <div class="footer-language-wrapper np-hidden-mobile">
        <div class="footer-language">
          <div class="footer-language-button">
            <i class="fal fa-globe"></i>
            <span class="lang-en">English</span>
            <span class="lang-de">Deutsch</span>
            <span class="lang-es">Español</span>
            <span class="lang-fr">Français</span>
            <span class="lang-br">Português (BR)</span>
          </div>
        </div>
        <div class="footer-language-dropdown">
          <div data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang'))">English</div>
          <div data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</div>
          <div data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang'))">Español</div>
          <div data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang'))">Français</div>
          <div data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang'))">Português (BR)</div>
        </div>
      </div>
      <div class="footer-bottom-social">
        {% if website_footer.show_social_media_links? %}
          <div class="footer-bottom-social-list">
            {% for social_media_link in website_footer.social_media_links %}
              <a
                  class="footer-bottom-social-item"
                  href="{{ social_media_link.link }}"
                  target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="fab fa-{{ social_media_link.name }}"></i>
              </a>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  
    <div class="footer-bottom-row body-s">
      <div class="footer-bottom-links">
        <p class="footer-bottom-link-text">
          © {{ "now" | date: "%Y" }} Pipedrive
        </p>
        <p class="footer-button-link-separator">
          |
        </p>
        <a class="footer-bottom-link" href="https://www.pipedrive.com/en/terms-of-service">
          <span class="lang-en">Terms of service</span>
          <span class="lang-de">Allgemeine Geschäftsbedingungen</span>
          <span class="lang-es">Términos del servicio</span>
          <span class="lang-fr">Conditions d'utilisation</span>
          <span class="lang-br">Termos de serviço</span>
        </a>
        <p class="footer-button-link-separator">
          |
        </p>
        <a class="footer-bottom-link" href="https://www.pipedrive.com/en/privacy">
          <span class="lang-en">Privacy Policy</span>
          <span class="lang-de">Datenschutzrichtlinie</span>
          <span class="lang-es">Política de privacidad</span>
          <span class="lang-fr">Politique de confidentialité</span>
          <span class="lang-br">Política de privacidade</span>
        </a>
      </div>
      
      <div class="footer-bottom-text">
        <span class="lang-en">Pipedrive is a Web-based Sales CRM.</span>
        <span class="lang-de">Pipedrive ist ein webbasiertes Vertriebs-CRM.</span>
        <span class="lang-es">Pipedrive es un CRM de ventas basado en la web.</span>
        <span class="lang-fr">Pipedrive est un CRM commercial basé sur le Web.</span>
        <span class="lang-br">O Pipedrive é um CRM de vendas baseado na Web.</span>
      </div>
    </div>
  </section>
</footer>

<style>
  .main-footer {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .footer-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .footer-links-section {
    margin-bottom: 40px;
    width:100%;
  }
  .footer-links-section-title {
    font-weight: 700;
  }
  .footer-links-section-item {
    margin-bottom: 10px;
    display: block;
    position: relative;
    width: fit-content;
  }
  .footer-links-section-item:after {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    bottom: 1px;
    background: #017737;
    height: 2px;
    opacity:0;
    transition:width 0.3s ease-out, opacity 0.3s ease-out;
  }
  .footer-links-section-item:hover:after,
  .footer-links-section-item:focus:after,
  .footer-links-section-item:active:after {
    left: 0;
    right: auto;
    width: 100%;
    opacity:1;
  }
  .footer-language-wrapper {
    position: relative;
    cursor: pointer;
  }
  .footer-language-dropdown {
    position: absolute;
    display: none;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, .08), 0px 0px 4px rgba(0,0,0,.12);
    bottom: 35px;
    left: 10%;
    background: #FFF;
    padding: 10px 0;
  }
  .footer-language-dropdown.show {
    display: block;
  }
  .footer-language-dropdown > div {
    padding: 5px 10px;
    white-space: nowrap;
  }
  .footer-language-dropdown > div:hover {
    text-decoration: underline;
    background-color: #e4e6e9;
  }
  .footer-language-dropdown .current-lang {
    background-color: #edeef0;
  }
  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
  }
  .footer-bottom-social-list {
    gap: 20px;
    display: flex;
    justify-content: start;
    margin-bottom: 20px;
  }
  .footer-bottom-links > * {
    white-space: nowrap;
    margin: 0;
    line-height: 25px;
  }
  .footer-button-link-separator {
    padding: 0 6px;
  }
  .footer-links-section-title {
    margin-bottom: 10px;
  }
  .footer-bottom-link, .footer-bottom-social-item, .footer-bottom-text, .footer-button-link-separator {
    color: #656E7A;
  }
  .footer-bottom-social-item {
    font-size: 24px;
  }

  @media only screen and (min-width: 768px) {
    .main-footer {
      padding-top: 80px;
    }
    .footer-links {
      display: flex;
      justify-content: space-between;
    }
    .footer-links-section {
      width:50%;
    }
    .footer-bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-bottom-row:first-child {
      margin-bottom: 15px;
    }
    .footer-bottom-links, .footer-bottom-social-list {
      margin-bottom: 0;
    }
  }

  @media (min-width:1200px) {
    .footer-links-section {
      width: calc(25% - 40px);
      margin-right: 40px;
    }
  }
</style>

<script>
  document.querySelector(".footer-language-wrapper").addEventListener('click', () => {
    document.querySelector('.footer-language-dropdown').classList.toggle('show');
  });
</script>
