@djb25/digit-ui-css 1.0.0

package/src/components/landingpage.scss

@@ -0,0 +1,3860 @@
+body {
+  transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mcd-scrolled {
+  padding-top: 80px; /* header height */
+}
+
+/* HEADER */
+.mcd-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 32px;
+  background: #fff;
+}
+
+.mcd-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.mcd-logo {
+  height: 60px;
+  margin-right: 12px;
+}
+
+.small-logo {
+  height: 50px;
+}
+
+.mcd-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0b2c57;
+}
+
+.mcd-header-right {
+  display: flex;
+  align-items: center;
+}
+
+.mcd-menu {
+  list-style: none;
+  display: flex;
+  margin-left: 20px;
+}
+
+.mcd-menu li a {
+  padding: 8px 16px;
+  color: #0b2c57;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.mcd-language-select {
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+
+/* INFO BAR */
+.mcd-info-bar {
+  width: 100%;
+  background: linear-gradient(180deg, #003c8f, #0053a6);
+  padding: 4px 0;
+  color: #fff;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.mcd-info-icon {
+  margin-left: 145px;
+  margin-right: 8px;
+}
+
+.mcd-info-content {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 75%; /* Increased middle width */
+}
+
+.mcd-info-text {
+  display: inline-block;
+  padding-left: 100%;
+  animation: scrollText 19s linear infinite;
+  will-change: transform;
+}
+
+@keyframes scrollText {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+.mcd-search-box {
+  position: absolute;
+  bottom: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  display: flex;
+  padding: 8px;
+  border-radius: 50px;
+  width: 520px;
+  align-items: center;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+}
+
+.mcd-search-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.mcd-search-input input {
+  border: none;
+  outline: none;
+  padding: 10px;
+  flex: 1;
+  font-size: 16px;
+}
+
+.mcd-search-btn {
+  background: linear-gradient(180deg, #217eff, #000);
+  border: none;
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 30px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* QUICK SERVICES */
+.mcd-quick-services {
+  padding: 80px 0 20px;
+  text-align: center;
+}
+
+.qs-label {
+  font-size: 15px;
+  color: #555;
+}
+
+.qs-list {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+}
+
+.qs-list li a {
+  color: #0b2c57;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+/* FOOTER */
+.mcd-footer {
+  padding: 40px;
+  text-align: center;
+}
+
+.mcd-footer-img {
+  height: 40px;
+  cursor: pointer;
+}
+
+
+.branding {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.mcd-emblem {
+  width: 55px;
+}
+
+.branding h2 {
+  font-size: 28px;
+  margin: 0;
+  color: #003366;
+  font-weight: 700;
+}
+
+.branding p {
+  font-size: 14px;
+  margin: 0;
+}
+
+.lang-switch {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 2px 6px;
+}
+
+
+.mcd-top-bar {
+  background: rgb(255 255 255);
+  color: black;
+  padding: 0 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 12%) !important;
+  height: 36px;
+  transform: translateY(0);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+
+.mcd-top-bar {
+  transition: transform 0.3s ease;
+}
+
+
+.mcd-top-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mcd-top-right .icon-link {
+  color: #000;
+}
+
+.pipe {
+  opacity: 0.5;
+
+}
+
+.mcd-top-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.icon-link {
+  color: white;
+  text-decoration: none;
+}
+
+.icon-svg {
+  width: 18px;
+  height: 18px;
+  fill: white;
+  vertical-align: middle;
+}
+
+.mcd-header {
+  position: relative;
+  z-index: 1000;
+  background: #fff;
+  padding: 0px 45px;
+  border-bottom: 2px solid #e6e6e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transform: translateY(0);
+  transition:
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.35s ease;
+  will-change: transform;
+}
+
+.mcd-scrolled .mcd-top-bar {
+  transform: translateY(-100%);
+}
+
+/* Header moves to top */
+.mcd-scrolled .mcd-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+}
+
+.branding {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mcd-emblem {
+  width: 360px;
+  height: auto;
+}
+
+.mcd-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: #003366;
+}
+
+.mcd-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #555;
+}
+
+.mcd-nav {
+  display: flex;
+  gap: 25px;
+  align-items: baseline;
+}
+
+.mcd-nav a {
+  font-size: 16px;
+  color: #003366;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.mcd-nav a:hover {
+  color: #005bbb;
+  text-decoration: underline;
+}
+
+
+/* HERO SECTION */
+.mcd-hero-wrapper {
+  width: 100%;
+  padding: 30px 0 30px 0; /* extra bottom padding */
+  display: flex;
+  justify-content: center;
+  background: #f0f0f0;;
+}
+
+.mcd-hero-container {
+  width: 96%;
+  background: #fff;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow: 0 4px 25px rgba(0,0,0,0.1);
+}
+
+.mcd-hero-main-img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
+}
+
+/* SEARCH BAR FLOATS BELOW HERO */
+.mcd-search-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -40px;   /* floats up like KSMART */
+  z-index: 100;
+  position: relative;
+}
+
+.mcd-search-box {
+  width: 600px;
+  max-width: 90%;
+  background: #fff;
+  border-radius: 50px;
+  box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
+  display: flex;
+  align-items: center;
+  padding: 6px 20px;
+  gap: 7px;
+}
+
+.mcd-search-icon {
+  height: 45px;
+  width: 45px;
+  background: #eef3ff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mcd-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+}
+
+.mcd-search-btn {
+  background: linear-gradient(180deg, #003c8f, #0053a6);
+  color: #fff !important;
+  border: none;
+  padding: 10px 26px;
+  border-radius: 40px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.mcd-search-btn:hover {}
+
+/* SUGGESTED LINKS ROW */
+.mcd-suggested-wrapper {
+  width: 100%;
+  max-width: 900px;
+  margin: 50px auto 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px 0 10px 0;
+}
+
+.mcd-suggested-label {
+  color: #666;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Link Buttons (KSMART pill style) */
+.mcd-suggested-btn {
+  background: #f0f4ff;
+  border: 1px solid #d6ddf7;
+  border-radius: 8px;
+  padding: 8px 20px;
+  font-size: 14px;
+  color: #38445c;
+  cursor: pointer;
+  transition: 0.2s ease;
+  white-space: nowrap;
+}
+
+.mcd-suggested-btn:hover {
+  background: #e4eaff;
+  border-color: #c2c9f0;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .mcd-suggested-wrapper {
+    flex-wrap: wrap;
+    gap: 10px;
+    padding-bottom: 20px;
+  }
+
+  .mcd-suggested-btn {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+}
+
+/* QUICK SERVICES WRAPPER */
+.mcd-quick-wrapper {
+  width: 100%;
+  background: linear-gradient(180deg, #003c8f, #0053a6);
+  padding: 50px 0;
+  text-align: center;
+  margin-top: 30px;
+}
+
+/* Title */
+.mcd-quick-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 35px;
+}
+
+/* Cards Grid (2 rows × 3 columns) */
+.mcd-quick-grid {
+  max-width: 1200px;
+  margin: auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 22px;
+}
+
+/* Individual Card */
+.mcd-quick-card {
+  background: #fff;
+  height: 64px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  cursor: pointer;
+  transition: 0.25s ease;
+}
+
+.mcd-quick-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.14);
+}
+
+/* Left icon bubble */
+.mcd-quick-icon {
+  background: #eef3ff;
+  width: 38px;
+  height: 38px;
+  min-width: 38px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  margin-right: 16px;
+}
+
+/* Service Text */
+.mcd-quick-text {
+  flex: 1;
+  text-align: left;
+  font-size: 15px;
+  font-weight: 600;
+  color: #2d3b55;
+}
+
+/* Right Arrow */
+.mcd-quick-arrow {
+  font-size: 22px;
+  font-weight: 700;
+  color: #4e5b78;
+}
+
+
+/* Mobile Responsive */
+@media (max-width: 900px) {
+  .mcd-quick-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .mcd-quick-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .mcd-quick-card {
+    height: 60px;
+  }
+}
+
+.services-section {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.services-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 30px;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  padding: 0 40px;
+}
+
+.service-card {
+  background: #ffffff;
+  border-radius: 12px;
+  padding-bottom: 25px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.service-card:hover {
+  transform: translateY(-4px);
+}
+
+.service-wave-drop {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 3;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 50%;
+  padding: 6px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+/* Optional hover effect */
+.service-card:hover .service-wave-drop {
+  transform: scale(1.08);
+  transition: transform 0.25s ease;
+}
+
+.service-banner {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+}
+
+.service-icon-badge {
+  width: 60px;
+  height: 60px;
+  background: #ffffff;
+  border-radius: 50%;
+  position: absolute;
+  top: 120px;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.service-icon-badge img {
+  width: 32px;
+  height: 32px;
+}
+
+
+.services-footer {
+  margin-top: 30px;
+}
+
+.view-all-btn {
+  background: #fff;
+  border: 1px solid #1a73e8;
+  color: #1a73e8;
+  padding: 12px 28px;
+  border-radius: 30px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.view-all-btn:hover {
+  background: #1a73e8;
+  color: #fff;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .services-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+/* SERVICE GRID WRAPPER */
+.mcd-service-wrapper {
+  width: 100%;
+  padding: 40px 0;
+  background: #f7faff;
+  text-align: center;
+}
+
+.mcd-service-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #002b5c;
+  margin-bottom: 25px;
+}
+
+/* GRID (4 per row like KSMART) */
+.mcd-service-grid {
+  max-width: 90%;
+  margin: auto;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px;
+}
+
+/* Card */
+.mcd-service-card {
+  background: #fff;
+  height: 70px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
+  cursor: pointer;
+  transition: 0.25s ease;
+}
+
+.mcd-service-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0px 6px 16px rgba(0,0,0,0.12);
+}
+
+/* Left Icon */
+.mcd-service-icon {
+  width: 40px;
+  height: 40px;
+  background: #eef3ff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  margin-right: 14px;
+}
+
+/* Text */
+.mcd-service-text {
+  flex: 1;
+  text-align: left;
+  font-size: 15px;
+  font-weight: 600;
+  color: #2d3b55;
+}
+
+/* Arrow */
+.mcd-service-arrow {
+  font-size: 22px;
+  font-weight: 700;
+  color: #4e5b78;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .mcd-service-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .mcd-service-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 500px) {
+  .mcd-service-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.service-expand-btn-wrapper {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.service-expand-btn {
+  background: #fff;
+  border: 1px solid #1a73e8;
+  color: #1a73e8;
+  padding: 10px 26px;
+  border-radius: 25px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.service-expand-btn:hover {
+  background: #1a73e8;
+  color: #fff;
+}
+
+/* FULL SECTION BACKGROUND */
+.news-events-container {
+  background: #f3f6fb;
+  padding: 60px 0 62px 0;
+  padding-bottom: 100px; 
+}
+
+/* TITLE */
+.news-title {
+  text-align: center;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 28px;
+  color: #1f1f1f;
+}
+
+/* ==============================
+   FEATURED WHITE BOX
+============================== */
+.featured-news {
+  width: 92%;
+  margin: 0 auto;
+  padding: 32px;
+  background: #ffffff;
+  display: flex;
+  gap: 32px;
+  border-radius: 14px;
+  box-shadow: 0px 6px 28px rgba(0,0,0,0.1);
+  position: relative;
+  z-index: 10;
+}
+
+.featured-left {
+  flex: 1.15;
+  position: relative;
+}
+
+.featured-img {
+  width: 100%;
+  height: 340px;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.latest-tag {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  background: #0094ff;
+  padding: 6px 12px;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.featured-right {
+  flex: 1;
+  text-align: left;
+}
+
+.featured-heading {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.featured-date {
+  font-size: 14px;
+  color: #7d7d7d;
+  margin-bottom: 12px;
+}
+
+.featured-desc {
+  font-size: 15px;
+  color: #474747;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.read-more {
+  color: #0074ff;
+  font-weight: 600;
+}
+
+/* ==============================
+   BLUE SLIDER SECTION
+============================== */
+.news-slider-section {
+  background: linear-gradient(180deg, #005cc8, #003e85);
+  margin-top: -22px;
+  padding: 80px 0 60px 0;
+  position: relative;
+  z-index: 5;
+}
+
+/* SLIDER TRACK */
+.slider {
+  display: flex;
+  gap: 26px;
+  justify-content: center;
+  padding: 0 80px;
+  transition: 0.3s ease;
+}
+
+/* SLIDER CARD */
+.news-card {
+  width: 290px;
+  background: white;
+  border-radius: 14px;
+  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+  overflow: hidden;
+  transition: 0.25s ease;
+}
+
+.news-card:hover {
+  transform: translateY(-4px);
+}
+
+.news-card-img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+}
+
+.news-card-title {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 12px;
+  min-height: 55px;
+  text-align: left;
+}
+
+.news-card-date {
+  font-size: 13px;
+  color: #666;
+  padding: 0 12px 14px;
+}
+
+/* HIGHLIGHT CARD */
+.highlight-card {
+  border: 2px solid #007aff;
+  box-shadow: 0px 0px 14px rgba(0, 122, 255, 0.4);
+  transform: scale(1.03);
+}
+
+/* ARROWS */
+.slide-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48px;
+  height: 48px;
+  background: #ffffff;
+  border: none;
+  border-radius: 50%;
+  font-size: 26px;
+  cursor: pointer;
+  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;   /* <-- MAKE BUTTONS VISIBLE */
+  transition: 0.3s ease;
+}
+
+
+.slide-btn.left { left: 55px; }
+.slide-btn.right { right: 55px; }
+
+.slide-btn:hover {
+  background: #007bff;
+  color: #fff;
+}
+
+
+/* FOOTER BUTTON */
+.news-footer {
+  position: relative;
+  margin-top: -45px;     /* pull it up inside the blue bar */
+  text-align: center;
+  z-index: 10;
+}
+
+
+.view-all-btn {
+  padding: 12px 34px;
+  border-radius: 24px;
+  background: #ffffff;
+  color: #007aff;
+  border: 1px solid #007aff;
+  
+  font-size: 15px;
+  cursor: pointer;
+  position: relative;
+
+  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
+  transition: 0.3s ease;
+
+  /* This makes it float */
+  transform: translateY(50%);
+}
+
+
+.view-all-btn:hover {
+  background: #007aff;
+  color: white;
+}
+
+/* BLUE GRADIENT BACKGROUND */
+.stats-section {
+  background: linear-gradient(180deg, #005cc8, #004a9a);
+  padding: 80px 0;
+}
+
+/* FLEX CONTAINER */
+.stats-container {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  gap: 30px;
+  flex-wrap: wrap; /* For mobile responsiveness */
+}
+
+
+@media (max-width: 992px) {
+  .stats-container {
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 600px) {
+  .stats-card {
+    padding: 30px 20px;
+  }
+
+  .stats-value {
+    font-size: 26px;
+  }
+}
+
+
+/* Section Container */
+.videos-section {
+  padding: 60px 0;
+  text-align: center;
+  background: #ffffff;
+}
+
+/* Title */
+.videos-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin-bottom: 40px;
+  color: #1a1a1a;
+}
+
+/* Wrapper */
+.videos-wrapper {
+  display: flex;
+  gap: 40px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Video Card */
+.video-card {
+  background: #fff;
+  padding: 12px;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  width: 500px;
+}
+
+.video-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
+}
+
+/* YouTube iframe */
+.video-card iframe {
+  width: 100%;
+  height: 280px;
+  border-radius: 12px;
+  border: none;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .video-card {
+    width: 90%;
+  }
+
+  .video-card iframe {
+    height: 220px;
+  }
+}
+
+/* ================================
+   MAIN FOOTER WRAPPER (KSMART STYLE)
+   ================================ */
+.footer-wrapper {
+  background: #003c8f;
+  color: #ffffff;
+  padding: 0 0 15px;
+  font-family: "Inter", sans-serif;
+}
+
+/* ================================
+    TOP LOGO STRIP
+   ================================ */
+/* White background strip behind logos */
+.footer-logos {
+  width: 100%;
+  background: #ffffff;     /* White background */
+  padding: 25px 0;         /* Vertical spacing like KSMART */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 60px;               /* Space between logos */
+  border-bottom: 1px solid #e5e5e5;  /* Light divider line */
+}
+
+/* Ensure logos look clean */
+.footer-logos img {
+  height: 55px;
+  object-fit: contain;
+  opacity: 1;
+}
+
+/* ================================
+    MAIN GRID (5 COLUMNS LIKE KSMART)
+   ================================ */
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.8fr 1fr 1fr 1fr;
+  padding: 0 90px;
+  gap: 40px;
+}
+
+.footer-grid h3 {
+  font-size: 17px;
+  margin-bottom: 16px;
+  font-weight: 600;
+}
+
+.footer-grid p {
+  margin: 4px 0;
+  font-size: 14px;
+  opacity: 0.92;
+  line-height: 1.5;
+}
+
+/* ================================
+   CONTACT BUTTON (KSMART STYLE)
+   ================================ */
+.contact-btn {
+  margin-top: 18px;
+  background: transparent;
+  border: 1px solid #ffffff;
+  color: #ffffff;
+  padding: 8px 22px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.contact-btn:hover {
+  background: #ffffff;
+  color: #003c8f;
+}
+
+/* ================================
+   FEEDBACK BOX (KSMART STYLE)
+   ================================ */
+.feedback-btn {
+  margin-top: 10px;
+  background: #ffffff;
+  color: #003c8f;
+  padding: 8px 18px;
+  border-radius: 22px;
+  border: none;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+
+.feedback-btn:hover {
+  background: #d8e7ff;
+}
+
+/* ================================
+   APP STORE BUTTONS (if you enable)
+   ================================ */
+.app-img {
+  display: block;
+  height: 45px;
+  margin-top: 12px;
+}
+
+/* ================================
+   DIVIDER
+   ================================ */
+.footer-bottom {
+  text-align: center;
+  margin-top: 40px;
+}
+
+.footer-bottom .copyright {
+  font-size: 14px;
+  opacity: 0.9;
+  line-height: 1.6;
+  margin-bottom: 8px;
+}
+
+/* Social Icons (If enabled later) */
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 10px;
+}
+.social-icons svg {
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.social-icons svg:hover {
+  opacity: 0.6;
+}
+
+/* --------------------------- */
+/* BASE STATS CARD DESIGN      */
+/* --------------------------- */
+
+.stats-card {
+  position: relative;              /* needed for waves */
+  background: #ffffff;
+  padding: 40px 30px;
+  flex: 1;
+  min-width: 260px;
+  border-radius: 20px;
+  text-align: center;
+  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15);
+  transition: all 0.28s ease;
+  overflow: hidden;               /* so wave stays inside */
+}
+
+/* Hover effect */
+.stats-card:hover {
+  transform: translateY(-8px) scale(1.03);
+  box-shadow: 0px 12px 24px rgba(0,0,0,0.22);
+}
+
+/* --------------------------- */
+/* TEXT INSIDE CARD            */
+/* --------------------------- */
+
+.stats-value {
+  font-size: 32px;
+  font-weight: 800;
+  color: #eb1f74;
+  margin-bottom: 12px;
+  position: relative;
+  z-index: 3;
+}
+
+.stats-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #003c80;
+  margin-bottom: 10px;
+  position: relative;
+  z-index: 3;
+}
+
+.stats-desc {
+  font-size: 14px;
+  color: #000000;
+  line-height: 1.5;
+  position: relative;
+  z-index: 3;
+}
+
+/* --------------------------- */
+/* WAVE PATTERN BACKGROUND     */
+/* --------------------------- */
+
+.stats-card::before {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  left: -10%;
+  width: 150%;
+  height: 140px;
+  background: linear-gradient(135deg, #5cb6ff 0%, #0077d8 100%);
+  border-radius: 40%;
+  opacity: 0.45;
+  transform: rotate(-4deg);
+  z-index: 1;
+}
+
+.stats-card::after {
+  content: "";
+  position: absolute;
+  bottom: -40px;
+  right: -15%;
+  width: 170%;
+  height: 180px;
+  background: linear-gradient(135deg, #0059a8 0%, #003d73 100%);
+  border-radius: 45%;
+  opacity: 0.55;
+  transform: rotate(6deg);
+  z-index: 1;
+}
+
+/* Thin abstract wave lines */
+.stats-card .wave-lines {
+  position: absolute;
+  bottom: 25px;
+  left: 12%;
+  width: 75%;
+  height: 60px;
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(0, 120, 190, 0.22) 0px,
+    rgba(0, 120, 190, 0.22) 2px,
+    transparent 2px,
+    transparent 10px
+  );
+  opacity: 0.3;
+  transform: skewX(-20deg);
+  z-index: 2;
+}
+
+.pattern-soft-curves {
+  position: relative;
+  overflow: hidden;
+  background: #ffffff;
+  border-radius: 16px;
+}
+
+.pattern-soft-curves::before {
+  content: "";
+  position: absolute;
+  width: 140%;
+  height: 140%;
+  top: -30%;
+  left: -20%;
+  background: radial-gradient(
+    circle at 30% 30%, 
+    rgba(0, 160, 255, 0.18), 
+    transparent 60%
+  );
+  filter: blur(40px);
+}
+
+.pattern-soft-curves::after {
+  content: "";
+  position: absolute;
+  width: 160%;
+  height: 100%;
+  bottom: -50%;
+  left: -20%;
+  background: radial-gradient(
+    circle at 70% 80%,
+    rgba(0, 90, 200, 0.18),
+    transparent 70%
+  );
+  filter: blur(38px);
+}
+
+.pattern-sine-lines {
+  position: relative;
+  overflow: hidden;
+}
+
+.pattern-sine-lines::before {
+  content: "";
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  height: 40px;
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(0, 130, 200, 0.25) 0px,
+    rgba(0, 130, 200, 0.25) 2px,
+    transparent 2px,
+    transparent 14px
+  );
+  transform: skewX(-20deg);
+  opacity: 0.4;
+}
+.pattern-paper {
+  position: relative;
+  overflow: hidden;
+}
+
+.pattern-paper::before {
+  content: "";
+  position: absolute;
+  width: 120%;
+  height: 50%;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(180deg, #dff1ff, #b6daf7);
+  border-top-left-radius: 50% 40%;
+  border-top-right-radius: 50% 40%;
+}
+
+.pattern-paper::after {
+  content: "";
+  position: absolute;
+  width: 140%;
+  height: 65%;
+  bottom: -20%;
+  left: -10%;
+  background: linear-gradient(180deg, #9bccff, #4f8fe3);
+  border-top-left-radius: 60% 40%;
+  border-top-right-radius: 60% 40%;
+  opacity: 0.6;
+}
+.pattern-blob {
+  position: relative;
+  overflow: hidden;
+}
+
+.pattern-blob::before {
+  content: "";
+  position: absolute;
+  width: 130%;
+  height: 130%;
+  top: -20%;
+  left: -10%;
+  background: radial-gradient(
+    circle,
+    rgba(0, 122, 255, 0.25) 0%,
+    rgba(0, 122, 255, 0.05) 70%,
+    transparent 100%
+  );
+  border-radius: 40%;
+  transform: rotate(20deg);
+}
+.card-diagonal {
+  position: relative;
+  overflow: hidden;
+}
+
+.card-diagonal::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -40%;
+  width: 120%;
+  height: 120%;
+  background: linear-gradient(135deg, #d8e8ff, #c6dcff);
+  transform: skewX(-18deg);
+  opacity: 0.5;
+}
+.card-double-wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.card-double-wave::before {
+  content: "";
+  position: absolute;
+  bottom: -25px;
+  left: 0;
+  width: 140%;
+  height: 90px;
+  background: #d6eaff;
+  border-radius: 50%;
+  opacity: 0.7;
+}
+
+.card-double-wave::after {
+  content: "";
+  position: absolute;
+  bottom: -45px;
+  left: -10%;
+  width: 150%;
+  height: 120px;
+  background: #bcd7ff;
+  border-radius: 50%;
+  opacity: 0.55;
+}
+.card-grid {
+  background-image: 
+    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+
+.card-soft-wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.card-soft-wave::after {
+  content: "";
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  width: 120%;
+  height: 80px;
+  background: linear-gradient(135deg, #d7eaff, #b6d7ff);
+  border-radius: 50%;
+  opacity: 0.8;
+}
+
+.card-glass {
+  background: rgba(255,255,255,0.25);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 14px;
+}
+
+.card-stripes {
+  background-image: repeating-linear-gradient(
+    135deg,
+    rgba(0,0,0,0.03) 0px,
+    rgba(0,0,0,0.03) 2px,
+    transparent 2px,
+    transparent 8px
+  );
+}
+
+.card-shine {
+  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
+}
+
+.card-dots {
+  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
+.card-gradient-border {
+  position: relative;
+  background: white;
+  border-radius: 12px;
+}
+
+.card-gradient-border::before {
+  content:"";
+  position:absolute;
+  inset: -2px;
+  background: linear-gradient(135deg, #004aad, #1ec0ff);
+  border-radius: inherit;
+  z-index:-1;
+}
+
+.card-mini-wave::before {
+  content:"";
+  position:absolute;
+  top:-10px;
+  left:0;
+  width:120%;
+  height:40px;
+  background: radial-gradient(circle at 50% 100%, #0077d8 40%, transparent 41%);
+}
+
+.card-diagonal {
+  background: linear-gradient(135deg, #ffffff 50%, #e7f3ff 50%);
+}
+
+.card-inner-shadow {
+  background: #fff;
+  box-shadow: inset 0 8px 20px rgba(0,0,0,0.07);
+}
+
+.pattern-mesh {
+  background: radial-gradient(circle at 30% 40%, #d8f1ff, transparent 60%),
+              radial-gradient(circle at 80% 80%, #c4e4ff, transparent 60%);
+}
+
+.pattern-waves {
+  position: relative;
+  background: #e9f6ff;
+  overflow: hidden;
+}
+
+.pattern-waves::before {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  left: -10%;
+  width: 100%;
+  height: 120px;
+  background: #8cc9ff;
+  border-radius: 40%;
+  opacity: 0.45;
+}
+
+.pattern-waves::after {
+  content: "";
+  position: absolute;
+  bottom: -50px;
+  left: -20%;
+  width: 160%;
+  height: 140px;
+  background: #3b82f6;
+  border-radius: 45%;
+  opacity: 0.6;
+}
+
+.pattern-stripes {
+  background: repeating-linear-gradient(
+    135deg,
+    rgba(0, 42, 97, 0.06) 0px,
+    rgba(0, 42, 97, 0.06) 3px,
+    transparent 3px,
+    transparent 12px
+  );
+}
+
+.pattern-microlines {
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(0,0,0,0.05) 0px,
+    rgba(0,0,0,0.05) 1px,
+    transparent 1px,
+    transparent 8px
+  );
+}
+
+.wave-animated {
+  position: relative;
+  overflow: hidden;
+}
+.wave-animated::before,
+.wave-animated::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: -10%;
+  width: 130%;
+  height: 120px;
+  background: var(--mcd-blue-2);
+  opacity: 0.18;
+  border-radius: 50%;
+  animation: waveMove 6s ease-in-out infinite;
+}
+
+.wave-animated::after {
+  background: var(--mcd-blue-3);
+  opacity: 0.25;
+  animation-duration: 9s;
+  animation-delay: -1.5s;
+}
+
+@keyframes waveMove {
+  0% { transform: translateX(0) rotate(0deg); }
+  50% { transform: translateX(-25px) rotate(-2deg); }
+  100% { transform: translateX(0) rotate(0deg); }
+}
+ .service-card-title{
+  padding-bottom: 6vh;
+ }
+
+ .service-title {
+  position: absolute;
+  bottom: 12px; /* move text higher/lower */
+  left: 50%;
+  transform: translateX(-50%);
+  color: #1a1a1a;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.playlist-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  margin: 30px auto 0 auto;
+  padding: 12px 28px;
+
+  width: fit-content;
+  background: #0057C2; /* MCD Blue */
+  color: #fff;
+
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 600;
+
+  border-radius: 30px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+
+  transition: 0.3s ease;
+}
+
+.playlist-btn:hover {
+  background: #003C8F;
+  transform: translateY(-2px);
+}
+
+.yt-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.playlist-btn-outline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  margin: 30px auto 0;
+  padding: 12px 28px;
+
+  background: #ffffff;
+  color: #0057C2;
+  border: 2px solid #0057C2;
+
+  border-radius: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+
+  transition: 0.3s ease;
+}
+
+.playlist-btn-outline:hover {
+  background: #0057C2;
+  color: #ffffff;
+}
+
+
+.playlist-btn-red {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  margin: 30px auto 0;
+  padding: 12px 28px;
+
+  background: #FF0000;
+  color: #ffffff;
+  border-radius: 30px;
+
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+
+  box-shadow: 0 4px 12px rgba(255,0,0,0.4);
+  transition: 0.3s ease;
+}
+
+.playlist-btn-red:hover {
+  background: #cc0000;
+  transform: translateY(-2px);
+}
+
+.playlist-btn-gradient {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  margin: 30px auto 0;
+  padding: 12px 30px;
+
+  background: linear-gradient(90deg, #003C8F, #0057C2);
+  color: #ffffff;
+
+  border-radius: 35px;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  transition: 0.3s ease;
+}
+
+.playlist-btn-gradient:hover {
+  background: linear-gradient(90deg, #002F70, #004EAF);
+  transform: translateY(-3px);
+}
+
+.footer-separator {
+  width: 90%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.3); /* soft white line */
+  margin: 20px auto;
+  border: none;
+}
+
+
+.header-login-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+
+.login-dropdown-menu {
+  position: absolute;
+  top: 110%;
+  right: 0;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
+  width: 180px;
+  z-index: 999;
+}
+
+.dropdown-item {
+  display: block;
+  padding: 10px 14px;
+  font-size: 14px;
+  color: #333;
+  text-decoration: none;
+}
+
+.dropdown-item:hover {
+  background: #f5f5f5;
+}
+
+
+
+.djb-contact-wrapper {
+  padding: 60px 80px;
+  background: #f8f9fb;
+}
+
+.djb-contact-title {
+  text-align: center;
+  font-size: 32px;
+  margin-bottom: 40px;
+}
+
+.djb-contact-title span {
+  color: #0b5cab;
+}
+
+/* GRID */
+.djb-contact-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+}
+
+/* LEFT CARD */
+.djb-contact-info {
+  background: #fff;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+}
+
+.info-item {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.info-item .icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: #eaf2fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.info-item h4 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.info-item p {
+  margin: 4px 0 0;
+  color: #555;
+  font-size: 14px;
+}
+
+.djb-map {
+  margin-top: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* RIGHT CARD */
+.djb-contact-form {
+  background: #fff;
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.djb-contact-form form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-row {
+  display: flex;
+  gap: 16px;
+}
+
+.form-row input {
+  flex: 1;
+}
+
+.djb-contact-form input,
+.djb-contact-form textarea {
+  padding: 12px;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.djb-submit-btn {
+  align-self: center;
+  margin-top: 10px;
+  padding: 10px 28px;
+  background: #0b5cab;
+  color: #fff;
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.djb-submit-btn:hover {
+  background: #094a8c;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .djb-contact-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .djb-contact-wrapper {
+    padding: 40px 20px;
+  }
+}
+
+/* =============================== */
+/* Legacy DJB Contact Section */
+/* =============================== */
+
+.djb-legacy-contact {
+  background: #ffffff;
+  padding: 40px 80px;
+}
+
+.legacy-container {
+  max-width: 1100px;
+  margin: 0 auto;
+  font-size: 14px;
+  color: #111;
+}
+
+.legacy-address {
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.djb-legacy-contact h4 {
+  margin: 22px 0 12px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.legacy-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  padding-left: 20px;
+  line-height: 1.7;
+}
+
+.legacy-list li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+.legacy-list svg {
+  flex-shrink: 0;
+}
+
+.legacy-links a {
+  color: #0b5cab;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.legacy-links a:hover {
+  text-decoration: underline;
+}
+
+.new-tag {
+  color: #d93025;
+  font-weight: bold;
+  font-size: 12px;
+  margin-left: 6px;
+}
+.djb-two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+}
+
+.djb-contact-section {
+  padding: 40px 80px;
+}
+
+.section-top { background: #ffffff; }
+.section-bottom { background: #f8f9fb; }
+
+.djb-left,
+.djb-right {
+  background: #fff;
+  padding: 24px;
+  border-radius: 10px;
+  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #0b5cab;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e6eef8;
+  padding-bottom: 8px;
+}
+
+.legacy-highlight {
+  background: #eef5ff;
+  padding: 14px;
+  margin: 16px 0;
+  border-left: 4px solid #0b5cab;
+}
+
+.legacy-list li {
+  margin-bottom: 6px;
+}
+
+.legacy-links a {
+  color: #0b5cab;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.new-tag {
+  color: red;
+  font-weight: bold;
+}
+
+.djb-contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-row {
+  display: flex;
+  gap: 14px;
+}
+
+.form-row input {
+  flex: 1;
+}
+
+.djb-contact-form input,
+.djb-contact-form textarea {
+  padding: 12px;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+}
+
+.djb-submit-btn {
+  align-self: center;
+  padding: 10px 30px;
+  border-radius: 22px;
+  background: #0b5cab;
+  color: #fff;
+  border: none;
+}
+
+.info-item {
+  display: flex;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.info-item .icon {
+  width: 40px;
+  height: 40px;
+  background: #eef5ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.djb-map {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+@media (max-width: 900px) {
+  .djb-two-column {
+    grid-template-columns: 1fr;
+  }
+
+  .djb-contact-section {
+    padding: 30px 20px;
+  }
+}
+
+.contact-info-card {
+  background: #fff;
+  padding: 32px;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  align-items: stretch;
+}
+
+.info-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;   /* centers content vertically */
+  text-align: center;
+  padding: 24px 16px;
+  border-radius: 10px;
+  background: #f7faff;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.info-box:hover {
+  background: #eef5ff;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+
+.info-box .icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 12px;
+  background: #e6f0ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.info-box:hover .icon {
+  background: #dce9ff;
+}
+
+
+.info-box h4 {
+  margin-bottom: 8px;
+  color: #0b5cab;
+}
+
+.info-box p {
+  font-size: 14px;
+  color: #333;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 9999;
+}
+
+.modal-content {
+  width: 80%;
+  height: 80%;
+  background: #fff;
+  margin: 5% auto;
+  position: relative;
+  border-radius: 8px;
+}
+
+.modal-content iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.modal-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-size: 18px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* 🔹 Nav Hover Button (EXCEPT LOGIN) */
+/* 🔹 Nav Hover Button (EXCEPT LOGIN) */
+.mcd-nav .nav-hover-btn {
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #003a8f;
+  text-decoration: none;   /* ✅ remove underline */
+  transition: all 0.25s ease;
+}
+
+.mcd-nav .nav-hover-btn:hover {
+  background: #003a8f;
+  color: #ffffff;
+  text-decoration: none;   /* ✅ ensure no underline on hover */
+  box-shadow: 0 4px 10px rgba(0, 58, 143, 0.25);
+}
+
+/* ================= ABOUT PAGE LAYOUT ================= */
+
+/* Layout */
+.djb-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+/* Sticky sidebar */
+.djb-side-nav {
+  position: sticky;
+  top: 110px; /* below header */
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+/* Sidebar title */
+.side-nav-title {
+  background: #0b4da2;
+  color: #fff;
+  padding: 12px 16px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+/* Sidebar buttons */
+.djb-side-nav button {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: #fff;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background 0.2s ease;
+}
+
+.djb-side-nav button:hover {
+  background: #f3f6fb;
+}
+
+/* Active menu */
+.djb-side-nav button.active {
+  background: #ffc107;
+  font-weight: 600;
+}
+
+/* Content area */
+.djb-content {
+  min-width: 0;
+}
+
+/* Mobile fallback */
+@media (max-width: 900px) {
+  .djb-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .djb-side-nav {
+    position: relative;
+    top: auto;
+  }
+}
+
+/* HERO */
+.about-hero {
+  background: linear-gradient(135deg, #0b5cab, #083a73);
+  color: #fff;
+  padding: 70px 20px;
+  text-align: center;
+}
+
+.about-container {
+  padding: 40px 80px;
+  background: #fff;
+}
+
+.about-section {
+  margin-bottom: 36px;
+}
+
+.about-section h2 {
+  color: #0b5cab;
+  font-size: 24px;
+  margin-bottom: 12px;
+  border-bottom: 2px solid #e6eef7;
+  padding-bottom: 6px;
+}
+
+.about-list {
+  padding-left: 20px;
+  line-height: 1.8;
+}
+
+.about-table-wrapper {
+  overflow-x: auto;
+}
+
+.about-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.about-table th,
+.about-table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+}
+
+.about-table th {
+  background: #f3f7fb;
+}
+
+/* ===============================
+   ABOUT PAGE – KSMART STYLE
+   DJB COLOR TUNING
+=============================== */
+
+/* Page background */
+body {
+  background: #f4f6f8;
+}
+
+/* Main wrapper */
+.djb-page-wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 16px 60px;
+}
+
+/* Page title */
+.djb-page-title {
+  font-size: 26px;
+  font-weight: 600;
+  color: #0b5cab;
+  margin-bottom: 20px;
+}
+
+/* Each section becomes a card */
+.djb-section {
+  background: #ffffff;
+  border: 1px solid #e2e6ea;
+  border-radius: 4px;
+  padding: 20px 24px;
+  margin-bottom: 20px;
+}
+
+/* Section heading */
+.djb-section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #083a73;
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e3e9f1;
+}
+
+/* Paragraph text */
+.djb-section p {
+  font-size: 14.5px;
+  line-height: 1.75;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+/* Lists */
+.djb-list {
+  padding-left: 18px;
+  margin-top: 8px;
+}
+
+.djb-list li {
+  font-size: 14.5px;
+  line-height: 1.7;
+  margin-bottom: 6px;
+  color: #333;
+}
+
+/* ===============================
+   TABLES – KSMART STYLE
+=============================== */
+
+.djb-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+  font-size: 14px;
+}
+
+.djb-table th {
+  background: #f1f5fb;
+  color: #083a73;
+  font-weight: 600;
+  padding: 10px;
+  border: 1px solid #d9e1ec;
+  text-align: left;
+}
+
+.djb-table td {
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  color: #333;
+}
+
+.djb-table tr:nth-child(even) {
+  background: #fafbfd;
+}
+
+/* Table container look */
+.djb-table-wrapper {
+  border: 1px solid #e2e6ea;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin-top: 10px;
+}
+
+/* ===============================
+   MOBILE
+=============================== */
+
+@media (max-width: 768px) {
+  .djb-page-title {
+    font-size: 22px;
+  }
+
+  .djb-section {
+    padding: 16px;
+  }
+
+  .djb-section-title {
+    font-size: 17px;
+  }
+
+  .djb-section p,
+  .djb-list li {
+    font-size: 14px;
+  }
+
+  .djb-table {
+    font-size: 13px;
+  }
+}
+
+
+/* Tabs */
+.djb-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.djb-tabs button {
+  padding: 8px 14px;
+  background: #f1f5fb;
+  border: 1px solid #d6e0ef;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #083a73;
+}
+
+.djb-tabs button.active {
+  background: #0b5cab;
+  color: #fff;
+  border-color: #0b5cab;
+}
+
+/* Cards */
+.djb-section {
+  background: #ffffff;
+  border: 1px solid #e2e6ea;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.djb-table tbody tr:hover {
+  background: #f1f8ff;
+}
+
+.djb-table td:last-child {
+  font-weight: 600;
+  color: #076db1;
+}
+
+/* Revenue Bars – CSS only */
+.djb-revenue-table .revenue-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.revenue-value {
+  font-weight: 600;
+  color: #076db1;
+}
+
+.revenue-bar {
+  width: 100%;
+  height: 8px;
+  background: #e6eef7;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.revenue-bar .bar {
+  height: 100%;
+  background: linear-gradient(90deg, #076db1, #2fa4ff);
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+
+/* Width presets */
+.bar-36 { width: 36%; }
+.bar-52 { width: 52%; }
+.bar-68 { width: 68%; }
+.bar-69 { width: 69%; }
+.bar-81 { width: 81%; }
+.bar-86 { width: 86%; }
+.bar-91 { width: 91%; }
+.bar-96 { width: 96%; }
+.bar-100 { width: 100%; }
+
+/* Hover enhancement */
+.djb-revenue-table tbody tr:hover .bar {
+  filter: brightness(1.1);
+}
+
+.djb-about-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+/* Sidebar */
+.djb-side-nav {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.side-nav-title {
+  background: #0b4ea2;
+  color: #fff;
+  padding: 14px 16px;
+  font-weight: 600;
+}
+
+.djb-side-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.djb-side-nav li {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
+}
+
+.djb-side-nav li:hover {
+  background: #f5f7fa;
+}
+
+.djb-side-nav li.active {
+  background: #f1f8ff;
+  font-weight: 600;
+}
+
+/* Content */
+.djb-about-content {
+  width: 100%;
+  background: #fff;
+  padding-top: 10px !important;
+  overflow: hidden; /* IMPORTANT */
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .djb-about-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+/* ===== LAYOUT ===== */
+.djb-about-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 24px;
+  margin-top: 20px;
+}
+
+/* ===== SIDE NAV ===== */
+.djb-side-nav {
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  height: fit-content;
+  position: sticky;
+  top: 110px;
+}
+
+.side-nav-header {
+  background: #0b4fa3;
+  color: #fff;
+  padding: 12px 16px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px 8px 0 0;
+}
+
+.djb-side-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.djb-side-nav li {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.djb-side-nav li button {
+  width: 100%;
+  background: none;
+  border: none;
+  text-align: left;
+  padding: 12px 16px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.djb-side-nav li.active button {
+  background: #f1f8ff;
+  font-weight: 600;
+}
+
+.djb-side-nav li button:hover {
+  background: #f4f7ff;
+}
+
+/* ===== MOBILE ===== */
+@media (max-width: 900px) {
+  .djb-about-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .djb-side-nav {
+    position: relative;
+    top: 0;
+  }
+}
+
+
+/* ================= PAGE ================= */
+.org-page {
+  width: 100%;
+}
+
+/* ================= SCROLL (INSIDE CONTENT) ================= */
+.org-scroll {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* ================= TREE ================= */
+.org-tree {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* ================= NODE ================= */
+.org-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  text-align: center;
+}
+
+/* ================= BOX ================= */
+.org-box {
+  border: 2px solid #0b5fa5;
+  background: #ffffff;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #0b5fa5;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  max-width: 160px;
+  white-space: normal;
+  text-align: center;
+  word-break: break-word;
+}
+
+/* ================= LEVEL STYLES ================= */
+.level-0 {
+  background: #0b5fa5;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.level-1 {
+  background: #eaf2fb;
+}
+
+.level-2 {
+  background: #f4f8fc;
+}
+
+/* 🔥 Allow wrapping ONLY from level-3 downward */
+.level-2 + .org-children,
+.level-3 + .org-children {
+  flex-wrap: wrap;
+}
+/* ================= CHILDREN ================= */
+.org-children {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 14px;
+  margin-top: 16px;
+  padding-top: 14px;
+  position: relative;
+  max-width: 100%;
+}
+
+/* ================= CONNECTORS ================= */
+.org-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 2px;
+  height: 14px;
+  background: #0b5fa5;
+}
+
+.org-node > .org-children > .org-node::before {
+  content: "";
+  position: absolute;
+  top: -14px;
+  left: 50%;
+  width: 2px;
+  height: 14px;
+  background: #0b5fa5;
+}
+
+.svg-org-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  padding: 16px;
+}
+
+.svg-node {
+  fill: #ffffff;
+  stroke: #0b5fa5;
+  stroke-width: 2;
+}
+
+.svg-node.level-0 {
+  fill: #0b5fa5;
+}
+
+svg text {
+  font-size: 12px;
+  font-weight: 600;
+  fill: #0b5fa5;
+}
+
+.svg-node.level-0 + text {
+  fill: #ffffff;
+}
+
+.orgchart-viewport {
+  width: 100%;
+  height: calc(100vh - 260px); /* header + tabs */
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+
+/* SVG fills viewport */
+.orgchart-svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Nodes */
+.svg-node {
+  fill: #ffffff;
+  stroke: #0b5fa5;
+  stroke-width: 2;
+}
+
+.svg-text {
+  font-size: 12px;
+  font-weight: 600;
+  fill: #0b5fa5;
+  pointer-events: none;
+}
+
+
+
+
+/* Premium Professional Organizational Chart - Version 4.0 */
+
+:root {
+  --primary-color: #667eea;
+  --primary-dark: #5a67d8;
+  --secondary-color: #f093fb;
+  --accent-color: #4facfe;
+  --success-color: #48bb78;
+  --warning-color: #f6ad55;
+  --danger-color: #fc8181;
+  --dark: #1a202c;
+  --gray-100: #f7fafc;
+  --gray-200: #edf2f7;
+  --gray-300: #e2e8f0;
+  --gray-400: #cbd5e0;
+  --gray-500: #a0aec0;
+  --gray-600: #718096;
+  --gray-700: #4a5568;
+  --gray-800: #2d3748;
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+.org-chart-container {
+  width: 100%;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  padding: 24px;
+  overflow-x: auto;
+  overflow-y: auto;
+  min-height: 650px;
+  max-height: 800px;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 16px;
+  box-shadow: var(--shadow-xl);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Chart Header */
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--gray-300);
+}
+
+.org-chart-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--dark);
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.chart-stats {
+  display: flex;
+  gap: 16px;
+}
+
+.stat-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  padding: 10px 16px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-md);
+  border: 2px solid var(--gray-200);
+}
+
+.stat-icon {
+  font-size: 20px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--gray-600);
+  font-weight: 500;
+}
+
+/* Main Toolbar */
+.org-chart-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  background: white;
+  padding: 16px 20px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-md);
+  border: 2px solid var(--gray-200);
+}
+
+.toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Search Container */
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--gray-100);
+  border: 2px solid var(--gray-300);
+  border-radius: 10px;
+  padding: 4px 4px 4px 12px;
+  transition: all 0.3s;
+  min-width: 300px;
+}
+
+.search-container:focus-within {
+  border-color: var(--primary-color);
+  background: white;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.search-icon {
+  font-size: 18px;
+  color: var(--gray-500);
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 10px 8px;
+  font-size: 14px;
+  outline: none;
+  color: var(--gray-800);
+  font-weight: 500;
+}
+
+.search-input::placeholder {
+  color: var(--gray-400);
+}
+
+.clear-search-btn {
+  background: var(--danger-color);
+  color: white;
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  font-weight: 700;
+}
+
+.clear-search-btn:hover {
+  background: #e53e3e;
+  transform: scale(1.1);
+}
+
+/* Button Groups */
+.button-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Action Buttons */
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.2s;
+  white-space: nowrap;
+  border: 2px solid transparent;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  color: white;
+  border-color: var(--primary-dark);
+}
+
+.action-btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
+}
+
+.action-btn.secondary {
+  background: white;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.action-btn.secondary:hover {
+  background: var(--primary-color);
+  color: white;
+}
+
+.action-btn.utility {
+  background: var(--gray-100);
+  color: var(--gray-700);
+  border-color: var(--gray-300);
+  padding: 10px 14px;
+}
+
+.action-btn.utility:hover {
+  background: var(--gray-700);
+  color: white;
+}
+
+.btn-icon {
+  font-size: 16px;
+}
+
+/* View Mode Buttons */
+.view-btn {
+  width: 40px;
+  height: 40px;
+  background: white;
+  border: 2px solid var(--gray-300);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-btn:hover {
+  border-color: var(--primary-color);
+  background: var(--gray-50);
+}
+
+.view-btn.active {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+/* Zoom Controls */
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--gray-100);
+  padding: 4px;
+  border-radius: 10px;
+  border: 2px solid var(--gray-300);
+}
+
+.zoom-btn {
+  background: white;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--gray-700);
+  transition: all 0.2s;
+  min-width: 40px;
+}
+
+.zoom-btn:hover {
+  background: var(--gray-700);
+  color: white;
+}
+
+.zoom-btn.reset {
+  font-size: 16px;
+}
+
+.zoom-display {
+  background: var(--gray-800);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  min-width: 55px;
+  text-align: center;
+}
+
+/* Level Controls */
+.level-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: var(--shadow-sm);
+  border: 2px solid var(--gray-200);
+}
+
+.level-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gray-600);
+  margin-right: 4px;
+}
+
+.level-btn {
+  padding: 6px 16px;
+  background: var(--gray-100);
+  border: 2px solid var(--gray-300);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--gray-700);
+  transition: all 0.2s;
+}
+
+.level-btn:hover {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+  transform: translateY(-1px);
+}
+
+/* Instruction Banner */
+.instruction-banner {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 14px 24px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  text-align: center;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.banner-icon {
+  font-size: 24px;
+}
+
+.instruction-banner strong {
+  font-weight: 700;
+  margin-right: 8px;
+}
+
+/* Chart Wrapper */
+.org-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  min-width: max-content;
+  padding: 30px;
+  transform-origin: center top;
+  transition: transform 0.3s ease;
+}
+
+.org-chart-wrapper.dragging {
+  cursor: grabbing !important;
+}
+
+/* Tree Structure */
+.org-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.org-tree ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 55px;
+}
+
+.org-node {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  padding: 0 14px;
+}
+
+/* Node Boxes - Standard View */
+.org-box {
+  display: inline-block;
+  background: white;
+  border: 3px solid var(--gray-700);
+  border-radius: 10px;
+  padding: 16px 20px;
+  min-width: 150px;
+  max-width: 210px;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  user-select: none;
+}
+
+/* View Mode Variations */
+.org-box.view-compact {
+  padding: 10px 14px;
+  min-width: 120px;
+  max-width: 170px;
+}
+
+.org-box.view-detailed {
+  padding: 18px 24px;
+  min-width: 170px;
+  max-width: 240px;
+}
+
+.org-box:hover {
+  background: var(--gray-50);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  border-color: var(--primary-color);
+}
+
+.org-box.highlighted {
+  animation: pulse-highlight 1.5s infinite;
+  border-color: var(--warning-color);
+  background: #fffaf0;
+  box-shadow: 0 0 25px rgba(246, 173, 85, 0.6);
+}
+
+.org-box.search-match {
+  background: #fef5e7;
+  border-color: #f59e0b;
+  border-width: 3px;
+}
+
+.org-box.selected {
+  border-color: var(--success-color);
+  background: #f0fff4;
+  box-shadow: 0 0 25px rgba(72, 187, 120, 0.4);
+}
+
+@keyframes pulse-highlight {
+  0%, 100% {
+    box-shadow: 0 0 25px rgba(246, 173, 85, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 35px rgba(246, 173, 85, 0.9);
+  }
+}
+
+.org-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gray-800);
+  line-height: 1.5;
+  display: block;
+  word-wrap: break-word;
+}
+
+.view-compact .org-title {
+  font-size: 12px;
+}
+
+.view-detailed .org-title {
+  font-size: 15px;
+}
+
+.expand-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 26px;
+  height: 26px;
+  background: var(--primary-color);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  transition: all 0.2s;
+  box-shadow: var(--shadow-sm);
+}
+
+.org-box:hover .expand-icon {
+  background: var(--primary-dark);
+  transform: scale(1.15);
+  box-shadow: var(--shadow-md);
+}
+
+.child-count {
+  position: absolute;
+  bottom: 4px;
+  right: 6px;
+  background: var(--accent-color);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+/* Connecting Lines */
+.org-node::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 3px;
+  height: 55px;
+  background: var(--gray-600);
+  transform: translateX(-50%);
+}
+
+.org-tree > .org-node::before {
+  display: none;
+}
+
+.org-children {
+  position: relative;
+}
+
+.org-children::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gray-600);
+  transform: translateY(-55px);
+}
+
+.org-children .org-node:first-child::after,
+.org-children .org-node:last-child::after {
+  content: '';
+  position: absolute;
+  top: -55px;
+  width: 50%;
+  height: 3px;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+}
+
+.org-children .org-node:first-child::after {
+  left: 0;
+}
+
+.org-children .org-node:last-child::after {
+  right: 0;
+}
+
+/* Hierarchy Level Styling */
+.org-tree > .org-node > .org-box {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: var(--primary-dark);
+  font-size: 16px;
+  padding: 18px 26px;
+  min-width: 190px;
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.org-tree > .org-node > .org-box .org-title {
+  color: white;
+  font-weight: 700;
+}
+
+.org-tree > .org-node > .org-box .expand-icon {
+  background: rgba(255, 255, 255, 0.25);
+  border: 2px solid white;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-box {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+  border-color: #e74c3c;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-box .org-title {
+  color: white;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-box .expand-icon {
+  background: rgba(255, 255, 255, 0.25);
+  border: 2px solid white;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-children > .org-node > .org-box {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  border-color: #3498db;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-children > .org-node > .org-box .org-title {
+  color: white;
+}
+
+.org-tree > .org-node > .org-children > .org-node > .org-children > .org-node > .org-box .expand-icon {
+  background: rgba(255, 255, 255, 0.25);
+  border: 2px solid white;
+}
+
+/* Info Panel */
+.info-panel {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 320px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  border: 3px solid var(--primary-color);
+  z-index: 1000;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  color: white;
+  border-radius: 9px 9px 0 0;
+}
+
+.info-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.close-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid white;
+  color: white;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  font-weight: 700;
+}
+
+.close-btn:hover {
+  background: white;
+  color: var(--primary-color);
+}
+
+.info-content {
+  padding: 20px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.info-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gray-600);
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--gray-800);
+}
+
+.info-actions {
+  margin-top: 16px;
+}
+
+.info-action-btn {
+  width: 100%;
+  padding: 12px;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.info-action-btn:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Legend */
+.chart-legend {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  background: white;
+  padding: 16px 20px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  border: 2px solid var(--gray-200);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.legend-color {
+  width: 32px;
+  height: 20px;
+  border-radius: 4px;
+  border: 2px solid var(--gray-300);
+}
+
+.legend-color.level-1 {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.legend-color.level-2 {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.legend-color.level-3 {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.legend-color.level-4 {
+  background: white;
+  border-color: var(--gray-600);
+}
+
+.legend-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--gray-700);
+}
+
+/* Scrollbar */
+.org-chart-container::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+.org-chart-container::-webkit-scrollbar-track {
+  background: var(--gray-200);
+  border-radius: 10px;
+  margin: 4px;
+}
+
+.org-chart-container::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  border-radius: 10px;
+  border: 3px solid var(--gray-200);
+}
+
+.org-chart-container::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--primary-dark), #4c51bf);
+}
+
+/* Print Styles */
+@media print {
+  .org-chart-toolbar,
+  .level-controls,
+  .instruction-banner,
+  .info-panel,
+  .chart-legend,
+  .zoom-controls {
+    display: none !important;
+  }
+  
+  .org-chart-container {
+    max-height: none;
+    overflow: visible;
+  }
+  
+  .org-chart-wrapper {
+    transform: scale(1) !important;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .org-chart-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .toolbar-section {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .search-container {
+    min-width: 100%;
+  }
+  
+  .chart-legend {
+    position: static;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart-header {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .org-chart-title {
+    font-size: 22px;
+  }
+  
+  .info-panel {
+    width: calc(100% - 32px);
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+  }
+}
+
+
+
+/* ===== Document Frame ===== */
+.doc-frame {
+  background: #ffffff;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+  padding: 16px;
+}
+
+/* ===== Header ===== */
+.doc-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #e6e6e6;
+  padding-bottom: 10px;
+  margin-bottom: 8px;
+}
+
+.doc-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.doc-meta {
+  font-size: 13px;
+  color: #666;
+  margin-top: 4px;
+}
+
+/* ===== Toolbar ===== */
+.pdf-toolbar {
+  display: flex;
+  gap: 10px;
+}
+
+.pdf-btn {
+  padding: 6px 14px;
+  font-size: 14px;
+  background: #0b5ed7;
+  color: #fff;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.pdf-btn:hover {
+  background: #084298;
+}
+
+/* ===== Hint ===== */
+.doc-hint {
+  font-size: 13px;
+  color: #555;
+  background: #f4f6f8;
+  border-left: 4px solid #0b5ed7;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+}
+
+/* ===== PDF Viewer ===== */
+.pdf-container.full-view {
+  width: 100%;
+  height: calc(100vh - 300px);
+  min-height: 720px;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f9f9f9;
+}
+
+.pdf-container.full-view iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #fff;
+}
+
+/* ===== Skeleton Loader ===== */
+.pdf-skeleton {
+  width: 100%;
+  min-height: 720px;
+  padding: 16px;
+  background: #f4f6f8;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+
+.skeleton-line {
+  height: 14px;
+  background: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
+  background-size: 200% 100%;
+  animation: skeleton 1.4s infinite;
+  margin-bottom: 10px;
+  border-radius: 4px;
+}
+
+.skeleton-line.title {
+  width: 40%;
+  height: 18px;
+}
+
+.skeleton-box {
+  height: 420px;
+  background: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
+  background-size: 200% 100%;
+  animation: skeleton 1.4s infinite;
+  border-radius: 6px;
+}
+
+@keyframes skeleton {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ===== Print Rules ===== */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+
+  .pdf-print-area,
+  .pdf-print-area * {
+    visibility: visible;
+  }
+
+  .pdf-print-area {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .no-print {
+    display: none !important;
+  }
+}
+
+
+
+
+
+/*organisational page for now only*/
+.org-image-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.org-structure-image {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}