
/* About Hero */
.about-hero {
margin-top: 80px;
height: 500px;
position: relative;
background-image: url('https://durgvihar.in//public/assets/images/about-us-banner.jpeg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
background-position: center;
}

.about-hero-overlay {
position: absolute;
inset: 0;
background:#00000087;
}

.about-hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 2rem;
}

.about-hero-title {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 600;
color: white;
margin-bottom: 1rem;
text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.4);
}

.about-hero-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
color: white;
opacity: 0.95;
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mission Section */
.mission-section {
padding: 2.5rem 0;
background-color: white;
}

.mission-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}

.mission-image {
position: relative;
border-radius: 1rem;
overflow: hidden;
height: 100%;
box-shadow: 0 10px 40px rgba(17, 24, 39, 0.15);
}

.mission-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.mission-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
}

.mission-content {
padding: 0 1rem;
}

.mission-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: #111827;
margin-bottom: 1.5rem;
}

.mission-text {
font-size: 1.125rem;
color: #374151;
line-height: 1.8;
margin-bottom: 1.5rem;
}

.mission-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 2rem;
margin-top: 3rem;
}

.stat-item {
text-align: center;
padding: 1.5rem;
background: #FFF7ED;
border-radius: 1rem;
border: 2px solid #F97316;
}

.stat-number {
font-size: 2.5rem;
font-weight: 600;
color: #F97316;
margin-bottom: 0.5rem;
}

.stat-label {
font-size: 0.875rem;
color: #6B7280;
font-weight: 500;
}

/* Values Section */
.values-section {
padding: 2.5rem 0;
background-color: #FFF7ED;
}

.values-header {
text-align: center;
margin-bottom: 4rem;
}

.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: #111827;
margin-bottom: 1rem;
}

.text-accent {
color: #F97316;
}

.section-subtitle {
font-size: 1.125rem;
color: #6B7280;
max-width: 600px;
margin: 0 auto;
}

.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

.value-card {
background: white;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(17, 24, 39, 0.08);
transition: all 0.3s;
border: 2px solid transparent;
}

.value-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(249, 115, 22, 0.2);
border-color: #F97316;
}

.value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #F97316 0%, #DC2626 100%);
border-radius: 1rem;
margin-bottom: 1.5rem;
}

.value-icon svg {
color: white;
}

.value-title {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin-bottom: 1rem;
}

.value-description {
font-size: 1rem;
color: #6B7280;
line-height: 1.7;
}

/* Team Section */
.team-section {
padding: 2.5rem 0;
background-color: white;
}

.team-header {
text-align: center;
margin-bottom: 4rem;
}

.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}

.team-card {
background: #FFF7ED;
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 4px 20px rgba(17, 24, 39, 0.08);
}

.team-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(249, 115, 22, 0.2);
}

.team-image {
position: relative;
height: 400px;
overflow: hidden;
}

.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}

.team-card:hover .team-image img {
transform: scale(1.1);
}

.team-overlay {
position: absolute;
inset: 0;
background:#00000087;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}

.team-card:hover .team-overlay {
opacity: 1;
}

.team-social {
display: flex;
gap: 1rem;
}

.team-social a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: white;
border-radius: 50%;
transition: all 0.3s;
}

.team-social a:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

.team-social svg {
color: #F97316;
}

.team-info {
padding: 2rem;
text-align: center;
}

.team-name {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin-bottom: 0.5rem;
}

.team-role {
font-size: 1rem;
color: #F97316;
font-weight: 600;
margin-bottom: 1rem;
}

.team-description {
font-size: 0.875rem;
color: #6B7280;
line-height: 1.6;
}

/* Stats Section */
.stats-section {
position: relative;
padding: 3rem 0;
background-image: url('https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=1920&h=400&fit=crop');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.stats-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(15, 118, 110, 0.85) 100%);
}

.stats-grid {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

.stat-card {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 1rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(249, 115, 22, 0.3);
transition: all 0.3s;
}

.stat-card:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #F97316;
transform: translateY(-8px);
}

.stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #F97316 0%, #DC2626 100%);
border-radius: 50%;
margin-bottom: 1.5rem;
}

.stat-icon svg {
color: white;
}

.stat-number {
font-size: 3.5rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}

.stat-number::after {
content: '+';
color: #FACC15;
}

.stat-number[data-target="4.9"]::after {
content: '';
}

.stat-text {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}

/* Testimonials Section */
.testimonials-section {
padding: 2.5rem 0;
background-color: #FFF7ED;
}

.testimonials-header {
text-align: center;
margin-bottom: 4rem;
}

.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}

.testimonial-card {
background: white;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(17, 24, 39, 0.08);
transition: all 0.3s;
border-left: 4px solid #F97316;
}

.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(249, 115, 22, 0.2);
}

.testimonial-rating {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
}

.testimonial-text {
font-size: 1.125rem;
color: #374151;
line-height: 1.8;
margin-bottom: 2rem;
font-style: italic;
}

.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}

.testimonial-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #F97316;
}

.author-info {
display: flex;
flex-direction: column;
}

.author-name {
font-size: 1rem;
font-weight: 600;
color: #111827;
}

.author-location {
font-size: 0.875rem;
color: #6B7280;
}

/* CTA Section */
.cta-section {position: relative;padding: 2.5rem 0;background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=600&fit=crop');background-size: cover;background-position: center;}
.cta-overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(220, 38, 38, 0.85) 100%);}
.cta-content {position: relative;z-index: 10;text-align: center;color: white;}
.cta-title {font-size: clamp(2.5rem, 5vw, 4rem);font-weight: 600;margin-bottom: 1rem;text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);}
.cta-subtitle {font-size: clamp(1.125rem, 2vw, 1.5rem);margin-bottom: 3rem;opacity: 0.95;}
.cta-buttons {display: flex;flex-direction: column;gap: 1rem;align-items: center;justify-content: center;}
.btn-cta {display: inline-flex;align-items: center;justify-content: center;padding: 1.25rem 3rem;border-radius: 9999px;font-weight: 600;font-size: 1.125rem;text-decoration: none;transition: all 0.3s;min-width: 250px;}
.btn-cta.primary {background: white;color: #F97316;}
.btn-cta.primary:hover {transform: translateY(-4px);box-shadow: 0 12px 40px rgba(255, 255, 255, 0.4);}
.btn-cta.secondary {background: transparent;color: white;border: 2px solid white;}
.btn-cta.secondary:hover {background: white;color: #F97316;transform: translateY(-4px);}
/* Responsive Design */
@media (min-width: 640px) {
.values-grid {grid-template-columns: repeat(2, 1fr);}
.team-grid {grid-template-columns: repeat(2, 1fr);}
.stats-grid {grid-template-columns: repeat(2, 1fr);}
.cta-buttons {flex-direction: row;}
}

@media (min-width: 768px) {
.mission-grid {grid-template-columns: 1fr 1fr;}
}
@media (min-width: 1024px) {
.values-grid {grid-template-columns: repeat(3, 1fr);}
.team-grid {grid-template-columns: repeat(4, 1fr);}
.stats-grid {grid-template-columns: repeat(4, 1fr);}
.testimonials-grid {grid-template-columns: repeat(3, 1fr);}
}
