@pmidc/upyog-css 1.1.8 → 1.1.10

package/dist/index.css

@@ -1161,6 +1161,51 @@ body {
     padding-left: 8px;
     margin-left: 8px; }
 
+.notification-wrapper {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  -webkit-transition: background-color .2s ease;
+  transition: background-color .2s ease; }
+  .notification-wrapper:hover {
+    background-color: rgba(0, 0, 0, 0.05); }
+  .notification-wrapper .notification-count {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #ef4444;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding: 2px; }
+  .notification-wrapper svg {
+    width: 22px;
+    height: 22px;
+    background: #ffdc00;
+    border-radius: 50%; }
+
 .img-circle {
   border-radius: 50%; }
 
@@ -1723,6 +1768,20 @@ body {
     color: #fff;
     line-height: 40px; }
 
+.submit-bar-back {
+  background: transparent !important;
+  color: #2563eb !important;
+  border: 1px solid #2563eb !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  margin-right: 10px; }
+  .submit-bar-back:hover {
+    background: rgba(37, 99, 235, 0.08) !important;
+    -webkit-transform: translateY(-2px);
+    transform: translateY(-2px);
+    -webkit-box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important; }
+
 @media (min-width: 1024px) {
   .submit-bar, .submit-bar-disabled {
     width: 175px;
@@ -1899,34 +1958,19 @@ body {
   width: 100%;
   margin: 0; }
 
-.selector-button-primary {
-  height: 2rem;
-  --bg-opacity:1;
-  background-color: #2947a3;
-  background-color: rgba(41, 71, 163, var(--bg-opacity));
-  text-align: center;
-  --border-opacity:1;
-  border-color: #464646;
-  border-bottom: 1px;
-  border-style: solid;
-  border-color: rgba(70, 70, 70, var(--border-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  padding-left: 24px;
-  padding-right: 24px; }
-  .selector-button-primary:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px; }
-  .selector-button-primary h2 {
-    font-family: Roboto Condensed,sans-serif;
-    font-weight: 500;
-    font-size: 19px;
-    line-height: 23px;
-    --text-opacity:1;
-    color: #fff;
-    color: rgba(255, 255, 255, var(--text-opacity)); }
+.selector-button-primary:hover {
+  background-color: #1e3a8a !important;
+  opacity: .9; }
+
+.selector-button-primary h2 {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  font-weight: 500 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100%; }
 
-.selector-button-border {
+.selector-button-border, .selector-button-primary {
   background-color: #2947a3 !important;
   color: #fff !important;
   border: none !important;
@@ -1956,19 +2000,21 @@ body {
   min-height: 40px;
   width: 30%;
   max-height: 40px;
-  margin: 0; }
-  .selector-button-border:hover {
-    background-color: #1e3a8a !important;
-    opacity: .9; }
-  .selector-button-border h2 {
-    color: #fff !important;
-    font-size: 0.875rem !important;
-    line-height: 1.25rem !important;
-    font-weight: 500 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-    width: 100%; }
+  margin: 0;
+  color: #fff !important;
+  border: none !important; }
+
+.selector-button-border:hover {
+  background-color: #1e3a8a !important;
+  opacity: .9; }
+
+.selector-button-border h2 {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  font-weight: 500 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100%; }
 
 .input-mirror-selector-button {
   height: 4rem !important;
@@ -2136,13 +2182,13 @@ body {
       outline-offset: 2px;
       padding-left: 8px; }
     .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 {
-      --text-opacity:1;
-      color: #0d43a7;
-      color: rgba(13, 67, 167, var(--text-opacity));
       font-size: 16px;
       line-height: 20px; }
     .employee-select-wrap .select p {
       padding-top: 9px;
+      --text-opacity:1;
+      color: #0d43a7;
+      color: rgba(13, 67, 167, var(--text-opacity));
       float: left;
       margin-left: 8px; }
     .employee-select-wrap .select img, .employee-select-wrap .select svg {
@@ -2180,12 +2226,12 @@ body {
       outline-offset: 2px;
       padding-left: 8px; }
     .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 {
-      --text-opacity:1;
-      color: #0d43a7;
-      color: rgba(13, 67, 167, var(--text-opacity));
       font-size: 16px;
       line-height: 20px; }
     .employee-select-wrap .select-active p {
+      --text-opacity:1;
+      color: #0d43a7;
+      color: rgba(13, 67, 167, var(--text-opacity));
       float: left;
       margin-left: 8px;
       padding-top: 9px; }
@@ -2204,7 +2250,8 @@ body {
       margin: 0 !important;
       float: none !important; }
   .employee-select-wrap .options-card {
-    width: 100% !important;
+    right: 0;
+    width: 144px;
     -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);
     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);
     max-height: 250px !important;
@@ -2215,8 +2262,7 @@ body {
     margin-top: 4px;
     --bg-opacity:1;
     background-color: #fff;
-    background-color: rgba(255, 255, 255, var(--bg-opacity));
-    max-width: 100%; }
+    background-color: rgba(255, 255, 255, var(--bg-opacity)); }
     .employee-select-wrap .options-card p {
       padding-top: 14px;
       width: 100%;
@@ -2279,13 +2325,13 @@ body {
       outline-offset: 2px;
       padding-left: 8px; }
     .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 {
-      --text-opacity:1;
-      color: #0d43a7;
-      color: rgba(13, 67, 167, var(--text-opacity));
       font-size: 16px;
       line-height: 20px; }
     .select-wrap .select p {
       padding-top: 9px;
+      --text-opacity:1;
+      color: #0d43a7;
+      color: rgba(13, 67, 167, var(--text-opacity));
       float: left;
       margin-left: 8px; }
     .select-wrap .select img {
@@ -2329,12 +2375,12 @@ body {
       outline-offset: 2px;
       padding-left: 8px; }
     .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 {
-      --text-opacity:1;
-      color: #0d43a7;
-      color: rgba(13, 67, 167, var(--text-opacity));
       font-size: 16px;
       line-height: 20px; }
     .select-wrap .select-active p {
+      --text-opacity:1;
+      color: #0d43a7;
+      color: rgba(13, 67, 167, var(--text-opacity));
       float: left;
       margin-left: 8px;
       padding-top: 9px; }
@@ -2601,28 +2647,42 @@ body {
   -webkit-box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03);
   box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03); }
 
+.mobile-number-prefix {
+  position: absolute;
+  left: 12px;
+  top: 34%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  font-size: 16px;
+  font-weight: 500;
+  color: #666;
+  pointer-events: none;
+  z-index: 0 !important; }
+
+.mobile-number-input-with-prefix {
+  padding-left: 45px !important; }
+
 .emp-success-wrap, .success-wrap {
+  display: block;
+  --bg-opacity:1;
   background-color: #05a660;
-  background-color: rgba(5, 166, 96, var(--bg-opacity)); }
+  background-color: rgba(5, 166, 96, var(--bg-opacity));
+  width: 100%;
+  text-align: center;
+  --text-opacity:1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+  padding-top: 16px;
+  padding-bottom: 8px;
+  margin-bottom: 16px; }
   .emp-success-wrap header, .success-wrap header {
+    display: block;
     margin-bottom: 8px;
     font-family: Roboto Condensed,sans-serif;
     font-weight: 700;
     font-size: 32px;
     line-height: 40px; }
-  .emp-success-wrap div img, .success-wrap div img {
-    padding: 13.67px;
-    margin-left: auto;
-    margin-right: auto;
-    --border-opacity:1;
-    border: 1px solid #fff;
-    border-color: rgba(255, 255, 255, var(--border-opacity));
-    border-radius: 9999px;
-    height: 4rem;
-    width: 4rem;
-    background-color: #fff;
-    background-color: rgba(255, 255, 255, var(--bg-opacity)); }
-  .emp-success-wrap div svg, .success-wrap div svg {
+  .emp-success-wrap div img, .emp-success-wrap div svg, .success-wrap div img, .success-wrap div svg {
     padding: 13.67px;
     margin-left: auto;
     margin-right: auto;
@@ -2632,25 +2692,29 @@ body {
     border-radius: 9999px;
     height: 4rem;
     width: 4rem;
+    --bg-opacity:1;
     background-color: #fff;
-    background-color: rgba(255, 255, 255, var(--bg-opacity)); }
+    background-color: rgba(255, 255, 255, var(--bg-opacity));
+    margin-bottom: 16px; }
   .emp-success-wrap div svg.payment-svg, .success-wrap div svg.payment-svg {
     border: unset;
     background-color: unset;
     border-radius: 9999px; }
   .emp-success-wrap div h2, .success-wrap div h2 {
-    font-weight: 700;
     font-size: 16px;
     line-height: 19px;
     margin-bottom: 8px; }
+  .emp-success-wrap div h2, .emp-success-wrap div p, .success-wrap div h2, .success-wrap div p {
+    font-weight: 700; }
   .emp-success-wrap div p, .success-wrap div p {
-    font-weight: 700;
     font-size: 18px;
     line-height: 21px; }
 
-.emp-error-wrap, .emp-success-wrap, .error-wrap, .success-wrap {
+.emp-error-wrap, .error-wrap {
   display: block;
   --bg-opacity:1;
+  background-color: #d4351c;
+  background-color: rgba(212, 53, 28, var(--bg-opacity));
   width: 100%;
   text-align: center;
   --text-opacity:1;
@@ -2658,17 +2722,9 @@ body {
   color: rgba(255, 255, 255, var(--text-opacity));
   padding-top: 16px;
   padding-bottom: 8px;
-  margin-bottom: 16px;
-  display: block;
-  --bg-opacity:1;
-  margin-bottom: 16px;
-  --bg-opacity:1;
   margin-bottom: 16px; }
-
-.emp-error-wrap, .error-wrap {
-  background-color: #d4351c;
-  background-color: rgba(212, 53, 28, var(--bg-opacity)); }
   .emp-error-wrap header, .error-wrap header {
+    display: block;
     margin-bottom: 8px;
     font-family: Roboto Condensed,sans-serif;
     font-weight: 700;
@@ -2682,10 +2738,12 @@ body {
     border: 1px solid #fff;
     border-color: rgba(255, 255, 255, var(--border-opacity));
     border-radius: 9999px;
+    --bg-opacity:1;
     background-color: #fff;
     background-color: rgba(255, 255, 255, var(--bg-opacity));
     height: 4rem;
-    width: 4rem; }
+    width: 4rem;
+    margin-bottom: 16px; }
 
 @media (min-width: 780px) {
   .success-wrap {
@@ -4489,10 +4547,9 @@ video::-webkit-media-controls-panel {
   font-size: 19px; }
 
 .customBtn, .customBtn-selected {
+  --bg-opacity:1;
   background-color: #fff;
   background-color: rgba(255, 255, 255, var(--bg-opacity));
-  color: #0d43a7;
-  color: rgba(13, 67, 167, var(--text-opacity));
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
@@ -4509,13 +4566,11 @@ video::-webkit-media-controls-panel {
   border: transparent;
   background-color: initial; }
 
-.customBtn, .customBtn-selected, .customBtn-selected {
-  --bg-opacity:1;
-  --text-opacity:1; }
-
 .customBtn-selected {
+  --bg-opacity:1;
   background-color: #2947a3;
   background-color: rgba(41, 71, 163, var(--bg-opacity));
+  --text-opacity:1;
   color: #fff;
   color: rgba(255, 255, 255, var(--text-opacity));
   font-weight: 500;
@@ -7254,7 +7309,8 @@ video::-webkit-media-controls-panel {
     padding: 20px 0; }
   .employee-login-card {
     padding: 32px 24px;
-    border-radius: 8px; }
+    border-radius: 8px;
+    width: 100%; }
   .employee-login-icon-circle {
     width: 70px;
     height: 70px;
@@ -9243,72 +9299,309 @@ body {
   .app-iframe-wrapper {
     left: 0; } }
 
-.middle-content {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 522px; }
-  @media (min-width: 768px) {
-    .middle-content {
-      -webkit-box-orient: horizontal;
-      -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-      flex-direction: row;
-      min-height: 360px; } }
-
-.middle-left-half {
-  width: 100%; }
-  @media (min-width: 768px) {
-    .middle-left-half {
-      width: 50%; } }
-
-.middle-left-half-upper {
-  min-height: 162px;
-  margin-bottom: 18px;
-  -webkit-box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-  box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-  font-family: Noto sans;
-  background-color: #ffe5e5; }
-  @media (min-width: 768px) {
-    .middle-left-half-upper {
-      height: 50%; } }
-
-.middle-left-half-upper-body {
-  list-style-type: none;
-  padding: 0 10px; }
+.landing-page {
+  min-height: 100vh;
+  background-color: #f8fafc;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif; }
 
-.middle-left-half-upper-body ul li {
-  text-decoration: none !important;
-  margin-top: 20px; }
+.landing-hero {
+  position: relative;
+  min-height: 85vh;
+  background: linear-gradient(135deg, #1e3a8a, #3b82f6 50%, #0ea5e9);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 40px 20px;
+  overflow: hidden; }
+  .landing-hero:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    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");
+    opacity: .5; }
 
-.middle-left-half-lower {
-  min-height: 162px;
-  -webkit-box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-  box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922); }
-  @media (min-width: 768px) {
-    .middle-left-half-lower {
-      height: 45%; } }
+.landing-hero-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  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%); }
 
-.middle-section {
+.landing-hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  grid-gap: 16px;
-  gap: 16px;
-  padding: 16px;
-  min-height: 360px;
-  position: relative;
-  z-index: 2;
-  margin-bottom: 20px; }
-
-.middle-content {
-  -ms-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
+  -ms-flex-direction: column;
   flex-direction: column;
-  grid-gap: 16px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 48px;
+  gap: 48px; }
+
+.landing-hero-text {
+  text-align: center;
+  max-width: 700px; }
+
+.landing-hero-title {
+  font-size: 48px;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 20px;
+  line-height: 1.2;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
+  .landing-hero-title span {
+    background: linear-gradient(135deg, #fbbf24, #f59e0b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text; }
+  @media (max-width: 768px) {
+    .landing-hero-title {
+      font-size: 32px; } }
+
+.landing-hero-subtitle {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.7;
+  margin: 0; }
+  @media (max-width: 768px) {
+    .landing-hero-subtitle {
+      font-size: 16px; } }
+
+.landing-login-cards {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-gap: 32px;
+  gap: 32px;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+  @media (max-width: 768px) {
+    .landing-login-cards {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      grid-gap: 20px;
+      gap: 20px;
+      width: 100%;
+      max-width: 400px; } }
+
+.landing-login-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 40px 32px;
+  width: 320px;
+  cursor: pointer;
+  -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden; }
+  .landing-login-card:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: -webkit-gradient(linear, left top, right top, from(#3b82f6), to(#0ea5e9));
+    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
+    -webkit-transform: scaleX(0);
+    transform: scaleX(0);
+    -webkit-transition: -webkit-transform .4s ease;
+    transition: -webkit-transform .4s ease;
+    transition: transform .4s ease;
+    transition: transform .4s ease, -webkit-transform .4s ease;
+    transition: transform .4s ease,-webkit-transform .4s ease; }
+  .landing-login-card:hover {
+    -webkit-transform: translateY(-12px) scale(1.02);
+    transform: translateY(-12px) scale(1.02);
+    -webkit-box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.15); }
+    .landing-login-card:hover:before {
+      -webkit-transform: scaleX(1);
+      transform: scaleX(1); }
+    .landing-login-card:hover .landing-login-card-icon {
+      -webkit-transform: scale(1.1) rotate(5deg);
+      transform: scale(1.1) rotate(5deg); }
+    .landing-login-card:hover .landing-login-card-btn {
+      background: linear-gradient(135deg, #2563eb, #1d4ed8);
+      color: #fff; }
+      .landing-login-card:hover .landing-login-card-btn svg {
+        -webkit-transform: translateX(4px);
+        transform: translateX(4px); }
+  @media (max-width: 768px) {
+    .landing-login-card {
+      width: 100%;
+      padding-left: 24px;
+      padding-bottom: 32px;
+      padding-right: 24px;
+      padding-top: 32px; } }
+
+.landing-login-card-citizen .landing-login-card-icon {
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  color: #2563eb; }
+
+.landing-login-card-citizen:hover .landing-login-card-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8); }
+
+.landing-login-card-employee .landing-login-card-icon {
+  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
+  color: #059669; }
+
+.landing-login-card-employee:hover .landing-login-card-btn {
+  background: linear-gradient(135deg, #059669, #047857); }
+
+.landing-login-card-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  -webkit-transition: all .4s ease;
+  transition: all .4s ease; }
+  .landing-login-card-icon svg {
+    width: 36px;
+    height: 36px; }
+
+.landing-login-card-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 12px; }
+
+.landing-login-card-desc {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0 0 24px; }
+
+.landing-login-card-btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  grid-gap: 8px;
+  gap: 8px;
+  background: #f1f5f9;
+  color: #475569;
+  padding: 14px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-login-card-btn svg {
+    width: 18px;
+    height: 18px;
+    -webkit-transition: -webkit-transform .3s ease;
+    transition: -webkit-transform .3s ease;
+    transition: transform .3s ease;
+    transition: transform .3s ease, -webkit-transform .3s ease;
+    transition: transform .3s ease,-webkit-transform .3s ease; }
+
+.middle-content {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 522px; }
+  @media (min-width: 768px) {
+    .middle-content {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      min-height: 360px; } }
+
+.middle-left-half {
+  width: 100%; }
+  @media (min-width: 768px) {
+    .middle-left-half {
+      width: 50%; } }
+
+.middle-left-half-upper {
+  min-height: 162px;
+  margin-bottom: 18px;
+  -webkit-box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
+  box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
+  font-family: Noto sans;
+  background-color: #ffe5e5; }
+  @media (min-width: 768px) {
+    .middle-left-half-upper {
+      height: 50%; } }
+
+.middle-left-half-upper-body {
+  list-style-type: none;
+  padding: 0 10px; }
+
+.middle-left-half-upper-body ul li {
+  text-decoration: none !important;
+  margin-top: 20px; }
+
+.middle-left-half-lower {
+  min-height: 162px;
+  -webkit-box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
+  box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922); }
+  @media (min-width: 768px) {
+    .middle-left-half-lower {
+      height: 45%; } }
+
+.middle-section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  gap: 16px;
+  padding: 16px;
+  min-height: 360px;
+  position: relative;
+  z-index: 2;
+  margin-bottom: 20px; }
+
+.middle-content {
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  grid-gap: 16px;
   gap: 16px;
   width: 100%; }
   @media (min-width: 768px) {
@@ -9602,81 +9895,1323 @@ body {
 .top-section-parent {
   position: relative;
   width: 100%;
-  background: -webkit-gradient(linear, left top, left bottom, from(#3765ca), to(#294a97));
-  background: linear-gradient(180deg, #3765ca, #294a97);
-  height: 160px; }
-
-.top-section {
-  position: absolute;
-  top: -50px;
-  left: 0;
-  right: 0;
-  -ms-flex-pack: distribute;
-  justify-content: space-around; }
+  background: linear-gradient(135deg, #1e3a8a, #3b82f6 50%, #0ea5e9);
+  padding: 40px 20px 60px;
+  margin-top: -20px; }
+  @media (max-width: 768px) {
+    .top-section-parent {
+      padding-left: 15px;
+      padding-bottom: 50px;
+      padding-right: 15px;
+      padding-top: 30px; } }
 
-.logo-box, .top-section {
+.top-section-wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
-  align-items: center; }
+  align-items: center;
+  grid-gap: 16px;
+  gap: 16px;
+  position: relative; }
+  @media (max-width: 640px) {
+    .top-section-wrapper {
+      grid-gap: 8px;
+      gap: 8px; } }
 
-.logo-box {
-  width: 120px;
-  height: 100px;
-  background-color: #fff;
+.top-section-slider-container {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 16px; }
+
+.top-section-slider {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+  .top-section-slider.sliding-next {
+    -webkit-animation: slideNext 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: slideNext 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+  .top-section-slider.sliding-prev {
+    -webkit-animation: slidePrev 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: slidePrev 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+
+@-webkit-keyframes slideNext {
+  0% {
+    opacity: .8; }
+  50% {
+    opacity: .9; }
+  to {
+    opacity: 1; } }
+
+@keyframes slideNext {
+  0% {
+    opacity: .8; }
+  50% {
+    opacity: .9; }
+  to {
+    opacity: 1; } }
+
+@-webkit-keyframes slidePrev {
+  0% {
+    opacity: .8; }
+  50% {
+    opacity: .9; }
+  to {
+    opacity: 1; } }
+
+@keyframes slidePrev {
+  0% {
+    opacity: .8; }
+  50% {
+    opacity: .9; }
+  to {
+    opacity: 1; } }
+
+.top-section-slide-item {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  padding: 8px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.top-section-logo-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 24px 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
-  padding: 10px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 8px; }
-
-.logo {
-  max-width: 70%;
-  max-height: 50%;
-  padding-top: 25px; }
-
-.logo-text {
-  margin-top: 8px;
-  color: #000;
-  font-size: 15px; }
-
-.nav-button {
-  background: #fff;
-  border: none;
-  color: #000;
-  font-size: 24px;
+  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  margin: 0 10px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  border: 2px solid transparent;
+  height: 140px; }
+  .top-section-logo-card:hover {
+    -webkit-transform: translateY(-8px) scale(1.02);
+    transform: translateY(-8px) scale(1.02);
+    -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+    border-color: rgba(59, 130, 246, 0.3); }
+    .top-section-logo-card:hover .top-section-logo-icon {
+      -webkit-transform: scale(1.1);
+      transform: scale(1.1); }
+  @media (max-width: 640px) {
+    .top-section-logo-card {
+      padding-left: 12px;
+      padding-bottom: 20px;
+      padding-right: 12px;
+      padding-top: 20px;
+      height: 120px; } }
+
+.top-section-logo-icon {
+  width: 56px;
+  height: 56px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
-
-.footer-bottom, .nav-button {
+  margin-bottom: 12px;
+  -webkit-transition: -webkit-transform .3s ease;
+  transition: -webkit-transform .3s ease;
+  transition: transform .3s ease;
+  transition: transform .3s ease, -webkit-transform .3s ease;
+  transition: transform .3s ease,-webkit-transform .3s ease; }
+  .top-section-logo-icon img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+    object-fit: contain; }
+  @media (max-width: 640px) {
+    .top-section-logo-icon {
+      width: 44px;
+      height: 44px;
+      margin-bottom: 8px; } }
+
+.top-section-logo-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+  line-height: 1.3; }
+  @media (max-width: 640px) {
+    .top-section-logo-text {
+      font-size: 11px; } }
+
+.top-section-nav-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+  color: #1e40af;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  -ms-flex-negative: 0;
+  flex-shrink: 0; }
+  .top-section-nav-btn svg {
+    width: 24px;
+    height: 24px; }
+  .top-section-nav-btn:hover:not(.disabled) {
+    background: #fff;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
+  .top-section-nav-btn.disabled {
+    opacity: .4;
+    cursor: not-allowed; }
+  @media (max-width: 640px) {
+    .top-section-nav-btn {
+      width: 36px;
+      height: 36px; }
+      .top-section-nav-btn svg {
+        width: 18px;
+        height: 18px; } }
+
+.top-section-dots {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  grid-gap: 8px;
+  gap: 8px;
+  margin-top: 20px; }
+
+.top-section-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  padding: 0; }
+  .top-section-dot:hover {
+    background: rgba(255, 255, 255, 0.7); }
+  .top-section-dot.active {
+    background: #fff;
+    -webkit-transform: scale(1.3);
+    transform: scale(1.3);
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
+
+.top-section {
+  position: absolute;
+  top: -50px;
+  left: 0;
+  right: 0;
+  -ms-flex-pack: distribute;
+  justify-content: space-around; }
+
+.logo-box, .top-section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.logo-box {
+  width: 120px;
+  height: 100px;
+  background-color: #fff;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 8px; }
+
+.logo {
+  max-width: 70%;
+  max-height: 50%;
+  padding-top: 25px; }
+
+.logo-text {
+  margin-top: 8px;
+  color: #000;
+  font-size: 15px; }
+
+.nav-button {
+  background: #fff;
+  border: none;
+  color: #000;
+  font-size: 24px;
+  cursor: pointer;
+  margin: 0 10px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
+
+.landing-services-section {
+  padding: 60px 20px;
+  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#ffffff));
+  background: linear-gradient(180deg, #f8fafc, #fff); }
+
+.landing-services-container {
+  max-width: 1200px;
+  margin: 0 auto; }
+
+.landing-services-header {
+  text-align: center;
+  margin-bottom: 48px; }
+
+.landing-services-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  color: #1e40af;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px; }
+
+.landing-services-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0; }
+  @media (max-width: 768px) {
+    .landing-services-title {
+      font-size: 28px; } }
+
+.landing-services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 24px;
+  gap: 24px; }
+  @media (max-width: 1024px) {
+    .landing-services-grid {
+      grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 640px) {
+    .landing-services-grid {
+      grid-template-columns: 1fr; } }
+
+.landing-services-card {
+  background: #fff;
+  border-radius: 20px;
+  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-services-card:hover {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+    -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }
+
+.landing-services-card-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 12px;
+  gap: 12px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #1e40af, #3b82f6);
+  color: #fff; }
+  .landing-services-card-header svg {
+    width: 24px;
+    height: 24px;
+    -ms-flex-negative: 0;
+    flex-shrink: 0; }
+  .landing-services-card-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0; }
+
+.landing-services-card-body {
+  padding: 24px; }
+
+.landing-services-list {
+  list-style: none;
+  padding: 0;
+  margin: 0; }
+
+.landing-services-list-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 12px;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease; }
+  .landing-services-list-item:last-child {
+    border-bottom: none; }
+  .landing-services-list-item:hover {
+    padding-left: 8px; }
+    .landing-services-list-item:hover .landing-services-list-bullet {
+      -webkit-transform: scale(1.2);
+      transform: scale(1.2); }
+    .landing-services-list-item:hover a {
+      color: #2563eb;
+      color: #475569;
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      -webkit-transition: color .2s ease;
+      transition: color .2s ease; }
+
+.landing-services-list-bullet {
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  border-radius: 50%;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: -webkit-transform .2s ease;
+  transition: -webkit-transform .2s ease;
+  transition: transform .2s ease;
+  transition: transform .2s ease, -webkit-transform .2s ease;
+  transition: transform .2s ease,-webkit-transform .2s ease; }
+
+.landing-gallery-container {
+  height: 200px;
+  overflow: hidden;
+  border-radius: 12px; }
+
+.landing-gallery-image {
+  height: 100%;
+  -webkit-transition: opacity .5s ease;
+  transition: opacity .5s ease; }
+
+.landing-gallery-nav {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  color: #1e40af; }
+  .landing-gallery-nav:hover {
+    background: #fff;
+    -webkit-transform: translateY(-50%) scale(1.1);
+    transform: translateY(-50%) scale(1.1); }
+  .landing-gallery-nav svg {
+    width: 20px;
+    height: 20px; }
+
+.landing-gallery-prev {
+  left: 12px; }
+
+.landing-gallery-next {
+  right: 12px; }
+
+.landing-news-item {
+  padding: 16px 0; }
+  .landing-news-item:last-child {
+    border-bottom: none; }
+
+.landing-news-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px;
+  line-height: 1.5; }
+
+.landing-news-meta {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+
+.landing-news-date {
+  font-size: 12px;
+  color: #94a3b8; }
+
+.landing-news-link {
+  font-size: 12px;
+  color: #3b82f6;
+  text-decoration: none;
+  font-weight: 600; }
+  .landing-news-link:hover {
+    text-decoration: underline; }
+
+.landing-help-section {
+  padding: 80px 20px;
+  background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
+
+.landing-help-container {
+  max-width: 1200px;
+  margin: 0 auto; }
+
+.landing-help-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 48px;
+  gap: 48px; }
+
+.landing-help-text {
+  text-align: center;
+  max-width: 600px; }
+
+.landing-help-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: #fff;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 16px; }
+
+.landing-help-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 16px; }
+  @media (max-width: 768px) {
+    .landing-help-title {
+      font-size: 28px; } }
+
+.landing-help-subtitle {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.7; }
+
+.landing-help-cards {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-gap: 24px;
+  gap: 24px;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+  @media (max-width: 768px) {
+    .landing-help-cards {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      width: 100%;
+      max-width: 400px; } }
+
+.landing-help-card {
+  background: #fff;
+  border-radius: 20px;
+  padding: 24px;
+  grid-gap: 16px;
+  gap: 16px;
+  min-width: 300px;
+  cursor: pointer;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 2px solid transparent; }
+  .landing-help-card:hover {
+    -webkit-transform: translateY(-4px);
+    transform: translateY(-4px);
+    -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+    border-color: var(--card-color); }
+    .landing-help-card:hover .landing-help-card-arrow {
+      opacity: 1;
+      -webkit-transform: translateX(0);
+      transform: translateX(0); }
+  @media (max-width: 768px) {
+    .landing-help-card {
+      width: 100%;
+      min-width: unset; } }
+
+.landing-help-card, .landing-help-card-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.landing-help-card-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: var(--card-bg);
+  -ms-flex-negative: 0;
+  flex-shrink: 0; }
+  .landing-help-card-icon img {
+    width: 32px;
+    height: 32px;
+    -o-object-fit: contain;
+    object-fit: contain; }
+
+.landing-help-card-content {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-gap: 4px;
+  gap: 4px; }
+
+.landing-help-card-label {
+  font-size: 14px;
+  color: #64748b;
+  font-weight: 500; }
+
+.landing-help-card-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b; }
+
+.landing-help-card-arrow {
+  width: 32px;
+  height: 32px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--card-color);
+  opacity: 0;
+  -webkit-transform: translateX(-8px);
+  transform: translateX(-8px);
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-help-card-arrow svg {
+    width: 20px;
+    height: 20px; }
+
+.landing-about-section {
+  padding: 80px 20px;
+  background: #fff; }
+
+.landing-about-container {
+  max-width: 1200px;
+  margin: 0 auto; }
+
+.landing-about-header {
+  text-align: center;
+  margin-bottom: 48px; }
+
+.landing-about-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  color: #1e40af;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px; }
+
+.landing-about-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 16px; }
+  @media (max-width: 768px) {
+    .landing-about-title {
+      font-size: 24px; } }
+
+.landing-about-divider {
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  border-radius: 2px;
+  margin: 0 auto; }
+
+.landing-about-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-gap: 40px;
+  gap: 40px; }
+
+.landing-about-main {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 32px;
+  gap: 32px; }
+  @media (max-width: 768px) {
+    .landing-about-main {
+      grid-template-columns: 1fr; } }
+
+.landing-about-card {
+  background: #f8fafc;
+  border-radius: 20px;
+  padding: 32px;
+  position: relative;
+  overflow: hidden; }
+  .landing-about-card h3 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0 0 20px; }
+  .landing-about-card p {
+    font-size: 15px;
+    color: #64748b;
+    line-height: 1.8;
+    margin: 0 0 16px; }
+    .landing-about-card p:last-child {
+      margin-bottom: 0; }
+    .landing-about-card p strong {
+      color: #1e40af; }
+
+.landing-about-card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, left bottom, from(#3b82f6), to(#2563eb));
+  background: linear-gradient(180deg, #3b82f6, #2563eb); }
+
+.landing-about-highlights {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  grid-gap: 32px;
+  gap: 32px;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  @media (max-width: 640px) {
+    .landing-about-highlights {
+      grid-gap: 16px;
+      gap: 16px; } }
+
+.landing-about-highlight-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 12px;
+  gap: 12px;
+  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+  padding: 16px 24px;
+  border-radius: 50px;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-about-highlight-item:hover {
+    -webkit-transform: translateY(-4px);
+    transform: translateY(-4px);
+    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
+
+.landing-about-highlight-icon {
+  font-size: 24px; }
+
+.landing-about-highlight-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569; }
+
+.landing-footer {
+  background: #0f172a;
+  color: #fff; }
+
+.landing-footer-partners {
+  background: #f8fafc;
+  padding: 40px 20px; }
+
+.landing-footer-partners-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center; }
+
+.landing-footer-partners-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin: 0 0 24px; }
+
+.landing-footer-partners-grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 32px;
+  gap: 32px;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  @media (max-width: 768px) {
+    .landing-footer-partners-grid {
+      grid-gap: 20px;
+      gap: 20px; } }
+
+.landing-footer-partner-logo {
+  background: #fff;
+  padding: 12px 20px;
+  border-radius: 12px;
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-footer-partner-logo:hover {
+    -webkit-transform: translateY(-4px);
+    transform: translateY(-4px);
+    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
+  .landing-footer-partner-logo img {
+    height: 40px;
+    width: auto;
+    -o-object-fit: contain;
+    object-fit: contain; }
+    @media (max-width: 768px) {
+      .landing-footer-partner-logo img {
+        height: 32px; } }
+
+.landing-footer-main {
+  padding: 60px 20px; }
+
+.landing-footer-container {
+  max-width: 1200px;
+  margin: 0 auto; }
+
+.landing-footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  grid-gap: 48px;
+  gap: 48px; }
+  @media (max-width: 1024px) {
+    .landing-footer-grid {
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 40px;
+      gap: 40px; } }
+  @media (max-width: 640px) {
+    .landing-footer-grid {
+      grid-template-columns: 1fr;
+      grid-gap: 32px;
+      gap: 32px; } }
+
+.landing-footer-section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 20px;
   display: -webkit-box;
   display: -ms-flexbox;
-  display: flex; }
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 8px;
+  gap: 8px; }
+  .landing-footer-section-title svg {
+    width: 20px;
+    height: 20px;
+    color: #3b82f6; }
+
+.landing-footer-address-content p {
+  font-size: 14px;
+  color: #94a3b8;
+  line-height: 1.8;
+  margin: 0 0 4px; }
+
+.landing-footer-email {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 8px;
+  gap: 8px;
+  margin-top: 12px !important;
+  color: #3b82f6 !important; }
+  .landing-footer-email svg {
+    color: #3b82f6; }
+
+.landing-footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0; }
+  .landing-footer-links li {
+    margin-bottom: 12px; }
+    .landing-footer-links li a {
+      font-size: 14px;
+      color: #94a3b8;
+      text-decoration: none;
+      -webkit-transition: all .2s ease;
+      transition: all .2s ease;
+      display: inline-block; }
+      .landing-footer-links li a:hover {
+        color: #fff;
+        -webkit-transform: translateX(4px);
+        transform: translateX(4px); }
+
+.landing-footer-social-icons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-gap: 12px;
+  gap: 12px; }
+
+.landing-footer-social-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-footer-social-icon svg {
+    width: 20px;
+    height: 20px; }
+  .landing-footer-social-icon:hover {
+    -webkit-transform: translateY(-4px);
+    transform: translateY(-4px); }
+
+.landing-footer-social-facebook:hover {
+  background: #1877f2; }
+
+.landing-footer-social-twitter:hover {
+  background: #1da1f2; }
+
+.landing-footer-social-linkedin:hover {
+  background: #0077b5; }
+
+.landing-footer-social-youtube:hover {
+  background: red; }
+
+.landing-footer-bottom {
+  background: #020617;
+  padding: 20px; }
+
+.landing-footer-bottom-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 8px;
+  gap: 8px;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  @media (max-width: 640px) {
+    .landing-footer-bottom-content {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      grid-gap: 12px;
+      gap: 12px; } }
+
+.landing-footer-copyright, .landing-footer-license, .landing-footer-powered {
+  font-size: 13px;
+  color: #94a3b8;
+  cursor: pointer;
+  -webkit-transition: color .2s ease;
+  transition: color .2s ease; }
+  .landing-footer-copyright:hover, .landing-footer-license:hover, .landing-footer-powered:hover {
+    color: #fff; }
+
+.landing-footer-license {
+  text-decoration: none; }
+
+.landing-footer-divider {
+  color: #475569; }
+  @media (max-width: 640px) {
+    .landing-footer-divider {
+      display: none; } }
+
+.landing-middle-section {
+  padding: 80px 20px;
+  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#ffffff));
+  background: linear-gradient(180deg, #f8fafc, #fff); }
+
+.landing-middle-container {
+  max-width: 1200px;
+  margin: 0 auto; }
+
+.landing-section-header {
+  text-align: center;
+  margin-bottom: 48px; }
+
+.landing-section-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 12px; }
+  @media (max-width: 768px) {
+    .landing-section-title {
+      font-size: 28px; } }
+
+.landing-section-subtitle {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0; }
+
+.landing-middle-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 24px;
+  gap: 24px; }
+  @media (max-width: 1024px) {
+    .landing-middle-grid {
+      grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 640px) {
+    .landing-middle-grid {
+      grid-template-columns: 1fr; } }
+
+.landing-info-card {
+  background: #fff;
+  border-radius: 20px;
+  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+  .landing-info-card:hover {
+    -webkit-transform: translateY(-8px);
+    transform: translateY(-8px);
+    -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); }
+
+.landing-card-header {
+  grid-gap: 12px;
+  gap: 12px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #1e40af, #3b82f6);
+  color: #fff; }
+
+.landing-card-header, .landing-card-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.landing-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+  .landing-card-icon svg {
+    width: 24px;
+    height: 24px; }
+
+.landing-card-icon-purple {
+  background: rgba(139, 92, 246, 0.3); }
+
+.landing-card-icon-amber {
+  background: rgba(245, 158, 11, 0.3); }
+
+.landing-card-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0; }
+
+.landing-projects-card .landing-card-header {
+  background: linear-gradient(135deg, #1e40af, #3b82f6); }
+
+.landing-projects-list {
+  padding: 8px; }
+
+.landing-project-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 12px;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  text-decoration: none;
+  color: #1e293b;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease; }
+  .landing-project-item:hover {
+    background: #f1f5f9; }
+    .landing-project-item:hover .landing-project-arrow {
+      opacity: 1;
+      -webkit-transform: translateX(0);
+      transform: translateX(0); }
+
+.landing-project-icon {
+  font-size: 20px;
+  width: 36px;
+  height: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: #f1f5f9;
+  border-radius: 10px; }
+
+.landing-project-name {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600; }
+
+.landing-project-arrow {
+  width: 20px;
+  height: 20px;
+  color: #3b82f6;
+  opacity: 0;
+  -webkit-transform: translateX(-8px);
+  transform: translateX(-8px);
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease; }
+
+.landing-gallery-card .landing-card-header {
+  background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
+
+.landing-gallery-container {
+  position: relative;
+  padding: 16px; }
+
+.landing-gallery-image {
+  width: 100%;
+  height: 180px;
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: 12px; }
+
+.landing-gallery-controls {
+  grid-gap: 16px;
+  gap: 16px;
+  margin-top: 16px; }
+
+.landing-gallery-btn, .landing-gallery-controls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center; }
+
+.landing-gallery-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: #f1f5f9;
+  color: #475569;
+  cursor: pointer;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease; }
+  .landing-gallery-btn svg {
+    width: 20px;
+    height: 20px; }
+  .landing-gallery-btn:hover {
+    background: #3b82f6;
+    color: #fff; }
+
+.landing-gallery-dots {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-gap: 8px;
+  gap: 8px; }
+
+.landing-gallery-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  cursor: pointer;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease; }
+  .landing-gallery-dot.active {
+    background: #3b82f6;
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2); }
+  .landing-gallery-dot:hover:not(.active) {
+    background: #94a3b8; }
+
+.landing-news-card .landing-card-header {
+  background: linear-gradient(135deg, #d97706, #f59e0b); }
+
+.landing-news-list {
+  padding: 16px 24px; }
+
+.landing-news-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  grid-gap: 12px;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9; }
+  .landing-news-item:last-child {
+    border-bottom: none; }
+
+.landing-news-bullet {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  border-radius: 50%;
+  margin-top: 6px; }
+
+.landing-news-text {
+  font-size: 14px;
+  color: #475569;
+  line-height: 1.6;
+  margin: 0; }
 
 .footer-bottom {
   background-color: #294a97;
   width: 100%;
   min-height: 200px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
@@ -9689,6 +11224,9 @@ body {
   color: #fff; }
   @media (max-width: 639px) {
     .footer-bottom {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -13768,7 +15306,6 @@ body {
 
 .employee-header-header-btn-login {
   background-color: initial;
-  color: #2947a3;
   border: 2px solid #2947a3; }
 
 .employee-header-header-btn-login:hover {
@@ -13938,11 +15475,9 @@ body {
   width: calc(100% - 16px); }
 
 .custom-timeline-container {
-  width: 100%;
   padding: 24px;
-  background-color: #f9fafb;
-  margin-left: 16px;
-  border-radius: 12px; }
+  background: linear-gradient(135deg, #fff, #f8fafb);
+  border-radius: 14px; }
 
 .custom-timeline-header {
   margin-bottom: 24px; }
@@ -14092,6 +15627,11 @@ body {
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   padding: 20px 24px; }
 
 .custom-card-left {
@@ -14102,8 +15642,7 @@ body {
 
 .custom-card-right {
   -ms-flex-negative: 0;
-  flex-shrink: 0;
-  text-align: right; }
+  flex-shrink: 0; }
 
 .custom-action-title {
   font-size: 16px;
@@ -14111,12 +15650,6 @@ body {
   color: #374151;
   margin-bottom: 8px; }
 
-.custom-actions-label {
-  font-size: 12px;
-  color: #6b7280;
-  font-weight: 600;
-  margin-bottom: 6px; }
-
 .custom-status-text {
   font-size: 14px;
   font-weight: 600;
@@ -14139,6 +15672,16 @@ body {
   font-weight: 600; }
 
 .custom-comments-section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+
+.custom-assignee-section, .custom-comments-section {
   border-top: 1px solid #e5e7eb;
   padding: 16px 24px 20px; }
 
@@ -14153,6 +15696,92 @@ body {
   color: #374151;
   line-height: 1.6; }
 
+.custom-doc-container {
+  display: inline-block;
+  margin-right: 10px; }
+
+.custom-doc-link {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  grid-gap: 4px;
+  gap: 4px;
+  color: #2563eb;
+  text-decoration: none; }
+  .custom-doc-link span {
+    font-size: 14px;
+    font-weight: 600; }
+
+.custom-comments-section-no-border {
+  padding: 16px 24px 20px; }
+
+@media (max-width: 768px) {
+  .custom-timeline-container {
+    padding: 16px; }
+  .custom-tracking-line {
+    width: 40px; }
+  .custom-timeline-title {
+    font-size: 20px;
+    white-space: normal; }
+  .custom-blue-bar {
+    height: 40px;
+    min-width: 30px; }
+  .custom-vertical-line {
+    left: 24px; }
+  .custom-icon-container {
+    margin-left: 0; }
+  .custom-circular-icon {
+    width: 40px;
+    height: 40px; }
+  .custom-date-badge {
+    padding: 6px 12px;
+    font-size: 12px; }
+  .custom-entry-content {
+    grid-gap: 16px;
+    gap: 16px; }
+  .custom-card-top {
+    padding: 16px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    grid-gap: 12px;
+    gap: 12px; }
+  .custom-card-left {
+    padding-right: 0;
+    width: 100%; }
+  .custom-card-right {
+    width: 100%; }
+  .custom-comments-section {
+    padding: 12px 16px;
+    grid-gap: 12px;
+    gap: 12px; } }
+
+@media (max-width: 480px) {
+  .custom-tracking-line {
+    display: none; }
+  .custom-title-bar-row {
+    grid-gap: 12px;
+    gap: 12px; }
+  .custom-timeline-title {
+    font-size: 18px; }
+  .custom-vertical-line {
+    left: 20px; }
+  .custom-circular-icon {
+    width: 36px;
+    height: 36px; }
+  .custom-icon-container {
+    margin-left: 2px; }
+  .custom-entry-content {
+    grid-gap: 12px;
+    gap: 12px; } }
+
 .new-df-footer {
   background-color: #1e293b;
   color: #fff;
@@ -14420,6 +16049,232 @@ body {
 .new-accordion-info {
   margin-top: 16px; }
 
+.ral-banner {
+  padding: 10px; }
+
+.ral-banner-header {
+  font-size: 32px;
+  word-break: break-word; }
+
+.ral-action-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline; }
+
+.ral-error-label {
+  width: 70%;
+  margin-left: 30%;
+  margin-top: -18px; }
+
+.ral-applicant-container {
+  border: 1px solid #ddd;
+  padding: 12px;
+  margin-bottom: 16px;
+  border-radius: 10px; }
+
+.ral-applicant-header-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-bottom: 20px; }
+
+.ral-remove-btn {
+  background: transparent;
+  width: 100%;
+  max-width: 25px; }
+
+.ral-add-applicant-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  margin-bottom: 16px; }
+
+.ral-add-applicant-btn {
+  border: 1px solid #2947a3;
+  background: transparent;
+  color: #2947a3;
+  width: 100%;
+  max-width: 140px; }
+
+.ral-back-btn {
+  border: 1px solid;
+  background: transparent;
+  color: #2947a3;
+  margin-right: 8px; }
+
+.ral-summary-card {
+  padding: 2px; }
+
+.ral-summary-section {
+  background-color: #fff;
+  padding: 1rem 0;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  -webkit-box-shadow: 0 2px 6px rgba(18, 38, 63, 0.04);
+  box-shadow: 0 2px 6px rgba(18, 38, 63, 0.04); }
+
+.ral-summary-header-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: .75rem; }
+
+.ral-summary-heading {
+  font-size: 1.25rem;
+  color: #0d43a7;
+  font-weight: 500;
+  margin: 0; }
+
+.ral-summary-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  border-bottom: 1px dashed #e9eef2;
+  padding: 10px 4px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.ral-summary-label {
+  font-weight: 600;
+  color: #333; }
+
+.ral-summary-docs-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  grid-gap: 1rem;
+  gap: 1rem;
+  margin-top: .5rem; }
+
+.ral-summary-doc-card {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 220px;
+  flex: 1 1 220px;
+  min-width: 180px;
+  max-width: 260px;
+  background-color: #fbfcfe;
+  padding: .6rem;
+  border: 1px solid #eef3f7;
+  border-radius: 6px; }
+
+.ral-summary-applicant-subheading {
+  padding: 6px 26px;
+  background: #fdf5e6;
+  font-weight: 900; }
+
+.ral-summary-applicant-wrapper {
+  margin-bottom: 1rem; }
+
+.ral-doc-container {
+  margin-bottom: 24px; }
+
+.ral-doc-field, .ral-doc-label {
+  width: 100%; }
+
+.ral-doc-field-employee {
+  max-width: 500px; }
+
+.ral-doc-upload-msg {
+  width: 100%; }
+
+.ral-doc-upload-input {
+  width: 280px; }
+
+.ral-doc-error {
+  color: #d4351c;
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 10px; }
+
+.ral-app-details-header {
+  margin-left: 14px;
+  max-width: 960px; }
+
+.ral-app-details-owner-header {
+  padding: 5px 24px 0;
+  font-weight: 600; }
+
+.ral-app-details-docs-card {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-orient: horizontal !important;
+  -webkit-box-direction: normal !important;
+  -ms-flex-direction: row !important;
+  flex-direction: row !important;
+  -ms-flex-wrap: wrap !important;
+  flex-wrap: wrap !important;
+  grid-gap: 30px;
+  gap: 30px;
+  margin-bottom: 26px; }
+
+.ral-my-properties-container {
+  margin-top: 16px; }
+
+.ral-my-properties-header {
+  margin-left: 8px; }
+
+.ral-my-properties-actions {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  grid-gap: 20px;
+  gap: 20px; }
+
+.ral-my-properties-load-more, .ral-my-properties-no-result {
+  margin-left: 16px;
+  margin-top: 16px; }
+
+.ral-my-properties-load-more-link {
+  cursor: pointer;
+  color: #007bff;
+  font-weight: 700; }
+
+.ral-modal-header {
+  margin-left: 20px; }
+
+.ral-modal-close {
+  margin-right: 20px; }
+
+.ral-header-32 {
+  font-size: 32px; }
+
+.ral-card-subheader-24 {
+  font-size: 24px; }
+
+.ral-card-subheader-24-margin {
+  font-size: 24px;
+  margin-top: 30px; }
+
 .ads-view-cart {
   margin-left: 12px;
   padding: 8px 16px;