.dot {
            width: 10px;
            height: 10px;
            border-radius: 9999px;
            background-color: #d1d5db;
            /* light gray */
        }

        .dot.active {
            background-color: #1e1e3d;
            /* active color (dark/navy) */
        }

        #prevBtn.disabled,
        #nextBtn.disabled {
            opacity: 0.3;
            pointer-events: none;
        }

        #prevBtn,
        #nextBtn {
            user-select: none;
            -webkit-user-drag: none;
        }


        .imagedot {
            width: 10px;
            height: 10px;
            border-radius: 9999px;
            background-color: #d1d5db;
        }

        .imagedot.active {
            background-color: #1e1e3d;
        }

        #prevButton.disabled,
        #nextButton.disabled {
            opacity: 0.3;
            pointer-events: none;
        }

        #prevButton,
        #nextButton {
            user-select: none;
            -webkit-user-drag: none;
        }