/* About Page Typography */

/* Hero Section Padding */
.about-hero {
    padding: 70px 0 80px !important;
}

/* Hero Animations */
.about-hero .badge-premium {
    animation: fadeInUp 0.6s ease-out;
}

.about-hero .hero-title {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.about-hero .gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-hero .hero-description {
    font-size: 18px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
    margin-bottom: 2rem !important;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.about-hero .hero-stats {
    display: flex !important;
    gap: 40px !important;
    margin-bottom: 40px !important;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.about-hero .stat-item {
    text-align: center !important;
}

/* Hero Stats Typography */
.about-hero .stat-number {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.about-hero .stat-label {
    font-size: 0.875rem !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.about-hero .cta-group {
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

/* Button Sizing Override */
.about-hero .btn {
    font-size: 16px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}

.about-hero .btn-icon {
    width: 20px !important;
    height: 20px !important;
}

.about-hero .hero-animation {
    animation: fadeIn 1s ease-out 0.3s backwards;
}

/* Section Titles */
.section-title {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

.section-subtitle {
    font-size: 18px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
    margin-bottom: 3rem !important;
}

/* Story Section */
.story-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 1rem !important;
}

.story-text {
    font-size: 17px !important;
    color: var(--muted) !important;
    line-height: 1.8 !important;
}

/* Mission Cards */
.mission-card h4,
.service-card h4,
.why-card h5,
.principle-item h5 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 10px !important;
}

.mission-card p,
.service-card p,
.why-card p,
.principle-item p {
    font-size: 14px !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Value Cards */
.value-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 0.5rem !important;
}

.value-desc {
    font-size: 14px !important;
    color: var(--muted) !important;
    line-height: 1.6 !important;
}

/* Team Cards */
.team-name {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 0.25rem !important;
}

.team-role {
    font-size: 14px !important;
    color: var(--muted) !important;
}

/* CTA Section */
.cta-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 1rem !important;
}

.cta-description {
    font-size: 17px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
}

/* Responsive - Tablet (991px) */
@media (max-width: 991px) {
    .about-hero .hero-title,
    .section-title {
        font-size: 36px !important;
    }
    
    .about-hero .hero-description,
    .section-subtitle {
        font-size: 17px !important;
    }
    
    .story-title,
    .cta-title {
        font-size: 24px !important;
    }
    
    .story-text,
    .cta-description {
        font-size: 16px !important;
    }
}

/* Responsive - Mobile (768px) */
@media (max-width: 768px) {
    .about-hero {
        padding: 50px 0 60px !important;
    }
    
    .about-hero .hero-title,
    .section-title {
        font-size: 32px !important;
    }
    
    .about-hero .hero-description,
    .section-subtitle {
        font-size: 16px !important;
    }
    
    .about-hero .hero-stats {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    
    .about-hero .stat-item {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .about-hero .stat-number {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: var(--primary) !important;
    }
    
    .about-hero .stat-label {
        font-size: 0.75rem !important;
        color: var(--muted) !important;
        font-weight: 500 !important;
        text-transform: none !important;
    }
    
    .story-title,
    .cta-title {
        font-size: 22px !important;
    }
    
    .story-text,
    .cta-description {
        font-size: 15px !important;
    }
    
    .value-title,
    .team-name {
        font-size: 17px !important;
    }
}

/* Responsive - Small Mobile (480px) */
@media (max-width: 480px) {
    .about-hero .hero-title,
    .section-title {
        font-size: 28px !important;
    }
    
    .about-hero .hero-description,
    .section-subtitle {
        font-size: 15px !important;
    }
    
    .story-title,
    .cta-title {
        font-size: 20px !important;
    }
    
    .story-text,
    .cta-description {
        font-size: 14px !important;
    }
    
    .value-title,
    .team-name,
    .mission-card h4,
    .service-card h4,
    .why-card h5,
    .principle-item h5 {
        font-size: 17px !important;
    }
    
    .value-desc,
    .team-role,
    .mission-card p,
    .service-card p,
    .why-card p,
    .principle-item p {
        font-size: 13px !important;
    }
}