@pmidc/upyog-css 1.1.9 → 1.1.11

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.
package/dist/index.css CHANGED
@@ -906,34 +906,57 @@ body {
906
906
  margin-left: 16px; }
907
907
 
908
908
  .link-label {
909
- color: #2947a3;
910
- color: rgba(41, 71, 163, var(--text-opacity));
911
- margin-bottom: 16px;
912
- margin-left: 16px;
913
- cursor: pointer; }
909
+ display: -webkit-inline-box;
910
+ display: -ms-inline-flexbox;
911
+ display: inline-flex;
912
+ -webkit-box-align: center;
913
+ -ms-flex-align: center;
914
+ align-items: center;
915
+ -webkit-box-pack: center;
916
+ -ms-flex-pack: center;
917
+ justify-content: center;
918
+ height: 40px;
919
+ background: linear-gradient(135deg, #2563eb, #1e40af);
920
+ color: #fff !important;
921
+ text-align: center;
922
+ outline: none;
923
+ width: 175px;
924
+ border-radius: 8px;
925
+ border: none;
926
+ font-weight: 700;
927
+ font-size: 13px;
928
+ cursor: pointer;
929
+ -webkit-transition: all .2s ease;
930
+ transition: all .2s ease;
931
+ -webkit-box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
932
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
933
+ margin: 0;
934
+ text-decoration: none; }
914
935
  .link-label:hover {
915
- color: #2947a3;
916
- color: rgba(41, 71, 163, var(--text-opacity)); }
917
-
918
- .back-btn, .link-label {
919
- display: block;
920
- font-size: 16px;
921
- line-height: 24px;
922
- --text-opacity:1;
923
- --text-opacity:1; }
936
+ -webkit-transform: translateY(-2px);
937
+ transform: translateY(-2px);
938
+ -webkit-box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
939
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
940
+ color: #fff !important; }
941
+ .link-label:focus {
942
+ outline: none; }
924
943
 
925
944
  .back-btn {
926
945
  width: -webkit-fit-content;
927
946
  width: -moz-fit-content;
928
947
  width: fit-content;
948
+ display: block;
929
949
  --border-opacity:1;
930
950
  border-color: #0d43a7;
931
951
  border-bottom: 1px;
932
952
  border-color: rgba(13, 67, 167, var(--border-opacity));
933
953
  border-style: solid;
934
954
  font-family: Roboto Condensed,sans-serif;
955
+ --text-opacity:1;
935
956
  color: #0d43a7;
936
957
  color: rgba(13, 67, 167, var(--text-opacity));
958
+ font-size: 16px;
959
+ line-height: 24px;
937
960
  margin-left: 8px;
938
961
  margin-top: 16px; }
939
962
  .back-btn label {
@@ -1049,13 +1072,13 @@ body {
1049
1072
  .citizen-and-architect-photo-clickable {
1050
1073
  cursor: pointer; }
1051
1074
 
1052
- .clu-summary-page {
1075
+ .bpa-summary-page {
1053
1076
  padding: 2rem;
1054
1077
  background-color: #f9f9f9;
1055
1078
  font-family: Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
1056
1079
  color: #333; }
1057
1080
 
1058
- .clu-summary-heading {
1081
+ .bpa-summary-heading {
1059
1082
  font-size: 1.5rem;
1060
1083
  border-bottom: 2px solid #ccc;
1061
1084
  padding-bottom: .3rem;
@@ -1063,7 +1086,7 @@ body {
1063
1086
  margin-top: 2rem;
1064
1087
  margin-bottom: 1rem; }
1065
1088
 
1066
- .clu-summary-section {
1089
+ .bpa-summary-section {
1067
1090
  background-color: #fff;
1068
1091
  padding: 1rem 1.5rem;
1069
1092
  border-radius: 8px;
@@ -1071,7 +1094,7 @@ body {
1071
1094
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
1072
1095
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
1073
1096
 
1074
- .clu-summary-label-field-pair {
1097
+ .bpa-summary-label-field-pair {
1075
1098
  display: -webkit-box;
1076
1099
  display: -ms-flexbox;
1077
1100
  display: flex;
@@ -1082,7 +1105,7 @@ body {
1082
1105
  padding: .5rem 0;
1083
1106
  color: #333; }
1084
1107
 
1085
- .clu-summary-bold-label {
1108
+ .bpa-summary-bold-label {
1086
1109
  font-weight: 700;
1087
1110
  color: #555; }
1088
1111
 
@@ -1126,6 +1149,117 @@ body {
1126
1149
  -ms-flex-align: center;
1127
1150
  align-items: center; }
1128
1151
 
1152
+ .bpa-stepper-form-container {
1153
+ padding: 16px;
1154
+ background: #f8fafc;
1155
+ min-height: calc(100vh - 120px); }
1156
+
1157
+ .bpa-stepper-form-section {
1158
+ background: #fff;
1159
+ border-radius: 12px;
1160
+ padding: 20px 24px;
1161
+ margin-bottom: 20px;
1162
+ -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
1163
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
1164
+ border: 1px solid #e5e7eb; }
1165
+
1166
+ .bpa-section-header {
1167
+ font-size: 18px !important;
1168
+ font-weight: 600 !important;
1169
+ margin-bottom: 16px !important;
1170
+ padding-bottom: 12px !important;
1171
+ border-bottom: 2px solid #e5e7eb !important; }
1172
+
1173
+ .bpa-block-section {
1174
+ background: #f8fafc;
1175
+ border-radius: 8px;
1176
+ padding: 16px;
1177
+ margin-top: 16px;
1178
+ border: 1px solid #e5e7eb; }
1179
+
1180
+ .bpa-block-header {
1181
+ font-size: 16px !important;
1182
+ font-weight: 600 !important;
1183
+ color: #374151 !important;
1184
+ margin-bottom: 12px !important; }
1185
+
1186
+ .bpa-table-container {
1187
+ margin-top: 16px;
1188
+ overflow-x: auto;
1189
+ border-radius: 8px;
1190
+ border: 1px solid #e5e7eb; }
1191
+
1192
+ .bpa-stepper-form-section .status-table-container, .bpa-stepper-form-section .status-table-container .status-table {
1193
+ margin: 0; }
1194
+
1195
+ .bpa-stepper-form-section .row {
1196
+ padding: 12px 0;
1197
+ border-bottom: 1px dashed #e5e7eb; }
1198
+
1199
+ .bpa-stepper-form-section .row:last-child {
1200
+ border-bottom: none; }
1201
+
1202
+ .bpa-stepper-form-section .row .key {
1203
+ font-weight: 500;
1204
+ color: #6b7280;
1205
+ font-size: 14px; }
1206
+
1207
+ .bpa-stepper-form-section .row .value {
1208
+ font-weight: 600;
1209
+ color: #1f2937;
1210
+ font-size: 14px; }
1211
+
1212
+ @media screen and (max-width: 768px) {
1213
+ .bpa-stepper-form-container {
1214
+ padding: 12px; }
1215
+ .bpa-stepper-form-section {
1216
+ padding: 16px;
1217
+ margin-bottom: 16px;
1218
+ border-radius: 10px; }
1219
+ .bpa-section-header {
1220
+ font-size: 16px !important;
1221
+ margin-bottom: 12px !important;
1222
+ padding-bottom: 10px !important; }
1223
+ .bpa-block-section {
1224
+ padding: 12px;
1225
+ margin-top: 12px; }
1226
+ .bpa-block-header {
1227
+ font-size: 14px !important;
1228
+ margin-bottom: 10px !important; }
1229
+ .bpa-stepper-form-section .row {
1230
+ padding: 10px 0; }
1231
+ .bpa-stepper-form-section .row .key, .bpa-stepper-form-section .row .value {
1232
+ font-size: 13px; } }
1233
+
1234
+ @media screen and (max-width: 480px) {
1235
+ .bpa-stepper-form-container {
1236
+ padding: 8px; }
1237
+ .bpa-stepper-form-section {
1238
+ padding: 12px;
1239
+ margin-bottom: 12px;
1240
+ border-radius: 8px; }
1241
+ .bpa-section-header {
1242
+ font-size: 15px !important;
1243
+ margin-bottom: 10px !important;
1244
+ padding-bottom: 8px !important; }
1245
+ .bpa-block-section {
1246
+ padding: 10px;
1247
+ margin-top: 10px; }
1248
+ .bpa-block-header {
1249
+ font-size: 13px !important; }
1250
+ .bpa-stepper-form-section .row {
1251
+ padding: 8px 0;
1252
+ -webkit-box-orient: vertical;
1253
+ -webkit-box-direction: normal;
1254
+ -ms-flex-direction: column;
1255
+ flex-direction: column;
1256
+ grid-gap: 4px;
1257
+ gap: 4px; }
1258
+ .bpa-stepper-form-section .row .key, .bpa-stepper-form-section .row .value {
1259
+ font-size: 12px; }
1260
+ .bpa-table-container {
1261
+ margin-top: 12px; } }
1262
+
1129
1263
  .navbar {
1130
1264
  --bg-opacity:1;
1131
1265
  background-color: #22394d;
@@ -1161,6 +1295,51 @@ body {
1161
1295
  padding-left: 8px;
1162
1296
  margin-left: 8px; }
1163
1297
 
1298
+ .notification-wrapper {
1299
+ position: relative;
1300
+ display: -webkit-box;
1301
+ display: -ms-flexbox;
1302
+ display: flex;
1303
+ -webkit-box-align: center;
1304
+ -ms-flex-align: center;
1305
+ align-items: center;
1306
+ -webkit-box-pack: center;
1307
+ -ms-flex-pack: center;
1308
+ justify-content: center;
1309
+ cursor: pointer;
1310
+ padding: 8px;
1311
+ border-radius: 50%;
1312
+ -webkit-transition: background-color .2s ease;
1313
+ transition: background-color .2s ease; }
1314
+ .notification-wrapper:hover {
1315
+ background-color: rgba(0, 0, 0, 0.05); }
1316
+ .notification-wrapper .notification-count {
1317
+ position: absolute;
1318
+ top: 0;
1319
+ right: 0;
1320
+ background-color: #ef4444;
1321
+ color: #fff;
1322
+ font-size: 10px;
1323
+ font-weight: 600;
1324
+ min-width: 16px;
1325
+ height: 16px;
1326
+ border-radius: 50%;
1327
+ display: -webkit-box;
1328
+ display: -ms-flexbox;
1329
+ display: flex;
1330
+ -webkit-box-align: center;
1331
+ -ms-flex-align: center;
1332
+ align-items: center;
1333
+ -webkit-box-pack: center;
1334
+ -ms-flex-pack: center;
1335
+ justify-content: center;
1336
+ padding: 2px; }
1337
+ .notification-wrapper svg {
1338
+ width: 22px;
1339
+ height: 22px;
1340
+ background: #ffdc00;
1341
+ border-radius: 50%; }
1342
+
1164
1343
  .img-circle {
1165
1344
  border-radius: 50%; }
1166
1345
 
@@ -1442,19 +1621,17 @@ body {
1442
1621
  width: 100%; }
1443
1622
 
1444
1623
  .card {
1445
- background: linear-gradient(135deg, #fff, #f8fafb);
1446
- margin: 8px;
1447
1624
  padding: 20px 24px 28px;
1448
1625
  max-width: 95vw;
1449
1626
  width: 100%;
1450
1627
  border-radius: 14px;
1451
- border: 1px solid #e1e8f0;
1452
1628
  -webkit-box-shadow: 0 12px 32px rgba(30, 58, 138, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
1453
1629
  box-shadow: 0 12px 32px rgba(30, 58, 138, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
1454
1630
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1455
1631
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1456
1632
  position: relative;
1457
- overflow: visible; }
1633
+ overflow: visible;
1634
+ margin-bottom: 15px; }
1458
1635
  .card .card-header {
1459
1636
  font-size: 20px;
1460
1637
  font-weight: 800;
@@ -1477,6 +1654,7 @@ body {
1477
1654
  color: #1e293b;
1478
1655
  text-align: left;
1479
1656
  margin-bottom: 8px;
1657
+ margin-top: 20px;
1480
1658
  text-transform: uppercase;
1481
1659
  letter-spacing: .4px; }
1482
1660
  .card .card-caption {
@@ -1500,12 +1678,13 @@ body {
1500
1678
  font-size: 13px;
1501
1679
  font-weight: 700; }
1502
1680
  .card .card-label {
1503
- font-size: 12px;
1681
+ font-size: 16px;
1504
1682
  color: #0f172a;
1505
1683
  margin-bottom: 8px;
1506
1684
  font-weight: 700;
1507
1685
  text-transform: uppercase;
1508
- letter-spacing: .5px; }
1686
+ letter-spacing: .5px;
1687
+ width: 100%; }
1509
1688
  .card .card-label-error {
1510
1689
  display: block;
1511
1690
  font-size: 12px;
@@ -1513,29 +1692,12 @@ body {
1513
1692
  margin-bottom: 16px;
1514
1693
  font-weight: 600; }
1515
1694
  .card .card-label-desc {
1695
+ font-weight: 700;
1516
1696
  color: #475569;
1697
+ font-size: 13px;
1517
1698
  margin-bottom: 16px;
1518
1699
  text-transform: uppercase;
1519
1700
  letter-spacing: .3px; }
1520
- .card .card-label-desc, .card .card-link {
1521
- font-weight: 700;
1522
- font-size: 13px; }
1523
- .card .card-link {
1524
- display: inline-block;
1525
- text-align: center;
1526
- color: #2563eb;
1527
- margin-top: 16px;
1528
- cursor: pointer;
1529
- padding: 8px 16px;
1530
- border-radius: 8px;
1531
- background: rgba(37, 99, 235, 0.08);
1532
- -webkit-transition: all .2s ease;
1533
- transition: all .2s ease;
1534
- text-decoration: none; }
1535
- .card .card-link:hover {
1536
- background: rgba(37, 99, 235, 0.16);
1537
- -webkit-transform: translateX(2px);
1538
- transform: translateX(2px); }
1539
1701
 
1540
1702
  .validation-error {
1541
1703
  display: block;
@@ -1610,7 +1772,7 @@ body {
1610
1772
  font-size: 13px;
1611
1773
  font-weight: 700; }
1612
1774
  .employeeCard .card-label {
1613
- font-size: 12px;
1775
+ font-size: 16px;
1614
1776
  color: #0f172a;
1615
1777
  margin-bottom: 8px;
1616
1778
  font-weight: 700;
@@ -1623,29 +1785,12 @@ body {
1623
1785
  margin-bottom: 16px;
1624
1786
  font-weight: 600; }
1625
1787
  .employeeCard .card-label-desc {
1788
+ font-weight: 700;
1626
1789
  color: #475569;
1790
+ font-size: 13px;
1627
1791
  margin-bottom: 16px;
1628
1792
  text-transform: uppercase;
1629
1793
  letter-spacing: .3px; }
1630
- .employeeCard .card-label-desc, .employeeCard .card-link {
1631
- font-weight: 700;
1632
- font-size: 13px; }
1633
- .employeeCard .card-link {
1634
- display: inline-block;
1635
- text-align: left;
1636
- color: #2563eb;
1637
- margin-top: 12px;
1638
- cursor: pointer;
1639
- padding: 8px 12px;
1640
- border-radius: 8px;
1641
- background: rgba(37, 99, 235, 0.08);
1642
- -webkit-transition: all .2s ease;
1643
- transition: all .2s ease;
1644
- text-decoration: none; }
1645
- .employeeCard .card-link:hover {
1646
- background: rgba(37, 99, 235, 0.16);
1647
- -webkit-transform: translateX(2px);
1648
- transform: translateX(2px); }
1649
1794
  .employeeCard .card-search-heading {
1650
1795
  margin-right: 0 !important;
1651
1796
  margin-left: 0 !important;
@@ -1675,7 +1820,36 @@ body {
1675
1820
  border-radius: 14px;
1676
1821
  border: 1px solid #e1e8f0; }
1677
1822
 
1678
- .submit-bar {
1823
+ .card-link {
1824
+ height: 40px;
1825
+ background: linear-gradient(135deg, #2563eb, #1e40af);
1826
+ color: #fff;
1827
+ text-align: center;
1828
+ outline: none;
1829
+ width: 175px;
1830
+ border-radius: 8px;
1831
+ border: none;
1832
+ font-weight: 700;
1833
+ font-size: 13px;
1834
+ cursor: pointer;
1835
+ -webkit-transition: all .2s ease;
1836
+ transition: all .2s ease;
1837
+ -webkit-box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
1838
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24); }
1839
+ .card-link:hover {
1840
+ -webkit-transform: translateY(-2px);
1841
+ transform: translateY(-2px);
1842
+ -webkit-box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
1843
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32); }
1844
+ .card-link:focus {
1845
+ outline: none; }
1846
+ .card-link header {
1847
+ font-weight: 600;
1848
+ font-size: 12px;
1849
+ color: #fff;
1850
+ line-height: 40px; }
1851
+
1852
+ .bpa-owner-submit-back, .submit-bar {
1679
1853
  height: 40px;
1680
1854
  background: linear-gradient(135deg, #2563eb, #1e40af);
1681
1855
  color: #fff;
@@ -1691,14 +1865,14 @@ body {
1691
1865
  transition: all .2s ease;
1692
1866
  -webkit-box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
1693
1867
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24); }
1694
- .submit-bar:hover {
1868
+ .bpa-owner-submit-back:hover, .submit-bar:hover {
1695
1869
  -webkit-transform: translateY(-2px);
1696
1870
  transform: translateY(-2px);
1697
1871
  -webkit-box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
1698
1872
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32); }
1699
- .submit-bar:focus {
1873
+ .bpa-owner-submit-back:focus, .submit-bar:focus {
1700
1874
  outline: none; }
1701
- .submit-bar header {
1875
+ .bpa-owner-submit-back header, .submit-bar header {
1702
1876
  font-weight: 600;
1703
1877
  font-size: 12px;
1704
1878
  color: #fff;
@@ -1723,6 +1897,58 @@ body {
1723
1897
  color: #fff;
1724
1898
  line-height: 40px; }
1725
1899
 
1900
+ .submit-bar-back {
1901
+ background: transparent !important;
1902
+ color: #2563eb !important;
1903
+ border: 1px solid #2563eb !important;
1904
+ -webkit-box-shadow: none !important;
1905
+ box-shadow: none !important;
1906
+ margin-right: 10px; }
1907
+ .submit-bar-back:hover {
1908
+ background: rgba(37, 99, 235, 0.08) !important;
1909
+ -webkit-transform: translateY(-2px);
1910
+ transform: translateY(-2px);
1911
+ -webkit-box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
1912
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important; }
1913
+
1914
+ .card-link.submit-bar, button.card-link.submit-bar {
1915
+ height: 40px !important;
1916
+ background: linear-gradient(135deg, #2563eb, #1e40af) !important;
1917
+ color: #fff !important;
1918
+ text-align: center !important;
1919
+ outline: none !important;
1920
+ width: 175px !important;
1921
+ border-radius: 8px !important;
1922
+ border: none !important;
1923
+ font-weight: 700 !important;
1924
+ font-size: 13px !important;
1925
+ cursor: pointer !important;
1926
+ -webkit-transition: all 0.2s ease !important;
1927
+ transition: all 0.2s ease !important;
1928
+ -webkit-box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24) !important;
1929
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24) !important;
1930
+ display: -webkit-inline-box !important;
1931
+ display: -ms-inline-flexbox !important;
1932
+ display: inline-flex !important;
1933
+ -webkit-box-align: center !important;
1934
+ -ms-flex-align: center !important;
1935
+ align-items: center !important;
1936
+ -webkit-box-pack: center !important;
1937
+ -ms-flex-pack: center !important;
1938
+ justify-content: center !important;
1939
+ padding: 0 16px !important;
1940
+ margin: 0 !important;
1941
+ text-decoration: none !important; }
1942
+ .card-link.submit-bar:hover, button.card-link.submit-bar:hover {
1943
+ -webkit-transform: translateY(-2px) !important;
1944
+ transform: translateY(-2px) !important;
1945
+ -webkit-box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32) !important;
1946
+ box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32) !important;
1947
+ background: linear-gradient(135deg, #2563eb, #1e40af) !important;
1948
+ color: #fff !important; }
1949
+ .card-link.submit-bar:focus, button.card-link.submit-bar:focus {
1950
+ outline: none !important; }
1951
+
1726
1952
  @media (min-width: 1024px) {
1727
1953
  .submit-bar, .submit-bar-disabled {
1728
1954
  width: 175px;
@@ -1744,8 +1970,6 @@ body {
1744
1970
  font-size: 14px; }
1745
1971
  .card .card-text, .card .card-text-primary {
1746
1972
  font-size: 16px; }
1747
- .card .card-link {
1748
- text-align: left; }
1749
1973
  .employeeCard {
1750
1974
  margin-bottom: 16px !important;
1751
1975
  margin-left: 16px !important;
@@ -1777,8 +2001,6 @@ body {
1777
2001
  font-size: 14px; }
1778
2002
  .employeeCard .card-text, .employeeCard .card-text-primary {
1779
2003
  font-size: 16px; }
1780
- .employeeCard .card-link {
1781
- text-align: left; }
1782
2004
  .employeeCard .label-field-pair {
1783
2005
  display: -webkit-box;
1784
2006
  display: -ms-flexbox;
@@ -1899,34 +2121,19 @@ body {
1899
2121
  width: 100%;
1900
2122
  margin: 0; }
1901
2123
 
1902
- .selector-button-primary {
1903
- height: 2rem;
1904
- --bg-opacity:1;
1905
- background-color: #2947a3;
1906
- background-color: rgba(41, 71, 163, var(--bg-opacity));
1907
- text-align: center;
1908
- --border-opacity:1;
1909
- border-color: #464646;
1910
- border-bottom: 1px;
1911
- border-style: solid;
1912
- border-color: rgba(70, 70, 70, var(--border-opacity));
1913
- outline: 2px solid transparent;
1914
- outline-offset: 2px;
1915
- padding-left: 24px;
1916
- padding-right: 24px; }
1917
- .selector-button-primary:focus {
1918
- outline: 2px solid transparent;
1919
- outline-offset: 2px; }
1920
- .selector-button-primary h2 {
1921
- font-family: Roboto Condensed,sans-serif;
1922
- font-weight: 500;
1923
- font-size: 19px;
1924
- line-height: 23px;
1925
- --text-opacity:1;
1926
- color: #fff;
1927
- color: rgba(255, 255, 255, var(--text-opacity)); }
2124
+ .selector-button-primary:hover {
2125
+ background-color: #1e3a8a !important;
2126
+ opacity: .9; }
2127
+
2128
+ .selector-button-primary h2 {
2129
+ font-size: 0.875rem !important;
2130
+ line-height: 1.25rem !important;
2131
+ font-weight: 500 !important;
2132
+ margin: 0 !important;
2133
+ padding: 0 !important;
2134
+ width: 100%; }
1928
2135
 
1929
- .selector-button-border {
2136
+ .selector-button-border, .selector-button-primary {
1930
2137
  background-color: #2947a3 !important;
1931
2138
  color: #fff !important;
1932
2139
  border: none !important;
@@ -1956,19 +2163,21 @@ body {
1956
2163
  min-height: 40px;
1957
2164
  width: 30%;
1958
2165
  max-height: 40px;
1959
- margin: 0; }
1960
- .selector-button-border:hover {
1961
- background-color: #1e3a8a !important;
1962
- opacity: .9; }
1963
- .selector-button-border h2 {
1964
- color: #fff !important;
1965
- font-size: 0.875rem !important;
1966
- line-height: 1.25rem !important;
1967
- font-weight: 500 !important;
1968
- margin: 0 !important;
1969
- padding: 0 !important;
1970
- border: none !important;
1971
- width: 100%; }
2166
+ margin: 0;
2167
+ color: #fff !important;
2168
+ border: none !important; }
2169
+
2170
+ .selector-button-border:hover {
2171
+ background-color: #1e3a8a !important;
2172
+ opacity: .9; }
2173
+
2174
+ .selector-button-border h2 {
2175
+ font-size: 0.875rem !important;
2176
+ line-height: 1.25rem !important;
2177
+ font-weight: 500 !important;
2178
+ margin: 0 !important;
2179
+ padding: 0 !important;
2180
+ width: 100%; }
1972
2181
 
1973
2182
  .input-mirror-selector-button {
1974
2183
  height: 4rem !important;
@@ -2136,14 +2345,14 @@ body {
2136
2345
  outline-offset: 2px;
2137
2346
  padding-left: 8px; }
2138
2347
  .employee-select-wrap .select input[type=text], .employee-select-wrap .select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .employee-select-wrap .select .input-emp[type=text], .employee-select-wrap .select p {
2139
- --text-opacity:1;
2140
- color: #0d43a7;
2141
- color: rgba(13, 67, 167, var(--text-opacity));
2142
2348
  font-size: 16px;
2143
2349
  line-height: 20px; }
2144
2350
  .employee-select-wrap .select p {
2145
2351
  padding-top: 9px;
2146
- float: left;
2352
+ --text-opacity:1;
2353
+ color: #0d43a7;
2354
+ color: rgba(13, 67, 167, var(--text-opacity));
2355
+ float: left;
2147
2356
  margin-left: 8px; }
2148
2357
  .employee-select-wrap .select img, .employee-select-wrap .select svg {
2149
2358
  float: right;
@@ -2180,12 +2389,12 @@ body {
2180
2389
  outline-offset: 2px;
2181
2390
  padding-left: 8px; }
2182
2391
  .employee-select-wrap .select-active input[type=text], .employee-select-wrap .select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .employee-select-wrap .select-active .input-emp[type=text], .employee-select-wrap .select-active p {
2183
- --text-opacity:1;
2184
- color: #0d43a7;
2185
- color: rgba(13, 67, 167, var(--text-opacity));
2186
2392
  font-size: 16px;
2187
2393
  line-height: 20px; }
2188
2394
  .employee-select-wrap .select-active p {
2395
+ --text-opacity:1;
2396
+ color: #0d43a7;
2397
+ color: rgba(13, 67, 167, var(--text-opacity));
2189
2398
  float: left;
2190
2399
  margin-left: 8px;
2191
2400
  padding-top: 9px; }
@@ -2204,7 +2413,8 @@ body {
2204
2413
  margin: 0 !important;
2205
2414
  float: none !important; }
2206
2415
  .employee-select-wrap .options-card {
2207
- width: 100% !important;
2416
+ right: 0;
2417
+ width: 144px;
2208
2418
  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
2209
2419
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
2210
2420
  max-height: 250px !important;
@@ -2215,8 +2425,7 @@ body {
2215
2425
  margin-top: 4px;
2216
2426
  --bg-opacity:1;
2217
2427
  background-color: #fff;
2218
- background-color: rgba(255, 255, 255, var(--bg-opacity));
2219
- max-width: 100%; }
2428
+ background-color: rgba(255, 255, 255, var(--bg-opacity)); }
2220
2429
  .employee-select-wrap .options-card p {
2221
2430
  padding-top: 14px;
2222
2431
  width: 100%;
@@ -2279,13 +2488,13 @@ body {
2279
2488
  outline-offset: 2px;
2280
2489
  padding-left: 8px; }
2281
2490
  .select-wrap .select input[type=text], .select-wrap .select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select .input-emp[type=text], .select-wrap .select p {
2282
- --text-opacity:1;
2283
- color: #0d43a7;
2284
- color: rgba(13, 67, 167, var(--text-opacity));
2285
2491
  font-size: 16px;
2286
2492
  line-height: 20px; }
2287
2493
  .select-wrap .select p {
2288
2494
  padding-top: 9px;
2495
+ --text-opacity:1;
2496
+ color: #0d43a7;
2497
+ color: rgba(13, 67, 167, var(--text-opacity));
2289
2498
  float: left;
2290
2499
  margin-left: 8px; }
2291
2500
  .select-wrap .select img {
@@ -2329,12 +2538,12 @@ body {
2329
2538
  outline-offset: 2px;
2330
2539
  padding-left: 8px; }
2331
2540
  .select-wrap .select-active input[type=text], .select-wrap .select-active .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select-active .input-emp[type=text], .select-wrap .select-active p {
2332
- --text-opacity:1;
2333
- color: #0d43a7;
2334
- color: rgba(13, 67, 167, var(--text-opacity));
2335
2541
  font-size: 16px;
2336
2542
  line-height: 20px; }
2337
2543
  .select-wrap .select-active p {
2544
+ --text-opacity:1;
2545
+ color: #0d43a7;
2546
+ color: rgba(13, 67, 167, var(--text-opacity));
2338
2547
  float: left;
2339
2548
  margin-left: 8px;
2340
2549
  padding-top: 9px; }
@@ -2505,7 +2714,9 @@ body {
2505
2714
  align-items: center;
2506
2715
  background: #eee;
2507
2716
  border-right: 0;
2508
- padding-right: 5px; }
2717
+ padding-right: 5px;
2718
+ position: relative;
2719
+ z-index: 0 !important; }
2509
2720
 
2510
2721
  .employee-card-input-error {
2511
2722
  padding-left: 8px;
@@ -2601,28 +2812,42 @@ body {
2601
2812
  -webkit-box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03);
2602
2813
  box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03); }
2603
2814
 
2815
+ .mobile-number-prefix {
2816
+ position: absolute;
2817
+ left: 12px;
2818
+ top: 34%;
2819
+ -webkit-transform: translateY(-50%);
2820
+ transform: translateY(-50%);
2821
+ font-size: 16px;
2822
+ font-weight: 500;
2823
+ color: #666;
2824
+ pointer-events: none;
2825
+ z-index: 0 !important; }
2826
+
2827
+ .mobile-number-input-with-prefix {
2828
+ padding-left: 45px !important; }
2829
+
2604
2830
  .emp-success-wrap, .success-wrap {
2831
+ display: block;
2832
+ --bg-opacity:1;
2605
2833
  background-color: #05a660;
2606
- background-color: rgba(5, 166, 96, var(--bg-opacity)); }
2834
+ background-color: rgba(5, 166, 96, var(--bg-opacity));
2835
+ width: 100%;
2836
+ text-align: center;
2837
+ --text-opacity:1;
2838
+ color: #fff;
2839
+ color: rgba(255, 255, 255, var(--text-opacity));
2840
+ padding-top: 16px;
2841
+ padding-bottom: 8px;
2842
+ margin-bottom: 16px; }
2607
2843
  .emp-success-wrap header, .success-wrap header {
2844
+ display: block;
2608
2845
  margin-bottom: 8px;
2609
2846
  font-family: Roboto Condensed,sans-serif;
2610
2847
  font-weight: 700;
2611
2848
  font-size: 32px;
2612
2849
  line-height: 40px; }
2613
- .emp-success-wrap div img, .success-wrap div img {
2614
- padding: 13.67px;
2615
- margin-left: auto;
2616
- margin-right: auto;
2617
- --border-opacity:1;
2618
- border: 1px solid #fff;
2619
- border-color: rgba(255, 255, 255, var(--border-opacity));
2620
- border-radius: 9999px;
2621
- height: 4rem;
2622
- width: 4rem;
2623
- background-color: #fff;
2624
- background-color: rgba(255, 255, 255, var(--bg-opacity)); }
2625
- .emp-success-wrap div svg, .success-wrap div svg {
2850
+ .emp-success-wrap div img, .emp-success-wrap div svg, .success-wrap div img, .success-wrap div svg {
2626
2851
  padding: 13.67px;
2627
2852
  margin-left: auto;
2628
2853
  margin-right: auto;
@@ -2632,25 +2857,29 @@ body {
2632
2857
  border-radius: 9999px;
2633
2858
  height: 4rem;
2634
2859
  width: 4rem;
2860
+ --bg-opacity:1;
2635
2861
  background-color: #fff;
2636
- background-color: rgba(255, 255, 255, var(--bg-opacity)); }
2862
+ background-color: rgba(255, 255, 255, var(--bg-opacity));
2863
+ margin-bottom: 16px; }
2637
2864
  .emp-success-wrap div svg.payment-svg, .success-wrap div svg.payment-svg {
2638
2865
  border: unset;
2639
2866
  background-color: unset;
2640
2867
  border-radius: 9999px; }
2641
2868
  .emp-success-wrap div h2, .success-wrap div h2 {
2642
- font-weight: 700;
2643
2869
  font-size: 16px;
2644
2870
  line-height: 19px;
2645
2871
  margin-bottom: 8px; }
2872
+ .emp-success-wrap div h2, .emp-success-wrap div p, .success-wrap div h2, .success-wrap div p {
2873
+ font-weight: 700; }
2646
2874
  .emp-success-wrap div p, .success-wrap div p {
2647
- font-weight: 700;
2648
2875
  font-size: 18px;
2649
2876
  line-height: 21px; }
2650
2877
 
2651
- .emp-error-wrap, .emp-success-wrap, .error-wrap, .success-wrap {
2878
+ .emp-error-wrap, .error-wrap {
2652
2879
  display: block;
2653
2880
  --bg-opacity:1;
2881
+ background-color: #d4351c;
2882
+ background-color: rgba(212, 53, 28, var(--bg-opacity));
2654
2883
  width: 100%;
2655
2884
  text-align: center;
2656
2885
  --text-opacity:1;
@@ -2658,17 +2887,9 @@ body {
2658
2887
  color: rgba(255, 255, 255, var(--text-opacity));
2659
2888
  padding-top: 16px;
2660
2889
  padding-bottom: 8px;
2661
- margin-bottom: 16px;
2662
- display: block;
2663
- --bg-opacity:1;
2664
- margin-bottom: 16px;
2665
- --bg-opacity:1;
2666
2890
  margin-bottom: 16px; }
2667
-
2668
- .emp-error-wrap, .error-wrap {
2669
- background-color: #d4351c;
2670
- background-color: rgba(212, 53, 28, var(--bg-opacity)); }
2671
2891
  .emp-error-wrap header, .error-wrap header {
2892
+ display: block;
2672
2893
  margin-bottom: 8px;
2673
2894
  font-family: Roboto Condensed,sans-serif;
2674
2895
  font-weight: 700;
@@ -2682,10 +2903,12 @@ body {
2682
2903
  border: 1px solid #fff;
2683
2904
  border-color: rgba(255, 255, 255, var(--border-opacity));
2684
2905
  border-radius: 9999px;
2906
+ --bg-opacity:1;
2685
2907
  background-color: #fff;
2686
2908
  background-color: rgba(255, 255, 255, var(--bg-opacity));
2687
2909
  height: 4rem;
2688
- width: 4rem; }
2910
+ width: 4rem;
2911
+ margin-bottom: 16px; }
2689
2912
 
2690
2913
  @media (min-width: 780px) {
2691
2914
  .success-wrap {
@@ -4489,10 +4712,9 @@ video::-webkit-media-controls-panel {
4489
4712
  font-size: 19px; }
4490
4713
 
4491
4714
  .customBtn, .customBtn-selected {
4715
+ --bg-opacity:1;
4492
4716
  background-color: #fff;
4493
4717
  background-color: rgba(255, 255, 255, var(--bg-opacity));
4494
- color: #0d43a7;
4495
- color: rgba(13, 67, 167, var(--text-opacity));
4496
4718
  -webkit-box-sizing: border-box;
4497
4719
  box-sizing: border-box;
4498
4720
  display: inline-block;
@@ -4509,13 +4731,11 @@ video::-webkit-media-controls-panel {
4509
4731
  border: transparent;
4510
4732
  background-color: initial; }
4511
4733
 
4512
- .customBtn, .customBtn-selected, .customBtn-selected {
4513
- --bg-opacity:1;
4514
- --text-opacity:1; }
4515
-
4516
4734
  .customBtn-selected {
4735
+ --bg-opacity:1;
4517
4736
  background-color: #2947a3;
4518
4737
  background-color: rgba(41, 71, 163, var(--bg-opacity));
4738
+ --text-opacity:1;
4519
4739
  color: #fff;
4520
4740
  color: rgba(255, 255, 255, var(--text-opacity));
4521
4741
  font-weight: 500;
@@ -4947,10 +5167,7 @@ video::-webkit-media-controls-panel {
4947
5167
  .multilink-link-button {
4948
5168
  margin: 0;
4949
5169
  font-size: 16px;
4950
- line-height: 24px;
4951
- --text-opacity:1;
4952
- color: #f18f5e;
4953
- color: rgba(241, 143, 94, var(--text-opacity)); }
5170
+ line-height: 24px; }
4954
5171
 
4955
5172
  .multilink-optionWrap {
4956
5173
  right: 0;
@@ -5805,6 +6022,7 @@ video::-webkit-media-controls-panel {
5805
6022
  font-weight: 500;
5806
6023
  cursor: pointer; }
5807
6024
  .CardBasedOptions .mainContent {
6025
+ margin: 15px;
5808
6026
  display: -webkit-box;
5809
6027
  display: -ms-flexbox;
5810
6028
  display: flex;
@@ -5944,7 +6162,7 @@ video::-webkit-media-controls-panel {
5944
6162
  border-radius: 12px;
5945
6163
  padding: 24px;
5946
6164
  margin: 8px;
5947
- min-width: 200px;
6165
+ min-width: 220px;
5948
6166
  -webkit-box-flex: 1;
5949
6167
  -ms-flex: 1 1 calc(25% - 16px);
5950
6168
  flex: 1 1 calc(25% - 16px);
@@ -7162,7 +7380,8 @@ video::-webkit-media-controls-panel {
7162
7380
 
7163
7381
  .employee-login-card {
7164
7382
  padding: 20px;
7165
- width: 650px;
7383
+ width: 100%;
7384
+ max-width: 650px;
7166
7385
  overflow: visible;
7167
7386
  position: relative;
7168
7387
  z-index: 1; }
@@ -7254,7 +7473,8 @@ video::-webkit-media-controls-panel {
7254
7473
  padding: 20px 0; }
7255
7474
  .employee-login-card {
7256
7475
  padding: 32px 24px;
7257
- border-radius: 8px; }
7476
+ border-radius: 8px;
7477
+ width: 100%; }
7258
7478
  .employee-login-icon-circle {
7259
7479
  width: 70px;
7260
7480
  height: 70px;
@@ -7467,7 +7687,10 @@ video::-webkit-media-controls-panel {
7467
7687
  min-height: calc(100vh - 48px);
7468
7688
  display: -webkit-box !important;
7469
7689
  display: -ms-flexbox !important;
7470
- display: flex !important; }
7690
+ display: flex !important;
7691
+ -webkit-box-pack: center;
7692
+ -ms-flex-pack: center;
7693
+ justify-content: center; }
7471
7694
 
7472
7695
  .citizen .sidebar, .employee .sidebar {
7473
7696
  position: fixed;
@@ -9243,6 +9466,243 @@ body {
9243
9466
  .app-iframe-wrapper {
9244
9467
  left: 0; } }
9245
9468
 
9469
+ .landing-page {
9470
+ min-height: 100vh;
9471
+ background-color: #f8fafc;
9472
+ font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif; }
9473
+
9474
+ .landing-hero {
9475
+ position: relative;
9476
+ min-height: 85vh;
9477
+ background: linear-gradient(135deg, #1e3a8a, #3b82f6 50%, #0ea5e9);
9478
+ display: -webkit-box;
9479
+ display: -ms-flexbox;
9480
+ display: flex;
9481
+ -webkit-box-align: center;
9482
+ -ms-flex-align: center;
9483
+ align-items: center;
9484
+ -webkit-box-pack: center;
9485
+ -ms-flex-pack: center;
9486
+ justify-content: center;
9487
+ padding: 40px 20px;
9488
+ overflow: hidden; }
9489
+ .landing-hero:before {
9490
+ content: "";
9491
+ position: absolute;
9492
+ top: 0;
9493
+ left: 0;
9494
+ right: 0;
9495
+ bottom: 0;
9496
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='a' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0H0v10' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='.5'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h100v100H0z'/%3E%3C/svg%3E");
9497
+ opacity: .5; }
9498
+
9499
+ .landing-hero-overlay {
9500
+ position: absolute;
9501
+ top: 0;
9502
+ left: 0;
9503
+ right: 0;
9504
+ bottom: 0;
9505
+ background: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.3) 0, transparent 50%), radial-gradient(ellipse at bottom left, rgba(14, 165, 233, 0.3) 0, transparent 50%); }
9506
+
9507
+ .landing-hero-content {
9508
+ position: relative;
9509
+ z-index: 1;
9510
+ max-width: 1200px;
9511
+ width: 100%;
9512
+ display: -webkit-box;
9513
+ display: -ms-flexbox;
9514
+ display: flex;
9515
+ -webkit-box-orient: vertical;
9516
+ -webkit-box-direction: normal;
9517
+ -ms-flex-direction: column;
9518
+ flex-direction: column;
9519
+ -webkit-box-align: center;
9520
+ -ms-flex-align: center;
9521
+ align-items: center;
9522
+ grid-gap: 48px;
9523
+ gap: 48px; }
9524
+
9525
+ .landing-hero-text {
9526
+ text-align: center;
9527
+ max-width: 700px; }
9528
+
9529
+ .landing-hero-title {
9530
+ font-size: 48px;
9531
+ font-weight: 800;
9532
+ color: #fff;
9533
+ margin-bottom: 20px;
9534
+ line-height: 1.2;
9535
+ text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
9536
+ .landing-hero-title span {
9537
+ background: linear-gradient(135deg, #fbbf24, #f59e0b);
9538
+ -webkit-background-clip: text;
9539
+ -webkit-text-fill-color: transparent;
9540
+ background-clip: text; }
9541
+ @media (max-width: 768px) {
9542
+ .landing-hero-title {
9543
+ font-size: 32px; } }
9544
+
9545
+ .landing-hero-subtitle {
9546
+ font-size: 18px;
9547
+ color: rgba(255, 255, 255, 0.9);
9548
+ line-height: 1.7;
9549
+ margin: 0; }
9550
+ @media (max-width: 768px) {
9551
+ .landing-hero-subtitle {
9552
+ font-size: 16px; } }
9553
+
9554
+ .landing-login-cards {
9555
+ display: -webkit-box;
9556
+ display: -ms-flexbox;
9557
+ display: flex;
9558
+ grid-gap: 32px;
9559
+ gap: 32px;
9560
+ -ms-flex-wrap: wrap;
9561
+ flex-wrap: wrap;
9562
+ -webkit-box-pack: center;
9563
+ -ms-flex-pack: center;
9564
+ justify-content: center; }
9565
+ @media (max-width: 768px) {
9566
+ .landing-login-cards {
9567
+ -webkit-box-orient: vertical;
9568
+ -webkit-box-direction: normal;
9569
+ -ms-flex-direction: column;
9570
+ flex-direction: column;
9571
+ grid-gap: 20px;
9572
+ gap: 20px;
9573
+ width: 100%;
9574
+ max-width: 400px; } }
9575
+
9576
+ .landing-login-card {
9577
+ background: rgba(255, 255, 255, 0.95);
9578
+ backdrop-filter: blur(20px);
9579
+ border-radius: 24px;
9580
+ padding: 40px 32px;
9581
+ width: 320px;
9582
+ cursor: pointer;
9583
+ -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
9584
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
9585
+ border: 1px solid rgba(255, 255, 255, 0.2);
9586
+ -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
9587
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
9588
+ position: relative;
9589
+ overflow: hidden; }
9590
+ .landing-login-card:before {
9591
+ content: "";
9592
+ position: absolute;
9593
+ top: 0;
9594
+ left: 0;
9595
+ right: 0;
9596
+ height: 4px;
9597
+ background: -webkit-gradient(linear, left top, right top, from(#3b82f6), to(#0ea5e9));
9598
+ background: linear-gradient(90deg, #3b82f6, #0ea5e9);
9599
+ -webkit-transform: scaleX(0);
9600
+ transform: scaleX(0);
9601
+ -webkit-transition: -webkit-transform .4s ease;
9602
+ transition: -webkit-transform .4s ease;
9603
+ transition: transform .4s ease;
9604
+ transition: transform .4s ease, -webkit-transform .4s ease;
9605
+ transition: transform .4s ease,-webkit-transform .4s ease; }
9606
+ .landing-login-card:hover {
9607
+ -webkit-transform: translateY(-12px) scale(1.02);
9608
+ transform: translateY(-12px) scale(1.02);
9609
+ -webkit-box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.15);
9610
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.15); }
9611
+ .landing-login-card:hover:before {
9612
+ -webkit-transform: scaleX(1);
9613
+ transform: scaleX(1); }
9614
+ .landing-login-card:hover .landing-login-card-icon {
9615
+ -webkit-transform: scale(1.1) rotate(5deg);
9616
+ transform: scale(1.1) rotate(5deg); }
9617
+ .landing-login-card:hover .landing-login-card-btn {
9618
+ background: linear-gradient(135deg, #2563eb, #1d4ed8);
9619
+ color: #fff; }
9620
+ .landing-login-card:hover .landing-login-card-btn svg {
9621
+ -webkit-transform: translateX(4px);
9622
+ transform: translateX(4px); }
9623
+ @media (max-width: 768px) {
9624
+ .landing-login-card {
9625
+ width: 100%;
9626
+ padding-left: 24px;
9627
+ padding-bottom: 32px;
9628
+ padding-right: 24px;
9629
+ padding-top: 32px; } }
9630
+
9631
+ .landing-login-card-citizen .landing-login-card-icon {
9632
+ background: linear-gradient(135deg, #dbeafe, #bfdbfe);
9633
+ color: #2563eb; }
9634
+
9635
+ .landing-login-card-citizen:hover .landing-login-card-btn {
9636
+ background: linear-gradient(135deg, #2563eb, #1d4ed8); }
9637
+
9638
+ .landing-login-card-employee .landing-login-card-icon {
9639
+ background: linear-gradient(135deg, #d1fae5, #a7f3d0);
9640
+ color: #059669; }
9641
+
9642
+ .landing-login-card-employee:hover .landing-login-card-btn {
9643
+ background: linear-gradient(135deg, #059669, #047857); }
9644
+
9645
+ .landing-login-card-icon {
9646
+ width: 72px;
9647
+ height: 72px;
9648
+ border-radius: 20px;
9649
+ display: -webkit-box;
9650
+ display: -ms-flexbox;
9651
+ display: flex;
9652
+ -webkit-box-align: center;
9653
+ -ms-flex-align: center;
9654
+ align-items: center;
9655
+ -webkit-box-pack: center;
9656
+ -ms-flex-pack: center;
9657
+ justify-content: center;
9658
+ margin-bottom: 24px;
9659
+ -webkit-transition: all .4s ease;
9660
+ transition: all .4s ease; }
9661
+ .landing-login-card-icon svg {
9662
+ width: 36px;
9663
+ height: 36px; }
9664
+
9665
+ .landing-login-card-title {
9666
+ font-size: 24px;
9667
+ font-weight: 700;
9668
+ color: #1e293b;
9669
+ margin: 0 0 12px; }
9670
+
9671
+ .landing-login-card-desc {
9672
+ font-size: 14px;
9673
+ color: #64748b;
9674
+ line-height: 1.6;
9675
+ margin: 0 0 24px; }
9676
+
9677
+ .landing-login-card-btn {
9678
+ display: -webkit-box;
9679
+ display: -ms-flexbox;
9680
+ display: flex;
9681
+ -webkit-box-align: center;
9682
+ -ms-flex-align: center;
9683
+ align-items: center;
9684
+ -webkit-box-pack: center;
9685
+ -ms-flex-pack: center;
9686
+ justify-content: center;
9687
+ grid-gap: 8px;
9688
+ gap: 8px;
9689
+ background: #f1f5f9;
9690
+ color: #475569;
9691
+ padding: 14px 24px;
9692
+ border-radius: 12px;
9693
+ font-size: 14px;
9694
+ font-weight: 600;
9695
+ -webkit-transition: all .3s ease;
9696
+ transition: all .3s ease; }
9697
+ .landing-login-card-btn svg {
9698
+ width: 18px;
9699
+ height: 18px;
9700
+ -webkit-transition: -webkit-transform .3s ease;
9701
+ transition: -webkit-transform .3s ease;
9702
+ transition: transform .3s ease;
9703
+ transition: transform .3s ease, -webkit-transform .3s ease;
9704
+ transition: transform .3s ease,-webkit-transform .3s ease; }
9705
+
9246
9706
  .middle-content {
9247
9707
  -webkit-box-pack: justify;
9248
9708
  -ms-flex-pack: justify;
@@ -9541,142 +10001,1384 @@ body {
9541
10001
  display: -webkit-box;
9542
10002
  display: -ms-flexbox;
9543
10003
  display: flex;
9544
- -webkit-box-pack: center;
9545
- -ms-flex-pack: center;
9546
- justify-content: center;
10004
+ -webkit-box-pack: center;
10005
+ -ms-flex-pack: center;
10006
+ justify-content: center;
10007
+ -webkit-box-align: center;
10008
+ -ms-flex-align: center;
10009
+ align-items: center;
10010
+ margin-right: 10px; }
10011
+
10012
+ .about-section, .middle-section {
10013
+ padding: 20px 60px; }
10014
+
10015
+ .title {
10016
+ text-align: left;
10017
+ color: #18191c;
10018
+ font-size: 32px;
10019
+ font-family: Poppins;
10020
+ font-weight: 400;
10021
+ text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
10022
+ margin-bottom: 20px; }
10023
+
10024
+ .about-content {
10025
+ -webkit-box-orient: vertical;
10026
+ -webkit-box-direction: normal;
10027
+ -ms-flex-direction: column;
10028
+ flex-direction: column;
10029
+ -webkit-box-align: start;
10030
+ -ms-flex-align: start;
10031
+ align-items: start; }
10032
+ @media (min-width: 640px) {
10033
+ .about-content {
10034
+ -webkit-box-orient: horizontal;
10035
+ -webkit-box-direction: normal;
10036
+ -ms-flex-direction: row;
10037
+ flex-direction: row;
10038
+ -webkit-box-pack: justify;
10039
+ -ms-flex-pack: justify;
10040
+ justify-content: space-between; } }
10041
+
10042
+ .about-content, .content {
10043
+ display: -webkit-box;
10044
+ display: -ms-flexbox;
10045
+ display: flex; }
10046
+
10047
+ .content {
10048
+ -webkit-box-pack: justify;
10049
+ -ms-flex-pack: justify;
10050
+ justify-content: space-between; }
10051
+
10052
+ .about-left-half, .about-right-half {
10053
+ width: 100%;
10054
+ font-family: Noto sans,sans-serif;
10055
+ font-size: 16px;
10056
+ color: #61646b;
10057
+ letter-spacing: .5px; }
10058
+ @media (min-width: 640px) {
10059
+ .about-left-half, .about-right-half {
10060
+ width: 48%; } }
10061
+
10062
+ .top-section-parent {
10063
+ position: relative;
10064
+ width: 100%;
10065
+ background: linear-gradient(135deg, #1e3a8a, #3b82f6 50%, #0ea5e9);
10066
+ padding: 40px 20px 60px;
10067
+ margin-top: -20px; }
10068
+ @media (max-width: 768px) {
10069
+ .top-section-parent {
10070
+ padding-left: 15px;
10071
+ padding-bottom: 50px;
10072
+ padding-right: 15px;
10073
+ padding-top: 30px; } }
10074
+
10075
+ .top-section-wrapper {
10076
+ max-width: 1200px;
10077
+ margin: 0 auto;
10078
+ display: -webkit-box;
10079
+ display: -ms-flexbox;
10080
+ display: flex;
10081
+ -webkit-box-align: center;
10082
+ -ms-flex-align: center;
10083
+ align-items: center;
10084
+ grid-gap: 16px;
10085
+ gap: 16px;
10086
+ position: relative; }
10087
+ @media (max-width: 640px) {
10088
+ .top-section-wrapper {
10089
+ grid-gap: 8px;
10090
+ gap: 8px; } }
10091
+
10092
+ .top-section-slider-container {
10093
+ -webkit-box-flex: 1;
10094
+ -ms-flex: 1;
10095
+ flex: 1;
10096
+ overflow: hidden;
10097
+ border-radius: 16px; }
10098
+
10099
+ .top-section-slider {
10100
+ display: -webkit-box;
10101
+ display: -ms-flexbox;
10102
+ display: flex;
10103
+ -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10104
+ transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10105
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10106
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10107
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
10108
+ .top-section-slider.sliding-next {
10109
+ -webkit-animation: slideNext 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10110
+ animation: slideNext 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
10111
+ .top-section-slider.sliding-prev {
10112
+ -webkit-animation: slidePrev 0.4s cubic-bezier(0.4, 0, 0.2, 1);
10113
+ animation: slidePrev 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
10114
+
10115
+ @-webkit-keyframes slideNext {
10116
+ 0% {
10117
+ opacity: .8; }
10118
+ 50% {
10119
+ opacity: .9; }
10120
+ to {
10121
+ opacity: 1; } }
10122
+
10123
+ @keyframes slideNext {
10124
+ 0% {
10125
+ opacity: .8; }
10126
+ 50% {
10127
+ opacity: .9; }
10128
+ to {
10129
+ opacity: 1; } }
10130
+
10131
+ @-webkit-keyframes slidePrev {
10132
+ 0% {
10133
+ opacity: .8; }
10134
+ 50% {
10135
+ opacity: .9; }
10136
+ to {
10137
+ opacity: 1; } }
10138
+
10139
+ @keyframes slidePrev {
10140
+ 0% {
10141
+ opacity: .8; }
10142
+ 50% {
10143
+ opacity: .9; }
10144
+ to {
10145
+ opacity: 1; } }
10146
+
10147
+ .top-section-slide-item {
10148
+ -ms-flex-negative: 0;
10149
+ flex-shrink: 0;
10150
+ padding: 8px;
10151
+ -webkit-box-sizing: border-box;
10152
+ box-sizing: border-box; }
10153
+
10154
+ .top-section-logo-card {
10155
+ background: rgba(255, 255, 255, 0.95);
10156
+ backdrop-filter: blur(10px);
10157
+ border-radius: 16px;
10158
+ padding: 24px 16px;
10159
+ display: -webkit-box;
10160
+ display: -ms-flexbox;
10161
+ display: flex;
10162
+ -webkit-box-orient: vertical;
10163
+ -webkit-box-direction: normal;
10164
+ -ms-flex-direction: column;
10165
+ flex-direction: column;
10166
+ -webkit-box-align: center;
10167
+ -ms-flex-align: center;
10168
+ align-items: center;
10169
+ -webkit-box-pack: center;
10170
+ -ms-flex-pack: center;
10171
+ justify-content: center;
10172
+ text-align: center;
10173
+ -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
10174
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
10175
+ -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
10176
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
10177
+ cursor: pointer;
10178
+ border: 2px solid transparent;
10179
+ height: 140px; }
10180
+ .top-section-logo-card:hover {
10181
+ -webkit-transform: translateY(-8px) scale(1.02);
10182
+ transform: translateY(-8px) scale(1.02);
10183
+ -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
10184
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
10185
+ border-color: rgba(59, 130, 246, 0.3); }
10186
+ .top-section-logo-card:hover .top-section-logo-icon {
10187
+ -webkit-transform: scale(1.1);
10188
+ transform: scale(1.1); }
10189
+ @media (max-width: 640px) {
10190
+ .top-section-logo-card {
10191
+ padding-left: 12px;
10192
+ padding-bottom: 20px;
10193
+ padding-right: 12px;
10194
+ padding-top: 20px;
10195
+ height: 120px; } }
10196
+
10197
+ .top-section-logo-icon {
10198
+ width: 56px;
10199
+ height: 56px;
10200
+ display: -webkit-box;
10201
+ display: -ms-flexbox;
10202
+ display: flex;
10203
+ -webkit-box-align: center;
10204
+ -ms-flex-align: center;
10205
+ align-items: center;
10206
+ -webkit-box-pack: center;
10207
+ -ms-flex-pack: center;
10208
+ justify-content: center;
10209
+ margin-bottom: 12px;
10210
+ -webkit-transition: -webkit-transform .3s ease;
10211
+ transition: -webkit-transform .3s ease;
10212
+ transition: transform .3s ease;
10213
+ transition: transform .3s ease, -webkit-transform .3s ease;
10214
+ transition: transform .3s ease,-webkit-transform .3s ease; }
10215
+ .top-section-logo-icon img {
10216
+ width: 100%;
10217
+ height: 100%;
10218
+ -o-object-fit: contain;
10219
+ object-fit: contain; }
10220
+ @media (max-width: 640px) {
10221
+ .top-section-logo-icon {
10222
+ width: 44px;
10223
+ height: 44px;
10224
+ margin-bottom: 8px; } }
10225
+
10226
+ .top-section-logo-text {
10227
+ font-size: 13px;
10228
+ font-weight: 600;
10229
+ color: #1e293b;
10230
+ margin: 0;
10231
+ line-height: 1.3; }
10232
+ @media (max-width: 640px) {
10233
+ .top-section-logo-text {
10234
+ font-size: 11px; } }
10235
+
10236
+ .top-section-nav-btn {
10237
+ width: 48px;
10238
+ height: 48px;
10239
+ border-radius: 50%;
10240
+ border: none;
10241
+ background: rgba(255, 255, 255, 0.95);
10242
+ color: #1e40af;
10243
+ display: -webkit-box;
10244
+ display: -ms-flexbox;
10245
+ display: flex;
10246
+ -webkit-box-align: center;
10247
+ -ms-flex-align: center;
10248
+ align-items: center;
10249
+ -webkit-box-pack: center;
10250
+ -ms-flex-pack: center;
10251
+ justify-content: center;
10252
+ cursor: pointer;
10253
+ -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
10254
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
10255
+ -webkit-transition: all .3s ease;
10256
+ transition: all .3s ease;
10257
+ -ms-flex-negative: 0;
10258
+ flex-shrink: 0; }
10259
+ .top-section-nav-btn svg {
10260
+ width: 24px;
10261
+ height: 24px; }
10262
+ .top-section-nav-btn:hover:not(.disabled) {
10263
+ background: #fff;
10264
+ -webkit-transform: scale(1.1);
10265
+ transform: scale(1.1);
10266
+ -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
10267
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
10268
+ .top-section-nav-btn.disabled {
10269
+ opacity: .4;
10270
+ cursor: not-allowed; }
10271
+ @media (max-width: 640px) {
10272
+ .top-section-nav-btn {
10273
+ width: 36px;
10274
+ height: 36px; }
10275
+ .top-section-nav-btn svg {
10276
+ width: 18px;
10277
+ height: 18px; } }
10278
+
10279
+ .top-section-dots {
10280
+ display: -webkit-box;
10281
+ display: -ms-flexbox;
10282
+ display: flex;
10283
+ -webkit-box-pack: center;
10284
+ -ms-flex-pack: center;
10285
+ justify-content: center;
10286
+ grid-gap: 8px;
10287
+ gap: 8px;
10288
+ margin-top: 20px; }
10289
+
10290
+ .top-section-dot {
10291
+ width: 10px;
10292
+ height: 10px;
10293
+ border-radius: 50%;
10294
+ border: none;
10295
+ background: rgba(255, 255, 255, 0.4);
10296
+ cursor: pointer;
10297
+ -webkit-transition: all .3s ease;
10298
+ transition: all .3s ease;
10299
+ padding: 0; }
10300
+ .top-section-dot:hover {
10301
+ background: rgba(255, 255, 255, 0.7); }
10302
+ .top-section-dot.active {
10303
+ background: #fff;
10304
+ -webkit-transform: scale(1.3);
10305
+ transform: scale(1.3);
10306
+ -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
10307
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
10308
+
10309
+ .top-section {
10310
+ position: absolute;
10311
+ top: -50px;
10312
+ left: 0;
10313
+ right: 0;
10314
+ -ms-flex-pack: distribute;
10315
+ justify-content: space-around; }
10316
+
10317
+ .logo-box, .top-section {
10318
+ display: -webkit-box;
10319
+ display: -ms-flexbox;
10320
+ display: flex;
10321
+ -webkit-box-align: center;
10322
+ -ms-flex-align: center;
10323
+ align-items: center; }
10324
+
10325
+ .logo-box {
10326
+ width: 120px;
10327
+ height: 100px;
10328
+ background-color: #fff;
10329
+ -webkit-box-orient: vertical;
10330
+ -webkit-box-direction: normal;
10331
+ -ms-flex-direction: column;
10332
+ flex-direction: column;
10333
+ -webkit-box-pack: center;
10334
+ -ms-flex-pack: center;
10335
+ justify-content: center;
10336
+ text-align: center;
10337
+ padding: 10px;
10338
+ -webkit-box-sizing: border-box;
10339
+ box-sizing: border-box;
10340
+ border-radius: 8px; }
10341
+
10342
+ .logo {
10343
+ max-width: 70%;
10344
+ max-height: 50%;
10345
+ padding-top: 25px; }
10346
+
10347
+ .logo-text {
10348
+ margin-top: 8px;
10349
+ color: #000;
10350
+ font-size: 15px; }
10351
+
10352
+ .nav-button {
10353
+ background: #fff;
10354
+ border: none;
10355
+ color: #000;
10356
+ font-size: 24px;
10357
+ cursor: pointer;
10358
+ margin: 0 10px;
10359
+ width: 40px;
10360
+ height: 40px;
10361
+ border-radius: 50%;
10362
+ display: -webkit-box;
10363
+ display: -ms-flexbox;
10364
+ display: flex;
10365
+ -webkit-box-align: center;
10366
+ -ms-flex-align: center;
10367
+ align-items: center;
10368
+ -webkit-box-pack: center;
10369
+ -ms-flex-pack: center;
10370
+ justify-content: center;
10371
+ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
10372
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
10373
+
10374
+ .landing-services-section {
10375
+ padding: 60px 20px;
10376
+ background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#ffffff));
10377
+ background: linear-gradient(180deg, #f8fafc, #fff); }
10378
+
10379
+ .landing-services-container {
10380
+ max-width: 1200px;
10381
+ margin: 0 auto; }
10382
+
10383
+ .landing-services-header {
10384
+ text-align: center;
10385
+ margin-bottom: 48px; }
10386
+
10387
+ .landing-services-badge {
10388
+ display: inline-block;
10389
+ background: linear-gradient(135deg, #dbeafe, #bfdbfe);
10390
+ color: #1e40af;
10391
+ padding: 8px 20px;
10392
+ border-radius: 50px;
10393
+ font-size: 14px;
10394
+ font-weight: 600;
10395
+ margin-bottom: 16px; }
10396
+
10397
+ .landing-services-title {
10398
+ font-size: 36px;
10399
+ font-weight: 700;
10400
+ color: #1e293b;
10401
+ margin: 0; }
10402
+ @media (max-width: 768px) {
10403
+ .landing-services-title {
10404
+ font-size: 28px; } }
10405
+
10406
+ .landing-services-grid {
10407
+ display: grid;
10408
+ grid-template-columns: repeat(3, 1fr);
10409
+ grid-gap: 24px;
10410
+ gap: 24px; }
10411
+ @media (max-width: 1024px) {
10412
+ .landing-services-grid {
10413
+ grid-template-columns: repeat(2, 1fr); } }
10414
+ @media (max-width: 640px) {
10415
+ .landing-services-grid {
10416
+ grid-template-columns: 1fr; } }
10417
+
10418
+ .landing-services-card {
10419
+ background: #fff;
10420
+ border-radius: 20px;
10421
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
10422
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
10423
+ overflow: hidden;
10424
+ -webkit-transition: all .3s ease;
10425
+ transition: all .3s ease; }
10426
+ .landing-services-card:hover {
10427
+ -webkit-transform: translateY(-8px);
10428
+ transform: translateY(-8px);
10429
+ -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
10430
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }
10431
+
10432
+ .landing-services-card-header {
10433
+ display: -webkit-box;
10434
+ display: -ms-flexbox;
10435
+ display: flex;
10436
+ -webkit-box-align: center;
10437
+ -ms-flex-align: center;
10438
+ align-items: center;
10439
+ grid-gap: 12px;
10440
+ gap: 12px;
10441
+ padding: 20px 24px;
10442
+ background: linear-gradient(135deg, #1e40af, #3b82f6);
10443
+ color: #fff; }
10444
+ .landing-services-card-header svg {
10445
+ width: 24px;
10446
+ height: 24px;
10447
+ -ms-flex-negative: 0;
10448
+ flex-shrink: 0; }
10449
+ .landing-services-card-header h3 {
10450
+ font-size: 18px;
10451
+ font-weight: 600;
10452
+ margin: 0; }
10453
+
10454
+ .landing-services-card-body {
10455
+ padding: 24px; }
10456
+
10457
+ .landing-services-list {
10458
+ list-style: none;
10459
+ padding: 0;
10460
+ margin: 0; }
10461
+
10462
+ .landing-services-list-item {
10463
+ display: -webkit-box;
10464
+ display: -ms-flexbox;
10465
+ display: flex;
10466
+ -webkit-box-align: center;
10467
+ -ms-flex-align: center;
10468
+ align-items: center;
10469
+ grid-gap: 12px;
10470
+ gap: 12px;
10471
+ padding: 12px 0;
10472
+ border-bottom: 1px solid #f1f5f9;
10473
+ -webkit-transition: all .2s ease;
10474
+ transition: all .2s ease; }
10475
+ .landing-services-list-item:last-child {
10476
+ border-bottom: none; }
10477
+ .landing-services-list-item:hover {
10478
+ padding-left: 8px; }
10479
+ .landing-services-list-item:hover .landing-services-list-bullet {
10480
+ -webkit-transform: scale(1.2);
10481
+ transform: scale(1.2); }
10482
+ .landing-services-list-item:hover a {
10483
+ color: #2563eb;
10484
+ color: #475569;
10485
+ text-decoration: none;
10486
+ font-size: 14px;
10487
+ font-weight: 500;
10488
+ -webkit-transition: color .2s ease;
10489
+ transition: color .2s ease; }
10490
+
10491
+ .landing-services-list-bullet {
10492
+ width: 8px;
10493
+ height: 8px;
10494
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
10495
+ border-radius: 50%;
10496
+ -ms-flex-negative: 0;
10497
+ flex-shrink: 0;
10498
+ -webkit-transition: -webkit-transform .2s ease;
10499
+ transition: -webkit-transform .2s ease;
10500
+ transition: transform .2s ease;
10501
+ transition: transform .2s ease, -webkit-transform .2s ease;
10502
+ transition: transform .2s ease,-webkit-transform .2s ease; }
10503
+
10504
+ .landing-gallery-container {
10505
+ height: 200px;
10506
+ overflow: hidden;
10507
+ border-radius: 12px; }
10508
+
10509
+ .landing-gallery-image {
10510
+ height: 100%;
10511
+ -webkit-transition: opacity .5s ease;
10512
+ transition: opacity .5s ease; }
10513
+
10514
+ .landing-gallery-nav {
10515
+ position: absolute;
10516
+ top: 50%;
10517
+ -webkit-transform: translateY(-50%);
10518
+ transform: translateY(-50%);
10519
+ background: rgba(255, 255, 255, 0.9);
10520
+ border: none;
10521
+ width: 40px;
10522
+ height: 40px;
10523
+ border-radius: 50%;
10524
+ display: -webkit-box;
10525
+ display: -ms-flexbox;
10526
+ display: flex;
10527
+ -webkit-box-align: center;
10528
+ -ms-flex-align: center;
10529
+ align-items: center;
10530
+ -webkit-box-pack: center;
10531
+ -ms-flex-pack: center;
10532
+ justify-content: center;
10533
+ cursor: pointer;
10534
+ -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
10535
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
10536
+ -webkit-transition: all .3s ease;
10537
+ transition: all .3s ease;
10538
+ color: #1e40af; }
10539
+ .landing-gallery-nav:hover {
10540
+ background: #fff;
10541
+ -webkit-transform: translateY(-50%) scale(1.1);
10542
+ transform: translateY(-50%) scale(1.1); }
10543
+ .landing-gallery-nav svg {
10544
+ width: 20px;
10545
+ height: 20px; }
10546
+
10547
+ .landing-gallery-prev {
10548
+ left: 12px; }
10549
+
10550
+ .landing-gallery-next {
10551
+ right: 12px; }
10552
+
10553
+ .landing-news-item {
10554
+ padding: 16px 0; }
10555
+ .landing-news-item:last-child {
10556
+ border-bottom: none; }
10557
+
10558
+ .landing-news-title {
10559
+ font-size: 14px;
10560
+ font-weight: 600;
10561
+ color: #1e293b;
10562
+ margin: 0 0 8px;
10563
+ line-height: 1.5; }
10564
+
10565
+ .landing-news-meta {
10566
+ display: -webkit-box;
10567
+ display: -ms-flexbox;
10568
+ display: flex;
10569
+ -webkit-box-align: center;
10570
+ -ms-flex-align: center;
10571
+ align-items: center;
10572
+ -webkit-box-pack: justify;
10573
+ -ms-flex-pack: justify;
10574
+ justify-content: space-between; }
10575
+
10576
+ .landing-news-date {
10577
+ font-size: 12px;
10578
+ color: #94a3b8; }
10579
+
10580
+ .landing-news-link {
10581
+ font-size: 12px;
10582
+ color: #3b82f6;
10583
+ text-decoration: none;
10584
+ font-weight: 600; }
10585
+ .landing-news-link:hover {
10586
+ text-decoration: underline; }
10587
+
10588
+ .landing-help-section {
10589
+ padding: 80px 20px;
10590
+ background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
10591
+
10592
+ .landing-help-container {
10593
+ max-width: 1200px;
10594
+ margin: 0 auto; }
10595
+
10596
+ .landing-help-content {
10597
+ display: -webkit-box;
10598
+ display: -ms-flexbox;
10599
+ display: flex;
10600
+ -webkit-box-orient: vertical;
10601
+ -webkit-box-direction: normal;
10602
+ -ms-flex-direction: column;
10603
+ flex-direction: column;
10604
+ -webkit-box-align: center;
10605
+ -ms-flex-align: center;
10606
+ align-items: center;
10607
+ grid-gap: 48px;
10608
+ gap: 48px; }
10609
+
10610
+ .landing-help-text {
10611
+ text-align: center;
10612
+ max-width: 600px; }
10613
+
10614
+ .landing-help-badge {
10615
+ display: inline-block;
10616
+ background: linear-gradient(135deg, #22c55e, #16a34a);
10617
+ color: #fff;
10618
+ padding: 8px 20px;
10619
+ border-radius: 50px;
10620
+ font-size: 12px;
10621
+ font-weight: 700;
10622
+ text-transform: uppercase;
10623
+ letter-spacing: 1px;
10624
+ margin-bottom: 16px; }
10625
+
10626
+ .landing-help-title {
10627
+ font-size: 36px;
10628
+ font-weight: 700;
10629
+ color: #1e293b;
10630
+ margin: 0 0 16px; }
10631
+ @media (max-width: 768px) {
10632
+ .landing-help-title {
10633
+ font-size: 28px; } }
10634
+
10635
+ .landing-help-subtitle {
10636
+ font-size: 16px;
10637
+ color: #64748b;
10638
+ margin: 0;
10639
+ line-height: 1.7; }
10640
+
10641
+ .landing-help-cards {
10642
+ display: -webkit-box;
10643
+ display: -ms-flexbox;
10644
+ display: flex;
10645
+ grid-gap: 24px;
10646
+ gap: 24px;
10647
+ -ms-flex-wrap: wrap;
10648
+ flex-wrap: wrap;
10649
+ -webkit-box-pack: center;
10650
+ -ms-flex-pack: center;
10651
+ justify-content: center; }
10652
+ @media (max-width: 768px) {
10653
+ .landing-help-cards {
10654
+ -webkit-box-orient: vertical;
10655
+ -webkit-box-direction: normal;
10656
+ -ms-flex-direction: column;
10657
+ flex-direction: column;
10658
+ width: 100%;
10659
+ max-width: 400px; } }
10660
+
10661
+ .landing-help-card {
10662
+ background: #fff;
10663
+ border-radius: 20px;
10664
+ padding: 24px;
10665
+ grid-gap: 16px;
10666
+ gap: 16px;
10667
+ min-width: 300px;
10668
+ cursor: pointer;
10669
+ -webkit-transition: all .3s ease;
10670
+ transition: all .3s ease;
10671
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
10672
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
10673
+ border: 2px solid transparent; }
10674
+ .landing-help-card:hover {
10675
+ -webkit-transform: translateY(-4px);
10676
+ transform: translateY(-4px);
10677
+ -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
10678
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
10679
+ border-color: var(--card-color); }
10680
+ .landing-help-card:hover .landing-help-card-arrow {
10681
+ opacity: 1;
10682
+ -webkit-transform: translateX(0);
10683
+ transform: translateX(0); }
10684
+ @media (max-width: 768px) {
10685
+ .landing-help-card {
10686
+ width: 100%;
10687
+ min-width: unset; } }
10688
+
10689
+ .landing-help-card, .landing-help-card-icon {
10690
+ display: -webkit-box;
10691
+ display: -ms-flexbox;
10692
+ display: flex;
10693
+ -webkit-box-align: center;
10694
+ -ms-flex-align: center;
10695
+ align-items: center; }
10696
+
10697
+ .landing-help-card-icon {
10698
+ width: 56px;
10699
+ height: 56px;
10700
+ border-radius: 16px;
10701
+ -webkit-box-pack: center;
10702
+ -ms-flex-pack: center;
10703
+ justify-content: center;
10704
+ background: var(--card-bg);
10705
+ -ms-flex-negative: 0;
10706
+ flex-shrink: 0; }
10707
+ .landing-help-card-icon img {
10708
+ width: 32px;
10709
+ height: 32px;
10710
+ -o-object-fit: contain;
10711
+ object-fit: contain; }
10712
+
10713
+ .landing-help-card-content {
10714
+ -webkit-box-flex: 1;
10715
+ -ms-flex: 1;
10716
+ flex: 1;
10717
+ display: -webkit-box;
10718
+ display: -ms-flexbox;
10719
+ display: flex;
10720
+ -webkit-box-orient: vertical;
10721
+ -webkit-box-direction: normal;
10722
+ -ms-flex-direction: column;
10723
+ flex-direction: column;
10724
+ grid-gap: 4px;
10725
+ gap: 4px; }
10726
+
10727
+ .landing-help-card-label {
10728
+ font-size: 14px;
10729
+ color: #64748b;
10730
+ font-weight: 500; }
10731
+
10732
+ .landing-help-card-value {
10733
+ font-size: 18px;
10734
+ font-weight: 700;
10735
+ color: #1e293b; }
10736
+
10737
+ .landing-help-card-arrow {
10738
+ width: 32px;
10739
+ height: 32px;
10740
+ display: -webkit-box;
10741
+ display: -ms-flexbox;
10742
+ display: flex;
10743
+ -webkit-box-align: center;
10744
+ -ms-flex-align: center;
10745
+ align-items: center;
10746
+ -webkit-box-pack: center;
10747
+ -ms-flex-pack: center;
10748
+ justify-content: center;
10749
+ color: var(--card-color);
10750
+ opacity: 0;
10751
+ -webkit-transform: translateX(-8px);
10752
+ transform: translateX(-8px);
10753
+ -webkit-transition: all .3s ease;
10754
+ transition: all .3s ease; }
10755
+ .landing-help-card-arrow svg {
10756
+ width: 20px;
10757
+ height: 20px; }
10758
+
10759
+ .landing-about-section {
10760
+ padding: 80px 20px;
10761
+ background: #fff; }
10762
+
10763
+ .landing-about-container {
10764
+ max-width: 1200px;
10765
+ margin: 0 auto; }
10766
+
10767
+ .landing-about-header {
10768
+ text-align: center;
10769
+ margin-bottom: 48px; }
10770
+
10771
+ .landing-about-badge {
10772
+ display: inline-block;
10773
+ background: linear-gradient(135deg, #dbeafe, #bfdbfe);
10774
+ color: #1e40af;
10775
+ padding: 8px 20px;
10776
+ border-radius: 50px;
10777
+ font-size: 14px;
10778
+ font-weight: 600;
10779
+ margin-bottom: 16px; }
10780
+
10781
+ .landing-about-title {
10782
+ font-size: 36px;
10783
+ font-weight: 700;
10784
+ color: #1e293b;
10785
+ margin: 0 0 16px; }
10786
+ @media (max-width: 768px) {
10787
+ .landing-about-title {
10788
+ font-size: 24px; } }
10789
+
10790
+ .landing-about-divider {
10791
+ width: 80px;
10792
+ height: 4px;
10793
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
10794
+ border-radius: 2px;
10795
+ margin: 0 auto; }
10796
+
10797
+ .landing-about-content {
10798
+ display: -webkit-box;
10799
+ display: -ms-flexbox;
10800
+ display: flex;
10801
+ -webkit-box-orient: vertical;
10802
+ -webkit-box-direction: normal;
10803
+ -ms-flex-direction: column;
10804
+ flex-direction: column;
10805
+ grid-gap: 40px;
10806
+ gap: 40px; }
10807
+
10808
+ .landing-about-main {
10809
+ display: grid;
10810
+ grid-template-columns: repeat(2, 1fr);
10811
+ grid-gap: 32px;
10812
+ gap: 32px; }
10813
+ @media (max-width: 768px) {
10814
+ .landing-about-main {
10815
+ grid-template-columns: 1fr; } }
10816
+
10817
+ .landing-about-card {
10818
+ background: #f8fafc;
10819
+ border-radius: 20px;
10820
+ padding: 32px;
10821
+ position: relative;
10822
+ overflow: hidden; }
10823
+ .landing-about-card h3 {
10824
+ font-size: 22px;
10825
+ font-weight: 700;
10826
+ color: #1e293b;
10827
+ margin: 0 0 20px; }
10828
+ .landing-about-card p {
10829
+ font-size: 15px;
10830
+ color: #64748b;
10831
+ line-height: 1.8;
10832
+ margin: 0 0 16px; }
10833
+ .landing-about-card p:last-child {
10834
+ margin-bottom: 0; }
10835
+ .landing-about-card p strong {
10836
+ color: #1e40af; }
10837
+
10838
+ .landing-about-card-accent {
10839
+ position: absolute;
10840
+ top: 0;
10841
+ left: 0;
10842
+ width: 4px;
10843
+ height: 100%;
10844
+ background: -webkit-gradient(linear, left top, left bottom, from(#3b82f6), to(#2563eb));
10845
+ background: linear-gradient(180deg, #3b82f6, #2563eb); }
10846
+
10847
+ .landing-about-highlights {
10848
+ display: -webkit-box;
10849
+ display: -ms-flexbox;
10850
+ display: flex;
10851
+ -webkit-box-pack: center;
10852
+ -ms-flex-pack: center;
10853
+ justify-content: center;
10854
+ grid-gap: 32px;
10855
+ gap: 32px;
10856
+ -ms-flex-wrap: wrap;
10857
+ flex-wrap: wrap; }
10858
+ @media (max-width: 640px) {
10859
+ .landing-about-highlights {
10860
+ grid-gap: 16px;
10861
+ gap: 16px; } }
10862
+
10863
+ .landing-about-highlight-item {
10864
+ display: -webkit-box;
10865
+ display: -ms-flexbox;
10866
+ display: flex;
10867
+ -webkit-box-align: center;
10868
+ -ms-flex-align: center;
10869
+ align-items: center;
10870
+ grid-gap: 12px;
10871
+ gap: 12px;
10872
+ background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
10873
+ padding: 16px 24px;
10874
+ border-radius: 50px;
10875
+ -webkit-transition: all .3s ease;
10876
+ transition: all .3s ease; }
10877
+ .landing-about-highlight-item:hover {
10878
+ -webkit-transform: translateY(-4px);
10879
+ transform: translateY(-4px);
10880
+ -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
10881
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
10882
+
10883
+ .landing-about-highlight-icon {
10884
+ font-size: 24px; }
10885
+
10886
+ .landing-about-highlight-text {
10887
+ font-size: 14px;
10888
+ font-weight: 600;
10889
+ color: #475569; }
10890
+
10891
+ .landing-footer {
10892
+ background: #0f172a;
10893
+ color: #fff; }
10894
+
10895
+ .landing-footer-partners {
10896
+ background: #f8fafc;
10897
+ padding: 40px 20px; }
10898
+
10899
+ .landing-footer-partners-container {
10900
+ max-width: 1200px;
10901
+ margin: 0 auto;
10902
+ text-align: center; }
10903
+
10904
+ .landing-footer-partners-title {
10905
+ font-size: 14px;
10906
+ font-weight: 600;
10907
+ color: #64748b;
10908
+ text-transform: uppercase;
10909
+ letter-spacing: 2px;
10910
+ margin: 0 0 24px; }
10911
+
10912
+ .landing-footer-partners-grid {
10913
+ display: -webkit-box;
10914
+ display: -ms-flexbox;
10915
+ display: flex;
10916
+ -webkit-box-pack: center;
10917
+ -ms-flex-pack: center;
10918
+ justify-content: center;
10919
+ -webkit-box-align: center;
10920
+ -ms-flex-align: center;
10921
+ align-items: center;
10922
+ grid-gap: 32px;
10923
+ gap: 32px;
10924
+ -ms-flex-wrap: wrap;
10925
+ flex-wrap: wrap; }
10926
+ @media (max-width: 768px) {
10927
+ .landing-footer-partners-grid {
10928
+ grid-gap: 20px;
10929
+ gap: 20px; } }
10930
+
10931
+ .landing-footer-partner-logo {
10932
+ background: #fff;
10933
+ padding: 12px 20px;
10934
+ border-radius: 12px;
10935
+ -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
10936
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
10937
+ -webkit-transition: all .3s ease;
10938
+ transition: all .3s ease; }
10939
+ .landing-footer-partner-logo:hover {
10940
+ -webkit-transform: translateY(-4px);
10941
+ transform: translateY(-4px);
10942
+ -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
10943
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
10944
+ .landing-footer-partner-logo img {
10945
+ height: 40px;
10946
+ width: auto;
10947
+ -o-object-fit: contain;
10948
+ object-fit: contain; }
10949
+ @media (max-width: 768px) {
10950
+ .landing-footer-partner-logo img {
10951
+ height: 32px; } }
10952
+
10953
+ .landing-footer-main {
10954
+ padding: 60px 20px; }
10955
+
10956
+ .landing-footer-container {
10957
+ max-width: 1200px;
10958
+ margin: 0 auto; }
10959
+
10960
+ .landing-footer-grid {
10961
+ display: grid;
10962
+ grid-template-columns: 1.5fr 1fr 1fr 1fr;
10963
+ grid-gap: 48px;
10964
+ gap: 48px; }
10965
+ @media (max-width: 1024px) {
10966
+ .landing-footer-grid {
10967
+ grid-template-columns: repeat(2, 1fr);
10968
+ grid-gap: 40px;
10969
+ gap: 40px; } }
10970
+ @media (max-width: 640px) {
10971
+ .landing-footer-grid {
10972
+ grid-template-columns: 1fr;
10973
+ grid-gap: 32px;
10974
+ gap: 32px; } }
10975
+
10976
+ .landing-footer-section-title {
10977
+ font-size: 16px;
10978
+ font-weight: 700;
10979
+ color: #fff;
10980
+ margin: 0 0 20px;
10981
+ display: -webkit-box;
10982
+ display: -ms-flexbox;
10983
+ display: flex;
10984
+ -webkit-box-align: center;
10985
+ -ms-flex-align: center;
10986
+ align-items: center;
10987
+ grid-gap: 8px;
10988
+ gap: 8px; }
10989
+ .landing-footer-section-title svg {
10990
+ width: 20px;
10991
+ height: 20px;
10992
+ color: #3b82f6; }
10993
+
10994
+ .landing-footer-address-content p {
10995
+ font-size: 14px;
10996
+ color: #94a3b8;
10997
+ line-height: 1.8;
10998
+ margin: 0 0 4px; }
10999
+
11000
+ .landing-footer-email {
11001
+ display: -webkit-box;
11002
+ display: -ms-flexbox;
11003
+ display: flex;
11004
+ -webkit-box-align: center;
11005
+ -ms-flex-align: center;
11006
+ align-items: center;
11007
+ grid-gap: 8px;
11008
+ gap: 8px;
11009
+ margin-top: 12px !important;
11010
+ color: #3b82f6 !important; }
11011
+ .landing-footer-email svg {
11012
+ color: #3b82f6; }
11013
+
11014
+ .landing-footer-links {
11015
+ list-style: none;
11016
+ padding: 0;
11017
+ margin: 0; }
11018
+ .landing-footer-links li {
11019
+ margin-bottom: 12px; }
11020
+ .landing-footer-links li a {
11021
+ font-size: 14px;
11022
+ color: #94a3b8;
11023
+ text-decoration: none;
11024
+ -webkit-transition: all .2s ease;
11025
+ transition: all .2s ease;
11026
+ display: inline-block; }
11027
+ .landing-footer-links li a:hover {
11028
+ color: #fff;
11029
+ -webkit-transform: translateX(4px);
11030
+ transform: translateX(4px); }
11031
+
11032
+ .landing-footer-social-icons {
11033
+ display: -webkit-box;
11034
+ display: -ms-flexbox;
11035
+ display: flex;
11036
+ grid-gap: 12px;
11037
+ gap: 12px; }
11038
+
11039
+ .landing-footer-social-icon {
11040
+ width: 44px;
11041
+ height: 44px;
11042
+ border-radius: 12px;
11043
+ display: -webkit-box;
11044
+ display: -ms-flexbox;
11045
+ display: flex;
11046
+ -webkit-box-align: center;
11047
+ -ms-flex-align: center;
11048
+ align-items: center;
11049
+ -webkit-box-pack: center;
11050
+ -ms-flex-pack: center;
11051
+ justify-content: center;
11052
+ background: rgba(255, 255, 255, 0.1);
11053
+ color: #fff;
11054
+ -webkit-transition: all .3s ease;
11055
+ transition: all .3s ease; }
11056
+ .landing-footer-social-icon svg {
11057
+ width: 20px;
11058
+ height: 20px; }
11059
+ .landing-footer-social-icon:hover {
11060
+ -webkit-transform: translateY(-4px);
11061
+ transform: translateY(-4px); }
11062
+
11063
+ .landing-footer-social-facebook:hover {
11064
+ background: #1877f2; }
11065
+
11066
+ .landing-footer-social-twitter:hover {
11067
+ background: #1da1f2; }
11068
+
11069
+ .landing-footer-social-linkedin:hover {
11070
+ background: #0077b5; }
11071
+
11072
+ .landing-footer-social-youtube:hover {
11073
+ background: red; }
11074
+
11075
+ .landing-footer-bottom {
11076
+ background: #020617;
11077
+ padding: 20px; }
11078
+
11079
+ .landing-footer-bottom-content {
11080
+ display: -webkit-box;
11081
+ display: -ms-flexbox;
11082
+ display: flex;
11083
+ -webkit-box-pack: center;
11084
+ -ms-flex-pack: center;
11085
+ justify-content: center;
11086
+ -webkit-box-align: center;
11087
+ -ms-flex-align: center;
11088
+ align-items: center;
11089
+ grid-gap: 8px;
11090
+ gap: 8px;
11091
+ -ms-flex-wrap: wrap;
11092
+ flex-wrap: wrap; }
11093
+ @media (max-width: 640px) {
11094
+ .landing-footer-bottom-content {
11095
+ -webkit-box-orient: vertical;
11096
+ -webkit-box-direction: normal;
11097
+ -ms-flex-direction: column;
11098
+ flex-direction: column;
11099
+ grid-gap: 12px;
11100
+ gap: 12px; } }
11101
+
11102
+ .landing-footer-copyright, .landing-footer-license, .landing-footer-powered {
11103
+ font-size: 13px;
11104
+ color: #94a3b8;
11105
+ cursor: pointer;
11106
+ -webkit-transition: color .2s ease;
11107
+ transition: color .2s ease; }
11108
+ .landing-footer-copyright:hover, .landing-footer-license:hover, .landing-footer-powered:hover {
11109
+ color: #fff; }
11110
+
11111
+ .landing-footer-license {
11112
+ text-decoration: none; }
11113
+
11114
+ .landing-footer-divider {
11115
+ color: #475569; }
11116
+ @media (max-width: 640px) {
11117
+ .landing-footer-divider {
11118
+ display: none; } }
11119
+
11120
+ .landing-middle-section {
11121
+ padding: 80px 20px;
11122
+ background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#ffffff));
11123
+ background: linear-gradient(180deg, #f8fafc, #fff); }
11124
+
11125
+ .landing-middle-container {
11126
+ max-width: 1200px;
11127
+ margin: 0 auto; }
11128
+
11129
+ .landing-section-header {
11130
+ text-align: center;
11131
+ margin-bottom: 48px; }
11132
+
11133
+ .landing-section-title {
11134
+ font-size: 36px;
11135
+ font-weight: 700;
11136
+ color: #1e293b;
11137
+ margin: 0 0 12px; }
11138
+ @media (max-width: 768px) {
11139
+ .landing-section-title {
11140
+ font-size: 28px; } }
11141
+
11142
+ .landing-section-subtitle {
11143
+ font-size: 16px;
11144
+ color: #64748b;
11145
+ margin: 0; }
11146
+
11147
+ .landing-middle-grid {
11148
+ display: grid;
11149
+ grid-template-columns: repeat(3, 1fr);
11150
+ grid-gap: 24px;
11151
+ gap: 24px; }
11152
+ @media (max-width: 1024px) {
11153
+ .landing-middle-grid {
11154
+ grid-template-columns: repeat(2, 1fr); } }
11155
+ @media (max-width: 640px) {
11156
+ .landing-middle-grid {
11157
+ grid-template-columns: 1fr; } }
11158
+
11159
+ .landing-info-card {
11160
+ background: #fff;
11161
+ border-radius: 20px;
11162
+ -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
11163
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
11164
+ overflow: hidden;
11165
+ -webkit-transition: all .3s ease;
11166
+ transition: all .3s ease; }
11167
+ .landing-info-card:hover {
11168
+ -webkit-transform: translateY(-8px);
11169
+ transform: translateY(-8px);
11170
+ -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
11171
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); }
11172
+
11173
+ .landing-card-header {
11174
+ grid-gap: 12px;
11175
+ gap: 12px;
11176
+ padding: 20px 24px;
11177
+ background: linear-gradient(135deg, #1e40af, #3b82f6);
11178
+ color: #fff; }
11179
+
11180
+ .landing-card-header, .landing-card-icon {
11181
+ display: -webkit-box;
11182
+ display: -ms-flexbox;
11183
+ display: flex;
11184
+ -webkit-box-align: center;
11185
+ -ms-flex-align: center;
11186
+ align-items: center; }
11187
+
11188
+ .landing-card-icon {
11189
+ width: 44px;
11190
+ height: 44px;
11191
+ border-radius: 12px;
11192
+ background: rgba(255, 255, 255, 0.2);
11193
+ -webkit-box-pack: center;
11194
+ -ms-flex-pack: center;
11195
+ justify-content: center; }
11196
+ .landing-card-icon svg {
11197
+ width: 24px;
11198
+ height: 24px; }
11199
+
11200
+ .landing-card-icon-purple {
11201
+ background: rgba(139, 92, 246, 0.3); }
11202
+
11203
+ .landing-card-icon-amber {
11204
+ background: rgba(245, 158, 11, 0.3); }
11205
+
11206
+ .landing-card-title {
11207
+ font-size: 18px;
11208
+ font-weight: 600;
11209
+ margin: 0; }
11210
+
11211
+ .landing-projects-card .landing-card-header {
11212
+ background: linear-gradient(135deg, #1e40af, #3b82f6); }
11213
+
11214
+ .landing-projects-list {
11215
+ padding: 8px; }
11216
+
11217
+ .landing-project-item {
11218
+ display: -webkit-box;
11219
+ display: -ms-flexbox;
11220
+ display: flex;
11221
+ -webkit-box-align: center;
11222
+ -ms-flex-align: center;
11223
+ align-items: center;
11224
+ grid-gap: 12px;
11225
+ gap: 12px;
11226
+ padding: 14px 16px;
11227
+ border-radius: 12px;
11228
+ text-decoration: none;
11229
+ color: #1e293b;
11230
+ -webkit-transition: all .2s ease;
11231
+ transition: all .2s ease; }
11232
+ .landing-project-item:hover {
11233
+ background: #f1f5f9; }
11234
+ .landing-project-item:hover .landing-project-arrow {
11235
+ opacity: 1;
11236
+ -webkit-transform: translateX(0);
11237
+ transform: translateX(0); }
11238
+
11239
+ .landing-project-icon {
11240
+ font-size: 20px;
11241
+ width: 36px;
11242
+ height: 36px;
11243
+ display: -webkit-box;
11244
+ display: -ms-flexbox;
11245
+ display: flex;
9547
11246
  -webkit-box-align: center;
9548
11247
  -ms-flex-align: center;
9549
11248
  align-items: center;
9550
- margin-right: 10px; }
9551
-
9552
- .about-section, .middle-section {
9553
- padding: 20px 60px; }
9554
-
9555
- .title {
9556
- text-align: left;
9557
- color: #18191c;
9558
- font-size: 32px;
9559
- font-family: Poppins;
9560
- font-weight: 400;
9561
- text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
9562
- margin-bottom: 20px; }
9563
-
9564
- .about-content {
9565
- -webkit-box-orient: vertical;
9566
- -webkit-box-direction: normal;
9567
- -ms-flex-direction: column;
9568
- flex-direction: column;
9569
- -webkit-box-align: start;
9570
- -ms-flex-align: start;
9571
- align-items: start; }
9572
- @media (min-width: 640px) {
9573
- .about-content {
9574
- -webkit-box-orient: horizontal;
9575
- -webkit-box-direction: normal;
9576
- -ms-flex-direction: row;
9577
- flex-direction: row;
9578
- -webkit-box-pack: justify;
9579
- -ms-flex-pack: justify;
9580
- justify-content: space-between; } }
11249
+ -webkit-box-pack: center;
11250
+ -ms-flex-pack: center;
11251
+ justify-content: center;
11252
+ background: #f1f5f9;
11253
+ border-radius: 10px; }
9581
11254
 
9582
- .about-content, .content {
9583
- display: -webkit-box;
9584
- display: -ms-flexbox;
9585
- display: flex; }
11255
+ .landing-project-name {
11256
+ -webkit-box-flex: 1;
11257
+ -ms-flex: 1;
11258
+ flex: 1;
11259
+ font-size: 14px;
11260
+ font-weight: 600; }
9586
11261
 
9587
- .content {
9588
- -webkit-box-pack: justify;
9589
- -ms-flex-pack: justify;
9590
- justify-content: space-between; }
11262
+ .landing-project-arrow {
11263
+ width: 20px;
11264
+ height: 20px;
11265
+ color: #3b82f6;
11266
+ opacity: 0;
11267
+ -webkit-transform: translateX(-8px);
11268
+ transform: translateX(-8px);
11269
+ -webkit-transition: all .2s ease;
11270
+ transition: all .2s ease; }
9591
11271
 
9592
- .about-left-half, .about-right-half {
9593
- width: 100%;
9594
- font-family: Noto sans,sans-serif;
9595
- font-size: 16px;
9596
- color: #61646b;
9597
- letter-spacing: .5px; }
9598
- @media (min-width: 640px) {
9599
- .about-left-half, .about-right-half {
9600
- width: 48%; } }
11272
+ .landing-gallery-card .landing-card-header {
11273
+ background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
9601
11274
 
9602
- .top-section-parent {
11275
+ .landing-gallery-container {
9603
11276
  position: relative;
11277
+ padding: 16px; }
11278
+
11279
+ .landing-gallery-image {
9604
11280
  width: 100%;
9605
- background: -webkit-gradient(linear, left top, left bottom, from(#3765ca), to(#294a97));
9606
- background: linear-gradient(180deg, #3765ca, #294a97);
9607
- height: 160px; }
11281
+ height: 180px;
11282
+ -o-object-fit: cover;
11283
+ object-fit: cover;
11284
+ border-radius: 12px; }
9608
11285
 
9609
- .top-section {
9610
- position: absolute;
9611
- top: -50px;
9612
- left: 0;
9613
- right: 0;
9614
- -ms-flex-pack: distribute;
9615
- justify-content: space-around; }
11286
+ .landing-gallery-controls {
11287
+ grid-gap: 16px;
11288
+ gap: 16px;
11289
+ margin-top: 16px; }
9616
11290
 
9617
- .logo-box, .top-section {
11291
+ .landing-gallery-btn, .landing-gallery-controls {
9618
11292
  display: -webkit-box;
9619
11293
  display: -ms-flexbox;
9620
11294
  display: flex;
9621
11295
  -webkit-box-align: center;
9622
11296
  -ms-flex-align: center;
9623
- align-items: center; }
9624
-
9625
- .logo-box {
9626
- width: 120px;
9627
- height: 100px;
9628
- background-color: #fff;
9629
- -webkit-box-orient: vertical;
9630
- -webkit-box-direction: normal;
9631
- -ms-flex-direction: column;
9632
- flex-direction: column;
11297
+ align-items: center;
9633
11298
  -webkit-box-pack: center;
9634
11299
  -ms-flex-pack: center;
9635
- justify-content: center;
9636
- text-align: center;
9637
- padding: 10px;
9638
- -webkit-box-sizing: border-box;
9639
- box-sizing: border-box;
9640
- border-radius: 8px; }
9641
-
9642
- .logo {
9643
- max-width: 70%;
9644
- max-height: 50%;
9645
- padding-top: 25px; }
9646
-
9647
- .logo-text {
9648
- margin-top: 8px;
9649
- color: #000;
9650
- font-size: 15px; }
11300
+ justify-content: center; }
9651
11301
 
9652
- .nav-button {
9653
- background: #fff;
11302
+ .landing-gallery-btn {
11303
+ width: 36px;
11304
+ height: 36px;
11305
+ border-radius: 50%;
9654
11306
  border: none;
9655
- color: #000;
9656
- font-size: 24px;
11307
+ background: #f1f5f9;
11308
+ color: #475569;
9657
11309
  cursor: pointer;
9658
- margin: 0 10px;
9659
- width: 40px;
9660
- height: 40px;
11310
+ -webkit-transition: all .2s ease;
11311
+ transition: all .2s ease; }
11312
+ .landing-gallery-btn svg {
11313
+ width: 20px;
11314
+ height: 20px; }
11315
+ .landing-gallery-btn:hover {
11316
+ background: #3b82f6;
11317
+ color: #fff; }
11318
+
11319
+ .landing-gallery-dots {
11320
+ display: -webkit-box;
11321
+ display: -ms-flexbox;
11322
+ display: flex;
11323
+ grid-gap: 8px;
11324
+ gap: 8px; }
11325
+
11326
+ .landing-gallery-dot {
11327
+ width: 10px;
11328
+ height: 10px;
9661
11329
  border-radius: 50%;
9662
- -webkit-box-align: center;
9663
- -ms-flex-align: center;
9664
- align-items: center;
9665
- -webkit-box-pack: center;
9666
- -ms-flex-pack: center;
9667
- justify-content: center;
9668
- -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
9669
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
11330
+ background: #e2e8f0;
11331
+ cursor: pointer;
11332
+ -webkit-transition: all .2s ease;
11333
+ transition: all .2s ease; }
11334
+ .landing-gallery-dot.active {
11335
+ background: #3b82f6;
11336
+ -webkit-transform: scale(1.2);
11337
+ transform: scale(1.2); }
11338
+ .landing-gallery-dot:hover:not(.active) {
11339
+ background: #94a3b8; }
9670
11340
 
9671
- .footer-bottom, .nav-button {
11341
+ .landing-news-card .landing-card-header {
11342
+ background: linear-gradient(135deg, #d97706, #f59e0b); }
11343
+
11344
+ .landing-news-list {
11345
+ padding: 16px 24px; }
11346
+
11347
+ .landing-news-item {
9672
11348
  display: -webkit-box;
9673
11349
  display: -ms-flexbox;
9674
- display: flex; }
11350
+ display: flex;
11351
+ -webkit-box-align: start;
11352
+ -ms-flex-align: start;
11353
+ align-items: flex-start;
11354
+ grid-gap: 12px;
11355
+ gap: 12px;
11356
+ padding: 12px 0;
11357
+ border-bottom: 1px solid #f1f5f9; }
11358
+ .landing-news-item:last-child {
11359
+ border-bottom: none; }
11360
+
11361
+ .landing-news-bullet {
11362
+ width: 8px;
11363
+ height: 8px;
11364
+ min-width: 8px;
11365
+ background: linear-gradient(135deg, #f59e0b, #d97706);
11366
+ border-radius: 50%;
11367
+ margin-top: 6px; }
11368
+
11369
+ .landing-news-text {
11370
+ font-size: 14px;
11371
+ color: #475569;
11372
+ line-height: 1.6;
11373
+ margin: 0; }
9675
11374
 
9676
11375
  .footer-bottom {
9677
11376
  background-color: #294a97;
9678
11377
  width: 100%;
9679
11378
  min-height: 200px;
11379
+ display: -webkit-box;
11380
+ display: -ms-flexbox;
11381
+ display: flex;
9680
11382
  -webkit-box-orient: horizontal;
9681
11383
  -webkit-box-direction: normal;
9682
11384
  -ms-flex-direction: row;
@@ -9689,6 +11391,9 @@ body {
9689
11391
  color: #fff; }
9690
11392
  @media (max-width: 639px) {
9691
11393
  .footer-bottom {
11394
+ display: -webkit-box;
11395
+ display: -ms-flexbox;
11396
+ display: flex;
9692
11397
  -webkit-box-orient: vertical;
9693
11398
  -webkit-box-direction: normal;
9694
11399
  -ms-flex-direction: column;
@@ -11935,7 +13640,9 @@ body {
11935
13640
  .swach {
11936
13641
  width: 60vw !important; }
11937
13642
  .swach .card .employee-card-input--front {
11938
- background-color: #fff; }
13643
+ background-color: #fff;
13644
+ position: relative;
13645
+ z-index: 0 !important; }
11939
13646
  .swach .card input[name=mobileNumber], .swach .card .checkbox-wrap .input-emp[name=mobileNumber], .checkbox-wrap .swach .card .input-emp[name=mobileNumber] {
11940
13647
  max-width: 490px; }
11941
13648
  .swach .mandatory-asterisk {
@@ -12115,23 +13822,23 @@ body {
12115
13822
  color: red !important; }
12116
13823
 
12117
13824
  .login-page-cover {
12118
- height: 90vh;
12119
- background: linear-gradient(135deg, #667eea, #764ba2);
12120
13825
  -webkit-box-align: center;
12121
13826
  -ms-flex-align: center;
12122
13827
  align-items: center;
12123
13828
  -webkit-box-pack: center;
12124
13829
  -ms-flex-pack: center;
12125
- justify-content: center; }
13830
+ justify-content: center;
13831
+ -webkit-box-sizing: border-box;
13832
+ box-sizing: border-box; }
12126
13833
 
12127
13834
  .login-container, .login-page-cover {
12128
13835
  width: 100%;
13836
+ min-height: calc(100vh - 56px);
12129
13837
  display: -webkit-box;
12130
13838
  display: -ms-flexbox;
12131
13839
  display: flex; }
12132
13840
 
12133
13841
  .login-container {
12134
- height: 100vh;
12135
13842
  max-width: 100%;
12136
13843
  background-color: #fff;
12137
13844
  overflow: hidden; }
@@ -12248,23 +13955,6 @@ body {
12248
13955
  font-weight: 500;
12249
13956
  text-align: center; }
12250
13957
 
12251
- .login-form-panel {
12252
- -webkit-box-flex: 1;
12253
- -ms-flex: 1;
12254
- flex: 1;
12255
- display: -webkit-box;
12256
- display: -ms-flexbox;
12257
- display: flex;
12258
- -webkit-box-align: center;
12259
- -ms-flex-align: center;
12260
- align-items: center;
12261
- -webkit-box-pack: center;
12262
- -ms-flex-pack: center;
12263
- justify-content: center;
12264
- background-color: #f5f5f5;
12265
- overflow-y: auto;
12266
- padding: 20px; }
12267
-
12268
13958
  .login-wrapper {
12269
13959
  width: 100%;
12270
13960
  max-width: 480px;
@@ -12275,9 +13965,7 @@ body {
12275
13965
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); }
12276
13966
 
12277
13967
  .login-form-header {
12278
- margin-bottom: 30px; }
12279
-
12280
- .login-form-header, .register-login-wrapper {
13968
+ margin-bottom: 30px;
12281
13969
  display: -webkit-box;
12282
13970
  display: -ms-flexbox;
12283
13971
  display: flex;
@@ -12294,15 +13982,6 @@ body {
12294
13982
  border-radius: 4px;
12295
13983
  position: relative; }
12296
13984
 
12297
- .register-login-wrapper {
12298
- margin: 8px;
12299
- padding: 2rem;
12300
- -webkit-box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
12301
- box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
12302
- width: 35%;
12303
- max-width: 100vw;
12304
- height: 900px; }
12305
-
12306
13985
  .login-title {
12307
13986
  font-size: 2rem;
12308
13987
  font-weight: 700;
@@ -12326,7 +14005,6 @@ body {
12326
14005
  color: #ff1515; }
12327
14006
 
12328
14007
  .input-wrapper, .language-wrapper, .location-wrapper {
12329
- margin-bottom: 24px;
12330
14008
  width: 100%; }
12331
14009
 
12332
14010
  .location-wrapper .select {
@@ -12396,7 +14074,27 @@ body {
12396
14074
  padding: 40px;
12397
14075
  border-radius: 12px;
12398
14076
  -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
12399
- box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); }
14077
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
14078
+ max-height: calc(100vh - 100px);
14079
+ overflow-y: auto; }
14080
+
14081
+ .login-form-panel {
14082
+ -webkit-box-flex: 1;
14083
+ -ms-flex: 1;
14084
+ flex: 1;
14085
+ display: -webkit-box;
14086
+ display: -ms-flexbox;
14087
+ display: flex;
14088
+ -webkit-box-align: center;
14089
+ -ms-flex-align: center;
14090
+ align-items: center;
14091
+ -webkit-box-pack: center;
14092
+ -ms-flex-pack: center;
14093
+ justify-content: center;
14094
+ background-color: #f5f5f5;
14095
+ overflow-y: auto;
14096
+ padding: 20px;
14097
+ min-height: calc(100vh - 56px); }
12400
14098
 
12401
14099
  @media (max-width: 1024px) {
12402
14100
  .login-hero-panel {
@@ -12425,8 +14123,6 @@ body {
12425
14123
  font-size: 1.5rem; }
12426
14124
  .login-form-header {
12427
14125
  margin-bottom: 24px; }
12428
- .input-wrapper, .language-wrapper, .location-wrapper {
12429
- margin-bottom: 20px; }
12430
14126
  .account-link, .label {
12431
14127
  font-size: 14px; }
12432
14128
  .lag-loc-wrapper {
@@ -12537,7 +14233,9 @@ body {
12537
14233
 
12538
14234
  .loader-message {
12539
14235
  overflow: hidden;
12540
- position: relative;
14236
+ position: fixed;
14237
+ top: 0;
14238
+ left: 0;
12541
14239
  height: 100vh;
12542
14240
  width: 100vw;
12543
14241
  display: -webkit-box;
@@ -12555,12 +14253,12 @@ body {
12555
14253
  flex-direction: column;
12556
14254
  font-weight: 600;
12557
14255
  font-size: 14px;
12558
- color: #000; }
14256
+ color: #000;
14257
+ background: linear-gradient(135deg, #f0f4ff, #e0e7ff 50%, #dbeafe);
14258
+ z-index: 9999; }
12559
14259
 
12560
14260
  .loader-message .body {
12561
- position: absolute;
12562
- left: 44%;
12563
- top: 50%;
14261
+ position: relative;
12564
14262
  -webkit-animation: speeder .4s linear infinite;
12565
14263
  animation: speeder .4s linear infinite; }
12566
14264
 
@@ -12578,7 +14276,7 @@ body {
12578
14276
  width: 0;
12579
14277
  height: 0;
12580
14278
  border-top: 6px solid transparent;
12581
- border-right: 100px solid #000;
14279
+ border-right: 100px solid #1e3a5f;
12582
14280
  border-bottom: 6px solid transparent; }
12583
14281
 
12584
14282
  .loader-message .base span:before {
@@ -12597,7 +14295,7 @@ body {
12597
14295
  width: 0;
12598
14296
  height: 0;
12599
14297
  border-top: 0 solid transparent;
12600
- border-right: 55px solid #000;
14298
+ border-right: 55px solid #1e3a5f;
12601
14299
  border-bottom: 16px solid transparent;
12602
14300
  top: -16px;
12603
14301
  right: -98px; }
@@ -12786,13 +14484,17 @@ body {
12786
14484
  .loader-message .longfazers {
12787
14485
  position: absolute;
12788
14486
  width: 100%;
12789
- height: 100%; }
14487
+ height: 100%;
14488
+ top: 0;
14489
+ left: 0;
14490
+ pointer-events: none; }
12790
14491
 
12791
14492
  .loader-message .longfazers span {
12792
14493
  position: absolute;
12793
14494
  height: 2px;
12794
14495
  width: 20%;
12795
- background: #0d43a7; }
14496
+ background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#0d43a7), to(transparent));
14497
+ background: linear-gradient(90deg, transparent, #0d43a7, transparent); }
12796
14498
 
12797
14499
  .loader-message .longfazers span:first-child {
12798
14500
  top: 20%;
@@ -12822,13 +14524,18 @@ body {
12822
14524
 
12823
14525
  .loader-message .message {
12824
14526
  position: absolute;
12825
- font-family: Open Sans,sans-serif;
14527
+ font-family: Roboto,Open Sans,sans-serif;
12826
14528
  font-weight: 600;
12827
- font-size: 12px;
14529
+ font-size: 16px;
12828
14530
  text-transform: uppercase;
12829
- left: 44%;
12830
- top: 58%;
12831
- margin-left: -20px; }
14531
+ letter-spacing: 2px;
14532
+ bottom: 35%;
14533
+ left: 50%;
14534
+ -webkit-transform: translateX(-50%);
14535
+ transform: translateX(-50%);
14536
+ color: #0d43a7;
14537
+ text-align: center;
14538
+ white-space: nowrap; }
12832
14539
 
12833
14540
  @-webkit-keyframes lf {
12834
14541
  0% {
@@ -12886,6 +14593,37 @@ body {
12886
14593
  left: -100%;
12887
14594
  opacity: 0; } }
12888
14595
 
14596
+ @media screen and (max-width: 768px) {
14597
+ .loader-message .body {
14598
+ -webkit-transform: scale(0.85);
14599
+ transform: scale(0.85); }
14600
+ .loader-message .message {
14601
+ font-size: 14px;
14602
+ letter-spacing: 1.5px; }
14603
+ .loader-message .longfazers span {
14604
+ height: 1.5px; } }
14605
+
14606
+ @media screen and (max-width: 480px) {
14607
+ .loader-message .body {
14608
+ -webkit-transform: scale(0.7);
14609
+ transform: scale(0.7); }
14610
+ .loader-message .message {
14611
+ font-size: 12px;
14612
+ letter-spacing: 1px;
14613
+ bottom: 38%; }
14614
+ .loader-message .longfazers span {
14615
+ height: 1px;
14616
+ width: 25%; } }
14617
+
14618
+ @media screen and (max-width: 320px) {
14619
+ .loader-message .body {
14620
+ -webkit-transform: scale(0.6);
14621
+ transform: scale(0.6); }
14622
+ .loader-message .message {
14623
+ font-size: 10px;
14624
+ letter-spacing: .5px;
14625
+ bottom: 40%; } }
14626
+
12889
14627
  .DS-citizen-form-container {
12890
14628
  padding: 0 10px 10px; }
12891
14629
  .DS-citizen-form-container .card-label-smaller {
@@ -13426,14 +15164,7 @@ body {
13426
15164
  height: auto; }
13427
15165
 
13428
15166
  .summary-page-scroll {
13429
- overflow: scroll; }
13430
-
13431
- .bpa-newbuilding-bpa-section {
13432
- background-color: #fff;
13433
- border-radius: 8px;
13434
- -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
13435
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
13436
- padding-bottom: 50px; }
15167
+ overflow: scroll; }
13437
15168
 
13438
15169
  .bpa-newbuilding-label-field-pair {
13439
15170
  display: -webkit-box;
@@ -13486,16 +15217,18 @@ body {
13486
15217
  margin-top: "4px"; }
13487
15218
 
13488
15219
  .bpa-owner-error-message {
13489
- color: red;
15220
+ color: #dc2626;
13490
15221
  font-size: 12px;
13491
- margin-top: 4px; }
15222
+ margin-top: 6px;
15223
+ font-weight: 500; }
13492
15224
 
13493
15225
  .bpa-owner-delete-icon {
13494
15226
  position: relative;
13495
- bottom: 5px; }
15227
+ bottom: 0; }
13496
15228
 
13497
15229
  .bpa-owner-link-delete-button {
13498
- width: 50px;
15230
+ width: 40px;
15231
+ height: 40px;
13499
15232
  display: -webkit-inline-box;
13500
15233
  display: -ms-inline-flexbox;
13501
15234
  display: inline-flex;
@@ -13505,97 +15238,126 @@ body {
13505
15238
  -webkit-box-align: center;
13506
15239
  -ms-flex-align: center;
13507
15240
  align-items: center;
13508
- background: #000;
13509
- float: right; }
13510
-
13511
- .bpa-owner-owner-card {
13512
- border-radius: 5px;
13513
- padding: 20px 10px 10px;
13514
- margin-top: 10px;
13515
- border: 1px solid #f3f3f3;
13516
- background: #fafafa; }
15241
+ background: #fee2e2;
15242
+ border-radius: 8px;
15243
+ float: right;
15244
+ margin-top: -10px;
15245
+ -webkit-transition: all .2s ease;
15246
+ transition: all .2s ease; }
15247
+ .bpa-owner-link-delete-button:hover {
15248
+ background: #fecaca; }
13517
15249
 
13518
15250
  .bpa-owner-cardlabel-negative-margin {
13519
- margin-bottom: -15px; }
15251
+ margin-bottom: 8px; }
13520
15252
 
13521
15253
  .bpa-owner-mobile-row {
13522
- margin-top: 30px; }
13523
-
13524
- .bpa-owner-country-prefix {
13525
- margin-bottom: 24px;
13526
- padding: 3px 2px;
13527
- border: 1px solid #b4b4b4;
13528
- border-radius: 8px 0 0 8px;
13529
- display: inline-block; }
15254
+ margin-top: 8px;
15255
+ margin-bottom: 16px; }
13530
15256
 
13531
- .bpa-owner-phone-input {
13532
- background: #fafafa;
13533
- padding: 0 4px;
13534
- border-radius: 0 8px 8px 0;
13535
- width: 96%; }
15257
+ .bpa-owner-field-container {
15258
+ position: relative;
15259
+ width: 100%;
15260
+ max-width: 400px; }
15261
+ .bpa-owner-field-container .field-container {
15262
+ margin-bottom: 0; }
15263
+ .bpa-owner-field-container .text-input input, .bpa-owner-field-container .text-input .checkbox-wrap .input-emp, .checkbox-wrap .bpa-owner-field-container .text-input .input-emp {
15264
+ padding-right: 44px !important; }
13536
15265
 
13537
15266
  .bpa-owner-search-icon-container {
13538
- position: relative;
13539
- z-index: 100;
13540
- right: 44px;
13541
- margin-top: -24px;
13542
- margin-right: -20px;
13543
- cursor: pointer; }
15267
+ position: absolute;
15268
+ right: 12px;
15269
+ top: 36%;
15270
+ -webkit-transform: translateY(-50%);
15271
+ transform: translateY(-50%);
15272
+ display: -webkit-box;
15273
+ display: -ms-flexbox;
15274
+ display: flex;
15275
+ -webkit-box-align: center;
15276
+ -ms-flex-align: center;
15277
+ align-items: center;
15278
+ -webkit-box-pack: center;
15279
+ -ms-flex-pack: center;
15280
+ justify-content: center;
15281
+ cursor: pointer;
15282
+ z-index: 2; }
15283
+ .bpa-owner-search-icon-container svg {
15284
+ width: 20px;
15285
+ height: 20px;
15286
+ fill: #2563eb; }
15287
+ .bpa-owner-search-icon-container:hover svg {
15288
+ fill: #1e40af; }
13544
15289
 
13545
15290
  .bpa-owner-cardlabel-margin-top {
13546
- margin-top: 30px; }
15291
+ margin-top: 20px; }
13547
15292
 
13548
15293
  .bpa-owner-upload-row {
13549
15294
  display: -webkit-box;
13550
15295
  display: -ms-flexbox;
13551
15296
  display: flex;
13552
- grid-gap: 15px;
13553
- gap: 15px;
15297
+ grid-gap: 16px;
15298
+ gap: 16px;
13554
15299
  -webkit-box-orient: horizontal;
13555
15300
  -webkit-box-direction: normal;
13556
15301
  -ms-flex-direction: row;
13557
- flex-direction: row; }
15302
+ flex-direction: row;
15303
+ -webkit-box-align: start;
15304
+ -ms-flex-align: start;
15305
+ align-items: flex-start; }
13558
15306
 
13559
15307
  @media (max-width: 768px) {
13560
- .upload-row {
15308
+ .bpa-owner-upload-row {
13561
15309
  -webkit-box-orient: vertical;
13562
15310
  -webkit-box-direction: normal;
13563
15311
  -ms-flex-direction: column;
13564
- flex-direction: column; } }
15312
+ flex-direction: column; }
15313
+ .bpa-owner-field-container {
15314
+ max-width: 100%; } }
13565
15315
 
13566
15316
  .bpa-owner-input-bg-fa {
13567
- background: #fafafa; }
15317
+ background: #fafafa;
15318
+ border-radius: 8px; }
13568
15319
 
13569
15320
  .bpa-owner-owner-textarea {
13570
15321
  background: #fafafa;
13571
15322
  width: 100%;
13572
15323
  min-height: 80px;
13573
- padding: 8px;
13574
- border: 1px solid #ccc;
13575
- border-radius: 4px;
13576
- resize: vertical; }
15324
+ padding: 12px;
15325
+ border: 1px solid #d1d5db;
15326
+ border-radius: 8px;
15327
+ resize: vertical;
15328
+ font-size: 14px; }
15329
+ .bpa-owner-owner-textarea:focus {
15330
+ outline: none;
15331
+ border-color: #2563eb;
15332
+ -webkit-box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
15333
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
13577
15334
 
13578
15335
  .bpa-owner-checkbox-top {
13579
- padding-top: 10px; }
15336
+ padding-top: 16px; }
13580
15337
 
13581
15338
  .bpa-owner-add-owner-row {
13582
15339
  display: -webkit-box;
13583
15340
  display: -ms-flexbox;
13584
15341
  display: flex;
13585
- padding-bottom: 15px;
13586
- color: #ff8c00; }
15342
+ padding: 16px 0; }
13587
15343
 
13588
15344
  .bpa-owner-add-owner-button {
13589
- padding-top: 10px;
15345
+ padding: 10px 20px;
13590
15346
  background: transparent;
13591
- border: none;
13592
- color: inherit; }
15347
+ border: 2px dashed #2563eb;
15348
+ border-radius: 8px;
15349
+ color: #2563eb;
15350
+ font-weight: 600;
15351
+ font-size: 14px;
15352
+ cursor: pointer;
15353
+ -webkit-transition: all .2s ease;
15354
+ transition: all .2s ease; }
15355
+ .bpa-owner-add-owner-button:hover {
15356
+ background: rgba(37, 99, 235, 0.05);
15357
+ border-style: solid; }
13593
15358
 
13594
15359
  .bpa-owner-submit-back {
13595
- border: 1px solid;
13596
- background: transparent;
13597
- color: #2947a3;
13598
- margin-right: 5px; }
15360
+ margin-right: 12px; }
13599
15361
 
13600
15362
  .bpa-owner-label-field-pair {
13601
15363
  display: -webkit-box;
@@ -13604,18 +15366,19 @@ body {
13604
15366
  -webkit-box-pack: justify;
13605
15367
  -ms-flex-pack: justify;
13606
15368
  justify-content: space-between;
13607
- border-bottom: 1px dashed #e0e0e0;
13608
- padding: .5rem 0;
13609
- color: #333; }
15369
+ border-bottom: 1px dashed #e5e7eb;
15370
+ padding: 12px 0;
15371
+ color: #374151; }
13610
15372
 
13611
15373
  .bpa-owner-bold-label {
13612
- font-weight: 700;
13613
- color: #555; }
15374
+ font-weight: 600;
15375
+ color: #4b5563; }
13614
15376
 
13615
15377
  .bpa-owner-newbuilding-error-message {
13616
- color: red;
13617
- margin-top: 4px;
13618
- font-size: .9rem; }
15378
+ color: #dc2626;
15379
+ margin-top: 6px;
15380
+ font-size: 12px;
15381
+ font-weight: 500; }
13619
15382
 
13620
15383
  .employee-header-bannerHeader {
13621
15384
  width: 100%;
@@ -13768,7 +15531,6 @@ body {
13768
15531
 
13769
15532
  .employee-header-header-btn-login {
13770
15533
  background-color: initial;
13771
- color: #2947a3;
13772
15534
  border: 2px solid #2947a3; }
13773
15535
 
13774
15536
  .employee-header-header-btn-login:hover {
@@ -14179,8 +15941,7 @@ body {
14179
15941
  font-weight: 600; }
14180
15942
 
14181
15943
  .custom-comments-section-no-border {
14182
- border-top: none !important;
14183
- padding-top: 0 !important; }
15944
+ padding: 16px 24px 20px; }
14184
15945
 
14185
15946
  @media (max-width: 768px) {
14186
15947
  .custom-timeline-container {
@@ -14224,10 +15985,6 @@ body {
14224
15985
  width: 100%; }
14225
15986
  .custom-comments-section {
14226
15987
  padding: 12px 16px;
14227
- -webkit-box-orient: vertical;
14228
- -webkit-box-direction: normal;
14229
- -ms-flex-direction: column;
14230
- flex-direction: column;
14231
15988
  grid-gap: 12px;
14232
15989
  gap: 12px; } }
14233
15990
 
@@ -14692,11 +16449,15 @@ body {
14692
16449
  font-weight: 600; }
14693
16450
 
14694
16451
  .ral-app-details-docs-card {
14695
- display: -webkit-box;
14696
- display: -ms-flexbox;
14697
- display: flex;
14698
- -ms-flex-wrap: wrap;
14699
- flex-wrap: wrap;
16452
+ display: -webkit-box !important;
16453
+ display: -ms-flexbox !important;
16454
+ display: flex !important;
16455
+ -webkit-box-orient: horizontal !important;
16456
+ -webkit-box-direction: normal !important;
16457
+ -ms-flex-direction: row !important;
16458
+ flex-direction: row !important;
16459
+ -ms-flex-wrap: wrap !important;
16460
+ flex-wrap: wrap !important;
14700
16461
  grid-gap: 30px;
14701
16462
  gap: 30px;
14702
16463
  margin-bottom: 26px; }
@@ -14739,6 +16500,206 @@ body {
14739
16500
  font-size: 24px;
14740
16501
  margin-top: 30px; }
14741
16502
 
16503
+ .survey-modal-wrapper {
16504
+ padding: 0;
16505
+ background-color: #f9fafb; }
16506
+
16507
+ .survey-modal-loader {
16508
+ display: -webkit-box;
16509
+ display: -ms-flexbox;
16510
+ display: flex;
16511
+ -webkit-box-pack: center;
16512
+ -ms-flex-pack: center;
16513
+ justify-content: center;
16514
+ -webkit-box-align: center;
16515
+ -ms-flex-align: center;
16516
+ align-items: center;
16517
+ min-height: 300px; }
16518
+
16519
+ .survey-cards-container {
16520
+ display: grid;
16521
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
16522
+ grid-gap: 20px;
16523
+ gap: 20px;
16524
+ padding: 24px;
16525
+ background: linear-gradient(135deg, #f9fafb, #f3f4f6); }
16526
+
16527
+ .survey-card {
16528
+ background: #fff;
16529
+ border-radius: 12px;
16530
+ -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
16531
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
16532
+ overflow: hidden;
16533
+ -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
16534
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
16535
+ display: -webkit-box;
16536
+ display: -ms-flexbox;
16537
+ display: flex;
16538
+ -webkit-box-orient: vertical;
16539
+ -webkit-box-direction: normal;
16540
+ -ms-flex-direction: column;
16541
+ flex-direction: column;
16542
+ height: 100%;
16543
+ border: 1px solid #e5e7eb; }
16544
+
16545
+ .survey-card:hover {
16546
+ -webkit-box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15);
16547
+ box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15);
16548
+ -webkit-transform: translateY(-4px);
16549
+ transform: translateY(-4px);
16550
+ border-color: #2563eb; }
16551
+
16552
+ .survey-card-header {
16553
+ background: linear-gradient(135deg, #2563eb, #1d4ed8);
16554
+ padding: 16px 20px;
16555
+ color: #fff;
16556
+ border-bottom: 3px solid #1d4ed8; }
16557
+
16558
+ .survey-card-title {
16559
+ margin: 0;
16560
+ font-size: 16px;
16561
+ font-weight: 600;
16562
+ line-height: 1.4;
16563
+ color: #fff;
16564
+ word-break: break-word; }
16565
+
16566
+ .survey-card-content {
16567
+ -webkit-box-flex: 1;
16568
+ -ms-flex: 1;
16569
+ flex: 1;
16570
+ padding: 20px;
16571
+ -webkit-box-orient: vertical;
16572
+ -webkit-box-direction: normal;
16573
+ -ms-flex-direction: column;
16574
+ flex-direction: column;
16575
+ grid-gap: 16px;
16576
+ gap: 16px; }
16577
+
16578
+ .survey-card-content, .survey-card-item {
16579
+ display: -webkit-box;
16580
+ display: -ms-flexbox;
16581
+ display: flex;
16582
+ -webkit-box-orient: vertical;
16583
+ -webkit-box-direction: normal;
16584
+ -ms-flex-direction: column; }
16585
+
16586
+ .survey-card-item {
16587
+ -webkit-box-orient: vertical;
16588
+ -webkit-box-direction: normal;
16589
+ -ms-flex-direction: column;
16590
+ flex-direction: column;
16591
+ grid-gap: 6px;
16592
+ gap: 6px; }
16593
+
16594
+ .survey-card-label {
16595
+ font-size: 12px;
16596
+ font-weight: 600;
16597
+ color: #6b7280;
16598
+ text-transform: uppercase;
16599
+ letter-spacing: .5px; }
16600
+
16601
+ .survey-card-value {
16602
+ font-size: 14px;
16603
+ color: #1f2937;
16604
+ line-height: 1.5;
16605
+ word-break: break-word; }
16606
+
16607
+ .survey-card-footer {
16608
+ padding: 16px 20px;
16609
+ border-top: 1px solid #e5e7eb;
16610
+ background-color: #f9fafb; }
16611
+
16612
+ .survey-card-footer button {
16613
+ width: 100%; }
16614
+
16615
+ .survey-modal-empty-state {
16616
+ display: -webkit-box;
16617
+ display: -ms-flexbox;
16618
+ display: flex;
16619
+ -webkit-box-orient: vertical;
16620
+ -webkit-box-direction: normal;
16621
+ -ms-flex-direction: column;
16622
+ flex-direction: column;
16623
+ -webkit-box-align: center;
16624
+ -ms-flex-align: center;
16625
+ align-items: center;
16626
+ -webkit-box-pack: center;
16627
+ -ms-flex-pack: center;
16628
+ justify-content: center;
16629
+ min-height: 300px;
16630
+ padding: 40px 20px;
16631
+ background: linear-gradient(135deg, #f9fafb, #f3f4f6); }
16632
+
16633
+ .survey-modal-empty-state-text {
16634
+ margin: 0;
16635
+ text-align: center;
16636
+ color: #6b7280;
16637
+ line-height: 1.6; }
16638
+
16639
+ .survey-modal-empty-state-text:first-child {
16640
+ font-size: 16px;
16641
+ font-weight: 500;
16642
+ color: #374151;
16643
+ margin-bottom: 8px; }
16644
+
16645
+ @media (max-width: 768px) {
16646
+ .survey-cards-container {
16647
+ grid-template-columns: 1fr;
16648
+ grid-gap: 16px;
16649
+ gap: 16px;
16650
+ padding: 16px; }
16651
+ .survey-card {
16652
+ border-radius: 8px; }
16653
+ .survey-card-title {
16654
+ font-size: 15px; }
16655
+ .survey-card-content {
16656
+ padding: 16px;
16657
+ grid-gap: 12px;
16658
+ gap: 12px; }
16659
+ .survey-card-footer {
16660
+ padding: 12px 16px; }
16661
+ .survey-card-label {
16662
+ font-size: 11px; }
16663
+ .survey-card-value {
16664
+ font-size: 13px; } }
16665
+
16666
+ @media (max-width: 480px) {
16667
+ .survey-cards-container {
16668
+ padding: 12px;
16669
+ grid-gap: 12px;
16670
+ gap: 12px; }
16671
+ .survey-card-content, .survey-card-header {
16672
+ padding: 12px 16px; }
16673
+ .survey-card-footer {
16674
+ padding: 10px 16px; } }
16675
+
16676
+ @-webkit-keyframes slideIn {
16677
+ 0% {
16678
+ opacity: 0;
16679
+ -webkit-transform: translateY(8px);
16680
+ transform: translateY(8px); }
16681
+ to {
16682
+ opacity: 1;
16683
+ -webkit-transform: translateY(0);
16684
+ transform: translateY(0); } }
16685
+
16686
+ @keyframes slideIn {
16687
+ 0% {
16688
+ opacity: 0;
16689
+ -webkit-transform: translateY(8px);
16690
+ transform: translateY(8px); }
16691
+ to {
16692
+ opacity: 1;
16693
+ -webkit-transform: translateY(0);
16694
+ transform: translateY(0); } }
16695
+
16696
+ .survey-card {
16697
+ -webkit-animation: slideIn .3s ease-out;
16698
+ animation: slideIn .3s ease-out; }
16699
+
16700
+ .survey-modal-loader {
16701
+ background: linear-gradient(135deg, #f9fafb, #f3f4f6); }
16702
+
14742
16703
  .ads-view-cart {
14743
16704
  margin-left: 12px;
14744
16705
  padding: 8px 16px;