:root {
            --primary-color: #2C1810;
            --secondary-color: #8B4513;
            --accent-color: #D4AF37;
            --gradient-start: #8B4513;
            --gradient-end: #D2691E;
            --cream-color: #F5F2E8;
            --text-dark: #2C1810;
            --success-color: #228B22;
            --warm-brown: #A0522D;
        }
        
        body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text-dark); background-color: var(--cream-color); }
        body {
    padding-top: 80px; /* Desktop navbar height */
}

@media (max-width: 768px) {
    body {
        padding-top: 100px; /* Mobile navbar height */
    }
}

        /* Coffee Logo Styles */
        .coffee-logo { 
            width: 45px; 
            height: 45px; 
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            border-radius: 50%;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            animation: coffeeFloat 3s ease-in-out infinite;
        }
        
        .coffee-logo::before {
            content: '';
            width: 35px;
            height: 35px;
            background: var(--cream-color);
            border-radius: 50%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .coffee-logo i {
            position: relative;
            z-index: 2;
            color: var(--primary-color);
            font-size: 22px;
        }
        
        /* Hero Video Background */
        .hero-section { 
            position: relative; 
            min-height: 100vh; 
            display: flex; 
            align-items: center; 
            overflow: hidden;
            color: white;
        }
        
        .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
        
        /* Steam Animation */
        .coffee-steam {
            position: absolute;
            top: 20px;
            right: 50px;
            opacity: 0.6;
        }
        
        .steam {
            width: 4px;
            height: 40px;
            background: linear-gradient(to top, transparent, rgba(255,255,255,0.6), transparent);
            margin: 0 8px;
            border-radius: 50px;
            display: inline-block;
            animation: steam 2s ease-in-out infinite;
        }
        
        .steam:nth-child(1) { animation-delay: 0s; }
        .steam:nth-child(2) { animation-delay: 0.3s; }
        .steam:nth-child(3) { animation-delay: 0.6s; }
        
        /* Updated Styles */
        .navbar-brand { 
            font-family: 'Merriweather', serif; 
            font-weight: 700; 
            font-size: 1.8rem; 
            color: var(--primary-color) !important;
            display: flex;
            align-items: center;
        }
        
        .btn-primary { 
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); 
            border: none; 
            box-shadow: 0 4px 15px rgba(139,69,19,0.3);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover { 
            background: linear-gradient(135deg, var(--primary-color), var(--gradient-start)); 
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139,69,19,0.4);
        }
        
        .section-title { 
            font-family: 'Merriweather', serif; 
            color: var(--primary-color); 
            margin-bottom: 2rem; 
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, var(--accent-color), var(--gradient-end));
            border-radius: 2px;
        }
        
        .card { 
            border: none; 
            box-shadow: 0 8px 25px rgba(44,24,16,0.15); 
            transition: all 0.4s ease;
            background: white;
            overflow: hidden;
        }
        
        .card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 15px 40px rgba(44,24,16,0.25);
        }
        
        .navbar { 
            box-shadow: 0 4px 15px rgba(44,24,16,0.1); 
            background: rgba(245,242,232,0.95) !important;
            backdrop-filter: blur(10px);
        }
        
        .footer { 
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 
            color: white; 
        }
        
        .product-card img, .blog-card img { height: 250px; object-fit: cover; border-radius: 8px 8px 0 0; }
        .lazy { opacity: 0; transition: opacity 0.5s ease; }
        .lazy.loaded { opacity: 1; }
        
        /* Animations */
        @keyframes coffeeFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes steam {
            0% { transform: translateY(0) scaleX(1); opacity: 0.6; }
            50% { transform: translateY(-20px) scaleX(1.2); opacity: 0.3; }
            100% { transform: translateY(-40px) scaleX(0.8); opacity: 0; }
        }
        
        /* Coffee Bean Animation */
        .coffee-beans {
            position: absolute;
            top: 50%;
            right: 10%;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(-30px, -30px) rotate(120deg); }
            66% { transform: translate(30px, -20px) rotate(240deg); }
        }
        
        /* Page-specific styles */
        .page-hero { background: linear-gradient(135deg, var(--primary-color), var(--gradient-end)); color: white; padding: 100px 0 60px; }
        .contact-form { 
            background: rgba(245,242,232,0.9); 
            padding: 2rem; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(44,24,16,0.1);
            backdrop-filter: blur(10px);
        }
        .blog-meta { color: var(--warm-brown); font-size: 0.9rem; }
        .product-price { font-size: 1.3rem; font-weight: 600; color: var(--success-color); }
        
        /* Additional Coffee Theme Elements */
        .coffee-cup-icon {
            color: var(--accent-color);
            font-size: 1.2rem;
            margin-right: 8px;
            animation: coffeeFloat 4s ease-in-out infinite;
        }
        
        .btn-outline-primary {
            border-color: var(--gradient-start);
            color: var(--gradient-start);
            transition: all 0.3s ease;
        }
        
        .btn-outline-primary:hover {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            border-color: var(--gradient-start);
            color: white;
            transform: translateY(-2px);
        }
        
        /* Hero Content Enhancement */
        .hero-content {
            position: relative;
            z-index: 3;
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 1.5rem;
            animation: fadeInUp 1s ease-out;
        }
        
        .hero-subtitle {
            font-size: 1.3rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease-out 0.3s both;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Background Pattern */
        .bg-pattern {
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(212,175,55,0.1) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, rgba(139,69,19,0.1) 2px, transparent 2px);
            background-size: 50px 50px;
        }
  /* Blog Page Fixes */
.blog-container {
  padding-top: 90px; /* Enough space below navbar */
  max-width: 900px;
  margin: auto;
}

.blog-container h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.blog-container h2 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

.blog-container p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Blog Image Styling */
.blog-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 1rem auto;
}

/* Responsive font size */
@media (min-width: 768px) {
  .blog-container h1 {
    font-size: 2.3rem;
  }
  .blog-container p {
    font-size: 1.2rem;
  }
}