:root {
   --color-primary: #132553;
   --color-secondary: #2C4E98;
   --color-accent: #83A6D0;
   --color-dark-bar: #122754;
   --color-white: #FFFFFF;
   --color-text: #1E293B;
   --radius-lg: 24px;
   --radius-md: 16px;
 }

 * {
   font-family: 'Poppins', sans-serif;
 }

 body {
   background: var(--color-white);
   color: var(--color-text);
   overflow-x: hidden;
 }

 .bg-brand-dark {
   background-color: var(--color-primary);
 }

 .bg-brand-mid {
   background-color: var(--color-secondary);
 }

 .bg-brand-cream {
   background-color: var(--color-accent);
 }

 .bg-brand-black {
   background-color: var(--color-dark-bar);
 }

 .text-brand-dark {
   color: var(--color-primary);
 }

 .text-brand-mid {
   color: var(--color-secondary);
 }

 .text-brand-cream {
   color: var(--color-accent);
 }

 .border-brand-dark {
   border-color: var(--color-primary);
 }

 .btn-primary {
   background-color: var(--color-primary);
   color: var(--color-white);
   transition: all .3s ease;
 }

 .btn-primary:hover {
   background-color: var(--color-secondary);
   transform: translateY(-2px);
   box-shadow: 0 10px 20px -10px rgba(19, 37, 83, 0.5);
 }

 .btn-outline {
   border: 2px solid var(--color-primary);
   color: var(--color-primary);
   transition: all .3s ease;
 }

 .btn-outline:hover {
   background-color: var(--color-primary);
   color: var(--color-white);
   transform: translateY(-2px);
 }

 .fade-up {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .fade-up.show {
   opacity: 1;
   transform: translateY(0);
 }

 .tab-btn.active {
   background-color: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
 }

 .tab-btn {
   transition: all .25s ease;
 }

 .scroll-track {
   scrollbar-width: none;
 }

 .scroll-track::-webkit-scrollbar {
   display: none;
 }

 .accordion-panel {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease;
 }

 .marquee-track {
   animation: marquee 32s linear infinite;
 }

 @keyframes marquee {
   0% {
     transform: translateX(0)
   }

   100% {
     transform: translateX(-50%)
   }
 }

 /* Enhanced Professional Card System */
 /* ===== PROFESSIONAL CARD SYSTEM (Rounded 15px with Left Border) ===== */
 .card-pro {
   position: relative;
   border-radius: 15px;
   background: var(--color-white);
   border: 1px solid #DCE6F2;
   border-left: 3px solid var(--color-secondary);
   box-shadow: 0 4px 6px -1px rgba(19, 37, 83, 0.04);
   overflow: hidden;
   transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
 }

 .card-pro::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: rgba(44, 78, 152, 0.03);
   transition: width .4s ease;
   z-index: 0;
 }

 .card-pro:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 35px -15px rgba(19, 37, 83, 0.15);
   border-color: var(--color-secondary);
 }

 .card-pro:hover::before {
   width: 100%;
 }

 .card-pro>* {
   position: relative;
   z-index: 1;
 }

 .card-pro .card-icon {
   transition: transform .35s ease;
 }

 .card-pro:hover .card-icon {
   transform: scale(1.1);
 }

 .card-pro-dark {
   position: relative;
   background: var(--color-primary);
   border: 1px solid rgba(255, 255, 255, 0.1);
   overflow: hidden;
   transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background-color .35s ease;
 }

 .card-pro-dark:hover {
   transform: translateY(-6px);
   background-color: var(--color-secondary);
   box-shadow: 0 20px 35px -15px rgba(19, 37, 83, 0.4);
 }

 .card-testi {
   position: relative;
   background: var(--color-white);
   border: 1px solid #DCE6F2;
   transition: all .35s cubic-bezier(.22, 1, .36, 1);
 }

 .card-testi:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 35px -15px rgba(19, 37, 83, 0.15);
   border-color: var(--color-secondary);
 }

 /* Infinite Card Slider */
 .card-slider {
   overflow: hidden;
   position: relative;
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
   mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
 }

 .card-slider-track {
   display: flex;
   gap: 1.5rem;
   width: max-content;
   animation: cardSlide 28s linear infinite;
 }

 .card-slider-track.reverse {
   animation-name: cardSlideReverse;
 }

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

 .card-slider-track .slide-card {
   flex: 0 0 auto;
   width: 280px;
 }

 @keyframes cardSlide {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 @keyframes cardSlideReverse {
   0% {
     transform: translateX(-50%);
   }

   100% {
     transform: translateX(0);
   }
 }


 .about-vertical-slider {
   /* Mask creates a fade effect at top and bottom */
   -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
   mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
 }

 .about-slider-track {
   /* Adjusts the animation speed - slower is smoother */
   animation: verticalSlide 12s linear infinite;
 }

 .about-vertical-slider:hover .about-slider-track {
   animation-play-state: paused;
 }

 @keyframes verticalSlide {
   0% {
     transform: translateY(0);
   }

   /* Moves past 3 cards */
   100% {
     transform: translateY(-456px);
   }
 }

 #continuous-slider-track {
   animation: continuousVerticalSlide 15s linear infinite;
 }

 #continuous-vertical-slider:hover #continuous-slider-track {
   animation-play-state: paused;
 }

 @keyframes continuousVerticalSlide {
   0% {
     transform: translateY(0);
   }

   /* Moves exactly past the first set of 3 cards (3 * 140px + 3 * 16px gap = 456px) */
   100% {
     transform: translateY(-456px);
   }
 }

 .mototech-about__grid::after {
   content: "";
   display: table;
   clear: both;
 }

 .mototech-about__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 /* ===== SPLIT SCROLL REVEAL (Left/Right) ===== */
 .reveal-left {
   opacity: 0;
   transform: translateX(-60px);
   transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-right {
   opacity: 0;
   transform: translateX(60px);
   transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-left.show,
 .reveal-right.show {
   opacity: 1;
   transform: translateX(0);
 }

 /* Optional: thoda delay stagger ke liye agar ek hi container me multiple items ho */
 .reveal-left.show,
 .reveal-right.show {
   transition-delay: .05s;
 }


 .dhp-navbar {
   height: 96px;
 }


 .dhp-hero {
   height: calc(100vh - 96px);
   min-height: calc(640px);
   max-height: 900px;
   font-family: 'Poppins', sans-serif;
 }

 .dhp-hero .dhp-serif {
   font-family: 'Playfair Display', serif;
 }

 .dhp-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity 1s ease;
 }

 .dhp-bg.dhp-bg-active {
   opacity: 1;
 }

 .dhp-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(19, 37, 83, .55) 0%, rgba(19, 37, 83, 0.253) 55%, rgba(19, 37, 83, 0.322) 60%);
 }

 .dhp-content {
   display: none;
 }

 .dhp-content.dhp-content-active {
   display: block;
   animation: dhpFadeIn .6s ease;
 }

 @keyframes dhpFadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .dhp-cta-primary {
   background: #83A6D0;
   color: #132553;
   transition: all .25s ease;
 }

 .dhp-cta-primary:hover {
   background: #fff;
   transform: translateY(-2px);
 }

 .dhp-cta-outline {
   border: 1.5px solid rgba(255, 255, 255, 0.4);
   color: #fff;
   transition: all .25s ease;
 }

 .dhp-cta-outline:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: #fff;
 }

 /* Adjusted indicator styles for the full card layout */
 .dhp-indicator {
   display: block;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   opacity: 0.6;
   transition: opacity .3s ease, transform .3s ease;
 }

 .dhp-indicator.dhp-indicator-active {
   opacity: 1;
   transform: translateY(-4px);
 }

 @property --dhp-pct {
   syntax: '<percentage>';
   inherits: false;
   initial-value: 0%;
 }

 .dhp-ring {
   background: conic-gradient(rgba(131, 166, 208, 0.2) 0%, rgba(131, 166, 208, 0.2) 0%);
 }

 .dhp-card-property,
 .dhp-card-workforce {
   background-size: cover;
   background-position: center;
 }

 .dhp-card-property {
   background-image: url('/images/property-management/img1.png');
 }

 .dhp-card-workforce {
   background-image: url('/images/cleaning-service/img1.png');
 }

 .dhp-indicator-active .dhp-ring {
   background: conic-gradient(#83A6D0 var(--dhp-pct, 0%), rgba(131, 166, 208, 0.2) 0);
 }

 .dhp-indicator-active .dhp-ring.dhp-ring-run {
   animation: dhpRing 3s linear;
 }

 @keyframes dhpRing {
   from {
     --dhp-pct: 0%;
   }

   to {
     --dhp-pct: 100%;
   }
 }

 /* .dhp-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: rgba(19,37,83,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #83A6D0;
} */

  /* Base header wrapper */
    .dh-header {
      padding: 10px 18px;
      transition: padding .35s ease;
    }
 
    /* Nav pill/bar itself */
    .dh-nav-container {
      width: 100%;
      max-width: 1024px;
      padding: 10px 24px;
      border-radius: 9999px;
      background: #fff;
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 6px 20px -10px rgba(19, 37, 83, 0.3);
      transition: all .35s ease;
    }
 
    .dh-logo {
      height: 44px;
      transition: height .35s ease;
    }
 
    .dh-nav-link,
    .dh-nav-service-btn,
    .dh-nav-phone {
      color: #132553;
    }
    .dh-nav-link:hover,
    .dh-nav-service-btn:hover { color: #83A6D0; }
 
    .dh-nav-cta {
      background: #ffffff;
      color: #132553;
    }
    .dh-nav-cta:hover { background: #EBF2FC; }
 
    .dh-menu-toggle {
      background: #132553;
      color: #ffffff;
      border: none;
    }
 
    /* ===== SCROLLED STATE — full-width rectangle bar (like mobile) ===== */
    .dh-header.dh-scrolled {
      padding: 0;
    }
 
    .dh-header.dh-scrolled .dh-nav-container {
      max-width: 100%;
      border-radius: 0;
      padding: 16px 32px;
      background: #fff;
      border: none;
      border-bottom: 1px solid rgba(226, 232, 240, 0.7);
      box-shadow: 0 10px 30px -10px rgba(19, 37, 83, 0.25);
      backdrop-filter: blur(12px);
    }
 
    .dh-header.dh-scrolled .dh-logo {
      height: 56px;
    }
 
    .dh-header.dh-scrolled .dh-nav-link,
    .dh-header.dh-scrolled .dh-nav-service-btn,
    .dh-header.dh-scrolled .dh-nav-phone {
      color: #334155;
    }
    .dh-header.dh-scrolled .dh-nav-link:hover,
    .dh-header.dh-scrolled .dh-nav-service-btn:hover { color: #2C4E98; }
 
    .dh-header.dh-scrolled .dh-nav-cta {
      background: #132553;
      color: #ffffff;
    }
    .dh-header.dh-scrolled .dh-nav-cta:hover { background: #2C4E98; }
 
    .dh-header.dh-scrolled .dh-menu-toggle {
      background: #132553;
      color: #ffffff;
      border: none;
    }
 
    /* ===== MOBILE: always solid, full-width bar (no floating pill) ===== */
    @media (max-width: 639px) {
      .dh-header { padding: 0; }
      .dh-nav-container {
        max-width: 100%;
        border-radius: 0;
        padding: 10px 18px;
        background: #fff;
        border: none;
        border-bottom: 1px solid rgba(226, 232, 240, 0.7);
        box-shadow: 0 4px 16px -6px rgba(19, 37, 83, 0.15);
      }
      .dh-logo { height: 40px; }
      .dh-nav-link,
      .dh-nav-service-btn,
      .dh-nav-phone { color: #334155; }
      .dh-menu-toggle { background: #132553; color: #ffffff; border: none; }
 
      /* keep same look whether scrolled or not on mobile — bar stays solid always */
      .dh-header.dh-scrolled { padding: 0; }
      .dh-header.dh-scrolled .dh-nav-container { padding: 22px 18px; border-radius: 0; }
      .dh-header.dh-scrolled .dh-logo { height: 54px; }
    }
 
    /* Dropdown hover (desktop) */
    .dh-nav-service-group:hover .dh-nav-service-menu {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }
    .dh-nav-service-group:hover .dh-nav-service-caret {
      transform: rotate(180deg);
    }