/* Custom Orange Color Scheme */
:root {
    --primary-color: #df4b15;
    --primary-dark: #df4b15;
    --primary-light: #df4b15;
    --secondary-color: #df4b15;
}

/* Override Bootstrap Primary Colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

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

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* Navigation Active State */
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 15px !important;
    margin: 0 5px;
    transition: all 0.3s ease;
}

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

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-radius: 5px;
}

/* Dropdown Active State */
.navbar-light .navbar-nav .dropdown-toggle.active,
.navbar-light .navbar-nav .dropdown-toggle:hover,
.navbar-dark .navbar-nav .dropdown-toggle.active,
.navbar-dark .navbar-nav .dropdown-toggle:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-radius: 5px;
}

.navbar-blue {
    background-color: #0B0959 !important;
}

/* Buttons Secondary */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-secondary:hover {
    background-color: #ffffff !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Dropdown Active */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.dropdown-item:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Form Focus */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

/* Badge */
.badge-primary {
    background-color: var(--primary-color) !important;
}

/* Alert */
.alert-primary {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: #fff;
}

/* Progress Bar */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* List Group Active */
.list-group-item.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.page-link {
    color: var(--primary-color);
}

.page-link:hover {
    color: var(--primary-dark);
}

/* Custom Elements for Template */
.back-to-top {
    background-color: var(--primary-color) !important;
}

.back-to-top:hover {
    background-color: var(--primary-dark) !important;
}

/* Section Titles */
.section-title::before {
    background-color: var(--primary-color) !important;
}

/* Icon Background */
.icon-bg-primary {
    background-color: var(--primary-color) !important;
}

/* Border Animation */
.border-animation {
    border-color: var(--primary-color) !important;
}

/* Custom Underline */
.text-underline-primary {
    border-bottom-color: var(--primary-color) !important;
}

/* Topbar Social Media Icons Hover Effect */
.topbar .top-link a {
    transition: all 0.3s ease;
}

.topbar .top-link a:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.topbar .top-link a:hover i {
    color: #fff !important;
}