:root {

    --primary: #2563eb;

    --secondary: #1e40af;

    --accent: #f97316;

    --dark: #0f172a;

    --light: #f8fafc;

}



/* Navbar */

.navbar {

    transition: all 0.3s ease;

}



.navbar.scrolled {

    background: rgba(15, 23, 42, 0.95) !important;

    padding: 0.5rem 0;

}



.navbar-brand,

.nav-link,

.btn-outline-light {

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

}



.navbar-brand::after,

.nav-link::before,

.btn-outline-light::before {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    background: var(--accent);

    transition: all 0.3s ease;

}



.navbar-brand::after {

    bottom: 0;

    left: 0;

}



.navbar-brand:hover::after,

.nav-link:hover::before,

.nav-link.active::before {

    width: 100%;

}



.nav-link::before {

    bottom: -2px;

    left: 50%;

    transform: translateX(-50%);

}



.btn-outline-light::before {

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: white;

    z-index: -1;

}



.btn-outline-light:hover::before {

    left: 0;

}



.btn-outline-light:hover {

    color: var(--primary);

}



.navbar .btn {

    transition: all 0.3s ease;

}



.navbar .btn:hover {

    transform: translateY(-2px);

}



.navbar-toggler {

    border: none;

    padding: 0;

    transition: transform 0.3s ease;

}



.navbar-toggler:hover {

    transform: scale(1.1);

}



.navbar-toggler:focus {

    box-shadow: none;

}



/* Cart Counter Styles */

.cart-counter {

    display: inline-block;

    font-weight: 600;

    transition: all 0.3s ease;

}



.cart-counter.pulse {

    animation: cartPulse 0.3s ease;

}



@keyframes cartPulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.3); }

    100% { transform: scale(1); }

}



/* Glass Effect */

.glass-card {

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



/* Hero Section */

.hero-section {

    min-height: 100vh;

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.9)),

        url('https://images.unsplash.com/photo-1487754180451-c456f719a1fc');

    background-size: cover;

    background-attachment: fixed;

    padding: 200px 0;

}



/* Service Cards */

.service-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    transition: all 0.3s ease;

    border: none;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}



.service-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.service-icon {

    font-size: 3rem;

    color: var(--primary);

    margin-bottom: 1.5rem;

    transition: transform 0.3s ease;

}



.service-card:hover .service-icon {

    transform: scale(1.2);

}



/* Product Showcase */

.product-showcase {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(45deg, var(--dark), var(--secondary));

}



/* Floating Card Animation */

.floating-card {

    animation: float 3s ease-in-out infinite;

}



@keyframes float {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

}



/* Buttons */

.btn-custom {

    padding: 12px 30px;

    border-radius: 30px;

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 1px;

    transition: all 0.3s ease;

}



.btn-custom:hover {

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}