@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9W8We57PyAGHY6fnElJlrbD1daHgv6kosPyCU1CKbqbYXYYExu_hh-h9GlNP4xG2y1Z7cGF3U7-IXv5rHWdvsmJaPFSDKcFKS8Eznk9Wg0W6yNtpIFvkbrxqliJdNXF_Ccx0QqmyNjjiKhMRY_EvAgCIBPE0zFO_rx2pBgcbIa4Q_8BVihRZHVIXn8TA/s16000/bg-nota4d.jpg);
}

.container {
    background-color: #002f31dc;
    border: 2px solid #009699;
    width: 45rem;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
    max-width: 100%;
    color: white;
}

.content {
    padding-inline: 1rem;
    text-align: justify;
}

h1 {
    color: yellow;
    font-size: x-large;
    font-weight: bold;
    text-shadow: 1px 1px 0px black;
}

p,
ul,
ol,
li {
    color: rgb(255, 255, 255);
    font-size: medium;
    font-weight: 400;
}

a {
    color: yellow;
    font-weight: bold;
}

.banner-promo {
    width: 100%;
    border-radius: 0.5rem;
}

.banner-promo img {
    width: 100%;
    max-height: 13vh;
    border-radius: 0.5rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.hot-info {
    background-color: black;
    /* color: rgb(206 206 206); */
    color: white;
    font-weight: 700;
}

.btn-row {
    margin-top: 0rem;
    margin-bottom: 1rem;
}

.btn {
    border: 2px solid white;
    color: white;
    font-weight: 700;
    width: 100%;
    font-size: 1rem;
    border-radius: 1cm;
    background: linear-gradient(150deg, #13262b 21%, #13262b 33%, #009699 44%, #13262b 60%, #13262b 73%, #13262b 85%);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    box-shadow: inset 0px 0px 8px black;
    text-shadow: 1px 1px black;
}

.btn:hover {
    border: 2px solid yellow;
    color: white;
    font-weight: 700;
    width: 100%;
    font-size: 1rem;
    border-radius: 1cm;
    background: none;
    background: linear-gradient(150deg, #009699, #009699, #009699);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    box-shadow: inset 0px 0px 10px black;
    text-shadow: none;
}

.img-sosmed {
    position: fixed;
    bottom: 50px;
    left: 5px;
    z-index: 99;
    opacity: 0.98;
    border-radius: 40px;
}

.image-promo {
    width: 100%;
    max-height: 27vh;
}

.image-promo:hover {
    border: 1px solid yellow;
}

.promo-content {
    border: 1px solid #009699;
}

.accordion-item {
    background-color: #0e707996;
    color: white;
    box-shadow: inset 0px 0px 25px black;
}

.accordion-body {
    padding: 1.5rem;
}

.footer {
    text-align: center;
    padding: 0.5rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 12px;
    text-transform: uppercase;
}

.img-sosmed {
    position: fixed;
    bottom: 50px;
    left: 5px;
    z-index: 99;
    opacity: 0.98;
    border-radius: 40px;
}

.chat-box,
.chat-room {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 100%;
    background-color: white;
    max-width: 350px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
    min-height: 500px;
}

.chat-header {
    background: #002f31;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.chat-body {
    padding: 10px;
    overflow-y: auto;
    height: 300px;
}

.chat-footer {
    padding: 10px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
}

.chat-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #bdffd5;
    color: green;
    border: 2px solid green;
    border-radius: 1cm;
    width: 15rem;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

/* Bubble Chat */
.bubble {
    padding: 10px;
    border-radius: 10px;
    max-width: 75%;
    display: inline-block;
    margin-bottom: 10px;
}

.bubble-admin {
    background: #009699;
    align-self: flex-start;
}

.bubble-user {
    background: #DCF8C6;
    align-self: flex-end;
    text-align: right;
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.chat-item:hover {
    background: #f8f9fa;
}

.chat-item img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.chat-content {
    display: flex;
    flex-direction: column;
}

.chat-room {
    height: 500px;
    display: none;
}

.btn1 {
    background-color: white;
    border: none;
    border-radius: 5px;
}

.btn2 {
    background-color: white;
    border: none;
    border-radius: 5px;
}

.btn-send {
    width: 100%;
    background-color: #002f31;
    border-radius: 1cm;
    height: 2.5rem;
    border: 2px solid white;
    color: white;
    font-weight: 700;
}

.text {
    color: black;
}

p .text-muted {
    color: black;
}

@media screen and (max-width: 480px) {
    body {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVY_kQGY-RkPf-GNNGNPBn3rJPtQtCBdGLMeHZMHHFXxXGuIEVq9jhbOPpLgRP3nJyI-XokGVg3Fk6Blxg9XONxLTg4oxz7BICte38Ct67m9Ovzc0aUHC9oxdlDTOWU9O67iRPzZP-S2N5vqMeZpujydJUdM_Qyvk9OCU_WSK-ujShAhyphenhyphen1_R9mar-wBu8/s16000/BACKGROUND%20NOTA4D%20MOBILE.jpg);
        background-size: contain;
        background-repeat: repeat;
        background-position: top center;
        background-attachment: scroll;
    }

    .container {
        background-color: #002f316e;
        border: 3px solid #009699;
        width: 45rem;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 1rem;
        max-width: 100%;
    }

    .accordion-item {
        background-color: #0e7079d8;
        color: white;
        box-shadow: inset 0px 0px 25px black;
    }

    .content {
        padding-inline: 0.5rem;
        padding-top: 3px;
        text-align: justify;
    }

    h1 {
        color: yellow;
        font-size: large;
        font-weight: bold;
        text-shadow: 1px 1px 0px black;
    }

    p,
    ul,
    ol,
    li {
        color: rgb(255, 255, 255);
        font-size: small;
        font-weight: 400;
    }

    .banner-promo {
        width: 100%;
        border-radius: 0.5rem;
    }

    .banner-promo img {
        width: 100%;
        max-height: 10vh;
        border-radius: 0.5rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .hot-info {
        background-color: black;
        color: white;
        font-weight: 700;
    }
    
    .btn-row {
        margin-top: 0rem;
        margin-bottom: 1rem;
    }

    .btn {
        background: linear-gradient(150deg, #13262b 21%, #13262b 33%, #009699 44%, #13262b 60%, #13262b 73%, #13262b 85%);
        border: 2px solid white;
        animation: gradient 10s ease infinite;
        color: white;
        font-weight: 700;
        width: 100%;
        font-size: .8rem;
        border-radius: 1cm;
        text-shadow: 1px 1px black;
        background-size: 400% 400%;
        box-shadow: inset 0px 0px 8px black;
    }

    .btn:hover {
        border: 2px solid white;
        color: white;
        font-weight: 700;
        width: 100%;
        font-size: .8rem;
        border-radius: 1cm;
        background: none;
        background: linear-gradient(150deg, #009699, #009699, #009699);
        background-size: 400% 400%;
        animation: gradient 10s ease infinite;
        box-shadow: inset 0px 0px 10px black;
        text-shadow: none;
    }

    .img-sosmed {
        position: fixed;
        bottom: 25px;
        left: 5px;
        z-index: 99;
        opacity: 0.98;
        border-radius: 40px;
    }
    
    .col-md-4:nth-child(6) {
        display: none;
    }

    .image-promo {
        width: 100%;
        max-height: 17vh;
    }

    .image-promo:hover {
        border: 1px solid white;
    }

    .promo-content {
        border: 1px solid #016d6e;
    }

    .accordion-item {
        background-color: #0e7079ad;
        color: white;
        box-shadow: inset 0px 0px 25px black;
    }

    .accordion-body {
        padding: 1.5rem;
    }

    .footer {
        text-align: center;
        padding: 0.5rem;
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .img-sosmed {
        position: fixed;
        bottom: 25px;
        left: 5px;
        z-index: 99;
        opacity: 0.98;
        border-radius: 40px;
    }
}