Issues:
1.fixed {
2position:fixed;
3}
4.popup-overlay {
5 opacity: 0;
6 visibility: hidden;
7 transition: opacity 0.4s ease, visibility 0.4s ease;
8z-index:110 !important;
9width:100%;
10height:100%;
11 }
12
13 .popup-overlay.active {
14 opacity: 1;
15 visibility: visible;
16 }
17
18 /* Popup Content Animation */
19 .popup-content {
20 transform: scale(0.85) translateY(30px);
21 opacity: 0;
22 transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
23text-align:center
24 }
25
26 .popup-overlay.active .popup-content {
27 transform: scale(1) translateY(0);
28 opacity: 1;
29 }
30
31 /* Decorative blobs */
32 .blob-1 {
33 position: absolute;
34 top: -60px;
35 right: -60px;
36 width: 180px;
37 height: 180px;
38 background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
39 border-radius: 50%;
40 pointer-events: none;
41 }
42
43 .blob-2 {
44 position: absolute;
45 bottom: -40px;
46 left: -40px;
47 width: 140px;
48 height: 140px;
49 background: radial-gradient(circle, rgba(236, 72, 153, 0.12), transparent 70%);
50 border-radius: 50%;
51 pointer-events: none;
52 }
53
54 /* Shimmer effect on CTA */
55 .shimmer-btn {
56 position: relative;
57 overflow: hidden;
58 }
59
60 .shimmer-btn::after {
61 content: '';
62 position: absolute;
63 top: -50%;
64 left: -60%;
65 width: 40%;
66 height: 200%;
67 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
68 transform: skewX(-20deg);
69 animation: shimmer 3s ease-in-out infinite;
70 }
71
72 @keyframes shimmer {
73 0% { left: -60%; }
74 100% { left: 120%; }
75 }
76
77 /* Countdown bar */
78 .countdown-bar {
79 height: 3px;
80 background: linear-gradient(90deg, #6366f1, #ec4899, #6366f1);
81 background-size: 200% 100%;
82 animation: gradientShift 3s linear infinite;
83 transition: width 0.1s linear;
84 }
85
86 @keyframes gradientShift {
87 0% { background-position: 0% 50%; }
88 50% { background-position: 100% 50%; }
89 100% { background-position: 0% 50%; }
90 }
91
92 /* Pulse ring on icon */
93 @keyframes pulseRing {
94 0% { transform: scale(1); opacity: 0.6; }
95 100% { transform: scale(1.8); opacity: 0; }
96 }
97
98 .pulse-ring {
99 animation: pulseRing 2s ease-out infinite;
100 }
101
102 /* Page content animations */
103 .fade-up {
104 opacity: 0;
105 transform: translateY(20px);
106 animation: fadeUp 0.6s ease forwards;
107 }
108
109 @keyframes fadeUp {
110 to {
111 opacity: 1;
112 transform: translateY(0);
113 }
114 }
115
116
117.messag img {
118display: inline-block !important;
119}