@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Open+Sans:wght@400;500;600&display=swap');

.box{
    opacity: 0;
    position: absolute ;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);

}

.text-wrapper{
    position: relative;
}
.a{
    animation: a1 15s infinite;
}
.b{
    animation: a2 15s infinite;
}
.c{
    animation: a3 15s infinite;
}

.d{
    animation: a4 15s infinite;
}
@keyframes a1 {
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
}

@keyframes a2 {
    25%{
        opacity: 0;
    }
    35%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}
@keyframes a3 {
    55%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
    80%{
        opacity: 0;
    }
}

@keyframes a4 {
    85%{
        opacity: 0;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


/* Customer Retention */

.cr-div{
    position: relative;
}
.cr-text{
    opacity: 0;
    position: absolute;
    width: 442px;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);
    color: #6286ed;
    margin-left: 14.5rem;
}

.img-con{
    position: relative; 
}

.cr-image{
    opacity: 0;
    position: absolute;
    width: 65rem;
    left: -5%;
    top: 55%;
    transform: translateX(-50%);
    color: #6286ed;
    margin-left: 35.5rem;
    margin-top: 2rem;
}

 
.cr1{
    animation: cr1 15s infinite;
}
.cr2{
    animation: cr2 15s infinite;
}
.cr3{
    animation: cr3 15s infinite;
} 
@keyframes cr1 {
    0%{
        opacity: 0;
    }
    15%{
        opacity: 1;
    }
    30%{
        opacity: 0;
    }
}

@keyframes cr2 {
    35%{
        opacity: 0;
    }
    45%{
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
}
@keyframes cr3 {
    65%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
    90%{
        opacity: 0;
    }
}

.cr3-text{
    margin-left: 10.5rem;
   
}


@media only screen and (max-width: 500px ) and (max-width: 480px)  {
    .cr-image {
        width: 24rem;
        margin-left: 11.5rem;
      }
      .cr-text {
    
        margin-left: 27.5rem;
        font-size: 40px;
    }
    .cr1-text{
        margin-left: 25.3rem;
        
    }

    .cr2-text{
        margin-left: 25.5rem;
       
    }

    .cr3-text{
        margin-left: 28.5rem;
       
    }

    .cr1-img{
        width: 24rem;
        margin-left: 11.55rem;
    }
    .cr2-img{
        width: 24rem;
        margin-left: 11.5rem;

    }
    .cr3-img{
        width: 24rem;
        margin-left: 11.5rem;
    }
 
}

.features{
    overflow: hidden   
}




.feature {
    --x-px: calc(var(--x) * 1px);
    --y-px: calc(var(--y) * 1px);
    --border: 2px;

    overflow: hidden !important;
  }
  .feature:before, .feature:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    inset: 0px;
    border-radius: inherit;
    background: radial-gradient(30vh circle at var(--x-px) var(--y-px), rgb(59 130 246 / 0.5), transparent 150%);
  
  }
  .feature:before {
    z-index: 1;
  }
  .feature:after {
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
  }
  .feature:hover:after {
    opacity: 1;
  }

  .feature-content > strong {
    align-self: self-end;
    font-size: 125%;
  }
  .feature-content > span {
    opacity: 0.7;
  }


  /* Circle */

  .circle1{

    animation: right-bottom 3s linear infinite alternate;

}
.circle2{
    background: linear-gradient(45deg, #9d7cec 0%, #fff  100%);
      
}
.circle3{
    
    animation: left-top  3s linear infinite alternate;
    z-index: -1;
    
}
.circle{
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    width: 200px;
    height: 200px;
    border: none;
    outline: none;
    border: 1px solid white !important;
}

@keyframes right{

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(150px, 150px);
    }

    }
@keyframes left-top {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-150px,-150px);
    }

    }

    /* Circle end */

    /* cube */

    .cube-container{
        position: absolute;
        top: 25%;
        left: 20%;
    }
    .cube {
        font-size:5em;
        width:501px;
        margin:auto;
     }
     
     .side {
        position:absolute;
        width:200px;
        height:200px;
        
        text-align:center;
        line-height:100px;
     }
     
     .front {
        transform: rotateX(-41deg) rotateY(33deg) translateZ(145px);
        z-index:1001;
        background-color: #ddd7ff;
     }
     
     .top {
        transform: rotateX(-44deg) rotateY(32deg) rotateX(93deg) translateZ(58px) translateX(29px)translateY(7px);
        z-index:1001;
        background-color: #908df4;
     }
     
     .right {
        transform: rotateX(-41deg) rotateY(32deg) rotateY(91deg) translateZ(52px) translateX(300px) translateY(-83px);
        border: 5px solid white;
        animation: right  3s linear infinite alternate;
     }
     
     .left {
        transform: rotateX(-41deg) rotateY(33deg) rotateY(-91deg) translateZ(68px)translateY(50px);
        z-index:1001;
        background-color: #4e4cf1;
     }
     
     .bottom {
        transform:rotateX(-41deg) rotateY(33deg) rotateX(-91deg) translateZ(51px);
     }
     
     .left-square  {
      
        transform: rotateX(-41deg) rotateY(33deg) rotateY(-91deg) translateZ(68px)translateY(50px);
        z-index:1001;
        border: 5px solid white;
        animation: left  3s linear infinite alternate;

     }
     
    


        @keyframes right{

        0% {
           transform:  rotateX(-41deg) rotateY(32deg) rotateY(90deg) translateZ(52px) translateX(-125px) translateY(-83px);
        }
    
        100% {
            transform: rotateX(-41deg) rotateY(32deg) rotateY(91deg) translateZ(52px) translateX(300px) translateY(-83px);
        }
    
        } 
        @keyframes left{

            0% {
                transform: rotateX(-41deg) rotateY(33deg) rotateY(-91deg) translateZ(68px)translateY(50px);
            }
        
            100% {
                transform: rotateX(-41deg) rotateY(33deg) rotateY(-91deg) translateZ(68px)translateY(51px) translateX(300px);
            }
        
            } 


/* Use Cases */


  
  /* Linkedin href */


  .use-div{
    margin: 0 8%;
    height: 300px; 
    margin-left: 0;
  }

  .hide{
    display: none;
  }

  .slide-right {
    /* animation: 3s slide-right; */
  }
  
  @keyframes slide-right {
    from {
      margin-left: -100%;
    }
    to {
      margin-left: 0%;
    }
  }
  

  /* Hover Effext */
  
  .t1,.t2,.t3,.t4,.t5,.t6,.t7{
    cursor: pointer;
    margin-left: 10px;
    margin: 10px !important;
    line-height: 2;
}

.t1:hover ~ .img1 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}
.bg-blue:hover {
    font-weight: bold;
    font-size: 24px;   
    padding: 2px;
    margin: 1px;
    text-align: left;   
    background-color: #0a0a24;
    border-radius: 10px;
    width: 125%;
    transition: all 0.3s ease-in-out;
}

.bg-blue{
    padding: 1px;
    
}

.bg-blue1{
    font-weight: bold;
    font-size: 24px;   
    width: 125%;
    padding: 2px;
    margin: 1px;
    text-align: left;   
    background-color: #0a0a24;
    border-radius: 10px;
}


.t2:hover ~ .img2 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}

.t3:hover ~ .img3 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}

.t4:hover ~ .img4 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}

.t5:hover ~ .img5 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}

.t6:hover ~ .img6 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}
.t7:hover ~ .img7 {
    opacity: 1;
    transition: all 1.5s ease-in-out;
}

.img1,.img2,.img3,.img4,.img5,.img6,.img7{
    opacity: 0;   
}

.desc1,.desc2,.desc3,.desc4,.desc5,.desc6{
    opacity: 0;
}

.use-image {
    width: 25rem;
    /* display: inline; */
    position: absolute;
    transform: translate(150%,-89%);
}  

.use-text{
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;

  }

.use-text:hover{
    text-shadow: 0 3px 3px rgba(255, 255, 255, 0.17);
    font-weight: bold;
    transition: 0.5;
}


.text-img{
 width: 25rem;
 height: 25rem;
 position: absolute;
 right: 0%;
 background-color: #000000;
 border-radius: 10px;
}