.bg-image {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.recentcomments a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.custom-background { 
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

.font-family h1, .font-family h2, .font-family h3, .font-family h4, .font-family h5, .font-family h6, .font-family .h1, .font-family .h2, .font-family .h3, .font-family .h4, .font-family .h5, .font-family .h6, .font-family .navbar-nav, .menu-mobile a, .u-breadcrumb .breadcrumb-item, .post-content .tags-list li:first-child {
    font-family: 'Roboto', sans-serif;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.full-width {
    background: #ffffff !important;
}

.dark-skin.full-width {
    background: #1b1b1b !important;
}

.primary {
    color: #F68121; /*#6610f2*/
}

.center-backline:before, .center-backline-lg:before, .title-arrow:before {
    background-color: #F68121 !important;
}

.bg-primary, .progress-bar, .badge-primary {
    background-color: #F68121 !important;
}

.box-title:before {
    border-top-color: #F68121;
}

.badge-primary {
    color: #ffffff !important;
}

.fa-stack-sea {
    border: #F68121 3px solid;
}

.form-control:focus {
    border-color: #F68121; /*#F68121*/
}

.hover-a:hover .fa-play-circle {
    background: #F68121; /*#F68121*/
    border: #F68121 2px solid;
}

.page-link, .btn-link {
    color: #F68121; /*#F68121*/
}

a:hover {
    color: #F68121;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover {
    color: #F68121;
}

.hover-a:hover h1 > a, .hover-a:hover h2 > a, .hover-a:hover h3 > a, .hover-a:hover h4 > a, .hover-a:hover h5 > a, .hover-a:hover h6 > a, .hover-a:hover .h1 > a, .hover-a:hover .h2 > a, .hover-a:hover .h3 > a, .hover-a:hover .h4 > a, .hover-a:hover .h5 > a, .hover-a:hover .h6 > a, .hover-a:hover p > a, .prev-post-start a:hover, .next-post-end a:hover {
    color: #F68121;
}

.nav-tabs .nav-link.active, .sidenav-menu .dropdown a.show {
    color: #F68121;
}

.nav-tabs .nav-item.show .nav-link {
    color: #F68121;
}

.navbar-nav .dropdown-item:hover, #main-menu .vertical-tabs .nav-tabs .nav-link.active, .dropdown-item.active, .dropdown-item:active, a {
    color: #F68121;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-nav .dropdown-item:hover, .text-primary {
    color: #F68121 !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .custom-range::-ms-thumb, .custom-range::-moz-range-thumb, .custom-range::-webkit-slider-thumb, .custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before, .dropdown-item.active, .dropdown-item:active {
    background-color: #F68121;
}

.dropdown-menu.mega .container, .dropdown-menu, .border-primary {
    border-color: #F68121 !important;
}

.list-group-item.active, .btn-outline-primary {
    color: #F68121;
    border-color: #F68121;
}

    .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .page-link:hover, .page-item.active .page-link, .btn-primary, .btn-outline-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        background-color: #F68121;
        border-color: #F68121;
    }

        .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
            opacity: .98;
        }

.page-link:hover {
    color: #fff;
}

.big-nav .list-group-item.active {
    color: #ffffff;
    background-color: #F68121;
    border-color: #F68121;
}

.big-nav.carousel-indicators li:hover {
    background-color: #F68121;
    color: #ffffff;
}

.hover-a li:hover a {
    color: #F68121;
}

.hover-a:hover a.h1, .hover-a:hover a.h2, .hover-a:hover a.h3, .hover-a:hover a.h4, .hover-a:hover a.h5, .hover-a:hover a.h6 {
    color: #F68121;
}

li:hover a.h5 {
    color: #F68121;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #ffffff;
    background-color: #F68121;
    border-color: #F68121;
}

.sidetabs .nav-link.active:hover {
    border-color: #F68121;
}

.card-list li:hover a {
    color: #F68121;
}

.nav-block-link li a.nav-link.active, .nav-block-link1 li a.nav-link.active, .nav-block-link2 li a.nav-link.active, .nav-block-link3 li a.nav-link.active, .nav-block-link4 li a.nav-link.active, .nav-block-link5 li a.nav-link.active, .nav-block-link6 li a.nav-link.active, .nav-block-link7 li a.nav-link.active, .nav-block-more li a.nav-link.active {
    color: #F68121 !important;
    background-color: transparent;
}

.nav-block-link li a.nav-link.active, .nav-block-link li a.nav-link:hover, .nav-block-link1 li a.nav-link.active, .nav-block-link1 li a.nav-link:hover, .nav-block-link2 li a.nav-link.active, .nav-block-link2 li a.nav-link:hover, .nav-block-link3 li a.nav-link.active, .nav-block-link3 li a.nav-link:hover, .nav-block-link4 li a.nav-link.active, .nav-block-link4 li a.nav-link:hover, .nav-block-link5 li a.nav-link.active, .nav-block-link5 li a.nav-link:hover, .nav-block-link6 li a.nav-link.active, .nav-block-link6 li a.nav-link:hover, .nav-block-link7 li a.nav-link.active, .nav-block-link7 li a.nav-link:hover, .nav-block-more li a.nav-link.active, .nav-block-more li a.nav-link:hover {
    color: #F68121;
}

.widget ol li a:hover, .widget ul li a:hover {
    color: #F68121;
}

.owl-carousel button.owl-dot.active {
    background: #F68121;
}

.suggestion-box {
    border-top: 4px solid #F68121;
}

.side-link li a:hover, .side-link li a.active, .sidebar-link li a:hover, .sidebar-link li a.active {
    background-color: transparent;
    color: #F68121;
}

.side-link li ul li a:hover, .sidebar-link li ul li a:hover {
    color: #F68121;
}

.side-link li a.caret-collapse, .sidebar-link li a.caret-collapse {
    color: #F68121;
}

    .side-link li a.caret-collapse.collapsed:hover, .sidebar-link li a.caret-collapse.collapsed:hover {
        color: #F68121;
    }

.post-number li:hover a::before {
    color: #F68121 !important;
}

.timeline-post > li a .timeline-date:hover, .timeline-post > li a .timeline-title:hover {
    color: #F68121 !important;
}

.hover-mode .main-nav li:hover > a {
    color: #F68121;
}

.sidenav-menu li.show > a.dropdown-toggle, .navbar-light .nav-item:hover > .nav-link {
    color: #F68121;
}

.timeline-post > li:hover:before {
    background: #F68121 !important;
}

.side-link li a.caret-collapse.collapsed, .sidebar-link li a.caret-collapse.collapsed {
    color: #161616;
}

.bg-secondary {
    background-color: #000000 !important;
}

.main-menu.navbar-dark .navbar-nav > .nav-item.active, .main-menu.navbar-dark .navbar-nav > .nav-item:hover {
    background: #F68121 !important;
}

.btn-secondary {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}

    .btn-secondary:hover {
        background-color: #000000;
        border-color: #000000;
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #000000;
        border-color: #000000;
    }

    .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: #000000;
        border-color: #000000;
    }

.btn-outline-secondary {
    color: #000000;
    border-color: #000000;
}

    .btn-outline-secondary:hover {
        background-color: #000000;
        border-color: #000000;
    }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: #000000;
    }

    .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-secondary.dropdown-toggle {
        background-color: #000000;
        border-color: #000000;
    }

.badge-secondary {
    color: #ffffff;
    background-color: #000000;
}

    .badge-secondary[href]:hover, .badge-secondary[href]:focus {
        color: #ffffff;
        background-color: #000000;
    }

.alert-secondary .alert-link {
    color: #000000;
}

.list-group-item-secondary {
    color: #000000;
}

    .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
        color: #000000;
    }

    .list-group-item-secondary.list-group-item-action.active {
        background-color: #000000;
        border-color: #000000;
    }

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #000000 !important;
}

.border-secondary {
    border-color: #000000 !important;
}

.text-secondary {
    color: #000000 !important;
}

.main-menu.navbar-dark .hover-a:hover .h1 > a, .main-menu.navbar-dark .hover-a:hover .h2 > a, .main-menu.navbar-dark .hover-a:hover .h3 > a, .main-menu.navbar-dark .hover-a:hover .h4 > a, .main-menu.navbar-dark .hover-a:hover .h5 > a, .main-menu.navbar-dark .hover-a:hover .h6 > a, .main-menu.navbar-dark .hover-a:hover h1 > a, .main-menu.navbar-dark .hover-a:hover h2 > a, .main-menu.navbar-dark .hover-a:hover h3 > a, .main-menu.navbar-dark .hover-a:hover h4 > a, .main-menu.navbar-dark .hover-a:hover h5 > a, .main-menu.navbar-dark .hover-a:hover h6 > a {
    color: #F68121 !important;
}

a.text-secondary:hover, a.text-secondary:focus {
    color: #000000 !important;
}

.main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    color: #F68121 !important;
}

.dark-skin .hover-a:hover .h1 > a, .dark-skin .hover-a:hover .h2 > a, .dark-skin .hover-a:hover .h3 > a, .dark-skin .hover-a:hover .h4 > a, .dark-skin .hover-a:hover .h5 > a, .dark-skin .hover-a:hover .h6 > a, .dark-skin .hover-a:hover h1 > a, .dark-skin .hover-a:hover h2 > a, .dark-skin .hover-a:hover h3 > a, .dark-skin .hover-a:hover h4 > a, .dark-skin .hover-a:hover h5 > a, .dark-skin .hover-a:hover h6 > a {
    color: #F68121 !important;
}

.dark-skin .side-link li a.active, .dark-skin .side-link li a.caret-collapse.collapsed.active, .dark-skin .side-link li a.caret-collapse.collapsed:hover, .dark-skin .side-link li a:hover, .dark-skin .sidebar-link li a.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed:hover, .dark-skin .sidebar-link li a:hover {
    color: #F68121;
}

.next-post-right a:hover, .prev-post-left a:hover, .footer-dark a:hover, .layout-dark a:hover, .dark-skin .next-post-right > a:hover, .dark-skin .prev-post-left > a:hover, .footer-dark a.btn:hover, .dark-skin a.btn-outline-light:hover strong {
    color: #F68121;
}

.footer-dark .widget ul li a:hover, .footer-dark .widget ol li a:hover {
    color: #F68121;
}

.btn-primary.disabled, .btn-primary:disabled, .btn-primary:hover {
    background-color: #F68121;
    border-color: #F68121;
}

.post-page blockquote, .u-blockquote, .wp-block-quote {
    border-left: 3px solid #F68121;
}

.tags-links a:hover {
    background-color: #F68121;
}

.bg-custom-footer {
    background-color: #31b1f9;
}

#showbacktop.bg-navcustom {
    background: #31b1f9 !important;
}

.main-menu.nav-custom.navbar-dark .dropdown-menu h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h3 > a, .main-menu.nav-custom.navbar-dark h4 > a, .main-menu.nav-custom.navbar-dark h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h6 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h3 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h4 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h6 > a {
    color: #23282d !important;
}

.main-menu.nav-custom.navbar-dark a.dropdown-item {
    color: #23282d !important;
}

.main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu {
    background-color: #fff;
}

    .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
        background: rgb(255, 255, 255);
    }

.nav-custom.navbar-dark .vertical-tabs {
    background: #f8f8f8;
    border-color: #f8f8f8;
}

.nav-custom.main-menu.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link {
    border-color: #f8f8f8;
}

.nav-custom.main-menu.navbar-dark .vertical-tabs a {
    color: #495057 !important;
}

.main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link.active, .main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link:hover {
    border-color: #fff;
    background-color: #fff !important;
}

.bg-navcustom {
    background: #31b1f9 !important;
}

.taxonomy-description {
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    text-align: center;
}

.mobile-nav-custom img {
    max-width: 200px
}

.wp-block-embed.is-type-video {
    width: 100%;
}

.wp-block-embed iframe {
    max-width: 100%;
}

.wp-block-table table {
    border: #dee2e6 1px solid;
}

    .wp-block-table table tr, .wp-block-table table th, .wp-block-table table td {
        border: #dee2e6 1px solid;
    }

.post-content img {
    height: auto;
}

@media (min-width: 992px) {
    #showbacktop.bg-navcustom.is-visible {
        background: #31b1f9 !important;
    }

    .nav-custom.navbar-dark .hover-mode li:hover > a {
        background: #fff !important;
    }

    .mobile-nav-custom, .mobile-nav-custom img {
        max-width: 0;
        display: none;
    }

    .post-content .wp-block-embed {
        padding-bottom: 46.25%;
    }
}

@media (min-width: 992px) {
    .main-menu.navbar-dark .hover-mode .main-nav > li:hover > a, .main-menu.navbar-dark .hover-mode .main-nav > li > a.active {
        background-color: #F68121 !important;
    }

    .main-menu.navbar-dark .hover-mode .main-nav li:hover > a {
        color: #F68121 !important;
    }

    .main-menu.navbar-dark .hover-mode .main-nav > li:hover > a {
        color: #fff !important;
    }

    .logo-full .main-logo img {
        max-width: 25rem;
    }

    .search-top-right, .social-top-left {
        top: 50%;
        margin-top: -23px;
        position: absolute;
    }

    #showbacktop .logo-showbacktop.still-show {
        display: block;
    }

        #showbacktop .logo-showbacktop.still-show img {
            max-height: 2.3rem;
            margin-right: 1rem;
            display: block;
        }

    #showbacktop.is-visible .logo-showbacktop.still-show {
        display: none;
        height: 0;
    }
}


@media (min-width: 768px) {
    .grid-six .image {
        width: 70%;
    }

    .grid-six .caption {
        position: absolute;
        width: 50%;
        top: 50%;
        right: 0;
        padding: 2rem;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

.six-box-box {
    padding-left: .875rem;
    padding-right: .875rem
}

@media (max-width: 991.98px) {
    .admin-bar .mobile-sticky.is-sticky {
        top: 30px;
        z-index: 1000;
    }
}

@media (max-width: 400px) {
    .top-space {
        top: 20%;
    }
}



/* ================================================================
   1.  (Light Theme)
   ================================================================= */
:root {
    --bg-body: #ffffff;
    --bg-nav: #ffffff;
    --bg-card: #F0F0F0;
    --bg-dark-card: #1b1b1b;
    --text-primary: #2c3e50;
    --text-secondary: #000000;
    --text-muted: #6c757d;
    --clr-main: #F68121;
    --border-light: #e0dfdf;
    --btn-bg: #333333;
    --btn-text: #f0f0f0;
    --bs-primary: #F68121;
}

/* ================================================================
   2.   (Dark Theme)
   ================================================================= */
.dark-mode {
    --bg-body: #242526;
    --bg-nav: #242526;
    --bg-card: #242526;
    --bg-dark-card: #1b1b1b;
    --text-primary: #e4e6eb;
    --text-secondary: #c9ccd1;
    --text-muted: #8b929a;
    --clr-main: #F68121;
    --border-light: #3a3b3c;
    --btn-bg: #3a3b3c;
    --btn-text: #e4e6eb;
    --bs-body-bg: #242526;
    --bs-body-color: #e4e6eb;
    --bs-primary: #F68121;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: "Open Sans", sans-serif;
    transition: background-color .3s, color .3s;
}

html {
    background: var(--bg-body);
}

.full-width {
    background: var(--bg-card) !important;
}

.dark-skin.full-width {
    background: var(--bg-dark-card) !important;
}

.center-backline:before,
.center-backline-lg:before,
.title-arrow:before,
.bg-primary,
.progress-bar,
.badge-primary {
    background-color: var(--clr-main) !important;
}

.badge-primary {
    color: #fff !important;
}

.fa-stack-sea {
    border: var(--clr-main) 3px solid;
}

.form-control:focus {
    border-color: var(--clr-main);
}

.page-link,
.btn-link {
    color: var(--clr-main);
}

a:hover,
h1 > a:hover, h2 > a:hover, h3 > a:hover,
h4 > a:hover, h5 > a:hover, h6 > a:hover,
.hover-a:hover h1 > a, .hover-a:hover h2 > a, .hover-a:hover h3 > a {
    color: var(--clr-main);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--clr-main);
    border-color: var(--clr-main);
}

.btn-submit,
.btn-primary {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-text);
    transition: background-color .3s, color .3s, border-color .3s;
}

    .btn-submit:hover,
    .btn-primary:hover {
        opacity: .98;
    }

.border-primary {
    border-color: var(--clr-main) !important;
}

.list-group-item.active,
.btn-outline-primary {
    color: var(--clr-main);
    border-color: var(--clr-main);
}

    .btn-outline-primary:hover,
    .page-item.active .page-link,
    .page-link:hover {
        background-color: var(--clr-main);
        border-color: var(--clr-main);
        color: #fff;
    }

.dark-mode .full-width,
.dark-mode .container,
.dark-mode main,
.dark-mode .bg-image {
    background: var(--bg-body) !important;
}

.dark-mode,
.dark-mode html,
.dark-mode body,
.dark-mode .page-wrapper,
.dark-mode .site,
.dark-mode .wrapper,
.dark-mode .full-width,
.dark-mode .container-fluid {
    background: var(--bg-body) !important;
}

    .dark-mode .container,
    .dark-mode .container-lg,
    .dark-mode .container-md,
    .dark-mode .container-sm,
    .dark-mode .container-xl {
        background: transparent !important;
    }

.card,
.table,
.btn,
.form-control {
    transition: background-color .3s, color .3s, border-color .3s;
}

.image-box {
    height: 238px;
}

.x-card {
    height: 100px;
}

@media (max-width: 730px) {
    .image-box {
        height: 150px;
    }

    .x-card {
        height: 80px;
    }
}

#sid-menu .navbar-nav li a {
    font-weight: 500;
    padding: 10px 16px;
    color: var(--text-primary);
}

#sid-menu .navbar-nav .dropdown-menu {
    border-radius: 0;
    border: none;
    margin-top: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

#sid-menu .dropdown-toggle::after {
    content: " ▾";
    font-size: 10px;
    margin-left: 4px;
}

#sid-menu .dropdown-toggle1::after {
    content: "";
    font-size: 10px;
    margin-left: 4px;
}

@media (max-width: 991.98px) {
    #sid-menu .accordion-button {
        font-weight: bold;
    }

        #sid-menu .accordion-button::after {
            background-image: none;
            font-size: 20px;
            float: right;
        }

    #sid-menu .accordion-button-arrow::after {
        content: " ▾";
    }

    #sid-menu .accordion-button-arrow:not(.collapsed)::after {
        content: " ▴";
    }

    #sid-menu .accordion-button-arrow-1::after {
        content: "";
    }

    #sid-menu .accordion-button-arrow-1:not(.collapsed)::after {
        content: "";
    }

    #sid-menu .accordion-body {
        padding-left: 1.5rem;
        margin-bottom: 0.5rem;
    }

    #sid-menu .accordion-item a.accordion-button {
        display: block;
        text-decoration: none;
        font-weight: normal;
        color: var(--text-primary);
    }

        #sid-menu .accordion-item a.accordion-button:hover {
            text-decoration: underline;
        }
}


#start-main .nav-link,
#start-main .dropdown-menu,
#start-main .dropdown-item {
    background-color: var(--bg-nav) !important;
    color: var(--text-primary) !important;
}

.sidenav-menu .accordion-item,
.sidenav-menu .accordion-button,
.sidenav-menu .accordion-body {
    background-color: var(--bg-nav) !important;
}

    .sidenav-menu .accordion-body .accordion-item,
    .sidenav-menu .accordion-body .accordion-button {
        background-color: var(--bg-nav) !important;
    }

#start-main .nav-link,
#start-main .dropdown-item,
.sidenav-menu .accordion-item,
.sidenav-menu .accordion-button,
.sidenav-menu .accordion-body {
    transition: background-color .3s;
}

    #start-main .nav-link:hover,
    #start-main .dropdown-item:hover,
    .sidenav-menu .accordion-button:hover {
        color: var(--clr-main);
    }

:root.dark-mode #start-main .nav-link,
:root.dark-mode #start-main .dropdown-menu,
:root.dark-mode #start-main .dropdown-item,
:root.dark-mode .sidenav-menu .accordion-item,
:root.dark-mode .sidenav-menu .accordion-button,
:root.dark-mode .sidenav-menu .accordion-body {
    background-color: var(--bg-nav) !important;
}

.logo-sidenav {
    position: sticky;
    top: 0;
    background-color: var(--bg-nav);
    z-index: 1000000000;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidenav-menu {
    overflow-y: auto;
    max-height: 80vh;
}

.comment-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.comment-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.2s;
    border: 1px solid #e9ecef;
}

    .comment-box:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

.user-avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: 600;
    font-size: .85rem;
    color: #fff;
    text-align: center;
    user-select: none;
    background: var(--av-color, #0d6efd);
    border: 3px solid var(--av-color, #0d6efd);
}

.comment-input {
    border-radius: 20px;
    padding: 15px 20px;
    border: 2px solid #e9ecef;
    transition: all 0.3s;
}

    .comment-input:focus {
        box-shadow: none;
        border-color: #86b7fe;
    }

.btn-comment {
    border-radius: 20px;
    padding: 8px 25px;
    background: #0d6efd;
    border: none;
    transition: all 0.3s;
}

    .btn-comment:hover {
        background: #0b5ed7;
        transform: translateY(-1px);
    }

.comment-actions {
    font-size: 0.9rem;
}

    .comment-actions a {
        color: #6c757d;
        text-decoration: none;
        margin-right: 15px;
        transition: color 0.2s;
    }

        .comment-actions a:hover {
            color: #0d6efd;
        }

.comment-time {
    color: #adb5bd;
    font-size: 0.85rem;
}

.reply-section {
    margin-left: 60px;
    border-left: 2px solid #e9ecef;
    padding-left: 20px;
}

.reply-section {
    border-left-color: #ced4da;
}

    .reply-section .reply-section {
        border-left-color: #adb5bd;
    }

        .reply-section .reply-section .reply-section {
            border-left-color: #868e96;
        }

.comment-section,
.comment-box {
    background: var(--bg-card) !important;
}

.dark-mode .comment-section,
.dark-mode .comment-box {
    background: var(--bg-dark-card) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dark-mode .showbacktop,
.dark-mode .mobile-side,
.dark-mode .mobile-menu,
.dark-mode .dropdown-menu,
.dark-mode .dropdown-menu .active,
.dark-mode .container,
.dark-mode .container-sm,
.dark-mode .container-md,
.dark-mode .container-lg,
.dark-mode .container-xl {
    background: var(--bg-card) !important;
}

.dark-mode .inside-text * {
    color: var(--text-light) !important;
}

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

.top-menu.bg-white {
    background: var(--bg-nav) !important;
}

.top-menu.bg-white {
    background: var(--bg-nav) !important;
}

.logo-sidenav.bg-white {
    background: var(--bg-nav) !important;
}

.menu-mobile.bg-white {
    background: var(--bg-nav) !important;
}

.dark-mode .border-bottom,
.dark-mode .card-text,
.dark-mode .card-subtitle,
.dark-mode .text-muted {
    color: #aaaaaa !important;
}

.framed .wrapper,
.boxed .wrapper {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow-x: hidden;
}

.boxed,
.framed {
    background: var(--bg-body);
}

    .boxed.bg-repeat .wrapper,
    .boxed.bg-repeat2 .wrapper,
    .boxed.bg-repeat3 .wrapper,
    .framed.bg-repeat .wrapper,
    .framed.bg-repeat2 .wrapper,
    .framed.bg-repeat3 .wrapper {
        box-shadow: 0 0 3px var(--border-light);
    }

    .framed main,
    .framed .second-header,
    .framed .bg-nav-framed {
        background: rgba(255,255,255,.7);
    }

.dark-mode .framed main,
.dark-mode .framed .second-header,
.dark-mode .framed .bg-nav-framed {
    background: rgba(0,0,0,.25);
}

@media (max-width:575.98px) {
    .boxed .wrapper,
    .framed .wrapper {
        width: 100%;
    }
}

@media (min-width:768px) {
    .boxed .wrapper,
    .framed .wrapper {
        width: 90%;
    }

    .framed {
        padding: 15px 0;
    }
}

@media (min-width:1200px) {
    .boxed .wrapper,
    .framed .wrapper {
        width: 1200px;
    }

    .boxed .navbar,
    .framed .navbar {
        padding: .5rem 0;
    }
}

.dark-mode .boxed.bg-repeat .wrapper,
.dark-mode .boxed.bg-repeat2 .wrapper,
.dark-mode .boxed.bg-repeat3 .wrapper,
.dark-mode .framed.bg-repeat .wrapper,
.dark-mode .framed.bg-repeat2 .wrapper,
.dark-mode .framed.bg-repeat3 .wrapper {
    box-shadow: 0 0 3px #373737;
}


.theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: color .3s;
}

    .theme-toggle:hover {
        color: var(--clr-main);
    }

    .theme-toggle .icon {
        transition: transform .5s;
    }

.dark-mode .theme-toggle .icon {
    transform: rotate(360deg);
}

.navbar .nav-link,
.date-area,
.navbar .dropdown-toggle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.navbar-nav {
    flex-wrap: nowrap;
}



@media (max-width: 575.98px) {

    .navbar-nav {
        flex-wrap: nowrap !important;
        gap: .15rem;
    }

    .navbar .nav-link,
    .navbar .dropdown-toggle,
    .date-area {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 6rem;
        padding-inline: .35rem !important;
        font-size: .85rem;
    }

    .navbar .dropdown-menu {
        font-size: .85rem;
    }

    .navbar-nav .nav-link svg {
        font-size: 1.1rem;
    }

    .navbar-nav .nav-link span.visually-hidden {
        display: none;
    }
}

.mobile-sticky > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 991.98px) {
    .mobile-sticky > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
}