AgriCalc Pro | Modern Fertilizer Calculator
Precision Fertilizer Calculator
Optimize your crop nutrition with our advanced calculation tool for perfect soil balance every time.
Try Calculator Now
Fertilizer Calculator
Enter your soil test results and desired nutrient levels to calculate fertilizer requirements
Your Fertilizer Requirements
Nitrogen (N) Needed:
0 lbs
Phosphorus (P₂O₅) Needed:
0 lbs
Potassium (K₂O) Needed:
0 lbs
Total Fertilizer Needed:
0 lbs
Bags Needed (50lb bags):
0
Recommended Application
Enter your values and click calculate to get personalized fertilizer recommendations for your crops.
Why Choose Our Calculator
Precision agriculture tools for modern farmers
Accurate Calculations
Our algorithms ensure precise fertilizer recommendations based on your specific soil test results.
Mobile Friendly
Access the calculator from any device – perfect for field use on your smartphone or tablet.
Crop Specific
Get tailored recommendations based on the specific nutrient needs of your crops.
Save & Share
Download, print, or email your results for future reference or to share with your agronomist.
Cost Effective
Optimize your fertilizer use to reduce waste and maximize your return on investment.
Eco Friendly
Prevent over-application that can lead to nutrient runoff and environmental damage.
What Farmers Say
Trusted by agricultural professionals nationwide
“This calculator helped me reduce my fertilizer costs by 15% while maintaining excellent crop yields. The precision is unmatched!”
John Peterson
Corn & Soybean Farmer, Iowa
“As an organic farmer, getting the nutrient balance right is crucial. This tool takes the guesswork out of my fertilizer applications.”
Sarah Williams
Organic Vegetable Farm, California
“I recommend this calculator to all my clients. It’s become an essential tool in my agronomy consulting practice.”
Dr. Michael Chen
Agricultural Consultant, Texas
Ready to Optimize Your Fertilizer Use?
Join thousands of farmers who are already saving money and improving yields with our precision calculator.
Calculate Now
Page Title | AgriCalc Pro
Section Title
Your content goes here…
1. Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.
2. Data Collection
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
/* Global Styles */
:root {
–primary-color: #6B3CE7;
–secondary-color: #140C3D;
–accent-color: #FF7D33;
–light-color: #FFFFFF;
–dark-color: #333333;
–gray-color: #F5F5F7;
–text-color: #444444;
–text-light: #777777;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: var(–text-color);
line-height: 1.6;
background-color: var(–gray-color);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 15px;
color: var(–secondary-color);
}
p {
margin-bottom: 15px;
}
a {
text-decoration: none;
color: var(–primary-color);
transition: all 0.3s ease;
}
a:hover {
color: var(–accent-color);
}
img {
max-width: 100%;
height: auto;
}
.section-subtitle {
color: var(–text-light);
margin-bottom: 30px;
font-size: 1.1rem;
}
/* Buttons */
.cta-button {
display: inline-block;
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: var(–light-color);
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(107, 60, 231, 0.3);
}
.cta-button:hover {
background: linear-gradient(135deg, var(–secondary-color), var(–primary-color));
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(107, 60, 231, 0.4);
color: var(–light-color);
}
.secondary-button {
display: inline-block;
background-color: transparent;
color: var(–primary-color);
padding: 10px 25px;
border-radius: 50px;
font-weight: 600;
border: 2px solid var(–primary-color);
transition: all 0.3s ease;
cursor: pointer;
}
.secondary-button:hover {
background-color: var(–primary-color);
color: var(–light-color);
transform: translateY(-3px);
}
/* Navigation */
.navbar {
background-color: var(–light-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 15px 0;
transition: all 0.3s ease;
}
.navbar.scrolled {
padding: 10px 0;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(–secondary-color);
}
.logo span {
color: var(–primary-color);
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
margin-left: 25px;
font-weight: 600;
color: var(–dark-color);
position: relative;
}
.nav-links a.active {
color: var(–primary-color);
}
.nav-links a.active:after {
content: ”;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: var(–primary-color);
}
.nav-links a:hover {
color: var(–primary-color);
}
/* Dropdown Menu */
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: transparent;
color: var(–dark-color);
padding: 10px 15px;
font-size: 16px;
border: none;
cursor: pointer;
font-weight: 600;
font-family: inherit;
display: flex;
align-items: center;
}
.dropbtn:hover {
color: var(–primary-color);
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(–light-color);
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 1;
border-radius: 5px;
padding: 10px 0;
}
.dropdown-content a {
color: var(–dark-color);
padding: 10px 20px;
text-decoration: none;
display: block;
font-weight: 500;
}
.dropdown-content a:hover {
background-color: var(–gray-color);
color: var(–primary-color);
}
.dropdown:hover .dropdown-content {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hamburger Menu */
.hamburger {
display: none;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.hamburger span {
display: block;
height: 3px;
width: 100%;
background-color: var(–dark-color);
border-radius: 3px;
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
padding: 150px 0 80px;
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: var(–light-color);
}
.hero .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.hero-content {
flex: 1;
min-width: 300px;
padding-right: 40px;
}
.hero-content h1 {
font-size: 2.8rem;
color: var(–light-color);
margin-bottom: 20px;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.hero-image {
flex: 1;
min-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
transform: perspective(1000px) rotateY(-10deg);
transition: all 0.5s ease;
}
.hero-image:hover {
transform: perspective(1000px) rotateY(0deg);
}
.hero-image img {
display: block;
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.hero-image:hover img {
transform: scale(1.05);
}
/* Calculator Section */
.calculator-section {
padding: 80px 0;
background-color: var(–light-color);
}
.calculator-section h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 10px;
}
.calculator-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 40px;
}
.calculator-form {
flex: 1;
min-width: 300px;
background-color: var(–gray-color);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(–dark-color);
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(–primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(107, 60, 231, 0.1);
}
.custom-ratio {
display: flex;
align-items: center;
gap: 10px;
}
.custom-ratio input {
flex: 1;
text-align: center;
}
.custom-blend {
display: none;
}
.calculator-results {
flex: 1;
min-width: 300px;
}
.result-card {
background-color: var(–gray-color);
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.result-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #e0e0e0;
}
.result-item:last-child {
border-bottom: none;
}
.result-item.highlight {
background-color: rgba(107, 60, 231, 0.1);
margin: 0 -25px;
padding: 15px 25px;
border-radius: 5px;
}
.result-label {
font-weight: 600;
color: var(–dark-color);
}
.result-value {
font-weight: 700;
color: var(–primary-color);
}
.recommendation-card {
background-color: var(–secondary-color);
color: var(–light-color);
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
}
.recommendation-card h4 {
color: var(–light-color);
margin-bottom: 15px;
}
.save-results {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.save-results button {
flex: 1;
min-width: 120px;
}
.save-results button i {
margin-right: 8px;
}
/* Features Section */
.features-section {
padding: 80px 0;
background-color: var(–gray-color);
}
.features-section h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 10px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-card {
background-color: var(–light-color);
padding: 30px;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: var(–light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.feature-card h3 {
margin-bottom: 15px;
font-size: 1.3rem;
}
/* Testimonials Section */
.testimonials-section {
padding: 80px 0;
background-color: var(–light-color);
}
.testimonials-section h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 10px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.testimonial-card {
background-color: var(–gray-color);
padding: 25px;
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.testimonial-content {
margin-bottom: 20px;
font-style: italic;
position: relative;
}
.testimonial-content:before {
content: ‘”‘;
font-size: 4rem;
color: rgba(107, 60, 231, 0.1);
position: absolute;
top: -20px;
left: -10px;
line-height: 1;
z-index: 0;
}
.testimonial-content p {
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
}
.testimonial-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid var(–primary-color);
}
.testimonial-author h4 {
margin-bottom: 5px;
font-size: 1.1rem;
}
.testimonial-author span {
font-size: 0.9rem;
color: var(–text-light);
}
/* CTA Section */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: var(–light-color);
text-align: center;
}
.cta-section h2 {
color: var(–light-color);
font-size: 2.2rem;
margin-bottom: 20px;
}
.cta-section p {
max-width: 700px;
margin: 0 auto 30px;
font-size: 1.2rem;
opacity: 0.9;
}
/* Footer */
.footer {
background-color: var(–secondary-color);
color: var(–light-color);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-col h3 {
color: var(–light-color);
margin-bottom: 20px;
font-size: 1.3rem;
position: relative;
padding-bottom: 10px;
}
.footer-col h3:after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(–primary-color);
}
.footer-col p {
opacity: 0.8;
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: var(–light-color);
padding-left: 5px;
}
.contact-info li {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.contact-info i {
margin-right: 10px;
color: var(–primary-color);
width: 20px;
text-align: center;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(–light-color);
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(–primary-color);
transform: translateY(-3px);
}
.footer-bottom {
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.footer-bottom p {
opacity: 0.7;
font-size: 0.9rem;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
transition: all 0.3s ease;
}
.footer-links a:hover {
color: var(–light-color);
}
/* Responsive Styles */
@media (max-width: 992px) {
.hero-content {
padding-right: 0;
margin-bottom: 40px;
}
.hero-image {
transform: none;
}
.hero-image:hover {
transform: none;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh – 80px);
background-color: var(–light-color);
flex-direction: column;
align-items: center;
padding: 40px 20px;
transition: all 0.5s ease;
}
.nav-links.active {
left: 0;
}
.nav-links a {
margin: 15px 0;
}
.dropdown-content {
position: static;
box-shadow: none;
display: none;
width: 100%;
padding: 10px 0 0 20px;
}
.dropdown:hover .dropdown-content {
display: none;
}
.dropdown.active .dropdown-content {
display: block;
}
.hero {
padding: 120px 0 60px;
}
.hero-content h1 {
font-size: 2.2rem;
}
.calculator-results {
margin-top: 30px;
}
.save-results button {
flex: 100%;
}
}
@media (max-width: 576px) {
.hero-content h1 {
font-size: 1.8rem;
}
.hero-content p {
font-size: 1rem;
}
.calculator-section h2,
.features-section h2,
.testimonials-section h2,
.cta-section h2 {
font-size: 1.8rem;
}
.footer-col {
min-width: 100%;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-links {
justify-content: center;
}
}
/* Animation Classes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Print Styles */
@media print {
.navbar, .footer, .save-results {
display: none;
}
body {
background-color: white;
color: black;
font-size: 12pt;
}
.calculator-results {
width: 100%;
}
.result-card, .recommendation-card {
box-shadow: none;
border: 1px solid #ddd;
page-break-inside: avoid;
}
}
document.addEventListener(‘DOMContentLoaded’, function() {
// Mobile Navigation
const hamburger = document.querySelector(‘.hamburger’);
const navLinks = document.querySelector(‘.nav-links’);
hamburger.addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
navLinks.classList.toggle(‘active’);
});
// Dropdown functionality for mobile
const dropdowns = document.querySelectorAll(‘.dropdown’);
dropdowns.forEach(dropdown => {
const dropbtn = dropdown.querySelector(‘.dropbtn’);
dropbtn.addEventListener(‘click’, function() {
if (window.innerWidth <= 768) {
dropdown.classList.toggle('active');
}
});
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener(‘click’, function() {
if (window.innerWidth <= 768) {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
}
});
});
// Scroll effect for navbar
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add(‘scrolled’);
} else {
navbar.classList.remove(‘scrolled’);
}
});
// Calculator functionality
const calculatorForm = document.getElementById(‘calculate-btn’);
const resetBtn = document.getElementById(‘reset-btn’);
const fertilizerType = document.getElementById(‘fertilizer-type’);
const customBlendGroup = document.getElementById(‘custom-blend-group’);
// Show/hide custom blend inputs based on selection
fertilizerType.addEventListener(‘change’, function() {
if (this.value === ‘custom’) {
customBlendGroup.style.display = ‘block’;
} else {
customBlendGroup.style.display = ‘none’;
}
});
// Calculate fertilizer needs
calculatorForm.addEventListener(‘click’, function(e) {
e.preventDefault();
calculateFertilizer();
});
// Reset form
resetBtn.addEventListener(‘click’, function(e) {
e.preventDefault();
document.querySelector(‘.calculator-form’).reset();
customBlendGroup.style.display = ‘none’;
document.getElementById(‘results’).style.display = ‘none’;
});
// Print results
document.getElementById(‘print-btn’).addEventListener(‘click’, function() {
window.print();
});
// Save as PDF (simulated)
document.getElementById(‘save-btn’).addEventListener(‘click’, function() {
alert(‘PDF download functionality would be implemented with a library like jsPDF in a production environment.’);
// In a real implementation, we would use jsPDF or similar library
// to generate and download a PDF of the results
});
// Email results (simulated)
document.getElementById(’email-btn’).addEventListener(‘click’, function() {
alert(‘Email functionality would connect to a backend service or email API in a production environment.’);
});
function calculateFertilizer() {
// Get input values
const area = parseFloat(document.getElementById(‘area’).value) || 0;
const currentN = parseFloat(document.getElementById(‘current-n’).value) || 0;
const desiredN = parseFloat(document.getElementById(‘desired-n’).value) || 0;
const currentP = parseFloat(document.getElementById(‘current-p’).value) || 0;
const desiredP = parseFloat(document.getElementById(‘desired-p’).value) || 0;
const currentK = parseFloat(document.getElementById(‘current-k’).value) || 0;
const desiredK = parseFloat(document.getElementById(‘desired-k’).value) || 0;
// Calculate nutrient needs per acre
const nNeeded = Math.max(0, (desiredN – currentN) * area);
const pNeeded = Math.max(0, (desiredP – currentP) * area);
const kNeeded = Math.max(0, (desiredK – currentK) * area);
// Get fertilizer type
const selectedFertilizer = fertilizerType.value;
let nPerc, pPerc, kPerc;
if (selectedFertilizer === ‘custom’) {
nPerc = parseFloat(document.getElementById(‘custom-n’).value) || 0;
pPerc = parseFloat(document.getElementById(‘custom-p’).value) || 0;
kPerc = parseFloat(document.getElementById(‘custom-k’).value) || 0;
} else {
// Parse the N-P-K ratio from the selected option
const ratios = selectedFertilizer.split(‘-‘);
nPerc = parseFloat(ratios[0]);
pPerc = parseFloat(ratios[1]);
kPerc = parseFloat(ratios[2]);
}
// Calculate fertilizer amounts
let fertilizerN = 0, fertilizerP = 0, fertilizerK = 0;
let totalFertilizer = 0;
if (nPerc > 0) {
fertilizerN = (nNeeded / (nPerc / 100));
}
if (pPerc > 0) {
fertilizerP = (pNeeded / (pPerc / 100));
}
if (kPerc > 0) {
fertilizerK = (kNeeded / (kPerc / 100));
}
// The total fertilizer needed is the maximum of the three calculations
// because a single fertilizer product contains all three nutrients
totalFertilizer = Math.max(fertilizerN, fertilizerP, fertilizerK);
// If using a custom blend with zero for one nutrient, we need to handle that case
if (selectedFertilizer === ‘custom’) {
if (nPerc === 0 && pPerc === 0 && kPerc === 0) {
totalFertilizer = 0;
} else {
// For custom blends, we might want to sum the separate requirements
// This is a more advanced calculation that might need adjustment
totalFertilizer = 0;
if (nPerc > 0) totalFertilizer += fertilizerN;
if (pPerc > 0) totalFertilizer += fertilizerP;
if (kPerc > 0) totalFertilizer += fertilizerK;
}
}
// Calculate number of 50lb bags
const bagsNeeded = Math.ceil(totalFertilizer / 50);
// Display results
document.getElementById(‘result-n’).textContent = nNeeded.toFixed(1) + ‘ lbs’;
document.getElementById(‘result-p’).textContent = pNeeded.toFixed(1) + ‘ lbs’;
document.getElementById(‘result-k’).textContent = kNeeded.toFixed(1) + ‘ lbs’;
document.getElementById(‘result-total’).textContent = totalFertilizer.toFixed(1) + ‘ lbs’;
document.getElementById(‘result-bags’).textContent = bagsNeeded;
// Generate recommendation
let recommendation = ”;
if (totalFertilizer === 0) {
recommendation = ‘Your soil test shows adequate nutrient levels. No additional fertilizer is recommended at this time.’;
} else {
recommendation = `Based on your inputs, we recommend applying ${totalFertilizer.toFixed(1)} pounds of ${nPerc}-${pPerc}-${kPerc} fertilizer `;
recommendation += `to your ${area} acre field. This will require approximately ${bagsNeeded} 50-pound bags. `;
if (nNeeded > pNeeded && nNeeded > kNeeded) {
recommendation += ‘Your field shows the greatest need for nitrogen.’;
} else if (pNeeded > nNeeded && pNeeded > kNeeded) {
recommendation += ‘Your field shows the greatest need for phosphorus.’;
} else if (kNeeded > nNeeded && kNeeded > pNeeded) {
recommendation += ‘Your field shows the greatest need for potassium.’;
} else {
recommendation += ‘Your field shows balanced nutrient needs.’;
}
}
document.getElementById(‘recommendation-text’).textContent = recommendation;
document.getElementById(‘results’).style.display = ‘block’;
// Scroll to results
document.getElementById(‘results’).scrollIntoView({ behavior: ‘smooth’ });
}
// Animate elements when they come into view
const animateOnScroll = function() {
const elements = document.querySelectorAll(‘.feature-card, .testimonial-card’);
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
element.classList.add('fade-in-up');
}
});
};
window.addEventListener('scroll', animateOnScroll);
animateOnScroll(); // Run once on page load
});
