/* ============================================================
   ICAC Thailand — Tailwind CSS v3
   Covers: Header · Footer · Home Page
   All styles use @apply where possible; raw CSS only for
   pseudo-elements, complex gradients, and CSS-only interactions.
   ============================================================ */

/* Fonts are loaded via <link> tags in the <head> — not @import, which
   is unreliable inside linked stylesheets. See layouts/app.blade.php. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(44 44 44 / var(--tw-text-opacity, 1));
}

img {
  display: block;
}

a {
  text-decoration-line: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1025px) {
  .container {
    max-width: 1025px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

@media (min-width: 1921px) {
  .container {
    max-width: 1921px;
  }
}

/* ──────────────────────────────────────────────────────
       HEADER
       ────────────────────────────────────────────────────── */

.main-header {
  position: sticky;
  top: 0px;
  z-index: 999;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Top header bar */

.header-wrap {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 1180px;
}

.top-header {
  float: none;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.header-inner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.header-logo img {
  height: 45px;
  width: auto;
}

.header-right {
  display: flex;
  gap: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Top header buttons */

.top-link,
    .login-btn,
    .user-btn {
  cursor: pointer;
  border-radius: 40px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 51 102 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 51 102 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.top-link:hover,
    .login-btn:hover,
    .user-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 51 102 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* User dropdown */

.user-dropdown {
  position: relative;
}

.user-dropdown-menu {
  position: absolute;
  top: 2.5rem;
  right: 0px;
  z-index: 9999;
  display: none;
  width: 10rem;
  overflow: hidden;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.user-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 18px;
  height: 0.75rem;
  width: 0.75rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border-left: 1.5px solid #ececec;
  border-top:  1.5px solid #ececec;
}

.user-dropdown:hover .user-dropdown-menu {
  display: block;
}

.user-dropdown-menu a {
  display: block;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.user-dropdown-menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

/* ── Notification Marquee Bar ── */

.notif-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #003366;
  overflow: hidden;
  height: 34px;
}

.notif-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: #001f4d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.25);
}

.notif-track-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.notif-track {
  display: flex;
  white-space: nowrap;
  animation: notif-scroll 10s linear infinite;
}

.notif-track:hover {
  animation-play-state: paused;
}

.notif-text {
  display: inline-block;
  padding: 0 40px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 34px;
}

@keyframes notif-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── ICAC Navbar ── */

.icac-navbar {
  display: flex;
  width: 100%;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border-top: 1px solid #99b9e0;
}

.icac-menu {
  margin: 0px;
  display: flex;
  list-style-type: none;
  align-items: center;
  padding: 0px;
}

/* Top-level menu items */

.icac-menu > li {
  position: relative;
}

.icac-menu > li > a {
  display: flex;
  height: 45px;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
  font-weight: 700;
  color: #666;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.icac-menu > li:hover > a {
  background-color: #f3f4f6;
  color: #444;
}

.icac-menu > li.active > a {
  color: #c0392b;
}

/* First-level dropdown */

.header-dropdown-menu {
  position: absolute;
  top: 45px;
  left: 0px;
  z-index: 999;
  margin: 0px;
  min-width: 300px;
  list-style-type: none;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.icac-menu > li:hover > .header-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Triangle caret above dropdown */

.icac-menu > li:hover > .header-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 16%;
  top: -10px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left:   10px solid transparent;
  border-right:  10px solid transparent;
  border-bottom: 10px solid #fff;
}

/* Dropdown list items */

.header-dropdown-menu > li {
  position: relative;
  float: none;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(236 236 236 / var(--tw-border-opacity, 1));
}

.header-dropdown-menu > li:last-child {
  border-bottom-width: 0px;
}

.header-dropdown-menu > li > a {
  float: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
   border-bottom:solid 1px #ebebeb;
}

.header-dropdown-menu > li:hover > a {
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(191 32 38 / var(--tw-text-opacity, 1));
}

/* Right-side sub-menu */

.submenu-right {
  position: absolute;
  z-index: 999;
  margin: 0px;
  min-width: 450px;
  list-style-type: none;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  top: 0;
  left: 100%;
  margin-left: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.submenu-right::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0.75rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-top:    10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:  10px solid #fff;
}

.has-submenu:hover > .submenu-right {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-right li {
  float: none;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(236 236 236 / var(--tw-border-opacity, 1));
}

.submenu-right li:last-child {
  border-bottom-width: 0px;
}

.submenu-right li a {
  float: none;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 13px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  border-bottom:solid 1px #ebebeb;
}

.submenu-right li:hover > a {
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(191 32 38 / var(--tw-text-opacity, 1));
}

/* Navbar icon */

.icac-navbar i {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 600;
}

/* Language switcher — component uses .ls-wrap (see components/language-switcher.blade.php) */

.ls-wrap,
    .language-switcher-wrapper {
  position: relative;
  z-index: 9999;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
}

.gt-hidden {
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

.lang-dropdown {
  position: relative;
  min-width: 155px;
}

.lang-trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  height: 36px;
  border: 1px solid #d7dce2;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #1f2937;
  border-radius: 7px;
  padding: 0 2px;
}

.lang-trigger:hover {
/*  border-color: #f26c2a;
  box-shadow: 0 10px 24px rgba(242,108,42,0.18);*/
}


.lang-trigger-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-icon {
  font-size: 16px;
  line-height: 1;
}

.lang-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
}

.lang-chevron {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.lang-dropdown.open .lang-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.lang-menu {
  position: absolute;
  z-index: 9999;
  margin: 0px;
  display: none;
  width: 100%;
  list-style-type: none;
  overflow-y: auto;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  top: calc(100% + 10px);
  left: 0;
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(15,23,42,0.16);
  max-height: 320px;
}

.lang-dropdown.open .lang-menu {
  display: block;
}

.lang-menu li {
  width: 100%;
  cursor: pointer;
  border-radius: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.lang-menu li:hover {
  background-color: #f0f4ff;
  color:#003366;
}

.lang-menu li.active {
  --tw-bg-opacity: 1;
  background-color: #003366;
  --tw-text-opacity: 1;
  color:#fff;
}

.goog-logo-link,
    .goog-te-gadget span,
    .goog-te-gadget-icon {
  display: none;
}

.goog-te-gadget {
  font-size: 0px;
}

/* Userway */

/* ── Hamburger button — base styles (always rendered) ── */

.mob-menu-btn {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.2s;
  /* display controlled by media queries below — NOT set here */
}

.mob-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* X animation when open */

.mob-menu-btn.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mob-menu-btn.is-active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.mob-menu-btn.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile utility bar — display controlled by media queries */

.mob-nav-util {
  display: none;
}

/* ──────────────────────────────────────────────────────
       HOME PAGE
       ────────────────────────────────────────────────────── */

/* Hero strip */

.hero-section {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  height: 320px;
  flex-wrap:wrap; color:#fff; justify-content:center; align-items:center; text-align:center;
  background:#f1f1f1;
}
.hero-section:before {
content: ''; position: absolute; inset: 0;
background: #0009;
}
.hero-section .header-wrap{ flex-wrap:wrap; z-index:1;}
.hero-section h1{width:100%; display:flex; justify-content:center; color:#fff; font-size:34px; text-transform:uppercase;}
.hero-section h2{ width:100%; display:flex; justify-content:center; color:#fff;}
.hero-section p{ width:80%; margin:10px auto 0px; display:flex; justify-content:center; color:#fff;}
.hero-section .hero-cta-row{display:flex; margin:25px auto 0px; gap:10px; width:53%;}
.hero-section .hero-cta-row .btn-primary{ background: #003366;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block; transition:.3s;}
 .hero-section .hero-cta-row .btn-primary:hover{transition:.3s; transform:scale(1.03);}

.hero-section .hero-cta-row .btn-outline{
  background: #ffffffd9;
  color: #003366;
  border: 2px solid #003366;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block; transition:.3s;}
 .hero-section .hero-cta-row .btn-outline:hover{transition:.3s; transform:scale(1.03);}

.hero-card {
  position: relative;
  flex: 1 1 0%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  max-width: 350px;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

.hero-card:hover {
  --tw-translate-y: -6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.hero-card img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero-card-overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 14px;
  padding-bottom: 14px;
}

.hero-btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-style: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  background: #003366;
  padding: 9px 18px;
  border-radius: 30px;
  font-family: 'Roboto', sans-serif;
}

.hero-btn:hover {
  background: #a10d24;
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Section heading */

.section-title {
  float: none;
  margin-bottom: 0.75rem;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(44 44 44 / var(--tw-text-opacity, 1));
}

.section-rule {
  float: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  display: block;
  border-radius: 0.125rem;
  width: 48px;
  height: 3px;
  background: #003366;
}

/* Steps grid */

.steps-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(7, 1fr);
}

.step-card {
  position: relative;
  border-radius: 10px;
  text-align: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  padding: 40px 10px 10px;
  margin-top: 40px;
}

/* Walk-in (dark) variant */

.step-card.dark {
  --tw-text-opacity: 1;
  color: rgb(0, 0, 0);
  background: #fff;
  border: solid 1px #003366; top:0px; transition:.3s; border-bottom-width:3px;
}

.step-card.dark:hover   {
  background: #f0f4ff;
  top:-10px; transition:.3s;
}

.step-card.dark .step-num {
  color: #fff;
}

.step-card.dark a {
  float: none;
  --tw-text-opacity: 1;
  color: #000;
  text-decoration-line: underline;
}

/* Postal (red) variant */

.step-card.red {
--tw-text-opacity: 1;
  color: #003366;
  background: #f0f4ff;
  top:0px; transition:.3s; border-bottom-width:3px; border: solid 1px #fff;
}

.step-card.red:hover    {
  background: #fff;
  border:solid 1px #003366;
  top:-10px; transition:.3s;
}

.step-card.red .step-num {
color: #003366;
  border: solid 2px #003366;
  background: #fff;
}

.step-card.red .step-icon{ color: #003366; background: none;}

.step-card.red a {
  float: none;
  --tw-text-opacity: 1;
  color: #003366;
}

.step-icon {
  float: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 24px;
  background: rgba(255,255,255,.12);
}

.step-card.dark .step-icon {
  --tw-text-opacity: 1;
  color: #003366;
}

.step-num {
  margin: 0px auto;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  background: #003366;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  padding-top: 10px;
  position: absolute;
  top: -30px;
  left: 0px;
  right: 0px;
}

.step-text {
  float: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.step-text a {
  text-decoration-line: underline;
}

/* Walk-in connector arrows */

.steps-walk-in .step-card:not(:last-child)::after {
  content: '›';
  position: absolute;
  right: -8px;
  top: 50%;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-size: 22px;
  --tw-text-opacity: 1;
  color: rgb(189, 39, 39);
}

/* Stats dark band */

.stats-band {
  width: 100%;
  background: #000;
  padding: 20px 0px; position:relative;
}
/*.stats-band:before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(60,59,110,0.4) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(178,34,52,0.2) 0%, transparent 55%);
}*/

.stats-grid {
  width: 100%;
  text-align: center;
}

.stats-grid img {
  display: inline-block;
  width: 80%;
  max-width: 900px;
}

.about-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  padding: 40px 0 25px;
}

.about-tag {
  float: none;
  margin-bottom: 0.5rem;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #003366;
}

.about-title {
  float: none;
  margin-bottom: 0.25rem;
  font-size: 30px;
  font-weight: 800;
}

.about-rule {
  float: none;
  margin-bottom: 22px;
  display: block;
  width: 48px;
  height: 3px;
  background: #003366;
  border-radius: 2px;
}

.about-subtitle {
  float: none;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
}

.about-body {
  float: none;
  margin-bottom: 0.75rem;
  font-size: 13px;
  line-height: 1.75;
  text-align:justify;
}

.btn-primary-red {
  margin-top: 18px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  padding: 14px 30px;
  border-radius: 67px;
  border: solid 1px #003366;
  background: linear-gradient(180deg, #003366 0%, #6C0108 100%);
}

.btn-primary-red:hover {
  background: linear-gradient(180deg, #6C0108 0%, #003366 100%);
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ── How To Apply At A Glance ───────────────────────────────── */

.gla-section {
  background: #fff;
  padding: 68px 40px 76px;
  text-align: center;
  overflow: hidden;
}
.gla-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gla-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.gla-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 14px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,51,102,0.10), 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,51,102,0.07);
  transition: transform 0.26s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.26s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.gla-card:hover { text-decoration: none; color: inherit; }
.gla-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,51,102,0.18), 0 4px 12px rgba(0,0,0,0.08);
}
.gla-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #003366;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gla-badge--last { background: #c0001a; }
.gla-card-title {
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.45;
  flex: 1;
}

/* Extra icon colours */
.qa-icon-indigo { background: linear-gradient(135deg,#e0e7ff,#c7d2fe); color: #3730a3; }
.qa-icon-teal   { background: linear-gradient(135deg,#ccfbf1,#99f6e4); color: #0f766e; }
.qa-icon-red    { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #b91c1c; }

@media (max-width: 1100px) {
  .gla-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .gla-section { padding: 48px 16px 56px; }
  .gla-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── Stats band (redesigned) ────────────────────────────────── */

.dark-band-wrap {
  background: linear-gradient(135deg, #001228 0%, #002654 55%, #001a3d 100%);
  position: relative;
  overflow: hidden;
}
.dark-band-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.sb-band {
  background: transparent;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.sb-band::before {
  display: none;
}
.sb-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.sb-stat {
  flex: 1;
  text-align: center;
  padding: 0 16px;
}
.sb-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: background 0.25s, border-color 0.25s;
}
.sb-icon svg { width: 22px; height: 22px; stroke: rgba(255,255,255,0.75); fill: none; flex-shrink: 0; }
.sb-stat:hover .sb-icon {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.22);
}
.sb-num {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.sb-lbl {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.5;
}
.sb-div {
  width: 1px;
  height: 68px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ── About section (redesigned) ─────────────────────────────── */

.ab-section {
  background: transparent;
  padding: 76px 0 80px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ab-section::before { display: none; }
.ab-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.ab-badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.18);
}
.ab-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.ab-rule {
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  border-radius: 2px;
  margin-bottom: 20px;
}
.ab-lead {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  margin-bottom: 16px;
  line-height: 1.5;
}
.ab-body {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.62);
  margin-bottom: 12px;
  text-align: justify;
}
.ab-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.ab-cta:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.20);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: #fff;
  text-decoration: none;
}
.ab-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.ab-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid #e2e8f4;
  box-shadow: 0 2px 8px rgba(0,51,102,0.06);
  transition: transform 0.22s, box-shadow 0.22s;
}
.ab-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 18px rgba(0,51,102,0.1);
}
.ab-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eef3fb;
  color: #003366;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ab-card-icon svg { width: 20px; height: 20px; stroke: #003366; fill: none; flex-shrink: 0; }
.ab-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 4px;
}
.ab-card-text {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
}

/* News section */

.news-section {
  width: 100%;
  background: #f8f6f3;
}

.news-tag {
  float: none;
  margin-bottom: 6px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #003366;
}

.news-grid {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
}

.news-card {
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
}

.news-card:hover {
  --tw-translate-y: -6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  box-shadow: 0 12px 32px rgba(0,0,0,.13);
}

.news-card img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 180px;
}

/* News slider */

.ns-slider-wrap {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

.ns-slider-viewport {
  overflow: hidden;
}

.ns-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.ns-card {
  flex: 0 0 33.333%;
  padding: 0 12px;
  box-sizing: border-box;
}

.ns-card-inner {
  background: #fff;
  border-radius: 12px;
  padding: 26px 24px 22px;
  height: 100%;
  box-sizing: border-box;
  /* box-shadow: 0 4px 18px rgba(0,0,0,.07); */
  display: flex;
  flex-direction: column;
  /* border-top: 4px solid #003366; */
  transition: box-shadow 0.25s, transform 0.25s;
}

.ns-card-inner:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.13);
  transform: translateY(-4px);
}

.ns-cat {
  font-size: 11px;
  font-weight: 700;
  color: #003366;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.ns-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ns-date {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 16px;
}

.ns-date i {
  margin-right: 5px;
}

.ns-read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #003366;
  text-decoration: none;
  border: 1.5px solid #003366;
  border-radius: 5px;
  padding: 6px 14px;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}

.ns-read-more:hover {
  background: #003366;
  color: #fff;
}

.ns-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.ns-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #003366;
  background: #fff;
  color: #003366;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.ns-arrow:hover {
  background: #003366;
  color: #fff;
}

.ns-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ns-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ns-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
}

.ns-dot.active {
  background: #003366;
  transform: scale(1.3);
}

/* Chat / chat launcher */

.launcher {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 999;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  width: 56px;
  height: 56px;
  background: #003366;
  border-radius: 50%;
  border: none;
  box-shadow: 0 6px 20px rgba(0,51,102,.45);
}

.launcher:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Home notification overlay */

.cookiesPanelBoxWrapNotification .homenotification-overlay {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  background: rgba(0,0,0,0.85);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.homenotification-box {
  position: absolute;
  height: auto;
  overflow: visible;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 95%;
  padding: 10px 20px; font-size:13px;
}

.notifi-title {
float: none;
  font-size: 23px;
  font-weight: 700;
  color: #003366;
  border-bottom: solid 3px #003366;
  width: 50px;
  margin-bottom: 20px;
}

.homenotification-box p{ font-size:13px; margin-bottom:10px;}
.cookiesPanelBox-close-notify {
  position: absolute;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  right: 10px;
  top: 10px;
  background: #000;
  padding: 4px 9px;
  opacity: 0.8;
}

.cookiesPanelBox-close-notify:hover {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────
       INNER SERVICE PAGES  (passport / visa / oci / consular)
       ────────────────────────────────────────────────────── */

/* ── Banner ── */

.ps-banner {
  position: relative;
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.ps-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.ps-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.ps-banner h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

/* Breadcrumb inside banner */

.ps-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  list-style: none;
  padding: 0;
  margin: 0;
  float: none;
}

.ps-breadcrumb a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.ps-breadcrumb a:hover {
  color: #fff;
}

.ps-breadcrumb .sep {
  opacity: .6;
}

/* ── Outer content wrap ── */

.ps-wrap {
  max-width: 1180px;
  margin: -35px auto 0px;
  padding: 0px;
  float: none;
  box-shadow:0 1px 2px 0 #0000000d; background:#fff; border-radius:15px; position:relative; z-index:1;
}

/* ── Tab navigation ── */

.ps-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 0px;
  padding:15px 15px;
  border-bottom: 2px solid #e5e7eb; background:#f8fafc;
  list-style: none;
  float: none; border-radius:15px 15px 0px 0px;
}

.ps-tab-nav li {
  margin: 0px 3px 0px 0px;
}

.ps-tab-nav li a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  float: none;
}

.ps-tab-nav li a:hover {
  color: #003366;
  background:#f0f4ff; border-radius:20px;
}

.ps-tab-nav li.current a {
  color: #fff;
  background:#003366; border-radius:20px;
}

/* ── Tab panes ── */

.ps-tab-pane {
  display: none;
  padding:0px;
}

.ps-tab-pane.active {
  display: block;
}

/* ── Rich-text content from DB ── */

.ps-content {
  line-height: 1.75; padding:10px; min-height:200px;
}

.ps-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: #2c2c2c;
  margin: 0 0 14px;
}

.ps-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #444;
  margin: 22px 0 10px;
}

.ps-content p {
  font-size: 13px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 14px;
  text-align: justify;
}

.ps-content ul, .ps-content ol {
  padding-left: 22px;
  margin-bottom: 16px;
}

.ps-content li {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 6px;
}

.ps-content a {
  color: #003366;
  text-decoration: underline; word-wrap:break-word;
}

.ps-content a:hover {
  color: #a10d24;
}

/* ── Tables inside DB-rendered content ── */

.ps-content .table-responsive {
  overflow-x: auto;
  margin-bottom: 20px;
}

.ps-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
  margin-bottom: 20px;
  float: none;
}

.ps-content table th {
  background: #003366;
  color: #fff;
  font-weight: 600;
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  border: 1px solid #001f4d;
}

.ps-content table td {
  border: 1px solid #e4e4e4;
  padding: 10px 14px;
  font-size: 14px;
  color: #444;
  vertical-align: top;
}

/* First row acts as header when no <thead> is used */

.ps-content table tr:first-child td {
  background: #003366;
  color: #fff;
  font-weight: 600;
  border-color: #001f4d;
}

/* If there IS a proper thead, don't double-style first tbody row */

.ps-content table thead + tbody tr:first-child td {
  background: transparent;
  color: #444;
  font-weight: normal;
  border-color: #e4e4e4;
}

.ps-content table tbody tr:nth-child(even) td {
  background: #f9f9f9;
}

.ps-content table tbody tr:hover td {
  background: #f0f6ff;
}

/* ── Section sub-heading (used inside tabs) ── */

.ps-sub-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c2c2c;
  margin: 32px 0 6px;
  float: none;
}

/* ──────────────────────────────────────────────────────
       GENERAL INNER PAGES  (faq / contact / about / news / career / jobs)
       ────────────────────────────────────────────────────── */

/* ── FAQ accordion ── */

.faq-intro {
  text-align:center;
  font-size:15px;
  color:#555;
  margin-bottom:32px;
  float:none; padding-top:32px;
}

.faq-intro a {
  color:#003366;
  text-decoration:underline;
  float:none;
}

.faq-accordion {
  margin:0;
  padding:0;
  list-style:none;
  float:none;
}

.faq-item {
  border:1px solid #e8e8e8;
  border-radius:8px;
  margin-bottom:8px;
  overflow:hidden;
  float:none;
}

.faq-question {
  display:block;
  width:100%;
  text-align:left;
  padding:14px 44px 14px 18px;
  font-size:14px;
  font-weight:600;
  color:#333;
  background:#fafafa;
  border:none;
  cursor:pointer;
  text-decoration:none;
  float:none;
  position:relative;
  transition:background .2s, color .2s;
  line-height:1.5;
}

.faq-question::after {
  content:'›';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  font-size:20px;
  transition:transform .25s;
}

.faq-question.open {
  background:#003366;
  color:#fff;
}

.faq-question.open::after {
  transform:translateY(-50%) rotate(270deg);
}

.faq-question:hover:not(.open) {
  background:#f0f4ff;
}

.faq-answer {
  padding:0 18px;
  font-size:14px;
  line-height:1.75;
  color:#444;
  display:none;
  background:#fff;
  border-top:1px solid #f0f0f0;
}

.faq-answer p {
  margin:14px 0;
}

.faq-answer a {
  color:#003366;
  float:none;
}

/* ── Contact cards ── */

.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:10px;
  margin:8px 0px 20px;
  float:none;
}

.contact-card {
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  padding:30px 20px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  float:none;
}

.contact-card-icon {
  width:64px;
  height:64px;
  background:#f0f6ff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  font-size:28px;
  color:#003366;
  float:none;
}

.contact-card h3 {
  font-size:18px;
  font-weight:700;
  color:#2c2c2c;
  text-align:center;
  margin-bottom:20px;
  float:none;
}

.contact-info-row {
  display:flex;
  align-items:flex-start;
  gap:5px;
  padding:12px 0;
  border-bottom:1px solid #f2f2f2;
  float:none;
}

.contact-info-row:last-child {
  border-bottom:none;
}

.contact-info-icon {
  color:#003366;
  font-size:15px;
  min-width:20px;
  margin-top:-2px;
}
.minAddrs{ min-height:70px;}

.contact-info-body {
  flex:1;
}

.contact-info-label {
  font-size:14px;
  font-weight:700;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:5px;
}

.contact-info-value {
  font-size:14px;
  color:#444;
  line-height:1.5;
}
.contact-info-value ul{ margin-bottom:10px;}
.contact-grid .contact-card:first-child .contact-info-row:nth-child(3) .contact-info-value hr{ margin:42px 0px 10px; border:none; border-bottom:dashed 1px #aaa !important;}
.contact-grid .contact-card .contact-info-row .contact-info-value hr{ margin:0px 0px 10px; border:none; border-bottom:dashed 1px #aaa !important;}
.contact-info-value.minHours{ min-height:120px;}
.contact-info-value p strong{ font-weight:600;}

.contact-info-value a {
  color:#003366;
  text-decoration:none;
  float:none;
}

.contact-info-value a:hover {
  text-decoration:underline;
}

.contact-map {
  margin-top:16px;
  border-radius:10px;
  overflow:hidden;
}

.contact-map iframe {
  display:block;
  width:100%;
  height:200px;
  border:0;
}

/* ── News / Article ── */

.article-wrap {
  max-width:1000px; padding:20px 0px;
  margin:0 auto;
  float:none;
}

.article-meta {
  font-size:12px;
  color:#999;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:10px;
  float:none;
}

.article-title {
  font-size:30px;
  font-weight:800;
  color:#2c2c2c;
  line-height:1.3;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:2px solid #e8e8e8;
  float:none;
}

.article-body {
  font-size:15px;
  line-height:1.8;
  color:#444;
}

.article-body p {
  margin-bottom:14px;
}

.article-body h2 {
  font-size:22px;
  font-weight:700;
  color:#2c2c2c;
  margin:24px 0 10px;
  float:none;
}

.article-body h3 {
  font-size:18px;
  font-weight:600;
  color:#444;
  margin:18px 0 8px;
  float:none;
}

.article-body a {
  color:#003366;
  text-decoration:underline;
  float:none;
}

.article-empty {
  text-align:center;
  padding:60px 20px;
}

.article-empty i {
  font-size:48px;
  color:#ddd;
  display:block;
  margin-bottom:16px;
}

.article-empty h3 {
  font-size:20px;
  color:#555;
  margin-bottom:8px;
  float:none;
}

.article-empty p {
  font-size:14px;
  color:#999;
  max-width:400px;
  margin:0 auto 20px;
}

/* ── Career / Job listings ── */

.jobs-section-title {
  font-size:22px;
  font-weight:700;
  color:#2c2c2c;
  margin:40px 0 20px;
  float:none;
}

.jobs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
  float:none;
}

.job-card {
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:box-shadow .2s, transform .2s;
  float:none;
}

.job-card:hover {
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

.job-card h3 {
  font-size:17px;
  font-weight:700;
  color:#2c2c2c;
  margin-bottom:8px;
  float:none;
}

.job-location {
  font-size:13px;
  color:#777;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:6px;
  float:none;
}

.job-location i {
  color:#003366;
}

.btn-apply {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#003366;
  color:#fff;
  padding:9px 20px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s;
  float:none;
}

.btn-apply:hover {
  background:#a10d24;
  color:#fff;
}

/* ── Job detail page ── */

.job-detail-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:32px;
  align-items:start;
  float:none;
}

.job-detail-desc .accordion_container {
  border:1px solid #e8e8e8;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:0;
}

.job-detail-desc .accordion_head {
  background:#fafafa;
  border-bottom:1px solid #e8e8e8;
  padding:16px 20px;
  font-size:15px;
  color:#333;
  font-weight:600;
  float:none;
  text-decoration:none;
  display:block;
}

.job-detail-desc .accordion_head:hover, .job-detail-desc .accordion_head.accordion_head_open {
  background:#f0f4ff;
  color:#003366;
}

.job-detail-desc .accordion_body {
  padding:16px 20px;
  font-size:14px;
  line-height:1.75;
  color:#444;
}

.job-detail-desc .accordion_body a {
  color:#003366;
  float:none;
}

.job-apply-panel {
  background:#f8f9fb;
  border:1px solid #e8e8e8;
  border-radius:16px;
  padding:28px;
  float:none;
}

.job-apply-panel h2 {
  font-size:20px;
  font-weight:700;
  color:#2c2c2c;
  margin-bottom:6px;
  float:none;
}

.job-apply-panel > p {
  font-size:13px;
  color:#666;
  margin-bottom:20px;
}

.job-form-field {
  margin-bottom:16px;
  float:none;
}

.job-form-field label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:#444;
  margin-bottom:6px;
}

.job-form-field input[type=text],
    .job-form-field input[type=email] {
  width:100%;
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
  font-family:'Roboto',sans-serif;
  outline:none;
  transition:border .2s;
}

.job-form-field input:focus {
  border-color:#003366;
}

.job-upload-box {
  border:2px dashed #ddd;
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  background:#fafafa;
  transition:border .2s,background .2s;
  display:flex;
  align-items:center;
  gap:10px;
}

.job-upload-box:hover {
  border-color:#003366;
  background:#f0f6ff;
}

.job-upload-box i {
  font-size:20px;
  color:#003366;
  float:none;
}

.job-upload-text {
  font-size:13px;
  color:#777;
}

.job-submit-btn {
  width:100%;
  padding:12px;
  background:#003366;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:'Roboto',sans-serif;
  transition:background .2s;
  margin-top:8px;
}

.job-submit-btn:hover {
  background:#a10d24;
}

.job-alert {
  padding:12px 16px;
  border-radius:8px;
  font-size:14px;
  margin-bottom:16px;
}

.job-alert.success {
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}

.job-alert.error   {
  background:#ccd9f0;
  color:#721c24;
  border:1px solid #f5c6cb;
}

.field-error {
  font-size:12px;
  color:#003366;
  margin-top:4px;
  display:none;
}

/* ── About page ── */

.about-page-wrap {
  max-width:1180px;
  margin:0 auto;
  padding:48px 20px 64px;
  float:none;
}

.about-section {
  margin-bottom:56px;
  float:none;
}

.about-section-title {
  font-size:30px;
  font-weight:800;
  color:#2c2c2c;
  text-align:center;
  margin-bottom:6px;
  float:none;
}

.about-section-rule {
  width:48px;
  height:3px;
  background:#003366;
  border-radius:2px;
  margin:0 auto 28px;
  float:none;
}

.about-section-tag {
  font-size:13px;
  font-weight:700;
  color:#003366;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:center;
  margin-bottom:8px;
  float:none;
}

.vision-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  float:none;
}

.vision-card {
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  display:flex;
  gap:18px;
  align-items:flex-start;
  float:none;
}

.vision-card img {
  width:56px;
  height:56px;
  -o-object-fit:contain;
     object-fit:contain;
  flex-shrink:0;
}

.vision-card-body h3 {
  font-size:18px;
  font-weight:700;
  color:#2c2c2c;
  margin-bottom:8px;
  float:none;
}

.vision-card-body p {
  font-size:13px;
  line-height:1.7;
  color:#555;
  float:none;
}

.strengths-band {
  background:#111;
  padding:56px 0;
  margin:0 -20px;
  float:none;
}

.strengths-inner {
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  float:none;
}

.strengths-band h2 {
  font-size:30px;
  font-weight:800;
  color:#fff;
  text-align:center;
  margin-bottom:32px;
  float:none;
}

.strengths-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  float:none;
}

.strength-card {
  background:#fff;
  border-radius:12px;
  padding:24px;
  border-left:6px solid #003366;
  float:none;
}

.strength-card img {
  width:44px;
  height:auto;
  margin-bottom:12px;
  float:none;
}

.strength-card h3 {
  font-size:16px;
  font-weight:700;
  color:#2c2c2c;
  margin-bottom:8px;
  float:none;
}

.strength-card p {
  font-size:13px;
  line-height:1.6;
  color:#555;
  float:none;
}

.footprints-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  float:none;
}

.footprints-grid iframe {
  width:100%;
  height:320px;
  border-radius:12px;
  border:0;
  display:block;
}

.stats-strip {
  display:flex;
  gap:0;
  border:1px solid #e8e8e8;
  border-radius:16px;
  overflow:hidden;
  float:none;
}

.stat-block {
  flex:1;
  text-align:center;
  padding:32px 20px;
  border-right:1px solid #e8e8e8;
  float:none;
}

.stat-block:last-child {
  border-right:none;
}

.stat-block .stat-number {
  font-size:44px;
  font-weight:800;
  color:#003366;
  line-height:1;
  margin-bottom:6px;
  float:none;
}

.stat-block .stat-label {
  font-size:13px;
  font-weight:600;
  color:#555;
  float:none;
}

.stat-block .stat-sub {
  font-size:12px;
  color:#003366;
  font-weight:600;
  float:none;
}

/* Responsive */

@media (max-width:767px) {
  .contact-grid {
    grid-template-columns:1fr;
  }

  .article-title {
    font-size:22px;
  }

  .job-detail-grid {
    grid-template-columns:1fr;
  }

  .jobs-grid {
    grid-template-columns:1fr;
  }

  .vision-grid {
    grid-template-columns:1fr;
  }

  .strengths-grid {
    grid-template-columns:1fr;
  }

  .footprints-grid {
    grid-template-columns:1fr;
  }

  .stats-strip {
    flex-direction:column;
  }

  .stat-block {
    border-right:none;
    border-bottom:1px solid #e8e8e8;
  }

  .stat-block:last-child {
    border-bottom:none;
  }
  .minAddrs{ min-height:0px;}
}

/* ── Fees table ── */

.ps-fees-table {
  overflow-x: auto;
  margin: 24px 0 16px;
}

.ps-fees-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
  float: none;
}

.ps-fees-table th {
  background: #003366;
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  border: 1px solid #001f4d;
}

.ps-fees-table td {
  border: 1px solid #e4e4e4;
  padding: 12px 16px;
  font-size: 14px;
  color: #444;
}

.ps-fees-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.ps-fees-notes {
  font-size: 13px;
  color: #666;
  margin-top: 10px;
}

.ps-fees-notes ul {
  padding-left: 20px;
  margin: 6px 0 0;
}

.ps-fees-notes li {
  margin-bottom: 5px;
}

.ps-fees-notes a {
  color: #003366;
  text-decoration: underline;
}

/* ── All-services pages: mobile responsive (860px) ── */
@media (max-width: 860px) {
  /* Tab navigation: horizontal scroll instead of wrapping */
  .psa-content .ps-tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .psa-content .ps-tab-nav::-webkit-scrollbar { display: none; }

  /* Override hard min-width so overflow-x wrapper can scroll */
  .psa-content .ps-content table { min-width: 0 !important; }
  .psa-content .ps-fees-table table { min-width: 0 !important; }

  /* Ensure table wrappers support touch scroll */
  .psa-content .table-scroll,
  .psa-content .ps-fees-table { -webkit-overflow-scrolling: touch; }

  /* Compact fees table cells */
  .psa-content .ps-fees-table th,
  .psa-content .ps-fees-table td { padding: 8px 10px; font-size: 12px; }
  .psa-content .ps-content table th,
  .psa-content .ps-content table td { font-size: 12px; padding: 8px 10px; }

  /* Section heading */
  .psa-content .ps-content h3 { font-size: 15px; margin-bottom: 10px; }
}

/* ──────────────────────────────────────────────────────
       FOOTER
       ────────────────────────────────────────────────────── */

.du-footer {
  width: 100%;
  background: #f8fafc;
  color: #64748b;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  border-top: 1px solid #e2e8f0;
}

.du-footer .wrap{
	margin-left: auto;
	margin-right: auto;
	max-width: 1180px;
	padding: 40px 0 10px;
}

/* Main grid: left | right */

.du-footer__main {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  padding-bottom:20px;
}

/* Left column */

.du-footer__left {
  padding: 0rem 0.5rem;
}

.du-footer__logo {
  margin-bottom: 0.6rem;
  display: inline-block;
  font-weight: 800;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.du-footer__logo img {
  height: 45px;
}

.du-footer__section-label {
  margin-bottom: 0.65rem; position:relative;
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom:.4rem;
  color: #0f172a;
}
.du-footer__section-label:before{ content:""; position:absolute; left:0px; bottom:0px; border-bottom:3px solid #003366; width:65px;}

/* Social icons */

.du-footer__social {
  margin-bottom: 1.6rem;
  display: flex;
  gap: 0.5rem;
}

.du-footer__social-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  width: 34px;
  height: 34px;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.du-footer__social-btn:hover {
  color: #fff;
  background: #003366;
  border-color: #003366;
}
.du-footer__social-btn[aria-label="Facebook"]:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.du-footer__social-btn[aria-label="Instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: #d6249f; color: #fff; }
.du-footer__social-btn[aria-label="LinkedIn"]:hover  { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.du-footer__social-btn[aria-label="YouTube"]:hover   { background: #FF0000; border-color: #FF0000; color: #fff; }

/* Quick links */

.du-footer__links-divider {
  margin-bottom: 1.1rem;
  border-style: none;
  border-top: 0.5px solid #003366;
}

.du-footer__links-grid {
  display: grid;
  gap: 5px 1rem;
  grid-template-columns: 1fr 1fr;
}

.du-footer__links-grid a {
  display: block;
  padding-top: 12px;
  padding-bottom: 1px;
  font-size: 13px;
  color: #475569;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.du-footer__links-grid a:hover {
  color: #003366;
}

/* Right column (offices) */

.du-footer__right {
}

.du-footer__office {
  padding: 1rem;
}

.du-footer__office--bordered {
  border-left: 0.5px solid #222222;
}

.du-footer__office-head {
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.du-footer__office-city {
  font-size: 28px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Key-value detail grid */

.du-footer__detail {
  display: grid;
  gap: 0px;
  grid-template-columns: auto 1fr;
}

.du-footer__detail-key {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #003366;
  padding: 0.3rem 0.8rem 0.3rem 0;
  line-height: 1.55;
  align-self: start;
}

.du-footer__detail-val {
  font-size: 0.875rem;
  color: #64748b;
  padding: 0.3rem 0;
  line-height: 1.55;
}

.du-footer__detail-val a {
  color: #64748b;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.du-footer__detail-val a:hover {
  color: #003366;
}

/* Bottom bar */

.du-footer__bottom {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem; width:1180px; margin:auto;
  border-top: 1px solid #e2e8f0;
}

.du-footer__copy {
  font-size: 12px;
  line-height: 1.25rem;
  color: #94a3b8;
}

.du-footer__bottom-links {
  display: flex;
  gap: 1.4rem;
}

.du-footer__bottom-links a {
  font-size: 12px;
  line-height: 1.25rem;
  color: #94a3b8;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.du-footer__bottom-links a:hover {
  color: #003366;
}

/* WhatsApp FAB */

.whatsapp-fab {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  top: 2px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: #25d366;
  border-radius: 50%;
}

.whatsapp-fab:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
}

.whatsapp-fab svg {
  fill: #fff;
  width: 16px;
  height: 16px;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.end-1 {
  inset-inline-end: 0.25rem;
}

.float-right {
  float: right;
}

.m-16 {
  margin: 4rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.m-7 {
  margin: 1.75rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-1 {
  height: 0.25rem;
}

.h-2 {
  height: 0.5rem;
}

.flex-shrink {
  flex-shrink: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.flex-wrap {
  flex-wrap: wrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.border {
  border-width: 1px;
}

.bg-\[\#f8f6f3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 246 243 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.p-16 {
  padding: 4rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-\[72px\] {
  padding-top: 32px;
  padding-bottom: 32px;
}

.text-center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration-line: underline;
}

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ─── Base resets ─────────────────────────────────────────── */

/* ============================================================
   COMPONENTS
   ============================================================ */

/* end @layer components */

/* ============================================================
   RESPONSIVE — Mobile & Tablet
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop only (≥ 1025px): hide mobile-only elements ──────
   Using min-width here avoids any cascade-layer ordering issues.
   These rules are guaranteed to be the LAST word on desktop.     */

@media (min-width: 1025px) {
  .mob-menu-btn {
    display: none !important;
  }

  .mob-nav-util {
    display: none !important;
  }
}

/* ── Mobile + Tablet (≤ 1024px): hamburger menu ─────────────── */

@media (max-width: 1024px) {
  /* Show hamburger */

  .mob-menu-btn {
    display: flex !important;
  }

  /* Top header: two-row stacked layout
       Row 1 — Logo (centred)
       Row 2 — Login · Language · Hamburger (centred)          */

  .main-header  {
    overflow: visible;
  }

  .header-wrap  {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .top-header   {
    width: 100%;
  }

  .header-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    width: 100% !important;
  }

  /* Row 1: Logo */

  .header-logo {
    display: flex !important;
    justify-content: center !important;
  }

  .header-logo img {
    height: 40px;
  }

  /* Row 2: actions bar */

  .header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Show header-right on mobile (login / user btn) */

  .header-right {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Grievance link is already in mob-nav-util — hide it here */

  .header-right .top-link {
    display: none !important;
  }

  /* Language switcher: stays visible on mobile, compact (flag only) */

  .ls-wrap    {
    display: inline-block !important;
  }

  .ls-trigger {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  .ls-label   {
    display: none !important;
  }

  /* flag only on mobile */

  .ls-flag    {
    font-size: 20px !important;
    line-height: 1;
  }

  .ls-chevron {
    display: none !important;
  }

  /* hide chevron arrow */

  /* ── Nav drawer ─────────────────────────────────────────
       Stays in normal document flow (not absolute/fixed).
       max-height:0 hides it; max-height:9999px reveals it.
       The transition creates the smooth slide-down effect.    */

  .icac-navbar {
    display: block !important;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, box-shadow 0.3s ease;
    background: #fff;
    border-top: none;
    box-shadow: none;
  }

  .icac-navbar.mob-open {
    max-height: 9999px;
    /* large enough to show all items */
    overflow-y: auto;
    border-top: 2px solid #003366;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  /* ── Stacked menu list ── */

  .icac-menu {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 6px 0;
    min-width: unset;
  }

  .icac-menu > li {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
  }

  .icac-menu > li:last-child {
    border-bottom: none;
  }

  .icac-menu > li > a {
    height: auto;
    padding: 14px 20px;
    font-size: 14px;
    color: #222 !important;
    background: transparent !important;
    justify-content: space-between;
    font-weight: 600;
  }

  .icac-menu > li > a i {
    margin-left: auto;
    transition: transform 0.25s;
  }

  .icac-menu > li.mob-dd-open > a {
    color: #003366 !important;
  }

  .icac-menu > li.mob-dd-open > a i {
    transform: rotate(180deg);
  }

  /* ── First-level dropdown (accordion) ── */

  .header-dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: unset;
    width: 100%;
    background: #f7f7f7;
    display: none;
    border-top: 1px solid #eeeeee;
    padding: 4px 0;
    top: auto !important;
    left: auto !important;
  }

  /* Completely disable hover-open on mobile */

  .icac-menu > li:hover > .header-dropdown-menu    {
    display: none !important;
  }

  .icac-menu > li:hover > .header-dropdown-menu::before {
    display: none !important;
  }

  /* Only JS class opens the dropdown */

  .icac-menu > li.mob-dd-open > .header-dropdown-menu {
    display: block !important;
  }

  .header-dropdown-menu > li > a {
    padding: 11px 20px 11px 34px;
    font-size: 13px;
    color: #555;
  }

  .header-dropdown-menu > li:hover > a {
    background: transparent !important;
    color: #003366;
  }

  /* ── Second-level sub-menu (accordion) ── */

  .submenu-right {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: unset;
    width: 100%;
    background: #efefef;
    margin-left: 0 !important;
    display: none;
    padding: 4px 0;
    top: auto !important;
    left: auto !important;
  }

  .submenu-right::before {
    display: none !important;
  }

  .has-submenu:hover > .submenu-right        {
    display: none !important;
  }

  .has-submenu.mob-sub-open > .submenu-right {
    display: block !important;
  }

  .has-submenu.mob-sub-open > a i            {
    transform: rotate(90deg);
  }

  .submenu-right li a {
    padding: 10px 20px 10px 50px;
    font-size: 13px;
  }

  .submenu-right li:hover > a {
    background: transparent !important;
    color: #003366;
  }

  /* ── Mobile utility bar (Sign In + Grievance) ── */

  .mob-nav-util {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 2px solid #f0f0f0;
    background: #fff;
  }

  .mob-util-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1.5px solid #e0e0e0;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-decoration: none;
    transition: all 0.2s;
  }

  .mob-util-link:hover      {
    border-color: #003366;
    color: #003366;
  }

  .mob-util-link--red       {
    border-color: #003366;
    color: #003366;
  }

  .mob-util-link--red:hover {
    background: #003366;
    color: #fff;
  }
}

/* ── Mobile only (≤ 767px) ─────────────────────────────────── */

@media (max-width: 767px) {
  /* Inner service pages */

  .ps-banner           {
    height: 200px;
  }

  .ps-banner h1        {
    font-size: 26px;
  }

  .ps-banner-inner     {
    padding: 0 20px;
  }

  .ps-wrap             {
    padding: 20px 7px 48px; margin:0 auto;
  }

  .ps-tab-nav li a     {
    font-size: 13px;
    padding: 9px 14px;
  }

  .ps-sub-title        {
    font-size: 17px;
  }

  /* Hero */

  .hero-section {
    flex-direction: column;
    height: auto;
    gap: 16px;
    padding: 16px;
  }

  .hero-card    {
    max-width: 100%;
    width: 100%;
    height: 160px;
  }

  /* Steps */

  .steps-grid    {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-title {
    font-size: 28px;
  }

  .steps-walk-in .step-card:not(:last-child)::after {
    display: none;
  }

  /* About/stats */

  .stats-band   {
    padding: 40px 20px;
  }

  .stats-grid img {
    width: 100%;
    max-width: 100%;
  }

  .about-title  {
    font-size: 24px;
  }

  .about-body   {
    font-size: 13px;
  }

  /* News */

  .news-grid {
    grid-template-columns: 1fr;
  }

  .ns-card   {
    flex: 0 0 100%;
  }

  /* Footer */

  .du-footer__main  {
    grid-template-columns: 1fr;
  }

  .du-footer__left  {
    border-right: none;
    border-bottom: 0.5px solid #222;
    padding: 24px 16px;
  }

  .du-footer__right {
    grid-template-columns: 1fr !important;
  }

  .du-footer__office {
    padding: 24px 16px;
  }

  .du-footer__office--bordered {
    border-left: none;
    border-top: 0.5px solid #222;
  }

  .du-footer__office-city   {
    font-size: 22px;
  }

  .du-footer__links-grid    {
    grid-template-columns: 1fr 1fr;
  }

  .du-footer__section-label {
    font-size: 15px;
  }

  .du-footer__bottom        {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 14px 16px;
  }

  .du-footer__bottom-links  {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .du-footer__copy          {
    font-size: 12px;
  }
}

/* ── Tablet only (768–1024px) ──────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  .steps-grid  {
    grid-template-columns: repeat(4, 1fr);
  }

  .news-grid   {
    grid-template-columns: repeat(2, 1fr);
  }

  .ns-card     {
    flex: 0 0 50%;
  }

  .du-footer__main  {
    grid-template-columns: 1fr;
  }

  .du-footer__left  {
    border-right: none;
    border-bottom: 0.5px solid #222;
  }

  .du-footer__right {
    grid-template-columns: 1fr 1fr !important;
  }

  .steps-walk-in .step-card:not(:last-child)::after {
    display: none;
  }
}

/* ── Medium desktop (≤ 1180px) ─────────────────────────────── */

@media (max-width: 1180px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Small mobile (≤ 480px) ────────────────────────────────── */

@media (max-width: 480px) {
  .steps-grid   {
    grid-template-columns: 1fr; width:100%;
  }

  .hero-section {
    padding: 12px;
    gap: 12px;
	background-position:-500px 0px !important;
  }

  .section-title {
    font-size: 22px;
  }

  .du-footer__links-grid {
    grid-template-columns: 1fr 1fr;
  }

  .du-footer__detail     {
    grid-template-columns: 1fr;
  }

  .du-footer__detail-key {
    padding-bottom: 0;
  }

  /* Inner service pages — tiny screens */

  .ps-banner       {
    height: 130px; padding:10px 0px; background-size:200% 100% !important;
  }

  .ps-banner h1    {
    font-size: 20px;
  }

  .ps-tab-nav li a {
    font-size: 12px;
    padding: 7px 10px;
  }
}

/* ============================================================
   COOKIE CONSENT BANNER + SETTINGS MODAL
   ============================================================ */

/* ── Banner (fixed bottom bar) ─────────────────────────────── */

.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 380px;
  z-index: 99999;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #003366;
  border-radius: 10px;
  padding: 18px 20px;
  animation: cookieBannerSlide 0.4s ease;
}

@keyframes cookieBannerSlide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to   {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-banner__inner {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-banner__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.cookie-banner__text {
  flex: 1;
  font-size: 13.5px;
  color: #444;
  line-height: 1.6;
  min-width: 200px;
}

.cookie-banner__text strong {
  color: #111;
}

.cookie-banner__link {
  color: #003366;
  text-decoration: underline;
  font-weight: 500;
  margin-left: 4px;
}

.cookie-banner__link:hover {
  color: #a10d24;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Shared button styles ──────────────────────────────────── */

.cookie-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.cookie-btn--solid {
  background: #003366;
  color: #fff;
  border-color: #003366;
}

.cookie-btn--solid:hover {
  background: #a10d24;
  border-color: #a10d24;
}

.cookie-btn--outline {
  background: transparent;
  color: #003366;
  border-color: #003366;
}

.cookie-btn--outline:hover {
  background: #003366;
  color: #fff;
}

.cookie-btn--ghost {
  background: transparent;
  color: #666;
  border-color: #ccc;
}

.cookie-btn--ghost:hover {
  background: #f5f5f5;
  color: #333;
  border-color: #aaa;
}

/* ── Modal Overlay ─────────────────────────────────────────── */

.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.cookie-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: cookieModalIn 0.3s ease;
  overflow: hidden;
}

@keyframes cookieModalIn {
  from {
    transform: scale(0.93) translateY(20px);
    opacity: 0;
  }

  to   {
    transform: scale(1)    translateY(0);
    opacity: 1;
  }
}

/* Modal close button */

.cookie-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f1f1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.cookie-modal__close:hover {
  background: #e0e0e0;
  color: #111;
}

/* Modal header */

.cookie-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 28px 0;
}

.cookie-modal__icon {
  font-size: 28px;
}

.cookie-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

/* Modal description */

.cookie-modal__desc {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  padding: 12px 28px 16px;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
}

/* Modal scrollable body */

.cookie-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 28px;
}

/* Cookie category rows */

.cookie-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #f4f4f4;
}

.cookie-category:last-child {
  border-bottom: none;
}

.cookie-category__info {
  flex: 1;
}

.cookie-category__name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}

.cookie-category__desc {
  font-size: 12.5px;
  color: #777;
  line-height: 1.55;
}

/* Toggle switch */

.cookie-toggle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cookie-toggle input[type="checkbox"] {
  display: none;
}

.cookie-toggle__track {
  display: block;
  width: 46px;
  height: 26px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
  transition: background 0.25s;
}

.cookie-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s;
}

.cookie-toggle input:checked + .cookie-toggle__track {
  background: #003366;
}

.cookie-toggle input:checked + .cookie-toggle__track::after {
  transform: translateX(20px);
}

.cookie-toggle__label {
  font-size: 10px;
  font-weight: 600;
  color: #003366;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Locked (always-on) toggle */

.cookie-toggle--locked {
  cursor: default;
  opacity: 1;
}

.cookie-toggle--locked .cookie-toggle__track {
  background: #28a745;
  opacity: 0.85;
}

.cookie-toggle--locked .cookie-toggle__track::after {
  transform: translateX(20px);
}

/* Modal footer */

.cookie-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px;
  border-top: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .cookie-modal__footer {
    flex-direction: column-reverse;
  }

  .cookie-modal__footer .cookie-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .cookie-modal {
    border-radius: 12px 12px 0 0;
    max-height: 95vh;
    align-self: flex-end;
  }

  .cookie-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* ============================================================
   AUTH PAGES  (login · register)
   ============================================================ */

.auth-page {
  min-height: 60vh;
  background: #f5f6f8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 64px;
}

.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.08);
  padding: 40px 44px 36px;
  width: 100%;
  max-width: 520px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: #003366;
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 14px;
  color: #777;
  margin-bottom: 24px;
}

.auth-alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 18px;
}

.auth-alert.success {
  background: #e8f8e8;
  color: #2d7a2d;
  border-left: 4px solid #2d7a2d;
}

.auth-alert.error   {
  background: #eef3ff;
  color: #001f4d;
  border-left: 4px solid #003366;
}

.auth-form-field {
  margin-bottom: 18px;
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}

.auth-form-field .form-control-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  color: #2c2c2c;
  background: #fafafa;
  transition: border-color 0.2s;
  outline: none;
}

.auth-form-field .form-control-input:focus {
  border-color: #003366;
  background: #fff;
}

.auth-field-error {
  display: block;
  font-size: 12px;
  color: #003366;
  margin-top: 4px;
  min-height: 18px;
}

.auth-forgot {
  float: right;
  font-size: 12px;
  color: #003366;
  margin-top: -2px;
  text-decoration: none;
}

.auth-forgot:hover {
  text-decoration: underline;
}

.auth-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #003366;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}

.auth-btn:hover {
  background: #a80d25;
}

.auth-links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-links a {
  font-size: 13px;
  color: #003366;
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-note {
  font-size: 12px;
  color: #888;
  margin-top: 14px;
  line-height: 1.5;
}

/* Two-column phone row */

.auth-phone-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Name row */

.auth-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* TnC checkbox row */

.auth-tnc-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #555;
}

.auth-tnc-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #003366;
}

.auth-tnc-row a {
  color: #003366;
}

/* TnC Modal */

.tnc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.tnc-overlay.open {
  display: flex;
}

.tnc-box {
  background: #fff;
  border-radius: 10px;
  max-width: 640px;
  width: 94%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

.tnc-box-header {
  padding: 18px 24px;
  background: #003366;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tnc-box-close {
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.tnc-box-body {
  padding: 20px 24px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
  color: #444;
}

/* Loading spinner */

.auth-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.7);
  align-items: center;
  justify-content: center;
}

.auth-loading.active {
  display: flex;
}

.auth-spinner {
  width: 52px;
  height: 52px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #003366;
  border-radius: 50%;
  animation: authSpin 0.9s linear infinite;
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   CUSTOMER DASHBOARD LAYOUT  (sidebar + content)
   ============================================================ */

/* Post-login layout – full-width, no sidebar */
.dash-layout {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 80vh;
  max-width: 100%;
  background: #f1f5f9;
}

.dash-sidebar {
  display: none !important;
}

.dash-user {
  background: #003366;
  padding: 20px 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(255,255,255,0.2);
}

.dash-user-info small {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}

.dash-user-info strong {
  display: block;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}

.dash-nav {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.dash-nav-item {
  position: relative;
}

.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: #444;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.dash-nav-link i {
  width: 18px;
  text-align: center;
  color: #999;
  font-size: 15px;
}

.dash-nav-link:hover,
.dash-nav-link.active {
  background: #f0f6ff;
  color: #003366;
  border-left-color: #003366;
}

.dash-nav-link:hover i, .dash-nav-link.active i {
  color: #003366;
}

.dash-nav-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

/* Fee calculator rows */

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #444;
}

.fee-row .fee-label {
  flex: 1;
}

.fee-row .fee-amount {
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  margin-left: 12px;
}

.fee-row-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #003366;
  border-top: 2px solid #ccd9f0;
  margin-top: 4px;
}

.fee-admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #444;
}

/* 2-column form row — replaces Bootstrap .row + .col-sm-5 */

.form-2col {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.form-2col > .book-form-field {
  flex: 1;
  min-width: 0;
  /* prevent overflow on long content */
}

@media (max-width: 600px) {
  .form-2col {
    flex-direction: column;
    gap: 0;
  }
}

/* Center info panel in sidebar */

.dash-center-info {
  margin: 8px 12px 12px;
  background: #f0f6ff;
  border: 1px solid #ccd9f0;
  border-radius: 8px;
  padding: 12px 14px;
}

.dash-center-info-title {
  font-size: 10px;
  font-weight: 700;
  color: #003366;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}

.dash-center-info-title i {
  margin-right: 4px;
}

.dash-center-info-name {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.3;
}

.dash-center-info-body {
  max-height: 130px;
  overflow-y: auto;
  padding-right: 2px;
}

.dash-center-info-body::-webkit-scrollbar {
  width: 4px;
}

.dash-center-info-body::-webkit-scrollbar-track {
  background: transparent;
}

.dash-center-info-body::-webkit-scrollbar-thumb {
  background: #b3c9e8;
  border-radius: 4px;
}

.dash-center-info-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 5px;
}

.dash-center-info-row i {
  color: #003366;
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 13px;
  text-align: center;
}

.dash-center-info-row:last-child {
  margin-bottom: 0;
}

/* Dropdown submenu */

.dash-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: #444;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dash-submenu-toggle i.icon {
  width: 18px;
  text-align: center;
  color: #999;
}

.dash-submenu-toggle i.arrow {
  margin-left: auto;
  font-size: 11px;
  color: #aaa;
  transition: transform 0.25s;
}

.dash-submenu-toggle:hover {
  background: #f0f6ff;
  color: #003366;
  border-left-color: #003366;
}

.dash-submenu-toggle:hover i {
  color: #003366;
}

.dash-submenu-toggle.open i.arrow {
  transform: rotate(180deg);
}

.dash-submenu {
  display: none;
  background: #f9f9f9;
  border-left: 3px solid #003366;
  padding: 4px 0;
}

.dash-submenu.open {
  display: block;
}

.dash-submenu-link {
  display: block;
  padding: 9px 18px 9px 44px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}

.dash-submenu-link:hover {
  color: #003366;
}

.dash-submenu-link.active {
  color: #003366;
  font-weight: 600;
}

.dash-content {
  padding: 28px max(16px, calc((100% - 1180px) / 2));
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
}

.dash-content-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 4px;
}

.dash-content-subtitle {
  font-size: 13px;
  color: #888;
  margin-bottom: 22px;
}

.dash-alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.dash-alert.success {
  background: #e8f8e8;
  color: #2d7a2d;
  border-left: 4px solid #2d7a2d;
}

.dash-alert.error   {
  background: #eef3ff;
  color: #001f4d;
  border-left: 4px solid #003366;
}

.dash-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: #003366;
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
  margin-bottom: 20px;
}

.dash-action-btn:hover {
  background: #a80d25;
  color: #fff;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 24px;
  border: 1px solid #eee;
}

.profile-avatar-row img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-avatar-name {
  font-size: 17px;
  font-weight: 700;
  color: #2c2c2c;
}

.profile-avatar-email {
  font-size: 13px;
  color: #888;
}

.profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.profile-field {
  padding: 16px 22px;
  border-bottom: 1px solid #e8e8e8;
}

.profile-field:nth-child(odd) {
  border-right: 1px solid #e8e8e8;
}

.profile-field-label {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.profile-field-value {
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
}

/* ============================================================
   APPOINTMENT LIST
   ============================================================ */

.appt-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.appt-card {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.appt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #1a1a1a;
  color: #fff;
  padding: 14px 20px;
  font-size: 14px;
}

.appt-card-header-info {
  line-height: 1.5;
}

.appt-card-header-info strong {
  color: #f5c518;
}

.appt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.appt-status-badge.confirmed   {
  background: #e8f8e8;
  color: #2d7a2d;
}

.appt-status-badge.cancelled   {
  background: #eef3ff;
  color: #001f4d;
}

.appt-status-badge.processed   {
  background: #e8f0ff;
  color: #2255c8;
}

.appt-status-badge.not-confirmed {
  background: #fff3e0;
  color: #d07000;
}

.appt-status-badge.no-show     {
  background: #f5f5f5;
  color: #777;
}

/* Action dropdown */

.appt-action-wrap {
  position: relative;
  display: inline-block;
}

.appt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid #555;
  border-radius: 5px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.appt-action-btn:hover {
  background: rgba(255,255,255,0.2);
}

.appt-action-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  min-width: 210px;
  z-index: 100;
  overflow: hidden;
}

.appt-action-menu.open {
  display: block;
}

.appt-action-menu a {
  display: block;
  padding: 11px 16px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
}

.appt-action-menu a:hover {
  background: #f0f6ff;
  color: #003366;
}

.appt-action-menu a + a {
  border-top: 1px solid #f5f5f5;
}

/* Inner appt table */

.appt-table-wrap {
  overflow-x: auto;
}

.appt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.appt-table thead th {
  background: #f5f5f5;
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}

.appt-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
  vertical-align: top;
}

.appt-table tbody tr:last-child td {
  border-bottom: none;
}

.appt-empty {
  text-align: center;
  padding: 48px 20px;
  color: #aaa;
  font-size: 15px;
}

/* Cancel modal */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 10px;
  padding: 32px 36px;
  max-width: 480px;
  width: 94%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
}

.modal h2 {
  font-size: 18px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 20px;
}

.modal-field {
  margin-bottom: 16px;
}

.modal-field label {
  font-size: 13px;
  color: #888;
  display: block;
  margin-bottom: 4px;
}

.modal-field span {
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.modal-btn-cancel {
  padding: 9px 22px;
  border: 1.5px solid #ccc;
  border-radius: 7px;
  background: #fff;
  color: #555;
  font-size: 14px;
  cursor: pointer;
}

.modal-btn-submit {
  padding: 9px 22px;
  background: #003366;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.modal-btn-submit:hover {
  background: #a80d25;
}

/* ============================================================
   BOOK APPOINTMENT
   ============================================================ */

.book-form-card {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 28px 32px;
}

.book-form-field {
  margin-bottom: 20px;
}

.book-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 7px;
}

.book-form-field .form-control-input,
.book-form-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  color: #2c2c2c;
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}

.book-form-field .form-control-input:focus,
.book-form-field select:focus {
  border-color: #003366;
}

.book-field-error {
  display: none;
  font-size: 12px;
  color: #003366;
  margin-top: 4px;
}

.book-note {
  font-size: 12px;
  color: #003366;
  background: #f0f6ff;
  border-left: 3px solid #003366;
  padding: 10px 14px;
  border-radius: 0 5px 5px 0;
  margin-bottom: 20px;
  line-height: 1.6;
}

.book-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 32px;
  background: #003366;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.book-submit-btn:hover {
  background: #a80d25;
}

/* Date cards */

.date-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.available-date-card {
  border: 2px solid #b2eeb0 !important;
  border-radius: 6px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  min-width: 110px;
  background: #d7fcd6 !important;
  position: relative;
  transition: all 0.2s;
  opacity: 0.85;
}

.available-date-card:hover {
  transform: scale(1.05);
  opacity: 1;
  border-color: #106b0d !important;
}

.slot {
  font-size: 12px;
  color: #111;
  margin-top: 4px;
  width: 100%;
  text-align: center;
}

.slotDate {
  color: #106b0d !important;
}

/* ============================================================
   TRACK APPLICATION
   ============================================================ */

.track-section {
  margin-bottom: 36px;
}

.track-type-title {
  font-size: 16px;
  font-weight: 700;
  color: #003366;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.track-uid-block {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 14px 20px;
  margin-bottom: 16px;
}

.track-uid-label {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.track-uid-value {
  font-size: 15px;
  font-weight: 700;
  color: #2c2c2c;
}

.track-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  margin-bottom: 8px;
}

.track-step {
  flex: 0 0 auto;
  width: 23%;
  min-width: 140px;
  position: relative;
  padding: 14px 10px 14px 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  margin: 0 8px 12px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.track-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #003366;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.track-step-name {
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
  margin-bottom: 4px;
  line-height: 1.4;
}

.track-step-date {
  font-size: 11px;
  color: #aaa;
}

.track-step-comment {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
  font-style: italic;
}

.track-empty {
  text-align: center;
  padding: 48px 20px;
  background: #f9f9f9;
  border-radius: 8px;
  color: #aaa;
  font-size: 15px;
}

/* ============================================================
   AVAILABILITY DASHBOARD
   ============================================================ */

.avail-page {
  max-width: 1180px;
  margin: 40px auto;
  padding: 0 20px;
}

.avail-heading {
  font-size: 24px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 4px;
}

.avail-subheading {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}

.avail-filter {
  padding: 10px 16px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  min-width: 220px;
  outline: none;
  cursor: pointer;
  margin-bottom: 24px;
}

.avail-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.avail-box {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.avail-box span {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}

.avail-box strong {
  font-size: 28px;
  font-weight: 700;
  color: #003366;
}

.avail-box.warning strong {
  color: #e09000;
}

.avail-box.success strong {
  color: #2d9e2d;
}

.avail-table-wrap {
  overflow-x: auto;
}

.avail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.avail-table thead th {
  background: #003366;
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.avail-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
  vertical-align: middle;
}

.avail-table tbody tr:hover td {
  background: #f5f8ff;
}

.avail-status-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin-bottom: 5px;
  overflow: hidden;
}

.avail-status-fill {
  height: 100%;
  border-radius: 3px;
}

.avail-status-fill.ok      {
  background: #2d9e2d;
}

.avail-status-fill.warning {
  background: #e09000;
}

.avail-status-fill.full    {
  background: #003366;
}

.avail-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.avail-badge.available {
  background: #e8f8e8;
  color: #2d7a2d;
}

.avail-badge.full      {
  background: #eef3ff;
  color: #001f4d;
}

/* ============================================================
   CUSTOMER PAGES RESPONSIVE  (@media max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
  .auth-card {
    padding: 28px 20px;
  }

  .auth-name-row,
    .auth-phone-row {
    grid-template-columns: 1fr;
  }

  .dash-layout {
    margin: 0;
    padding: 0;
  }

  .dash-content {
    padding: 16px;
  }

  .profile-fields {
    grid-template-columns: 1fr;
  }

  .profile-field:nth-child(odd) {
    border-right: none;
  }

  .appt-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .appt-action-menu {
    right: auto;
    left: 0;
  }

  .track-step {
    width: 46%;
  }

  .avail-summary {
    flex-direction: column;
  }

  .book-form-card {
    padding: 20px 16px;
  }
}


/*new 06-06-26*/
.services-section{padding: 10px 20px;}
.services-container {max-width: 1180px;margin: auto;display: grid;grid-template-columns: repeat(4, 1fr); gap: 24px;}
.service-card { position: relative; height: 130px;border-radius: 15px;overflow: hidden;cursor: pointer;}
.service-card img {width: 100%;height: 100%;object-fit: cover;transition: transform .4s ease;}
.service-card:hover img { transform: scale(1.08);}
.service-card::before {content: "";position: absolute;inset: 0;	z-index:1;background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2), transparent);}
.service-title { position: absolute;bottom: 15px;left: 20px;color: #fff;font-size: 20px;font-weight: 700;z-index: 2;}
.service-heading { position: absolute;top: 18px;right: 18px;color: #fff;font-size: 22px; font-weight: 700; text-transform: uppercase;z-index: 2;}
/* Responsive */
@media (max-width: 1200px) {
.services-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.services-container {grid-template-columns: 1fr;}
.service-card { height:; }
.service-title { font-size: 20px; }
.ps-content{ padding:20px;}
.ps-content table th, .ps-content table td{ padding:7px 10px; font-size:13px; line-height:22px;}
.table-scroll{overflow-x:auto; margin-bottom:20px;}
.form-2col > .book-form-field, .cal-right{ width:100%;}
.form-3col{grid-template-columns:1fr!important; gap:0px!important;}
.book-form-field{ width:100%; overflow:auto; margin:0px;}
.icon-circle{ width:72px!important; height:72px!important;}
.stats-section .icon-circle i{ font-size:36px!important;}
.stats-section .icon-circle i.fixed{right:15px!important; top:31px!important; font-size:25px!important;}
.stats-section .number, .stats-section .label{ font-size:18px!important;}

}


.stats-section{
max-width:1180px; z-index:1;
margin:0px auto;
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.stat-item{
flex:1;
text-align:center;
color:#fff;
position:relative;
padding:0 13px;
}

.stat-item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:0;
height:200px;
border-right:2px dashed rgba(255,255,255,0.8);
}

.icon-circle{
width:120px;
height:120px;
margin:0 auto 20px;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center; position:relative;
}

.stats-section .icon-circle i{
font-size:65px;
color:#003366;
}

.stats-section .icon-circle i.fixed{position:absolute; right:23px; top:55px; background:#fff; border-radius:30%; font-size:50px;}

.stats-section .number{
font-size:24px;
font-weight:700;
color:#fff;
}

.stats-section .label{
font-size:24px;
line-height:1.3;
color:#fff;
}

@media (max-width: 960px) {
  .sb-inner { flex-wrap: wrap; gap: 32px; justify-content: center; }
  .sb-stat  { flex: 0 0 calc(33.33% - 22px); }
  .sb-div   { display: none; }
  .ab-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .sb-stat  { flex: 0 0 calc(50% - 16px); }
  .sb-num   { font-size: 32px; }
  .ab-title { font-size: 24px; }
}
@media(max-width:768px){
.stats-section{
flex-direction:column;
gap:40px;
}

.stat-item::after{
display:none;
}
.hero-section .hero-cta-row{ flex-wrap:wrap; width:100%;}
.hero-section .hero-cta-row .btn-primary, .hero-section .hero-cta-row .btn-outline{ width:100%;}
.hero-section h1{ font-size:25px;}
.hero-section h2{ font-size:19px;}
.hero-section p{ width:100%;}
.stats-section{ flex-direction:unset; flex-wrap:wrap;}
.about-wrap{ padding:40px 15px 25px;}
.du-footer__right, .connect-footer{ padding:20px;}
.du-footer__bottom{ width:100%;}
}

.bg{ background:#f8fafc; padding:0px 0px 30px;}
.background {
  position: relative;
  display: flex;
  width: 100%;
 background:#0a1628;
}
.background:before {
content: ''; position: absolute; inset: 0; background:#0008;}
/*.background:before {
content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(60,59,110,0.4) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(178,34,52,0.2) 0%, transparent 55%);}*/


.ps-tab-pane .ps-content{font-size:13px;}
.ps-tab-pane .ps-content p{font-size:13px;}
.ps-tab-pane .ps-content h1{font-size:18px;}
.footprints-grid .ps-content{ font-size:13px;}

.connect-footer{ color:#64748b;}
.mr-1{ margin-right:10px;}


.alertBox.error {
    background-color: #ccd9f0;
    border: 1px solid #004080;
    color: #842029;
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 16px;
}

/* ── Feedback page wrapper ─────────────────────────────────── */
.fb-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 36px 20px 48px;
}

/* ── Feedback card ─────────────────────────────────────────── */
.fb-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 24px 28px;
    margin-bottom: 20px;
}
.fb-card-error { border-color: #b3c9e8; }

.fb-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
}
.fb-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #003366;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Feedback type tiles ───────────────────────────────────── */
.fb-type-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.fb-type-tile {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px 14px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    background: #fafafa;
    text-align: center;
}
.fb-type-tile:hover { border-color: #003366; background: #f0f6ff; }
.fb-type-tile.feedbackActive {
    border-color: #003366;
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.fb-type-icon img { display: block; }
.fb-type-label { font-size: 13px; font-weight: 600; color: #333; }
.fb-type-tile.feedbackActive .fb-type-label { color: #003366; }

/* ── Rating tiles ──────────────────────────────────────────── */
.fb-rating-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.fb-rating-tile {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 12px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    background: #fafafa;
    text-align: center;
}
.fb-rating-tile:hover { border-color: #003366; background: #f0f6ff; }
.fb-rating-tile.feedbackActive {
    border-color: #003366;
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.fb-rating-img img { display: block; }
.fb-rating-label { font-size: 12px; font-weight: 600; color: #444; }
.fb-rating-tile.feedbackActive .fb-rating-label { color: #003366; }

/* ── Nominate employee box ─────────────────────────────────── */
.fb-nominate-box {
    margin-top: 18px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.fb-checkbox-label input[type="checkbox"] { accent-color: #003366; width: 16px; height: 16px; flex-shrink: 0; }
.fb-nominate-input { margin-top: 0; }

/* ── Category / Sub-category tiles ────────────────────────── */
.fb-category-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.fb-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 12px 10px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    background: #fafafa;
    min-width: 90px;
    max-width: 130px;
    text-align: center;
}
.fb-cat-tile:hover { border-color: #003366; background: #f0f6ff; }
.fb-cat-tile.feedbackActive {
    border-color: #003366;
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.fb-cat-icon img { display: block; }
.fb-cat-label { font-size: 12px; font-weight: 600; color: #444; line-height: 1.3; }
.fb-cat-tile.feedbackActive .fb-cat-label { color: #003366; }
.fb-sub-title { font-weight: 400; color: #888; font-size: 13px; }

/* ── Yes / No tiles ────────────────────────────────────────── */
.fb-yesno-row { display: flex; gap: 12px; }
.fb-yesno-tile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background: #fafafa;
    transition: all 0.18s;
}
.fb-yesno-tile:hover { border-color: #003366; background: #f0f6ff; }
.fb-yesno-tile.feedbackActive { border-color: #003366; background: #f0f4ff; color: #003366; }
.fb-yesno-tile i { font-size: 16px; }

/* ── Contact panel ─────────────────────────────────────────── */
.fb-contact-panel {
    background: #f5f7fa;
    border: 1px solid #e0e5ee;
    border-left: 4px solid #003366;
    border-radius: 8px;
    padding: 20px 22px;
}
.fb-contact-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fb-contact-panel-title i { color: #003366; font-size: 18px; }
.fb-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 14px;
}

/* ── Consent ───────────────────────────────────────────────── */
.fb-consent-box {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.fb-consent-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: #003366;
    color: #fff;
    padding: 16px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-consent-text {
    padding: 16px 20px;
    font-size: 12px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ── Text inputs / selects / textareas ─────────────────────── */
.fb-wrap .form-control-input,
.fb-wrap select.form-control-input,
.fb-wrap textarea.form-control-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 7px;
    font-size: 14px;
    color: #2c2c2c;
    background: #fff;
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.fb-wrap .form-control-input:focus,
.fb-wrap select.form-control-input:focus,
.fb-wrap textarea.form-control-input:focus {
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.08);
}
.fb-wrap .form-control-input.field-error,
.fb-wrap select.form-control-input.field-error {
    border-color: #004080;
    display: inline;
}
.fb-wrap textarea.form-control-input { resize: vertical; min-height: 80px; }
.fb-wrap select.form-control-input { appearance: auto; }

/* ── Phone row (country code + number side by side) ───────── */
.fb-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.fb-phone-row .form-control-input:first-child {
    flex: 0 0 140px;
    width: 140px;
}
.fb-phone-row .form-control-input:last-child {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* ── Misc ──────────────────────────────────────────────────── */
.fb-hidden-radio { display: none; }
.fb-link { color: #003366; text-decoration: underline; }
.fb-enquiry-note { font-size: 13px; color: #666; margin-top: 14px; margin-bottom: 0; }
.border-error { border: 1px solid red; }
.error-message, .jv-error, #g-recaptcha-error { color: #004080; font-size: 12px; display: block; margin-top: 4px; }
.fb-wrap .form-control-input.field-error { border-color: #004080; }

@media (max-width: 640px) {
    .fb-contact-grid { grid-template-columns: 1fr; }
    .fb-type-grid, .fb-rating-grid { gap: 8px; }
    .fb-type-tile { min-width: 80px; padding: 12px 8px; }
    .fb-rating-tile { min-width: 80px; }
}
/* ─────────────────────────────────────────────────────────
   Shared Auth Nav  (hero bar + horizontal nav used on all
   post-login pages via left-menu-appointment include)
   ───────────────────────────────────────────────────────── */

/* Hero */
.al-hero {
  background: linear-gradient(135deg, #001f4d 0%, #003366 60%, #0056b3 100%);
  padding: 24px max(16px, calc((100% - 1180px) / 2));
}
.al-hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.al-hero-left { display: flex; align-items: center; gap: 16px; }
.al-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0;
}
.al-hero-greeting { font-size: 12px; color: rgba(255,255,255,0.65); }
.al-hero-name { font-size: 18px; font-weight: 700; color: #fff; }
.al-hero-stats { display: flex; align-items: center; }
.al-stat { text-align: center; padding: 4px 20px; }
.al-stat-val { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.al-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }
.al-stat-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.2); }

/* Sticky nav */
.al-nav-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.al-nav-inner {
  padding: 0 max(16px, calc((100% - 1180px) / 2));
  display: flex; align-items: center; justify-content: space-between;
}
.al-nav-links { display: flex; align-items: center; gap: 2px; }
.al-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 16px; font-size: 13.5px; font-weight: 500; color: #64748b;
  text-decoration: none; border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.al-nav-link:hover { color: #003366; }
.al-nav-link.active { color: #003366; border-bottom-color: #003366; font-weight: 600; }
.al-nav-logout { color: #ef4444 !important; }
.al-nav-logout:hover { color: #dc2626 !important; }
.al-book-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #E4002B; color: #fff; border: none;
  padding: 9px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.al-book-btn:hover { background: #c0001e; color: #fff; }

/* Page content area (used directly in pages that don't use dash-content) */
.al-page {
  padding: 28px max(16px, calc((100% - 1180px) / 2));
  background: #f1f5f9; min-height: 60vh;
}

/* Section page title in dash-content */
.dash-content-title {
  font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 4px;
}
.dash-content-subtitle {
  font-size: 13px; color: #64748b; margin-bottom: 22px;
}

/* Responsive */
@media (max-width: 700px) {
  .al-hero-stats { display: none; }
  .al-nav-link { padding: 12px 10px; font-size: 12px; }
  .al-nav-link span { display: none; }
}


/* ── DU Branded Page Loader ── */
#loading { display: none; }
#loading.loading {
    display: flex !important;
    z-index: 9999;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 22, 44, 0.62);
    align-items: center;
    justify-content: center;
}
#loading-content.loading-content {
    background: #fff;
    border-radius: 14px;
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.du-ld-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.du-ld-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 5px solid #eef0f4;
    border-top: 5px solid #E4002B;
    border-right: 5px solid #E4002B;
    box-sizing: border-box;
    animation: du-spin 0.85s linear infinite;
}
.du-ld-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 800;
    color: #002654;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    user-select: none;
}
.du-ld-dots {
    display: flex;
    gap: 7px;
}
.du-ld-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E4002B;
    animation: du-bounce 1.2s ease-in-out infinite;
}
.du-ld-dots span:nth-child(2) { animation-delay: 0.18s; }
.du-ld-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes du-spin { to { transform: rotate(360deg); } }
@keyframes du-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
    40% { transform: translateY(-7px); opacity: 1; }
}