/* Who We Are Section */
.who-we-are-section { background: linear-gradient(135deg, var(--color-white) 0%, var(--color-white) 100%); padding: 100px 0; position: relative; overflow: hidden; }
.who-we-are-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="%23F69B09" opacity="0.1"/></svg>'); opacity: 0.4; pointer-events: none; }

/* Content Wrapper */
.content-wrapper { position: relative; z-index: 2; }

/* Section Badge */
.section-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--color-orange) 0%, #ff8c00 100%); padding: 8px 20px; border-radius: 50px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(246, 155, 9, 0.3); animation: fadeInUp 0.6s ease; }
.badge-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; }
.badge-icon i { color: var(--color-white); font-size: 12px; }
.badge-text { color: var(--color-white); font-weight: 600; font-size: 14px; letter-spacing: 0.5px; }

/* Section Title */
.section-title { font-size: 2.8rem; font-weight: 700; color: var(--color-purple); line-height: 1.2; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.2s both; }
.highlight-text { color: var(--color-orange); position: relative; display: inline-block; }
.highlight-text::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg, rgba(246, 155, 9, 0.2) 0%, rgba(246, 155, 9, 0.4) 100%); border-radius: 4px; }

/* Section Description */
.section-description { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 30px; animation: fadeInUp 0.6s ease 0.3s both; }

/* Feature Highlights */
.feature-highlights { display: flex; flex-direction: column; gap: 20px; margin-bottom: 35px; animation: fadeInUp 0.6s ease 0.4s both; }
.feature-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px; background: var(--color-white); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.feature-item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.feature-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-orange) 0%, #ff8c00 100%); border-radius: 10px; }
.feature-icon i { color: var(--color-white); font-size: 18px; }
.feature-content h4 { font-size: 1rem; font-weight: 600; color: var(--color-purple); margin: 0 0 5px 0; }
.feature-content p { font-size: 0.9rem; color: #666; margin: 0; line-height: 1.5; }

/* CTA Group */
.cta-group { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; animation: fadeInUp 0.6s ease 0.5s both; }
.explore-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--color-orange) 0%, #ff8c00 100%); color: var(--color-white); padding: 14px 30px; border-radius: 50px; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 15px rgba(246, 155, 9, 0.3); transition: all 0.3s ease; border: none; }
.explore-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(246, 155, 9, 0.4); color: var(--color-white); }
.explore-btn i { font-size: 14px; transition: transform 0.3s ease; }
.explore-btn:hover i { transform: translateX(5px); }
.learn-more-btn { display: inline-flex; align-items: center; padding: 14px 30px; border: 2px solid var(--color-purple); border-radius: 50px; color: var(--color-purple); font-weight: 600; font-size: 1rem; text-decoration: none; background: transparent; transition: all 0.3s ease; }
.learn-more-btn:hover { background: var(--color-purple); color: var(--color-white); transform: translateY(-2px); }

/* Visual Wrapper */
.visual-wrapper { position: relative; animation: fadeInRight 0.8s ease; }
.image-container { position: relative; z-index: 2; }
/* .image-backdrop { position: absolute; top: 30px; right: -30px; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple) 100%); border-radius: 20px; z-index: -1; } */
.main-image { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); display: block; }

/* Floating Cards */
.floating-card { position: absolute; background: var(--color-white); padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 15px; animation: float 3s ease-in-out infinite; }
.stat-card-1 { top: 20px; left: -20px; animation-delay: 0s; }
.stat-card-2 { bottom: 40px; right: -20px; animation-delay: 1.5s; }
.stat-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--color-orange) 0%, #ff8c00 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.stat-icon i { color: var(--color-white); font-size: 22px; }
.stat-content { line-height: 1; }
.stat-number { font-size: 1.8rem; font-weight: 700; color: var(--color-purple); margin: 0 0 5px 0; }
.stat-label { font-size: 0.85rem; color: #666; margin: 0; }

/* Decorative Elements */
.decorative-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.deco-circle { position: absolute; border-radius: 50%; background: linear-gradient(135deg, rgba(246, 155, 9, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%); }
.circle-1 { width: 200px; height: 200px; top: -50px; left: -50px; animation: pulse 4s ease-in-out infinite; }
.circle-2 { width: 150px; height: 150px; bottom: -30px; right: -30px; animation: pulse 4s ease-in-out infinite 2s; }
.deco-dots { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: radial-gradient(circle, var(--color-orange) 2px, transparent 2px); background-size: 20px 20px; opacity: 0.2; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.1; } 50% { transform: scale(1.1); opacity: 0.15; } }

/* Responsive Design */
@media (max-width: 991px) { .who-we-are-section { padding: 70px 0; } .section-title { font-size: 2.3rem; } .visual-wrapper { margin-top: 40px; } .stat-card-1 { top: 10px; left: -10px; } .stat-card-2 { bottom: 20px; right: -10px; } }
@media (max-width: 768px) { .who-we-are-section { padding: 50px 0; } .section-title { font-size: 2rem; } .section-description { font-size: 1rem; } .feature-item { padding: 12px; } .feature-content h4 { font-size: 0.95rem; } .feature-content p { font-size: 0.85rem; } .cta-group { flex-direction: column; width: 100%; } .explore-btn, .learn-more-btn { width: 100%; justify-content: center; } .image-backdrop { top: 20px; right: -20px; } .floating-card { padding: 15px; } .stat-number { font-size: 1.5rem; } .circle-1, .circle-2 { display: none; } }
@media (max-width: 576px) { .who-we-are-section { padding: 40px 0; } .section-badge { padding: 6px 16px; } .badge-text { font-size: 12px; } .section-title { font-size: 1.8rem; } .stat-card-1, .stat-card-2 { position: static; margin: 15px auto; width: fit-content; } .visual-wrapper { text-align: center; } }