* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #d8f3dc 0%, #b7e4c7 100%);
min-height: 100vh;
}
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #99d98c 0%, #74c69d 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
right: -100px;
}
.hero::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
bottom: -50px;
left: -50px;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 64px;
font-weight: 700;
color: white;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.hero p {
font-size: 24px;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 30px;
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
animation: bounce-down 2s infinite;
}
.scroll-indicator ion-icon {
font-size: 48px;
color: white;
}
@keyframes bounce-down {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(20px); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.section {
margin-bottom: 100px;
}
.section-title {
font-size: 42px;
font-weight: 700;
color: #2d6a4f;
text-align: center;
margin-bottom: 60px;
}
/* Fade In Animation */
.fade-in {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Slide In Animations */
.slide-left {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-left.visible {
opacity: 1;
transform: translateX(0);
}
.slide-right {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Scale Animation */
.scale-up {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.scale-up.visible {
opacity: 1;
transform: scale(1);
}
/* Rotate Animation */
.rotate-in {
opacity: 0;
transform: rotate(-180deg) scale(0.5);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.rotate-in.visible {
opacity: 1;
transform: rotate(0) scale(1);
}
/* Feature Cards */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.card {
background: white;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 40px rgba(45, 106, 79, 0.1);
text-align: center;
border: 3px solid #99d98c;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #99d98c 0%, #74c69d 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.card-icon ion-icon {
font-size: 40px;
color: white;
}
.card h3 {
font-size: 24px;
color: #2d6a4f;
margin-bottom: 15px;
}
.card p {
font-size: 16px;
color: #52b788;
line-height: 1.6;
}
/* Content Boxes */
.content-box {
background: white;
border-radius: 20px;
padding: 50px;
box-shadow: 0 10px 40px rgba(45, 106, 79, 0.1);
border: 3px solid #99d98c;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 40px;
}
.content-box.reverse {
flex-direction: row-reverse;
}
.content-image {
flex: 1;
min-width: 250px;
}
.content-image .placeholder {
width: 100%;
height: 300px;
background: linear-gradient(135deg, #99d98c 0%, #74c69d 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
}
.content-text {
flex: 1;
}
.content-text h3 {
font-size: 32px;
color: #2d6a4f;
margin-bottom: 20px;
}
.content-text p {
font-size: 18px;
color: #52b788;
line-height: 1.8;
margin-bottom: 15px;
}
/* Progress Bars */
.progress-section {
background: white;
border-radius: 20px;
padding: 50px;
box-shadow: 0 10px 40px rgba(45, 106, 79, 0.1);
border: 3px solid #99d98c;
}
.progress-item {
margin-bottom: 30px;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-weight: 600;
color: #2d6a4f;
}
.progress-bar-bg {
width: 100%;
height: 20px;
background: #d8f3dc;
border-radius: 10px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #99d98c 0%, #74c69d 100%);
border-radius: 10px;
width: 0;
transition: width 1.5s ease;
}
.progress-item.visible .progress-bar-fill {
width: var(--progress-width);
}
/* Statistics */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.stat-box {
background: white;
border-radius: 20px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 10px 40px rgba(45, 106, 79, 0.1);
border: 3px solid #99d98c;
}
.stat-number {
font-size: 48px;
font-weight: 700;
color: #99d98c;
margin-bottom: 10px;
}
.stat-label {
font-size: 18px;
color: #52b788;
font-weight: 600;
}
/* Counter Animation */
.counter {
display: inline-block;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 42px;
}
.hero p {
font-size: 18px;
}
.section-title {
font-size: 32px;
}
.content-box {
flex-direction: column;
padding: 30px;
}
.content-box.reverse {
flex-direction: column;
}
.content-text h3 {
font-size: 24px;
}
.content-text p {
font-size: 16px;
}
}
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Trigger counter animation for stat boxes
if (entry.target.classList.contains('stat-box')) {
const counter = entry.target.querySelector('.counter');
if (counter && !counter.classList.contains('counted')) {
animateCounter(counter);
counter.classList.add('counted');
}
}
}
});
}, observerOptions);
// Observe all animated elements
const animatedElements = document.querySelectorAll('.fade-in, .slide-left, .slide-right, .scale-up, .rotate-in, .progress-item');
animatedElements.forEach(el => observer.observe(el));
// Counter animation
function animateCounter(element) {
const target = parseInt(element.getAttribute('data-target'));
const duration = 2000;
const increment = target / (duration / 16);
let current = 0;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
element.textContent = target;
clearInterval(timer);
} else {
element.textContent = Math.floor(current);
}
}, 16);
}
// Add staggered animation delays
document.querySelectorAll('.cards-grid .card').forEach((card, index) => {
card.style.transitionDelay = `${index * 0.1}s`;
});
document.querySelectorAll('.stats-grid .stat-box').forEach((box, index) => {
box.style.transitionDelay = `${index * 0.15}s`;
});
document.querySelectorAll('.progress-item').forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
});
No comments yet. Be the first!