#particles {
    position: absolute;
    left: -30%;
    top: 50%;
    width: 115%;
    height: 37%;
    transform: rotate(-36deg);
    z-index: 1
}
.fullpage{
    margin-top: 10;
    margin-left: 10;
}



.brain-main {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 80%;
    z-index: 9;
    width: 80%;
    border-radius: 50%; 
    cursor: pointer
}

.brain-text {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    align-content: center;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
    font-size: 15px;
    line-height: 16px;
    color: #000;
    float: left;
    background: radial-gradient(circle, rgba(253, 252, 248, 0.8) 0%, rgba(253, 252, 248, 0.8) 0%, rgba(155, 238, 248, 0.8) 22%, rgba(253, 252, 248, 0.8) 22%, rgb(254, 251, 248) 73%, rgba(253, 252, 248, 0.8) 100%)
    
}

.brain-main .brain-text  {
    visibility: hidden
}

/* .brain-text  {
    visibility: hidden
} */



.myAnim{
    animation: mymove 7s ease-in-out;
}


@keyframes mymove {
    from {bottom: 0px;}
    to {bottom: 1000px;}
  }

  brain-main:hover + .brain-text myAnim {
    visibility: visible
}


.brainTextAnim {
    animation: brainText 4s ease-in-out forwards
}

@keyframes brainText {
    0% {
        transform: translateX(0px)
        
    }

    20% {
        transform: translateX(15px)
    }

    40% {
        transform: translateX(5px)
    }

    60% {
        transform: translateX(15px)
    }

    80% {
        transform: translateX(-15px)
    }

    100% {
        transform: translateX(0px)
    }

}

.brain {
    position:absolute;
    top: 20%;
    left: 26%;
    width: 60%;
    /* z-index: 5 */
    transform: rotate(0deg);
    
    
}

.brain img {
    width: 100%;
    height: auto;
}

.bubble {
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 10%, rgb(216, 210, 195) 70%, rgba(179, 33, 47, 1) 100%);
    /* background: radial-gradient(circle, rgba(255, 255, 255, 1) 10%, rgba(255, 197, 54, 1) 70%, rgba(179, 33, 47, 1) 100%); */
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 9;
    opacity: 1;
    transform: scale(0);
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 1)
}

.bubble1 {
    top: 25%;
    left: 43.5%
}

.bubble2 {
    top: 26.5%;
    left: 48.5%
}

.bubble3 {
    top: 12.5%;
    left: 64.5%
}

.banner-page.selected .bubble1 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 40%;
    left: 64.5%
}

.banner-page.selected .bubble2 {
    animation: blinking 1.5s linear infinite alternate;
    top: 28%;
    left: 70.5%
}

.banner-page.selected .bubble3 {
    animation: blinking 1s linear infinite alternate 0s;
    top: 37.5%;
    left: 74.5%
}

.banner-page.selected .bubble4 {
    animation: blinking 1s linear infinite alternate 0.5s;
    top: 24.5%;
    left: 60.5%
}

.banner-page.selected .bubble5 {
    animation: blinking 1.5s linear infinite alternate 0s;
    top: 28%;
    left: 54.5%
    /* top: 28%;
    left: 24.5% */
}

.banner-page.selected .bubble6 {
    animation: blinking 1s linear infinite alternate;
    top: 35%;
    left: 54.5%
}

.banner-page.selected .bubble7 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 40%;
    left: 64.5%
}

.banner-page.selected .bubble8 {
    animation: blinking 1.5s linear infinite alternate;
    top: 28%;
    left: 70.5%
}

.banner-page.selected .bubble9 {
    animation: blinking 1s linear infinite alternate 0s;
    top: 37.5%;
    left: 74.5%
}

.banner-page.selected .bubble10 {
    animation: blinking 2s linear infinite alternate;
    top: 45%;
    left: 70.5%
}

.banner-page.selected .bubble11 {
    animation: blinking 1s linear infinite alternate 1s;
    top: 41%;
    left: 59.5%
}

.banner-page.selected .bubble12 {
    animation: blinking 3s linear infinite alternate;
    top: 48%;
    left: 62.5%
}

.banner-page.selected .bubble13 {
    animation: blinking 1s linear infinite alternate 0.5s;
    top: 57%;
    left: 66.5%
}

.banner-page.selected .bubble14 {
    animation: blinking 1.5s linear infinite alternate;
    top: 53%;
    left: 81.5%
}

.banner-page.selected .bubble15 {
    animation: blinking 1s linear infinite alternate;
    top: 34%;
    left: 83.5%
}

.banner-page.selected .bubbleB16 {
    animation: blinking 1.5s linear infinite alternate 1s;
    top: 47%;
    left: 78.5%
}

.banner-page.selected .bubble17 {
    animation: blinking 1.3s linear infinite alternate;
    top: 62%;
    left: 84%
}

.banner-page.selected .bubble18 {
    animation: blinking 1s linear infinite alternate 0.5s;
    top: 40%;
    left: 87%
}

.banner-page.selected .bubble19 {
    animation: blinking 1.2s linear infinite alternate 1s;
    top: 47%;
    left: 93%
}

.banner-page.selected .bubble20 {
    animation: blinking 1.5s linear infinite alternate;
    top: 20%;
    left: 84%
}

.banner-page.selected .bubble21 {
    animation: blinking 1.2s linear infinite alternate;
    top: 16.5%;
    left: 74%
}

.banner-page.selected .bubble22 {
    animation: blinking 1.3s linear infinite alternate 0.5s;
    top: 13.5%;
    left: 42%
}

.banner-page.selected .bubble23 {
    animation: blinking 1s linear infinite alternate;
    top: 15.5%;
    left: 52%
}

.banner-page.selected .bubble24 {
    animation: blinking 1.1s linear infinite alternate 0.5s;
    top: 66.5%;
    left: 57%
}

.banner-page.selected .bubble25 {
    animation: blinking 2s linear infinite alternate;
    top: 68.5%;
    left: 73%
}

.banner-page.selected .bubble26 {
    animation: blinking 1.5s linear infinite alternate;
    top: 78.5%;
    left: 65%
}

.banner-page.selected .bubble27 {
    animation: blinking 1.2s linear infinite alternate 0.5s;
    top: 33%;
    left: 63.5%
}

.banner-page.selected .bubble28 {
    animation: blinking 1.5s linear infinite alternate;
    top: 37%;
    left: 43.5%
}

.banner-page.selected .bubble29 {
    animation: blinking 2s linear infinite alternate;
    top: 40%;
    left: 50.5% 
    
}

.banner-page.selected .bubble30 {
    animation: blinking 1.2s linear infinite alternate 0.5s;
    top: 51%;
    left: 50.5%
}

.banner-page.selected .bubble31 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 40%;
    left: 4.5%
}

.banner-page.selected .bubble32 {
    animation: blinking 1.5s linear infinite alternate;
    /* top: 28%;
    left: 24.5% */
    /* by 5 */

    top: 28%;
    left: 54.5%
}

.banner-page.selected .bubble33 {
    animation: blinking 1s linear infinite alternate 0s;
    top: 38.5%;
    left: 22.1%
}

.banner-page.selected .bubble34 {
    animation: blinking 1s linear infinite alternate 0.5s;
    top: 25.5%;
    left: 15.5%
}

.banner-page.selected .bubble35 {
    animation: blinking 1.5s linear infinite alternate 0s;
    top: 50%;
    left: 15.5%
}

.banner-page.selected .bubble36 {
    animation: blinking 1s linear infinite alternate;
    top: 20%;
    left: 24.5%
}

.banner-page.selected .bubble37 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 30%;
    left: 30.5%
}
.banner-page.selected .bubble38 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 10%;
    left: 20.5%
}

.banner-page.selected .bubble39 {
    animation: blinking 1.5s linear infinite alternate;
    top: 28%;
    left: 70.5%
}

.banner-page.selected .bubble40 {
    animation: blinking 1s linear infinite alternate 0s;
    top: 37.5%;
    left: 74.5%
}

.banner-page.selected .bubble51 {
    animation: blinking 1s linear infinite alternate 0.5s;
    top: 24.5%;
    left: 60.5%
}

.banner-page.selected .bubble52 {
    animation: blinking 1.5s linear infinite alternate 0s;
    top: 28%;
    left: 54.5%
}

.banner-page.selected .bubble53 {
    animation: blinking 1s linear infinite alternate;
    top: 35%;
    left: 54.5%
}

.banner-page.selected .bubble54 {
    animation: blinking 2s linear infinite alternate 0.2s;
    top: 40%;
    left: 64.5%
}





@keyframes blinking {
    from {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1.5)
    }

}

/* .banner-page.selected .circle-one,
.livechat-control .cir_fours .circle-one,
.about-animation.active .circle-one,
.start-ele-anim .circle-one {
    animation: divRotateOne 11s infinite linear
} */


/* .brain-main:hover + .brain-main .brain-text {
    visibility: visible;
} 

.bubble1:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble2:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble7:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble6:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble5:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble4:hover + .brain-main .brain-text {
    visibility: visible
} 
.bubble3:hover + .brain-main .brain-text {
    visibility: visible
}  */
/* #MyDisc{
    position: absolute;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    transform: perspective(500px);
}
#MyDisc .DiscFront,
#MyDisc .DiscBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 400;
    height: 400;
    backface-visibility: hidden;
}
#MyDisc .DiscFront{
    background: url(disc.png);
    background-size: cover;
    width: 400;
    height: 400;
}
#MyDisc .DiscBack{
    background: url(disc.png);
    background-size: cover;
} */

/* . MyDiscImg{
    transform: scale(-1);
} */

.DiscRotate{
    animation: rotation 5s infinite linear;
    
}