*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:98px}:root{--primary-navy: #0b2c4d;--secondary-blue: #1a3555;--accent-blue: #20599f;--accent-blue-alt: #22599d;--accent-pink: #f2388d;--accent-pink-alt: #f13c8e;--accent-yellow: #fed027;--accent-yellow-alt: #fece20;--accent-yellow-light: #ffd81f;--cream: #fceccf;--light-cyan: #d4f1ff;--dark-gray: #333333;--white: #ffffff;--font-heading: "Montserrat", sans-serif;--font-body: "Poppins", sans-serif}body{font-family:var(--font-body);color:var(--primary-navy);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(90deg,var(--cream) 0%,var(--light-cyan) 100%);min-height:100vh}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{text-decoration:none;color:inherit}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}img{height:auto;display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease-out}.text-center{text-align:center}.uppercase{text-transform:uppercase}.bold{font-weight:700}.header{height:98px;background:linear-gradient(90deg,#fef6e7,#e7f6fb);background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px #0000000d}.nav-container{width:100%;max-width:1400px;padding:0 40px;display:flex;align-items:center;justify-content:space-between}.logo-container{display:flex;align-items:center;width:96.492593px;height:74.73649px;position:relative;overflow:visible}.logo{width:120px}.logo:hover{opacity:.9}.nav-menu{display:flex;justify-content:flex-end;align-items:center;list-style:none;gap:35px;flex-wrap:wrap;margin:0}.nav-item{margin:0}.nav-link{font-family:var(--font-heading);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--secondary-blue);padding:10px 15px;transition:all .3s ease;position:relative;display:inline-block}.nav-link:hover{color:var(--accent-blue)}.nav-link.active{color:var(--primary-navy)}.nav-link.active:after{content:"";position:absolute;bottom:5px;left:15px;right:15px;height:2px;background-color:var(--primary-navy)}.nav-link.donasi-button{background-color:var(--accent-blue);color:var(--white);padding:8px 35px;border-radius:50px;transition:all .3s ease}.nav-link.donasi-button:hover{background-color:var(--accent-blue-alt);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 12px #20599f4d}.nav-link.donasi-button:after{display:none}.hamburger-menu{display:none;background-color:#fed028;border:none;width:50px;height:50px;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0;transition:all .3s ease;position:relative;z-index:1001}.hamburger-menu:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.hamburger-menu:active{transform:scale(.95)}.hamburger-line{width:24px;height:1px;background-color:#000;border-radius:2px;transition:all .3s ease}@media(max-width:1024px){.nav-container{padding:0 20px}.nav-menu{gap:20px}.logo-container{width:77.19407px;height:59.78919px}.logo{width:98.64119px;height:98.64119px;transform:translate(-21.44711px,-21.44645px)}}@media(max-width:768px){.header{height:98px;padding:0}.nav-container{flex-direction:row;gap:0;padding:0 20px;justify-content:space-between;position:relative}.logo-container{width:64.32839px;height:49.82433px}.logo{width:100px;height:100px;transform:translate(-1px)}.hamburger-menu{display:flex}.nav-menu{position:absolute;top:98px;left:0;right:0;background:linear-gradient(180deg,#fef6e7,#e7f6fb);flex-direction:column;gap:0;padding:20px 0;box-shadow:0 4px 12px #0000001a;max-height:0;overflow:hidden;opacity:0;transition:all .3s ease}.nav-menu.active{max-height:400px;opacity:1}.nav-item{width:100%;text-align:center;padding:10px 0}.nav-link{font-size:16px;padding:12px 20px;display:block;width:100%}.nav-link.donasi-button{padding:12px 35px;font-size:16px;display:inline-block;width:auto;margin:10px auto 0}}@media(max-width:480px){.hamburger-menu{width:45px;height:45px}.hamburger-line{width:20px}.nav-link{font-size:14px;padding:10px 15px}.nav-link.donasi-button{padding:10px 25px;font-size:14px}.logo-container{width:48.2463px;height:37.36824px}.logo{width:100px;height:100px;transform:translate(-15px,-5px)}}.floating-whatsapp{position:fixed;bottom:30px;right:30px;z-index:1000}.whatsapp-button{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));transition:filter .3s ease}.whatsapp-button:hover{filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}.whatsapp-button img{width:80px;height:auto;display:block}@media(max-width:768px){.floating-whatsapp{bottom:20px;right:20px}.whatsapp-button img{width:60px}}.home-page{width:100%;background-color:#fff}.hero-section{width:100%;height:702px;position:relative;overflow:hidden}.hero-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.background-svg{width:100%;height:100%}.hero-content-wrapper{position:relative;width:100%;max-width:1920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 353.8px 0 320px;z-index:2}.hero-left-content{max-width:700px;z-index:3}.hero-title{font-family:var(--font-body);font-weight:700;font-size:45.4629px;line-height:45px;text-transform:uppercase;margin-bottom:14px;text-wrap:nowrap}.text-navy{color:#0b2c4d}.text-blue{color:#21589d}.hero-subtitle{font-family:var(--font-body);font-weight:400;font-size:24px;line-height:28px;color:#333;margin-bottom:4px}.hero-subtitle strong{font-weight:700}.addiction-types{font-family:var(--font-body);font-weight:700;font-size:20px;line-height:24px;color:#333;text-transform:uppercase;margin-bottom:25px;margin-top:20px}.hero-right-image{position:relative;width:659.831024px;height:530.596218px;z-index:3;margin-right:-100px}.hero-image{width:700px;height:auto;transform:translate(-60px);padding-top:10px}.background-banner{position:absolute;bottom:0;left:0;width:100%;height:auto;pointer-events:none;z-index:1;display:flex;justify-content:center;align-items:flex-end}.background-banner img{width:100%;max-width:100%;height:auto;object-fit:contain;object-position:bottom}@media(max-width:1500px){.hero-content-wrapper{padding:0 100px}}@media(max-width:1400px){.hero-content-wrapper{padding:0 100px}.hero-right-image{margin-right:0}}@media(max-width:1024px){.hero-section{height:auto;min-height:600px}.hero-content-wrapper{flex-direction:column;padding:60px 40px;height:auto}.hero-left-content{max-width:100%;text-align:center;margin-bottom:40px}.hero-title{font-size:36px;line-height:40px}.hero-subtitle{font-size:20px;line-height:26px}.addiction-types{font-size:16px}.hero-right-image{width:500px;height:auto;margin-right:0}.hero-image{max-width:100%;transform:none}.background-banner{display:block}}@media(max-width:768px){.hero-content-wrapper{padding:40px 20px}.hero-title{font-size:28px;line-height:32px;margin-bottom:20px}.hero-subtitle{font-size:18px;line-height:24px;margin-bottom:20px}.addiction-types{font-size:14px;margin-bottom:30px}.cta-button{font-size:14px;padding:12px 24px}.hero-right-image{width:350px}}@media(max-width:480px){.hero-title{font-size:24px;line-height:28px}.hero-subtitle{font-size:18px;line-height:22px}.addiction-types{font-size:12px;margin-bottom:25px}.cta-button{font-size:12px;padding:10px 20px}.hero-right-image{width:280px}}.about-page{width:100%;background-color:#fff}.about-section{width:100%;position:relative;padding:80px 0}.about-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}.about-container{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:50px 70px;display:grid;grid-template-columns:53% 47%;gap:30px;align-items:center;z-index:2}.about-left-column{display:flex;flex-direction:column;gap:30px}.about-title{font-family:var(--font-body);font-weight:800;font-size:40px;color:var(--primary-navy);text-align:left;margin-bottom:0;text-transform:uppercase}.about-text{font-size:25px;margin-top:-10px;text-align:justify}.about-title1{color:#0b2c4d!important}.about-title{color:#22599d!important}.about-text p{font-family:var(--font-body);line-height:1.2;color:var(--primary-navy);margin-bottom:20px}.about-text p:last-child{margin-bottom:20px}.about-left-column .cta-button{display:inline-block;background-color:#f2388d;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:17.3334px;line-height:24px;text-transform:uppercase;padding:11.244361px 28.111px;border-radius:17px;text-decoration:none;transition:all .3s ease;width:fit-content;text-align:center}.about-left-column .cta-button:hover{background-color:#f13c8e;transform:translateY(-2px);box-shadow:0 4px 12px #f2388d66}.mission-text{background:linear-gradient(135deg,var(--accent-blue) 0%,var(--accent-blue-alt) 100%);color:var(--white);padding:40px;border-radius:15px;box-shadow:0 8px 30px #20599f4d}.mission-text h3{font-family:var(--font-body);font-weight:700;font-size:1.8rem;margin-bottom:20px}.mission-text p{font-family:var(--font-body);font-size:1.1rem;line-height:1.8;margin:0}.about-right-column{display:flex;justify-content:center;align-items:center}.about-image{width:100%;max-width:600px;height:auto;border-radius:15px}@media(max-width:1200px){.about-container{max-width:1100px;padding:50px 70px;gap:30px}.about-title{font-size:2.5rem}}@media(max-width:968px){.about-section{padding:60px 0}.about-container{grid-template-columns:1fr;gap:30px;padding:30px}.about-title{font-size:2.5rem;text-align:center}.about-left-column{order:1}.about-right-column{order:2}.about-image{max-width:500px}.about-text p,.mission-text p{font-size:1rem}}@media(max-width:640px){.about-section{padding:40px 0}.about-container{padding:0 20px;gap:30px}.about-title{font-size:2rem;margin-bottom:15px}.about-text p{font-size:.95rem;margin-bottom:15px}.mission-text h3{font-size:1.5rem;margin-bottom:15px}.mission-text p{font-size:.95rem}.about-image{max-width:100%}}@media(max-width:480px){.about-title{font-size:1.8rem}.about-text,.mission-text{padding:20px}.about-text p,.mission-text p{font-size:16px}.mission-text h3{font-size:1.3rem}}.program-page{min-height:calc(100vh - 98px)}.program-section{padding:80px 0;min-height:753px}.program-title{font-family:var(--font-body);font-size:37px;font-weight:800;text-align:center;margin-bottom:20px;text-transform:uppercase}.program-title1{color:#0b2c4d!important}.program-title{color:#22599d!important}.program-subtitle{font-family:var(--font-body);font-size:1.3rem;color:var(--secondary-blue);text-align:center;margin-bottom:60px;line-height:1.6}.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:80px;max-width:1100px;margin-left:auto;margin-right:auto}.program-card{background:#fffc;padding:40px 30px;border-radius:15px;text-align:center;box-shadow:0 4px 20px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;cursor:pointer}.program-card:hover{box-shadow:0 8px 30px #00000026}.program-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 25px;color:var(--white)}.program-card-title{font-family:var(--font-body);font-weight:700;font-size:1.5rem;color:var(--primary-navy);margin-bottom:15px}.program-card-description{font-family:var(--font-body);font-size:1rem;color:var(--secondary-blue);line-height:1.6;margin:0}.addiction-types-title{font-family:var(--font-body);font-weight:700;font-size:2rem;color:var(--primary-navy);text-align:center;margin-bottom:50px}.addiction-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:0 auto 80px}.addiction-type-box{position:relative;color:var(--white);padding:35px 0;border-radius:12px;text-align:center;transition:all .3s ease;cursor:pointer;overflow:hidden;min-height:210px;display:flex;align-items:center;justify-content:center}.addiction-type-box:hover{box-shadow:0 6px 25px #0b2c4d66;transform:scale(1.05)}.addiction-type-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden}.addiction-type-background img{width:100%;height:100%;object-fit:cover;object-position:center}.addiction-type-background:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.addiction-type-icon{font-size:3rem;margin-bottom:15px;position:relative;z-index:3}.addiction-type-name{font-family:var(--font-body);font-weight:700;font-size:1.2rem;margin:0;position:relative;z-index:3;background:#0b2c4dcc;border-radius:15px;width:100%;text-transform:uppercase;padding:20px 0}.program-cta{text-align:center;background:linear-gradient(135deg,var(--cream) 0%,var(--light-cyan) 100%);padding:50px;border-radius:15px;box-shadow:0 4px 20px #00000014}.program-cta p{font-family:var(--font-body);font-size:1.5rem;color:var(--primary-navy);font-weight:600;margin-bottom:25px}.program-cta-button{display:inline-block;background-color:var(--accent-blue);color:var(--white);font-family:var(--font-body);font-weight:700;font-size:1.1rem;text-transform:uppercase;padding:18px 45px;border-radius:50px;transition:all .3s ease;box-shadow:0 4px 15px #20599f4d}.program-cta-button:hover{background-color:var(--accent-blue-alt);box-shadow:0 6px 20px #20599f66;transform:translateY(-2px)}@media(max-width:968px){.program-title{font-size:2.5rem}.program-subtitle{font-size:1.1rem}.programs-grid{grid-template-columns:1fr;gap:25px}.addiction-types-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media(max-width:640px){.program-section{padding:50px 0}.program-title{font-size:2rem;margin-bottom:15px}.program-subtitle{font-size:1rem;margin-bottom:40px}.program-card{padding:30px 20px}.program-icon{width:70px;height:70px;font-size:2rem;margin-bottom:20px}.program-card-title{font-size:1.3rem;margin-bottom:12px}.program-card-description{font-size:.95rem}.addiction-types-title{font-size:1.5rem;margin-bottom:30px}.addiction-types-grid{grid-template-columns:1fr;gap:15px}.addiction-type-box{padding:25px 20px;min-height:180px}.addiction-type-icon{font-size:2.5rem}.addiction-type-name{font-size:1.1rem}.program-cta{padding:35px 20px}.program-cta p{font-size:1.2rem;margin-bottom:20px}.program-cta-button{padding:15px 35px;font-size:1rem}}.kontak-page{min-height:calc(100vh - 98px)}.kontak-section{width:100%;min-height:100vh;position:relative;padding:80px 0}.kontak-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}.kontak-background img{width:100%;height:100%;object-fit:cover;object-position:center}.kontak-section .container{position:relative;z-index:2}.kontak-headline{margin-bottom:30px;padding:250px 10px 0}.headline-text{font-family:var(--font-heading);font-weight:800;font-size:53px;color:#0b2c4d;margin:0;line-height:1.3;text-transform:uppercase}.crisis-text{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;color:#fff;margin-bottom:60px;text-transform:uppercase}.cta-button{display:inline-block;background-color:#f2388d;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:17.3334px;line-height:24px;text-transform:uppercase;padding:11.244361px 28.111px;border-radius:17px;text-decoration:none;transition:all .3s ease}.cta-button:hover{background-color:#f13c8e;transform:translateY(-2px);box-shadow:0 4px 12px #f2388d66}.contact-grid-wrapper{width:100%;background:#ffd81f;margin-bottom:80px;position:relative;z-index:2}.contact-grid{display:grid;grid-template-columns:max-content max-content max-content;gap:60px;justify-content:center;max-width:1920px;margin:0 auto}.contact-container{padding:0!important}.contact-item{display:flex;align-items:center;gap:20px;padding:20px}.contact-image{height:50px;width:auto;object-fit:contain;flex-shrink:0}.contact-image-sosmed{height:40px;width:auto;object-fit:contain;flex-shrink:0}.contact-link{font-family:var(--font-heading);font-weight:600;font-size:1.1rem;color:#000;text-decoration:none;transition:opacity .3s ease;word-break:break-word;text-transform:uppercase}.contact-link:hover{opacity:.7}@media(max-width:968px){.kontak-headline{margin-bottom:30px;padding:100px 10px 0}.headline-text{font-size:2rem;text-align:center}.crisis-text{font-size:1.2rem;text-align:center}.contact-grid{grid-template-columns:1fr;gap:0px}.contact-item{justify-content:center}.contact-link{font-size:1rem}.contact-image{height:30px}.contact-image-sosmed{height:25px}}@media(max-width:640px){.kontak-section{padding:50px 0}.headline-text{font-size:1.5rem}.crisis-text{font-size:1rem;margin-bottom:40px}.contact-item{padding:15px}.contact-link{font-size:.9rem}}.donasi-page{min-height:auto}.donasi-section{width:100%;position:relative;padding:0;height:auto}.donasi-background{position:relative;width:100%;height:auto;z-index:0}.donasi-background img{width:100%;height:auto;object-fit:contain;object-position:center;display:block}.donasi-container{position:absolute;inset:0;width:100%;max-width:1400px;margin:0 auto;padding:80px 60px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;z-index:2}.donasi-right-column{flex-direction:column;gap:40px}.donasi-headline{margin-bottom:30px}.donasi-headline-text{font-family:var(--font-body);font-weight:700;font-size:45px;color:#0b2c4d;margin:0;line-height:1;text-transform:uppercase}.donasi-bank-info{display:inline-block;background:#20599f;border-radius:15px;padding:10px 30px;width:fit-content;line-height:1.1}.bank-account{font-family:var(--font-heading);font-weight:700;font-size:20px;color:#fff;margin:0;text-align:center}.bank-name{font-family:var(--font-heading);font-weight:700;font-size:20px;color:#fff;margin:0;text-align:center;text-transform:uppercase}@media(max-width:968px){.donasi-container{grid-template-columns:1fr;padding:60px 40px;text-align:center}.donasi-left-column{display:none}.donasi-headline-text{font-size:2rem}.bank-account{font-size:1.1rem}.bank-name{font-size:1rem}}@media(max-width:640px){.donasi-container{padding:40px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.donasi-headline{margin-bottom:20px}.donasi-headline-text{font-size:1.3rem;line-height:1.2}.donasi-bank-info{padding:8px 18px}.bank-account{font-size:.95rem;margin-bottom:5px}.bank-name{font-size:.85rem}}.app{width:100%;min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;width:100%}.main-content section{width:100%;position:relative}.main-content section>*{transform:translateZ(0);will-change:transform}