/* ===== About Page ===== */
.about-container {
   display: flex;
   flex-direction: column;
   gap: 3rem;
}

.about-content {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 3rem;
   align-items: center;
}

.about-image {
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--box-shadow-lg);
}

.about-image img {
   width: 100%;
   height: auto;
}

.mission-vision {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
}

.mission-vision-card {
   background-color: white;
   border-radius: var(--border-radius-lg);
   padding: 2rem;
   box-shadow: var(--box-shadow);
   text-align: center;
   transition: var(--transition);
}

.mission-vision-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--box-shadow-lg);
}

.card-icon {
   width: 60px;
   height: 60px;
   background-color: rgba(79, 70, 229, 0.1);
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 1.5rem;
}

.team-section {
   margin-top: 2rem;
}

.team-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
}

.team-member {
   background-color: white;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--box-shadow);
   transition: var(--transition);
}

.team-member:hover {
   transform: translateY(-5px);
   box-shadow: var(--box-shadow-lg);
}

.member-image {
   height: 250px;
   overflow: hidden;
}

.member-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.team-member:hover .member-image img {
   transform: scale(1.05);
}

.member-info {
   padding: 1.5rem;
   text-align: center;
}

.member-info h3 {
   font-size: 1.25rem;
   margin-bottom: 0.25rem;
}

.member-info p {
   color: var(--gray-600);
   margin-bottom: 1rem;
}

.member-social {
   display: flex;
   justify-content: center;
   gap: 0.75rem;
}

.member-social a {
   width: 36px;
   height: 36px;
   background-color: var(--gray-100);
   color: var(--gray-700);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
}

.member-social a:hover {
   background-color: var(--primary-color);
   color: white;
}

.stats-section {
   margin-top: 3rem;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem;
}

.stat-item {
   background-color: white;
   border-radius: var(--border-radius-lg);
   padding: 2rem;
   box-shadow: var(--box-shadow);
   text-align: center;
}

.stat-number {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 0.5rem;
}

.stat-label {
   color: var(--gray-600);
}