.title-section{
    /*width: 92%;
    position: absolute;*/
    color: #221258;;
    padding: 0px 0px 30px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.title-section .main-title{
    margin: 0 auto;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.3;
    font-family: Helvetica, Arial, sans-serif;
}

.line{
    width: 10%; 
  /*border-bottom: 2px solid #878787;
    opacity: 20%;*/
    position: relative;
    left: 30%;
    top: -25px;
}
.linetwo{
    width: 10%; 
    border-bottom: 2px solid #878787;
    opacity: 20%;
    position: relative;
    left: 60%;
    top: -25px;
}
.introduction {
    display: flex;
    padding: 50px 0 0 0;
    font-family: Helvetica, Arial, sans-serif;
    color: #444;
    justify-content: space-around;
}
div.introduction span{
    width: 476px;
    font-weight: 500;
    margin-bottom: 10px;
}
div.introduction span:nth-child(1),
div.introduction span:nth-child(2){
    padding-left: 0;
      line-height: 1.5;
}
/*.line-introduction{
    border-left: 2px solid #878787;
    height: 60px;
    left: 0;
    position: relative;
    opacity: 20%;
}*/

.infinity-container{
  display: flex;
  justify-content: center;
  max-height: 680px;
}

.card-container{
  display: flex;
  justify-content: center;
  position: relative;
  max-height: 680px;
}
.card-wrapper-hover {
  position: absolute; /* Posicionamiento absoluto igual que card-content */
  width: 306px; /* Mismo ancho que la tarjeta expandida */
  height: 300px; /* Misma altura que la tarjeta expandida */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Permite que los eventos pasen a las tarjetas */
  z-index: 0; /* Z-index base */
}
.card-content {
  position: absolute;
  text-align: center;
  height: 58px;
  width: 60px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.70);
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition:  all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);;
  z-index: 1; /* Z-index base para las tarjetas */
  pointer-events: auto; /* Habilitamos eventos para la tarjeta */
}

.card-content:hover {
  height: auto;
  max-height: 300px;
  width: 306px;
  border-radius: 10%;
  z-index: 10; /* Z-index aumentado al hacer hover */
}

/* Ajustamos el posicionamiento de las tarjetas para que estén centradas en sus wrappers */
.card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-content:hover {
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 500px){
 .card-content.active {
    height: auto;
    width: 85%;
    
}
}
.card-content.show {
background-color: #1391f1;
    /* color: #ffff; */
    border: 2px solid #1391f1;
  }
  
.card-wrapper{
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
}

span.fa-solid.fa-chart-pie, span.fa-solid.fa-wand-magic-sparkles, span.fa-solid.fa-compass-drafting,
span.fa-solid.fa-user-gear, span.fa-solid.fa-handshake-angle, span.fa-solid.fa-users-gear {
    border-radius: 50%;
    z-index: 1;
    font-size: 26px;
    margin-top: 5px;
    color: #1391F1;
}

.card-text{
    padding: 3px 0 0 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 310px;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease-in-out;
}
.card-text.visible {
    visibility: visible;
    opacity: 1;
    gap:3px
}
  
.card-content:hover .card-text{
    opacity: 1;
    visibility: visible;
    gap: 3px;
}
.card-title{
    font-size: 1em;
    padding: 2px 0px 0px 0px;
    color: #444;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    font-weight: 600;
    margin:0;
}
.description{   
    color: #343434;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.card-wrapper-hover:nth-child(1){

  
}
.card-wrapper-hover:nth-child(2){
    right: 75%;
    top: -8%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(3){
    right: 75%;
    top: 25%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(4){
    left: 17%;
    bottom: 4%;
   /* z-index: 2; */
  
}
.card-wrapper-hover:nth-child(5){
    left: 75%;
    top: -8%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(6){
   left: 75%;
    top: 25%;
   /* z-index: 2; */
}
.card-wrapper-hover:nth-child(7){
    right: 18%;
    bottom: 4%;
   /* z-index: 2;*/
}
.title-section .introduction{
  display:flex;
}

@keyframes slide{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
.logos{   
    width: 740px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding-bottom:0.7rem;  
}
.logos:hover .logos-slide{
    animation-play-state: paused;
}
.logos:before, .logos:after {
    content: "";
    position: absolute;
    top: 0;
    width: 46px;
    height: 100%;
    z-index: 2;
}
.logos:before{
    left: 196px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}
.logos:after{
    right: 196px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}
.logos-slide{
    animation: 11s slide infinite linear;
    display: inline-block;
    margin: 0 20px;
}
.logos-slide img{
    margin: 0 20px;
}
img.Oracle_logo{       
    height: 26px !important;
}
img.Salesforce_logo{
    height: 26px !important;
}
img.Adobe_logo{
    height: 26px !important;
}
img.HubSpot_logo{
  height: 26px !important;
}
img.Magento_logo{
  height: 26px !important;
}
img.Appian_logo{
  height: 20px !important;
}

#card4 > div{
    gap: 4px;
}

#card5 > div > div{
  padding: 0px 0px 0px;
}
#hs_cos_wrapper_widget_1706296225703 > section > div > div.introduction > span:nth-child(1){
  
}
#hs_cos_wrapper_widget_1706296225703 > section > div > div.introduction > span:nth-child(3){
  
}

.next-card {
  /* animation: shake 2s cubic-bezier(.36,.07,.19,.97) infinite;
  transform: translate3d(0, 0, 0);*/
  /* box-shadow: 0 0 14px rgba(19, 145, 241, 0.5);*/
/* -webkit-animation: pulse 1s infinite;*/
  background-color: #1391f1;
  border: 2px solid #1391f1;
  
  /* Asegura que el objeto no se desplace*/
 transform-origin: center center;
  -webkit-transform-origin: center center;

  display: inline-block; /* o block según tu layout */
  vertical-align: middle;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.next-icon {
  color: #ffff !important;
}


@-webkit-keyframes pulse {
  0% {
    @include transform(scale(.9));
    box-shadow: 0 0 0 10px rgba(#1391f1, 0);
  }
  70% {
     @include transform(scale(1.6));
    box-shadow: 0 0 0 10px rgba(#1391f1, 0);
  }
  100% {
    @include transform(scale(.9));
       box-shadow: 0 0 0 0 rgba(#1391f1, 0);
  }
}

#card1:hover {
  -webkit-animation: none;
  background-color: #ffff !important;
  border: 2px solid #ffff !important;
  /*box-shadow: none !important;*/
}

/*
@keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
  }
  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}*/

@media only screen and (min-width: 0px) and (max-width: 600px){
  .description {
    font-size: 16px;
  }
  
  .title-section {
    margin-bottom:50px;
  }
  
  .card-wrapper-hover:nth-child(2){
    right: 50%;
    top: -90%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(3){
    right: 45%;
    top: 1%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(4){
    top: -90%;
    right: unset;
    bottom: unset;
    left: unset;
    
   /* left: 26%;
    bottom: 18%;
    z-index: 2;*/
  
}
.card-wrapper-hover:nth-child(5){
    left: 50%;
    top: -90%

   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(6){
   left: 45%;
    top: 1%;
   /* z-index: 2; */
}
.card-wrapper-hover:nth-child(7){
    left: unset;
    top: 20%;
    bottom: unset;
    right: unset;
   /* z-index: 2;*/
}
  
  
   .card-content.active{
     position: fixed !important;
      margin: auto !important;
      left:35% !important;
      top: 65% !important;
      transform: translate(-50%, -50%) !important;
      max-width: 80%;
      width: 70% !important;
      z-index: 100;
  }
 /* .card-content:nth-child(5){
    left: 88%;
    top: 22%;
   /* z-index: 2;*/
/* }*/
  
  .introduction {
    padding: 20px 30px;
  }
  .title-section .introduction{
    flex-direction:column;
  }
  div.introduction span {
    width: unset;
  }
  .title-section {
    padding: 0px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 959px){
  
    .title-section {
    margin-bottom:100px;
  }
  
    .card-wrapper-hover:nth-child(2){
    right: 65%;
    top: -15%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(3){
    right: 65%;
    top: 15%;
   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(4){
    top: 50%;
    right: unset;
    bottom: unset;
    left: unset;
    
   /* left: 26%;
    bottom: 18%;
    z-index: 2;*/
  
}
.card-wrapper-hover:nth-child(5){
    left: 65%;
    top: -15%

   /* z-index: 2;*/
}
.card-wrapper-hover:nth-child(6){
   left: 65%;
    top: 15%;
   /* z-index: 2; */
}
.card-wrapper-hover:nth-child(7){
    left: unset;
    top: -25%;
    bottom: unset;
    right: unset;
   /* z-index: 2;*/
}
  
  
  .card-content.active {
    position: fixed !important;
    margin: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90%;
    width: 90% !important;
    z-index: 100;
  }
  .introduction {
    padding: 20px 30px;
  }
  div.introduction span {
    width: unset;
  }
  .title-section {
    padding: 0px;
  }
}
@media only screen and (min-width: 960px) and (max-width: 1279px){
    
 .introduction {
    padding: 20px 10px;
  } 
  div.introduction span {
    width: unset;
  }
  .title-section {
    padding: 0px;
  }
}