/* Brand Colors - Based on Rekaz Tech Logo */

:root {
    /* Primary Brand Colors - Modern Dark Theme */

    --brand-primary: #f0bf28;        /* Cyan accent - main interactive color */
    --brand-secondary: #5bb4be;      /* Darker cyan for hover states */
    --brand-accent: #;         /* Even darker cyan for accents */

    --dark-cyan: #00d4ff;
    --twilight-indigo: #1E3353ff;
    --oxford-navy: #1B3556ff;
    --pacific-blue: #00d4ff;
    --ash-grey: #b0b0b0;
    /* If your logo uses different colors, update these values:
       Example for blue/teal:
       --brand-primary: #0066cc;
       --brand-secondary: #00a8cc;

       Example for green:
       --brand-primary: #00b894;
       --brand-secondary: #00cec9;
    */

    /* Gradient Combinations - Modern Dark Theme */
    --brand-gradient: linear-gradient(135deg, #5bb4be 0%, #00b8e6 100%);
    --brand-gradient-hover: linear-gradient(135deg, #00b8e6 0%, #0099cc 100%);

    /* Light variations for dark theme */
    --brand-light: rgba(0, 212, 255, 0.2);
    --brand-lighter: rgba(0, 212, 255, 0.08);

    /* Text colors for dark theme */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-light: #909090;
}

/* Apply brand colors to all gradient elements */
.product-icon,
.solution-icon {
    background: var(--brand-gradient) !important;
}

/* Service icons - special handling for dark mode */
body.dark-mode .service-icon {
    background-color: rgba(0, 212, 255, 0.1) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
}

body.dark-mode .single-service:hover .service-icon {
    background: var(--brand-gradient) !important;
    border-color: var(--brand-primary) !important;
}

.product-card:hover .product-icon,
.solution-card:hover .solution-icon {
    background: var(--brand-gradient-hover) !important;
}

/* Gradient bars and accents */
.product-card::before,
.solution-card::before,
.service-card::before {
    background: var(--brand-gradient) !important;
}

/* Metric items in success stories */
.metric-item {
    background: var(--brand-gradient) !important;
}

/* Buttons and CTAs */
.button.btn-default,
.btn-primary {
    background: var(--brand-gradient) !important;
    border: none;
}

.button.btn-default:hover,
.btn-primary:hover {
    background: var(--brand-gradient-hover) !important;
}

/* Links and hover states */
a:hover,
.navbar-nav > li > a:hover {
    color: var(--brand-primary) !important;
}

/* Icon colors */
.product-features li i,
.solution-features li i,
.about-icon i {
    color: var(--brand-primary) !important;
}

/* Section headings */
.section-heading h2 span {
    color: var(--brand-primary) !important;
}

/* Background overlays */
.products-area::before,
.solutions-area::before,
.success-stories-area::before {
    background: linear-gradient(135deg, var(--brand-lighter) 0%, var(--brand-lighter) 100%) !important;
}

/* Hover text colors */
.product-card:hover .product-name,
.solution-card:hover .solution-title {
    color: var(--brand-primary) !important;
}

/* Border colors on hover */
.product-card:hover,
.solution-card:hover {
    border-color: var(--brand-light) !important;
}

/* Services split columns */
.government-services-column {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.03) 0%, rgba(0, 212, 255, 0.08) 100%) !important;
}

.tech-services-column {
    background: linear-gradient(135deg, rgba(0, 184, 230, 0.03) 0%, rgba(0, 184, 230, 0.08) 100%) !important;
}

/* Contact box-info background */
.contact .box-info {
    background: var(--brand-gradient) !important;
}

/* Dark mode adjustments */
body.dark-mode {
    --brand-light: rgba(0, 212, 255, 0.3);
    --brand-lighter: rgba(0, 212, 255, 0.1);
}