/* ============================================================ DEVLUNIQ SOLUTIONS — Professional Software House Pure CSS (No Framework) Google Fonts loaded via in for non-blocking delivery ============================================================ */ /* ============================================================ 1. DESIGN TOKENS */ :root { --bg: #ffffff; --bg2: #f8fafc; --bg3: #f1f5f9; --bg-card: #ffffff; --accent: #143c8c; /* Dark Blue from Logo */ --accent-h: #0f3070; /* Darker Blue for hover */ --accent2: #1d4ed8; --accent3: #1e3a8a; --white: #0f172a; /* Slate 900 for dark text/headings on white bg */ --real-white: #ffffff; --text: #334155; /* Slate 700 for body text */ --muted: #64748b; /* Slate 500 for secondary text */ --dim: #94a3b8; /* Slate 400 */ --border: #e2e8f0; /* Slate 200 */ --border-a: rgba(20, 60, 140, 0.15); --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --nav-h: 76px; --max-w: 1280px; --grad: #143c8c; /* No gradient, solid dark blue */ --grad-hero: #ffffff; --shadow: 0 10px 30px rgba(15, 23, 42, 0.04); --glow: 0 0 30px rgba(20, 60, 140, 0.1); --r: 10px; --r-lg: 18px; --r-xl: 28px; --r-full: 9999px; --t: all .3s ease; --t-s: all .5s ease; } /* ============================================================ 2. RESET */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} a{text-decoration:none;color:inherit;transition:var(--t)} ul{list-style:none} img{max-width:100%;height:auto;display:block} input,textarea,select,button{font-family:'Inter',sans-serif;font-size:inherit} h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.2;color:var(--white)} h1{font-size:clamp(2.4rem,5vw,4.5rem)} h2{font-size:clamp(1.9rem,3.5vw,3rem)} h3{font-size:clamp(1.2rem,2.2vw,1.7rem)} h4{font-size:clamp(1rem,1.8vw,1.3rem)} p{color:var(--muted);line-height:1.85} /* ============================================================ 3. UTILITIES */ .container{max-width:var(--max-w);margin:0 auto;padding:0 24px} .container-sm{max-width:880px;margin:0 auto;padding:0 24px} .section{padding:100px 0} .section-sm{padding:60px 0} .text-accent{color:var(--accent)} .text-white{color:var(--white)} .text-muted{color:var(--muted)} .text-center{text-align:center} .text-grad{color:var(--accent);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset} .bg-dark{background:var(--bg)} .bg-dark2{background:var(--bg2)} .bg-dark3{background:var(--bg3)} .mt-4{margin-top:16px} .mt-8{margin-top:32px} .mb-4{margin-bottom:16px} .mb-8{margin-bottom:32px} .flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .grid{display:grid} .grid-2{grid-template-columns:repeat(2,1fr);gap:28px} .grid-3{grid-template-columns:repeat(3,1fr);gap:28px} .grid-4{grid-template-columns:repeat(4,1fr);gap:24px} .grid-5{grid-template-columns:repeat(5,1fr);gap:20px} /* ============================================================ 4. SECTION HEADER */ .sec-head{text-align:center;max-width:720px;margin:0 auto 64px} .sec-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,180,216,.08);border:1px solid var(--border-a);color:var(--accent);padding:6px 18px;border-radius:var(--r-full);font-size:.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px} .sec-badge::before{display:none} @keyframes pls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}} .sec-head h2{margin-bottom:16px} .sec-head p{font-size:1.05rem} .divider{width:56px;height:3px;background:var(--grad);border-radius:var(--r-full);margin:20px auto} /* ============================================================ 5. BUTTONS */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:var(--r);font-weight:600;font-size:.92rem;border:none;cursor:pointer;transition:var(--t);white-space:nowrap;position:relative;overflow:hidden} .btn-primary{background:var(--accent);color:#ffffff;box-shadow:0 4px 24px rgba(20,60,140,.2)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(20,60,140,.3);color:#ffffff;background:var(--accent-h)} .btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} .btn-outline:hover{background:var(--accent);color:#ffffff;transform:translateY(-2px)} .cta-sec .btn-outline, .stats-band .btn-outline{color:#ffffff;border-color:#ffffff} .cta-sec .btn-outline:hover, .stats-band .btn-outline:hover{background:#ffffff;color:var(--accent);border-color:#ffffff} .btn-accent-out{background:transparent;color:var(--accent);border:1.5px solid var(--border-a)} .btn-accent-out:hover{background:rgba(0,180,216,.08);transform:translateY(-2px);color:var(--accent)} .btn-white{background:#ffffff;color:var(--accent);font-weight:700} .btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);color:var(--accent3)} .btn-lg{padding:18px 44px;font-size:1rem} .btn-sm{padding:10px 22px;font-size:.85rem} /* ============================================================ 6. NAVBAR */ .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;background:transparent;transition:background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, box-shadow .3s ease, border-bottom .3s ease} .navbar.scrolled{background:rgba(255,255,255,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:none;box-shadow:0 4px 20px rgba(15,23,42,0.05)} .navbar .container{display:flex;align-items:center;justify-content:space-between;width:100%} .logo{display:flex;align-items:center} .logo-icon{width:auto;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .logo-text{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.1rem;color:var(--white);line-height:1} .logo-text small{font-weight:400;font-size:.68rem;color:var(--muted);display:block;margin-top:2px} .nav-menu{display:flex;align-items:center;gap:4px} .nav-menu>li>a{padding:8px 14px;color:var(--text);font-size:.88rem;font-weight:500;border-radius:var(--r);display:flex;align-items:center;gap:5px} .nav-menu>li>a:hover,.nav-menu>li>a.active{color:var(--accent);background:rgba(20,60,140,.07)} .nav-menu>li>a i{font-size:.65rem;transition:transform .3s} .has-dropdown{position:relative} .has-dropdown:hover>a i{transform:rotate(180deg)} .dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);width:228px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r);padding:10px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow)} .has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dropdown a{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--muted);font-size:.84rem;border-radius:6px;transition:var(--t)} .dropdown a:hover{color:var(--accent);background:rgba(20,60,140,.07);padding-left:20px} .dropdown a i{font-size:.75rem;color:var(--accent);width:16px} .nav-actions{display:flex;align-items:center;gap:14px} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:var(--t)} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============================================================ 7. HERO */ .hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--grad-hero)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.07} .hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%} .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,var(--bg) 100%);z-index:2} .hero-glow{position:absolute;width:700px;height:700px;background:radial-gradient(ellipse,rgba(0,180,216,.1) 0%,transparent 65%);top:40%;left:40%;transform:translate(-50%,-50%);z-index:2;pointer-events:none} .hero-content{position:relative;z-index:3;max-width:820px;padding-top:76px} .hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(0,180,216,.08);border:1px solid var(--border-a);color:var(--accent2);padding:10px 22px;border-radius:var(--r-full);font-size:.85rem;font-weight:500;margin-bottom:30px} .hero-badge .dot{display:none} .hero h1{margin-bottom:24px;font-weight:900} .typed-line{color:var(--accent);display:block;min-height:1.2em} .typed-cursor{display:inline-block;width:3px;height:1em;background:var(--accent);margin-left:2px;animation:blink .7s infinite;vertical-align:text-bottom} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} .hero-desc{font-size:1.12rem;color:var(--text);max-width:620px;margin-bottom:40px;line-height:1.85} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px} .hero-stats{display:flex;gap:44px;flex-wrap:wrap;padding-top:36px;border-top:1px solid var(--border)} .hero-stat-num{font-family:'Poppins',sans-serif;font-size:2.2rem;font-weight:900;color:var(--accent);line-height:1} .hero-stat-lbl{font-size:.83rem;color:var(--muted);margin-top:5px} .hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim);font-size:.75rem;letter-spacing:1px;text-transform:uppercase} .scroll-line{width:1.5px;height:40px;background:linear-gradient(to bottom,var(--accent),transparent);animation:sl 2s infinite} @keyframes sl{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}} /* ============================================================ 8. LOGOS STRIP */ .strip{padding:36px 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .strip-label{text-align:center;font-size:.75rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);margin-bottom:22px} .strip-logos{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap} .strip-logos span{color:var(--dim);font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:1px;opacity:.5;transition:var(--t);cursor:default} .strip-logos span:hover{opacity:1;color:var(--accent)} /* ============================================================ 9. STATS BAND */ .stats-band{padding:72px 0;background:var(--accent);color:#ffffff} .stats-band .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .stat-item{text-align:center} .stat-num{font-family:'Poppins',sans-serif;font-size:3.2rem;font-weight:900;color:#ffffff;line-height:1;margin-bottom:8px} .stat-lbl{font-size:.9rem;color:rgba(255,255,255,0.9);font-weight:500} /* ============================================================ 10. PROBLEM → SOLUTION */ .prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px} .prob-box,.sol-box{display:flex;flex-direction:column;gap:14px} .prob-box h3,.sol-box h3{margin-bottom:6px;font-size:1.3rem} .prob-item,.sol-item{display:flex;gap:14px;padding:18px;border-radius:var(--r);border:1px solid rgba(239,68,68,.15);background:rgba(239,68,68,.03);transition:var(--t)} .prob-item:hover{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.07)} .sol-item{border-color:rgba(0,180,216,.15);background:rgba(0,180,216,.03)} .sol-item:hover{border-color:rgba(0,180,216,.3);background:rgba(20,60,140,.07)} .prob-ic,.sol-ic{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0} .prob-ic{background:rgba(239,68,68,.1);color:#f87171} .sol-ic{background:rgba(0,180,216,.1);color:var(--accent)} .prob-item h5{font-size:.9rem;color:#dc2626;margin-bottom:3px} .sol-item h5{font-size:.9rem;color:var(--accent);margin-bottom:3px} .prob-item p,.sol-item p{font-size:.82rem} .arrow-col{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px} .arrow-col i{font-size:2rem;color:var(--accent);opacity:.5} /* ============================================================ 11. SERVICE CARDS */ .svc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;transition:var(--t);position:relative;overflow:hidden;backdrop-filter:blur(10px)} .svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:0;transition:var(--t)} .svc-card:hover{border-color:var(--border-a);transform:translateY(-6px);box-shadow:0 20px 50px rgba(15,23,42,.08)} .svc-card:hover::before{opacity:1} .svc-icon{width:58px;height:58px;background:rgba(0,180,216,.09);border:1px solid var(--border-a);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--accent);margin-bottom:22px;transition:var(--t)} .svc-card:hover .svc-icon{background:var(--grad);color:#ffffff;border-color:transparent;box-shadow:var(--glow)} .svc-card h3{font-size:1.1rem;margin-bottom:10px} .svc-card>p{font-size:.875rem;margin-bottom:18px} .svc-feats{display:flex;flex-direction:column;gap:7px;margin-bottom:22px} .svc-feats li{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--muted)} .svc-feats li i{color:var(--accent);font-size:.72rem} .svc-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.85rem;font-weight:600} .svc-link:hover{gap:12px;color:var(--accent2)} /* ============================================================ 12. FEATURE / WHY US */ .feat-card{display:flex;gap:18px;padding:22px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,.018);transition:var(--t)} .feat-card:hover{border-color:var(--border-a);background:rgba(0,180,216,.04);transform:translateX(4px)} .feat-icon{width:48px;height:48px;background:rgba(0,180,216,.09);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:var(--accent);flex-shrink:0} .feat-card h4{font-size:.95rem;margin-bottom:5px} .feat-card p{font-size:.83rem} /* ============================================================ 13. PROCESS STEPS */ .steps-track{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative} .steps-track::before{content:'';position:absolute;top:36px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.25} .step{text-align:center;position:relative;z-index:1} .step-num{width:72px;height:72px;background:var(--bg3);border:2px solid var(--border-a);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:800;color:var(--accent);margin:0 auto 18px;transition:var(--t)} .step:hover .step-num{background:var(--grad);color:#ffffff;border-color:transparent;box-shadow:var(--glow)} .step h4{font-size:.88rem;margin-bottom:7px} .step p{font-size:.78rem} /* ============================================================ 14. PORTFOLIO */ .port-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px} .flt-btn{padding:8px 22px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--t)} .flt-btn:hover,.flt-btn.active{background:var(--grad);color:#ffffff;border-color:transparent} .proj-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);transition:var(--t)} .proj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border-a)} .proj-img{position:relative;overflow:hidden;height:210px} .proj-img img{width:100%;height:100%;object-fit:cover;transition:var(--t-s)} .proj-card:hover .proj-img img{transform:scale(1.07)} .proj-badge{position:absolute;top:12px;left:12px;background:var(--grad);color:#ffffff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--r-full);letter-spacing:.5px} .proj-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--t)} .proj-card:hover .proj-overlay{opacity:1} .proj-overlay a{width:48px;height:48px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:1rem} .proj-body{padding:20px} .proj-body h3{font-size:1rem;margin-bottom:7px} .proj-body p{font-size:.83rem;margin-bottom:14px} .proj-tags{display:flex;flex-wrap:wrap;gap:6px} .tag{background:rgba(20,60,140,.08);color:var(--accent);font-size:.73rem;padding:3px 10px;border-radius:var(--r-full);font-weight:500} /* ============================================================ 15. DASHBOARD SHOWCASE */ .showcase{padding:90px 0;background:var(--bg2);position:relative;overflow:hidden} .showcase-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .showcase-img{position:relative} .showcase-img img{border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow)} .showcase-img::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(0,180,216,.3),transparent);z-index:-1;filter:blur(20px)} .floating-card{position:absolute;background:rgba(255,255,255,.95);border:1px solid var(--border-a);border-radius:var(--r);padding:14px 18px;backdrop-filter:blur(10px);box-shadow:var(--shadow)} .floating-card.card-1{bottom:-24px;left:-24px} .floating-card.card-2{top:-20px;right:-20px} .floating-card h5{font-size:.85rem;margin-bottom:4px;white-space:nowrap} .floating-card p{font-size:.75rem} .fc-icon{font-size:1.3rem;color:var(--accent);margin-bottom:6px} .fc-stat{font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:800;color:var(--accent);line-height:1} .showcase-content h2{margin-bottom:16px} .showcase-content .lead{font-size:1.05rem;margin-bottom:28px} .tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .tech-pill{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:.8rem;font-weight:600;padding:6px 16px;border-radius:var(--r-full);transition:var(--t)} .tech-pill:hover{border-color:var(--border-a);color:var(--accent);background:rgba(0,180,216,.05)} /* ============================================================ 16. TESTIMONIALS */ .testi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px} .testi-stars{display:flex;gap:4px;margin-bottom:18px;color:#f59e0b;font-size:.95rem} .testi-quote{font-size:2.5rem;color:var(--border-a);font-family:'Poppins',sans-serif;line-height:1;margin-bottom:8px} .testi-text{color:var(--text);font-size:.95rem;line-height:1.85;margin-bottom:26px;font-style:italic} .testi-author{display:flex;align-items:center;gap:14px} .testi-av{width:50px;height:50px;border-radius:50%;overflow:hidden;border:2px solid var(--border-a);flex-shrink:0} .testi-av img{width:100%;height:100%;object-fit:cover} .testi-name{font-weight:700;font-size:.9rem;color:var(--white)} .testi-role{font-size:.78rem;color:var(--muted)} .swiper-pagination-bullet{background:var(--dim)!important;opacity:1!important} .swiper-pagination-bullet-active{background:var(--accent)!important} /* ============================================================ 17. BLOG CARDS */ .blog-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);transition:var(--t)} .blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--border-a)} .blog-img{height:210px;overflow:hidden} .blog-img img{width:100%;height:100%;object-fit:cover;transition:var(--t-s)} .blog-card:hover .blog-img img{transform:scale(1.06)} .blog-body{padding:24px} .blog-meta{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap} .blog-cat{background:rgba(0,180,216,.09);color:var(--accent);font-size:.73rem;font-weight:700;padding:3px 12px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.6px} .blog-date{font-size:.78rem;color:var(--dim);display:flex;align-items:center;gap:5px} .blog-body h3{font-size:1rem;margin-bottom:9px;transition:var(--t)} .blog-card:hover .blog-body h3{color:var(--accent)} .blog-body p{font-size:.84rem;margin-bottom:14px} .read-more{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:.85rem;font-weight:600;transition:var(--t)} .read-more:hover{gap:12px;color:var(--accent2)} /* ============================================================ 18. TEAM */ .team-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);transition:var(--t);text-align:center} .team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border-a)} .team-img{height:260px;overflow:hidden;position:relative} .team-img img{width:100%;height:100%;object-fit:cover;transition:var(--t-s)} .team-card:hover .team-img img{transform:scale(1.06)} .team-socials{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);padding:20px;display:flex;justify-content:center;gap:10px;transform:translateY(100%);transition:var(--t)} .team-card:hover .team-socials{transform:translateY(0)} .team-socials a{width:32px;height:32px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:.78rem} .team-body{padding:20px} .team-body h3{font-size:1.05rem;margin-bottom:4px} .team-role{color:var(--accent);font-size:.83rem;font-weight:600;margin-bottom:8px} .team-body p{font-size:.82rem} /* ============================================================ 19. TIMELINE */ .timeline{position:relative;padding-left:52px} .timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent3),transparent)} .tl-item{position:relative;padding-bottom:40px} .tl-dot{position:absolute;left:-46px;top:4px;width:24px;height:24px;background:var(--grad);border-radius:50%;border:4px solid var(--bg2)} .tl-year{color:var(--accent);font-weight:700;font-size:.82rem;letter-spacing:1px;margin-bottom:5px} .tl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;transition:var(--t)} .tl-card:hover{border-color:var(--border-a)} .tl-card h4{font-size:.95rem;margin-bottom:5px} .tl-card p{font-size:.83rem} /* ============================================================ 20. ACCORDION */ .acc-list{display:flex;flex-direction:column;gap:10px} .acc-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-card);transition:var(--t)} .acc-item.open{border-color:var(--border-a)} .acc-head{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer} .acc-head h4{font-size:.92rem;font-weight:600} .acc-ic{width:28px;height:28px;background:rgba(0,180,216,.09);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.85rem;flex-shrink:0;transition:var(--t)} .acc-item.open .acc-ic{background:var(--grad);color:#ffffff;transform:rotate(45deg)} .acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 22px} .acc-item.open .acc-body{max-height:400px;padding-bottom:18px} .acc-body p{font-size:.875rem;line-height:1.8} /* ============================================================ 21. PAGE HERO */ .page-hero { padding: 160px 0 100px; background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2) 0%, #070e1b 100%), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), #070e1b; background-size: 100% 100%, 24px 24px, 24px 24px, 100% 100%; position: relative; overflow: hidden; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .page-hero .container { display: flex; flex-direction: column; align-items: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%); pointer-events: none; } .page-hero h1 { color: #ffffff !important; font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 800; margin-bottom: 20px; letter-spacing: -0.5px; } .page-hero h1 .text-grad { color: #3b82f6 !important; } .page-hero p { color: rgba(255, 255, 255, 0.7) !important; font-size: 1.1rem; max-width: 650px; margin: 0 auto 30px; line-height: 1.8; } .page-hero .sec-badge { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; margin-bottom: 20px; } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; background: transparent; padding: 0; border: none; } .breadcrumb a { color: rgba(255, 255, 255, 0.7); font-weight: 500; transition: var(--t); } .breadcrumb a:hover { color: #3b82f6 !important; } .breadcrumb span { color: rgba(255, 255, 255, 0.9); font-weight: 500; } .breadcrumb i { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); } /* ============================================================ 22. CONTACT */ .contact-info-card{display:flex;gap:16px;padding:20px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,.018);transition:var(--t)} .contact-info-card:hover{border-color:var(--border-a);background:rgba(0,180,216,.04)} .ci-icon{width:48px;height:48px;background:rgba(0,180,216,.09);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.05rem;flex-shrink:0} .ci-label{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-bottom:3px} .ci-value{color:var(--white);font-weight:500;font-size:.9rem} .ci-value a{color:var(--white)} .ci-value a:hover{color:var(--accent)} .contact-form-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:44px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-grp{display:flex;flex-direction:column;gap:7px} .form-grp label{font-size:.85rem;font-weight:500;color:var(--text)} .form-grp input,.form-grp textarea,.form-grp select{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:13px 18px;color:var(--white);font-size:.9rem;transition:var(--t);outline:none;appearance:none;-webkit-appearance:none} .form-grp select option{background:var(--bg);color:var(--text)} .form-grp input:focus,.form-grp textarea:focus,.form-grp select:focus{border-color:var(--border-a);background:rgba(0,180,216,.04);box-shadow:0 0 0 3px rgba(0,180,216,.1)} .form-grp input::placeholder,.form-grp textarea::placeholder{color:var(--dim)} .form-grp textarea{resize:vertical;min-height:130px} .form-err{font-size:.78rem;color:var(--danger);display:none} .form-grp.has-error input,.form-grp.has-error textarea,.form-grp.has-error select{border-color:rgba(239,68,68,.5)} .form-grp.has-error .form-err{display:block} .form-success{text-align:center;padding:48px;display:none} .form-success i{font-size:3rem;color:var(--success);margin-bottom:16px} /* ============================================================ 23. NUMBERS HIGHLIGHT */ .numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .num-card{text-align:center;padding:32px 20px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-card);transition:var(--t)} .num-card:hover{border-color:var(--border-a);transform:translateY(-4px)} .num-val{font-family:'Poppins',sans-serif;font-size:3rem;font-weight:900;line-height:1;margin-bottom:8px} .num-card:nth-child(1) .num-val{color:var(--accent)} .num-card:nth-child(2) .num-val{color:#48cae4} .num-card:nth-child(3) .num-val{color:#90e0ef} .num-card:nth-child(4) .num-val{color:var(--accent2)} .num-lbl{font-size:.88rem;color:var(--muted)} /* ============================================================ 24. CTA SECTION */ .cta-sec { padding: 110px 0; background: radial-gradient(circle at center, rgba(59, 130, 246, 0.25) 0%, #070e1b 100%), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), #070e1b; background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%; text-align: center; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cta-sec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(59, 130, 246, 0.08) 0%, transparent 65%); pointer-events: none; } .cta-sec h2 { color: #ffffff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 16px; position: relative; letter-spacing: -0.5px; } .cta-sec p { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; max-width: 600px; margin: 0 auto 40px; position: relative; line-height: 1.8; } .cta-sec .sec-badge { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; margin-bottom: 24px; } .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative} /* ============================================================ 25. FOOTER */ .footer{background:#0b1329;border-top:1px solid rgba(255,255,255,0.06)} .footer-top{padding:80px 0 40px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:52px} .footer-brand .logo{margin-bottom:20px} .footer-brand p{font-size:.875rem;margin-bottom:24px} .social-links{display:flex;gap:10px} .soc-link{width:38px;height:38px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.88rem;transition:var(--t)} .soc-link:hover{background:var(--grad);color:#ffffff;border-color:transparent;transform:translateY(-2px)} .footer-col h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:var(--muted);margin-bottom:18px} .footer-links{display:flex;flex-direction:column;gap:9px} .footer-links a{color:var(--muted);font-size:.875rem;transition:var(--t);display:flex;align-items:center;gap:6px} .footer-links a:hover{color:var(--accent);padding-left:4px} .footer-links a i{font-size:.65rem;color:var(--accent);opacity:0;transition:var(--t)} .footer-links a:hover i{opacity:1} .ftr-ci{display:flex;gap:12px;margin-bottom:14px;font-size:.85rem} .ftr-ci i{color:var(--accent);margin-top:2px;flex-shrink:0;width:14px} .ftr-ci a,.ftr-ci span{color:var(--muted);transition:var(--t)} .ftr-ci a:hover{color:var(--accent)} .footer-bottom{padding:22px 0;border-top:1px solid var(--border)} .footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} .footer-bottom p{font-size:.83rem;color:var(--dim)} .ftr-btm-links{display:flex;gap:22px} .ftr-btm-links a{font-size:.83rem;color:var(--dim);transition:var(--t)} .ftr-btm-links a:hover{color:var(--accent)} /* ============================================================ 26. GLOBAL ELEMENTS */ .scroll-bar{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:9999;width:0%;transition:width .1s} .back-top{position:fixed;bottom:28px;right:28px;width:46px;height:46px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:.95rem;cursor:pointer;border:none;box-shadow:var(--glow);opacity:0;visibility:hidden;transform:translateY(20px);transition:var(--t);z-index:900} .back-top.show{opacity:1;visibility:visible;transform:translateY(0)} .back-top:hover{transform:translateY(-4px)} /* ============================================================ 27. ANIMATIONS (data-aos) */ [data-aos]{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease} [data-aos="right"]{transform:translateX(-32px)} [data-aos="left"]{transform:translateX(32px)} [data-aos="zoom"]{transform:scale(.88)} [data-aos].animated{opacity:1;transform:none} /* ============================================================ 28. SERVICE PAGE SPECIFIC */ .svc-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .svc-hero-img{border-radius:var(--r-lg);overflow:hidden;position:relative} .svc-hero-img img{width:100%;height:100%;object-fit:cover} .svc-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,180,216,.15),transparent)} .cap-card{display:flex;gap:16px;padding:22px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-card);transition:var(--t)} .cap-card:hover{border-color:var(--border-a);transform:translateY(-3px)} .cap-icon{width:44px;height:44px;background:rgba(0,180,216,.09);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--accent);flex-shrink:0} .cap-card h4{font-size:.92rem;margin-bottom:5px} .cap-card p{font-size:.82rem} .ind-item{display:flex;gap:14px;padding:18px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,.018);transition:var(--t)} .ind-item:hover{border-color:var(--border-a);background:rgba(0,180,216,.04)} .ind-item i{color:var(--accent);font-size:1rem;margin-top:2px;flex-shrink:0} .ind-item h4{font-size:.9rem;margin-bottom:3px} .ind-item p{font-size:.82rem} /* ============================================================ 29. RESPONSIVE */ @media(max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-5{grid-template-columns:repeat(3,1fr)} .steps-track{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .stats-band .container{grid-template-columns:repeat(2,1fr)} .numbers-grid{grid-template-columns:repeat(2,1fr)} } @keyframes fadeInMenu { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInItem { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media(max-width:768px){ .nav-menu,.nav-actions .btn{display:none} .navbar:not(.menu-open) { height: auto !important; padding-top: calc(30px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 22px !important; } /* Fix logo and hamburger stacking above fullscreen overlay & resolve backdrop-filter clipping */ .navbar.menu-open { z-index: 99999999 !important; height: 100vh !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 20px rgba(15,23,42,0.05) !important; align-items: flex-start !important; /* Prevent vertical centering of container in 100vh height */ } .navbar.menu-open .container { height: var(--nav-h) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* Align only the close button to the right */ } .navbar.menu-open .logo { display: none !important; /* Hide logo when menu is open */ } .navbar.menu-open .hamburger { z-index: 1000000 !important; position: relative; } .navbar.menu-open .hamburger span { background: var(--white) !important; } .hamburger{display:flex;position:relative;z-index:1000000} /* Full screen premium white menu overlay */ .nav-menu.open{ display:flex !important; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:#ffffff !important; padding:20px 24px 40px 24px; gap:8px; overflow-y:auto; z-index:999999 !important; border-top: 1px solid var(--border); animation: fadeInMenu 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Staggered slide-in animation for list items */ .nav-menu.open>li{ width:100%; opacity:0; animation: slideInItem 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .nav-menu.open>li:nth-child(1) { animation-delay: 0.08s; } .nav-menu.open>li:nth-child(2) { animation-delay: 0.12s; } .nav-menu.open>li:nth-child(3) { animation-delay: 0.16s; } .nav-menu.open>li:nth-child(4) { animation-delay: 0.2s; } .nav-menu.open>li:nth-child(5) { animation-delay: 0.24s; } .nav-menu.open>li:nth-child(6) { animation-delay: 0.28s; } .nav-menu.open>li:nth-child(7) { animation-delay: 0.32s; } .nav-menu.open>li>a{ font-size:1.15rem; padding:12px 16px; border-radius:var(--r); color:var(--text) !important; display:flex; justify-content:space-between; align-items:center; transition: var(--t); } .nav-menu.open>li>a:hover, .nav-menu.open>li>a.active{ background:rgba(20, 60, 140, 0.07) !important; color:var(--accent) !important; } .nav-menu.open>li>a i { font-size: 0.75rem; transition: transform 0.3s; } .has-dropdown .dropdown{ position:static; opacity:1!important; visibility:visible!important; transform:none!important; background:rgba(20, 60, 140, 0.02); margin-top:6px; box-shadow:none; display:none; border-radius:var(--r); border-left:2px solid var(--border); padding:6px 0 6px 12px; width:100%; } .has-dropdown.mob-open .dropdown{display:block} .has-dropdown.mob-open > a i { transform: rotate(180deg); } .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .prob-grid{grid-template-columns:1fr} .steps-track{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr} .svc-hero-split{grid-template-columns:1fr} .showcase-wrap{grid-template-columns:1fr} .hero-stats{flex-wrap:wrap;gap:20px} .hero-cta{flex-direction:column} .cta-btns{flex-direction:column;align-items:center} .section{padding:70px 0} .stats-band .container,.numbers-grid{grid-template-columns:repeat(2,1fr)} .contact-form-wrap{padding:24px} } @media(max-width:480px){ .steps-track{grid-template-columns:1fr} .stats-band .container,.numbers-grid{grid-template-columns:1fr} .strip-logos{gap:24px} } /* --- HERO REDESIGN (DRIBBBLE STYLE) --- */ .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; width: 100%; padding-top: 100px; padding-bottom: 60px; position: relative; z-index: 3; } .hero-visual { display: flex; align-items: center; justify-content: center; position: relative; } .visual-wrapper { position: relative; width: 100%; max-width: 460px; } .dashboard-preview { background: #ffffff; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); overflow: hidden; width: 100%; } .db-header { background: #f8fafc; border-bottom: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .db-dots { display: flex; gap: 6px; } .db-dots span { width: 8px; height: 8px; border-radius: 50%; display: block; } .db-dots span:nth-child(1) { background: #ef4444; } .db-dots span:nth-child(2) { background: #eab308; } .db-dots span:nth-child(3) { background: #22c55e; } .db-title { font-size: 0.72rem; color: var(--muted); font-weight: 500; } .db-body { display: flex; height: 240px; } .db-sidebar { width: 50px; background: #f8fafc; border-right: 1px solid var(--border); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; } .sidebar-item { width: 20px; height: 20px; background: #e2e8f0; border-radius: 4px; } .sidebar-item.active { background: var(--accent); } .db-content { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .db-metrics { display: flex; gap: 12px; } .metric-card { flex: 1; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; } .m-label { font-size: 0.65rem; color: var(--muted); } .m-value { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-top: 4px; } .db-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 90px; padding-top: 10px; border-top: 1px solid var(--border); } .chart-bar { width: 14%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.85; transition: var(--t); } .chart-bar:hover { opacity: 1; } .floating-badge { position: absolute; background: #ffffff; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05); z-index: 5; } .floating-badge i { color: var(--accent); font-size: 1.4rem; } .floating-badge h4 { font-size: 0.8rem; color: var(--white); margin-bottom: 2px; } .floating-badge p { font-size: 0.68rem; color: var(--muted); } .badge-top { top: -20px; right: -15px; } .badge-bottom { bottom: -20px; left: -20px; } @media(max-width: 768px) { .hero-grid { grid-template-columns: 1fr; text-align: center; padding-top: 120px; } .hero-visual { margin-top: 40px; } } /* ============================================================ 29. LOGO & HEADER CONTRAST FIXES */ /* Footer logo text color contrast fix */ .footer .logo-text { color: #ffffff !important; } .footer .logo-text small { color: #3b82f6 !important; /* Light blue / accent Solutions text */ } /* Navbar logo & menu text contrast fix for dark transparent state */ .navbar.nav-dark:not(.scrolled) .logo-text { color: #ffffff !important; } .navbar.nav-dark:not(.scrolled) .logo-text small { color: #3b82f6 !important; } .navbar.nav-dark:not(.scrolled) .nav-menu>li>a { color: #ffffff !important; } .navbar.nav-dark:not(.scrolled) .nav-menu>li>a:hover, .navbar.nav-dark:not(.scrolled) .nav-menu>li>a.active { color: #3b82f6 !important; background: rgba(255, 255, 255, 0.1) !important; } .navbar.nav-dark:not(.scrolled) .hamburger span { background: #ffffff !important; } /* Force dark links and dark close button when mobile menu is open on transparent pages */ .navbar.nav-dark:not(.scrolled).menu-open .nav-menu>li>a { color: var(--text) !important; } .navbar.nav-dark:not(.scrolled).menu-open .nav-menu>li>a:hover, .navbar.nav-dark:not(.scrolled).menu-open .nav-menu>li>a.active { color: var(--accent) !important; background: rgba(20, 60, 140, 0.07) !important; } .navbar.nav-dark:not(.scrolled).menu-open .hamburger span { background: var(--white) !important; } /* Explicit fallback resets when scrolled (white background) */ .navbar.scrolled .logo-text { color: var(--white) !important; } .navbar.scrolled .logo-text small { color: var(--muted) !important; } .navbar.scrolled .nav-menu>li>a { color: var(--text) !important; } .navbar.scrolled .nav-menu>li>a:hover, .navbar.scrolled .nav-menu>li>a.active { color: var(--accent) !important; background: rgba(20, 60, 140, 0.07) !important; } .navbar.scrolled .hamburger span { background: var(--white) !important; } /* ============================================================ 30. PRELOADER */ .preloader { position: fixed; inset: 0; background: #ffffff; z-index: 999999999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; } .preloader.fade-out { opacity: 0; visibility: hidden; } .preloader-spinner { width: 42px; height: 42px; border: 3px solid rgba(20, 60, 140, 0.08); border-top-color: #143c8c; border-radius: 50%; animation: preloader-spin 0.8s linear infinite; will-change: transform; transform: translateZ(0); } @keyframes preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }