/*
 * INNOVATION HUB - CUSTOM BLUE THEME
 * Unique blue color palette for modern innovation hub
 */

/* ============================================
   INNOVATION BLUE COLOR PALETTE
   ============================================ */
:root {
    /* Primary Innovation Blue Colors */
    --innovation-blue-primary: #7C3AED;        /* Bright Electric Blue */
    --innovation-blue-secondary: #4C1D95;      /* Deep Blue */
    --innovation-purple-primary: #7C3AED;        /* Bright Electric Blue */
    --innovation-purple-secondary: #4C1D95;      /* Deep Blue */
    --innovation-blue-light: #3D8BFF;          /* Sky Blue */
    --innovation-blue-lighter: #7AB8FF;        /* Light Sky */
    --innovation-blue-dark: #0047AB;           /* Royal Blue */

    /* Accent Colors */
    --innovation-cyan: #7C3AED;                /* Bright Cyan */
    --innovation-indigo: #7C3AED;              /* Electric Indigo */
    --innovation-azure: #0096FF;               /* Azure */
    --innovation-cobalt: #0055FF;              /* Cobalt Blue */

    /* Gradient Combinations */
    --gradient-blue-primary: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    --gradient-blue-light: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    --gradient-blue-cyan: linear-gradient(135deg, #7C3AED 0%, #00D4FF 100%);
    --gradient-purple-cyan: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
    --gradient-blue-indigo: linear-gradient(135deg, #7C3AED 0%, #4D5EFF 100%);
    --gradient-blue-triple: linear-gradient(135deg, #7C3AED 0%, #00D4FF 50%, #4C1D95 100%);
    --gradient-blue-royal: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);

    /* Supporting Colors */
    --tech-white: #FFFFFF;
    --tech-light-bg: #F0F7FF;                  /* Very light blue tint */
    --tech-card-bg: #FAFCFF;                   /* Subtle blue white */
    --tech-dark: #0A1929;                      /* Deep navy for text */
    --tech-gray: #5F6C7B;                      /* Professional gray */
    --tech-border: #E3F2FD;                    /* Light blue border */

    /* Glass Effects */
    --glass-blue: rgba(0, 102, 255, 0.1);
    --glass-blue-hover: rgba(0, 102, 255, 0.2);

    /* Shadows with Blue Tint */
    --shadow-blue-sm: 0 2px 8px rgba(0, 102, 255, 0.08);
    --shadow-blue-md: 0 4px 20px rgba(0, 102, 255, 0.12);
    --shadow-blue-lg: 0 10px 40px rgba(0, 102, 255, 0.15);
    --shadow-blue-xl: 0 20px 60px rgba(0, 102, 255, 0.2);
    --shadow-blue-colored: 0 8px 30px rgba(0, 102, 255, 0.35);
}

/* ============================================
   CAROUSEL UPDATES
   ============================================ */

/* Carousel Gradient Overlays */
.carousel::before {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 255, 0.15) 0%,
        rgba(0, 212, 255, 0.15) 50%,
        rgba(77, 94, 255, 0.15) 100%
    );
}

/* Carousel Caption */
.carousel-caption {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 102, 255, 0.25),
        0 0 100px rgba(0, 102, 255, 0.15);
}

/* Gradient Text in Carousel */
.carousel-caption h1 span {
    background: linear-gradient(135deg, #0066FF 0%, #00D4FF 50%, #4D5EFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CTA Buttons */
.carousel-cta-btn-primary {
    background: var(--gradient-purple-cyan);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4);
    animation: pulseBlue 3s ease infinite;
}

@keyframes pulseBlue {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4), 0 0 0 0 rgba(0, 102, 255, 0.5);
    }
    50% {
        box-shadow: 0 10px 40px rgba(0, 102, 255, 0.6), 0 0 0 15px rgba(0, 102, 255, 0);
    }
}

.carousel-cta-btn:hover {
    box-shadow: 0 15px 50px rgba(0, 102, 255, 0.6);
    color: var(--golden);
}

/* Carousel Stats */
.carousel-stat-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.2);
}

/* Carousel Indicators */
.carousel-indicators .active::before {
    background: var(--gradient-blue-cyan);
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Nav Link Hover */
.nav-link::before {
    background: var(--gradient-blue-primary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--innovation-purple-primary) !important;
}

/* Navbar Donate Button */
.navbar .custom-btn {
    background: var(--gradient-blue-cyan);
}

/* ============================================
   BUTTONS & CTAs
   ============================================ */

.custom-btn {
    background: var(--gradient-purple-primary);
}

.custom-btn::before {
    background: var(--gradient-blue-cyan);
}

.custom-btn:hover {
    box-shadow: var(--shadow-blue-colored);
}

/* ============================================
   FEATURED BLOCKS
   ============================================ */

.featured-block::before {
    background: var(--gradient-blue-primary);
}

.featured-block:hover .featured-block-text {
    color: var(--innovation-blue-primary);
}

.featured-block:hover .featured-block-image {
    filter: drop-shadow(0 4px 10px rgba(0, 102, 255, 0.3));
}

/* ============================================
   ABOUT SECTION
   ============================================ */

/* About Image Container */
.about-image-container {
    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.15);
}

.about-image-container::before {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.3) 0%, rgba(0, 212, 255, 0.3) 100%);
}

.about-image-container:hover {
    box-shadow: 0 30px 80px rgba(0, 102, 255, 0.25);
}

/* About Badge */
.about-badge {
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
}

.about-badge-number {
    background: var(--gradient-blue-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
    }
    50% {
        box-shadow: 0 20px 50px rgba(0, 102, 255, 0.35);
    }
}

/* Section Title Underline */
.about-section-title::after {
    background: var(--gradient-blue-cyan);
}

/* Subtitle Color */
.about-subtitle {
    color: var(--innovation-purple-primary);
}

/* Value Cards */
.value-card::before {
    background: var(--gradient-purple-cyan);
}

.value-card:hover {
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
}

.value-icon {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 212, 255, 0.1));
}

.value-icon i {
    color: var(--innovation-purple-primary);
}

.value-card:hover .value-icon {
    background: var(--gradient-purple-cyan);
}

/* About Stats */
.about-stat-item::before {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 212, 255, 0.05));
}

.about-stat-item:hover {
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
}

.about-stat-icon {
    color: var(--innovation-purple-primary);
}

.about-stat-number {
    background: var(--gradient-purple-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Timeline */
.timeline-year-badge {
    background: var(--gradient-purple-cyan-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.timeline-content:hover {
    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.2);
}

/* About CTA */
.about-cta {
    background: var(--gradient-purple-cyan);
}

.about-cta-btn {
    color: var(--innovation-purple-primary);
    border: 1px solid var(--golden);
}

.about-cta-btn:hover {
    color: var(--innovation-purple-primary);
}

/* ============================================
   PROGRAMS SECTION
   ============================================ */

.program-card::before {
    background: var(--gradient-blue-triple);
}

.program-card:hover {
    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.2);
    border-color: rgba(0, 102, 255, 0.3);
}

.program-icon {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 212, 255, 0.1));
    color: var(--innovation-blue-primary);
}

.program-card:hover .program-icon {
    background: var(--gradient-blue-cyan);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4);
}

.program-features li::before {
    color: var(--innovation-blue-primary);
}

/* ============================================
   STARTUPS SHOWCASE
   ============================================ */

.startup-logo-container::before {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 212, 255, 0.05));
}

.startup-category {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 212, 255, 0.1));
    color: var(--innovation-blue-primary);
}

.startup-metric-value {
    color: var(--innovation-blue-primary);
}

/* ============================================
   EVENTS SECTION
   ============================================ */

.event-card:hover {
    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.2);
    border-left-color: var(--innovation-blue-primary);
}

.event-date {
    background: var(--gradient-blue-cyan);
}

.event-meta-item i {
    color: var(--innovation-blue-primary);
}

.event-tag {
    background: rgba(0, 102, 255, 0.1);
    color: var(--innovation-blue-primary);
}

/* ============================================
   PARTNERS SECTION
   ============================================ */

.partner-item::before {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 212, 255, 0.05));
}

.partner-item:hover {
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15);
}

/* ============================================
   COMMUNITY SECTION
   ============================================ */

.community-section {
    background: var(--gradient-purple-cyan);
    backdrop-filter: blur(8px);
}

.community-stat {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   CARDS & BLOCKS
   ============================================ */

.custom-block-wrap:hover {
    box-shadow: var(--shadow-blue-xl);
}

/* Progress Bars */
.progress {
    background: rgba(0, 102, 255, 0.1);
}

.progress-bar {
    background: var(--gradient-blue-cyan);
}

.custom-block-wrap:hover .progress-bar {
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.5);
}

/* ============================================
   COUNTER NUMBERS
   ============================================ */

.counter-number {
    background: var(--gradient-blue-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   NEWS SECTION
   ============================================ */

.news-block:hover {
    box-shadow: var(--shadow-blue-xl);
}

.category-block-link:hover {
    color: var(--innovation-blue-primary);
}

/* ============================================
   FORMS
   ============================================ */
/* 
.form-control:focus {
    border-color: var(--innovation-blue-primary);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

.form-control[type="submit"],
button.form-control {
    background: var(--golden);
}

.form-control[type="submit"]:hover,
button.form-control:hover {
    box-shadow: var(--shadow-blue-colored);
} */

/* ============================================
   SOCIAL ICONS
   ============================================ */

.social-icon-link {
    background: rgba(0, 102, 255, 0.2);
}

.social-icon-link:hover {
    color: var(--innovation-blue-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
}

/* ============================================
   HEADER
   ============================================ */

/* .site-header {
    background: var(--gradient-blue-primary);
} */

/* ============================================
   FOOTER
   ============================================ */

.site-footer::before {
    background: var(--gradient-blue-cyan);
}

.footer-menu-link:hover {
    color: var(--golden) !important;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
    background: var(--gradient-blue-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4) !important;
}

/* ============================================
   MISC ELEMENTS
   ============================================ */

/* Badges */
.badge {
    background: var(--innovation-blue-primary);
}

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

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

/* Checkmarks and Icons */
.bi-check-circle-fill.text-success {
    color: var(--innovation-blue-primary) !important;
}

/* ============================================
   BACKGROUND PATTERNS
   ============================================ */

/* Floating circles with blue tint */
.about-section-enhanced::before {
    background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, transparent 70%);
}

.about-section-enhanced::after {
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
}

/* ============================================
   HOVER GLOWS
   ============================================ */

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.4);
}

/* ============================================
   TEXT SELECTIONS
   ============================================ */

::selection {
    background: var(--innovation-blue-light);
    color: white;
}

::-moz-selection {
    background: var(--innovation-blue-light);
    color: white;
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loading-spinner {
    border: 5px solid rgba(0, 102, 255, 0.2);
    border-top-color: var(--innovation-blue-primary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

:focus-visible {
    outline: 2px solid var(--innovation-blue-primary);
    outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.bg-innovation-blue {
    background: var(--gradient-blue-primary) !important;
}

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

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 991px) {
    /* Maintain blue theme on mobile */
    .navbar {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    * {
        color: #000 !important;
        background: white !important;
    }
}