@djb25/digit-ui-css 1.0.85 → 1.0.87

package/src/components/landingpage.scss

@@ -15,7 +15,7 @@ body {
   border-bottom: 1px solid #fde68a;
   padding: 8px 0;
   color: #78350f; /* Amber-900 text */
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -94,14 +94,14 @@ body {
 }
 
 .branding h2 {
-  font-size: 28px;
+  font-size: 1.75rem;
   margin: 0;
   color: #003366;
   font-weight: 700;
 }
 
 .branding p {
-  font-size: 14px;
+  font-size: 0.875rem;
   margin: 0;
 }
 
@@ -112,7 +112,7 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 500;
   border-bottom: 1px solid #e2e8f0;
   height: 38px;
@@ -222,7 +222,7 @@ body {
 
 .brand-title {
   font-family: "Crimson Pro", serif;
-  font-size: 29px;
+  font-size: 1.8125rem;
   font-weight: 700;
   color: #003366;
   line-height: 1.1;
@@ -231,7 +231,7 @@ body {
 }
 
 .brand-subtitle {
-  font-size: 10.5px;
+  font-size: 0.65625rem;
   font-weight: 600;
   color: #0070b4;
   line-height: 1.2;
@@ -246,7 +246,7 @@ body {
 }
 
 .upyog-nav a {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #003366;
   text-decoration: none;
   font-weight: 500;
@@ -326,14 +326,14 @@ body {
 }
 
 .upyog-hero-welcome-text {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 400;
   opacity: 0.9;
   margin: 0 0 6px 0;
 }
 
 .upyog-hero-title {
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: 700;
   margin: 0;
   line-height: 1.2;
@@ -494,7 +494,7 @@ body {
 }
 
 .upyog-suggested-label {
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   font-weight: 600;
   color: #475569;
 }
@@ -505,7 +505,7 @@ body {
   border: 1.5px solid #e2e8f0;
   border-radius: 999px;
   padding: 8px 20px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: #334155;
   cursor: pointer;
@@ -540,7 +540,7 @@ body {
 
   .upyog-suggested-btn {
     padding: 8px 14px;
-    font-size: 13px;
+    font-size: 0.8125rem;
   }
 }
 
@@ -555,7 +555,7 @@ body {
 
 /* Title */
 .upyog-quick-title {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 35px;
@@ -600,7 +600,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 20px;
+  font-size: 1.25rem;
   margin-right: 16px;
   color: #2563eb;
   transition: all 0.3s ease;
@@ -614,7 +614,7 @@ body {
 .upyog-quick-text {
   flex: 1;
   text-align: left;
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 600;
   color: #1e293b;
   transition: color 0.3s ease;
@@ -626,7 +626,7 @@ body {
 
 /* Right Arrow */
 .upyog-quick-arrow {
-  font-size: 22px;
+  font-size: 1.375rem;
   font-weight: 700;
   color: #64748b;
   transition: all 0.3s ease;
@@ -709,7 +709,7 @@ body {
   color: #1a73e8;
   padding: 12px 28px;
   border-radius: 30px;
-  font-size: 16px;
+  font-size: 1rem;
   cursor: pointer;
 }
 
@@ -729,7 +729,7 @@ body {
 }
 
 .upyog-service-title {
-  font-size: 22px;
+  font-size: 1.375rem;
   font-weight: 700;
   color: #002b5c;
   margin-bottom: 25px;
@@ -782,7 +782,7 @@ body {
   color: #1a73e8;
   padding: 10px 26px;
   border-radius: 25px;
-  font-size: 16px;
+  font-size: 1rem;
   cursor: pointer;
   transition: 0.2s ease;
 }
@@ -802,7 +802,7 @@ body {
 /* TITLE */
 .news-title {
   text-align: center;
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 700;
   margin-bottom: 28px;
   color: #1f1f1f;
@@ -844,7 +844,7 @@ body {
   padding: 6px 12px;
   color: #fff;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
 }
 
@@ -854,19 +854,19 @@ body {
 }
 
 .featured-heading {
-  font-size: 22px;
+  font-size: 1.375rem;
   font-weight: 700;
   margin-bottom: 12px;
 }
 
 .featured-date {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #7d7d7d;
   margin-bottom: 12px;
 }
 
 .featured-desc {
-  font-size: 15px;
+  font-size: 0.9375rem;
   color: #474747;
   line-height: 1.6;
   margin-bottom: 20px;
@@ -919,7 +919,7 @@ body {
 }
 
 .news-card-title {
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 600;
   padding: 12px;
   min-height: 55px;
@@ -927,7 +927,7 @@ body {
 }
 
 .news-card-date {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #666;
   padding: 0 12px 14px;
 }
@@ -949,7 +949,7 @@ body {
   background: #ffffff;
   border: none;
   border-radius: 50%;
-  font-size: 26px;
+  font-size: 1.625rem;
   cursor: pointer;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
   display: flex;
@@ -986,7 +986,7 @@ body {
   color: #007aff;
   border: 1px solid #007aff;
 
-  font-size: 15px;
+  font-size: 0.9375rem;
   cursor: pointer;
   position: relative;
 
@@ -1031,7 +1031,7 @@ body {
   }
 
   .stats-value {
-    font-size: 26px;
+    font-size: 1.625rem;
   }
 }
 
@@ -1044,7 +1044,7 @@ body {
 
 /* Title */
 .videos-title {
-  font-size: 26px;
+  font-size: 1.625rem;
   font-weight: 700;
   margin-bottom: 40px;
   color: #1a1a1a;
@@ -1135,7 +1135,7 @@ body {
 }
 
 .footer-grid h3 {
-  font-size: 15px;
+  font-size: 0.9375rem;
   color: #ffffff;
   margin-bottom: 24px;
   font-weight: 600;
@@ -1176,7 +1176,7 @@ body {
 
 .contact-text-lines {
   color: #cbd5e1;
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   line-height: 1.7;
   margin: 0 !important;
   cursor: default;
@@ -1215,7 +1215,7 @@ body {
 }
 
 .footer-link-item .link-text {
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   line-height: 1.6;
 }
 
@@ -1240,7 +1240,7 @@ body {
 .footer-grid .contact-btn header {
   color: #ffffff !important;
   font-weight: 600 !important;
-  font-size: 13.5px !important;
+  font-size: 0.84375rem !important;
   line-height: 1 !important;
   transition: color 0.3s ease;
 }
@@ -1276,7 +1276,7 @@ body {
 .footer-grid .feedback-btn header {
   color: #061224 !important;
   font-weight: 600 !important;
-  font-size: 13.5px !important;
+  font-size: 0.84375rem !important;
   line-height: 1 !important;
 }
 
@@ -1308,7 +1308,7 @@ body {
 }
 
 .footer-bottom .copyright {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #64748b;
   opacity: 0.9;
   line-height: 1.6;
@@ -1351,7 +1351,7 @@ body {
 }
 .social-icons svg {
   color: #fff;
-  font-size: 18px;
+  font-size: 1.125rem;
   cursor: pointer;
   transition: 0.3s;
 }
@@ -1389,7 +1389,7 @@ body {
 /* --------------------------- */
 
 .stats-value {
-  font-size: 34px;
+  font-size: 2.125rem;
   font-weight: 800;
   color: #005bbb;
   margin-bottom: 12px;
@@ -1399,7 +1399,7 @@ body {
 }
 
 .stats-title {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 10px;
@@ -1408,7 +1408,7 @@ body {
 }
 
 .stats-desc {
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   color: #475569;
   line-height: 1.5;
   position: relative;
@@ -1508,7 +1508,7 @@ body {
   right: 10px;
   color: #0f2942;
   font-weight: 700;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   text-align: center;
   z-index: 5;
   line-height: 1.3;
@@ -1530,7 +1530,7 @@ body {
   background: linear-gradient(135deg, #005bbb, #003c8f);
   color: #ffffff !important;
   text-decoration: none !important;
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 600;
   border-radius: 50px;
   box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
@@ -1577,7 +1577,7 @@ body {
 .dropdown-item {
   display: block;
   padding: 10px 14px;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #333;
   text-decoration: none;
 }
@@ -1635,7 +1635,7 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 6px 16px;
   border-radius: 50px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -1644,7 +1644,7 @@ body {
 }
 
 .contact-hero-content h1 {
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 700;
   margin: 0 0 12px;
   letter-spacing: -0.5px;
@@ -1652,7 +1652,7 @@ body {
 }
 
 .contact-hero-content p {
-  font-size: 15.5px;
+  font-size: 0.96875rem;
   color: #94a3b8;
   line-height: 1.6;
   margin: 0;
@@ -1719,7 +1719,7 @@ body {
 }
 
 .card-header h3 {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
   color: #0f172a;
   margin: 0 !important;
@@ -1727,7 +1727,7 @@ body {
 
 /* Helpline Card Specifics */
 .helpline-notice {
-  font-size: 12.5px;
+  font-size: 0.78125rem;
   font-weight: 600;
   color: #475569;
   background: #f8fafc;
@@ -1752,7 +1752,7 @@ body {
 }
 
 .group-title {
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 700;
   color: #0f172a;
   text-transform: uppercase;
@@ -1776,7 +1776,7 @@ body {
   padding: 10px 16px;
   color: #0f172a;
   font-weight: 600;
-  font-size: 14px;
+  font-size: 0.875rem;
   text-decoration: none;
   transition: all 0.2s ease;
 }
@@ -1812,7 +1812,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 800;
   color: #c53030;
   text-decoration: none;
@@ -1846,7 +1846,7 @@ body {
 }
 
 .label-badge {
-  font-size: 11px;
+  font-size: 0.6875rem;
   font-weight: 700;
   text-transform: uppercase;
   padding: 2px 8px;
@@ -1859,7 +1859,7 @@ body {
 }
 
 .label-text {
-  font-size: 12.5px;
+  font-size: 0.78125rem;
   color: #475569;
   font-weight: 500;
 }
@@ -1867,7 +1867,7 @@ body {
 .badge-new {
   background: #e53e3e;
   color: #ffffff;
-  font-size: 9px;
+  font-size: 0.5625rem;
   font-weight: 800;
   padding: 1px 6px;
   border-radius: 4px;
@@ -1900,7 +1900,7 @@ body {
   padding: 8px 16px;
   border-radius: 50px;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 0.875rem;
   text-decoration: none;
   transition: all 0.2s ease;
 }
@@ -1927,7 +1927,7 @@ body {
 }
 
 .wa-meta-text {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #475569;
   font-weight: 500;
   display: flex;
@@ -1942,7 +1942,7 @@ body {
 }
 
 .legacy-sub-heading {
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 600;
   color: #475569;
   margin-bottom: 12px;
@@ -1960,7 +1960,7 @@ body {
   gap: 8px;
   padding: 10px 18px;
   border-radius: 8px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.2s ease;
@@ -2030,7 +2030,7 @@ body {
   padding: 14px 16px;
   border: 1.5px solid #e2e8f0;
   border-radius: 10px;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   color: #0f172a;
   background: #f8fafc;
   outline: none;
@@ -2060,7 +2060,7 @@ body {
   border: none;
   border-radius: 50px;
   padding: 12px 30px;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   font-weight: 700;
   cursor: pointer;
   align-self: flex-start;
@@ -2142,14 +2142,14 @@ body {
 }
 
 .info-block-box h4 {
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 700;
   color: #0f172a;
   margin: 0 0 10px;
 }
 
 .info-block-box p {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #475569;
   line-height: 1.6;
   margin: 0;
@@ -2191,10 +2191,10 @@ body {
     padding: 40px 20px;
   }
   .contact-hero-content h1 {
-    font-size: 26px;
+    font-size: 1.625rem;
   }
   .contact-hero-content p {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
   .form-grid-fields {
     grid-template-columns: 1fr;
@@ -2240,7 +2240,7 @@ body {
   position: absolute;
   top: 8px;
   right: 12px;
-  font-size: 18px;
+  font-size: 1.125rem;
   background: none;
   border: none;
   cursor: pointer;
@@ -2250,7 +2250,7 @@ body {
 .upyog-nav .nav-hover-btn {
   padding: 8px 16px;
   border-radius: 6px;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   font-weight: 600;
   color: #1e293b;
   text-decoration: none;
@@ -2287,7 +2287,7 @@ body {
   border: none;
   padding: 9px 24px;
   border-radius: 50px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
   box-shadow: 0 4px 14px rgba(0, 91, 187, 0.2);
@@ -2323,7 +2323,7 @@ body {
   background: #0b4da2;
   color: #fff;
   padding: 12px 16px;
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 600;
 }
 
@@ -2335,7 +2335,7 @@ body {
   border: none;
   background: #fff;
   text-align: left;
-  font-size: 14px;
+  font-size: 0.875rem;
   cursor: pointer;
   border-bottom: 1px solid #e5e7eb;
   transition: background 0.2s ease;
@@ -2405,7 +2405,7 @@ body {
   color: #ffffff;
   padding: 16px 20px;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -2417,7 +2417,7 @@ body {
   border: none;
   background: #fff;
   text-align: left;
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: 500;
   color: #334155;
   cursor: pointer;
@@ -2467,7 +2467,7 @@ body {
 
   .djb-tabs button {
     padding: 10px 20px;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: 600;
     color: #64748b;
     background: transparent;
@@ -2490,7 +2490,7 @@ body {
   }
 
   .djb-section-title {
-    font-size: 28px;
+    font-size: 1.75rem;
     color: #1e293b;
     margin-bottom: 24px;
     padding-bottom: 12px;
@@ -2512,14 +2512,14 @@ body {
 
   /* Subheading */
   .djb-sub-title {
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 700;
     color: #334155;
     margin: 28px 0 14px;
   }
 
   .djb-section p {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.7;
     color: #475569;
     margin-bottom: 20px;
@@ -2529,7 +2529,7 @@ body {
 .djb-list li::before {
   content: "•";
   color: #0070b4;
-  font-size: 20px;
+  font-size: 1.25rem;
   position: absolute;
   left: 4px;
   top: -2px;
@@ -2550,7 +2550,7 @@ body {
   background: #f8fafc;
   color: #1e293b;
   font-weight: 700;
-  font-size: 13px;
+  font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 16px 20px;
@@ -2562,7 +2562,7 @@ body {
   padding: 16px 20px;
   border-bottom: 1px solid #e2e8f0;
   color: #475569;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   line-height: 1.6;
 }
 
@@ -2593,7 +2593,7 @@ body {
 .revenue-value {
   font-weight: 700;
   color: #0070b4;
-  font-size: 15px;
+  font-size: 0.9375rem;
 }
 
 .revenue-bar {
@@ -2694,7 +2694,7 @@ body {
 }
 
 .doc-title {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 800;
   color: #003366;
   margin: 0;
@@ -2703,7 +2703,7 @@ body {
 .doc-meta {
   display: flex;
   gap: 12px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #64748b;
   margin-top: 6px;
 }
@@ -2713,7 +2713,7 @@ body {
   background: #ecfdf5;
   border-bottom: 1px solid #a7f3d0;
   color: #065f46;
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 600;
   display: flex;
   align-items: center;
@@ -2766,18 +2766,18 @@ body {
   }
 
   .djb-section-title {
-    font-size: 19px;
+    font-size: 1.1875rem;
   }
 
   .djb-section p,
   .djb-list li {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 
   .djb-table th,
   .djb-table td {
     padding: 12px 14px;
-    font-size: 13.5px;
+    font-size: 0.84375rem;
   }
 
   .doc-header {
@@ -2824,7 +2824,7 @@ body {
   background: #ffffff;
   padding: 6px 12px;
   border-radius: 6px;
-  font-size: 12.5px;
+  font-size: 0.78125rem;
   font-weight: 600;
   color: #0b5fa5;
   display: inline-flex;
@@ -2893,7 +2893,7 @@ body {
 }
 
 svg text {
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   fill: #0b5fa5;
 }
@@ -2921,7 +2921,7 @@ svg text {
 }
 
 .svg-text {
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   fill: #0b5fa5;
   pointer-events: none;
@@ -2978,7 +2978,7 @@ svg text {
 }
 
 .org-chart-title {
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 800;
   color: var(--dark);
   margin: 0;
@@ -3007,17 +3007,17 @@ svg text {
 }
 
 .stat-icon {
-  font-size: 20px;
+  font-size: 1.25rem;
 }
 
 .stat-value {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 700;
   color: var(--primary-color);
 }
 
 .stat-label {
-  font-size: 12px;
+  font-size: 0.75rem;
   color: var(--gray-600);
   font-weight: 500;
 }
@@ -3063,7 +3063,7 @@ svg text {
 }
 
 .search-icon {
-  font-size: 18px;
+  font-size: 1.125rem;
   color: var(--gray-500);
 }
 
@@ -3072,7 +3072,7 @@ svg text {
   border: none;
   background: transparent;
   padding: 10px 8px;
-  font-size: 14px;
+  font-size: 0.875rem;
   outline: none;
   color: var(--gray-800);
   font-weight: 500;
@@ -3090,7 +3090,7 @@ svg text {
   height: 28px;
   border-radius: 50%;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 0.875rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3118,7 +3118,7 @@ svg text {
   padding: 10px 18px;
   border-radius: 8px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   transition: all 0.2s;
   white-space: nowrap;
@@ -3160,7 +3160,7 @@ svg text {
 }
 
 .btn-icon {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 /* View Mode Buttons */
@@ -3171,7 +3171,7 @@ svg text {
   border: 2px solid var(--gray-300);
   border-radius: 8px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 1.125rem;
   transition: all 0.2s;
   display: flex;
   align-items: center;
@@ -3207,7 +3207,7 @@ svg text {
   border-radius: 6px;
   padding: 8px 14px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
   color: var(--gray-700);
   transition: all 0.2s;
@@ -3220,7 +3220,7 @@ svg text {
 }
 
 .zoom-btn.reset {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .zoom-display {
@@ -3228,7 +3228,7 @@ svg text {
   color: white;
   padding: 8px 16px;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 700;
   min-width: 55px;
   text-align: center;
@@ -3248,7 +3248,7 @@ svg text {
 }
 
 .level-label {
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--gray-600);
   margin-right: 4px;
@@ -3260,7 +3260,7 @@ svg text {
   border: 2px solid var(--gray-300);
   border-radius: 6px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--gray-700);
   transition: all 0.2s;
@@ -3280,7 +3280,7 @@ svg text {
   padding: 14px 24px;
   border-radius: 10px;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 0.875rem;
   text-align: center;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -3290,7 +3290,7 @@ svg text {
 }
 
 .banner-icon {
-  font-size: 24px;
+  font-size: 1.5rem;
 }
 
 .instruction-banner strong {
@@ -3394,7 +3394,7 @@ svg text {
 }
 
 .org-title {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--gray-800);
   line-height: 1.5;
@@ -3414,7 +3414,7 @@ svg text {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
   line-height: 1;
   transition: all 0.2s;
@@ -3435,7 +3435,7 @@ svg text {
   color: white;
   padding: 2px 8px;
   border-radius: 12px;
-  font-size: 11px;
+  font-size: 0.6875rem;
   font-weight: 700;
 }
 
@@ -3493,7 +3493,7 @@ svg text {
   background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   color: white;
   border-color: var(--primary-dark);
-  font-size: 16px;
+  font-size: 1rem;
   padding: 18px 26px;
   min-width: 190px;
   box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
@@ -3576,7 +3576,7 @@ svg text {
 
 .info-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
 }
 
@@ -3588,7 +3588,7 @@ svg text {
   height: 28px;
   border-radius: 50%;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3614,13 +3614,13 @@ svg text {
 }
 
 .info-label {
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--gray-600);
 }
 
 .info-value {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 700;
   color: var(--gray-800);
 }
@@ -3637,7 +3637,7 @@ svg text {
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   transition: all 0.2s;
 }
@@ -3694,7 +3694,7 @@ svg text {
 }
 
 .legend-text {
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--gray-700);
 }
@@ -3767,7 +3767,7 @@ svg text {
   }
 
   .org-chart-title {
-    font-size: 22px;
+    font-size: 1.375rem;
   }
 
   .info-panel {
@@ -3798,12 +3798,12 @@ svg text {
 
 .doc-title {
   margin: 0;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 600;
 }
 
 .doc-meta {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #666;
   margin-top: 4px;
 }
@@ -3816,7 +3816,7 @@ svg text {
 
 /* ===== Hint ===== */
 .doc-hint {
-  font-size: 13px;
+  font-size: 0.8125rem;
   color: #555;
   background: #f4f6f8;
   border-left: 4px solid #0b5ed7;
@@ -3922,7 +3922,7 @@ body {
 @media (max-width: 768px) {
   .upyog-info-bar {
     padding: 6px 12px;
-    font-size: 12px;
+    font-size: 0.75rem;
   }
   .upyog-info-icon {
     margin-left: 10px;
@@ -3952,12 +3952,12 @@ body {
   }
 
   .upyog-search-box input {
-    font-size: 13px !important;
+    font-size: 0.8125rem !important;
   }
 
   .upyog-search-btn {
     padding: 8px 18px !important;
-    font-size: 13px !important;
+    font-size: 0.8125rem !important;
   }
 }
 
@@ -3996,11 +3996,11 @@ body {
   }
 
   .upyog-hero-welcome-text {
-    font-size: 15px;
+    font-size: 0.9375rem;
   }
 
   .upyog-hero-title {
-    font-size: 28px;
+    font-size: 1.75rem;
   }
 
   .upyog-hero-main-img {
@@ -4017,7 +4017,7 @@ body {
   }
 
   .upyog-suggested-label {
-    font-size: 13px;
+    font-size: 0.8125rem;
     width: 100%;
     text-align: center;
     margin-bottom: 4px;
@@ -4025,7 +4025,7 @@ body {
 
   .upyog-suggested-btn {
     padding: 6px 14px;
-    font-size: 12.5px;
+    font-size: 0.78125rem;
   }
 }
 
@@ -4036,7 +4036,7 @@ body {
   }
 
   .upyog-quick-title {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-bottom: 24px;
   }
 
@@ -4050,7 +4050,7 @@ body {
   }
 
   .upyog-quick-text {
-    font-size: 13.5px;
+    font-size: 0.84375rem;
   }
 }
 
@@ -4061,7 +4061,7 @@ body {
   }
 
   .upyog-service-title {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-bottom: 20px;
   }
 }
@@ -4089,11 +4089,11 @@ body {
   }
 
   .featured-heading {
-    font-size: 19px;
+    font-size: 1.1875rem;
   }
 
   .featured-desc {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 }
 
@@ -4104,7 +4104,7 @@ body {
   }
 
   .news-title {
-    font-size: 22px;
+    font-size: 1.375rem;
     margin-bottom: 20px;
   }
 
@@ -4142,7 +4142,7 @@ body {
 
   .view-all-btn {
     padding: 10px 24px;
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 }
 
@@ -4168,15 +4168,15 @@ body {
   }
 
   .stats-value {
-    font-size: 24px;
+    font-size: 1.5rem;
   }
 
   .stats-title {
-    font-size: 15px;
+    font-size: 0.9375rem;
   }
 
   .stats-desc {
-    font-size: 12.5px;
+    font-size: 0.78125rem;
   }
 }
 
@@ -4195,7 +4195,7 @@ body {
   }
 
   .videos-title {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-bottom: 24px;
   }
 
@@ -4309,7 +4309,7 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 6px 16px;
   border-radius: 50px;
-  font-size: 13px;
+  font-size: 0.8125rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -4317,14 +4317,14 @@ body {
   margin-bottom: 16px;
 }
 .about-hero-content h1 {
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 700;
   margin: 0 0 12px;
   letter-spacing: -0.5px;
   line-height: 1.2;
 }
 .about-hero-content p {
-  font-size: 15.5px;
+  font-size: 0.96875rem;
   color: #94a3b8;
   line-height: 1.6;
   margin: 0;
@@ -4367,7 +4367,7 @@ body {
   background: linear-gradient(135deg, #061224 0%, #0b5cab 100%);
   color: #ffffff;
   padding: 20px 22px;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1.2px;
@@ -4385,7 +4385,7 @@ body {
   align-items: center;
   gap: 12px;
   padding: 14px 22px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 600;
   color: #475569;
   cursor: pointer;
@@ -4491,7 +4491,7 @@ body {
 }
 .about-tab-btn {
   padding: 9px 18px;
-  font-size: 13.5px;
+  font-size: 0.84375rem;
   font-weight: 600;
   color: #64748b;
   background: transparent;
@@ -4523,13 +4523,13 @@ body {
   text-align: center;
 }
 .about-coming-soon h3 {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 700;
   color: #334155;
   margin: 0;
 }
 .about-coming-soon p {
-  font-size: 15px;
+  font-size: 0.9375rem;
   color: #94a3b8;
   margin: 0;
 }
@@ -4561,10 +4561,10 @@ body {
     padding: 40px 20px;
   }
   .about-hero-content h1 {
-    font-size: 24px;
+    font-size: 1.5rem;
   }
   .about-hero-content p {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
   .about-page-container {
     padding: 24px 16px 48px;
@@ -4577,7 +4577,7 @@ body {
   }
   .about-tab-btn {
     padding: 8px 12px;
-    font-size: 13px;
+    font-size: 0.8125rem;
   }
   .about-side-nav-list {
     grid-template-columns: 1fr;
@@ -4585,7 +4585,7 @@ body {
 }
 @media (max-width: 480px) {
   .about-hero-content h1 {
-    font-size: 20px;
+    font-size: 1.25rem;
   }
   .about-tab-bar {
     gap: 4px;
@@ -4600,7 +4600,7 @@ body {
   margin-bottom: 0;
 }
 .djb-section p {
-  font-size: 15px;
+  font-size: 0.9375rem;
   line-height: 1.8;
   color: #475569;
   margin-bottom: 18px;
@@ -4611,7 +4611,7 @@ body {
 }
 
 .djb-sub-title {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
   color: #334155;
   margin: 28px 0 14px;
@@ -4626,14 +4626,14 @@ body {
   position: relative;
   padding-left: 22px;
   margin-bottom: 12px;
-  font-size: 15px;
+  font-size: 0.9375rem;
   line-height: 1.7;
   color: #475569;
 }
 .djb-list li::before {
   content: "•";
   color: #0070b4;
-  font-size: 20px;
+  font-size: 1.25rem;
   position: absolute;
   left: 4px;
   top: -2px;
@@ -4652,7 +4652,7 @@ body {
   background: #f8fafc;
   color: #1e293b;
   font-weight: 700;
-  font-size: 13px;
+  font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 16px 20px;
@@ -4663,7 +4663,7 @@ body {
   padding: 16px 20px;
   border-bottom: 1px solid #e2e8f0;
   color: #475569;
-  font-size: 14.5px;
+  font-size: 0.90625rem;
   line-height: 1.6;
 }
 .djb-table tr:last-child td {
@@ -4688,7 +4688,7 @@ body {
 .revenue-value {
   font-weight: 700;
   color: #0070b4;
-  font-size: 15px;
+  font-size: 0.9375rem;
 }
 .revenue-bar {
   width: 100%;