/* Professional CSS for HIC MARKET */

:root {
    /* Original Bootstrap Colors - Restored */
    --primary-color: #007bff;
    --primary-dark: #0056b3;
    --primary-light: #66b3ff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Dashboard Gradients - Original */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
    --gradient-ocean: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);
    --gradient-sunset: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    
    /* Professional Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Professional Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Professional Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Professional Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Dashboard Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
    --gradient-ocean: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);
    --gradient-sunset: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
}

/* Professional Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Professional Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--dark-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--secondary-color);
}

/* Professional Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Hero Section - Purple & Gold Elegant Background */
.hero-section {
    background: linear-gradient(135deg, #6a4c93 0%, #8e44ad 25%, #9b59b6 50%, #f39c12 75%, #f1c40f 100%);
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    animation: heroFadeIn 2s ease-in;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(241, 196, 15, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(155, 89, 182, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, rgba(106, 76, 147, 0.8) 0%, rgba(243, 156, 18, 0.6) 100%);
}

.hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f1c40f' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm0 0c0 11.046 8.954 20 20 20s20-8.954 20-20-8.954-20-20-20-20 8.954-20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 20s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Decorative Golden Elements */
.hero-section .decorative-corner {
    position: absolute;
    width: 200px;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M20 20 Q50 10 80 20 Q110 30 140 20 Q170 10 200 20 L200 50 Q190 80 200 110 Q210 140 200 170 L170 200 Q140 190 110 200 Q80 210 50 200 Q20 190 20 170 Q10 140 20 110 Q30 80 20 50 Z' fill='%23f1c40f' fill-opacity='0.2'/%3E%3Cpath d='M40 40 Q60 35 80 40 Q100 45 120 40 Q140 35 160 40 Q155 60 160 80 Q165 100 160 120 Q155 140 160 160 Q140 155 120 160 Q100 165 80 160 Q60 155 40 160 Q45 140 40 120 Q35 100 40 80 Q45 60 40 40 Z' fill='%23f39c12' fill-opacity='0.3'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    opacity: 0.6;
}

.hero-section .decorative-corner.top-left {
    top: -50px;
    left: -50px;
    animation: pulse 4s ease-in-out infinite;
}

.hero-section .decorative-corner.bottom-right {
    bottom: -50px;
    right: -50px;
    transform: rotate(180deg);
    animation: pulse 4s ease-in-out infinite reverse;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

    @keyframes heroFadeIn {
        0% {
            opacity: 0;
            transform: scale(1.05) translateY(30px);
        }
        60% {
            opacity: 0.8;
            transform: scale(1.02) translateY(10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .hero-section .display-4 {
        animation: textPop 1.2s cubic-bezier(.68,-0.55,.27,1.55);
    }

    @keyframes textPop {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(40px);
        }
        80% {
            opacity: 1;
            transform: scale(1.05) translateY(-5px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .hero-animation {
        animation: heroBounce 1.5s 0.5s cubic-bezier(.68,-0.55,.27,1.55);
    }

    @keyframes heroBounce {
        0% {
            opacity: 0;
            transform: scale(0.9) translateY(30px);
        }
        60% {
            opacity: 1;
            transform: scale(1.05) translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }


.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float 10s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.min-vh-50 {
    min-height: 50vh;
}

/* Tech Grid Animation */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.tech-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tech-item i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: white;
}

.tech-item span {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Feature Cards */
.feature-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

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

.feature-icon {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon i {
    transform: scale(1.1);
}

/* Product Cards */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.product-image {
    height: 250px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 123, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.price-tag {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--success-color);
}

/* Category Cards */
.category-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border: none;
    overflow: hidden;
    position: relative;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s ease;
}

.category-card:hover::before {
    left: 100%;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.category-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Navigation */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Badge Animation */
.badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Buttons */
.btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-whatsapp {
    background-color: #25d366;
    border-color: #25d366;
    color: white;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    border-color: #128c7e;
    color: white;
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Cards */
.card {
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Messages */
.alert {
    border-radius: 10px;
    border: none;
    font-weight: 500;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* Footer */
footer {
    background: linear-gradient(135deg, var(--dark-color), #212529) !important;
}

.social-links a {
    transition: all 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
    color: var(--primary-color) !important;
}

/* About Illustration */
.about-illustration svg {
    max-width: 100%;
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tech-item {
        padding: 1.5rem;
    }
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    .display-5 {
        font-size: 2rem;
    }
    
    .hero-section {
        min-height: 70vh;
    }
}

@media (max-width: 576px) {
    .tech-item i {
        font-size: 2rem;
    }
    
    .category-icon {
        font-size: 2rem;
    }
    
    .product-image {
        height: 200px;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Page Transitions */
.page-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-soft {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.border-gradient {
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--primary-color), #0056b3) 1;
}

/* Dashboard & Admin Gradients */
.card-gradient-primary {
    background: var(--gradient-primary);
    color: white;
}

.card-gradient-success {
    background: var(--gradient-success);
    color: white;
}

.card-gradient-danger {
    background: var(--gradient-danger);
    color: white;
}

.card-gradient-warning {
    background: var(--gradient-warning);
    color: white;
}

.card-gradient-info {
    background: var(--gradient-info);
    color: white;
}

.card-gradient-ocean {
    background: var(--gradient-ocean);
    color: white;
}

.card-gradient-sunset {
    background: var(--gradient-sunset);
    color: white;
}

.header-gradient {
    background: var(--gradient-primary);
}

.stat-card {
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.dashboard-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Star Rating Styles */
.star-rating {
    font-size: 0.9rem;
    line-height: 1;
}

.star-rating i {
    margin-right: 2px;
    font-size: 0.85rem;
}

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

.star-rating small {
    font-size: 0.75rem;
    vertical-align: middle;
    margin-left: 4px;
}

/* Product Card Star Rating - Compact */
.product-card .star-rating {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.product-card .star-rating i {
    font-size: 0.8rem;
}

/* Professional Enhancements */
.hero-badge .badge {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.hero-stats {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.testimonial-card {
    transition: all 0.3s ease;
    border: none !important;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.achievement-item {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.achievement-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: white !important;
}

.icon-wrapper {
    transition: all 0.3s ease;
}

.achievement-item:hover .icon-wrapper {
    transform: scale(1.1);
}

/* Enhanced Feature Cards */
.feature-card {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
    transition: all 0.6s ease;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 123, 255, 0.2) !important;
}

/* Professional Typography */
.display-4, .display-5 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lead {
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Enhanced Buttons */
.btn-lg {
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-success {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
}

/* Avatar Styles */
.avatar {
    transition: all 0.3s ease;
}

.testimonial-card:hover .avatar {
    transform: scale(1.1);
}

/* Contact Info Enhancement */
.contact-info {
    background: rgba(0, 123, 255, 0.05);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 123, 255, 0.1);
}

/* Print Styles */
@media print {
    .navbar, .footer, .btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .container {
        max-width: 100% !important;
    }
}

/* Professional Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    white-space: nowrap;
    user-select: none;
}

/* Hero Section Button Fixes - Purple & Gold Theme */
.hero-section .btn {
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    border-radius: 8px;
    padding: 12px 24px;
}

.hero-section .btn-light {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    color: #6a4c93 !important;
    border: 2px solid #f1c40f !important;
    font-weight: 700;
}

.hero-section .btn-light:hover {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%) !important;
    color: white !important;
    border-color: #f39c12 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(241, 196, 15, 0.4);
}

.hero-section .btn-outline-light {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid #f1c40f !important;
    font-weight: 600;
}

.hero-section .btn-outline-light:hover {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%) !important;
    color: #6a4c93 !important;
    border-color: #f1c40f !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(241, 196, 15, 0.3);
}

.hero-section .btn-success {
    background: linear-gradient(135deg, #25d366 0%, #20c997 100%) !important;
    border: 2px solid #25d366 !important;
    color: white !important;
    font-weight: 600;
}

.hero-section .btn-success:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%) !important;
    border-color: #20c997 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(37, 211, 102, 0.4);
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Button - Original Bootstrap Colors */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background-color: #0056b3;
    border-color: #0056b3;
    color: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
    background-color: white;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--light-color);
    color: var(--dark-color);
}

/* Success Button - Original Bootstrap Colors */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover:not(:disabled) {
    background-color: #218838;
    border-color: #218838;
    color: white;
}

/* Danger Button - Original Bootstrap Colors */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #c82333;
    color: white;
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.75rem;
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
}

/* Professional Card System */
.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid #e2e8f0;
    background-color: var(--light-color);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid #e2e8f0;
    background-color: var(--light-color);
}

/* Professional Form Elements */
.form-control {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--dark-color);
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark-color);
}

/* Professional Navigation - Beautiful Gradient */
.navbar-dark.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 50%, #004494 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
    backdrop-filter: blur(10px);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-dark.bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.08) 0%, 
        rgba(255,255,255,0.03) 50%, 
        rgba(255,255,255,0.08) 100%);
    pointer-events: none;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white !important;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.navbar-dark .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.navbar-dark .nav-link:hover {
    color: white !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.navbar-dark .nav-link.active {
    color: white !important;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Professional Loading States */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f4f6;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Professional Alerts */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin-bottom: var(--spacing-md);
}

.alert-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-warning {
    background-color: #fffbeb;
    border-color: #fed7aa;
    color: #92400e;
}

.alert-info {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    color: #1e40af;
}

/* Professional UI Components */

/* Professional Tooltips */
.professional-tooltip {
    position: absolute;
    background: var(--dark-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
    to { opacity: 1; }
}

/* Professional Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Professional Form Progress */
.form-progress {
    margin-bottom: var(--spacing-xl);
}

.progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-step {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--primary-color);
    color: white;
}

.progress-step.completed {
    background: var(--success-color);
    color: white;
}

/* Professional Alert Container */
.alert-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    max-width: 400px;
}

.alert {
    margin-bottom: var(--spacing-sm);
    animation: alertSlideIn 0.3s ease;
}

.alert.fade-out {
    animation: alertSlideOut 0.3s ease;
}

@keyframes alertSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes alertSlideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Professional Modal */
.professional-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body {
    padding: var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Professional Form Validation */
.form-control.is-valid {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgb(5 150 105 / 0.1);
}

.form-control.is-invalid {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--danger-color);
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--success-color);
}

/* Professional Close Button */
.btn-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--secondary-color);
    transition: color 0.2s ease;
}

.btn-close:hover {
    color: var(--dark-color);
}

/* Professional Responsive Design */
@media (max-width: 768px) {
    .modal-content {
        margin: var(--spacing-md);
        width: calc(100% - 2rem);
    }
    
    .alert-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

/* Professional Focus States */
*:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.btn:focus,
.form-control:focus,
.nav-link:focus {
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
}

/* Professional Hover Effects */
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.btn-hover:hover {
    transform: translateY(-1px);
}

/* Professional Loading States */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner-large {
    width: 3rem;
    height: 3rem;
    border: 4px solid #f3f4f6;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}/* Ad
min Interface Brightness Improvements */
.admin-dashboard {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%) !important;
    min-height: 100vh;
}

/* Brighter Admin Cards */
.admin-card {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
    transition: all 0.3s ease;
}

.admin-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Blue Admin Headers */
.admin-card .card-header {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%) !important;
    color: white !important;
    border-bottom: none !important;
    font-weight: 600;
}

/* Admin Navigation Improvements */
.admin-nav .list-group-item {
    background: white !important;
    border: 1px solid #e9ecef !important;
    color: #495057 !important;
    transition: all 0.2s ease;
}

.admin-nav .list-group-item:hover {
    background: #f8f9fa !important;
    color: #251CD6 !important;
    border-color: #251CD6 !important;
    transform: translateX(5px);
}

.admin-nav .list-group-item.active {
    background: #251CD6 !important;
    border-color: #251CD6 !important;
    color: white !important;
}

/* Blue Admin Buttons */
.admin-btn-primary {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.admin-btn-primary:hover {
    background: linear-gradient(135deg, #1e17b8 0%, #1a149a 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 28, 214, 0.3);
}

/* Admin Table Improvements */
.admin-table {
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.admin-table th {
    background: #f8f9fa !important;
    color: #495057 !important;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6 !important;
}

.admin-table td {
    color: #495057 !important;
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: #f8f9fa !important;
}

/* Admin Form Improvements */
.admin-form .form-control {
    border: 2px solid #e9ecef !important;
    border-radius: 6px !important;
    padding: 10px 15px;
    transition: all 0.2s ease;
}

.admin-form .form-control:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

.admin-form .form-label {
    color: #495057 !important;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Admin Stats Cards */
.admin-stat-card {
    background: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
    transition: all 0.3s ease;
}

.admin-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

.admin-stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.admin-stat-card .stat-icon.primary {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%);
}

.admin-stat-card .stat-icon.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.admin-stat-card .stat-icon.warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.admin-stat-card .stat-icon.danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
}

/* Admin Modal Improvements */
.admin-modal .modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.admin-modal .modal-header {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%) !important;
    color: white !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.admin-modal .modal-body {
    padding: 30px !important;
}

/* Admin Alert Improvements */
.admin-alert {
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    font-weight: 500;
}

.admin-alert.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: #155724 !important;
}

.admin-alert.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%) !important;
    color: #721c24 !important;
}

.admin-alert.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    color: #856404 !important;
}

.admin-alert.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%) !important;
    color: #0c5460 !important;
}

/* Admin Sidebar Bright Theme */
.admin-sidebar {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
    padding: 0 !important;
    overflow: hidden;
}

.admin-sidebar .card-header {
    background: linear-gradient(135deg, #251CD6 0%, #1e17b8 100%) !important;
    color: white !important;
    text-align: center;
    font-weight: 600;
    padding: 20px;
}

/* Responsive Admin Improvements */
@media (max-width: 768px) {
    .admin-card {
        margin-bottom: 20px;
    }
    
    .admin-stat-card {
        margin-bottom: 15px;
    }
}/* C
lean Purple Hero Background */
.hero-section {
    background: #6a0dad !important;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

/* Enhanced Hero Buttons - Clean Purple Theme */
.hero-section .btn {
    position: relative !important;
    z-index: 1000 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block !important;
}

.hero-section .btn-light {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    color: #6a0dad !important;
    border: 2px solid #ffffff !important;
    font-weight: 700 !important;
}

.hero-section .btn-light:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #6a0dad !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.3) !important;
}

.hero-section .btn-outline-light {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid #ffffff !important;
    font-weight: 600 !important;
}

.hero-section .btn-outline-light:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    color: #6a0dad !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.3) !important;
}

.hero-section .btn-success {
    background: linear-gradient(135deg, #25d366 0%, #20c997 100%) !important;
    border: 2px solid #25d366 !important;
    color: white !important;
}

.hero-section .btn-success:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%) !important;
    transform: translateY(-3px) !important;
}/* 
Fix Button Clickability Issues */
.hero-section .d-flex {
    position: relative !important;
    z-index: 1001 !important;
}

.hero-section .btn:hover {
    cursor: pointer !important;
}

.hero-section .container {
    position: relative !important;
    z-index: 999 !important;
}

/* Remove any overlapping pseudo-elements */
.hero-section::before,
.hero-section::after {
    pointer-events: none !important;
}

/* Ensure all decorative elements don't block clicks */
.hero-section .decorative-corner {
    pointer-events: none !important;
}/* S
ocial Media Links Styling */
.social-links a {
    transition: all 0.3s ease;
    display: inline-block;
}

.social-links a:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

/* Social Media Colors */
.social-links a[href*="facebook"]:hover {
    color: #1877f2 !important;
}

.social-links a[href*="youtube"]:hover {
    color: #ff0000 !important;
}

.social-links a[href*="instagram"]:hover {
    color: #e4405f !important;
}

.social-links a[href*="whatsapp"]:hover {
    color: #25d366 !important;
}

/* Navbar Social Media Links */
.navbar-nav .nav-link i.fab {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover i.fab {
    transform: scale(1.2);
}

.navbar-dark .nav-link[href*="facebook"]:hover {
    color: #1877f2 !important;
}

.navbar-dark .nav-link[href*="youtube"]:hover {
    color: #ff0000 !important;
}

.navbar-dark .nav-link[href*="instagram"]:hover {
    color: #e4405f !important;
}/* 
Floating Social Media Buttons */
.floating-social-buttons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-social {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.floating-social:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: white;
}

.floating-social.facebook {
    background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);
}

.floating-social.youtube {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.floating-social.instagram {
    background: linear-gradient(135deg, #e4405f 0%, #833ab4 50%, #fcb045 100%);
}

.floating-social.whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #20c997 100%);
}

/* Hide floating buttons on mobile */
@media (max-width: 768px) {
    .floating-social-buttons {
        display: none;
    }
}

/* Social Media Hover Effects in Footer */
.social-links a {
    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.social-links a:hover::before {
    left: 100%;
}

/* P
roduct Gallery Carousel Styles */
#productGalleryCarousel {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#productGalleryCarousel .carousel-image {
    height: 500px;
    object-fit: cover;
    width: 100%;
}

#productGalleryCarousel .carousel-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    border-radius: 0 0 15px 15px;
}

#productGalleryCarousel .carousel-caption h5 {
    font-size: 1.75rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

#productGalleryCarousel .carousel-caption p {
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
}

#productGalleryCarousel .carousel-control-prev,
#productGalleryCarousel .carousel-control-next {
    width: 60px;
    height: 60px;
    background: rgba(0, 123, 255, 0.8);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

#productGalleryCarousel .carousel-control-prev {
    left: 20px;
}

#productGalleryCarousel .carousel-control-next {
    right: 20px;
}

#productGalleryCarousel .carousel-control-prev:hover,
#productGalleryCarousel .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0, 123, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

#productGalleryCarousel .carousel-indicators {
    bottom: 20px;
}

#productGalleryCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid white;
    transition: all 0.3s ease;
}

#productGalleryCarousel .carousel-indicators button.active {
    background-color: #007bff;
    transform: scale(1.2);
}

/* Responsive Carousel */
@media (max-width: 768px) {
    #productGalleryCarousel .carousel-image {
        height: 300px;
    }
    
    #productGalleryCarousel .carousel-caption h5 {
        font-size: 1.25rem;
    }
    
    #productGalleryCarousel .carousel-caption p {
        font-size: 0.9rem;
    }
    
    #productGalleryCarousel .carousel-control-prev,
    #productGalleryCarousel .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    #productGalleryCarousel .carousel-control-prev {
        left: 10px;
    }
    
    #productGalleryCarousel .carousel-control-next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    #productGalleryCarousel .carousel-image {
        height: 250px;
    }
    
    #productGalleryCarousel .carousel-caption {
        padding: 15px;
    }
    
    #productGalleryCarousel .carousel-caption h5 {
        font-size: 1rem;
    }
    
    #productGalleryCarousel .carousel-caption p {
        font-size: 0.8rem;
        display: none;
    }
}