.brainContainer{
    width:17vw;
    height:17vw;
    max-height:17vw;
    max-width:17vw;
    overflow:hidden;
    cursor:pointer;
    z-index:0;
}
.brain-card {
    height: 100%;
}
.neumorphic-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.1), -8px -8px 20px rgba(255, 255, 255, 0.7);
    height: 35vw;
    width:100%
}


.white-section, .black-section {
    width: 50%; /* Adjust as needed */
    height: 100%;
    overflow: hidden;
    transition: transform 1s ease;
}
.banner-bw-button-layer-white, .banner-bw-button-layer-black {
    width: 50%; /* Adjust as needed */
    height: 100%;
    overflow: hidden;
    transition: transform 1s ease;
}

.banner-bw-button-layer-white {
    background-color: #ededed !important;
    z-index: 5 !important;
}
.banner-bw-button-layer-black {
    background-color: #131419 !important;
    z-index: 5 !important;
}
.white-section1 {
    background-color: #ededed;
    z-index: 1;
}
.black-section1 {
    background-color: #131419;
    z-index: 0;
}
.white-section2 {
    background-color: #131419;
}

.black-section2 {
    background-color: #ededed;
}

.white-section .circle {
    background: linear-gradient(145deg, #d7d7d7, #ffffff);
    /* box-shadow: 8px 8px 16px #cbcbcb, -8px -8px 16px #ffffff; */
    width: auto;
    height: auto;
    padding: 2vw 1.5vw 1.3vw 2vw;
    position: absolute;
    left: 13%;
    top: 9%;
    z-index: 1;
}

div.circle,
div.circle_black {
    position: absolute;
    display: flex;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
div.circle_black {
    position: relative;
    width: 150px; /* Adjust circle size */
    height: 150px; /* Adjust circle size */
    border-radius: 50%;
    background-color: #131419;
    box-shadow: inset 16px -38px 39px #292929cf, 10px 6px 90px #717171db;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.circle_black:hover .heart {
    transform: scale(1.1); /* Example of scaling effect on hover */
}

div.circle:before {
    box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
}
div.circle_black:before {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
    -8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before {
    box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff,
    inset -8px -8px 20px #fff, inset 8px 8px 20px #a9a8b7;
}
div.circle_black:hover:before {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
    -8px -8px 20px rgba(255, 255, 255, 0.2),
    inset 8px 8px 20px rgba(0, 0, 0, 1),
    inset -8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before,
div.circle_black:hover:before {
    transition: 0.3s ease-in;
    transform: scale(1.05);
}
div.circle p,
div.circle_black p {
    position: relative;
    z-index: 5;
    user-select: none;
    cursor: pointer;
}
div.circle_black {
    color: white;
}
@media (max-width: 700px) {
    .neumorphic-card {
        width: 100%;
    }
}
path{
    fill:transparent;
}
.brainPath{
    stroke:#00ff00;
    stroke-width:1;
}
.brainCircle{
    stroke:#00FF00;
    fill:#00FF00;
}
.brainRect{
    stroke:#00FF00;
    fill:#00FF00;
}
.brainEllipse{
    stroke:#00FF00;
    fill:#00FF00;
}
.animatePaths{
    animation: goPath 3000ms alternate infinite;
}
.animateCircles{
    animation: goCircle 3000ms alternate infinite;
}
.animateRects{
    animation: goRect 3000ms alternate infinite;
}
@keyframes goPath {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes goRect {
    to {
        opacity:0;
    }
}
@keyframes goCircle {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
canvas {
    display: block;
}
#particles-js {
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    opacity: 0.15;
    z-index:-1
}
#particles-js-w {
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.particles-js-canvas-el {
    z-index: 1;
    position: relative;
    background-color: transparent;
}
#particles-js-w .particles-js-canvas-el {
    z-index: 1;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slider-page--left #particles-js-w .particles-js-canvas-el {
    opacity: 0.5;
}
.black-section .circle {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    background-color: #131419;
    box-shadow:
        inset 8px 8px 16px rgba(255, 0, 0, 0.2),
        inset -8px -8px 16px rgba(255, 0, 0, 0.7);
    position: absolute;
    top: 9.5%;
    right: 12.5%;
    z-index: 2;
}
#heart {
    width: 100vw;
    height: 50vw;
    max-height: 100%;
    opacity: 1;
    position: relative;
    right: -6%;
    top: -28%;
}
.toptext-brain {
    position: absolute;
    top: 1.5vh;
    left: 35%;
    z-index: 1;
    font-size: 5.5vw;
    width: 30%;
}
.middletext-brain {
    position: absolute;
    left: 37.2%;
    z-index: 1;
    font-size: 7vw;
    width: 25%;
    bottom: -210%;
}
.bottomtext-brain {
    position: absolute;
    z-index: 1;
    bottom: -245%;
    font-size: 2vw;
    font-weight: 600;
    left: -0.2%;
    width: 100%;
}
#neonheart {
    width: 158%;
    height: auto;
    position: absolute;
    right: -37%;
    bottom: 44%;
    z-index: 0;
}

.heart-container,
.new-image-container {
    position: absolute;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.heart,
.new-image-container img {
    width: 100%; /* Ensure heart fills container */
    height: auto;
    transition: all 0.3s ease; /* Adjust transition speed */
    opacity: 1;
    z-index:3;
}
/* Adjustments for hover effect if needed */
.heart:hover {
    transform: scale(1.1); /* Example of scaling effect on hover */
}
.glow-red {
    animation: pulseGlowRed 3s infinite;
}

.glow-white {
    animation: pulseGlowWhite 3s infinite;
}
.glow-purple {
    animation: pulseGlowPurple 3s infinite;
}
/* Define other glow animations as needed */

@keyframes pulseGlowRed {
    0% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(255, 0, 0, 1));
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
        opacity: 0.8;
    }
}

@keyframes pulseGlowWhite {
    0% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 1));
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
        opacity: 0.8;
    }
}

@keyframes pulseGlowPurple {
    0% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 40px rgba(84, 36, 88, 0.8));
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(120, 72, 124, 1));
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 40px rgba(84, 36, 88, 0.8));
        opacity: 0.8;
    }
}
/* Add other styles for different effects */
.heart1 {
    top: 3%;
    position: relative;
    width: 81%;
    left: -5px;
}
.heart3 {
    top: 2%;
    position: relative;
    width: 84%;
}
.heart5 {
    top: 1%;
    position: relative;
    width: 83%;
}
.heart6 {
    top: 3%;
    position: relative;
    width: 79%;
}

.heart10 {
    top: 3%;
    position: relative;
    width: 95%;
}
.heart12 {
    top: 1%;
    position: relative;
    width: 100%;
}


.button-container {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 6;
    left: 25%;
    top: 24%;
}

.button-left,
.button-right {
    position: absolute;
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}
.banner-bw-button-layer-left,
.banner-bw-button-layer-right {
    position: absolute;
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}
.button-left {
    left: 0;
    background: #ededed;

    border-radius: 15% 15% 40% 40%;
}
.button-right {
    right: 0;
    background: #000;
    color: #fff;
    border-radius: 15% 40% 15% 15%;
}
.button-left:focus,
.button-right:focus {
    outline: none;
}
.letter-spacing-3 {
    letter-spacing: 0.3vw;
}
.word {
    font-family: 'Dosis', sans-serif;
    perspective: 1000px;
}
.word1 {
    opacity: 0.95;
    position: absolute;
    top: 18%;
    left: 20%;
}
.word2 {
    opacity: 0.75;
    position: absolute;
    top: 50%;
    left: 17%;
}
.word1 span {
    text-shadow: 0 2.5vw 0.3vw rgba(0, 0, 0, 0.15)
}
.word2 span {
    text-shadow: 0 -2.5vw 0.3vw rgba(255, 255, 255, 0.4)
}
.unlock {
    left: 36%;
    position: relative;
    top: 12%;
    font-weight: 400;
}
.clickto {
    position: relative;
    top: 80%;
    left: 33.5%;
    font-weight: 500;
}
.word span {
    cursor: pointer;
    display: inline-block;
    font-size: 3vw;
    user-select: none;
    line-height: .8;
    letter-spacing: 0.3vw;
}
.word span:nth-child(6).active {
    animation: balance 1.5s ease-out;
    transform-origin: top left;
}
.word span:nth-child(1).active {
    animation: oppositebalance 1.5s ease-out;
    transform-origin: top right;
}
@keyframes oppositebalance {
    0%, 100% {
        transform: rotate(0deg);
    }

    30%, 60% {
        transform: rotate(45deg);
    }
}
@keyframes balance {
    0%, 100% {
        transform: rotate(0deg);
    }

    30%, 60% {
        transform: rotate(-45deg);
    }
}

.word span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}

@keyframes shrinkjump {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%, 50% {
        transform: scale(1) translate(0, -150px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}
.word span:nth-child(5).active {
    animation: shrinkjumpbottom 1s ease-in-out;
    transform-origin: bottom center;
}
@keyframes shrinkjumpbottom {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%, 50% {
        transform: scale(1) translate(0, 50px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}
.word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}

@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }

    24% {
        transform: rotateX(150deg);
    }

    36% {
        transform: rotateX(200deg);
    }

    48% {
        transform: rotateX(175deg);
    }

    60%, 85% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

.word span:nth-child(4).active {
    animation: rotate 1s ease-out;
}

@keyframes rotate {
    20%, 80% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.word span:nth-child(7).active {
    animation: toplong 1.5s linear;
}

@keyframes toplong {
    10%, 40% {
        transform: translateY(-48vh) scaleY(1);
    }

    90% {
        transform: translateY(-48vh) scaleY(4);
    }
}
.fixed {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}
.element {
    transition: border-radius 2s ease-out, box-shadow 2s ease-out;
    cursor: pointer; /* Make the cursor a pointer to indicate clickability */
}
.text-element {
    transition: width 2s ease-out, height 2s ease-out;
}
.text-zero {
    transition: font-size 0.3s ease-out;
}
.text-full {
    transition: font-size 1.5s ease-out;
}
.resize-buttons-container {
    width: 10%;
    height: 10%;
}
.changed-border-radius-1 {
    border-radius: 3vw 7vw 7vw 3vw;
}

.changed-border-radius-2 {
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 6px 6px 16px #333, 6px 6px 16px #35353500
}
.font-zero {
    font-size: 0 !important;
}
.font-full {
    font-size: 2vw !important;
}
.buttons-container-move {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.toggle-visibility {
    transition: visibility 0.1s ease-out, opacity 1s ease-out;
}
.move-buttons-container {
    left: 45%;
    top: 45%;
    visibility: hidden;
    opacity: 0;
}
.move-word1 {
    top: 39%;
    left: 27%;
}
.button-visible1 {
    visibility: visible !important;
    opacity: 1 !important;
}
.button-invisible1 {
    visibility: hidden !important;
    opacity: 0 !important;
}
.button-invisible2 {
    visibility: hidden !important;
    opacity: 0 !important;
}
.button-visible2 {
    visibility: visible !important;
    opacity: 1 !important;
}
.move-word2 {
    top: 37%;
    left: 17%;
}
.word-move1 {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.word-move2 {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.button-left svg {
    top: 25%;
    position: absolute;
    left: 27%;
    color: initial;
    height: 1.5vw;
    width: 1.5vw;
}
.button-right svg {
    top: 25%;
    position: absolute;
    left: 30%;
    height: 1.5vw;
    width: 1.5vw;
}
.button-white-icon {
    visibility: hidden;
    opacity: 0;
}
.button-black-icon {
    visibility: hidden;
    opacity: 0;
}
.brain-card {
    height: 35vw;
}
.bottomtext-brain-left {
    position: relative;
    right: -20%;
}
.bottomtext-brain-right {
    position: relative;
    left: 27%;
}
.cardbody-brain {
    height: 35vw;
}
#textzero14 {
    top: 73%;
    width: fit-content;
}
#textzero15 {
    top: 10%;
    width: fit-content;
}
.js-scrolling__page-1 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 90.1%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    visibility: hidden;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-1 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-2 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-2 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-3 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-3 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-4 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-4 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-5 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-5 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-6 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-6 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-7 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-7 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-8 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-8 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-9 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-9 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-10 .button-white {
    height: 8%;
    width: 8%;
    top: 46%;
    left: 92%;
    z-index: 1;
    border-radius: 3vw 7vw 7vw 3vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #b1b1b1b5, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-10 .button-black {
    height: 8%;
    width: 8%;
    left: -1px;
    top: 46%;
    z-index: 1;
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 0.1vw 0.1vw 0.2vw #333, 0.1vw 0.1vw 0.2vw #35353500;
    visibility: hidden;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


.slider-pages {
    overflow: hidden;
    position: relative;
    height: 35vw;
}

.slider-page {
    position: absolute;
    top: 0;
    width: 50%;
    height: 35vw;
    transition: transform 1350ms;
}

.slider-page--skew {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #282828;
    transform: skewX(0deg);
}

.slider-page--left {
    left: 0;
    transform: translateX(-32.5vh) translateY(101%) translateZ(0);
}

.slider-page--left .slider-page--skew {
    left: 0;
}

.slider-page--left .slider-page__content {
    padding: 4%;
    transform-origin: 100% 0;
}

.slider-page--right {
    left: 50%;
    transform: translateX(32.5vh) translateY(-101%) translateZ(0);
}

.slider-page--right .slider-page--skew {
    right: 0;
}

.slider-page--right .slider-page__content {
    padding: 4%;
    transform-origin: 0 100%;
}

.slider-page__content {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #e2e2e2;
    background-size: cover;
    transform: skewX(0deg);
    transition: transform 1350ms;
    background-color: #ededed;
    z-index: 1;
}

.slider-page__title {
    margin-bottom: 1em;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
}

.slider-page__title--big {
    font-size: 1.2em;
}

.slider-page__description {
    font-size: 1em;
    text-align: center;
}

.slider-page__link {
    color: #80a1c1;
}

.slider-page__link:hover,
.slider-page__link:focus {
    color: #6386a9;
    text-decoration: none;
}

/***********************
 *	Project JS Styles
 **********************/
.js-scrolling__page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}

.js-scrolling--active .slider-page {
    transform: translateX(0) translateY(0) translateZ(0);
    box-shadow: 1vw 1vw 3vw #333;
}

.js-scrolling--inactive .slider-page__content {
    transform: skewX(0deg) scale(0.9);
}

.js-scrolling__page-1 .slider-page--left .slider-page__content {
    background-image: none;

}

.js-scrolling__page-1 .slider-page--right .slider-page__content {
    background-color: #131419;
    z-index: 0;
}

.js-scrolling__page-2 .slider-page--left .slider-page__content {
    background-color: #7f9db7;
}

.js-scrolling__page-2 .slider-page--right .slider-page__content {
    background-image: url("/assets/images/brain-banner/codelaravel1.jpeg");
}

.js-scrolling__page-3 .slider-page--left .slider-page__content {
    background-image: url("/assets/images/brain-banner/ai3.jpeg");
}
.js-scrolling__page-3 .slider-page--right .slider-page__content {
    background-color: #081526;
}
.js-scrolling__page-4 .slider-page--right .slider-page__content {
    background-image: url("/assets/images/brain-banner/design3.jpeg");
}

.js-scrolling__page-5 .slider-page--left .slider-page__content {
    background-image: url("/assets/images/brain-banner/internetlaw4.jpeg");
}
.js-scrolling__page-5 .slider-page--right .slider-page__content {
    background-color: #887056;
}
.js-scrolling__page-6 .slider-page--left .slider-page__content {
    background-color: #bbcdd7;
}
.js-scrolling__page-6 .slider-page--right .slider-page__content {
    background-image: url("/assets/images/brain-banner/teach2.jpeg");
}
.js-scrolling__page-7 .slider-page--left .slider-page__content {
    background-image: url("/assets/images/brain-banner/teachbuzeng3.jpeg");
}
.js-scrolling__page-7 .slider-page--right .slider-page__content {
    background-color: #8b9da8;
}
.js-scrolling__page-8 .slider-page--right .slider-page__content {
    background-image: url("/assets/images/brain-banner/crypto3.jpeg");
}
.js-scrolling__page-8 .slider-page--left .slider-page__content {
    background-color: #f0eada;
}
.js-scrolling__page-9 .slider-page--left .slider-page__content {
    background-image: url("/assets/images/brain-banner/programming1.jpeg");
}
.js-scrolling__page-9 .slider-page--right .slider-page__content {
    background-color: #5a5964;
}

.js-scrolling__page-10 .slider-page--right .slider-page__content {
    background-image: url("/assets/images/brain-banner/diskdbencryption4.jpeg");
}
.js-scrolling__page-10 .slider-page--left .slider-page__content {
    background-color: #d0f1f5;
}

.text-left-slide1 {
    right: 1%;
    position: relative;
}
/* Hide all text by default */
.js-scrolling__page .toptext-brain,
.js-scrolling__page .middletext-brain,
.js-scrolling__page .bottomtext-brain {
    display: none;
}

/* Show text only in the active article */
.js-scrolling--active .toptext-brain,
.js-scrolling--active .middletext-brain {
    display: block;
}
.js-scrolling--active .bottomtext-brain {
    display: inline-flex;
}
/* Hide text in the inactive article */
.js-scrolling--inactive .toptext-brain,
.js-scrolling--inactive .middletext-brain,
.js-scrolling--inactive .bottomtext-brain {
    display: none;
}
.glassmorphism-effect {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect2 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(151, 151, 151, 0.37) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect3 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(138, 113, 98, 0.37) !important
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect4 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(91, 139, 168, 0.37) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect5 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(72, 75, 115, 0.37) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect6 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgb(16, 45, 89) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect7 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 125, 135, 0.37) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect8 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgba(203, 179, 135, 0.31) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
.glassmorphism-effect9 {
    background: rgba( 255, 255, 255, 0.10 ) !important;
    box-shadow: 0 8px 32px 0 rgb(45, 47, 48) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}


#glassdiv {
    height: 100%;
    overflow: auto;
    margin-bottom: 0;
}
.glassdiv1 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv2 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv3 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv4 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv5 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
    font-weight: 500;
    text-shadow: 0.25vh 0 white;
}
.glassdiv6 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv7 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv8 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv9 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv10 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv11 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv12 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv13 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv14 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv15 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv16 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv17 {
    text-align: right;
    padding: 2vh 2vw 2vh 2vw;
}
.glassdiv18 {
    text-align: left;
    padding: 2vh 2vw 2vh 2vw;
}
.slide-section-title {
    margin-top: 5vw;
    font-size: 1vw;
}
.slide-section-description {
    font-size: 0.85vw;
}
.we {
    position: relative;
    right: 3.7vw;
}
.do {
    position: relative;
    left: 3vw;
}
#animation-surface {
    z-index: -1;
}
.js-scrolling__page-4 .bgimage {
    opacity: 0.5;
    z-index: -1;
}
.js-scrolling__page-2 .toptext-brain, .js-scrolling__page-4 .toptext-brain, .js-scrolling__page-6 .toptext-brain, .js-scrolling__page-8 .toptext-brain, .js-scrolling__page-10 .toptext-brain {
    top: -1.5vh;
    width: 100%;
    position: absolute;
    left: 0;
}

.js-scrolling__page-2 .do, .js-scrolling__page-3 .do, .js-scrolling__page-4 .do, .js-scrolling__page-5 .do, .js-scrolling__page-6 .do, .js-scrolling__page-7 .do, .js-scrolling__page-8 .do, .js-scrolling__page-9 .do, .js-scrolling__page-10 .do {
    left: -1.5vw;
}
.js-scrolling__page-3 .toptext-brain, .js-scrolling__page-5 .toptext-brain, .js-scrolling__page-7 .toptext-brain, .js-scrolling__page-9 .toptext-brain {
    top: -1.5vh;
    left: 5.5vw;
    position: absolute;
    width: auto;
}

.js-scrolling__page-2 .slide-section-description, .js-scrolling__page-2 .we {
    color: #0e306e;
}
.js-scrolling__page-3 .slide-section-title, .js-scrolling__page-3 .we {
    color: #0070ff;
}
.js-scrolling__page-4 .slide-section-title, .js-scrolling__page-4 .do {
    color: #6b2ddf;
}
.js-scrolling__page-5 .slide-section-title, .js-scrolling__page-5 .we {
    color: #53362d;
}
.js-scrolling__page-6 .slide-section-description, .js-scrolling__page-6 .we {
    color: #2477bf;
}
.js-scrolling__page-6 .slide-section-title, .js-scrolling__page-6 .do {
    color: #fff;
}
.js-scrolling__page-7 .slide-section-title, .js-scrolling__page-7 .we {
    color: #fff;
}
.js-scrolling__page-7 .slide-section-description, .js-scrolling__page-7 .do {
    color: #334d67;
}
.js-scrolling__page-8 .slide-section-title, .js-scrolling__page-8 .we {
    color: #a36a43;
}
.js-scrolling__page-9 .slide-section-description, .js-scrolling__page-9 .we {
    color: #fff;
}
.js-scrolling__page-10 .slide-section-description, .js-scrolling__page-10 .we {
    color: #1a69a3;
}
.js-scrolling__page-2 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #0e306e9e, 0.1vw 0.1vw 0.2vw #0e306e69;
    color: #0e306e;
}
.js-scrolling__page-2 .button-left svg {
    color: #0e306e;
}
.js-scrolling__page-2 .button-right {
    background-color: #0e306e;
    box-shadow: 0.1vw 0.1vw 0.2vw #27274a, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-3 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #0070ff42, 0.1vw 0.1vw 0.2vw #0070ff47;
    color: #0070ff;
}
.js-scrolling__page-3 .button-left svg {
    color: #0070ff;
}
.js-scrolling__page-3 .button-right {
    box-shadow: 0 0.2vw 0.5vw 0 rgb(16, 45, 89);
    background-color: #0070ff;
}
.js-scrolling__page-4 .button-left {
    color: #6b2ddf;
}
.js-scrolling__page-4 .button-left svg {
    color: #6b2ddf;
}
.js-scrolling__page-4 .button-right {
    background-color: #6b2ddf;
}
.js-scrolling__page-5 .button-left {
    color: #53362d;
    box-shadow: 0.1vw 0.1vw 0.2vw #5a59bf, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-5 .button-left svg {
    color: #53362d;
}
.js-scrolling__page-5 .button-right {
    background-color: #53362d;
    box-shadow: 0.1vw 0.1vw 0.2vw #bba982, 0.1vw 0.1vw 0.2vw #35353500;
}
.js-scrolling__page-5 .button-left svg {
    color: #53362d;
}
.js-scrolling__page-6 .button-left svg {
    color: #2477bf;
}
.js-scrolling__page-6 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #99ccf794, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-6 .button-right {
    background-color: #2477bf;
}
.js-scrolling__page-7 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #334d67, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-7 .button-left svg {
    color: #334d67;
}
.js-scrolling__page-7 .button-right {
    background-color: #334d67;
    box-shadow: 0.1vw 0.1vw 0.2vw #b9c9d654, 0.1vw 0.1vw 0.2vw #b3b3b366;
}

.js-scrolling__page-8 .button-left svg {
    color: #a36a43;
}
.js-scrolling__page-8 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #cfaf98, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-8 .button-right {
    background-color: #a36a43;
    box-shadow: 0.1vw 0.1vw 0.2vw #b9c9d654, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-9 .button-left svg {
    color: #5a5964;
}
.js-scrolling__page-9 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #000000, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-9 .button-right {

}
.js-scrolling__page-10 .button-left svg {
    color: #1a69a3;
}
.js-scrolling__page-10 .button-left {
    box-shadow: 0.1vw 0.1vw 0.2vw #b9c9d654, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
.js-scrolling__page-10 .button-right {
    box-shadow: 0.1vw 0.1vw 0.2vw #b9c9d654, 0.1vw 0.1vw 0.2vw #b3b3b366;
}
#neural {
    position: absolute;
    left: -50%;
    top: -20%;
    width: 200%;
    height: 150%;
    background-color: transparent;
}