*{box-sizing:border-box;margin:0;padding:0}.about-page{color:#e2e8f0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);min-height:100vh;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 20px}.about-hero{text-align:center;border-bottom:2px solid #60a5fa33;justify-content:center;align-items:center;padding:60px 20px;display:flex}.hero-content{max-width:800px}.hero-title{background:linear-gradient(135deg,#e6e9ec 0%,#f6f5fa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:56px;font-weight:700}.hero-subtitle{color:#cbd5e1;font-size:20px;font-weight:300}.about-main{background:#0f172a80;padding:80px 20px}.about-container{grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1200px;margin:0 auto;display:grid}.section-title{color:#fff;margin-bottom:30px;font-size:42px;font-weight:700}.about-text{color:#ecf1f7;text-align:justify;margin-bottom:16px;font-size:16px;line-height:1.8}.image-box{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#60a5fa33 0%,#a78bfa33 100%);border:2px solid #60a5fa4d;border-radius:16px;padding:60px 40px}.image-icon{margin-bottom:20px;font-size:80px;display:block}.image-box p{color:#fff;font-size:18px;font-weight:600}.mission-vision{padding:60px 20px}.mission-vision-grid{grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:0 auto;display:grid}.mission-card,.vision-card,.values-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;cursor:pointer;background:#1e293b99;border:2px solid #60a5fa33;border-radius:16px;padding:32px;transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.mission-card:hover,.vision-card:hover,.values-card:hover{background:#1e293be6;border-color:#60a5facc;transform:translateY(-15px)scale(1.02);box-shadow:0 20px 50px #60a5fa4d,inset 0 1px #ffffff1a}.mission-card:before,.vision-card:before,.values-card:before{content:"";pointer-events:none;background:linear-gradient(90deg,#60a5fa00 0%,#60a5fa26 50%,#60a5fa00 100%);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.mission-card:hover:before,.vision-card:hover:before,.values-card:hover:before{left:100%}.card-icon{margin-bottom:16px;font-size:50px;transition:all .4s;display:block}.mission-card:hover .card-icon,.vision-card:hover .card-icon,.values-card:hover .card-icon{filter:drop-shadow(0 0 20px #60a5fa99);animation:.6s iconPulse;transform:scale(1.3)rotate(-10deg)}@keyframes iconPulse{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1.3)rotate(-10deg)}}.mission-card h3,.vision-card h3,.values-card h3{color:#60a5fa;z-index:1;margin-bottom:12px;font-size:22px;font-weight:700;transition:all .3s;position:relative}.mission-card:hover h3,.vision-card:hover h3,.values-card:hover h3{color:#a78bfa;text-shadow:0 0 20px #a78bfa80}.mission-card p,.vision-card p,.values-card p{color:#cbd5e1;z-index:1;font-size:14px;line-height:1.6;transition:all .3s;position:relative}.mission-card:hover p,.vision-card:hover p,.values-card:hover p{color:#e2e8f0;transform:translateY(-5px)}.why-choose{background:#0f172acc;padding:60px 20px}.features-grid{grid-template-columns:repeat(4,1fr);gap:24px;max-width:1200px;margin:50px auto 0;display:grid}.feature-card{text-align:center;cursor:pointer;background:#1e293b99;border:2px solid #60a5fa33;border-radius:16px;padding:24px;transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.feature-card:hover{background:#1e293be6;border-color:#60a5facc;transform:translateY(-15px)scale(1.02);box-shadow:0 20px 50px #60a5fa4d,inset 0 1px #ffffff1a}.feature-card:before{content:"";pointer-events:none;background:linear-gradient(90deg,#60a5fa00 0%,#60a5fa26 50%,#60a5fa00 100%);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.feature-card:hover:before{left:100%}.feature-icon{color:#60a5fa;margin-bottom:12px;font-size:40px;font-weight:700;transition:all .4s;display:block}.feature-card:hover .feature-icon{filter:drop-shadow(0 0 20px #60a5fa99);animation:.6s iconPulse;transform:scale(1.3)rotate(-10deg)}.feature-card h3{color:#fff;z-index:1;margin-bottom:8px;font-size:18px;font-weight:600;transition:all .3s;position:relative}.feature-card:hover h3{color:#a78bfa;text-shadow:0 0 20px #a78bfa80}.feature-card p{color:#cbd5e1;z-index:1;font-size:13px;line-height:1.5;transition:all .3s;position:relative}.feature-card:hover p{color:#e2e8f0;transform:translateY(-5px)}.stats-section{background:linear-gradient(135deg,#60a5fa1a 0%,#a78bfa0d 100%);border-top:2px solid #60a5fa33;padding:60px 20px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto;display:grid}.stat-card{text-align:center;background:#1e293b66;border:1px solid #60a5fa33;border-radius:8px;padding:24px}.stat-number{color:#60a5fa;margin-bottom:8px;font-size:40px;font-weight:700}.stat-card p{color:#cbd5e1;font-size:14px;font-weight:500}.cta-section{text-align:center;background:linear-gradient(135deg,#60a5fa26 0%,#a78bfa26 100%);padding:60px 20px}.cta-section h2{color:#fff;margin-bottom:12px;font-size:40px;font-weight:700}.cta-section p{color:#cbd5e1;margin-bottom:30px;font-size:16px}.cta-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);border:none;border-radius:8px;padding:14px 42px;font-size:15px;font-weight:600;transition:all .3s;box-shadow:0 8px 25px #60a5fa4d}.cta-button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #60a5fa66}@media (max-width:1200px){.features-grid,.stats-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.about-container{grid-template-columns:1fr;gap:40px}.hero-title{font-size:40px}.section-title{font-size:32px}}@media (max-width:768px){.about-hero{min-height:350px;padding:60px 20px}.hero-title{font-size:32px}.hero-subtitle{font-size:16px}.section-title{font-size:26px}.about-main,.mission-vision,.why-choose,.stats-section,.cta-section{padding:50px 20px}.mission-vision-grid{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:repeat(2,1fr);gap:16px}.feature-card{padding:18px}.feature-icon{font-size:32px}.feature-card h3{font-size:16px}.feature-card p{font-size:12px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}.stat-number{font-size:32px}.cta-section h2{font-size:28px}}@media (max-width:480px){.hero-title{font-size:24px}.hero-subtitle{font-size:14px}.section-title{font-size:22px}.about-main,.mission-vision,.why-choose,.stats-section,.cta-section{padding:40px 20px}.about-text{text-align:left;font-size:13px}.mission-vision-grid,.features-grid{grid-template-columns:1fr}.feature-card{padding:16px}.stats-grid{grid-template-columns:1fr}.stat-number{font-size:28px}.cta-section h2{font-size:22px}.cta-button{padding:12px 32px;font-size:14px}}.scroll-animate{opacity:0;transition:all .8s cubic-bezier(.25,.46,.45,.94);transform:translateY(50px)}.scroll-animate.animate-in{opacity:1;transform:translateY(0)}.scroll-animate.animate-text{letter-spacing:.02em}h1.scroll-animate,h2.scroll-animate,h3.scroll-animate,p.scroll-animate{will-change:transform,opacity}.hero-title.scroll-animate.animate-in{animation:1s cubic-bezier(.25,.46,.45,.94) heroSlideIn}@keyframes heroSlideIn{0%{opacity:0;transform:translateY(60px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.section-title.scroll-animate.animate-in{animation:.9s cubic-bezier(.25,.46,.45,.94) titleSlideIn}@keyframes titleSlideIn{0%{opacity:0;transform:translateY(40px)}50%{opacity:.7;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mission-card h3.scroll-animate.animate-in,.vision-card h3.scroll-animate.animate-in,.values-card h3.scroll-animate.animate-in,.feature-card h3.scroll-animate.animate-in,.cta-section h2.scroll-animate.animate-in{animation:.7s ease-out cardTitleSlide}@keyframes cardTitleSlide{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.mission-card p.scroll-animate.animate-in,.vision-card p.scroll-animate.animate-in,.values-card p.scroll-animate.animate-in,.feature-card p.scroll-animate.animate-in,.about-text.scroll-animate.animate-in,.cta-section p.scroll-animate.animate-in{animation:.8s ease-out .2s both textSlideIn}@keyframes textSlideIn{0%{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}.about-img-wrapper{border-radius:16px;width:100%;height:100%;min-height:380px;overflow:hidden;box-shadow:0 20px 60px #00000026}.about-img{object-fit:cover;object-position:center;width:100%;height:100%}
