.about_hero{background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);padding:100px 0 80px;text-align:center;color:white;margin-bottom:60px;position:relative;overflow:hidden} .about_hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;background-size:cover;opacity:0.3} .about_hero .container{position:relative;z-index:1} .about_hero h1{font-size:56px;font-weight:800;color:white;margin-bottom:20px;animation:fadeInUp 0.8s ease-out} .about_hero p{font-size:20px;color:rgba(255,255,255,0.95);max-width:700px;margin:0 auto;line-height:1.8;animation:fadeInUp 0.8s ease-out 0.2s both} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } .our_story{padding:80px 0} .story_grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .story_image{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.15)} .story_image img{width:100%;height:500px;object-fit:cover;transition:transform 0.5s} .story_image:hover img{transform:scale(1.1)} .story_content h2{font-size:42px;margin-bottom:24px;background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .story_content p{font-size:16px;line-height:1.9;color:var(--text-secondary);margin-bottom:20px} .our_values{background:var(--bg-body);padding:80px 0} .section_title{text-align:center;margin-bottom:60px} .section_title h2{font-size:42px;margin-bottom:16px} .section_title p{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto} .values_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px} .value_card{background:white;padding:40px 30px;border-radius:16px;text-align:center;border:2px solid var(--border);transition:all 0.3s;position:relative;overflow:hidden} .value_card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);transform:scaleX(0);transition:transform 0.3s} .value_card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.1);border-color:transparent} .value_card:hover::before{transform:scaleX(1)} .value_icon{width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform 0.3s} .value_card:hover .value_icon{transform:scale(1.1) rotate(5deg)} .value_icon i{font-size:36px;color:white} .value_card h3{font-size:22px;margin-bottom:16px;color:var(--text-primary)} .value_card p{font-size:15px;color:var(--text-secondary);line-height:1.7} .our_team{padding:80px 0} .team_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px} .team_member{text-align:center;background:white;border-radius:16px;overflow:hidden;border:2px solid var(--border);transition:all 0.3s} .team_member:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.1);border-color:transparent} .member_image{width:100%;height:300px;background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);position:relative;overflow:hidden} .member_image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s} .team_member:hover .member_image img{transform:scale(1.1)} .member_info{padding:24px} .member_info h3{font-size:20px;margin-bottom:8px;color:var(--text-primary)} .member_info .position{color:var(--primary);font-size:14px;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px} .member_socials{display:flex;gap:12px;justify-content:center} .member_socials a{width:40px;height:40px;border-radius:50%;background:var(--bg-body);display:flex;align-items:center;justify-content:center;transition:all 0.3s} .member_socials a:hover{background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);transform:translateY(-3px)} .member_socials a:hover i{color:white} .member_socials a i{font-size:16px;color:var(--text-secondary)} .our_stats{background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);padding:80px 0;color:white} .stats_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;text-align:center} .stat_item{padding:20px} .stat_number{font-size:56px;font-weight:800;margin-bottom:12px;color:white;display:flex;align-items:center;justify-content:center;gap:8px} .stat_number span { color: #ffffff !important; } .stat_label{font-size:18px;color:rgba(255,255,255,0.9);font-weight:500} .cta_section{padding:80px 0;text-align:center} .cta_content{max-width:700px;margin:0 auto} .cta_content h2{font-size:42px;margin-bottom:24px} .cta_content p{font-size:18px;color:var(--text-secondary);margin-bottom:40px;line-height:1.8} .cta_buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap} .cta_btn{padding:16px 40px;border-radius:12px;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.3s;cursor:pointer;border:none} .cta_btn.primary{background:linear-gradient(135deg, #d4a574 0%, #c8966a 100%);color:white;box-shadow:0 4px 15px rgba(212, 165, 116, 0.4)} .cta_btn.primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(212, 165, 116, 0.5)} .cta_btn.secondary{background:transparent;border:2px solid var(--primary);color:var(--primary)} .cta_btn.secondary:hover{background:var(--primary);color:white} @media (max-width:1000px){.story_grid{grid-template-columns:1fr;gap:40px} .story_image{order:-1} } @media (max-width:768px){.about_hero{padding:80px 0 60px} .about_hero h1{font-size:36px} .about_hero p{font-size:16px} .story_content h2,.section_title h2,.cta_content h2{font-size:32px} .story_image img{height:350px} .our_story,.our_values,.our_team,.our_stats,.cta_section{padding:60px 0} .values_grid,.team_grid{grid-template-columns:1fr;gap:24px} .stats_grid{grid-template-columns:repeat(2,1fr);gap:30px} .stat_number{font-size:42px} .cta_buttons{flex-direction:column} .cta_btn{width:100%} } @media (max-width:500px){.about_hero h1{font-size:28px} .story_content h2,.section_title h2,.cta_content h2{font-size:26px} .stats_grid{grid-template-columns:1fr} }