/* =====================================================
   RANA TYPING
   Main Stylesheet
   ===================================================== */

:root {

  --bg: #f7f8f4;
  --surface: #ffffff;
  --surface-soft: #eef1e9;

  --text: #172018;
  --text-soft: #667066;

  --primary: #173d2b;
  --primary-light: #2f684b;

  --accent: #d7a84f;
  --accent-light: #f2dfb5;

  --border: #dfe4dc;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;

  --shadow: 0 20px 60px rgba(24, 45, 31, 0.10);

  --container: 1180px;

  --transition: 250ms ease;
}


/* =====================================================
   RESET
   ===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(92%, var(--container));
  margin-inline: auto;
}


/* =====================================================
   HEADER
   ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(247, 248, 244, 0.92);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(223, 228, 220, 0.7);
}

.nav-container {
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--primary);
  color: white;

  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-weight: 800;

  box-shadow: 0 8px 20px rgba(23, 61, 43, 0.2);
}

.brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1;
}

.brand-text strong {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.brand-text small {
  margin-top: 4px;

  color: var(--text-soft);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 27px;
}

.main-nav a {
  position: relative;

  color: #485249;

  font-size: 13px;
  font-weight: 600;

  transition: var(--transition);
}

.main-nav a:hover {
  color: var(--primary);
}

.main-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -7px;

  width: 0;
  height: 2px;

  background: var(--accent);

  transition: var(--transition);
}

.main-nav a:hover::after {
  width: 100%;
}

.nav-button {
  padding: 11px 19px;

  border-radius: 100px;

  background: var(--primary);
  color: white;

  font-size: 13px;
  font-weight: 700;

  transition: var(--transition);
}

.nav-button:hover {
  transform: translateY(-2px);
  background: var(--primary-light);
}

.menu-toggle {
  display: none;

  border: 0;
  background: transparent;

  width: 42px;
  height: 42px;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 24px;
  height: 2px;

  margin: 5px auto;

  background: var(--primary);

  transition: var(--transition);
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
  position: relative;
  overflow: hidden;

  padding: 100px 0 110px;
}

.hero-background {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(215, 168, 79, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(47, 104, 75, 0.10),
      transparent 30%
    );

  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;

  gap: 80px;

  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 7px 12px;

  border: 1px solid var(--border);
  border-radius: 100px;

  background: rgba(255,255,255,0.7);

  color: var(--primary);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--accent);
}

.hero h1 {
  max-width: 720px;

  margin-top: 25px;

  font-family: "Manrope", sans-serif;
  font-size: clamp(45px, 6vw, 76px);

  line-height: 1.02;
  letter-spacing: -0.055em;
}

.hero h1 span {
  display: block;
  color: var(--primary);
}

.hero-description {
  max-width: 620px;

  margin-top: 28px;

  color: var(--text-soft);

  font-size: 17px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 35px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 52px;

  padding: 0 22px;

  border-radius: 100px;

  font-size: 14px;
  font-weight: 700;

  transition: var(--transition);
}

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

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 61, 43, 0.2);
}

.btn-secondary {
  border: 1px solid var(--border);
  background: white;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;

  gap: 35px;

  margin-top: 55px;
}

.trust-item {
  display: flex;
  flex-direction: column;
}

.trust-item strong {
  font-family: "Manrope", sans-serif;
  color: var(--primary);
  font-size: 16px;
}

.trust-item span {
  margin-top: 3px;

  color: var(--text-soft);

  font-size: 11px;
}


/* HERO CARD */

.hero-card-wrap {
  position: relative;

  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-card {
  position: relative;

  width: min(100%, 430px);
  min-height: 500px;

  padding: 30px;

  border-radius: 35px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #1b4933,
      #0e2c1e
    );

  color: white;

  box-shadow: 0 35px 80px rgba(23, 61, 43, 0.25);
}

.hero-orb-mark {
  position: absolute;
  z-index: 1;
  top: -20px;
  right: -20px;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  color: #e8b74e;
  font-family: "Manrope", sans-serif;
  font-size: 116px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0 12px rgba(238, 185, 74, 0.88),
    0 0 30px rgba(238, 185, 74, 0.62),
    0 0 58px rgba(255, 70, 79, 0.36);
  animation: heroOrbHeartbeat 1.45s ease-in-out infinite;
  transition: none;
  pointer-events: none;
  user-select: none;
}

@keyframes heroOrbHeartbeat {
  0%, 100% {
    color: #e8b74e;
    text-shadow:
      0 0 12px rgba(238, 185, 74, 0.84),
      0 0 28px rgba(238, 185, 74, 0.56),
      0 0 48px rgba(255, 70, 79, 0.28);
    scale: 1;
  }
  42% {
    color: #ff5964;
    text-shadow:
      0 0 15px rgba(255, 89, 100, 0.95),
      0 0 34px rgba(255, 89, 100, 0.78),
      0 0 62px rgba(232, 183, 78, 0.42);
    scale: 1.12;
  }
  58% {
    color: #f2c35d;
    scale: 1.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb-mark {
    animation: none;
    transition: none;
  }
}

.hero-card::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  top: -100px;
  right: -100px;

  border-radius: 50%;

  background: rgba(215, 168, 79, 0.15);
}

.hero-card::after {
  content: "R";

  position: absolute;

  right: -30px;
  bottom: -90px;

  font-family: "Manrope", sans-serif;
  font-size: 300px;
  font-weight: 800;

  line-height: 1;

  color: rgba(255,255,255,0.035);
}

.card-top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mini-logo {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: var(--accent);
  color: var(--primary);

  font-family: "Manrope", sans-serif;
  font-weight: 800;
}

.hero-card-main {
  position: relative;
  z-index: 2;

  margin-top: 95px;
}

.small-label {
  color: var(--accent);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.hero-card h2 {
  margin-top: 15px;

  font-family: "Manrope", sans-serif;

  font-size: 60px;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.hero-card h2 em {
  color: var(--accent);
  font-style: normal;
}

.hero-card-main p {
  max-width: 280px;

  margin-top: 25px;

  color: rgba(255,255,255,0.68);

  font-size: 13px;
  line-height: 1.7;
}

.card-location {
  position: absolute;
  z-index: 2;

  left: 30px;
  bottom: 30px;

  color: rgba(255,255,255,0.8);

  font-size: 11px;
  line-height: 1.7;
}

.card-location span {
  color: var(--accent);
  margin-right: 5px;
}

.floating-badge {
  position: absolute;

  right: -5px;
  bottom: 45px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 16px;

  border: 1px solid var(--border);
  border-radius: 100px;

  background: white;

  color: var(--primary);

  box-shadow: var(--shadow);

  font-size: 12px;
  font-weight: 700;
}

.floating-badge span {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--accent-light);
}


/* =====================================================
   QUICK STRIP
   ===================================================== */

.quick-strip {
  border-block: 1px solid var(--border);
  background: white;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.quick-grid > div {
  display: grid;
  grid-template-columns: 40px 1fr;

  align-items: center;

  padding: 25px;

  border-right: 1px solid var(--border);
}

.quick-grid > div:last-child {
  border-right: 0;
}

.quick-icon {
  grid-row: span 2;

  color: var(--primary);
  font-size: 23px;
}

.quick-grid strong {
  font-size: 13px;
}

.quick-grid small {
  color: var(--text-soft);
  font-size: 10px;
}


/* =====================================================
   GENERAL SECTIONS
   ===================================================== */

.section {
  padding: 120px 0;
}

.section-label {
  display: inline-block;

  color: var(--primary);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.section-heading h2,
.center-heading h2 {
  margin-top: 15px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(35px, 4.2vw, 55px);

  line-height: 1.05;
  letter-spacing: -0.045em;
}

.section-heading h2 span,
.center-heading h2 span {
  color: var(--primary);
}

.center-heading {
  max-width: 720px;
  margin: 0 auto 65px;

  text-align: center;
}

.center-heading p {
  max-width: 600px;

  margin: 20px auto 0;

  color: var(--text-soft);
}


/* =====================================================
   ABOUT
   ===================================================== */

.about-section {
  background: white;
}

.two-column {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;

  gap: 100px;

  align-items: start;
}

.about-copy {
  max-width: 650px;
}

.about-copy p {
  color: var(--text-soft);
  margin-bottom: 18px;
}

.about-copy .large-text {
  color: var(--text);
  font-size: 21px;
  line-height: 1.6;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 18px;

  color: var(--primary);

  font-size: 13px;
  font-weight: 800;
}

.text-link span {
  transition: var(--transition);
}

.text-link:hover span {
  transform: translateX(5px);
}


/* =====================================================
   SERVICES
   ===================================================== */

.services-section {
  background: var(--bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 16px;
}

.service-card {
  position: relative;

  min-height: 280px;

  padding: 28px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: white;

  overflow: hidden;

  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-7px);

  border-color: rgba(47, 104, 75, 0.3);

  box-shadow: var(--shadow);
}

.service-number {
  position: absolute;

  top: 20px;
  right: 22px;

  color: #c6cdc5;

  font-size: 10px;
  font-weight: 800;
}

.service-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 35px;

  border-radius: 14px;

  background: var(--surface-soft);
  color: var(--primary);

  font-size: 21px;
}

.service-card h3 {
  font-family: "Manrope", sans-serif;

  font-size: 18px;
  line-height: 1.2;
}

.service-card p {
  margin-top: 12px;

  color: var(--text-soft);

  font-size: 12px;
  line-height: 1.7;
}

.service-arrow {
  position: absolute;

  right: 24px;
  bottom: 22px;

  color: var(--primary);

  font-size: 20px;

  transition: var(--transition);
}

.service-card:hover .service-arrow {
  transform: translate(4px, -4px);
}


/* =====================================================
   PROCESS
   ===================================================== */

.process-section {
  background: white;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;

  align-items: start;

  max-width: 1000px;
  margin: auto;
}

.process-step {
  text-align: center;
}

.process-circle {
  width: 70px;
  height: 70px;

  display: grid;
  place-items: center;

  margin: 0 auto 25px;

  border-radius: 50%;

  background: var(--primary);
  color: white;

  font-family: "Manrope", sans-serif;
  font-weight: 800;

  box-shadow: 0 12px 25px rgba(23, 61, 43, 0.18);
}

.process-step h3 {
  font-size: 16px;
}

.process-step p {
  margin-top: 10px;

  color: var(--text-soft);

  font-size: 12px;
}

.process-line {
  height: 1px;

  margin-top: 35px;

  background: var(--border);
}


/* =====================================================
   HIGHLIGHT
   ===================================================== */

.highlight-section {
  padding: 0 0 120px;

  background: white;
}

.highlight-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 55px 65px;

  border-radius: var(--radius-lg);

  background: var(--primary);
  color: white;

  overflow: hidden;
}

.highlight-box h2 {
  max-width: 700px;

  margin-top: 10px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.highlight-box h2 span {
  color: var(--accent);
}

.highlight-box .section-label {
  color: var(--accent);
}

.btn-light {
  flex-shrink: 0;

  background: white;
  color: var(--primary);
}

.btn-light:hover {
  transform: translateY(-3px);
}


/* =========================================
   PREMIUM RANA TYPING GALLERY
========================================= */

.premium-gallery {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  border-radius: 30px;
  background: #111;
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}


/* Slide */

.premium-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease,
    visibility 1.2s ease;

  z-index: 1;
}


/* Active slide */

.premium-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}


/* Image */

.premium-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #111;

  transform: scale(1);
  transition: transform 6s ease;
}


/* Slow cinematic zoom */

.premium-slide.active img {
  transform: scale(1);
}


/* Dark overlay */

.premium-slide::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.38) 45%,
      rgba(0, 0, 0, 0.05) 100%
    );

  z-index: 2;
}


/* Bottom gradient */

.premium-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.65),
      transparent
    );

  z-index: 2;
}


/* =========================================
   TEXT
========================================= */

.slide-content {
  position: absolute;
  left: 70px;
  bottom: 100px;

  max-width: 600px;

  color: white;

  z-index: 4;

  opacity: 0;
  transform: translateY(35px);

  transition:
    opacity 1s ease 0.35s,
    transform 1s ease 0.35s;
}


.premium-slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}


.slide-content span {
  display: inline-block;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;

  margin-bottom: 14px;

  opacity: 0.85;
}


.slide-content h3 {
  margin: 0 0 12px;

  font-size: clamp(28px, 4vw, 52px);

  line-height: 1.05;

  font-weight: 700;

  letter-spacing: -1px;
}


.slide-content p {
  margin: 0;

  font-size: 16px;

  opacity: 0.85;
}


/* =========================================
   ARROWS
========================================= */

.gallery-arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.35);

  background: rgba(0,0,0,0.25);

  color: white;

  font-size: 22px;

  cursor: pointer;

  z-index: 10;

  backdrop-filter: blur(10px);

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.gallery-arrow:hover {
  background: rgba(255,255,255,0.2);

  transform:
    translateY(-50%)
    scale(1.08);
}


.gallery-prev {
  left: 25px;
}


.gallery-next {
  right: 25px;
}


/* =========================================
   DOTS
========================================= */

.premium-gallery-dots {
  position: absolute;

  bottom: 34px;
  right: 55px;

  display: flex;

  gap: 8px;

  z-index: 10;
}


.gallery-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: none;

  border-radius: 50%;

  background: rgba(255,255,255,0.45);

  cursor: pointer;

  transition:
    width 0.35s ease,
    background 0.35s ease;
}


.gallery-dot.active {
  width: 30px;

  border-radius: 20px;

  background: white;
}


/* =========================================
   PROGRESS BAR
========================================= */

.gallery-progress {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: rgba(255,255,255,0.18);

  z-index: 12;
}


.gallery-progress-bar {
  width: 0%;
  height: 100%;

  background: white;

  animation: galleryProgress 5s linear infinite;
}


@keyframes galleryProgress {

  from {
    width: 0%;
  }

  to {
    width: 100%;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .premium-gallery {
    height: 480px;
    border-radius: 22px;
  }


  .slide-content {
    left: 28px;
    right: 28px;
    bottom: 80px;
  }


  .slide-content h3 {
    font-size: 30px;
  }


  .slide-content p {
    font-size: 14px;
  }


  .gallery-arrow {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }


  .gallery-prev {
    left: 15px;
  }


  .gallery-next {
    right: 15px;
  }


  .premium-gallery-dots {
    left: 50%;
    right: auto;

    transform: translateX(-50%);

    bottom: 25px;
  }

}

/* =====================================================
   FAQ
   ===================================================== */

.faq-section {
  background: white;
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;

  gap: 100px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 22px 0;

  border: 0;

  background: transparent;

  text-align: left;

  color: var(--text);

  cursor: pointer;

  font-size: 14px;
  font-weight: 700;
}

.faq-plus {
  font-size: 22px;
  font-weight: 400;

  transition: var(--transition);
}

.faq-item.active .faq-plus {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 300ms ease;
}

.faq-answer p {
  overflow: hidden;

  color: var(--text-soft);

  font-size: 13px;

  padding: 0;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
  padding-bottom: 22px;
}


/* =====================================================
   CONTACT
   ===================================================== */

.contact-section {
  padding: 110px 0;

  background: var(--surface-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;

  gap: 90px;

  align-items: center;
}

.contact-content h2 {
  margin-top: 15px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(40px, 5vw, 62px);

  line-height: 1;

  letter-spacing: -0.05em;
}

.contact-content h2 span {
  display: block;

  color: var(--primary);
}

.contact-content > p {
  max-width: 600px;

  margin-top: 25px;

  color: var(--text-soft);
}

.contact-details {
  margin-top: 40px;

  display: grid;

  gap: 22px;
}

.contact-detail {
  display: flex;
  align-items: flex-start;

  gap: 15px;
}

.contact-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: white;

  color: var(--primary);
}

.contact-detail div {
  display: flex;
  flex-direction: column;
}

.contact-detail small {
  color: var(--text-soft);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.contact-detail strong {
  margin-top: 3px;

  font-size: 13px;
  line-height: 1.6;
}

.contact-card {
  padding: 38px;

  border-radius: var(--radius-lg);

  background: var(--primary);
  color: white;

  box-shadow: 0 30px 60px rgba(23, 61, 43, 0.2);
}

.contact-card-top {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.contact-card h3 {
  margin-top: 65px;

  font-family: "Manrope", sans-serif;

  font-size: 38px;
  line-height: 1;
}

.contact-card > p {
  margin-top: 15px;

  color: rgba(255,255,255,0.7);

  font-size: 13px;
}

.contact-button {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 25px;
  padding: 15px 18px;

  border-radius: 12px;

  background: white;
  color: var(--primary);

  font-size: 12px;
  font-weight: 800;

  transition: var(--transition);
}

.contact-button:hover {
  transform: translateY(-2px);
}

.whatsapp-button {
  background: var(--accent);
}


/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  padding: 70px 0 25px;

  background: #102b1e;
  color: white;
}

.footer-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));

  gap: 30px;
}

.brand-footer .brand-text strong {
  color: white;
}

.footer-brand > p {
  max-width: 270px;

  margin-top: 20px;

  color: rgba(255,255,255,0.55);

  font-size: 12px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links strong {
  margin-bottom: 10px;

  color: var(--accent);

  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links a,
.footer-links p {
  color: rgba(255,255,255,0.6);

  font-size: 12px;

  transition: var(--transition);
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin-top: 60px;
  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,0.1);

  color: rgba(255,255,255,0.45);

  font-size: 10px;
}

.footer-bottom a:hover {
  color: white;
}


/* =====================================================
   MOBILE CTA
   ===================================================== */

.mobile-cta {
  display: none;
}


/* =====================================================
   SCROLL REVEAL
   ===================================================== */

.reveal {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

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


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1050px) {

  .main-nav {
    gap: 17px;
  }

  .hero-grid {
    gap: 45px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-grid > div:nth-child(2) {
    border-right: 0;
  }

  .quick-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 820px) {

  .site-header {
    position: sticky;
  }

  .menu-toggle {
    display: block;
    order: 3;
  }

  .nav-button {
    display: none;
  }

  .main-nav {
    position: absolute;

    top: 78px;
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    padding: 10px 4% 20px;

    background: rgba(247,248,244,0.98);

    border-bottom: 1px solid var(--border);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition: var(--transition);
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav a {
    padding: 13px 0;

    border-bottom: 1px solid var(--border);
  }

  .hero {
    padding: 75px 0 80px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-card-wrap {
    min-height: 450px;
  }

  .hero-card {
    min-height: 440px;
  }

  .hero-card-main {
    margin-top: 70px;
  }

  .two-column,
  .faq-layout,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .process-line {
    width: 1px;
    height: 35px;

    margin: -10px auto;
  }

  .highlight-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
  }

  .gallery-large {
    grid-row: auto;
  }

}


@media (max-width: 560px) {

  .container {
    width: min(91%, 1180px);
  }

  .nav-container {
    min-height: 70px;
  }

  .main-nav {
    top: 70px;
  }

  .hero {
    padding: 55px 0 70px;
  }

  .hero h1 {
    font-size: 43px;
  }

  .hero-description {
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-trust {
    gap: 20px;
    margin-top: 40px;
  }

  .hero-card-wrap {
    min-height: 400px;
  }

  .hero-card {
    min-height: 390px;
    padding: 25px;
  }

  .hero-card h2 {
    font-size: 50px;
  }

  .floating-badge {
    right: 0;
    bottom: 20px;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .quick-grid > div:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 80px 0;
  }

  .section-heading h2,
  .center-heading h2 {
    font-size: 36px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 245px;
  }

  .highlight-section {
    padding-bottom: 80px;
  }

  .highlight-box {
    padding: 38px 28px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 220px);
  }

  .contact-section {
    padding: 80px 0;
  }

  .contact-card {
    padding: 30px;
  }

  .contact-card h3 {
    margin-top: 45px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .mobile-cta {
    position: fixed;

    z-index: 1500;

    left: 10px;
    right: 10px;
    bottom: 10px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 5px;

    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 15px;

    background: rgba(16,43,30,0.96);

    box-shadow: 0 15px 40px rgba(0,0,0,0.18);

    backdrop-filter: blur(15px);
  }

  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px;

    border-radius: 10px;

    color: white;

    font-size: 11px;
    font-weight: 800;
  }

  .mobile-cta a:last-child {
    background: var(--accent);
    color: var(--primary);
  }

  .footer {
    padding-bottom: 100px;
  }

}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* =========================================
   AVAILABLE CSC & DIGITAL SERVICES
========================================= */

.csc-section {
  background: #f7f7f8;
}


/* CSC ID */

.csc-id-box {
  display: inline-flex;

  align-items: center;
  gap: 14px;

  margin-top: 22px;
  padding: 12px 20px;

  border-radius: 14px;

  background: #111;
  color: white;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.15);
}


.csc-id-box span {
  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.5px;

  opacity: 0.7;

  text-transform: uppercase;
}


.csc-id-box strong {
  font-size: 18px;

  letter-spacing: 1px;

  font-weight: 700;
}


/* CSC Grid */

.csc-services-grid {
  margin-top: 45px;
}


/* Service Card */

.csc-services-grid .service-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}


.csc-services-grid .service-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.10);
}


/* Service Icon */

.csc-services-grid .service-icon {
  font-size: 30px;

  margin-bottom: 15px;
}


/* Bottom Note */

.csc-note {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  margin-top: 40px;

  padding: 22px 25px;

  border-radius: 18px;

  background: white;

  border: 1px solid rgba(0,0,0,0.08);
}


.csc-note strong {
  font-size: 16px;
}


.csc-note span {
  font-size: 14px;

  color: #666;

  line-height: 1.5;
}


/* Mobile */

@media (max-width: 768px) {

  .csc-id-box {
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    padding: 14px 18px;
  }


  .csc-id-box strong {
    font-size: 17px;
  }


  .csc-note {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }

}


.map-container {
  width: 100%;
  margin-top: 20px;
}

.map-container h3 {
  margin-bottom: 12px;
}

.map-container iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .map-container iframe {
    height: 250px;
  }
}


.visitor-counter {
  text-align: center;
  padding: 25px 15px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
}

.visitor-counter p {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 12px;
}


.back-to-top {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}


/* =====================================================
   RANA TYPING — PREMIUM CORPORATE REDESIGN
   Add this block at the VERY END of styles.css
   ===================================================== */

:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #edf2f8;
  --text: #18263a;
  --text-soft: #64748b;
  --primary: #17365d;
  --primary-light: #28568a;
  --accent: #c49a48;
  --accent-light: #f5e8c9;
  --border: #dce4ee;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 16px 45px rgba(23, 54, 93, 0.10);
  --transition: 240ms ease;
}

/* General appearance */

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
}

::selection {
  background: var(--primary);
  color: #fff;
}

section[id] {
  scroll-margin-top: 90px;
}

.section-label {
  color: var(--primary-light);
}

/* Header and navigation */

.site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(220, 228, 238, 0.9);
  box-shadow: 0 4px 22px rgba(23, 54, 93, 0.04);
}

.brand-mark {
  background: linear-gradient(145deg, #234d7b, #102641);
  box-shadow: 0 8px 20px rgba(23, 54, 93, 0.20);
}

.main-nav a {
  color: #40516a;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--primary);
}

.main-nav a::after {
  background: var(--accent);
}

.nav-button,
.btn-primary {
  background: linear-gradient(135deg, #234d7b, #142e4e);
  box-shadow: 0 7px 18px rgba(23, 54, 93, 0.12);
}

.nav-button:hover,
.btn-primary:hover {
  background: var(--primary-light);
}

/* Hero section */

.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f3f6fb 65%, #edf2f8 100%);
}

.hero-background {
  background:
    radial-gradient(circle at 82% 20%,
      rgba(196, 154, 72, 0.17), transparent 28%),
    radial-gradient(circle at 12% 80%,
      rgba(40, 86, 138, 0.11), transparent 32%);
}

.eyebrow {
  border-color: #d8e2ef;
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary);
}

.eyebrow-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(196, 154, 72, 0.15);
}

.hero h1 span {
  color: var(--primary);
}

.hero-card {
  background: linear-gradient(145deg, #234d7b 0%, #17365d 55%, #102641 100%);
  box-shadow: 0 30px 70px rgba(23, 54, 93, 0.22);
}

.hero-card::before {
  background: rgba(196, 154, 72, 0.19);
}

.hero-card h2 em,
.small-label {
  color: #e5c47d;
}

.mini-logo {
  background: var(--accent);
  color: #142e4e;
}

.floating-badge {
  border-color: #e5eaf1;
  box-shadow: 0 14px 35px rgba(23, 54, 93, 0.14);
  animation: rt-float 4s ease-in-out infinite;
}

.floating-badge span {
  background: var(--accent-light);
  color: var(--primary);
}

@keyframes rt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Quick services strip */

.quick-strip {
  background: #fff;
  border-color: var(--border);
}

.quick-icon {
  color: var(--primary-light);
}

.quick-grid strong {
  color: var(--primary);
}

/* Section headings */

.section-heading h2 span,
.center-heading h2 span,
.contact-content h2 span {
  color: var(--primary-light);
}

/* Service cards — main services and CSC */

.services-section,
.csc-section {
  background: var(--bg);
}

.service-card {
  border-color: var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(23, 54, 93, 0.035);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(196, 154, 72, 0.8);
  box-shadow: 0 18px 38px rgba(23, 54, 93, 0.11);
}

.service-number {
  color: #a0aec0;
}

.service-icon {
  background: #edf2f8;
  color: var(--primary);
  border-radius: 14px;
}

.service-card h3 {
  color: var(--primary);
}

.service-card p {
  color: var(--text-soft);
}

.service-arrow {
  color: var(--accent);
}

.csc-id-box {
  background: linear-gradient(135deg, #17365d, #102641);
  border: 1px solid rgba(196, 154, 72, 0.45);
  border-radius: 14px;
}

.csc-services-grid .service-card:hover {
  box-shadow: 0 18px 38px rgba(23, 54, 93, 0.11);
}

.csc-note {
  border-color: var(--border);
  box-shadow: 0 8px 25px rgba(23, 54, 93, 0.04);
}

/* Process section */

.process-circle {
  background: linear-gradient(145deg, #28568a, #17365d);
  box-shadow: 0 12px 25px rgba(23, 54, 93, 0.17);
}

.process-line {
  background: #cbd6e4;
}

/* Highlight banner */

.highlight-box {
  background: linear-gradient(120deg, #17365d, #102641);
  box-shadow: 0 22px 50px rgba(23, 54, 93, 0.13);
}

.highlight-box h2 span {
  color: #e5c47d;
}

.highlight-box .section-label {
  color: #e5c47d;
}

.btn-light {
  background: #fff;
  color: var(--primary);
}

.btn-light:hover {
  background: var(--accent-light);
}

/* Gallery */

.premium-gallery {
  border: 1px solid rgba(23, 54, 93, 0.12);
  box-shadow: 0 25px 65px rgba(23, 54, 93, 0.15);
}

.gallery-arrow {
  background: rgba(16, 38, 65, 0.48);
  border-color: rgba(255, 255, 255, 0.55);
}

.gallery-arrow:hover {
  background: rgba(196, 154, 72, 0.85);
  color: #102641;
}

.gallery-dot.active,
.gallery-progress-bar {
  background: #e5c47d;
}

/* FAQ */

.faq-section {
  background: #fff;
}

.faq-list {
  border-top-color: var(--border);
}

.faq-item {
  border-bottom-color: var(--border);
}

.faq-question {
  color: var(--primary);
}

.faq-question:hover {
  color: var(--primary-light);
}

.faq-plus {
  color: var(--accent);
}

/* Contact */

.contact-section {
  background: linear-gradient(135deg, #edf2f8, #f7f9fc);
}

.contact-icon {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 5px 16px rgba(23, 54, 93, 0.06);
}

.contact-card {
  background: linear-gradient(145deg, #234d7b, #102641);
  box-shadow: 0 24px 55px rgba(23, 54, 93, 0.18);
}

.contact-card .mini-logo {
  background: var(--accent);
}

.contact-button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 220ms ease, background 220ms ease;
}

.contact-button:hover {
  transform: translateY(-2px);
  background: var(--accent-light);
}

.whatsapp-button {
  background: #d8b568;
  color: #102641;
}

.map-container h3 {
  color: #fff;
}

.map-container iframe {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Footer */

.footer {
  background: linear-gradient(135deg, #102641, #0b1b2e);
}

.footer-links strong {
  color: #e5c47d;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.back-to-top {
  border-color: rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  padding: 10px 17px;
  color: #fff;
}

.back-to-top:hover {
  border-color: var(--accent);
  color: #e5c47d;
}

/* Visitor counter */

.visitor-counter {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.visitor-counter p {
  color: rgba(255, 255, 255, 0.72);
}

/* Mobile navigation */

@media (max-width: 820px) {
  .main-nav {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 16px 25px rgba(23, 54, 93, 0.08);
  }

  .main-nav a {
    border-bottom-color: var(--border);
  }
}

/* Keyboard focus and reduced-motion accessibility */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.dropdown{
  position: relative;
}

.dropdown-btn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #40516a;
}

.dropdown-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  background: white;

  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  overflow: hidden;
  z-index: 999;
}

.dropdown-menu.show{
  display: block;
}

.dropdown-menu a{
  display: block;
  padding: 12px 15px;
}

.dropdown-menu a:hover{
  background: #f5f5f5;
}

.footer-links a {
  display: block;
  margin: 8px 0;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #e5c47d;
  padding-left: 5px;
}

/* ================================
   HERO CARD MOBILE OVERLAP FIX
================================ */

.hero-card {
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.hero-card-main {
  min-width: 0;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

.hero-card-main p {
  position: static;
  height: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.7;
  margin: 16px 0 20px;
}

.card-location {
  position: static;
  height: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.8;
  margin-top: 20px;
}

/* ================================
   ANDROID APP DOWNLOAD SECTION
================================ */

.app-download-section {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 16px 96px;
  text-align: center;
}

.app-download-content {
  max-width: 600px;
  margin: 0 auto;
}

.app-download-content h2 {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.app-download-content p {
  line-height: 1.7;
  margin: 12px 0 20px;
}

.app-download-button {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
  border-radius: 8px;
  background: #15803d;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.app-download-button:hover {
  background: #166534;
}

/* ================================
   SMALL SCREEN ADJUSTMENTS
================================ */

@media (max-width: 600px) {
  .hero-card {
    width: 100%;
    max-width: 100%;
  }

  .hero-card-main p,
  .card-location {
    font-size: 14px;
    line-height: 1.8;
  }

  .app-download-section {
    padding: 24px 16px 96px;
  }

  .app-download-button {
    padding: 14px 18px;
  }
}
.slide-content{
    display:none !important;
}
/* Header language switch */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-toggle {
  padding: 7px 10px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #ffffff;
  color: #163b66;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.language-toggle:hover {
  background: #edf4ff;
}

@media (max-width: 768px) {
  .header-actions {
    gap: 6px;
  }

  .language-toggle {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* Shared bilingual switch on secondary pages */
.language-toggle-floating {
  position: fixed;
  z-index: 10000;
  top: 16px;
  right: 16px;
  box-shadow: 0 5px 18px rgba(23, 54, 93, 0.18);
}
.secondary-page-back {
  margin: 72px 16px 18px;
}
.secondary-page-back a {
  color: #234d7b;
  font-weight: 700;
}
body:has(.secondary-page-back) {
  padding: 0 18px 40px;
  line-height: 1.75;
}
body:has(.secondary-page-back) h1,
body:has(.secondary-page-back) h2 {
  color: #17365d;
}


/* ================================
   ACHIEVEMENTS CAROUSEL
================================ */
.achievements-section {
  overflow: hidden;
  background: #fff;
}

.achievements-section .center-heading {
  margin-bottom: 28px;
}

.achievements-section .center-heading h2 {
  color: var(--primary);
}

.achievement-gallery {
  width: 100%;
}

.achievement-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1.85;
  min-height: 380px;
  overflow: hidden;
  touch-action: pan-y;
}

.achievement-track {
  position: absolute;
  inset: 0;
}

.achievement-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 70%;
  aspect-ratio: 1.78;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #edf2f6;
  box-shadow: 0 10px 28px rgba(21, 46, 68, .13);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.38);
  filter: saturate(.65);
  will-change: transform, opacity;
  transition: transform .9s cubic-bezier(.22,.72,.2,1), opacity .9s ease, filter .9s ease, box-shadow .9s ease;
  cursor: zoom-in;
}

.achievement-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.achievement-card.is-active {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: none;
  box-shadow: 0 16px 42px rgba(18, 40, 58, .24);
}

.achievement-card.is-prev,
.achievement-card.is-next {
  z-index: 1;
  opacity: .68;
  filter: saturate(.76);
}

.achievement-card.is-prev {
  transform: translate(-100%, -47%) scale(.78);
}

.achievement-card.is-next {
  transform: translate(0, -53%) scale(.78);
}

.achievement-controls {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 15%;
  right: 15%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.achievement-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-family: inherit;\n  font-size: 34px;\n  line-height: 1;
  box-shadow: 0 3px 15px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .18s, background .18s, color .18s;
}

.achievement-arrow:hover {
  transform: scale(1.08);
  background: var(--accent);
  color: #102641;
}

@media (max-width: 650px) {
  .achievements-section .center-heading { margin-bottom: 18px; }
  .achievement-viewport { aspect-ratio: 1.2; min-height: 0; }
  .achievement-card { width: 82%; aspect-ratio: 1.23; }
  .achievement-card.is-prev { transform: translate(-100%, -47%) scale(.78); }
  .achievement-card.is-next { transform: translate(0, -53%) scale(.78); }
  .achievement-controls { left: 10%; right: 10%; }
  .achievement-arrow { width: 40px; height: 40px; font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-card, .achievement-arrow { transition: none; }
}


/* Compact transition from About to Achievements */
.about-section {
  padding-bottom: 56px;
}

.achievements-section {
  padding-top: 56px;
}

.achievements-section .center-heading {
  margin-bottom: 18px;
}

.achievements-section .center-heading p {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .about-section { padding-bottom: 40px; }
  .achievements-section { padding-top: 40px; }
}


/* =====================================================
   LEGAL REFERENCE LIBRARY + GOLDEN GLOWING MARQUEE
   Keeps the existing Rana Typing theme colors unchanged.
   ===================================================== */
.legal-reference-section {
  background: var(--bg);
  overflow: hidden;
}
.legal-reference-section .center-heading { margin-bottom: 30px; }
.legal-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.legal-reference-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.legal-reference-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 22px 50px rgba(24, 45, 31, .15);
}
.legal-reference-photo {
  position: relative;
  height: 175px;
  overflow: hidden;
  background: var(--surface-soft);
}
.legal-reference-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}
.legal-reference-card:hover .legal-reference-photo img { transform: scale(1.045); }
.legal-reference-photo > span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(23, 61, 43, .92);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.legal-reference-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 19px;
}
.legal-reference-copy h3 {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.4;
}
.legal-reference-copy p {
  margin: 0 0 17px;
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.6;
}
.legal-reference-link {
  margin-top: auto;
  color: var(--primary);
  font-size: .86rem;
  font-weight: 800;
}
.legal-reference-card:hover .legal-reference-link { color: var(--primary-light); }
.legal-reference-note {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--text-soft);
  font-size: .83rem;
  text-align: center;
}
.golden-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid #9b741d;
  background: linear-gradient(180deg, #222 0%, #151515 100%);
}
.golden-marquee-track {
  display: flex;
  width: max-content;
  animation: rana-golden-marquee 36s linear infinite;
  will-change: transform;
}
.golden-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(32px, 4.5vw, 76px);
  padding: 18px clamp(22px, 3vw, 52px);
  color: #f3ce72;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 0 5px #ffe089, 0 0 13px #d29a22, 0 0 24px #a66f12;
}
.golden-marquee-group span { color: #f3ce72; }
@keyframes rana-golden-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 1000px) {
  .legal-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .legal-reference-grid { grid-template-columns: 1fr; gap: 16px; }
  .legal-reference-photo { height: 210px; }
  .legal-reference-copy { padding: 17px; }
  .golden-marquee-group { gap: 26px; padding: 15px 20px; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .golden-marquee-track { animation-duration: 60s; }
}


/* =========================================
   SERVICES / CSC / EXTRA WORK — SLOW PHOTO MARQUEES
   Uses existing theme colours to preserve the website design.
========================================= */
.service-category {
  margin-top: 54px;
  min-width: 0;
}
.service-category-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.service-category-heading h3 {
  margin-top: 5px;
  color: var(--primary);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.2;
}
.service-category-heading p {
  max-width: 660px;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 13px;
}
.service-csc-id {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.service-csc-id span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.service-csc-id strong {
  color: var(--primary);
  font-size: 16px;
  letter-spacing: .04em;
}
.service-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 2px 24px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
}
.service-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: serviceMarqueeMove var(--service-marquee-duration, 85s) linear infinite;
}
.service-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 18px;
  padding-right: 18px;
}
.service-photo-card {
  display: flex;
  flex: 0 0 270px;
  flex-direction: column;
  min-height: 365px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.service-photo-card:hover {
  transform: translateY(-4px);
}
.service-photo {
  display: block;
  width: 100%;
  height: 158px;
  flex: 0 0 158px;
  object-fit: cover;
  background: var(--surface-soft);
}
.service-photo-content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 18px 16px;
}
.service-photo-content .service-number {
  top: 12px;
  right: 14px;
  color: var(--text-soft);
}
.service-photo-content h3 {
  max-width: 90%;
  font-size: 16px;
  line-height: 1.35;
}
.service-photo-content p {
  margin-top: 9px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}
.service-card-link:hover {
  color: var(--primary-light);
}
.service-availability-note {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  text-align: center;
}
@keyframes serviceMarqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.service-marquee:hover .service-marquee-track,
.service-marquee:focus-within .service-marquee-track {
  animation-play-state: paused;
}
@media (max-width: 768px) {
  .service-category { margin-top: 38px; }
  .service-category-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .service-csc-id { align-self: flex-start; }
  .service-photo-card { flex-basis: 235px; min-height: 350px; }
  .service-photo { height: 138px; flex-basis: 138px; }
  .service-marquee-group { gap: 13px; padding-right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-marquee-track { animation: none; transform: none; }
  .service-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .service-marquee-track { width: max-content; }
}


/* Requested alternating directions: Services left, CSC right, Extra Work left. */
.service-marquee[data-direction="right"] .service-marquee-track {
  animation-direction: reverse;
}
.service-marquee[data-direction="left"] .service-marquee-track {
  animation-direction: normal;
}
.service-photo-card {
  cursor: pointer;
}
.service-photo-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.service-detail-dialog {
  width: min(92vw, 520px);
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(24px, 5vw, 36px);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.service-detail-dialog::backdrop {
  background: rgba(10, 18, 14, .66);
  backdrop-filter: blur(4px);
}
.service-detail-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 30px;
  cursor: pointer;
}
.service-detail-kicker {
  display: block;
  margin: 0 24px 10px 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.service-detail-title {
  margin: 0 0 14px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.25;
}
.service-detail-description {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.75;
}
.service-detail-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}
.service-detail-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--primary);
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.service-detail-call:hover { transform: translateY(-2px); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .service-marquee[data-direction="right"] .service-marquee-track { animation-direction: normal; }
}


/* Small, responsive photo preview for Achievements and the main gallery. */
.photo-viewer-dialog {
  position: fixed;
  width: min(88vw, 760px);
  max-width: 760px;
  max-height: 86dvh;
  padding: 34px 14px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  margin: auto;
  overflow: hidden;
  background: #101411;
  color: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
}
.photo-viewer-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo-viewer-dialog::backdrop {
  background: rgba(7,12,9,.78);
  backdrop-filter: blur(4px);
}
.photo-viewer-dialog img {
  display: block;
  width: 100%;
  height: min(68dvh, 620px);
  object-fit: contain;
  border-radius: 8px;
}
.photo-viewer-close {
  position: absolute;
  top: 3px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.photo-viewer-caption {
  max-width: 100%;
  padding: 8px 8px 0;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  text-align: center;
}
.achievement-card,
.premium-gallery .premium-slide img {
  cursor: zoom-in;
}
.premium-gallery .premium-slide img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}
@media (max-width: 600px) {
  .photo-viewer-dialog {
    width: 94vw;
    max-width: 94vw;
    max-height: 82dvh;
    padding: 38px 8px 8px;
    border-radius: 12px;
  }
  .photo-viewer-dialog img {
    height: 66dvh;
    max-height: 66dvh;
  }
}



/* SECURE UPI PAYMENT */
.payment-section {
  padding-block: clamp(36px, 5vw, 62px);
  background: var(--surface-soft);
}
.payment-panel {
  display: grid;
  grid-template-areas: "heading heading" "copy qr";
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: 16px clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.payment-heading { grid-area: heading; }
.payment-heading .section-label { color: var(--accent-light); }
.payment-heading h2 {
  margin-top: 5px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.65rem);
  line-height: 1.12;
}
.payment-copy { grid-area: copy; min-width: 0; }
.payment-upi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px dashed rgba(255,255,255,.82);
  border-radius: 6px;
  background: rgba(0,0,0,.13);
  text-align: center;
}
.payment-upi span { color: rgba(255,255,255,.8); font-weight: 600; }
.payment-upi strong {
  overflow-wrap: anywhere;
  color: var(--accent-light);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  letter-spacing: .015em;
}
.upi-payment-form { display: grid; gap: 11px; }
.payment-amount-input {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--primary);
}
.payment-amount-input:focus-within {
  outline: 3px solid rgba(215,168,79,.42);
  outline-offset: 2px;
}
.payment-amount-input > span { font-size: 1.15rem; font-weight: 800; }
.payment-amount-input input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}
.payment-amount-input input::placeholder { color: var(--text-soft); opacity: 1; }
.payment-button {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #172018;
  font: inherit;
  font-weight: 800;
  letter-spacing: .035em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.payment-button:hover { transform: translateY(-1px); background: var(--accent-light); }
.payment-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.payment-note {
  max-width: 500px;
  margin: 11px auto 0;
  color: rgba(255,255,255,.76);
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}
.payment-qr-card {
  grid-area: qr;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.payment-qr {
  width: auto;
  max-width: 100%;
  height: min(340px, 38vw);
  min-height: 260px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .payment-section { padding-block: 36px; }
  .payment-panel {
    grid-template-areas: "heading" "qr" "copy";
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 21px 18px;
    border-radius: var(--radius);
  }
  .payment-heading h2 { font-size: 2rem; }
  .payment-qr-card { max-width: 330px; margin-inline: auto; }
  .payment-qr { height: 340px; min-height: 0; max-height: 55vh; }
  .payment-note { font-size: .76rem; }
}



/* Floating 3D back-to-top control */
.back-to-top {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(20px, 3vh, 30px); z-index: 1200;
  display: grid; width: 58px; height: 58px; place-items: center; padding: 0;
  border: 1px solid rgba(255,255,255,.72); border-radius: 18px;
  background: linear-gradient(145deg, #4277ad 0%, #17365d 62%, #102846 100%); color: #fff;
  box-shadow: 0 6px 0 #0c2340, 0 12px 22px rgba(14,37,67,.32), inset 0 1px 1px rgba(255,255,255,.42);
  cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.back-to-top svg { width: 29px; height: 29px; fill: currentColor; filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.back-to-top:hover { transform: translateY(-3px); filter: brightness(1.08); }
.back-to-top:active { transform: translateY(4px); box-shadow: 0 2px 0 #0c2340, 0 5px 12px rgba(14,37,67,.3), inset 0 1px 1px rgba(255,255,255,.42); }
.back-to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 760px) {
  .back-to-top { right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 16px; }
  .back-to-top svg { width: 26px; height: 26px; }
}
.legal-reference-grid > .legal-reference-card { min-width: 0; appearance: none; font: inherit; text-align: left; cursor: pointer; }
.legal-reference-card[aria-current="true"] { outline: 3px solid var(--accent); outline-offset: 3px; }
.legal-reference-copy.act-copy h3 { margin: 0 0 8px; }
.legal-reference-copy.act-copy h3 strong { font: inherit; }
.act-card-meta { display: block; margin: 9px 0 12px; color: var(--text-soft); font-size: .72rem; line-height: 1.45; }
.act-reader-card { width: 100%; min-width: 0; margin: 30px 0 22px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.act-reader-empty, .act-reader-message, .act-reader-offline { min-height: 380px; padding: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; color: var(--text-soft); }
.act-reader-empty .material, .act-reader-message .material { font-size: 2.4rem; color: var(--primary-light); }
.act-reader-empty p, .act-reader-message p, .act-reader-offline p { max-width: 720px; margin: 0; color: var(--text); font-weight: 700; font-size: clamp(1rem, 2vw, 1.22rem); }
.act-reader-empty small { max-width: 650px; font-size: .9rem; line-height: 1.7; }
.act-reader-card [hidden] { display: none !important; }
.act-reader-toolbar { padding: 14px 18px; display: grid; gap: 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.act-reader-titlebar, .act-reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap; }
.act-reader-titlebar h3 { margin: 0; color: var(--text); font-family: "Manrope", sans-serif; font-size: 1rem; line-height: 1.4; }
.act-page-control { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: .82rem; }
.act-page-control input { width: 68px; height: 36px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; font: 600 .9rem "Inter", sans-serif; }
.reader-control, .reader-download { min-height: 38px; padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--primary); font: 700 .8rem "Inter", sans-serif; cursor: pointer; }
.reader-control:hover, .reader-download:hover { border-color: var(--primary-light); background: var(--surface-soft); }
.reader-control:disabled { opacity: .45; cursor: default; }
.reader-zoom { min-width: 42px; }
.reader-zoom-value { min-width: 44px; color: var(--text-soft); font-size: .78rem; text-align: center; }
.reader-download { margin-left: auto; text-decoration: none; }
.act-pdf-viewport { width: 100%; height: min(86vh, 1120px); min-height: 680px; overflow: auto; overscroll-behavior: contain; background: #e9edf2; padding: 18px; }
.act-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.act-pdf-page { position: relative; flex: none; margin: 0 auto; background: #fff; box-shadow: 0 3px 14px rgba(20,35,53,.18); }
.act-pdf-page canvas { display: block; max-width: none; }
.act-pdf-page-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-soft); font-size: .85rem; }
.act-pdf-error { padding: 28px; color: #9b1620; text-align: center; }
.payment-panel { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 16px clamp(18px, 3vw, 36px); }
.payment-copy, .payment-qr-card { min-width: 0; }
.payment-qr-card { align-self: start; justify-self: center; max-width: 100%; margin-top: -5px; }
.payment-qr { height: min(420px, 42vw); min-height: 340px; max-height: 420px; }
.golden-marquee-track { animation-duration: 34s; transform: translate3d(0, 0, 0); will-change: transform; }
@media (max-width: 760px) {
  .act-reader-empty, .act-reader-message, .act-reader-offline { min-height: 280px; padding: 26px 18px; }
  .act-reader-toolbar { padding: 12px; }
  .act-reader-titlebar { align-items: flex-start; }
  .act-reader-controls { justify-content: flex-start; }
  .reader-download { margin-left: 0; }
  .act-pdf-viewport { height: 78vh; min-height: 520px; padding: 8px; }
  .payment-qr-card { width: min(100%, 330px); margin-inline: auto; margin-top: 0; }
  .payment-qr { height: 340px; min-height: 0; max-height: min(62vh, 420px); }
  .golden-marquee-track { animation-duration: 40s; }
}
@media (max-width: 560px) { .act-reader-empty, .act-reader-message, .act-reader-offline { min-height: 250px; } }
@media (prefers-reduced-motion: reduce) { .golden-marquee-track { animation-duration: 60s; } }


/* Official online services, categorized, with touch-friendly manual controls. */
.official-sites-section { overflow: hidden; }
.official-feature-grid { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.7fr); gap: 20px; align-items: stretch; margin: 28px 0 38px; }
.working-hours-card, .holiday-live-card { min-width: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.working-hours-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, #102749, #1d4779); color: #fff; }
.working-hours-card .section-label { color: #b9d8ff; }
.working-hours-card h3, .holiday-live-heading h3 { margin: 8px 0 16px; font: 800 clamp(1.25rem, 2vw, 1.65rem)/1.2 "Manrope", sans-serif; }
.working-hours-days { color: rgba(255,255,255,.82); font-weight: 650; }
.working-hours-time { display: block; margin: 10px 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -.035em; }
.working-hours-closed { margin: 0 0 18px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #f4dcaa; font-size: .86rem; font-weight: 700; }
.working-hours-card p { margin: 0; color: rgba(255,255,255,.78); font-size: .88rem; }
.holiday-live-card { padding: 18px; }
.holiday-live-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.holiday-live-heading h3 { margin: 5px 0 0; }
.holiday-live-heading a { flex: 0 0 auto; color: var(--primary); font-weight: 800; }
.holiday-live-frame { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #eef2f7; }
.holiday-live-frame iframe { display: block; width: 100%; height: 430px; border: 0; background: #fff; }
.holiday-live-note { margin: 10px 2px 0; color: var(--text-soft); font-size: .78rem; line-height: 1.5; }
.official-category { margin: 32px 0 38px; }
.official-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.official-category-heading h3 { margin: 0 0 5px; color: var(--text); font: 800 clamp(1.25rem, 2.2vw, 1.7rem)/1.2 "Manrope", sans-serif; }
.official-category-heading p { margin: 0; color: var(--text-soft); font-size: .92rem; }
.official-carousel-controls { display: flex; flex: 0 0 auto; gap: 8px; }
.official-arrow { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(22,52,93,.16); border-radius: 50%; background: #fff; color: #173c70; box-shadow: 0 5px 14px rgba(14,39,75,.11); font: 800 1.6rem/1 Arial,sans-serif; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.official-arrow:hover, .official-arrow:focus-visible { transform: translateY(-2px); background: #173c70; color: #fff; outline: 2px solid #83b7ff; outline-offset: 2px; }
.official-links-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(23,60,112,.4) transparent; padding: 2px 2px 13px; }
.official-links-viewport:focus-visible { outline: 2px solid #83b7ff; outline-offset: 3px; border-radius: 12px; }
.official-links-track { display: flex; align-items: stretch; gap: 16px; width: max-content; }
.official-link-card { flex: 0 0 clamp(245px, 24vw, 292px); min-height: 320px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 24px rgba(12,34,68,.1); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.official-link-card:hover, .official-link-card:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(12,34,68,.17); outline: 2px solid rgba(42,112,198,.38); outline-offset: 2px; }
.official-link-photo { position: relative; height: 158px; overflow: hidden; background: linear-gradient(135deg,#102749,#32699a); }
.official-link-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,20,42,.02),rgba(5,20,42,.48)); content: ""; }
.official-link-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.official-link-card:hover .official-link-photo > img { transform: scale(1.06); }
.official-link-logo { position: absolute; z-index: 1; right: 14px; bottom: 13px; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.2); }
.official-link-logo img { width: 32px; height: 32px; object-fit: contain; }
.official-link-number { position: absolute; z-index: 1; left: 14px; bottom: 16px; color: #fff; font: 800 .8rem "Inter",sans-serif; letter-spacing: .12em; }
.official-link-copy { padding: 17px 17px 19px; }
.official-link-copy h4 { margin: 0 0 8px; color: var(--text); font: 800 1.03rem/1.35 "Manrope",sans-serif; }
.official-link-copy p { min-height: 44px; margin: 0 0 14px; color: var(--text-soft); font-size: .84rem; line-height: 1.5; }
.official-link-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--primary-light); font-size: .8rem; font-weight: 800; }
.act-loading-card { flex-direction: row; justify-content: space-between; text-align: left; gap: clamp(20px, 6vw, 76px); padding-inline: clamp(22px, 6vw, 80px); background: radial-gradient(ellipse at 85% 45%,rgba(62,139,203,.13),transparent 32%),linear-gradient(135deg,#f8fbff,#eef3fa); }
.act-loading-copy { max-width: 620px; }
.act-loading-kicker { color: var(--primary-light); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.act-reader-empty h3, .act-loading-copy h3 { margin: 7px 0 0; color: var(--text); font: 800 clamp(1.3rem, 2.8vw, 2rem)/1.2 "Manrope",sans-serif; }
.act-loading-copy p { margin: 10px 0 0; color: var(--text-soft); font-size: .94rem; line-height: 1.65; }
.act-loading-hourglass { width: clamp(82px, 12vw, 130px); aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; perspective: 500px; filter: drop-shadow(0 15px 18px rgba(29,73,121,.22)); }
.act-loading-hourglass svg { width: 100%; height: 100%; overflow: visible; transform: none; transform-style: flat; }
.act-loading-hourglass .hourglass-turn {
  transform-box: view-box; transform-origin: center;
  animation: hourglassGravityTurn 8s linear infinite;
}
.act-loading-hourglass .hourglass-top-sand,
.act-loading-hourglass .hourglass-bottom-sand { transform-box: fill-box; transform-origin: 50% 100%; }
.act-loading-hourglass .hourglass-top-sand { animation: hourglassTopSand 8s linear infinite; }
.act-loading-hourglass .hourglass-bottom-sand { animation: hourglassBottomSand 8s linear infinite; }
.act-loading-hourglass .hourglass-stream {
  transform-box: fill-box; transform-origin: center;
  animation: hourglassStream 8s linear infinite;
}
.act-loading-hourglass .hourglass-grain { opacity: 0; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; }
.act-loading-hourglass .grain-a { animation-name: hourglassGrainA; }
.act-loading-hourglass .grain-b { animation-name: hourglassGrainB; }
.act-loading-hourglass .grain-c { animation-name: hourglassGrainC; }
@keyframes hourglassGravityTurn {
  0%, 40% { transform: rotate(0deg); }
  48%, 88% { transform: rotate(180deg); }
  96%, 100% { transform: rotate(360deg); }
}
@keyframes hourglassTopSand {
  0%, 4% { transform: scaleY(1); opacity: 1; }
  40%, 48% { transform: scaleY(.025); opacity: .08; }
  50%, 88% { transform: scaleY(1); opacity: 1; }
  96%, 100% { transform: scaleY(1); opacity: 1; }
}
@keyframes hourglassBottomSand {
  0%, 4% { transform: scaleY(.035); opacity: .15; }
  40%, 48% { transform: scaleY(1); opacity: 1; }
  50%, 88% { transform: scaleY(.035); opacity: .15; }
  96%, 100% { transform: scaleY(.035); opacity: .15; }
}
@keyframes hourglassStream {
  0%, 6%, 38%, 40%, 48%, 50%, 52%, 84%, 88%, 96%, 100% { opacity: 0; transform: scaleY(1); }
  8%, 36% { opacity: 1; transform: scaleY(1); }
  54%, 82% { opacity: 1; transform: scaleY(-1); }
}
@keyframes hourglassGrainA {
  0%, 7%, 38%, 40%, 48%, 53%, 86%, 88%, 96%, 100% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; transform: translateY(0); }
  36% { opacity: 1; transform: translateY(23px); }
  55% { opacity: 1; transform: translateY(23px); }
  84% { opacity: 1; transform: translateY(0); }
}
@keyframes hourglassGrainB {
  0%, 13%, 38%, 40%, 48%, 57%, 86%, 88%, 96%, 100% { opacity: 0; transform: translateY(0); }
  16% { opacity: 1; transform: translateY(0); }
  36% { opacity: 1; transform: translateY(17px); }
  59% { opacity: 1; transform: translateY(17px); }
  84% { opacity: 1; transform: translateY(-6px); }
}
@keyframes hourglassGrainC {
  0%, 18%, 38%, 40%, 48%, 61%, 86%, 88%, 96%, 100% { opacity: 0; transform: translateY(0); }
  21% { opacity: 1; transform: translateY(0); }
  36% { opacity: 1; transform: translateY(10px); }
  63% { opacity: 1; transform: translateY(10px); }
  84% { opacity: 1; transform: translateY(-12px); }
}
@media (max-width: 900px) { .official-feature-grid { grid-template-columns: 1fr; } .working-hours-card { min-height: 250px; } }
@media (max-width: 620px) {
  .official-category-heading { gap: 10px; align-items: flex-start; }
  .official-category-heading p { max-width: 290px; font-size: .82rem; }
  .official-carousel-controls { gap: 6px; }
  .official-arrow { width: 34px; height: 34px; }
  .official-links-track { gap: 12px; }
  .official-link-card { flex-basis: min(78vw, 292px); min-height: 300px; }
  .official-link-photo { height: 145px; }
  .holiday-live-card { padding: 14px; }
  .holiday-live-frame iframe { height: 390px; }
  .act-loading-card { min-height: 300px; padding: 25px 18px; gap: 14px; }
  .act-loading-hourglass { width: 70px; }
}
@media (max-width: 420px) { .act-loading-card { align-items: flex-start; } .act-loading-hourglass { width: 58px; } }
@media (prefers-reduced-motion: reduce) { .act-loading-hourglass svg, .act-loading-hourglass .hourglass-turn, .act-loading-hourglass .hourglass-top-sand, .act-loading-hourglass .hourglass-bottom-sand, .act-loading-hourglass .hourglass-stream, .act-loading-hourglass .hourglass-grain { animation: none; } .official-link-card, .official-arrow { transition: none; } }

.holiday-live-preview { display: block; background: #eef2f7; }
.holiday-live-preview img { display: block; width: 100%; height: auto; object-fit: contain; }
.holiday-live-preview:focus-visible { outline: 3px solid #2876c8; outline-offset: -3px; }

/* Service row 3D manual controls */
.service-category-heading { position: relative; padding-right: 104px; }
.service-carousel-controls { display: flex; gap: 9px; position: absolute; right: 2px; top: 4px; z-index: 3; }
.service-arrow-3d, .indian-calendar-nav {
  display: grid; place-items: center; width: 40px; height: 38px; border: 1px solid rgba(255,255,255,.72);
  border-radius: 12px; color: #fff; background: linear-gradient(145deg,#4389e8,#1753a6);
  box-shadow: 0 5px 0 #103c7c, 0 9px 15px rgba(19,63,126,.22);
  font: 800 25px/1 Inter, sans-serif; cursor: pointer; transform: perspective(260px) rotateY(-8deg);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.service-arrow-3d:hover, .indian-calendar-nav:hover { transform: perspective(260px) rotateY(0) translateY(-2px); box-shadow: 0 7px 0 #103c7c, 0 12px 18px rgba(19,63,126,.25); filter: brightness(1.08); }
.service-arrow-3d:active, .indian-calendar-nav:active { transform: translateY(3px); box-shadow: 0 2px 0 #103c7c; }
.service-arrow-3d:focus-visible, .indian-calendar-nav:focus-visible { outline: 3px solid #f3c74f; outline-offset: 3px; }
.live-indian-calendar { min-width: 0; padding: clamp(16px,2.2vw,24px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.indian-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.indian-calendar-heading .section-label { margin: 0; }
.indian-calendar-month-row { display: flex; align-items: center; gap: 12px; }
.indian-calendar-month-row h3 { min-width: 150px; margin: 0; text-align: center; font-size: clamp(1rem,2vw,1.22rem); }
.indian-calendar-nav { width: 34px; height: 32px; border-radius: 10px; font-size: 22px; }
.indian-calendar-link { display: block; color: inherit; text-decoration: none; border-radius: 12px; overflow: hidden; }
.indian-calendar-weekdays, .indian-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.indian-calendar-weekdays { padding: 10px 0; color: var(--text); font-size: .77rem; font-weight: 800; text-align: center; background: rgba(40,100,170,.1); }
.indian-calendar-days { gap: 4px; padding-top: 7px; }
.calendar-day { display: grid; place-items: center; min-height: clamp(35px,5vw,48px); border-radius: 9px; background: rgba(255,255,255,.75); font-size: .9rem; transition: background .18s, transform .18s; }
.calendar-day-empty { background: transparent; }
.indian-calendar-link:hover .calendar-day:not(.calendar-day-empty) { background: rgba(40,100,170,.12); }
.calendar-day.calendar-today { color: white; font-weight: 800; background: #1767ba; box-shadow: 0 3px 9px rgba(23,103,186,.3); }
.indian-calendar-link:focus-visible { outline: 3px solid #1767ba; outline-offset: 3px; }
@media(max-width:620px) {
 .service-category-heading { padding-right: 88px; }
 .service-carousel-controls { right: 0; top: 0; gap: 6px; }
 .service-arrow-3d { width: 35px; height: 34px; border-radius: 10px; font-size: 22px; }
 .indian-calendar-heading { align-items: flex-start; flex-direction: column; }
 .indian-calendar-month-row { align-self: stretch; justify-content: space-between; }
 .indian-calendar-month-row h3 { flex: 1; min-width: 0; }
 .calendar-day { min-height: 36px; font-size: .82rem; }
}
@media(prefers-reduced-motion:reduce) { .service-arrow-3d,.indian-calendar-nav,.calendar-day { transition:none; } }

/* Unified moving Act-card row */
.legal-reference-carousel { position: relative; }
.legal-reference-controls { justify-content: flex-end; margin: 0 2px 10px; }
.legal-reference-marquee { overflow: hidden; padding: 6px 2px 22px; mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent); }
.legal-reference-track { display: flex; width: max-content; will-change: transform; }
.legal-reference-grid { display: flex; flex: 0 0 auto; align-items: stretch; width: max-content; gap: 20px; }
.legal-reference-card { flex: 0 0 clamp(260px, 25vw, 310px); }
@keyframes legalReferenceMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.legal-reference-carousel:hover .legal-reference-track,
.legal-reference-carousel:focus-within .legal-reference-track { animation-play-state: paused; }

/* Match service arrows to the Official Websites controls and hide the row scrollbar. */
.service-arrow-3d {
  width: 38px; height: 38px; border: 1px solid rgba(22,52,93,.16); border-radius: 50%;
  background: #fff; color: #173c70; box-shadow: 0 5px 14px rgba(14,39,75,.11);
  font: 800 1.6rem/1 Arial,sans-serif; transform: none;
}
.service-arrow-3d:hover, .service-arrow-3d:focus-visible {
  transform: translateY(-2px); background: #173c70; color: #fff;
  box-shadow: 0 7px 16px rgba(14,39,75,.18); outline: 2px solid #83b7ff; outline-offset: 2px;
}
.service-arrow-3d:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(14,39,75,.2); }
.official-links-viewport { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 5px; }
.official-links-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media(max-width:620px) {
  .service-arrow-3d { width: 34px; height: 34px; border-radius: 50%; font-size: 1.35rem; }
  .legal-reference-grid { gap: 14px; }
  .legal-reference-card { flex-basis: min(78vw, 292px); }
}
@media(prefers-reduced-motion:reduce) { .legal-reference-track { animation: none !important; } }

/* Hide row controls whenever every card fits in the current viewport. */
.service-category:not(.has-overflow) .service-carousel-controls,
.official-carousel-row:not(.is-overflowing) .official-carousel-controls,
.legal-reference-carousel:not(.is-overflowing) .legal-reference-controls {
  visibility: hidden;
  pointer-events: none;
}


/* Keep the four Indian Acts reference cards fixed in a responsive grid. */
.legal-reference-controls { display: none !important; }
.legal-reference-marquee {
  overflow: visible !important;
  padding: 6px 0 22px;
  mask-image: none;
  -webkit-mask-image: none;
}
.legal-reference-track {
  display: block;
  width: 100%;
  animation: none !important;
  transform: none !important;
}
.legal-reference-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.legal-reference-card { min-width: 0; width: auto; }
@media (max-width: 1050px) {
  .legal-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .legal-reference-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* Fit the supplied payment QR artwork snugly without stretching or cropping it. */
.payment-qr-card {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  line-height: 0;
}
.payment-qr {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 760px) {
  .payment-qr { max-height: min(62vh, 420px); }
}


/* Align the payment QR box with the desk heading on desktop. */
@media (min-width: 761px) {
  .payment-panel {
    grid-template-areas: "heading qr" "copy qr";
    align-items: start;
  }
  .payment-qr-card { align-self: start; margin-top: 0; }
}


/* Clear feedback when the browser cannot open a UPI app. */
.payment-status {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 6px;
  background: rgba(0,0,0,.16);
  color: #fff;
  font-size: .88rem;
  line-height: 1.5;
}
.payment-status[hidden] { display: none; }


/* Restore a full-width, one-column payment flow on narrow screens. */
@media (max-width: 760px) {
  .payment-panel {
    grid-template-areas: "heading" "qr" "copy" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px;
  }
  .payment-heading,
  .payment-copy { width: 100%; min-width: 0; }
  .payment-qr-card {
    width: min(100%, 330px);
    max-width: 330px;
    margin-inline: auto;
  }
  .payment-qr {
    width: auto;
    max-width: 100%;
    max-height: min(62vh, 420px);
  }
}


/* Continuous, seamless official portal card rows, matching the service marquees. */
.official-links-viewport {
  overflow: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 5px;
  touch-action: pan-y;
}
.official-links-viewport::-webkit-scrollbar { display: none; }
.official-links-track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}
.official-links-group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 16px;
  padding-right: 16px;
}
.official-links-group > .official-link-card { flex: 0 0 clamp(245px, 24vw, 292px); }
@keyframes officialCardsMove {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 760px) {
  .official-links-group { gap: 12px; padding-right: 12px; }
  .official-links-group > .official-link-card { flex-basis: min(78vw, 292px); }
}
@media (prefers-reduced-motion: reduce) {
  .official-links-track { animation: none !important; }
}


/* Improve readability and spacing for Hindi copy throughout the site. */
:lang(hi) h1,
:lang(hi) h2,
:lang(hi) h3,
:lang(hi) h4 {
  letter-spacing: normal;
  line-height: 1.3;
}
:lang(hi) p,
:lang(hi) li {
  line-height: 1.75;
}
:lang(hi) .service-card h3,
:lang(hi) .service-card p,
:lang(hi) .official-link-card,
:lang(hi) .faq-question {
  line-height: 1.65;
}
/* The gallery title continues directly into its highlighted span. */
.gallery-section .section-heading h2 span {
  margin-inline-start: .14em;
}


/* Give the primary navigation a little more vertical breathing room. */
.nav-container { min-height: 88px; }
.dropdown-menu { max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
.dropdown-menu a { line-height: 1.45; }
.dropdown-divider { height: 1px; margin: 5px 10px; background: var(--border); }
@media (max-width: 820px) {
  .nav-container { min-height: 82px; }
  .main-nav { top: 82px; max-height: calc(100vh - 82px); overflow-y: auto; }
  .dropdown { width: 100%; }
  .dropdown-btn { width: 100%; padding: 13px 0; text-align: left; border-bottom: 1px solid var(--border); }
  .dropdown-menu { position: static; width: 100%; max-height: 48vh; margin: 0 0 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border); }
  .dropdown-menu a { padding: 11px 14px; }
}
@media (max-width: 560px) {
  .nav-container { min-height: 76px; }
  .main-nav { top: 76px; max-height: calc(100vh - 76px); }
}

@media (min-width: 821px) and (max-width: 1320px) {
  .main-nav { gap: 12px; }
  .main-nav a,
  .dropdown-btn { font-size: 12px; }
}


/* Keep consecutive translated Hindi heading fragments visually separated. */
:lang(hi) .services-section .center-heading h2 span,
:lang(hi) .highlight-box h2 span,
:lang(hi) .faq-layout .section-heading h2 span,
:lang(hi) .legal-reference-section .center-heading h2 span {
  margin-inline-start: .22em;
}


/* Keep dropdown items still while moving the pointer across the menu. */
.dropdown-menu {
  transform: none !important;
  animation: none !important;
  transform-origin: top left;
}
.dropdown-menu a,
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  position: relative;
  box-sizing: border-box;
  transform: none !important;
  padding-inline-start: 15px;
  transition: color 150ms ease, background-color 150ms ease;
}
.dropdown-menu a::after,
.dropdown-menu a:hover::after {
  display: none !important;
  width: 0 !important;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background-color: #edf2f8;
  color: var(--primary);
}


/* Match the Indian Acts heading to its original dark text color and separate its Hindi phrases. */
.legal-reference-section .center-heading h2 {
  color: var(--text);
}
.legal-reference-section .center-heading h2 span {
  color: inherit;
  margin-inline-start: .42em;
}


/* Keep exactly the source text's single normal space before the highlighted title phrase. */
.legal-reference-section .center-heading h2 span {
  margin-inline-start: 0;
}


/* Compact 3D WhatsApp floating button on mobile */
.floating-whatsapp {
  display: none;
}
@media (max-width: 760px) {
  .floating-whatsapp {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1501;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 17px;
    background: linear-gradient(145deg, #49e18b 0%, #20c96a 48%, #087f45 100%);
    color: #fff;
    box-shadow: 0 6px 0 #086b3b, 0 12px 22px rgba(0,0,0,.24), inset 0 2px 2px rgba(255,255,255,.45);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .floating-whatsapp svg {
    display: block;
    width: 31px;
    height: 31px;
    fill: currentColor;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.22));
  }
  .floating-whatsapp:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
  }
  .floating-whatsapp:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #086b3b, 0 5px 12px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.4);
  }
  .floating-whatsapp:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }
}


/* Floating Android app download button for mobile */
.floating-app-download { display: none; }
@media (max-width: 760px) {
  .floating-app-download {
    position: fixed;
    left: 12px;
    right: 80px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1500;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 16px;
    background: linear-gradient(135deg, #35df78 0%, #13b85a 52%, #08783c 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 0 #075e31, 0 12px 22px rgba(0,0,0,.22), inset 0 2px 2px rgba(255,255,255,.4);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .floating-app-download svg { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; filter: drop-shadow(0 2px 1px rgba(0,0,0,.2)); }
  .floating-app-download span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .floating-app-download:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .floating-app-download:active { transform: translateY(4px); box-shadow: 0 2px 0 #075e31, 0 5px 12px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.35); }
  .floating-app-download:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
}


/* Remove the fixed Android app download button from mobile screens. */
@media (max-width: 760px) {
  .floating-app-download {
    display: none !important;
  }
}