/* Bangalore web application development page */ :root{ --navy:#0b1a4a; --indigo:#1e3a88; --purple:#5b4fc7; --magenta:#d41d9a; --blue:#2563eb; --orange:#ff7417; --orange2:#ff9c4d; --amber:#ffb020; --ink:#1b1633; --muted:#6b6280; --line:#e4eaf8; --soft:#f5f8fc; --hero-1:#0b1a4a; --hero-2:#1e3a88; --hero-3:#4f46c8; --hero-4:#c42d9a; --why-1:#101848; --why-2:#2e3d8a; --why-3:#5b4fc7; } *{box-sizing:border-box;} .container-xl{max-width:1200px;} .blr-webapp .breadcrumb-bar{background:var(--soft);padding:14px 0;font-size:13.5px;color:var(--muted);} .blr-webapp .breadcrumb-bar a{color:var(--indigo);font-weight:700;} .blr-webapp .hero-section{position:relative;overflow:hidden;color:#fff;padding:64px 0 70px; background:linear-gradient(125deg,var(--hero-1) 0%,var(--hero-2) 38%,var(--hero-3) 72%,var(--hero-4) 100%);} .blr-webapp .hero-section::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%; right:-160px;top:-220px;background:rgba(255,80,180,.16);} .blr-webapp .hero-section .eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,160,220,.5); background:rgba(255,255,255,.12);border-radius:999px;padding:6px 16px;font-size:12px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:#ffd6f0;position:relative;z-index:1;} .blr-webapp .hero-section h1{font-size:2.25em;line-height:1.18;margin:18px 0 10px;position:relative;z-index:1;font-weight:800;color:#fff;} .hero h1 em,.hero-section h1 em{font-style:normal;font-weight:inherit;color:#ffb020;} .blr-webapp .hero-section h2{font-size:clamp(1em,2vw,1.25em);font-weight:700;color:#ffd36a;margin-bottom:16px;position:relative;z-index:1;} .blr-webapp .hero-section p{color:#d8e2f2;font-size:0.9375em;line-height:1.7;position:relative;z-index:1;margin-bottom:14px;} .blr-webapp .video-card{background:#fff;border-radius:16px;padding:14px;box-shadow:0 30px 70px rgba(20,20,80,.3);position:relative;z-index:2;} .blr-webapp .video-card .thumb{position:relative;border-radius:12px;overflow:hidden;display:block;} .blr-webapp .video-card .thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;} .blr-webapp .video-card .thumb .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,40,.22);} .blr-webapp .video-card .thumb .play span{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center;font-size:26px;box-shadow:0 10px 26px rgba(0,0,0,.4);} .blr-webapp .video-card .cap{padding:16px 8px 6px;} .blr-webapp .video-card .cap h3{font-size:1.0625em;color:var(--ink);margin-bottom:6px;} .blr-webapp .video-card .cap p{color:var(--muted);font-size:0.8125em;line-height:1.6;margin:0;} .blr-webapp .video-card .stats{display:flex;gap:10px;flex-wrap:wrap;padding:12px 8px 6px;} .blr-webapp .video-card .stats span{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--indigo);} .blr-webapp .quote-card{background:#fff;border-radius:16px;padding:26px;color:var(--ink);box-shadow:0 30px 70px rgba(20,20,80,.3);position:relative;z-index:2;} .blr-webapp .quote-card h3{font-size:1.1875em;margin-bottom:4px;} .blr-webapp .quote-card p.sub{color:var(--muted);font-size:0.8125em;margin-bottom:16px;} .blr-webapp .form-control,.blr-webapp .form-select{border-radius:9px;border:1px solid var(--line);padding:10px 12px;font-size:14px;} .blr-webapp .form-control:focus,.blr-webapp .form-select:focus{border-color:var(--purple);box-shadow:0 0 0 .2rem rgba(91,79,199,.15);} .blr-webapp .btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange2));border:0;color:#fff;font-weight:800;border-radius:9px;padding:12px;width:100%;font-size:14.5px;letter-spacing:.02em;} .blr-webapp .btn-orange:hover{color:#fff;filter:brightness(1.05);} .blr-webapp .consent-text{font-size:11.5px;color:var(--muted);line-height:1.5;} .blr-webapp .consent-text a{color:var(--indigo);font-weight:700;} .blr-webapp > section{padding:64px 0;} .blr-webapp .section-label{display:inline-block;color:var(--orange);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;margin-bottom:8px;} .blr-webapp .section-title{font-size:clamp(24px,3vw,34px);margin-bottom:14px;} .blr-webapp .section-title span{color:var(--purple);} .blr-webapp .section-desc{color:var(--muted);font-size:0.9375em;line-height:1.7;max-width:780px;} .blr-webapp .bg-soft{background:var(--soft);} .blr-webapp .tile-ico{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:24px; box-shadow:0 8px 20px rgba(20,20,60,.08);border:1px solid rgba(20,20,60,.05);flex:0 0 auto;} .blr-webapp .tile-blue{background:rgba(37,99,235,.10);color:var(--blue);} .blr-webapp .tile-purple{background:rgba(91,79,199,.10);color:var(--purple);} .blr-webapp .tile-magenta{background:rgba(212,29,154,.10);color:var(--magenta);} .blr-webapp .stat-num{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;font-size:16px;font-weight:900; box-shadow:0 8px 20px rgba(20,20,60,.08);border:1px solid rgba(20,20,60,.05);} .blr-webapp .why-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;height:100%;} .blr-webapp .why-card h4{font-size:1.125em;margin:14px 0 10px;} .blr-webapp .why-card p{font-size:0.875em;color:var(--muted);line-height:1.7;margin:0;} .blr-webapp .step-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;height:100%;position:relative;} .blr-webapp .step-card .step-badge{display:inline-block;background:rgba(91,79,199,.1);color:var(--purple);font-weight:800; font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 14px;margin-bottom:14px;} .blr-webapp .step-card h3{font-size:1.03125em;margin-bottom:8px;} .blr-webapp .step-card p{font-size:0.875em;color:var(--muted);line-height:1.65;margin:0;} .blr-webapp .svc-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;height:100%;} .blr-webapp .svc-panel h4{display:flex;align-items:center;gap:12px;font-size:1.125em;margin:0 0 14px;} .blr-webapp .svc-panel ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.7;} .blr-webapp .svc-panel ul li{margin-bottom:10px;} .blr-webapp .testi-card{background:#fff;border-radius:16px;padding:26px;border:1px solid var(--line);height:100%;} .blr-webapp .testi-card .stars{color:var(--amber);font-size:14px;margin-bottom:10px;} .blr-webapp .testi-card p.quote{font-size:0.9375em;font-style:italic;color:var(--ink);line-height:1.65;margin-bottom:16px;} .blr-webapp .testi-card .who{display:flex;align-items:center;gap:12px;} .blr-webapp .testi-card .who b{display:block;font-size:14px;} .blr-webapp .testi-card .who span{font-size:12.5px;color:var(--muted);} .blr-webapp .avatar-initials{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;flex:0 0 auto;} .blr-webapp .testi-result{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:18px 22px;font-size:14.5px;color:var(--ink);margin-top:8px;} .blr-webapp .testi-result b{color:var(--purple);} .blr-webapp .accordion-button{font-weight:800;font-size:14.5px;color:var(--ink);} .blr-webapp .accordion-button:not(.collapsed){background:rgba(91,79,199,.06);color:var(--purple);box-shadow:none;} .blr-webapp .accordion-button:focus{box-shadow:none;border-color:var(--line);} .blr-webapp .accordion-item{border:1px solid var(--line);border-radius:10px!important;margin-bottom:10px;overflow:hidden;} .blr-webapp .accordion-body{font-size:13.8px;color:var(--muted);line-height:1.65;} .blr-webapp .faq-video{border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(20,20,80,.18);position:relative;display:block;} .blr-webapp .faq-video img{width:100%;display:block;} .blr-webapp .faq-video .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,40,.25);} .blr-webapp .faq-video .play span{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center;font-size:26px;box-shadow:0 10px 26px rgba(0,0,0,.4);} .blr-webapp .cta-band{background:linear-gradient(110deg,var(--hero-1) 0%,var(--hero-2) 38%,var(--hero-3) 72%,var(--hero-4) 100%);color:#fff;border-radius:22px;padding:46px;position:relative;overflow:hidden;} .blr-webapp .cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--magenta),var(--orange),var(--amber),var(--blue));} .blr-webapp .cta-band h2{font-size:clamp(1.375em,3vw,1.875em);margin-bottom:8px;} .blr-webapp .cta-band p{color:#cfdded;font-size:0.90625em;max-width:640px;} .blr-webapp .cta-band .tag{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25); border-radius:999px;padding:6px 16px;font-size:12px;font-weight:700;margin-top:14px;} .blr-webapp .cta-band ul.getlist{margin:14px 0 0;padding-left:18px;color:#cfdded;font-size:13.5px;line-height:1.8;} .blr-webapp .city-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line); border-radius:12px;padding:16px 18px;height:100%;} .blr-webapp .city-card:hover{border-color:var(--purple);} .blr-webapp .city-card .city{font-size:12px;color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px;} .blr-webapp .city-card .svc{font-size:14.5px;font-weight:800;color:var(--ink);} /* ===== Popup content (Web Application Development popup) ===== */ .blr-webapp .promo-wrap{border:3px solid transparent;border-radius:24px;overflow:hidden; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--magenta),var(--orange),var(--purple)) border-box; box-shadow:0 30px 70px rgba(40,20,90,.18);} .blr-webapp .promo-hero{position:relative;overflow:hidden;color:#fff;padding:44px; background:linear-gradient(125deg,var(--hero-1) 0%,var(--hero-2) 38%,var(--hero-3) 72%,var(--hero-4) 100%);} .blr-webapp .promo-hero::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-120px;top:-160px;background:rgba(255,80,180,.18);} .blr-webapp .promo-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,160,220,.5);background:rgba(255,255,255,.12); border-radius:999px;padding:5px 14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffd6f0;position:relative;z-index:1;} .blr-webapp .promo-badge .dot{width:6px;height:6px;border-radius:50%;background:#ff8ec8;display:inline-block;} .blr-webapp .promo-hero h3{position:relative;z-index:1;font-size:clamp(1.375em,3vw,2em);margin:14px 0 8px;line-height:1.2;} .blr-webapp .promo-hero h3 em{font-style:normal;color:#ffd36a;} .blr-webapp .promo-hero p{position:relative;z-index:1;max-width:520px;color:#cfdded;font-size:0.90625em;line-height:1.6;margin:0;} .blr-webapp .promo-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} .blr-webapp .promo-pill{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700;color:#eaf2fa;} .blr-webapp .promo-pill i{color:#ffb0e0;margin-right:5px;} .blr-webapp .promo-video{position:relative;border:3px solid transparent;border-radius:12px;overflow:hidden;height:220px; background:linear-gradient(#071d39,#071d39) padding-box, linear-gradient(135deg,var(--orange),#ff3d6e,var(--magenta)) border-box; box-shadow:0 18px 40px rgba(90,10,70,.35);} .blr-webapp .promo-video img{width:100%;height:100%;object-fit:cover;} .blr-webapp .promo-video .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,40,.06),rgba(0,12,27,.45));} .blr-webapp .promo-video .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;} .blr-webapp .promo-video .play span{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center;font-size:22px;box-shadow:0 10px 26px rgba(0,0,0,.45);} .blr-webapp .promo-video .tag{position:absolute;left:12px;bottom:12px;z-index:3;background:var(--orange);color:#fff;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.05em;} .blr-webapp .promo-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--line);} .blr-webapp .promo-stats>div{text-align:center;padding:18px 8px;border-right:1px solid var(--line);border-top:3px solid transparent;} .blr-webapp .promo-stats>div:last-child{border-right:0;} .blr-webapp .promo-stats strong{display:block;font-size:19px;font-weight:900;} .blr-webapp .promo-stats small{display:block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:3px;} .blr-webapp .ps-blue{border-top-color:var(--blue)!important;} .blr-webapp .ps-blue strong{color:var(--blue);} .blr-webapp .ps-purple{border-top-color:var(--purple)!important;} .blr-webapp .ps-purple strong{color:var(--purple);} .blr-webapp .ps-magenta{border-top-color:var(--magenta)!important;} .blr-webapp .ps-magenta strong{color:var(--magenta);} .blr-webapp .ps-orange{border-top-color:var(--orange)!important;} .blr-webapp .ps-orange strong{color:var(--orange);} .blr-webapp .promo-body{padding:36px 44px;background:var(--soft);} .blr-webapp .promo-heading{text-align:center;font-size:22px;font-weight:900;color:var(--purple);margin-bottom:22px;} .blr-webapp .promo-heading span{color:var(--orange);} .blr-webapp .promo-panel{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;margin-bottom:16px;} .blr-webapp .promo-panel-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;} .blr-webapp .promo-panel-head .b-ico{width:30px;height:30px;border-radius:8px;background:rgba(255,116,23,.12);color:var(--orange);display:grid;place-items:center;font-size:14px;} .blr-webapp .approach-mini{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:14px;height:100%;background:#fff;} .blr-webapp .approach-mini .stepnum{font-size:10px;font-weight:900;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;} .blr-webapp .approach-mini b{display:block;font-size:13.5px;margin:4px 0 3px;} .blr-webapp .approach-mini p{margin:0;font-size:0.78125em;color:var(--muted);line-height:1.4;} .blr-webapp .am-rose{border-left-color:var(--magenta);} .blr-webapp .am-rose .stepnum,.blr-webapp .am-rose b{color:var(--magenta);} .blr-webapp .am-blue{border-left-color:var(--blue);} .blr-webapp .am-blue .stepnum,.blr-webapp .am-blue b{color:var(--blue);} .blr-webapp .am-green{border-left-color:var(--purple);} .blr-webapp .am-green .stepnum,.blr-webapp .am-green b{color:var(--purple);} .blr-webapp .promo-dark{position:relative;overflow:hidden;border-radius:14px;padding:22px;color:#fff; background:linear-gradient(135deg,var(--why-1) 0%,var(--why-2) 48%,var(--why-3) 100%);} .blr-webapp .promo-dark::before{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-90px;border-radius:50%;background:rgba(91,79,199,.28);} .blr-webapp .why-checklist{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px;} .blr-webapp .why-checklist li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;} .blr-webapp .why-checklist li i{color:#ffd36a;font-size:15px;flex:0 0 auto;} .blr-webapp .promo-cta{position:relative;overflow:hidden;background:linear-gradient(110deg,var(--hero-1) 0%,var(--hero-2) 38%,var(--hero-3) 72%,var(--hero-4) 100%); padding:22px 44px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .blr-webapp .promo-cta strong{display:block;font-size:16px;font-weight:900;} .blr-webapp .promo-cta span{display:block;margin-top:2px;font-size:13px;color:#c3d5e7;} .blr-webapp .promo-cta .acts{display:flex;gap:10px;flex-wrap:wrap;} .blr-webapp .btn-promo{min-height:42px;padding:0 20px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center; font-size:13px;font-weight:900;letter-spacing:.03em;white-space:nowrap;color:#fff;border:0;} .blr-webapp .btn-promo-orange{background:linear-gradient(135deg,var(--orange),var(--orange2));} .blr-webapp .btn-promo-outline{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.34)!important;} .blr-webapp .btn-promo-outline:hover{background:rgba(255,255,255,.12);color:#fff;} .blr-webapp .promo-ticker{background:#fff;border-top:1px solid var(--line);padding:14px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);} .blr-webapp .promo-ticker b{color:var(--purple);} @media (max-width:991.98px){ .blr-webapp .promo-stats{grid-template-columns:1fr 1fr;} .blr-webapp .promo-body{padding:28px 20px;} .blr-webapp .promo-cta{flex-direction:column;align-items:stretch;text-align:center;padding:22px;} .blr-webapp .promo-cta .acts{justify-content:center;} .blr-webapp .why-checklist{grid-template-columns:1fr;} .blr-webapp > section{padding:46px 0;} } #autoPopupModal{ --navy: #0b1a4a; --indigo: #1e3a88; --purple: #5b4fc7; --magenta: #d41d9a; --blue: #2563eb; --orange: #ff7417; --orange2: #ff9c4d; --amber: #ffb020; --ink: #1b1633; --muted: #6b6280; --line: #e4eaf8; --soft: #f5f8fc; --hero-1: #0b1a4a; --hero-2: #1e3a88; --hero-3: #4f46c8; --hero-4: #c42d9a; --why-1: #101848; --why-2: #2e3d8a; --why-3: #5b4fc7; --border-1: var(--magenta); --border-2: var(--orange); --border-3: var(--purple); } /* Wider modal so content has room, PLUS the body always scrolls if it still needs more space */ #autoPopupModal.modal{ --bs-modal-width: min(920px, calc(100vw - 24px)); } #autoPopupModal + .modal-backdrop.show { opacity: .76; } #autoPopupModal .modal-dialog { margin: 10px auto; } #autoPopupModal .modal-content { height: auto; max-height: none; display: flex; flex-direction: column; overflow: visible; border: 3px solid transparent; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--border-1), var(--border-2), var(--border-3)) border-box; box-shadow: 0 34px 90px rgba(80, 18, 80, .45); } #autoPopupModal .close-btn { position: absolute; top: 12px; right: 14px; z-index: 30; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.26); background: rgba(6, 27, 55, .85); color: #fff; display: grid; place-items: center; font-size: 14px; } #autoPopupModal .close-btn:hover { background: var(--orange); color: #fff; } #autoPopupModal .hero { flex: 0 0 auto; position: relative; overflow: hidden; color: #fff; padding: clamp(14px, 2.2vh, 24px) clamp(16px, 2.4vw, 32px) clamp(12px, 2vh, 20px); background: linear-gradient(125deg, var(--hero-1) 0%, var(--hero-2) 38%, var(--hero-3) 72%, var(--hero-4) 100%); background-size: 200% 200%; animation: hg 12s ease infinite; } @keyframes hg { 0% { background-position: 0% 60%; } 50% { background-position: 100% 40%; } 100% { background-position: 0% 60%; } } @keyframes dp { to { background-position: 28px 28px; } } @keyframes bf { to { background-position: 300% 50%; } } #autoPopupModal .h-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; animation: dp 20s linear infinite; } #autoPopupModal .hero > .row { position: relative; z-index: 1; } #autoPopupModal .hero::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -140px; top: -210px; background: rgba(255, 80, 180, .18); } #autoPopupModal .badge-line { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 160, 220, .5); background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 14px; font-size: clamp(8.5px, 1.15vh, 10.5px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd6f0; } #autoPopupModal .badge-line .dot { width: 6px; height: 6px; border-radius: 50%; background: #ff8ec8; } #autoPopupModal .hero h1 { margin: clamp(8px, 1.4vh, 14px) 0 clamp(6px, 1.1vh, 10px); font-size:clamp(1.1875em,3.3vh,2em); font-weight: 900; letter-spacing: -.9px; line-height: 1.12; } #autoPopupModal .hero h1 em { font-style: normal; color: #ffd36a; } #autoPopupModal .hero p { margin: 0; max-width: 500px; font-size:clamp(0.65625em,1.4vh,0.78125em); line-height: 1.55; color: #d8e2f2; } #autoPopupModal .tick-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(8px, 1.4vh, 13px); } #autoPopupModal .tick-pill { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); border-radius: 6px; padding: 5px 10px; font-size: clamp(8.5px, 1.1vh, 10px); font-weight: 700; color: #eaf2fa; } #autoPopupModal .tick-pill i { color: #ffb0e0; margin-right: 4px; } #autoPopupModal .video-card { position: relative; border: 3px solid transparent; background: linear-gradient(#071d39, #071d39) padding-box, linear-gradient(135deg, var(--orange), #ff3d6e, var(--magenta)) border-box; border-radius: 12px; overflow: hidden; height: clamp(130px, 22vh, 190px); box-shadow: 0 18px 40px rgba(90, 10, 70, .35); cursor: pointer; display: block; } #autoPopupModal .video-card img { width: 100%; height: 100%; object-fit: cover; } #autoPopupModal .video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,40,.06), rgba(0,12,27,.45)); } #autoPopupModal .video-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; } #autoPopupModal .video-play span { width: clamp(38px, 6vh, 52px); height: clamp(38px, 6vh, 52px); border-radius: 50%; background: #fff; color: var(--purple); display: grid; place-items: center; font-size: clamp(16px, 2.4vh, 22px); box-shadow: 0 10px 26px rgba(0,0,0,.45); } #autoPopupModal .video-tag { position: absolute; left: 10px; bottom: 10px; z-index: 3; background: var(--orange); color: #fff; border-radius: 5px; padding: 4px 9px; font-size: clamp(8px, 1.1vh, 10px); font-weight: 800; letter-spacing: .05em; } #autoPopupModal .stats-row { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-bottom: 1px solid var(--line); } #autoPopupModal .stats-row > div { text-align: center; padding: clamp(7px, 1.3vh, 13px) 6px; border-right: 1px solid var(--line); border-top: 3px solid transparent; } #autoPopupModal .stats-row > div:last-child { border-right: 0; } #autoPopupModal .stats-row strong { display: block; font-size: clamp(12.5px, 1.85vh, 16px); font-weight: 900; } #autoPopupModal .stats-row small { display: block; font-size: clamp(7px, 1vh, 9px); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } #autoPopupModal .sr-blue { border-top-color: var(--blue) !important; } #autoPopupModal .sr-blue strong { color: var(--blue); } #autoPopupModal .sr-purple { border-top-color: var(--purple) !important; } #autoPopupModal .sr-purple strong { color: var(--purple); } #autoPopupModal .sr-magenta { border-top-color: var(--magenta) !important; } #autoPopupModal .sr-magenta strong { color: var(--magenta); } #autoPopupModal .sr-orange { border-top-color: var(--orange) !important; } #autoPopupModal .sr-orange strong { color: var(--orange); } /* Body area always scrolls internally if content needs more vertical room than available — this guarantees nothing is ever clipped, regardless of viewport height. */ #autoPopupModal .body-wrap { flex: 0 0 auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); padding: clamp(10px, 1.8vh, 18px) clamp(16px, 2.4vw, 30px); background: var(--soft); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #autoPopupModal .center-heading { flex: 0 0 auto; text-align: center; font-size: clamp(14px, 2.3vh, 21px); font-weight: 900; color: var(--purple); margin: 0; } #autoPopupModal .center-heading span { color: var(--orange); } #autoPopupModal .panels { flex: 0 0 auto; } #autoPopupModal .panel { border: 1px solid var(--line); border-radius: 12px; padding: clamp(9px, 1.5vh, 14px); background: #fff; display: flex; flex-direction: column; margin-bottom: clamp(8px, 1.4vh, 14px); } #autoPopupModal .panel-head { display: flex; align-items: center; gap: 8px; font-size: clamp(9.5px, 1.35vh, 11.5px); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); margin-bottom: clamp(6px, 1.1vh, 10px); } #autoPopupModal .panel-head .badge-ico { width: clamp(20px, 2.8vh, 26px); height: clamp(20px, 2.8vh, 26px); border-radius: 7px; background: rgba(255, 116, 23, .12); color: var(--orange); display: grid; place-items: center; font-size: clamp(10px, 1.5vh, 13px); } #autoPopupModal .approach { height: 100%; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; padding: clamp(7px, 1.2vh, 12px); background: #fff; position: relative; z-index: 1; transform-origin: center center; animation: card-pop-row1 8.4s ease-in-out infinite; } #autoPopupModal .approach-grid > :nth-child(1) .approach { animation-delay: 0s; } #autoPopupModal .approach-grid > :nth-child(2) .approach { animation-delay: .6s; } #autoPopupModal .approach-grid > :nth-child(3) .approach { animation-delay: 1.2s; } @keyframes card-pop-row1 { 0%, 12%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 6% { transform: scale(1.06); box-shadow: 0 16px 32px -10px rgba(224,30,143,.32); border-left-color: var(--magenta); } 11% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } #autoPopupModal .approach .stepnum { font-size: 10px; font-weight: 900; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } #autoPopupModal .approach b { display: block; font-size: clamp(9.5px, 1.4vh, 11.5px); color: var(--ink); margin: 2px 0 1px; } #autoPopupModal .approach p { margin: 0; font-size:clamp(0.46875em,1.1vh,0.59375em); line-height: 1.4; color: var(--muted); } #autoPopupModal .b-rose { border-left-color: var(--magenta); } #autoPopupModal .b-rose .stepnum, #autoPopupModal .b-rose b { color: var(--magenta); } #autoPopupModal .b-blue { border-left-color: var(--blue); } #autoPopupModal .b-blue .stepnum, #autoPopupModal .b-blue b { color: var(--blue); } #autoPopupModal .b-green { border-left-color: var(--purple); } #autoPopupModal .b-green .stepnum, #autoPopupModal .b-green b { color: var(--purple); } #autoPopupModal .panel-dark { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: clamp(11px, 1.9vh, 18px); background: linear-gradient(135deg, var(--why-1) 0%, var(--why-2) 48%, var(--why-3) 100%); background-size: 200% 200%; animation: hg 16s ease infinite; color: #fff; display: flex; flex-direction: column; } #autoPopupModal .panel-dark::before { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: rgba(91,79,199,.28); pointer-events: none; } #autoPopupModal .panel-dark .panel-head { color: #fff; position: relative; z-index: 1; } #autoPopupModal .panel-dark .badge-ico { background: rgba(255, 255, 255, .14); color: #ffd36a; } #autoPopupModal .why-checklist { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(7px,1.2vh,11px) clamp(14px,2vw,26px); } #autoPopupModal .why-checklist li { display: flex; align-items: center; gap: 9px; font-size: clamp(9.5px, 1.4vh, 12px); font-weight: 700; } #autoPopupModal .why-checklist li i { color: #ffd36a; font-size: clamp(11px,1.6vh,14px); flex: 0 0 auto; } #autoPopupModal footer.cta { flex: 0 0 auto; position: relative; overflow: hidden; background: linear-gradient(110deg, var(--hero-1) 0%, var(--hero-2) 38%, var(--hero-3) 72%, var(--hero-4) 100%); background-size: 200% 200%; animation: hg 14s ease infinite reverse; padding: clamp(9px, 1.6vh, 16px) clamp(16px, 2.4vw, 30px); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } #autoPopupModal footer.cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--magenta), var(--orange), var(--amber), var(--blue)); background-size: 400% 100%; animation: bf 6s linear infinite; } #autoPopupModal footer.cta > * { position: relative; z-index: 1; } #autoPopupModal footer.cta strong { display: block; font-size: clamp(12px, 1.9vh, 16px); font-weight: 900; } #autoPopupModal footer.cta span { display: block; margin-top: 2px; font-size: clamp(9px, 1.3vh, 11.5px); color: #c3d5e7; } #autoPopupModal .cta-actions { display: flex; gap: 8px; flex-wrap: wrap; } #autoPopupModal .btn-cta { min-height: clamp(32px, 4.6vh, 40px); padding: 0 clamp(12px, 1.6vw, 18px); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: clamp(9.5px, 1.3vh, 11.5px); font-weight: 900; letter-spacing: .04em; white-space: nowrap; text-decoration: none; color: #fff; } #autoPopupModal .btn-orange { background: linear-gradient(135deg, var(--orange), var(--orange2)); border: 0; } #autoPopupModal footer.cta .btn-orange { transform: scale(1.1); transform-origin: center center; z-index: 2; } #autoPopupModal .btn-orange:hover { color: #fff; filter: brightness(1.06); } #autoPopupModal footer.cta .btn-orange:hover { transform: scale(1.1); color: #fff; } #autoPopupModal .btn-outline-light2 { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.34); cursor: pointer; } #autoPopupModal .btn-outline-light2:hover { color: #fff; background: rgba(255,255,255,.12); } #autoPopupModal .ticker { flex: 0 0 auto; background: #fff; border-top: 1px solid var(--line); text-align: center; padding: clamp(6px,1vh,10px); font-size: clamp(8.5px,1.15vh,10.5px); font-weight: 700; color: var(--muted); } #autoPopupModal .ticker b { color: var(--purple); } @media(max-width:991.98px){ #autoPopupModal .modal-dialog { margin: 0 auto; } #autoPopupModal .modal-content { height: auto; max-height: none; min-height: 100vh; border-radius: 0; } #autoPopupModal .body-wrap { overflow: visible; } #autoPopupModal .video-card { height: 190px; margin-top: 12px; } #autoPopupModal .stats-row { grid-template-columns: 1fr 1fr; } #autoPopupModal footer.cta { flex-direction: column; align-items: stretch; text-align: center; } #autoPopupModal .cta-actions { justify-content: center; } #autoPopupModal .why-checklist { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { #autoPopupModal.modal{ --bs-modal-width: 100vw; } #autoPopupModal .modal-content { border-left: 3px solid var(--magenta); border-right: 3px solid var(--purple); } } @media (prefers-reduced-motion: reduce) { #autoPopupModal .hero,#autoPopupModal footer.cta,#autoPopupModal .panel-dark,#autoPopupModal .h-dots,#autoPopupModal footer.cta::before,#autoPopupModal .approach { animation: none; } } #autoPopupModal section{margin:0;padding:0;} .blr-webapp .clients-section{padding:64px 0;background:#fff;border-top:1px solid var(--line);} .blr-webapp .clients-head{text-align:center;margin-bottom:44px;} .blr-webapp .clients-head h2{font-size:clamp(1.5em,2.6vw,2em);color:#123E93;font-weight:800;} .blr-webapp .clients-head p{color:#5B6577;margin:10px auto 0;font-size:1em;max-width:none;font-weight:500;} .blr-webapp .scroll-wrap{overflow:hidden;position:relative;margin-bottom:0;} .blr-webapp .scroll-wrap::before,.blr-webapp .scroll-wrap::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;} .blr-webapp .scroll-wrap::before{left:0;background:linear-gradient(to right,#fff,transparent);} .blr-webapp .scroll-wrap::after{right:0;background:linear-gradient(to left,#fff,transparent);} .blr-webapp .scroll-track{display:flex;flex-wrap:nowrap;gap:20px;width:max-content;animation:blr-webapp-clients 32s linear infinite;} .blr-webapp .scroll-track:hover{animation-play-state:paused;} @keyframes blr-webapp-clients{0%{transform:translateX(0);}100%{transform:translateX(-50%);}} .blr-webapp .client-card{flex:none;width:190px;height:96px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;border-radius:0;display:block;overflow:visible;} .blr-webapp .client-card img{width:100%;height:100%;object-fit:contain;display:block;} @media(prefers-reduced-motion:reduce){.blr-webapp .scroll-track{animation:none;}} .blr-webapp .quote-card .websoftContactPage .input-group, .blr-webapp .quote-card .hfc-phone.input-group{ display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important; width:100%;background:#fff;border-radius:9px;overflow:visible;border:1px solid var(--line); box-shadow:none!important;min-height:0!important;height:auto!important; } .blr-webapp .quote-card .websoftContactPage .input-group .icon-input{ display:flex!important;align-items:center!important;justify-content:center; min-height:42px!important;height:42px!important;padding:0 0 0 12px!important; background:transparent!important;border:none!important;flex:0 0 auto!important; } .blr-webapp .quote-card .websoftContactPage .input-group .form-control{ border:none!important;box-shadow:none!important;height:42px!important;min-height:42px!important; flex:1 1 auto!important;width:1%!important;padding:10px 13px!important;font-size:0.875em!important; } .blr-webapp .quote-card .country_std_code_select{ display:block!important;width:auto!important;min-width:128px!important;max-width:145px!important; height:42px!important;padding:8px 28px 8px 12px!important;font-size:0.8125em!important; background:#fff!important;border:none!important;border-right:1px solid var(--line)!important; border-radius:0!important;flex:0 0 auto!important; } .blr-webapp .quote-card .country_std_code_input{ flex:0 0 auto!important;width:90px!important;height:42px!important;border:none!important; border-right:1px solid var(--line)!important;padding:8px!important; } .blr-webapp .quote-card .otp-section{margin-top:12px;} .blr-webapp .quote-card .otp-destination-message{font-size:0.75em;color:var(--muted);margin-bottom:8px;} .blr-webapp .quote-card .otpTimer{display:block;font-size:0.8125em;font-weight:700;color:var(--indigo);margin-top:8px;} .blr-webapp .quote-card .otp-row-fields{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .blr-webapp .quote-card .otp-section .verifyOtpBtn, .blr-webapp .quote-card .otp-section .resendOtpBtn{ flex:none;white-space:nowrap;font-size:0.75em;padding:8px 14px;border-radius:8px; border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer; } .blr-webapp .quote-card .form-check{display:flex;align-items:flex-start;gap:7px;margin:0 0 7px;} .blr-webapp .quote-card .contactSubmitBtn:disabled{opacity:.55;cursor:not-allowed;} .blr-webapp .hero-section .video-card .thumb{cursor:pointer;position:relative;} .blr-webapp .hero-section .video-card .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;z-index:5;} .blr-webapp .cta-band h2,.blr-webapp .hero-section h1{color:#fff;} .blr-webapp .promo-hero h3{color:#fff;} .blr-webapp .quote-card h3{color:var(--ink)!important;} .blr-webapp .quote-card p.sub{color:var(--muted)!important;}