@djb25/digit-ui-css 1.0.59 → 1.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,93 +2,74 @@ body {
|
|
|
2
2
|
transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.
|
|
5
|
+
.upyog-scrolled {
|
|
6
6
|
padding-top: 80px; /* header height */
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
/* HEADER */
|
|
10
|
-
.mcd-header-container {
|
|
11
|
-
display: flex;
|
|
12
|
-
justify-content: space-between;
|
|
13
|
-
align-items: center;
|
|
14
|
-
padding: 12px 32px;
|
|
15
|
-
background: #fff;
|
|
16
|
-
}
|
|
17
10
|
|
|
18
|
-
.mcd-header-left {
|
|
19
|
-
display: flex;
|
|
20
|
-
align-items: center;
|
|
21
|
-
}
|
|
22
11
|
|
|
23
|
-
.mcd-logo {
|
|
24
|
-
height: 60px;
|
|
25
|
-
margin-right: 12px;
|
|
26
|
-
}
|
|
27
12
|
|
|
28
|
-
.small-logo {
|
|
29
|
-
height: 50px;
|
|
30
|
-
}
|
|
31
13
|
|
|
32
|
-
.mcd-title {
|
|
33
|
-
font-size: 24px;
|
|
34
|
-
font-weight: 700;
|
|
35
|
-
color: #0b2c57;
|
|
36
|
-
}
|
|
37
14
|
|
|
38
|
-
.mcd-header-right {
|
|
39
|
-
display: flex;
|
|
40
|
-
align-items: center;
|
|
41
|
-
}
|
|
42
15
|
|
|
43
|
-
.mcd-menu {
|
|
44
|
-
list-style: none;
|
|
45
|
-
display: flex;
|
|
46
|
-
margin-left: 20px;
|
|
47
|
-
}
|
|
48
16
|
|
|
49
|
-
.mcd-menu li a {
|
|
50
|
-
padding: 8px 16px;
|
|
51
|
-
color: #0b2c57;
|
|
52
|
-
text-decoration: none;
|
|
53
|
-
font-weight: 500;
|
|
54
|
-
}
|
|
55
17
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
60
27
|
|
|
61
28
|
/* INFO BAR */
|
|
62
|
-
.
|
|
29
|
+
.upyog-info-bar {
|
|
63
30
|
width: 100%;
|
|
64
|
-
background:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
31
|
+
background: #fef3c7; /* Soft amber/yellow background */
|
|
32
|
+
border-bottom: 1px solid #fde68a;
|
|
33
|
+
padding: 8px 0;
|
|
34
|
+
color: #78350f; /* Amber-900 text */
|
|
35
|
+
font-size: 13.5px;
|
|
36
|
+
font-weight: 500;
|
|
68
37
|
display: flex;
|
|
69
38
|
align-items: center;
|
|
70
39
|
position: relative;
|
|
40
|
+
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
|
71
41
|
}
|
|
72
42
|
|
|
73
|
-
.
|
|
74
|
-
margin-left:
|
|
75
|
-
margin-right:
|
|
43
|
+
.upyog-info-icon {
|
|
44
|
+
margin-left: 45px;
|
|
45
|
+
margin-right: 10px;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.upyog-info-icon svg {
|
|
51
|
+
fill: #d97706 !important; /* amber-600 */
|
|
52
|
+
width: 16px;
|
|
53
|
+
height: 16px;
|
|
76
54
|
}
|
|
77
55
|
|
|
78
|
-
.
|
|
56
|
+
.upyog-info-content {
|
|
79
57
|
overflow: hidden;
|
|
80
58
|
white-space: nowrap;
|
|
81
|
-
width:
|
|
59
|
+
width: 80%;
|
|
60
|
+
position: relative;
|
|
61
|
+
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
|
62
|
+
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
|
82
63
|
}
|
|
83
64
|
|
|
84
|
-
.
|
|
65
|
+
.upyog-info-text {
|
|
85
66
|
display: inline-block;
|
|
86
67
|
padding-left: 100%;
|
|
87
|
-
animation: scrollText
|
|
68
|
+
animation: scrollText 22s linear infinite;
|
|
88
69
|
will-change: transform;
|
|
89
70
|
}
|
|
90
71
|
|
|
91
|
-
@keyframes scrollText
|
|
72
|
+
@keyframes scrollText{
|
|
92
73
|
from {
|
|
93
74
|
transform: translateX(0);
|
|
94
75
|
}
|
|
@@ -97,7 +78,7 @@ body {
|
|
|
97
78
|
}
|
|
98
79
|
}
|
|
99
80
|
|
|
100
|
-
.
|
|
81
|
+
.upyog-search-box {
|
|
101
82
|
position: absolute;
|
|
102
83
|
bottom: -40px;
|
|
103
84
|
left: 50%;
|
|
@@ -111,21 +92,11 @@ body {
|
|
|
111
92
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
|
112
93
|
}
|
|
113
94
|
|
|
114
|
-
.mcd-search-input {
|
|
115
|
-
display: flex;
|
|
116
|
-
align-items: center;
|
|
117
|
-
flex: 1;
|
|
118
|
-
}
|
|
119
95
|
|
|
120
|
-
.mcd-search-input input {
|
|
121
|
-
border: none;
|
|
122
|
-
outline: none;
|
|
123
|
-
padding: 10px;
|
|
124
|
-
flex: 1;
|
|
125
|
-
font-size: 16px;
|
|
126
|
-
}
|
|
127
96
|
|
|
128
|
-
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
.upyog-search-btn {
|
|
129
100
|
background: linear-gradient(180deg, #217eff, #000);
|
|
130
101
|
border: none;
|
|
131
102
|
color: #fff;
|
|
@@ -136,49 +107,24 @@ body {
|
|
|
136
107
|
}
|
|
137
108
|
|
|
138
109
|
/* QUICK SERVICES */
|
|
139
|
-
.mcd-quick-services {
|
|
140
|
-
padding: 80px 0 20px;
|
|
141
|
-
text-align: center;
|
|
142
|
-
}
|
|
143
110
|
|
|
144
|
-
.qs-label {
|
|
145
|
-
font-size: 15px;
|
|
146
|
-
color: #555;
|
|
147
|
-
}
|
|
148
111
|
|
|
149
|
-
.qs-list {
|
|
150
|
-
display: flex;
|
|
151
|
-
justify-content: center;
|
|
152
|
-
gap: 30px;
|
|
153
|
-
margin-top: 10px;
|
|
154
|
-
}
|
|
155
112
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
161
117
|
|
|
162
118
|
/* FOOTER */
|
|
163
|
-
.
|
|
119
|
+
.upyog-footer {
|
|
164
120
|
padding: 40px;
|
|
165
121
|
text-align: center;
|
|
166
122
|
}
|
|
167
123
|
|
|
168
|
-
.mcd-footer-img {
|
|
169
|
-
height: 40px;
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
}
|
|
172
124
|
|
|
173
|
-
.branding {
|
|
174
|
-
display: flex;
|
|
175
|
-
align-items: center;
|
|
176
|
-
gap: 15px;
|
|
177
|
-
}
|
|
178
125
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}
|
|
126
|
+
|
|
127
|
+
|
|
182
128
|
|
|
183
129
|
.branding h2 {
|
|
184
130
|
font-size: 28px;
|
|
@@ -192,134 +138,165 @@ body {
|
|
|
192
138
|
margin: 0;
|
|
193
139
|
}
|
|
194
140
|
|
|
195
|
-
.lang-switch {
|
|
196
|
-
cursor: pointer;
|
|
197
|
-
font-weight: 600;
|
|
198
|
-
padding: 2px 6px;
|
|
199
|
-
}
|
|
200
141
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
142
|
+
|
|
143
|
+
.upyog-top-bar {
|
|
144
|
+
background: #f8fafc;
|
|
145
|
+
color: #475569;
|
|
204
146
|
padding: 0 45px;
|
|
205
147
|
display: flex;
|
|
206
148
|
justify-content: space-between;
|
|
207
149
|
align-items: center;
|
|
208
|
-
font-size:
|
|
209
|
-
|
|
210
|
-
|
|
150
|
+
font-size: 13px;
|
|
151
|
+
font-weight: 500;
|
|
152
|
+
border-bottom: 1px solid #e2e8f0;
|
|
153
|
+
height: 38px;
|
|
211
154
|
transform: translateY(0);
|
|
212
155
|
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
213
156
|
will-change: transform;
|
|
157
|
+
box-shadow: none !important;
|
|
214
158
|
}
|
|
215
159
|
|
|
216
|
-
.
|
|
217
|
-
transition: transform 0.3s ease;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.mcd-top-left {
|
|
160
|
+
.upyog-top-left {
|
|
221
161
|
display: flex;
|
|
222
162
|
align-items: center;
|
|
223
|
-
gap:
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.mcd-top-right .icon-link {
|
|
227
|
-
color: #000;
|
|
163
|
+
gap: 12px;
|
|
228
164
|
}
|
|
229
165
|
|
|
230
166
|
.pipe {
|
|
231
|
-
opacity: 0.
|
|
167
|
+
opacity: 0.3;
|
|
168
|
+
margin: 0 4px;
|
|
232
169
|
}
|
|
233
170
|
|
|
234
|
-
.
|
|
171
|
+
.upyog-top-right {
|
|
235
172
|
display: flex;
|
|
236
173
|
align-items: center;
|
|
237
|
-
gap:
|
|
174
|
+
gap: 12px;
|
|
238
175
|
}
|
|
239
176
|
|
|
240
|
-
.icon-link {
|
|
241
|
-
color:
|
|
242
|
-
|
|
177
|
+
.upyog-top-right .icon-link {
|
|
178
|
+
color: #64748b;
|
|
179
|
+
display: inline-flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
width: 28px;
|
|
183
|
+
height: 28px;
|
|
184
|
+
border-radius: 50%;
|
|
185
|
+
background: #f1f5f9;
|
|
186
|
+
transition: all 0.25s ease;
|
|
243
187
|
}
|
|
244
188
|
|
|
245
|
-
.icon-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
189
|
+
.upyog-top-right .icon-link:hover {
|
|
190
|
+
background: #e2e8f0;
|
|
191
|
+
transform: translateY(-1.5px);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.upyog-top-right .icon-link svg {
|
|
195
|
+
width: 14px !important;
|
|
196
|
+
height: 14px !important;
|
|
197
|
+
fill: #64748b !important;
|
|
198
|
+
transition: fill 0.25s ease;
|
|
250
199
|
}
|
|
251
200
|
|
|
252
|
-
.
|
|
201
|
+
.upyog-top-right .icon-link:hover svg {
|
|
202
|
+
fill: #005bbb !important;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.upyog-header {
|
|
253
206
|
position: relative;
|
|
254
207
|
z-index: 1000;
|
|
255
|
-
background: #
|
|
256
|
-
padding:
|
|
257
|
-
border-bottom:
|
|
208
|
+
background: #ffffff;
|
|
209
|
+
padding: 16px 45px;
|
|
210
|
+
border-bottom: 1px solid #e2e8f0;
|
|
258
211
|
display: flex;
|
|
259
212
|
justify-content: space-between;
|
|
260
213
|
align-items: center;
|
|
261
214
|
transform: translateY(0);
|
|
262
|
-
transition:
|
|
215
|
+
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
|
|
263
216
|
will-change: transform;
|
|
264
217
|
}
|
|
265
218
|
|
|
266
|
-
.
|
|
219
|
+
.upyog-scrolled .upyog-top-bar {
|
|
267
220
|
transform: translateY(-100%);
|
|
268
221
|
}
|
|
269
222
|
|
|
270
|
-
|
|
271
|
-
.mcd-scrolled .mcd-header {
|
|
223
|
+
.upyog-scrolled .upyog-header {
|
|
272
224
|
position: fixed;
|
|
273
225
|
top: 0;
|
|
274
226
|
left: 0;
|
|
275
227
|
right: 0;
|
|
276
|
-
|
|
228
|
+
padding: 10px 45px;
|
|
229
|
+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
|
230
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
277
231
|
}
|
|
278
232
|
|
|
279
233
|
.branding {
|
|
280
234
|
display: flex;
|
|
281
235
|
align-items: center;
|
|
282
|
-
gap:
|
|
236
|
+
gap: 14px;
|
|
283
237
|
}
|
|
284
238
|
|
|
285
|
-
.
|
|
286
|
-
width:
|
|
287
|
-
height:
|
|
239
|
+
.brand-mark {
|
|
240
|
+
width: 48px;
|
|
241
|
+
height: 48px;
|
|
242
|
+
border-radius: 12px;
|
|
243
|
+
background: linear-gradient(135deg, #065297, #003a8f);
|
|
244
|
+
display: flex;
|
|
245
|
+
align-items: center;
|
|
246
|
+
justify-content: center;
|
|
247
|
+
box-shadow: 0 4px 14px rgba(12, 35, 64, 0.2);
|
|
248
|
+
overflow: hidden;
|
|
249
|
+
transition: all 0.3s ease;
|
|
288
250
|
}
|
|
289
251
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
.brand-mark img {
|
|
255
|
+
width: 100%;
|
|
256
|
+
height: 100%;
|
|
257
|
+
object-fit: contain;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.brand-title {
|
|
261
|
+
font-family: 'Crimson Pro', serif;
|
|
262
|
+
font-size: 29px;
|
|
293
263
|
font-weight: 700;
|
|
294
264
|
color: #003366;
|
|
265
|
+
line-height: 1.1;
|
|
266
|
+
margin: 0;
|
|
267
|
+
transition: color 0.3s ease;
|
|
295
268
|
}
|
|
296
269
|
|
|
297
|
-
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
.brand-subtitle {
|
|
273
|
+
font-size: 10.5px;
|
|
274
|
+
font-weight: 600;
|
|
275
|
+
color: #0070B4;
|
|
276
|
+
line-height: 1.2;
|
|
298
277
|
margin: 0;
|
|
299
|
-
|
|
300
|
-
color: #555;
|
|
278
|
+
letter-spacing: 0.3px;
|
|
301
279
|
}
|
|
302
280
|
|
|
303
|
-
.
|
|
281
|
+
.upyog-nav {
|
|
304
282
|
display: flex;
|
|
305
|
-
gap:
|
|
306
|
-
align-items:
|
|
283
|
+
gap: 16px;
|
|
284
|
+
align-items: center;
|
|
307
285
|
}
|
|
308
286
|
|
|
309
|
-
.
|
|
310
|
-
font-size:
|
|
287
|
+
.upyog-nav a {
|
|
288
|
+
font-size: 14px;
|
|
311
289
|
color: #003366;
|
|
312
290
|
text-decoration: none;
|
|
313
291
|
font-weight: 500;
|
|
314
292
|
}
|
|
315
293
|
|
|
316
|
-
.
|
|
294
|
+
.upyog-nav a:hover {
|
|
317
295
|
color: #005bbb;
|
|
318
|
-
text-decoration: underline;
|
|
319
296
|
}
|
|
320
297
|
|
|
321
298
|
/* HERO SECTION */
|
|
322
|
-
.
|
|
299
|
+
.upyog-hero-wrapper {
|
|
323
300
|
width: 100%;
|
|
324
301
|
padding: 30px 0 30px 0; /* extra bottom padding */
|
|
325
302
|
display: flex;
|
|
@@ -328,7 +305,7 @@ body {
|
|
|
328
305
|
position: relative;
|
|
329
306
|
}
|
|
330
307
|
|
|
331
|
-
.
|
|
308
|
+
.upyog-hero-container {
|
|
332
309
|
width: 96%;
|
|
333
310
|
background: #0a2f57;
|
|
334
311
|
overflow: hidden;
|
|
@@ -338,13 +315,13 @@ body {
|
|
|
338
315
|
overflow: hidden;
|
|
339
316
|
}
|
|
340
317
|
|
|
341
|
-
.
|
|
318
|
+
.upyog-hero-split {
|
|
342
319
|
display: flex;
|
|
343
320
|
height: 380px;
|
|
344
321
|
}
|
|
345
322
|
|
|
346
323
|
/* LEFT */
|
|
347
|
-
.
|
|
324
|
+
.upyog-hero-left {
|
|
348
325
|
width: 40%;
|
|
349
326
|
position: relative;
|
|
350
327
|
padding: 56px 40px;
|
|
@@ -359,7 +336,7 @@ body {
|
|
|
359
336
|
text-align: center;
|
|
360
337
|
}
|
|
361
338
|
|
|
362
|
-
.
|
|
339
|
+
.upyog-hero-left::after {
|
|
363
340
|
content: "";
|
|
364
341
|
position: absolute;
|
|
365
342
|
top: 0;
|
|
@@ -373,7 +350,7 @@ body {
|
|
|
373
350
|
pointer-events: none;
|
|
374
351
|
}
|
|
375
352
|
|
|
376
|
-
.
|
|
353
|
+
.upyog-hero-logo {
|
|
377
354
|
width: 205px;
|
|
378
355
|
margin-bottom: 20px;
|
|
379
356
|
background: #ffffff;
|
|
@@ -382,19 +359,19 @@ body {
|
|
|
382
359
|
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
|
383
360
|
}
|
|
384
361
|
|
|
385
|
-
.
|
|
362
|
+
.upyog-hero-logo:hover {
|
|
386
363
|
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.35);
|
|
387
364
|
transform: scale(1.02);
|
|
388
365
|
}
|
|
389
366
|
|
|
390
|
-
.
|
|
367
|
+
.upyog-hero-welcome-text {
|
|
391
368
|
font-size: 18px;
|
|
392
369
|
font-weight: 400;
|
|
393
370
|
opacity: 0.9;
|
|
394
371
|
margin: 0 0 6px 0;
|
|
395
372
|
}
|
|
396
373
|
|
|
397
|
-
.
|
|
374
|
+
.upyog-hero-title {
|
|
398
375
|
font-size: 40px;
|
|
399
376
|
font-weight: 700;
|
|
400
377
|
margin: 0;
|
|
@@ -402,13 +379,13 @@ body {
|
|
|
402
379
|
}
|
|
403
380
|
|
|
404
381
|
/* RIGHT */
|
|
405
|
-
.
|
|
382
|
+
.upyog-hero-right {
|
|
406
383
|
position: relative;
|
|
407
384
|
overflow: hidden;
|
|
408
385
|
width: 60%;
|
|
409
386
|
}
|
|
410
387
|
|
|
411
|
-
.
|
|
388
|
+
.upyog-hero-right::before {
|
|
412
389
|
content: "";
|
|
413
390
|
position: absolute;
|
|
414
391
|
inset: 0;
|
|
@@ -419,31 +396,23 @@ body {
|
|
|
419
396
|
}
|
|
420
397
|
|
|
421
398
|
/* Main Banner */
|
|
422
|
-
.
|
|
399
|
+
.upyog-hero-container {
|
|
423
400
|
border-radius: 28px;
|
|
424
401
|
overflow: hidden;
|
|
425
402
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
|
|
426
403
|
}
|
|
427
404
|
|
|
428
405
|
/* 🔹 Overlap Image */
|
|
429
|
-
.mcd-hero-overlap-img {
|
|
430
|
-
position: absolute;
|
|
431
|
-
top: -40px; /* overlaps ABOVE banner */
|
|
432
|
-
left: 50%;
|
|
433
|
-
transform: translateX(-50%);
|
|
434
|
-
width: 160px;
|
|
435
|
-
z-index: 10;
|
|
436
|
-
pointer-events: none;
|
|
437
|
-
}
|
|
438
406
|
|
|
439
|
-
|
|
407
|
+
|
|
408
|
+
.upyog-hero-main-img {
|
|
440
409
|
width: 100%;
|
|
441
410
|
height: auto;
|
|
442
411
|
object-fit: cover;
|
|
443
412
|
display: block;
|
|
444
413
|
}
|
|
445
414
|
|
|
446
|
-
@keyframes fadeUpSlow
|
|
415
|
+
@keyframes fadeUpSlow{
|
|
447
416
|
from {
|
|
448
417
|
opacity: 0;
|
|
449
418
|
transform: translateY(16px);
|
|
@@ -454,21 +423,21 @@ body {
|
|
|
454
423
|
}
|
|
455
424
|
}
|
|
456
425
|
|
|
457
|
-
.hero-animate .
|
|
426
|
+
.hero-animate .upyog-hero-logo {
|
|
458
427
|
animation: fadeUpSlow 0.9s ease-out forwards;
|
|
459
428
|
}
|
|
460
429
|
|
|
461
|
-
.hero-animate .
|
|
430
|
+
.hero-animate .upyog-hero-welcome-text {
|
|
462
431
|
animation: fadeUpSlow 0.9s ease-out forwards;
|
|
463
432
|
animation-delay: 0.2s;
|
|
464
433
|
}
|
|
465
434
|
|
|
466
|
-
.hero-animate .
|
|
435
|
+
.hero-animate .upyog-hero-title {
|
|
467
436
|
animation: fadeUpSlow 0.9s ease-out forwards;
|
|
468
437
|
animation-delay: 0.4s;
|
|
469
438
|
}
|
|
470
439
|
|
|
471
|
-
@keyframes imageFadeSlow
|
|
440
|
+
@keyframes imageFadeSlow{
|
|
472
441
|
from {
|
|
473
442
|
opacity: 0;
|
|
474
443
|
transform: scale(1.04);
|
|
@@ -479,7 +448,7 @@ body {
|
|
|
479
448
|
}
|
|
480
449
|
}
|
|
481
450
|
|
|
482
|
-
.hero-animate .
|
|
451
|
+
.hero-animate .upyog-hero-main-img {
|
|
483
452
|
animation: imageFadeSlow 1.1s ease-out forwards;
|
|
484
453
|
}
|
|
485
454
|
|
|
@@ -490,26 +459,25 @@ body {
|
|
|
490
459
|
}
|
|
491
460
|
|
|
492
461
|
@media (max-width: 768px) {
|
|
493
|
-
.
|
|
462
|
+
.upyog-hero-split {
|
|
494
463
|
flex-direction: column;
|
|
495
464
|
}
|
|
496
465
|
|
|
497
|
-
.
|
|
498
|
-
.mcd-hero-right {
|
|
466
|
+
.upyog-hero-left, .upyog-hero-right {
|
|
499
467
|
width: 100%;
|
|
500
468
|
}
|
|
501
469
|
|
|
502
|
-
.
|
|
470
|
+
.upyog-hero-left {
|
|
503
471
|
padding: 48px 24px;
|
|
504
472
|
}
|
|
505
473
|
|
|
506
|
-
.
|
|
474
|
+
.upyog-hero-main-img {
|
|
507
475
|
height: 260px;
|
|
508
476
|
}
|
|
509
477
|
}
|
|
510
478
|
|
|
511
479
|
/* SEARCH BAR FLOATS BELOW HERO */
|
|
512
|
-
.
|
|
480
|
+
.upyog-search-wrapper {
|
|
513
481
|
width: 100%;
|
|
514
482
|
display: flex;
|
|
515
483
|
justify-content: center;
|
|
@@ -518,7 +486,7 @@ body {
|
|
|
518
486
|
position: relative;
|
|
519
487
|
}
|
|
520
488
|
|
|
521
|
-
.
|
|
489
|
+
.upyog-search-box {
|
|
522
490
|
width: 600px;
|
|
523
491
|
max-width: 90%;
|
|
524
492
|
background: #fff;
|
|
@@ -530,7 +498,7 @@ body {
|
|
|
530
498
|
gap: 7px;
|
|
531
499
|
}
|
|
532
500
|
|
|
533
|
-
.
|
|
501
|
+
.upyog-search-icon {
|
|
534
502
|
height: 45px;
|
|
535
503
|
width: 45px;
|
|
536
504
|
background: #eef3ff;
|
|
@@ -540,14 +508,9 @@ body {
|
|
|
540
508
|
align-items: center;
|
|
541
509
|
}
|
|
542
510
|
|
|
543
|
-
.mcd-search-input {
|
|
544
|
-
flex: 1;
|
|
545
|
-
border: none;
|
|
546
|
-
outline: none;
|
|
547
|
-
font-size: 16px;
|
|
548
|
-
}
|
|
549
511
|
|
|
550
|
-
|
|
512
|
+
|
|
513
|
+
.upyog-search-btn {
|
|
551
514
|
background: linear-gradient(180deg, #003c8f, #0053a6);
|
|
552
515
|
color: #fff !important;
|
|
553
516
|
border: none;
|
|
@@ -558,11 +521,11 @@ body {
|
|
|
558
521
|
transition: 0.2s;
|
|
559
522
|
}
|
|
560
523
|
|
|
561
|
-
.
|
|
524
|
+
.upyog-search-btn:hover {
|
|
562
525
|
}
|
|
563
526
|
|
|
564
527
|
/* SUGGESTED LINKS ROW */
|
|
565
|
-
.
|
|
528
|
+
.upyog-suggested-wrapper {
|
|
566
529
|
width: 100%;
|
|
567
530
|
max-width: 900px;
|
|
568
531
|
margin: 50px auto 0 auto;
|
|
@@ -571,187 +534,206 @@ body {
|
|
|
571
534
|
align-items: center;
|
|
572
535
|
justify-content: center;
|
|
573
536
|
gap: 12px;
|
|
574
|
-
padding: 10px 0
|
|
537
|
+
padding: 10px 0;
|
|
575
538
|
}
|
|
576
539
|
|
|
577
|
-
.
|
|
578
|
-
font-size:
|
|
540
|
+
.upyog-suggested-label {
|
|
541
|
+
font-size: 14.5px;
|
|
579
542
|
font-weight: 600;
|
|
580
|
-
color: #
|
|
543
|
+
color: #475569;
|
|
581
544
|
}
|
|
582
545
|
|
|
583
546
|
/* Link Buttons (KSMART pill style) */
|
|
584
|
-
.
|
|
585
|
-
background: #
|
|
586
|
-
border:
|
|
547
|
+
.upyog-suggested-btn {
|
|
548
|
+
background: #f8fafc;
|
|
549
|
+
border: 1.5px solid #e2e8f0;
|
|
587
550
|
border-radius: 999px;
|
|
588
|
-
|
|
589
|
-
padding: 8px 18px;
|
|
551
|
+
padding: 8px 20px;
|
|
590
552
|
font-size: 14px;
|
|
591
|
-
font-weight:
|
|
592
|
-
color: #
|
|
593
|
-
|
|
553
|
+
font-weight: 600;
|
|
554
|
+
color: #334155;
|
|
594
555
|
cursor: pointer;
|
|
595
556
|
white-space: nowrap;
|
|
596
|
-
|
|
597
|
-
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
|
557
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
598
558
|
}
|
|
599
559
|
|
|
600
|
-
.
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
box-shadow: 0
|
|
560
|
+
.upyog-suggested-btn:hover {
|
|
561
|
+
background: #eff6ff;
|
|
562
|
+
border-color: #3b82f6;
|
|
563
|
+
color: #1d4ed8;
|
|
564
|
+
transform: translateY(-2px);
|
|
565
|
+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
|
|
606
566
|
}
|
|
607
567
|
|
|
608
|
-
.
|
|
609
|
-
transform: translateY(
|
|
610
|
-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
|
568
|
+
.upyog-suggested-btn:active {
|
|
569
|
+
transform: translateY(0);
|
|
611
570
|
}
|
|
612
571
|
|
|
613
|
-
.
|
|
572
|
+
.upyog-suggested-btn:focus-visible {
|
|
614
573
|
outline: none;
|
|
615
|
-
box-shadow: 0 0 0 3px rgba(
|
|
574
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
|
616
575
|
}
|
|
617
576
|
|
|
618
577
|
/* Mobile Responsive */
|
|
619
578
|
@media (max-width: 768px) {
|
|
620
|
-
.
|
|
579
|
+
.upyog-suggested-wrapper {
|
|
621
580
|
flex-wrap: wrap;
|
|
622
581
|
gap: 10px;
|
|
623
582
|
padding-bottom: 20px;
|
|
624
583
|
}
|
|
625
584
|
|
|
626
|
-
.
|
|
585
|
+
.upyog-suggested-btn {
|
|
627
586
|
padding: 8px 14px;
|
|
628
587
|
font-size: 13px;
|
|
629
588
|
}
|
|
630
589
|
}
|
|
631
590
|
|
|
632
591
|
/* QUICK SERVICES WRAPPER */
|
|
633
|
-
.
|
|
592
|
+
.upyog-quick-wrapper {
|
|
634
593
|
width: 100%;
|
|
635
|
-
background: linear-gradient(
|
|
636
|
-
padding:
|
|
594
|
+
background: linear-gradient(135deg, #091e3a 0%, #102e5c 100%);
|
|
595
|
+
padding: 60px 0;
|
|
637
596
|
text-align: center;
|
|
638
597
|
margin-top: 30px;
|
|
639
598
|
}
|
|
640
599
|
|
|
641
600
|
/* Title */
|
|
642
|
-
.
|
|
643
|
-
font-size:
|
|
601
|
+
.upyog-quick-title {
|
|
602
|
+
font-size: 24px;
|
|
644
603
|
font-weight: 700;
|
|
645
604
|
color: #fff;
|
|
646
605
|
margin-bottom: 35px;
|
|
606
|
+
letter-spacing: 0.5px;
|
|
647
607
|
}
|
|
648
608
|
|
|
649
609
|
/* Cards Grid (2 rows × 3 columns) */
|
|
650
|
-
.
|
|
610
|
+
.upyog-quick-grid {
|
|
651
611
|
max-width: 1200px;
|
|
652
612
|
margin: auto;
|
|
653
613
|
display: grid;
|
|
654
614
|
grid-template-columns: repeat(3, 1fr);
|
|
655
|
-
gap:
|
|
615
|
+
gap: 24px;
|
|
656
616
|
}
|
|
657
617
|
|
|
658
618
|
/* Individual Card */
|
|
659
|
-
.
|
|
619
|
+
.upyog-quick-card {
|
|
660
620
|
background: #fff;
|
|
661
|
-
height:
|
|
662
|
-
border-radius:
|
|
621
|
+
height: 72px;
|
|
622
|
+
border-radius: 16px;
|
|
663
623
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
|
|
664
624
|
display: flex;
|
|
665
625
|
align-items: center;
|
|
666
|
-
padding: 0
|
|
626
|
+
padding: 0 20px;
|
|
667
627
|
cursor: pointer;
|
|
668
|
-
|
|
628
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
629
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
669
630
|
}
|
|
670
631
|
|
|
671
|
-
.
|
|
672
|
-
transform: translateY(-
|
|
673
|
-
box-shadow: 0px
|
|
632
|
+
.upyog-quick-card:hover {
|
|
633
|
+
transform: translateY(-5px) scale(1.01);
|
|
634
|
+
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.2);
|
|
674
635
|
}
|
|
675
636
|
|
|
676
637
|
/* Left icon bubble */
|
|
677
|
-
.
|
|
678
|
-
background: #
|
|
679
|
-
width:
|
|
680
|
-
height:
|
|
681
|
-
min-width:
|
|
682
|
-
border-radius:
|
|
638
|
+
.upyog-quick-icon {
|
|
639
|
+
background: #eff6ff;
|
|
640
|
+
width: 44px;
|
|
641
|
+
height: 44px;
|
|
642
|
+
min-width: 44px;
|
|
643
|
+
border-radius: 12px;
|
|
683
644
|
display: flex;
|
|
684
645
|
justify-content: center;
|
|
685
646
|
align-items: center;
|
|
686
|
-
font-size:
|
|
647
|
+
font-size: 20px;
|
|
687
648
|
margin-right: 16px;
|
|
649
|
+
color: #2563eb;
|
|
650
|
+
transition: all 0.3s ease;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.upyog-quick-card:hover .upyog-quick-icon {
|
|
654
|
+
color: #ffffff;
|
|
688
655
|
}
|
|
689
656
|
|
|
690
657
|
/* Service Text */
|
|
691
|
-
.
|
|
658
|
+
.upyog-quick-text {
|
|
692
659
|
flex: 1;
|
|
693
660
|
text-align: left;
|
|
694
661
|
font-size: 15px;
|
|
695
662
|
font-weight: 600;
|
|
696
|
-
color: #
|
|
663
|
+
color: #1e293b;
|
|
664
|
+
transition: color 0.3s ease;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.upyog-quick-card:hover .upyog-quick-text {
|
|
668
|
+
color: #2563eb;
|
|
697
669
|
}
|
|
698
670
|
|
|
699
671
|
/* Right Arrow */
|
|
700
|
-
.
|
|
672
|
+
.upyog-quick-arrow {
|
|
701
673
|
font-size: 22px;
|
|
702
674
|
font-weight: 700;
|
|
703
|
-
color: #
|
|
675
|
+
color: #64748b;
|
|
676
|
+
transition: all 0.3s ease;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
.upyog-quick-card:hover .upyog-quick-arrow {
|
|
680
|
+
color: #2563eb;
|
|
681
|
+
transform: translateX(4px);
|
|
704
682
|
}
|
|
705
683
|
|
|
706
684
|
/* Mobile Responsive */
|
|
707
685
|
@media (max-width: 900px) {
|
|
708
|
-
.
|
|
686
|
+
.upyog-quick-grid {
|
|
709
687
|
grid-template-columns: repeat(2, 1fr);
|
|
710
688
|
gap: 16px;
|
|
711
689
|
}
|
|
712
690
|
}
|
|
713
691
|
|
|
714
692
|
@media (max-width: 600px) {
|
|
715
|
-
.
|
|
693
|
+
.upyog-quick-grid {
|
|
716
694
|
grid-template-columns: 1fr;
|
|
717
695
|
}
|
|
718
696
|
|
|
719
|
-
.
|
|
697
|
+
.upyog-quick-card {
|
|
720
698
|
height: 60px;
|
|
721
699
|
}
|
|
722
700
|
}
|
|
723
701
|
|
|
724
|
-
.services-section {
|
|
725
|
-
padding: 40px 0;
|
|
726
|
-
text-align: center;
|
|
727
|
-
}
|
|
728
702
|
|
|
729
|
-
.services-title {
|
|
730
|
-
font-size: 28px;
|
|
731
|
-
font-weight: 700;
|
|
732
|
-
margin-bottom: 30px;
|
|
733
|
-
}
|
|
734
703
|
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
gap: 24px;
|
|
739
|
-
padding: 0 40px;
|
|
740
|
-
}
|
|
704
|
+
|
|
705
|
+
|
|
706
|
+
|
|
741
707
|
|
|
742
708
|
.service-card {
|
|
743
709
|
background: #ffffff;
|
|
744
|
-
border-radius:
|
|
745
|
-
|
|
746
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.
|
|
710
|
+
border-radius: 16px;
|
|
711
|
+
height: 190px;
|
|
712
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
747
713
|
position: relative;
|
|
748
714
|
overflow: hidden;
|
|
749
715
|
cursor: pointer;
|
|
750
|
-
|
|
716
|
+
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
717
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.service-card img {
|
|
721
|
+
width: 100%;
|
|
722
|
+
height: 120px;
|
|
723
|
+
object-fit: cover;
|
|
724
|
+
padding: 16px 16px 4px 16px;
|
|
725
|
+
box-sizing: border-box;
|
|
726
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
751
727
|
}
|
|
752
728
|
|
|
753
729
|
.service-card:hover {
|
|
754
|
-
transform: translateY(-
|
|
730
|
+
transform: translateY(-6px);
|
|
731
|
+
box-shadow: 0 12px 28px rgba(0, 91, 187, 0.12);
|
|
732
|
+
border-color: rgba(0, 91, 187, 0.15);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.service-card:hover img {
|
|
736
|
+
transform: translateY(-4px) scale(1.05);
|
|
755
737
|
}
|
|
756
738
|
|
|
757
739
|
.service-wave-drop {
|
|
@@ -771,35 +753,13 @@ body {
|
|
|
771
753
|
transition: transform 0.25s ease;
|
|
772
754
|
}
|
|
773
755
|
|
|
774
|
-
.service-banner {
|
|
775
|
-
width: 100%;
|
|
776
|
-
height: 150px;
|
|
777
|
-
object-fit: cover;
|
|
778
|
-
}
|
|
779
756
|
|
|
780
|
-
.service-icon-badge {
|
|
781
|
-
width: 60px;
|
|
782
|
-
height: 60px;
|
|
783
|
-
background: #ffffff;
|
|
784
|
-
border-radius: 50%;
|
|
785
|
-
position: absolute;
|
|
786
|
-
top: 120px;
|
|
787
|
-
left: 50%;
|
|
788
|
-
transform: translateX(-50%);
|
|
789
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
790
|
-
display: flex;
|
|
791
|
-
justify-content: center;
|
|
792
|
-
align-items: center;
|
|
793
|
-
}
|
|
794
757
|
|
|
795
|
-
.service-icon-badge img {
|
|
796
|
-
width: 32px;
|
|
797
|
-
height: 32px;
|
|
798
|
-
}
|
|
799
758
|
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
759
|
+
|
|
760
|
+
|
|
761
|
+
|
|
762
|
+
|
|
803
763
|
|
|
804
764
|
.view-all-btn {
|
|
805
765
|
background: #fff;
|
|
@@ -817,27 +777,19 @@ body {
|
|
|
817
777
|
}
|
|
818
778
|
|
|
819
779
|
/* Responsive */
|
|
820
|
-
@media (max-width: 992px) {
|
|
821
|
-
.services-grid {
|
|
822
|
-
grid-template-columns: repeat(2, 1fr);
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
780
|
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
grid-template-columns: 1fr;
|
|
829
|
-
}
|
|
830
|
-
}
|
|
781
|
+
|
|
782
|
+
|
|
831
783
|
|
|
832
784
|
/* SERVICE GRID WRAPPER */
|
|
833
|
-
.
|
|
785
|
+
.upyog-service-wrapper {
|
|
834
786
|
width: 100%;
|
|
835
787
|
padding: 40px 0;
|
|
836
788
|
background: #f7faff;
|
|
837
789
|
text-align: center;
|
|
838
790
|
}
|
|
839
791
|
|
|
840
|
-
.
|
|
792
|
+
.upyog-service-title {
|
|
841
793
|
font-size: 22px;
|
|
842
794
|
font-weight: 700;
|
|
843
795
|
color: #002b5c;
|
|
@@ -845,7 +797,7 @@ body {
|
|
|
845
797
|
}
|
|
846
798
|
|
|
847
799
|
/* GRID (4 per row like KSMART) */
|
|
848
|
-
.
|
|
800
|
+
.upyog-service-grid {
|
|
849
801
|
max-width: 90%;
|
|
850
802
|
margin: auto;
|
|
851
803
|
display: grid;
|
|
@@ -854,67 +806,34 @@ body {
|
|
|
854
806
|
}
|
|
855
807
|
|
|
856
808
|
/* Card */
|
|
857
|
-
.mcd-service-card {
|
|
858
|
-
background: #fff;
|
|
859
|
-
height: 70px;
|
|
860
|
-
border-radius: 10px;
|
|
861
|
-
display: flex;
|
|
862
|
-
align-items: center;
|
|
863
|
-
padding: 0 18px;
|
|
864
|
-
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
|
|
865
|
-
cursor: pointer;
|
|
866
|
-
transition: 0.25s ease;
|
|
867
|
-
}
|
|
868
809
|
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
|
|
872
|
-
}
|
|
810
|
+
|
|
811
|
+
|
|
873
812
|
|
|
874
813
|
/* Left Icon */
|
|
875
|
-
|
|
876
|
-
width: 40px;
|
|
877
|
-
height: 40px;
|
|
878
|
-
background: #eef3ff;
|
|
879
|
-
border-radius: 8px;
|
|
880
|
-
display: flex;
|
|
881
|
-
align-items: center;
|
|
882
|
-
justify-content: center;
|
|
883
|
-
font-size: 18px;
|
|
884
|
-
margin-right: 14px;
|
|
885
|
-
}
|
|
814
|
+
|
|
886
815
|
|
|
887
816
|
/* Text */
|
|
888
|
-
|
|
889
|
-
flex: 1;
|
|
890
|
-
text-align: left;
|
|
891
|
-
font-size: 15px;
|
|
892
|
-
font-weight: 600;
|
|
893
|
-
color: #2d3b55;
|
|
894
|
-
}
|
|
817
|
+
|
|
895
818
|
|
|
896
819
|
/* Arrow */
|
|
897
|
-
|
|
898
|
-
font-size: 22px;
|
|
899
|
-
font-weight: 700;
|
|
900
|
-
color: #4e5b78;
|
|
901
|
-
}
|
|
820
|
+
|
|
902
821
|
|
|
903
822
|
/* Responsive */
|
|
904
823
|
@media (max-width: 1024px) {
|
|
905
|
-
.
|
|
824
|
+
.upyog-service-grid {
|
|
906
825
|
grid-template-columns: repeat(3, 1fr);
|
|
907
826
|
}
|
|
908
827
|
}
|
|
909
828
|
|
|
910
829
|
@media (max-width: 768px) {
|
|
911
|
-
.
|
|
830
|
+
.upyog-service-grid {
|
|
912
831
|
grid-template-columns: repeat(2, 1fr);
|
|
913
832
|
}
|
|
914
833
|
}
|
|
915
834
|
|
|
916
835
|
@media (max-width: 500px) {
|
|
917
|
-
.
|
|
836
|
+
.upyog-service-grid {
|
|
918
837
|
grid-template-columns: 1fr;
|
|
919
838
|
}
|
|
920
839
|
}
|
|
@@ -1244,116 +1163,251 @@ body {
|
|
|
1244
1163
|
MAIN FOOTER WRAPPER (KSMART STYLE)
|
|
1245
1164
|
================================ */
|
|
1246
1165
|
.footer-wrapper {
|
|
1247
|
-
background: #
|
|
1248
|
-
color: #
|
|
1249
|
-
padding: 0 0 15px;
|
|
1166
|
+
background: #061224; /* Deeper, more premium navy */
|
|
1167
|
+
color: #e2e8f0;
|
|
1250
1168
|
font-family: "Inter", sans-serif;
|
|
1169
|
+
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
1251
1170
|
}
|
|
1252
1171
|
|
|
1253
1172
|
/* ================================
|
|
1254
1173
|
TOP LOGO STRIP
|
|
1255
1174
|
================================ */
|
|
1256
|
-
/* White background strip behind logos */
|
|
1257
1175
|
.footer-logos {
|
|
1258
1176
|
width: 100%;
|
|
1259
|
-
background: #ffffff;
|
|
1260
|
-
padding:
|
|
1177
|
+
background: #ffffff;
|
|
1178
|
+
padding: 20px 0;
|
|
1261
1179
|
display: flex;
|
|
1262
1180
|
justify-content: center;
|
|
1263
1181
|
align-items: center;
|
|
1264
|
-
gap:
|
|
1265
|
-
border-bottom: 1px solid #
|
|
1182
|
+
gap: 80px;
|
|
1183
|
+
border-bottom: 1px solid #f1f5f9;
|
|
1184
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
|
|
1266
1185
|
}
|
|
1267
1186
|
|
|
1268
|
-
/* Ensure logos look clean */
|
|
1269
1187
|
.footer-logos img {
|
|
1270
|
-
height:
|
|
1188
|
+
height: 65px;
|
|
1271
1189
|
object-fit: contain;
|
|
1272
|
-
opacity: 1;
|
|
1273
1190
|
}
|
|
1274
1191
|
|
|
1275
1192
|
/* ================================
|
|
1276
|
-
MAIN GRID (
|
|
1193
|
+
MAIN GRID (4 COLUMNS)
|
|
1277
1194
|
================================ */
|
|
1278
1195
|
.footer-grid {
|
|
1279
1196
|
display: grid;
|
|
1280
|
-
grid-template-columns: 1.
|
|
1281
|
-
|
|
1282
|
-
|
|
1197
|
+
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
|
1198
|
+
max-width: 1200px;
|
|
1199
|
+
margin: 0 auto;
|
|
1200
|
+
padding: 50px 24px 20px 24px;
|
|
1201
|
+
gap: 48px;
|
|
1283
1202
|
}
|
|
1284
1203
|
|
|
1285
1204
|
.footer-grid h3 {
|
|
1286
|
-
font-size:
|
|
1287
|
-
|
|
1205
|
+
font-size: 15px;
|
|
1206
|
+
color: #ffffff;
|
|
1207
|
+
margin-bottom: 24px;
|
|
1288
1208
|
font-weight: 600;
|
|
1209
|
+
letter-spacing: 0.5px;
|
|
1210
|
+
text-transform: uppercase;
|
|
1211
|
+
position: relative;
|
|
1289
1212
|
}
|
|
1290
1213
|
|
|
1291
|
-
.footer-grid
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1214
|
+
.footer-grid h3::after {
|
|
1215
|
+
content: "";
|
|
1216
|
+
display: block;
|
|
1217
|
+
width: 28px;
|
|
1218
|
+
height: 2.5px;
|
|
1219
|
+
background-color: #3b82f6;
|
|
1220
|
+
margin-top: 8px;
|
|
1221
|
+
border-radius: 4px;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
/* First column address with icon */
|
|
1225
|
+
.footer-col-contact {
|
|
1226
|
+
display: flex;
|
|
1227
|
+
flex-direction: column;
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
.contact-address-block {
|
|
1231
|
+
display: flex;
|
|
1232
|
+
align-items: flex-start;
|
|
1233
|
+
gap: 12px;
|
|
1234
|
+
margin-top: 8px;
|
|
1235
|
+
}
|
|
1236
|
+
|
|
1237
|
+
.contact-icon-wrapper {
|
|
1238
|
+
color: #3b82f6; /* Modern Blue Accent */
|
|
1239
|
+
margin-top: 4px;
|
|
1240
|
+
flex-shrink: 0;
|
|
1241
|
+
display: inline-flex;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
.contact-text-lines {
|
|
1245
|
+
color: #cbd5e1;
|
|
1246
|
+
font-size: 13.5px;
|
|
1247
|
+
line-height: 1.7;
|
|
1248
|
+
margin: 0 !important;
|
|
1249
|
+
cursor: default;
|
|
1250
|
+
opacity: 0.9;
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
/* Link items with icons */
|
|
1254
|
+
.footer-link-item {
|
|
1255
|
+
display: flex;
|
|
1256
|
+
align-items: center;
|
|
1257
|
+
gap: 10px;
|
|
1258
|
+
margin: 12px 0;
|
|
1259
|
+
cursor: pointer;
|
|
1260
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1261
|
+
color: #94a3b8;
|
|
1262
|
+
opacity: 0.85;
|
|
1263
|
+
width: fit-content;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.link-icon-wrapper {
|
|
1267
|
+
color: #475569;
|
|
1268
|
+
display: inline-flex;
|
|
1269
|
+
align-items: center;
|
|
1270
|
+
justify-content: center;
|
|
1271
|
+
transition: color 0.25s ease;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
.footer-link-item:hover {
|
|
1275
|
+
color: #3b82f6 !important;
|
|
1276
|
+
transform: translateX(4px);
|
|
1277
|
+
opacity: 1;
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
.footer-link-item:hover .link-icon-wrapper {
|
|
1281
|
+
color: #3b82f6;
|
|
1282
|
+
}
|
|
1283
|
+
|
|
1284
|
+
.footer-link-item .link-text {
|
|
1285
|
+
font-size: 13.5px;
|
|
1286
|
+
line-height: 1.6;
|
|
1296
1287
|
}
|
|
1297
1288
|
|
|
1298
1289
|
/* ================================
|
|
1299
|
-
CONTACT BUTTON
|
|
1290
|
+
CONTACT BUTTON
|
|
1300
1291
|
================================ */
|
|
1301
|
-
.contact-btn {
|
|
1302
|
-
margin-top:
|
|
1303
|
-
background: transparent;
|
|
1304
|
-
border:
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
border-radius: 20px;
|
|
1292
|
+
.footer-grid .contact-btn {
|
|
1293
|
+
margin-top: 20px;
|
|
1294
|
+
background: transparent !important;
|
|
1295
|
+
border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
|
|
1296
|
+
padding: 8px 24px !important;
|
|
1297
|
+
border-radius: 50px !important;
|
|
1308
1298
|
cursor: pointer;
|
|
1309
|
-
transition: 0.3s;
|
|
1299
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1300
|
+
box-shadow: none !important;
|
|
1301
|
+
display: inline-flex;
|
|
1302
|
+
align-items: center;
|
|
1303
|
+
justify-content: center;
|
|
1304
|
+
align-self: flex-start;
|
|
1310
1305
|
}
|
|
1311
1306
|
|
|
1312
|
-
.contact-btn
|
|
1313
|
-
|
|
1314
|
-
|
|
1307
|
+
.footer-grid .contact-btn header {
|
|
1308
|
+
color: #ffffff !important;
|
|
1309
|
+
font-weight: 600 !important;
|
|
1310
|
+
font-size: 13.5px !important;
|
|
1311
|
+
line-height: 1 !important;
|
|
1312
|
+
transition: color 0.3s ease;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
.footer-grid .contact-btn:hover {
|
|
1316
|
+
background: #ffffff !important;
|
|
1317
|
+
border-color: #ffffff !important;
|
|
1318
|
+
transform: translateY(-2px);
|
|
1319
|
+
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
.footer-grid .contact-btn:hover header {
|
|
1323
|
+
color: #061224 !important;
|
|
1315
1324
|
}
|
|
1316
1325
|
|
|
1317
1326
|
/* ================================
|
|
1318
|
-
FEEDBACK BOX
|
|
1327
|
+
FEEDBACK BOX
|
|
1319
1328
|
================================ */
|
|
1320
|
-
.feedback-btn {
|
|
1321
|
-
margin-top:
|
|
1322
|
-
background: #ffffff;
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
border
|
|
1326
|
-
border: none;
|
|
1329
|
+
.footer-grid .feedback-btn {
|
|
1330
|
+
margin-top: 14px;
|
|
1331
|
+
background: #ffffff !important;
|
|
1332
|
+
padding: 8px 24px !important;
|
|
1333
|
+
border-radius: 50px !important;
|
|
1334
|
+
border: none !important;
|
|
1327
1335
|
cursor: pointer;
|
|
1328
|
-
transition: 0.3s
|
|
1336
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1337
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
|
1338
|
+
display: inline-flex;
|
|
1339
|
+
align-items: center;
|
|
1340
|
+
justify-content: center;
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
.footer-grid .feedback-btn header {
|
|
1344
|
+
color: #061224 !important;
|
|
1345
|
+
font-weight: 600 !important;
|
|
1346
|
+
font-size: 13.5px !important;
|
|
1347
|
+
line-height: 1 !important;
|
|
1329
1348
|
}
|
|
1330
1349
|
|
|
1331
|
-
.feedback-btn:hover {
|
|
1332
|
-
background: #
|
|
1350
|
+
.footer-grid .feedback-btn:hover {
|
|
1351
|
+
background: #eff6ff !important;
|
|
1352
|
+
transform: translateY(-2px);
|
|
1353
|
+
box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1) !important;
|
|
1333
1354
|
}
|
|
1334
1355
|
|
|
1335
1356
|
/* ================================
|
|
1336
|
-
APP STORE BUTTONS
|
|
1357
|
+
APP STORE BUTTONS
|
|
1337
1358
|
================================ */
|
|
1338
|
-
|
|
1339
|
-
display: block;
|
|
1340
|
-
height: 45px;
|
|
1341
|
-
margin-top: 12px;
|
|
1342
|
-
}
|
|
1359
|
+
|
|
1343
1360
|
|
|
1344
1361
|
/* ================================
|
|
1345
|
-
DIVIDER
|
|
1362
|
+
DIVIDER & BOTTOM
|
|
1346
1363
|
================================ */
|
|
1347
1364
|
.footer-bottom {
|
|
1348
|
-
|
|
1349
|
-
|
|
1365
|
+
padding: 0 24px 20px;
|
|
1366
|
+
max-width: 1200px;
|
|
1367
|
+
margin: 0 auto;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.footer-bottom-content {
|
|
1371
|
+
display: flex;
|
|
1372
|
+
justify-content: space-between;
|
|
1373
|
+
align-items: center;
|
|
1374
|
+
flex-wrap: wrap;
|
|
1375
|
+
gap: 20px;
|
|
1350
1376
|
}
|
|
1351
1377
|
|
|
1352
1378
|
.footer-bottom .copyright {
|
|
1353
|
-
font-size:
|
|
1379
|
+
font-size: 13px;
|
|
1380
|
+
color: #64748b;
|
|
1354
1381
|
opacity: 0.9;
|
|
1355
1382
|
line-height: 1.6;
|
|
1356
|
-
|
|
1383
|
+
text-align: left;
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1386
|
+
.footer-social-icons {
|
|
1387
|
+
display: flex;
|
|
1388
|
+
align-items: center;
|
|
1389
|
+
gap: 16px;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
.social-icon-link {
|
|
1393
|
+
color: #94a3b8;
|
|
1394
|
+
background: rgba(255, 255, 255, 0.03);
|
|
1395
|
+
width: 38px;
|
|
1396
|
+
height: 38px;
|
|
1397
|
+
border-radius: 50%;
|
|
1398
|
+
display: flex;
|
|
1399
|
+
align-items: center;
|
|
1400
|
+
justify-content: center;
|
|
1401
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
1402
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
.social-icon-link:hover {
|
|
1406
|
+
color: #ffffff;
|
|
1407
|
+
background: #3b82f6;
|
|
1408
|
+
border-color: #3b82f6;
|
|
1409
|
+
transform: translateY(-3px);
|
|
1410
|
+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
1357
1411
|
}
|
|
1358
1412
|
|
|
1359
1413
|
/* Social Icons (If enabled later) */
|
|
@@ -1385,15 +1439,17 @@ body {
|
|
|
1385
1439
|
min-width: 260px;
|
|
1386
1440
|
border-radius: 20px;
|
|
1387
1441
|
text-align: center;
|
|
1388
|
-
box-shadow: 0px
|
|
1389
|
-
|
|
1442
|
+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
|
|
1443
|
+
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
1444
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1390
1445
|
overflow: hidden; /* so wave stays inside */
|
|
1391
1446
|
}
|
|
1392
1447
|
|
|
1393
1448
|
/* Hover effect */
|
|
1394
1449
|
.stats-card:hover {
|
|
1395
|
-
transform: translateY(-8px) scale(1.
|
|
1396
|
-
box-shadow: 0px 12px
|
|
1450
|
+
transform: translateY(-8px) scale(1.02);
|
|
1451
|
+
box-shadow: 0px 12px 28px rgba(0, 91, 187, 0.12);
|
|
1452
|
+
border-color: rgba(0, 91, 187, 0.15);
|
|
1397
1453
|
}
|
|
1398
1454
|
|
|
1399
1455
|
/* --------------------------- */
|
|
@@ -1401,26 +1457,27 @@ body {
|
|
|
1401
1457
|
/* --------------------------- */
|
|
1402
1458
|
|
|
1403
1459
|
.stats-value {
|
|
1404
|
-
font-size:
|
|
1460
|
+
font-size: 34px;
|
|
1405
1461
|
font-weight: 800;
|
|
1406
|
-
color: #
|
|
1462
|
+
color: #005bbb;
|
|
1407
1463
|
margin-bottom: 12px;
|
|
1408
1464
|
position: relative;
|
|
1409
1465
|
z-index: 3;
|
|
1466
|
+
letter-spacing: -0.5px;
|
|
1410
1467
|
}
|
|
1411
1468
|
|
|
1412
1469
|
.stats-title {
|
|
1413
1470
|
font-size: 18px;
|
|
1414
1471
|
font-weight: 700;
|
|
1415
|
-
color: #
|
|
1472
|
+
color: #0f172a;
|
|
1416
1473
|
margin-bottom: 10px;
|
|
1417
1474
|
position: relative;
|
|
1418
1475
|
z-index: 3;
|
|
1419
1476
|
}
|
|
1420
1477
|
|
|
1421
1478
|
.stats-desc {
|
|
1422
|
-
font-size:
|
|
1423
|
-
color: #
|
|
1479
|
+
font-size: 13.5px;
|
|
1480
|
+
color: #475569;
|
|
1424
1481
|
line-height: 1.5;
|
|
1425
1482
|
position: relative;
|
|
1426
1483
|
z-index: 3;
|
|
@@ -1437,9 +1494,9 @@ body {
|
|
|
1437
1494
|
left: -10%;
|
|
1438
1495
|
width: 150%;
|
|
1439
1496
|
height: 140px;
|
|
1440
|
-
background: linear-gradient(135deg, #
|
|
1497
|
+
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
|
|
1441
1498
|
border-radius: 40%;
|
|
1442
|
-
opacity: 0.
|
|
1499
|
+
opacity: 0.5;
|
|
1443
1500
|
transform: rotate(-4deg);
|
|
1444
1501
|
z-index: 1;
|
|
1445
1502
|
}
|
|
@@ -1451,9 +1508,9 @@ body {
|
|
|
1451
1508
|
right: -15%;
|
|
1452
1509
|
width: 170%;
|
|
1453
1510
|
height: 180px;
|
|
1454
|
-
background: linear-gradient(135deg, #
|
|
1511
|
+
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
1455
1512
|
border-radius: 45%;
|
|
1456
|
-
opacity: 0.
|
|
1513
|
+
opacity: 0.6;
|
|
1457
1514
|
transform: rotate(6deg);
|
|
1458
1515
|
z-index: 1;
|
|
1459
1516
|
}
|
|
@@ -1465,117 +1522,32 @@ body {
|
|
|
1465
1522
|
left: 12%;
|
|
1466
1523
|
width: 75%;
|
|
1467
1524
|
height: 60px;
|
|
1468
|
-
background: repeating-linear-gradient(90deg, rgba(
|
|
1469
|
-
opacity: 0.
|
|
1525
|
+
background: repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0px, rgba(14, 165, 233, 0.15) 2px, transparent 2px, transparent 10px);
|
|
1526
|
+
opacity: 0.4;
|
|
1470
1527
|
transform: skewX(-20deg);
|
|
1471
1528
|
z-index: 2;
|
|
1472
1529
|
}
|
|
1473
1530
|
|
|
1474
|
-
.pattern-soft-curves {
|
|
1475
|
-
position: relative;
|
|
1476
|
-
overflow: hidden;
|
|
1477
|
-
background: #ffffff;
|
|
1478
|
-
border-radius: 16px;
|
|
1479
|
-
}
|
|
1480
1531
|
|
|
1481
|
-
.pattern-soft-curves::before {
|
|
1482
|
-
content: "";
|
|
1483
|
-
position: absolute;
|
|
1484
|
-
width: 140%;
|
|
1485
|
-
height: 140%;
|
|
1486
|
-
top: -30%;
|
|
1487
|
-
left: -20%;
|
|
1488
|
-
background: radial-gradient(circle at 30% 30%, rgba(0, 160, 255, 0.18), transparent 60%);
|
|
1489
|
-
filter: blur(40px);
|
|
1490
|
-
}
|
|
1491
1532
|
|
|
1492
|
-
.pattern-soft-curves::after {
|
|
1493
|
-
content: "";
|
|
1494
|
-
position: absolute;
|
|
1495
|
-
width: 160%;
|
|
1496
|
-
height: 100%;
|
|
1497
|
-
bottom: -50%;
|
|
1498
|
-
left: -20%;
|
|
1499
|
-
background: radial-gradient(circle at 70% 80%, rgba(0, 90, 200, 0.18), transparent 70%);
|
|
1500
|
-
filter: blur(38px);
|
|
1501
|
-
}
|
|
1502
1533
|
|
|
1503
|
-
.pattern-sine-lines {
|
|
1504
|
-
position: relative;
|
|
1505
|
-
overflow: hidden;
|
|
1506
|
-
}
|
|
1507
1534
|
|
|
1508
|
-
.pattern-sine-lines::before {
|
|
1509
|
-
content: "";
|
|
1510
|
-
position: absolute;
|
|
1511
|
-
bottom: 20px;
|
|
1512
|
-
width: 100%;
|
|
1513
|
-
height: 40px;
|
|
1514
|
-
background: repeating-linear-gradient(90deg, rgba(0, 130, 200, 0.25) 0px, rgba(0, 130, 200, 0.25) 2px, transparent 2px, transparent 14px);
|
|
1515
|
-
transform: skewX(-20deg);
|
|
1516
|
-
opacity: 0.4;
|
|
1517
|
-
}
|
|
1518
|
-
.pattern-paper {
|
|
1519
|
-
position: relative;
|
|
1520
|
-
overflow: hidden;
|
|
1521
|
-
}
|
|
1522
1535
|
|
|
1523
|
-
.pattern-paper::before {
|
|
1524
|
-
content: "";
|
|
1525
|
-
position: absolute;
|
|
1526
|
-
width: 120%;
|
|
1527
|
-
height: 50%;
|
|
1528
|
-
bottom: 0;
|
|
1529
|
-
left: 0;
|
|
1530
|
-
background: linear-gradient(180deg, #dff1ff, #b6daf7);
|
|
1531
|
-
border-top-left-radius: 50% 40%;
|
|
1532
|
-
border-top-right-radius: 50% 40%;
|
|
1533
|
-
}
|
|
1534
1536
|
|
|
1535
|
-
.pattern-paper::after {
|
|
1536
|
-
content: "";
|
|
1537
|
-
position: absolute;
|
|
1538
|
-
width: 140%;
|
|
1539
|
-
height: 65%;
|
|
1540
|
-
bottom: -20%;
|
|
1541
|
-
left: -10%;
|
|
1542
|
-
background: linear-gradient(180deg, #9bccff, #4f8fe3);
|
|
1543
|
-
border-top-left-radius: 60% 40%;
|
|
1544
|
-
border-top-right-radius: 60% 40%;
|
|
1545
|
-
opacity: 0.6;
|
|
1546
|
-
}
|
|
1547
|
-
.pattern-blob {
|
|
1548
|
-
position: relative;
|
|
1549
|
-
overflow: hidden;
|
|
1550
|
-
}
|
|
1551
1537
|
|
|
1552
|
-
.pattern-blob::before {
|
|
1553
|
-
content: "";
|
|
1554
|
-
position: absolute;
|
|
1555
|
-
width: 130%;
|
|
1556
|
-
height: 130%;
|
|
1557
|
-
top: -20%;
|
|
1558
|
-
left: -10%;
|
|
1559
|
-
background: radial-gradient(circle, rgba(0, 122, 255, 0.25) 0%, rgba(0, 122, 255, 0.05) 70%, transparent 100%);
|
|
1560
|
-
border-radius: 40%;
|
|
1561
|
-
transform: rotate(20deg);
|
|
1562
|
-
}
|
|
1563
|
-
.card-diagonal {
|
|
1564
|
-
position: relative;
|
|
1565
|
-
overflow: hidden;
|
|
1566
|
-
}
|
|
1567
1538
|
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1539
|
+
|
|
1540
|
+
|
|
1541
|
+
|
|
1542
|
+
|
|
1543
|
+
|
|
1544
|
+
|
|
1545
|
+
|
|
1546
|
+
|
|
1547
|
+
|
|
1548
|
+
|
|
1549
|
+
|
|
1550
|
+
|
|
1579
1551
|
.card-double-wave {
|
|
1580
1552
|
position: relative;
|
|
1581
1553
|
overflow: hidden;
|
|
@@ -1604,151 +1576,48 @@ body {
|
|
|
1604
1576
|
border-radius: 50%;
|
|
1605
1577
|
opacity: 0.55;
|
|
1606
1578
|
}
|
|
1607
|
-
.card-grid {
|
|
1608
|
-
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
|
|
1609
|
-
linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
|
|
1610
|
-
background-size: 18px 18px;
|
|
1611
|
-
}
|
|
1612
1579
|
|
|
1613
|
-
.card-soft-wave {
|
|
1614
|
-
position: relative;
|
|
1615
|
-
overflow: hidden;
|
|
1616
|
-
}
|
|
1617
1580
|
|
|
1618
|
-
.card-soft-wave::after {
|
|
1619
|
-
content: "";
|
|
1620
|
-
position: absolute;
|
|
1621
|
-
bottom: -15px;
|
|
1622
|
-
left: 0;
|
|
1623
|
-
width: 120%;
|
|
1624
|
-
height: 80px;
|
|
1625
|
-
background: linear-gradient(135deg, #d7eaff, #b6d7ff);
|
|
1626
|
-
border-radius: 50%;
|
|
1627
|
-
opacity: 0.8;
|
|
1628
|
-
}
|
|
1629
1581
|
|
|
1630
|
-
.card-glass {
|
|
1631
|
-
background: rgba(255, 255, 255, 0.25);
|
|
1632
|
-
backdrop-filter: blur(10px);
|
|
1633
|
-
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
1634
|
-
border-radius: 14px;
|
|
1635
|
-
}
|
|
1636
1582
|
|
|
1637
|
-
.card-stripes {
|
|
1638
|
-
background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 8px);
|
|
1639
|
-
}
|
|
1640
1583
|
|
|
1641
|
-
.card-shine {
|
|
1642
|
-
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
|
|
1643
|
-
}
|
|
1644
1584
|
|
|
1645
|
-
.card-dots {
|
|
1646
|
-
background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
|
1647
|
-
background-size: 10px 10px;
|
|
1648
|
-
}
|
|
1649
1585
|
|
|
1650
|
-
.card-gradient-border {
|
|
1651
|
-
position: relative;
|
|
1652
|
-
background: white;
|
|
1653
|
-
border-radius: 12px;
|
|
1654
|
-
}
|
|
1655
1586
|
|
|
1656
|
-
.card-gradient-border::before {
|
|
1657
|
-
content: "";
|
|
1658
|
-
position: absolute;
|
|
1659
|
-
inset: -2px;
|
|
1660
|
-
background: linear-gradient(135deg, #004aad, #1ec0ff);
|
|
1661
|
-
border-radius: inherit;
|
|
1662
|
-
z-index: -1;
|
|
1663
|
-
}
|
|
1664
1587
|
|
|
1665
|
-
.card-mini-wave::before {
|
|
1666
|
-
content: "";
|
|
1667
|
-
position: absolute;
|
|
1668
|
-
top: -10px;
|
|
1669
|
-
left: 0;
|
|
1670
|
-
width: 120%;
|
|
1671
|
-
height: 40px;
|
|
1672
|
-
background: radial-gradient(circle at 50% 100%, #0077d8 40%, transparent 41%);
|
|
1673
|
-
}
|
|
1674
1588
|
|
|
1675
|
-
.card-diagonal {
|
|
1676
|
-
background: linear-gradient(135deg, #ffffff 50%, #e7f3ff 50%);
|
|
1677
|
-
}
|
|
1678
1589
|
|
|
1679
|
-
.card-inner-shadow {
|
|
1680
|
-
background: #fff;
|
|
1681
|
-
box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.07);
|
|
1682
|
-
}
|
|
1683
1590
|
|
|
1684
|
-
.pattern-mesh {
|
|
1685
|
-
background: radial-gradient(circle at 30% 40%, #d8f1ff, transparent 60%), radial-gradient(circle at 80% 80%, #c4e4ff, transparent 60%);
|
|
1686
|
-
}
|
|
1687
1591
|
|
|
1688
|
-
.pattern-waves {
|
|
1689
|
-
position: relative;
|
|
1690
|
-
background: #e9f6ff;
|
|
1691
|
-
overflow: hidden;
|
|
1692
|
-
}
|
|
1693
1592
|
|
|
1694
|
-
.pattern-waves::before {
|
|
1695
|
-
content: "";
|
|
1696
|
-
position: absolute;
|
|
1697
|
-
bottom: -20px;
|
|
1698
|
-
left: -10%;
|
|
1699
|
-
width: 100%;
|
|
1700
|
-
height: 120px;
|
|
1701
|
-
background: #8cc9ff;
|
|
1702
|
-
border-radius: 40%;
|
|
1703
|
-
opacity: 0.45;
|
|
1704
|
-
}
|
|
1705
1593
|
|
|
1706
|
-
.pattern-waves::after {
|
|
1707
|
-
content: "";
|
|
1708
|
-
position: absolute;
|
|
1709
|
-
bottom: -50px;
|
|
1710
|
-
left: -20%;
|
|
1711
|
-
width: 160%;
|
|
1712
|
-
height: 140px;
|
|
1713
|
-
background: #3b82f6;
|
|
1714
|
-
border-radius: 45%;
|
|
1715
|
-
opacity: 0.6;
|
|
1716
|
-
}
|
|
1717
1594
|
|
|
1718
|
-
.pattern-stripes {
|
|
1719
|
-
background: repeating-linear-gradient(135deg, rgba(0, 42, 97, 0.06) 0px, rgba(0, 42, 97, 0.06) 3px, transparent 3px, transparent 12px);
|
|
1720
|
-
}
|
|
1721
1595
|
|
|
1722
|
-
.pattern-microlines {
|
|
1723
|
-
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 8px);
|
|
1724
|
-
}
|
|
1725
1596
|
|
|
1726
|
-
.wave-animated {
|
|
1727
|
-
position: relative;
|
|
1728
|
-
overflow: hidden;
|
|
1729
|
-
}
|
|
1730
|
-
.wave-animated::before,
|
|
1731
|
-
.wave-animated::after {
|
|
1732
|
-
content: "";
|
|
1733
|
-
position: absolute;
|
|
1734
|
-
bottom: 0;
|
|
1735
|
-
left: -10%;
|
|
1736
|
-
width: 130%;
|
|
1737
|
-
height: 120px;
|
|
1738
|
-
background: var(--mcd-blue-2);
|
|
1739
|
-
opacity: 0.18;
|
|
1740
|
-
border-radius: 50%;
|
|
1741
|
-
animation: waveMove 6s ease-in-out infinite;
|
|
1742
|
-
}
|
|
1743
1597
|
|
|
1744
|
-
.wave-animated::after {
|
|
1745
|
-
background: var(--mcd-blue-3);
|
|
1746
|
-
opacity: 0.25;
|
|
1747
|
-
animation-duration: 9s;
|
|
1748
|
-
animation-delay: -1.5s;
|
|
1749
|
-
}
|
|
1750
1598
|
|
|
1751
|
-
|
|
1599
|
+
|
|
1600
|
+
|
|
1601
|
+
|
|
1602
|
+
|
|
1603
|
+
|
|
1604
|
+
|
|
1605
|
+
|
|
1606
|
+
|
|
1607
|
+
|
|
1608
|
+
|
|
1609
|
+
|
|
1610
|
+
|
|
1611
|
+
|
|
1612
|
+
|
|
1613
|
+
|
|
1614
|
+
|
|
1615
|
+
|
|
1616
|
+
|
|
1617
|
+
|
|
1618
|
+
|
|
1619
|
+
|
|
1620
|
+
@keyframes waveMove{
|
|
1752
1621
|
0% {
|
|
1753
1622
|
transform: translateX(0) rotate(0deg);
|
|
1754
1623
|
}
|
|
@@ -1759,136 +1628,73 @@ body {
|
|
|
1759
1628
|
transform: translateX(0) rotate(0deg);
|
|
1760
1629
|
}
|
|
1761
1630
|
}
|
|
1762
|
-
.service-card-title {
|
|
1763
|
-
padding-bottom: 6vh;
|
|
1764
|
-
}
|
|
1765
1631
|
|
|
1766
1632
|
.service-title {
|
|
1767
1633
|
position: absolute;
|
|
1768
|
-
bottom:
|
|
1769
|
-
left:
|
|
1770
|
-
|
|
1771
|
-
color: #
|
|
1772
|
-
font-weight:
|
|
1773
|
-
font-size:
|
|
1634
|
+
bottom: 16px;
|
|
1635
|
+
left: 10px;
|
|
1636
|
+
right: 10px;
|
|
1637
|
+
color: #0f2942;
|
|
1638
|
+
font-weight: 700;
|
|
1639
|
+
font-size: 14.5px;
|
|
1640
|
+
text-align: center;
|
|
1641
|
+
z-index: 5;
|
|
1642
|
+
line-height: 1.3;
|
|
1643
|
+
transition: color 0.25s ease;
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1646
|
+
.service-card:hover .service-title {
|
|
1647
|
+
color: #005bbb;
|
|
1774
1648
|
}
|
|
1775
1649
|
|
|
1776
1650
|
.playlist-btn {
|
|
1777
|
-
display: flex;
|
|
1651
|
+
display: inline-flex;
|
|
1778
1652
|
align-items: center;
|
|
1779
1653
|
justify-content: center;
|
|
1780
1654
|
gap: 10px;
|
|
1781
|
-
|
|
1782
1655
|
margin: 30px auto 0 auto;
|
|
1783
|
-
padding: 12px
|
|
1784
|
-
|
|
1656
|
+
padding: 12px 30px;
|
|
1785
1657
|
width: fit-content;
|
|
1786
|
-
background:
|
|
1787
|
-
color: #
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
font-size: 16px;
|
|
1658
|
+
background: linear-gradient(135deg,#005bbb,#003c8f);
|
|
1659
|
+
color: #ffffff !important;
|
|
1660
|
+
text-decoration: none !important;
|
|
1661
|
+
font-size: 15px;
|
|
1791
1662
|
font-weight: 600;
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
transition: 0.3s ease;
|
|
1663
|
+
border-radius: 50px;
|
|
1664
|
+
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
|
|
1665
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1797
1666
|
}
|
|
1798
1667
|
|
|
1799
1668
|
.playlist-btn:hover {
|
|
1800
|
-
background: #
|
|
1669
|
+
background: #dc2626;
|
|
1801
1670
|
transform: translateY(-2px);
|
|
1671
|
+
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
|
|
1802
1672
|
}
|
|
1803
1673
|
|
|
1804
1674
|
.yt-icon {
|
|
1805
|
-
width:
|
|
1806
|
-
height:
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
.playlist-btn-outline {
|
|
1810
|
-
display: flex;
|
|
1811
|
-
align-items: center;
|
|
1812
|
-
justify-content: center;
|
|
1813
|
-
gap: 10px;
|
|
1814
|
-
|
|
1815
|
-
margin: 30px auto 0;
|
|
1816
|
-
padding: 12px 28px;
|
|
1817
|
-
|
|
1818
|
-
background: #ffffff;
|
|
1819
|
-
color: #0057c2;
|
|
1820
|
-
border: 2px solid #0057c2;
|
|
1821
|
-
|
|
1822
|
-
border-radius: 30px;
|
|
1823
|
-
font-size: 16px;
|
|
1824
|
-
font-weight: 600;
|
|
1825
|
-
text-decoration: none;
|
|
1826
|
-
|
|
1827
|
-
transition: 0.3s ease;
|
|
1828
|
-
}
|
|
1829
|
-
|
|
1830
|
-
.playlist-btn-outline:hover {
|
|
1831
|
-
background: #0057c2;
|
|
1832
|
-
color: #ffffff;
|
|
1675
|
+
width: 20px;
|
|
1676
|
+
height: 20px;
|
|
1677
|
+
filter: invert(1);
|
|
1833
1678
|
}
|
|
1834
1679
|
|
|
1835
|
-
.playlist-btn-red {
|
|
1836
|
-
display: flex;
|
|
1837
|
-
align-items: center;
|
|
1838
|
-
justify-content: center;
|
|
1839
|
-
gap: 10px;
|
|
1840
1680
|
|
|
1841
|
-
margin: 30px auto 0;
|
|
1842
|
-
padding: 12px 28px;
|
|
1843
1681
|
|
|
1844
|
-
background: #ff0000;
|
|
1845
|
-
color: #ffffff;
|
|
1846
|
-
border-radius: 30px;
|
|
1847
1682
|
|
|
1848
|
-
font-size: 16px;
|
|
1849
|
-
font-weight: 600;
|
|
1850
|
-
text-decoration: none;
|
|
1851
1683
|
|
|
1852
|
-
box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
|
|
1853
|
-
transition: 0.3s ease;
|
|
1854
|
-
}
|
|
1855
1684
|
|
|
1856
|
-
.playlist-btn-red:hover {
|
|
1857
|
-
background: #cc0000;
|
|
1858
|
-
transform: translateY(-2px);
|
|
1859
|
-
}
|
|
1860
1685
|
|
|
1861
|
-
.playlist-btn-gradient {
|
|
1862
|
-
display: flex;
|
|
1863
|
-
align-items: center;
|
|
1864
|
-
justify-content: center;
|
|
1865
|
-
gap: 10px;
|
|
1866
1686
|
|
|
1867
|
-
margin: 30px auto 0;
|
|
1868
|
-
padding: 12px 30px;
|
|
1869
1687
|
|
|
1870
|
-
background: linear-gradient(90deg, #003c8f, #0057c2);
|
|
1871
|
-
color: #ffffff;
|
|
1872
1688
|
|
|
1873
|
-
border-radius: 35px;
|
|
1874
|
-
font-size: 16px;
|
|
1875
|
-
font-weight: 600;
|
|
1876
|
-
text-decoration: none;
|
|
1877
1689
|
|
|
1878
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
1879
|
-
transition: 0.3s ease;
|
|
1880
|
-
}
|
|
1881
1690
|
|
|
1882
|
-
.playlist-btn-gradient:hover {
|
|
1883
|
-
background: linear-gradient(90deg, #002f70, #004eaf);
|
|
1884
|
-
transform: translateY(-3px);
|
|
1885
|
-
}
|
|
1886
1691
|
|
|
1887
1692
|
.footer-separator {
|
|
1888
|
-
width:
|
|
1693
|
+
width: 100%;
|
|
1694
|
+
max-width: 1200px;
|
|
1889
1695
|
height: 1px;
|
|
1890
|
-
background-color: rgba(255, 255, 255, 0.
|
|
1891
|
-
margin:
|
|
1696
|
+
background-color: rgba(255, 255, 255, 0.08); /* soft white line */
|
|
1697
|
+
margin: 40px auto 24px auto;
|
|
1892
1698
|
border: none;
|
|
1893
1699
|
}
|
|
1894
1700
|
|
|
@@ -1920,369 +1726,674 @@ body {
|
|
|
1920
1726
|
background: #f5f5f5;
|
|
1921
1727
|
}
|
|
1922
1728
|
|
|
1923
|
-
.djb-contact-wrapper {
|
|
1924
|
-
padding: 60px 80px;
|
|
1925
|
-
background: #f8f9fb;
|
|
1926
|
-
}
|
|
1927
1729
|
|
|
1928
|
-
.djb-contact-title {
|
|
1929
|
-
text-align: center;
|
|
1930
|
-
font-size: 32px;
|
|
1931
|
-
margin-bottom: 40px;
|
|
1932
|
-
}
|
|
1933
1730
|
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1731
|
+
|
|
1732
|
+
|
|
1733
|
+
|
|
1937
1734
|
|
|
1938
1735
|
/* GRID */
|
|
1939
|
-
|
|
1940
|
-
display: grid;
|
|
1941
|
-
grid-template-columns: 1fr 1fr;
|
|
1942
|
-
gap: 30px;
|
|
1943
|
-
}
|
|
1736
|
+
|
|
1944
1737
|
|
|
1945
1738
|
/* LEFT CARD */
|
|
1946
|
-
.djb-contact-info {
|
|
1947
|
-
background: #fff;
|
|
1948
|
-
padding: 30px;
|
|
1949
|
-
border-radius: 10px;
|
|
1950
|
-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
1951
|
-
}
|
|
1952
1739
|
|
|
1953
|
-
.info-item {
|
|
1954
|
-
display: flex;
|
|
1955
|
-
gap: 14px;
|
|
1956
|
-
margin-bottom: 20px;
|
|
1957
|
-
}
|
|
1958
1740
|
|
|
1959
|
-
.info-item .icon {
|
|
1960
|
-
width: 42px;
|
|
1961
|
-
height: 42px;
|
|
1962
|
-
border-radius: 50%;
|
|
1963
|
-
background: #eaf2fb;
|
|
1964
|
-
display: flex;
|
|
1965
|
-
align-items: center;
|
|
1966
|
-
justify-content: center;
|
|
1967
|
-
font-size: 18px;
|
|
1968
|
-
}
|
|
1969
1741
|
|
|
1970
|
-
.info-item h4 {
|
|
1971
|
-
margin: 0;
|
|
1972
|
-
font-size: 16px;
|
|
1973
|
-
}
|
|
1974
1742
|
|
|
1975
|
-
.info-item p {
|
|
1976
|
-
margin: 4px 0 0;
|
|
1977
|
-
color: #555;
|
|
1978
|
-
font-size: 14px;
|
|
1979
|
-
}
|
|
1980
1743
|
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1744
|
+
|
|
1745
|
+
|
|
1746
|
+
|
|
1747
|
+
|
|
1748
|
+
|
|
1749
|
+
|
|
1986
1750
|
|
|
1987
1751
|
/* RIGHT CARD */
|
|
1988
|
-
.djb-contact-form {
|
|
1989
|
-
background: #fff;
|
|
1990
|
-
padding: 30px;
|
|
1991
|
-
border-radius: 10px;
|
|
1992
|
-
}
|
|
1993
1752
|
|
|
1994
|
-
.djb-contact-form form {
|
|
1995
|
-
display: flex;
|
|
1996
|
-
flex-direction: column;
|
|
1997
|
-
gap: 16px;
|
|
1998
|
-
}
|
|
1999
1753
|
|
|
2000
|
-
.form-row {
|
|
2001
|
-
display: flex;
|
|
2002
|
-
gap: 16px;
|
|
2003
|
-
}
|
|
2004
1754
|
|
|
2005
|
-
.form-row input {
|
|
2006
|
-
flex: 1;
|
|
2007
|
-
}
|
|
2008
1755
|
|
|
2009
|
-
.djb-contact-form input,
|
|
2010
|
-
.djb-contact-form textarea {
|
|
2011
|
-
padding: 12px;
|
|
2012
|
-
border: 1px solid #dcdcdc;
|
|
2013
|
-
border-radius: 6px;
|
|
2014
|
-
font-size: 14px;
|
|
2015
|
-
}
|
|
2016
1756
|
|
|
2017
|
-
.djb-submit-btn {
|
|
2018
|
-
align-self: center;
|
|
2019
|
-
margin-top: 10px;
|
|
2020
|
-
padding: 10px 28px;
|
|
2021
|
-
background: #0b5cab;
|
|
2022
|
-
color: #fff;
|
|
2023
|
-
border: none;
|
|
2024
|
-
border-radius: 22px;
|
|
2025
|
-
cursor: pointer;
|
|
2026
|
-
font-size: 14px;
|
|
2027
|
-
}
|
|
2028
1757
|
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
1758
|
+
|
|
1759
|
+
|
|
1760
|
+
|
|
1761
|
+
|
|
1762
|
+
|
|
1763
|
+
|
|
1764
|
+
|
|
2032
1765
|
|
|
2033
1766
|
/* RESPONSIVE */
|
|
2034
|
-
@media (max-width: 900px) {
|
|
2035
|
-
.djb-contact-grid {
|
|
2036
|
-
grid-template-columns: 1fr;
|
|
2037
|
-
}
|
|
2038
1767
|
|
|
2039
|
-
.djb-contact-wrapper {
|
|
2040
|
-
padding: 40px 20px;
|
|
2041
|
-
}
|
|
2042
|
-
}
|
|
2043
1768
|
|
|
2044
1769
|
/* =============================== */
|
|
2045
1770
|
/* Legacy DJB Contact Section */
|
|
2046
1771
|
/* =============================== */
|
|
2047
1772
|
|
|
2048
|
-
.djb-legacy-contact {
|
|
2049
|
-
background: #ffffff;
|
|
2050
|
-
padding: 40px 80px;
|
|
2051
|
-
}
|
|
2052
1773
|
|
|
2053
|
-
.legacy-container {
|
|
2054
|
-
max-width: 1100px;
|
|
2055
|
-
margin: 0 auto;
|
|
2056
|
-
font-size: 14px;
|
|
2057
|
-
color: #111;
|
|
2058
|
-
}
|
|
2059
1774
|
|
|
2060
|
-
.legacy-address {
|
|
2061
|
-
margin-bottom: 20px;
|
|
2062
|
-
line-height: 1.6;
|
|
2063
|
-
}
|
|
2064
1775
|
|
|
2065
|
-
.djb-legacy-contact h4 {
|
|
2066
|
-
margin: 22px 0 12px;
|
|
2067
|
-
font-size: 15px;
|
|
2068
|
-
font-weight: 600;
|
|
2069
|
-
}
|
|
2070
1776
|
|
|
2071
|
-
.legacy-list {
|
|
2072
|
-
list-style: none;
|
|
2073
|
-
padding: 0;
|
|
2074
|
-
margin: 0;
|
|
2075
|
-
padding-left: 20px;
|
|
2076
|
-
line-height: 1.7;
|
|
2077
|
-
}
|
|
2078
1777
|
|
|
2079
|
-
.legacy-list li {
|
|
2080
|
-
display: flex;
|
|
2081
|
-
align-items: center;
|
|
2082
|
-
gap: 8px;
|
|
2083
|
-
margin-bottom: 10px;
|
|
2084
|
-
line-height: 1.5;
|
|
2085
|
-
}
|
|
2086
1778
|
|
|
2087
|
-
.legacy-list svg {
|
|
2088
|
-
flex-shrink: 0;
|
|
2089
|
-
}
|
|
2090
1779
|
|
|
2091
|
-
.legacy-links a {
|
|
2092
|
-
color: #0b5cab;
|
|
2093
|
-
font-weight: 500;
|
|
2094
|
-
text-decoration: none;
|
|
2095
|
-
}
|
|
2096
1780
|
|
|
2097
|
-
.legacy-links a:hover {
|
|
2098
|
-
text-decoration: underline;
|
|
2099
|
-
}
|
|
2100
1781
|
|
|
2101
|
-
.new-tag {
|
|
2102
|
-
color: #d93025;
|
|
2103
|
-
font-weight: bold;
|
|
2104
|
-
font-size: 12px;
|
|
2105
|
-
margin-left: 6px;
|
|
2106
|
-
}
|
|
2107
|
-
.djb-two-column {
|
|
2108
|
-
display: grid;
|
|
2109
|
-
grid-template-columns: 1fr 1fr;
|
|
2110
|
-
gap: 30px;
|
|
2111
|
-
}
|
|
2112
1782
|
|
|
2113
|
-
.djb-contact-section {
|
|
2114
|
-
padding: 40px 80px;
|
|
2115
|
-
}
|
|
2116
1783
|
|
|
2117
|
-
|
|
2118
|
-
|
|
1784
|
+
|
|
1785
|
+
|
|
1786
|
+
|
|
1787
|
+
|
|
1788
|
+
|
|
1789
|
+
|
|
1790
|
+
|
|
1791
|
+
|
|
1792
|
+
|
|
1793
|
+
|
|
1794
|
+
/* ==========================================================================
|
|
1795
|
+
CONTACT US PAGE STYLES (HIGH-FIDELITY DESIGN SYSTEM)
|
|
1796
|
+
========================================================================== */
|
|
1797
|
+
|
|
1798
|
+
/* Hero Banner Section */
|
|
1799
|
+
.contact-hero-banner {
|
|
1800
|
+
position: relative;
|
|
1801
|
+
background: linear-gradient(135deg, #061224 0%, #0b5cab 100%);
|
|
1802
|
+
padding: 60px 40px;
|
|
1803
|
+
text-align: center;
|
|
1804
|
+
color: #ffffff;
|
|
1805
|
+
overflow: hidden;
|
|
2119
1806
|
}
|
|
2120
|
-
|
|
2121
|
-
|
|
1807
|
+
|
|
1808
|
+
.contact-hero-overlay {
|
|
1809
|
+
position: absolute;
|
|
1810
|
+
top: 0;
|
|
1811
|
+
left: 0;
|
|
1812
|
+
width: 100%;
|
|
1813
|
+
height: 100%;
|
|
1814
|
+
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 80%);
|
|
1815
|
+
pointer-events: none;
|
|
2122
1816
|
}
|
|
2123
1817
|
|
|
2124
|
-
.
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
1818
|
+
.contact-hero-content {
|
|
1819
|
+
position: relative;
|
|
1820
|
+
z-index: 2;
|
|
1821
|
+
max-width: 800px;
|
|
1822
|
+
margin: 0 auto;
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
.contact-hero-badge {
|
|
1826
|
+
display: inline-block;
|
|
1827
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1828
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
1829
|
+
padding: 6px 16px;
|
|
1830
|
+
border-radius: 50px;
|
|
1831
|
+
font-size: 13px;
|
|
1832
|
+
font-weight: 600;
|
|
1833
|
+
text-transform: uppercase;
|
|
1834
|
+
letter-spacing: 1px;
|
|
1835
|
+
color: #3b82f6;
|
|
1836
|
+
margin-bottom: 16px;
|
|
1837
|
+
}
|
|
1838
|
+
|
|
1839
|
+
.contact-hero-content h1 {
|
|
1840
|
+
font-size: 32px;
|
|
1841
|
+
font-weight: 700;
|
|
1842
|
+
margin: 0 0 12px;
|
|
1843
|
+
letter-spacing: -0.5px;
|
|
1844
|
+
line-height: 1.2;
|
|
1845
|
+
}
|
|
1846
|
+
|
|
1847
|
+
.contact-hero-content p {
|
|
1848
|
+
font-size: 15.5px;
|
|
1849
|
+
color: #94a3b8;
|
|
1850
|
+
line-height: 1.6;
|
|
1851
|
+
margin: 0;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
/* Page Container */
|
|
1855
|
+
.contact-page-container {
|
|
1856
|
+
max-width: 1200px;
|
|
1857
|
+
margin: 0 auto;
|
|
1858
|
+
padding: 40px 24px 60px;
|
|
1859
|
+
display: flex;
|
|
1860
|
+
flex-direction: column;
|
|
1861
|
+
gap: 30px;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
/* Grid Layout */
|
|
1865
|
+
.contact-grid-row {
|
|
1866
|
+
display: grid;
|
|
1867
|
+
grid-template-columns: 1.1fr 0.9fr;
|
|
1868
|
+
gap: 30px;
|
|
1869
|
+
align-items: stretch;
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
.contact-row-bottom {
|
|
1873
|
+
grid-template-columns: 1.2fr 0.8fr;
|
|
1874
|
+
}
|
|
1875
|
+
|
|
1876
|
+
/* Base Card Styling */
|
|
1877
|
+
.contact-card {
|
|
1878
|
+
background: #ffffff;
|
|
1879
|
+
border-radius: 16px;
|
|
1880
|
+
border: 1px solid #f1f5f9;
|
|
1881
|
+
box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.06);
|
|
1882
|
+
padding: 32px;
|
|
1883
|
+
display: flex;
|
|
1884
|
+
flex-direction: column;
|
|
1885
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
.contact-card:hover {
|
|
1889
|
+
transform: translateY(-2px);
|
|
1890
|
+
box-shadow: 0 16px 40px -15px rgba(2, 12, 27, 0.1);
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
/* Card Header */
|
|
1894
|
+
.card-header {
|
|
1895
|
+
display: flex;
|
|
1896
|
+
align-items: center;
|
|
1897
|
+
gap: 12px;
|
|
1898
|
+
margin-bottom: 24px;
|
|
1899
|
+
border-bottom: 1px solid #f1f5f9;
|
|
1900
|
+
padding-bottom: 16px;
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
.card-header-icon {
|
|
1904
|
+
display: flex;
|
|
1905
|
+
align-items: center;
|
|
1906
|
+
justify-content: center;
|
|
1907
|
+
width: 38px;
|
|
1908
|
+
height: 38px;
|
|
1909
|
+
background: #eff6ff;
|
|
1910
|
+
color: #0b5cab;
|
|
2128
1911
|
border-radius: 10px;
|
|
2129
|
-
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
|
|
2130
1912
|
}
|
|
2131
1913
|
|
|
2132
|
-
.
|
|
1914
|
+
.card-header h3 {
|
|
2133
1915
|
font-size: 18px;
|
|
1916
|
+
font-weight: 700;
|
|
1917
|
+
color: #0f172a;
|
|
1918
|
+
margin: 0 !important;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
/* Helpline Card Specifics */
|
|
1922
|
+
.helpline-notice {
|
|
1923
|
+
font-size: 12.5px;
|
|
2134
1924
|
font-weight: 600;
|
|
2135
|
-
color: #
|
|
2136
|
-
|
|
2137
|
-
border-
|
|
2138
|
-
padding
|
|
1925
|
+
color: #475569;
|
|
1926
|
+
background: #f8fafc;
|
|
1927
|
+
border-left: 3.5px solid #0b5cab;
|
|
1928
|
+
padding: 12px 16px;
|
|
1929
|
+
border-radius: 4px 8px 8px 4px;
|
|
1930
|
+
line-height: 1.6;
|
|
1931
|
+
margin-bottom: 24px;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
.helpline-list {
|
|
1935
|
+
display: flex;
|
|
1936
|
+
flex-direction: column;
|
|
1937
|
+
gap: 20px;
|
|
1938
|
+
flex-grow: 1;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
.helpline-group {
|
|
1942
|
+
display: flex;
|
|
1943
|
+
flex-direction: column;
|
|
1944
|
+
gap: 10px;
|
|
2139
1945
|
}
|
|
2140
1946
|
|
|
2141
|
-
.
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
1947
|
+
.group-title {
|
|
1948
|
+
font-size: 13.5px;
|
|
1949
|
+
font-weight: 700;
|
|
1950
|
+
color: #0f172a;
|
|
1951
|
+
text-transform: uppercase;
|
|
1952
|
+
letter-spacing: 0.5px;
|
|
2146
1953
|
}
|
|
2147
1954
|
|
|
2148
|
-
|
|
2149
|
-
|
|
1955
|
+
/* Numbers Grid (Customer Hotlines) */
|
|
1956
|
+
.numbers-grid {
|
|
1957
|
+
display: grid;
|
|
1958
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1959
|
+
gap: 10px;
|
|
2150
1960
|
}
|
|
2151
1961
|
|
|
2152
|
-
.
|
|
1962
|
+
.number-pill {
|
|
1963
|
+
display: flex;
|
|
1964
|
+
align-items: center;
|
|
1965
|
+
gap: 8px;
|
|
1966
|
+
background: #f8fafc;
|
|
1967
|
+
border: 1px solid #e2e8f0;
|
|
1968
|
+
border-radius: 50px;
|
|
1969
|
+
padding: 10px 16px;
|
|
1970
|
+
color: #0f172a;
|
|
1971
|
+
font-weight: 600;
|
|
1972
|
+
font-size: 14px;
|
|
1973
|
+
text-decoration: none;
|
|
1974
|
+
transition: all 0.2s ease;
|
|
1975
|
+
}
|
|
1976
|
+
|
|
1977
|
+
.number-pill:hover {
|
|
1978
|
+
background: #eff6ff;
|
|
1979
|
+
border-color: #bfdbfe;
|
|
2153
1980
|
color: #0b5cab;
|
|
2154
|
-
|
|
1981
|
+
transform: translateY(-1px);
|
|
1982
|
+
}
|
|
1983
|
+
|
|
1984
|
+
.pill-phone-icon {
|
|
1985
|
+
display: inline-flex;
|
|
1986
|
+
color: #64748b;
|
|
1987
|
+
}
|
|
1988
|
+
|
|
1989
|
+
.number-pill:hover .pill-phone-icon {
|
|
1990
|
+
color: #0b5cab;
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
/* Emergency helpline item */
|
|
1994
|
+
.emergency-item {
|
|
1995
|
+
display: flex;
|
|
1996
|
+
align-items: center;
|
|
1997
|
+
gap: 16px;
|
|
1998
|
+
background: #fff5f5;
|
|
1999
|
+
border: 1px solid #feb2b2;
|
|
2000
|
+
border-radius: 12px;
|
|
2001
|
+
padding: 14px 20px;
|
|
2002
|
+
}
|
|
2003
|
+
|
|
2004
|
+
.emergency-number {
|
|
2005
|
+
display: inline-flex;
|
|
2006
|
+
align-items: center;
|
|
2007
|
+
gap: 8px;
|
|
2008
|
+
font-size: 18px;
|
|
2009
|
+
font-weight: 800;
|
|
2010
|
+
color: #c53030;
|
|
2155
2011
|
text-decoration: none;
|
|
2156
2012
|
}
|
|
2157
2013
|
|
|
2158
|
-
.
|
|
2159
|
-
|
|
2160
|
-
|
|
2014
|
+
.emergency-icon {
|
|
2015
|
+
display: inline-flex;
|
|
2016
|
+
animation: pulse-red 2s infinite;
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
@keyframes pulse-red{
|
|
2020
|
+
0% { transform: scale(1); opacity: 1; }
|
|
2021
|
+
50% { transform: scale(1.1); opacity: 0.7; }
|
|
2022
|
+
100% { transform: scale(1); opacity: 1; }
|
|
2023
|
+
}
|
|
2024
|
+
|
|
2025
|
+
.emergency-meta {
|
|
2026
|
+
display: flex;
|
|
2027
|
+
align-items: center;
|
|
2028
|
+
gap: 8px;
|
|
2029
|
+
flex-wrap: wrap;
|
|
2030
|
+
}
|
|
2031
|
+
|
|
2032
|
+
.label-badge {
|
|
2033
|
+
font-size: 11px;
|
|
2034
|
+
font-weight: 700;
|
|
2035
|
+
text-transform: uppercase;
|
|
2036
|
+
padding: 2px 8px;
|
|
2037
|
+
border-radius: 4px;
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
.badge-emergency {
|
|
2041
|
+
background: #c53030;
|
|
2042
|
+
color: #ffffff;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
.label-text {
|
|
2046
|
+
font-size: 12.5px;
|
|
2047
|
+
color: #475569;
|
|
2048
|
+
font-weight: 500;
|
|
2049
|
+
}
|
|
2050
|
+
|
|
2051
|
+
.badge-new {
|
|
2052
|
+
background: #e53e3e;
|
|
2053
|
+
color: #ffffff;
|
|
2054
|
+
font-size: 9px;
|
|
2055
|
+
font-weight: 800;
|
|
2056
|
+
padding: 1px 6px;
|
|
2057
|
+
border-radius: 4px;
|
|
2058
|
+
margin-left: 6px;
|
|
2059
|
+
text-transform: uppercase;
|
|
2060
|
+
display: inline-block;
|
|
2061
|
+
vertical-align: middle;
|
|
2161
2062
|
}
|
|
2162
2063
|
|
|
2163
|
-
|
|
2064
|
+
/* WhatsApp helpline style */
|
|
2065
|
+
.whatsapp-list {
|
|
2164
2066
|
display: flex;
|
|
2165
2067
|
flex-direction: column;
|
|
2166
|
-
gap:
|
|
2068
|
+
gap: 10px;
|
|
2167
2069
|
}
|
|
2168
2070
|
|
|
2169
|
-
.
|
|
2071
|
+
.whatsapp-item {
|
|
2170
2072
|
display: flex;
|
|
2171
|
-
|
|
2073
|
+
align-items: center;
|
|
2074
|
+
gap: 12px;
|
|
2172
2075
|
}
|
|
2173
2076
|
|
|
2174
|
-
.
|
|
2175
|
-
|
|
2077
|
+
.wa-pill {
|
|
2078
|
+
display: inline-flex;
|
|
2079
|
+
align-items: center;
|
|
2080
|
+
gap: 8px;
|
|
2081
|
+
background: #f0fdf4;
|
|
2082
|
+
border: 1px solid #bbf7d0;
|
|
2083
|
+
color: #16a34a;
|
|
2084
|
+
padding: 8px 16px;
|
|
2085
|
+
border-radius: 50px;
|
|
2086
|
+
font-weight: 700;
|
|
2087
|
+
font-size: 14px;
|
|
2088
|
+
text-decoration: none;
|
|
2089
|
+
transition: all 0.2s ease;
|
|
2176
2090
|
}
|
|
2177
2091
|
|
|
2178
|
-
.
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
border-radius: 6px;
|
|
2092
|
+
.wa-pill:hover {
|
|
2093
|
+
background: #dcfce7;
|
|
2094
|
+
border-color: #86efac;
|
|
2095
|
+
transform: translateY(-1px);
|
|
2183
2096
|
}
|
|
2184
2097
|
|
|
2185
|
-
.
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2098
|
+
.wa-pill-alt {
|
|
2099
|
+
background: #f0f9ff;
|
|
2100
|
+
border-color: #bae6fd;
|
|
2101
|
+
color: #0284c7;
|
|
2102
|
+
}
|
|
2103
|
+
|
|
2104
|
+
.wa-pill-alt:hover {
|
|
2105
|
+
background: #e0f2fe;
|
|
2106
|
+
border-color: #7dd3fc;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
.wa-icon {
|
|
2110
|
+
display: inline-flex;
|
|
2192
2111
|
}
|
|
2193
2112
|
|
|
2194
|
-
.
|
|
2113
|
+
.wa-meta-text {
|
|
2114
|
+
font-size: 13px;
|
|
2115
|
+
color: #475569;
|
|
2116
|
+
font-weight: 500;
|
|
2195
2117
|
display: flex;
|
|
2196
|
-
|
|
2197
|
-
margin-bottom: 16px;
|
|
2118
|
+
align-items: center;
|
|
2198
2119
|
}
|
|
2199
2120
|
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2121
|
+
/* Legacy Sub-headings & PDF actions */
|
|
2122
|
+
.card-footer-links {
|
|
2123
|
+
margin-top: 30px;
|
|
2124
|
+
border-top: 1px solid #f1f5f9;
|
|
2125
|
+
padding-top: 20px;
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
.legacy-sub-heading {
|
|
2129
|
+
font-size: 13.5px;
|
|
2130
|
+
font-weight: 600;
|
|
2131
|
+
color: #475569;
|
|
2132
|
+
margin-bottom: 12px;
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.footer-action-buttons {
|
|
2205
2136
|
display: flex;
|
|
2137
|
+
gap: 12px;
|
|
2138
|
+
flex-wrap: wrap;
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
.action-button-link {
|
|
2142
|
+
display: inline-flex;
|
|
2143
|
+
align-items: center;
|
|
2144
|
+
gap: 8px;
|
|
2145
|
+
padding: 10px 18px;
|
|
2146
|
+
border-radius: 8px;
|
|
2147
|
+
font-size: 13px;
|
|
2148
|
+
font-weight: 600;
|
|
2149
|
+
text-decoration: none;
|
|
2150
|
+
transition: all 0.2s ease;
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
.action-pdf {
|
|
2154
|
+
background: #fef2f2;
|
|
2155
|
+
border: 1px solid #fecaca;
|
|
2156
|
+
color: #dc2626;
|
|
2157
|
+
}
|
|
2158
|
+
|
|
2159
|
+
.action-pdf:hover {
|
|
2160
|
+
background: #fee2e2;
|
|
2161
|
+
border-color: #fca5a5;
|
|
2162
|
+
transform: translateY(-1px);
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
.action-dir {
|
|
2166
|
+
background: #eff6ff;
|
|
2167
|
+
border: 1px solid #bfdbfe;
|
|
2168
|
+
color: #1d4ed8;
|
|
2169
|
+
}
|
|
2170
|
+
|
|
2171
|
+
.action-dir:hover {
|
|
2172
|
+
background: #dbeafe;
|
|
2173
|
+
border-color: #93c5fd;
|
|
2174
|
+
transform: translateY(-1px);
|
|
2175
|
+
}
|
|
2176
|
+
|
|
2177
|
+
.btn-icon {
|
|
2178
|
+
display: inline-flex;
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
/* ==========================================
|
|
2182
|
+
WRITE TO US FORM STYLING
|
|
2183
|
+
========================================== */
|
|
2184
|
+
.card-form {
|
|
2185
|
+
background: #ffffff;
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
.card-form .card-header-icon {
|
|
2189
|
+
background: #f0fdf4;
|
|
2190
|
+
color: #16a34a;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
.contact-form-styled {
|
|
2194
|
+
display: flex;
|
|
2195
|
+
flex-direction: column;
|
|
2196
|
+
gap: 22px;
|
|
2197
|
+
margin-top: 8px;
|
|
2198
|
+
}
|
|
2199
|
+
|
|
2200
|
+
.form-grid-fields {
|
|
2201
|
+
display: grid;
|
|
2202
|
+
grid-template-columns: repeat(2, 1fr);
|
|
2203
|
+
gap: 20px;
|
|
2204
|
+
}
|
|
2205
|
+
|
|
2206
|
+
.input-group-styled {
|
|
2207
|
+
position: relative;
|
|
2208
|
+
width: 100%;
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
.input-group-styled input, .input-group-styled textarea {
|
|
2212
|
+
width: 100%;
|
|
2213
|
+
padding: 14px 16px;
|
|
2214
|
+
border: 1.5px solid #e2e8f0;
|
|
2215
|
+
border-radius: 10px;
|
|
2216
|
+
font-size: 14.5px;
|
|
2217
|
+
color: #0f172a;
|
|
2218
|
+
background: #f8fafc;
|
|
2219
|
+
outline: none;
|
|
2220
|
+
font-family: inherit;
|
|
2221
|
+
transition: all 0.25s ease;
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
.input-group-styled input::placeholder, .input-group-styled textarea::placeholder {
|
|
2225
|
+
color: #94a3b8;
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
.input-group-styled input:focus, .input-group-styled textarea:focus {
|
|
2229
|
+
border-color: #0b5cab;
|
|
2230
|
+
background: #ffffff;
|
|
2231
|
+
box-shadow: 0 4px 12px rgba(11, 92, 171, 0.05);
|
|
2232
|
+
}
|
|
2233
|
+
|
|
2234
|
+
.form-submit-button {
|
|
2235
|
+
display: inline-flex;
|
|
2206
2236
|
align-items: center;
|
|
2207
2237
|
justify-content: center;
|
|
2238
|
+
gap: 8px;
|
|
2239
|
+
background: #0b5cab;
|
|
2240
|
+
color: #ffffff;
|
|
2241
|
+
border: none;
|
|
2242
|
+
border-radius: 50px;
|
|
2243
|
+
padding: 12px 30px;
|
|
2244
|
+
font-size: 14.5px;
|
|
2245
|
+
font-weight: 700;
|
|
2246
|
+
cursor: pointer;
|
|
2247
|
+
align-self: flex-start;
|
|
2248
|
+
box-shadow: 0 4px 12px rgba(11, 92, 171, 0.2);
|
|
2249
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2208
2250
|
}
|
|
2209
2251
|
|
|
2210
|
-
.
|
|
2211
|
-
|
|
2212
|
-
|
|
2252
|
+
.form-submit-button:hover {
|
|
2253
|
+
background: #094b8c;
|
|
2254
|
+
transform: translateY(-2px);
|
|
2255
|
+
box-shadow: 0 6px 18px rgba(11, 92, 171, 0.3);
|
|
2213
2256
|
}
|
|
2214
2257
|
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
}
|
|
2258
|
+
.form-submit-button:active {
|
|
2259
|
+
transform: translateY(0);
|
|
2260
|
+
}
|
|
2219
2261
|
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2262
|
+
.btn-arrow {
|
|
2263
|
+
display: inline-flex;
|
|
2264
|
+
transition: transform 0.2s ease;
|
|
2223
2265
|
}
|
|
2224
2266
|
|
|
2225
|
-
.
|
|
2226
|
-
|
|
2227
|
-
padding: 32px;
|
|
2228
|
-
border-radius: 12px;
|
|
2229
|
-
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
|
2267
|
+
.form-submit-button:hover .btn-arrow {
|
|
2268
|
+
transform: translateX(3px);
|
|
2230
2269
|
}
|
|
2231
2270
|
|
|
2232
|
-
|
|
2271
|
+
/* ==========================================
|
|
2272
|
+
CONTACT INFO BOXES GRID
|
|
2273
|
+
========================================== */
|
|
2274
|
+
.card-info-grid {
|
|
2275
|
+
flex-grow: 1;
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
.info-boxes-grid {
|
|
2233
2279
|
display: grid;
|
|
2234
2280
|
grid-template-columns: repeat(3, 1fr);
|
|
2235
|
-
gap:
|
|
2236
|
-
|
|
2281
|
+
gap: 20px;
|
|
2282
|
+
flex-grow: 1;
|
|
2237
2283
|
}
|
|
2238
2284
|
|
|
2239
|
-
.info-box {
|
|
2285
|
+
.info-block-box {
|
|
2286
|
+
background: #f8fafc;
|
|
2287
|
+
border: 1px solid #e2e8f0;
|
|
2288
|
+
border-radius: 12px;
|
|
2289
|
+
padding: 24px 20px;
|
|
2290
|
+
text-align: center;
|
|
2240
2291
|
display: flex;
|
|
2241
2292
|
flex-direction: column;
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
border-radius: 10px;
|
|
2246
|
-
background: #f7faff;
|
|
2247
|
-
transition: background 0.2s ease, box-shadow 0.2s ease;
|
|
2293
|
+
align-items: center;
|
|
2294
|
+
justify-content: flex-start;
|
|
2295
|
+
transition: all 0.25s ease;
|
|
2248
2296
|
}
|
|
2249
2297
|
|
|
2250
|
-
.info-box:hover {
|
|
2251
|
-
background: #
|
|
2252
|
-
|
|
2298
|
+
.info-block-box:hover {
|
|
2299
|
+
background: #ffffff;
|
|
2300
|
+
border-color: #0b5cab;
|
|
2301
|
+
box-shadow: 0 8px 24px rgba(11, 92, 171, 0.08);
|
|
2253
2302
|
}
|
|
2254
2303
|
|
|
2255
|
-
.info-box
|
|
2256
|
-
width:
|
|
2257
|
-
height:
|
|
2258
|
-
|
|
2259
|
-
|
|
2304
|
+
.info-box-icon {
|
|
2305
|
+
width: 44px;
|
|
2306
|
+
height: 44px;
|
|
2307
|
+
background: #ffffff;
|
|
2308
|
+
border: 1.5px solid #e2e8f0;
|
|
2309
|
+
color: #0b5cab;
|
|
2260
2310
|
border-radius: 50%;
|
|
2261
2311
|
display: flex;
|
|
2262
2312
|
align-items: center;
|
|
2263
2313
|
justify-content: center;
|
|
2264
|
-
|
|
2314
|
+
margin-bottom: 14px;
|
|
2315
|
+
transition: all 0.25s ease;
|
|
2265
2316
|
}
|
|
2266
2317
|
|
|
2267
|
-
.info-box:hover .icon {
|
|
2268
|
-
background: #
|
|
2318
|
+
.info-block-box:hover .info-box-icon {
|
|
2319
|
+
background: #0b5cab;
|
|
2320
|
+
border-color: #0b5cab;
|
|
2321
|
+
color: #ffffff;
|
|
2322
|
+
transform: scale(1.05);
|
|
2269
2323
|
}
|
|
2270
2324
|
|
|
2271
|
-
.info-box h4 {
|
|
2272
|
-
|
|
2325
|
+
.info-block-box h4 {
|
|
2326
|
+
font-size: 15px;
|
|
2327
|
+
font-weight: 700;
|
|
2328
|
+
color: #0f172a;
|
|
2329
|
+
margin: 0 0 10px;
|
|
2330
|
+
}
|
|
2331
|
+
|
|
2332
|
+
.info-block-box p {
|
|
2333
|
+
font-size: 13px;
|
|
2334
|
+
color: #475569;
|
|
2335
|
+
line-height: 1.6;
|
|
2336
|
+
margin: 0;
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
.info-block-box .email-text {
|
|
2273
2340
|
color: #0b5cab;
|
|
2341
|
+
font-weight: 600;
|
|
2274
2342
|
}
|
|
2275
2343
|
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2344
|
+
/* ==========================================
|
|
2345
|
+
GOOGLE MAP BLOCK
|
|
2346
|
+
========================================== */
|
|
2347
|
+
.card-map {
|
|
2348
|
+
background: #ffffff;
|
|
2349
|
+
}
|
|
2350
|
+
|
|
2351
|
+
.google-map-wrapper {
|
|
2352
|
+
border-radius: 12px;
|
|
2353
|
+
overflow: hidden;
|
|
2354
|
+
border: 1px solid #e2e8f0;
|
|
2355
|
+
height: 320px;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
/* ==========================================
|
|
2359
|
+
RESPONSIVE MEDIA QUERIES
|
|
2360
|
+
========================================== */
|
|
2361
|
+
@media (max-width: 1024px) {
|
|
2362
|
+
.contact-grid-row {
|
|
2363
|
+
grid-template-columns: 1fr;
|
|
2364
|
+
}
|
|
2365
|
+
.info-boxes-grid {
|
|
2366
|
+
grid-template-columns: repeat(2, 1fr);
|
|
2367
|
+
}
|
|
2279
2368
|
}
|
|
2280
2369
|
|
|
2281
|
-
/* Responsive */
|
|
2282
2370
|
@media (max-width: 768px) {
|
|
2283
|
-
.
|
|
2371
|
+
.contact-hero-banner {
|
|
2372
|
+
padding: 40px 20px;
|
|
2373
|
+
}
|
|
2374
|
+
.contact-hero-content h1 {
|
|
2375
|
+
font-size: 26px;
|
|
2376
|
+
}
|
|
2377
|
+
.contact-hero-content p {
|
|
2378
|
+
font-size: 14px;
|
|
2379
|
+
}
|
|
2380
|
+
.form-grid-fields {
|
|
2284
2381
|
grid-template-columns: 1fr;
|
|
2285
2382
|
}
|
|
2383
|
+
.info-boxes-grid {
|
|
2384
|
+
grid-template-columns: 1fr;
|
|
2385
|
+
}
|
|
2386
|
+
.numbers-grid {
|
|
2387
|
+
grid-template-columns: 1fr;
|
|
2388
|
+
}
|
|
2389
|
+
.emergency-item {
|
|
2390
|
+
flex-direction: column;
|
|
2391
|
+
align-items: flex-start;
|
|
2392
|
+
gap: 10px;
|
|
2393
|
+
}
|
|
2394
|
+
.contact-card {
|
|
2395
|
+
padding: 20px;
|
|
2396
|
+
}
|
|
2286
2397
|
}
|
|
2287
2398
|
|
|
2288
2399
|
.modal-overlay {
|
|
@@ -2317,33 +2428,67 @@ body {
|
|
|
2317
2428
|
}
|
|
2318
2429
|
|
|
2319
2430
|
/* 🔹 Nav Hover Button (EXCEPT LOGIN) */
|
|
2320
|
-
|
|
2321
|
-
.mcd-nav .nav-hover-btn {
|
|
2431
|
+
.upyog-nav .nav-hover-btn {
|
|
2322
2432
|
padding: 8px 16px;
|
|
2323
|
-
border-radius:
|
|
2433
|
+
border-radius: 6px;
|
|
2434
|
+
font-size: 14.5px;
|
|
2435
|
+
font-weight: 600;
|
|
2436
|
+
color: #1e293b;
|
|
2437
|
+
text-decoration: none;
|
|
2438
|
+
position: relative;
|
|
2439
|
+
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
.upyog-nav .nav-hover-btn::after {
|
|
2443
|
+
content: "";
|
|
2444
|
+
position: absolute;
|
|
2445
|
+
bottom: 2px;
|
|
2446
|
+
left: 16px;
|
|
2447
|
+
right: 16px;
|
|
2448
|
+
height: 2.5px;
|
|
2449
|
+
background-color: #005bbb;
|
|
2450
|
+
transform: scaleX(0);
|
|
2451
|
+
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2452
|
+
}
|
|
2453
|
+
|
|
2454
|
+
.upyog-nav .nav-hover-btn:hover {
|
|
2455
|
+
color: #005bbb;
|
|
2456
|
+
background: rgba(0, 91, 187, 0.04);
|
|
2457
|
+
text-decoration: none;
|
|
2458
|
+
}
|
|
2459
|
+
|
|
2460
|
+
.upyog-nav .nav-hover-btn:hover::after {
|
|
2461
|
+
transform: scaleX(1);
|
|
2462
|
+
}
|
|
2463
|
+
|
|
2464
|
+
/* 🔹 Header Login Pill Button */
|
|
2465
|
+
.header-login-btn {
|
|
2466
|
+
background: linear-gradient(135deg, #005bbb, #003c8f);
|
|
2467
|
+
color: #ffffff !important;
|
|
2468
|
+
border: none;
|
|
2469
|
+
padding: 9px 24px;
|
|
2470
|
+
border-radius: 50px;
|
|
2324
2471
|
font-size: 14px;
|
|
2325
|
-
font-weight:
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
transition: all 0.
|
|
2472
|
+
font-weight: 600;
|
|
2473
|
+
cursor: pointer;
|
|
2474
|
+
box-shadow: 0 4px 14px rgba(0, 91, 187, 0.2);
|
|
2475
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2329
2476
|
}
|
|
2330
2477
|
|
|
2331
|
-
.
|
|
2332
|
-
background: #
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2478
|
+
.header-login-btn:hover {
|
|
2479
|
+
background: linear-gradient(135deg, #006ee6, #004cb0);
|
|
2480
|
+
transform: translateY(-1.5px);
|
|
2481
|
+
box-shadow: 0 6px 20px rgba(0, 91, 187, 0.3);
|
|
2482
|
+
}
|
|
2483
|
+
|
|
2484
|
+
.header-login-btn:active {
|
|
2485
|
+
transform: translateY(0);
|
|
2336
2486
|
}
|
|
2337
2487
|
|
|
2338
2488
|
/* ================= ABOUT PAGE LAYOUT ================= */
|
|
2339
2489
|
|
|
2340
2490
|
/* Layout */
|
|
2341
|
-
|
|
2342
|
-
display: grid;
|
|
2343
|
-
grid-template-columns: 260px 1fr;
|
|
2344
|
-
gap: 24px;
|
|
2345
|
-
align-items: flex-start;
|
|
2346
|
-
}
|
|
2491
|
+
|
|
2347
2492
|
|
|
2348
2493
|
/* Sticky sidebar */
|
|
2349
2494
|
.djb-side-nav {
|
|
@@ -2389,15 +2534,11 @@ body {
|
|
|
2389
2534
|
}
|
|
2390
2535
|
|
|
2391
2536
|
/* Content area */
|
|
2392
|
-
|
|
2393
|
-
min-width: 0;
|
|
2394
|
-
}
|
|
2537
|
+
|
|
2395
2538
|
|
|
2396
2539
|
/* Mobile fallback */
|
|
2397
2540
|
@media (max-width: 900px) {
|
|
2398
|
-
|
|
2399
|
-
grid-template-columns: 1fr;
|
|
2400
|
-
}
|
|
2541
|
+
|
|
2401
2542
|
|
|
2402
2543
|
.djb-side-nav {
|
|
2403
2544
|
position: relative;
|
|
@@ -2406,250 +2547,335 @@ body {
|
|
|
2406
2547
|
}
|
|
2407
2548
|
|
|
2408
2549
|
/* HERO */
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2550
|
+
|
|
2551
|
+
|
|
2552
|
+
|
|
2553
|
+
|
|
2554
|
+
|
|
2555
|
+
|
|
2556
|
+
|
|
2557
|
+
|
|
2558
|
+
|
|
2559
|
+
|
|
2560
|
+
|
|
2561
|
+
|
|
2562
|
+
|
|
2563
|
+
|
|
2564
|
+
|
|
2565
|
+
|
|
2566
|
+
|
|
2567
|
+
|
|
2568
|
+
/* ===============================
|
|
2569
|
+
ABOUT PAGE – KSMART STYLE
|
|
2570
|
+
DJB COLOR TUNING
|
|
2571
|
+
=============================== */
|
|
2572
|
+
|
|
2573
|
+
/* Page background for About Us page */
|
|
2574
|
+
body {
|
|
2575
|
+
background: #f8fafc;
|
|
2414
2576
|
}
|
|
2415
2577
|
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2578
|
+
/* Main wrapper */
|
|
2579
|
+
.djb-page-wrapper {
|
|
2580
|
+
margin: 0 auto;
|
|
2581
|
+
max-width: 1280px;
|
|
2582
|
+
padding: 40px 24px 80px;
|
|
2419
2583
|
}
|
|
2420
2584
|
|
|
2421
|
-
|
|
2422
|
-
|
|
2585
|
+
/* Header style override for the "About Us" page header */
|
|
2586
|
+
.djb-page-wrapper .digit-ui-header {
|
|
2587
|
+
font-size: 32px;
|
|
2588
|
+
font-weight: 800;
|
|
2589
|
+
color: #003366;
|
|
2590
|
+
margin-bottom: 28px;
|
|
2591
|
+
letter-spacing: -0.5px;
|
|
2423
2592
|
}
|
|
2424
2593
|
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2594
|
+
/* About Layout */
|
|
2595
|
+
.djb-about-layout {
|
|
2596
|
+
display: grid;
|
|
2597
|
+
grid-template-columns: 280px 1fr;
|
|
2598
|
+
gap: 32px;
|
|
2599
|
+
align-items: start;
|
|
2600
|
+
margin-top: 20px;
|
|
2431
2601
|
}
|
|
2432
2602
|
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2603
|
+
/* Sticky sidebar */
|
|
2604
|
+
.djb-side-nav {
|
|
2605
|
+
position: sticky;
|
|
2606
|
+
top: 110px; /* below header */
|
|
2607
|
+
background: #ffffff;
|
|
2608
|
+
border-radius: 16px !important;
|
|
2609
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
|
|
2610
|
+
border: 1px solid #e2e8f0 !important;
|
|
2611
|
+
padding: 0 !important; /* Override inline padding */
|
|
2612
|
+
overflow: hidden;
|
|
2613
|
+
height: fit-content;
|
|
2614
|
+
transition: all 0.3s ease;
|
|
2436
2615
|
}
|
|
2437
2616
|
|
|
2438
|
-
|
|
2439
|
-
|
|
2617
|
+
/* Sidebar title */
|
|
2618
|
+
.side-nav-title {
|
|
2619
|
+
background: linear-gradient(135deg, #005bbb, #003c8f);
|
|
2620
|
+
color: #ffffff;
|
|
2621
|
+
padding: 20px 24px;
|
|
2622
|
+
font-size: 13px;
|
|
2623
|
+
font-weight: 800;
|
|
2624
|
+
text-transform: uppercase;
|
|
2625
|
+
letter-spacing: 1px;
|
|
2626
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
2440
2627
|
}
|
|
2441
2628
|
|
|
2442
|
-
|
|
2629
|
+
/* Sidebar List */
|
|
2630
|
+
.djb-side-nav ul {
|
|
2631
|
+
list-style: none;
|
|
2632
|
+
margin: 0;
|
|
2633
|
+
padding: 0;
|
|
2634
|
+
}
|
|
2635
|
+
|
|
2636
|
+
.djb-side-nav li {
|
|
2637
|
+
padding: 16px 24px;
|
|
2638
|
+
font-size: 14.5px;
|
|
2639
|
+
font-weight: 600;
|
|
2640
|
+
color: #475569;
|
|
2641
|
+
border-bottom: 1px solid #f1f5f9;
|
|
2642
|
+
cursor: pointer;
|
|
2643
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2644
|
+
display: flex;
|
|
2645
|
+
align-items: center;
|
|
2646
|
+
position: relative;
|
|
2647
|
+
}
|
|
2648
|
+
|
|
2649
|
+
.djb-side-nav li:last-child {
|
|
2650
|
+
border-bottom: none;
|
|
2651
|
+
}
|
|
2652
|
+
|
|
2653
|
+
.djb-side-nav li:hover {
|
|
2654
|
+
background: #f8fafc;
|
|
2655
|
+
color: #0070B4;
|
|
2656
|
+
padding-left: 28px;
|
|
2657
|
+
}
|
|
2658
|
+
|
|
2659
|
+
.djb-side-nav li.active {
|
|
2660
|
+
background: #f1f7fc;
|
|
2661
|
+
color: #0070B4;
|
|
2662
|
+
font-weight: 700;
|
|
2663
|
+
padding-left: 28px;
|
|
2664
|
+
}
|
|
2665
|
+
|
|
2666
|
+
.djb-side-nav li.active::before {
|
|
2667
|
+
content: "";
|
|
2668
|
+
position: absolute;
|
|
2669
|
+
left: 0;
|
|
2670
|
+
top: 0;
|
|
2671
|
+
bottom: 0;
|
|
2672
|
+
width: 4px;
|
|
2673
|
+
background: #0070B4;
|
|
2674
|
+
border-top-right-radius: 4px;
|
|
2675
|
+
border-bottom-right-radius: 4px;
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2678
|
+
/* Content Area */
|
|
2679
|
+
.djb-about-content {
|
|
2443
2680
|
width: 100%;
|
|
2444
|
-
|
|
2681
|
+
background: #ffffff !important;
|
|
2682
|
+
border-radius: 16px !important;
|
|
2683
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
|
|
2684
|
+
border: 1px solid #e2e8f0 !important;
|
|
2685
|
+
padding: 40px !important; /* Override inline padding */
|
|
2686
|
+
overflow: hidden;
|
|
2687
|
+
}
|
|
2688
|
+
|
|
2689
|
+
/* Tabs */
|
|
2690
|
+
.djb-tabs {
|
|
2691
|
+
display: flex;
|
|
2692
|
+
gap: 8px;
|
|
2693
|
+
margin-bottom: 36px;
|
|
2694
|
+
padding: 6px;
|
|
2695
|
+
background: #f1f5f9;
|
|
2696
|
+
border-radius: 12px;
|
|
2697
|
+
width: fit-content;
|
|
2698
|
+
border: 1px solid #e2e8f0;
|
|
2699
|
+
flex-wrap: wrap;
|
|
2445
2700
|
}
|
|
2446
2701
|
|
|
2447
|
-
.
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2702
|
+
.djb-tabs button {
|
|
2703
|
+
padding: 10px 20px;
|
|
2704
|
+
font-size: 14px;
|
|
2705
|
+
font-weight: 600;
|
|
2706
|
+
color: #64748b;
|
|
2707
|
+
background: transparent;
|
|
2708
|
+
border: none;
|
|
2709
|
+
border-radius: 8px;
|
|
2710
|
+
cursor: pointer;
|
|
2711
|
+
transition: all 0.2s ease;
|
|
2712
|
+
outline: none;
|
|
2451
2713
|
}
|
|
2452
2714
|
|
|
2453
|
-
.
|
|
2454
|
-
|
|
2715
|
+
.djb-tabs button:hover {
|
|
2716
|
+
color: #0070B4;
|
|
2455
2717
|
}
|
|
2456
2718
|
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
/* Page background */
|
|
2463
|
-
body {
|
|
2464
|
-
background: #f4f6f8;
|
|
2719
|
+
.djb-tabs button.active {
|
|
2720
|
+
background: #ffffff;
|
|
2721
|
+
color: #0070B4;
|
|
2722
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
|
|
2723
|
+
border-color: transparent;
|
|
2465
2724
|
}
|
|
2466
2725
|
|
|
2467
|
-
/*
|
|
2468
|
-
.djb-
|
|
2469
|
-
|
|
2470
|
-
|
|
2726
|
+
/* Each section becomes a clean segment */
|
|
2727
|
+
.djb-section {
|
|
2728
|
+
background: transparent;
|
|
2729
|
+
border: none;
|
|
2730
|
+
padding: 0;
|
|
2731
|
+
margin-bottom: 0;
|
|
2471
2732
|
}
|
|
2472
2733
|
|
|
2473
|
-
/*
|
|
2474
|
-
.djb-
|
|
2475
|
-
font-size:
|
|
2476
|
-
font-weight:
|
|
2477
|
-
color: #
|
|
2478
|
-
margin-bottom:
|
|
2734
|
+
/* Section heading */
|
|
2735
|
+
.djb-section-title {
|
|
2736
|
+
font-size: 22px;
|
|
2737
|
+
font-weight: 800;
|
|
2738
|
+
color: #003366;
|
|
2739
|
+
margin-bottom: 24px;
|
|
2740
|
+
padding-bottom: 12px;
|
|
2741
|
+
border-bottom: 2px solid #f1f5f9;
|
|
2742
|
+
position: relative;
|
|
2479
2743
|
}
|
|
2480
2744
|
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2745
|
+
.djb-section-title::after {
|
|
2746
|
+
content: "";
|
|
2747
|
+
position: absolute;
|
|
2748
|
+
bottom: -2px;
|
|
2749
|
+
left: 0;
|
|
2750
|
+
width: 60px;
|
|
2751
|
+
height: 2px;
|
|
2752
|
+
background: #0070B4;
|
|
2488
2753
|
}
|
|
2489
2754
|
|
|
2490
|
-
/*
|
|
2491
|
-
.djb-
|
|
2492
|
-
font-size:
|
|
2493
|
-
font-weight:
|
|
2494
|
-
color: #
|
|
2495
|
-
margin
|
|
2496
|
-
padding-bottom: 6px;
|
|
2497
|
-
border-bottom: 1px solid #e3e9f1;
|
|
2755
|
+
/* Subheading */
|
|
2756
|
+
.djb-sub-title {
|
|
2757
|
+
font-size: 16px;
|
|
2758
|
+
font-weight: 700;
|
|
2759
|
+
color: #334155;
|
|
2760
|
+
margin: 28px 0 14px;
|
|
2498
2761
|
}
|
|
2499
2762
|
|
|
2500
2763
|
/* Paragraph text */
|
|
2501
2764
|
.djb-section p {
|
|
2502
|
-
font-size:
|
|
2503
|
-
line-height: 1.
|
|
2504
|
-
color: #
|
|
2505
|
-
margin-bottom:
|
|
2765
|
+
font-size: 15px;
|
|
2766
|
+
line-height: 1.8;
|
|
2767
|
+
color: #475569;
|
|
2768
|
+
margin-bottom: 18px;
|
|
2769
|
+
}
|
|
2770
|
+
|
|
2771
|
+
.djb-section p strong {
|
|
2772
|
+
color: #003366;
|
|
2773
|
+
font-weight: 700;
|
|
2506
2774
|
}
|
|
2507
2775
|
|
|
2508
2776
|
/* Lists */
|
|
2509
2777
|
.djb-list {
|
|
2510
|
-
padding-left:
|
|
2511
|
-
margin
|
|
2778
|
+
padding-left: 0;
|
|
2779
|
+
margin: 20px 0;
|
|
2780
|
+
list-style: none;
|
|
2512
2781
|
}
|
|
2513
2782
|
|
|
2514
2783
|
.djb-list li {
|
|
2515
|
-
|
|
2784
|
+
position: relative;
|
|
2785
|
+
padding-left: 22px;
|
|
2786
|
+
margin-bottom: 12px;
|
|
2787
|
+
font-size: 15px;
|
|
2516
2788
|
line-height: 1.7;
|
|
2517
|
-
|
|
2518
|
-
color: #333;
|
|
2789
|
+
color: #475569;
|
|
2519
2790
|
}
|
|
2520
2791
|
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2792
|
+
.djb-list li::before {
|
|
2793
|
+
content: "•";
|
|
2794
|
+
color: #0070B4;
|
|
2795
|
+
font-size: 20px;
|
|
2796
|
+
position: absolute;
|
|
2797
|
+
left: 4px;
|
|
2798
|
+
top: -2px;
|
|
2799
|
+
}
|
|
2524
2800
|
|
|
2801
|
+
/* Tables */
|
|
2525
2802
|
.djb-table {
|
|
2526
2803
|
width: 100%;
|
|
2527
|
-
border-collapse:
|
|
2528
|
-
|
|
2529
|
-
|
|
2804
|
+
border-collapse: separate;
|
|
2805
|
+
border-spacing: 0;
|
|
2806
|
+
margin: 28px 0;
|
|
2807
|
+
border-radius: 12px;
|
|
2808
|
+
border: 1px solid #e2e8f0;
|
|
2809
|
+
overflow: hidden;
|
|
2530
2810
|
}
|
|
2531
2811
|
|
|
2532
2812
|
.djb-table th {
|
|
2533
|
-
background: #
|
|
2534
|
-
color: #
|
|
2535
|
-
font-weight:
|
|
2536
|
-
|
|
2537
|
-
|
|
2813
|
+
background: #f8fafc;
|
|
2814
|
+
color: #1e293b;
|
|
2815
|
+
font-weight: 700;
|
|
2816
|
+
font-size: 13px;
|
|
2817
|
+
text-transform: uppercase;
|
|
2818
|
+
letter-spacing: 0.5px;
|
|
2819
|
+
padding: 16px 20px;
|
|
2820
|
+
border-bottom: 1.5px solid #e2e8f0;
|
|
2538
2821
|
text-align: left;
|
|
2539
2822
|
}
|
|
2540
2823
|
|
|
2541
2824
|
.djb-table td {
|
|
2542
|
-
padding:
|
|
2543
|
-
border: 1px solid #
|
|
2544
|
-
color: #
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
.djb-table tr:nth-child(even) {
|
|
2548
|
-
background: #fafbfd;
|
|
2549
|
-
}
|
|
2550
|
-
|
|
2551
|
-
/* Table container look */
|
|
2552
|
-
.djb-table-wrapper {
|
|
2553
|
-
border: 1px solid #e2e6ea;
|
|
2554
|
-
border-radius: 4px;
|
|
2555
|
-
overflow-x: auto;
|
|
2556
|
-
margin-top: 10px;
|
|
2557
|
-
}
|
|
2558
|
-
|
|
2559
|
-
/* ===============================
|
|
2560
|
-
MOBILE
|
|
2561
|
-
=============================== */
|
|
2562
|
-
|
|
2563
|
-
@media (max-width: 768px) {
|
|
2564
|
-
.djb-page-title {
|
|
2565
|
-
font-size: 22px;
|
|
2566
|
-
}
|
|
2567
|
-
|
|
2568
|
-
.djb-section {
|
|
2569
|
-
padding: 16px;
|
|
2570
|
-
}
|
|
2571
|
-
|
|
2572
|
-
.djb-section-title {
|
|
2573
|
-
font-size: 17px;
|
|
2574
|
-
}
|
|
2575
|
-
|
|
2576
|
-
.djb-section p,
|
|
2577
|
-
.djb-list li {
|
|
2578
|
-
font-size: 14px;
|
|
2579
|
-
}
|
|
2580
|
-
|
|
2581
|
-
.djb-table {
|
|
2582
|
-
font-size: 13px;
|
|
2583
|
-
}
|
|
2825
|
+
padding: 16px 20px;
|
|
2826
|
+
border-bottom: 1px solid #e2e8f0;
|
|
2827
|
+
color: #475569;
|
|
2828
|
+
font-size: 14.5px;
|
|
2829
|
+
line-height: 1.6;
|
|
2584
2830
|
}
|
|
2585
2831
|
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
display: flex;
|
|
2589
|
-
gap: 8px;
|
|
2590
|
-
margin-bottom: 20px;
|
|
2591
|
-
flex-wrap: wrap;
|
|
2832
|
+
.djb-table tr:last-child td {
|
|
2833
|
+
border-bottom: none;
|
|
2592
2834
|
}
|
|
2593
2835
|
|
|
2594
|
-
.djb-
|
|
2595
|
-
|
|
2596
|
-
background: #f1f5fb;
|
|
2597
|
-
border: 1px solid #d6e0ef;
|
|
2598
|
-
border-radius: 4px;
|
|
2599
|
-
cursor: pointer;
|
|
2600
|
-
font-size: 14px;
|
|
2601
|
-
color: #083a73;
|
|
2836
|
+
.djb-table tbody tr:hover td {
|
|
2837
|
+
background: #f8fafc;
|
|
2602
2838
|
}
|
|
2603
2839
|
|
|
2604
|
-
.djb-
|
|
2605
|
-
|
|
2606
|
-
color: #
|
|
2607
|
-
border-color: #0b5cab;
|
|
2840
|
+
.djb-table td:last-child {
|
|
2841
|
+
font-weight: 700;
|
|
2842
|
+
color: #0070B4;
|
|
2608
2843
|
}
|
|
2609
2844
|
|
|
2610
|
-
/*
|
|
2611
|
-
.djb-
|
|
2612
|
-
background: #ffffff;
|
|
2613
|
-
border: 1px solid #e2e6ea;
|
|
2614
|
-
border-radius: 4px;
|
|
2845
|
+
/* Revenue Bars */
|
|
2846
|
+
.djb-revenue-table td {
|
|
2615
2847
|
padding: 20px;
|
|
2616
|
-
margin-bottom: 20px;
|
|
2617
|
-
}
|
|
2618
|
-
|
|
2619
|
-
.djb-table tbody tr:hover {
|
|
2620
|
-
background: #f1f8ff;
|
|
2621
|
-
}
|
|
2622
|
-
|
|
2623
|
-
.djb-table td:last-child {
|
|
2624
|
-
font-weight: 600;
|
|
2625
|
-
color: #076db1;
|
|
2626
2848
|
}
|
|
2627
2849
|
|
|
2628
|
-
/* Revenue Bars – CSS only */
|
|
2629
2850
|
.djb-revenue-table .revenue-cell {
|
|
2630
2851
|
display: flex;
|
|
2631
2852
|
flex-direction: column;
|
|
2632
|
-
gap:
|
|
2853
|
+
gap: 8px;
|
|
2633
2854
|
}
|
|
2634
2855
|
|
|
2635
2856
|
.revenue-value {
|
|
2636
|
-
font-weight:
|
|
2637
|
-
color: #
|
|
2857
|
+
font-weight: 700;
|
|
2858
|
+
color: #0070B4;
|
|
2859
|
+
font-size: 15px;
|
|
2638
2860
|
}
|
|
2639
2861
|
|
|
2640
2862
|
.revenue-bar {
|
|
2641
2863
|
width: 100%;
|
|
2642
|
-
height:
|
|
2643
|
-
background: #
|
|
2644
|
-
border-radius:
|
|
2864
|
+
height: 10px;
|
|
2865
|
+
background: #e2e8f0;
|
|
2866
|
+
border-radius: 5px;
|
|
2645
2867
|
overflow: hidden;
|
|
2646
2868
|
}
|
|
2647
2869
|
|
|
2648
2870
|
.revenue-bar .bar {
|
|
2649
2871
|
height: 100%;
|
|
2650
|
-
background: linear-gradient(90deg, #
|
|
2651
|
-
border-radius:
|
|
2652
|
-
transition: width 0.
|
|
2872
|
+
background: linear-gradient(90deg, #0070B4, #0053a6);
|
|
2873
|
+
border-radius: 5px;
|
|
2874
|
+
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2875
|
+
}
|
|
2876
|
+
|
|
2877
|
+
.djb-revenue-table tbody tr:hover .bar {
|
|
2878
|
+
filter: brightness(1.05);
|
|
2653
2879
|
}
|
|
2654
2880
|
|
|
2655
2881
|
/* Width presets */
|
|
@@ -2681,129 +2907,110 @@ body {
|
|
|
2681
2907
|
width: 100%;
|
|
2682
2908
|
}
|
|
2683
2909
|
|
|
2684
|
-
/*
|
|
2685
|
-
.djb-
|
|
2686
|
-
|
|
2687
|
-
}
|
|
2688
|
-
|
|
2689
|
-
.djb-about-layout {
|
|
2690
|
-
display: grid;
|
|
2691
|
-
grid-template-columns: 260px 1fr;
|
|
2692
|
-
gap: 30px;
|
|
2693
|
-
margin-top: 20px;
|
|
2910
|
+
/* Org Chart Structure */
|
|
2911
|
+
.djb-org-fullwidth {
|
|
2912
|
+
text-align: center;
|
|
2694
2913
|
}
|
|
2695
2914
|
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
background: #ffffff;
|
|
2699
|
-
border-radius: 6px;
|
|
2700
|
-
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
|
|
2915
|
+
.org-image-wrapper {
|
|
2916
|
+
border-radius: 16px;
|
|
2701
2917
|
overflow: hidden;
|
|
2918
|
+
border: 1px solid #e2e8f0;
|
|
2919
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
|
2920
|
+
background: #ffffff;
|
|
2921
|
+
padding: 20px;
|
|
2922
|
+
display: inline-block;
|
|
2923
|
+
max-width: 100%;
|
|
2924
|
+
margin-top: 10px;
|
|
2702
2925
|
}
|
|
2703
2926
|
|
|
2704
|
-
.
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
.djb-side-nav ul {
|
|
2712
|
-
list-style: none;
|
|
2713
|
-
margin: 0;
|
|
2714
|
-
padding: 0;
|
|
2715
|
-
}
|
|
2716
|
-
|
|
2717
|
-
.djb-side-nav li {
|
|
2718
|
-
padding: 12px 16px;
|
|
2719
|
-
border-bottom: 1px solid #e0e0e0;
|
|
2720
|
-
cursor: pointer;
|
|
2721
|
-
}
|
|
2722
|
-
|
|
2723
|
-
.djb-side-nav li:hover {
|
|
2724
|
-
background: #f5f7fa;
|
|
2927
|
+
.org-structure-image {
|
|
2928
|
+
max-width: 100%;
|
|
2929
|
+
height: auto;
|
|
2930
|
+
display: block;
|
|
2931
|
+
border-radius: 8px;
|
|
2932
|
+
transition: transform 0.3s ease;
|
|
2725
2933
|
}
|
|
2726
2934
|
|
|
2727
|
-
.
|
|
2728
|
-
|
|
2729
|
-
font-weight: 600;
|
|
2935
|
+
.org-structure-image:hover {
|
|
2936
|
+
transform: scale(1.015);
|
|
2730
2937
|
}
|
|
2731
2938
|
|
|
2732
|
-
/*
|
|
2733
|
-
.
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2939
|
+
/* Citizen Charter PDF Viewer Styling */
|
|
2940
|
+
.doc-frame {
|
|
2941
|
+
border: 1px solid #e2e8f0;
|
|
2942
|
+
border-radius: 16px;
|
|
2943
|
+
overflow: hidden;
|
|
2944
|
+
background: #ffffff;
|
|
2945
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
|
|
2738
2946
|
}
|
|
2739
2947
|
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2948
|
+
.doc-header {
|
|
2949
|
+
display: flex;
|
|
2950
|
+
justify-content: space-between;
|
|
2951
|
+
align-items: center;
|
|
2952
|
+
padding: 24px 32px;
|
|
2953
|
+
background: #f8fafc;
|
|
2954
|
+
border-bottom: 1px solid #e2e8f0;
|
|
2955
|
+
gap: 20px;
|
|
2956
|
+
flex-wrap: wrap;
|
|
2745
2957
|
}
|
|
2746
2958
|
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
margin-top: 20px;
|
|
2959
|
+
.doc-title {
|
|
2960
|
+
font-size: 18px;
|
|
2961
|
+
font-weight: 800;
|
|
2962
|
+
color: #003366;
|
|
2963
|
+
margin: 0;
|
|
2753
2964
|
}
|
|
2754
2965
|
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
position: sticky;
|
|
2762
|
-
top: 110px;
|
|
2966
|
+
.doc-meta {
|
|
2967
|
+
display: flex;
|
|
2968
|
+
gap: 12px;
|
|
2969
|
+
font-size: 13px;
|
|
2970
|
+
color: #64748b;
|
|
2971
|
+
margin-top: 6px;
|
|
2763
2972
|
}
|
|
2764
2973
|
|
|
2765
|
-
.
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2974
|
+
.doc-hint {
|
|
2975
|
+
padding: 14px 32px;
|
|
2976
|
+
background: #ecfdf5;
|
|
2977
|
+
border-bottom: 1px solid #a7f3d0;
|
|
2978
|
+
color: #065f46;
|
|
2979
|
+
font-size: 13.5px;
|
|
2770
2980
|
font-weight: 600;
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
.djb-side-nav ul {
|
|
2775
|
-
list-style: none;
|
|
2776
|
-
padding: 0;
|
|
2777
|
-
margin: 0;
|
|
2778
|
-
}
|
|
2779
|
-
|
|
2780
|
-
.djb-side-nav li {
|
|
2781
|
-
border-bottom: 1px solid #e5e5e5;
|
|
2981
|
+
display: flex;
|
|
2982
|
+
align-items: center;
|
|
2983
|
+
gap: 8px;
|
|
2782
2984
|
}
|
|
2783
2985
|
|
|
2784
|
-
.
|
|
2986
|
+
.pdf-container {
|
|
2987
|
+
position: relative;
|
|
2785
2988
|
width: 100%;
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
text-align: left;
|
|
2789
|
-
padding: 12px 16px;
|
|
2790
|
-
font-size: 14px;
|
|
2791
|
-
cursor: pointer;
|
|
2989
|
+
height: 650px;
|
|
2990
|
+
background: #f1f5f9;
|
|
2792
2991
|
}
|
|
2793
2992
|
|
|
2794
|
-
.
|
|
2795
|
-
|
|
2796
|
-
|
|
2993
|
+
.pdf-container iframe {
|
|
2994
|
+
width: 100%;
|
|
2995
|
+
height: 100%;
|
|
2996
|
+
border: none;
|
|
2797
2997
|
}
|
|
2798
2998
|
|
|
2799
|
-
.
|
|
2800
|
-
|
|
2999
|
+
.pdf-loader-overlay {
|
|
3000
|
+
position: absolute;
|
|
3001
|
+
inset: 0;
|
|
3002
|
+
background: rgba(255, 255, 255, 0.85);
|
|
3003
|
+
display: flex;
|
|
3004
|
+
align-items: center;
|
|
3005
|
+
justify-content: center;
|
|
3006
|
+
z-index: 10;
|
|
2801
3007
|
}
|
|
2802
3008
|
|
|
2803
|
-
/*
|
|
3009
|
+
/* Responsive Media Queries */
|
|
2804
3010
|
@media (max-width: 900px) {
|
|
2805
3011
|
.djb-about-layout {
|
|
2806
3012
|
grid-template-columns: 1fr;
|
|
3013
|
+
gap: 24px;
|
|
2807
3014
|
}
|
|
2808
3015
|
|
|
2809
3016
|
.djb-side-nav {
|
|
@@ -2812,6 +3019,37 @@ body {
|
|
|
2812
3019
|
}
|
|
2813
3020
|
}
|
|
2814
3021
|
|
|
3022
|
+
@media (max-width: 768px) {
|
|
3023
|
+
.djb-page-wrapper {
|
|
3024
|
+
padding: 24px 16px 60px;
|
|
3025
|
+
}
|
|
3026
|
+
|
|
3027
|
+
.djb-about-content {
|
|
3028
|
+
padding: 24px !important;
|
|
3029
|
+
}
|
|
3030
|
+
|
|
3031
|
+
.djb-section-title {
|
|
3032
|
+
font-size: 19px;
|
|
3033
|
+
}
|
|
3034
|
+
|
|
3035
|
+
.djb-section p, .djb-list li {
|
|
3036
|
+
font-size: 14px;
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
.djb-table th, .djb-table td {
|
|
3040
|
+
padding: 12px 14px;
|
|
3041
|
+
font-size: 13.5px;
|
|
3042
|
+
}
|
|
3043
|
+
|
|
3044
|
+
.doc-header {
|
|
3045
|
+
padding: 20px;
|
|
3046
|
+
}
|
|
3047
|
+
|
|
3048
|
+
.doc-hint {
|
|
3049
|
+
padding: 12px 20px;
|
|
3050
|
+
}
|
|
3051
|
+
}
|
|
3052
|
+
|
|
2815
3053
|
/* ================= PAGE ================= */
|
|
2816
3054
|
.org-page {
|
|
2817
3055
|
width: 100%;
|
|
@@ -2862,12 +3100,7 @@ body {
|
|
|
2862
3100
|
}
|
|
2863
3101
|
|
|
2864
3102
|
/* ================= LEVEL STYLES ================= */
|
|
2865
|
-
|
|
2866
|
-
background: #0b5fa5;
|
|
2867
|
-
color: #ffffff;
|
|
2868
|
-
font-size: 14px;
|
|
2869
|
-
font-weight: 700;
|
|
2870
|
-
}
|
|
3103
|
+
|
|
2871
3104
|
|
|
2872
3105
|
.level-1 {
|
|
2873
3106
|
background: #eaf2fb;
|
|
@@ -2878,8 +3111,7 @@ body {
|
|
|
2878
3111
|
}
|
|
2879
3112
|
|
|
2880
3113
|
/* 🔥 Allow wrapping ONLY from level-3 downward */
|
|
2881
|
-
.level-2 + .org-children,
|
|
2882
|
-
.level-3 + .org-children {
|
|
3114
|
+
.level-2 + .org-children, .level-3 + .org-children {
|
|
2883
3115
|
flex-wrap: wrap;
|
|
2884
3116
|
}
|
|
2885
3117
|
/* ================= CHILDREN ================= */
|
|
@@ -2915,11 +3147,7 @@ body {
|
|
|
2915
3147
|
background: #0b5fa5;
|
|
2916
3148
|
}
|
|
2917
3149
|
|
|
2918
|
-
|
|
2919
|
-
width: 100%;
|
|
2920
|
-
overflow-x: auto;
|
|
2921
|
-
padding: 16px;
|
|
2922
|
-
}
|
|
3150
|
+
|
|
2923
3151
|
|
|
2924
3152
|
.svg-node {
|
|
2925
3153
|
fill: #ffffff;
|
|
@@ -2927,9 +3155,7 @@ body {
|
|
|
2927
3155
|
stroke-width: 2;
|
|
2928
3156
|
}
|
|
2929
3157
|
|
|
2930
|
-
|
|
2931
|
-
fill: #0b5fa5;
|
|
2932
|
-
}
|
|
3158
|
+
|
|
2933
3159
|
|
|
2934
3160
|
svg text {
|
|
2935
3161
|
font-size: 12px;
|
|
@@ -2937,9 +3163,7 @@ svg text {
|
|
|
2937
3163
|
fill: #0b5fa5;
|
|
2938
3164
|
}
|
|
2939
3165
|
|
|
2940
|
-
|
|
2941
|
-
fill: #ffffff;
|
|
2942
|
-
}
|
|
3166
|
+
|
|
2943
3167
|
|
|
2944
3168
|
.orgchart-viewport {
|
|
2945
3169
|
width: 100%;
|
|
@@ -3400,17 +3624,9 @@ svg text {
|
|
|
3400
3624
|
}
|
|
3401
3625
|
|
|
3402
3626
|
/* View Mode Variations */
|
|
3403
|
-
.org-box.view-compact {
|
|
3404
|
-
padding: 10px 14px;
|
|
3405
|
-
min-width: 120px;
|
|
3406
|
-
max-width: 170px;
|
|
3407
|
-
}
|
|
3408
3627
|
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
min-width: 170px;
|
|
3412
|
-
max-width: 240px;
|
|
3413
|
-
}
|
|
3628
|
+
|
|
3629
|
+
|
|
3414
3630
|
|
|
3415
3631
|
.org-box:hover {
|
|
3416
3632
|
background: var(--gray-50);
|
|
@@ -3438,7 +3654,7 @@ svg text {
|
|
|
3438
3654
|
box-shadow: 0 0 25px rgba(72, 187, 120, 0.4);
|
|
3439
3655
|
}
|
|
3440
3656
|
|
|
3441
|
-
@keyframes pulse-highlight
|
|
3657
|
+
@keyframes pulse-highlight{
|
|
3442
3658
|
0%,
|
|
3443
3659
|
100% {
|
|
3444
3660
|
box-shadow: 0 0 25px rgba(246, 173, 85, 0.6);
|
|
@@ -3457,13 +3673,9 @@ svg text {
|
|
|
3457
3673
|
word-wrap: break-word;
|
|
3458
3674
|
}
|
|
3459
3675
|
|
|
3460
|
-
.view-compact .org-title {
|
|
3461
|
-
font-size: 12px;
|
|
3462
|
-
}
|
|
3463
3676
|
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
}
|
|
3677
|
+
|
|
3678
|
+
|
|
3467
3679
|
|
|
3468
3680
|
.expand-icon {
|
|
3469
3681
|
position: absolute;
|
|
@@ -3533,8 +3745,7 @@ svg text {
|
|
|
3533
3745
|
transform: translateY(-55px);
|
|
3534
3746
|
}
|
|
3535
3747
|
|
|
3536
|
-
.org-children .org-node:first-child::after,
|
|
3537
|
-
.org-children .org-node:last-child::after {
|
|
3748
|
+
.org-children .org-node:first-child::after, .org-children .org-node:last-child::after {
|
|
3538
3749
|
content: "";
|
|
3539
3750
|
position: absolute;
|
|
3540
3751
|
top: -55px;
|
|
@@ -3616,7 +3827,7 @@ svg text {
|
|
|
3616
3827
|
animation: slideIn 0.3s ease;
|
|
3617
3828
|
}
|
|
3618
3829
|
|
|
3619
|
-
@keyframes slideIn
|
|
3830
|
+
@keyframes slideIn{
|
|
3620
3831
|
from {
|
|
3621
3832
|
transform: translateY(100px);
|
|
3622
3833
|
opacity: 0;
|
|
@@ -3786,12 +3997,7 @@ svg text {
|
|
|
3786
3997
|
|
|
3787
3998
|
/* Print Styles */
|
|
3788
3999
|
@media print {
|
|
3789
|
-
.org-chart-toolbar,
|
|
3790
|
-
.level-controls,
|
|
3791
|
-
.instruction-banner,
|
|
3792
|
-
.info-panel,
|
|
3793
|
-
.chart-legend,
|
|
3794
|
-
.zoom-controls {
|
|
4000
|
+
.org-chart-toolbar, .level-controls, .instruction-banner, .info-panel, .chart-legend, .zoom-controls {
|
|
3795
4001
|
display: none !important;
|
|
3796
4002
|
}
|
|
3797
4003
|
|
|
@@ -3877,19 +4083,9 @@ svg text {
|
|
|
3877
4083
|
gap: 10px;
|
|
3878
4084
|
}
|
|
3879
4085
|
|
|
3880
|
-
.pdf-btn {
|
|
3881
|
-
padding: 6px 14px;
|
|
3882
|
-
font-size: 14px;
|
|
3883
|
-
background: #0b5ed7;
|
|
3884
|
-
color: #fff;
|
|
3885
|
-
border-radius: 4px;
|
|
3886
|
-
border: none;
|
|
3887
|
-
cursor: pointer;
|
|
3888
|
-
}
|
|
3889
4086
|
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
}
|
|
4087
|
+
|
|
4088
|
+
|
|
3893
4089
|
|
|
3894
4090
|
/* ===== Hint ===== */
|
|
3895
4091
|
.doc-hint {
|
|
@@ -3920,37 +4116,15 @@ svg text {
|
|
|
3920
4116
|
}
|
|
3921
4117
|
|
|
3922
4118
|
/* ===== Skeleton Loader ===== */
|
|
3923
|
-
.pdf-skeleton {
|
|
3924
|
-
width: 100%;
|
|
3925
|
-
min-height: 720px; /* same as pdf-container */
|
|
3926
|
-
padding: 16px;
|
|
3927
|
-
background: #f4f6f8;
|
|
3928
|
-
border-radius: 6px;
|
|
3929
|
-
}
|
|
3930
4119
|
|
|
3931
|
-
.skeleton-line {
|
|
3932
|
-
height: 14px;
|
|
3933
|
-
background: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
|
|
3934
|
-
background-size: 200% 100%;
|
|
3935
|
-
animation: skeleton 1.4s infinite;
|
|
3936
|
-
margin-bottom: 10px;
|
|
3937
|
-
border-radius: 4px;
|
|
3938
|
-
}
|
|
3939
4120
|
|
|
3940
|
-
.skeleton-line.title {
|
|
3941
|
-
width: 40%;
|
|
3942
|
-
height: 18px;
|
|
3943
|
-
}
|
|
3944
4121
|
|
|
3945
|
-
.skeleton-box {
|
|
3946
|
-
height: 420px;
|
|
3947
|
-
background: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
|
|
3948
|
-
background-size: 200% 100%;
|
|
3949
|
-
animation: skeleton 1.4s infinite;
|
|
3950
|
-
border-radius: 6px;
|
|
3951
|
-
}
|
|
3952
4122
|
|
|
3953
|
-
|
|
4123
|
+
|
|
4124
|
+
|
|
4125
|
+
|
|
4126
|
+
|
|
4127
|
+
@keyframes skeleton{
|
|
3954
4128
|
0% {
|
|
3955
4129
|
background-position: 200% 0;
|
|
3956
4130
|
}
|
|
@@ -3965,8 +4139,7 @@ svg text {
|
|
|
3965
4139
|
visibility: hidden;
|
|
3966
4140
|
}
|
|
3967
4141
|
|
|
3968
|
-
.pdf-print-area,
|
|
3969
|
-
.pdf-print-area * {
|
|
4142
|
+
.pdf-print-area, .pdf-print-area * {
|
|
3970
4143
|
visibility: visible;
|
|
3971
4144
|
}
|
|
3972
4145
|
|
|
@@ -4008,3 +4181,367 @@ svg text {
|
|
|
4008
4181
|
z-index: 10;
|
|
4009
4182
|
background: #f9f9f9;
|
|
4010
4183
|
}
|
|
4184
|
+
|
|
4185
|
+
/* ==========================================================================
|
|
4186
|
+
HIGH-FIDELITY RESPONSIVE LAYOUT OVERRIDES (UPYOG LANDING PAGE)
|
|
4187
|
+
========================================================================== */
|
|
4188
|
+
|
|
4189
|
+
/* --- 1. Global Viewport Adjustments --- */
|
|
4190
|
+
body {
|
|
4191
|
+
overflow-x: hidden;
|
|
4192
|
+
width: 100%;
|
|
4193
|
+
}
|
|
4194
|
+
|
|
4195
|
+
.upyog-landing {
|
|
4196
|
+
overflow-x: hidden;
|
|
4197
|
+
width: 100%;
|
|
4198
|
+
}
|
|
4199
|
+
|
|
4200
|
+
/* --- 2. Top Info Bar & Search Bar Mobile Tuning --- */
|
|
4201
|
+
@media (max-width: 768px) {
|
|
4202
|
+
.upyog-info-bar {
|
|
4203
|
+
padding: 6px 12px;
|
|
4204
|
+
font-size: 12px;
|
|
4205
|
+
}
|
|
4206
|
+
.upyog-info-icon {
|
|
4207
|
+
margin-left: 10px;
|
|
4208
|
+
margin-right: 6px;
|
|
4209
|
+
}
|
|
4210
|
+
.upyog-info-content {
|
|
4211
|
+
width: 90%;
|
|
4212
|
+
}
|
|
4213
|
+
|
|
4214
|
+
.upyog-search-wrapper {
|
|
4215
|
+
margin-top: -24px;
|
|
4216
|
+
padding: 0 16px;
|
|
4217
|
+
box-sizing: border-box;
|
|
4218
|
+
}
|
|
4219
|
+
|
|
4220
|
+
.upyog-search-box {
|
|
4221
|
+
width: 100%;
|
|
4222
|
+
max-width: 100%;
|
|
4223
|
+
padding: 4px 12px;
|
|
4224
|
+
border-radius: 30px;
|
|
4225
|
+
}
|
|
4226
|
+
|
|
4227
|
+
.upyog-search-icon {
|
|
4228
|
+
width: 36px;
|
|
4229
|
+
height: 36px;
|
|
4230
|
+
min-width: 36px;
|
|
4231
|
+
}
|
|
4232
|
+
|
|
4233
|
+
.upyog-search-box input {
|
|
4234
|
+
font-size: 13px !important;
|
|
4235
|
+
}
|
|
4236
|
+
|
|
4237
|
+
.upyog-search-btn {
|
|
4238
|
+
padding: 8px 18px !important;
|
|
4239
|
+
font-size: 13px !important;
|
|
4240
|
+
}
|
|
4241
|
+
}
|
|
4242
|
+
|
|
4243
|
+
/* --- 3. Hero Section Responsive Fix --- */
|
|
4244
|
+
@media (max-width: 768px) {
|
|
4245
|
+
.upyog-hero-wrapper {
|
|
4246
|
+
padding: 16px 0 20px 0;
|
|
4247
|
+
}
|
|
4248
|
+
|
|
4249
|
+
.upyog-hero-container {
|
|
4250
|
+
width: 92%;
|
|
4251
|
+
border-radius: 16px;
|
|
4252
|
+
}
|
|
4253
|
+
|
|
4254
|
+
.upyog-hero-split {
|
|
4255
|
+
flex-direction: column !important;
|
|
4256
|
+
height: auto !important; /* Prevents text cutoff */
|
|
4257
|
+
}
|
|
4258
|
+
|
|
4259
|
+
.upyog-hero-left, .upyog-hero-right {
|
|
4260
|
+
width: 100% !important;
|
|
4261
|
+
}
|
|
4262
|
+
|
|
4263
|
+
.upyog-hero-left {
|
|
4264
|
+
padding: 36px 20px !important;
|
|
4265
|
+
}
|
|
4266
|
+
|
|
4267
|
+
.upyog-hero-left::after {
|
|
4268
|
+
display: none !important; /* Hides decorative skew circle on mobile */
|
|
4269
|
+
}
|
|
4270
|
+
|
|
4271
|
+
.upyog-hero-logo {
|
|
4272
|
+
width: 140px;
|
|
4273
|
+
margin-bottom: 12px;
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4276
|
+
.upyog-hero-welcome-text {
|
|
4277
|
+
font-size: 15px;
|
|
4278
|
+
}
|
|
4279
|
+
|
|
4280
|
+
.upyog-hero-title {
|
|
4281
|
+
font-size: 28px;
|
|
4282
|
+
}
|
|
4283
|
+
|
|
4284
|
+
.upyog-hero-main-img {
|
|
4285
|
+
height: 200px !important;
|
|
4286
|
+
}
|
|
4287
|
+
}
|
|
4288
|
+
|
|
4289
|
+
/* --- 4. Suggested Links Row Mobile Spacing --- */
|
|
4290
|
+
@media (max-width: 768px) {
|
|
4291
|
+
.upyog-suggested-wrapper {
|
|
4292
|
+
margin-top: 36px !important;
|
|
4293
|
+
padding: 0 16px;
|
|
4294
|
+
gap: 8px;
|
|
4295
|
+
}
|
|
4296
|
+
|
|
4297
|
+
.upyog-suggested-label {
|
|
4298
|
+
font-size: 13px;
|
|
4299
|
+
width: 100%;
|
|
4300
|
+
text-align: center;
|
|
4301
|
+
margin-bottom: 4px;
|
|
4302
|
+
}
|
|
4303
|
+
|
|
4304
|
+
.upyog-suggested-btn {
|
|
4305
|
+
padding: 6px 14px;
|
|
4306
|
+
font-size: 12.5px;
|
|
4307
|
+
}
|
|
4308
|
+
}
|
|
4309
|
+
|
|
4310
|
+
/* --- 5. Quick Services Grid Adjustments --- */
|
|
4311
|
+
@media (max-width: 600px) {
|
|
4312
|
+
.upyog-quick-wrapper {
|
|
4313
|
+
padding: 40px 16px;
|
|
4314
|
+
}
|
|
4315
|
+
|
|
4316
|
+
.upyog-quick-title {
|
|
4317
|
+
font-size: 20px;
|
|
4318
|
+
margin-bottom: 24px;
|
|
4319
|
+
}
|
|
4320
|
+
|
|
4321
|
+
.upyog-quick-grid {
|
|
4322
|
+
gap: 12px;
|
|
4323
|
+
}
|
|
4324
|
+
|
|
4325
|
+
.upyog-quick-card {
|
|
4326
|
+
height: auto !important;
|
|
4327
|
+
padding: 12px 16px !important;
|
|
4328
|
+
}
|
|
4329
|
+
|
|
4330
|
+
.upyog-quick-text {
|
|
4331
|
+
font-size: 13.5px;
|
|
4332
|
+
}
|
|
4333
|
+
}
|
|
4334
|
+
|
|
4335
|
+
/* --- 6. Services Grid Tuning --- */
|
|
4336
|
+
@media (max-width: 768px) {
|
|
4337
|
+
.upyog-service-wrapper {
|
|
4338
|
+
padding: 32px 16px;
|
|
4339
|
+
}
|
|
4340
|
+
|
|
4341
|
+
.upyog-service-title {
|
|
4342
|
+
font-size: 20px;
|
|
4343
|
+
margin-bottom: 20px;
|
|
4344
|
+
}
|
|
4345
|
+
}
|
|
4346
|
+
|
|
4347
|
+
/* --- 7. News & Events Slider Mobile & Tablet Layout --- */
|
|
4348
|
+
@media (max-width: 992px) {
|
|
4349
|
+
.featured-news {
|
|
4350
|
+
flex-direction: column !important;
|
|
4351
|
+
padding: 20px !important;
|
|
4352
|
+
gap: 20px !important;
|
|
4353
|
+
width: 92%;
|
|
4354
|
+
}
|
|
4355
|
+
|
|
4356
|
+
.featured-left {
|
|
4357
|
+
width: 100%;
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
.featured-img {
|
|
4361
|
+
height: 240px;
|
|
4362
|
+
border-radius: 8px;
|
|
4363
|
+
}
|
|
4364
|
+
|
|
4365
|
+
.featured-right {
|
|
4366
|
+
padding-left: 0;
|
|
4367
|
+
}
|
|
4368
|
+
|
|
4369
|
+
.featured-heading {
|
|
4370
|
+
font-size: 19px;
|
|
4371
|
+
}
|
|
4372
|
+
|
|
4373
|
+
.featured-desc {
|
|
4374
|
+
font-size: 14px;
|
|
4375
|
+
}
|
|
4376
|
+
}
|
|
4377
|
+
|
|
4378
|
+
@media (max-width: 768px) {
|
|
4379
|
+
.news-events-container {
|
|
4380
|
+
padding: 40px 0;
|
|
4381
|
+
padding-bottom: 60px;
|
|
4382
|
+
}
|
|
4383
|
+
|
|
4384
|
+
.news-title {
|
|
4385
|
+
font-size: 22px;
|
|
4386
|
+
margin-bottom: 20px;
|
|
4387
|
+
}
|
|
4388
|
+
|
|
4389
|
+
.news-slider-section {
|
|
4390
|
+
padding: 50px 0 30px 0;
|
|
4391
|
+
margin-top: -15px;
|
|
4392
|
+
}
|
|
4393
|
+
|
|
4394
|
+
.slider {
|
|
4395
|
+
padding: 0 16px !important;
|
|
4396
|
+
justify-content: flex-start !important;
|
|
4397
|
+
overflow-x: auto !important;
|
|
4398
|
+
scroll-snap-type: x mandatory;
|
|
4399
|
+
scrollbar-width: none; /* Hide standard Firefox scrollbar */
|
|
4400
|
+
-webkit-overflow-scrolling: touch;
|
|
4401
|
+
}
|
|
4402
|
+
|
|
4403
|
+
.slider::-webkit-scrollbar {
|
|
4404
|
+
display: none; /* Hide Chrome/Safari scrollbar */
|
|
4405
|
+
}
|
|
4406
|
+
|
|
4407
|
+
.news-card {
|
|
4408
|
+
flex-shrink: 0 !important;
|
|
4409
|
+
scroll-snap-align: start;
|
|
4410
|
+
width: 250px !important;
|
|
4411
|
+
}
|
|
4412
|
+
|
|
4413
|
+
.slide-btn {
|
|
4414
|
+
display: none !important; /* Hide arrows on touch devices; swiping is natural */
|
|
4415
|
+
}
|
|
4416
|
+
|
|
4417
|
+
.news-footer {
|
|
4418
|
+
margin-top: -24px;
|
|
4419
|
+
}
|
|
4420
|
+
|
|
4421
|
+
.view-all-btn {
|
|
4422
|
+
padding: 10px 24px;
|
|
4423
|
+
font-size: 14px;
|
|
4424
|
+
}
|
|
4425
|
+
}
|
|
4426
|
+
|
|
4427
|
+
/* --- 8. Stats Section Mobile Layout --- */
|
|
4428
|
+
@media (max-width: 768px) {
|
|
4429
|
+
.stats-section {
|
|
4430
|
+
padding: 40px 0;
|
|
4431
|
+
}
|
|
4432
|
+
|
|
4433
|
+
.stats-container {
|
|
4434
|
+
width: 92%;
|
|
4435
|
+
gap: 16px;
|
|
4436
|
+
display: flex !important;
|
|
4437
|
+
flex-wrap: wrap !important;
|
|
4438
|
+
}
|
|
4439
|
+
|
|
4440
|
+
.stats-card {
|
|
4441
|
+
padding: 24px 16px;
|
|
4442
|
+
flex: 1 1 calc(50% - 16px) !important;
|
|
4443
|
+
min-width: calc(50% - 16px) !important;
|
|
4444
|
+
max-width: calc(50% - 16px) !important;
|
|
4445
|
+
box-sizing: border-box !important;
|
|
4446
|
+
}
|
|
4447
|
+
|
|
4448
|
+
.stats-value {
|
|
4449
|
+
font-size: 24px;
|
|
4450
|
+
}
|
|
4451
|
+
|
|
4452
|
+
.stats-title {
|
|
4453
|
+
font-size: 15px;
|
|
4454
|
+
}
|
|
4455
|
+
|
|
4456
|
+
.stats-desc {
|
|
4457
|
+
font-size: 12.5px;
|
|
4458
|
+
}
|
|
4459
|
+
}
|
|
4460
|
+
|
|
4461
|
+
@media (max-width: 480px) {
|
|
4462
|
+
.stats-card {
|
|
4463
|
+
flex: 1 1 100% !important;
|
|
4464
|
+
min-width: 100% !important;
|
|
4465
|
+
max-width: 100% !important;
|
|
4466
|
+
}
|
|
4467
|
+
}
|
|
4468
|
+
|
|
4469
|
+
/* --- 9. Video Section Aspect Ratio Fix --- */
|
|
4470
|
+
@media (max-width: 768px) {
|
|
4471
|
+
.videos-section {
|
|
4472
|
+
padding: 40px 16px;
|
|
4473
|
+
}
|
|
4474
|
+
|
|
4475
|
+
.videos-title {
|
|
4476
|
+
font-size: 20px;
|
|
4477
|
+
margin-bottom: 24px;
|
|
4478
|
+
}
|
|
4479
|
+
|
|
4480
|
+
.videos-wrapper {
|
|
4481
|
+
gap: 20px;
|
|
4482
|
+
}
|
|
4483
|
+
|
|
4484
|
+
.video-card {
|
|
4485
|
+
width: 100% !important;
|
|
4486
|
+
padding: 8px !important;
|
|
4487
|
+
box-sizing: border-box;
|
|
4488
|
+
}
|
|
4489
|
+
|
|
4490
|
+
.video-card iframe {
|
|
4491
|
+
height: auto !important;
|
|
4492
|
+
aspect-ratio: 16 / 9; /* Perfect fluid aspect ratio */
|
|
4493
|
+
}
|
|
4494
|
+
}
|
|
4495
|
+
|
|
4496
|
+
/* --- 10. Footer Section Layout Adjustments --- */
|
|
4497
|
+
@media (max-width: 1024px) {
|
|
4498
|
+
.footer-grid {
|
|
4499
|
+
grid-template-columns: 1fr 1fr !important;
|
|
4500
|
+
gap: 40px !important;
|
|
4501
|
+
padding: 40px 24px 20px 24px !important;
|
|
4502
|
+
}
|
|
4503
|
+
|
|
4504
|
+
.footer-logos {
|
|
4505
|
+
gap: 40px !important;
|
|
4506
|
+
padding: 16px 0 !important;
|
|
4507
|
+
}
|
|
4508
|
+
|
|
4509
|
+
.footer-logos img {
|
|
4510
|
+
height: 50px !important;
|
|
4511
|
+
}
|
|
4512
|
+
}
|
|
4513
|
+
|
|
4514
|
+
@media (max-width: 600px) {
|
|
4515
|
+
.footer-grid {
|
|
4516
|
+
grid-template-columns: 1fr !important;
|
|
4517
|
+
gap: 32px !important;
|
|
4518
|
+
padding: 40px 20px 20px 20px !important;
|
|
4519
|
+
}
|
|
4520
|
+
|
|
4521
|
+
.footer-logos {
|
|
4522
|
+
gap: 20px !important;
|
|
4523
|
+
flex-wrap: wrap !important;
|
|
4524
|
+
justify-content: center !important;
|
|
4525
|
+
padding: 12px 16px !important;
|
|
4526
|
+
}
|
|
4527
|
+
|
|
4528
|
+
.footer-logos img {
|
|
4529
|
+
height: 40px !important;
|
|
4530
|
+
}
|
|
4531
|
+
|
|
4532
|
+
.footer-grid h3 {
|
|
4533
|
+
margin-bottom: 16px !important;
|
|
4534
|
+
}
|
|
4535
|
+
|
|
4536
|
+
.footer-bottom-content {
|
|
4537
|
+
flex-direction: column !important;
|
|
4538
|
+
align-items: center !important;
|
|
4539
|
+
text-align: center !important;
|
|
4540
|
+
gap: 16px !important;
|
|
4541
|
+
}
|
|
4542
|
+
|
|
4543
|
+
.footer-bottom .copyright {
|
|
4544
|
+
text-align: center !important;
|
|
4545
|
+
}
|
|
4546
|
+
}
|
|
4547
|
+
|