/* Hero Section Styles */
.hero {
    background: linear-gradient(rgba(253, 205, 11, 0.8), rgba(253, 205, 11, 0.8)), url('/images/hero-about.jpg') no-repeat center center;
    background-size: cover;
    color: var(--secondary-color);
    text-align: center;
    padding: 4rem 0;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* Our Story Section Styles */
.our-story {
    padding: 3rem 0;
    background: var(--light-bg);
    text-align: center;
}

.our-story h2 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.our-story p {
    margin-bottom: 1rem;
}

/* Team Section Styles */
.team {
    padding: 3rem 0;
    text-align: center;
}

.team h2 {
    margin-bottom: 2rem;
    color: var(--secondary-color);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.team-member h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.team-member p {
    margin-bottom: 0.5rem;
}

/* Instructors Section Styles */
.instructors {
    padding: 3rem 0;
    background: var(--text-color);
    text-align: center;
}

.instructors h2 {
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.instructor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.instructor {
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.instructor img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.instructor h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.instructor p {
    margin-bottom: 0.5rem;
}

/* Careers Section Styles */
.careers {
    padding: 3rem 0;
    text-align: center;
}

.careers h2 {
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.careers p {
    margin-bottom: 1rem;
}

.careers a {
    color: var(--primary-color);
    text-decoration: none;
}

.careers a:hover {
    text-decoration: underline;
}
