html,
 body {
   margin: 0;
   padding: 0;
 }


:root {
   --blue: #1e3a5f;
   --blue-dk: #0f1f33;
   --blue-mid: #2c5282;
   --blue-lt: #1e3a5f;
   --blue-pale: #e8eef6;
   --blue-pal2: #c5d3e8;
   --red: #c53030;
   --red-dk: #9b2c2c;
   --red-lt: #e53e3e;
   --red-pale: #fef5f5;
   --gold: #b8860b;
   --gold-dk: #8b6914;
   --gold-lt: #d4a017;
   --gold-bg: #fdf6e8;
   --navy: #0f1f33;
   --white: #ffffff;
   --off-white: #f7f9fc;
   --light: #edf2f7;
   --dark: #1a202c;
   --gray: #5a6c7d;
   --gray-lt: #cbd5e0;
   --radius: 6px;
   --shadow: 0 4px 20px rgba(15, 31, 51, .12);
   --t: all .22s ease;
 }

/* ===========================
       SERVICES FOR CITIZENS
    =========================== */
    

 .svc-section {
   max-width: ;
   padding: 2.5rem 2%;
   border-top: 4px;
   border-bottom: 4px solid var(--gold);
   border-right: 2px;
 }

 .svc-inner {
   max-width: 1200px;
   margin: 0 auto;
 }

 .svc-heading {
   text-align: center;
   font-family: 'Tinos', serif;
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: 3px;
   color: var(--blue-dk);
   margin-bottom: 1.8rem;
   text-transform: uppercase;
   position: relative;
   padding-bottom: .75rem;
 }

 .svc-heading::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--red);
   margin: .6rem auto 0;
   border-radius: 2px;
 }

 /* ===========================
 .svc-grid {
   display: grid;
   grid-template-columns: repeat(6, 180px);
   justify-content: center;
   gap: 15px;
   margin-bottom: 10px;
   max-width: 1200px;
   margin: 0 auto;
 }
=========================== */
 /* Citizen Links Continuous Slider */

.citizen-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.citizen-track {
    display: flex;
    flex-wrap: nowrap !important;
    width: max-content;
    animation: citizenScroll 25s linear infinite;
}

.citizen-track:hover {
    animation-play-state: paused;
}

.citizen-track .svc-card {
    flex: 0 0 250px;
    margin-right: 15px;
}

@keyframes citizenScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

 .svc-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   background: #ffffff;
   border: 1px solid rgba(180, 160, 120, .25);
   border-radius: var(--radius);
   min-height: 130px;
   max-width: 300px;
   padding: 10px;
   gap: .65rem;
   text-align: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
 }

 .svc-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
   border-color: var(--gold);
   background: var(--gold-bg);
 }

 .svc-icon {
   width: 100%;
   height: 80px;
   /* Adjust image area height */
   display: flex;
   align-items: center;
   justify-content: center;

   overflow: hidden;
 }

 .svc-icon img {
   max-width: 100%;
   max-height: 100%;

   object-fit: contain;
   display: block;
 }

 .svc-icon svg {
   width: 100%;
   height: 100%;
 }

 .svc-label {
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .6px;
   text-transform: uppercase;
   color: var(--blue-dk);
   line-height: 1.38;
 }

 /* Manual slide controls for citizen slider */
.manual-slide-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.slide-btn {
  background: var(--blue-mid);
  border: 1px solid var(--gold);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slide-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.05);
}

.slide-btn:active {
  transform: scale(0.95);
}

/* Manual mode class - removes auto animation */
.citizen-track.manual-mode {
  animation: none !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}