/* Number Section Styles */
.number-section {
    padding: 80px 0;
    background: #fff;
}

.number-section .section-title {
    text-align: center;
    font-size: 2.2em;
    color: var(--text-color);
    margin-bottom: 50px;
    line-height: 1.3;
}

.numbers-grid {
    margin-top: 40px;
}

.number-item {
    text-align: center;
    padding: 30px 20px;
    transition: var(--transition);
}

.number-item:hover {
    transform: translateY(-10px);
}

.number-icon {
    margin-bottom: 20px;
}

.number-icon i {
    font-size: 3.5em;
    color: var(--icon-color);
    transition: var(--transition);
}

.number-item:hover .number-icon i {
    transform: scale(1.1);
    color: var(--primary-color);
}

.number-value {
    font-size: 3em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1;
}

.number-label {
    font-size: 1.1em;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.3;
}

/* Animation on scroll */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.number-item.animate {
    animation: countUp 0.6s ease-out forwards;
}

/* Responsive */
@media (max-width: 768px) {
    .number-section {
        padding: 60px 0;
    }
    
    .number-section .section-title {
        font-size: 1.8em;
        margin-bottom: 40px;
    }
    
    .number-icon i {
        font-size: 2.5em;
    }
    
    .number-value {
        font-size: 2.2em;
    }
    
    .number-item {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
}