/* Primary Color System - SuperSoft */
:root {
    --primary-color: #F2613B;
    --primary-hover: #e04e2a;
    --primary-light: #f87652;
    --primary-dark: #d13b10;
    --primary-gradient: linear-gradient(135deg, #F2613B, #e04e2a);
}

/* Navigation Colors */
.navbar-default {
    background-color: var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

/* Scrolled navbar style */
.navbar-scrolled {
    background-color: #0c4d96f7 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.navbar-default .navbar-collapse, 
.navbar-default .navbar-form {
    border-color: var(--primary-hover) !important;
}

.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover {
    color: var(--primary-dark) !important;
}

.nav .active a {
    background-color: var(--primary-hover) !important;
}

.dropdown-menu {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Update dropdown menu colors for scrolled state */
.navbar-scrolled .dropdown-menu {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover {
    background-color: var(--primary-hover) !important;
}

.navbar-scrolled .dropdown-menu>li>a:focus, 
.navbar-scrolled .dropdown-menu>li>a:hover {
    background-color: var(--primary-hover) !important;
}

/* Button Colors with White Text */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

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

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

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}

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

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

/* Portfolio Filters */
ul.filter > li > a:hover, 
ul.filter > li > a:focus {
    color: var(--primary-color) !important;
}

ul.filter > li.active a {
    color: var(--primary-color) !important;
}

.portfolio-section .article-title a {
    color: var(--primary-color) !important;
}

/* Footer */
.small-section {
    background-color: var(--primary-color) !important;
}

/* Icons and Special Elements */
.icon {
    background: var(--primary-color) !important;
}

.quotation {
    border: 1px solid var(--primary-color) !important;
    background: var(--primary-color) !important;
    border-bottom: 1px solid var(--primary-color) !important;
}

/* Modern Page Elements */
.hero-buttons .btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: #fff !important;
}

.demo-btn {
    color: #fff !important;
}

.demo-btn:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.btn-outline {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
}

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

/* Portfolio Filter Buttons */
.portfolio-filter .btn.active, 
.portfolio-filter .btn:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* CTA Sections */
.portfolio-cta {
    background: var(--primary-gradient) !important;
}

.portfolio-cta a.btn {
    background: #fff !important;
    color: var(--primary-color) !important;
}

.portfolio-cta a.btn:hover {
    background: #f8f9fa !important;
    color: var(--primary-dark) !important;
}

/* Contact Form and Interactive Elements */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(242, 97, 59, 0.25) !important;
}

/* Contact Page Specific Fixes */
.contact-item {
    border-left-color: var(--primary-color) !important;
}

.contact-icon,
.contact-icon i {
    color: var(--primary-color) !important;
}

.info-card i {
    color: var(--primary-color) !important;
}

/* Form Submit Button Override */
button[type="submit"].btn-primary,
.btn.btn-primary[type="submit"],
form button.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

button[type="submit"].btn-primary:hover,
.btn.btn-primary[type="submit"]:hover,
form button.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}

/* Hover Effects for Cards */
.benefit-card:hover,
.feature-card:hover,
.tech-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 4px 15px rgba(242, 97, 59, 0.15) !important;
}

/* Progress Bars and Loading Elements */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* Alerts and Status Messages */
.alert-success {
    border-color: var(--primary-color) !important;
    background-color: rgba(242, 97, 59, 0.1) !important;
    color: var(--primary-dark) !important;
}

/* Pricing and Call-to-Action Elements */
.pricing-card .btn,
.cta-section .btn,
.hero-section .btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: #fff !important;
}

.pricing-card .btn:hover,
.cta-section .btn:hover,
.hero-section .btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

/* Typography Highlights */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

/* Tab Navigation */
.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Override any existing blue colors */
.text-blue,
[class*="blue"] {
    color: var(--primary-color) !important;
}

.bg-blue,
[class*="bg-blue"] {
    background-color: var(--primary-color) !important;
}

/* Ensure all buttons get consistent styling */
.btn[class*="primary"],
.btn[class*="success"],
button[type="submit"] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn[class*="primary"]:hover,
.btn[class*="primary"]:focus,
.btn[class*="primary"]:active,
.btn[class*="success"]:hover,
.btn[class*="success"]:focus,
.btn[class*="success"]:active,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="submit"]:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}

/* Hero button specific styling */
.hero-btn-primary {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--primary-color) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

.hero-btn-primary:hover {
    background: white !important;
    color: var(--primary-dark) !important;
}

/* Ensure button text contrast */
.btn-primary a,
.btn-success a,
button[type="submit"] a {
    color: #fff !important;
}

/* Module Header Color Overrides */
.module-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: white !important;
}

.module-header i {
    color: white !important;
}

.module-header h3 {
    color: white !important;
}

/* CTA Section Color Overrides */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: white !important;
}

.cta-section h2 {
    color: white !important;
}

/* Font Awesome Icons Global Color System */
.fa {
    color: var(--primary-color);
}

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

/* Hero section font awesome icons */
.hero-feature i.fa {
    color: var(--primary-color) !important;
}

/* Why section icons */
.why i.fa {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Portfolio overlay icons */
.overlay .fa {
    color: rgba(255, 255, 255, 1) !important;
}

/* Social media and other specific icon contexts where white is needed */
.social-icons .fa,
.dropdown-menu .fa,
.navbar .fa {
    color: #fff !important;
}

/* Feature group icons in modules */
.feature-group h5 i {
    color: var(--primary-color) !important;
}

/* Trust indicators and other CTA section icons */
.trust-indicators i {
    color: #27ae60 !important;
}

/* Module content icons and bullets */
.feature-group li:before {
    color: var(--primary-color) !important;
}

/* Maximum Specificity Navbar Overrides - Final Fix */
html body nav.navbar.navbar-default,
html body .navbar.navbar-default,
body nav.navbar-default,
body .navbar-default {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-image: none !important;
    background: var(--primary-color) !important;
}

/* Override Bootstrap's gradient */
.navbar-default {
    background-image: none !important;
    filter: none !important;
}