/**
 * ======================================================================
 * GLOBAL STYLES, VARIABLES, AND TYPOGRAPHY
 * ======================================================================
 * Defines base fonts, color variables, and overall dark theme settings.
 */

/* 1. Import External Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* 2. Define Color Variables for Cyber Theme */
:root {
    /* Primary Accent Colors */
    --cyber-accent: #6f42c1;
    /* Deep Purple Accent (Used in Dashboard & Glow) */
    --hero-accent: #7446ac;
    /* Secondary Theme Color (Slightly lighter purple for Hero/Buttons) */

    /* Background Colors */
    --cyber-dark-bg: #121212;
    /* Main Page Dark Background */
    --cyber-card-bg: #1e1e1e;
    /* Dark Background for Cards/Containers */
    --darker-bg: var(--cyber-dark-bg);
    /* Alias for consistency */
}

/* 3. Base Body Styling */
body {
    /* Primary UI font for application interface */
    font-family: 'Rajdhani', sans-serif;
    background-color: var(--cyber-dark-bg);
    color: #fff;
    /* Prevents horizontal scrollbar */
    overflow-x: hidden;
}

/* 4. Utility Class for Dashboard Accent Color (used in CTA/Headings) */
.text-cyber-accent {
    color: var(--cyber-accent) !important;
}

/**
 * ----------------------------------------------------------------------
 * THEME UTILITY CLASSES (HERO SECTION & UI ELEMENTS)
 * ----------------------------------------------------------------------
 * Reusable classes defining the secondary theme color (--hero-accent) for quick application.
 */

.bg-theme {
    /* Sets background color to the defined hero accent color */
    background-color: var(--hero-accent) !important;
}

.text-theme {
    /* Sets text color to the defined hero accent color */
    color: var(--hero-accent) !important;
}

.border-theme {
    /* Applies a 2px solid border using the hero accent color */
    border: 2px solid var(--hero-accent) !important;
}

/* Secondary Button Styles (Light Purple/White combo for contrast) */
.btn-secondary-theme {
    color: hsl(267, 42%, 47%);
    /* Dark text color derived from HSL */
    box-shadow: none !important;
    background-color: hsl(263, 50%, 94%);
    /* Light background color */
}

.btn-secondary-theme:hover,
.btn-secondary-theme:focus {
    background-color: hsl(267, 70%, 95%);
    /* Lighter background on hover/focus */
    color: hsl(267, 42%, 37%);
    /* Slightly darker text on hover/focus */
}


/**
 * ======================================================================
 * SECTION A: NOTIFICATION BELL ANIMATION
 * ======================================================================
 * Styles for the bell icon and the hover-triggered ringing effect.
 */

/* 1. Define the Bell Ringing Keyframe Animation */
@keyframes bell-ring {

    0%,
    75%,
    100% {
        transform: rotate(0);
    }

    15%,
    45% {
        transform: rotate(10deg);
    }

    30%,
    60% {
        transform: rotate(-10deg);
    }
}

/* 2. Target the Bell Icon and Prepare it for Animation */
#notificationDropdownMenuLink .fas.fa-bell {
    display: inline-block;
    /* Sets the pivot point for rotation to the top */
    transform-origin: top center;
    transition: transform 0.15s ease-in-out;
}

/* 3. Apply the Animation on HOVER (Continuous Ringing) */
#notificationDropdownMenuLink:hover .fas.fa-bell {
    animation: bell-ring 1s ease-in-out infinite;
}


/**
 * ======================================================================
 * SECTION B: SECURITY METRICS COUNTER STYLES (DASHBOARD CARDS)
 * ======================================================================
 * Custom styles for the dark-themed counter dashboard.
 */

/* 1. Custom Card Appearance */
.custom-card-bg {
    background-color: var(--cyber-card-bg) !important;
    /* Equivalent to Tailwind rounded-xl */
    border-radius: 0.75rem !important;
}

.custom-border-top {
    /* Accent border at the top of the card */
    border-top: 4px solid var(--cyber-accent);
}

.custom-shadow-card {
    /* Soft shadow for depth */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 2. Number and Icon Styling */
.custom-font-mono {
    /* Font style for counter numbers */
    font-family: monospace, sans-serif !important;
}

.custom-shadow-number {
    /* Glowing purple text effect for the counter numbers */
    text-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

.custom-icon-size {
    /* Standard icon size */
    height: 1.5rem;
    width: 1.5rem;
}

/* 3. Interactive Hover Effect */
.transition-hover {
    /* Smooth transition for transform effect */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.transition-hover:hover {
    /* Scales the card up on hover */
    transform: scale(1.02);
}

/**
 * ======================================================================
 * SECTION C: CLIENT LOGO STYLES & ANIMATIONS
 * ======================================================================
 * Styles for the client names to give them a modern, dark-themed logo aesthetic.
 */

.client-logo-item {
    /* Base style: Dark background, padding, and subtle glow border */
    background-color: var(--cyber-card-bg);
    padding: 1.5rem 0.5rem;
    border-radius: 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Very faint border */
    transition: all 0.5s ease;

    /* Animation setup: Start invisible and slightly lower */
    opacity: 0;
    transform: translateY(15px);
}

.client-logo-item.is-visible {
    /* State when observer sees the element */
    opacity: 1;
    transform: translateY(0);
}

.client-logo-item:hover {
    /* Interactive hover effect: subtle purple glow */
    border-color: var(--cyber-accent);
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.3);
}

.custom-client-name {
    /* Use the sci-fi/tech font defined earlier (Orbitron) */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    /* Bright white text */
    letter-spacing: 1px;

    /* Subtle text glow, similar to counter numbers */
    text-shadow: 0 0 5px rgba(111, 66, 193, 0.2);
}


/**
 * ======================================================================
 * SECTION D: TEAM CARD STYLES & ANIMATIONS
 * ======================================================================
 * Custom styling for team member cards, aligning with the dark cyber theme.
 */

.team-card {
    /* Ensure the card content color is handled by base body/card-body styles */
    /* Custom-card-bg provides the dark background */
    border: 1px solid rgba(111, 66, 193, 0.2) !important;
    /* Subtle accent border */
}

/* Image styling (Focus border/glow) */
.team-img-border {
    width: 80px;
    height: 80px;
    object-fit: cover;
    /* Circular border with a purple glow effect */
    border: 2px solid var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

/* Animation Setup: Start invisible and slightly lower */
.team-card {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation Trigger State */
.team-card.is-visible-team {
    opacity: 1;
    transform: translateY(0);
}

/* Optional: Social Icons styling (if included) */
.team-social-icon {
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.team-social-icon:hover {
    color: var(--cyber-accent);
    opacity: 1;
}

/**
 * ======================================================================
 * SECTION E: SPECIALIZING SECTION (FEATURES) STYLES
 * ======================================================================
 * Styling for the feature list to match the dark cyber aesthetic.
 */

/* Feature Card Container */
.specializing-card-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 0.5rem;

    /* Animation setup: Starts off-screen and invisible */
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease-out;
}

/* Feature Icon Box - Dark Purple Background with Glow */
.specializing-icon-box {
    /* Use a darker version of the cyber accent color for the box background */
    background-color: #3f2a7a;
    /* Darker purple */
    min-width: 50px;
    /* Fixed width for the icon box */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1.25rem;
    /* Icon Size */
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    /* Glow effect */
}

/* Feature Text Styling */
.specializing-text h5 {
    color: var(--cyber-accent);
    /* Titles use the main accent color */
    margin-bottom: 0.2rem;
}

.specializing-text p {
    font-size: 0.95rem;
    margin-bottom: 0;
    color: #b0b0b0;
    /* Light gray for body text */
}

/* Illustration Styling */
.special-illustration {
    max-height: 450px;
    /* Cap the max height of the image */
    object-fit: contain;
}

/* Animation Trigger State */
.specializing-card-item.is-visible-feature {
    opacity: 1;
    transform: translateX(0);
}

/* Illustration Animation Trigger State */
.special-illustration.is-visible-feature {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


/**
 * ======================================================================
 * SECTION F: PRICING SECTION STYLES & ANIMATIONS
 * ======================================================================
 * Dark theme pricing table with hover and scroll animations.
 */

.bg-dark-section {
    background-color: var(--background-color-dark);
    /* Ensure a dark background */
}

/* Card Base Style - General styling (visible by default) */
.pricing-card {
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease-out;
    /* Keep general transitions */
}



/* SCROLL ANIMATION INITIAL STATE: ONLY applies to animated cards */
.pricing-card-animated {
    opacity: 0;
    /* Starts hidden */
    transform: translateY(20px);
    /* Starts slightly below */
}


/* Recommended Card Highlight */
.recommended-card {
    /* Optional: Add a stronger glow/shadow for the recommended card */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.7);
}

/* Card Hover Animation (Transition-hover-3d) */
.transition-hover-3d:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(111, 66, 193, 0.5), 0 0 10px rgba(111, 66, 193, 0.5);
    /* Stronger glow on hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Feature List Item Hover Animation */
.pricing-feature-item {
    padding-left: 0;
    transition: transform 0.2s ease-out;
    /* Smooth transition for list items */
}

.pricing-feature-item:hover {
    transform: translateX(5px);
    /* Moves the item slightly to the right on hover */
}

.disabled-feature span {
    text-decoration: line-through;
    /* Strikethrough for unavailable features */
    color: #555;
}

/* Pricing Toggle Switch Styling (Optional, to match the theme) */
.pricing-toggle-input {
    background-color: #3f2a7a;
    border-color: #6f42c1;
}

.pricing-toggle-input:checked {
    background-color: #6f42c1;
    /* Cyber accent when checked */
    border-color: #6f42c1;
}

/* Button Styling for Theme Consistency */
.btn-cyber {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    transition: background-color 0.3s ease;
}

.btn-cyber:hover {
    background-color: #5a34a4;
    /* Slightly darker/different shade on hover */
    border-color: #5a34a4;
}

.btn-outline-cyber {
    border: 1px solid var(--cyber-accent);
    color: var(--cyber-accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent);
    color: #fff;
}

/* Scroll-In Animation FINAL State: Applied by JS */
.pricing-card-animated.is-visible-card {
    opacity: 1;
    /* Makes them visible */
    transform: translateY(0);
}

.bg-cyber-accent-soft {
    background-color: #a07cd6 !important;
    /* Lighter shade for 'Save' badge */
}


/* NOTE: 'overflow: hidden;' is intentionally kept on .pricing-card.
   This CSS fix bypasses it by moving the badge up using translate(-50%).
*/

/* ======================================================================
 * RIBBON STYLE
 * ======================================================================
 */

/* 1. Ribbon Wrapper Setup */
.ribbon-top-right {
    /* Ensures the ribbon is positioned relative to the card */
    position: absolute;
    overflow: hidden;
    /* Position the ribbon in the top right corner */
    top: -10px;
    /* Start slightly off the edge */
    right: -10px;
    width: 150px;
    /* Width of the entire ribbon area */
    height: 150px;
    /* Height of the entire ribbon area */
    z-index: 30;
    /* Make sure it's above everything */
}

/* 2. The Inner Ribbon Text Container */
.ribbon-top-right span {
    position: absolute;
    display: block;
    width: 220px;
    /* Make it longer to cover the corner diagonally */
    padding: 8px 0;

    /* Cyber Theme Styling */
    background-color: var(--cyber-accent, #6f42c1);
    /* Use cyber accent color */
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    /* Subtle shadow for depth */

    /* The magic to make it diagonal */
    transform: rotate(45deg);

    /* Position the rotated element correctly */
    top: 30px;
    right: -40px;
}

/* 3. Optional: Add a subtle 'tail' effect (the small triangle below the ribbon) */
.ribbon-top-right span::before,
.ribbon-top-right span::after {
    content: '';
    position: absolute;
    bottom: -8px;
    /* Position below the span */
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
}

.ribbon-top-right span::before {
    left: 0;
    border-left: 8px solid transparent;
    /* Right side of the ribbon text */
    border-right: 8px solid #5a34a4;
    /* Darker accent for contrast */
}

.ribbon-top-right span::after {
    right: 0;
    border-right: 8px solid transparent;
    /* Left side of the ribbon text */
    border-left: 8px solid #5a34a4;
    /* Darker accent for contrast */
}

/**
 * ======================================================================
 * SECTION H: TERMS AND CONDITIONS CORE DESIGN STYLES
 * (No Animations or Transitions Included)
 * ======================================================================
 */

/* Main Content Container Styling */
.terms-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
    /* Dark background */
}

.terms-content {
    max-width: 900px;
    /* Readable width for content */
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* Article/Section Base Style */
.terms-article {
    /* Base style to give structure to each section */
    padding: 20px;
    border: 1px solid transparent;
    border-radius: 0.75rem;
}

/* List Item Base Style (renamed to avoid conflict with old code) */
.terms-list-item-base {
    padding: 10px 15px;
    border-radius: 5px;
}

.terms-list-item-base i {
    /* Set icons to the cyber accent color */
    color: var(--cyber-accent, #6f42c1) !important;
}

/* Ensure headings use the accent color */
.terms-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/**
 * ======================================================================
 * SECTION I: ABOUT US CORE DESIGN STYLES
 * (Reused for the detailed page structure)
 * ======================================================================
 */

.about-section {
    background-color: var(--background-color-dark);
}

/* Base Card Style for About Us Articles */
.about-card {
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* List Item Icon Coloring */
.about-card .list-unstyled i {
    color: var(--cyber-accent, #6f42c1) !important;
    /* Force icons to cyber accent color */
    font-size: 1.2rem;
}

/* Heading Styling */
.about-card h3,
.about-card .terms-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/* Call to Action Background */
.bg-theme-dark-accent {
    background-color: #12121e;
    /* A slightly different dark shade for contrast */
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem !important;
}


/**
 * ======================================================================
 * SECTION J: PRIVACY POLICY CORE DESIGN STYLES
 * ======================================================================
 */

/* Main Section and Container Styling */
.privacy-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.privacy-content {
    max-width: 900px;
    /* Consistent readable width */
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* Article/Section Base Style */
.privacy-article {
    padding: 15px 0;
}

/* Heading Styling */
.privacy-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/* Icon Coloring */
.privacy-item i {
    color: var(--cyber-accent, #6f42c1) !important;
    /* General accent color for icons */
    font-size: 1.2rem;
}

/* Specific icon overrides for clarity */
.privacy-item .fa-check-circle {
    color: #28a745 !important;
    /* Green for positive confirmations */
}

.privacy-item .fa-share-alt-slash {
    color: #dc3545 !important;
    /* Red for 'No Sharing' warning */
}

/**
 * ======================================================================
 * SECTION K: COOKIE POLICY CORE DESIGN STYLES
 * ======================================================================
 */

/* Main Section and Container Styling (Reusing classes from Privacy/Terms) */
.cookie-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.cookie-content {
    max-width: 900px;
    /* Consistent readable width */
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* Article/Section Base Style */
.cookie-article {
    padding: 15px 0;
}

/* Heading Styling */
.cookie-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/* Icon Coloring */
.cookie-item i {
    color: var(--cyber-accent, #6f42c1) !important;
    /* General accent color for icons */
    font-size: 1.2rem;
}

/* Specific icon overrides for caution/alert */
.cookie-item .fa-exclamation-triangle {
    color: #ffc107 !important;
    /* Yellow/Orange for caution */
}

/**
 * ======================================================================
 * SECTION L: REFUND POLICY CORE DESIGN STYLES
 * ======================================================================
 */

/* Main Section and Container Styling (Reusing classes for consistency) */
.refund-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.refund-content {
    max-width: 900px;
    /* Consistent readable width */
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* Article/Section Base Style */
.refund-article {
    padding: 15px 0;
}

/* Heading Styling */
.refund-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/* Icon Coloring */
.refund-item i {
    color: var(--cyber-accent, #6f42c1) !important;
    /* General accent color for icons */
    font-size: 1.2rem;
}

/* Specific icon overrides for clarity */
.refund-item .fa-calendar-check,
.refund-item .fa-hand-holding-usd {
    color: #28a745 !important;
    /* Green for Refund Eligibility */
}

.refund-item .fa-ban {
    color: #dc3545 !important;
    /* Red for Non-Refundable Scenarios */
}

/**
 * ======================================================================
 * SECTION M: DISCLAIMER POLICY CORE DESIGN STYLES
 * ======================================================================
 */

/* Main Section and Container Styling (Reusing classes for consistency) */
.disclaimer-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.disclaimer-content {
    max-width: 900px;
    /* Consistent readable width */
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
    /* Subtle outer glow */
}

/* Article/Section Base Style */
.disclaimer-article {
    padding: 15px 0;
}

/* Heading Styling */
.disclaimer-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Underline for clarity */
    padding-bottom: 5px;
}

/* Icon Coloring */
.disclaimer-item i {
    color: var(--cyber-accent, #6f42c1) !important;
    /* General accent color for icons */
    font-size: 1.2rem;
}

/* Specific icon overrides for caution/alert */
.disclaimer-item .fa-bug-slash,
.disclaimer-item .fa-bell-slash {
    color: #dc3545 !important;
    /* Red for warning/risk */
}

.disclaimer-item .fa-gavel {
    color: #ffc107 !important;
    /* Yellow/Orange for legal/liability */
}


/**
 * ======================================================================
 * SECTION N: REPORT A BREACH FORM STYLES
 * ======================================================================
 */

/* Main Section and Container Styling (Reusing classes for consistency) */
.breach-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.breach-form-container {
    max-width: 900px;
    background-color: #1a1a2e;
    /* Darker card background */
    border: 1px solid #dc3545;
    /* Red border for urgency */
    border-radius: 1rem;
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.4);
    /* Strong red glow for urgency */
}

/* Heading and Article Styles */
.breach-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    /* Cyber accent divider */
    padding-bottom: 5px;
    color: var(--cyber-accent);
}

/* Form Control Styling (Inputs, Textareas, Selects) */
.form-control,
.form-select {
    background-color: #2a2a47;
    /* Darker input background */
    color: #fff;
    border: 1px solid #3f2a7a;
    /* Cyber border */
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: #2a2a47;
    color: #fff;
    border-color: #6f42c1;
    /* Cyber accent on focus */
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3);
    /* Soft glow on focus */
}

/* Label Styling */
.form-label {
    color: #fff;
    font-size: 0.95rem;
}

/* Checkbox Styling */
.form-check-input:checked {
    background-color: #6f42c1;
    /* Cyber accent checked color */
    border-color: #6f42c1;
}

/* Submission Button Styling */
.btn-breach-submit {
    background-color: #dc3545;
    /* Urgent Red */
    border-color: #dc3545;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px 40px;
    transition: all 0.3s ease;
}

.btn-breach-submit:hover {
    background-color: #c82333;
    /* Darker red on hover */
    border-color: #bd2130;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.6);
    /* Enhanced red glow on hover */
}


/**
 * ======================================================================
 * SECTION O: FAQ ACCORDION STYLES (Retained)
 * ======================================================================
 */

/* Main Section Styling */
.faq-section {
    background-color: var(--background-color-dark);
}

/* Accordion Container Width */
#octopyderFaqAccordion {
    max-width: 1000px;
}

/* 1. Individual Accordion Item Card */
.faq-item-card {
    border: 1px solid #3f2a7a;
    /* Cyber accent light border */
    border-radius: 0.75rem !important;
    overflow: hidden;
    /* Ensures rounded corners */
    background-color: #1a1a2e;
    /* Slightly lighter than the background for contrast */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 2. Accordion Button/Header Styling */
.faq-button {
    background-color: #1a1a2e;
    color: #fff;
    font-size: 1.1rem;
    padding: 18px 25px;
    text-align: left;
    transition: background-color 0.3s ease;
    border: none;
    box-shadow: none;
    /* Remove default bootstrap shadow */
}

/* Button State: Default and Collapsed */
.faq-button:not(.collapsed) {
    background-color: #2a2a47;
    /* Darker shade when open */
    color: var(--cyber-accent);
    /* Accent text when open */
    border-bottom: 1px solid var(--cyber-accent);
}

/* Button Hover State */
.faq-button:hover {
    background-color: #2a2a47;
}

/* Icon (The arrow) color when collapsed */
.faq-button::after {
    filter: invert(1);
    /* Makes the bootstrap arrow white/light */
}

/* Icon (The arrow) color when NOT collapsed */
.faq-button:not(.collapsed)::after {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(220deg);
    /* Makes the arrow cyber accent color */
}

/* 3. Accordion Body Styling */
.faq-body {
    background-color: #12121e;
    /* Even darker background for the content */
    padding: 20px 35px;
    font-size: 0.95rem;
}

.faq-body ul {
    list-style: disc;
    margin-left: 20px;
}

.faq-body ul li {
    margin-bottom: 5px;
}

/**
 * ======================================================================
 * SECTION P: SCHEDULE A DEMO STYLES
 * ======================================================================
 */

/* Main Section Styling */
.demo-section {
    background-color: var(--background-color-dark);
}

/* Form Layout Container Styling */
.demo-form-row {
    max-width: 1100px;
    background-color: transparent;
    border-radius: 1rem;
    overflow: hidden;
    /* For inner card borders */
}

/* 1. Promotional CTA Card Style (Left Column) */
.demo-cta-card {
    background-color: #2a2a47;
    /* Dark accent background */
    border-radius: 1rem 0 0 1rem;
    /* Rounded corners on left */
    border: 1px solid #3f2a7a;
}

.demo-cta-card i {
    color: #00ff7f !important;
    /* Brighter green accent for success icons */
    font-size: 1.1rem;
}

/* 2. Form Card Style (Right Column) */
.demo-form-card {
    background-color: #1a1a2e;
    /* Darker card background for form */
    border-radius: 0 1rem 1rem 0;
    /* Rounded corners on right */
    border: 1px solid #3f2a7a;
    border-left: none;
    /* Optical border merge with CTA card */
}

/* Combine border for mobile view (single column) */
@media (max-width: 991px) {
    .demo-cta-card {
        border-radius: 1rem 1rem 0 0;
        border-bottom: none;
    }

    .demo-form-card {
        border-radius: 0 0 1rem 1rem;
        border-left: 1px solid #3f2a7a;
        /* Add border back for separation */
        border-top: none;
    }
}


/* 3. Form Control Styling (Inputs, Textareas, Selects) */
.form-control,
.form-select {
    background-color: #12121e;
    /* Even darker input background */
    color: #fff;
    border: 1px solid #3f2a7a;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: #12121e;
    color: #fff;
    border-color: #6f42c1;
    /* Cyber accent on focus */
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3);
}

/* Label Styling */
.form-label {
    color: #ddd;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Submit Button Styling (Reusing btn-cyber class) */
.btn-cyber {
    background-color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-cyber:hover {
    background-color: #5a34a4;
    border-color: #5a34a4;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.6);
}

/**
 * ======================================================================
 * SECTION Q: VULNERABILITY DISCLOSURE STYLES (Updated for Layout Fix)
 * ======================================================================
 */

/* Main Section and Container Styling */
.vdp-section {
    min-height: 100vh;
    background-color: var(--background-color-dark);
}

.vdp-content {
    max-width: 900px;
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
}

/* Article/Section Base Style */
.vdp-article {
    padding: 15px 0;
}

/* Heading Styling */
.vdp-heading {
    border-bottom: 2px solid rgba(111, 66, 193, 0.5);
    padding-bottom: 5px;
}

/* Internal Divider */
.vdp-divider {
    border-top: 1px solid rgba(111, 66, 193, 0.3);
    margin: 40px 0;
}

/* Icons for Do's and Don'ts */
.vdp-article .fa-circle-check {
    color: #28a745 !important;
    /* Green for DO */
}

.vdp-article .fa-circle-xmark {
    color: #dc3545 !important;
    /* Red for DO NOT */
}

.vdp-article .fa-angle-right {
    color: var(--cyber-accent);
}

/* ------------------------------------------------------------------ */
/* START LAYOUT FIX CSS */
/* ------------------------------------------------------------------ */

/* Icon Styling and alignment (Ensures icon space is reserved) */
.vdp-item i.vdp-icon {
    flex-shrink: 0;
    width: 20px;
    /* Consistent width for icons */
    text-align: center;
    color: var(--cyber-accent, #6f42c1) !important;
    font-size: 1.2rem;
}

/* Text Content Styling to allow proper wrapping and prevent overlap */
.vdp-text-content {
    flex-grow: 1;
    /* Allows the content to fill remaining space */
    min-width: 0;
    /* Ensures content wraps instead of overflowing in flexbox */
}

/* Icons for In Scope List (using general .vdp-item i style as fallback, specific style now uses .vdp-icon) */
/* The base .vdp-item i style is kept for other list items, but is overridden by .vdp-icon */
.vdp-item i {
    color: var(--cyber-accent, #6f42c1) !important;
    font-size: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* END LAYOUT FIX CSS */
/* ------------------------------------------------------------------ */

/* Out of Scope List (using fa-minus) */
.out-of-scope-list .fa-minus {
    color: #808080 !important;
    /* Grey for low impact/out of scope */
    font-size: 0.9rem;
}


/* Report Box Style (Contact Section) */
.vdp-report-box {
    background-color: #12121e;
    border: 1px dashed var(--cyber-accent, #6f42c1);
}

/* Inverted Cyber Button for Email Link */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-weight: bold;
    transition: all 0.3s ease;
    padding: 10px 30px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.6);
}

/**
 * ======================================================================
 * SECTION R: CONTACT US PAGE STYLES
 * ======================================================================
 */

/* Main Section Styling */
.contact-section {
    background-color: var(--background-color-dark);
}

/* 1. Contact Cards */
.contact-card {
    background-color: #1a1a2e;
    /* Dark card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 0.75rem;
    height: 100%;
    /* Ensure equal height */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.3);
    /* Soft cyber glow on hover */
}

/* Highlight Card (e.g., Support) */
.contact-card-highlight {
    border: 1px solid #dc3545;
    /* Red border for urgency */
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

.contact-card-highlight:hover {
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.6);
    /* Stronger red glow */
}

.contact-icon {
    font-size: 2.5rem;
    color: var(--cyber-accent, #6f42c1);
}

.contact-card-highlight .contact-icon {
    color: #dc3545;
    /* Red icon for support/criticality */
}

/* 2. General Contact Form */
.contact-form-container {
    background-color: #12121e;
    /* Even darker background for contrast */
    border: 1px solid #3f2a7a;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.4);
}

/* Form Control Styling (Inputs, Textareas) */
.form-control {
    background-color: #1a1a2e;
    color: #fff;
    border: 1px solid #3f2a7a;
    transition: all 0.3s ease;
}

.form-control:focus {
    background-color: #1a1a2e;
    color: #fff;
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3);
}

/* Label Styling */
.form-label {
    color: #ddd;
    font-size: 0.95rem;
    font-weight: 500;
}

/**
 * ======================================================================
 * SECTION S: WEBINARS & EVENTS STYLES
 * ======================================================================
 */

/* Main Section Styling */
.events-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Upcoming Event Cards */
.event-card {
    background-color: #1a1a2e;
    /* Dark card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.event-card:hover {
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.4);
    /* Enhanced cyber glow on hover */
}

.event-card ul li {
    margin-bottom: 5px;
    color: #ddd;
}

/* 2. On-Demand List Items */
.on-demand-item {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    /* Lighter border for list items */
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.on-demand-item:hover {
    background-color: #2a2a47;
    /* Subtle highlight on hover */
}

.on-demand-item .fa-circle-play {
    font-size: 1.5rem;
}

/* Outline Cyber Button for Watch Now */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION T: CASE STUDIES STYLES
 * ======================================================================
 */

/* Main Section Styling */
.casestudy-section {
    background-color: var(--background-color-dark);
}

/* 1. Case Study Card Styling */
.casestudy-card {
    background-color: #1a1a2e;
    /* Dark card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* For clean edges */
}

.casestudy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.4);
    /* Enhanced cyber glow on hover */
    cursor: pointer;
}

/* Card Header/Badge Styling */
.casestudy-badge {
    padding: 0.4em 0.8em;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    /* Customizing badge colors to fit the theme better, though using BS colors */
}

/* Summary Text Styling */
.casestudy-summary {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.5;
}

/* Outline Cyber Button for Read More */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION U: WHITEPAPERS & RESOURCES STYLES (Updated with Image Styles)
 * ======================================================================
 */

/* Main Section Styling */
.whitepaper-section {
    background-color: var(--background-color-dark);
}

/* Whitepaper Card Styling */
.whitepaper-card {
    background-color: #1a1a2e;
    /* Dark card background */
    border: 1px solid #3f2a7a;
    /* Cyber accent border */
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* Ensures image and badge don't spill out */
}

.whitepaper-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.4);
    cursor: pointer;
}

/* Whitepaper Image Container (for cover/abstract image) */
.whitepaper-image-container {
    height: 180px;
    /* Fixed height for cover consistency */
    background-color: #0d0d1a;
    /* Very dark background behind the image */
    position: relative;
    display: flex;
    /* Helps in aligning the badge */
    align-items: flex-start;
    /* Align badge to top-left */
    justify-content: flex-start;
    /* Align badge to top-left */
    overflow: hidden;
    /* Ensure image doesn't overflow */
}

/* NEW: Styling for the actual image inside the container */
.whitepaper-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the area without distortion */
    object-position: center;
    /* Centers the image within the container */
}

.whitepaper-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    /* Ensure badge is above the image */
    font-weight: bold;
    font-size: 0.75rem;
}

/* Divider inside the card */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* Outline Cyber Button for Documentation Link */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION V: BLOG PAGE STYLES
 * ======================================================================
 */

/* Main Section Styling */
.blog-section {
    background-color: var(--background-color-dark);
}

/* 1. Featured Post Styling */
.featured-post {
    background-color: #1a1a2e;
    /* Dark background */
    border: 1px solid #3f2a7a;
    box-shadow: 0 0 25px rgba(111, 66, 193, 0.2);
    /* Soft cyber glow */
    position: relative;
}

.featured-image-container {
    height: 250px;
    background-color: #0d0d1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyber-accent);
    font-size: 1.2rem;
    overflow: hidden;
    /* Placeholder styling - replace with actual image */
    border-radius: 0.5rem;
}

/* If using an img tag for featured image: */
.featured-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Recent Post Cards */
.post-card {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.5rem;
    transition: border-color 0.3s ease;
}

.post-card:hover {
    border-color: var(--cyber-accent, #6f42c1);
    /* Accent border on hover */
}

.post-card h5 a:hover {
    color: var(--cyber-accent, #6f42c1) !important;
}

/* 3. Sidebar Styling */
.sidebar {
    background-color: #12121e;
    /* Very dark background for sidebar */
    border: 1px solid #3f2a7a;
}

/* Sidebar Category List */
.category-list li {
    padding: 5px 0;
}

.category-list li a:hover {
    color: var(--cyber-accent, #6f42c1) !important;
    padding-left: 5px;
    transition: padding-left 0.2s ease;
}

/* Sidebar CTA Widget */
.cta-widget {
    background-color: #2a2a47;
    border: 1px solid var(--cyber-accent, #6f42c1);
}

/* Pagination Styling */
.pagination-cyber .page-link {
    background-color: #1a1a2e;
    color: #fff;
    border: 1px solid #3f2a7a;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pagination-cyber .page-item.active .page-link {
    background-color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

.pagination-cyber .page-link:hover {
    background-color: #2a2a47;
    border-color: var(--cyber-accent, #6f42c1);
}

.pagination-cyber .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #1a1a2e;
    border-color: #3f2a7a;
}

/**
 * ======================================================================
 * SECTION W: DOWNLOADS PAGE STYLES
 * ======================================================================
 */

/* Main Section Styling */
.downloads-section {
    background-color: var(--background-color-dark);
}

/* 1. Download Agent Cards */
.download-card {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.3);
}

.download-icon {
    font-size: 3rem;
    color: #007bff;
    /* Blue for Windows/Apple/Linux brands */
}

.fa-apple,
.fa-linux {
    color: #ccc;
    /* Lighter color for Apple/Linux */
}

/* 2. Supporting Tool List Items */
.tool-item {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.tool-item:hover {
    background-color: #2a2a47;
}

.tool-item .fa-screwdriver-wrench,
.tool-item .fa-code,
.tool-item .fa-cubes {
    font-size: 1.2rem;
}

/* Outline Cyber Button for Download Utility */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION X: DOCUMENTATION PAGE STYLES
 * ======================================================================
 */

/* Main Section Styling */
.docs-section {
    background-color: var(--background-color-dark);
}

/* 1. Search Bar Styling */
.docs-search-bar .form-control {
    background-color: #1a1a2e;
    border: 1px solid var(--cyber-accent, #6f42c1);
    color: #fff;
}

.docs-search-bar .form-control:focus {
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.4);
}

/* 2. Navigation Sidebar */
.docs-nav {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    position: sticky;
    /* Sticky navigation */
    top: 20px;
}

.docs-menu li {
    margin-bottom: 5px;
}

.docs-menu li a {
    display: block;
    padding: 3px 0;
}

.docs-menu li a:hover {
    color: #fff !important;
    padding-left: 5px;
    transition: padding-left 0.2s ease;
}

/* 3. Getting Started Featured Section */
.getting-started-section {
    background-color: #12121e;
    border: 3px solid var(--cyber-accent, #6f42c1);
    border-left: 10px solid var(--cyber-accent, #6f42c1);
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.3);
}

/* 4. Documentation Tiles (Main Grid) */
.docs-tile {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.5rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.docs-tile:hover {
    border-color: var(--cyber-accent, #6f42c1);
    background-color: #2a2a47;
    cursor: pointer;
}

.docs-tile-icon {
    font-size: 2rem;
    color: var(--cyber-accent, #6f42c1);
}

/**
 * ======================================================================
 * SECTION Y: DEVELOPER PORTAL STYLES
 * ======================================================================
 */

/* Main Section Styling */
.dev-portal-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Core Resource Tiles */
.dev-tile {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dev-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.4);
}

.dev-icon {
    font-size: 2.5rem;
    color: var(--cyber-accent, #6f42c1);
}

.fa-python {
    /* Specific color for Python icon */
    color: #3776ab;
}

/* 2. Guide List Items (Similar to Downloads/Tools List) */
.guide-item {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.guide-item:hover {
    background-color: #2a2a47;
}

/* 3. Community/Reference Cards */
.dev-community {
    background-color: #12121e;
    border: 1px dashed var(--cyber-accent, #6f42c1);
    border-radius: 0.75rem;
    height: 100%;
    transition: background-color 0.3s ease;
}

.dev-community:hover {
    background-color: #1a1a2e;
}

/* Outline Cyber Button */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION Z: SUPPORT PORTAL STYLES
 * ======================================================================
 */

/* Main Section Styling */
.support-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Search Bar Styling (Same as Documentation) */
.support-search-bar .form-control {
    background-color: #1a1a2e;
    border: 1px solid var(--cyber-accent, #6f42c1);
    color: #fff;
}

.support-search-bar .form-control:focus {
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.4);
}

/* 2. Support Channel Cards */
.support-card {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.3);
}

.support-icon {
    font-size: 3rem;
    color: var(--cyber-accent, #6f42c1);
}

.support-card-phone .support-icon {
    color: #ffc107;
    /* Warning yellow for phone */
}

/* 3. Quick Link Items */
.support-link-item {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.support-link-item:hover {
    background-color: #2a2a47;
}

.support-link-item .fa-heart-pulse {
    color: #28a745 !important;
}

.support-link-item .fa-desktop {
    color: #ffc107 !important;
}

/* Outline Cyber Button */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/**
 * ======================================================================
 * SECTION AA: BECOME A PARTNER STYLES
 * ======================================================================
 */

/* Main Section Styling */
.partner-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Benefit Tiles */
.partner-benefit {
    background-color: #1a1a2e;
    border: 1px solid #2a2a47;
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.partner-benefit:hover {
    background-color: #2a2a47;
}

.partner-icon {
    font-size: 2.5rem;
    color: var(--cyber-accent, #6f42c1);
}

/* 2. Partner Tier Cards */
.tier-card {
    background-color: #1a1a2e;
    border: 2px solid var(--cyber-accent, #6f42c1);
    border-radius: 0.75rem;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.3);
}

.tier-card-mssp {
    border-color: #ffc107;
    /* Warning yellow for MSSP */
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
}

.tier-list li {
    padding-left: 5px;
    margin-bottom: 5px;
}

/* 3. Call to Action */
.partner-cta {
    background-color: #12121e;
    border: 1px solid #3f2a7a;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
}

/* Inverted Cyber Button for Application Link (Reusing VDP style) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-weight: bold;
    transition: all 0.3s ease;
    padding: 10px 30px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.6);
}

/**
 * ======================================================================
 * SECTION AB: DISTRIBUTORS PAGE STYLES
 * ======================================================================
 */

/* Main Section Styling */
.distributors-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Distributor Cards */
.distributor-card {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.distributor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.3);
}

.distributor-icon {
    font-size: 2.5rem;
    color: var(--cyber-accent, #6f42c1);
}

/* 2. Local Partner CTA */
.local-partner-cta {
    background-color: #12121e;
    border: 1px solid #3f2a7a;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
}

/* Outline Cyber Button */
.btn-outline-cyber {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}


/**
 * ======================================================================
 * SECTION AC: STRATEGIC PARTNERS STYLES
 * ======================================================================
 */

/* Main Section Styling */
.strategic-partner-section {
    background-color: var(--background-color-dark);
}

/* Define the lighter accent border for dividers */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/* 1. Partner Tiles */
.partner-tile {
    background-color: #1a1a2e;
    border: 1px solid #3f2a7a;
    border-radius: 0.75rem;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.3);
    border-color: var(--cyber-accent, #6f42c1);
}

/* Styling for Partner Logos (using placeholder) */
.partner-logo {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    padding: 5px;
    /* Add slight padding if logos are dark/light */
    background-color: #0d0d1a;
    /* Background for placeholder logo */
}

/**
 * ======================================================================
 * SECTION AD: SERVICE PROVIDERS STYLES (V4 - DATA PORTAL VIEW)
 * ======================================================================
 */
:root {
    --cyber-accent: #6f42c1;
    --background-color-dark: #0d0d1a;
    --card-bg: #1a1a2e;
    --border-color-default: #3f2a7a;
}

/* Main Section Styling */
.service-provider-section {
    background-color: var(--background-color-dark);
    /* Global safety measure */
    overflow-x: hidden;
}

/* 1. Filter/Search Bar Styling (Safe, clean design) */
.provider-filter-bar {
    background-color: #12121e;
    border: 1px solid var(--border-color-default);
    box-shadow: none;
    /* No shadow */
}

.provider-filter-bar .form-control,
.provider-filter-bar .form-select {
    background-color: #1a1a2e;
    border: 1px solid var(--border-color-default);
    color: #fff;
}

.provider-filter-bar .form-select option {
    background-color: #1a1a2e;
}

.provider-filter-bar .form-control::placeholder {
    color: #ccc;
}

/* 2. Provider List Styles */

/* Header for the list (e.g., Partner, Focus, Region) */
.provider-list-header {
    background-color: #12121e;
    border-bottom: 3px solid var(--cyber-accent);
    color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
    letter-spacing: 0.5px;
}

/* Individual Provider Item (The "Row") */
.provider-item {
    background-color: #1a1a2e;
    border: 1px solid var(--border-color-default);
    border-radius: 0.5rem;
    margin-top: 10px;
    /* Space between rows */

    box-shadow: none;
    /* No shadow */
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Hover Effect: Clean border and slight background shift */
.provider-item:hover {
    background-color: #1f1f3a;
    border-color: var(--cyber-accent);
    cursor: pointer;
}

/* Partner Logo */
.provider-logo {
    max-width: 100px;
    height: auto;
    background-color: #0d0d1a;
    border: 1px solid #2a2a47;
    padding: 5px;
}

/* Responsive adjustments for the row items */
@media (max-width: 767.98px) {
    .provider-item {
        /* On mobile, stack items */
        display: block !important;
        text-align: left;
    }

    .partner-info,
    .partner-details,
    .partner-region,
    .partner-tier-status,
    .partner-action {
        width: 100% !important;
        text-align: left !important;
    }

    .partner-action {
        margin-top: 15px !important;
    }

    .provider-logo {
        max-width: 150px;
    }
}

/* Outline Cyber Button */
.btn-outline-cyber {
    color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    transition: all 0.3s ease;
}

.btn-outline-cyber:hover {
    background-color: var(--cyber-accent);
    color: #fff;
}


/**
 * ======================================================================
 * SECTION AE: PARTNER PROGRAMS STYLES
 * ======================================================================
 */
:root {
    --cyber-accent: #6f42c1;
    --background-color-dark: #0d0d1a;
    --card-bg: #1a1a2e;
    --border-color-default: #3f2a7a;
}

/* Main Section Styling */
.partner-programs-section {
    background-color: var(--background-color-dark);
}

/* 1. Program Cards */
.program-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color-default);
    border-radius: 0.75rem;
    height: 100%;

    /* Safe design: No shadow, clean border */
    box-shadow: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

.program-card:hover {
    /* Hover effect: Subtle background change and border highlight */
    background-color: #1f1f3a;
    border-color: var(--cyber-accent);
    cursor: pointer;
}

/* Highlight Card for the main focus (MSSP) */
.highlight-card {
    border: 2px solid var(--cyber-accent);
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.4);
    /* Minimal, focused shadow only on highlight */
}

.highlight-card:hover {
    background-color: #2a1e50;
    /* Darker hover for highlight card */
}

.program-icon {
    font-size: 2.5rem;
    color: var(--cyber-accent);
}

.program-features li {
    padding: 5px 0;
    border-bottom: 1px dashed #2a2a47;
}

/* Utility Class (ensure consistency) */
.border-cyber-accent-light {
    border-color: rgba(111, 66, 193, 0.5) !important;
}

/**
 * ======================================================================
 * SECTION AF: SPECIAL OFFERS STYLES (RIBBON UPDATE V2)
 * ======================================================================
 */
:root {
    --cyber-accent: #6f42c1;
    --background-color-dark: #0d0d1a;
    --card-bg: #1a1a2e;
    --border-color-default: #3f2a7a;
    --ribbon-text-color: #0d0d1a;
}

/* 1. Offer Cards */
.offer-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color-default);
    border-radius: 0.75rem;
    height: 100%;
    text-align: center;
    position: relative;
    /* ESSENTIAL for ribbon */
    box-shadow: none;
    transition: all 0.3s ease;
    overflow: hidden;
    /* ESSENTIAL for clean ribbon edge */
}

/* Primary Highlight Card (MSSP - BEST VALUE) */
.highlight-offer-card {
    border: 3px solid var(--cyber-accent);
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
}

/* Secondary Highlight Card (Other two offers) */
.highlight-offer-card-light {
    border: 1px solid #6f42c140;
}


/* ... (Icon and Feature Styles remain the same) ... */
.offer-icon {
    font-size: 3rem;
    color: var(--cyber-accent);
}

.offer-features {
    text-align: left;
    padding-left: 20px;
    color: #ccc;
}

.offer-features li {
    padding: 5px 0;
}


/* 2. CORNER RIBBON STYLING (Universal for all three cards) */
.corner-ribbon {
    width: 250px;
    top: 25px;
    right: -85px;
    position: absolute;
    padding: 6px 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--ribbon-text-color);
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Ribbon Color Classes */
/* 1. BEST VALUE (Primary Cyber Color) */
.ribbon-primary {
    background: var(--cyber-accent);
    color: #fff;
    /* White text on dark purple */
}

.ribbon-primary:before,
.ribbon-primary:after {
    border-top-color: #5c379e !important;
}

/* 2. TRIAL (Danger/Urgency Color - Red/Orange) */
.ribbon-danger {
    background: #dc3545;
    /* Bootstrap Red */
}

.ribbon-danger:before,
.ribbon-danger:after {
    border-top-color: #a72330 !important;
}

/* 3. NEW CUSTOMER (Info/New Color - Cyan/Aqua) */
.ribbon-info {
    background: #17a2b8;
    /* Bootstrap Cyan/Aqua */
}

.ribbon-info:before,
.ribbon-info:after {
    border-top-color: #0f6674 !important;
}


/* Pseudo-elements for the pointy ends (3D effect) */
.corner-ribbon:before,
.corner-ribbon:after {
    content: "";
    position: absolute;
    display: block;
    border-width: 5px;
    border-style: solid;
}

.corner-ribbon:before {
    top: 100%;
    left: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.corner-ribbon:after {
    top: 0;
    right: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/**
 * ======================================================================
 * SECTION R: MARKETPLACE INTEGRATIONS STYLES
 * ======================================================================
 * Styles for the Integration Marketplace section, using a cyber/dark theme.
 * Please add this block to your main CSS file.
 */

/* ------------------------------------------------------------------ */
/* 1. Card Styling (.marketplace-card) */
/* ------------------------------------------------------------------ */
.marketplace-card {
    /* Using variables defined in 123.txt for dark background and border */
    background-color: var(--cyber-card-bg, #1e1e1e);
    border: 1px solid var(--border-color-default, #303030);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marketplace-card:hover {
    transform: translateY(-5px);
    /* Lifts the card on hover */
    border-color: var(--cyber-accent, #6f42c1);
    /* Cyber purple border on hover */
    box-shadow: 0 5px 25px rgba(111, 66, 193, 0.4);
    /* Glowing shadow */
}

.marketplace-card .card-title {
    color: #fff;
    font-weight: 700;
}

.marketplace-icon {
    font-size: 2rem;
    color: var(--hero-accent, #7446ac);
}

/* ------------------------------------------------------------------ */
/* 2. Tag Styling (.marketplace-tag) */
/* ------------------------------------------------------------------ */
.marketplace-tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4em 0.7em;
    margin-right: 5px;
    border-radius: 5px;
    opacity: 0.9;
}

/* Specific Tag Colors for visual separation */
.tag-siem,
.tag-logs {
    background-color: #38a169;
    /* Greenish */
}

.tag-threat,
.tag-ai {
    background-color: #e53e3e;
    /* Reddish */
}

.tag-itsm,
.tag-workflow {
    background-color: #3182ce;
    /* Bluish */
}

.tag-cloud,
.tag-config {
    background-color: #dd6b20;
    /* Orange */
}

.tag-malware,
.tag-forensics {
    background-color: #d69e2e;
    /* Yellowish-Brown */
}

.tag-idm,
.tag-auth {
    background-color: #805ad5;
    /* Purplish */
}

/* ------------------------------------------------------------------ */
/* 3. Search Bar Styling (.marketplace-search-box) */
/* ------------------------------------------------------------------ */
.marketplace-search-box .form-control {
    background-color: #242424;
    border: 1px solid var(--cyber-accent, #6f42c1);
    color: #fff;
    border-radius: 0.5rem 0 0 0.5rem;
    padding: 0.75rem 1rem;
}

.marketplace-search-box .form-control:focus {
    background-color: #1a1a1a;
    border-color: var(--cyber-accent, #6f42c1);
    /* Glowing effect on focus */
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5);
    color: #fff;
}

.btn-cyber-accent-search {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    font-weight: 700;
    border: 1px solid var(--cyber-accent, #6f42c1);
    border-radius: 0 0.5rem 0.5rem 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-cyber-accent-search:hover {
    background-color: #7d4fc4;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.7);
}

/* ------------------------------------------------------------------ */
/* 4. Button Styling (.btn-marketplace-install / .btn-marketplace-view) */
/* ------------------------------------------------------------------ */

/* Install Button (Primary action - Neon Green) */
.btn-marketplace-install {
    background-color: #39ff14;
    /* Neon Green */
    color: #000;
    font-weight: 700;
    border: 1px solid #39ff14;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.btn-marketplace-install:hover {
    background-color: #1aff00;
    box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
    /* Neon glow effect */
    color: #000;
}

/* View Button (Secondary action - Cyber Blue/Purple) */
.btn-marketplace-view {
    background-color: transparent;
    color: var(--cyber-accent, #6f42c1);
    border: 2px solid var(--cyber-accent, #6f42c1);
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.btn-marketplace-view:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.6);
}


/**
 * ======================================================================
 * SECTION S: FINANCING OPTIONS STYLES
 * ======================================================================
 * Styles for the Financing Options section.
 */

/* Main Section Styling */
.financing-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--darker-bg, #121212);
}

/* ------------------------------------------------------------------ */
/* 1. Model Cards (.financing-model-card) */
/* ------------------------------------------------------------------ */
.financing-model-card {
    background-color: var(--cyber-card-bg, #1e1e1e);
    border: 1px solid var(--border-color-default, #303030);
    border-radius: 0.75rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.financing-model-card:hover {
    border-color: var(--cyber-accent, #6f42c1);
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.4);
    transform: translateY(-3px);
}

.financing-icon {
    font-size: 3rem;
    color: var(--cyber-accent, #6f42c1);
    opacity: 0.8;
}

/* ------------------------------------------------------------------ */
/* 2. Partner Logos (NEW HORIZONTAL SCROLLER DESIGN) */
/* ------------------------------------------------------------------ */
.logo-scroller-wrapper {
    /* Ensures the scroller doesn't hit container padding */
    padding: 0 1rem;
}

.logo-scroller {
    display: flex;
    overflow-x: auto;
    /* Enables horizontal scrolling */
    white-space: nowrap;
    /* Prevents logos from wrapping */
    padding-bottom: 10px;
    /* Space for scrollbar */
    justify-content: flex-start;
    /* Start logos from the left */
    /* Add subtle glow around scroller to indicate scrollability */
    box-shadow: inset 0 -5px 10px -5px rgba(0, 0, 0, 0.5);
    /* Hide scrollbar on some browsers for cleaner look */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.logo-scroller::-webkit-scrollbar {
    display: none;
}

.partner-logo-box {
    height: 80px;
    min-width: 180px;
    /* Fixed width ensures logos don't shrink */
    max-width: 250px;
    flex-shrink: 0;
    /* Prevents shrinking */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #303030;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.partner-logo-box:hover {
    border-color: var(--cyber-accent, #6f42c1);
    background-color: #1a1a1a;
}

.logo-text {
    font-family: 'Orbitron', sans-serif;
    /* Using a tech font for mock logos */
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* 3. CTA Box and Form (.financing-cta-box) */
/* ------------------------------------------------------------------ */
.financing-cta-box {
    max-width: 600px;
    background-color: #1a1a2e;
    /* Slightly different dark shade */
    border: 2px solid var(--cyber-accent, #6f42c1);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
    padding: 3rem !important;
}

.financing-input {
    background-color: #2c2c4d;
    border: 1px solid #4a4a75;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: border-color 0.3s ease;
}

.financing-input::placeholder,
.financing-input option {
    color: #a0a0a0;
}

.financing-input:focus {
    background-color: #242440;
    border-color: #8c60dc;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3);
    color: #fff;
}

/* Custom Select Dropdown Arrow Color (for form-select) */
.financing-input.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* CTA Button (Same as primary button on other pages) */
.btn-cyber-cta {
    background-color: var(--hero-accent, #7446ac);
    color: #fff;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
}

.btn-cyber-cta:hover {
    background-color: #8c60dc;
    box-shadow: 0 0 15px rgba(116, 70, 172, 0.7);
    transform: translateY(-1px);
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .financing-cta-box {
        padding: 2rem !important;
    }
}

/**
 * ======================================================================
 * SECTION XDR: OCTOPYDER XDR PRODUCT PAGE STYLES
 * ======================================================================
 */

/* Define Cyber Theme Variables (Assuming this block is already defined globally, but adding here for standalone clarity) */
:root {
    /* Primary Accent Colors */
    --cyber-accent: #6f42c1;
    /* Deep Purple Accent (Used in Dashboard & Glow) */
    --hero-accent: #7446ac;
    /* Secondary Theme Color (Slightly lighter purple for Hero/Buttons) */
    /* Background Colors */
    --darker-bg: #121212;
    /* Main Page Dark Background */
    --card-bg: #1e1e1e;
    /* Dark Background for Cards/Containers */
    --text-color: #f8f8f8;
    --border-color: #303030;
}

/* Base Section Styles */
.xdr-section {
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.font-orbitron {
    /* Using a distinct font for the main title for a tech/cyber feel */
    font-family: 'Orbitron', sans-serif;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------ */
/* 1. Main Accent Button (.btn-cyber-cta-primary) */
/* ------------------------------------------------------------------ */
.btn-cyber-cta-primary {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
}

.btn-cyber-cta-primary:hover {
    background-color: #8c60dc;
    border-color: #8c60dc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(111, 66, 193, 0.8);
}

/* ------------------------------------------------------------------ */
/* 2. Feature List Icons and Styles */
/* ------------------------------------------------------------------ */
.feature-icon {
    color: #17a2b8;
    /* Cyan/Aqua for secondary accent on features */
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Image Placeholders (The Eye-Catching Element) */
/* ------------------------------------------------------------------ */
.image-placeholder-box {
    background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
    border: 2px solid var(--cyber-accent);
    border-radius: 1rem;
    box-shadow: 0 0 25px rgba(111, 66, 193, 0.4);
    transition: all 0.4s ease;
    aspect-ratio: 16 / 9;
    /* Modern aspect ratio for screenshots */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Pulsing effect on the border */
    animation: pulse-border 4s infinite ease-in-out;
}

.image-placeholder-box:hover {
    box-shadow: 0 0 40px rgba(111, 66, 193, 0.8);
}

@keyframes pulse-border {
    0% {
        border-color: var(--cyber-accent);
    }

    50% {
        border-color: #8c60dc;
    }

    100% {
        border-color: var(--cyber-accent);
    }
}

/* ------------------------------------------------------------------ */
/* 4. Stat Boxes (Metrics) */
/* ------------------------------------------------------------------ */
.stat-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    min-width: 150px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-size: 2rem;
    color: #ff9900;
    /* Orange/Gold for metrics */
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* 5. CTA Box and Form */
/* ------------------------------------------------------------------ */
.cta-box {
    max-width: 700px;
    background-color: #1a1a2e;
    border: 3px solid var(--cyber-accent);
    border-radius: 1rem;
    box-shadow: 0 0 30px rgba(111, 66, 193, 0.6);
    padding: 3rem !important;
}

.cta-input {
    background-color: #2c2c4d;
    border: 1px solid #4a4a75;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.cta-input:focus {
    background-color: #242440;
    border-color: #8c60dc;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.3);
    color: #fff;
}

.btn-cyber-cta-secondary {
    background-color: #17a2b8;
    /* Cyan for secondary CTA */
    color: #fff;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

.btn-cyber-cta-secondary:hover {
    background-color: #138496;
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.7);
}

/**
 * ======================================================================
 * SECTION GUIDE: FREE TRIAL GUIDE STYLES
 * ======================================================================
 */

/* Define Cyber Theme Variables (Ensure these match your global definitions) */
:root {
    --cyber-accent: #6f42c1;
    /* Deep Purple Accent */
    --cyan-accent: #17a2b8;
    /* Cyan/Aqua for secondary contrast */
    --darker-bg: #121212;
    /* Main Dark Background */
    --card-bg: #1e1e1e;
    /* Card Background */
    --text-color: #f8f8f8;
    --text-muted: #a0a0a0;
}

/* Base Section Styling */
.trial-guide-section {
    background-color: var(--darker-bg);
    color: var(--text-color);
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

/* 1. Overview Card */
.trial-overview-card {
    background: linear-gradient(135deg, #181818, #222222);
    border: 1px solid var(--border-color, #303030);
    border-left: 5px solid var(--cyber-accent);
    /* Left accent bar */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* 2. Trial Timeline (The Attractive Part) */
.trial-timeline {
    position: relative;
    padding-left: 2rem;
    /* Space for the vertical line */
}

/* Vertical Timeline Line */
.trial-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.5rem;
    /* Center of the icons */
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
    /* Subtle vertical glow */
}

.trial-step {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 2.5rem;
}

.trial-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    border: 3px solid var(--darker-bg);
    /* Overlay border to make it pop */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.6);
    /* Icon glow */
}

/* Color definitions for the icons */
.bg-cyber-accent {
    background-color: var(--cyber-accent);
}

.bg-cyan-accent {
    background-color: var(--cyan-accent);
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.6);
    /* Cyan glow */
}

.trial-content {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--cyber-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* 3. Final CTA Box */
.final-cta-box {
    background: linear-gradient(135deg, #1c1c1c, #101010);
    border: 3px solid var(--cyan-accent);
    box-shadow: 0 0 25px rgba(23, 162, 184, 0.5);
}

/* Button Styles (Reusing Octopyder XDR styles) */
.btn-cyber-cta-primary {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
}

.btn-cyber-cta-primary:hover {
    background-color: #8c60dc;
    border-color: #8c60dc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(111, 66, 193, 0.8);
}

.btn-cyber-inverted {
    background-color: transparent;
    color: var(--cyan-accent);
    border: 1px solid var(--cyan-accent);
    transition: all 0.3s ease;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyan-accent);
    color: var(--darker-bg);
    border-color: var(--cyan-accent);
}


/**
 * ======================================================================
 * SECTION PRICING: PRICING CARD STYLES
 * ======================================================================
 */

/* Define Cyber Theme Variables */
:root {
    --cyber-accent: #6f42c1;
    /* Deep Purple Accent */
    --cyan-accent: #17a2b8;
    /* Cyan/Aqua for secondary contrast */
    --darker-bg: #121212;
    /* Main Dark Background */
    --card-bg: #1e1e1e;
    /* Card Background */
    --text-color: #f8f8f8;
    --border-color: #303030;
}

/* Base Section Styling */
.pricing-section {
    background-color: var(--darker-bg);
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

/* 1. Pricing Toggle Switch */
.pricing-toggle {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.pricing-btn {
    color: var(--text-muted);
    transition: all 0.3s ease;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem !important;
}

.pricing-btn.active {
    background-color: var(--cyber-accent);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

/* 2. Pricing Cards */
.pricing-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Highlighted Card (Pro/Best Value) */
.highlighted-card {
    border: 3px solid var(--cyan-accent);
    background: linear-gradient(135deg, #181818, #222222);
    box-shadow: 0 0 35px rgba(23, 162, 184, 0.4);
    transform: scale(1.03);
    /* Slightly larger */
}

.highlighted-card:hover {
    box-shadow: 0 0 50px rgba(23, 162, 184, 0.8);
    transform: scale(1.05);
}

/* Ribbon for Best Value */
.ribbon-best-value {
    position: absolute;
    top: 15px;
    right: -40px;
    background-color: var(--cyber-accent);
    color: #fff;
    padding: 5px 30px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Price Text Styling */
.price-display {
    line-height: 1;
}

.price-display .currency-symbol {
    font-size: 1.5rem;
    vertical-align: top;
    color: var(--cyan-accent);
}

.price-display .period {
    font-size: 1.25rem;
    font-weight: 500;
}

/* Feature List */
.feature-list-small {
    padding-left: 0;
}

.feature-list-small li {
    font-size: 0.95rem;
    color: var(--text-color);
}

.feature-list-small i {
    font-size: 1.1rem;
}

/* Button Styles (Reusing Octopyder XDR styles) */
.btn-cyber-cta-primary {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

.btn-cyber-cta-primary:hover {
    background-color: #8c60dc;
    border-color: #8c60dc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(111, 66, 193, 0.8);
}

.btn-cyber-inverted {
    background-color: transparent;
    color: var(--cyan-accent);
    border: 1px solid var(--cyan-accent);
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyan-accent);
    color: var(--darker-bg);
    border-color: var(--cyan-accent);
}


/**
 * ======================================================================
 * SECTION EXECUTIVE LEADERSHIP: CARD STYLES
 * ======================================================================
 */

/* Define Cyber Theme Variables (Ensure consistency with other files) */
:root {
    --cyber-accent: #6f42c1;
    /* Deep Purple Accent */
    --cyan-accent: #17a2b8;
    /* Cyan/Aqua for secondary contrast */
    --darker-bg: #121212;
    /* Main Dark Background */
    --card-bg: #1e1e1e;
    /* Card Background */
    --text-color: #f8f8f8;
    --border-color: #303030;
}

/* Base Section Styling */
.executive-section {
    background-color: var(--darker-bg);
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

/* Executive Card Styling */
.executive-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease-in-out;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    /* FLEXBOX FIX for vertical alignment of content */
    min-height: 400px;
    /* Ensures a consistent card height for a cleaner grid */
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    justify-content: flex-start;
    /* Start content from the top */
}

/* Hover Effect: Cyber Glow */
.executive-card:hover {
    border-color: var(--cyan-accent);
    transform: translateY(-8px);
    box-shadow: 0 10px 40px rgba(23, 162, 184, 0.5);
    /* Cyan glow on hover */
}

/* Image Styling - FIX: Added display: block and margin: 0 auto for perfect centering */
.card-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--cyber-accent);
    transition: all 0.4s ease;
    /* CENTERING FIX */
    display: block;
    margin: 0 auto 1rem auto;
    /* Top/Bottom margin set back to original spacing */
}

/* Image Glow on Card Hover */
.executive-card:hover .card-image {
    border-color: var(--cyan-accent);
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.7);
}

/* Title (Role) Styling */
.executive-card .card-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Bio/Mantra Styling - Vertical Alignment Fix */
.executive-card .card-bio {
    flex-grow: 1;
    /* This makes the bio take up all available vertical space */
    margin-bottom: 0.5rem;
}

/* Social Links */
.social-links a {
    color: var(--text-color) !important;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--cyan-accent) !important;
}

/* Button Styles (Reusing Octopyder XDR styles) */
.btn-cyber-cta-primary {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

.btn-cyber-cta-primary:hover {
    background-color: #8c60dc;
    border-color: #8c60dc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(111, 66, 193, 0.8);
}


/* ------------------------------------------------------------------ */
/* SECTION: BOARD DIRECTORS STYLES */
/* ------------------------------------------------------------------ */

/* Director Card Styling */
.director-card {
    background-color: var(--cyber-card-bg);
    /* Darker background from css.txt */
    border: 1px solid rgba(111, 66, 193, 0.3);
    /* Subtle accent border */
    padding: 2.5rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    height: 100%;
    /* Ensure cards are same height in the grid */
}

/* Cyber Glow Hover Effect */
.director-card:hover {
    border-color: var(--cyber-accent);
    /* Neon Glow effect using accent color */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.7), 0 0 5px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
    /* Lift the card slightly */
}

/* Image Container and Avatar */
.director-img-container {
    display: inline-block;
    margin-bottom: 1.5rem;
    position: relative;
}

.director-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* Circular image */
    object-fit: cover;
    border: 3px solid var(--hero-accent);
    /* Accent color ring */
    transition: all 0.3s ease;
}

/* Avatar Hover Effect */
.director-card:hover .director-avatar {
    border-color: #fff;
    /* White ring on hover */
    box-shadow: 0 0 10px var(--cyber-accent);
}

.director-name {
    font-family: 'Orbitron', sans-serif;
    /* Use theme's display font */
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.director-title {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.director-bio {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Social Links Styling */
.social-links a {
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--cyber-accent) !important;
    /* Accent color on hover for icons */
}

/* ------------------------------------------------------------------ */
/* END SECTION: BOARD DIRECTORS STYLES */
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* SECTION: NEWSROOM STYLES */
/* ------------------------------------------------------------------ */

/* Pagination + Separator Fix with Balanced Spacing */
.pagination-fix-container {
    clear: both;
    position: relative;
    z-index: 2;
    text-align: center;

    /* spacing between cards and pagination */
    margin-top: 4rem;
    /* distance from cards */
    padding-top: 3rem;
    /* space above line */
    padding-bottom: 1rem;
    /* space below line before pagination */
}

/* Decorative separator line */
.pagination-fix-container::before {
    content: "";
    display: block;
    position: absolute;
    top: 2rem;
    /* position line from top */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: 1;
}

/* ---------- Responsive Adjustments ---------- */

/* Medium Devices (Tablets) */
@media (max-width: 991.98px) {
    .pagination-fix-container {
        margin-top: 3rem;
        padding-top: 2.5rem;
        padding-bottom: 1.5rem;
    }

    .pagination-fix-container::before {
        top: 1.5rem;
    }
}

/* Small Devices (Phones) */
@media (max-width: 768px) {
    .pagination-fix-container {
        margin-top: 3rem;
        padding-top: 2.2rem;
        padding-bottom: 2.5rem;
        /* 👈 Added extra bottom padding for mobile */
    }

    .pagination-fix-container::before {
        top: 1.2rem;
        /* 👈 slight upward adjust to keep space even */
    }
}

/* ------------------------------------------------------------------ */
/* Base Card Styling */
.news-card {
    background-color: var(--cyber-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-card:hover {
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
    transform: translateY(-2px);
}

.news-card .card-img-top {
    height: auto;
    width: 100%;
    object-fit: cover;
}

/* Featured Card */
.featured-card .card-body {
    padding: 2.5rem;
}

.featured-card .news-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: #fff;
}

/* Side Card */
.side-card {
    padding: 1rem;
    border-left: 5px solid var(--cyber-accent);
}

.side-card .card-body {
    padding: 0;
}

.side-card .news-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #fff;
}

.side-card:hover .news-title {
    color: var(--cyber-accent);
}

/* Category Badge */
.bg-cyber-accent-soft {
    background-color: rgba(111, 66, 193, 0.8) !important;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    text-transform: uppercase;
}

.bg-secondary-accent {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--cyber-accent) !important;
    font-size: 0.75rem;
}

/* Read More Link */
.read-more-link {
    font-weight: 500;
    text-decoration: none;
    transition: margin-left 0.3s ease;
}

.read-more-link:hover {
    margin-left: 5px;
    text-decoration: underline;
}

/* Cyber Pagination */
.pagination-cyber .page-item .page-link {
    background-color: var(--cyber-card-bg);
    border-color: rgba(111, 66, 193, 0.3);
    color: #fff;
    transition: all 0.2s;
}

.pagination-cyber .page-item .page-link:hover {
    background-color: rgba(111, 66, 193, 0.2);
    border-color: var(--cyber-accent);
    color: var(--cyber-accent);
}

.pagination-cyber .page-item.active .page-link {
    background-color: var(--cyber-accent);
    border-color: var(--cyber-accent);
    color: #fff;
    box-shadow: 0 0 5px var(--cyber-accent);
}

/* Inverted Cyber Button */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: NEWSROOM STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: ENDPOINT SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* Image Shadow/Glow */
.ep-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Bullet List Styling (Reusing success-light for checkmark) */
.ep-bullet-list {
    padding-left: 0;
}

.ep-bullet-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

.text-success-light {
    /* Using the lighter green color from IR section for 'good' status */
    color: #46ac74 !important;
}


/* XDR Solution Box - Highlighted Section */
.ep-solution-box {
    background-color: var(--cyber-card-bg);
    /* Dark card background */
    border: 2px solid var(--cyber-accent);
    /* Pronounced shadow/glow for a major block */
    box-shadow: 0 0 30px rgba(111, 66, 193, 0.7);
}

/* Feature Card inside the Solution Box */
.ep-feature-card {
    text-align: center;
    padding: 1.5rem;
    background-color: #242424;
    /* Slightly darker than container, or just blend */
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
}

.ep-feature-card:hover {
    background-color: #303030;
    transform: translateY(-5px);
}

.ep-feature-card h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    margin-bottom: 0.5rem;
}


/* Inverted Cyber Button (Large, Reused style) */
.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: ENDPOINT SECURITY STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: WAVRO AI STYLES */
/* ------------------------------------------------------------------ */

/* Hero Box Styling */
.wavro-hero-box {
    background-color: var(--cyber-card-bg);
    border: 1px solid var(--hero-accent);
    /* Stronger neon glow for the AI block */
    box-shadow: 0 0 40px rgba(116, 70, 172, 0.4);
    z-index: 2;
    position: relative;
}

/* Benefit List (Reused success-light) */
.wavro-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Simulated Chat Interface Box */
.wavro-chat-interface {
    background-color: #12121e;
    /* Even darker blueish background for chat */
    border: 2px solid var(--cyber-accent);
    border-radius: 12px;
    padding: 1.5rem;
    height: 350px;
    /* Fixed height for visual consistency */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Inner shadow to mimic screen glow */
    box-shadow: inset 0 0 10px rgba(111, 66, 193, 0.3);
}

/* Individual Chat Message Styling */
.chat-message {
    padding: 0.75rem 1rem;
    border-radius: 20px;
    max-width: 90%;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Rajdhani', sans-serif;
}

/* User Messages (Right aligned, Green/White theme) */
.chat-message.user {
    background-color: #46ac74;
    /* Success light */
    color: var(--cyber-dark-bg);
    align-self: flex-end;
    margin-left: auto;
    border-bottom-right-radius: 2px;
    font-weight: 500;
}

/* AI Messages (Left aligned, Accent/Dark theme) */
.chat-message.ai {
    background-color: var(--cyber-accent);
    color: #fff;
    align-self: flex-start;
    margin-right: auto;
    border-bottom-left-radius: 2px;
    font-weight: 400;
}


/* Feature Item Cards */
.wavro-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    border-bottom: 3px solid var(--cyber-accent);
    height: 100%;
    transition: all 0.3s ease;
}

.wavro-feature-item:hover {
    background-color: #242424;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.5);
}

.wavro-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}


/* Reused Inverted Cyber Button Style */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: WAVRO AI STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: AI DETECTION & RESPONSE STYLES */
/* ------------------------------------------------------------------ */

/* AI Superiority Highlight Box */
.ai-advantage-box {
    background-color: rgba(111, 66, 193, 0.1);
    /* Very light accent background */
    border-left: 5px solid var(--cyber-accent);
    color: #fff;
}

.ai-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* AI Workflow Step Styling */
.ai-workflow-step {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-workflow-step:hover {
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.ai-workflow-step h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.step-icon-container i {
    color: var(--hero-accent);
    /* Use a slightly different accent for icons */
}

/* Separator Icon Styling (The arrows) */
.ai-workflow-grid .fa-arrow-right {
    color: var(--hero-accent);
}

/* Zero-Day Protection Highlight Box */
.zero-day-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid #ffc107;
    /* Yellow/Warning border */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

/* ------------------------------------------------------------------ */
/* END SECTION: AI DETECTION & RESPONSE STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: SAAS SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* SaaS Challenge Highlight Box */
.saas-challenge-block {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Stronger neon glow for the main block */
    box-shadow: 0 0 30px rgba(116, 70, 172, 0.4);
}

/* SaaS Icon Box for visual representation */
.saas-icon-box {
    padding: 1.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: #1a1a24;
}

.saas-icon-box i {
    margin: 0 8px;
    transition: transform 0.3s ease;
}

.saas-icon-box i:hover {
    transform: scale(1.1);
}

/* Feature Item Cards */
.saas-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.saas-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.saas-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.saas-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* ------------------------------------------------------------------ */
/* END SECTION: SAAS SECURITY STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: IDENTITY SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* Identity Challenge/Zero Trust Block */
.identity-challenge-block {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--hero-accent);
    /* Neon glow emphasizing the perimeter shift */
    box-shadow: 0 0 35px rgba(111, 66, 193, 0.4);
}

/* Benefit List (using success-light for checkmark) */
.identity-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

.identity-benefit-list .text-success-light {
    color: #46ac74 !important;
    /* Lighter green */
}


.identity-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Feature Item Cards (Detection & Response Grid) */
.identity-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.identity-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.identity-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.identity-feature-item i {
    color: var(--hero-accent);
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: IDENTITY SECURITY STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: EXPOSURE MANAGEMENT STYLES */
/* ------------------------------------------------------------------ */

/* Exposure Loop Highlight Box */
.exposure-loop-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong focus glow */
    box-shadow: 0 0 30px rgba(116, 70, 172, 0.4);
}

/* Step Items inside the Loop */
.exposure-step-item {
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
}

.exposure-step-item:hover {
    background-color: #242424;
    transform: translateY(-5px);
}

.exposure-step-item h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #fff;
}

/* Feature Card Styling (List-style cards) */
.exposure-feature-card {
    background-color: var(--cyber-card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
    border-left: 5px solid var(--hero-accent);
    /* Accent border on the side */
    transition: all 0.3s ease;
}

.exposure-feature-card:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
}

.exposure-feature-card h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
}

.exposure-feature-card i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* ------------------------------------------------------------------ */
/* END SECTION: EXPOSURE MANAGEMENT STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: IT AUTOMATION STYLES */
/* ------------------------------------------------------------------ */

/* Automation Value Highlight Box */
.auto-value-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing efficiency */
    box-shadow: 0 0 30px rgba(116, 70, 172, 0.4);
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.auto-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Use Case Item Cards */
.auto-usecase-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auto-usecase-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.auto-usecase-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.auto-usecase-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* ------------------------------------------------------------------ */
/* END SECTION: IT AUTOMATION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: THREAT INTELLIGENCE & HUNTING STYLES */
/* ------------------------------------------------------------------ */

/* Threat Intelligence Advantage Box */
.ti-advantage-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong focus glow */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List (using success-light for checkmark) */
.ti-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

.ti-benefit-list .text-success-light {
    color: #46ac74 !important;
    /* Lighter green */
}

.ti-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Hunting Feature Item Cards */
.hunting-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hunting-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.hunting-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.hunting-feature-item i {
    color: var(--hero-accent);
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: THREAT INTELLIGENCE & HUNTING STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: CLOUD SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* Cloud Challenge Highlight Box */
.cloud-challenge-block {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--hero-accent);
    /* Strong glow focusing on the shared model */
    box-shadow: 0 0 35px rgba(111, 66, 193, 0.4);
}

/* Benefit List (using success-light and warning for emphasis) */
.cloud-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

.cloud-benefit-list .text-success-light {
    color: #46ac74 !important;
    /* Lighter green */
}


.cloud-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Cloud Feature Item Cards */
.cloud-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cloud-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.cloud-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.cloud-feature-item i {
    color: var(--hero-accent);
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: CLOUD SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: WORKFLOW AUTOMATION STYLES */
/* ------------------------------------------------------------------ */

/* Automation Advantage Highlight Box */
.wf-advantage-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing control and speed */
    box-shadow: 0 0 30px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.wf-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.wf-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Workflow Item Cards */
.wf-workflow-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wf-workflow-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.wf-workflow-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.wf-workflow-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: WORKFLOW AUTOMATION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: NEXT-GEN SIEM STYLES */
/* ------------------------------------------------------------------ */

/* Compare Block - Highlighted Section for SIEM vs. XDR */
.siem-compare-block {
    background-color: var(--cyber-card-bg);
    /* Dark card background */
    border: 2px solid var(--cyber-accent);
    /* Strong focus glow */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Custom list for comparison */
.siem-compare-list {
    text-align: left;
    max-width: 350px;
    margin: 1.5rem auto 0;
}

.siem-compare-list li {
    line-height: 2.2;
    font-size: 1.05rem;
}

/* Feature Item Cards */
.siem-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.siem-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.siem-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.siem-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused utility colors and buttons */
.text-success-light {
    color: #46ac74 !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: NEXT-GEN SIEM STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: DATA PROTECTION STYLES */
/* ------------------------------------------------------------------ */

/* Data Challenge Highlight Box */
.data-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature of data */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

.data-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Feature Item Cards */
.data-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.data-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.data-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.data-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: DATA PROTECTION STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: XIOT SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* XIoT Challenge/Convergence Block */
.xiot-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing critical infrastructure */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.xiot-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.xiot-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* XIoT Feature Item Cards */
.xiot-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.xiot-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.xiot-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.xiot-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: XIOT SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: COMPLETE NEXT-GEN MDR STYLES */
/* ------------------------------------------------------------------ */

/* MDR Fusion Box - Highlighted Section */
.mdr-fusion-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the complete solution */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Service Item Cards */
.mdr-service-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mdr-service-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.mdr-service-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.mdr-service-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused utility colors and buttons */
.text-success-light {
    color: #46ac74 !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: COMPLETE NEXT-GEN MDR STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: CLOUD DETECTION & RESPONSE STYLES */
/* ------------------------------------------------------------------ */

/* CDR Challenge Box - Highlighted Section */
.cdr-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing cloud focus */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.cdr-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.cdr-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* CDR Feature Item Cards */
.cdr-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cdr-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.cdr-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.cdr-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: CLOUD DETECTION & RESPONSE STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: SERVICE RETAINER STYLES */
/* ------------------------------------------------------------------ */

/* Retainer Value Highlight Box */
.retainer-value-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the guaranteed readiness */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.retainer-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Retainer Usage Item Cards */
.retainer-usage-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.retainer-usage-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.retainer-usage-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.retainer-usage-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: SERVICE RETAINER STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: CYBERSECURITY CONSULTING STYLES */
/* ------------------------------------------------------------------ */

/* Consulting Advisory Box - Highlighted Section */
.consulting-advisory-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the strategic focus */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.consulting-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.consulting-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Consulting Pillar Item Cards */
.consulting-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.consulting-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.consulting-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.consulting-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: CYBERSECURITY CONSULTING STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: INSIDER RISK SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* Insider Challenge Box - Highlighted Section */
.insider-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--hero-accent);
    /* Strong glow emphasizing the complexity of internal threats */
    box-shadow: 0 0 35px rgba(111, 66, 193, 0.4);
}

/* Insider Pillar Item Cards (Detection & Mitigation) */
.insider-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.insider-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.insider-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.insider-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused utility colors and buttons */
.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: INSIDER RISK SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: PLATFORM SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* Platform Core Box - Highlighted Section */
.platform-core-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the structural core */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.platform-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.platform-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Platform Pillar Item Cards */
.platform-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.platform-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.platform-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: PLATFORM SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: AI SECURITY SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* AI Advantage Box - Highlighted Section */
.ai-advantage-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the intelligence */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.ai-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.ai-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* AI Pillar Item Cards */
.ai-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.ai-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.ai-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: AI SECURITY SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: INCIDENT RESPONSE STYLES */
/* ------------------------------------------------------------------ */

/* IR Advantage Box - Highlighted Section */
.ir-advantage-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing quick response */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.ir-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.ir-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* IR Life Cycle Grid */
.ir-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    position: relative;
}

/* Connector Line (Optional, for visual flow in a full CSS framework)
.ir-lifecycle-grid::before {
    content: '';
    position: absolute;
    top: 50px; 
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(90deg, #6f42c1, #46ac74);
    z-index: 0;
} 
*/

.ir-step {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
    /* Above the connector line */
}

.ir-step-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto 1rem;
    background-color: var(--hero-accent);
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0 15px var(--hero-accent);
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: INCIDENT RESPONSE STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: ALL SERVICES OVERVIEW STYLES */
/* ------------------------------------------------------------------ */

/* Unified Advantage Highlight Box */
.unified-advantage-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--hero-accent);
    /* Strong glow emphasizing the core platform */
    box-shadow: 0 0 35px rgba(111, 66, 193, 0.4);
}

/* Service Card Items (Used in the 3-column grid) */
.service-card-item {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    background-color: #242424;
    /* Slightly darker than card BG */
    border-left: 5px solid var(--cyber-accent);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.service-card-item:hover {
    background-color: #2e2e2e;
    border-left-color: var(--text-success-light);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.service-card-item i {
    font-size: 1.8rem;
    color: var(--cyber-accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.service-card-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.service-card-item p {
    font-size: 0.95rem;
    margin: 0;
}

.service-text {
    flex-grow: 1;
}

/* General Utilities */
.text-hero-accent {
    color: var(--hero-accent) !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-success-light {
    color: #46ac74 !important;
}


/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: ALL SERVICES OVERVIEW STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: AGENTIC SOC TRANSFORMATION STYLES */
/* ------------------------------------------------------------------ */

/* Agentic Shift Highlight Box */
.agentic-shift-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong focus glow emphasizing the shift */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.text-muted-soft {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Custom list for comparison */
.agentic-list {
    text-align: left;
    max-width: 350px;
    margin: 1.5rem auto 0;
}

.agentic-list li {
    line-height: 2.2;
    font-size: 1.05rem;
}

/* Agent Role Item Cards */
.agent-role-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.agent-role-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.agent-role-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.agent-role-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused utility colors and buttons */
.text-success-light {
    color: #46ac74 !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: AGENTIC SOC TRANSFORMATION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: CROSS-DOMAIN ATTACKS STYLES */
/* ------------------------------------------------------------------ */

/* Silo Challenge Box - Highlighted Section */
.silo-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the blind spot */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Fail List */
.silo-fail-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-danger */
.text-danger {
    color: #dc3545 !important;
}

.silo-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Attack Story Item Cards (Steps in the attack chain) */
.attack-story-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.attack-story-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.attack-story-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.attack-story-item.final-step {
    border: 2px solid var(--cyber-accent);
    box-shadow: 0 0 20px rgba(116, 70, 172, 0.8);
}

.attack-story-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* Responsive adjustment for the 4-column layout on smaller screens */
@media (max-width: 767.98px) {
    .attack-story-grid .col-md-1 {
        display: none !important;
        /* Hide arrows on mobile */
    }

    .attack-story-grid>div {
        margin-bottom: 1rem;
    }
}

/* ------------------------------------------------------------------ */
/* END SECTION: CROSS-DOMAIN ATTACKS STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: INSURABILITY STYLES */
/* ------------------------------------------------------------------ */

/* Insurer Demand Box - Highlighted Section */
.insurer-demand-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing financial/risk impact */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Requirement List */
.insurer-req-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.insurer-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Insurer Pillar Item Cards */
.insurer-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.insurer-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.insurer-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.insurer-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: INSURABILITY STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: SECURING AI STYLES */
/* ------------------------------------------------------------------ */

/* AI Challenge Box - Highlighted Section */
.ai-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* AI Securing List */
.ai-securing-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-warning */
.text-warning {
    color: #ffc107 !important;
}

.ai-securing-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* AI Pillar Item Cards */
.ai-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.ai-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.ai-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: SECURING AI STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: RANSOMWARE PROTECTION STYLES */
/* ------------------------------------------------------------------ */

/* Ransomware Strategy Box - Highlighted Section */
.ransomware-strategy-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical defense */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Ransomware List */
.ransomware-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.ransomware-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Ransomware Pillar Item Cards */
.ransomware-pillar-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ransomware-pillar-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.ransomware-pillar-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.ransomware-pillar-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: RANSOMWARE PROTECTION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - SMALL BUSINESS STYLES */
/* ------------------------------------------------------------------ */

/* SMB Challenge Box - Highlighted Section */
.smb-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.smb-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.smb-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* SMB Feature Item Cards */
.smb-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.smb-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.smb-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.smb-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - SMALL BUSINESS STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - FEDERAL GOVERNMENT STYLES */
/* ------------------------------------------------------------------ */

/* Federal Mandate Box - Highlighted Section */
.federal-mandate-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Mandate List */
.federal-mandate-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.federal-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Federal Feature Item Cards */
.federal-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.federal-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.federal-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.federal-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - FEDERAL GOVERNMENT STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - STATE & LOCAL GOVERNMENT STYLES */
/* ------------------------------------------------------------------ */

/* SLG Challenge Box - Highlighted Section */
.slg-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical services */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.slg-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.slg-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* SLG Feature Item Cards */
.slg-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slg-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.slg-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.slg-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - STATE & LOCAL GOVERNMENT STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - FINANCIAL SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* Finance Challenge Box - Highlighted Section */
.finance-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.finance-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.finance-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Finance Feature Item Cards */
.finance-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.finance-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.finance-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.finance-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - FINANCIAL SERVICES STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - HEALTHCARE STYLES */
/* ------------------------------------------------------------------ */

/* Health Challenge Box - Highlighted Section */
.health-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.health-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.health-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Health Feature Item Cards */
.health-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.health-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.health-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.health-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - HEALTHCARE STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - ELECTION SECURITY STYLES */
/* ------------------------------------------------------------------ */

/* Election Challenge Box - Highlighted Section */
.election-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.election-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.election-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Election Feature Item Cards */
.election-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.election-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.election-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.election-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - ELECTION SECURITY STYLES */
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - EDUCATION STYLES */
/* ------------------------------------------------------------------ */

/* Education Challenge Box - Highlighted Section */
.education-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.education-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.education-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Education Feature Item Cards */
.education-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.education-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.education-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.education-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - EDUCATION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: BY INDUSTRY - RETAIL STYLES */
/* ------------------------------------------------------------------ */

/* Retail Challenge Box - Highlighted Section */
.retail-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.retail-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.retail-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Retail Feature Item Cards */
.retail-feature-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.retail-feature-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.retail-feature-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.retail-feature-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: BY INDUSTRY - RETAIL STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: INDUSTRY RECOGNITION STYLES */
/* ------------------------------------------------------------------ */

/* Analyst Report Highlight Box */
.analyst-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.text-muted-soft {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Independent Validation Item Cards */
.validation-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.validation-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.validation-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.validation-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused utility colors and buttons */
.text-success-light {
    color: #46ac74 !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: INDUSTRY RECOGNITION STYLES */
/* ------------------------------------------------------------------ */





/* ------------------------------------------------------------------ */
/* SECTION: CUSTOMER STORIES STYLES */
/* ------------------------------------------------------------------ */

/* Metrics Box - Highlighted Section */
.metrics-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing results */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Metric Item styling */
.metric-item {
    padding: 1rem 0;
}

.metric-item .metric-value {
    /* Use a strong, slightly different accent for numbers */
    color: var(--hero-accent);
    font-size: 3.5rem;
}

.metric-item .metric-label {
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}

/* Case Study Item Cards */
.case-study-item {
    background-color: var(--cyber-card-bg);
    padding: 2.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.case-study-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.case-study-item .case-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.case-study-item .case-quote {
    font-style: italic;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--hero-accent);
    padding-left: 15px;
}

.case-study-item .case-details li {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Outline button style for contrast on dark background */
.btn-outline-cyber-accent {
    color: var(--cyber-accent, #6f42c1);
    border-color: var(--cyber-accent, #6f42c1);
    transition: all 0.3s ease;
}

.btn-outline-cyber-accent:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
}

/* Reused utility colors and buttons */
.text-success-light {
    color: #46ac74 !important;
}

.border-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: CUSTOMER STORIES STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: COMPETITION STYLES */
/* ------------------------------------------------------------------ */

/* Differentiator Box - Highlighted Section */
.differentiator-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the advantage */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Differentiator List */
.differentiator-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reused utility colors and checks */
.text-success-light {
    color: #46ac74 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.competition-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Comparison Table Styling */
.comparison-table-container {
    border: 1px solid var(--cyber-accent);
    border-radius: 8px;
    overflow: hidden;
    /* Ensures table corners are rounded */
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
}

.comparison-table {
    margin-bottom: 0;
    /* Remove default table margin */
}

.comparison-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    vertical-align: middle;
    padding: 1rem;
    border-bottom: 2px solid var(--hero-accent);
}

.comparison-table td {
    vertical-align: middle;
    padding: 1rem;
}

/* Styling for the Octopyder Column (to stand out) */
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
    background-color: #292b3a;
    /* Darker background for contrast */
    border-left: 2px solid var(--cyber-accent);
    border-right: 2px solid var(--cyber-accent);
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: COMPETITION STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: COMPLIANCES & CERTIFICATIONS STYLES */
/* ------------------------------------------------------------------ */

/* Compliance Challenge Box - Highlighted Section */
.compliance-challenge-box {
    background-color: var(--cyber-card-bg);
    border: 2px solid var(--cyber-accent);
    /* Strong glow emphasizing the critical nature */
    box-shadow: 0 0 35px rgba(116, 70, 172, 0.4);
}

/* Benefit List */
.compliance-benefit-list li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* Reusing text-success-light */
.text-success-light {
    color: #46ac74 !important;
}

.compliance-image-shadow {
    /* Subtle glow around images/diagrams */
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
    border: 1px solid var(--hero-accent);
}

/* Standard Item Cards */
.standard-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.standard-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.standard-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.standard-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Inverted Cyber Button Style (Large) */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: COMPLIANCES & CERTIFICATIONS STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: PRICING - SHARABHA GO STYLES */
/* ------------------------------------------------------------------ */

/* Sharabha Go Highlight Box */
.sharabha-go-box {
    background-color: #2e1d51;
    /* Slightly lighter/more prominent purple-dark background */
    border: 3px solid var(--hero-accent);
    /* Strong border for visibility */
    /* Stronger glow to emphasize pricing tier */
    box-shadow: 0 0 45px rgba(135, 94, 219, 0.6);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Pricing Badge Styling */
.pricing-badge {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: rgba(111, 66, 193, 0.1);
    /* Light background for price */
    border-radius: 10px;
    border: 1px solid var(--hero-accent);
}

.pricing-badge .price-value {
    /* Large, bold price number */
    font-size: 4rem;
    line-height: 1;
}

.pricing-badge .price-unit {
    /* Small text below the price */
    font-size: 1rem;
    text-transform: uppercase;
}

/* Capability Item Cards */
.capability-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.capability-item:hover {
    background-color: #242424;
    border-color: var(--cyber-accent);
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
    transform: translateY(-5px);
}

.capability-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.capability-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Utility Styles */
.text-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

.btn-cyber-inverted:hover {
    background-color: var(--cyber-accent, #6f42c1);
    color: #fff;
    box-shadow: 0 0 15px var(--cyber-accent, #6f42c1);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* END SECTION: PRICING - SHARABHA GO STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: PRICING - SHARABHA PRO STYLES */
/* ------------------------------------------------------------------ */

/* Sharabha Pro Highlight Box */
.sharabha-pro-box {
    /* Use a visually distinct color/style for the premium plan */
    background-color: #38255e;
    /* Deeper purple */
    border: 3px solid #ffaa00;
    /* Gold/Amber color for premium */
    /* Stronger, more golden glow */
    box-shadow: 0 0 50px rgba(255, 170, 0, 0.4);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Pricing Badge Styling */
.pricing-badge {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: rgba(255, 170, 0, 0.1);
    /* Light background for price */
    border-radius: 10px;
    border: 1px solid #ffaa00;
    /* Match gold border */
}

.pricing-badge .price-value {
    /* Large, bold price number */
    font-size: 4rem;
    line-height: 1;
    color: #ffaa00 !important;
    /* Gold text */
}

.pricing-badge .price-unit {
    /* Small text below the price */
    font-size: 1rem;
    text-transform: uppercase;
}

/* Capability Item Cards */
.capability-item {
    text-align: center;
    background-color: var(--cyber-card-bg);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.capability-item:hover {
    background-color: #242424;
    border-color: #ffaa00;
    /* Premium hover color */
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
    transform: translateY(-5px);
}

.capability-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.capability-item i {
    color: var(--hero-accent);
    /* Use primary accent for icons */
}

/* Reused Utility Styles */
.text-muted-soft {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Adjusting Cyber Button for Premium CTA */
.btn-cyber-inverted {
    background-color: transparent;
    border: 2px solid var(--cyber-accent, #6f42c1);
    color: var(--cyber-accent, #6f42c1);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Override for Sharabha Pro button to use Gold/Amber color */
.sharabha-pro-section .btn-cyber-inverted {
    border-color: #ffaa00;
    color: #ffaa00;
}

.sharabha-pro-section .btn-cyber-inverted:hover {
    background-color: #ffaa00;
    color: #000;
    /* Black text on gold hover */
    box-shadow: 0 0 15px #ffaa00;
}

.btn-cyber-inverted.btn-lg {
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-width: 3px;
}

/* ------------------------------------------------------------------ */
/* END SECTION: PRICING - SHARABHA PRO STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: PRICING - SHARABHA ENTERPRISE STYLES */
/* ------------------------------------------------------------------ */

/* Enterprise Accent Color Definition */
.text-enterprise-accent {
    color: #00FFFF !important;
    /* Neon Cyan/Aqua for ultimate tier */
}

/* Sharabha Enterprise Highlight Box */
.sharabha-enterprise-box {
    /* Deeper, more intense background than Pro's */
    background-color: #1a0f30;
    /* Very dark purple/indigo */
    border: 3px solid #00FFFF;
    /* Neon Cyan border */
    /* Stronger, more intense glow */
    box-shadow: 0 0 60px rgba(0, 255, 255, 0.6);
    padding-top: 4rem !important;
    /* Slightly more padding than Pro */
    padding-bottom: 4rem !important;
}

/* Pricing Badge Styling */
.sharabha-enterprise-section .pricing-badge {
    background-color: rgba(0, 255, 255, 0.1);
    /* Light neon cyan background for price */
    border: 1px solid #00FFFF;
    /* Match neon cyan border */
}

.sharabha-enterprise-section .pricing-badge .price-value {
    color: #00FFFF !important;
    /* Neon Cyan text */
}

/* Capability Item Cards for Enterprise */
.capability-item.enterprise-item {
    background-color: #242424;
    /* Darker base card */
    border: 1px solid rgba(0, 255, 255, 0.2);
    /* Subtle cyan border */
}

.capability-item.enterprise-item:hover {
    background-color: #2c2c2c;
    border-color: #00FFFF;
    /* Premium hover color */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    transform: translateY(-5px);
}

.capability-item.enterprise-item i {
    color: #00FFFF;
    /* Neon Cyan icons */
}

/* Custom Button for Enterprise CTA */
.btn-enterprise-inverted {
    /* Base style similar to existing inverted button */
    background-color: transparent;
    border: 3px solid #00FFFF;
    /* Neon Cyan border */
    color: #00FFFF;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-enterprise-inverted:hover {
    background-color: #00FFFF;
    color: #000;
    /* Black text on neon cyan hover */
    box-shadow: 0 0 20px #00FFFF;
}

/* ------------------------------------------------------------------ */
/* END SECTION: PRICING - SHARABHA ENTERPRISE STYLES */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SECTION: RESOURCES - SHARABHA RESOURCES STYLES */
/* ------------------------------------------------------------------ */

/* Resources Accent Color Definition */
.text-resource-accent {
    color: #00FF00 !important;
    /* Neon Lime Green/Electric Green */
}

/* Resource Item Cards */
.resource-item {
    text-align: center;
    background-color: var(--cyber-card-bg, #242424);
    /* Using a dark card background */
    padding: 2.5rem 2rem;
    border-radius: 10px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 255, 0, 0.2);
    /* Subtle green border */
}

.resource-item:hover {
    background-color: #2c2c2c;
    border-color: #00FF00;
    /* Resource hover color */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    transform: translateY(-5px);
}

.resource-item h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #ffffff;
}

.resource-item i {
    color: #00FF00;
    /* Neon Lime Green icons */
}

/* Resource Link Styling */
.resource-link {
    display: inline-block;
    color: #00FF00;
    /* Neon Lime Green link text */
    font-weight: 600;
    text-decoration: none;
    margin-top: 15px;
    transition: color 0.3s;
}

.resource-link:hover {
    color: #00d100;
    /* Slightly darker green on hover */
    text-decoration: underline;
}

/* Custom Button for Resource CTA (Support Contact) */
.btn-resource-inverted {
    /* Base style similar to existing inverted button */
    background-color: transparent;
    border: 3px solid #00FF00;
    /* Neon Green border */
    color: #00FF00;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-resource-inverted:hover {
    background-color: #00FF00;
    color: #000;
    /* Black text on neon green hover */
    box-shadow: 0 0 20px #00FF00;
}

/* ------------------------------------------------------------------ */
/* END SECTION: RESOURCES - SHARABHA RESOURCES STYLES */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* SECTION: BREACH RESPONSE - SHARABHA IR STYLES */
/* ------------------------------------------------------------------ */

/* Breach Accent Color Definition (High Alert Red) */
.text-breach-accent {
    color: #FF0000 !important; /* Crisis Red */
}

/* Sharabha Breach Highlight Box */
.sharabha-breach-box {
    /* Use a very dark, intense background */
    background-color: #331a1a; /* Dark background with a hint of red */
    border: 3px solid #FF0000; /* Crisis Red border */
    /* Intense warning glow */
    box-shadow: 0 0 60px rgba(255, 0, 0, 0.6); 
    padding-top: 4rem !important; 
    padding-bottom: 4rem !important;
}

/* Contact Badge Styling (Emergency Phone Number) */
.sharabha-breach-section .contact-badge {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: rgba(255, 0, 0, 0.1); /* Light red background for phone number */
    border-radius: 10px;
    border: 1px solid #FF0000; /* Match red border */
}

.sharabha-breach-section .contact-badge .price-value {
    /* Large, bold phone number */
    font-size: 4rem;
    line-height: 1;
    color: #FF0000 !important; /* Crisis Red text */
}

.sharabha-breach-section .contact-badge .price-unit {
    /* Small text below the phone number */
    font-size: 1rem;
    text-transform: uppercase;
}

/* Response Phase Item Cards */
.response-phase-item {
    text-align: center;
    background-color: var(--cyber-card-bg, #242424); 
    padding: 2rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 0, 0, 0.2); /* Subtle red border */
}

.response-phase-item:hover {
    background-color: #2c2c2c;
    border-color: #FF0000; /* Crisis hover color */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    transform: translateY(-5px);
}

.response-phase-item i {
    color: #FF0000; /* Crisis Red icons */
}

/* Custom Button for Emergency CTA */
.btn-breach-inverted {
    background-color: transparent;
    border: 3px solid #FF0000; /* Crisis Red border */
    color: #FF0000;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700; /* Extra bold for urgency */
    text-transform: uppercase;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-breach-inverted:hover {
    background-color: #FF0000;
    color: #000; /* Black text on red hover */
    box-shadow: 0 0 20px #FF0000;
}

/* ------------------------------------------------------------------ */
/* END SECTION: BREACH RESPONSE - SHARABHA IR STYLES */
/* ------------------------------------------------------------------ */