/* ============================================================ SARAL ORBIT v2 — DESIGN SYSTEM Logo ke blue/orange se inspired, premium SaaS look ============================================================ */ :root{ --navy:#0F1B3C; --navy-2:#182B5E; --blue:#2D6CDF; --blue-light:#EAF1FE; --orange:#F2782F; --orange-2:#D9631F; --gold:#F2A33D; --ink:#1D2333; --ink-soft:#5B6072; --line:#E7EAF2; --paper:#FFFFFF; --paper-2:#F6F8FC; --green:#1E9E62; --red:#DB3B3B; --radius:14px; --shadow-sm:0 2px 8px rgba(15,27,60,0.06); --shadow-md:0 10px 30px rgba(15,27,60,0.10); --shadow-lg:0 24px 60px rgba(15,27,60,0.16); color-scheme:light; transition:background-color .4s ease, color .4s ease; } /* ============ RAAT WALA THEME — dhundhla, aankhon ko aaram dene wala ============ Yeh class raat ke samay (ya jab user khud chune) par lagti hai — theme.js dekhiye. ZAROORI: Pehle background bahut zyada "saturated" (tez) neela tha (#0D1730), jo badi desktop screen par der tak dekhne mein aankhon ko thaka deta tha. Ab ek "desaturated charcoal-navy" (halka dhundhla) background istemal karte hain — jaisa GitHub/VS Code jaise pramanik dark-themes karte hain. Brand ke rang (orange/gold/blue) buttons aur highlights mein pehle jaise hi tez rahenge — sirf background/surface halka kiya hai. */ html.dark-mode{ --paper:#0F1115; --paper-2:#16181D; --ink:#D8DBE2; --ink-soft:#8B93A3; --line:#262930; --blue-light:#1B2434; color-scheme:dark; } html.dark-mode .site-header{background:rgba(21,24,31,0.92);} html.dark-mode .header-logo-text{color:#EAEDF7;} /* ZAROORI FIX (18 Sept, GENUINE) — Customer ne kaha: night mode mein poora background "sirf kaala" lagta tha, dekhne mein sookha (flat) sa. Ab ek BAHUT HALKA, gehra-neela ujala upar se aata hai (jaise door kahin se roshni pad rahi ho) — yeh aankhon ko chubhta bilkul nahi, par page ko "jeewant" aur gehra bana deta hai, aur uspar rakhe box bhi ubhar kar dikhte hain. "fixed" isliye — taaki scroll karne par yeh ujala apni jagah rahe aur baar-baar hilta hua na lage. */ html.dark-mode body{ background: radial-gradient(1100px 620px at 50% -180px, rgba(56,84,140,0.20) 0%, rgba(56,84,140,0) 72%), var(--paper-2); background-attachment:fixed; } /* ============================================================ ZAROORI FIX (18 Sept, GENUINE) — Customer ne pakdi: NIGHT MODE (dark mode) mein, logo ka "Saral" wala NEELA hissa, kaale background mein DAB kar, lagbhag chhup jaata tha. Jaanch se saabit: logo ke dikhne wale hisse ka POORA 31% itna gehra (dark) hai ki woh kaale par lagbhag gayab ho jaata hai. HAL: Dark mode mein, logo ke PEECHE ek MULAYAM SAFED ROSHNI (glow) daal dete hain — jaise uspar light padi ho. Isse har gehra hissa bhi ubhar kar, saaf chamakta hua dikhta hai. Teen alag-alag "drop-shadow" ek saath (chhoti-tez, madhyam, aur badi-halki) — isse roshni ASLI, mulayam lagti hai, na ki ek sakht/nakli outline. Saath hi halki brightness/contrast bhi badha di — taaki rang aur bhi saaf, chamakdaar dikhein. ============================================================ */ html.dark-mode .header-logo img, html.dark-mode .auth-logo img{ filter: drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 0 5px rgba(255,255,255,0.55)) drop-shadow(0 0 14px rgba(150,190,255,0.40)) brightness(1.14) contrast(1.06); } html.dark-mode .nav-link{color:#EAEDF7;} html.dark-mode .nav-link:hover{background:var(--blue-light);color:var(--gold);} html.dark-mode .mega-menu{background:var(--paper-2);} html.dark-mode .mega-link{color:var(--ink-soft);} html.dark-mode .mega-link:hover{color:var(--gold);} html.dark-mode .cat-card,html.dark-mode .tool-card,html.dark-mode .price-card, html.dark-mode .dash-card,html.dark-mode .dash-panel,html.dark-mode .tool-panel, html.dark-mode .auth-card,html.dark-mode .dash-sidebar,html.dark-mode .file-row{ background:var(--paper-2);border-color:var(--line); } html.dark-mode .btn-primary{background:var(--gold);color:var(--navy);} html.dark-mode .btn-primary:hover{background:#E0922E;} html.dark-mode .btn-outline{background:transparent;color:#EAEDF7;border-color:var(--line);} html.dark-mode .section-eyebrow{color:var(--gold);} html.dark-mode .price-card.featured{border-color:var(--gold);} html.dark-mode .price-card.featured::before{background:var(--gold);color:var(--navy);} /* Navy rang wale headings/labels — dark mode mein seedhe background jaisa ho jaate the, isliye inhe halka rakhiye taaki hamesha padhne layak rahen */ html.dark-mode .section-head h2, html.dark-mode .cat-card h3, html.dark-mode .tools-header h3, html.dark-mode .phonepe-tool-section h4, html.dark-mode .tool-card h4, html.dark-mode .smart-tool-card .tool-info strong, html.dark-mode .feature-item h4, html.dark-mode .step-item h4, html.dark-mode .price-card .amount, html.dark-mode .hero-logo-text, html.dark-mode .dash-topbar h1, html.dark-mode .dash-card .value, html.dark-mode .dash-panel h3, html.dark-mode .tool-head h1, html.dark-mode .auth-card h1, html.dark-mode .panel-title, html.dark-mode .result-box h3{ color:var(--ink); } /* .smart-tools ka dark-mode background ab neeche, uski asli definition ke turant baad hai (line ~272) — taaki dono ek saath, sahi jagah rahein */ html.dark-mode .category{background:var(--paper-2); color:var(--ink-soft); border-color:var(--line);} html.dark-mode .view-all-btn{background:var(--paper-2); color:var(--ink);} html.dark-mode .smart-tool-card{background:var(--paper-2);} html.dark-mode .category{background:var(--blue-light);} html.dark-mode .category.active{background:var(--navy-2);color:var(--gold);border-color:var(--gold);} /* Theme toggle button (sabhi pages par header ke paas) */ .theme-toggle{ width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2); display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;flex-shrink:0; transition:transform .25s ease, background .2s; } .theme-toggle:hover{transform:rotate(20deg);} *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--paper-2); color:var(--ink); -webkit-font-smoothing:antialiased; /* ZAROORI FIX (9 Sept, BAHUT ZAROORI) — Customer ne asli phone/ monitor par dikhaya: jab page ka content CHHOTA ho (jaise Age Calculator, calculate karne se PEHLE), footer "beecho-beech" mein atak jaata tha — poori screen ki neeche wali khaali jagah footer ke NEECHE reh jaati thi, jisse lagta footer "galat jagah" hai. Yeh ek jaana-pehchana "sticky footer" layout-pattern hai — ab body poori (kam se kam) screen ki height leta hai, aur footer ko neeche (margin-top:auto se) "chipka" dete hain — chahe content chhota ho ya bada, footer HAMESHA screen ke bilkul neeche hi dikhega, kabhi "beech mein atka" nahi lagega. */ min-height:100vh; display:flex; flex-direction:column; } a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} button{font-family:inherit;} .container{max-width:1240px;margin:0 auto;padding:0 24px;} /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:10px;font-weight:700;font-size:14.5px; cursor:pointer;border:none;transition:all .15s; } .btn-primary{background:var(--orange);color:#fff;} .btn-primary:hover{background:var(--orange-2);transform:translateY(-1px);} .btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line);} .btn-outline:hover{border-color:var(--blue);color:var(--blue);} .btn-ghost{background:transparent;color:var(--ink);} .btn-ghost:hover{background:var(--paper-2);} /* Header ke andar ke buttons (Login/Sign Up) — thode bade, taaki header ki badhi hui height ke saath sahi se match karein */ .header-actions .btn{padding:10px 16px;font-size:14px;font-weight:800;white-space:nowrap;} /* ============ HEADER ============ */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .2s; /* ZAROORI: yahan "overflow-x:hidden" NAHI lagana chahiye — CSS ka niyam hai ki agar overflow-x ko koi value di jaaye, to overflow-y apne aap "auto" ban jaata hai (chahe likha na ho), jo neeche khulne wale mega-menu dropdown ko kaat deta/chhupa deta hai. Horizontal overflow ka surakshit hal header-inner ke apne overflow-x:auto se ho raha hai (neeche dekhiye) — yahan dobara lagane ki zaroorat nahi. */ } .site-header.scrolled{box-shadow:var(--shadow-sm);} .header-inner{ width:100%;margin:0;padding:6px 20px; display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; } .header-inner::-webkit-scrollbar{display:none;} .header-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;} /* ZAROORI FIX (12 Sept, GENUINE) — Customer ne kaha: logo aur bada dikhe, aur header-bar ki POORI OONCHAI (upar se neeche tak) bhar de. Pehle sirf 36px height thi, aur header ka padding zyada (14px upar-neeche) — isliye logo chhota, beech mein simat kar dikhta tha. Ab padding ghata di (6px) aur logo-height badha di (52px) — logo ab poori header-height ke KAREEB-KAREEB bhar deta hai, aur genuinely BADA, ZYADA DHYAAN-KHINCHNE WALA dikhta hai. */ .header-logo img{height:52px;width:auto;} .header-logo-text{font-weight:800;font-size:18px;color:var(--navy);letter-spacing:-0.2px;white-space:nowrap;} .header-logo-text em{font-style:normal;color:var(--orange);} .header-nav{display:flex;align-items:center;gap:2px;flex:1;} .nav-link{ position:relative;padding:9px 9px;border-radius:8px;font-weight:700;font-size:14px; color:var(--navy);cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap; transition:background .15s,color .15s; } .nav-link:hover{background:var(--paper-2);color:var(--blue);} .nav-link .caret{font-size:11px;opacity:0.6;transition:transform .15s;} .nav-link.open .caret{transform:rotate(180deg);} /* "All Tools" — box wala button, sabse pehle */ .nav-all-tools{ border:1.5px solid var(--line);border-radius:9px;font-weight:800; color:var(--ink);background:var(--paper-2); } .nav-all-tools:hover{border-color:var(--blue);background:var(--blue-light);color:var(--blue);} /* "Pricing" — gol pill jaisa */ .nav-pricing-pill{ border-radius:20px;background:var(--paper-2);padding:10px 18px; } .nav-pricing-pill:hover{background:var(--blue-light);color:var(--blue);} /* "Premium" — khaas highlight, underline ke saath */ .nav-premium-link{ display:flex;align-items:center;gap:5px;padding:9px 6px;font-weight:800;font-size:15px; color:var(--gold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap; } .nav-premium-link:hover{color:var(--orange);} .header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} /* Mobile menu toggle (hidden on desktop) */ .header-burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);} /* ============ MEGA MENU ============ */ .mega-menu{ position:absolute;left:0;right:0;top:100%; background:#fff;border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .18s,transform .18s,visibility .18s; z-index:99; } .mega-menu.open{opacity:1;visibility:visible;transform:translateY(0);} /* ZAROORI FIX (12 Sept, GENUINE BUG) — Customer ne dikhaya: "Login" aur "👤 Naam" jaise CHHOTE dropdown, jo header ke DAAYEEN (right) taraf hain, khulte waqt BAAYEEN (left) taraf chale jaate the. Asli wajah: ".mega-menu" HAMESHA "left:0;right:0" (poori chaudai) leta hai, aur andar ka content CENTER ho jaata hai — yeh BADE mega-menu (PDF Tools, waghera) ke liye theek hai, par CHHOTE, DAAYEEN-taraf ke dropdown ke liye GALAT tha. Ab in DONO (Login, Account) ke liye ALAG se — apne TRIGGER-BUTTON ke SEEDHA NEECHE, DAAYEEN taraf hi khulte hain, poori chaudai kabhi nahi lete. */ .mega-menu-right{ left:auto;right:20px;width:auto;min-width:200px; border-radius:12px;border:1px solid var(--line); box-shadow:var(--shadow-lg);margin-top:6px; } .mega-menu-right .mega-menu-inner{ max-width:none;margin:0;padding:10px;display:block; } .mega-menu-inner{ max-width:1240px;margin:0 auto;padding:32px 24px; display:grid;grid-template-columns:repeat(5,1fr);gap:28px 20px; } .mega-col-title{ font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase; color:var(--orange);margin-bottom:12px; } .mega-col-title.cyber{color:var(--blue);} .mega-link{ display:block;padding:7px 0;font-size:13.5px;color:var(--ink-soft);font-weight:500; transition:color .12s; } .mega-link:hover{color:var(--blue);} .mega-link .icon{margin-right:7px;} .mega-badge{ font-size:9px;font-weight:800;background:var(--blue-light);color:var(--blue); padding:2px 7px;border-radius:8px;margin-left:6px;letter-spacing:0.03em; } /* Cyber Kit gets a subtle highlighted card treatment inside the mega menu */ .mega-col.cyber-col{ background:linear-gradient(180deg, var(--blue-light), transparent); border-radius:12px;padding:16px;margin:-16px; } /* ============ HERO ============ */ .hero{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #1F3A7A 100%); color:#fff;padding:76px 24px 90px;position:relative;overflow:hidden; } .hero::after{ content:'';position:absolute;right:-120px;top:-120px;width:480px;height:480px; background:radial-gradient(circle, rgba(242,120,47,0.35), transparent 70%); border-radius:50%; } .hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:1;text-align:center;} .hero-eyebrow{ display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:0.05em; background:rgba(255,255,255,0.12);padding:7px 16px;border-radius:20px;margin-bottom:22px; } .hero h1{ font-size:clamp(32px,5vw,54px);font-weight:800;line-height:1.15;margin:0 0 18px; letter-spacing:-0.5px; } .hero h1 em{font-style:normal;color:var(--gold);} .hero p{font-size:18px;color:#C9D2EC;max-width:620px;margin:0 auto 34px;line-height:1.6;} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .hero-cta .btn{padding:15px 28px;font-size:15px;} /* ZAROORI (3 Sept): Jab Hero sabse UPAR (tools se bhi pehle) aata hai — customer ne khud kaha "bahut zyada space na le, tools bhi dikhne chahiye". Isliye yeh ".hero-lower" se bhi zyada COMPACT hai — chhota padding, chhota heading, koi bada CTA button nahi (tools khud niche turant dikh jaate hain, isliye alag "Shuru Kariye" button ki zaroorat nahi). */ .hero.hero-top{ padding:26px 24px;border-radius:0;margin:0; } .hero.hero-top .hero-eyebrow{margin-bottom:10px;font-size:11px;padding:5px 13px;} .hero.hero-top h1{font-size:clamp(20px,4vw,28px);margin-bottom:6px;line-height:1.2;} .hero.hero-top p{font-size:13px;margin-bottom:0;max-width:520px;} .hero.hero-top::after{width:280px;height:280px;right:-80px;top:-100px;} /* Jab Hero neeche, "Why Choose" se pehle aata hai — chhota, rounded, ek "brand statement" jaisa, poori screen jitni jagah nahi leta */ .hero.hero-lower{ padding:56px 24px;border-radius:24px;max-width:1240px;margin:0 auto; } .hero.hero-lower .hero-eyebrow{margin-bottom:16px;} .hero.hero-lower h1{font-size:clamp(26px,4vw,38px);margin-bottom:12px;} .hero.hero-lower p{font-size:15.5px;margin-bottom:0;} /* ============ POPULAR TOOLS STRIP ============ */ /* ============ SMART TOOLS — filterable grid ============ */ .smart-tools{ width:min(96vw, 1650px); margin:35px auto 0; padding:26px 28px 30px; position:relative; z-index:2; margin-top:-46px; background: radial-gradient(ellipse 900px 400px at 15% -20%, rgba(45,108,223,0.06), transparent), radial-gradient(ellipse 700px 350px at 100% 0%, rgba(242,120,47,0.05), transparent), rgba(255,255,255,0.94); border:1px solid rgba(120,130,160,0.14); border-radius:26px; box-shadow:0 20px 55px rgba(30,35,70,0.12), 0 2px 8px rgba(30,35,70,0.05); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } html.dark-mode .smart-tools{ background: radial-gradient(ellipse 900px 400px at 15% -20%, rgba(45,108,223,0.08), transparent), radial-gradient(ellipse 700px 350px at 100% 0%, rgba(242,120,47,0.06), transparent), rgba(28,31,40,0.94); } /* Jab yeh sabse upar (header ke turant baad) ho, to "upar khinchne" wala negative-margin nahi chahiye — nahi to header se takra jaayega */ .smart-tools.smart-tools-top{ margin-top:24px; } .tools-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;} .tools-badge{ display:inline-flex;align-items:center;padding:5px 11px;border-radius:30px; background:#FFF1E9;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:0.5px; } .tools-header h3{margin:7px 0 0;color:var(--navy);font-size:20px;font-weight:750;} .view-all-btn{ border:0;background:var(--paper-2);color:var(--navy);padding:11px 17px;border-radius:12px; font-weight:700;cursor:pointer;transition:.2s ease;text-decoration:none;display:inline-block; } .view-all-btn:hover{background:var(--orange);color:#fff;} .tool-categories{ display:flex;gap:8px;margin-bottom:17px;overflow-x:auto;scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, #000 92%, transparent 100%); mask-image:linear-gradient(to right, #000 92%, transparent 100%); } .tool-categories::-webkit-scrollbar{display:none;} .category{ flex:0 0 auto;font-family:inherit;border:1px solid var(--line);background:#fff;color:#555B70; padding:9px 15px;border-radius:30px;font-size:13px;font-weight:650;cursor:pointer;transition:.2s ease; } .category:hover, .category.active{background:var(--navy);color:#fff;border-color:var(--navy);} /* ============================================================ PHONEPE-JAISA MULTI-SECTION TOOL LAYOUT — har category (PDF, Image, AI, Convert) apna khud ka heading + icon-grid dikhata hai, seedha clickable, koi filter-pill dabane ki zaroorat nahi. ============================================================ */ .phonepe-tool-section{margin-top:28px;} .phonepe-tool-section:first-of-type{margin-top:20px;} .phonepe-tool-section h4{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 4px;} .phonepe-section-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px;} .phonepe-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;} .phonepe-icon-item{ display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;text-align:center; } .phonepe-icon{ width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center; font-size:24px;transition:transform .15s ease, box-shadow .15s ease; position:relative; /* ZAROORI: "3D, ubhra hua" (raised, glossy app-icon jaisa) look — upar-baayen halki chamak (jaise roshni pad rahi ho), niche-dayen halka gehra saaya (jaise depth ho), aur bahar ek naram shadow (jaise icon screen se thoda upar utha hua ho) — flat/dhansi hui dikhne wali purani styling ki jagah. */ box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.7), inset 0 -3px 6px rgba(0,0,0,0.08), 0 6px 14px -4px rgba(20,25,50,0.18); } .phonepe-icon::after{ content:'';position:absolute;inset:0;border-radius:18px; background:linear-gradient(155deg, rgba(255,255,255,0.55) 0%, transparent 45%); pointer-events:none; } .phonepe-icon-item:hover .phonepe-icon{ transform:translateY(-4px) scale(1.06); box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.7), inset 0 -3px 6px rgba(0,0,0,0.08), 0 12px 22px -6px rgba(20,25,50,0.26); } .phonepe-icon-label{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3;} @media(min-width:640px){ .phonepe-icon-grid{grid-template-columns:repeat(6,minmax(0,1fr));} } @media(min-width:1000px){ .phonepe-icon-grid{grid-template-columns:repeat(8,minmax(0,1fr));} } .smart-tool-card{ min-width:0;display:flex;align-items:center;gap:12px;padding:13px 14px; text-decoration:none;border:1px solid var(--line);border-radius:16px;background:#fff; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .smart-tool-card:hover{ transform:translateY(-3px); border-color:rgba(237,107,50,0.35); box-shadow:0 10px 25px rgba(30,35,70,0.09); } .smart-tool-card .tool-icon{ width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center; border-radius:12px;background:var(--paper-2);font-size:20px; } .smart-tool-card .tool-info{min-width:0;display:flex;flex-direction:column;gap:3px;} .smart-tool-card .tool-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy);font-size:13px;} .smart-tool-card .tool-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:11px;} .smart-tool-card .tool-arrow{margin-left:auto;color:#A0A4B2;font-size:16px;transition:.2s ease;} .smart-tool-card:hover .tool-arrow{color:var(--orange);transform:translateX(3px);} /* ============ LARGE DESKTOP ============ */ @media(min-width:1500px){ .smart-tools{width:min(96vw, 1850px);} .tools-grid{grid-template-columns:repeat(5,minmax(0,1fr));} } /* ============ LAPTOP ============ */ @media(max-width:1100px){ .tools-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } /* ============ TABLET ============ */ @media(max-width:800px){ .smart-tools{width:94vw;padding:18px;border-radius:20px;} .tools-header h3{font-size:17px;} .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ============ SECTION HEADINGS ============ */ .section{padding:70px 24px;} .section-head{text-align:center;max-width:640px;margin:0 auto 44px;} .section-eyebrow{ font-size:12px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase; color:var(--orange);margin-bottom:10px; } .section-head h2{font-size:clamp(24px,3.5vw,36px);font-weight:800;color:var(--navy);margin:0 0 12px;letter-spacing:-0.4px;} .section-head p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;} /* ============ TOOL CATEGORY GRID ============ */ .cat-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .cat-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px; transition:box-shadow .2s,transform .2s,border-color .2s; } .cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--blue);} .cat-card .icon{ width:48px;height:48px;border-radius:12px;background:var(--blue-light); display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px; position:relative; box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.6), inset 0 -3px 6px rgba(0,0,0,0.07), 0 6px 14px -4px rgba(20,25,50,0.16); } .cat-card .icon::after{ content:'';position:absolute;inset:0;border-radius:12px; background:linear-gradient(155deg, rgba(255,255,255,0.5) 0%, transparent 45%); pointer-events:none; } .cat-card.cyber .icon{background:linear-gradient(135deg, var(--orange), var(--gold));} /* ZAROORI (3 Sept): Smart Cyber Kit card par hover karne par ek chhota, graphic "hint" nazar aata hai — jaise koi cheez customer ke paas khud khisak kar aa rahi ho, batati hui ki andar kya hai. */ .cat-card.cyber{position:relative;overflow:hidden;} .cat-card.cyber:hover{border-color:var(--orange);} .cat-card-hover-hint{ position:absolute;bottom:14px;right:-100%; background:linear-gradient(135deg, var(--orange), var(--gold));color:#fff; font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:20px; box-shadow:0 6px 14px -4px rgba(242,120,47,0.5); transition:right .3s ease;white-space:nowrap; } .cat-card.cyber:hover .cat-card-hover-hint{right:18px;} .cat-card h3{font-size:16.5px;font-weight:700;color:var(--navy);margin:0 0 6px;} .cat-card p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5;} /* ============ TOOL CARD (individual tool, used in tool listing / homepage) ============ */ .tool-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .tool-card{ background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px; display:flex;align-items:center;gap:13px;cursor:pointer; transition:box-shadow .15s,transform .15s,border-color .15s; } .tool-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--blue);} .tool-card .icon{ font-size:20px;flex-shrink:0;width:42px;height:42px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:var(--blue-light);color:var(--blue); position:relative; /* ZAROORI: Yahan bhi wahi "3D, ubhra hua" app-icon jaisa look — PhonePe-icons jaisa hi, consistency ke liye. */ box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.6), inset 0 -3px 6px rgba(0,0,0,0.07), 0 5px 12px -3px rgba(20,25,50,0.15); } .tool-card .icon::after{ content:'';position:absolute;inset:0;border-radius:11px; background:linear-gradient(155deg, rgba(255,255,255,0.5) 0%, transparent 45%); pointer-events:none; } .tool-card h4{font-size:13.5px;font-weight:700;color:var(--navy);margin:0 0 2px;} .tool-card p{font-size:11.5px;color:var(--ink-soft);margin:0;line-height:1.4;} /* Category ke hisaab se icon-badge ka rang — iLovePDF/Smallpdf jaisa, taaki ek nazar mein pehchana jaaye ki kaam kis "kism" ka hai */ .tool-card.badge-organize .icon{background:#FDEBE4;color:#E96A2F;} .tool-card.badge-optimize .icon{background:#E6F7EC;color:#1E9E62;} .tool-card.badge-convert .icon{background:#FFF6DE;color:#C99A1E;} .tool-card.badge-word .icon{background:#E5EEFF;color:#2D6CDF;} .tool-card.badge-excel .icon{background:#E5F7EA;color:#1E9E62;} .tool-card.badge-ppt .icon{background:#FDEEE6;color:#E9622F;} .tool-card.badge-security .icon{background:#F1EBFD;color:#7B4FE0;} .tool-card.badge-ai .icon{background:#FDE9F3;color:#D6337F;} .tool-card.badge-cyber .icon{background:#FFF1E0;color:#E9782F;} /* ============ WHY CHOOSE / FEATURES ============ */ .features-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .feature-item{text-align:center;padding:10px;} .feature-item .icon{font-size:30px;margin-bottom:14px;} .feature-item h4{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 8px;} .feature-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;} /* ============ HOW IT WORKS ============ */ .steps-row{max-width:900px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;} .step-item{text-align:center;flex:1;} .step-num{ width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 14px; } .step-item h4{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 6px;} .step-item p{font-size:13px;color:var(--ink-soft);} /* ============ PRICING ============ */ /* ZAROORI (10 Sept, NAYA) — "Free Offer" active hone par dikhne wale strikethrough-price aur "FREE" badge, aur section-head ka banner. */ .free-offer-banner{ display:inline-block;margin-top:14px;padding:10px 20px;border-radius:999px; background:linear-gradient(90deg,#F2782F,#FF9A4D);color:#fff;font-weight:800;font-size:13.5px; box-shadow:0 6px 18px -6px rgba(242,120,47,0.5); } .amount-struck{font-size:22px;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--red,#E14B4B);text-decoration-thickness:2px;font-weight:700;} .amount-free{font-size:26px;color:#1E9E62;font-weight:900;margin-left:4px;} .pricing-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;} .price-card{ background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:28px 24px; text-align:center; /* ZAROORI FIX (10 Sept, BAHUT ZAROORI) — Customer ne pakdi: Free/ Basic jaise plans (jinme kam features likhe hain) ke cards, Pro/Business jaise (zyada features) se CHHOTE dikhte the — sab ek jaisi, barabar height ke honi chahiye thi. Ab "flex-column + height:100%" se poora card hamesha row ki sabse lambi height tak stretch hota hai, aur neeche wala button "margin-top:auto" se hamesha SABSE NEECHE hi rehta hai — chahe features kam ho ya zyada, saare cards HAMESHA barabar, saaf-suthre dikhte hain. */ display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .price-card ul{flex:1;} .price-card > .btn, .price-card > a.btn, .price-card > button.btn{margin-top:auto;} .price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue);} .price-card.featured:hover{border-color:var(--orange);} .price-card.featured{border-color:var(--orange);box-shadow:var(--shadow-md);position:relative;} .price-card.featured::before{ content:'Most Popular';position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;padding:4px 14px;border-radius:12px; } .price-card h3{font-size:16px;color:var(--ink-soft);margin:6px 0 12px;} .price-card .amount{font-size:34px;font-weight:800;color:var(--navy);} .price-card .amount span{font-size:14px;font-weight:600;color:var(--ink-soft);} .price-card ul{list-style:none;padding:0;margin:20px 0;text-align:left;font-size:13px;color:var(--ink-soft);} .price-card li{padding:6px 0;display:flex;gap:8px;} .price-card-note{ font-size:11px;color:var(--ink-soft);background:var(--paper-2);border-radius:8px; padding:10px 12px;margin:14px 0;line-height:1.5;text-align:left; } /* ============ FOOTER ============ */ .site-footer{background:var(--navy);color:#C9D2EC;padding:56px 24px 26px;margin-top:auto;flex-shrink:0;} .footer-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px;} .footer-inner h5{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin:0 0 14px;} .footer-inner a{display:block;font-size:13.5px;color:#AEB8D6;padding:5px 0;} .footer-inner a:hover{color:#fff;} /* ============================================================ ZAROORI (18 Sept, NAYA) — Customer ne smallpdf/iLovePDF se tulna karke kaha: footer ko aur behtar kijiye — 1. Mobile par logo BEECHO-BEECH (center) mein aaye 2. Uske neeche wali line ek SAAF, SUNDAR "quote" ki tarah dikhe 3. Neeche wale links, MOBILE par bhi DO COLUMN mein rahein (pehle ek hi lambi line ban jaate the — bahut scroll hota tha) ============================================================ */ .footer-logo img{height:38px;width:auto;} .footer-tagline{ font-size:13px;color:#AEB8D6;line-height:1.75;max-width:280px;margin:14px 0 0; padding:12px 14px 12px 16px; border-left:3px solid var(--orange,#F2782F); background:rgba(255,255,255,0.045); border-radius:0 10px 10px 0; font-style:italic; } html.dark-mode .footer-tagline{background:rgba(255,255,255,0.06);} .footer-bottom{ max-width:1240px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,0.12); font-size:12.5px;color:#8B96BD;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; } /* ============ CHHOTA (COMPACT) FOOTER — homepage ke alawa sabhi pages ke liye, taaki page chhota rahe, kam scroll karna pade ============ */ .site-footer-compact{padding:18px 24px;margin-top:auto;} .site-footer-compact .footer-bottom{margin:0 auto;} /* ============ TABLET/CHHOTA LAPTOP — nav dikhta hai, par kam jagah hai ============ */ @media(min-width:961px) and (max-width:1440px){ .header-inner{gap:5px;padding:14px 10px;} .nav-link{padding:8px 6px;font-size:12.5px;} .header-actions{gap:4px;} .header-actions .btn{padding:8px 10px;font-size:12px;} .nav-premium-link{font-size:12.5px;padding:8px 4px;} /* Chhota to ho, par HAMESHA dikhna chahiye */ .header-logo-text{font-size:15px;} .header-logo img{height:44px;} } /* ============ RESPONSIVE ============ */ @media(max-width:960px){ .header-nav{display:none;} .header-burger{display:block;} .mega-menu-inner{grid-template-columns:repeat(2,1fr);} .cat-grid{grid-template-columns:repeat(2,1fr);} .tool-grid{grid-template-columns:repeat(2,1fr);} .features-grid{grid-template-columns:1fr;} .steps-row{flex-direction:column;gap:34px;} .pricing-grid{grid-template-columns:repeat(2,1fr);} .footer-inner{grid-template-columns:repeat(2,1fr);} } /* ============ MOBILE (phone) — poori tarah hath se istemal ke liye ============ */ @media(max-width:600px){ html{-webkit-text-size-adjust:100%;} .container{padding:0 16px;} /* Header — sabse zaroori: logo + burger, baaki chhupa hua drawer mein */ /* ZAROORI FIX (18 Sept, GENUINE) — Customer ne iLovePDF aur smallpdf se tulna karke dikhaya: unka mobile-header KAAFI OONCHA (bada, khula-khula) dikhta hai, jabki apna header DABA hua, kam oonchai wala lagta tha. Ab padding badha di (12px -> 18px upar-neeche) aur logo bhi thoda bada (44 -> 50px) — header ab genuinely khula-khula aur unke jaisa bada dikhta hai. */ .header-inner{padding:18px 16px;gap:10px;} .header-logo img{height:50px;} .header-logo-text{font-size:16.5px;} .header-actions{gap:6px;} .header-actions .btn-ghost{display:none;} /* "Login" text-button chhupa dijiye, drawer mein maujood hai */ .header-actions .btn-outline{padding:9px 12px;font-size:12.5px;} .header-actions .btn-primary{padding:10px 14px;font-size:13px;} .nav-premium-link{display:none;} /* Mobile par jagah bahut kam hai — yeh drawer mein pehle se maujood hai */ /* ZAROORI FIX (18 Sept, GENUINE) — Customer ne kaha: "Login" ke bagal wala (☰) hamburger thoda BADA ho, BOX-type dikhe, aur uspar hover/tap karne par ek saaf asar (graphic design) dikhe. Ab: bada (46px), saaf border wala box, aur tap/hover par rang badal kar orange ho jaata hai — dabaane par halka daba (press) bhi hota hai, taaki customer ko pakka pata chale ki dab gaya. */ .header-burger{ width:46px;height:46px;display:flex;align-items:center;justify-content:center; background:var(--paper-2);border:1.5px solid var(--line);border-radius:11px; font-size:21px;flex-shrink:0;transition:background .16s, border-color .16s, transform .12s; } .header-burger:hover{background:rgba(242,120,47,0.14);border-color:var(--orange,#F2782F);color:var(--orange,#F2782F);} .header-burger:active{transform:scale(0.93);} /* ZAROORI FIX (9 Sept, BAHUT ZAROORI) — Customer ne asli phone par dikhaya: "Sign Up" button aur (☰) hamburger, screen ke kinare se kat/chhup jaate the — browser ke apne 3-dot menu se takra jaate the. Yeh tab hota hai jab phone ka font/zoom thoda bada ho, ya screen 360px se bhi sankri ho. Ab EK AUR, zyada tight (compact) safety-net hai — taaki KISI BHI (chhoti se chhoti) screen par bhi, Logo+Sign-Up+Hamburger — teeno HAMESHA poori tarah dikhein, kabhi bhi kinare se katein/chhupein nahi. */ @media(max-width:390px){ /* ZAROORI FIX (18 Sept, GENUINE) — Yeh block upar wale naye, BADE header ko override kar raha tha (isliye 390px par header phir se chhota ho jaata tha). Ab yahan bhi wahi khula-khula aur bada look rakha hai — bas itna hi kam kiya hai jitna INSAAF se zaroori hai, taaki 390px par bhi sab kuch poora dikhe aur kinare se kate nahi. */ .header-inner{padding:15px 10px;gap:6px;} .header-logo img{height:44px;} .header-logo-text{font-size:14.5px;} .header-actions{gap:5px;} .theme-toggle{width:36px;height:36px;font-size:15px;} .header-actions .btn-primary{padding:8px 10px;font-size:12px;} .header-burger{width:42px;height:42px;font-size:19px;} } /* ZAROORI: Bahut hi sankri screens (320-340px, kam istemal hone wale, purane/saste phone) ke liye — theme-toggle (chaand-icon) yahan chhupa dete hain (yeh sirf "achha-lage" wali cheez hai, zaroori Sign-Up/Hamburger nahi) — taaki bachi hui teeno cheezein (Logo, Sign-Up, Hamburger) HAMESHA poori tarah dikhein.*/ @media(max-width:345px){ .theme-toggle{display:none;} .header-logo-text{font-size:13px;} } /* Mega-menus band, sirf mobile drawer chalta hai */ .mega-menu{display:none !important;} /* Hero — chhota padding, bade touch-target buttons */ .hero{padding:40px 16px 64px;} .hero-eyebrow{font-size:11.5px;padding:6px 13px;} .hero h1{font-size:28px;line-height:1.22;} .hero p{font-size:15px;padding:0 4px;} .hero-cta{flex-direction:column;align-items:stretch;gap:10px;} .hero-cta .btn{width:100%;padding:16px 20px;font-size:15px;} /* poori chaudai — thumb se dabana aasan */ /* Smart Tools ke baaki mobile rules 560px breakpoint mein hain (neeche) */ /* Sections — kam padding, bade touch targets */ .section{padding:44px 16px;} .section-head{margin-bottom:28px;} .section-head h2{font-size:23px;} .section-head p{font-size:14px;} /* Category & tool cards — ek column, poori chaudai, bada tap-area */ .cat-grid,.tool-grid,.pricing-grid{grid-template-columns:1fr;} /* ZAROORI FIX (18 Sept, GENUINE) — Customer ne kaha: mobile par footer ke links EK HI LAMBI LINE mein ban jaate the (bahut scroll karna padta tha). Ab wo DO COLUMN mein, vyavasthit tarike se dikhte hain — jagah bhi bachti hai, padhne mein bhi aasan. Logo aur uska quote, poori chaudai mein, BEECHO-BEECH. */ .footer-inner{grid-template-columns:repeat(2,1fr);} .footer-brand{grid-column:1 / -1;text-align:center;} /* ZAROORI: Is website mein ek vaishvik (global) niyam hai — "img{display:block}". Isliye sirf "text-align:center" se logo beech mein nahi aata (woh sirf INLINE cheezon par kaam karta hai). Isliye seedha "margin:0 auto" lagate hain — yeh block element ko PAKKE taur par beecho-beech le aata hai. */ .footer-brand .footer-logo{display:block;} .footer-brand .footer-logo img{margin:0 auto;} .footer-tagline{max-width:340px;margin:14px auto 6px;text-align:center; border-left:none;border-top:3px solid var(--orange,#F2782F);border-radius:0 0 10px 10px;padding:12px 14px;} .cat-card{padding:20px;display:flex;align-items:center;gap:14px;text-align:left;} .cat-card .icon{margin-bottom:0;flex-shrink:0;} .tool-card{padding:16px;} .features-grid{gap:22px;} .feature-item{text-align:left;display:flex;align-items:flex-start;gap:14px;} .feature-item .icon{margin-bottom:0;flex-shrink:0;} .steps-row{gap:26px;} .step-item{display:flex;align-items:center;gap:14px;text-align:left;} .step-num{margin:0;flex-shrink:0;} .price-card{padding:22px 18px;} .footer-inner{gap:28px;text-align:left;} .footer-bottom{flex-direction:column;text-align:center;gap:6px;} /* Mobile drawer — poora categorized menu, accordion style */ .mobile-drawer{padding:6px 16px 20px;} .mobile-drawer-link{padding:14px 4px;font-size:15px;} /* bada tap-area */ } /* ============ SMART TOOLS — MOBILE (exact spec) ============ */ @media(max-width:560px){ .smart-tools{width:94vw;padding:14px;} .tools-header{align-items:flex-start;} .view-all-btn{padding:9px 11px;font-size:11px;} .tools-header h3{font-size:15px;} /* ZAROORI FIX: Pehle yahan horizontal-scroll (baayen-dayen swipe) tha — jisse zyadatar tools screen ke bahar chhup jaate the, aur customer ko lagta tha ki "tools khul hi nahi rahe". Ab normal 2-column grid hai — customer neeche ki taraf (upar-niche) scroll karke, category ke SABHI tools dekh sakta hai, jaisa mobile par hamesha hota hai. */ .tools-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } .smart-tool-card{min-width:0;align-items:flex-start;} /* ZAROORI: Narrow (2-column) card mein poora tool-naam dikhe — truncate (...) hone ki jagah, zaroorat par 2 lines mein wrap ho jaaye. */ .smart-tool-card .tool-info strong{white-space:normal;line-height:1.25;} .smart-tool-card .tool-info small{white-space:normal;} .smart-tool-card .tool-arrow{display:none;} } /* ============================================================ SAAJHI (SHARED) DOWNLOAD BUTTON — poori website mein ek jaisa, BADA, PREMIUM-DIKHNE WALA button, jo result taiyaar hote hi apne aap dikhta hai — gol icon-badge, chamakti hui "shine" wali lakeer, aur halka pulse — taaki customer ko download button dhoondhna na pade, aur dekhne mein bhi shaandaar lage. ============================================================ */ .saral-download-btn{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;gap:12px; width:100%;padding:16px 22px;border:none;border-radius:18px; background:linear-gradient(135deg,#0FA85C 0%,#1FC670 55%,#26D67D 100%); color:#fff;font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:0.01em; cursor:pointer;box-shadow:0 4px 14px rgba(15,168,92,0.3), 0 12px 30px rgba(15,168,92,0.28); animation:saral-download-pulse 2.2s ease-in-out infinite; text-decoration:none; } .saral-download-btn .sdb-icon{ display:flex;align-items:center;justify-content:center;flex-shrink:0; width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.22); font-size:16px; } .saral-download-btn::before{ /* Chamakti hui lakeer — bilkul premium-app buttons jaisi */ content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg);animation:saral-download-shine 2.6s ease-in-out infinite; } @keyframes saral-download-shine{ 0%{left:-60%;} 55%{left:130%;} 100%{left:130%;} } .saral-download-btn:hover{animation-play-state:paused;transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,168,92,0.35), 0 16px 36px rgba(15,168,92,0.35);} @keyframes saral-download-pulse{ 0%, 100% { box-shadow:0 4px 14px rgba(15,168,92,0.3), 0 12px 30px rgba(15,168,92,0.28); } 50% { box-shadow:0 6px 20px rgba(15,168,92,0.4), 0 18px 42px rgba(15,168,92,0.45); } } @media(max-width:480px){ .saral-download-btn{padding:15px 18px;font-size:15px;gap:10px;} .saral-download-btn .sdb-icon{width:30px;height:30px;font-size:14px;} } /* Chhoti, gol jagah ke liye — jaise inline rows mein — phir bhi dhyaan-khinchne wala, wahi premium chamak ke saath */ .saral-download-btn-compact{ position:relative;overflow:hidden; width:42px;height:42px;border-radius:50%;border:none;flex-shrink:0; background:linear-gradient(135deg,#0FA85C,#26D67D);color:#fff;font-size:17px; cursor:pointer;box-shadow:0 4px 12px rgba(15,168,92,0.3), 0 8px 20px rgba(15,168,92,0.3); animation:saral-download-pulse 2.2s ease-in-out infinite; display:flex;align-items:center;justify-content:center; } .saral-download-btn-compact:hover{animation-play-state:paused;transform:scale(1.08);} /* ============================================================ CHECKOUT DETAILS MODAL (3 Sept) — Payment shuru karne se pehle, Naam/Email/Mobile confirm karwane wala chhota overlay. ============================================================ */ .checkout-modal-overlay{ display:none;position:fixed;inset:0;background:rgba(15,27,60,0.55); z-index:400;align-items:center;justify-content:center;padding:16px; } .checkout-modal-overlay.open{display:flex;} .checkout-modal-box{ background:var(--paper);border-radius:18px;padding:26px 24px;width:100%;max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,0.25); } .checkout-modal-box h3{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 4px;} .checkout-modal-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;} .checkout-field-label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;margin-top:12px;} .checkout-input{ width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px; font-size:14px;font-family:inherit;color:var(--ink);background:var(--paper);box-sizing:border-box; } .checkout-input:disabled{background:var(--paper-2);color:var(--ink-soft);} .checkout-input:focus{outline:none;border-color:var(--blue);} .checkout-field-error{font-size:11.5px;color:var(--red);margin:5px 0 0;} .checkout-modal-plan-summary{ margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--paper-2); font-size:13px;color:var(--ink);font-weight:600;text-align:center; } .checkout-modal-cancel{ width:100%;margin-top:10px;padding:10px;background:none;border:none; font-size:13px;color:var(--ink-soft);font-weight:600;cursor:pointer; }