/* Custom styles for Santrix website */

/* Updated Color Scheme - Muted Blue Primary (same tone as original green) */
:root {
    --ar-primary: #3A6EA5;
    /* Steel Blue - Muted, professional tone */
    --ar-primary-rgb: 58, 110, 165;
    --ar-primary-hover: #427cba;
    /* Darker muted blue for hover */

    /* Complementary colors based on muted blue primary */
    --ar-success: #10B981;
    /* Green for success */
    --ar-success-rgb: 16, 185, 129;

    --ar-warning: #F59E0B;
    /* Amber for warning */
    --ar-warning-rgb: 245, 158, 11;

    --ar-info: #06B6D4;
    /* Cyan for info */
    --ar-info-rgb: 6, 182, 212;

    --ar-danger: #EF4444;
    /* Red for danger */
    --ar-danger-rgb: 239, 68, 68;
}

/* X (Twitter) Icon - Custom SVG */
.ai-x::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444444'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Dark mode state for X icon */
[data-bs-theme="dark"] .ai-x::before,
.dark-mode .ai-x::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* Override for icon buttons to ensure proper sizing */
.btn-icon .ai-x::before {
    width: 1.25em;
    height: 1.25em;
}

/* Social Media Icon Hover Colors */

/* X (Twitter) - Black background with white icon */
.btn-x:hover .ai-x::before,
.btn-twitter:hover .ai-x::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.btn-x:hover,
.btn-twitter:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}

/* Instagram - Official Gradient */
.btn-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #fff !important;
}

/* Facebook - Official Blue */
.btn-facebook:hover {
    background-color: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #fff !important;
}

/* LinkedIn - Official Blue */
.btn-linkedin:hover {
    background-color: #0A66C2 !important;
    border-color: #0A66C2 !important;
    color: #fff !important;
}

/* Technology Partners Section */
.tech-partners {
    padding: 80px 0;
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] .tech-partners,
.dark-mode .tech-partners {
    background-color: rgba(255, 255, 255, 0.03);
}

.tech-partners h2 {
    font-size: 2rem;
    margin-bottom: 3rem;
    text-align: center;
    font-weight: 600;
}

.tech-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 120px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .tech-logo-container,
.dark-mode .tech-logo-container {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.tech-logo-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .tech-logo-container:hover,
.dark-mode .tech-logo-container:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tech-logo {
    max-width: 100%;
    max-height: 60px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.tech-logo-container:hover .tech-logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* For text-based logos */
.tech-logo-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.tech-logo-container:hover .tech-logo-text {
    opacity: 1;
    color: var(--ar-primary);
}