body {
  padding-top: 76px;
}

.site-navbar {
  background: linear-gradient(110deg, #153e90 0%, #672db5 55%, #a32e8c 100%);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}

.site-navbar .nav-link,
.site-navbar .contact-info a {
  color: #fff;
  text-decoration: none;
}

.site-navbar .nav-link:hover,
.site-navbar .contact-info a:hover {
  color: #e7dcff;
}

.site-navbar .dropdown-menu {
  border: 0;
  box-shadow: 0 0.5rem 1rem rgba(21, 62, 144, 0.18);
}

.site-navbar .dropdown-item {
  color: #153e90;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
  color: #fff;
  background: linear-gradient(110deg, #153e90, #672db5 55%, #a32e8c);
}

.call-now-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  color: #fff !important;
  border: 0;
  background: linear-gradient(110deg, #ff7a18, #e52e71);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.call-now-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: -80%;
  width: 45%;
  height: 160%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent
  );
  transform: skewX(-25deg);
}

.call-now-btn:hover::before {
  animation: button-shine 0.7s ease;
}

.call-now-btn:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.call-now-btn:active {
  transform: translateY(0) scale(0.98);
}

@keyframes button-shine {
  from {
    left: -80%;
  }
  to {
    left: 140%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-now-btn,
  .call-now-btn::before {
    animation: none;
    transition: none;
  }
}

.call-now-bg {
  overflow: hidden;
  color: #fff !important;
  border: 0;
  background: linear-gradient(110deg, #ff7a18, #e52e71);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.hero {
  /* margin-top: 68px; */
  min-height: 90vh;
  padding: 64px 4%;
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/hero.jpg") center/cover no-repeat;
  /*background:
     linear-gradient(
      90deg,
      rgb(163, 46, 140, 0.8) 0%,
      rgba(21, 62, 144, 0.4) 42%,
      rgba(21, 62, 144, 0.4) 100%
    ),  url("../images/hero.jpg");
   background-image: url("../images/hero.jpg"); */
}

.hero-about {
  /* margin-top: 68px; */
  min-height: 60vh;
  padding: 64px 4%;
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/about1.jpg") center/cover no-repeat;
}
.hero-service {
  /* margin-top: 68px; */
  min-height: 60vh;
  padding: 64px 4%;
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    );
}
.hero-service.pre-metrimony {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/martimony.png") center/cover no-repeat;
}

.hero-service.surveillance {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/survillance.jpg") center/cover no-repeat;
}
.hero-service.post-matrimony {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/post_matrimony.png") center/cover no-repeat;
}
.hero-service.missing-person {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/missing.png") center/cover no-repeat;
}
.hero-service.divorce {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/divorce.png") center/cover no-repeat;
}
.hero-service.corporate {
  background:
    linear-gradient(
      110deg,
      rgba(21, 62, 144, 0.5),
      rgba(103, 45, 181, 0.5),
      rgba(163, 46, 140, 0.5)
    ),
    url("../images/corporate.png") center/cover no-repeat;
}
/* .hero__content {
  max-width: 420px;
}

.hero__eyebrow {
  margin: 0 0 14px;
  color: #e2bc56;
  font:
    500 16px/1.4 Arial,
    sans-serif;
  letter-spacing: 0.04em;
} */

/* .hero h1 {
  margin: 0;
  font:
    700 clamp(38px, 5vw, 52px)/1.12 Georgia,
    serif;
} */

/* .hero__description {
  margin: 16px 0 24px;
  color: #d7dce3;
  font:
    17px/1.5 Arial,
    sans-serif;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-width: 150px;
  padding: 12px 18px;
  border: 1px solid #d9b44e;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font:
    16px Arial,
    sans-serif;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.button--primary {
  color: #142033;
  background: linear-gradient(#f2d98b, #c99d35);
}

.button--outline {
  color: #e2bc56;
  background: rgba(8, 20, 38, 0.35);
}

.button--outline:hover {
  color: #142033;
  background: #e2bc56;
} */

@media (max-width: 600px) {
  .hero {
    min-height: 560px;
    padding: 48px 24px;
    background-position: 57% center;
  }

  .hero__content {
    max-width: 420px;
  }

  .desktop-break {
    display: none;
  }
}

.text-shadow {
  text-shadow: 0 0 3px #333232;
}

.stat-box {
  padding: 16px 8px;
  /* border: 1px solid rgba(212, 86, 226, 0.55); */
  border-radius: 12px;
  background: rgba(54, 20, 112, 0.8);
  color: #fff;
  box-shadow: 0 0 10px 1px rgb(255, 255, 255);
}

.stat-value {
  color: #e2bc56;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.stat-label {
  margin-top: 6px;
  color: #d7dce3;
  font-size: 16px;
  line-height: 1.3;
}

.section-eyebrow {
  color: #ff7a18;
  letter-spacing: 0.08em;
}

.who-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.feature-icon {
  display: inline-flex;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff7a18;
  /* color: #172033; */
  color: #fff;
  font-weight: 700;
}

.heading {
  color: #153e90;
}
.heading1 {
  color: #ff7a18;
}

.icon-box {
  display: grid;
  place-items: center;
  width: fit-content;
  height: fit-content;
  aspect-ratio: 1/1;
  padding: 4px 10px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgb(21, 62, 144),
    rgb(103, 45, 181) 55%,
    rgb(163, 46, 140)
  );
  transition: background 0.7s ease-in-out;
}
.icon-box .material-icons {
  font-size: 48px;
}
.icon-box .material-icons.sm {
  font-size: 24px;
}
.service-card:hover .service-icon,
.service-card:hover .icon-box,
.service-card:hover .detail-icon,
.service-card:hover .process-number {
  background: linear-gradient(135deg, rgb(125, 60, 211), rgb(193, 57, 166));
}
/* .service-card:hover .icon-box {
  background: linear-gradient(135deg, rgb(125, 60, 211), rgb(193, 57, 166));
}
.service-card:hover .detail-icon {
  background: linear-gradient(135deg, rgb(125, 60, 211), rgb(193, 57, 166));
}
.service-card:hover .process-number {
  background: linear-gradient(135deg, rgb(125, 60, 211), rgb(193, 57, 166));
} */

.services-badge,
.services-btn {
  color: #fff;
  background: linear-gradient(
    110deg,
    rgb(21, 62, 144) 0%,
    rgb(103, 45, 181) 55%,
    rgb(163, 46, 140) 100%
  );
}

.services-btn {
  border: 0;
}

.services-btn:hover {
  color: #fff;
  filter: brightness(1.08);
}

.service-card {
  background: #fff;
  border: 1px solid rgba(103, 45, 181, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(21, 62, 144, 0.1);
}

.work-card {
  background: #fff;
  border: 1px solid rgba(103, 45, 181, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(163, 46, 140, 0.2);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgb(21, 62, 144),
    rgb(103, 45, 181) 55%,
    rgb(163, 46, 140)
  );
}

.service-img {
  height: 240px;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.service-img img {
  min-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.read-more-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  color: #fff !important;
  border: 0;
  background: linear-gradient(90deg, #e52e71, #153e90);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.bggradient {
  background: linear-gradient(110deg, #a32e8c 0%, #672db5 50%, #a32e8c 100%);
}

.client-carousel .owl-dots {
  display: block !important;
  text-align: center;
  margin-top: 1rem;
}

.client-carousel .owl-dots .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #adb5bd;
  border-radius: 50%;
}

.client-carousel .owl-dots .owl-dot.active span {
  background: #212529;
}

/* animations for shapes */

.investigation-hero {
  min-height: 450px;
  background:
    radial-gradient(
      ellipse at 85% 15%,
      rgba(163, 46, 140, 0.42),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 15% 85%,
      rgba(103, 45, 181, 0.4),
      transparent 45%
    ),
    linear-gradient(120deg, #a32e8c 0%, #672db5 58%, #153e90 100%);
  isolation: isolate;
  overflow: hidden;
}

.hero-content {
  z-index: 2;
  display: flex;
  min-height: 450px;
  width: 100%;
}

.hero-eyebrow {
  color: #f1b8e4;
  letter-spacing: 0.12em;
}

.hero-button {
  color: #fff;
  background-color: #a32e8c;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.hero-button:hover,
.hero-button:focus {
  color: #fff;
  background-color: #872477;
  transform: translateY(-2px);
}

.hero-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Twinkling stars */
.star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.65);
  animation: twinkle 2.8s ease-in-out infinite;
}

.star-1 {
  top: 15%;
  left: 12%;
  animation-delay: 0s;
}
.star-2 {
  top: 26%;
  left: 48%;
  animation-delay: 0.8s;
}
.star-3 {
  top: 70%;
  left: 18%;
  animation-delay: 1.4s;
}
.star-4 {
  top: 18%;
  left: 82%;
  animation-delay: 0.5s;
}
.star-5 {
  top: 78%;
  left: 75%;
  animation-delay: 1.1s;
}
.star-6 {
  top: 48%;
  left: 91%;
  animation-delay: 1.8s;
}
.star-7 {
  top: 88%;
  left: 43%;
  animation-delay: 0.3s;
}
.star-8 {
  top: 40%;
  left: 7%;
  animation-delay: 1.6s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

/* Floating, rotating shapes */
.shape {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: float-rotate 14s ease-in-out infinite;
}

.shape-circle {
  width: 110px;
  height: 110px;
  top: 18%;
  right: 13%;
  border-radius: 50%;
}

.shape-square {
  width: 62px;
  height: 62px;
  bottom: 18%;
  right: 28%;
  animation-delay: -4s;
}

.shape-diamond {
  width: 38px;
  height: 38px;
  top: 64%;
  right: 9%;
  animation-delay: -8s;
}

@keyframes float-rotate {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-18px, -28px, 0) rotate(180deg);
  }
}

/* Flowing water-like lines */
.water-lines {
  position: absolute;
  width: 75%;
  height: 180px;
  right: -8%;
  bottom: 8%;
  opacity: 0.45;
  transform: rotate(-12deg);
}

.water-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 45px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: water-flow 7s ease-in-out infinite alternate;
}

.water-lines span:nth-child(1) {
  top: 0;
}
.water-lines span:nth-child(2) {
  top: 28px;
  animation-delay: -1.5s;
}
.water-lines span:nth-child(3) {
  top: 56px;
  animation-delay: -3s;
}
.water-lines span:nth-child(4) {
  top: 84px;
  animation-delay: -4.5s;
}

@keyframes water-flow {
  from {
    transform: translateX(-3%) scaleX(0.95);
  }
  to {
    transform: translateX(3%) scaleX(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .star,
  .shape,
  .water-lines span {
    animation: none;
  }
}

/* footer */
.site-footer {
  background-color: #153e90;
  color: #fff;
}

.site-footer h5 {
  color: #fff;
  margin-bottom: 1rem;
}

.site-footer .footer-brand,
.site-footer a:hover {
  color: #e52e71;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-text {
  color: rgba(255, 255, 255, 0.8);
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.25);
  margin: 2rem 0 1rem;
}

/* services */

.detail-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #153e90, #672db5 55%, #a32e8c);
}

.detail-icon .material-icons {
  font-size: 27px;
}

.process-number {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #153e90, #672db5 55%, #a32e8c);
}

.privacy-note {
  border-left: 4px solid #ff7a18;
}

.error-section {
  min-height: 68vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    110deg,
    rgba(21, 62, 144, 0.94),
    rgba(103, 45, 181, 0.86),
    rgba(163, 46, 140, 0.82)
  );
}

.error-code {
  font-size: clamp(7rem, 22vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.error-icon {
  font-size: 3rem;
  vertical-align: middle;
}