/* Volts Electrics - Main Stylesheet Updated */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=Inter:wght@400;500;700&display=swap');

:root {
    --v-blue: #1b388b;
    --v-green: #82b544; /* Primary Brand Green */
    --v-green-hover: #72a03b; /* Darker Green for Hover States */
    --v-slate: #475569;
    --v-dark: #0f172a;
}

/* 1. Base Styles */
body { font-family: 'Inter', sans-serif; color: #1e293b; line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; }

/* 2. Brand Utility Classes */
.text-volts { color: var(--v-blue); }
.bg-volts { background-color: var(--v-blue); }
.text-brand-green { color: var(--v-green); }
.bg-brand-green { background-color: var(--v-green); }

/* 3. Navigation & Breadcrumbs */
.breadcrumb-current { color: var(--v-green) !important; }
.breadcrumb-nav a:hover { color: var(--v-green); }

/* 4. Product & Service Cards */
.product-card, .service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
}

/* Hover Effect: Border changes to Green */
.product-card:hover, .service-card:hover {
    transform: translateY(-10px);
    border-color: var(--v-green) !important;
    box-shadow: 0 25px 50px -12px rgba(130, 181, 68, 0.15);
}

/* Corner Accents (Red to Green) */
.red-corner, .green-corner {
    background: var(--v-green) !important;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    z-index: 10;
}

/* 5. List & Icon Accents */
.spec-list li::before {
    content: '→';
    color: var(--v-green);
    font-weight: bold;
}

.check-item::before {
    content: '✓';
    color: var(--v-green);
    font-weight: 900;
}

/* 6. Sidebar Elements */
.sidebar-link:hover, .sidebar-link.active {
    color: var(--v-green) !important;
    border-bottom-color: var(--v-green) !important;
    padding-left: 10px;
}

/* 7. Buttons (Hover State Update) */
.btn-primary, .view-details-btn {
    background-color: var(--v-blue); /* Default button color */
    color: white;
    transition: all 0.3s ease;
}

/* Change Red Hover to Green Hover */
.btn-primary:hover, .view-details-btn:hover, 
[class*="hover:bg-red-600"]:hover {
    background-color: var(--v-green) !important; 
    transform: translateY(-2px);
}

/* 8. Specific UI Components from Screenshots */
/* Slider & Pagination */
.swiper-pagination-bullet-active {
    background: var(--v-green) !important;
    width: 20px !important;
}

/* Brand Card Accent Bar */
.brand-card {
    border-bottom: 8px solid var(--v-green) !important;
}

/* FAQ Highlight */
.faq-question { color: var(--v-green); }

/* 9. Animations */
@keyframes light-surge {
    0% { filter: drop-shadow(0 0 5px var(--v-green)); }
    100% { filter: drop-shadow(0 0 15px var(--v-green)); }
}