/* Index Menu Footer */ :root{ --bg:#020817; --bg2:#06142d; --blue:#2f6df6; --blue2:#62a2ff; --cyan:#08c8ef; --text:#f5f8ff; --muted:#8fa2c2; --glass:rgba(10,24,54,.58); --line:rgba(255,255,255,.12); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Inter",sans-serif; color:var(--text); background:#020817; overflow-x:hidden; } body:before{ content:""; position:fixed; inset:0; z-index:-10; background: radial-gradient(circle at 50% 12%,rgba(0,190,235,.22),transparent 30%), radial-gradient(circle at 12% 75%,rgba(34,86,210,.16),transparent 28%), radial-gradient(circle at 90% 70%,rgba(28,120,255,.12),transparent 28%), linear-gradient(135deg,#010817,#06152f 55%,#020817); } body:after{ content:""; position:fixed; inset:0; z-index:-8; pointer-events:none; opacity:.28; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(to bottom,black,transparent 85%); } /* .navbar-wrapper{position:fixed;top:14px;left:0;right:0;z-index:9999} .custom-navbar{ max-width:1250px;margin:auto;padding:9px 13px; border:1px solid rgba(255,255,255,.13);border-radius:50px; background:linear-gradient(135deg,rgba(24,46,89,.82),rgba(6,18,43,.72)); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); box-shadow:0 20px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08); transition:.45s cubic-bezier(.2,.8,.2,1); position:relative;overflow:hidden; } */ /* .custom-navbar:before{ content:"";position:absolute;top:0;left:-30%;width:25%;height:1px; background:linear-gradient(90deg,transparent,#7fc7ff,transparent); animation:navScan 5s linear infinite; } */ @keyframes navScan{to{left:130%}} /* .custom-navbar.scrolled{ background:rgba(3,13,32,.92); transform:translateY(-3px); box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08); } */ .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;position:relative;z-index:2} .brand-icon{ width:42px;height:42px;display:grid;place-items:center;font-size:25px;color:#10c4ed; filter:drop-shadow(0 0 10px rgba(16,196,237,.45));animation:logoFloat 4s ease-in-out infinite; } @keyframes logoFloat{50%{transform:translateY(-3px) rotate(-2deg)}} .brand-text{font-size:19px;font-weight:800;line-height:1;letter-spacing:-.6px} .brand-text span{display:block;font-size:8px;letter-spacing:1px;color:#10c4ed;margin-top:4px} .nav-link{ color:rgba(255,255,255,.68)!important;font-size:13px;font-weight:600; padding:12px 15px!important;transition:.3s;position:relative; } .nav-link:before{ content:"";position:absolute;left:50%;bottom:5px;width:0;height:2px; background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:10px; transform:translateX(-50%);transition:.3s; } .nav-link:hover,.nav-link.active{color:#fff!important} .nav-link:hover:before,.nav-link.active:before{width:18px} .btn-primary-custom,.btn-outline-custom{ border-radius:30px;padding:12px 22px;font-size:13px;font-weight:700;transition:.35s; position:relative;overflow:hidden; } .btn-primary-custom{ color:#fff;background:linear-gradient(135deg,#4a88ff,#2256d7); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 28px rgba(38,102,255,.35); } .btn-primary-custom:before,.btn-outline-custom:before{ content:"";position:absolute;top:-100%;left:-30%;width:25%;height:300%; background:rgba(255,255,255,.28);transform:rotate(25deg);transition:.6s; } .btn-primary-custom:hover:before,.btn-outline-custom:hover:before{left:120%} .btn-primary-custom:hover,.btn-outline-custom:hover{transform:translateY(-4px);color:#fff} .btn-outline-custom{ color:#fff;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.18); } .hero{ min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;padding:145px 0 80px; } .hero-glow{ position:absolute;width:760px;height:760px;left:50%;top:-120px;transform:translateX(-50%); border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,205,238,.22) 0%,rgba(35,107,255,.12) 30%,transparent 68%); filter:blur(8px);animation:heroGlow 7s ease-in-out infinite; } @keyframes heroGlow{ 0%,100%{transform:translateX(-50%) scale(.92);opacity:.65} 50%{transform:translateX(-50%) scale(1.13);opacity:1} } .hero:after{ content:"";position:absolute;left:-10%;right:-10%;bottom:-280px;height:620px;pointer-events:none; background: linear-gradient(rgba(42,119,195,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(42,119,195,.12) 1px,transparent 1px), radial-gradient(ellipse at center,rgba(0,136,205,.28),transparent 62%); background-size:55px 55px,55px 55px,100% 100%; transform:perspective(500px) rotateX(58deg); transform-origin:center top; mask-image:linear-gradient(to bottom,transparent,black 20%,black 75%,transparent); animation:gridDrift 12s linear infinite; } @keyframes gridDrift{to{background-position:0 55px,55px 0,0 0}} .hero-content{position:relative;z-index:5;animation:heroIn 1.1s cubic-bezier(.2,.8,.2,1) both} @keyframes heroIn{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:none}} .hero-title{ font-size:clamp(42px,5vw,67px);line-height:1.04;font-weight:500;letter-spacing:-3.5px;margin:0 0 18px; } .hero-title strong{font-weight:800} .software-word{ display:inline-block;position:relative;color:#57a0ff; text-shadow:0 0 25px rgba(63,139,255,.24); animation:wordGlow 3s ease-in-out infinite; } @keyframes wordGlow{50%{text-shadow:0 0 38px rgba(67,155,255,.48)}} .software-word:after{ content:"";position:absolute;left:-7px;right:-7px;bottom:-8px;height:17px; border-top:3px solid #6ebcff;border-radius:50%;transform:rotate(-2deg); filter:drop-shadow(0 0 6px #2788ff);animation:underline 2.4s ease-in-out infinite; } @keyframes underline{50%{transform:rotate(2deg) scaleX(.93)}} .hero-subtitle{font-size:27px;color:#dbe6f8;margin-bottom:28px;animation:fadeUp 1s .25s both} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp 1s .4s both} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .stats{display:flex;gap:68px;margin-top:36px;animation:fadeUp 1s .55s both} .stat{position:relative} .stat:after{ content:"";position:absolute;left:0;bottom:-12px;width:0;height:1px; background:linear-gradient(90deg,#4f95ff,transparent);transition:.5s; } .stat:hover:after{width:100%} .stat-number{font-size:28px;font-weight:800;color:#5a9aff;text-shadow:0 0 20px rgba(80,145,255,.22)} .stat-label{display:block;font-size:9px;letter-spacing:1px;color:#91a1bd;margin-top:4px;text-transform:uppercase} .expertise{ position:relative;z-index:5;padding:25px 10px 15px 42px; border-left:1px solid rgba(255,255,255,.08); animation:expertiseIn 1s .35s cubic-bezier(.2,.8,.2,1) both; } @keyframes expertiseIn{from{opacity:0;transform:translateX(55px)}to{opacity:1;transform:none}} .section-label{font-size:11px;letter-spacing:1.4px;color:#91a5c5;font-weight:700;margin-bottom:22px} .expertise-item{ position:relative;padding:11px 12px 11px 18px;margin-bottom:8px;border-radius:12px; transition:.4s;overflow:hidden; } .expertise-item:after{ content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:12px; background:linear-gradient(90deg,rgba(73,142,255,.12),transparent) padding-box; opacity:0;transition:.4s; } .expertise-item:hover{transform:translateX(8px);background:rgba(255,255,255,.035)} .expertise-item:hover:after{opacity:1} .expertise-item:before{ content:"";position:absolute;left:2px;top:20px;width:7px;height:7px;border-radius:50%; background:#4e91ed;box-shadow:0 0 0 0 rgba(78,145,237,.65);animation:dotPulse 2s infinite; } @keyframes dotPulse{70%{box-shadow:0 0 0 8px transparent}} .expertise-title{font-size:14px;font-weight:700;margin-bottom:4px} .expertise-description{font-size:12px;color:#8497b6;line-height:1.5} .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);margin:28px 0} .certifications{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .cert{ width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center; font-size:9px;font-weight:700;color:#91a3c1; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.1),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:.45s;animation:certFloat 5s ease-in-out infinite; } .cert:nth-child(2){animation-delay:.5s}.cert:nth-child(3){animation-delay:1s}.cert:nth-child(4){animation-delay:1.5s}.cert:nth-child(5){animation-delay:2s} @keyframes certFloat{50%{transform:translateY(-6px)}} .cert:hover{transform:translateY(-10px) scale(1.08) rotate(5deg);color:#fff;border-color:#4c8dff;box-shadow:0 0 28px rgba(55,123,255,.2)} .particle{ position:absolute;width:2px;height:2px;border-radius:50%;background:#69b9ff;opacity:.6; box-shadow:0 0 8px #45a8e9;animation:particleRise linear infinite;z-index:1; } @keyframes particleRise{ 0%{transform:translate3d(0,105vh,0) scale(.3);opacity:0} 15%{opacity:.65}85%{opacity:.35} 100%{transform:translate3d(var(--drift),-100px,0) scale(1.5);opacity:0} } .orb{ position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(1px); background:radial-gradient(circle,rgba(53,145,255,.22),transparent 68%); animation:orbFloat 10s ease-in-out infinite; } .orb.one{width:300px;height:300px;left:-120px;top:25%} .orb.two{width:240px;height:240px;right:-80px;top:15%;animation-delay:2s} .orb.three{width:190px;height:190px;right:25%;bottom:3%;animation-delay:4s} @keyframes orbFloat{50%{transform:translate(25px,-35px) scale(1.12)}} .scroll-indicator{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:26px;height:42px; border:1px solid rgba(255,255,255,.25);border-radius:20px;z-index:8; } .scroll-indicator:before{ content:"";position:absolute;width:4px;height:7px;border-radius:5px;background:#fff;left:50%;top:7px; transform:translateX(-50%);animation:scrollDot 1.6s infinite;box-shadow:0 0 8px #fff; } @keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,18px)}} .floating-actions{position:fixed;right:18px;bottom:20px;z-index:999} .float-btn{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff; text-decoration:none;margin-top:11px;border:4px solid rgba(5,19,45,.85); box-shadow:0 12px 35px rgba(0,0,0,.4);transition:.35s;position:relative; } .float-btn:before{ content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(74,139,255,.35); animation:floatRing 2.5s infinite; } @keyframes floatRing{to{transform:scale(1.35);opacity:0}} .float-btn:hover{transform:scale(1.12) translateY(-3px);color:#fff} .help-btn{background:linear-gradient(135deg,#3777ff,#1747b9)} .whatsapp-btn{background:#18c96b} .dummy-section{ min-height:600px;padding:120px 0;background: radial-gradient(circle at 50% 0,rgba(31,102,255,.13),transparent 35%),#06142c; } .reveal{opacity:0;transform:translateY(35px);transition:1s cubic-bezier(.2,.8,.2,1)} .reveal.visible{opacity:1;transform:none} /* @media(max-width:991px){ .custom-navbar{border-radius:22px}.navbar-collapse{margin-top:12px;padding:12px;background:rgba(3,15,38,.96);border-radius:16px} .hero{padding-top:140px}.expertise{margin-top:65px;padding-left:0;border-left:0} } */ @media(max-width:575px){ .hero{padding:125px 18px 95px;min-height:auto}.hero-title{font-size:41px;letter-spacing:-2.2px} .hero-subtitle{font-size:22px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;text-align:center} .stats{gap:15px;justify-content:space-between}.stat-number{font-size:22px}.stat-label{font-size:7.5px} .cert{width:52px;height:52px;font-size:8px}.floating-actions{right:10px;bottom:12px}.float-btn{width:52px;height:52px} } @media(prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} } /* ========================================================= NAVBAR ROOT ========================================================= */ :root { --nav-blue: #2868ed; --nav-cyan: #08b9e8; --nav-dark: #071329; --nav-dark-2: #101c38; --nav-text: #e9effa; --nav-muted: #9ba9bd; } /* ========================================================= NAVBAR WRAPPER ========================================================= */ .navbar-wrapper { position: fixed; top: 14px; left: 0; right: 0; z-index: 99999; pointer-events: none; } /* ========================================================= MAIN NAVBAR ========================================================= */ .custom-navbar { position: relative; width: calc(100% - 30px); max-width: 1250px; margin: 0 auto; pointer-events: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 50px; background: linear-gradient( 135deg, rgba(22,43,82,.90), rgba(5,16,39,.91) ); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 65px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, box-shadow .45s ease, border-color .45s ease; } /* ========================================================= SCROLLED NAVBAR ========================================================= */ .custom-navbar.scrolled { transform: translateY(-3px); background: linear-gradient( 135deg, rgba(6,18,40,.96), rgba(3,12,29,.96) ); border-color: rgba(255,255,255,.18); box-shadow: 0 22px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08); } /* ========================================================= TOP SCAN LINE ========================================================= */ .custom-navbar::before { content: ""; position: absolute; top: 0; left: -30%; width: 25%; height: 1px; background: linear-gradient( 90deg, transparent, #72c8ff, transparent ); animation: navScan 5s linear infinite; pointer-events: none; } @keyframes navScan { from { left: -30%; } to { left: 130%; } } /* ========================================================= INNER ========================================================= */ .navbar-inner { min-height: 64px; padding: 8px 12px; display: flex; align-items: center; } /* ========================================================= BRAND ========================================================= */ .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: #fff; } .brand:hover { color: #fff; } .brand-icon { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; color: var(--nav-cyan); font-size: 25px; transition: transform .4s ease; } .brand:hover .brand-icon { transform: rotate(-7deg) scale(1.08); } .brand-text { color: #168bd5; font-size: 20px; line-height: .9; font-weight: 800; letter-spacing: -.7px; } .brand-text span { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .5px; color: #079adf; } /* ========================================================= DESKTOP NAVIGATION ========================================================= */ .desktop-navigation { flex: 1; display: flex; justify-content: center; margin-left: 30px; } .main-nav-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; } .nav-item-custom { position: relative; } .nav-link-custom { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; border: 0; border-radius: 22px; background: transparent; color: #aab5c6; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .3s ease, background .3s ease, transform .3s ease; } .nav-link-custom:hover { color: #fff; background: rgba(255,255,255,.055); } .nav-link-custom.active { color: #fff; } .nav-link-custom.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #2f83ff; transform: translateX(-50%); box-shadow: 0 0 8px rgba(47,131,255,.9); } /* ========================================================= WHAT WE DO ARROW ========================================================= */ .services-toggle i { font-size: 9px; transition: transform .35s ease; } .services-dropdown.open .services-toggle i { transform: rotate(180deg); } .services-dropdown.open .services-toggle { color: #fff; background: rgba(255,255,255,.065); } /* ========================================================= DESKTOP DROPDOWN ========================================================= */ .services-dropdown-panel { position: absolute; top: calc(100% + 10px); left: 50%; width: 278px; padding: 9px; border-radius: 21px; border: 1px solid rgba(107,151,220,.22); background: linear-gradient( 145deg, rgba(15,28,57,.98), rgba(5,15,35,.98) ); box-shadow: 0 25px 55px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.97); transform-origin: top center; transition: opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); } /* little arrow */ .services-dropdown-panel::before { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; background: #101d39; border-left: 1px solid rgba(107,151,220,.22); border-top: 1px solid rgba(107,151,220,.22); transform: translateX(-50%) rotate(45deg); } .services-dropdown.open .services-dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } /* ========================================================= DROPDOWN ITEM ========================================================= */ .service-dropdown-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 9px; border-radius: 13px; color: #fff; transition: background .3s ease, transform .3s ease; } .service-dropdown-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(3px); } /* ========================================================= DROPDOWN ICON ========================================================= */ .service-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; font-size: 15px; } .innovation-icon { color: #ffc928; background: rgba(255,195,30,.10); } .creation-icon { color: #1edca5; background: rgba(30,220,165,.10); } .service-content { flex: 1; min-width: 0; } .service-content strong { display: block; color: #f0f4fb; font-size: 12px; font-weight: 700; } .service-content small { display: block; margin-top: 3px; color: #687792; font-size: 10px; } .service-arrow { color: #56647b; font-size: 12px; transition: transform .3s ease, color .3s ease; } .service-dropdown-item:hover .service-arrow { color: #4d9aff; transform: translateX(4px); } /* ========================================================= SEE ALL SERVICES ========================================================= */ .services-view-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding: 11px 12px; border-radius: 13px; color: #74a8e8; font-size: 10px; font-weight: 600; border: 1px solid rgba(48,115,220,.35); background: rgba(22,72,150,.20); transition: background .3s ease, border-color .3s ease, transform .3s ease; } .services-view-all:hover { color: #fff; border-color: rgba(55,130,245,.65); background: rgba(35,103,215,.25); transform: translateY(-2px); } .services-view-all span:first-child { display: flex; align-items: center; gap: 7px; } .services-view-all span:last-child { display: flex; align-items: center; gap: 4px; color: #62a2ff; } /* ========================================================= NAV BUTTONS ========================================================= */ .navbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-btn { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 22px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .nav-btn-outline { color: #c6d0df; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); } .nav-btn-outline:hover { color: #fff; transform: translateY(-2px); background: rgba(255,255,255,.08); } .nav-btn-primary { color: #fff; background: linear-gradient( 135deg, #3276ed, #1e5fe1 ); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(37,104,238,.30); } .nav-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 13px 32px rgba(37,104,238,.42); } .nav-btn-primary i { transition: transform .3s ease; } .nav-btn-primary:hover i { transform: translateX(4px); } /* ========================================================= MOBILE BUTTON ========================================================= */ .mobile-menu-button { display: none; width: 42px; height: 42px; margin-left: auto; border: 0; border-radius: 13px; background: rgba(255,255,255,.06); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; } .mobile-menu-button span { display: block; width: 19px; height: 2px; border-radius: 5px; background: #fff; transition: transform .35s ease, opacity .25s ease; } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(2) { opacity: 0; } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= MOBILE MENU ========================================================= */ .mobile-menu { display: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .desktop-navigation { margin-left: 10px; } .nav-link-custom { padding: 9px 9px; font-size: 11px; } .brand-text { font-size: 17px; } .nav-btn { padding: 0 13px; } } @media (max-width: 991px) { .navbar-wrapper { top: 10px; } .custom-navbar { width: calc(100% - 20px); border-radius: 22px; } .navbar-inner { min-height: 52px; padding: 7px 9px; } .desktop-navigation, .desktop-actions { display: none; } .mobile-menu-button { display: flex; } /* ===================================================== MOBILE MENU PANEL ====================================================== */ .mobile-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: block; max-height: calc(100vh - 90px); overflow-y: auto; padding: 8px 10px 10px; border-radius: 21px; border: 1px solid rgba(93,129,192,.30); background: linear-gradient( 145deg, rgba(13,25,53,.99), rgba(5,14,33,.99) ); box-shadow: 0 25px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.98); transform-origin: top center; transition: opacity .3s ease, visibility .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); } .custom-navbar.mobile-open .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* ===================================================== MOBILE TOP ====================================================== */ .mobile-menu-top { display: flex; align-items: center; justify-content: space-between; padding: 7px 7px 13px; border-bottom: 1px solid rgba(255,255,255,.07); } .mobile-brand { display: flex; align-items: center; gap: 8px; color: #fff; } .mobile-brand:hover { color: #fff; } .mobile-brand-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #09a9e8; font-size: 21px; } .mobile-brand strong { display: block; color: #148bd2; font-size: 13px; line-height: 1; } .mobile-brand small { display: block; margin-top: 3px; color: #078ed1; font-size: 6px; letter-spacing: .4px; } .mobile-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #d5deeb; background: rgba(255,255,255,.05); font-size: 15px; } /* ===================================================== MOBILE NAV ====================================================== */ .mobile-nav { padding: 8px 2px; } .mobile-nav-link { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #bac5d6; font-size: 12px; font-weight: 500; text-align: left; transition: color .25s ease, background .25s ease, transform .25s ease; } .mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,.055); } .mobile-nav-link.active { color: #fff; background: rgba(91,117,177,.18); } /* ===================================================== MOBILE SERVICES ====================================================== */ .mobile-services-toggle i { font-size: 10px; transition: transform .3s ease; } .mobile-services.open .mobile-services-toggle { color: #fff; background: rgba(255,255,255,.055); } .mobile-services.open .mobile-services-toggle i { transform: rotate(180deg); } /* ===================================================== MOBILE SUBMENU ====================================================== */ .mobile-services-submenu { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; } .mobile-services-submenu > * { min-height: 0; overflow: hidden; } .mobile-services.open .mobile-services-submenu { grid-template-rows: 1fr; opacity: 1; } .mobile-service-item { display: flex; align-items: center; gap: 11px; padding: 9px 17px; color: #fff; transition: background .25s ease, transform .25s ease; } .mobile-service-item:hover { color: #fff; background: rgba(255,255,255,.035); transform: translateX(3px); } .mobile-service-icon { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 9px; flex-shrink: 0; font-size: 13px; } .mobile-service-item strong { display: block; font-size: 10px; color: #eef3fa; } .mobile-service-item small { display: block; margin-top: 2px; color: #687792; font-size: 8px; } .mobile-see-all { display: flex; align-items: center; justify-content: space-between; margin: 5px 8px 7px; padding: 9px 11px; border-radius: 11px; color: #77a9ea; background: rgba(28,91,184,.17); border: 1px solid rgba(53,120,226,.30); font-size: 9px; } .mobile-see-all span { display: flex; align-items: center; gap: 6px; } /* ===================================================== MOBILE ACTIONS ====================================================== */ .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 2px 2px; border-top: 1px solid rgba(255,255,255,.07); } .mobile-action-outline, .mobile-action-primary { height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 19px; font-size: 10px; font-weight: 700; transition: transform .3s ease, box-shadow .3s ease; } .mobile-action-outline { color: #b8c5d8; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); } .mobile-action-primary { color: #fff; background: linear-gradient( 135deg, #3276ed, #1d5de0 ); box-shadow: 0 8px 25px rgba(38,105,235,.32); } .mobile-action-outline:hover, .mobile-action-primary:hover { color: #fff; transform: translateY(-2px); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .navbar-wrapper { top: 8px; } .custom-navbar { width: calc(100% - 16px); } .brand-text { font-size: 16px; } .brand-text span { font-size: 6px; } .brand-icon { font-size: 23px; } .mobile-menu { max-height: calc(100vh - 75px); } } /* ========================================================= SOLUTIONS SECTION ========================================================= */ .solutions-section { position: relative; padding: 130px 0 120px; overflow: hidden; background: radial-gradient( circle at 50% 20%, rgba(53,117,255,.10), transparent 38% ), linear-gradient( 180deg, #ffffff 0%, #f8fbff 100% ); color: #14213d; } /* ========================================================= BACKGROUND GRID ========================================================= */ /* .solutions-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient( rgba(45,107,220,.20) 1.2px, transparent 1.2px ); background-size: 16px 16px; mask-image: linear-gradient( to bottom, black, transparent 70% ); animation: gridMove 20s linear infinite; } */ @keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 160px; } } /* ========================================================= BACKGROUND ORBS ========================================================= */ .solutions-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); background: radial-gradient( circle, rgba(62,136,255,.16), transparent 70% ); animation: solutionOrb 10s ease-in-out infinite; } .solutions-orb-1 { width: 400px; height: 400px; left: -180px; top: 20%; } .solutions-orb-2 { width: 350px; height: 350px; right: -160px; bottom: 5%; animation-delay: 3s; } @keyframes solutionOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(35px,-30px,0) scale(1.12); } } /* ========================================================= HEADING ========================================================= */ .solutions-heading { max-width: 800px; margin: 0 auto 65px; position: relative; z-index: 3; } .section-eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; color: #5173a7; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 15px; } .section-eyebrow span { width: 25px; height: 1px; background: linear-gradient( 90deg, transparent, #4786ed ); } .section-eyebrow span:last-child { background: linear-gradient( 90deg, #4786ed, transparent ); } .solutions-heading h2 { margin: 0; font-size: clamp( 38px, 5vw, 58px ); line-height: 1.05; font-weight: 800; letter-spacing: -2.5px; color: #16223b; } .solutions-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .solutions-heading p { max-width: 610px; margin: 18px auto 0; color: #71809a; font-size: 15px; line-height: 1.7; } /* ========================================================= CARD ========================================================= */ .solution-card { position: relative; height: 100%; min-height: 475px; overflow: hidden; border-radius: 18px; background: linear-gradient( 145deg, rgba(224,239,255,.92), rgba(207,227,250,.86) ); border: 1px solid rgba(61,130,222,.16); box-shadow: 0 15px 35px rgba(38,79,130,.08); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease; will-change: transform; } .solution-card:hover { box-shadow: 0 30px 70px rgba(27,77,143,.18); border-color: rgba(53,119,232,.35); } /* ========================================================= CARD GLOW ========================================================= */ .card-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; left: var(--mouse-x,50%); top: var(--mouse-y,50%); transform: translate(-50%,-50%); background: radial-gradient( circle, rgba(67,137,255,.24), transparent 70% ); filter: blur(25px); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .solution-card:hover .card-glow { opacity: 1; } /* ========================================================= IMAGE ========================================================= */ .solution-image { height: 155px; margin: 28px 28px 0; border-radius: 14px; overflow: hidden; position: relative; transform: translateZ(20px); } .solution-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .solution-card:hover .solution-image img { transform: scale(1.1); } .image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 35%, rgba(7,28,61,.55) ); opacity: .55; } /* ========================================================= NUMBER ========================================================= */ .service-number { position: absolute; right: 12px; top: 12px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: rgba(4,23,53,.72); color: white; font-size: 10px; font-weight: 800; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); } /* ========================================================= CONTENT ========================================================= */ .solution-content { padding: 22px 28px 28px; position: relative; z-index: 2; transform: translateZ(30px); } .solution-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 15px; color: #2467e9; background: rgba(255,255,255,.55); border: 1px solid rgba(61,125,221,.12); font-size: 18px; transition: .4s ease; } .solution-card:hover .solution-icon { transform: translateY(-4px) rotate(-5deg); background: #ffffff; box-shadow: 0 10px 25px rgba(35,103,220,.13); } .solution-content h3 { font-size: 19px; font-weight: 800; margin-bottom: 12px; color: #1b2a43; } .solution-content p { font-size: 13px; line-height: 1.65; color: #586b87; margin-bottom: 22px; } /* ========================================================= LINK ========================================================= */ .solution-link { display: inline-flex; align-items: center; gap: 8px; color: #2865e5; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; transition: .35s ease; } .solution-link i { font-size: 14px; transition: transform .35s ease; } .solution-link:hover { color: #0c9ed3; } .solution-link:hover i { transform: translateX(6px); } /* ========================================================= CARD BOTTOM LIGHT ========================================================= */ .card-line { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, #3d81ef, #08b9e8, transparent ); transform: scaleX(0); transform-origin: center; transition: transform .5s ease; } .solution-card:hover .card-line { transform: scaleX(1); } /* ========================================================= CTA ========================================================= */ .solutions-cta { margin-top: 65px; padding: 24px 28px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: linear-gradient( 120deg, rgba(226,239,255,.8), rgba(244,249,255,.9) ); border: 1px solid rgba(60,126,220,.14); box-shadow: 0 15px 45px rgba(40,90,150,.08); } .solutions-cta span { display: block; font-size: 10px; letter-spacing: 1.5px; color: #7184a0; font-weight: 800; margin-bottom: 5px; } .solutions-cta strong { font-size: 17px; color: #1d2b44; } /* ========================================================= REVEAL ANIMATIONS ========================================================= */ .reveal-up { opacity: 0; transform: translateY(50px); } .reveal-card { opacity: 0; transform: translateY(80px) scale(.94); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:991px){ .solutions-section { padding: 100px 0; } .solutions-heading { margin-bottom:45px; } .solutions-cta { flex-direction:column; align-items:flex-start; } } @media(max-width:575px){ .solutions-section { padding: 80px 18px; } .solutions-heading h2 { font-size:39px; letter-spacing:-1.8px; } .solutions-heading p { font-size:13px; } .solution-card { min-height:440px; } .solution-image { margin: 20px 20px 0; } .solution-content { padding: 20px; } } /* ========================================================= SERVICES DOT BACKGROUND LIGHTWEIGHT + RESPONSIVE ========================================================= */ .solutions-section { position: relative; overflow: hidden; isolation: isolate; background: #fff; } /* ========================================================= DOT BACKGROUND ========================================================= */ .dot-background { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none; /* Normal grey dots */ background-image: radial-gradient( circle, rgba(185, 190, 198, .85) 2px, transparent 2.6px ); background-size: 15px 15px; background-position: center; opacity: 1; } /* ========================================================= BLUE MOUSE DOT LAYER ========================================================= */ .dot-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Same dots but blue */ background-image: radial-gradient( circle, rgba(17, 145, 241, 1) 2px, transparent 2.7px ); background-size: 15px 15px; background-position: center; /* Reveal blue dots around mouse */ -webkit-mask-image: radial-gradient( circle 125px at var(--mouse-x, -500px) var(--mouse-y, -500px), #000 0%, #000 18%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 65%, transparent 100% ); mask-image: radial-gradient( circle 125px at var(--mouse-x, -500px) var(--mouse-y, -500px), #000 0%, #000 18%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 65%, transparent 100% ); } /* ========================================================= SOFT BLUE ATMOSPHERE ========================================================= */ .dot-background::before { content: ""; position: absolute; width: 280px; height: 280px; left: var(--mouse-x, -500px); top: var(--mouse-y, -500px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(30,145,255,.14) 0%, rgba(30,145,255,.07) 30%, rgba(30,145,255,.025) 55%, transparent 72% ); opacity: var(--mouse-opacity, 0); transition: opacity .3s ease; } /* ========================================================= CONTENT ABOVE DOTS ========================================================= */ .solutions-section > .container { position: relative; z-index: 5; } /* ========================================================= DOT FADE ONLY AT EDGES ========================================================= */ .dot-background { -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 8%, black 92%, transparent 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .dot-background { height: 130px; background-size: 14px 14px; } .dot-background::after { background-size: 14px 14px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .dot-background { height: 105px; background-size: 13px 13px; } .dot-background::after { background-size: 13px 13px; } } /* ========================================================= PREMIUM INTERACTIVE DOT BACKGROUND ========================================================= */ .solutions-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient( 180deg, #ffffff 0%, #fbfdff 70%, #ffffff 100% ); } /* ========================================================= DOT AREA ========================================================= */ .dot-background { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 0; pointer-events: none; /* ALWAYS VISIBLE GREY DOTS */ background-image: radial-gradient( circle, rgba(175, 181, 191, .70) 2px, transparent 2.5px ); background-size: 15px 15px; background-position: center center; opacity: 1; } /* ========================================================= BLUE MOUSE DOTS ========================================================= */ .dot-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( circle, #1597f2 2px, transparent 2.6px ); background-size: 15px 15px; background-position: center center; /* Blue reveal around mouse */ -webkit-mask-image: radial-gradient( circle 145px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, black 22%, rgba(0,0,0,.90) 38%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.25) 68%, transparent 100% ); mask-image: radial-gradient( circle 145px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, black 22%, rgba(0,0,0,.90) 38%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.25) 68%, transparent 100% ); } /* ========================================================= SOFT BLUE MOUSE GLOW ========================================================= */ .dot-background::before { content: ""; position: absolute; width: 300px; height: 300px; left: var(--mouse-x, -500px); top: var(--mouse-y, -500px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(38, 145, 255, .13) 0%, rgba(38, 145, 255, .07) 28%, rgba(38, 145, 255, .025) 52%, transparent 72% ); opacity: var(--mouse-opacity, 0); transition: opacity .25s ease; } /* ========================================================= CONTENT ABOVE DOTS ========================================================= */ .solutions-section > .container { position: relative; z-index: 5; } /* ========================================================= FADE TOP + BOTTOM ========================================================= */ .dot-background { -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .dot-background { height: 140px; background-size: 14px 14px; } .dot-background::after { background-size: 14px 14px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .dot-background { height: 110px; background-size: 13px 13px; } .dot-background::after { background-size: 13px 13px; } } /* ========================================================= WHY CHOOSE US ========================================================= */ .why-section { position: relative; overflow: hidden; padding: 125px 0 180px; background: linear-gradient( 180deg, #f8fbff 0%, #f3f7fb 100% ); color: #17243b; isolation: isolate; } /* ========================================================= SOFT BACKGROUND GLOW ========================================================= */ .why-bg-glow { position: absolute; width: 650px; height: 650px; left: -280px; top: 5%; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(58, 130, 246, .075), transparent 68% ); z-index: -1; } /* ========================================================= CONTENT ========================================================= */ .why-content { max-width: 650px; } .why-eyebrow { display: inline-flex; align-items: center; margin-bottom: 17px; color: #1266ed; font-size: 13px; font-weight: 800; letter-spacing: 1.7px; } .why-eyebrow::before { content: ""; width: 30px; height: 2px; margin-right: 10px; border-radius: 10px; background: linear-gradient( 90deg, #1266ed, #21b7ec ); } .why-title { max-width: 620px; margin: 0 0 20px; font-size: clamp( 40px, 4.2vw, 56px ); line-height: 1.04; font-weight: 800; letter-spacing: -2.7px; color: #202b3d; } .why-title span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .why-description { max-width: 620px; margin: 0 0 28px; color: #65758e; font-size: 16px; line-height: 1.7; } /* ========================================================= FEATURES GRID ========================================================= */ .why-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; } .why-feature { display: flex; align-items: flex-start; gap: 14px; padding: 3px 0; } .why-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #1769ef; background: linear-gradient( 145deg, #e5f0ff, #d7e7fb ); border: 1px solid rgba(55, 120, 220, .10); box-shadow: 0 8px 20px rgba(35, 100, 200, .07); } .why-icon i { font-size: 20px; } .why-feature h4 { margin: 2px 0 5px; font-size: 15px; font-weight: 700; color: #263246; } .why-feature p { max-width: 220px; margin: 0; font-size: 13px; line-height: 1.6; color: #687992; } /* ========================================================= IMAGE ========================================================= */ .why-visual { position: relative; display: flex; justify-content: center; } .why-image-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / .88; overflow: hidden; border-radius: 22px; background: #dbe7f5; box-shadow: 0 28px 65px rgba(35, 65, 105, .16); } .why-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .why-image-wrap:hover img { transform: scale(1.035); } /* ========================================================= IMAGE OVERLAY ========================================================= */ .why-image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba(8, 25, 52, .40) ); pointer-events: none; } /* ========================================================= EXPERIENCE BADGE ========================================================= */ .experience-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); } .experience-badge strong { font-size: 56px; line-height: .95; font-weight: 800; letter-spacing: -2px; } .experience-badge span { margin-top: 7px; font-size: 17px; font-weight: 500; letter-spacing: .3px; } /* ========================================================= BOTTOM DOTS ========================================================= */ .why-bottom-dots { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; pointer-events: none; background-image: radial-gradient( circle, rgba(177, 184, 194, .70) 2px, transparent 2.5px ); background-size: 15px 15px; background-position: center; -webkit-mask-image: linear-gradient( to bottom, transparent, black 25%, black 100% ); mask-image: linear-gradient( to bottom, transparent, black 25%, black 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .why-section { padding: 100px 0 150px; } .why-content { max-width: 100%; } .why-title { max-width: 700px; } .why-description { max-width: 700px; } .why-feature p { max-width: 300px; } .why-visual { margin-top: 25px; } .why-image-wrap { max-width: 650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .why-section { padding: 75px 18px 125px; } .why-eyebrow { font-size: 11px; letter-spacing: 1.4px; } .why-title { font-size: 39px; line-height: 1.06; letter-spacing: -2px; margin-bottom: 18px; } .why-description { font-size: 14px; line-height: 1.7; margin-bottom: 30px; } .why-features { grid-template-columns: 1fr; gap: 20px; } .why-feature { gap: 13px; } .why-feature p { max-width: none; } .why-image-wrap { aspect-ratio: 1 / 1; border-radius: 18px; } .experience-badge strong { font-size: 48px; } .experience-badge span { font-size: 15px; } .why-bottom-dots { height: 85px; background-size: 13px 13px; } } /* ========================================================= OUR CLIENTS ========================================================= */ .clients-section { position: relative; overflow: hidden; padding: 80px 0 95px; background: #ffffff; color: #18243a; } /* ========================================================= HEADING ========================================================= */ .clients-heading { text-align: center; margin-bottom: 42px; } .clients-eyebrow { color: #1268ed; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; } .clients-heading h2 { margin: 0; font-size: clamp(40px, 4vw, 52px); font-weight: 800; letter-spacing: -2.5px; } .clients-heading h2 span { background: linear-gradient( 90deg, #2868ed, #08aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================= CLIENT MARQUEE ========================================================= */ /* ========================================================= CLIENT LOGO SLIDER ========================================================= */ .clients-marquee { position: relative; width: 100%; overflow: hidden; } /* left + right fade */ .clients-marquee::before, .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 180px; z-index: 5; pointer-events: none; } .clients-marquee::before { left: 0; background: linear-gradient( 90deg, #ffffff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } .clients-marquee::after { right: 0; background: linear-gradient( 270deg, #ffffff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } /* ========================================================= MOVING TRACK ========================================================= */ .clients-track { display: flex; align-items: center; width: max-content; gap: 65px; will-change: transform; } /* pause */ .clients-marquee:hover .clients-track { animation-play-state: paused; } /* seamless movement */ @keyframes clientLogoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================= EACH LOGO ========================================================= */ .client-logo { flex: 0 0 150px; width: 150px; height: 105px; display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; transition: transform .35s ease; } .client-logo img { display: block; max-width: 140px; max-height: 85px; width: auto; height: auto; object-fit: contain; opacity: .9; filter: grayscale(10%); transition: transform .4s ease, opacity .4s ease, filter .4s ease; } /* hover logo */ .client-logo:hover { transform: translateY(-5px); } .client-logo:hover img { transform: scale(1.12); opacity: 1; filter: grayscale(0%); } /* Bangabasi text logo */ .client-text { flex: 0 0 170px; width: 170px; font-size: 16px; font-weight: 700; color: #39465b; white-space: nowrap; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .clients-track { gap: 30px; animation-duration: 24s; } .client-logo { flex-basis: 115px; width: 115px; height: 80px; } .client-logo img { max-width: 105px; max-height: 65px; } .client-text { flex-basis: 130px; width: 130px; font-size: 13px; } .clients-marquee::before, .clients-marquee::after { width: 70px; } } /* ========================================================= CLIENT LOGO ========================================================= */ .client-logo { flex: 0 0 145px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 10px; } .client-logo img { max-width: 135px; max-height: 82px; width: auto; height: auto; object-fit: contain; filter: grayscale(15%); opacity: .92; transition: transform .4s ease, filter .4s ease, opacity .4s ease; } .client-logo:hover img { transform: scale(1.12); filter: grayscale(0%); opacity: 1; } .client-text { font-size: 15px; font-weight: 700; color: #3b4556; white-space: nowrap; } /* ========================================================= DOTS ========================================================= */ .clients-dots { position: absolute; left: 0; right: 0; height: 75px; pointer-events: none; background-image: radial-gradient( circle, rgba(180,185,194,.65) 2px, transparent 2.5px ); background-size: 15px 15px; } .clients-dots-top { top: 0; -webkit-mask-image: linear-gradient( to bottom, black, transparent ); mask-image: linear-gradient( to bottom, black, transparent ); } .clients-dots-bottom { bottom: 0; -webkit-mask-image: linear-gradient( to top, black, transparent ); mask-image: linear-gradient( to top, black, transparent ); } /* ========================================================= INDUSTRY / TESTIMONIAL SECTION ========================================================= */ .industry-section { position: relative; overflow: hidden; padding: 110px 0 125px; background: linear-gradient( 180deg, #f4f8fd, #edf4fc ); color: #17243a; isolation: isolate; } /* ========================================================= TECH GRID ========================================================= */ .industry-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: linear-gradient( rgba(67,125,210,.10) 1px, transparent 1px ), linear-gradient( 90deg, rgba(67,125,210,.10) 1px, transparent 1px ); background-size: 108px 108px; mask-image: linear-gradient( to bottom, black, transparent 85% ); -webkit-mask-image: linear-gradient( to bottom, black, transparent 85% ); } /* ========================================================= GLOWS ========================================================= */ .industry-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(3px); } .industry-glow-1 { width: 450px; height: 450px; left: -260px; top: 15%; background: radial-gradient( circle, rgba(43,124,246,.10), transparent 70% ); } .industry-glow-2 { width: 400px; height: 400px; right: -230px; bottom: 0; background: radial-gradient( circle, rgba(10,174,225,.09), transparent 70% ); } /* ========================================================= HEADING ========================================================= */ .industry-heading { position: relative; z-index: 3; margin-bottom: 50px; } .industry-eyebrow { color: #216de8; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 14px; } .industry-heading h2 { margin: 0; font-size: clamp(38px, 4.5vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -2.5px; } .industry-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .industry-heading > p { margin: 16px auto 20px; max-width: 550px; color: #6d7d94; font-size: 15px; } /* ========================================================= DRAG HINT ========================================================= */ .drag-hint { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 30px; background: rgba(255,255,255,.75); border: 1px solid rgba(61,120,210,.10); box-shadow: 0 8px 25px rgba(45,90,150,.06); color: #687b96; font-size: 13px; } .drag-hint i { color: #2772ed; animation: dragIcon 1.8s ease-in-out infinite; } @keyframes dragIcon { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* ========================================================= PREMIUM TESTIMONIAL CAROUSEL ========================================================= */ .industry-section { position: relative; overflow: hidden; padding: 115px 0 120px; background: radial-gradient( circle at 50% 20%, rgba(70,140,255,.10), transparent 35% ), linear-gradient( 180deg, #f5f9ff 0%, #edf4fc 100% ); } /* ========================================================= BACKGROUND GRID ========================================================= */ .industry-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(67,125,210,.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(67,125,210,.09) 1px, transparent 1px ); background-size: 108px 108px; mask-image: linear-gradient( to bottom, black, transparent 90% ); -webkit-mask-image: linear-gradient( to bottom, black, transparent 90% ); } /* ========================================================= SOFT GLOWS ========================================================= */ .industry-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .industry-glow-1 { width: 500px; height: 500px; left: -280px; top: 20%; background: radial-gradient( circle, rgba(43,124,246,.11), transparent 70% ); } .industry-glow-2 { width: 450px; height: 450px; right: -250px; bottom: 0; background: radial-gradient( circle, rgba(10,174,225,.10), transparent 70% ); } /* ========================================================= HEADING ========================================================= */ .industry-heading { position: relative; z-index: 5; text-align: center; margin-bottom: 55px; } .industry-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #216de8; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; margin-bottom: 14px; } .industry-heading h2 { margin: 0; font-size: clamp(40px, 4.5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -2.8px; color: #17243a; } .industry-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .industry-heading h2 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 10px; background: linear-gradient( 90deg, #2868ed, #09aee4 ); opacity: .25; } .industry-heading > p { margin: 18px auto 22px; max-width: 560px; color: #6d7d94; font-size: 15px; line-height: 1.7; } /* ========================================================= DRAG HINT ========================================================= */ .drag-hint { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 30px; background: rgba(255,255,255,.82); border: 1px solid rgba(61,120,210,.12); box-shadow: 0 10px 30px rgba(45,90,150,.07); color: #687b96; font-size: 12px; backdrop-filter: blur(10px); } .drag-hint i { color: #2772ed; animation: dragIcon 1.8s ease-in-out infinite; } @keyframes dragIcon { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(5px); } } /* ========================================================= VIEWPORT ========================================================= */ .testimonial-viewport { position: relative; z-index: 4; width: 100%; overflow: hidden; cursor: grab; padding: 35px 0 45px; touch-action: pan-y; user-select: none; } .testimonial-viewport:active { cursor: grabbing; } /* ========================================================= TRACK ========================================================= */ .testimonial-track { display: flex; align-items: stretch; gap: 25px; width: max-content; padding: 10px 0 30px; will-change: transform; } /* ========================================================= CARD ========================================================= */ .testimonial-card { position: relative; flex: 0 0 390px; min-height: 305px; padding: 30px; border-radius: 24px; background: rgba(255,255,255,.88); border: 1px solid rgba(67,120,205,.13); box-shadow: 0 18px 50px rgba(35,75,125,.09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: scale(.94) translateY(12px); opacity: .72; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s ease, box-shadow .65s ease, border-color .65s ease; overflow: hidden; } /* ========================================================= CARD GLOW ========================================================= */ .testimonial-card::before { content: ""; position: absolute; width: 180px; height: 180px; top: -100px; right: -80px; border-radius: 50%; background: radial-gradient( circle, rgba(48,125,255,.14), transparent 70% ); pointer-events: none; } /* bottom blue line */ .testimonial-card::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 3px; border-radius: 10px 10px 0 0; background: linear-gradient( 90deg, #2868ed, #09aee4 ); transform: scaleX(0); transform-origin: center; transition: transform .6s ease; } /* ========================================================= ACTIVE CARD ========================================================= */ .testimonial-card.active { transform: scale(1) translateY(-8px); opacity: 1; border-color: rgba(42,113,230,.28); box-shadow: 0 30px 75px rgba(36,87,157,.17); z-index: 3; } .testimonial-card.active::after { transform: scaleX(1); } /* ========================================================= FEATURED ========================================================= */ .testimonial-card.featured { background: linear-gradient( 145deg, #ffffff, #eef6ff ); } /* ========================================================= TOP AREA ========================================================= */ .testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; } /* ========================================================= QUOTE ICON ========================================================= */ .quote-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #2673ed; background: linear-gradient( 145deg, #e8f1ff, #dcecff ); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .quote-icon i { font-size: 24px; } /* ========================================================= STARS ========================================================= */ .testimonial-stars { color: #f5b63b; font-size: 13px; letter-spacing: 2px; text-shadow: 0 3px 10px rgba(245,182,59,.22); } /* ========================================================= REVIEW TEXT ========================================================= */ .testimonial-text { margin: 0; min-height: 110px; color: #53647d; font-size: 15px; line-height: 1.8; position: relative; } .testimonial-text::before { content: "“"; position: absolute; left: -5px; top: -28px; font-size: 65px; line-height: 1; color: rgba(48,124,240,.10); font-weight: 900; pointer-events: none; } /* ========================================================= AUTHOR ========================================================= */ .testimonial-author { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(62,112,185,.10); } /* ========================================================= AVATAR ========================================================= */ .author-avatar { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; font-size: 16px; background: linear-gradient( 135deg, #347bf4, #0aaddd ); box-shadow: 0 9px 22px rgba(40,110,230,.25); position: relative; } .author-avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(52,123,244,.20); animation: avatarPulse 2.4s ease-out infinite; } @keyframes avatarPulse { 0% { transform: scale(.9); opacity: .8; } 70% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } } .testimonial-author strong { display: block; color: #243249; font-size: 14px; font-weight: 800; } .testimonial-author span { display: block; margin-top: 4px; color: #8090a6; font-size: 11px; letter-spacing: .3px; } /* ========================================================= CONTROLS ========================================================= */ .testimonial-controls { position: relative; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 5px; } /* ========================================================= ARROWS ========================================================= */ .testimonial-arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(42,112,226,.15); background: rgba(255,255,255,.9); color: #2871e8; font-size: 17px; cursor: pointer; box-shadow: 0 8px 25px rgba(45,90,150,.08); transition: .3s ease; } .testimonial-arrow:hover { color: #fff; background: linear-gradient( 135deg, #367cf3, #2259d7 ); transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 30px rgba(43,104,220,.24); } .testimonial-arrow:active { transform: scale(.94); } /* ========================================================= PROGRESS ========================================================= */ .testimonial-progress { width: 130px; height: 5px; overflow: hidden; border-radius: 20px; background: rgba(67,116,184,.12); } .testimonial-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #2872ed, #0bb1df ); transition: width .5s ease; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .industry-section { padding: 80px 0 90px; } .industry-heading { margin-bottom: 35px; } .industry-heading h2 { font-size: 38px; letter-spacing: -2px; } .industry-heading > p { padding: 0 20px; font-size: 13px; } .drag-hint { font-size: 11px; padding: 8px 13px; } .testimonial-viewport { padding: 25px 0 35px; } .testimonial-track { gap: 16px; } .testimonial-card { flex: 0 0 calc(100vw - 45px); min-height: 285px; padding: 24px; border-radius: 20px; } .testimonial-text { font-size: 14px; min-height: 100px; } .testimonial-controls { gap: 12px; } .testimonial-arrow { width: 44px; height: 44px; } .testimonial-progress { width: 90px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .clients-section { padding: 65px 0 75px; } .clients-heading { margin-bottom: 25px; } .clients-track { gap: 25px; animation-duration: 28s; } .client-logo { flex-basis: 115px; height: 80px; } .client-logo img { max-width: 105px; max-height: 65px; } .clients-dots { height: 55px; background-size: 13px 13px; } .industry-section { padding: 75px 0 90px; } .industry-heading { margin-bottom: 35px; } .industry-heading h2 { font-size: 38px; letter-spacing: -1.8px; } .drag-hint { font-size: 11px; padding: 8px 13px; } .testimonial-track { gap: 16px; padding-left: 18px; padding-right: 18px; } .testimonial-card { flex-basis: calc(100vw - 50px); min-height: 270px; padding: 24px; border-radius: 18px; } .testimonial-text { font-size: 14px; } .testimonial-controls { margin-top: 5px; } } /* ========================================================= EBLUESYS CLIENT LOGO — INFINITE MARQUEE ========================================================= */ .clients-marquee { position: relative; width: 100%; overflow: hidden; isolation: isolate; } .clients-track { display: flex; align-items: center; width: max-content; flex-wrap: nowrap; gap: 55px; animation: ebluesysClientMarquee 35s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); /* IMPORTANT */ min-width: max-content; } /* --------------------------------------------------------- INFINITE LOOP --------------------------------------------------------- */ @keyframes ebluesysClientMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* --------------------------------------------------------- LOGO ITEM --------------------------------------------------------- */ .clients-track .client-logo { flex: 0 0 145px; width: 145px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 8px; white-space: nowrap; transform: translateZ(0); transition: transform .35s ease; } .clients-track .client-logo img { display: block; width: auto; height: auto; max-width: 135px; max-height: 82px; object-fit: contain; opacity: .92; filter: grayscale(15%); transition: transform .35s ease, opacity .35s ease, filter .35s ease; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .clients-track .client-logo:hover { transform: translateY(-5px); } .clients-track .client-logo:hover img { transform: scale(1.1); opacity: 1; filter: grayscale(0%); } /* Bangabasi */ .clients-track .client-text { flex: 0 0 170px; width: 170px; font-size: 15px; font-weight: 700; color: #3b4556; white-space: nowrap; } /* --------------------------------------------------------- EDGE FADE --------------------------------------------------------- */ .clients-marquee::before, .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 150px; z-index: 10; pointer-events: none; } .clients-marquee::before { left: 0; background: linear-gradient( 90deg, #fff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } .clients-marquee::after { right: 0; background: linear-gradient( 270deg, #fff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } /* --------------------------------------------------------- HOVER PAUSE --------------------------------------------------------- */ .clients-marquee:hover .clients-track { animation-play-state: paused; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .clients-track { gap: 38px; animation-duration: 30s; } .clients-track .client-logo { flex-basis: 125px; width: 125px; height: 90px; } .clients-track .client-logo img { max-width: 115px; max-height: 72px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .clients-track { gap: 28px; animation-duration: 24s; } .clients-track .client-logo { flex-basis: 105px; width: 105px; height: 75px; } .clients-track .client-logo img { max-width: 95px; max-height: 60px; } .clients-track .client-text { flex-basis: 125px; width: 125px; font-size: 12px; } .clients-marquee::before, .clients-marquee::after { width: 60px; } } /* ========================================================= IMPORTANT: Don't let the global reduced-motion rule kill this slider ========================================================= */ @media (prefers-reduced-motion: reduce) { .clients-track { animation: ebluesysClientMarquee 35s linear infinite !important; } } /* Foter */ /* ===================================================== ROOT ===================================================== */ /* :root { --blue: #2868ed; --blue-dark: #1855d5; --cyan: #08b9e8; --dark: #142b4d; --dark-2: #0c203e; --text: #f8f8fa; --muted: #f5f7fa; --light-blue: #edf5ff; } */ /* ===================================================== GLOBAL ===================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; background: #ffffff; color: var(--text); overflow-x: hidden; } a { text-decoration: none; } /* ===================================================== DEMO SPACE ===================================================== */ .demo-space { min-height: 55vh; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 20%, rgba(48,120,240,.08), transparent 35% ), #ffffff; } .demo-space h1 { font-size: clamp(35px, 5vw, 70px); font-weight: 800; letter-spacing: -3px; } .demo-space span { color: var(--blue); } /* ===================================================== CTA SECTION ===================================================== */ .cta-section { position: relative; padding: 90px 20px 100px; overflow: hidden; background: #ffffff; } /* ===================================================== DOT BACKGROUND ===================================================== */ .cta-dots { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient( rgba(34,91,170,.18) 1.5px, transparent 1.5px ); background-size: 16px 16px; mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent ); -webkit-mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent ); } /* ===================================================== CTA GLOW ===================================================== */ .cta-glow { position: absolute; width: 550px; height: 550px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(42,112,240,.13), transparent 68% ); pointer-events: none; transition: transform 1s ease, opacity .8s ease; } /* ===================================================== CTA CARD ===================================================== */ .cta-card { position: relative; z-index: 2; max-width: 1080px; margin: auto; padding: 58px 65px; min-height: 250px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 30px; border: 1px solid rgba(45,110,230,.15); background: linear-gradient( 135deg, #edf5ff 0%, #e7f1ff 100% ); box-shadow: 0 20px 55px rgba(38,90,160,.10); overflow: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .5s ease; } /* ===================================================== CTA BACKGROUND ORB ===================================================== */ .cta-card::before { content: ""; position: absolute; width: 450px; height: 450px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(54,128,240,.13), transparent 70% ); transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease; pointer-events: none; } /* ===================================================== CTA SHINE ===================================================== */ .cta-card::after { content: ""; position: absolute; top: -50%; left: -120%; width: 55%; height: 200%; transform: skewX(-20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); transition: left 1s ease; pointer-events: none; } /* ===================================================== CTA HOVER ===================================================== */ .cta-card:hover { transform: translateY(-10px); border-color: rgba(40,104,237,.32); box-shadow: 0 35px 85px rgba(35,88,165,.20); } .cta-card:hover::before { transform: translate(-50%, -50%) scale(1.45); } .cta-card:hover::after { left: 140%; } /* ===================================================== CTA CONTENT ===================================================== */ .cta-content { position: relative; z-index: 3; } .cta-label { display: block; margin-bottom: 10px; color: #6c82a2; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; } .cta-title { margin: 0; color: var(--text); font-size: clamp(23px, 3vw, 32px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.2; transition: color .4s ease; } .cta-title span { color: var(--blue); } .cta-card:hover .cta-title { color: #0e376f; } /* ===================================================== CTA DESCRIPTION ===================================================== */ .cta-description { margin-top: 12px; max-width: 560px; color: #71829b; font-size: 14px; line-height: 1.7; } /* ===================================================== CTA BUTTON WRAPPER ===================================================== */ .cta-actions { position: relative; z-index: 5; display: flex; gap: 12px; flex-shrink: 0; } /* ===================================================== CTA BUTTON ===================================================== */ .cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 145px; padding: 14px 21px; border-radius: 14px; border: 1px solid transparent; font-size: 13px; font-weight: 700; color: #ffffff; background: linear-gradient( 135deg, #2868ed, #1556d7 ); box-shadow: 0 12px 30px rgba(39,105,235,.25); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } .cta-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80% ); transform: translateX(-120%); transition: transform .7s ease; } .cta-btn:hover { color: #ffffff; transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 40px rgba(39,105,235,.38); } .cta-btn:hover::before { transform: translateX(120%); } .cta-btn i { transition: transform .35s ease; } .cta-btn:hover i { transform: translate(4px, -3px); } /* ===================================================== SECOND BUTTON ===================================================== */ .cta-btn.secondary { color: #2868ed; background: rgba(255,255,255,.72); border-color: rgba(40,104,237,.18); box-shadow: 0 8px 20px rgba(35,90,150,.06); } .cta-btn.secondary:hover { color: #ffffff; background: linear-gradient( 135deg, #2868ed, #1556d7 ); } /* ===================================================== FOOTER ===================================================== */ .site-footer { position: relative; background: linear-gradient( 135deg, #142b4d 0%, #102644 55%, #0c203e 100% ); color: #ffffff; overflow: hidden; } /* ===================================================== FOOTER GRID ===================================================== */ .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 70px 70px; mask-image: linear-gradient( to bottom, black, transparent 95% ); } /* ===================================================== FOOTER GLOW ===================================================== */ .footer-glow { position: absolute; width: 450px; height: 450px; right: -250px; top: -220px; border-radius: 50%; background: radial-gradient( circle, rgba(22,132,230,.18), transparent 70% ); pointer-events: none; animation: footerGlow 7s ease-in-out infinite; } @keyframes footerGlow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } } /* ===================================================== FOOTER MAIN ===================================================== */ .footer-main { position: relative; z-index: 2; padding: 75px 0 50px; } /* ===================================================== FOOTER BRAND ===================================================== */ .footer-brand img { max-width: 205px; height: auto; margin-bottom: 20px; transition: transform .4s ease, filter .4s ease; } .footer-brand img:hover { transform: scale(1.04); filter: drop-shadow( 0 8px 22px rgba(0,170,255,.25) ); } .footer-description { max-width: 280px; color: #aebbd0; font-size: 13px; line-height: 1.8; } /* ===================================================== FOOTER COLUMN ===================================================== */ .footer-column { position: relative; transition: transform .45s cubic-bezier(.2,.8,.2,1); } .footer-column:hover { transform: translateY(-5px); } /* ===================================================== FOOTER TITLE ===================================================== */ .footer-title { position: relative; display: inline-block; margin-bottom: 23px; color: #ffffff; font-size: 15px; font-weight: 800; } .footer-title::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, #2872ed, #08b9e8 ); transition: width .45s ease; } .footer-column:hover .footer-title::after { width: 100%; } /* ===================================================== FOOTER LINKS ===================================================== */ .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: 13px; } .footer-links a { position: relative; display: inline-block; color: #aebbd0; font-size: 13px; transition: color .3s ease, transform .3s ease; } .footer-links a::before { content: "→"; position: absolute; left: -18px; color: #2f7af3; opacity: 0; transform: translateX(-5px); transition: opacity .3s ease, transform .3s ease; } .footer-links a:hover { color: #ffffff; transform: translateX(5px); } .footer-links a:hover::before { opacity: 1; transform: translateX(0); } /* ===================================================== CONTACT ===================================================== */ .footer-contact { display: flex; gap: 12px; margin-bottom: 17px; color: #aebbd0; font-size: 13px; line-height: 1.6; } .footer-contact i { color: #2580ef; font-size: 15px; flex-shrink: 0; transition: transform .35s ease; } .footer-contact:hover i { transform: scale(1.2) rotate(-8deg); } /* ===================================================== SOCIAL ===================================================== */ .social-links { display: flex; gap: 10px; margin-top: 22px; } .social-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #dce8fa; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); transition: transform .4s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .35s ease; } .social-link:hover { color: #ffffff; transform: translateY(-6px) rotate(-4deg); background: linear-gradient( 135deg, #2868ed, #08aee4 ); box-shadow: 0 14px 30px rgba(20,110,235,.30); } /* ===================================================== FOOTER BOTTOM ===================================================== */ .footer-bottom { position: relative; z-index: 2; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.10); } .copyright { color: #91a2bb; font-size: 12px; } .footer-policy { display: flex; gap: 28px; } .footer-policy a { color: #91a2bb; font-size: 12px; transition: color .3s ease; } .footer-policy a:hover { color: #ffffff; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 991px) { .cta-card { padding: 45px 40px; } .footer-main { padding: 60px 0 40px; } } @media (max-width: 767px) { .cta-section { padding: 65px 15px 75px; } .cta-card { padding: 35px 25px; min-height: auto; flex-direction: column; align-items: flex-start; gap: 28px; border-radius: 23px; } .cta-actions { width: 100%; flex-direction: column; } .cta-btn { width: 100%; } .footer-main { padding: 55px 20px 35px; } .footer-column { margin-top: 35px; } .footer-bottom { padding: 20px; } .footer-bottom .row { gap: 15px; } .footer-policy { gap: 15px; flex-wrap: wrap; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= BRAND LOGO ========================================================= */ .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0; } .brand-logo { display: block; width: 155px; height: auto; max-height: 48px; object-fit: contain; transition: transform .35s ease, filter .35s ease; } .brand:hover .brand-logo { transform: scale(1.03); filter: drop-shadow( 0 5px 15px rgba(0, 174, 255, .22) ); } /* ========================================================= CLIENTS SECTION ========================================================= */ .clients-section { position: relative; padding: 100px 0 90px; overflow: hidden; background: radial-gradient( circle at 50% 40%, rgba(55,124,255,.08), transparent 35% ), linear-gradient( 180deg, #f8fbff 0%, #eef5fc 100% ); } /* ========================================================= CONTAINER ========================================================= */ .clients-container { width: 100%; max-width: 1500px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .clients-header { text-align: center; max-width: 720px; margin: 0 auto 55px; padding: 0 20px; } .clients-kicker { display: inline-block; margin-bottom: 12px; color: #377cff; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; } .clients-header h2 { margin: 0; color: #172f59; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; font-weight: 750; letter-spacing: -1.8px; } .clients-header h2 span { color: #377cff; } .clients-header p { margin: 16px auto 0; max-width: 600px; color: #7385a2; font-size: 15px; line-height: 1.7; } /* ========================================================= MARQUEE ========================================================= */ .clients-marquee { position: relative; width: 100%; overflow: hidden; padding: 18px 0 30px; } /* LEFT FADE */ .clients-marquee::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 160px; z-index: 5; pointer-events: none; background: linear-gradient( 90deg, #f8fbff, rgba(248,251,255,0) ); } /* RIGHT FADE */ .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 160px; z-index: 5; pointer-events: none; background: linear-gradient( 270deg, #eef5fc, rgba(238,245,252,0) ); } /* ========================================================= TRACK ========================================================= */ .clients-track { display: flex; align-items: center; width: max-content; gap: 25px; animation: clientsMarquee 32s linear infinite; will-change: transform; } /* ========================================================= LOGO CARD ========================================================= */ .client-logo { position: relative; width: 170px; height: 105px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.88); border: 1px solid rgba(54,113,215,.13); box-shadow: 0 12px 30px rgba(35,72,125,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease, background .35s ease; } /* ========================================================= LOGO ========================================================= */ .client-logo img { display: block; width: 100%; height: 100%; max-width: 135px; max-height: 72px; object-fit: contain; filter: grayscale(10%) saturate(.9); opacity: .86; transition: transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease, opacity .45s ease; } /* ========================================================= HOVER ========================================================= */ .client-logo:hover { transform: translateY(-9px) scale(1.035); background: #ffffff; border-color: rgba(55,124,255,.35); box-shadow: 0 25px 50px rgba(36,87,160,.15), 0 0 30px rgba(55,124,255,.08); } .client-logo:hover img { transform: scale(1.08); filter: grayscale(0) saturate(1.1); opacity: 1; } /* ========================================================= MARQUEE ANIMATION ========================================================= */ @keyframes clientsMarquee { 0% { transform: translateX(0); } 100% { transform: translateX( calc(-50% - 12.5px) ); } } /* ========================================================= PAUSE ON HOVER ========================================================= */ .clients-marquee:hover .clients-track { animation-play-state: paused; } /* ========================================================= TOP DECORATIVE LINE ========================================================= */ .clients-section::before { content: ""; position: absolute; top: 0; left: 50%; width: 100px; height: 2px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, #377cff, transparent ); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .clients-section { padding: 70px 0 65px; } .clients-header { margin-bottom: 35px; } .clients-header h2 { font-size: 34px; } .clients-header p { font-size: 13px; } .client-logo { width: 135px; height: 85px; padding: 14px; border-radius: 16px; } .client-logo img { max-width: 105px; max-height: 58px; } .clients-track { gap: 16px; animation-duration: 26s; } .clients-marquee::before, .clients-marquee::after { width: 70px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } .client-logo, .client-logo img { transition: none; } } /* ========================================================= INDEX PAGE — FINAL CONFLICT-SAFE OVERRIDES ========================================================= */ /* The What We Do menu belongs to the navbar, not the hero. */ .navbar-wrapper { position: fixed !important; top: 14px !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; pointer-events: none; } .custom-navbar { position: relative !important; z-index: 99999 !important; } .navbar-inner, .desktop-navigation, .main-nav-list, .nav-item-custom, .services-dropdown { position: relative; } .services-dropdown { z-index: 100000; } .services-dropdown-panel { z-index: 100001 !important; width: 278px !important; padding: 9px !important; background: linear-gradient( 145deg, rgba(15,28,57,.98), rgba(5,15,35,.98) ) !important; border: 1px solid rgba(107,151,220,.22) !important; border-radius: 21px !important; box-shadow: 0 25px 55px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* * IMPORTANT: * The old merged stylesheet contains Services-page rules for * .service-content. They can make the navbar dropdown items look * like white service cards. These rules isolate the navbar content. */ .services-dropdown-panel .service-dropdown-item { display: flex !important; align-items: center !important; gap: 11px !important; width: 100% !important; min-height: 56px !important; padding: 10px 9px !important; margin: 0 !important; color: #fff !important; background: transparent !important; border: 0 !important; border-radius: 13px !important; text-decoration: none !important; box-shadow: none !important; } .services-dropdown-panel .service-dropdown-item:hover { color: #fff !important; background: rgba(255,255,255,.055) !important; transform: translateX(3px); } .services-dropdown-panel .service-content { position: static !important; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; } .services-dropdown-panel .service-content strong { display: block !important; margin: 0 !important; padding: 0 !important; color: #f0f4fb !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 700 !important; } .services-dropdown-panel .service-content small { display: block !important; margin: 3px 0 0 !important; padding: 0 !important; color: #687792 !important; font-size: 10px !important; line-height: 1.3 !important; } .services-dropdown-panel .service-icon { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .services-dropdown-panel .service-arrow { flex: 0 0 auto !important; color: #56647b !important; background: transparent !important; font-size: 12px !important; } .services-dropdown-panel .services-view-all { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 38px !important; margin: 5px 0 0 !important; padding: 11px 12px !important; color: #74a8e8 !important; background: rgba(22,72,150,.20) !important; border: 1px solid rgba(48,115,220,.35) !important; border-radius: 13px !important; text-decoration: none !important; box-shadow: none !important; } /* Hero buttons stay inside the hero and keep the intended blue design. */ .hero { position: relative; z-index: 1; } .hero-content { position: relative; z-index: 5; } .hero-actions { position: relative; z-index: 20; display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap; } .hero-actions .btn-primary-custom, .hero-actions .btn-outline-custom { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-height: 44px !important; padding: 11px 22px !important; margin: 0 !important; border-radius: 30px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; box-shadow: none; } .hero-actions .btn-primary-custom { color: #fff !important; background: linear-gradient( 135deg, #4a88ff, #2256d7 ) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 8px 28px rgba(38,102,255,.35) !important; } .hero-actions .btn-outline-custom { color: #fff !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.20) !important; } .hero-actions .btn-primary-custom:hover, .hero-actions .btn-outline-custom:hover { color: #fff !important; transform: translateY(-3px); } /* Prevent global Services-page .service-content rules from touching anything else on the Index page. */ .hero .service-content, .solutions-section .service-content, .footer .service-content { box-sizing: border-box; } /* Small screens */ @media (max-width: 575px) { .hero-actions { align-items: stretch !important; } .hero-actions .btn-primary-custom, .hero-actions .btn-outline-custom { width: 100% !important; } } @media (prefers-reduced-motion: reduce) { .hero-actions .btn-primary-custom, .hero-actions .btn-outline-custom { transform: none !important; } } /* About page */ :root{ --bg:#020817; --bg2:#06142d; --blue:#2f6df6; --blue2:#62a2ff; --cyan:#08c8ef; --text:#f5f8ff; --muted:#8fa2c2; --glass:rgba(10,24,54,.58); --line:rgba(255,255,255,.12); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Inter",sans-serif; color:var(--text); background:#020817; overflow-x:hidden; } body:before{ content:""; position:fixed; inset:0; z-index:-10; background: radial-gradient(circle at 50% 12%,rgba(0,190,235,.22),transparent 30%), radial-gradient(circle at 12% 75%,rgba(34,86,210,.16),transparent 28%), radial-gradient(circle at 90% 70%,rgba(28,120,255,.12),transparent 28%), linear-gradient(135deg,#010817,#06152f 55%,#020817); } body:after{ content:""; position:fixed; inset:0; z-index:-8; pointer-events:none; opacity:.28; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(to bottom,black,transparent 85%); } /* .navbar-wrapper{position:fixed;top:14px;left:0;right:0;z-index:9999} .custom-navbar{ max-width:1250px;margin:auto;padding:9px 13px; border:1px solid rgba(255,255,255,.13);border-radius:50px; background:linear-gradient(135deg,rgba(24,46,89,.82),rgba(6,18,43,.72)); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); box-shadow:0 20px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08); transition:.45s cubic-bezier(.2,.8,.2,1); position:relative;overflow:hidden; } */ /* .custom-navbar:before{ content:"";position:absolute;top:0;left:-30%;width:25%;height:1px; background:linear-gradient(90deg,transparent,#7fc7ff,transparent); animation:navScan 5s linear infinite; } */ @keyframes navScan{to{left:130%}} /* .custom-navbar.scrolled{ background:rgba(3,13,32,.92); transform:translateY(-3px); box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08); } */ .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;position:relative;z-index:2} .brand-icon{ width:42px;height:42px;display:grid;place-items:center;font-size:25px;color:#10c4ed; filter:drop-shadow(0 0 10px rgba(16,196,237,.45));animation:logoFloat 4s ease-in-out infinite; } @keyframes logoFloat{50%{transform:translateY(-3px) rotate(-2deg)}} .brand-text{font-size:19px;font-weight:800;line-height:1;letter-spacing:-.6px} .brand-text span{display:block;font-size:8px;letter-spacing:1px;color:#10c4ed;margin-top:4px} .nav-link{ color:rgba(255,255,255,.68)!important;font-size:13px;font-weight:600; padding:12px 15px!important;transition:.3s;position:relative; } .nav-link:before{ content:"";position:absolute;left:50%;bottom:5px;width:0;height:2px; background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:10px; transform:translateX(-50%);transition:.3s; } .nav-link:hover,.nav-link.active{color:#fff!important} .nav-link:hover:before,.nav-link.active:before{width:18px} .btn-primary-custom,.btn-outline-custom{ border-radius:30px;padding:12px 22px;font-size:13px;font-weight:700;transition:.35s; position:relative;overflow:hidden; } .btn-primary-custom{ color:#fff;background:linear-gradient(135deg,#4a88ff,#2256d7); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 28px rgba(38,102,255,.35); } .btn-primary-custom:before,.btn-outline-custom:before{ content:"";position:absolute;top:-100%;left:-30%;width:25%;height:300%; background:rgba(255,255,255,.28);transform:rotate(25deg);transition:.6s; } .btn-primary-custom:hover:before,.btn-outline-custom:hover:before{left:120%} .btn-primary-custom:hover,.btn-outline-custom:hover{transform:translateY(-4px);color:#fff} .btn-outline-custom{ color:#fff;background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.18); } .hero{ min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;padding:145px 0 80px; } .hero-glow{ position:absolute;width:760px;height:760px;left:50%;top:-120px;transform:translateX(-50%); border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,205,238,.22) 0%,rgba(35,107,255,.12) 30%,transparent 68%); filter:blur(8px);animation:heroGlow 7s ease-in-out infinite; } @keyframes heroGlow{ 0%,100%{transform:translateX(-50%) scale(.92);opacity:.65} 50%{transform:translateX(-50%) scale(1.13);opacity:1} } .hero:after{ content:"";position:absolute;left:-10%;right:-10%;bottom:-280px;height:620px;pointer-events:none; background: linear-gradient(rgba(42,119,195,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(42,119,195,.12) 1px,transparent 1px), radial-gradient(ellipse at center,rgba(0,136,205,.28),transparent 62%); background-size:55px 55px,55px 55px,100% 100%; transform:perspective(500px) rotateX(58deg); transform-origin:center top; mask-image:linear-gradient(to bottom,transparent,black 20%,black 75%,transparent); animation:gridDrift 12s linear infinite; } @keyframes gridDrift{to{background-position:0 55px,55px 0,0 0}} .hero-content{position:relative;z-index:5;animation:heroIn 1.1s cubic-bezier(.2,.8,.2,1) both} @keyframes heroIn{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:none}} .hero-title{ font-size:clamp(42px,5vw,67px);line-height:1.04;font-weight:500;letter-spacing:-3.5px;margin:0 0 18px; } .hero-title strong{font-weight:800} .software-word{ display:inline-block;position:relative;color:#57a0ff; text-shadow:0 0 25px rgba(63,139,255,.24); animation:wordGlow 3s ease-in-out infinite; } @keyframes wordGlow{50%{text-shadow:0 0 38px rgba(67,155,255,.48)}} .software-word:after{ content:"";position:absolute;left:-7px;right:-7px;bottom:-8px;height:17px; border-top:3px solid #6ebcff;border-radius:50%;transform:rotate(-2deg); filter:drop-shadow(0 0 6px #2788ff);animation:underline 2.4s ease-in-out infinite; } @keyframes underline{50%{transform:rotate(2deg) scaleX(.93)}} .hero-subtitle{font-size:27px;color:#dbe6f8;margin-bottom:28px;animation:fadeUp 1s .25s both} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp 1s .4s both} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .stats{display:flex;gap:68px;margin-top:36px;animation:fadeUp 1s .55s both} .stat{position:relative} .stat:after{ content:"";position:absolute;left:0;bottom:-12px;width:0;height:1px; background:linear-gradient(90deg,#4f95ff,transparent);transition:.5s; } .stat:hover:after{width:100%} .stat-number{font-size:28px;font-weight:800;color:#5a9aff;text-shadow:0 0 20px rgba(80,145,255,.22)} .stat-label{display:block;font-size:9px;letter-spacing:1px;color:#91a1bd;margin-top:4px;text-transform:uppercase} .expertise{ position:relative;z-index:5;padding:25px 10px 15px 42px; border-left:1px solid rgba(255,255,255,.08); animation:expertiseIn 1s .35s cubic-bezier(.2,.8,.2,1) both; } @keyframes expertiseIn{from{opacity:0;transform:translateX(55px)}to{opacity:1;transform:none}} .section-label{font-size:11px;letter-spacing:1.4px;color:#91a5c5;font-weight:700;margin-bottom:22px} .expertise-item{ position:relative;padding:11px 12px 11px 18px;margin-bottom:8px;border-radius:12px; transition:.4s;overflow:hidden; } .expertise-item:after{ content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:12px; background:linear-gradient(90deg,rgba(73,142,255,.12),transparent) padding-box; opacity:0;transition:.4s; } .expertise-item:hover{transform:translateX(8px);background:rgba(255,255,255,.035)} .expertise-item:hover:after{opacity:1} .expertise-item:before{ content:"";position:absolute;left:2px;top:20px;width:7px;height:7px;border-radius:50%; background:#4e91ed;box-shadow:0 0 0 0 rgba(78,145,237,.65);animation:dotPulse 2s infinite; } @keyframes dotPulse{70%{box-shadow:0 0 0 8px transparent}} .expertise-title{font-size:14px;font-weight:700;margin-bottom:4px} .expertise-description{font-size:12px;color:#8497b6;line-height:1.5} .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);margin:28px 0} .certifications{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .cert{ width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center; font-size:9px;font-weight:700;color:#91a3c1; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.1),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:.45s;animation:certFloat 5s ease-in-out infinite; } .cert:nth-child(2){animation-delay:.5s}.cert:nth-child(3){animation-delay:1s}.cert:nth-child(4){animation-delay:1.5s}.cert:nth-child(5){animation-delay:2s} @keyframes certFloat{50%{transform:translateY(-6px)}} .cert:hover{transform:translateY(-10px) scale(1.08) rotate(5deg);color:#fff;border-color:#4c8dff;box-shadow:0 0 28px rgba(55,123,255,.2)} .particle{ position:absolute;width:2px;height:2px;border-radius:50%;background:#69b9ff;opacity:.6; box-shadow:0 0 8px #45a8e9;animation:particleRise linear infinite;z-index:1; } @keyframes particleRise{ 0%{transform:translate3d(0,105vh,0) scale(.3);opacity:0} 15%{opacity:.65}85%{opacity:.35} 100%{transform:translate3d(var(--drift),-100px,0) scale(1.5);opacity:0} } .orb{ position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(1px); background:radial-gradient(circle,rgba(53,145,255,.22),transparent 68%); animation:orbFloat 10s ease-in-out infinite; } .orb.one{width:300px;height:300px;left:-120px;top:25%} .orb.two{width:240px;height:240px;right:-80px;top:15%;animation-delay:2s} .orb.three{width:190px;height:190px;right:25%;bottom:3%;animation-delay:4s} @keyframes orbFloat{50%{transform:translate(25px,-35px) scale(1.12)}} .scroll-indicator{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:26px;height:42px; border:1px solid rgba(255,255,255,.25);border-radius:20px;z-index:8; } .scroll-indicator:before{ content:"";position:absolute;width:4px;height:7px;border-radius:5px;background:#fff;left:50%;top:7px; transform:translateX(-50%);animation:scrollDot 1.6s infinite;box-shadow:0 0 8px #fff; } @keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,18px)}} .floating-actions{position:fixed;right:18px;bottom:20px;z-index:999} .float-btn{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff; text-decoration:none;margin-top:11px;border:4px solid rgba(5,19,45,.85); box-shadow:0 12px 35px rgba(0,0,0,.4);transition:.35s;position:relative; } .float-btn:before{ content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(74,139,255,.35); animation:floatRing 2.5s infinite; } @keyframes floatRing{to{transform:scale(1.35);opacity:0}} .float-btn:hover{transform:scale(1.12) translateY(-3px);color:#fff} .help-btn{background:linear-gradient(135deg,#3777ff,#1747b9)} .whatsapp-btn{background:#18c96b} .dummy-section{ min-height:600px;padding:120px 0;background: radial-gradient(circle at 50% 0,rgba(31,102,255,.13),transparent 35%),#06142c; } .reveal{opacity:0;transform:translateY(35px);transition:1s cubic-bezier(.2,.8,.2,1)} .reveal.visible{opacity:1;transform:none} /* @media(max-width:991px){ .custom-navbar{border-radius:22px}.navbar-collapse{margin-top:12px;padding:12px;background:rgba(3,15,38,.96);border-radius:16px} .hero{padding-top:140px}.expertise{margin-top:65px;padding-left:0;border-left:0} } */ @media(max-width:575px){ .hero{padding:125px 18px 95px;min-height:auto}.hero-title{font-size:41px;letter-spacing:-2.2px} .hero-subtitle{font-size:22px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;text-align:center} .stats{gap:15px;justify-content:space-between}.stat-number{font-size:22px}.stat-label{font-size:7.5px} .cert{width:52px;height:52px;font-size:8px}.floating-actions{right:10px;bottom:12px}.float-btn{width:52px;height:52px} } @media(prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} } /* ========================================================= NAVBAR ROOT ========================================================= */ :root { --nav-blue: #2868ed; --nav-cyan: #08b9e8; --nav-dark: #071329; --nav-dark-2: #101c38; --nav-text: #e9effa; --nav-muted: #9ba9bd; } /* ========================================================= NAVBAR WRAPPER ========================================================= */ .navbar-wrapper { position: fixed; top: 14px; left: 0; right: 0; z-index: 99999; pointer-events: none; } /* ========================================================= MAIN NAVBAR ========================================================= */ .custom-navbar { position: relative; width: calc(100% - 30px); max-width: 1250px; margin: 0 auto; pointer-events: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 50px; background: linear-gradient( 135deg, rgba(22,43,82,.90), rgba(5,16,39,.91) ); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 65px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, box-shadow .45s ease, border-color .45s ease; } /* ========================================================= SCROLLED NAVBAR ========================================================= */ .custom-navbar.scrolled { transform: translateY(-3px); background: linear-gradient( 135deg, rgba(6,18,40,.96), rgba(3,12,29,.96) ); border-color: rgba(255,255,255,.18); box-shadow: 0 22px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08); } /* ========================================================= TOP SCAN LINE ========================================================= */ .custom-navbar::before { content: ""; position: absolute; top: 0; left: -30%; width: 25%; height: 1px; background: linear-gradient( 90deg, transparent, #72c8ff, transparent ); animation: navScan 5s linear infinite; pointer-events: none; } @keyframes navScan { from { left: -30%; } to { left: 130%; } } /* ========================================================= INNER ========================================================= */ .navbar-inner { min-height: 64px; padding: 8px 12px; display: flex; align-items: center; } /* ========================================================= BRAND ========================================================= */ .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: #fff; } .brand:hover { color: #fff; } .brand-icon { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; color: var(--nav-cyan); font-size: 25px; transition: transform .4s ease; } .brand:hover .brand-icon { transform: rotate(-7deg) scale(1.08); } .brand-text { color: #168bd5; font-size: 20px; line-height: .9; font-weight: 800; letter-spacing: -.7px; } .brand-text span { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .5px; color: #079adf; } /* ========================================================= DESKTOP NAVIGATION ========================================================= */ .desktop-navigation { flex: 1; display: flex; justify-content: center; margin-left: 30px; } .main-nav-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; } .nav-item-custom { position: relative; } .nav-link-custom { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; border: 0; border-radius: 22px; background: transparent; color: #aab5c6; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .3s ease, background .3s ease, transform .3s ease; } .nav-link-custom:hover { color: #fff; background: rgba(255,255,255,.055); } .nav-link-custom.active { color: #fff; } .nav-link-custom.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #2f83ff; transform: translateX(-50%); box-shadow: 0 0 8px rgba(47,131,255,.9); } /* ========================================================= WHAT WE DO ARROW ========================================================= */ .services-toggle i { font-size: 9px; transition: transform .35s ease; } .services-dropdown.open .services-toggle i { transform: rotate(180deg); } .services-dropdown.open .services-toggle { color: #fff; background: rgba(255,255,255,.065); } /* ========================================================= DESKTOP DROPDOWN ========================================================= */ .services-dropdown-panel { position: absolute; top: calc(100% + 10px); left: 50%; width: 278px; padding: 9px; border-radius: 21px; border: 1px solid rgba(107,151,220,.22); background: linear-gradient( 145deg, rgba(15,28,57,.98), rgba(5,15,35,.98) ); box-shadow: 0 25px 55px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.97); transform-origin: top center; transition: opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); } /* little arrow */ .services-dropdown-panel::before { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; background: #101d39; border-left: 1px solid rgba(107,151,220,.22); border-top: 1px solid rgba(107,151,220,.22); transform: translateX(-50%) rotate(45deg); } .services-dropdown.open .services-dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } /* ========================================================= DROPDOWN ITEM ========================================================= */ .service-dropdown-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 9px; border-radius: 13px; color: #fff; transition: background .3s ease, transform .3s ease; } .service-dropdown-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(3px); } /* ========================================================= DROPDOWN ICON ========================================================= */ .service-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; font-size: 15px; } .innovation-icon { color: #ffc928; background: rgba(255,195,30,.10); } .creation-icon { color: #1edca5; background: rgba(30,220,165,.10); } .service-content { flex: 1; min-width: 0; } .service-content strong { display: block; color: #f0f4fb; font-size: 12px; font-weight: 700; } .service-content small { display: block; margin-top: 3px; color: #687792; font-size: 10px; } .service-arrow { color: #56647b; font-size: 12px; transition: transform .3s ease, color .3s ease; } .service-dropdown-item:hover .service-arrow { color: #4d9aff; transform: translateX(4px); } /* ========================================================= SEE ALL SERVICES ========================================================= */ .services-view-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding: 11px 12px; border-radius: 13px; color: #74a8e8; font-size: 10px; font-weight: 600; border: 1px solid rgba(48,115,220,.35); background: rgba(22,72,150,.20); transition: background .3s ease, border-color .3s ease, transform .3s ease; } .services-view-all:hover { color: #fff; border-color: rgba(55,130,245,.65); background: rgba(35,103,215,.25); transform: translateY(-2px); } .services-view-all span:first-child { display: flex; align-items: center; gap: 7px; } .services-view-all span:last-child { display: flex; align-items: center; gap: 4px; color: #62a2ff; } /* ========================================================= NAV BUTTONS ========================================================= */ .navbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-btn { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 22px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .nav-btn-outline { color: #c6d0df; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); } .nav-btn-outline:hover { color: #fff; transform: translateY(-2px); background: rgba(255,255,255,.08); } .nav-btn-primary { color: #fff; background: linear-gradient( 135deg, #3276ed, #1e5fe1 ); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(37,104,238,.30); } .nav-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 13px 32px rgba(37,104,238,.42); } .nav-btn-primary i { transition: transform .3s ease; } .nav-btn-primary:hover i { transform: translateX(4px); } /* ========================================================= MOBILE BUTTON ========================================================= */ .mobile-menu-button { display: none; width: 42px; height: 42px; margin-left: auto; border: 0; border-radius: 13px; background: rgba(255,255,255,.06); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; } .mobile-menu-button span { display: block; width: 19px; height: 2px; border-radius: 5px; background: #fff; transition: transform .35s ease, opacity .25s ease; } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(2) { opacity: 0; } .custom-navbar.mobile-open .mobile-menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= MOBILE MENU ========================================================= */ .mobile-menu { display: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .desktop-navigation { margin-left: 10px; } .nav-link-custom { padding: 9px 9px; font-size: 11px; } .brand-text { font-size: 17px; } .nav-btn { padding: 0 13px; } } @media (max-width: 991px) { .navbar-wrapper { top: 10px; } .custom-navbar { width: calc(100% - 20px); border-radius: 22px; } .navbar-inner { min-height: 52px; padding: 7px 9px; } .desktop-navigation, .desktop-actions { display: none; } .mobile-menu-button { display: flex; } /* ===================================================== MOBILE MENU PANEL ====================================================== */ .mobile-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: block; max-height: calc(100vh - 90px); overflow-y: auto; padding: 8px 10px 10px; border-radius: 21px; border: 1px solid rgba(93,129,192,.30); background: linear-gradient( 145deg, rgba(13,25,53,.99), rgba(5,14,33,.99) ); box-shadow: 0 25px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.98); transform-origin: top center; transition: opacity .3s ease, visibility .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); } .custom-navbar.mobile-open .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* ===================================================== MOBILE TOP ====================================================== */ .mobile-menu-top { display: flex; align-items: center; justify-content: space-between; padding: 7px 7px 13px; border-bottom: 1px solid rgba(255,255,255,.07); } .mobile-brand { display: flex; align-items: center; gap: 8px; color: #fff; } .mobile-brand:hover { color: #fff; } .mobile-brand-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #09a9e8; font-size: 21px; } .mobile-brand strong { display: block; color: #148bd2; font-size: 13px; line-height: 1; } .mobile-brand small { display: block; margin-top: 3px; color: #078ed1; font-size: 6px; letter-spacing: .4px; } .mobile-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #d5deeb; background: rgba(255,255,255,.05); font-size: 15px; } /* ===================================================== MOBILE NAV ====================================================== */ .mobile-nav { padding: 8px 2px; } .mobile-nav-link { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #bac5d6; font-size: 12px; font-weight: 500; text-align: left; transition: color .25s ease, background .25s ease, transform .25s ease; } .mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,.055); } .mobile-nav-link.active { color: #fff; background: rgba(91,117,177,.18); } /* ===================================================== MOBILE SERVICES ====================================================== */ .mobile-services-toggle i { font-size: 10px; transition: transform .3s ease; } .mobile-services.open .mobile-services-toggle { color: #fff; background: rgba(255,255,255,.055); } .mobile-services.open .mobile-services-toggle i { transform: rotate(180deg); } /* ===================================================== MOBILE SUBMENU ====================================================== */ .mobile-services-submenu { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; } .mobile-services-submenu > * { min-height: 0; overflow: hidden; } .mobile-services.open .mobile-services-submenu { grid-template-rows: 1fr; opacity: 1; } .mobile-service-item { display: flex; align-items: center; gap: 11px; padding: 9px 17px; color: #fff; transition: background .25s ease, transform .25s ease; } .mobile-service-item:hover { color: #fff; background: rgba(255,255,255,.035); transform: translateX(3px); } .mobile-service-icon { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 9px; flex-shrink: 0; font-size: 13px; } .mobile-service-item strong { display: block; font-size: 10px; color: #eef3fa; } .mobile-service-item small { display: block; margin-top: 2px; color: #687792; font-size: 8px; } .mobile-see-all { display: flex; align-items: center; justify-content: space-between; margin: 5px 8px 7px; padding: 9px 11px; border-radius: 11px; color: #77a9ea; background: rgba(28,91,184,.17); border: 1px solid rgba(53,120,226,.30); font-size: 9px; } .mobile-see-all span { display: flex; align-items: center; gap: 6px; } /* ===================================================== MOBILE ACTIONS ====================================================== */ .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 2px 2px; border-top: 1px solid rgba(255,255,255,.07); } .mobile-action-outline, .mobile-action-primary { height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 19px; font-size: 10px; font-weight: 700; transition: transform .3s ease, box-shadow .3s ease; } .mobile-action-outline { color: #b8c5d8; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); } .mobile-action-primary { color: #fff; background: linear-gradient( 135deg, #3276ed, #1d5de0 ); box-shadow: 0 8px 25px rgba(38,105,235,.32); } .mobile-action-outline:hover, .mobile-action-primary:hover { color: #fff; transform: translateY(-2px); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .navbar-wrapper { top: 8px; } .custom-navbar { width: calc(100% - 16px); } .brand-text { font-size: 16px; } .brand-text span { font-size: 6px; } .brand-icon { font-size: 23px; } .mobile-menu { max-height: calc(100vh - 75px); } } /* ========================================================= SOLUTIONS SECTION ========================================================= */ .solutions-section { position: relative; padding: 130px 0 120px; overflow: hidden; background: radial-gradient( circle at 50% 20%, rgba(53,117,255,.10), transparent 38% ), linear-gradient( 180deg, #ffffff 0%, #f8fbff 100% ); color: #14213d; } /* ========================================================= BACKGROUND GRID ========================================================= */ /* .solutions-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient( rgba(45,107,220,.20) 1.2px, transparent 1.2px ); background-size: 16px 16px; mask-image: linear-gradient( to bottom, black, transparent 70% ); animation: gridMove 20s linear infinite; } */ @keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 160px; } } /* ========================================================= BACKGROUND ORBS ========================================================= */ .solutions-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); background: radial-gradient( circle, rgba(62,136,255,.16), transparent 70% ); animation: solutionOrb 10s ease-in-out infinite; } .solutions-orb-1 { width: 400px; height: 400px; left: -180px; top: 20%; } .solutions-orb-2 { width: 350px; height: 350px; right: -160px; bottom: 5%; animation-delay: 3s; } @keyframes solutionOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(35px,-30px,0) scale(1.12); } } /* ========================================================= HEADING ========================================================= */ .solutions-heading { max-width: 800px; margin: 0 auto 65px; position: relative; z-index: 3; } .section-eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; color: #5173a7; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 15px; } .section-eyebrow span { width: 25px; height: 1px; background: linear-gradient( 90deg, transparent, #4786ed ); } .section-eyebrow span:last-child { background: linear-gradient( 90deg, #4786ed, transparent ); } .solutions-heading h2 { margin: 0; font-size: clamp( 38px, 5vw, 58px ); line-height: 1.05; font-weight: 800; letter-spacing: -2.5px; color: #16223b; } .solutions-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .solutions-heading p { max-width: 610px; margin: 18px auto 0; color: #71809a; font-size: 15px; line-height: 1.7; } /* ========================================================= CARD ========================================================= */ .solution-card { position: relative; height: 100%; min-height: 475px; overflow: hidden; border-radius: 18px; background: linear-gradient( 145deg, rgba(224,239,255,.92), rgba(207,227,250,.86) ); border: 1px solid rgba(61,130,222,.16); box-shadow: 0 15px 35px rgba(38,79,130,.08); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease; will-change: transform; } .solution-card:hover { box-shadow: 0 30px 70px rgba(27,77,143,.18); border-color: rgba(53,119,232,.35); } /* ========================================================= CARD GLOW ========================================================= */ .card-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; left: var(--mouse-x,50%); top: var(--mouse-y,50%); transform: translate(-50%,-50%); background: radial-gradient( circle, rgba(67,137,255,.24), transparent 70% ); filter: blur(25px); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .solution-card:hover .card-glow { opacity: 1; } /* ========================================================= IMAGE ========================================================= */ .solution-image { height: 155px; margin: 28px 28px 0; border-radius: 14px; overflow: hidden; position: relative; transform: translateZ(20px); } .solution-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .solution-card:hover .solution-image img { transform: scale(1.1); } .image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 35%, rgba(7,28,61,.55) ); opacity: .55; } /* ========================================================= NUMBER ========================================================= */ .service-number { position: absolute; right: 12px; top: 12px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: rgba(4,23,53,.72); color: white; font-size: 10px; font-weight: 800; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); } /* ========================================================= CONTENT ========================================================= */ .solution-content { padding: 22px 28px 28px; position: relative; z-index: 2; transform: translateZ(30px); } .solution-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 15px; color: #2467e9; background: rgba(255,255,255,.55); border: 1px solid rgba(61,125,221,.12); font-size: 18px; transition: .4s ease; } .solution-card:hover .solution-icon { transform: translateY(-4px) rotate(-5deg); background: #ffffff; box-shadow: 0 10px 25px rgba(35,103,220,.13); } .solution-content h3 { font-size: 19px; font-weight: 800; margin-bottom: 12px; color: #1b2a43; } .solution-content p { font-size: 13px; line-height: 1.65; color: #586b87; margin-bottom: 22px; } /* ========================================================= LINK ========================================================= */ .solution-link { display: inline-flex; align-items: center; gap: 8px; color: #2865e5; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; transition: .35s ease; } .solution-link i { font-size: 14px; transition: transform .35s ease; } .solution-link:hover { color: #0c9ed3; } .solution-link:hover i { transform: translateX(6px); } /* ========================================================= CARD BOTTOM LIGHT ========================================================= */ .card-line { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, #3d81ef, #08b9e8, transparent ); transform: scaleX(0); transform-origin: center; transition: transform .5s ease; } .solution-card:hover .card-line { transform: scaleX(1); } /* ========================================================= CTA ========================================================= */ .solutions-cta { margin-top: 65px; padding: 24px 28px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: linear-gradient( 120deg, rgba(226,239,255,.8), rgba(244,249,255,.9) ); border: 1px solid rgba(60,126,220,.14); box-shadow: 0 15px 45px rgba(40,90,150,.08); } .solutions-cta span { display: block; font-size: 10px; letter-spacing: 1.5px; color: #7184a0; font-weight: 800; margin-bottom: 5px; } .solutions-cta strong { font-size: 17px; color: #1d2b44; } /* ========================================================= REVEAL ANIMATIONS ========================================================= */ .reveal-up { opacity: 0; transform: translateY(50px); } .reveal-card { opacity: 0; transform: translateY(80px) scale(.94); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:991px){ .solutions-section { padding: 100px 0; } .solutions-heading { margin-bottom:45px; } .solutions-cta { flex-direction:column; align-items:flex-start; } } @media(max-width:575px){ .solutions-section { padding: 80px 18px; } .solutions-heading h2 { font-size:39px; letter-spacing:-1.8px; } .solutions-heading p { font-size:13px; } .solution-card { min-height:440px; } .solution-image { margin: 20px 20px 0; } .solution-content { padding: 20px; } } /* ========================================================= SERVICES DOT BACKGROUND LIGHTWEIGHT + RESPONSIVE ========================================================= */ .solutions-section { position: relative; overflow: hidden; isolation: isolate; background: #fff; } /* ========================================================= DOT BACKGROUND ========================================================= */ .dot-background { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none; /* Normal grey dots */ background-image: radial-gradient( circle, rgba(185, 190, 198, .85) 2px, transparent 2.6px ); background-size: 15px 15px; background-position: center; opacity: 1; } /* ========================================================= BLUE MOUSE DOT LAYER ========================================================= */ .dot-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Same dots but blue */ background-image: radial-gradient( circle, rgba(17, 145, 241, 1) 2px, transparent 2.7px ); background-size: 15px 15px; background-position: center; /* Reveal blue dots around mouse */ -webkit-mask-image: radial-gradient( circle 125px at var(--mouse-x, -500px) var(--mouse-y, -500px), #000 0%, #000 18%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 65%, transparent 100% ); mask-image: radial-gradient( circle 125px at var(--mouse-x, -500px) var(--mouse-y, -500px), #000 0%, #000 18%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.18) 65%, transparent 100% ); } /* ========================================================= SOFT BLUE ATMOSPHERE ========================================================= */ .dot-background::before { content: ""; position: absolute; width: 280px; height: 280px; left: var(--mouse-x, -500px); top: var(--mouse-y, -500px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(30,145,255,.14) 0%, rgba(30,145,255,.07) 30%, rgba(30,145,255,.025) 55%, transparent 72% ); opacity: var(--mouse-opacity, 0); transition: opacity .3s ease; } /* ========================================================= CONTENT ABOVE DOTS ========================================================= */ .solutions-section > .container { position: relative; z-index: 5; } /* ========================================================= DOT FADE ONLY AT EDGES ========================================================= */ .dot-background { -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 8%, black 92%, transparent 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .dot-background { height: 130px; background-size: 14px 14px; } .dot-background::after { background-size: 14px 14px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .dot-background { height: 105px; background-size: 13px 13px; } .dot-background::after { background-size: 13px 13px; } } /* ========================================================= PREMIUM INTERACTIVE DOT BACKGROUND ========================================================= */ .solutions-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient( 180deg, #ffffff 0%, #fbfdff 70%, #ffffff 100% ); } /* ========================================================= DOT AREA ========================================================= */ .dot-background { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 0; pointer-events: none; /* ALWAYS VISIBLE GREY DOTS */ background-image: radial-gradient( circle, rgba(175, 181, 191, .70) 2px, transparent 2.5px ); background-size: 15px 15px; background-position: center center; opacity: 1; } /* ========================================================= BLUE MOUSE DOTS ========================================================= */ .dot-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( circle, #1597f2 2px, transparent 2.6px ); background-size: 15px 15px; background-position: center center; /* Blue reveal around mouse */ -webkit-mask-image: radial-gradient( circle 145px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, black 22%, rgba(0,0,0,.90) 38%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.25) 68%, transparent 100% ); mask-image: radial-gradient( circle 145px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, black 22%, rgba(0,0,0,.90) 38%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.25) 68%, transparent 100% ); } /* ========================================================= SOFT BLUE MOUSE GLOW ========================================================= */ .dot-background::before { content: ""; position: absolute; width: 300px; height: 300px; left: var(--mouse-x, -500px); top: var(--mouse-y, -500px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(38, 145, 255, .13) 0%, rgba(38, 145, 255, .07) 28%, rgba(38, 145, 255, .025) 52%, transparent 72% ); opacity: var(--mouse-opacity, 0); transition: opacity .25s ease; } /* ========================================================= CONTENT ABOVE DOTS ========================================================= */ .solutions-section > .container { position: relative; z-index: 5; } /* ========================================================= FADE TOP + BOTTOM ========================================================= */ .dot-background { -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 10%, black 90%, transparent 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .dot-background { height: 140px; background-size: 14px 14px; } .dot-background::after { background-size: 14px 14px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .dot-background { height: 110px; background-size: 13px 13px; } .dot-background::after { background-size: 13px 13px; } } /* ========================================================= WHY CHOOSE US ========================================================= */ .why-section { position: relative; overflow: hidden; padding: 125px 0 180px; background: linear-gradient( 180deg, #f8fbff 0%, #f3f7fb 100% ); color: #17243b; isolation: isolate; } /* ========================================================= SOFT BACKGROUND GLOW ========================================================= */ .why-bg-glow { position: absolute; width: 650px; height: 650px; left: -280px; top: 5%; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(58, 130, 246, .075), transparent 68% ); z-index: -1; } /* ========================================================= CONTENT ========================================================= */ .why-content { max-width: 650px; } .why-eyebrow { display: inline-flex; align-items: center; margin-bottom: 17px; color: #1266ed; font-size: 13px; font-weight: 800; letter-spacing: 1.7px; } .why-eyebrow::before { content: ""; width: 30px; height: 2px; margin-right: 10px; border-radius: 10px; background: linear-gradient( 90deg, #1266ed, #21b7ec ); } .why-title { max-width: 620px; margin: 0 0 20px; font-size: clamp( 40px, 4.2vw, 56px ); line-height: 1.04; font-weight: 800; letter-spacing: -2.7px; color: #202b3d; } .why-title span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .why-description { max-width: 620px; margin: 0 0 28px; color: #65758e; font-size: 16px; line-height: 1.7; } /* ========================================================= FEATURES GRID ========================================================= */ .why-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; } .why-feature { display: flex; align-items: flex-start; gap: 14px; padding: 3px 0; } .why-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #1769ef; background: linear-gradient( 145deg, #e5f0ff, #d7e7fb ); border: 1px solid rgba(55, 120, 220, .10); box-shadow: 0 8px 20px rgba(35, 100, 200, .07); } .why-icon i { font-size: 20px; } .why-feature h4 { margin: 2px 0 5px; font-size: 15px; font-weight: 700; color: #263246; } .why-feature p { max-width: 220px; margin: 0; font-size: 13px; line-height: 1.6; color: #687992; } /* ========================================================= IMAGE ========================================================= */ .why-visual { position: relative; display: flex; justify-content: center; } .why-image-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / .88; overflow: hidden; border-radius: 22px; background: #dbe7f5; box-shadow: 0 28px 65px rgba(35, 65, 105, .16); } .why-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .why-image-wrap:hover img { transform: scale(1.035); } /* ========================================================= IMAGE OVERLAY ========================================================= */ .why-image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba(8, 25, 52, .40) ); pointer-events: none; } /* ========================================================= EXPERIENCE BADGE ========================================================= */ .experience-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); } .experience-badge strong { font-size: 56px; line-height: .95; font-weight: 800; letter-spacing: -2px; } .experience-badge span { margin-top: 7px; font-size: 17px; font-weight: 500; letter-spacing: .3px; } /* ========================================================= BOTTOM DOTS ========================================================= */ .why-bottom-dots { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; pointer-events: none; background-image: radial-gradient( circle, rgba(177, 184, 194, .70) 2px, transparent 2.5px ); background-size: 15px 15px; background-position: center; -webkit-mask-image: linear-gradient( to bottom, transparent, black 25%, black 100% ); mask-image: linear-gradient( to bottom, transparent, black 25%, black 100% ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .why-section { padding: 100px 0 150px; } .why-content { max-width: 100%; } .why-title { max-width: 700px; } .why-description { max-width: 700px; } .why-feature p { max-width: 300px; } .why-visual { margin-top: 25px; } .why-image-wrap { max-width: 650px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .why-section { padding: 75px 18px 125px; } .why-eyebrow { font-size: 11px; letter-spacing: 1.4px; } .why-title { font-size: 39px; line-height: 1.06; letter-spacing: -2px; margin-bottom: 18px; } .why-description { font-size: 14px; line-height: 1.7; margin-bottom: 30px; } .why-features { grid-template-columns: 1fr; gap: 20px; } .why-feature { gap: 13px; } .why-feature p { max-width: none; } .why-image-wrap { aspect-ratio: 1 / 1; border-radius: 18px; } .experience-badge strong { font-size: 48px; } .experience-badge span { font-size: 15px; } .why-bottom-dots { height: 85px; background-size: 13px 13px; } } /* ========================================================= OUR CLIENTS ========================================================= */ .clients-section { position: relative; overflow: hidden; padding: 80px 0 95px; background: #ffffff; color: #18243a; } /* ========================================================= HEADING ========================================================= */ .clients-heading { text-align: center; margin-bottom: 42px; } .clients-eyebrow { color: #1268ed; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; } .clients-heading h2 { margin: 0; font-size: clamp(40px, 4vw, 52px); font-weight: 800; letter-spacing: -2.5px; } .clients-heading h2 span { background: linear-gradient( 90deg, #2868ed, #08aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================= CLIENT MARQUEE ========================================================= */ /* ========================================================= CLIENT LOGO SLIDER ========================================================= */ .clients-marquee { position: relative; width: 100%; overflow: hidden; } /* left + right fade */ .clients-marquee::before, .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 180px; z-index: 5; pointer-events: none; } .clients-marquee::before { left: 0; background: linear-gradient( 90deg, #ffffff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } .clients-marquee::after { right: 0; background: linear-gradient( 270deg, #ffffff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } /* ========================================================= MOVING TRACK ========================================================= */ .clients-track { display: flex; align-items: center; width: max-content; gap: 65px; will-change: transform; } /* pause */ .clients-marquee:hover .clients-track { animation-play-state: paused; } /* seamless movement */ @keyframes clientLogoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================= EACH LOGO ========================================================= */ .client-logo { flex: 0 0 150px; width: 150px; height: 105px; display: flex; align-items: center; justify-content: center; padding: 10px; background: transparent; transition: transform .35s ease; } .client-logo img { display: block; max-width: 140px; max-height: 85px; width: auto; height: auto; object-fit: contain; opacity: .9; filter: grayscale(10%); transition: transform .4s ease, opacity .4s ease, filter .4s ease; } /* hover logo */ .client-logo:hover { transform: translateY(-5px); } .client-logo:hover img { transform: scale(1.12); opacity: 1; filter: grayscale(0%); } /* Bangabasi text logo */ .client-text { flex: 0 0 170px; width: 170px; font-size: 16px; font-weight: 700; color: #39465b; white-space: nowrap; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .clients-track { gap: 30px; animation-duration: 24s; } .client-logo { flex-basis: 115px; width: 115px; height: 80px; } .client-logo img { max-width: 105px; max-height: 65px; } .client-text { flex-basis: 130px; width: 130px; font-size: 13px; } .clients-marquee::before, .clients-marquee::after { width: 70px; } } /* ========================================================= CLIENT LOGO ========================================================= */ .client-logo { flex: 0 0 145px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 10px; } .client-logo img { max-width: 135px; max-height: 82px; width: auto; height: auto; object-fit: contain; filter: grayscale(15%); opacity: .92; transition: transform .4s ease, filter .4s ease, opacity .4s ease; } .client-logo:hover img { transform: scale(1.12); filter: grayscale(0%); opacity: 1; } .client-text { font-size: 15px; font-weight: 700; color: #3b4556; white-space: nowrap; } /* ========================================================= DOTS ========================================================= */ .clients-dots { position: absolute; left: 0; right: 0; height: 75px; pointer-events: none; background-image: radial-gradient( circle, rgba(180,185,194,.65) 2px, transparent 2.5px ); background-size: 15px 15px; } .clients-dots-top { top: 0; -webkit-mask-image: linear-gradient( to bottom, black, transparent ); mask-image: linear-gradient( to bottom, black, transparent ); } .clients-dots-bottom { bottom: 0; -webkit-mask-image: linear-gradient( to top, black, transparent ); mask-image: linear-gradient( to top, black, transparent ); } /* ========================================================= INDUSTRY / TESTIMONIAL SECTION ========================================================= */ .industry-section { position: relative; overflow: hidden; padding: 110px 0 125px; background: linear-gradient( 180deg, #f4f8fd, #edf4fc ); color: #17243a; isolation: isolate; } /* ========================================================= TECH GRID ========================================================= */ .industry-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: linear-gradient( rgba(67,125,210,.10) 1px, transparent 1px ), linear-gradient( 90deg, rgba(67,125,210,.10) 1px, transparent 1px ); background-size: 108px 108px; mask-image: linear-gradient( to bottom, black, transparent 85% ); -webkit-mask-image: linear-gradient( to bottom, black, transparent 85% ); } /* ========================================================= GLOWS ========================================================= */ .industry-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(3px); } .industry-glow-1 { width: 450px; height: 450px; left: -260px; top: 15%; background: radial-gradient( circle, rgba(43,124,246,.10), transparent 70% ); } .industry-glow-2 { width: 400px; height: 400px; right: -230px; bottom: 0; background: radial-gradient( circle, rgba(10,174,225,.09), transparent 70% ); } /* ========================================================= HEADING ========================================================= */ .industry-heading { position: relative; z-index: 3; margin-bottom: 50px; } .industry-eyebrow { color: #216de8; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 14px; } .industry-heading h2 { margin: 0; font-size: clamp(38px, 4.5vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -2.5px; } .industry-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .industry-heading > p { margin: 16px auto 20px; max-width: 550px; color: #6d7d94; font-size: 15px; } /* ========================================================= DRAG HINT ========================================================= */ .drag-hint { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 30px; background: rgba(255,255,255,.75); border: 1px solid rgba(61,120,210,.10); box-shadow: 0 8px 25px rgba(45,90,150,.06); color: #687b96; font-size: 13px; } .drag-hint i { color: #2772ed; animation: dragIcon 1.8s ease-in-out infinite; } @keyframes dragIcon { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* ========================================================= PREMIUM TESTIMONIAL CAROUSEL ========================================================= */ .industry-section { position: relative; overflow: hidden; padding: 115px 0 120px; background: radial-gradient( circle at 50% 20%, rgba(70,140,255,.10), transparent 35% ), linear-gradient( 180deg, #f5f9ff 0%, #edf4fc 100% ); } /* ========================================================= BACKGROUND GRID ========================================================= */ .industry-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(67,125,210,.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(67,125,210,.09) 1px, transparent 1px ); background-size: 108px 108px; mask-image: linear-gradient( to bottom, black, transparent 90% ); -webkit-mask-image: linear-gradient( to bottom, black, transparent 90% ); } /* ========================================================= SOFT GLOWS ========================================================= */ .industry-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .industry-glow-1 { width: 500px; height: 500px; left: -280px; top: 20%; background: radial-gradient( circle, rgba(43,124,246,.11), transparent 70% ); } .industry-glow-2 { width: 450px; height: 450px; right: -250px; bottom: 0; background: radial-gradient( circle, rgba(10,174,225,.10), transparent 70% ); } /* ========================================================= HEADING ========================================================= */ .industry-heading { position: relative; z-index: 5; text-align: center; margin-bottom: 55px; } .industry-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #216de8; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; margin-bottom: 14px; } .industry-heading h2 { margin: 0; font-size: clamp(40px, 4.5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -2.8px; color: #17243a; } .industry-heading h2 span { background: linear-gradient( 90deg, #2868ed, #09aee4 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .industry-heading h2 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 10px; background: linear-gradient( 90deg, #2868ed, #09aee4 ); opacity: .25; } .industry-heading > p { margin: 18px auto 22px; max-width: 560px; color: #6d7d94; font-size: 15px; line-height: 1.7; } /* ========================================================= DRAG HINT ========================================================= */ .drag-hint { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 30px; background: rgba(255,255,255,.82); border: 1px solid rgba(61,120,210,.12); box-shadow: 0 10px 30px rgba(45,90,150,.07); color: #687b96; font-size: 12px; backdrop-filter: blur(10px); } .drag-hint i { color: #2772ed; animation: dragIcon 1.8s ease-in-out infinite; } @keyframes dragIcon { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(5px); } } /* ========================================================= VIEWPORT ========================================================= */ .testimonial-viewport { position: relative; z-index: 4; width: 100%; overflow: hidden; cursor: grab; padding: 35px 0 45px; touch-action: pan-y; user-select: none; } .testimonial-viewport:active { cursor: grabbing; } /* ========================================================= TRACK ========================================================= */ .testimonial-track { display: flex; align-items: stretch; gap: 25px; width: max-content; padding: 10px 0 30px; will-change: transform; } /* ========================================================= CARD ========================================================= */ .testimonial-card { position: relative; flex: 0 0 390px; min-height: 305px; padding: 30px; border-radius: 24px; background: rgba(255,255,255,.88); border: 1px solid rgba(67,120,205,.13); box-shadow: 0 18px 50px rgba(35,75,125,.09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: scale(.94) translateY(12px); opacity: .72; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s ease, box-shadow .65s ease, border-color .65s ease; overflow: hidden; } /* ========================================================= CARD GLOW ========================================================= */ .testimonial-card::before { content: ""; position: absolute; width: 180px; height: 180px; top: -100px; right: -80px; border-radius: 50%; background: radial-gradient( circle, rgba(48,125,255,.14), transparent 70% ); pointer-events: none; } /* bottom blue line */ .testimonial-card::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 3px; border-radius: 10px 10px 0 0; background: linear-gradient( 90deg, #2868ed, #09aee4 ); transform: scaleX(0); transform-origin: center; transition: transform .6s ease; } /* ========================================================= ACTIVE CARD ========================================================= */ .testimonial-card.active { transform: scale(1) translateY(-8px); opacity: 1; border-color: rgba(42,113,230,.28); box-shadow: 0 30px 75px rgba(36,87,157,.17); z-index: 3; } .testimonial-card.active::after { transform: scaleX(1); } /* ========================================================= FEATURED ========================================================= */ .testimonial-card.featured { background: linear-gradient( 145deg, #ffffff, #eef6ff ); } /* ========================================================= TOP AREA ========================================================= */ .testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; } /* ========================================================= QUOTE ICON ========================================================= */ .quote-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #2673ed; background: linear-gradient( 145deg, #e8f1ff, #dcecff ); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .quote-icon i { font-size: 24px; } /* ========================================================= STARS ========================================================= */ .testimonial-stars { color: #f5b63b; font-size: 13px; letter-spacing: 2px; text-shadow: 0 3px 10px rgba(245,182,59,.22); } /* ========================================================= REVIEW TEXT ========================================================= */ .testimonial-text { margin: 0; min-height: 110px; color: #53647d; font-size: 15px; line-height: 1.8; position: relative; } .testimonial-text::before { content: "“"; position: absolute; left: -5px; top: -28px; font-size: 65px; line-height: 1; color: rgba(48,124,240,.10); font-weight: 900; pointer-events: none; } /* ========================================================= AUTHOR ========================================================= */ .testimonial-author { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(62,112,185,.10); } /* ========================================================= AVATAR ========================================================= */ .author-avatar { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; font-size: 16px; background: linear-gradient( 135deg, #347bf4, #0aaddd ); box-shadow: 0 9px 22px rgba(40,110,230,.25); position: relative; } .author-avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(52,123,244,.20); animation: avatarPulse 2.4s ease-out infinite; } @keyframes avatarPulse { 0% { transform: scale(.9); opacity: .8; } 70% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } } .testimonial-author strong { display: block; color: #243249; font-size: 14px; font-weight: 800; } .testimonial-author span { display: block; margin-top: 4px; color: #8090a6; font-size: 11px; letter-spacing: .3px; } /* ========================================================= CONTROLS ========================================================= */ .testimonial-controls { position: relative; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 5px; } /* ========================================================= ARROWS ========================================================= */ .testimonial-arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(42,112,226,.15); background: rgba(255,255,255,.9); color: #2871e8; font-size: 17px; cursor: pointer; box-shadow: 0 8px 25px rgba(45,90,150,.08); transition: .3s ease; } .testimonial-arrow:hover { color: #fff; background: linear-gradient( 135deg, #367cf3, #2259d7 ); transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 30px rgba(43,104,220,.24); } .testimonial-arrow:active { transform: scale(.94); } /* ========================================================= PROGRESS ========================================================= */ .testimonial-progress { width: 130px; height: 5px; overflow: hidden; border-radius: 20px; background: rgba(67,116,184,.12); } .testimonial-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #2872ed, #0bb1df ); transition: width .5s ease; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .industry-section { padding: 80px 0 90px; } .industry-heading { margin-bottom: 35px; } .industry-heading h2 { font-size: 38px; letter-spacing: -2px; } .industry-heading > p { padding: 0 20px; font-size: 13px; } .drag-hint { font-size: 11px; padding: 8px 13px; } .testimonial-viewport { padding: 25px 0 35px; } .testimonial-track { gap: 16px; } .testimonial-card { flex: 0 0 calc(100vw - 45px); min-height: 285px; padding: 24px; border-radius: 20px; } .testimonial-text { font-size: 14px; min-height: 100px; } .testimonial-controls { gap: 12px; } .testimonial-arrow { width: 44px; height: 44px; } .testimonial-progress { width: 90px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .clients-section { padding: 65px 0 75px; } .clients-heading { margin-bottom: 25px; } .clients-track { gap: 25px; animation-duration: 28s; } .client-logo { flex-basis: 115px; height: 80px; } .client-logo img { max-width: 105px; max-height: 65px; } .clients-dots { height: 55px; background-size: 13px 13px; } .industry-section { padding: 75px 0 90px; } .industry-heading { margin-bottom: 35px; } .industry-heading h2 { font-size: 38px; letter-spacing: -1.8px; } .drag-hint { font-size: 11px; padding: 8px 13px; } .testimonial-track { gap: 16px; padding-left: 18px; padding-right: 18px; } .testimonial-card { flex-basis: calc(100vw - 50px); min-height: 270px; padding: 24px; border-radius: 18px; } .testimonial-text { font-size: 14px; } .testimonial-controls { margin-top: 5px; } } /* ========================================================= EBLUESYS CLIENT LOGO — INFINITE MARQUEE ========================================================= */ .clients-marquee { position: relative; width: 100%; overflow: hidden; isolation: isolate; } .clients-track { display: flex; align-items: center; width: max-content; flex-wrap: nowrap; gap: 55px; animation: ebluesysClientMarquee 35s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); /* IMPORTANT */ min-width: max-content; } /* --------------------------------------------------------- INFINITE LOOP --------------------------------------------------------- */ @keyframes ebluesysClientMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* --------------------------------------------------------- LOGO ITEM --------------------------------------------------------- */ .clients-track .client-logo { flex: 0 0 145px; width: 145px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 8px; white-space: nowrap; transform: translateZ(0); transition: transform .35s ease; } .clients-track .client-logo img { display: block; width: auto; height: auto; max-width: 135px; max-height: 82px; object-fit: contain; opacity: .92; filter: grayscale(15%); transition: transform .35s ease, opacity .35s ease, filter .35s ease; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .clients-track .client-logo:hover { transform: translateY(-5px); } .clients-track .client-logo:hover img { transform: scale(1.1); opacity: 1; filter: grayscale(0%); } /* Bangabasi */ .clients-track .client-text { flex: 0 0 170px; width: 170px; font-size: 15px; font-weight: 700; color: #3b4556; white-space: nowrap; } /* --------------------------------------------------------- EDGE FADE --------------------------------------------------------- */ .clients-marquee::before, .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 150px; z-index: 10; pointer-events: none; } .clients-marquee::before { left: 0; background: linear-gradient( 90deg, #fff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } .clients-marquee::after { right: 0; background: linear-gradient( 270deg, #fff 0%, rgba(255,255,255,.85) 30%, transparent 100% ); } /* --------------------------------------------------------- HOVER PAUSE --------------------------------------------------------- */ .clients-marquee:hover .clients-track { animation-play-state: paused; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .clients-track { gap: 38px; animation-duration: 30s; } .clients-track .client-logo { flex-basis: 125px; width: 125px; height: 90px; } .clients-track .client-logo img { max-width: 115px; max-height: 72px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { .clients-track { gap: 28px; animation-duration: 24s; } .clients-track .client-logo { flex-basis: 105px; width: 105px; height: 75px; } .clients-track .client-logo img { max-width: 95px; max-height: 60px; } .clients-track .client-text { flex-basis: 125px; width: 125px; font-size: 12px; } .clients-marquee::before, .clients-marquee::after { width: 60px; } } /* ========================================================= IMPORTANT: Don't let the global reduced-motion rule kill this slider ========================================================= */ @media (prefers-reduced-motion: reduce) { .clients-track { animation: ebluesysClientMarquee 35s linear infinite !important; } } /* Foter */ /* ===================================================== ROOT ===================================================== */ /* :root { --blue: #2868ed; --blue-dark: #1855d5; --cyan: #08b9e8; --dark: #142b4d; --dark-2: #0c203e; --text: #f8f8fa; --muted: #f5f7fa; --light-blue: #edf5ff; } */ /* ===================================================== GLOBAL ===================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; background: #ffffff; color: var(--text); overflow-x: hidden; } a { text-decoration: none; } /* ===================================================== DEMO SPACE ===================================================== */ .demo-space { min-height: 55vh; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 20%, rgba(48,120,240,.08), transparent 35% ), #ffffff; } .demo-space h1 { font-size: clamp(35px, 5vw, 70px); font-weight: 800; letter-spacing: -3px; } .demo-space span { color: var(--blue); } /* ===================================================== CTA SECTION ===================================================== */ .cta-section { position: relative; padding: 90px 20px 100px; overflow: hidden; background: #ffffff; } /* ===================================================== DOT BACKGROUND ===================================================== */ .cta-dots { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient( rgba(34,91,170,.18) 1.5px, transparent 1.5px ); background-size: 16px 16px; mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent ); -webkit-mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent ); } /* ===================================================== CTA GLOW ===================================================== */ .cta-glow { position: absolute; width: 550px; height: 550px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(42,112,240,.13), transparent 68% ); pointer-events: none; transition: transform 1s ease, opacity .8s ease; } /* ===================================================== CTA CARD ===================================================== */ .cta-card { position: relative; z-index: 2; max-width: 1080px; margin: auto; padding: 58px 65px; min-height: 250px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 30px; border: 1px solid rgba(45,110,230,.15); background: linear-gradient( 135deg, #edf5ff 0%, #e7f1ff 100% ); box-shadow: 0 20px 55px rgba(38,90,160,.10); overflow: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .5s ease; } /* ===================================================== CTA BACKGROUND ORB ===================================================== */ .cta-card::before { content: ""; position: absolute; width: 450px; height: 450px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(54,128,240,.13), transparent 70% ); transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease; pointer-events: none; } /* ===================================================== CTA SHINE ===================================================== */ .cta-card::after { content: ""; position: absolute; top: -50%; left: -120%; width: 55%; height: 200%; transform: skewX(-20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); transition: left 1s ease; pointer-events: none; } /* ===================================================== CTA HOVER ===================================================== */ .cta-card:hover { transform: translateY(-10px); border-color: rgba(40,104,237,.32); box-shadow: 0 35px 85px rgba(35,88,165,.20); } .cta-card:hover::before { transform: translate(-50%, -50%) scale(1.45); } .cta-card:hover::after { left: 140%; } /* ===================================================== CTA CONTENT ===================================================== */ .cta-content { position: relative; z-index: 3; } .cta-label { display: block; margin-bottom: 10px; color: #6c82a2; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; } .cta-title { margin: 0; color: var(--text); font-size: clamp(23px, 3vw, 32px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.2; transition: color .4s ease; } .cta-title span { color: var(--blue); } .cta-card:hover .cta-title { color: #0e376f; } /* ===================================================== CTA DESCRIPTION ===================================================== */ .cta-description { margin-top: 12px; max-width: 560px; color: #71829b; font-size: 14px; line-height: 1.7; } /* ===================================================== CTA BUTTON WRAPPER ===================================================== */ .cta-actions { position: relative; z-index: 5; display: flex; gap: 12px; flex-shrink: 0; } /* ===================================================== CTA BUTTON ===================================================== */ .cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 145px; padding: 14px 21px; border-radius: 14px; border: 1px solid transparent; font-size: 13px; font-weight: 700; color: #ffffff; background: linear-gradient( 135deg, #2868ed, #1556d7 ); box-shadow: 0 12px 30px rgba(39,105,235,.25); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } .cta-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80% ); transform: translateX(-120%); transition: transform .7s ease; } .cta-btn:hover { color: #ffffff; transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 40px rgba(39,105,235,.38); } .cta-btn:hover::before { transform: translateX(120%); } .cta-btn i { transition: transform .35s ease; } .cta-btn:hover i { transform: translate(4px, -3px); } /* ===================================================== SECOND BUTTON ===================================================== */ .cta-btn.secondary { color: #2868ed; background: rgba(255,255,255,.72); border-color: rgba(40,104,237,.18); box-shadow: 0 8px 20px rgba(35,90,150,.06); } .cta-btn.secondary:hover { color: #ffffff; background: linear-gradient( 135deg, #2868ed, #1556d7 ); } /* ===================================================== FOOTER ===================================================== */ .site-footer { position: relative; background: linear-gradient( 135deg, #142b4d 0%, #102644 55%, #0c203e 100% ); color: #ffffff; overflow: hidden; } /* ===================================================== FOOTER GRID ===================================================== */ .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 70px 70px; mask-image: linear-gradient( to bottom, black, transparent 95% ); } /* ===================================================== FOOTER GLOW ===================================================== */ .footer-glow { position: absolute; width: 450px; height: 450px; right: -250px; top: -220px; border-radius: 50%; background: radial-gradient( circle, rgba(22,132,230,.18), transparent 70% ); pointer-events: none; animation: footerGlow 7s ease-in-out infinite; } @keyframes footerGlow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } } /* ===================================================== FOOTER MAIN ===================================================== */ .footer-main { position: relative; z-index: 2; padding: 75px 0 50px; } /* ===================================================== FOOTER BRAND ===================================================== */ .footer-brand img { max-width: 205px; height: auto; margin-bottom: 20px; transition: transform .4s ease, filter .4s ease; } .footer-brand img:hover { transform: scale(1.04); filter: drop-shadow( 0 8px 22px rgba(0,170,255,.25) ); } .footer-description { max-width: 280px; color: #aebbd0; font-size: 13px; line-height: 1.8; } /* ===================================================== FOOTER COLUMN ===================================================== */ .footer-column { position: relative; transition: transform .45s cubic-bezier(.2,.8,.2,1); } .footer-column:hover { transform: translateY(-5px); } /* ===================================================== FOOTER TITLE ===================================================== */ .footer-title { position: relative; display: inline-block; margin-bottom: 23px; color: #ffffff; font-size: 15px; font-weight: 800; } .footer-title::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, #2872ed, #08b9e8 ); transition: width .45s ease; } .footer-column:hover .footer-title::after { width: 100%; } /* ===================================================== FOOTER LINKS ===================================================== */ .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: 13px; } .footer-links a { position: relative; display: inline-block; color: #aebbd0; font-size: 13px; transition: color .3s ease, transform .3s ease; } .footer-links a::before { content: "→"; position: absolute; left: -18px; color: #2f7af3; opacity: 0; transform: translateX(-5px); transition: opacity .3s ease, transform .3s ease; } .footer-links a:hover { color: #ffffff; transform: translateX(5px); } .footer-links a:hover::before { opacity: 1; transform: translateX(0); } /* ===================================================== CONTACT ===================================================== */ .footer-contact { display: flex; gap: 12px; margin-bottom: 17px; color: #aebbd0; font-size: 13px; line-height: 1.6; } .footer-contact i { color: #2580ef; font-size: 15px; flex-shrink: 0; transition: transform .35s ease; } .footer-contact:hover i { transform: scale(1.2) rotate(-8deg); } /* ===================================================== SOCIAL ===================================================== */ .social-links { display: flex; gap: 10px; margin-top: 22px; } .social-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #dce8fa; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); transition: transform .4s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .35s ease; } .social-link:hover { color: #ffffff; transform: translateY(-6px) rotate(-4deg); background: linear-gradient( 135deg, #2868ed, #08aee4 ); box-shadow: 0 14px 30px rgba(20,110,235,.30); } /* ===================================================== FOOTER BOTTOM ===================================================== */ .footer-bottom { position: relative; z-index: 2; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.10); } .copyright { color: #91a2bb; font-size: 12px; } .footer-policy { display: flex; gap: 28px; } .footer-policy a { color: #91a2bb; font-size: 12px; transition: color .3s ease; } .footer-policy a:hover { color: #ffffff; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 991px) { .cta-card { padding: 45px 40px; } .footer-main { padding: 60px 0 40px; } } @media (max-width: 767px) { .cta-section { padding: 65px 15px 75px; } .cta-card { padding: 35px 25px; min-height: auto; flex-direction: column; align-items: flex-start; gap: 28px; border-radius: 23px; } .cta-actions { width: 100%; flex-direction: column; } .cta-btn { width: 100%; } .footer-main { padding: 55px 20px 35px; } .footer-column { margin-top: 35px; } .footer-bottom { padding: 20px; } .footer-bottom .row { gap: 15px; } .footer-policy { gap: 15px; flex-wrap: wrap; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* About Page */ /* ========================================================= ABOUT PAGE ========================================================= */ .about-page { --about-bg: #080e1b; --about-bg-soft: #0c1323; --about-blue: #2f70ed; --about-blue-light: #4d91ff; --about-text: #f2f6ff; --about-muted: #8491a7; --about-border: rgba(112,145,205,.16); position: relative; overflow: hidden; background: var(--about-bg); color: var(--about-text); } /* ========================================================= COMMON CONTAINER ========================================================= */ .about-container { width: min( 1180px, calc(100% - 40px) ); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .about-hero { position: relative; min-height: 680px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient( circle at 50% 38%, rgba(32,91,190,.18), transparent 35% ), #080e1b; } /* GRID */ .about-grid { position: absolute; inset: 0; background-image: linear-gradient( rgba(86,119,178,.075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(86,119,178,.075) 1px, transparent 1px ); background-size: 65px 65px; mask-image: linear-gradient( to bottom, black 0%, rgba(0,0,0,.8) 55%, transparent 100% ); } /* GLOW */ .about-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .22; } .about-glow-one { top: 20%; left: 25%; background: #125de0; animation: aboutGlowOne 9s ease-in-out infinite alternate; } .about-glow-two { top: 35%; right: 20%; background: #007bb7; animation: aboutGlowTwo 11s ease-in-out infinite alternate; } @keyframes aboutGlowOne { from { transform: translate(-50px,-20px) scale(.8); } to { transform: translate(80px,40px) scale(1.15); } } @keyframes aboutGlowTwo { from { transform: translate(60px,30px) scale(.85); } to { transform: translate(-80px,-40px) scale(1.1); } } /* HERO CONTENT */ .about-hero-content { position: relative; z-index: 2; width: min( 850px, calc(100% - 40px) ); text-align: center; margin-top: 30px; } /* EYEBROW */ .about-eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 24px; color: #5799ef; font-size: 11px; font-weight: 700; letter-spacing: 3px; } .about-eyebrow span { width: 1px; height: 12px; background: #3979c8; } /* TITLE */ .about-title { margin: 0; font-size: clamp(80px, 10vw, 142px); line-height: .78; font-weight: 800; letter-spacing: -7px; color: #f8faff; } .about-title span { display: block; margin-top: 17px; font-weight: 300; color: transparent; -webkit-text-stroke: 1.5px #3975c7; text-shadow: 0 0 30px rgba(47,112,237,.15); } /* INTRO */ .about-intro { max-width: 650px; margin: 35px auto 0; color: #8792a6; font-size: 18px; line-height: 1.65; } /* SCROLL */ .about-scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 62px; color: #586478; font-size: 9px; letter-spacing: 2px; } .scroll-line { position: relative; width: 1px; height: 28px; background: #2d75df; overflow: hidden; } .scroll-line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #fff; animation: scrollDrop 1.8s ease-in-out infinite; } @keyframes scrollDrop { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* ========================================================= MARQUEE ========================================================= */ /* ========================================================= ABOUT MARQUEE ========================================================= */ .about-marquee { position: relative; z-index: 5; width: 100%; height: 57px; overflow: hidden; display: flex; align-items: center; background: linear-gradient( 90deg, #2256d2, #2e6eed, #2256d2 ); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } /* Moving container */ .marquee-track { display: flex; flex-shrink: 0; width: max-content; min-width: max-content; will-change: transform; animation: aboutMarquee 25s linear infinite; animation-play-state: running; } /* Each repeated group */ .marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: 27px; padding-right: 27px; white-space: nowrap; } /* Text */ .marquee-group span { flex-shrink: 0; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; } .marquee-group b { flex-shrink: 0; color: rgba(255,255,255,.35); font-size: 14px; } /* ========================================================= MARQUEE ANIMATION ========================================================= */ @keyframes aboutMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ========================================================= STORY ========================================================= */ .about-story { position: relative; padding: 125px 0 135px; background: #090f1d; } .section-number { color: #3f83ed; font-size: 11px; font-weight: 700; letter-spacing: 2px; } .story-label { display: flex; align-items: center; gap: 14px; margin-bottom: 55px; color: #68758a; font-size: 10px; letter-spacing: 2px; } .story-label::after { content: ""; width: 90px; height: 1px; background: rgba(81,126,202,.25); } .story-layout { display: grid; grid-template-columns: .95fr 1fr; gap: 100px; } .story-heading h2 { margin: 0; max-width: 530px; font-size: clamp(42px, 5vw, 68px); line-height: 1.03; letter-spacing: -3px; } .story-heading h2 span { color: #3275eb; } .story-content { padding-top: 7px; } .story-content p { margin: 0 0 22px; color: #77849a; font-size: 15px; line-height: 1.85; } .story-content .story-lead { color: #c4ccda; font-size: 19px; line-height: 1.65; } .story-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: #5c9cff; font-size: 12px; font-weight: 700; } .story-link:hover { color: #fff; } .story-link i { transition: transform .3s ease; } .story-link:hover i { transform: translate(4px,-4px); } /* STORY VISUAL */ .story-visual { position: relative; min-height: 260px; margin-top: 100px; border: 1px solid var(--about-border); border-radius: 28px; overflow: hidden; background: radial-gradient( circle at 50% 50%, rgba(34,104,221,.16), transparent 45% ), #0b1425; } .story-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(90,130,190,.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(90,130,190,.05) 1px, transparent 1px ); background-size: 42px 42px; } .story-card { position: absolute; z-index: 2; border: 1px solid rgba(98,145,220,.2); background: rgba(15,29,53,.78); backdrop-filter: blur(15px); box-shadow: 0 20px 50px rgba(0,0,0,.25); } .story-card-main { left: 9%; top: 50%; transform: translateY(-50%); width: 260px; padding: 27px; border-radius: 20px; } .story-card-number { display: block; color: #4d8cf1; font-size: 53px; line-height: 1; font-weight: 800; } .story-card-label { display: block; margin-top: 9px; color: #8492a8; font-size: 12px; } .story-card-small { right: 10%; bottom: 25px; display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-radius: 14px; color: #bdc8da; font-size: 11px; } .story-card-small i { color: #4a91ff; } .story-orbit { position: absolute; right: 15%; top: 30px; width: 160px; height: 160px; border: 1px solid rgba(67,130,232,.28); border-radius: 50%; animation: orbitRotate 12s linear infinite; } .story-orbit::before, .story-orbit::after { content: ""; position: absolute; border: 1px solid rgba(67,130,232,.16); border-radius: 50%; } .story-orbit::before { inset: 22px; } .story-orbit::after { inset: 45px; } .story-orbit span { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #4b91ff; box-shadow: 0 0 18px #4b91ff; } @keyframes orbitRotate { to { transform: rotate(360deg); } } /* ========================================================= MISSION ========================================================= */ /* ========================================================= 4 PHILOSOPHY CARDS — ONE LINE / SAME HEIGHT ========================================================= */ .mission-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; gap: 18px !important; align-items: stretch !important; } /* ALL FOUR CARDS SAME HEIGHT */ .philosophy-card { width: 100% !important; min-width: 0 !important; height: 280px !important; min-height: 280px !important; max-height: 280px !important; box-sizing: border-box !important; } /* prevent old large-card rule from changing size */ .mission-card-large { grid-column: auto !important; width: 100% !important; height: 280px !important; min-height: 280px !important; max-height: 280px !important; } /* ========================================================= DESKTOP — FORCE 4 COLUMNS ========================================================= */ @media (min-width: 992px) { .mission-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .philosophy-card { height: 280px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .philosophy-card { height: 250px !important; min-height: 250px !important; max-height: 250px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .mission-grid { grid-template-columns: 1fr !important; } .philosophy-card, .mission-card-large { height: auto !important; min-height: 220px !important; max-height: none !important; } } /* ========================================================= VALUES ========================================================= */ .values-section { padding: 130px 0; background: #0b1220; } .values-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; } .values-heading { position: sticky; top: 130px; align-self: start; } .values-heading h2 { margin: 0; max-width: 400px; font-size: clamp(42px,4vw,62px); line-height: 1; letter-spacing: -3px; } .values-heading h2 span { color: #347bf0; } .values-heading p { max-width: 360px; margin-top: 25px; color: #748198; font-size: 14px; line-height: 1.8; } .values-list { border-top: 1px solid rgba(94,130,194,.16); } .value-item { position: relative; display: grid; grid-template-columns: 45px 48px 1fr 30px; align-items: center; gap: 15px; padding: 28px 4px; border-bottom: 1px solid rgba(94,130,194,.16); transition: padding .35s ease; } .value-item:hover { padding-left: 12px; padding-right: 12px; } .value-number { color: #40506a; font-size: 10px; letter-spacing: 1px; } .value-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #5497ff; background: rgba(52,123,240,.08); font-size: 16px; } .value-content h3 { margin: 0; color: #e7edf7; font-size: 17px; } .value-content p { margin: 5px 0 0; color: #68768d; font-size: 11px; line-height: 1.6; } .value-arrow { color: #43526b; transition: transform .3s ease, color .3s ease; } .value-item:hover .value-arrow { color: #5597ff; transform: translate(3px,-3px); } /* ========================================================= OUR JOURNEY — PREMIUM TIMELINE ========================================================= */ .journey-section { position: relative; padding: 135px 0 150px; overflow: hidden; background: radial-gradient( circle at 50% 35%, rgba(45, 110, 255, .055), transparent 35% ), #080e1a; } /* ========================================================= BACKGROUND GRID ========================================================= */ .journey-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(85, 130, 210, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(85, 130, 210, .025) 1px, transparent 1px ); background-size: 64px 64px; mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent ); } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .journey-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; filter: blur(100px); opacity: .08; } .journey-glow-left { left: -230px; top: 25%; background: #277cff; animation: journeyGlowLeft 9s ease-in-out infinite alternate; } .journey-glow-right { right: -230px; bottom: 15%; background: #704cff; animation: journeyGlowRight 11s ease-in-out infinite alternate; } @keyframes journeyGlowLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100px, -60px, 0); } } @keyframes journeyGlowRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100px, -50px, 0); } } /* ========================================================= HEADER ========================================================= */ .journey-header { position: relative; z-index: 2; max-width: 720px; margin: 0 auto 80px; text-align: center; } .journey-kicker { display: block; margin-bottom: 15px; font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #53a0ff; } .journey-header h2 { margin: 0; font-size: clamp(43px, 5vw, 62px); line-height: 1.05; font-weight: 750; letter-spacing: -2.5px; color: #f5f7ff; } .journey-header h2 span { color: #579fff; text-shadow: 0 0 35px rgba(67,145,255,.18); } .journey-header p { max-width: 580px; margin: 20px auto 0; font-size: 14px; line-height: 1.75; color: rgba(202,211,230,.50); } /* ========================================================= TIMELINE WRAPPER ========================================================= */ .journey-timeline { position: relative; max-width: 1080px; margin: 0 auto; padding: 10px 0 30px; } /* ========================================================= CENTER LINE ========================================================= */ .journey-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient( to bottom, transparent, rgba(65,125,220,.22) 8%, rgba(65,125,220,.22) 92%, transparent ); z-index: 1; } .journey-line-progress { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient( to bottom, #277eff, #579fff, rgba(87,159,255,.15) ); box-shadow: 0 0 12px rgba(65,140,255,.45); transition: height .15s linear; } /* ========================================================= TIMELINE ITEM ========================================================= */ .journey-item { position: relative; display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; min-height: 245px; z-index: 2; } /* ========================================================= LEFT / RIGHT CARD POSITION ========================================================= */ .journey-left .journey-card { grid-column: 1; justify-self: end; } .journey-left .journey-dot { grid-column: 2; } .journey-right .journey-card { grid-column: 3; justify-self: start; } .journey-right .journey-dot { grid-column: 2; grid-row: 1; } /* ========================================================= CARD ========================================================= */ .journey-card { position: relative; width: 100%; max-width: 480px; min-height: 190px; padding: 27px 30px; overflow: hidden; border-radius: 17px; border: 1px solid rgba(120,150,205,.13); background: linear-gradient( 145deg, rgba(24,34,61,.78), rgba(12,19,35,.88) ); box-shadow: 0 18px 50px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease, background .45s ease; } /* ========================================================= CARD LIGHT ========================================================= */ .journey-card::before { content: ""; position: absolute; width: 210px; height: 210px; right: -120px; top: -120px; border-radius: 50%; background: rgba(55,135,255,.30); filter: blur(65px); opacity: 0; transition: opacity .5s ease, transform .6s ease; pointer-events: none; } /* ========================================================= CARD TOP ========================================================= */ .journey-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; } .journey-year { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -1px; color: #4d91ff; text-shadow: 0 0 25px rgba(55,135,255,.15); } .journey-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px solid rgba(63,137,255,.20); background: rgba(45,115,255,.07); color: #4c98ff; font-size: 16px; transition: transform .45s ease, box-shadow .45s ease; } /* ========================================================= LABEL ========================================================= */ .journey-label { display: block; margin-bottom: 8px; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(120,145,185,.48); } /* ========================================================= TITLE ========================================================= */ .journey-card h3 { position: relative; margin: 0 0 9px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; color: #f2f5fb; } /* ========================================================= DESCRIPTION ========================================================= */ .journey-card p { position: relative; max-width: 400px; margin: 0; font-size: 12px; line-height: 1.7; color: rgba(190,202,223,.50); } /* ========================================================= CARD BOTTOM LINE ========================================================= */ .journey-card-line { position: absolute; left: 30px; right: 30px; bottom: 16px; height: 1px; overflow: hidden; background: rgba(110,140,190,.08); } .journey-card-line span { display: block; width: 70px; height: 100%; background: linear-gradient( 90deg, transparent, #4e98ff, transparent ); transform: translateX(-100px); transition: transform .7s ease; } /* ========================================================= TIMELINE DOT ========================================================= */ .journey-dot { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; z-index: 4; } .journey-dot::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: rgba(45,125,255,.07); border: 1px solid rgba(65,140,255,.15); box-shadow: 0 0 25px rgba(55,135,255,.12); transition: transform .4s ease, background .4s ease; } .journey-dot span { position: relative; width: 13px; height: 13px; border-radius: 50%; background: #428cff; border: 3px solid #182a4c; box-shadow: 0 0 0 2px rgba(67,140,255,.30), 0 0 22px rgba(55,135,255,.65); transition: transform .4s ease, box-shadow .4s ease; } /* ========================================================= HOVER ========================================================= */ .journey-card:hover { transform: translateY(-7px); border-color: rgba(70,145,255,.34); background: linear-gradient( 145deg, rgba(27,42,76,.90), rgba(12,20,38,.96) ); box-shadow: 0 28px 65px rgba(0,0,0,.32), 0 0 35px rgba(50,130,255,.09), inset 0 1px 0 rgba(255,255,255,.05); } .journey-card:hover::before { opacity: .25; transform: scale(1.4); } .journey-card:hover .journey-icon { transform: rotate(-6deg) scale(1.1); box-shadow: 0 0 25px rgba(55,135,255,.15); } .journey-card:hover .journey-card-line span { transform: translateX(450px); } .journey-item:hover .journey-dot::before { transform: scale(1.2); background: rgba(55,135,255,.14); } .journey-item:hover .journey-dot span { transform: scale(1.2); box-shadow: 0 0 0 3px rgba(67,140,255,.22), 0 0 30px rgba(55,135,255,.80); } /* ========================================================= CURRENT / NOW ========================================================= */ .journey-current .journey-card { border-color: rgba(70,145,255,.25); background: linear-gradient( 145deg, rgba(27,43,77,.78), rgba(12,20,38,.92) ); } .journey-current .journey-year { color: #62a7ff; } .journey-current .journey-dot span { animation: journeyPulse 2.4s ease-in-out infinite; } @keyframes journeyPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(67,140,255,.25), 0 0 18px rgba(55,135,255,.45); } 50% { box-shadow: 0 0 0 7px rgba(67,140,255,.08), 0 0 32px rgba(55,135,255,.75); } } /* ========================================================= FOOTER STATEMENT ========================================================= */ .journey-footer { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 65px; } .journey-footer span { width: 55px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(72,145,255,.35) ); } .journey-footer span:last-child { background: linear-gradient( 90deg, rgba(72,145,255,.35), transparent ); } .journey-footer p { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: rgba(150,170,205,.38); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .journey-section { padding: 110px 0 120px; } .journey-header { margin-bottom: 60px; } .journey-timeline { max-width: 760px; } .journey-item { grid-template-columns: 1fr 55px 1fr; } .journey-dot { width: 55px; } .journey-card { max-width: 340px; padding: 24px 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .journey-section { padding: 90px 0 100px; } .journey-header { margin-bottom: 50px; } .journey-header h2 { font-size: 40px; letter-spacing: -1.8px; } .journey-header p { padding: 0 18px; font-size: 13px; } .journey-timeline { padding-left: 25px; } /* MOVE LINE TO LEFT */ .journey-line { left: 25px; transform: translateX(-50%); } .journey-item { display: block; min-height: auto; padding: 0 0 28px 35px; } /* DOT */ .journey-dot { position: absolute; left: -25px; top: 38px; width: 50px; height: 50px; } .journey-dot::before { width: 28px; height: 28px; } .journey-dot span { width: 11px; height: 11px; } /* CARD */ .journey-left .journey-card, .journey-right .journey-card { display: block; width: 100%; max-width: none; margin: 0; transform: none; } .journey-card { min-height: 205px; padding: 23px 23px 28px; } .journey-year { font-size: 27px; } .journey-card h3 { font-size: 18px; } .journey-card p { font-size: 12px; } .journey-footer { margin-top: 35px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .journey-timeline { padding-left: 20px; } .journey-line { left: 20px; } .journey-item { padding-left: 28px; } .journey-dot { left: -20px; } .journey-card { min-height: 200px; border-radius: 15px; padding: 21px 20px 27px; } .journey-card-top { margin-bottom: 17px; } .journey-icon { width: 36px; height: 36px; font-size: 15px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .journey-glow-left, .journey-glow-right, .journey-current .journey-dot span { animation: none; } .journey-card, .journey-icon, .journey-dot span { transition: none; } } /* ========================================================= CTA ========================================================= */ .about-cta { position: relative; padding: 95px 0 120px; overflow: hidden; background: #080e1a; } .cta-glow { position: absolute; width: 600px; height: 300px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(37,102,224,.15); filter: blur(100px); } .about-cta-box { position: relative; overflow: hidden; padding: 75px 70px; text-align: center; border: 1px solid rgba(91,133,205,.22); border-radius: 30px; background: radial-gradient( circle at 50% 0%, rgba(46,112,232,.17), transparent 50% ), linear-gradient( 145deg, #101f3b, #0b162b ); box-shadow: 0 30px 70px rgba(0,0,0,.25); } .cta-decoration { position: absolute; top: -110px; left: 50%; width: 400px; height: 200px; border-radius: 50%; border: 1px solid rgba(73,137,238,.12); transform: translateX(-50%); } .about-cta-box h2 { position: relative; z-index: 2; margin: 0; font-size: clamp(42px,5vw,65px); line-height: 1; letter-spacing: -3px; } .about-cta-box h2 span { color: #3a7df0; } .about-cta-box p { max-width: 550px; margin: 20px auto 30px; color: #78869d; font-size: 14px; line-height: 1.7; } .cta-buttons { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; } .about-primary-btn, .about-secondary-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border-radius: 24px; font-size: 11px; font-weight: 700; transition: transform .3s ease, box-shadow .3s ease; } .about-primary-btn { color: #fff; background: linear-gradient( 135deg, #3479ee, #225fd6 ); box-shadow: 0 12px 30px rgba(45,110,232,.3); } .about-primary-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 17px 35px rgba(45,110,232,.42); } .about-secondary-btn { color: #aebbd0; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); } .about-secondary-btn:hover { color: #fff; transform: translateY(-3px); background: rgba(255,255,255,.07); } /* ========================================================= SCROLL REVEAL ========================================================= */ .reveal-about { opacity: 0; transform: translateY(35px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal-about.visible { opacity: 1; transform: translateY(0); } /* stagger */ .stats-grid .reveal-about:nth-child(2), .values-list .reveal-about:nth-child(2) { transition-delay: .08s; } .stats-grid .reveal-about:nth-child(3), .values-list .reveal-about:nth-child(3) { transition-delay: .16s; } .stats-grid .reveal-about:nth-child(4), .values-list .reveal-about:nth-child(4) { transition-delay: .24s; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .about-hero { min-height: 600px; } .about-title { font-size: clamp(70px, 14vw, 110px); } .about-intro { font-size: 16px; } .story-layout { grid-template-columns: 1fr; gap: 45px; } .story-visual { margin-top: 25px; } .stats-grid { grid-template-columns: repeat(2,1fr); } .mission-grid { grid-template-columns: 1fr 1fr; } .mission-card-large { grid-column: span 2; } .values-layout { grid-template-columns: 1fr; gap: 60px; } .values-heading { position: relative; top: auto; } } @media (max-width: 767px) { .about-container { width: calc(100% - 30px); } .about-hero { min-height: 570px; } .about-eyebrow { font-size: 8px; letter-spacing: 2px; } .about-title { font-size: 74px; letter-spacing: -4px; } .about-title span { margin-top: 12px; } .about-intro { max-width: 430px; font-size: 14px; } .about-story, .about-stats, .mission-section, .values-section, .journey-section { padding: 85px 0; } .story-heading h2 { font-size: 44px; } .story-content .story-lead { font-size: 17px; } .story-visual { min-height: 220px; } .story-card-main { left: 20px; width: 200px; padding: 20px; } .story-card-number { font-size: 40px; } .story-orbit { right: 20px; width: 115px; height: 115px; } .stats-header { display: block; } .stats-header h2 { margin-top: 18px; font-size: 42px; } .stats-grid { grid-template-columns: 1fr; } .stat-card { min-height: 230px; } .mission-grid { grid-template-columns: 1fr; } .mission-card-large { grid-column: auto; } .mission-card { min-height: 280px; } .section-heading-centered h2 { font-size: 43px; } .value-item { grid-template-columns: 35px 42px 1fr; } .value-arrow { display: none; } .value-content h3 { font-size: 15px; } .value-content p { font-size: 10px; } .timeline::before { left: 63px; } .timeline-item { grid-template-columns: 63px 20px 1fr; gap: 12px; } .timeline-year { font-size: 9px; } .timeline-content h3 { font-size: 18px; } .about-cta { padding: 70px 0 90px; } .about-cta-box { padding: 55px 22px; border-radius: 23px; } .about-cta-box h2 { font-size: 42px; } .cta-buttons { flex-direction: column; } .about-primary-btn, .about-secondary-btn { width: 100%; } } /* ========================================================= FORCE ABOUT MARQUEE ========================================================= */ .about-marquee { width: 100%; overflow: hidden; } .about-marquee .marquee-track { display: flex; width: max-content; min-width: max-content; flex-shrink: 0; animation-name: aboutMarquee !important; animation-duration: 25s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-play-state: running !important; will-change: transform; } .about-marquee .marquee-group { display: flex; flex-shrink: 0; white-space: nowrap; } /* Force it even if browser has Reduce Motion enabled */ @media (prefers-reduced-motion: reduce) { .about-marquee .marquee-track { animation-name: aboutMarquee !important; animation-duration: 25s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } } /* ========================================================= PREMIUM PHILOSOPHY / MISSION SECTION ========================================================= */ .mission-section { position: relative; isolation: isolate; padding: 150px 0 170px; overflow: hidden; background: radial-gradient( circle at 50% 35%, rgba(37, 116, 255, 0.075), transparent 38% ), #0b1120; } /* BACKGROUND GRID */ .mission-bg-grid { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient( rgba(100, 150, 255, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(100, 150, 255, 0.035) 1px, transparent 1px ); background-size: 70px 70px; mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent ); } /* GLOWS */ .mission-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: -2; } .mission-glow-1 { width: 380px; height: 380px; left: -180px; top: 30%; background: rgba(38, 114, 255, 0.10); animation: philosophyGlowOne 8s ease-in-out infinite alternate; } .mission-glow-2 { width: 350px; height: 350px; right: -180px; bottom: 5%; background: rgba(105, 62, 255, 0.09); animation: philosophyGlowTwo 10s ease-in-out infinite alternate; } @keyframes philosophyGlowOne { from { transform: translate3d(0, 20px, 0); } to { transform: translate3d(80px, -30px, 0); } } @keyframes philosophyGlowTwo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-70px, -50px, 0); } } /* ========================================================= HEADER ========================================================= */ .philosophy-header { max-width: 760px; margin: 0 auto 70px; text-align: center; } .philosophy-header .section-kicker { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #55a7ff; } .philosophy-header h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.05; font-weight: 750; letter-spacing: -2.5px; color: #f7f9ff; } .philosophy-header h2 span { color: #5aa7ff; text-shadow: 0 0 35px rgba(70, 145, 255, 0.25); } .philosophy-header p { max-width: 650px; margin: 22px auto 0; font-size: 16px; line-height: 1.8; color: rgba(220, 227, 242, 0.58); } /* ========================================================= GRID ========================================================= */ .mission-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; align-items: stretch; } /* ========================================================= CARD ========================================================= */ .mission-card { position: relative; overflow: hidden; min-height: 365px; padding: 32px; border: 1px solid rgba(130, 160, 220, 0.13); border-radius: 28px; background: linear-gradient( 145deg, rgba(28, 39, 72, 0.78), rgba(13, 20, 39, 0.82) ); box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 25px 70px rgba(0,0,0,0.20); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease; } .mission-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74, 145, 255, 0.13), transparent 34% ); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .mission-card:hover::before { opacity: 1; } .mission-card:hover { transform: translateY(-10px); border-color: rgba(75, 145, 255, 0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 35px 90px rgba(0,0,0,0.34), 0 0 45px rgba(50, 125, 255, 0.08); } /* FIRST CARD */ .mission-card-large { min-height: 390px; background: radial-gradient( circle at 80% 20%, rgba(48, 129, 255, 0.10), transparent 35% ), linear-gradient( 145deg, rgba(27, 45, 83, 0.82), rgba(12, 20, 39, 0.88) ); } /* ========================================================= TOP ========================================================= */ .mission-card-top { display: flex; align-items: flex-start; justify-content: space-between; } .mission-number { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: rgba(145, 164, 201, 0.48); } /* ========================================================= ICON ========================================================= */ .mission-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 17px; border: 1px solid rgba(67, 140, 255, 0.20); background: linear-gradient( 145deg, rgba(42, 111, 255, 0.15), rgba(42, 111, 255, 0.035) ); color: #54a0ff; font-size: 23px; box-shadow: 0 10px 30px rgba(35, 105, 255, 0.08); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, background .5s ease; } .mission-card:hover .mission-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 30px rgba(55, 135, 255, 0.20); } /* ========================================================= CONTENT ========================================================= */ .mission-content { position: relative; z-index: 2; margin-top: 48px; } .mission-label { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: #579eff; } .mission-content h3 { margin: 0 0 17px; font-size: 29px; line-height: 1.15; font-weight: 700; color: #f7f9ff; letter-spacing: -0.7px; } .mission-content p { max-width: 470px; margin: 0; font-size: 15px; line-height: 1.75; color: rgba(215, 223, 239, 0.58); } /* ========================================================= BOTTOM LINE ========================================================= */ .mission-line { position: absolute; left: 32px; right: 32px; bottom: 27px; height: 1px; overflow: hidden; background: rgba(130, 160, 220, 0.10); } .mission-line span { display: block; width: 70px; height: 100%; background: linear-gradient( 90deg, transparent, #55a5ff, transparent ); transform: translateX(-100px); transition: transform .7s cubic-bezier(.2,.8,.2,1); } .mission-card:hover .mission-line span { transform: translateX(420px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .mission-section { padding: 110px 0 130px; } .mission-grid { grid-template-columns: 1fr 1fr; } .mission-card-large { grid-column: 1 / -1; } } @media (max-width: 767px) { .mission-section { padding: 90px 0 110px; } .philosophy-header { margin-bottom: 45px; } .philosophy-header h2 { font-size: 43px; letter-spacing: -1.8px; } .philosophy-header p { padding: 0 15px; font-size: 14px; } .mission-grid { grid-template-columns: 1fr; gap: 16px; } .mission-card, .mission-card-large { grid-column: auto; min-height: 340px; padding: 26px; border-radius: 23px; } .mission-content { margin-top: 42px; } .mission-content h3 { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .mission-glow-1, .mission-glow-2 { animation: none; } .mission-card { transition: none; } } /* ========================================================= STORY + STATS PREMIUM LAYOUT ========================================================= */ .about-story { position: relative; padding: 125px 0 150px; overflow: hidden; background: radial-gradient( circle at 78% 45%, rgba(45, 115, 255, 0.07), transparent 30% ), #0b1120; } /* subtle background */ .about-story::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(100, 150, 255, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(100, 150, 255, .025) 1px, transparent 1px ); background-size: 70px 70px; pointer-events: none; } /* ========================================================= MAIN GRID ========================================================= */ .story-main-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); gap: 90px; align-items: center; } /* ========================================================= LEFT ========================================================= */ .story-left { max-width: 590px; } .story-label { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #4e9bff; } .story-label .section-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(72, 145, 255, .25); background: rgba(48, 116, 255, .08); font-size: 10px; } .story-heading h2 { margin: 0 0 32px; font-size: clamp(48px, 5vw, 72px); line-height: 1.02; font-weight: 750; letter-spacing: -3px; color: #f5f7ff; } .story-heading h2 span { display: block; color: #579fff; text-shadow: 0 0 40px rgba(65, 145, 255, .16); } /* ========================================================= CONTENT ========================================================= */ .story-content { max-width: 540px; } .story-content p { margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: rgba(215, 223, 239, .56); } .story-content .story-lead { margin-bottom: 24px; font-size: 17px; line-height: 1.75; color: rgba(230, 235, 247, .72); } /* ========================================================= LINK ========================================================= */ .story-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 18px; border-radius: 10px; border: 1px solid rgba(77, 145, 255, .20); background: rgba(47, 111, 255, .06); color: #64a7ff; text-decoration: none; font-size: 13px; font-weight: 600; transition: all .35s ease; } .story-link i { transition: transform .35s ease; } .story-link:hover { color: #ffffff; border-color: rgba(75, 150, 255, .45); background: rgba(48, 118, 255, .12); box-shadow: 0 10px 30px rgba(40, 115, 255, .10); transform: translateY(-3px); } .story-link:hover i { transform: translate(4px, -4px); } /* ========================================================= RIGHT — STATS GRID ========================================================= */ .story-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } /* ========================================================= STAT CARD ========================================================= */ .story-stat-card { position: relative; min-height: 230px; padding: 27px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(130, 160, 220, .13); background: linear-gradient( 145deg, rgba(25, 35, 64, .88), rgba(12, 19, 37, .94) ); box-shadow: 0 20px 50px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease, background .5s ease; } /* card light */ .story-stat-card::before { content: ""; position: absolute; width: 190px; height: 190px; top: -100px; right: -80px; border-radius: 50%; background: var(--stat-glow); filter: blur(50px); opacity: .25; transition: transform .6s ease, opacity .5s ease; } /* ========================================================= TOP ========================================================= */ .story-stat-top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; } .story-stat-index { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(160, 178, 210, .38); } /* ========================================================= ICON ========================================================= */ .story-stat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 13px; border: 1px solid var(--stat-border); background: var(--stat-bg); color: var(--stat-color); font-size: 18px; transition: transform .5s ease, box-shadow .5s ease; } /* ========================================================= NUMBER ========================================================= */ .story-stat-number { position: relative; z-index: 2; margin-top: 27px; font-size: 46px; line-height: 1; font-weight: 750; letter-spacing: -2px; color: #f8faff; transition: color .4s ease, text-shadow .4s ease; } /* ========================================================= TITLE ========================================================= */ .story-stat-title { position: relative; z-index: 2; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: rgba(165, 176, 201, .58); } /* ========================================================= DESCRIPTION ========================================================= */ .story-stat-card p { position: relative; z-index: 2; margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: rgba(200, 211, 230, .42); } /* ========================================================= BLUE ========================================================= */ .story-stat-blue { --stat-color: #4c9cff; --stat-border: rgba(55, 140, 255, .24); --stat-bg: rgba(40, 115, 255, .09); --stat-glow: rgba(45, 135, 255, .65); } /* ========================================================= CYAN / GREEN ========================================================= */ .story-stat-cyan { --stat-color: #00d7b0; --stat-border: rgba(0, 210, 175, .23); --stat-bg: rgba(0, 190, 160, .08); --stat-glow: rgba(0, 215, 175, .60); } /* ========================================================= ORANGE ========================================================= */ .story-stat-orange { --stat-color: #ff9f19; --stat-border: rgba(255, 155, 25, .24); --stat-bg: rgba(255, 145, 20, .08); --stat-glow: rgba(255, 145, 20, .58); } /* ========================================================= PURPLE ========================================================= */ .story-stat-purple { --stat-color: #9b6cff; --stat-border: rgba(145, 90, 255, .25); --stat-bg: rgba(135, 75, 255, .08); --stat-glow: rgba(145, 80, 255, .60); } /* ========================================================= HOVER ========================================================= */ .story-stat-card:hover { transform: translateY(-10px) scale(1.025); border-color: var(--stat-color); background: linear-gradient( 145deg, color-mix( in srgb, var(--stat-color) 12%, #18233f ), #0c1428 ); box-shadow: 0 30px 70px rgba(0,0,0,.36), 0 0 40px color-mix( in srgb, var(--stat-color) 16%, transparent ); } .story-stat-card:hover::before { transform: scale(1.7); opacity: .55; } .story-stat-card:hover .story-stat-icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 0 25px color-mix( in srgb, var(--stat-color) 25%, transparent ); } .story-stat-card:hover .story-stat-number { color: var(--stat-color); text-shadow: 0 0 25px color-mix( in srgb, var(--stat-color) 40%, transparent ); } .story-stat-card:hover .story-stat-title { color: rgba(240,245,255,.82); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .story-main-grid { grid-template-columns: 1fr; gap: 65px; } .story-left { max-width: 700px; } } @media (max-width: 767px) { .about-story { padding: 90px 0 110px; } .story-main-grid { gap: 45px; } .story-heading h2 { font-size: 46px; letter-spacing: -2px; } .story-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .story-stat-card { min-height: 205px; padding: 20px; border-radius: 18px; } .story-stat-number { font-size: 36px; } } @media (max-width: 480px) { .story-stats { grid-template-columns: 1fr; } .story-stat-card { min-height: 190px; } } /* ========================================================= FIX — SHOW FULL TEXT INSIDE ALL 4 CARDS ========================================================= */ .philosophy-card { height: 310px !important; min-height: 310px !important; max-height: 310px !important; padding: 26px 30px 28px !important; overflow: hidden !important; display: flex; flex-direction: column; } /* TOP AREA */ .philosophy-card .mission-card-top { flex-shrink: 0; } /* CONTENT */ .philosophy-card .mission-content { margin-top: 38px !important; flex: 1; display: flex; flex-direction: column; } /* LABEL */ .philosophy-card .mission-label { display: block !important; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent); } /* TITLE */ .philosophy-card .mission-content h3 { margin: 0 0 14px !important; font-size: 20px !important; line-height: 1.25 !important; } /* DESCRIPTION */ .philosophy-card .mission-content p { margin: 0 !important; font-size: 13px !important; line-height: 1.65 !important; color: rgba(203, 211, 226, .58); overflow: visible !important; } /* BOTTOM LINE */ .philosophy-card .mission-line { position: absolute; left: 30px; right: 30px; bottom: 20px; height: 1px; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 992px) { .philosophy-card, .mission-card-large { height: 310px !important; min-height: 310px !important; max-height: 310px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) and (min-width: 768px) { .philosophy-card { height: 300px !important; min-height: 300px !important; max-height: 300px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .philosophy-card { height: auto !important; min-height: 240px !important; max-height: none !important; } } /* ========================================================= DIRECTOR SECTION ========================================================= */ .director-section { position: relative; padding: 145px 0 155px; overflow: hidden; background: radial-gradient( circle at 50% 45%, rgba(45, 115, 255, .07), transparent 38% ), #080e1a; } /* ========================================================= BACKGROUND GRID ========================================================= */ .director-bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(80, 130, 220, .035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(80, 130, 220, .035) 1px, transparent 1px ); background-size: 64px 64px; mask-image: linear-gradient( to bottom, transparent, black 12%, black 88%, transparent ); } /* ========================================================= BACKGROUND GLOW ========================================================= */ .director-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; filter: blur(110px); opacity: .08; pointer-events: none; } .director-glow-1 { left: 10%; top: 28%; background: #277fff; animation: directorGlowOne 10s ease-in-out infinite alternate; } .director-glow-2 { right: 5%; bottom: 5%; background: #704cff; animation: directorGlowTwo 12s ease-in-out infinite alternate; } @keyframes directorGlowOne { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(80px, -60px, 0); } } @keyframes directorGlowTwo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-80px, -40px, 0); } } /* ========================================================= PARTICLES ========================================================= */ .director-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .director-particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #4d98ff; opacity: .35; box-shadow: 0 0 10px #4d98ff; animation: directorParticle linear infinite; } .director-particles span:nth-child(1) { left: 8%; top: 20%; animation-duration: 8s; } .director-particles span:nth-child(2) { left: 18%; top: 65%; animation-duration: 11s; } .director-particles span:nth-child(3) { left: 32%; top: 25%; animation-duration: 9s; } .director-particles span:nth-child(4) { left: 52%; top: 75%; animation-duration: 12s; } .director-particles span:nth-child(5) { left: 68%; top: 18%; animation-duration: 10s; } .director-particles span:nth-child(6) { left: 80%; top: 60%; animation-duration: 9s; } .director-particles span:nth-child(7) { left: 90%; top: 30%; animation-duration: 13s; } .director-particles span:nth-child(8) { left: 45%; top: 40%; animation-duration: 7s; } @keyframes directorParticle { 0% { transform: translateY(30px) scale(.7); opacity: 0; } 20% { opacity: .45; } 80% { opacity: .2; } 100% { transform: translateY(-130px) scale(1.3); opacity: 0; } } /* ========================================================= HEADER ========================================================= */ .director-header { position: relative; z-index: 2; text-align: center; margin-bottom: 72px; } .director-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: #54a2ff; font-size: 10px; font-weight: 700; letter-spacing: 2.8px; } .director-kicker i { font-size: 10px; animation: directorStar 2s ease-in-out infinite; } @keyframes directorStar { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(15deg) scale(1.2); } } .director-header h2 { margin: 0; font-size: clamp(42px, 5vw, 62px); line-height: 1.05; font-weight: 750; letter-spacing: -2.7px; color: #f6f8ff; } .director-header h2 span { color: #579fff; text-shadow: 0 0 40px rgba(75,145,255,.20); } .director-heading-line { width: 55px; height: 2px; margin: 24px auto 0; background: linear-gradient( 90deg, transparent, #4d98ff, transparent ); animation: directorLine 2.5s ease-in-out infinite; } @keyframes directorLine { 0%, 100% { opacity: .4; transform: scaleX(.6); } 50% { opacity: 1; transform: scaleX(1); } } /* ========================================================= MAIN LAYOUT ========================================================= */ .director-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 85px; align-items: center; max-width: 1030px; margin: 0 auto; } /* ========================================================= PROFILE ========================================================= */ .director-profile { text-align: center; } /* ========================================================= PHOTO WRAPPER ========================================================= */ .director-photo-wrap { position: relative; width: 250px; height: 250px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; } /* ========================================================= RINGS ========================================================= */ .director-ring { position: absolute; border-radius: 50%; pointer-events: none; } .director-ring-1 { inset: 4px; border: 1px solid rgba(66,145,255,.55); box-shadow: 0 0 25px rgba(55,135,255,.10); animation: directorRingRotate 12s linear infinite; } .director-ring-2 { inset: -10px; border: 1px solid rgba(65,135,255,.18); border-top-color: rgba(65,135,255,.70); animation: directorRingRotateReverse 9s linear infinite; } .director-ring-3 { inset: -22px; border: 1px dashed rgba(65,135,255,.13); animation: directorRingRotate 18s linear infinite; } @keyframes directorRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes directorRingRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ========================================================= PHOTO ========================================================= */ .director-photo { position: relative; z-index: 3; width: 185px; height: 185px; padding: 4px; border-radius: 50%; background: linear-gradient( 135deg, #4b9aff, #1d56bb, #182f66 ); box-shadow: 0 0 0 5px rgba(39,103,210,.12), 0 0 45px rgba(45,125,255,.25); animation: directorPhotoFloat 5s ease-in-out infinite; } .director-photo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 3px solid #101a30; } @keyframes directorPhotoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= ORBIT ========================================================= */ .director-orbit { position: absolute; inset: -28px; border-radius: 50%; pointer-events: none; animation: directorOrbit 8s linear infinite; } .director-orbit span { position: absolute; width: 7px; height: 7px; top: 0; left: 50%; border-radius: 50%; background: #55a1ff; box-shadow: 0 0 12px rgba(75,155,255,.9); } .orbit-two { inset: -43px; animation-duration: 13s; animation-direction: reverse; } .orbit-two span { width: 5px; height: 5px; background: #8b6cff; } /* ========================================================= BADGE ========================================================= */ .director-badge { position: absolute; z-index: 5; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 8px 15px; white-space: nowrap; border-radius: 30px; border: 1px solid rgba(91,155,255,.35); background: linear-gradient( 135deg, #347cf0, #285bd0 ); box-shadow: 0 8px 25px rgba(35,105,240,.30); color: white; font-size: 10px; font-weight: 600; animation: directorBadgeFloat 4s ease-in-out infinite; } @keyframes directorBadgeFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } .director-status { width: 7px; height: 7px; border-radius: 50%; background: #45f09b; box-shadow: 0 0 9px rgba(69,240,155,.9); animation: directorStatus 1.8s ease-in-out infinite; } @keyframes directorStatus { 0%, 100% { opacity: .7; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } } /* ========================================================= NAME ========================================================= */ .director-name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px; color: #f4f7ff; } .director-role { margin: 6px 0 25px; font-size: 12px; color: rgba(180,192,215,.48); } /* ========================================================= STATS ========================================================= */ .director-stats { display: flex; justify-content: center; gap: 27px; } .director-stat { position: relative; min-width: 50px; } .director-stat:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 5px; width: 1px; height: 27px; background: rgba(120,145,190,.12); } .director-stat strong { display: block; font-size: 16px; line-height: 1; font-weight: 700; color: #55a1ff; } .director-stat span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .4px; color: rgba(170,185,210,.40); } /* ========================================================= MESSAGE CARD ========================================================= */ .director-message-wrap { perspective: 1200px; } .director-message-card { position: relative; min-height: 475px; padding: 35px 38px 30px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(112,145,205,.18); background: linear-gradient( 145deg, rgba(25,34,62,.92), rgba(14,21,39,.94) ); box-shadow: 0 35px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform-style: preserve-3d; transition: border-color .45s ease, box-shadow .45s ease; } /* ========================================================= CARD INNER LIGHT ========================================================= */ .director-card-glow { position: absolute; width: 300px; height: 300px; left: var(--mouse-x, 50%); top: var(--mouse-y, 50%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(62,139,255,.13), transparent 65% ); pointer-events: none; transition: left .15s ease, top .15s ease; } /* ========================================================= QUOTE MARK ========================================================= */ .director-quote-mark { position: absolute; right: 28px; top: 20px; font-size: 80px; line-height: 1; color: rgba(67,133,245,.045); transform: translateZ(10px); animation: quoteFloat 5s ease-in-out infinite; } @keyframes quoteFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(3deg); } } /* ========================================================= STARS ========================================================= */ .director-stars { position: relative; z-index: 2; display: flex; gap: 5px; margin-bottom: 28px; } .director-stars i { font-size: 13px; color: #ffba22; filter: drop-shadow( 0 0 5px rgba(255,180,25,.35) ); animation: starShimmer 2.4s ease-in-out infinite; } .director-stars i:nth-child(2) { animation-delay: .15s; } .director-stars i:nth-child(3) { animation-delay: .30s; } .director-stars i:nth-child(4) { animation-delay: .45s; } .director-stars i:nth-child(5) { animation-delay: .60s; } @keyframes starShimmer { 0%, 100% { transform: translateY(0) scale(1); opacity: .75; } 50% { transform: translateY(-3px) scale(1.12); opacity: 1; } } /* ========================================================= QUOTE ========================================================= */ .director-message-card blockquote { position: relative; z-index: 2; max-width: 720px; margin: 0 0 29px; font-size: 27px; line-height: 1.28; font-weight: 700; letter-spacing: -.7px; color: #f5f7ff; } /* ========================================================= MESSAGE ========================================================= */ .director-message-text { position: relative; z-index: 2; max-width: 700px; margin: 0; font-size: 13px; line-height: 1.8; color: rgba(195,205,224,.58); } /* ========================================================= SIGNATURE ========================================================= */ .director-signature-row { position: absolute; left: 38px; right: 38px; bottom: 29px; display: flex; align-items: center; gap: 15px; } .director-signature-line { flex: 1; height: 1px; background: linear-gradient( 90deg, rgba(70,135,235,.25), rgba(70,135,235,.05) ); } .director-signature { font-size: 11px; font-weight: 700; color: #55a1ff; white-space: nowrap; transition: letter-spacing .4s ease; } .director-message-card:hover .director-signature { letter-spacing: .5px; } /* ========================================================= CARD HOVER ========================================================= */ .director-message-card:hover { border-color: rgba(76,145,255,.34); box-shadow: 0 40px 100px rgba(0,0,0,.35), 0 0 45px rgba(55,130,255,.08), inset 0 1px 0 rgba(255,255,255,.05); } /* ========================================================= BOTTOM ========================================================= */ .director-bottom { display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 70px; } .director-bottom span { width: 65px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(65,140,255,.25) ); } .director-bottom span:last-child { background: linear-gradient( 90deg, rgba(65,140,255,.25), transparent ); } .director-bottom p { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: rgba(155,175,210,.35); } /* ========================================================= REVEAL ANIMATION ========================================================= */ .director-reveal { opacity: 0; transform: translateY(35px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); } .director-reveal.director-visible { opacity: 1; transform: translateY(0); } /* ========================================================= STAGGER ========================================================= */ .director-profile { transition-delay: .15s; } .director-message-wrap { transition-delay: .3s; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .director-section { padding: 110px 0 125px; } .director-layout { grid-template-columns: 1fr; gap: 60px; max-width: 700px; } .director-profile { max-width: 500px; margin: 0 auto; } .director-message-card { min-height: 450px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .director-section { padding: 90px 0 100px; } .director-header { margin-bottom: 55px; } .director-header h2 { font-size: 40px; letter-spacing: -1.8px; } .director-layout { gap: 50px; } .director-photo-wrap { width: 220px; height: 220px; } .director-photo { width: 165px; height: 165px; } .director-message-card { min-height: auto; padding: 28px 24px 85px; border-radius: 18px; } .director-message-card blockquote { font-size: 21px; line-height: 1.38; } .director-message-text { font-size: 12px; line-height: 1.75; } .director-signature-row { left: 24px; right: 24px; bottom: 25px; } .director-bottom { margin-top: 50px; } } @media (max-width: 480px) { .director-header h2 { font-size: 35px; } .director-photo-wrap { width: 200px; height: 200px; } .director-photo { width: 150px; height: 150px; } .director-ring-3 { inset: -18px; } .director-message-card blockquote { font-size: 19px; } .director-bottom span { width: 35px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .director-glow, .director-particles span, .director-ring, .director-orbit, .director-photo, .director-badge, .director-stars i, .director-quote-mark, .director-kicker i, .director-heading-line, .director-current { animation: none !important; } } /* ========================================================= OUR TEAM ========================================================= */ .team-section { position: relative; padding: 135px 0 145px; overflow: hidden; background: radial-gradient( circle at 50% 45%, rgba(43, 111, 255, .065), transparent 38% ), #080e1a; } /* ========================================================= BACKGROUND GRID ========================================================= */ .team-bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( rgba(80, 130, 220, .028) 1px, transparent 1px ), linear-gradient( 90deg, rgba(80, 130, 220, .028) 1px, transparent 1px ); background-size: 64px 64px; mask-image: linear-gradient( to bottom, transparent, black 12%, black 88%, transparent ); } /* ========================================================= BACKGROUND GLOW ========================================================= */ .team-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .07; pointer-events: none; } .team-glow-1 { left: -220px; top: 30%; background: #277fff; animation: teamGlowOne 10s ease-in-out infinite alternate; } .team-glow-2 { right: -220px; bottom: 10%; background: #704cff; animation: teamGlowTwo 12s ease-in-out infinite alternate; } @keyframes teamGlowOne { from { transform: translate3d(0,0,0); } to { transform: translate3d(100px,-50px,0); } } @keyframes teamGlowTwo { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100px,-60px,0); } } /* ========================================================= HEADER ========================================================= */ .team-header { position: relative; z-index: 2; max-width: 700px; margin: 0 auto 62px; text-align: center; } .team-kicker { display: block; margin-bottom: 16px; color: #54a2ff; font-size: 10px; font-weight: 700; letter-spacing: 3px; } .team-header h2 { margin: 0; font-size: clamp(42px, 5vw, 58px); line-height: 1.05; font-weight: 750; letter-spacing: -2.6px; color: #f5f7ff; } .team-header h2 span { color: #579fff; text-shadow: 0 0 35px rgba(67,145,255,.18); } .team-header p { max-width: 600px; margin: 16px auto 0; font-size: 14px; line-height: 1.7; color: rgba(200,210,230,.50); } /* ========================================================= CAROUSEL ========================================================= */ .team-carousel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 30px; max-width: 1160px; margin: 0 auto; } .team-viewport { width: 100%; max-width: 820px; overflow: hidden; padding: 10px 0 15px; } .team-track { display: flex; gap: 20px; will-change: transform; transition: transform .65s cubic-bezier(.2,.8,.2,1); } /* ========================================================= CARD ========================================================= */ .team-card { --team-accent: #4c98ff; position: relative; flex: 0 0 195px; height: 260px; overflow: hidden; border-radius: 19px; border: 1px solid rgba(110,145,205,.16); background: linear-gradient( 145deg, rgba(26,36,65,.88), rgba(12,19,36,.94) ); box-shadow: 0 20px 45px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease; } /* ========================================================= CARD GLOW ========================================================= */ .team-card-glow { position: absolute; width: 180px; height: 180px; left: var(--glow-x, 50%); top: var(--glow-y, 35%); transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient( circle, color-mix( in srgb, var(--team-accent) 25%, transparent ), transparent 68% ); opacity: .10; filter: blur(25px); pointer-events: none; transition: left .15s ease, top .15s ease, opacity .4s ease; } /* ========================================================= CARD NUMBER ========================================================= */ .team-card-number { position: absolute; top: 18px; left: 18px; z-index: 4; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: rgba(150,175,215,.34); } /* ========================================================= IMAGE ========================================================= */ .team-image-wrap { position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .team-image-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65px; background: linear-gradient( to top, rgba(14,21,40,1), transparent ); pointer-events: none; z-index: 2; } .team-image { position: relative; z-index: 1; width: 175px; height: 190px; object-fit: contain; object-position: center bottom; filter: saturate(.92) contrast(1.03); transform-origin: center bottom; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease; } /* ========================================================= IMAGE RING ========================================================= */ .team-image-ring { position: absolute; left: 50%; bottom: 10px; width: 145px; height: 145px; transform: translateX(-50%); border-radius: 50%; border: 1px solid color-mix( in srgb, var(--team-accent) 25%, transparent ); box-shadow: 0 0 30px color-mix( in srgb, var(--team-accent) 10%, transparent ); opacity: .65; transition: transform .6s ease, box-shadow .5s ease; } /* ========================================================= INFO ========================================================= */ .team-info { position: relative; z-index: 4; padding: 4px 20px 0; } .team-info h3 { margin: 0 0 3px; font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -.2px; color: #f3f6ff; } .team-info span { display: block; font-size: 10px; line-height: 1.4; color: color-mix( in srgb, var(--team-accent) 70%, #8c98ad ); } /* ========================================================= BOTTOM LINE ========================================================= */ .team-card-line { position: absolute; left: 20px; right: 20px; bottom: 12px; height: 1px; background: rgba(110,140,190,.08); overflow: hidden; } .team-card-line::after { content: ""; position: absolute; width: 45px; height: 100%; left: -60px; background: linear-gradient( 90deg, transparent, var(--team-accent), transparent ); transition: left .7s ease; } /* ========================================================= COLORS ========================================================= */ .team-card:nth-child(1) { --team-accent: #4c98ff; } .team-card:nth-child(2) { --team-accent: #ff5f9d; } .team-card:nth-child(3) { --team-accent: #ff704f; } .team-card:nth-child(4) { --team-accent: #6b9cff; } .team-card:nth-child(5) { --team-accent: #a36cff; } .team-card:nth-child(6) { --team-accent: #00d7ae; } /* ========================================================= HOVER ========================================================= */ .team-card:hover { transform: translateY(-10px); border-color: color-mix( in srgb, var(--team-accent) 35%, transparent ); box-shadow: 0 30px 65px rgba(0,0,0,.32), 0 0 35px color-mix( in srgb, var(--team-accent) 12%, transparent ); } .team-card:hover .team-card-glow { opacity: .28; } .team-card:hover .team-image { transform: scale(1.08) translateY(-3px); filter: saturate(1.05) contrast(1.05); } .team-card:hover .team-image-ring { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 40px color-mix( in srgb, var(--team-accent) 20%, transparent ); } .team-card:hover .team-card-line::after { left: 110%; } /* ========================================================= ARROWS ========================================================= */ .team-arrow { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 13px; border: 1px solid rgba(65,140,255,.25); background: rgba(34,83,170,.10); color: #55a0ff; font-size: 15px; cursor: pointer; transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; } .team-arrow:hover { transform: scale(1.08); background: rgba(48,120,255,.15); border-color: rgba(75,150,255,.55); box-shadow: 0 0 25px rgba(50,130,255,.14); } .team-arrow:active { transform: scale(.94); } /* ========================================================= DOTS ========================================================= */ .team-dots { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 25px; } .team-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 20px; background: rgba(145,160,185,.22); cursor: pointer; transition: width .4s ease, background .4s ease, box-shadow .4s ease; } .team-dot.active { width: 23px; background: #438fff; box-shadow: 0 0 12px rgba(60,140,255,.5); } /* ========================================================= BOTTOM ========================================================= */ .team-bottom { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 55px; } .team-bottom span { width: 55px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(65,140,255,.25) ); } .team-bottom span:last-child { background: linear-gradient( 90deg, rgba(65,140,255,.25), transparent ); } .team-bottom p { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: rgba(155,175,210,.35); } /* ========================================================= REVEAL ========================================================= */ .team-reveal { opacity: 0; transform: translateY(35px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); } .team-reveal.team-visible { opacity: 1; transform: translateY(0); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .team-carousel { gap: 15px; } .team-viewport { max-width: 650px; } .team-card { flex-basis: 190px; height: 255px; } .team-image { width: 165px; height: 185px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .team-section { padding: 90px 0 105px; } .team-header { margin-bottom: 45px; } .team-header h2 { font-size: 37px; letter-spacing: -1.8px; } .team-header p { padding: 0 15px; font-size: 13px; } .team-carousel { gap: 8px; } .team-viewport { max-width: calc(100vw - 95px); } .team-card { flex-basis: calc(100vw - 115px); max-width: 250px; height: 290px; } .team-image-wrap { height: 215px; } .team-image { width: 190px; height: 215px; } .team-image-ring { width: 165px; height: 165px; } .team-arrow { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; } .team-info { padding: 5px 20px 0; } .team-info h3 { font-size: 16px; } .team-info span { font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .team-viewport { max-width: calc(100vw - 82px); } .team-card { flex-basis: calc(100vw - 105px); } .team-arrow { width: 35px; height: 35px; flex-basis: 35px; } .team-bottom span { width: 30px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .team-glow, .team-card, .team-image, .team-image-ring { animation: none !important; transition: none !important; } } /* ========================================================= BRAND LOGO ========================================================= */ .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0; } .brand-logo { display: block; width: 155px; height: auto; max-height: 48px; object-fit: contain; transition: transform .35s ease, filter .35s ease; } .brand:hover .brand-logo { transform: scale(1.03); filter: drop-shadow( 0 5px 15px rgba(0, 174, 255, .22) ); } /* blogpage css */ .eb-blog, .eb-blog * { box-sizing: border-box; } .eb-blog { --blue: #2f79f4; --blue2: #155bd7; --navy: #122e58; --text: #1d2a3d; --muted: #667894; --line: #dce5ef; position: relative; width: 100%; overflow: hidden; color: var(--text); background: #f7f9fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================= HERO ========================================================= */ .eb-blog-hero { position: relative; min-height: 350px; display: flex; align-items: center; justify-content: center; padding: 100px 24px 82px; overflow: hidden; background: radial-gradient( circle at 50% 105%, rgba(52,134,255,.20), transparent 36% ), radial-gradient( circle at 12% 10%, rgba(48,111,230,.13), transparent 28% ), linear-gradient( 135deg, #122d56 0%, #193866 48%, #203f76 100% ); color: #fff; } .eb-blog-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 48px 48px; mask-image: linear-gradient( to bottom, black, transparent 90% ); animation: ebBlogGrid 18s linear infinite; } @keyframes ebBlogGrid { to { background-position: 48px 48px; } } .eb-blog-hero::after { content: ""; position: absolute; width: 450px; height: 450px; border-radius: 50%; border: 1px solid rgba(109,184,255,.09); box-shadow: 0 0 0 50px rgba(109,184,255,.025), 0 0 0 100px rgba(109,184,255,.015); animation: ebHeroRing 8s ease-in-out infinite; } @keyframes ebHeroRing { 0%,100% { transform: scale(.9); opacity: .35; } 50% { transform: scale(1.05); opacity: .8; } } .eb-blog-hero-content { position: relative; z-index: 2; width: min(800px, 100%); text-align: center; opacity: 0; transform: translateY(28px); animation: ebHeroIn .85s cubic-bezier(.2,.8,.2,1) .1s forwards; } @keyframes ebHeroIn { to { opacity: 1; transform: translateY(0); } } .eb-blog-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #4fa0ff; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; } .eb-blog-kicker::before, .eb-blog-kicker::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #54a4ff; box-shadow: 0 0 10px rgba(84,164,255,.8); } .eb-blog-hero h1 { margin: 0; font-size: clamp(44px, 5.2vw, 70px); line-height: 1.03; letter-spacing: -3.5px; font-weight: 850; } .eb-blog-hero h1 span { color: #4d9aff; } .eb-blog-hero p { max-width: 700px; margin: 17px auto 0; color: rgba(233,241,255,.72); font-size: 16px; line-height: 1.65; } /* ========================================================= BLOG AREA ========================================================= */ .eb-blog-content { position: relative; padding: 74px 24px 110px; background: radial-gradient( circle at 50% 0, rgba(43,126,245,.035), transparent 28% ), #f8fafc; } .eb-blog-container { position: relative; z-index: 2; width: min(1040px, 100%); margin: 0 auto; } /* ========================================================= FEATURED STORY ========================================================= */ .eb-featured { position: relative; display: grid; grid-template-columns: 45% 55%; min-height: 430px; border: 1px solid #bfd4ff; border-radius: 30px; background: linear-gradient( 125deg, #dcecff 0%, #cfe5ff 48%, #d8e9ff 100% ); box-shadow: 0 24px 55px rgba(27,60,105,.10), inset 0 1px 0 rgba(255,255,255,.8); overflow: hidden; opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .eb-featured.is-visible { opacity: 1; transform: translateY(0); } .eb-featured::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -150px; border-radius: 50%; border: 1px solid rgba(50,125,240,.11); box-shadow: 0 0 0 35px rgba(50,125,240,.025), 0 0 0 70px rgba(50,125,240,.018); } .eb-featured-image { position: relative; margin: 30px; min-height: 365px; border: 4px solid rgba(255,255,255,.95); border-radius: 28px; overflow: hidden; background: radial-gradient( circle at 20% 25%, rgba(88,156,255,.38), transparent 18% ), linear-gradient( 135deg, #07152b, #0d284e 48%, #020b18 ); box-shadow: 0 16px 30px rgba(24,55,95,.20); transform: translateZ(0); } .eb-featured-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 15%, rgba(63,150,255,.13) 50%, transparent 80% ); animation: ebImageGlow 4s ease-in-out infinite; } @keyframes ebImageGlow { 0%,100% { transform: translateX(-35%); } 50% { transform: translateX(35%); } } /* code-like visual */ .eb-code-window { position: absolute; inset: 34px 25px; display: flex; flex-direction: column; border-radius: 14px; background: rgba(2,9,20,.72); box-shadow: 0 20px 45px rgba(0,0,0,.28); overflow: hidden; } .eb-code-top { height: 31px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.045); } .eb-code-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.38); } .eb-code-lines { padding: 17px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; line-height: 1.95; color: rgba(214,231,255,.70); } .eb-code-lines b { color: #55a7ff; } .eb-code-lines em { color: #78d7a0; font-style: normal; } .eb-code-lines strong { color: #ffd46c; } .eb-featured-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 45px 45px 40px 8px; } .eb-post-meta { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .eb-category { display: inline-flex; align-items: center; min-height: 27px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.82); color: #29415f; font-size: 10px; font-weight: 800; letter-spacing: .8px; } .eb-date { color: #788da8; font-size: 11px; font-style: italic; font-weight: 600; } .eb-featured h2 { margin: 0; max-width: 520px; color: #102a51; font-size: clamp(31px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -2px; font-weight: 850; } .eb-featured-description { max-width: 540px; margin: 21px 0 26px; color: #617590; font-size: 14px; line-height: 1.65; } .eb-author-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 19px; border-top: 1px solid rgba(48,85,125,.14); } .eb-author { display: flex; align-items: center; gap: 10px; color: #243b59; font-size: 12px; font-weight: 800; } .eb-author-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #1686e8; background: #fff; box-shadow: 0 5px 12px rgba(35,82,135,.12); font-size: 14px; font-weight: 900; } .eb-read-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 19px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient( 135deg, #112c53, #1a3c6c ); box-shadow: 0 8px 18px rgba(16,43,81,.17); text-decoration: none; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .eb-read-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 13px 25px rgba(16,43,81,.24); } .eb-read-button span { transition: transform .3s ease; } .eb-read-button:hover span { transform: translateX(4px); } /* ========================================================= THREE BLOG CARDS ========================================================= */ .eb-blog-grid-heading { display: flex; align-items: end; justify-content: space-between; margin: 72px 0 24px; } .eb-blog-grid-heading h2 { margin: 0; color: #202b3c; font-size: 30px; letter-spacing: -1px; } .eb-blog-grid-heading p { margin: 0; color: #7a899d; font-size: 12px; } .eb-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 19px; } .eb-post-card { position: relative; display: flex; flex-direction: column; min-height: 390px; border: 1px solid #dde5ee; border-radius: 19px; background: #fff; box-shadow: 0 9px 25px rgba(25,48,80,.045); overflow: hidden; opacity: 0; transform: translateY(25px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease; } .eb-post-card.is-visible { opacity: 1; transform: translateY(0); } .eb-post-card:nth-child(1) { transition-delay: .04s; } .eb-post-card:nth-child(2) { transition-delay: .12s; } .eb-post-card:nth-child(3) { transition-delay: .20s; } .eb-post-card:hover { transform: translateY(-8px); border-color: rgba(48,124,243,.26); box-shadow: 0 22px 40px rgba(28,54,89,.10), 0 0 25px rgba(48,124,243,.035); } .eb-post-thumb { position: relative; height: 185px; overflow: hidden; background: linear-gradient(135deg, #102b55, #256fca); } .eb-post-card:nth-child(2) .eb-post-thumb { background: linear-gradient(135deg, #173b70, #3575c8); } .eb-post-card:nth-child(3) .eb-post-thumb { background: linear-gradient(135deg, #172c55, #6850c9); } .eb-post-thumb::before { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -55px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 0 0 25px rgba(255,255,255,.025), 0 0 0 50px rgba(255,255,255,.018); transition: transform .6s ease; } .eb-post-card:hover .eb-post-thumb::before { transform: scale(1.12) rotate(12deg); } .eb-thumb-pattern { position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.045) 1px, transparent 1px ); background-size: 25px 25px; } .eb-thumb-symbol { position: absolute; left: 24px; bottom: 20px; color: rgba(255,255,255,.90); font-size: 42px; font-weight: 850; letter-spacing: -3px; } .eb-post-body { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 19px; } .eb-small-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #7b8ca2; font-size: 9px; font-weight: 700; } .eb-small-meta b { color: #2779ef; font-weight: 800; } .eb-post-body h3 { margin: 0; color: #243044; font-size: 18px; line-height: 1.2; letter-spacing: -.55px; font-weight: 820; } .eb-post-body p { margin: 11px 0 17px; color: #6f7f96; font-size: 11px; line-height: 1.6; } .eb-post-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf1f5; } .eb-post-author { color: #55677f; font-size: 10px; font-weight: 700; } .eb-card-read { display: inline-flex; align-items: center; gap: 5px; color: #2d79ef; background: none; border: 0; font-size: 10px; font-weight: 800; cursor: pointer; } .eb-card-read span { transition: transform .25s ease; } .eb-card-read:hover span { transform: translateX(3px); } /* ========================================================= ARTICLE READER ========================================================= */ .eb-reader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7,18,34,.72); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .eb-reader.open { opacity: 1; visibility: visible; } .eb-reader-dialog { position: relative; width: min(900px, 100%); max-height: min(88vh, 850px); overflow: auto; border: 1px solid rgba(255,255,255,.25); border-radius: 25px; background: linear-gradient( 180deg, #ffffff, #f8fafc ); box-shadow: 0 35px 100px rgba(0,0,0,.28); transform: translateY(25px) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .eb-reader.open .eb-reader-dialog { transform: translateY(0) scale(1); } .eb-reader-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e8edf3; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); } .eb-reader-brand { color: #2779ef; font-size: 10px; font-weight: 850; letter-spacing: 1.4px; } .eb-reader-close { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #dce5ef; border-radius: 50%; color: #4e6078; background: #fff; cursor: pointer; font-size: 18px; transition: transform .25s ease, color .25s ease, border-color .25s ease; } .eb-reader-close:hover { transform: rotate(90deg); color: #1e70ee; border-color: #a9c9fa; } .eb-reader-content { padding: 40px 50px 50px; } .eb-reader-meta { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; } .eb-reader-content h2 { max-width: 760px; margin: 0; color: #162f55; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -2px; } .eb-reader-lead { max-width: 730px; margin: 18px 0 27px; color: #657790; font-size: 15px; line-height: 1.75; } .eb-reader-divider { height: 1px; margin-bottom: 27px; background: #e4eaf1; } .eb-reader-content article { max-width: 760px; color: #53677f; font-size: 14px; line-height: 1.85; } .eb-reader-content article h3 { margin: 26px 0 8px; color: #24354d; font-size: 20px; } .eb-reader-content article p { margin: 0 0 16px; } .eb-reader-content article ul { margin: 0 0 20px; padding-left: 20px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .eb-featured { grid-template-columns: 1fr; } .eb-featured-image { min-height: 300px; margin: 20px 20px 0; } .eb-featured-copy { padding: 25px 28px 30px; } .eb-post-grid { grid-template-columns: 1fr 1fr; } .eb-post-card:last-child { grid-column: 1 / -1; } .eb-post-card:last-child .eb-post-thumb { height: 210px; } } @media (max-width: 620px) { .eb-blog-hero { min-height: 310px; padding: 85px 18px 65px; } .eb-blog-hero h1 { font-size: 43px; letter-spacing: -2.4px; } .eb-blog-hero p { font-size: 13px; } .eb-blog-content { padding: 52px 16px 75px; } .eb-featured { border-radius: 22px; } .eb-featured-image { min-height: 240px; border-radius: 20px; } .eb-code-window { inset: 23px 17px; } .eb-featured h2 { font-size: 30px; } .eb-featured-description { font-size: 12px; } .eb-author-row { align-items: flex-start; flex-direction: column; } .eb-blog-grid-heading { display: block; margin-top: 55px; } .eb-blog-grid-heading h2 { font-size: 27px; } .eb-blog-grid-heading p { margin-top: 6px; } .eb-post-grid { grid-template-columns: 1fr; } .eb-post-card:last-child { grid-column: auto; } .eb-reader { padding: 10px; } .eb-reader-content { padding: 28px 22px 35px; } .eb-reader-content h2 { font-size: 31px; } } @media (prefers-reduced-motion: reduce) { .eb-blog-hero::before, .eb-blog-hero::after, .eb-featured-image::before { animation: none !important; } .eb-featured, .eb-post-card, .eb-blog-hero-content { opacity: 1 !important; transform: none !important; transition: none !important; } } /* CArrers page css */ .careers-main, .careers-main * { box-sizing: border-box; } .careers-main { --career-blue: #287df4; --career-blue-dark: #102d58; --career-text: #172238; --career-muted: #6d7d95; --career-line: #e2e8f0; --career-bg: #f7f9fc; position: relative; overflow: hidden; color: var(--career-text); background: var(--career-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================= HERO ========================================================= */ .careers-hero { position: relative; min-height: 345px; padding: 105px 24px 68px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 118%, rgba(55,157,255,.33), transparent 34%), radial-gradient(circle at 8% 5%, rgba(74,135,255,.14), transparent 30%), linear-gradient(135deg, #102c55 0%, #193a6d 52%, #21467e 100%); } .careers-hero::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); animation: careerGridMove 22s linear infinite; } .careers-hero::after { content: ""; position: absolute; left: 50%; bottom: -590px; width: 680px; height: 680px; transform: translateX(-50%); border: 1px solid rgba(100,190,255,.13); border-radius: 50%; box-shadow: 0 0 0 65px rgba(100,190,255,.025), 0 0 0 130px rgba(100,190,255,.017); animation: careerRingPulse 8s ease-in-out infinite; } @keyframes careerGridMove { to { background-position: 62px 62px; } } @keyframes careerRingPulse { 0%,100% { transform: translateX(-50%) scale(.96); opacity: .45; } 50% { transform: translateX(-50%) scale(1.025); opacity: 1; } } .careers-hero-content { position: relative; z-index: 2; width: min(850px, 100%); animation: careerHeroIn .9s cubic-bezier(.2,.8,.2,1) both; } @keyframes careerHeroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .careers-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 7px 14px; color: #64b2ff; border: 1px solid rgba(93,178,255,.28); border-radius: 999px; background: rgba(61,139,255,.08); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 3px; } .careers-eyebrow::before, .careers-eyebrow::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #62b7ff; box-shadow: 0 0 12px #62b7ff; } .careers-hero h1 { margin: 0; color: #fff; font-size: clamp(46px, 5vw, 66px); line-height: 1.04; letter-spacing: -3px; font-weight: 850; text-shadow: 0 15px 45px rgba(0,0,0,.22); } .careers-hero p { max-width: 700px; margin: 19px auto 0; color: rgba(232,240,255,.76); font-size: 17px; line-height: 1.6; } /* ========================================================= BENEFITS SECTION ========================================================= */ .careers-benefits { position: relative; padding: 86px 24px 105px; background: radial-gradient(circle at 10% 45%, rgba(44,133,255,.055), transparent 25%), radial-gradient(circle at 90% 55%, rgba(157,77,240,.04), transparent 25%), linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%); } .careers-benefits::before { content: ""; position: absolute; top: 15%; left: -150px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47,128,255,.08), transparent 68%); filter: blur(18px); animation: benefitsOrb 12s ease-in-out infinite; pointer-events: none; } @keyframes benefitsOrb { 0%,100% { transform: translate(0,0); } 50% { transform: translate(70px,55px); } } .benefits-container { width: min(1100px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); align-items: center; gap: 62px; } /* ========================================================= IMAGE / VISUAL PANEL ========================================================= */ .benefits-visual { position: relative; min-height: 580px; opacity: 0; transform: translateX(-35px); transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); } .benefits-visual.is-visible { opacity: 1; transform: translateX(0); } .team-image-wrap { position: relative; height: 580px; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: linear-gradient(145deg, #dbe8f7, #edf3f9); box-shadow: 0 30px 70px rgba(27,49,80,.14), 0 3px 0 rgba(255,255,255,.95) inset; } .team-image { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.035); filter: saturate(.88) contrast(.98); transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .8s ease; } .team-image-wrap:hover .team-image { transform: scale(1.09); filter: saturate(1) contrast(1.02); } .team-image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10,35,68,.03) 30%, rgba(10,35,68,.14) 100% ); pointer-events: none; } .team-image-shine { position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.24), transparent ); transform: skewX(-18deg); pointer-events: none; } .team-image-wrap:hover .team-image-shine { animation: imageShine 1.1s ease; } @keyframes imageShine { to { left: 130%; } } /* Floating visual badge */ .career-floating-badge { position: absolute; right: -24px; bottom: 38px; z-index: 5; min-width: 180px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; background: rgba(255,255,255,.88); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 18px 40px rgba(26,48,80,.16), 0 1px 0 rgba(255,255,255,.95) inset; animation: floatingBadge 4.5s ease-in-out infinite; } @keyframes floatingBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .badge-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #19bd83; box-shadow: 0 0 0 5px rgba(25,189,131,.10); } .career-floating-badge strong { color: #253247; font-size: 12px; } .career-floating-badge small { display: block; margin-top: 5px; color: #78879b; font-size: 9px; } /* ========================================================= CONTENT ========================================================= */ .benefits-content { opacity: 0; transform: translateX(35px); transition: opacity .85s cubic-bezier(.2,.8,.2,1) .08s, transform .85s cubic-bezier(.2,.8,.2,1) .08s; } .benefits-content.is-visible { opacity: 1; transform: translateX(0); } .benefits-label { display: inline-block; margin-bottom: 12px; color: #1674ec; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; } .benefits-content h2 { margin: 0; color: #202b3c; font-size: clamp(38px, 4vw, 49px); line-height: 1.08; letter-spacing: -2.1px; font-weight: 820; } .benefits-content h2 span { color: #327ff0; } .benefits-intro { max-width: 580px; margin: 18px 0 29px; color: #6c7c94; font-size: 16px; line-height: 1.65; } /* ========================================================= BENEFIT CARDS ========================================================= */ .benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .benefit-card { position: relative; min-height: 145px; padding: 17px; border: 1px solid #dfe6ef; border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,253,.95)); box-shadow: 0 7px 22px rgba(27,48,80,.045), 0 1px 0 rgba(255,255,255,.95) inset; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; } .benefit-card.is-visible { opacity: 1; transform: translateY(0); } .benefit-card:nth-child(2) { transition-delay: .08s; } .benefit-card:nth-child(3) { transition-delay: .16s; } .benefit-card:nth-child(4) { transition-delay: .24s; } .benefit-card::before { content: ""; position: absolute; top: -70px; right: -70px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(47,128,255,.10), transparent 68%); opacity: 0; transition: opacity .4s ease, transform .5s ease; } .benefit-card:hover { transform: translateY(-7px); border-color: rgba(47,128,255,.25); box-shadow: 0 19px 38px rgba(27,48,80,.10), 0 0 28px rgba(47,128,255,.055); } .benefit-card:hover::before { opacity: 1; transform: scale(1.25); } .benefit-icon { width: 44px; height: 44px; margin-bottom: 12px; display: grid; place-items: center; color: #287df4; border: 1px solid #dceaff; border-radius: 12px; background: linear-gradient(145deg, #eef5ff, #e5f0ff); font-size: 20px; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; } .benefit-card:hover .benefit-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 22px rgba(47,128,255,.13); } .benefit-card h3 { margin: 0 0 6px; color: #263145; font-size: 15px; line-height: 1.3; font-weight: 800; } .benefit-card p { margin: 0; color: #74839a; font-size: 11px; line-height: 1.55; } /* ========================================================= SMALL CAREER CTA STRIP ========================================================= */ .career-cta { position: relative; width: min(1100px, calc(100% - 48px)); margin: 0 auto 90px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid rgba(69,137,231,.18); border-radius: 20px; background: radial-gradient(circle at 85% 50%, rgba(66,150,255,.20), transparent 30%), linear-gradient(135deg, #102d58, #173c73); box-shadow: 0 25px 55px rgba(16,45,88,.14); overflow: hidden; } .career-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 35px 35px; opacity: .55; } .career-cta-content, .career-cta-button { position: relative; z-index: 2; } .career-cta h2 { margin: 0; color: #fff; font-size: 24px; letter-spacing: -.6px; } .career-cta p { margin: 6px 0 0; color: rgba(226,237,255,.68); font-size: 12px; } .career-cta-button { display: inline-flex; align-items: center; justify-content: center; min-width: 145px; min-height: 43px; padding: 0 20px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: linear-gradient(100deg, #3c83ef, #2869df); box-shadow: 0 10px 25px rgba(24,91,205,.25); text-decoration: none; font-size: 11px; font-weight: 800; transition: transform .3s ease, box-shadow .3s ease; } .career-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 32px rgba(24,91,205,.34); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .benefits-container { grid-template-columns: 1fr; gap: 48px; width: min(650px, 100%); } .benefits-visual { min-height: 500px; } .team-image-wrap { height: 500px; } .benefits-content { transform: translateY(25px); } .benefits-content.is-visible { transform: translateY(0); } .career-floating-badge { right: 18px; } } @media (max-width: 600px) { .careers-hero { min-height: 300px; padding: 100px 18px 55px; } .careers-eyebrow { font-size: 9px; letter-spacing: 2.5px; } .careers-hero h1 { font-size: clamp(39px, 11vw, 51px); letter-spacing: -2px; } .careers-hero p { font-size: 13px; } .careers-benefits { padding: 55px 16px 70px; } .benefits-container { gap: 38px; } .benefits-visual { min-height: 380px; } .team-image-wrap { height: 380px; border-radius: 17px; } .career-floating-badge { right: 10px; bottom: 20px; min-width: 155px; padding: 13px; } .benefits-content h2 { font-size: 36px; letter-spacing: -1.5px; } .benefits-intro { font-size: 13px; } .benefit-grid { grid-template-columns: 1fr; gap: 13px; } .benefit-card { min-height: 125px; } .career-cta { width: calc(100% - 32px); margin-bottom: 55px; padding: 25px 21px; align-items: flex-start; flex-direction: column; } .career-cta-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .careers-hero::before, .careers-hero::after, .benefits-orb, .career-floating-badge, .benefits-visual, .benefits-content, .benefit-card, .team-image, .team-image-shine { animation: none !important; transition: none !important; } .benefits-visual, .benefits-content, .benefit-card { opacity: 1 !important; transform: none !important; } } .careers-jobs, .careers-jobs * { box-sizing: border-box; } .careers-jobs { --blue: #2d7df4; --navy: #102b55; --text: #1d293b; --muted: #6c7c94; --line: #dfe6ef; --surface: #ffffff; --soft: #f6f9fc; position: relative; overflow: hidden; width: 100%; color: var(--text); background: #f7f9fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================= OPEN POSITIONS ========================================================= */ .open-positions { position: relative; padding: 96px 24px 100px; overflow: hidden; background: radial-gradient(circle at 50% -10%, rgba(48,128,255,.07), transparent 34%), linear-gradient(180deg, #f9fbfd 0%, #f4f7fa 100%); } .open-positions::before { content: ""; position: absolute; width: 500px; height: 500px; left: -260px; top: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(45,125,244,.07), transparent 68%); filter: blur(12px); animation: jobOrbOne 12s ease-in-out infinite; pointer-events: none; } .open-positions::after { content: ""; position: absolute; width: 480px; height: 480px; right: -270px; bottom: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(122,75,235,.055), transparent 68%); filter: blur(15px); animation: jobOrbTwo 14s ease-in-out infinite; pointer-events: none; } @keyframes jobOrbOne { 0%,100% { transform: translate(0,0); } 50% { transform: translate(70px,45px); } } @keyframes jobOrbTwo { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-35px); } } .jobs-container { position: relative; z-index: 2; width: min(900px, 100%); margin: 0 auto; } .jobs-heading { margin: 0 auto 46px; text-align: center; opacity: 0; transform: translateY(25px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); } .jobs-heading.is-visible { opacity: 1; transform: translateY(0); } .jobs-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #1976ed; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .jobs-eyebrow::before, .jobs-eyebrow::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #3b8cff; box-shadow: 0 0 9px rgba(59,140,255,.65); } .jobs-heading h2 { margin: 0; color: #202b3c; font-size: clamp(34px, 4vw, 47px); line-height: 1.08; letter-spacing: -1.8px; font-weight: 820; } .jobs-heading h2 span { color: #337ff0; } .jobs-heading p { margin: 13px auto 0; color: #718098; font-size: 15px; line-height: 1.6; } /* ========================================================= JOB LIST ========================================================= */ .jobs-list { display: grid; gap: 14px; } .job-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; min-height: 88px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,251,253,.97)); box-shadow: 0 7px 20px rgba(23,45,77,.045), 0 1px 0 rgba(255,255,255,.96) inset; opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease, background .35s ease; } .job-card.is-visible { opacity: 1; transform: translateY(0); } .job-card:nth-child(1) { transition-delay: .03s; } .job-card:nth-child(2) { transition-delay: .10s; } .job-card:nth-child(3) { transition-delay: .17s; } .job-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #2d81f5, #59b5ff); transform: scaleY(0); transform-origin: center; transition: transform .35s ease; } .job-card:hover { border-color: rgba(45,125,244,.26); background: #fff; box-shadow: 0 17px 36px rgba(24,48,81,.09), 0 0 25px rgba(45,125,244,.035); transform: translateY(-4px); } .job-card:hover::before { transform: scaleY(1); } .job-info { min-width: 0; } .job-title { margin: 0 0 8px; color: #273246; font-size: 16px; line-height: 1.35; font-weight: 800; letter-spacing: -.25px; } .job-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; color: #708098; font-size: 10px; } .job-meta span { display: inline-flex; align-items: center; gap: 5px; } .job-meta i { color: #74859c; font-style: normal; font-size: 12px; } .job-actions { display: flex; align-items: center; gap: 10px; } .apply-button { position: relative; min-width: 68px; min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #fff; background: linear-gradient(135deg, #122d55, #1b355d); text-decoration: none; font-size: 11px; font-weight: 800; box-shadow: 0 7px 15px rgba(16,43,85,.12), 0 1px 0 rgba(255,255,255,.08) inset; overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, background .28s ease; } .apply-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 25%, rgba(255,255,255,.23) 50%, transparent 72% ); transform: translateX(-120%); } .apply-button:hover { color: #fff; transform: translateY(-2px); background: linear-gradient(135deg, #173b70, #24548d); box-shadow: 0 11px 22px rgba(16,43,85,.20); } .apply-button:hover::before { animation: buttonShine .65s ease; } @keyframes buttonShine { to { transform: translateX(120%); } } .job-expand { width: 26px; height: 26px; display: grid; place-items: center; color: #71839a; font-size: 13px; transition: transform .3s ease, color .3s ease; } .job-card.open .job-expand { color: #2d7df4; transform: rotate(180deg); } /* ========================================================= JOB DETAILS ACCORDION ========================================================= */ .job-details { grid-column: 1 / -1; max-height: 0; overflow: hidden; opacity: 0; border-top: 1px solid transparent; transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, padding .4s ease, border-color .3s ease; } .job-card.open .job-details { max-height: 280px; padding-top: 16px; border-color: #e7edf4; opacity: 1; } .job-details-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; color: #718098; font-size: 11px; line-height: 1.65; } .job-details h4 { margin: 0 0 7px; color: #273246; font-size: 12px; } .job-details ul { margin: 0; padding-left: 17px; } .job-details li { margin-bottom: 4px; } /* ========================================================= INTERNSHIP SECTION ========================================================= */ .internship { position: relative; padding: 100px 24px 110px; overflow: hidden; background: radial-gradient(circle at 75% 30%, rgba(50,130,255,.08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); } .internship-container { width: min(1100px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .internship-content { opacity: 0; transform: translateX(-30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .internship-content.is-visible { opacity: 1; transform: translateX(0); } .internship-eyebrow { display: inline-block; margin-bottom: 12px; color: #1878ed; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .internship h2 { margin: 0; color: #202b3d; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -2px; } .internship h2 span { color: #347ff0; } .internship-description { max-width: 570px; margin: 18px 0 24px; color: #6f7f97; font-size: 15px; line-height: 1.7; } .internship-points { display: grid; gap: 10px; margin: 0 0 27px; padding: 0; list-style: none; } .internship-points li { display: flex; align-items: center; gap: 10px; color: #5f7089; font-size: 12px; } .internship-points li::before { content: "✓"; width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border: 1px solid #c2eddb; border-radius: 50%; color: #13b879; background: #effbf6; font-size: 10px; font-weight: 900; } .internship-button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 20px; color: #fff; border-radius: 10px; background: linear-gradient(100deg, #327ff0, #2569d9); box-shadow: 0 10px 25px rgba(42,113,224,.20); text-decoration: none; font-size: 11px; font-weight: 800; transition: transform .3s ease, box-shadow .3s ease; } .internship-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 32px rgba(42,113,224,.28); } /* ========================================================= INTERNSHIP VISUAL ========================================================= */ .internship-visual { position: relative; min-height: 390px; opacity: 0; transform: translateX(30px); transition: opacity .8s ease .08s, transform .8s cubic-bezier(.2,.8,.2,1) .08s; } .internship-visual.is-visible { opacity: 1; transform: translateX(0); } .internship-panel { position: relative; min-height: 390px; padding: 28px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(65,130,220,.18); border-radius: 24px; background: radial-gradient(circle at 80% 20%, rgba(71,157,255,.18), transparent 30%), linear-gradient(145deg, #102d58, #173e76); box-shadow: 0 30px 65px rgba(20,48,88,.16); overflow: hidden; } .internship-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 38px 38px; animation: panelGrid 18s linear infinite; } @keyframes panelGrid { to { background-position: 38px 38px; } } .internship-orbit { position: absolute; right: -80px; top: -100px; width: 300px; height: 300px; border: 1px solid rgba(101,190,255,.16); border-radius: 50%; box-shadow: 0 0 0 35px rgba(101,190,255,.025), 0 0 0 70px rgba(101,190,255,.015); animation: orbitPulse 6s ease-in-out infinite; } @keyframes orbitPulse { 0%,100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.05); opacity: 1; } } .internship-panel-content { position: relative; z-index: 2; } .internship-panel-kicker { color: #64b4ff; font-size: 11px; font-weight: 800; letter-spacing: 2px; } .internship-panel h3 { max-width: 430px; margin: 12px 0 10px; color: #fff; font-size: 29px; line-height: 1.15; letter-spacing: -1px; } .internship-panel p { max-width: 430px; margin: 0; color: rgba(228,238,255,.70); font-size: 12px; line-height: 1.7; } .internship-stat-row { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 25px; } .internship-stat { min-width: 105px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); } .internship-stat strong { display: block; color: #fff; font-size: 15px; } .internship-stat span { color: rgba(225,237,255,.58); font-size: 8px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 800px) { .open-positions { padding: 65px 16px 75px; } .jobs-container { width: min(650px, 100%); } .job-card { grid-template-columns: 1fr auto; gap: 12px; padding: 17px; } .job-title { font-size: 14px; } .internship { padding: 70px 18px 80px; } .internship-container { grid-template-columns: 1fr; gap: 42px; width: min(650px, 100%); } .internship-content, .internship-visual { transform: translateY(25px); } .internship-content.is-visible, .internship-visual.is-visible { transform: translateY(0); } } @media (max-width: 560px) { .jobs-heading h2 { font-size: 34px; } .jobs-heading p { font-size: 12px; } .job-card { display: grid; grid-template-columns: 1fr auto; } .job-title { font-size: 13px; line-height: 1.45; } .job-meta { gap: 7px 10px; font-size: 9px; } .job-actions { align-self: center; } .job-details-inner { grid-template-columns: 1fr; gap: 15px; } .internship h2 { font-size: 34px; } .internship-description { font-size: 13px; } .internship-panel { min-height: 350px; padding: 23px; } .internship-panel h3 { font-size: 25px; } .internship-stat-row { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .open-positions::before, .open-positions::after, .internship-panel::before, .internship-orbit, .apply-button::before { animation: none !important; } .jobs-heading, .job-card, .internship-content, .internship-visual { opacity: 1 !important; transform: none !important; transition: none !important; } } .eb-internship, .eb-internship * { box-sizing: border-box; } .eb-internship { --eb-blue: #2e78f3; --eb-blue-dark: #14345f; --eb-text: #202a3a; --eb-muted: #667791; --eb-border: #dce4ee; position: relative; width: 100%; overflow: hidden; padding: 78px 24px 105px; background: radial-gradient( circle at 7% 35%, rgba(49,126,244,.055), transparent 25% ), radial-gradient( circle at 92% 45%, rgba(74,118,240,.045), transparent 27% ), linear-gradient( 180deg, #fbfcfe 0%, #f7f9fc 100% ); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--eb-text); } /* subtle animated background */ .eb-internship::before { content: ""; position: absolute; width: 520px; height: 520px; left: -310px; top: 180px; border-radius: 50%; background: radial-gradient( circle, rgba(45,126,244,.09), transparent 68% ); filter: blur(15px); animation: ebInternOrb 12s ease-in-out infinite; pointer-events: none; } .eb-internship::after { content: ""; position: absolute; width: 480px; height: 480px; right: -300px; bottom: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(91,103,226,.055), transparent 68% ); filter: blur(18px); animation: ebInternOrbTwo 14s ease-in-out infinite; pointer-events: none; } @keyframes ebInternOrb { 0%,100% { transform: translate(0,0); } 50% { transform: translate(90px,45px); } } @keyframes ebInternOrbTwo { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-65px,-40px); } } /* ========================================================= CONTAINER ========================================================= */ .eb-internship-container { position: relative; z-index: 2; width: min(1100px, 100%); margin: 0 auto; } /* ========================================================= INTRO ========================================================= */ .eb-internship-intro { max-width: 700px; margin-bottom: 34px; opacity: 0; transform: translateY(25px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); } .eb-internship-intro.is-visible { opacity: 1; transform: translateY(0); } .eb-internship-label { display: block; margin-bottom: 10px; color: #1474ed; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 1.5px; } .eb-internship-intro h2 { margin: 0; color: #202a3a; font-size: clamp(38px, 4.3vw, 49px); line-height: 1.08; letter-spacing: -2.1px; font-weight: 820; } .eb-internship-intro h2 span { color: #327cf0; } .eb-internship-intro p { max-width: 650px; margin: 18px 0 0; color: var(--eb-muted); font-size: 15px; line-height: 1.7; } /* ========================================================= TWO COLUMN AREA ========================================================= */ .eb-internship-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr); gap: 56px; align-items: start; } /* ========================================================= LEFT CARDS ========================================================= */ .eb-internship-list { display: grid; gap: 14px; } .eb-intern-card { position: relative; display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 14px; min-height: 128px; padding: 18px 20px; border: 1px solid var(--eb-border); border-radius: 12px; background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(250,252,254,.98) ); box-shadow: 0 7px 20px rgba(30,52,83,.035), inset 0 1px 0 rgba(255,255,255,.95); overflow: hidden; opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease; } .eb-intern-card.is-visible { opacity: 1; transform: translateY(0); } .eb-intern-card:nth-child(1) { transition-delay: .04s; } .eb-intern-card:nth-child(2) { transition-delay: .10s; } .eb-intern-card:nth-child(3) { transition-delay: .16s; } .eb-intern-card:nth-child(4) { transition-delay: .22s; } .eb-intern-card:nth-child(5) { transition-delay: .28s; } .eb-intern-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient( 180deg, #2e7df4, #55a7ff ); transform: scaleY(0); transform-origin: center; transition: transform .35s ease; } .eb-intern-card:hover { transform: translateY(-5px); border-color: rgba(45,126,244,.30); box-shadow: 0 17px 35px rgba(29,53,87,.085), 0 0 28px rgba(45,126,244,.04); } .eb-intern-card:hover::before { transform: scaleY(1); } /* icon */ .eb-intern-icon { width: 45px; height: 45px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: linear-gradient( 145deg, #2878f4, #285cf0 ); box-shadow: 0 8px 18px rgba(42,104,239,.18), inset 0 1px 0 rgba(255,255,255,.20); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; } .eb-intern-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .eb-intern-card:hover .eb-intern-icon { transform: translateY(-2px) rotate(-4deg) scale(1.07); box-shadow: 0 12px 24px rgba(42,104,239,.25); } /* content */ .eb-intern-content { min-width: 0; } .eb-intern-content h3 { margin: 2px 0 5px; color: #273143; font-size: 15px; line-height: 1.42; letter-spacing: -.25px; font-weight: 800; } .eb-duration { display: block; margin-bottom: 7px; color: #0f70ef; font-size: 11px; line-height: 1; font-weight: 600; } .eb-intern-content p { max-width: 560px; margin: 0; color: #6b7b94; font-size: 11px; line-height: 1.55; } /* ========================================================= RIGHT INTEREST CARD ========================================================= */ .eb-interest-card { position: sticky; top: 110px; padding: 36px; border: 1px solid #dce5ef; border-radius: 21px; background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(250,252,255,.98) ); box-shadow: 0 18px 45px rgba(28,52,84,.065), inset 0 1px 0 rgba(255,255,255,.98); opacity: 0; transform: translateX(30px); transition: opacity .8s ease .12s, transform .8s cubic-bezier(.2,.8,.2,1) .12s, box-shadow .4s ease; } .eb-interest-card.is-visible { opacity: 1; transform: translateX(0); } .eb-interest-card:hover { box-shadow: 0 25px 55px rgba(28,52,84,.105), 0 0 30px rgba(45,126,244,.045); } /* icon + heading */ .eb-interest-heading { display: flex; flex-direction: column; justify-content: center; } .eb-interest-icon { width: 58px; height: 58px; margin-bottom: -49px; margin-left: 0; display: grid; place-items: center; color: #2c76f3; border-radius: 13px; background: linear-gradient( 145deg, #edf4ff, #e3eeff ); transform: translateY(0); transition: transform .4s ease, box-shadow .4s ease; } .eb-interest-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .eb-interest-card:hover .eb-interest-icon { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 12px 25px rgba(44,118,243,.12); } .eb-interest-heading { padding-left: 74px; min-height: 58px; } .eb-interest-heading h3 { margin: 0; color: #253044; font-size: 22px; line-height: 1.15; letter-spacing: -.65px; font-weight: 820; } .eb-interest-heading span { margin-top: 3px; color: #718099; font-size: 13px; } .eb-interest-card > p { margin: 27px 0 24px; color: #6b7b94; font-size: 14px; line-height: 1.7; } /* CTA */ .eb-interest-button { position: relative; min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; border-radius: 10px; background: linear-gradient( 100deg, #1768f5, #3c58ef ); box-shadow: 0 10px 25px rgba(38,103,232,.18); text-decoration: none; font-size: 12px; font-weight: 800; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .eb-interest-button::before { content: ""; position: absolute; top: 0; left: -110%; width: 55%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent ); transform: skewX(-18deg); } .eb-interest-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 32px rgba(38,103,232,.27); } .eb-interest-button:hover::before { animation: ebButtonShine .7s ease; } @keyframes ebButtonShine { to { left: 130%; } } .eb-arrow { font-size: 17px; line-height: 1; transition: transform .3s ease; } .eb-interest-button:hover .eb-arrow { transform: translateX(4px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .eb-internship-layout { grid-template-columns: 1fr; gap: 40px; } .eb-interest-card { position: relative; top: auto; transform: translateY(25px); } .eb-interest-card.is-visible { transform: translateY(0); } .eb-interest-card { max-width: 700px; } } @media (max-width: 600px) { .eb-internship { padding: 58px 16px 75px; } .eb-internship-intro h2 { font-size: 35px; letter-spacing: -1.5px; } .eb-internship-intro p { font-size: 13px; } .eb-intern-card { grid-template-columns: 42px minmax(0,1fr); min-height: 120px; padding: 16px; } .eb-intern-icon { width: 42px; height: 42px; } .eb-intern-content h3 { font-size: 13px; } .eb-intern-content p { font-size: 10px; } .eb-interest-card { padding: 26px 22px; border-radius: 17px; } .eb-interest-heading { padding-left: 70px; } .eb-interest-heading h3 { font-size: 20px; } .eb-interest-card > p { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .eb-internship::before, .eb-internship::after, .eb-interest-button::before { animation: none !important; } .eb-internship-intro, .eb-intern-card, .eb-interest-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Contact page css */ .eb-contact, .eb-contact * { box-sizing: border-box; } .eb-contact { --eb-blue: #2d70f4; --eb-blue-dark: #1554c8; --eb-navy: #122e58; --eb-text: #202c3d; --eb-muted: #667894; --eb-border: #dce5ef; position: relative; width: 100%; overflow: hidden; color: var(--eb-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f8fafc; } /* ========================================================= HERO ========================================================= */ .eb-contact-hero { position: relative; min-height: 345px; display: flex; align-items: center; justify-content: center; padding: 95px 24px 72px; overflow: hidden; color: #fff; background: radial-gradient( circle at 50% 110%, rgba(47,137,255,.23), transparent 38% ), radial-gradient( circle at 10% 10%, rgba(46,110,232,.14), transparent 27% ), linear-gradient( 135deg, #122d55, #193866 50%, #213f76 ); } .eb-contact-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 52px 52px; mask-image: linear-gradient( to bottom, black, transparent 95% ); animation: ebContactGrid 20s linear infinite; } @keyframes ebContactGrid { to { background-position: 52px 52px; } } .eb-contact-hero::after { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(93,171,255,.10); border-radius: 50%; box-shadow: 0 0 0 45px rgba(93,171,255,.025), 0 0 0 90px rgba(93,171,255,.014); animation: ebContactRing 8s ease-in-out infinite; } @keyframes ebContactRing { 0%,100% { transform: scale(.88); opacity: .35; } 50% { transform: scale(1.05); opacity: .75; } } .eb-contact-hero-content { position: relative; z-index: 2; width: min(800px, 100%); text-align: center; opacity: 0; transform: translateY(25px); animation: ebContactHeroIn .8s cubic-bezier(.2,.8,.2,1) .1s forwards; } @keyframes ebContactHeroIn { to { opacity: 1; transform: translateY(0); } } .eb-contact-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #4d9aff; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .eb-contact-kicker::before, .eb-contact-kicker::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #55a7ff; box-shadow: 0 0 10px rgba(85,167,255,.8); } .eb-contact-hero h1 { margin: 0; color: #fff; font-size: clamp(44px, 5vw, 70px); line-height: 1.04; letter-spacing: -3.5px; font-weight: 850; } .eb-contact-hero h1 span { color: #4d9aff; } .eb-contact-hero p { max-width: 720px; margin: 17px auto 0; color: rgba(235,243,255,.72); font-size: 16px; line-height: 1.65; } /* ========================================================= MAIN CONTACT AREA ========================================================= */ .eb-contact-section { position: relative; padding: 82px 24px 115px; background: radial-gradient( circle at 76% 30%, rgba(52,128,246,.045), transparent 25% ), #f9fbfd; } .eb-contact-container { width: min(1110px, 100%); margin: 0 auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 70px; align-items: start; } /* ========================================================= LEFT CONTACT INFORMATION ========================================================= */ .eb-contact-info { padding-top: 5px; opacity: 0; transform: translateX(-25px); animation: ebContactLeft .8s cubic-bezier(.2,.8,.2,1) .25s forwards; } @keyframes ebContactLeft { to { opacity: 1; transform: translateX(0); } } .eb-contact-info h2 { margin: 0; color: #202b3b; font-size: 25px; letter-spacing: -.8px; font-weight: 820; } .eb-contact-info > p { max-width: 300px; margin: 20px 0 35px; color: #667894; font-size: 14px; line-height: 1.65; } .eb-contact-item { position: relative; display: grid; grid-template-columns: 43px 1fr; gap: 14px; margin-bottom: 25px; } .eb-contact-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #d5e4ff; border-radius: 13px; color: #2873f4; background: linear-gradient( 145deg, #f1f6ff, #e5efff ); box-shadow: 0 8px 18px rgba(37,101,200,.07); font-size: 19px; transition: transform .3s ease, box-shadow .3s ease; } .eb-contact-item:hover .eb-contact-icon { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 13px 25px rgba(37,101,200,.13); } .eb-contact-item h3 { margin: 1px 0 6px; color: #263244; font-size: 14px; font-weight: 800; } .eb-contact-item p, .eb-contact-item a { display: block; margin: 0; color: #657790; font-size: 12px; line-height: 1.55; text-decoration: none; } .eb-contact-item a:hover { color: var(--eb-blue); } .eb-contact-note { color: #8290a3 !important; } /* ========================================================= FORM CARD ========================================================= */ .eb-contact-form-card { position: relative; border: 1px solid rgba(154,184,226,.42); border-radius: 27px; background: linear-gradient( 145deg, rgba(247,249,255,.96), rgba(241,245,253,.96) ); box-shadow: 0 25px 60px rgba(35,65,105,.11), inset 0 1px 0 rgba(255,255,255,.95); overflow: hidden; opacity: 0; transform: translateY(28px) scale(.985); animation: ebFormIn .85s cubic-bezier(.2,.8,.2,1) .35s forwards; } @keyframes ebFormIn { to { opacity: 1; transform: translateY(0) scale(1); } } .eb-contact-form-card::before { content: ""; position: absolute; width: 300px; height: 300px; top: -170px; right: -100px; border-radius: 50%; background: radial-gradient( circle, rgba(65,132,246,.11), transparent 68% ); pointer-events: none; } /* ========================================================= STEPPER ========================================================= */ .eb-stepper { position: relative; display: flex; align-items: center; padding: 22px 30px; border-bottom: 1px solid #e0e7f0; background: rgba(246,248,255,.82); } .eb-step { display: flex; align-items: center; color: #9aa6b7; font-size: 12px; font-weight: 700; white-space: nowrap; } .eb-step-number { width: 30px; height: 30px; display: grid; place-items: center; margin-right: 8px; border-radius: 50%; background: #e3e7ed; color: #6e7b8d; font-size: 12px; font-weight: 800; transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease; } .eb-step.active { color: #2772f2; } .eb-step.active .eb-step-number { color: #fff; background: linear-gradient( 135deg, #347ef6, #215ce1 ); box-shadow: 0 8px 17px rgba(42,111,240,.23); transform: scale(1.06); } .eb-step-line { width: 46px; height: 1px; margin: 0 13px; background: #d9e0e9; } .eb-step-status { margin-left: auto; color: #8c98aa; font-size: 10px; } /* ========================================================= FORM CONTENT ========================================================= */ .eb-form-content { padding: 39px 37px 38px; } .eb-form-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 28px; } .eb-form-heading-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: #2874f4; background: #e5efff; font-size: 19px; } .eb-form-heading h2 { margin: 0; color: #263347; font-size: 28px; line-height: 1.1; letter-spacing: -1px; font-weight: 840; } .eb-form-heading p { margin: 6px 0 0; color: #7b899d; font-size: 13px; } .eb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px 16px; } .eb-field.full { grid-column: 1 / -1; } .eb-field label { display: block; margin: 0 0 7px; color: #3e4b60; font-size: 12px; font-weight: 800; } .eb-required { color: #e34855; } .eb-field input, .eb-field select, .eb-field textarea { width: 100%; border: 1px solid #d9e1eb; border-radius: 11px; outline: none; color: #34445b; background: rgba(255,255,255,.78); font-family: inherit; font-size: 12px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .eb-field input, .eb-field select { height: 46px; padding: 0 13px; } .eb-field textarea { min-height: 108px; padding: 12px 13px; resize: vertical; } .eb-field input::placeholder, .eb-field textarea::placeholder { color: #9aa6b6; } .eb-field input:focus, .eb-field select:focus, .eb-field textarea:focus { border-color: #6ea1f7; box-shadow: 0 0 0 4px rgba(49,121,244,.09); background: #fff; } .eb-field input.invalid, .eb-field textarea.invalid, .eb-field select.invalid { border-color: #e05b67; box-shadow: 0 0 0 4px rgba(224,91,103,.07); } .eb-error { display: none; margin-top: 5px; color: #d34e5a; font-size: 10px; } .eb-error.show { display: block; } /* ========================================================= FORM FOOTER ========================================================= */ .eb-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; padding-top: 21px; border-top: 1px solid #e0e7ef; } .eb-form-hint { color: #8996a8; font-size: 10px; line-height: 1.5; } .eb-next-button { position: relative; min-width: 125px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient( 135deg, #327af5, #285be1 ); box-shadow: 0 11px 22px rgba(39,100,225,.21); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .eb-next-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.24), transparent ); transform: skewX(-20deg); transition: left .65s ease; } .eb-next-button:hover::before { left: 140%; } .eb-next-button:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(39,100,225,.28); } .eb-next-button:active { transform: translateY(0); } .eb-next-button span { font-size: 16px; transition: transform .25s ease; } .eb-next-button:hover span { transform: translateX(4px); } /* ========================================================= STEP 2 / 3 ========================================================= */ .eb-form-step { display: none; } .eb-form-step.active { display: block; animation: ebStepIn .4s ease both; } @keyframes ebStepIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } } .eb-step-two-message { min-height: 270px; } .eb-step-three-message { min-height: 270px; } .eb-back-button { min-width: 100px; height: 46px; border: 1px solid #d6dfeb; border-radius: 11px; color: #53657e; background: #fff; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color .25s ease, transform .25s ease; } .eb-back-button:hover { border-color: #a8c6f4; transform: translateY(-2px); } .eb-review-box { padding: 17px; border: 1px solid #dce5ef; border-radius: 13px; background: rgba(255,255,255,.72); } .eb-review-row { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid #edf1f5; font-size: 11px; } .eb-review-row:last-child { border-bottom: 0; } .eb-review-row span:first-child { color: #8996a8; } .eb-review-row span:last-child { color: #35455c; font-weight: 700; text-align: right; } /* ========================================================= SUCCESS ========================================================= */ .eb-contact-success { display: none; padding: 45px 35px; text-align: center; } .eb-contact-success.show { display: block; animation: ebSuccessIn .55s cubic-bezier(.2,.8,.2,1); } @keyframes ebSuccessIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .eb-success-icon { width: 65px; height: 65px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: #fff; background: linear-gradient( 135deg, #21bd77, #12a865 ); box-shadow: 0 13px 28px rgba(21,171,104,.20); font-size: 28px; } .eb-contact-success h2 { margin: 0; color: #263448; font-size: 27px; } .eb-contact-success p { max-width: 470px; margin: 10px auto 22px; color: #718098; font-size: 13px; line-height: 1.65; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 900px) { .eb-contact-container { grid-template-columns: 1fr; gap: 42px; } .eb-contact-info { max-width: 680px; margin: 0 auto; width: 100%; } .eb-contact-info > p { max-width: 600px; } } @media (max-width: 620px) { .eb-contact-hero { min-height: 310px; padding: 85px 18px 65px; } .eb-contact-hero h1 { font-size: 43px; letter-spacing: -2.5px; } .eb-contact-hero p { font-size: 13px; } .eb-contact-section { padding: 55px 16px 75px; } .eb-contact-container { gap: 35px; } .eb-contact-form-card { border-radius: 21px; } .eb-stepper { padding: 17px 14px; } .eb-step span:not(.eb-step-number) { display: none; } .eb-step-line { flex: 1; margin: 0 9px; } .eb-step-status { font-size: 9px; } .eb-form-content { padding: 29px 19px 25px; } .eb-form-heading h2 { font-size: 24px; } .eb-form-heading p { font-size: 11px; } .eb-form-grid { grid-template-columns: 1fr; } .eb-field.full { grid-column: auto; } .eb-form-bottom { align-items: stretch; flex-direction: column; } .eb-next-button, .eb-back-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .eb-contact-hero::before, .eb-contact-hero::after { animation: none !important; } .eb-contact-hero-content, .eb-contact-info, .eb-contact-form-card { animation: none !important; opacity: 1 !important; transform: none !important; } .eb-next-button, .eb-contact-icon { transition: none !important; } } /* innovations page css */ .innovation-section { position: relative; min-height: 760px; padding: 80px 0 70px; overflow: hidden; background: radial-gradient( circle at 50% 42%, rgba(65, 130, 255, .13), transparent 32% ), linear-gradient( 180deg, #f8fbff 0%, #eef5fc 100% ); } /* ========================================================= HEADER ========================================================= */ .innovation-heading { position: relative; z-index: 20; text-align: center; margin: 0 auto 35px; padding: 0 20px; opacity: 1; } .innovation-kicker { display: block; margin-bottom: 10px; color: #377cff; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; } .innovation-heading h2 { margin: 0; color: #142b55; font-size: clamp(38px, 4vw, 58px); line-height: 1.05; font-weight: 750; letter-spacing: -2px; } .innovation-heading h2 span { color: #377cff; } .innovation-heading p { margin: 15px auto 0; color: #70829f; font-size: 16px; line-height: 1.6; } /* ========================================================= CAROUSEL AREA ========================================================= */ #servicesShowcase { position: relative; } .services-carousel { position: relative; width: 100%; max-width: 1450px; height: 510px; margin: 0 auto; perspective: 1800px; transform-style: preserve-3d; overflow: visible; } /* ========================================================= CARD BASE ========================================================= */ .services-carousel .service-card { position: absolute; left: 50%; top: 5px; width: 300px; height: 475px; margin: 0; overflow: hidden; border-radius: 22px; background: #ffffff; border: 1px solid rgba(52, 108, 205, .18); box-shadow: 0 25px 55px rgba(31, 67, 115, .14); opacity: 0; pointer-events: none; transform-origin: center center; will-change: transform, opacity; transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .65s ease, filter .65s ease, box-shadow .45s ease, border-color .45s ease; transform-style: preserve-3d; } /* ========================================================= IMAGE ========================================================= */ .service-image { position: relative; width: 100%; height: 195px; overflow: hidden; background: linear-gradient( 135deg, #dcecff, #f4f8ff ); } .service-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; } .service-card:hover .service-image img { transform: scale(1.08); filter: saturate(1.08); } /* ========================================================= IMAGE BADGE ========================================================= */ .service-image-badge { position: absolute; top: 14px; left: 14px; z-index: 5; padding: 7px 11px; border-radius: 50px; color: #fff; background: rgba(13, 43, 88, .72); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); font-size: 8px; font-weight: 800; letter-spacing: 1px; } /* ========================================================= CARD CONTENT ========================================================= */ .service-content { position: relative; height: calc(100% - 195px); padding: 24px 25px 22px; } .service-number { position: absolute; top: 18px; right: 20px; color: rgba(42, 107, 220, .18); font-size: 12px; font-weight: 800; } .innovation-category { display: inline-flex; align-items: center; padding: 6px 10px; margin-bottom: 12px; border-radius: 50px; background: rgba(55,124,255,.08); border: 1px solid rgba(55,124,255,.12); color: #377cff; font-size: 8px; font-weight: 800; letter-spacing: 1px; } .service-content h3 { margin: 0 25px 12px 0; color: #162d59; font-size: 21px; line-height: 1.2; font-weight: 750; letter-spacing: -.4px; } .service-content p { margin: 0; color: #687b9c; font-size: 12px; line-height: 1.65; } /* ========================================================= TAGS ========================================================= */ .innovation-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; } .innovation-tags span { padding: 5px 8px; border-radius: 7px; background: #f1f6ff; border: 1px solid rgba(55,124,255,.10); color: #55719d; font-size: 8px; font-weight: 700; } /* ========================================================= READ MORE ========================================================= */ .innovation-read-more { position: absolute; left: 25px; bottom: 20px; display: inline-flex; align-items: center; gap: 9px; color: #2869dc; text-decoration: none; font-size: 10px; font-weight: 800; transition: color .3s ease; } .innovation-read-more span { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(55,124,255,.09); transition: transform .35s ease, background .35s ease, color .35s ease; } .innovation-read-more:hover span { transform: translate(4px,-2px); background: #377cff; color: white; } /* ========================================================= CENTER / ACTIVE CARD ========================================================= */ .services-carousel .service-card.position-center { opacity: 1; z-index: 20; pointer-events: auto; background: linear-gradient( 145deg, #243b78, #1c326c ); border-color: rgba(72, 139, 255, .9); box-shadow: 0 35px 75px rgba(24, 63, 140, .32), 0 0 0 1px rgba(66, 133, 255, .2), 0 0 50px rgba(55,124,255,.18); transform: translateX(-50%) translateZ(90px) rotateY(0deg) scale(1); } /* active text */ .services-carousel .service-card.position-center .service-content h3 { color: #ffffff; } .services-carousel .service-card.position-center .service-content p { color: rgba(255,255,255,.70); } .services-carousel .service-card.position-center .innovation-category { background: rgba(65,130,255,.18); border-color: rgba(130,180,255,.25); color: #8eb9ff; } .services-carousel .service-card.position-center .innovation-tags span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.75); } .services-carousel .service-card.position-center .service-number { color: rgba(255,255,255,.25); } .services-carousel .service-card.position-center .innovation-read-more { color: white; } .services-carousel .service-card.position-center .innovation-read-more span { background: rgba(255,255,255,.12); } /* ========================================================= LEFT FAR ========================================================= */ .services-carousel .service-card.position-left-far { opacity: .42; z-index: 2; transform: translateX(-620px) translateZ(-400px) rotateY(27deg) scale(.72); filter: saturate(.65) brightness(.95); } /* ========================================================= LEFT ========================================================= */ .services-carousel .service-card.position-left { opacity: .92; z-index: 8; transform: translateX(-320px) translateZ(-100px) rotateY(16deg) scale(.88); filter: saturate(.82); } /* ========================================================= RIGHT ========================================================= */ .services-carousel .service-card.position-right { opacity: .92; z-index: 8; transform: translateX(20px) translateZ(-100px) rotateY(-16deg) scale(.88); filter: saturate(.82); } /* ========================================================= RIGHT FAR ========================================================= */ .services-carousel .service-card.position-right-far { opacity: .42; z-index: 2; transform: translateX(320px) translateZ(-400px) rotateY(-27deg) scale(.72); filter: saturate(.65) brightness(.95); } /* ========================================================= HIDDEN ========================================================= */ .services-carousel .service-card.position-hidden { opacity: 0; z-index: 0; pointer-events: none; transform: translateX(0) translateZ(-700px) scale(.5); } /* ========================================================= ACTIVE CARD HOVER ========================================================= */ .services-carousel .service-card.position-center:hover { box-shadow: 0 45px 90px rgba(25,70,150,.38), 0 0 0 1px rgba(70,140,255,.3), 0 0 65px rgba(55,124,255,.24); } /* ========================================================= ARROWS ========================================================= */ .services-arrow { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -20px; z-index: 50; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.95); color: #377cff; box-shadow: 0 15px 35px rgba(40,80,140,.14); cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .services-prev { left: 7%; } .services-next { right: 7%; } .services-arrow:hover { transform: scale(1.1); background: #377cff; color: #fff; box-shadow: 0 18px 40px rgba(55,124,255,.25); } /* ========================================================= PAGINATION ========================================================= */ .services-pagination { position: relative; z-index: 40; display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 8px; } .services-pagination button { width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: #8294b2; font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 50%; transition: color .3s ease, background .3s ease, transform .3s ease; } .services-pagination button:hover { color: #377cff; transform: translateY(-2px); } .services-pagination button.active { color: #fff; background: linear-gradient( 135deg, #438aff, #2869dc ); box-shadow: 0 8px 22px rgba(55,124,255,.28); transform: scale(1.12); } /* ========================================================= CTA ========================================================= */ .services-cta { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 14px; width: max-content; margin: 28px auto 0; padding: 17px 32px; background: linear-gradient( 135deg, #20376f, #377cff ); color: #fff; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: 2px; box-shadow: 0 18px 40px rgba(34,78,160,.20); transition: transform .35s ease, box-shadow .35s ease; } .services-cta:hover { color: white; transform: translateY(-5px); box-shadow: 0 25px 55px rgba(34,78,160,.30); } .services-cta i { font-size: 16px; transition: transform .35s ease; } .services-cta:hover i { transform: translateX(5px); } /* ========================================================= ORBITS ========================================================= */ .services-orbit { position: absolute; left: 50%; top: 52%; border: 1px solid rgba(55,124,255,.10); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); } .orbit-one { width: 900px; height: 290px; } .orbit-two { width: 1150px; height: 390px; } .orbit-three { width: 1400px; height: 500px; opacity: .5; } /* ========================================================= FLOATING DOTS ========================================================= */ .services-floating-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #377cff; box-shadow: 0 0 0 6px rgba(55,124,255,.08), 0 0 20px rgba(55,124,255,.35); animation: floatingDot 4s ease-in-out infinite; } .services-floating-dot:nth-of-type(1) { left: 13%; top: 48%; } .services-floating-dot:nth-of-type(2) { right: 14%; top: 42%; animation-delay: 1s; } .services-floating-dot:nth-of-type(3) { left: 27%; bottom: 18%; animation-delay: 2s; } @keyframes floatingDot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* ========================================================= SCROLL HINT ========================================================= */ .services-scroll-hint { position: absolute; right: 4%; bottom: 35px; display: flex; flex-direction: column; color: #7790b8; font-size: 10px; line-height: 1.5; z-index: 20; } .services-scroll-hint span:last-child { margin-top: 5px; color: #377cff; font-size: 17px; animation: scrollArrow 1.8s ease-in-out infinite; } @keyframes scrollArrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .innovation-section { min-height: 700px; padding: 65px 0 50px; } .innovation-heading h2 { font-size: 38px; } .innovation-heading p { font-size: 14px; } .services-carousel { height: 475px; } .services-carousel .service-card { width: 285px; height: 455px; } .services-carousel .service-card.position-left, .services-carousel .service-card.position-left-far, .services-carousel .service-card.position-right, .services-carousel .service-card.position-right-far { opacity: 0; pointer-events: none; transform: translateX(-50%) translateZ(-500px) scale(.7); } .services-carousel .service-card.position-center { transform: translateX(-50%) translateZ(40px) scale(.94); } .services-arrow { width: 42px; height: 42px; } .services-prev { left: 4%; } .services-next { right: 4%; } .services-pagination { gap: 8px; } .services-scroll-hint { display: none; } .orbit-two, .orbit-three { display: none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .services-carousel .service-card, .service-image img, .services-arrow, .services-cta { transition: none !important; } .services-floating-dot, .services-scroll-hint span:last-child { animation: none !important; } } /* ========================================================= INNOVATION HERO ========================================================= */ .innovation-hero { position: relative; width: 100%; min-height: 325px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient( 135deg, #102544 0%, #193762 45%, #203f78 100% ); isolation: isolate; } /* ========================================================= HERO BACKGROUND GLOW ========================================================= */ .innovation-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient( circle at 50% 80%, rgba(55,124,255,.30), transparent 38% ), radial-gradient( circle at 15% 20%, rgba(38,103,218,.16), transparent 30% ), radial-gradient( circle at 85% 20%, rgba(71,142,255,.13), transparent 30% ); animation: heroGlow 8s ease-in-out infinite alternate; } @keyframes heroGlow { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.12); opacity: 1; } } /* ========================================================= HERO CONTENT ========================================================= */ .innovation-hero-content { position: relative; z-index: 5; width: 100%; max-width: 900px; padding: 105px 25px 55px; text-align: center; animation: heroContentReveal .9s cubic-bezier(.16,1,.3,1) both; } @keyframes heroContentReveal { from { opacity: 0; transform: translateY(25px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= KICKER ========================================================= */ .innovation-hero-kicker { display: inline-block; margin-bottom: 14px; color: #4b91ff; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; } /* ========================================================= HERO TITLE ========================================================= */ .innovation-hero h1 { margin: 0; color: #ffffff; font-size: clamp(46px, 5vw, 64px); line-height: 1.05; font-weight: 750; letter-spacing: -2.5px; } .innovation-hero h1 span { color: #3d82f6; background: linear-gradient( 90deg, #3c7ff3, #65a0ff ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================= SUBTITLE ========================================================= */ .innovation-hero p { margin: 18px auto 0; max-width: 650px; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.6; } /* ========================================================= DECORATIVE LINE ========================================================= */ .innovation-hero-line { width: 65px; height: 2px; margin: 25px auto 0; border-radius: 50px; background: linear-gradient( 90deg, transparent, #4388ff, transparent ); box-shadow: 0 0 20px rgba(67,136,255,.5); animation: heroLinePulse 2.5s ease-in-out infinite; } @keyframes heroLinePulse { 0%, 100% { width: 55px; opacity: .55; } 50% { width: 100px; opacity: 1; } } /* ========================================================= CONTENT SECTION ========================================================= */ .innovation-section { position: relative; min-height: 760px; padding: 80px 0 70px; background: radial-gradient( circle at 50% 10%, rgba(55,124,255,.07), transparent 35% ), #f7faff; } /* ========================================================= IF NAVBAR IS FIXED ========================================================= */ /* যদি তোমার navbar: position: fixed; হয়, তাহলে hero-কে navbar-এর নিচে নামানোর জন্য এই rule ব্যবহার করো। */ .navbar { z-index: 9999; } .innovation-hero { margin-top: 0; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .innovation-hero { min-height: 300px; } .innovation-hero-content { padding: 105px 20px 45px; } .innovation-hero h1 { font-size: 42px; letter-spacing: -1.5px; } .innovation-hero p { font-size: 14px; } } /* products page css */ .plans-main, .plans-main * { box-sizing: border-box; } .plans-main { --blue: #2f7df4; --blue-dark: #102b55; --text: #172238; --muted: #718096; --line: #e5eaf1; --bg: #f7f9fc; position: relative; width: 100%; overflow: hidden; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================= HERO ========================================================= */ .plans-hero { position: relative; min-height: 340px; padding: 105px 24px 72px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 115%, rgba(57, 157, 255, .34), transparent 34%), radial-gradient(circle at 10% 0%, rgba(64, 130, 255, .15), transparent 30%), linear-gradient(135deg, #102d58 0%, #183a6d 50%, #20457d 100%); } .plans-hero::before { content: ""; position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent); animation: heroGridMove 20s linear infinite; } .plans-hero::after { content: ""; position: absolute; width: 700px; height: 700px; left: 50%; bottom: -625px; transform: translateX(-50%); border: 1px solid rgba(93, 187, 255, .13); border-radius: 50%; box-shadow: 0 0 0 65px rgba(93,187,255,.025), 0 0 0 130px rgba(93,187,255,.018); animation: heroRing 8s ease-in-out infinite; } @keyframes heroGridMove { to { background-position: 62px 62px; } } @keyframes heroRing { 0%,100% { transform: translateX(-50%) scale(.96); opacity: .45; } 50% { transform: translateX(-50%) scale(1.02); opacity: 1; } } .plans-hero-content { position: relative; z-index: 2; width: min(850px, 100%); animation: heroIn .8s cubic-bezier(.2,.8,.2,1) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .plans-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 7px 14px; color: #65b4ff; border: 1px solid rgba(94,178,255,.28); border-radius: 999px; background: rgba(65,145,255,.08); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 3px; } .plans-eyebrow::before, .plans-eyebrow::after { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #59b5ff; box-shadow: 0 0 12px rgba(89,181,255,.9); } .plans-hero h1 { margin: 0; color: #fff; font-size: clamp(44px, 5vw, 66px); line-height: 1.05; letter-spacing: -3px; font-weight: 850; text-shadow: 0 15px 45px rgba(0,0,0,.22); } .plans-hero p { width: min(690px, 100%); margin: 18px auto 0; color: rgba(231,240,255,.75); font-size: 15px; line-height: 1.65; } /* ========================================================= PRICING CARDS ========================================================= */ .pricing-section { position: relative; padding: 72px 24px 82px; background: radial-gradient(circle at 50% 0%, rgba(53,139,255,.045), transparent 32%), linear-gradient(180deg, #f7f9fc 0%, #fbfcfe 100%); } .pricing-grid { position: relative; z-index: 2; width: min(1040px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; perspective: 1400px; } .pricing-grid::before { content: ""; position: absolute; left: 50%; top: 50%; width: 700px; height: 330px; transform: translate(-50%, -50%); background: radial-gradient( ellipse, rgba(53,139,255,.08), transparent 68% ); filter: blur(35px); pointer-events: none; } .pricing-card { --mx: 50%; --my: 50%; --accent: #2f91ff; position: relative; isolation: isolate; min-height: 430px; padding: 28px 29px 27px; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,250,254,.97)) padding-box, linear-gradient(135deg, rgba(255,255,255,.98), rgba(117,146,184,.32), rgba(255,255,255,.92)) border-box; box-shadow: 0 15px 40px rgba(21,43,75,.075), 0 2px 0 rgba(255,255,255,.98) inset; overflow: hidden; transform-style: preserve-3d; will-change: transform; transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; } .pricing-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient( 280px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 12%, transparent), transparent 67% ); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .pricing-card::after { content: ""; position: absolute; inset: -1px; z-index: -2; padding: 1px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, color-mix(in srgb, var(--accent) 75%, transparent) 90deg, rgba(255,255,255,.95) 125deg, transparent 175deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; animation: borderSpin 4.8s linear infinite; pointer-events: none; } .pricing-card:hover::before, .pricing-card:hover::after { opacity: 1; } @keyframes borderSpin { to { transform: rotate(360deg); } } .basic-card { --accent: #12bcd1; border-color: rgba(18,188,209,.72); } .standard-card { --accent: #f59a19; border-color: rgba(235,160,18,.78); transform: translateY(-9px); } .premium-card { --accent: #a64ff0; border-color: rgba(221,63,145,.72); } .pricing-card > * { position: relative; z-index: 3; transform: translateZ(22px); } .pricing-card:hover { transform: translateY(-13px); box-shadow: 0 30px 65px rgba(25,47,80,.14), 0 0 42px color-mix(in srgb, var(--accent) 11%, transparent), 0 2px 0 rgba(255,255,255,.98) inset; } .standard-card:hover { transform: translateY(-20px); } .plan-icon { width: 48px; height: 48px; margin-bottom: 21px; display: grid; place-items: center; border: 1px solid rgba(18,188,209,.20); border-radius: 14px; color: #079bb3; background: linear-gradient(145deg, rgba(18,188,209,.12), rgba(18,188,209,.035)); font-size: 24px; font-weight: 800; box-shadow: 0 9px 22px rgba(18,188,209,.08), 0 1px 0 rgba(255,255,255,.9) inset; animation: iconFloat 4s ease-in-out infinite; transition: transform .4s cubic-bezier(.16,1,.3,1); } .standard-card .plan-icon { color: #e18c00; border-color: rgba(245,154,25,.22); background: linear-gradient(145deg, rgba(245,154,25,.13), rgba(245,154,25,.035)); } .premium-card .plan-icon { color: #9943e5; border-color: rgba(166,79,240,.22); background: linear-gradient(145deg, rgba(166,79,240,.13), rgba(166,79,240,.035)); } @keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .pricing-card:hover .plan-icon { transform: translateZ(35px) scale(1.08) rotate(-4deg); } .pricing-card h2 { margin: 0; color: #202c3e; font-size: 23px; line-height: 1.2; letter-spacing: -.6px; font-weight: 800; } .plan-description { min-height: 25px; margin: 7px 0 17px; color: #708097; font-size: 12px; line-height: 1.5; } .price { display: flex; align-items: baseline; padding-bottom: 18px; border-bottom: 1px dashed #e0e6ee; color: #202b3c; } .price .currency { margin-right: 2px; font-size: 17px; font-weight: 800; } .price strong { font-size: 48px; line-height: 1; letter-spacing: -2.7px; font-weight: 800; transition: transform .4s ease, text-shadow .4s ease; } .price .period { margin-left: 5px; color: #8995a6; font-size: 11px; } .pricing-card:hover .price strong { transform: scale(1.035); text-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 20%, transparent); } .plan-features { list-style: none; margin: 20px 0 23px; padding: 0; } .plan-features li { position: relative; padding-left: 24px; margin-bottom: 11px; color: #68778e; font-size: 11px; line-height: 1.45; transition: transform .3s ease, color .3s ease; } .plan-features li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #b9eedb; border-radius: 50%; background: #effbf6; color: #14b978; font-size: 9px; font-weight: 900; } .pricing-card:hover .plan-features li { transform: translateX(3px); } .plan-button { position: relative; min-height: 45px; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 800; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.08); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease; } .plan-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 25%, rgba(255,255,255,.28) 48%, transparent 68% ); transform: translateX(-120%); transition: transform .65s ease; } .plan-button:hover::before { transform: translateX(120%); } .plan-button::after { content: "→"; position: absolute; right: 15px; opacity: 0; transform: translateX(-7px); transition: .25s ease; } .plan-button:hover::after { opacity: 1; transform: translateX(0); } .pricing-card:hover .plan-button { transform: translateZ(30px) translateY(-2px); } .basic-button { background: linear-gradient(100deg, #16b987, #10b5cf); } .standard-button { background: linear-gradient(100deg, #ff9e12, #ff681d); } .premium-button { background: linear-gradient(100deg, #a74dec, #e83b93); } .basic-card:hover .plan-button { box-shadow: 0 13px 28px rgba(16,181,207,.22); } .standard-card:hover .plan-button { box-shadow: 0 13px 28px rgba(255,118,30,.24); } .premium-card:hover .plan-button { box-shadow: 0 13px 28px rgba(196,61,220,.24); } .popular-badge { position: absolute; top: 18px; right: 18px; z-index: 5; padding: 7px 11px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #ff9b18, #ff741e); font-size: 9px; line-height: 1; font-weight: 800; box-shadow: 0 7px 17px rgba(255,122,25,.22); overflow: hidden; } .popular-badge::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 72% ); transform: translateX(-130%); animation: badgeShine 3.2s ease-in-out infinite; } @keyframes badgeShine { 0%,55%,100% { transform: translateX(-130%); } 75% { transform: translateX(130%); } } /* ========================================================= COMPARISON ========================================================= */ .comparison-section { position: relative; padding: 38px 24px 90px; background: radial-gradient(circle at 50% 0%, rgba(47,128,255,.055), transparent 35%), #f8fafc; } .comparison-heading { max-width: 800px; margin: 0 auto 31px; text-align: center; } .comparison-heading h2 { margin: 0; color: #202c40; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -1.2px; font-weight: 800; } .comparison-heading p { margin: 9px 0 0; color: #78879d; font-size: 13px; } .comparison-heading::after { content: ""; display: block; width: 52px; height: 3px; margin: 15px auto 0; border-radius: 99px; background: linear-gradient(90deg, #2f80ff, #62c7ff); box-shadow: 0 0 15px rgba(47,128,255,.3); } .comparison-wrapper { width: min(1120px, 100%); margin: 0 auto; overflow-x: auto; border: 1px solid #dfe6ef; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(23,44,75,.08), 0 1px 0 #fff inset; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .comparison-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; } .comparison-table th { height: 67px; padding: 13px 15px; color: #273246; background: linear-gradient(180deg, #ffffff, #f8fafc); border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 800; } .comparison-table th:first-child { width: 53%; padding-left: 20px; text-align: left; } .comparison-table th:not(:first-child) { width: 11.75%; text-align: center; } .comparison-table td { padding: 19px 15px; vertical-align: middle; border-bottom: 1px solid #e5eaf0; background: #fff; } .comparison-table tbody tr:last-child td { border-bottom: 0; } .comparison-table td:not(:first-child) { text-align: center; } .comparison-table tbody tr { transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } .comparison-table tbody tr:hover td { background: #fafdff; } .comparison-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #3c8dff; } .module-name { display: flex; align-items: flex-start; gap: 12px; } .module-number { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid #d7e7ff; border-radius: 9px; background: linear-gradient(145deg, #f4f8ff, #eaf3ff); color: #3985f4; font-size: 9px; font-weight: 800; box-shadow: 0 5px 13px rgba(47,128,255,.06); } .module-name strong { display: block; margin-top: 1px; color: #273246; font-size: 14px; line-height: 1.3; font-weight: 800; } .module-name p { max-width: 585px; margin: 6px 0 0; color: #718099; font-size: 11px; line-height: 1.6; } .access { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 900; transition: transform .25s ease, box-shadow .25s ease; } .access.yes { color: #13b979; border: 1px solid #bcefdc; background: linear-gradient(145deg, #f1fcf7, #e6faf1); } .access.no, .access.free-access { color: #9aa5b5; background: #f7f8fa; } .comparison-table tbody tr:hover .access.yes { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(19,185,121,.07); } .table-popular { display: block; width: max-content; margin: 6px auto 0; padding: 4px 8px; border-radius: 999px; color: #fff; background: #ff8a19; font-size: 7px; line-height: 1; font-weight: 800; } .comparison-legend { width: min(1120px, 100%); margin: 15px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #8995a6; font-size: 10px; } .comparison-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #e4e9f0; border-radius: 999px; background: rgba(255,255,255,.75); } .legend-check, .legend-dash { font-style: normal; font-weight: 900; } .legend-check { color: #15b97c; } .legend-dash { color: #9aa5b5; } /* ========================================================= REVEAL ANIMATION ========================================================= */ .premium-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); } .premium-reveal.is-visible { opacity: 1; transform: translateY(0); } .pricing-card.premium-reveal { animation: none; } .pricing-card.premium-reveal.is-visible { animation: cardEntrance .75s cubic-bezier(.2,.8,.2,1) both; } .pricing-card:nth-child(1).is-visible { animation-delay: .03s; } .pricing-card:nth-child(2).is-visible { animation-delay: .12s; } .pricing-card:nth-child(3).is-visible { animation-delay: .21s; } @keyframes cardEntrance { from { opacity: 0; transform: translateY(45px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .pricing-grid { width: min(900px, 100%); gap: 18px; } .pricing-card { padding: 24px; } .comparison-wrapper { width: min(960px, 100%); } } @media (max-width: 767px) { .plans-hero { min-height: 300px; padding: 100px 20px 55px; } .plans-eyebrow { font-size: 9px; letter-spacing: 2.5px; } .plans-hero h1 { font-size: clamp(38px, 11vw, 52px); letter-spacing: -2px; } .plans-hero p { font-size: 13px; } .pricing-section { padding: 42px 16px 55px; } .pricing-grid { width: min(430px, 100%); grid-template-columns: 1fr; gap: 18px; } .pricing-card, .standard-card { min-height: 0; padding: 26px 24px; border-radius: 19px; transform: none; } .pricing-card:hover, .standard-card:hover { transform: translateY(-6px); } .pricing-card h2 { font-size: 22px; } .price strong { font-size: 45px; } .plan-features li { font-size: 11px; } .plan-button { min-height: 46px; } .comparison-section { padding: 35px 12px 65px; } .comparison-heading h2 { font-size: 28px; } .comparison-heading p { font-size: 12px; } .comparison-wrapper { border-radius: 14px; } .comparison-table { min-width: 940px; } } @media (prefers-reduced-motion: reduce) { .plans-hero::before, .plans-hero::after, .plans-hero-content, .plan-icon, .popular-badge::before, .pricing-card::after { animation: none !important; } .premium-reveal, .pricing-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Projects page css */ .ebp,.ebp *{box-sizing:border-box}.ebp{--b:#286df2;--n:#132e58;--ink:#182438;--m:#64758f;overflow:hidden;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff}.ebp-hero{min-height:325px;display:grid;place-items:center;text-align:center;padding:95px 20px 65px;position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 120%,#3588ff38,transparent 39%),linear-gradient(135deg,#122d55,#193764 52%,#203f76)}.ebp-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:54px 54px;animation:grid 22s linear infinite}@keyframes grid{to{background-position:54px 54px}}.ebp-hero-in{position:relative;z-index:1;animation:up .8s both}.ebp-kicker{color:#3e91ff;font-size:12px;font-weight:800;letter-spacing:1.5px}.ebp-hero h1{margin:12px 0 0;font-size:clamp(46px,6vw,72px);line-height:1;letter-spacing:-3.5px}.ebp-hero p{margin:17px auto 0;max-width:760px;color:#edf4ffb8;font-size:17px}.ebp-work{padding:52px 24px 120px;background:radial-gradient(circle at 15% 30%,#327ef80a,transparent 24%),#fff}.ebp-switch{width:max-content;margin:0 auto 72px;padding:2px;display:flex;border:1px solid var(--b);border-radius:999px;box-shadow:0 9px 25px #205bb514}.ebp-tab{min-width:120px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--b);font:800 12px inherit;cursor:pointer}.ebp-tab.active{color:#fff;background:linear-gradient(135deg,#347bf6,#2862e5);box-shadow:0 5px 12px #2867eb2e}.ebp-list{max-width:1170px;margin:auto}.ebp-panel{display:none}.ebp-panel.active{display:block;animation:fade .5s both}.ebp-row{min-height:540px;display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center;padding:42px 0 80px;position:relative}.ebp-row:after{content:"";position:absolute;bottom:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#e1e8f1,transparent)}.ebp-row.rev .ebp-media{order:2}.ebp-row.rev .ebp-content{order:1}.ebp-media{min-height:430px;display:grid;place-items:center;position:relative;perspective:1100px}.ebp-glow{position:absolute;width:380px;height:260px;border-radius:50%;background:radial-gradient(ellipse,#2b70f429,transparent 68%);filter:blur(18px);animation:glow 5s ease-in-out infinite}@keyframes glow{50%{transform:scale(1.08);opacity:.8}}.ebp-content{max-width:530px;opacity:0;transform:translateY(25px);transition:.7s}.ebp-row.visible .ebp-content{opacity:1;transform:none}.ebp-row.visible .ebp-media{animation:media .75s both}@keyframes media{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}.ebp-tag{display:inline-flex;padding:7px 13px;margin-bottom:18px;border-radius:999px;color:#2167e9;background:#edf4ff;font-size:10px;font-weight:850;letter-spacing:.8px}.ebp-content h2{margin:0 0 15px;font-size:clamp(29px,3vw,39px);line-height:1.1;letter-spacing:-1.5px}.ebp-content>p{margin:0 0 23px;color:var(--m);font-size:14px;line-height:1.7}.ebp-label{margin-bottom:12px;color:#9aabc2;font-size:10px;font-weight:850;letter-spacing:1.7px}.ebp-features{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:26px}.ebp-feature{display:flex;align-items:center;gap:10px;color:#46566e;font-size:12px;font-weight:700}.ebp-feature i{width:17px;height:17px;display:grid;place-items:center;border:1px solid #2c78f3;border-radius:50%;color:#2875ef;font-style:normal;font-size:9px;transition:.25s}.ebp-feature:hover i{color:#fff;background:#2875ef;transform:scale(1.2)}.ebp-impact{display:flex;gap:14px;padding-top:21px;border-top:1px solid #e6ebf2}.ebp-impact-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid #ffe0c7;border-radius:12px;color:#f06e29;background:#fff8f1}.ebp-impact strong{display:block;color:#e76b27;font-size:9px;letter-spacing:1.5px}.ebp-impact p{margin:5px 0 0;color:#40516a;font-size:12px;line-height:1.55;font-weight:650} /* phones */.phones{position:relative;width:440px;height:420px}.phone{position:absolute;width:170px;height:345px;padding:7px;border:5px solid #111822;border-radius:29px;overflow:hidden;background:#dfe9f3;box-shadow:0 28px 45px #1120372e,0 7px 12px #00000026;transition:.7s cubic-bezier(.2,.8,.2,1)}.phone:before,.mini:before{content:"";position:absolute;z-index:2;top:0;left:50%;width:78px;height:19px;transform:translateX(-50%);border-radius:0 0 14px 14px;background:#10151d}.screen{height:100%;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#edf4fa,#b9e9f1)}.ui{text-align:center;padding:48px 12px;font-size:7px}.logo{width:45px;height:45px;margin:auto auto 12px;display:grid;place-items:center;border:3px solid #6088e8;border-radius:50%;background:#1f2941;font-size:20px}.uit{font-size:11px;font-weight:800}.inp{height:25px;margin:7px 0;border:1px solid #b8c7d5;border-radius:5px;background:#ffffffb8}.btn{height:24px;margin-top:12px;border-radius:999px;background:#3f9fbe}.left{left:28px;top:42px;transform:rotate(-11deg) translateZ(-60px)}.front{left:135px;top:30px;z-index:3}.right{right:22px;top:56px;transform:rotate(11deg) translateZ(-60px)}.phones:hover .left{transform:rotate(-16deg) translate(-18px,-8px)}.phones:hover .front{transform:translateY(-12px) scale(1.02)}.phones:hover .right{transform:rotate(16deg) translate(18px,-8px)} /* mobile project card */.mcard{width:100%;max-width:440px;min-height:500px;padding:28px 20px;position:relative;border:1px solid #dce6f2;border-radius:28px;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:0 20px 55px #1d447719;overflow:hidden}.mini{position:relative;width:180px;height:300px;margin:5px auto 24px;border:6px solid #111722;border-radius:29px;background:linear-gradient(160deg,#eef5fa,#a9e2ef);box-shadow:0 24px 35px #172e4e2e;transition:.6s}.mcard:hover .mini{transform:translateY(-12px) rotate(-2deg)}.mfeatures{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mf{padding:10px;border:1px solid #e3ebf5;border-radius:11px;color:#4b5c74;background:#ffffffa6;font-size:10px;font-weight:700}.mf:before{content:"✓";color:#2875ef;margin-right:5px}.mcard .ui{padding-top:48px} /* laptop */.laptop{width:520px;max-width:100%;filter:drop-shadow(0 28px 30px #18305026);transition:.65s}.laptop:hover{transform:translateY(-12px) rotateX(2deg)}.lscreen{height:320px;padding:11px;border:7px solid #171b22;border-bottom-width:11px;border-radius:19px 19px 7px 7px;background:#e8edf3}.browser{height:100%;overflow:hidden;border-radius:7px;background:#fff}.bar{height:27px;display:flex;gap:5px;align-items:center;padding:0 10px;border-bottom:1px solid #e2e7ed}.dot{width:5px;height:5px;border-radius:50%;background:#b8c1ce}.bcontent{padding:17px 18px}.bnav{display:flex;justify-content:space-between;margin-bottom:18px;font-size:8px;font-weight:800;color:#2165e7}.btitle{text-align:center;font-size:20px;font-weight:850;margin-bottom:18px}.btitle span{color:#2770ee}.logos{display:flex;justify-content:space-around;padding:9px;border-bottom:1px dotted #ccd5e1;color:#55708f;font-size:12px;font-weight:800}.bcards{display:flex;gap:9px;margin-top:18px}.bcard{flex:1;height:88px;border:1px solid #e1e8f1;border-radius:7px;background:linear-gradient(145deg,#f7fbff,#edf4fd)}.base{width:108%;height:18px;margin-left:-4%;border-radius:0 0 22px 22px;background:linear-gradient(#8e9baa,#59687b)}.dots{display:flex;justify-content:center;gap:7px;margin-top:42px}.dotbtn{width:7px;height:7px;border:0;border-radius:50%;background:#c9d5e4;cursor:pointer;transition:.3s}.dotbtn.active{width:29px;border-radius:999px;background:#2d70f3} @keyframes up{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@media(max-width:950px){.ebp-row{grid-template-columns:1fr;gap:35px;min-height:auto}.ebp-row.rev .ebp-media,.ebp-row.rev .ebp-content{order:initial}.ebp-content{max-width:680px;margin:auto}.ebp-media{min-height:410px}}@media(max-width:650px){.ebp-hero{min-height:300px;padding:85px 18px 60px}.ebp-hero h1{font-size:44px;letter-spacing:-2.5px}.ebp-hero p{font-size:13px}.ebp-work{padding:38px 16px 80px}.ebp-switch{margin-bottom:45px}.ebp-tab{min-width:108px;font-size:11px}.ebp-row{display:block;padding-bottom:55px}.ebp-media{min-height:360px}.phones{transform:scale(.82)}.laptop{width:100%}.lscreen{height:230px}.btitle{font-size:14px}.ebp-features{grid-template-columns:1fr}.ebp-content h2{font-size:29px}.ebp-row{margin-bottom:15px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ebp-hero:before,.ebp-glow,.ebp-row.visible .ebp-media{animation:none}.ebp-content,.phone,.mini,.laptop{transition:none!important}} /* ===== PREMIUM MOBILE STACK / DESKTOP IMAGE CAROUSEL ===== */ .ebp-mobile-stack{position:relative;width:470px;height:430px;display:flex;align-items:center;justify-content:center} .ebp-mobile-stack .mcard{position:absolute;width:330px;min-height:390px;margin:0;padding:20px;border-radius:30px;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;cursor:pointer} .ebp-mobile-stack .mcard:nth-child(1){transform:translateY(-32px) scale(.94);z-index:1;opacity:.72} .ebp-mobile-stack .mcard:nth-child(2){transform:translateY(0) scale(.98);z-index:2;opacity:.9} .ebp-mobile-stack .mcard:nth-child(3){transform:translateY(32px) scale(1);z-index:3} .ebp-mobile-stack .mcard:nth-child(4){transform:translateY(62px) scale(.96);z-index:2;opacity:.7} .ebp-mobile-stack .mcard:nth-child(5){transform:translateY(88px) scale(.92);z-index:1;opacity:.48} .ebp-mobile-stack:hover .mcard:nth-child(1){transform:translateY(-115px) scale(.96);opacity:1;z-index:5} .ebp-mobile-stack:hover .mcard:nth-child(2){transform:translateY(-45px) scale(1);opacity:1;z-index:6} .ebp-mobile-stack:hover .mcard:nth-child(3){transform:translateY(25px) scale(1.03);z-index:7} .ebp-mobile-stack:hover .mcard:nth-child(4){transform:translateY(95px) scale(1);opacity:1;z-index:6} .ebp-mobile-stack:hover .mcard:nth-child(5){transform:translateY(165px) scale(.97);opacity:1;z-index:5} .ebp-mobile-stack .mini{width:145px;height:245px;margin:0 auto 12px} .ebp-mobile-stack .mfeatures{gap:7px} .ebp-mobile-stack .mf{padding:8px;font-size:9px} .ebp-mobile-stack .mobile-number{position:absolute;top:16px;right:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#286df2;font-size:11px;font-weight:900;box-shadow:0 8px 18px #286df238} .ebp-mobile-stack .stack-caption{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#8b9bb0;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase} .ebp-laptop-carousel{position:relative;width:100%;height:100%;overflow:hidden} .ebp-carousel-slide{position:absolute;inset:0;opacity:0;transform:translateX(28px) scale(.98);transition:opacity .55s ease,transform .55s ease} .ebp-carousel-slide.active{opacity:1;transform:none} .ebp-carousel-slide .mock-site{height:100%;padding:15px;background:linear-gradient(145deg,#f9fbff,#edf4fd);color:#23334c} .mock-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #dfe7f1;font-size:7px;font-weight:900;color:#2469e9} .mock-hero{height:75px;margin-top:14px;border-radius:9px;background:linear-gradient(135deg,#dbeaff,#a9cbff);display:grid;place-items:center;text-align:center;font-weight:900;font-size:17px;color:#173764} .mock-hero span{display:block;font-size:8px;color:#53708f;margin-top:4px} .mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.mock-box{height:75px;border:1px solid #dce5f0;border-radius:8px;background:#fff;box-shadow:0 5px 14px #31547c0b} .mock-chart{height:75px;margin-top:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#eef5ff);border:1px solid #dce5f0;position:relative;overflow:hidden}.mock-chart:after{content:"";position:absolute;left:8%;right:8%;bottom:17px;height:2px;background:linear-gradient(90deg,#3c7ef3 0 22%,transparent 22% 27%,#3c7ef3 27% 48%,transparent 48% 53%,#3c7ef3 53% 73%,transparent 73% 78%,#3c7ef3 78%)} .ebp-carousel-controls{position:absolute;z-index:4;left:16px;right:16px;top:50%;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none} .ebp-carousel-btn{pointer-events:auto;width:30px;height:30px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:#1d5fe7cc;box-shadow:0 8px 18px #163b6c2e;cursor:pointer;transition:.25s}.ebp-carousel-btn:hover{transform:scale(1.1);background:#1856db} .ebp-carousel-index{position:absolute;z-index:4;right:14px;bottom:10px;padding:4px 8px;border-radius:999px;color:#fff;background:#142d52cc;font-size:7px;font-weight:800} .ebp-carousel-mini-dots{display:flex;gap:5px;justify-content:center;margin-top:8px}.ebp-carousel-mini-dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:#c8d4e4}.ebp-carousel-mini-dots button.active{width:18px;border-radius:999px;background:#2c70f3} @media(max-width:650px){.ebp-mobile-stack{width:100%;height:430px;transform:scale(.86)}.ebp-mobile-stack .mcard{width:300px}.ebp-mobile-stack:hover .mcard:nth-child(1){transform:translateY(-92px) scale(.96)}.ebp-mobile-stack:hover .mcard:nth-child(2){transform:translateY(-38px) scale(1)}.ebp-mobile-stack:hover .mcard:nth-child(3){transform:translateY(18px) scale(1.02)}.ebp-mobile-stack:hover .mcard:nth-child(4){transform:translateY(74px) scale(1)}.ebp-mobile-stack:hover .mcard:nth-child(5){transform:translateY(130px) scale(.96)}.ebp-laptop-carousel{min-height:100%}.ebp-carousel-controls{left:8px;right:8px}.ebp-carousel-btn{width:26px;height:26px}} /* ===== MOBILE PROJECTS — PREMIUM 3-PHONE ZIG-ZAG ===== */ .mobile-project-list{max-width:1180px;margin:0 auto} .mobile-project-row{min-height:610px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:65px 0 90px;position:relative} .mobile-project-row:after{content:"";position:absolute;left:9%;right:9%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#dce5f0,transparent)} .mobile-project-row:last-child:after{display:none} .mobile-project-row.rev .mobile-project-media{order:2}.mobile-project-row.rev .ebp-content{order:1} .mobile-project-media{height:500px;position:relative;display:flex;align-items:center;justify-content:center;perspective:1200px} .mobile-project-glow{position:absolute;width:470px;height:330px;border-radius:50%;background:radial-gradient(ellipse,#2875f52b 0%,#4bb7ff12 35%,transparent 70%);filter:blur(18px);animation:mobileGlow 5s ease-in-out infinite} @keyframes mobileGlow{50%{transform:scale(1.08);opacity:.72}} .phone-cluster{position:relative;width:500px;height:470px;transition:transform .7s cubic-bezier(.2,.8,.2,1)} .project-phone{position:absolute;width:190px;height:390px;padding:7px;border:6px solid #0c1119;border-radius:34px;overflow:hidden;background:#e5edf5;box-shadow:0 34px 55px #15284430,0 10px 18px #0002;transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s,box-shadow .5s} .phone-front{left:155px;top:36px;z-index:5}.phone-back-left{left:45px;top:75px;z-index:3;transform:rotate(-12deg) scale(.96)}.phone-back-right{right:42px;top:85px;z-index:2;transform:rotate(12deg) scale(.94)} .phone-cluster:hover .phone-front{transform:translateY(-22px) scale(1.025);box-shadow:0 46px 70px #102c4a3d,0 12px 24px #0003} .phone-cluster:hover .phone-back-left{transform:rotate(-18deg) translate(-28px,-16px) scale(.97)} .phone-cluster:hover .phone-back-right{transform:rotate(18deg) translate(28px,-16px) scale(.97)} .project-screen{height:100%;border-radius:24px;overflow:hidden;position:relative;background:linear-gradient(160deg,#eef5fb,#bce7f1)} .project-screen.weather{background:linear-gradient(160deg,#f0f8fc 5%,#c7eaf2 60%,#62b9ca)}.project-screen.green{background:linear-gradient(160deg,#f1f8ef,#d7efb8 50%,#70bd24)}.project-screen.farm{background:linear-gradient(160deg,#f7fbef,#e3f4c3 55%,#8fce3c)}.project-screen.purple{background:linear-gradient(160deg,#f7f2ff,#e7d8ff 52%,#ad73f2)}.project-screen.blue{background:linear-gradient(160deg,#eef5ff,#d4e4ff 52%,#5590f4)} .project-ui{padding:55px 14px 20px;text-align:center;color:#182438;font-size:9px}.project-ui b{display:block;font-size:13px;line-height:1.25;margin-bottom:6px}.project-ui small{display:block;color:#66768d;font-size:7px;line-height:1.5}.project-logo{width:52px;height:52px;margin:0 auto 13px;display:grid;place-items:center;border:3px solid #6b91e8;border-radius:50%;background:#26324a;color:#fff;font-size:22px;box-shadow:0 7px 16px #193b6530}.project-input{height:27px;margin:8px 0;border:1px solid #b9c8d7;border-radius:6px;background:#ffffffc9}.project-button{height:26px;margin-top:14px;border-radius:999px;background:linear-gradient(90deg,#3d91c1,#46abc3);box-shadow:0 6px 12px #23698724}.project-link{display:block;margin-top:8px;font-size:6px;color:#60718a}.weather-chart{height:75px;margin:17px 3px 8px;border-radius:9px;background:linear-gradient(180deg,#ffffffa8,#ffffff35);position:relative;overflow:hidden}.weather-chart:after{content:"";position:absolute;left:-5%;right:-5%;bottom:20px;height:40px;border-top:3px solid #2789b5;border-radius:50% 50% 0 0;transform:rotate(-4deg)}.weather-cards{display:flex;gap:5px}.weather-cards i{height:34px;flex:1;border-radius:6px;background:#ffffff8c}.map-box{height:88px;margin:14px 0;border-radius:8px;background:repeating-linear-gradient(45deg,#ffffff80 0 8px,#cfe6c650 8px 16px);position:relative}.map-box span{position:absolute;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#3b8fdb}.map-box span:nth-child(1){left:25%;top:35%}.map-box span:nth-child(2){left:60%;top:55%}.map-box span:nth-child(3){left:45%;top:20%}.farm-chart{height:75px;margin:15px 5px 10px;display:flex;align-items:flex-end;gap:7px}.farm-chart span{flex:1;border-radius:5px 5px 2px 2px;background:#4b9f32}.farm-chart span:nth-child(1){height:38%}.farm-chart span:nth-child(2){height:58%}.farm-chart span:nth-child(3){height:76%}.farm-chart span:nth-child(4){height:92%}.status-box{display:flex;gap:8px;margin:18px 0}.status-box i{height:34px;flex:1;border-radius:8px;background:#ffffffa5;border:1px solid #d9c7f5}.status-box i:before{content:"✓";display:grid;place-items:center;height:100%;color:#7e4fd5;font-size:13px}.task-list{display:grid;gap:7px;text-align:left;margin:17px 3px}.task-list i{padding:8px;border-radius:6px;background:#ffffffa5;font-style:normal;font-size:7px}.project-index{position:absolute;right:4%;bottom:62px;font-size:11px;font-weight:900;letter-spacing:2px;color:#aab8ca}.mobile-project-row.rev .project-index{left:4%;right:auto} .mobile-project-row .ebp-content{max-width:540px;opacity:0;transform:translateY(30px);transition:opacity .75s,transform .75s}.mobile-project-row.visible .ebp-content{opacity:1;transform:none}.mobile-project-row .mobile-project-media{opacity:0;transform:translateY(35px) scale(.97);transition:opacity .8s,transform .8s}.mobile-project-row.visible .mobile-project-media{opacity:1;transform:none} @media(max-width:950px){.mobile-project-row{grid-template-columns:1fr;gap:20px;min-height:auto;padding:65px 0 80px}.mobile-project-row.rev .mobile-project-media,.mobile-project-row.rev .ebp-content{order:initial}.mobile-project-media{height:500px}.mobile-project-row .ebp-content{max-width:680px;margin:auto}.project-index{bottom:25px;right:8%}.mobile-project-row.rev .project-index{left:auto;right:8%}} @media(max-width:650px){.mobile-project-row{padding:45px 0 65px}.mobile-project-media{height:390px;overflow:visible}.phone-cluster{transform:scale(.72);transform-origin:center center}.mobile-project-media:hover .phone-cluster{transform:scale(.76)}.mobile-project-glow{width:360px;height:250px}.project-index{bottom:0;right:5%;font-size:10px}.mobile-project-row .ebp-content{padding:0 6px}.mobile-project-row .ebp-content h2{font-size:29px}.mobile-project-row .ebp-content>p{font-size:13px}.mobile-project-row .ebp-features{grid-template-columns:1fr 1fr;gap:10px}.mobile-project-row .ebp-feature{font-size:11px}.mobile-project-row .ebp-impact{margin-top:8px}} @media(prefers-reduced-motion:reduce){.mobile-project-glow{animation:none}.phone-cluster,.project-phone,.mobile-project-row .ebp-content,.mobile-project-row .mobile-project-media{transition:none!important}} /* ========================================================= NEXT-LEVEL PREMIUM MOTION LAYER ========================================================= */ .ebp-work{position:relative;isolation:isolate} .ebp-work:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background: radial-gradient(circle at 12% 18%,rgba(40,109,242,.075),transparent 24%), radial-gradient(circle at 88% 46%,rgba(70,175,255,.055),transparent 25%), radial-gradient(circle at 50% 90%,rgba(40,109,242,.045),transparent 22%)} .mobile-project-row{transition:padding .5s ease} .mobile-project-row:before{content:"";position:absolute;inset:20px 4% 25px;border-radius:38px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(244,249,255,.58));border:1px solid rgba(215,226,241,.55);box-shadow:0 30px 90px rgba(25,62,105,.045);z-index:-1;opacity:0;transform:scale(.985);transition:opacity .7s,transform .8s} .mobile-project-row.visible:before{opacity:1;transform:none} .mobile-project-media{transform-style:preserve-3d} .mobile-project-media:after{content:"";position:absolute;bottom:36px;width:310px;height:45px;border-radius:50%;background:rgba(20,48,82,.13);filter:blur(24px);transform:scaleX(.8);transition:.7s ease;z-index:-1} .mobile-project-row:hover .mobile-project-media:after{transform:scaleX(1.05);opacity:.75} .mobile-project-glow{mix-blend-mode:multiply} .phone-cluster{--mx:0px;--my:0px;--rx:0deg;--ry:0deg;transform:translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform} .phone-cluster:before{content:"";position:absolute;inset:40px 55px 25px;border-radius:50%;background:radial-gradient(circle,rgba(48,127,255,.2),transparent 68%);filter:blur(28px);animation:clusterPulse 4s ease-in-out infinite;z-index:-2} @keyframes clusterPulse{50%{transform:scale(1.16);opacity:.55}} .project-phone{will-change:transform;backface-visibility:hidden} .project-phone:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:27px;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.34) 46%,transparent 62%);transform:translateX(-140%);transition:transform .8s ease} .phone-cluster:hover .project-phone:after{transform:translateX(140%)} .phone-front{transform:translateZ(35px)} .phone-back-left{transform:rotate(-12deg) scale(.96) translateZ(-15px)} .phone-back-right{transform:rotate(12deg) scale(.94) translateZ(-25px)} .phone-cluster:hover .phone-front{transform:translate3d(0,-30px,45px) scale(1.035) rotateX(1deg)} .phone-cluster:hover .phone-back-left{transform:rotate(-18deg) translate3d(-36px,-21px,-5px) scale(.98)} .phone-cluster:hover .phone-back-right{transform:rotate(18deg) translate3d(36px,-21px,-5px) scale(.98)} .project-screen:after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.45),transparent 25%);pointer-events:none;animation:screenFloat 7s ease-in-out infinite} @keyframes screenFloat{50%{transform:translate(12px,8px) scale(1.05)}} .project-logo{animation:logoFloat 3.5s ease-in-out infinite} @keyframes logoFloat{50%{transform:translateY(-3px);box-shadow:0 11px 23px rgba(25,59,101,.2)}} .mobile-project-row .ebp-tag{position:relative;overflow:hidden;box-shadow:0 7px 22px rgba(39,112,238,.09);transition:.35s} .mobile-project-row .ebp-tag:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.8),transparent);transform:translateX(-120%);animation:tagShine 4.5s ease-in-out infinite} @keyframes tagShine{18%,100%{transform:translateX(120%)}} .mobile-project-row:hover .ebp-tag{transform:translateY(-2px);box-shadow:0 10px 28px rgba(39,112,238,.14)} .mobile-project-row .ebp-content h2{transition:transform .5s ease} .mobile-project-row:hover .ebp-content h2{transform:translateX(5px)} .mobile-project-row .ebp-feature{padding:9px 10px;border:1px solid transparent;border-radius:12px;transition:.35s ease} .mobile-project-row .ebp-feature:hover{background:#fff;border-color:#e2ebf7;box-shadow:0 10px 25px rgba(35,72,117,.08);transform:translateY(-3px)} .mobile-project-row .ebp-impact{transition:.4s ease} .mobile-project-row:hover .ebp-impact{transform:translateY(-2px)} .mobile-project-row .ebp-impact-icon{box-shadow:0 8px 22px rgba(240,110,41,.1);transition:.4s} .mobile-project-row:hover .ebp-impact-icon{transform:rotate(-6deg) scale(1.08)} .project-index{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid #dbe5f1;box-shadow:0 10px 25px rgba(25,59,100,.08);transition:.4s} .mobile-project-row:hover .project-index{color:#286df2;transform:translateY(-4px) scale(1.04)} /* staggered reveal */ .mobile-project-row .mobile-project-media,.mobile-project-row .ebp-content{opacity:0} .mobile-project-row.visible .mobile-project-media{animation:premiumMediaIn .95s cubic-bezier(.16,1,.3,1) forwards} .mobile-project-row.visible .ebp-content{animation:premiumContentIn .8s .16s cubic-bezier(.16,1,.3,1) forwards} @keyframes premiumMediaIn{from{opacity:0;transform:translateY(55px) scale(.91) rotateX(7deg)}to{opacity:1;transform:none}} @keyframes premiumContentIn{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}} /* desktop premium polish */ .ebp-row{transition:transform .55s ease} .ebp-row:hover{transform:translateY(-4px)} .laptop{position:relative;transform-style:preserve-3d} .laptop:after{content:"";position:absolute;left:15%;right:15%;bottom:-25px;height:25px;border-radius:50%;background:rgba(22,53,91,.13);filter:blur(18px);z-index:-1;transition:.5s} .laptop:hover:after{transform:scale(1.08);opacity:.75} .lscreen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 18px 45px rgba(25,55,95,.1)} .ebp-carousel-slide{transform:scale(.985);transition:opacity .55s,transform .7s cubic-bezier(.16,1,.3,1)} .ebp-carousel-slide.active{transform:scale(1)} .ebp-carousel-btn{box-shadow:0 8px 20px rgba(24,62,111,.15);transition:.3s} .ebp-carousel-btn:hover{transform:scale(1.12)} @media(max-width:950px){ .mobile-project-row:before{inset:15px 1% 20px} .phone-cluster{transform:scale(.88) translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry))} .phone-cluster:hover{transform:scale(.92) translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry))} } @media(max-width:650px){ .mobile-project-row:before{inset:8px 0 12px;border-radius:28px} .mobile-project-media{height:430px} .phone-cluster{transform:scale(.72) translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry))} .phone-cluster:hover{transform:scale(.76) translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry))} .phone-cluster:hover .phone-front{transform:translate3d(0,-23px,35px) scale(1.025)} .phone-cluster:hover .phone-back-left{transform:rotate(-17deg) translate3d(-27px,-15px,-5px) scale(.97)} .phone-cluster:hover .phone-back-right{transform:rotate(17deg) translate3d(27px,-15px,-5px) scale(.96)} .mobile-project-row .ebp-content{padding:0 12px} .mobile-project-row .ebp-feature{padding:8px 7px} } @media(prefers-reduced-motion:reduce){ .phone-cluster,.phone-cluster:hover,.project-phone,.mobile-project-row.visible .mobile-project-media,.mobile-project-row.visible .ebp-content{animation:none!important;transform:none!important} .project-phone:after,.mobile-project-row .ebp-tag:after,.project-screen:after{display:none} } /* Services page css */ .offer-page { --offer-blue: #2563eb; --offer-blue-2: #3b82f6; --offer-navy: #172b52; --offer-text: #172033; --offer-muted: #64748b; --offer-border: rgba(30, 64, 175, .12); --offer-bg: #f7f9fc; position: relative; overflow: hidden; background: #fff; color: var(--offer-text); } /* ---------- HERO ---------- */ .offer-hero { position: relative; min-height: 345px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 115%, rgba(59,130,246,.25), transparent 42%), linear-gradient(135deg, #172b52 0%, #1c3968 48%, #244477 100%); } .offer-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to bottom, black, transparent); z-index: -2; } .offer-hero::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; top: -280px; background: rgba(66, 133, 255, .18); filter: blur(10px); animation: offerFloatOrb 8s ease-in-out infinite; z-index: -1; } .offer-hero-inner { width: min(900px, calc(100% - 40px)); padding: 105px 0 72px; position: relative; z-index: 2; } .offer-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: #1680ff; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; animation: offerFadeUp .8s ease both; } .offer-eyebrow::before, .offer-eyebrow::after { content: ""; width: 25px; height: 1px; background: rgba(22,128,255,.65); } .offer-title { margin: 0; color: #fff; font-size: clamp(46px, 6vw, 64px); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; animation: offerFadeUp .85s .08s ease both; } .offer-title span { background: linear-gradient(90deg, #fff 5%, #dbeafe 45%, #72a8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .offer-subtitle { max-width: 760px; margin: 20px auto 0; color: rgba(231,239,255,.78); font-size: 20px; line-height: 1.5; animation: offerFadeUp .9s .16s ease both; } /* ---------- SUPPORT SECTION ---------- */ .offer-support { position: relative; padding: 78px 20px 105px; background: radial-gradient(circle at 10% 10%, rgba(37,99,235,.045), transparent 28%), radial-gradient(circle at 90% 70%, rgba(59,130,246,.055), transparent 30%), linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%); } .offer-support::before { content: ""; position: absolute; width: 1px; height: 100%; left: 50%; top: 0; background: linear-gradient(to bottom, transparent, rgba(37,99,235,.07), transparent); pointer-events: none; } .offer-support-container { width: min(1080px, 100%); margin: 0 auto; display: grid; grid-template-columns: .92fr 1.38fr; gap: 58px; align-items: center; } /* ---------- LEFT CONTENT ---------- */ .offer-copy { position: relative; z-index: 2; } .offer-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; color: #dbeafe; background: linear-gradient(135deg, #27458c, #3456a4); box-shadow: 0 8px 20px rgba(23,43,82,.16); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; } .offer-badge i { color: #a9d0ff; } .offer-heading { margin: 20px 0 20px; max-width: 500px; font-size: clamp(36px, 4vw, 44px); line-height: 1.08; letter-spacing: -.04em; font-weight: 760; color: #172033; } .offer-heading span { display: block; background: linear-gradient(100deg, #234a9b, #2e65d7 55%, #4279e7); -webkit-background-clip: text; background-clip: text; color: transparent; } .offer-description { max-width: 500px; margin: 0; color: #596a82; font-size: 17px; line-height: 1.7; } .offer-description strong { color: #214593; font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .offer-project-btn { position: relative; display: inline-flex; align-items: center; gap: 13px; margin-top: 29px; padding: 15px 24px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(110deg, #172e67, #284da5 65%, #346be0); box-shadow: 0 13px 28px rgba(29,58,126,.22), inset 0 1px 0 rgba(255,255,255,.16); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-decoration: none; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } .offer-project-btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .65s ease; } .offer-project-btn:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 19px 35px rgba(29,58,126,.28), 0 0 0 5px rgba(37,99,235,.07); } .offer-project-btn:hover::before { left: 135%; } .offer-project-btn i { font-size: 18px; transition: transform .35s ease; } .offer-project-btn:hover i { transform: translateX(5px); } /* ---------- RIGHT CARDS ---------- */ .offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; perspective: 1200px; } .offer-card { position: relative; min-height: 142px; padding: 25px 24px 21px; border: 1px solid rgba(30,64,175,.12); border-radius: 17px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 8% 0%, rgba(147,197,253,.28), transparent 45%), linear-gradient(125deg, #eaf5ff 0%, #fffef5 100%); box-shadow: 0 10px 25px rgba(30,41,59,.055), inset 0 1px 0 rgba(255,255,255,.9); transform: translateY(30px) scale(.97); opacity: 0; transition: transform .7s cubic-bezier(.2,.75,.2,1), opacity .7s ease, box-shadow .4s ease, border-color .4s ease; } .offer-card.is-visible { transform: translateY(0) scale(1); opacity: 1; } .offer-card:nth-child(2).is-visible { transition-delay: .10s; } .offer-card:nth-child(3).is-visible { transition-delay: .18s; } .offer-card:nth-child(4).is-visible { transition-delay: .26s; } .offer-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.72) 50%, transparent 80%); transform: translateX(-125%); transition: transform .8s ease; z-index: -1; } .offer-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -35px; bottom: -42px; border-radius: 50%; background: rgba(255,255,255,.4); filter: blur(2px); } .offer-card:hover { transform: translateY(-8px) rotateX(2deg); border-color: rgba(37,99,235,.23); box-shadow: 0 20px 38px rgba(30,64,175,.13), 0 0 0 5px rgba(37,99,235,.035); } .offer-card:hover::before { transform: translateX(125%); } .offer-icon { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 9px; color: #1f56cc; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(37,99,235,.07); font-size: 20px; transition: transform .4s ease, background .4s ease; } .offer-card:hover .offer-icon { transform: translateY(-3px) scale(1.08) rotate(-4deg); background: rgba(255,255,255,.95); } .offer-card h3 { margin: 0; color: #172033; font-size: 28px; line-height: 1; letter-spacing: -.035em; font-weight: 760; } .offer-card p { margin: 8px 0 0; color: #62748d; font-size: 10px; line-height: 1.35; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; } /* ---------- SCROLL REVEALS ---------- */ .offer-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); } .offer-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- DECORATIVE FLOATERS ---------- */ .offer-floating-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #4b8bf5; box-shadow: 0 0 0 7px rgba(75,139,245,.08); animation: offerDotFloat 5s ease-in-out infinite; pointer-events: none; } .offer-floating-dot.one { top: 28%; left: 7%; } .offer-floating-dot.two { right: 9%; bottom: 18%; animation-delay: -2s; transform: scale(.7); } .offer-floating-dot.three { top: 16%; right: 18%; animation-delay: -3.2s; transform: scale(.55); } /* ---------- ANIMATIONS ---------- */ @keyframes offerFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes offerFloatOrb { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-35px,35px) scale(1.08); } } @keyframes offerDotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 991.98px) { .offer-support-container { grid-template-columns: 1fr; gap: 42px; } .offer-copy { text-align: center; } .offer-heading, .offer-description { margin-left: auto; margin-right: auto; } .offer-support::before { display: none; } } @media (max-width: 767.98px) { .offer-hero { min-height: 320px; } .offer-hero-inner { width: min(100% - 30px, 700px); padding: 100px 0 58px; } .offer-title { font-size: clamp(39px, 12vw, 54px); } .offer-subtitle { font-size: 16px; line-height: 1.55; } .offer-support { padding: 58px 15px 78px; } .offer-heading { font-size: 34px; } .offer-description { font-size: 15px; } .offer-grid { grid-template-columns: 1fr; gap: 13px; } .offer-card { min-height: 132px; } .offer-card h3 { font-size: 25px; } } @media (max-width: 430px) { .offer-hero-inner { padding-top: 92px; } .offer-eyebrow { font-size: 11px; } .offer-title { font-size: 38px; } .offer-project-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .offer-page *, .offer-page *::before, .offer-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .offer-card, .offer-reveal { opacity: 1; transform: none; } } /* ========================================================= EBLUESYS — 3D SERVICES SHOWCASE ========================================================= */ .services-page { --sp-blue: #2166f3; --sp-blue-light: #4d8cff; --sp-navy: #172d63; --sp-dark: #101c3b; --sp-text: #172033; --sp-muted: #61718b; width: 100%; overflow: hidden; background: #f7faff; color: var(--sp-text); } /* ========================================================= HERO ========================================================= */ .services-hero { position: relative; min-height: 345px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 50% 120%, rgba(65, 128, 255, .32), transparent 42% ), linear-gradient( 135deg, #162b50 0%, #1b3869 50%, #24477d 100% ); } .services-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.055) 1px, transparent 1px ); background-size: 55px 55px; mask-image: linear-gradient( to bottom, black, transparent ); opacity: .65; } .services-hero-content { position: relative; z-index: 3; width: min(900px, calc(100% - 40px)); padding-top: 75px; animation: servicesHeroIn 1s cubic-bezier(.16,1,.3,1) both; } .services-eyebrow { display: inline-block; margin-bottom: 15px; color: #1680ff; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .services-hero h1 { margin: 0; color: #fff; font-size: clamp(46px, 6vw, 64px); line-height: 1; letter-spacing: -.05em; font-weight: 750; } .services-hero h1 span { background: linear-gradient( 90deg, #ffffff, #78adff ); -webkit-background-clip: text; background-clip: text; color: transparent; } .services-hero p { max-width: 760px; margin: 20px auto 0; color: rgba(234,241,255,.78); font-size: 20px; line-height: 1.55; } /* ========================================================= SHOWCASE ========================================================= */ .services-showcase { position: relative; min-height: 690px; padding: 70px 20px 100px; overflow: hidden; background: radial-gradient( circle at 50% 45%, rgba(68,133,255,.11), transparent 32% ), linear-gradient( 180deg, #fafdff 0%, #f3f7fd 100% ); perspective: 1800px; } /* ========================================================= ORBIT ========================================================= */ .services-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(52,113,240,.16); border-radius: 50%; transform: translate(-50%, -50%) rotateX(67deg); pointer-events: none; } .orbit-one { width: 1100px; height: 410px; animation: orbitRotate 16s linear infinite; } .orbit-two { width: 850px; height: 310px; opacity: .65; animation: orbitRotate 12s linear infinite reverse; } .orbit-three { width: 600px; height: 230px; opacity: .45; } .services-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #3980ff; box-shadow: 0 0 20px rgba(57,128,255,.8); left: 10%; top: 50%; } /* ========================================================= FLOATING DOTS ========================================================= */ .services-floating-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #3980ff; box-shadow: 0 0 0 7px rgba(57,128,255,.07), 0 0 18px rgba(57,128,255,.45); animation: floatingDot 5s ease-in-out infinite; } .dot-one { top: 28%; left: 13%; } .dot-two { top: 23%; right: 14%; animation-delay: -1.7s; } .dot-three { bottom: 24%; left: 27%; animation-delay: -3s; } /* ========================================================= CAROUSEL ========================================================= */ .services-carousel { position: relative; width: min(1320px, 100%); height: 490px; margin: 0 auto; transform-style: preserve-3d; } /* ========================================================= CARD ========================================================= */ .service-card { position: absolute; left: 50%; top: 0; width: 300px; height: 475px; padding: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(32,87,190,.32); background: rgba(255,255,255,.94); box-shadow: 0 30px 60px rgba(24,48,92,.15), 0 8px 20px rgba(24,48,92,.08); transform-style: preserve-3d; transform: translateX(-50%) translateZ(-600px) rotateY(0deg) scale(.72); opacity: 0; pointer-events: none; transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .7s ease, filter .7s ease, box-shadow .7s ease; } /* ========================================================= ACTIVE / POSITIONS ========================================================= */ .service-card.position-left-far { transform: translateX(-50%) translateX(-620px) translateZ(-420px) rotateY(28deg) scale(.72); opacity: .82; filter: brightness(.88) saturate(.88); z-index: 2; pointer-events: auto; } .service-card.position-left { transform: translateX(-50%) translateX(-320px) translateZ(-120px) rotateY(17deg) scale(.88); opacity: .95; z-index: 4; pointer-events: auto; } .service-card.position-center { transform: translateX(-50%) translateX(0) translateZ(80px) rotateY(0deg) scale(1); opacity: 1; z-index: 10; border-color: rgba(32,101,245,.7); box-shadow: 0 35px 80px rgba(24,56,125,.24), 0 0 0 1px rgba(54,125,255,.12), 0 0 45px rgba(54,125,255,.12); pointer-events: auto; } .service-card.position-right { transform: translateX(-50%) translateX(320px) translateZ(-120px) rotateY(-17deg) scale(.88); opacity: .95; z-index: 4; pointer-events: auto; } .service-card.position-right-far { transform: translateX(-50%) translateX(620px) translateZ(-420px) rotateY(-28deg) scale(.72); opacity: .82; filter: brightness(.88) saturate(.88); z-index: 2; pointer-events: auto; } /* hidden back cards */ .service-card.position-hidden { transform: translateX(-50%) translateZ(-700px) scale(.5); opacity: 0; z-index: 0; } /* ========================================================= CARD IMAGE ========================================================= */ .service-image { position: relative; height: 190px; overflow: hidden; background: linear-gradient( 135deg, #dcecff, #edf4ff ); } .service-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 55%, rgba(7,24,58,.22) ); pointer-events: none; } .service-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.16,1,.3,1), filter .8s ease; } .service-card:hover .service-image img { transform: scale(1.07); filter: saturate(1.08) contrast(1.03); } /* ========================================================= CARD CONTENT ========================================================= */ .service-content { position: relative; height: calc(100% - 190px); padding: 22px 25px 25px; } .service-number { position: absolute; right: 20px; top: 18px; color: rgba(37,99,235,.28); font-size: 12px; font-weight: 800; letter-spacing: .1em; } .service-content h2 { margin: 0 0 10px; padding-right: 25px; color: #172c61; font-size: 22px; line-height: 1.15; letter-spacing: -.035em; font-weight: 750; } .service-content p { margin: 0; color: #60708a; font-size: 13px; line-height: 1.6; } .service-content ul { list-style: none; padding: 0; margin: 25px 0 0; } .service-content li { position: relative; padding-left: 15px; margin-bottom: 8px; color: #344a72; font-size: 12px; font-weight: 600; } .service-content li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #2868ed; box-shadow: 0 0 7px rgba(40,104,237,.4); } /* ========================================================= CENTER CARD PREMIUM GLOW ========================================================= */ .position-center::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; background: linear-gradient( 130deg, #2671ff, #55a2ff, #2760db ); opacity: .85; filter: blur(9px); } .position-center::after { content: ""; position: absolute; width: 180px; height: 180px; right: -100px; top: -100px; border-radius: 50%; background: rgba(82,144,255,.18); filter: blur(20px); pointer-events: none; } /* ========================================================= ARROWS ========================================================= */ .services-arrow { position: absolute; top: 44%; z-index: 30; width: 50px; height: 50px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #2166f3; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(28,62,125,.15); cursor: pointer; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s ease; } .services-arrow span { font-size: 32px; line-height: 1; margin-top: -3px; } .services-prev { left: max(25px, calc(50% - 670px)); } .services-next { right: max(25px, calc(50% - 670px)); } .services-arrow:hover { transform: scale(1.1); background: #2166f3; color: #fff; box-shadow: 0 15px 35px rgba(33,102,243,.28); } /* ========================================================= PAGINATION ========================================================= */ .services-pagination { position: relative; z-index: 40; display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; } .services-pagination button { border: 0; background: transparent; color: #8a9ab5; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .35s ease, color .35s ease; } .services-pagination button:hover { color: #2166f3; transform: translateY(-2px); } .services-pagination button.active { width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient( 135deg, #2166f3, #4d8cff ); box-shadow: 0 8px 20px rgba(33,102,243,.3); } /* ========================================================= CTA ========================================================= */ .services-cta { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 16px; width: max-content; margin: 28px auto 0; padding: 17px 42px; color: #fff; text-decoration: none; border-radius: 4px; background: linear-gradient( 110deg, #142b61, #244493, #3068d8 ); box-shadow: 0 14px 30px rgba(23,52,115,.2); font-size: 12px; font-weight: 800; letter-spacing: .22em; overflow: hidden; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; } .services-cta::before { content: ""; position: absolute; left: -100%; top: 0; width: 60%; height: 100%; transform: skewX(-20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent ); transition: left .7s ease; } .services-cta:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 20px 40px rgba(23,52,115,.28); } .services-cta:hover::before { left: 140%; } .services-cta strong { font-size: 21px; transition: transform .35s ease; } .services-cta:hover strong { transform: translateX(5px); } /* ========================================================= SCROLL HINT ========================================================= */ .services-scroll-hint { position: absolute; right: 7%; bottom: 38px; display: flex; flex-direction: column; color: rgba(47,91,165,.7); font-size: 12px; line-height: 1.3; transform: rotate(-4deg); } .services-scroll-hint small { font-size: 10px; color: rgba(47,91,165,.5); } .services-scroll-hint b { margin-top: 5px; font-size: 21px; animation: scrollArrow 1.5s ease-in-out infinite; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes servicesHeroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes orbitRotate { from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); } } @keyframes floatingDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes scrollArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .service-card.position-left-far, .service-card.position-right-far { opacity: 0; pointer-events: none; } .service-card.position-left { transform: translateX(-50%) translateX(-270px) translateZ(-100px) rotateY(14deg) scale(.84); } .service-card.position-right { transform: translateX(-50%) translateX(270px) translateZ(-100px) rotateY(-14deg) scale(.84); } .services-prev { left: 25px; } .services-next { right: 25px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .services-hero { min-height: 300px; } .services-hero-content { padding-top: 55px; } .services-eyebrow { font-size: 11px; } .services-hero h1 { font-size: 42px; } .services-hero p { font-size: 16px; max-width: 500px; } .services-showcase { min-height: auto; padding: 50px 12px 85px; } .services-carousel { width: 100%; height: 500px; touch-action: pan-y; } .service-card { width: min( 310px, calc(100vw - 42px) ); height: 465px; } /* Mobile focuses only on center card */ .service-card.position-center { transform: translateX(-50%) translateZ(40px) scale(1); opacity: 1; } .service-card.position-left, .service-card.position-right { transform: translateX(-50%) translateZ(-160px) scale(.82); opacity: 0; pointer-events: none; } .service-card.position-left-far, .service-card.position-right-far, .service-card.position-hidden { opacity: 0; pointer-events: none; } .services-arrow { top: 43%; width: 42px; height: 42px; } .services-prev { left: 10px; } .services-next { right: 10px; } .services-pagination { gap: 9px; margin-top: 5px; } .services-pagination button { font-size: 10px; } .services-pagination button.active { width: 31px; height: 31px; } .services-cta { width: calc(100% - 50px); max-width: 330px; padding: 16px 15px; font-size: 10px; letter-spacing: .14em; } .services-scroll-hint { display: none; } .services-orbit { opacity: .5; } .orbit-one { width: 700px; } .orbit-two { width: 520px; } .orbit-three { width: 360px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .services-hero h1 { font-size: 37px; } .services-hero p { font-size: 14px; } .service-content { padding: 20px; } .service-content h2 { font-size: 20px; } .service-content p { font-size: 12px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .services-page *, .services-page *::before, .services-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= EBLUESYS SERVICES — PREMIUM 3D CAROUSEL CSS ONLY FOR THIS SECTION ========================================================= */ .services-showcase { position: relative; width: 100%; min-height: 760px; padding: 70px 0 55px; overflow: hidden; perspective: 1800px; perspective-origin: 50% 45%; isolation: isolate; background: radial-gradient( circle at 50% 45%, rgba(71, 137, 255, .10), transparent 38% ), linear-gradient( 180deg, #f8fbff 0%, #f3f7fd 100% ); } /* ========================================================= BACKGROUND ORBITS / DOTS ========================================================= */ .services-orbit { position: absolute; left: 50%; top: 54%; width: 1100px; height: 210px; border: 1px solid rgba(55, 119, 240, .18); border-radius: 50%; transform: translate(-50%, -50%) rotateX(65deg); pointer-events: none; z-index: 0; } .services-orbit.orbit-one { width: 1100px; height: 210px; } .services-orbit.orbit-two { width: 820px; height: 170px; opacity: .55; } .services-orbit.orbit-three { width: 620px; height: 130px; opacity: .35; } .services-floating-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #377cff; box-shadow: 0 0 0 7px rgba(55,124,255,.08), 0 0 18px rgba(55,124,255,.25); animation: servicesDotFloat 4s ease-in-out infinite; } .services-floating-dot:nth-of-type(1) { left: 13%; top: 30%; } .services-floating-dot:nth-of-type(2) { right: 13%; top: 25%; animation-delay: 1.2s; } .services-floating-dot:nth-of-type(3) { left: 27%; bottom: 20%; animation-delay: 2s; } @keyframes servicesDotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ========================================================= CAROUSEL ========================================================= */ .services-carousel { position: relative; width: min(1320px, 100%); height: 500px; margin: 0 auto; transform-style: preserve-3d; perspective: 1800px; z-index: 5; touch-action: pan-y; } /* ========================================================= SERVICE CARD ========================================================= */ .service-card { position: absolute; left: 50%; top: 0; width: 300px; height: 475px; padding: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(32, 87, 190, .25); background: rgba(255,255,255,.96); box-shadow: 0 30px 60px rgba(24,48,92,.13), 0 8px 20px rgba(24,48,92,.07); transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 0; pointer-events: none; will-change: transform, opacity, filter; --service-tilt-x: 0deg; --service-tilt-y: 0deg; --service-lift: 0px; transition: transform .78s cubic-bezier(.16,1,.3,1), opacity .55s ease, filter .55s ease, box-shadow .45s ease, border-color .45s ease; } /* ========================================================= LEFT FAR ========================================================= */ .service-card.position-left-far { transform: translateX(-50%) translateX(-620px) translateZ(-420px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(calc(28deg + var(--service-tilt-y))) scale(.72); opacity: .72; filter: brightness(.88) saturate(.88); z-index: 2; } /* ========================================================= LEFT ========================================================= */ .service-card.position-left { transform: translateX(-50%) translateX(-320px) translateZ(-120px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(calc(17deg + var(--service-tilt-y))) scale(.88); opacity: .94; filter: brightness(.96) saturate(.94); z-index: 4; pointer-events: auto; } /* ========================================================= CENTER ========================================================= */ .service-card.position-center { transform: translateX(-50%) translateX(0) translateZ(80px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(var(--service-tilt-y)) scale(1); opacity: 1; z-index: 10; border-color: rgba(32,101,245,.70); box-shadow: 0 35px 80px rgba(24,56,125,.24), 0 0 0 1px rgba(54,125,255,.12), 0 0 45px rgba(54,125,255,.12); pointer-events: auto; } /* ========================================================= RIGHT ========================================================= */ .service-card.position-right { transform: translateX(-50%) translateX(320px) translateZ(-120px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(calc(-17deg + var(--service-tilt-y))) scale(.88); opacity: .94; filter: brightness(.96) saturate(.94); z-index: 4; pointer-events: auto; } /* ========================================================= RIGHT FAR ========================================================= */ .service-card.position-right-far { transform: translateX(-50%) translateX(620px) translateZ(-420px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(calc(-28deg + var(--service-tilt-y))) scale(.72); opacity: .72; filter: brightness(.88) saturate(.88); z-index: 2; } /* ========================================================= HIDDEN ========================================================= */ .service-card.position-hidden { transform: translateX(-50%) translateZ(-700px) rotateX(0deg) rotateY(0deg) scale(.5); opacity: 0; z-index: 0; pointer-events: none; } /* ========================================================= IMAGE ========================================================= */ .service-image { position: relative; width: 100%; height: 190px; overflow: hidden; background: linear-gradient( 135deg, #dcecff, #edf4ff ); } .service-image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1) translate3d(0,0,0); transition: transform .75s cubic-bezier(.16,1,.3,1), filter .5s ease; } /* ========================================================= IMAGE OVERLAY ========================================================= */ .service-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(20,52,105,.18) ); pointer-events: none; } /* ========================================================= CARD CONTENT ========================================================= */ .service-content { position: relative; height: calc(100% - 190px); padding: 25px 22px 20px; background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(248,251,255,.98) ); } .service-content h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.18; font-weight: 700; color: #18366f; } .service-content p { margin: 0 0 17px; font-size: 13px; line-height: 1.65; color: #647899; } .service-content ul { margin: 0; padding: 0; list-style: none; } .service-content li { position: relative; padding-left: 17px; margin-bottom: 8px; font-size: 12px; line-height: 1.4; font-weight: 600; color: #52698e; } .service-content li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #377cff; } /* ========================================================= CARD NUMBER ========================================================= */ .service-number { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(55,124,255,.35); } /* ========================================================= HOVER ========================================================= */ .service-card.is-hovered { --service-lift: -9px; border-color: rgba(43,116,255,.78); box-shadow: 0 42px 90px rgba(24,56,125,.28), 0 0 0 1px rgba(54,125,255,.18), 0 0 60px rgba(54,125,255,.17); } .service-card.position-left.is-hovered, .service-card.position-right.is-hovered { --service-lift: -6px; } .service-card.position-left-far.is-hovered, .service-card.position-right-far.is-hovered { --service-lift: -3px; } .service-card.is-hovered .service-image img { transform: scale(1.085) translate3d(0,-2px,0); filter: saturate(1.12) contrast(1.04); } /* ========================================================= SHINE EFFECT ========================================================= */ .service-card::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit; background: linear-gradient( 115deg, transparent 25%, rgba(255,255,255,.28) 48%, transparent 68% ); opacity: 0; transform: translateX(-120%); transition: opacity .2s ease, transform .75s ease; } .service-card.is-hovered::after { opacity: 1; transform: translateX(120%); } /* ========================================================= ARROWS ========================================================= */ .services-arrow { position: absolute; top: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); color: #2e70ee; font-size: 30px; line-height: 1; box-shadow: 0 12px 30px rgba(33,68,125,.13); cursor: pointer; z-index: 30; transform: translateY(-50%); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .services-prev { left: 8%; } .services-next { right: 8%; } .services-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 18px 38px rgba(33,68,125,.20); background: #fff; } /* ========================================================= PAGINATION ========================================================= */ .services-pagination { position: relative; z-index: 40; display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 20px; } .services-pagination button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8a9bb8; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; } .services-pagination button:hover { color: #377cff; transform: translateY(-2px); } .services-pagination button.active { color: #fff; background: linear-gradient( 135deg, #377cff, #2464dc ); box-shadow: 0 8px 20px rgba(55,124,255,.25); transform: scale(1.12); } /* ========================================================= CTA ========================================================= */ .services-cta { position: relative; display: flex; width: fit-content; min-width: 283px; height: 65px; margin: 25px auto 0; align-items: center; justify-content: center; gap: 18px; padding: 0 32px; border-radius: 4px; background: linear-gradient( 135deg, #1e376f, #3771df ); color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 2px; box-shadow: 0 18px 35px rgba(32,67,135,.18); z-index: 40; transition: transform .3s ease, box-shadow .3s ease; } .services-cta:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 24px 45px rgba(32,67,135,.25); } /* ========================================================= SCROLL HINT ========================================================= */ .services-scroll-hint { position: absolute; right: 6%; bottom: 20px; display: flex; flex-direction: column; gap: 5px; color: #7890b5; font-size: 11px; line-height: 1.4; z-index: 20; } .services-scroll-hint span:last-child { color: #377cff; font-size: 18px; animation: scrollHint 1.8s ease-in-out infinite; } @keyframes scrollHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 1100px) { .services-carousel { width: 100%; } .service-card.position-left-far, .service-card.position-right-far { opacity: 0; pointer-events: none; } .services-prev { left: 3%; } .services-next { right: 3%; } } @media (max-width: 767px) { .services-showcase { min-height: 720px; padding-top: 45px; } .services-carousel { height: 475px; } .service-card { width: min(300px, 78vw); height: 465px; } .service-card.position-center { transform: translateX(-50%) translateZ(40px) translateY(var(--service-lift)) rotateX(var(--service-tilt-x)) rotateY(var(--service-tilt-y)) scale(1); } .service-card.position-left, .service-card.position-right { opacity: 0; pointer-events: none; } .services-arrow { width: 42px; height: 42px; font-size: 24px; } .services-prev { left: 2%; } .services-next { right: 2%; } .services-pagination { gap: 8px; } .services-scroll-hint { display: none; } .services-orbit { width: 700px; } } @media (prefers-reduced-motion: reduce) { .service-card, .services-arrow, .services-cta, .services-pagination button { transition-duration: .01ms !important; } .services-floating-dot, .services-scroll-hint span:last-child { animation: none !important; } } /* ========================================================= ACTIVE / CENTER CARD — PREMIUM BLUE STATE Only the active card becomes blue ========================================================= */ .service-card.position-center { /* Blue active background */ background: linear-gradient( 180deg, #315fc7 0%, #376fdc 45%, #4d8df0 100% ); border-color: rgba(65, 133, 255, .95); box-shadow: 0 35px 80px rgba(35, 91, 190, .32), 0 0 0 1px rgba(70, 135, 255, .35), 0 0 55px rgba(55, 124, 255, .28); } /* ========================================================= ACTIVE CARD CONTENT ========================================================= */ .service-card.position-center .service-content { background: linear-gradient( 180deg, #315fc7 0%, #376fdc 45%, #4c8cf0 100% ); color: #ffffff; } /* ========================================================= ACTIVE TITLE ========================================================= */ .service-card.position-center .service-content h3 { color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,.10); } /* ========================================================= ACTIVE DESCRIPTION ========================================================= */ .service-card.position-center .service-content p { color: rgba(255,255,255,.78); } /* ========================================================= ACTIVE LIST ========================================================= */ .service-card.position-center .service-content li { color: rgba(255,255,255,.90); } /* ========================================================= ACTIVE LIST BULLETS ========================================================= */ .service-card.position-center .service-content li::before { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.55); } /* ========================================================= ACTIVE CARD NUMBER ========================================================= */ .service-card.position-center .service-number { color: rgba(255,255,255,.30); } /* ========================================================= ACTIVE IMAGE Keep image normal but give it a premium treatment ========================================================= */ .service-card.position-center .service-image { background: linear-gradient( 135deg, #d9e8ff, #edf4ff ); } /* ========================================================= ACTIVE IMAGE OVERLAY ========================================================= */ .service-card.position-center .service-image::after { background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(26,72,160,.18) ); } /* ========================================================= ACTIVE HOVER — EVEN MORE PREMIUM ========================================================= */ .service-card.position-center.is-hovered { box-shadow: 0 48px 100px rgba(28,78,175,.38), 0 0 0 1px rgba(77,145,255,.55), 0 0 70px rgba(55,124,255,.35); } /* ========================================================= ACTIVE HOVER IMAGE ========================================================= */ .service-card.position-center.is-hovered .service-image img { transform: scale(1.09) translate3d(0,-3px,0); filter: saturate(1.12) contrast(1.04); } /* ========================================================= ACTIVE SHINE ========================================================= */ .service-card.position-center::after { background: linear-gradient( 115deg, transparent 20%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.34) 50%, transparent 65% ); }