en to unknown language translation catalogue (10 entries)

en: <div class="shape-container" style="display: flex;">
      <div class="container-circle-inner">
        <div class="outer-circle-text"> 
            <div class="inner-circle-text"> 
                <h6>OTiGEN SYSTEM</h6>
                <p lang="it">La prima soluzione integrata studiata per gil specialisti della rigenerazione ossea<br/ >in odontolatria.</p>
            </div>
            <div class="plus-icon" id="plus1"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus2"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus3"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus4"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus5"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus6"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
        </div>
        <img src="/wp-content/uploads/2025/01/otigen-system.png" usemap="#image-map">
        <map name="image-map">
          <area alt="Re-bone" title="a1" href="#1" coords="15,76,33,45,63,20,93,6,116,0,141,33,125,72,102,81,79,104,54,73" shape="poly" onmouseover="handleHover(1)" onmouseout="handleMouseOut(1)">
          <area alt="Shelter" title="a2" href="#2" coords="127,0,165,3,198,17,223,32,242,53,227,90,184,94,164,76,133,70,149,33" shape="poly" onmouseover="handleHover(2)" onmouseout="handleMouseOut(2)">
          <area alt="Gfone Plus" title="a3" href="#3" coords="190,100,230,98,247,59,261,84,268,115,269,150,260,185,218,191,196,158,200,127" shape="poly" onmouseover="handleHover(3)" onmouseout="handleMouseOut(3)">
          <area alt="Actigen" title="a4" href="#4" coords="193,166,214,198,257,194,240,222,215,246,185,260,154,266,129,234,146,198,174,188" shape="poly" onmouseover="handleHover(4)" onmouseout="handleMouseOut(4)">
          <area alt="Acti-bone" title="a5" href="#5" coords="139,200,120,235,146,268,108,266,73,254,46,235,30,216,46,177,86,177,107,194" shape="poly" onmouseover="handleHover(5)" onmouseout="handleMouseOut(5)">
          <area alt="Safe-bone" title="a6" href="#6" coords="11,84,52,80,74,113,71,142,82,170,42,172,24,210,7,177,0,139,3,108" shape="poly" onmouseover="handleHover(6)" onmouseout="handleMouseOut(6)">
        </map>
      </div>
      <div id="hover-content-outer">
          <div id="hover-content">
            <div id="content-a1" class="content-placeholder">
                <h6>Re-bone<span>®</span></h6>
                <p lang="it">Sostituto Osseo Bovino</p>
                <img src="/wp-content/uploads/2025/01/Recurso_16-removebg-preview.png" alt="Re-bone">
                <a lang="it" href="/soluzioni/re-bone/" target="_blank">Scopri di Più</a>
            </div>
            <div id="content-a2" class="content-placeholder">
                <h6>Shelter<span>®</span></h6>
                <p lang="it">Membrana in Pericardio Bovino</p>
                <img src="/wp-content/uploads/2024/12/Recurso-17.png" alt="Shelter">
                <a lang="it" href="/soluzioni/shelter/" target="_blank">Scopri di Più</a>
            </div>
            <div id="content-a3" class="content-placeholder">
                <h6>Gfone<span>®</span>PLUS APG<span>®</span></h6>
                <p lang="it">Separatore di fasi ematiche</p>
                <img src="/wp-content/uploads/2024/12/Recurso-19.png" alt="Gfone Plus">
                <a lang="it" href="/soluzioni/gfone-plus/" target="_blank">Scopri di Più</a>
            </div>
            <div id="content-a4" class="content-placeholder">
                <h6>Actigen<span>®</span></h6>
                <p lang="it">Trattamento di superficie implantare</p>
                <img src="/wp-content/uploads/2024/12/Recurso-21.png" alt="Actigen">
                <a lang="it" href="/soluzioni/actigen/" target="_blank">Scopri di Più</a>
            </div>
            <div id="content-a5" class="content-placeholder">
                <h6>Acti-bone<span>®</span></h6>
                <p lang="it">Acido ialuronico</p>
                <img src="/wp-content/uploads/2024/12/Recurso-18.png" alt="Acti-bone">
                <a lang="it" href="/soluzioni/acti-bone/" target="_blank">Scopri di Più</a>
            </div>
            <div id="content-a6" class="content-placeholder">
                <h6>Safe-bone<span>®</span></h6>
                <p lang="it">Mesh in titanio</p>
                <img src="/wp-content/uploads/2024/12/Recurso-20.png" alt="Safe-bone">
                <a lang="it" href="/soluzioni/safe-bone/" target="_blank">Scopri di Più</a>
            </div>
          </div>
        </div>
    </div>
    
    <style>
      .shape-container {
        display: flex;
        align-items: flex-start;
      }
      .container-circle-inner {
          flex: 1;
          position: relative;
          padding-left: 0.5rem;
          display: flex;
          justify-content: center;
          margin-top: 1rem;
      }
      .container-circle-inner img {
          position: relative;
          z-index: 1;
      }
      .outer-circle-inner {
          z-index: 1;
      }
      .outer-circle-text {
          position: absolute;
          width: 100%;
          max-width: 270px;
          height: 100%;
          max-height: 270px;
      }
      .inner-circle-text {
          position: relative;
          max-width: 100px;
          max-height: 100px;
          top: 49%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
      }
      .inner-circle-text h6 {
          font-size: 0.9rem;
          line-height: 0.9rem;
          font-weight: 600;
      }
      .inner-circle-text p {
          font-size: 0.6rem;
          line-height: 0.6rem;
      }
      .plus-icon {
          position: absolute;
          background: #242F62;
          border-radius: 50%;
          padding: 0px 1px 1px 1px;
          z-index: 2;
          width: 24px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-content: center;
      }
      #plus1 {
          background: #E95296;
          top: 2.5%;
          left: 21%;
      }
      #plus2 {
          top: 2.5%;
          right: 21%;
      }
      #plus3 {
          top: 46%;
          right: -3.5%;
      }
      #plus4 {
          bottom: 2.5%;
          right: 21%;
      }
      #plus5 {
          bottom: 2.5%;
          left: 21%;
      }
      #plus6 {
          top: 46%;
          left: -3.5%;
      }
      #hover-content-outer {
        flex: 1;
      }
      #hover-content {
        border-left: 1px solid #ccc;
        background: #fafafa;
        border-radius: 8px;
        padding: 1.5rem 1.5rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        max-width: 80%;
        margin: 0 auto;
      }
      #hover-content::before {
        content: '';
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translateX(-75%) rotate(90deg);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 0;
      }
      .content-placeholder {
        display: none;
      }
      .content-placeholder:first-of-type {
        display: block;
      }
      .content-placeholder h6 {
        text-transform: uppercase;
        font-size: 1.4rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
      .content-placeholder h6 span {
        position: relative;
        top: -0.5rem;
        font-size: 0.75rem;
      }
      .content-placeholder p span {
        position: relative;
        top: -0.4rem;
        font-size: 0.5rem;
      }
      .content-placeholder p {
        font-size: var(--bs-body-font-size);
        margin: 0;
        color: #555;
        text-align: left;
      }
      .content-placeholder img {
        display: block;
        margin: 1rem auto;
        max-width: 9rem;
      }
      .content-placeholder a {
        display: block;
        background-color: #E95296;
        font-size: var(--bs-body-font-size);
        border-style: solid;
        border-color: var( --e-global-color-primary );
        border-radius: 28px 28px 28px 28px;
        color: #fff;
        width: fit-content;
        padding: 0 0.7rem 0.1rem;
        margin: 0 auto;
      }
      .content-placeholder a:hover {
        background-color: #F5F5F5;
        color: var( --e-global-color-primary );
        border-color: #E95296;
      }
      @media(max-width:767px) {
        .shape-container {
          display: flex;
          flex-direction: column;
        }
        .container-circle-inner {
          padding-left: 0;
          margin: 0 auto 2rem;
        }
        #hover-content {
          margin: 0 auto;
        }
        #hover-content::before {
          top: -3.3%;
          left: 50%;
          transform: translateX(-50%) rotate(180deg);
        }
        #hover-content-outer {
          width: 100%;
        }
      }
      @media(max-width:450px) {
          #hover-content {
            max-width: 100%;
          }
      }
    </style>
    
    <script>
        const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
        const contentsPlaceholder = document.querySelectorAll('.content-placeholder');
        const activePlus = document.querySelectorAll('.plus-icon');
        
        // Cambiar color de "+" y mostrar el bloque derecho que corresponda
        function handleHover(id) {
            contentsPlaceholder.forEach(contentPlaceholder => {
                if (contentPlaceholder.id === 'content-a'+id ) {
                    contentPlaceholder.style.display = 'block';
                } else {
                    contentPlaceholder.style.display = 'none';
                }
            });
            
            activePlus.forEach(plus => {
                if (plus.id === 'plus'+id ) {
                    plus.style.background = '#E95296';
                } else {
                    plus.style.background = '#242F62';
                }
            });
        }
    
        function handleMouseOut(id) {
        }
    </script>
target: <div class="shape-container" style="display: flex;">
      <div class="container-circle-inner">
        <div class="outer-circle-text"> 
            <div class="inner-circle-text"> 
                <h6>OTiGEN SYSTEM</h6>
                <p lang="it">The first integrated solution designed for gil bone regeneration specialists<br>in odontolatry.</p>
            </div>
            <div class="plus-icon" id="plus1"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus2"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus3"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus4"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus5"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus6"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
        </div>
        <img src="/wp-content/uploads/2025/01/otigen-system.png" usemap="#image-map">
        <map name="image-map">
          <area alt="Re-bone" title="a1" href="#1" coords="15,76,33,45,63,20,93,6,116,0,141,33,125,72,102,81,79,104,54,73" shape="poly" onmouseover="handleHover(1)" onmouseout="handleMouseOut(1)">
          <area alt="Shelter" title="a2" href="#2" coords="127,0,165,3,198,17,223,32,242,53,227,90,184,94,164,76,133,70,149,33" shape="poly" onmouseover="handleHover(2)" onmouseout="handleMouseOut(2)">
          <area alt="Gfone Plus" title="a3" href="#3" coords="190,100,230,98,247,59,261,84,268,115,269,150,260,185,218,191,196,158,200,127" shape="poly" onmouseover="handleHover(3)" onmouseout="handleMouseOut(3)">
          <area alt="Actigen" title="a4" href="#4" coords="193,166,214,198,257,194,240,222,215,246,185,260,154,266,129,234,146,198,174,188" shape="poly" onmouseover="handleHover(4)" onmouseout="handleMouseOut(4)">
          <area alt="Acti-bone" title="a5" href="#5" coords="139,200,120,235,146,268,108,266,73,254,46,235,30,216,46,177,86,177,107,194" shape="poly" onmouseover="handleHover(5)" onmouseout="handleMouseOut(5)">
          <area alt="Safe-bone" title="a6" href="#6" coords="11,84,52,80,74,113,71,142,82,170,42,172,24,210,7,177,0,139,3,108" shape="poly" onmouseover="handleHover(6)" onmouseout="handleMouseOut(6)">
        </map>
      </div>
      <div id="hover-content-outer">
          <div id="hover-content">
            <div id="content-a1" class="content-placeholder">
                <h6>Re-bone<span>®</span></h6>
                <p lang="it">Bone Substitute Bovine</p>
                <img src="/wp-content/uploads/2025/01/Recurso_16-removebg-preview.png" alt="Re-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/re-bone/" target="_blank">Learn More</a>
            </div>
            <div id="content-a2" class="content-placeholder">
                <h6>Shelter<span>®</span></h6>
                <p lang="it">Bovine Pericardium Membrane</p>
                <img src="/wp-content/uploads/2024/12/Recurso-17.png" alt="Shelter">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/shelter/" target="_blank">Learn More</a>
            </div>
            <div id="content-a3" class="content-placeholder">
                <h6>Gfone<span>®</span>PLUS APG<span>®</span></h6>
                <p lang="it">Blood phase separator</p>
                <img src="/wp-content/uploads/2024/12/Recurso-19.png" alt="Gfone Plus">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/gfone-plus/" target="_blank">Learn More</a>
            </div>
            <div id="content-a4" class="content-placeholder">
                <h6>Actigen<span>®</span></h6>
                <p lang="it">Implant surface treatment</p>
                <img src="/wp-content/uploads/2024/12/Recurso-21.png" alt="Actigen">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/actigen/" target="_blank">Learn More</a>
            </div>
            <div id="content-a5" class="content-placeholder">
                <h6>Acti-bone<span>®</span></h6>
                <p lang="it">Hyaluronic acid</p>
                <img src="/wp-content/uploads/2024/12/Recurso-18.png" alt="Acti-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/acti-bone/" target="_blank">Learn More</a>
            </div>
            <div id="content-a6" class="content-placeholder">
                <h6>Safe-bone<span>®</span></h6>
                <p lang="it">Mesh in titanio</p>
                <img src="/wp-content/uploads/2024/12/Recurso-20.png" alt="Safe-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/safe-bone/" target="_blank">Learn More</a>
            </div>
          </div>
        </div>
    </div>
    
    <style>
      .shape-container {
        display: flex;
        align-items: flex-start;
      }
      .container-circle-inner {
          flex: 1;
          position: relative;
          padding-left: 0.5rem;
          display: flex;
          justify-content: center;
          margin-top: 1rem;
      }
      .container-circle-inner img {
          position: relative;
          z-index: 1;
      }
      .outer-circle-inner {
          z-index: 1;
      }
      .outer-circle-text {
          position: absolute;
          width: 100%;
          max-width: 270px;
          height: 100%;
          max-height: 270px;
      }
      .inner-circle-text {
          position: relative;
          max-width: 100px;
          max-height: 100px;
          top: 49%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
      }
      .inner-circle-text h6 {
          font-size: 0.9rem;
          line-height: 0.9rem;
          font-weight: 600;
      }
      .inner-circle-text p {
          font-size: 0.6rem;
          line-height: 0.6rem;
      }
      .plus-icon {
          position: absolute;
          background: #242F62;
          border-radius: 50%;
          padding: 0px 1px 1px 1px;
          z-index: 2;
          width: 24px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-content: center;
      }
      #plus1 {
          background: #E95296;
          top: 2.5%;
          left: 21%;
      }
      #plus2 {
          top: 2.5%;
          right: 21%;
      }
      #plus3 {
          top: 46%;
          right: -3.5%;
      }
      #plus4 {
          bottom: 2.5%;
          right: 21%;
      }
      #plus5 {
          bottom: 2.5%;
          left: 21%;
      }
      #plus6 {
          top: 46%;
          left: -3.5%;
      }
      #hover-content-outer {
        flex: 1;
      }
      #hover-content {
        border-left: 1px solid #ccc;
        background: #fafafa;
        border-radius: 8px;
        padding: 1.5rem 1.5rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        max-width: 80%;
        margin: 0 auto;
      }
      #hover-content::before {
        content: '';
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translateX(-75%) rotate(90deg);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 0;
      }
      .content-placeholder {
        display: none;
      }
      .content-placeholder:first-of-type {
        display: block;
      }
      .content-placeholder h6 {
        text-transform: uppercase;
        font-size: 1.4rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
      .content-placeholder h6 span {
        position: relative;
        top: -0.5rem;
        font-size: 0.75rem;
      }
      .content-placeholder p span {
        position: relative;
        top: -0.4rem;
        font-size: 0.5rem;
      }
      .content-placeholder p {
        font-size: var(--bs-body-font-size);
        margin: 0;
        color: #555;
        text-align: left;
      }
      .content-placeholder img {
        display: block;
        margin: 1rem auto;
        max-width: 9rem;
      }
      .content-placeholder a {
        display: block;
        background-color: #E95296;
        font-size: var(--bs-body-font-size);
        border-style: solid;
        border-color: var( --e-global-color-primary );
        border-radius: 28px 28px 28px 28px;
        color: #fff;
        width: fit-content;
        padding: 0 0.7rem 0.1rem;
        margin: 0 auto;
      }
      .content-placeholder a:hover {
        background-color: #F5F5F5;
        color: var( --e-global-color-primary );
        border-color: #E95296;
      }
      @media(max-width:767px) {
        .shape-container {
          display: flex;
          flex-direction: column;
        }
        .container-circle-inner {
          padding-left: 0;
          margin: 0 auto 2rem;
        }
        #hover-content {
          margin: 0 auto;
        }
        #hover-content::before {
          top: -3.3%;
          left: 50%;
          transform: translateX(-50%) rotate(180deg);
        }
        #hover-content-outer {
          width: 100%;
        }
      }
      @media(max-width:450px) {
          #hover-content {
            max-width: 100%;
          }
      }
    </style>
    
    <script>
        const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
        const contentsPlaceholder = document.querySelectorAll('.content-placeholder');
        const activePlus = document.querySelectorAll('.plus-icon');
        
        // Cambiar color de "+" y mostrar el bloque derecho que corresponda
        function handleHover(id) {
            contentsPlaceholder.forEach(contentPlaceholder => {
                if (contentPlaceholder.id === 'content-a'+id ) {
                    contentPlaceholder.style.display = 'block';
                } else {
                    contentPlaceholder.style.display = 'none';
                }
            });
            
            activePlus.forEach(plus => {
                if (plus.id === 'plus'+id ) {
                    plus.style.background = '#E95296';
                } else {
                    plus.style.background = '#242F62';
                }
            });
        }
    
        function handleMouseOut(id) {
        }
    </script>

en: <h1><span style="color: #e95296;">La Camera Bianca</span></h1><p>La camera bianca certificata ISO 7 rappresenta l’apice dell’eccellenza produttiva. Ogni biomateriale è trattato nel rispetto degli standard di qualità più rigorosi. Dalla selezione delle materie prime al packaging finale, ogni fase del processo è sottoposta a controlli meticolosi, garantendo sicurezza, affidabilità e performance superiori. È qui che precisione e qualità si trasformano in soluzioni cliniche di altissimo livello.</p>
target: <h1><span style="color: #e95296;">The Clean Room</span></h1><p>The ISO 7 certified clean room represents the pinnacle of manufacturing excellence. Every biomaterial is processed to the strictest quality standards. From raw material selection to final packaging, every step in the process is meticulously controlled, ensuring safety, reliability and superior performance. This is where precision and quality are transformed into clinical solutions of the highest standard.   </p>

en: <h1><span style="color: #e95296;">Ricerca &amp; Sviluppo</span></h1><p>I laboratori UBGEN® sono il cuore pulsante della ricerca e sviluppo, dove innovazione e scienza convergono per ridefinire la chirurgia ossea rigenerativa.<br />Team di esperti sviluppano soluzioni pionieristiche che lavorano sinergicamente all’interno di OTiGEN SYSTEM, il sistema integrato di prodotti e servizi che risponde alle esigenze cliniche<br />odontoiatriche.<br />La competenza si traduce in soluzioni pratiche, rendendo ogni intervento più efficace e meno invasivo.</p>
target: <h1><span style="color: #e95296;">Research &amp; Development</span></h1><p>The UBGEN® laboratories are the beating heart of research and development, where innovation and science converge to redefine regenerative bone surgery.<br>Teams of experts develop pioneering solutions that work synergistically within the OTiGEN SYSTEM, the integrated system of products and services that meets the clinical needs<br>dentistry.<br>Expertise translates into practical solutions, making each intervention more effective and less invasive.</p>

en: <p><span class="lighter-text">L’IMPEGNO CHE</span></p>
target: <p><span class="lighter-text">THE COMMITMENT THAT</span></p>

en: <p><strong>PLASMA IL <span style="color: #e95296;">FUTURO</span></strong><br /><strong>DELL’ODONTOIATRIA</strong><br /><strong>RIGENERATIVA</strong></p>
target: <p><strong>SHAPES THE <span style="color: #e95296;">FUTURE</span></strong><br><strong>OF DENTISTRY</strong><br><strong>REGENERATIVE</strong></p>

en: editor-text-editor-73756ab
target: <h1><span style="color: #e95296;">Research &amp; Development</span></h1><p>The UBGEN® laboratories are the beating heart of research and development, where innovation and science converge to redefine regenerative bone surgery.<br>Teams of experts develop pioneering solutions that work synergistically within the OTiGEN SYSTEM, the integrated system of products and services that meets the clinical needs<br>dentistry.<br>Expertise translates into practical solutions, making each intervention more effective and less invasive.</p>

en: editor-text-editor-a6c0129
target: <p><strong>SHAPES THE <span style="color: #e95296;">FUTURE</span></strong><br><strong>OF DENTISTRY</strong><br><strong>REGENERATIVE</strong></p>

en: editor-text-editor-ac76d41
target: <h1><span style="color: #e95296;">The Clean Room</span></h1><p>The ISO 7 certified clean room represents the pinnacle of manufacturing excellence. Every biomaterial is processed to the strictest quality standards. From raw material selection to final packaging, every step in the process is meticulously controlled, ensuring safety, reliability and superior performance. This is where precision and quality are transformed into clinical solutions of the highest standard.   </p>

en: editor-text-editor-c8dd1cf
target: <p><span class="lighter-text">THE COMMITMENT THAT</span></p>

en: html-html-51489e0
target: <div class="shape-container" style="display: flex;">
      <div class="container-circle-inner">
        <div class="outer-circle-text"> 
            <div class="inner-circle-text"> 
                <h6>OTiGEN SYSTEM</h6>
                <p lang="it">The first integrated solution designed for gil bone regeneration specialists<br>in odontolatry.</p>
            </div>
            <div class="plus-icon" id="plus1"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus2"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus3"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus4"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus5"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
            <div class="plus-icon" id="plus6"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></div>
        </div>
        <img src="/wp-content/uploads/2025/01/otigen-system.png" usemap="#image-map">
        <map name="image-map">
          <area alt="Re-bone" title="a1" href="#1" coords="15,76,33,45,63,20,93,6,116,0,141,33,125,72,102,81,79,104,54,73" shape="poly" onmouseover="handleHover(1)" onmouseout="handleMouseOut(1)">
          <area alt="Shelter" title="a2" href="#2" coords="127,0,165,3,198,17,223,32,242,53,227,90,184,94,164,76,133,70,149,33" shape="poly" onmouseover="handleHover(2)" onmouseout="handleMouseOut(2)">
          <area alt="Gfone Plus" title="a3" href="#3" coords="190,100,230,98,247,59,261,84,268,115,269,150,260,185,218,191,196,158,200,127" shape="poly" onmouseover="handleHover(3)" onmouseout="handleMouseOut(3)">
          <area alt="Actigen" title="a4" href="#4" coords="193,166,214,198,257,194,240,222,215,246,185,260,154,266,129,234,146,198,174,188" shape="poly" onmouseover="handleHover(4)" onmouseout="handleMouseOut(4)">
          <area alt="Acti-bone" title="a5" href="#5" coords="139,200,120,235,146,268,108,266,73,254,46,235,30,216,46,177,86,177,107,194" shape="poly" onmouseover="handleHover(5)" onmouseout="handleMouseOut(5)">
          <area alt="Safe-bone" title="a6" href="#6" coords="11,84,52,80,74,113,71,142,82,170,42,172,24,210,7,177,0,139,3,108" shape="poly" onmouseover="handleHover(6)" onmouseout="handleMouseOut(6)">
        </map>
      </div>
      <div id="hover-content-outer">
          <div id="hover-content">
            <div id="content-a1" class="content-placeholder">
                <h6>Re-bone<span>®</span></h6>
                <p lang="it">Bone Substitute Bovine</p>
                <img src="/wp-content/uploads/2025/01/Recurso_16-removebg-preview.png" alt="Re-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/re-bone/" target="_blank">Learn More</a>
            </div>
            <div id="content-a2" class="content-placeholder">
                <h6>Shelter<span>®</span></h6>
                <p lang="it">Bovine Pericardium Membrane</p>
                <img src="/wp-content/uploads/2024/12/Recurso-17.png" alt="Shelter">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/shelter/" target="_blank">Learn More</a>
            </div>
            <div id="content-a3" class="content-placeholder">
                <h6>Gfone<span>®</span>PLUS APG<span>®</span></h6>
                <p lang="it">Blood phase separator</p>
                <img src="/wp-content/uploads/2024/12/Recurso-19.png" alt="Gfone Plus">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/gfone-plus/" target="_blank">Learn More</a>
            </div>
            <div id="content-a4" class="content-placeholder">
                <h6>Actigen<span>®</span></h6>
                <p lang="it">Implant surface treatment</p>
                <img src="/wp-content/uploads/2024/12/Recurso-21.png" alt="Actigen">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/actigen/" target="_blank">Learn More</a>
            </div>
            <div id="content-a5" class="content-placeholder">
                <h6>Acti-bone<span>®</span></h6>
                <p lang="it">Hyaluronic acid</p>
                <img src="/wp-content/uploads/2024/12/Recurso-18.png" alt="Acti-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/acti-bone/" target="_blank">Learn More</a>
            </div>
            <div id="content-a6" class="content-placeholder">
                <h6>Safe-bone<span>®</span></h6>
                <p lang="it">Mesh in titanio</p>
                <img src="/wp-content/uploads/2024/12/Recurso-20.png" alt="Safe-bone">
                <a lang="it" href="https://test.ubgen.com/en/soluzioni/safe-bone/" target="_blank">Learn More</a>
            </div>
          </div>
        </div>
    </div>
    
    <style>
      .shape-container {
        display: flex;
        align-items: flex-start;
      }
      .container-circle-inner {
          flex: 1;
          position: relative;
          padding-left: 0.5rem;
          display: flex;
          justify-content: center;
          margin-top: 1rem;
      }
      .container-circle-inner img {
          position: relative;
          z-index: 1;
      }
      .outer-circle-inner {
          z-index: 1;
      }
      .outer-circle-text {
          position: absolute;
          width: 100%;
          max-width: 270px;
          height: 100%;
          max-height: 270px;
      }
      .inner-circle-text {
          position: relative;
          max-width: 100px;
          max-height: 100px;
          top: 49%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
      }
      .inner-circle-text h6 {
          font-size: 0.9rem;
          line-height: 0.9rem;
          font-weight: 600;
      }
      .inner-circle-text p {
          font-size: 0.6rem;
          line-height: 0.6rem;
      }
      .plus-icon {
          position: absolute;
          background: #242F62;
          border-radius: 50%;
          padding: 0px 1px 1px 1px;
          z-index: 2;
          width: 24px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-content: center;
      }
      #plus1 {
          background: #E95296;
          top: 2.5%;
          left: 21%;
      }
      #plus2 {
          top: 2.5%;
          right: 21%;
      }
      #plus3 {
          top: 46%;
          right: -3.5%;
      }
      #plus4 {
          bottom: 2.5%;
          right: 21%;
      }
      #plus5 {
          bottom: 2.5%;
          left: 21%;
      }
      #plus6 {
          top: 46%;
          left: -3.5%;
      }
      #hover-content-outer {
        flex: 1;
      }
      #hover-content {
        border-left: 1px solid #ccc;
        background: #fafafa;
        border-radius: 8px;
        padding: 1.5rem 1.5rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        max-width: 80%;
        margin: 0 auto;
      }
      #hover-content::before {
        content: '';
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translateX(-75%) rotate(90deg);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fafafa;
        left: 0;
      }
      .content-placeholder {
        display: none;
      }
      .content-placeholder:first-of-type {
        display: block;
      }
      .content-placeholder h6 {
        text-transform: uppercase;
        font-size: 1.4rem;
        line-height: 1.4rem;
        font-weight: bold;
        color: var( --e-global-color-primary );
        display: block;
        text-align: left;
      }
      .content-placeholder h6 span {
        position: relative;
        top: -0.5rem;
        font-size: 0.75rem;
      }
      .content-placeholder p span {
        position: relative;
        top: -0.4rem;
        font-size: 0.5rem;
      }
      .content-placeholder p {
        font-size: var(--bs-body-font-size);
        margin: 0;
        color: #555;
        text-align: left;
      }
      .content-placeholder img {
        display: block;
        margin: 1rem auto;
        max-width: 9rem;
      }
      .content-placeholder a {
        display: block;
        background-color: #E95296;
        font-size: var(--bs-body-font-size);
        border-style: solid;
        border-color: var( --e-global-color-primary );
        border-radius: 28px 28px 28px 28px;
        color: #fff;
        width: fit-content;
        padding: 0 0.7rem 0.1rem;
        margin: 0 auto;
      }
      .content-placeholder a:hover {
        background-color: #F5F5F5;
        color: var( --e-global-color-primary );
        border-color: #E95296;
      }
      @media(max-width:767px) {
        .shape-container {
          display: flex;
          flex-direction: column;
        }
        .container-circle-inner {
          padding-left: 0;
          margin: 0 auto 2rem;
        }
        #hover-content {
          margin: 0 auto;
        }
        #hover-content::before {
          top: -3.3%;
          left: 50%;
          transform: translateX(-50%) rotate(180deg);
        }
        #hover-content-outer {
          width: 100%;
        }
      }
      @media(max-width:450px) {
          #hover-content {
            max-width: 100%;
          }
      }
    </style>
    
    <script>
        const pageLang = document.documentElement.lang; // 'it', 'es', 'en'
        const contentsPlaceholder = document.querySelectorAll('.content-placeholder');
        const activePlus = document.querySelectorAll('.plus-icon');
        
        // Cambiar color de "+" y mostrar el bloque derecho que corresponda
        function handleHover(id) {
            contentsPlaceholder.forEach(contentPlaceholder => {
                if (contentPlaceholder.id === 'content-a'+id ) {
                    contentPlaceholder.style.display = 'block';
                } else {
                    contentPlaceholder.style.display = 'none';
                }
            });
            
            activePlus.forEach(plus => {
                if (plus.id === 'plus'+id ) {
                    plus.style.background = '#E95296';
                } else {
                    plus.style.background = '#242F62';
                }
            });
        }
    
        function handleMouseOut(id) {
        }
    </script>
