/*header*/    
    .navbar-custom {
        background-color: #000000;
    }

    .navbar-nav .nav-link {
        color: #fff !important;
    }

    .navbar-brand {
        color: #fff !important;
    }

    .btn-main-custom, .custom-play-btn {
        background-color: #7b2cff;
        color: #fff;
        border: none;
    }

    .custom-play-btn:hover,
    .custom-play-btn:focus,
    .custom-play-btn:active {
        background-color: #7b2cff !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .user-select-none {
        user-select: none;
    }

    .btn-main-custom:hover,
    .btn-main-custom:focus,
    .btn-main-custom:active {
        background-color: #7b2cff !important;
        color: #fff !important;
        box-shadow: none;
    }

    /* White hamburger icon */
    .custom-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    .custom-heading {
        color: #7b2cff;
    }

    .btn-custom {
        background-color: #000000; /* Set your preferred color */
        color: #FFFFFF;
        border: none;
        transition: none; /* Disable transitions if needed */
    }

    .btn-custom:hover,
    .btn-custom:focus,
    .btn-custom:active,
    .btn-custom:visited {
        background-color: #000000 !important;
        color: #FFFFFF !important;
        box-shadow: none;
        outline: none;
    }


    /*article section*/
    hr.custom-bg {
    height: 2px;
    border: none;
    background-color: #000; /* or use a color that matches your design */
    }

    @media (min-width: 576px) {
        .container {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }

    @media (min-width: 768px) {
        .container {
            padding-left: 2.5rem;
            padding-right: 2.5rem;
        }
    }

    @media (min-width: 1200px) {
        .container {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }

    /*sidebar*/
    .archive-box {
    background-color: #343a40;
    border: 1px solid #dee2e6;
    }
    .archive-box h4 {
        color: #FFFFFF;
    }

    .archive-link {
        font-weight: 500;
        font-size: 1rem;
        color: #FFFFFF;
        text-decoration: none;
        display: block;
        transition: color 0.2s ease-in-out;
    }

    .archive-link:hover {
        color: #7b2cff;
        text-decoration: underline;
    }
    .sticky-archive {
    position: sticky;
    top: 50px; /* adjust as needed */
    z-index: 100;
    }

    /*footer section*/
    .footer-custom {
        background-color: #000000;
        color: #FFFFFF;
    }