:root {
    --primary-color: #2d5016;
    --secondary-color: #5a9216;
    --accent-color: #8bc34a;
    --light-bg: #f1f8e9;
    --dark-text: #1b5e20;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: white !important;
    transition: transform 0.3s;
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    margin: 0 0.5rem;
    transition: all 0.3s;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-color) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 80%;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.95) 0%, rgba(90, 146, 22, 0.95) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23c8e6c9" width="1200" height="600"/></svg>');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.hero-image {
    animation: float 3s ease-in-out infinite;
}

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

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 80px 0 60px;
    text-align: center;
    margin-bottom: 0;
}

/* Buttons */
.btn-custom {
    background: var(--accent-color);
    color: var(--dark-text);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    border: none;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-custom:hover {
    background: white;
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-outline-custom {
    background: transparent;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    border: 2px solid white;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-custom:hover {
    background: white;
    color: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-custom-white {
    background: white;
    color: var(--secondary-color);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    border: none;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-custom-white:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn-outline-white {
    background: transparent;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    border: 2px solid white;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-white:hover {
    background: white;
    color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Section Title */
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--dark-text);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--accent-color);
    border-radius: 2px;
}

.section-title.text-start::after {
    left: 0;
    transform: translateX(0);
}

/* Cards */
.problem-card,
.solution-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
    height: 100%;
}

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

.icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: white;
}

.product-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(90, 146, 22, 0.2);
}

.product-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.product-detail-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
    height: 100%;
}

.product-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(90, 146, 22, 0.2);
}

/* Featured Product */
.featured-product-card {
    background: linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, rgba(90, 146, 22, 0.05) 100%);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.featured-icon {
    color: var(--secondary-color);
    text-align: center;
}

/* Process Steps */
.process-step {
    display: flex;
    align-items: start;
    margin-bottom: 30px;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.process-step:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.step-number {
    min-width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    margin-right: 20px;
    flex-shrink: 0;
}

/* About Page */
.about-icon-box {
    text-align: center;
    padding: 50px;
    background: var(--light-bg);
    border-radius: 20px;
}

/* Feature Box */
.feature-box {
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

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

/* FAQ Accordion */
.accordion-button {
    background-color: var(--light-bg);
    color: var(--dark-text);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--secondary-color);
    color: white;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.25);
}

/* Contact Page */
.contact-info-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    height: 100%;
}

.contact-item {
    display: flex;
    margin-bottom: 30px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

.contact-form-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.form-control,
.form-select {
    border-radius: 10px;
    padding: 12px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(139, 195, 74, 0.25);
}

.form-label {
    color: var(--dark-text);
    font-weight: 600;
    margin-bottom: 8px;
}

/* Map */
.map-container {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 80px 0;
}

/* Footer */
.footer {
    background: var(--primary-color);
    color: white;
    padding: 60px 0 20px;
}

.footer h5 {
    margin-bottom: 20px;
    font-weight: bold;
}

.footer a {
    transition: all 0.3s;
    text-decoration: none;
}

.footer a:hover {
    color: var(--accent-color) !important;
    padding-left: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section h1,
    .page-header h1 {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .featured-product-card {
        padding: 30px 20px;
    }
    
    .process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto 15px;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .btn-custom,
    .btn-outline-custom,
    .btn-custom-white {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}


<!-- ============================================ -->
<!-- FILE: submit_inquiry.php (PHP BACKEND) -->
<!-- ============================================ -->

<?php
// Configure your email settings here
$to_email = "your-email@example.com"; // CHANGE THIS to your actual email
$from_email = "noreply@ecohyacinth.com"; // CHANGE THIS to your domain email

// Set response header to JSON
header('Content-Type: application/json');

// Check if form is submitted via POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
    // Sanitize and validate input
    $name = strip_tags(trim($_POST['name']));
    $email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
    $phone = strip_tags(trim($_POST['phone']));
    $product = strip_tags(trim($_POST['product']));
    $message = strip_tags(trim($_POST['message']));
    $subject = isset($_POST['subject']) ? strip_tags(trim($_POST['subject'])) : "New Inquiry from Website";
    
    // Validate required fields
    if (empty($name) || empty($email) || empty($phone) || empty($product) || empty($message)) {
        echo json_encode([
            'success' => false,
            'message' => 'Please fill in all required fields.'
        ]);
        exit;
    }
    
    // Validate email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo json_encode([
            'success' => false,
            'message' => 'Please enter a valid email address.'
        ]);
        exit;
    }
    
    // Create email subject
    $email_subject = "New Inquiry: $subject - $product";
    
    // Create email body
    $email_body = "You have received a new inquiry from your website.\n\n";
    $email_body .= "Here are the details:\n\n";
    $email_body .= "Name: $name\n";
    $email_body .= "Email: $email\n";
    $email_body .= "Phone: $phone\n";
    $email_body .= "Product Interest: $product\n";
    $email_body .= "Subject: $subject\n\n";
    $email_body .= "Message:\n$message\n\n";
    $email_body .= "---\n";
    $email_body .= "This inquiry was submitted from your website on " . date('Y-m-d H:i:s') . "\n";
    
    // Create email headers
    $headers = "From: $from_email\r\n";
    $headers .= "Reply-To: $email\r\n";
    $headers .= "X-Mailer: PHP/" . phpversion();
    
    // Send email
    if (mail($to_email, $email_subject, $email_body, $headers)) {
        
        // Optional: Send auto-reply to customer
        $customer_subject = "Thank you for contacting EcoHyacinth Solutions";
        $customer_body = "Dear $name,\n\n";
        $customer_body .= "Thank you for your inquiry about our $product.\n\n";
        $customer_body .= "We have received your message and will get back to you within 24-48 hours.\n\n";
        $customer_body .= "Here's a summary of your inquiry:\n";
        $customer_body .= "Product Interest: $product\n";
        $customer_body .= "Subject: $subject\n\n";
        $customer_body .= "If you have any urgent questions, please feel free to call us at +91 1234567890.\n\n";
        $customer_body .= "Best regards,\n";
        $customer_body .= "EcoHyacinth Solutions Team\n";
        $customer_body .= "info@ecohyacinth.com";
        
        $customer_headers = "From: $from_email\r\n";
        $customer_headers .= "Reply-To: $to_email\r\n";
        
        // Send auto-reply (optional - comment out if not needed)
        mail($email, $customer_subject, $customer_body, $customer_headers);
        
        // Success response
        echo json_encode([
            'success' => true,
            'message' => 'Your inquiry has been submitted successfully!'
        ]);
    } else {
        // Error sending email
        echo json_encode([
            'success' => false,
            'message' => 'Sorry, there was an error sending your message. Please try again later or contact us directly at info@ecohyacinth.com'
        ]);
    }
    
} else {
    // If not POST request
    echo json_encode([
        'success' => false,
        'message' => 'Invalid request method.'
    ]);
}
?>


<!-- ============================================ -->
<!-- INSTALLATION INSTRUCTIONS -->
<!-- ============================================ -->

/*
INSTALLATION GUIDE:
===================

1. CREATE THE FOLLOWING FOLDER STRUCTURE:
   your-website/
   ├── index.html
   ├── about.html
   ├── products.html
   ├── faq.html
   ├── contact.html
   ├── submit_inquiry.php
   └── css/
       └── style.css

2. CONFIGURE PHP FILE:
   - Open submit_inquiry.php
   - Change line 3: $to_email = "your-actual-email@example.com";
   - Change line 4: $from_email = "noreply@yourdomain.com";

3. SERVER REQUIREMENTS:
   - PHP 5.4 or higher
   - Mail server configured (most hosting providers have this)
   - For localhost testing, configure SMTP settings in php.ini

4. TESTING LOCALLY:
   For Windows (XAMPP):
   - Install XAMPP
   - Place files in C:\xampp\htdocs\your-website\
   - Start Apache from XAMPP Control Panel
   - Visit: http://localhost/your-website/

   For Mac (MAMP):
   - Install MAMP
   - Place files in /Applications/MAMP/htdocs/your-website/
   - Start servers from MAMP
   - Visit: http://localhost:8888/your-website/

5. DEPLOYING TO LIVE SERVER:
   - Upload all files via FTP/cPanel
   - Ensure PHP mail() function is enabled on your host
   - Test the contact form
   - Check spam folder for test emails

6. TROUBLESHOOTING:
   - If emails not sending, check PHP error logs
   - Verify mail server is configured on hosting
   - Some hosts require SPF/DKIM records
   - Consider using PHPMailer or SMTP for better delivery
   - Contact your hosting provider if mail() function is blocked

7. ALTERNATIVE EMAIL SOLUTIONS:
   If mail() doesn't work, consider:
   - PHPMailer library (recommended)
   - SendGrid API
   - Mailgun API
   - AWS SES
   - Contact form services (Formspree, EmailJS)

8. SECURITY ENHANCEMENTS (Optional):
   - Add CAPTCHA (Google reCAPTCHA)
   - Implement rate limiting
   - Add CSRF protection
   - Use prepared statements if storing in database
   - Add honeypot field for spam prevention

9. FOR BETTER EMAIL DELIVERY:
   Replace the basic mail() function with PHPMailer:
   
   ```php
   use PHPMailer\PHPMailer\PHPMailer;
   require 'vendor/autoload.php';
   
   $mail = new PHPMailer();
   $mail->isSMTP();
   $mail->Host = 'smtp.gmail.com';
   $mail->SMTPAuth = true;
   $mail->Username = 'your-email@gmail.com';
   $mail->Password = 'your-app-password';
   $mail->SMTPSecure = 'tls';
   $mail->Port = 587;
   ```

10. CUSTOMIZATION:
    - Update contact information in all HTML files
    - Change color scheme in style.css (variables at top)
    - Add your logo image
    - Update Google Maps embed in contact.html
    - Modify product details as needed

SUPPORT:
========
For issues or questions:
- Check PHP error logs: error_log() in PHP
- Browser console for JavaScript errors
- Verify file permissions (644 for files, 755 for directories)
- Ensure PHP has write permissions for logs

*/