.container {
    max-width: 1280px;
    margin-top: 55px;

}

.container-xxl {
    max-width: 1280px;
    margin-top: 15px;
    max-width: 95%;
    /* box-shadow: -10px 0 10px rgb(163 3 3 / 10%); */
    background: border-box;
    box-shadow: aliceblue;
    display: flex;
    background-color: #020020;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgb(255 0 0 / 72%);
}

.caption {

    align-items: center;
    background-color: #008dff24;
    display: flex;
    z-index: 999;
    background-color: 008dff24;
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    background-color: #c7f19f2e;
    padding-left: 20px;
    color: rgb(0, 0, 0);
    padding-top: 10px;
    height: 70px;
    text-align: center;
    font-weight: 1000;
}

h7 {
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    background-color: #c7f19f2e;
    color: rgb(255 255 255);
    text-align: center;
    justify-content: center;
    height: 70px;
    font-weight: 600;
    align-items: center;
    font-size: 23px;
}

h4 {

    background-color: #c7f19f2e;
    color: rgb(255 255 255);
    padding-top: 5px;
    height: 70px;
    text-align: center;
    font-weight: 600;
}

.backbar {
    padding-top: 14px;
    border-right: 1px solid rgb(255, 5, 5);
    height: 60px;
    width: 60px;
    text-align: center;
}

.backbar li {
    list-style: none;
}



.bulb-two,
.bulb-one,
.bulb-three,
.bulb-four,
.bulb-fifth,
.bulb-sixth,
.bulb-seventh,
.bulb-eight,
.bulb-ninth,
.bulb-tenth,
.bulb-eleventh,
.bulb-twelveth,
.bulb-thirteen,
.bulb-fourteen,
.bulb-fifteen {
    border-radius: 50%;

    position: absolute;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    animation: colorCycle 6s infinite linear;
    /* change duration to control speed */
}

.bulb-one {
    height: 300px;
    width: 300px;
    margin-left: 28%;
    margin-top: 20%;
}

.bulb-two {
    height: 300px;
    width: 300px;
    margin-left: 43%;
    margin-top: 20%;
}

.bulb-three {
    height: 300px;
    width: 300px;
    margin-left: 35%;
    margin-top: 32%;
}

.bulb-four {
    height: 300px;
    width: 300px;
    margin-left: 28%;
    margin-top: 90%;
}

.bulb-fifth {
    height: 300px;
    width: 300px;
    margin-left: 43%;
    margin-top: 90%;
}

.bulb-sixth {
    height: 300px;
    width: 300px;
    margin-left: 35%;
    margin-top: 102%;
}

.bulb-eight,
.bulb-seventh,
.bulb-ninth,
.bulb-tenth,
.bulb-eleventh,
.bulb-twelveth,
.bulb-thirteen,
.bulb-fourteen,
.bulb-fifteen {
    height: 0;
    width: 0;
}

@keyframes colorCycle {
    0% {
        background: #ff009563;
    }

    /* red */
    20% {
        background: #76ff5aec;
    }

    /* yellow */
    25% {
        background: #9c8f02;
    }

    /* green */
    30% {
        background: #51aae5f0;
    }

    /* blue */
    40% {
        background: #e093ff;
    }

    /* purple */
}







.container-xxl .caption {
    gap: 50px;
    height: 100px;
    display: flex;
    align-items: center;

}

.topic-list {
    color: rgb(255, 255, 255);
    width: 100%;
    z-index: 999;
    background-color: 008dff24;
    backdrop-filter: blur(10px);

    flex-wrap: wrap;
}

.topic-list ul {
    list-style: none;
}

.first-list,
.second-list,
.third-list,
.fourth-list,
.fifth-list,
.sixth-list,
.seventh-list,
.eight-list,
.nineth-list {
    padding-left: 10px;
    padding-right: 35px;
    display: flex;
    padding-top: 40px;
    margin-bottom: 0px;
}

.first-list ul {
    width: 400px;
}

.first-list ul li {
    padding-left: 20px;
}



.second-list ul {
    width: 400px;
}

.second-list ul li {
    padding-left: 20px;
}



.third-list ul {
    width: 400px;
}

.third-list ul li {
    padding-left: 20px;
}



.fourth-list ul {
    width: 400px;
}

.fourth-list ul li {
    padding-left: 20px;
}

.fifth-list {
    display: flex;
    padding-top: 40px;
}

.fifth-list ul {
    width: 400px;
}

.fifth-list ul li {
    padding-left: 20px;
}



.sixth-list ul {
    width: 400px;
}

.sixth-list ul li {
    padding-left: 20px;
}



.seventh-list ul,
.eight-list ul,
.nineth-list ul {
    width: 400px;
}


.seventh-list ul li,
.eight-list ul li,
.nineth-list ul li {
    padding-left: 20px;
}



@media (min-width: 768px) {
    .container-xxl {
        height: 3350px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .container-xxl {
        height: auto;
        /* Fix height problem */
        background-size: cover;
        /* Better for mobile */
        padding: 10px;
        box-shadow: inset -1px 1px 20px 13px rgb(255 0 0 / 10%);
    }

    .topic-list {
        padding: 10px;
    }

    .first-list,
    .second-list,
    .third-list,
    .fourth-list,
    .fifth-list,
    .sixth-list,
    .seventh-list,
    .eight-list,
    .nineth-list {
        flex-direction: column;
        padding-left: 25px;
        padding-right: 55px;
        padding-top: 20px;
    }

    .first-list ul,
    .second-list ul,
    .third-list ul,
    .fourth-list ul,
    .fifth-list ul,
    .sixth-list ul,
    .seventh-list ul,
    .eight-list ul,
    .nineth-list ul {
        width: 100%;
        /* Full width on phone */
        margin-bottom: 20px;
    }

    .fourth {
        padding-top: 15px;
    }

    h1 {
        font-size: 22px;
        /* Smaller font for mobile */
    }



    h5 {
        font-size: 14px;
    }

    .bulb-one {
        margin-left: 10%;
        margin-top: 30%;
        height: 200px;
        width: 200px;
        border-radius: 90%;
        background-color: #ff009563;
        position: absolute;
    }

    .bulb-two {
        margin-left: 35%;
        margin-top: 30%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-three {
        margin-left: 23%;
        margin-top: 48%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-four {
        margin-left: 10%;
        margin-top: 130%;
        height: 200px;
        width: 200px;
        border-radius: 90%;
        background-color: #ff009563;
        position: absolute;
    }

    .bulb-fifth {
        margin-left: 35%;
        margin-top: 130%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-sixth {
        margin-left: 23%;
        margin-top: 145%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-seventh {
        margin-left: 10%;
        margin-top: 230%;
        height: 200px;
        width: 200px;
        border-radius: 90%;
        background-color: #ff009563;
        position: absolute;
    }

    .bulb-eight {
        margin-left: 35%;
        margin-top: 230%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-ninth {
        margin-left: 23%;
        margin-top: 245%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-tenth {
        margin-left: 10%;
        margin-top: 330%;
        height: 200px;
        width: 200px;
        border-radius: 90%;
        background-color: #ff009563;
        position: absolute;
    }

    .bulb-eleventh {
        margin-left: 35%;
        margin-top: 330%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-twelveth {
        margin-left: 23%;
        margin-top: 345%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-thirteen {
        margin-left: 10%;
        margin-top: 430%;
        height: 200px;
        width: 200px;
        border-radius: 90%;
        background-color: #ff009563;
        position: absolute;
    }

    .bulb-fourteen {
        margin-left: 35%;
        margin-top: 430%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }

    .bulb-fifteen {
        margin-left: 23%;
        margin-top: 445%;
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 90%;
    }
}

h5 {
    font-weight: 100;
}