.specs {
  align-items: center; 
  justify-content:space-between;
}
.specs .leftContent{
  width:34%; 
  gap:40px; 
  z-index: 2;
}
.specs .leftContent .title{
  gap: 24px; 
  display: flex;
}
.specs h1{
  text-transform: uppercase; 
  margin: 0;
}
.specs p{
  font-weight: 200; 
  opacity:74%;
}

.specs .specImg{
  left:50%; 
  top:50%; 
  transform: translate(-50%, -50%); 
  z-index:1; 
  max-width: 690px; 
  width: 50%;
}
.specs .specText{
  width:26%; 
  z-index: 2; 
  gap: 134px;
}

.specs .row{
  gap: 24px;
}
.specs h3 {
  position: relative; /* Necesario para que la imagen arrow sea posicionada dentro del h3 */
  display: flex;
  align-items: center;
  margin: 0;
}

.specs h3 img {
  position: absolute;
  left: 15%; /* Ajusta según la distancia deseada */
  transform: translateX(-50%); /* Centra la imagen respecto a su posición */
  max-width: 318px;
}

.specs .row:first-child h3 img { 
  top: 130%; /* Flecha en la primera fila */
}

.specs .row:nth-child(2) h3 img { 
  top: 100%; /* Flecha en la segunda fila */
}

.specs .row:last-child h3 img { 
  bottom: -10px; /* Flecha en la última fila */
}
@media screen and (max-width: 770px) {
  .specs .leftContent{
    width: 100% !important;
  }
  .specs .leftContent a{
    display: none;
  }
  .specs .specText{
    width: 100% !important;
    gap: 24px;
  }
  .specs .row{
    gap: 16px;
  }
  .specs .specImg{
    position: relative;
    width: 100% !important;
    left: unset !important;
    top: unset !important;
    transform: none !important;
  }
  .specs .specText img.arrow{
    display: none;
  }
  .specs .specText img.dot{
    display: flex !important;
    position: relative;
    left: 0;
  }
  .specs .specText h3{
    left: 10px;
  }
  .specs .specText a.mobile{
    display: flex !important;
    margin-top: 24px;
    width: fit-content !important;
  }

}