/*================================================== MONEY PLANT Premium Investment Website ===================================================*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { --primary: #4CAF50; --primary-dark: #2E7D32; --secondary: #D4AF37; --gold-light: #F7D774; --bg: #071706; --bg2: #103112; --card: #143A14; --white: #ffffff; --text: #DCE7DA; --muted: #A7B9A4; --shadow: 0 20px 50px rgba(0,0,0,.35); --radius: 18px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Moved here from body. overflow-x:hidden on itself makes many browsers treat body as a clipping container for its position:fixed descendants — which is exactly what .mobile-menu and .mobile-overlay are. The JS toggles the "active" class correctly (confirmed via DevTools), but the browser never paints the slide-in because body was clipping it. html still blocks horizontal scroll from the floating coin/leaf decorations; it just doesn't clip fixed children the way body does. */ overflow-x: hidden; } body { font-family: 'Poppins',sans-serif; background: radial-gradient(circle at top right, rgba(212,175,55,.12), transparent 35%), radial-gradient(circle at bottom left, rgba(76,175,80,.18), transparent 40%), linear-gradient(135deg, #071706, #0C220B, #123112); color: var(--white); } img { max-width: 100%; display: block; } a { text-decoration: none; } ul { list-style: none; } .container { width: min(1320px,92%); margin: auto; } /*========================================== HEADER ==========================================*/ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: .35s; padding: 18px 0; backdrop-filter: blur(20px); background: rgba(7,23,6,.75); border-bottom: 1px solid rgba(212,175,55,.18); } .header.scrolled { padding: 12px 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo img { height: 72px; } /*========================================== NAVIGATION ==========================================*/ .navbar ul { display: flex; gap: 34px; align-items: center; } .navbar a { color: #fff; font-size: 15px; font-weight: 500; transition: .35s; position: relative; } .navbar a:hover, .navbar a.active { color: var(--secondary); } .navbar a::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; background: var(--secondary); transition: .35s; } .navbar a:hover::after, .navbar a.active::after { width: 100%; } /*========================================== HEADER BUTTONS ==========================================*/ .header-buttons { display: flex; gap: 15px; } .btn-primary { display: inline-flex; justify-content: center; align-items: center; padding: 15px 32px; border-radius: 50px; background: linear-gradient(135deg, #4CAF50, #2E7D32); color: #fff; font-weight: 600; transition: .35s; box-shadow: 0 10px 30px rgba(76,175,80,.35); } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(76,175,80,.45); } .btn-outline { display: inline-flex; justify-content: center; align-items: center; padding: 15px 30px; border-radius: 50px; border: 2px solid var(--secondary); color: var(--secondary); transition: .35s; } .btn-outline:hover { background: var(--secondary); color: #111; } .mobile-toggle { display: none; cursor: pointer; } .mobile-toggle span { width: 30px; height: 3px; background: #fff; display: block; margin: 6px 0; } /*========================================== HERO ==========================================*/ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 120px; } .hero-grid { display: grid; grid-template-columns: 55% 45%; align-items: center; gap: 60px; } .hero-content { position: relative; z-index: 5; } .hero-badge { display: inline-block; padding: 10px 22px; border-radius: 40px; background: rgba(76,175,80,.15); border: 1px solid rgba(76,175,80,.35); color: var(--secondary); margin-bottom: 25px; font-size: 15px; } .hero h1 { font-size: 72px; line-height: 1.05; margin-bottom: 25px; font-weight: 800; } .hero h1 span { color: var(--secondary); display: block; } .hero p { max-width: 620px; font-size: 18px; color: var(--text); line-height: 34px; margin-bottom: 35px; } /* Services */ .hero-services { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 40px; } .hero-services span { padding: 10px 18px; border-radius: 30px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--secondary); } /* Buttons */ .hero-buttons { display: flex; gap: 18px; margin-bottom: 60px; } /*========================================== COUNTERS ==========================================*/ .hero-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .stat-card { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.18); backdrop-filter: blur(18px); transition: .35s; } .stat-card:hover { transform: translateY(-8px); border-color: var(--secondary); } .stat-card h2 { color: var(--secondary); font-size: 34px; margin-bottom: 8px; } .stat-card p { color: var(--muted); font-size: 14px; line-height: 22px; } /*========================================== IMAGE ==========================================*/ .hero-image { display: flex; justify-content: center; align-items: center; } .hero-card { padding: 20px; border-radius: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.25); backdrop-filter: blur(20px); box-shadow: var(--shadow); } .hero-card img { width: 100%; max-width: 620px; border-radius: 18px; } /*========================================== FLOATING ==========================================*/ .floating { position: absolute; pointer-events: none; opacity: .85; } .coin { width: 85px; } .coin1 { top: 18%; left: 4%; } .coin2 { bottom: 12%; right: 6%; } .leaf { width: 75px; } .leaf1 { top: 24%; right: 8%; } .leaf2 { bottom: 20%; left: 8%; } /*========================================== MOBILE MENU ==========================================*/ .mobile-menu { display: none; } /*============================= SECTION =============================*/ .section { padding: 120px 0; } .section-title { text-align: center; max-width: 760px; margin: auto auto 70px; } .section-title span { color: var(--secondary); font-weight: 700; letter-spacing: 2px; } .section-title h2 { font-size: 46px; margin: 15px 0; } .section-title p { color: var(--text); line-height: 30px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image img { border-radius: 25px; box-shadow: var(--shadow); } .feature-box { display: flex; gap: 25px; padding: 28px; margin-bottom: 25px; background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.15); border-radius: 18px; transition: .35s; } .feature-box:hover { transform: translateY(-8px); } .icon { width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; background: linear-gradient(135deg,#4CAF50,#2E7D32); } .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; } .service-card { padding: 35px; background: rgba(255,255,255,.05); border-radius: 25px; text-align: center; transition: .35s; } .service-card img { width: 100px; margin: auto auto 25px; } .service-card:hover { transform: translateY(-10px); } .service-card h3 { margin-bottom: 15px; } .service-card p { color: var(--text); line-height: 28px; margin-bottom: 20px; } .service-card a { color: var(--secondary); font-weight: 600; } .why-us { padding: 120px 0; } .why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; } .why-card { padding: 35px; text-align: center; background: rgba(255,255,255,.05); border-radius: 20px; transition: .35s; } .why-card:hover { transform: translateY(-10px); } .why-icon { font-size: 42px; margin-bottom: 20px; } /*========================================== CALCULATOR ==========================================*/ .calculator-section { padding: 120px 0; } .calculator-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .calculator-box { background: rgba(255,255,255,.05); padding: 40px; border-radius: 25px; border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); } .calculator-box h3 { margin-bottom: 35px; } .form-group { margin-bottom: 30px; } .form-group label { display: block; margin-bottom: 12px; font-weight: 600; } .form-group input[type=number] { width: 100%; padding: 15px; border: none; border-radius: 12px; background: #fff; font-size: 18px; } .form-group input[type=range] { width: 100%; cursor: pointer; } .range-value { margin-top: 10px; font-weight: 700; color: var(--secondary); } .result-box { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; } .result-card { background: rgba(255,255,255,.05); padding: 35px; border-radius: 20px; text-align: center; } .result-card h4 { margin-bottom: 15px; color: var(--text); } .result-card h2 { color: var(--secondary); font-size: 34px; } .chart-circle { grid-column: 1/-1; display: flex; justify-content: center; margin-top: 20px; } .circle { width: 220px; height: 220px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient( #4CAF50 0deg, #D4AF37 220deg, rgba(255,255,255,.08) 220deg ); } .circle span { width: 170px; height: 170px; border-radius: 50%; background: #0c220b; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #fff; } /*========================================== BENEFITS ==========================================*/ .benefits-section { padding: 120px 0; position: relative; } .benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; } .benefit-card { background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.15); border-radius: 24px; padding: 40px 30px; text-align: center; transition: .35s; backdrop-filter: blur(18px); } .benefit-card:hover { transform: translateY(-10px); border-color: #D4AF37; box-shadow: 0 20px 40px rgba(0,0,0,.30); } .benefit-icon { width: 90px; height: 90px; margin: 0 auto 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; background: linear-gradient(135deg,#4CAF50,#2E7D32); color: #fff; box-shadow: 0 12px 25px rgba(76,175,80,.35); } .benefit-card h3 { margin-bottom: 18px; font-size: 24px; color: #fff; } .benefit-card p { color: var(--text); line-height: 30px; font-size: 16px; } /*========================================== TIMELINE ==========================================*/ .timeline-section { padding: 120px 0; position: relative; } .timeline { position: relative; max-width: 1200px; margin: 80px auto 0; } .timeline::before { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 100%; background: linear-gradient(#4CAF50,#D4AF37); transform: translateX(-50%); } .timeline-item { position: relative; width: 50%; padding: 20px 40px; margin-bottom: 60px; } .timeline-item.left { left: 0; } .timeline-item.right { left: 50%; } .timeline-content { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 35px; backdrop-filter: blur(20px); transition: .35s; position: relative; } .timeline-content:hover { transform: translateY(-8px); border-color: #D4AF37; box-shadow: 0 20px 40px rgba(0,0,0,.25); } .timeline-icon { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg,#4CAF50,#D4AF37); display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 20px; } .timeline-content h3 { margin-bottom: 15px; color: #fff; } .timeline-content p { color: var(--text); line-height: 1.8; } /* Circle */ .timeline-item::after { content: ""; position: absolute; top: 45px; width: 22px; height: 22px; border-radius: 50%; background: #D4AF37; border: 4px solid #4CAF50; z-index: 10; } .timeline-item.left::after { right: -11px; } .timeline-item.right::after { left: -11px; } /*========================================== STATISTICS ==========================================*/ .statistics-section { position: relative; padding: 120px 0; background: linear-gradient(rgba(8,25,10,.88), rgba(8,25,10,.88)), url("../images/statistics-bg.jpg") center/cover no-repeat; overflow: hidden; } .statistics-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(212,175,55,.15), transparent 70%); } .statistics-section .container { position: relative; z-index: 2; } .statistics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 70px; } .stat-card { background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.15); border-radius: 25px; text-align: center; padding: 45px 25px; backdrop-filter: blur(20px); transition: .35s; } .stat-card:hover { transform: translateY(-10px); border-color: #D4AF37; box-shadow: 0 25px 50px rgba(0,0,0,.35); } .stat-icon { width: 90px; height: 90px; margin: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#4CAF50,#D4AF37); font-size: 42px; color: #fff; margin-bottom: 25px; } .stat-card h2 { font-size: 52px; color: #D4AF37; margin-bottom: 10px; font-weight: 700; } .stat-card span { color: #fff; font-size: 18px; letter-spacing: .5px; } /*========================================== GALLERY ==========================================*/ .gallery-section { padding: 120px 0; } .gallery-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 50px 0; } .gallery-filter button { padding: 14px 30px; border: none; border-radius: 40px; background: #12351a; color: #fff; cursor: pointer; transition: .3s; font-weight: 600; } .gallery-filter button.active, .gallery-filter button:hover { background: linear-gradient(135deg,#4CAF50,#D4AF37); } .gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; } .gallery-item { position: relative; overflow: hidden; border-radius: 22px; cursor: pointer; } .gallery-item img { width: 100%; height: 320px; object-fit: cover; transition: .6s; display: block; } .gallery-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; background: linear-gradient( transparent, rgba(0,0,0,.85) ); opacity: 0; transition: .4s; } .gallery-overlay h3 { color: #fff; margin-bottom: 8px; } .gallery-overlay span { color: #D4AF37; } .gallery-item:hover img { transform: scale(1.12); } .gallery-item:hover .gallery-overlay { opacity: 1; } /*========================================== TESTIMONIALS ==========================================*/ .testimonials-section { padding: 120px 0; } .testimonial-slider { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 70px; } .testimonial-card { background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.15); border-radius: 25px; padding: 40px; text-align: center; backdrop-filter: blur(18px); transition: .35s; } .testimonial-card:hover { transform: translateY(-10px); border-color: #D4AF37; box-shadow: 0 20px 40px rgba(0,0,0,.35); } .testimonial-card img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid #D4AF37; margin-bottom: 25px; } .stars { color: #FFD700; font-size: 22px; margin-bottom: 20px; } .testimonial-card p { color: var(--text); line-height: 1.9; font-style: italic; margin-bottom: 25px; } .testimonial-card h3 { color: #fff; margin-bottom: 6px; } .testimonial-card span { color: #D4AF37; font-size: 15px; } /*========================================== FAQ ==========================================*/ .faq-section { padding: 120px 0; } .faq-wrapper { max-width: 900px; margin: 70px auto 0; } .faq-item { background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.15); border-radius: 20px; margin-bottom: 20px; overflow: hidden; transition: .35s; } .faq-item:hover { border-color: #D4AF37; } .faq-question { width: 100%; background: none; border: none; padding: 28px 35px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; } .faq-question i { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #4CAF50; color: #fff; font-style: normal; font-size: 24px; transition: .3s; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .faq-answer p { padding: 0 35px 30px; color: var(--text); line-height: 1.9; } .faq-item.active .faq-answer { max-height: 250px; } .faq-item.active .faq-question i { background: #D4AF37; transform: rotate(45deg); } /*========================================== CTA ==========================================*/ .cta-section { padding: 120px 0; } .cta-box { background: linear-gradient(135deg,#0e4020,#174a2c); border-radius: 30px; text-align: center; padding: 80px 50px; position: relative; overflow: hidden; } .cta-box::before { content: ""; position: absolute; width: 450px; height: 450px; border-radius: 50%; background: rgba(212,175,55,.08); top: -180px; right: -120px; } .cta-box h2 { font-size: 48px; color: #fff; margin-bottom: 25px; } .cta-box p { max-width: 750px; margin: auto; color: #ddd; line-height: 34px; } .cta-buttons { margin-top: 45px; display: flex; justify-content: center; gap: 20px; } .btn-outline { padding: 16px 42px; border: 2px solid #D4AF37; border-radius: 50px; color: #fff; text-decoration: none; transition: .35s; } .btn-outline:hover { background: #D4AF37; color: #111; } /*========================================== FOOTER ==========================================*/ .footer { background: #08140d; padding: 90px 0 25px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 60px; } .footer-logo { width: 170px; margin-bottom: 25px; } .footer-column h3 { color: #fff; margin-bottom: 25px; } .footer-column p { color: #aaa; line-height: 30px; } .footer-column ul { list-style: none; padding: 0; } .footer-column li { margin-bottom: 15px; color: #aaa; } .footer-column a { color: #aaa; text-decoration: none; transition: .3s; } .footer-column a:hover { color: #D4AF37; } .social-links { display: flex; gap: 12px; margin-top: 25px; } .social-links a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #16391f; color: #fff; transition: .3s; } .social-links a:hover { background: #D4AF37; color: #111; } .footer-bottom { margin-top: 70px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding-top: 25px; color: #888; }