:root {
  --nd-title:
    "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --nd-body:
    "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ndr-red: #f97316; /* screenshot ke close */
  --ndr-text: #5f5f5f;
  --ndr-dark: #2b2b2b;

  --ndr-white: #ffffff;
  --ndr-black: #0b0b0b;
  --ndr-overlay: rgba(0, 0, 0, 0.45); /* full hero subtle shade */
  --ndr-panel: rgba(0, 0, 0, 0.55); /* dark box behind text */

  --nd-red: #f97316; /* maroon/red tone */
  --nd-red-dark: #f97316;
  --nd-text: #5f5f5f;
  --nd-title: #a63a37;
  --nd-line: #d9d9d9;
  --nd-strip-h: 120px;

  --nd-dark: #2f3438;
  --panel-bg: #f5f5f5;
  --card-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}
/* 
body{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--nd-text);
}



body{
  font-family: var(--nd-body);
} */

/* ABOUT HERO */
/* ---------- HERO ---------- */
.ndr-hero-cyber {
  margin-top: 0; /* header ke baad as-is */
}

.ndr-hero-bg {
  position: relative;
  min-height: 420px;
  width: 100%;
  background-image: url("./assets/Support Process/1cyber-security-network-.jpg"); /* replace */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* same: left side translucent box */
.ndr-hero-overlay {
  position: absolute;
  left: 6%;
  bottom: 18%;
  max-width: 760px;
  background: rgba(40, 40, 40, 0.45);
  padding: 22px 26px;
  border-radius: 2px;
}

.ndr-hero-title {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 300;
  /* letter-spacing: 1px; */
  font-size: 50px;
  line-height: 1.05;
  text-transform: uppercase;
}

.ndr-hero-subtitle {
  margin: 0;
  color: #fff;
  font-size: 24px;
  /* letter-spacing: 1px; */
  text-transform: uppercase;
  line-height: 1.4;
}

/* reveal animation */
.reveal-up {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .nd-about-hero__content {
    padding-bottom: 44px;
  }
}

/* ........... */
.nd-about-wrap {
  padding: 56px 0 20px;
}

/* left text */
.nd-about-wrap p {
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 22px;
  color: var(--nd-text);
}

.nd-inline-red {
  color: var(--nd-red);
  font-weight: 400;
}
.overline {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* red “Our Passion / Our Niche” lines (screenshot style) */
.nd-highlight-lines {
  margin: 40px 0 40px;
  font-size: 20px;
  line-height: 1.9;
  color: var(--nd-red);
}
.nd-highlight-lines .label {
  font-weight: 600;
}

/* “Our Three Uniques” list */
.nd-three-uniques {
  margin-top: 26px;
  color: var(--nd-red);
}
.nd-three-uniques .title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.nd-three-uniques ol {
  padding-left: 22px;
  margin: 0;
}
.nd-three-uniques ol li {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.8;
}
.nd-three-uniques ol li ol {
  margin-top: 8px;
}

/* ===== Sticky image column ===== */
.nd-sticky-col {
  position: relative;
}

/* This makes image “ruk jati hai” while text scrolls */
.nd-sticky-box {
  position: sticky;
  top: 110px; /* header ke neeche gap (aap apne header height ke hisaab se adjust kar sakte ho) */
  display: flex;
  justify-content: flex-end;
  padding-left: 18px;
}

.nd-core-values-img {
  width: min(360px, 100%);
  height: auto;
  display: block;
}

/* optional: slight smooth feeling on stick */
.nd-sticky-box.is-stuck {
  transform: translateY(0);
}

/* Responsive: mobile pe sticky band, image top pe aa jaye */
@media (max-width: 991.98px) {
  .nd-sticky-box {
    position: static;
    top: auto;
    justify-content: start;
    margin-top: 16px;
    padding-left: 0;
  }
  .nd-about-wrap p {
    font-size: 16px;
  }
  .nd-highlight-lines {
    font-size: 18px;
  }
  .nd-three-uniques .title {
    font-size: 20px;
  }
  .nd-three-uniques ol li {
    font-size: 16px;
  }
}

/* Demo next section just to show “sticky ends then next section appears” */
.nd-next-section {
  margin-top: 40px;
  padding: 80px 0;
  background: #f3f3f3;
  color: #555;
}
.nd-next-section h2 {
  font-family: Oswald, sans-serif;
  letter-spacing: 0.04em;
  color: #333;
}

/* Section spacing same vibe */
.about-sticky-section {
  background: #ffffff;
  position: relative;
}

/* Typography similar look */
.about-content p {
  font-size: 20px;
  line-height: 1.8;
  color: #6f6f6f;
  margin-bottom: 26px;
}

.about-red {
  color: var(--nd-red) !important;
  font-size: 20px;
  line-height: 1.8;
}

.about-subhead {
  color: var(--nd-red);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-list-title {
  color: var(--nd-red);
  font-weight: 700;
  font-size: 20px;
  margin: 16px 0 6px;
}

.about-list ol {
  margin: 0 0 10px 22px;
  color: --nd-dark;
  font-size: 18px;
  line-height: 1.7;
}

/* RIGHT IMAGE */
.sticky-image-wrap {
  position: relative; /* JS will use this container */
  min-height: 100%;
}

/* default normal */
.sticky-image {
  width: 360px; /* adjust to match your screenshot */
  max-width: 100%;
  margin-left: auto;
}

/* When section is active: make fixed */
.sticky-image.is-fixed {
  position: fixed;
  top: 140px; /* header ke neeche gap */
  right: calc((100vw - 1140px) / 2); /* container alignment for desktop */
  z-index: 5;
}

/* When section ends: lock at bottom inside section */
.sticky-image.is-locked {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0;
}

/* Responsive: container width changes, right offset simple */
@media (max-width: 1199.98px) {
  .sticky-image.is-fixed {
    right: 24px;
  }
}

@media (max-width: 991.98px) {
  /* Mobile: fixed behavior off */
  .sticky-image,
  .sticky-image.is-fixed,
  .sticky-image.is-locked {
    position: static !important;
    width: 100%;
    margin: 0;
  }
}

/* Base */

/* =========================
   ABOUT SECTION (fixed image)
========================= */
.about-fixed {
  background: #fff;
}

.about-content p {
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 22px;
}

.about-highlight {
  color: var(--nd-red);
  font-size: 18px;
  line-height: 1.9;
  margin-left: 52px; /* screenshot feel */
  max-width: 520px;
}

.about-highlight .hl-title {
  font-weight: 700;
}

.three-uniques {
  color: var(--nd-red);
  margin-left: 0;
}

.three-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--nd-red);
}

.outer-list {
  padding-left: 20px;
  margin: 0;
}

.outer-list > li {
  margin-bottom: 12px;
}

.outer-title {
  font-weight: 700;
}

.inner-list {
  padding-left: 22px;
  margin-top: 6px;
}

.inner-list li {
  margin-bottom: 6px;
}

.proven {
  color: var(--nd-red);
  font-size: 18px;
}

/* Right image box */
.about-media-wrap {
  position: relative;
  min-height: 760px; /* section me space ensure */
}

.about-media {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

.about-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* JS states */
.about-media.is-fixed {
  position: fixed;
  top: 110px; /* header ke baad spacing */
  right: 0;
  left: auto;
  z-index: 9;
}

.about-media.is-absolute {
  position: absolute;
  top: auto;
  bottom: 0; /* section end pe “ruk” jaye */
  right: 0;
}

/* Make fixed right aligned with container on large screens */
@media (min-width: 992px) {
  .about-media.is-fixed {
    right: calc((100vw - 960px) / 2); /* container width approx */
  }
}
@media (min-width: 1200px) {
  .about-media.is-fixed {
    right: calc((100vw - 1140px) / 2);
  }
}
@media (min-width: 1400px) {
  .about-media.is-fixed {
    right: calc((100vw - 1320px) / 2);
  }
}

/* On mobile disable fixed behavior */
@media (max-width: 991.98px) {
  .about-media-wrap {
    min-height: auto;
  }
  .about-media,
  .about-media.is-fixed,
  .about-media.is-absolute {
    position: static !important;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* =========================
   REVIEWS LIVE SECTION
========================= */
.reviews-live {
  background: #fff;
}

.reviews-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--nd-red);
  text-transform: uppercase;
}

.reviews-panel {
  max-width: 980px;
  background: var(--panel-bg);
  padding: 26px 22px 18px;
  border-radius: 2px;
}

.review-card {
  width: 70%;
  background: #fff;
  border-radius: 2px;
  box-shadow: var(--card-shadow);
  padding: 22px 26px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 0 auto 26px;
  min-height: 120px;
}

.review-left {
  width: 210px;
  flex: 0 0 210px;
}

.review-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--nd-dark);
  margin-bottom: 4px;
}

.review-sub {
  font-size: 14px;
  color: #6a747b;
  margin-bottom: 2px;
}

.review-date {
  font-size: 12px;
  color: #7c878f;
  margin-top: 12px;
}

.review-msg {
  font-size: 15px;
  color: #2e3b41;
  margin-top: 6px;
  line-height: 1.6;
}

.reviews-powered {
  text-align: center;
  font-size: 11px;
  color: #808a92;
  margin-top: 10px;
  padding-top: 8px;
}

/* responsive */
@media (max-width: 768px) {
  .reviews-title {
    font-size: 22px;
  }
  .review-card {
    flex-direction: column;
  }
  .review-left {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ===== NDR BAND ===== */
.ndr-band {
  position: relative;
  background: #6d6d6d; /* base grey */
  overflow: hidden;
  min-height: 120px;
}
.ndr-band__overlay {
  position: absolute;
  inset: 0;
  /* image overlay vibe (aap apni image set kar sakte ho) */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1600&q=60");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: 0.55;
  pointer-events: none;
}
.ndr-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ndr-max);
  padding: 28px 12px;
}
.ndr-band__text {
  font-family: "Oswald", system-ui, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 22px;
  color: #fff;
  line-height: 1.25;
}

/* Button style similar vibe */
.ndr-btn {
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 14px;
}
.ndr-btn--solid {
  background: var(--ndr-red);
  color: #fff;
  border: 1px solid var(--ndr-red);
}
.ndr-btn--solid:hover {
  filter: brightness(0.95);
  color: #fff;
}