134 lines
2.6 KiB
CSS
134 lines
2.6 KiB
CSS
/* ==========================================================================
|
|
About Us Page Specific Styles
|
|
========================================================================== */
|
|
|
|
/**
|
|
* This file contains styles used exclusively on the About us page.
|
|
*
|
|
* 1. Meet the team section
|
|
* 2. Our values section
|
|
* 3. Mission and Vision
|
|
* 4. Mobile Styles
|
|
*/
|
|
|
|
/* 1. Meet the team section */
|
|
.team-section {
|
|
padding: 96px 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.team-members-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap; /* Allows wrapping on smaller screens */
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.team-member-card {
|
|
flex: 1;
|
|
min-width: 240px;
|
|
max-width: 243px; /* Adjusted max-width to fit 5 cards in a 1280px container with gaps */
|
|
background-color: #F9FAFB;
|
|
text-align: center;
|
|
padding: 24px;
|
|
border-radius: 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.team-member-card img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.team-member-card h4 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #101828;
|
|
}
|
|
|
|
.team-member-card .role {
|
|
color: #FA7850;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 8px;
|
|
min-height: 48px; /* Added min-height for alignment */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.team-member-card .description {
|
|
font-size: 14px;
|
|
color: #667085;
|
|
flex-grow: 1; /* Allows the description to take up remaining space */
|
|
}
|
|
|
|
.team-member-card .social-icon-btn {
|
|
margin-top: 16px;
|
|
border-color: #EAECF0;
|
|
}
|
|
|
|
|
|
/* 2. Our values section */
|
|
.values-section {
|
|
background-color: #F9FAFB;
|
|
}
|
|
|
|
/* 3. Mission and Vision */
|
|
.mission-vision {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
max-width: 768px;
|
|
margin: 64px auto 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.mission-vision > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.mission-vision h4 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
/* 4. Mobile Styles for About Us page */
|
|
@media (max-width: 1280px) {
|
|
.team-members-grid {
|
|
justify-content: center; /* Center items when they wrap */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.team-section {
|
|
padding: 64px 24px;
|
|
}
|
|
|
|
.team-members-grid {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.team-member-card {
|
|
max-width: 100%;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.mission-vision {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
} |