/* ================================================================
   1. ROOT VARIABLES (Brand Colors & Theme)
   Description: Yahan se aap poori site ke colors ek baar mein change kar sakte hain.
   ================================================================ */
:root {
    --primary-blue: #1A237E;    /* Pushpanjali Royal Blue */
    --accent-gold: #D4AF37;     /* Pushpanjali Premium Gold */
    --success-green: #0AAD0A;   /* FreshCart Style Green */
    --dark-grey: #3D464D;       /* Footer & Text Color */
    --light-bg: #F0F3F2;        /* Section Backgrounds */
    --white: #ffffff;
}

/* ================================================================
   2. GLOBAL RESET & TYPOGRAPHY
   ================================================================ */
body {
    font-family: 'Inter', sans-serif;
    color: var(--dark-grey);
    background-color: #ffffff;
    overflow-x: hidden;
}

/* ================================================================
   3. HEADER & NAVIGATION SECTION
   ================================================================ */
.bg-primary { background-color: var(--primary-blue) !important; }
.text-accent { color: var(--accent-gold) !important; }
.bg-accent { background-color: var(--accent-gold) !important; }

/* Sticky Navbar shadow */
nav {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ================================================================
   4. HERO & BANNER COMPONENTS
   ================================================================ */
.hero-container {
    background-color: var(--light-bg);
    border-radius: 1.5rem;
    transition: transform 0.3s ease;
}

/* ================================================================
   5. PRODUCT & CATEGORY CARDS
   ================================================================ */
/* Category circle/box hover effect */
.category-card:hover img {
    transform: scale(1.1);
}

/* Professional Product Card Shadow */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f0f0f0;
}

.product-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-5px);
}

/* ================================================================
   6. BUTTONS & INTERACTIVE ELEMENTS
   ================================================================ */
.btn-gold {
    background-color: var(--accent-gold);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: #B4922D;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.btn-success {
    background-color: var(--success-green);
    color: white;
    transition: opacity 0.2s;
}

.btn-success:hover {
    opacity: 0.9;
}

/* ================================================================
   7. FOOTER STYLING
   ================================================================ */
.footer-main {
    background-color: var(--dark-grey);
    color: #ced4da;
}

.footer-link {
    transition: all 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-gold);
    padding-left: 4px;
}

/* ================================================================
   8. MOBILE RESPONSIVE UTILITIES
   ================================================================ */
@media (max-width: 768px) {
    .mobile-hide { display: none; }
    .hero-text { font-size: 2rem !important; }
}

/* ================================================================
   . HERO BANNER GRID STYLING
   ================================================================ */

/* Transition for smooth hover effects on banners */
.group:hover .bg-opacity-30 {
    background-color: rgba(0,0,0,0.4);
}

/* Tracking-tighter for that modern premium brand look */
.tracking-tighter {
    letter-spacing: -0.05em;
}

/* Ensure images cover the area without distortion */
.object-cover {
    object-position: center;
}