/* ============================================
   ABOUT PAGE CSS - Only for about.html
   ============================================ */

.about-content { padding: 60px 0; }
.about-text { max-width: 800px; margin: 0 auto; }
.about-text p { margin-bottom: 20px; line-height: 1.8; }

.values {
    background: var(--light-bg);
    padding: 60px 0;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}
.value-item {
    padding: 30px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.value-item i {
    font-size: 48px;
    font-style: normal;
    display: inline-block;
    margin-bottom: 20px;
}

.team { padding: 60px 0; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.team-member { text-align: center; }
.team-member img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 15px;
}

@media (max-width: 1024px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .values-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
}