.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: #0080C0;/*#6610f2*/
}

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

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

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

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

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

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

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

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

a:hover {
    color: #0080C0;
}

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: #0080C0;
}

.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: #0080C0;
}

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

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

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

.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: #0080C0 !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: #0080C0;
}

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

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

    .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: #0080C0;
        border-color: #0080C0;
    }

        .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: #0080C0;
    border-color: #0080C0;
}

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

.hover-a li:hover a {
    color: #0080C0;
}

.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: #0080C0;
}

li:hover a.h5 {
    color: #0080C0;
}

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

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

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

.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: #0080C0 !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: #0080C0;
}

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

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

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

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

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

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

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

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

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

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

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

.timeline-post > li:hover:before {
    background: #0080C0 !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: #0080C0 !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: #0080C0 !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: #0080C0 !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: #0080C0 !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: #0080C0;
}

.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: #0080C0;
}

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

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

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

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

.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: #0080C0 !important;
    }

    .main-menu.navbar-dark .hover-mode .main-nav li:hover > a {
        color: #0080C0 !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: #0080C0; 
    --border-light: #e0dfdf; 
    --btn-bg: #333333;
    --btn-text: #f0f0f0;
    --bs-primary: #0080C0;
}

/* ================================================================
   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: #0080C0;
    --border-light: #3a3b3c;
    --btn-bg: #3a3b3c;
    --btn-text: #e4e6eb; 
    --bs-body-bg: #242526;
    --bs-body-color: #e4e6eb;
    --bs-primary: #0080C0;
}
 
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;
    }
}

    html {
      font-size: 18px;
    } 

    .object-fit-cover {
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: block;
        }
    /* لضبط aspect-ratio للحاوية */
    .image-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

    .post-number {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .post-number li {
    align-items: flex-start;
   }

   .number-box {
  width: 2rem; /* حجم ثابت للرقم */
  text-align: center;
  font-size: 2.25rem;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.25);
  }

.title-box a {
  line-height: 1.6;
  display: block;
}

  /* صور وأبعاد */
  .image-box {
  height: 174px;
  }
  .x-card {
  height: 100px;
  }

@media (max-width: 730px) {
  .image-box {
    height: 150px;
  }
  .x-card {
    height: 80px;
  }
}
.ratio_115-100 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ratio_115-100 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: content;
}

:root {
  --clr-main1: #ffffff; /* اللون البرتقالي */
}

/* الوضع الافتراضي (موبايل): خلفية فاتحة ونص داكن */
.mobile-sticky {
  background-color: #fff;
  color: #000;
}

/* ديسكتوب: فوق 992px – خلفية غامقة ونص برتقالي */
@media (min-width: 992px) {
  .mobile-sticky {
    background-color: #111 !important;
    color: var(--clr-main1) !important;
  }

  .mobile-sticky .nav-link,
  .mobile-sticky .navbar-toggler,
  .mobile-sticky .btn,
  .mobile-sticky svg,
  .mobile-sticky .form-control {
    color: var(--clr-main1) !important;
    fill: var(--clr-main1) !important;
  }

  .mobile-sticky input::placeholder {
    color: #aaa !important;
  }

  .mobile-sticky .form-control {
    background-color: #222 !important;
  }
}

/* يجعل أيقونة زر الثيم دائماً بلون برتقالي */
.theme-toggle svg,
.theme-toggle use {
  color: var(--clr-main1) !important;
  fill: var(--clr-main1) !important;
  stroke: var(--clr-main1) !important;
}

.in-mobile {
      margin-top:-10px !important;
}

@media (max-width: 991.98px) {
  .mobile-top-icons .navbar-toggler svg,
  .mobile-top-icons .hamburger-icon span {
    color: var(--clr-main) !important;
    fill:var(--clr-main) !important;
  } 
  .mobile-top-icons .hamburger-icon span {
    color: #111 !important;
    fill: #111 !important;
    background-color: var(--clr-main) !important;
  }

  .mobile-top-icons .hamburger-icon span {
    display: block;
    height: 2px;
    margin: 4px 0;
    width: 24px;
  }

  .in-mobile {
      margin-top:-30px !important;
 } 
}
.search-box svg {
  color: var(--clr-main1) !important;
  fill: var(--clr-main1) !important;
  stroke: var(--clr-main1) !important;
}
 



/* اللون البرتقالي للنصوص الافتراضية */
.text-orange {
  color: var(--clr-main1) !important;
}

/* سطح المكتب */
#start-main,
#start-main .nav-item,
#start-main .nav-link,
#start-main .dropdown-menu {
  background-color: #000 !important;
  color: var(--clr-main1) !important;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
}

/* الروابط داخل القوائم */
#start-main .dropdown-menu a {
  color: var(--clr-main1) !important;
}

/* عند المرور hover */
#start-main .nav-link:hover,
#start-main .dropdown-menu a:hover {
  background-color: #111 !important;
  color: #fff !important;
}

/* الروابط النشطة */
#start-main .nav-link.active-text,
#start-main .dropdown-menu a.active-text {
  color: #fff !important;
}
 
/* الموبايل */
#sid-menu .accordion-button,
#sid-menu .accordion-body,
#sid-menu .accordion-item { 
  color: var(--clr-main) !important;
  font-family: 'Tajawal', sans-serif;
}
 

.mobile-top-icons {
  position: fixed;
 
  left: 12px;
  right: 12px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding: 4px 8px;
  border-radius: 8px;
}

.mobile-top-icons .ico { 
  background: rgba(255, 255, 255, 0.8); 
}

.mobile-top-icons .navbar-toggler {
  padding: 6px;
  background: transparent;
  border: none;
}

/* ✅ إخفاء على الديسكتوب */
@media (min-width: 992px) {
  .mobile-top-icons {
    display: none !important;
  }
}