/* ========================================================================== Landing page styles — brand colours: #162d5a (navy) / #0870b5 (blue) ========================================================================== */ :root { --navy: #162d5a; --blue: #0870b5; --brand-gradient: linear-gradient(135deg, #162d5a 0%, #0870b5 100%); --ink: #1c2434; --muted: #6b7280; --soft: #f5f8fc; --ring: rgba(8, 112, 181, .15); } * { scroll-behavior: smooth; } /* ========================================================================== Scroll reveal — hiding is applied ONLY when JS adds `.js-reveal` to . If JS never runs, or the failsafe/`.reveal-all` kicks in, content stays visible. ========================================================================== */ .js-reveal [data-aos] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .js-reveal [data-aos="fade-left"] { transform: translateX(40px); } .js-reveal [data-aos="fade-right"] { transform: translateX(-40px); } .js-reveal [data-aos="zoom-in"] { transform: scale(.94); } .js-reveal [data-aos].revealed { opacity: 1; transform: none; } /* Failsafe + reduced-motion: show everything instantly, no animation */ .reveal-all [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; color: var(--ink); background: #ffffff; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; } section { position: relative; } /* Offset anchor jumps so headings aren't hidden behind the fixed navbar */ section[id], header[id], footer[id] { scroll-margin-top: 88px; } .text-navy { color: var(--navy) !important; } .text-blue { color: var(--blue) !important; } .bg-soft { background: var(--soft); } .section-pad { padding: 90px 0; } .eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); background: var(--ring); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .section-title h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--navy); } .section-title p { color: var(--muted); max-width: 620px; margin: 14px auto 0; } /* Buttons */ .btn-brand { background: var(--brand-gradient); color: #fff; border: none; padding: 12px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; box-shadow: 0 12px 24px -10px rgba(8, 112, 181, .6); transition: transform .25s ease, box-shadow .25s ease; } .btn-brand:hover { color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 30px -10px rgba(8, 112, 181, .7); } .btn-outline-brand { border: 2px solid var(--navy); color: var(--navy); padding: 10px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; background: transparent; transition: all .25s ease; } .btn-outline-brand:hover { background: var(--navy); color: #fff; text-decoration: none; } /* Navbar */ .navbar { transition: all .35s ease; padding: 18px 0; background: transparent; } .navbar.scrolled { background: #fff; box-shadow: 0 8px 30px rgba(22, 45, 90, .08); padding: 10px 0; } .navbar .nav-link { font-weight: 500; color: var(--navy) !important; margin: 0 6px; position: relative; } .navbar .nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); } .navbar .nav-link.active { color: var(--blue) !important; } .navbar-brand img { max-width: 52px; } /* Hamburger toggler (mobile) */ .navbar-toggler { border: none; padding: 8px 12px; border-radius: 12px; background: var(--ring); color: var(--navy); font-size: 1.5rem; line-height: 1; display: inline-flex; transition: background .25s ease, transform .2s ease; } .navbar-toggler:hover { background: var(--blue); color: #fff; } .navbar-toggler:active { transform: scale(.94); } .navbar-toggler:focus { box-shadow: 0 0 0 .25rem var(--ring); outline: none; } /* ---- Off-canvas drawer styling: BELOW lg only (mobile/tablet) ---- */ @media (max-width: 991.98px) { .mobile-offcanvas { width: 320px !important; max-width: 86vw; border: none !important; background: #fff; box-shadow: -20px 0 50px rgba(22, 45, 90, .12); } .mobile-offcanvas .offcanvas-header { padding: 22px 24px; border-bottom: 1px solid #eef2f7; } .mobile-offcanvas .offcanvas-header img { max-width: 50px; } .mobile-offcanvas .btn-close { background-color: var(--ring); border-radius: 50%; padding: 12px; opacity: 1; transition: background-color .2s ease; } .mobile-offcanvas .btn-close:hover { background-color: rgba(8, 112, 181, .25); } .mobile-offcanvas .offcanvas-body { display: flex; flex-direction: column; padding: 18px 20px 28px; } .mobile-offcanvas .navbar-nav { width: 100%; gap: 4px; margin: 0 0 auto !important; } .mobile-offcanvas .nav-link { display: flex; align-items: center; gap: 14px; padding: 13px 16px !important; margin: 0 !important; border-radius: 14px; font-weight: 600; font-size: 1.02rem; color: var(--navy) !important; transition: background .2s ease, color .2s ease, padding-left .2s ease; } .mobile-offcanvas .nav-link i { font-size: 1.2rem; color: var(--blue); } .mobile-offcanvas .nav-link::after { display: none; } /* no underline animation inside drawer */ .mobile-offcanvas .nav-link:hover, .mobile-offcanvas .nav-link.active { background: var(--ring); color: var(--blue) !important; padding-left: 20px !important; } .mobile-offcanvas .offcanvas-cta { flex-direction: column; align-items: stretch !important; gap: 12px !important; margin-top: 26px; padding-top: 22px; border-top: 1px solid #eef2f7; } .mobile-offcanvas .offcanvas-cta .btn-brand, .mobile-offcanvas .offcanvas-cta .btn-outline-brand { width: 100%; text-align: center; } } /* ---- Desktop (lg+): Bootstrap renders the offcanvas inline as a normal navbar ---- */ @media (min-width: 992px) { .navbar-nav .nav-link i { display: none; } /* link icons live only inside the drawer */ .mobile-offcanvas .offcanvas-cta { gap: 8px; } } /* Hero */ .hero { background: radial-gradient(1200px 600px at 80% -10%, rgba(8,112,181,.10), transparent 60%), radial-gradient(900px 500px at 0% 10%, rgba(22,45,90,.06), transparent 55%); padding: 160px 0 90px; } .hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.12; color: var(--navy); } .hero p.lead { color: var(--muted); font-size: 1.1rem; max-width: 540px; } .hero .badge-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ring); color: var(--blue); font-weight: 600; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; } .hero-img-wrap { position: relative; } .hero-img-wrap img { width: 100%; max-width: 540px; filter: drop-shadow(0 30px 50px rgba(22,45,90,.18)); } .hero-blob { position: absolute; inset: 0; z-index: -1; background: var(--brand-gradient); border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; opacity: .12; animation: morph 9s ease-in-out infinite; } @keyframes morph { 0%, 100% { border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; } 50% { border-radius: 58% 42% 37% 63% / 55% 58% 42% 45%; } } /* Trust / stats */ .stat-card { text-align: center; padding: 10px; } .stat-card .num { font-size: 2.4rem; font-weight: 800; color: var(--navy); line-height: 1; } .stat-card .num span { color: var(--blue); } .stat-card .label { color: var(--muted); font-weight: 500; margin-top: 6px; } /* Service cards */ .service-card { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 32px 26px; height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -22px rgba(22,45,90,.35); border-color: transparent; } .service-card .icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--ring); color: var(--blue); font-size: 1.7rem; margin-bottom: 20px; transition: all .3s ease; } .service-card:hover .icon { background: var(--brand-gradient); color: #fff; } .service-card h3 { font-size: 1.2rem; color: var(--navy); } .service-card p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; } .service-card a.more { color: var(--blue); font-weight: 600; text-decoration: none; } .service-card a.more:hover { text-decoration: underline; } /* How it works */ .step { background: #fff; border-radius: 18px; padding: 30px 24px; height: 100%; border: 1px solid #eef2f7; text-align: center; position: relative; } .step .num-badge { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; font-weight: 700; margin: 0 auto 18px; } .step h4 { font-size: 1.1rem; color: var(--navy); } .step p { color: var(--muted); font-size: .92rem; margin: 0; } /* Overview / about */ .features-list { list-style: none; padding: 0; margin: 26px 0 0; } .features-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); margin-bottom: 14px; } .features-list li i { color: var(--blue); background: var(--ring); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; flex: none; } /* Pricing */ .price-card { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid #eef2f7; display: flex; flex-direction: column; align-self: start; /* don't stretch to match tallest card */ transition: transform .3s ease, box-shadow .3s ease; } .price-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -22px rgba(22,45,90,.35); } .price-card .price-head { background: var(--brand-gradient); /* fallback; per-network color set inline */ color: #fff; text-align: center; padding: 26px 18px 20px; } .price-card .price-head img { max-width: 70px; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.35); } .price-card .price-head h3 { margin: 14px 0 0; font-size: 1.35rem; letter-spacing: .05em; font-weight: 700; } /* Fixed layout so column widths are controllable and long text wraps */ .price-table { width: 100%; font-size: .9rem; table-layout: fixed; border-collapse: collapse; } .price-table td { padding: 12px 14px; border-bottom: 1px solid #f0f3f8; vertical-align: middle; overflow-wrap: anywhere; word-break: break-word; } .price-table thead th { background: #f4f8fc; color: var(--navy); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 11px 14px; border-bottom: 2px solid #e6eef7; position: sticky; top: 0; } .price-table thead .th-plan { text-align: left; } .price-table thead .th-amount { text-align: left; } .price-table thead .th-days { text-align: center; } .price-table tbody tr:nth-child(even) { background: #fafcff; } .price-table tbody tr:last-child td { border-bottom: none; } /* ---- Column widths: tweak these three to resize each table head ---- */ .price-table .col-plan { width: 24%; } .price-table .col-amount { width: 35%; } .price-table .col-days { width: 41%; } /* -------------------------------------------------------------------- */ .price-table .plan { font-weight: 600; color: var(--navy); line-height: 1.3; } .price-table .amount { font-weight: 700; } .price-table .amount span { display: inline-block; background: var(--ring); color: var(--blue); padding: 4px 10px; border-radius: 999px; font-size: .85rem; } .price-table .days { text-align: center; } .price-table .days span { display: inline-block; background: #eef7ee; color: #1f9254; padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.2; } .price-foot { padding: 18px; text-align: center; margin-top: auto; } /* Testimonials */ .testi-card { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 30px; height: 100%; } .testi-card .stars { color: #f5a623; margin-bottom: 14px; } .testi-card p { color: var(--ink); font-style: italic; } .testi-bio { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .testi-bio img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .testi-bio h5 { margin: 0; font-size: 1rem; color: var(--navy); } .testi-bio span { font-size: .82rem; color: var(--blue); font-weight: 500; } /* Partners marquee */ .partners { padding: 60px 0; } .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; align-items: center; gap: 70px; animation: marquee 18s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { flex: none; display: grid; place-items: center; height: 60px; } .marquee__item img { max-height: 52px; max-width: 130px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .65; transition: filter .3s ease, opacity .3s ease, transform .3s ease; } .marquee__item img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.08); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 575px) { .marquee__track { gap: 44px; animation-duration: 14s; } .marquee__item img { max-height: 40px; max-width: 100px; } } /* Download app */ .download-app { background: var(--brand-gradient); border-radius: 28px; padding: 50px; color: #fff; overflow: hidden; position: relative; } .download-app::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.08); } .download-app h2 { color: #fff; } .download-app p { color: rgba(255,255,255,.85); } .store-btns img { height: 52px; transition: transform .25s ease; } .store-btns img:hover { transform: translateY(-4px); } /* FAQ */ .accordion-button { font-weight: 600; color: var(--navy); border-radius: 14px !important; box-shadow: none; } .accordion-button:not(.collapsed) { background: var(--ring); color: var(--navy); } .accordion-button:focus { box-shadow: 0 0 0 .2rem var(--ring); } .accordion-item { border: 1px solid #eef2f7; border-radius: 14px !important; margin-bottom: 14px; overflow: hidden; } .accordion-body { color: var(--muted); } /* Footer */ .footer { background: var(--navy); color: rgba(255,255,255,.75); padding: 70px 0 0; } .footer h5 { color: #fff; margin-bottom: 22px; font-size: 1.05rem; } .footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s ease; } .footer a:hover { color: #fff; } .footer .quick-links li { margin-bottom: 12px; } .footer .social a { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); margin-right: 8px; } .footer .social a:hover { background: var(--blue); } .footer .contact-item { display: flex; gap: 12px; margin-bottom: 16px; } .footer .contact-item i { color: var(--blue); font-size: 1.1rem; margin-top: 3px; } .copyright { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; margin-top: 50px; font-size: .9rem; } .copyright a { color: #6db6e6; } /* Go top */ .go-top { position: fixed; right: 24px; bottom: 24px; z-index: 99; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all .3s ease; box-shadow: 0 12px 24px -8px rgba(8,112,181,.6); } .go-top.show { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 991px) { .hero { padding: 130px 0 70px; text-align: center; } .hero p.lead { margin-left: auto; margin-right: auto; } .download-app { padding: 36px 26px; text-align: center; } }