/* Dark Hero Section Styles - Override with high specificity */
body .hero-section,
html .hero-section,
.container .hero-section,
section.hero-section {
    border-radius: 0 !important; /* Remove rounded corners */
    background: #1a1f37 !important;
    background-color: #1a1f37 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    color: white !important;
    position: relative;
    z-index: 1;
}

/* Override text colors for better contrast on dark background */
.hero-section .hero-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure all children elements don't have backgrounds */
.hero-section > *,
.hero-section .container,
.hero-section .row,
.hero-section .col,
.hero-section .col-lg-10,
.hero-section .hero-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure particles canvas is visible */
#particles-canvas {
    opacity: 0.6;
}

/* Improve contrast for metrics */
.hero-section .metric-value {
    color: #6c8dff !important;
    text-shadow: 0 0 10px rgba(108, 141, 255, 0.5);
}

.hero-section .metric-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Carousel styling for dark background */
.hero-section .carousel {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px;
    overflow: hidden;
}

.hero-section .carousel-control-prev-icon,
.hero-section .carousel-control-next-icon {
    filter: brightness(1.5);
}

.hero-section .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
}

.hero-section .carousel-indicators button.active {
    background-color: white;
}