.port-main{
    padding-top: 8%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 4%;
    background: #fff;
}
.sect-main{
    position: relative;
    overflow: hidden;
}
.sect-points{
    position: absolute;
    inset: 0px;
    pointer-events: none;
    background-image: radial-gradient(rgb(195 165 246 / 45%) 1.4px, transparent 1.7px);
    background-size: 30px 30px;
    mask-image: radial-gradient(85% 90% at 50% 40%, black 18%, transparent 78%);
}
.sect-shadow1{
    position: absolute;
    inset: 0px;
    pointer-events: none;
    background: radial-gradient(100% 95%, transparent 32%, rgba(15, 23, 42, 0.28) 100%), linear-gradient(rgba(15, 23, 42, 0.12) 0%, transparent 14%, transparent 86%, rgba(15, 23, 42, 0.14) 100%);
}
.shape-purple{
    position: absolute;
    left: -12%;
    top: -18%;
    width: 62%;
    height: 75%;
    pointer-events: none;
    transform: translate3d(-12.8625px, 17.1787px, 0px);
    transition: transform 0.25s ease-out;
    will-change: transform;
}
.shape-purple>div{
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.55) 0%, transparent 65%);
    filter: blur(70px);
}
.shape-pink{
    position: absolute;
    right: -15%;
    bottom: -22%;
    width: 68%;
    height: 78%;
    pointer-events: none;
    transform: translate3d(13.8875px, -76.4083px, 0px);
    transition: transform 0.3s ease-out;
    will-change: transform;
}
.shape-pink>div{
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.45) 0%, transparent 65%);
    filter: blur(85px);
}
.container-small{
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
.c-text{
    color: #181822;
}
.c-grey2{
    color: #475566;
}
.txt-color{
    -webkit-text-fill-color: transparent;
    color: #0000;
    background: linear-gradient(-87.63deg, #e536db 6.95%, #673de6 51.17%, #3ab0ff 109.29% 109.29%);
    background-clip: text;
}
.space-desc{
    margin-top: 4rem;
}
.title1{
    font-size: 5rem;
    padding: 0%;
    margin: 2.5% 0 3.5%;
    font-family: 'nova-black';
}
.title2{
    font-size: 3.5rem;
    padding: 0%;
    margin: 2.5% 0 2%;
    font-family: 'nova-black';
}
.title3{
    font-size: 1.9rem;
    padding: 0%;
    margin: 2.5% 0 3.5%;
    font-family: 'nova-black';
}
.text1{
    font-family: "nova-regular";
    font-size: 1.6rem;
}
.text2{
    font-family: "nova-light";
    font-size: 1.7rem;
}
.text3{
    font-family: "nova-semibold";
    font-size: 1.3rem;
}
.sp-background{
    background-color: #F5F3FF;
    border: 1px solid #ede9fe;
    padding: 6px 14px;
    border-radius: 20px;
}
.sect-btn{
    margin-top: 5rem;
    display: flex;
    justify-content: space-evenly;
}
.cont-btn1{
    background-color: #ca50fb;
    padding: 1.5rem 4rem;
    color: #fff;
    font-family: 'nova-semibold';
    border-radius: 5px;
}
.cont-btn1:hover, .cont-btn1:active, .cont-btn1:focus{
    text-decoration: none;
    background-color: #950ecb;
    color: #fff;
}
.cont-btn2{
    background-color: #fff;
    padding: 1.5rem 4rem;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    font-family: 'nova-semibold';
    border-radius: 5px;
}
.cont-btn2:hover, .cont-btn2:active, .cont-btn2:focus{
    text-decoration: none;
    color: #6d28d9;
    border: 1px solid #6d28d9;
}
.separator {
    background-color: rgba(36, 6, 66, 0.1);
    height: 0.25rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.25rem;
}
.bc-clear{
    background-color: #faf9f5;
}
.c-purple{
    color: #6d28d9;
}
.c-purple1{
    color: #be3dd9;
}
.c-grey1{
    color: #c0c0c0;
}
.pre-text{
    font-family: 'nova-bold';
    text-transform: uppercase;
}
.title4{
    font-family: 'nova-semibold';
    font-size: 1.6rem;
}
.cont-section{
    padding-top: 4%;
    padding-bottom: 4%;
}
.cont-sect1{
    background-color: #000;
    padding-top: 5rem;
    padding-bottom: 7rem;
}
.border-line-right{
    border-right: 1px solid rgba(255, 255, 255, .3);
}
.border-line-bottom{
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.cont-box{
    background-color: #fff;
    padding: 2.5rem 3rem 4rem;
    border: 1px solid #ede9fe;
    border-radius: 18px;
}
.cont-box:hover{
    border: 1px solid rgb(221, 214, 254);
    box-shadow: rgba(15, 23, 42, 0.12) 0px 14px 30px -12px;
}
.cont-box>img{
    max-height: 30px;
}
.text4{
    font-family: 'nova-regular';
    font-size: 1.32rem;
}
.c-grey3{
    color: #5f7089;
}
.ul-details{
    padding-top: 4%;
}
.li-details{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: #6b7d97;
    margin-bottom: 6px;
    font-family: nova-regular;
}
.act-services{
    border-top: 1px solid #e6e2d6;
    padding-top: 12px;
    color: #6d28d9;
    text-align: right;
    margin-top: 4rem;
}
.act-services>a{
    text-decoration: none;
    color: #6d28d9;
    font-family: nova-semibold;
    font-size: 1.3rem;
}
.space-serv{
    padding-bottom: 4%;
}
.c-grey4{
    color: #475569;
}
.bc-clear2{
    background-color: #F1EFE9;
}
.cont-box3{
    padding: 3% 5% 4%;
    border: 2px solid transparent;
    border-radius: 15px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgb(139, 92, 246) 0%, rgb(236, 72, 153) 100%);
}
.cont-box3 > img{
    max-width: 22%;
}
.title5{
    font-family: nova-black;
    font-size: 2rem;
}
.ul-details2>li{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 1.4rem;
    margin-bottom: 6px;
    font-family: nova-regular;  
}
.bc-dark1{
    background-color: #0a0808;
}
.c-purple2{
    color: #a78bfa;
}
.cont-sect-dark{
    content: "";
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, .18) 0%, transparent 65%);
}
.cont-box2{
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 32px 28px;
    color: #fff;
}

.cont-box2:hover{
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, .3);
    background: rgba(255, 255, 255, .05);
}

/******/
.borde-giratorio {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Este es el fondo de color que va a girar */
.borde-giratorio::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(#ff007f, #00f0ff, #ff007f);
  animation: rotar 3s linear infinite;
}

/* Este es tu contenedor real que tapa el centro y simula el borde */
.contenido-box {
  position: absolute;
  inset: 2px;
  background: #1a1a1a;
  border-radius: 8px;
  color: white;
  display: grid;
  place-content: center;
  padding: 32px 28px;
}

/* La animación ahora gira el elemento completo, lo cual sí está soportado */
@keyframes rotar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/******/

.text4{
    font-family: 'nova-regular';
    font-size: 1.4rem;
}
.space-down{
    margin-bottom: 4%;
}
.bc-dark2{
    background: linear-gradient(280deg,rgba(97, 75, 204, 1) 8%, rgba(55, 53, 148, 1) 51%, rgba(9, 18, 79, 1) 100%);
}

/*****/
.borde-giratorio2 {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Este es el fondo de color que va a girar */
.borde-giratorio2::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(#4744e3, #138a9b, #6041ec);
  animation: rotar 3s linear infinite;
}

/* Este es tu contenedor real que tapa el centro y simula el borde */
.contenido-box2 {
  position: absolute;
  inset: 2px;
  background: #1A2563;
  border-radius: 8px;
  color: white;
  display: grid;
  place-content: center;
  padding: 32px 28px;
  text-align: center;
}

/****/
.c-purple3{
    color: #b0a3ff;
}
.title6{
    font-size: 1.8rem;
    padding: 0%;
    margin: 2.5% 0 6%;
    font-family: 'nova-semibold';
}

.c-purple4{
    color:#7B61FF;
}
.bc-dark3{
    background-color: #e6e6e6;
}
.cont-box5{
    padding: 4% 4%;
    background-color: #FFF;
    box-shadow: inset 0 24px 48px #c7d3ea0d, inset 0 1px 1px #c7d3ea1f;
    border-radius: 24px;
}
.title7{
    font-size: 1.75rem;
    font-family: 'nova-black';
    margin-bottom: 7%;
}
.space-down1{
    margin-bottom: 2%;
}
.cont-box5 > img{
    max-width: 25%;
}

.cont-box6 {
    padding: 6% 6%;
    color: #fffff1;
    box-shadow: inset 0 24px 48px #c7d3ea0d, inset 0 1px 1px #c7d3ea1f;
    border-radius: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(280deg,rgba(97, 75, 204, 1) 8%, rgba(55, 53, 148, 1) 21%, rgba(9, 18, 79, 1) 100%);
}

.ul-details3 {
  list-style: none; 
  padding-left: 0;         
}

.ul-details3 li {
  position: relative;   
  padding-left: 30px;      
  margin-bottom: 10px;      
  font-size: 18px;          
  line-height: 1.5;
  font-family: nova-regular-cond;    
}

.ul-details3 li::before {
  content: "";              
  position: absolute;
  left: 0;                   
  top: 50%;                  
  transform: translateY(-50%); 
  width: 20px;             
  height: 20px;             
  background-image: url('/libs17/img/apps/check3.png');
  background-size: contain;
  background-repeat: no-repeat;
}


@media(max-width: 2000px){
    
}

@media(max-width: 1600px){
    
}

@media(max-width: 1366px){
    .port-main {
        padding-top: 12%;
    }
}

@media(max-width: 1280px){
    
}

@media(max-width: 1024px){
    .port-main {
        padding-top: 15%;
    }
    .title2 {
        font-size: 2.6rem;
    }
    .cont-section {
        padding-top: 6%;
        padding-bottom: 6%;
    }
}

@media(max-width: 991px){
    .port-main {
        padding-top: 20%;
    }
    .cont-solutions>div{
        margin-bottom: 4%;
    }

}

@media(max-width: 767px){
    .port-main {
        padding-top: 25%;
    }
    .title1 {
        font-size: 4rem;
    }
    .sect-btn{
        display: grid;
    }
    .cont-btn1 {
       margin-bottom: 4%;
    }
    .cont-boxes-ben>div{
        margin-bottom: 4%;
    }
    .cont-section {
        padding-top: 10%;
        padding-bottom: 10%;
    }
}
}