/*===================== 	Dark Primary bg color =====================*/
:root {
    --primary: #121212; /* Dark background */
    --sc-primary: #121212;
}

/* Background Color for Primary Elements */
.bg-primary, .btn, .comments-area .comment-form p input[type="submit"], .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .feature-filters .active > [class*="btn"], .list-num-count > li:before, .pagination-bx.primary .pagination > li > a, .pagination-bx.primary .pagination > li > span, button.back-to-top, .rev-btn {
    background-color: #1f1f1f; /* Dark gray */
}

/* Hover effect for buttons and interactive elements */
.btn:active, .btn:hover, .btn:focus, .active > .btn, .bg-primary-dark, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus, .pagination-bx.primary .pagination > li > a:hover, .pagination-bx.primary .pagination > li > span:hover, .pagination-bx.primary .pagination > li.active > span, .pagination-bx.primary .pagination > li.active > a {
    background-color: #4d0a91; /* Darker violet for contrast */
}

/*===================== 	Text Color =====================*/
a, .text-primary, .primary li:before, .menu-links .nav > li.active > a, .menu-links .nav > li:hover > a, .menu-links .nav > li .mega-menu > li ul a:hover, .menu-links .nav > li .sub-menu li:hover > a, footer a:hover, footer h1 a, footer h2 a, footer h3 a, footer h4 a, footer h5 a, footer h6 a, footer p a, .testimonial-1 .testimonial-position, .acod-head a:after, .acod-head a, .acod-head a:hover, .acod-head a.collapsed:hover, .ttr-tabs .nav-tabs > li > a i {
    color: #f1f1f1; /* Light text for dark background */
}

/*===================== 	Secondary bg color =====================*/
.bg-secondry {
    background-color: #2d3239; /* Slightly lighter for sections */
}

/*===================== 	Secondary text color =====================*/
.text-secondry {
    color: #b0b0b0; /* Light gray text for better readability */
}

/* Overlay effects for dark background */
.ovpr-light:after, .ovpr-middle:after, .ovpr-dark:after, .ovpr:after, .bg-primary {
    background-color: #1f1f1f;
}

/* Footer background */
.footer-top, .footer-bottom {
    background-color: #212121; /* Darker footer */
}

/* Gradient effects for dark skin */
.ovbl-middle::after, .ovbl-light::after, .ovbl-dark::after {
    background: #0a0a0a;
    background: -moz-linear-gradient(45deg, #0a0a0a 0%, #1c1b1d 50%, #0a0a0a 100%);
    background: -webkit-linear-gradient(45deg, #0a0a0a 0%, #1c1b1d 50%, #0a0a0a 100%);
    background: linear-gradient(45deg, #0a0a0a 0%, #1c1b1d 50%, #0a0a0a 100%);
}

/* More secondary colors for interactive elements */
.portfolio-bx .portfolio-info-bx, .btn.outline:hover, .course-info-list ul li a.active, .course-info-list ul li a:hover, .btn, .profile-tabnav .nav li a.active, button.back-to-top, .upcoming-event-carousel.owl-btn-1 .owl-prev, .upcoming-event-carousel.owl-btn-1 .owl-next {
    background-color: #282828; /* Dark for buttons */
    color: #ffffff; /* White text */
}

/* More secondary colors for interactive elements */
.portfolio-bx .portfolio-info-bx, .btn.outline:hover, .course-info-list ul li a.active, .course-info-list ul li a:hover, .btn, .profile-tabnav .nav li a.active, button.back-to-top, .upcoming-event-carousel.owl-btn-1 .owl-prev, .upcoming-event-carousel.owl-btn-1 .owl-next {
    background-color: #282828; /* Dark for buttons */
    color: #ffffff; /* White text */
}

/* Hover effects for contrast */
.footer_widget ul li a:hover, .header-transparent .secondary-menu .btn-link:hover, .header-transparent .menu-links .nav > li:hover > a, .header-transparent .menu-links .nav > li.active > a {
    color: #f7b205; /* Golden hover effect */
}

.course-info-list ul li a.active:hover, .btn:hover, .profile-tabnav .nav li a.active:hover, button.back-to-top:hover, .upcoming-event-carousel.owl-btn-1 .owl-prev:hover, .upcoming-event-carousel.owl-btn-1 .owl-next:hover {
    background-color: #4c1864; /* Darker violet for buttons */
    color: #fff;
}

.heading-bx.left .title-head {
    border-color: unset; /* Golden border for headings */
}