:root{ --forest:#1a4731; --forest-dark:#0f2820; --leaf:#2d7a52; --mint:#52b788; --lime:#b7e4c7; --gold:#e8a045; --amber:#f4c271; --cream:#fef9ef; --ivory:#fff8ec; --charcoal:#1c2b22; --mist:#e8f5ee; --text:#1c2b22; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:'Plus Jakarta Sans',sans-serif; background:var(--cream); color:var(--text); overflow-x:hidden; line-height:1.75; font-size:17px; } h1,h2,h3,h4{ font-family:'Fraunces',serif; color:var(--forest); } .side-membership-btn{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:9999; background:linear-gradient(135deg,var(--gold),#d4882e); color:#fff; padding:22px 14px; border-radius:16px 0 0 16px; writing-mode:vertical-rl; text-orientation:mixed; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:0.9rem; letter-spacing:2.5px; text-transform:uppercase; text-decoration:none; box-shadow:-6px 0 25px rgba(232,160,69,0.45); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); border:1px solid rgba(255,255,255,0.2); border-right:none; } .side-membership-btn:hover{ padding-right:28px; color:#fff; box-shadow:-10px 0 35px rgba(232,160,69,0.6); background:linear-gradient(135deg,#f2ad55,#df9133); } .side-membership-btn i{ transform:rotate(90deg); display:block; margin-bottom:10px; font-size:1.1rem; } .whatsapp-floater{ position:fixed; bottom:30px; right:30px; z-index:9999; width:65px; height:65px; background:linear-gradient(135deg,#25D366,#1da851); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(37,211,102,0.4); text-decoration:none; animation:wa-pulse 2.5s infinite; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); } .whatsapp-floater:hover{ transform:scale(1.15) rotate(-5deg); } .whatsapp-floater i{ color:#fff; font-size:2rem; } .whatsapp-floater .wa-tooltip{ position:absolute; right:85px; background:#fff; color:var(--forest); padding:8px 16px; border-radius:10px; font-size:0.85rem; font-weight:700; white-space:nowrap; box-shadow:0 5px 20px rgba(0,0,0,0.15); opacity:0; transform:translateX(15px); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events:none; } .whatsapp-floater .wa-tooltip::after{ content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border-width:6px 0 6px 6px; border-style:solid; border-color:transparent transparent transparent #fff; } .whatsapp-floater:hover .wa-tooltip{ opacity:1; transform:translateX(0); } @keyframes wa-pulse{ 0%,100%{ box-shadow:0 8px 30px rgba(37,211,102,0.4); } 50%{ box-shadow:0 8px 45px rgba(37,211,102,0.7); } } .fixed-top-header{ position:fixed; top:0; width:100%; z-index:1050; transition:box-shadow 0.3s; } .ticker-wrap{ background:linear-gradient(90deg,var(--forest-dark),var(--forest),var(--forest-dark)); padding:10px 0; overflow:hidden; width:100%; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,0.08); box-shadow:0 2px 10px rgba(0,0,0,0.2); } .ticker-inner{ display:inline-flex; width:max-content; animation:ticker 40s linear infinite; } .ticker-inner:hover{ animation-play-state:paused; } .ticker-content{ color:var(--cream); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; padding:0 40px; text-shadow:1px 1px 2px rgba(0,0,0,0.3); } .ticker-highlight{ color:var(--amber); font-weight:800; } @keyframes ticker{ 0%{ transform:translate3d(0,0,0); } 100%{ transform:translate3d(-50%,0,0); } } .navbar{ background:rgba(254,249,239,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(82,183,136,0.3); padding:12px 0; position:relative; width:100%; } .navbar-brand img{ height:75px; width:auto; transition:transform 0.3s; } .navbar-brand:hover img{ transform:scale(1.05); } .nav-link{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--forest) !important; font-size:1.05rem; letter-spacing:0.3px; margin:0 12px; position:relative; transition:color 0.3s; } .nav-link::after{ content:''; position:absolute; bottom:-5px; left:50%; right:50%; height:3px; background:var(--gold); border-radius:3px; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); } .nav-link:hover::after{ left:0; right:0; } .nav-link:hover{ color:var(--leaf) !important; } .btn-register{ background:linear-gradient(135deg,var(--forest),var(--leaf)); color:var(--cream) !important; border-radius:50px; padding:12px 28px !important; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:0.95rem; letter-spacing:0.5px; transition:all 0.3s; border:2px solid transparent; box-shadow:0 4px 15px rgba(26,71,49,0.2); } .btn-register:hover{ background:transparent; color:var(--forest) !important; border-color:var(--forest); transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,71,49,0.3); } .btn-register::after{ display:none !important; } .hero-section{ background:linear-gradient(135deg,rgba(15,40,26,0.95) 0%,rgba(29,75,55,0.85) 50%,rgba(45,122,82,0.75) 100%),url('../ngoban1.webp'); background-size:cover; background-position:center; background-attachment:fixed; min-height:100vh; display:flex; align-items:center; padding-top:170px; padding-bottom:120px; position:relative; overflow:hidden; } .hero-section::before{ content:''; position:absolute; bottom:-2px; left:0; right:0; height:120px; background:var(--cream); clip-path:ellipse(55% 100% at 50% 100%); } .hero-badge{ display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); border:1px solid rgba(232,160,69,0.5); color:var(--amber); padding:10px 24px; border-radius:50px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:28px; box-shadow:0 4px 20px rgba(0,0,0,0.15); } .hero-title{ font-family:'Fraunces',serif; font-size:5.5rem; font-weight:900; color:#fff !important; line-height:1.05; text-shadow:0 10px 30px rgba(0,0,0,0.5); margin-bottom:24px; } .hero-title .accent{ color:var(--amber); text-shadow:0 0 40px rgba(232,160,69,0.4); } .hero-subtitle{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.3rem; color:rgba(255,255,255,0.95); max-width:650px; line-height:1.8; margin-bottom:40px; text-shadow:0 2px 10px rgba(0,0,0,0.3); } .hero-cta-primary{ background:linear-gradient(135deg,var(--gold),#d4882e); color:#fff !important; border:none; padding:18px 42px; border-radius:50px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 10px 35px rgba(232,160,69,0.45); display:inline-flex; align-items:center; gap:10px; } .hero-cta-primary:hover{ background:linear-gradient(135deg,#f2ad55,#df9133); transform:translateY(-4px) scale(1.02); box-shadow:0 15px 40px rgba(232,160,69,0.6); } .hero-cta-outline{ background:rgba(255,255,255,0.05); backdrop-filter:blur(5px); color:#fff !important; border:2px solid rgba(255,255,255,0.8); padding:18px 42px; border-radius:50px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.05rem; text-decoration:none; transition:all 0.3s; } .hero-cta-outline:hover{ background:rgba(255,255,255,0.15); transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.2); } .section-pad{ padding:120px 0; } .section-label{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:0.95rem; letter-spacing:3px; text-transform:uppercase; color:var(--leaf); display:flex; align-items:center; gap:12px; margin-bottom:16px; } .section-label::before{ content:''; width:40px; height:4px; background:linear-gradient(90deg,var(--gold),var(--amber)); border-radius:4px; } .section-label.justify-content-center::before{ display:none; } .section-heading{ font-size:3.5rem; font-weight:900; line-height:1.15; margin-bottom:24px; color:var(--forest); } .highlight-word{ background:linear-gradient(135deg,var(--leaf),#38a36e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; } .summit-context{ background:var(--ivory); border-bottom:1px solid rgba(0,0,0,0.03); } .stat-box{ text-align:center; padding:40px 30px; background:#fff; border-radius:24px; box-shadow:0 10px 40px rgba(0,0,0,0.05); border:1px solid rgba(82,183,136,0.15); height:100%; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; } .stat-box::after{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--mint),var(--leaf)); opacity:0; transition:opacity 0.4s; } .stat-box:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(45,106,79,0.1); } .stat-box:hover::after{ opacity:1; } .stat-num{ font-family:'Fraunces',serif; font-size:3.8rem; font-weight:900; color:var(--forest); margin-bottom:8px; line-height:1; } .stat-lbl{ font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-size:0.95rem; } .why-join-section{ background:var(--cream); position:relative; } .lead-text{ font-size:1.25rem; color:#3a5a47; line-height:1.85; margin-bottom:28px; } .reason-card{ background:#fff; border-radius:24px; padding:36px 30px; border-left:6px solid var(--mint); box-shadow:0 8px 30px rgba(0,0,0,0.04); transition:all 0.4s cubic-bezier(0.4,0,0.2,1); height:100%; border-top:1px solid rgba(0,0,0,0.02); border-right:1px solid rgba(0,0,0,0.02); border-bottom:1px solid rgba(0,0,0,0.02); } .reason-card:hover{ transform:translateY(-8px); box-shadow:0 20px 45px rgba(45,106,79,0.12); border-left-color:var(--gold); } .reason-icon{ width:64px; height:64px; background:linear-gradient(135deg,var(--mist),#d1e8da); border-radius:18px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; font-size:1.6rem; color:var(--leaf); transition:all 0.4s; } .reason-card:hover .reason-icon{ background:linear-gradient(135deg,var(--leaf),var(--forest)); color:#fff; transform:scale(1.1) rotate(-5deg); } .reason-title{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.25rem; font-weight:800; color:var(--forest); margin-bottom:12px; } .reason-text{ font-size:1.05rem; color:#4a6355; line-height:1.75; } .guidelines-section{ background-color:#ffffff; } .guide-card{ border-radius:24px; overflow:hidden; background:white; box-shadow:0 12px 35px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); height:100%; transition:all 0.4s ease; } .guide-card:hover{ transform:translateY(-10px); box-shadow:0 25px 60px rgba(45,106,79,0.15); } .guide-img-wrapper{ height:220px; overflow:hidden; position:relative; } .guide-img-wrapper::after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,0.4) 100%); } .guide-img-wrapper img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; } .guide-card:hover .guide-img-wrapper img{ transform:scale(1.08); } .guide-content{ padding:30px; } .guide-badge{ display:inline-block; background:var(--mist); color:var(--leaf); padding:6px 14px; border-radius:8px; font-size:0.8rem; font-weight:800; text-transform:uppercase; margin-bottom:16px; letter-spacing:0.5px} .guide-title{ font-weight:800; font-size:1.35rem; color:var(--forest); margin-bottom:12px; } .guide-text{ font-size:1rem; color:#555; line-height:1.7; } .benefits-section{ background:var(--cream); padding-bottom:80px; } .benefit-card{ background:#fff; border-radius:24px; padding:35px 30px; box-shadow:0 8px 30px rgba(0,0,0,0.04); transition:all 0.4s cubic-bezier(0.4,0,0.2,1); border-top:5px solid var(--mint); height:100%; border-left:1px solid rgba(0,0,0,0.03); border-right:1px solid rgba(0,0,0,0.03); border-bottom:1px solid rgba(0,0,0,0.03); } .benefit-card:hover{ transform:translateY(-10px); box-shadow:0 25px 60px rgba(45,106,79,0.12); border-top-color:var(--gold); } .benefit-icon{ width:65px; height:65px; border-radius:20px; background:linear-gradient(135deg,var(--mist),#d1e8da); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--leaf); margin-bottom:22px; transition:all 0.4s; } .benefit-card:hover .benefit-icon{ background:linear-gradient(135deg,var(--leaf),var(--forest)); color:#fff; transform:rotate(-10deg) scale(1.1); box-shadow:0 10px 20px rgba(45,106,79,0.2); } .benefit-title{ font-size:1.25rem; font-weight:800; color:var(--forest); margin-bottom:12px; } .benefit-text{ font-size:1.05rem; color:#4a6355; line-height:1.7; margin-bottom:16px} .benefit-points{ list-style:none; margin-top:15px; padding:0; } .benefit-points li{ font-size:1rem; color:#3a5040; padding:6px 0 6px 24px; position:relative; font-weight:500} .benefit-points li::before{ content:'→'; position:absolute; left:0; color:var(--gold); font-weight:800; } .about-section{ background:radial-gradient(circle at 80% 20%,#1a4731 0%,#0f2820 100%); position:relative; overflow:hidden; } .about-section::before{ content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(232,160,69,0.08) 0%,transparent 70%); top:-100px; right:-100px; pointer-events:none; } .about-section h2{ color:#fff; } .about-section .section-label{ color:var(--amber); } .about-section .section-label::before{ background:var(--amber); } .point-pill{ display:flex; align-items:flex-start; gap:16px; background:rgba(255,255,255,0.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:20px 24px; margin-bottom:16px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); } .point-pill:hover{ background:rgba(82,183,136,0.15); border-color:rgba(82,183,136,0.4); transform:translateX(8px); box-shadow:0 10px 25px rgba(0,0,0,0.2); } .point-check{ width:32px; height:32px; background:rgba(82,183,136,0.25); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--mint); font-size:0.95rem; flex-shrink:0; margin-top:2px; } .point-text{ color:rgba(255,255,255,0.9); font-size:1.1rem; line-height:1.7; } .point-text strong{ color:#fff; font-weight:800} .about-img-wrap{ position:relative; padding:15px} .about-img-wrap::before{ content:''; position:absolute; inset:0; border:2px solid rgba(232,160,69,0.3); border-radius:30px; transform:translate(-10px,10px); z-index:0; } img{ max-width:100%; height:auto; } .about-img-wrap img{ border-radius:24px; width:100%; height:auto; box-shadow:0 30px 80px rgba(0,0,0,0.5); position:relative; z-index:1} /* Impact Gallery Specific Styling */ .impact-gallery-section{ background:var(--ivory); position:relative; overflow:hidden; } .impact-card{ border-radius:24px; overflow:hidden; background:white; box-shadow:0 12px 40px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.02); transition:all 0.5s cubic-bezier(0.4,0,0.2,1); height:100%; position:relative; } .impact-card img{ width:100%; height:100%; object-fit:cover; transition:transform 0.8s cubic-bezier(0.4,0,0.2,1); } .impact-card:hover{ transform:translateY(-10px); box-shadow:0 25px 60px rgba(45,106,79,0.15); border-color:var(--leaf); } .impact-card:hover img{ transform:scale(1.1); } .impact-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(15,40,26,0.5) 100%); opacity:0; transition:opacity 0.4s; z-index:1; } .impact-card:hover::before{ opacity:1; } .pricing-section{ background:var(--mist); position:relative; overflow:hidden; padding-bottom:120px; } .pricing-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--leaf),var(--gold),var(--mint)); } .plan-card{ background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.06); transition:all 0.4s cubic-bezier(0.4,0,0.2,1); height:100%; display:flex; flex-direction:column; border:2px solid rgba(0,0,0,0.02); position:relative; } .plan-card:hover{ transform:translateY(-12px); box-shadow:0 30px 70px rgba(45,106,79,0.15); border-color:rgba(82,183,136,0.3)} .plan-card.featured{ border-color:var(--gold); transform:scale(1.05); box-shadow:0 25px 70px rgba(232,160,69,0.25); z-index:2} .plan-card.featured:hover{ transform:scale(1.05) translateY(-12px); border-color:var(--amber)} .plan-card.special{ border-color:#2c6e49; box-shadow:0 15px 50px rgba(45,106,79,0.15); background:#fdfdfd} .plan-header{ padding:40px 24px 30px; text-align:center; position:relative; } .plan-header.basic{ background:linear-gradient(135deg,#f0faf5,#e0f3ea); } .plan-header.gold{ background:linear-gradient(135deg,#fafaf0,#f5efe0); } .plan-header.premium{ background:linear-gradient(135deg,#fff8ea,#fdefd0); } .plan-header.csr{ background:linear-gradient(135deg,#e6f2ec,#cce5d9); } .plan-badge{ display:inline-block; background:var(--gold); color:#fff; font-size:0.75rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:6px 18px; border-radius:50px; margin-bottom:18px; box-shadow:0 4px 10px rgba(232,160,69,0.3)} .plan-name{ font-size:1.15rem; font-weight:900; text-transform:uppercase; letter-spacing:2.5px; color:var(--leaf); margin-bottom:10px; } .plan-price{ font-family:'Fraunces',serif; font-size:3.2rem; font-weight:900; color:var(--forest); line-height:1; } .plan-price .currency{ font-size:1.4rem; vertical-align:top; margin-top:8px; display:inline-block; } .plan-duration{ font-size:1rem; color:#6a8a76; margin-top:8px; font-weight:700; } .plan-features{ padding:30px 24px; flex-grow:1; } .plan-feature{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px dashed rgba(0,0,0,0.08); font-size:1rem; color:#3a5040; font-weight:500} .plan-feature:last-child{ border-bottom:none; } .plan-feature i{ color:var(--leaf); margin-top:4px; flex-shrink:0; font-size:1.1rem} .plan-footer{ padding:20px 24px 35px; } .btn-plan{ display:block; text-align:center; padding:14px; border-radius:50px; font-weight:800; font-size:1.05rem; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); cursor:pointer} .btn-plan-outline{ border:2px solid var(--forest); color:var(--forest); background:transparent; } .btn-plan-outline:hover{ background:var(--forest); color:#fff; transform:translateY(-3px); box-shadow:0 8px 20px rgba(26,71,49,0.2)} .btn-plan-solid{ background:linear-gradient(135deg,var(--gold),#d4882e); color:#fff !important; border:none; box-shadow:0 8px 25px rgba(232,160,69,0.4); } .btn-plan-solid:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 12px 35px rgba(232,160,69,0.6); } .savings-tag{ background:#e8f5ee; color:var(--leaf); font-size:0.8rem; font-weight:800; padding:4px 14px; border-radius:50px; display:inline-block; margin-top:6px; border:1px solid rgba(82,183,136,0.2)} .kit-section{ background:#08140e; padding:120px 0; position:relative; overflow:hidden; z-index:1; } .kit-section::before{ content:''; position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(232,160,69,0.12) 0%,transparent 65%); z-index:-1; pointer-events:none; } .kit-showcase{ position:relative; text-align:center; margin:60px 0 80px; z-index:2; perspective:1000px; } .kit-showcase img{ max-width:90%; height:auto; border-radius:12px; animation:kitFloat 6s ease-in-out infinite; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.7)); position:relative; z-index:2; transform-style:preserve-3d; } .kit-showcase::after{ content:''; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:70%; height:30px; background:radial-gradient(ellipse,rgba(0,0,0,0.8) 0%,transparent 70%); border-radius:50%; z-index:1; animation:shadowPulse 6s ease-in-out infinite; } @keyframes kitFloat{ 0%,100%{ transform:translateY(0) rotateX(2deg); } 50%{ transform:translateY(-25px) rotateX(0deg); } } @keyframes shadowPulse{ 0%,100%{ width:70%; opacity:0.8; transform:translateX(-50%) scale(1); } 50%{ width:60%; opacity:0.4; transform:translateX(-50%) scale(0.9); } } .kit-feature-card{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:24px; padding:35px 30px; text-align:left; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); height:100%; position:relative; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.2); } .kit-feature-card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,rgba(232,160,69,0.1) 0%,transparent 100%); opacity:0; transition:opacity 0.4s; z-index:0; } .kit-feature-card::after{ content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--gold),var(--amber)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s; } .kit-feature-card:hover{ transform:translateY(-10px); background:rgba(255,255,255,0.05); border-color:rgba(232,160,69,0.3); box-shadow:0 20px 50px rgba(0,0,0,0.4); } .kit-feature-card:hover::before{ opacity:1; } .kit-feature-card:hover::after{ transform:scaleX(1); } .kit-feature-content{ position:relative; z-index:1; } .kit-feature-icon{ width:65px; height:65px; border-radius:18px; background:rgba(255,255,255,0.05); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:24px; border:1px solid rgba(255,255,255,0.1); transition:all 0.4s; } .kit-feature-card:hover .kit-feature-icon{ background:linear-gradient(135deg,var(--gold),#d4882e); color:#fff; border-color:transparent; transform:scale(1.1) rotate(5deg); box-shadow:0 10px 25px rgba(232,160,69,0.4); } .kit-feature-title{ color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.3rem; font-weight:800; margin-bottom:12px; letter-spacing:0.5px; } .kit-feature-desc{ color:rgba(255,255,255,0.65); font-size:1rem; line-height:1.65; margin:0; font-weight:400; } .faq-section{ background:var(--cream); } .faq-wrap{ width:100%; margin:0 auto; } .faq-item{ border:1px solid rgba(45,106,79,0.15); border-radius:20px; margin-bottom:16px; overflow:hidden; transition:all 0.3s; background:#fff; box-shadow:0 4px 15px rgba(0,0,0,0.02)} .faq-item:hover{ border-color:var(--mint); box-shadow:0 8px 25px rgba(45,106,79,0.08)} .faq-q{ padding:26px 30px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:800; font-size:1.15rem; color:var(--forest); transition:all 0.3s; } .faq-q:hover{ background:var(--mist); } .faq-q i{ color:var(--leaf); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; margin-left:16px; background:rgba(82,183,136,0.15); width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%} .faq-a{ padding:0 30px; max-height:0; overflow:hidden; transition:all 0.4s ease; font-size:1.05rem; color:#4a6355; line-height:1.8; } .faq-a.open{ max-height:400px; padding:0 30px 26px; } .faq-item.open .faq-q i{ transform:rotate(180deg); background:var(--leaf); color:#fff} .faq-item.open .faq-q{ background:var(--mist); } .form-section{ background:var(--ivory); position:relative; padding-top:60px; padding-bottom:120px} .form-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:250px; background:#08140e; z-index:0; clip-path:polygon(0 0,100% 0,100% 70%,0% 100%); } .form-container{ position:relative; z-index:10; max-width:1050px; margin:0 auto; background:#fff; padding:50px 60px; border-radius:30px; box-shadow:0 30px 80px rgba(0,0,0,0.12); border-top:8px solid var(--gold); } .form-header-box{ text-align:center; margin-bottom:50px; padding-bottom:30px; border-bottom:1px solid rgba(0,0,0,0.06)} .form-header-box h2{ font-size:2.8rem; color:var(--forest); margin-bottom:12px; } .form-section-title{ display:flex; align-items:center; background:linear-gradient(90deg,var(--mist),transparent); padding:12px 20px; border-radius:12px; border-left:4px solid var(--leaf); margin-top:45px; margin-bottom:30px; } .form-section-title h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.35rem; font-weight:800; color:var(--forest); margin:0; } .form-section-icon{ background:#fff; color:var(--leaf); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; margin-right:18px; font-size:1.2rem; box-shadow:0 4px 10px rgba(0,0,0,0.05)} .form-label{ font-weight:800; color:var(--charcoal); font-size:1rem; margin-bottom:10px; } .form-control,.form-select{ border-radius:12px; border:1px solid #c8dcd0; padding:14px 18px; font-size:1rem; transition:all 0.3s; background:#fdfdfd; font-weight:500; color:#333} .form-control:focus,.form-select:focus{ border-color:var(--mint); box-shadow:0 0 0 5px rgba(82,183,136,0.15); background:#fff; outline:none} .form-control::placeholder{ color:#a0b2a8; font-weight:400} .form-check-input{ width:1.3em; height:1.3em; border-color:#b7e4c7; cursor:pointer; transition:all 0.2s} .form-check-input:checked{ background-color:var(--leaf); border-color:var(--leaf); transform:scale(1.1)} .form-check-label{ font-size:1rem; color:#4a6355; cursor:pointer; margin-left:10px; font-weight:500} .declaration-box{ background-color:var(--mist); border-left:5px solid var(--leaf); padding:25px; border-radius:0 16px 16px 0; font-style:italic; font-size:1.05rem; margin-bottom:35px; color:var(--forest); font-weight:600; line-height:1.7} .signature-input{ font-family:'Brush Script MT',cursive,sans-serif; border:none; border-bottom:2px solid var(--charcoal); border-radius:0; background:transparent; font-size:1.8rem; padding-left:0; color:var(--forest)} .signature-input:focus{ box-shadow:none; border-color:var(--leaf); background:transparent; } .fee-banner{ background:linear-gradient(135deg,var(--forest),var(--leaf)); color:#fff; padding:35px; border-radius:20px; margin:50px 0 35px; text-align:center; box-shadow:0 15px 40px rgba(26,71,49,0.25); border:1px solid rgba(255,255,255,0.1)} .fee-banner .form-check-label{ color:#fff !important; font-size:1.15rem; font-weight:800; cursor:pointer; padding:8px 16px; border-radius:12px; transition:all 0.3s} .fee-banner .form-check-input{ border-color:rgba(255,255,255,0.4); background-color:rgba(0,0,0,0.2); width:1.4em; height:1.4em} .fee-banner .form-check-input:checked{ background-color:var(--gold); border-color:var(--gold); box-shadow:0 0 15px rgba(232,160,69,0.5)} .fee-banner .form-check-input:checked + .form-check-label{ background:rgba(255,255,255,0.15)} .stall-booking-container{ display:none; background:linear-gradient(135deg,#fffcf5,#fff5de); border:2px dashed var(--gold); padding:30px; border-radius:20px; margin-bottom:40px; text-align:center; animation:fadeIn 0.5s ease; box-shadow:0 10px 30px rgba(232,160,69,0.1)} @keyframes fadeIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } } .btn-submit{ background:linear-gradient(135deg,var(--gold),#d4882e); border:none; font-weight:900; font-size:1.2rem; padding:20px 50px; border-radius:50px; color:#fff; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 12px 30px rgba(232,160,69,0.4); text-transform:uppercase; letter-spacing:2px} .btn-submit:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 20px 45px rgba(232,160,69,0.6); color:#fff} footer{ background:var(--forest-dark); color:#8ab89a; } footer h5{ color:#fff; font-size:1.15rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:26px; } footer a{ color:#8ab89a; text-decoration:none; transition:0.3s; font-size:1rem; font-weight:500} footer a:hover{ color:var(--amber); padding-left:5px} .footer-link{ display:block; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.05)} .footer-link:last-child{ border-bottom:none} .social-btn{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; color:#8ab89a; transition:all 0.3s; font-size:1.1rem; } .social-btn:hover{ background:var(--leaf); color:#fff; border-color:var(--leaf); transform:translateY(-3px)} .fade-up{ opacity:0; transform:translateY(50px); transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1); } .fade-up.visible{ opacity:1; transform:translateY(0); } .fade-up-d1{ transition-delay:0.1s; } .fade-up-d2{ transition-delay:0.2s; } .fade-up-d3{ transition-delay:0.3s; } .fade-up-d4{ transition-delay:0.4s; } @media (max-width:991px){ .section-pad{ padding:80px 0; } .hero-title{ font-size:3.8rem; } .section-heading{ font-size:2.8rem; } .plan-card.featured{ transform:scale(1); margin:20px 0; } .form-container{ padding:40px 30px; } .navbar-collapse{ background:rgba(254,249,239,0.98); padding:15px; border-radius:12px; margin-top:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); } } @media (max-width:767px){ .section-pad{ padding:60px 0; } .hero-section{ padding-top:140px; padding-bottom:80px; min-height:auto; } .hero-title{ font-size:2.5rem; } .hero-subtitle{ font-size:1.05rem; margin-bottom:25px; } .section-heading{ font-size:2rem; margin-bottom:15px; } .stat-box{ padding:25px 15px; } .stat-num{ font-size:2.8rem; } .reason-card,.benefit-card,.kit-feature-card{ padding:25px 20px; } .plan-card{ max-width:400px; margin:0 auto; } .form-section{ padding-top:40px; padding-bottom:80px; } .form-section::before{ height:150px; } .form-container{ padding:30px 20px; border-radius:20px; margin:0 10px} .form-header-box h2{ font-size:1.8rem} .side-membership-btn{ padding:15px 10px; font-size:0.75rem; letter-spacing:1.5px; } .kit-section{ padding:80px 0 40px 0; } .kit-showcase img{ max-width:100%; } .navbar-brand img{ height:55px; } .whatsapp-floater{ width:55px; height:55px; bottom:20px; right:20px; } .whatsapp-floater i{ font-size:1.6rem; } .fee-banner{ padding:20px; } .fee-banner .form-check-label{ padding:6px 12px; font-size:1rem; } .point-pill{ flex-direction:column; align-items:center; text-align:center; } }