/* Modern professional About page styles */
.about-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    color: #fff;
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,25,47,0.6), rgba(10,25,47,0.6));
    pointer-events: none;
}
.about-hero .about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.about-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.breadcrumb {
    background: transparent;
    justify-content: center;
    padding: 0;
    margin-bottom: .75rem;
}
.breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.9); }
.breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.8); }

.about-main {
    padding: 60px 0;
    color: #162033;
}
.about-intro h2 { font-weight: 700; color: #0b2b46; }
.about-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.about-features li {
    padding-left: 1.25rem;
    margin-bottom: .5rem;
    position: relative;
    font-weight: 500;
}
.about-features li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: 700;
}

.about-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 6px 22px rgba(15, 40, 60, 0.08);
    border: 1px solid rgba(15,40,60,0.04);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-top: 16px;
}
.stat {
    text-align: left;
    padding: 10px;
}
.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #007bff;
}
.stat-label {
    font-size: .9rem;
    color: #586b7a;
}

.about-cards { margin-top: 36px; }
.feature-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(15,40,60,0.06);
    border: 1px solid rgba(15,40,60,0.03);
    height: 100%;
}
.feature-card h4 { margin-bottom: .5rem; color: #0b2b46; }

/* Responsive tweaks */
@media (max-width: 767px) {
    .about-hero { padding: 48px 0; }
    .about-hero h1 { font-size: 1.8rem; }
    .about-stats { grid-template-columns: repeat(2,1fr); }
}