/* Main Styles */
:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Cards */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Icon Wrapper */
.icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.social-links a:hover {
    opacity: 0.7;
}

/* Product Grid */
.product-item {
    transition: opacity 0.3s ease;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}
/* ============================================
   OVERRIDE BOOTSTRAP PRIMARY COLOR TO PURPLE
   ============================================ */

:root {
    --bs-primary: #6f42c1 !important;
    --bs-primary-rgb: 111, 66, 193 !important;
}

/* Header/Navbar */
.navbar.bg-primary {
    background-color: #c2c1b1 !important;
}

.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-text {
    color: #ffffff !important;
}

.navbar.bg-primary .nav-link:hover {
    color: #ffd700 !important;
}

.navbar.bg-primary .navbar-brand:hover {
    color: #ffd700 !important;
}

/* Buttons */
.btn-primary {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #5a32a3 !important;
    border-color: #5a32a3 !important;
    color: #ffffff !important;
}

.btn-primary:focus {
    background-color: #5a32a3 !important;
    border-color: #5a32a3 !important;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}

.btn-outline-primary:hover {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Badges */
.badge.bg-primary {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Text Colors */
.text-primary {
    color: #6f42c1 !important;
}

/* Links */
a {
    color: #000000 !important;
}

a:hover {
    color: #5a32a3 !important;
}

/* Form Controls */
.form-control:focus {
    border-color: #6f42c1 !important;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Nav Pills */
.nav-pills .nav-link.active {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Hero Sections with Purple Background */
.bg-primary {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary p,
.bg-primary span,
.bg-primary .text-white {
    color: #ffffff !important;
}

.bg-primary .text-dark {
    color: #ffffff !important;
}