:root{--primary-color:#004d40;--primary-light:#39796b;--primary-dark:#00251a;--secondary-color:#d4af37;--secondary-light:#ffdf6a;--secondary-dark:#a08100;--text-dark:#212121;--text-muted:#666;--bg-white:#fdfdfd;--bg-light:#f8f9fa;--white:#fff;--transition:all .3s ease-in-out;--shadow:0 4px 6px #0000001a;--shadow-hover:0 10px 15px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-dark);background-color:var(--bg-white);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Montserrat,sans-serif;font-weight:700;line-height:1.3}a{color:inherit;transition:var(--transition);text-decoration:none}ul{list-style:none}img{max-width:100%;height:auto;display:block}.container{width:90%;max-width:1200px;margin:0 auto}.section{padding:80px 0}.btn{cursor:pointer;transition:var(--transition);border:none;border-radius:4px;padding:12px 28px;font-weight:600;display:inline-block}.btn-primary{background-color:var(--primary-color);color:var(--white)}.btn-primary:hover{background-color:var(--primary-light);transform:translateY(-2px)}.btn-secondary{background-color:var(--secondary-color);color:var(--primary-dark)}.btn-secondary:hover{background-color:var(--secondary-light);transform:translateY(-2px)}.btn-outline{border:2px solid var(--primary-color);color:var(--primary-color);background-color:#0000}.btn-outline:hover{background-color:var(--primary-color);color:var(--white)}.card{background:var(--white);box-shadow:var(--shadow);transition:var(--transition);border:1px solid #0000000d;border-radius:12px;padding:30px}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-10px)}.grid{gap:30px;display:grid}@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}.header{background-color:var(--white);z-index:1000;padding:15px 0;position:sticky;top:0;box-shadow:0 2px 10px #0000000d}.nav{justify-content:space-between;align-items:center;display:flex}.logo{color:var(--primary-color);align-items:center;gap:10px;font-family:Montserrat,sans-serif;font-size:1.2rem;font-weight:700;display:flex}.logo-img{width:auto;height:50px}.nav-links{gap:25px;display:flex}.nav-link{color:var(--text-dark);font-size:.95rem;font-weight:600}.nav-link:hover,.nav-link.active{color:var(--primary-color)}.mobile-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;display:none}.bar{background-color:var(--primary-color);border-radius:2px;width:25px;height:3px}.hero{height:80vh;color:var(--white);text-align:center;background-color:#0000;background-image:linear-gradient(#0009,#0009),url(/assets/masjid.jpg);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;align-items:center;display:flex}.hero h1{margin-bottom:20px;font-size:3.5rem}.hero .subtitle{color:var(--secondary-light);margin-bottom:30px;font-size:1.5rem}.hero-btns{justify-content:center;gap:20px;display:flex}.footer{background-color:var(--primary-dark);color:var(--white);padding:80px 0 20px}.footer h3,.footer h4{color:var(--secondary-color);margin-bottom:20px}.footer ul li{margin-bottom:10px}.footer a:hover{color:var(--secondary-color)}.footer-bottom{text-align:center;color:var(--text-muted);border-top:1px solid #ffffff1a;margin-top:60px;padding-top:20px;font-size:.9rem}.center{text-align:center}.mt-4{margin-top:40px}.section-title{color:var(--primary-color);margin-bottom:50px;font-size:2.5rem;position:relative}.section-title.center:after{left:50%;transform:translate(-50%)}.section-title:after{content:"";background-color:var(--secondary-color);width:60px;height:4px;position:absolute;bottom:-10px;left:0}.bg-light{background-color:var(--bg-light)}.img-placeholder{aspect-ratio:16/9;background-color:#ddd;border-radius:12px;justify-content:center;align-items:center;width:100%;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:1s ease-out forwards fadeIn}.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}@media (max-width:768px){.mobile-toggle{display:flex}.nav-links{background-color:var(--white);flex-direction:column;gap:15px;width:100%;padding:20px;display:none;position:absolute;top:100%;left:0;box-shadow:0 5px 10px #0000001a}.nav-links.active{display:flex}.hero h1{font-size:2.5rem}}