:root {
    --primary-green: #28a745;
    --text-success-light: #a8e6cf;
}

body { font-family: 'Inter', sans-serif; }

/* Header */
.logo-square { width: 45px; height: 45px; object-fit: cover; border-radius: 4px; }
#mainNav { transition: all 0.4s ease; padding: 15px 0; }
#mainNav.scrolled { padding: 8px 0; background: rgba(255,255,255,0.98) !important; }

/* Parallax Hero */
.hero-section {
    height: 90vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)), 
                url('https://images.unsplash.com/photo-1512069772995-ec65ed45afd6?auto=format&fit=crop&w=1920&q=80');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.text-success-light { color: var(--text-success-light); }

/* Products */
.heading-line { width: 60px; height: 4px; background: var(--primary-green); border-radius: 2px; margin-top: 15px; }
.product-card { transition: all 0.3s ease; border-radius: 20px; overflow: hidden; }
.product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; }
.product-card img { height: 280px; object-fit: cover; }

/* Modal Gallery */
.main-img-container img { max-height: 400px; width: 100%; object-fit: contain; }
.thumb-img { width: 70px; height: 70px; object-fit: cover; cursor: pointer; border: 2px solid transparent; border-radius: 8px; transition: 0.2s; }
.thumb-img:hover, .thumb-img.active { border-color: var(--primary-green); opacity: 0.8; }

/* Form Styling */
.form-control { border-radius: 10px; padding: 12px; border: 1px solid #eee; }
.form-control:focus { box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.1); border-color: var(--primary-green); }

/* Z-index fix for close button */
.z-index-10 { z-index: 10; }
/* Fix for the cutoff text in your screenshot */
.hero-section {
    min-height: 100vh; /* Use min-height instead of fixed height */
    padding-top: 100px;
    padding-bottom: 50px;
}

@media (max-width: 768px) {
    .display-4 { font-size: 2.5rem; }
    .hero-section { text-align: center; }
    .modal-xl { margin: 10px; }
    .logo-square { width: 40px; height: 40px; }
}

/* Ensure images don't break layout */
img { max-width: 100%; height: auto; }